pi-mega-compact 0.13.4 → 0.13.6

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

@@ -0,0 +1,103 @@
+/**
+ * dashboard-client/src/tabs/WikiTab/TopicTimeline.tsx — per-topic timeline.
+ *
+ * Renders topic memory-addition buckets as a lightweight SVG bar strip (no
+ * chart library needed). X = time bucket, bar height = memories added.
+ * Fetches GET /api/wiki/topic/:topicId/timeline.
+ *
+ * Styling: Tailwind + shadcn (Card). No legacy CSS classes.
+ */
+
+import type React from "react";
+import { useCallback } from "react";
+import { useApi } from "../../hooks/useApi";
+import { fetchTopicTimeline } from "../../api/client";
+import type { TopicTimelineResponse } from "@contracts";
+
+const W = 720;
+const H = 56;
+const BAR_W = 10;
+const GAP = 3;
+
+interface Props {
+	topicId: string;
+}
+
+function fmtBucket(ts: number): string {
+	if (!ts) return "—";
+	return new Date(ts).toLocaleDateString();
+}
+
+export default function TopicTimeline({ topicId }: Props): React.ReactElement {
+	const { data, error } = useApi<TopicTimelineResponse>(
+		useCallback(() => fetchTopicTimeline(topicId), [topicId]),
+		{},
+	);
+
+	if (error) {
+		return (
+			<div className="rounded-lg border border-border bg-bg-card p-4 text-sm text-muted-foreground">
+				Timeline unavailable.
+			</div>
+		);
+	}
+	if (!data) {
+		return (
+			<div className="rounded-lg border border-border bg-bg-card p-4 text-sm text-muted-foreground">
+				Loading timeline…
+			</div>
+		);
+	}
+
+	const { buckets, total } = data;
+	const max = Math.max(...buckets.map((b) => b.count), 1);
+	const totalWidth = buckets.length * (BAR_W + GAP);
+	const scale = Math.min(1, (W - 24) / Math.max(totalWidth, 1));
+
+	return (
+		<div className="rounded-lg border border-border bg-bg-card p-4">
+			<h3 className="mb-2 font-heading text-sm font-semibold text-muted-foreground">
+				Memory timeline{" "}
+				<span className="font-normal text-xs">
+					({total} memory{total !== 1 ? "ies" : "y"} · daily buckets)
+				</span>
+			</h3>
+			{buckets.length === 0 ? (
+				<p className="text-sm text-muted-foreground">No timeline data yet.</p>
+			) : (
+				<>
+					<svg
+						width="100%"
+						height={H}
+						viewBox={`0 0 ${Math.max(W, totalWidth * scale)} ${H}`}
+						role="img"
+						aria-label="Memory additions over time"
+					>
+						{buckets.map((b, i) => {
+							const x = i * (BAR_W + GAP) * scale;
+							const h = Math.max(3, (b.count / max) * (H - 20));
+							return (
+								<rect
+									key={`${b.bucket}-${i}`}
+									x={x}
+									y={H - 6 - h}
+									width={Math.max(2, BAR_W * scale)}
+									height={h}
+									rx={2}
+									fill="hsl(var(--primary))"
+									opacity={0.85}
+								>
+									<title>{`${fmtBucket(b.bucket)}: ${b.count}`}</title>
+								</rect>
+							);
+						})}
+					</svg>
+					<p className="mt-1 text-xs text-muted-foreground">
+						First display: {fmtBucket(buckets[0].bucket)} · last:
+						{fmtBucket(buckets[buckets.length - 1].bucket)}
+					</p>
+				</>
+			)}
+		</div>
+	);
+}

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

@@ -0,0 +1,213 @@
+/**
+ * dashboard-client/src/tabs/WikiTab/WikiPage.tsx — single wiki topic page.
+ *
+ * Renders the extractive summary, key member memories, the member provenance
+ * table (memory → session/assigned-at/method), related topics (resolved from
+ * the wiki index), and the per-topic memory timeline. Mutations
+ * (rename/merge/split) delegate to WikiPageControls; on mutation success the
+ * page + index are refetched.
+ *
+ * Styling: Tailwind + shadcn (Card, Badge, Button) — no legacy CSS.
+ */
+
+import type React from "react";
+import { useCallback, useMemo, useState } from "react";
+import { useApi } from "../../hooks/useApi";
+import { fetchWikiTopic, fetchWikiIndex } from "../../api/client";
+import type { WikiPageResponse, WikiIndexResponse } from "@contracts";
+import { Badge } from "../../components/ui/badge";
+import { Button } from "../../components/ui/button";
+import { Card, CardContent } from "../../components/ui/card";
+import WikiPageControls from "./WikiPageControls";
+import TopicTimeline from "./TopicTimeline";
+
+interface WikiPageProps {
+	topicId: string;
+	onBack: () => void;
+}
+
+function fmtTs(ms: number): string {
+	if (!ms) return "—";
+	return new Date(ms).toLocaleString();
+}
+
+const METHOD_LABELS: Record<string, string> = {
+	"kmeans+tfidf": "kmeans",
+	merge: "merge",
+	split: "split",
+	manual: "manual",
+};
+
+export default function WikiPage({
+	topicId,
+	onBack,
+}: WikiPageProps): React.ReactElement {
+	const [dirty, setDirty] = useState(0);
+	const bump = useCallback(() => setDirty((d) => d + 1), []);
+
+	const { data: page, error, loading } = useApi<WikiPageResponse>(
+		useCallback(() => fetchWikiTopic(topicId), [topicId, dirty]),
+		{},
+	);
+	const { data: index } = useApi<WikiIndexResponse>(
+		useCallback(() => fetchWikiIndex(), []),
+		{},
+	);
+
+	const labelOf = useMemo(() => {
+		const map = new Map<string, string>();
+		for (const t of index?.topics ?? []) map.set(t.id, t.label);
+		return map;
+	}, [index]);
+
+	if (error && !page) {
+		return (
+			<div className="rounded-lg border border-border bg-bg-card p-6 text-sm text-danger">
+				Error loading topic: {error.message}
+			</div>
+		);
+	}
+	if (loading && !page) {
+		return (
+			<div className="rounded-lg border border-border bg-bg-card p-6 text-sm text-muted-foreground">
+				Loading topic…
+			</div>
+		);
+	}
+	if (!page) {
+		return (
+			<div className="rounded-lg border border-border bg-bg-card p-6 text-sm text-muted-foreground">
+				No topic data available.
+			</div>
+		);
+	}
+
+	const otherTopics = (index?.topics ?? [])
+		.filter((t) => t.id !== topicId)
+		.map((t) => ({ id: t.id, label: t.label }));
+
+	return (
+		<div className="flex flex-col gap-4">
+			<div className="flex items-center justify-between">
+				<div className="flex items-center gap-2">
+					<Button variant="outline" size="sm" onClick={onBack}>
+						← Wiki
+					</Button>
+					<h2 className="font-heading text-lg font-semibold">
+						{page.topic.label}
+					</h2>
+					{page.topic.edited && <Badge variant="outline">edited</Badge>}
+					<Badge variant="default">
+						{page.provenance.length} memories
+					</Badge>
+				</div>
+				<WikiPageControls
+					topicId={topicId}
+					others={otherTopics}
+					members={page.provenance}
+					onMutated={bump}
+				/>
+			</div>
+
+			{page.summary && (
+				<Card>
+					<CardContent>
+						<h3 className="mb-1 font-heading text-sm font-semibold text-muted-foreground">
+							Summary
+						</h3>
+						<p className="text-sm leading-relaxed text-foreground/90">
+							{page.summary}
+						</p>
+					</CardContent>
+				</Card>
+			)}
+
+			{page.keyMemories.length > 0 && (
+				<Card>
+					<CardContent>
+						<h3 className="mb-2 font-heading text-sm font-semibold text-muted-foreground">
+							Key memories
+						</h3>
+						<ul className="flex flex-col gap-2">
+							{page.keyMemories.map((m) => (
+								<li
+									key={m.memoryId}
+									className="rounded-md border border-border/60 bg-bg-elevated/40 p-3 text-sm"
+								>
+									<p className="line-clamp-3 text-foreground/90">{m.content}</p>
+									<p className="mt-1 text-xs text-muted-foreground">
+										{m.memoryId} · {fmtTs(m.timestamp)}
+									</p>
+								</li>
+							))}
+						</ul>
+					</CardContent>
+				</Card>
+			)}
+
+			<TopicTimeline topicId={topicId} />
+
+			{page.provenance.length > 0 && (
+				<Card>
+					<CardContent>
+						<h3 className="mb-2 font-heading text-sm font-semibold text-muted-foreground">
+							Provenance
+						</h3>
+						<div className="max-h-72 overflow-auto rounded-md border border-border/60">
+							<table className="w-full text-sm">
+								<thead className="sticky top-0 bg-bg-card">
+									<tr className="border-b border-border text-left text-xs uppercase text-muted-foreground">
+										<th className="px-3 py-2 font-medium">Memory</th>
+										<th className="px-3 py-2 font-medium">Session</th>
+										<th className="px-3 py-2 font-medium">Assigned</th>
+										<th className="px-3 py-2 font-medium">Method</th>
+									</tr>
+								</thead>
+								<tbody>
+									{page.provenance.map((p) => (
+										<tr
+											key={p.memoryId}
+											className="border-b border-border/40 last:border-0"
+										>
+											<td className="px-3 py-1.5 font-mono text-xs">
+												{p.memoryId}
+											</td>
+											<td className="px-3 py-1.5 text-xs text-muted-foreground">
+												{p.sessionId || "unknown"}
+											</td>
+											<td className="px-3 py-1.5 text-xs text-muted-foreground">
+												{fmtTs(p.assignedAt)}
+											</td>
+											<td className="px-3 py-1.5">
+												<Badge variant="outline">
+													{METHOD_LABELS[p.method] ?? p.method}
+												</Badge>
+											</td>
+										</tr>
+									))}
+								</tbody>
+							</table>
+						</div>
+					</CardContent>
+				</Card>
+			)}
+
+			{page.relatedTopicIds.length > 0 && (
+				<Card>
+					<CardContent>
+						<h3 className="mb-2 font-heading text-sm font-semibold text-muted-foreground">
+							Related topics
+						</h3>
+						<div className="flex flex-wrap gap-2">
+							{page.relatedTopicIds.map((id) => (
+								<Badge key={id} variant="accent">
+									{labelOf.get(id) ?? id}
+								</Badge>
+							))}
+						</div>
+					</CardContent>
+				</Card>
+			)}
+		</div>
+	);
+}

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

@@ -0,0 +1,188 @@
+/**
+ * dashboard-client/src/tabs/WikiTab/WikiPageControls.tsx — rename/merge/split.
+ *
+ * Controlled dialogs for the three curation mutations. Non-destructive: on
+ * success the parent refetches and paints the returned CurationResult; on
+ * failure the pre-mutation snapshot stays (no local partial apply).
+ *
+ * Styling: Tailwind + shadcn (Button). No legacy CSS classes.
+ */
+
+import type React from "react";
+import { useState } from "react";
+import { renameTopic, mergeTopics, splitTopic } from "../../api/client";
+import type { MemoryProvenance } from "@contracts";
+import { Button } from "../../components/ui/button";
+
+interface ControlsProps {
+	topicId: string;
+	others: Array<{ id: string; label: string }>;
+	members: MemoryProvenance[];
+	onMutated: () => void;
+}
+
+type Mode = "rename" | "merge" | "split" | null;
+
+function memberSnippet(id: string, method: string): string {
+	const base = id.length > 14 ? id.slice(0, 14) + "…" : id;
+	return method ? `${base} (${method})` : base;
+}
+
+export default function WikiPageControls({
+	topicId,
+	others,
+	members,
+	onMutated,
+}: ControlsProps): React.ReactElement {
+	const [mode, setMode] = useState<Mode>(null);
+	const [label, setLabel] = useState("");
+	const [target, setTarget] = useState("");
+	const [picked, setPicked] = useState<string[]>([]);
+	const [busy, setBusy] = useState(false);
+	const [error, setError] = useState<string | null>(null);
+
+	function open(m: Exclude<Mode, null>): void {
+		setMode(m);
+		setError(null);
+		setLabel("");
+		setTarget("");
+		setPicked([]);
+	}
+
+	async function submit(): Promise<void> {
+		setBusy(true);
+		setError(null);
+		try {
+			if (mode === "rename") {
+				await renameTopic(topicId, label);
+			} else if (mode === "merge") {
+				if (!target) {
+					setError("Pick a target topic.");
+					setBusy(false);
+					return;
+				}
+				await mergeTopics(topicId, target);
+			} else if (mode === "split") {
+				if (picked.length === 0) {
+					setError("Pick at least one memory.");
+					setBusy(false);
+					return;
+				}
+				await splitTopic(topicId, picked);
+			}
+			setMode(null);
+			onMutated();
+		} catch (e) {
+			setError(e instanceof Error ? e.message : String(e));
+		} finally {
+			setBusy(false);
+		}
+	}
+
+	return (
+		<>
+			<div className="flex gap-2">
+				<Button variant="outline" size="sm" onClick={() => open("rename")}>
+					Rename
+				</Button>
+				<Button variant="outline" size="sm" onClick={() => open("merge")}>
+					Merge into…
+				</Button>
+				<Button variant="outline" size="sm" onClick={() => open("split")}>
+					Split
+				</Button>
+			</div>
+
+			{mode && (
+				<div
+					className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
+					onClick={() => setMode(null)}
+				>
+					<div
+						className="w-full max-w-md rounded-lg border border-border bg-bg-card p-5 shadow-xl"
+						role="dialog"
+						aria-modal="true"
+						aria-label={mode}
+						onClick={(e) => e.stopPropagation()}
+					>
+						<h3 className="mb-3 font-heading text-base font-semibold text-foreground">
+							{mode === "rename"
+								? "Rename topic"
+								: mode === "merge"
+									? "Merge into…"
+									: "Split topic"}
+						</h3>
+
+						{mode === "rename" && (
+							<input
+								type="text"
+								value={label}
+								placeholder="New label (empty = back to auto)"
+								aria-label="New topic label"
+								autoFocus
+								onChange={(e) => setLabel(e.target.value)}
+								className="w-full rounded-md border border-border bg-bg-elevated/50 px-3 py-2 text-sm outline-none transition-colors focus:border-primary"
+							/>
+						)}
+
+						{mode === "merge" && (
+							<select
+								value={target}
+								aria-label="Target topic"
+								onChange={(e) => setTarget(e.target.value)}
+								className="w-full rounded-md border border-border bg-bg-elevated/50 px-3 py-2 text-sm outline-none transition-colors focus:border-primary"
+							>
+								<option value="">Pick a target topic…</option>
+								{others.map((o) => (
+									<option key={o.id} value={o.id}>
+										{o.label}
+									</option>
+								))}
+							</select>
+						)}
+
+						{mode === "split" && (
+							<div className="max-h-56 overflow-auto rounded-md border border-border/60">
+								{members.map((m) => (
+									<label
+										key={m.memoryId}
+										className="flex cursor-pointer items-center gap-2 border-b border-border/40 px-3 py-2 text-sm last:border-0 hover:bg-bg-elevated/40"
+									>
+										<input
+											type="checkbox"
+											checked={picked.includes(m.memoryId)}
+											onChange={(e) => {
+												setPicked((prev) =>
+													e.target.checked
+														? [...prev, m.memoryId]
+														: prev.filter((x) => x !== m.memoryId),
+												);
+											}}
+											className="accent-primary"
+										/>
+										<span className="font-mono text-xs text-muted-foreground">
+											{memberSnippet(m.memoryId, m.method)}
+										</span>
+									</label>
+								))}
+							</div>
+						)}
+
+						{error && (
+							<p className="mt-3 text-sm text-danger">{error}</p>
+						)}
+
+						<div className="mt-4 flex justify-end gap-2">
+							<Button variant="ghost" size="sm" onClick={() => setMode(null)}>
+								Cancel
+							</Button>
+							<Button size="sm" onClick={submit} disabled={busy}>
+								{busy ? "…" : "Confirm"}
+							</Button>
+						</div>
+					</div>
+				</div>
+			)}
+		</>
+	);
+}