@agent-native/core 0.113.0 → 0.114.1

package/src/client/settings/SecretsSection.tsx

@@ -0,0 +1,875 @@
+/**
+ * <SecretsSection /> — renders the registered secrets from the framework
+ * secrets registry. Configured keys stay compact; adding or editing one
+ * progressively discloses its controls.
+ */
+
+import {
+  IconCheck,
+  IconChevronRight,
+  IconExternalLink,
+  IconLoader2,
+  IconPlugConnected,
+  IconPlus,
+  IconTrash,
+  IconRefresh,
+} from "@tabler/icons-react";
+import React, { useEffect, useMemo, useState, useCallback } from "react";
+
+import { agentNativePath } from "../api-path.js";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "../components/ui/dropdown-menu.js";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "../components/ui/tooltip.js";
+
+interface SecretStatus {
+  key: string;
+  label: string;
+  description?: string;
+  docsUrl?: string;
+  scope: "user" | "workspace";
+  kind: "api-key" | "oauth";
+  required: boolean;
+  status: "set" | "unset" | "invalid";
+  last4?: string;
+  updatedAt?: number;
+  oauthProvider?: string;
+  oauthConnectUrl?: string;
+  error?: string;
+}
+
+const ENDPOINT = agentNativePath("/_agent-native/secrets");
+
+function notifySecretsChanged() {
+  if (typeof window === "undefined") return;
+  window.dispatchEvent(
+    new CustomEvent("agent-engine:configured-changed", {
+      detail: { source: "secrets" },
+    }),
+  );
+}
+
+export interface SecretsSectionProps {
+  /** Optional hash fragment to focus a specific secret (e.g. "secrets:OPENAI_API_KEY"). */
+  focusKey?: string;
+}
+
+export function SecretsSection({ focusKey }: SecretsSectionProps) {
+  const [secrets, setSecrets] = useState<SecretStatus[] | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [reloadToken, setReloadToken] = useState(0);
+  const [openSecretKey, setOpenSecretKey] = useState<string | null>(
+    focusKey ?? null,
+  );
+  const [customKeyOpen, setCustomKeyOpen] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    fetch(ENDPOINT)
+      .then(async (r) => {
+        if (!r.ok) {
+          throw new Error(`Failed to load secrets (${r.status})`);
+        }
+        return (await r.json()) as SecretStatus[];
+      })
+      .then((data) => {
+        if (!cancelled) setSecrets(data);
+      })
+      .catch((err) => {
+        if (!cancelled) setError(err?.message ?? "Failed to load");
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [reloadToken]);
+
+  const reload = useCallback(() => setReloadToken((t) => t + 1), []);
+
+  useEffect(() => {
+    if (focusKey) {
+      setCustomKeyOpen(false);
+      setOpenSecretKey(focusKey);
+    }
+  }, [focusKey]);
+
+  if (error) {
+    return (
+      <p className="text-[10px] text-red-500">
+        Failed to load secrets: {error}
+      </p>
+    );
+  }
+  if (secrets === null) {
+    return (
+      <div className="flex items-center gap-1.5 text-[10px] text-muted-foreground">
+        <IconLoader2 size={10} className="animate-spin" />
+        Loading…
+      </div>
+    );
+  }
+  if (secrets.length === 0) {
+    return (
+      <div className="space-y-3">
+        <KeysHeader onCustomKey={() => setCustomKeyOpen(true)} />
+        <AdHocKeysSection
+          showForm={customKeyOpen}
+          onShowFormChange={setCustomKeyOpen}
+          showEmptyState
+        />
+      </div>
+    );
+  }
+
+  const visibleSecrets = secrets.filter(
+    (secret) => secret.status !== "unset" || secret.key === openSecretKey,
+  );
+  const availableSecrets = secrets.filter(
+    (secret) => secret.status === "unset" && secret.key !== openSecretKey,
+  );
+
+  return (
+    <div className="space-y-3">
+      <KeysHeader
+        availableSecrets={availableSecrets}
+        onSecret={(key) => {
+          setCustomKeyOpen(false);
+          setOpenSecretKey(key);
+        }}
+        onCustomKey={() => {
+          setOpenSecretKey(null);
+          setCustomKeyOpen(true);
+        }}
+      />
+      {visibleSecrets.length > 0 && (
+        <div className="overflow-hidden rounded-md border border-border">
+          {visibleSecrets.map((secret) => (
+            <SecretCard
+              key={secret.key}
+              secret={secret}
+              onChanged={reload}
+              open={openSecretKey === secret.key}
+              onOpenChange={(open) => {
+                if (open) setCustomKeyOpen(false);
+                setOpenSecretKey(open ? secret.key : null);
+              }}
+              focusInput={openSecretKey === secret.key}
+            />
+          ))}
+        </div>
+      )}
+      <AdHocKeysSection
+        showForm={customKeyOpen}
+        onShowFormChange={setCustomKeyOpen}
+        showEmptyState={visibleSecrets.length === 0}
+      />
+    </div>
+  );
+}
+
+function KeysHeader({
+  availableSecrets = [],
+  onSecret,
+  onCustomKey,
+}: {
+  availableSecrets?: SecretStatus[];
+  onSecret?: (key: string) => void;
+  onCustomKey: () => void;
+}) {
+  return (
+    <div className="flex items-center justify-between gap-3">
+      <p className="text-[11px] font-medium text-foreground">Keys</p>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <button
+            type="button"
+            className="inline-flex items-center gap-1 rounded-md border border-border px-2 py-1 text-[10px] font-medium text-muted-foreground transition-colors hover:bg-accent/40 hover:text-foreground"
+          >
+            <IconPlus size={11} />
+            New
+          </button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-60">
+          {availableSecrets.length > 0 && (
+            <>
+              <DropdownMenuLabel>Choose a key</DropdownMenuLabel>
+              {availableSecrets.map((secret) => (
+                <DropdownMenuItem
+                  key={secret.key}
+                  onSelect={() => onSecret?.(secret.key)}
+                  className="flex items-center justify-between gap-3"
+                >
+                  <span className="truncate">{secret.label}</span>
+                  {secret.required && (
+                    <span className="text-[9px] font-semibold uppercase tracking-wide text-amber-600 dark:text-amber-400">
+                      Required
+                    </span>
+                  )}
+                </DropdownMenuItem>
+              ))}
+              <DropdownMenuSeparator />
+            </>
+          )}
+          <DropdownMenuItem onSelect={onCustomKey}>
+            <IconPlus size={14} />
+            Custom
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}
+
+interface SecretCardProps {
+  secret: SecretStatus;
+  onChanged: () => void;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  focusInput?: boolean;
+}
+
+function SecretCard({
+  secret,
+  onChanged,
+  open,
+  onOpenChange,
+  focusInput,
+}: SecretCardProps) {
+  const [value, setValue] = useState("");
+  const [busy, setBusy] = useState<null | "save" | "delete" | "test">(null);
+  const [confirmDelete, setConfirmDelete] = useState(false);
+  const [toast, setToast] = useState<{
+    kind: "ok" | "err";
+    text: string;
+  } | null>(null);
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (open && focusInput && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [focusInput, open]);
+
+  const setToastAndClear = (kind: "ok" | "err", text: string, ms = 2500) => {
+    setToast({ kind, text });
+    setTimeout(() => setToast(null), ms);
+  };
+
+  const handleSave = async () => {
+    if (!value.trim() || busy) return;
+    setBusy("save");
+    try {
+      const res = await fetch(`${ENDPOINT}/${encodeURIComponent(secret.key)}`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ value: value.trim() }),
+      });
+      if (!res.ok) {
+        const err = await res
+          .json()
+          .then((j: { error?: string }) => j.error)
+          .catch(() => null);
+        setToastAndClear("err", err ?? `Save failed (${res.status})`);
+        return;
+      }
+      setValue("");
+      setConfirmDelete(false);
+      setToastAndClear("ok", "Saved");
+      notifySecretsChanged();
+      onChanged();
+    } finally {
+      setBusy(null);
+    }
+  };
+
+  const handleDelete = async () => {
+    if (busy) return;
+    setBusy("delete");
+    try {
+      const res = await fetch(`${ENDPOINT}/${encodeURIComponent(secret.key)}`, {
+        method: "DELETE",
+        headers: { "Content-Type": "application/json" },
+      });
+      if (!res.ok) {
+        const err = await res
+          .json()
+          .then((j: { error?: string }) => j.error)
+          .catch(() => null);
+        setToastAndClear("err", err ?? `Delete failed (${res.status})`);
+        return;
+      }
+      setToastAndClear("ok", "Removed");
+      setConfirmDelete(false);
+      notifySecretsChanged();
+      onChanged();
+    } finally {
+      setBusy(null);
+    }
+  };
+
+  const handleTest = async () => {
+    if (busy) return;
+    setBusy("test");
+    try {
+      const res = await fetch(
+        `${ENDPOINT}/${encodeURIComponent(secret.key)}/test`,
+        {
+          method: "POST",
+        },
+      );
+      const body = (await res.json().catch(() => ({}))) as {
+        ok?: boolean;
+        error?: string;
+      };
+      if (res.ok && body.ok) {
+        setToastAndClear("ok", "Working");
+      } else {
+        setToastAndClear(
+          "err",
+          body.error ?? (body.ok === false ? "Invalid" : `Test failed`),
+        );
+      }
+    } finally {
+      setBusy(null);
+    }
+  };
+
+  const pill = useMemo(() => {
+    if (secret.status === "set") {
+      return (
+        <span className="flex items-center gap-1 text-[10px] text-green-500">
+          <IconCheck size={10} />
+          Set
+        </span>
+      );
+    }
+    if (secret.required) {
+      return (
+        <span className="rounded-full bg-red-500/15 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide text-red-500">
+          Required
+        </span>
+      );
+    }
+    return (
+      <span className="rounded-full bg-accent/60 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide text-muted-foreground">
+        Optional
+      </span>
+    );
+  }, [secret.status, secret.required]);
+
+  const isOAuth = secret.kind === "oauth";
+
+  return (
+    <div className="border-b border-border last:border-b-0">
+      <button
+        type="button"
+        aria-expanded={open}
+        onClick={() => onOpenChange(!open)}
+        className="flex w-full items-center gap-2 px-2.5 py-2 text-start transition-colors hover:bg-accent/30"
+      >
+        <IconChevronRight
+          size={13}
+          className={`shrink-0 text-muted-foreground transition-transform ${open ? "rotate-90" : ""}`}
+        />
+        <span className="min-w-0 flex-1 truncate text-[11px] font-medium text-foreground">
+          {secret.label}
+        </span>
+        {secret.status === "set" && secret.last4 && (
+          <code className="text-[10px] text-muted-foreground">
+            ••••{secret.last4}
+          </code>
+        )}
+        <span className="shrink-0">{pill}</span>
+      </button>
+
+      {open && (
+        <div className="border-t border-border/60 bg-accent/20 px-3 pb-3 pt-2.5">
+          {secret.description && (
+            <p className="mb-2 text-[10px] leading-relaxed text-muted-foreground">
+              {secret.description}
+            </p>
+          )}
+          {isOAuth ? (
+            <div className="mt-2 flex items-center gap-1.5">
+              {secret.oauthConnectUrl && (
+                <a
+                  href={secret.oauthConnectUrl}
+                  className="inline-flex items-center gap-1 rounded px-2 py-1 text-[10px] font-medium no-underline"
+                  style={{ backgroundColor: "#00B5FF", color: "white" }}
+                >
+                  <IconPlugConnected size={10} />
+                  {secret.status === "set" ? "Reconnect" : "Connect"}
+                </a>
+              )}
+              {secret.docsUrl && (
+                <a
+                  href={secret.docsUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="inline-flex items-center gap-1 rounded border border-border px-2 py-1 text-[10px] no-underline text-muted-foreground hover:text-foreground"
+                >
+                  Docs
+                  <IconExternalLink size={10} />
+                </a>
+              )}
+            </div>
+          ) : (
+            <div className="mt-2 space-y-1.5">
+              {secret.status === "set" && (
+                <div className="flex items-center gap-2 text-[10px] text-muted-foreground">
+                  <span>Stored value ending in</span>
+                  <code className="rounded bg-background px-1 py-0.5 text-foreground">
+                    {secret.last4}
+                  </code>
+                </div>
+              )}
+              <div className="flex gap-1.5">
+                <input
+                  ref={inputRef}
+                  type="password"
+                  aria-label={secret.label}
+                  value={value}
+                  onChange={(e) => setValue(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") handleSave();
+                  }}
+                  placeholder={
+                    secret.status === "set"
+                      ? "Enter new value to rotate"
+                      : "Paste key"
+                  }
+                  className="flex-1 rounded border border-border bg-background px-2 py-1 text-[11px] text-foreground outline-none placeholder:text-muted-foreground/50 focus:ring-1 focus:ring-accent"
+                />
+                <button
+                  type="button"
+                  onClick={handleSave}
+                  disabled={!value.trim() || busy !== null}
+                  className="inline-flex items-center gap-1 rounded px-2 py-1 text-[10px] font-medium disabled:opacity-40"
+                  style={{ backgroundColor: "#00B5FF", color: "white" }}
+                >
+                  {busy === "save" ? (
+                    <IconLoader2 size={10} className="animate-spin" />
+                  ) : secret.status === "set" ? (
+                    <>
+                      <IconRefresh size={10} />
+                      Rotate
+                    </>
+                  ) : (
+                    "Save"
+                  )}
+                </button>
+              </div>
+              <div className="flex items-center gap-1.5">
+                {secret.status === "set" && (
+                  <>
+                    <button
+                      type="button"
+                      onClick={handleTest}
+                      disabled={busy !== null}
+                      className="inline-flex items-center gap-1 rounded border border-border px-2 py-1 text-[10px] text-muted-foreground hover:text-foreground disabled:opacity-40"
+                    >
+                      {busy === "test" ? (
+                        <IconLoader2 size={10} className="animate-spin" />
+                      ) : (
+                        "Test"
+                      )}
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => setConfirmDelete(true)}
+                      disabled={busy !== null}
+                      className="inline-flex items-center gap-1 rounded border border-border px-2 py-1 text-[10px] text-muted-foreground hover:text-red-500 disabled:opacity-40"
+                    >
+                      <IconTrash size={10} />
+                      Remove
+                    </button>
+                  </>
+                )}
+                {secret.docsUrl && (
+                  <a
+                    href={secret.docsUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="inline-flex items-center gap-1 rounded border border-border px-2 py-1 text-[10px] no-underline text-muted-foreground hover:text-foreground ms-auto"
+                  >
+                    Get key
+                    <IconExternalLink size={10} />
+                  </a>
+                )}
+              </div>
+              {confirmDelete && (
+                <div className="flex items-center gap-1.5 rounded border border-red-500/30 bg-red-500/10 px-2 py-1.5 text-[10px] text-red-500">
+                  <span className="min-w-0 flex-1">
+                    Remove this saved value?
+                  </span>
+                  <button
+                    type="button"
+                    onClick={handleDelete}
+                    disabled={busy !== null}
+                    className="inline-flex items-center gap-1 rounded border border-red-500/40 px-1.5 py-0.5 font-medium disabled:opacity-40"
+                  >
+                    {busy === "delete" ? (
+                      <IconLoader2 size={10} className="animate-spin" />
+                    ) : (
+                      "Confirm"
+                    )}
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => setConfirmDelete(false)}
+                    disabled={busy !== null}
+                    className="rounded border border-border px-1.5 py-0.5 text-muted-foreground hover:text-foreground disabled:opacity-40"
+                  >
+                    Cancel
+                  </button>
+                </div>
+              )}
+            </div>
+          )}
+
+          {toast && (
+            <p
+              className={`mt-1.5 text-[10px] ${
+                toast.kind === "ok" ? "text-green-500" : "text-red-500"
+              }`}
+            >
+              {toast.text}
+            </p>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── Ad-hoc Keys Section ──────────────────────────────────────────────────
+
+interface AdHocKey {
+  name: string;
+  scope: "user" | "workspace";
+  scopeId: string;
+  description: string | null;
+  last4: string;
+  createdAt: number;
+  updatedAt: number;
+}
+
+const ADHOC_ENDPOINT = agentNativePath("/_agent-native/secrets/adhoc");
+
+function AdHocKeysSection({
+  showForm,
+  onShowFormChange,
+  showEmptyState,
+}: {
+  showForm: boolean;
+  onShowFormChange: (show: boolean) => void;
+  showEmptyState: boolean;
+}) {
+  const [keys, setKeys] = useState<AdHocKey[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [reloadToken, setReloadToken] = useState(0);
+  const [formName, setFormName] = useState("");
+  const [formValue, setFormValue] = useState("");
+  const [formDescription, setFormDescription] = useState("");
+  const [formScope, setFormScope] = useState<"user" | "workspace">("user");
+  const [formBusy, setFormBusy] = useState(false);
+  const [formError, setFormError] = useState<string | null>(null);
+  const [confirmDeleteName, setConfirmDeleteName] = useState<string | null>(
+    null,
+  );
+  const [deletingName, setDeletingName] = useState<string | null>(null);
+  const [toast, setToast] = useState<{
+    kind: "ok" | "err";
+    text: string;
+  } | null>(null);
+
+  const showToast = useCallback(
+    (kind: "ok" | "err", text: string, ms = 2500) => {
+      setToast({ kind, text });
+      setTimeout(() => setToast(null), ms);
+    },
+    [],
+  );
+
+  const reload = useCallback(() => setReloadToken((t) => t + 1), []);
+
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    fetch(ADHOC_ENDPOINT)
+      .then(async (r) => {
+        if (!r.ok) throw new Error(`Failed to load (${r.status})`);
+        return (await r.json()) as AdHocKey[];
+      })
+      .then((data) => {
+        if (!cancelled) {
+          setKeys(data);
+          setLoading(false);
+        }
+      })
+      .catch(() => {
+        if (!cancelled) {
+          setKeys([]);
+          setLoading(false);
+        }
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [reloadToken]);
+
+  const resetForm = useCallback(() => {
+    onShowFormChange(false);
+    setFormName("");
+    setFormValue("");
+    setFormDescription("");
+    setFormScope("user");
+    setFormError(null);
+  }, [onShowFormChange]);
+
+  const handleAdd = useCallback(async () => {
+    const name = formName.trim();
+    const value = formValue.trim();
+    if (!name || !value || formBusy) return;
+    setFormBusy(true);
+    setFormError(null);
+    try {
+      const res = await fetch(ADHOC_ENDPOINT, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          name,
+          value,
+          description: formDescription.trim() || undefined,
+          scope: formScope,
+        }),
+      });
+      if (!res.ok) {
+        const body = await res
+          .json()
+          .then((j: { error?: string }) => j.error)
+          .catch(() => null);
+        setFormError(body ?? `Save failed (${res.status})`);
+        return;
+      }
+      resetForm();
+      showToast("ok", "Key saved");
+      notifySecretsChanged();
+      reload();
+    } catch (err: any) {
+      setFormError(err?.message ?? "Failed to save");
+    } finally {
+      setFormBusy(false);
+    }
+  }, [
+    formName,
+    formValue,
+    formDescription,
+    formScope,
+    formBusy,
+    resetForm,
+    showToast,
+    reload,
+  ]);
+
+  const handleDelete = useCallback(
+    async (name: string) => {
+      setDeletingName(name);
+      try {
+        const res = await fetch(
+          `${ADHOC_ENDPOINT}/${encodeURIComponent(name)}`,
+          {
+            method: "DELETE",
+            headers: { "Content-Type": "application/json" },
+          },
+        );
+        if (!res.ok) {
+          showToast("err", "Failed to delete key");
+          return;
+        }
+        showToast("ok", "Key deleted");
+        setConfirmDeleteName(null);
+        notifySecretsChanged();
+        reload();
+      } finally {
+        setDeletingName(null);
+      }
+    },
+    [showToast, reload],
+  );
+
+  return (
+    <div className="space-y-2">
+      {showForm && (
+        <div className="rounded-md border border-border px-2.5 py-2 bg-accent/30 space-y-1.5">
+          <input
+            value={formName}
+            onChange={(e) =>
+              setFormName(
+                e.target.value.toUpperCase().replace(/[^A-Z0-9_-]/g, ""),
+              )
+            }
+            className="w-full rounded border border-border bg-background px-2 py-1 text-[11px] text-foreground outline-none placeholder:text-muted-foreground/50 focus:ring-1 focus:ring-accent"
+            aria-label="Key name"
+            placeholder="KEY_NAME"
+          />
+          <input
+            type="password"
+            aria-label="Secret value"
+            value={formValue}
+            onChange={(e) => setFormValue(e.target.value)}
+            className="w-full rounded border border-border bg-background px-2 py-1 text-[11px] text-foreground outline-none placeholder:text-muted-foreground/50 focus:ring-1 focus:ring-accent"
+            placeholder="Secret value"
+          />
+          <input
+            value={formDescription}
+            aria-label="Description"
+            onChange={(e) => setFormDescription(e.target.value)}
+            className="w-full rounded border border-border bg-background px-2 py-1 text-[11px] text-foreground outline-none placeholder:text-muted-foreground/50 focus:ring-1 focus:ring-accent"
+            placeholder="Description (optional)"
+          />
+          <div className="flex items-center gap-2">
+            <select
+              aria-label="Scope"
+              value={formScope}
+              onChange={(e) =>
+                setFormScope(e.target.value as "user" | "workspace")
+              }
+              className="rounded border border-border bg-background px-2 py-1 text-[11px] text-foreground outline-none focus:ring-1 focus:ring-accent"
+            >
+              <option value="user">Personal</option>
+              <option value="workspace">Workspace</option>
+            </select>
+            <div className="ms-auto flex items-center gap-1.5">
+              <button
+                type="button"
+                onClick={resetForm}
+                className="rounded border border-border px-2 py-1 text-[10px] font-medium text-muted-foreground hover:text-foreground"
+              >
+                Cancel
+              </button>
+              <button
+                type="button"
+                onClick={handleAdd}
+                disabled={!formName.trim() || !formValue.trim() || formBusy}
+                className="inline-flex items-center gap-1 rounded px-2 py-1 text-[10px] font-medium disabled:opacity-40"
+                style={{ backgroundColor: "#00B5FF", color: "white" }}
+              >
+                {formBusy ? (
+                  <IconLoader2 size={10} className="animate-spin" />
+                ) : (
+                  "Save"
+                )}
+              </button>
+            </div>
+          </div>
+          {formError && <p className="text-[10px] text-red-500">{formError}</p>}
+        </div>
+      )}
+
+      {loading ? (
+        <div className="flex items-center gap-1.5 text-[10px] text-muted-foreground">
+          <IconLoader2 size={10} className="animate-spin" />
+          Loading...
+        </div>
+      ) : keys.length === 0 && !showForm && showEmptyState ? (
+        <p className="text-[10px] text-muted-foreground">No keys added yet.</p>
+      ) : keys.length > 0 ? (
+        <div className="overflow-hidden rounded-md border border-border">
+          {keys.map((key) => (
+            <div
+              key={`${key.scope}-${key.name}`}
+              className="border-b border-border px-2.5 py-2 last:border-b-0"
+            >
+              <div className="flex items-center justify-between gap-2">
+                <div className="min-w-0 flex-1">
+                  <div className="flex items-center gap-1.5">
+                    <span className="text-[11px] font-medium text-foreground font-mono truncate">
+                      {key.name}
+                    </span>
+                    <span
+                      className={`rounded-full px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide ${
+                        key.scope === "workspace"
+                          ? "bg-blue-500/15 text-blue-500"
+                          : "bg-accent/60 text-muted-foreground"
+                      }`}
+                    >
+                      {key.scope === "workspace" ? "workspace" : "personal"}
+                    </span>
+                  </div>
+                  {key.description && (
+                    <p className="text-[10px] text-muted-foreground mt-0.5">
+                      {key.description}
+                    </p>
+                  )}
+                  <div className="flex items-center gap-2 text-[10px] text-muted-foreground mt-0.5">
+                    <span>
+                      Ending in{" "}
+                      <code className="rounded bg-background px-1 py-0.5 text-foreground">
+                        {key.last4}
+                      </code>
+                    </span>
+                  </div>
+                </div>
+                <div className="shrink-0">
+                  {confirmDeleteName === key.name ? (
+                    <div className="flex items-center gap-1">
+                      <button
+                        type="button"
+                        onClick={() => handleDelete(key.name)}
+                        disabled={deletingName === key.name}
+                        className="rounded px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide bg-red-500/15 text-red-500 hover:bg-red-500/25 disabled:opacity-40"
+                      >
+                        {deletingName === key.name ? (
+                          <IconLoader2 size={10} className="animate-spin" />
+                        ) : (
+                          "Confirm"
+                        )}
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => setConfirmDeleteName(null)}
+                        className="rounded px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide bg-accent/60 text-muted-foreground hover:text-foreground"
+                      >
+                        Cancel
+                      </button>
+                    </div>
+                  ) : (
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <button
+                          type="button"
+                          onClick={() => setConfirmDeleteName(key.name)}
+                          className="text-muted-foreground hover:text-red-500"
+                        >
+                          <IconTrash size={12} />
+                        </button>
+                      </TooltipTrigger>
+                      <TooltipContent>Delete</TooltipContent>
+                    </Tooltip>
+                  )}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      ) : null}
+
+      {toast && (
+        <p
+          className={`text-[10px] ${toast.kind === "ok" ? "text-green-500" : "text-red-500"}`}
+        >
+          {toast.text}
+        </p>
+      )}
+    </div>
+  );
+}