@schlessera/brain-ui-react 0.35.0 → 0.37.0

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

@@ -15,23 +15,26 @@ import type {
 import { useGraphStore } from "../../stores/graph-store.js";
 import { useUIStore } from "../../stores/ui-store.js";
 import { useFileStore } from "../../stores/file-store.js";
-import { apiBase } from "../../lib/backend.js";
-import { GraphControls } from "./graph-controls.js";
+import { useBrainUiRoot } from "../../root-context.js";
+import { GraphControls, WIDE_QUERY } from "./graph-controls.js";
 import { NodePopover } from "./node-popover.js";
+import { useMediaQuery } from "../../hooks/use-media-query.js";
 import { GraphEmptyState, Mono } from "./graph-empty-state.js";
 import { GraphCanvas } from "./graph-canvas-lazy.js";
 import { CenteredSpinner } from "./graph-spinner.js";
 import {
-  OTHER_COLOR,
   assignFolderColors,
   buildQuery,
   communityColor,
   distanceColor,
+  entityKind,
+  entityLegend,
   groupCommunities,
   matchScene,
   topLevelDir,
+  type CanvasPalette,
 } from "./lib/graph-helpers.js";
-import { useGraphTheme } from "./use-graph-theme.js";
+import { useGraphTheme, type EntityColors } from "./use-graph-theme.js";
 import { cn } from "../../lib/utils.js";
 
 /** Client force layout is a fallback for repos whose FA2 layout was skipped —
@@ -52,6 +55,9 @@ export function SceneBody() {
   const discoveryColorBy = useGraphStore((s) => s.discoveryColorBy);
   const theme = useGraphTheme();
   const [listOpen, setListOpen] = useState(false);
+  // From `wide:` the D6 right rail draws the selected node; the floating
+  // card would double it.
+  const wide = useMediaQuery(WIDE_QUERY);
 
   const matchIds = useMemo(
     () => matchScene(subgraph.nodes, sceneQuery),
@@ -72,28 +78,58 @@ export function SceneBody() {
     [subgraph.nodes]
   );
 
+  // The colouring rule (sixth pass §7) applies to the two modes drawn
+  // around a focus node; Clusters IS the topic colouring. The focus node
+  // (Discovery's root, Local's centre — distance 0, or the virtual root)
+  // wears the amber of "the thing in focus" under every rule, as the kit's
+  // `GraphView` draws it.
+  const focused = mode === "discovery" || mode === "local";
+  const rule = focused ? discoveryColorBy : "topic";
+
+  // What the categorical legends describe: every node painted BY its category.
+  // The focus node (the local centre, an explicit root, or a virtual node) is
+  // painted amber whatever its type, folder or topic, so counting it under
+  // one would make the legend disagree with the canvas.
+  const legendNodes = useMemo(
+    () => subgraph.nodes.filter((n) => !(n.virtual === true || (focused && n.distance === 0))),
+    [subgraph.nodes, focused]
+  );
+
   const folderColors = useMemo(
     () =>
-      mode === "discovery" && discoveryColorBy === "folder"
-        ? assignFolderColors(subgraph.nodes.map((n) => n.path))
+      focused && rule === "folder"
+        ? assignFolderColors(legendNodes.map((n) => n.path), theme.palette)
         : null,
-    [mode, discoveryColorBy, subgraph.nodes]
+    [focused, rule, legendNodes, theme.palette]
   );
 
   const nodeColor = useMemo(() => {
-    if (mode === "discovery") {
-      if (folderColors) {
+    const isFocus = (node: GraphNodePayload) => node.virtual === true || (focused && node.distance === 0);
+    if (focused) {
+      if (rule === "folder" && folderColors) {
+        return (node: GraphNodePayload) =>
+          isFocus(node)
+            ? theme.nodeSelected
+            : (folderColors.get(topLevelDir(node.path)) ?? theme.palette.other);
+      }
+      if (rule === "entity") {
+        return (node: GraphNodePayload) =>
+          isFocus(node) ? theme.entity.focus : entityColor(node.type, theme.entity);
+      }
+      if (rule === "topic") {
         return (node: GraphNodePayload) =>
-          node.virtual
+          isFocus(node)
             ? theme.nodeSelected
-            : (folderColors.get(topLevelDir(node.path)) ?? OTHER_COLOR);
+            : node.community !== undefined
+              ? communityColor(node.community, theme.palette)
+              : theme.palette.other;
       }
       return (node: GraphNodePayload) =>
-        node.virtual ? theme.nodeSelected : distanceColor(node.distance ?? maxDistance);
+        isFocus(node) ? theme.nodeSelected : distanceColor(node.distance ?? maxDistance, theme.palette);
     }
     return (node: GraphNodePayload) =>
-      node.community !== undefined ? communityColor(node.community) : theme.node;
-  }, [mode, folderColors, maxDistance, theme]);
+      node.community !== undefined ? communityColor(node.community, theme.palette) : theme.node;
+  }, [focused, rule, folderColors, maxDistance, theme]);
 
   const centerId = useMemo(
     () =>
@@ -162,9 +198,18 @@ export function SceneBody() {
 
       <GraphControls />
 
-      {mode === "clusters" && <ClusterLegend />}
-      {mode === "discovery" && folderColors && (
-        <FolderLegend colors={folderColors} />
+      {/* The legend redraws per rule (sixth pass §7): it names what the
+          canvas is doing right now, never a constant. */}
+      {mode === "clusters" && <ClusterLegend palette={theme.palette} />}
+      {focused && rule === "folder" && folderColors && (
+        <FolderLegend colors={folderColors} other={theme.palette.other} />
+      )}
+      {focused && rule === "entity" && (
+        <EntityLegend nodes={legendNodes} colors={theme.entity} />
+      )}
+      {focused && rule === "topic" && <TopicLegend nodes={legendNodes} palette={theme.palette} />}
+      {focused && rule === "distance" && (
+        <DistanceLegend maxDistance={maxDistance} focus={mode === "local" ? "centre" : "root"} palette={theme.palette} />
       )}
       {mode === "discovery" && (
         <UnreachableTray count={subgraph.unreachableCount} />
@@ -181,7 +226,7 @@ export function SceneBody() {
       </button>
       {listOpen && <NodeList onClose={() => setListOpen(false)} />}
 
-      {selectedNode && (
+      {selectedNode && !wide && (
         <NodePopover node={selectedNode} communityLabel={communityLabel} />
       )}
     </>
@@ -189,7 +234,7 @@ export function SceneBody() {
 }
 
 /** Clusters mode: interactive community legend, top-left. */
-function ClusterLegend() {
+function ClusterLegend({ palette }: { palette: CanvasPalette }) {
   const meta = useGraphStore((s) => s.meta);
   const clusters = useGraphStore((s) => s.clusters);
   const setClustersParams = useGraphStore((s) => s.setClustersParams);
@@ -241,7 +286,7 @@ function ClusterLegend() {
               >
                 <span
                   className="h-2.5 w-2.5 shrink-0 rounded-full"
-                  style={{ backgroundColor: communityColor(c.community) }}
+                  style={{ backgroundColor: communityColor(c.community, palette) }}
                 />
                 <span className="min-w-0 flex-1 truncate text-xs text-foreground">
                   {c.label ?? `Topic ${c.community + 1}`}
@@ -256,7 +301,7 @@ function ClusterLegend() {
             <div className="flex items-center gap-2 px-2 py-1.5">
               <span
                 className="h-2.5 w-2.5 shrink-0 rounded-full"
-                style={{ backgroundColor: OTHER_COLOR }}
+                style={{ backgroundColor: palette.other }}
               />
               <span className="text-[11px] text-muted-foreground">
                 {foldedCount} smaller topic{foldedCount === 1 ? "" : "s"}
@@ -278,9 +323,130 @@ function ClusterLegend() {
   );
 }
 
+/** The kit's entity colour for a document type; neutral for the rest. */
+function entityColor(type: string, colors: EntityColors): string {
+  const kind = entityKind(type);
+  return kind ? colors[kind] : colors.other;
+}
+
+/**
+ * Colour-by-entity: the document types in the scene, the three entity kinds
+ * in their kit colours first, every other type in the neutral ink under its
+ * own name. The focus node is listed as what it is — amber, "focus" — so the
+ * one node whose colour is not its type is accounted for.
+ */
+function EntityLegend({ nodes, colors }: { nodes: GraphNodePayload[]; colors: EntityColors }) {
+  const rows = useMemo(() => entityLegend(nodes), [nodes]);
+  return (
+    <div
+      className="absolute left-3 top-3 z-10 w-48 rounded-xl border border-border bg-surface-overlay/95 px-3 py-2 shadow-xl backdrop-blur"
+      data-legend="entity"
+    >
+      <div className="mb-1 text-xs font-medium text-foreground">Entity type</div>
+      <LegendRow color={colors.focus} label="focus" mono={false} />
+      {rows.map((row) => (
+        <LegendRow
+          key={row.type}
+          color={row.kind ? colors[row.kind] : colors.other}
+          label={row.type}
+          count={row.count}
+        />
+      ))}
+    </div>
+  );
+}
+
+/**
+ * Colour-by-topic outside Clusters mode: read-only — the topic FILTER is
+ * Clusters' own — listing the communities present in this scene. A corpus
+ * with no computed topics says so rather than showing an empty box.
+ */
+function TopicLegend({ nodes, palette }: { nodes: GraphNodePayload[]; palette: CanvasPalette }) {
+  const meta = useGraphStore((s) => s.meta);
+  const rows = useMemo(() => {
+    const counts = new Map<number, number>();
+    for (const node of nodes) {
+      if (node.community === undefined || node.virtual) continue;
+      counts.set(node.community, (counts.get(node.community) ?? 0) + 1);
+    }
+    // The eight largest, folded past that like the cluster legend: a node
+    // on the canvas whose colour has no row is a legend that lies by
+    // omission. (Communities past the palette share the recessive colour anyway.)
+    const all = [...counts.entries()].sort((a, b) => b[1] - a[1] || a[0] - b[0]);
+    return { rows: all.slice(0, 8), folded: all.slice(8).reduce((n, [, c]) => n + c, 0), foldedTopics: Math.max(0, all.length - 8) };
+  }, [nodes]);
+  return (
+    <div
+      className="absolute left-3 top-3 z-10 w-48 rounded-xl border border-border bg-surface-overlay/95 px-3 py-2 shadow-xl backdrop-blur"
+      data-legend="topic"
+    >
+      <div className="mb-1 text-xs font-medium text-foreground">Topics</div>
+      {rows.rows.length === 0 ? (
+        <div className="font-mono text-[10px] text-muted-foreground">
+          no topics computed · run <Mono>brain sync</Mono>
+        </div>
+      ) : (
+        <>
+          {rows.rows.map(([community, count]) => (
+            <LegendRow
+              key={community}
+              color={communityColor(community, palette)}
+              label={meta?.communities.find((c) => c.community === community)?.label ?? `Topic ${community + 1}`}
+              count={count}
+              mono={false}
+            />
+          ))}
+          {rows.foldedTopics > 0 && (
+            <LegendRow
+              color={palette.other}
+              label={`${rows.foldedTopics} smaller topic${rows.foldedTopics === 1 ? "" : "s"}`}
+              count={rows.folded}
+              mono={false}
+            />
+          )}
+        </>
+      )}
+    </div>
+  );
+}
+
+/** Colour-by-distance: the amber focus, then the ramp one hop at a time. */
+function DistanceLegend({ maxDistance, focus, palette }: { maxDistance: number; focus: "root" | "centre"; palette: CanvasPalette }) {
+  const hops = Array.from({ length: Math.min(maxDistance, 5) }, (_, i) => i + 1);
+  return (
+    <div
+      className="absolute left-3 top-3 z-10 w-48 rounded-xl border border-border bg-surface-overlay/95 px-3 py-2 shadow-xl backdrop-blur"
+      data-legend="distance"
+    >
+      <div className="mb-1 text-xs font-medium text-foreground">Distance</div>
+      <LegendRow color={distanceColor(0, palette)} label={focus} mono={false} />
+      {hops.map((hop) => (
+        <LegendRow
+          key={hop}
+          color={distanceColor(hop, palette)}
+          label={hop === 5 && maxDistance > 5 ? `${hop}+ hops` : `${hop} hop${hop === 1 ? "" : "s"}`}
+          mono={false}
+        />
+      ))}
+    </div>
+  );
+}
+
+function LegendRow({ color, label, count, mono = true }: { color: string; label: string; count?: number; mono?: boolean }) {
+  return (
+    <div className="flex min-h-6 items-center gap-2">
+      <span className="h-2.5 w-2.5 shrink-0 rounded-full" style={{ backgroundColor: color }} />
+      <span className={cn("min-w-0 flex-1 truncate text-muted-foreground", mono ? "font-mono text-[11px]" : "text-[11px]")}>
+        {label}
+      </span>
+      {count !== undefined && <span className="shrink-0 text-[10px] text-muted-foreground">{count}</span>}
+    </div>
+  );
+}
+
 /** Discovery + color-by-folder: which top-level dir wears which color. */
-function FolderLegend({ colors }: { colors: Map<string, string> }) {
-  const entries = [...colors.entries()].filter(([, c]) => c !== OTHER_COLOR);
+function FolderLegend({ colors, other }: { colors: Map<string, string>; other: string }) {
+  const entries = [...colors.entries()].filter(([, c]) => c !== other);
   const otherCount = colors.size - entries.length;
   if (entries.length === 0) return null;
   return (
@@ -301,7 +467,7 @@ function FolderLegend({ colors }: { colors: Map<string, string> }) {
         <div className="flex min-h-6 items-center gap-2">
           <span
             className="h-2.5 w-2.5 shrink-0 rounded-full"
-            style={{ backgroundColor: OTHER_COLOR }}
+            style={{ backgroundColor: other }}
           />
           <span className="text-[11px] text-muted-foreground">
             {otherCount} more
@@ -320,6 +486,7 @@ function FolderLegend({ colors }: { colors: Map<string, string> }) {
  * maintenance findings still provide the exact list, and shows no number.
  */
 function UnreachableTray({ count }: { count: number | undefined }) {
+  const root = useBrainUiRoot();
   const discovery = useGraphStore((s) => s.discovery);
   const staleDays = useGraphStore((s) => s.maintenance.staleDays);
   const openFile = useFileStore((s) => s.openFile);
@@ -327,6 +494,7 @@ function UnreachableTray({ count }: { count: number | undefined }) {
   const [open, setOpen] = useState(false);
   const [nodes, setNodes] = useState<GraphNodePayload[] | null>(null);
 
+  useEffect(() => { setNodes(null); setOpen(false); }, [root]);
   const isDefaultRoot = !discovery.root;
   // Older server, no count field: the maintenance list is the only honest
   // source, so it must be fetched EAGERLY — the chip may only appear once
@@ -339,8 +507,8 @@ function UnreachableTray({ count }: { count: number | undefined }) {
     let cancelled = false;
     void (async () => {
       try {
-        const res = await fetch(
-          `${apiBase()}/graph/maintenance?${buildQuery({ staleDays })}`
+        const res = await root.request(
+          `${root.apiBase()}/graph/maintenance?${buildQuery({ staleDays })}`
         );
         if (!res.ok) return;
         const data = (await res.json()) as GraphMaintenanceResponse;
@@ -352,7 +520,7 @@ function UnreachableTray({ count }: { count: number | undefined }) {
     return () => {
       cancelled = true;
     };
-  }, [open, needsFallbackProof, isDefaultRoot, nodes, staleDays]);
+  }, [open, needsFallbackProof, isDefaultRoot, nodes, staleDays, root]);
 
   if (count === 0) return null;
   // No server count and no exact list available: nothing honest to show.
@@ -414,17 +582,19 @@ function UnreachableTray({ count }: { count: number | undefined }) {
  * inviting — index notes are the natural candidates.
  */
 export function DiscoveryStart() {
+  const root = useBrainUiRoot();
   const setDiscoveryParams = useGraphStore((s) => s.setDiscoveryParams);
   const [candidates, setCandidates] = useState<
     { path: string; title: string }[] | null
   >(null);
 
   useEffect(() => {
+    setCandidates(null);
     let cancelled = false;
     void (async () => {
       try {
-        const res = await fetch(
-          `${apiBase()}/brain/list?${buildQuery({ type: "index", limit: 6 })}`
+        const res = await root.request(
+          `${root.apiBase()}/brain/list?${buildQuery({ type: "index", limit: 6 })}`
         );
         if (!res.ok) return;
         const data = (await res.json()) as {
@@ -444,7 +614,7 @@ export function DiscoveryStart() {
     return () => {
       cancelled = true;
     };
-  }, []);
+  }, [root]);
 
   return (
     <>

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

@@ -129,39 +129,29 @@ export function nodeSize(
 
 // --- 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;
+// The canvas draws with VALUES, not CSS, so its palette arrives resolved: the
+// kit's `--bk-canvas-*` tokens read for the scheme the page is in (see
+// `use-graph-theme.ts`). Both sets are the kit's — the dark one ran through
+// the dataviz validator against #0c0e12 (lightness band, chroma floor, CVD
+// separation, 3:1), the paper one is the design's, each mark at 3:1 against
+// #ece7dc. Slot ORDER is the CVD-safety mechanism and is the same in both
+// themes: a theme may respell a slot, never reorder one.
+
+export interface CanvasPalette {
+  /** Eight categorical slots, in the frozen order. Community/folder identity. */
+  slots: readonly string[];
+  /** Ordinal distance ramp, near to far (five visible steps). */
+  ramp: readonly string[];
+  /** The root's own colour in discovery mode (the focus amber). */
+  root: string;
+  /** Recessive slot for everything past the eight distinguishable ones. */
+  other: string;
+  /** The maintenance lenses. */
+  lens: { orphan: string; unreachable: string; broken: string; stale: string };
+}
+
+/** How many communities or folders get a slot of their own before the tail folds. */
+export const SLOT_COUNT = 8;
 
 /**
  * Linear blend of two hex colors: t=0 → a, t=1 → b. Used for the gentle
@@ -191,16 +181,14 @@ function parseHex(color: string): [number, number, number] | null {
  * 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;
+export function communityColor(community: number, palette: CanvasPalette): string {
+  return community < palette.slots.length ? palette.slots[community]! : palette.other;
 }
 
-/** 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)]!;
+/** Color for a BFS distance: the root, then the ramp fading out hop by hop. */
+export function distanceColor(distance: number, palette: CanvasPalette): string {
+  if (distance <= 0) return palette.root;
+  return palette.ramp[Math.min(distance - 1, palette.ramp.length - 1)]!;
 }
 
 /** First path segment — "career/opportunities/x.md" → "career". */
@@ -213,7 +201,7 @@ export function topLevelDir(path: string): string {
  * 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> {
+export function assignFolderColors(paths: string[], palette: CanvasPalette): Map<string, string> {
   const counts = new Map<string, number>();
   for (const path of paths) {
     const dir = topLevelDir(path);
@@ -224,7 +212,7 @@ export function assignFolderColors(paths: string[]): Map<string, string> {
   );
   const colors = new Map<string, string>();
   ranked.forEach(([dir], i) => {
-    colors.set(dir, i < CATEGORICAL_SLOTS.length ? CATEGORICAL_SLOTS[i]! : OTHER_COLOR);
+    colors.set(dir, i < palette.slots.length ? palette.slots[i]! : palette.other);
   });
   return colors;
 }
@@ -309,3 +297,37 @@ export function matchScene(
   }
   return matches;
 }
+
+// --- Entity colouring ---------------------------------------------------------
+
+/**
+ * The kit's entity mapping (its `GraphView`, `PathRef` and inline mentions):
+ * which document types wear which of the three entity colours. Every other
+ * type — note, journal, study, whatever the taxonomy names — takes the
+ * neutral ink and is listed in the legend under its own name, because a
+ * legend that hides a type is a legend that lies about a node.
+ */
+export type EntityKind = "person" | "company" | "project";
+
+export function entityKind(type: string): EntityKind | null {
+  return type === "person" || type === "company" || type === "project" ? type : null;
+}
+
+/** The scene's document types, entity kinds first in the kit's order, then
+ * the rest by count. Each carries how many nodes wear it. */
+export function entityLegend(nodes: { type: string; virtual?: boolean }[]): { type: string; kind: EntityKind | null; count: number }[] {
+  const counts = new Map<string, number>();
+  for (const node of nodes) {
+    if (node.virtual) continue;
+    counts.set(node.type, (counts.get(node.type) ?? 0) + 1);
+  }
+  const order: string[] = ["person", "company", "project"];
+  return [...counts.entries()]
+    .map(([type, count]) => ({ type, kind: entityKind(type), count }))
+    .sort((a, b) => {
+      const ia = order.indexOf(a.type);
+      const ib = order.indexOf(b.type);
+      if (ia !== -1 || ib !== -1) return (ia === -1 ? order.length : ia) - (ib === -1 ? order.length : ib);
+      return b.count - a.count || a.type.localeCompare(b.type);
+    });
+}

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

@@ -0,0 +1,64 @@
+import { Button, Chip, PathRef, Surface } from "@schlessera/brain-ui-kit";
+
+/**
+ * The selected node's card, rendered from props (S7). `NodePopover` is the
+ * container: it reads the graph, file and UI stores and decides which
+ * actions apply; this draws a kit `Surface` with the node's kind and topic
+ * as chips, its path as a `PathRef`, its degrees as machine meta, and the
+ * actions as kit `Button`s — "Open note" primary, the rest ghost.
+ */
+export interface NodeCardProps {
+  kind: string;
+  title: string;
+  path: string;
+  topic?: string | null;
+  /** The topic cluster's swatch colour, from the canvas's own palette. */
+  topicColor?: string;
+  inDegree: number;
+  outDegree: number;
+  /** Hops from the centre; 0 or undefined draws nothing. */
+  distance?: number;
+  canOpen: boolean;
+  canFocus: boolean;
+  canExpand: boolean;
+  onOpen: () => void;
+  onFocus: () => void;
+  onExpand: () => void;
+  onClose: () => void;
+}
+
+export function NodeCard(p: NodeCardProps) {
+  const hops = p.distance !== undefined && p.distance > 0 ? `${p.distance} hop${p.distance === 1 ? "" : "s"}` : null;
+  return (
+    <div className="pointer-events-auto absolute inset-x-2 bottom-2 z-10 shadow-2xl md:inset-x-auto md:bottom-4 md:left-4 md:w-80">
+      <Surface emphasis="strong" pad={12}>
+        <div className="flex items-start justify-between gap-2">
+          <div className="flex min-w-0 flex-wrap items-center gap-1.5">
+            <Chip label={p.kind} variant="kv" tone="neutral" caps />
+            {p.topic && (
+              <span title="Topic cluster inferred from this note's links" className="flex min-w-0 items-center gap-1.5">
+                {p.topicColor && <span aria-hidden="true" className="h-1.5 w-1.5 shrink-0 rounded-full" style={{ backgroundColor: p.topicColor }} />}
+                <Chip label={`topic: ${p.topic}`} variant="kv" tone="purple" />
+              </span>
+            )}
+          </div>
+          <Button label="Close" icon="dismiss" tone="quiet" size="sm" block={false} onClick={p.onClose} />
+        </div>
+        <h3 className="mt-2 truncate text-sm font-medium text-foreground">{p.title}</h3>
+        <div className="mt-1 flex min-w-0">
+          <PathRef text={p.path} variant="inline" tone="teal" icon="file" />
+        </div>
+        <div className="mt-2 flex gap-4 font-[family-name:var(--font-mono)] text-[11px] text-muted-foreground">
+          <span>{p.inDegree} in</span>
+          <span>{p.outDegree} out</span>
+          {hops && <span>{hops}</span>}
+        </div>
+        <div className="mt-3 flex flex-wrap gap-2">
+          {p.canOpen && <Button label="Open note" icon="file" tone="primary" size="sm" block={false} onClick={p.onOpen} />}
+          {p.canFocus && <Button label="Focus here" icon="graph" tone="ghost" size="sm" block={false} onClick={p.onFocus} />}
+          {p.canExpand && <Button label="Expand" icon="expand" tone="ghost" size="sm" block={false} onClick={p.onExpand} />}
+        </div>
+      </Surface>
+    </div>
+  );
+}