@contraagent/ui 0.8.0 → 0.9.0

package/src/elements/overview/ca-overview.ts

@@ -7,7 +7,6 @@ import {
   type TypedPanelBody,
   liveActivities,
   progress,
-  result,
   runAccounts,
   runRelative,
   spendOf,
@@ -29,9 +28,9 @@ import { facts, kindUnit, localTime, sentence } from '../../words/format.js';
 import { notStartedCause, outcomeLabel, stateCount, stopLabel } from '../../words/index.js';
 import { base } from '@contraagent/elements/styles';
 import { pill, statusWord } from '@contraagent/elements/primitives';
-import { contractTone, outcomeTone } from '../../lib/tone.js';
+import { outcomeTone } from '../../lib/tone.js';
 import { contractChip, formatOf } from '../shared/contract-parts.js';
-import { contractStatusLabel, contractStatusWhy } from '../../words/contract.js';
+import { contractStatusLabel } from '../../words/contract.js';
 import { taskChip } from '../shared/task-chip.js';
 import '../lists/ca-proc-tree.js';
 import './ca-kpis.js';
@@ -132,11 +131,15 @@ export class CaOverview extends LitElement {
       }
       .ok { display: flex; align-items: baseline; gap: 6px; color: var(--text-2); }
       .ok span[aria-hidden] { color: var(--status-done); }
-      /* a failed output: its status and its task on one line, what it is and where under them */
-      .ofl { grid-template-columns: max-content minmax(0, 1fr); }
-      .ofl > .jstop { white-space: nowrap; }
+      /* a failed output, under the chip of its status: its task and what it is on one line, where under them */
+      .ofl { grid-template-columns: minmax(0, 1fr) auto; }
       .ofl > b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-      .ofl > .meta { grid-column: 1 / -1; overflow: hidden; text-overflow: ellipsis; }
+      .ofl > .meta { overflow: hidden; text-overflow: ellipsis; }
+      .ofl > .meta:last-child { grid-column: 1 / -1; }
+      .ogroup + .ogroup, .ogroup + .ct-row { margin-top: 10px; }
+      /* a heading that is a link to its tab */
+      h3 a.hl { color: inherit; text-decoration: none; }
+      h3 a.hl:hover { color: var(--accent); text-decoration: underline; }
       .ct-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
       .pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 12px; }
       .pcard { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: start; padding: 12px 14px; border-radius: 10px;
@@ -158,10 +161,8 @@ export class CaOverview extends LitElement {
       .ofl > .meta { white-space: nowrap; }
       .stopped { grid-column: 1 / 4; color: var(--text-muted); font-size: 11px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
       .fl.muted { opacity: 0.7; }
-      .problems h4.sub { margin: 10px 0 2px; font-size: 11px; font-weight: 600; color: var(--text-muted); display: flex; }
-      .problems h4.sub .r { margin-left: auto; font-weight: 400; }
-      .next { margin: 10px 2px 2px; font-size: 12px; color: var(--text-2); }
-      .next code { font-family: var(--mono); }
+      /* the tasks done after retrying: a group of their own under a rule, after the problems */
+      .recovered { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--line); }
       .more { font-size: 12px; margin: 6px 10px 0; }
     `,
   ];
@@ -211,29 +212,27 @@ export class CaOverview extends LitElement {
         <section class="panel enter problems">
           <h3>${msg('Problems')}
             <span class="r"><a class="lnk" href="#" @click=${(e: Event) => this.nav(e, () => emit(this, 'ca-navigate', { tab: 'journal', stop: 'bad' }))}>${msg('Failed attempts in history')}</a></span></h3>
-          ${this.problems(live)}
+          ${this.problems()}
         </section>
         <section class="panel enter outputs">
-          <h3 title=${msg('Checked files (OutputContract, InputContract)')}>${msg('Outputs')}
-            <span class="r"><a class="lnk" href="#" @click=${(e: Event) => this.nav(e, () => this.go('outputs'))}>${msg('All outputs')}</a></span></h3>
+          <h3 title=${msg('Checked files (OutputContract, InputContract)')}><a class="hl" href="#" @click=${(e: Event) => this.nav(e, () => this.go('outputs'))}>${msg('Outputs')}</a></h3>
           ${this.outputs()}
         </section>
         ${running ? html`<div class="row">${this.runningCard(live, busy, max)}</div>` : nothing}
       </div>
       <section class="panel enter">
         <h3 title=${msg('Every task the run scheduled, by kind (plan.jsonl)')}>${msg('Pipeline')}
-          <span class="r">${this.progressLine(live)}</span></h3>
+          ${live ? html`<span class="r">${this.progressLine()}</span>` : nothing}</h3>
         <ca-pipeline-graph .plan=${s.plan} .forecast=${s.forecast} .journal=${s.journal} .run=${this.run} .layer=${this.layer} .unit=${this.unit} .sel=${this.sel} ?live=${live}></ca-pipeline-graph>
       </section>
       <section class="panel enter">
         <h3 title=${msg('Counted from every finished attempt (journal.jsonl)')}>${msg('Totals')}</h3>
-        <ca-kpis .journal=${s.journal} .plan=${s.plan}></ca-kpis>
+        <ca-kpis .journal=${s.journal} .plan=${s.plan} no-highest-cost></ca-kpis>
       </section>
       <div class="band parts">
         ${live
           ? html`<section class="panel enter">
-              <h3>${msg('Process tree')}
-                <span class="r"><a class="lnk" href="#" @click=${(e: Event) => this.nav(e, () => this.go('procs'))}>${msg('All processes')}</a></span></h3>
+              <h3><a class="hl" href="#" @click=${(e: Event) => this.nav(e, () => this.go('procs'))}>${msg('Process tree')}</a></h3>
               <ca-proc-tree .procs=${s.procs}></ca-proc-tree>
             </section>`
           : nothing}
@@ -245,15 +244,13 @@ export class CaOverview extends LitElement {
           : nothing}
         ${s.plan.models?.length
           ? html`<section class="panel enter">
-              <h3 title=${msg('What the agent sessions spent on each model, each model of a model switch counted separately (Plan.models)')}>${msg('Models')}
-                <span class="r">${s.plan.models.length === 1 ? msg('1 model') : msg(str`${s.plan.models.length} models`)}</span></h3>
+              <h3 title=${msg('What the agent sessions spent on each model, each model of a model switch counted separately (Plan.models)')}>${msg('Models')}</h3>
               <ca-model-usage .models=${s.plan.models}></ca-model-usage>
             </section>`
           : nothing}
         ${runAccounts(s.journal).length || s.plan.rests?.length
           ? html`<section class="panel enter">
-              <h3 title=${msg('Account-wide | read at each agent session start')}>
-                ${msg('Subscription usage')}<span class="r">${msg('Per account, first → last reading')}</span></h3>
+              <h3 title=${msg('Account-wide | first and last reading per account | read at each agent session start')}>${msg('Subscription usage')}</h3>
               <ca-quota .journal=${s.journal} .caps=${s.plan.quota_caps ?? []} .rests=${s.plan.rests ?? []} .rule=${s.plan.quota_rule ?? ''} ?live=${live}></ca-quota>
             </section>`
           : nothing}
@@ -277,8 +274,7 @@ export class CaOverview extends LitElement {
           </section>`
         : nothing}
       <section class="panel enter">
-        <h3>${msg('Timeline')}
-          <span class="r">${this.triesLine()}</span></h3>
+        <h3>${msg('Timeline')}</h3>
         <ca-timeline .journal=${s.journal} .plan=${s.plan} .procs=${s.procs} .live=${live} .run=${this.run}></ca-timeline>
       </section>
     </div>`;
@@ -298,60 +294,44 @@ export class CaOverview extends LitElement {
     if (!contracts.length) {
       return html`<div class="meta">${msg('No output files')}</div>`;
     }
-    const chips = CT_ORDER.filter((k) => tally[k]);
     // Only what went wrong with a file; tasks that never started are the problems section's.
     const bad = contracts
       .flatMap((c) => (c.outputs ?? []).map((o): [ContractRecord, ContractSpec] => [c, o]))
       .filter(([, o]) => o.status === 'invalid' || o.status === 'failed');
     const shown = bad.slice(0, OUTPUTS_SHOWN);
-    const refused = tally.refused;
-    return html`<div class="ct-row">
-        ${chips.length
-          ? chips.map((k) => contractChip(k, tally[k]))
-          : html`<span class="meta">${msg('No checked files')}</span>`}
-      </div>
-      ${shown.map(
-        ([c, o]) => html`<button type="button" class="fl ofl" @click=${() => this.go('outputs')}>
-          ${statusWord({ text: o.status ? contractStatusLabel(o.status) : '—', tone: contractTone(o.status), title: o.status ? contractStatusWhy(o.status) : null })}
-          <b class="jmono" title=${c.key}>${kindUnit({ kind: c.kind, unit: c.unit === c.key ? '' : c.unit })}</b>
-          <span class="meta">${formatOf(o)}</span>
-          <span class="meta" title=${runRelative(o.errors?.[0] || o.path, this.run)}>${runRelative(o.errors?.[0] || o.path, this.run)}</span>
-        </button>`,
+    // The rows shown sit under the chip of their status; the other statuses are a row of chips after them.
+    const groups = CT_ORDER.filter((k) => tally[k] && shown.some(([, o]) => o.status === k));
+    const chips = CT_ORDER.filter((k) => tally[k] && !groups.includes(k));
+    return html`${groups.map(
+        (k) => html`<div class="ogroup" role="group" aria-label=${contractStatusLabel(k)}>
+          <div class="ct-row">${contractChip(k, tally[k])}</div>
+          ${shown
+            .filter(([, o]) => o.status === k)
+            .map(
+              ([c, o]) => html`<button type="button" class="fl ofl" @click=${() => this.go('outputs')}>
+                <b class="jmono" title=${c.key}>${kindUnit({ kind: c.kind, unit: c.unit === c.key ? '' : c.unit })}</b>
+                <span class="meta">${formatOf(o)}</span>
+                <span class="meta" title=${runRelative(o.errors?.[0] || o.path, this.run)}>${runRelative(o.errors?.[0] || o.path, this.run)}</span>
+              </button>`,
+            )}
+        </div>`,
       )}
       ${bad.length > shown.length
         ? html`<div class="more"><a class="lnk" href="#" @click=${(e: Event) => this.nav(e, () => this.go('outputs'))}>${bad.length - shown.length === 1
             ? msg('1 more output')
             : msg(str`${bad.length - shown.length} more outputs`)}</a></div>`
         : nothing}
-      ${refused
-        ? html`<div class="meta more">${refused === 1
-            ? msg('1 output not written (task not started)')
-            : msg(str`${refused} outputs not written (tasks not started)`)}</div>`
+      ${chips.length || !groups.length
+        ? html`<div class="ct-row">
+            ${chips.length ? chips.map((k) => contractChip(k, tally[k])) : html`<span class="meta">${msg('No checked files')}</span>`}
+          </div>`
         : nothing}`;
   }
 
-  /** While running, how far the run is; once over, how its tasks ended. */
-  private progressLine(live: boolean): string {
-    const plan = this.state.plan;
-    const r = result(plan);
-    if (live || r.left) {
-      const p = progress(plan);
-      return facts(msg(str`${p.pct}%`), msg(str`${p.done} of ${p.total} tasks done`), p.partial ? stateCount('partial', p.partial) : '', p.skipped ? stateCount('skipped', p.skipped) : '', p.cancelled ? stateCount('cancelled', p.cancelled) : '');
-    }
-    return facts(
-      stateCount('done', r.done),
-      r.skipped ? stateCount('skipped', r.skipped) : '',
-      r.failed ? stateCount('failed', r.failed) : '',
-      r.notStarted ? stateCount('not_started', r.notStarted) : '',
-      r.partial ? stateCount('partial', r.partial) : '',
-      r.cancelled ? stateCount('cancelled', r.cancelled) : '',
-    );
-  }
-
-  /** "23 attempts | 4 not started": a task that never started has no attempt. */
-  private triesLine(): string {
-    const { tries, notStarted } = deriveRun(this.state.journal, this.state.plan).tries;
-    return facts(tries === 1 ? msg('1 attempt') : msg(str`${tries} attempts`), notStarted ? stateCount('not_started', notStarted) : '');
+  /** While running, how far the run is; once over, the run's state and the tiles tell how its tasks ended. */
+  private progressLine(): string {
+    const p = progress(this.state.plan);
+    return facts(msg(str`${p.pct}%`), msg(str`${p.done} of ${p.total} tasks done`), p.partial ? stateCount('partial', p.partial) : '', p.skipped ? stateCount('skipped', p.skipped) : '', p.cancelled ? stateCount('cancelled', p.cancelled) : '');
   }
 
   /** A link's click: no navigation of the page's own, then `go`. */
@@ -425,7 +405,7 @@ export class CaOverview extends LitElement {
     return kindUnit(t);
   }
 
-  private problems(live: boolean) {
+  private problems() {
     const { outcomes, problems } = deriveRun(this.state.journal, this.state.plan);
     const { failed, notStarted, partial, recovered } = problems;
     const issues = failed.length + notStarted.length + partial.length;
@@ -482,8 +462,8 @@ export class CaOverview extends LitElement {
         </div>`,
       )}
       ${rest(partial.length, PROBLEMS_SHOWN, 'partial')}
-      ${recovered.length ? html`<h4 class="sub">${sentence(outcomeLabel('recovered'))} <span class="r">${recovered.length}</span></h4>` : nothing}
-      ${repeat(
+      ${recovered.length
+        ? html`<div class="recovered" role="group" aria-label=${sentence(outcomeLabel('recovered'))}>${repeat(
         recovered.slice(0, RECOVERED_SHOWN),
         (t) => t.key,
         (t) => {
@@ -498,24 +478,14 @@ export class CaOverview extends LitElement {
           </div>`;
         },
       )}
-      ${rest(recovered.length, RECOVERED_SHOWN, 'retried')}
-      ${this.nextStep(live, issues)}`;
+      ${rest(recovered.length, RECOVERED_SHOWN, 'retried')}</div>`
+        : nothing}`;
   }
 
   /** A row's second line: one line, the whole of it in its tooltip. */
   private metaLine(text: string) {
     return html`<div class="meta" title=${text}>${text}</div>`;
   }
-
-  /** For a finished run with problems: how many tasks are not done (the tasks resume=True runs again). */
-  private nextStep(live: boolean, problemCount: number) {
-    if (live || !problemCount) return nothing;
-    const c = deriveRun(this.state.journal, this.state.plan).counts;
-    // A partly done task is finished in this run, and not done: a resume runs it again.
-    const again = c.total - c.finished + c.partial;
-    if (!again) return nothing;
-    return html`<div class="next" title="resume=True">${msg(str`${again} of ${c.total} tasks not done`)}</div>`;
-  }
 }
 
 declare global {

package/src/elements/overview/ca-pipeline-graph.ts

@@ -102,7 +102,9 @@ const EMPTY_LAYER: LayerGraph = {
  * of passes or by status (`<cae-mark-matrix>`). The breadcrumb, shown on every layer
  * below the top (a loop named by its file and line), and Escape go back up. On a
  * narrow screen the graph runs top to bottom. "Graph | Table" changes the view; in a
- * loop's passes, "Graph" opens the layer the loop is in, with its box selected.
+ * loop's passes, "Graph" opens the layer the loop is in, with its box selected. With
+ * `controls` false, the graph is only shown: no outline, no "Show all inside" and
+ * "Hide all inside", no zoom buttons and no "Graph | Table".
  * A height set on the element (or given it by a flex or grid container) is the
  * graph's, less the outline's line above it: the drawing fits in it.
  *
@@ -119,6 +121,7 @@ export class CaPipelineGraph extends LitElement {
     journal: { attribute: false },
     run: {},
     live: { type: Boolean },
+    controls: { type: Boolean },
     layer: {},
     unit: {},
     sel: {},
@@ -139,6 +142,8 @@ export class CaPipelineGraph extends LitElement {
   run = '';
   /** The run is running: tasks still pending are waiting; once it is over, they did not run. */
   live = false;
+  /** The outline, "Show all inside" and "Hide all inside", the zoom buttons and "Graph | Table"; false for a graph that is only shown. */
+  controls = true;
   /** The layer shown: its segments (function names, then `loop:<line>` for a loop's passes) joined by `/`; '' for the layer the graph opens on. */
   layer = '';
   /** The unit highlighted while nothing is hovered or focused. */
@@ -436,8 +441,8 @@ export class CaPipelineGraph extends LitElement {
     // The graph keeps its place in one template whichever it is, and whether there is an
     // outline: a change between them (the first size report, a resize, a plan that gains a
     // function) keeps the graph's element, and with it the focus, the zoom and the pan.
-    const side = this.wide && this.tree.length > 0;
-    const part = !this.tree.length
+    const side = this.controls && this.wide && this.tree.length > 0;
+    const part = !this.controls || !this.tree.length
       ? nothing
       : side
         ? outline(this.oh, this.tree)
@@ -451,10 +456,10 @@ export class CaPipelineGraph extends LitElement {
     return html`<cae-layered-graph .graph=${this.input} .states=${this.states} .selected=${this.sel || null} .highlight=${this.unit || null}
         .order=${this.prevOrder} key=${this.segments.join('/')} direction=${this.down || this.tall ? 'down' : 'across'} .matrix=${this.matrixIn}
         .related=${this.lights} .strings=${graphStrings(!!parentLayer(this.segments, this.auto), functions)} .matrixStrings=${matrixStrings()}
-        .renderIcon=${renderIcon} .iconStyles=${iconStyles}
+        .renderIcon=${renderIcon} .iconStyles=${iconStyles} .controls=${this.controls}
         @cae-select=${this.onSelect} @cae-activate=${this.onActivate} @cae-drill=${this.onDrill} @cae-view-change=${this.onView} @cae-toggle=${this.onToggle}
         @cae-sort=${(e: CustomEvent<{ id: string }>) => (this.sort = e.detail.id as MatrixSort)}>
-      <div slot="crumbs">${crumbs(this.h, splitLayer(this.segments).loop ? null : openControls(this.openMode(), (m) => this.setMode(m)))}${missingLine(this.missing)}${this.segments.join('/') === this.auto.join('/') ? html`${forecastNote(this.plan, this.forecast)}${unawaitedLine(this.h)}` : nothing}</div>
+      <div slot="crumbs">${crumbs(this.h, splitLayer(this.segments).loop || !this.controls ? null : openControls(this.openMode(), (m) => this.setMode(m)))}${missingLine(this.missing)}${this.segments.join('/') === this.auto.join('/') ? html`${forecastNote(this.plan, this.forecast)}${unawaitedLine(this.h)}` : nothing}</div>
       ${s ? inspector(this.h, s) : nothing}
     </cae-layered-graph>`;
   }
@@ -462,7 +467,7 @@ export class CaPipelineGraph extends LitElement {
   /** The graph's own width: the element's, less the outline's column beside it. */
   private graphWidth(): number {
     const w = this.clientWidth || 1200;
-    return this.tree.length && w >= OUTLINE_WIDE ? w - OUTLINE_COLUMN : w;
+    return this.controls && this.tree.length && w >= OUTLINE_WIDE ? w - OUTLINE_COLUMN : w;
   }
 
   /** The place keys on the way to the layer shown (the functions of its path). */

package/src/elements/overview/ca-run-driver.ts

@@ -1,9 +1,9 @@
-import { elapsedS, result, runActivity, type HostSummary, type Plan, type Procs, type RunSummary } from '@contraagent/api';
+import { result, runActivity, runIdOf, type HostSummary, type Plan, type Procs, type RunSummary } from '@contraagent/api';
 import { localized, msg, str } from '@lit/localize';
 import { LitElement, css, html, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { starts } from '@contraagent/elements';
-import { facts, fmtDur, localTime, sentence } from '../../words/format.js';
+import { facts, localTime, sentence } from '../../words/format.js';
 import { hostFact, lastReport, noReportLabel } from '../../words/hosts.js';
 import { preflightLabel, preflightStoppedCause, preflightStoppedTitle, preflightTip } from '../../words/preflight.js';
 import { preflightRows } from '../../adapters/preflight.js';
@@ -80,7 +80,6 @@ export class CaRunDriver extends LitElement {
       // Its host stopped reporting (a hub): not known to run, not known to have ended.
       const quiet = runActivity(r) === 'unresponsive';
       const [title, tone]: [string, Tone] = quiet ? [sentence(noReportLabel()), 'attention'] : this.stateTitle();
-      const took = quiet ? null : elapsedS(r);
       return html`<div class="drv off">
         <div class="drv-ic" data-tone=${toneAttr(tone)} aria-hidden="true">${MARK[tone]}</div>
         <div>
@@ -89,8 +88,8 @@ export class CaRunDriver extends LitElement {
             this.plan.preflight?.stopped?.length ? preflightStoppedCause(this.plan.preflight.stopped) : '',
             quiet ? lastReport(this.host) : '',
             !r?.last_ts ? msg('No activity') : quiet ? msg(str`Last activity ${localTime(r.last_ts, true)}`) : msg(str`Ended ${localTime(r.last_ts, true)}`),
-            took == null ? '' : msg(str`Took ${fmtDur(took)}`),
-            r?.run_group ? msg(str`Run group ${r.run_group}`) : '',
+            // How long it took is in the header's run line; a run group named as the run is no fact of its own.
+            r?.run_group && r.run_group !== runIdOf(r) ? msg(str`Run group ${r.run_group}`) : '',
             quiet ? hostFact(r?.host_id ?? '') : '',
           )}</div>
           ${this.preflight()}
@@ -101,7 +100,7 @@ export class CaRunDriver extends LitElement {
     const since = starts.at(`drv:${p.pid ?? ''}`, Number.isNaN(started) ? 1 : (Date.now() - started) / 1000);
     const rows: [string, string | number][] = [
       [msg('PID'), p.pid ?? '—'],
-      [msg('Run group'), p.run_group],
+      ...(r && p.run_group === runIdOf(r) ? [] : [[msg('Run group'), p.run_group] as [string, string]]),
       [msg('Running at once (limit)'), p.max_workers || '—'],
       [msg('Started'), localTime(p.started_at, true)],
     ];

package/src/elements/overview/ca-workers.ts

@@ -40,7 +40,7 @@ export class CaWorkers extends LitElement {
       .wk.py .wk-ic { color: var(--text-muted); }
       .wk-el { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--status-running); }
       .wk-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; overflow: hidden; }
-      .wk-bar i { position: absolute; top: 0; bottom: 0; width: 30%; background: linear-gradient(90deg, transparent, var(--status-running), transparent);
+      .wk-bar i { position: absolute; top: 0; bottom: 0; left: -30%; width: 30%; background: linear-gradient(90deg, transparent, var(--status-running), transparent);
         animation: scan 1.8s linear infinite; }
     `,
   ];

package/src/elements/overview/pipeline-graph/strings.ts

@@ -29,12 +29,12 @@ export function graphStrings(up: boolean, functions: boolean): Omit<LayeredGraph
     inspector: msg('Selected item'),
     stubTip: msg('Outside this layer'),
     more: (n) => msg(str`+${n}`),
-    badge: msg('number of passes'),
+    badge: msg('Passes'),
     solidEdge: lineageWord('given_from'),
     dottedEdge: lineageWord('after'),
     dashedEdge: lineageWord('created_from'),
-    cycle: msg('next pass'),
-    drill: msg('has a level below'),
+    cycle: msg('Next pass'),
+    drill: msg('Has a level below'),
     open: msg('Show inside'),
     close: msg('Hide inside'),
     iconNames: { agent: msg('agent task'), python: msg('Python task') },

package/src/elements/shared/ca-definition.ts

@@ -182,9 +182,8 @@ export class CaDefinition extends LitElement {
     };
     return html`<div class="df">
       <div class="df-hd">
-        <button type="button" class="df-sum" aria-expanded=${isOpen ? 'true' : 'false'} @click=${toggle}>
+        <button type="button" class="df-sum" aria-expanded=${isOpen ? 'true' : 'false'} title=${isRole ? msg('Role of this kind') : nothing} @click=${toggle}>
           <span class="tag">${f.part}</span><span class="jmono">${f.path}</span>
-          ${isRole ? html`<span class="ct-chip">${msg('Role of this kind')}</span>` : nothing}
         </button>
         ${isMd
           ? html`<button type="button" class="df-tog" @click=${flip}>${showSource ? msg('Show rendered') : msg('Show source')}</button>`

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

@@ -77,8 +77,7 @@ export class CaHosts extends LitElement {
       </section>
       ${quota.length
         ? html`<section class="panel c12 enter">
-            <h3 title=${msg('Account-wide | read at each agent session start')}>
-              ${msg('Subscription usage')}<span class="r">${msg('Per account, first → last reading')}</span></h3>
+            <h3 title=${msg('Account-wide | first and last reading per account | read at each agent session start')}>${msg('Subscription usage')}</h3>
             <ca-quota .accounts=${quota} .rests=${quota.flatMap((a) => a.rests ?? [])} live></ca-quota>
           </section>`
         : nothing}

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

@@ -9,6 +9,7 @@ import {
   runActivity,
   runIdOf,
   runRow,
+  tryCounts,
   type MonitorSnapshot,
   type RunDerived,
 } from '@contraagent/api';
@@ -24,7 +25,8 @@ import { ViewRouter, type ViewRouteCause, type ViewRouterMode } from '../../core
 import { LocaleController } from '../../controllers/locale.js';
 import { ShortcutsController, isShortcutScope, type ShortcutScope } from '../../controllers/shortcuts.js';
 import { ThemeController } from '../../controllers/theme.js';
-import { runLine, runLineAccounts, triesLine } from '../../words/index.js';
+import { runLine, runLineAccounts, shownTasksLine, shownTriesLine } from '../../words/index.js';
+import { filterJournal, filterTasks } from '../../adapters/filters.js';
 import { runMark } from '../../words/run-line.js';
 import { exportTip, exportedLabel } from '../../words/export.js';
 import { apiErrorLine } from '../../words/api-error.js';
@@ -477,9 +479,9 @@ export class CaMonitor extends LitElement {
       <span class="rs" title=${summary ? accountsTip(runLineAccounts(snap.state, summary)) : ''}>${summary ? runLine(snap.state, summary, derived) : ''}</span>`;
   }
 
-  /** The run button's label on the trends page: its name, and what it shows. */
+  /** The run button's label on the trends page: its name, what it shows in its tooltip. */
   private trendsLabel() {
-    return html`<span class="dot" data-tone="neutral" aria-hidden="true"></span><span class="rn">${trendsTitle()}</span><span class="rs">${trendsTip()}</span>`;
+    return html`<span class="dot" data-tone="neutral" aria-hidden="true"></span><span class="rn" title=${trendsTip()}>${trendsTitle()}</span>`;
   }
 
   /** The run button's label on the hosts page: the hosts in one line, attention while a host has no report. */
@@ -514,8 +516,7 @@ export class CaMonitor extends LitElement {
   private renderBar(d: RunDerived) {
     const { viewRoute } = this;
     if (viewRoute.tab !== 'tasks' && viewRoute.tab !== 'journal') return nothing;
-    const { counts, kinds } = d;
-    const total = counts.total;
+    const { kinds } = d;
     return html`<div class="bar">
       <select title=${msg('Kind')} aria-label=${msg('Kind')} @change=${(e: Event) => this.navigate({ kind: (e.target as HTMLSelectElement).value })}>
         <option value="" ?selected=${!viewRoute.kind}>${msg('All kinds')}</option>
@@ -523,11 +524,21 @@ export class CaMonitor extends LitElement {
       </select>
       <input placeholder=${msg('Filter')} aria-label=${msg('Text filter')} size="22" title=${this.shortcutScope !== 'off' ? msg('Text filter (/)') : msg('Text filter')} .value=${this.qDraft ?? viewRoute.q}
         @input=${(e: Event) => this.setQ((e.target as HTMLInputElement).value)} />
-      <span class="meta">${viewRoute.tab === 'journal'
-        ? triesLine(d.tries)
-        : total === 1 ? msg('1 task') : msg(str`${total} tasks`)}</span>
+      <span class="meta" aria-live="polite">${this.shownLine(d)}</span>
     </div>`;
   }
+
+  /** While a filter is on, how many of the tab's rows it shows; the tab's badge counts them all. */
+  private shownLine(d: RunDerived): string {
+    const { viewRoute } = this;
+    const q = this.qDraft ?? viewRoute.q;
+    if (viewRoute.tab === 'journal') {
+      if (!viewRoute.kind && !q && !viewRoute.stop) return '';
+      return shownTriesLine(tryCounts(filterJournal(this.snap.state.journal, viewRoute.kind, viewRoute.stop, q)), d.tries.tries);
+    }
+    if (!viewRoute.kind && !q) return '';
+    return shownTasksLine(filterTasks(d.rows, viewRoute.kind, q).length, d.counts.total);
+  }
 }
 
 declare global {

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

@@ -270,7 +270,7 @@ export class CaRunPicker extends LitElement {
             </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>`}
+          : html`<span aria-hidden="true">▥</span><span class="nm" title=${trendsTip()}>${trendsTitle()}</span>`}
     </div>`;
   }
 }

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

@@ -38,6 +38,11 @@ export class CaThemeSwitch extends LitElement {
         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; }
+      /* on a phone the icon alone: the word stays the button's accessible name */
+      @media (max-width: 480px) {
+        .trig { padding: 4px 6px; }
+        .trig .lbl { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+      }
       .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; }
@@ -148,7 +153,7 @@ export class CaThemeSwitch extends LitElement {
     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')}
+        <span class="lbl">${msg('Theme')}</span>
       </button>
       ${this.open
         ? html`<div id="menu" class="menu" role="menu" aria-label=${msg('Theme')} @keydown=${(e: KeyboardEvent) => this.onMenuKey(e)}>

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

@@ -12,7 +12,7 @@ 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 { taskHeader, taskWho } from './header.js';
 import { noTranscript } from './panes/transcript.js';
 import { inputPane, outputPane } from './panes/io.js';
 import { definitionPane } from './panes/definition.js';
@@ -112,7 +112,7 @@ export class CaTaskView extends LitElement {
     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}
+        ? html`<ca-transcript .run=${this.run} .stream=${d.stream} base-url=${this.baseUrl} .client=${this.client} .live=${c.live} .shownWho=${taskWho(c)}
             .rows=${d.rows} .round=${this.round} mode=${view === 'transcript' ? 'full' : view === 'input' ? 'tabs' : 'none'}
             @ca-rounds=${(e: CustomEvent<RoundsChangedDetail>) => {
               this.launches = e.detail.launches;

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

@@ -8,6 +8,7 @@ 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 type { Who } from '../../adapters/transcript/who.js';
 import { StreamController } from '../../controllers/stream.js';
 import { emit, type RoundInfo, type RoundsChangedDetail } from '../../core/events.js';
 import { getLocale } from '../../core/i18n.js';
@@ -19,6 +20,7 @@ import { modelSwitchTip } from '../../words/hops.js';
 
 /** The transcript's words, in the reader's language (call at render time). */
 const strings = (): TranscriptStrings => ({
+  // the picker's accessible name: its buttons name each session
   sections: msg('Agent sessions'),
   sectionsTip: [
     `${msg('Retry')}: ${retryTip()}`,
@@ -90,6 +92,8 @@ export class CaTranscript extends LitElement {
   @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[] = [];
+  /** Who the page names already (a task's header): each round's head shows only the coding agent, model and role that differ. */
+  @property({ attribute: false }) shownWho: Who | null = null;
   /** `full`; `tabs`: only the round picker (another view of the task is shown); `none`: hidden. */
   @property({ reflect: true }) mode: 'full' | 'tabs' | 'none' = 'full';
 
@@ -144,14 +148,15 @@ export class CaTranscript extends LitElement {
   /** 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()];
+    const w = this.shownWho;
+    const key = [this.feed.version, this.rows, this.run, active, getLocale(), w?.agent, w?.model, w?.role];
     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 }) };
+    this.drawn = { key, rounds, sections: transcriptSections(t, rounds, { run: this.run, rows: this.rows, active, shownWho: w }) };
     return this.drawn;
   }