From 3429b7753a2a192e43b9ca7362a5a8b665883929 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Fri, 8 May 2026 09:42:38 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20"Copy=20to=20Cl?=
 =?UTF-8?q?ipboard"=20utility=20to=20OS*2=20code=20blocks?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Implement a "Copy" button for the `.code-window` in `os2.html`
- Use Tailwind's `group` and `group-hover` for contextual visibility
- Ensure keyboard accessibility with `focus:opacity-100` and `aria-label`
- Provide immediate visual feedback (text change and color swap to lime-500)
- Robust clipboard support with a fallback for non-HTTPS/legacy environments

Co-authored-by: rtech-technologies <254326487+rtech-technologies@users.noreply.github.com>
---
 .jules/palette.md |  3 +++
 os2.html          | 39 ++++++++++++++++++++++++++++++++++++++-
 2 files changed, 41 insertions(+), 1 deletion(-)
 create mode 100644 .jules/palette.md

diff --git a/.jules/palette.md b/.jules/palette.md
new file mode 100644
index 0000000..2557487
--- /dev/null
+++ b/.jules/palette.md
@@ -0,0 +1,3 @@
+## 2026-05-22 - Code Block Copy Utility
+**Learning:** For terminal-inspired UIs, code block interaction is a high-value micro-UX. Using Tailwind's `group` and `group-hover` allows for a clean default UI that stays interactive. Providing immediate visual feedback (text change + color swap) is more effective than a passive "toast" notification in this aesthetic.
+**Action:** Use `opacity-0 group-hover:opacity-100 focus:opacity-100` for contextual actions. Always provide a fallback for `navigator.clipboard` using a temporary `textarea` and `execCommand('copy')` to ensure reliability in all environments.
diff --git a/os2.html b/os2.html
index fb439ec..1fe89e1 100644
--- a/os2.html
+++ b/os2.html
@@ -84,7 +84,14 @@ <h4 class="text-lime-500 font-black text-xs uppercase mb-2">The Zest UI</h4>
                         </div>
                     </div>
                 </div>
-                <div class="code-window">
+                <div class="code-window group">
+                    <button
+                        onclick="copyCode(this)"
+                        class="absolute top-4 right-4 px-3 py-1 bg-slate-800 text-[10px] font-black uppercase tracking-widest text-slate-400 hover:text-white border border-slate-700 opacity-0 group-hover:opacity-100 focus:opacity-100 transition-all z-10"
+                        aria-label="Copy code to clipboard"
+                    >
+                        Copy
+                    </button>
                     <pre class="text-lime-500 text-xs leading-loose">
 ; OS*2 SYSTEM_INIT
 move rdi 10          ; ALLOC_SOVEREIGNTY
@@ -148,6 +155,36 @@ <h4 class="text-[10px] font-black text-slate-400 uppercase mb-6 tracking-widest"
     </footer>
 
     <script>
+        function copyCode(btn) {
+            const code = btn.nextElementSibling.innerText;
+            const originalText = btn.innerText;
+
+            const handleSuccess = () => {
+                btn.innerText = "Copied!";
+                btn.classList.add('!bg-lime-500', '!text-black', '!border-lime-500');
+                setTimeout(() => {
+                    btn.innerText = originalText;
+                    btn.classList.remove('!bg-lime-500', '!text-black', '!border-lime-500');
+                }, 2000);
+            };
+
+            if (navigator.clipboard && navigator.clipboard.writeText) {
+                navigator.clipboard.writeText(code).then(handleSuccess);
+            } else {
+                const textArea = document.createElement("textarea");
+                textArea.value = code;
+                document.body.appendChild(textArea);
+                textArea.select();
+                try {
+                    document.execCommand('copy');
+                    handleSuccess();
+                } catch (err) {
+                    console.error('Fallback copy failed', err);
+                }
+                document.body.removeChild(textArea);
+            }
+        }
+
         async function checkAvailability() {
             const btn = document.getElementById('download-btn');
             const status = document.getElementById('system-status');