pi-mega-compact 0.13.4 → 0.13.6

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

@@ -0,0 +1,198 @@
+/**
+ * SetupTab/SettingsPanel.tsx — comprehensive adjustable-settings panel.
+ *
+ * Renders every MEGACOMPACT_* setting from /api/rag-settings, grouped into
+ * collapsible categories. Each setting renders by type (boolean → Switch,
+ * number/string → styled input) and writes back via POST /api/rag-settings on
+ * change. Switches POST immediately; text/number inputs POST after a 500ms
+ * debounce. Requires-LLM settings show an amber badge when no LLM embedder is
+ * active. A restart-required toast appears after a successful write.
+ *
+ * PREVENT-PI-004: all data comes from localhost dashboard API endpoints.
+ */
+import type React from "react";
+import { useState, useEffect, useCallback, useRef } from "react";
+import type { SettingsResponse, SettingState } from "@contracts";
+import { fetchSettings, postSetting } from "../../api/client";
+import { Switch } from "../../components/ui/switch";
+import SettingsSection from "./SettingsSection";
+
+const INPUT_CLASS =
+	"rounded-md border border-border bg-bg-elevated/50 px-2 py-1 text-sm outline-none transition-colors focus:border-primary disabled:cursor-not-allowed disabled:opacity-50";
+
+function LlmBadge(): React.ReactElement {
+	return (
+		<span
+			className="ml-2 inline-flex items-center rounded-md border border-warning/40 bg-warning/15 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-warning"
+			title="Requires an LLM embedder (Ollama/HTTP) to be effective"
+		>
+			LLM
+		</span>
+	);
+}
+
+interface RowProps {
+	readonly setting: SettingState;
+	readonly id: string;
+	readonly llmActive: boolean;
+	readonly saving: boolean;
+	readonly onUpdate: (key: string, raw: string) => Promise<string | null>;
+}
+
+function SettingRow({
+	setting,
+	id,
+	llmActive,
+	saving,
+	onUpdate,
+}: RowProps): React.ReactElement {
+	const [error, setError] = useState<string | null>(null);
+	const locked = setting.requiresLlm && !llmActive;
+	const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+	useEffect(() => {
+		return () => {
+			if (timerRef.current) clearTimeout(timerRef.current);
+		};
+	}, []);
+
+	const submit = useCallback(
+		(raw: string) => {
+			onUpdate(setting.key, raw)
+				.then((msg) => setError(msg))
+				.catch((e: unknown) =>
+					setError(e instanceof Error ? e.message : String(e)),
+				);
+		},
+		[onUpdate, setting.key],
+	);
+
+	const scheduleSave = useCallback(
+		(raw: string) => {
+			if (timerRef.current) clearTimeout(timerRef.current);
+			timerRef.current = setTimeout(() => submit(raw), 500);
+		},
+		[submit],
+	);
+
+	const inputDisabled = saving || locked;
+
+	return (
+		<div className="py-2.5">
+			<div className="flex items-start justify-between gap-3">
+				<div>
+					<div className="flex items-center text-sm font-semibold text-foreground">
+						<label htmlFor={`${id}-input`} className="cursor-pointer">
+							{setting.label}
+						</label>
+						{setting.requiresLlm && !llmActive && <LlmBadge />}
+					</div>
+					<div className="mt-0.5 text-xs text-muted-foreground">
+						{setting.description}
+					</div>
+				</div>
+				<div className="flex shrink-0 items-center gap-2">
+					{setting.type === "boolean" ? (
+						<Switch
+							id={`${id}-input`}
+							checked={Boolean(setting.value)}
+							disabled={inputDisabled || locked}
+							onCheckedChange={(checked) => submit(String(checked))}
+							aria-label={setting.label}
+						/>
+					) : (
+						<>
+							<input
+								id={`${id}-input`}
+								type={setting.type === "number" ? "number" : "text"}
+								defaultValue={String(setting.value ?? "")}
+								min={setting.min}
+								max={setting.max}
+								disabled={inputDisabled}
+								onChange={(e) => scheduleSave(e.target.value)}
+								className={`${INPUT_CLASS} ${setting.type === "number" ? "w-24" : "w-56"}`}
+							/>
+							{setting.unit && (
+								<span className="text-xs text-muted-foreground">{setting.unit}</span>
+							)}
+						</>
+					)}
+				</div>
+			</div>
+			{error && <p className="mt-1 text-xs text-danger">Error: {error}</p>}
+		</div>
+	);
+}
+
+export default function SettingsPanel(): React.ReactElement {
+	const [settings, setSettings] = useState<SettingsResponse | null>(null);
+	const [error, setError] = useState<string | null>(null);
+	const [saving, setSaving] = useState(false);
+	const [toast, setToast] = useState<string | null>(null);
+
+	const load = useCallback(() => {
+		fetchSettings()
+			.then(setSettings)
+			.catch((e: unknown) =>
+				setError(e instanceof Error ? e.message : String(e)),
+			);
+	}, []);
+
+	useEffect(() => {
+		load();
+	}, [load]);
+
+	const handleUpdate = useCallback(
+		async (key: string, raw: string): Promise<string | null> => {
+			setSaving(true);
+			try {
+				const res = await postSetting({ key, value: raw });
+				setToast(
+					res.restartRequired
+						? "Saved — restart pi to apply changes."
+						: "Saved.",
+				);
+				// Refresh to pick up the server's normalized value (and to keep the
+				// controlled Switch in sync with the persisted state).
+				load();
+				return null;
+			} catch (e) {
+				return e instanceof Error ? e.message : String(e);
+			} finally {
+				setSaving(false);
+			}
+		},
+		[load],
+	);
+
+	return (
+		<div className="flex flex-col gap-3">
+			{error && <p className="text-sm text-danger">Error: {error}</p>}
+			{!settings && !error && (
+				<p className="text-sm text-muted-foreground">Loading settings...</p>
+			)}
+			{settings?.categories.map((cat) => (
+				<SettingsSection key={cat.name} title={cat.name}>
+					{cat.settings.map((setting) => (
+						<SettingRow
+							key={setting.key}
+							setting={setting}
+							id={`${cat.name.replace(/[^a-z0-9]+/gi, "-")}-${setting.key}`}
+							llmActive={settings.llmActive}
+							saving={saving}
+							onUpdate={handleUpdate}
+						/>
+					))}
+				</SettingsSection>
+			))}
+			{toast && (
+				<div
+					className="mt-1 rounded-md border border-warning/40 bg-warning/10 p-2 text-xs text-warning"
+					role="status"
+				>
+					{toast}
+				</div>
+			)}
+		</div>
+	);
+}

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

@@ -0,0 +1,50 @@
+/**
+ * SetupTab/SettingsSection.tsx — collapsible settings category section.
+ *
+ * Each category from /api/rag-settings renders as a <section> with a toggle
+ * button (aria-expanded + aria-controls) that shows/hides its setting rows.
+ * Matches the Sidebar collapsible-accessibility pattern.
+ */
+import type React from "react";
+import { useState } from "react";
+import { ChevronDown } from "lucide-react";
+import { cn } from "../../utils/cn";
+
+interface SettingsSectionProps {
+	readonly title: string;
+	readonly children: React.ReactNode;
+}
+
+export default function SettingsSection({
+	title,
+	children,
+}: SettingsSectionProps): React.ReactElement {
+	const [open, setOpen] = useState<boolean>(true);
+	const panelId = `settings-${title.toLowerCase().replace(/[^a-z0-9]+/g, "-")}`;
+
+	return (
+		<section className="overflow-hidden rounded-xl border border-border bg-bg-elevated/40">
+			<button
+				type="button"
+				onClick={() => setOpen((o) => !o)}
+				className="flex w-full items-center justify-between rounded-t-xl bg-bg-elevated/60 px-4 py-3 text-left text-sm font-semibold text-foreground transition-colors hover:bg-bg-elevated"
+				aria-expanded={open}
+				aria-controls={panelId}
+			>
+				<span>{title}</span>
+				<ChevronDown
+					className={cn(
+						"h-4 w-4 text-muted-foreground transition-transform",
+						open && "rotate-180",
+					)}
+					aria-hidden="true"
+				/>
+			</button>
+			{open && (
+				<div id={panelId} className="divide-y divide-border px-4 py-1">
+					{children}
+				</div>
+			)}
+		</section>
+	);
+}

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

@@ -13,73 +13,35 @@ import GameTab from "./GameTab";
 import AchievementsTab from "./AchievementsTab";
 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",
-};
+import { Toggle } from "../components/ui/toggle";
 
 type SetupSubTab = "embedder" | "config" | "game" | "achievements";
 
-const subTabNavStyle: React.CSSProperties = {
-	display: "flex",
-	gap: "0.5rem",
-	marginBottom: "1rem",
-	borderBottom: "1px solid #2a2a4e",
-	paddingBottom: "0.5rem",
-};
-
-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,
-	};
-}
+const SUB_TABS: ReadonlyArray<{ id: SetupSubTab; label: string }> = [
+	{ id: "embedder", label: "Embedder" },
+	{ id: "config", label: "Config" },
+	{ id: "game", label: "Game Mode" },
+	{ id: "achievements", label: "Achievements" },
+];
 
 export default function SetupTab(): React.ReactElement {
 	const [subTab, setSubTab] = useState<SetupSubTab>("embedder");
 
 	return (
-		<div style={containerStyle}>
-			<nav style={subTabNavStyle} aria-label="Setup sections">
-				<button
-					type="button"
-					style={subTabBtnStyle(subTab === "embedder")}
-					onClick={() => setSubTab("embedder")}
-				>
-					Embedder
-				</button>
-				<button
-					type="button"
-					style={subTabBtnStyle(subTab === "config")}
-					onClick={() => setSubTab("config")}
-				>
-					Config
-				</button>
-				<button
-					type="button"
-					style={subTabBtnStyle(subTab === "game")}
-					onClick={() => setSubTab("game")}
-				>
-					Game Mode
-				</button>
-				<button
-					type="button"
-					style={subTabBtnStyle(subTab === "achievements")}
-					onClick={() => setSubTab("achievements")}
-				>
-					Achievements
-				</button>
+		<div className="mx-auto flex max-w-3xl flex-col gap-4 p-4">
+			<nav
+				className="flex gap-2 border-b border-border pb-2"
+				aria-label="Setup sections"
+			>
+				{SUB_TABS.map((t) => (
+					<Toggle
+						key={t.id}
+						pressed={subTab === t.id}
+						onClick={() => setSubTab(t.id)}
+					>
+						{t.label}
+					</Toggle>
+				))}
 			</nav>
 
 			{subTab === "embedder" && <EmbedderSetup />}

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

@@ -12,6 +12,8 @@ import { useCallback, useMemo, useState } from "react";
 import { useApi } from "../hooks/useApi";
 import { fetchTopics, fetchTopicMemories } from "../api/client";
 import type { TopicsResponse, TopicMemoriesResponse } from "@contracts";
+import { Badge } from "../components/ui/badge";
+import { Card } from "../components/ui/card";
 
 function fmtTs(ms: number | null): string {
 	if (!ms) return "—";
@@ -48,33 +50,45 @@ export default function TopicsTab(): React.ReactElement {
 
 	if (error && !data) {
 		return (
-			<div className="tab-stub">Error loading topics: {error.message}</div>
+			<div className="rounded-lg border border-border bg-bg-card p-4 text-sm text-foreground">
+				Error loading topics: {error.message}
+			</div>
 		);
 	}
 	if (loading && !data) {
-		return <div className="tab-stub">Loading topics…</div>;
+		return (
+			<div className="rounded-lg border border-border bg-bg-card p-4 text-sm text-muted-foreground">
+				Loading topics…
+			</div>
+		);
 	}
 	if (!data) {
-		return <div className="tab-stub">No topic data available.</div>;
+		return (
+			<div className="rounded-lg border border-border bg-bg-card p-4 text-sm text-muted-foreground">
+				No topic data available.
+			</div>
+		);
 	}
 
 	if (data.totalTopics === 0) {
 		return (
-			<div className="tab-stub">
-				<h3>Wiki</h3>
-				<p>
+			<Card className="p-4">
+				<h3 className="font-heading text-lg font-semibold">Wiki</h3>
+				<p className="mt-2 text-sm">
 					No topics yet. Topics are auto-generated after every 3rd compaction
 					from real memory embeddings (k-means + TF-IDF).
 				</p>
-				<p>Check back after a few more compaction cycles.</p>
-			</div>
+				<p className="mt-2 text-sm text-muted-foreground">
+					Check back after a few more compaction cycles.
+				</p>
+			</Card>
 		);
 	}
 
 	return (
-		<div className="tab-content topics-tab">
-			<h3>Wiki</h3>
-			<p className="subtitle">
+		<div className="flex flex-col gap-4">
+			<h3 className="font-heading text-lg font-semibold">Wiki</h3>
+			<p className="text-sm text-muted-foreground">
 				{data.totalTopics} topic{data.totalTopics !== 1 ? "s" : ""} ·{" "}
 				{data.totalAssigned} assigned memori
 				{data.totalAssigned !== 1 ? "es" : "y"}
@@ -85,87 +99,105 @@ export default function TopicsTab(): React.ReactElement {
 
 			<input
 				type="search"
-				className="topics-search"
+				className="mb-1 w-full max-w-sm rounded-md border border-border bg-bg-elevated/50 px-3 py-2 text-sm outline-none transition-colors focus:border-primary"
 				placeholder="Filter topics by label or term…"
 				value={query}
 				onChange={(e) => setQuery(e.target.value)}
 			/>
 
 			{drillTopicId && (
-				<section className="topic-drilldown">
-					<h4>
+				<Card>
+					<h4 className="flex items-center gap-2 font-heading text-base font-semibold">
 						<button
 							type="button"
-							className="link-btn"
+							className="text-sm text-muted-foreground transition-colors hover:text-foreground"
 							onClick={() => setDrillTopicId(null)}
 						>
 							← back
-						</button>{" "}
+						</button>
 						Topic <code>{drillTopicId}</code>
 						{drill.data && <> · {drill.data.label}</>}
 						{drill.data && <> · {drill.data.assignments.length} memories</>}
 					</h4>
 					{drill.error ? (
-						<div className="tab-stub">
+						<div className="mt-2 text-sm text-foreground">
 							Error: {(drill.error as Error).message}
 						</div>
 					) : drill.loading && !drill.data ? (
-						<div className="tab-stub">Loading memories…</div>
+						<div className="mt-2 text-sm text-muted-foreground">
+							Loading memories…
+						</div>
 					) : drill.data ? (
-						<table className="data-table">
+						<table className="mt-2 w-full border-collapse text-sm">
 							<thead>
 								<tr>
-									<th>Memory id</th>
-									<th>Confidence</th>
-									<th>Assigned</th>
+									<th className="border-b border-border px-3 py-2 text-left font-medium text-muted-foreground">
+										Memory id
+									</th>
+									<th className="border-b border-border px-3 py-2 text-left font-medium text-muted-foreground">
+										Confidence
+									</th>
+									<th className="border-b border-border px-3 py-2 text-left font-medium text-muted-foreground">
+										Assigned
+									</th>
 								</tr>
 							</thead>
 							<tbody>
 								{drill.data.assignments.map((a) => (
-									<tr key={a.memoryId}>
-										<td>
+									<tr key={a.memoryId} className="border-b border-border/50">
+										<td className="px-3 py-2">
 											<code>{a.memoryId}</code>
 										</td>
-										<td>
+										<td className="px-3 py-2">
 											{a.confidence != null ? a.confidence.toFixed(2) : "—"}
 										</td>
-										<td>{fmtTs(a.assignedAt)}</td>
+										<td className="px-3 py-2">{fmtTs(a.assignedAt)}</td>
 									</tr>
 								))}
 							</tbody>
 						</table>
 					) : null}
-				</section>
+				</Card>
 			)}
 
 			{!drillTopicId && (
-				<table className="data-table">
+				<table className="w-full border-collapse text-sm">
 					<thead>
 						<tr>
-							<th>Label</th>
-							<th>Memories</th>
-							<th>Top Terms</th>
-							<th></th>
+							<th className="border-b border-border px-3 py-2 text-left font-medium text-muted-foreground">
+								Label
+							</th>
+							<th className="border-b border-border px-3 py-2 text-left font-medium text-muted-foreground">
+								Memories
+							</th>
+							<th className="border-b border-border px-3 py-2 text-left font-medium text-muted-foreground">
+								Top Terms
+							</th>
+							<th className="border-b border-border px-3 py-2 text-right font-medium text-muted-foreground"></th>
 						</tr>
 					</thead>
 					<tbody>
 						{filtered.map((t) => (
 							<tr
 								key={t.id}
-								className="topic-row"
+								className="cursor-pointer border-b border-border/50 transition-colors hover:bg-bg-elevated/40"
 								onClick={() => setDrillTopicId(t.id)}
-								style={{ cursor: "pointer" }}
 							>
-								<td className="topic-label">{t.label}</td>
-								<td className="topic-count">{t.memoryCount}</td>
-								<td className="topic-terms">
+								<td className="px-3 py-2 font-semibold">{t.label}</td>
+								<td className="px-3 py-2">
+									<Badge variant="accent">{t.memoryCount}</Badge>
+								</td>
+								<td className="px-3 py-2 text-muted-foreground">
 									{t.termScore
 										.slice(0, 8)
 										.map((s) => s.term)
 										.join(", ")}
 								</td>
-								<td>
-									<button type="button" className="mini-btn">
+								<td className="px-3 py-2 text-right">
+									<button
+										type="button"
+										className="rounded-md border border-border px-2 py-1 text-xs text-muted-foreground transition-colors hover:bg-bg-elevated/40 hover:text-foreground"
+									>
 										drill
 									</button>
 								</td>
@@ -173,7 +205,10 @@ export default function TopicsTab(): React.ReactElement {
 						))}
 						{filtered.length === 0 && (
 							<tr>
-								<td colSpan={4} className="muted">
+								<td
+									colSpan={4}
+									className="px-3 py-2 text-sm text-muted-foreground"
+								>
 									No topics match “{query}”.
 								</td>
 							</tr>