<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Selfware Evolve Workspace</title>
<link rel="icon" href="data:,">
<link rel="stylesheet" href="/style.css">
<script src="/vendor/d3/d3.min.js" defer></script>
<script src="/vendor/lucide/lucide.min.js" defer></script>
<script src="/vendor/monaco/vs/loader.js" defer></script>
<script src="/app.js" defer></script>
</head>
<body>
<div id="app" class="app-shell">
<header class="app-header">
<div class="product-mark" aria-label="Selfware Evolve">
<span class="product-name">Selfware</span>
<span class="product-area">Evolve</span>
</div>
<div class="workspace-identity" aria-live="polite">
<strong id="workspace-name">Workspace</strong>
<span id="workspace-root">Loading...</span>
</div>
<div class="context-control" aria-label="Context mode">
<span class="context-picker-label"><i data-lucide="brain" aria-hidden="true"></i> AI Context:</span>
<div id="context-segments" class="segmented context-picker" role="radiogroup" aria-label="Context mode">
<button type="button" data-context-mode="auto" role="radio" aria-checked="false" title="Auto — pick the richest tier that fits the model window (recommended)">Auto</button>
<button type="button" data-context-mode="map" role="radio" aria-checked="false" title="Component index — doc line + public symbol names, full detail on demand (smallest; ideal for 8k-32k models)">Map</button>
<button type="button" data-context-mode="lite" role="radio" aria-checked="false" title="Interface signatures only (ideal for 32k-64k models)">Lite</button>
<button type="button" data-context-mode="compact" role="radio" aria-checked="false" title="Full code with comments stripped">Compact</button>
<button type="button" data-context-mode="full" role="radio" aria-checked="false" title="Full workspace code (excludes tests)">Full</button>
<button type="button" data-context-mode="full_extended" role="radio" aria-checked="false" title="Full workspace including tests">Extended</button>
</div>
<div id="context-budget" class="context-budget" aria-hidden="true"><div class="context-budget-fill"></div><span class="context-budget-label"></span></div>
<span id="context-metrics" class="context-metrics">Context unavailable</span>
</div>
</header>
<nav class="action-toolbar" aria-label="Workspace actions">
<div class="toolbar-group">
<span class="toolbar-group-label">File</span>
<div class="toolbar-group-buttons">
<button id="save-action" class="tool-button primary" type="button" disabled title="Save current file">
<i data-lucide="save" aria-hidden="true"></i><span>Save</span>
</button>
</div>
</div>
<div class="toolbar-group">
<span class="toolbar-group-label">Checks</span>
<div class="toolbar-group-buttons">
<button class="tool-button" type="button" data-analysis-kind="cargo_check" title="Run cargo check">
<i data-lucide="circle-check-big" aria-hidden="true"></i><span>Cargo Check</span>
</button>
<button class="tool-button" type="button" data-analysis-kind="clippy" title="Run Clippy">
<i data-lucide="scan-search" aria-hidden="true"></i><span>Clippy</span>
</button>
<button class="tool-button" type="button" data-analysis-kind="evolve_tests" title="Run evolve tests">
<i data-lucide="flask-conical" aria-hidden="true"></i><span>Tests</span>
</button>
<button id="readiness-action" class="tool-button" type="button" title="Run readiness checks">
<i data-lucide="shield-check" aria-hidden="true"></i><span>Readiness</span>
</button>
</div>
</div>
<div class="toolbar-group">
<span class="toolbar-group-label">Evolve</span>
<div class="toolbar-group-buttons">
<button id="review-action" class="tool-button" type="button" disabled title="Request grounded GLM review">
<i data-lucide="sparkles" aria-hidden="true"></i><span>Review</span>
</button>
<button id="branch-action" class="tool-button" type="button" title="Preview or create a Git branch">
<i data-lucide="git-branch" aria-hidden="true"></i><span>Branch</span>
</button>
</div>
</div>
<div class="toolbar-spacer"></div>
<span id="branch-summary" class="branch-summary" title="Git status">
<i data-lucide="git-branch" aria-hidden="true"></i>
<span>Git unavailable</span>
</span>
</nav>
<main class="workbench">
<aside class="explorer-pane" aria-label="Source explorer">
<div class="pane-heading">
<span>Explorer</span>
<button id="refresh-files" class="icon-button" type="button" title="Refresh files" aria-label="Refresh files">
<i data-lucide="refresh-cw" aria-hidden="true"></i>
</button>
</div>
<div id="explorer-status" class="pane-state" aria-live="polite">
<span class="small-spinner" aria-hidden="true"></span>Loading files
</div>
<div id="file-tree" class="file-tree" role="tree" aria-label="Workspace files"></div>
</aside>
<section class="workspace-pane" aria-label="Editor and graph">
<div class="view-tabs" role="tablist" aria-label="Workspace views">
<button id="editor-tab" class="view-tab active" type="button" role="tab" aria-selected="true" aria-controls="editor-view" data-view="editor">
<i data-lucide="file-code-2" aria-hidden="true"></i><span>Editor</span>
</button>
<button id="graph-tab" class="view-tab" type="button" role="tab" aria-selected="false" aria-controls="graph-view" data-view="graph">
<i data-lucide="waypoints" aria-hidden="true"></i><span>Graph</span>
</button>
<button id="classes-tab" class="view-tab" type="button" role="tab" aria-selected="false" aria-controls="classes-view" data-view="classes">
<i data-lucide="list-tree" aria-hidden="true"></i><span>Classes</span>
</button>
</div>
<section id="editor-view" class="work-view active" role="tabpanel" aria-labelledby="editor-tab">
<div id="document-tabs" class="document-tabs" role="tablist" aria-label="Open files"></div>
<div class="editor-stage">
<div id="editor-empty" class="center-state">
<i data-lucide="file-code-2" aria-hidden="true"></i>
<strong>No file open</strong>
</div>
<div id="editor-loading" class="center-state hidden" aria-live="polite">
<span class="spinner" aria-hidden="true"></span>
<strong>Loading document</strong>
</div>
<div id="editor" class="code-editor" aria-label="Source editor"></div>
<textarea id="editor-fallback" class="editor-fallback hidden" spellcheck="false" aria-label="Source editor fallback"></textarea>
</div>
</section>
<section id="graph-view" class="work-view hidden" role="tabpanel" aria-labelledby="graph-tab">
<div id="graph-canvas" class="graph-canvas">
<div id="graph-loading" class="center-state">
<span class="spinner" aria-hidden="true"></span>
<strong>Loading graph</strong>
</div>
<div id="graph-error" class="center-state error-state hidden"></div>
<div id="graph-empty" class="center-state hidden">
<i data-lucide="circle-dashed" aria-hidden="true"></i>
<strong>No graph nodes</strong>
</div>
<div id="graph-legend" class="graph-legend hidden" aria-label="Graph legend"></div>
<div id="graph-controls" class="graph-controls hidden">
<button id="graph-cluster-toggle" class="tool-button active" type="button" title="Cycle comprehension ladder: Logical (9 capabilities) → Clusters (10) → Modules (lib.rs) → Components (files)">
<i data-lucide="boxes" aria-hidden="true"></i><span>Logical</span>
</button>
<button id="graph-tests-toggle" class="tool-button" type="button" title="Show/hide test & example nodes (hidden by default)">
<i data-lucide="flask-conical" aria-hidden="true"></i><span>Tests</span>
</button>
<label class="graph-lens-label" title="Perspective: recolor the graph by a chosen dimension">
<i data-lucide="palette" aria-hidden="true"></i>
<select id="graph-lens" aria-label="Graph perspective">
<option value="layer">Layer</option>
<option value="classification">Classification</option>
<option value="cluster">Cluster</option>
<option value="category">Category</option>
<option value="visibility">Visibility</option>
<option value="size">Size</option>
</select>
</label>
<button id="graph-selection-toggle" class="tool-button" type="button" title="Show only your context selection as a sub-graph">
<i data-lucide="layers" aria-hidden="true"></i><span id="graph-selection-label">Selection (0)</span>
</button>
<input id="graph-search" type="search" autocomplete="off" placeholder="Find node" aria-label="Find graph node">
<button id="graph-zoom-in" class="icon-button" type="button" title="Zoom in" aria-label="Zoom in"><i data-lucide="zoom-in" aria-hidden="true"></i></button>
<button id="graph-zoom-out" class="icon-button" type="button" title="Zoom out" aria-label="Zoom out"><i data-lucide="zoom-out" aria-hidden="true"></i></button>
<button id="graph-reset" class="icon-button" type="button" title="Reset graph view" aria-label="Reset graph view"><i data-lucide="focus" aria-hidden="true"></i></button>
<button id="graph-refresh" class="icon-button" type="button" title="Refresh graph" aria-label="Refresh graph"><i data-lucide="refresh-cw" aria-hidden="true"></i></button>
</div>
<div id="graph-tooltip" class="graph-tooltip hidden" role="tooltip"></div>
</div>
</section>
<section id="classes-view" class="work-view hidden" role="tabpanel" aria-labelledby="classes-tab">
<div class="classes-toolbar">
<input id="classes-search" type="search" autocomplete="off" placeholder="Filter classes / methods…" aria-label="Filter classes and methods" />
<span id="classes-summary" class="classes-summary"></span>
</div>
<div id="classes-tree" class="classes-tree" role="tree" aria-label="Class and method outline">
<div class="center-state"><span class="spinner" aria-hidden="true"></span><strong>Loading structure…</strong></div>
</div>
</section>
</section>
<aside class="inspector-pane" aria-label="Inspector">
<div class="selection-heading">
<span>Inspector</span>
<strong id="selection-name">No selection</strong>
<span id="selection-path"></span>
</div>
<div class="inspector-tabs" role="tablist" aria-label="Inspector views">
<span class="inspector-group-label">Inspect</span>
<button class="inspector-tab" type="button" role="tab" aria-selected="false" data-inspector="node">Node</button>
<button class="inspector-tab active" type="button" role="tab" aria-selected="true" data-inspector="ast">AST</button>
<button class="inspector-tab" type="button" role="tab" aria-selected="false" data-inspector="summary">Summary</button>
<span class="inspector-group-label">Review</span>
<button class="inspector-tab" type="button" role="tab" aria-selected="false" data-inspector="grounding">Grounding</button>
<button class="inspector-tab" type="button" role="tab" aria-selected="false" data-inspector="recommendations">Advice</button>
<button class="inspector-tab" type="button" role="tab" aria-selected="false" data-inspector="orientation">Orientation</button>
<button class="inspector-tab" type="button" role="tab" aria-selected="false" data-inspector="pairs">Pairs</button>
<span class="inspector-group-label">Status</span>
<button class="inspector-tab" type="button" role="tab" aria-selected="false" data-inspector="readiness">Readiness</button>
<button class="inspector-tab" type="button" role="tab" aria-selected="false" data-inspector="context">Context</button>
</div>
<section id="inspector-summary" class="inspector-view hidden" role="tabpanel">
<div id="summary-state" class="pane-state">Select a source file to view its structural summary.</div>
<div id="summary-content" class="summary-content inspector-result hidden">
<div id="summary-grounding" class="summary-grounding"></div>
<pre id="summary-code" class="summary-code"></pre>
<div id="summary-evidence" class="summary-evidence" aria-label="Structural summary source evidence"></div>
</div>
</section>
<section id="inspector-context" class="inspector-view hidden" role="tabpanel">
<div id="component-selection" class="component-selection">
<div class="component-head">
<strong>Components</strong>
<span id="component-custom-badge" class="component-badge hidden">custom active</span>
<input id="component-filter" class="component-filter" type="text" placeholder="Filter components..." aria-label="Filter components by name or path">
</div>
<div id="component-totals" class="component-totals">0 components · 0 lite · 0 full</div>
<div id="component-list" class="component-list" role="group" aria-label="Context components"></div>
<div class="component-actions">
<button id="component-apply" class="command-button compact primary" type="button" disabled title="Use the checked components as the active context">Apply as context</button>
<button id="component-clear" class="command-button compact secondary hidden" type="button" title="Clear the custom selection and return to auto context">Clear</button>
</div>
</div>
<div id="context-selection-panel" class="context-selection-panel hidden">
<div class="context-selection-head">
<strong id="context-selection-total">0 components · 0 tokens</strong>
<div class="context-selection-actions">
<button id="context-selection-isolate" class="command-button compact" type="button" title="Show only the selection as a sub-graph">
<i data-lucide="layers" aria-hidden="true"></i><span>Graph</span>
</button>
<button id="context-selection-clear" class="command-button compact secondary" type="button" title="Clear the selection">
<i data-lucide="x" aria-hidden="true"></i><span>Clear</span>
</button>
</div>
</div>
<div id="context-selection-bar" class="context-selection-bar"><span></span></div>
<div id="context-selection-chips" class="context-selection-chips"></div>
</div>
<div id="context-state" class="pane-state">Context is loading...</div>
<div id="context-list-result" class="inspector-result pane-state hidden" style="padding: 0; display: block; overflow-y: auto;">
<ul id="context-files-list" class="context-files-list" style="list-style: none; margin: 0; padding: 0;"></ul>
</div>
</section>
<section id="inspector-node" class="inspector-view hidden" role="tabpanel">
<div id="node-state" class="pane-state">Select a graph node</div>
<div id="node-actions" class="node-actions hidden">
<button id="node-open-action" class="command-button" type="button" title="Open exact source file">
<i data-lucide="file-code-2" aria-hidden="true"></i><span>Open Source</span>
</button>
<button id="node-review-action" class="command-button" type="button" title="Review this node with cited source evidence">
<i data-lucide="sparkles" aria-hidden="true"></i><span>Grounded Review</span>
</button>
<button id="node-branch-action" class="command-button" type="button" title="Preview a branch for this node">
<i data-lucide="git-branch" aria-hidden="true"></i><span>Branch</span>
</button>
<button id="node-delete-preview-action" class="command-button danger" type="button" title="Preview deletion impact without changing source">
<i data-lucide="trash-2" aria-hidden="true"></i><span>Deletion Preview</span>
</button>
<button id="node-context-action" class="command-button" type="button" title="Add or remove this node from your context selection">
<i data-lucide="plus-circle" aria-hidden="true"></i><span>Add to Context</span>
</button>
</div>
<form id="node-task" class="node-task">
<div class="node-task-row">
<select id="node-task-kind" title="Selects the context this task needs">
<option value="understand">Understand</option>
<option value="refactor">Refactor</option>
<option value="extend">Extend</option>
<option value="consolidate">Consolidate (dupes)</option>
<option value="cleanup">Cleanup (dead code)</option>
</select>
<button id="node-task-action" class="command-button" type="submit" title="Auto-select the task's context and run a grounded review">
<i data-lucide="wand-2" aria-hidden="true"></i><span>Task Review</span>
</button>
</div>
<input id="node-task-question" type="text" placeholder="Ask about this node / task…" autocomplete="off" />
</form>
<div id="node-result" class="inspector-result pane-state">No node evidence loaded</div>
</section>
<section id="inspector-ast" class="inspector-view active" role="tabpanel">
<div id="ast-state" class="pane-state">Select a source file</div>
<div id="ast-tree" class="ast-tree"></div>
</section>
<section id="inspector-grounding" class="inspector-view hidden" role="tabpanel">
<label class="field-label" for="review-scope">Evidence scope</label>
<select id="review-scope">
<option value="selected_document">Selected file</option>
<option value="active_context">Active context</option>
</select>
<button id="review-evidence-preview" class="command-button secondary" type="button" disabled>
<i data-lucide="scan-search" aria-hidden="true"></i><span>Preview Evidence</span>
</button>
<label class="field-label" for="review-question">Question</label>
<textarea id="review-question" rows="4">Review this file for correctness, grounding, and readiness to evolve.</textarea>
<button id="review-submit" class="command-button" type="button" disabled>
<i data-lucide="sparkles" aria-hidden="true"></i><span>Run Grounded Review</span>
</button>
<div id="review-result" class="inspector-result pane-state">Select a source file</div>
</section>
<section id="inspector-readiness" class="inspector-view hidden" role="tabpanel">
<button id="readiness-submit" class="command-button" type="button">
<i data-lucide="shield-check" aria-hidden="true"></i><span>Refresh Readiness</span>
</button>
<div id="readiness-result" class="inspector-result pane-state">Not checked</div>
</section>
<section id="inspector-recommendations" class="inspector-view hidden" role="tabpanel">
<button id="recommendations-submit" class="command-button" type="button">
<i data-lucide="list-checks" aria-hidden="true"></i><span>Load Recommendations</span>
</button>
<div id="recommendations-result" class="inspector-result pane-state">Not loaded</div>
<ul id="recommendations-list" class="recommendations-list"></ul>
</section>
<section id="inspector-orientation" class="inspector-view hidden" role="tabpanel">
<p class="inspector-hint">The non-citeable background the assistant task flow injects so the model can place cited evidence in the whole tree: the architectural taxonomy, plus the component map on demand.</p>
<div class="orientation-controls">
<label class="orientation-toggle" title="Add the ~28K component map beneath the always-present taxonomy. Turn off for the smallest model windows.">
<input id="orientation-include-map" type="checkbox" checked />
<span>Include component map</span>
</label>
<button id="orientation-load" class="command-button" type="button" title="Preview the exact orientation block — a local render, no model call">
<i data-lucide="compass" aria-hidden="true"></i><span>Load Orientation</span>
</button>
</div>
<div id="orientation-result" class="inspector-result pane-state">Load to preview the taxonomy + map. This is exactly what a Task Review sends the model as background.</div>
</section>
<section id="inspector-pairs" class="inspector-view hidden" role="tabpanel">
<p class="inspector-hint">Level-1 connected component pairs. Ask the model how a connected pair should evolve together — merge, extract shared code, fix the boundary, dedup, or decouple.</p>
<div class="pairs-controls">
<label class="orientation-toggle" title="Only pairs that include the selected graph node's component">
<input id="pairs-node-only" type="checkbox" /><span>Selected node</span>
</label>
<label class="orientation-toggle" title="Only pairs that cross architectural clusters">
<input id="pairs-cross-only" type="checkbox" checked /><span>Cross-cluster</span>
</label>
<button id="pairs-load" class="command-button" type="button" title="List level-1 connected pairs (local, no model call)">
<i data-lucide="git-compare-arrows" aria-hidden="true"></i><span>Load Pairs</span>
</button>
</div>
<div id="pairs-result" class="inspector-result pane-state">Load the connected pairs, then ask the model to suggest how a pair should evolve.</div>
<ul id="pairs-list" class="pairs-list"></ul>
</section>
</aside>
</main>
<section id="bottom-panel" class="bottom-panel" aria-label="Problems and output">
<div class="bottom-tabs" role="tablist" aria-label="Diagnostics">
<button class="bottom-tab active" type="button" role="tab" aria-selected="true" data-bottom-view="problems">
Problems <span id="problem-count" class="count-badge">0</span>
</button>
<button class="bottom-tab" type="button" role="tab" aria-selected="false" data-bottom-view="output">Output</button>
<div class="toolbar-spacer"></div>
<button id="clear-output" class="icon-button" type="button" title="Clear output" aria-label="Clear output"><i data-lucide="trash-2" aria-hidden="true"></i></button>
<button id="toggle-bottom" class="icon-button" type="button" title="Collapse panel" aria-label="Collapse panel"><i data-lucide="panel-bottom-close" aria-hidden="true"></i></button>
</div>
<div id="problems-view" class="bottom-content active" role="tabpanel">
<div id="problems-empty" class="empty-row">No diagnostics reported</div>
<div id="problems-list" class="problems-list"></div>
</div>
<div id="output-view" class="bottom-content hidden" role="tabpanel">
<pre id="output-log" class="output-log">Workspace output will appear here.</pre>
</div>
</section>
<footer class="statusbar" aria-live="polite">
<span id="global-status" class="status-item status-neutral"><span class="status-indicator"></span><span>Connecting</span></span>
<span id="document-status" class="status-item">No file open</span>
<span id="cursor-status" class="status-item status-end">Ln -, Col -</span>
</footer>
</div>
<dialog id="branch-dialog" class="branch-dialog" aria-labelledby="branch-title">
<form method="dialog" class="dialog-shell">
<div class="dialog-heading">
<div>
<h2 id="branch-title">Git Branch</h2>
<p id="branch-head">Loading Git status...</p>
</div>
<button class="icon-button" value="cancel" type="submit" title="Close" aria-label="Close"><i data-lucide="x" aria-hidden="true"></i></button>
</div>
<div id="git-status-detail" class="git-status-detail pane-state"></div>
<label class="field-label" for="branch-name">Branch name</label>
<input id="branch-name" name="branch-name" type="text" autocomplete="off" placeholder="evolve/description">
<div id="branch-preview" class="branch-preview pane-state">No preview</div>
<label class="confirm-row">
<input id="branch-confirm" type="checkbox" disabled>
<span>Confirm branch creation at the displayed HEAD</span>
</label>
<div class="dialog-actions">
<button class="command-button secondary" value="cancel" type="submit">Cancel</button>
<button id="branch-preview-action" class="command-button" value="preview" type="button">Preview</button>
<button id="branch-create-action" class="command-button primary" value="create" type="button" disabled>Create Branch</button>
</div>
</form>
</dialog>
<div id="toast-region" class="toast-region" aria-live="assertive" aria-atomic="true"></div>
</body>
</html>