@contraagent/ui 0.7.2 → 0.8.1

package/src/elements/lists/ca-contracts.ts

@@ -8,19 +8,16 @@ import { RememberedSet } from '../../core/memory.js';
 import type { TaskView } from '../../core/view-route.js';
 import { base } from '@contraagent/elements/styles';
 import { executorIcon, executorIconStyles } from '../../words/executor.js';
-import { kindUnit } from '../../words/format.js';
-import { correctionTip, correctionsLabel, notRunText, type Producer } from '../../words/contract.js';
+import { facts, kindUnit } from '../../words/format.js';
+import { contractStatusLabel, correctionRoundTip, correctionRoundsLabel, notRunText, type Producer } from '../../words/contract.js';
 import { contractChip, contractStyles, fieldCheckTable, fileConditions, inputChip } from '../shared/contract-parts.js';
 
 const CT_ORDER: readonly ContractStatus[] = ['invalid', 'refused', 'failed', 'running', 'pending', 'valid'];
 
-/** Output contracts per status, worst first; a line of text when none is declared. */
-export function ctChips(outputs: Outputs | null) {
+/** Output contracts per status that is not passed, worst first: the passed ones head their own group. */
+function ctChips(outputs: Outputs | null) {
   const t = outputs?.tally;
-  const chips = t ? CT_ORDER.filter((k) => t[k]) : [];
-  return chips.length
-    ? chips.map((k) => contractChip(k, t?.[k]))
-    : html`<span class="meta">${msg('No checked files')}</span>`;
+  return (t ? CT_ORDER.filter((k) => k !== 'valid' && t[k]) : []).map((k) => contractChip(k, t?.[k]));
 }
 
 const shortPath = (p: string) => p.split('/').slice(-2).join('/');
@@ -34,8 +31,9 @@ const rank = (s: ContractStatus | null | undefined) => (s ? CT_ORDER.indexOf(s)
 
 /**
  * The files each task must write (`OutputContract`) and read (`InputContract`),
- * problems first, each checked field by field against its schema. Links open
- * the task (`ca-open-task`).
+ * problems first, each with the chip of its status, then the passed ones under
+ * one chip; each checked field by field against its schema. Links open the
+ * task (`ca-open-task`).
  *
  * @fires ca-open-task - `{key, view}`: a link to the task's input, output or transcript
  */
@@ -49,6 +47,8 @@ export class CaContracts extends LitElement {
     css`
       :host { display: block; container-type: inline-size; }
       .ct-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
+      /* the passed outputs: one chip heads them, their rows carry none */
+      .passed { margin: 6px 0 0; padding: 10px 0 8px; font: inherit; border-top: 1px solid var(--line); }
       details.ct { border-top: 1px solid var(--line); }
       details.ct > summary { list-style: none; cursor: pointer; padding: 7px 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
       details.ct > summary > * { min-width: 0; overflow-wrap: anywhere; }
@@ -85,24 +85,30 @@ export class CaContracts extends LitElement {
     const cs = this.outputs?.contracts ?? [];
     this.outcomes = this.plan ? deriveRun(this.journal, this.plan).outcomes : new Map<string, TaskOutcome>();
     if (!cs.length) {
-      return html`<div class="blank"><span class="ic" aria-hidden="true">▣</span><b>${msg('No checked files')}</b>
-        <span>${msg('No task declares an OutputContract or an InputContract')}</span></div>`;
+      return html`<div class="blank"><span class="ic" aria-hidden="true">▣</span><b>${facts(msg('No checked files'), msg('no task declares an OutputContract or an InputContract'))}</b></div>`;
     }
     const outs = cs
       .flatMap((c) => (c.outputs ?? []).map((o) => [c, o] as const))
       .sort(([a, x], [b, y]) => rank(x.status) - rank(y.status) || a.key.localeCompare(b.key));
     const ins = cs.flatMap((c) => (c.inputs ?? []).map((i) => [c, i] as const));
+    const others = outs.filter(([, o]) => o.status !== 'valid');
+    const passed = outs.filter(([, o]) => o.status === 'valid');
+    const chips = ctChips(this.outputs);
     return html`<div class="g12">
       <section class="panel c12">
-        <h3 title=${msg('OutputContract')}>${msg('Outputs')}
-          <span class="r">${msg('Files each task must write')}</span></h3>
-        <div class="ct-row">${ctChips(this.outputs)}</div>
-        ${repeat(outs, ([c, o]) => `out|${c.key}|${o.path}`, ([c, o]) => this.outRow(c, o))}
+        <h3 title=${msg('Files each task must write (OutputContract)')}>${msg('Outputs')}</h3>
+        ${chips.length ? html`<div class="ct-row">${chips}</div>` : nothing}
+        ${repeat(others, ([c, o]) => `out|${c.key}|${o.path}`, ([c, o]) => this.outRow(c, o))}
+        ${passed.length
+          ? html`<h4 class="passed">${contractChip('valid', passed.length)}</h4>
+              <div role="group" aria-label=${contractStatusLabel('valid')}>
+                ${repeat(passed, ([c, o]) => `out|${c.key}|${o.path}`, ([c, o]) => this.outRow(c, o))}
+              </div>`
+          : nothing}
       </section>
       ${ins.length
         ? html`<section class="panel c12">
-            <h3 title=${msg('InputContract')}>${msg('Inputs')}
-              <span class="r">${msg('Files each task reads')}</span></h3>
+            <h3 title=${msg('Files each task reads (InputContract)')}>${msg('Inputs')}</h3>
             ${repeat(ins, ([c, i]) => `in|${c.key}|${i.path}`, ([c, i]) => this.inRow(c, i))}
           </section>`
         : nothing}
@@ -165,8 +171,8 @@ export class CaContracts extends LitElement {
     // The chip says why there is no file; the size column shows a size only when there is one.
     return this.details(
       `out|${c.key}|${o.path}`,
-      html`${contractChip(status)}
-        ${rounds > 1 ? html`<span class="meta" title=${correctionTip()}>${correctionsLabel(rounds, status === 'valid')}</span>` : nothing}
+      html`${status === 'valid' ? nothing : contractChip(status)}
+        ${rounds > 1 ? html`<span class="meta" title=${correctionRoundTip()}>${correctionRoundsLabel(rounds, status === 'valid')}</span>` : nothing}
         ${this.who(c)}
         <span class="jmono jdim ct-path" title=${o.path}>${shortPath(o.path)}</span>
         ${status === 'failed' && this.reasonOf(c.key) ? html`<span class="why">${this.reasonOf(c.key)}</span>` : nothing}

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

@@ -19,7 +19,7 @@ import { emit } from '../../core/events.js';
  * @csspart label - a tile's label
  * @csspart value - a tile's value
  * @csspart sub - each line under the value
- * @csspart action - a tile's link
+ * @csspart action - a tile's link, over the whole tile
  */
 @customElement('ca-kpis')
 @localized()
@@ -31,6 +31,8 @@ export class CaKpis extends LitElement {
   @property({ attribute: false }) journal: JournalRow[] = [];
   /** The scheduled tasks; without it, tasks are counted from the journal. */
   @property({ attribute: false }) plan: Plan = { nodes: [], groups: [] };
+  /** Leaves the kind with the highest cost out of the cost tile, for a page that shows the cost by kind beside it. */
+  @property({ type: Boolean, attribute: 'no-highest-cost' }) noHighestCost = false;
 
   private readonly onAction = (e: CustomEvent<{ action: string }>): void => {
     e.stopPropagation();
@@ -40,7 +42,7 @@ export class CaKpis extends LitElement {
   };
 
   override render() {
-    return html`<cae-stat-tiles exportparts="tiles, tile, label, value, sub, action" .tiles=${kpiTiles(this.journal, deriveRun(this.journal, this.plan))} @cae-action=${this.onAction}></cae-stat-tiles>`;
+    return html`<cae-stat-tiles exportparts="tiles, tile, label, value, sub, action" .tiles=${kpiTiles(this.journal, deriveRun(this.journal, this.plan), { highestCost: !this.noHighestCost })} @cae-action=${this.onAction}></cae-stat-tiles>`;
   }
 }
 

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

@@ -16,7 +16,8 @@ const COLUMNS: readonly ModelMeasure[] = ['cost', 'tokens', 'time', 'sessions'];
 
 /**
  * What each model was used for in a run (`Plan.models`): the share of each model in
- * the chosen measure (cost, tokens, time or agent sessions) as one bar, and a table
+ * the chosen measure (cost, tokens, time or agent sessions) as one bar (the table
+ * names each segment, so the bar has no names under it), and a table
  * of every model with its share and every measure, and its peak context when
  * a session on it reported one. A model keeps its colour, and
  * its place, in the order it was first used, whatever the measure; past six models
@@ -74,7 +75,7 @@ export class CaModelUsage extends LitElement {
               @cae-change=${(e: CustomEvent<{ value: string }>) => (this.measure = e.detail.value as ModelMeasure)}></cae-segmented>
           </div>`
         : nothing}
-      ${shareBar(shareParts(this.models, measure), { label: measureLabel(measure) })}
+      ${shareBar(shareParts(this.models, measure), { label: measureLabel(measure), names: false })}
       <div class="wrap" data-scroll="x" tabindex="0" role="region" aria-label=${msg('Models')}>
         <table>
           <thead>

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/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/shared/file-card.ts

@@ -3,7 +3,7 @@
 import { runRelative, type ContractSpec } from '@contraagent/api';
 import { msg } from '@lit/localize';
 import { html, nothing, type TemplateResult } from 'lit';
-import { correctionTip, correctionsLabel, notRunText, type Producer } from '../../words/contract.js';
+import { correctionRoundTip, correctionRoundsLabel, notRunText, type Producer } from '../../words/contract.js';
 import { contractChip, fieldCheckTable, fileConditions, inputChip } from './contract-parts.js';
 
 /**
@@ -27,7 +27,7 @@ export function ioFileCard(
   const stat =
     role === 'output'
       ? html`${contractChip(o.status)}${(o.rounds ?? 0) > 1
-            ? html` <span class="meta" title=${correctionTip()}>${correctionsLabel(o.rounds, o.status === 'valid')}</span>`
+            ? html` <span class="meta" title=${correctionRoundTip()}>${correctionRoundsLabel(o.rounds, o.status === 'valid')}</span>`
             : nothing}`
       : inputChip(o);
   const head = html`<div class="io-hd">${opts.chip ?? stat}<span class="jmono ct-path" title=${o.path}>${runRelative(o.path, run)}</span></div>${opts.origin

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 {