From 38aceb25b92a786600b39d56776765efd66e6ec9 Mon Sep 17 00:00:00 2001
From: Shayan Rais <shanraisshan@gmail.com>
Date: Sat, 25 Apr 2026 11:52:37 +0500
Subject: [PATCH] gemini workflow

---
 .../index.html                                | 50 ++++++++++++-
 .../gemini-orchestration-workflow.svg         | 75 +++++++++++++++++++
 2 files changed, 123 insertions(+), 2 deletions(-)
 create mode 100644 presentation/assets/concepts/workflow/gemini-orchestration-workflow.svg

diff --git a/presentation/2026-04-25-gdg-kolachi-cli-claude-code-gemini/index.html b/presentation/2026-04-25-gdg-kolachi-cli-claude-code-gemini/index.html
index 902556a..9d6fd7c 100644
--- a/presentation/2026-04-25-gdg-kolachi-cli-claude-code-gemini/index.html
+++ b/presentation/2026-04-25-gdg-kolachi-cli-claude-code-gemini/index.html
@@ -2570,8 +2570,54 @@ todoapp/
         <p style="font-size: 0.78rem; color: #aaa; font-style: italic; margin: 4px 0 0;">Context window and output token figures reflect published specs as of 2026-04-24. Verify against vendor docs for the latest.</p>
     </div>
 
-    <!-- Slide 51: Thank you -->
-    <div class="slide section-slide" data-slide="51">
+    <!-- Slide 51: Gemini Orchestration Workflow diagram -->
+    <div class="slide" data-slide="51" data-level="workflow">
+        <div style="min-height: calc(100vh - 120px);">
+            <h1>&#x1F4CB; Gemini Orchestration Workflow</h1>
+            <img src="../assets/concepts/workflow/gemini-orchestration-workflow.svg" alt="Gemini CLI Command → Agent → Skill architecture flow"
+                 style="max-width: 1100px; max-height: 70vh; width: 100%; height: auto; display: block; margin: 20px auto 0 auto;" />
+        </div>
+        <div class="pillar-footer">
+            <div class="pillar-mini-card inactive" style="border-left: 3px solid #009688;">
+                <span class="pmc-emoji">&#x1F9D1;&#x200D;&#x1F4BC;</span>
+                <span class="pmc-title">Agents</span>
+                <span class="pmc-subtitle">&mdash; the specialists</span>
+                <span class="pmc-body">A dedicated Claude worker &mdash; own context, own tools, own focus. Each runs in isolation.</span>
+                <span class="pmc-badge" style="background: #e8f5e9; color: #2e7d32;">&#x2705; fresh working memory per run</span>
+            </div>
+            <div class="pillar-mini-card inactive" style="border-left: 3px solid #9c27b0;">
+                <span class="pmc-emoji">&#x1F4DD;</span>
+                <span class="pmc-title">CLAUDE.md</span>
+                <span class="pmc-subtitle">&mdash; your memory</span>
+                <span class="pmc-body">Knowledge <em>you</em> provide to the model. Read every session. Keep it under 200 lines.</span>
+                <span class="pmc-badge" style="background: #fce4ec; color: #c62828;">&#x26A0;&#xFE0F; 200-line problem</span>
+            </div>
+            <div class="pillar-mini-card inactive" style="border-left: 3px solid #4caf50;">
+                <span class="pmc-emoji">&#x1F3AF;</span>
+                <span class="pmc-title">Skills</span>
+                <span class="pmc-subtitle">&mdash; the know-how</span>
+                <span class="pmc-body">What the specialist (or Claude) can actually do. Loaded on demand &mdash; only when needed.</span>
+                <span class="pmc-badge" style="background: #e8f5e9; color: #2e7d32;">&#x2705; progressive disclosure</span>
+            </div>
+            <div class="pillar-mini-card inactive" style="border-left: 3px solid #3f51b5;">
+                <span class="pmc-emoji">&#x1F4AD;</span>
+                <span class="pmc-title">Context</span>
+                <span class="pmc-subtitle">&mdash; the working memory</span>
+                <span class="pmc-body">What Claude holds in his head now &mdash; fresh every new chat. Finite budget; compact at ~50%.</span>
+                <span class="pmc-badge" style="background: #fce4ec; color: #c62828;">&#x26A0;&#xFE0F; dumb-zone problem</span>
+            </div>
+            <div class="pillar-mini-card" style="border-left: 4px solid #ef6c00;">
+                <span class="pmc-emoji">&#x1F4D8;</span>
+                <span class="pmc-title">Workflows</span>
+                <span class="pmc-subtitle">&mdash; the instruction manual</span>
+                <span class="pmc-body">Repeatable step-by-step recipes &mdash; like an AC install guide. Deterministic, reproducible.</span>
+                <span class="pmc-badge" style="background: #e8f5e9; color: #2e7d32;">&#x2705; reproducible recipes</span>
+            </div>
+        </div>
+    </div>
+
+    <!-- Slide 52: Thank you -->
+    <div class="slide section-slide" data-slide="52">
         <div class="slide-viewport-content">
             <h1>&#x1F64F; Thank you!</h1>
             <div style="margin: 20px auto 28px auto; text-align: center;">
diff --git a/presentation/assets/concepts/workflow/gemini-orchestration-workflow.svg b/presentation/assets/concepts/workflow/gemini-orchestration-workflow.svg
new file mode 100644
index 0000000..a8d0381
--- /dev/null
+++ b/presentation/assets/concepts/workflow/gemini-orchestration-workflow.svg
@@ -0,0 +1,75 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 435" width="1200" height="435">
+  <defs>
+    <marker id="arrow" markerWidth="10" markerHeight="10" refX="8" refY="4" orient="auto">
+      <path d="M0,0 L0,8 L8,4 z" fill="#666"/>
+    </marker>
+    <linearGradient id="gem" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#4285F4"/>
+      <stop offset="55%" stop-color="#7B68EE"/>
+      <stop offset="100%" stop-color="#EA4335"/>
+    </linearGradient>
+  </defs>
+
+  <!-- Background -->
+  <rect width="1200" height="435" fill="#fafafa" rx="10"/>
+
+  <!-- Header: Gemini spark + title -->
+  <g transform="translate(400, 18)">
+    <!-- Gemini four-point spark -->
+    <path d="M 14 0 L 17 11 L 28 14 L 17 17 L 14 28 L 11 17 L 0 14 L 11 11 Z" fill="url(#gem)"/>
+  </g>
+  <text x="435" y="33" text-anchor="start" fill="#333" font-family="system-ui" font-size="18" font-weight="bold">Gemini CLI Orchestration Workflow</text>
+
+  <!-- User -->
+  <circle cx="75" cy="190" r="38" fill="#E07C4C"/>
+  <text x="75" y="196" text-anchor="middle" fill="white" font-family="system-ui" font-size="16" font-weight="bold">User</text>
+
+  <!-- Arrow 1 -->
+  <line x1="118" y1="190" x2="183" y2="190" stroke="#666" stroke-width="2.5" marker-end="url(#arrow)"/>
+
+  <!-- Command Box -->
+  <rect x="193" y="145" width="240" height="90" rx="8" fill="#2C3E50" stroke="#1A252F" stroke-width="2.5"/>
+  <text x="313" y="179" text-anchor="middle" fill="white" font-family="system-ui" font-size="16" font-weight="bold">Command</text>
+  <text x="313" y="207" text-anchor="middle" fill="white" font-family="system-ui" font-size="12" opacity="0.9">commands/weather-orchestrator</text>
+  <!-- Command description -->
+  <text x="313" y="265" text-anchor="middle" fill="#888" font-family="system-ui" font-size="11">Asks user for C°/F°, invokes</text>
+  <text x="313" y="280" text-anchor="middle" fill="#888" font-family="system-ui" font-size="11">agent and SVG creator skill</text>
+
+  <!-- Arrow 2 -->
+  <line x1="438" y1="190" x2="503" y2="190" stroke="#666" stroke-width="2.5" marker-end="url(#arrow)"/>
+  <text x="470" y="180" text-anchor="middle" fill="#666" font-family="system-ui" font-size="11">@agent</text>
+
+  <!-- Agent Box -->
+  <rect x="513" y="127" width="240" height="126" rx="8" fill="#2BA5A5" stroke="#1E8F8F" stroke-width="2.5"/>
+  <text x="633" y="155" text-anchor="middle" fill="white" font-family="system-ui" font-size="16" font-weight="bold">Agent</text>
+  <text x="633" y="173" text-anchor="middle" fill="white" font-family="system-ui" font-size="12" opacity="0.85">agents/weather-agent</text>
+
+  <!-- Inner tools box inside Agent -->
+  <rect x="527" y="183" width="212" height="56" rx="5" fill="white" opacity="0.2"/>
+  <text x="633" y="205" text-anchor="middle" fill="white" font-family="system-ui" font-size="12" opacity="0.7">(scoped tools)</text>
+  <text x="633" y="229" text-anchor="middle" fill="white" font-family="system-ui" font-size="11" opacity="0.9">web_fetch · run_shell_command</text>
+  <!-- Agent description -->
+  <text x="633" y="273" text-anchor="middle" fill="#888" font-family="system-ui" font-size="11">Fetches temperature from</text>
+  <text x="633" y="288" text-anchor="middle" fill="#888" font-family="system-ui" font-size="11">Open-Meteo API for Dubai</text>
+
+  <!-- Arrow 3 -->
+  <line x1="758" y1="190" x2="823" y2="190" stroke="#666" stroke-width="2.5" marker-end="url(#arrow)"/>
+  <text x="790" y="180" text-anchor="middle" fill="#666" font-family="system-ui" font-size="11">activate_skill</text>
+
+  <!-- SVG Creator Skill Box -->
+  <rect x="833" y="145" width="280" height="90" rx="8" fill="#9B59B6" stroke="#8E44AD" stroke-width="2.5"/>
+  <text x="973" y="179" text-anchor="middle" fill="white" font-family="system-ui" font-size="16" font-weight="bold">Skill</text>
+  <text x="973" y="207" text-anchor="middle" fill="white" font-family="system-ui" font-size="12" opacity="0.9">skills/weather-svg-creator</text>
+  <!-- Skill description -->
+  <text x="973" y="265" text-anchor="middle" fill="#888" font-family="system-ui" font-size="11">Creates SVG weather card at</text>
+  <text x="973" y="280" text-anchor="middle" fill="#888" font-family="system-ui" font-size="11">orchestration-workflow/weather.svg</text>
+
+  <!-- Arrow 4 (back to user) -->
+  <path d="M 1113 190 Q 1160 190 1160 325 Q 1160 360 75 360 Q 40 360 40 255 L 40 235"
+        stroke="#666" stroke-width="2.5" fill="none" stroke-dasharray="6,4" marker-end="url(#arrow)"/>
+
+  <!-- Legend -->
+  <text x="600" y="407" text-anchor="middle" fill="#888" font-family="system-ui" font-size="12">
+    commands/weather-orchestrator → agents/weather-agent (scoped tools) → skills/weather-svg-creator (skill)
+  </text>
+</svg>