doctrine 0.5.1

Project tooling CLI
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136

<!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 u-hidden">
          <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 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 u-hidden"></div>
      <div class="cm-edge-table u-hidden"></div>
      <div class="cm-add-edge-form u-hidden"></div>
    </main>
  </div>

</body>
</html>