@contraagent/ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,29 @@
+// The transcript pane of `ca-task-view` when the task has no transcript; a task
+// with one shows `ca-transcript` there.
+import { msg } from '@lit/localize';
+import { html, nothing, type TemplateResult } from 'lit';
+import { facts, kindUnit } from '../../../words/format.js';
+import { notInExport, outcomeLabel, taskStatusLabel } from '../../../words/index.js';
+import { taskChip } from '../../shared/task-chip.js';
+import { culprit, hadSession, stateOf, type TaskContext } from '../context.js';
+
+/** Why there is no transcript: the task's state, or a transcript that was not saved. */
+export function noTranscript(c: TaskContext): TemplateResult {
+  const d = c.detail;
+  const state = stateOf(c);
+  if (state === 'not_started') {
+    // The cause is in the verdict above; here, the state and the earlier task to open.
+    const up = culprit(c);
+    return html`<div class="blank notrans"><span class="ic" aria-hidden="true">⊘</span><b>${facts(msg('No transcript'), outcomeLabel(state))}</b>
+      ${up ? html`<span>${msg(html`Earlier task ${taskChip(c.host, kindUnit(up), up)}`)}</span>` : nothing}</div>`;
+  }
+  if (c.exported && hadSession(d)) {
+    return html`<div class="blank notrans"><span class="ic" aria-hidden="true">✦</span><b>${facts(msg('No transcript'), notInExport())}</b></div>`;
+  }
+  if (hadSession(d)) {
+    return html`<div class="blank notrans"><span class="ic" aria-hidden="true">✦</span><b>${facts(msg('No transcript'), msg('not saved (keep_transcripts = false)'))}</b></div>`;
+  }
+  // A deferred task never ran, though the run goes on: "not run", as the tasks list says.
+  const deferred = state === 'waiting' && !!c.plan?.nodes.find((n) => n.key === d.key)?.deferred;
+  return html`<div class="blank notrans"><span class="ic" aria-hidden="true">✦</span><b>${facts(msg('No transcript'), deferred ? taskStatusLabel(state, false) : outcomeLabel(state))}</b></div>`;
+}

package/src/elements/task/styles.ts

@@ -0,0 +1,66 @@
+// The styles of `ca-task-view`: its header, its view tabs and its panes.
+import { css } from 'lit';
+
+export const taskViewStyles = css`
+  :host { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; position: relative; container-type: inline-size; }
+  .taskmeta { flex: none; background: linear-gradient(180deg, var(--panel2), var(--panel)); border: 1px solid var(--line);
+    border-radius: 14px; padding: 10px 12px; margin-bottom: 8px; color: var(--text-2); }
+  .tm-head { display: flex; gap: 12px; align-items: center; }
+  .tm-av { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; font-size: 16px; flex: none;
+    background: var(--agent-bg); color: var(--agent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--agent) 35%, transparent); }
+  .tm-av.py { background: var(--raise); color: var(--text-muted); box-shadow: none; }
+  .tm-name { font-size: 15px; font-weight: 600; color: var(--text); display: flex; gap: 8px; align-items: center; }
+  .verdict { font-size: 12.5px; color: var(--text); margin-top: 2px; }
+  .verdict[data-tone='failed'], .verdict[data-tone='attention'] { color: var(--tone); }
+  .verdict[data-tone='muted'] { color: var(--text-muted); }
+  .whos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
+  .runchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
+  .spend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
+  .spend b { color: var(--text); font-weight: 600; }
+  .spend.quota { flex-direction: column; gap: 0; }
+  .usage-wrap { overflow-x: auto; margin: 4px 0 12px; }
+  /* sized to its content (a full-width table spreads a few numbers far apart); the wrap scrolls when it is wider */
+  .usage { width: auto; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
+  .usage th { text-align: right; font-weight: 600; color: var(--text-muted); font-size: 10.5px; white-space: nowrap;
+    padding: 6px 14px; border-bottom: 1px solid var(--line2); vertical-align: bottom; }
+  .usage td { text-align: right; padding: 8px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; vertical-align: baseline; }
+  .usage th:first-child, .usage td:first-child { padding-left: 4px; }
+  .usage td.l.jmono { font-size: 12px; }
+  /* the subscription readings wrap at a narrow width rather than push the table past the edge */
+  .usage td.l:not(:first-child):not(.jmono) { white-space: normal; min-width: 12ch; }
+  .usage th.l, .usage td.l { text-align: left; }
+  .usage tr.hop td { padding-top: 4px; padding-bottom: 4px; color: var(--text-muted); }
+  .usage tr.hop td:first-child { padding-left: 28px; }
+  .runchip { font-size: 11px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line2); color: var(--text-2); }
+  .runchip.ok > [aria-hidden] { color: var(--status-done); font-weight: 700; }
+  .runchip.part { border-color: color-mix(in srgb, var(--status-attention) 45%, transparent); background: var(--status-attention-bg); }
+  .runchip.part > [aria-hidden] { color: var(--status-attention); font-weight: 700; }
+  .runchip.bad { border-color: color-mix(in srgb, var(--status-failed) 45%, transparent); color: var(--status-failed); background: var(--status-failed-bg); }
+  .io-fold { margin-top: 6px; }
+  .io-fold > summary, .launch > summary { cursor: pointer; color: var(--text-muted); }
+  .searches { margin: 4px 0 0; padding-left: 22px; }
+  .unread { color: var(--status-attention); margin-top: 4px; }
+  .qlink { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; text-align: left; font: inherit; }
+  .qlink:hover { text-decoration: underline; }
+
+  .tviews { flex: none; display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 8px; border-bottom: 1px solid var(--line); }
+  @container (max-width: 480px) {
+    .tviews { gap: 0; }
+    .tview { padding: 6px 10px; }
+  }
+  .tview { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--text-muted); padding: 6px 14px; cursor: pointer; }
+  .tview:hover { color: var(--text-2); }
+  .tview.sel { color: var(--text); border-bottom-color: var(--accent); }
+  .tview .badge { margin-left: 6px; font-size: 10px; padding: 0 6px; border-radius: 999px; background: var(--raise); color: var(--text-2); }
+
+  /* A positioned box: what is placed in it (a screen reader's text) scrolls with it, not past the view's end. */
+  .pane { flex: 1 1 auto; min-height: 0; overflow: auto; position: relative; }
+  .upstream { margin-bottom: 12px; }
+  .up-hd { display: flex; align-items: center; gap: 10px; margin: 2px 0 6px; }
+  .down { display: flex; flex-wrap: wrap; gap: 8px; }
+  .notrans { flex: 1 1 auto; border: 1px solid var(--line); border-radius: 14px; }
+  details.upstream > summary { cursor: pointer; list-style: none; }
+  details.upstream > summary::-webkit-details-marker { display: none; }
+  .params td { vertical-align: top; }
+  .from { color: var(--text-muted); white-space: nowrap; }
+`;

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

@@ -0,0 +1,204 @@
+import type { JsonObject, PanelInfo, TrendsView } from '@contraagent/api';
+import { RovingFocusController } from '@contraagent/elements';
+import '@contraagent/elements/segmented/define';
+import { base } from '@contraagent/elements/styles';
+import { localized, msg } from '@lit/localize';
+import { LitElement, css, html, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { emit } from '../../core/events.js';
+import { getLocale } from '../../core/i18n.js';
+import { TREND_DAYS } from '../../core/view-route.js';
+import { trendSections } from '../../adapters/trends.js';
+import { daysBefore, trendsTabs } from '../../lib/trends.js';
+import {
+  allGroups,
+  customPeriod,
+  exportedPeriod,
+  fromLabel,
+  groupLabel,
+  lastDays,
+  noRunsInPeriod,
+  periodLabel,
+  toLabel,
+  trendsFirstTab,
+  trendWords,
+  trendsTitle,
+  zoneLabel,
+} from '../../words/trends.js';
+import '../lists/ca-panel-body.js';
+
+/**
+ * The trends: what the runs of a period add up to (`/api/trends`), section by section:
+ * the totals, the cost of each day, each kind and each model, the subscription usage,
+ * the attempts not done, the tool calls denied, the tasks not run, when runs start, and
+ * the runs; then the pipeline's own trend panels. Above them, the period (the last 7,
+ * 14 or 30 days, or two dates), its time zone and a run group; an export's period is
+ * fixed and named instead. When a trend panel names a `tab`, the page has tabs: the
+ * first holds the trends and the trend panels of no `tab`, each other one the panels of
+ * its `tab`.
+ *
+ * @fires ca-navigate - `{days, from, to, tz, group}`: another period, time zone or run group; `{trendsTab}`: another tab
+ */
+@customElement('ca-trends')
+@localized()
+export class CaTrends extends LitElement {
+  static override styles = [
+    base,
+    css`
+      :host { display: block; }
+      .controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 14px; }
+      .controls label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
+      input, select { background: var(--well); border: 1px solid var(--line); color: var(--text); border-radius: 8px; font: inherit; font-size: 12px; padding: 4px 8px; }
+      input:focus-visible, select:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: 1px; }
+      .period { font-size: 12px; color: var(--text-2); }
+      .loading { font-size: 12px; color: var(--text-muted); }
+      .err { font-size: 12px; color: var(--status-failed); }
+      /* wide sections span the page; the narrow ones pair up and fill each other's gaps */
+      .wide { margin-bottom: 14px; }
+      .pairs { columns: 2 440px; column-gap: 14px; margin-bottom: 14px; }
+      .pairs > .panel { break-inside: avoid; margin-bottom: 14px; }
+      .panel { display: block; }
+      .tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
+      .tab { background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 8px 14px 9px;
+        color: var(--text-muted); font: inherit; font-weight: 500; cursor: pointer; white-space: nowrap; }
+      .tab:hover { color: var(--text-2); }
+      .tab[aria-selected='true'] { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); }
+      .tab:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: -2px; }
+    `,
+  ];
+
+  @property({ attribute: false }) view: TrendsView | null = null;
+  /** The period: the last `days` days (0: `from` to `to`). */
+  @property({ type: Number }) days = 14;
+  @property() from = '';
+  @property() to = '';
+  /** The time zone the days are counted in. */
+  @property() tz = '';
+  /** Only the runs of this run group ('': every run). */
+  @property() group = '';
+  /** The run groups there are to choose from. */
+  @property({ attribute: false }) groups: readonly string[] = [];
+  /** The pipeline's trend panels (`Panel(scope="trends")`). */
+  @property({ attribute: false }) panels: readonly PanelInfo[] = [];
+  /** An export: its period is the one it holds. */
+  @property({ type: Boolean }) exported = false;
+  /** The open tab: a trend panel's `tab` ('': the first, the trends). */
+  @property() tab = '';
+
+  /** One tab stop for the tabs; the arrow keys, Home and End move between them. */
+  private readonly tabFocus = new RovingFocusController(this, {
+    items: () => [...this.renderRoot.querySelectorAll<HTMLElement>('[role="tab"]')],
+    layout: 'horizontal',
+    wrap: true,
+  });
+
+  private go(patch: { days?: number; from?: string; to?: string; tz?: string; group?: string }): void {
+    emit(this, 'ca-navigate', patch);
+  }
+
+  override render() {
+    const v = this.view;
+    const trendPanels = this.panels.filter((p) => p.scope === 'trends');
+    const tabs = trendsTabs(trendPanels);
+    const open = tabs.includes(this.tab) ? this.tab : '';
+    const shown = trendPanels.filter((p) => (p.tab ?? '') === open);
+    const body = open ? this.trendPanels(shown, v?.panels ?? {}, false) : this.trends(shown);
+    return html`<h2 class="sr">${trendsTitle()}</h2>
+      ${this.controls()}
+      ${v?.error ? html`<p class="err" role="alert">${msg('No answer from the monitor')} | ${v.error.message}</p>` : nothing}
+      ${tabs.length > 1
+        ? html`${this.tabList(tabs, open)}<div role="tabpanel" id="trends-tabpanel" aria-labelledby=${`trends-tab-${tabs.indexOf(open)}`}>${body}</div>`
+        : body}`;
+  }
+
+  /** The tabs: the trends first, then one per trend panels' `tab`. */
+  private tabList(tabs: readonly string[], open: string) {
+    return html`<div class="tabs" role="tablist" aria-label=${trendsTitle()}>
+      ${tabs.map(
+        (t, i) => html`<button type="button" role="tab" class="tab" id=${`trends-tab-${i}`} aria-selected=${t === open ? 'true' : 'false'}
+          aria-controls="trends-tabpanel" @click=${() => t !== open && emit(this, 'ca-navigate', { trendsTab: t })}>${t || trendsFirstTab()}</button>`,
+      )}
+    </div>`;
+  }
+
+  override updated(): void {
+    // The tab stop is on the open tab.
+    const tabs = trendsTabs(this.panels);
+    this.tabFocus.set(Math.max(0, tabs.indexOf(this.tab)));
+  }
+
+  /** The trends of the period, section by section, then the trend panels of no `tab`. */
+  private trends(panels: readonly PanelInfo[]) {
+    const v = this.view;
+    const data = v?.data ?? null;
+    const sections = data ? trendSections(data, getLocale()) : [];
+    const wide = sections.filter((s) => s.wide);
+    const narrow = sections.filter((s) => !s.wide);
+    const order = ['totals', 'cost-by-day', 'kinds', 'python-kinds', 'models', 'usage'];
+    const first = wide.filter((s) => order.includes(s.id));
+    const last = wide.filter((s) => !order.includes(s.id));
+    const card = (body: unknown, id: string) => html`<section class="panel" data-section=${id}><ca-panel-body .body=${body}></ca-panel-body></section>`;
+    return html`${!data && v?.loading ? html`<p class="loading">${msg('Loading…')}</p>` : nothing}
+      ${data && !sections.length ? html`<div class="blank small"><span>${noRunsInPeriod()}</span></div>` : nothing}
+      ${repeat(first, (s) => s.id, (s) => html`<div class="wide">${card(s.body, s.id)}</div>`)}
+      ${narrow.length ? html`<div class="pairs">${repeat(narrow, (s) => s.id, (s) => card(s.body, s.id))}</div>` : nothing}
+      ${repeat(last, (s) => s.id, (s) => html`<div class="wide">${card(s.body, s.id)}</div>`)}
+      ${this.trendPanels(panels, v?.panels ?? {}, true)}`;
+  }
+
+  /** 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;
+    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);
+    const zones = [...new Set([this.tz, Intl.DateTimeFormat().resolvedOptions().timeZone, 'UTC'].filter(Boolean))];
+    return html`<div class="controls">
+      <cae-segmented label=${msg('Period')} .value=${choice}
+        .options=${[...TREND_DAYS.map((n) => ({ value: String(n), label: lastDays(n) })), { value: 'dates', label: customPeriod() }]}
+        @cae-change=${(e: CustomEvent<{ value: string }>) =>
+          e.detail.value === 'dates'
+            ? this.go({ days: 0, from: this.from || daysBefore(today, (this.days || 14) - 1), to: this.to || today })
+            : this.go({ days: Number(e.detail.value), from: '', to: '' })}></cae-segmented>
+      ${this.days === 0
+        ? html`<label>${fromLabel()} <input type="date" .value=${this.from} max=${this.to || nothing}
+              @change=${(e: Event) => this.go({ days: 0, from: (e.target as HTMLInputElement).value, to: this.to })} /></label>
+            <label>${toLabel()} <input type="date" .value=${this.to} min=${this.from || nothing}
+              @change=${(e: Event) => this.go({ days: 0, from: this.from, to: (e.target as HTMLInputElement).value })} /></label>`
+        : nothing}
+      <label>${zoneLabel()}
+        <select @change=${(e: Event) => this.go({ tz: (e.target as HTMLSelectElement).value })}>
+          ${zones.map((z) => html`<option value=${z} ?selected=${z === (this.tz || zones[0])}>${z}</option>`)}
+        </select></label>
+      ${this.groups.length > 1
+        ? html`<label>${groupLabel()}
+            <select @change=${(e: Event) => this.go({ group: (e.target as HTMLSelectElement).value })}>
+              <option value="" ?selected=${!this.group}>${allGroups()}</option>
+              ${this.groups.map((g) => html`<option value=${g} ?selected=${g === this.group}>${g}</option>`)}
+            </select></label>`
+        : nothing}
+      ${period}
+      ${this.view?.loading && data ? html`<span class="loading" aria-live="polite">${msg('Loading…')}</span>` : nothing}
+    </div>`;
+  }
+
+  /** The pipeline's own trend panels, under their titles (`heading`: under the heading of them all). */
+  private trendPanels(shown: readonly PanelInfo[], bodies: Readonly<Record<string, JsonObject>>, heading: boolean) {
+    if (!shown.length) return nothing;
+    return html`${heading ? html`<h3 class="sect-h">${trendWords().trendPanels}</h3>` : nothing}
+      ${shown.map(
+        (p) => html`<section class="panel wide" data-panel=${p.name}>
+          <h3>${p.icon} ${p.title || p.name}${p.description ? html`<span class="r">${p.description}</span>` : nothing}</h3>
+          ${bodies[p.name] ? html`<ca-panel-body .body=${bodies[p.name]}></ca-panel-body>` : html`<p class="loading">${msg('Loading…')}</p>`}
+        </section>`,
+      )}`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ca-trends': CaTrends;
+  }
+}

package/src/index.ts

@@ -0,0 +1,23 @@
+// @contraagent/ui: the monitor's web components. Importing this module
+// registers every element (define/all.ts); `ca-monitor` is the whole monitor.
+// One view alone is a subpath (`@contraagent/ui/transcript`, define/). Nothing
+// else happens at import: the page sets up the languages (`configureLocales`)
+// and the themes (`adoptThemes`, `@contraagent/elements/themes`), or
+// `<ca-monitor>` does when it connects. The generic parts the elements are
+// built from (styles, themes, primitives, `cae-*` elements) are
+// `@contraagent/elements`.
+import './define/all.js';
+
+export * from './core/index.js';
+export * from './words/format.js';
+export * from './adapters/index.js';
+
+export * from './elements/shared/ca-definition.js';
+export * from './elements/shell/ca-monitor.js';
+export * from './elements/shell/ca-clock.js';
+export * from './elements/shell/ca-run-picker.js';
+export * from './elements/shell/ca-hosts.js';
+export * from './elements/shell/ca-toasts.js';
+export * from './elements/overview/index.js';
+export * from './elements/lists/index.js';
+export * from './elements/task/index.js';

package/src/lib/tone.ts

@@ -0,0 +1,109 @@
+// Which status colour (`Tone`, from @contraagent/elements) run data takes. A
+// colour means a status, and only where that status applies: totals and
+// measures stay neutral, a count of a problem takes the problem's colour only
+// when it is above 0, and a whole is never coloured by its worst part (a run's
+// dot is the exception: it is the run's own status). An element shows its tone
+// as `data-tone` (none for neutral); the rules are in the elements' styles.
+import type { ContractStatus, Outcome, RunActivity, Stop } from '@contraagent/api';
+import { markOf, type Mark, type Tone } from '@contraagent/elements';
+
+export type { Tone };
+
+/** The tone of a count of a problem: the problem's tone above 0, neutral at 0 (a 0 is not good news to colour). */
+export function problemTone(n: number, tone: Exclude<Tone, 'neutral'>): Tone {
+  return n > 0 ? tone : 'neutral';
+}
+
+/**
+ * A run's own status: running; attention when its host stopped reporting (a hub);
+ * then how it ended: failed (a task failed), attention (tasks not started, or
+ * partly done), done; neutral before it has tasks.
+ */
+export function runTone(activity: RunActivity, tasks: { total: number; failed: number; not_started: number; partial?: number } | undefined): Tone {
+  if (activity === 'running') return 'running';
+  if (activity === 'unresponsive') return 'attention';
+  if (!tasks?.total) return 'neutral';
+  if (tasks.failed) return 'failed';
+  if (tasks.not_started || tasks.partial) return 'attention';
+  return 'done';
+}
+
+/**
+ * The tone of each stop. A `Record` over the generated `Stop` type: a stop the
+ * schema adds fails type-checking here until it has a tone.
+ */
+const STOP_TONE: Readonly<Record<Stop, Tone>> = {
+  completed: 'done',
+  partial: 'attention',
+  invalid_input: 'attention',
+  skipped: 'muted',
+  timeout: 'failed',
+  max_turns: 'failed',
+  budget: 'failed',
+  context_budget: 'failed',
+  stalled: 'failed',
+  auth_failed: 'failed',
+  api_error: 'failed',
+  rate_limited: 'failed',
+  refused: 'failed',
+  aborted: 'failed',
+  denied: 'failed',
+  error: 'failed',
+  no_output: 'failed',
+  launch_failed: 'failed',
+  invalid_output: 'failed',
+  credential_mismatch: 'failed',
+};
+
+/** Every stop contraagent writes (`JournalRow.stop`), in schema order. */
+export const ALL_STOPS = Object.keys(STOP_TONE) as readonly Stop[];
+
+/** Whether a journal row's `stop` is one contraagent writes (a domain may write its own). */
+export const isStop = (stop: string | null | undefined): stop is Stop => stop != null && Object.hasOwn(STOP_TONE, stop);
+
+/** How one attempt ended (a journal row's `stop`), as a tone: a stop it does not know is a failure. */
+export function stopTone(stop: string | null | undefined): Tone {
+  return isStop(stop) ? STOP_TONE[stop] : 'failed';
+}
+
+/** What happened to a task, as a tone. */
+export function outcomeTone(o: Outcome): Tone {
+  switch (o) {
+    case 'done':
+    case 'recovered':
+      return 'done';
+    case 'failed':
+      return 'failed';
+    case 'partial':
+    case 'not_started':
+      return 'attention';
+    case 'running':
+      return 'running';
+    case 'waiting':
+    case 'skipped':
+      return 'muted';
+  }
+}
+
+/** A checked file's status, as a tone; neutral without one. */
+export function contractTone(s: ContractStatus | null | undefined): Tone {
+  switch (s) {
+    case 'valid':
+      return 'done';
+    case 'invalid':
+    case 'failed':
+      return 'failed';
+    case 'refused':
+      return 'attention';
+    case 'running':
+      return 'running';
+    case 'pending':
+      return 'muted';
+    case null:
+    case undefined:
+      return 'neutral';
+  }
+}
+
+/** The mark of a task's outcome: a waiting task is ◌ too, though muted. */
+export const outcomeMark = (o: Outcome): Mark | null => (o === 'waiting' ? 'pending' : markOf(outcomeTone(o)));

package/src/lib/trends.ts

@@ -0,0 +1,44 @@
+// The trends page's request, from where the monitor is (its view route).
+import type { PanelInfo, RunSummary, TrendsQuery } from '@contraagent/api';
+import type { ViewRoute } from '../core/view-route.js';
+
+/** The browser's time zone (an IANA name), `UTC` when it names none. */
+export const browserZone = (): string => Intl.DateTimeFormat().resolvedOptions().timeZone || 'UTC';
+
+/** Today in time zone `tz`, YYYY-MM-DD. */
+export function todayIn(tz: string, now: Date = new Date()): string {
+  try {
+    return new Intl.DateTimeFormat('en-CA', { timeZone: tz, year: 'numeric', month: '2-digit', day: '2-digit' }).format(now);
+  } catch {
+    return now.toISOString().slice(0, 10);
+  }
+}
+
+/** The calendar day `n` days before `day` (YYYY-MM-DD). */
+export function daysBefore(day: string, n: number): string {
+  const d = new Date(`${day}T00:00:00Z`);
+  d.setUTCDate(d.getUTCDate() - n);
+  return d.toISOString().slice(0, 10);
+}
+
+/** What `/api/trends` is asked for on the trends page: the view route's period, time zone and run group. */
+export function trendsQuery(r: Pick<ViewRoute, 'days' | 'from' | 'to' | 'tz' | 'group'>, now: Date = new Date()): TrendsQuery {
+  const tz = r.tz || browserZone();
+  const period =
+    r.days === 0 && r.from && r.to
+      ? { from: r.from, to: r.to }
+      : (() => {
+          const to = todayIn(tz, now);
+          return { from: daysBefore(to, Math.max(1, r.days) - 1), to };
+        })();
+  return { ...period, tz, ...(r.group ? { run_group: r.group } : {}) };
+}
+
+/** The run groups of the runs, each once, in the order the runs list them. */
+export const runGroups = (runs: readonly RunSummary[]): string[] => [...new Set(runs.map((r) => r.run_group).filter((g): g is string => !!g))];
+
+/** The tabs of the trends page: '' (the trends, with the trends panels of no `tab`), then each panel's `tab` once, in the order the first of its panels comes; only '' when no panel names one. */
+export const trendsTabs = (panels: readonly PanelInfo[]): string[] => [
+  '',
+  ...new Set(panels.filter((p) => p.scope === 'trends' && p.tab).map((p) => p.tab!)),
+];

package/src/locales/codes.ts

@@ -0,0 +1,23 @@
+// Do not modify this file by hand!
+// Re-generate this file by running lit-localize.
+
+/**
+ * The locale code that templates in this source code are written in.
+ */
+export const sourceLocale = `en`;
+
+/**
+ * The other locale codes that this application is localized into. Sorted
+ * lexicographically.
+ */
+export const targetLocales = [
+  `ja`,
+] as const;
+
+/**
+ * All valid project locale codes. Sorted lexicographically.
+ */
+export const allLocales = [
+  `en`,
+  `ja`,
+] as const;