@contraagent/elements 0.0.0-stage → 0.2.0

package/src/tiles/stat-tiles.ts

@@ -0,0 +1,92 @@
+import { LitElement, html, nothing, type PropertyValues, type TemplateResult } from 'lit';
+import { property } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { emit } from '../core/events.js';
+import { toneAttr } from '../core/tone.js';
+import { factLine } from '../primitives/fact-line.js';
+import { markOf } from '../primitives/pill.js';
+import { base } from '../styles/index.js';
+import { statTilesStyles } from './styles.js';
+import type { StatTile } from './types.js';
+
+const reducedMotion = () => globalThis.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false;
+
+/**
+ * Figures as a grid of tiles: each its label, its value (a number counts up in
+ * `<cae-count>`), the lines of facts under it and a link. A tile whose number
+ * changes bumps, unless `bump` is off or the reader asks for reduced motion.
+ *
+ * Its look: `columns` (fewer in a narrow element: 4 below 1100px of its
+ * width, 2 below 660px, 1 below 240px), `--cae-stat-tiles-gap` and the parts.
+ *
+ * @tagname cae-stat-tiles
+ * @fires cae-action - `{id, action}`: a tile's link, by the tile's id and the action's id
+ * @csspart tiles - the grid
+ * @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
+ */
+export class CaeStatTiles extends LitElement {
+  static override styles = [base, statTilesStyles];
+
+  @property({ attribute: false }) tiles: readonly StatTile[] = [];
+  /** Tiles per row on a wide screen. */
+  @property({ type: Number }) columns = 5;
+  /** A tile whose number changes bumps. */
+  @property({ type: Boolean }) bump = true;
+
+  /** The last number each tile showed. */
+  private readonly prev = new Map<string, number>();
+  private changed: string[] = [];
+
+  protected override willUpdate(changed: PropertyValues<this>): void {
+    if (!changed.has('tiles')) return;
+    for (const t of this.tiles) {
+      if (typeof t.value !== 'number') continue;
+      if ((this.prev.get(t.id) ?? 0) !== t.value) this.changed.push(t.id);
+      this.prev.set(t.id, t.value);
+    }
+  }
+
+  override render() {
+    return html`<div class="tiles" part="tiles" style=${this.columns === 5 ? nothing : `--cae-stat-tiles-columns:${this.columns}`}>
+      ${repeat(this.tiles, (t) => t.id, (t) => this.tile(t))}
+    </div>`;
+  }
+
+  private tile(t: StatTile): TemplateResult {
+    const tone = t.tone ?? 'neutral';
+    return html`<div class="tile" part="tile" data-tone=${toneAttr(tone)} data-id=${t.id} title=${t.tip ?? nothing}>
+      <div class="label words" part="label" data-mark=${markOf(tone) ?? nothing}>${t.label}</div>
+      <div class="value" part="value">${typeof t.value === 'number' ? html`<cae-count .value=${t.value}></cae-count>` : t.value}</div>
+      ${(t.sub ?? []).map((line) => html`<div class="sub words" part="sub">${factLine(line)}</div>`)}
+      ${t.action
+        ? html`<div class="action words"><a class="lnk" part="action" href="#" @click=${(e: Event) => {
+            e.preventDefault();
+            if (t.action) emit(this, 'cae-action', { id: t.id, action: t.action.id });
+          }}>${t.action.label}</a></div>`
+        : nothing}
+    </div>`;
+  }
+
+  protected override updated(): void {
+    const ids = this.changed;
+    this.changed = [];
+    if (!this.bump || reducedMotion()) return;
+    for (const tile of this.renderRoot.querySelectorAll<HTMLElement>('.tile')) {
+      if (!ids.includes(tile.dataset['id'] ?? '')) continue;
+      tile.animate?.(
+        [{ transform: 'scale(1)' }, { transform: 'scale(1.04)', boxShadow: '0 0 0 1px var(--line2)', offset: 0.35 }, { transform: 'scale(1)' }],
+        { duration: 700, easing: 'cubic-bezier(.2,.8,.2,1)' },
+      );
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cae-stat-tiles': CaeStatTiles;
+  }
+}

package/src/tiles/styles.ts

@@ -0,0 +1,23 @@
+// The look of `<cae-stat-tiles>`: a grid of tiles, neutral by default. A tile
+// with a tone takes it on its value, the mark before its label and a thin edge.
+// The host is a container: fewer columns, and smaller values, as it narrows.
+import { css } from 'lit';
+
+export const statTilesStyles = css`
+  :host { display: block; container-type: inline-size; }
+  .tiles { display: grid; grid-template-columns: repeat(var(--cae-stat-tiles-columns, 5), minmax(0, 1fr)); gap: var(--cae-stat-tiles-gap, 12px); }
+  @container (max-width: 1100px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
+  @container (max-width: 660px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+  @container (max-width: 420px) { .tile { padding: 10px 12px; } .value { font-size: 22px; } }
+  @container (max-width: 240px) { .tiles { grid-template-columns: minmax(0, 1fr); } }
+  .tile { position: relative; background: color-mix(in srgb, var(--text) 2.5%, transparent); border: 1px solid var(--line);
+    border-radius: 11px; padding: 12px 14px; overflow: hidden; }
+  .tile::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--edge, transparent); }
+  .label { font-size: 12px; font-weight: 600; color: var(--text-muted); }
+  .value { overflow-wrap: anywhere; font-size: 28px; font-weight: 700; line-height: 1.15; margin-top: 6px; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; color: var(--text); }
+  .sub { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
+  .action { font-size: 11.5px; margin-top: 4px; }
+  .tile[data-tone] { --edge: var(--tone); }
+  .tile[data-tone] .value, .tile[data-tone] .label::before { color: var(--tone); }
+  .label[data-mark]::before { display: inline-block; }
+`;

package/src/tiles/types.ts

@@ -0,0 +1,20 @@
+// What `<cae-stat-tiles>` shows: a tile per figure.
+import type { Tone } from '../core/tone.js';
+import type { Fact } from '../primitives/fact-line.js';
+
+/** A figure as a tile: its name, its value and the lines under it. */
+export interface StatTile {
+  /** Unique among the tiles: `data-id` on the tile, and the `id` of `cae-action`. */
+  id: string;
+  label: string;
+  /** A number counts up to a new value, and the tile bumps when it changes; a text is shown as it is. */
+  value: number | string;
+  /** The status the figure is in: its value, the mark before its label and an edge take the tone. None (or `neutral`) for a plain figure. */
+  tone?: Tone;
+  /** The tile's tooltip. */
+  tip?: string;
+  /** The lines under the value, each a row of facts (`factLine`); an empty line keeps its place. */
+  sub?: readonly (readonly (string | Fact)[])[];
+  /** A link under the lines: a click sends `cae-action` with the tile's id and this id. */
+  action?: { id: string; label: string };
+}

package/src/transcript/follow-scroll.ts

@@ -0,0 +1,72 @@
+// Following the end of a growing list: while the reader is at the bottom, new
+// content scrolls into view; once they scroll up, it stays where they are.
+import type { TranscriptScroll } from './types.js';
+
+/** Within this many pixels of the bottom, the list follows new content. */
+const STICK_PX = 60;
+/** How long a restored position waits for the content to grow tall enough. */
+const RESTORE_GIVE_UP_MS = 4000;
+
+export class FollowScroll {
+  /** The reader is at the bottom: new content scrolls into view. */
+  stick = true;
+  /** The position was restored (or there was none to restore): from now on it is remembered. */
+  restored = false;
+  /** The last position, kept while the list is hidden. */
+  lastTop = 0;
+  /** A smooth scroll to the end is under way: its steps are not the reader leaving the end. */
+  private gliding = false;
+
+  constructor(private readonly scroller: () => HTMLElement | null | undefined) {}
+
+  toBottom(smooth = false): void {
+    const sc = this.scroller();
+    if (!sc) return;
+    this.gliding = smooth;
+    if (smooth) sc.scrollTo({ top: sc.scrollHeight, behavior: 'smooth' });
+    else sc.scrollTop = sc.scrollHeight;
+  }
+
+  /** Reads the reader's position after a scroll; the position to remember, or null when there is none (hidden). */
+  read(): TranscriptScroll | null {
+    const sc = this.scroller();
+    if (!sc || !sc.clientHeight) return null; // hidden: no position to keep
+    const atEnd = sc.scrollHeight - sc.scrollTop - sc.clientHeight < STICK_PX;
+    // While gliding to the end, only a move up is the reader's; the glide ends at the end.
+    if (this.gliding && (sc.scrollTop < this.lastTop - 1 || atEnd)) this.gliding = false;
+    this.stick = atEnd || this.gliding;
+    this.lastTop = sc.scrollTop;
+    return { stick: this.stick, top: Math.round(sc.scrollTop) };
+  }
+
+  /** Puts the reader back at `saved` (the end when undefined), waiting while the content is still shorter; `stale` stops it. */
+  async restore(saved: TranscriptScroll | undefined, stale: () => boolean): Promise<void> {
+    const sc = this.scroller();
+    if (!saved || saved.stick || !sc) {
+      this.stick = true;
+      this.toBottom();
+    } else {
+      this.stick = false;
+      const until = performance.now() + RESTORE_GIVE_UP_MS;
+      await new Promise<void>((done) => {
+        const step = () => {
+          const max = sc.scrollHeight - sc.clientHeight;
+          sc.scrollTop = Math.min(saved.top, max);
+          if (max >= saved.top || performance.now() > until || stale()) done();
+          else requestAnimationFrame(step);
+        };
+        step();
+      });
+      this.lastTop = sc.scrollTop;
+    }
+    this.restored = true;
+  }
+
+  /** Shown again after being hidden: back at the end, or where the reader was. */
+  reshow(): void {
+    const sc = this.scroller();
+    if (!sc) return;
+    if (this.stick) this.toBottom();
+    else sc.scrollTop = this.lastTop;
+  }
+}

package/src/transcript/index.ts

@@ -0,0 +1,6 @@
+// A conversation with an agent: `@contraagent/elements/transcript`.
+// `CaeTranscript` is registered by `@contraagent/elements/transcript/define`.
+export * from './types.js';
+export * from './styles.js';
+export * from './tags.js';
+export * from './transcript.js';

package/src/transcript/styles.ts

@@ -0,0 +1,114 @@
+import { css } from 'lit';
+
+export const transcriptStyles = css`
+  :host { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; position: relative; }
+  :host([mode='none']) { display: none; }
+  :host([mode='tabs']) { flex: none; }
+  :host([mode='tabs']) .scroller, :host([mode='tabs']) .newpill { display: none; }
+
+  .rounds { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; padding-left: 2px; }
+  .rounds-lbl { color: var(--text-muted); font-size: 11.5px; font-weight: 600; margin-right: 4px; cursor: help; }
+  .stab { padding: 3px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--text-muted);
+    cursor: pointer; font-size: 12px; display: inline-flex; align-items: center; }
+  .stab:hover { border-color: var(--accent); }
+  .stab.sel { background: var(--accent-bg); border-color: var(--accent); color: var(--text); }
+  .stab-m { font-family: var(--mono); font-size: 10.5px; color: var(--text-muted); margin-left: 4px; }
+  /* on the selected tab's tint, the secondary words take the secondary text colour, which reads on it */
+  .stab.sel .stab-m { color: var(--text-2); }
+  .stab .dot { width: 6px; height: 6px; margin-left: 4px; }
+  .stab .mk { margin-right: 4px; }
+  .stab .mk.ok { color: var(--status-done); }
+  .stab .mk.bad { color: var(--status-failed); }
+  .verdict { margin: 6px 10px 4px 41px; padding: 7px 11px; border-radius: 10px; border: 1px solid; font-size: 12px; }
+  .verdict[data-tone] { background: var(--tone-bg); color: var(--text); }
+  .verdict[data-tone='attention'] { border-color: color-mix(in srgb, var(--tone) 40%, transparent); }
+  .verdict[data-tone='failed'] { border-color: color-mix(in srgb, var(--tone) 45%, transparent); }
+  .verdict b { display: block; margin-bottom: 2px; }
+  .verdict ul { margin: 2px 0 0; padding-left: 18px; font-family: var(--mono); font-size: 11.5px; }
+
+  .scroller { flex: 1 1 auto; min-height: 0; overflow: auto; border: 1px solid var(--line); border-radius: 14px;
+    background: linear-gradient(180deg, var(--panel), var(--well)); padding: 4px 2px 8px; font-size: 12.5px; }
+  .back { margin: 6px 10px; background: var(--raise); border: 1px solid var(--line2); border-radius: 8px; padding: 3px 10px; cursor: pointer; color: var(--text-2); }
+  .back:hover { border-color: var(--accent); }
+
+  .inv-body { display: flex; flex-direction: column; gap: 10px; }
+  .inv-head { border: 1px solid var(--line2); border-radius: 12px; background: var(--raise); padding: 8px 10px; margin: 4px 8px 6px; }
+  .inv-who { display: flex; flex-wrap: wrap; gap: 6px; }
+  .inv-cmdbox { margin-top: 6px; }
+  .inv-cmdbox summary, .inv-prompt summary { cursor: pointer; font-size: 11px; color: var(--text-muted); }
+  .inv-prompt summary { font-size: 11.5px; }
+  .inv-prompt summary:hover { color: var(--accent); }
+  .inv-cmd { font-family: var(--mono); font-size: 11.5px; white-space: pre-wrap; word-break: break-all; margin: 4px 0 6px; max-height: 160px; overflow: auto; color: var(--text); }
+  .inv-ptext { margin-top: 6px; max-height: 360px; overflow: auto; }
+
+  .msg { display: flex; gap: 9px; padding: 3px 10px; }
+  .av { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 7px; line-height: 22px; font-size: 11px; text-align: center; font-weight: 700; }
+  .av-a { background: var(--agent-bg); color: var(--agent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--agent) 35%, transparent); }
+  .av-l { background: var(--raise); color: var(--text-2); }
+  .av-t { background: var(--raise); color: var(--text-muted); }
+  .bd { flex: 1; min-width: 0; background: color-mix(in srgb, var(--text) 2.5%, transparent); border: 1px solid var(--line); border-radius: 3px 10px 10px 10px; padding: 5px 10px; }
+  .hd { font-size: 11px; font-weight: 600; color: var(--text-muted); margin-bottom: 1px; }
+  .tx { color: var(--text); line-height: 1.5; word-break: break-word; }
+  .tx pre, .tx code { white-space: pre-wrap; }
+  .tx pre { margin: 0 0 4px; }
+
+  .toolcard, .typing { margin-left: 41px; margin-right: 10px; }
+  .toolcard { border: 1px solid var(--line); border-left: 3px solid var(--line2); border-radius: 10px; margin-top: 3px; margin-bottom: 3px;
+    overflow: hidden; background: var(--well); transition: border-color 0.3s; }
+  .toolcard.run { border-left-color: var(--status-running); }
+  .toolcard.err { border-left-color: var(--status-failed); }
+  .th { display: flex; gap: 9px; align-items: baseline; padding: 4px 9px; cursor: pointer; }
+  .th:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
+  .tn { font-family: var(--mono); font-weight: 600; flex: none; display: inline-flex; align-items: center; }
+  .tn::before { content: '⚒'; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 7px;
+    border-radius: 6px; background: var(--raise); color: var(--text-2); font-size: 11px; }
+  /* a tool's icon: its shape tells the tool; the colour stays neutral (a colour is a status) */
+  .toolcard[data-tool='bash'] .tn::before { content: '❯'; }
+  .toolcard[data-tool='read'] .tn::before { content: '▤'; }
+  .toolcard[data-tool='grep'] .tn::before, .toolcard[data-tool='glob'] .tn::before { content: '⌕'; }
+  .toolcard[data-tool='edit'] .tn::before, .toolcard[data-tool='write'] .tn::before { content: '✎'; }
+  .toolcard[data-tool='task'] .tn::before, .toolcard[data-tool='agent'] .tn::before { content: '✦'; color: var(--agent); }
+  .toolcard[data-tool='web-search'] .tn::before { content: '◍'; }
+  .toolcard[data-tool='web-fetch'] .tn::before { content: '⇣'; }
+  .toolcard.revealed { box-shadow: 0 0 0 1px var(--accent); }
+  .tp { font-family: var(--mono); font-size: 11.5px; color: var(--text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .ti { color: var(--text-muted); font-size: 11px; flex: none; max-width: 35%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .st-run, .st-ok, .st-err, .st-int { flex: none; white-space: nowrap; }
+  .st-run { color: var(--status-running); display: inline-flex; align-items: center; gap: 6px; }
+  .st-ok { color: var(--text-muted); }
+  .st-ok > [aria-hidden] { color: var(--status-done); font-weight: 700; }
+  .st-err { color: var(--status-failed); }
+  .st-int { color: var(--status-attention); }
+  .pdot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--status-running); animation: breathe 1.8s ease-in-out infinite; }
+  .tb { padding: 6px 9px; border-top: 1px solid var(--line); background: var(--bg); }
+  .tb pre { white-space: pre-wrap; word-break: break-word; margin: 4px 0; font-family: var(--mono); font-size: 12px; }
+  .fold { max-height: 220px; overflow: hidden; position: relative; }
+  .fold.open { max-height: none; }
+  .foldbtn { cursor: pointer; color: var(--accent); font-size: 11px; background: none; border: 0; padding: 0; font-family: inherit; }
+  .wq { font-size: 12px; margin: 2px 0 6px; }
+  .wq b { font-family: var(--mono); font-weight: 600; }
+  .wl { color: var(--text-muted); font-size: 11px; margin-right: 6px; }
+  .links { margin: 0 0 6px; padding-left: 30px; font-size: 12px; }
+  .links li { margin: 2px 0; overflow-wrap: anywhere; }
+  .links a { color: var(--accent); text-decoration: none; }
+  .links a:hover { text-decoration: underline; }
+  .rawfold > summary { cursor: pointer; color: var(--text-muted); font-size: 11px; }
+  .plink { color: var(--accent); text-decoration: none; font-family: var(--mono); overflow-wrap: anywhere; }
+  .plink:hover { text-decoration: underline; }
+  .host { color: var(--text-muted); font-family: var(--mono); font-size: 11px; margin-left: 6px; }
+
+  .sysline { display: flex; gap: 8px; align-items: baseline; padding: 2px 10px 2px 41px; font-size: 11px; color: var(--text-muted); font-family: var(--mono); }
+  .sysline .tx { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .typing { display: flex; align-items: center; gap: 10px; padding: 10px 0; }
+  .typing .av { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 9px; display: grid; place-items: center; font-size: 12px; }
+  .dots { display: inline-flex; gap: 4px; padding: 8px 12px; border-radius: 12px; background: var(--agent-bg); }
+  .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--agent); animation: bounce 1.2s infinite ease-in-out; }
+  .dots i:nth-child(2) { animation-delay: 0.15s; }
+  .dots i:nth-child(3) { animation-delay: 0.3s; }
+  .scroller:not(.bulk) .msg, .scroller:not(.bulk) .toolcard { animation: enter 0.35s var(--ease) both; }
+
+  .newpill { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 5; cursor: pointer; padding: 6px 14px;
+    border-radius: 999px; border: 1px solid var(--accent); background: color-mix(in srgb, var(--panel) 92%, transparent); color: var(--accent);
+    font-size: 12px; font-weight: 600; box-shadow: 0 10px 28px color-mix(in srgb, var(--shadow) 50%, transparent); backdrop-filter: blur(6px); animation: toast-in 0.3s var(--ease) both; }
+  .newpill:hover { background: var(--accent-bg); }
+`;

package/src/transcript/tags.ts

@@ -0,0 +1,18 @@
+// Labelled values as chips (who ran a session): facts, not statuses, so they
+// are neutral; the label is muted and the value in the text colour.
+import { css, html, nothing, type TemplateResult } from 'lit';
+import type { TranscriptTag } from './types.js';
+
+/** `tags` as chips (`tagStyles`). */
+export const tagChips = (tags: readonly TranscriptTag[]): TemplateResult =>
+  html`${tags.map(
+    (t) => html`<span class="tag ${t.look ?? ''}" part="tag" title=${t.tip ?? nothing}><span class="tag-l">${t.label}</span>${t.value}</span>`,
+  )}`;
+
+export const tagStyles = css`
+  .tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 2px 9px;
+    border-radius: 7px; border: 1px solid var(--line2); white-space: nowrap; color: var(--text); background: var(--raise); }
+  .tag-l { font-size: 10px; font-weight: 400; color: var(--text-muted); font-family: var(--sans); }
+  .tag.mono, .tag.quiet { font-family: var(--mono); }
+  .tag.quiet { color: var(--text-2); font-weight: 500; background: none; }
+`;

package/src/transcript/tool-card.ts

@@ -0,0 +1,103 @@
+// A tool call as a card: its name, summary and status on one line; open, its
+// command and output (long ones folded), or a web search's query and the pages
+// it returned, or a page's URL.
+import { html, nothing, type TemplateResult } from 'lit';
+import type { ToolCard, TranscriptStrings } from './types.js';
+
+/** Tool output longer than this is folded. */
+const FOLD_AT = 1200;
+/** A tool card shows at most this much of a command or an output. */
+const SHOW_MAX = 4000;
+
+/** What a card needs of the element that draws it. */
+export interface CardHost {
+  s: TranscriptStrings;
+  live: boolean;
+  /** The card scrolled to by `reveal`. */
+  revealed: string;
+  isOpen(id: string): boolean;
+  toggle(id: string): void;
+  /** The folded code blocks that are unfolded. */
+  folds: Set<string>;
+  requestUpdate(): void;
+}
+
+/** The host of a URL, for the line under a result; '' when it does not parse. */
+function hostOf(url: string): string {
+  try {
+    return new URL(url).host;
+  } catch {
+    return '';
+  }
+}
+
+function codeBlock(h: CardHost, text: string, id: string): TemplateResult {
+  const pre = html`<pre><code>${text.slice(0, SHOW_MAX)}</code></pre>`;
+  if (text.length <= FOLD_AT) return pre;
+  const open = h.folds.has(id);
+  return html`<div>
+    <div class="fold ${open ? 'open' : ''}">${pre}</div>
+    <button type="button" class="foldbtn" @click=${() => {
+      if (open) h.folds.delete(id);
+      else h.folds.add(id);
+      h.requestUpdate();
+    }}>${open ? h.s.showLess : h.s.showAll(text.length)}</button>
+  </div>`;
+}
+
+/** The open card's body: a web search's query and its links, or a page's URL, or the command; then the output. */
+function cardBody(h: CardHost, c: ToolCard) {
+  const out = c.output;
+  const links = c.links ?? [];
+  const subject = c.query || c.page;
+  if (!subject) {
+    return out === null
+      ? codeBlock(h, c.body ?? '', `${c.id}:cmd`)
+      : html`${c.body ? codeBlock(h, c.body, `${c.id}:cmd`) : nothing}${codeBlock(h, out, `${c.id}:out`)}`;
+  }
+  const url = !c.query && /^https?:\/\//.test(subject);
+  return html`<div class="wq">
+      <span class="wl">${c.query ? h.s.query : h.s.page}</span>${url
+        ? html`<a class="plink" href=${subject} target="_blank" rel="noopener noreferrer">${subject}</a>`
+        : html`<b>${subject}</b>`}
+    </div>
+    ${links.length
+      ? html`<ol class="links">
+          ${links.map(
+            (r) => html`<li><a href=${r.url} target="_blank" rel="noopener noreferrer">${r.title}</a><span class="host">${hostOf(r.url)}</span></li>`,
+          )}
+        </ol>`
+      : nothing}
+    ${out === null
+      ? nothing
+      : links.length
+        ? html`<details class="rawfold"><summary>${h.s.fullText}</summary>${codeBlock(h, out, `${c.id}:out`)}</details>`
+        : codeBlock(h, out, `${c.id}:out`)}`;
+}
+
+export function toolCard(h: CardHost, c: ToolCard): TemplateResult {
+  const { s } = h;
+  const open = h.isOpen(c.id);
+  const n = c.links?.length ?? 0;
+  const status =
+    c.status === 'ok'
+      ? html`<span class="st-ok"><span aria-hidden="true">✓</span> ${s.done}</span>`
+      : c.status === 'error'
+        ? html`<span class="st-err"><span aria-hidden="true">✕</span> ${s.failed}</span>`
+        : h.live
+          ? html`<span class="st-run"><i class="pdot"></i>${s.running}</span>`
+          : html`<span class="st-int" title=${s.interruptedTip}><span aria-hidden="true">◌</span> ${s.interrupted}</span>`;
+  const cls = c.status === 'running' ? 'run' : c.status === 'error' ? 'err' : 'ok';
+  return html`<div class="toolcard ${cls} ${h.revealed === c.id ? 'revealed' : ''}" part="tool" data-tool=${c.query ? 'web-search' : c.page ? 'web-fetch' : c.icon} data-card=${c.id}>
+    <div class="th" role="button" tabindex="0" aria-expanded=${open ? 'true' : 'false'} @click=${() => h.toggle(c.id)} @keydown=${(e: KeyboardEvent) => {
+      if (e.key !== 'Enter' && e.key !== ' ') return;
+      e.preventDefault();
+      (e.currentTarget as HTMLElement).click();
+    }}>
+      <span class="tn">${c.name || s.tool}</span><span class="tp">${c.summary}</span><span class="ti"
+        >${n ? s.results(n) : c.intent}</span
+      >${status}
+    </div>
+    ${open ? html`<div class="tb" part="tool-body">${cardBody(h, c)}</div>` : nothing}
+  </div>`;
+}