@schlessera/brain-ui-react 0.35.0 → 0.37.0

package/src/components/files/file-viewer.tsx

@@ -1,13 +1,13 @@
-import { Loader2, AlertCircle, Eye, Code, Copy, Check, FolderOpen } from "lucide-react";
+import type { BrainUiRoot } from "../../root.js";
+import type { FileState } from "../../stores/file-state.js";
 import { useState } from "react";
 import { useFileStore } from "../../stores/file-store.js";
-import { cn } from "../../lib/utils.js";
 import { FileViewerMarkdown } from "./file-viewer-markdown.js";
 import { FileViewerHtml } from "./file-viewer-html.js";
 import { FileViewerRaw } from "./file-viewer-raw.js";
 import { FileViewerBinary } from "./file-viewer-binary.js";
 import { ShareMenu, type ShareOption } from "../share/share-menu.js";
-import { apiBase } from "../../lib/backend.js";
+import { useBrainUiRoot } from "../../root-context.js";
 import { fetchAsFile, shareFile, renderAndShare } from "../../lib/share.js";
 import { splitFrontmatter } from "../../lib/frontmatter.js";
 import { stripMarkdown } from "../../lib/strip-markdown.js";
@@ -16,7 +16,13 @@ import { MermaidBlock } from "../chat/mermaid-block.js";
 import { buildDiagramShareOptions } from "../chat/mermaid-share.js";
 import { buildImageShareOptions } from "../images/image-share.js";
 import type { FileContentResponse } from "@schlessera/brain-ui-sdk/protocol";
+import { ViewerEmpty, ViewerError, ViewerLoading, ViewerToolbar } from "./file-viewer-frame.js";
 
+/**
+ * The container (S7): reads the file store, builds the share options (they
+ * need the root) and picks the body renderer; the frame around it is
+ * `file-viewer-frame.tsx`, rendered from props.
+ */
 export function FileViewer() {
   const currentPath = useFileStore((s) => s.currentPath);
   const content = useFileStore((s) => s.currentContent);
@@ -26,14 +32,7 @@ export function FileViewer() {
   const setViewMode = useFileStore((s) => s.setViewMode);
   const setTreeExpanded = useFileStore((s) => s.setTreeExpanded);
 
-  if (!currentPath) {
-    return (
-      <div className="flex h-full flex-col items-center justify-center gap-2 px-6 text-center text-sm text-muted-foreground">
-        <FolderOpen className="h-8 w-8 text-muted-foreground/40" />
-        <span>Select a file from the tree to view it.</span>
-      </div>
-    );
-  }
+  if (!currentPath) return <ViewerEmpty />;
 
   const fileName = currentPath.split("/").pop() ?? currentPath;
   const previewAvailable =
@@ -55,25 +54,15 @@ export function FileViewer() {
       />
 
       <div className="flex-1 overflow-auto">
-        {loading && (
-          <div className="flex items-center justify-center gap-2 py-8 text-sm text-muted-foreground">
-            <Loader2 className="h-4 w-4 animate-spin" />
-            Loading file...
-          </div>
-        )}
-        {error && (
-          <div className="m-4 flex items-start gap-2 rounded-lg border border-destructive/30 bg-destructive/5 p-4 text-sm text-destructive">
-            <AlertCircle className="mt-0.5 h-4 w-4 shrink-0" />
-            <span>{error}</span>
-          </div>
-        )}
+        {loading && <ViewerLoading />}
+        {error && <ViewerError message={error} />}
         {!loading && !error && content && <ViewerBody content={content} viewMode={viewMode} />}
       </div>
     </div>
   );
 }
 
-function ViewerBody({ content, viewMode }: { content: NonNullable<ReturnType<typeof useFileStore.getState>["currentContent"]>; viewMode: "preview" | "raw" }) {
+function ViewerBody({ content, viewMode }: { content: NonNullable<FileState["currentContent"]>; viewMode: "preview" | "raw" }) {
   if (content.kind === "binary") {
     return <FileViewerBinary content={content} />;
   }
@@ -113,81 +102,37 @@ function Toolbar({
   content: FileContentResponse | null;
   onRevealInTree: () => void;
 }) {
+  const root = useBrainUiRoot();
   const [copied, setCopied] = useState(false);
-  const shareOptions = content ? buildFileShareOptions(content, fileName) : [];
-  return (
-    <div className="flex items-center gap-2 border-b border-border bg-surface px-4 py-2">
-      <button
-        onClick={onRevealInTree}
-        title="Reveal in tree"
-        className="rounded p-1 text-muted-foreground transition-colors hover:bg-surface-raised hover:text-foreground"
-      >
-        <FolderOpen className="h-3.5 w-3.5" />
-      </button>
-      <div className="min-w-0 flex-1">
-        <div className="truncate text-sm font-medium text-foreground" title={fullPath}>
-          {fileName}
-        </div>
-        <div className="truncate text-[10px] text-muted-foreground" title={fullPath}>
-          {fullPath}
-          {size !== undefined && <span className="ml-2">· {formatSize(size)}</span>}
-        </div>
-      </div>
-      <button
-        onClick={() => {
-          navigator.clipboard.writeText(fullPath);
-          setCopied(true);
-          setTimeout(() => setCopied(false), 1500);
-        }}
-        title="Copy path"
-        className="rounded p-1.5 text-muted-foreground transition-colors hover:bg-surface-raised hover:text-foreground"
-      >
-        {copied ? <Check className="h-3.5 w-3.5" /> : <Copy className="h-3.5 w-3.5" />}
-      </button>
-      {shareOptions.length > 0 && <ShareMenu options={shareOptions} title="Share" />}
-      {previewAvailable && (
-        <div className="flex items-center rounded-md border border-border bg-background">
-          <ModeButton active={viewMode === "preview"} onClick={() => setViewMode("preview")} title="Preview">
-            <Eye className="h-3.5 w-3.5" />
-          </ModeButton>
-          <ModeButton active={viewMode === "raw"} onClick={() => setViewMode("raw")} title="Raw">
-            <Code className="h-3.5 w-3.5" />
-          </ModeButton>
-        </div>
-      )}
-    </div>
-  );
-}
-
-function ModeButton({ active, onClick, title, children }: { active: boolean; onClick: () => void; title: string; children: React.ReactNode }) {
+  const shareOptions = content ? buildFileShareOptions(root, content, fileName) : [];
   return (
-    <button
-      onClick={onClick}
-      title={title}
-      className={cn(
-        "flex h-7 w-7 items-center justify-center transition-colors",
-        active ? "bg-surface-raised text-primary" : "text-muted-foreground hover:text-foreground"
-      )}
-    >
-      {children}
-    </button>
+    <ViewerToolbar
+      fileName={fileName}
+      fullPath={fullPath}
+      size={size}
+      mode={viewMode}
+      previewAvailable={previewAvailable}
+      copied={copied}
+      share={shareOptions.length > 0 ? <ShareMenu options={shareOptions} title="Share" /> : null}
+      onMode={setViewMode}
+      onCopyPath={() => {
+        navigator.clipboard.writeText(fullPath);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 1500);
+      }}
+      onReveal={onRevealInTree}
+    />
   );
 }
 
-function formatSize(bytes: number): string {
-  if (bytes < 1024) return `${bytes} B`;
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-  return `${(bytes / 1024 / 1024).toFixed(2)} MB`;
-}
-
-function buildFileShareOptions(content: FileContentResponse, fileName: string): ShareOption[] {
-  const rawUrl = `${apiBase()}/files/content?path=${encodeURIComponent(content.path)}&raw=1`;
+function buildFileShareOptions(root: BrainUiRoot, content: FileContentResponse, fileName: string): ShareOption[] {
+  const rawUrl = `${root.apiBase()}/files/content?path=${encodeURIComponent(content.path)}&raw=1`;
 
   if (content.kind === "binary") {
     // An image gets both: the original bytes, and a lighter re-encode for
     // messaging. The original is first, and nothing is downgraded unasked.
     if (content.mime?.startsWith("image/")) {
-      return buildImageShareOptions(rawUrl, fileName, {
+      return buildImageShareOptions(root, rawUrl, fileName, {
         mime: content.mime,
         bytes: content.size,
       });
@@ -199,7 +144,7 @@ function buildFileShareOptions(content: FileContentResponse, fileName: string):
           id: "file",
           label: "Share file",
           run: async () => {
-            const file = await fetchAsFile(rawUrl, fileName, content.mime);
+            const file = await fetchAsFile(root, rawUrl, fileName, content.mime);
             return shareFile(file, { title: fileName });
           },
         },
@@ -240,7 +185,7 @@ function buildFileShareOptions(content: FileContentResponse, fileName: string):
         label: "Share as image",
         hint: "Rendered PNG snapshot",
         run: async () =>
-          renderAndShare({
+          renderAndShare(root, {
             // The render page runs without JavaScript — mermaid fences are
             // pre-rendered to inline SVG on the client.
             content: await inlineMermaidDiagrams(body),
@@ -255,7 +200,7 @@ function buildFileShareOptions(content: FileContentResponse, fileName: string):
         label: "Share as PDF",
         hint: "Vector PDF, A4",
         run: async () =>
-          renderAndShare({
+          renderAndShare(root, {
             content: await inlineMermaidDiagrams(body),
             contentType: "markdown",
             format: "pdf",
@@ -283,7 +228,7 @@ function buildFileShareOptions(content: FileContentResponse, fileName: string):
         id: "html-png",
         label: "Share as image",
         run: () =>
-          renderAndShare({
+          renderAndShare(root, {
             content: html,
             contentType: "html",
             format: "png",
@@ -295,7 +240,7 @@ function buildFileShareOptions(content: FileContentResponse, fileName: string):
         id: "html-pdf",
         label: "Share as PDF",
         run: () =>
-          renderAndShare({
+          renderAndShare(root, {
             content: html,
             contentType: "html",
             format: "pdf",
@@ -311,7 +256,7 @@ function buildFileShareOptions(content: FileContentResponse, fileName: string):
   if (content.kind === "text" && isMermaidPath(content.path)) {
     const source = content.content ?? "";
     return [
-      ...buildDiagramShareOptions(source, { filename: baseName(fileName) }),
+      ...buildDiagramShareOptions(root, source, { filename: baseName(fileName) }),
       {
         id: "mmd-file",
         label: "Share source file",

package/src/components/files/frontmatter-chips.tsx

@@ -0,0 +1,42 @@
+import { Chip, Disclosure } from "@schlessera/brain-ui-kit";
+import type { FrontmatterField } from "../../lib/frontmatter.js";
+
+/**
+ * A file's frontmatter as the design's `1f` screen draws it: key/value
+ * chips (`type: talk`, `status: active`) behind a `Disclosure` whose summary
+ * says how much is hidden. Rendered from props (S7); `FrontmatterPanel` is
+ * the container that keeps the collapsed choice in the file store so it
+ * survives moving between files.
+ *
+ * A list-valued field is one chip per element, keyed by the field; an empty
+ * value is an explicit em dash, because a blank chip reads as nothing.
+ */
+export interface FrontmatterChipsProps {
+  fields: FrontmatterField[];
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export function FrontmatterChips(p: FrontmatterChipsProps) {
+  if (p.fields.length === 0) return null;
+  const summary = p.fields.slice(0, 3).map((f) => f.key).join(", ") + (p.fields.length > 3 ? "…" : "");
+  return (
+    <div className="mb-4">
+      <Disclosure
+        label={`frontmatter · ${p.fields.length} ${p.fields.length === 1 ? "field" : "fields"}`}
+        meta={p.open ? undefined : summary}
+        icon="file"
+        open={p.open}
+        onOpenChange={p.onOpenChange}
+      >
+        <div className="flex flex-wrap gap-1.5">
+          {p.fields.flatMap((f) =>
+            f.list
+              ? f.list.map((item, i) => <Chip key={`${f.key}-${i}`} label={`${f.key}: ${item}`} variant="kv" tone="neutral" />)
+              : [<Chip key={f.key} label={`${f.key}: ${f.value || "—"}`} variant="kv" tone="neutral" />],
+          )}
+        </div>
+      </Disclosure>
+    </div>
+  );
+}

package/src/components/files/frontmatter-panel.tsx

@@ -1,78 +1,13 @@
-import { ChevronRight } from "lucide-react";
 import type { FrontmatterField } from "../../lib/frontmatter.js";
 import { useFileStore } from "../../stores/file-store.js";
-import { cn } from "../../lib/utils.js";
+import { FrontmatterChips } from "./frontmatter-chips.js";
 
+/**
+ * The container (S7): the collapsed choice lives in the file store so it
+ * carries from one file to the next; `FrontmatterChips` draws from props.
+ */
 export function FrontmatterPanel({ fields }: { fields: FrontmatterField[] }) {
   const collapsed = useFileStore((s) => s.frontmatterCollapsed);
   const toggle = useFileStore((s) => s.toggleFrontmatter);
-
-  if (fields.length === 0) return null;
-
-  return (
-    <div className="mb-4 overflow-hidden rounded-md border border-border/60 bg-surface/50">
-      <button
-        type="button"
-        onClick={toggle}
-        aria-expanded={!collapsed}
-        className="flex w-full items-center gap-2 px-3 py-1.5 text-left font-[family-name:var(--font-mono)] text-[11px] uppercase tracking-wider text-muted-foreground transition-colors hover:bg-surface-raised"
-      >
-        <ChevronRight
-          className={cn(
-            "h-3 w-3 transition-transform",
-            !collapsed && "rotate-90"
-          )}
-        />
-        <span>frontmatter</span>
-        <span className="text-muted-foreground/50">·</span>
-        <span>{fields.length} {fields.length === 1 ? "field" : "fields"}</span>
-        {collapsed && (
-          <span className="ml-auto truncate text-muted-foreground/40">
-            {fields.slice(0, 3).map((f) => f.key).join(", ")}
-            {fields.length > 3 ? "…" : ""}
-          </span>
-        )}
-      </button>
-
-      {!collapsed && (
-        <table className="w-full border-collapse text-xs">
-          <tbody>
-            {fields.map((f) => (
-              <tr
-                key={f.key}
-                className="border-t border-border/30 align-top first:border-t-0"
-              >
-                <th
-                  scope="row"
-                  className="w-32 max-w-[40%] whitespace-nowrap px-3 py-1.5 text-right font-[family-name:var(--font-mono)] font-normal text-muted-foreground"
-                >
-                  {f.key}
-                </th>
-                <td className="px-3 py-1.5 text-foreground/90">
-                  {f.list ? (
-                    <div className="flex flex-wrap gap-1">
-                      {f.list.map((item, i) => (
-                        <span
-                          key={`${item}-${i}`}
-                          className="rounded border border-border bg-background px-1.5 py-[1px] font-[family-name:var(--font-mono)] text-[11px] text-muted-foreground"
-                        >
-                          {item}
-                        </span>
-                      ))}
-                    </div>
-                  ) : (
-                    <span className="font-[family-name:var(--font-mono)] text-[11px] leading-relaxed">
-                      {f.value || (
-                        <span className="text-muted-foreground/40">—</span>
-                      )}
-                    </span>
-                  )}
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      )}
-    </div>
-  );
+  return <FrontmatterChips fields={fields} open={!collapsed} onOpenChange={() => toggle()} />;
 }

package/src/components/files/staleness.ts

@@ -0,0 +1,29 @@
+/**
+ * Staleness from `mtime` (design README, sixth pass §3b): "Stale needs only
+ * `mtime` and a threshold, which every file already has — build it."
+ *
+ * The threshold is this app's, not the design's: the design gives no number
+ * (D3's tree draws `stale 38d`, D6's switch says "untouched over 30 days",
+ * and neither is a rule). 30 days is the D6 subtitle's own figure and the
+ * shortest one the maintenance mode's stale slider offers, so a file the
+ * Files rail calls stale is one the graph would too. Change it here and
+ * both the rail and the tree's dots follow.
+ */
+export const STALE_AFTER_DAYS = 30;
+
+const DAY_MS = 24 * 60 * 60 * 1000;
+
+/** Whole days since `mtime` (milliseconds since the epoch, as the server sends). */
+export function ageInDays(mtime: number, now = Date.now()): number {
+  return Math.max(0, Math.floor((now - mtime) / DAY_MS));
+}
+
+export function isStale(mtime: number, now = Date.now()): boolean {
+  return ageInDays(mtime, now) >= STALE_AFTER_DAYS;
+}
+
+/** "today" · "1 day ago" · "24 days ago" — the rail's mono line. */
+export function formatAge(days: number): string {
+  if (days === 0) return "today";
+  return `${days} ${days === 1 ? "day" : "days"} ago`;
+}

package/src/components/graph/graph-canvas.tsx

@@ -143,6 +143,11 @@ export default function GraphCanvas({
   const ringCanvasRef = useRef<HTMLCanvasElement>(null);
   const sigmaRef = useRef<Sigma | null>(null);
   const theme = useGraphTheme();
+  // The reducers are registered once at mount and read the theme through this
+  // ref, so a theme switch recolours the fade and the selection without
+  // re-instantiating sigma.
+  const themeRef = useRef(theme);
+  themeRef.current = theme;
   const ringCount = layout === "radial" ? rings : 0;
 
   // State the reducers read without re-instantiating sigma.
@@ -179,6 +184,7 @@ export default function GraphCanvas({
       nodeReducer: (node, attrs) => {
         const id = Number(node);
         const s = interactionRef.current;
+        const theme = themeRef.current;
         const active = s.hoveredId ?? s.selectedId;
         const out = { ...attrs } as typeof attrs & {
           forceLabel?: boolean;
@@ -207,6 +213,7 @@ export default function GraphCanvas({
       },
       edgeReducer: (edge, attrs) => {
         const s = interactionRef.current;
+        const theme = themeRef.current;
         const active = s.hoveredId ?? s.selectedId;
         const out = { ...attrs } as typeof attrs & { hidden?: boolean };
         if (active !== null) {
@@ -264,10 +271,26 @@ export default function GraphCanvas({
       renderer.kill();
       sigmaRef.current = null;
     };
-    // Theme is read once per mount (dark-only app).
+    // The theme the settings above close over is the mount-time one; the
+    // effect below swaps them when it changes.
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  // A theme switch re-applies the colours sigma was configured with — the
+  // label ink and the two label drawers — in place. Node and edge colours
+  // follow through the restyle effect, whose `nodeColor` and `theme` change
+  // with it; the reducers read `themeRef`.
+  useEffect(() => {
+    const renderer = sigmaRef.current;
+    if (!renderer) return;
+    renderer.setSettings({
+      labelColor: { color: theme.label },
+      defaultDrawNodeLabel: makeDrawNodeLabel(theme),
+      defaultDrawNodeHover: makeDrawNodeHover(theme),
+    });
+    renderer.refresh({ skipIndexation: true });
+  }, [theme]);
+
   // (Re)build the graph when the scene changes.
   useEffect(() => {
     const renderer = sigmaRef.current;

package/src/components/graph/graph-controls-column.tsx

@@ -0,0 +1,92 @@
+import { useGraphStore, type GraphMode } from "../../stores/graph-store.js";
+import { ControlsBody } from "./graph-controls.js";
+import { DisabledToggleRow, Field, Rows, Segmented } from "./graph-form.js";
+
+export const MODES: { value: GraphMode; label: string }[] = [
+  { value: "clusters", label: "Clusters" },
+  { value: "discovery", label: "Discovery" },
+  { value: "local", label: "Local" },
+  { value: "maintenance", label: "Maintenance" },
+];
+
+/**
+ * D6's 264px controls column, from `laptop:` up: the serif "Graph" title,
+ * `Label "Mode"` + `FilterRow`, the per-mode form (`ControlsBody` — the
+ * same one the phone sheet shows), and a mono footer with the counts the
+ * store already has. The footer is silent until a scene has landed; it
+ * never estimates.
+ */
+export function GraphControlsColumn() {
+  const mode = useGraphStore((s) => s.mode);
+  const setMode = useGraphStore((s) => s.setMode);
+
+  return (
+    <aside
+      aria-label="Graph controls"
+      className="flex w-[264px] shrink-0 flex-col border-r border-border bg-surface"
+    >
+      <div className="px-4 pb-3 pt-4">
+        <h1 className="font-display text-lg text-foreground">Graph</h1>
+      </div>
+      <div className="flex flex-1 flex-col gap-4 overflow-y-auto px-4 pb-4">
+        <Field label="Mode">
+          <Segmented
+            options={MODES}
+            value={mode}
+            onChange={(v) => setMode(v as GraphMode)}
+          />
+        </Field>
+        <ControlsBody />
+        {/* D6's switches, drawn but disabled with their reasons (sixth pass
+            §3b, the palette's rule). A scene node carries no `mtime` and no
+            provenance record — `GraphNodePayload` has type, degrees,
+            community, distance — so neither switch can fire here yet; the
+            footer's gold line says the same thing. */}
+        {mode !== "maintenance" && (
+          <Rows>
+            <DisabledToggleRow label="Mark stale" reason="needs mtime" tone="amber" />
+            <DisabledToggleRow label="Untrusted only" reason="needs provenance" tone="purple" last />
+          </Rows>
+        )}
+      </div>
+      <ColumnFooter />
+    </aside>
+  );
+}
+
+function ColumnFooter() {
+  const mode = useGraphStore((s) => s.mode);
+  const subgraph = useGraphStore((s) => s.subgraph);
+  const total = useGraphStore((s) => s.meta?.nodeCount);
+  const local = useGraphStore((s) => s.local);
+
+  if (!subgraph) return null;
+  const drawn = subgraph.nodes.length.toLocaleString();
+  const first =
+    total !== undefined
+      ? `${drawn} of ${total.toLocaleString()} nodes drawn`
+      : `${drawn} nodes drawn`;
+  const second =
+    mode === "local"
+      ? `${local.depth}-hop · ${DIRECTION_LABEL[local.direction]}`
+      : `${subgraph.edges.length.toLocaleString()} edges${subgraph.truncated ? " · truncated" : ""}`;
+
+  return (
+    <div className="flex flex-col gap-0.5 border-t border-border px-4 py-3 font-mono text-[10px] text-muted-foreground">
+      <span>{first}</span>
+      <span>{second}</span>
+      {/* True of every scene the API serves today: nodes carry no mtime and
+          no provenance. Printed in gold, as D6 draws it, and only while it
+          is true — the switches above are disabled for the same reasons. */}
+      {mode !== "maintenance" && (
+        <span className="text-[var(--bk-gold-ink)]">stale needs mtime · untrusted needs provenance</span>
+      )}
+    </div>
+  );
+}
+
+const DIRECTION_LABEL = {
+  in: "inbound only",
+  out: "outbound only",
+  both: "both directions",
+} as const;