@tea-agent/loop-agent 0.44.0-next.1 → 0.44.0-next.3

package/dist/worker/console/static-src/operator-chat/useChatSessions.js

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { runtimeSelectionFromRecord } from "../../chat/runtime-selection.js";
 import { hydrateSessionThread } from "../../chat/turn-process.js";
 import { forgetActiveChatSession, readActiveChatSessionId, rememberActiveChatSession, } from "../../chat/workspace-landing.js";
@@ -179,10 +179,11 @@ function mergeCompactionMessages(messages, compactions) {
  *  compact, plus browser-refresh recovery from the durable session store. */
 export function useChatSessions(params) {
     const { origin, refs, setSession, thread, composer, browser, setError, setNotice, onCompactionChange, setProcessOpen, setAutoScroll, } = params;
-    const { applyActivatedSession, resetForNewSession, setMessages } = thread;
+    const { applyActivatedSession, resetForNewSession, setMessages, refreshSessionTelemetry, } = thread;
     const { seedSession, releaseSession } = composer;
     const { setPreviews, setActivePreviewPath } = browser;
     const { workspaceId, blocked } = params;
+    const visibleWorkspaceIds = useMemo(() => new Set(params.visibleWorkspaceIds), [params.visibleWorkspaceIds]);
     const workspaceQuery = workspaceId
         ? `?workspaceId=${encodeURIComponent(workspaceId)}`
         : "";
@@ -276,10 +277,13 @@ export function useChatSessions(params) {
                 return;
             }
             const sessions = body.sessions ?? [];
-            const durable = sessions.filter((item) => !pendingDeletedIdsRef.current.has(item.sessionId));
-            const optimistic = [...pendingCreatedRowsRef.current.values()].filter((item) => !durable.some((session) => session.sessionId === item.sessionId));
-            // Preserve every workspace's summaries. ChatWorkspaceSidebar applies the
-            // visible recent-item limit independently inside each workspace group.
+            const belongsToVisibleWorkspace = (item) => !item.workspaceId || visibleWorkspaceIds.has(item.workspaceId);
+            const durable = sessions.filter((item) => belongsToVisibleWorkspace(item) &&
+                !pendingDeletedIdsRef.current.has(item.sessionId));
+            const optimistic = [...pendingCreatedRowsRef.current.values()].filter((item) => belongsToVisibleWorkspace(item) &&
+                !durable.some((session) => session.sessionId === item.sessionId));
+            // Preserve summaries for visible workspaces. ChatWorkspaceSidebar applies
+            // the recent-item limit independently inside each workspace group.
             const next = stabilizeSessionList(sessionListRef.current, [...optimistic, ...durable]);
             sessionListRef.current = next;
             setSessionList(next);
@@ -292,7 +296,7 @@ export function useChatSessions(params) {
                 return;
             setError(`会话列表加载失败：${error instanceof Error ? error.message : String(error)}`);
         }
-    }, [origin, blocked, setError]);
+    }, [origin, blocked, setError, visibleWorkspaceIds]);
     const deleteSession = useCallback(async (sessionId) => {
         if (pendingDeletedIdsRef.current.has(sessionId))
             return false;
@@ -500,6 +504,7 @@ export function useChatSessions(params) {
                 sessionStats: body.sessionStats,
                 usage: body.usage,
                 turnTelemetry: body.turnTelemetry,
+                sddSessionIdentity: body.sddDataAlignment ?? null,
                 streaming: visuallyStopped ? false : Boolean(body.session.activeTurnId),
                 turnPhase: body.session.turnPhase ??
                     (body.session.activeTurnId ? "running" : "idle"),
@@ -634,6 +639,7 @@ export function useChatSessions(params) {
                     sessionStats: body.sessionStats,
                     usage: body.usage,
                     turnTelemetry: body.turnTelemetry,
+                    sddSessionIdentity: body.sddDataAlignment ?? null,
                     streaming: visuallyStopped ? false : Boolean(body.session.activeTurnId),
                     turnPhase: body.session.turnPhase ??
                         (body.session.activeTurnId ? "running" : "idle"),
@@ -760,6 +766,7 @@ export function useChatSessions(params) {
             setSelectedSession(created);
             rememberActiveChatSession(window.localStorage, created.workspaceId ?? options?.workspaceId ?? workspaceId, created.sessionId);
             setSession(created);
+            void refreshSessionTelemetry();
             return created;
         }
         catch (e) {
@@ -783,6 +790,7 @@ export function useChatSessions(params) {
         activateSession,
         blocked,
         workspaceId,
+        refreshSessionTelemetry,
     ]);
     // Phase-1: fork / in-session branch / mainline switch UI deferred; API routes remain.
     /** Single compact helper for toolbar + `/compact <instructions>` (AC-1). */

package/dist/worker/console/static-src/operator-chat/useChatStream.js

@@ -1,5 +1,6 @@
 import { useCallback, useEffect } from "react";
 import { formatOperatorUserError } from "../../operator-user-error.js";
+import { inspectChatSseContinuity, readChatStreamReadyCursor, selectChatSseRepairBlocks, selectLaterChatEventId, } from "./chat-stream-continuity.js";
 import { confirmationToken, requestId, sleep } from "./format.js";
 import { classifyCreateTurnNetworkFailure, classifyCreateTurnResponse, createPendingSubmission, decideSubmissionRoute, isRuntimeBusyUnion, isSubmissionCurrent, isTerminalTurnState, keepAmbiguousAfterRetry, reconcileDeferredSubmissionFromState, reconcilePendingSubmissionFromState, resolveAmbiguousFromState, } from "./turn-submission.js";
 import { applyAbortDecision, applyPendingReconcileDecision, classifyAbortResponse, markStopRequested, operatorChatAbortUrl, operatorChatEventsUrl, operatorChatStateUrl, operatorChatTurnsUrl, releaseOwnershipOnTerminalEvidence, releaseSubmitOwnership as releaseOwnershipBag, requestStopOnOwnership, settleCreateTurnOutcome, turnPhaseFromOwnership, visualTurnPhaseFromOwnership, } from "./turn-stream-controller.js";
@@ -104,6 +105,7 @@ export function useChatStream(params) {
      * means replay cannot render duplicate messages while live text remains
      * smooth (M4.1/M4.3). */
     const openEventsStream = useCallback(async (sessionId, generation, signal) => {
+        const gapReplayBuffer = [];
         while (!signal.aborted) {
             const state = refs.eventsStreamStateRef.current;
             if (!state ||
@@ -129,21 +131,38 @@ export function useChatStream(params) {
                 const decoder = new TextDecoder();
                 let buffer = "";
                 let replay = true;
+                let replayRepairNeeded = false;
+                let liveContinuityCursor = null;
                 const fallbackAssistantId = requestId("a");
-                for (;;) {
+                readLoop: for (;;) {
                     const { done, value } = await reader.read();
                     if (done)
                         break;
                     buffer += decoder.decode(value, { stream: true });
                     const blocks = buffer.split("\n\n");
                     buffer = blocks.pop() ?? "";
-                    for (const block of blocks) {
+                    for (let blockIndex = 0; blockIndex < blocks.length; blockIndex += 1) {
+                        const block = blocks[blockIndex];
+                        if (block === undefined)
+                            continue;
+                        if (!replay) {
+                            const continuity = inspectChatSseContinuity(block, liveContinuityCursor);
+                            if (continuity.action === "reconnect") {
+                                // Buffer this block and the rest of the decoded chunk before closing
+                                // the reader. Retained replay repairs structure; the buffer preserves
+                                // cumulative text frames that persistence may have coalesced away.
+                                gapReplayBuffer.push(...blocks.slice(blockIndex));
+                                replayRepairNeeded = true;
+                                break readLoop;
+                            }
+                        }
                         if (sseEventName(block) === "stream_ready") {
                             const current = refs.eventsStreamStateRef.current;
                             if (current?.sessionId === sessionId &&
                                 current.generation === generation)
                                 current.ready = true;
                             replay = false;
+                            liveContinuityCursor = readChatStreamReadyCursor(block);
                             // Fall through: the applier owns the buffered-replay flush and
                             // returns immediately for this event. `continue` here silently
                             // dropped that flush, so a reconnect that landed after the
@@ -155,15 +174,38 @@ export function useChatStream(params) {
                             targetSessionId: sessionId,
                             generation,
                         });
-                        if (eventId)
-                            refs.lastEventIdRef.current = eventId;
+                        if (eventId) {
+                            refs.lastEventIdRef.current = selectLaterChatEventId(refs.lastEventIdRef.current, eventId);
+                            if (!replay)
+                                liveContinuityCursor = selectLaterChatEventId(liveContinuityCursor, eventId);
+                        }
+                        if (sseEventName(block) === "stream_ready" &&
+                            gapReplayBuffer.length > 0) {
+                            const repairedBlocks = selectChatSseRepairBlocks(gapReplayBuffer.splice(0), liveContinuityCursor);
+                            for (const repairedBlock of repairedBlocks) {
+                                const repairedEventId = applySseBlock(repairedBlock, refs.assistantIdRef.current ?? fallbackAssistantId, {
+                                    replay: false,
+                                    targetSessionId: sessionId,
+                                    generation,
+                                });
+                                if (!repairedEventId)
+                                    continue;
+                                refs.lastEventIdRef.current = selectLaterChatEventId(refs.lastEventIdRef.current, repairedEventId);
+                            }
+                        }
                     }
                 }
+                if (replayRepairNeeded) {
+                    await reader.cancel().catch(() => undefined);
+                }
                 const current = refs.eventsStreamStateRef.current;
                 if (current?.sessionId === sessionId &&
                     current.generation === generation)
                     current.ready = false;
-                await sleep(1_000, signal);
+                // A detected hole is expected to be immediately recoverable from the
+                // durable ring. Other EOFs retain the normal reconnect backoff.
+                if (!replayRepairNeeded)
+                    await sleep(1_000, signal);
             }
             catch {
                 if (signal.aborted)

package/dist/worker/console/static-src/operator-chat/useChatThread.js

@@ -140,6 +140,8 @@ export function useChatThread(params) {
     const [usage, setUsage] = useState(EMPTY_USAGE);
     const [sessionStats, setSessionStats] = useState(EMPTY_SESSION_STATS);
     const [turnTelemetry, setTurnTelemetry] = useState([]);
+    const [operatorActions, setOperatorActions] = useState([]);
+    const [sddSessionIdentity, setSddSessionIdentity] = useState(null);
     const [streaming, setStreaming] = useState(false);
     const [turnPhase, setTurnPhase] = useState("idle");
     const [deferredTurn, setDeferredTurn] = useState(null);
@@ -167,6 +169,7 @@ export function useChatThread(params) {
             if (body.usage)
                 setUsage(body.usage);
             setTurnTelemetry(body.turnTelemetry ?? []);
+            setSddSessionIdentity(body.sddDataAlignment ?? null);
         }
         catch {
             // Telemetry is supplementary; the normal event stream remains authoritative.
@@ -188,6 +191,8 @@ export function useChatThread(params) {
         setPendingQuestion,
         setTodos,
         setGoal,
+        setOperatorActions,
+        setSddSessionIdentity,
         setStreamingAssistantId,
         setUnread,
         setOperationCards,
@@ -421,6 +426,8 @@ export function useChatThread(params) {
         setUsage(EMPTY_USAGE);
         setSessionStats(EMPTY_SESSION_STATS);
         setTurnTelemetry([]);
+        setOperatorActions([]);
+        setSddSessionIdentity(null);
         setStreaming(false);
         setTurnPhase("idle");
         setDeferredTurn(null);
@@ -477,6 +484,8 @@ export function useChatThread(params) {
         setUsage(next.usage ?? EMPTY_USAGE);
         setSessionStats(next.sessionStats ?? EMPTY_SESSION_STATS);
         setTurnTelemetry(next.turnTelemetry ?? []);
+        setOperatorActions([]);
+        setSddSessionIdentity(next.sddSessionIdentity ?? null);
         refs.usageResponseKeysRef.current = new Set();
         setStreaming(visuallyStopped ? false : next.streaming);
         setTurnPhase(visuallyStopped
@@ -500,13 +509,15 @@ export function useChatThread(params) {
      *  operation/human-gate/artifact/interview cards, which the reconnected tail
      *  stream will not replay (they live in the ring, already consumed). */
     const recoverSession = useCallback(async (targetSessionId) => {
+        const targetGeneration = refs.sessionGenerationRef.current;
         try {
             const res = await fetch(`${origin}/api/operator/v1/chat/sessions/${encodeURIComponent(targetSessionId)}`, { credentials: "include" });
             if (!res.ok)
                 return false;
             const body = (await res.json());
             if (!body.session ||
-                refs.sessionRef.current?.sessionId !== targetSessionId)
+                refs.sessionRef.current?.sessionId !== targetSessionId ||
+                refs.sessionGenerationRef.current !== targetGeneration)
                 return false;
             const activeTurnId = body.session.activeTurnId ?? null;
             const visuallyStopped = body.session.turnPhase === "stopping";
@@ -526,6 +537,7 @@ export function useChatThread(params) {
             if (body.usage)
                 setUsage(body.usage);
             setTurnTelemetry(body.turnTelemetry ?? []);
+            setSddSessionIdentity(body.sddDataAlignment ?? null);
             // Resume the events stream from the snapshot tail so the next
             // reconnect never immediately re-expires (AC-003). The refs below
             // are reset so any follow-up tail replay re-applies cleanly.
@@ -534,7 +546,13 @@ export function useChatThread(params) {
             refs.turnAssistantIdsRef.current = new Map();
             refs.sealedAssistantIdsRef.current = new Set();
             const hydrated = hydrateSessionThread(body.session.messages ?? []);
-            const pending = refs.pendingSubmissionRef.current;
+            // Recovery is addressed to targetSessionId, so an optimistic
+            // submission from another session must never be projected into
+            // this snapshot (the activation path enforces the same owner gate).
+            const pending = refs.pendingSubmissionRef.current?.sessionId === targetSessionId &&
+                refs.pendingSubmissionRef.current.sessionGeneration === targetGeneration
+                ? refs.pendingSubmissionRef.current
+                : undefined;
             const recovered = mergePendingSubmissionOnHydration(hydrated.messages, pending
                 ? {
                     clientRequestId: pending.clientRequestId,
@@ -599,6 +617,9 @@ export function useChatThread(params) {
         usage,
         sessionStats,
         turnTelemetry,
+        operatorActions,
+        sddSessionIdentity,
+        setSddSessionIdentity,
         streaming,
         setStreaming,
         turnPhase,
@@ -621,6 +642,7 @@ export function useChatThread(params) {
         applySseBlock,
         loadTaskContext,
         applyOperationLinkMutation,
+        refreshSessionTelemetry,
         resetForNewSession,
         applyActivatedSession,
         recoverSession,

package/dist/worker/console/workspace-context.js

@@ -265,6 +265,7 @@ export async function createWorkspaceContext(record, deps) {
     const aimaxAuth = new AimaxAuthReader();
     await aimaxAuth.getToken();
     const sddDataAlignment = new SddDataAlignmentService(chatStore, aimaxAuth, deps.fetchImpl);
+    actionContext.sddDataAlignment = sddDataAlignment;
     const chatEventEpoch = randomBytes(12).toString("hex");
     const chatEvents = createChatEventStore({
         appData,
@@ -318,6 +319,7 @@ export async function createWorkspaceContext(record, deps) {
         terminalRegistry,
         scmService,
         browserAutomation,
+        globalAppDataRoot: appData.root,
     });
     let chatRouteDeps;
     const goalRoundDriver = new GoalRoundDriver((sessionId) => driveGoalRound(chatRouteDeps, sessionId));

package/dist/worker/observe/static/console-theme.css

@@ -0,0 +1,174 @@
+/* Opt-in palettes. Repeat tokens at the Inspect boundary: it owns local defaults
+ * and is loaded after the Console stylesheet. Specificity keeps load order safe. */
+:root[data-console-theme="midnight"],
+:root[data-console-theme="midnight"] body[data-shell="observe-console"],
+:root[data-console-theme="midnight"] .inspect-workspace-root {
+	color-scheme: dark;
+	--canvas: #1c222a;
+	--canvas-soft: #202730;
+	--surface: #252d37;
+	--surface-muted: #2d3641;
+	--ink: #dce2e9;
+	--surface-ink: #dce2e9;
+	--body: #bcc5d0;
+	--muted: #a1acba;
+	--muted-soft: #909eaf;
+	--muted-ink: #a1acba;
+	--hairline: #353f4b;
+	--hairline-strong: #526171;
+	--orange: #a0bcd3;
+	--orange-active: #b8cfe0;
+	--blue: #a0bcd3;
+	--brand: #b2aacb;
+	--theme-action: #4d6b86;
+	--theme-action-hover: #557590;
+	--theme-on-action: #ffffff;
+	--green: #99c5b0;
+	--amber: #d3b783;
+	--warn: #d3b783;
+	--red: #dea4ac;
+	--peach: #303e4d;
+	--mint: #2d403b;
+	--lavender: #393746;
+	--gold: #c3ac80;
+	--shadow-sm: 0 1px 2px rgb(0 0 0 / 12%);
+	--shadow-panel: 0 1px 2px rgb(0 0 0 / 12%), 0 6px 18px rgb(0 0 0 / 10%);
+	--shadow-soft: 0 8px 24px rgb(0 0 0 / 18%);
+	--shadow-lg: 0 16px 40px rgb(0 0 0 / 24%);
+}
+
+:root[data-console-theme="daylight"],
+:root[data-console-theme="daylight"] body[data-shell="observe-console"],
+:root[data-console-theme="daylight"] .inspect-workspace-root {
+	color-scheme: light;
+	--canvas: #eef0f2;
+	--canvas-soft: #f3f4f5;
+	--surface: #f9fafb;
+	--surface-muted: #e5e9ed;
+	--ink: #303b47;
+	--surface-ink: #303b47;
+	--body: #4b5867;
+	--muted: #5e6a78;
+	--muted-soft: #697583;
+	--muted-ink: #5e6a78;
+	--hairline: #dce1e6;
+	--hairline-strong: #b5bfc9;
+	--orange: #466581;
+	--orange-active: #365570;
+	--blue: #466581;
+	--brand: #706387;
+	--theme-action: #536f88;
+	--theme-action-hover: #466079;
+	--theme-on-action: #ffffff;
+	--green: #3e735d;
+	--amber: #85632d;
+	--warn: #85632d;
+	--red: #a04f5c;
+	--peach: #dfe7ee;
+	--mint: #e0eae4;
+	--lavender: #e7e3ed;
+	--gold: #927644;
+	--shadow-sm: 0 1px 2px rgb(35 45 58 / 4%);
+	--shadow-panel: 0 1px 2px rgb(35 45 58 / 3%), 0 6px 18px rgb(35 45 58 / 3%);
+	--shadow-soft: 0 8px 24px rgb(35 45 58 / 6%);
+	--shadow-lg: 0 16px 40px rgb(35 45 58 / 9%);
+}
+
+/* Only the two added themes override component literals; original warm paper
+ * remains byte-for-byte defined by its existing stylesheets. */
+:root:is([data-console-theme="midnight"], [data-console-theme="daylight"]) {
+	--orange-soft: color-mix(in srgb, var(--orange) 10%, var(--surface));
+	background: var(--canvas);
+
+	body[data-shell="observe-console"], .inspect-workspace-root {
+		--orange-soft: color-mix(in srgb, var(--orange) 10%, var(--surface));
+	}
+
+	::selection { background: color-mix(in srgb, var(--blue) 32%, var(--surface)); }
+
+	.oc-composer-shell, .console-update-channel, .console-update-button,
+	.panel-output { background: var(--surface); color: var(--ink); }
+	.console-update-channel, .console-update-button { border-color: var(--hairline-strong); }
+	.console-update-channel-label { color: var(--body); }
+	.console-update-error, .console-update-result-error { color: var(--red); }
+	.console-update-badge { background: var(--surface-muted); color: var(--amber); }
+
+	.oc-bubble-user { background: color-mix(in srgb, var(--blue) 9%, var(--surface)); }
+	.oc-composer-shell { box-shadow: var(--shadow-panel); }
+	.oc-bubble-assistant .oc-codeblock { background: var(--canvas-soft); }
+	.oc-session-scroll, .oc-tree-scroll { background: var(--canvas-soft); }
+	.oc-sidebar-new-session:is(:hover, :focus-visible),
+	.oc-hero-chip:is(:hover, :focus-visible, [aria-expanded="true"]) { background: var(--surface-muted); }
+
+	.night-health-pill, .models-status-pill[data-state="ready"],
+	.models-probe-item.is-ok .models-probe-badge {
+		background: color-mix(in srgb, var(--green) 14%, var(--surface));
+	}
+	.night-health-pill.is-bad, .models-status-pill[data-state="setup-required"],
+	.models-probe-item.is-bad .models-probe-badge, .dag-error-node {
+		background: color-mix(in srgb, var(--red) 12%, var(--surface));
+	}
+	.models-status-pill[data-state="degraded"], .models-degraded-note,
+	.dag-active-node { background: var(--orange-soft); }
+	.liveness-timeout-risk { background: color-mix(in srgb, var(--amber) 12%, var(--surface)); }
+	.night-strip-icon { color: var(--brand); }
+
+	/* Quiet selected surfaces keep navigation secondary to the content. */
+	.och-mode-thumb { background: var(--surface); box-shadow: var(--shadow-sm); }
+	.och-mode-btn.och-on { color: var(--ink); }
+	.dag-inspector-tab[aria-selected="true"],
+	.dag-graph-mode-tab[aria-selected="true"],
+	#dag-inspector-panel-prompt-restart button.prompt-restart-mode-option.is-selected {
+		background: var(--surface-muted);
+		color: var(--ink);
+	}
+
+	/* Accent text needs a different luminance from a white-labelled action. */
+	.btn-primary, button.btn-primary, .oc-send, .oc-question-button.is-primary,
+	.oc-scm-commitbtn, .skip-link, .dags-page-num.is-current,
+	.dag-action-primary, .context-export-submit,
+	#dag-inspector-panel-prompt-restart button.prompt-restart-submit:not(.is-secondary) {
+		background: var(--theme-action);
+		border-color: var(--theme-action);
+		color: var(--theme-on-action);
+		box-shadow: var(--shadow-sm);
+	}
+	.btn-primary:hover:not(:disabled), button.btn-primary:hover:not(:disabled),
+	.oc-send:hover:not(:disabled), .oc-question-button.is-primary:hover:not(:disabled),
+	.oc-scm-commitbtn:hover:not(:disabled), .dag-action-primary:hover:not(:disabled),
+	.context-export-submit:hover:not(:disabled),
+	#dag-inspector-panel-prompt-restart button.prompt-restart-submit:not(.is-secondary):hover {
+		background: var(--theme-action-hover);
+		border-color: var(--theme-action-hover);
+	}
+	.och-context-return, .process-timeline-autoscroll::after {
+		background: var(--surface-muted);
+		color: var(--ink);
+	}
+	.markdown-output pre, .output-block { background: var(--canvas-soft); color: var(--ink); }
+	.context-export-ticket { background: var(--surface-muted); color: var(--ink); }
+	.context-export-ticket-safety { color: var(--green); }
+	.context-export-ticket-safety.is-risk { color: var(--red); }
+}
+
+/* Syntax highlighting is independently hardcoded to a light palette. */
+:root[data-console-theme="midnight"] {
+	/* The SVG brand uses dark strokes; provide a subtle light backing, not a filter. */
+	.och-brand-mark, .oc-hero img { background: #aebac7; border-radius: 6px; }
+	.hljs { color: var(--ink); background: var(--canvas-soft); }
+	.hljs-doctag, .hljs-keyword, .hljs-meta .hljs-keyword,
+	.hljs-template-tag, .hljs-template-variable, .hljs-type,
+	.hljs-variable.language_ { color: #c7afcf; }
+	.hljs-title, .hljs-title.class_, .hljs-title.class_.inherited__,
+	.hljs-title.function_ { color: #b9b3d1; }
+	.hljs-attr, .hljs-attribute, .hljs-literal, .hljs-meta, .hljs-number,
+	.hljs-operator, .hljs-selector-attr, .hljs-selector-class,
+	.hljs-selector-id, .hljs-variable, .hljs-section { color: var(--blue); }
+	.hljs-meta .hljs-string, .hljs-regexp, .hljs-string,
+	.hljs-name, .hljs-quote, .hljs-selector-pseudo, .hljs-selector-tag { color: var(--green); }
+	.hljs-built_in, .hljs-symbol, .hljs-bullet { color: var(--amber); }
+	.hljs-code, .hljs-comment, .hljs-formula { color: var(--muted); }
+	.hljs-subst, .hljs-emphasis, .hljs-strong { color: var(--ink); }
+	.hljs-addition { color: var(--green); background: var(--mint); }
+	.hljs-deletion { color: var(--red); background: color-mix(in srgb, var(--red) 12%, var(--surface)); }
+}

package/dist/worker/observe/static/console-theme.js

@@ -0,0 +1,36 @@
+/** Shared Console theme identities; the default leaves the original palette intact. */
+export const CONSOLE_THEMES = Object.freeze([
+	{ id: "default", label: "默认" },
+	{ id: "midnight", label: "深色" },
+	{ id: "daylight", label: "浅色" },
+]);
+
+const STORAGE_KEY = "loop-console.theme.v1";
+
+function normalizeTheme(value) {
+	return CONSOLE_THEMES.some((theme) => theme.id === value) ? value : "default";
+}
+
+export function applyStoredConsoleTheme() {
+	let value;
+	try {
+		value = window.localStorage.getItem(STORAGE_KEY);
+	} catch {
+		// Storage can be disabled, including the localStorage getter itself.
+	}
+	const theme = normalizeTheme(value);
+	document.documentElement.dataset.consoleTheme = theme;
+	return theme;
+}
+
+export function setConsoleTheme(value) {
+	const theme = normalizeTheme(value);
+	// Apply before persistence: a storage failure must not disable the picker.
+	document.documentElement.dataset.consoleTheme = theme;
+	try {
+		window.localStorage.setItem(STORAGE_KEY, theme);
+	} catch {
+		// The document attribute remains the in-memory preference.
+	}
+	return theme;
+}

package/dist/worker/observe/static/operator-chrome.css

@@ -8,6 +8,84 @@
  * 的暖白 token 保持一致；宿主样式表已定义同名变量时以宿主为准。
  */
 
+@import "./console-theme.css";
+
+.och-theme {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	flex: none;
+	color: var(--och-muted);
+	font-size: 12px;
+}
+
+.och-theme-trigger {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 26px;
+	min-height: 26px;
+	padding: 0;
+	border: 1px solid transparent;
+	border-radius: 6px;
+	background: transparent;
+	color: var(--och-body);
+	font: inherit;
+	cursor: pointer;
+}
+
+.och-theme-trigger:hover,
+.och-theme-trigger[aria-expanded="true"] {
+	background: var(--och-surface-muted);
+	color: var(--och-ink);
+}
+
+.och-theme-trigger:focus-visible,
+.och-theme-option:focus-visible {
+	outline: 2px solid var(--och-orange);
+	outline-offset: 2px;
+}
+
+/* Native popover renders in the top layer, outside the narrow header's clip. */
+.och-theme-menu {
+	position: fixed;
+	inset: auto;
+	box-sizing: border-box;
+	width: 112px;
+	margin: 0;
+	padding: 4px;
+	border: 1px solid var(--och-hairline);
+	border-radius: 8px;
+	background: var(--och-surface);
+	color: var(--och-ink);
+	box-shadow: var(--shadow-soft);
+	font: inherit;
+}
+
+.och-theme-option {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	width: 100%;
+	min-height: 28px;
+	padding: 4px 8px;
+	border: 0;
+	border-radius: 4px;
+	background: transparent;
+	color: inherit;
+	font: inherit;
+	cursor: pointer;
+}
+
+.och-theme-option:hover,
+.och-theme-option[aria-pressed="true"] {
+	background: var(--och-surface-muted);
+}
+
+.och-theme-option[aria-pressed="true"]::after {
+	content: "✓";
+}
+
 .och {
 	--och-canvas: var(--canvas, #f3f4f6);
 	--och-surface: var(--surface, #fbfcfd);
@@ -622,7 +700,14 @@
 	.och-inner {
 		padding-inline: 12px;
 	}
+	.och-theme {
+		position: absolute;
+		top: 46px;
+		right: 0;
+	}
 	.och-global {
+		height: 84px;
+		padding-bottom: 40px;
 		gap: 6px;
 		overflow-x: auto;
 		scrollbar-width: none;

package/dist/worker/observe/static/operator-chrome.js

@@ -12,6 +12,8 @@
  */
 
 import { withWorkspaceQuery } from "./router.js";
+import { CONSOLE_THEMES, applyStoredConsoleTheme, setConsoleTheme } from "./console-theme.js";
+export { CONSOLE_THEMES } from "./console-theme.js";
 
 export const OPERATE_TABS = Object.freeze([
 	{ id: "tasks", label: "任务", href: "/#/operate/tasks" },
@@ -296,6 +298,13 @@ export function buildOperatorChromeModel(config) {
 
 const SVG_NS = "http:" + "//www.w3.org/2000/svg";
 const ICONS = Object.freeze({
+	theme: {
+		size: 16,
+		parts: [
+			["circle", { cx: 12, cy: 12, r: 9 }],
+			["path", { d: "M12 3a9 9 0 0 1 0 18Z", fill: "currentColor", stroke: "none" }],
+		],
+	},
 	radar: {
 		size: 17,
 		parts: [
@@ -426,6 +435,7 @@ function readWorkspaceCollapsedPref() {
 export function mountOperatorChrome(root, config = {}) {
 	if (!root) throw new Error("mountOperatorChrome: root element is required");
 	root.classList.add("och-host");
+	if (!document.documentElement.dataset.consoleTheme) applyStoredConsoleTheme();
 
 	let currentConfig = { ...config };
 	let popoverOpen = false;
@@ -701,6 +711,47 @@ export function mountOperatorChrome(root, config = {}) {
 
 		global.appendChild(el("span", "och-spacer"));
 
+		const themePicker = el("div", "och-theme");
+		const trigger = el("button", "och-theme-trigger");
+		trigger.type = "button";
+		trigger.title = "主题";
+		trigger.setAttribute("aria-label", "主题");
+		trigger.appendChild(makeIcon("theme"));
+		trigger.setAttribute("aria-expanded", "false");
+		const menu = el("div", "och-theme-menu");
+		menu.id = `${popoverId}-theme`;
+		menu.popover = "auto";
+		menu.setAttribute("role", "group");
+		menu.setAttribute("aria-label", "选择主题");
+		trigger.setAttribute("aria-controls", menu.id);
+		trigger.popoverTargetElement = menu;
+		menu.addEventListener("beforetoggle", (event) => {
+			if (event.newState !== "open") return;
+			const rect = trigger.getBoundingClientRect();
+			menu.style.top = `${rect.bottom + 6}px`;
+			menu.style.left = `${Math.max(8, Math.min(rect.right - 112, window.innerWidth - 120))}px`;
+		});
+		menu.addEventListener("toggle", (event) => {
+			trigger.setAttribute("aria-expanded", String(event.newState === "open"));
+		});
+		for (const theme of CONSOLE_THEMES) {
+			const option = el("button", "och-theme-option", theme.label);
+			option.type = "button";
+			option.dataset.theme = theme.id;
+			option.setAttribute("aria-pressed", String(theme.id === (document.documentElement.dataset.consoleTheme ?? "default")));
+			option.addEventListener("click", () => {
+				setConsoleTheme(theme.id);
+				for (const item of menu.children) {
+					item.setAttribute("aria-pressed", String(item.dataset.theme === theme.id));
+				}
+				menu.hidePopover();
+				trigger.focus();
+			});
+			menu.appendChild(option);
+		}
+		themePicker.append(trigger, menu);
+		global.appendChild(themePicker);
+
 		if (model.statusVisible && model.freshness) {
 			const fresh = el("span", "och-fresh");
 			fresh.setAttribute("aria-label", "数据新鲜度");