claude-simple 0.2.3 → 0.2.5

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,8 +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-opts" class="hidden flex items-center gap-1.5 px-3 pt-2 flex-wrap">
+              <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" 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>
@@ -282,23 +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 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>
-                <textarea id="chat-input" rows="1" placeholder="Ask… (!cmd shell · ⌘↵ send)"
-                  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 id="send-btn" class="btn btn-primary btn-sm flex-shrink-0">Send</button>
-                <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">

package/public/shell.js

@@ -14,6 +14,7 @@ import {
 } from './state.js';
 import { api } from './api.js';
 import { promptPwaInstall } from './pwa.js';
+import { syncFocusScope } from './mobile.js';
 import { getLastSessionContext } from './shell/session-context.js';
 import {
   connectWS, clearMessages, appendMsg, appendSystemMsg, sendMessage, stopProcessing,
@@ -66,7 +67,8 @@ function showPwaInstallHelp() {
       <li>下滑找到并点 <strong>添加到主屏幕</strong></li>
       <li>确认名称后点 <strong>添加</strong></li>
     </ol>
-    <p class="text-xs text-base-content/50 mt-3">需用 <strong>Safari</strong> 打开本站；微信/Chrome 内置浏览器通常没有「添加到主屏幕」。</p>`;
+    <p class="text-xs text-base-content/50 mt-3">需用 <strong>Safari</strong> 打开本站；微信/Chrome 内置浏览器通常没有「添加到主屏幕」。</p>
+    <p class="text-xs text-warning/80 mt-2">当前若是 IP + 自签 HTTPS，Safari 仍会显示「不安全」。加到主屏幕可去掉浏览器外壳，但不能去掉系统输入条。彻底干净需要正式域名证书。</p>`;
   } else if (isAndroid) {
     body = `<ol class="list-decimal pl-4 space-y-2 text-sm text-base-content/80">
       <li>点右上角菜单 <strong>⋮</strong></li>
@@ -107,8 +109,30 @@ export async function initAuth() {
     app.classList.add('hidden');
     app.style.display = 'none';
   }
-  const status = await api('GET', '/api/auth/status');
   const btn = $('auth-btn');
+  let status;
+  const controller = new AbortController();
+  const timer = setTimeout(() => controller.abort(), 8000);
+  try {
+    // This is the first request made by a cold PWA launch. Bound it so a
+    // captive portal, stale reverse proxy, or sleeping hub cannot strand the
+    // app behind its boot screen indefinitely.
+    status = await api('GET', '/api/auth/status', undefined, controller.signal);
+  } catch (e) {
+    console.warn('[auth status]', e);
+    const error = $('auth-error');
+    if (error) {
+      error.textContent = '无法连接服务器。请检查网络或服务地址后重试。';
+      error.classList.remove('hidden');
+    }
+    // The normal sign-in form remains usable: a transient status failure
+    // should be visible, not turn the installed app into a black screen.
+    if (btn) btn.dataset.mode = 'login';
+    return;
+  } finally {
+    clearTimeout(timer);
+  }
+
   if (status.needsSetup) {
     $('auth-subtitle').textContent = 'Create your account to get started';
     btn.textContent = 'Create Account';
@@ -276,6 +300,7 @@ export function initShell(opts = {}) {
         document.dispatchEvent(new CustomEvent('shell-tab-shown'));
       });
     }
+    syncFocusScope();
   });
 
   initSidebarResize();
@@ -307,6 +332,7 @@ export function initShell(opts = {}) {
 
   delegate.on('click', '#btn-home', goHome);
   delegate.on('click', '#auth-btn', submitAuth);
+  delegate.on('submit', '#auth-form', e => { e.preventDefault(); submitAuth(); });
   delegate.on('keydown', '#auth-username, #auth-password', e => { if (e.key === 'Enter') submitAuth(); });
   delegate.on('click', '#hamburger', () => $('sidebar').classList.contains('open') ? closeSidebar() : openSidebar());
   delegate.on('click', '#sidebar-overlay', closeSidebar);
@@ -460,7 +486,10 @@ export function initShell(opts = {}) {
   delegate.on('click', '#git-root-btn', () => applyRoot('git-root-input', gitRoot));
   delegate.on('keydown', '#files-root-input', e => { if (e.key === 'Enter') applyRoot('files-root-input', filesRoot); });
   delegate.on('keydown', '#git-root-input', e => { if (e.key === 'Enter') applyRoot('git-root-input', gitRoot); });
-  delegate.on('click', '#btn-opts', () => { $('chat-opts').classList.toggle('hidden'); });
+  delegate.on('click', '#btn-opts', () => {
+    $('chat-opts').classList.toggle('hidden');
+    syncFocusScope();
+  });
 
   delegate.on('change', '#sel-agent', (_, el) => {
     const prev = currentAgent.peek();
@@ -470,6 +499,7 @@ export function initShell(opts = {}) {
       setAgent(next);
       currentModel.value = getDefaultModel(next) || currentModel.peek();
       localStorage.setItem('model', currentModel.peek());
+      $('sel-permission').value = currentPermission.peek();
       refreshModelSelect();
       appendSystemMsg(`Agent → ${AGENT_LABELS[next] || next} · model ${currentModel.peek()} · new session`);
     }
@@ -700,6 +730,7 @@ export function initShell(opts = {}) {
   });
 
   refreshModelSelect();
+  $('sel-permission').value = currentPermission.peek();
   applyChatDensity();
   const dens = $('sel-density');
   if (dens) dens.value = chatDensity.peek() || 'normal';
@@ -718,4 +749,3 @@ export function initShell(opts = {}) {
     btn.classList.toggle('text-base-content/50', !on);
   });
 }
-

package/public/state.js

@@ -18,7 +18,11 @@ export const wsStatus       = signal('idle');
 export const currentAgent      = signal(localStorage.getItem('agent') || 'claude'); // 'claude'|'codex'|'grok'
 export const currentModel      = signal(localStorage.getItem('model') || 'claude-sonnet-4-5');
 export const currentEffort     = signal('');
-export const currentPermission = signal('default'); // 'default'|'acceptEdits'|'bypassPermissions'|'plan'|'auto'
+// Codex is intentionally trusted by default; users can still choose another
+// mode from the expanded composer options before starting a turn.
+export const currentPermission = signal(
+  currentAgent.peek() === 'codex' ? 'bypassPermissions' : 'default'
+); // 'default'|'acceptEdits'|'bypassPermissions'|'plan'|'auto'
 export const filesRoot      = signal(''); // custom root override for Files tab
 export const gitRoot        = signal(''); // custom root override for Git tab
 export const agentsMeta     = signal(null); // from /api/agents (dynamic model lists)
@@ -247,6 +251,9 @@ export function setAgent(agent) {
   const a = (agent || 'claude').toLowerCase();
   currentAgent.value = a;
   localStorage.setItem('agent', a);
+  currentPermission.value = a === 'codex' ? 'bypassPermissions' : 'default';
+  const permissionSelect = typeof document === 'undefined' ? null : document.getElementById('sel-permission');
+  if (permissionSelect) permissionSelect.value = currentPermission.peek();
   const models = getModelsForAgent(a);
   const def = getDefaultModel(a);
   if (!models.some(m => m.value === currentModel.peek())) {

package/public/style.css

@@ -13,28 +13,21 @@
   #sidebar.open { transform: translateX(0); box-shadow: 4px 0 20px rgba(0,0,0,.4); }
 
   /* Compact chat composer on phones — less height, less dead space under bar */
-  #composer-row {
-    gap: 0.4rem;
-    padding: 0.4rem 0.55rem 0.35rem !important;
-  }
+  #composer-row { padding: 0 !important; }
+  .composer-surface { min-height: 0; border-radius: 1.35rem; }
   #chat-input.chat-input,
   #chat-input {
-    min-height: 36px !important;
-    max-height: 96px !important;
-    padding: 0.4rem 0.65rem !important;
-    border-radius: 0.65rem;
+    min-height: 32px !important;
+    max-height: 72px !important;
+    padding: 0 !important;
+    border-radius: 1.15rem 1.15rem 0 0;
     /* 16px prevents iOS Safari auto-zoom on focus */
     font-size: 16px !important;
-    line-height: 1.35 !important;
-  }
-  #btn-opts,
-  #send-btn,
-  #stop-btn {
-    height: 36px !important;
-    min-height: 36px !important;
-    padding-left: 0.65rem;
-    padding-right: 0.65rem;
+    line-height: 1.4 !important;
   }
+  .composer-icon-btn { width: 40px; height: 40px; font-size: 19px; }
+  .composer-send-btn, .composer-stop-btn { min-height: 40px; height: 40px; }
+  .composer-hint { display: none; }
   #chat-opts {
     padding-top: 0.35rem !important;
     padding-left: 0.55rem !important;
@@ -48,6 +41,64 @@
   .file-row-action {
     opacity: 1 !important;
   }
+
+  /* Tighter chrome so the thread is the product */
+  #topbar-project { display: none; }
+  #project-view > .flex.bg-base-200 { /* tab strip */
+    min-height: 40px;
+  }
+  #project-view [data-tab] {
+    padding: 0.55rem 0.85rem !important;
+    font-size: 13px !important;
+  }
+  #project-notes-bar,
+  #session-notes-bar {
+    font-size: 11px;
+    padding: 0.35rem 0.7rem !important;
+  }
+  #messages {
+    padding: 0.65rem 0.45rem !important;
+    gap: 0.55rem !important;
+  }
+  .msg-row { gap: 3px; }
+  .msg-row.assistant > div:not(.msg-ts),
+  .msg-row.error > div:not(.msg-ts) {
+    max-width: 100% !important;
+    border-radius: 1rem !important;
+    border-top-left-radius: 0.3rem !important;
+  }
+  .msg-row.user > div:not(.msg-ts) {
+    max-width: 88% !important;
+    border-radius: 1rem !important;
+    border-top-right-radius: 0.3rem !important;
+  }
+  #sidebar-resize,
+  #sidebar-toggle {
+    display: none !important;
+  }
+  .md {
+    font-size: 0.9375rem;
+    line-height: 1.6;
+  }
+  .md h1, .md h2, .md h3 {
+    font-size: 1.02em !important;
+    padding: 0.05em 0 0.15em 0.45em !important;
+    border-left-width: 3px !important;
+    background: none !important;
+    border-bottom: none !important;
+    margin: 0.7em 0 0.35em !important;
+  }
+  .md :not(pre) > code {
+    white-space: nowrap;
+    display: inline;
+    font-size: 0.82em;
+    padding: 0.08em 0.32em;
+  }
+  .token-bar {
+    font-size: 10px;
+    line-height: 1.45;
+    padding: 0.15rem 0.45rem;
+  }
 }
 
 /* File row actions: hover-reveal on desktop only */
@@ -72,6 +123,20 @@ html, body {
   max-height: 100dvh;
   overflow: hidden;
 }
+/* iOS keyboard: shrink the app to the visual viewport so the composer
+ * sits above the keyboard instead of floating over Safari chrome. */
+html.vv-keyboard,
+html.vv-keyboard body {
+  height: var(--vvh, 100dvh);
+  max-height: var(--vvh, 100dvh);
+}
+html.vv-keyboard body {
+  position: fixed;
+  top: var(--vv-top, 0px);
+  left: 0;
+  right: 0;
+  width: 100%;
+}
 html.pwa-standalone,
 html.pwa-standalone body {
   background: oklch(var(--b1));
@@ -89,11 +154,19 @@ html.pwa-standalone #topbar {
  * Inner #composer-row already has small padding; only add safe-area beyond that
  * so we don't stack large empty strips under the input.
  */
+#chat-form {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+}
 #chat-composer {
   padding-bottom: env(safe-area-inset-bottom, 0px);
   padding-left: env(safe-area-inset-left, 0px);
   padding-right: env(safe-area-inset-right, 0px);
 }
+html.vv-keyboard #chat-composer {
+  padding-bottom: 0;
+}
 /* Welcome / machine picker full-screen panels */
 html.pwa-standalone #welcome,
 html.pwa-standalone #machine-picker {
@@ -882,28 +955,123 @@ html.pwa-standalone .ma-panel {
 .diff-head { color: oklch(var(--bc)/.5); }
 
 /* ── Chat composer ───────────────────────────────────────────────────────── */
-/* Single outer border only — no DaisyUI nested focus ring / inner outline. */
-#composer-row #btn-opts,
-#composer-row #send-btn,
-#composer-row #stop-btn {
-  height: 40px;
-  min-height: 40px;
+/* One calm surface holds the prompt and its actions, like a modern messenger. */
+.composer-surface {
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border: 1px solid color-mix(in oklch, var(--color-base-content) 16%, transparent);
+  border-radius: 1.35rem;
+  background: color-mix(in oklch, var(--color-base-100) 78%, var(--color-base-200));
+  box-shadow: 0 8px 24px color-mix(in oklch, black 12%, transparent), inset 0 1px 0 color-mix(in oklch, white 6%, transparent);
+  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
+}
+.composer-surface:focus-within {
+  border-color: color-mix(in oklch, var(--color-primary) 62%, transparent);
+  box-shadow: 0 8px 28px color-mix(in oklch, black 15%, transparent), 0 0 0 3px color-mix(in oklch, var(--color-primary) 12%, transparent);
+}
+.composer-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: .75rem;
+  padding: 0;
+}
+.composer-tools, .composer-submit { display: flex; align-items: center; gap: .35rem; }
+.composer-icon-btn,
+.composer-send-btn,
+.composer-stop-btn {
+  border: 0;
+  border-radius: 999px;
+  cursor: pointer;
+  transition: transform .15s ease, background .15s ease, color .15s ease;
+}
+.composer-icon-btn {
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  color: color-mix(in oklch, var(--color-base-content) 72%, transparent);
+  background: transparent;
+  font-size: 17px;
+  line-height: 1;
+}
+.composer-icon-btn:hover { background: color-mix(in oklch, var(--color-base-content) 9%, transparent); color: var(--color-base-content); }
+.composer-send-btn, .composer-stop-btn { height: 36px; min-height: 36px; padding: 0 .95rem; font-size: .8125rem; font-weight: 700; }
+.composer-send-btn { color: oklch(var(--pc)); background: oklch(var(--p)); box-shadow: 0 3px 10px color-mix(in oklch, oklch(var(--p)) 38%, transparent); }
+.composer-send-btn:hover { transform: translateY(-1px); background: color-mix(in oklch, oklch(var(--p)) 88%, white); }
+.composer-send-btn.btn-warning { color: oklch(var(--wc)); background: oklch(var(--wa)); box-shadow: 0 3px 10px color-mix(in oklch, oklch(var(--wa)) 38%, transparent); }
+.composer-stop-btn { color: oklch(var(--ec)); background: oklch(var(--er)); }
+.composer-hint { color: color-mix(in oklch, var(--color-base-content) 43%, transparent); font-size: 11px; }
+.composer-surface:has(.textarea-warning) { border-color: color-mix(in oklch, var(--color-warning) 65%, transparent); }
+#chat-composer.chat-drop-active {
+  outline: 2px dashed color-mix(in oklch, var(--color-primary) 70%, transparent);
+  outline-offset: -2px;
+  background: color-mix(in oklch, var(--color-primary) 8%, var(--color-base-200));
+}
+#chat-attach-bar:not(.hidden) {
+  display: flex;
+}
+.chat-thumb {
+  width: 64px;
+  height: 64px;
+  border-radius: 12px;
+  overflow: hidden;
+  border: 1px solid color-mix(in oklch, var(--color-base-content) 12%, transparent);
+  position: relative;
+  flex-shrink: 0;
+  background: color-mix(in oklch, var(--color-base-content) 4%, var(--color-base-100));
+  box-shadow: 0 1px 2px color-mix(in oklch, black 12%, transparent);
+}
+.chat-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
+.chat-thumb-path {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  font-size: 10px;
+  padding: 4px;
+  text-align: center;
+  word-break: break-all;
+  line-height: 1.15;
+  color: color-mix(in oklch, var(--color-base-content) 70%, transparent);
+  background: color-mix(in oklch, var(--color-base-content) 6%, var(--color-base-100));
+}
+.chat-thumb-label {
+  display: none;
+}
+.chat-thumb-x {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  background: rgba(255,255,255,.92);
+  color: #334155;
+  border: 1px solid rgba(15,23,42,.1);
+  border-radius: 999px;
+  font-size: 11px;
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+  line-height: 1;
+  z-index: 1;
+  box-shadow: 0 1px 3px rgba(15,23,42,.18);
 }
 #chat-input.chat-input,
 #chat-input {
   width: 100%;
-  min-height: 40px;
-  max-height: 140px;
-  padding: 0.55rem 0.85rem;
-  border-radius: 0.75rem;
-  border: 1px solid color-mix(in oklch, var(--color-base-content) 16%, transparent);
-  background: var(--color-base-100);
+  min-height: 32px;
+  max-height: 72px;
+  padding: 0;
+  border: 0;
+  border-radius: 1.25rem 1.25rem 0 0;
+  background: transparent;
   color: var(--color-base-content);
   outline: none !important;
   box-shadow: none !important;
   --tw-ring-shadow: 0 0 #0000 !important;
   --tw-ring-offset-shadow: 0 0 #0000 !important;
-  transition: border-color .15s ease;
+  transition: background .15s ease;
   /* Avoid iOS inherited large text scaling making the box look oversized */
   -webkit-text-size-adjust: 100%;
 }
@@ -974,7 +1142,7 @@ html.pwa-standalone .ma-panel {
 #chat-input:focus-visible {
   outline: none !important;
   box-shadow: none !important;
-  border-color: color-mix(in oklch, var(--color-primary) 55%, transparent);
+  border-color: transparent;
 }
 #chat-input.textarea-warning {
   border-color: color-mix(in oklch, var(--color-warning) 65%, transparent);
@@ -1075,6 +1243,26 @@ html.pwa-standalone .ma-panel {
 }
 .msg-row.user .msg-ts { text-align: right; }
 
+.token-bar {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.4rem;
+  padding: 0.1rem 0.45rem;
+  font-size: 10px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  color: color-mix(in oklch, var(--color-base-content) 38%, transparent);
+  line-height: 1.45;
+}
+.token-bar-mark {
+  flex-shrink: 0;
+  opacity: 0.55;
+}
+.token-bar-text {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
 /* ── Long message collapse ───────────────────────────────────────────────── */
 .msg-card .msg-body { max-height: 8em; overflow: hidden; mask-image: linear-gradient(to bottom, black 60%, transparent 100%); }
 .msg-card.open .msg-body { max-height: none; mask-image: none; }
@@ -1303,3 +1491,12 @@ html.pwa-standalone .ma-panel {
 }
 .ma-report-md { font-size: 13px; }
 .ma-report-item { display: block; }
+
+@media (max-width: 640px) {
+  .md h1, .md h2, .md h3 {
+    background: none !important;
+    border-bottom: none !important;
+    font-size: 1.02em !important;
+    padding: 0.05em 0 0.15em 0.5em !important;
+  }
+}

package/public/sw.js

@@ -1,12 +1,12 @@
 /* Agent UI service worker — cache shell assets only.
  * Never intercepts WebSocket or mutates API semantics beyond offline fallback.
  * Bump CACHE when shipping UI that must invalidate old shells. */
-const CACHE = 'agent-ui-shell-v7';
+const CACHE = 'agent-ui-shell-v9';
 const PRECACHE = [
   '/',
   '/index.html',
   '/manifest.webmanifest',
-  '/style.css?v=ui-9',
+  '/style.css?v=ui-10',
   '/style.css',
   '/app.js',
   '/icons/icon-192.png',

package/src/app.js

@@ -448,13 +448,27 @@ export function createApp() {
       const ext  = (req.headers['x-filename'] || 'image.png').split('.').pop().replace(/[^a-z0-9]/gi, '') || 'png';
       const name = `claude-upload-${Date.now()}.${ext}`;
       const dest = path.join(os.tmpdir(), name);
-      const writer = fsSync.createWriteStream(dest);
-      req.pipe(writer);
-      await new Promise((resolve, reject) => {
-        writer.on('finish', resolve);
-        writer.on('error', reject);
-        req.on('error', reject);
-      });
+      const chunks = [];
+      for await (const chunk of req) chunks.push(chunk);
+      let body = Buffer.concat(chunks);
+      // Tolerate mobile share sheets that label Base64 text as a PNG. Only
+      // decode when the result has a real image signature.
+      const text = body.toString('utf8').trim();
+      const m = /^data:image\/[a-z0-9.+-]+;base64,([a-z0-9+/=\s]+)$/i.exec(text);
+      const encoded = (m?.[1] || text).replace(/\s/g, '');
+      if (/^[a-z0-9+/=]+$/i.test(encoded) && encoded.length % 4 !== 1) {
+        try {
+          const decoded = Buffer.from(encoded, 'base64');
+          const image = decoded.length >= 3 && (
+            (decoded[0] === 0x89 && decoded[1] === 0x50 && decoded[2] === 0x4e)
+            || (decoded[0] === 0xff && decoded[1] === 0xd8 && decoded[2] === 0xff)
+            || decoded.subarray(0, 6).toString() === 'GIF87a'
+            || decoded.subarray(8, 12).toString() === 'WEBP'
+          );
+          if (image) body = decoded;
+        } catch { /* preserve the original upload */ }
+      }
+      await fs.writeFile(dest, body);
       res.json({ path: dest });
     })().catch(e => res.status(500).json({ error: e.message }));
   });