@circuitwall/jarela 0.8.0 → 0.8.1

package/components/layout/AppShell.tsx

@@ -19,7 +19,7 @@ import { ConnectionsPanel } from "@/components/connections/ConnectionsPanel";
 import { ScheduledTasksPanel } from "@/components/scheduled-tasks/ScheduledTasksPanel";
 import { BridgesPanel } from "@/components/bridges/BridgesPanel";
 import { HarnessPanel } from "@/components/harness/HarnessPanel";
-import { TopProgressBar } from "@/components/ui/TopProgressBar";
+import { HeaderActivity } from "@/components/ui/HeaderActivity";
 import { NotificationStatus } from "@/components/ui/NotificationStatus";
 import { CryptoFallbackBanner } from "@/components/ui/CryptoFallbackBanner";
 import { UpdateAvailableBanner } from "@/components/ui/UpdateAvailableBanner";
@@ -34,7 +34,7 @@ const ADVANCED_TABS = new Set(["memory", "bridges", "harness"]);
 
 export function AppShell() {
   const { state, dispatch } = useAppContext();
-  const isAdvanced = state.experienceMode === "advanced";
+  const isFullMode = state.experienceMode === "full";
   useUrlSync();
   const { threadId, loading: sessionLoading, error: sessionError } = useAgentSession(
     state.activeAgentId,
@@ -60,10 +60,10 @@ export function AppShell() {
   }, [state.activeTab]);
 
   useEffect(() => {
-    if (!isAdvanced && ADVANCED_TABS.has(state.activeTab)) {
+    if (!isFullMode && ADVANCED_TABS.has(state.activeTab)) {
       dispatch({ type: "SET_TAB", tab: "profile" });
     }
-  }, [dispatch, isAdvanced, state.activeTab]);
+  }, [dispatch, isFullMode, state.activeTab]);
 
   const unreadCount = useUnreadCount();
 
@@ -193,7 +193,6 @@ export function AppShell() {
 
   return (
     <div className="h-screen h-[100dvh] flex flex-col text-fg overflow-hidden px-safe">
-      <TopProgressBar />
       <NotificationStatus />
       <Toaster />
       <ServerStatus />
@@ -222,23 +221,41 @@ export function AppShell() {
         }}
       >
         <div className="relative flex items-center gap-2 select-none" ref={agentPickerRef}>
-          {/* Logo is blue-on-transparent. In dark mode the blue gets lost
-              against the dark glass, so we drop the color and lift the
-              alpha to white — `brightness-0` flattens to black, `invert`
-              flips it to white, alpha channel is preserved by both. */}
           <button
             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}
           >
-            {/* eslint-disable-next-line @next/next/no-img-element */}
-            <img src="/logo-mark-transparent.png" alt="" className="h-6 w-auto dark:brightness-0 dark:invert" />
-            <span className="text-fg font-semibold tracking-tight">{getAppName()}</span>
-            <span className="text-xs text-fg-faint max-w-[11rem] truncate hidden sm:inline">
-              {activeAgent?.name ?? "select agent"}
+            {activeAgent?.icon ? (
+              // eslint-disable-next-line @next/next/no-img-element
+              <img
+                src={activeAgent.icon}
+                alt=""
+                className="h-6 w-6 rounded-md object-cover shrink-0"
+              />
+            ) : activeAgent ? (
+              <span
+                aria-hidden
+                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"
+              >
+                {activeAgent.name.charAt(0).toUpperCase()}
+              </span>
+            ) : (
+              // 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
+              <img
+                src="/logo-mark-transparent.png"
+                alt=""
+                className="h-6 w-auto dark:brightness-0 dark:invert"
+              />
+            )}
+            <span className="text-fg font-semibold tracking-tight truncate max-w-[12rem] sm:max-w-[16rem]">
+              {activeAgent?.name ?? getAppName()}
             </span>
             <ChevronDown size={14} className={`text-fg-faint transition-transform ${showAgentPicker ? "rotate-180" : ""}`} />
           </button>
@@ -288,6 +305,7 @@ export function AppShell() {
             </div>
           )}
         </div>
+        <HeaderActivity />
         <button
           onClick={() => { setShowMenu((v) => !v); }}
           className={`control-tap ml-auto relative p-2.5 rounded transition-colors ${showMenu ? "text-fg bg-surface-3" : "text-fg-faint hover:text-fg-muted hover:bg-surface-3/50"}`}
@@ -341,7 +359,7 @@ export function AppShell() {
             <AgentsPanel />
           </Activity>
         )}
-        {isAdvanced && mountedTabs.has("memory") && (
+        {isFullMode && mountedTabs.has("memory") && (
           <Activity mode={state.activeTab === "memory" ? "visible" : "hidden"}>
             <MemoryPanel />
           </Activity>
@@ -381,7 +399,7 @@ export function AppShell() {
             <ScheduledTasksPanel />
           </Activity>
         )}
-        {isAdvanced && mountedTabs.has("bridges") && (
+        {isFullMode && mountedTabs.has("bridges") && (
           <Activity mode={state.activeTab === "bridges" ? "visible" : "hidden"}>
             <BridgesPanel />
           </Activity>
@@ -391,7 +409,7 @@ export function AppShell() {
             <ProfilePanel />
           </Activity>
         )}
-        {isAdvanced && mountedTabs.has("harness") && (
+        {isFullMode && mountedTabs.has("harness") && (
           <Activity mode={state.activeTab === "harness" ? "visible" : "hidden"}>
             <HarnessPanel />
           </Activity>

package/components/layout/MenuPanel.tsx

@@ -228,9 +228,9 @@ export function MenuPanel({
   onShowThinkingChange,
 }: Props) {
   const { state, dispatch } = useAppContext();
-  const isAdvanced = state.experienceMode === "advanced";
+  const isFullMode = state.experienceMode === "full";
   const toggleMode = () => {
-    dispatch({ type: "SET_EXPERIENCE_MODE", mode: isAdvanced ? "normal" : "advanced" });
+    dispatch({ type: "SET_EXPERIENCE_MODE", mode: isFullMode ? "essential" : "full" });
   };
   // Advanced section starts collapsed once the user has dismissed it
   // once (persisted to localStorage). Defaults to *expanded* on first
@@ -296,15 +296,15 @@ export function MenuPanel({
           <button
             type="button"
             onClick={toggleMode}
-            title={`Switch to ${isAdvanced ? "normal" : "advanced"} mode`}
-            aria-label={`Switch to ${isAdvanced ? "normal" : "advanced"} mode`}
+            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 ${
-              isAdvanced
+              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"
             }`}
           >
-            {isAdvanced ? "advanced" : "normal"}
+            {isFullMode ? "full" : "essential"}
           </button>
         </div>
       </div>
@@ -312,7 +312,7 @@ export function MenuPanel({
         {COMMON_TABS.map(renderTabButton)}
       </div>
 
-      {isAdvanced && (
+      {isFullMode && (
         <div className="border-b border-border shrink-0">
           <button
             type="button"

package/components/models/ModelEditor.tsx

@@ -49,11 +49,11 @@ function fmtCtx(n: number | null) {
 
 export function ModelEditor({ model, onSave, onClose }: Props) {
   const { state } = useAppContext();
-  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] = useState(false);
-  const expertVisible = isAdvanced || showExpert;
+  const expertVisible = isFullMode || showExpert;
   const isEdit = !!model;
   const [name, setName] = useState(model?.name ?? "");
   const [provider, setProvider] = useState(model?.provider ?? "anthropic");
@@ -240,7 +240,7 @@ export function ModelEditor({ model, onSave, onClose }: Props) {
           <button onClick={onClose} className="text-fg-subtle hover:text-fg transition-colors"><X size={16} /></button>
         </div>
         <div className="p-4 space-y-3.5">
-          {!isAdvanced && (
+          {!isFullMode && (
             <button
               type="button"
               onClick={() => setShowExpert((v) => !v)}

package/components/profile/ProfileEditor.tsx

@@ -122,33 +122,33 @@ export function ProfileEditor() {
         </div>
         <p className="text-[11px] text-fg-faint leading-snug">
           Choose how much configuration detail is shown in the app.
-          Normal hides technical panels and advanced model controls.
+          Essential hides technical panels and advanced model controls.
         </p>
         <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
           <button
             type="button"
-            onClick={() => dispatch({ type: "SET_EXPERIENCE_MODE", mode: "normal" })}
-            aria-pressed={mode === "normal"}
+            onClick={() => dispatch({ type: "SET_EXPERIENCE_MODE", mode: "essential" })}
+            aria-pressed={mode === "essential"}
             className={`text-left px-3 py-2.5 rounded-xl border transition-colors ${
-              mode === "normal"
+              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"
             }`}
           >
-            <div className="text-xs font-medium">Normal</div>
+            <div className="text-xs font-medium">Essential</div>
             <div className="text-[10px] text-fg-faint leading-tight mt-0.5">Cleaner layout, fewer technical controls</div>
           </button>
           <button
             type="button"
-            onClick={() => dispatch({ type: "SET_EXPERIENCE_MODE", mode: "advanced" })}
-            aria-pressed={mode === "advanced"}
+            onClick={() => dispatch({ type: "SET_EXPERIENCE_MODE", mode: "full" })}
+            aria-pressed={mode === "full"}
             className={`text-left px-3 py-2.5 rounded-xl border transition-colors ${
-              mode === "advanced"
+              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"
             }`}
           >
-            <div className="text-xs font-medium">Advanced</div>
+            <div className="text-xs font-medium">Full</div>
             <div className="text-[10px] text-fg-faint leading-tight mt-0.5">Per-function controls and full tuning</div>
           </button>
         </div>

package/components/profile/ProfilePanel.tsx

@@ -8,12 +8,12 @@ import { ProfileEditor } from "./ProfileEditor";
 
 export function ProfilePanel() {
   const { state } = useAppContext();
-  const isNormal = state.experienceMode === "normal";
+  const isEssential = state.experienceMode === "essential";
   const containerRef = useRef<HTMLDivElement>(null);
   const [showWizard, setShowWizard] = useState(false);
   useDeepLinkScroll("profile", "profile", containerRef);
 
-  if (isNormal && showWizard) {
+  if (isEssential && showWizard) {
     return (
       <div className="h-full overflow-y-auto profile-scrollbar panel-scrollbar">
         <div className="max-w-3xl mx-auto w-full px-4 pt-4">
@@ -45,7 +45,7 @@ export function ProfilePanel() {
       <div className="border-b border-border px-4 py-3 flex items-center gap-2">
         <User size={14} className="text-fg-subtle" />
         <h2 className="text-sm font-semibold text-fg">User Profile</h2>
-        {isNormal && (
+        {isEssential && (
           <button
             type="button"
             onClick={() => {

package/components/setup/OnboardingWizard.tsx

@@ -353,7 +353,7 @@ export function OnboardingWizard({ context }: Props) {
           )}
           <div className="min-w-0 flex-1">
             <p className="text-[11px] font-semibold uppercase tracking-[0.2em] text-fg-faint">
-              {fullScreen ? "First launch setup" : state.experienceMode === "normal" ? "Guided setup" : "Profile"}
+              {fullScreen ? "First launch setup" : state.experienceMode === "essential" ? "Guided setup" : "Profile"}
             </p>
             <h1 className="mt-1 text-2xl font-semibold tracking-tight">
               {fullScreen ? `Set up ${getAppName()} once` : "Set up your assistant"}
@@ -362,7 +362,7 @@ export function OnboardingWizard({ context }: Props) {
               Configure your profile, choose a model, and create a first agent from one screen. As you change the model, the feature icons below light up to show what the provider and model actually ship.
             </p>
             <div className="mt-4 flex flex-col sm:flex-row gap-2 max-w-xl">
-              {(["normal", "advanced"] as const).map((mode) => (
+              {(["essential", "full"] as const).map((mode) => (
                 <button
                   key={mode}
                   type="button"
@@ -374,9 +374,9 @@ export function OnboardingWizard({ context }: Props) {
                       : "border-border bg-surface-2 hover:border-border-strong"
                   }`}
                 >
-                  <div className="text-sm font-medium capitalize">{mode === "normal" ? "Guided" : "Full controls"}</div>
+                  <div className="text-sm font-medium capitalize">{mode === "essential" ? "Guided" : "Full controls"}</div>
                   <div className="mt-0.5 text-[11px] text-fg-faint leading-snug">
-                    {mode === "normal"
+                    {mode === "essential"
                       ? "Curated panels and a simpler model editor."
                       : "Every panel, context tuning, and engine-room toggles."}
                   </div>

package/components/ui/HeaderActivity.tsx

@@ -0,0 +1,24 @@
+"use client";
+import { useActivityLabel } from "@/lib/ui/loading";
+
+// 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.
+export function HeaderActivity() {
+  const label = useActivityLabel();
+  if (!label) return null;
+  return (
+    <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]"
+    >
+      <span className="relative inline-flex h-1.5 w-1.5 shrink-0">
+        <span className="absolute inset-0 rounded-full bg-accent/70 animate-ping" />
+        <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-accent" />
+      </span>
+      <span className="truncate">{label}</span>
+    </span>
+  );
+}

package/contexts/AppContext.tsx

@@ -1,10 +1,18 @@
 "use client";
 import { createContext, useContext, useEffect, useReducer, type ReactNode } from "react";
 
-export type ExperienceMode = "normal" | "advanced";
+export type ExperienceMode = "essential" | "full";
 
 const EXPERIENCE_MODE_KEY = "jarela.experience.mode";
 
+// Back-compat: pre-rename builds stored "normal" / "advanced". Read those
+// values silently so an upgrade does not reset the user's choice.
+function parseStoredMode(raw: string | null): ExperienceMode | null {
+  if (raw === "essential" || raw === "normal") return "essential";
+  if (raw === "full" || raw === "advanced") return "full";
+  return null;
+}
+
 export type Tab = "chat" | "dashboard" | "agents" | "memory" | "documents" | "models" | "mcp" | "extensions" | "tools" | "connections" | "tasks" | "bridges" | "profile" | "harness";
 
 interface AppState {
@@ -54,14 +62,14 @@ export function AppProvider({ children }: { children: ReactNode }) {
     activeThreadId: null,
     activeAgentId: null,
     activeTab: "chat",
-    experienceMode: "normal",
+    experienceMode: "essential",
     selectedItem: {},
   });
 
   useEffect(() => {
     try {
-      const stored = window.localStorage.getItem(EXPERIENCE_MODE_KEY);
-      if (stored === "normal" || stored === "advanced") {
+      const stored = parseStoredMode(window.localStorage.getItem(EXPERIENCE_MODE_KEY));
+      if (stored) {
         dispatch({ type: "SET_EXPERIENCE_MODE", mode: stored });
       }
     } catch {

package/contexts/ThemeContext.tsx

@@ -19,9 +19,29 @@ function readStored(): Theme {
   }
 }
 
+const LIGHT_CHROME = "#ffffff";
+const DARK_CHROME = "#09090b";
+
+function resolveChrome(theme: Theme): string {
+  if (theme === "light") return LIGHT_CHROME;
+  if (theme === "dark") return DARK_CHROME;
+  if (typeof window === "undefined") return DARK_CHROME;
+  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: Theme) {
+  if (typeof document === "undefined") return;
+  const meta = document.querySelector('meta[name="theme-color"]');
+  if (meta) meta.setAttribute("content", resolveChrome(theme));
+}
+
 function apply(theme: Theme) {
   if (typeof document === "undefined") return;
   document.documentElement.setAttribute("data-theme", theme);
+  syncChrome(theme);
 }
 
 interface Ctx {
@@ -38,7 +58,16 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
   const [theme, setThemeState] = useState<Theme>("system");
 
   useEffect(() => {
-    setThemeState(readStored());
+    const stored = readStored();
+    setThemeState(stored);
+    // When in "system" mode, mirror OS-level changes into the PWA chrome.
+    if (typeof window === "undefined") return;
+    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 = useCallback((t: Theme) => {

package/hooks/useSSE.ts

@@ -1,8 +1,9 @@
 "use client";
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { api, submitRun, subscribeRun } from "@/api/client";
 import type { ContentPart, SSEEventType, StreamOptions } from "@/api/types";
 import type { ToolEvent } from "@/components/chat/ToolList";
+import { pushActivity } from "@/lib/ui/loading";
 
 export type { ToolEvent };
 
@@ -19,6 +20,28 @@ export function useSSE(onDone?: () => void) {
   const [error, setError] = useState<string | null>(null);
   const abortRef = useRef<AbortController | null>(null);
   const threadIdRef = useRef<string | null>(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 = useRef<ReturnType<typeof pushActivity> | null>(null);
+  const activeToolsRef = useRef<Map<string, string>>(new Map());
+
+  const openActivity = useCallback((initial: string) => {
+    activityRef.current?.clear();
+    activeToolsRef.current.clear();
+    activityRef.current = pushActivity(initial);
+  }, []);
+
+  const closeActivity = 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.
+  useEffect(() => closeActivity, [closeActivity]);
 
   const consume = useCallback(async (
     iterable: AsyncIterable<string>,
@@ -27,20 +50,28 @@ export function useSSE(onDone?: () => void) {
       const event = JSON.parse(raw) as SSEEventType;
       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,
           { id: event.id, phase: "call", name: event.name, 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,
           { id: event.id, phase: "result", name: event.name, payload: event.result },
         ]);
+        activeToolsRef.current.delete(event.id);
+        const remaining = activeToolsRef.current.values().next().value as string | undefined;
+        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)
@@ -55,11 +86,12 @@ export function useSSE(onDone?: () => void) {
         setStreaming(false);
         setStreamingContent("");
         setThinkingContent("");
+        closeActivity();
         setError(event.message);
         break;
       }
     }
-  }, [onDone]);
+  }, [onDone, closeActivity]);
 
   const start = useCallback(async (
     threadId: string,
@@ -76,6 +108,7 @@ export function useSSE(onDone?: () => void) {
     setThinkingContent("");
     setToolEvents([]);
     setError(null);
+    openActivity("Sending…");
 
     try {
       // Command: register the run server-side. 202 = we own this turn; 409
@@ -95,9 +128,10 @@ export function useSSE(onDone?: () => void) {
       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
@@ -117,9 +151,10 @@ export function useSSE(onDone?: () => void) {
     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
@@ -138,6 +173,7 @@ export function useSSE(onDone?: () => void) {
     setThinkingContent("");
     setToolEvents([]);
     setError(null);
+    openActivity("Reconnecting…");
 
     try {
       await consume(subscribeRun(threadId, ctrl.signal));
@@ -147,11 +183,12 @@ export function useSSE(onDone?: () => void) {
       // "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 as Error).name !== "AbortError") {
         onDone?.();
       }
     }
-  }, [consume, onDone]);
+  }, [consume, 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.

package/lib/agents/base.ts

@@ -18,7 +18,9 @@ export interface StreamOptions {
   filters?: StreamFilters;
   tool_policy?: ToolPolicy;
   agent_run_config?: AgentRunConfig;
-  ui_experience_mode?: "normal" | "advanced";
+  // Back-compat: pre-rename clients may still send "normal" / "advanced".
+  // Server-side normalization lives in lib/agents/run-thread.ts.
+  ui_experience_mode?: "essential" | "full" | "normal" | "advanced";
 }
 
 export interface StreamChunk {

package/lib/agents/run-thread.ts

@@ -215,13 +215,16 @@ export async function prepareThreadRun(
     : null;
 
   const timeCtx = `Current time: ${new Date().toISOString()} (UTC). Use this when computing scheduled task timestamps.`;
-  const experienceMode = options?.ui_experience_mode === "normal" ? "normal" : "advanced";
+  // Accept both the new ("essential"/"full") and legacy ("normal"/"advanced")
+  // labels so an older client speaking to a newer server still works.
+  const rawMode = options?.ui_experience_mode;
+  const experienceMode = rawMode === "essential" || rawMode === "normal" ? "essential" : "full";
   const experienceCtx = [
     "--- UX mode ---",
     `User interface mode: ${experienceMode}.`,
-    experienceMode === "normal"
+    experienceMode === "essential"
       ? "Prefer concise, plain-language explanations and avoid exposing low-level configuration details unless asked."
-      : "User opted into advanced controls; detailed technical explanations are welcome.",
+      : "User opted into the full / advanced UI; detailed technical explanations are welcome.",
   ].join("\n");
 
   // Host environment hint so the agent doesn't have to guess platform-specific

package/lib/ui/loading.ts

@@ -45,3 +45,62 @@ export function useTrackLoading(active: boolean): void {
     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: Array<{ id: number; label: string }> = [];
+const activityListeners = new Set<(label: string | null) => void>();
+
+function currentActivity(): string | null {
+  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.
+export function pushActivity(label: string): {
+  set: (next: string) => void;
+  clear: () => void;
+} {
+  const id = ++activitySeq;
+  activityStack.push({ id, label });
+  notifyActivity();
+  return {
+    set(next: string) {
+      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();
+      }
+    },
+  };
+}
+
+export function useActivityLabel(): string | null {
+  const [label, setLabel] = useState<string | null>(currentActivity());
+  useEffect(() => {
+    const fn = (v: string | null) => setLabel(v);
+    activityListeners.add(fn);
+    setLabel(currentActivity());
+    return () => { activityListeners.delete(fn); };
+  }, []);
+  return label;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@circuitwall/jarela",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "description": "Jarela — local chat interface for LangGraph agents (multi-provider, single-process, SQLite-backed).",
   "license": "Apache-2.0",
   "author": "Andrew Ge Wu",

package/public/manifest.json

@@ -6,8 +6,8 @@
   "scope": "/",
   "display": "standalone",
   "display_override": ["minimal-ui", "standalone"],
-  "background_color": "#0f172a",
-  "theme_color": "#2563eb",
+  "background_color": "#09090b",
+  "theme_color": "#09090b",
   "edge_side_panel": {
     "preferred_width": 480
   },