Redesign dashboard/screener UI for improved density and performance

- Add compact/dense CSS tokens for tighter layouts
- Add size prop to Button (default/compact) and Input (default/compact)
- Add density prop to Panel (normal/compact/dense)
- Add size prop to MetricCard (default/compact/inline)
- Create IndexCardRow component for horizontal metric display
- Create FilterChip component for removable filter tags
- Redesign Command Center with flat sections, reduced cards
- Tighten AppShell spacing (sidebar w-56, header mb-3, main space-y-4)

Design goals achieved:
- Denser, cleaner terminal-style layout
- Reduced card usage in favor of flat sections with dividers
- More space-efficient controls and metrics
- Better use of widescreen layouts

app/globals.css

@@ -1,8 +1,10 @@
 @import "tailwindcss";
 
 :root {
-  --font-display: "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+  --font-display:
-  --font-mono: "Menlo", "SFMono-Regular", "Consolas", "Liberation Mono", monospace;
+    "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(
-    radial-gradient(circle at 84% 0%, rgba(121, 128, 138, 0.14), transparent 30%),
+      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(
-      radial-gradient(circle at 82% 2%, rgba(121, 128, 138, 0.12), transparent 30%),
+        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 { useQueryClient } from "@tanstack/react-query";
-import Link from 'next/link';
+import Link from "next/link";
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from "react";
-import { Activity, Bot, RefreshCw, Sparkles } from 'lucide-react';
+import { Activity, Bot, RefreshCw, Sparkles } from "lucide-react";
-import { AppShell } from '@/components/shell/app-shell';
+import { AppShell } from "@/components/shell/app-shell";
-import { Panel } from '@/components/ui/panel';
+import { Panel } from "@/components/ui/panel";
-import { Button } from '@/components/ui/button';
+import { Button } from "@/components/ui/button";
-import { MetricCard } from '@/components/dashboard/metric-card';
+import { TaskFeed } from "@/components/dashboard/task-feed";
-import { TaskFeed } from '@/components/dashboard/task-feed';
+import { IndexCardRow } from "@/components/dashboard/index-card-row";
-import { useAuthGuard } from '@/hooks/use-auth-guard';
+import { useAuthGuard } from "@/hooks/use-auth-guard";
-import { useLinkPrefetch } from '@/hooks/use-link-prefetch';
+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,
+  formatCompactCurrency,
-  queuePriceRefresh
+  formatCurrency,
-} from '@/lib/api';
+  formatPercent,
-import { buildGraphingHref } from '@/lib/graphing/catalog';
+} from "@/lib/format";
-import type { PortfolioInsight, PortfolioSummary, Task } from '@/lib/types';
+import { queryKeys } from "@/lib/query/keys";
-import { formatCompactCurrency, formatCurrency, formatPercent } from '@/lib/format';
-import { queryKeys } from '@/lib/query/keys';
 import {
   filingsQueryOptions,
   latestPortfolioInsightQueryOptions,
   portfolioSummaryQueryOptions,
   recentTasksQueryOptions,
-  watchlistQueryOptions
+  watchlistQueryOptions,
-} from '@/lib/query/options';
+} 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_value: "0",
-    total_gain_loss: '0',
+    total_gain_loss: "0",
-    total_cost_basis: '0',
+    total_cost_basis: "0",
-    avg_return_pct: '0'
+    avg_return_pct: "0",
   },
   filingsCount: 0,
   watchlistCount: 0,
   tasks: [],
-  latestInsight: null
+  latestInsight: null,
 };
 
 export default function CommandCenterPage() {
@@ -71,12 +72,13 @@ export default function CommandCenterPage() {
     setError(null);
 
     try {
-      const [summaryRes, filingsRes, watchlistRes, tasksRes, insightRes] = await Promise.all([
+      const [summaryRes, filingsRes, watchlistRes, tasksRes, insightRes] =
+        await Promise.all([
           queryClient.ensureQueryData(summaryOptions),
           queryClient.ensureQueryData(filingsOptions),
           queryClient.ensureQueryData(watchlistOptions),
           queryClient.ensureQueryData(tasksOptions),
-        queryClient.ensureQueryData(insightOptions)
+          queryClient.ensureQueryData(insightOptions),
         ]);
 
       setState({
@@ -84,10 +86,10 @@ export default function CommandCenterPage() {
         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({
-            void queryClient.invalidateQueries({ queryKey: queryKeys.portfolioSummary() });
+              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" />
+        <RefreshCw className="size-3.5" />
-        Refresh prices
+        Refresh
       </Button>
       <Button
+        size="compact"
         onClick={async () => {
           try {
             await queuePortfolioInsights();
-            void queryClient.invalidateQueries({ queryKey: queryKeys.recentTasks(20) });
+            void queryClient.invalidateQueries({
-            void queryClient.invalidateQueries({ queryKey: queryKeys.latestPortfolioInsight() });
+              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" />
+        <Sparkles className="size-3.5" />
-        Queue AI insight
+        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">
+        <div className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--danger-soft)] px-3 py-2 text-sm text-[#ffb5b5]">
-          <p className="text-sm text-[#ffb5b5]">{error}</p>
+          {error}
-        </Panel>
+        </div>
       ) : null}
 
-      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
+      <div className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)]">
-        <MetricCard label="Portfolio Value" value={formatCurrency(state.summary.total_value)} delta={formatCompactCurrency(state.summary.total_cost_basis)} />
+        <IndexCardRow cards={indexCards} />
-        <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>
 
-      <div className="grid grid-cols-1 gap-6 xl:grid-cols-3">
+      <div className="grid grid-cols-1 gap-4 xl:grid-cols-3">
-        <Panel title="Recent Tasks" subtitle="Durable jobs from queue processor" className="xl:col-span-1" variant="surface">
+        <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">
+        <div className="border-t border-[color:var(--line-weak)] pt-4 xl:col-span-2">
-          {loading ? (
+          <div className="mb-3 flex items-center justify-between">
-            <p className="text-sm text-[color:var(--terminal-muted)]">Loading intelligence output...</p>
+            <h3 className="text-sm font-semibold text-[color:var(--terminal-bright)]">
-          ) : state.latestInsight ? (
+              AI Brief
-            <>
+            </h3>
-              <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)]">
+            {state.latestInsight ? (
-                <Bot className="size-3.5" />
+              <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="border-t border-[color:var(--line-weak)] pt-4">
-        <div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
+        <h3 className="mb-3 text-sm font-semibold text-[color:var(--terminal-bright)]">
-          <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">
+          Quick Links
-            <p className="panel-heading text-xs uppercase text-[color:var(--terminal-muted)]">Overview</p>
+        </h3>
-            <p className="mt-2 text-sm text-[color:var(--terminal-bright)]">Inspect one company across price, SEC context, valuation, and recent developments.</p>
+        <div className="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3">
-          </Link>
+          <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">
+            className="border-l-2 border-[color:var(--line-weak)] py-1 pl-3 pr-2 transition hover:border-[color:var(--line-strong)]"
-            <p className="panel-heading text-xs uppercase text-[color:var(--terminal-muted)]">Financials</p>
+            href="/analysis"
-            <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>
+            <p className="panel-heading text-[10px] uppercase tracking-[0.14em] text-[color:var(--terminal-muted)]">
-          <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()}>
+              Overview
-            <p className="panel-heading text-xs uppercase text-[color:var(--terminal-muted)]">Graphing</p>
+            </p>
-            <p className="mt-2 text-sm text-[color:var(--terminal-bright)]">Compare one normalized metric across multiple companies with shareable chart state.</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="panel-heading text-[10px] uppercase tracking-[0.14em] text-[color:var(--terminal-muted)]">
-            <p className="mt-2 text-sm text-[color:var(--terminal-bright)]">Sync SEC filings and trigger AI memo analysis.</p>
+              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="panel-heading text-[10px] uppercase tracking-[0.14em] text-[color:var(--terminal-muted)]">
-            <p className="mt-2 text-sm text-[color:var(--terminal-bright)]">Manage the active private portfolio and mark positions to market.</p>
+              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="panel-heading text-[10px] uppercase tracking-[0.14em] text-[color:var(--terminal-muted)]">
-            <p className="mt-2 text-sm text-[color:var(--terminal-bright)]">Track research status, review cadence, and filing freshness per company.</p>
+              Coverage
+            </p>
+            <p className="mt-1 text-xs text-[color:var(--terminal-bright)]">
+              Track research status and filing freshness.
+            </p>
           </Link>
         </div>
-      </Panel>
-
-      <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>
   );
 }

components/dashboard/index-card-row.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { memo } from "react";
+import { cn } from "@/lib/utils";
+
+type IndexCardProps = {
+  label: string;
+  value: string;
+  delta?: string;
+  positive?: boolean;
+};
+
+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('min-w-0 border-t border-[color:var(--line-weak)] pt-3', className)}>
+      <div className={cn("index-card", className)}>
-      <p className="panel-heading text-[11px] uppercase tracking-[0.18em] text-[color:var(--terminal-muted)]">{label}</p>
+        <p className="label">{label}</p>
-      <p className="mt-2 text-3xl font-semibold text-[color:var(--terminal-bright)]">{value}</p>
+        <p className="value">{value}</p>
         {delta ? (
-        <p className={cn('mt-2 text-xs', positive ? 'text-[#96f5bf]' : 'text-[#ff9898]')}>
+          <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>
+      {delta ? (
+        <p
+          className={cn(
+            "mt-2 text-xs",
+            positive ? "text-[#96f5bf]" : "text-[#ff9898]",
+          )}
+        >
           {delta}
         </p>
       ) : null}

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)]',
+  primary:
-  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)]',
+    "border-[color:var(--line-strong)] bg-[color:var(--accent)] text-[#16181c] hover:bg-[color:var(--accent-strong)]",
-  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)]',
+  secondary:
-  danger: 'border-[color:var(--danger)] bg-[color:var(--danger-soft)] text-[#ffc9c9] hover:bg-[color:var(--danger)] hover:text-[#1e0d0d]'
+    "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)]',
+        "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)]",
-        className
+        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",
-          ? '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'
+        variant === "surface"
-          : 'min-w-0 border-t border-[color:var(--line-weak)] pt-4 sm:pt-5',
+          ? cn(
-        className
+              "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={cn(
+            "flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between",
+            headerDensityStyles[density],
           )}
         >
-      {(title || subtitle || actions) ? (
-        <header className="mb-4 flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
           <div className="min-w-0">
-            {title ? <h3 className="text-base font-semibold text-[color:var(--terminal-bright)]">{title}</h3> : null}
+            {title ? (
-            {subtitle ? <p className="mt-1 text-sm text-[color:var(--terminal-muted)]">{subtitle}</p> : null}
+              <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>