@schlessera/brain-ui-react 0.34.0 → 0.34.1

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

@@ -1,15 +1,28 @@
 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";
 
 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 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 +31,31 @@ export function ConnectionGate({ children }: { children: ReactNode }) {
     if (vpnStatus === "connected") setEverConnected(true);
   }, [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 +63,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 +131,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 +159,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>
+  );
+}