From 2d74fed039358b2cd6100298b10964c24a327904 Mon Sep 17 00:00:00 2001
From: zenchantlive <jordanlive121@gmail.com>
Date: Thu, 12 Feb 2026 23:46:39 -0800
Subject: [PATCH] test(graph): add directional hint contract in graph legend

---
 src/components/graph/graph-section.tsx          | 4 ++++
 tests/guards/graph-responsive-contract.test.mjs | 3 +++
 2 files changed, 7 insertions(+)

diff --git a/src/components/graph/graph-section.tsx b/src/components/graph/graph-section.tsx
index cfca05c..68559c0 100644
--- a/src/components/graph/graph-section.tsx
+++ b/src/components/graph/graph-section.tsx
@@ -78,6 +78,10 @@ export function GraphSection({
                         In progress blockers: {blockerAnalysis.inProgressBlockerCount}
                     </p>
                 ) : null}
+                <p className="w-full text-[10px] text-text-muted/55 md:w-auto md:max-w-[26rem]">
+                    <span className="font-semibold text-text-muted/75">Read left to right:</span>{' '}
+                    Left = blockers, middle = selected task, Right = work this task unblocks.
+                </p>
             </div>
 
             {/* ReactFlow graph viewport */}
diff --git a/tests/guards/graph-responsive-contract.test.mjs b/tests/guards/graph-responsive-contract.test.mjs
index de571b9..8698535 100644
--- a/tests/guards/graph-responsive-contract.test.mjs
+++ b/tests/guards/graph-responsive-contract.test.mjs
@@ -58,6 +58,9 @@ test('extracted graph section has viewport and legend', async () => {
   assert.match(graphSection, /blockerAnalysis/, 'should show blocker stats');
   assert.match(graphSection, /hideClosed/, 'should support hideClosed state in legend');
   assert.match(graphSection, /!hideClosed/, 'done legend should be hidden when closed items are hidden');
+  assert.match(graphSection, /Read left to right/, 'legend should include plain directional hint');
+  assert.match(graphSection, /Left = blockers/, 'legend should include left/right dependency meaning');
+  assert.match(graphSection, /Right = work this task unblocks/, 'legend should include downstream meaning');
 });
 
 test('graph node card supports tooltips and actionable glow', async () => {