feat: AI panel UI redesign — centered chat, unified attach button, merged header

ijbo · ijbo · commit 3eed508a410c · 2026-04-01T21:21:59.000+09:00
- Centered initial state (Claude-like welcome with input + model selector in middle)
- Merged Attach File + Screenshot buttons into single '+' dropdown menu
- Merged header bar and status bar into one compact header
- Fixed: download progress bar stuck at 96% after model load
- Fixed: API key error link targeting removed standalone bar
diff --git a/README.md b/README.md
@@ -544,6 +544,7 @@ TextAgent has undergone significant evolution since its inception. What started
 
 | Date | Commits | Feature / Update |
 |------|---------|-----------------:|
+| **2026-04-01** | | 🎨 **AI Panel UI Redesign** — centered initial chat state (Claude-like welcome with input + model selector clustered in middle, transitions to bottom-pinned on first message via CSS `:has(.ai-welcome-message)`); merged separate Attach File (paperclip) and Screenshot (camera) buttons into single `+` button with unified dropdown menu (Attach File / Capture Page / Capture Screen / Upload Image, `+` rotates to `×` when open); merged header bar and status bar into single compact header (status text inline below title, download progress bar still standalone); fixed download progress bar stuck at 96% after model load |
 | **2026-03-31** | | 📷 **Screenshot to AI** — new 📷 camera button in the AI chat input bar with three capture modes: Capture Page (`html2canvas` full-page snapshot, AI panel hidden during capture), Capture Screen (`getDisplayMedia` screen-share with frame extraction from a hidden DOM-attached video element), and Upload Image (file picker); captured image auto-injected into `pendingAttachments` and sent to AI for analysis; fixed black-screen capture bug (video must be in DOM for GPU decoder, wait for `timeupdate` event not just `requestAnimationFrame`); self-healing button injection via `injectButtonIfMissing()` with 2s fallback poll; CSS-independent dropdown via inline `style.display` toggling; vision model warning toast; `js/ai-screenshot.js` new module (~300 lines) + `css/ai-panel.css` styles + `js/modal-templates.js` template update + `src/main.js` registration |
 | **2026-03-31** | | 🦀 **OpenClaw Integration Blog Post** — published detailed technical post (`CHANGELOG-openclaw-textagent-integration.md`) documenting how OpenClaw runs natively inside TextAgent's Docker-based Agent Flow; covers `AGENT_CLI_MAP`, native CLI invocation (`openclaw agent --message ... --json`), API key forwarding, structured JSON response parsing, multi-step context chaining, cloud mode via GitHub Codespaces, and security boundaries |
 | **2026-03-31** | | 🤖 **Qwen 3.6 Plus Preview via OpenRouter** — added `qwen/qwen3.6-plus-preview:free` (Alibaba) as a new free cloud model; appears in the model selector as "Qwen 3.6 Plus Preview · Alibaba · Free · via OpenRouter"; reuses existing `ai-worker-openrouter.js` and shared OpenRouter API key |
diff --git a/changelogs/CHANGELOG-ai-panel-redesign.md b/changelogs/CHANGELOG-ai-panel-redesign.md
@@ -0,0 +1,53 @@
+# AI Panel UI Redesign — Centered Chat, Unified Attach Button & Compact Header
+
+- Welcome message + input box + model selector now centered together (Claude-like initial state)
+- Input transitions to bottom-pinned layout once a conversation begins
+- Quick actions hidden in initial welcome state for a cleaner first impression
+- Merged separate "Attach File" (paperclip) and "Screenshot" (camera) buttons into a single "+" button
+- Unified dropdown menu with 4 options: Attach File, Capture Page, Capture Screen, Upload Image
+- "+" icon rotates 45° to "×" when menu is open
+- Merged AI panel header and status bar into a single compact header
+- Status text (e.g. "● Qwen 3.5 4B · Local (WEBGPU)") now shown inline below the title within the header
+- Download progress bar still uses standalone bar during active downloads
+- Fixed: Download progress bar stuck at 96% after model loaded (was never removed in new inline status flow)
+- Fixed: Reverted accidental duplicate CSS rules in styles.css from browser subagent
+- Fixed: API key error link now targets inline header status instead of removed standalone bar
+
+---
+
+## Summary
+Comprehensive UI redesign of the AI Assistant panel to create a more modern, Claude-like experience. Three major changes: centered initial state, unified attachment button, and compact merged header — reducing visual clutter and reclaiming vertical space.
+
+---
+
+## 1. Centered Initial State (Claude-like Welcome)
+**Files:** `css/ai-panel.css`
+**What:** Added CSS rules using `.ai-panel:has(.ai-welcome-message)` to split flex space equally between `.ai-chat-area` (flex: 1 1 0, justify-content: flex-end) and `.ai-input-area` (flex: 1 1 0, justify-content: flex-start). Both push their content toward each other, creating a centered cluster. Quick actions are hidden via `display: none`. Model selector is shown below the input with `order: 1`. Added smooth `transition` on input area properties. Mobile overrides added for safe-area insets and full-width input.
+**Impact:** Users see a clean, modern welcome screen with the greeting, input box, and model selector centered together — similar to Claude and ChatGPT's initial states. Once a message is sent, the layout transitions smoothly to the traditional bottom-pinned chat layout.
+
+## 2. Unified Attach + Screenshot Button
+**Files:** `js/modal-templates.js`, `js/ai-chat.js`, `js/ai-screenshot.js`, `css/ai-panel.css`
+**What:** Replaced two separate buttons (paperclip for files, camera for screenshots) with a single `+` button (`bi-plus-lg`) wrapped in `.ai-attach-wrapper`. The button toggles a unified `#ai-attach-menu` dropdown containing all four options: Attach File, Capture Page, Capture Screen, Upload Image. Updated `ai-chat.js` to toggle the menu on click and handle the "Attach File" item. Updated `ai-screenshot.js` to reference `#ai-attach-menu` instead of old `#ai-screenshot-menu`, and simplified the self-heal injection. Removed the old `-45deg` paperclip rotation from CSS and added a `45deg` rotation when menu is active.
+**Impact:** Cleaner input bar with one button instead of two. All attachment/capture options accessible from a single, intuitive menu. The "+" → "×" rotation provides clear visual feedback.
+
+## 3. Merged Header + Status Bar
+**Files:** `js/modal-templates.js`, `js/ai-assistant.js`, `css/ai-panel.css`
+**What:** Added `.ai-panel-title-group` and `.ai-panel-title-row` containers inside the header to create a two-line layout. Added `#ai-header-status` div for inline status text. Modified `addAiStatusBar()` in `ai-assistant.js` to inject text into this inline container instead of creating a standalone `<div>`. The standalone `.ai-status-bar` is now `display: none` by default, with `.downloading` overriding to `display: flex` for active download progress. When status transitions to `ready` or `error`, all standalone bars are removed.
+**Impact:** The header and status bar are merged into a single compact bar, saving ~30px of vertical space. Model status is visible at a glance without a separate row.
+
+## 4. Bug Fix: Download Progress Bar Stuck
+**Files:** `js/ai-assistant.js`
+**What:** The original fix only removed `.ai-status-bar:not(.downloading)`, so the download progress bar (which has `.downloading` class) was never cleaned up when the model finished loading. Updated to remove all standalone bars when status becomes `ready` or `error`, while preserving them during `loading` updates.
+**Impact:** Download progress bar now properly disappears when model loading completes.
+
+---
+
+## Files Changed (5 total)
+
+| File | Lines Changed | Type |
+|------|:---:|------|
+| `css/ai-panel.css` | +136 −3 | Centered state, unified button, merged header CSS |
+| `js/ai-assistant.js` | +16 −14 | Inline status bar, download bar cleanup fix |
+| `js/ai-chat.js` | +29 −5 | Unified attach menu toggle + file picker handler |
+| `js/ai-screenshot.js` | +24 −42 | Updated for merged menu, simplified self-heal |
+| `js/modal-templates.js` | +18 −13 | Unified attach button HTML, header restructure |
diff --git a/css/ai-panel.css b/css/ai-panel.css
@@ -122,10 +122,11 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 14px 18px;
+  padding: 10px 18px;
   border-bottom: 1px solid var(--border-color);
   background: var(--header-bg);
   flex-shrink: 0;
+  min-height: 0;
 }
 
 .ai-panel-title {
@@ -135,14 +136,50 @@
   font-weight: 600;
   font-size: 15px;
   color: var(--text-color);
+  min-width: 0;
+  overflow: hidden;
 }
 
-.ai-panel-title i {
+.ai-panel-title > i {
   font-size: 18px;
   background: linear-gradient(135deg, #667eea, #764ba2);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
+  flex-shrink: 0;
+}
+
+.ai-panel-title-group {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+}
+
+.ai-panel-title-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* Inline status (merged into header) */
+.ai-header-status {
+  font-size: 11px;
+  font-weight: 400;
+  color: var(--text-color);
+  opacity: 0.6;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-height: 14px;
+  transition: opacity 0.2s;
+}
+
+.ai-header-status:empty {
+  display: none;
 }
 
 .ai-badge {
@@ -164,6 +201,7 @@
   display: flex;
   align-items: center;
   gap: 4px;
+  flex-shrink: 0;
 }
 
 /* Input options row (below textarea) */
@@ -317,6 +355,66 @@
   display: flex;
   flex-direction: column;
   gap: 12px;
+  justify-content: center;
+  align-items: center;
+  min-height: 0;
+  transition: justify-content 0.3s ease, align-items 0.3s ease;
+}
+
+/* When messages exist, switch to top-aligned scrollable conversation */
+.ai-chat-area:has(.ai-message) {
+  justify-content: flex-start;
+  align-items: stretch;
+}
+
+/* ========================================
+   CENTERED INITIAL STATE (Claude-like)
+   When welcome message is showing, center
+   the greeting + input together in the panel
+   ======================================== */
+
+/* Both areas split remaining flex space equally —
+   chat pushes content down, input pushes content up,
+   so they meet in the center */
+.ai-panel:has(.ai-welcome-message) .ai-chat-area {
+  flex: 1 1 0;
+  justify-content: flex-end;
+  align-items: center;
+  padding-bottom: 4px;
+  overflow-y: hidden;
+}
+
+.ai-panel:has(.ai-welcome-message) .ai-input-area {
+  flex: 1 1 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  border-top: none;
+  background: transparent;
+  padding-top: 8px;
+  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Constrain input children width within centered area */
+.ai-panel:has(.ai-welcome-message) .ai-input-area > .ai-model-selector,
+.ai-panel:has(.ai-welcome-message) .ai-input-area > .ai-attachments-strip,
+.ai-panel:has(.ai-welcome-message) .ai-input-area > .ai-input-wrapper {
+  max-width: 440px;
+  width: 100%;
+}
+
+/* Style the model selector in centered state */
+.ai-panel:has(.ai-welcome-message) .ai-input-area > .ai-model-selector {
+  max-width: 440px;
+  width: 100%;
+  order: 1; /* Push below input wrapper */
+  margin-top: 8px;
+}
+
+/* Also hide quick actions in initial state for cleaner look */
+.ai-panel:has(.ai-welcome-message) .ai-quick-actions {
+  display: none;
 }
 
 .ai-chat-area::-webkit-scrollbar {
@@ -557,6 +655,7 @@
   border-top: 1px solid var(--border-color);
   background: var(--header-bg);
   flex-shrink: 0;
+  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 /* --- Model Selector --- */
@@ -865,7 +964,12 @@
 
 .ai-attach-button i {
   font-size: 15px;
-  transform: rotate(-45deg);
+  transition: transform 0.2s ease;
+}
+
+/* Rotate '+' to 'x' when menu is open */
+.ai-attach-wrapper:has(.ai-screenshot-menu.active) .ai-attach-button i {
+  transform: rotate(45deg);
 }
 
 /* --- Attachments Preview Strip --- */
@@ -1531,6 +1635,7 @@
   /* Compact input area on mobile */
   .ai-input-area {
     padding: 8px 10px;
+    padding-bottom: max(8px, env(safe-area-inset-bottom));
   }
 
   /* --- Merge model selector into chat bar on mobile --- */
@@ -1641,15 +1746,35 @@
   .ai-action-chip i {
     font-size: 11px;
   }
+
+  /* Mobile centered initial state overrides */
+  .ai-panel:has(.ai-welcome-message) .ai-input-area {
+    padding: 8px 10px;
+    padding-bottom: max(8px, env(safe-area-inset-bottom));
+  }
+
+  .ai-panel:has(.ai-welcome-message) .ai-input-area > .ai-input-wrapper {
+    max-width: 100%;
+  }
+
+  /* Reset model selector absolute positioning in centered state */
+  .ai-panel:has(.ai-welcome-message) .ai-model-selector {
+    position: relative;
+    left: auto;
+    bottom: auto;
+    right: auto;
+  }
 }
 
-/* --- AI Status Indicator (in-panel) --- */
+/* --- AI Status Indicator (in-panel) ---
+   Regular status now shown inline in header.
+   Download progress bar still uses standalone bar. */
 .ai-status-bar {
   padding: 8px 16px;
   font-size: 12px;
   color: var(--text-color);
   opacity: 0.6;
-  display: flex;
+  display: none; /* Hidden by default — only shown for downloads */
   align-items: center;
   gap: 6px;
   border-bottom: 1px solid var(--border-color);
@@ -1658,6 +1783,7 @@
 }
 
 .ai-status-bar.downloading {
+  display: flex; /* Override default display:none for downloads */
   opacity: 1;
   flex-direction: column;
   align-items: stretch;
diff --git a/js/ai-assistant.js b/js/ai-assistant.js
@@ -942,9 +942,9 @@
             if (onError) { onError(msg.message); onError = null; }
             else {
               addAiStatusBar('error', msg.message);
-              // Show clickable "Change API Key" link in status bar for auth errors
+              // Show clickable "Change API Key" link in header status for auth errors
               if (msg.message.includes('API key') || msg.message.includes('Invalid') || msg.message.includes('401')) {
-                const bar = aiPanel.querySelector('.ai-status-bar');
+                const bar = document.getElementById('ai-header-status');
                 if (bar) {
                   const link = document.createElement('a');
                   link.href = '#';
@@ -986,19 +986,19 @@
 
   // --- Send to AI (routes to active model's worker) ---
 
-  // --- Status Bar ---
+  // --- Status Bar (inline in header) ---
   function addAiStatusBar(status, text) {
-    // Remove existing status bar
-    const existing = aiPanel.querySelector('.ai-status-bar');
-    if (existing) existing.remove();
-
-    const bar = document.createElement('div');
-    bar.className = 'ai-status-bar';
-    bar.innerHTML = `<span class="ai-status-dot ${status}"></span> ${text}`;
-
-    // Insert after header
-    const header = aiPanel.querySelector('.ai-panel-header');
-    header.insertAdjacentElement('afterend', bar);
+    // Update the inline status inside the header
+    const headerStatus = document.getElementById('ai-header-status');
+    if (headerStatus) {
+      headerStatus.innerHTML = `<span class="ai-status-dot ${status}"></span> ${text}`;
+    }
+    // Remove the standalone download progress bar when model is ready or errored
+    // (keep it alive during 'loading' so the progress bar continues updating)
+    if (status === 'ready' || status === 'error') {
+      const allBars = aiPanel.querySelectorAll('.ai-status-bar');
+      allBars.forEach(bar => bar.remove());
+    }
   }
 
   // Show inline consent bar for Qwen download (falls through to popup)
diff --git a/js/ai-chat.js b/js/ai-chat.js
@@ -1086,11 +1086,35 @@
         });
     }
 
-    // --- Attach Button ---
-    if (aiAttachBtn && aiFileInput) {
-        aiAttachBtn.addEventListener('click', function () {
-            aiFileInput.click();
+    // --- Unified Attach Button (merged attach + screenshot) ---
+    if (aiAttachBtn) {
+        aiAttachBtn.addEventListener('click', function (e) {
+            e.stopPropagation();
+            var menu = document.getElementById('ai-attach-menu');
+            if (menu) {
+                var isOpen = menu.classList.contains('active');
+                menu.style.display = isOpen ? 'none' : 'flex';
+                menu.classList.toggle('active', !isOpen);
+            }
         });
+    }
+
+    // "Attach File" menu item opens file picker
+    document.addEventListener('click', function (e) {
+        if (e.target.closest('#ai-attach-file-item')) {
+            var menu = document.getElementById('ai-attach-menu');
+            if (menu) { menu.style.display = 'none'; menu.classList.remove('active'); }
+            if (aiFileInput) aiFileInput.click();
+            return;
+        }
+        // Close menu on outside click (but not if clicking the toggle button itself)
+        if (!e.target.closest('#ai-attach-menu') && !e.target.closest('#ai-attach-btn')) {
+            var menu2 = document.getElementById('ai-attach-menu');
+            if (menu2) { menu2.style.display = 'none'; menu2.classList.remove('active'); }
+        }
+    });
+
+    if (aiFileInput) {
         aiFileInput.addEventListener('change', function () {
             if (aiFileInput.files && aiFileInput.files.length > 0) {
                 addFilesToPending(aiFileInput.files);
diff --git a/js/ai-screenshot.js b/js/ai-screenshot.js
diff --git a/js/modal-templates.js b/js/modal-templates.js
