agentgui 1.0.969 → 1.0.970

package/site/app/index.html

@@ -23,246 +23,11 @@
   <link rel="modulepreload" href="./js/backend.js">
   <link rel="modulepreload" href="./js/codec.js">
   <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
-  <style>
-    :root {
-      --agentgui-bg: #16161a;
-      --agentgui-fg: #e6e6ea;
-      --agentgui-accent: #50c878;
-      --agentgui-warn: #ff6b6b;
-      /* status-dot state colours, brightened for >=3:1 contrast on the dark bg */
-      --agentgui-status-connecting: #f0b84a;
-      --agentgui-status-offline: #e06b66;
-      /* unified muted text fallback (was an inconsistent mix of #888/#999) */
-      --agentgui-muted: #8a8f98;
-    }
-
-    /* visually-hidden but screen-reader-available (aria-live announcer, labels) */
-    .sr-only {
-      position: absolute !important; width: 1px; height: 1px;
-      padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
-      white-space: nowrap; border: 0;
-    }
-    html, body {
-      margin: 0;
-      height: 100%;
-      background: var(--bg, var(--agentgui-bg));
-      color: var(--fg, var(--agentgui-fg));
-      /* The DS exposes --ff-display / --ff-mono (there is no --font-sans), so the
-         old reference fell through to the system font. Use the DS display face. */
-      font-family: var(--ff-display, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
-    }
-    #app { height: 100vh; height: 100dvh; }
-    #app > * { height: 100%; }
-
-    /* Themed thin scrollbars - the native chrome scrollbar is chunky/light and
-       clashes with the dark theme on the history sidebar and settings column. */
-    * {
-      scrollbar-width: thin;
-      scrollbar-color: color-mix(in srgb, var(--fg, var(--agentgui-fg)) 22%, transparent) transparent;
-    }
-    *::-webkit-scrollbar { width: 9px; height: 9px; }
-    *::-webkit-scrollbar-track { background: transparent; }
-    *::-webkit-scrollbar-thumb {
-      background: color-mix(in srgb, var(--fg, var(--agentgui-fg)) 20%, transparent);
-      border-radius: 999px;
-      border: 2px solid transparent;
-      background-clip: padding-box;
-    }
-    *::-webkit-scrollbar-thumb:hover {
-      background: color-mix(in srgb, var(--fg, var(--agentgui-fg)) 34%, transparent);
-      background-clip: padding-box;
-    }
-
-    /* We move focus to the page heading on tab change for AT users; suppress the
-       resulting green outline box on those programmatically-focused elements.
-       !important + .ds-247420 prefix to beat the runtime-injected DS focus rule. */
-    .ds-247420 [data-prog-focus]:focus,
-    .ds-247420 [data-prog-focus]:focus-visible,
-    [data-prog-focus]:focus, [data-prog-focus]:focus-visible { outline: none !important; box-shadow: none !important; }
-
-    /* (The skip link is rendered + styled by the design system's AppShell;
-       agentgui carries no local .skip-link rule.) */
-
-    /* The connection dot's disc + pulse are the KIT's canonical .status-dot-disc
-       (status-dot-live / -connecting / -error) - the app no longer overrides
-       them. Only the inline-flex wrapper layout for the crumb stays local since
-       the kit defines the disc, not this wrapper element. */
-    .status-dot { display: inline-flex; align-items: center; gap: .4em; white-space: nowrap; }
-
-    /* resume banner */
-    .resume-banner {
-      padding: .6em .8em;
-      background: color-mix(in srgb, var(--accent, var(--agentgui-accent)) 12%, transparent);
-      border: 1px solid color-mix(in srgb, var(--accent, var(--agentgui-accent)) 30%, transparent);
-      border-radius: 8px;
-      display: flex; justify-content: space-between; align-items: center; gap: .75em;
-      margin-bottom: .75em;
-    }
-
-    /* history action buttons */
-    .history-actions { display: flex; gap: .5em; padding: 0 0 .75em 0; flex-wrap: wrap; }
-
-    /* empty / loading state */
-    .empty-state { display: flex; gap: 8px; align-items: center; padding: .5em 0; }
-
-    /* project filter pills */
-    .pill-row { display: flex; flex-wrap: wrap; gap: .35em; padding: .35em 0; }
-    .pill {
-      cursor: pointer; padding: .25em .7em; border-radius: 999px;
-      border: 1px solid transparent; background: transparent;
-      font: inherit; color: inherit; line-height: 1.4;
-      transition: background-color .15s ease, border-color .15s ease;
-      min-height: 28px;
-    }
-    .pill:hover { background: color-mix(in srgb, var(--accent, var(--agentgui-accent)) 10%, transparent); }
-    .pill.pill-active {
-      background: color-mix(in srgb, var(--accent, var(--agentgui-accent)) 18%, transparent);
-      border-color: color-mix(in srgb, var(--accent, var(--agentgui-accent)) 40%, transparent);
-    }
-    .pill:focus-visible { outline: 2px solid var(--accent, var(--agentgui-accent)); outline-offset: 2px; }
-
-    /* subagent toggle (the control itself is the kit Checkbox) */
-    .subagent-toggle { padding: .4em 0; min-height: 32px; }
-
-    .field-error { color: var(--warn, var(--agentgui-warn)); }
-
-    /* Boot splash: static text painted with the HTML, replaced by the first
-       mount render - the cold module waterfall no longer reads as a blank page. */
-    .boot-splash { height: 100%; min-height: 60vh; display: flex; align-items: center; justify-content: center; color: var(--agentgui-muted); font-size: .9rem; }
-
-    /* chat control cluster in the crumb bar: model picker, +new, status.
-       Allowed to wrap so it never overflows the crumb on tablet widths. */
-    .chat-controls { display: flex; align-items: center; gap: .6em; flex-wrap: wrap; }
-    .chat-controls > * { flex: 0 0 auto; }
-    .chat-controls select,
-    .chat-controls .select,
-    .chat-controls [role="combobox"] { min-width: 130px; max-width: 220px; }
-    .chat-controls .status-dot { white-space: nowrap; }
-
-    .agentgui-main .ds-section { margin: 0 0 var(--space-4, 16px); }
-
-    /* readable backend health summary (replaces raw JSON dump) */
-    .health-summary { display: flex; flex-wrap: wrap; gap: .4em; margin: .6em 0; }
-    .health-chip {
-      font-family: var(--ff-mono, ui-monospace, monospace);
-      font-size: .8rem; padding: .15em .55em; border-radius: 6px;
-      background: color-mix(in srgb, var(--fg, var(--agentgui-fg)) 8%, transparent);
-      color: var(--fg-2, var(--agentgui-fg));
-      border: 1px solid color-mix(in srgb, var(--fg, var(--agentgui-fg)) 12%, transparent);
-    }
-    .health-summary.health-ok .health-chip:first-child {
-      color: var(--accent, var(--agentgui-accent));
-      border-color: color-mix(in srgb, var(--accent, var(--agentgui-accent)) 40%, transparent);
-    }
-
-    /* (search-input theming now provided by the design system's .ds-search-input
-       + base input rules; the local reskin hack was removed.) */
-
-    /* empty-state: keep it from wrapping awkwardly in the narrow sidebar */
-    .empty-state { white-space: normal; }
-    p.empty-state { text-align: left; padding: .6em 0; color: var(--fg-3, var(--agentgui-muted)); }
-
-    /* generic interactive focus ring */
-    button:focus-visible, [tabindex]:focus-visible, a:focus-visible {
-      outline: 2px solid var(--accent, var(--agentgui-accent)); outline-offset: 2px;
-    }
-
-    /* (Topbar active-tab styling - the subtle tinted underline-pill instead of an
-       oversized filled oval - now ships as the kit default in app-shell.css, so
-       agentgui no longer overrides it here.) */
-
-    /* Compact working-directory bar (replaces the full-width tall banner box). */
-    .cwd-bar {
-      display: flex; align-items: center; gap: .5em; flex-wrap: wrap;
-      padding: .15em 0 .5em; font-size: .85rem;
-    }
-    .cwd-bar-text {
-      font-family: var(--ff-mono, ui-monospace, monospace);
-      color: var(--fg-3, var(--agentgui-muted)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60vw;
-    }
-    .cwd-bar-btn {
-      cursor: pointer; font: inherit; line-height: 1.3;
-      padding: .15em .55em; border-radius: 6px;
-      background: color-mix(in srgb, var(--fg, var(--agentgui-fg)) 8%, transparent);
-      border: 1px solid color-mix(in srgb, var(--fg, var(--agentgui-fg)) 14%, transparent);
-      color: var(--fg-2, var(--agentgui-fg));
-    }
-    .cwd-bar-btn:hover { background: color-mix(in srgb, var(--fg, var(--agentgui-fg)) 14%, transparent); }
-    .cwd-bar-btn:focus-visible { outline: 2px solid var(--accent, var(--agentgui-accent)); outline-offset: 2px; }
-
-    /* History no-session empty state: fill the void with a centered prompt. */
-    .history-empty {
-      display: flex; flex-direction: column; align-items: center; justify-content: center;
-      gap: .4em; text-align: center; min-height: 50vh; color: var(--fg-3, var(--agentgui-muted));
-    }
-    .history-empty-title { margin: 0; font-size: 1.05rem; color: var(--fg-2, var(--agentgui-fg)); }
-    .history-empty-sub { margin: 0; max-width: 42ch; }
-
-    /* Settings: two-column on wide screens (backend + agents) so it uses the
-       full width instead of a cramped centered measure with empty margins. */
-    .settings-grid {
-      display: grid; gap: var(--space-4, 16px);
-      grid-template-columns: minmax(0, 1fr);
-      align-items: start;
-    }
-    @media (min-width: 900px) {
-      .settings-grid { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); }
-    }
-    /* (PageHeader top/bottom margin is now handled by the kit's `compact` prop -
-       agentgui passes compact:true on its leading PageHeaders, so the fragile
-       [class*=page-header] !important overrides are gone.) */
-    .agentgui-main-settings .settings-grid { margin-top: 0; }
-
-    /* The DS Chat head computes its own zero-padded count ("00 msgs") and ignores
-       our sub prop; it reads as a bug. Hide the DS sub - streaming state shows via
-       the title and the busy banner. (The decorative head dot was removed from the
-       kit's Chat component, so it no longer needs hiding here.) */
-    .chat-head .sub { display: none; }
-
-    /* (Row role=button cursor:pointer now ships as a kit default in app-shell.css.)
-       A slightly stronger hover tint for event rows specifically remains local. */
-    .ds-event-list .row[role="button"]:hover { background: color-mix(in srgb, var(--fg, var(--agentgui-fg)) 5%, transparent); }
-    /* Flash the row a search result landed on, so the match is obvious. */
-    .ds-event-list .row.event-flash { animation: agentgui-event-flash 2s ease-out; }
-    @keyframes agentgui-event-flash {
-      0%   { background: color-mix(in srgb, var(--accent, var(--agentgui-accent)) 40%, transparent); }
-      100% { background: transparent; }
-    }
-    @media (prefers-reduced-motion: reduce) {
-      .ds-event-list .row.event-flash { animation: none; outline: 2px solid var(--accent, var(--agentgui-accent)); }
-    }
-
-    /* Chat composer: hide the idle scrollbar on the (empty/short) textarea. */
-    .chat-composer textarea { overflow-y: auto; scrollbar-width: thin; }
-    .chat-composer textarea:not(:focus) { overflow-y: hidden; }
-
-    /* tablet: keep the chat control cluster from wrapping the status dot alone */
-    @media (max-width: 900px) {
-      .chat-controls select,
-      .chat-controls .select,
-      .chat-controls [role="combobox"] { min-width: 110px; max-width: 170px; }
-    }
-
-    /* touch targets on small screens */
-    @media (max-width: 640px) {
-      .pill { min-height: 36px; padding: .4em .8em; }
-      .history-actions { gap: .75em; }
-      .history-actions .btn, .history-actions button { min-height: 44px; }
-      /* cwd path can't eat the whole row beside its label + buttons on a phone */
-      .cwd-bar-text { max-width: 42vw; }
-      .cwd-bar { gap: .3em; }
-    }
-
-    @media print {
-      #app { min-height: auto; display: block; height: auto; }
-      .skip-link, .status-dot, .history-actions, .chat-composer { display: none !important; }
-      /* Drop chrome backgrounds/shadows for ink-saving, but preserve code
-         highlighting and rail colors (don't nuke every color to black). */
-      .app, .app-main, .panel, .chat, .chat-thread {
-        background: #fff !important; color: #000 !important; box-shadow: none !important;
-      }
-    }
-  </style>
+  <!-- No design content lives here. Every agentgui application-surface style
+       (pills, cwd bar, resume banner, health chips, settings grid, history
+       empty state, boot splash, scrollbar theming, focus rings, print) now
+       lives in the kit at ../design/app-surfaces.css and ships in the vendored
+       247420.css bundle, scoped under .ds-247420. The kit owns all design. -->
 </head>
 <body>
   <div id="app"><div class="boot-splash" role="status">loading agentgui…</div></div>

package/site/app/js/app.js

@@ -562,14 +562,11 @@ function view() {
     right: [agentLabel, 'press ? for shortcuts'],
   });
 
-  const mainStyle = state.tab === 'chat'
-    ? 'min-height:0;display:flex;flex-direction:column;flex:1'
-    : 'min-height:0';
   const shortcutsHint = state.showShortcuts
     ? Alert({ key: 'sc', kind: 'info', title: 'Keyboard shortcuts',
         children: SHORTCUTS.map(s => s.keys + ' - ' + s.desc).join(' · ') })
     : null;
-  const main = h('div', { id: 'agentgui-main', role: 'region', 'aria-label': 'main content', 'data-chat-scroll': '', class: 'agentgui-main agentgui-main-' + state.tab, style: mainStyle }, [shortcutsHint, ...mainContent()].filter(Boolean));
+  const main = h('div', { id: 'agentgui-main', role: 'region', 'aria-label': 'main content', 'data-chat-scroll': '', class: 'agentgui-main agentgui-main-' + state.tab }, [shortcutsHint, ...mainContent()].filter(Boolean));
 
   // Claude-Desktop three-column shell: a persistent left rail (workspace nav), an
   // optional sessions column (chat + history share the conversation list), the
@@ -2883,7 +2880,7 @@ function settingsMain() {
         key: 'backendForm',
         onSubmit: (e) => { e.preventDefault(); saveBackend(); },
       }, [
-        h('p', { key: 'blede', class: 'lede', style: 'margin:0 0 .5em',
+        h('p', { key: 'blede', class: 'lede agentgui-field-mb',
           title: 'Also settable with a ?backend= URL parameter; the value persists in this browser.' },
           'Connect to a different agentgui server. Leave blank to use this one.'),
         TextField({
@@ -2927,7 +2924,7 @@ function settingsMain() {
       id: 'appearance',
       title: 'appearance',
       children: [
-        h('div', { key: 'apl', class: 'lede', style: 'margin-bottom:.5em' }, 'theme - follows the OS in auto, or pick light/dark.'),
+        h('div', { key: 'apl', class: 'lede agentgui-field-mb' }, 'theme - follows the OS in auto, or pick light/dark.'),
         ThemeToggle({ key: 'tt' }),
       ],
     }),
@@ -3003,14 +3000,14 @@ function preferencesPanel() {
       (window.__SERVER_VERSION && window.__SERVER_VERSION !== hh.version)
         ? h('div', { key: 'ver', class: 'lede' }, 'build ' + window.__SERVER_VERSION)
         : null,
-      h('div', { key: 'lsize', class: 'lede', style: 'margin:.5em 0' },
+      h('div', { key: 'lsize', class: 'lede agentgui-field-my' },
         'local data: ' + fmtBytes(lsBytes) + ' across ' + lsKeys + ' key' + (lsKeys === 1 ? '' : 's')),
-      h('div', { key: 'expchatrow', style: 'margin:.5em 0' },
+      h('div', { key: 'expchatrow', class: 'agentgui-field-my' },
         Btn({ key: 'expchat', disabled: !savedChat,
           title: savedChat ? 'Download the saved chat transcript as JSON' : 'no saved chat',
           onClick: savedChat ? () => downloadBlob(savedChat, 'agentgui-chat-' + dateStamp() + '.json', 'application/json') : undefined,
           children: savedChat ? 'export chat' : 'no saved chat' })),
-      h('div', { key: 'cwdnote', class: 'lede', style: 'margin:.5em 0' },
+      h('div', { key: 'cwdnote', class: 'lede agentgui-field-my' },
         'working directory: set per-chat in the chat composer’s cwd bar' + (state.chatCwd ? ' (current: ' + state.chatCwd + ')' : ' (currently: server default)')),
       state.confirmingClearData
         ? Alert({ key: 'cld', kind: 'warn', title: 'Clear all local data?',
@@ -3039,7 +3036,7 @@ function agentsPanel() {
     // on-demand and restarted with backoff by the server, so there are no
     // manual start/stop controls by design. This note makes that explicit so
     // a 'stopped' row doesn't read as a missing action.
-    hasAcp ? h('p', { key: 'acpnote', class: 'lede', style: 'margin:0 0 .5em' }, 'ACP agents start on demand and restart automatically; selecting one launches it.') : null,
+    hasAcp ? h('p', { key: 'acpnote', class: 'lede agentgui-field-mb' }, 'ACP agents start on demand and restart automatically; selecting one launches it.') : null,
     ...(state.agents.length
       ? state.agents.map((a, i) => {
           const acp = acpStatusFor(a.id);