@circuitwall/jarela 1.9.2 → 1.9.3

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/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>
+  );
+}

package/components/settings/SettingsPanel.tsx

@@ -0,0 +1,94 @@
+"use client";
+import { Cpu, Globe, Key, Palette, ScrollText, ServerCog, Shapes } from "lucide-react";
+import { useAppContext } from "@/contexts/AppContext";
+import { CredentialsListPanel } from "@/components/credentials/CredentialsPanel";
+import { NetworkPanel } from "@/components/integrations/NetworkPanel";
+import { ModelsPanel } from "@/components/models/ModelsPanel";
+import { HarnessPanel } from "@/components/harness/HarnessPanel";
+import { LogsPanel } from "@/components/logs/LogsPanel";
+import { EnvVarsPanel } from "@/components/env/EnvVarsPanel";
+import { AppearancePanel } from "./AppearancePanel";
+
+// Settings is the consolidated home for everything that used to live as
+// its own top-level tab (credentials, models, harness, logs, defaults)
+// plus appearance/networking. The individual Tab values still exist so
+// deep links like ?tab=credentials and ?tab=models keep working — this
+// surface is the new top-of-funnel for menu navigation.
+
+type Sub =
+  | "appearance"
+  | "networking"
+  | "credentials"
+  | "models"
+  | "harness"
+  | "logs"
+  | "defaults";
+
+const SUBS: ReadonlyArray<{ id: Sub; label: string; icon: React.ReactNode; advancedOnly?: boolean }> = [
+  { id: "appearance",  label: "Appearance",  icon: <Palette size={13} /> },
+  { id: "networking",  label: "Networking",  icon: <Globe size={13} /> },
+  { id: "credentials", label: "Credentials", icon: <Key size={13} /> },
+  { id: "models",      label: "Models",      icon: <Cpu size={13} /> },
+  { id: "harness",     label: "Harness",     icon: <Shapes size={13} />,    advancedOnly: true },
+  { id: "logs",        label: "Logs",        icon: <ScrollText size={13} />, advancedOnly: true },
+  { id: "defaults",    label: "Defaults",    icon: <ServerCog size={13} />,  advancedOnly: true },
+];
+
+const VALID = new Set<Sub>(SUBS.map((s) => s.id));
+
+function parseSub(raw: string | undefined): Sub {
+  if (raw && VALID.has(raw as Sub)) return raw as Sub;
+  return "appearance";
+}
+
+export function SettingsPanel() {
+  const { state, dispatch } = useAppContext();
+  const isFullMode = state.experienceMode === "full";
+  const active = parseSub(state.selectedItem.settings);
+
+  const setSub = (s: Sub) =>
+    dispatch({ type: "SET_SELECTION", tab: "settings", itemId: s });
+
+  const visibleSubs = SUBS.filter((s) => isFullMode || !s.advancedOnly);
+
+  return (
+    <div className="flex flex-col h-full min-h-0">
+      <div
+        role="tablist"
+        aria-label="Settings sub-section"
+        className="flex gap-1 border-b border-[var(--border)] bg-[var(--bg-secondary)] px-3 pt-2 overflow-x-auto"
+      >
+        {visibleSubs.map((s) => {
+          const selected = s.id === active;
+          return (
+            <button
+              key={s.id}
+              role="tab"
+              type="button"
+              aria-selected={selected}
+              onClick={() => setSub(s.id)}
+              className={
+                "inline-flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-t-md border-b-2 -mb-px transition-colors whitespace-nowrap " +
+                (selected
+                  ? "border-[var(--accent)] text-[var(--text-primary)] bg-[var(--bg-primary)]"
+                  : "border-transparent text-[var(--text-secondary)] hover:text-[var(--text-primary)]")
+              }
+            >
+              <span className="text-fg-subtle">{s.icon}</span>
+              <span>{s.label}</span>
+            </button>
+          );
+        })}
+      </div>
+      <div className="flex-1 min-h-0 overflow-hidden">
+        {active === "appearance"  && <AppearancePanel />}
+        {active === "networking"  && <NetworkPanel />}
+        {active === "credentials" && <CredentialsListPanel />}
+        {active === "models"      && <ModelsPanel />}
+        {active === "harness"     && <HarnessPanel />}
+        {active === "logs"        && <LogsPanel />}
+        {active === "defaults"    && <EnvVarsPanel />}
+      </div>
+    </div>
+  );
+}

package/contexts/AppContext.tsx

@@ -13,7 +13,7 @@ function parseStoredMode(raw: string | null): ExperienceMode | null {
   return null;
 }
 
-export type Tab = "chat" | "dashboard" | "agents" | "memory" | "documents" | "models" | "credentials" | "mcp" | "extensions" | "tools" | "tasks" | "bridges" | "profile" | "harness" | "logs" | "env";
+export type Tab = "chat" | "dashboard" | "agents" | "memory" | "documents" | "models" | "credentials" | "mcp" | "extensions" | "tools" | "tasks" | "bridges" | "profile" | "harness" | "logs" | "env" | "settings";
 
 interface AppState {
   activeThreadId: string | null;

package/hooks/useUrlSync.ts

@@ -15,7 +15,7 @@ import { useEffect, useRef } from "react";
 import { useAppContext, type Tab } from "@/contexts/AppContext";
 import { buildHref, parseHref } from "@/lib/ui/navigate";
 
-const TABS: Tab[] = ["chat", "dashboard", "agents", "memory", "documents", "models", "credentials", "mcp", "extensions", "tools", "tasks", "bridges", "profile", "harness"];
+const TABS: Tab[] = ["chat", "dashboard", "agents", "memory", "documents", "models", "credentials", "mcp", "extensions", "tools", "tasks", "bridges", "profile", "harness", "settings"];
 
 export function useUrlSync() {
   const { state, dispatch } = useAppContext();

package/lib/ui/navigate.ts

@@ -18,7 +18,7 @@ export interface ParsedHref {
   external: boolean;
 }
 
-const TABS: Tab[] = ["chat", "dashboard", "agents", "memory", "models", "credentials", "mcp", "extensions", "tools", "tasks", "bridges", "profile", "harness", "documents"];
+const TABS: Tab[] = ["chat", "dashboard", "agents", "memory", "models", "credentials", "mcp", "extensions", "tools", "tasks", "bridges", "profile", "harness", "documents", "settings"];
 
 export function parseHref(input: string | null | undefined): ParsedHref {
   if (!input) return { external: false };

package/package.json

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