Implement fiscal-style research MVP flows

app/portfolio/page.tsx

@@ -1,18 +1,21 @@
 'use client';
 
 import { useQueryClient } from '@tanstack/react-query';
+import Link from 'next/link';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { PieChart, Pie, Cell, Tooltip, Legend, ResponsiveContainer, BarChart, CartesianGrid, XAxis, YAxis, Bar } from 'recharts';
-import { BrainCircuit, Plus, RefreshCcw, Trash2 } from 'lucide-react';
+import { BrainCircuit, Plus, RefreshCcw, SquarePen, Trash2 } from 'lucide-react';
 import { AppShell } from '@/components/shell/app-shell';
 import { Panel } from '@/components/ui/panel';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { useAuthGuard } from '@/hooks/use-auth-guard';
+import { useLinkPrefetch } from '@/hooks/use-link-prefetch';
 import {
   deleteHolding,
   queuePortfolioInsights,
   queuePriceRefresh,
+  updateHolding,
   upsertHolding
 } from '@/lib/api';
 import type { Holding, PortfolioInsight, PortfolioSummary } from '@/lib/types';
@@ -26,6 +29,7 @@ import {
 
 type FormState = {
   ticker: string;
+  companyName: string;
   shares: string;
   avgCost: string;
   currentPrice: string;
@@ -49,13 +53,15 @@ const EMPTY_SUMMARY: PortfolioSummary = {
 export default function PortfolioPage() {
   const { isPending, isAuthenticated } = useAuthGuard();
   const queryClient = useQueryClient();
+  const { prefetchResearchTicker } = useLinkPrefetch();
 
   const [holdings, setHoldings] = useState<Holding[]>([]);
   const [summary, setSummary] = useState<PortfolioSummary>(EMPTY_SUMMARY);
   const [latestInsight, setLatestInsight] = useState<PortfolioInsight | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
-  const [form, setForm] = useState<FormState>({ ticker: '', shares: '', avgCost: '', currentPrice: '' });
+  const [editingHoldingId, setEditingHoldingId] = useState<number | null>(null);
+  const [form, setForm] = useState<FormState>({ ticker: '', companyName: '', shares: '', avgCost: '', currentPrice: '' });
 
   const loadPortfolio = useCallback(async () => {
     const holdingsOptions = holdingsQueryOptions();
@@ -70,9 +76,9 @@ export default function PortfolioPage() {
 
     try {
       const [holdingsRes, summaryRes, insightRes] = await Promise.all([
-        queryClient.ensureQueryData(holdingsOptions),
-        queryClient.ensureQueryData(summaryOptions),
-        queryClient.ensureQueryData(insightOptions)
+        queryClient.fetchQuery(holdingsOptions),
+        queryClient.fetchQuery(summaryOptions),
+        queryClient.fetchQuery(insightOptions)
       ]);
 
       setHoldings(holdingsRes.holdings);
@@ -107,18 +113,33 @@ export default function PortfolioPage() {
     [holdings]
   );
 
+  const resetHoldingForm = useCallback(() => {
+    setEditingHoldingId(null);
+    setForm({ ticker: '', companyName: '', shares: '', avgCost: '', currentPrice: '' });
+  }, []);
+
   const submitHolding = async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
 
     try {
-      await upsertHolding({
-        ticker: form.ticker.toUpperCase(),
-        shares: Number(form.shares),
-        avgCost: Number(form.avgCost),
-        currentPrice: form.currentPrice ? Number(form.currentPrice) : undefined
-      });
+      if (editingHoldingId === null) {
+        await upsertHolding({
+          ticker: form.ticker.toUpperCase(),
+          companyName: form.companyName.trim() || undefined,
+          shares: Number(form.shares),
+          avgCost: Number(form.avgCost),
+          currentPrice: form.currentPrice ? Number(form.currentPrice) : undefined
+        });
+      } else {
+        await updateHolding(editingHoldingId, {
+          companyName: form.companyName.trim() || undefined,
+          shares: Number(form.shares),
+          avgCost: Number(form.avgCost),
+          currentPrice: form.currentPrice ? Number(form.currentPrice) : undefined
+        });
+      }
 
-      setForm({ ticker: '', shares: '', avgCost: '', currentPrice: '' });
+      resetHoldingForm();
       void queryClient.invalidateQueries({ queryKey: queryKeys.holdings() });
       void queryClient.invalidateQueries({ queryKey: queryKeys.portfolioSummary() });
       await loadPortfolio();
@@ -282,15 +303,17 @@ export default function PortfolioPage() {
             <p className="text-sm text-[color:var(--terminal-muted)]">No holdings added yet.</p>
           ) : (
             <div className="max-w-full overflow-x-auto">
-              <table className="data-table min-w-[780px]">
+              <table className="data-table min-w-[1020px]">
                 <thead>
                   <tr>
                     <th>Ticker</th>
+                    <th>Company</th>
                     <th>Shares</th>
                     <th>Avg Cost</th>
                     <th>Price</th>
                     <th>Value</th>
                     <th>Gain/Loss</th>
+                    <th>Research</th>
                     <th>Action</th>
                   </tr>
                 </thead>
@@ -298,6 +321,7 @@ export default function PortfolioPage() {
                   {holdings.map((holding) => (
                     <tr key={holding.id}>
                       <td>{holding.ticker}</td>
+                      <td>{holding.company_name ?? 'n/a'}</td>
                       <td>{asNumber(holding.shares).toLocaleString()}</td>
                       <td>{formatCurrency(holding.avg_cost)}</td>
                       <td>{holding.current_price ? formatCurrency(holding.current_price) : 'n/a'}</td>
@@ -306,23 +330,73 @@ export default function PortfolioPage() {
                         {formatCurrency(holding.gain_loss)} ({formatPercent(holding.gain_loss_pct)})
                       </td>
                       <td>
-                        <Button
-                          variant="danger"
-                          className="px-2 py-1 text-xs"
-                          onClick={async () => {
-                            try {
-                              await deleteHolding(holding.id);
-                              void queryClient.invalidateQueries({ queryKey: queryKeys.holdings() });
-                              void queryClient.invalidateQueries({ queryKey: queryKeys.portfolioSummary() });
-                              await loadPortfolio();
-                            } catch (err) {
-                              setError(err instanceof Error ? err.message : 'Failed to delete holding');
-                            }
-                          }}
-                        >
-                          <Trash2 className="size-3" />
-                          Delete
-                        </Button>
+                        <div className="flex flex-wrap gap-2">
+                          <Link
+                            href={`/analysis?ticker=${holding.ticker}`}
+                            onMouseEnter={() => prefetchResearchTicker(holding.ticker)}
+                            onFocus={() => prefetchResearchTicker(holding.ticker)}
+                            className="text-xs text-[color:var(--accent)] hover:text-[color:var(--accent-strong)]"
+                          >
+                            Analysis
+                          </Link>
+                          <Link
+                            href={`/financials?ticker=${holding.ticker}`}
+                            onMouseEnter={() => prefetchResearchTicker(holding.ticker)}
+                            onFocus={() => prefetchResearchTicker(holding.ticker)}
+                            className="text-xs text-[color:var(--accent)] hover:text-[color:var(--accent-strong)]"
+                          >
+                            Financials
+                          </Link>
+                          <Link
+                            href={`/filings?ticker=${holding.ticker}`}
+                            onMouseEnter={() => prefetchResearchTicker(holding.ticker)}
+                            onFocus={() => prefetchResearchTicker(holding.ticker)}
+                            className="text-xs text-[color:var(--accent)] hover:text-[color:var(--accent-strong)]"
+                          >
+                            Filings
+                          </Link>
+                        </div>
+                      </td>
+                      <td>
+                        <div className="flex flex-wrap gap-2">
+                          <Button
+                            variant="ghost"
+                            className="px-2 py-1 text-xs"
+                            onClick={() => {
+                              setEditingHoldingId(holding.id);
+                              setForm({
+                                ticker: holding.ticker,
+                                companyName: holding.company_name ?? '',
+                                shares: String(asNumber(holding.shares)),
+                                avgCost: String(asNumber(holding.avg_cost)),
+                                currentPrice: holding.current_price ? String(asNumber(holding.current_price)) : ''
+                              });
+                            }}
+                          >
+                            <SquarePen className="size-3" />
+                            Edit
+                          </Button>
+                          <Button
+                            variant="danger"
+                            className="px-2 py-1 text-xs"
+                            onClick={async () => {
+                              try {
+                                await deleteHolding(holding.id);
+                                void queryClient.invalidateQueries({ queryKey: queryKeys.holdings() });
+                                void queryClient.invalidateQueries({ queryKey: queryKeys.portfolioSummary() });
+                                await loadPortfolio();
+                                if (editingHoldingId === holding.id) {
+                                  resetHoldingForm();
+                                }
+                              } catch (err) {
+                                setError(err instanceof Error ? err.message : 'Failed to delete holding');
+                              }
+                            }}
+                          >
+                            <Trash2 className="size-3" />
+                            Delete
+                          </Button>
+                        </div>
                       </td>
                     </tr>
                   ))}
@@ -332,28 +406,50 @@ export default function PortfolioPage() {
           )}
         </Panel>
 
-        <Panel title="Add / Update Holding">
+        <Panel title={editingHoldingId === null ? 'Add Holding' : 'Edit Holding'}>
           <form onSubmit={submitHolding} className="space-y-3">
             <div>
               <label className="mb-1 block text-xs uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">Ticker</label>
-              <Input value={form.ticker} onChange={(event) => setForm((prev) => ({ ...prev, ticker: event.target.value.toUpperCase() }))} required />
+              <Input
+                value={form.ticker}
+                aria-label="Holding ticker"
+                disabled={editingHoldingId !== null}
+                onChange={(event) => setForm((prev) => ({ ...prev, ticker: event.target.value.toUpperCase() }))}
+                required
+              />
+            </div>
+            <div>
+              <label className="mb-1 block text-xs uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">Company Name (optional)</label>
+              <Input
+                value={form.companyName}
+                aria-label="Holding company name"
+                onChange={(event) => setForm((prev) => ({ ...prev, companyName: event.target.value }))}
+                placeholder="Resolved from coverage or filings if left blank"
+              />
             </div>
             <div>
               <label className="mb-1 block text-xs uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">Shares</label>
-              <Input type="number" step="0.0001" min="0.0001" value={form.shares} onChange={(event) => setForm((prev) => ({ ...prev, shares: event.target.value }))} required />
+              <Input aria-label="Holding shares" type="number" step="0.0001" min="0.0001" value={form.shares} onChange={(event) => setForm((prev) => ({ ...prev, shares: event.target.value }))} required />
             </div>
             <div>
               <label className="mb-1 block text-xs uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">Average Cost</label>
-              <Input type="number" step="0.0001" min="0.0001" value={form.avgCost} onChange={(event) => setForm((prev) => ({ ...prev, avgCost: event.target.value }))} required />
+              <Input aria-label="Holding average cost" type="number" step="0.0001" min="0.0001" value={form.avgCost} onChange={(event) => setForm((prev) => ({ ...prev, avgCost: event.target.value }))} required />
             </div>
             <div>
               <label className="mb-1 block text-xs uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">Current Price (optional)</label>
-              <Input type="number" step="0.0001" min="0" value={form.currentPrice} onChange={(event) => setForm((prev) => ({ ...prev, currentPrice: event.target.value }))} />
+              <Input aria-label="Holding current price" type="number" step="0.0001" min="0" value={form.currentPrice} onChange={(event) => setForm((prev) => ({ ...prev, currentPrice: event.target.value }))} />
+            </div>
+            <div className="flex flex-wrap gap-2">
+              <Button type="submit" className="flex-1">
+                <Plus className="size-4" />
+                {editingHoldingId === null ? 'Save holding' : 'Update holding'}
+              </Button>
+              {editingHoldingId !== null ? (
+                <Button type="button" variant="ghost" onClick={resetHoldingForm}>
+                  Cancel
+                </Button>
+              ) : null}
             </div>
-            <Button type="submit" className="w-full">
-              <Plus className="size-4" />
-              Save holding
-            </Button>
           </form>
 
           <div className="mt-5 border-t border-[color:var(--line-weak)] pt-4">