feat: investment scenario UX improvements and interest calculations

- Refresh Recommendations now shows inline processing banner with
  animated progress bar while keeping existing results visible (dimmed).
  Auto-scrolls to AI section and shows titled notification on completion.
- Investment recommendations now auto-calculate purchase and maturity
  dates from a configurable start date (defaults to today) in the
  "Add to Plan" modal, so scenarios build projections immediately.
- Projection engine computes per-investment and total interest earned,
  ROI percentage, and total principal invested. Summary cards on the
  Investment Scenario detail page display these metrics prominently.
- Replaced dropdown action menu with inline Edit/Execute/Remove
  icon buttons matching the assessment scenarios pattern.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/pages/board-planning/InvestmentScenarioDetailPage.tsx

@@ -1,12 +1,12 @@
 import { useState } from 'react';
 import {
   Title, Text, Stack, Group, Button, Table, Badge, Card, ActionIcon,
-  Loader, Center, Menu, Select, Modal, TextInput, Alert,
+  Loader, Center, Select, Modal, TextInput, Alert, SimpleGrid, Tooltip,
 } from '@mantine/core';
 import { DateInput } from '@mantine/dates';
 import {
-  IconPlus, IconArrowLeft, IconDots, IconTrash, IconEdit,
-  IconPlayerPlay, IconRefresh, IconAlertTriangle,
+  IconPlus, IconArrowLeft, IconTrash, IconEdit,
+  IconPlayerPlay, IconCoin, IconTrendingUp,
 } from '@tabler/icons-react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { useParams, useNavigate } from 'react-router-dom';
@@ -17,6 +17,7 @@ import { ProjectionChart } from './components/ProjectionChart';
 import { InvestmentTimeline } from './components/InvestmentTimeline';
 
 const fmt = (v: number) => v.toLocaleString('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 });
+const fmtDec = (v: number) => v.toLocaleString('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 2, maximumFractionDigits: 2 });
 
 const statusColors: Record<string, string> = {
   draft: 'gray', active: 'blue', approved: 'green', archived: 'red',
@@ -39,7 +40,7 @@ export function InvestmentScenarioDetailPage() {
     },
   });
 
-  const { data: projection, isLoading: projLoading, refetch: refetchProjection } = useQuery({
+  const { data: projection, isLoading: projLoading } = useQuery({
     queryKey: ['board-planning-projection', id],
     queryFn: async () => {
       const { data } = await api.get(`/board-planning/scenarios/${id}/projection`);
@@ -99,18 +100,19 @@ export function InvestmentScenarioDetailPage() {
     },
   });
 
-  const refreshProjection = useMutation({
-    mutationFn: () => api.post(`/board-planning/scenarios/${id}/projection/refresh`),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['board-planning-projection', id] });
-      notifications.show({ message: 'Projection refreshed', color: 'green' });
-    },
-  });
-
   if (isLoading) return <Center h={400}><Loader size="lg" /></Center>;
   if (!scenario) return <Center h={400}><Text>Scenario not found</Text></Center>;
 
   const investments = scenario.investments || [];
+  const summary = projection?.summary;
+
+  // Build a lookup of per-investment interest from the projection
+  const interestDetailMap: Record<string, { interest: number; principal: number }> = {};
+  if (summary?.investment_interest_details) {
+    for (const d of summary.investment_interest_details) {
+      interestDetailMap[d.id] = { interest: d.interest, principal: d.principal };
+    }
+  }
 
   return (
     <Stack>
@@ -139,15 +141,51 @@ export function InvestmentScenarioDetailPage() {
               { value: 'approved', label: 'Approved' },
             ]}
           />
-          <Button size="sm" variant="light" leftSection={<IconRefresh size={16} />} onClick={() => refreshProjection.mutate()} loading={refreshProjection.isPending}>
-            Refresh Projection
-          </Button>
           <Button size="sm" leftSection={<IconPlus size={16} />} onClick={() => setAddOpen(true)}>
             Add Investment
           </Button>
         </Group>
       </Group>
 
+      {/* Summary Cards */}
+      {summary && (
+        <SimpleGrid cols={{ base: 1, sm: 2, lg: 4 }}>
+          <Card withBorder p="md">
+            <Text size="xs" c="dimmed" tt="uppercase" fw={700}>Total Principal</Text>
+            <Text fw={700} size="xl" ff="monospace">{fmt(summary.total_principal_invested || 0)}</Text>
+            <Text size="xs" c="dimmed">{investments.filter((i: any) => !i.executed_investment_id).length} planned investments</Text>
+          </Card>
+          <Card withBorder p="md">
+            <Text size="xs" c="dimmed" tt="uppercase" fw={700}>Projected Interest Earned</Text>
+            <Text fw={700} size="xl" ff="monospace" c="green">
+              {summary.total_interest_earned > 0 ? `+${fmtDec(summary.total_interest_earned)}` : '$0.00'}
+            </Text>
+            {summary.total_interest_earned > 0 && (
+              <Text size="xs" c="dimmed">Over projection period</Text>
+            )}
+            {summary.total_interest_earned === 0 && investments.length > 0 && (
+              <Text size="xs" c="orange">Set purchase & maturity dates to calculate</Text>
+            )}
+          </Card>
+          <Card withBorder p="md">
+            <Text size="xs" c="dimmed" tt="uppercase" fw={700}>Return on Investment</Text>
+            <Text fw={700} size="xl" ff="monospace" c={summary.roi_percentage > 0 ? 'green' : undefined}>
+              {summary.roi_percentage > 0 ? `${summary.roi_percentage.toFixed(2)}%` : '-'}
+            </Text>
+            {summary.roi_percentage > 0 && (
+              <Text size="xs" c="dimmed">Interest / Principal</Text>
+            )}
+          </Card>
+          <Card withBorder p="md">
+            <Text size="xs" c="dimmed" tt="uppercase" fw={700}>End Liquidity</Text>
+            <Text fw={700} size="xl" ff="monospace">{fmt(summary.end_liquidity || 0)}</Text>
+            <Text size="xs" c={summary.period_change >= 0 ? 'green' : 'red'}>
+              {summary.period_change >= 0 ? '+' : ''}{fmt(summary.period_change || 0)} over period
+            </Text>
+          </Card>
+        </SimpleGrid>
+      )}
+
       {/* Investments Table */}
       <Card withBorder p="lg">
         <Title order={4} mb="md">Planned Investments ({investments.length})</Title>
@@ -160,50 +198,62 @@ export function InvestmentScenarioDetailPage() {
                 <Table.Th>Fund</Table.Th>
                 <Table.Th ta="right">Principal</Table.Th>
                 <Table.Th ta="right">Rate</Table.Th>
+                <Table.Th ta="right">Est. Interest</Table.Th>
                 <Table.Th>Purchase</Table.Th>
                 <Table.Th>Maturity</Table.Th>
                 <Table.Th>Status</Table.Th>
-                <Table.Th w={80}>Actions</Table.Th>
+                <Table.Th w={100}>Actions</Table.Th>
               </Table.Tr>
             </Table.Thead>
             <Table.Tbody>
-              {investments.map((inv: any) => (
-                <Table.Tr key={inv.id}>
-                  <Table.Td fw={500}>{inv.label}</Table.Td>
-                  <Table.Td><Badge size="sm" variant="light">{inv.investment_type || '-'}</Badge></Table.Td>
-                  <Table.Td><Badge size="sm" color={inv.fund_type === 'reserve' ? 'violet' : 'blue'}>{inv.fund_type}</Badge></Table.Td>
-                  <Table.Td ta="right" ff="monospace">{fmt(parseFloat(inv.principal))}</Table.Td>
-                  <Table.Td ta="right">{inv.interest_rate ? `${parseFloat(inv.interest_rate).toFixed(2)}%` : '-'}</Table.Td>
-                  <Table.Td>{inv.purchase_date ? new Date(inv.purchase_date).toLocaleDateString() : '-'}</Table.Td>
-                  <Table.Td>{inv.maturity_date ? new Date(inv.maturity_date).toLocaleDateString() : '-'}</Table.Td>
-                  <Table.Td>
-                    {inv.executed_investment_id
-                      ? <Badge size="sm" color="green">Executed</Badge>
-                      : <Badge size="sm" color="gray">Planned</Badge>}
-                  </Table.Td>
-                  <Table.Td>
-                    <Menu withinPortal position="bottom-end" shadow="sm">
-                      <Menu.Target>
-                        <ActionIcon variant="subtle" color="gray"><IconDots size={16} /></ActionIcon>
-                      </Menu.Target>
-                      <Menu.Dropdown>
-                        <Menu.Item leftSection={<IconEdit size={14} />} onClick={() => setEditInv(inv)}>Edit</Menu.Item>
+              {investments.map((inv: any) => {
+                const detail = interestDetailMap[inv.id];
+                return (
+                  <Table.Tr key={inv.id}>
+                    <Table.Td fw={500}>{inv.label}</Table.Td>
+                    <Table.Td><Badge size="sm" variant="light">{inv.investment_type || '-'}</Badge></Table.Td>
+                    <Table.Td><Badge size="sm" color={inv.fund_type === 'reserve' ? 'violet' : 'blue'}>{inv.fund_type}</Badge></Table.Td>
+                    <Table.Td ta="right" ff="monospace">{fmt(parseFloat(inv.principal))}</Table.Td>
+                    <Table.Td ta="right">{inv.interest_rate ? `${parseFloat(inv.interest_rate).toFixed(2)}%` : '-'}</Table.Td>
+                    <Table.Td ta="right" ff="monospace" c={detail?.interest ? 'green' : 'dimmed'}>
+                      {detail?.interest ? `+${fmtDec(detail.interest)}` : '-'}
+                    </Table.Td>
+                    <Table.Td>{inv.purchase_date ? new Date(inv.purchase_date).toLocaleDateString() : <Text size="sm" c="orange">-</Text>}</Table.Td>
+                    <Table.Td>{inv.maturity_date ? new Date(inv.maturity_date).toLocaleDateString() : <Text size="sm" c="orange">-</Text>}</Table.Td>
+                    <Table.Td>
+                      {inv.executed_investment_id
+                        ? <Badge size="sm" color="green">Executed</Badge>
+                        : <Badge size="sm" color="gray">Planned</Badge>}
+                    </Table.Td>
+                    <Table.Td>
+                      <Group gap={4} wrap="nowrap">
+                        <Tooltip label="Edit">
+                          <ActionIcon variant="subtle" color="blue" size="sm" onClick={() => setEditInv(inv)}>
+                            <IconEdit size={16} />
+                          </ActionIcon>
+                        </Tooltip>
                         {!inv.executed_investment_id && (
-                          <Menu.Item leftSection={<IconPlayerPlay size={14} />} color="green" onClick={() => { setExecuteInv(inv); setExecutionDate(new Date()); }}>
-                            Execute
-                          </Menu.Item>
+                          <Tooltip label="Execute">
+                            <ActionIcon variant="subtle" color="green" size="sm" onClick={() => { setExecuteInv(inv); setExecutionDate(new Date()); }}>
+                              <IconPlayerPlay size={16} />
+                            </ActionIcon>
+                          </Tooltip>
                         )}
-                        <Menu.Item leftSection={<IconTrash size={14} />} color="red" onClick={() => removeMutation.mutate(inv.id)}>Remove</Menu.Item>
-                      </Menu.Dropdown>
-                    </Menu>
-                  </Table.Td>
-                </Table.Tr>
-              ))}
+                        <Tooltip label="Remove">
+                          <ActionIcon variant="subtle" color="red" size="sm" onClick={() => removeMutation.mutate(inv.id)}>
+                            <IconTrash size={16} />
+                          </ActionIcon>
+                        </Tooltip>
+                      </Group>
+                    </Table.Td>
+                  </Table.Tr>
+                );
+              })}
             </Table.Tbody>
           </Table>
         ) : (
           <Text ta="center" c="dimmed" py="lg">
-            No investments added yet. Click "Add Investment" to model an investment allocation.
+            No investments added yet. Click &quot;Add Investment&quot; to model an investment allocation.
           </Text>
         )}
       </Card>

frontend/src/pages/investment-planning/InvestmentPlanningPage.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useRef } from 'react';
 import {
   Title,
   Text,
@@ -22,6 +22,7 @@ import {
   Modal,
   Select,
   TextInput,
+  Progress,
 } from '@mantine/core';
 import {
   IconBulb,
@@ -37,6 +38,7 @@ import {
   IconChevronUp,
   IconPlaylistAdd,
 } from '@tabler/icons-react';
+import { DateInput } from '@mantine/dates';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { notifications } from '@mantine/notifications';
 import { useNavigate } from 'react-router-dom';
@@ -381,6 +383,7 @@ export function InvestmentPlanningPage() {
   const [selectedRec, setSelectedRec] = useState<Recommendation | null>(null);
   const [targetScenarioId, setTargetScenarioId] = useState<string | null>(null);
   const [newScenarioName, setNewScenarioName] = useState('');
+  const [investmentStartDate, setInvestmentStartDate] = useState<Date | null>(new Date());
 
   // Load investment scenarios for the "Add to Plan" modal
   const { data: investmentScenarios } = useQuery<any[]>({
@@ -403,6 +406,7 @@ export function InvestmentPlanningPage() {
         bankName: rec.bank_name,
         rationale: rec.rationale,
         components: rec.components || undefined,
+        startDate: investmentStartDate ? investmentStartDate.toISOString().split('T')[0] : null,
       });
       return scenarioId;
     },
@@ -433,6 +437,7 @@ export function InvestmentPlanningPage() {
         bankName: rec.bank_name,
         rationale: rec.rationale,
         components: rec.components || undefined,
+        startDate: investmentStartDate ? investmentStartDate.toISOString().split('T')[0] : null,
       });
       return scenario.id;
     },
@@ -453,6 +458,7 @@ export function InvestmentPlanningPage() {
     setSelectedRec(rec);
     setTargetScenarioId(null);
     setNewScenarioName('');
+    setInvestmentStartDate(new Date());
     setPlanModalOpen(true);
   };
 
@@ -507,20 +513,31 @@ export function InvestmentPlanningPage() {
     }
   }, [savedRec?.status, isTriggering]);
 
+  // Ref for scrolling to AI section on completion
+  const aiSectionRef = useRef<HTMLDivElement>(null);
+
   // Show notification when processing completes (transition from processing)
   const prevStatusRef = useState<string | null>(null);
   useEffect(() => {
     const [prevStatus, setPrevStatus] = prevStatusRef;
     if (prevStatus === 'processing' && savedRec?.status === 'complete') {
       notifications.show({
+        title: 'AI Analysis Complete',
         message: `Generated ${savedRec.recommendations.length} investment recommendations`,
         color: 'green',
+        autoClose: 8000,
       });
+      // Scroll the AI section into view so user sees the new results
+      setTimeout(() => {
+        aiSectionRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      }, 300);
     }
     if (prevStatus === 'processing' && savedRec?.status === 'error') {
       notifications.show({
+        title: 'AI Analysis Failed',
         message: savedRec.error_message || 'AI recommendation analysis failed',
         color: 'red',
+        autoClose: 8000,
       });
     }
     setPrevStatus(savedRec?.status || null);
@@ -791,7 +808,7 @@ export function InvestmentPlanningPage() {
       <Divider />
 
       {/* ── Section 4: AI Investment Recommendations ── */}
-      <Card withBorder p="lg">
+      <Card withBorder p="lg" ref={aiSectionRef}>
         <Group justify="space-between" mb="md">
           <Group gap="xs">
             <ThemeIcon variant="light" color="grape" size="md">
@@ -815,19 +832,22 @@ export function InvestmentPlanningPage() {
           </Button>
         </Group>
 
-        {/* Processing State */}
+        {/* Processing State - shown as banner when refreshing with existing results */}
         {isProcessing && (
-          <Center py="xl">
-            <Stack align="center" gap="sm">
-              <Loader size="lg" type="dots" />
-              <Text c="dimmed" size="sm">
-                Analyzing your financial data and market rates...
-              </Text>
-              <Text c="dimmed" size="xs">
-                You can navigate away — results will appear when ready
-              </Text>
-            </Stack>
-          </Center>
+          <Alert variant="light" color="grape" mb="md" styles={{ root: { overflow: 'visible' } }}>
+            <Group gap="sm">
+              <Loader size="sm" color="grape" />
+              <div style={{ flex: 1 }}>
+                <Text size="sm" fw={500}>
+                  {aiResult ? 'Refreshing AI analysis...' : 'Running AI analysis...'}
+                </Text>
+                <Text size="xs" c="dimmed">
+                  Analyzing your financial data, accounts, budgets, and current market rates
+                </Text>
+              </div>
+            </Group>
+            <Progress value={100} animated color="grape" size="xs" mt="xs" />
+          </Alert>
         )}
 
         {/* Error State (no cached data) */}
@@ -839,17 +859,19 @@ export function InvestmentPlanningPage() {
           </Alert>
         )}
 
-        {/* Results (with optional failure watermark) */}
-        {aiResult && !isProcessing && (
-          <RecommendationsDisplay
-            aiResult={aiResult}
-            lastUpdated={savedRec?.created_at || undefined}
-            lastFailed={lastFailed}
-            onAddToPlan={handleAddToPlan}
-          />
+        {/* Results - keep visible even while refreshing (with optional failure watermark) */}
+        {aiResult && (
+          <div style={isProcessing ? { opacity: 0.5, pointerEvents: 'none' } : undefined}>
+            <RecommendationsDisplay
+              aiResult={aiResult}
+              lastUpdated={savedRec?.created_at || undefined}
+              lastFailed={lastFailed}
+              onAddToPlan={handleAddToPlan}
+            />
+          </div>
         )}
 
-        {/* Empty State */}
+        {/* Empty State - only when no results and not processing */}
         {!aiResult && !isProcessing && !hasError && (
           <Paper p="xl" radius="sm" style={{ textAlign: 'center' }}>
             <ThemeIcon variant="light" color="grape" size={48} mx="auto" mb="md">
@@ -890,6 +912,14 @@ export function InvestmentPlanningPage() {
             </Alert>
           )}
 
+          <DateInput
+            label="Start Date"
+            description="Purchase date for the investment(s). Maturity dates are calculated automatically from term length."
+            value={investmentStartDate}
+            onChange={setInvestmentStartDate}
+            clearable
+          />
+
           {investmentScenarios && investmentScenarios.length > 0 && (
             <Select
               label="Add to existing scenario"