From d56ab2b6019064bcd20b371aa740eea2ac81e9f3 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sat, 9 May 2026 09:43:12 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Implement=20Copy=20ut?=
 =?UTF-8?q?ility=20for=20OS*2=20assembly=20code?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Added an "accessible" Copy button to the code window in os2.html.
- Implemented robust copy logic with navigator.clipboard and textarea fallback.
- Provided visual feedback by changing button text to "Copied!" and highlighting with Lime-500.
- Used Tailwind utility classes (group, group-hover, focus) for interaction.
- Verified functionality and accessibility via Playwright.
- Documented UX learning in .jules/palette.md.

Co-authored-by: rtech-technologies <254326487+rtech-technologies@users.noreply.github.com>
---
 .jules/palette.md |  7 +++++++
 os2.html          | 43 +++++++++++++++++++++++++++++++++++++++++--
 2 files changed, 48 insertions(+), 2 deletions(-)
 create mode 100644 .jules/palette.md

diff --git a/.jules/palette.md b/.jules/palette.md
new file mode 100644
index 0000000..aff43bd
--- /dev/null
+++ b/.jules/palette.md
@@ -0,0 +1,7 @@
+# Palette UX Journal
+
+This journal documents critical UX and accessibility learnings from the RTECH-TECHNOLOGIES project.
+
+## 2026-04-18 - Copy Utility with Fallback
+**Learning:** For terminal-style documentation, providing a copy utility significantly improves usability. However, relying solely on `navigator.clipboard` can fail in non-secure (HTTP) environments or older browsers. Implementing a hidden `textarea` fallback ensures the feature remains functional across all deployment scenarios common in industrial or internal testing environments.
+**Action:** Use the robust copy-to-clipboard pattern with a visual "Copied!" state to provide immediate feedback and ensure cross-environment compatibility.
diff --git a/os2.html b/os2.html
index fb439ec..8456b31 100644
--- a/os2.html
+++ b/os2.html
@@ -84,8 +84,9 @@ <h4 class="text-lime-500 font-black text-xs uppercase mb-2">The Zest UI</h4>
                         </div>
                     </div>
                 </div>
-                <div class="code-window">
-                    <pre class="text-lime-500 text-xs leading-loose">
+                <div class="code-window group">
+                    <button onclick="copyCode(this)" class="absolute top-4 right-4 bg-zinc-900 border border-slate-700 text-slate-500 px-3 py-1 text-[10px] font-black uppercase transition-all opacity-0 group-hover:opacity-100 focus:opacity-100 hover:border-lime-500 hover:text-lime-500" aria-label="Copy assembly code">Copy</button>
+                    <pre id="system-init-code" class="text-lime-500 text-xs leading-loose">
 ; OS*2 SYSTEM_INIT
 move rdi 10          ; ALLOC_SOVEREIGNTY
 push rdi             ; SECURE_REGISTER
@@ -147,7 +148,45 @@ <h4 class="text-[10px] font-black text-slate-400 uppercase mb-6 tracking-widest"
         </div>
     </footer>
 
+
     <script>
+        async function copyCode(btn) {
+            const code = document.getElementById('system-init-code').innerText.trim();
+            try {
+                if (navigator.clipboard && window.isSecureContext) {
+                    await navigator.clipboard.writeText(code);
+                } else {
+                    throw new Error('Fallback required');
+                }
+            } catch (err) {
+                try {
+                    const textArea = document.createElement("textarea");
+                    textArea.value = code;
+                    textArea.style.position = "fixed";
+                    textArea.style.left = "-9999px";
+                    textArea.style.top = "0";
+                    document.body.appendChild(textArea);
+                    textArea.focus();
+                    textArea.select();
+                    document.execCommand('copy');
+                    textArea.remove();
+                } catch (fallbackErr) {
+                    console.error('Failed to copy fallback: ', fallbackErr);
+                    return;
+                }
+            }
+
+            const originalText = btn.innerText;
+            btn.innerText = "Copied!";
+            const originalClasses = btn.className;
+            btn.className = "absolute top-4 right-4 bg-lime-500 border border-lime-500 text-black px-3 py-1 text-[10px] font-black uppercase transition-all opacity-100";
+
+            setTimeout(() => {
+                btn.innerText = originalText;
+                btn.className = originalClasses;
+            }, 2000);
+        }
+
         async function checkAvailability() {
             const btn = document.getElementById('download-btn');
             const status = document.getElementById('system-status');