From dec5fa80a06ccebc96975a29efe2c332ee45fc99 Mon Sep 17 00:00:00 2001
From: Shayan Rais <shanraisshan@gmail.com>
Date: Wed, 22 Apr 2026 21:21:14 +0500
Subject: [PATCH] updated

---
 .../index.html                                | 26 ++++++++++---------
 1 file changed, 14 insertions(+), 12 deletions(-)

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 5387777..f453f2a 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
@@ -500,7 +500,8 @@
         </div>
         <div class="trigger-box">
             <h4>Example: Opus 4.7</h4>
-            <p>Knowledge cut-off: <strong>January 2026</strong>.</p>
+            <p style="margin: 0 0 4px;">Knowledge cut-off: <strong>January 2026</strong>.</p>
+            <p style="font-size: 0.8rem; color: #888; margin: 0; font-style: italic;">Probabilistic by nature.</p>
         </div>
     </div>
 
@@ -567,22 +568,23 @@
     <div class="slide" data-slide="11">
         <h1>&#x1F4AA; Harness &mdash; the body around the brain</h1>
         <div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin: 28px 0;">
-            <div class="col-card" style="flex: 0 1 calc(25% - 14px); border-left: 4px solid #4caf50; text-align: center;">
+            <div class="col-card" style="flex: 0 1 calc(33.333% - 12px); border-left: 4px solid #4caf50; text-align: center;">
                 <div style="font-size: 2.8rem; line-height: 1; margin-bottom: 10px;">&#x270B;</div>
                 <h4 style="color: #2e7d32; text-transform: none; letter-spacing: 0; margin-bottom: 6px;"><strong>Tools</strong> &mdash; the hands</h4>
-                <p style="font-size: 0.9rem; color: #555; margin: 0;">Read, Edit, Bash, WebSearch.</p>
+                <p style="font-size: 0.9rem; color: #555; margin: 0;">Built-in: Read, Edit, Bash, WebSearch.</p>
             </div>
-            <div class="col-card" style="flex: 0 1 calc(25% - 14px); border-left: 4px solid #2196f3; text-align: center;">
-                <div style="font-size: 2.8rem; line-height: 1; margin-bottom: 10px;">&#x1F441;&#xFE0F;</div>
-                <h4 style="color: #1565c0; text-transform: none; letter-spacing: 0; margin-bottom: 6px;"><strong>MCP</strong> &mdash; the eyes</h4>
-                <p style="font-size: 0.9rem; color: #555; margin: 0;">Claude in Chrome actually <em>sees</em> browser pages.</p>
+            <div class="col-card" style="flex: 0 1 calc(33.333% - 12px); border-left: 4px solid #2196f3; text-align: center;">
+                <div style="font-size: 2.8rem; line-height: 1; margin-bottom: 10px;">&#x1F50C;</div>
+                <h4 style="color: #1565c0; text-transform: none; letter-spacing: 0; margin-bottom: 6px;"><strong>MCP</strong> &mdash; the adapters</h4>
+                <p style="font-size: 0.9rem; color: #555; margin: 0 0 4px;">USB-C for AI &mdash; plug in external tools (databases, browsers, APIs).</p>
+                <p style="font-size: 0.75rem; color: #999; margin: 0; font-style: italic;">e.g. &#x1F441;&#xFE0F; Claude in Chrome</p>
             </div>
-            <div class="col-card" style="flex: 0 1 calc(25% - 14px); border-left: 4px solid #f44336; text-align: center;">
+            <div class="col-card" style="flex: 0 1 calc(33.333% - 12px); border-left: 4px solid #f44336; text-align: center;">
                 <div style="font-size: 2.8rem; line-height: 1; margin-bottom: 10px;">&#x1F6E1;&#xFE0F;</div>
                 <h4 style="color: #c62828; text-transform: none; letter-spacing: 0; margin-bottom: 6px;"><strong>Permissions</strong> &mdash; the guardrails</h4>
                 <p style="font-size: 0.9rem; color: #555; margin: 0;">Allow / ask / deny for tool use.</p>
             </div>
-            <div class="col-card" style="flex: 0 1 calc(25% - 14px); border-left: 4px solid #009688; text-align: center;">
+            <div class="col-card" style="flex: 0 1 calc(33.333% - 12px); border-left: 4px solid #009688; text-align: center;">
                 <div style="font-size: 2.8rem; line-height: 1; margin-bottom: 10px;">&#x1FA9D;</div>
                 <h4 style="color: #00796b; text-transform: none; letter-spacing: 0; margin-bottom: 6px;"><strong>Hooks</strong> &mdash; the reflexes</h4>
                 <p style="font-size: 0.9rem; color: #555; margin: 0;"><strong>Deterministic</strong> scripts that fire on events.</p>
@@ -594,7 +596,7 @@
     <!-- SLIDE 11: Harness Limitation 1 &mdash; Refuses to use tools   -->
     <!-- ============================================================ -->
     <div class="slide" data-slide="12">
-        <h1>&#x1F4AA; Limitation &mdash; Doesn&rsquo;t always use its tools</h1>
+        <h1>&#x1F4AA; Non-determinism &mdash; Doesn&rsquo;t always use its tools</h1>
         <p>Same question, different prompt &mdash; sometimes the harness <strong>asks first</strong> instead of acting.</p>
         <div style="text-align: center; margin: 24px 0;">
             <img src="../assets/harness/harness-limitation-1.jpg" alt="Claude Code refusing to check live weather and asking permission to use WebFetch" style="max-width: 100%; max-height: 55vh; border-radius: 12px; box-shadow: 0 4px 24px rgba(0,0,0,0.12);" />
@@ -605,7 +607,7 @@
     <!-- SLIDE 12: Harness Limitation 2 &mdash; Different sources       -->
     <!-- ============================================================ -->
     <div class="slide" data-slide="13">
-        <h1>&#x1F4AA; Limitation &mdash; Different sources, different answers</h1>
+        <h1>&#x1F4AA; Non-determinism &mdash; Different sources, different answers</h1>
         <p>Same question across runs can route through <strong>different tools and sources</strong>.</p>
         <div style="text-align: center; margin: 24px 0;">
             <img src="../assets/harness/harness-limitation-2.jpg" alt="Claude Code using Web Search across AccuWeather, Weather25, and TimeAndDate for weather in Karachi" style="max-width: 100%; max-height: 55vh; border-radius: 12px; box-shadow: 0 4px 24px rgba(0,0,0,0.12);" />
@@ -616,7 +618,7 @@
     <!-- SLIDE 13: Harness Limitation 3 &mdash; Tools can fail          -->
     <!-- ============================================================ -->
     <div class="slide" data-slide="14">
-        <h1>&#x1F4AA; Limitation &mdash; Tools can fail</h1>
+        <h1>&#x1F4AA; Non-determinism &mdash; Tools can fail</h1>
         <p>External tools can time out, return errors, or fetch stale data.</p>
         <div style="text-align: center; margin: 24px 0;">
             <img src="../assets/harness/harness-limitation-3.jpg" alt="Claude Code showing a 403 error from timeanddate.com and falling back to wttr.in" style="max-width: 100%; max-height: 55vh; border-radius: 12px; box-shadow: 0 4px 24px rgba(0,0,0,0.12);" />