pi-mega-compact 0.11.4 → 0.11.6

package/extensions/dashboard-client/dist/assets/pricing-CvE4NllQ.js

@@ -0,0 +1,2 @@
+const n={"claude-sonnet-4":3e-6,"claude-3.5-sonnet":3e-6,"claude-3-opus":15e-6,"claude-3-haiku":25e-8,"claude-3.5-haiku":8e-7,"gpt-4o":25e-7,"gpt-4o-mini":15e-8,"gpt-4-turbo":1e-5,"gpt-3.5-turbo":5e-7,"gemini-2.5-pro":125e-8,"gemini-2.5-flash":15e-8,"gemini-2.0-flash":1e-7,"deepseek-chat":14e-8,"deepseek-reasoner":55e-8,codestral:3e-7,"mistral-large":2e-6,"llama-3.1-405b":133e-8,"llama-3.1-70b":8e-7,"llama-3.1-8b":5e-8};function r(e){if(n[e]!=null)return n[e];for(const[a,t]of Object.entries(n))if(e.startsWith(a))return t}function s(e,a,t){if(t<=0)return{cacheReadSaved:0,cacheWriteCost:0,netSaved:0};const c=e*t*.9,o=a*t*.25;return{cacheReadSaved:c,cacheWriteCost:o,netSaved:c-o}}export{s as c,r as l};
+//# sourceMappingURL=pricing-CvE4NllQ.js.map

package/extensions/dashboard-client/dist/assets/pricing-CvE4NllQ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pricing-CvE4NllQ.js","sources":["../../../../src/pricing.ts"],"sourcesContent":["/**\n * pricing.ts — Reusable pricing constants and cache-savings computation.\n *\n * Single source of truth for provider prompt-cache pricing multipliers and\n * known model input rates. Extracted from routes-cache.ts inline arithmetic.\n *\n * PREVENT-PI-004: compute-only, zero network. No SQL, no IO.\n */\n\n// ─── Cache Pricing Multipliers ──────────────────────────────────────────────\n\n/**\n * Fraction of input cost saved per cache-read token.\n * Cache reads cost 10% of full input → you save 90% of the input cost.\n */\nexport const CACHE_READ_MULTIPLIER = 0.9;\n\n/**\n * Fraction of input cost incurred as a premium per cache-write token.\n * Cache writes cost 125% of full input → a 25% premium over a normal input token.\n */\nexport const CACHE_WRITE_MULTIPLIER = 0.25;\n\n// ─── Known Model Input Rates ─────────────────────────────────────────────────\n// USD per input token. Exact-match first, then prefix-match.\n\nexport const MODEL_INPUT_RATES: Record<string, number> = {\n\t\"claude-sonnet-4\": 3e-6, // $3/Mtok\n\t\"claude-3.5-sonnet\": 3e-6,\n\t\"claude-3-opus\": 15e-6,\n\t\"claude-3-haiku\": 0.25e-6,\n\t\"claude-3.5-haiku\": 0.8e-6,\n\t\"gpt-4o\": 2.5e-6,\n\t\"gpt-4o-mini\": 0.15e-6,\n\t\"gpt-4-turbo\": 10e-6,\n\t\"gpt-3.5-turbo\": 0.5e-6,\n\t\"gemini-2.5-pro\": 1.25e-6,\n\t\"gemini-2.5-flash\": 0.15e-6,\n\t\"gemini-2.0-flash\": 0.1e-6,\n\t\"deepseek-chat\": 0.14e-6,\n\t\"deepseek-reasoner\": 0.55e-6,\n\tcodestral: 0.3e-6,\n\t\"mistral-large\": 2e-6,\n\t\"llama-3.1-405b\": 1.33e-6,\n\t\"llama-3.1-70b\": 0.8e-6,\n\t\"llama-3.1-8b\": 0.05e-6,\n};\n\n/**\n * Look up the input-token rate (USD) for a model string.\n * Exact match first, then prefix match (e.g. \"claude-sonnet-4-20250514\" → 3e-6).\n */\nexport function lookupModelInputRate(model: string): number | undefined {\n\t// exact match first\n\tif (MODEL_INPUT_RATES[model] != null) return MODEL_INPUT_RATES[model];\n\t// prefix match\n\tfor (const [key, rate] of Object.entries(MODEL_INPUT_RATES)) {\n\t\tif (model.startsWith(key)) return rate;\n\t}\n\treturn undefined;\n}\n\n// ─── Cache Savings Computation ──────────────────────────────────────────────\n\nexport interface CacheSavings {\n\treadonly cacheReadSaved: number;\n\treadonly cacheWriteCost: number;\n\treadonly netSaved: number;\n}\n\n/**\n * Compute dollar savings from provider prompt cache read/write token counts.\n *\n * @param totalCacheRead — total cache-read tokens over the lifetime.\n * @param totalCacheWrite — total cache-write tokens over the lifetime.\n * @param inputRate — the model's input-token rate in USD (e.g. 3e-6 for Sonnet).\n * @returns `{ cacheReadSaved, cacheWriteCost, netSaved }` — or all zeros when\n *   `inputRate` is zero or negative.\n */\nexport function computeCacheSavings(\n\ttotalCacheRead: number,\n\ttotalCacheWrite: number,\n\tinputRate: number,\n): CacheSavings {\n\tif (inputRate <= 0) {\n\t\treturn { cacheReadSaved: 0, cacheWriteCost: 0, netSaved: 0 };\n\t}\n\tconst cacheReadSaved = totalCacheRead * inputRate * CACHE_READ_MULTIPLIER;\n\tconst cacheWriteCost = totalCacheWrite * inputRate * CACHE_WRITE_MULTIPLIER;\n\treturn {\n\t\tcacheReadSaved,\n\t\tcacheWriteCost,\n\t\tnetSaved: cacheReadSaved - cacheWriteCost,\n\t};\n}\n"],"names":["MODEL_INPUT_RATES","lookupModelInputRate","model","key","rate","computeCacheSavings","totalCacheRead","totalCacheWrite","inputRate","cacheReadSaved","cacheWriteCost"],"mappings":"AA0BO,MAAMA,EAA4C,CACxD,kBAAmB,KACnB,oBAAqB,KACrB,gBAAiB,MACjB,iBAAkB,MAClB,mBAAoB,KACpB,SAAU,MACV,cAAe,MACf,cAAe,KACf,gBAAiB,KACjB,iBAAkB,OAClB,mBAAoB,MACpB,mBAAoB,KACpB,gBAAiB,MACjB,oBAAqB,MACrB,UAAW,KACX,gBAAiB,KACjB,iBAAkB,OAClB,gBAAiB,KACjB,eAAgB,IACjB,EAMO,SAASC,EAAqBC,EAAmC,CAEvE,GAAIF,EAAkBE,CAAK,GAAK,KAAM,OAAOF,EAAkBE,CAAK,EAEpE,SAAW,CAACC,EAAKC,CAAI,IAAK,OAAO,QAAQJ,CAAiB,EACzD,GAAIE,EAAM,WAAWC,CAAG,EAAG,OAAOC,CAGpC,CAmBO,SAASC,EACfC,EACAC,EACAC,EACe,CACf,GAAIA,GAAa,EAChB,MAAO,CAAE,eAAgB,EAAG,eAAgB,EAAG,SAAU,CAAA,EAE1D,MAAMC,EAAiBH,EAAiBE,EAAY,GAC9CE,EAAiBH,EAAkBC,EAAY,IACrD,MAAO,CACN,eAAAC,EACA,eAAAC,EACA,SAAUD,EAAiBC,CAAA,CAE7B"}

package/extensions/dashboard-client/dist/assets/{useSSE-BBYt5UPB.js → useSSE-Bf5LOLSi.js}

@@ -1,2 +1,2 @@
-import{r as e}from"./index-BX0bcgLu.js";function R(i={}){const{maxEvents:c=500,maxReconnects:l=5}=i,[f,v]=e.useState([]),[E,n]=e.useState("connecting"),[S,p]=e.useState(0),[m,d]=e.useState(null),o=e.useRef(0),s=e.useRef(null),r=e.useCallback(()=>{s.current&&s.current.close(),n("connecting");const t=new EventSource("/api/events");s.current=t,t.onopen=()=>{n("connected"),o.current=0},t.onmessage=g=>{try{const x=JSON.parse(g.data);v(u=>{const a=[...u,x];return a.length>c?a.slice(-c):a}),p(u=>u+1),d(Date.now())}catch{}},t.onerror=()=>{t.close(),o.current<l?(o.current+=1,n("connecting"),setTimeout(r,1e3)):n("disconnected")}},[c,l]);return e.useEffect(()=>(r(),()=>{s.current?.close()}),[r]),{events:f,status:E,eventCount:S,lastEventAt:m}}export{R as u};
-//# sourceMappingURL=useSSE-BBYt5UPB.js.map
+import{r as e}from"./index-DrktNOoT.js";function R(i={}){const{maxEvents:c=500,maxReconnects:l=5}=i,[f,v]=e.useState([]),[E,n]=e.useState("connecting"),[S,p]=e.useState(0),[m,d]=e.useState(null),o=e.useRef(0),s=e.useRef(null),r=e.useCallback(()=>{s.current&&s.current.close(),n("connecting");const t=new EventSource("/api/events");s.current=t,t.onopen=()=>{n("connected"),o.current=0},t.onmessage=g=>{try{const x=JSON.parse(g.data);v(u=>{const a=[...u,x];return a.length>c?a.slice(-c):a}),p(u=>u+1),d(Date.now())}catch{}},t.onerror=()=>{t.close(),o.current<l?(o.current+=1,n("connecting"),setTimeout(r,1e3)):n("disconnected")}},[c,l]);return e.useEffect(()=>(r(),()=>{s.current?.close()}),[r]),{events:f,status:E,eventCount:S,lastEventAt:m}}export{R as u};
+//# sourceMappingURL=useSSE-Bf5LOLSi.js.map

package/extensions/dashboard-client/dist/assets/{useSSE-BBYt5UPB.js.map → useSSE-Bf5LOLSi.js.map}

@@ -1 +1 @@
-{"version":3,"file":"useSSE-BBYt5UPB.js","sources":["../../src/hooks/useSSE.ts"],"sourcesContent":["/**\n * dashboard-client/src/hooks/useSSE.ts — Server-Sent Events hook.\n *\n * Connects to /api/events, provides real-time event stream.\n * SPRINT-B1: basic connection. SPRINT-D1: reconnect with backoff.\n */\n\nimport { useState, useEffect, useRef, useCallback } from 'react';\nimport type { SseEvent } from '../../../dashboard-server/api-contracts';\n\nexport type SseStatus = 'connecting' | 'connected' | 'disconnected' | 'error';\n\nexport interface UseSSEResult {\n  events: SseEvent[];\n  status: SseStatus;\n  eventCount: number;\n  lastEventAt: number | null;\n}\n\nexport interface UseSSEOptions {\n  /** Max events to keep in memory (ring buffer). */\n  maxEvents?: number;\n  /** Max reconnect attempts before giving up. */\n  maxReconnects?: number;\n}\n\n// SPRINT-D1-REMAINING: exponential backoff (1s → 2s → 4s → max 30s).\n// SPRINT-D1-REMAINING: after 5 failures, set status='disconnected'.\n\nexport function useSSE(options: UseSSEOptions = {}): UseSSEResult {\n  const { maxEvents = 500, maxReconnects = 5 } = options;\n  const [events, setEvents] = useState<SseEvent[]>([]);\n  const [status, setStatus] = useState<SseStatus>('connecting');\n  const [eventCount, setEventCount] = useState(0);\n  const [lastEventAt, setLastEventAt] = useState<number | null>(null);\n  const reconnectCount = useRef(0);\n  const sourceRef = useRef<EventSource | null>(null);\n\n  const connect = useCallback(() => {\n    if (sourceRef.current) {\n      sourceRef.current.close();\n    }\n    setStatus('connecting');\n    const source = new EventSource('/api/events');\n    sourceRef.current = source;\n\n    source.onopen = () => {\n      setStatus('connected');\n      reconnectCount.current = 0;\n    };\n\n    source.onmessage = (event) => {\n      try {\n        const parsed = JSON.parse(event.data) as SseEvent;\n        setEvents(prev => {\n          const next = [...prev, parsed];\n          return next.length > maxEvents ? next.slice(-maxEvents) : next;\n        });\n        setEventCount(c => c + 1);\n        setLastEventAt(Date.now());\n      } catch {\n        // non-fatal: skip malformed events\n      }\n    };\n\n    source.onerror = () => {\n      source.close();\n      if (reconnectCount.current < maxReconnects) {\n        reconnectCount.current += 1;\n        setStatus('connecting');\n        // SPRINT-D1: use exponential backoff instead of fixed delay\n        setTimeout(connect, 1000);\n      } else {\n        setStatus('disconnected');\n      }\n    };\n  }, [maxEvents, maxReconnects]);\n\n  useEffect(() => {\n    connect();\n    return () => {\n      sourceRef.current?.close();\n    };\n  }, [connect]);\n\n  return { events, status, eventCount, lastEventAt };\n}\n"],"names":["useSSE","options","maxEvents","maxReconnects","events","setEvents","useState","status","setStatus","eventCount","setEventCount","lastEventAt","setLastEventAt","reconnectCount","useRef","sourceRef","connect","useCallback","source","event","parsed","prev","next","c","useEffect"],"mappings":"wCA6BO,SAASA,EAAOC,EAAyB,GAAkB,CAChE,KAAM,CAAE,UAAAC,EAAY,IAAK,cAAAC,EAAgB,GAAMF,EACzC,CAACG,EAAQC,CAAS,EAAIC,EAAAA,SAAqB,CAAA,CAAE,EAC7C,CAACC,EAAQC,CAAS,EAAIF,EAAAA,SAAoB,YAAY,EACtD,CAACG,EAAYC,CAAa,EAAIJ,EAAAA,SAAS,CAAC,EACxC,CAACK,EAAaC,CAAc,EAAIN,EAAAA,SAAwB,IAAI,EAC5DO,EAAiBC,EAAAA,OAAO,CAAC,EACzBC,EAAYD,EAAAA,OAA2B,IAAI,EAE3CE,EAAUC,EAAAA,YAAY,IAAM,CAC5BF,EAAU,SACZA,EAAU,QAAQ,MAAA,EAEpBP,EAAU,YAAY,EACtB,MAAMU,EAAS,IAAI,YAAY,aAAa,EAC5CH,EAAU,QAAUG,EAEpBA,EAAO,OAAS,IAAM,CACpBV,EAAU,WAAW,EACrBK,EAAe,QAAU,CAC3B,EAEAK,EAAO,UAAaC,GAAU,CAC5B,GAAI,CACF,MAAMC,EAAS,KAAK,MAAMD,EAAM,IAAI,EACpCd,EAAUgB,GAAQ,CAChB,MAAMC,EAAO,CAAC,GAAGD,EAAMD,CAAM,EAC7B,OAAOE,EAAK,OAASpB,EAAYoB,EAAK,MAAM,CAACpB,CAAS,EAAIoB,CAC5D,CAAC,EACDZ,EAAca,GAAKA,EAAI,CAAC,EACxBX,EAAe,KAAK,KAAK,CAC3B,MAAQ,CAER,CACF,EAEAM,EAAO,QAAU,IAAM,CACrBA,EAAO,MAAA,EACHL,EAAe,QAAUV,GAC3BU,EAAe,SAAW,EAC1BL,EAAU,YAAY,EAEtB,WAAWQ,EAAS,GAAI,GAExBR,EAAU,cAAc,CAE5B,CACF,EAAG,CAACN,EAAWC,CAAa,CAAC,EAE7BqB,OAAAA,EAAAA,UAAU,KACRR,EAAA,EACO,IAAM,CACXD,EAAU,SAAS,MAAA,CACrB,GACC,CAACC,CAAO,CAAC,EAEL,CAAE,OAAAZ,EAAQ,OAAAG,EAAQ,WAAAE,EAAY,YAAAE,CAAA,CACvC"}
+{"version":3,"file":"useSSE-Bf5LOLSi.js","sources":["../../src/hooks/useSSE.ts"],"sourcesContent":["/**\n * dashboard-client/src/hooks/useSSE.ts — Server-Sent Events hook.\n *\n * Connects to /api/events, provides real-time event stream.\n * SPRINT-B1: basic connection. SPRINT-D1: reconnect with backoff.\n */\n\nimport { useState, useEffect, useRef, useCallback } from 'react';\nimport type { SseEvent } from '../../../dashboard-server/api-contracts';\n\nexport type SseStatus = 'connecting' | 'connected' | 'disconnected' | 'error';\n\nexport interface UseSSEResult {\n  events: SseEvent[];\n  status: SseStatus;\n  eventCount: number;\n  lastEventAt: number | null;\n}\n\nexport interface UseSSEOptions {\n  /** Max events to keep in memory (ring buffer). */\n  maxEvents?: number;\n  /** Max reconnect attempts before giving up. */\n  maxReconnects?: number;\n}\n\n// SPRINT-D1-REMAINING: exponential backoff (1s → 2s → 4s → max 30s).\n// SPRINT-D1-REMAINING: after 5 failures, set status='disconnected'.\n\nexport function useSSE(options: UseSSEOptions = {}): UseSSEResult {\n  const { maxEvents = 500, maxReconnects = 5 } = options;\n  const [events, setEvents] = useState<SseEvent[]>([]);\n  const [status, setStatus] = useState<SseStatus>('connecting');\n  const [eventCount, setEventCount] = useState(0);\n  const [lastEventAt, setLastEventAt] = useState<number | null>(null);\n  const reconnectCount = useRef(0);\n  const sourceRef = useRef<EventSource | null>(null);\n\n  const connect = useCallback(() => {\n    if (sourceRef.current) {\n      sourceRef.current.close();\n    }\n    setStatus('connecting');\n    const source = new EventSource('/api/events');\n    sourceRef.current = source;\n\n    source.onopen = () => {\n      setStatus('connected');\n      reconnectCount.current = 0;\n    };\n\n    source.onmessage = (event) => {\n      try {\n        const parsed = JSON.parse(event.data) as SseEvent;\n        setEvents(prev => {\n          const next = [...prev, parsed];\n          return next.length > maxEvents ? next.slice(-maxEvents) : next;\n        });\n        setEventCount(c => c + 1);\n        setLastEventAt(Date.now());\n      } catch {\n        // non-fatal: skip malformed events\n      }\n    };\n\n    source.onerror = () => {\n      source.close();\n      if (reconnectCount.current < maxReconnects) {\n        reconnectCount.current += 1;\n        setStatus('connecting');\n        // SPRINT-D1: use exponential backoff instead of fixed delay\n        setTimeout(connect, 1000);\n      } else {\n        setStatus('disconnected');\n      }\n    };\n  }, [maxEvents, maxReconnects]);\n\n  useEffect(() => {\n    connect();\n    return () => {\n      sourceRef.current?.close();\n    };\n  }, [connect]);\n\n  return { events, status, eventCount, lastEventAt };\n}\n"],"names":["useSSE","options","maxEvents","maxReconnects","events","setEvents","useState","status","setStatus","eventCount","setEventCount","lastEventAt","setLastEventAt","reconnectCount","useRef","sourceRef","connect","useCallback","source","event","parsed","prev","next","c","useEffect"],"mappings":"wCA6BO,SAASA,EAAOC,EAAyB,GAAkB,CAChE,KAAM,CAAE,UAAAC,EAAY,IAAK,cAAAC,EAAgB,GAAMF,EACzC,CAACG,EAAQC,CAAS,EAAIC,EAAAA,SAAqB,CAAA,CAAE,EAC7C,CAACC,EAAQC,CAAS,EAAIF,EAAAA,SAAoB,YAAY,EACtD,CAACG,EAAYC,CAAa,EAAIJ,EAAAA,SAAS,CAAC,EACxC,CAACK,EAAaC,CAAc,EAAIN,EAAAA,SAAwB,IAAI,EAC5DO,EAAiBC,EAAAA,OAAO,CAAC,EACzBC,EAAYD,EAAAA,OAA2B,IAAI,EAE3CE,EAAUC,EAAAA,YAAY,IAAM,CAC5BF,EAAU,SACZA,EAAU,QAAQ,MAAA,EAEpBP,EAAU,YAAY,EACtB,MAAMU,EAAS,IAAI,YAAY,aAAa,EAC5CH,EAAU,QAAUG,EAEpBA,EAAO,OAAS,IAAM,CACpBV,EAAU,WAAW,EACrBK,EAAe,QAAU,CAC3B,EAEAK,EAAO,UAAaC,GAAU,CAC5B,GAAI,CACF,MAAMC,EAAS,KAAK,MAAMD,EAAM,IAAI,EACpCd,EAAUgB,GAAQ,CAChB,MAAMC,EAAO,CAAC,GAAGD,EAAMD,CAAM,EAC7B,OAAOE,EAAK,OAASpB,EAAYoB,EAAK,MAAM,CAACpB,CAAS,EAAIoB,CAC5D,CAAC,EACDZ,EAAca,GAAKA,EAAI,CAAC,EACxBX,EAAe,KAAK,KAAK,CAC3B,MAAQ,CAER,CACF,EAEAM,EAAO,QAAU,IAAM,CACrBA,EAAO,MAAA,EACHL,EAAe,QAAUV,GAC3BU,EAAe,SAAW,EAC1BL,EAAU,YAAY,EAEtB,WAAWQ,EAAS,GAAI,GAExBR,EAAU,cAAc,CAE5B,CACF,EAAG,CAACN,EAAWC,CAAa,CAAC,EAE7BqB,OAAAA,EAAAA,UAAU,KACRR,EAAA,EACO,IAAM,CACXD,EAAU,SAAS,MAAA,CACrB,GACC,CAACC,CAAO,CAAC,EAEL,CAAE,OAAAZ,EAAQ,OAAAG,EAAQ,WAAAE,EAAY,YAAAE,CAAA,CACvC"}

package/extensions/dashboard-client/dist/index.html

@@ -4,8 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>mega-compact dashboard</title>
-    <script type="module" crossorigin src="./assets/index-BX0bcgLu.js"></script>
-    <link rel="stylesheet" crossorigin href="./assets/index-BEdKlpAB.css">
+    <script type="module" crossorigin src="./assets/index-DrktNOoT.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-CUNn22iV.css">
   </head>
   <body>
     <div id="root"></div>

package/extensions/dashboard-client/src/App.tsx

@@ -18,6 +18,7 @@ const OverviewTab = React.lazy(() => import("./tabs/OverviewTab"));
 const ReposTab = React.lazy(() => import("./tabs/ReposTab"));
 const EventsTab = React.lazy(() => import("./tabs/EventsTab"));
 const ConfigTab = React.lazy(() => import("./tabs/ConfigTab"));
+const SetupTab = React.lazy(() => import("./tabs/SetupTab"));
 const MetricsTab = React.lazy(() => import("./tabs/MetricsTab"));
 const CacheTab = React.lazy(() => import("./tabs/CacheTab"));
 const GameTab = React.lazy(() => import("./tabs/GameTab"));
@@ -26,12 +27,14 @@ const SessionsTab = React.lazy(() => import("./tabs/SessionsTab"));
 const TopicsTab = React.lazy(() => import("./tabs/TopicsTab"));
 const TurnsTab = React.lazy(() => import("./tabs/TurnsTab"));
 const MaintenanceTab = React.lazy(() => import("./tabs/MaintenanceTab"));
+const MemoryMapTab = React.lazy(() => import("./tabs/MemoryMapTab"));
 
 export type TabId =
 	| "overview"
 	| "repos"
 	| "events"
 	| "config"
+	| "setup"
 	| "metrics"
 	| "cache"
 	| "game"
@@ -39,23 +42,33 @@ export type TabId =
 	| "sessions"
 	| "topics"
 	| "turns"
-	| "maintenance";
+	| "maintenance"
+	| "memory-map";
 
-const TABS: Array<{ id: TabId; label: string }> = [
+type TabDef = { id: TabId; label: string };
+
+const PRIMARY_TABS: TabDef[] = [
 	{ id: "overview", label: "Overview" },
+	{ id: "cache", label: "Cache" },
+	{ id: "sessions", label: "Sessions" },
+	{ id: "turns", label: "Turns" },
+];
+
+const ADVANCED_TABS: TabDef[] = [
 	{ id: "repos", label: "Repos" },
 	{ id: "events", label: "Events" },
 	{ id: "config", label: "Config" },
+	{ id: "setup", label: "Setup" },
 	{ id: "metrics", label: "Metrics" },
-	{ id: "cache", label: "Cache" },
 	{ id: "game", label: "Game" },
 	{ id: "achievements", label: "Achievements" },
-	{ id: "sessions", label: "Sessions" },
 	{ id: "topics", label: "Topics" },
-	{ id: "turns", label: "Turns" },
 	{ id: "maintenance", label: "Maintenance" },
+	{ id: "memory-map", label: "Memory Map" },
 ];
 
+const advancedTabIds = new Set<TabId>(ADVANCED_TABS.map((t) => t.id));
+
 export default function App(): React.ReactElement {
 	const [activeTab, setActiveTab] = useState<TabId>("overview");
 	const {
@@ -83,7 +96,13 @@ export default function App(): React.ReactElement {
 						{version && <span className="version-pill">{version}</span>}
 					</h1>
 				</header>
-				<TabBar tabs={TABS} active={activeTab} onTabChange={setActiveTab} />
+				<TabBar
+					primaryTabs={PRIMARY_TABS}
+					advancedTabs={ADVANCED_TABS}
+					advancedTabIds={advancedTabIds}
+					active={activeTab}
+					onTabChange={setActiveTab}
+				/>
 				<main className="dashboard-content">
 					<React.Suspense fallback={<LoadingSpinner />}>
 						{activeTab === "overview" && (
@@ -96,14 +115,15 @@ export default function App(): React.ReactElement {
 						{activeTab === "repos" && <ReposTab />}
 						{activeTab === "events" && <EventsTab />}
 						{activeTab === "config" && <ConfigTab />}
+						{activeTab === "setup" && <SetupTab />}
 						{activeTab === "metrics" && <MetricsTab />}
 						{activeTab === "cache" && <CacheTab />}
 						{activeTab === "game" && <GameTab />}
 						{activeTab === "achievements" && <AchievementsTab />}
 						{activeTab === "sessions" && <SessionsTab />}
 						{activeTab === "topics" && <TopicsTab />}
-						{activeTab === "turns" && <TurnsTab />}
-					{activeTab === "maintenance" && <MaintenanceTab />}
+						{activeTab === "maintenance" && <MaintenanceTab />}
+						{activeTab === "memory-map" && <MemoryMapTab />}
 					</React.Suspense>
 				</main>
 			</div>

package/extensions/dashboard-client/src/api/client.ts

@@ -40,6 +40,11 @@ import type {
 	MaintenanceAction,
 	MaintenanceActionResult,
 	ProviderCacheResponse,
+	CacheStripesResponse,
+	SetupStatusResponse,
+	SetupDetectResponse,
+	SetupConfigureRequest,
+	SetupConfigureResponse,
 } from "@contracts";
 
 /** Error thrown when a dashboard API response is not 2xx. */
@@ -196,6 +201,11 @@ export function fetchProviderCache(): Promise<ProviderCacheResponse> {
 	return getJson<ProviderCacheResponse>(ENDPOINTS.providerCache.path);
 }
 
+/** Cache stripe distribution + health score (A3). */
+export function fetchCacheStripes(): Promise<CacheStripesResponse> {
+	return getJson<CacheStripesResponse>(ENDPOINTS.cacheStripes.path);
+}
+
 // ── S52: turn-by-turn memory tracking + recall + rewind ───────────────
 
 export function fetchTurns(): Promise<TurnsResponse> {
@@ -273,3 +283,22 @@ export function postMaintenanceAction(
 		action,
 	);
 }
+
+// ─── Setup wizard (P0b) ────────────────────────────────────────────────────
+
+/** GET /api/setup-status — current embedder configuration. */
+export function fetchSetupStatus(): Promise<SetupStatusResponse> {
+	return getJson<SetupStatusResponse>(ENDPOINTS.setupStatus.path);
+}
+
+/** GET /api/setup-detect — detect available local embedder backends. */
+export function fetchSetupDetect(): Promise<SetupDetectResponse> {
+	return getJson<SetupDetectResponse>(ENDPOINTS.setupDetect.path);
+}
+
+/** POST /api/setup-configure — write embedder config to .mega-compact.env. */
+export function configureEmbedder(
+	body: SetupConfigureRequest,
+): Promise<SetupConfigureResponse> {
+	return postJson<SetupConfigureResponse>(ENDPOINTS.setupConfigure.path, body);
+}

package/extensions/dashboard-client/src/components/ActiveReposTable.tsx

@@ -1,13 +1,15 @@
 /**
  * dashboard-client/src/components/ActiveReposTable.tsx — Active repos table.
  *
- * 9 columns: Repo, Model, Tier, Context %, State, Compactions s/t,
- * Cache Hits s/t, Compact s/t, CacheHit s/t.
+ * Columns: Repo, Model, Tier, Context %, State, Compactions s/t,
+ * Cache Hits s/t, Cache Hit %, Cache Read, Cache Write, Est. Saved,
+ * Compact s/t (s), CacheHit s/t (s).
  * Data from fetchServers() via useApi with 10s polling.
  */
 
 import type React from "react";
 import type { ServerEntry } from "@contracts";
+import { fmtTokens } from "@/utils/format.ts";
 
 export interface ActiveReposTableProps {
 	servers: ServerEntry[];
@@ -32,6 +34,8 @@ const HEADERS = [
 	"Cache Hits (s/t)",
 	"Cache Hit %",
 	"Est. Saved",
+	"Cache Read",
+	"Cache Write",
 	"Compact s/t (s)",
 	"CacheHit s/t (s)",
 ] as const;
@@ -42,19 +46,16 @@ export function ActiveReposTable({
 	return (
 		<div className="active-repos-section">
 			<p className="legend-note">
-				Repos seen within the last 30 minutes, with their per-repo
-				cache-hit, compaction, and time-saved (est.) totals pulled live
-				from each repo&apos;s dashboard.json.
+				Repos seen within the last 30 minutes, with their per-repo cache-hit,
+				compaction, and time-saved (est.) totals pulled live from each
+				repo&apos;s dashboard.json.
 			</p>
 			<div className="table-scroll">
 				<table className="active-repos-table">
 					<thead>
 						<tr>
 							{HEADERS.map((h, i) => (
-								<th
-									key={h}
-									className={i >= 3 && i !== 4 ? "num" : undefined}
-								>
+								<th key={h} className={i >= 3 && i !== 4 ? "num" : undefined}>
 									{h}
 								</th>
 							))}
@@ -82,9 +83,7 @@ export function ActiveReposTable({
 							};
 							return (
 								<tr key={r.repoRoot}>
-									<td title={r.repoRoot}>
-										{r.displayName || r.repoRoot}
-									</td>
+									<td title={r.repoRoot}>{r.displayName || r.repoRoot}</td>
 									<td>{r.model ?? "\u2014"}</td>
 									<td>{r.tier ?? "\u2014"}</td>
 									<td className="num">
@@ -109,6 +108,16 @@ export function ActiveReposTable({
 											? `$${r.providerCache.estimatedSaved.toFixed(2)}`
 											: "—"}
 									</td>
+									<td className="num">
+										{r.providerCache?.cacheRead != null
+											? fmtTokens(r.providerCache.cacheRead)
+											: "—"}
+									</td>
+									<td className="num">
+										{r.providerCache?.cacheWrite != null
+											? fmtTokens(r.providerCache.cacheWrite)
+											: "—"}
+									</td>
 									<td className="num">
 										{fmtSec(ts.compact.sessionSec)} /{" "}
 										{fmtSec(ts.compact.totalSec)}

package/extensions/dashboard-client/src/components/CacheHitRateTrendCard.tsx

@@ -0,0 +1,100 @@
+/**
+ * dashboard-client/src/components/CacheHitRateTrendCard.tsx -- Cache hit-rate
+ * time-series trend chart (A3, PLAN_V2 Phase 4).
+ *
+ * Renders a sparkline view of cache hit rate from the /api/perf endpoint using
+ * real cache_hit_pct samples with timestamps. Each bar represents one sample.
+ * Shows the latest, average, and sample count.
+ *
+ * Uses .ov-sparkline / .ov-sparkline-bar CSS classes from cache.css.
+ * No external charting dependencies.
+ */
+
+import type React from "react";
+import type { PerfResponse, CacheHitSample } from "@contracts";
+
+export interface CacheHitRateTrendCardProps {
+	perf: PerfResponse;
+}
+
+function fmtPct(n: number): string {
+	return `${n.toFixed(1)}%`;
+}
+
+/**
+ * Map a percentage (0–100) to a CSS color class:
+ *   >= 80: green   (healthy)
+ *   >= 60: teal    (fair)
+ *   >= 40: yellow  (degraded)
+ *   >= 20: orange  (poor)
+ *   <  20: red     (critical)
+ */
+function pctColorClass(pct: number): string {
+	if (pct >= 80) return "ov-bar-green";
+	if (pct >= 60) return "ov-bar-teal";
+	if (pct >= 40) return "ov-bar-yellow";
+	if (pct >= 20) return "ov-bar-orange";
+	return "ov-bar-red";
+}
+
+export const CacheHitRateTrendCard: React.FC<CacheHitRateTrendCardProps> = ({
+	perf,
+}) => {
+	const { cache_hit_pct: c } = perf;
+	const samples: CacheHitSample[] =
+		c.samples && c.samples.length > 0 ? c.samples : [];
+
+	return (
+		<div className="ov-card cache-trend-card">
+			<h3 className="ov-card-title">Cache Hit-Rate Trend</h3>
+
+			{/* Metric summary */}
+			<div className="ov-perf-summary">
+				<div className="ov-perf-stat">
+					Avg: <strong>{fmtPct(c.avg)}</strong>
+				</div>
+				<div className="ov-perf-stat">
+					Latest: <strong>{fmtPct(c.latest)}</strong>
+				</div>
+				<div className="ov-perf-stat">
+					Samples: <strong>{c.n}</strong>
+				</div>
+			</div>
+
+			{/* Sparkline bars from real samples */}
+			{samples.length > 0 ? (
+				<>
+					<div
+						className="ov-sparkline"
+						role="img"
+						aria-label={`Cache hit rate trend: ${c.n} samples, average ${fmtPct(c.avg)}, latest ${fmtPct(c.latest)}`}
+					>
+						{samples.map((s, i) => {
+							const barH = Math.max(2, Math.round(s.pct * 0.6));
+							const colorClass = pctColorClass(s.pct);
+							const isLatest = i === samples.length - 1;
+							return (
+								<div
+									key={i}
+									className={`ov-sparkline-bar ${colorClass}${isLatest ? " ov-bar-latest" : ""}`}
+									style={{ height: `${barH}px` }}
+									title={`${fmtPct(s.pct)} at ${new Date(s.ts).toLocaleTimeString()}`}
+								/>
+							);
+						})}
+					</div>
+					<div className="ov-card-footer">
+						{samples.length} sample{samples.length !== 1 ? "s" : ""} over{" "}
+						{samples.length > 1
+							? `${Math.round(
+									(samples[samples.length - 1].ts - samples[0].ts) / 1000,
+								)}s`
+							: "latest turn"}
+					</div>
+				</>
+			) : (
+				<div className="ov-empty-state">No cache-hit samples yet</div>
+			)}
+		</div>
+	);
+};

package/extensions/dashboard-client/src/components/ProviderCacheCard.tsx

@@ -16,6 +16,19 @@ import {
 	fmtDate,
 	fmtRelativeTime,
 } from "../utils/format";
+import { lookupModelInputRate } from "@pricing";
+
+// ---------------------------------------------------------------------------
+// Per-model breakdown type (mirrors the API contract).
+// ---------------------------------------------------------------------------
+
+export interface ByModelEntry {
+	model: string;
+	hitPct: number;
+	totalCacheRead: number;
+	totalCacheWrite: number;
+	sampleCount: number;
+}
 
 // ---------------------------------------------------------------------------
 // Flattened props — destructured from ProviderCacheResponse in CacheTab.
@@ -44,6 +57,8 @@ export interface ProviderCacheCardProps {
 	firstTurnAt: string | null;
 	/** ISO timestamp of latest recorded turn. */
 	latestTurnAt: string | null;
+	/** Per-model breakdown (F4). */
+	byModel: ByModelEntry[];
 }
 
 // ---------------------------------------------------------------------------
@@ -136,6 +151,47 @@ export function ProviderCacheCard(
 				label="Last Updated"
 				value={fmtRelativeTime(props.latestTurnAt)}
 			/>
+
+			{/* --- Per-model breakdown (F4) --- */}
+			{props.byModel.length > 0 && (
+				<>
+					<div className="ov-stat-section-label">Per Model</div>
+					{props.byModel.map((m) => {
+						const rate = lookupModelInputRate(m.model);
+						const cr =
+							rate != null ? (m.totalCacheRead / 1_000_000) * rate : null;
+						const cw =
+							rate != null ? (m.totalCacheWrite / 1_000_000) * rate : null;
+						return (
+							<div key={m.model} className="ov-stat-group">
+								<StatRow label="Model" value={m.model} />
+								<StatRow
+									label="Hit Rate"
+									value={`${m.hitPct.toFixed(1)}%`}
+									className={hitPctClass(m.hitPct)}
+								/>
+								<StatRow
+									label="Cache Read"
+									value={fmtTokens(m.totalCacheRead)}
+								/>
+								<StatRow
+									label="Cache Write"
+									value={fmtTokens(m.totalCacheWrite)}
+								/>
+								<StatRow label="Samples" value={String(m.sampleCount)} />
+								<StatRow
+									label="$ Saved (reads)"
+									value={cr != null ? fmtDollars(cr) : "\u2014"}
+								/>
+								<StatRow
+									label="Write Investment"
+									value={cw != null ? fmtDollars(cw) : "\u2014"}
+								/>
+							</div>
+						);
+					})}
+				</>
+			)}
 		</div>
 	);
 }

package/extensions/dashboard-client/src/components/SavingsByModelTable.tsx

@@ -9,6 +9,7 @@
 import type React from "react";
 import { useMemo } from "react";
 import type { IndexesIndexRow } from "@contracts";
+import { computeCacheSavings } from "@pricing";
 
 export interface SavingsByModelTableProps {
 	repos: IndexesIndexRow[];
@@ -120,9 +121,9 @@ export function SavingsByModelTable({
 	return (
 		<div className="savings-by-model">
 			<p className="legend-note">
-				How much context &amp; cost mega-compact has reclaimed, grouped by
-				the model you were running. Compression ratio reflects
-				workload/content, not model quality.
+				How much context &amp; cost mega-compact has reclaimed, grouped by the
+				model you were running. Compression ratio reflects workload/content, not
+				model quality.
 			</p>
 			<div className="table-scroll">
 				<table className="savings-table">
@@ -157,10 +158,16 @@ export function SavingsByModelTable({
 								Out $/tok
 							</th>
 							<th className="num">$ Saved</th>
-							<th className="num" title="Provider prompt-cache hit rate (reads / reads+writes+tokens_in)">
+							<th
+								className="num"
+								title="Provider prompt-cache hit rate (reads / reads+writes+tokens_in)"
+							>
 								Cache Hit %
 							</th>
-							<th className="num" title="Estimated provider prompt-cache savings (read tokens * 0.9 * inputRate − write tokens * 0.25 * inputRate)">
+							<th
+								className="num"
+								title="Estimated provider prompt-cache savings (read tokens * 0.9 * inputRate − write tokens * 0.25 * inputRate)"
+							>
 								Cache $ Saved
 							</th>
 							<th className="num">Last Used</th>
@@ -176,67 +183,41 @@ export function SavingsByModelTable({
 						)}
 						{groups.map((g) => {
 							const freed = (g.tokensIn || 0) - (g.tokensOut || 0);
-							const usd =
-								g.usd > 0 ? `$${g.usd.toFixed(4)}` : "\u2014";
+							const usd = g.usd > 0 ? `$${g.usd.toFixed(4)}` : "\u2014";
 							const when = g.lastAt
 								? new Date(g.lastAt).toLocaleString()
 								: "\u2014";
 							const reas =
-								g.reasoning == null
-									? "\u2014"
-									: g.reasoning
-										? "yes"
-										: "no";
+								g.reasoning == null ? "\u2014" : g.reasoning ? "yes" : "no";
 							return (
 								<tr key={g.model}>
 									<td className="repo-model">{g.model}</td>
 									<td>{g.provider}</td>
-									<td className="num">
-										{g.tokensIn.toLocaleString()}
-									</td>
-									<td className="num">
-										{g.tokensOut.toLocaleString()}
-									</td>
-									<td className="num">
-										{freed.toLocaleString()}
-									</td>
-									<td className="num">
-										{collapseNum(g.ctxWindows)}
-									</td>
-									<td className="num">
-										{collapseNum(g.maxTokens)}
-									</td>
+									<td className="num">{g.tokensIn.toLocaleString()}</td>
+									<td className="num">{g.tokensOut.toLocaleString()}</td>
+									<td className="num">{freed.toLocaleString()}</td>
+									<td className="num">{collapseNum(g.ctxWindows)}</td>
+									<td className="num">{collapseNum(g.maxTokens)}</td>
 									<td className="num">{reas}</td>
+									<td className="num">{g.sessions.toLocaleString()}</td>
+									<td className="num">{g.checkpoints.toLocaleString()}</td>
+									<td className="num">{collapseRate(g.inRates)}</td>
+									<td className="num">{collapseRate(g.outRates)}</td>
+									<td className="num">{usd}</td>
 									<td className="num">
-										{g.sessions.toLocaleString()}
-									</td>
-									<td className="num">
-										{g.checkpoints.toLocaleString()}
+										{g.cacheRead > 0
+											? `${(
+													(g.cacheRead * 100) /
+														(g.cacheRead + g.cacheWrite + g.tokensIn || 1)
+												).toFixed(1)}%`
+											: "—"}
 									</td>
 									<td className="num">
-										{collapseRate(g.inRates)}
+										{g.cacheRead > 0
+											? `$${computeCacheSavings(g.cacheRead, g.cacheWrite, g.inRates[0] || 0).netSaved.toFixed(4)}`
+											: "—"}
 									</td>
-									<td className="num">
-										{collapseRate(g.outRates)}
-									</td>
-								<td className="num">{usd}</td>
-								<td className="num">
-									{g.cacheRead > 0
-										? `${(
-												(g.cacheRead * 100) /
-												(g.cacheRead + g.cacheWrite + g.tokensIn || 1)
-											).toFixed(1)}%`
-										: "—"}
-								</td>
-								<td className="num">
-									{g.cacheRead > 0
-										? `$${(
-												g.cacheRead * 0.9 * (g.inRates[0] || 0) -
-												g.cacheWrite * 0.25 * (g.inRates[0] || 0)
-											).toFixed(4)}`
-										: "—"}
-								</td>
-								<td className="num">{when}</td>
+									<td className="num">{when}</td>
 								</tr>
 							);
 						})}
@@ -244,10 +225,10 @@ export function SavingsByModelTable({
 				</table>
 			</div>
 			<p className="legend-note">
-				Tokens In = Σ original region tokens dropped by compaction. Tokens
-				Out = Σ compacted summary tokens still retained in context. Freed =
-				Tokens In − Tokens Out (net context reclaimed). Ctx Window / Max Out
-				/ Reas. come from the latest captured model snapshot for each repo.
+				Tokens In = Σ original region tokens dropped by compaction. Tokens Out =
+				Σ compacted summary tokens still retained in context. Freed = Tokens In
+				− Tokens Out (net context reclaimed). Ctx Window / Max Out / Reas. come
+				from the latest captured model snapshot for each repo.
 			</p>
 		</div>
 	);