pi-mega-compact 0.13.5 → 0.13.7

package/extensions/dashboard-client/package.json

@@ -11,14 +11,25 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
+    "@radix-ui/react-select": "^2.1.0",
+    "@radix-ui/react-switch": "^1.1.0",
+    "@radix-ui/react-tabs": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.1.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "lucide-react": "^0.400.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "recharts": "^2.15.4"
+    "recharts": "^2.15.4",
+    "tailwind-merge": "^2.5.0"
   },
   "devDependencies": {
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.4",
+    "autoprefixer": "^10.4.0",
+    "postcss": "^8.4.0",
+    "tailwindcss": "^3.4.0",
     "typescript": "^5.6.3",
     "vite": "^5.4.11"
   },

package/extensions/dashboard-client/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

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

@@ -3,6 +3,7 @@
  *
  * SPRINT-B1: React scaffold with tab routing, header, error boundary.
  * SPRINT-C1+: tabs wired progressively with real content.
+ * SPRINT-V2: NEW_UI flag splits OldDashboard (legacy) from NewDashboard (AppShell).
  */
 
 import React, { useState, useCallback } from "react";
@@ -12,6 +13,15 @@ import { LoadingSpinner } from "./components/LoadingSpinner";
 import { useApi } from "./hooks/useApi";
 import { fetchSnapshot } from "./api/client";
 import type { SnapshotResponse } from "@contracts";
+import { NEW_UI } from "./config";
+import { AppShell } from "./components/layout/AppShell";
+import {
+  PRIMARY_TABS,
+  ADVANCED_TABS,
+  ADVANCED_TAB_IDS as advancedTabIds,
+  type TabId,
+} from "./tabs/registry";
+export type { TabId };
 
 // Tab components — lazy-loaded. C1 fills Overview + Events; C2/C3 fill the rest.
 const OverviewTab = React.lazy(() => import("./tabs/OverviewTab"));
@@ -21,105 +31,134 @@ const SetupTab = React.lazy(() => import("./tabs/SetupTab"));
 const MetricsTab = React.lazy(() => import("./tabs/MetricsTab"));
 const CacheTab = React.lazy(() => import("./tabs/CacheTab"));
 const SessionsTab = React.lazy(() => import("./tabs/SessionsTab"));
-const TopicsTab = React.lazy(() => import("./tabs/TopicsTab"));
+const WikiTab = React.lazy(() => import("./tabs/WikiTab"));
 const TurnsTab = React.lazy(() => import("./tabs/TurnsTab"));
 const MaintenanceTab = React.lazy(() => import("./tabs/MaintenanceTab"));
 const MemoryMapTab = React.lazy(() => import("./tabs/MemoryMapTab"));
 const HealthTab = React.lazy(() => import("./tabs/HealthTab"));
 
-export type TabId =
-	| "overview"
-	| "repos"
-	| "events"
-	| "setup"
-	| "metrics"
-	| "cache"
-	| "sessions"
-	| "topics"
-	| "turns"
-	| "maintenance"
-	| "memory-map"
-	| "health";
+interface AppState {
+  snapshot: SnapshotResponse | null;
+  loading: boolean;
+  error: Error | null;
+}
 
-type TabDef = { id: TabId; label: string };
+function TabContent({
+  activeTab,
+  snapshot,
+  loading,
+  error,
+}: AppState & { activeTab: TabId }): React.ReactElement {
+  return (
+    <React.Suspense fallback={<LoadingSpinner />}>
+      {activeTab === "overview" && (
+        <OverviewTab snapshot={snapshot} loading={loading} error={error} />
+      )}
+      {activeTab === "repos" && <ReposTab />}
+      {activeTab === "events" && <EventsTab />}
+      {activeTab === "setup" && <SetupTab />}
+      {activeTab === "metrics" && <MetricsTab />}
+      {activeTab === "cache" && <CacheTab />}
+      {activeTab === "sessions" && <SessionsTab />}
+      {activeTab === "wiki" && <WikiTab />}
+      {activeTab === "turns" && <TurnsTab />}
+      {activeTab === "maintenance" && <MaintenanceTab />}
+      {activeTab === "memory-map" && <MemoryMapTab />}
+      {activeTab === "health" && <HealthTab />}
+    </React.Suspense>
+  );
+}
 
-const PRIMARY_TABS: TabDef[] = [
-	{ id: "overview", label: "Overview" },
-	{ id: "cache", label: "Cache" },
-	{ id: "sessions", label: "Sessions" },
-	{ id: "turns", label: "Turns" },
-	{ id: "health", label: "Health" },
-];
+function OldDashboard({
+  activeTab,
+  setActiveTab,
+  snapshot,
+  loading,
+  error,
+}: AppState & {
+  activeTab: TabId;
+  setActiveTab: (id: TabId) => void;
+}): React.ReactElement {
+  const tier = snapshot?.tier ?? "unknown";
+  const version = snapshot?.model?.name ?? "";
 
-const ADVANCED_TABS: TabDef[] = [
-	{ id: "repos", label: "Repos" },
-	{ id: "events", label: "Events" },
-	{ id: "setup", label: "Setup" },
-	{ id: "metrics", label: "Metrics" },
-	{ id: "topics", label: "Topics" },
-	{ id: "maintenance", label: "Maintenance" },
-	{ id: "memory-map", label: "Memory Map" },
-];
+  return (
+    <ErrorBoundary>
+      <div className="dashboard-app">
+        <header className="dashboard-header">
+          <h1>
+            mega-compact dashboard
+            <span className="tier">{tier}</span>
+            {version && <span className="version-pill">{version}</span>}
+          </h1>
+        </header>
+        <TabBar
+          primaryTabs={PRIMARY_TABS}
+          advancedTabs={ADVANCED_TABS}
+          advancedTabIds={advancedTabIds}
+          active={activeTab}
+          onTabChange={setActiveTab}
+        />
+        <main className="dashboard-content">
+          <TabContent activeTab={activeTab} snapshot={snapshot} loading={loading} error={error} />
+        </main>
+      </div>
+    </ErrorBoundary>
+  );
+}
 
-const advancedTabIds = new Set<TabId>(ADVANCED_TABS.map((t) => t.id));
+function NewDashboard({
+  activeTab,
+  setActiveTab,
+  snapshot,
+  loading,
+  error,
+}: AppState & {
+  activeTab: TabId;
+  setActiveTab: (id: TabId) => void;
+}): React.ReactElement {
+  return (
+    <ErrorBoundary>
+      <AppShell active={activeTab} onTabChange={setActiveTab} snapshot={snapshot}>
+        <TabContent activeTab={activeTab} snapshot={snapshot} loading={loading} error={error} />
+      </AppShell>
+    </ErrorBoundary>
+  );
+}
 
 export default function App(): React.ReactElement {
-	const [activeTab, setActiveTab] = useState<TabId>("overview");
-	const {
-		data: snapshot,
-		loading,
-		error,
-	} = useApi<SnapshotResponse>(
-		useCallback(() => fetchSnapshot(), []),
-		{
-			// Poll every 5s so Overview stays live without SSE. D1 will add retry/stale.
-			pollInterval: 5000,
-		},
-	);
+  const [activeTab, setActiveTab] = useState<TabId>("overview");
+  const {
+    data: snapshot,
+    loading,
+    error,
+  } = useApi<SnapshotResponse>(
+    useCallback(() => fetchSnapshot(), []),
+    {
+      // Poll every 5s so Overview stays live without SSE. D1 will add retry/stale.
+      pollInterval: 5000,
+    },
+  );
 
-	const tier = snapshot?.tier ?? "unknown";
-	const version = snapshot?.model?.name ?? "";
+  if (NEW_UI()) {
+    return (
+      <NewDashboard
+        activeTab={activeTab}
+        setActiveTab={setActiveTab}
+        snapshot={snapshot}
+        loading={loading}
+        error={error}
+      />
+    );
+  }
 
-	return (
-		<ErrorBoundary>
-			<div className="dashboard-app">
-				<header className="dashboard-header">
-					<h1>
-						mega-compact dashboard
-						<span className="tier">{tier}</span>
-						{version && <span className="version-pill">{version}</span>}
-					</h1>
-				</header>
-				<TabBar
-					primaryTabs={PRIMARY_TABS}
-					advancedTabs={ADVANCED_TABS}
-					advancedTabIds={advancedTabIds}
-					active={activeTab}
-					onTabChange={setActiveTab}
-				/>
-				<main className="dashboard-content">
-					<React.Suspense fallback={<LoadingSpinner />}>
-						{activeTab === "overview" && (
-							<OverviewTab
-								snapshot={snapshot}
-								loading={loading}
-								error={error}
-							/>
-						)}
-						{activeTab === "repos" && <ReposTab />}
-						{activeTab === "events" && <EventsTab />}
-						{activeTab === "setup" && <SetupTab />}
-						{activeTab === "metrics" && <MetricsTab />}
-						{activeTab === "cache" && <CacheTab />}
-						{activeTab === "sessions" && <SessionsTab />}
-						{activeTab === "topics" && <TopicsTab />}
-						{activeTab === "turns" && <TurnsTab />}
-						{activeTab === "maintenance" && <MaintenanceTab />}
-						{activeTab === "memory-map" && <MemoryMapTab />}
-						{activeTab === "health" && <HealthTab />}
-					</React.Suspense>
-				</main>
-			</div>
-		</ErrorBoundary>
-	);
+  return (
+    <OldDashboard
+      activeTab={activeTab}
+      setActiveTab={setActiveTab}
+      snapshot={snapshot}
+      loading={loading}
+      error={error}
+    />
+  );
 }

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

@@ -48,9 +48,18 @@ import type {
 	SetupConfigureResponse,
 	EmbedderHealthResponse,
 	RaptorTreeResponse,
-	RagSettingsResponse,
-	RagSettingsRequest,
-	RagSettingsResponsePost,
+	SettingsResponse,
+	SettingsUpdateRequest,
+	SettingsResponsePost,
+	RagMetricsResponse,
+	WikiIndexResponse,
+	WikiPageResponse,
+	CurationResult,
+	RenameTopicRequest,
+	MergeTopicsRequest,
+	SplitTopicRequest,
+	TopicTimelineResponse,
+	TopicEvolutionResponse,
 } from "@contracts";
 
 /** Error thrown when a dashboard API response is not 2xx. */
@@ -329,14 +338,104 @@ export function fetchEmbedderHealth(): Promise<EmbedderHealthResponse> {
 
 // ─── RAG Settings ─────────────────────────────────────────────────────
 
-/** GET /api/rag-settings — read the current state of all RAG feature flags. */
-export function fetchRagSettings(): Promise<RagSettingsResponse> {
-	return getJson<RagSettingsResponse>(ENDPOINTS.ragSettings.path);
+/** GET /api/rag-settings — read all adjustable settings grouped by category. */
+export function fetchSettings(): Promise<SettingsResponse> {
+	return getJson<SettingsResponse>(ENDPOINTS.ragSettings.path);
 }
 
-/** POST /api/rag-settings — toggle RAG feature flags (writes _DISABLED env vars). */
+/** POST /api/rag-settings — update a single setting (writes the env file). */
+export function postSetting(
+	body: SettingsUpdateRequest,
+): Promise<SettingsResponsePost> {
+	return postJson<SettingsResponsePost>(ENDPOINTS.ragSettingsUpdate.path, body);
+}
+
+/** @deprecated Use fetchSettings instead. */
+export function fetchRagSettings(): Promise<SettingsResponse> {
+	return fetchSettings();
+}
+
+/** @deprecated Use postSetting instead. */
 export function postRagSettings(
-	body: RagSettingsRequest,
-): Promise<RagSettingsResponsePost> {
-	return postJson<RagSettingsResponsePost>(ENDPOINTS.ragSettingsUpdate.path, body);
+	body: SettingsUpdateRequest,
+): Promise<SettingsResponsePost> {
+	return postSetting(body);
+}
+
+/** GET /api/rag-metrics — HyDE + recall-quality telemetry aggregates (H2). */
+export function fetchRagMetrics(): Promise<RagMetricsResponse> {
+	return getJson<RagMetricsResponse>(ENDPOINTS.ragMetrics.path);
+}
+
+// ─── Wiki Revival (W3) ────────────────────────────────────────────────
+
+/** GET /api/wiki/index — wiki landing (topics with resolved labels + badges). */
+export function fetchWikiIndex(): Promise<WikiIndexResponse> {
+	return getJson<WikiIndexResponse>(ENDPOINTS.wikiIndex.path);
+}
+
+/** GET /api/wiki/topic/:topicId — single topic page + provenance. */
+export function fetchWikiTopic(topicId: string): Promise<WikiPageResponse> {
+	return getJson<WikiPageResponse>(
+		ENDPOINTS.wikiTopic.path.replace(
+			":topicId",
+			encodeURIComponent(topicId),
+		),
+	);
+}
+
+/** PUT /api/wiki/topic/:topicId/label — rename a topic (user curation). */
+export function renameTopic(
+	topicId: string,
+	label: string,
+): Promise<CurationResult> {
+	return putJson<CurationResult>(
+		ENDPOINTS.renameTopic.path.replace(
+			":topicId",
+			encodeURIComponent(topicId),
+		),
+		{ label } satisfies RenameTopicRequest,
+	);
+}
+
+/** POST /api/wiki/merge — merge source topic into target. */
+export function mergeTopics(
+	sourceTopicId: string,
+	targetTopicId: string,
+): Promise<CurationResult> {
+	return postJson<CurationResult>(ENDPOINTS.mergeTopics.path, {
+		sourceTopicId,
+		targetTopicId,
+	} satisfies MergeTopicsRequest);
+}
+
+/** POST /api/wiki/topic/:topicId/split — carve listed memories into a new topic. */
+export function splitTopic(
+	topicId: string,
+	memoryIds: string[],
+): Promise<CurationResult> {
+	return postJson<CurationResult>(
+		ENDPOINTS.splitTopic.path.replace(
+			":topicId",
+			encodeURIComponent(topicId),
+		),
+		{ memoryIds } satisfies SplitTopicRequest,
+	);
+}
+
+/** GET /api/wiki/topic/:topicId/timeline — per-topic memory-addition buckets. */
+export function fetchTopicTimeline(
+	topicId: string,
+): Promise<TopicTimelineResponse> {
+	return getJson<TopicTimelineResponse>(
+		ENDPOINTS.topicTimeline.path.replace(
+			":topicId",
+			encodeURIComponent(topicId),
+		),
+	);
+}
+
+/** GET /api/wiki/evolution — global D3 topic-evolution graph feed. */
+export function fetchTopicEvolution(): Promise<TopicEvolutionResponse> {
+	return getJson<TopicEvolutionResponse>(ENDPOINTS.topicEvolution.path);
 }

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

@@ -10,6 +10,7 @@
 import type React from "react";
 import type { ServerEntry } from "@contracts";
 import { fmtTokens } from "@/utils/format.ts";
+import { Card, CardContent } from "../components/ui/card";
 
 export interface ActiveReposTableProps {
 	servers: ServerEntry[];
@@ -44,18 +45,24 @@ export function ActiveReposTable({
 	servers,
 }: ActiveReposTableProps): React.ReactElement {
 	return (
-		<div className="active-repos-section">
-			<p className="legend-note">
+		<Card>
+			<CardContent>
+			<p className="mb-3 text-xs text-muted-foreground">
 				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">
+			<div className="overflow-x-auto">
+				<table className="w-full border-collapse text-sm">
 					<thead>
 						<tr>
 							{HEADERS.map((h, i) => (
-								<th key={h} className={i >= 3 && i !== 4 ? "num" : undefined}>
+								<th
+									key={h}
+									className={`border-b border-border px-3 py-2 text-left font-medium text-muted-foreground${
+										i >= 3 && i !== 4 ? " text-right" : ""
+									}`}
+								>
 									{h}
 								</th>
 							))}
@@ -64,7 +71,7 @@ export function ActiveReposTable({
 					<tbody>
 						{servers.length === 0 && (
 							<tr>
-								<td colSpan={HEADERS.length} className="repo-empty">
+								<td colSpan={HEADERS.length} className="px-3 py-4 text-muted-foreground">
 									No active repositories.
 								</td>
 							</tr>
@@ -132,6 +139,7 @@ export function ActiveReposTable({
 					</tbody>
 				</table>
 			</div>
-		</div>
+			</CardContent>
+		</Card>
 	);
 }

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

@@ -10,6 +10,7 @@
 
 import type React from "react";
 import type { ActiveSession, SessionSeries } from "@contracts";
+import { Card, CardContent } from "../components/ui/card";
 
 export interface ActiveSessionsTableProps {
 	/** Active sessions, sorted by lastSeen descending (from /api/sessions). */
@@ -123,63 +124,74 @@ export function ActiveSessionsTable({
 	const now = Date.now();
 
 	return (
-		<div className="sessions-table-scroll">
-			<table className="sessions-table">
-				<thead>
-					<tr>
-						{HEADERS.map((h, i) => (
-							<th
-								key={h}
-								className={i >= 3 && i !== 6 ? "num" : undefined}
-							>
-								{h}
-							</th>
-						))}
-					</tr>
-				</thead>
-				<tbody>
-					{sessions.length === 0 && (
-						<tr className="sessions-empty-row">
-							<td colSpan={HEADERS.length}>No active sessions.</td>
-						</tr>
-					)}
-					{sessions.map((s) => {
-						const srs = seriesById.get(s.sessionId);
-						const sparkPts =
-							srs?.data.map((d) => d.tokens) ?? [];
-						const color = srs?.color ?? "#58a6ff";
-						return (
-							<tr key={`${s.pid}:${s.sessionId}`}>
-								<td className="num">{s.pid}</td>
-								<td title={s.repoRoot ?? undefined}>
-									{s.displayName || s.repoRoot || "\u2014"}
-								</td>
-								<td>{s.model ?? "\u2014"}</td>
-								<td className="num">
-									<span className={`sessions-pct-pill ${pctClass(s.percent)}`}>
-										{fmtPct(s.percent)}
-									</span>
-								</td>
-								<td className="num">
-									{fmtWindow(s.tokens, s.ctxWindow)}
-								</td>
-								<td className="num">{fmtAge(now - s.lastSeen)}</td>
-								<td
-									title={s.stateDir ?? undefined}
-									className="sessions-meta"
+		<Card>
+			<CardContent>
+			<div className="overflow-x-auto">
+				<table className="w-full border-collapse text-sm">
+					<thead>
+						<tr>
+							{HEADERS.map((h, i) => (
+								<th
+									key={h}
+									className={`border-b border-border px-3 py-2 text-left font-medium text-muted-foreground${
+										i >= 3 && i !== 6 ? " text-right" : ""
+									}`}
 								>
-									{s.stateDir
-										? s.stateDir.split("/").pop() || s.stateDir
-										: "\u2014"}
-								</td>
-								<td>
-									<Sparkline points={sparkPts} color={color} />
+									{h}
+								</th>
+							))}
+						</tr>
+					</thead>
+					<tbody>
+						{sessions.length === 0 && (
+							<tr>
+								<td colSpan={HEADERS.length} className="px-3 py-4 text-muted-foreground">
+									No active sessions.
 								</td>
 							</tr>
-						);
-					})}
-				</tbody>
-			</table>
-		</div>
+						)}
+						{sessions.map((s) => {
+							const srs = seriesById.get(s.sessionId);
+							const sparkPts =
+								srs?.data.map((d) => d.tokens) ?? [];
+							const color = srs?.color ?? "#58a6ff";
+							return (
+								<tr
+									key={`${s.pid}:${s.sessionId}`}
+									className="border-b border-border/50 hover:bg-bg-elevated/40"
+								>
+									<td className="px-3 py-2 text-right font-mono">{s.pid}</td>
+									<td className="px-3 py-2" title={s.repoRoot ?? undefined}>
+										{s.displayName || s.repoRoot || "\u2014"}
+									</td>
+									<td className="px-3 py-2">{s.model ?? "\u2014"}</td>
+									<td className="px-3 py-2 text-right">
+										<span className={`sessions-pct-pill ${pctClass(s.percent)}`}>
+											{fmtPct(s.percent)}
+										</span>
+									</td>
+									<td className="px-3 py-2 text-right">
+										{fmtWindow(s.tokens, s.ctxWindow)}
+									</td>
+									<td className="px-3 py-2 text-right">{fmtAge(now - s.lastSeen)}</td>
+									<td
+										title={s.stateDir ?? undefined}
+										className="px-3 py-2 font-mono text-muted-foreground"
+									>
+										{s.stateDir
+											? s.stateDir.split("/").pop() || s.stateDir
+											: "\u2014"}
+									</td>
+									<td className="px-3 py-2">
+										<Sparkline points={sparkPts} color={color} />
+									</td>
+								</tr>
+							);
+						})}
+					</tbody>
+				</table>
+			</div>
+			</CardContent>
+		</Card>
 	);
 }

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

@@ -12,6 +12,7 @@
 
 import type React from "react";
 import type { PerfResponse, CacheHitSample } from "@contracts";
+import { Card, CardContent, CardHeader, CardTitle } from "../components/ui/card";
 
 export interface CacheHitRateTrendCardProps {
 	perf: PerfResponse;
@@ -45,19 +46,21 @@ export const CacheHitRateTrendCard: React.FC<CacheHitRateTrendCardProps> = ({
 		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>
-
+		<Card className="electric-hover">
+			<CardHeader>
+				<CardTitle>Cache Hit-Rate Trend</CardTitle>
+			</CardHeader>
+			<CardContent>
 			{/* Metric summary */}
-			<div className="ov-perf-summary">
-				<div className="ov-perf-stat">
-					Avg: <strong>{fmtPct(c.avg)}</strong>
+			<div className="mb-3 flex gap-4 text-sm text-muted-foreground">
+				<div>
+					Avg: <strong className="text-foreground">{fmtPct(c.avg)}</strong>
 				</div>
-				<div className="ov-perf-stat">
-					Latest: <strong>{fmtPct(c.latest)}</strong>
+				<div>
+					Latest: <strong className="text-foreground">{fmtPct(c.latest)}</strong>
 				</div>
-				<div className="ov-perf-stat">
-					Samples: <strong>{c.n}</strong>
+				<div>
+					Samples: <strong className="text-foreground">{c.n}</strong>
 				</div>
 			</div>
 
@@ -83,7 +86,7 @@ export const CacheHitRateTrendCard: React.FC<CacheHitRateTrendCardProps> = ({
 							);
 						})}
 					</div>
-					<div className="ov-card-footer">
+					<div className="mt-1 text-xs text-muted-foreground">
 						{samples.length} sample{samples.length !== 1 ? "s" : ""} over{" "}
 						{samples.length > 1
 							? `${Math.round(
@@ -93,8 +96,9 @@ export const CacheHitRateTrendCard: React.FC<CacheHitRateTrendCardProps> = ({
 					</div>
 				</>
 			) : (
-				<div className="ov-empty-state">No cache-hit samples yet</div>
+				<div className="text-sm text-muted-foreground">No cache-hit samples yet</div>
 			)}
-		</div>
+			</CardContent>
+		</Card>
 	);
 };