claude-simple 0.2.4 → 0.2.6

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,29 +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,
-  #btn-attach,
-  #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;
@@ -49,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 */
@@ -73,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));
@@ -90,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 {
@@ -883,14 +955,55 @@ 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 #btn-attach,
-#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;
@@ -900,16 +1013,17 @@ html.pwa-standalone .ma-panel {
   display: flex;
 }
 .chat-thumb {
-  width: 56px;
-  height: 56px;
-  border-radius: 8px;
+  width: 64px;
+  height: 64px;
+  border-radius: 12px;
   overflow: hidden;
-  border: 1px solid color-mix(in oklch, var(--color-base-content) 14%, transparent);
+  border: 1px solid color-mix(in oklch, var(--color-base-content) 12%, transparent);
   position: relative;
   flex-shrink: 0;
-  background: var(--color-base-100);
+  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 { width: 100%; height: 100%; object-fit: cover; }
+.chat-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
 .chat-thumb-path {
   display: flex;
   align-items: center;
@@ -925,46 +1039,39 @@ html.pwa-standalone .ma-panel {
   background: color-mix(in oklch, var(--color-base-content) 6%, var(--color-base-100));
 }
 .chat-thumb-label {
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  font-size: 9px;
-  text-align: center;
-  background: rgba(0,0,0,.55);
-  color: #fff;
-  line-height: 1.2;
-  padding: 1px 0;
+  display: none;
 }
 .chat-thumb-x {
   position: absolute;
-  top: 0;
-  right: 0;
-  background: rgba(0,0,0,.65);
-  color: #fff;
-  border: 0;
-  font-size: 10px;
-  width: 16px;
-  height: 16px;
+  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%;
 }
@@ -1035,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);
@@ -1136,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; }
@@ -1364,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-v8';
+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 }));
   });