@contraagent/elements 0.8.0 → 0.9.0

package/docs/tiles.md

@@ -1,7 +1,7 @@
 # Stat tiles
 
 `<cae-stat-tiles>` shows figures as a grid of tiles: each a label, a value and
-lines of facts under it, and a link. Register it with
+lines of facts under it. A tile with an action is a link as a whole. Register it with
 `@contraagent/elements/tiles/define`, which also registers the `<cae-count>` a
 tile's number counts up in; the types are in `@contraagent/elements/tiles`.
 
@@ -29,12 +29,14 @@ of failures above 0; a total or a measure stays neutral.
 
 ## Events
 
-A tile's link sends `cae-action` with the tile's `id` and the action's `id`;
-the host decides what it opens.
+A tile with an `action` is a link over the whole tile. The action's `label` is
+the link's accessible name, and the tile shows no link text of its own. A click
+sends `cae-action` with the tile's `id` and the action's `id`; the host decides
+what it opens.
 
 ## Look
 
 `columns` sets the tiles per row in a wide element (5); a narrower one has 4
 below 1100px of its width, 2 below 660px and 1 below 240px. `--cae-stat-tiles-gap` sets the space between
 the tiles. The parts are `tiles`, `tile` (with `data-id` and `data-tone`),
-`label`, `value`, `sub` and `action`.
+`label`, `value`, `sub` and `action` (the link over a tile).

package/docs/transcript.md

@@ -27,7 +27,9 @@ a list (errors) or a note.
 ::code{file="../src/transcript/types.ts" from="export interface TranscriptSection {" to="/** Where the reader was in a transcript. */"}
 
 An item is a prompt, a message or reasoning (markdown), an event (a glyph, a
-title and a detail), a notice, or a tool card:
+title and a detail), a notice, or a tool card. A prompt and reasoning show a
+head over their bubble; the agent's messages show none, and their avatar
+carries the name (`strings.assistant`) as its accessible name and tooltip:
 
 ::code{file="../src/transcript/types.ts" from="/** One tool call:" to="/** A labelled value in a section's head (who ran it). */"}
 
@@ -69,5 +71,5 @@ Markdown is turned into HTML by `markdown` (`md` of
 reasoning show as plain text. `renderDetail` draws an open prose detail. The
 parts are `picker`, `section`, `tag`, `bubble`, `notice`, `tool`, `tool-body`
 and `verdict`; `tagChips` and `tagStyles` draw tags elsewhere in the same
-look. The words are `strings` ([Strings](strings.md)): the picker's name and
-tooltip, the bubbles' heads, the tool cards' statuses, the counts.
+look. The words are `strings` ([Strings](strings.md)): the picker's accessible
+name (not shown) and tooltip, the bubbles' heads and the messages' name, the tool cards' statuses, the counts.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contraagent/elements",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "Generic web components (Lit) and their parts: design tokens, themes, status pills, legends, a segmented control, a data table, a layered graph, a mark matrix, stat tiles, time lanes, charts (columns, lines, a heatmap, horizontal bars), a check table, a transcript, a JSON tree, markdown, highlighted code, a tree of items and counters. No contraagent data, no localization library",
   "license": "MIT",
   "keywords": [

package/src/graph/layered-graph.ts

@@ -51,7 +51,8 @@ const EMPTY: GraphInput = { series: [], nodes: [], clusters: [], edges: [], stub
  * graph; Ctrl (or ⌘) and the wheel, or the buttons, zoom; dragging pans; "Show all"
  * goes back. "Graph | Table" changes the view (`cae-view-change`): the table is a row
  * per node, with its status and the nodes it is joined to. With `matrix`, the frame
- * shows that `<cae-mark-matrix>` as the table instead.
+ * shows that `<cae-mark-matrix>` as the table instead. With `controls` false, the
+ * buttons and "Graph | Table" are not drawn.
  *
  * Size: the element is as wide as its container. Without a height set on it, the
  * frame is as tall as the whole drawing at that width (never scaled up), up to 70% of
@@ -103,6 +104,7 @@ export class CaeLayeredGraph extends LitElement {
     view: {},
     matrix: { attribute: false },
     barAt: { type: Number },
+    controls: { type: Boolean },
     related: { attribute: false },
     strings: { attribute: false },
     matrixStrings: { attribute: false },
@@ -128,6 +130,8 @@ export class CaeLayeredGraph extends LitElement {
   direction: 'auto' | 'across' | 'down' = 'auto';
   /** The node table instead of the drawing. */
   view: 'graph' | 'table' = 'graph';
+  /** The zoom buttons and "Graph | Table" under the frame; false for a graph that is only shown (the wheel with Ctrl or ⌘, and dragging, still zoom and pan). */
+  controls = true;
   /** A mark matrix shown in the frame as the table, or null. */
   matrix: MarkMatrixInput | null = null;
   /** Above this many marks, a node shows a bar of its counts. */
@@ -370,7 +374,7 @@ export class CaeLayeredGraph extends LitElement {
     return html`<div class="col">
       <slot name="crumbs"></slot>
       <div class="main">${body}${card}<div class="sr" role="status">${this.announced}</div></div>
-      ${foot(h, mx)}
+      ${foot(h, mx, this.controls)}
     </div>`;
   }
 

package/src/graph/strings.ts

@@ -26,11 +26,13 @@ export interface LayeredGraphStrings {
   more: (n: number) => string;
   /** A node's count without `progress`: its marks of the tone `done`, of all its marks ("2 of 3 done"). */
   progress: (done: number, total: number) => string;
-  /** Legend words: a badge in a mark, the three edge styles, a cluster's return, an inner view. */
+  /** The label of a mark's badge in its tooltip ("count: 3"). */
   badge: string;
+  /** Legend words: the three edge styles. */
   solidEdge: string;
   dottedEdge: string;
   dashedEdge: string;
+  /** Tooltips: the mark of a cluster's return, and of an item with an inner view. */
   cycle: string;
   drill: string;
   /** The open and close controls of an item that can be drawn open ("Show inside", "Hide inside"). */

package/src/graph/styles.ts

@@ -41,6 +41,8 @@ export const graphStyles = css`
   .edges path.ret-tip, .legend svg path.ret-head { fill: var(--text-2); stroke: none; opacity: 0.8; }
   .ic { display: block; flex: none; }
   .loop-ic { color: var(--text-2); }
+  /* an icon that names itself in a tooltip */
+  .tip-ic { display: inline-flex; line-height: 0; }
   .in-ic { color: var(--text-muted); }
 
   .stub { z-index: 1; font-family: var(--mono); font-size: 11.5px; color: var(--text-muted); padding: 3px 9px;

package/src/graph/types.ts

@@ -23,7 +23,7 @@ export interface GraphMark {
   label: string;
   /** The tooltip. */
   tip?: string;
-  /** A short text in the mark: a count. */
+  /** A short text in the mark: a count. The tooltip adds it after `strings.badge` ("count: 3"). */
   badge?: string;
   /** A short name, as a chip shows it (a node drawn as a bar lists its failed marks by it); default: its series id. */
   name?: string;

package/src/graph/views/dag.ts

@@ -109,7 +109,7 @@ function toggleControl(h: GraphHost, id: string, label: string, open: boolean) {
 function clusterName(h: GraphHost, b: GraphClusterInput, sel: boolean) {
   const first = b.path?.[0];
   const name = html`<button type="button" class="name" title=${(first?.tip ?? b.tip) || nothing} aria-pressed=${sel}
-    @focus=${() => h.focusSelect(b.id)} @keydown=${(e: KeyboardEvent) => onNameKey(h, e, b.id)}>${b.cycle ? cycleIcon() : nothing}${first?.label ?? b.label}</button>`;
+    @focus=${() => h.focusSelect(b.id)} @keydown=${(e: KeyboardEvent) => onNameKey(h, e, b.id)}>${b.cycle ? html`<span class="tip-ic" title=${h.words.cycle}>${cycleIcon()}</span>` : nothing}${first?.label ?? b.label}</button>`;
   if (!b.path || b.path.length < 2) return name;
   return html`${name}${b.path.slice(1).map(
     (p) => html`<span class="psep" aria-hidden="true">›</span><button type="button" class="part" title=${p.tip || nothing}
@@ -139,7 +139,7 @@ function cluster(h: GraphHost, b: GraphClusterInput, parent: Rect | null, item:
     ${b.toggle
       ? html`<span class="cue">${toggleControl(h, b.id, b.path?.map((p) => p.label).join(' › ') ?? b.label, true)}</span>`
       : b.drill
-        ? html`<span class="cue" aria-hidden="true">${innerIcon()}</span>`
+        ? html`<span class="cue" aria-hidden="true" title=${h.words.drill}>${innerIcon()}</span>`
         : nothing}
     <div class="in">${repeat(kids, (id) => id, (id) => item(id, r))}</div>
   </section>`;
@@ -169,7 +169,7 @@ function node(h: GraphHost, n: GraphNode, parent: Rect | null) {
       <span class="right"><span class="count" aria-hidden="true" title=${n.progress.label}>${n.progress.done}/${n.progress.total}</span>${n.toggle
         ? toggleControl(h, n.id, n.label, false)
         : n.drill
-          ? html`<span class="cue" aria-hidden="true">${innerIcon()}</span>`
+          ? html`<span class="cue" aria-hidden="true" title=${h.words.drill}>${innerIcon()}</span>`
           : nothing}</span>
     </div>
     ${bar ? statusBar(h, n, group) : marks(h, group)}
@@ -230,7 +230,7 @@ function mark(h: GraphHost, g: MarkGroup, s: Slot, i: number, tabStop: boolean,
   const look = h.states[m.state];
   return html`<button type="button" class="mark ${lit ? 'on' : ''} ${sel}" part="mark" data-tone=${toneAttr(look?.tone)} data-shape=${look?.shape ?? nothing}
     data-link=${link ?? nothing} data-i=${i} data-n=${m.badge ?? nothing} tabindex=${tabStop ? 0 : -1}
-    title=${m.tip ?? nothing}
+    title=${[m.tip, m.badge ? `${h.words.badge}: ${m.badge}` : ''].filter(Boolean).join('\n') || nothing}
     aria-label=${m.label} aria-pressed=${!!sel}
     @mouseenter=${() => (h.hover = hlKey)}
     @focus=${focus}

package/src/graph/views/foot.ts

@@ -5,17 +5,17 @@ import { legend as legendRow, type LegendItem } from '../../primitives/legend.js
 import type { MarkMatrixInput } from '../../matrix/types.js';
 import { asBar } from '../marks.js';
 import { slotsOf, type GraphHost } from '../host.js';
-import { innerIcon } from '../icons.js';
 
 /**
- * The legend on the left, the tools at the right end of the first line, and the keys
- * under them: their line keeps its room, and shows its words while the graph has the focus.
+ * The legend on the left, the tools at the right end of the first line (with
+ * `controls`), and the keys under them: their line keeps its room, and shows its
+ * words while the graph has the focus.
  */
-export function foot(h: GraphHost, matrix: MarkMatrixInput | null) {
+export function foot(h: GraphHost, matrix: MarkMatrixInput | null, controls: boolean) {
   const table = !!matrix || h.asTable;
   return html`<div class="foot">
     ${legend(h, matrix)}
-    <div class="tools">${table ? nothing : zoomTools(h)}${viewSwitch(h, table)}</div>
+    ${controls ? html`<div class="tools">${table ? nothing : zoomTools(h)}${viewSwitch(h, table)}</div>` : nothing}
     <div class="keys" part="keys">${keyHints(h, matrix).map((k, i) => html`${i ? ' | ' : ''}<span>${k}</span>`)}</div>
   </div>`;
 }
@@ -58,9 +58,9 @@ const legendMark = (h: GraphHost, state: string, badge?: string) => {
 };
 
 /**
- * What the view shows that needs a word: the states of the marks shown, a badge when a
- * mark shows one, the icons the host names, the edge styles when another than solid is drawn, a
- * cluster's return, and the mark of an item with an inner view.
+ * What the view shows that needs a word: the states of the marks shown, the icons the
+ * host names, and the edge styles when another than solid is drawn. A badge, a cluster's
+ * return and the mark of an item with an inner view name themselves in their tooltips.
  */
 function legend(h: GraphHost, mx: MarkMatrixInput | null) {
   const g = h.drawn;
@@ -73,13 +73,9 @@ function legend(h: GraphHost, mx: MarkMatrixInput | null) {
       : g.nodes.flatMap((n) => slotsOf(n, g.series).map((s) => s && { state: s.m.state, badge: asBar(n, h.barAt) ? undefined : s.m.badge }));
   const shown = marks.filter((m): m is { state: string; badge: string | undefined } => m !== null);
   const present = new Set(shown.map((m) => m.state));
-  const badge = shown.some((m) => m.badge);
   const styles = new Set(!mx && !flat ? [...g.edges, ...g.stubs].map((e) => e.style) : []);
   const edgeStyles = styles.size > 1 || (styles.size === 1 && !styles.has('solid')) ? (['solid', 'dotted', 'dashed'] as const).filter((s) => styles.has(s)) : [];
   const icons = new Set(mx ? mx.head.flat().flatMap((c) => c.icons ?? []) : g.nodes.flatMap((n) => n.icons ?? []));
-  const cycles = !mx && !flat && g.clusters.some((c) => c.cycle);
-  const inner = !mx && ((!flat && g.clusters.some((c) => c.drill)) || g.nodes.some((n) => n.drill));
-  const first = Object.keys(h.states)[0] ?? '';
   const line = (style: 'solid' | 'dotted' | 'dashed') =>
     svg`<svg width="22" height="8" aria-hidden="true"><path class=${style} d="M1,4 H21" stroke-dasharray=${style === 'dashed' ? '5 4' : style === 'dotted' ? '0.1 4' : 'none'}></path></svg>`;
   const edgeWord = { solid: h.words.solidEdge, dotted: h.words.dottedEdge, dashed: h.words.dashedEdge };
@@ -87,21 +83,10 @@ function legend(h: GraphHost, mx: MarkMatrixInput | null) {
     ...Object.entries(h.states)
       .filter(([s]) => present.has(s))
       .map(([s, look]) => ({ label: look.label, icon: legendMark(h, s), decorative: true })),
-    ...(badge ? [{ label: h.words.badge, icon: legendMark(h, first, '2'), decorative: true }] : []),
     ...Object.entries(h.words.iconNames)
       .filter(([name]) => icons.has(name))
       .map(([name, label]) => ({ label, icon: h.renderIcon(name) })),
     ...edgeStyles.map((s) => ({ label: edgeWord[s], icon: line(s) })),
-    ...(cycles
-      ? [
-          {
-            label: h.words.cycle,
-            icon: html`<svg width="24" height="12" aria-hidden="true"><path class="ret" d="M20,1.5 V5.5 Q20,9.5 16,9.5 H8 Q4,9.5 4,5.5 V5"></path>
-            <path class="ret-head" d="M4,0.8 L1.4,5 L6.6,5 z"></path></svg>`,
-          },
-        ]
-      : []),
-    ...(inner ? [{ label: h.words.drill, icon: innerIcon() }] : []),
   ];
   return legendRow(items, { cls: 'big' });
 }

package/src/graph/views/node-table.ts

@@ -57,7 +57,7 @@ export function nodeTable(h: GraphHost) {
           const nb = neighbours(n, g, h.nodes, w.inCluster);
           const box = n.cluster ? h.clusters.get(n.cluster) : undefined;
           const on = h.selected === n.id;
-          const icons = html`${(n.icons ?? []).map((x) => h.renderIcon(x))}${n.drill ? innerIcon() : nothing}`;
+          const icons = html`${(n.icons ?? []).map((x) => h.renderIcon(x))}${n.drill ? html`<span class="tip-ic" title=${w.drill}>${innerIcon()}</span>` : nothing}`;
           return html`<tr class=${on ? 'sel' : ''} part="row" data-id=${n.id}
               @click=${(e: MouseEvent) => !(e.target as Element).closest('.loopchip') && e.detail < 2 && h.select(n.id)}
               @dblclick=${(e: MouseEvent) => !(e.target as Element).closest('.loopchip') && h.act(n.id)}>
@@ -69,7 +69,7 @@ export function nodeTable(h: GraphHost) {
                   h.act(n.id);
                 }}>${n.label}</button>${box?.drill
                 ? html`<button type="button" class="taskchip loopchip" title=${box.chipTip ?? nothing} aria-label=${box.chipLabel ?? nothing}
-                    @click=${() => h.drill(box.id)}>${box.cycle ? cycleIcon(12) : nothing}${box.note ?? box.label}</button>`
+                    @click=${() => h.drill(box.id)}>${box.cycle ? html`<span class="tip-ic" title=${w.cycle}>${cycleIcon(12)}</span>` : nothing}${box.note ?? box.label}</button>`
                 : nothing}</span>
             </th>
             <td class="fit st">${statusLine(n)}</td>

package/src/lanes/lanes.ts

@@ -14,8 +14,8 @@ const SECONDS_BELOW_MS = 10 * 60e3;
 /**
  * Bars on a time axis, a lane per group: each bar as long as it took, the
  * overlapping bars of a lane stacked, a running bar (`end` null) growing until
- * now and a line at now. A bar's look is its style in `barStyles`, whose
- * labels are the legend (a row per `group`). The bars grow in when they are
+ * now and a line at now. A bar's look is its style in `barStyles`; the labels
+ * of the styles the bars use are the legend (a row per `group`). The bars grow in when they are
  * first drawn.
  *
  * Its look: `--cae-lanes-label-width` (the lanes' labels; 112px, 78px on a
@@ -117,10 +117,12 @@ export class CaeLanes extends LitElement {
     </div>`;
   }
 
-  /** A legend row per group of styles, in key order; the note of omitted bars ends the last. */
+  /** A legend row per group of the styles the bars use, in key order; the note of omitted bars ends the last. */
   private legends(s: LanesStrings): TemplateResult[] {
     const groups: LegendItem[][] = [];
-    for (const look of Object.values(this.barStyles)) {
+    const used = new Set(this.lanes.flatMap((l) => l.bars.map((b) => b.style)));
+    for (const [key, look] of Object.entries(this.barStyles)) {
+      if (!used.has(key)) continue;
       const g = look.group ?? 0;
       (groups[g] ??= []).push({
         label: look.label,

package/src/primitives/share-bar.ts

@@ -20,6 +20,8 @@ export interface ShareBarOptions {
   label?: string;
   /** The smallest share (0..1) whose part is named under the bar; default 0.15. */
   labelAt?: number;
+  /** Names the parts under the bar; default true. False when a table beside the bar names each part with its share. */
+  names?: boolean;
 }
 
 /**
@@ -42,7 +44,8 @@ export const sharePercent = (pct: number, value: number): string => (pct === 0 &
 /**
  * The parts of a whole as one bar (`.share`, part `share`): each part a segment as
  * wide as its share, 2px apart, in the order given (so a part keeps its place when
- * the amounts change), with its name and share under it when it is wide enough.
+ * the amounts change), with its name and share under it when it is wide enough
+ * (unless `names` is false).
  * Hovering or focusing a segment shows its name, share and amount; each segment is
  * a tab stop with the same words. Name every part beside the bar too (a legend or a
  * table): a colour alone never says which part is which.
@@ -62,12 +65,14 @@ export function shareBar(parts: readonly SharePart[], o: ShareBarOptions = {}):
           ><span class="share-tip" aria-hidden="true">${words(p, i)}</span></span>`,
       )}
     </div>
-    <div class="share-names" aria-hidden="true">
-      ${shown.map(
-        (p, i) => html`<span style=${styleMap({ flexGrow: String(p.value / total) })}
-          >${p.value / total >= labelAt ? html`<b>${p.label}</b> ${sharePercent(pcts[i]!, p.value)}` : nothing}</span>`,
-      )}
-    </div>
+    ${o.names === false
+      ? nothing
+      : html`<div class="share-names" aria-hidden="true">
+          ${shown.map(
+            (p, i) => html`<span style=${styleMap({ flexGrow: String(p.value / total) })}
+              >${p.value / total >= labelAt ? html`<b>${p.label}</b> ${sharePercent(pcts[i]!, p.value)}` : nothing}</span>`,
+          )}
+        </div>`}
   </div>`;
 }
 

package/src/styles/motion.ts

@@ -13,7 +13,7 @@ export const motionStyles = css`
   @keyframes ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--status-running) 55%, transparent); } 80%, 100% { box-shadow: 0 0 0 9px transparent; } }
   @keyframes enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
   @keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.04); box-shadow: 0 0 0 1px var(--line2); } 100% { transform: scale(1); } }
-  @keyframes scan { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
+  @keyframes scan { to { left: 100%; } }
   @keyframes growx { from { transform: scaleX(0); } to { transform: scaleX(1); } }
   @keyframes stripes { to { background-position: 17px 0; } }
   @keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(0.97); } to { opacity: 1; transform: none; } }

package/src/tiles/stat-tiles.ts

@@ -13,7 +13,8 @@ const reducedMotion = () => globalThis.matchMedia?.('(prefers-reduced-motion: re
 
 /**
  * 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
+ * `<cae-count>`) and the lines of facts under it. A tile with an action is a
+ * link as a whole, named by the action's label. 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
@@ -26,7 +27,7 @@ const reducedMotion = () => globalThis.matchMedia?.('(prefers-reduced-motion: re
  * @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
+ * @csspart action - a tile's link, over the whole tile
  */
 export class CaeStatTiles extends LitElement {
   static override styles = [base, statTilesStyles];
@@ -63,10 +64,10 @@ export class CaeStatTiles extends LitElement {
       <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) => {
+        ? html`<a class="action" 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>`
+          }}><span class="sr">${t.action.label}</span></a>`
         : nothing}
     </div>`;
   }

package/src/tiles/styles.ts

@@ -16,7 +16,10 @@ export const statTilesStyles = css`
   .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; }
+  /* a tile with an action is a link as a whole: the link covers the tile */
+  .action { position: absolute; inset: 0; border-radius: inherit; }
+  .action:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+  .tile:has(.action):hover { border-color: var(--accent); }
   .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

@@ -15,6 +15,6 @@ export interface StatTile {
   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. */
+  /** Makes the whole tile a link named `label`: a click sends `cae-action` with the tile's id and this id. */
   action?: { id: string; label: string };
 }

package/src/transcript/styles.ts

@@ -7,7 +7,6 @@ export const transcriptStyles = css`
   :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); }

package/src/transcript/transcript.ts

@@ -254,8 +254,8 @@ export class CaeTranscript extends LitElement {
 
   private renderPicker(sections: readonly TranscriptSection[], shown: number, s: TranscriptStrings) {
     if (sections.length < 2) return nothing;
-    return html`<div class="rounds" role="group" aria-label=${s.sections} part="picker">
-      <span class="rounds-lbl" title=${s.sectionsTip || nothing}>${s.sections}</span>
+    // The buttons say what they pick: the picker's name is for screen readers, its tooltip on the group.
+    return html`<div class="rounds" role="group" aria-label=${s.sections} title=${s.sectionsTip || nothing} part="picker">
       ${sections.map((sec, i) => {
         const v = sec.verdict;
         return html`<button type="button" class="stab ${i === shown ? 'sel' : ''}" title=${v?.tip || nothing} aria-pressed=${i === shown}
@@ -320,10 +320,13 @@ export class CaeTranscript extends LitElement {
     return unsafeHTML(out);
   }
 
-  private bubble(av: string, avCls: string, head: string, body: TemplateResult | string, title?: string) {
+  /** A bubble under its head; `named`: no head, the avatar carries the name (the agent's own messages). */
+  private bubble(av: string, avCls: string, head: string, body: TemplateResult | string, title?: string, named = false) {
     return html`<div class="msg" part="bubble" title=${title ?? nothing}>
-      <div class="av ${avCls}">${av}</div>
-      <div class="bd"><div class="hd">${head}</div>${body}</div>
+      ${named
+        ? html`<div class="av ${avCls}" role="img" aria-label=${head} title=${head}>${av}</div>`
+        : html`<div class="av ${avCls}" aria-hidden="true">${av}</div>`}
+      <div class="bd">${named ? nothing : html`<div class="hd">${head}</div>`}${body}</div>
     </div>`;
   }
 
@@ -332,7 +335,7 @@ export class CaeTranscript extends LitElement {
       case 'prompt':
         return this.bubble('▸', 'av-l', s.prompt, html`<div class="tx meta">${s.characters(it.text.length)}</div>`, it.text.slice(0, 600));
       case 'message':
-        return this.bubble('A', 'av-a', s.assistant, html`<div class="tx">${this.md(it.id, it.text)}</div>`);
+        return this.bubble('A', 'av-a', s.assistant, html`<div class="tx">${this.md(it.id, it.text)}</div>`, undefined, true);
       case 'reasoning':
         return this.bubble('✦', 'av-t', s.reasoning, html`<div class="tx">${this.md(it.id, it.text)}</div>`);
       case 'event':
@@ -347,7 +350,7 @@ export class CaeTranscript extends LitElement {
   }
 
   private typing(s: TranscriptStrings) {
-    return html`<div class="typing"><span class="av av-a">A</span><span class="dots"><i></i><i></i><i></i></span><span class="meta">${s.running}</span></div>`;
+    return html`<div class="typing"><span class="av av-a" aria-hidden="true">A</span><span class="dots"><i></i><i></i><i></i></span><span class="meta">${s.running}</span></div>`;
   }
 }
 

package/src/transcript/types.ts

@@ -106,7 +106,7 @@ export interface TranscriptMemory {
 }
 
 export interface TranscriptStrings {
-  /** The section picker's name. */
+  /** The section picker's accessible name (not shown). */
   sections: string;
   /** The section picker's tooltip. */
   sectionsTip: string;
@@ -117,6 +117,7 @@ export interface TranscriptStrings {
   /** As `newBelow`, while another section than the latest is shown. */
   newInLatest: (n: number) => string;
   prompt: string;
+  /** The name of the agent's messages: their avatar's accessible name and tooltip (no head is shown). */
   assistant: string;
   reasoning: string;
   characters: (n: number) => string;