@contraagent/ui 0.0.0-stage → 0.1.0

package/src/elements/lists/ca-task-table.ts

@@ -0,0 +1,94 @@
+import { deriveRun, isPython, type JournalRow, type Plan, type TaskRow } from '@contraagent/api';
+import '@contraagent/elements/data-table/define';
+import { localized, msg } from '@lit/localize';
+import { LitElement, css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { emit } from '../../core/events.js';
+import { base, meterStyles } from '@contraagent/elements/styles';
+import { executorIconStyles } from '../../words/executor.js';
+import { tableStrings } from '../../words/table.js';
+import { filterTasks, sortTasks } from '../../adapters/filters.js';
+import { taskColumns } from '../../adapters/task-columns.js';
+
+/** The look of the rows and of what their cells draw, inside `<cae-data-table>`. */
+const CELLS = [
+  meterStyles,
+  executorIconStyles,
+  css`
+    caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+    /* the numbers sit tight together, right-aligned; the status comes last and takes the spare width, so no gap opens inside the row */
+    tr { column-gap: 20px; padding: 6px 12px; }
+    tbody tr { border-bottom: 0; border-radius: 8px; transition: background 0.15s; }
+    thead tr { align-items: end; white-space: nowrap; padding: 4px 12px 8px; margin-bottom: 4px; }
+    tbody [data-col='ended'] { font-size: var(--font-size-sm); }
+    .wall { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
+    .wall .jdur { width: 56px; margin: 0; flex: none; }
+    .grow { display: flex; align-items: center; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .grow .jdim { margin-left: 8px; }
+    .pass { margin-left: 8px; font-size: 11px; color: var(--text-muted); }
+    .cause { display: block; font-size: 11px; color: var(--text-muted); margin-top: 2px; white-space: normal; overflow-wrap: anywhere; }
+    /* a narrow table (its container is <cae-data-table>): the task, its status and its time */
+    @container (max-width: 760px) {
+      tr { grid-template-columns: minmax(0, 1fr) 128px 90px; }
+      [data-col='attempts'], [data-col='tokens'], [data-col='cost'], [data-col='ended'] { display: none; }
+    }
+  `,
+];
+
+/**
+ * Every task of the run, one row each (`deriveRun(...).rows`: the plan joined with the
+ * journal, so a task that never ran is a row too): what happened to it, its
+ * attempts, time, tokens and cost. A row opens the task's detail (`ca-open-task`),
+ * with a click or with Enter.
+ *
+ * @fires ca-open-task - `{key}`: a task's row was opened (its key; a Python task with `view: 'output'`)
+ */
+@customElement('ca-task-table')
+@localized()
+export class CaTaskTable extends LitElement {
+  static override styles = [base, css`:host { display: block; margin-top: 4px; }`];
+
+  /** The run's journal and plan: the tasks are the plan's, what happened to them the journal's. */
+  @property({ attribute: false }) journal: JournalRow[] = [];
+  @property({ attribute: false }) plan: Plan | null = null;
+  /** Only this kind ('' for all). */
+  @property() kind = '';
+  /** A text filter over the kind, unit, key and last stop. */
+  @property() q = '';
+  /** The run is running: a task that has not started is waiting; in a run that is over, it did not run. */
+  @property({ type: Boolean }) live = false;
+  /** The run id: paths in a cause are shown relative to it. */
+  @property() run = '';
+
+  private open(rows: readonly TaskRow[], key: string): void {
+    const t = rows.find((r) => r.key === key);
+    // A Python task has no transcript, but its detail shows what it was given and what it left.
+    if (t) emit(this, 'ca-open-task', isPython(t) ? { key, view: 'output' } : { key });
+  }
+
+  override render() {
+    const d = this.plan ? deriveRun(this.journal, this.plan) : null;
+    const all = d?.rows ?? [];
+    const rows = sortTasks(filterTasks(all, this.kind, this.q));
+    if (!rows.length)
+      return html`<div class="blank"><span class="ic" aria-hidden="true">≡</span>${all.length ? msg('No tasks match the filter') : msg('No tasks')}</div>`;
+    const columns = taskColumns({ run: this.run, live: this.live, outcomes: d?.outcomes ?? new Map(), all, rows, journal: this.journal });
+    return html`<cae-data-table
+      .columns=${columns}
+      .rows=${rows}
+      .rowKey=${(t: TaskRow) => t.key}
+      .rowTone=${(t: TaskRow) => (t.outcome === 'running' ? 'running' : undefined)}
+      .rowAttrs=${(t: TaskRow) => ({ 'data-executor': isPython(t) ? 'python' : 'agent' })}
+      .cellStyles=${CELLS}
+      .caption=${msg('Tasks', { id: 'tab-tasks', desc: 'Tab: the list of tasks' })}
+      .strings=${tableStrings(msg('No tasks'))}
+      @cae-activate=${(e: CustomEvent<{ id: string }>) => this.open(rows, e.detail.id)}
+    ></cae-data-table>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ca-task-table': CaTaskTable;
+  }
+}

package/src/elements/lists/index.ts

@@ -0,0 +1,8 @@
+export * from './ca-task-table.js';
+export * from './ca-journal-table.js';
+export * from './ca-contracts.js';
+export * from './ca-definitions.js';
+export * from './ca-procs-view.js';
+export * from './ca-proc-tree.js';
+export * from './ca-panel-view.js';
+export * from './ca-panel-body.js';

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

@@ -0,0 +1,51 @@
+import { deriveRun, type JournalRow, type Plan } from '@contraagent/api';
+import { localized } from '@lit/localize';
+import { LitElement, css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import '@contraagent/elements/tiles/define';
+import { kpiAction, kpiTiles } from '../../adapters/kpi-tiles.js';
+import { emit } from '../../core/events.js';
+
+/**
+ * The run in numbers, as `<cae-stat-tiles>`: tasks and how they ended (with
+ * `plan`; from the journal alone otherwise), attempts, failed attempts, agent
+ * time, retries, corrections and model switches (`kpiTiles`). The parts of
+ * `<cae-stat-tiles>` are its own: a page styles them as `ca-kpis::part(tile)`.
+ *
+ * @fires ca-navigate - `{tab: 'journal', stop}`: the history filtered to what a tile counts (`bad`, `invalid_input`, `retried`, `fixup`)
+ * @fires ca-open-task - `{key}`: the one task a tile counts
+ * @csspart tiles - the grid of tiles
+ * @csspart tile - each tile (`data-id` is its id, `data-tone` its tone)
+ * @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
+ */
+@customElement('ca-kpis')
+@localized()
+export class CaKpis extends LitElement {
+  static override styles = css`
+    :host { display: block; }
+  `;
+
+  @property({ attribute: false }) journal: JournalRow[] = [];
+  /** The scheduled tasks; without it, tasks are counted from the journal. */
+  @property({ attribute: false }) plan: Plan = { nodes: [], groups: [] };
+
+  private readonly onAction = (e: CustomEvent<{ action: string }>): void => {
+    e.stopPropagation();
+    const a = kpiAction(e.detail.action);
+    if ('key' in a) emit(this, 'ca-open-task', { key: a.key });
+    else emit(this, 'ca-navigate', { tab: 'journal', stop: a.stop });
+  };
+
+  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>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ca-kpis': CaKpis;
+  }
+}

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

@@ -0,0 +1,113 @@
+import { modelMeasures, type ModelMeasure, type ModelUsage } from '@contraagent/api';
+import { localized, msg } from '@lit/localize';
+import { LitElement, css, html, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import '@contraagent/elements/segmented/define';
+import { shareBar, shareBarStyles } from '@contraagent/elements/primitives';
+import { base } from '@contraagent/elements/styles';
+import { modelRows, shareParts } from '../../adapters/model-shares.js';
+import { measureLabel, measureText, measureTip } from '../../words/models.js';
+import { peakContextLabel, peakContextTip } from '../../words/context.js';
+import { tokenCount } from '../../words/format.js';
+
+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
+ * 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
+ * the later ones share one colour as "Other models".
+ */
+@customElement('ca-model-usage')
+@localized()
+export class CaModelUsage extends LitElement {
+  static override styles = [
+    base,
+    shareBarStyles,
+    css`
+      :host { display: block; }
+      .head { display: flex; justify-content: flex-end; margin-bottom: 10px; overflow-x: auto; }
+      .head cae-segmented { flex: none; }
+      /* scrolls sideways on a narrow card: a keyboard reaches it */
+      .wrap { overflow-x: auto; margin-top: 14px; border-radius: 6px; }
+      .wrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+      /* The columns as wide as their contents, so a model's figures sit near its name. */
+      table { border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
+      th { font-weight: 500; color: var(--text-muted); text-align: right; padding: 0 0 6px 28px; white-space: nowrap; border-bottom: 1px solid var(--line); }
+      th:first-child { text-align: left; padding-left: 0; }
+      th.on { color: var(--text); font-weight: 600; }
+      td { padding: 7px 0 7px 28px; text-align: right; white-space: nowrap; color: var(--text-2); vertical-align: top; }
+      tr + tr td { border-top: 1px solid var(--line); }
+      td:first-child { text-align: left; padding-left: 0; }
+      td.on { color: var(--text); }
+      td.share { color: var(--text); font-weight: 600; }
+      .model { display: grid; grid-template-columns: 10px max-content; column-gap: 8px; align-items: baseline; }
+      .model i { width: 10px; height: 10px; border-radius: 3px; align-self: center; }
+      .model b { font-family: var(--mono); font-weight: 500; color: var(--text); }
+      .model small { grid-column: 2; font-size: 11px; color: var(--text-muted); }
+    `,
+  ];
+
+  @property({ attribute: false }) models: readonly ModelUsage[] = [];
+  /** The measure the bar and the share column show; the first one with a value when unset or empty. */
+  @state() private measure: ModelMeasure | '' = '';
+
+  private chosen(): ModelMeasure {
+    const have = modelMeasures(this.models);
+    return this.measure && have.includes(this.measure) ? this.measure : (have[0] ?? 'sessions');
+  }
+
+  override render() {
+    if (!this.models.length) return html`<div class="meta">${msg('No agent sessions')}</div>`;
+    const measure = this.chosen();
+    const have = modelMeasures(this.models);
+    const rows = modelRows(this.models, measure);
+    const peaks = this.models.some((m) => m.peak_context != null);
+    return html`${have.length > 1
+        ? html`<div class="head">
+            <cae-segmented label=${msg('Measure')} .value=${measure}
+              .options=${have.map((m) => ({ value: m, label: measureLabel(m), title: measureTip(m) }))}
+              @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) })}
+      <div class="wrap" data-scroll="x" tabindex="0" role="region" aria-label=${msg('Models')}>
+        <table>
+          <thead>
+            <tr>
+              <th scope="col">${msg('Model')}</th>
+              <th scope="col" class="on" title=${measureLabel(measure)}>${msg('Share')}</th>
+              ${COLUMNS.map((c) => html`<th scope="col" class=${c === measure ? 'on' : nothing} title=${measureTip(c)}>${measureLabel(c)}</th>`)}
+              <th scope="col">${msg('API calls')}</th>
+              ${peaks ? html`<th scope="col" title=${peakContextTip()}>${peakContextLabel()}</th>` : nothing}
+            </tr>
+          </thead>
+          <tbody>
+            ${repeat(
+              rows,
+              (r) => r.id,
+              (r) => html`<tr>
+                <td>
+                  <span class="model"><i style=${styleMap({ background: r.colour })}></i><b>${r.usage.model}</b><small>${r.usage.agent}</small></span>
+                </td>
+                <td class="share">${r.share}</td>
+                ${COLUMNS.map((c) => html`<td class=${c === measure ? 'on' : nothing}>${measureText(r.usage, c)}</td>`)}
+                <td>${r.usage.calls ?? 0}</td>
+                ${peaks ? html`<td>${r.usage.peak_context != null ? tokenCount(r.usage.peak_context) : '—'}</td>` : nothing}
+              </tr>`,
+            )}
+          </tbody>
+        </table>
+      </div>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ca-model-usage': CaModelUsage;
+  }
+}