broapp 0.4.4 → 0.4.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "broapp",
-  "version": "0.4.4",
+  "version": "0.4.6",
   "type": "module",
   "description": "Build tooling and runtime for local applications made of a Bun host, a browser UI, and a Brobridge connection between them",
   "license": "MIT",

package/src/ai/host/create-ai.ts

@@ -39,6 +39,8 @@ export interface RunEndDetail {
   /** Tool round trips the turn made. */
   readonly steps: number;
   readonly ms: number;
+  /** The model the turn was sent to; absent when the turn ended before one was resolved. */
+  readonly modelId?: string;
 }
 
 /**
@@ -165,6 +167,13 @@ export interface CreateAiOptions {
    * reason to fail it.
    */
   readonly onContext?: (runId: string, delivered: DeliveredContext) => void;
+  /**
+   * Called after each completed model step of a turn, with the tokens its
+   * completed steps have used so far: what a running turn has cost, before
+   * `onRunEnd` says what it cost in all. A hook that throws is logged and
+   * ignored, like the others.
+   */
+  readonly onUsageSoFar?: (runId: string, soFar: { inputTokens: number; outputTokens: number }) => void;
 }
 
 /**
@@ -334,6 +343,7 @@ export function createAi(options: CreateAiOptions): Ai {
     approvals,
     ...(options.onRunEnd === undefined ? {} : { onRunEnd: options.onRunEnd }),
     ...(options.onContext === undefined ? {} : { onContext: options.onContext }),
+    ...(options.onUsageSoFar === undefined ? {} : { onUsageSoFar: options.onUsageSoFar }),
     transcripts: {
       save: (runId, messages) => {
         threadStore().saveTranscript(runId, messages);

package/src/ai/host/run.ts

@@ -75,6 +75,13 @@ export interface RunDeps {
   ) => void;
   /** Called once per turn with what the model is about to be given. */
   readonly onContext?: (runId: string, delivered: DeliveredContext) => void;
+  /**
+   * Called after each model step completes, with what the turn's completed
+   * steps have used so far. Not the SDK's `onStepEnd`, which this layer
+   * already hands to `streamText`: this is the turn's running subtotal, for
+   * somebody who wants to say what a turn has cost before it ends.
+   */
+  readonly onUsageSoFar?: (runId: string, soFar: { inputTokens: number; outputTokens: number }) => void;
   /**
    * The turn transcripts. Absent, every history turn is text and nothing is
    * written, which is exactly the layer before transcripts existed.
@@ -95,6 +102,8 @@ interface TurnTally {
   stepsEnded: number;
   stepInput: number;
   stepOutput: number;
+  /** The model the turn was sent to, once it is resolved. */
+  modelId?: string;
 }
 
 /**
@@ -798,6 +807,7 @@ export async function runChat(
       steps: tally.steps,
       ms: Date.now() - started,
       ...(tally.usage === undefined ? {} : { usage: tally.usage }),
+      ...(tally.modelId === undefined ? {} : { modelId: tally.modelId }),
     };
     safely(deps.logger, 'onRunEnd', () =>
       onRunEnd(params.runId, status, params.message.slice(0, SUMMARY_CHARS), detail),
@@ -860,6 +870,9 @@ async function runTurn(
   // after the provider and key checks, so the vision check below and the model
   // instance built later both follow it without a second code path.
   const resolved = await deps.registry.resolve({ modelId: params.modelId });
+  // Known here and nowhere later: a listener writing down what the turn used
+  // is told which model used it, not left to guess from settings since changed.
+  tally.modelId = resolved.modelId;
 
   // Both checks come before anything is emitted, so a turn that cannot carry
   // its images fails as a whole rather than half-answering.
@@ -930,6 +943,11 @@ async function runTurn(
       tally.stepsEnded += 1;
       tally.stepInput += step.usage.inputTokens ?? 0;
       tally.stepOutput += step.usage.outputTokens ?? 0;
+      const onUsageSoFar = deps.onUsageSoFar;
+      if (onUsageSoFar !== undefined) {
+        const soFar = { inputTokens: tally.stepInput, outputTokens: tally.stepOutput };
+        safely(deps.logger, 'onUsageSoFar', () => onUsageSoFar(params.runId, soFar));
+      }
     },
   });
 

package/src/ai/react/AiSettings.tsx

@@ -8,6 +8,10 @@
  * interface. And the data notice is always visible once a provider is chosen,
  * because "where do my notes go" is not a question a user should have to open
  * a menu to answer.
+ *
+ * Every control carries two classes: the application's own (`input`, `button`)
+ * so a host that styles those still reaches it, and an `ai-settings__` one that
+ * `ai.css` dresses, so the panel is whole in a host that styles neither.
  */
 import * as React from 'react';
 
@@ -17,14 +21,79 @@ import { useAiSettings, type ConnectionResult } from './use-ai-settings.ts';
 /** Shown while nothing is chosen. */
 const NOT_SET_UP = 'Not set up';
 
+/*
+ * The icons are drawn here rather than imported: this package has no icon
+ * dependency, and a Broapp page may load nothing from off-origin.
+ */
+function Icon({ children }: { children: React.ReactNode }): React.ReactElement {
+  return (
+    <svg
+      aria-hidden="true"
+      className="ai-settings__icon"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      viewBox="0 0 24 24"
+    >
+      {children}
+    </svg>
+  );
+}
+
+const ChevronIcon = (): React.ReactElement => (
+  <Icon>
+    <path d="m6 9 6 6 6-6" />
+  </Icon>
+);
+
+const KeyIcon = (): React.ReactElement => (
+  <Icon>
+    <path d="m15.5 7.5 2.3 2.3a1 1 0 0 0 1.4 0l2.1-2.1a1 1 0 0 0 0-1.4L19 4" />
+    <path d="m21 2-9.6 9.6" />
+    <circle cx="7.5" cy="15.5" r="5.5" />
+  </Icon>
+);
+
+const RefreshIcon = (): React.ReactElement => (
+  <Icon>
+    <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" />
+    <path d="M21 3v5h-5" />
+    <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" />
+    <path d="M8 16H3v5" />
+  </Icon>
+);
+
+const InfoIcon = (): React.ReactElement => (
+  <Icon>
+    <circle cx="12" cy="12" r="10" />
+    <path d="M12 16v-4" />
+    <path d="M12 8h.01" />
+  </Icon>
+);
+
+/** A select with the panel's own chevron: `ai.css` may not use `url()`. */
+function Select(props: React.ComponentProps<'select'>): React.ReactElement {
+  return (
+    <span className="ai-settings__select">
+      <select {...props} className="input input--select ai-settings__input" />
+      <ChevronIcon />
+    </span>
+  );
+}
+
 export function AiSettings(): React.ReactElement {
   const { settings, providers, pending, error, update, test } = useAiSettings();
   const models = useAiModels();
   const [key, setKey] = React.useState('');
+  const [replacing, setReplacing] = React.useState(false);
   const [baseUrl, setBaseUrl] = React.useState<string | null>(null);
+  const [testing, setTesting] = React.useState(false);
   const [result, setResult] = React.useState<ConnectionResult | null>(null);
 
   const provider = providers.find((entry) => entry.id === settings?.provider) ?? null;
+  const hasKey = settings?.hasKey === true;
   // The input tracks the saved value until the user types, at which point
   // their draft wins until it is saved on blur.
   const urlValue = baseUrl ?? settings?.baseUrl ?? '';
@@ -33,6 +102,7 @@ export function AiSettings(): React.ReactElement {
     setResult(null);
     setBaseUrl(null);
     setKey('');
+    setReplacing(false);
     await update(id === '' ? { provider: undefined } : { provider: id });
   };
 
@@ -40,26 +110,36 @@ export function AiSettings(): React.ReactElement {
     if (key === '') return;
     await update({ apiKey: key });
     setKey('');
+    setReplacing(false);
+  };
+
+  const onTest = async (): Promise<void> => {
+    setTesting(true);
+    setResult(null);
+    setResult(await test());
+    setTesting(false);
   };
 
   return (
     <section className="card ai-settings" aria-labelledby="ai-settings-title">
-      <h2 className="card__title" id="ai-settings-title">
-        AI
-      </h2>
+      <header className="ai-settings__header">
+        <h2 className="card__title ai-settings__title" id="ai-settings-title">
+          AI connection
+        </h2>
+        <p className="ai-settings__lede">Choose how your assistant connects.</p>
+      </header>
 
       {error !== null ? (
-        <p className="message message--error" role="alert">
+        <p className="message message--error ai-settings__message ai-settings__message--error" role="alert">
           {error.message}
         </p>
       ) : null}
 
-      <div className="form__row">
-        <label className="form__label" htmlFor="ai-provider">
+      <div className="form__row ai-settings__field">
+        <label className="form__label ai-settings__label" htmlFor="ai-provider">
           Provider
         </label>
-        <select
-          className="input input--select"
+        <Select
           id="ai-provider"
           disabled={pending}
           value={settings?.provider ?? ''}
@@ -71,23 +151,31 @@ export function AiSettings(): React.ReactElement {
               {entry.label}
             </option>
           ))}
-        </select>
+        </Select>
       </div>
 
       {provider === null ? null : (
         <>
           {provider.needs.baseUrl === 'none' ? null : (
-            <div className="form__row">
-              <label className="form__label" htmlFor="ai-base-url">
-                Server address{provider.needs.baseUrl === 'required' ? ' (required)' : ''}
-              </label>
+            <div className="form__row ai-settings__field">
+              <div className="ai-settings__label-row">
+                <label className="form__label ai-settings__label" htmlFor="ai-base-url">
+                  Server address
+                </label>
+                {provider.needs.baseUrl === 'required' ? (
+                  <span className="ai-settings__meta" id="ai-base-url-meta">
+                    Required
+                  </span>
+                ) : null}
+              </div>
               <input
-                className="input"
+                className="input ai-settings__input"
                 id="ai-base-url"
                 type="url"
                 autoComplete="off"
                 spellCheck={false}
                 disabled={pending}
+                aria-describedby={provider.needs.baseUrl === 'required' ? 'ai-base-url-meta' : undefined}
                 placeholder={provider.defaultBaseUrl ?? 'http://127.0.0.1:11434/v1'}
                 value={urlValue}
                 onChange={(event) => setBaseUrl(event.target.value)}
@@ -102,120 +190,173 @@ export function AiSettings(): React.ReactElement {
           )}
 
           {provider.needs.apiKey === 'none' ? null : (
-            <div className="form__row">
-              <label className="form__label" htmlFor="ai-key">
-                API key{provider.needs.apiKey === 'optional' ? ' (optional)' : ''}
-              </label>
-              {provider.needs.apiKey === 'optional' ? (
-                <p className="form__hint">
-                  Needed for a hosted service such as OpenRouter. Leave empty for a server on this
-                  computer that does not ask for one.
-                </p>
-              ) : null}
-              <div className="ai-settings__key">
-                <input
-                  className="input"
-                  id="ai-key"
-                  type="password"
-                  autoComplete="off"
-                  spellCheck={false}
-                  disabled={pending}
-                  placeholder={settings?.hasKey === true ? 'Replace the saved key' : 'Paste the key'}
-                  value={key}
-                  onChange={(event) => setKey(event.target.value)}
-                  onBlur={() => void onSaveKey()}
-                />
-                <button
-                  className="button button--primary"
-                  type="button"
-                  disabled={pending || key === ''}
-                  onClick={() => void onSaveKey()}
-                >
-                  Save key
-                </button>
+            <>
+              <div className="form__row ai-settings__field">
+                <div className="ai-settings__label-row">
+                  <label className="form__label ai-settings__label" htmlFor="ai-key" id="ai-key-label">
+                    API key
+                  </label>
+                  <span
+                    className={`ai-settings__meta${hasKey ? ' ai-settings__meta--ok' : ''}`}
+                    id="ai-key-meta"
+                  >
+                    {hasKey ? 'Saved' : provider.needs.apiKey === 'optional' ? 'Optional' : 'Required'}
+                  </span>
+                </div>
+                {hasKey && !replacing ? (
+                  // The saved key is never in the page: only its last characters.
+                  <div className="ai-settings__saved-key" role="group" aria-labelledby="ai-key-label ai-key-meta">
+                    <KeyIcon />
+                    <span className="ai-settings__key-hint">
+                      <span aria-hidden="true">•••••••••</span>
+                      <span className="ai-settings__sr">A key ending in </span>
+                      {settings?.keyHint ?? '…'}
+                    </span>
+                    <button
+                      className="ai-settings__inline-action"
+                      type="button"
+                      disabled={pending}
+                      onClick={() => setReplacing(true)}
+                    >
+                      Replace
+                    </button>
+                    <button
+                      className="ai-settings__inline-action"
+                      type="button"
+                      disabled={pending}
+                      onClick={() => void update({ apiKey: null })}
+                    >
+                      Remove
+                    </button>
+                  </div>
+                ) : (
+                  <div className="ai-settings__key">
+                    <input
+                      className="input ai-settings__input"
+                      id="ai-key"
+                      type="password"
+                      autoComplete="off"
+                      spellCheck={false}
+                      // Replace was just pressed: the field is why.
+                      autoFocus={replacing}
+                      disabled={pending}
+                      aria-describedby="ai-key-meta"
+                      placeholder={hasKey ? 'Paste the new key' : 'Paste the key'}
+                      value={key}
+                      onChange={(event) => setKey(event.target.value)}
+                      onBlur={() => void onSaveKey()}
+                    />
+                    <button
+                      className="button button--primary ai-settings__button ai-settings__button--primary"
+                      type="button"
+                      disabled={pending || key === ''}
+                      onClick={() => void onSaveKey()}
+                    >
+                      Save
+                    </button>
+                    {replacing ? (
+                      <button
+                        className="button ai-settings__button"
+                        type="button"
+                        // Keeps the field's blur — which saves — from running first.
+                        onMouseDown={(event) => event.preventDefault()}
+                        onClick={() => {
+                          setKey('');
+                          setReplacing(false);
+                        }}
+                      >
+                        Cancel
+                      </button>
+                    ) : null}
+                  </div>
+                )}
+                {provider.needs.apiKey === 'optional' ? (
+                  <p className="form__hint ai-settings__hint">
+                    Required for hosted services. Optional for local servers.
+                  </p>
+                ) : null}
               </div>
-              {settings?.hasKey === true ? (
-                <p className="form__hint">
-                  A key ending in {settings.keyHint ?? '…'} is saved.{' '}
-                  <button
-                    className="button"
-                    type="button"
+
+              <div className="form__row ai-settings__field">
+                <label className="ai-settings__switch-row" htmlFor="ai-remember">
+                  <span className="ai-settings__label">Remember key on this computer</span>
+                  <input
+                    className="ai-settings__switch"
+                    id="ai-remember"
+                    type="checkbox"
+                    role="switch"
                     disabled={pending}
-                    onClick={() => void update({ apiKey: null })}
-                  >
-                    Remove key
-                  </button>
+                    aria-describedby="ai-remember-hint"
+                    checked={settings?.remember ?? true}
+                    onChange={(event) => void update({ remember: event.target.checked })}
+                  />
+                </label>
+                <p className="form__hint ai-settings__hint" id="ai-remember-hint">
+                  Saved in the app&rsquo;s data folder, accessible to your account. Turn off to keep
+                  the key only until the app closes.
                 </p>
-              ) : null}
-              <label className="form__label ai-settings__remember" htmlFor="ai-remember">
-                <input
-                  id="ai-remember"
-                  type="checkbox"
-                  disabled={pending}
-                  checked={settings?.remember ?? true}
-                  onChange={(event) => void update({ remember: event.target.checked })}
-                />
-                Remember key on this computer
-              </label>
-              <p className="form__hint">
-                Stored in this application&rsquo;s data folder, readable by your user account. Turn
-                off to keep it only until the app closes.
-              </p>
-            </div>
+              </div>
+            </>
           )}
 
-          <div className="form__row">
-            <label className="form__label" htmlFor="ai-model">
-              Model
-            </label>
-            <div className="ai-settings__key">
-              <select
-                className="input input--select"
-                id="ai-model"
-                disabled={pending || models.pending}
-                value={settings?.modelId ?? ''}
-                onChange={(event) => void update({ modelId: event.target.value })}
-              >
-                <option value="">{models.pending ? 'Loading…' : 'Choose a model'}</option>
-                {models.models.map((model) => (
-                  <option key={model.modelId} value={model.modelId}>
-                    {model.label}
-                  </option>
-                ))}
-              </select>
+          <div className="form__row ai-settings__field">
+            <div className="ai-settings__label-row">
+              <label className="form__label ai-settings__label" htmlFor="ai-model">
+                Model
+              </label>
               <button
-                className="button"
+                className="ai-settings__inline-action ai-settings__inline-action--icon"
                 type="button"
                 disabled={models.pending}
                 onClick={() => void models.refresh()}
               >
+                <RefreshIcon />
                 Refresh
               </button>
             </div>
+            <Select
+              id="ai-model"
+              disabled={pending || models.pending}
+              value={settings?.modelId ?? ''}
+              onChange={(event) => void update({ modelId: event.target.value })}
+            >
+              <option value="">{models.pending ? 'Loading…' : 'Choose a model'}</option>
+              {models.models.map((model) => (
+                <option key={model.modelId} value={model.modelId}>
+                  {model.label}
+                </option>
+              ))}
+            </Select>
             {models.error === null ? null : (
-              <p className="message message--error" role="alert">
+              <p className="message message--error ai-settings__message ai-settings__message--error" role="alert">
                 {models.error.message}
               </p>
             )}
           </div>
 
           <p className="ai-settings__notice" role="status">
-            {provider.local
-              ? 'Runs on this computer. Nothing is sent over the internet.'
-              : `Messages, the documents you are viewing, and search results are sent to ${provider.label} to generate answers.`}
+            <InfoIcon />
+            <span>
+              {provider.local
+                ? 'Runs on this computer. Nothing is sent over the internet.'
+                : `Messages, open documents and search results are sent to ${provider.label} to generate answers.`}
+            </span>
           </p>
 
-          <div className="form__row">
+          <div className="form__row ai-settings__field">
             <button
-              className="button button--primary"
+              className="button button--primary ai-settings__button ai-settings__button--primary ai-settings__button--block"
               type="button"
               disabled={pending}
-              onClick={() => void test().then(setResult)}
+              onClick={() => void onTest()}
             >
-              Test connection
+              {testing ? 'Testing…' : 'Test connection'}
             </button>
             {result === null ? null : (
-              <p className={`message ${result.ok ? 'message--ok' : 'message--error'}`} role="status">
+              <p
+                className={`message ${result.ok ? 'message--ok' : 'message--error'} ai-settings__message ai-settings__message--${result.ok ? 'ok' : 'error'}`}
+                role="status"
+              >
                 {result.message}
                 {result.ok ? ` (${String(result.latencyMs)} ms)` : ''}
               </p>

package/src/ai/react/ai.css

@@ -9,23 +9,332 @@
  * components are still legible in an application that defines none.
  */
 
+/*
+ * The settings panel.
+ *
+ * One height, one radius and one border for every control, so a select, a
+ * field, the saved-key row and a button beside them sit on one line and read
+ * as one set. The frame — a card, or none — is the application's to draw.
+ *
+ * The lengths follow Autoapp's control tokens where an application has them,
+ * so this panel and a form the renderer draws on the same page are one set of
+ * controls; each falls back to that token's default, so an application with no
+ * renderer gets the same panel. An `--ai-*` property set on `.ai-settings` or
+ * above it beats both.
+ */
+.ai-settings {
+  --ai-control-height: 2.5rem;
+  --ai-control-radius: var(--autoapp-radius-sm, 7px);
+  --ai-border-width: var(--autoapp-border-width, 1px);
+  --ai-label-size: var(--autoapp-font-size-small, 0.85rem);
+  --ai-label-weight: var(--autoapp-weight-strong, 600);
+  --ai-control-size: var(--autoapp-font-size-note, 0.9rem);
+  --ai-hint-size: var(--autoapp-font-size-caption, 0.8rem);
+  --ai-focus-ring: var(--autoapp-focus-ring, var(--accent, #1f5f4f));
+  --ai-focus-ring-width: var(--autoapp-focus-ring-width, 2px);
+  --ai-focus-ring-offset: var(--autoapp-focus-ring-offset, 1px);
+
+  display: flex;
+  flex-direction: column;
+  gap: 1.1rem;
+}
+
+.ai-settings__header {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+}
+
+.ai-settings__title {
+  margin: 0;
+}
+
+.ai-settings__lede {
+  margin: 0;
+  color: var(--text-muted, #6b6862);
+}
+
+.ai-settings__field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  margin: 0;
+}
+
+.ai-settings__label-row {
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.ai-settings__label {
+  margin: 0;
+  font-size: var(--ai-label-size);
+  font-weight: var(--ai-label-weight);
+  color: var(--text, #1b1a18);
+}
+
+.ai-settings__meta {
+  font-size: var(--ai-hint-size);
+  color: var(--text-muted, #6b6862);
+}
+
+.ai-settings__meta--ok {
+  color: var(--ok, #1f5f4f);
+}
+
+.ai-settings__hint {
+  margin: 0;
+  font-size: var(--ai-hint-size);
+  line-height: 1.45;
+  color: var(--text-muted, #6b6862);
+}
+
+.ai-settings__icon {
+  flex: none;
+  width: 1rem;
+  height: 1rem;
+}
+
+.ai-settings__input,
+.ai-settings__saved-key {
+  width: 100%;
+  min-width: 0;
+  height: var(--ai-control-height);
+  padding: 0 0.75rem;
+  border: var(--ai-border-width) solid var(--border, #e3e2df);
+  border-radius: var(--ai-control-radius);
+  background: var(--surface, #ffffff);
+  font: inherit;
+  font-size: var(--ai-control-size);
+  color: var(--text, #1b1a18);
+}
+
+.ai-settings__input::placeholder {
+  color: var(--text-muted, #6b6862);
+  opacity: 0.8;
+}
+
+.ai-settings__input:hover:not(:disabled) {
+  border-color: var(--text-muted, #6b6862);
+}
+
+.ai-settings__input:focus-visible,
+.ai-settings__button:focus-visible,
+.ai-settings__inline-action:focus-visible,
+.ai-settings__switch:focus-visible {
+  outline: var(--ai-focus-ring-width) solid var(--ai-focus-ring);
+  outline-offset: var(--ai-focus-ring-offset);
+}
+
+.ai-settings__input:disabled {
+  opacity: 0.6;
+}
+
+.ai-settings__select {
+  position: relative;
+  display: block;
+}
+
+.ai-settings__select select {
+  appearance: none;
+  padding-right: 2.25rem;
+  text-overflow: ellipsis;
+}
+
+.ai-settings__select .ai-settings__icon {
+  position: absolute;
+  top: 50%;
+  right: 0.75rem;
+  translate: 0 -50%;
+  color: var(--text-muted, #6b6862);
+  pointer-events: none;
+}
+
 .ai-settings__key {
   display: flex;
   gap: 0.5rem;
   align-items: center;
 }
 
-.ai-settings__key .input {
+/* The saved key: what a field looks like when there is nothing to type. */
+.ai-settings__saved-key {
+  display: flex;
+  gap: 0.6rem;
+  align-items: center;
+  padding-right: 0.25rem;
+}
+
+.ai-settings__saved-key .ai-settings__icon {
+  color: var(--text-muted, #6b6862);
+}
+
+.ai-settings__key-hint {
   flex: 1 1 auto;
   min-width: 0;
+  overflow: hidden;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.85rem;
+  letter-spacing: 0.04em;
+  white-space: nowrap;
+}
+
+.ai-settings__sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+/* A quiet action inside a row: Replace, Remove, Refresh. */
+.ai-settings__inline-action {
+  display: inline-flex;
+  flex: none;
+  gap: 0.35rem;
+  align-items: center;
+  padding: 0.3rem 0.55rem;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  font: inherit;
+  font-size: 0.85rem;
+  font-weight: 500;
+  color: var(--text-muted, #6b6862);
+  cursor: pointer;
+}
+
+.ai-settings__inline-action:hover:not(:disabled) {
+  background: var(--bg, #fbfbfa);
+  color: var(--text, #1b1a18);
+}
+
+.ai-settings__inline-action:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.ai-settings__saved-key .ai-settings__inline-action + .ai-settings__inline-action {
+  position: relative;
+  margin-left: 0.3rem;
+}
+
+.ai-settings__saved-key .ai-settings__inline-action + .ai-settings__inline-action::before {
+  position: absolute;
+  top: 20%;
+  bottom: 20%;
+  left: -0.2rem;
+  width: 1px;
+  background: var(--border, #e3e2df);
+  content: '';
+}
+
+/* Pulled up so the label row is no taller than one without a button. */
+.ai-settings__inline-action--icon {
+  margin: -0.3rem -0.55rem -0.3rem 0;
+}
+
+.ai-settings__button {
+  flex: none;
+  height: var(--ai-control-height);
+  padding: 0 1rem;
+  border: var(--ai-border-width) solid var(--border, #e3e2df);
+  border-radius: var(--ai-control-radius);
+  background: var(--surface, #ffffff);
+  font: inherit;
+  font-size: var(--ai-control-size);
+  font-weight: var(--ai-label-weight);
+  color: var(--text, #1b1a18);
+  cursor: pointer;
+  transition: filter 150ms ease-out;
+}
+
+.ai-settings__button--primary {
+  border-color: transparent;
+  background: var(--accent, #1f5f4f);
+  color: var(--accent-contrast, #ffffff);
+}
+
+.ai-settings__button--block {
+  width: 100%;
+}
+
+.ai-settings__button:hover:not(:disabled) {
+  filter: brightness(1.08);
+}
+
+.ai-settings__button:active:not(:disabled) {
+  filter: brightness(0.95);
 }
 
-.ai-settings__remember {
+.ai-settings__button:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.ai-settings__switch-row {
   display: flex;
-  gap: 0.5rem;
+  gap: 1rem;
   align-items: center;
-  margin-top: 0.75rem;
-  font-weight: 400;
+  justify-content: space-between;
+  cursor: pointer;
+}
+
+/* A checkbox, drawn as the switch it is announced as. */
+.ai-settings__switch {
+  position: relative;
+  flex: none;
+  width: 2.25rem;
+  height: 1.3rem;
+  margin: 0;
+  border: var(--ai-border-width) solid var(--border, #e3e2df);
+  border-radius: 999px;
+  background: var(--bg, #fbfbfa);
+  appearance: none;
+  cursor: pointer;
+  transition:
+    background-color 150ms ease-out,
+    border-color 150ms ease-out;
+}
+
+.ai-settings__switch::after {
+  position: absolute;
+  top: 50%;
+  left: 0.15rem;
+  width: 0.9rem;
+  height: 0.9rem;
+  border-radius: 50%;
+  background: var(--text-muted, #6b6862);
+  content: '';
+  translate: 0 -50%;
+  transition:
+    translate 150ms cubic-bezier(0.25, 1, 0.5, 1),
+    background-color 150ms ease-out;
+}
+
+.ai-settings__switch:checked {
+  border-color: transparent;
+  background: var(--accent, #1f5f4f);
+}
+
+.ai-settings__switch:checked::after {
+  background: var(--accent-contrast, #ffffff);
+  translate: 0.95rem -50%;
+}
+
+.ai-settings__switch:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ai-settings__switch,
+  .ai-settings__switch::after,
+  .ai-settings__button {
+    transition: none;
+  }
 }
 
 /*
@@ -33,12 +342,31 @@
  * question a user should have to open a menu to answer.
  */
 .ai-settings__notice {
-  margin: 0.75rem 0;
-  padding: 0.6rem 0.75rem;
-  border: 1px solid var(--border, #e3e2df);
-  border-radius: var(--radius, 10px);
+  display: flex;
+  gap: 0.6rem;
+  align-items: flex-start;
+  margin: 0;
   color: var(--text-muted, #6b6862);
-  font-size: 0.9rem;
+  font-size: 0.85rem;
+  line-height: 1.45;
+}
+
+.ai-settings__notice .ai-settings__icon {
+  margin-top: 0.15rem;
+}
+
+.ai-settings__message {
+  margin: 0;
+  font-size: 0.85rem;
+  line-height: 1.45;
+}
+
+.ai-settings__message--error {
+  color: var(--bad, #96311f);
+}
+
+.ai-settings__message--ok {
+  color: var(--ok, #1f5f4f);
 }
 
 .ai-chat__messages {