@north-light/crouter 0.3.192 → 0.3.193

package/dist/pages/elements/chart.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/pages/elements/chart.js

@@ -0,0 +1,648 @@
+import { artifactData } from '../host.js';
+import { registerElement } from '../register.js';
+import { readSlotConfig } from '../slot-config.js';
+/** The five chart tokens, cycled when a config declares more than five series. */
+const SERIES_COLORS = [
+    'var(--crtr-chart-1)',
+    'var(--crtr-chart-2)',
+    'var(--crtr-chart-3)',
+    'var(--crtr-chart-4)',
+    'var(--crtr-chart-5)',
+];
+const SVG_NS = 'http://www.w3.org/2000/svg';
+const HEIGHT = 260;
+const MARGIN_TOP = 12;
+const MARGIN_RIGHT = 12;
+const MARGIN_BOTTOM = 28;
+const Y_TICK_TARGET = 5;
+/** Horizontal room one x tick label needs before labels start colliding. */
+const X_TICK_SPACING = 88;
+/** Rough advance width of one character at tick size, used to keep edge labels in the box. */
+const LABEL_CHAR_WIDTH = 5.8;
+const MAX_X_LABEL_CHARS = 14;
+const ISO_DATE_RE = /^\d{4}-\d{2}-\d{2}(?:[T ]|$)/;
+const DATE_ONLY_RE = /^\d{4}-\d{2}-\d{2}$/;
+const STYLE = `
+  :host {
+    display: block;
+  }
+
+  [part="container"] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--crtr-space-2);
+    width: 100%;
+  }
+
+  [part="title"] {
+    color: var(--crtr-color-text);
+    font-weight: 500;
+  }
+
+  [part="legend"] {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--crtr-space-1) var(--crtr-space-4);
+    color: var(--crtr-color-text-muted);
+    font-size: calc(var(--crtr-font-size) * 0.85);
+  }
+
+  [part="legend-item"] {
+    display: flex;
+    align-items: center;
+    gap: var(--crtr-space-1);
+    min-width: 0;
+  }
+
+  [part="legend-swatch"] {
+    flex: none;
+    width: calc(var(--crtr-space-2) - 1px);
+    height: calc(var(--crtr-space-2) - 1px);
+    border-radius: 2px;
+  }
+
+  [part="legend-label"] {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  [part="plot"] {
+    width: 100%;
+  }
+
+  [part="chart"] {
+    display: block;
+    overflow: visible;
+  }
+
+  [part="empty"] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 var(--crtr-space-4);
+    color: var(--crtr-color-text-muted);
+    border: 1px dashed var(--crtr-color-border);
+    border-radius: var(--crtr-radius-medium);
+  }
+
+  [part="status"] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 var(--crtr-space-4);
+    color: var(--crtr-color-text-muted);
+    border: 1px dashed var(--crtr-color-border);
+    border-radius: var(--crtr-radius-medium);
+  }
+
+  [part="unavailable"] {
+    padding: var(--crtr-space-3);
+    color: var(--crtr-color-text-muted);
+    background: var(--crtr-color-surface);
+    border: 1px solid var(--crtr-color-border);
+    border-radius: var(--crtr-radius-medium);
+    box-shadow: var(--crtr-shadow);
+  }
+
+  [part="reason"] {
+    color: var(--crtr-color-text);
+    font-family: var(--crtr-font-mono);
+  }
+
+  .grid {
+    stroke: var(--crtr-color-border);
+    stroke-width: 1;
+  }
+
+  .tick {
+    fill: var(--crtr-color-text-muted);
+    font-size: calc(var(--crtr-font-size) * 0.72);
+  }
+`;
+function normalizeConfig(raw) {
+    const kind = raw.kind;
+    if (kind !== 'line' && kind !== 'bar' && kind !== 'area') {
+        return { status: 'invalid', reason: 'chart kind must be line, bar or area' };
+    }
+    const x = raw.x;
+    if (typeof x !== 'string' || x === '')
+        return { status: 'invalid', reason: 'chart config has no x field' };
+    if (!Array.isArray(raw.y) || raw.y.length === 0) {
+        return { status: 'invalid', reason: 'chart config has no y series' };
+    }
+    const y = [];
+    for (const [index, entry] of raw.y.entries()) {
+        if (entry === null || typeof entry !== 'object' || Array.isArray(entry)) {
+            return { status: 'invalid', reason: `chart series #${index} is not { field, label? }` };
+        }
+        const definition = entry;
+        if (typeof definition.field !== 'string' || definition.field === '') {
+            return { status: 'invalid', reason: `chart series #${index} has no field` };
+        }
+        if (definition.label !== undefined && typeof definition.label !== 'string') {
+            return { status: 'invalid', reason: `chart series "${definition.field}" label is not a string` };
+        }
+        y.push({ field: definition.field, label: definition.label });
+    }
+    if (raw.title !== undefined && typeof raw.title !== 'string') {
+        return { status: 'invalid', reason: 'chart title is not a string' };
+    }
+    if (raw.source !== undefined && typeof raw.source !== 'string') {
+        return { status: 'invalid', reason: 'chart source is not a string' };
+    }
+    return {
+        status: 'ok',
+        config: {
+            kind,
+            x,
+            y,
+            title: raw.title,
+            data: raw.data,
+            source: raw.source,
+        },
+    };
+}
+function isRows(value) {
+    return Array.isArray(value) && value.every((row) => row !== null && typeof row === 'object' && !Array.isArray(row));
+}
+function getByPath(row, path) {
+    return path.split('.').reduce((current, key) => {
+        if (current === null || current === undefined || typeof current !== 'object')
+            return undefined;
+        return current[key];
+    }, row);
+}
+/** Convert a row field name into the human-readable label used by the legend and summary. */
+function titleCaseHeader(field) {
+    if (field.includes(' '))
+        return field;
+    const lastSegment = field.includes('.') ? (field.split('.').pop() ?? field) : field;
+    return lastSegment
+        .replace(/[_-]+/g, ' ')
+        .replace(/([a-z])([A-Z])/g, '$1 $2')
+        .split(/\s+/)
+        .filter(Boolean)
+        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+        .join(' ');
+}
+/** Coerce a cell into a plottable number, tolerating the string numerics agents emit. */
+function toNumber(value) {
+    if (typeof value === 'number')
+        return Number.isFinite(value) ? value : null;
+    if (typeof value === 'boolean')
+        return value ? 1 : 0;
+    if (typeof value === 'bigint')
+        return Number(value);
+    if (typeof value === 'string') {
+        const cleaned = value.replace(/[\s,_]/g, '').replace(/^[$£€¥]/, '').replace(/%$/, '');
+        if (cleaned === '' || cleaned === '-')
+            return null;
+        const parsed = Number(cleaned);
+        return Number.isFinite(parsed) ? parsed : null;
+    }
+    return null;
+}
+/** Render an x value as an axis category label. */
+function formatCategory(value) {
+    if (value === null || value === undefined)
+        return '';
+    if (value instanceof Date) {
+        return Number.isNaN(value.getTime())
+            ? ''
+            : value.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
+    }
+    if (typeof value === 'string') {
+        const trimmed = value.trim();
+        if (ISO_DATE_RE.test(trimmed)) {
+            const parsed = new Date(trimmed);
+            if (!Number.isNaN(parsed.getTime())) {
+                // A date-only string parses as UTC midnight, so it has to be read back in UTC
+                // or every label west of Greenwich names the previous day.
+                return parsed.toLocaleDateString(undefined, DATE_ONLY_RE.test(trimmed)
+                    ? { month: 'short', day: 'numeric', timeZone: 'UTC' }
+                    : { month: 'short', day: 'numeric' });
+            }
+        }
+        return value;
+    }
+    if (typeof value === 'object')
+        return '';
+    return String(value);
+}
+function truncateLabel(label) {
+    return label.length > MAX_X_LABEL_CHARS ? `${label.slice(0, MAX_X_LABEL_CHARS - 1)}…` : label;
+}
+/**
+ * Axis tick text. `compact` is decided once for the whole axis rather than per
+ * value, so one axis never reads `5,000` above `10K`.
+ */
+function formatTick(value, step, compact) {
+    const decimals = step >= 1 ? 0 : Math.min(4, Math.ceil(-Math.log10(step)));
+    return new Intl.NumberFormat(undefined, {
+        maximumFractionDigits: decimals,
+        notation: compact ? 'compact' : 'standard',
+    }).format(value);
+}
+/** Tooltip text — always the full value, never rounded to the axis step. */
+function formatExact(value) {
+    return new Intl.NumberFormat(undefined, { maximumFractionDigits: 4 }).format(value);
+}
+/** A 1 / 2 / 5 × 10ⁿ tick scale covering [min, max]. */
+function niceScale(min, max, target) {
+    let low = min;
+    let high = max;
+    if (!Number.isFinite(low) || !Number.isFinite(high)) {
+        low = 0;
+        high = 1;
+    }
+    if (low === high) {
+        const pad = Math.abs(low) > 0 ? Math.abs(low) * 0.1 : 1;
+        low -= pad;
+        high += pad;
+    }
+    const rawStep = (high - low) / Math.max(1, target);
+    const magnitude = 10 ** Math.floor(Math.log10(rawStep));
+    const normalized = rawStep / magnitude;
+    const step = (normalized <= 1 ? 1 : normalized <= 2 ? 2 : normalized <= 5 ? 5 : 10) * magnitude;
+    const domainMin = Math.floor(low / step) * step;
+    const domainMax = Math.ceil(high / step) * step;
+    const ticks = [];
+    for (let value = domainMin; value <= domainMax + step / 2; value += step) {
+        // Re-round each accumulated step so 0.1 increments do not print as 0.30000000000000004.
+        ticks.push(Number(value.toFixed(10)));
+    }
+    return { ticks, domainMin, domainMax, step };
+}
+/** Split a series into runs of consecutive plottable points, so gaps break the line. */
+function segmentsOf(points) {
+    const segments = [];
+    let current = [];
+    for (const point of points) {
+        const previous = current[current.length - 1];
+        if (previous === undefined || point.index === previous.index + 1) {
+            current.push(point);
+            continue;
+        }
+        segments.push(current);
+        current = [point];
+    }
+    if (current.length > 0)
+        segments.push(current);
+    return segments;
+}
+function svgNode(name, part) {
+    const node = document.createElementNS(SVG_NS, name);
+    if (part !== undefined)
+        node.setAttribute('part', part);
+    return node;
+}
+function setAttributes(node, attributes) {
+    for (const [name, value] of Object.entries(attributes))
+        node.setAttribute(name, String(value));
+}
+function tooltip(text) {
+    const node = svgNode('title');
+    node.textContent = text;
+    return node;
+}
+class CrtrChartElement extends HTMLElement {
+    #container = document.createElement('div');
+    #title = document.createElement('div');
+    #legend = document.createElement('div');
+    #plot = document.createElement('div');
+    #config = null;
+    #rows = null;
+    #observer = null;
+    #width = 0;
+    #generation = 0;
+    constructor() {
+        super();
+        const root = this.attachShadow({ mode: 'open' });
+        const style = document.createElement('style');
+        style.textContent = STYLE;
+        this.#container.part.add('container');
+        this.#title.part.add('title');
+        this.#legend.part.add('legend');
+        this.#plot.part.add('plot');
+        root.append(style, this.#container);
+    }
+    connectedCallback() {
+        const generation = ++this.#generation;
+        this.#config = null;
+        this.#rows = null;
+        const read = readSlotConfig(this);
+        if (read.status !== 'ok') {
+            this.#renderUnavailable(read.reason);
+            return;
+        }
+        const normalized = normalizeConfig(read.config);
+        if (normalized.status !== 'ok') {
+            this.#renderUnavailable(normalized.reason);
+            return;
+        }
+        this.#config = normalized.config;
+        this.#renderFrame();
+        this.#observe();
+        const { data, source } = normalized.config;
+        if (data !== undefined) {
+            if (!isRows(data)) {
+                this.#renderUnavailable('chart data is not a list of rows');
+                return;
+            }
+            this.#rows = data;
+            this.#renderPlot();
+            return;
+        }
+        if (source === undefined || source === '') {
+            this.#rows = [];
+            this.#renderPlot();
+            return;
+        }
+        this.#renderStatus('Loading chart data…');
+        void this.#resolveSource(source, generation);
+    }
+    disconnectedCallback() {
+        this.#generation += 1;
+        this.#observer?.disconnect();
+        this.#observer = null;
+    }
+    /** The host bridge resolves `source`; this element never touches the network. */
+    async #resolveSource(source, generation) {
+        const result = await artifactData(source);
+        if (generation !== this.#generation)
+            return;
+        if (result.status !== 'ok') {
+            this.#renderUnavailable(`chart source "${source}" is ${result.status}: ${result.reason}`);
+            return;
+        }
+        if (!isRows(result.data)) {
+            this.#renderUnavailable(`chart source "${source}" is not a list of rows`);
+            return;
+        }
+        this.#rows = result.data;
+        this.#renderPlot();
+    }
+    #observe() {
+        this.#observer?.disconnect();
+        this.#width = this.#plot.getBoundingClientRect().width;
+        const observer = new ResizeObserver((entries) => {
+            const next = entries[0]?.contentRect.width ?? 0;
+            if (Math.abs(this.#width - next) < 0.5)
+                return;
+            this.#width = next;
+            this.#renderPlot();
+        });
+        observer.observe(this.#plot);
+        this.#observer = observer;
+    }
+    #renderUnavailable(reason) {
+        this.#observer?.disconnect();
+        this.#observer = null;
+        const box = document.createElement('div');
+        box.part.add('unavailable');
+        box.setAttribute('role', 'status');
+        const detail = document.createElement('span');
+        detail.part.add('reason');
+        detail.textContent = reason;
+        box.append('Chart unavailable: ', detail);
+        this.#container.replaceChildren(box);
+    }
+    /** Holds the plot's height while a source resolves, so the page does not jump. */
+    #renderStatus(text) {
+        const box = document.createElement('div');
+        box.part.add('status');
+        box.setAttribute('role', 'status');
+        box.style.height = `${HEIGHT}px`;
+        box.textContent = text;
+        this.#plot.replaceChildren(box);
+    }
+    /** Title and legend come from the config alone, so they survive a pending source. */
+    #renderFrame() {
+        const config = this.#config;
+        if (config === null)
+            return;
+        const children = [];
+        const title = config.title?.trim();
+        if (title !== undefined && title.length > 0) {
+            this.#title.textContent = title;
+            children.push(this.#title);
+        }
+        if (config.y.length > 1) {
+            this.#legend.replaceChildren(...config.y.map((definition, index) => {
+                const item = document.createElement('div');
+                item.part.add('legend-item');
+                const swatch = document.createElement('span');
+                swatch.part.add('legend-swatch');
+                swatch.setAttribute('aria-hidden', 'true');
+                swatch.style.background = SERIES_COLORS[index % SERIES_COLORS.length] ?? SERIES_COLORS[0];
+                const label = document.createElement('span');
+                label.part.add('legend-label');
+                label.textContent = definition.label ?? titleCaseHeader(definition.field);
+                item.append(swatch, label);
+                return item;
+            }));
+            children.push(this.#legend);
+        }
+        children.push(this.#plot);
+        this.#container.replaceChildren(...children);
+    }
+    #renderPlot() {
+        const config = this.#config;
+        const rows = this.#rows;
+        if (config === null || rows === null)
+            return;
+        const categories = rows.map((row) => formatCategory(getByPath(row, config.x)));
+        const series = config.y.map((definition, seriesIndex) => {
+            const points = [];
+            rows.forEach((row, index) => {
+                const value = toNumber(getByPath(row, definition.field));
+                if (value !== null)
+                    points.push({ index, value });
+            });
+            return {
+                label: definition.label ?? titleCaseHeader(definition.field),
+                color: SERIES_COLORS[seriesIndex % SERIES_COLORS.length] ?? SERIES_COLORS[0],
+                points,
+            };
+        });
+        // Accumulated rather than spread over `Math.min(...values)`, which blows the call
+        // stack on a dataset of a few hundred thousand points.
+        let plotted = 0;
+        let low = 0;
+        let high = 0;
+        for (const entry of series) {
+            for (const point of entry.points) {
+                if (plotted === 0) {
+                    low = point.value;
+                    high = point.value;
+                }
+                else {
+                    if (point.value < low)
+                        low = point.value;
+                    if (point.value > high)
+                        high = point.value;
+                }
+                plotted += 1;
+            }
+        }
+        // Bars and areas are read against a baseline, so their domain must contain zero.
+        if (config.kind !== 'line') {
+            low = Math.min(low, 0);
+            high = Math.max(high, 0);
+        }
+        if (plotted === 0 || rows.length === 0) {
+            const empty = document.createElement('div');
+            empty.part.add('empty');
+            empty.style.height = `${HEIGHT}px`;
+            empty.textContent = 'No data to chart';
+            this.#plot.replaceChildren(empty);
+            return;
+        }
+        const width = this.#width;
+        if (width <= 0) {
+            // First paint, before the container has been measured: hold the height so
+            // the surrounding document does not reflow when the SVG arrives.
+            const spacer = document.createElement('div');
+            spacer.style.height = `${HEIGHT}px`;
+            this.#plot.replaceChildren(spacer);
+            return;
+        }
+        const { ticks, domainMin, domainMax, step } = niceScale(low, high, Y_TICK_TARGET);
+        const compactTicks = Math.max(...ticks.map((tick) => Math.abs(tick))) >= 10_000;
+        const tickLabels = ticks.map((tick) => formatTick(tick, step, compactTicks));
+        const marginLeft = Math.min(88, Math.max(36, Math.max(...tickLabels.map((label) => label.length)) * 6.4 + 12));
+        const plotWidth = Math.max(0, width - marginLeft - MARGIN_RIGHT);
+        const plotHeight = Math.max(0, HEIGHT - MARGIN_TOP - MARGIN_BOTTOM);
+        const plotBottom = MARGIN_TOP + plotHeight;
+        const band = categories.length > 0 ? plotWidth / categories.length : plotWidth;
+        const xOf = (index) => marginLeft + band * (index + 0.5);
+        const span = domainMax - domainMin || 1;
+        const yOf = (value) => plotBottom - ((value - domainMin) / span) * plotHeight;
+        const baselineValue = Math.min(Math.max(0, domainMin), domainMax);
+        const baselineY = yOf(baselineValue);
+        const svg = svgNode('svg', 'chart');
+        setAttributes(svg, { role: 'img', width, height: HEIGHT, viewBox: `0 0 ${width} ${HEIGHT}` });
+        svg.setAttribute('aria-label', `${config.kind} chart of ${series.map((entry) => entry.label).join(', ')} by ${titleCaseHeader(config.x)}`);
+        ticks.forEach((tick, tickIndex) => {
+            const line = svgNode('line');
+            line.setAttribute('class', 'grid');
+            setAttributes(line, {
+                x1: marginLeft,
+                x2: marginLeft + plotWidth,
+                y1: yOf(tick),
+                y2: yOf(tick),
+                opacity: tick === baselineValue ? 0.9 : 0.45,
+            });
+            const label = svgNode('text');
+            label.setAttribute('class', 'tick');
+            setAttributes(label, {
+                x: marginLeft - 8,
+                y: yOf(tick),
+                'text-anchor': 'end',
+                'dominant-baseline': 'central',
+            });
+            label.textContent = tickLabels[tickIndex] ?? '';
+            svg.append(line, label);
+        });
+        // Label a whole-number stride of categories so the gaps stay even, then pin the
+        // last one — replacing rather than appending when it would crowd its neighbour.
+        const xTickIndices = [];
+        if (categories.length > 0) {
+            const maxTicks = Math.max(2, Math.min(categories.length, Math.floor(plotWidth / X_TICK_SPACING) || 1));
+            const stride = Math.max(1, Math.ceil((categories.length - 1) / (maxTicks - 1)));
+            for (let index = 0; index < categories.length; index += stride)
+                xTickIndices.push(index);
+            const last = xTickIndices[xTickIndices.length - 1] ?? 0;
+            if (last !== categories.length - 1) {
+                if ((categories.length - 1 - last) * band >= X_TICK_SPACING)
+                    xTickIndices.push(categories.length - 1);
+                else
+                    xTickIndices[xTickIndices.length - 1] = categories.length - 1;
+            }
+        }
+        for (const index of xTickIndices) {
+            const text = truncateLabel(categories[index] ?? '');
+            const center = xOf(index);
+            const half = (text.length * LABEL_CHAR_WIDTH) / 2;
+            const anchor = center - half < 0 ? 'start' : center + half > width ? 'end' : 'middle';
+            const label = svgNode('text');
+            label.setAttribute('class', 'tick');
+            setAttributes(label, {
+                x: anchor === 'start' ? 0 : anchor === 'end' ? width : center,
+                y: plotBottom + 16,
+                'text-anchor': anchor,
+                'dominant-baseline': 'hanging',
+            });
+            label.textContent = text;
+            svg.append(label);
+        }
+        if (config.kind === 'bar') {
+            const groupWidth = band * 0.72;
+            const slot = groupWidth / series.length;
+            const barWidth = Math.max(1, slot - (slot > 4 ? 1 : 0));
+            series.forEach((entry, seriesIndex) => {
+                const group = svgNode('g');
+                for (const point of entry.points) {
+                    const y = yOf(point.value);
+                    const bar = svgNode('rect', 'bar');
+                    setAttributes(bar, {
+                        x: xOf(point.index) - groupWidth / 2 + seriesIndex * slot,
+                        y: Math.min(y, baselineY),
+                        width: barWidth,
+                        height: Math.max(1, Math.abs(baselineY - y)),
+                        rx: Math.min(2, barWidth / 3),
+                    });
+                    bar.style.fill = entry.color;
+                    bar.append(tooltip(`${entry.label} · ${categories[point.index] ?? point.index}: ${formatExact(point.value)}`));
+                    group.append(bar);
+                }
+                svg.append(group);
+            });
+        }
+        else {
+            const showDots = categories.length <= 40;
+            for (const entry of series) {
+                const group = svgNode('g');
+                const segments = segmentsOf(entry.points);
+                for (const segment of segments) {
+                    const trace = segment.map((point) => `${xOf(point.index)},${yOf(point.value)}`).join(' L ');
+                    const first = segment[0];
+                    const last = segment[segment.length - 1];
+                    if (config.kind === 'area' && first !== undefined && last !== undefined) {
+                        const area = svgNode('path', 'area');
+                        setAttributes(area, {
+                            d: `M ${xOf(first.index)},${baselineY} L ${trace} L ${xOf(last.index)},${baselineY} Z`,
+                            'fill-opacity': 0.18,
+                        });
+                        area.style.fill = entry.color;
+                        group.append(area);
+                    }
+                    const line = svgNode('path', 'line');
+                    setAttributes(line, {
+                        d: `M ${trace}`,
+                        fill: 'none',
+                        'stroke-width': 2,
+                        'stroke-linecap': 'round',
+                        'stroke-linejoin': 'round',
+                    });
+                    line.style.stroke = entry.color;
+                    group.append(line);
+                    if (!showDots && segment.length > 1)
+                        continue;
+                    for (const point of segment) {
+                        const dot = svgNode('circle', 'point');
+                        setAttributes(dot, { cx: xOf(point.index), cy: yOf(point.value), r: 2.5 });
+                        dot.style.fill = entry.color;
+                        dot.append(tooltip(`${entry.label} · ${categories[point.index] ?? point.index}: ${formatExact(point.value)}`));
+                        group.append(dot);
+                    }
+                }
+                svg.append(group);
+            }
+        }
+        this.#plot.replaceChildren(svg);
+    }
+}
+registerElement('crtr-chart', CrtrChartElement);

package/dist/pages/elements/options.d.ts

@@ -0,0 +1,21 @@
+/**
+ * `<crtr-options>` — the agent asks a multiple-choice question.
+ *
+ * A port of the interaction kit's `agent-options` (Northlight
+ * `apps/gateway/components/agent-ui/agent-options.tsx` @ `3705fe9e2`) onto a dependency-free
+ * custom element, keeping its two load-bearing decisions:
+ *
+ *  - **The control's silhouette tells the truth about how many answers are wanted.**
+ *    Single-select is a radio group, multi-select is checkbox rows, so the element never has
+ *    to say "pick one" in prose.
+ *  - **"This one, but…" is a first-class answer.** Every option carries the comment
+ *    affordance in place, rather than making the user squeeze a caveat into the freetext box
+ *    at the bottom. The affordance is quiet until you reach for it — it reveals on hover, on
+ *    keyboard focus, and on the `j`/`k` cursor — and stays lit once a comment exists, which
+ *    is the whole "there is a note here" signal at a glance.
+ *
+ * Selection is kept in the agent's authored order, never click order, so the response reads
+ * the way the question did. `freetext` is absent rather than empty: the response says whether
+ * the user wrote something, not whether the box existed.
+ */
+export {};