dsh-realtime-audio-ws 0.2.7 → 0.2.9

package/lib/client/index.js

@@ -24,7 +24,7 @@
  * actually been read, rather than shipping a capture path that a policy might silently kill.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.STRIP_ELEMENT_ID = exports.INJECTED_KEY = exports.GLOBAL_KEY = exports.MAX_BACKLOG_SECONDS = exports.CAPTURE_BUFFER = exports.SAMPLE_RATE = exports.DEFAULT_PATH = exports.inject = exports.name = void 0;
+exports.METER_SEGMENTS = exports.STRIP_MODEL = exports.STRIP_WORDMARK = exports.STRIP_ELEMENT_ID = exports.INJECTED_KEY = exports.GLOBAL_KEY = exports.MAX_BACKLOG_SECONDS = exports.CAPTURE_BUFFER = exports.SAMPLE_RATE = exports.DEFAULT_PATH = exports.inject = exports.name = void 0;
 exports.socketUrl = socketUrl;
 exports.pageAuthority = pageAuthority;
 exports.withToken = withToken;
@@ -33,6 +33,7 @@ exports.float32FromPcm16 = float32FromPcm16;
 exports.defaultDeps = defaultDeps;
 exports.createAudioClient = createAudioClient;
 exports.stripRoot = stripRoot;
+exports.waitKeys = waitKeys;
 exports.renderStrip = renderStrip;
 exports.mountStrip = mountStrip;
 exports.apply = apply;
@@ -351,6 +352,26 @@ function createAudioClient(deps) {
 // ---- the strip: the panel this plugin puts in the app ---------------------------------------------------
 /** The element the injected markup provides. Duplicated in the host half, which mints the row. */
 exports.STRIP_ELEMENT_ID = 'dsh-realtime-strip';
+/** The plate's wordmark and model, engraved. The host half styles the plate; the deck is minted here. */
+exports.STRIP_WORDMARK = 'REALTIME';
+exports.STRIP_MODEL = 'DV-1 · DESK VOICE UNIT';
+/** The segments in the input meter. Its own scale, not a level — see {@link meterMarkup}. */
+exports.METER_SEGMENTS = 14;
+/** The lamp's own word, engraved beside it. */
+const LAMP_WORDS = { live: 'LIVE', connecting: 'LINK', closed: 'CLOSED' };
+/**
+ * Short legends for the controls that sit on the plate.
+ *
+ * A description is not a label: schema prose written to explain a field to a developer is too long to scan
+ * beside a control, and two such sentences about different fields read as one field described twice. The
+ * full prose is one drill level down, where the raw registry rows are.
+ */
+const SHORT_LABELS = {
+    speakMilestones: 'SPEAK STEPS',
+    maxPromptChars: 'PROMPT',
+    maxSpokenMilestones: 'MILESTONES',
+    sessionId: 'SESSION',
+};
 /**
  * Where the injected markup puts the panel, or `null` when this page does not carry it.
  * @param scope - the page scope, injectable so both cases are testable without a DOM.
@@ -386,113 +407,470 @@ function show(value) {
     return typeof value === 'string' ? value : JSON.stringify(value);
 }
 /**
- * Render the whole panel.
+ * A value as a number, for the controls that are numeric.
  *
- * A pure function of the state, because that is what makes the panel testable at all: the injected script
- * is three lines and the DOM is one assignment, so everything worth checking lives here.
- * @param state - what the panel is showing.
- * @returns the markup for the panel's element.
+ * `0` rather than a refusal for anything that is not a number: a number control for a setting that reported
+ * nothing is a control for a setting that will refuse the write, and the registry's own reply is what says
+ * so. Inventing a second refusal here would put two answers behind one refusal.
+ * @param value - a setting's value as `status` reported it.
+ * @returns the value, or `0`.
  */
-function renderStrip(state) {
-    const reply = state.reply;
-    const lines = [`<p data-dsh-strip-voice>${escapeHtml(summariseVoice(reply, state.audio))}</p>`];
-    if (reply !== null)
-        lines.push(`<p data-dsh-strip-route>${escapeHtml(summariseRoute(reply))}</p>`);
-    if (state.notice !== '') {
-        const link = state.noticeLink ?? '';
-        const anchor = link === ''
-            ? ''
-            : ` <a data-dsh-strip-link href="${escapeHtml(link)}" target="_blank"`
-                + ' rel="noreferrer noopener">open ↗</a>';
-        lines.push(`<p data-dsh-strip-notice>${escapeHtml(state.notice)}${anchor}</p>`);
+function asNumber(value) {
+    return typeof value === 'number' ? value : 0;
+}
+/**
+ * A value as a list of strings, when it is one.
+ * @param value - a setting's value as `status` reported it.
+ * @returns the strings, or `undefined` when the value is not an array.
+ */
+function asList(value) {
+    if (!Array.isArray(value))
+        return undefined;
+    return value.filter((item) => typeof item === 'string');
+}
+/**
+ * One live setting of a given kind, by field.
+ *
+ * By `field` and not by `<owner>.<field>` key: which plugin owns a budget is not the panel's business, and
+ * a panel keyed on an owner's name breaks the day the owner is renamed. The same resolution the control
+ * channel's `steer` verb makes, for the same reason.
+ * @param settings - every setting the status reported.
+ * @param field - the setting's own name.
+ * @param kind - the kind the control can drive.
+ * @returns the setting, or `undefined`.
+ */
+function liveField(settings, field, kind) {
+    return settings.find(entry => entry.field === field && entry.kind === kind && entry.scope === 'live');
+}
+/**
+ * The two budgets that each bound how long the voice waits, in the order the panel writes them.
+ *
+ * Measured rather than assumed, and the panel therefore rests on facts: the agent's `delegationTimeoutMs`
+ * (how long the voice model waits for a responder) and the responder's `answerTimeoutMs` (how long one turn
+ * waits for the agent). Both are `live`, so one control that writes both is an affordance the protocol can
+ * honour — and **the smaller bound is what is heard**, in the responder's own words, so `min` is the truth
+ * about what the pair does.
+ *
+ * Zero or one key is a real answer: in a profile with no agent row, or no responder row, the other budget
+ * does not exist to be written.
+ * @param settings - every setting the status reported.
+ * @returns the keys, in the order they are written.
+ */
+function waitKeys(settings) {
+    const keys = [];
+    for (const field of ['delegationTimeoutMs', 'answerTimeoutMs']) {
+        const entry = liveField(settings, field, 'number');
+        if (entry !== undefined)
+            keys.push(entry.key);
     }
-    lines.push(`<p data-dsh-strip-buttons>${buttons(state.audio)}</p>`);
-    // Restart-bound settings are omitted rather than shown read-only: the gate says no control at all, and a
-    // row that cannot be changed is a row a reader will try to change.
-    const settings = (reply?.settings ?? []).filter(entry => entry.scope !== 'restart');
-    lines.push(settings.length === 0
-        ? '<p data-dsh-strip-empty>no settings to show</p>'
-        : `<ul>${settings.map(entry => settingRow(entry, state.notes)).join('')}</ul>`);
-    return lines.join('');
+    return keys;
 }
 /**
- * The voice line: whether a session is live, and what it is.
- * @param reply - the last status, if any.
+ * What the wait control says it wrote, from the pair the registry now reports.
+ *
+ * Never the value that was asked for: a setter may clamp what it was handed, so the answer to "what does
+ * this now do?" is the pair the plugin holds. Reported as a **pair** — a half-applied write has to be
+ * visible as one, and averaging it would hide exactly the state a reader needs to see.
+ * @param settings - every setting the status reported, re-read after the write.
+ * @returns one line for the note.
+ */
+function waitSummary(settings) {
+    const values = waitKeys(settings).map(key => asNumber(settings.find(entry => entry.key === key)?.value));
+    if (values.length === 0)
+        return 'no wait budget is registered';
+    return `waits up to ${String(Math.round(Math.min(...values) / 1000))} s — ${values.map(value => String(value)).join(' / ')} ms`;
+}
+/**
+ * The pilot lamp's state.
+ *
+ * Green live, amber connecting, dark closed — one lamp rather than three words, and the amber is real
+ * rather than decorative: a connect is a promise that settles, and the state it is in while it settles is
+ * the only thing on this plate that changes without a repaint from the status.
+ * @param state - what the panel is showing.
+ * @returns which of the three the lamp reports.
+ */
+function lampState(state) {
+    if (state.connecting)
+        return 'connecting';
+    return state.reply?.voice?.open === true ? 'live' : 'closed';
+}
+/**
+ * The input meter.
+ *
+ * **Not a level.** A real level needs a repaint loop, and repainting this element's `innerHTML` on a timer
+ * would destroy whatever is half-typed in it — the list editor is the case that matters. So the bar encodes
+ * the capture path's *state*, which is the one thing about the microphone that changes without a repaint:
+ * dark when the device is not open, filled when it is, and a fault shown at the top of the scale where the
+ * eye already looks for "something is wrong with the input". The state is named on the element for anyone
+ * who cannot read the colour, and the title says what the bar is so it cannot be mistaken for a peak meter.
  * @param audio - what the microphone is doing.
- * @returns one line of plain text.
+ * @returns the meter's markup.
  */
-function summariseVoice(reply, audio) {
-    const microphone = audio.kind === 'failed' ? `microphone: failed — ${audio.reason}` : `microphone: ${audio.kind}`;
+function meterMarkup(audio) {
+    const live = audio.kind === 'live';
+    const fault = audio.kind === 'failed';
+    const segments = Array.from({ length: exports.METER_SEGMENTS }, (_unused, index) => {
+        if (fault)
+            return index >= exports.METER_SEGMENTS - 2 ? '<i class="dvr-seg on hot"></i>' : '<i class="dvr-seg"></i>';
+        if (!live || index >= 11)
+            return '<i class="dvr-seg"></i>';
+        return `<i class="dvr-seg on${index >= 9 ? ' warm' : ''}"></i>`;
+    }).join('');
+    return `<span class="dvr-meter" data-meter="${audio.kind}" role="img"`
+        + ` aria-label="microphone ${audio.kind}" title="capture state — not a level">`
+        + '<span class="dvr-cap"><span>INPUT</span><span>−12 −6 0</span></span>'
+        + `<span class="dvr-scale">${segments}</span>`
+        + '</span>';
+}
+/**
+ * Where the voice is pointed.
+ *
+ * Three separate states, kept separate: nothing has answered yet, the profile has no agent to answer, and a
+ * session that exists and knows where it points. Collapsing the first two is the mistake this line exists to
+ * avoid — "no agent is mounted" behind a control that has simply not been asked yet sends a reader to the
+ * wrong file.
+ * @param reply - the last status, if any.
+ * @returns one engraved line.
+ */
+function whereText(reply) {
     if (reply === null)
-        return `no answer yet · ${microphone}`;
+        return 'no status yet';
     const voice = reply.voice;
-    // `null` is "nobody answered the question", which is a composition without an agent row — deliberately
-    // not the same statement as a session that is merely closed.
     if (voice === null || voice === undefined)
-        return `voice: no agent is mounted in this profile · ${microphone}`;
-    const where = voice.provider === undefined ? '' : ` · ${voice.provider}/${voice.model ?? '?'}`;
-    const which = voice.sessionId === undefined ? '' : ` · ${voice.sessionId}`;
-    return `voice: ${voice.open ? 'open' : 'closed'}${where}${which} · ${microphone}`;
+        return 'no agent mounted';
+    const model = `${voice.provider ?? '?'}/${voice.model ?? '?'}`;
+    return voice.sessionId === undefined ? model : `${model} · ${voice.sessionId}`;
 }
 /**
- * The route line: what this socket is, and the last thing the journal recorded.
- * @param reply - the last status.
- * @returns one line of plain text.
+ * The knob's pointer position, as one of eleven buckets.
+ *
+ * A readout, not a control: the pointer encodes where the value sits on the knob's own scale, and the field
+ * beside it is what writes. The scale is the panel's, because the registry declares a kind and not a range —
+ * which is exactly why a draggable knob would be a lie about what the panel knows.
+ * @param value - the value in force.
+ * @param span - the panel's own scale for this knob.
+ * @returns a bucket from 0 to 10.
  */
-function summariseRoute(reply) {
-    const last = reply.journal?.last?.kind;
-    return [
-        reply.audio?.path ?? 'the audio route',
-        `${String(reply.audio?.clients ?? 0)} socket(s)`,
-        `journal ${String(reply.journal?.size ?? 0)}`,
-        ...last === undefined ? [] : [`last ${last}`],
-    ].join(' · ');
+function knobBucket(value, span) {
+    const [low, high] = span;
+    const bucket = Math.round(((value - low) / (high - low)) * 10);
+    return Math.min(10, Math.max(0, bucket));
 }
 /**
- * The buttons above the settings.
+ * One knob: the dial, the legend, the value, and the field that writes it.
+ * @param knob - what to draw.
+ * @returns the knob's markup.
+ */
+function knobMarkup(knob) {
+    const key = escapeHtml(knob.key);
+    const caption = knob.caption === undefined ? '' : `<span class="dvr-knob-caption">${escapeHtml(knob.caption)}</span>`;
+    return '<div class="dvr-knob-unit">'
+        + `<span class="dvr-knob dvr-knob--${String(knobBucket(knob.value, knob.span))}"`
+        + ' title="readout — the field below is the control"></span>'
+        + `<span class="dvr-knob-label">${escapeHtml(knob.label)}</span>`
+        + `<span class="dvr-knob-value">${escapeHtml(knob.shown)}</span>`
+        + caption
+        + '<span class="dvr-knob-set">'
+        + `<input class="dvr-input" type="number" data-input="${key}" value="${escapeHtml(String(knob.value))}">`
+        + `<button class="dvr-btn" data-action="${knob.action}" data-key="${key}">Set</button>`
+        + '</span></div>';
+}
+/**
+ * The few controls worth a physical affordance.
  *
- * The microphone's own button is the on-switch this sprint exists to provide: what used to be a
- * `globalThis` call in a devtools console is now the first control in the panel.
- * @param audio - what the microphone is doing.
- * @returns the markup.
+ * One primary for the wait budget rather than the two indistinguishable rows the screenshot showed, and the
+ * mechanism one drill level down where it is reachable without being in the way.
+ * @param settings - every setting the status reported.
+ * @returns the knobs' markup, empty when none of them are registered.
  */
-function buttons(audio) {
-    const live = audio.kind === 'live';
-    return [
-        `<button data-action="${live ? 'disconnect' : 'connect'}">${live ? 'Disconnect microphone' : 'Connect microphone'}</button>`,
-        '<button data-action="voice-start">Start voice</button>',
-        '<button data-action="voice-stop">Stop voice</button>',
-        '<button data-action="refresh">Refresh</button>',
-    ].join(' ');
+function knobsMarkup(settings) {
+    const knobs = [];
+    const waits = waitKeys(settings);
+    if (waits.length > 0) {
+        const values = waits.map(key => asNumber(settings.find(entry => entry.key === key)?.value));
+        const binding = Math.min(...values);
+        // The cap is named only when the two actually diverge, because that is the only case in which one of
+        // them is inert — and an inert control that accepts input and does nothing is the defect this design
+        // exists to remove.
+        const caption = values.length < 2 || values[0] === values[1]
+            ? undefined
+            : `capped by the ${values[0] < values[1] ? 'reply' : 'turn'} budget`;
+        knobs.push(knobMarkup({
+            label: 'WAIT',
+            action: waits.length === 2 ? 'wait' : 'set',
+            key: waits[0],
+            value: binding,
+            shown: `${String(Math.round(binding / 1000))} s`,
+            span: [1000, 120_000],
+            ...caption === undefined ? {} : { caption },
+        }));
+    }
+    const prompt = liveField(settings, 'maxPromptChars', 'number');
+    if (prompt !== undefined) {
+        knobs.push(knobMarkup({
+            label: SHORT_LABELS.maxPromptChars,
+            action: 'set',
+            key: prompt.key,
+            value: asNumber(prompt.value),
+            shown: `${String(asNumber(prompt.value))} ch`,
+            span: [0, 8000],
+        }));
+    }
+    const milestones = liveField(settings, 'maxSpokenMilestones', 'number');
+    if (milestones !== undefined) {
+        knobs.push(knobMarkup({
+            label: SHORT_LABELS.maxSpokenMilestones,
+            action: 'set',
+            key: milestones.key,
+            value: asNumber(milestones.value),
+            shown: String(asNumber(milestones.value)),
+            span: [0, 6],
+        }));
+    }
+    return knobs.join('');
 }
 /**
- * One setting's row.
+ * A switch that is not a setting: it drives a verb.
+ * @param action - the control verb.
+ * @param on - whether the thing it drives is on.
+ * @param label - its legend.
+ * @param colour - the LED's colour when lit.
+ * @returns the switch's markup.
+ */
+function lampSwitch(action, on, label, colour) {
+    const lit = on ? ` on ${colour}` : '';
+    return `<button class="dvr-switch" data-action="${action}" aria-pressed="${String(on)}">`
+        + `<i class="dvr-led${lit}"></i><span>${label}</span></button>`;
+}
+/**
+ * A boolean setting as a toggle.
  *
- * Three classes, three treatments, and the gate's rule is the reason: a live field gets a control, a
- * session-bound field says what it would take to change it, and a restart-bound field is not rendered.
- * @param entry - the setting as `status` reported it.
- * @param notes - what the last change to each setting produced.
- * @returns the markup for one row.
+ * A toggle and not a text box holding `true`: typing `false` into a field is a coercion the user has to get
+ * right, and a toggle cannot be got wrong. The value it writes is carried on the button, so the flip is
+ * decided against the value the panel was rendered with rather than a second read of the page.
+ * @param entry - the setting.
+ * @returns the toggle's markup.
  */
-function settingRow(entry, notes) {
+function booleanSwitch(entry) {
     const key = escapeHtml(entry.key);
-    const label = `<span data-dsh-strip-label>${escapeHtml(entry.describe ?? entry.field)}</span>`;
-    const note = notes[entry.key] === undefined
-        ? ''
-        : `<em data-note="${key}">${escapeHtml(notes[entry.key])}</em>`;
-    if (entry.scope !== 'live') {
-        return `<li data-key="${key}" data-scope="session">${label}<b>${escapeHtml(show(entry.value))}</b>`
-            + `<em>fixed when the session opens — reconnect to apply</em>${note}</li>`;
-    }
-    // The channel has a verb for exactly one purpose — steering at a session — and this is the field it
-    // means. Everything else goes through `set <key>=<value>`.
+    const on = entry.value === true;
+    return `<button class="dvr-switch" data-action="toggle" data-key="${key}"`
+        + ` data-value="${on ? 'false' : 'true'}" aria-pressed="${String(on)}">`
+        + `<i class="dvr-led${on ? ' on' : ''}"></i>`
+        + `<span>${escapeHtml(SHORT_LABELS[entry.field] ?? entry.field)}</span>`
+        + `<b class="dvr-switch-state">${on ? 'ON' : 'OFF'}</b></button>`;
+}
+/**
+ * The switches row: the microphone, the session, and every live boolean.
+ *
+ * The microphone and the session switches are controls in their own right, so they appear at both levels.
+ * A *setting* boolean does not: the deepest level gives every setting its own control, so carrying the
+ * switch there as well would put one setting behind two toggles on one screen — the same defect as two rows
+ * that read identically, in miniature.
+ * @param state - what the panel is showing.
+ * @param settings - every setting the status reported.
+ * @returns the row's markup.
+ */
+function switchesMarkup(state, settings) {
+    const voice = state.reply?.voice;
+    const open = voice !== null && voice !== undefined && voice.open;
+    const boolean = state.level === 'controls' ? liveField(settings, 'speakMilestones', 'boolean') : undefined;
+    return '<div class="dvr-switches">'
+        + lampSwitch(state.audio.kind === 'live' ? 'disconnect' : 'connect', state.audio.kind === 'live', 'MIC', 'green')
+        + lampSwitch(open ? 'voice-stop' : 'voice-start', open, 'VOICE', 'green')
+        + (boolean === undefined ? '' : booleanSwitch(boolean))
+        + '</div>';
+}
+/**
+ * The tabs that switch between the two drill levels inside the panel.
+ * @param level - the level showing.
+ * @returns the tabs' markup.
+ */
+function tabsMarkup(level) {
+    const tab = (target, label) => `<button class="dvr-tab${level === target ? ' active' : ''}" data-action="level" data-level="${target}">${label}</button>`;
+    return `<div class="dvr-tabs">${tab('controls', 'CONTROLS')}${tab('all', 'ALL SETTINGS')}</div>`;
+}
+/**
+ * A list as a real editor: every entry visible, each removable, and one field to add.
+ *
+ * Not a comma-separated string in a text box — that is a serialisation format leaked into the UI, and one
+ * stray space silently changes the value. The wire format is JSON and only JSON (a list of secrets cannot be
+ * split on a comma), so the editor builds the array and sends it whole.
+ *
+ * When the plugin **does not report** the value — a write-only list — the note says so, because an editor
+ * showing an empty list would otherwise read as "the list is empty" rather than "the list is not readable".
+ * @param entry - the setting.
+ * @param state - what the panel is showing, for the entries the editor has built.
+ * @returns the editor's markup.
+ */
+function listEditor(entry, state) {
+    const key = escapeHtml(entry.key);
+    const reported = asList(entry.value);
+    const entries = reported ?? state.drafts[entry.key] ?? [];
+    const rows = entries.map((item, index) => `<li class="dvr-entry"><span class="dvr-entry-value">${escapeHtml(item)}</span>`
+        + `<button class="dvr-remove" data-action="list-remove" data-key="${key}"`
+        + ` data-index="${String(index)}">✕</button></li>`).join('');
+    return `<ul class="dvr-list">${rows}</ul>`
+        + (reported === undefined
+            ? '<em class="dvr-write-only">the plugin does not report this value — this list replaces whatever is set</em>'
+            : '')
+        + `<input class="dvr-input dvr-input--wide" data-input="${key}" value="">`
+        + `<button class="dvr-btn" data-action="list-add" data-key="${key}">Add</button>`;
+}
+/**
+ * The control a live setting gets, which is decided by its kind rather than by its description.
+ * @param entry - the setting.
+ * @param state - what the panel is showing, for a list editor's own entries.
+ * @returns the control's markup.
+ */
+function liveControl(entry, state) {
+    const key = escapeHtml(entry.key);
+    if (entry.kind === 'boolean')
+        return booleanSwitch(entry);
+    if (entry.kind === 'string-list')
+        return listEditor(entry, state);
+    // The channel has a verb for exactly one purpose — steering at a session — and this is the field it means.
+    // Everything else goes through `set <key>=<value>`.
     const action = entry.field === 'sessionId' && entry.kind === 'string' ? 'steer' : 'set';
     const control = entry.choices !== undefined && entry.choices.length > 0
-        ? `<select data-input="${key}">${choiceOptions(entry, entry.choices)}</select>`
-        : `<input data-input="${key}" value="${escapeHtml(show(entry.value))}">`;
-    const name = action === 'steer' ? 'Steer' : 'Set';
-    return `<li data-key="${key}" data-scope="live">${label}${control}`
-        + `<button data-action="${action}" data-key="${key}">${name}</button>${note}</li>`;
+        ? `<select class="dvr-select" data-input="${key}">${choiceOptions(entry, entry.choices)}</select>`
+        : `<input class="dvr-input dvr-input--wide" data-input="${key}" value="${escapeHtml(show(entry.value))}">`;
+    return control + `<button class="dvr-btn" data-action="${action}" data-key="${key}">${action === 'steer' ? 'Steer' : 'Set'}</button>`;
+}
+/**
+ * One registry row, as the deepest drill level shows it: the key, what the owner says it does, and the
+ * control its kind asks for.
+ * @param entry - the setting.
+ * @param state - what the panel is showing.
+ * @returns the row's markup.
+ */
+function settingRow(entry, state) {
+    const key = escapeHtml(entry.key);
+    const head = `<span class="dvr-skey">${key}</span>`;
+    const describe = entry.describe === undefined ? '' : `<span class="dvr-sdesc">${escapeHtml(entry.describe)}</span>`;
+    const noted = state.notes[entry.key];
+    const note = noted === undefined ? '' : `<em class="dvr-note" data-note="${key}">${escapeHtml(noted)}</em>`;
+    if (entry.scope !== 'live') {
+        // Session-bound: the change exists, it just costs a reconnect, and saying so is the gate's second class.
+        return `<div class="dvr-srow" data-key="${key}" data-scope="session">${head}${describe}`
+            + `<b>${escapeHtml(show(entry.value))}</b>`
+            + '<em class="dvr-fixed">fixed when the session opens — reconnect to apply</em>'
+            + note
+            + '</div>';
+    }
+    return `<div class="dvr-srow" data-key="${key}" data-scope="live">${head}${describe}`
+        + liveControl(entry, state) + note + '</div>';
+}
+/**
+ * The raw registry rows.
+ *
+ * Developer detail the panel used to carry — the journal's size, the socket count, the last event name — is
+ * **not** here. It belongs to `voice_journal` and `voice_diagnose`, which already expose it; a surface
+ * carrying it reads as a log excerpt with buttons under it, which is what "maximally expanded with every
+ * field visible" actually described. The test for what belongs: which of these would a reader *act* on?
+ * @param state - what the panel is showing.
+ * @param settings - every setting the status reported.
+ * @returns the rows' markup.
+ */
+function rowsMarkup(state, settings) {
+    // Restart-bound settings get no row at all. The control-plane gate says no affordance the protocol cannot
+    // honour, and a row that cannot be changed is a row a reader will try to change.
+    const rows = settings.filter(entry => entry.scope !== 'restart');
+    if (rows.length === 0)
+        return '<p class="dvr-empty">no settings to show</p>';
+    return rows.map(entry => settingRow(entry, state)).join('');
+}
+/**
+ * The panel: the drill-through's contents, one level at a time.
+ *
+ * The knobs and the raw rows are never on screen together. That is not layout taste — both name their inputs
+ * by the setting's key, and two inputs under one name would make the panel read whichever came first in the
+ * document, so a control would write a value nobody typed.
+ * @param state - what the panel is showing.
+ * @param settings - every setting the status reported.
+ * @returns the panel's markup.
+ */
+function panelMarkup(state, settings) {
+    const knobs = state.level === 'controls' ? knobsMarkup(settings) : '';
+    return '<div class="dvr-panel">'
+        + (knobs === '' ? '' : `<div class="dvr-knobs">${knobs}</div>`)
+        + switchesMarkup(state, settings)
+        + tabsMarkup(state.level)
+        + (state.level === 'all' ? rowsMarkup(state, settings) : '')
+        + '</div>';
+}
+/**
+ * The 1U plate: state, not settings.
+ * @param state - what the panel is showing.
+ * @returns the deck's markup.
+ */
+function deckMarkup(state) {
+    const lamp = lampState(state);
+    const collapsed = state.level === 'collapsed';
+    const micOn = state.audio.kind === 'live';
+    return '<div class="dvr-row">'
+        + '<span class="dvr-screw"></span>'
+        + '<span class="dvr-brand">'
+        + `<b class="dvr-name">${exports.STRIP_WORDMARK}</b><i class="dvr-model">${exports.STRIP_MODEL}</i>`
+        + '</span>'
+        + '<span class="dvr-rule"></span>'
+        + `<span class="dvr-jewel" data-lamp="${lamp}" title="session: ${lamp}">`
+        + `<i class="dvr-lamp"></i><i class="dvr-jewel-label">${LAMP_WORDS[lamp]}</i></span>`
+        + meterMarkup(state.audio)
+        + `<span class="dvr-where">${escapeHtml(whereText(state.reply))}</span>`
+        + '<span class="dvr-spacer"></span>'
+        + `<button class="dvr-btn${micOn ? ' on' : ''}" data-action="${micOn ? 'disconnect' : 'connect'}">MIC</button>`
+        + '<button class="dvr-btn" data-action="level"'
+        + ` data-level="${collapsed ? 'controls' : 'collapsed'}">SETTINGS ${collapsed ? '⌃' : '⌄'}</button>`
+        + '<span class="dvr-screw"></span>'
+        + '</div>';
+}
+/**
+ * The microphone's own failure, said in words rather than implied by a lamp.
+ * @param audio - what the microphone is doing.
+ * @returns the line's markup, empty when there is nothing wrong.
+ */
+function faultMarkup(audio) {
+    return audio.kind === 'failed' ? `<p class="dvr-fault">microphone: ${escapeHtml(audio.reason)}</p>` : '';
+}
+/**
+ * The notice, and the page it points at when it points anywhere.
+ * @param state - what the panel is showing.
+ * @returns the line's markup, empty when there is nothing to say.
+ */
+function noticeMarkup(state) {
+    if (state.notice === '')
+        return '';
+    const link = state.noticeLink ?? '';
+    const anchor = link === ''
+        ? ''
+        : ` <a href="${escapeHtml(link)}" target="_blank" rel="noreferrer noopener">open ↗</a>`;
+    return `<p class="dvr-notice" data-dsh-strip-notice>${escapeHtml(state.notice)}${anchor}</p>`;
+}
+/**
+ * Render the whole panel.
+ *
+ * A pure function of the state, because that is what makes the panel testable at all: the injected script
+ * is three lines and the DOM is one assignment, so everything worth checking lives here.
+ *
+ * The order is the panel's own geometry: the drill-through grows **upward** from the plate, so it comes
+ * first in the document and the deck stays pinned to the bottom of the page.
+ * @param state - what the panel is showing.
+ * @returns the markup for the panel's element.
+ */
+function renderStrip(state) {
+    const settings = state.reply?.settings ?? [];
+    const parts = [];
+    if (state.level !== 'collapsed')
+        parts.push(panelMarkup(state, settings));
+    parts.push(deckMarkup(state));
+    const fault = faultMarkup(state.audio);
+    if (fault !== '')
+        parts.push(fault);
+    const notice = noticeMarkup(state);
+    if (notice !== '')
+        parts.push(notice);
+    return parts.join('');
 }
 /**
  * A picker's options, with the value in force always among them.
@@ -510,6 +888,16 @@ function choiceOptions(entry, candidates) {
     const all = candidates.includes(current) ? candidates : [current, ...candidates];
     return all.map(choice => `<option value="${escapeHtml(choice)}"${choice === current ? ' selected' : ''}>${escapeHtml(choice)}</option>`).join('');
 }
+/**
+ * Read a click's level, refusing anything that is not one.
+ * @param raw - the `data-level` the button carried.
+ * @returns the level it names.
+ */
+function asLevel(raw) {
+    if (raw === 'controls' || raw === 'all')
+        return raw;
+    return 'collapsed';
+}
 /**
  * Mount the panel on its element.
  *
@@ -522,11 +910,17 @@ function choiceOptions(entry, candidates) {
 function mountStrip(deps) {
     let reply = null;
     const notes = {};
+    const drafts = {};
     let notice = '';
     /** The page the current notice points at, or empty. Set only where a refusal carried one. */
     let noticeLink = '';
+    let level = 'collapsed';
+    let connecting = false;
+    const settings = () => reply?.settings ?? [];
     const paint = () => {
-        deps.root.innerHTML = renderStrip({ reply, notes, notice, noticeLink, audio: deps.audio() });
+        deps.root.innerHTML = renderStrip({
+            reply, notes, drafts, notice, noticeLink, audio: deps.audio(), level, connecting,
+        });
     };
     const refresh = async () => {
         try {
@@ -539,52 +933,69 @@ function mountStrip(deps) {
         }
         paint();
     };
+    /** One list as the editor holds it: what the plugin reported, else what the editor has built. */
+    const listAt = (key) => asList(settings().find(entry => entry.key === key)?.value) ?? drafts[key] ?? [];
     /**
-     * Send one frame and report what came back, then re-render.
-     * @param frame - the control frame.
+     * Send one intent and report what came back, then re-render.
+     *
+     * An intent can be more than one frame: the wait control writes two budgets, and the pair is reported as
+     * a pair. The first refusal stops the sequence — a half-applied pair is a state to *see*, not one to keep
+     * writing past.
+     * @param frames - the control frames, in order.
      * @param fieldKey - the setting the change was about, when it was about one.
-     * @param done - what to say when it worked.
+     * @param done - what to say when every frame was applied.
+     * @returns the refusal it stopped on, or `undefined` when every frame was applied. Returned rather than
+     *   only recorded because one caller — the wait pair — has something better to say than "applied", and a
+     *   line written from a re-read must not overwrite a refusal.
      */
-    const send = async (frame, fieldKey, done) => {
-        let line;
+    const send = async (frames, fieldKey, done) => {
+        let refusal;
         try {
-            const answer = await deps.request(frame);
-            // A refusal carries the reason written to be relayed verbatim, so it is relayed rather than
-            // translated — including for a field frozen by its class. A **session** refusal nests its own classified
-            // code, remedy and page and leaves the control-level `reason` unset, so reading only that answered the
-            // failure a user is most likely to meet with "refused: no reason given" — a panel saying nothing at the
-            // exact moment it knows what to do.
-            const refusal = answer.refusal;
-            if (!answer.ok && refusal !== undefined) {
-                noticeLink = refusal.link ?? '';
-                line = `${refusal.code ?? refusal.class ?? 'refused'}: ${refusal.remedy ?? 'no reason given'}`;
-            }
-            else {
+            for (const frame of frames) {
+                const answer = await deps.request(frame);
+                if (!answer.ok) {
+                    // A refusal carries the reason written to be relayed verbatim, so it is relayed rather than
+                    // translated — including for a field frozen by its class. A **session** refusal nests its own
+                    // classified code, remedy and page and leaves the control-level `reason` unset, so reading only
+                    // that answered the failure a user is most likely to meet with "refused: no reason given" — a
+                    // panel saying nothing at the exact moment it knows what to do.
+                    refusal = answer.refusal === undefined
+                        ? `${answer.code ?? 'refused'}: ${answer.reason ?? 'no reason given'}`
+                        : `${answer.refusal.code ?? answer.refusal.class ?? 'refused'}: ${answer.refusal.remedy ?? 'no reason given'}`;
+                    noticeLink = answer.refusal?.link ?? '';
+                    break;
+                }
                 noticeLink = '';
-                line = answer.ok ? done : `${answer.code ?? 'refused'}: ${answer.reason ?? 'no reason given'}`;
             }
         }
         catch (error) {
-            line = error instanceof Error ? error.message : String(error);
+            refusal = error instanceof Error ? error.message : String(error);
         }
+        const line = refusal ?? done;
         if (fieldKey === undefined)
             notice = line;
         else
             notes[fieldKey] = line;
         await refresh();
+        return refusal;
     };
     const onClick = (event) => {
         const action = event.target?.dataset?.action;
         if (action === undefined)
             return;
         const key = event.target?.dataset?.key;
-        const value = key === undefined ? undefined : deps.root.querySelector(`[data-input="${key}"]`)?.value;
+        const value = event.target?.dataset?.value
+            ?? (key === undefined ? undefined : deps.root.querySelector(`[data-input="${key}"]`)?.value);
         const act = async () => {
             // Cleared per action: a notice from the last one is about the last one, and leaving it up would make
             // a successful reconnect read as a failed one.
             notice = '';
             noticeLink = '';
             switch (action) {
+                case 'level':
+                    level = asLevel(event.target?.dataset?.level);
+                    paint();
+                    return;
                 case 'refresh':
                     await refresh();
                     return;
@@ -593,28 +1004,72 @@ function mountStrip(deps) {
                     await refresh();
                     return;
                 case 'connect': {
+                    // The lamp goes amber for the length of the connect, which is the only thing on this plate that
+                    // moves without the status having moved.
+                    connecting = true;
+                    paint();
                     const reached = await deps.connect();
+                    connecting = false;
                     if (reached.kind === 'failed')
                         notice = reached.reason;
                     await refresh();
                     return;
                 }
                 case 'voice-start':
-                    await send('start', undefined, 'voice started');
+                    await send(['start'], undefined, 'voice started');
                     return;
                 case 'voice-stop':
-                    await send('stop', undefined, 'voice stopped');
+                    await send(['stop'], undefined, 'voice stopped');
+                    return;
+                case 'toggle':
+                    await send([`set ${key ?? ''}=${value ?? ''}`], key, `${value ?? ''}`);
                     return;
+                case 'wait': {
+                    const keys = waitKeys(settings());
+                    if (keys.length === 0)
+                        return;
+                    const stopped = await send(keys.map(name => `set ${name}=${value ?? ''}`), keys[0], 'applied');
+                    // The note is what the registry now says, not what was asked for: a setter may clamp, and a pair
+                    // that half-applied has to be visible as a pair. Only when the write went through, because a
+                    // refusal is a better answer than any value.
+                    if (stopped === undefined) {
+                        notes[keys[0]] = waitSummary(settings());
+                        paint();
+                    }
+                    return;
+                }
+                case 'list-add': {
+                    if (key === undefined)
+                        return;
+                    const next = [...listAt(key), value ?? ''];
+                    drafts[key] = next;
+                    await send([`set ${key}=${JSON.stringify(next)}`], key, `${String(next.length)} in the list`);
+                    return;
+                }
+                case 'list-remove': {
+                    if (key === undefined)
+                        return;
+                    // A click that named no index is a click from something the panel did not render. It removes
+                    // nothing rather than defaulting to the first entry, which is what `Number(undefined)` would do.
+                    const index = event.target?.dataset?.index;
+                    const next = listAt(key).filter((_item, at) => at !== (index === undefined ? -1 : Number(index)));
+                    drafts[key] = next;
+                    await send([`set ${key}=${JSON.stringify(next)}`], key, `${String(next.length)} in the list`);
+                    return;
+                }
                 case 'steer':
-                    await send(`steer ${value ?? ''}`, key, 'steered');
+                    await send([`steer ${value ?? ''}`], key, 'steered');
                     return;
-                case 'set': await send(`set ${key ?? ''}=${value ?? ''}`, key, 'applied');
+                case 'set': await send([`set ${key ?? ''}=${value ?? ''}`], key, 'applied');
             }
         };
         void act();
     };
     deps.root.addEventListener('click', onClick);
-    return { refresh, state: () => ({ reply, notes, notice, noticeLink, audio: deps.audio() }) };
+    return {
+        refresh,
+        state: () => ({ reply, notes, drafts, notice, noticeLink, audio: deps.audio(), level, connecting }),
+    };
 }
 /**
  * The client plugin. Publishes the client and the strip on a global, and releases them with the plugin.