dsh-realtime-audio-ws 0.2.7 → 0.2.9

package/lib/client/bundle.js

@@ -28,7 +28,7 @@ window.__ModuleLoader__.load({ id: "dsh-realtime-audio-ws",
      * 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;
@@ -37,6 +37,7 @@ window.__ModuleLoader__.load({ id: "dsh-realtime-audio-ws",
     exports.defaultDeps = defaultDeps;
     exports.createAudioClient = createAudioClient;
     exports.stripRoot = stripRoot;
+    exports.waitKeys = waitKeys;
     exports.renderStrip = renderStrip;
     exports.mountStrip = mountStrip;
     exports.apply = apply;
@@ -355,6 +356,26 @@ window.__ModuleLoader__.load({ id: "dsh-realtime-audio-ws",
     // ---- 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.
@@ -390,113 +411,470 @@ window.__ModuleLoader__.load({ id: "dsh-realtime-audio-ws",
         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.
@@ -514,6 +892,16 @@ window.__ModuleLoader__.load({ id: "dsh-realtime-audio-ws",
         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.
      *
@@ -526,11 +914,17 @@ window.__ModuleLoader__.load({ id: "dsh-realtime-audio-ws",
     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 {
@@ -543,52 +937,69 @@ window.__ModuleLoader__.load({ id: "dsh-realtime-audio-ws",
             }
             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;
@@ -597,28 +1008,72 @@ window.__ModuleLoader__.load({ id: "dsh-realtime-audio-ws",
                         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.