@circuitwall/jarela 2.4.0 → 2.5.0

package/components/layout/AppShell.tsx

@@ -20,6 +20,7 @@ import { BridgesPanel } from "@/components/bridges/BridgesPanel";
 import { LogsPanel } from "@/components/logs/LogsPanel";
 import { EnvVarsPanel } from "@/components/env/EnvVarsPanel";
 import { SettingsPanel } from "@/components/settings/SettingsPanel";
+import { UnifiedMemoryPanel } from "@/components/memory/UnifiedMemoryPanel";
 import { HeaderActivity } from "@/components/ui/HeaderActivity";
 import { NotificationStatus } from "@/components/ui/NotificationStatus";
 import { CryptoFallbackBanner } from "@/components/ui/CryptoFallbackBanner";
@@ -35,7 +36,7 @@ import { getAppName } from "@/lib/env/app-config";
 import { MenuPanel } from "./MenuPanel";
 import { DashboardPanel } from "@/components/dashboard/DashboardPanel";
 
-const ADVANCED_TABS = new Set(["bridges", "logs", "env"]);
+const ADVANCED_TABS = new Set(["dashboard", "tasks", "tools", "memory", "bridges", "logs", "env"]);
 
 export function AppShell() {
   const { state, dispatch } = useAppContext();
@@ -304,6 +305,7 @@ export function AppShell() {
         agents={agents}
         agentsLoaded={agentsLoaded}
         activeAgentId={state.activeAgentId}
+        preferredThreadId={state.activeThreadId}
         onPickAgent={(id) => {
           dispatch({ type: "SET_AGENT", agentId: id });
           dispatch({ type: "SET_TAB", tab: "chat" });
@@ -468,7 +470,7 @@ export function AppShell() {
         </button>
       </header>
 
-      <div className="flex-1 relative overflow-hidden">
+      <div className="mx-auto flex-1 relative w-full max-w-7xl overflow-hidden">
         {/*
           Each tab is wrapped in <Activity> on its first visit, then kept
           mounted so scroll position, expanded rows, and local form/filter
@@ -504,14 +506,23 @@ export function AppShell() {
             <AgentsPanel />
           </Activity>
         )}
+        {isFullMode && mountedTabs.has("memory") && (
+          <Activity mode={state.activeTab === "memory" ? "visible" : "hidden"}>
+            <UnifiedMemoryPanel />
+          </Activity>
+        )}
         {mountedTabs.has("models") && (
           <Activity mode={state.activeTab === "models" ? "visible" : "hidden"}>
-            <ModelsPanel />
+            <div className="mx-auto h-full w-full max-w-5xl min-w-0">
+              <ModelsPanel />
+            </div>
           </Activity>
         )}
         {mountedTabs.has("credentials") && (
           <Activity mode={state.activeTab === "credentials" ? "visible" : "hidden"}>
-            <CredentialsPanel />
+            <div className="mx-auto h-full w-full max-w-5xl min-w-0">
+              <CredentialsPanel />
+            </div>
           </Activity>
         )}
         {mountedTabs.has("mcp") && (
@@ -541,12 +552,16 @@ export function AppShell() {
         )}
         {isFullMode && mountedTabs.has("logs") && (
           <Activity mode={state.activeTab === "logs" ? "visible" : "hidden"}>
-            <LogsPanel />
+            <div className="mx-auto h-full w-full max-w-5xl min-w-0">
+              <LogsPanel />
+            </div>
           </Activity>
         )}
         {isFullMode && mountedTabs.has("env") && (
           <Activity mode={state.activeTab === "env" ? "visible" : "hidden"}>
-            <EnvVarsPanel />
+            <div className="mx-auto h-full w-full max-w-5xl min-w-0">
+              <EnvVarsPanel />
+            </div>
           </Activity>
         )}
         {mountedTabs.has("settings") && (
@@ -557,7 +572,7 @@ export function AppShell() {
 
         {showMenu && (
           <div
-            className="fixed left-0 right-0 bottom-0 bg-black/30 backdrop-blur-sm z-30"
+            className="fixed left-0 right-0 bottom-0 bg-black/20 z-30"
             style={{ top: "calc(3rem + var(--app-safe-top))" }}
             onClick={() => setShowMenu(false)}
           />

package/components/layout/MenuPanel.tsx

@@ -38,22 +38,22 @@ const TAB_ICONS: Record<Tab, React.ReactNode> = {
 
 const TAB_TITLES: Record<Tab, string> = {
   chat: "Chat",
-  dashboard: "Dashboard",
+  dashboard: "Usage",
   agents: "Agents",
-  memory: "Memory",
+  memory: "Knowledge",
   documents: "Documents",
   models: "Models",
   credentials: "Credentials",
   mcp: "MCP",
   extensions: "Extensions",
-  tools: "Tools",
-  tasks: "Tasks",
+  tools: "Capabilities",
+  tasks: "Automations",
   bridges: "Bridges",
   profile: "Profile",
   harness: "Harness",
   logs: "Logs",
   env: "Defaults",
-  settings: "Advanced settings",
+  settings: "Settings",
 };
 
 // Tiny-screen labels (<=380px). Only abbreviate where the full name is
@@ -61,38 +61,28 @@ const TAB_TITLES: Record<Tab, string> = {
 // "Me", "Setup") that overloads or contradicts the real meaning.
 const TAB_SHORT: Record<Tab, string> = {
   chat: "Chat",
-  dashboard: "Dash",
+  dashboard: "Usage",
   agents: "Agents",
-  memory: "Memory",
+  memory: "Knowledge",
   documents: "Docs",
   models: "Models",
   credentials: "Keys",
   mcp: "MCP",
   extensions: "Ext",
-  tools: "Tools",
-  tasks: "Tasks",
+  tools: "Capabilities",
+  tasks: "Automations",
   bridges: "Bridges",
   profile: "Profile",
   harness: "Tests",
   logs: "Logs",
   env: "Env",
-  settings: "Advanced",
+  settings: "Settings",
 };
 
-// Two-tier menu. "Common" surfaces the day-to-day verbs. Settings is
-// the single home for previously top-level chrome (credentials, models,
-// harness, logs, defaults, appearance, networking) — those legacy Tab
-// values still exist for deep-link compat but no longer appear in this
-// menu grid.
-//
-// Capability-presence surfaces (documents, memory, MCP, extensions,
-// bridges, built-in tool categories) all live under the "Tools" tab now —
-// they were scattered across the top-level menu before but they're all
-// answering the same question: "what can the agent see / do?". The legacy
-// top-level Tab entries remain wired so deep-links (?tab=documents&item=…)
-// still resolve, but they're hidden from the menu grid.
-const COMMON_TABS: Tab[] = ["chat", "dashboard", "agents", "tools", "tasks", "profile", "settings"];
-const ADVANCED_TABS: Tab[] = [];
+// Keep everyday destinations visible; move the operational and capability
+// panels behind Full mode's Advanced section.
+const COMMON_TABS: Tab[] = ["chat", "agents", "settings", "profile"];
+const ADVANCED_TABS: Tab[] = ["dashboard", "tasks", "tools", "memory"];
 
 const ADVANCED_KEY = "jarela.menu.advanced";
 

package/components/profile/ProfilePanel.tsx

@@ -42,7 +42,7 @@ export function ProfilePanel() {
   }
 
   return (
-    <div className="flex flex-col h-full">
+    <div className="mx-auto flex h-full w-full max-w-5xl flex-col">
       <PanelHeader icon={<User size={14} />} title="Profile">
         {isEssential && (
           <button
@@ -56,7 +56,7 @@ export function ProfilePanel() {
           </button>
         )}
       </PanelHeader>
-      <div ref={containerRef} className="flex-1 overflow-y-auto no-scrollbar max-w-lg mx-auto w-full">
+      <div ref={containerRef} className="min-h-0 flex-1 overflow-y-auto no-scrollbar">
         <ProfileEditor />
       </div>
     </div>

package/components/settings/AppearancePanel.tsx

@@ -1,8 +1,9 @@
 "use client";
-import { Monitor, Moon, Palette, Sun } from "lucide-react";
+import { Check, Monitor, Moon, Palette, Sun } from "lucide-react";
 import { PanelHeader } from "@/components/ui/PanelHeader";
-import { useTheme, type Theme } from "@/contexts/ThemeContext";
+import { useTheme, type AccentColor, type SurfaceStyle, type Theme } from "@/contexts/ThemeContext";
 import { useAppContext, type ExperienceMode } from "@/contexts/AppContext";
+import { getAppAccentColor } from "@/lib/env/app-config";
 
 // Visual + chrome settings that used to live in the MenuPanel footer
 // (theme) and the top of the menu (Workspace mode). Hoisted here so
@@ -11,8 +12,9 @@ import { useAppContext, type ExperienceMode } from "@/contexts/AppContext";
 
 export function AppearancePanel() {
   const { state, dispatch } = useAppContext();
-  const { theme, setTheme } = useTheme();
+  const { theme, setTheme, accentColor, setAccentColor, surfaceStyle, setSurfaceStyle } = useTheme();
   const isFullMode = state.experienceMode === "full";
+  const defaultAccent = getAppAccentColor() ?? "#2563eb";
 
   const themeOptions: { value: Theme; label: string; icon: React.ReactNode; description: string }[] = [
     { value: "light",  label: "Light",  icon: <Sun size={14} />,     description: "Bright UI; ignores system preference." },
@@ -25,6 +27,21 @@ export function AppearancePanel() {
     { value: "full",      label: "Full",      description: "Everything visible: engine-room tabs, power-user settings, all advanced sub-tabs." },
   ];
 
+  const hasBrandAccent = getAppAccentColor() !== null;
+  const accentOptions: { value: AccentColor; label: string; swatch: string }[] = [
+    { value: "default", label: hasBrandAccent ? "Brand" : "Blue", swatch: defaultAccent },
+    ...(hasBrandAccent ? [{ value: "blue" as const, label: "Blue", swatch: "#2563eb" }] : []),
+    { value: "teal", label: "Teal", swatch: "#0f766e" },
+    { value: "violet", label: "Violet", swatch: "#6d28d9" },
+    { value: "rose", label: "Rose", swatch: "#be123c" },
+  ];
+
+  const surfaceOptions: { value: SurfaceStyle; label: string; description: string }[] = [
+    { value: "ambient", label: "Atmospheric", description: "Keep the background glow and current glass surfaces." },
+    { value: "calm", label: "Calm", description: "Keep navigation glass subtle and the background quiet." },
+    { value: "liquid", label: "Liquid Glass", description: "Let background colors show through with brighter edge reflections." },
+  ];
+
   function setMode(mode: ExperienceMode) {
     if (mode === state.experienceMode) return;
     dispatch({ type: "SET_EXPERIENCE_MODE", mode });
@@ -35,6 +52,33 @@ export function AppearancePanel() {
       <PanelHeader icon={<Palette size={14} />} title="Appearance" />
 
       <div className="flex-1 overflow-y-auto no-scrollbar px-4 py-4 space-y-6">
+        <section>
+          <h3 className="text-[11px] uppercase tracking-wide text-fg-faint mb-2 px-1">Accent color</h3>
+          <div className="flex flex-wrap gap-2">
+            {accentOptions.map((option) => {
+              const active = accentColor === option.value;
+              return (
+                <button
+                  key={option.value}
+                  type="button"
+                  onClick={() => setAccentColor(option.value)}
+                  aria-label={`${option.label} accent color`}
+                  aria-pressed={active}
+                  title={option.label}
+                  className={`control-tap inline-flex items-center gap-2 rounded-lg border px-2.5 py-1.5 text-xs transition-colors ${
+                    active ? "border-accent bg-accent/10 text-fg" : "border-border bg-surface-2 text-fg-muted hover:bg-surface-3"
+                  }`}
+                >
+                  <span className="inline-flex h-4 w-4 items-center justify-center rounded-full" style={{ backgroundColor: option.swatch }}>
+                    {active && <Check size={11} className="text-white" />}
+                  </span>
+                  {option.label}
+                </button>
+              );
+            })}
+          </div>
+        </section>
+
         <section>
           <h3 className="text-[11px] uppercase tracking-wide text-fg-faint mb-2 px-1">Theme</h3>
           <div className="grid grid-cols-1 sm:grid-cols-3 gap-2">
@@ -62,6 +106,29 @@ export function AppearancePanel() {
           </div>
         </section>
 
+        <section>
+          <h3 className="text-[11px] uppercase tracking-wide text-fg-faint mb-2 px-1">Surface style</h3>
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
+            {surfaceOptions.map((option) => {
+              const active = surfaceStyle === option.value;
+              return (
+                <button
+                  key={option.value}
+                  type="button"
+                  onClick={() => setSurfaceStyle(option.value)}
+                  aria-pressed={active}
+                  className={`text-left rounded-lg border px-3 py-2.5 transition-colors ${
+                    active ? "border-accent bg-accent/10 text-fg" : "border-border bg-surface-2 text-fg-muted hover:bg-surface-3"
+                  }`}
+                >
+                  <div className="text-sm font-medium text-fg mb-1">{option.label}</div>
+                  <p className="text-[11px] text-fg-faint leading-snug">{option.description}</p>
+                </button>
+              );
+            })}
+          </div>
+        </section>
+
         <section>
           <h3 className="text-[11px] uppercase tracking-wide text-fg-faint mb-2 px-1">Workspace mode</h3>
           <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">

package/components/settings/SettingsPanel.tsx

@@ -92,7 +92,7 @@ export function SettingsPanel() {
   }));
 
   return (
-    <div className="flex flex-col h-full min-h-0">
+    <div className="mx-auto flex h-full min-h-0 w-full max-w-5xl flex-col">
       <SubTabBar
         ariaLabel="Settings sub-section"
         tabs={tabItems}
@@ -120,7 +120,7 @@ export function SettingsPanel() {
 // future change to either panel without touching this file.
 function PrivacySecurityPanel() {
   return (
-    <div className="h-full overflow-y-auto no-scrollbar max-w-lg mx-auto w-full px-4 py-3">
+    <div className="h-full w-full overflow-y-auto px-4 py-3 no-scrollbar">
       <SettingsGroup defaultOpenId="pin">
         <SecurityPanel />
         <RedactionPanel />

package/components/tools/ToolsPanel.tsx

@@ -2,7 +2,6 @@
 import { useAppContext } from "@/contexts/AppContext";
 import { MCPPanel } from "@/components/mcp/MCPPanel";
 import { SkillsPanel } from "@/components/skills/SkillsPanel";
-import { UnifiedMemoryPanel } from "@/components/memory/UnifiedMemoryPanel";
 import { BridgesPanel } from "@/components/bridges/BridgesPanel";
 import { BrowserPanel } from "@/components/tools/BrowserPanel";
 import { PackagesPanel } from "./PackagesPanel";
@@ -13,7 +12,7 @@ import { SubTabBar, type SubTabItem } from "@/components/ui/SubTabBar";
 //                   manifests, and drop-in `.cjs` files. One home for
 //                   everything that turns into a LangChain tool.
 //   - "Skills"    — markdown playbooks (repos) the agent reads/writes on demand.
-//   - "Memory"    — searchable chats and documents, plus saved facts.
+//   - Knowledge now has its own Advanced-menu destination.
 //   - "MCP"       — external Model Context Protocol servers.
 //   - "Bridges"   — mobile / messaging bridge pairings.
 //   - "Browser"   — the local Chromium extension as an agent runtime surface.
@@ -23,17 +22,15 @@ type Sub =
   | "packages"
   | "browser"
   | "skills"
-  | "memory"
   | "mcp"
   | "bridges";
 
-const SUBS: Sub[] = ["packages", "browser", "skills", "memory", "mcp", "bridges"];
+const SUBS: Sub[] = ["packages", "browser", "skills", "mcp", "bridges"];
 
 const SUB_TITLES: Record<Sub, string> = {
   packages: "Packages",
   browser: "Browser",
   skills: "Skills",
-  memory: "Memory",
   mcp: "MCP servers",
   bridges: "Bridges",
 };
@@ -43,7 +40,6 @@ const SUB_TITLES: Record<Sub, string> = {
 const LEGACY_SUBS: Record<string, Sub> = {
   builtin: "packages",
   extensions: "packages",
-  documents: "memory",
 };
 
 export function ToolsPanel() {
@@ -70,7 +66,6 @@ export function ToolsPanel() {
         {active === "packages" && <PackagesPanel />}
         {active === "browser" && <BrowserPanel />}
         {active === "skills" && <SkillsPanel />}
-        {active === "memory" && <UnifiedMemoryPanel />}
         {active === "mcp" && <MCPPanel />}
         {active === "bridges" && <BridgesPanel />}
       </div>

package/components/ui/AppearancePreferences.test.tsx

@@ -0,0 +1,68 @@
+// @vitest-environment jsdom
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { ThemeProvider, useTheme } from "@/contexts/ThemeContext";
+
+function PreferenceProbe() {
+  const { accentColor, setAccentColor, surfaceStyle, setSurfaceStyle } = useTheme();
+  return (
+    <div>
+      <span data-testid="accent">{accentColor}</span>
+      <span data-testid="surface">{surfaceStyle}</span>
+      <button onClick={() => setAccentColor("teal")}>Choose teal</button>
+      <button onClick={() => setAccentColor("default")}>Choose default</button>
+      <button onClick={() => setSurfaceStyle("ambient")}>Choose atmospheric</button>
+      <button onClick={() => setSurfaceStyle("liquid")}>Choose Liquid Glass</button>
+    </div>
+  );
+}
+
+describe("ThemeContext appearance preferences", () => {
+  beforeEach(() => {
+    localStorage.clear();
+    vi.stubGlobal("matchMedia", vi.fn().mockReturnValue({
+      matches: false,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    }));
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    document.documentElement.removeAttribute("data-accent-color");
+    document.documentElement.removeAttribute("data-surface-style");
+  });
+
+  it("restores, applies, and resets appearance choices", async () => {
+    localStorage.setItem("jarela-accent-color", "rose");
+    localStorage.setItem("jarela-surface-style", "calm");
+    render(
+      <ThemeProvider>
+        <PreferenceProbe />
+      </ThemeProvider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId("accent").textContent).toBe("rose");
+      expect(screen.getByTestId("surface").textContent).toBe("calm");
+      expect(document.documentElement.dataset.accentColor).toBe("rose");
+      expect(document.documentElement.dataset.surfaceStyle).toBe("calm");
+    });
+
+    fireEvent.click(screen.getByRole("button", { name: "Choose teal" }));
+    expect(document.documentElement.dataset.accentColor).toBe("teal");
+    expect(localStorage.getItem("jarela-accent-color")).toBe("teal");
+
+    fireEvent.click(screen.getByRole("button", { name: "Choose default" }));
+    expect(document.documentElement.hasAttribute("data-accent-color")).toBe(false);
+    expect(localStorage.getItem("jarela-accent-color")).toBeNull();
+
+    fireEvent.click(screen.getByRole("button", { name: "Choose atmospheric" }));
+    expect(document.documentElement.dataset.surfaceStyle).toBe("ambient");
+    expect(localStorage.getItem("jarela-surface-style")).toBe("ambient");
+
+    fireEvent.click(screen.getByRole("button", { name: "Choose Liquid Glass" }));
+    expect(document.documentElement.dataset.surfaceStyle).toBe("liquid");
+    expect(localStorage.getItem("jarela-surface-style")).toBe("liquid");
+  });
+});

package/components/ui/BootScreen.test.tsx

@@ -0,0 +1,44 @@
+// @vitest-environment jsdom
+import { act, render } from "@testing-library/react";
+import { afterEach, expect, it, vi } from "vitest";
+import { BootScreen } from "./BootScreen";
+
+const reads = vi.hoisted(() => ({
+  profile: vi.fn(),
+  agent: vi.fn(),
+  thread: vi.fn(),
+  messages: vi.fn(),
+}));
+vi.mock("@/api/client", () => ({
+  api: {
+    profile: { get: reads.profile },
+    agents: { get: reads.agent, getThread: reads.thread },
+    threads: { get: reads.messages },
+  },
+}));
+vi.mock("@/components/ui/Logo", () => ({ Logo: () => null }));
+vi.mock("@/components/ui/VersionTag", () => ({ VersionTag: () => null }));
+vi.mock("@/components/ui/PoweredBy", () => ({ PoweredBy: () => null }));
+vi.mock("@/components/ui/WorkflowChecklist", () => ({ WorkflowChecklist: () => null }));
+
+afterEach(() => { vi.useRealTimers(); });
+
+it("does not restart boot prefetch after dismissal when the agent changes", async () => {
+  vi.useFakeTimers();
+  reads.profile.mockResolvedValue({});
+  reads.agent.mockResolvedValue({});
+  reads.thread.mockResolvedValue({ thread_id: "thread" });
+  reads.messages.mockResolvedValue({});
+  const onPickAgent = vi.fn();
+  const { rerender, container } = render(
+    <BootScreen agents={[]} agentsLoaded activeAgentId="first" onPickAgent={onPickAgent} />,
+  );
+  await act(async () => {});
+  await act(async () => { await vi.advanceTimersByTimeAsync(750); });
+  expect(container.innerHTML).toBe("");
+  rerender(<BootScreen agents={[]} agentsLoaded activeAgentId="second" onPickAgent={onPickAgent} />);
+  await act(async () => {});
+  expect(reads.agent).toHaveBeenCalledTimes(1);
+  expect(reads.agent).toHaveBeenCalledWith("first", { startup: true });
+  expect(reads.thread).toHaveBeenCalledTimes(1);
+});

package/components/ui/BootScreen.tsx

@@ -61,6 +61,7 @@ interface Props {
   agents: AgentConfig[];
   agentsLoaded: boolean;
   activeAgentId: string | null;
+  preferredThreadId?: string | null;
   onPickAgent: (agentId: string) => void;
   // Boot picker is a chat-tab gate; suppress on non-chat tabs so it doesn't overlay them.
   suppressed?: boolean;
@@ -78,7 +79,7 @@ interface Props {
 // Replaces the previous splash + ChatView empty-state agent picker. The
 // header (z-40) is hidden while this is visible so the user lands on a
 // focused, one-purpose screen.
-export function BootScreen({ agents, agentsLoaded, activeAgentId, onPickAgent, suppressed }: Props) {
+export function BootScreen({ agents, agentsLoaded, activeAgentId, preferredThreadId, onPickAgent, suppressed }: Props) {
   // Capture which agent we transitioned through so the icon can keep
   // showing during the fade-out, even if a parent state shift would
   // otherwise clear it.
@@ -96,7 +97,6 @@ export function BootScreen({ agents, agentsLoaded, activeAgentId, onPickAgent, s
   const [adoptionBusy, setAdoptionBusy] = useState<VersionAdoptionAction | null>(null);
   const [adoptionLiveLabel, setAdoptionLiveLabel] = useState<string | null>(null);
   const adoptionRef = useRef<VersionAdoptionState | null>(null);
-  const prefetchStartedRef = useRef(false);
   const adoptionRunStartedRef = useRef<string | null>(null);
   const adoptionAbortRef = useRef<AbortController | null>(null);
   adoptionRef.current = adoption;
@@ -244,9 +244,8 @@ export function BootScreen({ agents, agentsLoaded, activeAgentId, onPickAgent, s
   // half-rendered chat that has to fetch the same data anyway.
   useEffect(() => {
     const id = activeAgentId ?? pickedId;
-    if (!id || !agentsLoaded) return;
-    if (prefetchStartedRef.current) return;
-    prefetchStartedRef.current = true;
+    if (!id || !agentsLoaded || done) return;
+    setDismissing(false);
 
     setSteps([
       { key: "profile", label: "loading your profile", status: "active" },
@@ -259,22 +258,36 @@ export function BootScreen({ agents, agentsLoaded, activeAgentId, onPickAgent, s
 
     void (async () => {
       await Promise.allSettled([
-        api.profile.get().finally(() => {
+        api.profile.get({ startup: true }).catch((error: unknown) => {
+          console.error("startup profile warmup failed", error);
+        }).finally(() => {
           if (!cancelled) markStep("profile", "done");
         }),
         api.agents
-          .get(id)
+          .get(id, { startup: true })
+          .catch((error: unknown) => {
+            console.error("startup agent warmup failed", error);
+          })
           .finally(() => {
             if (!cancelled) markStep("agent", "done");
           }),
         (async () => {
           try {
-            const t = await api.agents.getThread(id);
+            if (preferredThreadId) {
+              try {
+                const preferred = await api.threads.get(preferredThreadId, { startup: true });
+                if (preferred.agent_id === id) return;
+              } catch (error) {
+                console.error("startup selected conversation warmup failed", error);
+              }
+            }
+            const t = await api.agents.getThread(id, { startup: true });
             if (cancelled) return;
             markStep("thread", "done");
             markStep("messages", "active");
-            await api.threads.get(t.thread_id);
-          } catch {
+            await api.threads.get(t.thread_id, { startup: true });
+          } catch (error) {
+            console.error("startup conversation warmup failed", error);
             // Errors here are non-fatal for boot — ChatView will surface
             // them with its own retry path. Just mark the steps done so
             // we don't block the user behind the splash forever.
@@ -301,7 +314,7 @@ export function BootScreen({ agents, agentsLoaded, activeAgentId, onPickAgent, s
       cancelled = true;
       if (dismissTimerRef.current) clearTimeout(dismissTimerRef.current);
     };
-  }, [activeAgentId, pickedId, agentsLoaded, markStep]);
+  }, [activeAgentId, pickedId, preferredThreadId, agentsLoaded, markStep, done]);
 
   if (done) return null;
   if (suppressed) return null;

package/components/ui/NotificationStatus.test.tsx

@@ -21,12 +21,12 @@ describe("NotificationStatus", () => {
   it("renders a theme-safe denied state with an accessible dismiss action", async () => {
     render(<NotificationStatus />);
 
-    const copy = await screen.findByText(/OS notifications are blocked/);
+    const copy = await screen.findByText(/System notifications are blocked/);
     const banner = copy.closest(".rounded-lg");
     expect(banner?.className).toContain("bg-rose-500/10");
     expect(screen.getByRole("button", { name: "Dismiss notification prompt" })).toBeTruthy();
 
     fireEvent.click(screen.getByRole("button", { name: "Dismiss notification prompt" }));
-    expect(screen.queryByText(/OS notifications are blocked/)).toBeNull();
+    expect(screen.queryByText(/System notifications are blocked/)).toBeNull();
   });
 });

package/components/ui/NotificationStatus.tsx

@@ -85,15 +85,15 @@ export function NotificationStatus() {
     : "border-amber-500/30 bg-amber-500/10";
 
   return (
-    <div className="absolute top-9 left-0 right-0 z-30 mx-auto max-w-2xl px-4 mt-2 pointer-events-none">
-      <div role="status" className={`pointer-events-auto rounded-lg border ${bannerTone} backdrop-blur px-3 py-2 flex items-center gap-2 shadow-lg`}>
+    <div className="absolute top-9 left-0 right-0 z-30 mx-auto max-w-xl px-4 mt-2 pointer-events-none">
+      <div role="status" className={`pointer-events-auto rounded-lg border ${bannerTone} backdrop-blur px-3 py-2 flex flex-wrap items-center gap-x-2 gap-y-1 shadow-lg`}>
         {status === "denied"
           ? <BellOff size={14} className="text-rose-700 dark:text-rose-400 shrink-0" />
           : <Bell size={14} className="text-amber-700 dark:text-amber-400 shrink-0" />}
-        <p className="text-xs text-fg mr-auto">
+        <p className="min-w-0 flex-1 basis-full text-xs text-fg sm:basis-auto">
           {status === "denied"
-            ? "OS notifications are blocked. In-app pop-ups still work; for system-level alerts when Jarela isn't focused, allow Notifications via the lock icon in the URL bar."
-            : "Enable OS notifications to also get pinged when Jarela isn't focused (in-app pop-ups already work)."}
+            ? "System notifications are blocked. In-app alerts still work; change this in browser site settings."
+            : "Enable system alerts for when Jarela isn't focused."}
         </p>
         {status === "default" && (
           <button

package/components/ui/SubTabBar.tsx

@@ -159,11 +159,10 @@ function EdgeArrow({ side, onClick }: { side: "left" | "right"; onClick: () => v
   return (
     <button
       type="button"
-      tabIndex={-1}
-      aria-hidden="true"
+      aria-label={`Scroll tabs ${side}`}
       onClick={onClick}
       className={
-        "absolute inset-y-0 w-8 flex items-center pointer-coarse:hidden text-fg-muted hover:text-fg from-[var(--bg-secondary)] via-[var(--bg-secondary)] to-transparent " +
+        "absolute inset-y-0 w-8 flex items-center text-fg-muted hover:text-fg from-[var(--bg-secondary)] via-[var(--bg-secondary)] to-transparent " +
         (side === "left"
           ? "bg-gradient-to-r left-0 justify-start pl-1"
           : "bg-gradient-to-l right-0 justify-end pr-1")