From 8e1c739a605fc56c3424a6801912b6faa59daf35 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Wed, 13 May 2026 09:21:24 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20Copy=20Code=20u?=
 =?UTF-8?q?tility=20and=20improve=20button=20accessibility?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Added a 'Copy to Clipboard' button to the .code-window in os2.html with success state feedback and fallback.
- Improved color contrast for .btn-pending from #475569 to #a1a1aa to meet WCAG AA standards.
- Added .jules/palette.md with critical UX and accessibility learnings.

Co-authored-by: rtech-technologies <254326487+rtech-technologies@users.noreply.github.com>
---
 .jules/palette.md |  7 +++++++
 os2.html          | 45 +++++++++++++++++++++++++++++++++++++++++++--
 2 files changed, 50 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..853bdff
--- /dev/null
+++ b/.jules/palette.md
@@ -0,0 +1,7 @@
+## 2026-05-13 - Contrast Standards for Pending States
+**Learning:** Text elements in "pending" or "disabled" states often fall below WCAG AA contrast standards (4.5:1) when using default slate/zinc shades on dark backgrounds. In this project, the `#475569` color on `#020617` had a contrast of ~2.8:1, which is inaccessible.
+**Action:** Always verify contrast ratios for non-interactive or pending states. Use `#a1a1aa` (Zinc-400) or lighter for text on near-black backgrounds to ensure accessibility.
+
+## 2026-05-13 - Clipboard Verification in Playwright
+**Learning:** Testing clipboard operations in Playwright (Python sync_api) requires explicitly granting `clipboard-read` and `clipboard-write` permissions to the browser context. Without these, `navigator.clipboard` calls may fail or hang in the test environment.
+**Action:** Use `context.grant_permissions(['clipboard-read', 'clipboard-write'])` when testing copy-to-clipboard features.
diff --git a/os2.html b/os2.html
index fb439ec..8a8fe31 100644
--- a/os2.html
+++ b/os2.html
@@ -27,7 +27,7 @@
         .btn-ready { background: var(--lime); color: #000; cursor: pointer; border: 1px solid var(--lime); }
         .btn-ready:hover { background: #fff; transform: translateY(-3px); box-shadow: 0 10px 20px rgba(163, 230, 53, 0.2); }
         
-        .btn-pending { background: transparent; color: #475569; cursor: not-allowed; border: 1px solid #1e293b; }
+        .btn-pending { background: transparent; color: #a1a1aa; cursor: not-allowed; border: 1px solid #1e293b; }
 
         .code-window { background: #000; border: 1px solid #334155; padding: 2rem; position: relative; }
         .code-window::before { content: "TERMINAL_FEED"; position: absolute; top: -10px; left: 20px; background: #000; padding: 0 10px; font-size: 10px; color: var(--lime); font-weight: 800; }
@@ -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 opacity-0 group-hover:opacity-100 focus:opacity-100 transition-all border border-lime-500 text-lime-500 px-3 py-1 text-[10px] font-black uppercase hover:bg-lime-500 hover:text-black"
+                        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,40 @@ <h4 class="text-[10px] font-black text-slate-400 uppercase mb-6 tracking-widest"
     </footer>
 
     <script>
+        async function copyCode(btn) {
+            const pre = btn.parentElement.querySelector('pre');
+            const code = pre.innerText.trim();
+
+            try {
+                await navigator.clipboard.writeText(code);
+            } catch (err) {
+                // Fallback for older browsers or non-HTTPS
+                const textArea = document.createElement("textarea");
+                textArea.value = code;
+                document.body.appendChild(textArea);
+                textArea.select();
+                try {
+                    document.execCommand('copy');
+                } catch (fallbackErr) {
+                    console.error('Fallback copy failed', fallbackErr);
+                }
+                document.body.removeChild(textArea);
+            }
+
+            const originalText = btn.innerText;
+            const originalClasses = btn.className;
+
+            btn.innerText = "COPIED!";
+            btn.className = "absolute top-4 right-4 transition-all bg-lime-500 text-black px-3 py-1 text-[10px] font-black uppercase";
+            btn.setAttribute('aria-label', 'Code copied successfully');
+
+            setTimeout(() => {
+                btn.innerText = originalText;
+                btn.className = originalClasses;
+                btn.setAttribute('aria-label', 'Copy code to clipboard');
+            }, 2000);
+        }
+
         async function checkAvailability() {
             const btn = document.getElementById('download-btn');
             const status = document.getElementById('system-status');