pi-mega-compact 0.13.0 → 0.13.2

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

@@ -1,476 +1,66 @@
 /**
- * MemoryMapTab.tsx — D3 memory map with force-directed graph.
- * Node shape encodes nodeType: checkpoint=filled circle, turn=hollow circle,
- * turn-content=hollow+ring, memory=diamond.
- * Fetches from /api/memory-map, renders SVG force layout.
+ * MemoryMapTab.tsx — Sub-tab shell under Memory Map (Part B).
+ *
+ * Hosts two sub-tabs: the D3 force-directed Memory Map (MemoryMapView) and
+ * the hierarchical RAPTOR tree (RaptorTreeView). The heavy rendering logic
+ * lives in ./MemoryMapTab/* to keep every file under the extensions limit.
  */
 import type React from "react";
-import { useEffect, useRef, useState, useCallback, useMemo } from "react";
-import { renderNodeShape, NODE_COLORS, NODE_TYPE_LABELS } from "../memory-map-shapes.js";
-import type { NodeType } from "../memory-map-shapes.js";
-import { buildLayout, applyForces } from "../memory-map-layout.js";
-import type { LayoutNode, LayoutEdge } from "../memory-map-layout.js";
-
-// Types (mirror of api-contracts/memory-map.ts — client-side only)
-
-interface GraphNode {
-  id: string;
-  sessionId: string;
-  label: string;
-  summaryTruncated: string;
-  tokenEstimate: number;
-  timestamp: number;
-  dedupStatus: string | undefined;
-  raptorLevel: number;
-  topicSummary: string | undefined;
-  decisionCount: number;
-  textSnippet: string;
-  /** Source type discriminator for UI node-shape encoding. */
-  nodeType: "checkpoint" | "turn" | "turn-content" | "memory";
-}
-
-interface GraphEdge {
-  source: string;
-  target: string;
-  weight: number;
-  type: "temporal" | "semantic" | "raptor_parent";
-}
-
-interface GraphValidationReport {
-  readonly gatesRun: number;
-  readonly gatesPassed: number;
-  readonly dropped: { nodes: number; edges: number };
-  readonly warnings: Array<{ gate: string; code: string; count: number }>;
-  readonly sources: {
-    checkpoint: number;
-    turn: number;
-    turnContent: number;
-    memory: number;
-  };
-  readonly builtAt: number;
-}
-
-interface GraphMetadata {
-  totalNodes: number;
-  totalEdges: number;
-  avgWeight: number;
-  nodeTypeBreakdown: Record<string, number>;
-  edgeTypeBreakdown: Record<string, number>;
-}
-
-interface MemoryMapResponse {
-  nodes: GraphNode[];
-  edges: GraphEdge[];
-  metadata: GraphMetadata;
-  /** Validation report from the 9-gate pipeline. Optional for backward compat. */
-  validation?: GraphValidationReport;
-}
-
-// Simulation rendering constants (layout math is in memory-map-layout.ts)
-
-const MAX_ITERATIONS = 300;
-const EDGE_ALPHA = 0.3;
-const SVG_WIDTH = 900;
-const SVG_HEIGHT = 600;
-const PADDING = 40;
-
-// Helpers
+import { useState } from "react";
+import MemoryMapView from "./MemoryMapTab/MemoryMapView.js";
+import RaptorTreeView from "./MemoryMapTab/RaptorTreeView.js";
+
+type MemoryMapSubTab = "map" | "raptor";
+
+const subTabNavStyle: React.CSSProperties = {
+	display: "flex",
+	gap: "0.5rem",
+	marginBottom: "1rem",
+	borderBottom: "1px solid #2a2a4e",
+	paddingBottom: "0.5rem",
+	paddingTop: "0.5rem",
+	width: "100%",
+};
 
-function edgeColor(type: GraphEdge["type"]): string {
-  switch (type) {
-    case "temporal":
-      return "#6366f1"; // indigo
-    case "semantic":
-      return "#22c55e"; // green
-    case "raptor_parent":
-      return "#f59e0b"; // amber
-  }
+function subTabBtnStyle(active: boolean): React.CSSProperties {
+	return {
+		background: active ? "#3a5a9f" : "transparent",
+		color: active ? "#fff" : "#a0a0c0",
+		border: "1px solid",
+		borderColor: active ? "#3a5a9f" : "#2a2a4e",
+		borderRadius: "6px",
+		padding: "0.4rem 0.8rem",
+		cursor: "pointer",
+		fontSize: "0.9rem",
+		fontWeight: active ? 600 : 400,
+	};
 }
 
-// Minimal legend swatch component
-interface SwatchProps {
-  type: "node" | "edge";
-  color: string;
-  shape: "filled-circle" | "hollow-circle" | "hollow-ring" | "diamond" | "line";
-  label: string;
-}
-const Swatch: React.FC<SwatchProps> = ({ color, shape, label }) => {
-  const base: React.CSSProperties = {
-    display: "inline-block",
-    width: "10px",
-    height: "10px",
-    verticalAlign: "middle",
-    marginRight: "3px",
-    borderRadius: shape.startsWith("hollow") || shape === "filled-circle" ? "50%" : undefined,
-  };
-  let swatch: JSX.Element;
-  if (shape === "line") {
-    return <span style={{ color, marginRight: "6px" }}>{label}</span>;
-  } else if (shape === "filled-circle") {
-    swatch = <span style={{ ...base, backgroundColor: color }} />;
-  } else if (shape === "hollow-circle") {
-    swatch = <span style={{ ...base, border: `2px solid ${color}`, backgroundColor: "transparent" }} />;
-  } else if (shape === "hollow-ring") {
-    swatch = (
-      <span style={{ ...base, border: `2px solid ${color}`, backgroundColor: "transparent", position: "relative" }}>
-        <span style={{ display: "block", width: "4px", height: "4px", borderRadius: "50%", backgroundColor: color, margin: "2px auto" }} />
-      </span>
-    );
-  } else {
-    swatch = <span style={{ ...base, clipPath: "polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)", backgroundColor: color }} />;
-  }
-  return <><span className="memory-map-legend-item">{swatch}{label}</span> </>;
-};
-
-// Force simulation engine (delegated to memory-map-layout.ts)
 const MemoryMapTab: React.FC = () => {
-  const [data, setData] = useState<MemoryMapResponse | null>(null);
-  const [loading, setLoading] = useState<boolean>(true);
-  const [error, setError] = useState<string | null>(null);
-  const [selectedNode, setSelectedNode] = useState<GraphNode | null>(null);
-  const [searchQuery, setSearchQuery] = useState<string>("");
-  const [filterSession] = useState<string>("");
-  const [frame, setFrame] = useState<number>(0);
-
-  const layoutRef = useRef<{ nodes: LayoutNode[]; edges: LayoutEdge[] } | null>(null);
-  const animRef = useRef<number>(0);
-
-  // Fetch graph data when filterSession changes
-  useEffect(() => {
-    let cancelled = false;
-    const params = new URLSearchParams();
-    if (filterSession) params.set("sessionId", filterSession);
-    params.set("threshold", "0.7");
-    params.set("maxEdgesPerNode", "4");
-
-    setLoading(true);
-    setError(null);
-
-    fetch(`/api/memory-map?${params.toString()}`)
-      .then((r) => {
-        if (!r.ok) throw new Error(`HTTP ${r.status}`);
-        return r.json() as Promise<MemoryMapResponse>;
-      })
-      .then((d) => {
-        if (!cancelled) {
-          setData(d);
-          layoutRef.current = buildLayout(d);
-          setFrame(1);
-          setLoading(false);
-        }
-      })
-      .catch((e: unknown) => {
-        if (!cancelled) {
-          setError(e instanceof Error ? e.message : "Unknown error");
-          setLoading(false);
-        }
-      });
-
-    return () => {
-      cancelled = true;
-      cancelAnimationFrame(animRef.current);
-    };
-  }, [filterSession]);
-
-  // Run force simulation via requestAnimationFrame
-  useEffect(() => {
-    if (!layoutRef.current || frame === 0) return;
-
-    const layout = layoutRef.current;
-    let iter = 0;
-
-    const tick = () => {
-      if (iter >= MAX_ITERATIONS) return;
-      applyForces(layout);
-      iter++;
-      setFrame(iter);
-      animRef.current = requestAnimationFrame(tick);
-    };
-
-    animRef.current = requestAnimationFrame(tick);
-    return () => cancelAnimationFrame(animRef.current);
-  }, [frame]);
-
-  // Toggle pin / select a node
-  const handleNodeClick = useCallback((node: LayoutNode, index: number) => {
-    const layout = layoutRef.current;
-    if (!layout) return;
-    layout.nodes[index].pinned = !layout.nodes[index].pinned;
-    if (!layout.nodes[index].pinned) {
-      layout.nodes[index].vx = 0;
-      layout.nodes[index].vy = 0;
-    }
-    setSelectedNode((prev) => (prev?.id === node.id ? null : (node as unknown as GraphNode)));
-    setFrame((s) => s + 1);
-  }, []);
-
-  // Filtered node indices for search
-  const filteredSet = useMemo<Set<number> | null>(() => {
-    const layout = layoutRef.current;
-    if (!layout || !searchQuery) return null;
-    const q = searchQuery.toLowerCase();
-    return new Set(
-      layout.nodes
-        .map((n, i) =>
-          n.summaryTruncated.toLowerCase().includes(q) || n.label.toLowerCase().includes(q) ? i : -1,
-        )
-        .filter((i) => i >= 0),
-    );
-  }, [searchQuery]);
-
-  // Health indicator helpers (D3)
-
-  /**
-   * Derive graph health from validation report:
-   * green = all gates passed + no warnings
-   * yellow = warnings present but no critical gate failed
-   * red = a critical gate (gatesRun > gatesPassed) failed
-   */
-  const graphHealth = useMemo<{ level: "green" | "yellow" | "red"; label: string }>(() => {
-    const v = data?.validation;
-    if (!v) return { level: "yellow", label: "No validation" };
-    if (v.gatesPassed < v.gatesRun) return { level: "red", label: "Gate failure" };
-    if (v.warnings.length > 0) return { level: "yellow", label: `${v.warnings.length} warning(s)` };
-    return { level: "green", label: "Healthy" };
-  }, [data?.validation]);
-
-  const healthColor: Record<string, string> = {
-    green: "#22c55e",
-    yellow: "#eab308",
-    red: "#ef4444",
-  };
-
-  // Source availability indicators (D3)
-
-  /** Count badge fragments from validation.sources. */
-  const countBadge = useMemo<string>(() => {
-    const v = data?.validation;
-    if (!v) {
-      const totalNodes = data?.metadata.totalNodes ?? 0;
-      return `${totalNodes} nodes`;
-    }
-    const parts: string[] = [];
-    if (v.sources.checkpoint > 0) parts.push(`${v.sources.checkpoint} checkpoints`);
-    if (v.sources.turn > 0) parts.push(`${v.sources.turn} turns`);
-    if (v.sources.turnContent > 0) parts.push(`${v.sources.turnContent} turn-content`);
-    if (v.sources.memory > 0) parts.push(`${v.sources.memory} memories`);
-    if (parts.length === 0) {
-      parts.push(`${data?.metadata.totalNodes ?? 0} nodes`);
-    }
-    return parts.join(" · ");
-  }, [data?.validation, data?.metadata.totalNodes]);
-
-  /** Per-source availability: ✓ for available sources, ✗ for empty ones. */
-  const sourceAvail = useMemo<string>(() => {
-    const v = data?.validation;
-    if (!v) return "";
-    const parts: string[] = [];
-    parts.push(v.sources.checkpoint > 0 ? "✓ checkpoints" : "✗ checkpoints");
-    parts.push(v.sources.turn > 0 ? "✓ turns" : "✗ turns");
-    parts.push(v.sources.turnContent > 0 ? "✓ turn-content" : "✗ turn-content");
-    parts.push(v.sources.memory > 0 ? "✓ memories" : "✗ memories");
-    return parts.join(" | ");
-  }, [data?.validation]);
-
-  /** Whether all four sources are empty (true empty state). */
-  const allSourcesEmpty = useMemo<boolean>(() => {
-    const v = data?.validation;
-    if (!v) return data?.metadata.totalNodes === 0;
-    return (
-      v.sources.checkpoint === 0 &&
-      v.sources.turn === 0 &&
-      v.sources.turnContent === 0 &&
-      v.sources.memory === 0
-    );
-  }, [data?.validation, data?.metadata.totalNodes]);
-
-  // Loading state
-
-  if (loading) {
-    return <div className="memory-map-loading">Loading memory graph...</div>;
-  }
-
-  // Error state
-
-  if (error) {
-    return (
-      <div className="memory-map-error">
-        <p>Failed to load memory map: {error}</p>
-        <button
-          className="memory-map-retry-btn"
-          onClick={() => setFrame((s) => s + 1)}
-        >
-          Retry
-        </button>
-      </div>
-    );
-  }
-
-  // Empty state (D2)
-
-  if (!data || !layoutRef.current || allSourcesEmpty) {
-    return (
-      <div className="memory-map-empty">
-        <p>Memories appear after your first compaction. The graph shows checkpoints (compaction summaries) linked by semantic similarity and time. Run a longer session or lower the compaction tier to see it sooner.</p>
-      </div>
-    );
-  }
-
-  const layout = layoutRef.current;
-
-  // Render
-
-  return (
-    <div className="memory-map-container">
-      {/* Toolbar */}
-      <div className="memory-map-toolbar">
-        <input
-          type="text"
-          placeholder="Search memories..."
-          value={searchQuery}
-          onInput={(e: React.FormEvent<HTMLInputElement>) =>
-            setSearchQuery((e.target as HTMLInputElement).value)
-          }
-          className="memory-map-search"
-        />
-        <span className="memory-map-stats">
-          {/* Count badge */}
-          <span className="memory-map-count-badge">{countBadge}</span>
-          <br />
-          <span className="memory-map-edges">{data.edges.length} edges</span>
-        </span>
-        {/* Graph-health indicator */}
-        <span
-          className="memory-map-health-badge"
-          style={{
-            backgroundColor: healthColor[graphHealth.level] ?? "#6b7280",
-            color: "#fff",
-            padding: "2px 8px",
-            borderRadius: "10px",
-            fontSize: "11px",
-            fontWeight: 600,
-            marginLeft: "8px",
-          }}
-          title={`Validation: ${graphHealth.label}`}
-        >
-          {graphHealth.level === "green" ? "Healthy" : graphHealth.level === "yellow" ? "Warnings" : "Critical"}
-        </span>
-      </div>
-
-      {/* Source availability indicators */}
-      {sourceAvail ? (
-        <div className="memory-map-source-avail" style={{ fontSize: "11px", padding: "2px 12px", color: "#6b7280" }}>
-          {sourceAvail}
-        </div>
-      ) : null}
-
-      {/* Legend — node types + edge types */}
-      <div className="memory-map-legend">
-        <span className="memory-map-legend-section">Nodes:</span>
-        <Swatch type="node" color={NODE_COLORS.checkpoint} shape="filled-circle" label="Checkpoint" />
-        <Swatch type="node" color={NODE_COLORS.turn} shape="hollow-circle" label="Turn" />
-        <Swatch type="node" color={NODE_COLORS["turn-content"]} shape="hollow-ring" label="Turn Content" />
-        <Swatch type="node" color={NODE_COLORS.memory} shape="diamond" label="Memory" />
-        <span className="memory-map-legend-sep">|</span>
-        <span className="memory-map-legend-section">Edges:</span>
-        <Swatch type="edge" color={edgeColor("semantic")} shape="line" label="Semantic" />
-        <Swatch type="edge" color={edgeColor("temporal")} shape="line" label="Temporal" />
-        <Swatch type="edge" color={edgeColor("raptor_parent")} shape="line" label="Raptor" />
-      </div>
-
-      {/* SVG graph */}
-      <svg
-        width={SVG_WIDTH}
-        height={SVG_HEIGHT}
-        viewBox={`0 0 ${SVG_WIDTH} ${SVG_HEIGHT}`}
-        className="memory-map-svg"
-      >
-        {/* Edges */}
-        {layout.edges.map((e, i) => {
-          const src = layout.nodes[e.source];
-          const tgt = layout.nodes[e.target];
-          const color = edgeColor(e.type);
-          const strokeW = Math.max(1, e.weight * 2.5);
-          return (
-            <line
-              key={`edge-${i}`}
-              x1={PADDING + (src.pos.x / (layout.nodes.length || 1)) * (SVG_WIDTH - 2 * PADDING)}
-              y1={PADDING + (src.pos.y / (layout.nodes.length || 1)) * (SVG_HEIGHT - 2 * PADDING)}
-              x2={PADDING + (tgt.pos.x / (layout.nodes.length || 1)) * (SVG_WIDTH - 2 * PADDING)}
-              y2={PADDING + (tgt.pos.y / (layout.nodes.length || 1)) * (SVG_HEIGHT - 2 * PADDING)}
-              stroke={color}
-              strokeWidth={strokeW}
-              opacity={EDGE_ALPHA}
-            />
-          );
-        })}
-
-        {/* Nodes — shape encodes nodeType */}
-        {layout.nodes.map((n, i) => {
-          const cx =
-            PADDING + (n.pos.x / (layout.nodes.length || 1)) * (SVG_WIDTH - 2 * PADDING);
-          const cy =
-            PADDING + (n.pos.y / (layout.nodes.length || 1)) * (SVG_HEIGHT - 2 * PADDING);
-          const radius = Math.min(20, 8 + n.tokenEstimate / 500);
-          const isFiltered = filteredSet ? filteredSet.has(i) : true;
-          const isSelected = selectedNode?.id === n.id;
-          const nodeLabel = n.label.length > 20 ? n.label.slice(0, 18) + "..." : n.label;
-
-          return (
-            <g
-              key={`node-${i}`}
-              className="memory-map-node-group"
-              onClick={() => handleNodeClick(n, i)}
-              style={{ cursor: "pointer" }}
-            >
-              {renderNodeShape(cx, cy, radius, n.nodeType as NodeType, isSelected, isFiltered, n.dedupStatus)}
-              <text
-                x={cx}
-                y={cy + radius + 12}
-                textAnchor="middle"
-                fontSize="9px"
-                fill="#374151"
-                className="memory-map-label"
-              >
-                {nodeLabel}
-              </text>
-            </g>
-          );
-        })}
-      </svg>
-
-      {/* Node detail panel */}
-      {selectedNode ? (
-        <div className="memory-map-detail">
-          <h3>
-            <span
-              className="memory-map-detail-type"
-              style={{
-                display: "inline-block",
-                fontSize: "12px",
-                fontWeight: 400,
-                color: "#6b7280",
-                marginRight: "6px",
-              }}
-            >
-              {NODE_TYPE_LABELS[selectedNode.nodeType]}
-            </span>
-            {selectedNode.label}
-          </h3>
-          <p>{selectedNode.summaryTruncated}</p>
-          {selectedNode.topicSummary ? (
-            <p className="memory-map-topic">Topic: {selectedNode.topicSummary}</p>
-          ) : null}
-          <p>
-            Tokens: {selectedNode.tokenEstimate} | Decisions: {selectedNode.decisionCount}
-          </p>
-          <p>Session: {selectedNode.sessionId}</p>
-          <p>Raptor Level: {selectedNode.raptorLevel}</p>
-          <p className="memory-map-snippet">{selectedNode.textSnippet}</p>
-        </div>
-      ) : null}
-    </div>
-  );
+	const [subTab, setSubTab] = useState<MemoryMapSubTab>("map");
+
+	return (
+		<div className="memory-map-tab">
+			<nav style={subTabNavStyle} aria-label="Memory map sections">
+				<button
+					type="button"
+					style={subTabBtnStyle(subTab === "map")}
+					onClick={() => setSubTab("map")}
+				>
+					Memory Map
+				</button>
+				<button
+					type="button"
+					style={subTabBtnStyle(subTab === "raptor")}
+					onClick={() => setSubTab("raptor")}
+				>
+					RAPTOR Tree
+				</button>
+			</nav>
+			{subTab === "map" && <MemoryMapView />}
+			{subTab === "raptor" && <RaptorTreeView />}
+		</div>
+	);
 };
 
 export default MemoryMapTab;

package/extensions/dashboard-client/src/tabs/SetupTab/EmbedderHealthCard.tsx

@@ -0,0 +1,109 @@
+/**
+ * SetupTab/EmbedderHealthCard.tsx — embedder health probe card (Part A).
+ *
+ * Round-trips a test embed through the active embedder and shows ✓ working /
+ * ✗ unreachable + latency + dimensions. Polls every 30s.
+ */
+import type React from "react";
+import { useState, useEffect, useCallback } from "react";
+import type { EmbedderHealthResponse } from "@contracts";
+import { fetchEmbedderHealth } from "../../api/client";
+
+const styles: Record<string, React.CSSProperties> = {
+	section: {
+		background: "#1a1a2e",
+		borderRadius: "8px",
+		padding: "1rem",
+		marginBottom: "1rem",
+		border: "1px solid #2a2a4e",
+	},
+	sectionTitle: {
+		fontSize: "1.1rem",
+		fontWeight: 700,
+		marginTop: 0,
+		marginBottom: "0.75rem",
+		color: "#e0e0e0",
+		borderBottom: "1px solid #333",
+		paddingBottom: "0.5rem",
+	},
+	label: { fontWeight: 600, color: "#a0a0c0", marginRight: "0.5rem" },
+	value: { color: "#e0e0e0" },
+	row: { marginBottom: "0.4rem", fontSize: "0.9rem" },
+};
+
+export default function EmbedderHealthCard(): React.ReactElement {
+	const [health, setHealth] = useState<EmbedderHealthResponse | null>(null);
+	const [error, setError] = useState<string | null>(null);
+
+	const loadHealth = useCallback(() => {
+		fetchEmbedderHealth()
+			.then(setHealth)
+			.catch((e: unknown) =>
+				setError(e instanceof Error ? e.message : String(e)),
+			);
+	}, []);
+
+	useEffect(() => {
+		loadHealth();
+	}, [loadHealth]);
+
+	// Poll health every 30s
+	useEffect(() => {
+		const id = setInterval(loadHealth, 30000);
+		return () => clearInterval(id);
+	}, [loadHealth]);
+
+	const ok = health?.status === "ok";
+	const statusText =
+		health?.status === "ok"
+			? "Working"
+			: health?.status === "unreachable"
+				? "Unreachable"
+				: "Error";
+	const color = ok ? "#4caf50" : "#f44336";
+	const icon = ok ? "✓" : "✗";
+
+	return (
+		<div style={styles.section}>
+			<h3 style={styles.sectionTitle}>Embedder Health</h3>
+			{error && (
+				<p style={{ color: "#f44336", fontSize: "0.85rem" }}>
+					Error: {error}
+				</p>
+			)}
+			{!health && !error && (
+				<p style={{ color: "#888", fontSize: "0.85rem" }}>
+					Probing embedder...
+				</p>
+			)}
+			{health && (
+				<>
+					<div style={styles.row}>
+						<span style={{ ...styles.label, color: `${color}` }}>
+							{icon} {statusText}:
+						</span>
+						<span style={styles.value}>{health.dim} dims</span>
+						{health.latencyMs !== undefined && (
+							<span style={{ color: "#a0a0c0", marginLeft: "0.5rem" }}>
+								({health.latencyMs.toFixed(1)} ms)
+							</span>
+						)}
+					</div>
+					<div style={styles.row}>
+						<span style={styles.label}>Endpoint:</span>
+						<span style={styles.value}>
+							{health.url ?? (
+								<span style={{ color: "#888" }}>built-in (no URL)</span>
+							)}
+						</span>
+					</div>
+					{health.error && (
+						<p style={{ color: "#f44336", fontSize: "0.85rem" }}>
+							{health.error}
+						</p>
+					)}
+				</>
+			)}
+		</div>
+	);
+}