@contraagent/ui 0.0.0-stage → 0.2.0

package/src/elements/shell/ca-run-picker.ts

@@ -0,0 +1,284 @@
+import { elapsedS, hostGroups, hostOf, runActivity, runIdOf, type HostSummary, type RunSummary } from '@contraagent/api';
+import { localized, msg, str } from '@lit/localize';
+import { LitElement, css, html, nothing } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { emit } from '../../core/events.js';
+import type { Page } from '../../core/view-route.js';
+import { trendsTitle, trendsTip } from '../../words/trends.js';
+import { facts, fmtDur, localTime, relAgo, usd } from '../../words/format.js';
+import { runMark, stateCount } from '../../words/index.js';
+import { accountsLine, accountsTip } from '../../words/quota.js';
+import { hostFact, noReportLabel, hostStateSince, hostsLine, lastReport, runCount } from '../../words/hosts.js';
+import { runTone } from '../../lib/tone.js';
+import { toneAttr } from '@contraagent/elements';
+import { pill, statusWord } from '@contraagent/elements/primitives';
+import { base } from '@contraagent/elements/styles';
+
+const took = (r: RunSummary) => elapsedS(r);
+
+/** The id of the option at `i` in the visible list. */
+const optionId = (i: number) => `run-${i}`;
+
+const ago = (r: RunSummary) => {
+  const t = Date.parse(r.last_ts || '');
+  return Number.isNaN(t) ? Infinity : (Date.now() - t) / 1000;
+};
+
+/**
+ * The run switcher: runs grouped by recency, searchable, keyboard driven. A
+ * dialog: its search field (a combobox) holds the focus while it is open (Tab
+ * stays in it), and the arrow keys move through the list
+ * (`aria-activedescendant`). Sends `ca-select-run` for a pick and `ca-close`
+ * when it should be closed (Escape, or a pick); the host returns the focus.
+ *
+ * While nothing is searched, the first options are the pages of no run: the
+ * trends, and on a hub the hosts. On a hub (`hub`), the runs are grouped by host,
+ * each group headed by its host's state; a host filter (a select, the dialog's
+ * second Tab stop) shows one host's runs.
+ *
+ * @fires ca-select-run - `{run}`: a run was picked
+ * @fires ca-navigate - `{page, run: ''}`: a page of no run was picked (`trends`, or on a hub `hosts`)
+ * @fires ca-close - the picker should close
+ */
+@customElement('ca-run-picker')
+@localized()
+export class CaRunPicker extends LitElement {
+  static override styles = [
+    base,
+    css`
+      :host { position: absolute; top: 50px; width: min(580px, calc(100cqi - 24px)); max-height: min(72vh, 660px);
+        display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line2); border-radius: 14px;
+        box-shadow: 0 24px 70px color-mix(in srgb, var(--shadow) 70%, transparent); opacity: 0; transform: translateY(-6px) scale(0.985);
+        pointer-events: none; z-index: 40; visibility: hidden; container-type: inline-size;
+        transition: opacity 0.16s var(--ease), transform 0.16s var(--ease), visibility 0s linear 0.16s; }
+      /* Visible (and focusable) at once when it opens; hidden only after it has faded out. */
+      :host([open]) { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
+      .search { padding: 10px; border-bottom: 1px solid var(--line); }
+      input, select { background: var(--well); border: 1px solid var(--line); color: var(--text); border-radius: 9px; font: inherit; outline: none; }
+      input { width: 100%; padding: 8px 11px; }
+      input:focus, select:focus { border-color: var(--accent); }
+      .list { overflow: auto; padding: 6px; }
+      .group { font-size: 11.5px; font-weight: 600; color: var(--text-muted); padding: 10px 9px 4px; }
+      .group .n { font-weight: 400; margin-left: 4px; }
+      .keys { margin-top: 6px; display: flex; gap: 4px; align-items: center; }
+      .item { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 3px 10px; align-items: center;
+        padding: 7px 9px; border-radius: 9px; cursor: pointer; }
+      .item:hover, .item.kb { background: var(--raise); }
+      .item.cur { box-shadow: inset 2px 0 0 var(--accent); background: var(--accent-bg); }
+      .nm { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+      .when { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
+      /* A narrow picker (the host is a container): what a page shows goes under its name. */
+      @container (max-width: 480px) {
+        .when.page { grid-column: 2 / 4; white-space: normal; }
+      }
+      .sub { grid-column: 2 / 4; display: flex; gap: 7px; flex-wrap: wrap; font-size: 11px; color: var(--text-muted); }
+      /* a hub: the host filter beside the search field, a header per host, the hosts page as the first option */
+      .row { display: flex; gap: 8px; }
+      select { max-width: 40%; padding: 0 8px; }
+      .host { display: flex; gap: 8px; flex-wrap: wrap; color: var(--text-2); border-top: 1px solid var(--line); margin-top: 6px; }
+      .host b { font-family: var(--mono); color: var(--text); }
+      .host .n { margin-left: auto; }
+      .when[data-tone] { color: var(--tone); font-weight: 600; }
+    `,
+  ];
+
+  @property({ attribute: false }) runs: RunSummary[] = [];
+  /** The run shown now. */
+  @property() current = '';
+  @property({ type: Boolean, reflect: true }) open = false;
+  /** The runs come from many hosts (`Info.hosts`): group them by host, with a host filter and the hosts page. */
+  @property({ type: Boolean }) hub = false;
+  /** The host list (a hub). */
+  @property({ attribute: false }) hosts: HostSummary[] = [];
+  /** The page of no run shown now (`trends`, `hosts`; it is the current option); '' while a run is shown. */
+  @property() page: Page = '';
+  @state() private q = '';
+  /** A hub: only this host's runs; '' for every host. */
+  @state() private host = '';
+  /** The keyboard's place in the visible list; -1 for none. */
+  @state() private kb = -1;
+  @query('input') private input!: HTMLInputElement;
+  @query('select') private select!: HTMLSelectElement | null;
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.setAttribute('role', 'dialog');
+    this.setAttribute('aria-modal', 'true');
+  }
+
+  protected override willUpdate(): void {
+    this.setAttribute('aria-label', msg('Runs'));
+  }
+
+  protected override updated(changed: Map<string, unknown>): void {
+    if (changed.has('open') && this.open) {
+      this.q = '';
+      this.kb = -1;
+      setTimeout(() => this.input?.focus(), 30);
+    }
+  }
+
+  /**
+   * The runs the search and the host filter leave, in groups, in list order:
+   * by host on a hub, each headed by its host's id, its state (attention once
+   * its reports stopped) and how many of its runs are listed; else by recency.
+   * Each group: its accessible name, its header, its runs.
+   */
+  private groups(): [string, unknown, RunSummary[]][] {
+    const q = this.q.toLowerCase().trim();
+    const rows = this.runs.filter(
+      (r) => (!q || r.run.toLowerCase().includes(q) || (r.run_group || '').toLowerCase().includes(q)) && (!this.host || r.host_id === this.host),
+    );
+    if (this.hub) {
+      return hostGroups(rows, this.hosts).map(({ hostId, host: h, runs }) => {
+        const id = hostId || hostFact('');
+        const state = h ? hostStateSince(h) : '';
+        const n = runCount(runs.length);
+        return [facts(id, state, n), html`<b>${id}</b>${h ? statusWord({ text: state, tone: h.up ? 'done' : 'attention', title: lastReport(h) }) : nothing}<span class="n">${n}</span>`, runs];
+      });
+    }
+    const old = (r: RunSummary) => !r.running && ago(r) >= 86400;
+    return (
+      [
+        [msg('Running'), rows.filter((r) => r.running)],
+        [msg('Last 24 hours'), rows.filter((r) => !r.running && !old(r))],
+        [msg('Older'), rows.filter(old)],
+      ] as const
+    ).map(([name, rs]) => [name, html`${name} <span class="n">${rs.length}</span>`, rs]);
+  }
+
+  /** A run, or a page of no run. */
+  private pick(r: Option): void {
+    this.close();
+    if (typeof r === 'string') {
+      if (r !== this.page) emit(this, 'ca-navigate', { page: r, run: '' });
+    } else if (r.run !== this.current || this.page) emit(this, 'ca-select-run', { run: r.run });
+  }
+
+  private close(): void {
+    emit(this, 'ca-close', {});
+  }
+
+  /** The dialog's keys: Escape closes; Tab stays in the dialog, between the search field and (on a hub) the host filter. */
+  private onDialogKey(e: KeyboardEvent): void {
+    if (e.key === 'Escape') this.close();
+    else if (e.key === 'Tab') {
+      e.preventDefault();
+      (e.target === this.input && this.hub ? this.select : this.input)?.focus();
+    }
+  }
+
+  /** The search field's keys: the arrow keys move through the options, Enter picks one. */
+  private onKey(e: KeyboardEvent, opts: Option[]): void {
+    if (e.key === 'ArrowDown') this.kb = Math.min(opts.length - 1, this.kb + 1);
+    else if (e.key === 'ArrowUp') this.kb = Math.max(0, this.kb - 1);
+    else if (e.key === 'Enter') {
+      // The focus goes back to the button that opened the picker: this Enter must not press it.
+      e.preventDefault();
+      const r = opts[Math.max(0, this.kb)];
+      if (r !== undefined) this.pick(r);
+      return;
+    } else return;
+    e.preventDefault();
+    void this.updateComplete.then(() => this.renderRoot.querySelector('.item.kb')?.scrollIntoView({ block: 'nearest' }));
+  }
+
+  override render() {
+    const groups = this.groups().filter((g) => g[2].length);
+    const rows = groups.flatMap((g) => g[2]);
+    // While nothing is searched, the pages of no run come first: the trends, and on a hub the hosts.
+    const pages: Exclude<Page, ''>[] = this.q.trim() ? [] : this.hub ? ['trends', 'hosts'] : ['trends'];
+    const opts: Option[] = [...pages, ...rows];
+    const active = opts[this.kb] !== undefined ? optionId(this.kb) : nothing;
+    const search = html`<input placeholder=${msg('Search runs')} aria-label=${msg('Search runs')} autocomplete="off" .value=${this.q}
+      role="combobox" aria-expanded=${opts.length ? 'true' : 'false'} aria-controls="runs" aria-autocomplete="list" aria-activedescendant=${active}
+      @input=${(e: Event) => { this.q = (e.target as HTMLInputElement).value; this.kb = 0; }}
+      @keydown=${(e: KeyboardEvent) => this.onKey(e, opts)} />`;
+    let i = 0;
+    return html`<div class="search" @keydown=${(e: KeyboardEvent) => this.onDialogKey(e)}>
+        ${this.hub ? html`<div class="row">${search}${this.hostFilter()}</div>` : search}
+        <div class="keys meta" aria-hidden="true"><span class="kbd">↑</span><span class="kbd">↓</span> <span class="kbd">Enter</span> <span class="kbd">Esc</span></div>
+      </div>
+      <div class="list" @mousedown=${(e: MouseEvent) => e.preventDefault()}>
+        ${opts.length
+          ? html`<div id="runs" role="listbox" aria-label=${msg('Runs')}>
+              ${pages.map((p) => this.item(p, i++))}
+              ${groups.map(
+                ([name, head, rs]) => html`<div role="group" aria-label=${name}>
+                  <div class="group${this.hub ? ' host' : ''}" aria-hidden="true">${head}</div>
+                  ${rs.map((r) => this.item(r, i++))}
+                </div>`,
+              )}
+            </div>`
+          : html`<div class="blank"><span>${msg('No runs match the search')}</span></div>`}
+      </div>`;
+  }
+
+  /** The host filter: every host with runs. */
+  private hostFilter() {
+    return html`<select aria-label=${msg('Host')} title=${msg('Host')}
+      @change=${(e: Event) => { this.host = (e.target as HTMLSelectElement).value; this.kb = -1; }}>
+      <option value="" ?selected=${!this.host}>${msg('All hosts')}</option>
+      ${hostGroups(this.runs, this.hosts).map((g) => html`<option value=${g.hostId} ?selected=${g.hostId === this.host}>${g.hostId || hostFact('')}</option>`)}
+    </select>`;
+  }
+
+  /** Tasks by how they ended, as the run's own page counts them, and how long it took: one line. */
+  private counts(r: RunSummary): string {
+    const t = r.tasks;
+    const parts = [msg(str`${t.done} of ${t.total} tasks done`)];
+    if (t.failed) parts.push(stateCount('failed', t.failed));
+    if (t.not_started) parts.push(stateCount('not_started', t.not_started));
+    if (t.partial) parts.push(stateCount('partial', t.partial));
+    if (t.skipped) parts.push(stateCount('skipped', t.skipped));
+    if (t.running) parts.push(stateCount('running', t.running));
+    if (t.waiting) parts.push(stateCount('waiting', t.waiting));
+    if (t.not_run) parts.push(stateCount('not_run', t.not_run));
+    const s = took(r);
+    if (s != null) parts.push(msg(str`took ${fmtDur(s)}`));
+    if (r.cost_usd !== null && r.cost_usd !== undefined) parts.push(usd(r.cost_usd));
+    const usage = accountsLine(r.quota ?? []);
+    if (usage) parts.push(usage);
+    return facts(...parts);
+  }
+
+  /** The run's state where its age goes: running, no report from its host (a hub), or how long ago it was last active. */
+  private when(r: RunSummary) {
+    const a = runActivity(r);
+    const at = localTime(r.last_ts, true);
+    const quiet = a === 'unresponsive';
+    return html`<span class="when" data-tone=${quiet ? 'attention' : nothing} data-mark=${quiet ? 'pending' : nothing}
+      title=${quiet ? facts(lastReport(hostOf(this.hosts, r)), msg(str`Last activity ${at}`)) : at}
+      >${a === 'running' ? msg('running') : quiet ? noReportLabel() : relAgo(r.last_ts)}</span>`;
+  }
+
+  /** An option: a run, or a page of no run. */
+  private item(r: Option, i: number) {
+    const page = typeof r === 'string' ? r : null;
+    const cur = page ? page === this.page : !this.page && (r as RunSummary).run === this.current;
+    const cls = `item${cur ? ' cur' : ''}${i === this.kb ? ' kb' : ''}`;
+    // An option of the listbox: the search field keeps the focus and names the active option (`aria-activedescendant`).
+    return html`<div class=${cls} id=${optionId(i)} role="option" aria-selected=${i === this.kb ? 'true' : 'false'}
+      aria-current=${cur ? (page ? 'page' : 'true') : nothing} @click=${() => this.pick(r)}>
+      ${typeof r !== 'string'
+        ? html`<span class="dot" data-tone=${toneAttr(runTone(runActivity(r), r.tasks))} aria-hidden="true"></span><span class="nm"
+              title=${this.hub ? r.run : nothing}>${this.hub ? runIdOf(r) : r.run}${runMark(r) ? html` ${pill({ ...runMark(r)!, tone: 'muted' })}` : nothing}</span>
+            ${this.when(r)}
+            <span class="sub">
+              ${r.run_group && r.run_group !== runIdOf(r) ? html`<span>${msg(str`Run group ${r.run_group}`)}</span>` : nothing}              <span title=${accountsTip(r.quota ?? [])}>${this.counts(r)}</span>
+            </span>`
+        : page === 'hosts'
+          ? html`<span aria-hidden="true">⊞</span><span class="nm">${msg('Hosts')}</span><span class="when page">${hostsLine(this.hosts)}</span>`
+          : html`<span aria-hidden="true">▥</span><span class="nm">${trendsTitle()}</span><span class="when page">${trendsTip()}</span>`}
+    </div>`;
+  }
+}
+
+/** An option of the list: a run, or a page of no run. */
+type Option = RunSummary | Exclude<Page, ''>;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ca-run-picker': CaRunPicker;
+  }
+}

package/src/elements/shell/ca-theme-switch.ts

@@ -0,0 +1,170 @@
+import { localized, msg, str } from '@lit/localize';
+import { LitElement, css, html, nothing, type PropertyValues } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { emit } from '../../core/events.js';
+import { base } from '@contraagent/elements/styles';
+import { EDITOR_THEMES, THEMES, THEME_CHOICES, type ThemeChoice, type ThemeName } from '@contraagent/elements/themes';
+
+/** A choice's name in the control: a theme's own name stays as it is; `system` and High contrast are words. */
+export function themeLabel(choice: ThemeChoice): string {
+  if (choice === 'system') return msg('System');
+  if (choice === 'high-contrast') return msg('High contrast');
+  return THEMES[choice].label;
+}
+
+/** A small picture of a theme: its panel, its accent and two of its code colours. */
+const swatch = (n: ThemeName) => {
+  const t = THEMES[n].tokens;
+  return html`<span class="sw" style="background:${t.card};border-color:${t.line2}"
+    ><i style="background:${t.accent}"></i><i style="background:${t['code-string']}"></i><i style="background:${t['code-keyword']}"></i
+  ></span>`;
+};
+
+/**
+ * The theme control in the monitor's header: a button that opens a menu of
+ * the themes. Arrow keys, Home and End move in the menu; Enter or Space
+ * chooses; Escape closes it.
+ *
+ * @fires ca-choose-theme - `{theme}`: a theme (or `system`) was chosen
+ */
+@customElement('ca-theme-switch')
+@localized()
+export class CaThemeSwitch extends LitElement {
+  static override styles = [
+    base,
+    css`
+      :host { position: relative; display: inline-flex; }
+      .trig { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px solid var(--line); border-radius: 999px;
+        padding: 2px 10px 2px 7px; font-size: 11px; color: var(--text-muted); cursor: pointer; }
+      .trig:hover, .trig[aria-expanded='true'] { color: var(--text); border-color: var(--line2); }
+      .trig svg { width: 13px; height: 13px; }
+      .menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 236px; padding: 6px; z-index: 50;
+        background: var(--panel); border: 1px solid var(--line2); border-radius: 12px;
+        box-shadow: 0 18px 48px color-mix(in srgb, var(--shadow) 65%, transparent); animation: enter 0.16s var(--ease) both; }
+      .grp { font-size: 11px; color: var(--text-muted); padding: 8px 9px 4px; }
+      [role='separator'] { height: 1px; background: var(--line); margin: 6px 4px; }
+      .item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%;
+        background: none; border: 0; border-radius: 8px; padding: 6px 9px; text-align: left; cursor: pointer; color: var(--text-2); font-size: 12px; }
+      .item:hover { background: var(--raise); color: var(--text); }
+      .item:focus-visible { outline-offset: -2px; }
+      .item[aria-checked='true'] { background: var(--accent-bg); color: var(--text); font-weight: 600; }
+      .item .meta { font-weight: 400; }
+      .item .sub { display: block; }
+      /* a radio mark: a ring, filled for the current choice */
+      .rd { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--line2); display: grid; place-items: center; }
+      [aria-checked='true'] .rd { border-color: var(--accent); }
+      [aria-checked='true'] .rd::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
+      .sw { display: inline-flex; gap: 2px; align-items: flex-end; width: 30px; height: 18px; border-radius: 5px; border: 1px solid; padding: 3px 4px; }
+      .sw i { flex: 1; height: 4px; border-radius: 2px; }
+      .sw i:first-child { height: 8px; }
+      .sw.split { padding: 0; overflow: hidden; gap: 0; }
+      .sw.split > span { flex: 1; height: 100%; display: flex; gap: 2px; align-items: flex-end; padding: 3px 2px; }
+    `,
+  ];
+
+  /** The current choice. */
+  @property() value: ThemeChoice = 'contraagent-dark';
+  /** The theme `system` shows now, by the system's colour scheme. */
+  @property() system: ThemeName = 'contraagent-dark';
+  @state() private open = false;
+  @query('.trig') private trig!: HTMLButtonElement;
+
+  private readonly onDocDown = (e: PointerEvent) => {
+    if (this.open && !e.composedPath().includes(this)) this.open = false;
+  };
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    document.removeEventListener('pointerdown', this.onDocDown);
+  }
+
+  private items(): HTMLButtonElement[] {
+    return [...this.renderRoot.querySelectorAll<HTMLButtonElement>('.item')];
+  }
+
+  protected override updated(changed: PropertyValues<this>): void {
+    // A press outside the open menu closes it: listened for on the document only while it is open.
+    if (changed.has('open' as keyof CaThemeSwitch)) {
+      if (this.open) document.addEventListener('pointerdown', this.onDocDown);
+      else document.removeEventListener('pointerdown', this.onDocDown);
+    }
+    if (changed.has('open' as keyof CaThemeSwitch) && this.open) {
+      (this.items().find((b) => b.getAttribute('aria-checked') === 'true') ?? this.items()[0])?.focus();
+    }
+  }
+
+  private close(focusTrigger: boolean): void {
+    this.open = false;
+    if (focusTrigger) this.trig?.focus();
+  }
+
+  private choose(choice: ThemeChoice): void {
+    this.value = choice;
+    emit(this, 'ca-choose-theme', { theme: choice });
+    this.close(true);
+  }
+
+  private onTrigKey(e: KeyboardEvent): void {
+    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+      e.preventDefault();
+      this.open = true;
+    }
+  }
+
+  private onMenuKey(e: KeyboardEvent): void {
+    const items = this.items();
+    const i = items.indexOf(e.composedPath()[0] as HTMLButtonElement);
+    const go = (n: number) => items[(n + items.length) % items.length]?.focus();
+    if (e.key === 'ArrowDown') go(i + 1);
+    else if (e.key === 'ArrowUp') go(i - 1);
+    else if (e.key === 'Home') go(0);
+    else if (e.key === 'End') go(items.length - 1);
+    else if (e.key === 'Escape') this.close(true);
+    else if (e.key === 'Tab') {
+      this.open = false;
+      return;
+    } else return;
+    e.preventDefault();
+    e.stopPropagation();
+  }
+
+  private item(choice: ThemeChoice) {
+    const on = choice === this.value;
+    const pic =
+      choice === 'system'
+        ? html`<span class="sw split" style="border-color:${THEMES['contraagent-dark'].tokens.line2}"
+            ><span style="background:${THEMES['contraagent-dark'].tokens.card}"><i style="background:${THEMES['contraagent-dark'].tokens.accent}"></i></span
+            ><span style="background:${THEMES['contraagent-light'].tokens.card}"><i style="background:${THEMES['contraagent-light'].tokens.accent}"></i></span
+          ></span>`
+        : swatch(choice);
+    return html`<button type="button" class="item" role="menuitemradio" aria-checked=${on ? 'true' : 'false'} tabindex="-1"
+      data-theme=${choice} @click=${() => this.choose(choice)}>
+      ${pic}<span>${themeLabel(choice)}${choice === 'system' ? html`<span class="meta sub">${THEMES[this.system].label}</span>` : nothing}</span><span class="rd" aria-hidden="true"></span>
+    </button>`;
+  }
+
+  override render() {
+    const own = THEME_CHOICES.filter((c) => c === 'system' || !(EDITOR_THEMES as readonly string[]).includes(c));
+    return html`<button type="button" class="trig" aria-haspopup="menu" aria-expanded=${this.open ? 'true' : 'false'} aria-controls="menu"
+        title=${msg(str`Theme: ${themeLabel(this.value)}`)} @click=${() => (this.open = !this.open)} @keydown=${(e: KeyboardEvent) => this.onTrigKey(e)}>
+        <svg viewBox="0 0 16 16" aria-hidden="true"><circle cx="8" cy="8" r="6.25" fill="none" stroke="currentColor" stroke-width="1.5" /><path d="M8 1.75a6.25 6.25 0 0 1 0 12.5z" fill="currentColor" /></svg>
+        ${msg('Theme')}
+      </button>
+      ${this.open
+        ? html`<div id="menu" class="menu" role="menu" aria-label=${msg('Theme')} @keydown=${(e: KeyboardEvent) => this.onMenuKey(e)}>
+            ${own.map((c) => this.item(c))}
+            <div role="separator"></div>
+            <div role="group" aria-labelledby="grp-editor">
+              <div class="grp" id="grp-editor">${msg('Editor themes')}</div>
+              ${EDITOR_THEMES.map((c) => this.item(c))}
+            </div>
+          </div>`
+        : nothing}`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ca-theme-switch': CaThemeSwitch;
+  }
+}

package/src/elements/shell/ca-toasts.ts

@@ -0,0 +1,100 @@
+import { isBad, runRelative, type JournalRow } from '@contraagent/api';
+import { msg, str } from '@lit/localize';
+import { LitElement, css, html, nothing } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { base } from '@contraagent/elements/styles';
+import { facts, fmtDur, kindUnit } from '../../words/format.js';
+import { modelSwitch, stopLabel } from '../../words/index.js';
+
+/** The notice's status (its mark and the colour of its edge); `agent` is a model switch, which is not a status. */
+export type ToastKind = 'done' | 'failed' | 'attention' | 'running' | 'agent';
+
+interface Toast {
+  id: number;
+  kind: ToastKind;
+  title: string;
+  sub: string;
+  out: boolean;
+}
+
+/** The notice for a journal row that just arrived: its kind, title and line (`CaToasts.show`'s arguments). */
+export function rowToast(row: JournalRow, run: string): [kind: ToastKind, title: string, sub: string] {
+  const name = kindUnit(row);
+  const reason = runRelative(row.reason, run).slice(0, 110);
+  if (row.stop === 'invalid_input') return ['attention', msg(str`${name}: not started`), reason];
+  if (isBad(row)) return ['failed', msg(str`${name}: ${stopLabel(row.stop)}`), reason];
+  if (row.stop === 'partial') return ['attention', msg(str`${name}: ${stopLabel(row.stop)}`), reason];
+  const sw = modelSwitch(row.hops, row.wall_s, row.skipped_hops);
+  if (sw) return ['agent', msg(str`${name}: model switch`), sw.slice(0, 110)];
+  return ['done', msg(str`${name}: done`), facts(fmtDur(row.wall_s), row.model)];
+}
+
+const ICON: Record<ToastKind, string> = { done: '✓', failed: '✕', attention: '◌', running: '●', agent: '✦' };
+const SHOW_MS = 5200;
+const MAX = 4;
+
+/**
+ * Short notices in a corner; each leaves on its own after a few seconds. A
+ * screen reader hears each one: a failure at once, the others when it is idle.
+ */
+@customElement('ca-toasts')
+export class CaToasts extends LitElement {
+  static override styles = [
+    base,
+    css`
+      :host { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 60; pointer-events: none; }
+      .toast { pointer-events: auto; min-width: 240px; max-width: 380px; padding: 10px 14px; border-radius: 11px;
+        background: var(--panel2); border: 1px solid var(--line2); box-shadow: 0 18px 40px color-mix(in srgb, var(--shadow) 60%, transparent);
+        display: flex; gap: 10px; align-items: flex-start; animation: toast-in 0.35s var(--ease) both; }
+      .toast.out { animation: toast-out 0.35s var(--ease) both; }
+      .ti { font-size: 16px; line-height: 1.2; }
+      b { display: block; font-size: 12.5px; }
+      span.sub { font-size: 11.5px; color: var(--text-muted); }
+      .ti { color: var(--text-muted); }
+      .toast[data-tone] .ti { color: var(--tone); }
+      .toast[data-tone='failed'], .toast[data-tone='attention'] { border-color: color-mix(in srgb, var(--tone) 50%, var(--line2)); }
+      .agent .ti { color: var(--agent); }
+    `,
+  ];
+
+  @state() private toasts: Toast[] = [];
+  private next = 0;
+
+  show(kind: ToastKind, title: string, sub = ''): void {
+    const t: Toast = { id: this.next++, kind, title, sub, out: false };
+    this.toasts = [...this.toasts, t].slice(-MAX);
+    setTimeout(() => {
+      this.toasts = this.toasts.map((x) => (x.id === t.id ? { ...x, out: true } : x));
+      setTimeout(() => (this.toasts = this.toasts.filter((x) => x.id !== t.id)), 400);
+    }, SHOW_MS);
+  }
+
+  override render() {
+    // The notices as a screen reader hears them: failures at once (`role="alert"`), the others when it is idle (`role="status"`).
+    const said = (urgent: boolean) =>
+      repeat(
+        this.toasts.filter((t) => !t.out && (t.kind === 'failed') === urgent),
+        (t) => t.id,
+        (t) => html`<p>${facts(t.title, t.sub)}</p>`,
+      );
+    return html`<div class="sr" role="status" aria-live="polite">${said(false)}</div>
+      <div class="sr" role="alert" aria-live="assertive">${said(true)}</div>
+      <div aria-hidden="true" style="display:contents">
+        ${repeat(
+          this.toasts,
+          (t) => t.id,
+          (t) => html`<div class="toast ${t.kind === 'agent' ? 'agent' : ''} ${t.out ? 'out' : ''}" data-tone=${t.kind === 'agent' ? nothing : t.kind}>
+            <span class="ti">${ICON[t.kind]}</span>
+            <div><b>${t.title}</b>${t.sub ? html`<span class="sub">${t.sub}</span>` : nothing}</div>
+          </div>`,
+        )}
+      </div>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ca-toasts': CaToasts;
+  }
+}

package/src/elements/shell/header.ts

@@ -0,0 +1,45 @@
+// Parts of the monitor's header: the name, what is running now, and the
+// connection to the monitor server.
+import type { Activity } from '@contraagent/api';
+import { msg } from '@lit/localize';
+import { html, nothing, type TemplateResult } from 'lit';
+import { kindUnit } from '../../words/format.js';
+import { taskChip } from '../shared/task-chip.js';
+
+/**
+ * The brand mark (braces around a spark, the favicon's drawing) and the monitor's title.
+ * The braces take the text colour and the spark goes from the accent to the agent colour,
+ * so the mark follows the theme; the gradient's id is unique in the element's shadow root.
+ */
+export const brand = (title: string): TemplateResult =>
+  html`<div class="brand">
+    <svg viewBox="12 12 96 96" aria-hidden="true">
+      <defs>
+        <linearGradient id="brand-spark" x1="0" y1="0" x2="1" y2="1">
+          <stop offset="0" class="spark-a" />
+          <stop offset="1" class="spark-b" />
+        </linearGradient>
+      </defs>
+      <g class="logo-braces" fill="none" stroke-width="14" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M48 22 C36 22 36 30 36 38 L36 50 C36 56 32 60 26 60 C32 60 36 64 36 70 L36 82 C36 90 36 98 48 98" />
+        <path d="M72 22 C84 22 84 30 84 38 L84 50 C84 56 88 60 94 60 C88 60 84 64 84 70 L84 82 C84 90 84 98 72 98" />
+      </g>
+      <g class="logo-spark">
+        <path d="M60 45 C61.6 56 64 58.4 75 60 C64 61.6 61.6 64 60 75 C58.4 64 56 61.6 45 60 C56 58.4 58.4 56 60 45 Z"
+          fill="url(#brand-spark)" transform="translate(60 60) scale(1.15) translate(-60 -60)" />
+      </g>
+    </svg>
+    <span title=${title}>${title}</span>
+  </div>`;
+
+/** The tasks running now, the first three by name; each chip opens its task (sent from `host`). */
+export const nowLine = (host: EventTarget, acts: readonly Activity[]): TemplateResult =>
+  html`<span class="nowline">${acts.length
+    ? msg(html`Running ${acts.slice(0, 3).map((a) => taskChip(host, kindUnit(a), { key: a.key }))}${acts.length > 3 ? html` <span>+${acts.length - 3}</span>` : nothing}`)
+    : nothing}</span>`;
+
+/** Whether the feed is connected: a dot, with its words as its accessible name and its tooltip. */
+export const connection = (connected: boolean): TemplateResult => {
+  const words = connected ? msg('Connected to the monitor server') : msg('Not connected to the monitor server');
+  return html`<span role="img" aria-label=${words} title=${words}><span class="live-dot ${connected ? '' : 'off'}"></span></span>`;
+};