Palette: Add interactive clear button for User ID input field

.jules/palette.md

@@ -33,3 +33,7 @@
 ## 2026-06-17 - [Context-Aware Keyboard Shortcuts]
 **Learning:** Global single-key shortcuts (e.g., 's' for "Save" or "Create") can severely degrade UX by interfering with text entry in form fields. Implementing a simple check for active elements like `INPUT` or `TEXTAREA` ensures shortcuts only trigger when the user is not actively typing.
 **Action:** Always wrap global keyboard listeners in a check for `document.activeElement.tagName` to prevent shortcut collision during data entry. Pair this with visual shortcuts hints (`<kbd>`) that are preserved even during asynchronous state changes.
+
+## 2026-08-21 - [Clear Input Button Layout and Initial State Synchronization]
+**Learning:** Adding an absolute-positioned clear button (`✕`) inside a text input container requires right padding (e.g., `padding: 8px 28px 8px 12px`) and `box-sizing: border-box` on the input element to prevent typed text from rendering beneath the icon. Additionally, visibility toggle handlers must execute both on input events and immediately on page load to handle pre-populated or browser-restored inputs.
+**Action:** Always add sufficient right padding to inputs with clear buttons and call the clear button state toggle logic on initialization.

src/server.ts

@@ -176,6 +176,27 @@ export const PRE_RENDERED_STYLES = `
         outline: 2px solid var(--primary);
         opacity: 1;
     }
+    #clear-user-id-btn {
+        display: none;
+        position: absolute;
+        right: 8px;
+        top: 50%;
+        transform: translateY(-50%);
+        background: none;
+        border: none;
+        color: var(--text-color);
+        cursor: pointer;
+        padding: 4px;
+        opacity: 0.7;
+        font-size: 0.875rem;
+        line-height: 1;
+        z-index: 2;
+    }
+    #clear-user-id-btn:hover { opacity: 1; }
+    #clear-user-id-btn:focus-visible {
+        outline: 2px solid var(--primary);
+        border-radius: 4px;
+    }
     .theme-icon {
         transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
         display: inline-block;