Add explanatory SVG diagram for Copilot agent session flow (#1401)

github-actions[bot] · web-flow · commit ba16b5fbcebf · 2026-07-17T08:09:27.000+02:00
diff --git a/workshop/07c-your-first-workflow-copilot.md b/workshop/07c-your-first-workflow-copilot.md
@@ -4,6 +4,8 @@
 
 You'll ask an agent in the [GitHub Copilot app](side-quest-01-02-environment-reference.md#github-copilot-app) or Agents tab to create and validate `daily-report-status.md`, then review and merge its pull request.
 
+![Copilot agent session flow: prompt to pull request merge](images/07c-copilot-agent-session-flow.svg)
+
 ## 📋 Before You Start
 
 - Your practice repository is connected to the GitHub Copilot app or available in the Agents tab
diff --git a/workshop/images/07c-copilot-agent-session-flow.svg b/workshop/images/07c-copilot-agent-session-flow.svg
@@ -0,0 +1,142 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="560" viewBox="0 0 1200 560"
+  role="img" aria-label="Copilot agent session flow: prompt to pull request merge">
+  <rect width="1200" height="560" fill="#f6f8fa"/>
+
+  <!-- Main card -->
+  <rect x="30" y="30" width="1140" height="480" rx="12" ry="12" fill="white" stroke="#d0d7de" stroke-width="1.5"/>
+
+  <!-- Title -->
+  <text x="600" y="72" font-family="system-ui, -apple-system, sans-serif" font-size="18" font-weight="700"
+    fill="#24292f" text-anchor="middle">Copilot Agent Session Flow</text>
+  <text x="600" y="94" font-family="system-ui, -apple-system, sans-serif" font-size="13"
+    fill="#57606a" text-anchor="middle">How the Copilot agent takes your prompt and produces a validated pull request</text>
+
+  <!-- Step boxes Y=140, height=80 -->
+
+  <!-- Step 1: Prompt -->
+  <rect x="60" y="140" width="160" height="80" rx="8" ry="8" fill="#ddf4ff" stroke="#54aeff" stroke-width="1.5"/>
+  <text x="140" y="175" font-family="system-ui, -apple-system, sans-serif" font-size="13" font-weight="600"
+    fill="#0969da" text-anchor="middle">You</text>
+  <text x="140" y="194" font-family="system-ui, -apple-system, sans-serif" font-size="12"
+    fill="#0969da" text-anchor="middle">Paste prompt in</text>
+  <text x="140" y="210" font-family="system-ui, -apple-system, sans-serif" font-size="12"
+    fill="#0969da" text-anchor="middle">Copilot chat</text>
+
+  <!-- Arrow 1→2 -->
+  <line x1="220" y1="180" x2="268" y2="180" stroke="#57606a" stroke-width="1.5" marker-end="url(#arrow)"/>
+
+  <!-- Step 2: gh aw init -->
+  <rect x="270" y="140" width="160" height="80" rx="8" ry="8" fill="#f6f8fa" stroke="#d0d7de" stroke-width="1.5"/>
+  <!-- badge 1 -->
+  <circle cx="282" cy="152" r="11" fill="#0969da"/>
+  <text x="282" y="156" font-family="system-ui, -apple-system, sans-serif" font-size="11" font-weight="700"
+    fill="white" text-anchor="middle">1</text>
+  <text x="350" y="175" font-family="system-ui, -apple-system, sans-serif" font-size="13" font-weight="600"
+    fill="#24292f" text-anchor="middle">gh aw init</text>
+  <text x="350" y="194" font-family="system-ui, -apple-system, sans-serif" font-size="12"
+    fill="#57606a" text-anchor="middle">Agent initialises</text>
+  <text x="350" y="210" font-family="system-ui, -apple-system, sans-serif" font-size="12"
+    fill="#57606a" text-anchor="middle">skill files</text>
+
+  <!-- Arrow 2→3 -->
+  <line x1="430" y1="180" x2="478" y2="180" stroke="#57606a" stroke-width="1.5" marker-end="url(#arrow)"/>
+
+  <!-- Step 3: Create workflow file -->
+  <rect x="480" y="140" width="160" height="80" rx="8" ry="8" fill="#f6f8fa" stroke="#d0d7de" stroke-width="1.5"/>
+  <circle cx="492" cy="152" r="11" fill="#0969da"/>
+  <text x="492" y="156" font-family="system-ui, -apple-system, sans-serif" font-size="11" font-weight="700"
+    fill="white" text-anchor="middle">2</text>
+  <text x="560" y="175" font-family="system-ui, -apple-system, sans-serif" font-size="13" font-weight="600"
+    fill="#24292f" text-anchor="middle">Author workflow</text>
+  <text x="560" y="194" font-family="system-ui, -apple-system, sans-serif" font-size="12"
+    fill="#57606a" text-anchor="middle">Creates .md &amp;</text>
+  <text x="560" y="210" font-family="system-ui, -apple-system, sans-serif" font-size="12"
+    fill="#57606a" text-anchor="middle">.lock.yml files</text>
+
+  <!-- Arrow 3→4 -->
+  <line x1="640" y1="180" x2="688" y2="180" stroke="#57606a" stroke-width="1.5" marker-end="url(#arrow)"/>
+
+  <!-- Step 4: Compile + Validate -->
+  <rect x="690" y="140" width="160" height="80" rx="8" ry="8" fill="#f6f8fa" stroke="#d0d7de" stroke-width="1.5"/>
+  <circle cx="702" cy="152" r="11" fill="#0969da"/>
+  <text x="702" y="156" font-family="system-ui, -apple-system, sans-serif" font-size="11" font-weight="700"
+    fill="white" text-anchor="middle">3</text>
+  <text x="770" y="168" font-family="system-ui, -apple-system, sans-serif" font-size="13" font-weight="600"
+    fill="#24292f" text-anchor="middle">gh aw compile</text>
+  <text x="770" y="187" font-family="system-ui, -apple-system, sans-serif" font-size="12"
+    fill="#57606a" text-anchor="middle">--validate</text>
+  <text x="770" y="206" font-family="system-ui, -apple-system, sans-serif" font-size="12"
+    fill="#57606a" text-anchor="middle">Fixes errors</text>
+
+  <!-- Arrow 4→5 -->
+  <line x1="850" y1="180" x2="898" y2="180" stroke="#57606a" stroke-width="1.5" marker-end="url(#arrow)"/>
+
+  <!-- Step 5: Open PR -->
+  <rect x="900" y="140" width="160" height="80" rx="8" ry="8" fill="#f6f8fa" stroke="#d0d7de" stroke-width="1.5"/>
+  <circle cx="912" cy="152" r="11" fill="#0969da"/>
+  <text x="912" y="156" font-family="system-ui, -apple-system, sans-serif" font-size="11" font-weight="700"
+    fill="white" text-anchor="middle">4</text>
+  <text x="980" y="175" font-family="system-ui, -apple-system, sans-serif" font-size="13" font-weight="600"
+    fill="#24292f" text-anchor="middle">Opens PR</text>
+  <text x="980" y="194" font-family="system-ui, -apple-system, sans-serif" font-size="12"
+    fill="#57606a" text-anchor="middle">Shows diff for</text>
+  <text x="980" y="210" font-family="system-ui, -apple-system, sans-serif" font-size="12"
+    fill="#57606a" text-anchor="middle">your review</text>
+
+  <!-- Arrow defs -->
+  <defs>
+    <marker id="arrow" markerWidth="8" markerHeight="8" refX="6" refY="3" orient="auto">
+      <path d="M0,0 L0,6 L8,3 z" fill="#57606a"/>
+    </marker>
+    <marker id="arrow-green" markerWidth="8" markerHeight="8" refX="6" refY="3" orient="auto">
+      <path d="M0,0 L0,6 L8,3 z" fill="#1a7f37"/>
+    </marker>
+    <marker id="arrow-red" markerWidth="8" markerHeight="8" refX="6" refY="3" orient="auto">
+      <path d="M0,0 L0,6 L8,3 z" fill="#cf222e"/>
+    </marker>
+  </defs>
+
+  <!-- Review decision diamond -->
+  <polygon points="770,300 840,340 770,380 700,340" fill="#fff8c5" stroke="#bf8700" stroke-width="1.5"/>
+  <text x="770" y="336" font-family="system-ui, -apple-system, sans-serif" font-size="12" font-weight="600"
+    fill="#bf8700" text-anchor="middle">Review</text>
+  <text x="770" y="352" font-family="system-ui, -apple-system, sans-serif" font-size="12" font-weight="600"
+    fill="#bf8700" text-anchor="middle">diff?</text>
+
+  <!-- Arrow from PR step down to diamond -->
+  <line x1="980" y1="220" x2="980" y2="310" stroke="#57606a" stroke-width="1.5" marker-end="url(#arrow)"/>
+  <line x1="980" y1="310" x2="840" y2="340" stroke="#57606a" stroke-width="1.5"/>
+
+  <!-- Approve → Merge -->
+  <rect x="900" y="415" width="160" height="60" rx="8" ry="8" fill="#dafbe1" stroke="#1a7f37" stroke-width="1.5"/>
+  <text x="980" y="440" font-family="system-ui, -apple-system, sans-serif" font-size="13" font-weight="600"
+    fill="#1a7f37" text-anchor="middle">Approve</text>
+  <text x="980" y="458" font-family="system-ui, -apple-system, sans-serif" font-size="12"
+    fill="#1a7f37" text-anchor="middle">&amp; Merge</text>
+
+  <!-- Arrow Approve -->
+  <line x1="840" y1="355" x2="898" y2="432" stroke="#1a7f37" stroke-width="1.5" marker-end="url(#arrow-green)"/>
+  <text x="878" y="400" font-family="system-ui, -apple-system, sans-serif" font-size="11"
+    fill="#1a7f37" text-anchor="middle">Looks good</text>
+
+  <!-- Request changes → back to agent -->
+  <rect x="460" y="415" width="160" height="60" rx="8" ry="8" fill="#ffebe9" stroke="#cf222e" stroke-width="1.5"/>
+  <text x="540" y="440" font-family="system-ui, -apple-system, sans-serif" font-size="13" font-weight="600"
+    fill="#cf222e" text-anchor="middle">Request</text>
+  <text x="540" y="458" font-family="system-ui, -apple-system, sans-serif" font-size="12"
+    fill="#cf222e" text-anchor="middle">corrections</text>
+
+  <!-- Arrow Request changes -->
+  <line x1="700" y1="345" x2="622" y2="435" stroke="#cf222e" stroke-width="1.5" marker-end="url(#arrow-red)"/>
+  <text x="653" y="400" font-family="system-ui, -apple-system, sans-serif" font-size="11"
+    fill="#cf222e" text-anchor="middle">Needs fix</text>
+
+  <!-- Loop arrow: corrections back to compile step -->
+  <path d="M540,415 Q540,280 688,260" stroke="#cf222e" stroke-width="1.5" fill="none" stroke-dasharray="5,3" marker-end="url(#arrow-red)"/>
+  <text x="570" y="320" font-family="system-ui, -apple-system, sans-serif" font-size="11"
+    fill="#cf222e" text-anchor="start">Agent fixes &amp; re-validates</text>
+
+  <!-- Bottom annotation -->
+  <text x="600" y="510" font-family="system-ui, -apple-system, sans-serif" font-size="12"
+    fill="#57606a" text-anchor="middle">The agent handles authoring, compilation, and validation autonomously. You only need to review and merge (or request corrections).</text>
+</svg>
