pi-mega-compact 0.11.7 → 0.11.9

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

@@ -1,2 +1,2 @@
-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
+import{r as e}from"./index-h3jgEs6G.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-C5lmipBF.js.map

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"useSSE-C5lmipBF.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,7 +4,7 @@
     <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-DrktNOoT.js"></script>
+    <script type="module" crossorigin src="./assets/index-h3jgEs6G.js"></script>
     <link rel="stylesheet" crossorigin href="./assets/index-CUNn22iV.css">
   </head>
   <body>

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

@@ -39,6 +39,7 @@ import type {
 	SchemaHealthResponse,
 	MaintenanceAction,
 	MaintenanceActionResult,
+	DebugBundleResponse,
 	ProviderCacheResponse,
 	CacheStripesResponse,
 	SetupStatusResponse,
@@ -284,6 +285,10 @@ export function postMaintenanceAction(
 	);
 }
 
+export function fetchDebugBundle(): Promise<DebugBundleResponse> {
+	return postJson<DebugBundleResponse>("/api/maintenance/gather-debug", {});
+}
+
 // ─── Setup wizard (P0b) ────────────────────────────────────────────────────
 
 /** GET /api/setup-status — current embedder configuration. */

package/extensions/dashboard-client/src/memory-map-layout.ts

@@ -0,0 +1,161 @@
+/**
+ * memory-map-layout.ts — Force-directed layout engine for MemoryMapTab (D3).
+ *
+ * Uses Coulomb repulsion + Hooke attraction + center gravity to arrange nodes.
+ * No external graph library. Mutates layout in place.
+ * Self-contained types: only needs id + edges from graph data.
+ */
+
+// ---------------------------------------------------------------------------
+// Types (self-contained — mirrors the subset used by the layout engine)
+// ---------------------------------------------------------------------------
+
+interface GraphNodeMin {
+  readonly id: string;
+  readonly nodeType: string;
+  readonly label: string;
+  readonly summaryTruncated: string;
+  readonly tokenEstimate: number;
+  readonly timestamp: number;
+  readonly dedupStatus: string | undefined;
+  readonly raptorLevel: number;
+  readonly topicSummary: string | undefined;
+  readonly decisionCount: number;
+  readonly textSnippet: string;
+  readonly sessionId: string;
+}
+
+interface GraphEdgeMin {
+  readonly source: string;
+  readonly target: string;
+  readonly weight: number;
+  readonly type: "temporal" | "semantic" | "raptor_parent";
+}
+
+export interface Position {
+  x: number;
+  y: number;
+}
+
+export interface LayoutNode extends GraphNodeMin {
+  pos: Position;
+  vx: number;
+  vy: number;
+  pinned: boolean;
+}
+
+export interface LayoutEdge {
+  source: number;
+  target: number;
+  weight: number;
+  type: GraphEdge["type"];
+}
+
+export interface Layout {
+  nodes: LayoutNode[];
+  edges: LayoutEdge[];
+}
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const REPULSION = 5_000;
+const ATTRACTION = 0.005;
+const CENTER_GRAVITY = 0.01;
+const DAMPING = 0.9;
+const MIN_VELOCITY = 0.1;
+const SPEED_LIMIT = 50;
+
+// ---------------------------------------------------------------------------
+// Build
+// ---------------------------------------------------------------------------
+
+/** Build initial layout from graph data. */
+export function buildLayout(data: { nodes: GraphNodeMin[]; edges: GraphEdgeMin[] }): Layout {
+  const nodes: LayoutNode[] = data.nodes.map((n, i) => {
+    const angle = (2 * Math.PI * i) / Math.max(data.nodes.length, 1);
+    const radius = 200;
+    return {
+      ...n,
+      pos: { x: Math.cos(angle) * radius + 300, y: Math.sin(angle) * radius + 200 },
+      vx: 0,
+      vy: 0,
+      pinned: false,
+    };
+  });
+
+  const nodeIndex = new Map<string, number>();
+  nodes.forEach((n, i) => nodeIndex.set(n.id, i));
+
+  const edges: LayoutEdge[] = data.edges
+    .map((e) => {
+      const si = nodeIndex.get(e.source);
+      const ti = nodeIndex.get(e.target);
+      if (si === undefined || ti === undefined || si === ti) return null;
+      return { source: si, target: ti, weight: e.weight, type: e.type };
+    })
+    .filter((e): e is LayoutEdge => e !== null);
+
+  return { nodes, edges };
+}
+
+// ---------------------------------------------------------------------------
+// Apply forces
+// ---------------------------------------------------------------------------
+
+/** Apply one iteration of the force simulation. Mutates layout in place. */
+export function applyForces(layout: Layout): void {
+  const { nodes, edges } = layout;
+  const n = nodes.length;
+  if (n === 0) return;
+
+  for (let i = 0; i < n; i++) {
+    if (nodes[i].pinned) continue;
+    let fx = 0;
+    let fy = 0;
+
+    // Coulomb repulsion
+    for (let j = 0; j < n; j++) {
+      if (i === j) continue;
+      const dx = nodes[i].pos.x - nodes[j].pos.x;
+      const dy = nodes[i].pos.y - nodes[j].pos.y;
+      const distSq = dx * dx + dy * dy || 1;
+      const force = REPULSION / distSq;
+      const dist = Math.sqrt(distSq);
+      fx += (dx / dist) * force;
+      fy += (dy / dist) * force;
+    }
+
+    // Hooke attraction along edges
+    for (const e of edges) {
+      let other: number;
+      if (e.source === i) other = e.target;
+      else if (e.target === i) other = e.source;
+      else continue;
+      const dx = nodes[other].pos.x - nodes[i].pos.x;
+      const dy = nodes[other].pos.y - nodes[i].pos.y;
+      const dist = Math.sqrt(dx * dx + dy * dy) || 1;
+      fx += dx * ATTRACTION * e.weight;
+      fy += dy * ATTRACTION * e.weight;
+    }
+
+    // Center gravity
+    fx -= nodes[i].pos.x * CENTER_GRAVITY;
+    fy -= nodes[i].pos.y * CENTER_GRAVITY;
+
+    nodes[i].vx = (nodes[i].vx + fx) * DAMPING;
+    nodes[i].vy = (nodes[i].vy + fy) * DAMPING;
+
+    const speed = Math.sqrt(nodes[i].vx * nodes[i].vx + nodes[i].vy * nodes[i].vy);
+    if (speed > SPEED_LIMIT) {
+      nodes[i].vx = (nodes[i].vx / speed) * SPEED_LIMIT;
+      nodes[i].vy = (nodes[i].vy / speed) * SPEED_LIMIT;
+    }
+
+    if (speed > MIN_VELOCITY) {
+      nodes[i].pos.x += nodes[i].vx;
+      nodes[i].pos.y += nodes[i].vy;
+    }
+  }
+}

package/extensions/dashboard-client/src/memory-map-shapes.tsx

@@ -0,0 +1,126 @@
+/**
+ * memory-map-shapes.tsx — Node shape rendering utilities for MemoryMapTab (D3).
+ *
+ * Node shape encodes nodeType: checkpoint = filled circle, turn = hollow circle,
+ * turn-content = hollow+ring, memory = diamond.
+ * Delegate-shell pattern: thin rendering helpers, no state, no side effects.
+ */
+import type React from "react";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export type NodeType = "checkpoint" | "turn" | "turn-content" | "memory";
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+export const NODE_COLORS: Record<NodeType, string> = {
+  checkpoint: "#6366f1",
+  turn: "#58a6ff",
+  "turn-content": "#22c55e",
+  memory: "#f59e0b",
+};
+
+export const NODE_TYPE_LABELS: Record<NodeType, string> = {
+  checkpoint: "Checkpoint",
+  turn: "Turn",
+  "turn-content": "Turn Content",
+  memory: "Memory",
+};
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+/** SVG path for a diamond centered at (0,0) with given half-width/height. */
+function diamondPath(hw: number, hh: number): string {
+  return `M 0,-${hh} L ${hw},0 L 0,${hh} L -${hw},0 Z`;
+}
+
+function nodeOpacity(dedupStatus: string | undefined): number {
+  if (!dedupStatus || dedupStatus === "active") return 1;
+  return 0.5;
+}
+
+// ---------------------------------------------------------------------------
+// Render function
+// ---------------------------------------------------------------------------
+
+/** Render an SVG shape for a node based on its nodeType. */
+export function renderNodeShape(
+  cx: number,
+  cy: number,
+  radius: number,
+  nodeType: NodeType,
+  isSelected: boolean,
+  isFiltered: boolean,
+  dedupStatus: string | undefined,
+): React.ReactElement {
+  const fill = isFiltered ? NODE_COLORS[nodeType] ?? "#6366f1" : "#d1d5db";
+  const strokeColor = isSelected ? "#ef4444" : "none";
+  const opacity = nodeOpacity(dedupStatus);
+
+  switch (nodeType) {
+    case "checkpoint":
+      return (
+        <circle
+          cx={cx}
+          cy={cy}
+          r={isSelected ? radius + 3 : radius}
+          fill={fill}
+          opacity={opacity}
+          stroke={strokeColor}
+          strokeWidth={isSelected ? 2 : 0}
+        />
+      );
+    case "turn":
+      return (
+        <circle
+          cx={cx}
+          cy={cy}
+          r={isSelected ? radius + 3 : radius}
+          fill="none"
+          stroke={fill}
+          strokeWidth={2.5}
+          opacity={opacity}
+        />
+      );
+    case "turn-content":
+      return (
+        <g>
+          <circle
+            cx={cx}
+            cy={cy}
+            r={isSelected ? radius + 3 : radius}
+            fill="none"
+            stroke={fill}
+            strokeWidth={2.5}
+            opacity={opacity}
+          />
+          <circle
+            cx={cx}
+            cy={cy}
+            r={Math.max(3, radius * 0.3)}
+            fill={fill}
+            opacity={opacity}
+          />
+        </g>
+      );
+    case "memory":
+      const hw = radius * 0.85;
+      const hh = radius * 0.85;
+      return (
+        <path
+          d={diamondPath(hw, hh)}
+          transform={`translate(${cx}, ${cy})`}
+          fill={fill}
+          opacity={opacity}
+          stroke={strokeColor}
+          strokeWidth={isSelected ? 2 : 0}
+        />
+      );
+  }
+}

package/extensions/dashboard-client/src/tabs/CacheTab.tsx

@@ -11,8 +11,7 @@
  * 5s polling on provider cache and activity snapshot; 15s on stripes + trend.
  */
 
-import type React from "react";
-import { useCallback } from "react";
+import { useState, useCallback } from "react";
 import type {
 	SnapshotResponse,
 	ProviderCacheResponse,
@@ -33,6 +32,7 @@ import { StripeDistributionCard } from "../components/StripeDistributionCard";
 import { CacheHitRateTrendCard } from "../components/CacheHitRateTrendCard";
 
 export default function CacheTab(): React.ReactElement {
+	const [infoExpanded, setInfoExpanded] = useState(false);
 	/* --- Provider prompt cache (5s poll) --- */
 	const {
 		data: providerCache,
@@ -75,6 +75,33 @@ export default function CacheTab(): React.ReactElement {
 
 	return (
 		<div className="cache-tab">
+			<div className="card-section">
+				<button
+					type="button"
+					className="info-toggle"
+					onClick={() => setInfoExpanded(!infoExpanded)}
+				>
+					{infoExpanded ? "Hide Guidance" : "Show Cache-Friendly Prompt Ordering Guidance"}
+				</button>
+				{infoExpanded && (
+					<div className="info-panel">
+						<h3>Cache-Friendly Prompt Ordering</h3>
+						<ul>
+							<li>Keep system prompts and stable context at the top of your conversation — the provider caches the leading prefix.</li>
+							<li>Tool results and volatile content are automatically moved to the tail by message separation (<code>MEGACOMPACT_MESSAGE_SEPARATION</code>) so they don't invalidate the cache prefix.</li>
+							<li>Cache striping (<code>MEGACOMPACT_CACHE_STRIPING</code>) further orders stable context by a stability score so the most durable chunks lead.</li>
+							<li>Avoid inserting new instructions mid-conversation — prepend them instead.</li>
+						</ul>
+						{snapshot && (
+							<div className="cache-status-indicator">
+								<strong>Status:</strong>{" "}
+								{snapshot.config.messageSeparation ? "Separation Enabled" : "Separation Disabled (Check env)"} |{" "}
+								{snapshot.config.cacheStriping ? "Striping Enabled" : "Striping Disabled (Check env)"}
+							</div>
+						)}
+					</div>
+				)}
+			</div>
 			{/* ==============================================================
 			    Section 1 -- Provider Prompt Cache
 			    ============================================================== */}

package/extensions/dashboard-client/src/tabs/MaintenanceTab.tsx

@@ -16,12 +16,14 @@ import type {
 	SchemaHealthResponse,
 	MaintenanceAction,
 	MaintenanceActionResult,
+	DebugBundleResponse,
 } from "@contracts";
 import { useApi } from "../hooks/useApi";
 import {
 	fetchDbStats,
 	fetchSchemaHealth,
 	postMaintenanceAction,
+	fetchDebugBundle,
 } from "../api/client";
 
 // ---------------------------------------------------------------------------
@@ -419,6 +421,104 @@ function ActionsCard(): React.ReactElement {
 	);
 }
 
+// ---------------------------------------------------------------------------
+// Debug bundle card — gather diagnostic info for bug reports
+// ---------------------------------------------------------------------------
+
+function DebugBundleCard(): React.ReactElement {
+	const [bundle, setBundle] = useState<DebugBundleResponse | null>(null);
+	const [loading, setLoading] = useState(false);
+	const [error, setError] = useState<string | null>(null);
+	const [showJson, setShowJson] = useState(false);
+
+	const gather = useCallback(async () => {
+		setLoading(true);
+		setError(null);
+		try {
+			const res = await fetchDebugBundle();
+			setBundle(res);
+			setShowJson(true);
+		} catch (err) {
+			setError(err instanceof Error ? err.message : String(err));
+		} finally {
+			setLoading(false);
+		}
+	}, []);
+
+	const copyToClipboard = useCallback(() => {
+		if (!bundle) return;
+		const text = JSON.stringify(bundle, null, 2);
+		void navigator.clipboard.writeText(text).catch(() => {});
+	}, [bundle]);
+
+	const downloadJson = useCallback(() => {
+		if (!bundle) return;
+		const text = JSON.stringify(bundle, null, 2);
+		const blob = new Blob([text], { type: "application/json" });
+		const url = URL.createObjectURL(blob);
+		const a = document.createElement("a");
+		a.href = url;
+		a.download = `mega-compact-debug-bundle-${bundle.builtAt}.json`;
+		a.click();
+		URL.revokeObjectURL(url);
+	}, [bundle]);
+
+	const criticalCount = bundle?.criticalEvents.length ?? 0;
+
+	return (
+		<div className="card">
+			<div className="card-header">
+				Debug Bundle
+				{criticalCount > 0 && (
+					<span className="text-warn" style={{ marginLeft: "1em" }}>
+						{criticalCount} critical event{criticalCount !== 1 ? "s" : ""} found
+					</span>
+				)}
+			</div>
+			<div className="card-body">
+				<p className="text-muted" style={{ marginBottom: "0.75em" }}>
+					Gather a diagnostic bundle (recent events, config flags, schema health,
+					store stats) to attach to a bug report. Critical/compaction events are
+					highlighted.
+				</p>
+				<button onClick={gather} disabled={loading} style={{ marginRight: "0.5em" }}>
+					{loading ? "Gathering…" : "Gather Debug Logs"}
+				</button>
+				{error && <div className="text-error">{error}</div>}
+				{bundle && showJson && (
+					<>
+						<div style={{ marginTop: "0.75em", marginBottom: "0.5em" }}>
+							<button onClick={copyToClipboard} style={{ marginRight: "0.5em" }}>
+								Copy to clipboard
+							</button>
+							<button onClick={downloadJson}>Download JSON</button>
+							<button
+								onClick={() => setShowJson((v) => !v)}
+								style={{ marginLeft: "0.5em" }}
+							>
+								{showJson ? "Hide" : "Show"}
+							</button>
+						</div>
+						{criticalCount > 0 && (
+							<div className="stat-section">
+								<div className="stat-label text-warn">
+									Critical events ({criticalCount})
+								</div>
+								<pre className="text-mono" style={{ maxHeight: "12em", overflow: "auto" }}>
+									{JSON.stringify(bundle.criticalEvents, null, 2)}
+								</pre>
+							</div>
+						)}
+						<pre className="text-mono" style={{ maxHeight: "24em", overflow: "auto" }}>
+							{JSON.stringify(bundle, null, 2)}
+						</pre>
+					</>
+				)}
+			</div>
+		</div>
+	);
+}
+
 // ---------------------------------------------------------------------------
 // Main tab component
 // ---------------------------------------------------------------------------
@@ -453,6 +553,7 @@ export default function MaintenanceTab(): React.ReactElement {
 				<DbStatsCard data={dbStats} loading={statsLoading} error={statsError} />
 			</div>
 			<ActionsCard />
+			<DebugBundleCard />
 		</div>
 	);
 }