claude-simple 0.2.0 → 0.2.2

package/public/style.css

@@ -11,16 +11,66 @@
     padding-bottom: env(safe-area-inset-bottom, 0px);
   }
   #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;
+  }
+  #chat-input.chat-input,
+  #chat-input {
+    min-height: 36px !important;
+    max-height: 96px !important;
+    padding: 0.4rem 0.65rem !important;
+    border-radius: 0.65rem;
+    /* 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;
+  }
+  #chat-opts {
+    padding-top: 0.35rem !important;
+    padding-left: 0.55rem !important;
+    padding-right: 0.55rem !important;
+    gap: 0.35rem !important;
+  }
+  #scroll-nav {
+    bottom: 4.5rem !important;
+  }
+  /* File list actions always visible on touch (no hover) */
+  .file-row-action {
+    opacity: 1 !important;
+  }
+}
+
+/* File row actions: hover-reveal on desktop only */
+@media (min-width: 641px) {
+  .file-row-action {
+    opacity: 0;
+  }
+  .group:hover .file-row-action,
+  .group:focus-within .file-row-action {
+    opacity: 1;
+  }
 }
 
 /*
- * PWA standalone safe areas:
+ * Safe areas (PWA + mobile Safari with viewport-fit=cover):
  * Do NOT pad the whole body (that leaves a dead empty strip under the chat bar).
  * Paint chrome into the insets; only inset interactive content.
  */
 html, body {
   height: 100%;
   height: 100dvh;
+  max-height: 100dvh;
+  overflow: hidden;
 }
 html.pwa-standalone,
 html.pwa-standalone body {
@@ -34,8 +84,12 @@ html.pwa-standalone #topbar {
   padding-left: max(0.75rem, env(safe-area-inset-left, 0px));
   padding-right: max(0.75rem, env(safe-area-inset-right, 0px));
 }
-/* Chat composer: sit above home indicator (background fills the inset) */
-html.pwa-standalone #chat-composer {
+/*
+ * Chat composer: background fills home-indicator inset.
+ * 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-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);
@@ -829,6 +883,12 @@ html.pwa-standalone .ma-panel {
 
 /* ── 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;
+}
 #chat-input.chat-input,
 #chat-input {
   width: 100%;
@@ -844,6 +904,45 @@ html.pwa-standalone .ma-panel {
   --tw-ring-shadow: 0 0 #0000 !important;
   --tw-ring-offset-shadow: 0 0 #0000 !important;
   transition: border-color .15s ease;
+  /* Avoid iOS inherited large text scaling making the box look oversized */
+  -webkit-text-size-adjust: 100%;
+}
+/* Kill browser password/contact autofill widgets (side checkmarks / arrows) */
+#chat-input::-webkit-contacts-auto-fill-button,
+#chat-input::-webkit-credentials-auto-fill-button,
+#chat-input::-webkit-strong-password-auto-fill-button,
+#ma-input::-webkit-contacts-auto-fill-button,
+#ma-input::-webkit-credentials-auto-fill-button {
+  visibility: hidden !important;
+  display: none !important;
+  pointer-events: none !important;
+  position: absolute !important;
+  right: 0 !important;
+  width: 0 !important;
+  height: 0 !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  opacity: 0 !important;
+}
+#chat-input:-webkit-autofill,
+#chat-input:-webkit-autofill:hover,
+#chat-input:-webkit-autofill:focus {
+  -webkit-box-shadow: 0 0 0 1000px var(--color-base-100) inset !important;
+  transition: background-color 99999s ease-in-out 0s;
+}
+
+/* Recent sessions topbar menu */
+#recent-menu {
+  min-width: 16rem;
+}
+@media (max-width: 640px) {
+  #recent-menu-wrap #recent-menu {
+    position: fixed;
+    left: 0.5rem;
+    right: 0.5rem;
+    width: auto;
+    max-width: none;
+  }
 }
 #chat-input:focus,
 #chat-input:focus-visible {

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-v3';
+const CACHE = 'agent-ui-shell-v6';
 const PRECACHE = [
   '/',
   '/index.html',
   '/manifest.webmanifest',
-  '/style.css?v=boot-2',
+  '/style.css?v=ui-8',
   '/style.css',
   '/app.js',
   '/icons/icon-192.png',

package/server.js

@@ -1,5 +1,6 @@
 #!/usr/bin/env node
-import { createApp, init, PORT } from './src/app.js';
+import { createApp, init, PORT, hasBusyAgent } from './src/app.js';
+import { startAutoUpdate } from './src/auto-update.js';
 
 await init();
 
@@ -10,3 +11,6 @@ server.listen(PORT, () => {
   if (process.env.AUTH_USERNAME) console.log(`  Auth: env user "${process.env.AUTH_USERNAME}"`);
   console.log();
 });
+
+// Optional self-update (same as edge). AUTO_UPDATE=0 to disable.
+startAutoUpdate({ role: 'standalone', isBusy: hasBusyAgent });

package/src/app.js

@@ -368,6 +368,14 @@ function isSessionBusy(sessionId) {
   return false;
 }
 
+/** True if any agent turn is in flight (used by auto-update before restart). */
+export function hasBusyAgent() {
+  for (const s of activeSessions.values()) {
+    if (s && s.busy !== false) return true;
+  }
+  return false;
+}
+
 function markSessionIdle(sessionId, tempKey) {
   for (const key of [sessionId, tempKey].filter(Boolean)) {
     const s = activeSessions.get(key);
@@ -375,7 +383,10 @@ function markSessionIdle(sessionId, tempKey) {
   }
 }
 
-/** Shrink history payloads: huge tool inputs dominate mobile transfers. */
+/** Max JSON chars kept per tool_use input in history payloads (traffic). */
+const HISTORY_TOOL_INPUT_MAX = 100;
+
+/** Shrink history payloads: tool inputs dominate mobile / hub transfers. */
 function compactHistoryMessages(messages) {
   if (!Array.isArray(messages)) return messages;
   return messages.map((m) => {
@@ -384,8 +395,15 @@ function compactHistoryMessages(messages) {
       let raw;
       try { raw = typeof m.input === 'string' ? m.input : JSON.stringify(m.input); }
       catch { raw = String(m.input); }
-      if (raw.length > 1600) {
-        return { ...m, input: { _truncated: true, preview: raw.slice(0, 1600), bytes: raw.length } };
+      if (raw.length > HISTORY_TOOL_INPUT_MAX) {
+        return {
+          ...m,
+          input: {
+            _truncated: true,
+            preview: raw.slice(0, HISTORY_TOOL_INPUT_MAX),
+            bytes: raw.length,
+          },
+        };
       }
     }
     if (m.type === 'text' && typeof m.content === 'string' && m.content.length > 48_000) {
@@ -399,8 +417,12 @@ function compactHistoryMessages(messages) {
 export function createApp() {
   const app = express();
 
-  // Gzip JSON/text API responses when client accepts it (hub tunnel + mobile).
+  // Gzip JSON/text API responses when client accepts it (mobile / direct browser).
+  // Skip for hub-proxied edge traffic: Node fetch auto-decompresses gzip while
+  // still advertising Content-Encoding, which breaks the browser after tunnel
+  // re-delivery. Control WS already uses perMessageDeflate.
   app.use((req, res, next) => {
+    if (req.headers['x-hub-token']) return next();
     const ae = req.headers['accept-encoding'] || '';
     if (!/\bgzip\b/i.test(ae) || req.method === 'HEAD') return next();
     const origJson = res.json.bind(res);
@@ -540,8 +562,12 @@ export function createApp() {
       const stat = await fs.stat(filePath);
       if (req.query.download === 'true') {
         const name = path.basename(filePath);
-        res.setHeader('Content-Disposition', `attachment; filename="${name}"`);
+        // ASCII fallback + RFC 5987 so Chinese / spaces filenames download correctly.
+        const ascii = name.replace(/[^\x20-\x7E]/g, '_').replace(/["\\]/g, '_');
+        const star = encodeURIComponent(name).replace(/['()]/g, c => `%${c.charCodeAt(0).toString(16).toUpperCase()}`);
+        res.setHeader('Content-Disposition', `attachment; filename="${ascii || 'download'}"; filename*=UTF-8''${star}`);
         res.setHeader('Content-Type', 'application/octet-stream');
+        res.setHeader('Cache-Control', 'no-store');
         return fsSync.createReadStream(filePath).pipe(res);
       }
       // Office / PDF / binary previews need more headroom than plain text
@@ -873,11 +899,11 @@ export function createApp() {
       const { sessionId } = req.params;
       if (!/^[0-9a-f-]{36}$/i.test(sessionId)) return res.status(400).json({ error: 'Invalid session id' });
       const preferred = typeof req.query.agent === 'string' ? req.query.agent : null;
-      // tail=0 → full history; default last 80 messages (mobile-friendly)
-      let tail = parseInt(req.query.tail ?? '80', 10);
-      if (Number.isNaN(tail)) tail = 80;
+      // tail=0 → full history (default). Positive = last N messages only.
+      let tail = parseInt(req.query.tail ?? '0', 10);
+      if (Number.isNaN(tail)) tail = 0;
       if (tail < 0) tail = 0;
-      if (tail > 2000) tail = 2000;
+      if (tail > 50_000) tail = 50_000;
       const compact = req.query.compact !== '0' && req.query.compact !== 'false';
       const opts = {
         claudeConfigDirs: CLAUDE_CONFIG_DIRS,

package/src/auto-update.js

@@ -0,0 +1,215 @@
+/**
+ * Optional self-update against the public npm registry.
+ *
+ * Env:
+ *   AUTO_UPDATE=0|false|off     disable (default: enabled for edge client)
+ *   AUTO_UPDATE_INTERVAL_HOURS  check interval, default 12 (half day)
+ *   AUTO_UPDATE_PACKAGE         package name, default claude-simple
+ *   AUTO_UPDATE_CHANNEL         dist-tag, default latest
+ *   AUTO_UPDATE_IDLE_WAIT_MS    wait for agents to finish before applying, default 30min
+ *   AUTO_UPDATE_APPLY=0         only log when newer; do not install/restart
+ */
+import { spawn } from 'child_process';
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const PKG_ROOT = path.join(__dirname, '..');
+
+function envBool(name, defaultOn) {
+  const v = process.env[name];
+  if (v == null || v === '') return defaultOn;
+  return !/^(0|false|off|no)$/i.test(String(v));
+}
+
+function readLocalVersion() {
+  try {
+    const pkg = JSON.parse(fs.readFileSync(path.join(PKG_ROOT, 'package.json'), 'utf8'));
+    return String(pkg.version || '0.0.0');
+  } catch {
+    return '0.0.0';
+  }
+}
+
+/** semver-ish compare: a > b → 1, a < b → -1, eq → 0 */
+export function cmpSemver(a, b) {
+  const pa = String(a).replace(/^v/, '').split(/[.+-]/).map((x) => parseInt(x, 10) || 0);
+  const pb = String(b).replace(/^v/, '').split(/[.+-]/).map((x) => parseInt(x, 10) || 0);
+  const n = Math.max(pa.length, pb.length);
+  for (let i = 0; i < n; i++) {
+    const d = (pa[i] || 0) - (pb[i] || 0);
+    if (d !== 0) return d > 0 ? 1 : -1;
+  }
+  return 0;
+}
+
+async function fetchLatestVersion(pkgName, tag) {
+  const url = `https://registry.npmjs.org/${encodeURIComponent(pkgName)}`;
+  const res = await fetch(url, {
+    headers: { Accept: 'application/json', 'User-Agent': 'claude-simple-auto-update' },
+    signal: AbortSignal.timeout(20_000),
+  });
+  if (!res.ok) throw new Error(`registry HTTP ${res.status}`);
+  const data = await res.json();
+  const ver = data?.['dist-tags']?.[tag] || data?.['dist-tags']?.latest;
+  if (!ver) throw new Error('no dist-tag on registry');
+  return String(ver);
+}
+
+/** Detect install layout: global npm vs local/source tree. */
+function detectInstallMode() {
+  const entry = process.argv[1] ? path.resolve(process.argv[1]) : '';
+  const inGlobal = /[/\\]node_modules[/\\]claude-simple[/\\]/.test(entry)
+    || /[/\\]lib[/\\]node_modules[/\\]claude-simple[/\\]/.test(PKG_ROOT);
+  // Prefer global update when package lives under a node_modules tree named claude-simple
+  if (inGlobal || /[/\\]node_modules[/\\]claude-simple$/.test(PKG_ROOT)) {
+    return { mode: 'global', cwd: process.cwd() };
+  }
+  return { mode: 'local', cwd: PKG_ROOT };
+}
+
+function runNpmInstall(mode, pkgName, version, cwd) {
+  const spec = `${pkgName}@${version}`;
+  const args = mode === 'global'
+    ? ['install', '-g', spec, '--no-fund', '--no-audit']
+    : ['install', spec, '--no-fund', '--no-audit', '--prefix', cwd];
+  return new Promise((resolve, reject) => {
+    console.log(`[auto-update] running: npm ${args.join(' ')}`);
+    const child = spawn('npm', args, {
+      cwd: mode === 'global' ? osHomedir() : cwd,
+      env: process.env,
+      stdio: ['ignore', 'pipe', 'pipe'],
+    });
+    let out = '';
+    let err = '';
+    child.stdout.on('data', (d) => { out += d; process.stdout.write(d); });
+    child.stderr.on('data', (d) => { err += d; process.stderr.write(d); });
+    child.on('error', reject);
+    child.on('close', (code) => {
+      if (code === 0) resolve({ out, err });
+      else reject(new Error(`npm exited ${code}: ${(err || out).slice(-500)}`));
+    });
+  });
+}
+
+function osHomedir() {
+  return process.env.HOME || process.env.USERPROFILE || PKG_ROOT;
+}
+
+/**
+ * @param {object} opts
+ * @param {() => boolean} [opts.isBusy]  return true while agent turn is running
+ * @param {boolean} [opts.enabled]
+ * @param {string} [opts.role]  log label
+ */
+export function startAutoUpdate(opts = {}) {
+  const enabled = opts.enabled != null ? opts.enabled : envBool('AUTO_UPDATE', true);
+  if (!enabled) {
+    console.log('[auto-update] disabled (AUTO_UPDATE=0)');
+    return { stop() {} };
+  }
+
+  const intervalHours = Math.max(0.25, parseFloat(process.env.AUTO_UPDATE_INTERVAL_HOURS || '12') || 12);
+  const intervalMs = intervalHours * 3600 * 1000;
+  const pkgName = process.env.AUTO_UPDATE_PACKAGE || 'claude-simple';
+  const channel = process.env.AUTO_UPDATE_CHANNEL || 'latest';
+  const apply = envBool('AUTO_UPDATE_APPLY', true);
+  const idleWaitMs = Math.max(60_000, parseInt(process.env.AUTO_UPDATE_IDLE_WAIT_MS || String(30 * 60 * 1000), 10) || 30 * 60 * 1000);
+  const isBusy = typeof opts.isBusy === 'function' ? opts.isBusy : () => false;
+  const role = opts.role || 'process';
+
+  let stopped = false;
+  let timer = null;
+  let applying = false;
+  const localVersion = readLocalVersion();
+
+  console.log(
+    `[auto-update] enabled · local=${localVersion} · check every ${intervalHours}h · package=${pkgName}@${channel} · apply=${apply}`,
+  );
+
+  async function waitUntilIdle() {
+    const deadline = Date.now() + idleWaitMs;
+    while (Date.now() < deadline) {
+      if (stopped) return false;
+      if (!isBusy()) return true;
+      console.log('[auto-update] agent busy — waiting before apply…');
+      await new Promise((r) => setTimeout(r, 15_000));
+    }
+    console.warn('[auto-update] idle wait timed out; applying anyway');
+    return true;
+  }
+
+  async function checkOnce() {
+    if (stopped || applying) return;
+    try {
+      const latest = await fetchLatestVersion(pkgName, channel);
+      const cmp = cmpSemver(latest, localVersion);
+      if (cmp <= 0) {
+        console.log(`[auto-update] up to date (${localVersion}, registry ${latest})`);
+        return;
+      }
+      console.log(`[auto-update] new version available: ${localVersion} → ${latest}`);
+      if (!apply) {
+        console.log('[auto-update] AUTO_UPDATE_APPLY=0 — skip install');
+        return;
+      }
+
+      applying = true;
+      await waitUntilIdle();
+      if (stopped) return;
+
+      const { mode, cwd } = detectInstallMode();
+      console.log(`[auto-update] install mode=${mode} root=${PKG_ROOT}`);
+
+      // Global install when package is under node_modules; else npm install in package root
+      if (mode === 'global') {
+        await runNpmInstall('global', pkgName, latest, cwd);
+      } else {
+        // Source / linked tree: pull package.json version bump via npm update in place
+        await runNpmInstall('local', pkgName, latest, cwd);
+        // If we're running from a git checkout that *is* the package (not a dependency),
+        // local `npm install claude-simple@x` only updates node_modules — won't replace this tree.
+        // For git checkouts, pull via npm pack is wrong; log and skip restart unless global.
+        const pkgJsonName = (() => {
+          try { return JSON.parse(fs.readFileSync(path.join(PKG_ROOT, 'package.json'), 'utf8')).name; }
+          catch { return null; }
+        })();
+        if (pkgJsonName === pkgName && !/node_modules/.test(PKG_ROOT)) {
+          console.warn(
+            '[auto-update] running from source checkout — npm cannot overwrite this tree. '
+            + 'Use `npm install -g claude-simple` for auto-apply, or pull git + restart manually.',
+          );
+          applying = false;
+          return;
+        }
+      }
+
+      console.log(`[auto-update] installed ${latest}; restarting ${role} (exit 0 — supervisor should relaunch)`);
+      // Give logs a moment to flush; systemd Restart= will bring us back on new code
+      setTimeout(() => process.exit(0), 500);
+    } catch (e) {
+      console.warn(`[auto-update] check failed: ${e.message || e}`);
+      applying = false;
+    }
+  }
+
+  // First check after a short delay (don't compete with boot / hub connect)
+  const firstDelay = Math.min(60_000, Math.max(15_000, intervalMs / 100));
+  timer = setTimeout(function tick() {
+    checkOnce().finally(() => {
+      if (stopped) return;
+      timer = setTimeout(tick, intervalMs);
+    });
+  }, firstDelay);
+  if (typeof timer.unref === 'function') timer.unref();
+
+  return {
+    stop() {
+      stopped = true;
+      if (timer) clearTimeout(timer);
+    },
+    checkNow: checkOnce,
+    localVersion,
+  };
+}

package/src/runtime/protocol.js

@@ -138,9 +138,9 @@ export const UI_EVENT = {
 /**
  * Compact tool_use inputs before they hit the wire (mobile tunnel cost).
  * @param {unknown} input
- * @param {number} [max=1200]
+ * @param {number} [max=100]
  */
-export function compactToolInput(input, max = 1200) {
+export function compactToolInput(input, max = 100) {
   if (input == null) return input;
   let raw;
   try {