<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Doctrine Map Explorer</title>
<link rel="stylesheet" href="/assets/style.css">
<link rel="stylesheet" href="/vendor/github-markdown.css">
<script type="module" src="/src/app.ts"></script>
</head>
<body>
<div class="layout">
<aside class="sidebar">
<input type="text" class="search-input" placeholder="Search entities...">
<button class="refresh-btn">Refresh</button>
<div class="filter-area">
<div class="filter-header">
<span class="filter-label">Filter by kind</span>
<label class="filter-toggle-all"><input type="checkbox" class="toggle-all-cb" checked> all</label>
</div>
<div class="filter-grid">
<label class="kind-checkbox"><input type="checkbox" checked data-kinds="PRD,SPEC"> <span class="kind-abbrev">PRD/SPEC</span> <span class="kind-desc">Products / Specs</span></label>
<label class="kind-checkbox"><input type="checkbox" checked data-kinds="ADR,POL"> <span class="kind-abbrev">ADR/POL</span> <span class="kind-desc">Decisions / Policies</span></label>
<label class="kind-checkbox"><input type="checkbox" checked data-kinds="STD"> <span class="kind-abbrev">STD</span> <span class="kind-desc">Standards</span></label>
<label class="kind-checkbox"><input type="checkbox" checked data-kinds="SL"> <span class="kind-abbrev">SL</span> <span class="kind-desc">Slices</span></label>
<label class="kind-checkbox"><input type="checkbox" checked data-kinds="ISS"> <span class="kind-abbrev">ISS</span> <span class="kind-desc">Issues</span></label>
<label class="kind-checkbox"><input type="checkbox" checked data-kinds="IMP"> <span class="kind-abbrev">IMP</span> <span class="kind-desc">Improvements</span></label>
<label class="kind-checkbox"><input type="checkbox" checked data-kinds="CHR"> <span class="kind-abbrev">CHR</span> <span class="kind-desc">Chores</span></label>
<label class="kind-checkbox"><input type="checkbox" checked data-kinds="RSK"> <span class="kind-abbrev">RSK</span> <span class="kind-desc">Risks</span></label>
<label class="kind-checkbox"><input type="checkbox" checked data-kinds="IDE"> <span class="kind-abbrev">IDE</span> <span class="kind-desc">Ideas</span></label>
<label class="kind-checkbox"><input type="checkbox" checked data-kinds="REV"> <span class="kind-abbrev">REV</span> <span class="kind-desc">Revisions</span></label>
<label class="kind-checkbox"><input type="checkbox" checked data-kinds="RV"> <span class="kind-abbrev">RV</span> <span class="kind-desc">Reviews</span></label>
<label class="kind-checkbox"><input type="checkbox" checked data-kinds="REQ"> <span class="kind-abbrev">REQ</span> <span class="kind-desc">Requirements</span></label>
<label class="kind-checkbox"><input type="checkbox" checked data-kinds="REC"> <span class="kind-abbrev">REC</span> <span class="kind-desc">Records</span></label>
<label class="kind-checkbox"><input type="checkbox" checked data-kinds="ASM,DEC"> <span class="kind-abbrev">ASM/DEC</span> <span class="kind-desc">Assumptions / Decisions</span></label>
<label class="kind-checkbox"><input type="checkbox" checked data-kinds="QUE,CON"> <span class="kind-abbrev">QUE/CON</span> <span class="kind-desc">Questions / Concerns</span></label>
<label class="kind-checkbox"><input type="checkbox" checked data-kinds="CM"> <span class="kind-abbrev">CM</span> <span class="kind-desc">Concept Maps</span></label>
<label class="kind-checkbox"><input type="checkbox" checked data-kinds="MEM"> <span class="kind-abbrev">MEM</span> <span class="kind-desc">Memory</span></label>
</div>
</div>
<ul class="entity-list">
<li class="entity-item">
<span class="entity-title">Example Slice</span>
<span class="kind-pill" style="background: var(--kind-SL)">SL</span>
</li>
<li class="entity-item">
<span class="entity-title">Example ADR</span>
<span class="kind-pill" style="background: var(--kind-ADR)">ADR</span>
</li>
<li class="entity-item">
<span class="entity-title">Example Requirement</span>
<span class="kind-pill" style="background: var(--kind-REQ)">REQ</span>
</li>
</ul>
<div class="edge-legend">
<span class="legend-label">Edge types</span>
<div class="legend-items">
<div class="legend-item" data-labels="specs,requirements,descends_from,parent,members"><span class="legend-swatch" style="background:#4A90D9"></span> spec graph</div>
<div class="legend-item" data-labels="supersedes,revises"><span class="legend-swatch" style="background:#E67E22"></span> supersedes / revises</div>
<div class="legend-item" data-labels="governed_by,related,decision_ref"><span class="legend-swatch" style="background:#7B4FBF"></span> governance</div>
<div class="legend-item" data-labels="consumes,interactions,contextualizes"><span class="legend-swatch" style="background:#27AE60"></span> flow / association</div>
<div class="legend-item" data-labels="slices,owning_slice"><span class="legend-swatch" style="background:#16A085"></span> work routing</div>
<div class="legend-item" data-labels="reviews"><span class="legend-swatch" style="background:#64748b"></span> reviews</div>
<div class="legend-item" data-labels="drift"><span class="legend-swatch" style="background:#C0392B"></span> drift</div>
</div>
<div class="legend-items priority-legend" style="display:none">
<div class="legend-item"><span class="legend-swatch" style="background:var(--priority-needs-edge,#C0392B)"></span> needs (hard prerequisite)</div>
<div class="legend-item"><span class="legend-swatch" style="background:var(--priority-after-edge,#E67E22)"></span> after (soft sequence)</div>
</div>
</div>
</aside>
<main class="main">
<div class="focus-header">
<span class="placeholder">Entity title — kind · status</span>
</div>
<div class="view-toggle">
<button class="view-btn active" data-view="semantic">Semantic</button>
<button class="view-btn" data-view="actionability">Actionability</button>
</div>
<div class="graph-area">
<span class="placeholder">[Graphviz SVG will render here]</span>
</div>
<div class="depth-selector">
<span class="depth-label">Depth</span>
<button class="depth-btn" data-depth="0">0</button>
<button class="depth-btn active" data-depth="1">1</button>
<button class="depth-btn" data-depth="2">2</button>
<button class="depth-btn" data-depth="3">3</button>
</div>
<div class="table-toggle">
<label><input type="checkbox" id="hide-relations"> Hide relations table</label>
</div>
<div class="hover-detail">
<span class="placeholder">Hover a node for details</span>
</div>
<table class="relationship-table">
<thead>
<tr>
<th>src_id</th>
<th>src_title</th>
<th>label</th>
<th>tgt_id</th>
<th>tgt_title</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="5"><span class="placeholder">[Relationship table]</span></td>
</tr>
</tbody>
</table>
<div class="markdown-pane">
<span class="placeholder">[Markdown content]</span>
</div>
<div class="cm-diagnostics-panel" style="display:none;"></div>
<div class="cm-edge-table" style="display:none;"></div>
<div class="cm-add-edge-form" style="display:none;"></div>
</main>
</div>
</body>
</html>