@contraagent/ui 0.7.2 → 0.8.1

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,21 +8,23 @@ 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';
 import { RememberedSet, SessionSet, memoryOf, pageMemory } from '../../core/memory.js';
 import { promptText } from '../shared/prompt-text.js';
 import { retryTip } from '../../words/attempts.js';
-import { correctionTip } from '../../words/contract.js';
+import { correctionRoundTip } from '../../words/contract.js';
 import { modelSwitchTip } from '../../words/hops.js';
 
 /** The transcript's words, in the reader's language (call at render time). */
 const strings = (): TranscriptStrings => ({
+  // the picker's accessible name: its buttons name each session
   sections: msg('Agent sessions'),
   sectionsTip: [
     `${msg('Retry')}: ${retryTip()}`,
-    `${msg('Correction')}: ${correctionTip()}`,
+    `${msg('Correction round')}: ${correctionRoundTip()}`,
     `${msg('Model switch')}: ${modelSwitchTip()}`,
   ].join('\n'),
   loadEarlier: (n) => (n === 1 ? msg('Show 1 earlier line') : msg(str`Show ${n} earlier lines`)),
@@ -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/context.ts

@@ -16,6 +16,7 @@ import {
   type UpstreamTask,
 } from '@contraagent/api';
 import { html } from 'lit';
+import { correctionCount } from '../../adapters/filters.js';
 import { emit, type RoundInfo } from '../../core/events.js';
 import { kindUnit } from '../../words/format.js';
 import { correctionsText, inputCause, notStartedCause } from '../../words/index.js';
@@ -95,7 +96,7 @@ export function culprit(c: TaskContext): { key: string; kind: string; unit: stri
 }
 
 /** `N corrections` for a journal row whose attempt needed them ('' when none). */
-export const correctionsOf = (r: { rounds?: number | null }): string => correctionsText((r.rounds || 1) - 1);
+export const correctionsOf = (r: Pick<JournalRow, 'rounds' | 'hook_errors'>): string => correctionsText(correctionCount(r));
 
 /** A task's name as a link that sends `ca-open-task`. */
 export const taskLink = (c: TaskContext, u: { key: string; kind: string; unit: string }) =>

package/src/elements/task/header.ts

@@ -6,9 +6,9 @@ import { html, nothing, type TemplateResult } from 'lit';
 import { toneAttr } from '@contraagent/elements';
 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, type ChangeKind } from '../../words/index.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';
@@ -17,6 +17,7 @@ import { isStop, type Tone } from '../../lib/tone.js';
 import { executorIcon } from '../../words/executor.js';
 import '@contraagent/elements/json-tree/define';
 import { tagChips, type TranscriptTag } from '@contraagent/elements/transcript';
+import { correctionCount } from '../../adapters/filters.js';
 import { checkMessage } from '../../adapters/transcript/rounds.js';
 import { agentLabel, launchWho, whoTags, type Who } from '../../adapters/transcript/who.js';
 import { correctionsOf, hadSession, isPy, notStartedWhy, stateOf, type TaskContext } from './context.js';
@@ -73,7 +74,7 @@ function verdict(c: TaskContext): [text: string, tone: Tone] {
       'neutral',
     ];
   }
-  const corrections = (last.rounds || 1) - 1 + (last.hook_errors ?? []).length;
+  const corrections = correctionCount(last);
   if (corrections > 0) {
     const errors = [...(last.hook_errors ?? []).flat(), ...(last.round_errors ?? []).flat(), ...c.rounds.flatMap((r) => r.rejectedWith)];
     const first = errors[0] ? checkMessage(runRelative(errors[0], c.run)) : '';
@@ -91,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 : '';
@@ -104,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;
@@ -111,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);
@@ -139,6 +146,7 @@ export function taskHeader(c: TaskContext, key: string, onSearch: (query: string
               </div>`
             : nothing}
           ${node?.priority ? html`<div class="meta" title=${priorityTip()}>${priorityText(node.priority)}</div>` : nothing}
+          ${node?.cwd ? html`<div class="meta" title=${workingDirectoryTip()}>${workingDirectoryText(node.cwd)}</div>` : nothing}
           ${rerunMeta(rows, node?.rerun)}
           ${stoppedFlowCalls(c)}
           ${session
@@ -283,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';
@@ -30,8 +30,8 @@ import { ioFileCard } from '../../shared/file-card.js';
 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, lineageTip, lineageWord } from '../../../words/lineage.js';
-import { correctionsOf, hadSession, isPy, producerOf, stateOf, taskLink, type TaskContext } from '../context.js';
+import { inputFileCheckWord, inputRootPath, inputRootTip, lineageTip, lineageWord } from '../../../words/lineage.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,13 +78,14 @@ 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)}`;
 }
 
 /**
- * One input file of the task (an `InputFile` param): its check at the start, its path,
- * the param that holds it, its hash, and the earlier task whose output file it is.
+ * One input file of the task (an `InputFile` param): its check at the start, its path
+ * (with its input root), the param that holds it, its hash, and the earlier task whose
+ * output file it is.
  */
 function inputFileCard(c: TaskContext, f: TaskInputFile) {
   const tone = f.check === 'passed' ? 'done' : f.check === 'refused' ? 'failed' : 'neutral';
@@ -91,8 +94,10 @@ function inputFileCard(c: TaskContext, f: TaskInputFile) {
   const origin = f.writer
     ? html`<span>${msg(html`Output of ${taskLink(c, writer ?? { key: f.writer, kind: f.writer, unit: '' })}`)}</span>`
     : nothing;
+  const rooted = inputRootPath(f);
+  const tip = f.root && f.root !== 'out' ? inputRootTip(f.root, f.path) : f.path;
   return html`<div class="io-card one infile">
-    <div class="io-hd">${pill({ text: inputFileCheckWord(f.check), tone, mark })}<span class="jmono ct-path" title=${f.path}>${runRelative(f.path, c.run)}</span></div>
+    <div class="io-hd">${pill({ text: inputFileCheckWord(f.check), tone, mark })}<span class="jmono ct-path" title=${tip}>${rooted ?? runRelative(f.path, c.run)}</span></div>
     <div class="meta io-from"><span title=${f.sha256}>${facts(msg(str`Param ${f.param}`), `sha256 ${f.sha256.slice(0, 12)}`)}</span>${f.writer
       ? html` | ${origin}`
       : nothing}</div>
@@ -117,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;
@@ -131,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>`;
@@ -211,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);