@circuitwall/jarela 1.9.1 → 1.9.3

package/components/{integrations/IntegrationsPanel.tsx → credentials/IntegrationCard.tsx}

@@ -1,177 +1,18 @@
 "use client";
-import { CheckCircle2, ExternalLink, Filter, Key, Link as LinkIcon, Loader2, RefreshCw, Settings2, Terminal, Trash2, XCircle } from "lucide-react";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { CheckCircle2, ExternalLink, Link as LinkIcon, Loader2, Terminal, Trash2, XCircle } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
 import { api } from "@/api/client";
-import type { IntegrationDefinition, IntegrationStatus, UserProfile } from "@/api/types";
-import { useDeepLinkScroll } from "@/hooks/useDeepLinkScroll";
-import { useAppContext } from "@/contexts/AppContext";
-import { PRESET_CATEGORIES } from "@/lib/integrations/categories";
-import { NetworkSection } from "./NetworkSection";
-import { AllowedSitesSection } from "./AllowedSitesSection";
-import { EnvAliasEditor } from "./EnvAliasEditor";
+import type { IntegrationDefinition, IntegrationStatus } from "@/api/types";
 
 const SECRET_MASK = "********";
 
-// Human label for the preset chip in the panel header. Keep terse —
-// the chip is informational, not the primary picker (that lives in the
-// Profile editor).
-const PRESET_LABELS: Record<NonNullable<UserProfile["preset"]>, string> = {
-  home: "Home",
-  work: "Work",
-  dev: "Developer",
-  custom: "Everything",
-};
+// Per-integration editor with inline OAuth Connect, Save, Test, Clear, and
+// (for Gmail/Outlook) a collapsible setup guide. Extracted from the old
+// `components/integrations/IntegrationsPanel.tsx` so the unified credentials
+// panel can render one card per known integration — keeping OAuth and key
+// editing in the same surface that handles model API keys.
 
-export function IntegrationsPanel() {
-  const { dispatch } = useAppContext();
-  const [defs, setDefs] = useState<IntegrationDefinition[]>([]);
-  const [statuses, setStatuses] = useState<Record<string, IntegrationStatus>>({});
-  const [loading, setLoading] = useState(true);
-  const [syncing, setSyncing] = useState(false);
-  const [syncMsg, setSyncMsg] = useState<string | null>(null);
-  const [aliasEditorOpen, setAliasEditorOpen] = useState(false);
-  const [preset, setPreset] = useState<UserProfile["preset"]>(null);
-  const containerRef = useRef<HTMLDivElement>(null);
-  useDeepLinkScroll("credentials", "integration", containerRef);
-
-  async function load() {
-    setLoading(true);
-    try {
-      const [res, profile] = await Promise.all([
-        api.integrations.list(),
-        api.profile.get().catch(() => null),
-      ]);
-      setDefs(res.definitions);
-      setStatuses(Object.fromEntries(res.statuses.map((s) => [s.name, s])));
-      setPreset(profile?.preset ?? null);
-    } catch (e) { console.error(e); }
-    finally { setLoading(false); }
-  }
-  useEffect(() => { void load(); }, []);
-
-  // Persona filter: if the user has chosen a preset, hide integrations
-  // outside that bucket. "custom" or unset → show everything (legacy
-  // behaviour). Configured-but-out-of-bucket entries are kept visible
-  // so a previously-saved credential is never silently hidden.
-  const visibleDefs = useMemo(() => {
-    if (!preset) return defs;
-    const allowed = PRESET_CATEGORIES[preset];
-    if (allowed === null) return defs;
-    return defs.filter((def) => {
-      if (!def.category) return true;
-      if (allowed.has(def.category)) return true;
-      // Don't hide something the user has already configured — bail out
-      // gracefully so credentials never appear to vanish.
-      return statuses[def.name]?.configured === true;
-    });
-  }, [defs, preset, statuses]);
-
-  const hiddenCount = defs.length - visibleDefs.length;
-
-  async function syncFromEnv() {
-    setSyncing(true);
-    setSyncMsg(null);
-    try {
-      const r = await api.envSync.apply();
-      const sourceLabel = r.discovered.source === "shell-rc"
-        ? `your ${r.discovered.shell ?? "shell"} rc`
-        : r.discovered.source === "windows-registry"
-          ? "your Windows User env"
-          : "the process env";
-      if (r.applied_count > 0) {
-        setSyncMsg(`Synced ${r.applied_count} field(s) from ${sourceLabel}.`);
-      } else {
-        const userSkipped = r.candidates.filter((c) => c.action === "skipped-user").length;
-        const equal = r.candidates.filter((c) => c.action === "skipped-equal").length;
-        const absent = r.candidates.filter((c) => c.action === "absent").length;
-        if (userSkipped > 0) {
-          setSyncMsg(`Nothing to write — ${userSkipped} field(s) were edited here and won't be overwritten.`);
-        } else if (equal > 0 && absent === r.candidates.length - equal) {
-          setSyncMsg(`Already up to date with ${sourceLabel}.`);
-        } else {
-          setSyncMsg(`No matching env vars set in ${sourceLabel}.`);
-        }
-      }
-      await load();
-    } catch (e) {
-      setSyncMsg(e instanceof Error ? e.message : String(e));
-    } finally {
-      setSyncing(false);
-    }
-  }
-
-  return (
-    <div className="flex flex-col h-full">
-      <div className="border-b border-border px-4 py-3 flex items-center gap-2">
-        <Key size={14} className="text-fg-subtle" />
-        <h2 className="text-sm font-semibold text-fg mr-auto">Built-in integrations</h2>
-        {preset && preset !== "custom" && (
-          <button
-            type="button"
-            onClick={() => dispatch({ type: "SET_TAB", tab: "profile" })}
-            title={`Filtered to "${PRESET_LABELS[preset]}" preset. Click to change in Profile.`}
-            className="inline-flex items-center gap-1 px-2 py-1 text-[11px] rounded-full border border-border bg-surface-2 text-fg-muted hover:bg-surface-3"
-          >
-            <Filter size={11} />
-            <span>{PRESET_LABELS[preset]}</span>
-            {hiddenCount > 0 && (
-              <span className="text-fg-faint">· {hiddenCount} hidden</span>
-            )}
-          </button>
-        )}
-        <button
-          onClick={() => setAliasEditorOpen((v) => !v)}
-          title="Add additional env-var name aliases that env-sync should look for, per integration field."
-          className="inline-flex items-center gap-1 px-2 py-1 text-[11px] rounded border border-border text-fg-muted hover:bg-surface-3"
-        >
-          <Settings2 size={11} />
-          Aliases
-        </button>
-        <button
-          onClick={syncFromEnv}
-          disabled={syncing}
-          title="Pull standard credential env vars (GITHUB_TOKEN, ATLASSIAN_API_TOKEN, …) from your shell rc / Windows User env. Fields you've edited here are never overwritten."
-          className="inline-flex items-center gap-1 px-2 py-1 text-[11px] rounded border border-border text-fg-muted hover:bg-surface-3 disabled:opacity-50"
-        >
-          {syncing ? <Loader2 size={11} className="animate-spin" /> : <RefreshCw size={11} />}
-          Sync from environment
-        </button>
-      </div>
-
-      <div ref={containerRef} className="flex-1 overflow-y-auto px-4 py-3">
-        {syncMsg && (
-          <div className="mb-3 px-3 py-2 rounded border border-border bg-surface-2 text-[11px] text-fg-muted flex items-start gap-2">
-            <Terminal size={12} className="mt-0.5 text-fg-subtle shrink-0" />
-            <span className="flex-1">{syncMsg}</span>
-            <button onClick={() => setSyncMsg(null)} className="text-fg-faint hover:text-fg">
-              <XCircle size={12} />
-            </button>
-          </div>
-        )}
-        {aliasEditorOpen && (
-          <EnvAliasEditor
-            onClose={() => setAliasEditorOpen(false)}
-            onSaved={() => { /* re-sync happens on next click of Sync button; nothing to refresh here */ }}
-          />
-        )}
-        <NetworkSection />
-        <AllowedSitesSection />
-        {loading && defs.length === 0 && <p className="text-fg-faint text-sm py-6 text-center">Loading…</p>}
-        {!loading && defs.length === 0 && <p className="text-fg-faint text-sm py-6 text-center">No integrations available.</p>}
-        {visibleDefs.map((def) => (
-          <IntegrationCard
-            key={def.name}
-            definition={def}
-            status={statuses[def.name]}
-            onChanged={load}
-          />
-        ))}
-      </div>
-    </div>
-  );
-}
-
-function IntegrationCard({
+export function IntegrationCard({
   definition: def,
   status,
   onChanged,

package/components/documents/AddSourceForm.tsx

@@ -87,10 +87,10 @@ function buildPayload(s: FormState): CreatePayload | null {
 
 function kindHint(kind: DocumentSourceKind): string {
   if (kind === "local_folder") return "Pick a folder on this machine.";
-  if (kind === "gmail_mail") return "Requires Gmail credentials (Credentials → Built-in integrations → Gmail).";
-  if (kind === "outlook_mail") return "Requires Outlook credentials (Credentials → Built-in integrations → Outlook).";
-  if (isGithubKind(kind)) return "Requires GitHub credentials (Credentials → Built-in integrations → GitHub).";
-  return "Requires Atlassian credentials (Credentials → Built-in integrations → Atlassian).";
+  if (kind === "gmail_mail") return "Requires Gmail credentials (Credentials → Gmail).";
+  if (kind === "outlook_mail") return "Requires Outlook credentials (Credentials → Outlook).";
+  if (isGithubKind(kind)) return "Requires GitHub credentials (Credentials → GitHub).";
+  return "Requires Atlassian credentials (Credentials → Atlassian).";
 }
 
 export function AddSourceForm({ disabled, onSubmit }: Props) {

package/components/documents/DocumentsPanel.tsx

@@ -31,7 +31,7 @@ export function DocumentsPanel() {
         <p className="text-xs text-fg-faint leading-relaxed">
           Sources listed here are indexed in the background. Text files in folders are chunked, embedded, and
           made available to agents via the <code className="font-mono text-fg-muted">documents_search</code> tool.
-          Remote sources reuse credentials configured in <em>Credentials → Built-in integrations</em>:
+          Remote sources reuse credentials configured in <em>Credentials</em>:
           {" "}Jira/Confluence under <em>Atlassian</em>, GitHub PRs/repos under <em>GitHub</em>, and mail under <em>Gmail</em>/<em>Outlook</em>.
           Embedding uses your default model provider; without one, search falls back to substring match.
         </p>

package/components/integrations/NetworkPanel.tsx

@@ -0,0 +1,104 @@
+"use client";
+import { Globe, Loader2, RefreshCw, Settings2, Terminal, XCircle } from "lucide-react";
+import { useRef, useState } from "react";
+import { api } from "@/api/client";
+import { useDeepLinkScroll } from "@/hooks/useDeepLinkScroll";
+import { NetworkSection } from "./NetworkSection";
+import { AllowedSitesSection } from "./AllowedSitesSection";
+import { EnvAliasEditor } from "./EnvAliasEditor";
+
+// "Network & environment" hosts everything that's NOT a credential: HTTP
+// proxy, allowed sites, env-var aliases, and the env-sync button that
+// pulls credential env vars (GITHUB_TOKEN, ATLASSIAN_API_TOKEN, …) from
+// the user's shell rc / Windows User env into the unified credentials
+// store. Per-integration auth (keys + OAuth) lives in the sibling
+// Credentials sub-tab.
+
+export function NetworkPanel() {
+  const [syncing, setSyncing] = useState(false);
+  const [syncMsg, setSyncMsg] = useState<string | null>(null);
+  const [aliasEditorOpen, setAliasEditorOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  useDeepLinkScroll("credentials", "network", containerRef);
+
+  async function syncFromEnv() {
+    setSyncing(true);
+    setSyncMsg(null);
+    try {
+      const r = await api.envSync.apply();
+      const sourceLabel = r.discovered.source === "shell-rc"
+        ? `your ${r.discovered.shell ?? "shell"} rc`
+        : r.discovered.source === "windows-registry"
+          ? "your Windows User env"
+          : "the process env";
+      if (r.applied_count > 0) {
+        setSyncMsg(`Synced ${r.applied_count} field(s) from ${sourceLabel}.`);
+      } else {
+        const userSkipped = r.candidates.filter((c) => c.action === "skipped-user").length;
+        const equal = r.candidates.filter((c) => c.action === "skipped-equal").length;
+        const absent = r.candidates.filter((c) => c.action === "absent").length;
+        if (userSkipped > 0) {
+          setSyncMsg(`Nothing to write — ${userSkipped} field(s) were edited here and won't be overwritten.`);
+        } else if (equal > 0 && absent === r.candidates.length - equal) {
+          setSyncMsg(`Already up to date with ${sourceLabel}.`);
+        } else {
+          setSyncMsg(`No matching env vars set in ${sourceLabel}.`);
+        }
+      }
+      // Notify the Credentials list so it re-loads any newly-synced rows.
+      if (typeof window !== "undefined") {
+        window.dispatchEvent(new CustomEvent("jarela:credentials-changed"));
+      }
+    } catch (e) {
+      setSyncMsg(e instanceof Error ? e.message : String(e));
+    } finally {
+      setSyncing(false);
+    }
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="border-b border-border px-4 py-3 flex items-center gap-2">
+        <Globe size={14} className="text-fg-subtle" />
+        <h2 className="text-sm font-semibold text-fg mr-auto">Network &amp; environment</h2>
+        <button
+          onClick={() => setAliasEditorOpen((v) => !v)}
+          title="Add additional env-var name aliases that env-sync should look for, per integration field."
+          className="inline-flex items-center gap-1 px-2 py-1 text-[11px] rounded border border-border text-fg-muted hover:bg-surface-3"
+        >
+          <Settings2 size={11} />
+          Aliases
+        </button>
+        <button
+          onClick={syncFromEnv}
+          disabled={syncing}
+          title="Pull standard credential env vars (GITHUB_TOKEN, ATLASSIAN_API_TOKEN, …) from your shell rc / Windows User env into the Credentials list. Fields you've edited there are never overwritten."
+          className="inline-flex items-center gap-1 px-2 py-1 text-[11px] rounded border border-border text-fg-muted hover:bg-surface-3 disabled:opacity-50"
+        >
+          {syncing ? <Loader2 size={11} className="animate-spin" /> : <RefreshCw size={11} />}
+          Sync from environment
+        </button>
+      </div>
+
+      <div ref={containerRef} className="flex-1 overflow-y-auto px-4 py-3">
+        {syncMsg && (
+          <div className="mb-3 px-3 py-2 rounded border border-border bg-surface-2 text-[11px] text-fg-muted flex items-start gap-2">
+            <Terminal size={12} className="mt-0.5 text-fg-subtle shrink-0" />
+            <span className="flex-1">{syncMsg}</span>
+            <button onClick={() => setSyncMsg(null)} className="text-fg-faint hover:text-fg">
+              <XCircle size={12} />
+            </button>
+          </div>
+        )}
+        {aliasEditorOpen && (
+          <EnvAliasEditor
+            onClose={() => setAliasEditorOpen(false)}
+            onSaved={() => { /* re-sync happens on next click of Sync button; nothing to refresh here */ }}
+          />
+        )}
+        <NetworkSection />
+        <AllowedSitesSection />
+      </div>
+    </div>
+  );
+}

package/components/layout/AppShell.tsx

@@ -22,6 +22,7 @@ import { BridgesPanel } from "@/components/bridges/BridgesPanel";
 import { HarnessPanel } from "@/components/harness/HarnessPanel";
 import { LogsPanel } from "@/components/logs/LogsPanel";
 import { EnvVarsPanel } from "@/components/env/EnvVarsPanel";
+import { SettingsPanel } from "@/components/settings/SettingsPanel";
 import { HeaderActivity } from "@/components/ui/HeaderActivity";
 import { NotificationStatus } from "@/components/ui/NotificationStatus";
 import { CryptoFallbackBanner } from "@/components/ui/CryptoFallbackBanner";
@@ -548,6 +549,11 @@ export function AppShell() {
             <EnvVarsPanel />
           </Activity>
         )}
+        {mountedTabs.has("settings") && (
+          <Activity mode={state.activeTab === "settings" ? "visible" : "hidden"}>
+            <SettingsPanel />
+          </Activity>
+        )}
 
         {showMenu && (
           <div

package/components/layout/MenuPanel.tsx

@@ -1,11 +1,10 @@
 "use client";
-import { BarChart3, Bot, Brain, Calendar, ChevronDown, Cpu, FolderSearch, Key, MessageSquare, Monitor, Moon, ScrollText, ServerCog, Shapes, Smartphone, Sun, User, Wrench } from "lucide-react";
+import { BarChart3, Bot, Brain, Calendar, ChevronDown, Cpu, FolderSearch, Key, MessageSquare, ScrollText, ServerCog, Settings, Shapes, Smartphone, User, Wrench } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useAppContext, type Tab } from "@/contexts/AppContext";
 import type { AgentConfig } from "@/api/types";
 import { api } from "@/api/client";
 import { useUnreadByAgent } from "@/lib/ui/toasts";
-import { useTheme, type Theme } from "@/contexts/ThemeContext";
 
 interface Props {
   activeTab: Tab;
@@ -32,6 +31,7 @@ const TAB_ICONS: Record<Tab, React.ReactNode> = {
   harness: <Shapes size={13} />,
   logs: <ScrollText size={13} />,
   env: <ServerCog size={13} />,
+  settings: <Settings size={13} />,
 };
 
 const TAB_TITLES: Record<Tab, string> = {
@@ -51,6 +51,7 @@ const TAB_TITLES: Record<Tab, string> = {
   harness: "Harness",
   logs: "Logs",
   env: "Defaults",
+  settings: "Settings",
 };
 
 const TAB_SHORT: Record<Tab, string> = {
@@ -70,11 +71,14 @@ const TAB_SHORT: Record<Tab, string> = {
   harness: "Test",
   logs: "Logs",
   env: "Defaults",
+  settings: "Setup",
 };
 
-// Two-tier menu. "Common" surfaces the day-to-day verbs plus the most
-// relevant configuration touchpoints. "Advanced" hides the less-frequently
-// used engine-room surfaces behind a collapsible header.
+// 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 —
@@ -82,15 +86,8 @@ const TAB_SHORT: Record<Tab, string> = {
 // 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.
-//
-// "credentials" is the single home for every auth surface — saved API
-// keys + built-in integrations (Gmail, GitHub, Atlassian…) live there as
-// sub-tabs.
-//
-// "models" lives in Advanced — most users let the default model do its
-// job; switching providers is power-user territory.
-const COMMON_TABS: Tab[] = ["chat", "dashboard", "agents", "credentials", "tools", "tasks", "profile"];
-const ADVANCED_TABS: Tab[] = ["models", "harness", "logs", "env"];
+const COMMON_TABS: Tab[] = ["chat", "dashboard", "agents", "tools", "tasks", "profile", "settings"];
+const ADVANCED_TABS: Tab[] = [];
 
 const ADVANCED_KEY = "jarela.menu.advanced";
 
@@ -118,6 +115,7 @@ const TAB_ACCENT: Partial<Record<Tab, string>> = {
   harness: "from-orange-500/20 to-amber-500/5",
   logs: "from-slate-500/20 to-zinc-500/5",
   env: "from-teal-500/20 to-cyan-500/5",
+  settings: "from-slate-500/20 to-zinc-500/5",
 };
 
 function avatarGradient(id: string): string {
@@ -231,12 +229,8 @@ export function MenuPanel({
   onAgentChange,
   onSetTab,
 }: Props) {
-  const { state, dispatch } = useAppContext();
+  const { state } = useAppContext();
   const isFullMode = state.experienceMode === "full";
-  const setMode = (mode: "essential" | "full") => {
-    if ((mode === "full") === isFullMode) return;
-    dispatch({ type: "SET_EXPERIENCE_MODE", mode });
-  };
   // Advanced section starts collapsed once the user has dismissed it
   // once (persisted to localStorage). Defaults to *expanded* on first
   // boot so the engine room is visible to power users out of the box.
@@ -295,42 +289,11 @@ export function MenuPanel({
       style={{ top: "calc(3rem + var(--app-safe-top))" }}
     >
       {/* Common navigation — the day-to-day surface. */}
-      <div className="px-3 pt-2 pb-1 border-b border-border/60 bg-gradient-to-r from-surface-2/50 to-transparent">
-        <div className="flex items-center justify-between gap-2">
-          <span className="text-[10px] uppercase tracking-wide text-fg-faint">Workspace mode</span>
-          <div
-            role="radiogroup"
-            aria-label="Workspace mode"
-            className="inline-flex items-center rounded-full border border-border bg-surface-3 p-0.5"
-          >
-            {(["essential", "full"] as const).map((mode) => {
-              const active = (mode === "full") === isFullMode;
-              return (
-                <button
-                  key={mode}
-                  type="button"
-                  role="radio"
-                  aria-checked={active}
-                  onClick={() => setMode(mode)}
-                  title={active ? `${mode} mode (current)` : `Switch to ${mode} mode`}
-                  className={`control-tap text-[10px] uppercase tracking-wide px-2 py-0.5 rounded-full transition-colors ${
-                    active
-                      ? "bg-accent/15 text-fg-subtle"
-                      : "text-fg-faint hover:text-fg-muted"
-                  }`}
-                >
-                  {mode}
-                </button>
-              );
-            })}
-          </div>
-        </div>
-      </div>
-      <div className="grid grid-cols-4 sm:grid-cols-6 gap-1.5 px-2 py-2 border-b border-border shrink-0">
+      <div className="grid grid-cols-4 sm:grid-cols-6 gap-1.5 px-2 py-2 border-b border-border shrink-0 bg-gradient-to-r from-surface-2/50 to-transparent">
         {COMMON_TABS.map(renderTabButton)}
       </div>
 
-      {isFullMode && (
+      {isFullMode && ADVANCED_TABS.length > 0 && (
         <div className="border-b border-border shrink-0">
           <button
             type="button"
@@ -359,45 +322,6 @@ export function MenuPanel({
           onSelect={(id) => { onAgentChange(id); onSetTab("chat"); onClose(); }}
         />
       </div>
-
-      {/* Display toggles */}
-      <div className="border-t border-border px-3 py-3 shrink-0 bg-surface-1/30">
-        <p className="text-[11px] text-fg-faint mb-1.5 font-medium uppercase tracking-wide">Display</p>
-        <div className="flex flex-col gap-1.5">
-          <ThemePicker />
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function ThemePicker() {
-  const { theme, setTheme } = useTheme();
-  const options: { value: Theme; label: string; icon: React.ReactNode }[] = [
-    { value: "light",  label: "Light",  icon: <Sun size={12} /> },
-    { value: "dark",   label: "Dark",   icon: <Moon size={12} /> },
-    { value: "system", label: "System", icon: <Monitor size={12} /> },
-  ];
-  return (
-    <div className="flex items-center gap-2 text-xs text-fg-muted rounded-lg border border-border bg-surface-3/70 px-2.5 py-2">
-      <span className="shrink-0">Theme</span>
-      <div className="flex flex-1 rounded-lg border border-border overflow-hidden bg-surface">
-        {options.map((o) => (
-          <button
-            key={o.value}
-            onClick={() => setTheme(o.value)}
-            title={o.label}
-            className={`control-tap flex-1 inline-flex items-center justify-center gap-1 py-1 text-[11px] transition-colors ${
-              theme === o.value
-                ? "bg-surface-3 text-fg shadow-sm"
-                : "text-fg-faint hover:text-fg-muted hover:bg-surface-3/50"
-            }`}
-          >
-            {o.icon}
-            <span>{o.label}</span>
-          </button>
-        ))}
-      </div>
     </div>
   );
 }

package/components/profile/ProfileEditor.tsx

@@ -203,7 +203,7 @@ function PresetPicker({
     <div className="block">
       <span className="text-xs text-fg-subtle mb-1 block">Persona</span>
       <p className="text-[11px] text-fg-faint mb-2">
-        Filters the Built-in integrations panel so you only see integrations relevant
+        Filters the Credentials list so you only see integrations relevant
         to how you use Jarela. Pick &quot;Everything&quot; to see them all.
       </p>
       <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">

package/components/proposals/ApprovalsBanner.tsx

@@ -14,11 +14,11 @@ function approvalToastTarget(action: PendingAction): { href: string; hrefLabel:
   switch (action.kind) {
     case "enable_integration": {
       const id = str("id");
-      return id ? { href: `?tab=credentials&item=integrations`, hrefLabel: "Open in Credentials →", title: `${id} enabled` } : null;
+      return id ? { href: `?tab=credentials&item=${encodeURIComponent(id)}`, hrefLabel: "Open in Credentials →", title: `${id} enabled` } : null;
     }
     case "start_oauth": {
       const id = str("integration_id");
-      return id ? { href: `?tab=credentials&item=integrations`, hrefLabel: "Open in Credentials →", title: `${id} authorized` } : null;
+      return id ? { href: `?tab=credentials&item=${encodeURIComponent(id)}`, hrefLabel: "Open in Credentials →", title: `${id} authorized` } : null;
     }
     case "set_provider_key": {
       const name = str("name") ?? str("provider");

package/components/settings/AppearancePanel.tsx

@@ -0,0 +1,93 @@
+"use client";
+import { Monitor, Moon, Palette, Sun } from "lucide-react";
+import { useTheme, type Theme } from "@/contexts/ThemeContext";
+import { useAppContext, type ExperienceMode } from "@/contexts/AppContext";
+
+// Visual + chrome settings that used to live in the MenuPanel footer
+// (theme) and the top of the menu (Workspace mode). Hoisted here so
+// every settings surface has the same shape: a Settings sub-tab with
+// its own header.
+
+export function AppearancePanel() {
+  const { state, dispatch } = useAppContext();
+  const { theme, setTheme } = useTheme();
+  const isFullMode = state.experienceMode === "full";
+
+  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." },
+    { value: "dark",   label: "Dark",   icon: <Moon size={14} />,    description: "Dimmed UI; ignores system preference." },
+    { value: "system", label: "System", icon: <Monitor size={14} />, description: "Follow the OS-level light/dark preference." },
+  ];
+
+  const modeOptions: { value: ExperienceMode; label: string; description: string }[] = [
+    { value: "essential", label: "Essential", description: "Day-to-day surfaces only. Hides Memory, Bridges, Harness, Logs, Defaults from the menu." },
+    { value: "full",      label: "Full",      description: "Everything visible: engine-room tabs, power-user settings, all advanced sub-tabs." },
+  ];
+
+  function setMode(mode: ExperienceMode) {
+    if (mode === state.experienceMode) return;
+    dispatch({ type: "SET_EXPERIENCE_MODE", mode });
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="border-b border-border px-4 py-3 flex items-center gap-2">
+        <Palette size={14} className="text-fg-subtle" />
+        <h2 className="text-sm font-semibold text-fg mr-auto">Appearance</h2>
+      </div>
+
+      <div className="flex-1 overflow-y-auto px-4 py-4 space-y-6">
+        <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">
+            {themeOptions.map((o) => {
+              const active = theme === o.value;
+              return (
+                <button
+                  key={o.value}
+                  onClick={() => setTheme(o.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="flex items-center gap-2 mb-1">
+                    <span className="text-fg-subtle">{o.icon}</span>
+                    <span className="text-sm font-medium text-fg">{o.label}</span>
+                  </div>
+                  <p className="text-[11px] text-fg-faint leading-snug">{o.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">
+            {modeOptions.map((o) => {
+              const active = isFullMode ? o.value === "full" : o.value === "essential";
+              return (
+                <button
+                  key={o.value}
+                  onClick={() => setMode(o.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">{o.label}</div>
+                  <p className="text-[11px] text-fg-faint leading-snug">{o.description}</p>
+                </button>
+              );
+            })}
+          </div>
+        </section>
+      </div>
+    </div>
+  );
+}