@circuitwall/jarela 0.8.0 → 0.8.1

package/.next/standalone/.next/static/chunks/app/{page-108f526cb6e48b7b.js → page-31e4d0ad258be21a.js}

@@ -25,9 +25,26 @@ function readStored() {
         return "system";
     }
 }
+const LIGHT_CHROME = "#ffffff";
+const DARK_CHROME = "#09090b";
+function resolveChrome(theme) {
+    if (theme === "light") return LIGHT_CHROME;
+    if (theme === "dark") return DARK_CHROME;
+    if (false) {}
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? DARK_CHROME : LIGHT_CHROME;
+}
+// Keep the single <meta name="theme-color"> tag (installed by the pre-paint
+// script in app/layout.tsx) aligned with the active surface so the PWA's
+// desktop title bar and mobile address bar match the theme.
+function syncChrome(theme) {
+    if (typeof document === "undefined") return;
+    const meta = document.querySelector('meta[name="theme-color"]');
+    if (meta) meta.setAttribute("content", resolveChrome(theme));
+}
 function apply(theme) {
     if (typeof document === "undefined") return;
     document.documentElement.setAttribute("data-theme", theme);
+    syncChrome(theme);
 }
 const ThemeContext = /*#__PURE__*/ (0,react__WEBPACK_IMPORTED_MODULE_1__.createContext)(null);
 function ThemeProvider({ children }) {
@@ -36,7 +53,16 @@ function ThemeProvider({ children }) {
     // React state to whatever the script (or localStorage) decided.
     const [theme, setThemeState] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)("system");
     (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(()=>{
-        setThemeState(readStored());
+        const stored = readStored();
+        setThemeState(stored);
+        // When in "system" mode, mirror OS-level changes into the PWA chrome.
+        if (false) {}
+        const mq = window.matchMedia("(prefers-color-scheme: dark)");
+        const onChange = ()=>{
+            if (readStored() === "system") syncChrome("system");
+        };
+        mq.addEventListener?.("change", onChange);
+        return ()=>mq.removeEventListener?.("change", onChange);
     }, []);
     const setTheme = (0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)((t)=>{
         setThemeState(t);
@@ -63,7 +89,7 @@ function useTheme() {
 
 /***/ }),
 
-/***/ 4633:
+/***/ 1742:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -675,9 +701,112 @@ function useUrlSync() {
     ]);
 }
 
+;// ./lib/ui/loading.ts
+/* __next_internal_client_entry_do_not_use__ startLoading,useLoadingCount,useTrackLoading,pushActivity,useActivityLabel auto */ // Tiny global loading-state store. Any component can register itself as
+// "currently busy"; the top-level progress bar reads the aggregate count and
+// shows itself whenever count > 0. Module-level state is fine here — all
+// usage is client-side and there's exactly one progress bar per page.
+
+let activeCount = 0;
+const loading_listeners = new Set();
+function loading_notify() {
+    for (const l of loading_listeners)l(activeCount);
+}
+// Returns a cleanup function — call it when work finishes (or on effect unmount).
+function startLoading() {
+    activeCount += 1;
+    loading_notify();
+    let cleared = false;
+    return ()=>{
+        if (cleared) return;
+        cleared = true;
+        activeCount = Math.max(0, activeCount - 1);
+        loading_notify();
+    };
+}
+// Subscribe to the aggregate count. Re-renders the caller when it changes.
+function useLoadingCount() {
+    const [n, setN] = useState(activeCount);
+    useEffect(()=>{
+        const fn = (v)=>setN(v);
+        loading_listeners.add(fn);
+        setN(activeCount);
+        return ()=>{
+            loading_listeners.delete(fn);
+        };
+    }, []);
+    return n;
+}
+// Convenience: tracks `active` automatically. When `active` flips true, register;
+// when it flips false (or component unmounts), unregister.
+function useTrackLoading(active) {
+    (0,react.useEffect)(()=>{
+        if (!active) return;
+        return startLoading();
+    }, [
+        active
+    ]);
+}
+// ---------------------------------------------------------------------------
+// Activity label channel. Independent of the loading count: callers that
+// want to surface a human-readable "what's happening right now" string
+// (e.g. "thinking…", "using web_search") push onto a small stack. The
+// header reads the top of the stack and renders it inline.
+// ---------------------------------------------------------------------------
+let activitySeq = 0;
+const activityStack = [];
+const activityListeners = new Set();
+function currentActivity() {
+    return activityStack.length > 0 ? activityStack[activityStack.length - 1].label : null;
+}
+function notifyActivity() {
+    const top = currentActivity();
+    for (const l of activityListeners)l(top);
+}
+// Push a label and return a setter+clearer for the same slot. The setter
+// keeps the same stack id so updating a label (e.g. tool name changing
+// mid-run) doesn't reorder layered activities. `clear` removes the slot.
+function pushActivity(label) {
+    const id = ++activitySeq;
+    activityStack.push({
+        id,
+        label
+    });
+    notifyActivity();
+    return {
+        set (next) {
+            const slot = activityStack.find((s)=>s.id === id);
+            if (slot && slot.label !== next) {
+                slot.label = next;
+                notifyActivity();
+            }
+        },
+        clear () {
+            const idx = activityStack.findIndex((s)=>s.id === id);
+            if (idx >= 0) {
+                activityStack.splice(idx, 1);
+                notifyActivity();
+            }
+        }
+    };
+}
+function useActivityLabel() {
+    const [label, setLabel] = (0,react.useState)(currentActivity());
+    (0,react.useEffect)(()=>{
+        const fn = (v)=>setLabel(v);
+        activityListeners.add(fn);
+        setLabel(currentActivity());
+        return ()=>{
+            activityListeners.delete(fn);
+        };
+    }, []);
+    return label;
+}
+
 ;// ./hooks/useSSE.ts
 /* __next_internal_client_entry_do_not_use__ useSSE auto */ 
 
+
 // Single-transport agent run hook (ADR-0008): one POST to submit + one
 // `EventSource` (under the hood) to subscribe. The hook keeps a stable
 // surface for `ChatView` — `start`, `attach`, `stop`, `streaming`,
@@ -691,13 +820,36 @@ function useSSE(onDone) {
     const [error, setError] = (0,react.useState)(null);
     const abortRef = (0,react.useRef)(null);
     const threadIdRef = (0,react.useRef)(null);
+    // Live "what is the agent doing" label, surfaced in the app header. The
+    // slot stays open for the duration of one run; we mutate its label as
+    // tool calls come and go so the header text updates in place without
+    // pushing/popping (which would flicker stacked activities).
+    const activityRef = (0,react.useRef)(null);
+    const activeToolsRef = (0,react.useRef)(new Map());
+    const openActivity = (0,react.useCallback)((initial)=>{
+        activityRef.current?.clear();
+        activeToolsRef.current.clear();
+        activityRef.current = pushActivity(initial);
+    }, []);
+    const closeActivity = (0,react.useCallback)(()=>{
+        activityRef.current?.clear();
+        activityRef.current = null;
+        activeToolsRef.current.clear();
+    }, []);
+    // Always release the activity label if the hook unmounts mid-run, so a
+    // dangling "thinking…" can't outlive its session.
+    (0,react.useEffect)(()=>closeActivity, [
+        closeActivity
+    ]);
     const consume = (0,react.useCallback)(async (iterable)=>{
         for await (const raw of iterable){
             const event = JSON.parse(raw);
             if (event.type === "text_delta") {
                 setStreamingContent((p)=>p + event.delta);
+                activityRef.current?.set("Responding…");
             } else if (event.type === "thinking_delta") {
                 setThinkingContent((p)=>p + event.delta);
+                if (activeToolsRef.current.size === 0) activityRef.current?.set("Thinking…");
             } else if (event.type === "tool_call") {
                 setToolEvents((prev)=>[
                         ...prev,
@@ -708,6 +860,8 @@ function useSSE(onDone) {
                             payload: event.arguments
                         }
                     ]);
+                activeToolsRef.current.set(event.id, event.name);
+                activityRef.current?.set(`Using ${event.name}…`);
             } else if (event.type === "tool_result") {
                 setToolEvents((prev)=>[
                         ...prev,
@@ -718,8 +872,12 @@ function useSSE(onDone) {
                             payload: event.result
                         }
                     ]);
+                activeToolsRef.current.delete(event.id);
+                const remaining = activeToolsRef.current.values().next().value;
+                activityRef.current?.set(remaining ? `Using ${remaining}…` : "Thinking…");
             } else if (event.type === "done") {
                 setStreaming(false);
+                closeActivity();
                 // Don't clear streamingContent here — it would cause a visual gap
                 // between "stream done" and "refetched messages arrived" where the
                 // assistant bubble disappears for ~100ms. The consumer (ChatView)
@@ -734,12 +892,14 @@ function useSSE(onDone) {
                 setStreaming(false);
                 setStreamingContent("");
                 setThinkingContent("");
+                closeActivity();
                 setError(event.message);
                 break;
             }
         }
     }, [
-        onDone
+        onDone,
+        closeActivity
     ]);
     const start = (0,react.useCallback)(async (threadId, message, options, attachments)=>{
         abortRef.current?.abort();
@@ -751,6 +911,7 @@ function useSSE(onDone) {
         setThinkingContent("");
         setToolEvents([]);
         setError(null);
+        openActivity("Sending…");
         try {
             // Command: register the run server-side. 202 = we own this turn; 409
             // = another tab/device owns it (caller re-queues, we still subscribe
@@ -770,12 +931,15 @@ function useSSE(onDone) {
             setStreaming(false);
             setStreamingContent("");
             setThinkingContent("");
+            closeActivity();
             return {
                 accepted: false
             };
         }
     }, [
-        consume
+        consume,
+        openActivity,
+        closeActivity
     ]);
     // Stop the active run. Three-part: (1) tell the server to abort the
     // agent stream so the LangGraph loop unwinds; (2) tear down local
@@ -795,10 +959,12 @@ function useSSE(onDone) {
         setStreaming(false);
         // Keep streamingContent and thinkingContent visible until the next
         // start()/attach() — same pattern as the `done` branch in consume().
+        closeActivity();
         abortRef.current?.abort();
         onDone?.();
     }, [
-        onDone
+        onDone,
+        closeActivity
     ]);
     // Attach to an in-flight run for the given thread (server-side run kept
     // going because the user switched away, or because this is a fresh
@@ -817,6 +983,7 @@ function useSSE(onDone) {
         setThinkingContent("");
         setToolEvents([]);
         setError(null);
+        openActivity("Reconnecting…");
         try {
             await consume((0,client/* subscribeRun */._C)(threadId, ctrl.signal));
         } catch (err) {
@@ -825,13 +992,16 @@ function useSSE(onDone) {
             // "no run to attach to" (server returns 404, EventSource fails to
             // open) — completely normal when navigating into an idle session.
             setStreaming(false);
+            closeActivity();
             if (err.name !== "AbortError") {
                 onDone?.();
             }
         }
     }, [
         consume,
-        onDone
+        onDone,
+        openActivity,
+        closeActivity
     ]);
     // Called by the consumer after a refetch lands, so the streaming bubble
     // gets swapped for the persisted assistant message in a single render.
@@ -851,53 +1021,6 @@ function useSSE(onDone) {
     };
 }
 
-;// ./lib/ui/loading.ts
-/* __next_internal_client_entry_do_not_use__ startLoading,useLoadingCount,useTrackLoading auto */ // Tiny global loading-state store. Any component can register itself as
-// "currently busy"; the top-level progress bar reads the aggregate count and
-// shows itself whenever count > 0. Module-level state is fine here — all
-// usage is client-side and there's exactly one progress bar per page.
-
-let activeCount = 0;
-const loading_listeners = new Set();
-function loading_notify() {
-    for (const l of loading_listeners)l(activeCount);
-}
-// Returns a cleanup function — call it when work finishes (or on effect unmount).
-function startLoading() {
-    activeCount += 1;
-    loading_notify();
-    let cleared = false;
-    return ()=>{
-        if (cleared) return;
-        cleared = true;
-        activeCount = Math.max(0, activeCount - 1);
-        loading_notify();
-    };
-}
-// Subscribe to the aggregate count. Re-renders the caller when it changes.
-function useLoadingCount() {
-    const [n, setN] = (0,react.useState)(activeCount);
-    (0,react.useEffect)(()=>{
-        const fn = (v)=>setN(v);
-        loading_listeners.add(fn);
-        setN(activeCount);
-        return ()=>{
-            loading_listeners.delete(fn);
-        };
-    }, []);
-    return n;
-}
-// Convenience: tracks `active` automatically. When `active` flips true, register;
-// when it flips false (or component unmounts), unregister.
-function useTrackLoading(active) {
-    (0,react.useEffect)(()=>{
-        if (!active) return;
-        return startLoading();
-    }, [
-        active
-    ]);
-}
-
 // EXTERNAL MODULE: ./node_modules/lucide-react/dist/esm/icons/shield-alert.mjs
 var shield_alert = __webpack_require__(9203);
 // EXTERNAL MODULE: ./node_modules/lucide-react/dist/esm/icons/chevron-up.mjs
@@ -5556,11 +5679,11 @@ function fmtCtx(n) {
 }
 function ModelEditor({ model, onSave, onClose }) {
     const { state } = (0,AppContext/* useAppContext */.U)();
-    const isAdvanced = state.experienceMode === "advanced";
+    const isFullMode = state.experienceMode === "full";
     // Per-editor opt-in so a normal-mode user can reveal the engine-room
     // fields for one model without flipping the global workspace mode.
     const [showExpert, setShowExpert] = (0,react.useState)(false);
-    const expertVisible = isAdvanced || showExpert;
+    const expertVisible = isFullMode || showExpert;
     const isEdit = !!model;
     const [name, setName] = (0,react.useState)(model?.name ?? "");
     const [provider, setProvider] = (0,react.useState)(model?.provider ?? "anthropic");
@@ -5772,7 +5895,7 @@ function ModelEditor({ model, onSave, onClose }) {
                 /*#__PURE__*/ (0,jsx_runtime.jsxs)("div", {
                     className: "p-4 space-y-3.5",
                     children: [
-                        !isAdvanced && /*#__PURE__*/ (0,jsx_runtime.jsx)("button", {
+                        !isFullMode && /*#__PURE__*/ (0,jsx_runtime.jsx)("button", {
                             type: "button",
                             onClick: ()=>setShowExpert((v)=>!v),
                             "aria-expanded": showExpert,
@@ -8096,7 +8219,7 @@ function Section({ step, title, children }) {
 }
 function AgentEditor({ agent, models, onSave, onClose }) {
     const { state, dispatch } = (0,AppContext/* useAppContext */.U)();
-    const isAdvanced = state.experienceMode === "advanced";
+    const isFullMode = state.experienceMode === "full";
     const isEdit = !!agent;
     const { tools } = useTools();
     const fileRef = (0,react.useRef)(null);
@@ -8336,7 +8459,7 @@ function AgentEditor({ agent, models, onSave, onClose }) {
     return /*#__PURE__*/ (0,jsx_runtime.jsx)("div", {
         className: "fixed inset-0 bg-black/60 flex items-start justify-center z-50 p-2 sm:p-4 overflow-y-auto",
         children: /*#__PURE__*/ (0,jsx_runtime.jsxs)("div", {
-            className: `bg-surface-2 border border-border rounded-2xl w-full shadow-xl my-2 sm:my-4 ${isAdvanced ? "max-w-2xl" : "max-w-xl"}`,
+            className: `bg-surface-2 border border-border rounded-2xl w-full shadow-xl my-2 sm:my-4 ${isFullMode ? "max-w-2xl" : "max-w-xl"}`,
             children: [
                 /*#__PURE__*/ (0,jsx_runtime.jsxs)("div", {
                     className: "flex items-center justify-between px-4 py-3 border-b border-border",
@@ -8584,7 +8707,7 @@ function AgentEditor({ agent, models, onSave, onClose }) {
                                         children: groupedTools.map(({ group, categories })=>group ? /*#__PURE__*/ (0,jsx_runtime.jsx)(ToolGroupBlock, {
                                                 group: group,
                                                 categories: categories,
-                                                advancedMode: isAdvanced,
+                                                advancedMode: isFullMode,
                                                 selected: selectedTools,
                                                 onToggleTool: toggleTool,
                                                 onToggleCategory: toggleCategory,
@@ -8593,7 +8716,7 @@ function AgentEditor({ agent, models, onSave, onClose }) {
                                             }, group) : categories.map(([category, catTools])=>/*#__PURE__*/ (0,jsx_runtime.jsx)(ToolCategoryBlock, {
                                                     category: category,
                                                     tools: catTools,
-                                                    advancedMode: isAdvanced,
+                                                    advancedMode: isFullMode,
                                                     selected: selectedTools,
                                                     onToggleTool: toggleTool,
                                                     onToggleCategory: toggleCategory,
@@ -8610,7 +8733,7 @@ function AgentEditor({ agent, models, onSave, onClose }) {
                             step: 4,
                             title: "Advanced settings",
                             children: [
-                                isAdvanced && /*#__PURE__*/ (0,jsx_runtime.jsxs)(jsx_runtime.Fragment, {
+                                isFullMode && /*#__PURE__*/ (0,jsx_runtime.jsxs)(jsx_runtime.Fragment, {
                                     children: [
                                         /*#__PURE__*/ (0,jsx_runtime.jsxs)("label", {
                                             className: "block",
@@ -9538,7 +9661,7 @@ function ProfileEditor() {
                         }),
                         /*#__PURE__*/ (0,jsx_runtime.jsx)("p", {
                             className: "text-[11px] text-fg-faint leading-snug",
-                            children: "Choose how much configuration detail is shown in the app. Normal hides technical panels and advanced model controls."
+                            children: "Choose how much configuration detail is shown in the app. Essential hides technical panels and advanced model controls."
                         }),
                         /*#__PURE__*/ (0,jsx_runtime.jsxs)("div", {
                             className: "grid grid-cols-1 sm:grid-cols-2 gap-2",
@@ -9547,14 +9670,14 @@ function ProfileEditor() {
                                     type: "button",
                                     onClick: ()=>dispatch({
                                             type: "SET_EXPERIENCE_MODE",
-                                            mode: "normal"
+                                            mode: "essential"
                                         }),
-                                    "aria-pressed": mode === "normal",
-                                    className: `text-left px-3 py-2.5 rounded-xl border transition-colors ${mode === "normal" ? "border-accent/60 bg-accent/15 text-fg shadow-sm" : "border-border bg-surface-3 text-fg-muted hover:text-fg hover:border-border-strong"}`,
+                                    "aria-pressed": mode === "essential",
+                                    className: `text-left px-3 py-2.5 rounded-xl border transition-colors ${mode === "essential" ? "border-accent/60 bg-accent/15 text-fg shadow-sm" : "border-border bg-surface-3 text-fg-muted hover:text-fg hover:border-border-strong"}`,
                                     children: [
                                         /*#__PURE__*/ (0,jsx_runtime.jsx)("div", {
                                             className: "text-xs font-medium",
-                                            children: "Normal"
+                                            children: "Essential"
                                         }),
                                         /*#__PURE__*/ (0,jsx_runtime.jsx)("div", {
                                             className: "text-[10px] text-fg-faint leading-tight mt-0.5",
@@ -9566,14 +9689,14 @@ function ProfileEditor() {
                                     type: "button",
                                     onClick: ()=>dispatch({
                                             type: "SET_EXPERIENCE_MODE",
-                                            mode: "advanced"
+                                            mode: "full"
                                         }),
-                                    "aria-pressed": mode === "advanced",
-                                    className: `text-left px-3 py-2.5 rounded-xl border transition-colors ${mode === "advanced" ? "border-accent/60 bg-accent/15 text-fg shadow-sm" : "border-border bg-surface-3 text-fg-muted hover:text-fg hover:border-border-strong"}`,
+                                    "aria-pressed": mode === "full",
+                                    className: `text-left px-3 py-2.5 rounded-xl border transition-colors ${mode === "full" ? "border-accent/60 bg-accent/15 text-fg shadow-sm" : "border-border bg-surface-3 text-fg-muted hover:text-fg hover:border-border-strong"}`,
                                     children: [
                                         /*#__PURE__*/ (0,jsx_runtime.jsx)("div", {
                                             className: "text-xs font-medium",
-                                            children: "Advanced"
+                                            children: "Full"
                                         }),
                                         /*#__PURE__*/ (0,jsx_runtime.jsx)("div", {
                                             className: "text-[10px] text-fg-faint leading-tight mt-0.5",
@@ -10104,11 +10227,11 @@ function TailscaleServe() {
 
 function ProfilePanel() {
     const { state } = (0,AppContext/* useAppContext */.U)();
-    const isNormal = state.experienceMode === "normal";
+    const isEssential = state.experienceMode === "essential";
     const containerRef = (0,react.useRef)(null);
     const [showWizard, setShowWizard] = (0,react.useState)(false);
     useDeepLinkScroll("profile", "profile", containerRef);
-    if (isNormal && showWizard) {
+    if (isEssential && showWizard) {
         return /*#__PURE__*/ (0,jsx_runtime.jsxs)("div", {
             className: "h-full overflow-y-auto profile-scrollbar panel-scrollbar",
             children: [
@@ -10160,7 +10283,7 @@ function ProfilePanel() {
                         className: "text-sm font-semibold text-fg",
                         children: "User Profile"
                     }),
-                    isNormal && /*#__PURE__*/ (0,jsx_runtime.jsx)("button", {
+                    isEssential && /*#__PURE__*/ (0,jsx_runtime.jsx)("button", {
                         type: "button",
                         onClick: ()=>{
                             setShowWizard(true);
@@ -17219,33 +17342,37 @@ function HarnessPanel() {
     });
 }
 
-;// ./components/ui/TopProgressBar.tsx
-/* __next_internal_client_entry_do_not_use__ TopProgressBar auto */ 
-
+;// ./components/ui/HeaderActivity.tsx
+/* __next_internal_client_entry_do_not_use__ HeaderActivity auto */ 
 
-// Thin indeterminate progress bar pinned to the top of the viewport.
-// Visible whenever any tracked async work is in flight. Fades in fast and
-// fades out after a short delay so quick operations don't strobe.
-function TopProgressBar() {
-    const count = useLoadingCount();
-    const [visible, setVisible] = (0,react.useState)(false);
-    (0,react.useEffect)(()=>{
-        if (count > 0) {
-            setVisible(true);
-            return;
-        }
-        // Linger briefly after work completes for a smoother fade-out.
-        const t = setTimeout(()=>setVisible(false), 200);
-        return ()=>clearTimeout(t);
-    }, [
-        count
-    ]);
-    return /*#__PURE__*/ (0,jsx_runtime.jsx)("div", {
-        className: `pointer-events-none fixed top-0 left-0 right-0 h-[2px] z-50 transition-opacity duration-150 ${visible ? "opacity-100" : "opacity-0"}`,
-        "aria-hidden": !visible,
-        children: /*#__PURE__*/ (0,jsx_runtime.jsx)("div", {
-            className: "jarela-progress h-full w-full"
-        })
+// Inline "what is happening right now" text rendered next to the agent
+// dropdown. Replaces the old TopProgressBar: a single short label that
+// updates live as the run progresses (Sending… / Thinking… / Using <tool>…).
+// Returns null when nothing is in flight so the header stays calm.
+function HeaderActivity() {
+    const label = useActivityLabel();
+    if (!label) return null;
+    return /*#__PURE__*/ (0,jsx_runtime.jsxs)("span", {
+        role: "status",
+        "aria-live": "polite",
+        className: "ml-1 inline-flex items-center gap-1.5 text-xs text-fg-faint truncate max-w-[14rem]",
+        children: [
+            /*#__PURE__*/ (0,jsx_runtime.jsxs)("span", {
+                className: "relative inline-flex h-1.5 w-1.5 shrink-0",
+                children: [
+                    /*#__PURE__*/ (0,jsx_runtime.jsx)("span", {
+                        className: "absolute inset-0 rounded-full bg-accent/70 animate-ping"
+                    }),
+                    /*#__PURE__*/ (0,jsx_runtime.jsx)("span", {
+                        className: "relative inline-flex h-1.5 w-1.5 rounded-full bg-accent"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0,jsx_runtime.jsx)("span", {
+                className: "truncate",
+                children: label
+            })
+        ]
     });
 }
 
@@ -18236,11 +18363,11 @@ function AgentSessionList({ activeAgentId, onSelect }) {
 }
 function MenuPanel({ activeTab, agentId, showTools, showThinking, onClose, onAgentChange, onSetTab, onShowToolsChange, onShowThinkingChange }) {
     const { state, dispatch } = (0,AppContext/* useAppContext */.U)();
-    const isAdvanced = state.experienceMode === "advanced";
+    const isFullMode = state.experienceMode === "full";
     const toggleMode = ()=>{
         dispatch({
             type: "SET_EXPERIENCE_MODE",
-            mode: isAdvanced ? "normal" : "advanced"
+            mode: isFullMode ? "essential" : "full"
         });
     };
     // Advanced section starts collapsed once the user has dismissed it
@@ -18318,10 +18445,10 @@ function MenuPanel({ activeTab, agentId, showTools, showThinking, onClose, onAge
                         /*#__PURE__*/ (0,jsx_runtime.jsx)("button", {
                             type: "button",
                             onClick: toggleMode,
-                            title: `Switch to ${isAdvanced ? "normal" : "advanced"} mode`,
-                            "aria-label": `Switch to ${isAdvanced ? "normal" : "advanced"} mode`,
-                            className: `control-tap text-[10px] uppercase tracking-wide px-2 py-0.5 rounded-full border transition-colors ${isAdvanced ? "border-accent/40 bg-accent/10 text-fg-subtle hover:bg-accent/20" : "border-border bg-surface-3 text-fg-faint hover:text-fg-muted hover:border-border-strong"}`,
-                            children: isAdvanced ? "advanced" : "normal"
+                            title: `Switch to ${isFullMode ? "essential" : "full"} mode`,
+                            "aria-label": `Switch to ${isFullMode ? "essential" : "full"} mode`,
+                            className: `control-tap text-[10px] uppercase tracking-wide px-2 py-0.5 rounded-full border transition-colors ${isFullMode ? "border-accent/40 bg-accent/10 text-fg-subtle hover:bg-accent/20" : "border-border bg-surface-3 text-fg-faint hover:text-fg-muted hover:border-border-strong"}`,
+                            children: isFullMode ? "full" : "essential"
                         })
                     ]
                 })
@@ -18330,7 +18457,7 @@ function MenuPanel({ activeTab, agentId, showTools, showThinking, onClose, onAge
                 className: "grid grid-cols-4 sm:grid-cols-6 gap-1.5 px-2 py-2 border-b border-border shrink-0",
                 children: COMMON_TABS.map(renderTabButton)
             }),
-            isAdvanced && /*#__PURE__*/ (0,jsx_runtime.jsxs)("div", {
+            isFullMode && /*#__PURE__*/ (0,jsx_runtime.jsxs)("div", {
                 className: "border-b border-border shrink-0",
                 children: [
                     /*#__PURE__*/ (0,jsx_runtime.jsxs)("button", {
@@ -20237,7 +20364,7 @@ const AppShell_ADVANCED_TABS = new Set([
 ]);
 function AppShell() {
     const { state, dispatch } = (0,AppContext/* useAppContext */.U)();
-    const isAdvanced = state.experienceMode === "advanced";
+    const isFullMode = state.experienceMode === "full";
     useUrlSync();
     const { threadId, loading: sessionLoading, error: sessionError } = useAgentSession(state.activeAgentId, state.activeThreadId);
     const [showMenu, setShowMenu] = (0,react.useState)(false);
@@ -20259,7 +20386,7 @@ function AppShell() {
         state.activeTab
     ]);
     (0,react.useEffect)(()=>{
-        if (!isAdvanced && AppShell_ADVANCED_TABS.has(state.activeTab)) {
+        if (!isFullMode && AppShell_ADVANCED_TABS.has(state.activeTab)) {
             dispatch({
                 type: "SET_TAB",
                 tab: "profile"
@@ -20267,7 +20394,7 @@ function AppShell() {
         }
     }, [
         dispatch,
-        isAdvanced,
+        isFullMode,
         state.activeTab
     ]);
     const unreadCount = useUnreadCount();
@@ -20405,7 +20532,6 @@ function AppShell() {
     return /*#__PURE__*/ (0,jsx_runtime.jsxs)("div", {
         className: "h-screen h-[100dvh] flex flex-col text-fg overflow-hidden px-safe",
         children: [
-            /*#__PURE__*/ (0,jsx_runtime.jsx)(TopProgressBar, {}),
             /*#__PURE__*/ (0,jsx_runtime.jsx)(NotificationStatus, {}),
             /*#__PURE__*/ (0,jsx_runtime.jsx)(Toaster, {}),
             /*#__PURE__*/ (0,jsx_runtime.jsx)(ServerStatus, {}),
@@ -20437,22 +20563,31 @@ function AppShell() {
                                 type: "button",
                                 onClick: ()=>setShowAgentPicker((v)=>!v),
                                 className: "control-tap inline-flex items-center gap-2 rounded-lg px-1.5 py-1 hover:bg-surface-3/60 transition-colors",
-                                title: "Select active agent",
+                                title: activeAgent ? `Active agent: ${activeAgent.name} — click to switch` : "Select active agent",
                                 "aria-haspopup": "menu",
                                 "aria-expanded": showAgentPicker,
                                 children: [
+                                    activeAgent?.icon ? // eslint-disable-next-line @next/next/no-img-element
+                                    /*#__PURE__*/ (0,jsx_runtime.jsx)("img", {
+                                        src: activeAgent.icon,
+                                        alt: "",
+                                        className: "h-6 w-6 rounded-md object-cover shrink-0"
+                                    }) : activeAgent ? /*#__PURE__*/ (0,jsx_runtime.jsx)("span", {
+                                        "aria-hidden": true,
+                                        className: "h-6 w-6 rounded-md bg-surface-3 text-[11px] font-semibold text-fg-subtle inline-flex items-center justify-center shrink-0",
+                                        children: activeAgent.name.charAt(0).toUpperCase()
+                                    }) : // No active agent yet — fall back to the app mark. Blue-on-
+                                    // transparent loses contrast against the dark glass, so we
+                                    // flatten + invert it in dark mode (alpha is preserved).
+                                    // eslint-disable-next-line @next/next/no-img-element
                                     /*#__PURE__*/ (0,jsx_runtime.jsx)("img", {
                                         src: "/logo-mark-transparent.png",
                                         alt: "",
                                         className: "h-6 w-auto dark:brightness-0 dark:invert"
                                     }),
                                     /*#__PURE__*/ (0,jsx_runtime.jsx)("span", {
-                                        className: "text-fg font-semibold tracking-tight",
-                                        children: (0,app_config/* getAppName */.fj)()
-                                    }),
-                                    /*#__PURE__*/ (0,jsx_runtime.jsx)("span", {
-                                        className: "text-xs text-fg-faint max-w-[11rem] truncate hidden sm:inline",
-                                        children: activeAgent?.name ?? "select agent"
+                                        className: "text-fg font-semibold tracking-tight truncate max-w-[12rem] sm:max-w-[16rem]",
+                                        children: activeAgent?.name ?? (0,app_config/* getAppName */.fj)()
                                     }),
                                     /*#__PURE__*/ (0,jsx_runtime.jsx)(chevron_down/* default */.A, {
                                         size: 14,
@@ -20510,6 +20645,7 @@ function AppShell() {
                             })
                         ]
                     }),
+                    /*#__PURE__*/ (0,jsx_runtime.jsx)(HeaderActivity, {}),
                     /*#__PURE__*/ (0,jsx_runtime.jsxs)("button", {
                         onClick: ()=>{
                             setShowMenu((v)=>!v);
@@ -20552,7 +20688,7 @@ function AppShell() {
                         mode: state.activeTab === "agents" ? "visible" : "hidden",
                         children: /*#__PURE__*/ (0,jsx_runtime.jsx)(AgentsPanel, {})
                     }),
-                    isAdvanced && mountedTabs.has("memory") && /*#__PURE__*/ (0,jsx_runtime.jsx)(react.Activity, {
+                    isFullMode && mountedTabs.has("memory") && /*#__PURE__*/ (0,jsx_runtime.jsx)(react.Activity, {
                         mode: state.activeTab === "memory" ? "visible" : "hidden",
                         children: /*#__PURE__*/ (0,jsx_runtime.jsx)(MemoryPanel, {})
                     }),
@@ -20584,7 +20720,7 @@ function AppShell() {
                         mode: state.activeTab === "tasks" ? "visible" : "hidden",
                         children: /*#__PURE__*/ (0,jsx_runtime.jsx)(ScheduledTasksPanel, {})
                     }),
-                    isAdvanced && mountedTabs.has("bridges") && /*#__PURE__*/ (0,jsx_runtime.jsx)(react.Activity, {
+                    isFullMode && mountedTabs.has("bridges") && /*#__PURE__*/ (0,jsx_runtime.jsx)(react.Activity, {
                         mode: state.activeTab === "bridges" ? "visible" : "hidden",
                         children: /*#__PURE__*/ (0,jsx_runtime.jsx)(BridgesPanel, {})
                     }),
@@ -20592,7 +20728,7 @@ function AppShell() {
                         mode: state.activeTab === "profile" ? "visible" : "hidden",
                         children: /*#__PURE__*/ (0,jsx_runtime.jsx)(ProfilePanel, {})
                     }),
-                    isAdvanced && mountedTabs.has("harness") && /*#__PURE__*/ (0,jsx_runtime.jsx)(react.Activity, {
+                    isFullMode && mountedTabs.has("harness") && /*#__PURE__*/ (0,jsx_runtime.jsx)(react.Activity, {
                         mode: state.activeTab === "harness" ? "visible" : "hidden",
                         children: /*#__PURE__*/ (0,jsx_runtime.jsx)(HarnessPanel, {})
                     }),
@@ -20635,7 +20771,7 @@ function AppShell() {
 /***/ 9469:
 /***/ ((__unused_webpack_module, __unused_webpack_exports, __webpack_require__) => {
 
-Promise.resolve(/* import() eager */).then(__webpack_require__.bind(__webpack_require__, 4633));
+Promise.resolve(/* import() eager */).then(__webpack_require__.bind(__webpack_require__, 1742));
 
 
 /***/ })
@@ -20648,4 +20784,4 @@ Promise.resolve(/* import() eager */).then(__webpack_require__.bind(__webpack_re
 /******/ _N_E = __webpack_exports__;
 /******/ }
 ]);
-//# sourceMappingURL=page-108f526cb6e48b7b.js.map
+//# sourceMappingURL=page-31e4d0ad258be21a.js.map