graphlin 0.1.2 → 0.1.3

package/.claude-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "graphlin",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Local architecture and activity viewer with passive, bounded event hooks.",
   "author": {
     "name": "Graphlin contributors"

package/.codex-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "graphlin",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Local architecture and activity diagrams from observable coding-agent work.",
   "author": {
     "name": "Graphlin contributors"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "graphlin",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Live architecture and activity diagrams from observable coding-agent work.",
   "private": false,
   "type": "module",

package/plugin.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://agent-plugins.org/schemas/1.0.0/plugin.schema.json",
   "name": "graphlin",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Local architecture and activity diagrams from observable coding-agent work.",
   "extensions": {
     "com.openai": {

package/runtime/web/app.js

@@ -157,10 +157,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)) };
 }
@@ -842,6 +842,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 +852,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 +890,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,6 +1563,7 @@ 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: '',
   };
   const motionPreference = window.matchMedia?.('(prefers-reduced-motion: reduce)');
@@ -1630,7 +1638,7 @@ 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 applyTheme() {
@@ -1789,10 +1797,14 @@ export function startViewer() {
     // initial/session snapshots establish it without focusing an old arrival.
     const live = 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);
@@ -1926,14 +1938,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),
@@ -2016,14 +2032,40 @@ 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);
+    renderNodeTypeFilters(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 = projectPresentation(filterDiagram(canonical, state.searchQuery, state.nodeTypes), view, { arrange });
     state.displayGraph = graph;
     const routes = graphEdgeRoutes(graph);
     const bounds = graphBounds(graph, routes);
@@ -2144,7 +2186,7 @@ export function startViewer() {
     $('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 +2198,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 +2273,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.`);
   }
@@ -2371,6 +2416,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' });
           }
@@ -2433,6 +2479,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 +2510,7 @@ export function startViewer() {
   function replayAt(index) {
     const frame = state.frames[index];
     if (!frame) return;
+    setWorkspacePanel('history', true);
     resetMotionBaseline();
     state.replayFrame = frame;
     render();
@@ -2534,6 +2582,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 +2637,85 @@ 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 = () => {
     // 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;
+    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(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,6 +2737,9 @@ 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));
@@ -2771,9 +2884,17 @@ export function startViewer() {
       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();

package/runtime/web/index.html

@@ -16,6 +16,15 @@
   <div class="page">
     <header class="masthead">
       <a class="brand" href="/" aria-label="Graphlin live viewer"><span class="brand-mark" aria-hidden="true"></span>graphlin</a>
+      <section class="project-details" aria-label="Project and Graphlin version">
+        <p id="project-label" class="project-label">Local project</p>
+        <dl>
+          <div><dt>Branch</dt><dd id="project-branch">Checking…</dd></div>
+          <div class="project-path"><dt>Path</dt><dd id="project-path">Checking…</dd></div>
+          <div><dt>Graphlin</dt><dd id="graphlin-version">Checking…</dd></div>
+        </dl>
+      </section>
+      <button class="update-indicator" id="version-update-indicator" type="button" aria-controls="version-update-guide" hidden>Update available</button>
       <div class="connection" id="connection" data-state="connecting">
         <span class="connection-dot" aria-hidden="true"></span>
         <span id="connection-label" role="status">Connecting to local service</span>
@@ -24,29 +33,7 @@
     </header>
 
     <main id="main">
-      <div class="intro">
-        <div>
-          <h1>Architecture, as it happens.</h1>
-          <p>Follow the work. Inspect the evidence behind each connection.</p>
-        </div>
-        <p id="project-label" class="project-label">Local project</p>
-      </div>
-
-      <section class="project-details" aria-label="Project and Graphlin version">
-        <dl>
-          <div><dt>Branch</dt><dd id="project-branch">Checking…</dd></div>
-          <div class="project-path"><dt>Path</dt><dd id="project-path">Checking…</dd></div>
-          <div><dt>Graphlin</dt><dd id="graphlin-version">Checking…</dd></div>
-        </dl>
-        <p id="version-update-status" role="status">Checking for updates…</p>
-        <details id="version-update-guide" hidden>
-          <summary>How to update</summary>
-          <p id="version-update-steps">Press Ctrl+C in the viewer terminal, then run this command. Start a new Claude Code or Codex session after setup finishes.</p>
-          <pre id="version-update-command" tabindex="0"></pre>
-          <button id="version-update-copy" type="button">Copy update command</button>
-          <span id="version-update-copy-status" role="status"></span>
-        </details>
-      </section>
+      <h1 class="screen-reader">Live architecture workspace</h1>
 
       <div id="demo-banner" class="notice demo-notice" role="status" hidden>
         <strong>Demo session</strong>
@@ -61,30 +48,57 @@
             <span>Session</span>
             <select id="session" disabled><option value="">Waiting for a session</option></select>
           </label>
+          <div class="panel-controls" role="group" aria-label="Workspace panels">
+            <button type="button" id="details-toggle" aria-expanded="false" aria-controls="live-sidebar">Details</button>
+            <button type="button" id="history-toggle" aria-expanded="false" aria-controls="history-panel">History</button>
+            <button type="button" id="activity-toggle" aria-expanded="false" aria-controls="activity-panel">Activity</button>
+          </div>
           <div class="session-actions">
             <button type="button" id="classification-log" aria-haspopup="dialog" aria-controls="diagnostics-dialog">Classification log</button>
-            <button type="button" id="how-to-connect" aria-haspopup="dialog" aria-controls="connection-dialog">How to connect</button>
+            <button type="button" id="how-to-connect" aria-haspopup="dialog" aria-controls="connection-dialog">Connect</button>
             <button type="button" id="pause" aria-describedby="capture-note" disabled>Pause classification</button>
             <button type="button" id="export" disabled>Export JSON</button>
           </div>
         </div>
 
-        <div class="status-strip" aria-label="Capture and classification status">
-          <div class="classification-status">
-            <span class="status-dot" id="classifier-dot" data-state="waiting" aria-hidden="true"></span>
-            <strong id="classifier-label">Waiting for local service</strong>
-            <span id="capture-note">Capture status will appear with the first snapshot.</span>
-          </div>
-          <div class="coverage-status"><span id="coverage-label">Coverage not reported</span><span id="queue-label">No snapshot yet</span></div>
-        </div>
-
-        <div class="workspace-body">
+        <div class="workspace-body" id="workspace-body" data-details-open="false">
           <section class="drawing" id="drawing" data-theme="sketchbook" aria-labelledby="canvas-title">
             <div class="drawing-toolbar">
               <div class="drawing-heading">
                 <h2 id="canvas-title">Live architecture</h2>
                 <span id="revision">Revision —</span>
               </div>
+              <div class="layout-toolbar" role="group" aria-label="Diagram arrangement">
+                <label for="layout">Layout
+                  <select id="layout" aria-describedby="layout-note" disabled>
+                    <option value="hierarchy">Hierarchy top-down</option>
+                    <option value="dependency">Dependency left-right</option>
+                    <option value="grouped">Group by type</option>
+                    <option value="circular">Circular</option>
+                    <option value="grid">Grid</option>
+                    <option value="original">Original</option>
+                  </select>
+                </label>
+                <button type="button" id="arrange" disabled>Arrange</button>
+                <label class="auto-arrange" for="auto-arrange"><input id="auto-arrange" type="checkbox" checked disabled> Auto-arrange</label>
+                <div class="theme-picker">
+                  <label for="theme">Theme
+                    <select id="theme" aria-describedby="theme-note" disabled>
+                      <option value="sketchbook">Sketchbook</option>
+                      <option value="ocean">Ocean</option>
+                      <option value="forest">Forest</option>
+                      <option value="sunset">Sunset</option>
+                      <option value="berry">Berry</option>
+                      <option value="sepia">Sepia</option>
+                      <option value="blueprint">Blueprint dark</option>
+                      <option value="midnight">Midnight dark</option>
+                    </select>
+                  </label>
+                  <span class="theme-preview" aria-hidden="true"><i></i><i></i><i></i><i></i></span>
+                </div>
+                <span class="screen-reader" id="theme-note">Colors follow component types. Themes change appearance only.</span>
+                <span class="screen-reader" id="layout-note">Arranges when components or connections change.</span>
+              </div>
               <div class="zoom-controls" role="group" aria-label="Diagram zoom">
                 <button type="button" id="zoom-out" aria-label="Zoom out" disabled>−</button>
                 <output id="zoom-level" aria-label="Zoom level">100%</output>
@@ -92,43 +106,19 @@
                 <button type="button" id="fit" disabled>Fit</button>
               </div>
             </div>
-            <div class="layout-toolbar" role="group" aria-label="Diagram arrangement">
-              <label for="layout">Layout
-                <select id="layout" disabled>
-                  <option value="hierarchy">Hierarchy top-down</option>
-                  <option value="dependency">Dependency left-right</option>
-                  <option value="grouped">Group by type</option>
-                  <option value="circular">Circular</option>
-                  <option value="grid">Grid</option>
-                  <option value="original">Original</option>
-                </select>
-              </label>
-              <button type="button" id="arrange" disabled>Arrange</button>
-              <label class="auto-arrange" for="auto-arrange"><input id="auto-arrange" type="checkbox" checked disabled> Auto-arrange</label>
-              <div class="theme-picker">
-                <label for="theme">Theme
-                  <select id="theme" aria-describedby="theme-note" disabled>
-                    <option value="sketchbook">Sketchbook</option>
-                    <option value="ocean">Ocean</option>
-                    <option value="forest">Forest</option>
-                    <option value="sunset">Sunset</option>
-                    <option value="berry">Berry</option>
-                    <option value="sepia">Sepia</option>
-                    <option value="blueprint">Blueprint dark</option>
-                    <option value="midnight">Midnight dark</option>
-                  </select>
-                </label>
-                <span class="theme-preview" aria-hidden="true"><i></i><i></i><i></i><i></i></span>
+            <div class="filter-toolbar">
+              <div class="diagram-search-bar" role="search" aria-label="Diagram search">
+                <label class="screen-reader" for="diagram-search">Find components</label>
+                <input id="diagram-search" type="search" maxlength="200" autocomplete="off" spellcheck="false" placeholder="Find components…" aria-controls="architecture" aria-describedby="diagram-search-hint" aria-keyshortcuts="/">
+                <button id="diagram-search-clear" type="button" hidden>Clear search</button>
+                <span class="screen-reader" id="diagram-search-hint">/ to search · Esc to clear</span>
+                <span id="diagram-search-status" role="status" aria-live="polite" aria-atomic="true"></span>
+              </div>
+              <div class="node-type-toolbar" role="group" aria-label="Component type filters">
+                <button type="button" id="node-types-all">All types</button>
+                <button type="button" id="node-types-none">Clear all</button>
+                <div id="node-type-filters" role="group" aria-label="Visible component types"></div>
               </div>
-              <span class="screen-reader" id="theme-note">Colors follow component types. Themes change appearance only.</span>
-              <span id="layout-note">Arranges when components or connections change.</span>
-            </div>
-            <div class="diagram-search-bar" role="search" aria-label="Diagram search">
-              <label for="diagram-search">Find components</label>
-              <input id="diagram-search" type="search" maxlength="200" autocomplete="off" spellcheck="false" placeholder="Search labels…" aria-controls="architecture" aria-describedby="diagram-search-hint" aria-keyshortcuts="/">
-              <button id="diagram-search-clear" type="button" hidden>Clear search</button>
-              <span id="diagram-search-hint">/ to search · Esc to clear</span>
-              <span id="diagram-search-status" role="status" aria-live="polite" aria-atomic="true"></span>
             </div>
             <div class="diagram-stage" id="diagram-stage">
               <svg id="architecture" viewBox="0 0 920 510" role="group" tabindex="0" aria-labelledby="diagram-title diagram-desc">
@@ -164,15 +154,29 @@
               </div>
               <span id="graph-count">No components yet</span>
             </div>
-            <details class="shape-key">
-              <summary>Shape key</summary>
-              <div id="shape-key-items"></div>
-              <p>Shapes describe component types. Display overrides change appearance only.</p>
-            </details>
             <p class="diagram-note" id="diagram-note">Code classification does not establish runtime connectivity.</p>
           </section>
 
-          <aside class="live-sidebar" id="live-sidebar" aria-label="Live activity and evidence">
+          <aside class="live-sidebar" id="live-sidebar" aria-label="Live activity and evidence" hidden>
+            <div class="details-heading" id="details-heading"><h2>Details</h2><button type="button" id="details-close" aria-label="Close details">Close</button></div>
+            <div class="status-strip" aria-label="Capture and classification status">
+              <div class="classification-status">
+                <span class="status-dot" id="classifier-dot" data-state="waiting" aria-hidden="true"></span>
+                <strong id="classifier-label">Waiting for local service</strong>
+                <span id="capture-note">Capture status will appear with the first snapshot.</span>
+              </div>
+              <div class="coverage-status"><span id="coverage-label">Coverage not reported</span><span id="queue-label">No snapshot yet</span></div>
+            </div>
+            <section class="version-details" aria-label="Graphlin updates">
+              <p id="version-update-status" role="status">Checking for updates…</p>
+              <details id="version-update-guide" hidden>
+                <summary>How to update</summary>
+                <p id="version-update-steps">Press Ctrl+C in the viewer terminal, then run this command. Start a new Claude Code or Codex session after setup finishes.</p>
+                <pre id="version-update-command" tabindex="0"></pre>
+                <button id="version-update-copy" type="button">Copy update command</button>
+                <span id="version-update-copy-status" role="status"></span>
+              </details>
+            </section>
             <section class="onboarding" aria-labelledby="onboarding-title">
               <h2 id="onboarding-title">Getting your first shape</h2>
               <ol class="onboarding-progress" aria-label="Observed setup progress">
@@ -193,6 +197,11 @@
               <ol id="sidebar-hook-list" class="hook-receipts" aria-label="Received hooks across this project, newest first"></ol>
             </details>
             <section class="sidebar-history sidebar-theme" id="sidebar-history" data-theme="sketchbook" aria-labelledby="sidebar-change-heading">
+              <details class="shape-key">
+                <summary>Shape key</summary>
+                <div id="shape-key-items"></div>
+                <p>Shapes describe component types. Display overrides change appearance only.</p>
+              </details>
               <div class="sidebar-heading"><h2 id="sidebar-change-heading">Diagram changes</h2><span class="sidebar-count" id="sidebar-change-count">0</span></div>
               <p class="sidebar-note" id="sidebar-change-note">Newest changes first. Select a shape to inspect it, or a revision to replay.</p>
               <p class="sidebar-empty" id="sidebar-change-empty">Shape changes will stack here as this session discovers or changes the architecture.</p>
@@ -212,7 +221,7 @@
           </aside>
         </div>
 
-        <div class="playback">
+        <div class="playback" id="history-panel" role="region" aria-label="Architecture history" hidden>
           <div class="mode-buttons" role="group" aria-label="Architecture view">
             <button id="live" type="button" aria-pressed="true">Live</button>
             <button id="replay" type="button" aria-pressed="false" disabled>Replay</button>
@@ -226,13 +235,12 @@
         </div>
       </section>
 
-      <section class="activity-section" aria-labelledby="activity-heading">
+      <section class="activity-section" id="activity-panel" aria-labelledby="activity-heading" hidden>
         <div class="activity-heading">
           <div><h2 id="activity-heading">Activity stream</h2><p id="activity-note">Observable work, independent of classification.</p></div>
           <span id="activity-count">0 events</span>
-          <button id="activity-toggle" type="button" aria-expanded="true" aria-controls="activity-content">Hide activity log</button>
         </div>
-        <div id="activity-content">
+        <div id="activity-content" hidden>
           <p class="activity-empty" id="activity-empty">No activity received. Start work in a connected agent session; its captured events will appear here.</p>
           <ol id="activity-list" class="activity-list" aria-label="Recent activity, newest first"></ol>
         </div>

package/runtime/web/style.css

@@ -24,39 +24,42 @@ button:disabled { opacity: .5; cursor: default; }
 button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
 a { color: var(--blue); }
 p, h1, h2, h3 { margin: 0; }
-.page { max-width: 1720px; margin: auto; padding: 0 38px; }
+.page { width: 100%; height: 100vh; height: 100dvh; min-height: 620px; display: flex; flex-direction: column; }
+main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
 .skip-link { position: fixed; top: -100px; left: 20px; z-index: 20; padding: 12px 18px; background: var(--white); border: 2px solid var(--blue); border-radius: 6px; }
 .skip-link:focus { top: 12px; }
-.masthead { display: flex; align-items: center; justify-content: space-between; min-height: 85px; border-bottom: 1px solid var(--line); gap: 20px; }
-.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); font-size: 29px; font-weight: 750; letter-spacing: -1.4px; text-decoration: none; }
-.brand-mark { width: 28px; height: 28px; border: 3px solid var(--blue); border-radius: 7px; transform: rotate(-9deg); position: relative; }
+.masthead { display: flex; align-items: center; min-height: 54px; padding: 7px 16px; border-bottom: 1px solid var(--line); gap: 22px; background: var(--white); flex-shrink: 0; }
+.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); font-size: 23px; font-weight: 750; letter-spacing: -1.1px; text-decoration: none; flex-shrink: 0; }
+.brand-mark { width: 22px; height: 22px; border: 2px solid var(--blue); border-radius: 6px; transform: rotate(-9deg); position: relative; }
 .brand-mark::after { content: ""; position: absolute; right: -8px; bottom: -6px; width: 12px; height: 12px; border: 3px solid var(--paper); border-radius: 50%; background: var(--teal); }
-.connection { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
+.connection { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; margin-left: auto; max-width: 250px; }
+.update-indicator { flex-shrink: 0; min-height: 28px; padding: 3px 8px; font-size: 10px; color: var(--teal); border-color: var(--teal); }
 .connection-dot, .status-dot { display: inline-block; flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
 .connection[data-state="connected"] .connection-dot, .status-dot[data-state="ready"] { background: var(--teal); }
 .connection[data-state="reconnecting"] .connection-dot, .status-dot[data-state="waiting"] { background: var(--amber); }
 .connection[data-state="error"] .connection-dot, .connection[data-state="auth"] .connection-dot, .status-dot[data-state="error"] { background: var(--red); }
 .text-button { background: transparent; border-color: transparent; padding: 4px 6px; min-height: 32px; color: var(--blue); font-size: 12px; }
-.intro { padding: 25px 0 24px; display: flex; align-items: end; justify-content: space-between; gap: 22px; }
 h1 { font-size: clamp(27px, 2.3vw, 36px); letter-spacing: -1px; font-weight: 650; line-height: 1.2; }
-.intro p { color: var(--muted); margin-top: 7px; }
-.intro .project-label { font-size: 12px; max-width: 250px; text-align: right; overflow-wrap: anywhere; }
-.notice { padding: 11px 16px; margin-bottom: 14px; border-radius: 7px; font-size: 13px; }
+.notice { flex-shrink: 0; padding: 6px 16px; font-size: 11px; max-height: 20dvh; overflow: auto; }
 .demo-notice { display: flex; gap: 12px; color: #744807; background: #fff7e6; border: 1px solid #e6cb96; }
 .demo-notice strong { white-space: nowrap; }
 .error-notice { color: #85223a; background: #fff1f4; border: 1px solid #e8b8c3; }
-.workspace { border: 1px solid var(--line); border-radius: 13px; background: var(--white); overflow: hidden; box-shadow: 0 8px 30px #16324e05; }
-.workspace-toolbar { min-height: 71px; padding: 14px 21px; display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
-.session-picker { display: flex; align-items: center; gap: 11px; font-size: 12px; color: var(--muted); min-width: 0; }
-.session-picker select { color: var(--ink); font-size: 14px; font-weight: 600; border: 1px solid var(--line); border-radius: 6px; padding: 8px 30px 8px 11px; background: var(--paper); max-width: min(320px, 35vw); min-width: 150px; }
-.session-actions { display: flex; flex-wrap: wrap; gap: 8px; flex-shrink: 0; max-width: 100%; font-size: 12px; }
-.status-strip { display: flex; justify-content: space-between; gap: 15px; align-items: center; padding: 11px 21px; font-size: 11px; border-bottom: 1px solid var(--line); }
+.workspace { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--white); }
+.workspace-toolbar { padding: 6px 12px; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; border-bottom: 1px solid var(--line); flex-shrink: 0; }
+.session-picker { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--muted); min-width: 0; }
+.session-picker select { color: var(--ink); font-size: 11px; font-weight: 600; border: 1px solid var(--line); border-radius: 5px; padding: 5px 22px 5px 8px; background: var(--paper); max-width: min(240px, 30vw); min-width: 100px; min-height: 32px; }
+.session-actions { display: flex; flex-wrap: wrap; gap: 5px; margin-left: auto; font-size: 11px; }
+.session-actions button, .panel-controls button { min-height: 32px; padding: 5px 9px; font-size: 11px; }
+.panel-controls { display: flex; gap: 4px; }
+.panel-controls button[aria-expanded="true"] { background: var(--soft); border-color: var(--blue); color: var(--blue); }
+.status-strip { display: flex; flex-direction: column; gap: 9px; padding: 14px 17px; font-size: 11px; border-bottom: 1px solid var(--line); }
 .classification-status { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
 .classification-status strong { font-weight: 650; }
 #capture-note { color: var(--muted); }
-.coverage-status { display: flex; gap: 4px 16px; justify-content: flex-end; color: var(--muted); text-align: right; flex-wrap: wrap; max-width: 52%; }
+.coverage-status { display: flex; gap: 4px 12px; color: var(--muted); flex-wrap: wrap; }
 #coverage-label { max-width: 67ch; }
-.workspace-body { display: grid; grid-template-columns: minmax(0, 1fr) 315px; align-items: start; }
+.workspace-body { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; }
+.workspace-body[data-details-open="true"] { grid-template-columns: minmax(0, 1fr) 340px; }
 .sidebar-theme,
 .drawing {
   --canvas: #fbfaf7; --ink: #293340; --muted: #4b5765; --node-ink: #343d49;
@@ -67,7 +70,7 @@ h1 { font-size: clamp(27px, 2.3vw, 36px); letter-spacing: -1px; font-weight: 650
   --role-queue: #fae8bd; --role-external: #f4dbe3; --role-module: #e3e7ed;
   --role-function: #d6edf2; --role-class: #dedaf3; --role-interface: #dde3fa;
   --role-event: #f8ddc7; --role-configuration: #e6edce; --role-package: #eee0d1;
-  color-scheme: light; color: var(--ink); min-width: 0; display: flex; flex-direction: column;
+  color-scheme: light; color: var(--ink); min-width: 0; min-height: 0; display: flex; flex-direction: column;
   background-color: var(--canvas); background-image: radial-gradient(var(--diagram-grid) .65px, transparent .65px); background-size: 18px 18px;
 }
 .sidebar-theme[data-theme="ocean"],
@@ -163,33 +166,43 @@ h1 { font-size: clamp(27px, 2.3vw, 36px); letter-spacing: -1px; font-weight: 650
 .drawing [data-kind="package"], .sidebar-theme [data-kind="package"] { --node-fill: var(--role-package); }
 .drawing button:hover:not(:disabled) { background: var(--soft); border-color: var(--diagram-focus); }
 .drawing :is(button, input, select, summary):focus-visible { outline-color: var(--diagram-focus); }
-.drawing-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 17px 21px 0; gap: 15px; z-index: 1; }
-.drawing-heading { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
+.drawing-toolbar { display: flex; flex-wrap: wrap; align-items: center; padding: 6px 12px; gap: 6px 18px; background: var(--canvas); border-bottom: 1px solid var(--line); flex-shrink: 0; }
+.drawing-heading { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
 .drawing-heading h2 { font-size: 13px; font-weight: 600; }
 #revision { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
-.zoom-controls { display: flex; gap: 3px; align-items: center; background: var(--canvas); flex-shrink: 0; }
+.zoom-controls { display: flex; gap: 3px; align-items: center; background: var(--canvas); flex-shrink: 0; margin-left: auto; }
 .zoom-controls button { border: 0; background: transparent; min-width: 31px; min-height: 32px; padding: 2px 8px; font-size: 17px; }
 .zoom-controls #fit { border: 1px solid var(--line); font-size: 11px; margin-left: 5px; min-width: 39px; }
-.layout-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 21px 4px; font-size: 11px; }
-.project-details { margin: 0 0 18px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); font-size: 12px; }
-.project-details dl { display: flex; flex-wrap: wrap; gap: 12px 24px; margin: 0; }
-.project-details dl > div { min-width: 0; }
-.project-details dt { color: var(--muted); font-size: 10px; margin-bottom: 4px; }
+.layout-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 11px; }
+.project-details { min-width: 0; flex: 1; font-size: 11px; }
+.project-details dl { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 16px; margin: 0; }
+.project-details dl > div { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
+.project-details dt { color: var(--muted); font-size: 10px; }
 .project-details dd { margin: 0; overflow-wrap: anywhere; }
-.project-details .project-path { flex: 1 1 240px; }
-.project-details > p { margin: 10px 0 0; color: var(--muted); font-size: 11px; }
-.project-details details { margin-top: 10px; }
-.project-details summary { cursor: pointer; font-weight: 600; }
-.project-details pre { white-space: pre-wrap; overflow-wrap: anywhere; padding: 10px; background: var(--paper); }
-.project-details button { min-height: 36px; font-size: 11px; }
-.diagram-search-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 21px 4px; font-size: 11px; color: var(--muted); }
-.diagram-search-bar input { flex: 1 1 160px; min-width: 0; min-height: 40px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 5px; background: var(--white); color: var(--ink); }
+.project-details .project-path { flex: 1 1 160px; }
+#project-path { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+#project-branch { max-width: 22ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.project-details .project-label { font-size: 11px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.version-details { padding: 12px 17px; font-size: 11px; color: var(--muted); border-bottom: 1px solid var(--line); }
+.version-details details { margin-top: 8px; }
+.version-details summary { cursor: pointer; font-weight: 600; }
+.version-details pre { white-space: pre-wrap; overflow-wrap: anywhere; padding: 10px; background: var(--paper); }
+.version-details button { min-height: 32px; font-size: 11px; }
+.diagram-search-bar { display: flex; align-items: center; gap: 6px; flex: 0 1 360px; min-width: 200px; font-size: 11px; color: var(--muted); }
+.diagram-search-bar input { flex: 1 1 130px; width: 100%; min-width: 80px; min-height: 32px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 5px; background: var(--white); color: var(--ink); }
 .diagram-search-bar input::placeholder { color: var(--muted); opacity: 1; }
-.diagram-search-bar button { min-height: 40px; font-size: 11px; }
+.diagram-search-bar button { min-height: 32px; font-size: 11px; padding: 5px 7px; white-space: nowrap; }
+#diagram-search-status { font-size: 10px; min-width: 72px; max-width: 140px; line-height: 1.3; }
+.filter-toolbar { display: flex; align-items: center; gap: 12px; padding: 5px 12px; background: var(--canvas); border-bottom: 1px solid var(--line); flex-shrink: 0; }
+.node-type-toolbar { display: flex; align-items: center; gap: 5px; min-width: 0; flex: 1; }
+.node-type-toolbar button { font-size: 10px; min-height: 30px; padding: 4px 8px; white-space: nowrap; background: var(--white); flex-shrink: 0; }
+#node-type-filters { display: flex; align-items: center; gap: 5px; min-width: 0; overflow-x: auto; padding: 4px; scrollbar-width: thin; }
+#node-type-filters button[aria-pressed="true"] { background: var(--node-fill, var(--soft)); border-color: var(--blue); color: var(--ink); }
+#node-type-filters button[aria-pressed="false"] { border-style: dashed; color: var(--muted); }
 #diagram-search-status:empty { display: none; }
 .layout-toolbar label { display: flex; align-items: center; gap: 8px; color: var(--muted); }
-.layout-toolbar select, .shape-picker select { color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 5px; padding: 7px 25px 7px 9px; font: inherit; min-height: 34px; }
-.layout-toolbar button { font-size: 11px; min-height: 34px; padding: 5px 12px; }
+.layout-toolbar select, .shape-picker select { color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 5px; padding: 5px 23px 5px 8px; font: inherit; min-height: 32px; }
+.layout-toolbar button { font-size: 11px; min-height: 32px; padding: 5px 9px; }
 .layout-toolbar .auto-arrange { color: var(--ink); white-space: nowrap; }
 .theme-picker { display: flex; align-items: center; gap: 8px; }
 .theme-preview { display: inline-flex; align-items: center; padding: 2px; }
@@ -198,14 +211,14 @@ h1 { font-size: clamp(27px, 2.3vw, 36px); letter-spacing: -1px; font-weight: 650
 .theme-preview i:nth-child(3) { transform: rotate(-3deg); background: var(--role-queue); }
 .theme-preview i:nth-child(4) { transform: rotate(7deg); background: var(--role-datastore); }
 .auto-arrange input { width: 15px; height: 15px; margin: 0; accent-color: var(--blue); }
-#layout-note { flex-basis: 100%; color: var(--muted); font-size: 10px; }
+
 #zoom-level { font-size: 11px; color: var(--muted); min-width: 39px; text-align: center; font-variant-numeric: tabular-nums; }
-.diagram-stage { position: relative; min-height: 410px; height: clamp(420px, 49vh, 650px); flex: 0 0 auto; overflow: hidden; }
+.diagram-stage { position: relative; min-height: 180px; flex: 1 1 0; overflow: hidden; }
 #architecture { display: block; height: 100%; width: 100%; touch-action: pan-y; }
 #architecture:focus-visible { outline: 2px solid var(--diagram-focus); outline-offset: -5px; }
 #architecture.is-pannable { cursor: grab; touch-action: none; }
 #architecture.is-panning { cursor: grabbing; }
-.empty-canvas { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px; pointer-events: none; }
+.empty-canvas { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: safe center; text-align: center; padding: 24px; overflow: auto; pointer-events: none; }
 .empty-canvas h3 { font-size: 24px; letter-spacing: -.6px; font-weight: 600; margin: 20px 0 9px; }
 .empty-canvas p { color: var(--muted); max-width: 46ch; font-size: 13px; }
 .orientation { pointer-events: auto; max-width: 46ch; margin-top: 18px; }
@@ -225,14 +238,14 @@ h1 { font-size: clamp(27px, 2.3vw, 36px); letter-spacing: -1px; font-weight: 650
 .empty-map i { width: 41px; height: 30px; border: 1.5px dashed #7999c3; border-radius: 6px; background: var(--paper); }
 .empty-map i:last-child { height: 38px; width: 31px; border-radius: 50% / 14%; }
 .empty-map span { width: 40px; border-top: 1.5px dashed #7999c3; }
-.drawing-footer { display: flex; justify-content: space-between; gap: 16px; padding: 10px 21px 4px; font-size: 10px; color: var(--muted); flex-wrap: wrap; }
+.drawing-footer { display: flex; justify-content: space-between; gap: 5px 16px; padding: 6px 12px 2px; font-size: 10px; color: var(--muted); flex-wrap: wrap; flex-shrink: 0; background: var(--canvas); }
 .legend { display: flex; flex-wrap: wrap; gap: 17px; }
 .legend span { display: flex; align-items: center; gap: 6px; }
 .legend i { width: 15px; height: 10px; display: inline-block; border: 1.5px solid var(--blue); border-radius: 3px; background: var(--white); }
 .legend .proposed { border-color: var(--amber); border-style: dashed; background: var(--paper); }
 .legend .stale { border-color: var(--diagram-stale); border-style: dotted; background: var(--paper); }
-.diagram-note { color: var(--muted); font-size: 10px; padding: 3px 21px 14px; }
-.shape-key { color: var(--muted); font-size: 10px; padding: 6px 21px; }
+.diagram-note { color: var(--muted); font-size: 10px; padding: 0 12px 5px; background: var(--canvas); flex-shrink: 0; }
+.shape-key { color: var(--muted); font-size: 11px; padding: 10px 17px; border-bottom: 1px solid var(--line); }
 .shape-key summary { cursor: pointer; width: fit-content; padding: 3px 0; }
 #shape-key-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(115px, 1fr)); gap: 7px 12px; margin: 9px 0; }
 .shape-key-item { display: flex; align-items: center; gap: 7px; }
@@ -307,7 +320,10 @@ h1 { font-size: clamp(27px, 2.3vw, 36px); letter-spacing: -1px; font-weight: 650
 .arrow-observed { fill: var(--diagram-edge); }
 .arrow-proposed { fill: var(--amber); }
 .arrow-stale { fill: var(--diagram-stale); }
-.live-sidebar { min-width: 0; max-height: min(920px, 90vh); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; border-left: 1px solid var(--line); }
+.live-sidebar { min-width: 0; min-height: 0; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; border-left: 1px solid var(--line); background: var(--white); }
+.details-heading { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 17px; background: var(--white); border-bottom: 1px solid var(--line); }
+.details-heading h2 { font-size: 13px; }
+.details-heading button { font-size: 11px; min-height: 30px; padding: 4px 8px; }
 .sidebar-hooks { padding: 14px 17px 12px; border-bottom: 1px solid var(--line); }
 .sidebar-hooks > summary { display: flex; align-items: center; gap: 10px; min-height: 30px; cursor: pointer; list-style: none; }
 .sidebar-hooks > summary::-webkit-details-marker { display: none; }
@@ -393,7 +409,7 @@ h1 { font-size: clamp(27px, 2.3vw, 36px); letter-spacing: -1px; font-weight: 650
 .source-reference summary { color: var(--blue); cursor: pointer; font-size: 11px; margin-top: 8px; }
 .source-reference pre { font: 11px/1.6 ui-monospace, "SFMono-Regular", Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; margin: 9px 0 0; border-radius: 4px; padding: 9px; background: var(--paper); max-height: 220px; overflow: auto; tab-size: 2; }
 .related-event { width: 100%; padding: 6px 0; text-align: left; font-size: 11px; color: var(--blue); background: none; border: 0; font-weight: 500; }
-.playback { border-top: 1px solid var(--line); display: grid; grid-template-columns: auto minmax(100px, 1fr) minmax(190px, 290px); align-items: center; gap: 22px; padding: 14px 21px; }
+.playback { border-top: 1px solid var(--line); display: grid; grid-template-columns: auto minmax(100px, 1fr) minmax(190px, 290px); align-items: center; gap: 14px; padding: 8px 12px; flex-shrink: 0; max-height: 25dvh; overflow: auto; }
 .mode-buttons { display: flex; background: var(--paper); border: 1px solid var(--line); border-radius: 7px; padding: 2px; }
 .mode-buttons button { border: 0; background: transparent; color: var(--muted); min-height: 31px; font-size: 12px; border-radius: 4px; }
 .mode-buttons button[aria-pressed="true"] { color: var(--blue); background: var(--white); box-shadow: 0 1px 4px #16324e12; }
@@ -401,9 +417,10 @@ h1 { font-size: clamp(27px, 2.3vw, 36px); letter-spacing: -1px; font-weight: 650
 .scrubber input { accent-color: var(--blue); min-width: 20px; width: 100%; cursor: pointer; }
 .scrubber output { font-size: 11px; white-space: nowrap; min-width: 60px; color: var(--muted); font-variant-numeric: tabular-nums; }
 #replay-note { font-size: 10px; color: var(--muted); text-align: right; }
-.activity-section { padding-top: 24px; }
-.activity-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 13px; }
-.activity-heading h2 { font-size: 17px; letter-spacing: -.3px; font-weight: 600; }
+.activity-section { height: min(220px, 28dvh); min-height: 110px; flex-shrink: 0; display: flex; flex-direction: column; padding: 10px 16px 0; border-top: 1px solid var(--line); background: var(--white); }
+#activity-content { min-height: 0; overflow: auto; overscroll-behavior: contain; }
+.activity-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 7px; flex-shrink: 0; }
+.activity-heading h2 { font-size: 13px; font-weight: 600; }
 .activity-heading p { font-size: 11px; color: var(--muted); margin-top: 3px; }
 #activity-count { color: var(--muted); font-size: 11px; }
 .activity-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); max-height: 330px; overflow-y: auto; scrollbar-width: thin; }
@@ -419,7 +436,7 @@ h1 { font-size: clamp(27px, 2.3vw, 36px); letter-spacing: -1px; font-weight: 650
 .event-state { color: var(--muted); text-align: right; font-size: 11px; }
 .activity-empty { padding: 25px 22px; color: var(--muted); font-size: 12px; border: 1px dashed #bbcee6; border-radius: 8px; }
 .activity-item.is-focused { background: #eaf0fc; }
-footer { border-top: 1px solid var(--line); margin-top: 28px; padding: 18px 0 24px; display: flex; justify-content: space-between; gap: 18px; color: var(--muted); font-size: 10px; }
+footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 3px 12px; border-top: 1px solid var(--line); font-size: 9px; color: var(--muted); flex-shrink: 0; }
 footer span { margin: 0 8px; color: #91a7c3; }
 .toast { position: fixed; bottom: 25px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--white); padding: 12px 20px; border-radius: 8px; font-size: 12px; z-index: 10; max-width: calc(100vw - 32px); box-shadow: 0 6px 30px #16324e20; }
 .connection-dialog { width: min(760px, calc(100% - 32px)); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); margin: auto; padding: 25px 28px; border: 1px solid var(--line); border-radius: 13px; background: var(--white); color: var(--ink); box-shadow: 0 24px 100px #16324e30; overflow-y: auto; }
@@ -491,54 +508,41 @@ footer span { margin: 0 8px; color: #91a7c3; }
 .diagnostics-log-path { color: var(--muted); font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; margin: 8px 0 0; }
 .screen-reader { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
 
-@media (min-width: 1450px) {
-  .workspace-body { grid-template-columns: minmax(0, 1fr) 345px; }
-  .inspector { padding: 19px 25px; }
-}
 @media (max-width: 1100px) {
-  .page { padding: 0 24px; }
-  .workspace-body { grid-template-columns: minmax(0, 1fr) 280px; }
-  .status-strip { align-items: start; }
-  .classification-status { max-width: 62%; }
-  .coverage-status { gap: 4px; flex-direction: column; }
-  .inspector { padding: 17px; }
-  .playback { gap: 16px; grid-template-columns: auto 1fr; }
-  #replay-note { grid-column: 2; margin-top: -9px; text-align: left; }
-  .drawing-toolbar { padding: 15px 15px 0; }
-  .layout-toolbar { padding-right: 15px; padding-left: 15px; }
-  .diagram-search-bar { padding-right: 15px; padding-left: 15px; }
-  .drawing-heading { gap: 3px 10px; }
-  .drawing-footer { padding-right: 15px; padding-left: 15px; }
-  .diagram-note { padding-left: 15px; }
-}
-@media (max-width: 1000px) {
-  .workspace-body { grid-template-columns: 1fr; }
-  .live-sidebar { border-left: 0; border-top: 1px solid var(--line); max-height: 640px; }
-  .inspector { padding: 17px 21px; }
-  .change-tiles { grid-template-columns: repeat(8, minmax(0, 1fr)); }
-  .inspector-header { margin-bottom: 8px; }
-  .inspector-empty { padding-top: 5px; }
-  .inspector-glyph { display: none; }
-  .inspector-empty h3 { font-size: 18px; margin-bottom: 6px; }
-  .inspector-empty p { max-width: 65ch; margin-bottom: 7px; }
-  .inspector-empty .inspector-hint { margin-top: 5px; }
+  .drawing-heading { flex: 1; }
+  .layout-toolbar { order: 1; width: 100%; }
+  .theme-preview { display: none; }
+  .session-actions { gap: 4px; }
+  .workspace-body[data-details-open="true"] { grid-template-columns: minmax(0, 1fr) 310px; }
 }
 @media (max-width: 800px) {
-  .page { padding: 0 18px; }
-  .masthead { min-height: 74px; }
-  .intro { padding: 22px 0; align-items: start; }
-  .intro .project-label { max-width: 130px; padding-top: 4px; }
-  .diagram-stage { min-height: 360px; height: 46vh; }
-  .drawing-footer { padding-top: 7px; }
-  .status-strip { padding: 11px 16px; }
-  .workspace-toolbar { padding: 13px 16px; }
-  .session-picker select { max-width: 32vw; min-width: 130px; }
-  .session-actions button { padding: 8px 10px; }
-  .activity-row { grid-template-columns: 64px 6px minmax(100px, 1fr) 80px; gap: 10px; }
+  .page { height: auto; min-height: 100dvh; }
+  .masthead { flex-wrap: wrap; gap: 6px 16px; padding: 8px 12px; }
+  .project-details { flex-basis: 100%; order: 1; }
+  .project-details .project-label { display: inline; margin-right: 12px; }
+  .project-details dl { gap: 3px 12px; }
+  .connection { font-size: 10px; max-width: 60%; }
+  .session-picker { flex: 1; }
+  .session-picker select { max-width: 100%; width: 100%; min-width: 0; }
+  .session-actions { width: 100%; margin-left: 0; }
+  .workspace-body[data-details-open="true"] { grid-template-columns: minmax(0, 1fr); }
+  .live-sidebar { position: absolute; top: 0; bottom: 0; right: 0; width: min(360px, 100%); z-index: 4; box-shadow: -6px 0 24px #16324e18; }
+  .layout-toolbar { flex-wrap: nowrap; overflow-x: auto; padding: 4px; scrollbar-width: thin; }
+  .layout-toolbar > * { flex-shrink: 0; }
+  .filter-toolbar { flex-wrap: wrap; gap: 2px; }
+  .diagram-search-bar { flex: 1 1 100%; }
+  .node-type-toolbar { flex-basis: 100%; }
+  .diagram-stage { min-height: max(320px, calc(100dvh - 335px)); }
+  .empty-canvas { padding: 20px; }
+  .empty-canvas h3 { font-size: 21px; }
+  .empty-canvas p { font-size: 12px; }
+  .playback { gap: 5px 12px; grid-template-columns: auto minmax(0, 1fr); }
+  #replay-note { grid-column: 1 / -1; text-align: left; }
   .event-detail { display: none; }
+  .activity-row { grid-template-columns: 57px 5px minmax(60px, 1fr) 68px; gap: 7px; padding: 12px 3px; font-size: 11px; }
+  .legend { gap: 5px 12px; }
 }
 @media (max-width: 550px) {
-  .change-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
   .diagnostics-dialog { padding: 19px 15px; width: calc(100% - 20px); max-height: calc(100dvh - 24px); }
   .diagnostics-header h2 { font-size: 21px; }
   .diagnostics-filters { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
@@ -552,59 +556,16 @@ footer span { margin: 0 8px; color: #91a7c3; }
   .connection-steps { padding-left: 18px; }
   .connection-steps pre { padding: 10px; font-size: 11px; }
   .connection-step-heading button { min-height: 40px; }
-  .page { padding: 0 12px; }
-  .brand { font-size: 25px; gap: 10px; }
-  .brand-mark { height: 25px; width: 25px; }
-  .connection { font-size: 10px; gap: 5px; max-width: 54%; flex-wrap: wrap; justify-content: flex-end; }
-  #connection-label { max-width: 145px; text-align: right; }
-  .connection .text-button { min-height: 26px; padding: 0 2px; font-size: 10px; }
-  .intro { display: block; padding: 22px 2px 18px; }
-  h1 { font-size: 27px; letter-spacing: -.8px; }
-  .intro p { font-size: 12px; max-width: 38ch; }
-  .intro .project-label { max-width: none; text-align: left; font-size: 10px; padding-top: 3px; }
-  .demo-notice { flex-direction: column; gap: 3px; font-size: 11px; padding: 11px 13px; }
-  .workspace { border-radius: 9px; }
-  .workspace-toolbar { flex-wrap: wrap; gap: 10px; padding: 12px; }
-  .session-picker { width: 100%; }
-  .session-picker select { flex: 1; max-width: none; min-width: 0; min-height: 43px; }
-  .session-actions { width: 100%; }
-  .session-actions button { flex: 1; min-height: 43px; }
-  .status-strip { flex-direction: column; align-items: start; gap: 8px; padding: 11px 13px; }
-  .classification-status { max-width: none; font-size: 10px; gap: 6px; }
-  #capture-note { flex-basis: 100%; padding-left: 13px; }
-  .coverage-status { flex-direction: row; text-align: left; gap: 5px 14px; font-size: 10px; max-width: none; }
-  .drawing-toolbar { padding: 10px 10px 0; gap: 7px; align-items: start; }
-  .layout-toolbar { padding: 10px 12px 3px; gap: 9px; }
-  .diagram-search-bar { padding: 10px 12px 3px; gap: 8px; }
-  .layout-toolbar select, .layout-toolbar button { min-height: 40px; }
-  .auto-arrange { min-height: 30px; }
-  .shape-key { padding-right: 12px; padding-left: 12px; }
-  .drawing-heading { display: flex; flex-direction: column; padding-top: 8px; gap: 3px; }
-  .drawing-heading h2 { font-size: 11px; }
+  .brand { font-size: 22px; }
+  .drawing-toolbar { gap: 3px 7px; }
+  .drawing-heading { gap: 3px 8px; }
+  .drawing-heading h2 { font-size: 12px; }
   #revision { font-size: 10px; }
-  .zoom-controls { gap: 0; }
-  .zoom-controls button { min-width: 30px; min-height: 44px; }
-  .zoom-controls #fit { min-width: 36px; min-height: 36px; margin-left: 2px; }
-  #zoom-level { min-width: 31px; font-size: 9px; }
-  .diagram-stage { height: 350px; min-height: 350px; }
-  .empty-canvas { padding: 24px; }
-  .empty-canvas h3 { font-size: 21px; }
-  .empty-canvas p { font-size: 12px; }
-  .legend { gap: 7px 13px; }
-  .drawing-footer { padding: 9px 12px 5px; gap: 8px; font-size: 9px; }
-  .diagram-note { padding: 0 12px 12px; font-size: 9px; }
-  .inspector { padding: 13px 16px; }
-  .playback { padding: 12px; gap: 9px; grid-template-columns: 1fr; }
-  .mode-buttons { justify-self: start; }
-  .mode-buttons button { min-height: 40px; min-width: 63px; }
-  .scrubber input { min-height: 35px; }
-  #replay-note { grid-column: 1; margin-top: -3px; }
-  .activity-heading h2 { font-size: 16px; }
-  .activity-heading p { font-size: 10px; max-width: 30ch; }
-  .activity-row { grid-template-columns: 57px 5px minmax(60px, 1fr) 68px; gap: 7px; padding: 12px 3px; font-size: 11px; }
+  .layout-toolbar label { gap: 5px; }
+  .drawing-footer { font-size: 9px; }
+  .diagram-note { font-size: 9px; }
+  .activity-heading p { font-size: 10px; }
   .activity-row time, .event-state { font-size: 9px; }
-  .activity-empty { padding: 18px; font-size: 11px; }
-  footer { flex-direction: column; gap: 5px; margin-top: 22px; }
 }
 @media (prefers-reduced-motion: reduce) {
   *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }

package/scripts/control.mjs

@@ -39,7 +39,7 @@ async function handle(line) {
     const supported = ['2024-11-05', '2025-03-26', '2025-06-18'];
     return result({ protocolVersion: supported.includes(message.params?.protocolVersion) ? message.params.protocolVersion : '2025-06-18',
       capabilities: { tools: { listChanged: false } },
-      serverInfo: { name: 'graphlin', version: '0.1.2' },
+      serverInfo: { name: 'graphlin', version: '0.1.3' },
       instructions: 'Controls only. Passive host hooks provide observations when separately activated. No drawing calls after each action.' });
   }
   if (message.method === 'ping') return result({});