From f1d4523c84900af7a633b0475a4925d47b85446e Mon Sep 17 00:00:00 2001
From: benjsmith <benjamincharlessmith@gmail.com>
Date: Sat, 3 Oct 2026 10:18:12 +0200
Subject: [PATCH 1/2] Render procedure and execution colours in the Graph shell

Match the CE viewer palette: procedure indigo #5e4fa2, execution
pink #c51b8a, in CSS dots, replay colours, and atlas type keys.

Signed-off-by: benjsmith <benjamincharlessmith@gmail.com>
---
 frontend/src/widgets/graph/atlas.ts              | 3 ++-
 frontend/src/widgets/graph/ce-graph.css          | 8 ++++++++
 frontend/src/widgets/graph/curationReplayAnim.ts | 4 ++++
 3 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/frontend/src/widgets/graph/atlas.ts b/frontend/src/widgets/graph/atlas.ts
index c01836f..a268893 100644
--- a/frontend/src/widgets/graph/atlas.ts
+++ b/frontend/src/widgets/graph/atlas.ts
@@ -16,7 +16,8 @@ const LABEL_DEFAULTS = ["concept", "entity", "note", "todo"];
 const PHYSICS_DEFAULTS = { charge: -420, link: 110, collide: 10 };
 const TYPE_KEYS = [
   "project", "analysis", "concept", "entity", "evidence", "fact",
-  "figure", "table", "source", "note", "todo-list", "unclassified",
+  "figure", "table", "source", "note", "todo-list", "procedure",
+  "execution", "unclassified",
 ] as const;
 
 export type ViewerMode = "classic" | "atlas";
diff --git a/frontend/src/widgets/graph/ce-graph.css b/frontend/src/widgets/graph/ce-graph.css
index a464d40..6ac501e 100644
--- a/frontend/src/widgets/graph/ce-graph.css
+++ b/frontend/src/widgets/graph/ce-graph.css
@@ -60,6 +60,10 @@
   --type-notes:         #6f4070;
   --type-todo:          #9656a2;   /* lighter purple */
   --type-todo-list:     #9656a2;
+  --type-procedure:     #5e4fa2;   /* indigo — how-to hubs */
+  --type-procedures:    #5e4fa2;
+  --type-execution:     #c51b8a;   /* pink-magenta — dated instances */
+  --type-executions:    #c51b8a;
   /* Unclassified is a placeholder for "no type yet" — render with
    * a white fill + a thicker black ring so it visually reads as
    * "outline only", obviously different from the typed colour
@@ -426,6 +430,10 @@ body[data-sidebar="collapsed"] #sidebar > * { display: none; }
 .dot.dot-notes     { background: var(--type-notes); }
 .dot.dot-todo         { background: var(--type-todo); }
 .dot.dot-todo-list    { background: var(--type-todo-list); }
+.dot.dot-procedure    { background: var(--type-procedure); }
+.dot.dot-procedures   { background: var(--type-procedures); }
+.dot.dot-execution    { background: var(--type-execution); }
+.dot.dot-executions   { background: var(--type-executions); }
 .dot.dot-project      { background: var(--type-project); }
 .dot.dot-projects     { background: var(--type-projects); }
 /* Unclassified gets a white fill + thicker black ring (1.5px) so
diff --git a/frontend/src/widgets/graph/curationReplayAnim.ts b/frontend/src/widgets/graph/curationReplayAnim.ts
index b9ab996..5924a25 100644
--- a/frontend/src/widgets/graph/curationReplayAnim.ts
+++ b/frontend/src/widgets/graph/curationReplayAnim.ts
@@ -31,6 +31,10 @@ const TYPE_COLOR: Record<string, string> = {
   source: "#94346e",
   note: "#6f4070",
   "todo-list": "#9656a2",
+  procedure: "#5e4fa2",
+  procedures: "#5e4fa2",
+  execution: "#c51b8a",
+  executions: "#c51b8a",
   unclassified: "#ffffff",
 };
 function colorFor(t: string): string {

From 420e604612f8e052ae8dd6eebef172b97e41f77b Mon Sep 17 00:00:00 2001
From: benjsmith <benjamincharlessmith@gmail.com>
Date: Sat, 3 Oct 2026 08:43:42 +0000
Subject: [PATCH 2/2] fix(graph): include procedure/execution in sidebar and
 type labels

CSS vars and replay colours were already present; TYPE_CANONICAL,
TYPE_ORDER/LABEL, ALL_LABEL_TYPES, and the types panel still omitted
procedure and execution. Mirror CE wiki-view coverage and lock hexes
in a unit test.

Signed-off-by: benjsmith <benjamincharlessmith@gmail.com>
---
 frontend/src/widgets/graph/static/graph.js    |  6 +-
 frontend/src/widgets/graph/static/sidebar.js  | 11 +++-
 frontend/src/widgets/graph/template.ts        |  4 +-
 .../unit/test_procedure_execution_palette.py  | 60 +++++++++++++++++++
 4 files changed, 75 insertions(+), 6 deletions(-)
 create mode 100644 tests/unit/test_procedure_execution_palette.py

diff --git a/frontend/src/widgets/graph/static/graph.js b/frontend/src/widgets/graph/static/graph.js
index db3c6a2..d975321 100644
--- a/frontend/src/widgets/graph/static/graph.js
+++ b/frontend/src/widgets/graph/static/graph.js
@@ -87,6 +87,8 @@ window.Graph = (function () {
     source:       'source',       sources:  'source',
     note:         'note',         notes:    'note',
     todo:         'todo',         'todo-list': 'todo',
+    procedure:    'procedure',    procedures: 'procedure',
+    execution:    'execution',    executions: 'execution',
     unclassified: 'unclassified',
   };
   function canonicalType(t) { return TYPE_CANONICAL[t] || t || 'default'; }
@@ -101,8 +103,8 @@ window.Graph = (function () {
   // via the label-types popover.
   const LABEL_TYPE_DEFAULTS = ['concept', 'entity', 'note', 'todo'];
   const ALL_LABEL_TYPES = [
-    'concept', 'entity', 'evidence', 'fact', 'analysis',
-    'figure',  'table',  'source',   'note', 'todo',
+    'concept', 'entity', 'procedure', 'execution', 'evidence', 'fact',
+    'analysis', 'figure', 'table', 'source', 'note', 'todo',
     'unclassified',
   ];
   let _labelTypeFilter = (() => {
diff --git a/frontend/src/widgets/graph/static/sidebar.js b/frontend/src/widgets/graph/static/sidebar.js
index dff5e0c..0b7f491 100644
--- a/frontend/src/widgets/graph/static/sidebar.js
+++ b/frontend/src/widgets/graph/static/sidebar.js
@@ -22,6 +22,8 @@ window.Sidebar = (function () {
     analysis:     'analysis',     analyses: 'analysis',
     concept:      'concept',      concepts: 'concept',
     entity:       'entity',       entities: 'entity',
+    procedure:    'procedure',    procedures: 'procedure',
+    execution:    'execution',    executions: 'execution',
     evidence:     'evidence',
     fact:         'fact',         facts:    'fact',
     figure:       'figure',       figures:  'figure',
@@ -41,16 +43,19 @@ window.Sidebar = (function () {
   // → fact → figure → table → source → note → todo-list →
   // unclassified).
   const TYPE_ORDER = [
-    'project', 'analysis', 'concept', 'entity', 'evidence', 'fact',
-    'figure', 'table', 'source', 'note', 'todo-list', 'unclassified',
+    'project', 'analysis', 'concept', 'entity', 'procedure', 'execution',
+    'evidence', 'fact', 'figure', 'table', 'source', 'note', 'todo-list',
+    'unclassified',
   ];
   const TYPE_LABEL = {
     project:      'Projects',
+    analysis:     'Analyses',
     concept:      'Concepts',
     entity:       'Entities',
+    procedure:    'Procedures',
+    execution:    'Executions',
     evidence:     'Evidence',
     fact:         'Facts',
-    analysis:     'Analyses',
     figure:       'Figures',
     table:        'Tables',
     source:       'Sources',
diff --git a/frontend/src/widgets/graph/template.ts b/frontend/src/widgets/graph/template.ts
index 752e243..953f620 100644
--- a/frontend/src/widgets/graph/template.ts
+++ b/frontend/src/widgets/graph/template.ts
@@ -20,13 +20,15 @@ export const template = /* html */ `
       <span class="ctrl-label">edges:</span><span id="edge-mode-state">auto</span>
     </button>
     <button id="label-types" class="ctrl-btn" title="Which page types show labels" aria-label="Which page types show labels">
-      <span class="ctrl-label">types:</span><span id="label-types-state">4/11</span>
+      <span class="ctrl-label">types:</span><span id="label-types-state">4/13</span>
     </button>
     <div id="label-types-panel" class="label-types-panel hidden" role="dialog" aria-label="Label types">
       <div class="label-types-head">Show labels for</div>
       <label class="label-types-row" data-type="project"><input type="checkbox"><span class="dot dot-project"></span><span>Projects</span></label>
       <label class="label-types-row" data-type="concept"><input type="checkbox"><span class="dot dot-concept"></span><span>Concepts</span></label>
       <label class="label-types-row" data-type="entity"><input type="checkbox"><span class="dot dot-entity"></span><span>Entities</span></label>
+      <label class="label-types-row" data-type="procedure"><input type="checkbox"><span class="dot dot-procedure"></span><span>Procedures</span></label>
+      <label class="label-types-row" data-type="execution"><input type="checkbox"><span class="dot dot-execution"></span><span>Executions</span></label>
       <label class="label-types-row" data-type="evidence"><input type="checkbox"><span class="dot dot-evidence"></span><span>Evidence</span></label>
       <label class="label-types-row" data-type="fact"><input type="checkbox"><span class="dot dot-fact"></span><span>Facts</span></label>
       <label class="label-types-row" data-type="analysis"><input type="checkbox"><span class="dot dot-analysis"></span><span>Analyses</span></label>
diff --git a/tests/unit/test_procedure_execution_palette.py b/tests/unit/test_procedure_execution_palette.py
new file mode 100644
index 0000000..aefdb47
--- /dev/null
+++ b/tests/unit/test_procedure_execution_palette.py
@@ -0,0 +1,60 @@
+"""Lock procedure/execution Graph palette hexes + sidebar/template coverage."""
+
+from __future__ import annotations
+
+from pathlib import Path
+
+ROOT = Path(__file__).resolve().parents[2]
+GRAPH = ROOT / "frontend" / "src" / "widgets" / "graph"
+
+PROC = "#5e4fa2"
+EXEC = "#c51b8a"
+
+
+def test_css_vars_and_sidebar_dots():
+    css = (GRAPH / "ce-graph.css").read_text()
+    assert f"--type-procedure:     {PROC}" in css or f"--type-procedure: {PROC}" in css or f"--type-procedure:{PROC}" in css.replace(" ", "")
+    assert PROC in css
+    assert EXEC in css
+    assert "--type-procedure" in css
+    assert "--type-execution" in css
+    assert ".dot.dot-procedure" in css
+    assert ".dot.dot-execution" in css
+
+
+def test_replay_type_color_map():
+    src = (GRAPH / "curationReplayAnim.ts").read_text()
+    assert f'procedure: "{PROC}"' in src
+    assert f'execution: "{EXEC}"' in src
+
+
+def test_atlas_type_keys_include_procedure_execution():
+    src = (GRAPH / "atlas.ts").read_text()
+    assert '"procedure"' in src
+    assert '"execution"' in src
+
+
+def test_sidebar_canonical_order_and_labels():
+    src = (GRAPH / "static" / "sidebar.js").read_text()
+    assert "procedure:" in src and "procedures:" in src
+    assert "execution:" in src and "executions:" in src
+    assert "'procedure'" in src and "'execution'" in src
+    assert "Procedures" in src
+    assert "Executions" in src
+
+
+def test_graph_canonical_and_label_types():
+    src = (GRAPH / "static" / "graph.js").read_text()
+    assert "procedure:" in src and "procedures:" in src
+    assert "execution:" in src and "executions:" in src
+    assert "'procedure'" in src and "'execution'" in src
+
+
+def test_template_label_rows_include_procedure_execution():
+    src = (GRAPH / "template.ts").read_text()
+    assert 'data-type="procedure"' in src
+    assert 'data-type="execution"' in src
+    assert "Procedures" in src
+    assert "Executions" in src
+    assert "dot-procedure" in src
+    assert "dot-execution" in src