@unson/brainbase-mcp 0.9.0 → 0.10.1

package/dist/local-web-host.js

@@ -564,7 +564,13 @@ export function createGraphWebModule(context) {
             'graph-view-shared.js',
             'graph-view-shared.css',
             'graph-projects-view.js',
+            'graph-own-share.js',
             'graph-projects-view.css',
+            'project-workspace.js',
+            'project-workspace.css',
+            'project-graph.js',
+            'project-graph-entry.js',
+            'project-graph-vendor.js',
             'graph-registry-view.js',
             'graph-registry-view.css'
         ],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unson/brainbase-mcp",
-  "version": "0.9.0",
+  "version": "0.10.1",
   "description": "Local-first Brainbase judgment OS that lets supported AI agents reuse a user's approved goals, priorities, decisions, and judgment criteria.",
   "type": "module",
   "license": "MIT",
@@ -262,7 +262,11 @@
       "types": "./dist/graph-foundation-reader.d.ts",
       "import": "./dist/graph-foundation-reader.js"
     },
-    "./contracts/foundation/graph-history.sql": "./contracts/foundation/graph-history.sql"
+    "./contracts/foundation/graph-history.sql": "./contracts/foundation/graph-history.sql",
+    "./ui/project-workspace": "./ui/project-workspace.js",
+    "./ui/project-graph": "./ui/project-graph.js",
+    "./ui/project-workspace.css": "./ui/project-workspace.css",
+    "./ui/project-graph-vendor.js": "./ui/project-graph-vendor.js"
   },
   "bin": {
     "brainbase-mcp": "dist/index.js",
@@ -308,10 +312,13 @@
     "release:plan": "node scripts/npm-release.mjs plan",
     "release:validate": "node scripts/npm-release.mjs validate",
     "release:publish": "node scripts/npm-release.mjs publish",
-    "release:verify": "node scripts/npm-release.mjs verify"
+    "release:verify": "node scripts/npm-release.mjs verify",
+    "build:graph": "node scripts/build-project-graph.mjs"
   },
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.30.0",
+    "graphology": "0.26.0",
+    "sigma": "3.0.3",
     "zod": "^3.25.56"
   },
   "overrides": {
@@ -320,6 +327,7 @@
   "devDependencies": {
     "@electric-sql/pglite": "^0.5.8",
     "@types/node": "^22.15.29",
+    "esbuild": "0.28.2",
     "tsx": "^4.19.4",
     "typescript": "^5.8.3",
     "vitepress": "^1.6.4",
@@ -328,5 +336,5 @@
   "engines": {
     "node": ">=20"
   },
-  "gitHead": "323aa422437a796dc76c9f4d2da86a62e51141ce"
+  "gitHead": "3fab56acebc9266f2bd256cc1795a3d7f550c311"
 }

package/ui/graph-projects-view.css

@@ -10,6 +10,55 @@
   grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.2fr) minmax(0, .8fr) minmax(0, .6fr) 64px minmax(0, 1.2fr);
 }
 
+/* The selected project's knowledge workspace is the reading surface. Keep the
+   registration context compact so the workspace tabs are not pushed below the
+   first viewport by the legacy ledger chrome. */
+.bb-gp > .bb-ws-page {
+  gap: 0;
+}
+
+.bb-gp > .bb-ws-page .bb-ws-breadcrumb {
+  margin-bottom: 10px;
+}
+
+.bb-gp > .bb-ws-page .bb-ws-page-head {
+  gap: 8px 20px;
+}
+
+.bb-gp > .bb-ws-page .bb-ws-page-head h1 {
+  font-size: clamp(28px, 3vw, 36px);
+}
+
+.bb-gp > .bb-ws-page .bb-ws-lead {
+  margin-top: 6px;
+  line-height: 1.45;
+}
+
+.bb-gp > .bb-ws-page .bb-ws-source {
+  min-height: 26px;
+  padding: 5px 8px;
+}
+
+.bb-gp > .bb-ws-notice {
+  gap: 8px;
+  margin-block: 12px;
+  padding: 9px 12px;
+  line-height: 1.45;
+}
+
+.bb-gp > .bb-ws-summary {
+  margin-bottom: 14px;
+}
+
+.bb-gp > .bb-ws-summary .bb-ws-metric {
+  padding-block: 10px;
+}
+
+.bb-gp > .bb-ws-summary .bb-ws-metric strong {
+  margin-block: 3px 2px;
+  font-size: 24px;
+}
+
 @media (max-width: 760px) {
   .bb-graph-project-ledger .bb-ws-ledger-row {
     grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) 68px;
@@ -21,3 +70,20 @@
     display: none;
   }
 }
+
+/* Author display rules must not override the HTML hidden state. */
+.bb-gp [hidden] { display: none; }
+
+.bb-shell:has([data-project-graph-active="true"]) > .bb-shell-workspace {
+  grid-column: 2 / -1;
+}
+.bb-shell:has([data-project-graph-active="true"]) > .bb-shell-rail {
+  display: none;
+}
+[data-project-graph-active="true"] .bb-pkw { margin-top: 0; }
+
+@media (max-width: 760px) {
+  .bb-shell:has([data-project-graph-active="true"]) > .bb-shell-workspace {
+    grid-column: 1 / -1;
+  }
+}

package/ui/graph-projects-view.js

@@ -54,6 +54,8 @@ import {
   graphHostEmptyNotice,
 } from './graph-view-shared.js';
 import { graphOwnShareSource, ownProjectDetail, ownShareSection, ownShareStateNotice } from './graph-own-share.js';
+import { createProjectKnowledgeWorkspace, normalizeProjectContext } from './project-workspace.js';
+import { mountProjectGraph as defaultMountProjectGraph } from './project-graph.js';
 import {
   workspaceActions,
   workspaceButton,
@@ -196,6 +198,13 @@ function failureText(error) {
  *   labelled 「引き継いだ自分の分（組織には未反映）」 unless `label` says otherwise.  They are never
  *   added to the ledger, the metrics or the rail, and a failed read shows only in that section.
  *   Without it nothing of the kind is drawn or read.
+ * @param {(projectId: string) => Promise<object>} [options.loadProjectContext]
+ *   Optional read-only supplementary sections (tasks/knowledge).  A failed
+ *   context read is kept separate from the Graph detail read.
+ * @param {(container: Element, options: object) => { destroy?: Function }} [options.mountProjectGraph]
+ *   Host-injected Sigma.js graph mount. When omitted, the shared browser
+ *   entry is used. The workspace keeps an accessible relation list when
+ *   mounting is unavailable or fails.
  * @returns The controller: `state`, `correction`, `render()`, `load()`, `loadDetail(id)`,
  *   `selectProject(id)`, `openProject(id)`, `select(id)` for the host's own navigation, and with
  *   `ownShare` `loadOwn()` and `selectOwnProject(id)`.
@@ -222,10 +231,13 @@ export function createGraphProjectsView({
   selectedId: initialSelectedId,
   onSelect,
   ownShare,
+  loadProjectContext,
+  mountProjectGraph,
 } = {}) {
   if (!root) throw new TypeError('root is required');
   const doc = getDocument(explicitDocument);
   const graphClient = createGraphClient({ fetcher, basePath, token, ...(tokenHeader ? { tokenHeader } : {}) });
+  const projectGraphMount = typeof mountProjectGraph === 'function' ? mountProjectGraph : defaultMountProjectGraph;
   const own = graphOwnShareSource(ownShare, { fetcher });
   const writable = canCorrect !== false;
   const client = writable ? graphClient : readOnlyGraphClient(graphClient);
@@ -246,11 +258,16 @@ export function createGraphProjectsView({
     list: { state: 'loading' },
     selectedId: textOrNull(initialSelectedId),
     detail: null,
+    context: null,
     panelAt: null,
     // The owner's own share: its own list and selection, apart from the host's.
     own: own ? { list: { state: 'loading' }, selectedId: null, detail: null } : null,
   };
   let focusRow = null;
+  let knowledgeWorkspace = null;
+  let contextRequest = 0;
+  let detailRequest = 0;
+  let viewDestroyed = false;
 
   const correction = createGraphCorrection({
     client,
@@ -317,6 +334,30 @@ export function createGraphProjectsView({
     }
   }
 
+  /** Reads supplementary sections independently of the Graph project detail. */
+  async function loadProjectContextFor(id, { keep = false } = {}) {
+    if (viewDestroyed) return state.context;
+    if (typeof loadProjectContext !== 'function') {
+      if (state.context?.projectId !== id) state.context = null;
+      return null;
+    }
+    if (keep && state.context?.projectId === id && ['ok', 'failed', 'unavailable'].includes(state.context.state)) return state.context;
+    const request = ++contextRequest;
+    state.context = normalizeProjectContext(id, { state: 'loading' });
+    controller.render();
+    let result;
+    try {
+      result = await loadProjectContext(id);
+    } catch (error) {
+      result = { state: 'failed', message: `補足情報を読み取れませんでした（${failureText(error)}）。` };
+    }
+    const normalized = normalizeProjectContext(id, result);
+    if (viewDestroyed || request !== contextRequest || state.selectedId !== id) return state.context;
+    state.context = normalized;
+    controller.render();
+    return state.context;
+  }
+
   // -------------------------------------------------------------------------
   // Workspace
 
@@ -366,19 +407,51 @@ export function createGraphProjectsView({
   }
 
   function renderHostWorkspace() {
-    const children = [workspacePageHeader(doc, {
+    const pageHeader = workspacePageHeader(doc, {
       crumbs: context.crumbs,
       title: 'プロジェクトと関係者',
-      lead: writable ? 'どのプロジェクトに誰がどう関わっているかを確かめ、誤りを直します。' : 'どのプロジェクトに誰がどう関わっているかを確かめます。',
+      lead: writable ? '目的・関係者・判断・根拠を、記録からたどり、必要な記録を直します。' : '目的・関係者・判断・根拠を、記録からたどります。',
       source: context.source,
       actions: workspaceHostActions(pageActions),
-    })];
+    });
+    // These blocks belong to the legacy registration surface. The knowledge
+    // workspace owns the first viewport while its graph tab is active, so the
+    // old framing must not keep pushing the graph below the fold.
+    const legacyChrome = [pageHeader];
+    const children = [pageHeader];
     const dir = state.list.state === 'ok' ? textOrNull(state.list.payload.source?.dataDir) : null;
-    children.push(workspaceHostNotice(doc, sourceNotice) ?? workspaceNotice(doc, {
+    const sourceBlock = workspaceHostNotice(doc, sourceNotice) ?? workspaceNotice(doc, {
       label: '出典',
       text: `このMacのGraph${dir ? `（${dir}）` : ''}から読み、ここで直した内容もそこへ保存します。関係者は、プロジェクトに参加している人や責任を持つ人の記録で、ログインや共有の設定ではありません。`,
-    }));
-    if (state.detail?.state === 'ok') children.push(renderGraphIssues(doc, state.detail.payload.issues));
+    });
+    children.push(sourceBlock);
+    legacyChrome.push(sourceBlock);
+    if (state.detail?.state === 'ok') {
+      const issues = renderGraphIssues(doc, state.detail.payload.issues);
+      if (issues) {
+        children.push(issues);
+        legacyChrome.push(issues);
+      }
+    }
+
+    const setKnowledgeTabChrome = (tab) => {
+      const graphActive = tab === 'graph';
+      root.setAttribute('data-project-graph-active', String(graphActive));
+      for (const node of legacyChrome) {
+        if (node) node.hidden = graphActive;
+      }
+      if (!rail) return;
+      rail.hidden = graphActive;
+      if (graphActive) rail.setAttribute('aria-hidden', 'true');
+      else rail.removeAttribute('aria-hidden');
+      // In the organization shell the slot's parent is the actual grid
+      // column. Hide that column as well; hiding only the slot leaves the
+      // empty 380px rail in the layout.
+      const parent = rail.parentElement;
+      const railColumn = rail.closest?.('.bb-shell-rail')
+        ?? (typeof parent?.className === 'string' && parent.className.split(/\s+/u).includes('bb-shell-rail') ? parent : null);
+      if (railColumn) railColumn.hidden = graphActive;
+    };
 
     const stateNotice = graphStateNotice(doc, state.list, { onRetry: () => controller.load(), loadingText: 'プロジェクトを読み込んでいます。' });
     if (stateNotice) {
@@ -388,13 +461,32 @@ export function createGraphProjectsView({
     const { payload } = state.list;
     const summary = summarizeProjects(payload.projects);
     const extras = hostMetrics(payload);
-    children.push(workspaceMetrics(doc, [
+    const summaryBlock = workspaceMetrics(doc, [
       { label: 'プロジェクト', value: summary.active, note: `有効なもの（全${summary.total}件）` },
       { label: '進行中', value: summary.inProgress, note: '状態が「進行中」の有効なもの' },
       { label: '関係者', value: summary.people, note: summary.people === null ? '人数を確かめられません' : '有効な関わりがある人（重複なし）' },
       ...extras.metrics,
-    ], { ariaLabel: 'プロジェクトの集計' }));
-    if (extras.failure) children.push(extras.failure);
+    ], { ariaLabel: 'プロジェクトの集計' });
+    children.push(summaryBlock);
+    legacyChrome.push(summaryBlock);
+    if (extras.failure) {
+      children.push(extras.failure);
+      legacyChrome.push(extras.failure);
+    }
+
+    // The selected project is the primary reading surface.  Keep the ledger
+    // below it as a switcher so a large project list cannot bury its context.
+    if (state.detail?.id === state.selectedId && state.detail.state === 'ok') {
+      knowledgeWorkspace = createProjectKnowledgeWorkspace({
+        document: doc,
+        detail: state.detail.payload,
+        context: state.context,
+        mountGraph: projectGraphMount,
+        readEntity: (id) => graphClient.read(`/entities/${encodeURIComponent(id)}`),
+        onTabChange: setKnowledgeTabChrome,
+      });
+      children.push(knowledgeWorkspace.element);
+    }
 
     if (payload.projects.length === 0) {
       const hostEmpty = graphHostEmptyNotice(doc, emptyNotice);
@@ -615,6 +707,8 @@ export function createGraphProjectsView({
       if (correction.form) correction.close();
       state.panelAt = null;
       state.detail = null;
+      state.context = null;
+      contextRequest += 1;
       state.selectedId = projects[0]?.id ?? null;
       if (state.selectedId) {
         const reading = controller.loadDetail(state.selectedId);
@@ -635,6 +729,11 @@ export function createGraphProjectsView({
     get state() { return state; },
     get correction() { return correction; },
     render() {
+      if (viewDestroyed) return controller;
+      if (knowledgeWorkspace) {
+        knowledgeWorkspace.destroy();
+        knowledgeWorkspace = null;
+      }
       layout.render(renderWorkspace(), renderRail());
       if (focusRow) {
         focusLedgerRow(root, focusRow);
@@ -642,6 +741,15 @@ export function createGraphProjectsView({
       }
       return controller;
     },
+    destroy() {
+      if (viewDestroyed) return;
+      viewDestroyed = true;
+      detailRequest += 1;
+      contextRequest += 1;
+      knowledgeWorkspace?.destroy();
+      knowledgeWorkspace = null;
+      correction.close();
+    },
     /**
      * Reads the list; the first project is selected when none is.  `keep` shows the current list until
      * the new one has been read.  The owner's own share is read alongside, unless `keep` finds it read.
@@ -688,17 +796,23 @@ export function createGraphProjectsView({
     },
     /** `keep` shows the current detail until the new one has been read. */
     async loadDetail(id, { keep = false } = {}) {
+      if (viewDestroyed) return state.detail;
+      const request = ++detailRequest;
       const previous = state.detail;
       if (!(keep && previous?.id === id && previous.state === 'ok')) {
         state.detail = { id, state: 'loading' };
         controller.render();
       }
+      const contextReading = loadProjectContextFor(id, { keep });
       const result = await client.read(`/projects/${encodeURIComponent(id)}`);
-      if (state.selectedId !== id) return state.detail;
+      if (viewDestroyed || request !== detailRequest || state.selectedId !== id) return state.detail;
       state.detail = result.state === 'error' && result.status === 404
         ? { id, state: 'not_found', reason: 'このプロジェクトは見つかりません。一覧を読み直してください。' }
         : { id, ...normalizeProjectDetail(result) };
       controller.render();
+      // The context is intentionally independent.  Its completion may trigger
+      // one more render, but never changes the Graph detail result.
+      void contextReading;
       return state.detail;
     },
     /** Selects a row: the rail shows that project, and an open correction is closed. */
@@ -706,6 +820,8 @@ export function createGraphProjectsView({
       if (correction.form) correction.close();
       state.panelAt = null;
       state.selectedId = id;
+      state.context = null;
+      contextRequest += 1;
       return controller.loadDetail(id, { keep: true });
     },
     /** The same as selecting the project's row. */

package/ui/project-graph-entry.js

@@ -0,0 +1,293 @@
+/*
+ * Browser-only Sigma entry point.
+ *
+ * Keep all DOM/WebGL work behind this module.  The sibling contract module is
+ * intentionally safe to import from Node tests and from hosts that render an
+ * accessible list instead of a graph.
+ */
+
+import { MultiDirectedGraph, Sigma } from './project-graph-vendor.js';
+import {
+  PROJECT_GRAPH_TYPE_COLORS,
+  createProjectGraphModel,
+  projectGraphEdgePresentation,
+  projectGraphNeighborIds,
+  projectGraphNodePresentation,
+} from './project-graph.js';
+
+const DEFAULT_EDGE_COLOR = '#cbd5e1';
+const SELECTED_COLOR = '#312e81';
+const UNRELATED_COLOR = '#cbd5e1';
+const UNRELATED_EDGE_COLOR = '#e2e8f0';
+
+function isRecord(value) {
+  return value !== null && typeof value === 'object' && !Array.isArray(value);
+}
+
+function asDocument(container) {
+  return container?.ownerDocument || (typeof document !== 'undefined' ? document : null);
+}
+
+function abortError() {
+  const error = new Error('project_graph_mount_aborted');
+  error.name = 'AbortError';
+  return error;
+}
+
+function assertMountTarget(container) {
+  if (!container || typeof container.appendChild !== 'function') {
+    throw new TypeError('mountProjectGraph requires a DOM container');
+  }
+  const doc = asDocument(container);
+  if (!doc || typeof doc.createElement !== 'function') {
+    throw new TypeError('mountProjectGraph requires a DOM document');
+  }
+  return doc;
+}
+
+function setText(element, text) {
+  if (element) element.textContent = text;
+}
+
+function makeButton(doc, label, ariaLabel) {
+  const button = doc.createElement('button');
+  button.type = 'button';
+  button.className = 'bb-project-graph-control';
+  button.setAttribute('aria-label', ariaLabel);
+  button.textContent = label;
+  return button;
+}
+
+function makeGraph(model) {
+  const graph = new MultiDirectedGraph();
+  for (const node of model.nodes) {
+    graph.addNode(node.id, {
+      x: Number.isFinite(node.x) ? node.x : 0,
+      y: Number.isFinite(node.y) ? node.y : 0,
+      size: node.size,
+      label: node.label,
+      color: node.color || PROJECT_GRAPH_TYPE_COLORS.unknown,
+      baseColor: node.color || PROJECT_GRAPH_TYPE_COLORS.unknown,
+      semanticType: node.type,
+      // Sigma's renderer program type is deliberately separate from the
+      // ontology type. Unknown ontology types must still draw as circles.
+      type: 'circle',
+      highlighted: false,
+    });
+  }
+  for (const edge of model.edges) {
+    graph.addDirectedEdgeWithKey(edge.id, edge.source, edge.target, {
+      label: edge.label || '',
+      color: edge.color || DEFAULT_EDGE_COLOR,
+      baseColor: edge.color || DEFAULT_EDGE_COLOR,
+      size: 1,
+      type: 'arrow',
+    });
+  }
+  return graph;
+}
+
+/**
+ * Mounts one project graph and returns an idempotent resource handle.
+ *
+ * The graph is built only from the supplied projection. Invalid endpoints have
+ * already been removed by createProjectGraphModel, so this renderer never
+ * invents a node merely to make an edge drawable.
+ */
+export function mountProjectGraph(container, options = {}) {
+  const doc = assertMountTarget(container);
+  const signal = options?.signal;
+  if (signal?.aborted) throw abortError();
+
+  const model = createProjectGraphModel(
+    { nodes: options?.nodes, edges: options?.edges },
+    { selectedId: options?.selectedId || null },
+  );
+  const mountRoot = doc.createElement('div');
+  mountRoot.className = 'bb-project-graph';
+  mountRoot.setAttribute('data-graph-contract', 'brainbase.project-graph.v1');
+
+  const toolbar = doc.createElement('div');
+  toolbar.className = 'bb-project-graph-controls';
+  toolbar.setAttribute('role', 'toolbar');
+  toolbar.setAttribute('aria-label', 'グラフ表示の操作');
+  const zoomIn = makeButton(doc, '+', 'グラフを拡大');
+  const zoomOut = makeButton(doc, '−', 'グラフを縮小');
+  const reset = makeButton(doc, '全体', 'グラフ全体を表示');
+  toolbar.append(zoomIn, zoomOut, reset);
+
+  const status = doc.createElement('p');
+  status.className = 'bb-project-graph-status';
+  status.setAttribute('aria-live', 'polite');
+  status.setAttribute('aria-atomic', 'true');
+
+  const surface = doc.createElement('div');
+  surface.className = 'bb-project-graph-surface';
+  surface.setAttribute('role', 'img');
+  surface.setAttribute('aria-label', 'プロジェクトの関係グラフ');
+  surface.style.position = 'relative';
+  surface.style.width = '100%';
+  surface.style.height = '100%';
+
+  mountRoot.append(toolbar, status, surface);
+  container.appendChild(mountRoot);
+
+  let renderer;
+  let selectedId = null;
+  let neighborIds = new Set();
+  let destroyed = false;
+  let abortListener = null;
+  const nodeById = new Map(model.nodes.map((node) => [node.id, node]));
+  const edgeById = new Map(model.edges.map((edge) => [edge.id, edge]));
+  let onZoomIn;
+  let onZoomOut;
+  let onReset;
+
+  const getNeighbors = () => neighborIds;
+
+  const nodeReducer = (nodeId, data) => {
+    const base = { ...data };
+    const neighbors = getNeighbors();
+    if (!selectedId) return base;
+    const presentation = projectGraphNodePresentation(
+      { id: nodeId, size: base.size },
+      { selectedId, neighborIds: neighbors },
+    );
+    const { state, ...visuals } = presentation;
+    if (state === 'selected') return { ...base, ...visuals, color: SELECTED_COLOR };
+    if (state === 'neighbor') return {
+      ...base,
+      ...visuals,
+      color: base.baseColor || PROJECT_GRAPH_TYPE_COLORS.unknown,
+    };
+    return {
+      ...base,
+      ...visuals,
+      color: UNRELATED_COLOR,
+    };
+  };
+
+  const edgeReducer = (edgeId, data) => {
+    const edge = edgeById.get(edgeId);
+    const base = { ...data };
+    if (!selectedId || !edge) {
+      return {
+        ...base,
+        label: null,
+        forceLabel: false,
+        color: base.baseColor || DEFAULT_EDGE_COLOR,
+      };
+    }
+    const neighbors = getNeighbors();
+    const presentation = projectGraphEdgePresentation(edge, {
+      selectedId,
+      neighborIds: neighbors,
+    });
+    if (!presentation.relevant) {
+      return {
+        ...base,
+        label: null,
+        forceLabel: false,
+        color: UNRELATED_EDGE_COLOR,
+        size: 0.5,
+      };
+    }
+    return {
+      ...base,
+      label: presentation.showLabel ? edge.label : null,
+      forceLabel: presentation.forceLabel,
+      color: edge.color || DEFAULT_EDGE_COLOR,
+      size: 1.5,
+    };
+  };
+
+  const updateStatus = () => {
+    if (!selectedId) {
+      setText(status, `${model.nodes.length}件の対象、${model.edges.length}件の関係。点を選択すると周辺を強調します。`);
+      return;
+    }
+    const selected = nodeById.get(selectedId);
+    const neighbors = getNeighbors();
+    setText(status, `${selected?.label || selectedId}を選択中。関連する対象${neighbors.size}件を強調しています。`);
+  };
+
+  const notifySelection = () => {
+    if (typeof options?.onSelect === 'function') options.onSelect(selectedId);
+  };
+
+  const setSelected = (nextId, { notify = true } = {}) => {
+    if (destroyed) return;
+    selectedId = nextId && nodeById.has(nextId) ? nextId : null;
+    neighborIds = projectGraphNeighborIds(model.nodes, model.edges, selectedId);
+    updateStatus();
+    if (renderer) renderer.refresh();
+    if (notify) notifySelection();
+  };
+
+  try {
+    renderer = new Sigma(makeGraph(model), surface, {
+      allowInvalidContainer: true,
+      renderLabels: true,
+      renderEdgeLabels: true,
+      labelDensity: 0.8,
+      labelRenderedSizeThreshold: 8,
+      labelGridCellSize: 120,
+      defaultNodeType: 'circle',
+      defaultEdgeType: 'arrow',
+      defaultNodeColor: PROJECT_GRAPH_TYPE_COLORS.unknown,
+      defaultEdgeColor: DEFAULT_EDGE_COLOR,
+      nodeReducer,
+      edgeReducer,
+    });
+  } catch (error) {
+    // A missing WebGL context is a renderer capability failure. Let the host
+    // choose its accessible list fallback while retaining the original cause.
+    mountRoot.remove();
+    if (isRecord(error)) error.code = 'project_graph_renderer_unavailable';
+    throw error;
+  }
+
+  if (signal?.aborted) {
+    renderer.kill();
+    mountRoot.remove();
+    throw abortError();
+  }
+
+  const onNodeClick = ({ node }) => setSelected(node);
+  const onStageClick = () => setSelected(null);
+  renderer.on('clickNode', onNodeClick);
+  renderer.on('clickStage', onStageClick);
+  onZoomIn = () => renderer?.getCamera().animatedZoom({ factor: 1.5 });
+  onZoomOut = () => renderer?.getCamera().animatedUnzoom({ factor: 1.5 });
+  onReset = () => renderer?.getCamera().animatedReset();
+  zoomIn.addEventListener('click', onZoomIn);
+  zoomOut.addEventListener('click', onZoomOut);
+  reset.addEventListener('click', onReset);
+  setSelected(options?.selectedId || null, { notify: false });
+
+  const destroy = () => {
+    if (destroyed) return;
+    destroyed = true;
+    if (signal && abortListener) signal.removeEventListener('abort', abortListener);
+    renderer?.off('clickNode', onNodeClick);
+    renderer?.off('clickStage', onStageClick);
+    zoomIn.removeEventListener('click', onZoomIn);
+    zoomOut.removeEventListener('click', onZoomOut);
+    reset.removeEventListener('click', onReset);
+    renderer?.kill();
+    renderer = null;
+    mountRoot.remove();
+  };
+  abortListener = () => destroy();
+  signal?.addEventListener('abort', abortListener, { once: true });
+  updateStatus();
+
+  return {
+    destroy,
+    select: (nodeId) => setSelected(nodeId),
+    getSelectedId: () => selectedId,
+    getModel: () => model,
+  };
+}
+
+export default mountProjectGraph;