Add K/M/B scale toggles for financial displays

app/analysis/page.tsx

@@ -20,7 +20,13 @@ import { Input } from '@/components/ui/input';
 import { Panel } from '@/components/ui/panel';
 import { useAuthGuard } from '@/hooks/use-auth-guard';
 import { getCompanyAnalysis } from '@/lib/api';
-import { asNumber, formatCompactCurrency, formatCurrency, formatPercent } from '@/lib/format';
+import {
+  asNumber,
+  formatCurrency,
+  formatCurrencyByScale,
+  formatPercent,
+  type NumberScaleUnit
+} from '@/lib/format';
 import type { CompanyAnalysis } from '@/lib/types';
 
 type FinancialPeriodFilter = 'quarterlyAndFiscalYearEnd' | 'quarterlyOnly' | 'fiscalYearEndOnly';
@@ -41,6 +47,12 @@ const FINANCIAL_PERIOD_FILTER_OPTIONS: Array<{ value: FinancialPeriodFilter; lab
   { value: 'fiscalYearEndOnly', label: 'Fiscal Year End only' }
 ];
 
+const FINANCIAL_VALUE_SCALE_OPTIONS: Array<{ value: NumberScaleUnit; label: string }> = [
+  { value: 'thousands', label: 'Thousands (K)' },
+  { value: 'millions', label: 'Millions (M)' },
+  { value: 'billions', label: 'Billions (B)' }
+];
+
 function formatShortDate(value: string) {
   return format(new Date(value), 'MMM yyyy');
 }
@@ -75,6 +87,17 @@ function includesFinancialPeriod(filingType: '10-K' | '10-Q', filter: FinancialP
   return true;
 }
 
+function asScaledFinancialCurrency(
+  value: number | null | undefined,
+  scale: NumberScaleUnit
+) {
+  if (value === null || value === undefined) {
+    return 'n/a';
+  }
+
+  return formatCurrencyByScale(value, scale);
+}
+
 export default function AnalysisPage() {
   return (
     <Suspense fallback={<div className="flex min-h-screen items-center justify-center text-sm text-[color:var(--terminal-muted)]">Loading analysis desk...</div>}>
@@ -93,6 +116,7 @@ function AnalysisPageContent() {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [financialPeriodFilter, setFinancialPeriodFilter] = useState<FinancialPeriodFilter>('quarterlyAndFiscalYearEnd');
+  const [financialValueScale, setFinancialValueScale] = useState<NumberScaleUnit>('millions');
 
   useEffect(() => {
     const fromQuery = searchParams.get('ticker');
@@ -163,6 +187,10 @@ function AnalysisPageContent() {
     return (analysis?.filings ?? []).filter((filing) => isFinancialSnapshotForm(filing.filing_type));
   }, [analysis?.filings]);
 
+  const selectedFinancialScaleLabel = useMemo(() => {
+    return FINANCIAL_VALUE_SCALE_OPTIONS.find((option) => option.value === financialValueScale)?.label ?? 'Millions (M)';
+  }, [financialValueScale]);
+
   if (isPending || !isAuthenticated) {
     return <div className="flex min-h-screen items-center justify-center text-sm text-[color:var(--terminal-muted)]">Loading analysis desk...</div>;
   }
@@ -262,20 +290,35 @@ function AnalysisPageContent() {
 
         <Panel
           title="Financial Table"
-          subtitle="Quarter-end (10-Q) and fiscal-year-end (10-K) snapshots for revenue, net income, assets, and margin."
+          subtitle={`Quarter-end (10-Q) and fiscal-year-end (10-K) snapshots for revenue, net income, assets, and margin. Values shown in ${selectedFinancialScaleLabel}.`}
           actions={(
-            <div className="flex flex-wrap justify-end gap-2">
+            <div className="flex flex-col items-end gap-2">
-              {FINANCIAL_PERIOD_FILTER_OPTIONS.map((option) => (
+              <div className="flex flex-wrap justify-end gap-2">
-                <Button
+                {FINANCIAL_PERIOD_FILTER_OPTIONS.map((option) => (
-                  key={option.value}
+                  <Button
-                  type="button"
+                    key={option.value}
-                  variant={option.value === financialPeriodFilter ? 'primary' : 'ghost'}
+                    type="button"
-                  className="px-2 py-1 text-xs"
+                    variant={option.value === financialPeriodFilter ? 'primary' : 'ghost'}
-                  onClick={() => setFinancialPeriodFilter(option.value)}
+                    className="px-2 py-1 text-xs"
-                >
+                    onClick={() => setFinancialPeriodFilter(option.value)}
-                  {option.label}
+                  >
-                </Button>
+                    {option.label}
-              ))}
+                  </Button>
+                ))}
+              </div>
+              <div className="flex flex-wrap justify-end gap-2">
+                {FINANCIAL_VALUE_SCALE_OPTIONS.map((option) => (
+                  <Button
+                    key={option.value}
+                    type="button"
+                    variant={option.value === financialValueScale ? 'primary' : 'ghost'}
+                    className="px-2 py-1 text-xs"
+                    onClick={() => setFinancialValueScale(option.value)}
+                  >
+                    {option.label}
+                  </Button>
+                ))}
+              </div>
             </div>
           )}
         >
@@ -303,11 +346,11 @@ function AnalysisPageContent() {
                       <td>{formatLongDate(point.filingDate)}</td>
                       <td>{point.periodLabel}</td>
                       <td>{point.filingType}</td>
-                      <td>{point.revenue === null ? 'n/a' : formatCompactCurrency(point.revenue)}</td>
+                      <td>{asScaledFinancialCurrency(point.revenue, financialValueScale)}</td>
                       <td className={(point.netIncome ?? 0) >= 0 ? 'text-[#96f5bf]' : 'text-[#ff9f9f]'}>
-                        {point.netIncome === null ? 'n/a' : formatCompactCurrency(point.netIncome)}
+                        {asScaledFinancialCurrency(point.netIncome, financialValueScale)}
                       </td>
-                      <td>{point.assets === null ? 'n/a' : formatCompactCurrency(point.assets)}</td>
+                      <td>{asScaledFinancialCurrency(point.assets, financialValueScale)}</td>
                       <td>{point.netMargin === null ? 'n/a' : formatPercent(point.netMargin)}</td>
                     </tr>
                   ))}
@@ -318,7 +361,10 @@ function AnalysisPageContent() {
         </Panel>
       </div>
 
-      <Panel title="Filings" subtitle={`${periodEndFilings.length} quarter-end and fiscal-year-end SEC records loaded.`}>
+      <Panel
+        title="Filings"
+        subtitle={`${periodEndFilings.length} quarter-end and fiscal-year-end SEC records loaded. Values shown in ${selectedFinancialScaleLabel}.`}
+      >
         {loading ? (
           <p className="text-sm text-[color:var(--terminal-muted)]">Loading filings...</p>
         ) : periodEndFilings.length === 0 ? (
@@ -343,9 +389,9 @@ function AnalysisPageContent() {
                     <td>{format(new Date(filing.filing_date), 'MMM dd, yyyy')}</td>
                     <td>{filing.filing_type === '10-Q' ? 'Quarter End' : 'Fiscal Year End'}</td>
                     <td>{filing.filing_type}</td>
-                    <td>{filing.metrics?.revenue !== null && filing.metrics?.revenue !== undefined ? formatCompactCurrency(filing.metrics.revenue) : 'n/a'}</td>
+                    <td>{asScaledFinancialCurrency(filing.metrics?.revenue, financialValueScale)}</td>
-                    <td>{filing.metrics?.netIncome !== null && filing.metrics?.netIncome !== undefined ? formatCompactCurrency(filing.metrics.netIncome) : 'n/a'}</td>
+                    <td>{asScaledFinancialCurrency(filing.metrics?.netIncome, financialValueScale)}</td>
-                    <td>{filing.metrics?.totalAssets !== null && filing.metrics?.totalAssets !== undefined ? formatCompactCurrency(filing.metrics.totalAssets) : 'n/a'}</td>
+                    <td>{asScaledFinancialCurrency(filing.metrics?.totalAssets, financialValueScale)}</td>
                     <td>
                       {filing.filing_url ? (
                         <a href={filing.filing_url} target="_blank" rel="noreferrer" className="text-xs text-[color:var(--accent)] hover:text-[color:var(--accent-strong)]">

app/filings/page.tsx

@@ -15,7 +15,13 @@ import { useAuthGuard } from '@/hooks/use-auth-guard';
 import { useTaskPoller } from '@/hooks/use-task-poller';
 import { getTask, listFilings, queueFilingAnalysis, queueFilingSync } from '@/lib/api';
 import type { Filing, Task } from '@/lib/types';
-import { formatCompactCurrency } from '@/lib/format';
+import { formatCurrencyByScale, type NumberScaleUnit } from '@/lib/format';
+
+const FINANCIAL_VALUE_SCALE_OPTIONS: Array<{ value: NumberScaleUnit; label: string }> = [
+  { value: 'thousands', label: 'Thousands (K)' },
+  { value: 'millions', label: 'Millions (M)' },
+  { value: 'billions', label: 'Billions (B)' }
+];
 
 export default function FilingsPage() {
   return (
@@ -39,6 +45,17 @@ function hasFinancialSnapshot(filing: Filing) {
   return filing.filing_type === '10-K' || filing.filing_type === '10-Q';
 }
 
+function asScaledFinancialSnapshot(
+  value: number | null | undefined,
+  scale: NumberScaleUnit
+) {
+  if (value === null || value === undefined) {
+    return 'n/a';
+  }
+
+  return formatCurrencyByScale(value, scale);
+}
+
 function resolveOriginalFilingUrl(filing: Filing) {
   if (filing.filing_url) {
     return filing.filing_url;
@@ -93,6 +110,7 @@ function FilingsPageContent() {
   const [filterTickerInput, setFilterTickerInput] = useState('');
   const [searchTicker, setSearchTicker] = useState('');
   const [activeTask, setActiveTask] = useState<Task | null>(null);
+  const [financialValueScale, setFinancialValueScale] = useState<NumberScaleUnit>('millions');
 
   useEffect(() => {
     const ticker = searchParams.get('ticker');
@@ -168,6 +186,10 @@ function FilingsPageContent() {
     return counts;
   }, [filings]);
 
+  const selectedFinancialScaleLabel = useMemo(() => {
+    return FINANCIAL_VALUE_SCALE_OPTIONS.find((option) => option.value === financialValueScale)?.label ?? 'Millions (M)';
+  }, [financialValueScale]);
+
   if (isPending || !isAuthenticated) {
     return <div className="flex min-h-screen items-center justify-center text-sm text-[color:var(--terminal-muted)]">Opening filings stream...</div>;
   }
@@ -248,7 +270,25 @@ function FilingsPageContent() {
         </Panel>
       </div>
 
-      <Panel title="Filing Ledger" subtitle={`${filings.length} records loaded${searchTicker ? ` for ${searchTicker}` : ''}.`}>
+      <Panel
+        title="Filing Ledger"
+        subtitle={`${filings.length} records loaded${searchTicker ? ` for ${searchTicker}` : ''}. Values shown in ${selectedFinancialScaleLabel}.`}
+        actions={(
+          <div className="flex flex-wrap justify-end gap-2">
+            {FINANCIAL_VALUE_SCALE_OPTIONS.map((option) => (
+              <Button
+                key={option.value}
+                type="button"
+                variant={option.value === financialValueScale ? 'primary' : 'ghost'}
+                className="px-2 py-1 text-xs"
+                onClick={() => setFinancialValueScale(option.value)}
+              >
+                {option.label}
+              </Button>
+            ))}
+          </div>
+        )}
+      >
         {error ? <p className="text-sm text-[#ffb5b5]">{error}</p> : null}
         {loading ? (
           <p className="text-sm text-[color:var(--terminal-muted)]">Fetching filings...</p>
@@ -282,7 +322,7 @@ function FilingsPageContent() {
                       <div className="rounded-md border border-[color:var(--line-weak)] px-2 py-1.5">
                         <dt className="text-[color:var(--terminal-muted)]">Financial Snapshot</dt>
                         <dd className="mt-1 text-[color:var(--terminal-bright)]">
-                          {financialForm ? (revenue ? formatCompactCurrency(revenue) : 'n/a') : 'Qualitative filing'}
+                          {financialForm ? asScaledFinancialSnapshot(revenue, financialValueScale) : 'Qualitative filing'}
                         </dd>
                       </div>
                       <div className="rounded-md border border-[color:var(--line-weak)] px-2 py-1.5">
@@ -351,7 +391,7 @@ function FilingsPageContent() {
                         </td>
                         <td>{filing.filing_type}</td>
                         <td>{formatFilingDate(filing.filing_date)}</td>
-                        <td>{financialForm ? (revenue ? formatCompactCurrency(revenue) : 'n/a') : 'Qualitative filing'}</td>
+                        <td>{financialForm ? asScaledFinancialSnapshot(revenue, financialValueScale) : 'Qualitative filing'}</td>
                         <td className="max-w-[18rem]">{filing.company_name}</td>
                         <td>{hasAnalysis ? 'Ready' : 'Not generated'}</td>
                         <td>

app/financials/page.tsx

@@ -26,14 +26,21 @@ import { Input } from '@/components/ui/input';
 import { Panel } from '@/components/ui/panel';
 import { useAuthGuard } from '@/hooks/use-auth-guard';
 import { getCompanyAnalysis } from '@/lib/api';
-import { formatCompactCurrency, formatCurrency, formatPercent } from '@/lib/format';
+import {
+  formatCurrencyByScale,
+  formatPercent,
+  type NumberScaleUnit
+} from '@/lib/format';
 import type { CompanyAnalysis } from '@/lib/types';
 
-type FinancialSeriesPoint = {
+type StatementPeriodPoint = {
   filingDate: string;
   filingType: '10-K' | '10-Q';
-  periodKind: 'quarterly' | 'fiscalYearEnd';
   periodLabel: 'Quarter End' | 'Fiscal Year End';
+};
+
+type FinancialSeriesPoint = StatementPeriodPoint & {
+  periodKind: 'quarterly' | 'fiscalYearEnd';
   label: string;
   revenue: number | null;
   netIncome: number | null;
@@ -44,14 +51,18 @@ type FinancialSeriesPoint = {
   debtToAssets: number | null;
 };
 
-type ChartPeriodFilter = 'quarterlyAndFiscalYearEnd' | 'quarterlyOnly' | 'fiscalYearEndOnly';
+type CompanyMetricPoint = StatementPeriodPoint & {
+  metrics: string[];
+};
 
-const AXIS_CURRENCY = new Intl.NumberFormat('en-US', {
+type StatementMatrixRow<TPoint extends StatementPeriodPoint> = {
-  style: 'currency',
+  key: string;
-  currency: 'USD',
+  label: string;
-  notation: 'compact',
+  value: (point: TPoint, index: number, series: TPoint[]) => string;
-  maximumFractionDigits: 1
+  valueClassName?: (point: TPoint, index: number, series: TPoint[]) => string | undefined;
-});
+};
+
+type ChartPeriodFilter = 'quarterlyAndFiscalYearEnd' | 'quarterlyOnly' | 'fiscalYearEndOnly';
 
 const CHART_PERIOD_FILTER_OPTIONS: Array<{ value: ChartPeriodFilter; label: string }> = [
   { value: 'quarterlyAndFiscalYearEnd', label: 'Quarterly + Fiscal Year End' },
@@ -59,6 +70,12 @@ const CHART_PERIOD_FILTER_OPTIONS: Array<{ value: ChartPeriodFilter; label: stri
   { value: 'fiscalYearEndOnly', label: 'Fiscal Year End only' }
 ];
 
+const FINANCIAL_VALUE_SCALE_OPTIONS: Array<{ value: NumberScaleUnit; label: string }> = [
+  { value: 'thousands', label: 'Thousands (K)' },
+  { value: 'millions', label: 'Millions (M)' },
+  { value: 'billions', label: 'Billions (B)' }
+];
+
 function formatShortDate(value: string) {
   const parsed = new Date(value);
   if (Number.isNaN(parsed.getTime())) {
@@ -85,14 +102,33 @@ function ratioPercent(numerator: number | null, denominator: number | null) {
   return (numerator / denominator) * 100;
 }
 
-function asDisplayCurrency(value: number | null) {
+function asDisplayCurrency(
-  return value === null ? 'n/a' : formatCurrency(value);
+  value: number | null,
+  scale: NumberScaleUnit
+) {
+  return value === null ? 'n/a' : formatCurrencyByScale(value, scale);
 }
 
 function asDisplayPercent(value: number | null) {
   return value === null ? 'n/a' : formatPercent(value);
 }
 
+function asDisplayMultiple(value: number | null) {
+  return value === null ? 'n/a' : `${value.toFixed(2)}x`;
+}
+
+function asDisplaySignedCurrency(
+  value: number | null,
+  scale: NumberScaleUnit
+) {
+  if (value === null) {
+    return 'n/a';
+  }
+
+  const formatted = formatCurrencyByScale(value, scale);
+  return value > 0 ? `+${formatted}` : formatted;
+}
+
 function normalizeTooltipValue(value: unknown) {
   if (Array.isArray(value)) {
     const [first] = value;
@@ -106,7 +142,10 @@ function normalizeTooltipValue(value: unknown) {
   return null;
 }
 
-function asTooltipCurrency(value: unknown) {
+function asTooltipCurrency(
+  value: unknown,
+  scale: NumberScaleUnit
+) {
   const normalized = normalizeTooltipValue(value);
   if (normalized === null) {
     return 'n/a';
@@ -117,7 +156,14 @@ function asTooltipCurrency(value: unknown) {
     return 'n/a';
   }
 
-  return formatCompactCurrency(numeric);
+  return formatCurrencyByScale(numeric, scale);
+}
+
+function asAxisCurrencyTick(
+  value: number,
+  scale: NumberScaleUnit
+) {
+  return formatCurrencyByScale(value, scale, { maximumFractionDigits: 1 });
 }
 
 function includesChartPeriod(point: FinancialSeriesPoint, filter: ChartPeriodFilter) {
@@ -132,6 +178,193 @@ function includesChartPeriod(point: FinancialSeriesPoint, filter: ChartPeriodFil
   return true;
 }
 
+function ratioMultiple(numerator: number | null, denominator: number | null) {
+  if (numerator === null || denominator === null || denominator === 0) {
+    return null;
+  }
+
+  return numerator / denominator;
+}
+
+function StatementMatrixTable<TPoint extends StatementPeriodPoint>({
+  points,
+  rows
+}: {
+  points: TPoint[];
+  rows: Array<StatementMatrixRow<TPoint>>;
+}) {
+  return (
+    <div className="overflow-x-auto">
+      <table className="data-table min-w-[980px]">
+        <thead>
+          <tr>
+            <th className="sticky left-0 z-10 bg-[color:var(--panel)]">Metric</th>
+            {points.map((point, index) => (
+              <th key={`${point.filingDate}-${point.filingType}-${index}`}>
+                <div className="flex flex-col gap-1">
+                  <span>{formatLongDate(point.filingDate)}</span>
+                  <span className="text-[11px] normal-case tracking-normal text-[color:var(--terminal-muted)]">{point.filingType} · {point.periodLabel}</span>
+                </div>
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((row) => (
+            <tr key={row.key}>
+              <td className="sticky left-0 z-10 whitespace-nowrap bg-[color:var(--panel)] font-medium text-[color:var(--terminal-bright)]">{row.label}</td>
+              {points.map((point, index, series) => (
+                <td
+                  key={`${row.key}-${point.filingDate}-${point.filingType}-${index}`}
+                  className={row.valueClassName?.(point, index, series)}
+                >
+                  {row.value(point, index, series)}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+function buildOperatingStatementRows(
+  scale: NumberScaleUnit
+): Array<StatementMatrixRow<FinancialSeriesPoint>> {
+  return [
+    {
+      key: 'revenue',
+      label: 'Revenue',
+      value: (point) => asDisplayCurrency(point.revenue, scale)
+    },
+    {
+      key: 'net-income',
+      label: 'Net Income',
+      value: (point) => asDisplayCurrency(point.netIncome, scale),
+      valueClassName: (point) => {
+        if (point.netIncome === null) {
+          return undefined;
+        }
+
+        return point.netIncome >= 0 ? 'text-[#96f5bf]' : 'text-[#ff9f9f]';
+      }
+    },
+    {
+      key: 'net-margin',
+      label: 'Net Margin',
+      value: (point) => asDisplayPercent(point.netMargin)
+    }
+  ];
+}
+
+function buildBalanceSheetRows(
+  scale: NumberScaleUnit
+): Array<StatementMatrixRow<FinancialSeriesPoint>> {
+  return [
+    {
+      key: 'total-assets',
+      label: 'Total Assets',
+      value: (point) => asDisplayCurrency(point.totalAssets, scale)
+    },
+    {
+      key: 'cash',
+      label: 'Cash',
+      value: (point) => asDisplayCurrency(point.cash, scale)
+    },
+    {
+      key: 'debt',
+      label: 'Debt',
+      value: (point) => asDisplayCurrency(point.debt, scale)
+    },
+    {
+      key: 'debt-to-assets',
+      label: 'Debt / Assets',
+      value: (point) => asDisplayPercent(point.debtToAssets),
+      valueClassName: (point) => {
+        if (point.debtToAssets === null) {
+          return undefined;
+        }
+
+        return point.debtToAssets <= 60 ? 'text-[#96f5bf]' : 'text-[#ffd08a]';
+      }
+    }
+  ];
+}
+
+function buildCashFlowProxyRows(
+  scale: NumberScaleUnit
+): Array<StatementMatrixRow<FinancialSeriesPoint>> {
+  return [
+    {
+      key: 'ending-cash',
+      label: 'Ending Cash Balance',
+      value: (point) => asDisplayCurrency(point.cash, scale)
+    },
+    {
+      key: 'cash-change',
+      label: 'Cash Change vs Prior',
+      value: (point, index, series) => {
+        if (index === 0) {
+          return 'n/a';
+        }
+
+        const previous = series[index - 1];
+        if (point.cash === null || previous.cash === null) {
+          return 'n/a';
+        }
+
+        return asDisplaySignedCurrency(point.cash - previous.cash, scale);
+      },
+      valueClassName: (point, index, series) => {
+        if (index === 0) {
+          return undefined;
+        }
+
+        const previous = series[index - 1];
+        if (point.cash === null || previous.cash === null) {
+          return undefined;
+        }
+
+        return point.cash - previous.cash >= 0 ? 'text-[#96f5bf]' : 'text-[#ff9f9f]';
+      }
+    },
+    {
+      key: 'debt-change',
+      label: 'Debt Change vs Prior',
+      value: (point, index, series) => {
+        if (index === 0) {
+          return 'n/a';
+        }
+
+        const previous = series[index - 1];
+        if (point.debt === null || previous.debt === null) {
+          return 'n/a';
+        }
+
+        return asDisplaySignedCurrency(point.debt - previous.debt, scale);
+      },
+      valueClassName: (point, index, series) => {
+        if (index === 0) {
+          return undefined;
+        }
+
+        const previous = series[index - 1];
+        if (point.debt === null || previous.debt === null) {
+          return undefined;
+        }
+
+        return point.debt - previous.debt <= 0 ? 'text-[#96f5bf]' : 'text-[#ff9f9f]';
+      }
+    },
+    {
+      key: 'cash-to-debt',
+      label: 'Cash / Debt',
+      value: (point) => asDisplayMultiple(ratioMultiple(point.cash, point.debt))
+    }
+  ];
+}
+
 function isFinancialPeriodForm(filingType: CompanyAnalysis['financials'][number]['filingType']): filingType is '10-K' | '10-Q' {
   return filingType === '10-K' || filingType === '10-Q';
 }
@@ -154,6 +387,7 @@ function FinancialsPageContent() {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [chartPeriodFilter, setChartPeriodFilter] = useState<ChartPeriodFilter>('quarterlyAndFiscalYearEnd');
+  const [financialValueScale, setFinancialValueScale] = useState<NumberScaleUnit>('millions');
 
   useEffect(() => {
     const fromQuery = searchParams.get('ticker');
@@ -222,6 +456,10 @@ function FinancialsPageContent() {
     return CHART_PERIOD_FILTER_OPTIONS.find((option) => option.value === chartPeriodFilter)?.label ?? 'Quarterly + Fiscal Year End';
   }, [chartPeriodFilter]);
 
+  const selectedFinancialScaleLabel = useMemo(() => {
+    return FINANCIAL_VALUE_SCALE_OPTIONS.find((option) => option.value === financialValueScale)?.label ?? 'Millions (M)';
+  }, [financialValueScale]);
+
   const latestSnapshot = financialSeries[financialSeries.length - 1] ?? null;
 
   const liquidityRatio = useMemo(() => {
@@ -253,6 +491,42 @@ function FinancialsPageContent() {
     };
   }, [chartSeries]);
 
+  const companyMetricSeries = useMemo<CompanyMetricPoint[]>(() => {
+    return (analysis?.filings ?? [])
+      .filter((entry): entry is CompanyAnalysis['filings'][number] & { filing_type: '10-K' | '10-Q' } => {
+        return isFinancialPeriodForm(entry.filing_type);
+      })
+      .slice()
+      .sort((a, b) => Date.parse(a.filing_date) - Date.parse(b.filing_date))
+      .map((entry) => ({
+        filingDate: entry.filing_date,
+        filingType: entry.filing_type,
+        periodLabel: entry.filing_type === '10-Q' ? 'Quarter End' : 'Fiscal Year End',
+        metrics: entry.analysis?.companyMetrics ?? []
+      }));
+  }, [analysis?.filings]);
+
+  const companyMetricRows = useMemo<Array<StatementMatrixRow<CompanyMetricPoint>>>(() => {
+    const rowCount = companyMetricSeries.reduce((max, point) => Math.max(max, point.metrics.length), 0);
+    return Array.from({ length: rowCount }, (_, index) => ({
+      key: `company-metric-${index + 1}`,
+      label: `Metric ${index + 1}`,
+      value: (point) => point.metrics[index] ?? 'n/a'
+    }));
+  }, [companyMetricSeries]);
+
+  const operatingStatementRows = useMemo(() => {
+    return buildOperatingStatementRows(financialValueScale);
+  }, [financialValueScale]);
+
+  const balanceSheetRows = useMemo(() => {
+    return buildBalanceSheetRows(financialValueScale);
+  }, [financialValueScale]);
+
+  const cashFlowProxyRows = useMemo(() => {
+    return buildCashFlowProxyRows(financialValueScale);
+  }, [financialValueScale]);
+
   if (isPending || !isAuthenticated) {
     return <div className="flex min-h-screen items-center justify-center text-sm text-[color:var(--terminal-muted)]">Loading financial terminal...</div>;
   }
@@ -312,25 +586,25 @@ function FinancialsPageContent() {
       <div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
         <MetricCard
           label="Latest Revenue"
-          value={latestSnapshot ? asDisplayCurrency(latestSnapshot.revenue) : 'n/a'}
+          value={latestSnapshot ? asDisplayCurrency(latestSnapshot.revenue, financialValueScale) : 'n/a'}
           delta={latestSnapshot ? `${latestSnapshot.filingType} · ${formatLongDate(latestSnapshot.filingDate)}` : 'No filings loaded'}
         />
         <MetricCard
           label="Latest Net Income"
-          value={latestSnapshot ? asDisplayCurrency(latestSnapshot.netIncome) : 'n/a'}
+          value={latestSnapshot ? asDisplayCurrency(latestSnapshot.netIncome, financialValueScale) : 'n/a'}
           delta={latestSnapshot ? `Net margin ${asDisplayPercent(latestSnapshot.netMargin)}` : 'No filings loaded'}
           positive={(latestSnapshot?.netIncome ?? 0) >= 0}
         />
         <MetricCard
           label="Latest Total Assets"
-          value={latestSnapshot ? asDisplayCurrency(latestSnapshot.totalAssets) : 'n/a'}
+          value={latestSnapshot ? asDisplayCurrency(latestSnapshot.totalAssets, financialValueScale) : 'n/a'}
           delta={latestSnapshot ? `Debt/assets ${asDisplayPercent(latestSnapshot.debtToAssets)}` : 'No filings loaded'}
           positive={latestSnapshot ? (latestSnapshot.debtToAssets ?? 0) <= 60 : true}
         />
         <MetricCard
           label="Cash / Debt"
           value={liquidityRatio === null ? 'n/a' : `${liquidityRatio.toFixed(2)}x`}
-          delta={latestSnapshot ? `Cash ${asDisplayCurrency(latestSnapshot.cash)} · Debt ${asDisplayCurrency(latestSnapshot.debt)}` : 'No filings loaded'}
+          delta={latestSnapshot ? `Cash ${asDisplayCurrency(latestSnapshot.cash, financialValueScale)} · Debt ${asDisplayCurrency(latestSnapshot.debt, financialValueScale)}` : 'No filings loaded'}
         />
       </div>
 
@@ -349,6 +623,21 @@ function FinancialsPageContent() {
         </div>
       </Panel>
 
+      <Panel title="Financial Value Scale" subtitle={`Display revenue, net income, assets, cash, and debt in ${selectedFinancialScaleLabel}.`}>
+        <div className="flex flex-wrap gap-2">
+          {FINANCIAL_VALUE_SCALE_OPTIONS.map((option) => (
+            <Button
+              key={option.value}
+              type="button"
+              variant={option.value === financialValueScale ? 'primary' : 'ghost'}
+              onClick={() => setFinancialValueScale(option.value)}
+            >
+              {option.label}
+            </Button>
+          ))}
+        </div>
+      </Panel>
+
       <div className="grid grid-cols-1 gap-6 xl:grid-cols-2">
         <Panel title="Income Statement Trend" subtitle="Revenue and net income by filing period.">
           {loading ? (
@@ -361,8 +650,8 @@ function FinancialsPageContent() {
                 <BarChart data={chartSeries}>
                   <CartesianGrid strokeDasharray="2 2" stroke="rgba(126, 217, 255, 0.2)" />
                   <XAxis dataKey="label" minTickGap={20} stroke="#8cb6c5" fontSize={12} />
-                  <YAxis stroke="#8cb6c5" fontSize={12} tickFormatter={(value: number) => AXIS_CURRENCY.format(value)} />
+                  <YAxis stroke="#8cb6c5" fontSize={12} tickFormatter={(value: number) => asAxisCurrencyTick(value, financialValueScale)} />
-                  <Tooltip formatter={(value) => asTooltipCurrency(value)} />
+                  <Tooltip formatter={(value) => asTooltipCurrency(value, financialValueScale)} />
                   <Legend />
                   <Bar dataKey="revenue" name="Revenue" fill="#68ffd5" radius={[4, 4, 0, 0]} />
                   <Bar dataKey="netIncome" name="Net Income" fill="#5fd3ff" radius={[4, 4, 0, 0]} />
@@ -389,8 +678,8 @@ function FinancialsPageContent() {
                   </defs>
                   <CartesianGrid strokeDasharray="2 2" stroke="rgba(126, 217, 255, 0.2)" />
                   <XAxis dataKey="label" minTickGap={20} stroke="#8cb6c5" fontSize={12} />
-                  <YAxis stroke="#8cb6c5" fontSize={12} tickFormatter={(value: number) => AXIS_CURRENCY.format(value)} />
+                  <YAxis stroke="#8cb6c5" fontSize={12} tickFormatter={(value: number) => asAxisCurrencyTick(value, financialValueScale)} />
-                  <Tooltip formatter={(value) => asTooltipCurrency(value)} />
+                  <Tooltip formatter={(value) => asTooltipCurrency(value, financialValueScale)} />
                   <Legend />
                   <Area type="monotone" dataKey="totalAssets" name="Total Assets" stroke="#68ffd5" fill="url(#assetsGradient)" strokeWidth={2} />
                   <Line type="monotone" dataKey="cash" name="Cash" stroke="#8bd3ff" strokeWidth={2} dot={false} />
@@ -461,46 +750,49 @@ function FinancialsPageContent() {
         </Panel>
       </div>
 
-      <Panel title="Period-End Metrics Table" subtitle="Quarter-end (10-Q) and fiscal-year-end (10-K) statement points extracted from filing metadata.">
+      <div className="grid grid-cols-1 gap-6 xl:grid-cols-2">
-        {loading ? (
+        <Panel title="Operating Statement" subtitle={`Dates are in the top row; operating metrics are listed down the left side. Values shown in ${selectedFinancialScaleLabel}.`}>
-          <p className="text-sm text-[color:var(--terminal-muted)]">Loading table...</p>
+          {loading ? (
-        ) : financialSeries.length === 0 ? (
+            <p className="text-sm text-[color:var(--terminal-muted)]">Loading operating statement...</p>
-          <p className="text-sm text-[color:var(--terminal-muted)]">No financial rows are available for this ticker yet.</p>
+          ) : financialSeries.length === 0 ? (
-        ) : (
+            <p className="text-sm text-[color:var(--terminal-muted)]">No operating statement rows are available for this ticker yet.</p>
-          <div className="overflow-x-auto">
+          ) : (
-            <table className="data-table min-w-[960px]">
+            <StatementMatrixTable points={financialSeries} rows={operatingStatementRows} />
-              <thead>
+          )}
-                <tr>
+        </Panel>
-                  <th>Filed</th>
+
-                  <th>Period</th>
+        <Panel title="Balance Sheet" subtitle={`Balance sheet rows transposed by filing date for side-by-side period comparison. Values shown in ${selectedFinancialScaleLabel}.`}>
-                  <th>Form</th>
+          {loading ? (
-                  <th>Revenue</th>
+            <p className="text-sm text-[color:var(--terminal-muted)]">Loading balance sheet...</p>
-                  <th>Net Income</th>
+          ) : financialSeries.length === 0 ? (
-                  <th>Total Assets</th>
+            <p className="text-sm text-[color:var(--terminal-muted)]">No balance sheet rows are available for this ticker yet.</p>
-                  <th>Cash</th>
+          ) : (
-                  <th>Debt</th>
+            <StatementMatrixTable points={financialSeries} rows={balanceSheetRows} />
-                  <th>Net Margin</th>
+          )}
-                </tr>
+        </Panel>
-              </thead>
+
-              <tbody>
+        <Panel title="Cash Flow Statement" subtitle={`Proxy cash-flow view derived from period-end cash and debt until direct cash-flow tags are indexed. Values shown in ${selectedFinancialScaleLabel}.`}>
-                {financialSeries.map((point, index) => (
+          {loading ? (
-                  <tr key={`${point.filingDate}-${point.filingType}-${index}`}>
+            <p className="text-sm text-[color:var(--terminal-muted)]">Loading cash flow statement...</p>
-                    <td>{formatLongDate(point.filingDate)}</td>
+          ) : financialSeries.length === 0 ? (
-                    <td>{point.periodLabel}</td>
+            <p className="text-sm text-[color:var(--terminal-muted)]">No cash flow statement rows are available for this ticker yet.</p>
-                    <td>{point.filingType}</td>
+          ) : (
-                    <td>{asDisplayCurrency(point.revenue)}</td>
+            <StatementMatrixTable points={financialSeries} rows={cashFlowProxyRows} />
-                    <td className={(point.netIncome ?? 0) >= 0 ? 'text-[#96f5bf]' : 'text-[#ff9f9f]'}>{asDisplayCurrency(point.netIncome)}</td>
+          )}
-                    <td>{asDisplayCurrency(point.totalAssets)}</td>
+        </Panel>
-                    <td>{asDisplayCurrency(point.cash)}</td>
+
-                    <td>{asDisplayCurrency(point.debt)}</td>
+        <Panel title="Company Metrics" subtitle="Company-specific KPI notes extracted from filings (same-store sales, ARPU, users, and similar metrics).">
-                    <td>{asDisplayPercent(point.netMargin)}</td>
+          {loading ? (
-                  </tr>
+            <p className="text-sm text-[color:var(--terminal-muted)]">Loading company metrics...</p>
-                ))}
+          ) : companyMetricSeries.length === 0 ? (
-              </tbody>
+            <p className="text-sm text-[color:var(--terminal-muted)]">No filing periods are available for company metrics yet.</p>
-            </table>
+          ) : companyMetricRows.length === 0 ? (
-          </div>
+            <p className="text-sm text-[color:var(--terminal-muted)]">No company-specific KPI metrics were extracted for the selected filings.</p>
-        )}
+          ) : (
-      </Panel>
+            <StatementMatrixTable points={companyMetricSeries} rows={companyMetricRows} />
+          )}
+        </Panel>
+      </div>
 
       <Panel>
         <div className="flex items-center gap-2 text-xs uppercase tracking-[0.24em] text-[color:var(--terminal-muted)]">

lib/format.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'bun:test';
-import { formatScaledNumber } from './format';
+import { formatCurrencyByScale, formatScaledNumber } from './format';
 
 describe('formatScaledNumber', () => {
   it('keeps values below one thousand unscaled', () => {
@@ -27,3 +27,21 @@ describe('formatScaledNumber', () => {
     expect(formatScaledNumber(999_950)).toBe('1M');
   });
 });
+
+describe('formatCurrencyByScale', () => {
+  it('formats values in thousands', () => {
+    expect(formatCurrencyByScale(12_345, 'thousands')).toBe('$12.3K');
+  });
+
+  it('formats values in millions', () => {
+    expect(formatCurrencyByScale(12_345_678, 'millions')).toBe('$12.3M');
+  });
+
+  it('formats values in billions', () => {
+    expect(formatCurrencyByScale(12_345_678_901, 'billions')).toBe('$12.3B');
+  });
+
+  it('keeps sign for negative values', () => {
+    expect(formatCurrencyByScale(-2_500_000, 'millions')).toBe('-$2.5M');
+  });
+});

lib/format.ts

@@ -12,6 +12,8 @@ type NumberScale = {
   suffix: string;
 };
 
+export type NumberScaleUnit = 'thousands' | 'millions' | 'billions';
+
 const NUMBER_SCALES: NumberScale[] = [
   { divisor: 1, suffix: '' },
   { divisor: 1_000, suffix: 'K' },
@@ -19,11 +21,22 @@ const NUMBER_SCALES: NumberScale[] = [
   { divisor: 1_000_000_000, suffix: 'B' }
 ];
 
+const NUMBER_SCALE_UNITS: Record<NumberScaleUnit, NumberScale> = {
+  thousands: { divisor: 1_000, suffix: 'K' },
+  millions: { divisor: 1_000_000, suffix: 'M' },
+  billions: { divisor: 1_000_000_000, suffix: 'B' }
+};
+
 type FormatScaledNumberOptions = {
   minimumFractionDigits?: number;
   maximumFractionDigits?: number;
 };
 
+type FormatScaledCurrencyOptions = {
+  minimumFractionDigits?: number;
+  maximumFractionDigits?: number;
+};
+
 export function formatScaledNumber(
   value: string | number | null | undefined,
   options: FormatScaledNumberOptions = {}
@@ -64,6 +77,28 @@ export function formatScaledNumber(
   return `${formatted}${NUMBER_SCALES[scaleIndex].suffix}`;
 }
 
+export function formatCurrencyByScale(
+  value: string | number | null | undefined,
+  scale: NumberScaleUnit,
+  options: FormatScaledCurrencyOptions = {}
+) {
+  const {
+    minimumFractionDigits = 0,
+    maximumFractionDigits = 1
+  } = options;
+  const { divisor, suffix } = NUMBER_SCALE_UNITS[scale];
+  const scaled = asNumber(value) / divisor;
+
+  const formatted = new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+    minimumFractionDigits,
+    maximumFractionDigits
+  }).format(scaled);
+
+  return `${formatted}${suffix}`;
+}
+
 export function formatCurrency(value: string | number | null | undefined) {
   return new Intl.NumberFormat('en-US', {
     style: 'currency',