cli-jaw 2.17.41 → 2.17.42

package/public/manager/src/code/code.css

@@ -298,9 +298,77 @@
     min-height: 0;
     height: 100%;
     overflow: hidden;
+    /* Contains the toast stack: a stacking context, not just a positioning
+       origin, so the notice cannot paint over the mobile drawer or its scrim,
+       which sit at z-index 21 and 20 on the window. */
+    position: relative;
+    z-index: 0;
+}
+
+/* Notices sit over the transcript, not over the workspace header. The host is a
+   zero-height flow element placed directly above the transcript, so "top" means
+   the top of the conversation rather than the top of the pane; absolute
+   positioning from the pane would land the card inside the header band and
+   swallow clicks meant for the workspace picker. The host ignores pointer
+   events so it never blocks the text underneath; the cards take them back. */
+.code-toast-host {
+    position: relative;
+    z-index: 3;
+    height: 0;
+    overflow: visible;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    margin: 0 auto;
+    max-width: min(560px, calc(100% - 32px));
+    pointer-events: none;
+}
+.code-toast-region { display: flex; flex-direction: column; gap: 8px; align-items: center; }
+/* An empty live region has to stay in the DOM to be observed when content
+   arrives, but it should not reserve layout while it holds nothing. */
+.code-toast-region:empty { display: none; }
+.code-toast-region:not(:empty) { margin-top: 12px; }
+.code-toast {
+    pointer-events: auto;
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    padding: 8px 10px;
+    border-radius: 10px;
+    border: 1px solid var(--border-subtle);
+    background: var(--bg-panel);
+    box-shadow: 0 6px 20px rgb(0 0 0 / 28%);
+    font-size: 12px;
+    line-height: 1.35;
+    color: var(--text-primary);
+    animation: code-toast-enter 0.2s cubic-bezier(0.77, 0, 0.175, 1);
+}
+.code-toast-message { min-width: 0; overflow-wrap: anywhere; }
+.code-toast-dismiss {
+    flex-shrink: 0;
+    min-width: 20px;
+    min-height: 20px;
+    padding: 0;
+    border: 0;
+    border-radius: 5px;
+    background: transparent;
+    color: var(--text-dim);
+    cursor: pointer;
+    line-height: 1;
+}
+.code-toast-dismiss:hover { background: var(--bg-raised); color: var(--text-primary); }
+.code-toast-warning { border-color: color-mix(in srgb, var(--status-warn) 48%, var(--border-subtle)); }
+.code-toast-error { border-color: color-mix(in srgb, var(--status-error) 52%, var(--border-subtle)); }
+@keyframes code-toast-enter {
+    from { opacity: 0; transform: translateY(-6px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+@media (prefers-reduced-motion: reduce) {
+    .code-toast { animation: none; }
 }
 
-/* Session header (title + context meter + plan) */
+/* Session header (title + plan) */
 .code-session-header {
     display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
     padding: 6px 16px;
@@ -309,19 +377,37 @@
     font-size: 11px;
 }
 .code-session-title { font-weight: 600; color: var(--text-primary); }
-.code-context-meter {
-    width: 80px; height: 6px;
-    background: var(--bg-raised);
-    border-radius: 3px;
-    overflow: hidden;
-    display: inline-block;
-}
-.code-context-bar {
-    display: block; height: 100%;
-    background: var(--accent);
-    border-radius: 3px;
-    transition: width 0.3s ease;
-}
+/* Context usage sits in the composer footer, next to the model it belongs to.
+   The ring appears only when the runtime reported a window: a proportion of an
+   unknown total is not a proportion. */
+.code-context-usage { position: relative; display: inline-flex; align-items: center; }
+.code-context-trigger {
+    display: inline-flex; align-items: center; gap: 4px;
+    height: 28px; padding: 0 8px;
+    border: 1px solid transparent; border-radius: 8px;
+    background: transparent; color: var(--text-secondary);
+    font-size: 11px; font-variant-numeric: tabular-nums; cursor: pointer;
+}
+.code-context-trigger:hover, .code-context-trigger:focus-visible { background: var(--bg-raised); color: var(--text-primary); }
+.code-context-ring { width: 16px; height: 16px; transform: rotate(-90deg); flex-shrink: 0; }
+.code-context-ring-track { fill: none; stroke: var(--border-subtle); stroke-width: 2.5; }
+.code-context-ring-fill { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; }
+.code-context-trigger.is-high .code-context-ring-fill { stroke: var(--status-warn); }
+.code-context-trigger.is-critical .code-context-ring-fill { stroke: var(--status-error); }
+.code-context-trigger.is-critical .code-context-value { color: var(--status-error); }
+.code-context-detail {
+    position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
+    z-index: 4; min-width: 180px; padding: 8px 10px;
+    border: 1px solid var(--border-subtle); border-radius: 10px;
+    background: var(--bg-panel); box-shadow: 0 6px 20px rgb(0 0 0 / 28%);
+    font-size: 11px; color: var(--text-secondary);
+}
+.code-context-detail-total { margin: 0 0 4px; color: var(--text-primary); font-weight: 650; }
+.code-context-detail-note { margin: 0 0 6px; }
+.code-context-breakdown { display: grid; gap: 2px; margin: 0; }
+.code-context-breakdown > div { display: flex; justify-content: space-between; gap: 12px; }
+.code-context-breakdown dt, .code-context-breakdown dd { margin: 0; }
+.code-context-breakdown dd { font-variant-numeric: tabular-nums; color: var(--text-primary); }
 .code-plan-entries { display: flex; gap: 8px; flex-wrap: wrap; }
 .code-plan-entry { font-size: 10px; color: var(--text-secondary); }
 .code-plan-completed { color: var(--status-success); }
@@ -382,8 +468,25 @@
     color: var(--text-secondary);
     margin-bottom: 4px; display: block;
 }
-.code-message-user .code-message-role { color: var(--text-primary); }
 .code-message-assistant .code-message-role { color: var(--status-success); }
+
+/*
+ * The user's own text is the one thing on this surface they wrote themselves,
+ * so it gets a right-aligned bubble and the assistant keeps the full column as
+ * plain prose. Asymmetry does the role separation that a repeated label
+ * otherwise has to do in words.
+ */
+.code-message-user { display: flex; flex-direction: column; align-items: flex-end; }
+.code-message-user .code-message-role { color: var(--text-dim); }
+.code-message-user .code-message-text {
+    max-width: min(78%, 36rem);
+    padding: 10px 14px;
+    border: 1px solid var(--border-subtle);
+    border-radius: 12px 12px 4px 12px;
+    background: var(--bg-raised);
+}
+/* A prompt the server has not echoed yet is dimmed, never hidden. */
+.code-message-user.is-unsent .code-message-text { opacity: 0.72; border-style: dashed; }
 .code-message-text {
     font-size: 13px; line-height: 1.6; color: var(--text-primary);
 }
@@ -494,6 +597,18 @@
 }
 
 .code-session-attention { grid-column: 1 / -1; color: var(--text-secondary); font-size: 10px; }
+.code-session-attention-approvals { color: var(--status-warn); font-weight: 650; }
+/* The uneventful cases stay readable to assistive technology and out of the
+   way visually. A label on every row is a label on no row, and it costs the
+   one session that is actually waiting its visibility. */
+.code-session-attention[data-quiet], .code-session-status[data-quiet] {
+    position: absolute;
+    width: 1px; height: 1px;
+    margin: -1px; padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+}
 .code-session-row { margin-bottom: 6px; }
 .code-session-actions { font-size: 11px; color: var(--text-secondary); margin: 0 8px; }
 .code-session-actions summary { cursor: pointer; min-height: 24px; }

package/public/manager/src/code/context-usage.ts

@@ -0,0 +1,74 @@
+import type { CodeContextUsage } from '../../../../src/code-mode/wire';
+
+/**
+ * How much of the model's context the conversation is using.
+ *
+ * The runtime may report a token count without a window, or nothing at all, so
+ * there are three answers and not one. A missing window is not an unlimited
+ * one and a missing count is not zero, which is why neither collapses into a
+ * number the reader would take as measured.
+ */
+export type ContextUsageView =
+    | { state: 'hidden' }
+    | { state: 'counted'; usedTokens: number }
+    | { state: 'measured'; usedTokens: number; maxTokens: number; percent: number; over: boolean };
+
+export function contextUsageView(usage: CodeContextUsage | undefined): ContextUsageView {
+    if (!usage || !Number.isFinite(usage.totalTokens) || usage.totalTokens < 0) return { state: 'hidden' };
+    const max = usage.modelContextWindow;
+    if (max === null || !Number.isFinite(max) || max <= 0) return { state: 'counted', usedTokens: usage.totalTokens };
+    // A count past the window is possible -- a model change moves the window
+    // under a conversation that is already large. The ring cannot draw past
+    // full, so the percentage is capped for the ring's sake, but the fact that
+    // it was capped is carried rather than hidden: a label reading "100% used,
+    // 533k of 258k" is self-contradictory, and quietly capping is how a wrong
+    // number would look exactly like a full context.
+    const raw = Math.round((usage.totalTokens / max) * 100);
+    return { state: 'measured', usedTokens: usage.totalTokens, maxTokens: max,
+        percent: Math.min(100, raw), over: raw > 100 };
+}
+
+/**
+ * Rounded to keep the control narrow. Each unit is chosen after its own
+ * rounding: 999,999 in thousands rounds to 1000, which is a four-digit "k"
+ * that should have been "1.0M", and 999.5 rounds to 1000, which is not the
+ * bare small number that branch is for.
+ */
+function scaled(value: number, divisor: number): string {
+    const n = value / divisor;
+    return n < 10 ? n.toFixed(1) : String(Math.round(n));
+}
+export function formatTokens(value: number): string {
+    if (!Number.isFinite(value) || value < 0) return '—';
+    const rounded = Math.round(value);
+    if (rounded < 1000) return String(rounded);
+    const thousands = scaled(rounded, 1000);
+    return Number(thousands) < 1000 ? `${thousands}k` : `${scaled(rounded, 1_000_000)}M`;
+}
+
+/** The count itself, grouped. The rounded form cannot be reconstructed into it. */
+export function formatExactTokens(value: number | null): string {
+    return value === null || !Number.isFinite(value) || value < 0 ? '—' : value.toLocaleString('en-US');
+}
+
+/** An unreported part of the breakdown reads as absent, never as zero. */
+export function formatOptionalTokens(value: number | null): string {
+    return value === null ? '—' : formatTokens(value);
+}
+
+/**
+ * Thresholds are about when to start paying attention, so they are named rather
+ * than left as bare numbers at the call site.
+ */
+export function contextUsageLevel(percent: number): 'normal' | 'high' | 'critical' {
+    if (percent >= 90) return 'critical';
+    if (percent >= 75) return 'high';
+    return 'normal';
+}
+
+export function contextUsageLabel(view: ContextUsageView): string {
+    if (view.state === 'hidden') return '';
+    if (view.state === 'counted') return `Context: ${formatTokens(view.usedTokens)} tokens used, window unknown`;
+    if (view.over) return `Context: over the window, ${formatTokens(view.usedTokens)} of ${formatTokens(view.maxTokens)} tokens`;
+    return `Context: ${view.percent}% used, ${formatTokens(view.usedTokens)} of ${formatTokens(view.maxTokens)} tokens`;
+}

package/public/manager/src/code/pending-user-item.ts

@@ -0,0 +1,46 @@
+import type { CodeItem } from '../../../../src/code-mode/wire';
+import type { CodeDraft } from './code-controller-drafts';
+
+/**
+ * A submitted prompt used to vanish between Send and the server's echo.
+ *
+ * The server does emit a `user_message` as soon as it accepts a turn, but that
+ * arrives after an HTTP round trip and an SSE hop, and when acceptance is
+ * unknown it may never arrive at all. Until then the transcript showed nothing,
+ * so the text the user just wrote was simply gone from the screen.
+ *
+ * This is derived at read time rather than pushed into the session reducer:
+ * that reducer applies strictly sequence-ordered server events, and inserting a
+ * client-invented item would desynchronize its cursor. `clientTurnKey` is the
+ * join key, so the real item replaces this one the moment it lands.
+ */
+export const PENDING_USER_ITEM_ID = 'pending:user';
+
+export function pendingUserItem(draft: CodeDraft, items: CodeItem[], now = Date.now()): CodeItem | null {
+    const retry = draft.retry;
+    if (!retry) return null;
+    // The authoritative item is here: show that one instead.
+    if (items.some(item => item.kind === 'user_message' && item.clientTurnKey === retry.key)) return null;
+    const unknown = draft.operation.kind === 'unknown-send';
+    return {
+        itemId: PENDING_USER_ITEM_ID,
+        turnId: null,
+        kind: 'user_message',
+        // An unconfirmed send is not a failure and must not read as one; it is
+        // still pending until the user retries or the echo arrives.
+        status: 'pending',
+        text: retry.text,
+        clientTurnKey: retry.key,
+        // Sorting is by firstSequence, so a large value keeps this last.
+        firstSequence: Number.MAX_SAFE_INTEGER,
+        createdAt: now,
+        updatedAt: now,
+        ...(unknown ? { phase: 'unknown' as const } : {}),
+    };
+}
+
+/** Items to render: server history plus the not-yet-echoed prompt. */
+export function withPendingUserItem(draft: CodeDraft, items: CodeItem[], now = Date.now()): CodeItem[] {
+    const pending = pendingUserItem(draft, items, now);
+    return pending ? [...items, pending] : items;
+}

package/public/manager/src/code/session-order.ts

@@ -0,0 +1,70 @@
+import type { CodeSessionInfo } from '../../../../src/code-mode/wire';
+
+/**
+ * How the session list is ordered and grouped, kept apart from rendering so the
+ * rules can be stated and tested on their own.
+ *
+ * The server returns sessions by `last_used_at DESC`, which means answering a
+ * prompt in the third session moves it to the top while the reader is looking
+ * at it. Order here is anchored to creation instead: a row holds its place
+ * until something actually changes about it, so the list moves when a session
+ * is created or archived and not merely because it is busy. Which session is
+ * running is carried by the row's own status, which is where a changing fact
+ * belongs.
+ */
+export type CodeSessionSection = 'active' | 'archived';
+
+export function codeSessionSection(session: CodeSessionInfo): CodeSessionSection {
+    return session.archivedAt === null ? 'active' : 'archived';
+}
+
+/** Creation order, newest first. Ties break on id so the order is total. */
+export function compareCodeSessions(left: CodeSessionInfo, right: CodeSessionInfo): number {
+    return right.createdAt - left.createdAt || left.sessionId.localeCompare(right.sessionId);
+}
+
+export type CodeSessionGroup = {
+    section: CodeSessionSection;
+    sessions: CodeSessionInfo[];
+};
+
+/**
+ * Active first, then archived. Archived sessions are history: they are ordered
+ * by when they were archived, because "when did I put this away" is the
+ * question that section answers, and they fall back to creation order when a
+ * record predates the field.
+ */
+export function groupCodeSessions(sessions: readonly CodeSessionInfo[]): CodeSessionGroup[] {
+    const active = sessions.filter(session => codeSessionSection(session) === 'active').sort(compareCodeSessions);
+    const archived = sessions.filter(session => codeSessionSection(session) === 'archived')
+        .sort((left, right) => (right.archivedAt ?? right.createdAt) - (left.archivedAt ?? left.createdAt)
+            || left.sessionId.localeCompare(right.sessionId));
+    const groups: CodeSessionGroup[] = [];
+    if (active.length) groups.push({ section: 'active', sessions: active });
+    if (archived.length) groups.push({ section: 'archived', sessions: archived });
+    return groups;
+}
+
+/**
+ * What a row says about itself, beyond its title.
+ *
+ * Idle is the common case and says nothing: a label on every row is a label on
+ * no row, and it costs the one session that is actually waiting its visibility.
+ * Unknown stays unknown -- an unhydrated approval count is not zero approvals.
+ */
+export type CodeSessionAttention =
+    | { kind: 'none' }
+    | { kind: 'unknown' }
+    | { kind: 'approvals'; count: number };
+
+export function codeSessionAttention(count: number | undefined): CodeSessionAttention {
+    if (count === undefined) return { kind: 'unknown' };
+    return count > 0 ? { kind: 'approvals', count } : { kind: 'none' };
+}
+
+export function codeSessionAttentionLabel(attention: CodeSessionAttention): string {
+    if (attention.kind === 'unknown') return 'Approval status unknown';
+    if (attention.kind === 'none') return 'No pending approvals';
+    return `${attention.count} pending approval${attention.count === 1 ? '' : 's'}`;
+}
+

package/public/manager/src/code/tool-summary.ts

@@ -0,0 +1,101 @@
+import type { CodeItem } from '../../../../src/code-mode/wire';
+
+/**
+ * One line that says what a tool call did, in the user's terms.
+ *
+ * A raw tool name plus a JSON blob forces the reader to decode the call before
+ * they can tell whether it matters. `Read src/app.ts` is legible at a glance,
+ * so the body can stay collapsed until someone actually wants it.
+ */
+/**
+ * [pattern, settled, active]. The settled word is what a finished call reads as
+ * and is deliberately unchanged: it is asserted across the summary tests and is
+ * the vocabulary the transcript has always used.
+ *
+ * The active word exists because a running call and a finished one otherwise
+ * look identical once the status badge is gone. Tense carries completion, the
+ * way it does in a native transcript, instead of a chip that says "Done" on
+ * every successful row.
+ */
+const VERBS: Array<[RegExp, string, string]> = [
+    [/^(read|read_file|get_file|open_file|view|cat)$/i, 'Read', 'Reading'],
+    [/^(write|write_file|create_file|edit|edit_file|apply_patch|str_replace\w*|update_file)$/i, 'Edit', 'Editing'],
+    [/^(bash|shell|exec|exec_command|run|run_command|terminal)$/i, 'Bash', 'Running'],
+    [/^(search|grep|rg|ripgrep|glob|find|codebase_search)$/i, 'Search', 'Searching'],
+    [/^(fetch|browser\w*|web_\w*|open_url|http)$/i, 'Open', 'Opening'],
+    [/^(list|ls|list_dir|list_files)$/i, 'List', 'Listing'],
+];
+
+/** A call that has not settled yet reads in the present tense. */
+function isActive(status: CodeItem['status']): boolean {
+    return status === 'running' || status === 'pending';
+}
+
+/** Longest-suffix workspace-relative path, so the row stays scannable. */
+export function shortenPath(value: string, workingDir: string): string {
+    const trimmed = value.trim();
+    if (workingDir && trimmed.startsWith(workingDir)) {
+        const relative = trimmed.slice(workingDir.length).replace(/^[\\/]+/, '');
+        if (relative) return relative;
+    }
+    if (trimmed.length <= 64) return trimmed;
+    const parts = trimmed.split(/[\\/]/).filter(Boolean);
+    return parts.length > 2 ? `…/${parts.slice(-2).join('/')}` : `…${trimmed.slice(-60)}`;
+}
+
+function firstLine(value: string): string {
+    const line = value.split(/\r?\n/).find(row => row.trim()) ?? '';
+    const collapsed = line.replace(/\s+/g, ' ').trim();
+    return collapsed.length > 96 ? `${collapsed.slice(0, 95)}…` : collapsed;
+}
+
+/**
+ * A tool argument may be a JSON object, a bare command, or a path. Pull the
+ * one field a reader would recognise, and fall back to the first line rather
+ * than printing an object.
+ */
+export function summariseToolInput(input: string | undefined, workingDir: string): string {
+    if (!input) return '';
+    const raw = input.trim();
+    if (!raw) return '';
+    if (raw.startsWith('{')) {
+        try {
+            const parsed = JSON.parse(raw) as Record<string, unknown>;
+            for (const key of ['command', 'cmd', 'path', 'file_path', 'file', 'url', 'query', 'pattern']) {
+                const value = parsed[key];
+                if (typeof value === 'string' && value.trim()) {
+                    return key === 'path' || key === 'file' || key === 'file_path'
+                        ? shortenPath(value, workingDir) : firstLine(value);
+                }
+            }
+            return '';
+        } catch { /* not JSON after all; fall through to the raw text */ }
+    }
+    return raw.includes('/') && !raw.includes(' ') ? shortenPath(raw, workingDir) : firstLine(raw);
+}
+
+export function toolSummary(item: CodeItem, workingDir: string): string {
+    const active = isActive(item.status);
+    if (item.kind === 'file_change') {
+        const target = summariseToolInput(item.tool?.input, workingDir) || item.tool?.detail || '';
+        const verb = active ? 'Editing' : 'Edit';
+        return target ? `${verb} ${target}` : 'File change';
+    }
+    const name = item.tool?.name?.trim() || 'Tool';
+    const match = VERBS.find(([pattern]) => pattern.test(name));
+    const verb = match ? (active ? match[2] : match[1]) : undefined;
+    const detail = summariseToolInput(item.tool?.input, workingDir);
+    if (verb) return detail ? `${verb} ${detail}` : verb;
+    // An unrecognised tool keeps its own name; renaming it would hide which
+    // tool actually ran, including MCP tools whose names are the useful part.
+    return detail ? `${name} ${detail}` : name;
+}
+
+/** Only states worth interrupting the reader for. `done` is the default. */
+export function noteworthyStatus(item: CodeItem): string | null {
+    if (item.kind === 'turn_cancelled' || item.status === 'cancelled') return 'Stopped';
+    if (item.kind === 'turn_failed' || item.status === 'error') return 'Failed';
+    if (item.status === 'running') return 'Running';
+    if (item.status === 'pending') return 'Pending';
+    return null;
+}

package/public/manager/src/code/use-dictation.ts

@@ -0,0 +1,130 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+/**
+ * Composer dictation over the existing `/api/voice` endpoint.
+ *
+ * The route already transcribes an uploaded blob; `x-stt-only` makes it return
+ * the text instead of submitting it as a chat message, which is what a composer
+ * needs. Nothing here is speculative: if the browser cannot record, the control
+ * reports why and stays disabled rather than pretending to listen.
+ */
+export type DictationStatus = 'unsupported' | 'idle' | 'recording' | 'transcribing';
+
+export interface Dictation {
+    status: DictationStatus;
+    /** Why the control is disabled, or what pressing it will do. */
+    reason: string;
+    error: string | null;
+    toggle(): void;
+}
+
+function pickMime(): string {
+    if (typeof MediaRecorder === 'undefined') return '';
+    for (const candidate of ['audio/webm;codecs=opus', 'audio/mp4', 'audio/ogg;codecs=opus']) {
+        if (MediaRecorder.isTypeSupported(candidate)) return candidate;
+    }
+    return '';
+}
+
+function extensionFor(mime: string): string {
+    if (mime.includes('mp4')) return '.mp4';
+    if (mime.includes('ogg')) return '.ogg';
+    return '.webm';
+}
+
+function describe(error: unknown): string {
+    const name = (error as DOMException | undefined)?.name;
+    if (name === 'NotAllowedError') return 'Microphone access was denied.';
+    if (name === 'NotFoundError') return 'No microphone was found.';
+    if (name === 'NotReadableError' || name === 'AbortError') return 'The microphone is in use by another application.';
+    return error instanceof Error ? error.message : 'Dictation failed.';
+}
+
+export function useDictation(onText: (text: string) => void, disabled: boolean): Dictation {
+    const [status, setStatus] = useState<DictationStatus>('unsupported');
+    const [error, setError] = useState<string | null>(null);
+    const recorder = useRef<MediaRecorder | null>(null);
+    const stream = useRef<MediaStream | null>(null);
+    const chunks = useRef<Blob[]>([]);
+    const live = useRef(true);
+
+    useEffect(() => {
+        // Capability is checked, never assumed: a plain-HTTP origin other than
+        // localhost has no mediaDevices at all.
+        const supported = typeof MediaRecorder !== 'undefined'
+            && typeof navigator !== 'undefined' && !!navigator.mediaDevices?.getUserMedia;
+        setStatus(supported ? 'idle' : 'unsupported');
+        return () => {
+            live.current = false;
+            recorder.current?.state === 'recording' && recorder.current.stop();
+            stream.current?.getTracks().forEach(track => track.stop());
+        };
+    }, []);
+
+    const transcribe = useCallback(async (blob: Blob, mime: string) => {
+        setStatus('transcribing');
+        try {
+            const response = await fetch('/api/voice', {
+                method: 'POST',
+                headers: { 'Content-Type': mime || 'audio/webm', 'X-Voice-Ext': extensionFor(mime), 'X-Stt-Only': 'true' },
+                body: blob,
+            });
+            const payload = await response.json().catch(() => null) as { text?: string; error?: string } | null;
+            if (!response.ok) throw new Error(payload?.error || `Transcription failed (${response.status}).`);
+            const text = payload?.text?.trim();
+            if (!live.current) return;
+            if (text) onText(text);
+            else setError('Nothing was transcribed.');
+        } catch (err) {
+            if (live.current) setError(describe(err));
+        } finally {
+            if (live.current) setStatus('idle');
+        }
+    }, [onText]);
+
+    const toggle = useCallback(() => {
+        if (status === 'unsupported' || status === 'transcribing' || disabled) return;
+        if (status === 'recording') {
+            recorder.current?.stop();
+            return;
+        }
+        setError(null);
+        void (async () => {
+            let captured: MediaStream;
+            try { captured = await navigator.mediaDevices.getUserMedia({ audio: true }); }
+            catch (err) { setError(describe(err)); return; }
+            if (!live.current) { captured.getTracks().forEach(track => track.stop()); return; }
+            stream.current = captured;
+            const mime = pickMime();
+            let active: MediaRecorder;
+            try { active = new MediaRecorder(captured, mime ? { mimeType: mime } : {}); }
+            catch (err) {
+                captured.getTracks().forEach(track => track.stop());
+                setError(describe(err));
+                return;
+            }
+            recorder.current = active;
+            chunks.current = [];
+            active.ondataavailable = event => { if (event.data.size > 0) chunks.current.push(event.data); };
+            active.onerror = () => { setError('Recording failed.'); };
+            active.onstop = () => {
+                captured.getTracks().forEach(track => track.stop());
+                stream.current = null;
+                recorder.current = null;
+                const blob = new Blob(chunks.current, { type: mime || 'audio/webm' });
+                chunks.current = [];
+                if (!live.current) return;
+                if (blob.size === 0) { setStatus('idle'); setError('Nothing was recorded.'); return; }
+                void transcribe(blob, mime);
+            };
+            active.start();
+            setStatus('recording');
+        })();
+    }, [disabled, status, transcribe]);
+
+    const reason = status === 'unsupported'
+        ? 'Dictation needs microphone access, which this browser context does not provide.'
+        : status === 'recording' ? 'Stop dictation'
+            : status === 'transcribing' ? 'Transcribing…' : 'Dictation';
+    return { status, reason, error, toggle };
+}

package/public/manager/src/components/CommandCenter.tsx

@@ -1,5 +1,4 @@
-import { Children, cloneElement, isValidElement, type ReactNode } from 'react';
-import { ThemeSwitch } from './ThemeSwitch';
+import { type ReactNode } from 'react';
 import { isElectron } from '../panels/desktop-bridge';
 
 type CommandCenterProps = {
@@ -11,12 +10,9 @@ type CommandCenterProps = {
 
 export function CommandCenter(props: CommandCenterProps) {
     const electron = isElectron();
-    // Keep the command-bar slot adjacent to the theme control without moving
-    // instance navigation state out of its existing owner.
-    const actions = isValidElement<{ children?: ReactNode }>(props.actions)
-        ? cloneElement(props.actions, {}, Children.toArray(props.actions.props.children).flatMap<ReactNode>(child =>
-            isValidElement(child) && child.type === ThemeSwitch ? [<span key="settings" id="command-settings-slot" />, child] : [child]))
-        : props.actions;
+    // The settings portal slot existed only for the workbench gear, which is gone: the rail
+    // owns settings now. Actions pass through untouched.
+    const actions = props.actions;
     return (
         <div className={`command-center command-bar${electron ? ' is-electron-titlebar' : ''}`}>
             <div className="command-primary">

package/public/manager/src/components/InstanceDetailPanel.tsx

@@ -4,7 +4,6 @@ import type {
     DashboardRegistryInstance,
     DashboardScanResult,
 } from '../types';
-import { SettingsShell } from '../settings/SettingsShell';
 import { ProcessControlPanel } from './ProcessControlPanel';
 import { InstanceLogsPanel } from './InstanceLogsPanel';
 
@@ -13,8 +12,6 @@ type InstanceDetailPanelProps = {
     data: DashboardScanResult | null;
     activeTab: DashboardDetailTab;
     onRegistryPatch: (port: number, patch: Partial<DashboardRegistryInstance>) => void;
-    onSettingsDirtyChange?: (dirty: boolean) => void;
-    onSettingsSaved?: () => void;
 };
 
 export function InstanceDetailPanel(props: InstanceDetailPanelProps) {
@@ -47,21 +44,6 @@ export function InstanceDetailPanel(props: InstanceDetailPanelProps) {
                     </div>
                 )}
 
-                {props.activeTab === 'settings' && instance && (
-                    <SettingsShell
-                        key={instance.port}
-                        port={instance.port}
-                        instanceUrl={instance.url}
-                        {...(props.onSettingsDirtyChange !== undefined ? { onDirtyChange: props.onSettingsDirtyChange } : {})}
-                        {...(props.onSettingsSaved !== undefined ? { onSaved: props.onSettingsSaved } : {})}
-                    />
-                )}
-
-                {props.activeTab === 'settings' && !instance && (
-                    <div className="detail-empty">
-                        Select an instance to configure it.
-                    </div>
-                )}
         </section>
     );
 }