From d51402712ec012f048aec5ba4667612e7eb1c551 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 19 Jun 2026 03:40:25 +0000
Subject: [PATCH] Replace Deep dive alert with copy-to-clipboard
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The button now copies a ready-to-paste prompt (pattern name,
description, flow, and common uses) to the clipboard instead of
showing a blocking alert() with instructions. Button label briefly
shows "Copied ✓" for feedback, then reverts.
---
 index.html | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 08de940..faa3bcb 100644
--- a/index.html
+++ b/index.html
@@ -941,6 +941,25 @@ <h1 class="header-title">AI agent <span>design patterns</span></h1>
   }
 }
 
+function deepDivePrompt(p) {
+  const flowText = p.flow.map(f => f.label).join(' → ') + (p.loop ? ' → (loop) → Done' : '');
+  return `Explain the "${p.name}" AI agent design pattern with a real implementation example.\n\n`
+    + `Context: ${p.desc}\n`
+    + `Typical flow: ${flowText}\n`
+    + `Common uses: ${p.uses}`;
+}
+
+function copyDeepDive(idx, btn) {
+  const text = deepDivePrompt(PATTERNS[idx]);
+  const reset = (label) => {
+    btn.textContent = label;
+    setTimeout(() => { btn.textContent = 'Deep dive ↗'; }, 1600);
+  };
+  navigator.clipboard.writeText(text)
+    .then(() => reset('Copied ✓'))
+    .catch(() => reset('Copy failed'));
+}
+
 function renderGrid() {
   const grid = document.getElementById('grid');
   grid.innerHTML = '';
@@ -986,7 +1005,7 @@ <h1 class="header-title">AI agent <span>design patterns</span></h1>
         <div class="expand-desc">
           ${p.desc}
           <div class="expand-uses"><strong>Common uses:</strong> ${p.uses}</div>
-          <button class="deep-btn" onclick="event.stopPropagation(); alert('Open this in Claude chat to deep dive: \'Explain the ${p.name} pattern with a real implementation example\'')">
+          <button class="deep-btn" onclick="event.stopPropagation(); copyDeepDive(${p.origIdx}, this)">
             Deep dive ↗
           </button>
         </div>