@contraagent/ui 0.0.0-stage → 0.1.0

package/src/elements/shell/styles.ts

@@ -0,0 +1,72 @@
+// The styles of `ca-monitor`: its header, the filter bar and the view below.
+// The tab list's are in `tabs.ts`. The monitor is a container (`ca-monitor`):
+// its parts follow the width it is given, not the window's, so it fits any box
+// of a page that embeds it.
+import { css } from 'lit';
+
+export const monitorStyles = css`
+  :host { display: flex; flex-direction: column; height: 100%; min-height: 0; font: 13px/1.5 var(--sans); color: var(--text);
+    background: var(--backdrop); container: ca-monitor / inline-size; }
+  header { flex: none; display: flex; gap: 14px; align-items: center; padding: 10px 18px; border-bottom: 1px solid var(--line);
+    background: color-mix(in srgb, var(--bg) 75%, transparent); backdrop-filter: blur(10px); position: relative; z-index: 20; }
+  .brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; letter-spacing: 0.02em; }
+  /* the name stays on one line and whole up to a third of the width; the run button gives up its width instead */
+  .brand { flex: none; max-width: 30cqi; white-space: nowrap; }
+  .brand span { overflow: hidden; text-overflow: ellipsis; }
+  .brand svg { width: 22px; height: 22px; flex: none; }
+  .logo-braces { stroke: var(--text); }
+  .spark-a { stop-color: var(--accent); }
+  .spark-b { stop-color: var(--agent); }
+  .logo-spark { transform-origin: 60px 60px; }
+  :host([live]) .logo-spark { animation: core-beat 1.8s var(--ease) infinite; }
+  .runbtn { display: flex; align-items: center; gap: 10px; min-width: min(150px, 100%); max-width: 52cqi; cursor: pointer; padding: 6px 13px;
+    border-radius: 999px; background: var(--panel); border: 1px solid var(--line); color: var(--text); transition: border-color 0.2s, background 0.2s; }
+  .runbtn:hover { border-color: var(--line2); background: var(--panel2); }
+  .rn { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: none; max-width: 40%; }
+  .rs { color: var(--text-muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .chev { color: var(--text-muted); }
+  /* a hub: the run's host, after its name */
+  .hostchip { flex: none; font-family: var(--mono); font-size: 11px; color: var(--text-2); padding: 0 7px; border: 1px solid var(--line2);
+    border-radius: 999px; white-space: nowrap; max-width: 24ch; overflow: hidden; text-overflow: ellipsis; }
+  .runbtn .pill { flex: none; font-size: 11px; }
+  ca-run-picker { inset-inline-start: 110px; }
+  /* the controls keep their width; the name and the run button give theirs */
+  .hdr-right { margin-left: auto; display: flex; align-items: center; gap: 12px; flex: none; white-space: nowrap; }
+  .nowline { font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; max-width: 40cqi;
+    display: inline-flex; align-items: center; gap: 4px; }
+  .clock { font-family: var(--mono); font-size: 11.5px; color: var(--text-muted); }
+  .langs { --cae-segmented-radius: 999px; --cae-segmented-height: auto; --cae-segmented-padding: 2px 9px; --cae-segmented-font-size: 11px;
+    --cae-segmented-divider: 0; --cae-segmented-hover: var(--text-2); }
+  .live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--status-running); display: inline-block; animation: breathe 1.8s ease-in-out infinite; }
+  .live-dot.off { background: var(--line2); animation: none; box-shadow: none; }
+
+  .bar { flex: none; display: flex; gap: 8px; padding: 8px 18px; border-top: 1px solid var(--line); align-items: center; flex-wrap: wrap; }
+  .bar select, .bar input { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 8px;
+    padding: 5px 9px; outline: none; font: inherit; font-size: 12px; }
+  .bar input:focus, .bar select:focus { border-color: var(--focus); box-shadow: 0 0 0 calc(var(--focus-width) - 2px) var(--focus); }
+
+  .api-error { flex: none; margin: 0; padding: 8px 18px; color: var(--status-failed); font: 12px var(--mono); overflow-wrap: anywhere; }
+  .api-error:empty { padding: 0; }
+  main { border-top: 1px solid var(--line); flex: 1 1 auto; min-height: 0; overflow: auto; padding: 16px 18px 48px; }
+  main.stream { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 16px; }
+  /* too narrow for one line: the controls go under the name and the run button */
+  @container ca-monitor (max-width: 1000px) {
+    header { flex-wrap: wrap; row-gap: 8px; }
+  }
+  @container ca-monitor (max-width: 760px) {
+    header { gap: 8px; padding: 8px 12px; }
+    /* the run button takes the rest of the first line; its run line gives up its width first */
+    .runbtn { flex: 1 1 0; min-width: 0; max-width: none; }
+    /* the run picker spans the header, 16px from each side */
+    ca-run-picker { inset-inline: 16px; width: auto; }
+    .hdr-right { width: 100%; margin-left: 0; flex-wrap: wrap; row-gap: 6px; }
+    .nowline { max-width: none; flex: 1 1 100%; }
+    main { padding: 12px 12px 40px; }
+    .bar { padding: 8px 12px; }
+    .bar input { flex: 1 1 10em; min-width: 0; }
+  }
+  @container ca-monitor (max-width: 420px) {
+    .brand { max-width: 40cqi; }
+    .runbtn { padding: 6px 10px; gap: 8px; }
+  }
+`;

package/src/elements/shell/tabs.ts

@@ -0,0 +1,143 @@
+// The monitor's tab list: the built-in views, then the custom views; each tab
+// with its count, and the line under the selected one. The selected tab is
+// bold and underlined, not only coloured. A list wider than the monitor
+// scrolls sideways, with a shade at each edge that has more tabs past it.
+import { isRunPanel, type Info } from '@contraagent/api';
+import { msg, str } from '@lit/localize';
+import { css, html, nothing, type TemplateResult } from 'lit';
+import { toneAttr } from '@contraagent/elements';
+import type { Tab } from '../../core/view-route.js';
+import type { Tone } from '../../lib/tone.js';
+
+export interface TabInfo {
+  id: Tab;
+  label: string;
+  icon: string;
+  tip?: string;
+  panel: boolean;
+}
+
+/** The built-in tabs, in the current locale (call at render time). */
+const builtinTabs = (): Omit<TabInfo, 'panel'>[] => [
+  { id: 'overview', label: msg('Overview'), icon: '◎' },
+  { id: 'tasks', label: msg('Tasks', { id: 'tab-tasks', desc: 'Tab: the list of tasks' }), icon: '≡' },
+  { id: 'journal', label: msg('History'), icon: '▤', tip: 'journal.jsonl' },
+  { id: 'outputs', label: msg('Outputs'), icon: '▣' },
+  { id: 'definitions', label: msg('Definitions'), icon: '⌘' },
+  { id: 'procs', label: msg('Processes'), icon: '⚙' },
+  { id: 'stream', label: msg('Task detail'), icon: '✦' },
+];
+
+/** Every tab, in the current locale: the built-in ones, then one per custom view computed per run (`panels`; a trends panel is not a run's tab). */
+export function monitorTabs(panels: Info['panels']): TabInfo[] {
+  return [
+    ...builtinTabs().map((t) => ({ ...t, panel: false })),
+    ...panels.filter(isRunPanel).map((p) => ({
+      id: `panel:${p.name}` as Tab,
+      label: p.title || p.name,
+      icon: p.icon || '▤',
+      tip: p.description ? msg(str`${p.description} (custom view)`) : msg('Custom view'),
+      panel: true,
+    })),
+  ];
+}
+
+/** The id of tab `i` in the tab list, which the view below it (`role="tabpanel"`) names as its label. */
+export const tabId = (i: number): string => `tab-${i}`;
+
+/**
+ * The tab list: `current` selected, a count per tab from `badge` (none when it
+ * returns null or ''), and the key hints. `pick` is called with a tab clicked.
+ * Each tab controls the element with the id `panel`. The arrow keys, Home and
+ * End move the focus between the tabs (a `RovingFocusController` over `.tab`
+ * in the host); Enter and Space select one.
+ */
+export function tabBar(
+  tabs: TabInfo[],
+  current: Tab,
+  badge: (id: Tab) => [string | number, Tone] | null,
+  pick: (id: Tab) => void,
+  panel: string,
+  /** Show the hint for the single-key shortcuts. */
+  keys = true,
+): TemplateResult {
+  return html`<nav data-scroll="x">
+    <div class="tabs" role="tablist" aria-label=${msg('Views', { desc: 'The label of the list of tabs: Overview, Tasks, History, ...' })}>
+      ${tabs.map((t, i) => {
+        const b = badge(t.id);
+        const sel = t.id === current;
+        return html`${t.panel && !tabs[i - 1]?.panel ? html`<span class="tab-sep" aria-hidden="true" title=${msg('Custom views')}></span>` : nothing}
+          <button type="button" role="tab" id=${tabId(i)} aria-selected=${sel ? 'true' : 'false'} aria-controls=${panel}
+            class="tab ${t.panel ? 'panel-tab' : ''} ${sel ? 'sel' : ''}" title=${t.tip ?? nothing} @click=${() => pick(t.id)}>
+            <span class="tab-ic" aria-hidden="true">${t.icon}</span><span class="tab-label" data-label=${t.label}>${t.label}</span>${b && b[0] !== ''
+              ? html`<span class="badge" data-tone=${toneAttr(b[1])}>${b[0]}</span>`
+              : nothing}
+          </button>`;
+      })}
+    </div>
+    <span class="tab-ind init" aria-hidden="true"></span>
+    ${keys ? html`<span class="tabhint meta" role="note" aria-label=${msg('Keyboard shortcuts')}
+      ><span aria-hidden="true"><span class="kbd">1</span>–<span class="kbd">${Math.min(9, tabs.length)}</span> ${msg('Tabs')} |
+        <span class="kbd">r</span> ${msg('Runs')} | <span class="kbd">/</span> ${msg('Filter')}</span></span
+    >` : nothing}
+  </nav>`;
+}
+
+/**
+ * Move the line under the selected tab to it (after a render, a resize); when
+ * the selection changed, scroll the tab list so the selected tab is in view.
+ */
+export function moveTabIndicator(root: ParentNode): void {
+  const sel = root.querySelector<HTMLElement>('.tab.sel');
+  const ind = root.querySelector<HTMLElement>('.tab-ind');
+  if (!sel || !ind) return;
+  ind.style.left = `${sel.offsetLeft + 10}px`;
+  ind.style.width = `${Math.max(12, sel.offsetWidth - 20)}px`;
+  if (ind.classList.contains('init')) requestAnimationFrame(() => ind.classList.remove('init'));
+  const nav = ind.parentElement;
+  if (nav && ind.dataset['tab'] !== sel.id) {
+    ind.dataset['tab'] = sel.id;
+    const edge = 24;
+    if (sel.offsetLeft - edge < nav.scrollLeft) nav.scrollLeft = Math.max(0, sel.offsetLeft - edge);
+    else if (sel.offsetLeft + sel.offsetWidth + edge > nav.scrollLeft + nav.clientWidth)
+      nav.scrollLeft = sel.offsetLeft + sel.offsetWidth + edge - nav.clientWidth;
+  }
+}
+
+export const tabStyles = css`
+  /* Scroll shades: a cover at each end of the tabs (moves with them) over a shade at each edge of the list (stays):
+     the shade shows at an edge while more tabs lie past it. */
+  nav { flex: none; display: flex; gap: 2px; padding: 6px 18px 0; position: relative; overflow-x: auto; scrollbar-width: none; align-items: center;
+    --shade: color-mix(in srgb, var(--text) 22%, transparent);
+    background:
+      linear-gradient(to right, var(--backdrop) 40%, transparent) left / 32px 100% no-repeat local,
+      linear-gradient(to left, var(--backdrop) 40%, transparent) right / 32px 100% no-repeat local,
+      radial-gradient(farthest-side at 0 50%, var(--shade), transparent) left / 12px 100% no-repeat scroll,
+      radial-gradient(farthest-side at 100% 50%, var(--shade), transparent) right / 12px 100% no-repeat scroll; }
+  nav::-webkit-scrollbar { display: none; }
+  .tabs { flex: none; display: flex; gap: 2px; align-items: center; }
+  .tab { position: relative; background: none; border: none; padding: 8px 14px 11px; color: var(--text-muted); cursor: pointer;
+    font-weight: 500; white-space: nowrap; transition: color 0.2s; }
+  .tab:hover { color: var(--text-2); }
+  .tab.sel { color: var(--text); font-weight: 600; }
+  /* The label keeps the width of its bold form, so the tabs do not move when the selection does. */
+  .tab-label { display: inline-flex; flex-direction: column; }
+  .tab-label::after { content: attr(data-label); font-weight: 600; height: 0; overflow: hidden; visibility: hidden; }
+  .tab-ic { opacity: 0.55; margin-right: 6px; font-size: 12px; }
+  .tab.sel .tab-ic { opacity: 1; color: var(--accent); }
+  .badge { margin-left: 6px; font-size: 10px; font-weight: 500; padding: 0 6px; border-radius: 999px; background: var(--raise); color: var(--text-2); font-variant-numeric: tabular-nums; }
+  .badge[data-tone] { background: var(--tone-bg); color: var(--tone); }
+  .tab-sep { width: 1px; height: 18px; background: var(--line2); margin: 0 8px 3px; flex: none; align-self: center; }
+  .tab-ind { position: absolute; bottom: 0; left: 0; width: 0; height: 2px; border-radius: 2px;
+    background: var(--accent); transition: left 0.3s var(--ease), width 0.3s var(--ease); }
+  .tab-ind.init { transition: none; }
+  .tabhint { margin-left: auto; padding-left: 12px; white-space: nowrap; }
+  /* In a narrow monitor the tabs keep the line: no key hints. */
+  @container ca-monitor (max-width: 900px) {
+    .tabhint { display: none; }
+  }
+  @container ca-monitor (max-width: 760px) {
+    nav { padding: 4px 8px 0; }
+    .tab { padding: 8px 10px 11px; }
+  }
+`;

package/src/elements/shell/views.ts

@@ -0,0 +1,67 @@
+// The view under the monitor's tabs: the element the view route's tab shows, given
+// the data it reads.
+import { hostOf, isRunLive, latestTask, runActivity, runRow, type MonitorClient, type MonitorSnapshot, type RunDerived } from '@contraagent/api';
+import { msg } from '@lit/localize';
+import { html, nothing, type TemplateResult } from 'lit';
+import type { ViewRoute } from '../../core/view-route.js';
+import { mixedReplay } from '../../words/run-line.js';
+import '../overview/ca-overview.js';
+import '../lists/ca-task-table.js';
+import '../lists/ca-journal-table.js';
+import '../lists/ca-contracts.js';
+import '../lists/ca-definitions.js';
+import '../lists/ca-procs-view.js';
+import '../lists/ca-panel-view.js';
+import '../task/ca-task-view.js';
+
+export interface TabViewData {
+  snap: MonitorSnapshot;
+  viewRoute: ViewRoute;
+  /** `deriveRun` of the run's journal and plan. */
+  derived: RunDerived;
+  /** The text filter, as typed. */
+  q: string;
+  client: MonitorClient;
+  baseUrl: string;
+}
+
+/**
+ * The view of `viewRoute.tab`; with no run, a blank page that says there are no
+ * runs once the server's run list says so (the API's error is above it).
+ */
+export function tabView({ snap, viewRoute, derived, q, client, baseUrl }: TabViewData): TemplateResult {
+  const { state } = snap;
+  if (!viewRoute.run) {
+    return html`<div class="blank">${snap.runsLoaded && !snap.error
+      ? html`<span class="ic" aria-hidden="true">✦</span><b>${msg('No runs yet', { id: 'no-runs-yet' })}</b>`
+      : nothing}</div>`;
+  }
+  const summary = runRow(snap.runs, snap.run);
+  const live = isRunLive(state, summary);
+  switch (viewRoute.tab) {
+    case 'overview':
+      return html`<ca-overview .state=${state} .summary=${summary} .host=${hostOf(snap.hosts?.hosts, summary)} .info=${snap.info} .run=${viewRoute.run} .layer=${viewRoute.layer} .unit=${viewRoute.unit} .sel=${viewRoute.sel}></ca-overview>`;
+    case 'tasks':
+      return html`<ca-task-table .run=${viewRoute.run} .journal=${state.journal} .plan=${state.plan} .kind=${viewRoute.kind} .q=${q} ?live=${live}></ca-task-table>`;
+    case 'journal':
+      return html`<ca-journal-table .run=${viewRoute.run} .rows=${state.journal} .plan=${state.plan} .fresh=${snap.fresh} .kind=${viewRoute.kind} .stop=${viewRoute.stop} .q=${q}
+        .extras=${summary?.row_extras ?? []} ?replay-marks=${mixedReplay(summary)}></ca-journal-table>`;
+    case 'outputs':
+      return html`<ca-contracts .run=${viewRoute.run} .outputs=${state.outputs} .journal=${state.journal} .plan=${state.plan}></ca-contracts>`;
+    case 'definitions':
+      return html`<ca-definitions .client=${client} .run=${viewRoute.run} .journal=${state.journal} .plan=${state.plan} .live=${live}
+        .selected=${viewRoute.def}></ca-definitions>`;
+    case 'procs':
+      return html`<ca-procs-view .procs=${state.procs} ?unresponsive=${runActivity(summary, !!state.procs?.alive) === 'unresponsive'}
+        ?exported=${!!snap.info.export}></ca-procs-view>`;
+    case 'stream':
+      return html`<ca-task-view .client=${client} .journal=${state.journal} .plan=${state.plan} base-url=${baseUrl} .run=${viewRoute.run}
+        .taskKey=${viewRoute.key ?? latestTask(derived.rows)} .view=${viewRoute.view} .round=${viewRoute.round} .live=${live}
+        ?exported=${!!snap.info.export} ?replay-marks=${mixedReplay(summary)}></ca-task-view>`;
+    default: {
+      const name = viewRoute.tab.slice('panel:'.length);
+      const info = snap.info.panels.find((p) => p.name === name);
+      return html`<ca-panel-view .name=${name} .panel=${info} .data=${state.panels[name]}></ca-panel-view>`;
+    }
+  }
+}

package/src/elements/task/ca-task-view.ts

@@ -0,0 +1,157 @@
+import { deriveRun, type JournalRow, type LaunchEvent, type MonitorClient, type Plan, type TaskDetail, type TaskOutcome } from '@contraagent/api';
+import { localized, msg } from '@lit/localize';
+import { LitElement, html, nothing, type PropertyValues } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { emit, type RoundInfo, type RoundsChangedDetail } from '../../core/events.js';
+import { TASK_VIEWS, type TaskView } from '../../core/view-route.js';
+import { TaskDetailController } from '../../controllers/task-detail.js';
+import { base } from '@contraagent/elements/styles';
+import { executorIconStyles } from '../../words/executor.js';
+import { contractStyles } from '../shared/contract-parts.js';
+import './ca-transcript.js';
+import type { CaTranscript } from './ca-transcript.js';
+import { tagStyles } from '@contraagent/elements/transcript';
+import { isPy, type TaskContext } from './context.js';
+import { taskHeader } from './header.js';
+import { noTranscript } from './panes/transcript.js';
+import { inputPane, outputPane } from './panes/io.js';
+import { definitionPane } from './panes/definition.js';
+import { taskViewStyles } from './styles.js';
+
+/** Each view's tab label, in the current locale (call at render time). */
+const viewLabel = (): Record<TaskView, string> => ({
+  transcript: msg('Transcript'),
+  input: msg('Input'),
+  output: msg('Output', { id: 'view-output', desc: 'Tab: the files a task wrote' }),
+  definition: msg('Definition'),
+});
+
+/**
+ * One task: who ran it, every finished attempt, and four views of it: the
+ * transcript (live), its input (params, upstream outputs, declared inputs, the
+ * prompt), its output (files against their contracts, the result, who uses it)
+ * and its definition. Sends `ca-navigate` with `view` or `round`, and
+ * `ca-open-task` for a linked task.
+ *
+ * @fires ca-navigate - `{view}` or `{round}`: another view or round of this task
+ * @fires ca-open-task - `{key}`: an upstream or downstream task was clicked
+ */
+@customElement('ca-task-view')
+@localized()
+export class CaTaskView extends LitElement {
+  static override styles = [base, contractStyles, tagStyles, executorIconStyles, taskViewStyles];
+
+  @property({ attribute: false }) client!: MonitorClient;
+  @property({ attribute: 'base-url' }) baseUrl = '';
+  @property() run = '';
+  /** A task key; null when there is no task to show. */
+  @property({ attribute: false }) taskKey: string | null = null;
+  @property() view: TaskView = 'transcript';
+  /** The round shown, 1-based; null follows the latest. */
+  @property({ attribute: false }) round: number | null = null;
+  /** The run is live. */
+  @property({ type: Boolean }) live = false;
+  /** The whole run's journal: the subscription readings other tasks took after this one, and what happened to the tasks it reads from. Optional. */
+  @property({ attribute: false }) journal: JournalRow[] = [];
+  /** The run's plan: whether a task with no attempt is waiting or not started, and which earlier task stopped it. Optional. */
+  @property({ attribute: false }) plan: Plan | null = null;
+  /** Read from an export (`Info.export`): it holds no transcript. */
+  @property({ type: Boolean }) exported = false;
+  /** The run is a replay that also launched (`mixedReplay`): each attempt played from its recording is marked. */
+  @property({ type: Boolean, attribute: 'replay-marks' }) replayMarks = false;
+
+  private readonly detail = new TaskDetailController(this);
+  @query('ca-transcript') private transcriptEl?: CaTranscript;
+  @state() private launches: (LaunchEvent | null)[] = [];
+  @state() private shownRound = -1;
+  @state() private rounds: RoundInfo[] = [];
+  /** What happened to every task of the run (`deriveRun` of `journal` and `plan`), by key. */
+  private outcomes: ReadonlyMap<string, TaskOutcome> = new Map();
+
+  protected override willUpdate(changed: PropertyValues<this>): void {
+    if (changed.has('run') || changed.has('taskKey') || changed.has('client')) {
+      this.detail.load(this.client, this.run, this.taskKey);
+      this.launches = [];
+      this.shownRound = -1;
+      this.rounds = [];
+    }
+    this.outcomes = this.plan ? deriveRun(this.journal, this.plan).outcomes : new Map<string, TaskOutcome>();
+  }
+
+  /** The view shown: a Python task has no transcript, so it opens on its output. */
+  private shownView(d: TaskDetail): TaskView {
+    return this.view === 'transcript' && isPy(d) && !d.stream ? 'output' : this.view;
+  }
+
+  private revealSearch(query: string, nth: number): void {
+    const at = this.transcriptEl?.revealWebSearch(query, nth);
+    emit(this, 'ca-navigate', at ? { view: 'transcript', round: at.round } : { view: 'transcript' });
+  }
+
+  override render() {
+    const key = this.taskKey;
+    if (!key) {
+      return html`<div class="blank"><span class="ic" aria-hidden="true">✦</span><b>${msg('No task selected')}</b></div>`;
+    }
+    const d = this.detail.value;
+    if (!d) return html`<div class="taskmeta meta"><strong>${key}</strong> ${msg('Loading…')}</div>`;
+    const c: TaskContext = {
+      host: this,
+      run: this.run,
+      detail: d,
+      live: d.launches.length > 0 && this.live,
+      journal: this.journal,
+      plan: this.plan,
+      outcomes: this.outcomes,
+      launches: this.launches,
+      shownRound: this.shownRound,
+      rounds: this.rounds,
+      exported: this.exported,
+      replayMarks: this.replayMarks,
+    };
+    const view = this.shownView(d);
+    return html`${taskHeader(c, key, (q, nth) => this.revealSearch(q, nth))} ${this.renderViews(d, view)}
+      ${d.stream
+        ? html`<ca-transcript .run=${this.run} .stream=${d.stream} base-url=${this.baseUrl} .client=${this.client} .live=${c.live}
+            .rows=${d.rows} .round=${this.round} mode=${view === 'transcript' ? 'full' : view === 'input' ? 'tabs' : 'none'}
+            @ca-rounds=${(e: CustomEvent<RoundsChangedDetail>) => {
+              this.launches = e.detail.launches;
+              this.shownRound = e.detail.shown;
+              this.rounds = e.detail.rounds;
+            }}></ca-transcript>`
+        : view === 'transcript'
+          ? noTranscript(c)
+          : nothing}
+      ${view !== 'transcript' ? html`<div class="pane">${this.renderPane(c, view)}</div>` : nothing}`;
+  }
+
+  private renderViews(d: TaskDetail, view: TaskView) {
+    const io = d.io;
+    const py = isPy(d) && !d.stream;
+    const n: Partial<Record<TaskView, number>> = {
+      input: new Set([...io.inputs.map((o) => o.path), ...io.upstream.flatMap((u) => u.outputs.map((o) => o.path))]).size + Object.keys(io.params).length,
+      output: io.outputs.length,
+    };
+    return html`<div class="tviews" role="tablist">
+      ${TASK_VIEWS.filter((id) => !(py && id === 'transcript')).map((id) => {
+        const label = viewLabel()[id];
+        return html`<button type="button" role="tab" aria-selected=${id === view} class="tview ${id === view ? 'sel' : ''}"
+          @click=${() => emit(this, 'ca-navigate', { view: id })}>
+          ${label}${n[id] ? html`<span class="badge">${n[id]}</span>` : nothing}
+        </button>`;
+      })}
+    </div>`;
+  }
+
+  private renderPane(c: TaskContext, view: TaskView) {
+    if (view === 'input') return inputPane(c);
+    if (view === 'output') return outputPane(c);
+    return definitionPane(c);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ca-task-view': CaTaskView;
+  }
+}

package/src/elements/task/ca-transcript.ts

@@ -0,0 +1,214 @@
+import { createMonitorClient, type JournalRow, type MonitorClient, type TranscriptEvent } from '@contraagent/api';
+import { md } from '@contraagent/elements/markdown';
+import type { CaeTranscript, TranscriptMemory, TranscriptSection, TranscriptStrings } from '@contraagent/elements/transcript';
+import '@contraagent/elements/transcript/define';
+import { localized, msg, str } from '@lit/localize';
+import { LitElement, css, html, type PropertyValues } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { keyed } from 'lit/directives/keyed.js';
+import { classifyRounds } from '../../adapters/transcript/rounds.js';
+import { transcriptSections } from '../../adapters/transcript/sections.js';
+import { StreamController } from '../../controllers/stream.js';
+import { emit, type RoundInfo, type RoundsChangedDetail } from '../../core/events.js';
+import { getLocale } from '../../core/i18n.js';
+import { RememberedSet, SessionSet, memoryOf, pageMemory } from '../../core/memory.js';
+import { promptText } from '../shared/prompt-text.js';
+import { retryTip } from '../../words/attempts.js';
+import { correctionTip } from '../../words/contract.js';
+import { modelSwitchTip } from '../../words/hops.js';
+
+/** The transcript's words, in the reader's language (call at render time). */
+const strings = (): TranscriptStrings => ({
+  sections: msg('Agent sessions'),
+  sectionsTip: [
+    `${msg('Retry')}: ${retryTip()}`,
+    `${msg('Correction')}: ${correctionTip()}`,
+    `${msg('Model switch')}: ${modelSwitchTip()}`,
+  ].join('\n'),
+  loadEarlier: (n) => (n === 1 ? msg('Show 1 earlier line') : msg(str`Show ${n} earlier lines`)),
+  newBelow: (n) => (n === 1 ? msg('Show 1 new event') : msg(str`Show ${n} new events`)),
+  newInLatest: (n) =>
+    n === 1 ? msg('Show 1 new event in the running agent session') : msg(str`Show ${n} new events in the running agent session`),
+  prompt: msg('Prompt'),
+  assistant: msg('Assistant'),
+  reasoning: msg('Reasoning'),
+  characters: (n) => msg(str`${n} characters`),
+  tool: msg('tool'),
+  results: (n) => (n === 1 ? msg('1 result') : msg(str`${n} results`)),
+  done: msg('done', { id: 'tool-done', desc: 'A tool call that finished' }),
+  failed: msg('failed'),
+  running: msg('running'),
+  interrupted: msg('interrupted'),
+  interruptedTip: msg('The run ended before the tool call returned'),
+  query: msg('query'),
+  page: msg('page'),
+  fullText: msg('Full text'),
+  showAll: (n) => msg(str`Show all (${n} characters)`),
+  showLess: msg('Show less'),
+});
+
+/**
+ * The transcript of one task: every round (one session of the coding agent,
+ * with its command line and prompt), chat bubbles, collapsible tool cards (a
+ * web search shows its query and the pages it returned as links, a web page
+ * read its URL as a link),
+ * tailed live. A round is a try (a new session) or a fix-up (the same session,
+ * sent back because its output failed its checks); give it the task's journal
+ * rows (`.rows`) and each round says how it ended. It draws them with
+ * `<cae-transcript>`.
+ *
+ * Give it `.events` to show a saved transcript, or `run` + `stream` (and
+ * `base-url`) to tail one from the monitor. A new `.events` that starts with
+ * the same event objects as the last one is that transcript grown: its new
+ * events are added below and what is drawn stays. Sends `ca-navigate` with `round`
+ * when the reader picks a round, and a non-bubbling `ca-rounds`
+ * (`RoundsChangedDetail`) whenever its rounds or the shown round change.
+ *
+ * @fires ca-navigate - `{round}`: the reader picked a round (null for the latest)
+ * @fires ca-rounds - `{launches, shown, rounds}`, not bubbling: the rounds' launch events and what each was, for a host that shows a round's prompt
+ */
+@customElement('ca-transcript')
+@localized()
+export class CaTranscript extends LitElement {
+  static override styles = css`
+    :host { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; position: relative; }
+    :host([mode='none']) { display: none; }
+    :host([mode='tabs']) { flex: none; }
+  `;
+
+  /** A saved transcript to show as is (no feed). */
+  @property({ attribute: false }) events: TranscriptEvent[] | null = null;
+  @property() run = '';
+  /** The transcript's task key (`TaskDetail.stream`). */
+  @property({ attribute: false }) stream: string | null = null;
+  @property({ attribute: 'base-url' }) baseUrl = '';
+  /** For "load earlier"; one is made from `base-url` when absent. */
+  @property({ attribute: false }) client: MonitorClient | null = null;
+  /** The task is running: show it working; when not, a call still marked running was interrupted. */
+  @property({ type: Boolean }) live = false;
+  /** The round to show, 1-based; null follows the latest. */
+  @property({ attribute: false }) round: number | null = null;
+  /** The task's journal rows (finished tries): each round then says how it ended. */
+  @property({ attribute: false }) rows: JournalRow[] = [];
+  /** `full`; `tabs`: only the round picker (another view of the task is shown); `none`: hidden. */
+  @property({ reflect: true }) mode: 'full' | 'tabs' | 'none' = 'full';
+
+  /** The round on screen, 0-based; -1 while there is none. */
+  @state() private shown = -1;
+  @query('cae-transcript') private view?: CaeTranscript;
+
+  private readonly feed = new StreamController(this);
+  private memory: TranscriptMemory | null = null;
+  private drawn: { key: unknown[]; rounds: RoundInfo[]; sections: TranscriptSection[] } | null = null;
+  private lastSent = '';
+  /** The saved transcript last given (`events`): a longer one that starts with it is the same transcript, grown. */
+  private fed: readonly TranscriptEvent[] | null = null;
+
+  private get source(): string {
+    return this.events ? 'static' : this.run && this.stream ? `${this.run}\n${this.stream}` : '';
+  }
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    if (this.hasUpdated) this.requestUpdate();
+  }
+
+  protected override willUpdate(changed: PropertyValues<this>): void {
+    const source = this.source;
+    if (!changed.has('events') && source === this.feed.loaded) return;
+    // The same saved transcript, grown: its new events are appended, and what is drawn stays.
+    const fed = this.fed;
+    const events = this.events;
+    this.fed = events;
+    if (events && fed && source === this.feed.loaded && extends_(events, fed)) {
+      this.feed.append(events.slice(fed.length));
+      return;
+    }
+    const { run, stream } = this;
+    const id = `transcript:${run}/${stream ?? ''}`;
+    // The page's monitor keeps the open cards for the browser tab and the position in the history entry;
+    // an embedded one (`history="memory"`) keeps both in its own memory.
+    const memory = memoryOf(this);
+    const open = memory === pageMemory ? new SessionSet(`${id}:open`) : new RememberedSet(`${id}:open`, this);
+    const tailed = !this.events && !!stream;
+    this.memory = {
+      isOpen: (card) => open.has(card),
+      setOpen: (card, on) => open.set(card, on),
+      scroll: () => (tailed ? memory.recall(`${id}:scroll`) : undefined),
+      setScroll: (at) => tailed && memory.remember(`${id}:scroll`, at),
+    };
+    this.shown = -1;
+    this.feed.load(source, this.events ? { events: this.events } : source && stream ? { run, stream, baseUrl: this.baseUrl } : null);
+  }
+
+  /** The rounds and their sections, drawn again only when the transcript, the rows or the language changed. */
+  private sections(): { rounds: RoundInfo[]; sections: TranscriptSection[] } {
+    const active = this.live && this.feed.tailing;
+    const key = [this.feed.version, this.rows, this.run, active, getLocale()];
+    if (this.drawn?.key.every((k, i) => k === key[i])) return this.drawn;
+    const t = this.feed.model;
+    const rounds = classifyRounds(
+      t.rounds.map((r) => r.launch),
+      this.rows,
+    );
+    this.drawn = { key, rounds, sections: transcriptSections(t, rounds, { run: this.run, rows: this.rows, active }) };
+    return this.drawn;
+  }
+
+  override render() {
+    const feed = this.feed;
+    const { sections } = this.sections();
+    return keyed(
+      feed.generation,
+      html`<cae-transcript .sections=${sections} .shown=${this.round === null ? null : this.round - 1} ?live=${this.live}
+        .earlier=${feed.behind} ?loading=${!feed.ready} .count=${feed.count} mode=${this.mode} .memory=${this.memory}
+        .markdown=${md} .renderDetail=${(d: { text: string }) => promptText(d.text)} .strings=${strings()}
+        @cae-section-change=${(e: CustomEvent<{ index: number | null }>) => {
+          e.stopPropagation();
+          emit(this, 'ca-navigate', { round: e.detail.index === null ? null : e.detail.index + 1 });
+        }}
+        @cae-section-shown=${(e: CustomEvent<{ index: number }>) => {
+          e.stopPropagation();
+          this.shown = e.detail.index;
+        }}
+        @cae-load-earlier=${(e: Event) => {
+          e.stopPropagation();
+          if (this.stream) void feed.loadEarlier(this.client ?? createMonitorClient({ baseUrl: this.baseUrl }), this.run, this.stream);
+        }}></cae-transcript>`,
+    );
+  }
+
+  protected override updated(): void {
+    const { rounds } = this.sections();
+    const sig = `${this.feed.version}|${this.shown}|${rounds.length}|${this.rows.length}`;
+    if (sig === this.lastSent) return;
+    this.lastSent = sig;
+    const detail: RoundsChangedDetail = { launches: this.feed.model.rounds.map((r) => r.launch), shown: this.shown, rounds };
+    emit(this, 'ca-rounds', detail, { bubbles: false });
+  }
+
+  /**
+   * Show the `nth` (0-based) web search for `query`: its card opens, and is scrolled into
+   * view once its round is shown. Returns that round as the `round` of a `ca-navigate`
+   * (1-based; null for the latest), or undefined when the transcript holds no such search.
+   */
+  revealWebSearch(query: string, nth = 0): { round: number | null } | undefined {
+    const card = this.feed.model.rounds.flatMap((r) => r.items).filter((it) => it.type === 'tool' && it.query === query)[nth];
+    const i = card && this.view ? this.view.reveal(card.id) : -1;
+    if (i < 0) return undefined;
+    return { round: i === this.feed.model.rounds.length - 1 ? null : i + 1 };
+  }
+}
+
+/** `next` holds every event of `prev`, the same objects in the same order, and then more or none. */
+function extends_(next: readonly TranscriptEvent[], prev: readonly TranscriptEvent[]): boolean {
+  if (next === prev || next.length < prev.length) return next === prev;
+  for (let i = prev.length - 1; i >= 0; i--) if (next[i] !== prev[i]) return false;
+  return true;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ca-transcript': CaTranscript;
+  }
+}