pi-mega-compact 0.13.4 → 0.13.6

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

@@ -30,17 +30,21 @@ import type {
 	TurnRow,
 	ConversationSummary,
 } from "@contracts";
+import { Card, CardContent, CardHeader, CardTitle } from "../components/ui/card";
+import { Badge } from "../components/ui/badge";
+import { Button } from "../components/ui/button";
+import { HydeDetailPanel } from "../components/HydeDetailPanel";
 
 function fmtTs(ms: number): string {
 	if (!ms) return "—";
 	return new Date(ms).toLocaleString();
 }
 
-function bandClass(band: TurnRow["pressureBand"]): string {
-	if (band === "green") return "band band-green";
-	if (band === "yellow") return "band band-yellow";
-	if (band === "red") return "band band-red";
-	return "band";
+function bandVariant(band: TurnRow["pressureBand"]): "success" | "warning" | "danger" | "default" {
+	if (band === "green") return "success";
+	if (band === "yellow") return "warning";
+	if (band === "red") return "danger";
+	return "default";
 }
 
 function sourceLabel(s: TurnRow["recall"][number]["source"]): string {
@@ -145,70 +149,88 @@ export default function TurnsTab(): React.ReactElement {
 	}
 
 	return (
-		<div className="turns-tab">
-			<h3>Turn-by-turn memory tracking + recall</h3>
-			{notice && <div className="turns-notice">{notice}</div>}
+		<div className="flex flex-col gap-4">
+			<h3 className="font-heading text-lg font-semibold">
+				Turn-by-turn memory tracking + recall
+			</h3>
+			{notice && <Badge variant="warning">{notice}</Badge>}
 
 			{intents && intents.intents.length > 0 && (
-				<section className="turns-intents">
-					<h4>Pending rewind intents ({intents.intents.length})</h4>
-					<ul>
-						{intents.intents.map((i) => (
-							<li key={i.id}>
-								{fmtTs(i.createdAt)} — rewind <code>{i.conversationId}</code> to
-								turn {i.targetTurnIndex}
-							</li>
-						))}
-					</ul>
-				</section>
+				<Card>
+					<CardHeader>
+						<CardTitle>
+							Pending rewind intents ({intents.intents.length})
+						</CardTitle>
+					</CardHeader>
+					<CardContent>
+						<ul className="list-disc space-y-1 pl-5">
+							{intents.intents.map((i) => (
+								<li key={i.id}>
+									{fmtTs(i.createdAt)} — rewind{" "}
+									<code>{i.conversationId}</code> to turn {i.targetTurnIndex}
+								</li>
+							))}
+						</ul>
+					</CardContent>
+				</Card>
 			)}
 
-			<section className="turns-conv-list">
-				<h4>Conversations ({turns.conversations.length})</h4>
-				<table className="turns-table">
-					<thead>
-						<tr>
-							<th>Conversation</th>
-							<th>Turns</th>
-							<th>Recall</th>
-							<th>Epochs</th>
-							<th>Avg ctx%</th>
-							<th>Last turn</th>
-							<th></th>
-						</tr>
-					</thead>
-					<tbody>
-						{turns.conversations.map((c: ConversationSummary) => (
-							<ConversationRow
-								key={c.conversationId}
-								c={c}
-								active={turns.activeConversationId === c.conversationId}
-								expanded={expanded === c.conversationId}
-								onExpand={() => expand(c.conversationId)}
-							/>
-						))}
-					</tbody>
-				</table>
-			</section>
+			<Card>
+				<CardHeader>
+					<CardTitle>
+						Conversations ({turns.conversations.length})
+					</CardTitle>
+				</CardHeader>
+				<CardContent>
+					<table className="w-full border-collapse text-sm">
+						<thead>
+							<tr>
+								<th className="border-b border-border px-3 py-2 text-left font-medium text-muted-foreground">Conversation</th>
+								<th className="border-b border-border px-3 py-2 text-left font-medium text-muted-foreground">Turns</th>
+								<th className="border-b border-border px-3 py-2 text-left font-medium text-muted-foreground">Recall</th>
+								<th className="border-b border-border px-3 py-2 text-left font-medium text-muted-foreground">Epochs</th>
+								<th className="border-b border-border px-3 py-2 text-left font-medium text-muted-foreground">Avg ctx%</th>
+								<th className="border-b border-border px-3 py-2 text-left font-medium text-muted-foreground">Last turn</th>
+								<th className="border-b border-border px-3 py-2"></th>
+							</tr>
+						</thead>
+						<tbody>
+							{turns.conversations.map((c: ConversationSummary) => (
+								<ConversationRow
+									key={c.conversationId}
+									c={c}
+									active={turns.activeConversationId === c.conversationId}
+									expanded={expanded === c.conversationId}
+									onExpand={() => expand(c.conversationId)}
+								/>
+							))}
+						</tbody>
+					</table>
+				</CardContent>
+			</Card>
 
 			{expanded && (
-				<section className="turns-detail">
-					<h4>
-						Turns in <code>{expanded}</code>
-					</h4>
-					{detailLoading ? (
-						<div className="tab-stub">Loading turns…</div>
-					) : detail ? (
-						<TurnDetail
-							detail={detail}
-							busy={busy}
-							onFork={onFork}
-							onRewind={onRewind}
-						/>
-					) : (
-						<div className="tab-stub">No detail.</div>
-					)}
-				</section>
+				<Card>
+					<CardHeader>
+						<CardTitle>
+							Turns in <code>{expanded}</code>
+						</CardTitle>
+					</CardHeader>
+					<CardContent>
+						{detailLoading ? (
+							<div className="text-sm text-muted-foreground">Loading turns…</div>
+						) : detail ? (
+							<TurnDetail
+								detail={detail}
+								busy={busy}
+								onFork={onFork}
+								onRewind={onRewind}
+							/>
+						) : (
+							<div className="text-sm text-muted-foreground">No detail.</div>
+						)}
+					</CardContent>
+				</Card>
 			)}
 		</div>
 	);
@@ -228,20 +250,22 @@ function ConversationRow({
 	return (
 		<>
 			<tr
-				className={active ? "turns-row active" : "turns-row"}
+				className={`border-b border-border/50 hover:bg-bg-elevated/40 ${
+					active ? "bg-primary/10" : ""
+				}`}
 				onClick={onExpand}
 				style={{ cursor: "pointer" }}
 			>
-				<td>
+				<td className="px-3 py-2">
 					{expanded ? "▾" : "▸"} <code>{c.conversationId}</code>
-					{active && <span className="pill">active</span>}
+					{active && <Badge variant="accent" className="ml-2">active</Badge>}
 				</td>
-				<td>{c.turnCount}</td>
-				<td>{c.totalRecall}</td>
-				<td>{c.epochCount}</td>
-				<td>{c.avgCtxPercent.toFixed(0)}%</td>
-				<td>{fmtTs(c.lastTurnAt)}</td>
-				<td />
+				<td className="px-3 py-2 text-right">{c.turnCount}</td>
+				<td className="px-3 py-2 text-right">{c.totalRecall}</td>
+				<td className="px-3 py-2 text-right">{c.epochCount}</td>
+				<td className="px-3 py-2 text-right">{c.avgCtxPercent.toFixed(0)}%</td>
+				<td className="px-3 py-2">{fmtTs(c.lastTurnAt)}</td>
+				<td className="px-3 py-2" />
 			</tr>
 		</>
 	);
@@ -259,48 +283,52 @@ function TurnDetail({
 	onRewind: (conversationId: string, turnIndex: number) => void;
 }): React.ReactElement {
 	return (
-		<table className="turns-detail-table">
+		<table className="w-full border-collapse text-sm">
 			<thead>
 				<tr>
-					<th>#</th>
-					<th>Role</th>
-					<th>Ctx</th>
-					<th>Band</th>
-					<th>Epoch</th>
-					<th>Recalled checkpoints (memory recall)</th>
-					<th>Ended</th>
-					<th>Actions</th>
+					<th className="border-b border-border px-3 py-2 text-left font-medium text-muted-foreground">#</th>
+					<th className="border-b border-border px-3 py-2 text-left font-medium text-muted-foreground">Role</th>
+					<th className="border-b border-border px-3 py-2 text-left font-medium text-muted-foreground">Ctx</th>
+					<th className="border-b border-border px-3 py-2 text-left font-medium text-muted-foreground">Band</th>
+					<th className="border-b border-border px-3 py-2 text-left font-medium text-muted-foreground">Epoch</th>
+					<th className="border-b border-border px-3 py-2 text-left font-medium text-muted-foreground">Recalled checkpoints (memory recall)</th>
+					<th className="border-b border-border px-3 py-2 text-left font-medium text-muted-foreground">HyDE</th>
+					<th className="border-b border-border px-3 py-2 text-left font-medium text-muted-foreground">Ended</th>
+					<th className="border-b border-border px-3 py-2 text-left font-medium text-muted-foreground">Actions</th>
 				</tr>
 			</thead>
 			<tbody>
 				{detail.turns.map((t) => (
-					<tr key={`${t.conversationId}:${t.turnIndex}`}>
-						<td>{t.turnIndex}</td>
-						<td>{t.role}</td>
-						<td>
+					<tr
+						key={`${t.conversationId}:${t.turnIndex}`}
+						className="border-b border-border/50 hover:bg-bg-elevated/40"
+					>
+						<td className="px-3 py-2 text-right">{t.turnIndex}</td>
+						<td className="px-3 py-2">{t.role}</td>
+						<td className="px-3 py-2">
 							{t.ctxTokens ?? "—"}
 							{t.ctxPercent != null && (
-								<span className="muted">
+								<span className="text-muted-foreground">
 									{" "}
 									· {t.ctxPercent.toFixed(0)}%
 								</span>
 							)}
 						</td>
-						<td>
-							<span className={bandClass(t.pressureBand)}>
+						<td className="px-3 py-2">
+							<Badge variant={bandVariant(t.pressureBand)}>
 								{t.pressureBand ?? "—"}
-							</span>
+							</Badge>
 						</td>
-						<td>{t.epochId ? <code>{t.epochId.slice(0, 8)}</code> : "—"}</td>
-						<td className="recall-cell">
+						<td className="px-3 py-2">{t.epochId ? <code>{t.epochId.slice(0, 8)}</code> : "—"}</td>
+						<td className="px-3 py-2">
 							{t.recall.length === 0 ? (
-								<span className="muted">—</span>
+								<span className="text-muted-foreground">—</span>
 							) : (
-								<ul className="recall-list">
+								<ul className="space-y-1">
 									{t.recall.map((r) => (
 										<li key={r.checkpointId}>
 											<code>{r.checkpointId.slice(0, 12)}</code>{" "}
-											<span className="muted">
+											<span className="text-muted-foreground">
 												{sourceLabel(r.source)} · {r.score.toFixed(2)}
 												{r.raptorLevel != null ? ` · L${r.raptorLevel}` : ""}
 											</span>
@@ -309,24 +337,34 @@ function TurnDetail({
 								</ul>
 							)}
 						</td>
-						<td>{fmtTs(t.endedAt)}</td>
-						<td className="actions-cell">
-							<button
-								type="button"
-								className="mini-btn"
-								disabled={busy !== null}
-								onClick={() => onFork(t.conversationId, t.turnIndex)}
-							>
-								fork
-							</button>
-							<button
-								type="button"
-								className="mini-btn"
-								disabled={busy !== null}
-								onClick={() => onRewind(t.conversationId, t.turnIndex)}
-							>
-								rewind
-							</button>
+						<td className="px-3 py-2 align-top">
+							<HydeDetailPanel
+								conversationId={t.conversationId}
+								turnIndex={t.turnIndex}
+							/>
+						</td>
+						<td className="px-3 py-2">{fmtTs(t.endedAt)}</td>
+						<td className="px-3 py-2">
+							<div className="flex gap-2">
+								<Button
+									type="button"
+									variant="outline"
+									size="sm"
+									disabled={busy !== null}
+									onClick={() => onFork(t.conversationId, t.turnIndex)}
+								>
+									fork
+								</Button>
+								<Button
+									type="button"
+									variant="outline"
+									size="sm"
+									disabled={busy !== null}
+									onClick={() => onRewind(t.conversationId, t.turnIndex)}
+								>
+									rewind
+								</Button>
+							</div>
 						</td>
 					</tr>
 				))}

package/extensions/dashboard-client/src/tabs/WikiTab/TopicEvolutionGraph.tsx

@@ -0,0 +1,274 @@
+/**
+ * dashboard-client/src/tabs/WikiTab/TopicEvolutionGraph.tsx — D3 evolution.
+ *
+ * Force-directed graph of wiki topics over time. Nodes are topics (radius scales
+ * with memoryCount); edges are merge/split curation events. A bucket scrubber
+ * (from the response buckets) dims nodes that had no activity up to the selected
+ * time window — a lightweight "growth over time" view.
+ *
+ * Self-contained force simulation (Coulomb repulsion + Hooke attraction +
+ * center gravity) — the codebase deliberately avoids external graph libraries
+ * (see memory-map-layout.ts). No data is fabricated: only real node/edge/bucket
+ * fields from the contract are used. Styling is Tailwind.
+ */
+
+import type React from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import type { TopicEvolutionResponse } from "@contracts";
+
+// ── Simulation constants ────────────────────────────────────────────────
+const W = 900;
+const H = 560;
+const REPULSION = 60_000;
+const ATTRACTION = 0.012;
+const CENTER_GRAVITY = 0.012;
+const DAMPING = 0.8;
+const SPEED_LIMIT = 2;
+const MIN_VELOCITY = 0.02;
+const MAX_ITERATIONS = 250;
+
+interface SimNode {
+	id: string;
+	label: string;
+	memoryCount: number;
+	pos: { x: number; y: number };
+	vx: number;
+	vy: number;
+}
+
+interface SimEdge {
+	source: number;
+	target: number;
+	kind: "merge" | "split";
+}
+
+function edgeColor(kind: "merge" | "split"): string {
+	return kind === "merge" ? "#f59e0b" : "#22c55e"; // amber / green
+}
+
+function initialLayout(nodes: TopicEvolutionResponse["nodes"]): SimNode[] {
+	return nodes.map((n, i) => {
+		const angle = (2 * Math.PI * i) / Math.max(nodes.length, 1);
+		return {
+			id: n.id,
+			label: n.label,
+			memoryCount: n.memoryCount,
+			pos: { x: Math.cos(angle) * 220 + W / 2, y: Math.sin(angle) * 220 + H / 2 },
+			vx: 0,
+			vy: 0,
+		};
+	});
+}
+
+function applyForces(sim: { nodes: SimNode[]; edges: SimEdge[] }): void {
+	const { nodes, edges } = sim;
+	for (let i = 0; i < nodes.length; i++) {
+		const n = nodes[i];
+		let fx = 0;
+		let fy = 0;
+		for (let j = 0; j < nodes.length; j++) {
+			if (i === j) continue;
+			const dx = n.pos.x - nodes[j].pos.x;
+			const dy = n.pos.y - nodes[j].pos.y;
+			const distSq = dx * dx + dy * dy || 1;
+			const dist = Math.sqrt(distSq);
+			fx += (dx / dist) * (REPULSION / distSq);
+			fy += (dy / dist) * (REPULSION / distSq);
+		}
+		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 - n.pos.x;
+			const dy = nodes[other].pos.y - n.pos.y;
+			fx += dx * ATTRACTION;
+			fy += dy * ATTRACTION;
+		}
+		fx -= n.pos.x * CENTER_GRAVITY;
+		fy -= n.pos.y * CENTER_GRAVITY;
+		n.vx = (n.vx + fx) * DAMPING;
+		n.vy = (n.vy + fy) * DAMPING;
+		const speed = Math.sqrt(n.vx * n.vx + n.vy * n.vy);
+		if (speed > SPEED_LIMIT) {
+			n.vx = (n.vx / speed) * SPEED_LIMIT;
+			n.vy = (n.vy / speed) * SPEED_LIMIT;
+		}
+		if (speed > MIN_VELOCITY) {
+			n.pos.x += n.vx;
+			n.pos.y += n.vy;
+		}
+	}
+}
+
+interface Props {
+	data: TopicEvolutionResponse;
+}
+
+export default function TopicEvolutionGraph({
+	data,
+}: Props): React.ReactElement {
+	const simRef = useRef<{
+		nodes: SimNode[];
+		edges: SimEdge[];
+		timeByActivity: Map<string, number> | null;
+	} | null>(null);
+	const animRef = useRef(0);
+	const [, setFrame] = useState(0);
+	const [scrub, setScrub] = useState<number>(0);
+
+	// Initialize simulation from data (re-run when data changes).
+	useEffect(() => {
+		const nodes = initialLayout(data.nodes);
+		const indexById = new Map(nodes.map((n, i) => [n.id, i]));
+		const edges: SimEdge[] = data.edges
+			.map((e) => {
+				const si = indexById.get(e.source);
+				const ti = indexById.get(e.target);
+				if (si === undefined || ti === undefined || si === ti) return null;
+				return { source: si, target: ti, kind: e.kind };
+			})
+			.filter((e): e is SimEdge => e !== null);
+		// Latest activity per node (from merge/split edge timestamps).
+		const timeByActivity = new Map<string, number>();
+		for (const e of data.edges) {
+			timeByActivity.set(e.source, Math.max(timeByActivity.get(e.source) ?? 0, e.at));
+			timeByActivity.set(e.target, Math.max(timeByActivity.get(e.target) ?? 0, e.at));
+		}
+		simRef.current = { nodes, edges, timeByActivity };
+		setFrame(1);
+		return () => cancelAnimationFrame(animRef.current);
+	}, [data]);
+
+	// Run the force simulation to stable layout.
+	useEffect(() => {
+		if (!simRef.current) return;
+		let iter = 0;
+		const tick = () => {
+			if (!simRef.current || iter >= MAX_ITERATIONS) return;
+			applyForces(simRef.current);
+			iter++;
+			setFrame(iter);
+			animRef.current = requestAnimationFrame(tick);
+		};
+		animRef.current = requestAnimationFrame(tick);
+		return () => cancelAnimationFrame(animRef.current);
+	}, [data]);
+
+	const sim = simRef.current;
+
+	const scrubMax = Math.max(data.buckets.length - 1, 0);
+	const scrubBucket = useMemo(() => {
+		if (data.buckets.length === 0) return null;
+		const idx = Math.min(scrub, data.buckets.length - 1);
+		return data.buckets[idx].bucket;
+	}, [scrub, data.buckets]);
+
+	if (!sim || data.nodes.length === 0) {
+		return (
+			<div className="rounded-lg border border-border bg-bg-card p-6 text-sm text-muted-foreground">
+				No evolution data yet. Merge or split topics to see connections, then
+				check back after a rebuild.
+			</div>
+		);
+	}
+
+	const activeSet =
+		scrubBucket == null || !sim.timeByActivity
+			? null
+			: new Set(
+					[...sim.timeByActivity.entries()]
+						.filter(([, t]) => t <= scrubBucket)
+						.map(([id]) => id),
+				);
+
+	return (
+		<div className="flex flex-col gap-3">
+			{/* Scrubber */}
+			{data.buckets.length > 1 && (
+				<div className="flex items-center gap-3">
+					<input
+						type="range"
+						min={0}
+						max={scrubMax}
+						value={scrub}
+						onChange={(e) => setScrub(Number(e.target.value))}
+						className="w-full accent-primary"
+						aria-label="Scrub through topic activity time"
+					/>
+					<span className="whitespace-nowrap text-xs text-muted-foreground">
+						{scrubBucket ? new Date(scrubBucket).toLocaleDateString() : "all"}
+					</span>
+				</div>
+			)}
+
+			{/* SVG graph */}
+			<svg
+				width="100%"
+				height={H}
+				viewBox={`0 0 ${W} ${H}`}
+				role="img"
+				aria-label="Topic evolution graph"
+				className="rounded-lg border border-border/60 bg-bg-card"
+			>
+				{sim.edges.map((e, i) => {
+					const a = sim.nodes[e.source];
+					const b = sim.nodes[e.target];
+					return (
+						<line
+							key={`edge-${i}`}
+							x1={a.pos.x}
+							y1={a.pos.y}
+							x2={b.pos.x}
+							y2={b.pos.y}
+							stroke={edgeColor(e.kind)}
+							strokeWidth={1.5}
+							strokeDasharray={e.kind === "split" ? "4 3" : undefined}
+							opacity={0.5}
+						/>
+					);
+				})}
+				{sim.nodes.map((n, i) => {
+					const active =
+						activeSet == null || activeSet.size === 0 || activeSet.has(n.id);
+					const r = Math.min(32, 8 + n.memoryCount * 3);
+					return (
+						<g key={`node-${i}`} opacity={active ? 1 : 0.15}>
+							<circle
+								cx={n.pos.x}
+								cy={n.pos.y}
+								r={r}
+								fill="hsl(var(--primary) / 0.18)"
+								stroke="hsl(var(--primary))"
+								strokeWidth={1.5}
+							/>
+							<text
+								x={n.pos.x}
+								y={n.pos.y + 4}
+								textAnchor="middle"
+								fontSize="10px"
+								fill="hsl(var(--foreground))"
+								className="pointer-events-none"
+							>
+								{n.label.length > 16 ? n.label.slice(0, 15) + "…" : n.label}
+							</text>
+						</g>
+					);
+				})}
+			</svg>
+
+			<div className="flex items-center gap-4 text-xs text-muted-foreground">
+				<span className="flex items-center gap-1.5">
+					<span className="inline-block h-0.5 w-6 bg-amber-500" /> merge
+				</span>
+				<span className="flex items-center gap-1.5">
+					<span className="inline-block h-0.5 w-6 border-t border-dashed border-green-500" />
+					split
+				</span>
+				<span>
+					{data.nodes.length} nodes · {data.edges.length} curation events
+				</span>
+			</div>
+		</div>
+	);
+}

package/extensions/dashboard-client/src/tabs/WikiTab/TopicEvolutionView.tsx

@@ -0,0 +1,71 @@
+/**
+ * dashboard-client/src/tabs/WikiTab/TopicEvolutionView.tsx — planet evolution.
+ *
+ * Thin shell over TopicEvolutionGraph: fetches GET /api/wiki/evolution via
+ * useApi and refetches when a `wiki_rebuilt` SSE event lands (emitted by the
+ * extension after a topic-model rebuild), so the graph + scrubber stay live
+ * between polls. No data is fabricated — only the contract fields are used.
+ *
+ * Styling: Tailwind + shadcn (Card). No legacy CSS classes.
+ */
+
+import type React from "react";
+import { useCallback, useEffect, useMemo } from "react";
+import { useApi } from "../../hooks/useApi";
+import { useSSE } from "../../hooks/useSSE";
+import { fetchTopicEvolution } from "../../api/client";
+import type { TopicEvolutionResponse, SseEvent } from "@contracts";
+import { Card, CardContent } from "../../components/ui/card";
+import TopicEvolutionGraph from "./TopicEvolutionGraph";
+
+function isWikiRebuilt(e: SseEvent): e is Extract<SseEvent, { type: "wiki_rebuilt" }> {
+	return e.type === "wiki_rebuilt";
+}
+
+export default function TopicEvolutionView(): React.ReactElement {
+	const { data, error, loading, refetch } = useApi<TopicEvolutionResponse>(
+		useCallback(() => fetchTopicEvolution(), []),
+		{ pollInterval: 60_000 },
+	);
+
+	const { events } = useSSE();
+	const lastRebuiltTs = useMemo(() => {
+		const rebuilt = events.filter(isWikiRebuilt);
+		if (rebuilt.length === 0) return null;
+		return rebuilt[rebuilt.length - 1].ts;
+	}, [events]);
+
+	useEffect(() => {
+		if (lastRebuiltTs != null) refetch();
+	}, [lastRebuiltTs, refetch]);
+
+	if (error && !data) {
+		return (
+			<div className="rounded-lg border border-border bg-bg-card p-6 text-sm text-danger">
+				Error loading evolution graph: {error.message}
+			</div>
+		);
+	}
+	if (loading && !data) {
+		return (
+			<div className="rounded-lg border border-border bg-bg-card p-6 text-sm text-muted-foreground">
+				Loading evolution graph…
+			</div>
+		);
+	}
+
+	return (
+		<Card>
+			<CardContent>
+				<h3 className="mb-2 font-heading text-sm font-semibold text-muted-foreground">
+					Topic evolution
+				</h3>
+				{data ? (
+					<TopicEvolutionGraph data={data} />
+				) : (
+					<p className="text-sm text-muted-foreground">No data yet.</p>
+				)}
+			</CardContent>
+		</Card>
+	);
+}