@circuitwall/jarela 1.9.1 → 1.9.3

package/components/credentials/AddCredentialDialog.tsx

@@ -1,12 +1,11 @@
 "use client";
-import { ChevronLeft, ExternalLink, Loader2, X } from "lucide-react";
-import { useEffect, useMemo, useState } from "react";
+import { ChevronLeft, X } from "lucide-react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { api } from "@/api/client";
 import type { IntegrationDefinition, IntegrationStatus } from "@/api/types";
 import { useEscapeKey } from "@/hooks/useEscapeKey";
 import { pushErrorToast } from "@/lib/ui/error-report";
-
-const SECRET_MASK = "********";
+import { IntegrationCard } from "./IntegrationCard";
 
 type Category = NonNullable<IntegrationDefinition["category"]>;
 
@@ -46,17 +45,13 @@ interface Props {
   // Called after a successful save with the integration name that was
   // configured. Hosts can use this to refresh their views.
   onSaved?: (integrationName: string) => void;
-  // Hook for "open in Built-in integrations sub-tab" — host wires it to
-  // flip the Credentials tab onto the integrations sub. When omitted the
-  // link is hidden.
-  onOpenInIntegrations?: (integrationName: string) => void;
 }
 
 // Unified picker for adding/editing any credential. Shows manifest
-// providers grouped by category, then drops the user into a manifest-
-// driven form. Backed by api.integrations.* — saves land in the same
-// credentials table the IntegrationsPanel writes to.
-export function AddCredentialDialog({ initialCategory, directProviderName, lockCategory, onClose, onSaved, onOpenInIntegrations }: Props) {
+// providers grouped by category, then drops the user into the same
+// IntegrationCard editor the Credentials panel renders inline — so
+// OAuth Connect, Test, and the setup guides are all in one place.
+export function AddCredentialDialog({ initialCategory, directProviderName, lockCategory, onClose, onSaved }: Props) {
   const [defs, setDefs] = useState<IntegrationDefinition[]>([]);
   const [statuses, setStatuses] = useState<Record<string, IntegrationStatus>>({});
   const [loading, setLoading] = useState(true);
@@ -66,6 +61,16 @@ export function AddCredentialDialog({ initialCategory, directProviderName, lockC
 
   useEscapeKey(onClose);
 
+  const reload = useCallback(async () => {
+    try {
+      const res = await api.integrations.list();
+      setDefs(res.definitions);
+      setStatuses(Object.fromEntries(res.statuses.map((s) => [s.name, s])));
+    } catch (e) {
+      pushErrorToast({ title: "Couldn't load credentials catalog", error: e, context: { panel: "credentials", action: "catalog.load" } });
+    }
+  }, []);
+
   useEffect(() => {
     let cancelled = false;
     (async () => {
@@ -178,16 +183,19 @@ export function AddCredentialDialog({ initialCategory, directProviderName, lockC
         )}
 
         {step === "form" && activeDef && (
-          <ProviderForm
-            def={activeDef}
-            status={activeStatus}
-            onSaved={() => {
-              onSaved?.(activeDef.name);
-              onClose();
-            }}
-            onCancel={lockCategory || directProviderName ? onClose : backToPicker}
-            onOpenInIntegrations={onOpenInIntegrations ? () => { onOpenInIntegrations(activeDef.name); onClose(); } : undefined}
-          />
+          <div className="p-4 max-h-[70vh] overflow-y-auto">
+            <IntegrationCard
+              definition={activeDef}
+              status={activeStatus ?? undefined}
+              onChanged={() => {
+                if (typeof window !== "undefined") {
+                  window.dispatchEvent(new CustomEvent("jarela:credentials-changed"));
+                }
+                onSaved?.(activeDef.name);
+                void reload();
+              }}
+            />
+          </div>
         )}
         {step === "form" && !activeDef && (
           <p className="text-fg-faint text-sm text-center py-8">Loading…</p>
@@ -196,122 +204,3 @@ export function AddCredentialDialog({ initialCategory, directProviderName, lockC
     </div>
   );
 }
-
-interface ProviderFormProps {
-  def: IntegrationDefinition;
-  status: IntegrationStatus | null;
-  onSaved: () => void;
-  onCancel: () => void;
-  onOpenInIntegrations?: () => void;
-}
-
-function ProviderForm({ def, status, onSaved, onCancel, onOpenInIntegrations }: ProviderFormProps) {
-  const [values, setValues] = useState<Record<string, string>>(() => ({ ...(status?.values ?? {}) }));
-  const [saving, setSaving] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  async function save() {
-    setError(null);
-    setSaving(true);
-    try {
-      await api.integrations.save(def.name, values);
-      // Notify both panels that the credentials surface changed so they
-      // refresh without a full reload.
-      if (typeof window !== "undefined") {
-        window.dispatchEvent(new CustomEvent("jarela:credentials-changed"));
-      }
-      onSaved();
-    } catch (e) {
-      setError(e instanceof Error ? e.message : String(e));
-      pushErrorToast({
-        title: `Couldn't save ${def.label}`,
-        error: e,
-        context: { panel: "credentials", action: "integration.save", integration: def.name },
-      });
-    } finally {
-      setSaving(false);
-    }
-  }
-
-  // OAuth providers benefit from the IntegrationsPanel's "Connect" flow.
-  // Surface a hint and a shortcut rather than forcing the user to paste
-  // refresh tokens by hand.
-  const isOauth = def.fields.some((f) => f.key === "client_id" || f.key === "refresh_token");
-
-  return (
-    <div className="p-4 space-y-3 max-h-[70vh] overflow-y-auto">
-      <p className="text-[11px] text-fg-muted leading-snug">{def.description}</p>
-
-      {isOauth && onOpenInIntegrations && (
-        <div className="px-3 py-2 rounded border border-sky-700/40 bg-sky-900/15 text-[11px] text-sky-700 dark:text-sky-300 flex items-start gap-2">
-          <span className="flex-1">
-            This provider supports one-click OAuth. Built-in integrations has the “Connect” button that walks you through it.
-          </span>
-          <button
-            type="button"
-            onClick={onOpenInIntegrations}
-            className="text-[11px] underline hover:text-sky-600 dark:hover:text-sky-200 shrink-0"
-          >
-            Open
-          </button>
-        </div>
-      )}
-
-      {def.fields.map((f) => (
-        <label key={f.key} className="block text-xs text-fg-subtle">
-          <span className="flex items-center gap-1.5">
-            {f.label}
-            {f.required && <span className="text-rose-700 dark:text-rose-400 ml-0.5">*</span>}
-          </span>
-          <input
-            type={f.secret ? "password" : "text"}
-            value={values[f.key] ?? ""}
-            onChange={(e) => setValues((p) => ({ ...p, [f.key]: e.target.value }))}
-            onFocus={(e) => {
-              // Clicking a masked secret field clears it so the user can type a fresh
-              // value without manually selecting and replacing the dots.
-              if (f.secret && e.target.value === SECRET_MASK) {
-                setValues((p) => ({ ...p, [f.key]: "" }));
-              }
-            }}
-            placeholder={f.placeholder}
-            className="mt-1 w-full px-2 py-1.5 text-sm rounded border border-border bg-surface-3 text-fg font-mono"
-          />
-        </label>
-      ))}
-
-      {error && (
-        <div className="px-2 py-1.5 rounded bg-rose-950/40 border border-rose-800 text-xs text-rose-700 dark:text-rose-300">
-          {error}
-        </div>
-      )}
-
-      <div className="flex items-center gap-2 pt-1">
-        <button
-          onClick={save}
-          disabled={saving}
-          className="px-3 py-1.5 text-xs rounded bg-accent text-white hover:bg-accent-hover disabled:opacity-50 inline-flex items-center gap-1.5"
-        >
-          {saving && <Loader2 size={11} className="animate-spin" />}
-          {saving ? "Saving…" : status?.configured ? "Update" : "Save"}
-        </button>
-        <button
-          onClick={onCancel}
-          className="px-3 py-1.5 text-xs rounded border border-border text-fg-muted hover:bg-surface-3"
-        >
-          Cancel
-        </button>
-        {onOpenInIntegrations && (
-          <button
-            type="button"
-            onClick={onOpenInIntegrations}
-            className="ml-auto inline-flex items-center gap-1 text-[11px] text-accent hover:text-accent/80"
-            title="Open in Built-in integrations — full editor with Test/OAuth"
-          >
-            Advanced <ExternalLink size={10} />
-          </button>
-        )}
-      </div>
-    </div>
-  );
-}

package/components/credentials/CredentialsPanel.tsx

@@ -1,29 +1,32 @@
 "use client";
-import { Key, Pencil, Plus, Trash2 } from "lucide-react";
+import { Filter, Key, Pencil, Plus, Trash2 } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { api } from "@/api/client";
-import type { Credential, IntegrationDefinition } from "@/api/types";
+import type { Credential, IntegrationDefinition, IntegrationStatus, UserProfile } from "@/api/types";
 import { useAppContext } from "@/contexts/AppContext";
 import { useDeepLinkScroll } from "@/hooks/useDeepLinkScroll";
-import { IntegrationsPanel } from "@/components/integrations/IntegrationsPanel";
+import { NetworkPanel } from "@/components/integrations/NetworkPanel";
+import { PRESET_CATEGORIES } from "@/lib/integrations/categories";
 import { AddCredentialDialog } from "./AddCredentialDialog";
+import { IntegrationCard } from "./IntegrationCard";
 
 // "Credentials" is the single home for every auth surface. The default
-// sub-tab is the lightweight, category-grouped list of saved credentials
-// ("API keys & secrets"); the second sub-tab hosts the rich
-// IntegrationsPanel with one-click OAuth, Test buttons, env-sync, and
-// the network section.
+// sub-tab is the unified list: model API keys, integration keys, and
+// OAuth (Gmail/Outlook/etc.) all live here, grouped by category, with
+// each known integration rendered as an inline editor (save / test /
+// Connect). The sibling "Network & environment" sub-tab hosts the
+// non-auth bits — HTTP proxy, allowed sites, env-var aliases, and the
+// env-sync button.
 //
-// MCP servers (a capability, not an auth) moved out to Tools; built-in
-// integrations (which used to live under their own "Connections" tab)
-// moved in here. Result: one mental model — *Credentials* answers
-// "what accounts has this agent been given access to".
+// MCP servers (a capability, not an auth) live under Tools. Result: one
+// mental model — *Credentials* answers "what accounts has this agent
+// been given access to".
 
-type Sub = "list" | "integrations";
+type Sub = "list" | "network";
 
 const SUB_TITLES: Record<Sub, string> = {
-  list: "API keys & secrets",
-  integrations: "Built-in integrations",
+  list: "Credentials",
+  network: "Network & environment",
 };
 
 type Category = NonNullable<IntegrationDefinition["category"]>;
@@ -48,6 +51,13 @@ const CATEGORY_LABELS: Record<Category, string> = {
   other: "Other",
 };
 
+const PRESET_LABELS: Record<NonNullable<UserProfile["preset"]>, string> = {
+  home: "Home",
+  work: "Work",
+  dev: "Developer",
+  custom: "Everything",
+};
+
 function describeCredential(c: Credential): string {
   const keys = Object.keys(c.params).filter((k) => k !== "base_url" && k !== "extra_headers");
   if (keys.length === 0) return "Not configured";
@@ -60,7 +70,11 @@ function describeCredential(c: Credential): string {
 export function CredentialsPanel() {
   const { state, dispatch } = useAppContext();
   const raw = state.selectedItem.credentials;
-  const active: Sub = raw === "integrations" ? "integrations" : "list";
+  // Backward compatibility: the second sub-tab used to be keyed
+  // "integrations" (when it was called "Built-in integrations"). Honour
+  // older deep links and saved selections by routing them to the new
+  // "network" key.
+  const active: Sub = raw === "network" || raw === "integrations" ? "network" : "list";
 
   const setSub = (s: Sub) =>
     dispatch({ type: "SET_SELECTION", tab: "credentials", itemId: s });
@@ -72,7 +86,7 @@ export function CredentialsPanel() {
         aria-label="Credentials sub-section"
         className="flex gap-1 border-b border-[var(--border)] bg-[var(--bg-secondary)] px-3 pt-2"
       >
-        {(["list", "integrations"] as Sub[]).map((s) => {
+        {(["list", "network"] as Sub[]).map((s) => {
           const selected = s === active;
           return (
             <button
@@ -94,32 +108,39 @@ export function CredentialsPanel() {
         })}
       </div>
       <div className="flex-1 min-h-0 overflow-auto">
-        {active === "list" ? <CredentialsListPanel /> : <IntegrationsPanel />}
+        {active === "list" ? <CredentialsListPanel /> : <NetworkPanel />}
       </div>
     </div>
   );
 }
 
-function CredentialsListPanel() {
+export function CredentialsListPanel() {
   const { dispatch } = useAppContext();
   const [credentials, setCredentials] = useState<Credential[]>([]);
   const [defs, setDefs] = useState<IntegrationDefinition[]>([]);
+  const [statuses, setStatuses] = useState<Record<string, IntegrationStatus>>({});
+  const [preset, setPreset] = useState<UserProfile["preset"]>(null);
   const [loading, setLoading] = useState(true);
   const [addOpen, setAddOpen] = useState(false);
   const [editingProvider, setEditingProvider] = useState<string | null>(null);
+  const [expandedProvider, setExpandedProvider] = useState<string | null>(null);
   const [deleteError, setDeleteError] = useState<string | null>(null);
   const containerRef = useRef<HTMLDivElement>(null);
   useDeepLinkScroll("credentials", "credential", containerRef);
+  useDeepLinkScroll("credentials", "integration", containerRef);
 
   const refresh = useCallback(async () => {
     setLoading(true);
     try {
-      const [rows, ints] = await Promise.all([
+      const [rows, ints, profile] = await Promise.all([
         api.credentials.list(),
-        api.integrations.list().catch(() => ({ definitions: [] as IntegrationDefinition[], statuses: [] })),
+        api.integrations.list().catch(() => ({ definitions: [] as IntegrationDefinition[], statuses: [] as IntegrationStatus[] })),
+        api.profile.get().catch(() => null),
       ]);
       setCredentials(rows);
       setDefs(ints.definitions);
+      setStatuses(Object.fromEntries(ints.statuses.map((s) => [s.name, s])));
+      setPreset(profile?.preset ?? null);
     } finally {
       setLoading(false);
     }
@@ -154,35 +175,74 @@ function CredentialsListPanel() {
     }
   }
 
-  // OAuth providers + advanced editors live on the Built-in integrations
-  // sub-tab. The "open" affordance just flips the sub-tab; per-row scroll
-  // would require routing two ids and the integrations list is short.
-  function openIntegrationsSubTab() {
-    dispatch({ type: "SET_SELECTION", tab: "credentials", itemId: "integrations" });
-  }
+  // Persona filter: if the user has chosen a preset, hide unconfigured
+  // integrations outside that bucket. Configured-but-out-of-bucket
+  // entries stay visible so a saved credential never silently vanishes.
+  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;
+      return statuses[def.name]?.configured === true;
+    });
+  }, [defs, preset, statuses]);
 
+  const hiddenCount = defs.length - visibleDefs.length;
+
+  // Group: every visible definition belongs in its category bucket
+  // (renders as IntegrationCard); credentials WITHOUT a matching
+  // definition (legacy model rows etc.) also fall into the right
+  // bucket so the user sees a single grouped list.
   const grouped = useMemo(() => {
-    const byCat = new Map<Category, Credential[]>();
+    type Row =
+      | { kind: "def"; def: IntegrationDefinition }
+      | { kind: "credential"; credential: Credential };
+    const byCat = new Map<Category, Row[]>();
+    const defNames = new Set(visibleDefs.map((d) => d.name));
+
+    for (const def of visibleDefs) {
+      const cat = (def.category ?? "other") as Category;
+      const arr = byCat.get(cat) ?? [];
+      arr.push({ kind: "def", def });
+      byCat.set(cat, arr);
+    }
     for (const c of credentials) {
+      if (defNames.has(c.provider)) continue; // covered by the integration card
       const cat = (defByName.get(c.provider)?.category ?? "other") as Category;
       const arr = byCat.get(cat) ?? [];
-      arr.push(c);
+      arr.push({ kind: "credential", credential: c });
       byCat.set(cat, arr);
     }
     return CATEGORY_ORDER
       .filter((c) => byCat.has(c))
       .map((c) => [c, byCat.get(c)!] as const);
-  }, [credentials, defByName]);
+  }, [visibleDefs, credentials, defByName]);
 
   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">Credentials</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={() => setAddOpen(true)}
           className="flex items-center gap-1 text-xs text-accent hover:text-accent-hover transition-colors"
-          title="Pick a provider and connect it. Same row also shows in Built-in integrations."
+          title="Pick a provider and connect it. Same editors are available inline below."
         >
           <Plus size={14} /> Add credential
         </button>
@@ -190,8 +250,10 @@ function CredentialsListPanel() {
 
       <div ref={containerRef} className="flex-1 overflow-y-auto">
         <div className="px-4 py-2 space-y-4">
-          {loading && credentials.length === 0 && <p className="text-fg-faint text-sm py-6 text-center">Loading…</p>}
-          {!loading && credentials.length === 0 && (
+          {loading && credentials.length === 0 && defs.length === 0 && (
+            <p className="text-fg-faint text-sm py-6 text-center">Loading…</p>
+          )}
+          {!loading && grouped.length === 0 && (
             <p className="text-fg-faint text-sm py-6 text-center">
               No credentials yet. Click <span className="font-medium">+ Add credential</span> to connect a model provider (OpenAI, Anthropic, Gemini…) or an integration (Gmail, GitHub, Atlassian…).
             </p>
@@ -202,30 +264,67 @@ function CredentialsListPanel() {
           {grouped.map(([cat, rows]) => (
             <section key={cat}>
               <h3 className="text-[11px] uppercase tracking-wide text-fg-faint mb-1 px-1">{CATEGORY_LABELS[cat]}</h3>
-              <div className="divide-y divide-border/60 border border-border/60 rounded-xl overflow-hidden bg-surface-2/40">
-                {rows.map((c) => {
-                  const def = defByName.get(c.provider);
-                  const label = def?.label ?? c.provider;
+              <div className="space-y-2">
+                {rows.map((row) => {
+                  if (row.kind === "def") {
+                    const def = row.def;
+                    const status = statuses[def.name];
+                    const isOpen = expandedProvider === def.name || !!status?.configured;
+                    if (!isOpen) {
+                      // Collapse unconfigured integrations into a compact row.
+                      return (
+                        <div
+                          key={def.name}
+                          data-deep-link-id={def.name}
+                          className="flex items-center gap-3 px-3 py-2.5 rounded-lg border border-border/60 bg-surface-2/40"
+                        >
+                          <div className="w-1.5 h-1.5 rounded-full bg-fg-faint" />
+                          <div className="flex-1 min-w-0">
+                            <div className="flex items-center gap-2 mb-0.5">
+                              <span className="text-sm font-medium text-fg truncate">{def.label}</span>
+                              <span className="text-[10px] px-1.5 py-0.5 rounded border bg-surface-3 text-fg-muted border-border font-mono">{def.name}</span>
+                            </div>
+                            <p className="text-[11px] text-fg-subtle truncate">{def.description}</p>
+                          </div>
+                          <button
+                            onClick={() => setExpandedProvider(def.name)}
+                            className="text-[11px] text-accent hover:text-accent-hover shrink-0"
+                            title="Open editor"
+                          >
+                            Connect
+                          </button>
+                        </div>
+                      );
+                    }
+                    return (
+                      <IntegrationCard
+                        key={def.name}
+                        definition={def}
+                        status={status}
+                        onChanged={refresh}
+                      />
+                    );
+                  }
+                  // Legacy credential row (no matching integration definition).
+                  const c = row.credential;
                   return (
-                    <div key={c.id} data-deep-link-id={c.id} className="flex items-center gap-3 px-3 py-2.5 group">
+                    <div key={c.id} data-deep-link-id={c.id} className="flex items-center gap-3 px-3 py-2.5 rounded-lg border border-border/60 bg-surface-2/40 group">
                       <div className="flex-1 min-w-0">
                         <div className="flex items-center gap-2 mb-0.5">
-                          <span className="text-sm font-medium text-fg truncate">{label}</span>
+                          <span className="text-sm font-medium text-fg truncate">{c.provider}</span>
                           <span className="text-[10px] px-1.5 py-0.5 rounded border bg-surface-3 text-fg-muted border-border font-mono">{c.provider}</span>
                           <span className="text-[10px] text-fg-faint">{c.auth_method}</span>
                         </div>
                         <p className="text-[11px] text-fg-subtle">{describeCredential(c)}</p>
                       </div>
                       <div className="flex gap-1 opacity-40 group-hover:opacity-100 pointer-coarse:opacity-100 transition-opacity shrink-0">
-                        {def && (
-                          <button
-                            onClick={() => setEditingProvider(c.provider)}
-                            className="p-1 text-fg-subtle hover:text-fg transition-colors"
-                            title="Edit credential"
-                          >
-                            <Pencil size={13} />
-                          </button>
-                        )}
+                        <button
+                          onClick={() => setEditingProvider(c.provider)}
+                          className="p-1 text-fg-subtle hover:text-fg transition-colors"
+                          title="Edit credential"
+                        >
+                          <Pencil size={13} />
+                        </button>
                         <button
                           onClick={() => handleDelete(c)}
                           className="p-1 text-fg-subtle hover:text-red-700 dark:hover:text-red-400 transition-colors"
@@ -247,7 +346,6 @@ function CredentialsListPanel() {
         <AddCredentialDialog
           onClose={() => { setAddOpen(false); refresh(); }}
           onSaved={() => refresh()}
-          onOpenInIntegrations={() => { setAddOpen(false); openIntegrationsSubTab(); }}
         />
       )}
       {editingProvider && (
@@ -255,7 +353,6 @@ function CredentialsListPanel() {
           directProviderName={editingProvider}
           onClose={() => { setEditingProvider(null); refresh(); }}
           onSaved={() => refresh()}
-          onOpenInIntegrations={() => { setEditingProvider(null); openIntegrationsSubTab(); }}
         />
       )}
     </div>