agentgui 1.0.974 → 1.0.976

package/lib/http-handler.js

@@ -101,19 +101,15 @@ function isAllowRoot(realPath, allowRoots) {
 
 export function createHttpHandler({ BASE_URL, expressApp, queries, sendJSON, serveFile, staticDir, messageQueues, getWss, activeExecutions, getACPStatus, discoveredAgents, PKG_VERSION, RATE_LIMIT_MAX, rateLimitMap, routes, PORT }) {
   return async function httpHandler(req, res) {
-    // CORS: when PASSWORD is set the server holds credentials a cross-origin
-    // page must not be able to spend, so we do NOT advertise a wildcard origin
-    // (a wildcard + a leaked Bearer/token would let any site the user visits
-    // drive this server). Reflect an explicitly-allowed origin (CORS_ORIGIN)
-    // when configured, else same-origin only. With no PASSWORD the server is
-    // already open, so the permissive wildcard is harmless and kept for tools.
+    // CORS: emit ACAO only when CORS_ORIGIN is explicitly set. A wildcard would
+    // let any webpage the user visits make credentialless fetches to /api/list,
+    // /api/file/*, etc. and read ~/.claude/projects content — even on a no-
+    // PASSWORD localhost deploy. Set CORS_ORIGIN=<origin> for cross-origin tools.
     const _corsOrigin = process.env.CORS_ORIGIN;
     if (_corsOrigin) {
       res.setHeader('Access-Control-Allow-Origin', _corsOrigin);
       res.setHeader('Vary', 'Origin');
-    } else if (!process.env.PASSWORD) {
-      res.setHeader('Access-Control-Allow-Origin', '*');
-    } // else: no ACAO header -> browsers block cross-origin reads (same-origin still works)
+    } // no ACAO header -> browsers enforce same-origin by default
     res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
     res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
     // The password can ride in a ?token= query param (EventSource/deep-links
@@ -684,12 +680,14 @@ export function createHttpHandler({ BASE_URL, expressApp, queries, sendJSON, ser
         const normalizedPath = conf.realPath;
         try {
           const ext = path.extname(normalizedPath).toLowerCase();
-          const mimeTypes = { '.png': 'image/png', '.jpg': 'image/jpeg', '.jpeg': 'image/jpeg', '.gif': 'image/gif', '.webp': 'image/webp', '.svg': 'image/svg+xml' };
-          // Only serve known image types - never an octet-stream fallback, which
-          // would turn this into a generic file reader for any extension.
+          const mimeTypes = { '.png': 'image/png', '.jpg': 'image/jpeg', '.jpeg': 'image/jpeg', '.gif': 'image/gif', '.webp': 'image/webp' };
+          // SVG is intentionally excluded: browsers render SVG as a live document
+          // in the app's origin, so an agent-written SVG with a <script src=CDN>
+          // would execute in the agentgui origin (CSP allows unpkg/jsdelivr).
+          // Files preview uses /api/file/download (attachment) for SVG.
           const contentType = mimeTypes[ext];
           if (!contentType) { res.writeHead(403); res.end('Forbidden'); return; }
-          res.writeHead(200, { 'Content-Type': contentType, 'Cache-Control': 'no-cache' });
+          res.writeHead(200, { 'Content-Type': contentType, 'Cache-Control': 'no-cache', 'X-Content-Type-Options': 'nosniff' });
           res.end(fs.readFileSync(normalizedPath));
         } catch (err) { sendJSON(req, res, 400, { error: err.message }); }
         return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentgui",
-  "version": "1.0.974",
+  "version": "1.0.976",
   "description": "Multi-agent ACP client with real-time communication",
   "type": "module",
   "main": "electron/main.js",

package/scripts/validate-mutations.mjs

@@ -28,6 +28,9 @@ const TRAVERSAL = join(ROOT, '..', '..', ...(WIN ? ['Windows', 'win.ini'] : ['et
 await check('rename-traversal', 403, await post('/api/rename', { path: TRAVERSAL, newName: 'x.txt' }));
 await check('delete-out-of-roots', 403, await post('/api/delete', { path: OUTSIDE }));
 await check('delete-root-refused', 403, await post('/api/delete', { path: ROOT }));
+await check('rename-to-secret-403', 403, await post('/api/rename', { path: join(ROOT, 'package.json'), newName: '.env' }));
+await check('upload-secret-403', 403, await fetch(BASE + '/api/upload-file?dir=' + encodeURIComponent(ROOT) + '&name=.env', { method: 'PUT', headers: AUTH, body: 'secret' }).then(async r => ({ status: r.status, body: await r.text() })));
+await check('mkdir-secret-403', 403, await post('/api/mkdir', { dir: ROOT, name: '.env' }));
 await check('mkdir-reserved-name', 400, await post('/api/mkdir', { dir: ROOT, name: 'CON' }));
 await check('mkdir-name-with-separator', 400, await post('/api/mkdir', { dir: ROOT, name: 'a/b' }));
 await check('mkdir-name-trailing-dot', 400, await post('/api/mkdir', { dir: ROOT, name: 'evil.' }));

package/site/app/js/app.js

@@ -131,7 +131,8 @@ function scheduleStreamRender() {
   requestAnimationFrame(() => {
     streamRenderScheduled = false;
     render();
-    scrollChatToBottom();
+    // Kit AgentChat's IntersectionObserver sentinel handles streaming auto-scroll;
+    // calling scrollChatToBottom here forces a synchronous scrollHeight layout reflow.
   });
 }
 
@@ -262,6 +263,7 @@ function navTo(tab, { writeHash: doWriteHash = true, push = true } = {}) {
   // Leaving chat clears any pending new-chat confirmation so it doesn't linger
   // as a stale banner when the user returns.
   if (prev === 'chat' && tab !== 'chat') state.confirmingNewChat = false;
+  if (prev !== tab) state.confirmingClearData = false;
   state.tab = tab;
   // Live history SSE feeds both the History tab (event log) and the Live
   // dashboard (per-session activity tally + stream-health signal); open it on
@@ -367,7 +369,11 @@ let _liveTick = null;
 function startLiveTick() {
   if (_liveTick) return;
   _liveTick = setInterval(() => {
-    if (state.tab === 'live' && Array.isArray(state.active) && state.active.length) scheduleRender();
+    if (state.tab === 'live' && Array.isArray(state.active) && state.active.length) {
+      scheduleRender();
+    } else if (state.tab !== 'live' && !(Array.isArray(state.active) && state.active.length)) {
+      clearInterval(_liveTick); _liveTick = null;
+    }
   }, 1000);
 }
 async function stopActiveChat(sid) {
@@ -415,6 +421,7 @@ function openLiveStream() {
           // Dedupe against the snapshot/prior pushes by event index - a
           // reconnect or overlap would otherwise double-append the same event.
           if (ev.i == null || !state.events.some(e => e.i === ev.i)) {
+            ev._idx = state.events.length;
             state.events.push(ev);
             // Cap retained events so a long live session can't grow unbounded.
             if (state.events.length > 2000) state.events.splice(0, state.events.length - 2000);
@@ -511,9 +518,9 @@ function view() {
   const liveActive = state.tab === 'history' && state.live.connected && (Date.now() - state.live.lastEventTs < 30000);
   const dotLabel = state.tab === 'history'
     ? (state.live.error
-        ? state.live.error + (state.live.reconnects ? ' · ' + state.live.reconnects + ' reconnects' : '')
-        : (liveActive ? 'live · ' + state.live.eventCount : (state.live.connected ? 'live' : 'connecting…')))
-    : (ok ? (state.health.ws === 'reconnecting' ? 'connecting' : 'connected') : 'offline');
+        ? 'stream: ' + state.live.error + (state.live.reconnects ? ' · ' + state.live.reconnects + ' reconnects' : '')
+        : (liveActive ? 'stream: live · ' + state.live.eventCount : (state.live.connected ? 'stream: live' : 'stream: connecting…')))
+    : (ok ? (state.health.ws === 'reconnecting' ? 'connecting…' : 'connected') : 'offline');
   const dotLive = state.tab === 'history' ? (liveActive || state.live.connected) : ok;
   // The status dot is drawn entirely by CSS (.status-dot::before) - a small
   // colored disc, real product design, not a text glyph. State drives its colour
@@ -1049,7 +1056,7 @@ function fileDialog() {
     return PromptDialog({
       title: 'Rename ' + d.file.name, value: d.file.name, placeholder: 'new name',
       error: d.error || null, busy: !!d.busy,
-      confirmLabel: d.busy ? 'renaming...' : 'rename', cancelLabel: 'cancel',
+      confirmLabel: d.busy ? 'renaming…' : 'rename', cancelLabel: 'cancel',
       onCancel: closeFileDialog,
       onConfirm: (v) => {
         // Every confirm press produces visible feedback - never a silent no-op.
@@ -1066,7 +1073,7 @@ function fileDialog() {
         ? 'Delete this folder and everything inside it? This cannot be undone.'
         : 'Delete this file? This cannot be undone.',
       error: d.error || null, busy: !!d.busy,
-      confirmLabel: d.busy ? 'deleting...' : 'delete', cancelLabel: 'cancel', destructive: true,
+      confirmLabel: d.busy ? 'deleting…' : 'delete', cancelLabel: 'cancel', destructive: true,
       onCancel: closeFileDialog,
       onConfirm: () => runFileMutation(() => B.deleteEntry(state.backend, d.file.path, isDir), 'deleted ' + d.file.name),
     });
@@ -1080,7 +1087,7 @@ function fileDialog() {
         ? 'Folders are deleted with everything inside them. '
         : '') + 'This cannot be undone.',
       error: d.error || null, busy: !!d.busy,
-      confirmLabel: d.busy ? 'deleting...' : 'delete ' + n, cancelLabel: 'cancel', destructive: true,
+      confirmLabel: d.busy ? 'deleting…' : 'delete ' + n, cancelLabel: 'cancel', destructive: true,
       onCancel: closeFileDialog,
       onConfirm: runBulkDelete,
     });
@@ -1091,7 +1098,7 @@ function fileDialog() {
       title: 'Move ' + n + ' selected ' + (n === 1 ? 'entry' : 'entries'),
       value: state.files.path || '', placeholder: 'destination folder path',
       error: d.error || null, busy: !!d.busy,
-      confirmLabel: d.busy ? 'moving...' : 'move ' + n, cancelLabel: 'cancel',
+      confirmLabel: d.busy ? 'moving…' : 'move ' + n, cancelLabel: 'cancel',
       onCancel: closeFileDialog,
       onConfirm: (v) => {
         if (!v) { d.error = 'enter a destination folder'; render(); return; }
@@ -1104,7 +1111,7 @@ function fileDialog() {
     return PromptDialog({
       title: 'New folder', value: '', placeholder: 'folder name',
       error: d.error || null, busy: !!d.busy,
-      confirmLabel: d.busy ? 'creating...' : 'create', cancelLabel: 'cancel',
+      confirmLabel: d.busy ? 'creating…' : 'create', cancelLabel: 'cancel',
       onCancel: closeFileDialog,
       onConfirm: (v) => {
         if (!v) { d.error = 'enter a folder name'; render(); return; }
@@ -1699,7 +1706,9 @@ function appendText(parts, text) {
 // standalone tool_result part. Sets the card's result + done/error status.
 function applyToolResult(parts, block) {
   const id = block.tool_use_id || block.id || null;
-  const content = block?.content ?? block?.output ?? block;
+  const raw = block?.content ?? block?.output ?? block;
+  // Claude API delivers content as an array of {type,text} objects; flatten to plain text.
+  const content = Array.isArray(raw) ? (raw.filter(b => b.type === 'text').map(b => b.text).join('\n') || JSON.stringify(raw, null, 2)) : raw;
   const isError = !!(block?.is_error);
   const byId = id ? [...parts].reverse().find(p => p && p.kind === 'tool' && p._id === id) : null;
   const target = byId || [...parts].reverse().find(p => p && p.kind === 'tool' && p.status === 'running');
@@ -2323,6 +2332,9 @@ async function sendChat(textArg) {
   } finally {
     state.chat.busy = false;
     state.chat.abort = null;
+    // Prune an empty assistant shell (WS-drop before any content arrived).
+    const msgs = state.chat.messages;
+    if (msgs.length && isEmptyTurn(msgs[msgs.length - 1])) msgs.pop();
     persistChat();
     refreshActive();   // settle the running panel/dashboard now, not at the next poll
     render();
@@ -2479,17 +2491,24 @@ function historyMain() {
     onSelect: (id) => { state.eventFilter = id && id.id ? id.id : id; render(); },
     label: 'Filter events by type',
   });
+  // Single pass over state.events for all three counters (replaces three separate .filter() calls).
+  const evCounters = state.events.reduce((c, e) => {
+    if (e.role === 'user') c.turns++;
+    if (e.type === 'tool_use') c.tools++;
+    if (e.isError) c.errors++;
+    return c;
+  }, { turns: 0, tools: 0, errors: 0 });
   const meta = SessionMeta({
     items: [
       sess && sess.cwd ? { label: 'cwd', value: sess.cwd, title: sess.cwd } : null,
-      sessionDuration() ? { label: 'duration', value: sessionDuration() } : null,
+      (() => { const dur = sessionDuration(); return dur ? { label: 'duration', value: dur } : null; })(),
       { label: 'session id', value: state.selectedSid.slice(0, 8) + '…', title: state.selectedSid, onCopy: () => copyText(state.selectedSid, 'session id copied') },
       // Spelled counter vocabulary in the detail strip (events/turns/tools/
       // errors); the abbreviated 'ev/tools/err' triple stays compact-row-only.
       { label: 'events', value: String(state.events.length) },
-      { label: 'turns', value: String(sess?.userTurns ?? state.events.filter(e => e.role === 'user').length) },
-      { label: 'tools', value: String(state.events.filter(e => e.type === 'tool_use').length) },
-      { label: 'errors', value: String(state.events.filter(e => e.isError).length) },
+      { label: 'turns', value: String(sess?.userTurns ?? evCounters.turns) },
+      { label: 'tools', value: String(evCounters.tools) },
+      { label: 'errors', value: String(evCounters.errors) },
     ].filter(Boolean),
   });
   if (filteredEvents.length === 0) {
@@ -2506,10 +2525,7 @@ function historyMain() {
   const shown = filteredEvents.slice(-limit);
   const hiddenCount = total - shown.length;
   // Keys of the currently-shown rows, so expand-all toggles only what's rendered.
-  const shownKeys = shown.map((e, i) => {
-    const absIdx = total - shown.length + i;
-    return e.i != null ? 'ev' + e.i : 'ev-' + (e.ts || 0) + '-' + (e.type || '') + '-' + absIdx;
-  });
+  const shownKeys = shown.map((e, i) => e.i != null ? 'ev' + e.i : 'ev-' + (e.ts || 0) + '-' + (e.type || '') + '-' + (e._idx ?? (total - shown.length + i)));
   const allExpanded = shownKeys.length > 0 && shownKeys.every(k => state.expandedEvents.has(k));
   const eventControls = h('div', { key: 'evctrl', class: 'history-actions', role: 'group', 'aria-label': 'event controls' },
     Btn({ key: 'expall', onClick: () => {
@@ -2535,8 +2551,7 @@ function historyMain() {
           // Stable key: server event index when present, else ts + the event's
           // ABSOLUTE position in state.events (not the sliced-view index, which
           // shifts when live events append and would collide loaded vs live rows).
-          const absIdx = total - shown.length + i;
-          const key = e.i != null ? 'ev' + e.i : 'ev-' + (e.ts || 0) + '-' + (e.type || '') + '-' + absIdx;
+          const key = e.i != null ? 'ev' + e.i : 'ev-' + (e.ts || 0) + '-' + (e.type || '') + '-' + (e._idx ?? (total - shown.length + i));
           const role = e.role || '?';
           const type = e.type || '?';
           const tool = e.tool ? ' · tool: ' + e.tool : '';
@@ -2562,7 +2577,7 @@ function historyMain() {
           }
           return {
             key,
-            code: String(absIdx + 1).padStart(4, '0'),
+            code: String(total - shown.length + i + 1).padStart(4, '0'),
             rail,
             expanded,  // disclosure state -> kit Row sets aria-expanded
             highlight: q || undefined,
@@ -2802,7 +2817,9 @@ function historySide() {
 function isValidUrl(s) {
   if (!s) return true; // blank = same-origin is valid
   try {
-    const u = new URL(s.startsWith('http') ? s : 'http://' + s);
+    // Only add http:// prefix for schemeless inputs (no ://); inputs with an
+    // explicit non-http scheme (ftp://, ws://) must fail the protocol check.
+    const u = new URL(s.includes('://') ? s : 'http://' + s);
     return u.protocol === 'http:' || u.protocol === 'https:'; // reject ftp:/ws:/etc
   } catch { return false; }
 }
@@ -2812,12 +2829,15 @@ function isValidUrl(s) {
 // becomes the same string we validated. Blank stays blank (same-origin).
 function normalizeBackend(s) {
   if (!s) return '';
-  try { return new URL(s.startsWith('http') ? s : 'http://' + s).origin; }
+  try { return new URL(s.includes('://') ? s : 'http://' + s).origin; }
   catch { return s; }
 }
 
 async function saveBackend() {
-  if (!isValidUrl(state.backendDraft) || state.backendDraft === state.backend) return;
+  if (!isValidUrl(state.backendDraft)) return;
+  // Re-submitting the current URL (e.g. after a failed health check) re-runs
+  // the health probe and shows connecting… so the user gets visible feedback.
+  if (state.backendDraft === state.backend) { state.backendStatus = 'connecting'; render(); await recheckHealth(); return; }
   // Switching backend orphans the local chat transcript (it belongs to the old
   // server's sessions). Confirm once if there's a transcript to lose - and the
   // confirmation binds to the EXACT value confirmed: editing the URL after
@@ -2847,7 +2867,7 @@ function healthSummary() {
   // (connected/offline/connecting) so the same state reads the same word
   // everywhere, instead of the raw health.status ('ok'/'down').
   const connWord = hh.status === 'ok' ? 'connected'
-    : hh.status === 'unknown' ? 'connecting'
+    : hh.status === 'unknown' ? 'connecting…'
     : 'offline';
   bits.push([connWord, 'Backend connection status']);
   if (hh.version) bits.push(['v' + hh.version, 'Server version']);
@@ -2890,8 +2910,7 @@ function settingsMain() {
           label: 'backend url',
           value: state.backendDraft,
           placeholder: '(blank = same origin)',
-          'aria-describedby': !isValid ? 'backend-url-error' : undefined,
-          'aria-invalid': !isValid ? 'true' : 'false',
+          error: !isValid ? 'Invalid URL format' : undefined,
           title: isValid ? 'Enter a valid URL or leave blank for same-origin' : 'Invalid URL format',
           onInput: (v) => {
             state.backendDraft = v;
@@ -2900,7 +2919,6 @@ function settingsMain() {
             render();
           },
         }),
-        !isValid ? h('p', { key: 'err', id: 'backend-url-error', class: 'lede field-error', role: 'alert' }, 'Invalid URL format') : null,
         state.backendStatus === 'connecting' ? h('p', { key: 'bst-connecting', class: 'lede', role: 'status' }, 'connecting…') : null,
         state.backendStatus === 'ok' ? h('p', { key: 'bst-ok', class: 'lede', role: 'status' }, 'connected') : null,
         state.backendStatus === 'failed' ? h('p', { key: 'bst-failed', class: 'lede field-error', role: 'alert' }, 'connection failed - check the URL') : null,
@@ -2911,7 +2929,7 @@ function settingsMain() {
           key: 'savebtn',
           type: 'submit',
           primary: true,
-          disabled: !isValid || state.backendDraft === state.backend || state.backendStatus === 'connecting',
+          disabled: !isValid || state.backendStatus === 'connecting',
           onClick: (e) => { e.preventDefault(); saveBackend(); },
           children: state.backendStatus === 'connecting' ? 'connecting…' : 'save + reconnect',
           title: isValid ? 'Save backend URL and reconnect' : 'Fix URL format first',
@@ -2977,6 +2995,8 @@ function clearLocalData() {
   // defaults with the keys gone.
   state.chat.abort?.abort(); // stop any in-flight stream before we drop the page
   for (const k of ['agentgui.chat', 'agentgui.agent', 'agentgui.model', 'agentgui.cwd', 'agentgui.backend', 'agentgui.live', 'agentgui.files']) lsRemove(k);
+  // Also wipe kit WorkspaceShell layout keys (collapse state + resizer widths).
+  try { for (let i = localStorage.length - 1; i >= 0; i--) { const k = localStorage.key(i); if (k && k.startsWith('ds.ws.')) localStorage.removeItem(k); } } catch {}
   state.chat = { messages: [], busy: false, abort: null, draft: '', resumeSid: null, confirmingEdit: null, totalCost: 0 };
   location.reload();
 }
@@ -3013,7 +3033,7 @@ function preferencesPanel() {
       state.confirmingClearData
         ? Alert({ key: 'cld', kind: 'warn', title: 'Clear all local data?',
             children: [
-              h('span', { key: 'cldtxt' }, 'Removes saved chat, agent/model/cwd, and backend from this browser. This cannot be undone. '),
+              h('span', { key: 'cldtxt' }, 'Removes saved chat, agent/model/cwd, backend, and layout preferences from this browser. This cannot be undone. '),
               Btn({ key: 'cldno', onClick: () => { state.confirmingClearData = false; render(); }, children: 'cancel' }),
               Btn({ key: 'cldyes', danger: true, onClick: clearLocalData, children: 'clear' })] })
         : Btn({ key: 'cldbtn', onClick: clearLocalData, children: 'clear local data' }),
@@ -3046,7 +3066,9 @@ function agentsPanel() {
           const bits = [PROTOCOL_WORDS[a.protocol] || 'agent'];
           if (!avail) bits.push(a.npxInstallable ? 'runs via npx' : 'not installed');
           if (acp) bits.push(acp.healthy ? 'running healthy' : (acp.running ? 'running' : 'stopped'));
-          if (acp && acp.restartCount > 1) bits.push('restarted ' + acp.restartCount + ' times');
+          if (acp && acp.restartCount >= 1) bits.push('restarted ' + acp.restartCount + (acp.restartCount === 1 ? ' time' : ' times'));
+          if (acp && !acp.healthy && acp.providerInfo?.error) bits.push(acp.providerInfo.error);
+          if (acp && acp.idleMs > 3_600_000) bits.push(fmtDuration(acp.idleMs) + ' idle');
           return Row({
             key: 'ag' + a.id,
             rank: String(i + 1).padStart(3, '0'),
@@ -3055,7 +3077,7 @@ function agentsPanel() {
             // Rail tone keeps its GUI-wide meaning: green=ok/selected,
             // flame=error/unavailable. Selection is shown via `active`, not by
             // borrowing purple (purple is reserved for subagents).
-            rail: (a.id === state.selectedAgent || avail) ? 'green' : 'flame',
+            rail: !avail ? 'flame' : (a.id === state.selectedAgent ? 'green' : undefined),
             active: a.id === state.selectedAgent,
             // Non-installable agents are genuinely inert: mark them disabled (no
             // click, no button role) instead of looking clickable but doing nothing.
@@ -3192,6 +3214,8 @@ async function loadSession(sid, { focusEventI = null, focusEventTs = null, fromH
     // whole session) - cap in-memory state at the most-recent 5000 so a
     // monster session can't pin the tab; the render window stays 300+load-older.
     if (state.events.length > 5000) state.events = state.events.slice(-5000);
+    // Stamp stable _idx so EventList keys are stable regardless of slice/cap.
+    state.events.forEach((e, i) => { if (e._idx == null) e._idx = i; });
     clearTimeout(slowTimer);
     state.eventsSlow = false;
     state.eventsLoaded = true;

package/site/app/js/backend.js

@@ -377,6 +377,7 @@ export async function* streamChat(base, { model, messages, signal, agentId, resu
     } else if (ev.type === 'streaming_progress') {
       const block = ev.block;
       if (block?.type === 'text' && block.text) push({ type: 'text', text: block.text });
+      else if (block?.type === 'thinking' && block.thinking) push({ type: 'thinking', text: block.thinking });
       else if (block?.type === 'tool_use') push({ type: 'tool', block });
       else if (block?.type === 'tool_result') push({ type: 'tool_result', block });
       else if (block?.type === 'result') push({ type: 'result', block });

package/site/app/vendor/anentrypoint-design/247420.css

@@ -498,12 +498,12 @@
 .ds-247420 ::selection { background: color-mix(in oklab, var(--accent) 24%, var(--bg-2)); color: var(--fg); }
 
 /* Every root has a CQ container so fluid type can resolve to a meaningful inline-size. */
-.ds-247420 .app, .ds-247420[class*="kit-"], .ds-247420 .ds-stage {
+.ds-247420 .app, .ds-247420 .ds-stage {
   container-type: inline-size;
   overflow-x: clip;
   min-width: 0;
 }
-.ds-247420 .app *, .ds-247420[class*="kit-"] * { min-width: 0; }
+.ds-247420 .app * { min-width: 0; }
 
 /* ============================================================
    Typography
@@ -2675,9 +2675,10 @@
      re-declare it; the sizing block now states the truth). */
   line-height: 1.5; resize: none;
   min-height: 28px; max-height: 200px;
-  box-sizing: border-box; overflow-y: auto;
+  box-sizing: border-box; overflow-y: hidden;
   scrollbar-width: thin;
 }
+.ds-247420 .chat-composer textarea:focus { overflow-y: auto; }
 .ds-247420 .chat-composer textarea::placeholder { color: var(--fg-3); }
 .ds-247420 .chat-composer textarea:focus { background: none; border: none; box-shadow: none; outline: none; }
 .ds-247420 .chat-composer .send {
@@ -3709,6 +3710,7 @@
 @media (pointer: coarse) {
   .ds-247420 .ws-rail-toggle { width: 44px; height: 44px; }
   .ds-247420 .ws-drawer-toggle { width: 44px; height: 44px; }
+  .ds-247420 .ws-desktop-toggle { width: 44px; height: 44px; }
 }
 
 /* Drawer toggles and the scrim are hidden by default and revealed by the staged
@@ -3726,6 +3728,7 @@
    pane becomes a mobile overlay drawer at <=1480px, reached via its own
    drawer-toggle), so hide this crumb control past that breakpoint. */
 @media (max-width: 1480px) { .ds-247420 .ws-pane-toggle { display: none; } }
+@media (max-width: 480px) { .ds-247420 .ws-crumb { padding-left: var(--space-2); padding-right: var(--space-2); } }
 .ds-247420 .ws-scrim { display: none; }
 
 /* Responsive: the columns yield to the CONTENT in stages - the main column is
@@ -7902,9 +7905,6 @@
 .ds-247420 .ds-event-list .row[role="button"]:hover { background: color-mix(in srgb, var(--fg) 5%, transparent); }
 .ds-247420 .ds-event-list .row.event-flash { animation: agentgui-event-flash 2s ease-out; }
 
-/* Chat composer: hide the idle scrollbar on the (empty/short) textarea. */
-.ds-247420 .chat-composer textarea { overflow-y: auto; scrollbar-width: thin; }
-.ds-247420 .chat-composer textarea:not(:focus) { overflow-y: hidden; }
 
 /* Generic interactive focus ring for app-emitted controls. */
 .ds-247420 button:focus-visible,