diff --git a/assets/header-banner-v2.svg b/assets/header-banner-v2.svg
index 7dd1086..3d3e823 100644
--- a/assets/header-banner-v2.svg
+++ b/assets/header-banner-v2.svg
@@ -1,227 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 130">
-  <!--
-    ANIMATION IMPLEMENTATION NOTES
-    ==============================
-
-    This banner uses a synchronized 4-second animation cycle to create a continuous
-    "flow" effect from START to END, visualizing data moving through a pipeline.
-
-    KEY TECHNIQUES:
-
-    1. TRAVELING PULSE (ring charge effect)
-       - Each ring is split into two semicircle <path> arcs (top half, bottom half)
-       - stroke-dasharray="15 180" creates a 15px bright segment with a huge 180px gap
-       - The large gap prevents the dash pattern from repeating on the 88px arc
-       - stroke-dashoffset is animated to move the segment along the arc:
-         * offset=20: segment hidden before arc start
-         * offset=-95: segment hidden past arc end
-       - Opacity animation hides the segment during the instant "reset" jump,
-         preventing a visible backwards sweep
-
-    2. ORB MOTION (traveling particles)
-       - animateMotion with keyPoints/keyTimes controls WHEN the orb moves vs waits
-       - keyPoints="0;0;1;1" with keyTimes="0;0.2;0.4;1" means:
-         * 0-20% of cycle: orb waits at start (keyPoint 0)
-         * 20-40% of cycle: orb travels from start to end
-         * 40-100% of cycle: orb waits at end (keyPoint 1)
-       - Opacity animations make orbs visible only during their travel phase
-       - calcMode="spline" with easing curves creates smooth acceleration
-
-    3. SEQUENTIAL TIMING (unified 4s cycle)
-       - All animations share dur="4s" so they stay in sync
-       - Timeline phases (as percentage of cycle):
-         * 0-20%:   START ring pulse sweeps
-         * 20-40%:  Left orb travels (cyan)
-         * 40-60%:  Right orb travels (orange) - creates seamless continuation
-         * 60-80%:  END ring pulse sweeps
-         * 80-100%: Pause before restart
-
-    4. COLOR THEMING
-       - START side: Cyan palette (#06b6d4 base, #22d3ee mid, #67e8f9 bright)
-       - END side: Orange palette (#9a3412 base, #f97316 mid, #fdba74 bright)
-       - Gradient underline connects both themes visually
-  -->
-  <defs>
-    <!-- Solid dark background -->
-    <linearGradient id="bgGrad" x1="0%" y1="0%" x2="100%" y2="0%">
-      <stop offset="0%" style="stop-color:#0f172a"/>
-      <stop offset="100%" style="stop-color:#0f172a"/>
-    </linearGradient>
-
-    <!-- Title gradient - bright white to cyan -->
-    <linearGradient id="textGrad" x1="0%" y1="0%" x2="100%" y2="0%">
-      <stop offset="0%" style="stop-color:#ffffff"/>
-      <stop offset="50%" style="stop-color:#22d3ee"/>
-      <stop offset="100%" style="stop-color:#ffffff"/>
-      <animate attributeName="x1" values="0%;100%;0%" dur="6s" repeatCount="indefinite"/>
-      <animate attributeName="x2" values="100%;200%;100%" dur="6s" repeatCount="indefinite"/>
-    </linearGradient>
-
-    <!-- Accent underline - cyan to orange -->
-    <linearGradient id="accentGrad" x1="0%" y1="0%" x2="100%" y2="0%">
-      <stop offset="0%" style="stop-color:#06b6d4"/>
-      <stop offset="100%" style="stop-color:#f97316"/>
-    </linearGradient>
-
-    <!-- Start icon gradient -->
-    <linearGradient id="startGrad" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#06b6d4"/>
-      <stop offset="100%" style="stop-color:#0891b2"/>
-    </linearGradient>
-
-    <!-- End icon gradient -->
-    <linearGradient id="endGrad" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#f97316"/>
-      <stop offset="100%" style="stop-color:#ea580c"/>
-    </linearGradient>
-
-    <!-- Glow filter -->
-    <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
-      <feGaussianBlur stdDeviation="3" result="coloredBlur"/>
-      <feMerge>
-        <feMergeNode in="coloredBlur"/>
-        <feMergeNode in="SourceGraphic"/>
-      </feMerge>
-    </filter>
-
-    <!-- Flow paths -->
-    <!-- Left: starts from right edge of START ring (60+28=88) -->
-    <path id="leftFlowPath" d="M 88 65 L 200 65"/>
-    <!-- Right: ends at left edge of END ring (740-28=712) -->
-    <path id="rightFlowPath" d="M 600 65 L 712 65"/>
-  </defs>
-
-  <!-- Solid dark background -->
-  <rect width="800" height="130" fill="#0f172a" rx="8"/>
-
-  <!-- Subtle grid lines for texture -->
-  <g stroke="#1e293b" stroke-width="1">
-    <line x1="0" y1="43" x2="800" y2="43"/>
-    <line x1="0" y1="87" x2="800" y2="87"/>
-  </g>
-
-  <!-- === LEFT SIDE: Start indicator === -->
-
-  <!-- Flow line - solid and visible, starts at ring edge -->
-  <line x1="88" y1="65" x2="200" y2="65" stroke="#06b6d4" stroke-width="3" stroke-linecap="round"/>
-
-  <!-- Animated dashes on flow line - 4s cycle -->
-  <line x1="88" y1="65" x2="200" y2="65" stroke="#22d3ee" stroke-width="3" stroke-dasharray="8,12" stroke-linecap="round">
-    <animate attributeName="stroke-dashoffset" from="0" to="-80" dur="4s" repeatCount="indefinite"/>
-  </line>
-
-  <!-- Arrow pointing right -->
-  <polygon points="200,65 188,58 188,72" fill="#22d3ee"/>
-
-  <!-- Start icon - solid filled circle with play symbol -->
-  <g transform="translate(60, 65)">
-    <!-- Outer ring (base) -->
-    <circle r="28" fill="none" stroke="#0e7490" stroke-width="3"/>
-
-    <!-- Traveling pulse - top half (left to right over top) -->
-    <!-- 4s cycle: pulse 0-0.2, orb travels 0.2-0.4, then idle while right side animates -->
-    <path d="M -28,0 A 28,28 0 0,0 28,0" fill="none" stroke="#67e8f9" stroke-width="4" stroke-linecap="round"
-          stroke-dasharray="15 180" stroke-dashoffset="20" filter="url(#glow)">
-      <animate attributeName="stroke-dashoffset" values="20;-95;20;20" keyTimes="0;0.2;0.22;1" dur="4s" repeatCount="indefinite"/>
-      <animate attributeName="opacity" values="1;1;0;0;1" keyTimes="0;0.19;0.2;0.98;1" dur="4s" repeatCount="indefinite"/>
-    </path>
-
-    <!-- Traveling pulse - bottom half (left to right under bottom) -->
-    <path d="M -28,0 A 28,28 0 0,1 28,0" fill="none" stroke="#67e8f9" stroke-width="4" stroke-linecap="round"
-          stroke-dasharray="15 180" stroke-dashoffset="20" filter="url(#glow)">
-      <animate attributeName="stroke-dashoffset" values="20;-95;20;20" keyTimes="0;0.2;0.22;1" dur="4s" repeatCount="indefinite"/>
-      <animate attributeName="opacity" values="1;1;0;0;1" keyTimes="0;0.19;0.2;0.98;1" dur="4s" repeatCount="indefinite"/>
-    </path>
-
-    <!-- Filled background -->
-    <circle r="22" fill="#0f172a" stroke="#22d3ee" stroke-width="2"/>
-
-    <!-- Play triangle icon -->
-    <polygon points="-5,-8 -5,8 8,0" fill="#22d3ee" transform="translate(2,0)"/>
-  </g>
-
-  <!-- Label -->
-  <text x="60" y="110" text-anchor="middle" fill="#06b6d4" font-family="system-ui, -apple-system, sans-serif" font-size="11" font-weight="700" letter-spacing="1">START</text>
-
-  <!-- === CENTER: Title === -->
-
-  <!-- Main title - bold white -->
-  <text x="400" y="50" text-anchor="middle" fill="url(#textGrad)"
-        font-family="system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
-        font-size="34" font-weight="800" letter-spacing="-0.5">
-    GitHub API Usage Tracker
-  </text>
-
-  <!-- Subtitle - visible gray -->
-  <text x="400" y="78" text-anchor="middle" fill="#94a3b8"
-        font-family="system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
-        font-size="14" font-weight="500">
-    Measure workflow API consumption with precision
-  </text>
-
-  <!-- Underline bar - solid and bright -->
-  <rect x="240" y="92" width="320" height="4" rx="2" fill="url(#accentGrad)"/>
-
-  <!-- === RIGHT SIDE: End indicator === -->
-
-  <!-- Flow line - solid and visible, ends at ring edge -->
-  <line x1="600" y1="65" x2="712" y2="65" stroke="#f97316" stroke-width="3" stroke-linecap="round"/>
-
-  <!-- Animated dashes on flow line - 4s cycle -->
-  <line x1="600" y1="65" x2="712" y2="65" stroke="#fb923c" stroke-width="3" stroke-dasharray="8,12" stroke-linecap="round">
-    <animate attributeName="stroke-dashoffset" from="0" to="-80" dur="4s" repeatCount="indefinite"/>
-  </line>
-
-  <!-- Arrow pointing right -->
-  <polygon points="612,65 600,58 600,72" fill="#fb923c"/>
-
-  <!-- End icon - solid filled circle with checkmark -->
-  <g transform="translate(740, 65)">
-    <!-- Outer ring (base) -->
-    <circle r="28" fill="none" stroke="#9a3412" stroke-width="3"/>
-
-    <!-- Traveling pulse - top half (left to right over top) -->
-    <!-- 4s cycle: idle 0-0.6, sweep 0.6-0.8, idle 0.8-1 -->
-    <path d="M -28,0 A 28,28 0 0,0 28,0" fill="none" stroke="#fdba74" stroke-width="4" stroke-linecap="round"
-          stroke-dasharray="15 180" stroke-dashoffset="20" filter="url(#glow)">
-      <animate attributeName="stroke-dashoffset" values="20;20;-95;20;20" keyTimes="0;0.6;0.8;0.82;1" dur="4s" repeatCount="indefinite"/>
-      <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.59;0.61;0.79;0.8;1" dur="4s" repeatCount="indefinite"/>
-    </path>
-
-    <!-- Traveling pulse - bottom half (left to right under bottom) -->
-    <path d="M -28,0 A 28,28 0 0,1 28,0" fill="none" stroke="#fdba74" stroke-width="4" stroke-linecap="round"
-          stroke-dasharray="15 180" stroke-dashoffset="20" filter="url(#glow)">
-      <animate attributeName="stroke-dashoffset" values="20;20;-95;20;20" keyTimes="0;0.6;0.8;0.82;1" dur="4s" repeatCount="indefinite"/>
-      <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.59;0.61;0.79;0.8;1" dur="4s" repeatCount="indefinite"/>
-    </path>
-
-    <!-- Filled background -->
-    <circle r="22" fill="#0f172a" stroke="#fb923c" stroke-width="2"/>
-
-    <!-- Checkmark icon -->
-    <polyline points="-8,0 -2,6 10,-6" fill="none" stroke="#fb923c" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
-  </g>
-
-  <!-- Label -->
-  <text x="740" y="110" text-anchor="middle" fill="#f97316" font-family="system-ui, -apple-system, sans-serif" font-size="11" font-weight="700" letter-spacing="1">END</text>
-
-  <!-- Left orb - emits after START pulse, travels 0.2-0.4 of cycle -->
-  <circle r="5" fill="#67e8f9" filter="url(#glow)">
-    <!-- 4s cycle: wait 0-0.2, travel 0.2-0.4, wait 0.4-1 -->
-    <animateMotion dur="4s" repeatCount="indefinite" keyPoints="0;0;1;1" keyTimes="0;0.2;0.4;1" calcMode="spline" keySplines="0 0 1 1;0.25 0.1 0.25 1;0 0 1 1">
-      <mpath href="#leftFlowPath"/>
-    </animateMotion>
-    <!-- Visible only during travel (0.2-0.4) -->
-    <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.18;0.22;0.38;0.42;1" dur="4s" repeatCount="indefinite"/>
-  </circle>
-
-  <!-- Right orb - continues the journey, travels 0.4-0.6 of cycle -->
-  <circle r="5" fill="#fdba74" filter="url(#glow)">
-    <!-- 4s cycle: wait 0-0.4, travel 0.4-0.6, wait 0.6-1 -->
-    <animateMotion dur="4s" repeatCount="indefinite" keyPoints="0;0;1;1" keyTimes="0;0.4;0.6;1" calcMode="spline" keySplines="0 0 1 1;0.25 0.1 0.25 1;0 0 1 1">
-      <mpath href="#rightFlowPath"/>
-    </animateMotion>
-    <!-- Visible only during travel (0.4-0.6), fade out as it arrives -->
-    <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.38;0.42;0.58;0.62;1" dur="4s" repeatCount="indefinite"/>
-  </circle>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 130"><defs><linearGradient id="bgGrad" x1="0%" x2="100%" y1="0%" y2="0%"><stop offset="0%" style="stop-color:#0f172a"/><stop offset="100%" style="stop-color:#0f172a"/></linearGradient><linearGradient id="textGrad" x1="0%" x2="100%" y1="0%" y2="0%"><stop offset="0%" style="stop-color:#fff"/><stop offset="50%" style="stop-color:#22d3ee"/><stop offset="100%" style="stop-color:#fff"/><animate attributeName="x1" dur="6s" repeatCount="indefinite" values="0%;100%;0%"/><animate attributeName="x2" dur="6s" repeatCount="indefinite" values="100%;200%;100%"/></linearGradient><linearGradient id="accentGrad" x1="0%" x2="100%" y1="0%" y2="0%"><stop offset="0%" style="stop-color:#06b6d4"/><stop offset="100%" style="stop-color:#f97316"/></linearGradient><linearGradient id="startGrad" x1="0%" x2="100%" y1="0%" y2="100%"><stop offset="0%" style="stop-color:#06b6d4"/><stop offset="100%" style="stop-color:#0891b2"/></linearGradient><linearGradient id="endGrad" x1="0%" x2="100%" y1="0%" y2="100%"><stop offset="0%" style="stop-color:#f97316"/><stop offset="100%" style="stop-color:#ea580c"/></linearGradient><filter id="glow" width="200%" height="200%" x="-50%" y="-50%"><feGaussianBlur result="coloredBlur" stdDeviation="3"/><feMerge><feMergeNode in="coloredBlur"/><feMergeNode in="SourceGraphic"/></feMerge></filter><path id="leftFlowPath" d="M 88 65 L 200 65"/><path id="rightFlowPath" d="M 600 65 L 712 65"/></defs><rect width="800" height="130" fill="#0f172a" rx="8"/><g stroke="#1e293b" stroke-width="1"><line x1="0" x2="800" y1="43" y2="43"/><line x1="0" x2="800" y1="87" y2="87"/></g><line x1="88" x2="200" y1="65" y2="65" stroke="#06b6d4" stroke-linecap="round" stroke-width="3"/><line x1="88" x2="200" y1="65" y2="65" stroke="#22d3ee" stroke-dasharray="8 12" stroke-linecap="round" stroke-width="3"><animate attributeName="stroke-dashoffset" dur="4s" from="0" repeatCount="indefinite" to="-80"/></line><polygon fill="#22d3ee" points="200 65 188 58 188 72"/><g transform="translate(60, 65)"><circle r="28" fill="none" stroke="#0e7490" stroke-width="3"/><path fill="none" stroke="#67e8f9" stroke-dasharray="15 180" stroke-dashoffset="20" stroke-linecap="round" stroke-width="4" d="M -28,0 A 28,28 0 0,0 28,0" filter="url(#glow)"><animate attributeName="stroke-dashoffset" dur="4s" keyTimes="0;0.2;0.22;1" repeatCount="indefinite" values="20;-95;20;20"/><animate attributeName="opacity" dur="4s" keyTimes="0;0.19;0.2;0.98;1" repeatCount="indefinite" values="1;1;0;0;1"/></path><path fill="none" stroke="#67e8f9" stroke-dasharray="15 180" stroke-dashoffset="20" stroke-linecap="round" stroke-width="4" d="M -28,0 A 28,28 0 0,1 28,0" filter="url(#glow)"><animate attributeName="stroke-dashoffset" dur="4s" keyTimes="0;0.2;0.22;1" repeatCount="indefinite" values="20;-95;20;20"/><animate attributeName="opacity" dur="4s" keyTimes="0;0.19;0.2;0.98;1" repeatCount="indefinite" values="1;1;0;0;1"/></path><circle r="22" fill="#0f172a" stroke="#22d3ee" stroke-width="2"/><polygon fill="#22d3ee" points="-5 -8 -5 8 8 0" transform="translate(2,0)"/></g><text x="60" y="110" fill="#06b6d4" font-family="system-ui, -apple-system, sans-serif" font-size="11" font-weight="700" letter-spacing="1" text-anchor="middle">START</text><text x="400" y="50" fill="url(#textGrad)" font-family="system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="34" font-weight="800" letter-spacing="-.5" text-anchor="middle">GitHub API Usage Tracker</text><text x="400" y="78" fill="#94a3b8" font-family="system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="14" font-weight="500" text-anchor="middle">Measure workflow API consumption with precision</text><rect width="320" height="4" x="240" y="92" fill="url(#accentGrad)" rx="2"/><line x1="600" x2="712" y1="65" y2="65" stroke="#f97316" stroke-linecap="round" stroke-width="3"/><line x1="600" x2="712" y1="65" y2="65" stroke="#fb923c" stroke-dasharray="8 12" stroke-linecap="round" stroke-width="3"><animate attributeName="stroke-dashoffset" dur="4s" from="0" repeatCount="indefinite" to="-80"/></line><polygon fill="#fb923c" points="612 65 600 58 600 72"/><g transform="translate(740, 65)"><circle r="28" fill="none" stroke="#9a3412" stroke-width="3"/><path fill="none" stroke="#fdba74" stroke-dasharray="15 180" stroke-dashoffset="20" stroke-linecap="round" stroke-width="4" d="M -28,0 A 28,28 0 0,0 28,0" filter="url(#glow)"><animate attributeName="stroke-dashoffset" dur="4s" keyTimes="0;0.6;0.8;0.82;1" repeatCount="indefinite" values="20;20;-95;20;20"/><animate attributeName="opacity" dur="4s" keyTimes="0;0.59;0.61;0.79;0.8;1" repeatCount="indefinite" values="0;0;1;1;0;0"/></path><path fill="none" stroke="#fdba74" stroke-dasharray="15 180" stroke-dashoffset="20" stroke-linecap="round" stroke-width="4" d="M -28,0 A 28,28 0 0,1 28,0" filter="url(#glow)"><animate attributeName="stroke-dashoffset" dur="4s" keyTimes="0;0.6;0.8;0.82;1" repeatCount="indefinite" values="20;20;-95;20;20"/><animate attributeName="opacity" dur="4s" keyTimes="0;0.59;0.61;0.79;0.8;1" repeatCount="indefinite" values="0;0;1;1;0;0"/></path><circle r="22" fill="#0f172a" stroke="#fb923c" stroke-width="2"/><polyline fill="none" stroke="#fb923c" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" points="-8 0 -2 6 10 -6"/></g><text x="740" y="110" fill="#f97316" font-family="system-ui, -apple-system, sans-serif" font-size="11" font-weight="700" letter-spacing="1" text-anchor="middle">END</text><circle r="5" fill="#67e8f9" filter="url(#glow)"><animateMotion calcMode="spline" dur="4s" keyPoints="0;0;1;1" keySplines="0 0 1 1;0.25 0.1 0.25 1;0 0 1 1" keyTimes="0;0.2;0.4;1" repeatCount="indefinite"><mpath href="#leftFlowPath"/></animateMotion><animate attributeName="opacity" dur="4s" keyTimes="0;0.18;0.22;0.38;0.42;1" repeatCount="indefinite" values="0;0;1;1;0;0"/></circle><circle r="5" fill="#fdba74" filter="url(#glow)"><animateMotion calcMode="spline" dur="4s" keyPoints="0;0;1;1" keySplines="0 0 1 1;0.25 0.1 0.25 1;0 0 1 1" keyTimes="0;0.4;0.6;1" repeatCount="indefinite"><mpath href="#rightFlowPath"/></animateMotion><animate attributeName="opacity" dur="4s" keyTimes="0;0.38;0.42;0.58;0.62;1" repeatCount="indefinite" values="0;0;1;1;0;0"/></circle></svg>
\ No newline at end of file
diff --git a/assets/workflow-summary-example.png b/assets/workflow-summary-example.png
index cd78bbd..be694f0 100644
Binary files a/assets/workflow-summary-example.png and b/assets/workflow-summary-example.png differ