@circuitwall/jarela 2.3.0 → 2.5.0

package/components/chat/useThreadMetadataPolling.test.tsx

@@ -0,0 +1,128 @@
+// @vitest-environment jsdom
+import { act, renderHook } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+const mocks = vi.hoisted(() => ({ metadata: vi.fn() }));
+vi.mock("@/api/client", () => ({ api: { threads: { metadata: mocks.metadata } } }));
+const { useThreadMetadataPolling } = await import("./useThreadMetadataPolling");
+
+function applier() {
+  return {
+    setHotSince: vi.fn(), setHotSinceSeq: vi.fn(), setWarmSummary: vi.fn(),
+    setWarmSummaryBefore: vi.fn(), setWarmSummaryBeforeSeq: vi.fn(),
+    setWarmSummaryComputedAt: vi.fn(), setWarmSummarySourceMessages: vi.fn(),
+    setWarmSummarySourceChars: vi.fn(), setContextWindowTokens: vi.fn(),
+    setWarmSummaryPending: vi.fn(), setCompactionPending: vi.fn(),
+  };
+}
+
+async function advance(ms: number) {
+  await act(async () => { await vi.advanceTimersByTimeAsync(ms); });
+}
+
+describe("thread metadata polling", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    mocks.metadata.mockReset().mockResolvedValue({ hot_since_seq: 4, warm_summary_before_seq: 4 });
+    Object.defineProperty(document, "hidden", { configurable: true, value: false });
+  });
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.restoreAllMocks();
+    Reflect.deleteProperty(document, "hidden");
+  });
+
+  it("uses metadata reads and stops when disabled", async () => {
+    const meta = applier();
+    const { rerender } = renderHook(({ enabled }) => useThreadMetadataPolling("t1", enabled, meta),
+      { initialProps: { enabled: true } });
+    await advance(1600);
+    expect(mocks.metadata).toHaveBeenCalledWith("t1", expect.any(AbortSignal));
+    expect(meta.setHotSinceSeq).toHaveBeenCalledWith(4);
+    expect(meta.setWarmSummaryPending).toHaveBeenCalledWith(false);
+    rerender({ enabled: false });
+    await advance(5000);
+    expect(mocks.metadata).toHaveBeenCalledTimes(1);
+  });
+
+  it("waits for each response before scheduling another read", async () => {
+    let resolve!: (value: object) => void;
+    mocks.metadata.mockReturnValueOnce(new Promise((r) => { resolve = r; }));
+    renderHook(() => useThreadMetadataPolling("t1", true, applier()));
+    await advance(8000);
+    expect(mocks.metadata).toHaveBeenCalledTimes(1);
+    await act(async () => resolve({}));
+    await advance(1599);
+    expect(mocks.metadata).toHaveBeenCalledTimes(1);
+    await advance(1);
+    expect(mocks.metadata).toHaveBeenCalledTimes(2);
+  });
+
+  it("pauses while hidden and refreshes immediately on visibility", async () => {
+    Object.defineProperty(document, "hidden", { configurable: true, value: true });
+    renderHook(() => useThreadMetadataPolling("t1", true, applier()));
+    await advance(5000);
+    expect(mocks.metadata).not.toHaveBeenCalled();
+    Object.defineProperty(document, "hidden", { configurable: true, value: false });
+    await act(async () => document.dispatchEvent(new Event("visibilitychange")));
+    expect(mocks.metadata).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not overlap an in-flight read when the page becomes visible again", async () => {
+    let resolve!: (value: object) => void;
+    mocks.metadata.mockReturnValueOnce(new Promise((r) => { resolve = r; }));
+    const { unmount } = renderHook(() => useThreadMetadataPolling("t1", true, applier()));
+    await advance(1600);
+    Object.defineProperty(document, "hidden", { configurable: true, value: true });
+    await act(async () => document.dispatchEvent(new Event("visibilitychange")));
+    Object.defineProperty(document, "hidden", { configurable: true, value: false });
+    await act(async () => document.dispatchEvent(new Event("visibilitychange")));
+    expect(mocks.metadata).toHaveBeenCalledTimes(1);
+    await act(async () => resolve({}));
+    await advance(1600);
+    expect(mocks.metadata).toHaveBeenCalledTimes(2);
+    unmount();
+  });
+
+  it("uses the latest metadata setters without restarting the polling timer", async () => {
+    const first = applier();
+    const second = applier();
+    const { rerender } = renderHook(({ meta }) => useThreadMetadataPolling("t1", true, meta),
+      { initialProps: { meta: first } });
+    await advance(800);
+    rerender({ meta: second });
+    await advance(800);
+    expect(mocks.metadata).toHaveBeenCalledTimes(1);
+    expect(first.setHotSinceSeq).not.toHaveBeenCalled();
+    expect(second.setHotSinceSeq).toHaveBeenCalledWith(4);
+  });
+
+  it("aborts and ignores stale responses after switching threads", async () => {
+    let resolve!: (value: object) => void;
+    mocks.metadata.mockReturnValueOnce(new Promise((r) => { resolve = r; }));
+    const meta = applier();
+    const { rerender } = renderHook(({ id }) => useThreadMetadataPolling(id, true, meta),
+      { initialProps: { id: "t1" } });
+    await advance(1600);
+    const signal = mocks.metadata.mock.calls[0][1] as AbortSignal;
+    rerender({ id: "t2" });
+    expect(signal.aborted).toBe(true);
+    await act(async () => resolve({ hot_since_seq: 99 }));
+    expect(meta.setHotSinceSeq).not.toHaveBeenCalled();
+    await advance(1600);
+    expect(mocks.metadata).toHaveBeenLastCalledWith("t2", expect.any(AbortSignal));
+  });
+
+  it("logs failures and retries without replacing metadata with defaults", async () => {
+    const error = new Error("offline");
+    mocks.metadata.mockRejectedValueOnce(error);
+    const log = vi.spyOn(console, "error").mockImplementation(() => {});
+    const meta = applier();
+    renderHook(() => useThreadMetadataPolling("t1", true, meta));
+    await advance(1600);
+    expect(log).toHaveBeenCalledWith("thread metadata refresh failed", error);
+    expect(meta.setHotSinceSeq).not.toHaveBeenCalled();
+    await advance(1600);
+    expect(meta.setHotSinceSeq).toHaveBeenCalledWith(4);
+  });
+});

package/components/chat/useThreadMetadataPolling.ts

@@ -0,0 +1,50 @@
+"use client";
+import { useEffect, useRef } from "react";
+import { api } from "@/api/client";
+import { applyThreadMeta, type ThreadMetaApplier } from "./chat-helpers";
+
+export function useThreadMetadataPolling(
+  threadId: string | null,
+  enabled: boolean,
+  metaApplier: ThreadMetaApplier,
+) {
+  const metaRef = useRef(metaApplier);
+  metaRef.current = metaApplier;
+
+  useEffect(() => {
+    if (!threadId || !enabled) return;
+    const targetThreadId = threadId;
+    let cancelled = false;
+    let inFlight = false;
+    let timer: number | undefined;
+    const controller = new AbortController();
+    const schedule = () => {
+      if (!cancelled && !document.hidden) timer = window.setTimeout(tick, 1600);
+    };
+    async function tick() {
+      if (cancelled || inFlight || document.hidden) return;
+      inFlight = true;
+      try {
+        const metadata = await api.threads.metadata(targetThreadId, controller.signal);
+        if (!cancelled) applyThreadMeta(metaRef.current, metadata);
+      } catch (err) {
+        if (!cancelled) console.error("thread metadata refresh failed", err);
+      } finally {
+        inFlight = false;
+        schedule();
+      }
+    }
+    const onVisibilityChange = () => {
+      window.clearTimeout(timer);
+      if (!document.hidden) void tick();
+    };
+    schedule();
+    document.addEventListener("visibilitychange", onVisibilityChange);
+    return () => {
+      cancelled = true;
+      controller.abort();
+      window.clearTimeout(timer);
+      document.removeEventListener("visibilitychange", onVisibilityChange);
+    };
+  }, [threadId, enabled]);
+}

package/components/chat/useUserProfileAndAgent.test.tsx

@@ -0,0 +1,31 @@
+// @vitest-environment jsdom
+import { act, renderHook, waitFor } from "@testing-library/react";
+import { expect, it, vi } from "vitest";
+import { useUserProfileAndAgent } from "./useUserProfileAndAgent";
+
+const { getAgent, getProfile } = vi.hoisted(() => ({
+  getAgent: vi.fn(),
+  getProfile: vi.fn(),
+}));
+vi.mock("@/api/client", () => ({
+  api: { agents: { get: getAgent }, profile: { get: getProfile } },
+}));
+
+it("warms startup reads and ignores an agent response after switching agents", async () => {
+  let resolveOld!: (config: { id: string }) => void;
+  getProfile.mockResolvedValue({ name: "Test user" });
+  getAgent.mockImplementation((id: string) => id === "old"
+    ? new Promise((resolve) => { resolveOld = resolve; })
+    : Promise.resolve({ id }));
+  const { result, rerender } = renderHook(
+    ({ id }) => useUserProfileAndAgent(id),
+    { initialProps: { id: "old" } },
+  );
+  rerender({ id: "new" });
+  await waitFor(() => expect(result.current.agentConfig?.id).toBe("new"));
+  await act(async () => resolveOld({ id: "old" }));
+  expect(result.current.agentConfig?.id).toBe("new");
+  expect(result.current.agentConfigLoading).toBe(false);
+  expect(getProfile).toHaveBeenCalledWith({ startup: true });
+  expect(getAgent).toHaveBeenCalledWith("new", { startup: true });
+});

package/components/chat/useUserProfileAndAgent.ts

@@ -18,7 +18,12 @@ export function useUserProfileAndAgent(agentId: string | null): Result {
 
   useEffect(() => {
     setProfileLoading(true);
-    api.profile.get().then(setUserProfile).catch(console.error).finally(() => setProfileLoading(false));
+    let cancelled = false;
+    api.profile.get({ startup: true })
+      .then((profile) => { if (!cancelled) setUserProfile(profile); })
+      .catch((error) => { if (!cancelled) console.error(error); })
+      .finally(() => { if (!cancelled) setProfileLoading(false); });
+    return () => { cancelled = true; };
   }, []);
 
   useEffect(() => {
@@ -27,8 +32,14 @@ export function useUserProfileAndAgent(agentId: string | null): Result {
       setAgentConfigLoading(false);
       return;
     }
+    let cancelled = false;
+    setAgentConfig(null);
     setAgentConfigLoading(true);
-    api.agents.get(agentId).then(setAgentConfig).catch(console.error).finally(() => setAgentConfigLoading(false));
+    api.agents.get(agentId, { startup: true })
+      .then((config) => { if (!cancelled) setAgentConfig(config); })
+      .catch((error) => { if (!cancelled) console.error(error); })
+      .finally(() => { if (!cancelled) setAgentConfigLoading(false); });
+    return () => { cancelled = true; };
   }, [agentId]);
 
   return { userProfile, profileLoading, agentConfig, agentConfigLoading };

package/components/dashboard/DashboardPanel.tsx

@@ -54,7 +54,7 @@ export function DashboardPanel() {
   return (
     <div className="relative h-full overflow-y-auto p-4 md:p-6 space-y-4">
       <div className="mx-auto max-w-7xl space-y-4">
-        <div className="pointer-events-none absolute inset-0 overflow-hidden">
+        <div className="dashboard-atmosphere pointer-events-none absolute inset-0 overflow-hidden">
           <div className="absolute -top-20 -right-20 w-72 h-72 rounded-full bg-cyan-500/10 blur-3xl" />
           <div className="absolute top-64 -left-24 w-80 h-80 rounded-full bg-emerald-500/10 blur-3xl" />
         </div>

package/components/dashboard/Series.tsx

@@ -15,6 +15,7 @@ export function InteractiveTokenChart({ series, selectedDay, onSelectDay }: Toke
   const [barsReady, setBarsReady] = useState(false);
   const maxTotal = series.reduce((max, p) => Math.max(max, p.input_tokens_est + p.output_tokens_est), 0);
   const active = hovered != null ? series[hovered] : null;
+  const labelInterval = Math.max(1, Math.ceil(series.length / 7));
   const animationSignature = series.map((s) => `${s.day}:${s.input_tokens_est}:${s.output_tokens_est}`).join("|");
 
   useEffect(() => {
@@ -30,29 +31,35 @@ export function InteractiveTokenChart({ series, selectedDay, onSelectDay }: Toke
   return (
     <div>
       <div className="relative h-48 rounded-xl bg-[var(--bg-primary)]/35 p-2">
+        <div className="h-full overflow-x-auto overscroll-x-contain">
+          <div className="h-full flex items-end gap-1 pt-5" style={{ minWidth: `${series.length * 18}px` }}>
+            {series.map((point, idx) => (
+              <TokenBar
+                key={point.day}
+                point={point}
+                idx={idx}
+                maxTotal={maxTotal}
+                barsReady={barsReady}
+                hovered={hovered === idx}
+                selected={selectedDay === point.day}
+                showDateLabel={idx % labelInterval === 0 || idx === series.length - 1}
+                onHover={setHovered}
+                onSelectDay={onSelectDay}
+              />
+            ))}
+          </div>
+        </div>
         <div
-          className={`absolute right-2 top-2 inline-flex h-6 items-center gap-1.5 rounded-full px-2.5 text-[10px] tracking-wide transition-opacity ${
+          className={`pointer-events-none absolute right-2 top-2 inline-flex h-6 items-center gap-1.5 rounded-full px-2.5 text-[10px] tracking-wide transition-opacity ${
             active ? "bg-[var(--bg-secondary)]/85 text-[var(--text-primary)] opacity-100" : "text-[var(--text-secondary)] opacity-60"
           }`}
         >
-          {active
-            ? `${active.day} · ${formatInt(active.input_tokens_est + active.output_tokens_est)} tokens`
-            : "hover bars for details"}
-        </div>
-        <div className="h-full flex items-end gap-1 pt-5">
-          {series.map((point, idx) => (
-            <TokenBar
-              key={point.day}
-              point={point}
-              idx={idx}
-              maxTotal={maxTotal}
-              barsReady={barsReady}
-              hovered={hovered === idx}
-              selected={selectedDay === point.day}
-              onHover={setHovered}
-              onSelectDay={onSelectDay}
-            />
-          ))}
+          {active ? `${active.day} · ${formatInt(active.input_tokens_est + active.output_tokens_est)} tokens` : (
+            <>
+              <span className="hidden sm:inline">hover bars for details</span>
+              <span className="sm:hidden">tap bars; swipe for dates</span>
+            </>
+          )}
         </div>
       </div>
       <TokenChartLegend active={active} />
@@ -67,11 +74,12 @@ interface TokenBarProps {
   barsReady: boolean;
   hovered: boolean;
   selected: boolean;
+  showDateLabel: boolean;
   onHover: (i: number | null) => void;
   onSelectDay?: (day: string) => void;
 }
 
-function TokenBar({ point, idx, maxTotal, barsReady, hovered, selected, onHover, onSelectDay }: TokenBarProps) {
+function TokenBar({ point, idx, maxTotal, barsReady, hovered, selected, showDateLabel, onHover, onSelectDay }: TokenBarProps) {
   const total = point.input_tokens_est + point.output_tokens_est;
   const hasData = total > 0;
   const totalHeight = hasData && maxTotal > 0 ? Math.max(4, Math.round((total / maxTotal) * 150)) : 0;
@@ -152,7 +160,12 @@ function TokenBar({ point, idx, maxTotal, barsReady, hovered, selected, onHover,
         ) : null}
       </div>
       <span className={`mt-1 text-[10px] truncate w-full text-center ${hasData ? "text-[var(--text-secondary)]" : "text-[var(--text-secondary)]/50"}`}>
-        {point.day.slice(5)}
+        {showDateLabel && (
+          <>
+            <span className="hidden sm:inline">{point.day.slice(5)}</span>
+            <span className="sm:hidden">{point.day.slice(8)}</span>
+          </>
+        )}
       </span>
     </div>
   );

package/components/dashboard/SummaryCards.tsx

@@ -17,7 +17,7 @@ export function SummaryStrip({ data, currencyInfo, windowTokenTotal, activeDays,
   const cacheHitPct = (data.summary.cache_hit_rate * 100).toFixed(1);
   const hasCacheStats = data.summary.cache_read_tokens > 0;
   return (
-    <div className={`relative grid gap-2 ${hasCacheStats ? "md:grid-cols-5" : "md:grid-cols-4"}`}>
+    <div className={`relative grid grid-cols-2 gap-2 ${hasCacheStats ? "md:grid-cols-5" : "md:grid-cols-4"}`}>
       <InsightChip
         label="Window tokens"
         value={formatInt(windowTokenTotal)}

package/components/integrations/NetworkSection.tsx

@@ -243,12 +243,12 @@ export function NetworkSection() {
             {mode !== "off" && (
               <>
                 <label className="block text-xs text-fg-subtle">
-                  No proxy (comma-separated, optional)
+                  No proxy (comma-separated, optional; localhost is always direct)
                   <input
                     type="text"
                     value={noProxy}
                     onChange={(e) => setNoProxy(e.target.value)}
-                    placeholder="localhost,127.0.0.1,.internal"
+                    placeholder=".internal,corp.example"
                     className="mt-1 w-full px-2 py-1.5 text-sm rounded border border-border bg-surface-3 text-fg font-mono"
                   />
                 </label>

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">