diff --git a/src/components/graph/graph-section.tsx b/src/components/graph/graph-section.tsx
index cfca05c..6819501 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 unblocked by this task.
+                </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..9d05313 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 unblocked by this task/, 'legend should include downstream meaning');
 });
 
 test('graph node card supports tooltips and actionable glow', async () => {