From 0188f00a067b5b1fd6d6f222fce485eb47cad713 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Tue, 5 May 2026 06:26:48 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20copy=20button?=
 =?UTF-8?q?=20to=20dashboard=20fallback=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Added a "Copy to Clipboard" button to the LivingDash fallback HTML.
- Included CSS for hover and focus-visible states.
- Added JavaScript to handle clipboard copying and provide visual success feedback (checkmark icon).
- Improved accessibility with ARIA labels and hidden icons.

Co-authored-by: jhweb <12529192+jhweb@users.noreply.github.com>
---
 braindrain/livingdash_sidecar.py | 31 ++++++++++++++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)
diff --git a/braindrain/livingdash_sidecar.py b/braindrain/livingdash_sidecar.py
index 0b3fe57..4796ad7 100644
--- a/braindrain/livingdash_sidecar.py
+++ b/braindrain/livingdash_sidecar.py
@@ -904,6 +904,10 @@ def index(full_path: str):
               .cmd-label { position: absolute; top: -0.7rem; left: 1rem; background: var(--accent); color: var(--bg); font-size: 0.7rem; font-weight: 800; padding: 0.1rem 0.5rem; border-radius: 0.2rem; text-transform: uppercase; }
               code { color: #e2e8f0; display: block; white-space: pre-wrap; }
               .footer { margin-top: 2rem; font-size: 0.8rem; color: #ffffff20; }
+              .copy-btn { position: absolute; top: 0.75rem; right: 0.75rem; background: transparent; border: 1px solid #ffffff20; color: var(--muted); padding: 0.4rem; border-radius: 0.4rem; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; }
+              .copy-btn:hover { background: #ffffff10; color: var(--accent); border-color: var(--accent); }
+              .copy-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+              .copy-btn svg { width: 1.1rem; height: 1.1rem; }
             </style>
           </head>
           <body>
@@ -912,12 +916,37 @@ def index(full_path: str):
               <p>The dashboard UI build is not found. Run the following to generate it:</p>
               <div class="cmd-box">
                 <span class="cmd-label">Quick Build</span>
-                <code>cd .ldash/ui
+                <button class="copy-btn" id="copyBtn" aria-label="Copy build commands">
+                  <svg id="copyIcon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75" /></svg>
+                  <svg id="checkIcon" style="display:none" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>
+                </button>
+                <code id="cmdCode">cd .ldash/ui
 pnpm install
 pnpm run build</code>
               </div>
               <div class="footer">Waiting for production artifacts in .ldash/ui/dist</div>
             </div>
+            <script>
+              const copyBtn = document.getElementById('copyBtn');
+              const copyIcon = document.getElementById('copyIcon');
+              const checkIcon = document.getElementById('checkIcon');
+              const cmdCode = document.getElementById('cmdCode');
+
+              copyBtn.addEventListener('click', () => {
+                navigator.clipboard.writeText(cmdCode.innerText).then(() => {
+                  copyIcon.style.display = 'none';
+                  checkIcon.style.display = 'block';
+                  copyBtn.style.color = 'var(--accent)';
+                  copyBtn.style.borderColor = 'var(--accent)';
+                  setTimeout(() => {
+                    copyIcon.style.display = 'block';
+                    checkIcon.style.display = 'none';
+                    copyBtn.style.color = '';
+                    copyBtn.style.borderColor = '';
+                  }, 2000);
+                });
+              });
+            </script>
           </body>
         </html>
         """
