@yadsh/dsh-qa-surface 0.13.0 → 0.14.0

package/lib/client/QaSurface.js

@@ -8,21 +8,29 @@ import { QA_SESSION_IDLE_STATE } from "./types.js";
 import { QaAuthGate } from "./components/QaAuthGate.js";
 import { QaApproval } from "./components/QaApproval.js";
 import { QaQuestions } from "./components/QaQuestions.js";
+import { QaRequestQueue } from "./components/QaRequestQueue.js";
 import { QaComposer } from "./components/QaComposer.js";
+import { QaQueueDock } from "./components/QaQueueDock.js";
 import { QaHeader, QaSubagentBanner } from "./components/QaHeader.js";
+import { QaThemeSwitcher } from "./components/QaThemeSwitcher.js";
+import { useQaThemePreference } from "./theme-preference.js";
 import { QaMessage } from "./components/QaMessage.js";
 import { buildChatRows, QaSidebar } from "./components/QaSidebar.js";
 import { QaAgentsDrawer, collectSubagents, } from "./components/QaAgentsDrawer.js";
 import { collectChatFiles, countChatAttachments } from "./chat-files.js";
 import { QaFilesPanel } from "./components/QaFilesPanel.js";
+import { isQaModalOpen } from "./components/QaModal.js";
 import { QaRightRail } from "./components/QaRightRail.js";
 import { QaSourcesPanel } from "./components/QaSourcesPanel.js";
+import { QA_TURN_NOTICE_LINE_SELECTOR, QA_TURN_NOTICE_OFFER_SELECTOR, QaTurnNotice, } from "./components/QaTurnNotice.js";
+import { useQaTurnNotifications } from "./notifications/use-turn-notifications.js";
 import { QA_TURN_FOLLOW_PX, QaTurnRail, computeActiveTurn, scrollToTranscriptAnchor, } from "./components/QaTurnRail.js";
 import { QaWidthHandle, useQaContentWidth, } from "./components/QaWidthHandle.js";
 import { VariantSwitcher } from "./components/VariantSwitcher.js";
 import { QaWelcomeNotice } from "./components/QaWelcomeNotice.js";
 import { statusText, titleFromMessages } from "./components/surface-utils.js";
 import { useThinkingPhrase } from "./components/thinking-phrases.js";
+import { focusFirst, focusRing, focusable, isInert, trapKeys, } from "./focus-ring.js";
 import { QaUserSettingsDialog, } from "./user-settings/UserSettingsDialog.js";
 import { useTranscriptView } from "./use-transcript-view.js";
 import { useSessionUiState } from "./use-session-ui-state.js";
@@ -51,37 +59,42 @@ const QA_SURFACE_CLASS = qaKioskMode()
 const NO_QUESTIONS = Object.freeze([]);
 const ACCOUNTS_CHECKING_SNAPSHOT = { stage: "checking" };
 const noopAccountsSnapshot = () => ACCOUNTS_CHECKING_SNAPSHOT;
-function focusable(root) {
-    return [
-        ...root.querySelectorAll("button:not([disabled]), textarea:not([disabled]), a[href], [tabindex]:not([tabindex='-1'])"),
-    ].filter((element) => !element.hidden);
-}
-function trapKeys(event) {
-    event.stopPropagation();
-    if (event.key !== "Tab")
-        return;
-    const items = focusable(event.currentTarget);
-    if (items.length === 0) {
-        event.preventDefault();
-        event.currentTarget.focus();
-        return;
-    }
-    const first = items[0];
-    const last = items.at(-1);
-    if (event.shiftKey && document.activeElement === first) {
-        event.preventDefault();
-        last?.focus();
-    }
-    else if (!event.shiftKey && document.activeElement === last) {
-        event.preventDefault();
-        first?.focus();
-    }
-}
 /** Same follow threshold the rail uses: this close to the floor is "at bottom". */
 function isNearBottom(element) {
     return (element.scrollHeight - element.scrollTop - element.clientHeight <
         QA_TURN_FOLLOW_PX);
 }
+/**
+ * The stack line the reader's control stands on, or null when the ring has no
+ * place to keep for it. The desktop opt-in is not a line: it is what the stack
+ * ends with, so losing it is losing the last control of the last line, and that
+ * line is taken as its place. The opt-in is read by its own block rather than as
+ * whatever the stack holds that is not a line — the next block the stack grows
+ * (a heading, a «скрыть все») is neither, and handing the reader to a line they
+ * never stood on is worse than handing them nowhere.
+ */
+function noticeLineOf(target, stack) {
+    const line = target.closest(QA_TURN_NOTICE_LINE_SELECTOR);
+    if (line !== null)
+        return line;
+    if (target.closest(QA_TURN_NOTICE_OFFER_SELECTOR) === null) {
+        return null;
+    }
+    const lines = stack.querySelectorAll(QA_TURN_NOTICE_LINE_SELECTOR);
+    return lines.item(lines.length - 1);
+}
+/**
+ * The line the stack lists on this side of `line`, or null when there is none:
+ * the opt-in block shares the stack with the lines but is not one of them, so it
+ * is not a place a reader can be handed back to.
+ */
+function adjacentNoticeLine(line, side) {
+    const sibling = side === "previous" ? line.previousElementSibling : line.nextElementSibling;
+    return sibling instanceof HTMLElement &&
+        sibling.matches(QA_TURN_NOTICE_LINE_SELECTOR)
+        ? sibling
+        : null;
+}
 export function QaSurface(props) {
     const route = useSyncExternalStore(props.route.subscribe, props.route.getSnapshot, props.route.getSnapshot);
     const configState = useSyncExternalStore(props.config.subscribe, props.config.getSnapshot, props.config.getSnapshot);
@@ -106,10 +119,113 @@ export function QaSurface(props) {
     const transcript = useRef(null);
     const chat = useRef(null);
     const nearBottom = useRef(true);
+    const surface = useRef(null);
+    /** The notice stack: after `<main>` in the page, inside the ring with it. */
+    const noticeStack = useRef(null);
+    /**
+     * Whether a dialog, rather than this ring, owns the keyboard: the onboarding
+     * gate holds the page inert, and a `QaModal` stands over it with the Escape of
+     * its own. Neither paints the notice stack away — a dialog is a neighbour of
+     * it, not an ancestor — so the ring has to step back of its own accord, and
+     * step back to the subtree it counted before the stack was ever part of it.
+     */
+    const dialogOwnsKeyboard = useCallback(() => {
+        const root = surface.current;
+        return isQaModalOpen() || (root !== null && isInert(root));
+    }, []);
+    /** The roots the Tab ring is drawn around, in the order the ring walks them. */
+    const ringRoots = useCallback(() => dialogOwnsKeyboard()
+        ? [surface.current]
+        : [surface.current, noticeStack.current], [dialogOwnsKeyboard]);
+    /**
+     * Where the keyboard last stood in the notice stack: the control, the line it
+     * stood on, the lines the stack listed beside it, and the control's step
+     * within the line. The stack alone is remembered: a control of `<main>` that
+     * leaves the page with its row — a queue dock entry, a transcript action, a
+     * rebuilt chat — is the surface's own business, and this ring hands nothing
+     * back there. Read as focus moves, so it names where the reader stands rather
+     * than where they once stood: a focus landing anywhere else lets the place go.
+     *
+     * The place is held as lines, not as a number counted along the ring, because
+     * a counted place is not a stable coordinate here. A finished turn is put in
+     * front of the lines the reader already sees (`use-turn-notifications.ts`), so
+     * a step counted from the front of the stack slides by as many controls as the
+     * batch brought, and `<main>`, which the ring counts first, grows and shrinks
+     * for reasons of its own. The line the reader stood on and its neighbours keep
+     * the one claim the restore has to make — hand the keyboard to the line that
+     * took their place — whatever else arrived or left in the same moment.
+     */
+    const ringAnchor = useRef(null);
+    useEffect(() => {
+        const onFocusIn = (event) => {
+            const target = event.target;
+            const stack = noticeStack.current;
+            if (!(target instanceof HTMLElement) ||
+                stack === null ||
+                !stack.contains(target)) {
+                ringAnchor.current = null;
+                return;
+            }
+            const line = noticeLineOf(target, stack);
+            if (line === null) {
+                ringAnchor.current = null;
+                return;
+            }
+            const controls = focusable(line);
+            const step = controls.indexOf(target);
+            ringAnchor.current = {
+                element: target,
+                line,
+                // A control outside every line is the desktop opt-in, and the place it
+                // stands for is the front of the line the stack keeps last. Not its end:
+                // the last control is the cross, which answers the Enter the reader gave
+                // the offer by waving a notification they never aimed at.
+                step: step < 0 ? 0 : step,
+                before: adjacentNoticeLine(line, "previous"),
+                after: adjacentNoticeLine(line, "next"),
+            };
+        };
+        document.addEventListener("focusin", onFocusIn);
+        return () => document.removeEventListener("focusin", onFocusIn);
+    }, []);
+    /**
+     * Keys typed in the surface: Tab stays in the ring, and nothing else of the
+     * key reaches the harness the overlay is built on.
+     */
+    const trapSurfaceKeys = useCallback((event) => {
+        trapKeys(event, ringRoots());
+    }, [ringRoots]);
+    /**
+     * Keys typed in the notice stack, where no ancestor `<main>` can hear them.
+     *
+     * Only the Tab this ring answers is taken; every other key is left to bubble
+     * as the browser would carry it, so a dialog that listens on the window —
+     * `QaModal`, and the settings dialog built on it — still hears the Escape the
+     * reader gives it. A dialog is also why that Tab is left alone: the stack is
+     * the dialog's neighbour rather than its content, so a ring closed around both
+     * would take the reader out of the dialog they are working in and put them
+     * back on a page held under the scrim.
+     */
+    const trapNoticeKeys = useCallback((event) => {
+        if (event.key !== "Tab" || dialogOwnsKeyboard())
+            return;
+        trapKeys(event, ringRoots());
+    }, [dialogOwnsKeyboard, ringRoots]);
     /** Turn marks of the visible transcript, kept in a ref for stable callbacks. */
     const railItemsRef = useRef([]);
     const activeTurnFrame = useRef(null);
     const stateKey = qaStorageNamespace(config);
+    // The palette belongs to the surface, so it is only painted while the
+    // surface is what the visitor is looking at: outside its own route the
+    // overlay is mounted and invisible, and flipping the Host document's
+    // attributes from there would be the QA stand restyling the harness. What the
+    // surface borrowed for the visit it hands back on the way out, for the same
+    // reason — see `useQaThemePreference`.
+    const theme = useQaThemePreference({
+        active: route.active,
+        storage: window.localStorage,
+        storageKey: `${stateKey}:theme`,
+    });
     const isAdmin = accountsSnapshot.stage === "authed" &&
         accountsSnapshot.user.role === "admin";
     // The preview belongs to the history entry that asked for it, so the
@@ -214,6 +330,9 @@ export function QaSurface(props) {
                 ? {}
                 : { questionApi: props.questionApi }),
             ...(props.slashApi === undefined ? {} : { slashApi: props.slashApi }),
+            ...(props.queueStatus === undefined
+                ? {}
+                : { queueStatus: props.queueStatus }),
             config,
             initialSubrole: selectedSubrole,
             adminPreview: previewing,
@@ -240,6 +359,7 @@ export function QaSurface(props) {
         props.fileUpload,
         props.approvalApi,
         props.questionApi,
+        props.queueStatus,
         props.secureSession,
         props.sourceApi,
         props.sessions,
@@ -327,9 +447,9 @@ export function QaSurface(props) {
     ]);
     const listState = useSyncExternalStore(props.sessions.list.subscribe, props.sessions.list.getSnapshot, props.sessions.list.getSnapshot);
     // Draft text, attachments, variant offsets and drawers are chat-local; the
-    // hook clears them whenever the bound session changes. The rail controller
-    // takes the drawer slice; the surface keeps the composer and marks state.
-    const ui = useSessionUiState(state.sessionId);
+    // hook clears them whenever the chat changes. The rail controller takes the
+    // drawer slice; the surface keeps the composer and marks state.
+    const ui = useSessionUiState(state.chatKey);
     const rail = useRightRail(ui);
     const { activeTurn, setActiveTurn, variantOffsets, setVariantOffsets, agentsOpen, setAgentsOpen, pendingAttachments, setPendingAttachments, } = ui;
     useEffect(() => {
@@ -372,6 +492,10 @@ export function QaSurface(props) {
         void controller?.deleteChat(sessionId);
     }, [controller]);
     const handleSend = useCallback((text, attachments, pick) => controller?.send(text, attachments, pick) ?? Promise.resolve(false), [controller]);
+    // Closing the queue notice only uncovers the composer: the question the stand
+    // had no room for is still the text in there, and asking it again is a
+    // keystroke the visitor takes when a place frees up.
+    const dismissRequestQueue = useCallback(() => controller?.dismissRequestQueueNotice(), [controller]);
     // Cheap refresh on every palette opening: the skill registry has no browser
     // change event, and the controller skips the round-trip while its answer is
     // still fresh.
@@ -379,6 +503,9 @@ export function QaSurface(props) {
         void controller?.refreshSlashCatalog();
     }, [controller]);
     const handleStop = useCallback(() => controller?.stop() ?? Promise.resolve(), [controller]);
+    const handleQueueEdit = useCallback((id, text) => controller?.queueAction(id, "edit", text) ?? Promise.resolve(null), [controller]);
+    const handleQueueSendNow = useCallback((id) => controller?.queueAction(id, "steer") ?? Promise.resolve(null), [controller]);
+    const handleQueueRemove = useCallback((id) => controller?.queueAction(id, "remove") ?? Promise.resolve(null), [controller]);
     const handleAnswerApproval = useCallback((requestId, decision) => controller?.answerApproval(requestId, decision) ?? Promise.resolve(), [controller]);
     const handleAnswerQuestion = useCallback((requestId, answers) => controller?.answerQuestion(requestId, answers) ?? Promise.resolve(), [controller]);
     const handleCancelQuestion = useCallback((requestId) => controller?.cancelQuestion(requestId) ?? Promise.resolve(), [controller]);
@@ -540,15 +667,122 @@ export function QaSurface(props) {
                 onSave: (input) => accounts.updateStarters(input),
             }
             : undefined;
+        // One object serves both halves of the same decision: the form that edits
+        // it and the notices that obey it. A reader cannot be looking at one and
+        // waiting on the other, and a memo keeps the identity stable for the
+        // watcher that reads the channels out of it.
+        const notifications = {
+            notifications: accountsSnapshot.user.notifications,
+            switches: config.notifications,
+            onSave: (input) => accounts.updateNotifications(input),
+        };
         const skills = config.accounts.skills.enabled && boundSkillApi !== undefined
             ? boundSkillApi
             : undefined;
-        return { profile, password, starters, skills, integrationTokens };
+        return {
+            profile,
+            password,
+            starters,
+            notifications,
+            skills,
+            integrationTokens,
+        };
     }, [accounts, accountsSnapshot, config, boundSkillApi, integrationTokens]);
     const busyTurn = state.phase === "running" ? (railItems.at(-1)?.turn ?? null) : null;
     // Projected even while the sidebar is hidden: the account settings report
     // the same chat count, and one projection cannot disagree with itself.
     const chatRows = useMemo(() => buildChatRows(controller?.chatIds() ?? [], listState.byId, activeSessionId, (id) => ownerNames?.get(id)), [controller, listState, activeSessionId, ownerNames, state.chatsRevision]);
+    // A turn that ends in one of this browser's own chats gets a notice: the
+    // sidebar dot going out is otherwise the only sign, and it is easy to miss
+    // from behind another window. The account's own list, not the sidebar's, is
+    // what bounds it: an admin's shared history is a wider read than ownership,
+    // and another account's turn is not this reader's news.
+    const turnNotices = useQaTurnNotifications({
+        chats: chatRows,
+        ownChatIds: accountsSnapshot.stage === "authed" ? accountsSnapshot.ownIds : undefined,
+        notifications: config.notifications,
+        storage: window.localStorage,
+        storageKey: `${stateKey}:notifications`,
+        // Signed in, the account's own channels decide and the settings form is
+        // what writes them; anonymously, the hook falls back to this browser.
+        account: settingsDialog?.notifications,
+        paused: state.phase === "reconnecting",
+        activeSessionId,
+        onSwitch: handleSwitch,
+    });
+    /**
+     * A line leaving the stack takes the control the reader was working out of the
+     * page, and a page with nothing focused answers Tab with the browser's own
+     * order — which leaves the QA interface. Most of the ways a line goes leave
+     * the stack standing and its count of lines where it was: waving one of the
+     * three off, a fourth turn pushing the oldest out of a full stack, the opt-in
+     * going away once the browser has answered the permission question. So the
+     * loss is read where it happens — the control the ring held is out of the page
+     * and nothing of the ring holds the focus — and the reader is handed to the
+     * line that took the lost one's place, on the same control of it: a cross
+     * given back as a cross. The anchor goes only with the focus it hands back: a
+     * page takes the focus out of a removed control on its own moment, not in step
+     * with this render. A dialog that holds the keyboard is not the ring's
+     * business, and is left to put the focus wherever it thinks the reader
+     * belongs.
+     *
+     * A page the reader is not looking at keeps its keyboard where it is: while
+     * `document.hasFocus()` is false nothing here is moved. The hand-off is owed
+     * rather than skipped — the anchor stands until the window comes back, and the
+     * `focus` event of this page is what pays it — because the reader who returns
+     * to a stack that dropped a line under them is exactly the reader this place
+     * was remembered for, while a control of a page no one is looking at has no
+     * claim on the keyboard of the page they are working in.
+     *
+     * Opening a chat from a line is the one path where a line goes and the chat
+     * changes in the same moment. The keyboard stays on the stack — on a
+     * neighbouring line, or back inside `<main>` once none is left — rather than
+     * following the switch: the composer the switch remounts is disabled while the
+     * chat is still being bound, so it can take no focus, and the surface moves
+     * the keyboard on a switch no further than it does anywhere else.
+     */
+    const restoreRingFocus = useCallback(() => {
+        const anchor = ringAnchor.current;
+        if (anchor === null || anchor.element.isConnected)
+            return;
+        if (dialogOwnsKeyboard()) {
+            ringAnchor.current = null;
+            return;
+        }
+        if (!document.hasFocus())
+            return;
+        const ring = focusRing(ringRoots());
+        const active = document.activeElement;
+        if (active !== null && ring.includes(active))
+            return;
+        ringAnchor.current = null;
+        // The line itself first, for a control that left while its line stayed:
+        // then whichever neighbour is still on screen, the one after the reader
+        // taking the place the stack still lists in that order.
+        const candidates = [];
+        for (const line of [anchor.line, anchor.after, anchor.before]) {
+            if (line === null || !line.isConnected)
+                continue;
+            const controls = focusable(line);
+            candidates.push(controls[Math.min(anchor.step, controls.length - 1)]);
+        }
+        // The stack has no line left to stand on: back into the interface, onto the
+        // control the ring reaches last, and past the first candidate of it that
+        // refuses the keyboard.
+        candidates.push(...[...ring].reverse(), surface.current ?? undefined);
+        focusFirst(candidates);
+    }, [dialogOwnsKeyboard, ringRoots]);
+    useEffect(() => {
+        restoreRingFocus();
+    });
+    useEffect(() => {
+        // The hand-off a blurred page owed, read again at the moment the reader
+        // comes back: whoever holds the keyboard then keeps it, and a control of the
+        // ring they reached on their own is not taken away from them.
+        const onWindowFocus = () => restoreRingFocus();
+        window.addEventListener("focus", onWindowFocus);
+        return () => window.removeEventListener("focus", onWindowFocus);
+    }, [restoreRingFocus]);
     // The audit provider is optional: `auditSnapshot.api` is null until the
     // audit plugin's client bundle is loaded, and the badge is absent until
     // then. Chat ids rather than rows feed the poll, so a re-render does not
@@ -594,7 +828,7 @@ export function QaSurface(props) {
     const welcomeNotice = (_jsx(QaWelcomeNotice, { storage: window.localStorage, storageKey: `${stateKey}:welcome-notice` }, stateKey));
     if (config.accounts.enabled && accounts !== undefined) {
         if (accountsStage === "checking") {
-            return (_jsxs(_Fragment, { children: [welcomeNotice, _jsx("main", { className: QA_SURFACE_CLASS, "aria-busy": "true", "aria-label": config.branding.title, tabIndex: -1 })] }));
+            return (_jsxs(_Fragment, { children: [welcomeNotice, _jsx("main", { className: QA_SURFACE_CLASS, "data-testid": "qa-surface-loading", "aria-busy": "true", "aria-label": config.branding.title, tabIndex: -1 })] }));
         }
         if (accountsStage === "gate") {
             return (_jsxs(_Fragment, { children: [welcomeNotice, _jsx(QaAuthGate, { accounts: accounts, snapshot: accountsSnapshot, title: config.branding.title, logoUrl: config.branding.logoUrl, allowRegistration: config.accounts.allowRegistration })] }));
@@ -650,9 +884,11 @@ export function QaSurface(props) {
             } }));
     }
     if (adminRoute) {
-        return (_jsx("main", { className: "dsh-qa-admin", "aria-label": "\u0410\u0434\u043C\u0438\u043D\u0438\u0441\u0442\u0440\u0438\u0440\u043E\u0432\u0430\u043D\u0438\u0435 QA", children: _jsxs("div", { className: "dsh-qa-admin__loading", children: [_jsx("p", { children: "\u042D\u0442\u043E\u0442 \u0440\u0430\u0437\u0434\u0435\u043B \u0434\u043E\u0441\u0442\u0443\u043F\u0435\u043D \u0442\u043E\u043B\u044C\u043A\u043E \u0430\u0434\u043C\u0438\u043D\u0438\u0441\u0442\u0440\u0430\u0442\u043E\u0440\u0443." }), _jsx("button", { type: "button", onClick: () => window.history.pushState(null, "", config.route.path), children: "\u0412\u0435\u0440\u043D\u0443\u0442\u044C\u0441\u044F \u0432 \u0447\u0430\u0442" })] }) }));
+        return (_jsx("main", { className: "dsh-qa-admin", "data-testid": "qa-surface-admin-denied", "aria-label": "\u0410\u0434\u043C\u0438\u043D\u0438\u0441\u0442\u0440\u0438\u0440\u043E\u0432\u0430\u043D\u0438\u0435 QA", children: _jsxs("div", { className: "dsh-qa-admin__loading", children: [_jsx("p", { children: "\u042D\u0442\u043E\u0442 \u0440\u0430\u0437\u0434\u0435\u043B \u0434\u043E\u0441\u0442\u0443\u043F\u0435\u043D \u0442\u043E\u043B\u044C\u043A\u043E \u0430\u0434\u043C\u0438\u043D\u0438\u0441\u0442\u0440\u0430\u0442\u043E\u0440\u0443." }), _jsx("button", { type: "button", "data-testid": "qa-surface-admin-return", onClick: () => window.history.pushState(null, "", config.route.path), children: "\u0412\u0435\u0440\u043D\u0443\u0442\u044C\u0441\u044F \u0432 \u0447\u0430\u0442" })] }) }));
     }
-    return (_jsxs(_Fragment, { children: [welcomeNotice, settingsDialog === undefined ? null : (_jsx(QaUserSettingsDialog, { open: settingsOpen, initialSection: (config.accounts.profile.enabled
+    return (_jsxs(_Fragment, { children: [welcomeNotice, _jsx(QaTurnNotice, { items: turnNotices.items, onOpen: turnNotices.onOpen, onDismiss: turnNotices.onDismiss, rootRef: noticeStack, onKeyDown: trapNoticeKeys, ...(turnNotices.onEnableDesktop === undefined
+                    ? {}
+                    : { onEnableDesktop: turnNotices.onEnableDesktop }) }), settingsDialog === undefined ? null : (_jsx(QaUserSettingsDialog, { open: settingsOpen, initialSection: (config.accounts.profile.enabled
                     ? "profile"
                     : "general"), email: accountsSnapshot.stage === "authed"
                     ? accountsSnapshot.user.email
@@ -664,15 +900,15 @@ export function QaSurface(props) {
                     ? {}
                     : { password: settingsDialog.password }), ...(settingsDialog.starters === undefined
                     ? {}
-                    : { starters: settingsDialog.starters }), ...(settingsDialog.integrationTokens === undefined
+                    : { starters: settingsDialog.starters }), notifications: settingsDialog.notifications, ...(settingsDialog.integrationTokens === undefined
                     ? {}
                     : { integrationTokens: settingsDialog.integrationTokens }), ...(settingsDialog.skills === undefined
                     ? {}
-                    : { skills: settingsDialog.skills }) })), _jsxs("main", { className: QA_SURFACE_CLASS, "data-phase": state.phase, "aria-label": config.branding.title, tabIndex: -1, onKeyDown: trapKeys, children: [previewing || sessionPreview ? (_jsx(QaAdminPreviewBanner, { role: preview?.name ??
+                    : { skills: settingsDialog.skills }) })), _jsxs("main", { ref: surface, className: QA_SURFACE_CLASS, "data-testid": "qa-surface-root", "data-phase": state.phase, "aria-label": config.branding.title, tabIndex: -1, onKeyDown: trapSurfaceKeys, children: [previewing || sessionPreview ? (_jsx(QaAdminPreviewBanner, { role: preview?.name ??
                             sessionRole?.name ??
                             sessionRole?.id ??
                             selectedSubrole ??
-                            "", ...(previewing ? { onExit: exitPreview } : {}) })) : null, showSidebar ? (_jsx(QaSidebar, { rows: chatRows, groupByOwner: ownerNames !== undefined, title: config.branding.title, logoUrl: config.branding.logoUrl, stateKey: stateKey, showNewChat: allowNewChat, busy: state.phase === "creating", onSwitch: handleSwitch, onNewChat: handleNewChat, onDelete: handleDelete, audits: chatAudits, ...(auditSnapshot.api === null ? {} : { onAudit: openAudit }), account: config.accounts.enabled &&
+                            "", ...(previewing ? { onExit: exitPreview } : {}), disabled: state.phase === "creating" })) : null, showSidebar ? (_jsx(QaSidebar, { rows: chatRows, groupByOwner: ownerNames !== undefined, title: config.branding.title, logoUrl: config.branding.logoUrl, stateKey: stateKey, showNewChat: allowNewChat, busy: state.phase === "creating", onSwitch: handleSwitch, onNewChat: handleNewChat, onDelete: handleDelete, audits: chatAudits, ...(auditSnapshot.api === null ? {} : { onAudit: openAudit }), account: config.accounts.enabled &&
                             accounts !== undefined &&
                             accountsStage === "authed"
                             ? {
@@ -683,7 +919,7 @@ export function QaSurface(props) {
                                     ? {}
                                     : { settings: settingsEntry }),
                             }
-                            : undefined })) : null, _jsx(QaAuditDialog, { open: auditTarget !== null, sessionId: auditTarget, title: "\u0410\u0443\u0434\u0438\u0442 \u0447\u0430\u0442\u0430", api: auditSnapshot.api, summary: auditTarget === null ? undefined : chatAudits.get(auditTarget), onClose: closeAudit }), _jsxs("div", { className: "dsh-qa-body", children: [state.viewingSubagent !== null && !config.ui.showHeader ? (_jsx(QaSubagentBanner, { onClose: handleCloseSubagent })) : null, config.ui.showHeader ? (_jsx(QaHeader, { logoUrl: config.branding.logoUrl, title: conversationTitle, viewingSubagent: state.viewingSubagent !== null, onCloseSubagent: handleCloseSubagent, roleSelector: access === undefined ||
+                            : undefined })) : null, _jsx(QaAuditDialog, { open: auditTarget !== null, sessionId: auditTarget, title: "\u0410\u0443\u0434\u0438\u0442 \u0447\u0430\u0442\u0430", api: auditSnapshot.api, summary: auditTarget === null ? undefined : chatAudits.get(auditTarget), onClose: closeAudit }), _jsxs("div", { className: "dsh-qa-body", "data-testid": "qa-surface-body", children: [state.viewingSubagent !== null && !config.ui.showHeader ? (_jsx(QaSubagentBanner, { onClose: handleCloseSubagent })) : null, config.ui.showHeader ? (_jsx(QaHeader, { logoUrl: config.branding.logoUrl, title: conversationTitle, viewingSubagent: state.viewingSubagent !== null, onCloseSubagent: handleCloseSubagent, roleSelector: access === undefined ||
                                     selectedSubrole === null ||
                                     previewing ? undefined : (_jsx(QaRoleSelector, { roles: access.subroles, selected: selectedSubrole, conversationStarted: !empty, disabled: config.session.policy === "fixed" ||
                                         state.phase === "creating" ||
@@ -694,7 +930,7 @@ export function QaSurface(props) {
                                         setSelectedSubrole(id);
                                         setSessionRole(access.subroles.find((role) => role.id === id));
                                         void controller?.selectSubrole(id, false);
-                                    } })), administration: accountsSnapshot.stage === "authed" &&
+                                    } })), themeSwitcher: _jsx(QaThemeSwitcher, { preference: theme.preference, onSelect: theme.select }), administration: accountsSnapshot.stage === "authed" &&
                                     accountsSnapshot.user.role === "admin"
                                     ? {
                                         onOpen: () => window.history.pushState(null, "", `${config.route.path === "/" ? "" : config.route.path}/admin`),
@@ -702,13 +938,13 @@ export function QaSurface(props) {
                                     : undefined, agentCount: agentRows.length, agentsOpen: agentsOpen, onToggleAgents: rail.toggleAgents, sourcesVisible: config.sources.enabled && config.sources.display.sidebar, sourcesCount: state.sources.length, sourcesComplete: state.sourcesComplete, sourcesOpen: rail.railOpen && rail.railTab === "sources", onOpenSources: () => rail.openTab("sources"), fileCount: attachmentCount, filesEnabled: filesEnabled, filesOpen: rail.railOpen && rail.railTab === "files", onOpenFiles: () => rail.openTab("files"), panelLauncher: _jsx(QaPanelLauncher, { panels: props.panels }), 
                                 // The sidebar carries this entry next to the account name, so
                                 // the header takes it over exactly when there is no sidebar.
-                                settings: showSidebar ? undefined : settingsEntry, showReset: showResetButton, resetDisabled: controller === undefined || state.phase === "creating", onReset: handleNewChat })) : null, _jsxs("div", { className: "dsh-qa-workspace", children: [_jsxs("div", { ref: chat, className: "dsh-qa-chat", style: {
+                                settings: showSidebar ? undefined : settingsEntry, showReset: showResetButton, resetDisabled: controller === undefined || state.phase === "creating", onReset: handleNewChat })) : null, _jsxs("div", { className: "dsh-qa-workspace", "data-testid": "qa-surface-workspace-split", children: [_jsxs("div", { ref: chat, className: "dsh-qa-chat", "data-testid": "qa-surface-chat", style: {
                                             "--dsh-qa-content-width": `${config.ui.minContentWidth}px`,
-                                        }, children: [_jsxs("div", { ref: transcript, className: "dsh-qa-transcript", onScroll: (event) => {
+                                        }, children: [_jsxs("div", { ref: transcript, className: "dsh-qa-transcript", "data-testid": "qa-surface-transcript", onScroll: (event) => {
                                                     const element = event.currentTarget;
                                                     nearBottom.current = isNearBottom(element);
                                                     scheduleActiveTurnSync();
-                                                }, children: [empty ? null : (_jsx(QaTurnRail, { items: railItems, activeTurn: activeTurn, busyTurn: busyTurn, scrollerRef: transcript, onNavigate: handleTurnNavigate })), _jsxs("div", { className: "dsh-qa-transcript__inner", children: [empty ? (_jsxs("section", { className: "dsh-qa-welcome", "aria-labelledby": "dsh-qa-welcome-title", children: [_jsx("h2", { id: "dsh-qa-welcome-title", children: config.branding.welcomeMessage }), config.branding.subtitle === "" ? null : (_jsx("p", { children: config.branding.subtitle }))] })) : (visibleMessages.map((message, index) => {
+                                                }, children: [empty ? null : (_jsx(QaTurnRail, { items: railItems, activeTurn: activeTurn, busyTurn: busyTurn, scrollerRef: transcript, onNavigate: handleTurnNavigate })), _jsxs("div", { className: "dsh-qa-transcript__inner", children: [empty ? (_jsxs("section", { className: "dsh-qa-welcome", "data-testid": "qa-surface-transcript-welcome", "aria-labelledby": "dsh-qa-welcome-title", children: [_jsx("h2", { id: "dsh-qa-welcome-title", children: config.branding.welcomeMessage }), config.branding.subtitle === "" ? null : (_jsx("p", { children: config.branding.subtitle }))] })) : (visibleMessages.map((message, index) => {
                                                                 const group = message.role === "user"
                                                                     ? view.groupByPromptId.get(message.id)
                                                                     : undefined;
@@ -727,8 +963,8 @@ export function QaSurface(props) {
                                                                                 ...offsets,
                                                                                 [group.groupId]: step,
                                                                             })) })) : null] }, message.id));
-                                                            })), state.pendingMessage === null ? null : (_jsx("div", { className: "dsh-qa-message-slot", children: _jsx(QaMessage, { message: state.pendingMessage, renderMarkdown: false, showTimestamp: false, thinkingPhrases: config.thinkingPhrases }) })), state.compatibilityReadOnly === true ? (_jsx("div", { className: "dsh-qa-compatibility", role: "status", children: "\u042D\u0442\u043E\u0442 \u0447\u0430\u0442 \u0441\u043E\u0437\u0434\u0430\u043D \u043F\u0440\u0438 \u0434\u0440\u0443\u0433\u043E\u0439 \u043A\u043E\u043D\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u0441\u0442\u0435\u043D\u0434\u0430 \u0438 \u043E\u0442\u043A\u0440\u044B\u0442 \u0442\u043E\u043B\u044C\u043A\u043E \u0434\u043B\u044F \u0447\u0442\u0435\u043D\u0438\u044F. \u0418\u0441\u0442\u043E\u0440\u0438\u044F \u0441\u043E\u0445\u0440\u0430\u043D\u0435\u043D\u0430; \u0447\u0442\u043E\u0431\u044B \u043F\u0440\u043E\u0434\u043E\u043B\u0436\u0438\u0442\u044C \u0440\u0430\u0431\u043E\u0442\u0443 \u0441 \u0442\u0435\u043A\u0443\u0449\u0438\u043C\u0438 \u043D\u0430\u0441\u0442\u0440\u043E\u0439\u043A\u0430\u043C\u0438, \u0441\u043E\u0437\u0434\u0430\u0439\u0442\u0435 \u043D\u043E\u0432\u044B\u0439 \u0447\u0430\u0442." })) : null, state.error === null ? null : (_jsxs("div", { className: "dsh-qa-error", role: "alert", children: [_jsx("span", { children: state.error }), state.phase === "error" ? (_jsx("button", { type: "button", onClick: () => void controller?.ensureSession(), children: "\u041F\u043E\u0432\u0442\u043E\u0440\u0438\u0442\u044C" })) : null] }))] })] }), _jsx("footer", { className: "dsh-qa-footer", children: _jsxs("div", { className: "dsh-qa-footer__inner", children: [_jsx(QaApproval, { approvals: state.approvals, onAnswer: handleAnswerApproval }), _jsx(QaQuestions, { questions: state.questions, onAnswer: handleAnswerQuestion, onCancel: handleCancelQuestion, onStop: handleStop, canStop: state.canStop }), _jsx("div", { className: "dsh-qa-composer-slot", hidden: state.questions.length > 0, children: _jsx(QaComposer, { placeholder: config.branding.placeholder, quickQuestions: empty ? quickQuestions : NO_QUESTIONS, canSend: state.canSend, canStop: state.canStop, running: state.phase === "running", showStop: config.ui.showStop, status: status, attachments: pendingAttachments, limits: limits, slash: state.slash, slashPolicy: config.slashCommands.palette, onAttachmentsChange: setPendingAttachments, onSend: handleSend, onSlashOpen: handleSlashOpen, onStop: handleStop }, state.sessionId ?? "draft") }), config.branding.disclaimer === "" ? null : (_jsxs("p", { className: "dsh-qa-footer__disclaimer", children: [_jsxs("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", children: [_jsx("circle", { cx: "8", cy: "8", r: "5.75" }), _jsx("path", { d: "M8 7.25v3.5m0-5.25v.5" })] }), config.branding.disclaimer] }))] }) }), !empty
+                                                            })), state.pendingMessage === null ? null : (_jsx("div", { className: "dsh-qa-message-slot", children: _jsx(QaMessage, { message: state.pendingMessage, renderMarkdown: false, showTimestamp: false, thinkingPhrases: config.thinkingPhrases }) })), state.compatibilityReadOnly === true ? (_jsx("div", { className: "dsh-qa-compatibility", "data-testid": "qa-surface-compatibility", role: "status", children: "\u042D\u0442\u043E\u0442 \u0447\u0430\u0442 \u0441\u043E\u0437\u0434\u0430\u043D \u043F\u0440\u0438 \u0434\u0440\u0443\u0433\u043E\u0439 \u043A\u043E\u043D\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u0441\u0442\u0435\u043D\u0434\u0430 \u0438 \u043E\u0442\u043A\u0440\u044B\u0442 \u0442\u043E\u043B\u044C\u043A\u043E \u0434\u043B\u044F \u0447\u0442\u0435\u043D\u0438\u044F. \u0418\u0441\u0442\u043E\u0440\u0438\u044F \u0441\u043E\u0445\u0440\u0430\u043D\u0435\u043D\u0430; \u0447\u0442\u043E\u0431\u044B \u043F\u0440\u043E\u0434\u043E\u043B\u0436\u0438\u0442\u044C \u0440\u0430\u0431\u043E\u0442\u0443 \u0441 \u0442\u0435\u043A\u0443\u0449\u0438\u043C\u0438 \u043D\u0430\u0441\u0442\u0440\u043E\u0439\u043A\u0430\u043C\u0438, \u0441\u043E\u0437\u0434\u0430\u0439\u0442\u0435 \u043D\u043E\u0432\u044B\u0439 \u0447\u0430\u0442." })) : null, state.error === null ? null : (_jsxs("div", { className: "dsh-qa-error", "data-testid": "qa-surface-error", role: "alert", children: [_jsx("span", { children: state.error }), state.phase === "error" ? (_jsx("button", { type: "button", "data-testid": "qa-surface-error-retry", onClick: () => void controller?.ensureSession(), children: "\u041F\u043E\u0432\u0442\u043E\u0440\u0438\u0442\u044C" })) : null] }))] })] }), _jsx("footer", { className: "dsh-qa-footer", "data-testid": "qa-surface-footer", children: _jsxs("div", { className: "dsh-qa-footer__inner", children: [_jsx(QaApproval, { approvals: state.approvals, onAnswer: handleAnswerApproval }), _jsx(QaQuestions, { questions: state.questions, onAnswer: handleAnswerQuestion, onCancel: handleCancelQuestion, onStop: handleStop, canStop: state.canStop }), _jsxs("div", { className: "dsh-qa-composer-slot", "data-testid": "qa-surface-composer-slot", hidden: state.questions.length > 0, children: [_jsx(QaQueueDock, { rows: state.queue, running: state.phase === "running", canEdit: state.canEditQueue, onEdit: handleQueueEdit, onSendNow: handleQueueSendNow, onRemove: handleQueueRemove }), _jsx(QaComposer, { placeholder: config.branding.placeholder, quickQuestions: empty ? quickQuestions : NO_QUESTIONS, canSend: state.canSend, canStop: state.canStop, running: state.phase === "running", showStop: config.ui.showStop, status: status, attachments: pendingAttachments, limits: limits, slash: state.slash, slashPolicy: config.slashCommands.palette, onAttachmentsChange: setPendingAttachments, onSend: handleSend, onSlashOpen: handleSlashOpen, onStop: handleStop }, state.chatKey)] }), config.branding.disclaimer === "" ? null : (_jsxs("p", { className: "dsh-qa-footer__disclaimer", children: [_jsxs("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", children: [_jsx("circle", { cx: "8", cy: "8", r: "5.75" }), _jsx("path", { d: "M8 7.25v3.5m0-5.25v.5" })] }), config.branding.disclaimer] }))] }) }), !empty
                                                 ? ["left", "right"].map((side) => (_jsx(QaWidthHandle, { side: side, ...widthHandlers }, side)))
-                                                : null] }), _jsx(QaPanelHost, { panels: props.panels, sessionId: state.sessionId, qaToken: accounts?.token() ?? "", renderSlot: props.renderSlot })] })] }), agentsOpen && agentRows.length > 0 ? (_jsx(QaAgentsDrawer, { agents: agentRows, activeId: state.viewingSubagent?.id ?? null, onView: (id, title) => void controller?.viewSubagent(id, title), onClose: () => setAgentsOpen(false) })) : null, rail.railOpen ? (_jsx(QaRightRail, { tabs: railTabs, activeTab: rail.railTab, onTabSelect: rail.selectTab, onClose: rail.close })) : null] })] }));
+                                                : null] }), _jsx(QaPanelHost, { panels: props.panels, sessionId: state.sessionId, qaToken: accounts?.token() ?? "", renderSlot: props.renderSlot })] })] }), agentsOpen && agentRows.length > 0 ? (_jsx(QaAgentsDrawer, { agents: agentRows, activeId: state.viewingSubagent?.id ?? null, onView: (id, title) => void controller?.viewSubagent(id, title), onClose: () => setAgentsOpen(false) })) : null, rail.railOpen ? (_jsx(QaRightRail, { tabs: railTabs, activeTab: rail.railTab, onTabSelect: rail.selectTab, onClose: rail.close })) : null, _jsx(QaRequestQueue, { status: state.requestQueue, onClose: dismissRequestQueue })] })] }));
 }
 //# sourceMappingURL=QaSurface.js.map