pi-mega-compact 0.13.0 → 0.13.2

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

@@ -1,497 +1,28 @@
 /**
- * dashboard-client/src/tabs/SetupTab.tsx — Setup wizard tab (P0b).
+ * dashboard-client/src/tabs/SetupTab.tsx — Setup wizard tab shell (P0b).
  *
- * Shows current embedder configuration, warns about trigram recall quality,
- * and mirrors the /megasetup command with detection results.
+ * Sub-tab shell routing between Embedder / Config / Game Mode / Achievements.
+ * The embedder setup section lives in SetupTab/EmbedderSetup.tsx.
  *
  * PREVENT-PI-004: all data comes from localhost dashboard API endpoints —
  * no external network calls.
  */
-
 import type React from "react";
-import { useState, useEffect, useCallback } from "react";
-import type { SetupStatusResponse, SetupDetectResponse, SetupConfigureResponse } from "@contracts";
-import { fetchSetupStatus, fetchSetupDetect, configureEmbedder } from "../api/client";
+import { useState } from "react";
 import GameTab from "./GameTab";
 import AchievementsTab from "./AchievementsTab";
-
-// ---------------------------------------------------------------------------
-// Style constants
-// ---------------------------------------------------------------------------
-
-const styles: Record<string, React.CSSProperties> = {
-	container: {
-		padding: "1rem",
-		maxWidth: "720px",
-		margin: "0 auto",
-		fontFamily: "system-ui, sans-serif",
-		color: "#e0e0e0",
-	},
-	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" },
-	warning: {
-		background: "#3a2a00",
-		border: "1px solid #665500",
-		borderRadius: "8px",
-		padding: "0.75rem",
-		marginTop: "0.5rem",
-		color: "#ffcc00",
-		fontSize: "0.85rem",
-	},
-	badge: {
-		display: "inline-block",
-		padding: "0.15rem 0.5rem",
-		borderRadius: "4px",
-		fontSize: "0.8rem",
-		fontWeight: 600,
-		marginLeft: "0.5rem",
-	},
-	detectRow: {
-		display: "flex",
-		justifyContent: "space-between",
-		alignItems: "center",
-		padding: "0.5rem 0",
-		borderBottom: "1px solid #2a2a4e",
-	},
-	button: {
-		background: "#3a5a9f",
-		color: "#fff",
-		border: "none",
-		borderRadius: "6px",
-		padding: "0.5rem 1rem",
-		cursor: "pointer",
-		fontSize: "0.9rem",
-		fontWeight: 600,
-	},
+import ConfigTab from "./ConfigTab";
+import EmbedderSetup from "./SetupTab/EmbedderSetup";
+
+const containerStyle: React.CSSProperties = {
+	padding: "1rem",
+	maxWidth: "720px",
+	margin: "0 auto",
+	fontFamily: "system-ui, sans-serif",
+	color: "#e0e0e0",
 };
 
-// ---------------------------------------------------------------------------
-// SetupTab component
-// ---------------------------------------------------------------------------
-
-export function EmbedderSetup(): React.ReactElement {
-	const [status, setStatus] = useState<SetupStatusResponse | null>(null);
-	const [detect, setDetect] = useState<SetupDetectResponse | null>(null);
-	const [statusError, setStatusError] = useState<string | null>(null);
-	const [detectError, setDetectError] = useState<string | null>(null);
-	const [runningDetect, setRunningDetect] = useState(false);
-	const [configuring, setConfiguring] = useState<string | null>(null);
-	const [configResult, setConfigResult] = useState<SetupConfigureResponse | null>(null);
-	const [configError, setConfigError] = useState<string | null>(null);
-	const [customUrl, setCustomUrl] = useState("");
-
-	const loadStatus = useCallback(() => {
-		fetchSetupStatus()
-			.then(setStatus)
-			.catch((e: unknown) =>
-				setStatusError(e instanceof Error ? e.message : String(e)),
-			);
-	}, []);
-
-	const applyEmbedder = useCallback((embedder: "ollama" | "llama" | "trigram" | "custom", url?: string) => {
-		setConfiguring(embedder);
-		setConfigError(null);
-		setConfigResult(null);
-		configureEmbedder({ embedder, url })
-			.then((r) => {
-				setConfigResult(r);
-				setConfiguring(null);
-				loadStatus();
-			})
-			.catch((e: unknown) => {
-				setConfigError(e instanceof Error ? e.message : String(e));
-				setConfiguring(null);
-			});
-	}, [loadStatus]);
-
-	const runDetect = useCallback(() => {
-		setRunningDetect(true);
-		setDetectError(null);
-		fetchSetupDetect()
-			.then((d) => {
-				setDetect(d);
-				setRunningDetect(false);
-			})
-			.catch((e: unknown) => {
-				setDetectError(e instanceof Error ? e.message : String(e));
-				setRunningDetect(false);
-			});
-	}, []);
-
-	useEffect(() => {
-		loadStatus();
-	}, [loadStatus]);
-
-	// Poll status every 30s
-	useEffect(() => {
-		const id = setInterval(loadStatus, 30000);
-		return () => clearInterval(id);
-	}, [loadStatus]);
-
-	// -----------------------------------------------------------------------
-	// Render helpers
-	// -----------------------------------------------------------------------
-
-	const embedderLabel = (e: string): string => {
-		switch (e) {
-			case "trigram":
-				return "TrigramEmbedder (heuristic, default)";
-			case "http":
-				return "HTTP Embedder (BYO localhost)";
-			case "minilm":
-				return "MiniLM (experimental)";
-			default:
-				return "Unknown";
-		}
-	};
-
-	const trigramWarning = status?.currentEmbedder === "trigram" && (
-		<div style={styles.warning}>
-			<strong>Note:</strong> TrigramEmbedder is a heuristic-strength default
-			embedder. It works without any setup but recall quality may be lower
-			than a dedicated embedding backend. If you notice poor recall results,
-			consider installing Ollama and running the{" "}
-			<code>/megasetup</code> command, or set{" "}
-			<code>MEGACOMPACT_EMBEDDING_URL</code> to point at your own localhost
-			embedding server.
-		</div>
-	);
-
-	const detectBadge = (installed: boolean): React.ReactElement => {
-		const bg = installed ? "#1a5a1a" : "#3a1a1a";
-		const color = installed ? "#4caf50" : "#f44336";
-		return (
-			<span style={{ ...styles.badge, background: bg, color }}>
-				{installed ? "Detected" : "Not found"}
-			</span>
-		);
-	};
-
-	// -----------------------------------------------------------------------
-	// Main render
-	// -----------------------------------------------------------------------
-
-	return (
-		<div style={styles.container}>
-			<h2 style={{ fontSize: "1.3rem", marginTop: 0, marginBottom: "1rem" }}>
-				Embedder Setup
-			</h2>
-
-			{/* Current Config Section */}
-			<div style={styles.section}>
-				<h3 style={styles.sectionTitle}>Current Embedder Configuration</h3>
-				{statusError && (
-					<p style={{ color: "#f44336", fontSize: "0.85rem" }}>
-						Error: {statusError}
-					</p>
-				)}
-				{status && (
-					<>
-						<div style={styles.row}>
-							<span style={styles.label}>Active Embedder:</span>
-							<span style={styles.value}>
-								{embedderLabel(status.currentEmbedder)}
-							</span>
-						</div>
-						{"configuredEmbedder" in status && status.configuredEmbedder !== status.currentEmbedder && (
-							<div style={styles.warning}>
-								<strong>Configured but not active:</strong>{" "}
-								{embedderLabel(status.configuredEmbedder)} is configured in
-								.mega-compact.env but not yet loaded.{" "}
-								<strong>Restart pi</strong> to activate it.
-								{status.configuredUrl && (
-									<> ({status.configuredUrl})</>
-								)}
-							</div>
-						)}
-						{"restartRequired" in status && status.restartRequired && (
-							<div style={{ ...styles.row, color: "#ff9800" }}>
-								<span style={styles.label}>Status:</span>
-								<span style={styles.value}>
-									Restart required to activate the configured embedder
-								</span>
-							</div>
-						)}
-						<div style={styles.row}>
-							<span style={styles.label}>Embedding URL:</span>
-							<span style={styles.value}>
-								{status.embeddingUrl ?? (
-									<span style={{ color: "#888" }}>not set</span>
-								)}
-							</span>
-						</div>
-						<div style={styles.row}>
-							<span style={styles.label}>Embed Cache:</span>
-							<span style={styles.value}>
-								{status.embedCache ?? (
-									<span style={{ color: "#888" }}>not set</span>
-								)}
-							</span>
-						</div>
-						<div style={styles.row}>
-							<span style={styles.label}>MiniLM:</span>
-							<span style={styles.value}>{status.minilm ? "enabled" : "disabled"}</span>
-						</div>
-						{trigramWarning}
-					</>
-				)}
-				{!status && !statusError && (
-					<p style={{ color: "#888", fontSize: "0.85rem" }}>
-						Loading configuration...
-					</p>
-				)}
-			</div>
-
-			{/* Detection Section */}
-			<div style={styles.section}>
-				<h3 style={styles.sectionTitle}>Local Embedder Detection</h3>
-				<p style={{ fontSize: "0.85rem", color: "#a0a0c0", marginTop: 0 }}>
-					Detect which local embedding backends are available on this machine.
-					No software is installed — detection only.
-				</p>
-
-				{detect && (
-					<>
-						{/* Ollama */}
-						<div style={styles.detectRow}>
-							<span>
-								<strong>Ollama</strong>
-							</span>
-							{detect.ollama !== null ? (
-								<span>
-									{detectBadge(detect.ollama.installed)}
-									{detect.ollama.installed && (
-										<span style={{ fontSize: "0.8rem", color: "#a0a0c0", marginLeft: "0.5rem" }}>
-											{detect.ollama.running
-												? `server running, ${detect.ollama.models.length} model(s)`
-												: "server not running"}
-										</span>
-									)}
-								</span>
-							) : (
-								<span style={{ color: "#888", fontSize: "0.85rem" }}>
-									not checked
-								</span>
-							)}
-						</div>
-
-						{/* llama.cpp */}
-						<div style={styles.detectRow}>
-							<span>
-								<strong>llama.cpp</strong>
-							</span>
-							{detect.llamaCpp !== null ? (
-								<span>
-									{detectBadge(detect.llamaCpp.installed)}
-									{detect.llamaCpp.installed && detect.llamaCpp.detail && (
-										<span style={{ fontSize: "0.8rem", color: "#a0a0c0", marginLeft: "0.5rem" }}>
-											{detect.llamaCpp.detail}
-										</span>
-									)}
-								</span>
-							) : (
-								<span style={{ color: "#888", fontSize: "0.85rem" }}>
-									not checked
-								</span>
-							)}
-						</div>
-
-						{/* ONNX */}
-						<div style={styles.detectRow}>
-							<span>
-								<strong>ONNX Runtime</strong>
-							</span>
-							{detect.onnx !== null ? (
-								<span>
-									{detectBadge(detect.onnx.installed)}
-									{detect.onnx.installed && detect.onnx.detail && (
-										<span style={{ fontSize: "0.8rem", color: "#a0a0c0", marginLeft: "0.5rem" }}>
-											{detect.onnx.detail}
-										</span>
-									)}
-								</span>
-							) : (
-								<span style={{ color: "#888", fontSize: "0.85rem" }}>
-									not checked
-								</span>
-							)}
-						</div>
-
-						{detect.error && (
-							<p style={{ color: "#f44336", fontSize: "0.8rem", marginTop: "0.5rem" }}>
-								Detection error: {detect.error}
-							</p>
-						)}
-					</>
-				)}
-
-				{detectError && (
-					<p style={{ color: "#f44336", fontSize: "0.85rem" }}>
-						Error: {detectError}
-					</p>
-				)}
-
-				<div style={{ marginTop: "1rem" }}>
-					<button
-						style={styles.button}
-						onClick={runDetect}
-						disabled={runningDetect}
-					>
-						{runningDetect ? "Detecting..." : "Run Detection"}
-					</button>
-					<span style={{ fontSize: "0.8rem", color: "#888", marginLeft: "0.75rem" }}>
-						Or run <code>/megasetup</code> in the chat for an interactive wizard.
-					</span>
-				</div>
-
-				{/* Configure buttons — appear after detection runs */}
-				{detect && (
-					<div style={{ marginTop: "1rem", paddingTop: "0.75rem", borderTop: "1px solid #2a2a4e" }}>
-						<div style={{ fontSize: "0.9rem", fontWeight: 600, marginBottom: "0.5rem" }}>
-							Configure
-						</div>
-						<div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap" }}>
-							<button
-								style={{ ...styles.button, opacity: detect.ollama?.installed ? 1 : 0.4 }}
-								onClick={() => applyEmbedder("ollama")}
-								disabled={!detect.ollama?.installed || configuring !== null}
-							>
-								{configuring === "ollama" ? "Writing..." : "Use Ollama"}
-							</button>
-							<button
-								style={{ ...styles.button, opacity: detect.llamaCpp?.installed ? 1 : 0.4 }}
-								onClick={() => applyEmbedder("llama")}
-								disabled={!detect.llamaCpp?.installed || configuring !== null}
-							>
-								{configuring === "llama" ? "Writing..." : "Use llama.cpp"}
-							</button>
-							<button
-								style={{ ...styles.button, background: "#444" }}
-								onClick={() => applyEmbedder("trigram")}
-								disabled={configuring !== null}
-							>
-								{configuring === "trigram" ? "Writing..." : "Use Trigram (default)"}
-							</button>
-						</div>
-						{configResult && (
-							<div style={styles.warning}>
-								{configResult.alreadyActive
-									? "Already active — no restart needed."
-									: `Configured ${configResult.embedder}. Restart pi to activate (config written to ${configResult.envPath}).`}
-							</div>
-						)}
-						{configError && (
-							<p style={{ color: "#f44336", fontSize: "0.85rem", marginTop: "0.5rem" }}>
-								Configure error: {configError}
-							</p>
-						)}
-					</div>
-				)}
-			</div>
-
-			{/* Custom (remote) embedder — third-party / hosted endpoint */}
-			<div style={styles.section}>
-				<h3 style={styles.sectionTitle}>Custom Endpoint (remote / third-party)</h3>
-				<p style={{ fontSize: "0.85rem", color: "#a0a0c0", marginTop: 0 }}>
-					Point at any OpenAI-compatible embeddings API or hosted endpoint.
-					This opts in to a non-loopback connection (sets{" "}
-					<code>MEGACOMPACT_ALLOW_REMOTE_EMBEDDER=1</code>) — your prompts'
-					embedding requests will be sent to the URL you enter. Default is
-					loopback-only.
-				</p>
-				<div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap", alignItems: "center" }}>
-					<input
-						type="url"
-						placeholder="https://api.example.com/v1/embeddings"
-						value={customUrl}
-						onChange={(e) => setCustomUrl(e.target.value)}
-						style={{
-							flex: "1 1 300px",
-							background: "#12122a",
-							color: "#e0e0e0",
-							border: "1px solid #2a2a4e",
-							borderRadius: "6px",
-							padding: "0.4rem 0.6rem",
-							fontSize: "0.85rem",
-							fontFamily: "monospace",
-						}}
-					/>
-					<button
-						style={{ ...styles.button, opacity: customUrl ? 1 : 0.4 }}
-						onClick={() => applyEmbedder("custom", customUrl)}
-						disabled={!customUrl || configuring !== null}
-					>
-						{configuring === "custom" ? "Writing..." : "Use Custom URL"}
-					</button>
-				</div>
-				<div style={styles.warning}>
-					<strong>Heads up:</strong> a remote endpoint receives the text you embed
-					(it does NOT receive your full conversation — only the strings passed to
-					<code> embed()</code> for recall/dedup). Verify the endpoint's privacy
-					policy before use.
-				</div>
-			</div>
-
-			{/* Help Section */}
-			<div style={styles.section}>
-				<h3 style={styles.sectionTitle}>How to Upgrade</h3>
-				<ul style={{ fontSize: "0.85rem", lineHeight: 1.6, paddingLeft: "1.25rem" }}>
-					<li>
-						<strong>Ollama:</strong> Install from{" "}
-						<a
-							href="https://ollama.com"
-							style={{ color: "#6a9fff" }}
-							target="_blank"
-							rel="noopener noreferrer"
-						>
-							ollama.com
-						</a>
-						, then <code>ollama pull nomic-embed-text</code> and restart pi.
-						Set <code>MEGACOMPACT_EMBEDDING_URL=http://localhost:11434/api/embeddings</code>.
-					</li>
-					<li>
-						<strong>llama.cpp:</strong> Build or install llama.cpp, run{" "}
-						<code>llama-server</code> with an embedding model, and set
-						the URL accordingly.
-					</li>
-					<li>
-						<strong>ONNX Runtime:</strong> Install{" "}
-						<code>onnxruntime-node</code> in the project root. Not yet
-						integrated — see docs for manual setup.
-					</li>
-				</ul>
-			</div>
-		</div>
-	);
-}
-
-
-// ---------------------------------------------------------------------------
-// SetupTab shell — sub-tabs for Embedder / Game Mode / Achievements.
-// Game + Achievements moved here from the top-level tab bar (audit #9: 15 tabs
-// was too many; the novelty surfaces crowd the bar for the 95% who don't use
-// them). The sub-tab nav reuses the inline-style approach of the embedder
-// section for visual consistency.
-// ---------------------------------------------------------------------------
-
-type SetupSubTab = "embedder" | "game" | "achievements";
+type SetupSubTab = "embedder" | "config" | "game" | "achievements";
 
 const subTabNavStyle: React.CSSProperties = {
 	display: "flex",
@@ -519,7 +50,7 @@ export default function SetupTab(): React.ReactElement {
 	const [subTab, setSubTab] = useState<SetupSubTab>("embedder");
 
 	return (
-		<div style={styles.container}>
+		<div style={containerStyle}>
 			<nav style={subTabNavStyle} aria-label="Setup sections">
 				<button
 					type="button"
@@ -528,6 +59,13 @@ export default function SetupTab(): React.ReactElement {
 				>
 					Embedder
 				</button>
+				<button
+					type="button"
+					style={subTabBtnStyle(subTab === "config")}
+					onClick={() => setSubTab("config")}
+				>
+					Config
+				</button>
 				<button
 					type="button"
 					style={subTabBtnStyle(subTab === "game")}
@@ -545,6 +83,7 @@ export default function SetupTab(): React.ReactElement {
 			</nav>
 
 			{subTab === "embedder" && <EmbedderSetup />}
+			{subTab === "config" && <ConfigTab />}
 			{subTab === "game" && <GameTab />}
 			{subTab === "achievements" && <AchievementsTab />}
 		</div>

package/extensions/dashboard-server/api-contracts/embedder-health.ts

@@ -0,0 +1,32 @@
+/**
+ * api-contracts/embedder-health.ts — Embedder health probe response types.
+ *
+ * Types for the GET /api/embedder-health endpoint used by the dashboard Setup
+ * tab's EmbedderHealthCard. Describes the result of round-tripping a test
+ * embed through the active embedder (latency + dimensions + reachability).
+ *
+ * PREVENT-PI-004: type definitions only, no network code.
+ * PREVENT-011: no `any` type — all types are explicit.
+ */
+
+/**
+ * Response for GET /api/embedder-health.
+ * Probes the active embedder with a single test embed and reports reachability,
+ * latency, vector dimensionality, and a masked endpoint URL.
+ */
+export interface EmbedderHealthResponse {
+  /** Which embedder implementation is currently active in the running process. */
+  readonly activeEmbedder: "trigram" | "http" | "minilm" | "unknown";
+  /** "ok" — test embed succeeded; "unreachable" — endpoint not reachable (http
+   *  embedder); "error" — probe threw some other error. */
+  readonly status: "ok" | "unreachable" | "error";
+  /** Round-trip latency of the test embed in milliseconds. */
+  readonly latencyMs: number;
+  /** Vector dimensionality reported by the active embedder, or 0 on error. */
+  readonly dim: number;
+  /** Masked endpoint URL (scheme://hostname:port, secrets/paths stripped), or
+   *  null when no URL is configured. */
+  readonly url: string | null;
+  /** Error message when status is "unreachable" or "error", otherwise absent. */
+  readonly error?: string;
+}