refactor: reorganize Financials toolbar and flatten UI

- Group toolbar controls by function (Statement, Period, Mode, Scale)
- Move Trend Chart above Matrix, hidden by default
- Add chart toggle to toolbar actions
- Flatten all sections: remove card styling, use subtle dividers
- Update StatementRowInspector and NormalizationSummary with flat layout

app/globals.css

@@ -1,8 +1,10 @@
 @import "tailwindcss";
 
 :root {
-  --font-display: "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
-  --font-mono: "Menlo", "SFMono-Regular", "Consolas", "Liberation Mono", monospace;
+  --font-display:
+    "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+  --font-mono:
+    "Menlo", "SFMono-Regular", "Consolas", "Liberation Mono", monospace;
   --bg-0: #121417;
   --bg-1: #181b20;
   --bg-2: #21252b;
@@ -57,8 +59,16 @@ body {
   font-family: var(--font-display), sans-serif;
   color: var(--terminal-bright);
   background:
-    radial-gradient(circle at 18% -10%, rgba(170, 178, 188, 0.16), transparent 35%),
-    radial-gradient(circle at 84% 0%, rgba(121, 128, 138, 0.14), transparent 30%),
+    radial-gradient(
+      circle at 18% -10%,
+      rgba(170, 178, 188, 0.16),
+      transparent 35%
+    ),
+    radial-gradient(
+      circle at 84% 0%,
+      rgba(121, 128, 138, 0.14),
+      transparent 30%
+    ),
     linear-gradient(140deg, var(--bg-0), var(--bg-1) 50%, var(--bg-2));
 }
 
@@ -85,7 +95,10 @@ body {
   inset: 0;
   pointer-events: none;
   opacity: 0.24;
-  background-image: radial-gradient(rgba(220, 226, 234, 0.1) 0.7px, transparent 0.7px);
+  background-image: radial-gradient(
+    rgba(220, 226, 234, 0.1) 0.7px,
+    transparent 0.7px
+  );
   background-size: 4px 4px;
 }
 
@@ -114,14 +127,22 @@ textarea {
 .data-surface {
   border: 1px solid var(--line-weak);
   border-radius: 1rem;
-  background: linear-gradient(180deg, rgba(40, 43, 49, 0.92), rgba(24, 27, 32, 0.78));
+  background: linear-gradient(
+    180deg,
+    rgba(40, 43, 49, 0.92),
+    rgba(24, 27, 32, 0.78)
+  );
 }
 
 .data-table-wrap {
   overflow-x: auto;
   border: 1px solid var(--line-weak);
   border-radius: 1rem;
-  background: linear-gradient(180deg, rgba(34, 37, 42, 0.9), rgba(20, 23, 27, 0.76));
+  background: linear-gradient(
+    180deg,
+    rgba(34, 37, 42, 0.9),
+    rgba(20, 23, 27, 0.76)
+  );
 }
 
 .data-table th,
@@ -172,8 +193,16 @@ textarea {
 @media (max-width: 640px) {
   body {
     background:
-      radial-gradient(circle at 24% -4%, rgba(170, 178, 188, 0.14), transparent 36%),
-      radial-gradient(circle at 82% 2%, rgba(121, 128, 138, 0.12), transparent 30%),
+      radial-gradient(
+        circle at 24% -4%,
+        rgba(170, 178, 188, 0.14),
+        transparent 36%
+      ),
+      radial-gradient(
+        circle at 82% 2%,
+        rgba(121, 128, 138, 0.12),
+        transparent 30%
+      ),
       linear-gradient(155deg, var(--bg-0), var(--bg-1) 54%, var(--bg-2));
   }
 
@@ -183,3 +212,207 @@ textarea {
     font-size: 0.8125rem;
   }
 }
+
+.panel-compact {
+  padding: 0.75rem;
+}
+
+.panel-dense {
+  padding: 0.5rem 0.75rem;
+}
+
+.data-table-dense {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.data-table-dense th,
+.data-table-dense td {
+  border-bottom: 1px solid var(--line-weak);
+  padding: 0.5rem 0.6rem;
+  text-align: left;
+  font-size: 0.8125rem;
+  vertical-align: top;
+}
+
+.data-table-dense th {
+  font-family: var(--font-mono), monospace;
+  font-size: 0.6875rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--terminal-muted);
+}
+
+.data-table-dense tbody tr:hover {
+  background-color: rgba(63, 68, 76, 0.32);
+}
+
+.metric-compact {
+  padding-top: 0.5rem;
+}
+
+.metric-compact .metric-value {
+  font-size: 1.25rem;
+}
+
+.metric-compact .metric-label {
+  font-size: 0.625rem;
+}
+
+.index-card-row {
+  display: flex;
+  gap: 0.5rem;
+  overflow-x: auto;
+  padding-bottom: 0.25rem;
+  scrollbar-width: thin;
+}
+
+.index-card-row::-webkit-scrollbar {
+  height: 4px;
+}
+
+.index-card-row::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.index-card-row::-webkit-scrollbar-thumb {
+  background: var(--line-weak);
+  border-radius: 2px;
+}
+
+.index-card {
+  flex-shrink: 0;
+  min-width: 140px;
+  padding: 0.625rem 0.75rem;
+  border-right: 1px solid var(--line-weak);
+}
+
+.index-card:last-child {
+  border-right: none;
+}
+
+.index-card .label {
+  font-family: var(--font-mono), monospace;
+  font-size: 0.625rem;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--terminal-muted);
+}
+
+.index-card .value {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--terminal-bright);
+  margin-top: 0.25rem;
+}
+
+.index-card .delta {
+  font-size: 0.75rem;
+  margin-top: 0.125rem;
+}
+
+.index-card .delta.positive {
+  color: #96f5bf;
+}
+
+.index-card .delta.negative {
+  color: #ff9f9f;
+}
+
+.filter-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.5rem;
+  border: 1px solid var(--line-weak);
+  background: var(--panel-soft);
+  font-size: 0.6875rem;
+  font-family: var(--font-mono), monospace;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--terminal-bright);
+  transition:
+    border-color 0.15s,
+    background-color 0.15s;
+}
+
+.filter-chip:hover {
+  border-color: var(--line-strong);
+}
+
+.filter-chip .remove {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  border-radius: 3px;
+  cursor: pointer;
+  opacity: 0.6;
+  transition:
+    opacity 0.15s,
+    background-color 0.15s;
+}
+
+.filter-chip .remove:hover {
+  opacity: 1;
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.section-divider {
+  border-top: 1px solid var(--line-weak);
+  margin-top: 1rem;
+  padding-top: 1rem;
+}
+
+.section-divider-compact {
+  border-top: 1px solid var(--line-weak);
+  margin-top: 0.75rem;
+  padding-top: 0.75rem;
+}
+
+.toolbar-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.screener-table-wrap {
+  overflow-x: auto;
+  border: 1px solid var(--line-weak);
+  border-radius: 0.75rem;
+  background: linear-gradient(
+    180deg,
+    rgba(34, 37, 42, 0.9),
+    rgba(20, 23, 27, 0.76)
+  );
+}
+
+.screener-table-wrap thead {
+  position: sticky;
+  top: 0;
+  background: rgba(28, 31, 36, 0.95);
+  z-index: 1;
+}
+
+.screener-table-wrap thead::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 1px;
+  background: var(--line-weak);
+}
+
+.control-compact {
+  min-height: 32px;
+  padding: 0.375rem 0.625rem;
+  font-size: 0.75rem;
+}
+
+.control-compact.rounded-xl {
+  border-radius: 0.625rem;
+}

app/page.tsx

@@ -1,31 +1,32 @@
-'use client';
+"use client";
 
-import { useQueryClient } from '@tanstack/react-query';
-import Link from 'next/link';
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { Activity, Bot, RefreshCw, Sparkles } from 'lucide-react';
-import { AppShell } from '@/components/shell/app-shell';
-import { Panel } from '@/components/ui/panel';
-import { Button } from '@/components/ui/button';
-import { MetricCard } from '@/components/dashboard/metric-card';
-import { TaskFeed } from '@/components/dashboard/task-feed';
-import { useAuthGuard } from '@/hooks/use-auth-guard';
-import { useLinkPrefetch } from '@/hooks/use-link-prefetch';
+import { useQueryClient } from "@tanstack/react-query";
+import Link from "next/link";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Activity, Bot, RefreshCw, Sparkles } from "lucide-react";
+import { AppShell } from "@/components/shell/app-shell";
+import { Panel } from "@/components/ui/panel";
+import { Button } from "@/components/ui/button";
+import { TaskFeed } from "@/components/dashboard/task-feed";
+import { IndexCardRow } from "@/components/dashboard/index-card-row";
+import { useAuthGuard } from "@/hooks/use-auth-guard";
+import { useLinkPrefetch } from "@/hooks/use-link-prefetch";
+import { queuePortfolioInsights, queuePriceRefresh } from "@/lib/api";
+import { buildGraphingHref } from "@/lib/graphing/catalog";
+import type { PortfolioInsight, PortfolioSummary, Task } from "@/lib/types";
 import {
-  queuePortfolioInsights,
-  queuePriceRefresh
-} from '@/lib/api';
-import { buildGraphingHref } from '@/lib/graphing/catalog';
-import type { PortfolioInsight, PortfolioSummary, Task } from '@/lib/types';
-import { formatCompactCurrency, formatCurrency, formatPercent } from '@/lib/format';
-import { queryKeys } from '@/lib/query/keys';
+  formatCompactCurrency,
+  formatCurrency,
+  formatPercent,
+} from "@/lib/format";
+import { queryKeys } from "@/lib/query/keys";
 import {
   filingsQueryOptions,
   latestPortfolioInsightQueryOptions,
   portfolioSummaryQueryOptions,
   recentTasksQueryOptions,
-  watchlistQueryOptions
-} from '@/lib/query/options';
+  watchlistQueryOptions,
+} from "@/lib/query/options";
 
 type DashboardState = {
   summary: PortfolioSummary;
@@ -38,15 +39,15 @@ type DashboardState = {
 const EMPTY_STATE: DashboardState = {
   summary: {
     positions: 0,
-    total_value: '0',
-    total_gain_loss: '0',
-    total_cost_basis: '0',
-    avg_return_pct: '0'
+    total_value: "0",
+    total_gain_loss: "0",
+    total_cost_basis: "0",
+    avg_return_pct: "0",
   },
   filingsCount: 0,
   watchlistCount: 0,
   tasks: [],
-  latestInsight: null
+  latestInsight: null,
 };
 
 export default function CommandCenterPage() {
@@ -71,23 +72,24 @@ export default function CommandCenterPage() {
     setError(null);
 
     try {
-      const [summaryRes, filingsRes, watchlistRes, tasksRes, insightRes] = await Promise.all([
-        queryClient.ensureQueryData(summaryOptions),
-        queryClient.ensureQueryData(filingsOptions),
-        queryClient.ensureQueryData(watchlistOptions),
-        queryClient.ensureQueryData(tasksOptions),
-        queryClient.ensureQueryData(insightOptions)
-      ]);
+      const [summaryRes, filingsRes, watchlistRes, tasksRes, insightRes] =
+        await Promise.all([
+          queryClient.ensureQueryData(summaryOptions),
+          queryClient.ensureQueryData(filingsOptions),
+          queryClient.ensureQueryData(watchlistOptions),
+          queryClient.ensureQueryData(tasksOptions),
+          queryClient.ensureQueryData(insightOptions),
+        ]);
 
       setState({
         summary: summaryRes.summary,
         filingsCount: filingsRes.filings.length,
         watchlistCount: watchlistRes.items.length,
         tasks: tasksRes.tasks,
-        latestInsight: insightRes.insight
+        latestInsight: insightRes.insight,
       });
     } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to load dashboard');
+      setError(err instanceof Error ? err.message : "Failed to load dashboard");
     } finally {
       setLoading(false);
     }
@@ -100,39 +102,55 @@ export default function CommandCenterPage() {
   }, [isPending, isAuthenticated, loadData]);
 
   const headerActions = (
-    <>
+    <div className="flex gap-2">
       <Button
         variant="secondary"
+        size="compact"
         onClick={async () => {
           try {
             await queuePriceRefresh();
-            void queryClient.invalidateQueries({ queryKey: queryKeys.recentTasks(20) });
-            void queryClient.invalidateQueries({ queryKey: queryKeys.portfolioSummary() });
+            void queryClient.invalidateQueries({
+              queryKey: queryKeys.recentTasks(20),
+            });
+            void queryClient.invalidateQueries({
+              queryKey: queryKeys.portfolioSummary(),
+            });
             await loadData();
           } catch (err) {
-            setError(err instanceof Error ? err.message : 'Failed to queue price refresh');
+            setError(
+              err instanceof Error
+                ? err.message
+                : "Failed to queue price refresh",
+            );
           }
         }}
       >
-        <RefreshCw className="size-4" />
-        Refresh prices
+        <RefreshCw className="size-3.5" />
+        Refresh
       </Button>
       <Button
+        size="compact"
         onClick={async () => {
           try {
             await queuePortfolioInsights();
-            void queryClient.invalidateQueries({ queryKey: queryKeys.recentTasks(20) });
-            void queryClient.invalidateQueries({ queryKey: queryKeys.latestPortfolioInsight() });
+            void queryClient.invalidateQueries({
+              queryKey: queryKeys.recentTasks(20),
+            });
+            void queryClient.invalidateQueries({
+              queryKey: queryKeys.latestPortfolioInsight(),
+            });
             await loadData();
           } catch (err) {
-            setError(err instanceof Error ? err.message : 'Failed to queue AI insight');
+            setError(
+              err instanceof Error ? err.message : "Failed to queue AI insight",
+            );
           }
         }}
       >
-        <Sparkles className="size-4" />
-        Queue AI insight
+        <Sparkles className="size-3.5" />
+        AI Insight
       </Button>
-    </>
+    </div>
   );
 
   const signedGain = useMemo(() => {
@@ -140,114 +158,200 @@ export default function CommandCenterPage() {
     return gain >= 0 ? `+${formatCurrency(gain)}` : formatCurrency(gain);
   }, [state.summary.total_gain_loss]);
 
+  const indexCards = useMemo(
+    () => [
+      {
+        label: "Portfolio Value",
+        value: formatCurrency(state.summary.total_value),
+        delta: formatCompactCurrency(state.summary.total_cost_basis),
+      },
+      {
+        label: "Unrealized P&L",
+        value: signedGain,
+        delta: formatPercent(state.summary.avg_return_pct),
+        positive: Number(state.summary.total_gain_loss) >= 0,
+      },
+      {
+        label: "Filings",
+        value: String(state.filingsCount),
+        delta: "Last 200",
+      },
+      {
+        label: "Coverage",
+        value: String(state.watchlistCount),
+        delta: `${state.summary.positions} active`,
+      },
+    ],
+    [state, signedGain],
+  );
+
   if (isPending || !isAuthenticated) {
-    return <div className="flex min-h-screen items-center justify-center text-sm text-[color:var(--terminal-muted)]">Booting secure terminal...</div>;
+    return (
+      <div className="flex min-h-screen items-center justify-center text-sm text-[color:var(--terminal-muted)]">
+        Booting secure terminal...
+      </div>
+    );
   }
 
   return (
     <AppShell
       title="Command Center"
-      subtitle={`Welcome back${session?.user?.name ? `, ${session.user.name}` : ''}. Review tasks, portfolio health, and AI outputs.`}
+      subtitle={
+        session?.user?.name
+          ? `Welcome back, ${session.user.name}`
+          : "Review tasks, portfolio health, and AI outputs."
+      }
       actions={headerActions}
     >
       {error ? (
-        <Panel variant="surface">
-          <p className="text-sm text-[#ffb5b5]">{error}</p>
-        </Panel>
+        <div className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--danger-soft)] px-3 py-2 text-sm text-[#ffb5b5]">
+          {error}
+        </div>
       ) : null}
 
-      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
-        <MetricCard label="Portfolio Value" value={formatCurrency(state.summary.total_value)} delta={formatCompactCurrency(state.summary.total_cost_basis)} />
-        <MetricCard
-          label="Unrealized P&L"
-          value={signedGain}
-          delta={formatPercent(state.summary.avg_return_pct)}
-          positive={Number(state.summary.total_gain_loss) >= 0}
-        />
-        <MetricCard label="Tracked Filings" value={String(state.filingsCount)} delta="Last 200 records" />
-        <MetricCard label="Coverage Names" value={String(state.watchlistCount)} delta={`${state.summary.positions} positions active`} />
+      <div className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)]">
+        <IndexCardRow cards={indexCards} />
       </div>
 
-      <div className="grid grid-cols-1 gap-6 xl:grid-cols-3">
-        <Panel title="Recent Tasks" subtitle="Durable jobs from queue processor" className="xl:col-span-1" variant="surface">
+      <div className="grid grid-cols-1 gap-4 xl:grid-cols-3">
+        <div className="border-t border-[color:var(--line-weak)] pt-4 xl:col-span-1">
+          <div className="mb-3 flex items-center justify-between">
+            <h3 className="text-sm font-semibold text-[color:var(--terminal-bright)]">
+              Recent Tasks
+            </h3>
+            <span className="terminal-caption text-[10px] uppercase tracking-[0.12em] text-[color:var(--terminal-muted)]">
+              Queue Processor
+            </span>
+          </div>
           {loading ? (
-            <p className="text-sm text-[color:var(--terminal-muted)]">Loading tasks...</p>
+            <p className="text-xs text-[color:var(--terminal-muted)]">
+              Loading...
+            </p>
           ) : (
             <TaskFeed tasks={state.tasks} />
           )}
-        </Panel>
+        </div>
 
-        <Panel title="AI Brief" subtitle="Latest portfolio insight from AI SDK (Zhipu)" className="xl:col-span-2" variant="surface">
-          {loading ? (
-            <p className="text-sm text-[color:var(--terminal-muted)]">Loading intelligence output...</p>
-          ) : state.latestInsight ? (
-            <>
-              <div className="mb-3 inline-flex items-center gap-2 rounded-md border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-2 py-1 text-xs text-[color:var(--terminal-muted)]">
-                <Bot className="size-3.5" />
+        <div className="border-t border-[color:var(--line-weak)] pt-4 xl:col-span-2">
+          <div className="mb-3 flex items-center justify-between">
+            <h3 className="text-sm font-semibold text-[color:var(--terminal-bright)]">
+              AI Brief
+            </h3>
+            {state.latestInsight ? (
+              <div className="inline-flex items-center gap-1.5 rounded border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-2 py-0.5 text-[10px] text-[color:var(--terminal-muted)]">
+                <Bot className="size-3" />
                 {state.latestInsight.provider} :: {state.latestInsight.model}
               </div>
-              <p className="whitespace-pre-wrap text-sm leading-6 text-[color:var(--terminal-bright)]">{state.latestInsight.content}</p>
-            </>
+            ) : null}
+          </div>
+          {loading ? (
+            <p className="text-xs text-[color:var(--terminal-muted)]">
+              Loading...
+            </p>
+          ) : state.latestInsight ? (
+            <p className="whitespace-pre-wrap text-sm leading-6 text-[color:var(--terminal-bright)]">
+              {state.latestInsight.content}
+            </p>
           ) : (
-            <p className="text-sm text-[color:var(--terminal-muted)]">No AI brief yet. Queue one from the action bar.</p>
+            <p className="text-xs text-[color:var(--terminal-muted)]">
+              No AI brief yet. Queue one from the action bar.
+            </p>
           )}
-        </Panel>
+        </div>
       </div>
 
-      <Panel title="Quick Links" subtitle="Feature modules">
-        <div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
-          <Link className="border-l-2 border-[color:var(--line-weak)] py-1 pl-4 pr-2 transition hover:border-[color:var(--line-strong)]" href="/analysis">
-            <p className="panel-heading text-xs uppercase text-[color:var(--terminal-muted)]">Overview</p>
-            <p className="mt-2 text-sm text-[color:var(--terminal-bright)]">Inspect one company across price, SEC context, valuation, and recent developments.</p>
-          </Link>
-          <Link className="border-l-2 border-[color:var(--line-weak)] py-1 pl-4 pr-2 transition hover:border-[color:var(--line-strong)]" href="/financials">
-            <p className="panel-heading text-xs uppercase text-[color:var(--terminal-muted)]">Financials</p>
-            <p className="mt-2 text-sm text-[color:var(--terminal-bright)]">Focus on multi-period filing metrics, margins, leverage, and balance sheet composition.</p>
-          </Link>
-          <Link className="border-l-2 border-[color:var(--line-weak)] py-1 pl-4 pr-2 transition hover:border-[color:var(--line-strong)]" href={buildGraphingHref()}>
-            <p className="panel-heading text-xs uppercase text-[color:var(--terminal-muted)]">Graphing</p>
-            <p className="mt-2 text-sm text-[color:var(--terminal-bright)]">Compare one normalized metric across multiple companies with shareable chart state.</p>
+      <div className="border-t border-[color:var(--line-weak)] pt-4">
+        <h3 className="mb-3 text-sm font-semibold text-[color:var(--terminal-bright)]">
+          Quick Links
+        </h3>
+        <div className="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3">
+          <Link
+            className="border-l-2 border-[color:var(--line-weak)] py-1 pl-3 pr-2 transition hover:border-[color:var(--line-strong)]"
+            href="/analysis"
+          >
+            <p className="panel-heading text-[10px] uppercase tracking-[0.14em] text-[color:var(--terminal-muted)]">
+              Overview
+            </p>
+            <p className="mt-1 text-xs text-[color:var(--terminal-bright)]">
+              Company analysis, price, valuation, and developments.
+            </p>
           </Link>
           <Link
-            className="border-l-2 border-[color:var(--line-weak)] py-1 pl-4 pr-2 transition hover:border-[color:var(--line-strong)]"
+            className="border-l-2 border-[color:var(--line-weak)] py-1 pl-3 pr-2 transition hover:border-[color:var(--line-strong)]"
+            href="/financials"
+          >
+            <p className="panel-heading text-[10px] uppercase tracking-[0.14em] text-[color:var(--terminal-muted)]">
+              Financials
+            </p>
+            <p className="mt-1 text-xs text-[color:var(--terminal-bright)]">
+              Multi-period metrics, margins, and balance sheet.
+            </p>
+          </Link>
+          <Link
+            className="border-l-2 border-[color:var(--line-weak)] py-1 pl-3 pr-2 transition hover:border-[color:var(--line-strong)]"
+            href={buildGraphingHref()}
+          >
+            <p className="panel-heading text-[10px] uppercase tracking-[0.14em] text-[color:var(--terminal-muted)]">
+              Graphing
+            </p>
+            <p className="mt-1 text-xs text-[color:var(--terminal-bright)]">
+              Compare normalized metrics across companies.
+            </p>
+          </Link>
+          <Link
+            className="border-l-2 border-[color:var(--line-weak)] py-1 pl-3 pr-2 transition hover:border-[color:var(--line-strong)]"
             href="/filings"
             onMouseEnter={() => {
-              void queryClient.prefetchQuery(filingsQueryOptions({ limit: 120 }));
+              void queryClient.prefetchQuery(
+                filingsQueryOptions({ limit: 120 }),
+              );
             }}
             onFocus={() => {
-              void queryClient.prefetchQuery(filingsQueryOptions({ limit: 120 }));
+              void queryClient.prefetchQuery(
+                filingsQueryOptions({ limit: 120 }),
+              );
             }}
           >
-            <p className="panel-heading text-xs uppercase text-[color:var(--terminal-muted)]">Filings</p>
-            <p className="mt-2 text-sm text-[color:var(--terminal-bright)]">Sync SEC filings and trigger AI memo analysis.</p>
+            <p className="panel-heading text-[10px] uppercase tracking-[0.14em] text-[color:var(--terminal-muted)]">
+              Filings
+            </p>
+            <p className="mt-1 text-xs text-[color:var(--terminal-bright)]">
+              SEC filings and AI memo analysis.
+            </p>
           </Link>
           <Link
-            className="border-l-2 border-[color:var(--line-weak)] py-1 pl-4 pr-2 transition hover:border-[color:var(--line-strong)]"
+            className="border-l-2 border-[color:var(--line-weak)] py-1 pl-3 pr-2 transition hover:border-[color:var(--line-strong)]"
             href="/portfolio"
             onMouseEnter={() => prefetchPortfolioSurfaces()}
             onFocus={() => prefetchPortfolioSurfaces()}
           >
-            <p className="panel-heading text-xs uppercase text-[color:var(--terminal-muted)]">Portfolio</p>
-            <p className="mt-2 text-sm text-[color:var(--terminal-bright)]">Manage the active private portfolio and mark positions to market.</p>
+            <p className="panel-heading text-[10px] uppercase tracking-[0.14em] text-[color:var(--terminal-muted)]">
+              Portfolio
+            </p>
+            <p className="mt-1 text-xs text-[color:var(--terminal-bright)]">
+              Manage positions and mark to market.
+            </p>
           </Link>
           <Link
-            className="border-l-2 border-[color:var(--line-weak)] py-1 pl-4 pr-2 transition hover:border-[color:var(--line-strong)]"
+            className="border-l-2 border-[color:var(--line-weak)] py-1 pl-3 pr-2 transition hover:border-[color:var(--line-strong)]"
             href="/watchlist"
             onMouseEnter={() => prefetchPortfolioSurfaces()}
             onFocus={() => prefetchPortfolioSurfaces()}
           >
-            <p className="panel-heading text-xs uppercase text-[color:var(--terminal-muted)]">Coverage</p>
-            <p className="mt-2 text-sm text-[color:var(--terminal-bright)]">Track research status, review cadence, and filing freshness per company.</p>
+            <p className="panel-heading text-[10px] uppercase tracking-[0.14em] text-[color:var(--terminal-muted)]">
+              Coverage
+            </p>
+            <p className="mt-1 text-xs text-[color:var(--terminal-bright)]">
+              Track research status and filing freshness.
+            </p>
           </Link>
         </div>
-      </Panel>
+      </div>
 
-      <Panel>
-        <div className="flex items-center gap-2 text-xs uppercase tracking-[0.24em] text-[color:var(--terminal-muted)]">
-          <Activity className="size-4" />
-          Runtime state: {loading ? 'syncing' : 'stable'}
-        </div>
-      </Panel>
+      <div className="flex items-center gap-2 text-[10px] uppercase tracking-[0.2em] text-[color:var(--terminal-muted)]">
+        <Activity className="size-3" />
+        Runtime: {loading ? "syncing" : "stable"}
+      </div>
     </AppShell>
   );
 }

bun.lock

@@ -9,6 +9,7 @@
         "@libsql/client": "^0.17.0",
         "@tailwindcss/postcss": "^4.2.1",
         "@tanstack/react-query": "^5.90.21",
+        "@tanstack/react-virtual": "^3.13.23",
         "@workflow/world-postgres": "^4.1.0-beta.42",
         "ai": "^6.0.116",
         "better-auth": "^1.5.4",
@@ -25,6 +26,7 @@
         "recharts": "^3.8.0",
         "sonner": "^2.0.7",
         "sqlite-vec": "^0.1.7-alpha.2",
+        "sqlite-vec-darwin-arm64": "^0.1.7-alpha.2",
         "workflow": "^4.1.0-beta.63",
         "zhipu-ai-provider": "^0.2.2",
       },
@@ -607,6 +609,10 @@
 
     "@tanstack/react-query": ["@tanstack/react-query@5.90.21", "", { "dependencies": { "@tanstack/query-core": "5.90.20" }, "peerDependencies": { "react": "^18 || ^19" } }, "sha512-0Lu6y5t+tvlTJMTO7oh5NSpJfpg/5D41LlThfepTixPYkJ0sE2Jj0m0f6yYqujBwIXlId87e234+MxG3D3g7kg=="],
 
+    "@tanstack/react-virtual": ["@tanstack/react-virtual@3.13.23", "", { "dependencies": { "@tanstack/virtual-core": "3.13.23" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-XnMRnHQ23piOVj2bzJqHrRrLg4r+F86fuBcwteKfbIjJrtGxb4z7tIvPVAe4B+4UVwo9G4Giuz5fmapcrnZ0OQ=="],
+
+    "@tanstack/virtual-core": ["@tanstack/virtual-core@3.13.23", "", {}, "sha512-zSz2Z2HNyLjCplANTDyl3BcdQJc2k1+yyFoKhNRmCr7V7dY8o8q5m8uFTI1/Pg1kL+Hgrz6u3Xo6eFUB7l66cg=="],
+
     "@tokenizer/inflate": ["@tokenizer/inflate@0.4.1", "", { "dependencies": { "debug": "^4.4.3", "token-types": "^6.1.1" } }, "sha512-2mAv+8pkG6GIZiF1kNg1jAjh27IDxEPKwdGul3snfztFerfPGI1LjDezZp3i7BElXompqEtPmoPx6c2wgtWsOA=="],
 
     "@tokenizer/token": ["@tokenizer/token@0.3.0", "", {}, "sha512-OvjF+z51L3ov0OyAU0duzsYuvO01PH7x4t6DJx+guahgTnBHkhJdG7soQeTSFLWN3efnHyibZ4Z8l2EuWwJN3A=="],

components/dashboard/index-card-row.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { memo } from "react";
+import { cn } from "@/lib/utils";
+
+type IndexCardProps = {
+  label: string;
+  value: string;
+  delta?: string;
+  positive?: boolean;
+};
+
+export type { IndexCardProps };
+
+type IndexCardRowProps = {
+  cards: IndexCardProps[];
+  className?: string;
+};
+
+const IndexCard = memo(function IndexCard({
+  label,
+  value,
+  delta,
+  positive = true,
+}: IndexCardProps) {
+  return (
+    <div className="index-card">
+      <p className="label">{label}</p>
+      <p className="value">{value}</p>
+      {delta ? (
+        <p className={cn("delta", positive ? "positive" : "negative")}>
+          {delta}
+        </p>
+      ) : null}
+    </div>
+  );
+});
+
+export function IndexCardRow({ cards, className }: IndexCardRowProps) {
+  return (
+    <div className={cn("index-card-row", className)}>
+      {cards.map((card, index) => (
+        <IndexCard key={`${card.label}-${index}`} {...card} />
+      ))}
+    </div>
+  );
+}

components/dashboard/metric-card.tsx

@@ -1,4 +1,6 @@
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils";
+
+type MetricCardSize = "default" | "compact" | "inline";
 
 type MetricCardProps = {
   label: string;
@@ -6,15 +8,79 @@ type MetricCardProps = {
   delta?: string;
   positive?: boolean;
   className?: string;
+  size?: MetricCardSize;
 };
 
-export function MetricCard({ label, value, delta, positive = true, className }: MetricCardProps) {
+export function MetricCard({
+  label,
+  value,
+  delta,
+  positive = true,
+  className,
+  size = "default",
+}: MetricCardProps) {
+  if (size === "inline") {
+    return (
+      <div className={cn("index-card", className)}>
+        <p className="label">{label}</p>
+        <p className="value">{value}</p>
+        {delta ? (
+          <p className={cn("delta", positive ? "positive" : "negative")}>
+            {delta}
+          </p>
+        ) : null}
+      </div>
+    );
+  }
+
+  if (size === "compact") {
+    return (
+      <div
+        className={cn(
+          "min-w-0 border-t border-[color:var(--line-weak)] pt-2",
+          className,
+        )}
+      >
+        <p className="panel-heading text-[10px] uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">
+          {label}
+        </p>
+        <p className="mt-1 text-xl font-semibold text-[color:var(--terminal-bright)]">
+          {value}
+        </p>
+        {delta ? (
+          <p
+            className={cn(
+              "mt-1 text-[10px]",
+              positive ? "text-[#96f5bf]" : "text-[#ff9898]",
+            )}
+          >
+            {delta}
+          </p>
+        ) : null}
+      </div>
+    );
+  }
+
   return (
-    <div className={cn('min-w-0 border-t border-[color:var(--line-weak)] pt-3', className)}>
-      <p className="panel-heading text-[11px] uppercase tracking-[0.18em] text-[color:var(--terminal-muted)]">{label}</p>
-      <p className="mt-2 text-3xl font-semibold text-[color:var(--terminal-bright)]">{value}</p>
+    <div
+      className={cn(
+        "min-w-0 border-t border-[color:var(--line-weak)] pt-3",
+        className,
+      )}
+    >
+      <p className="panel-heading text-[11px] uppercase tracking-[0.18em] text-[color:var(--terminal-muted)]">
+        {label}
+      </p>
+      <p className="mt-2 text-3xl font-semibold text-[color:var(--terminal-bright)]">
+        {value}
+      </p>
       {delta ? (
-        <p className={cn('mt-2 text-xs', positive ? 'text-[#96f5bf]' : 'text-[#ff9898]')}>
+        <p
+          className={cn(
+            "mt-2 text-xs",
+            positive ? "text-[#96f5bf]" : "text-[#ff9898]",
+          )}
+        >
           {delta}
         </p>
       ) : null}

components/financials/financials-toolbar.tsx

@@ -0,0 +1,240 @@
+"use client";
+
+import {
+  Fragment,
+  memo,
+  useMemo,
+  useCallback,
+  useRef,
+  useEffect,
+  useState,
+} from "react";
+import { Download, Search, BarChart3 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+
+export type FinancialControlOption = {
+  value: string;
+  label: string;
+};
+
+export type FinancialControlSection = {
+  key: string;
+  label: string;
+  options: FinancialControlOption[];
+  value: string;
+  onChange: (value: string) => void;
+};
+
+export type FinancialsToolbarProps = {
+  sections: FinancialControlSection[];
+  searchValue: string;
+  onSearchChange: (value: string) => void;
+  onExport?: () => void;
+  showChart?: boolean;
+  onToggleChart?: () => void;
+  className?: string;
+};
+
+function useDebounce<T>(value: T, delay: number): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}
+
+function ControlGroup({
+  children,
+  showDivider = false,
+}: {
+  children: React.ReactNode;
+  showDivider?: boolean;
+}) {
+  return (
+    <div className="flex items-center gap-1.5">
+      {showDivider && <div className="mr-1.5 h-5 w-px bg-[var(--line-weak)]" />}
+      {children}
+    </div>
+  );
+}
+
+function FinancialsToolbarComponent({
+  sections,
+  searchValue,
+  onSearchChange,
+  onExport,
+  showChart = false,
+  onToggleChart,
+  className,
+}: FinancialsToolbarProps) {
+  const [localSearch, setLocalSearch] = useState(searchValue);
+  const debouncedSearch = useDebounce(localSearch, 300);
+
+  useEffect(() => {
+    onSearchChange(debouncedSearch);
+  }, [debouncedSearch, onSearchChange]);
+
+  useEffect(() => {
+    setLocalSearch(searchValue);
+  }, [searchValue]);
+
+  const groupedSections = useMemo(() => {
+    const statementKeys = ["surface"];
+    const periodKeys = ["cadence"];
+    const modeKeys = ["display"];
+    const scaleKeys = ["scale"];
+
+    return {
+      statement: sections.filter((s) => statementKeys.includes(s.key)),
+      period: sections.filter((s) => periodKeys.includes(s.key)),
+      mode: sections.filter((s) => modeKeys.includes(s.key)),
+      scale: sections.filter((s) => scaleKeys.includes(s.key)),
+    };
+  }, [sections]);
+
+  return (
+    <div className={cn("flex flex-col gap-2", className)}>
+      <div className="flex flex-wrap items-center gap-y-2">
+        <ControlGroup>
+          {groupedSections.statement.map((section) => (
+            <Fragment key={section.key}>
+              {section.options.map((option) => {
+                const isActive = section.value === option.value;
+                return (
+                  <Button
+                    key={`${section.key}-${option.value}`}
+                    variant={isActive ? "secondary" : "ghost"}
+                    size="compact"
+                    onClick={() => section.onChange(option.value)}
+                    className="text-xs"
+                  >
+                    {option.label}
+                  </Button>
+                );
+              })}
+            </Fragment>
+          ))}
+        </ControlGroup>
+
+        <ControlGroup showDivider>
+          {groupedSections.period.map((section) => (
+            <Fragment key={section.key}>
+              {section.options.map((option) => {
+                const isActive = section.value === option.value;
+                return (
+                  <Button
+                    key={`${section.key}-${option.value}`}
+                    variant={isActive ? "secondary" : "ghost"}
+                    size="compact"
+                    onClick={() => section.onChange(option.value)}
+                    className="text-xs"
+                  >
+                    {option.label}
+                  </Button>
+                );
+              })}
+            </Fragment>
+          ))}
+        </ControlGroup>
+
+        {groupedSections.mode.length > 0 && (
+          <ControlGroup showDivider>
+            {groupedSections.mode.map((section) => (
+              <Fragment key={section.key}>
+                {section.options.map((option) => {
+                  const isActive = section.value === option.value;
+                  return (
+                    <Button
+                      key={`${section.key}-${option.value}`}
+                      variant={isActive ? "secondary" : "ghost"}
+                      size="compact"
+                      onClick={() => section.onChange(option.value)}
+                      className="text-xs"
+                    >
+                      {option.label}
+                    </Button>
+                  );
+                })}
+              </Fragment>
+            ))}
+          </ControlGroup>
+        )}
+
+        <ControlGroup showDivider>
+          {groupedSections.scale.map((section) => (
+            <Fragment key={section.key}>
+              {section.options.map((option) => {
+                const isActive = section.value === option.value;
+                return (
+                  <Button
+                    key={`${section.key}-${option.value}`}
+                    variant={isActive ? "secondary" : "ghost"}
+                    size="compact"
+                    onClick={() => section.onChange(option.value)}
+                    className="text-xs"
+                  >
+                    {option.label}
+                  </Button>
+                );
+              })}
+            </Fragment>
+          ))}
+        </ControlGroup>
+
+        <div className="flex-1" />
+
+        <div className="flex items-center gap-2">
+          <div className="relative">
+            <Search className="absolute left-2 top-1/2 h-3 w-3 -translate-y-1/2 text-[var(--terminal-muted)]" />
+            <Input
+              placeholder="Search metrics..."
+              value={localSearch}
+              onChange={(e) => setLocalSearch(e.target.value)}
+              inputSize="compact"
+              className="w-40 pl-7"
+            />
+          </div>
+
+          {onToggleChart && (
+            <Button
+              variant={showChart ? "secondary" : "ghost"}
+              size="compact"
+              onClick={onToggleChart}
+              className="gap-1.5"
+              aria-pressed={showChart}
+            >
+              <BarChart3 className="h-3.5 w-3.5" />
+              <span className="hidden sm:inline">
+                {showChart ? "Hide" : "Show"} Chart
+              </span>
+            </Button>
+          )}
+
+          {onExport && (
+            <Button
+              variant="ghost"
+              size="compact"
+              onClick={onExport}
+              className="gap-1.5"
+            >
+              <Download className="h-3.5 w-3.5" />
+              Export
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export const FinancialsToolbar = memo(FinancialsToolbarComponent);

components/financials/normalization-summary.tsx

@@ -1,66 +1,103 @@
-'use client';
+"use client";
 
-import { AlertTriangle } from 'lucide-react';
-import { Panel } from '@/components/ui/panel';
-import type { NormalizationMetadata } from '@/lib/types';
-import { cn } from '@/lib/utils';
+import { AlertTriangle } from "lucide-react";
+import type { NormalizationMetadata } from "@/lib/types";
+import { cn } from "@/lib/utils";
 
 type NormalizationSummaryProps = {
   normalization: NormalizationMetadata;
 };
 
-function SummaryCard(props: {
+function SummaryField(props: {
   label: string;
   value: string;
-  tone?: 'default' | 'warning';
+  tone?: "default" | "warning";
 }) {
   return (
     <div
       className={cn(
-        'data-surface px-3 py-3',
-        props.tone === 'warning' && 'border-[#7f6250] bg-[linear-gradient(180deg,rgba(80,58,41,0.92),rgba(38,27,21,0.78))]'
+        "py-2",
+        props.tone === "warning" && "border-l-2 border-[#7f6250] pl-3",
       )}
     >
-      <p className="panel-heading text-[10px] uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">{props.label}</p>
-      <p className="mt-1 text-sm font-semibold text-[color:var(--terminal-bright)]">{props.value}</p>
+      <p className="text-[10px] uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">
+        {props.label}
+      </p>
+      <p
+        className={cn(
+          "text-sm font-semibold",
+          props.tone === "warning"
+            ? "text-[#ffd7bf]"
+            : "text-[color:var(--terminal-bright)]",
+        )}
+      >
+        {props.value}
+      </p>
     </div>
   );
 }
 
-export function NormalizationSummary({ normalization }: NormalizationSummaryProps) {
+export function NormalizationSummary({
+  normalization,
+}: NormalizationSummaryProps) {
   const hasMaterialUnmapped = normalization.materialUnmappedRowCount > 0;
   const hasWarnings = normalization.warnings.length > 0;
 
   return (
-    <Panel
-      title="Normalization Summary"
-      subtitle="Pack, parser, and residual mapping health for the compact statement surface."
-      variant="surface"
-    >
-      <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-8">
-        <SummaryCard label="Pack" value={normalization.fiscalPack ?? 'unknown'} />
-        <SummaryCard label="Regime" value={normalization.regime} />
-        <SummaryCard label="Parser" value={`${normalization.parserEngine} ${normalization.parserVersion}`} />
-        <SummaryCard label="Surface Rows" value={String(normalization.surfaceRowCount)} />
-        <SummaryCard label="Detail Rows" value={String(normalization.detailRowCount)} />
-        <SummaryCard label="KPI Rows" value={String(normalization.kpiRowCount)} />
-        <SummaryCard label="Unmapped Rows" value={String(normalization.unmappedRowCount)} />
-        <SummaryCard
+    <section className="border-t border-[color:var(--line-weak)] pt-4">
+      <header className="mb-3">
+        <h3 className="text-sm font-semibold text-[color:var(--terminal-bright)]">
+          Normalization Summary
+        </h3>
+        <p className="text-xs text-[color:var(--terminal-muted)]">
+          Pack, parser, and residual mapping health for the compact statement
+          surface.
+        </p>
+      </header>
+
+      <div className="grid gap-x-6 gap-y-1 md:grid-cols-4 xl:grid-cols-8">
+        <SummaryField
+          label="Pack"
+          value={normalization.fiscalPack ?? "unknown"}
+        />
+        <SummaryField label="Regime" value={normalization.regime} />
+        <SummaryField
+          label="Parser"
+          value={`${normalization.parserEngine} ${normalization.parserVersion}`}
+        />
+        <SummaryField
+          label="Surface Rows"
+          value={String(normalization.surfaceRowCount)}
+        />
+        <SummaryField
+          label="Detail Rows"
+          value={String(normalization.detailRowCount)}
+        />
+        <SummaryField
+          label="KPI Rows"
+          value={String(normalization.kpiRowCount)}
+        />
+        <SummaryField
+          label="Unmapped Rows"
+          value={String(normalization.unmappedRowCount)}
+        />
+        <SummaryField
           label="Material Unmapped"
           value={String(normalization.materialUnmappedRowCount)}
-          tone={hasMaterialUnmapped ? 'warning' : 'default'}
+          tone={hasMaterialUnmapped ? "warning" : "default"}
         />
       </div>
+
       {hasWarnings ? (
-        <div className="mt-3 rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-3">
-          <p className="panel-heading text-[10px] uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">
+        <div className="mt-3 border-t border-[color:var(--line-weak)] pt-3">
+          <p className="text-[10px] uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">
             Parser Warnings
           </p>
           <div className="mt-2 flex flex-wrap gap-2">
             {normalization.warnings.map((warning) => (
               <span
                 key={warning}
-                className="rounded-full border border-[color:var(--line-weak)] bg-[rgba(88,102,122,0.16)] px-3 py-1 text-xs text-[color:var(--terminal-bright)]"
+                className="rounded border border-[color:var(--line-weak)] bg-[rgba(88,102,122,0.16)] px-2 py-0.5 text-xs text-[color:var(--terminal-bright)]"
               >
                 {warning}
               </span>
@@ -68,12 +105,17 @@ export function NormalizationSummary({ normalization }: NormalizationSummaryProp
           </div>
         </div>
       ) : null}
+
       {hasMaterialUnmapped ? (
-        <div className="mt-3 flex items-start gap-2 rounded-xl border border-[#7f6250] bg-[rgba(91,66,46,0.18)] px-3 py-3 text-sm text-[#f5d5c0]">
+        <div className="mt-3 flex items-start gap-2 border-l-2 border-[#7f6250] pl-3 text-sm text-[#f5d5c0]">
           <AlertTriangle className="mt-0.5 size-4 shrink-0" />
-          <p>Material unmapped rows were detected for this filing set. Use the inspector and detail rows before relying on cross-company comparisons.</p>
+          <p>
+            Material unmapped rows were detected for this filing set. Use the
+            inspector and detail rows before relying on cross-company
+            comparisons.
+          </p>
         </div>
       ) : null}
-    </Panel>
+    </section>
   );
 }

components/financials/statement-matrix.tsx

@@ -1,6 +1,7 @@
 'use client';
 
-import { Fragment } from 'react';
+import { Fragment, memo, useMemo, useRef } from 'react';
+import { useVirtualizer } from '@tanstack/react-virtual';
 import { ChevronDown, ChevronRight } from 'lucide-react';
 import type { FinancialStatementPeriod, SurfaceFinancialRow, DetailFinancialRow } from '@/lib/types';
 import { cn } from '@/lib/utils';
@@ -20,6 +21,8 @@ type StatementMatrixProps = {
   onSelectRow: (selection: StatementInspectorSelection) => void;
   renderCellValue: (row: MatrixRow, periodId: string, previousPeriodId: string | null) => string;
   periodLabelFormatter: (value: string) => string;
+  dense?: boolean;
+  virtualized?: boolean;
 };
 
 function isSurfaceNode(node: StatementTreeNode): node is Extract<StatementTreeNode, { kind: 'surface' }> {
@@ -66,22 +69,70 @@ function surfaceBadges(node: Extract<StatementTreeNode, { kind: 'surface' }>) {
   return badges;
 }
 
-function badgeClass(tone: 'default' | 'warning' | 'muted') {
+function badgeClass(tone: 'default' | 'warning' | 'muted', dense?: boolean) {
+  const baseClasses = dense
+    ? 'rounded border px-1 py-0.5 text-[9px] uppercase tracking-[0.12em]'
+    : 'rounded-full border px-2 py-0.5 text-[10px] uppercase tracking-[0.14em]';
+
   if (tone === 'warning') {
-    return 'border-[#84614f] bg-[rgba(112,76,54,0.22)] text-[#ffd7bf]';
+    return cn(baseClasses, 'border-[#84614f] bg-[rgba(112,76,54,0.22)] text-[#ffd7bf]');
   }
 
   if (tone === 'muted') {
-    return 'border-[color:var(--line-weak)] bg-[rgba(80,85,92,0.16)] text-[color:var(--terminal-muted)]';
+    return cn(baseClasses, 'border-[color:var(--line-weak)] bg-[rgba(80,85,92,0.16)] text-[color:var(--terminal-muted)]');
   }
 
-  return 'border-[color:var(--line-weak)] bg-[rgba(88,102,122,0.16)] text-[color:var(--terminal-bright)]';
+  return cn(baseClasses, 'border-[color:var(--line-weak)] bg-[rgba(88,102,122,0.16)] text-[color:var(--terminal-bright)]');
 }
 
-function renderNodes(props: StatementMatrixProps & { nodes: StatementTreeNode[] }) {
+// Flatten tree nodes for virtualization
+type FlattenedNode = {
+  node: StatementTreeNode;
+  sectionKey: string;
+  sectionLabel?: string;
+  isSectionHeader?: boolean;
+};
+
+function flattenSections(sections: StatementTreeSection[]): FlattenedNode[] {
+  const result: FlattenedNode[] = [];
+
+  function flattenNodes(nodes: StatementTreeNode[], sectionKey: string): void {
+    for (const node of nodes) {
+      result.push({ node, sectionKey });
+
+      if (node.kind === 'surface' && node.expanded && node.children.length > 0) {
+        flattenNodes(node.children, sectionKey);
+      }
+    }
+  }
+
+  for (const section of sections) {
+    if (section.label) {
+      result.push({
+        node: {} as StatementTreeNode,
+        sectionKey: section.key,
+        sectionLabel: section.label,
+        isSectionHeader: true
+      });
+    }
+    flattenNodes(section.nodes, section.key);
+  }
+
+  return result;
+}
+
+function renderNodes(props: StatementMatrixProps & { nodes: StatementTreeNode[]; dense?: boolean }) {
+  const { dense = false } = props;
+  const buttonSize = dense ? 'size-7' : 'size-11';
+  const buttonClass = dense ? 'rounded' : 'rounded-lg';
+  const labelSize = dense ? 'text-[13px]' : 'text-sm';
+  const detailLabelSize = dense ? 'text-xs' : 'text-[13px]';
+  const paddingY = dense ? 'py-1.5' : 'py-2';
+  const gapClass = dense ? 'gap-1' : 'gap-2';
+
   return props.nodes.map((node) => {
     const isSelected = rowSelected(node, props.selectedRowRef);
-    const labelIndent = node.kind === 'detail' ? node.level * 18 + 18 : node.level * 18;
+    const labelIndent = node.kind === 'detail' ? node.level * 16 + 16 : node.level * 16;
     const canToggle = isSurfaceNode(node) && node.expandable;
     const nextSelection: StatementInspectorSelection = node.kind === 'surface'
       ? { kind: 'surface', key: node.row.key }
@@ -91,40 +142,45 @@ function renderNodes(props: StatementMatrixProps & { nodes: StatementTreeNode[]
       <Fragment key={node.id}>
         <tr className={cn(isSelected && 'bg-[color:rgba(70,77,87,0.48)]')}>
           <td className="sticky left-0 z-10 bg-[color:var(--panel)]">
-            <div className="flex min-w-[260px] items-start gap-2" style={{ paddingLeft: `${labelIndent}px` }}>
+            <div className={cn('flex min-w-[240px] items-start', gapClass)} style={{ paddingLeft: `${labelIndent}px` }}>
               {canToggle ? (
                 <button
                   type="button"
                   aria-label={`${node.expanded ? 'Collapse' : 'Expand'} ${node.row.label} details`}
                   aria-expanded={node.expanded}
                   aria-controls={`statement-children-${node.id}`}
-                  className="mt-0.5 inline-flex size-11 shrink-0 items-center justify-center rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] text-[color:var(--terminal-bright)] transition hover:border-[color:var(--line-strong)]"
+                  className={cn(
+                    'mt-0.5 inline-flex shrink-0 items-center justify-center border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] text-[color:var(--terminal-bright)] transition hover:border-[color:var(--line-strong)]',
+                    buttonSize,
+                    buttonClass
+                  )}
                   onClick={(event) => {
                     event.stopPropagation();
                     props.onToggleRow(node.row.key);
                   }}
                 >
-                  {node.expanded ? <ChevronDown className="size-4" /> : <ChevronRight className="size-4" />}
+                  {node.expanded ? <ChevronDown className="size-3.5" /> : <ChevronRight className="size-3.5" />}
                 </button>
               ) : (
-                <span className="inline-flex size-11 shrink-0 items-center justify-center text-[color:var(--terminal-muted)]" aria-hidden="true">
+                <span className={cn('inline-flex shrink-0 items-center justify-center text-[color:var(--terminal-muted)]', buttonSize)} aria-hidden="true">
                   {node.kind === 'detail' ? '·' : ''}
                 </span>
               )}
               <button
                 type="button"
-                className="flex min-w-0 flex-1 flex-col items-start gap-1 py-2 text-left"
+                className={cn('flex min-w-0 flex-1 flex-col items-start gap-0.5 text-left', paddingY)}
                 onClick={() => props.onSelectRow(nextSelection)}
               >
                 <span className={cn(
-                  'text-sm text-[color:var(--terminal-bright)]',
-                  node.kind === 'detail' && 'text-[13px] text-[color:var(--terminal-soft)]',
+                  labelSize,
+                  'text-[color:var(--terminal-bright)]',
+                  node.kind === 'detail' && cn(detailLabelSize, 'text-[color:var(--terminal-soft)]'),
                   node.kind === 'surface' && node.level > 0 && 'text-[color:var(--terminal-soft)]'
                 )}>
                   {node.row.label}
                 </span>
                 {node.kind === 'detail' ? (
-                  <span className="text-xs text-[color:var(--terminal-muted)]">
+                  <span className="text-[10px] text-[color:var(--terminal-muted)]">
                     {node.row.localName}
                     {node.row.residualFlag ? ' · residual' : ''}
                   </span>
@@ -133,10 +189,7 @@ function renderNodes(props: StatementMatrixProps & { nodes: StatementTreeNode[]
                     {surfaceBadges(node).map((badge) => (
                       <span
                         key={`${node.row.key}-${badge.label}`}
-                        className={cn(
-                          'rounded-full border px-2 py-0.5 text-[10px] uppercase tracking-[0.14em]',
-                          badgeClass(badge.tone)
-                        )}
+                        className={badgeClass(badge.tone, dense)}
                       >
                         {badge.label}
                       </span>
@@ -147,7 +200,7 @@ function renderNodes(props: StatementMatrixProps & { nodes: StatementTreeNode[]
             </div>
           </td>
           {props.periods.map((period, index) => (
-            <td key={`${node.id}-${period.id}`}>
+            <td key={`${node.id}-${period.id}`} className="font-mono text-xs">
               {props.renderCellValue(node.row, period.id, index > 0 ? props.periods[index - 1]?.id ?? null : null)}
             </td>
           ))}
@@ -159,7 +212,8 @@ function renderNodes(props: StatementMatrixProps & { nodes: StatementTreeNode[]
             </tr>
             {renderNodes({
               ...props,
-              nodes: node.children
+              nodes: node.children,
+              dense
             })}
           </>
         ) : null}
@@ -169,12 +223,74 @@ function renderNodes(props: StatementMatrixProps & { nodes: StatementTreeNode[]
 }
 
 export function StatementMatrix(props: StatementMatrixProps) {
+  const { dense = false, virtualized = false } = props;
+  const tableClass = dense ? 'data-table-dense min-w-[960px]' : 'data-table min-w-[1040px]';
+
+  // Hooks must be called unconditionally
+  const parentRef = useRef<HTMLDivElement>(null);
+  const flatRows = useMemo(() => flattenSections(props.sections), [props.sections]);
+
+  const virtualizer = useVirtualizer({
+    count: flatRows.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: (index) => {
+      const item = flatRows[index];
+      if (item.isSectionHeader) return dense ? 32 : 40;
+      if (item.node.kind === 'surface' && surfaceBadges(item.node as any).length > 0) return dense ? 44 : 56;
+      return dense ? 36 : 48;
+    },
+    overscan: 10,
+  });
+
+  // Non-virtualized version (original implementation with dense support)
+  if (!virtualized) {
+    return (
+      <div className="data-table-wrap">
+        <table className={tableClass}>
+          <thead>
+            <tr>
+              <th className="sticky left-0 z-10 bg-[color:var(--panel)]">Metric</th>
+              {props.periods.map((period) => (
+                <th key={period.id}>
+                  <div className="flex flex-col gap-1">
+                    <span>{props.periodLabelFormatter(period.periodEnd ?? period.filingDate)}</span>
+                    <span className="text-[11px] normal-case tracking-normal text-[color:var(--terminal-muted)]">{period.filingType} · {period.periodLabel}</span>
+                  </div>
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {props.sections.map((section) => (
+              <Fragment key={section.key}>
+                {section.label ? (
+                  <tr className="bg-[color:var(--panel-soft)]">
+                    <td colSpan={props.periods.length + 1} className="font-semibold text-[color:var(--terminal-bright)]">
+                      {section.label}
+                    </td>
+                  </tr>
+                ) : null}
+                {renderNodes({
+                  ...props,
+                  nodes: section.nodes,
+                  dense
+                })}
+              </Fragment>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    );
+  }
+
+  // Virtualized version for large datasets
+
   return (
-    <div className="data-table-wrap">
-      <table className="data-table min-w-[1040px]">
-        <thead>
+    <div ref={parentRef} className="data-table-wrap h-[600px] overflow-auto">
+      <table className={tableClass}>
+        <thead className="sticky top-0 z-20 bg-[color:var(--panel)]">
           <tr>
-            <th className="sticky left-0 z-10 bg-[color:var(--panel)]">Metric</th>
+            <th className="sticky left-0 z-30 bg-[color:var(--panel)]">Metric</th>
             {props.periods.map((period) => (
               <th key={period.id}>
                 <div className="flex flex-col gap-1">
@@ -185,22 +301,114 @@ export function StatementMatrix(props: StatementMatrixProps) {
             ))}
           </tr>
         </thead>
-        <tbody>
-          {props.sections.map((section) => (
-            <Fragment key={section.key}>
-              {section.label ? (
-                <tr className="bg-[color:var(--panel-soft)]">
+        <tbody
+          style={{ height: `${virtualizer.getTotalSize()}px` }}
+          className="relative"
+        >
+          {virtualizer.getVirtualItems().map((virtualRow) => {
+            const item = flatRows[virtualRow.index];
+
+            if (item.isSectionHeader) {
+              return (
+                <tr
+                  key={`section-${item.sectionKey}`}
+                  className="absolute w-full bg-[color:var(--panel-soft)]"
+                  style={{ transform: `translateY(${virtualRow.start}px)` }}
+                >
                   <td colSpan={props.periods.length + 1} className="font-semibold text-[color:var(--terminal-bright)]">
-                    {section.label}
+                    {item.sectionLabel}
                   </td>
                 </tr>
-              ) : null}
-              {renderNodes({
-                ...props,
-                nodes: section.nodes
-              })}
-            </Fragment>
-          ))}
+              );
+            }
+
+            const node = item.node;
+            const isSelected = rowSelected(node, props.selectedRowRef);
+            const labelIndent = node.kind === 'detail' ? node.level * 16 + 16 : node.level * 16;
+            const canToggle = isSurfaceNode(node) && node.expandable;
+            const nextSelection: StatementInspectorSelection = node.kind === 'surface'
+              ? { kind: 'surface', key: node.row.key }
+              : { kind: 'detail', key: node.row.key, parentKey: node.parentSurfaceKey };
+
+            const buttonSize = dense ? 'size-7' : 'size-11';
+            const buttonClass = dense ? 'rounded' : 'rounded-lg';
+            const labelSize = dense ? 'text-[13px]' : 'text-sm';
+            const detailLabelSize = dense ? 'text-xs' : 'text-[13px]';
+            const paddingY = dense ? 'py-1.5' : 'py-2';
+            const gapClass = dense ? 'gap-1' : 'gap-2';
+
+            return (
+              <tr
+                key={node.id}
+                className={cn('absolute w-full', isSelected && 'bg-[color:rgba(70,77,87,0.48)]')}
+                style={{ transform: `translateY(${virtualRow.start}px)` }}
+              >
+                <td className="sticky left-0 z-10 bg-[color:var(--panel)]">
+                  <div className={cn('flex min-w-[240px] items-start', gapClass)} style={{ paddingLeft: `${labelIndent}px` }}>
+                    {canToggle ? (
+                      <button
+                        type="button"
+                        aria-label={`${node.expanded ? 'Collapse' : 'Expand'} ${node.row.label} details`}
+                        aria-expanded={node.expanded}
+                        aria-controls={`statement-children-${node.id}`}
+                        className={cn(
+                          'mt-0.5 inline-flex shrink-0 items-center justify-center border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] text-[color:var(--terminal-bright)] transition hover:border-[color:var(--line-strong)]',
+                          buttonSize,
+                          buttonClass
+                        )}
+                        onClick={(event) => {
+                          event.stopPropagation();
+                          props.onToggleRow(node.row.key);
+                        }}
+                      >
+                        {node.expanded ? <ChevronDown className="size-3.5" /> : <ChevronRight className="size-3.5" />}
+                      </button>
+                    ) : (
+                      <span className={cn('inline-flex shrink-0 items-center justify-center text-[color:var(--terminal-muted)]', buttonSize)} aria-hidden="true">
+                        {node.kind === 'detail' ? '·' : ''}
+                      </span>
+                    )}
+                    <button
+                      type="button"
+                      className={cn('flex min-w-0 flex-1 flex-col items-start gap-0.5 text-left', paddingY)}
+                      onClick={() => props.onSelectRow(nextSelection)}
+                    >
+                      <span className={cn(
+                        labelSize,
+                        'text-[color:var(--terminal-bright)]',
+                        node.kind === 'detail' && cn(detailLabelSize, 'text-[color:var(--terminal-soft)]'),
+                        node.kind === 'surface' && node.level > 0 && 'text-[color:var(--terminal-soft)]'
+                      )}>
+                        {node.row.label}
+                      </span>
+                      {node.kind === 'detail' ? (
+                        <span className="text-[10px] text-[color:var(--terminal-muted)]">
+                          {node.row.localName}
+                          {node.row.residualFlag ? ' · residual' : ''}
+                        </span>
+                      ) : (
+                        <div className="flex flex-wrap gap-1">
+                          {surfaceBadges(node as any).map((badge) => (
+                            <span
+                              key={`${node.row.key}-${badge.label}`}
+                              className={badgeClass(badge.tone, dense)}
+                            >
+                              {badge.label}
+                            </span>
+                          ))}
+                        </div>
+                      )}
+                    </button>
+                  </div>
+                </td>
+                {props.periods.map((period, index) => (
+                  <td key={`${node.id}-${period.id}`} className="font-mono text-xs">
+                    {props.renderCellValue(node.row, period.id, index > 0 ? props.periods[index - 1]?.id ?? null : null)}
+                  </td>
+                ))}
+              </tr>
+            );
+          })}
         </tbody>
       </table>
     </div>

components/financials/statement-row-inspector.tsx

@@ -1,86 +1,145 @@
-'use client';
+"use client";
 
-import { Panel } from '@/components/ui/panel';
 import type {
   DetailFinancialRow,
   DimensionBreakdownRow,
   FinancialStatementPeriod,
   FinancialSurfaceKind,
-  SurfaceFinancialRow
-} from '@/lib/types';
-import type { ResolvedStatementSelection } from '@/lib/financials/statement-view-model';
+  SurfaceFinancialRow,
+} from "@/lib/types";
+import type { ResolvedStatementSelection } from "@/lib/financials/statement-view-model";
 
 type StatementRowInspectorProps = {
   selection: ResolvedStatementSelection | null;
   dimensionRows: DimensionBreakdownRow[];
   periods: FinancialStatementPeriod[];
-  surfaceKind: Extract<FinancialSurfaceKind, 'income_statement' | 'balance_sheet' | 'cash_flow_statement'>;
-  renderValue: (row: SurfaceFinancialRow | DetailFinancialRow, periodId: string, previousPeriodId: string | null) => string;
-  renderDimensionValue: (value: number | null, rowKey: string, unit: SurfaceFinancialRow['unit']) => string;
+  surfaceKind: Extract<
+    FinancialSurfaceKind,
+    "income_statement" | "balance_sheet" | "cash_flow_statement"
+  >;
+  renderValue: (
+    row: SurfaceFinancialRow | DetailFinancialRow,
+    periodId: string,
+    previousPeriodId: string | null,
+  ) => string;
+  renderDimensionValue: (
+    value: number | null,
+    rowKey: string,
+    unit: SurfaceFinancialRow["unit"],
+  ) => string;
 };
 
-function InspectorCard(props: {
-  label: string;
-  value: string;
-}) {
+function InspectorField(props: { label: string; value: string }) {
   return (
-    <div className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2">
-      <p className="text-[color:var(--terminal-muted)]">{props.label}</p>
-      <p className="font-semibold text-[color:var(--terminal-bright)]">{props.value}</p>
+    <div className="py-1.5">
+      <p className="text-[10px] uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">
+        {props.label}
+      </p>
+      <p className="text-sm font-medium text-[color:var(--terminal-bright)]">
+        {props.value}
+      </p>
     </div>
   );
 }
 
 function renderList(values: string[] | null | undefined) {
-  return (values ?? []).length > 0 ? (values ?? []).join(', ') : 'n/a';
+  return (values ?? []).length > 0 ? (values ?? []).join(", ") : "n/a";
 }
 
 export function StatementRowInspector(props: StatementRowInspectorProps) {
   const selection = props.selection;
-  const parentSurfaceLabel = selection?.kind === 'detail'
-    ? selection.parentSurfaceRow?.label ?? (selection.row.parentSurfaceKey === 'unmapped' ? 'Unmapped / Residual' : selection.row.parentSurfaceKey)
-    : null;
+  const parentSurfaceLabel =
+    selection?.kind === "detail"
+      ? (selection.parentSurfaceRow?.label ??
+        (selection.row.parentSurfaceKey === "unmapped"
+          ? "Unmapped / Residual"
+          : selection.row.parentSurfaceKey))
+      : null;
 
   return (
-    <Panel
-      title="Row Details"
-      subtitle="Inspect compact-surface resolution, raw drill-down rows, and dimensional evidence."
-      variant="surface"
-    >
+    <section className="border-t border-[color:var(--line-weak)] pt-4">
+      <header className="mb-3">
+        <h3 className="text-sm font-semibold text-[color:var(--terminal-bright)]">
+          Row Details
+        </h3>
+        <p className="text-xs text-[color:var(--terminal-muted)]">
+          Inspect compact-surface resolution, raw drill-down rows, and
+          dimensional evidence.
+        </p>
+      </header>
+
       {!selection ? (
-        <p className="text-sm text-[color:var(--terminal-muted)]">Select a compact surface row or raw detail row to inspect details.</p>
-      ) : selection.kind === 'surface' ? (
+        <p className="text-sm text-[color:var(--terminal-muted)]">
+          Select a compact surface row or raw detail row to inspect details.
+        </p>
+      ) : selection.kind === "surface" ? (
         <div className="space-y-4 text-sm">
-          <div className="grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-4">
-            <InspectorCard label="Label" value={selection.row.label} />
-            <InspectorCard label="Key" value={selection.row.key} />
-            <InspectorCard label="Resolution" value={selection.row.resolutionMethod ?? 'direct'} />
-            <InspectorCard label="Confidence" value={selection.row.confidence ?? 'high'} />
+          <div className="grid grid-cols-2 gap-x-6 gap-y-1 md:grid-cols-4">
+            <InspectorField label="Label" value={selection.row.label} />
+            <InspectorField label="Key" value={selection.row.key} />
+            <InspectorField
+              label="Resolution"
+              value={selection.row.resolutionMethod ?? "direct"}
+            />
+            <InspectorField
+              label="Confidence"
+              value={selection.row.confidence ?? "high"}
+            />
           </div>
 
-          <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
-            <InspectorCard label="Source Row Keys" value={renderList(selection.row.sourceRowKeys)} />
-            <InspectorCard label="Source Concepts" value={renderList(selection.row.sourceConcepts)} />
+          <div className="grid grid-cols-2 gap-x-6 gap-y-1">
+            <InspectorField
+              label="Source Row Keys"
+              value={renderList(selection.row.sourceRowKeys)}
+            />
+            <InspectorField
+              label="Source Concepts"
+              value={renderList(selection.row.sourceConcepts)}
+            />
           </div>
 
-          <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
-            <InspectorCard label="Source Fact IDs" value={(selection.row.sourceFactIds ?? []).length > 0 ? (selection.row.sourceFactIds ?? []).join(', ') : 'n/a'} />
-            <InspectorCard label="Warning Codes" value={renderList(selection.row.warningCodes ?? [])} />
+          <div className="grid grid-cols-2 gap-x-6 gap-y-1">
+            <InspectorField
+              label="Source Fact IDs"
+              value={
+                (selection.row.sourceFactIds ?? []).length > 0
+                  ? (selection.row.sourceFactIds ?? []).join(", ")
+                  : "n/a"
+              }
+            />
+            <InspectorField
+              label="Warning Codes"
+              value={renderList(selection.row.warningCodes ?? [])}
+            />
           </div>
 
-          <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
-            <InspectorCard label="Child Surface Rows" value={selection.childSurfaceRows.length > 0 ? selection.childSurfaceRows.map((row) => row.label).join(', ') : 'None'} />
-            <InspectorCard label="Raw Detail Rows" value={String(selection.detailRows.length)} />
+          <div className="grid grid-cols-2 gap-x-6 gap-y-1">
+            <InspectorField
+              label="Child Surface Rows"
+              value={
+                selection.childSurfaceRows.length > 0
+                  ? selection.childSurfaceRows
+                      .map((row) => row.label)
+                      .join(", ")
+                  : "None"
+              }
+            />
+            <InspectorField
+              label="Raw Detail Rows"
+              value={String(selection.detailRows.length)}
+            />
           </div>
 
           {selection.detailRows.length > 0 ? (
-            <div className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-3">
-              <p className="text-[color:var(--terminal-muted)]">Raw Detail Labels</p>
+            <div className="border-t border-[color:var(--line-weak)] pt-3">
+              <p className="text-[10px] uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">
+                Raw Detail Labels
+              </p>
               <div className="mt-2 flex flex-wrap gap-2">
                 {selection.detailRows.map((row) => (
                   <span
                     key={`${selection.row.key}-${row.key}`}
-                    className="rounded-full border border-[color:var(--line-weak)] bg-[rgba(88,102,122,0.16)] px-3 py-1 text-xs text-[color:var(--terminal-bright)]"
+                    className="rounded border border-[color:var(--line-weak)] bg-[rgba(88,102,122,0.16)] px-2 py-0.5 text-xs text-[color:var(--terminal-bright)]"
                   >
                     {row.label}
                   </span>
@@ -91,8 +150,106 @@ export function StatementRowInspector(props: StatementRowInspectorProps) {
 
           {selection.row.hasDimensions ? (
             props.dimensionRows.length === 0 ? (
-              <p className="text-sm text-[color:var(--terminal-muted)]">No dimensional facts were returned for the selected compact row.</p>
+              <p className="text-sm text-[color:var(--terminal-muted)]">
+                No dimensional facts were returned for the selected compact row.
+              </p>
             ) : (
+              <div className="border-t border-[color:var(--line-weak)] pt-3">
+                <div className="data-table-wrap">
+                  <table className="data-table min-w-[760px]">
+                    <thead>
+                      <tr>
+                        <th>Period</th>
+                        <th>Axis</th>
+                        <th>Member</th>
+                        <th>Value</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {props.dimensionRows.map((row, index) => (
+                        <tr
+                          key={`${selection.row.key}-${row.periodId}-${row.axis}-${row.member}-${index}`}
+                        >
+                          <td>
+                            {props.periods.find(
+                              (period) => period.id === row.periodId,
+                            )?.periodLabel ?? row.periodId}
+                          </td>
+                          <td>{row.axis}</td>
+                          <td>{row.member}</td>
+                          <td>
+                            {props.renderDimensionValue(
+                              row.value,
+                              selection.row.key,
+                              selection.row.unit,
+                            )}
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            )
+          ) : (
+            <p className="text-sm text-[color:var(--terminal-muted)]">
+              No dimensional drill-down is available for this compact surface
+              row.
+            </p>
+          )}
+        </div>
+      ) : (
+        <div className="space-y-4 text-sm">
+          <div className="grid grid-cols-2 gap-x-6 gap-y-1 md:grid-cols-4">
+            <InspectorField label="Label" value={selection.row.label} />
+            <InspectorField label="Key" value={selection.row.key} />
+            <InspectorField
+              label="Parent Surface"
+              value={parentSurfaceLabel ?? selection.row.parentSurfaceKey}
+            />
+            <InspectorField
+              label="Residual"
+              value={selection.row.residualFlag ? "Yes" : "No"}
+            />
+          </div>
+
+          <div className="grid grid-cols-2 gap-x-6 gap-y-1">
+            <InspectorField
+              label="Concept Key"
+              value={selection.row.conceptKey}
+            />
+            <InspectorField label="QName" value={selection.row.qname} />
+          </div>
+
+          <div className="grid grid-cols-2 gap-x-6 gap-y-1">
+            <InspectorField
+              label="Local Name"
+              value={selection.row.localName}
+            />
+            <InspectorField
+              label="Source Fact IDs"
+              value={
+                (selection.row.sourceFactIds ?? []).length > 0
+                  ? (selection.row.sourceFactIds ?? []).join(", ")
+                  : "n/a"
+              }
+            />
+          </div>
+
+          <div className="border-t border-[color:var(--line-weak)] pt-3">
+            <InspectorField
+              label="Dimensions Summary"
+              value={renderList(selection.row.dimensionsSummary)}
+            />
+          </div>
+
+          {props.dimensionRows.length === 0 ? (
+            <p className="text-sm text-[color:var(--terminal-muted)]">
+              No dimensional facts were returned for the selected raw detail
+              row.
+            </p>
+          ) : (
+            <div className="border-t border-[color:var(--line-weak)] pt-3">
               <div className="data-table-wrap">
                 <table className="data-table min-w-[760px]">
                   <thead>
@@ -105,73 +262,34 @@ export function StatementRowInspector(props: StatementRowInspectorProps) {
                   </thead>
                   <tbody>
                     {props.dimensionRows.map((row, index) => (
-                      <tr key={`${selection.row.key}-${row.periodId}-${row.axis}-${row.member}-${index}`}>
-                        <td>{props.periods.find((period) => period.id === row.periodId)?.periodLabel ?? row.periodId}</td>
+                      <tr
+                        key={`${selection.row.parentSurfaceKey}-${selection.row.key}-${row.periodId}-${index}`}
+                      >
+                        <td>
+                          {props.periods.find(
+                            (period) => period.id === row.periodId,
+                          )?.periodLabel ?? row.periodId}
+                        </td>
                         <td>{row.axis}</td>
                         <td>{row.member}</td>
-                        <td>{props.renderDimensionValue(row.value, selection.row.key, selection.row.unit)}</td>
+                        <td>
+                          {props.renderDimensionValue(
+                            row.value,
+                            selection.row.key,
+                            props.surfaceKind === "balance_sheet"
+                              ? "currency"
+                              : "currency",
+                          )}
+                        </td>
                       </tr>
                     ))}
                   </tbody>
                 </table>
               </div>
-            )
-          ) : (
-            <p className="text-sm text-[color:var(--terminal-muted)]">No dimensional drill-down is available for this compact surface row.</p>
-          )}
-        </div>
-      ) : (
-        <div className="space-y-4 text-sm">
-          <div className="grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-4">
-            <InspectorCard label="Label" value={selection.row.label} />
-            <InspectorCard label="Key" value={selection.row.key} />
-            <InspectorCard label="Parent Surface" value={parentSurfaceLabel ?? selection.row.parentSurfaceKey} />
-            <InspectorCard label="Residual" value={selection.row.residualFlag ? 'Yes' : 'No'} />
-          </div>
-
-          <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
-            <InspectorCard label="Concept Key" value={selection.row.conceptKey} />
-            <InspectorCard label="QName" value={selection.row.qname} />
-          </div>
-
-          <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
-            <InspectorCard label="Local Name" value={selection.row.localName} />
-            <InspectorCard label="Source Fact IDs" value={(selection.row.sourceFactIds ?? []).length > 0 ? (selection.row.sourceFactIds ?? []).join(', ') : 'n/a'} />
-          </div>
-
-          <div className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2">
-            <p className="text-[color:var(--terminal-muted)]">Dimensions Summary</p>
-            <p className="font-semibold text-[color:var(--terminal-bright)]">{renderList(selection.row.dimensionsSummary)}</p>
-          </div>
-
-          {props.dimensionRows.length === 0 ? (
-            <p className="text-sm text-[color:var(--terminal-muted)]">No dimensional facts were returned for the selected raw detail row.</p>
-          ) : (
-            <div className="data-table-wrap">
-              <table className="data-table min-w-[760px]">
-                <thead>
-                  <tr>
-                    <th>Period</th>
-                    <th>Axis</th>
-                    <th>Member</th>
-                    <th>Value</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {props.dimensionRows.map((row, index) => (
-                    <tr key={`${selection.row.parentSurfaceKey}-${selection.row.key}-${row.periodId}-${index}`}>
-                      <td>{props.periods.find((period) => period.id === row.periodId)?.periodLabel ?? row.periodId}</td>
-                      <td>{row.axis}</td>
-                      <td>{row.member}</td>
-                      <td>{props.renderDimensionValue(row.value, selection.row.key, props.surfaceKind === 'balance_sheet' ? 'currency' : 'currency')}</td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
             </div>
           )}
         </div>
       )}
-    </Panel>
+    </section>
   );
 }

components/shell/app-shell.tsx

@@ -530,7 +530,7 @@ export function AppShell({
           className={cn(
             "hidden shrink-0 flex-col gap-4 border-r border-[color:var(--line-weak)] lg:flex",
             hasMounted ? "transition-[width,padding] duration-200" : "",
-            isSidebarCollapsed ? "w-16 pr-1" : "w-72 pr-4",
+            isSidebarCollapsed ? "w-16 pr-1" : "w-56 pr-4",
           )}
         >
           <div
@@ -655,7 +655,7 @@ export function AppShell({
         </aside>
 
         <div className="min-w-0 flex-1 pb-24 lg:pb-0">
-          <header className="relative mb-4 border-b border-[color:var(--line-weak)] pb-4 pr-16 sm:pb-5 sm:pr-20">
+          <header className="relative mb-3 border-b border-[color:var(--line-weak)] pb-3 pr-16 sm:pb-4 sm:pr-20">
             <div className="absolute right-4 top-4 z-10 sm:right-5 sm:top-5">
               <TaskNotificationsTrigger
                 unreadCount={notifications.unreadCount}
@@ -704,7 +704,7 @@ export function AppShell({
 
           <nav
             aria-label="Breadcrumb"
-            className="mb-6 overflow-x-auto border-b border-[color:var(--line-weak)] pb-3"
+            className="mb-4 overflow-x-auto border-b border-[color:var(--line-weak)] pb-2"
           >
             <ol className="flex min-w-max items-center gap-2 text-xs text-[color:var(--terminal-muted)] sm:min-w-0 sm:flex-wrap">
               {breadcrumbItems.map((item, index) => {
@@ -743,7 +743,7 @@ export function AppShell({
             </ol>
           </nav>
 
-          <main className="min-w-0 space-y-6">{children}</main>
+          <main className="min-w-0 space-y-4">{children}</main>
         </div>
       </div>
 

components/ui/button.tsx

@@ -1,25 +1,42 @@
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils";
 
-type ButtonVariant = 'primary' | 'ghost' | 'danger' | 'secondary';
+type ButtonVariant = "primary" | "ghost" | "danger" | "secondary";
+type ButtonSize = "default" | "compact";
 
 type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
   variant?: ButtonVariant;
+  size?: ButtonSize;
 };
 
 const variantMap: Record<ButtonVariant, string> = {
-  primary: 'border-[color:var(--line-strong)] bg-[color:var(--accent)] text-[#16181c] hover:bg-[color:var(--accent-strong)]',
-  secondary: 'border-[color:var(--line-weak)] bg-[color:var(--panel-bright)] text-[color:var(--terminal-bright)] hover:border-[color:var(--line-strong)] hover:bg-[color:var(--panel)]',
-  ghost: 'border-[color:var(--line-weak)] bg-transparent text-[color:var(--terminal-bright)] hover:border-[color:var(--line-strong)] hover:bg-[color:var(--panel-soft)]',
-  danger: 'border-[color:var(--danger)] bg-[color:var(--danger-soft)] text-[#ffc9c9] hover:bg-[color:var(--danger)] hover:text-[#1e0d0d]'
+  primary:
+    "border-[color:var(--line-strong)] bg-[color:var(--accent)] text-[#16181c] hover:bg-[color:var(--accent-strong)]",
+  secondary:
+    "border-[color:var(--line-weak)] bg-[color:var(--panel-bright)] text-[color:var(--terminal-bright)] hover:border-[color:var(--line-strong)] hover:bg-[color:var(--panel)]",
+  ghost:
+    "border-[color:var(--line-weak)] bg-transparent text-[color:var(--terminal-bright)] hover:border-[color:var(--line-strong)] hover:bg-[color:var(--panel-soft)]",
+  danger:
+    "border-[color:var(--danger)] bg-[color:var(--danger-soft)] text-[#ffc9c9] hover:bg-[color:var(--danger)] hover:text-[#1e0d0d]",
 };
 
-export function Button({ className, variant = 'primary', ...props }: ButtonProps) {
+const sizeMap: Record<ButtonSize, string> = {
+  default: "min-h-11 px-3 py-2 text-sm gap-2",
+  compact: "min-h-8 px-2.5 py-1.5 text-xs gap-1.5",
+};
+
+export function Button({
+  className,
+  variant = "primary",
+  size = "default",
+  ...props
+}: ButtonProps) {
   return (
     <button
       className={cn(
-        'inline-flex min-h-11 items-center justify-center gap-2 rounded-xl border px-3 py-2 text-sm font-medium transition duration-200 disabled:cursor-not-allowed disabled:opacity-50',
+        "inline-flex items-center justify-center rounded-xl border font-medium transition duration-200 disabled:cursor-not-allowed disabled:opacity-50",
         variantMap[variant],
-        className
+        sizeMap[size],
+        className,
       )}
       {...props}
     />

components/ui/filter-chip.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { X } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+type FilterChipProps = {
+  label: string;
+  onRemove: () => void;
+  className?: string;
+};
+
+export function FilterChip({ label, onRemove, className }: FilterChipProps) {
+  return (
+    <span className={cn("filter-chip", className)}>
+      <span className="truncate">{label}</span>
+      <button
+        type="button"
+        onClick={onRemove}
+        className="remove"
+        aria-label={`Remove ${label} filter`}
+      >
+        <X className="size-3" />
+      </button>
+    </span>
+  );
+}

components/ui/input.tsx

@@ -1,13 +1,27 @@
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils";
 
-type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
+type InputSize = "default" | "compact";
 
-export function Input({ className, ...props }: InputProps) {
+type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
+  inputSize?: InputSize;
+};
+
+const sizeMap: Record<InputSize, string> = {
+  default: "min-h-11 px-3 py-2 text-sm",
+  compact: "min-h-8 px-2.5 py-1.5 text-xs",
+};
+
+export function Input({
+  className,
+  inputSize = "default",
+  ...props
+}: InputProps) {
   return (
     <input
       className={cn(
-        'min-h-11 w-full rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2 text-sm text-[color:var(--terminal-bright)] outline-none transition placeholder:text-[color:var(--terminal-muted)] focus:border-[color:var(--line-strong)] focus:shadow-[0_0_0_3px_var(--focus-ring)]',
-        className
+        "w-full rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] text-[color:var(--terminal-bright)] outline-none transition placeholder:text-[color:var(--terminal-muted)] focus:border-[color:var(--line-strong)] focus:shadow-[0_0_0_3px_var(--focus-ring)]",
+        sizeMap[inputSize],
+        className,
       )}
       {...props}
     />

components/ui/panel.tsx

@@ -1,4 +1,7 @@
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils";
+
+type PanelVariant = "flat" | "surface";
+type PanelDensity = "normal" | "compact" | "dense";
 
 type PanelProps = {
   title?: string;
@@ -6,24 +9,82 @@ type PanelProps = {
   actions?: React.ReactNode;
   children: React.ReactNode;
   className?: string;
-  variant?: 'flat' | 'surface';
+  variant?: PanelVariant;
+  density?: PanelDensity;
 };
 
-export function Panel({ title, subtitle, actions, children, className, variant = 'flat' }: PanelProps) {
+const densityStyles: Record<PanelDensity, string> = {
+  normal: "",
+  compact: "",
+  dense: "",
+};
+
+const headerDensityStyles: Record<PanelDensity, string> = {
+  normal: "mb-4",
+  compact: "mb-3",
+  dense: "mb-2",
+};
+
+export function Panel({
+  title,
+  subtitle,
+  actions,
+  children,
+  className,
+  variant = "flat",
+  density = "normal",
+}: PanelProps) {
+  const surfaceStyles =
+    density === "normal"
+      ? "p-4 sm:p-5"
+      : density === "compact"
+        ? "p-3 sm:p-4"
+        : "p-2.5 sm:p-3";
+
+  const flatStyles =
+    density === "normal"
+      ? "pt-4 sm:pt-5"
+      : density === "compact"
+        ? "pt-3 sm:pt-4"
+        : "pt-2.5 sm:pt-3";
+
   return (
     <section
       className={cn(
-        variant === 'surface'
-          ? 'min-w-0 rounded-2xl border border-[color:var(--line-weak)] bg-[color:var(--panel)] p-4 shadow-[0_0_0_1px_rgba(255,255,255,0.03),0_12px_30px_rgba(0,0,0,0.38)] sm:p-5'
-          : 'min-w-0 border-t border-[color:var(--line-weak)] pt-4 sm:pt-5',
-        className
+        "min-w-0",
+        variant === "surface"
+          ? cn(
+              "rounded-2xl border border-[color:var(--line-weak)] bg-[color:var(--panel)] shadow-[0_0_0_1px_rgba(255,255,255,0.03),0_12px_30px_rgba(0,0,0,0.38)]",
+              surfaceStyles,
+            )
+          : cn("border-t border-[color:var(--line-weak)]", flatStyles),
+        densityStyles[density],
+        className,
       )}
     >
-      {(title || subtitle || actions) ? (
-        <header className="mb-4 flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+      {title || subtitle || actions ? (
+        <header
+          className={cn(
+            "flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between",
+            headerDensityStyles[density],
+          )}
+        >
           <div className="min-w-0">
-            {title ? <h3 className="text-base font-semibold text-[color:var(--terminal-bright)]">{title}</h3> : null}
-            {subtitle ? <p className="mt-1 text-sm text-[color:var(--terminal-muted)]">{subtitle}</p> : null}
+            {title ? (
+              <h3 className="text-sm font-semibold text-[color:var(--terminal-bright)]">
+                {title}
+              </h3>
+            ) : null}
+            {subtitle ? (
+              <p
+                className={cn(
+                  "text-xs text-[color:var(--terminal-muted)]",
+                  title ? "mt-0.5" : "",
+                )}
+              >
+                {subtitle}
+              </p>
+            ) : null}
           </div>
           {actions ? <div className="w-full sm:w-auto">{actions}</div> : null}
         </header>

package.json

@@ -40,6 +40,7 @@
     "@libsql/client": "^0.17.0",
     "@tailwindcss/postcss": "^4.2.1",
     "@tanstack/react-query": "^5.90.21",
+    "@tanstack/react-virtual": "^3.13.23",
     "@workflow/world-postgres": "^4.1.0-beta.42",
     "ai": "^6.0.116",
     "better-auth": "^1.5.4",
@@ -56,6 +57,7 @@
     "recharts": "^3.8.0",
     "sonner": "^2.0.7",
     "sqlite-vec": "^0.1.7-alpha.2",
+    "sqlite-vec-darwin-arm64": "^0.1.7-alpha.2",
     "workflow": "^4.1.0-beta.63",
     "zhipu-ai-provider": "^0.2.2"
   },