@schlessera/brain-ui-react 0.34.0 → 0.35.0

package/src/components/chat/tool-views.tsx

@@ -22,9 +22,11 @@ import { MarkdownContent } from "./markdown-content.js";
 import { isInternalRepoPath } from "../../stores/file-store.js";
 import { GET_LOCATION_TOOL_NAME, normalizeToolName } from "../../lib/tool-names.js";
 import { computeDiffRows, type WordToken } from "../../lib/diff.js";
+import { formatRelativeTime } from "../../lib/format-time.js";
 
 // Re-exported so existing imports of the diff engine from this module keep working.
 export { computeDiffRows };
+export { formatRelativeTime };
 
 // ============================================================
 // Shared helpers
@@ -84,19 +86,6 @@ export function formatTokenCount(n: number): string {
   return String(n);
 }
 
-/** Relative timestamp for list rows ("3m ago"); dates beyond a week. */
-export function formatRelativeTime(ms: number): string {
-  const diff = Date.now() - ms;
-  const minutes = Math.floor(diff / 60000);
-  if (minutes < 1) return "just now";
-  if (minutes < 60) return `${minutes}m ago`;
-  const hours = Math.floor(minutes / 60);
-  if (hours < 24) return `${hours}h ago`;
-  const days = Math.floor(hours / 24);
-  if (days < 7) return `${days}d ago`;
-  return new Date(ms).toLocaleDateString();
-}
-
 export function countLines(text: string): number {
   let n = 1;
   for (let i = 0; i < text.length; i++) if (text[i] === "\n") n++;

package/src/components/chat/use-markdown-highlight.ts

@@ -0,0 +1,63 @@
+import { useEffect, useSyncExternalStore } from "react";
+import type { Options as MarkdownOptions } from "react-markdown";
+import remarkGfm from "remark-gfm";
+
+/**
+ * Plugin lists, hoisted out of render.
+ *
+ * react-markdown builds a fresh unified processor on every render and reruns
+ * the whole parse — there is no internal memoization to lean on. Fresh array
+ * literals in the JSX made that unavoidable; module constants let the memo
+ * below actually hold.
+ */
+export const REMARK_PLUGINS = [remarkGfm];
+const NO_REHYPE_PLUGINS: NonNullable<MarkdownOptions["rehypePlugins"]> = [];
+
+/**
+ * Syntax highlighting arrives after first paint.
+ *
+ * rehype-highlight pulls in highlight.js, 166 KB of the entry bundle — more
+ * than every markdown parser here put together — and nothing on the first paint
+ * needs it. It is fetched once, on the first mount of a highlighting renderer;
+ * until it lands, code blocks render as plain text and then gain their colours.
+ * In practice it is loaded long before the first assistant message arrives.
+ *
+ * The module-level cache means the fetch happens once per page, not once per
+ * message, and useSyncExternalStore is what lets every mounted renderer pick up
+ * the plugin the moment it does.
+ */
+let highlightPlugins: NonNullable<MarkdownOptions["rehypePlugins"]> | null = null;
+let highlightRequested = false;
+const highlightListeners = new Set<() => void>();
+
+function subscribeHighlight(onChange: () => void): () => void {
+  highlightListeners.add(onChange);
+  return () => {
+    highlightListeners.delete(onChange);
+  };
+}
+
+function readHighlightPlugins(): NonNullable<MarkdownOptions["rehypePlugins"]> {
+  return highlightPlugins ?? NO_REHYPE_PLUGINS;
+}
+
+export function useRehypePlugins(enabled: boolean) {
+  const plugins = useSyncExternalStore(
+    subscribeHighlight,
+    readHighlightPlugins,
+    readHighlightPlugins
+  );
+  useEffect(() => {
+    if (!enabled || highlightRequested) return;
+    highlightRequested = true;
+    import("rehype-highlight")
+      .then((mod) => {
+        highlightPlugins = [mod.default];
+        for (const listener of highlightListeners) listener();
+      })
+      .catch(() => {
+        // Soft-fail: code blocks stay readable, just uncoloured.
+      });
+  }, [enabled]);
+  return enabled ? plugins : NO_REHYPE_PLUGINS;
+}

package/src/components/connectivity/connection-gate.tsx

@@ -1,15 +1,32 @@
 import { Brain, WifiOff, ShieldAlert } from "lucide-react";
 import { motion, AnimatePresence } from "framer-motion";
 import { useConnectionStore } from "../../stores/connection-store.js";
-import { useEffect, useState, type ReactNode } from "react";
+import { useEffect, useRef, useState, type ReactNode } from "react";
 import { LoginScreen } from "./login-screen.js";
 import { useVpnStatus } from "../../hooks/use-vpn-status.js";
+import { reconnectWebSocketNow } from "../../hooks/use-websocket.js";
+import {
+  deriveConnectionIssue,
+  type ConnectionIssue,
+} from "./connection-state.js";
+import { rebindPushSubscriptionAfterLogin } from "../../lib/push-registration.js";
+
+const INITIAL_PUSH_REBIND_BACKOFF_MS = 1_000;
+const MAX_PUSH_REBIND_BACKOFF_MS = 60_000;
 
 export function ConnectionGate({ children }: { children: ReactNode }) {
   // The gate owns its connectivity probe — composing <ConnectionGate> is all
   // an embedder needs; the store would otherwise sit on "checking" forever.
-  useVpnStatus();
+  const successfulProbeCount = useVpnStatus();
   const vpnStatus = useConnectionStore((s) => s.vpnStatus);
+  const handshakeFailures = useConnectionStore((s) => s.handshakeFailures);
+  const lastCloseCode = useConnectionStore((s) => s.lastCloseCode);
+  const reportError = useConnectionStore((s) => s.reportError);
+  const issue = deriveConnectionIssue({
+    vpnStatus,
+    handshakeFailures,
+    lastCloseCode,
+  });
 
   // Once the app has connected, never unmount the UI again — an intermittent
   // drop must not destroy rendered chat state. Show a banner instead.
@@ -18,9 +35,90 @@ export function ConnectionGate({ children }: { children: ReactNode }) {
     if (vpnStatus === "connected") setEverConnected(true);
   }, [vpnStatus]);
 
+  const pushRebind = useRef({
+    pending: true,
+    inFlight: false,
+    retryReady: true,
+    backoffMs: INITIAL_PUSH_REBIND_BACKOFF_MS,
+    retryTimer: undefined as ReturnType<typeof setTimeout> | undefined,
+    disposed: false,
+  });
+
+  useEffect(() => {
+    const state = pushRebind.current;
+    state.disposed = false;
+    return () => {
+      state.disposed = true;
+      clearTimeout(state.retryTimer);
+    };
+  }, []);
+
+  // A successful authenticated probe follows a login reload (and is also the
+  // boot path for ambient auth modes). Re-assert any browser-held subscription
+  // so legacy/unbound rows acquire the current principal. A failed request
+  // stays pending: later successful probes, including foreground-triggered
+  // probes, retry it once the exponential backoff has elapsed.
+  useEffect(() => {
+    const state = pushRebind.current;
+    if (
+      successfulProbeCount === 0 ||
+      vpnStatus !== "connected" ||
+      !state.pending ||
+      state.inFlight ||
+      !state.retryReady
+    ) {
+      return;
+    }
+
+    state.inFlight = true;
+    void rebindPushSubscriptionAfterLogin().then(
+      () => {
+        if (state.disposed) return;
+        state.inFlight = false;
+        state.pending = false;
+      },
+      () => {
+        if (state.disposed) return;
+        state.inFlight = false;
+        state.retryReady = false;
+        const delay = state.backoffMs;
+        state.backoffMs = Math.min(
+          state.backoffMs * 2,
+          MAX_PUSH_REBIND_BACKOFF_MS
+        );
+        state.retryTimer = setTimeout(() => {
+          state.retryReady = true;
+          state.retryTimer = undefined;
+        }, delay);
+      }
+    );
+  }, [successfulProbeCount, vpnStatus]);
+
+  const refused = issue === "refused" || issue === "capacity";
+  const wasRefused = useRef(false);
+  useEffect(() => {
+    if (!refused) {
+      wasRefused.current = false;
+      return;
+    }
+    if (wasRefused.current) return;
+    wasRefused.current = true;
+    if (issue === "capacity") {
+      reportError(
+        "WEBSOCKET_CAPACITY",
+        "The server refused the WebSocket because its connection limit was reached (close code 4008)."
+      );
+    } else {
+      reportError(
+        "WEBSOCKET_REFUSED",
+        `The server is reachable and the session is valid, but it refused the WebSocket connection (close code ${lastCloseCode ?? 1006}).`
+      );
+    }
+  }, [issue, refused, lastCloseCode, reportError]);
+
   // Auth required (password mode) and no valid session: show the login screen,
   // even if we were connected before (an expired session must re-prompt).
-  if (vpnStatus === "unauthorized") {
+  if (issue === "unauthorized") {
     return <LoginScreen />;
   }
 
@@ -28,8 +126,8 @@ export function ConnectionGate({ children }: { children: ReactNode }) {
     return (
       <>
         <OfflineBanner
-          show={everConnected && vpnStatus !== "connected"}
-          forbidden={vpnStatus === "forbidden"}
+          show={refused || (everConnected && vpnStatus !== "connected")}
+          issue={issue}
         />
         {children}
       </>
@@ -96,11 +194,22 @@ export function ConnectionGate({ children }: { children: ReactNode }) {
  */
 function OfflineBanner({
   show,
-  forbidden,
+  issue,
 }: {
   show: boolean;
-  forbidden: boolean;
+  issue: ConnectionIssue;
 }) {
+  const message =
+    issue === "forbidden"
+      ? "VPN required — reconnect Tailscale"
+      : issue === "unreachable"
+        ? "Connection lost — reconnecting…"
+        : issue === "capacity"
+          ? "Server connection limit reached"
+          : issue === "refused"
+            ? "Server refused the live connection"
+            : "Connection lost — reconnecting…";
+
   return (
     <AnimatePresence>
       {show && (
@@ -113,18 +222,23 @@ function OfflineBanner({
         >
           <div
             role="status"
-            className="flex items-center gap-2 rounded-full border border-amber-500/30 bg-amber-950/90 px-4 py-1.5 text-xs text-amber-200 shadow-lg backdrop-blur"
+            className="pointer-events-auto flex items-center gap-2 rounded-full border border-amber-500/30 bg-amber-950/90 px-4 py-1.5 text-xs text-amber-200 shadow-lg backdrop-blur"
           >
-            {forbidden ? (
+            {issue === "forbidden" ? (
               <ShieldAlert className="h-3.5 w-3.5" />
             ) : (
               <WifiOff className="h-3.5 w-3.5" />
             )}
-            <span>
-              {forbidden
-                ? "VPN required — reconnect Tailscale"
-                : "Connection lost — reconnecting…"}
-            </span>
+            <span>{message}</span>
+            {(issue === "refused" || issue === "capacity") && (
+              <button
+                type="button"
+                onClick={reconnectWebSocketNow}
+                className="font-medium underline underline-offset-2 hover:text-amber-100"
+              >
+                Retry now
+              </button>
+            )}
             <span
               className="inline-block h-1.5 w-1.5 rounded-full bg-amber-400"
               style={{ animation: "breathe 2s ease-in-out infinite" }}

package/src/components/connectivity/connection-state.ts

@@ -0,0 +1,37 @@
+import type { VpnStatus } from "../../stores/connection-store.js";
+
+// Three failed handshakes classify after the existing 1s + 2s backoffs: soon
+// enough to diagnose a refusal, without flashing on one ordinary reconnect.
+export const REFUSAL_ATTEMPTS = 3;
+
+/** ws/connection.ts closes with this when ClientSet.add refuses the socket. */
+export const CONNECTION_LIMIT_CLOSE_CODE = 4008;
+
+export type ConnectionIssue =
+  | "unauthorized"
+  | "forbidden"
+  | "unreachable"
+  | "refused"
+  | "capacity"
+  | null;
+
+/** Derive current connectivity copy from live facts; no conclusion is cached. */
+export function deriveConnectionIssue({
+  vpnStatus,
+  handshakeFailures,
+  lastCloseCode,
+}: {
+  vpnStatus: VpnStatus;
+  handshakeFailures: number;
+  lastCloseCode: number | null;
+}): ConnectionIssue {
+  if (vpnStatus === "unauthorized") return "unauthorized";
+  if (vpnStatus === "forbidden") return "forbidden";
+  if (vpnStatus === "unreachable") return "unreachable";
+  if (vpnStatus !== "connected") return null;
+  // The cap refusal is explicit, so it does not wait for the inferred
+  // threshold: the server accepts the upgrade and closes with 4008, which
+  // resets the never-opened counter that "refused" is inferred from.
+  if (lastCloseCode === CONNECTION_LIMIT_CLOSE_CODE) return "capacity";
+  return handshakeFailures >= REFUSAL_ATTEMPTS ? "refused" : null;
+}

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

@@ -0,0 +1,4 @@
+import { lazy } from "react";
+
+// The one code-split boundary: sigma + graphology load only when a scene renders.
+export const GraphCanvas = lazy(() => import("./graph-canvas.js"));

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

@@ -384,7 +384,10 @@ function NotePicker({
         if (!controller.signal.aborted) setLoading(false);
       }
     }, 250);
-    return () => clearTimeout(t);
+    return () => {
+      clearTimeout(t);
+      controllerRef.current?.abort();
+    };
   }, [editing, trimmed]);
 
   return (

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

@@ -0,0 +1,304 @@
+import { Suspense, useEffect, useMemo, useRef } from "react";
+import type {
+  GraphNodePayload,
+  GraphSubgraphResponse,
+} from "@schlessera/brain-ui-sdk/protocol";
+
+import { useGraphStore } from "../../stores/graph-store.js";
+import { useUIStore } from "../../stores/ui-store.js";
+import { useFileStore } from "../../stores/file-store.js";
+import { GraphControls } from "./graph-controls.js";
+import { NodePopover } from "./node-popover.js";
+import { GraphEmptyState } from "./graph-empty-state.js";
+import { GraphCanvas } from "./graph-canvas-lazy.js";
+import { CenteredSpinner } from "./graph-spinner.js";
+import { matchScene } from "./lib/graph-helpers.js";
+import { cn } from "../../lib/utils.js";
+
+/** Finding-type colors: dataviz status palette (warning/serious/critical) plus
+ * the light end of the distance ramp for "stale" — checked against #0c0e12. */
+const FINDING_COLORS = {
+  orphan: "#fab219",
+  unreachable: "#ec835a",
+  broken: "#d03b3b",
+  stale: "#86b6ef",
+} as const;
+
+// --- Maintenance -------------------------------------------------------------
+
+type FindingKind = "orphan" | "unreachable" | "stale";
+
+interface FindingNode extends GraphNodePayload {
+  finding: FindingKind;
+}
+
+/**
+ * Maintenance: findings list ⇄ canvas, linked both ways. The canvas is a
+ * type-grouped radial scene (one ring per finding kind — these nodes have no
+ * edges between them by definition); broken links are list-only, since their
+ * defining feature is a target that does not exist.
+ */
+export function MaintenanceBody() {
+  const findings = useGraphStore((s) => s.findings);
+  const dataState = useGraphStore((s) => s.dataState);
+  const error = useGraphStore((s) => s.error);
+  const filters = useGraphStore((s) => s.maintenanceFilters);
+  const selectedId = useGraphStore((s) => s.selectedId);
+  const select = useGraphStore((s) => s.select);
+  const hoveredId = useGraphStore((s) => s.hoveredId);
+  const hover = useGraphStore((s) => s.hover);
+  const sceneQuery = useGraphStore((s) => s.sceneQuery);
+  const openFile = useFileStore((s) => s.openFile);
+  const setFilePanelOpen = useUIStore((s) => s.setFilePanelOpen);
+  const listRef = useRef<HTMLDivElement>(null);
+
+  // One node per document, first matching section wins (a stale orphan is an
+  // orphan); ring index encodes the finding kind.
+  const scene = useMemo(() => {
+    if (!findings) return null;
+    const seen = new Set<number>();
+    const nodes: FindingNode[] = [];
+    const push = (list: GraphNodePayload[], finding: FindingKind, ring: number) => {
+      for (const node of list) {
+        if (seen.has(node.id)) continue;
+        seen.add(node.id);
+        nodes.push({ ...node, finding, distance: ring });
+      }
+    };
+    if (filters.orphans) push(findings.orphans, "orphan", 1);
+    if (filters.unreachable) push(findings.unreachable, "unreachable", 2);
+    if (filters.stale) push(findings.stale, "stale", 3);
+    const subgraph: GraphSubgraphResponse = { nodes, edges: [], truncated: false };
+    return { subgraph, nodes };
+  }, [findings, filters]);
+
+  // Canvas → list: keep the selected row in view.
+  useEffect(() => {
+    if (selectedId === null) return;
+    listRef.current
+      ?.querySelector(`[data-node-id="${selectedId}"]`)
+      ?.scrollIntoView({ block: "nearest" });
+  }, [selectedId]);
+
+  if (dataState === "error") {
+    return (
+      <GraphEmptyState icon="warn" title="Could not load findings">
+        {error?.message ?? "Request failed"}
+      </GraphEmptyState>
+    );
+  }
+  if (dataState !== "done" || !findings || !scene) return <CenteredSpinner />;
+
+  const matchIds = matchScene(scene.nodes, sceneQuery);
+  const selectedNode =
+    selectedId === null
+      ? null
+      : (scene.nodes.find((n) => n.id === selectedId) ?? null);
+
+  function openNote(path: string) {
+    setFilePanelOpen(true);
+    void openFile(path);
+  }
+
+  const totalShown =
+    scene.nodes.length + (filters.broken ? findings.brokenLinks.length : 0);
+
+  return (
+    <div className="flex h-full flex-col md:flex-row">
+      {/* Canvas pane */}
+      <div className="relative h-56 shrink-0 border-b border-border md:h-auto md:flex-1 md:border-b-0 md:border-r">
+        {scene.nodes.length === 0 ? (
+          <div className="flex h-full items-center justify-center px-6 text-center text-xs text-muted-foreground">
+            {totalShown === 0
+              ? "Nothing to show — this brain is clean."
+              : "Only broken links match — they live in the list."}
+          </div>
+        ) : (
+          <Suspense fallback={<CenteredSpinner />}>
+            <GraphCanvas
+              data={scene.subgraph}
+              layout="radial"
+              selectedId={selectedId}
+              hoveredId={hoveredId}
+              matchIds={matchIds}
+              nodeColor={(node) =>
+                FINDING_COLORS[(node as FindingNode).finding ?? "stale"]
+              }
+              onSelect={select}
+              onHover={hover}
+            />
+          </Suspense>
+        )}
+        <GraphControls />
+        {selectedNode && <NodePopover node={selectedNode} />}
+      </div>
+
+      {/* Findings list pane */}
+      <div
+        ref={listRef}
+        className="flex-1 overflow-y-auto px-4 py-4 md:w-96 md:flex-none md:px-5"
+      >
+        <div className="flex flex-col gap-5 pb-16">
+          {filters.orphans && (
+            <FindingSection
+              title={`Orphans (${findings.orphans.length})`}
+              hint="No links in or out."
+              color={FINDING_COLORS.orphan}
+              nodes={findings.orphans}
+              selectedId={selectedId}
+              onSelect={select}
+              onOpen={openNote}
+            />
+          )}
+          {filters.unreachable && (
+            <FindingSection
+              title={`Unreachable from root (${findings.unreachable.length})`}
+              hint="No link path from the graph root reaches these."
+              color={FINDING_COLORS.unreachable}
+              nodes={findings.unreachable}
+              selectedId={selectedId}
+              onSelect={select}
+              onOpen={openNote}
+            />
+          )}
+          {filters.broken && (
+            <section>
+              <SectionHeading
+                title={`Broken links (${findings.brokenLinks.length})`}
+                hint="Wiki links whose target resolves to nothing."
+                color={FINDING_COLORS.broken}
+              />
+              <FindingRows
+                empty={findings.brokenLinks.length === 0}
+                rows={findings.brokenLinks.map((b, i) => ({
+                  key: `b${i}`,
+                  title: `[[${b.target}]]`,
+                  sub: `in ${b.sourcePath}`,
+                  onClick: () => openNote(b.sourcePath),
+                }))}
+              />
+            </section>
+          )}
+          {filters.stale && (
+            <FindingSection
+              title={`Stale notes (${findings.stale.length})`}
+              hint={`Untouched for over ${findings.staleDays} days.`}
+              color={FINDING_COLORS.stale}
+              nodes={findings.stale}
+              subOf={(n) => `${(n as GraphNodePayload & { updated: string }).updated} · ${n.path}`}
+              selectedId={selectedId}
+              onSelect={select}
+              onOpen={openNote}
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function SectionHeading({
+  title,
+  hint,
+  color,
+}: {
+  title: string;
+  hint: string;
+  color: string;
+}) {
+  return (
+    <>
+      <h2 className="flex items-center gap-2 text-sm font-medium text-foreground">
+        <span
+          className="h-2.5 w-2.5 rounded-full"
+          style={{ backgroundColor: color }}
+        />
+        {title}
+      </h2>
+      <p className="mb-2 text-[11px] text-muted-foreground">{hint}</p>
+    </>
+  );
+}
+
+function FindingSection({
+  title,
+  hint,
+  color,
+  nodes,
+  subOf,
+  selectedId,
+  onSelect,
+  onOpen,
+}: {
+  title: string;
+  hint: string;
+  color: string;
+  nodes: GraphNodePayload[];
+  subOf?: (node: GraphNodePayload) => string;
+  selectedId: number | null;
+  onSelect: (id: number) => void;
+  onOpen: (path: string) => void;
+}) {
+  return (
+    <section>
+      <SectionHeading title={title} hint={hint} color={color} />
+      <FindingRows
+        empty={nodes.length === 0}
+        rows={nodes.map((node) => ({
+          key: String(node.id),
+          nodeId: node.id,
+          title: node.title || node.path,
+          sub: subOf ? subOf(node) : node.path,
+          active: node.id === selectedId,
+          onClick: () => onSelect(node.id),
+          onDoubleClick: () => onOpen(node.path),
+        }))}
+      />
+    </section>
+  );
+}
+
+function FindingRows({
+  rows,
+  empty,
+}: {
+  empty: boolean;
+  rows: {
+    key: string;
+    nodeId?: number;
+    title: string;
+    sub: string;
+    active?: boolean;
+    onClick: () => void;
+    onDoubleClick?: () => void;
+  }[];
+}) {
+  if (empty) {
+    return (
+      <p className="rounded-lg border border-border-subtle bg-surface px-3 py-2 text-xs text-muted-foreground">
+        Nothing found — clean.
+      </p>
+    );
+  }
+  return (
+    <div className="divide-y divide-border/40 overflow-hidden rounded-lg border border-border bg-surface">
+      {rows.map((row) => (
+        <button
+          key={row.key}
+          data-node-id={row.nodeId}
+          onClick={row.onClick}
+          onDoubleClick={row.onDoubleClick}
+          className={cn(
+            "flex min-h-11 w-full flex-col justify-center px-3 py-2 text-left transition-colors",
+            row.active ? "bg-surface-raised" : "hover:bg-surface-raised/60"
+          )}
+        >
+          <span className="truncate text-xs text-foreground">{row.title}</span>
+          <span className="truncate font-mono text-[10px] text-muted-foreground/60">
+            {row.sub}
+          </span>
+        </button>
+      ))}
+    </div>
+  );
+}