feat(node-ui): S5 — breadcrumb navigation; drop in-detail back button

Replace the in-detail "← Back to Context Graph" button with a persistent
breadcrumb in ProjectHeaderStrip, the sole back-affordance for both the
entity and assertion detail views.

- buildBreadcrumbHops: Context Graph › {Layer full-name | Subgraph
  displayName} › {entity | assertion name}. Middle hop is EITHER the
  layer OR the subgraph, never both (§4.7.1). First hop → overview;
  middle hop (when a detail is open) → restore the M2 origin; trailing
  hop is a non-interactive span ("you are here").
- ProjectHeaderStrip renders the hops inline in the existing
  .v10-project-strip flex row (does NOT stack), reusing
  .v10-project-strip-sep (now 6px each-side padding) for the › glyph.
  Clickable hops: --text-link + underline-on-hover + focus-visible ring;
  per-hop max-width 200px + ellipsis (first hop stays intact);
  unconditional title= tooltip on every hop. Removes the now-orphaned
  .v10-project-strip-name / -sg / -sg-icon rules.
- KADetailView drops its .v10-ka-back button + onClose prop; the
  breadcrumb drives close via ProjectView.handleDetailClose.
  AssertionDetailView never had a back button (S4 lock).
- ProjectView: ProjectHeaderStrip wired with activeLayer + detailLabel
  (entity label / assertion name) + onOverview (→ overview) +
  onRestoreOrigin (= handleDetailClose); KADetailView onClose removed.

Note: the .v10-ka-back CSS class is retained — AgentProfileView's
unrelated "← Back" still uses it (a shell-level back, sibling of the
protected PanelCenter "Back to Project"). The "Back to Context Graph"
label and the detail-view button are gone (T13 guards both).

Tests: T04/T05 (breadcrumb hop construction + cross-subgraph update,
helpers); T11/T12 (ellipsis tooltip + clickable/trailing affordance,
DOM); T13 (back-affordance-removed source guard); existing M2 close
tests rewired to the breadcrumb restore path; ka-detail-label updated to
assert the back button is gone.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: Jurij Skornik

packages/node-ui/src/ui/styles.css

@@ -7970,31 +7970,47 @@ body.light .v10-ka-graph-shell .v10-graph-canvas {
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--sg-color, #a855f7) 18%, transparent);
   flex-shrink: 0;
 }
-.v10-project-strip-name {
+/* S5 — breadcrumb hops live inline in the project strip. The
+   separator is the existing `.v10-project-strip-sep`, now with 6px of
+   each-side padding per the §4.7.1 visual spec. The prior
+   `.v10-project-strip-name` / `.v10-project-strip-sg` rules are gone —
+   the breadcrumb hops replace the project-name button + subgraph chip. */
+.v10-breadcrumb { display: flex; align-items: center; min-width: 0; }
+.v10-breadcrumb-hop {
   font-size: 13px; font-weight: 600;
-  color: var(--text-primary);
-  background: none; border: none; padding: 0;
-  cursor: pointer;
   font-family: var(--font-sans);
+  /* Shrink toward the middle hops; first hop keeps its natural width,
+     trailing hop is preserved most. */
+  flex: 0 1 auto; min-width: 0; max-width: 200px;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+/* First hop ("Context Graph") stays intact — it's the orientation
+   anchor; only the middle/trailing hops character-truncate. */
+.v10-breadcrumb-hop:first-child { flex: 0 0 auto; max-width: none; }
+.v10-breadcrumb-hop.link {
+  background: none; border: none; padding: 0;
+  color: var(--text-link); cursor: pointer;
   transition: color 0.15s;
 }
-.v10-project-strip-name:disabled {
-  cursor: default; opacity: 1;
+.v10-breadcrumb-hop.link:hover {
+  text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 2px;
 }
-.v10-project-strip-name:not(:disabled):hover {
-  color: var(--sg-color, #a855f7);
+.v10-breadcrumb-hop.link:focus-visible {
+  outline: 2px solid var(--text-link); outline-offset: 2px; border-radius: 2px;
+}
+/* Trailing "you are here" hop — three intentional differences from
+   clickable hops (secondary color, weight 500, no underline, default
+   cursor) communicate the current location without a label. */
+.v10-breadcrumb-hop.current {
+  color: var(--text-secondary); font-weight: 500; cursor: default;
 }
 .v10-project-strip-sep {
   color: var(--text-ghost);
   font-size: 14px;
   font-weight: 400;
+  padding: 0 6px;
+  flex-shrink: 0;
 }
-.v10-project-strip-sg {
-  display: inline-flex; align-items: center; gap: 5px;
-  font-size: 12px; font-weight: 600;
-  color: var(--text-secondary);
-}
-.v10-project-strip-sg-icon { font-size: 13px; line-height: 1; }
 .v10-project-strip-desc {
   font-size: 12px; color: var(--text-secondary);
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap;

packages/node-ui/src/ui/views/ProjectView.tsx

@@ -729,6 +729,14 @@ export function ProjectView({ contextGraphId }: ProjectViewProps) {
     openTab(CONTEXT_GRAPH_PRIMER_TAB);
   }, [openTab]);
 
+  // S5 — first breadcrumb hop ("Context Graph") navigates to the
+  // overview, clearing any open detail / subgraph page. Reuses the
+  // layer-switch reset (clears detail origin + refs) so it can't strand
+  // a stale subgraph/detail context.
+  const handleBreadcrumbOverview = useCallback(() => {
+    handleLayerSwitch('overview');
+  }, [handleLayerSwitch]);
+
   if (!cg) {
     return (
       <div className="v10-view-placeholder">
@@ -741,6 +749,15 @@ export function ProjectView({ contextGraphId }: ProjectViewProps) {
   // across sub-graph / layer / overview routes.
   const activeSubGraphBinding = activeSubGraph ? profile.forSubGraph(activeSubGraph) : null;
 
+  // S5 — the breadcrumb's trailing hop is the open detail's name (entity
+  // label or assertion name); null when no detail is open (the middle hop
+  // is then the current location).
+  const breadcrumbDetailLabel = selectedEntity
+    ? selectedEntity.label
+    : selectedAssertion
+      ? selectedAssertion.name
+      : null;
+
   // Codex Bug C — gate the `entities`-driven chip-count path on a
   // fully-loaded memory snapshot. While `useMemoryEntities` is mid-
   // hydration or a layer query is in-flight, `entityList` is partial
@@ -778,8 +795,11 @@ export function ProjectView({ contextGraphId }: ProjectViewProps) {
       <ProjectHeaderStrip
         cg={cg}
         profile={profile}
+        activeLayer={activeLayer}
         activeSubGraph={activeSubGraphBinding}
-        onClearSubGraph={() => handleSelectSubGraph(null)}
+        detailLabel={breadcrumbDetailLabel}
+        onOverview={handleBreadcrumbOverview}
+        onRestoreOrigin={handleDetailClose}
       />
 
       {/* Layer Switcher — always visible now. Clicking a layer from within
@@ -802,9 +822,9 @@ export function ProjectView({ contextGraphId }: ProjectViewProps) {
           allEntities={detailEntities}
           allTriples={detailTriples}
           onNavigate={handleNavigate}
-          onClose={handleDetailClose}
           contextGraphId={contextGraphId}
           onRefresh={rawMemory.refresh}
+          onOpenAgent={openAgent}
         />
       )}
 

packages/node-ui/src/ui/views/project/components.tsx

@@ -67,6 +67,7 @@ import {
   filterTriplesToEntities, admitTripleForScope,
   entityTimestamp, formatRelativeTime, formatTimelineBucket, formatTrailTimestamp,
   canPromoteAssertion, assertionSubgraphLine, buildAssertionTrail,
+  buildBreadcrumbHops,
   type LayerView, type LayerContentTab, type KAPane,
   type SubGraphTab, type SubGraphEntitySort,
 } from './helpers.js';
@@ -517,15 +518,38 @@ export function LayerSwitcher({ active, counts, onSwitch, onShare, onImport, onR
 export function ProjectHeaderStrip({
   cg,
   profile,
+  activeLayer,
   activeSubGraph,
-  onClearSubGraph,
+  detailLabel,
+  onOverview,
+  onRestoreOrigin,
 }: {
   cg: { id: string; name?: string; description?: string };
   profile: ReturnType<typeof useProjectProfile>;
+  /** Current layer route (drives the middle hop when no subgraph). */
+  activeLayer: LayerView;
   activeSubGraph: ReturnType<typeof useProjectProfile>['forSubGraph'] extends (s: string) => infer R ? R | null : null;
-  onClearSubGraph: () => void;
+  /** Open detail's name (entity / assertion), or null when none is open. */
+  detailLabel?: string | null;
+  /** Navigate to the Context Graph overview (first-hop click). */
+  onOverview: () => void;
+  /** Restore the M2 origin — close the open detail back to where it was
+   *  opened (middle-hop click when a detail is open). */
+  onRestoreOrigin: () => void;
 }) {
   const name = cg.name || profile.displayName || cg.id;
+  // S5 — the breadcrumb is the persistent navigation + back-affordance.
+  // It replaces the prior project-name + subgraph-chip rendering AND the
+  // old `.v10-ka-back` button (deleted on the detail views).
+  const hops = buildBreadcrumbHops({
+    contextGraphName: name,
+    activeLayer,
+    activeSubGraph: activeSubGraph?.slug ?? null,
+    subGraphDisplayName: activeSubGraph?.displayName ?? activeSubGraph?.slug ?? null,
+    detailLabel,
+  });
+  // Subgraph context still tints the strip + surfaces the description.
+  const description = activeSubGraph?.description ?? cg.description;
   return (
     <div
       className="v10-project-strip"
@@ -537,39 +561,31 @@ export function ProjectHeaderStrip({
         className="v10-project-strip-dot"
         style={{ background: profile.primaryColor }}
       />
-      <button
-        type="button"
-        className="v10-project-strip-name"
-        onClick={activeSubGraph ? onClearSubGraph : undefined}
-        disabled={!activeSubGraph}
-        title={activeSubGraph ? 'Back to context graph overview' : cg.id}
-      >
-        {name}
-      </button>
-      {activeSubGraph ? (
-        <>
-          <span className="v10-project-strip-sep">›</span>
-          <span className="v10-project-strip-sg">
-            <span
-              className="v10-project-strip-sg-icon"
-              style={{ color: activeSubGraph.color }}
-            >
-              {activeSubGraph.icon ?? '•'}
-            </span>
-            {activeSubGraph.displayName ?? activeSubGraph.slug}
-          </span>
-          {activeSubGraph.description && (
-            <span className="v10-project-strip-desc" title={activeSubGraph.description}>
-              {activeSubGraph.description}
-            </span>
-          )}
-        </>
-      ) : (
-        cg.description && (
-          <span className="v10-project-strip-desc" title={cg.description}>
-            {cg.description}
-          </span>
-        )
+      <nav className="v10-breadcrumb" aria-label="Breadcrumb">
+        {hops.map((hop, i) => (
+          <React.Fragment key={hop.key}>
+            {i > 0 && <span className="v10-project-strip-sep" aria-hidden="true">›</span>}
+            {hop.target === 'current' ? (
+              <span className="v10-breadcrumb-hop current" title={hop.title} aria-current="page">
+                {hop.label}
+              </span>
+            ) : (
+              <button
+                type="button"
+                className="v10-breadcrumb-hop link"
+                title={hop.title}
+                onClick={hop.target === 'overview' ? onOverview : onRestoreOrigin}
+              >
+                {hop.label}
+              </button>
+            )}
+          </React.Fragment>
+        ))}
+      </nav>
+      {description && (
+        <span className="v10-project-strip-desc" title={description}>
+          {description}
+        </span>
       )}
     </div>
   );
@@ -3587,12 +3603,11 @@ export function VerifyOnDkgButton({
   );
 }
 
-export function KADetailView({ entity, allEntities, allTriples, onNavigate, onClose, contextGraphId, onRefresh, onOpenAgent }: {
+export function KADetailView({ entity, allEntities, allTriples, onNavigate, contextGraphId, onRefresh, onOpenAgent }: {
   entity: MemoryEntity;
   allEntities: Map<string, MemoryEntity>;
   allTriples: Triple[];
   onNavigate: (uri: string) => void;
-  onClose: () => void;
   contextGraphId: string;
   onRefresh: () => void;
   onOpenAgent?: (uri: string) => void;
@@ -3716,7 +3731,8 @@ export function KADetailView({ entity, allEntities, allTriples, onNavigate, onCl
   return (
     <div className="v10-ka-detail">
       <div className="v10-ka-header">
-        <button className="v10-ka-back" onClick={onClose}>← Back to Context Graph</button>
+        {/* S5 — no back button here; the persistent breadcrumb in
+            ProjectHeaderStrip is the sole back-affordance. */}
         <div className="v10-ka-header-left">
           <div className="v10-ka-label">{detailNoun}</div>
           <div className="v10-ka-name">

packages/node-ui/src/ui/views/project/helpers.ts

@@ -1005,3 +1005,120 @@ export function buildAssertionTrail(
     isCurrent: state != null && stage.state === state,
   }));
 }
+
+// ─── S5 Breadcrumb navigation ───────────────────────────────
+// `Context Graph › {Layer | Subgraph} › {Entity | Assertion}`. Lives
+// inline in the persistent ProjectHeaderStrip. Hop content rules
+// (§4.7.1): the middle hop is EITHER the layer full-name OR the subgraph
+// displayName, never both (layer scope inside a subgraph is signalled by
+// the in-page active-layer chip, not the breadcrumb). The trailing hop
+// is the current location — a non-interactive span, three intentional
+// styling differences from clickable hops ("you are here" without a
+// label).
+
+/** Where a clicked breadcrumb hop navigates. */
+export type BreadcrumbTarget =
+  | 'overview'   // the Context Graph overview (first hop)
+  | 'origin'     // restore the M2 origin snapshot (close the open detail)
+  | 'current';   // the trailing hop — not interactive
+
+export interface BreadcrumbHop {
+  /** Stable React key. */
+  key: string;
+  /** Truncatable display label. */
+  label: string;
+  /** Full text for the unconditional `title=` tooltip. */
+  title: string;
+  /** Navigation target; `'current'` hops render as a non-interactive span. */
+  target: BreadcrumbTarget;
+}
+
+const LAYER_FULL_NAME: Record<MemoryLayerKey, string> = {
+  wm: 'Working Memory',
+  swm: 'Shared Working Memory',
+  vm: 'Verifiable Memory',
+};
+
+type MemoryLayerKey = 'wm' | 'swm' | 'vm';
+
+/**
+ * Build the breadcrumb hops for the current ProjectView location.
+ *
+ * - `Context Graph` is always the first hop, clickable to overview
+ *   (except when it is itself the current page — then it's the trailing
+ *   `current` hop with no further hops).
+ * - The middle hop is the subgraph displayName when a subgraph page is
+ *   active, otherwise the active layer's full name. Only one, never both.
+ * - The trailing hop (`current`) is the open detail's name (entity or
+ *   assertion) when a detail is open; otherwise the middle hop itself is
+ *   the current location.
+ *
+ * Navigation semantics are attached by the renderer via `target`:
+ * non-trailing hops are clickable; clicking the first hop goes to
+ * overview, clicking the middle hop (when a detail is open) restores the
+ * M2 origin (closes the detail back to where it was opened).
+ */
+export function buildBreadcrumbHops(input: {
+  /** The CG display name (first hop label). */
+  contextGraphName: string;
+  activeLayer: LayerView;
+  /** Active subgraph slug, or null when not on a subgraph page. */
+  activeSubGraph: string | null;
+  /** Active subgraph display name (falls back to slug). */
+  subGraphDisplayName?: string | null;
+  /** Open detail's name, or null when no detail is open. */
+  detailLabel?: string | null;
+}): BreadcrumbHop[] {
+  const { contextGraphName, activeLayer, activeSubGraph, subGraphDisplayName, detailLabel } = input;
+  const hops: BreadcrumbHop[] = [];
+
+  // First hop — Context Graph. It is the CURRENT page only when we are on
+  // the overview with no subgraph and no open detail.
+  const onOverview = !activeSubGraph && activeLayer === 'overview' && !detailLabel;
+  hops.push({
+    key: 'cg',
+    label: contextGraphName,
+    title: contextGraphName,
+    target: onOverview ? 'current' : 'overview',
+  });
+  if (onOverview) return hops;
+
+  // Middle hop — subgraph displayName OR layer full-name (never both).
+  const detailOpen = !!detailLabel;
+  let middle: { label: string; title: string } | null = null;
+  if (activeSubGraph) {
+    const name = subGraphDisplayName?.trim() || activeSubGraph;
+    middle = { label: name, title: name };
+  } else if (activeLayer === 'wm' || activeLayer === 'swm' || activeLayer === 'vm') {
+    const name = LAYER_FULL_NAME[activeLayer];
+    middle = { label: name, title: name };
+  } else if (activeLayer === 'graph-overview') {
+    middle = { label: 'Subgraphs', title: 'Subgraphs' };
+  } else if (activeLayer === 'query') {
+    middle = { label: 'Query Catalogue', title: 'Query Catalogue' };
+  }
+
+  if (middle) {
+    hops.push({
+      key: 'middle',
+      label: middle.label,
+      title: middle.title,
+      // When a detail is open the middle hop is clickable (restores the
+      // origin). When no detail is open the middle hop IS the current
+      // location.
+      target: detailOpen ? 'origin' : 'current',
+    });
+  }
+
+  // Trailing hop — the open detail's name (current location).
+  if (detailOpen) {
+    hops.push({
+      key: 'detail',
+      label: detailLabel!,
+      title: detailLabel!,
+      target: 'current',
+    });
+  }
+
+  return hops;
+}