Add company analysis view with financials, price history, filings, and AI reports

app/analysis/page.tsx

@@ -0,0 +1,303 @@
+'use client';
+
+import Link from 'next/link';
+import { Suspense, useCallback, useEffect, useMemo, useState } from 'react';
+import { format } from 'date-fns';
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Legend,
+  Line,
+  LineChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis
+} from 'recharts';
+import { BrainCircuit, ChartNoAxesCombined, RefreshCcw, Search } from 'lucide-react';
+import { useSearchParams } from 'next/navigation';
+import { AppShell } from '@/components/shell/app-shell';
+import { Button } from '@/components/ui/button';
+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 type { CompanyAnalysis } from '@/lib/types';
+
+function formatShortDate(value: string) {
+  return format(new Date(value), 'MMM yyyy');
+}
+
+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>}>
+      <AnalysisPageContent />
+    </Suspense>
+  );
+}
+
+function AnalysisPageContent() {
+  const { isPending, isAuthenticated } = useAuthGuard();
+  const searchParams = useSearchParams();
+
+  const [tickerInput, setTickerInput] = useState('MSFT');
+  const [ticker, setTicker] = useState('MSFT');
+  const [analysis, setAnalysis] = useState<CompanyAnalysis | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fromQuery = searchParams.get('ticker');
+    if (!fromQuery) {
+      return;
+    }
+
+    const normalized = fromQuery.trim().toUpperCase();
+    if (!normalized) {
+      return;
+    }
+
+    setTickerInput(normalized);
+    setTicker(normalized);
+  }, [searchParams]);
+
+  const loadAnalysis = useCallback(async (symbol: string) => {
+    setLoading(true);
+    setError(null);
+
+    try {
+      const response = await getCompanyAnalysis(symbol);
+      setAnalysis(response.analysis);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Unable to load company analysis');
+      setAnalysis(null);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!isPending && isAuthenticated) {
+      void loadAnalysis(ticker);
+    }
+  }, [isPending, isAuthenticated, ticker, loadAnalysis]);
+
+  const priceSeries = useMemo(() => {
+    return (analysis?.priceHistory ?? []).map((point) => ({
+      ...point,
+      label: formatShortDate(point.date)
+    }));
+  }, [analysis?.priceHistory]);
+
+  const financialSeries = useMemo(() => {
+    return (analysis?.financials ?? [])
+      .slice()
+      .reverse()
+      .map((item) => ({
+        label: formatShortDate(item.filingDate),
+        revenue: item.revenue,
+        netIncome: item.netIncome,
+        assets: item.totalAssets
+      }));
+  }, [analysis?.financials]);
+
+  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>;
+  }
+
+  return (
+    <AppShell
+      title="Company Analysis"
+      subtitle="Research a single ticker across pricing, reported financials, filings, and generated AI reports."
+      actions={(
+        <Button variant="secondary" onClick={() => void loadAnalysis(ticker)}>
+          <RefreshCcw className="size-4" />
+          Refresh
+        </Button>
+      )}
+    >
+      <Panel title="Search Company" subtitle="Enter a ticker symbol to load the latest analysis view.">
+        <form
+          className="flex flex-wrap items-center gap-3"
+          onSubmit={(event) => {
+            event.preventDefault();
+            const normalized = tickerInput.trim().toUpperCase();
+            if (!normalized) {
+              return;
+            }
+            setTicker(normalized);
+          }}
+        >
+          <Input
+            value={tickerInput}
+            onChange={(event) => setTickerInput(event.target.value.toUpperCase())}
+            placeholder="Ticker (AAPL)"
+            className="max-w-xs"
+          />
+          <Button type="submit">
+            <Search className="size-4" />
+            Analyze
+          </Button>
+          {analysis ? (
+            <Link href={`/filings?ticker=${analysis.company.ticker}`} className="text-sm text-[color:var(--accent)] hover:text-[color:var(--accent-strong)]">
+              Open filing stream
+            </Link>
+          ) : null}
+        </form>
+      </Panel>
+
+      {error ? (
+        <Panel>
+          <p className="text-sm text-[#ffb5b5]">{error}</p>
+        </Panel>
+      ) : null}
+
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
+        <Panel title="Company">
+          <p className="text-xl font-semibold text-[color:var(--terminal-bright)]">{analysis?.company.companyName ?? ticker}</p>
+          <p className="mt-1 text-xs uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">{analysis?.company.ticker ?? ticker}</p>
+          <p className="mt-2 text-sm text-[color:var(--terminal-muted)]">{analysis?.company.sector ?? 'Sector unavailable'}</p>
+        </Panel>
+
+        <Panel title="Live Price">
+          <p className="text-3xl font-semibold text-[color:var(--terminal-bright)]">{formatCurrency(analysis?.quote ?? 0)}</p>
+          <p className="mt-2 text-sm text-[color:var(--terminal-muted)]">CIK {analysis?.company.cik ?? 'n/a'}</p>
+        </Panel>
+
+        <Panel title="Position Value">
+          <p className="text-3xl font-semibold text-[color:var(--terminal-bright)]">{formatCurrency(analysis?.position?.market_value)}</p>
+          <p className="mt-2 text-sm text-[color:var(--terminal-muted)]">{analysis?.position ? `${asNumber(analysis.position.shares).toLocaleString()} shares` : 'Not held in portfolio'}</p>
+        </Panel>
+
+        <Panel title="Position P&L">
+          <p className={`text-3xl font-semibold ${asNumber(analysis?.position?.gain_loss) >= 0 ? 'text-[#96f5bf]' : 'text-[#ff9f9f]'}`}>
+            {formatCurrency(analysis?.position?.gain_loss)}
+          </p>
+          <p className="mt-2 text-sm text-[color:var(--terminal-muted)]">{formatPercent(analysis?.position?.gain_loss_pct)}</p>
+        </Panel>
+      </div>
+
+      <div className="grid grid-cols-1 gap-6 xl:grid-cols-2">
+        <Panel title="Price History" subtitle="Weekly close over the last year.">
+          {loading ? (
+            <p className="text-sm text-[color:var(--terminal-muted)]">Loading price history...</p>
+          ) : priceSeries.length === 0 ? (
+            <p className="text-sm text-[color:var(--terminal-muted)]">No price history available.</p>
+          ) : (
+            <div className="h-[320px]">
+              <ResponsiveContainer width="100%" height="100%">
+                <LineChart data={priceSeries}>
+                  <CartesianGrid strokeDasharray="2 2" stroke="rgba(126, 217, 255, 0.2)" />
+                  <XAxis dataKey="label" minTickGap={32} stroke="#8cb6c5" fontSize={12} />
+                  <YAxis stroke="#8cb6c5" fontSize={12} tickFormatter={(value: number) => `$${value.toFixed(0)}`} />
+                  <Tooltip formatter={(value: number | string | undefined) => formatCurrency(value)} />
+                  <Line type="monotone" dataKey="close" stroke="#68ffd5" strokeWidth={2} dot={false} />
+                </LineChart>
+              </ResponsiveContainer>
+            </div>
+          )}
+        </Panel>
+
+        <Panel title="Financial Trend" subtitle="Filing snapshots for revenue, net income, and assets.">
+          {loading ? (
+            <p className="text-sm text-[color:var(--terminal-muted)]">Loading financials...</p>
+          ) : financialSeries.length === 0 ? (
+            <p className="text-sm text-[color:var(--terminal-muted)]">No parsed filing metrics yet.</p>
+          ) : (
+            <div className="h-[320px]">
+              <ResponsiveContainer width="100%" height="100%">
+                <BarChart data={financialSeries}>
+                  <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) => `$${Math.round(value / 1_000_000_000)}B`} />
+                  <Tooltip formatter={(value: number | string | undefined) => formatCompactCurrency(value)} />
+                  <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]} />
+                  <Bar dataKey="assets" name="Total Assets" fill="#9ac7ff" radius={[4, 4, 0, 0]} />
+                </BarChart>
+              </ResponsiveContainer>
+            </div>
+          )}
+        </Panel>
+      </div>
+
+      <Panel title="Filings" subtitle={`${analysis?.filings.length ?? 0} recent SEC records loaded.`}>
+        {loading ? (
+          <p className="text-sm text-[color:var(--terminal-muted)]">Loading filings...</p>
+        ) : !analysis || analysis.filings.length === 0 ? (
+          <p className="text-sm text-[color:var(--terminal-muted)]">No filings available for this ticker.</p>
+        ) : (
+          <div className="overflow-x-auto">
+            <table className="data-table min-w-[860px]">
+              <thead>
+                <tr>
+                  <th>Filed</th>
+                  <th>Type</th>
+                  <th>Revenue</th>
+                  <th>Net Income</th>
+                  <th>Assets</th>
+                  <th>Document</th>
+                </tr>
+              </thead>
+              <tbody>
+                {analysis.filings.map((filing) => (
+                  <tr key={filing.accession_number}>
+                    <td>{format(new Date(filing.filing_date), 'MMM dd, yyyy')}</td>
+                    <td>{filing.filing_type}</td>
+                    <td>{filing.metrics?.revenue ? formatCompactCurrency(filing.metrics.revenue) : 'n/a'}</td>
+                    <td>{filing.metrics?.netIncome ? formatCompactCurrency(filing.metrics.netIncome) : 'n/a'}</td>
+                    <td>{filing.metrics?.totalAssets ? formatCompactCurrency(filing.metrics.totalAssets) : 'n/a'}</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)]">
+                          SEC filing
+                        </a>
+                      ) : (
+                        'n/a'
+                      )}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </Panel>
+
+      <Panel title="AI Reports" subtitle="Generated filing analyses for this company.">
+        {loading ? (
+          <p className="text-sm text-[color:var(--terminal-muted)]">Loading AI reports...</p>
+        ) : !analysis || analysis.aiReports.length === 0 ? (
+          <p className="text-sm text-[color:var(--terminal-muted)]">No AI reports generated yet. Run filing analysis from the filings stream.</p>
+        ) : (
+          <div className="grid grid-cols-1 gap-3 lg:grid-cols-2">
+            {analysis.aiReports.map((report) => (
+              <article key={report.accessionNumber} className="rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-4">
+                <div className="flex items-start justify-between gap-3">
+                  <div>
+                    <p className="text-xs uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">
+                      {report.filingType} · {format(new Date(report.filingDate), 'MMM dd, yyyy')}
+                    </p>
+                    <h4 className="mt-1 text-sm font-semibold text-[color:var(--terminal-bright)]">{report.provider} / {report.model}</h4>
+                  </div>
+                  <BrainCircuit className="size-4 text-[color:var(--accent)]" />
+                </div>
+                <p className="mt-3 line-clamp-6 whitespace-pre-wrap text-sm leading-6 text-[color:var(--terminal-bright)]">{report.summary}</p>
+              </article>
+            ))}
+          </div>
+        )}
+      </Panel>
+
+      <Panel>
+        <div className="flex items-center gap-2 text-xs uppercase tracking-[0.24em] text-[color:var(--terminal-muted)]">
+          <ChartNoAxesCombined className="size-4" />
+          Analysis scope: price + filings + ai synthesis
+        </div>
+      </Panel>
+    </AppShell>
+  );
+}

app/page.tsx

@@ -202,7 +202,11 @@ export default function CommandCenterPage() {
       </div>
 
       <Panel title="Quick Links" subtitle="Feature modules">
-        <div className="grid grid-cols-1 gap-3 md:grid-cols-3">
+        <div className="grid grid-cols-1 gap-3 md:grid-cols-4">
+          <Link className="rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-4 transition hover:border-[color:var(--line-strong)] hover:bg-[color:var(--panel-bright)]" href="/analysis">
+            <p className="panel-heading text-xs uppercase text-[color:var(--terminal-muted)]">Analysis</p>
+            <p className="mt-2 text-sm text-[color:var(--terminal-bright)]">Inspect one company across prices, filings, financials, and AI reports.</p>
+          </Link>
           <Link className="rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-4 transition hover:border-[color:var(--line-strong)] hover:bg-[color:var(--panel-bright)]" href="/filings">
             <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>

app/watchlist/page.tsx

@@ -133,6 +133,13 @@ export default function WatchlistPage() {
                       Open stream
                       <ArrowRight className="size-3" />
                     </Link>
+                    <Link
+                      href={`/analysis?ticker=${item.ticker}`}
+                      className="inline-flex items-center gap-1 text-xs text-[color:var(--accent)] hover:text-[color:var(--accent-strong)]"
+                    >
+                      Analyze
+                      <ArrowRight className="size-3" />
+                    </Link>
                     <Button
                       variant="danger"
                       className="ml-auto px-2 py-1 text-xs"