@schlessera/brain-ui-react 0.6.3 → 0.7.1

package/src/components/graph/lib/graph-helpers.ts

@@ -0,0 +1,311 @@
+/**
+ * Pure helpers for the graph view. No sigma, no DOM, no fetch — everything
+ * here is deterministic and unit-tested. The canvas and store consume these;
+ * keeping them pure is what makes the renderer swappable.
+ */
+import type {
+  GraphNodePayload,
+  GraphSubgraphResponse,
+} from "@schlessera/brain-ui-sdk/protocol";
+
+// --- Query strings -----------------------------------------------------------
+
+/**
+ * Build a query string from a param bag. null/undefined/empty-string values
+ * are dropped; everything else is encoded. Returns "" when nothing survives.
+ */
+export function buildQuery(
+  params: Record<string, string | number | boolean | null | undefined>
+): string {
+  const parts: string[] = [];
+  for (const [key, value] of Object.entries(params)) {
+    if (value === null || value === undefined || value === "") continue;
+    parts.push(`${encodeURIComponent(key)}=${encodeURIComponent(String(value))}`);
+  }
+  return parts.join("&");
+}
+
+// --- Subgraph merging --------------------------------------------------------
+
+/**
+ * Merge an expansion fetch into the current scene. Nodes dedupe by id — the
+ * richer record wins (more analytical fields), which in practice means an
+ * existing node keeps its coordinates/metrics when the expansion returns a
+ * barer copy. Edges dedupe by (source, target).
+ */
+export function mergeSubgraphs(
+  base: GraphSubgraphResponse,
+  addition: GraphSubgraphResponse
+): GraphSubgraphResponse {
+  const nodesById = new Map<number, GraphNodePayload>();
+  for (const node of base.nodes) nodesById.set(node.id, node);
+  for (const node of addition.nodes) {
+    const existing = nodesById.get(node.id);
+    nodesById.set(node.id, existing ? { ...node, ...existing } : node);
+  }
+  const edgeKeys = new Set<string>();
+  const edges = [] as GraphSubgraphResponse["edges"];
+  for (const edge of [...base.edges, ...addition.edges]) {
+    const key = `${edge.source}->${edge.target}`;
+    if (edgeKeys.has(key)) continue;
+    edgeKeys.add(key);
+    edges.push(edge);
+  }
+  return {
+    nodes: [...nodesById.values()],
+    edges,
+    truncated: base.truncated || addition.truncated,
+  };
+}
+
+// --- Radial (discovery) layout ----------------------------------------------
+
+export interface RadialPoint {
+  x: number;
+  y: number;
+}
+
+/**
+ * Deterministic radial layout for discovery mode: radius = BFS distance,
+ * nodes ordered within their ring by id (stable across refetches), the root
+ * (distance 0) at the origin. Rings get a slight angular offset per ring so
+ * spokes don't visually align into artificial lines.
+ */
+export function radialLayout(
+  nodes: Pick<GraphNodePayload, "id" | "distance">[],
+  ringSpacing = 1
+): Map<number, RadialPoint> {
+  const rings = new Map<number, number[]>();
+  for (const node of nodes) {
+    const d = node.distance ?? 0;
+    const ring = rings.get(d) ?? [];
+    ring.push(node.id);
+    rings.set(d, ring);
+  }
+  const positions = new Map<number, RadialPoint>();
+  for (const [distance, ids] of rings) {
+    ids.sort((a, b) => a - b);
+    const radius = distance * ringSpacing;
+    const offset = distance * 0.5; // radians; de-aligns consecutive rings
+    ids.forEach((id, i) => {
+      if (distance === 0) {
+        positions.set(id, { x: 0, y: 0 });
+        return;
+      }
+      const angle = offset + (2 * Math.PI * i) / ids.length;
+      positions.set(id, {
+        x: radius * Math.cos(angle),
+        y: radius * Math.sin(angle),
+      });
+    });
+  }
+  return positions;
+}
+
+// --- Node sizing -------------------------------------------------------------
+
+export type SizeBy = "degree" | "pagerank";
+
+/**
+ * Node size in rendered pixels. Sqrt scale keeps hubs prominent without
+ * letting a 45-in-degree hub dwarf the scene.
+ */
+export function nodeSize(
+  node: Pick<GraphNodePayload, "inDegree" | "outDegree" | "pagerank" | "virtual">,
+  sizeBy: SizeBy = "degree",
+  min = 3,
+  max = 14
+): number {
+  if (node.virtual) return max;
+  let value: number;
+  if (sizeBy === "pagerank" && node.pagerank !== undefined) {
+    // Typical pagerank values are ~1/n; normalize into a usable range.
+    value = node.pagerank * 1000;
+  } else {
+    value = node.inDegree + node.outDegree;
+  }
+  return Math.max(min, Math.min(max, min + Math.sqrt(value) * 1.8));
+}
+
+// --- Palettes ----------------------------------------------------------------
+//
+// Both palettes ran through the dataviz validator against the app surface
+// (#0c0e12, dark): the categorical set passes lightness band, chroma floor,
+// CVD separation (worst adjacent ΔE 8.4), normal-vision floor and 3:1
+// contrast; the distance ramp passes monotone-lightness, step-gap, light-end
+// contrast and single-hue checks. Slot ORDER is the CVD-safety mechanism —
+// do not reorder without re-validating.
+
+/** Fixed categorical slots (validated, dark). Community/folder identity. */
+export const CATEGORICAL_SLOTS = [
+  "#3987e5", // blue
+  "#d95926", // orange
+  "#199e70", // aqua
+  "#c98500", // yellow
+  "#d55181", // magenta
+  "#008300", // green
+  "#9085e9", // violet
+  "#e66767", // red
+] as const;
+
+/** Recessive slot for everything past the eight distinguishable ones. */
+export const OTHER_COLOR = "#565b66";
+
+/** The root's own color in discovery mode (the app's amber primary). */
+export const ROOT_COLOR = "#e09f3e";
+
+/** Ordinal distance ramp, near → far (validated, 5 visible steps). */
+export const DISTANCE_RAMP = [
+  "#b7d3f6",
+  "#86b6ef",
+  "#5598e7",
+  "#2a78d6",
+  "#184f95",
+] as const;
+
+/**
+ * Linear blend of two hex colors: t=0 → a, t=1 → b. Used for the gentle
+ * non-match fade during search highlight (half the strength of the hover
+ * fade, which jumps straight to the edge color). Falls back to `b` when a
+ * color is not parseable hex, so a bad token degrades to the strong fade
+ * rather than an invalid color string.
+ */
+export function mixColors(a: string, b: string, t: number): string {
+  const pa = parseHex(a);
+  const pb = parseHex(b);
+  if (!pa || !pb) return b;
+  const clamp = Math.max(0, Math.min(1, t));
+  const channel = (i: number) => Math.round(pa[i]! + (pb[i]! - pa[i]!) * clamp);
+  return `#${[0, 1, 2].map((i) => channel(i).toString(16).padStart(2, "0")).join("")}`;
+}
+
+function parseHex(color: string): [number, number, number] | null {
+  const m = /^#?([0-9a-f]{6})$/i.exec(color.trim());
+  if (!m) return null;
+  const n = parseInt(m[1]!, 16);
+  return [(n >> 16) & 0xff, (n >> 8) & 0xff, n & 0xff];
+}
+
+/**
+ * Color for a community. Communities are numbered by size (0 = largest) at
+ * index time, so the first eight — the ones a legend can carry — get the
+ * distinguishable slots and the long tail shares one recessive color.
+ */
+export function communityColor(community: number): string {
+  return community < CATEGORICAL_SLOTS.length
+    ? CATEGORICAL_SLOTS[community]!
+    : OTHER_COLOR;
+}
+
+/** Color for a BFS distance: amber root, then the blue ramp fading out. */
+export function distanceColor(distance: number): string {
+  if (distance <= 0) return ROOT_COLOR;
+  return DISTANCE_RAMP[Math.min(distance - 1, DISTANCE_RAMP.length - 1)]!;
+}
+
+/** First path segment — "career/opportunities/x.md" → "career". */
+export function topLevelDir(path: string): string {
+  const slash = path.indexOf("/");
+  return slash === -1 ? "" : path.slice(0, slash);
+}
+
+/**
+ * Assign categorical slots to top-level directories, biggest first — the
+ * same eight-then-other policy as communities. Returns dir → color.
+ */
+export function assignFolderColors(paths: string[]): Map<string, string> {
+  const counts = new Map<string, number>();
+  for (const path of paths) {
+    const dir = topLevelDir(path);
+    counts.set(dir, (counts.get(dir) ?? 0) + 1);
+  }
+  const ranked = [...counts.entries()].sort(
+    (a, b) => b[1] - a[1] || a[0].localeCompare(b[0])
+  );
+  const colors = new Map<string, string>();
+  ranked.forEach(([dir], i) => {
+    colors.set(dir, i < CATEGORICAL_SLOTS.length ? CATEGORICAL_SLOTS[i]! : OTHER_COLOR);
+  });
+  return colors;
+}
+
+// --- Community legend grouping ----------------------------------------------
+
+export interface LegendGroups<T extends { community: number; size: number }> {
+  /** Multi-note communities, size-descending — what the legend lists. */
+  major: T[];
+  /** Number of single-note communities folded out of the legend. */
+  singletonCount: number;
+}
+
+/** Split a community list into legend-worthy entries and the singleton tail. */
+export function groupCommunities<T extends { community: number; size: number }>(
+  communities: T[]
+): LegendGroups<T> {
+  const major = communities
+    .filter((c) => c.size > 1)
+    .sort((a, b) => b.size - a.size || a.community - b.community);
+  return { major, singletonCount: communities.length - major.length };
+}
+
+// --- Label policy ------------------------------------------------------------
+
+export interface LabelPolicyInput {
+  nodes: Pick<GraphNodePayload, "id" | "inDegree" | "outDegree" | "pagerank" | "virtual">[];
+  selectedId: number | null;
+  hoveredId: number | null;
+  matchIds: ReadonlySet<number>;
+  /** Camera ratio — sigma's zoom, 1 = fit, smaller = zoomed in. */
+  cameraRatio: number;
+}
+
+/**
+ * Which nodes must always carry a label: selection, hover, search matches,
+ * the virtual root, plus the top-K nodes by rank where K grows as the user
+ * zooms in. Never "all labels" — the renderer's own density threshold handles
+ * the rest.
+ */
+export function labelSet(input: LabelPolicyInput): Set<number> {
+  const forced = new Set<number>();
+  if (input.selectedId !== null) forced.add(input.selectedId);
+  if (input.hoveredId !== null) forced.add(input.hoveredId);
+  for (const id of input.matchIds) forced.add(id);
+  for (const node of input.nodes) if (node.virtual) forced.add(node.id);
+
+  // Zoomed out (ratio >= 1): a handful of anchors. Each halving of the ratio
+  // doubles the quota. Capped so a deep zoom cannot force thousands.
+  const zoomFactor = Math.max(0.05, Math.min(4, input.cameraRatio));
+  const quota = Math.min(60, Math.max(4, Math.round(8 / zoomFactor)));
+
+  const ranked = [...input.nodes].sort((a, b) => rank(b) - rank(a));
+  for (let i = 0; i < Math.min(quota, ranked.length); i++) {
+    forced.add(ranked[i]!.id);
+  }
+  return forced;
+}
+
+function rank(
+  node: Pick<GraphNodePayload, "inDegree" | "outDegree" | "pagerank">
+): number {
+  return node.pagerank !== undefined
+    ? node.pagerank
+    : (node.inDegree + node.outDegree) / 1e6;
+}
+
+// --- Scene search ------------------------------------------------------------
+
+/** Ids of nodes whose title or path matches the in-scene query. */
+export function matchScene(
+  nodes: Pick<GraphNodePayload, "id" | "title" | "path">[],
+  query: string
+): Set<number> {
+  const q = query.trim().toLowerCase();
+  const matches = new Set<number>();
+  if (q.length < 2) return matches;
+  for (const node of nodes) {
+    if (node.title.toLowerCase().includes(q) || node.path.toLowerCase().includes(q)) {
+      matches.add(node.id);
+    }
+  }
+  return matches;
+}

package/src/components/graph/node-popover.tsx

@@ -0,0 +1,135 @@
+import { X, FileText, Crosshair, Expand } from "lucide-react";
+import type { GraphNodePayload } from "@schlessera/brain-ui-sdk/protocol";
+import { useFileStore } from "../../stores/file-store.js";
+import { useUIStore } from "../../stores/ui-store.js";
+import { useGraphStore } from "../../stores/graph-store.js";
+import { communityColor } from "./lib/graph-helpers.js";
+
+/**
+ * Detail card for the selected node, docked to the bottom-left of the canvas
+ * (bottom sheet width on phones). "Open note" hands over to the file viewer
+ * panel — the same hand-off the search modal uses.
+ */
+export function NodePopover({
+  node,
+  communityLabel,
+}: {
+  node: GraphNodePayload;
+  communityLabel?: string | null;
+}) {
+  const openFile = useFileStore((s) => s.openFile);
+  const setFilePanelOpen = useUIStore((s) => s.setFilePanelOpen);
+  const mode = useGraphStore((s) => s.mode);
+  const select = useGraphStore((s) => s.select);
+  const setMode = useGraphStore((s) => s.setMode);
+  const setLocalParams = useGraphStore((s) => s.setLocalParams);
+  const expandNode = useGraphStore((s) => s.expandNode);
+
+  const isVirtual = node.virtual === true;
+
+  function handleOpen() {
+    setFilePanelOpen(true);
+    void openFile(node.path);
+  }
+
+  function handleFocus() {
+    // Re-center the local view on this node (switching mode when needed).
+    if (mode !== "local") setMode("local");
+    setLocalParams({ center: node.path });
+    select(null);
+  }
+
+  return (
+    <div className="pointer-events-auto absolute inset-x-2 bottom-2 z-10 rounded-xl border border-border bg-surface-overlay/95 p-4 shadow-2xl backdrop-blur md:inset-x-auto md:left-4 md:bottom-4 md:w-80">
+      <div className="flex items-start justify-between gap-2">
+        <div className="min-w-0">
+          <div className="flex items-center gap-2">
+            <span className="shrink-0 rounded bg-surface-raised px-1.5 py-0.5 text-[10px] uppercase tracking-wide text-muted-foreground">
+              {isVirtual ? "root" : node.type}
+            </span>
+            {communityLabel && (
+              <span
+                title="Topic cluster inferred from this note's links"
+                className="flex min-w-0 items-center gap-1 rounded bg-surface-raised px-1.5 py-0.5 text-[10px] text-muted-foreground"
+              >
+                {node.community !== undefined && (
+                  <span
+                    aria-hidden="true"
+                    className="h-1.5 w-1.5 shrink-0 rounded-full"
+                    style={{ backgroundColor: communityColor(node.community) }}
+                  />
+                )}
+                <span className="truncate">Topic: {communityLabel}</span>
+              </span>
+            )}
+          </div>
+          <h3 className="mt-1 truncate text-sm font-medium text-foreground">
+            {node.title || node.path}
+          </h3>
+          <p className="truncate font-mono text-[10px] text-muted-foreground/60">
+            {node.path}
+          </p>
+        </div>
+        <button
+          onClick={() => select(null)}
+          className="shrink-0 rounded p-1 text-muted-foreground transition-colors hover:text-foreground"
+          title="Close"
+        >
+          <X className="h-3.5 w-3.5" />
+        </button>
+      </div>
+
+      <div className="mt-2 flex gap-4 text-[11px] text-muted-foreground">
+        <span>{node.inDegree} in</span>
+        <span>{node.outDegree} out</span>
+        {node.distance !== undefined && node.distance > 0 && (
+          <span>
+            {node.distance} hop{node.distance === 1 ? "" : "s"}
+          </span>
+        )}
+      </div>
+
+      <div className="mt-3 flex flex-wrap gap-2">
+        {!isVirtual && (
+          <ActionButton icon={FileText} label="Open note" onClick={handleOpen} primary />
+        )}
+        {!isVirtual && (mode !== "local" || node.distance !== 0) && (
+          <ActionButton icon={Crosshair} label="Focus here" onClick={handleFocus} />
+        )}
+        {mode === "local" && !isVirtual && node.distance !== 0 && (
+          <ActionButton
+            icon={Expand}
+            label="Expand"
+            onClick={() => void expandNode(node.path)}
+          />
+        )}
+      </div>
+    </div>
+  );
+}
+
+function ActionButton({
+  icon: Icon,
+  label,
+  onClick,
+  primary,
+}: {
+  icon: typeof X;
+  label: string;
+  onClick: () => void;
+  primary?: boolean;
+}) {
+  return (
+    <button
+      onClick={onClick}
+      className={
+        primary
+          ? "flex min-h-9 items-center gap-1.5 rounded-lg bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground transition-colors hover:bg-primary/90"
+          : "flex min-h-9 items-center gap-1.5 rounded-lg bg-surface-raised px-3 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-surface-overlay"
+      }
+    >
+      <Icon className="h-3.5 w-3.5" />
+      {label}
+    </button>
+  );
+}

package/src/components/graph/use-graph-theme.ts

@@ -0,0 +1,51 @@
+import { useMemo } from "react";
+
+export interface GraphTheme {
+  background: string;
+  /** Raised surface used for the hover-label plate (sigma's default is #FFF,
+   * unreadable under our near-white label text). */
+  surfaceOverlay: string;
+  node: string;
+  nodeSelected: string;
+  edge: string;
+  edgeHighlight: string;
+  label: string;
+  labelMuted: string;
+}
+
+const FALLBACK: GraphTheme = {
+  background: "#0c0e12",
+  surfaceOverlay: "#1e2128",
+  node: "#8a8691",
+  nodeSelected: "#e09f3e",
+  edge: "#2a2d35",
+  edgeHighlight: "#5bb5a2",
+  label: "#e8e4df",
+  labelMuted: "#8a8691",
+};
+
+/**
+ * Resolve the Tailwind theme tokens into concrete colors for the canvas —
+ * WebGL cannot read CSS custom properties itself. Read once per mount; the
+ * app is dark-only, so tokens do not change at runtime.
+ */
+export function useGraphTheme(): GraphTheme {
+  return useMemo(() => {
+    if (typeof window === "undefined") return FALLBACK;
+    const style = getComputedStyle(document.documentElement);
+    const token = (name: string, fallback: string) => {
+      const value = style.getPropertyValue(name).trim();
+      return value || fallback;
+    };
+    return {
+      background: token("--color-background", FALLBACK.background),
+      surfaceOverlay: token("--color-surface-overlay", FALLBACK.surfaceOverlay),
+      node: token("--color-muted-foreground", FALLBACK.node),
+      nodeSelected: token("--color-primary", FALLBACK.nodeSelected),
+      edge: token("--color-border", FALLBACK.edge),
+      edgeHighlight: token("--color-accent", FALLBACK.edgeHighlight),
+      label: token("--color-foreground", FALLBACK.label),
+      labelMuted: token("--color-muted-foreground", FALLBACK.labelMuted),
+    };
+  }, []);
+}

package/src/components/layout/mobile-tab-bar.tsx

@@ -7,18 +7,29 @@ import {
   FolderTree,
   SquarePen,
   MoreHorizontal,
+  Waypoints,
 } from "lucide-react";
 import { useUIStore } from "../../stores/ui-store.js";
 import { useChatStore } from "../../stores/chat-store.js";
 import { cn } from "../../lib/utils.js";
 
 export function MobileTabBar() {
+  const activeView = useUIStore((s) => s.activeView);
+  const setActiveView = useUIStore((s) => s.setActiveView);
   const toggleSessionPanel = useUIStore((s) => s.toggleSessionPanel);
   const toggleSyncPanel = useUIStore((s) => s.toggleSyncPanel);
   const toggleFilePanel = useUIStore((s) => s.toggleFilePanel);
   const toggleSettingsPanel = useUIStore((s) => s.toggleSettingsPanel);
   const clearMessages = useChatStore((s) => s.clearMessages);
 
+  /** Chat-scoped panels live in the chat page — surface it before opening them. */
+  function inChat(toggle: () => void) {
+    return () => {
+      if (activeView !== "chat") setActiveView("chat");
+      toggle();
+    };
+  }
+
   const [moreOpen, setMoreOpen] = useState(false);
   const moreRef = useRef<HTMLDivElement>(null);
 
@@ -40,15 +51,27 @@ export function MobileTabBar() {
 
   return (
     <nav className="md:hidden fixed bottom-0 inset-x-0 z-30 flex h-14 items-center justify-around border-t border-border bg-surface px-1 pb-[env(safe-area-inset-bottom)]">
-      <TabIcon icon={Brain} label="Chat" active />
+      <TabIcon
+        icon={Brain}
+        label="Chat"
+        active={activeView === "chat"}
+        onClick={() => setActiveView("chat")}
+      />
       <TabIcon
         icon={SquarePen}
         label="New chat"
         onClick={() => {
           setMoreOpen(false);
+          setActiveView("chat");
           clearMessages();
         }}
       />
+      <TabIcon
+        icon={Waypoints}
+        label="Graph"
+        active={activeView === "graph"}
+        onClick={() => setActiveView("graph")}
+      />
       <TabIcon icon={FolderTree} label="Files" onClick={toggleFilePanel} />
       <div ref={moreRef} className="relative">
         <TabIcon
@@ -67,7 +90,7 @@ export function MobileTabBar() {
               label="Sync"
               onClick={() => {
                 setMoreOpen(false);
-                toggleSyncPanel();
+                inChat(toggleSyncPanel)();
               }}
             />
             <MoreItem
@@ -75,7 +98,7 @@ export function MobileTabBar() {
               label="History"
               onClick={() => {
                 setMoreOpen(false);
-                toggleSessionPanel();
+                inChat(toggleSessionPanel)();
               }}
             />
             <MoreItem

package/src/components/layout/side-rail.tsx

@@ -6,6 +6,7 @@ import {
   SlidersHorizontal,
   SquarePen,
   FolderTree,
+  Waypoints,
 } from "lucide-react";
 import { useConnectionStore } from "../../stores/connection-store.js";
 import { useUIStore } from "../../stores/ui-store.js";
@@ -14,6 +15,8 @@ import { cn } from "../../lib/utils.js";
 
 export function SideRail() {
   const wsStatus = useConnectionStore((s) => s.wsStatus);
+  const activeView = useUIStore((s) => s.activeView);
+  const setActiveView = useUIStore((s) => s.setActiveView);
   const toggleSessionPanel = useUIStore((s) => s.toggleSessionPanel);
   const toggleSyncPanel = useUIStore((s) => s.toggleSyncPanel);
   const toggleWhatsupPanel = useUIStore((s) => s.toggleWhatsupPanel);
@@ -23,6 +26,14 @@ export function SideRail() {
   const hasMessages = useChatStore((s) => activeChat(s).messages.length > 0);
   const isStreaming = useChatStore((s) => activeChat(s).isStreaming);
 
+  /** Chat-scoped panels live in the chat page — surface it before opening them. */
+  function inChat(toggle: () => void) {
+    return () => {
+      if (activeView !== "chat") setActiveView("chat");
+      toggle();
+    };
+  }
+
   return (
     <nav className="hidden md:flex w-16 shrink-0 flex-col items-center border-r border-border bg-surface py-4 gap-1">
       {/* Logo */}
@@ -46,13 +57,13 @@ export function SideRail() {
       <RailButton
         icon={RefreshCw}
         label="Sync"
-        onClick={toggleSyncPanel}
+        onClick={inChat(toggleSyncPanel)}
         disabled={isStreaming}
       />
       <RailButton
         icon={Newspaper}
         label="Whatsup"
-        onClick={toggleWhatsupPanel}
+        onClick={inChat(toggleWhatsupPanel)}
         disabled={isStreaming}
       />
       <RailButton
@@ -60,6 +71,14 @@ export function SideRail() {
         label="Files"
         onClick={toggleFilePanel}
       />
+      <RailButton
+        icon={Waypoints}
+        label="Graph"
+        active={activeView === "graph"}
+        onClick={() =>
+          setActiveView(activeView === "graph" ? "chat" : "graph")
+        }
+      />
 
       {/* Spacer */}
       <div className="flex-1" />
@@ -68,7 +87,7 @@ export function SideRail() {
       <RailButton
         icon={History}
         label="Sessions"
-        onClick={toggleSessionPanel}
+        onClick={inChat(toggleSessionPanel)}
       />
 
       {/* Settings (models, passkeys, sign out) */}
@@ -105,18 +124,23 @@ function RailButton({
   label,
   onClick,
   disabled,
+  active,
 }: {
   icon: typeof Brain;
   label: string;
   onClick: () => void;
   disabled?: boolean;
+  active?: boolean;
 }) {
   return (
     <button
       onClick={onClick}
       disabled={disabled}
       title={label}
-      className="group relative flex h-10 w-10 items-center justify-center rounded-lg text-muted-foreground transition-all duration-150 hover:bg-surface-raised hover:text-foreground hover:scale-110 disabled:opacity-40 disabled:hover:scale-100"
+      className={cn(
+        "group relative flex h-10 w-10 items-center justify-center rounded-lg transition-all duration-150 hover:bg-surface-raised hover:text-foreground hover:scale-110 disabled:opacity-40 disabled:hover:scale-100",
+        active ? "bg-surface-raised text-primary" : "text-muted-foreground"
+      )}
     >
       <Icon className="h-4.5 w-4.5" />
       {/* Tooltip */}

package/src/index.ts

@@ -15,6 +15,7 @@ export { configureBrainUi, uiConfig, type BrainUiConfig } from "./config.js";
 export { ConnectionGate } from "./components/connectivity/connection-gate.js";
 export { AppShell } from "./components/layout/app-shell.js";
 export { ChatPage } from "./components/chat/chat-page.js";
+export { GraphPage } from "./components/graph/graph-page.js";
 
 // Markdown renderer (also useful standalone, e.g. for a dev kitchen sink).
 export { BrainMarkdown } from "./components/chat/brain-markdown.js";
@@ -32,7 +33,8 @@ export {
   type MessageAttachment,
 } from "./stores/chat-store.js";
 export { useFileStore } from "./stores/file-store.js";
-export { useUIStore } from "./stores/ui-store.js";
+export { useUIStore, type ActiveView } from "./stores/ui-store.js";
+export { useGraphStore, type GraphMode } from "./stores/graph-store.js";
 export { useConnectionStore } from "./stores/connection-store.js";
 export { useProviderStore } from "./stores/provider-store.js";
 export { useVoiceStore } from "./voice/voice-store.js";