claude-simple 0.2.4 → 0.2.5

package/package.json

@@ -1,15 +1,19 @@
 {
   "name": "claude-simple",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "type": "module",
   "bin": {
     "claude-simple": "server.js",
-    "claude-simple-client": "client.js"
+    "claude-simple-client": "client.js",
+    "claude-simple-edge": "bin/edge-ctl.js",
+    "claude-edge": "bin/edge-ctl.js",
+    "edge-daemon": "bin/edge-ctl.js"
   },
   "files": [
     "server.js",
     "client.js",
     "gateway.js",
+    "bin",
     "src",
     "dist",
     "public"

package/public/app.js

@@ -11,6 +11,7 @@ import { initImagePaste } from './chat.js';
 import { initMetaAgent } from './agent-panel.js';
 import { initRouter, applyInitialRoute, parseHashPath } from './router.js';
 import { initPwa } from './pwa.js';
+import { initMobileChrome } from './mobile.js';
 
 function markBootReady() {
   const root = document.documentElement;
@@ -28,6 +29,7 @@ const restoreSession = shouldRestoreSessionOnBoot() || !!(ctx.token && deepLink?
 
 // 1. Build DOM (welcome already suppressed via html.boot-restore CSS when restoring)
 initShell({ restoreSession });
+initMobileChrome();
 
 // 2. Feature panels
 initChat();
@@ -85,8 +87,16 @@ initRouter(resumeSession, switchTab);
     }
   } else {
     clearBootRestore();
-    await initAuth();
-    markBootReady();
+    try {
+      await initAuth();
+    } catch (e) {
+      // A failed status probe must never leave the installed app with its
+      // whole UI hidden behind boot-pending. initAuth normally handles
+      // connection failures itself; this is the last-resort guard.
+      console.error('[boot auth]', e);
+    } finally {
+      markBootReady();
+    }
   }
 })();
 

package/public/chat.js

@@ -725,7 +725,7 @@ export function sendMessage() {
   isProcessing.value = true;
   syncWakeLock();
   const now = Date.now();
-  if (text.startsWith('!')) {
+  if (isShellInput(text)) {
     appendMsg('shell', '$ Shell', text.slice(1).trim(), { ts: now });
     // Typed control plane (legacy shell-command still accepted server-side)
     const ok = sendWs({
@@ -778,7 +778,7 @@ export function newSession() {
 
 // ── Input helpers ─────────────────────────────────────────────────────────────
 function updateInputMode(value) {
-  const isShell = value.startsWith('!');
+  const isShell = isShellInput(value);
   const input = $('chat-input'), btn = $('send-btn');
   if (!input || !btn) return;
   input.classList.toggle('textarea-warning', isShell);
@@ -787,15 +787,26 @@ function updateInputMode(value) {
   btn.classList.toggle('btn-primary', !isShell);
   btn.textContent = isShell ? 'Run' : 'Send';
   const label = AGENT_LABELS[currentAgent.peek()] || 'agent';
-  input.placeholder = isShell ? 'Shell command (without !)…' : `Ask ${label}… or !cmd for shell`;
+  const compact = typeof window !== 'undefined' && window.matchMedia('(max-width: 640px)').matches;
+  if (isShell) {
+    input.placeholder = compact ? 'Shell 命令…' : 'Shell command (without !)…';
+  } else {
+    input.placeholder = compact ? `问 ${label}…` : `Ask ${label}… or !cmd for shell`;
+  }
+}
+
+/** `![img](path)` is an attachment reference, not a shell command. */
+function isShellInput(value) {
+  const text = String(value || '').trimStart();
+  return text.startsWith('!') && !/^!\[[^\]]*\]\([^)]+\)/.test(text);
 }
 
 function chatInputMaxHeight() {
   // Keep in sync with #chat-input max-height in style.css (mobile vs desktop).
   if (typeof window !== 'undefined' && window.matchMedia('(max-width: 640px)').matches) {
-    return 96;
+    return 72;
   }
-  return 140;
+  return 72;
 }
 
 function autoResize(el) {
@@ -908,16 +919,17 @@ let chatDropBound = false;
 
 async function uploadChatBlob(blob, filename) {
   const name = filename || `upload-${Date.now()}`;
+  const uploadBlob = await normalizeImageBlob(blob, name);
   const headers = authHeaders({ 'x-filename': name });
   delete headers['Content-Type'];
   // Prefer file MIME so hub base64-encodes binary uploads correctly.
-  if (blob?.type && !headers['Content-Type'] && !headers['content-type']) {
-    headers['Content-Type'] = blob.type;
+  if (uploadBlob?.type && !headers['Content-Type'] && !headers['content-type']) {
+    headers['Content-Type'] = uploadBlob.type;
   }
   const res = await fetch('/api/upload-image', {
     method: 'POST',
     headers,
-    body: blob,
+    body: uploadBlob,
   });
   if (!res.ok) {
     const err = await res.json().catch(() => ({}));
@@ -928,6 +940,46 @@ async function uploadChatBlob(blob, filename) {
   return data.path;
 }
 
+function imageMimeFromBytes(bytes, fallback) {
+  if (bytes.length >= 8 && bytes[0] === 0x89 && bytes[1] === 0x50 && bytes[2] === 0x4e && bytes[3] === 0x47) return 'image/png';
+  if (bytes.length >= 3 && bytes[0] === 0xff && bytes[1] === 0xd8 && bytes[2] === 0xff) return 'image/jpeg';
+  if (bytes.length >= 6 && String.fromCharCode(...bytes.slice(0, 6)) === 'GIF87a') return 'image/gif';
+  if (bytes.length >= 12 && String.fromCharCode(...bytes.slice(8, 12)) === 'WEBP') return 'image/webp';
+  return fallback || 'image/png';
+}
+
+/** Some iOS share sheets provide a .png whose bytes are Base64 text. Decode it once
+ * before both upload and preview, while leaving ordinary image files untouched. */
+async function normalizeImageBlob(blob, filename) {
+  if (!blob || !isImageFile({ type: blob.type, name: filename })) return blob;
+  let head;
+  try { head = (await blob.slice(0, 80).text()).trim(); } catch { return blob; }
+  // Avoid reading an entire multi-megabyte ordinary photo into a JS string.
+  if (!/^(?:data:image\/[a-z0-9.+-]+;base64,|iVBORw0KGgo|\/9j\/|R0lGOD|UklGR)/i.test(head)) return blob;
+  let text;
+  try { text = (await blob.text()).trim(); } catch { return blob; }
+  const dataUrl = /^data:image\/[a-z0-9.+-]+;base64,([a-z0-9+/=\s]+)$/i.exec(text);
+  const payload = dataUrl?.[1] || text;
+  if (!payload || !/^[a-z0-9+/=\s]+$/i.test(payload) || payload.length % 4 === 1) return blob;
+  try {
+    const binary = atob(payload.replace(/\s/g, ''));
+    const bytes = Uint8Array.from(binary, c => c.charCodeAt(0));
+    const mime = imageMimeFromBytes(bytes, blob.type);
+    // A valid Base64 string alone is not enough: only replace it when it decodes
+    // to an actual image signature.
+    if (mime === (blob.type || 'image/png') && !/^(image\/png|image\/jpeg|image\/gif|image\/webp)$/.test(mime)) return blob;
+    const isImage = bytes.length >= 3 && (
+      (bytes[0] === 0x89 && bytes[1] === 0x50 && bytes[2] === 0x4e)
+      || (bytes[0] === 0xff && bytes[1] === 0xd8 && bytes[2] === 0xff)
+      || String.fromCharCode(...bytes.slice(0, 6)) === 'GIF87a'
+      || String.fromCharCode(...bytes.slice(8, 12)) === 'WEBP'
+    );
+    return isImage ? new Blob([bytes], { type: mime }) : blob;
+  } catch {
+    return blob;
+  }
+}
+
 function insertAtCursor(ta, text) {
   if (!ta) return;
   const s = ta.selectionStart ?? ta.value.length;
@@ -989,11 +1041,12 @@ function renderAttachBar() {
 async function addChatAttachment(file) {
   if (!file) return;
   const name = file.name || `upload-${Date.now()}`;
-  const path = await uploadChatBlob(file, name);
+  const normalized = await normalizeImageBlob(file, name);
+  const path = await uploadChatBlob(normalized, name);
   const { ref, label, kind } = makeAttachRef(file, path);
   let previewUrl = '';
   if (kind === 'image') {
-    try { previewUrl = URL.createObjectURL(file); } catch { /* ignore */ }
+    try { previewUrl = URL.createObjectURL(normalized); } catch { /* ignore */ }
   }
   pendingAttachments.push({ path, ref, label, kind, name, previewUrl });
   renderAttachBar();
@@ -1098,8 +1151,8 @@ function appendTokenBar(text) {
   const msgs = $('messages');
   if (!msgs) return;
   msgs.insertAdjacentHTML('beforeend',
-    `<div class="flex items-center gap-1.5 px-1 py-0.5 text-[10px] font-mono text-base-content/30 select-none">
-       <span class="text-base-content/20">◈</span>${esc(text)}
+    `<div class="token-bar select-none">
+       <span class="token-bar-mark">◈</span><span class="token-bar-text">${esc(text)}</span>
      </div>`);
   stickBottom(msgs);
 }
@@ -1431,10 +1484,16 @@ export function initChat() {
 
   watch(chatDensity, () => applyChatDensity());
 
-  // Chat input: Enter = send, auto-resize, shell mode styling
+  // Chat input: ⌘/Ctrl+Enter = send. On phones, Enter sends (Shift+Enter newline).
   delegate.on('keydown', '#chat-input', e => {
-    const send = e.key === 'Enter' && (e.metaKey || e.ctrlKey);
-    if (send) { e.preventDefault(); sendMessage(); }
+    if (e.key !== 'Enter') return;
+    const combo = e.metaKey || e.ctrlKey;
+    const phone = window.matchMedia('(max-width: 640px)').matches && !e.shiftKey && !combo;
+    if (combo || phone) { e.preventDefault(); sendMessage(); }
+  });
+  delegate.on('submit', '#chat-form', e => {
+    e.preventDefault();
+    sendMessage();
   });
   delegate.on('input',   '#chat-input', (e, el) => { autoResize(el); updateInputMode(el.value); });
 

package/public/index.html

@@ -27,6 +27,24 @@
     html.boot-ready #root {
       visibility: visible !important;
     }
+    /* If a cached/incomplete module cannot start, do not leave a standalone
+       iOS/Android window as a featureless dark screen. */
+    #boot-fallback {
+      position: fixed;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 1.5rem;
+      background: #0f172a;
+      color: #e2e8f0;
+      font: 15px/1.5 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      text-align: center;
+    }
+    #boot-fallback-error { display: none; }
+    html.boot-ready #boot-fallback { display: none; }
+    html.boot-timeout #boot-fallback-loading { display: none; }
+    html.boot-timeout #boot-fallback-error { display: block; }
     /* Session deep-link: never show welcome calendar during boot */
     html.boot-restore #welcome {
       display: none !important;
@@ -45,7 +63,7 @@
       display: none !important;
     }
   </style>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover, interactive-widget=resizes-content">
   <meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">
   <meta name="theme-color" content="#0f172a">
   <meta name="color-scheme" content="dark light">
@@ -65,10 +83,22 @@
   <script src="https://cdn.jsdelivr.net/npm/marked@9/marked.min.js"></script>
   <link id="hljs-theme" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@highlightjs/cdn-assets@11/styles/github-dark.min.css">
   <script src="https://cdn.jsdelivr.net/npm/@highlightjs/cdn-assets@11/highlight.min.js"></script>
-  <link rel="stylesheet" href="style.css?v=ui-9">
+  <link rel="stylesheet" href="style.css?v=ui-10">
 </head>
 <body class="h-dvh overflow-hidden flex flex-col bg-base-100 text-base-content">
   <div id="root" class="flex flex-col flex-1 overflow-hidden"></div>
-  <script type="module" src="app.js?v=ui-9"></script>
+  <div id="boot-fallback" role="status" aria-live="polite">
+    <div id="boot-fallback-loading">正在打开 Agent UI…</div>
+    <div id="boot-fallback-error">应用未能完成加载。请确认网络和服务可用，然后刷新或从主屏幕重新打开。</div>
+  </div>
+  <script>
+    setTimeout(function () {
+      if (document.documentElement.classList.contains('boot-pending')
+        && !document.documentElement.classList.contains('boot-ready')) {
+        document.documentElement.classList.add('boot-timeout');
+      }
+    }, 10000);
+  </script>
+  <script type="module" src="app.js?v=ui-10"></script>
 </body>
 </html>

package/public/mobile.js

@@ -0,0 +1,72 @@
+// mobile.js — visual viewport (iOS keyboard) + isolate hidden form fields
+// Safari's accessory bar / "Not Secure" chrome cannot be painted over from the page.
+
+function setInert(el, on) {
+  if (!el) return;
+  if (on) el.setAttribute('inert', '');
+  else el.removeAttribute('inert');
+}
+
+function isHidden(el) {
+  if (!el) return true;
+  if (el.classList.contains('hidden')) return true;
+  const d = el.style.display;
+  return d === 'none';
+}
+
+/** Keep iOS form-assistant from tabbing through off-screen / hidden inputs. */
+export function syncFocusScope() {
+  const mobile = typeof window !== 'undefined'
+    && window.matchMedia('(max-width: 640px)').matches;
+
+  const sidebar = document.getElementById('sidebar');
+  if (sidebar) {
+    const open = !mobile || sidebar.classList.contains('open');
+    setInert(sidebar, !open);
+  }
+
+  setInert(document.getElementById('welcome'), isHidden(document.getElementById('welcome')));
+  setInert(document.getElementById('auth-screen'), isHidden(document.getElementById('auth-screen')));
+  setInert(document.getElementById('chat-opts'), isHidden(document.getElementById('chat-opts')));
+  setInert(document.getElementById('machine-picker'), isHidden(document.getElementById('machine-picker')));
+
+  for (const id of ['files', 'git', 'shell', 'memory']) {
+    const el = document.getElementById(`tab-${id}`);
+    setInert(el, isHidden(el));
+  }
+
+  const chat = document.getElementById('tab-chat');
+  if (chat) setInert(chat, isHidden(chat));
+}
+
+function applyVisualViewport() {
+  const vv = window.visualViewport;
+  const root = document.documentElement;
+  if (!vv) return;
+
+  const keyboardish = vv.height < window.innerHeight - 80;
+  root.classList.toggle('vv-keyboard', keyboardish);
+  root.style.setProperty('--vvh', `${Math.round(vv.height)}px`);
+  root.style.setProperty('--vv-top', `${Math.round(vv.offsetTop)}px`);
+}
+
+export function initMobileChrome() {
+  syncFocusScope();
+  applyVisualViewport();
+
+  const vv = window.visualViewport;
+  if (vv) {
+    vv.addEventListener('resize', applyVisualViewport);
+    vv.addEventListener('scroll', applyVisualViewport);
+  }
+  window.addEventListener('resize', () => {
+    applyVisualViewport();
+    syncFocusScope();
+  });
+  window.addEventListener('orientationchange', () => {
+    setTimeout(() => {
+      applyVisualViewport();
+      syncFocusScope();
+    }, 250);
+  });
+}

package/public/pwa.js

@@ -11,6 +11,24 @@ function isStandalone() {
   );
 }
 
+function isIpHost(host) {
+  const h = String(host || '').replace(/^\[|\]$/g, '');
+  if (/^\d{1,3}(\.\d{1,3}){3}$/.test(h)) return true;
+  // Bare IPv6 (no zone id)
+  if (h.includes(':') && /^[0-9a-f:]+$/i.test(h)) return true;
+  return false;
+}
+
+/** SW requires a trusted TLS cert. IP + self-signed HTTPS always fails fetch(sw.js). */
+function canRegisterSw() {
+  if (!('serviceWorker' in navigator)) return false;
+  if (!window.isSecureContext) return false;
+  const host = location.hostname;
+  if (host === 'localhost' || host === '127.0.0.1' || host === '::1') return true;
+  if (isIpHost(host)) return false;
+  return location.protocol === 'https:';
+}
+
 function showInstallButton() {
   document.getElementById('btn-pwa-install')?.classList.remove('hidden');
 }
@@ -40,7 +58,14 @@ export function initPwa() {
     requestAnimationFrame(() => showInstallButton());
   }
 
-  if (!('serviceWorker' in navigator)) return;
+  if (!canRegisterSw()) {
+    if ('serviceWorker' in navigator) {
+      navigator.serviceWorker.getRegistrations()
+        .then((regs) => regs.forEach((r) => r.unregister()))
+        .catch(() => {});
+    }
+    return;
+  }
 
   // Register after first paint so install doesn't compete with boot.
   const register = () => {
@@ -56,7 +81,12 @@ export function initPwa() {
           });
         });
       })
-      .catch((err) => console.warn('[pwa] SW register failed', err));
+      .catch(() => {
+        // Typical on self-signed / corporate MITM certs. App works without SW.
+        navigator.serviceWorker.getRegistrations()
+          .then((regs) => regs.forEach((r) => r.unregister()))
+          .catch(() => {});
+      });
   };
 
   if (document.readyState === 'complete') setTimeout(register, 0);

package/public/shell/boot.js

@@ -14,12 +14,14 @@ import {
   refreshMachinesList, hideMachinePicker, showMachinePicker,
   syncTopbarMachine, startMachinePolling,
 } from './hub.js';
+import { syncFocusScope } from '../mobile.js';
 
 export async function showApp(opts = {}) {
   $('auth-screen').style.display = 'none';
   const app = $('app');
   app.classList.remove('hidden');
   app.style.display = 'flex';
+  queueMicrotask(syncFocusScope);
 
   // Use probe result from boot when provided (avoid second /api/hub round-trip)
   let hub = opts.hub;

package/public/shell/hub.js

@@ -8,6 +8,7 @@ import { api, probeHub } from '../api.js';
 import { loadAllSessions, loadWorkspaces, loadAgentsMeta } from './session-list.js';
 import { loadSessionMetaMap } from './notes.js';
 import { loadMetaAgentBoot } from '../agent-panel.js';
+import { syncFocusScope } from '../mobile.js';
 // goHome imported dynamically in enterMachine to avoid circular deps
 
 export async function refreshMachinesList() {
@@ -54,6 +55,9 @@ export function showMachinePicker() {
   const el = $('machine-picker');
   if (!el) return;
   el.classList.remove('hidden');
+  // On phones hidden panels are inert so Safari's form assistant cannot tab
+  // into them. Re-enable this picker before its machine buttons are shown.
+  syncFocusScope();
   hubMachineReady.value = false;
   renderMachinePickerList();
   const status = $('machine-picker-status');
@@ -65,6 +69,7 @@ export function showMachinePicker() {
 
 export function hideMachinePicker() {
   $('machine-picker')?.classList.add('hidden');
+  syncFocusScope();
   hubMachineReady.value = true;
 }
 
@@ -191,4 +196,3 @@ export async function enterMachine(machineId, { forceReload = false } = {}) {
   await Promise.all([loadAllSessions(), loadWorkspaces(), loadSessionMetaMap(), loadAgentsMeta().catch(() => {})]);
   hubMachineReady.value = true;
 }
-

package/public/shell/layout.js

@@ -12,10 +12,19 @@ import { connectWS, clearMessages, appendSystemMsg, applyChatDensity } from '../
 import { refreshModelSelect } from './session-list.js';
 import { switchTab } from './session-nav.js';
 import { showMachinePicker } from './hub.js';
+import { syncFocusScope } from '../mobile.js';
 
 // ── Sidebar ───────────────────────────────────────────────────────────────────
-export function openSidebar()  { $('sidebar').classList.add('open');    $('sidebar-overlay').classList.remove('hidden'); }
-export function closeSidebar() { $('sidebar').classList.remove('open'); $('sidebar-overlay').classList.add('hidden'); }
+export function openSidebar()  {
+  $('sidebar').classList.add('open');
+  $('sidebar-overlay').classList.remove('hidden');
+  syncFocusScope();
+}
+export function closeSidebar() {
+  $('sidebar').classList.remove('open');
+  $('sidebar-overlay').classList.add('hidden');
+  syncFocusScope();
+}
 export function closeSidebarOnMobile() { if (window.innerWidth <= 640) closeSidebar(); }
 
 export function initSidebarToggle() {

package/public/shell/templates.js

@@ -7,6 +7,7 @@ export const AuthScreen = () => `
       <div class="card-body gap-3 p-8">
         <h1 class="text-xl font-bold">🤖 Agent UI</h1>
         <p id="auth-subtitle" class="text-sm text-base-content/60 mb-1">Claude · Codex · Grok</p>
+        <form id="auth-form" class="flex flex-col gap-3" autocomplete="on" action="#">
         <label class="form-control">
           <div class="label py-1"><span class="label-text text-xs uppercase tracking-wide">Username</span></div>
           <input id="auth-username" type="text" class="input input-bordered input-sm" placeholder="username" autocomplete="username">
@@ -15,7 +16,8 @@ export const AuthScreen = () => `
           <div class="label py-1"><span class="label-text text-xs uppercase tracking-wide">Password</span></div>
           <input id="auth-password" type="password" class="input input-bordered input-sm" placeholder="••••••" autocomplete="current-password">
         </label>
-        <button id="auth-btn" class="btn btn-primary btn-sm mt-1" data-mode="login">Sign In</button>
+        <button type="submit" id="auth-btn" class="btn btn-primary btn-sm mt-1" data-mode="login">Sign In</button>
+        </form>
         <div id="auth-error" class="alert alert-error text-xs py-2 hidden"></div>
       </div>
     </div>
@@ -72,8 +74,8 @@ export const AppShell = (opts = {}) => {
       <div class="flex gap-2 topbar-actions">
         <button id="btn-refresh-conn" class="btn btn-ghost btn-xs border border-base-300" title="重新连接并同步">↻</button>
         <button id="btn-pwa-install" class="btn btn-ghost btn-xs border border-base-300 hidden" title="安装到主屏幕">安装</button>
-        <button id="btn-meta-agent"  class="btn btn-ghost btn-xs border border-primary/40 text-primary" title="Meta Agent — 报告 / 问答 / VLM">✦ Agent</button>
-        <button id="btn-new-session" class="btn btn-ghost btn-xs border border-base-300">＋ New</button>
+        <button id="btn-meta-agent"  class="btn btn-ghost btn-xs border border-primary/40 text-primary" title="Meta Agent — 报告 / 问答 / VLM"><span class="hidden sm:inline">✦ Agent</span><span class="sm:hidden">✦</span></button>
+        <button id="btn-new-session" class="btn btn-ghost btn-xs border border-base-300" title="New session"><span class="hidden sm:inline">＋ New</span><span class="sm:hidden">＋</span></button>
         <button id="btn-theme"        class="btn btn-ghost btn-xs border border-base-300">🌙</button>
         <button id="btn-settings"    class="btn btn-ghost btn-xs border border-base-300">⚙️</button>
         <button id="btn-logout"      class="btn btn-ghost btn-xs border border-base-300">Sign out</button>
@@ -238,9 +240,10 @@ export const AppShell = (opts = {}) => {
               <button id="scroll-bottom-btn" class="scroll-fab hidden" title="Jump to bottom">↓</button>
             </div>
             <div id="permission-requests"></div>
+            <form id="chat-form" autocomplete="off" action="#" class="flex flex-col flex-shrink-0">
             <div id="chat-composer" class="flex flex-col border-t border-base-300 bg-base-200 flex-shrink-0">
               <div id="chat-attach-bar" class="hidden flex flex-wrap gap-1.5 px-3 pt-2"></div>
-              <div id="chat-opts" class="hidden flex items-center gap-1.5 px-3 pt-2 flex-wrap">
+              <div id="chat-opts" class="hidden flex items-center gap-1.5 px-3 pt-2 flex-wrap" inert>
                 <select id="sel-agent" class="select select-xs select-bordered text-xs font-semibold" title="Agent">
                   <option value="claude">Claude</option>
                   <option value="codex">Codex</option>
@@ -283,25 +286,37 @@ export const AppShell = (opts = {}) => {
                   <option value="full">density: full</option>
                 </select>
               </div>
-              <div id="composer-row" class="flex gap-2 items-end px-3 pt-2 pb-2">
-                <button type="button" id="btn-opts" class="btn btn-ghost btn-sm px-2 text-base-content/30 hover:text-base-content flex-shrink-0" title="Options">⚙</button>
-                <button type="button" id="btn-attach" class="btn btn-ghost btn-sm px-2 text-base-content/40 hover:text-base-content flex-shrink-0" title="添加图片 / 文件">📎</button>
-                <input type="file" id="chat-file-input" class="hidden" multiple accept="image/*,*/*">
-                <textarea id="chat-input" rows="1" placeholder="Ask… (📎 图片/文件 · !cmd · ⌘↵)"
-                  class="chat-input flex-1 text-sm resize-none leading-relaxed"
-                  name="agent-chat-message"
-                  autocomplete="off"
-                  autocorrect="off"
-                  autocapitalize="off"
-                  spellcheck="false"
-                  data-1p-ignore="true"
-                  data-lpignore="true"
-                  data-form-type="other"
-                  data-bwignore="true"></textarea>
-                <button type="button" id="send-btn" class="btn btn-primary btn-sm flex-shrink-0">Send</button>
-                <button type="button" id="stop-btn" class="btn btn-error btn-sm hidden flex-shrink-0">■</button>
+              <div id="composer-row" class="px-3 pt-2 pb-2">
+                <div class="composer-surface">
+                  <textarea id="chat-input" rows="1" placeholder="问点什么…"
+                    class="chat-input w-full text-sm resize-none leading-relaxed"
+                    name="q"
+                    enterkeyhint="send"
+                    inputmode="text"
+                    autocomplete="off"
+                    autocorrect="off"
+                    autocapitalize="sentences"
+                    spellcheck="false"
+                    data-1p-ignore="true"
+                    data-lpignore="true"
+                    data-form-type="other"
+                    data-bwignore="true"></textarea>
+                  <div class="composer-actions">
+                    <div class="composer-tools">
+                      <button type="button" id="btn-opts" class="composer-icon-btn" title="Options" aria-label="Options">⚙</button>
+                      <button type="button" id="btn-attach" class="composer-icon-btn" title="添加图片 / 文件" aria-label="添加图片 / 文件">📎</button>
+                      <input type="file" id="chat-file-input" class="hidden" multiple accept="image/*,*/*" tabindex="-1">
+                    </div>
+                    <div class="composer-submit">
+                      <span class="composer-hint">Enter 发送</span>
+                      <button type="submit" id="send-btn" class="composer-send-btn">Send</button>
+                      <button type="button" id="stop-btn" class="composer-stop-btn hidden" aria-label="停止生成">■</button>
+                    </div>
+                  </div>
+                </div>
               </div>
             </div>
+            </form>
           </div>
           <div id="tab-files" class="hidden flex-col flex-1 overflow-hidden">
             <div class="flex items-center gap-2 px-3 py-1.5 border-b border-base-300 flex-shrink-0 bg-base-200">