graphlin 0.1.2 → 0.2.0

package/runtime/web/style.css

@@ -15,6 +15,51 @@
 
 * { box-sizing: border-box; }
 [hidden] { display: none !important; }
+.view-context { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; padding: 5px 12px; border-bottom: 1px solid var(--line); font-size: 11px; }
+.view-context label { display: inline-flex; gap: 5px; align-items: center; }
+.view-context select, .view-context button { max-width: 210px; font-size: 11px; min-height: 28px; padding: 3px 7px; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 5px; }
+#scope-breadcrumbs { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; }
+.view-status, .view-coverage { padding: 4px 12px; font-size: 11px; color: var(--muted); }
+.extension-access { padding: 12px; border-bottom: 1px solid var(--line); background: var(--paper); font-size: 12px; }
+.extension-access p { max-width: 78ch; margin-bottom: 8px; }
+#extension-fields { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 8px; }
+#extension-profiles { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 8px 0; }
+#analysis-controls { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
+.diagram-group .group-frame { fill: var(--paper); fill-opacity: .7; stroke: var(--node-ink); stroke-width: 1.5; }
+.diagram-group[data-change="unknown"] .group-frame, .diagram-group[data-change="discovered"] .group-frame { stroke-dasharray: 5 4; }
+.diagram-group[data-change="modified"] .group-frame { stroke: var(--amber); }
+.diagram-group[data-change="added"] .group-frame { stroke: var(--teal); }
+.diagram-group:focus-visible { outline: none; }
+.diagram-group:focus-visible .group-frame, .diagram-group[aria-pressed="true"] .group-frame { stroke: var(--diagram-focus); stroke-width: 3; }
+.diagram-group[data-change="stale"] .group-frame { stroke-dasharray: 7 4; opacity: .65; }
+.group-heading { fill: var(--ink); font: 600 14px var(--body); }
+.group-summary { fill: var(--muted); font: 11px var(--body); }
+.group-toggle { cursor: pointer; }
+.group-toggle rect { fill: var(--white); stroke: var(--line); }
+.group-toggle text { fill: var(--ink); font: 16px var(--body); }
+.group-toggle:focus-visible { outline: none; }
+.group-toggle:focus-visible rect { stroke: var(--diagram-focus); stroke-width: 3; }
+.diagram-node[data-change="added"] .node-shape { stroke: var(--teal); stroke-width: 3; }
+.diagram-node[data-change="discovered"] .node-shape { stroke-dasharray: 3 3; }
+.diagram-node[data-change="modified"] .node-shape { stroke: var(--amber); stroke-width: 3; }
+.diagram-node[data-change="removed"] { opacity: .6; }
+.custom-view { position: absolute; inset: 0; overflow: auto; background: var(--canvas); }
+.custom-view iframe { width: 100%; height: 100%; border: 0; background: var(--canvas); }
+.timeline-note { padding: 14px 18px; font-size: 12px; color: var(--muted); }
+.timeline-events { padding: 0 18px 20px; margin: 0; list-style: none; }
+.timeline-event { display: grid; grid-template-columns: 85px minmax(95px, .7fr) minmax(180px, 2fr) 90px; gap: 6px 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); font-size: 12px; }
+.timeline-event button { text-align: left; padding: 4px 8px; min-height: 30px; }
+.timeline-lane { overflow-wrap: anywhere; }
+.timeline-attribution { grid-column: 3; color: var(--muted); font-size: 11px; }
+.timeline-outcome { color: var(--muted); }
+.timeline-event[data-outcome="failed"] .timeline-outcome { color: var(--red); }
+.timeline-event[data-outcome="succeeded"] .timeline-outcome { color: var(--teal); }
+@media (max-width: 650px) {
+  .timeline-event { grid-template-columns: 75px 1fr; }
+  .timeline-event button, .timeline-attribution { grid-column: 2; }
+  .view-context { gap: 6px; }
+  #scope-breadcrumbs { flex-basis: 100%; }
+}
 body { margin: 0; color: var(--ink); background: var(--paper); font: 14px/1.5 var(--body); }
 button, input, select { font: inherit; }
 button, a, input, select { -webkit-tap-highlight-color: transparent; }
@@ -24,39 +69,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 +115,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"],
@@ -161,35 +209,49 @@ h1 { font-size: clamp(27px, 2.3vw, 36px); letter-spacing: -1px; font-weight: 650
 .drawing [data-kind="event"], .sidebar-theme [data-kind="event"] { --node-fill: var(--role-event); }
 .drawing [data-kind="configuration"], .sidebar-theme [data-kind="configuration"] { --node-fill: var(--role-configuration); }
 .drawing [data-kind="package"], .sidebar-theme [data-kind="package"] { --node-fill: var(--role-package); }
+.drawing [data-kind="method"] { --node-fill: var(--role-function); }
+.drawing [data-kind="enum"] { --node-fill: var(--role-class); }
+.drawing [data-kind="type_alias"] { --node-fill: var(--role-interface); }
+.drawing [data-kind="namespace"], .drawing [data-kind="directory"], .drawing [data-kind="project"] { --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 +260,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 +287,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 +369,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 +458,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 +466,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 +485,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 +557,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 +605,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/schemas/graph.schema.json

@@ -134,7 +134,10 @@
           ]
         },
         "basis": {
-          "const": "jev_interpretation"
+          "enum": [
+            "jev_interpretation",
+            "decision_interpretation"
+          ]
         },
         "sourceRef": {
           "oneOf": [

package/scripts/arguments.mjs

@@ -21,8 +21,12 @@ export function parseArguments(args, { worker = false } = {}) {
       const value = args.shift();
       if (!/^\d{1,5}$/.test(value ?? '') || Number(value) > 65535) throw new Error('invalid_port');
       values.port = Number(value);
+    } else if (argument === '--local-source') {
+      if (seen.has('--allow-source') || seen.has('--no-source')) throw new Error('conflicting_arguments');
+      values.allowSource = false;
+      values.localSource = true;
     } else if (argument === '--allow-source' || argument === '--no-source' && !worker) {
-      if (seen.has(argument === '--allow-source' ? '--no-source' : '--allow-source')) throw new Error('conflicting_arguments');
+      if (seen.has('--local-source') || seen.has(argument === '--allow-source' ? '--no-source' : '--allow-source')) throw new Error('conflicting_arguments');
       values.allowSource = argument === '--allow-source';
     }
     else if (argument === '--persist-evidence') values.persistEvidence = true;

package/scripts/build-packages.mjs

@@ -7,6 +7,7 @@ import { publicPackageFiles, validatePackage } from './validate-packages.mjs';
 
 const SOURCE = fileURLToPath(new URL('../', import.meta.url));
 const SOURCE_DIRECTORIES = ['.claude-plugin', '.codex-plugin', 'skills', 'scripts', 'runtime', 'schemas', 'adapters'];
+const PROTECTED_DIRECTORIES = [...SOURCE_DIRECTORIES, 'docs', 'node_modules'];
 
 async function assertDestination(destination, { directory = false } = {}) {
   const absolute = path.resolve(destination), root = path.parse(absolute).root;
@@ -57,7 +58,7 @@ async function copy(source, destination) {
 export async function buildPackages({ outputDir = path.join(SOURCE, 'dist'), sourceDir = SOURCE } = {}) {
   const source = path.resolve(sourceDir), output = path.resolve(outputDir);
   if (output === source || source.startsWith(`${output}${path.sep}`)) throw new Error('unsafe_output_directory');
-  if (SOURCE_DIRECTORIES.some(file => output === path.join(source, file) || output.startsWith(`${path.join(source, file)}${path.sep}`))) {
+  if (PROTECTED_DIRECTORIES.some(file => output === path.join(source, file) || output.startsWith(`${path.join(source, file)}${path.sep}`))) {
     throw new Error('unsafe_output_directory');
   }
   // Preflight every output before replacing even the first generated profile.
@@ -92,6 +93,9 @@ export async function buildPackages({ outputDir = path.join(SOURCE, 'dist'), sou
     await mkdir(temporary);
     try {
       const profileFiles = files.filter(file => profile === 'claude' || file !== '.claude-plugin/plugin.json');
+      // publicPackageFiles includes every reviewed file of the full pinned
+      // parser under Graphlin's own node_modules. Never resolve a hoisted or
+      // inspected-project dependency, and never copy an arbitrary dependency tree.
       for (const file of profileFiles) await copy(path.join(source, file), path.join(temporary, file));
       const metadata = JSON.parse(await readFile(path.join(temporary, 'package.json'), 'utf8'));
       metadata.files = metadata.files.filter(file => profileFiles.includes(file.slice(2)));
@@ -114,7 +118,7 @@ export async function buildPackages({ outputDir = path.join(SOURCE, 'dist'), sou
         await chmod(path.join(temporary, 'scripts', file), 0o755);
       }
       await writeFile(path.join(temporary, 'PACKAGE-NOTES.md'),
-        `# Graphlin ${profile} package\n\nNode.js 22.14+; macOS/Linux. Self-contained source bundle; no dependency install.\n` +
+        `# Graphlin ${profile} package\n\nNode.js 22.14+; macOS/Linux. Self-contained runtime and parser bundle; no dependency install.\n` +
         'Run scripts/graphlin.mjs --help for local controls. This package does not install itself.\n' +
         'Hook activation/trust has not been certified. Kiro is inactive and experimental.\n' +
         'See adapters/README.md and skills/graphlin/SKILL.md for privacy and coverage.\n');

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.2.0' },
       instructions: 'Controls only. Passive host hooks provide observations when separately activated. No drawing calls after each action.' });
   }
   if (message.method === 'ping') return result({});

package/scripts/daemon.mjs

@@ -5,7 +5,8 @@ process.umask(0o077);
 let server;
 try {
   const options = parseArguments(process.argv.slice(2), { worker: true });
-  const policy = { transmitSource: options.allowSource, persistEvidence: options.persistEvidence,
+  const policy = { readSource: options.localSource || options.allowSource,
+    transmitSource: options.allowSource, persistEvidence: options.persistEvidence,
     displayEvidence: options.displayEvidence };
   let decisionService;
   if (options.mode === 'demo') {

package/scripts/extensions.mjs

@@ -0,0 +1,44 @@
+import path from 'node:path';
+import { projectPaths, defaultDataDir } from '../runtime/daemon/paths.mjs';
+import { createExtensionRegistry, extensionError } from '../runtime/extensions/index.mjs';
+
+/** Parent CLI dispatches its already-parsed extension arguments here. This
+ * module neither parses global CLI options nor starts/stops the daemon. */
+export async function runExtensions(args, {
+  projectRoot, dataDir = defaultDataDir(), signal, transport, output = process.stdout,
+  registry: suppliedRegistry,
+} = {}) {
+  if (!Array.isArray(args) || args.some(value => typeof value !== 'string')) throw extensionError('invalid_extension_arguments');
+  const [command = 'list', source, ...rest] = args;
+  if (!['list', 'add', 'update', 'remove', 'doctor', 'dev'].includes(command) || rest.length ||
+    (['add', 'update', 'remove', 'dev'].includes(command) ? !source : source !== undefined)) {
+    throw extensionError('usage_extensions_list_add_update_remove_doctor_dev');
+  }
+  let registry = suppliedRegistry;
+  if (!registry) {
+    const paths = await projectPaths(projectRoot ?? process.cwd(), dataDir);
+    registry = await createExtensionRegistry({ dataDir: paths.dataDir, projectId: paths.projectId, transport });
+  }
+  const resolveSource = value => value.startsWith('.') || path.isAbsolute(value)
+    ? path.resolve(projectRoot ?? process.cwd(), value) : value;
+  let result;
+  if (command === 'list') result = await registry.list();
+  if (command === 'doctor') result = await registry.doctor();
+  if (command === 'remove') result = await registry.remove(source);
+  if (command === 'add' || command === 'update') result = await registry.install(resolveSource(source), { signal });
+  if (command === 'dev') {
+    if (!(source.startsWith('.') || path.isAbsolute(source))) throw extensionError('development_directory_required');
+    result = await registry.dev(resolveSource(source), { signal });
+  }
+  if (output) {
+    if (Array.isArray(result)) output.write(result.length ? result.map(row =>
+      `${row.id} ${row.version} ${row.digest.slice(0, 12)}${row.development ? ' development' : ''} ${row.grant ? 'granted' : 'approval required'}`
+    ).join('\n') + '\n' : 'No visualizer extensions installed.\n');
+    else if (command === 'doctor') output.write(`${result.ok ? 'Extension checks passed.' : 'Extension checks failed.'}\n${
+      result.results.map(row => `${row.id ?? 'catalogue'}: ${row.code}`).join('\n')}${result.results.length ? '\n' : ''}`);
+    else output.write(command === 'remove' ? `Removed ${result.id} and its grants.\n` :
+      `Installed ${result.id} ${result.version}${result.development ? ' (development snapshot)' : ''}. ${
+        result.grant ? 'Existing digest approval retained.' : 'Project approval is required before data delivery.'}\n`);
+  }
+  return result;
+}