@circuitwall/jarela 1.9.1 → 1.9.2

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/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/package.json

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