refactor(ui): ADR-012 IA — Insights tab, read-only Overview, empty-state landing (om-bm7n)

Split Overview's conflated altitudes into four surfaces (ADR-012):
- New Insights.svelte hosts the analysis cluster (composition, stack-by-type,
  hunt-yield-by-bank, trophies, hit-rate), lifted out of Dashboard.
- Overview slims to glance+ledger and goes read-only.
- Add the 4th Insights tab; rename the third view entry->edit to match the ADR.
- Move the spot editor to Settings (own update action, won't clobber the
  polled spot); Overview keeps the read-only freshness chip.
- Empty database lands on Do with a get-started card, not a wall of zeros.

Establishes the addition contract every later feature obeys: new data -> Edit
grid, action -> Do tile, signal -> Do hint, analysis -> Insights row; never a
new Dashboard section.

Author: tompscanlan

web/app/src/App.svelte

@@ -4,6 +4,7 @@
   import { today } from '$lib/format'
   import Dashboard from '$lib/components/Dashboard.svelte'
   import Do from '$lib/components/Do.svelte'
+  import Insights from '$lib/components/Insights.svelte'
   import EditableGrid from '$lib/components/EditableGrid.svelte'
   import Button from '$lib/components/ui/Button.svelte'
   import { cn } from '$lib/utils'
@@ -17,9 +18,9 @@
     type FlatHolding,
   } from '$lib/grids'
   import SettingsPanel from '$lib/components/SettingsPanel.svelte'
-  import { Moon, Sun, RefreshCw, LayoutDashboard, Table2, Zap, Settings as SettingsIcon } from 'lucide-svelte'
+  import { Moon, Sun, RefreshCw, LayoutDashboard, Table2, Zap, BarChart3, Settings as SettingsIcon } from 'lucide-svelte'
 
-  type View = 'overview' | 'do' | 'entry'
+  type View = 'overview' | 'do' | 'insights' | 'edit'
   type DataTab = 'holdings' | 'rolls' | 'trips' | 'supplies' | 'keepers' | 'losses'
 
   let view = $state<View>('overview')
@@ -29,11 +30,23 @@
   let error = $state('')
   let dark = $state(false)
   let settingsOpen = $state(false)
+  let landed = $state(false)
+
+  // A fresh database has no holdings and no roll-txn buys. ADR-012 §4: land such
+  // a user on an obvious action, not a wall of zeros — Overview also shows a
+  // get-started state below.
+  const isEmpty = $derived(!!report && report.lots.length === 0 && report.buy_count === 0)
 
   async function refresh() {
     try {
       report = await api.summary()
       error = ''
+      // First load only: send a brand-new user straight to Do (ADR-012 §4).
+      // Never override a navigation the user has already made.
+      if (!landed) {
+        landed = true
+        if (report.lots.length === 0 && report.buy_count === 0) view = 'do'
+      }
     } catch (e) {
       error = (e as Error).message
     } finally {
@@ -141,9 +154,18 @@
         <button
           class={cn(
             'flex items-center gap-1.5 rounded-md px-4 py-1.5 transition-colors',
-            view === 'entry' ? 'bg-card text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground',
+            view === 'insights' ? 'bg-card text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground',
           )}
-          onclick={() => (view = 'entry')}
+          onclick={() => (view = 'insights')}
+        >
+          <BarChart3 class="size-4" /> Insights
+        </button>
+        <button
+          class={cn(
+            'flex items-center gap-1.5 rounded-md px-4 py-1.5 transition-colors',
+            view === 'edit' ? 'bg-card text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground',
+          )}
+          onclick={() => (view = 'edit')}
         >
           <Table2 class="size-4" /> Edit
         </button>
@@ -160,12 +182,29 @@
       <p class="text-sm text-muted-foreground">Loading…</p>
     {:else if view === 'overview'}
       {#if report}
-        <Dashboard {report} onRefresh={refresh} />
+        {#if isEmpty}
+          <!-- get-started state: one obvious action, not a wall of zeros (ADR-012 §4) -->
+          <div class="mx-auto mt-6 max-w-md rounded-xl border bg-card p-8 text-center shadow-sm">
+            <div class="text-4xl">🪙</div>
+            <h2 class="mt-3 text-lg font-semibold text-foreground">Start your first hunt</h2>
+            <p class="mt-1.5 text-sm text-muted-foreground">
+              Log a box of coins you picked up from the bank — CoinRollHunter tracks the rest:
+              finds, costs, and whether it's paying off.
+            </p>
+            <Button class="mt-4" onclick={() => (view = 'do')}>Log your first box →</Button>
+          </div>
+        {:else}
+          <Dashboard {report} />
+        {/if}
       {/if}
     {:else if view === 'do'}
       {#if report}
         <Do {report} onChanged={refresh} />
       {/if}
+    {:else if view === 'insights'}
+      {#if report}
+        <Insights {report} />
+      {/if}
     {:else}
       <section class="space-y-4">
         <div class="flex items-center justify-between gap-3">
@@ -217,7 +256,7 @@
 </div>
 
 {#if settingsOpen}
-  <SettingsPanel onClose={() => (settingsOpen = false)} onSaved={refresh} />
+  <SettingsPanel spot={report?.spot} onClose={() => (settingsOpen = false)} onSaved={refresh} />
 {/if}
 
 {#if sellRow}

web/app/src/lib/components/Dashboard.svelte

@@ -1,21 +1,19 @@
 <script lang="ts">
-  import type { Report, EnrichedLot, Spot } from '$lib/types'
+  import type { Report, EnrichedLot } from '$lib/types'
   import { verdict } from '$lib/types'
-  import { money, pct, oz, num, today } from '$lib/format'
-  import { api } from '$lib/api'
+  import { money, pct, oz, num } from '$lib/format'
   import Card from '$lib/components/ui/Card.svelte'
-  import Button from '$lib/components/ui/Button.svelte'
   import Badge from '$lib/components/ui/Badge.svelte'
   import StatCard from './StatCard.svelte'
-  import Composition from './Composition.svelte'
-  import StackByType from './StackByType.svelte'
-  import HuntYield from './HuntYield.svelte'
-  import HitRateGrid from './HitRateGrid.svelte'
-  import TrophyFeed from './TrophyFeed.svelte'
   import { cn } from '$lib/utils'
   import { Check, TriangleAlert, RadioTower } from 'lucide-svelte'
 
-  let { report, onRefresh }: { report: Report; onRefresh: () => void } = $props()
+  // Overview owns the *glance + ledger* altitude only (ADR-012): what you can
+  // read without interpreting — is the hunt costing money, what's it worth, is
+  // the float square. Analysis (yield-by-bank, hit-rate, trophies, composition,
+  // stack-by-type) lives in Insights; the spot *editor* lives in Settings. This
+  // view stays read-only.
+  let { report }: { report: Report } = $props()
 
   const r = $derived(report)
   const bullion = $derived(r.lots.filter((l) => l.activity !== 'crh'))
@@ -31,47 +29,11 @@
       .map(([d, n]) => `${num(n)} ${d}`)
       .join(', ') || 'none logged',
   )
-
-  // Inline spot editor.
-  let spotGold = $state(0)
-  let spotSilver = $state(0)
-  let spotPlat = $state(0)
-  let spotPall = $state(0)
-  let spotDate = $state('')
-  let spotBusy = $state(false)
-  let spotErr = $state('')
-  $effect(() => {
-    spotGold = r.spot.gold_usd
-    spotSilver = r.spot.silver_usd
-    spotPlat = r.spot.platinum_usd
-    spotPall = r.spot.palladium_usd
-    spotDate = r.spot.as_of || today()
-  })
-
-  async function saveSpot() {
-    spotBusy = true
-    spotErr = ''
-    try {
-      const s: Spot = {
-        as_of: spotDate || today(),
-        gold_usd: Number(spotGold) || 0,
-        silver_usd: Number(spotSilver) || 0,
-        platinum_usd: Number(spotPlat) || 0,
-        palladium_usd: Number(spotPall) || 0,
-        source: 'manual',
-      }
-      await api.putSpot(s)
-      onRefresh()
-    } catch (e) {
-      spotErr = (e as Error).message
-    } finally {
-      spotBusy = false
-    }
-  }
 </script>
 
 <div class="space-y-6">
-  <!-- meta line + spot freshness chip (ADR-007: a background poller refreshes spot) -->
+  <!-- meta line + spot freshness chip (ADR-007: a background poller refreshes spot).
+       Read-only here; the spot editor moved to Settings (ADR-012 §5). -->
   <div class="flex flex-wrap items-center justify-between gap-x-4 gap-y-1">
     <p class="text-sm text-muted-foreground">
       As of <span class="font-medium text-foreground">{r.spot.as_of || '—'}</span>
@@ -80,7 +42,7 @@
     </p>
     <span
       class="inline-flex items-center gap-1.5 rounded-full border bg-muted/40 px-2.5 py-0.5 text-xs text-muted-foreground"
-      title="Spot prices refresh in the background while the app runs (ADR-007). Manual entry is the offline fallback."
+      title="Spot prices refresh in the background while the app runs (ADR-007). Manual entry is the offline fallback in Settings."
     >
       <RadioTower class="size-3" />
       <span>Spot: {r.spot.source || 'none'}</span>
@@ -121,12 +83,6 @@
     <StatCard label="CRH net (cash)" value={money(r.crh_net_real)} sub="finds minus costs" tone={crhTone} />
   </div>
 
-  <!-- live composition snapshot -->
-  <Composition {report} />
-
-  <!-- unified inventory: stack by coin type (bought + found combined) -->
-  <StackByType {report} />
-
   <!-- bullion -->
   <section class="space-y-2">
     <div class="flex items-center justify-between">
@@ -260,17 +216,6 @@
     </div>
   </section>
 
-  <!-- hunt yield by bank & box -->
-  {#if r.box_yields?.length}
-    <HuntYield {report} />
-  {/if}
-
-  <!-- greatest hits: finds flagged as trophies (ADR-006) -->
-  <TrophyFeed {report} />
-
-  <!-- hit-rate report: 1 per face $, per denom × category × source (ADR-006) -->
-  <HitRateGrid {report} />
-
   <!-- realized (sold) -->
   {#if r.realized?.length}
     <section class="space-y-2">
@@ -318,60 +263,4 @@
       </Card>
     </section>
   {/if}
-
-  <!-- spot updater -->
-  <section class="space-y-2">
-    <h2 class="text-lg font-semibold">Spot prices</h2>
-    <Card class="flex flex-wrap items-end gap-4 p-4">
-      <label class="flex flex-col gap-1 text-xs text-muted-foreground">
-        Gold $/ozt
-        <input
-          type="number"
-          step="0.01"
-          bind:value={spotGold}
-          class="w-32 rounded-md border border-input bg-card px-2 py-1.5 text-sm text-foreground tnum focus:border-ring focus:outline-none"
-        />
-      </label>
-      <label class="flex flex-col gap-1 text-xs text-muted-foreground">
-        Silver $/ozt
-        <input
-          type="number"
-          step="0.01"
-          bind:value={spotSilver}
-          class="w-32 rounded-md border border-input bg-card px-2 py-1.5 text-sm text-foreground tnum focus:border-ring focus:outline-none"
-        />
-      </label>
-      <label class="flex flex-col gap-1 text-xs text-muted-foreground">
-        Platinum $/ozt
-        <input
-          type="number"
-          step="0.01"
-          bind:value={spotPlat}
-          class="w-32 rounded-md border border-input bg-card px-2 py-1.5 text-sm text-foreground tnum focus:border-ring focus:outline-none"
-        />
-      </label>
-      <label class="flex flex-col gap-1 text-xs text-muted-foreground">
-        Palladium $/ozt
-        <input
-          type="number"
-          step="0.01"
-          bind:value={spotPall}
-          class="w-32 rounded-md border border-input bg-card px-2 py-1.5 text-sm text-foreground tnum focus:border-ring focus:outline-none"
-        />
-      </label>
-      <label class="flex flex-col gap-1 text-xs text-muted-foreground">
-        As of
-        <input
-          type="date"
-          bind:value={spotDate}
-          class="rounded-md border border-input bg-card px-2 py-1.5 text-sm text-foreground focus:border-ring focus:outline-none"
-        />
-      </label>
-      <Button onclick={saveSpot} disabled={spotBusy}>Update spot</Button>
-      {#if spotErr}<span class="text-sm text-destructive">{spotErr}</span>{/if}
-    </Card>
-    <p class="text-xs text-muted-foreground">
-      Manual entry is the offline fallback; a live spot feed can be wired behind the same endpoint later.
-    </p>
-  </section>
 </div>

web/app/src/lib/components/Insights.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  // Insights — the *analysis* altitude (ADR-012). Everything that needs a legend
+  // or study lives here, lifted out of Overview so the day-to-day glance stays
+  // read-without-interpreting. A day-to-day user never has to open this tab.
+  import type { Report } from '$lib/types'
+  import Composition from './Composition.svelte'
+  import StackByType from './StackByType.svelte'
+  import HuntYield from './HuntYield.svelte'
+  import TrophyFeed from './TrophyFeed.svelte'
+  import HitRateGrid from './HitRateGrid.svelte'
+
+  let { report }: { report: Report } = $props()
+  const r = $derived(report)
+
+  // Progressive disclosure (ADR-012 §3): analysis is *earned* by data. With
+  // nothing logged, don't render empty grids — a simple derived predicate, not a
+  // stored flag. "Which banks pay off" stays dormant until finds link to boxes.
+  const hasAnything = $derived(r.lots.length > 0 || r.buy_count > 0)
+</script>
+
+<div class="space-y-6">
+  <div>
+    <h2 class="text-lg font-semibold">Insights</h2>
+    <p class="text-sm text-muted-foreground">
+      The analysis layer — composition, which banks pay off, hit-rate, and your best finds.
+      Each view fills in as you log more hunts.
+    </p>
+  </div>
+
+  {#if !hasAnything}
+    <div class="rounded-lg border border-dashed px-4 py-10 text-center text-sm text-muted-foreground">
+      Nothing to analyze yet. Log a box and some finds in
+      <span class="font-medium text-foreground">Do</span>, and your yield-by-bank, hit-rate, and
+      trophies will appear here.
+    </div>
+  {:else}
+    <!-- live composition snapshot -->
+    <Composition {report} />
+
+    <!-- unified inventory: stack by coin type (bought + found combined) -->
+    <StackByType {report} />
+
+    <!-- hunt yield by bank & box: "which banks pay off" — dormant until finds link to boxes -->
+    {#if r.box_yields?.length}
+      <HuntYield {report} />
+    {/if}
+
+    <!-- greatest hits: finds flagged as trophies (ADR-006) -->
+    <TrophyFeed {report} />
+
+    <!-- hit-rate report: 1 per face $, per denom × category × source (ADR-006) -->
+    <HitRateGrid {report} />
+  {/if}
+</div>