[workshop-diagrams] Add theme-aware explanatory diagram for runner label dispatch

[github-actions]

Summary

Workshop file changed: workshop/24-self-hosted-runners.md

Change type: New concept diagram (not a migration — no prior conceptual diagram existed for this section).

SVG files added:

• workshop/images/24-runner-label-dispatch-light.svg
• workshop/images/24-runner-label-dispatch-dark.svg

Why this diagram helps learners

Step 24 introduces runner label dispatch — how the runs-on: list in frontmatter filters the runner fleet. This concept was explained only in prose; the matching logic (all labels must be satisfied, first idle runner wins) benefits from a visual overview.

The diagram shows three numbered stages:

1. Workflow Frontmatter — the runs-on: label list
2. Actions Dispatcher — reads labels and routes the job
3. Runner Fleet — four runners: matched (green border), OS mismatch (skip), GitHub-hosted (skip), and busy/queued (dashed)

QA results

• currentSrc in light scheme ends with -light.svg ✓
• currentSrc in dark scheme ends with -dark.svg ✓
• Both screenshots non-blank (~73 KB each) ✓
• SVG visual-language check: 0 violations ✓
• Markdown lint: 0 issues ✓
• Primer Octicon check-circle path used for match indicator (MIT-licensed) ✓

Warning

Firewall blocked 4 domains

The following domains were blocked by the firewall during workflow execution:

• accounts.google.com
• awmgmcpg
• clients2.google.com
• www.google.com

To allow these domains, add them to the network.allowed list in your workflow frontmatter:

network:
  allowed:
    - defaults
    - "accounts.google.com"
    - "awmgmcpg"
    - "clients2.google.com"
    - "www.google.com"

See Network Configuration for more information.

Generated by 🧠 Workshop Explanatory Diagram Generator · 163.3 AIC · ⌖ 9.49 AIC · ⊞ 6.8K · ◷

• expires on Aug 31, 2026, 4:56 AM UTC