@contraagent/ui 0.8.0 → 0.8.1

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/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;
   }
 

package/src/elements/task/header.ts

@@ -8,7 +8,7 @@ import { pill } from '@contraagent/elements/primitives';
 import { facts, fmtDur, kindUnit, listText, localTime, tokenCount, unreadEvents, usageUnknown, usageUnknownWords, usd } from '../../words/format.js';
 import { attemptNames, deferredText, changedFiles, changedFilesTip, changeLabel, credentialLabel, credentialTip, locksLabel, locksTip, modelSwitch, outcomeLabel, priorityText, priorityTip, replayedLabel, replayedTip, stopLabel, workingDirectoryText, workingDirectoryTip, type ChangeKind } from '../../words/index.js';
 import { contextWarnedText, contextWarnedTip, peakContextLine, peakContextTip, peakTry } from '../../words/context.js';
-import { readingShort, readingTip } from '../../words/quota.js';
+import { readingChange, readingShort, readingTip } from '../../words/quota.js';
 import { safetyStopCount, safetyStopLine, safetyStopTip } from '../../words/safety.js';
 import { customColumnTip, customValues } from '../../words/row-extras.js';
 import { divergenceTip, divergenceWord, rerunLine, rerunOf } from '../../words/rerun.js';
@@ -92,7 +92,7 @@ function verdict(c: TaskContext): [text: string, tone: Tone] {
 }
 
 /** The model of the latest round, as its launch named it (`--model`). */
-function streamModel(c: TaskContext): string {
+function streamModel(c: Pick<TaskContext, 'launches'>): string {
   for (let i = c.launches.length - 1; i >= 0; i--) {
     const l = c.launches[i];
     const m = l ? launchWho(l).model : '';
@@ -105,6 +105,19 @@ function streamModel(c: TaskContext): string {
  * The header of task `key`. `onSearch(query, nth)` is called when the reader
  * picks one of its web searches (the nth with that query).
  */
+/** Who ran the task, as its header names it: the running session's agent, model and role, else the latest attempt's. */
+export function taskWho(c: Pick<TaskContext, 'detail' | 'launches'>): Who {
+  const { rows, launches } = c.detail;
+  const lastRow = rows.slice().sort((a, b) => String(a.ts).localeCompare(String(b.ts)))[rows.length - 1];
+  const lc0 = launches[0];
+  return {
+    agent: agentLabel(lc0?.cmd ? lc0.cmd.split(' ')[0] : lastRow?.agent),
+    // The journal may not name the model (an agent that does not report it): fall back to the one the transcript shows.
+    model: lc0?.model || lastRow?.model || streamModel(c),
+    role: lc0?.role || '',
+  };
+}
+
 export function taskHeader(c: TaskContext, key: string, onSearch: (query: string, nth: number) => void): TemplateResult {
   const d = c.detail;
   const live = c.live;
@@ -112,14 +125,7 @@ export function taskHeader(c: TaskContext, key: string, onSearch: (query: string
   const py = isPy(d);
   const session = hadSession(d);
   const byTs = rows.slice().sort((a, b) => String(a.ts).localeCompare(String(b.ts)));
-  const lastRow = byTs[byTs.length - 1];
-  const lc0 = launches[0];
-  const who: Who = {
-    agent: agentLabel(lc0?.cmd ? lc0.cmd.split(' ')[0] : lastRow?.agent),
-    // The journal may not name the model (an agent that does not report it): fall back to the one the transcript shows.
-    model: lc0?.model || lastRow?.model || streamModel(c),
-    role: lc0?.role || '',
-  };
+  const who = taskWho(c);
   const otherModels = session ? [...new Set(byTs.map((r) => r.model).filter((x): x is string => !!x && x !== who.model))] : [];
   const first = rows[0];
   const tries = rows.filter(isLaunched);
@@ -285,10 +291,14 @@ function quotaLine(c: TaskContext, tries: JournalRow[]) {
   const start = first ? tryQuota(first, readings).start : null;
   if (!start || !last) return nothing;
   const next = tryQuota(last, readings).next;
-  // The identity chip names the account; both readings are that account's.
+  // The identity chip names the account; both readings are that account's. One line: each window from the first reading to the next.
+  const tip = [
+    msg(str`Usage at session start: ${readingShort(start)}`),
+    readingTip(start),
+    ...(next ? ['', msg(str`Usage after this task: ${readingShort(next)}`), readingTip(next)] : []),
+  ].join('\n');
   return html`<div class="spend quota">
-    <span title=${readingTip(start)}>${msg(str`Usage at session start: ${readingShort(start)}`)}</span>
-    ${next ? html`<span title=${readingTip(next)}>${msg(str`Usage after this task: ${readingShort(next)}`)}</span>` : nothing}
+    <span title=${tip}>${msg(str`Usage: ${readingChange(start, next)}`)}</span>
   </div>`;
 }
 

package/src/elements/task/panes/io.ts

@@ -1,6 +1,6 @@
 // The input and output panes of `ca-task-view`: what the task read (parameters,
 // files, earlier tasks, the prompt) and what it wrote (files against their
-// contracts, the outcome, tokens and cost, later tasks).
+// contracts, tokens and cost, later tasks).
 import {
   isLaunched,
   isPython,
@@ -19,10 +19,10 @@ import { msg, str } from '@lit/localize';
 import { html, nothing, type TemplateResult } from 'lit';
 import { pill } from '@contraagent/elements/primitives';
 import '@contraagent/elements/json-tree/define';
-import { facts, fmtDur, kindUnit, tokenCount, usd } from '../../../words/format.js';
+import { facts, kindUnit, tokenCount, usd } from '../../../words/format.js';
 import { attemptLabel, attemptNames, credentialLabel, credentialTip, outcomeLabel, stopLabel } from '../../../words/index.js';
 import { accountReading, readingShort, readingTip } from '../../../words/quota.js';
-import { outcomeMark, outcomeTone, stopTone } from '../../../lib/tone.js';
+import { outcomeMark, outcomeTone } from '../../../lib/tone.js';
 import { executorIcon } from '../../../words/executor.js';
 import { promptText } from '../../shared/prompt-text.js';
 import { contractChip } from '../../shared/contract-parts.js';
@@ -31,7 +31,7 @@ import { taskChip } from '../../shared/task-chip.js';
 import { inputView, notPassed, type EarlierTask, type InputFile } from '../inputs.js';
 import { roundLabel, roundWhy } from '../../../words/rounds.js';
 import { inputFileCheckWord, inputRootPath, inputRootTip, lineageTip, lineageWord } from '../../../words/lineage.js';
-import { correctionsOf, hadSession, isPy, producerOf, stateOf, taskLink, type TaskContext } from '../context.js';
+import { hadSession, isPy, producerOf, stateOf, taskLink, type TaskContext } from '../context.js';
 
 const valueText = (v: unknown): string => (typeof v === 'string' ? v : JSON.stringify(v) ?? String(v));
 const sameJson = (a: unknown, b: unknown): boolean => {
@@ -56,6 +56,8 @@ export function inputPane(c: TaskContext): TemplateResult {
   const params = Object.entries(io.params);
   const { files, earlier } = inputView(io);
   const source = (v: unknown) => io.upstream.find((u) => u.outputs.some((o) => o.file.exists && sameJson(o.file.content, v)));
+  // An earlier task a parameter names ("From prepare · a") is given its output there: its row below does not say it again.
+  const givenAbove = new Set(params.map(([, v]) => source(v)?.key).filter((k): k is string => !!k));
   return html`<h4 class="sect-h">${msg('Parameters')}</h4>
     ${params.length
       ? html`<table class="ct-fields params">
@@ -76,7 +78,7 @@ export function inputPane(c: TaskContext): TemplateResult {
           ${files.map((f) => inputCard(c, f))}`
       : nothing}
     <h4 class="sect-h">${msg('Earlier tasks')}</h4>
-    ${earlier.length ? earlier.map((e) => earlierTask(c, e)) : html`<div class="meta">${msg('No earlier tasks')}</div>`}
+    ${earlier.length ? earlier.map((e) => earlierTask(c, e, givenAbove.has(e.task.key))) : html`<div class="meta">${msg('No earlier tasks')}</div>`}
     ${isPy(d) ? nothing : promptSection(c)}`;
 }
 
@@ -120,9 +122,10 @@ function inputCard(c: TaskContext, f: InputFile) {
 /**
  * One earlier task: its status, how this task is joined to it (its lineage, in the words of
  * the graph's edges), how many of its output files this task reads, and the others folded
- * under it (open when one did not pass).
+ * under it (open when one did not pass). `givenAbove`: a parameter's "From" names it,
+ * so its lineage leaves out "given output" and keeps the rest.
  */
-function earlierTask(c: TaskContext, e: EarlierTask) {
+function earlierTask(c: TaskContext, e: EarlierTask, givenAbove: boolean) {
   const u = e.task;
   const kindName = isPython(u) ? msg('Python task') : msg('Agent task');
   const state = c.outcomes.get(u.key)?.outcome;
@@ -134,7 +137,7 @@ function earlierTask(c: TaskContext, e: EarlierTask) {
     ${executorIcon(isPython(u), kindName)}
     ${taskLink(c, u)}
     ${state ? outcomeChip(state) : nothing}
-    ${lineageTags(u.lineage ?? [])}
+    ${lineageTags((u.lineage ?? []).filter((l) => !(givenAbove && l === 'given_from')))}
     <span class="meta">${summary}</span>
   </div>`;
   if (!e.rest.length) return html`<div class="upstream">${head}</div>`;
@@ -214,24 +217,14 @@ function usageTable(c: TaskContext, rows: JournalRow[]) {
     </table></div>`;
 }
 
-/** What the task wrote: its output files, its outcome, tokens and cost, and the later tasks. */
+/** What the task wrote: its output files, tokens and cost, and the later tasks. */
 export function outputPane(c: TaskContext): TemplateResult {
   const d = c.detail;
   const io = d.io;
-  const last = d.rows[d.rows.length - 1];
-  // The reason, a refusal's cause and a model switch are in the verdict above, so they are not repeated here.
-  return html`<h4 class="sect-h">${msg('Output files')}</h4>
-    ${io.outputs.length
+  // The header above names the attempts and how each ended, and the tab names the files: the pane starts with them.
+  return html`${io.outputs.length
       ? io.outputs.map((o) => ioFileCard(o, 'output', c.run, { producerOf: producerOf(c) }))
       : html`<div class="meta">${msg('No output files')}</div>`}
-    ${last
-      ? html`<h4 class="sect-h">${msg('Outcome')}</h4>
-          <div class="ct-in">
-            ${pill({ text: stopLabel(last.stop, last.reason), tone: stopTone(last.stop) })}
-            ${isLaunched(last) ? html`<span class="meta">${facts(attemptLabel(last.attempt), fmtDur(last.wall_s), correctionsOf(last))}</span>` : nothing}
-
-          </div>`
-      : nothing}
     ${usageTable(c, d.rows)}
     <h4 class="sect-h">${msg('Later tasks')}</h4>
     ${io.downstream.length ? laterTasks(c, io.downstream) : html`<div class="meta">${msg('No later tasks')}</div>`}`;

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

@@ -150,7 +150,8 @@ export class CaTrends extends LitElement {
   /** The period, its time zone and the run group: links of the page's address. */
   private controls() {
     const data = this.view?.data;
-    const period = data ? html`<span class="period">${periodLabel(data.period.from, data.period.to, data.period.tz)}</span>` : nothing;
+    // The time zone control names the zone; an export has none, so its period names it.
+    const period = data ? html`<span class="period">${periodLabel(data.period.from, data.period.to, this.exported ? data.period.tz : '')}</span>` : nothing;
     if (this.exported) return html`<div class="controls"><span class="meta">${exportedPeriod()}</span>${period}</div>`;
     const choice = this.days ? String(this.days) : 'dates';
     const today = data?.period.to || new Date().toISOString().slice(0, 10);