graphlin 0.1.2 → 0.2.0

package/runtime/web/app.js

@@ -1,11 +1,14 @@
 import { layoutGraph, LAYOUT_ALGORITHMS } from './layout.js';
 import { sketchOutline, sketchDetails, sketchConnection } from './sketch.js';
 import { createLiveSidebar } from './sidebar.js';
+import { createViewPlatform } from './platform.js';
+import { layoutScene, sceneGraph, representedSelection } from './scene.js';
 
 const SVG_NS = 'http://www.w3.org/2000/svg';
 const MAX_JSON_BYTES = 8 * 1024 * 1024;
 const LIMITS = Object.freeze({ nodes: 500, edges: 1500, activity: 200, hookEvents: 200, history: 100, refs: 32, sessions: 100 });
-const ROLES = ['client', 'service', 'datastore', 'queue', 'external', 'module', 'function', 'class', 'interface', 'event', 'configuration', 'package'];
+const ROLES = ['client', 'service', 'datastore', 'queue', 'external', 'module', 'function', 'class', 'interface', 'event', 'configuration', 'package',
+  'method', 'namespace', 'enum', 'type_alias', 'variable', 'file', 'directory', 'project', 'unknown', 'group'];
 export const SHAPE_NAMES = Object.freeze({
   rounded_rect: 'Rounded rectangle', rect: 'Rectangle', cylinder: 'Cylinder', cloud: 'Cloud',
   diamond: 'Diamond', group: 'Group', browser: 'Browser', component: 'Component',
@@ -22,6 +25,7 @@ const RELATIONS = ['calls', 'reads', 'writes', 'publishes', 'consumes', 'depends
 const CLASSIFICATIONS = ['pending', 'accepted', 'tentative', 'abstained', 'stale'];
 const EVIDENCE = ['proposed', 'observed', 'verified', 'removed'];
 const VALIDITY = ['current', 'stale', 'retracted'];
+const INTERPRETATION_BASES = ['jev_interpretation', 'decision_interpretation'];
 const ACTIVITY = ['idle', 'pending', 'running', 'failed', 'interrupted', 'unknown'];
 const EVENT_STATES = ['pending', 'succeeded', 'failed', 'interrupted', 'unresolved', 'observed'];
 const CLASSIFIERS = ['ready', 'metadata_only', 'missing_key', 'paused', 'unavailable', 'timeout', 'demo'];
@@ -29,12 +33,15 @@ const ROLE_SHAPES = {
   client: 'browser', service: 'component', datastore: 'cylinder', queue: 'queue', external: 'cloud',
   module: 'rect', function: 'hexagon', class: 'class_box', interface: 'interface_box',
   event: 'document', configuration: 'parallelogram', package: 'folder',
+  method: 'hexagon', namespace: 'folder', enum: 'class_box', type_alias: 'interface_box',
+  variable: 'rect', file: 'document', directory: 'folder', project: 'folder', unknown: 'rect', group: 'group',
 };
 const PROBABILITIES = ['supportProbability', 'roleProbability', 'roleConfidence', 'missingContextProbability'];
 const NODE_WIDTH = 190;
 const NODE_HEIGHT = 104;
 const EDGE_LANE_GAP = 36;
-const EDGE_RELATION_ORDER = ['calls', 'writes', 'depends_on', 'reads', 'publishes', 'consumes'];
+const EDGE_RELATION_ORDER = ['calls', 'writes', 'depends_on', 'reads', 'publishes', 'consumes',
+  'imports', 'references', 'member_of', 'hosted_by', 'contains', 'unknown'];
 const LAYOUT_NAMES = {
   hierarchy: 'Hierarchy top-down', dependency: 'Dependency left-right', grouped: 'Group by type',
   circular: 'Circular', grid: 'Grid', original: 'Original', force: 'Force-directed',
@@ -157,10 +164,10 @@ export function liveNodeChanges(previous, next, eligible) {
   };
 }
 
-export function filterDiagram(graph, query) {
-  if (!query) return graph;
+export function filterDiagram(graph, query = '', kinds = null) {
+  if (!query && kinds === null) return graph;
   const needle = query.toLowerCase();
-  const nodes = graph.nodes.filter(node => node.label.toLowerCase().includes(needle));
+  const nodes = graph.nodes.filter(node => (kinds === null || kinds.has(node.kind)) && node.label.toLowerCase().includes(needle));
   const visible = new Set(nodes.map(node => node.id));
   return { ...graph, nodes, edges: graph.edges.filter(edge => visible.has(edge.source) && visible.has(edge.target)) };
 }
@@ -229,7 +236,7 @@ function normalizeRefs(value, includeExcerpts = true) {
       startLine: count(ref.startLine),
       endLine: count(ref.endLine),
       sourceClass: token(ref.sourceClass, ['source', 'public_intent'], 'unknown'),
-      basis: ref.basis === 'jev_interpretation' ? 'jev_interpretation' : 'unknown',
+      basis: token(ref.basis, INTERPRETATION_BASES, 'unknown'),
     };
     if (record(ref.sourceRef) && ref.sourceRef.type === 'artifact') {
       result.sourceRef = {
@@ -420,16 +427,27 @@ export function claimSummary(claim) {
   if (claim.validity === 'stale' || claim.classification === 'stale') {
     return { tone: 'stale', label: 'Evidence stale', explanation: 'The backing evidence is no longer current. This interpretation needs reconciliation with the current artifact version.' };
   }
+  if (claim.basis === 'parsed' && refs.length && !refs.some(ref => ref.sourceClass === 'public_intent')) {
+    return { tone: 'observed', label: 'Parsed source', explanation: 'A local source parser identified this structure. Source structure does not establish execution or runtime connectivity.' };
+  }
+  if (claim.basis === 'metadata') {
+    return { tone: 'proposed', label: 'Filesystem scope', explanation: 'An observed filesystem scope. Its responsibility and runtime role are unknown.' };
+  }
+  if (claim.basis === 'decision' && claim.classification === 'accepted' && refs.length) {
+    return { tone: 'observed', label: 'Supported interpretation', explanation: 'The model records a supported interpretation of the referenced evidence. This does not establish runtime hosting or execution.' };
+  }
   if (claim.evidenceState === 'proposed' || (refs.length && refs.every(ref => ref.sourceClass === 'public_intent'))) {
     return { tone: 'proposed', label: 'Proposed', explanation: 'This is a proposal or stated intent. It does not establish that a component exists or that a change completed.' };
   }
   if (claim.classification !== 'accepted') {
     return { tone: 'proposed', label: upperFirst(claim.classification), explanation: 'The code interpretation is uncertain or incomplete. Inspect the evidence before relying on this claim.' };
   }
-  if (!refs.length || refs.some(ref => ref.basis !== 'jev_interpretation' || ref.sourceClass === 'unknown')) {
+  if (!refs.length || refs.some(ref => !INTERPRETATION_BASES.includes(ref.basis) || ref.sourceClass === 'unknown')) {
     return { tone: 'proposed', label: 'Provenance incomplete', explanation: 'This snapshot does not provide enough provenance to establish the basis of this claim.' };
   }
-  return { tone: 'observed', label: 'Code evidence', explanation: 'Jev interpreted approved source evidence as supporting this claim. Code or configuration can describe a dependency without proving that it runs or connects successfully.' };
+  const generic = refs.some(ref => ref.basis === 'decision_interpretation');
+  return { tone: 'observed', label: generic ? 'Decision interpretation' : 'Code evidence',
+    explanation: `${generic ? 'A decision provider' : 'Jev'} interpreted approved source evidence as supporting this claim. Code or configuration can describe a dependency without proving that it runs or connects successfully.` };
 }
 
 export function edgeLanes(edges) {
@@ -519,8 +537,8 @@ export function graphBounds(graph, routes = graphEdgeRoutes(graph)) {
   if (!graph.nodes.length) return { x: 0, y: 0, width: 920, height: 510 };
   let minX = Math.min(...graph.nodes.map(node => node.x));
   let minY = Math.min(...graph.nodes.map(node => node.y));
-  let maxX = Math.max(...graph.nodes.map(node => node.x + NODE_WIDTH));
-  let maxY = Math.max(...graph.nodes.map(node => node.y + NODE_HEIGHT));
+  let maxX = Math.max(...graph.nodes.map(node => node.x + (node.width || NODE_WIDTH)));
+  let maxY = Math.max(...graph.nodes.map(node => node.y + (node.height || NODE_HEIGHT)));
   for (const edge of graph.edges) {
     const route = routes.get(edge.id);
     if (!route) continue;
@@ -604,16 +622,16 @@ function curveRoute(points, normal) {
   };
 }
 
-function nodePort(center, direction, normal, offset, shapeName) {
+function nodePort(center, direction, normal, offset, shapeName, width = NODE_WIDTH, height = NODE_HEIGHT) {
   const reach = Math.min(
-    direction.x === 0 ? Infinity : NODE_WIDTH / 2 / Math.abs(direction.x),
-    direction.y === 0 ? Infinity : NODE_HEIGHT / 2 / Math.abs(direction.y),
+    direction.x === 0 ? Infinity : width / 2 / Math.abs(direction.x),
+    direction.y === 0 ? Infinity : height / 2 / Math.abs(direction.y),
   );
   const x = direction.x * reach + normal.x * offset;
   const y = direction.y * reach + normal.y * offset;
   const scale = Math.min(
-    x === 0 ? Infinity : NODE_WIDTH / 2 / Math.abs(x),
-    y === 0 ? Infinity : NODE_HEIGHT / 2 / Math.abs(y),
+    x === 0 ? Infinity : width / 2 / Math.abs(x),
+    y === 0 ? Infinity : height / 2 / Math.abs(y),
   );
   const polygons = {
     diamond: [[95, -12], [204, 52], [95, 116], [-14, 52]],
@@ -663,15 +681,15 @@ export function routeEdge(source, target, lane = 0) {
       boundary({ x: x - 80, y: source.y + (side > 0 ? 0 : NODE_HEIGHT) }),
     ], { x: 0, y: side });
   }
-  const a = { x: source.x + NODE_WIDTH / 2, y: source.y + NODE_HEIGHT / 2 };
-  const b = { x: target.x + NODE_WIDTH / 2, y: target.y + NODE_HEIGHT / 2 };
+  const a = { x: source.x + (source.width || NODE_WIDTH) / 2, y: source.y + (source.height || NODE_HEIGHT) / 2 };
+  const b = { x: target.x + (target.width || NODE_WIDTH) / 2, y: target.y + (target.height || NODE_HEIGHT) / 2 };
   const distance = Math.hypot(b.x - a.x, b.y - a.y);
   const direction = distance ? { x: (b.x - a.x) / distance, y: (b.y - a.y) / distance } : { x: 1, y: 0 };
   const canonicalDirection = source.id <= target.id ? 1 : -1;
   const normal = { x: -direction.y * canonicalDirection, y: direction.x * canonicalDirection };
   const portOffset = Math.max(-36, Math.min(36, slot * 6));
-  const start = nodePort(a, direction, normal, portOffset, source.shape);
-  const end = nodePort(b, { x: -direction.x, y: -direction.y }, normal, portOffset, target.shape);
+  const start = nodePort(a, direction, normal, portOffset, source.shape, source.width, source.height);
+  const end = nodePort(b, { x: -direction.x, y: -direction.y }, normal, portOffset, target.shape, target.width, target.height);
   const arc = slot * EDGE_LANE_GAP * 4 / 3;
   const control = fraction => ({
     x: start.x + (end.x - start.x) * fraction + normal.x * arc,
@@ -842,6 +860,7 @@ export function startDashboardInfo({ load = signal => request('/api/about', { si
       throw new Error('invalid_dashboard_info');
     }
     $('project-path').textContent = safeText(info.projectRoot, 4096) || 'Path unavailable';
+    $('project-path').title = $('project-path').textContent;
     $('graphlin-version').textContent = info.version;
     $('version-update-steps').textContent = info.mode === 'demo'
       ? 'Press Ctrl+C in the demo terminal, then run this command to restart the updated offline demo.'
@@ -851,9 +870,14 @@ export function startDashboardInfo({ load = signal => request('/api/about', { si
       ? safeText(branch.name, 1024) || 'Branch unavailable'
       : branch?.status === 'detached' ? `Detached HEAD${branch.commit ? ` · ${safeText(branch.commit, 12)}` : ''}`
       : branch?.status === 'not_git' ? 'Not a Git repository' : 'Branch unavailable';
+    $('project-branch').title = $('project-branch').textContent;
     const latest = typeof info.update?.latest === 'string' &&
       /^\d+\.\d+\.\d+$/.test(info.update.latest) ? info.update.latest : null;
     const available = info.update?.status === 'available' && latest;
+    $('version-update-indicator').hidden = !available;
+    $('version-update-indicator').textContent = available ? `${latest} available` : 'Update available';
+    $('version-update-indicator').setAttribute('aria-label', available
+      ? `Graphlin ${latest} is available. View update instructions.` : 'View update instructions');
     $('version-update-status').textContent = available ? `Graphlin ${latest} is available`
       : info.update?.status === 'current' ? 'No newer release found'
       : 'Update check unavailable';
@@ -884,6 +908,7 @@ export function startDashboardInfo({ load = signal => request('/api/about', { si
           if ($('project-path').textContent === 'Checking…') $('project-path').textContent = 'Path unavailable';
           if ($('graphlin-version').textContent === 'Checking…') $('graphlin-version').textContent = 'Version unavailable';
           $('version-update-status').textContent = 'Update check unavailable';
+          $('version-update-indicator').hidden = true;
           $('version-update-guide').hidden = true;
           $('version-update-command').textContent = '';
           command = '';
@@ -1556,7 +1581,9 @@ export function startViewer() {
     viewport: null, fitBounds: null, zoom: 1, followFit: true, lastGraphSignature: '', inspectorSignature: '',
     nodeElements: new Map(), edgeElements: new Map(), activityElements: new Map(),
     views: new Map(), viewKey: null, view: null, displayGraph: null, searchQuery: '',
+    nodeTypes: null, nodeTypeButtons: new Map(),
     effects: new Map(), liveReady: false, motionReady: false, movement: null, closed: false, projectName: '',
+    model: null, scene: null, projectedGraph: null, platformActive: false, custom: false, follow: true, viewName: 'Code',
   };
   const motionPreference = window.matchMedia?.('(prefers-reduced-motion: reduce)');
   const sketches = createSketchCache();
@@ -1589,6 +1616,72 @@ export function startViewer() {
   let pointer = null;
   let canvasSize = '';
   let projectController = null;
+  const platform = createViewPlatform({
+    document, request,
+    onFollow(value) { state.follow = value; if (!value) { clearMotion(); state.followFit = false; } },
+    onSelect({ entityId, relationId, activityId }) {
+      if (entityId) {
+        platform.selected(entityId);
+        select('node', state.scene ? representedSelection(entityId, state.scene, state.model) || entityId : entityId);
+        revealInspector();
+      } else if (relationId) {
+        const edge = state.scene?.edges.find(edge => edge.relationIds?.includes(relationId));
+        if (edge) select('edge', edge.id);
+      } else if (activityId) {
+        const event = state.model?.activity.find(event => event.id === activityId);
+        if (event) {
+          $('inspector-body').replaceChildren(html('h3', readable(event.kind || 'Activity')),
+            html('p', `Outcome: ${event.outcome || 'unresolved'}. Attribution: ${event.attribution || 'unknown'}.`),
+            html('p', 'This observation has no linked source entity.'));
+          revealInspector();
+        }
+      }
+    },
+    onView(result) {
+      if (state.closed) return;
+      if (result.clear) {
+        state.scene = null; state.projectedGraph = null; state.custom = false;
+        state.displayGraph = null; state.selection = null; state.inspectorSignature = '';
+        clearMotion();
+        for (const layer of ['group-layer', 'node-layer', 'edge-layer', 'edge-label-layer']) $(layer)?.replaceChildren();
+        state.nodeElements.clear(); state.edgeElements.clear();
+        $('architecture').hidden = true; $('architecture').setAttribute('aria-hidden', 'true');
+        $('custom-view').hidden = true; $('empty-canvas').hidden = true;
+        $('inspector-body').replaceChildren(html('p', 'Select an item in the active view to inspect its evidence.'));
+        updateControls();
+        return;
+      }
+      const previous = state.projectedGraph, previousModel = state.model;
+      const switched = !state.platformActive || state.viewName !== result.name || previousModel?.projectId !== result.model.projectId;
+      state.platformActive = true; state.model = result.model; state.scene = result.scene || null;
+      state.custom = result.kind === 'custom'; state.customCount = result.itemCount; state.viewName = result.name;
+      state.projectedGraph = result.scene ? sceneGraph(result.scene, result.model) : null;
+      $('architecture').hidden = state.custom; $('custom-view').hidden = !state.custom;
+      $('architecture').setAttribute('aria-hidden', String(state.custom));
+      if (switched) resetMotionBaseline();
+      const selectionId = state.scene && representedSelection(result.selection, state.scene, state.model);
+      if (selectionId) state.selection = { type: 'node', id: selectionId };
+      const live = result.streamed && !switched && state.follow;
+      const arrivals = liveNodeChanges(previous, state.projectedGraph, live);
+      const focusNodeId = live && state.scene && result.focusEntityId
+        ? representedSelection(result.focusEntityId, state.scene, state.model) : arrivals.added.at(-1);
+      const before = state.displayGraph;
+      render({ forceFit: result.force || switched, focusNodeId });
+      if (!state.custom && state.scene && !state.scene.groups.length) animateChanges(arrivals, before, focusNodeId);
+      const coverage = result.scene?.coverage;
+      $('view-coverage').hidden = false;
+      const counts = state.model.coverage?.counts || state.model.coverage || {};
+      const progress = ['inventoried', 'inspected', 'deferred', 'unsupported', 'unavailable']
+        .filter(key => Number.isSafeInteger(counts[key])).map(key => `${counts[key]} ${key}`).join(' · ');
+      $('view-coverage').textContent = [coverage?.label || 'Observable activity; outcomes may be unresolved',
+        coverage?.truncated ? `${coverage.shown} shown of ${coverage.total}; open a scope for more` : '',
+        state.model.coverage?.client?.truncated
+          ? `Partial scope: ${Object.entries(state.model.coverage.client.totals)
+            .filter(([kind, total]) => total > state.model.coverage.client.retained[kind])
+            .map(([kind, total]) => `${state.model.coverage.client.retained[kind]} of ${total} ${kind}`).join(', ')}. Open a source scope for more.` : '',
+        progress].filter(Boolean).join(' · ');
+    },
+  });
 
   function announce(message) {
     clearTimeout(announcementTimer);
@@ -1630,16 +1723,17 @@ export function startViewer() {
     $('onboarding-action').dataset.action = progress.next.action;
     // Preserve a manual text selection while live snapshots arrive.
     if ($('orientation-prompt').textContent !== ORIENTATION_PROMPT) $('orientation-prompt').textContent = ORIENTATION_PROMPT;
-    $('orientation').hidden = Boolean(state.searchQuery || state.replayFrame || state.snapshot?.mode === 'demo' || state.snapshot?.mode === 'replay');
+    $('orientation').hidden = Boolean(state.searchQuery || state.nodeTypes !== null || state.replayFrame || state.snapshot?.mode === 'demo' || state.snapshot?.mode === 'replay');
   }
-  function currentGraph() { return state.replayFrame?.graph || state.snapshot?.graph; }
+  function currentGraph() { return state.platformActive ? state.projectedGraph || { revision: state.model?.revision || 0, nodes: [], edges: [] }
+    : state.replayFrame?.graph || state.snapshot?.graph; }
   function applyTheme() {
     const theme = token(state.view?.theme, THEMES, 'sketchbook');
     if ($('drawing').dataset.theme !== theme) $('drawing').dataset.theme = theme;
     $('theme').value = theme;
   }
   function presentation() {
-    const key = presentationKey(state.snapshot, state.replayFrame);
+    const key = presentationKey(state.snapshot, state.replayFrame) + (state.platformActive ? `:${platform.active}:${JSON.stringify(platform.selection)}` : '');
     if (state.viewKey !== key) {
       finishPan();
       clearMotion();
@@ -1766,6 +1860,8 @@ export function startViewer() {
     $('theme').disabled = !state.snapshot;
     $('arrange').disabled = !nodes;
     $('auto-arrange').disabled = !state.snapshot;
+    if (state.custom) for (const id of ['fit', 'zoom-in', 'zoom-out', 'arrange', 'layout', 'auto-arrange']) $(id).disabled = true;
+    if (state.platformActive) { $('replay').disabled = true; $('history').disabled = true; }
   }
   function resetView() {
     resetMotionBaseline();
@@ -1782,17 +1878,21 @@ export function startViewer() {
     const snapshot = normalizeSnapshot(raw);
     if (!streamed) resetMotionBaseline();
     const switched = state.snapshot && (snapshot.sessionId !== state.snapshot.sessionId || snapshot.projectId !== state.snapshot.projectId);
-    const eligible = streamed && state.motionReady && !switched && !state.replayFrame &&
+    const eligible = !state.platformActive && state.follow && streamed && state.motionReady && !switched && !state.replayFrame &&
       snapshot.mode !== 'replay' && state.snapshot?.mode !== 'replay' && motionAllowed();
     const changes = liveNodeChanges(state.snapshot?.graph, snapshot.graph, eligible);
     // A live baseline is independent of animation preferences. Reconnects and
     // initial/session snapshots establish it without focusing an old arrival.
-    const live = streamed && state.liveReady && !switched && !state.replayFrame &&
+    const live = !state.platformActive && state.follow && streamed && state.liveReady && !switched && !state.replayFrame &&
       snapshot.mode !== 'replay' && state.snapshot?.mode !== 'replay';
-    const focusNodeId = liveNodeChanges(state.snapshot?.graph, snapshot.graph, live).added.at(-1);
+    const visible = new Set(filterDiagram(snapshot.graph, state.searchQuery, state.nodeTypes).nodes.map(node => node.id));
+    const focusNodeId = liveNodeChanges(state.snapshot?.graph, snapshot.graph, live).added.filter(id => visible.has(id)).at(-1);
     const before = state.displayGraph;
     cancelMovement({ fit: !focusNodeId });
-    if (switched) resetView();
+    if (switched) {
+      resetView();
+      state.nodeTypes = null;
+    }
     state.snapshot = snapshot;
     state.epoch += 1;
     state.frames = historyFrames(snapshot);
@@ -1836,7 +1936,7 @@ export function startViewer() {
       $('session').replaceChildren(...options);
       $('session').dataset.signature = signature;
     }
-    $('session').value = snapshot.sessionId || '';
+    $('session').value = state.platformActive ? platform.selection.session || snapshot.sessionId || '' : snapshot.sessionId || '';
   }
   function shape(node) {
     const details = detailSketches.paths(node.shape, node.id);
@@ -1916,6 +2016,10 @@ export function startViewer() {
   }
   function select(type, id) {
     state.selection = { type, id };
+    if (type === 'node' && state.platformActive) {
+      const node = currentGraph()?.nodes.find(node => node.id === id);
+      if (node?.entityId) platform.selected(node.entityId);
+    }
     updateSelection();
     renderInspector();
     renderActivity();
@@ -1926,14 +2030,18 @@ export function startViewer() {
     }
   }
   function revealInspector() {
+    revealDetailsSection($('inspector-body')?.parentElement);
+  }
+  function revealDetailsSection(panel) {
+    setWorkspacePanel('details', true);
     const container = $('live-sidebar');
-    const panel = $('inspector-body')?.parentElement;
     if (!container?.scrollTo || !container.getBoundingClientRect || !panel?.getBoundingClientRect ||
       !container.contains(panel)) return;
     const region = container.getBoundingClientRect();
     const evidence = panel.getBoundingClientRect();
     if (!Number.isFinite(region.top) || !Number.isFinite(evidence.top) || !(region.height > 0)) return;
-    const offset = evidence.top - region.top - (container.clientTop || 0);
+    const headingHeight = $('details-heading')?.getBoundingClientRect?.().height || 0;
+    const offset = evidence.top - region.top - (container.clientTop || 0) - headingHeight;
     if (Math.abs(offset) < 1) return;
     container.scrollTo({
       top: Math.max(0, (container.scrollTop || 0) + offset),
@@ -1990,8 +2098,8 @@ export function startViewer() {
     const width = state.viewport.width * scale;
     const height = state.viewport.height * scale;
     state.viewport = {
-      x: node.x + NODE_WIDTH / 2 - width / 2,
-      y: node.y + NODE_HEIGHT / 2 - height / 2,
+      x: node.x + (node.width || NODE_WIDTH) / 2 - width / 2,
+      y: node.y + (node.height || NODE_HEIGHT) / 2 - height / 2,
       width, height,
     };
     state.zoom = zoom;
@@ -2016,14 +2124,48 @@ export function startViewer() {
     state.followFit = false;
     setViewBox();
   }
-  function renderGraph({ forceFit = false, focusNodeId } = {}) {
+  function renderNodeTypeFilters(canonical) {
+    const container = $('node-type-filters');
+    if (!container) return;
+    // Discover kinds from the current canonical canvas, never search results.
+    const kinds = [...new Set(canonical.nodes.map(node => node.kind))].sort();
+    for (const [kind, button] of state.nodeTypeButtons) {
+      if (!kinds.includes(kind)) {
+        button.remove();
+        state.nodeTypeButtons.delete(kind);
+      }
+    }
+    kinds.forEach((kind, index) => {
+      let button = state.nodeTypeButtons.get(kind);
+      if (!button) {
+        button = html('button', upperFirst(kind), 'node-type-filter');
+        button.setAttribute('type', 'button');
+        button.dataset.kind = kind;
+        state.nodeTypeButtons.set(kind, button);
+      }
+      button.setAttribute('aria-pressed', String(state.nodeTypes === null || state.nodeTypes.has(kind)));
+      if (container.children[index] !== button) container.insertBefore(button, container.children[index] || null);
+    });
+    $('node-types-all')?.setAttribute('aria-pressed', String(state.nodeTypes === null));
+    $('node-types-none')?.setAttribute('aria-pressed', String(state.nodeTypes?.size === 0));
+  }
+  function renderGraph({ forceFit = false, arrange = false, focusNodeId } = {}) {
     const canonical = currentGraph();
     if (!canonical) return;
     const view = presentation();
     applyTheme();
-    // Search only projects visibility; layout, evidence and live arrival
-    // detection retain the complete source graph.
-    const graph = filterDiagram(projectPresentation(canonical, view), state.searchQuery);
+    if (state.platformActive && !state.scene) {
+      $('canvas-title').textContent = state.viewName;
+      $('graph-count').textContent = state.custom && Number.isSafeInteger(state.customCount) ? `${state.customCount} items` : '';
+      $('revision').textContent = `Revision ${state.model.revision}`;
+      $('empty-canvas').hidden = true;
+      return;
+    }
+    renderNodeTypeFilters(state.platformActive ? { nodes: state.model.entities } : canonical);
+    // Lay out only visible nodes so hidden components leave no empty slots.
+    // Evidence, exports and live arrival detection retain the canonical graph.
+    const graph = state.scene?.groups.length ? sceneGraph(layoutScene(state.scene), state.model)
+      : projectPresentation(state.scene ? canonical : filterDiagram(canonical, state.searchQuery, state.nodeTypes), view, { arrange });
     state.displayGraph = graph;
     const routes = graphEdgeRoutes(graph);
     const bounds = graphBounds(graph, routes);
@@ -2032,7 +2174,7 @@ export function startViewer() {
     // diagram changes retain fit-all; metadata-only updates keep the camera.
     const newest = graph.nodes.find(node => node.id === focusNodeId);
     if (newest && state.viewport && !forceFit) focusNode(newest, bounds);
-    else if (forceFit || !state.viewport || signature !== state.lastGraphSignature) fitCamera(bounds);
+    else if (forceFit || !state.viewport || (state.follow && signature !== state.lastGraphSignature)) fitCamera(bounds);
     state.lastGraphSignature = signature;
     $('layout').value = view.algorithm;
     $('auto-arrange').checked = view.auto;
@@ -2087,6 +2229,35 @@ export function startViewer() {
     }
     for (const node of graph.nodes) {
       let group = state.nodeElements.get(node.id);
+      if (group && Boolean(group.isSceneGroup) !== Boolean(node.isGroup)) { group.remove(); state.nodeElements.delete(node.id); group = null; }
+      if (node.isGroup) {
+        if (!group) {
+          group = interactiveGroup('node', node.id);
+          group.isSceneGroup = true;
+          group.setAttribute('class', 'diagram-group');
+          state.nodeElements.set(node.id, group);
+          $('group-layer').append(group);
+        }
+        group.setAttribute('transform', `translate(${node.x} ${node.y})`);
+        group.setAttribute('aria-label', `${node.label}. ${node.memberCount} members, ${node.activityCount} with activity. ${node.collapsed ? 'Collapsed' : 'Expanded'}. Inspect evidence.`);
+        group.dataset.change = node.style || 'default';
+        const toggle = svgElement('g', { class: 'group-toggle', role: 'button', tabindex: 0,
+          'aria-label': `${node.collapsed ? 'Expand' : 'Collapse'} ${node.label}`,
+          'aria-expanded': String(!node.collapsed), transform: `translate(${node.width - 33} 10)` });
+        toggle.append(svgElement('rect', { width: 24, height: 24, rx: 4 }),
+          svgElement('text', { x: 12, y: 18, 'text-anchor': 'middle' }, node.collapsed ? '+' : '−'));
+        const toggleGroup = event => { event.stopPropagation(); platform.toggle(node.entityId, node.collapsed); };
+        toggle.addEventListener('click', toggleGroup);
+        toggle.addEventListener('keydown', event => {
+          if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); toggleGroup(event); }
+        });
+        const restoreToggleFocus = group.contains(document.activeElement) && document.activeElement !== group;
+        group.replaceChildren(svgElement('rect', { class: 'group-frame', width: node.width, height: node.height, rx: 5 }),
+          svgElement('text', { class: 'group-heading', x: 14, y: 27 }, clip(node.label, Math.max(15, Math.floor((node.width - 70) / 8)))),
+          svgElement('text', { class: 'group-summary', x: 14, y: 47 }, `${node.memberCount} members · ${node.activityCount} with activity`), toggle);
+        if (restoreToggleFocus) toggle.focus({ preventScroll: true });
+        continue;
+      }
       if (!group) {
         group = interactiveGroup('node', node.id);
         const center = svgElement('g', { transform: `translate(${NODE_WIDTH / 2} ${NODE_HEIGHT / 2})` });
@@ -2109,6 +2280,7 @@ export function startViewer() {
       group.setAttribute('transform', `translate(${node.x} ${node.y})`);
       group.dataset.shape = node.shape;
       group.dataset.kind = node.kind;
+      group.dataset.change = node.style || 'default';
       group.setAttribute('aria-label', `${node.label}. ${upperFirst(node.kind)}. ${summary.label}. Activity ${node.activityState}. Inspect evidence.`);
       const nodeSignature = JSON.stringify([node.label, node.shape, node.kind, node.activityState, summary]);
       if (group.renderSignature === nodeSignature) continue;
@@ -2140,11 +2312,11 @@ export function startViewer() {
     }
     updateSelection();
     $('revision').textContent = `Revision ${graph.revision}`;
-    $('canvas-title').textContent = state.replayFrame ? 'Architecture replay' : 'Live architecture';
+    $('canvas-title').textContent = state.platformActive ? state.viewName : state.replayFrame ? 'Architecture replay' : 'Live architecture';
     $('diagram-title').textContent = `${state.replayFrame ? 'Historical' : 'Live'} architecture, revision ${graph.revision}`;
     $('diagram-desc').textContent = `${graph.nodes.length} components and ${graph.edges.length} relationships. Code interpretation does not establish runtime connectivity. Use Tab and Enter to inspect a component or relationship. With the diagram focused, use plus and minus to zoom, arrow keys to pan, and 0 to fit.`;
     $('graph-count').textContent = `${graph.nodes.length} components · ${graph.edges.length} relationships`;
-    $('diagram-search-status').textContent = state.searchQuery
+    $('diagram-search-status').textContent = state.searchQuery || state.nodeTypes !== null
       ? `${graph.nodes.length} of ${canonical.nodes.length} components shown` : '';
     $('diagram-search-clear').hidden = !state.searchQuery;
     $('empty-canvas').hidden = graph.nodes.length > 0 || removalBounds().length > 0;
@@ -2156,8 +2328,12 @@ export function startViewer() {
       unavailable: ['Waiting for classification.', 'The classifier is unavailable. Safe activity continues below; supported architecture will appear when classification recovers.'],
       timeout: ['Evidence needs another moment.', 'Classification exceeded its deadline. Activity still appears below, and no unsupported components are added.'],
     };
-    const message = state.searchQuery
-      ? ['No matching components.', `No labels contain “${state.searchQuery}”. Try another search or press Esc to restore the diagram.`]
+    const message = state.nodeTypes?.size === 0
+      ? ['No component types selected.', 'Choose a type or All types to show components.']
+      : state.searchQuery
+      ? ['No matching components.', `No selected components match “${state.searchQuery}”. Try another search or press Esc to clear the search.`]
+      : state.nodeTypes !== null && canonical.nodes.length
+      ? ['No matching components.', 'Choose another type or All types to show components.']
       : state.replayFrame
       ? ['No components in this revision.', 'Move through the recent revisions or return to Live to follow the current map.']
       : emptyMessages[classifier] || ['Your architecture starts here.', 'Work in a connected agent session. Components appear when approved evidence supports them; activity can arrive first.'];
@@ -2227,8 +2403,7 @@ export function startViewer() {
     finishPan();
     cancelMovement();
     const before = state.displayGraph;
-    projectPresentation(graph, presentation(), { arrange: true });
-    renderGraph({ forceFit: true });
+    renderGraph({ forceFit: true, arrange: true });
     moveLayout(before, state.displayGraph);
     announce(`Arranged using ${LAYOUT_NAMES[state.view.algorithm]}. Evidence and selection are unchanged.`);
   }
@@ -2241,7 +2416,11 @@ export function startViewer() {
     const body = $('inspector-body');
     const graph = currentGraph();
     const selected = state.selection;
-    const claim = selected && graph ? (selected.type === 'node' ? graph.nodes : graph.edges).find(item => item.id === selected.id) : null;
+    let claim = selected && graph ? (selected.type === 'node' ? graph.nodes : graph.edges).find(item => item.id === selected.id) : null;
+    if (!claim && state.platformActive && selected?.type === 'node') {
+      const entity = state.model.entities.find(entity => entity.id === selected.id);
+      if (entity) claim = sceneGraph({ groups: [], edges: [], nodes: [{ id: entity.id, entityId: entity.id, label: entity.label, kind: entity.kind }] }, state.model).nodes[0];
+    }
     const linkedIds = new Set(claim?.sourceRefs.map(ref => ref.eventId) || []);
     const related = state.snapshot?.activity.filter(event => linkedIds.has(event.id)).slice(-5).reverse() || [];
     const override = selected?.type === 'node' ? state.view?.shapes.get(selected.id) : undefined;
@@ -2270,7 +2449,9 @@ export function startViewer() {
     fact(facts, 'Classification', upperFirst(claim.classification));
     fact(facts, 'Validity', upperFirst(claim.validity));
     fact(facts, 'Evidence state', claim.evidenceState === 'verified' ? 'Verification reported; scope unavailable' : upperFirst(claim.evidenceState));
-    fact(facts, 'Basis', claim.sourceRefs.length && claim.sourceRefs.every(ref => ref.basis === 'jev_interpretation') ? 'Jev code interpretation' : 'Provenance incomplete');
+    const interpreted = claim.sourceRefs.length && claim.sourceRefs.every(ref => INTERPRETATION_BASES.includes(ref.basis));
+    const interpretationLabel = claim.sourceRefs.some(ref => ref.basis === 'decision_interpretation') ? 'Decision interpretation' : 'Jev code interpretation';
+    fact(facts, 'Basis', claim.basis ? upperFirst(claim.basis) : interpreted ? interpretationLabel : 'Provenance incomplete');
     fact(facts, 'Runtime', 'Not established by this snapshot');
     if (selected.type === 'node') fact(facts, 'Activity', upperFirst(claim.activityState));
     else {
@@ -2278,6 +2459,14 @@ export function startViewer() {
       fact(facts, 'To', graph.nodes.find(node => node.id === claim.target)?.label || 'Unknown component');
     }
     body.replaceChildren(type, html('h3', claim.label), badges, html('p', summary.explanation), facts);
+    if (state.platformActive && selected.type === 'node') {
+      fact(facts, 'Change', readable(claim.style || 'No comparison'));
+      if (claim.memberCount) fact(facts, 'Members', String(claim.memberCount));
+      const openScope = html('button', 'Open source scope');
+      openScope.setAttribute('type', 'button');
+      openScope.addEventListener('click', () => platform.scope(claim.entityId || claim.id));
+      body.append(openScope);
+    } else if (claim.relationIds?.length) fact(facts, 'Supporting relations', claim.relationIds.join(', '));
     if (selected.type === 'node') {
       const label = html('label', 'Shape · visual only', 'shape-picker');
       label.setAttribute('for', 'display-shape');
@@ -2311,36 +2500,38 @@ export function startViewer() {
         announce(`Display shape changed. ${claim.label} remains classified as ${claim.kind}.`);
       });
     }
-    const confidence = normalizeConfidence(claim.confidence);
-    body.append(html('h4', 'Classifier confidence'));
-    const confidenceList = html('ul', undefined, 'confidence-list');
-    const confidenceLabels = {
-      supportProbability: 'Evidence support probability',
-      roleProbability: 'Selected role probability',
-      roleConfidence: 'Role distribution confidence',
-      missingContextProbability: 'Missing-context probability',
-      reportedConfidence: 'Reported classifier confidence',
-    };
-    for (const key of Object.keys(confidenceLabels)) {
-      if (!probability(confidence[key])) continue;
-      const item = html('li');
-      item.append(html('span', confidenceLabels[key]), html('strong', `${(confidence[key] * 100).toFixed(1)}%`));
-      confidenceList.append(item);
-    }
-    if (confidenceList.childElementCount) body.append(confidenceList);
-    else body.append(html('p', 'Confidence was not supplied for this claim.', 'fine-print'));
-    body.append(html('p', 'These values describe the classifier’s interpretation. They are not measured accuracy or the probability that a runtime connection succeeds.', 'fine-print'));
-    if (record(confidence.roleProbabilities)) {
-      const details = html('details');
-      details.append(html('summary', 'Role probabilities'));
-      const list = html('ul', undefined, 'confidence-list');
-      for (const [role, value] of Object.entries(confidence.roleProbabilities)) {
-        const row = html('li');
-        row.append(html('span', upperFirst(role)), html('strong', `${(value * 100).toFixed(1)}%`));
-        list.append(row);
+    if (!['parsed', 'metadata', 'lexical'].includes(claim.basis)) {
+      const confidence = normalizeConfidence(claim.confidence);
+      body.append(html('h4', 'Classifier confidence'));
+      const confidenceList = html('ul', undefined, 'confidence-list');
+      const confidenceLabels = {
+        supportProbability: 'Evidence support probability',
+        roleProbability: 'Selected role probability',
+        roleConfidence: 'Role distribution confidence',
+        missingContextProbability: 'Missing-context probability',
+        reportedConfidence: 'Reported classifier confidence',
+      };
+      for (const key of Object.keys(confidenceLabels)) {
+        if (!probability(confidence[key])) continue;
+        const item = html('li');
+        item.append(html('span', confidenceLabels[key]), html('strong', `${(confidence[key] * 100).toFixed(1)}%`));
+        confidenceList.append(item);
+      }
+      if (confidenceList.childElementCount) body.append(confidenceList);
+      else body.append(html('p', 'Confidence was not supplied for this claim.', 'fine-print'));
+      body.append(html('p', 'These values describe the classifier’s interpretation. They are not measured accuracy or the probability that a runtime connection succeeds.', 'fine-print'));
+      if (record(confidence.roleProbabilities)) {
+        const details = html('details');
+        details.append(html('summary', 'Role probabilities'));
+        const list = html('ul', undefined, 'confidence-list');
+        for (const [role, value] of Object.entries(confidence.roleProbabilities)) {
+          const row = html('li');
+          row.append(html('span', upperFirst(role)), html('strong', `${(value * 100).toFixed(1)}%`));
+          list.append(row);
+        }
+        details.append(list);
+        body.append(details);
       }
-      details.append(list);
-      body.append(details);
     }
     body.append(html('h4', `Source references (${claim.sourceRefs.length})`));
     if (!claim.sourceRefs.length) body.append(html('p', 'No source references were supplied. This claim’s provenance cannot be inspected.', 'fine-print'));
@@ -2348,8 +2539,9 @@ export function startViewer() {
     for (const ref of claim.sourceRefs) {
       const item = html('li', undefined, 'source-reference');
       item.append(
-        html('strong', ref.sourceClass === 'public_intent' ? 'Public intent' : ref.sourceClass === 'source' ? 'Source artifact' : 'Unknown source class'),
-        html('span', ref.basis === 'jev_interpretation' ? 'Basis: Jev interpretation' : 'Basis not supplied'),
+        html('strong', ref.sourceClass === 'public_intent' ? 'Public intent' : ref.sourceClass === 'source' || (claim.basis === 'parsed' && ref.artifactId) ? 'Source artifact' : 'Unknown source class'),
+        html('span', claim.basis ? `Basis: ${upperFirst(claim.basis)}` : ref.basis === 'decision_interpretation'
+          ? 'Basis: Decision interpretation' : ref.basis === 'jev_interpretation' ? 'Basis: Jev interpretation' : 'Basis not supplied'),
         html('span', `${ref.sourceClass === 'public_intent' ? 'Message' : 'Artifact'}: ${ref.sourceRef?.messageId || ref.artifactId || 'not supplied'}`),
         html('span', `Version: ${ref.hash || 'not supplied'} · ${ref.sourceClass === 'public_intent' ? 'content version' : 'generation'} ${ref.sourceRef?.contentVersion ?? ref.generation}`),
       );
@@ -2371,6 +2563,7 @@ export function startViewer() {
         button.addEventListener('click', () => {
           const row = state.activityElements.get(event.id);
           if (row) {
+            setWorkspacePanel('activity', true);
             row.querySelector('button').focus();
             row.scrollIntoView({ block: 'nearest' });
           }
@@ -2381,6 +2574,16 @@ export function startViewer() {
     }
   }
   function renderHistory() {
+    if (state.platformActive) {
+      const replay = Boolean(platform.selection.checkpoint);
+      $('live').setAttribute('aria-pressed', String(!replay));
+      $('replay').setAttribute('aria-pressed', String(replay));
+      $('history-position').textContent = `Rev. ${state.model.revision}`;
+      $('replay-note').textContent = replay ? 'Recorded checkpoint. Choose Live to return to current observations.'
+        : 'Use Position to inspect a retained model checkpoint.';
+      $('activity-note').textContent = 'This panel shows live capture. The timeline follows the selected model position.';
+      return;
+    }
     const replay = Boolean(state.replayFrame);
     const frameIndex = replay ? state.frames.findIndex(frame => frame.revision === state.replayFrame.revision) : state.frames.length - 1;
     $('live').setAttribute('aria-pressed', String(!replay));
@@ -2433,6 +2636,7 @@ export function startViewer() {
           updateSelection();
           renderInspector();
           renderActivity();
+          revealInspector();
           announce(`Related evidence for ${(node || edge).label} is shown in the inspector.`);
         } else toast(state.replayFrame ? 'No evidence link for this event in the displayed revision. Return to Live to inspect current links.' : 'This captured event has no architecture evidence link. Tool activity alone does not establish an architectural claim.');
       });
@@ -2463,6 +2667,7 @@ export function startViewer() {
   function replayAt(index) {
     const frame = state.frames[index];
     if (!frame) return;
+    setWorkspacePanel('history', true);
     resetMotionBaseline();
     state.replayFrame = frame;
     render();
@@ -2524,6 +2729,7 @@ export function startViewer() {
         connection('reconnecting');
         error('The live connection was lost. Displaying the last received snapshot while the viewer reconnects.');
       });
+      void platform.start();
       void dashboardInfo.refresh();
       // Optional authenticated metadata must not hold up the event stream or
       // turn an older server's missing endpoint into a connection failure.
@@ -2534,6 +2740,7 @@ export function startViewer() {
         if (!state.closed && attempt === state.connectEpoch) {
           state.projectName = friendlyProjectName(info.projectRoot);
           $('project-path').textContent = info.projectRoot;
+          $('project-path').title = info.projectRoot;
           renderStatus();
         }
       } catch { /* The project ID remains a usable fallback. */ }
@@ -2588,24 +2795,87 @@ export function startViewer() {
       $('orientation-prompt').focus();
     }
   };
-  const onToggleActivity = () => {
-    const hidden = !$('activity-content').hidden;
-    $('activity-content').hidden = hidden;
-    $('activity-toggle').textContent = hidden ? 'Show activity log' : 'Hide activity log';
-    $('activity-toggle').setAttribute('aria-expanded', String(!hidden));
+  const workspacePanels = {
+    details: { panel: $('live-sidebar'), toggle: $('details-toggle') },
+    history: { panel: $('history-panel'), toggle: $('history-toggle') },
+    activity: { panel: $('activity-panel'), toggle: $('activity-toggle') },
+  };
+  function setWorkspacePanel(name, open) {
+    const { panel, toggle } = workspacePanels[name];
+    if (!open && panel.contains(document.activeElement)) toggle.focus();
+    panel.hidden = !open;
+    toggle.setAttribute('aria-expanded', String(open));
+    if (name === 'details') $('workspace-body').dataset.detailsOpen = String(open);
+    if (name === 'activity') $('activity-content').hidden = !open;
+  }
+  const onToggleDetails = () => setWorkspacePanel('details', $('live-sidebar').hidden);
+  const onToggleHistory = () => setWorkspacePanel('history', $('history-panel').hidden);
+  const onToggleActivity = () => setWorkspacePanel('activity', $('activity-panel').hidden);
+  const onCloseDetails = () => {
+    setWorkspacePanel('details', false);
+    $('details-toggle').focus();
   };
+  const onViewUpdate = () => {
+    $('version-update-guide').open = !$('version-update-guide').hidden;
+    revealDetailsSection($('version-update-status'));
+  };
+  const panelKeyHandlers = new Map();
+  for (const [name, { panel, toggle }] of Object.entries(workspacePanels)) {
+    setWorkspacePanel(name, false);
+    const onKeyDown = event => {
+      if (event.key !== 'Escape' || event.defaultPrevented || event.target?.tagName?.toLowerCase() === 'select') return;
+      event.preventDefault();
+      setWorkspacePanel(name, false);
+      toggle.focus();
+    };
+    panel.addEventListener('keydown', onKeyDown);
+    panelKeyHandlers.set(panel, onKeyDown);
+  }
   $('onboarding-action').addEventListener('click', onOnboardingAction);
   $('orientation-copy').addEventListener('click', onCopyOrientation);
+  $('details-toggle').addEventListener('click', onToggleDetails);
+  $('details-close').addEventListener('click', onCloseDetails);
+  $('version-update-indicator').addEventListener('click', onViewUpdate);
+  $('history-toggle').addEventListener('click', onToggleHistory);
   $('activity-toggle').addEventListener('click', onToggleActivity);
-  const onSearchInput = () => {
-    if (state.closed || state.searchQuery === $('diagram-search').value) return;
-    state.searchQuery = $('diagram-search').value;
+  const applyFilters = () => {
+    if (state.platformActive) { platform.filter(state.searchQuery, state.nodeTypes); return; }
     // Filtering is not a source change: cancel existing decoration/movement
     // and render directly, without changing the snapshot arrival baseline.
     finishPan();
     clearMotion();
     renderOnboarding();
-    renderGraph({ forceFit: true });
+    renderGraph({ forceFit: true, arrange: true });
+  };
+  const onSearchInput = () => {
+    if (state.closed || state.searchQuery === $('diagram-search').value) return;
+    state.searchQuery = $('diagram-search').value;
+    if (state.platformActive) { platform.filter(state.searchQuery, state.nodeTypes); return; }
+    applyFilters();
+  };
+  const onNodeTypeClick = event => {
+    if (state.closed || !currentGraph()) return;
+    const container = $('node-type-filters');
+    let button = event.target;
+    while (button && button.parentElement !== container) button = button.parentElement;
+    const kind = button?.dataset.kind;
+    if (!kind || !state.nodeTypeButtons.has(kind)) return;
+    // null means all, including future kinds. Explicit selections retain their
+    // choices when a kind disappears and returns; new kinds stay unselected.
+    if (state.nodeTypes === null) state.nodeTypes = new Set((state.platformActive ? state.model.entities : currentGraph().nodes).map(node => node.kind));
+    if (state.nodeTypes.has(kind)) state.nodeTypes.delete(kind);
+    else state.nodeTypes.add(kind);
+    applyFilters();
+  };
+  const onAllNodeTypes = () => {
+    if (state.closed) return;
+    state.nodeTypes = null;
+    applyFilters();
+  };
+  const onNoNodeTypes = () => {
+    if (state.closed) return;
+    state.nodeTypes = new Set();
+    applyFilters();
   };
   const clearSearch = () => {
     $('diagram-search').value = '';
@@ -2627,11 +2897,15 @@ export function startViewer() {
   };
   $('diagram-search').addEventListener('input', onSearchInput);
   $('diagram-search-clear').addEventListener('click', clearSearch);
+  $('node-type-filters')?.addEventListener('click', onNodeTypeClick);
+  $('node-types-all')?.addEventListener('click', onAllNodeTypes);
+  $('node-types-none')?.addEventListener('click', onNoNodeTypes);
   window.addEventListener('keydown', onSearchKeyDown);
   $('pause').addEventListener('click', () => control(state.snapshot?.paused ? 'resume' : 'pause'));
-  $('session').addEventListener('change', () => control('session', $('session').value));
+  $('session').addEventListener('change', () => state.platformActive ? platform.session($('session').value) : control('session', $('session').value));
   $('export').addEventListener('click', exportJSON);
   $('live').addEventListener('click', () => {
+    if (state.platformActive) { platform.live(); return; }
     resetMotionBaseline();
     state.replayFrame = null;
     if (state.snapshot) render();
@@ -2737,7 +3011,7 @@ export function startViewer() {
   $('architecture').addEventListener('pointerup', finishPan);
   $('architecture').addEventListener('pointercancel', finishPan);
   $('architecture').addEventListener('lostpointercapture', finishPan);
-  const onPageHide = () => { connectionDialog.close(); diagnosticsDialog.close(); resetMotionBaseline(); state.stream?.close(); state.stream = null; };
+  const onPageHide = () => { connectionDialog.close(); diagnosticsDialog.close(); platform.suspend(); resetMotionBaseline(); state.stream?.close(); state.stream = null; };
   const onPageShow = event => { if (!state.closed && event.persisted) connect(); };
   const onOnline = () => { if (!state.closed && state.connection !== 'connected') connect(); };
   const onVisibility = () => resetMotionBaseline();
@@ -2766,14 +3040,23 @@ export function startViewer() {
     ready: connect(),
     close() {
       state.closed = true;
+      platform.close();
       projectController?.abort();
       projectController = null;
       dashboardInfo.close();
       $('onboarding-action').removeEventListener('click', onOnboardingAction);
       $('orientation-copy').removeEventListener('click', onCopyOrientation);
+      $('details-toggle').removeEventListener('click', onToggleDetails);
+      $('details-close').removeEventListener('click', onCloseDetails);
+      $('version-update-indicator').removeEventListener('click', onViewUpdate);
+      $('history-toggle').removeEventListener('click', onToggleHistory);
       $('activity-toggle').removeEventListener('click', onToggleActivity);
+      for (const [panel, handler] of panelKeyHandlers) panel.removeEventListener('keydown', handler);
       $('diagram-search').removeEventListener('input', onSearchInput);
       $('diagram-search-clear').removeEventListener('click', clearSearch);
+      $('node-type-filters')?.removeEventListener('click', onNodeTypeClick);
+      $('node-types-all')?.removeEventListener('click', onAllNodeTypes);
+      $('node-types-none')?.removeEventListener('click', onNoNodeTypes);
       window.removeEventListener?.('keydown', onSearchKeyDown);
       $('architecture').removeEventListener('wheel', onDiagramWheel);
       connectionDialog.dispose();