Recreate Next.js source — shadcn components, chart, types, hooks

Source files were untracked and lost during reset. Recreated: - page.tsx (full 3-tab dashboard), layout.tsx, globals.css (shadcn theme) - types.ts, api.ts, utils.ts - strategy-card.tsx, equity-chart.tsx, positions-panel.tsx - ui/ (7 shadcn wrappers: card, badge, button, table, tabs, sheet, collapsible, select) - Config files: next.config.ts, tsconfig.json, postcss.config.mjs, components.json
2026-08-05 05:05:26 +00:00
parent ac1b33a014
commit a09954017e
23 changed files with 1354 additions and 0 deletions
@@ -0,0 +1,78 @@
+@import "tailwindcss";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --font-sans: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
+  --font-mono: var(--font-jetbrains-mono), ui-monospace, monospace;
+}
+
+:root {
+  --radius: 0.5rem;
+}
+
+.dark {
+  --background: oklch(0.0588 0.0162 269.6475);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.1059 0.0201 269.5991);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.1059 0.0201 269.5991);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.0588 0.0162 269.6475);
+  --secondary: oklch(0.1776 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.1776 0 0);
+  --muted-foreground: oklch(0.7559 0.0125 239.9659);
+  --accent: oklch(0.1776 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.602 0.2378 25.3312);
+  --border: oklch(1 0 0 / 0.1);
+  --input: oklch(1 0 0 / 0.15);
+  --ring: oklch(0.7559 0.0125 239.9659);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+}
+
+* {
+  border-color: var(--border);
+  outline-color: var(--ring);
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: var(--font-sans);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
@@ -0,0 +1,28 @@
+import type { Metadata } from "next";
+import { Inter, JetBrains_Mono } from "next/font/google";
+import "./globals.css";
+
+const inter = Inter({
+  subsets: ["latin"],
+  variable: "--font-inter",
+});
+
+const jetbrainsMono = JetBrains_Mono({
+  subsets: ["latin"],
+  variable: "--font-jetbrains-mono",
+});
+
+export const metadata: Metadata = {
+  title: "FTDT Quant Lab",
+  description: "Professional quantitative trading dashboard — live testnet, paper mainnet, historical backtests",
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" className="dark">
+      <body className={`${inter.variable} ${jetbrainsMono.variable} antialiased`}>
+        {children}
+      </body>
+    </html>
+  );
+}
@@ -0,0 +1,349 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { ChevronDown, ChevronRight, Activity, Database, TrendingUp, TrendingDown, ArrowLeft } from "lucide-react";
+import { StrategyCard } from "@/components/strategy-card";
+import { EquityChart } from "@/components/equity-chart";
+import { PositionsPanel } from "@/components/positions-panel";
+import { useLiveMetrics, usePaperMetrics, fetchHistorical, fetchBacktestDetail, recalcBacktest } from "@/lib/api";
+import type { Strategy, BacktestSummary, BacktestFull, Trade, Position, Order } from "@/lib/types";
+
+type Tab = "live" | "paper" | "historical";
+
+const STRAT_COLORS = ["#22c55e","#3b82f6","#a855f7","#f59e0b","#ef4444","#06b6d4","#ec4899","#84cc16","#6366f1","#14b8a6","#f97316","#8b5cf6"];
+
+export default function Dashboard() {
+  const [tab, setTab] = useState<Tab>("live");
+  const { data: liveData, connected: liveConn } = useLiveMetrics();
+  const { data: paperData } = usePaperMetrics();
+  const [historical, setHistorical] = useState<Record<string, BacktestSummary>>({});
+
+  const [detailOpen, setDetailOpen] = useState(false);
+  const [detailName, setDetailName] = useState("");
+  const [detailTab, setDetailTab] = useState<Tab>("live");
+  const [btFull, setBtFull] = useState<BacktestFull | null>(null);
+  const [feeOn, setFeeOn] = useState(true);
+  const [feeTier, setFeeTier] = useState(0);
+  const [stakingTier, setStakingTier] = useState("none");
+  const [posOpen, setPosOpen] = useState(false);
+
+  useEffect(() => { fetchHistorical().then(setHistorical); }, []);
+
+  const strategies = tab === "live" ? liveData?.strategies ?? {}
+    : tab === "paper" ? paperData?.strategies ?? {}
+    : {};
+
+  const handleCardClick = useCallback(async (name: string, t: Tab) => {
+    setDetailName(name);
+    setDetailTab(t);
+    setBtFull(null);
+    setDetailOpen(true);
+    if (t === "historical") {
+      const ht = historical[name];
+      if (ht) {
+        try {
+          const full = await fetchBacktestDetail(ht.name);
+          setBtFull(full);
+        } catch { /* ignore */ }
+      }
+    }
+  }, [historical]);
+
+  const handleFeeRecalc = useCallback(async () => {
+    if (!detailName || detailTab !== "historical") return;
+    const ht = historical[detailName];
+    if (!ht) return;
+    try {
+      const full = await recalcBacktest(ht.name, feeTier, stakingTier);
+      setBtFull(full);
+    } catch { /* ignore */ }
+  }, [detailName, detailTab, feeTier, stakingTier, historical]);
+
+  const detailStrat = detailTab === "historical" ? null
+    : (tab === "paper" ? paperData : liveData)?.strategies?.[detailName] ?? null;
+
+  let detailEquity: { t: number; v: number }[] = [];
+  let detailTrades: Trade[] = [];
+  let detailPositions: Position[] = [];
+  let detailOrders: Order[] = [];
+
+  if (detailTab === "live" && liveData) {
+    if (detailName) {
+      detailEquity = (liveData.strategy_equity ?? {})[detailName] ?? liveData.equity_history ?? [];
+    }
+    detailTrades = (liveData.trades ?? []).filter((t) => t.strategy === detailName);
+    detailPositions = (liveData.open_positions ?? []).filter((p) => p.strategy === detailName);
+    detailOrders = liveData.open_orders ?? [];
+  } else if (detailTab === "paper" && paperData) {
+    if (detailName) {
+      detailEquity = (paperData.strategy_equity ?? {})[detailName] ?? paperData.equity_history ?? [];
+    }
+    detailTrades = (paperData.per_strategy_trades ?? {})[detailName] ?? [];
+    detailPositions = (paperData.open_positions ?? []).filter((p) => p.strategy === detailName);
+    detailOrders = paperData.open_orders ?? [];
+  } else if (detailTab === "historical" && btFull) {
+    detailEquity = (btFull.equity_curve ?? []).map((e) => ({
+      t: typeof e.t === "string" ? Math.floor(new Date(e.t).getTime() / 1000) : e.t,
+      v: e.v,
+    }));
+    detailTrades = btFull.trades ?? [];
+  }
+
+  if (detailOpen) {
+    return (
+      <div className="min-h-screen bg-background">
+        <header className="sticky top-0 z-50 border-b border-border bg-background/80 backdrop-blur-xl">
+          <div className="flex items-center justify-between px-6 py-3 max-w-[1440px] mx-auto">
+            <div className="flex items-center gap-4">
+              <Button variant="ghost" size="sm" className="h-8 gap-2" onClick={() => setDetailOpen(false)}>
+                <ArrowLeft className="w-4 h-4" />
+                <span className="text-xs">Back</span>
+              </Button>
+              <div>
+                <h1 className="text-sm font-bold tracking-tight">{detailName}</h1>
+                <div className="flex items-center gap-2">
+                  {detailStrat && (
+                    <>
+                      <Badge variant="outline" className="text-[10px]">{detailStrat.type}</Badge>
+                      <Badge variant={detailStrat.status === "running" ? "default" : "secondary"} className="text-[10px]">
+                        {detailStrat.status?.toUpperCase()}
+                      </Badge>
+                      <span className="text-[10px] text-muted-foreground">{detailStrat.instrument}</span>
+                    </>
+                  )}
+                  {detailTab === "historical" && btFull && (
+                    <span className="text-[10px] text-muted-foreground">
+                      30d · {btFull.total_trades} trades · {btFull.fee_model ?? "taker"} model
+                    </span>
+                  )}
+                </div>
+              </div>
+            </div>
+            {detailTab === "historical" && (
+              <div className="flex items-center gap-2">
+                <label className="text-[10px] text-muted-foreground flex items-center gap-1">
+                  <input type="checkbox" checked={feeOn} onChange={(e) => setFeeOn(e.target.checked)} className="rounded" />
+                  Fees
+                </label>
+                <select value={feeTier} onChange={(e) => setFeeTier(Number(e.target.value))} className="text-[10px] bg-card border border-border rounded px-2 py-1 text-foreground h-6">
+                  {["Tier 0 (0.045/0.015%)","Tier 1 >$5M (0.040/0.012%)","Tier 2 >$25M (0.035/0.008%)","Tier 3 >$100M (0.030/0.004%)","Tier 4 >$500M (0.028/0.000%)","Tier 5 >$2B (0.026/0.000%)","Tier 6 >$7B (0.024/0.000%)"].map((t, i) => <option key={i} value={i}>{t}</option>)}
+                </select>
+                <select value={stakingTier} onChange={(e) => setStakingTier(e.target.value)} className="text-[10px] bg-card border border-border rounded px-2 py-1 text-foreground h-6">
+                  {["No Stake","Wood (×0.95)","Bronze (×0.90)","Silver (×0.85)","Gold (×0.80)","Platinum (×0.70)","Diamond (×0.60)"].map((t, i) => <option key={i} value={["none","wood","bronze","silver","gold","platinum","diamond"][i]}>{t}</option>)}
+                </select>
+                <Button size="sm" variant="outline" className="text-[10px] h-6 px-2" onClick={handleFeeRecalc}>
+                  Recalc
+                </Button>
+              </div>
+            )}
+          </div>
+        </header>
+
+        <div className="max-w-[1440px] mx-auto px-6 py-6 space-y-6">
+          {detailStrat && (
+            <p className="text-xs text-muted-foreground leading-relaxed p-4 bg-muted/50 rounded-lg border border-border">
+              {detailStrat.description || "No description available."}
+            </p>
+          )}
+          {detailTab === "historical" && btFull && (
+            <p className="text-xs text-muted-foreground leading-relaxed p-4 bg-muted/50 rounded-lg border border-border">
+              {btFull.strategy} — {btFull.num_periods} periods, {btFull.total_trades} trades,
+              total fees ${btFull.fees_total?.toFixed(2)}, model: {btFull.fee_model ?? "taker"}
+            </p>
+          )}
+
+          <div className="grid grid-cols-3 sm:grid-cols-6 gap-2">
+            {detailStrat ? (
+              [
+                { l: "PnL", v: `$${detailStrat.pnl?.toFixed(4)}` },
+                { l: "PnL%", v: `${detailStrat.pnl_pct >= 0 ? "+" : ""}${detailStrat.pnl_pct?.toFixed(2)}%`, up: detailStrat.pnl_pct >= 0 },
+                { l: "Trades", v: String(detailStrat.trades_today ?? 0) },
+                { l: "Win Rate", v: `${Math.round((detailStrat.win_rate ?? 0) * 100)}%` },
+                { l: "Fees", v: `$${(detailStrat.fee_paid ?? 0).toFixed(4)}`, up: false },
+                { l: "Position", v: (detailStrat.position ?? 0).toFixed(4) },
+              ].map(({ l, v, up }) => (
+                <div key={l} className="p-3 rounded-lg border border-border bg-card/50">
+                  <p className="text-[9px] text-muted-foreground uppercase tracking-wider mb-1">{l}</p>
+                  <p className={`text-sm font-mono font-semibold ${up === true ? "text-green-500" : up === false && l !== "Position" ? "text-red-500" : ""}`}>{v}</p>
+                </div>
+              ))
+            ) : detailTab === "historical" && btFull ? (
+              [
+                { l: feeOn ? "Net PnL" : "Gross PnL", v: `${(feeOn ? (btFull.pnl_net_pct ?? btFull.pnl_pct ?? 0) : (btFull.pnl_gross_pct ?? btFull.pnl_pct ?? 0)) >= 0 ? "+" : ""}${(feeOn ? (btFull.pnl_net_pct ?? btFull.pnl_pct ?? 0) : (btFull.pnl_gross_pct ?? btFull.pnl_pct ?? 0)).toFixed(2)}%`, up: (feeOn ? (btFull.pnl_net_pct ?? btFull.pnl_pct ?? 0) : (btFull.pnl_gross_pct ?? btFull.pnl_pct ?? 0)) >= 0 },
+                { l: "Sharpe", v: (btFull.sharpe ?? 0).toFixed(2) },
+                { l: "Sortino", v: (btFull.sortino ?? 0).toFixed(2) },
+                { l: "Max DD", v: `${((btFull.max_dd ?? 0) * 100).toFixed(1)}%`, up: false },
+                { l: "Win Rate", v: `${Math.round((btFull.win_rate ?? 0) * 100)}%` },
+                { l: "Fees", v: `$${(btFull.fees_total ?? 0).toFixed(2)}`, up: false },
+              ].map(({ l, v, up }) => (
+                <div key={l} className="p-3 rounded-lg border border-border bg-card/50">
+                  <p className="text-[9px] text-muted-foreground uppercase tracking-wider mb-1">{l}</p>
+                  <p className={`text-sm font-mono font-semibold ${up === true ? "text-green-500" : up === false ? "text-red-500" : ""}`}>{v}</p>
+                </div>
+              ))
+            ) : (
+              <div className="col-span-6 text-center text-muted-foreground text-xs py-8">Loading...</div>
+            )}
+          </div>
+
+          {detailEquity.length > 0 && (
+            <div className="rounded-lg border border-border overflow-hidden h-[320px]">
+              <EquityChart data={detailEquity} color={STRAT_COLORS[Object.keys(strategies).indexOf(detailName) % STRAT_COLORS.length] ?? "#22c55e"} height={320} />
+            </div>
+          )}
+
+          {detailTab !== "historical" && (detailPositions.length > 0 || detailOrders.length > 0) && (
+            <div>
+              <h4 className="text-[10px] font-semibold text-muted-foreground uppercase tracking-wider mb-3 pb-2 border-b border-border">
+                Open Positions & Orders {detailName ? `for ${detailName}` : ""}
+              </h4>
+              <PositionsPanel positions={detailPositions} orders={detailOrders} />
+            </div>
+          )}
+
+          <div>
+            <h4 className="text-[10px] font-semibold text-muted-foreground uppercase tracking-wider mb-3 pb-2 border-b border-border">
+              Trade History {detailTrades.length > 0 ? `(${detailTrades.length})` : ""}
+            </h4>
+            {detailTrades.length > 0 ? (
+              <div className="overflow-x-auto rounded-lg border border-border">
+                <Table>
+                  <TableHeader>
+                    <TableRow className="border-border hover:bg-transparent">
+                      <TableHead className="text-[9px] h-7">Time</TableHead>
+                      <TableHead className="text-[9px] h-7">Side</TableHead>
+                      <TableHead className="text-[9px] h-7">Size</TableHead>
+                      <TableHead className="text-[9px] h-7">Price</TableHead>
+                      <TableHead className="text-[9px] h-7 text-right">PnL</TableHead>
+                      <TableHead className="text-[9px] h-7 text-right">Fee</TableHead>
+                      <TableHead className="text-[9px] h-7">Reason</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {detailTrades.slice(-200).reverse().map((t, i) => {
+                      const tp = detailTab === "historical"
+                        ? (feeOn ? (t.pnl_net ?? t.pnl ?? 0) : (t.pnl_gross ?? t.pnl ?? 0))
+                        : (t.pnl ?? 0);
+                      return (
+                        <TableRow key={i} className="border-border/50 hover:bg-muted/30">
+                          <TableCell className="text-[10px] py-1.5 font-mono whitespace-nowrap">{(t.time ?? "").substring(0, 16)}</TableCell>
+                          <TableCell className="text-[10px] py-1.5">
+                            <Badge variant="outline" className={`text-[9px] h-4 px-1.5 border-0 ${(t.side ?? "").indexOf("BUY") >= 0 ? "bg-green-500/10 text-green-500" : "bg-red-500/10 text-red-500"}`}>
+                              {t.side ?? "—"}
+                            </Badge>
+                          </TableCell>
+                          <TableCell className="text-[10px] py-1.5 font-mono">{t.size}</TableCell>
+                          <TableCell className="text-[10px] py-1.5 font-mono">${(t.price ?? 0).toFixed(1)}</TableCell>
+                          <TableCell className={`text-[10px] py-1.5 font-mono text-right ${tp >= 0 ? "text-green-500" : "text-red-500"}`}>
+                            {tp >= 0 ? "+" : ""}${Math.abs(tp).toFixed(4)}
+                          </TableCell>
+                          <TableCell className="text-[10px] py-1.5 font-mono text-right text-red-400">${(t.fee ?? 0).toFixed(4)}</TableCell>
+                          <TableCell className="text-[10px] py-1.5 text-muted-foreground max-w-[300px] truncate" title={t.reason}>
+                            {t.reason ?? "—"}
+                          </TableCell>
+                        </TableRow>
+                      );
+                    })}
+                  </TableBody>
+                </Table>
+              </div>
+            ) : (
+              <p className="text-xs text-muted-foreground text-center py-12">No trades recorded yet</p>
+            )}
+          </div>
+          <div className="h-8" />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-background">
+      <header className="sticky top-0 z-50 border-b border-border bg-background/80 backdrop-blur-xl">
+        <div className="flex items-center justify-between px-6 py-3 max-w-[1440px] mx-auto">
+          <div className="flex items-center gap-3">
+            <span className={`w-2 h-2 rounded-full ${liveConn ? "bg-green-500 animate-pulse" : "bg-red-500"}`} />
+            <div>
+              <h1 className="text-sm font-bold tracking-tight">FTDT Quant Lab</h1>
+              <p className="text-[10px] text-muted-foreground">
+                {tab === "live" ? `Live Testnet · Equity $${liveData?.total_equity?.toFixed(2) ?? "—"}`
+                  : tab === "paper" ? `Paper Mainnet · Equity $${paperData?.total_equity?.toLocaleString() ?? "—"}`
+                  : "Historical · Mainnet Real Data"}
+              </p>
+            </div>
+          </div>
+          <Badge variant={liveConn ? "default" : "destructive"} className="text-[10px] h-5">
+            {liveConn ? "LIVE" : "OFFLINE"}
+          </Badge>
+        </div>
+      </header>
+
+      <div className="border-b border-border bg-background/80 backdrop-blur-xl sticky top-[49px] z-40">
+        <Tabs value={tab} onValueChange={(v) => setTab(v as Tab)} className="max-w-[1440px] mx-auto px-6">
+          <TabsList className="h-10 bg-transparent border-0 gap-0 p-0">
+            <TabsTrigger value="live" className="data-[state=active]:border-b-2 data-[state=active]:border-primary rounded-none px-5 text-xs h-10">
+              Live<Badge variant="outline" className="ml-1.5 text-[9px] h-4 px-1.5 bg-amber-500/10 text-amber-400 border-0">Testnet</Badge>
+            </TabsTrigger>
+            <TabsTrigger value="paper" className="data-[state=active]:border-b-2 data-[state=active]:border-primary rounded-none px-5 text-xs h-10">
+              Paper<Badge variant="outline" className="ml-1.5 text-[9px] h-4 px-1.5 bg-purple-500/10 text-purple-400 border-0">$100K Mainnet</Badge>
+            </TabsTrigger>
+            <TabsTrigger value="historical" className="data-[state=active]:border-b-2 data-[state=active]:border-primary rounded-none px-5 text-xs h-10">
+              Historical<Badge variant="outline" className="ml-1.5 text-[9px] h-4 px-1.5 bg-purple-500/10 text-purple-400 border-0">Real Data</Badge>
+            </TabsTrigger>
+          </TabsList>
+        </Tabs>
+      </div>
+
+      <main className="max-w-[1440px] mx-auto px-6 py-6">
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 mb-6">
+          <AnimatePresence mode="popLayout">
+            {Object.entries(strategies).map(([name, s], i) => (
+              <motion.div key={`${tab}-${name}`} layout initial={{ opacity: 0, y: 8 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, scale: 0.95 }} transition={{ duration: 0.2, delay: i * 0.03 }}>
+                <StrategyCard name={name} strategy={s} tab={tab} onClick={() => handleCardClick(name, tab)} />
+              </motion.div>
+            ))}
+          </AnimatePresence>
+          {tab === "historical" && Object.entries(historical).map(([name, b], i) => (
+            <motion.div key={name} layout initial={{ opacity: 0, y: 8 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.2, delay: i * 0.03 }}>
+              <StrategyCard name={name} tab="historical" onClick={() => handleCardClick(name, "historical")}
+                badge={`30d · ${b.coin ?? "BTC"} · Mainnet`}
+                stats={[{ label: "Sharpe", value: b.sharpe.toFixed(2) }, { label: "Max DD", value: `${(b.max_dd * 100).toFixed(1)}%`, negative: true }, { label: "Win", value: `${Math.round(b.win_rate * 100)}%` }]}
+                pnlPct={b.pnl_pct} status="REAL DATA" />
+            </motion.div>
+          ))}
+        </div>
+
+        <Collapsible open={posOpen} onOpenChange={setPosOpen} className="mb-6">
+          <CollapsibleTrigger className="flex items-center gap-2 text-xs text-muted-foreground hover:text-foreground transition-colors py-1">
+            {posOpen ? <ChevronDown className="w-3 h-3" /> : <ChevronRight className="w-3 h-3" />}
+            Open Positions & Orders ({liveData?.open_positions?.length ?? 0} pos · {liveData?.open_orders?.length ?? 0} ord)
+          </CollapsibleTrigger>
+          <CollapsibleContent>
+            <PositionsPanel positions={liveData?.open_positions ?? []} orders={liveData?.open_orders ?? []} />
+          </CollapsibleContent>
+        </Collapsible>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-3 mb-6">
+          <a href="https://ftdt.io" target="_blank" className="flex items-center gap-3 p-4 rounded-lg border border-border bg-card hover:border-primary/50 transition-colors">
+            <Activity className="w-4 h-4 text-primary" />
+            <div><p className="text-xs font-medium">ftdt.io</p><p className="text-[10px] text-muted-foreground">Main platform</p></div>
+          </a>
+          <a href="https://app.ftdt.io/quant-lab" target="_blank" className="flex items-center gap-3 p-4 rounded-lg border border-border bg-card hover:border-primary/50 transition-colors">
+            <TrendingUp className="w-4 h-4 text-chart-2" />
+            <div><p className="text-xs font-medium">Quant Lab ↗</p><p className="text-[10px] text-muted-foreground">Web dashboard</p></div>
+          </a>
+          <a href="https://git.ftdt.io/rams/ftdt-quant-lab" target="_blank" className="flex items-center gap-3 p-4 rounded-lg border border-border bg-card hover:border-primary/50 transition-colors">
+            <Database className="w-4 h-4 text-chart-3" />
+            <div><p className="text-xs font-medium">Git Repo</p><p className="text-[10px] text-muted-foreground">rams/ftdt-quant-lab</p></div>
+          </a>
+        </div>
+      </main>
+    </div>
+  );
+}