From 85db76e5ef0fdea80eca4ff534bf7838cb99e452 Mon Sep 17 00:00:00 2001
From: Molecule AI Core-UIUX <core-uiux@agents.moleculesai.app>
Date: Tue, 12 May 2026 13:29:32 +0000
Subject: [PATCH] test(settings): add AddKeyForm + OrgTokensTab + SecretRow +
 SecretsTab coverage

Cherry-picked from test/settings-tab-coverage (PRs #708/#726).
- AddKeyForm: 340 lines, form validation + submission tests
- OrgTokensTab: 407 lines, org token CRUD + display tests
- SecretRow: 291 lines, secret display + reveal/copy/delete actions
- SecretsTab: 308 lines, secrets list + empty state + add form

Makes #704 a true superset of all settings test coverage.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 .../settings/__tests__/AddKeyForm.test.tsx    | 340 +++++++++++++++
 .../settings/__tests__/OrgTokensTab.test.tsx  | 407 ++++++++++++++++++
 .../settings/__tests__/SecretRow.test.tsx     | 291 +++++++++++++
 .../settings/__tests__/SecretsTab.test.tsx    | 308 +++++++++++++
 4 files changed, 1346 insertions(+)
 create mode 100644 canvas/src/components/settings/__tests__/AddKeyForm.test.tsx
 create mode 100644 canvas/src/components/settings/__tests__/OrgTokensTab.test.tsx
 create mode 100644 canvas/src/components/settings/__tests__/SecretRow.test.tsx
 create mode 100644 canvas/src/components/settings/__tests__/SecretsTab.test.tsx

diff --git a/canvas/src/components/settings/__tests__/AddKeyForm.test.tsx b/canvas/src/components/settings/__tests__/AddKeyForm.test.tsx
new file mode 100644
index 00000000..bd5e1d79
--- /dev/null
+++ b/canvas/src/components/settings/__tests__/AddKeyForm.test.tsx
@@ -0,0 +1,340 @@
+// @vitest-environment jsdom
+/**
+ * Tests for AddKeyForm — inline form for adding a new API key.
+ *
+ * Covers:
+ *   - Header + key name + value fields rendered
+ *   - Key name auto-uppercased on input
+ *   - Validation: UPPER_SNAKE_CASE required, duplicate name blocked
+ *   - Provider hint shown for known providers (GitHub, Anthropic, OpenRouter)
+ *   - Provider hint hidden for custom key names
+ *   - Debounced value validation
+ *   - Save button disabled when form invalid / saving
+ *   - createSecret called on save with correct args
+ *   - onCancel called on Cancel click
+ *   - Save error shown on failure
+ *   - TestConnectionButton shown when value is format-valid and provider supports it
+ */
+import React from "react";
+import { render, screen, fireEvent, cleanup, act, waitFor } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { AddKeyForm } from "../AddKeyForm";
+
+// ── Mocks ─────────────────────────────────────────────────────────────────────
+
+const { mockValidateSecretValue, mockIsValidKeyName, mockInferGroup } = vi.hoisted(() => ({
+  mockValidateSecretValue: vi.fn((value: string) => {
+    // Return error for "bad-value" to test ValidationHint display
+    if (value === "bad-value") return "Invalid format";
+    return null;
+  }),
+  mockIsValidKeyName: vi.fn((name: string) => /^[A-Z][A-Z0-9_]*$/.test(name)),
+  mockInferGroup: vi.fn((name: string) => {
+    const u = name.toUpperCase();
+    if (u.includes("GITHUB")) return "github" as const;
+    if (u.includes("ANTHROPIC")) return "anthropic" as const;
+    if (u.includes("OPENROUTER")) return "openrouter" as const;
+    return "custom" as const;
+  }),
+}));
+
+const mockCreateSecret = vi.fn();
+
+vi.mock("@/stores/secrets-store", () => ({
+  useSecretsStore: Object.assign(
+    vi.fn((selector?: (s: { createSecret: typeof mockCreateSecret }) => unknown) =>
+      selector ? selector({ createSecret: mockCreateSecret }) : { createSecret: mockCreateSecret }
+    ),
+    { getState: () => ({ createSecret: mockCreateSecret }) },
+  ),
+}));
+
+vi.mock("@/lib/validation/secret-formats", () => ({
+  validateSecretValue: mockValidateSecretValue,
+  isValidKeyName: mockIsValidKeyName,
+  inferGroup: mockInferGroup,
+}));
+
+vi.mock("@/lib/services", () => ({
+  SERVICES: {
+    github: { label: "GitHub", icon: "github", keyNames: [], docsUrl: "https://github.com", testSupported: true },
+    anthropic: { label: "Anthropic", icon: "anthropic", keyNames: [], docsUrl: "https://anthropic.com", testSupported: true },
+    openrouter: { label: "OpenRouter", icon: "openrouter", keyNames: [], docsUrl: "https://openrouter.ai", testSupported: true },
+    custom: { label: "Other", icon: "key", keyNames: [], docsUrl: "", testSupported: false },
+  },
+  KEY_NAME_SUGGESTIONS: [],
+}));
+
+vi.mock("@/components/ui/KeyValueField", () => ({
+  KeyValueField: ({ value, onChange, disabled }: { value: string; onChange: (v: string) => void; disabled?: boolean }) => (
+    <textarea
+      data-testid="key-value-field"
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      disabled={disabled}
+      aria-label="Key value"
+    />
+  ),
+}));
+
+vi.mock("@/components/ui/ValidationHint", () => ({
+  ValidationHint: ({ error }: { error: string | null }) =>
+    error ? <span role="alert">{error}</span> : null,
+}));
+
+vi.mock("@/components/ui/TestConnectionButton", () => ({
+  TestConnectionButton: () => <button data-testid="test-connection-btn" type="button">Test connection</button>,
+}));
+
+beforeEach(() => {
+  mockCreateSecret.mockReset().mockResolvedValue(undefined);
+});
+
+afterEach(() => {
+  cleanup();
+  vi.useRealTimers();
+});
+
+// ── Helpers ──────────────────────────────────────────────────────────────────
+
+async function typeKeyName(name: string) {
+  const input = screen.getByLabelText("Key name");
+  fireEvent.change(input, { target: { value: name } });
+  await act(async () => { await Promise.resolve(); });
+}
+
+async function typeValue(val: string) {
+  const textarea = screen.getByTestId("key-value-field");
+  fireEvent.change(textarea, { target: { value: val } });
+  await act(async () => { await Promise.resolve(); });
+}
+
+// ─── Initial render ─────────────────────────────────────────────────────────
+
+describe("AddKeyForm — initial render", () => {
+  it("renders header 'Add New Key'", () => {
+    render(<AddKeyForm workspaceId="ws-1" existingNames={[]} onCancel={vi.fn()} />);
+    expect(screen.getByText("Add New Key")).toBeTruthy();
+  });
+
+  it("has key name and value inputs", () => {
+    render(<AddKeyForm workspaceId="ws-1" existingNames={[]} onCancel={vi.fn()} />);
+    expect(screen.getByLabelText("Key name")).toBeTruthy();
+    expect(screen.getByTestId("key-value-field")).toBeTruthy();
+  });
+
+  it("Save and Cancel buttons present", () => {
+    render(<AddKeyForm workspaceId="ws-1" existingNames={[]} onCancel={vi.fn()} />);
+    expect(screen.getByRole("button", { name: /save key/i })).toBeTruthy();
+    expect(screen.getByRole("button", { name: /cancel/i })).toBeTruthy();
+  });
+
+  it("Save button disabled initially", () => {
+    render(<AddKeyForm workspaceId="ws-1" existingNames={[]} onCancel={vi.fn()} />);
+    expect((screen.getByRole("button", { name: /save key/i }) as HTMLButtonElement).disabled).toBe(true);
+  });
+});
+
+// ─── Key name validation ────────────────────────────────────────────────────
+
+describe("AddKeyForm — key name validation", () => {
+  it("auto-uppercases key name input", async () => {
+    render(<AddKeyForm workspaceId="ws-1" existingNames={[]} onCancel={vi.fn()} />);
+    const input = screen.getByLabelText("Key name") as HTMLInputElement;
+    fireEvent.change(input, { target: { value: "github_token" } });
+    expect(input.value).toBe("GITHUB_TOKEN");
+  });
+
+  it("shows error for key name starting with digit (invalid UPPER_SNAKE_CASE)", async () => {
+    render(<AddKeyForm workspaceId="ws-1" existingNames={[]} onCancel={vi.fn()} />);
+    // The key name input auto-uppercases, so "123_token" → "123_TOKEN"
+    // which fails /^[A-Z][A-Z0-9_]*$/ (must start with uppercase letter)
+    const input = screen.getByLabelText("Key name");
+    fireEvent.change(input, { target: { value: "123_token" } });
+    await act(async () => { await Promise.resolve(); });
+    expect(screen.getByRole("alert")).toBeTruthy();
+    expect(screen.getByText(/upper_snake_case/i)).toBeTruthy();
+  });
+
+  it("shows error for key name starting with number", async () => {
+    render(<AddKeyForm workspaceId="ws-1" existingNames={[]} onCancel={vi.fn()} />);
+    await typeKeyName("123_TOKEN");
+    expect(screen.getByText(/upper_snake_case/i)).toBeTruthy();
+  });
+
+  it("shows duplicate error when key name already exists", async () => {
+    render(<AddKeyForm workspaceId="ws-1" existingNames={["ANTHROPIC_API_KEY"]} onCancel={vi.fn()} />);
+    await typeKeyName("ANTHROPIC_API_KEY");
+    await act(async () => { await Promise.resolve(); });
+    expect(screen.getByText(/already exists/i)).toBeTruthy();
+  });
+
+  it("no error for valid new key name", async () => {
+    render(<AddKeyForm workspaceId="ws-1" existingNames={[]} onCancel={vi.fn()} />);
+    await typeKeyName("MY_SECRET_KEY");
+    await act(async () => { await Promise.resolve(); });
+    expect(screen.queryByRole("alert")).toBeNull();
+  });
+});
+
+// ─── Provider hint ──────────────────────────────────────────────────────────
+
+describe("AddKeyForm — provider hint", () => {
+  it("shows provider hint for ANTHROPIC_API_KEY (known provider)", async () => {
+    render(<AddKeyForm workspaceId="ws-1" existingNames={[]} onCancel={vi.fn()} />);
+    await typeKeyName("ANTHROPIC_API_KEY");
+    await act(async () => { await Promise.resolve(); });
+    expect(screen.getByTestId("provider-hint")).toBeTruthy();
+    expect(screen.getByText("Anthropic")).toBeTruthy();
+  });
+
+  it("shows provider hint for GITHUB_TOKEN", async () => {
+    render(<AddKeyForm workspaceId="ws-1" existingNames={[]} onCancel={vi.fn()} />);
+    await typeKeyName("GITHUB_TOKEN");
+    await act(async () => { await Promise.resolve(); });
+    expect(screen.getByTestId("provider-hint")).toBeTruthy();
+    expect(screen.getByText("GitHub")).toBeTruthy();
+  });
+
+  it("shows provider hint for OPENROUTER_API_KEY", async () => {
+    render(<AddKeyForm workspaceId="ws-1" existingNames={[]} onCancel={vi.fn()} />);
+    await typeKeyName("OPENROUTER_API_KEY");
+    await act(async () => { await Promise.resolve(); });
+    expect(screen.getByTestId("provider-hint")).toBeTruthy();
+    expect(screen.getByText("OpenRouter")).toBeTruthy();
+  });
+
+  it("hides provider hint for unknown custom key name", async () => {
+    render(<AddKeyForm workspaceId="ws-1" existingNames={[]} onCancel={vi.fn()} />);
+    await typeKeyName("MY_CUSTOM_TOKEN");
+    await act(async () => { await Promise.resolve(); });
+    expect(screen.queryByTestId("provider-hint")).toBeNull();
+  });
+});
+
+// ─── Value validation (debounced) ───────────────────────────────────────────
+
+describe("AddKeyForm — value validation (debounced)", () => {
+  it("ValidationHint shown after debounce for invalid value", async () => {
+    vi.useFakeTimers();
+    render(<AddKeyForm workspaceId="ws-1" existingNames={[]} onCancel={vi.fn()} />);
+    await typeKeyName("ANTHROPIC_API_KEY");
+    const textarea = screen.getByTestId("key-value-field");
+    // "bad-value" is the mock's sentinel for invalid input
+    fireEvent.change(textarea, { target: { value: "bad-value" } });
+    // Advance past debounce (VALIDATION_DEBOUNCE_MS = 400)
+    await act(async () => { vi.advanceTimersByTime(400); });
+    expect(screen.getByRole("alert")).toBeTruthy();
+    vi.useRealTimers();
+  });
+});
+
+// ─── Save ───────────────────────────────────────────────────────────────────
+
+describe("AddKeyForm — save", () => {
+  it("Save button disabled when key name or value missing", () => {
+    render(<AddKeyForm workspaceId="ws-1" existingNames={[]} onCancel={vi.fn()} />);
+    const saveBtn = screen.getByRole("button", { name: /save key/i });
+    expect((saveBtn as HTMLButtonElement).disabled).toBe(true);
+  });
+
+  it("Save button enabled when valid key name + value", async () => {
+    vi.useFakeTimers();
+    render(<AddKeyForm workspaceId="ws-1" existingNames={[]} onCancel={vi.fn()} />);
+    await typeKeyName("ANTHROPIC_API_KEY");
+    await typeValue("GITHUB_FAKE_VALUE_FOR_TEST");
+    await act(async () => { vi.advanceTimersByTime(400); });
+    const saveBtn = screen.getByRole("button", { name: /save key/i });
+    expect((saveBtn as HTMLButtonElement).disabled).toBe(false);
+    vi.useRealTimers();
+  });
+
+  it("calls createSecret(workspaceId, keyName, value) on save", async () => {
+    vi.useFakeTimers();
+    render(<AddKeyForm workspaceId="ws-test" existingNames={[]} onCancel={vi.fn()} />);
+    await typeKeyName("ANTHROPIC_API_KEY");
+    await typeValue("GITHUB_FAKE_VALUE_FOR_TEST");
+    await act(async () => { vi.advanceTimersByTime(400); });
+    fireEvent.click(screen.getByRole("button", { name: /save key/i }));
+    await act(async () => { vi.advanceTimersByTime(0); });
+    expect(mockCreateSecret).toHaveBeenCalledWith(
+      "ws-test",
+      "ANTHROPIC_API_KEY",
+      "GITHUB_FAKE_VALUE_FOR_TEST",
+    );
+    vi.useRealTimers();
+  });
+
+  it("Save button shows 'Saving…' during save", async () => {
+    vi.useFakeTimers();
+    mockCreateSecret.mockImplementation(() => new Promise(() => {}));
+    render(<AddKeyForm workspaceId="ws-1" existingNames={[]} onCancel={vi.fn()} />);
+    await typeKeyName("ANTHROPIC_API_KEY");
+    await typeValue("GITHUB_FAKE_VALUE_FOR_TEST");
+    await act(async () => { vi.advanceTimersByTime(400); });
+    fireEvent.click(screen.getByRole("button", { name: /save key/i }));
+    await act(async () => { vi.advanceTimersByTime(0); });
+    expect(screen.getByRole("button", { name: /saving/i })).toBeTruthy();
+    vi.useRealTimers();
+  });
+
+  it("shows error on save failure", async () => {
+    mockCreateSecret.mockRejectedValue(new Error("network error"));
+    render(<AddKeyForm workspaceId="ws-1" existingNames={[]} onCancel={vi.fn()} />);
+    await typeKeyName("ANTHROPIC_API_KEY");
+    await typeValue("GITHUB_FAKE_VALUE_FOR_TEST");
+    fireEvent.click(screen.getByRole("button", { name: /save key/i }));
+    await act(async () => { await Promise.resolve(); });
+    expect(screen.getByText(/network error/i)).toBeTruthy();
+  });
+});
+
+// ─── Cancel ─────────────────────────────────────────────────────────────────
+
+describe("AddKeyForm — cancel", () => {
+  it("onCancel called when Cancel button clicked", () => {
+    const onCancel = vi.fn();
+    render(<AddKeyForm workspaceId="ws-1" existingNames={[]} onCancel={onCancel} />);
+    fireEvent.click(screen.getByRole("button", { name: /cancel/i }));
+    expect(onCancel).toHaveBeenCalled();
+  });
+
+  it("Cancel button disabled during save", async () => {
+    vi.useFakeTimers();
+    mockCreateSecret.mockImplementation(() => new Promise(() => {}));
+    render(<AddKeyForm workspaceId="ws-1" existingNames={[]} onCancel={vi.fn()} />);
+    await typeKeyName("ANTHROPIC_API_KEY");
+    await typeValue("GITHUB_FAKE_VALUE_FOR_TEST");
+    await act(async () => { vi.advanceTimersByTime(400); });
+    fireEvent.click(screen.getByRole("button", { name: /save key/i }));
+    await act(async () => { vi.advanceTimersByTime(0); });
+    expect((screen.getByRole("button", { name: /cancel/i }) as HTMLButtonElement).disabled).toBe(true);
+    vi.useRealTimers();
+  });
+});
+
+// ─── TestConnectionButton ────────────────────────────────────────────────────
+
+describe("AddKeyForm — TestConnectionButton", () => {
+  it("TestConnectionButton shown for known provider with valid-format value", async () => {
+    vi.useFakeTimers();
+    render(<AddKeyForm workspaceId="ws-1" existingNames={[]} onCancel={vi.fn()} />);
+    await typeKeyName("ANTHROPIC_API_KEY");
+    // Use a value that passes the regex (sk-ant- prefix + 90+ chars)
+    const validValue = "GHP_FAKEPLACEHOLDER_NOTREAL_ABCDEFGHIJKLMNOPQRSTUVWXYZ12345678901234567890";
+    await typeValue(validValue);
+    await act(async () => { vi.advanceTimersByTime(400); });
+    expect(screen.getByTestId("test-connection-btn")).toBeTruthy();
+    vi.useRealTimers();
+  });
+
+  it("TestConnectionButton NOT shown when value is invalid format", async () => {
+    vi.useFakeTimers();
+    render(<AddKeyForm workspaceId="ws-1" existingNames={[]} onCancel={vi.fn()} />);
+    await typeKeyName("ANTHROPIC_API_KEY");
+    await typeValue("bad-value");
+    await act(async () => { vi.advanceTimersByTime(400); });
+    expect(screen.queryByTestId("test-connection-btn")).toBeNull();
+    vi.useRealTimers();
+  });
+});
diff --git a/canvas/src/components/settings/__tests__/OrgTokensTab.test.tsx b/canvas/src/components/settings/__tests__/OrgTokensTab.test.tsx
new file mode 100644
index 00000000..6b7a7e55
--- /dev/null
+++ b/canvas/src/components/settings/__tests__/OrgTokensTab.test.tsx
@@ -0,0 +1,407 @@
+// @vitest-environment jsdom
+/**
+ * Tests for OrgTokensTab — org-scoped API key management.
+ *
+ * Covers:
+ *   - Loading state (spinner + aria-busy)
+ *   - Empty state when no tokens
+ *   - Token list rendering (single + multiple)
+ *   - Token age display (just now, minutes, hours, days)
+ *   - New key form: label input + Create button
+ *   - Create: POST with optional name payload
+ *   - Create: loading spinner during creation
+ *   - New-token success box with copy button
+ *   - Copy button writes to clipboard + shows "Copied"
+ *   - Copy auto-resets to "Copy" after 2s
+ *   - Dismiss button hides new-token box
+ *   - Revoke button opens ConfirmDialog
+ *   - ConfirmDialog cancel closes without calling API
+ *   - ConfirmDialog confirm calls DELETE and re-fetches
+ *   - Error banner on fetch failure
+ *   - Error banner on create failure
+ *   - Error banner on revoke failure
+ */
+import React from "react";
+import { render, screen, fireEvent, cleanup, act, waitFor } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { OrgTokensTab } from "../OrgTokensTab";
+
+vi.mock("@/components/ConfirmDialog", () => ({
+  ConfirmDialog: vi.fn(() => null),
+}));
+
+const mockGet = vi.fn();
+const mockPost = vi.fn();
+const mockDel = vi.fn();
+
+vi.mock("@/lib/api", () => ({
+  api: { get: (...args: unknown[]) => mockGet(...args), post: (...args: unknown[]) => mockPost(...args), del: (...args: unknown[]) => mockDel(...args) },
+}));
+
+// Stub clipboard
+vi.stubGlobal("navigator", { clipboard: { writeText: vi.fn().mockResolvedValue(undefined) } });
+
+beforeEach(() => {
+  vi.useRealTimers();
+  mockGet.mockReset();
+  mockPost.mockReset();
+  mockDel.mockReset();
+  vi.mocked(navigator.clipboard.writeText).mockReset();
+});
+
+afterEach(() => {
+  cleanup();
+  vi.useRealTimers();
+});
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+async function flush() {
+  await act(async () => { await Promise.resolve(); });
+}
+
+function token(overrides: Partial<{
+  id: string; prefix: string; name?: string; created_by?: string; created_at: string; last_used_at?: string;
+}> = {}) {
+  return {
+    id: "tok-1",
+    prefix: "mol_pk_test",
+    name: undefined,
+    created_by: undefined,
+    created_at: new Date(Date.now() - 120_000).toISOString(),
+    last_used_at: undefined,
+    ...overrides,
+  };
+}
+
+// ─── Loading ─────────────────────────────────────────────────────────────────
+
+describe("OrgTokensTab — loading", () => {
+  it("shows spinner while fetching", () => {
+    mockGet.mockImplementation(() => new Promise(() => {}));
+    render(<OrgTokensTab />);
+    expect(screen.getByRole("status")).toBeTruthy();
+    expect(screen.getByText("Loading keys...")).toBeTruthy();
+  });
+
+  it("loading indicator has role=status and aria-live=polite", () => {
+    mockGet.mockImplementation(() => new Promise(() => {}));
+    render(<OrgTokensTab />);
+    const status = screen.getByRole("status");
+    expect(status.getAttribute("aria-live")).toBe("polite");
+    expect(status.textContent).toContain("Loading keys");
+  });
+});
+
+// ─── Empty state ─────────────────────────────────────────────────────────────
+
+describe("OrgTokensTab — empty", () => {
+  it("shows empty state when no tokens", async () => {
+    mockGet.mockResolvedValue({ tokens: [], count: 0 });
+    render(<OrgTokensTab />);
+    await flush();
+    expect(screen.getByText("No active keys")).toBeTruthy();
+    expect(screen.getByText(/Create a key above to authenticate/i)).toBeTruthy();
+  });
+});
+
+// ─── Token list ─────────────────────────────────────────────────────────────
+
+describe("OrgTokensTab — token list", () => {
+  it("renders token rows", async () => {
+    mockGet.mockResolvedValue({ tokens: [token({ id: "tok-1", prefix: "mol_pk_abc" })], count: 1 });
+    render(<OrgTokensTab />);
+    await flush();
+    expect(screen.getByText(/mol_pk_abc/)).toBeTruthy();
+  });
+
+  it("renders multiple token rows", async () => {
+    mockGet.mockResolvedValue({
+      tokens: [
+        token({ id: "tok-1", prefix: "mol_pk_a" }),
+        token({ id: "tok-2", prefix: "mol_pk_b" }),
+      ],
+      count: 2,
+    });
+    render(<OrgTokensTab />);
+    await flush();
+    expect(screen.getByText(/mol_pk_a/)).toBeTruthy();
+    expect(screen.getByText(/mol_pk_b/)).toBeTruthy();
+  });
+
+  it("shows token name when present", async () => {
+    mockGet.mockResolvedValue({
+      tokens: [token({ id: "tok-1", prefix: "mol_pk_abc", name: "zapier-integration" })],
+      count: 1,
+    });
+    render(<OrgTokensTab />);
+    await flush();
+    expect(screen.getByText("zapier-integration")).toBeTruthy();
+  });
+
+  it("age shows 'just now' for very recent tokens", async () => {
+    mockGet.mockResolvedValue({
+      tokens: [token({ id: "tok-1", created_at: new Date().toISOString() })],
+      count: 1,
+    });
+    render(<OrgTokensTab />);
+    await flush();
+    expect(screen.getByText(/just now/)).toBeTruthy();
+  });
+
+  it("age shows minutes ago", async () => {
+    mockGet.mockResolvedValue({
+      tokens: [token({ id: "tok-1", created_at: new Date(Date.now() - 5 * 60_000).toISOString() })],
+      count: 1,
+    });
+    render(<OrgTokensTab />);
+    await flush();
+    expect(screen.getByText(/5m ago/)).toBeTruthy();
+  });
+
+  it("age shows hours ago", async () => {
+    mockGet.mockResolvedValue({
+      tokens: [token({ id: "tok-1", created_at: new Date(Date.now() - 3 * 3600_000).toISOString() })],
+      count: 1,
+    });
+    render(<OrgTokensTab />);
+    await flush();
+    expect(screen.getByText(/3h ago/)).toBeTruthy();
+  });
+
+  it("age shows days ago", async () => {
+    mockGet.mockResolvedValue({
+      tokens: [token({ id: "tok-1", created_at: new Date(Date.now() - 2 * 86400_000).toISOString() })],
+      count: 1,
+    });
+    render(<OrgTokensTab />);
+    await flush();
+    expect(screen.getByText(/2d ago/)).toBeTruthy();
+  });
+
+  it("each token has a Revoke button", async () => {
+    mockGet.mockResolvedValue({
+      tokens: [token({ id: "tok-1" }), token({ id: "tok-2" })],
+      count: 2,
+    });
+    render(<OrgTokensTab />);
+    await flush();
+    const revokeBtns = Array.from(document.querySelectorAll("button")).filter(b => b.textContent === "Revoke");
+    expect(revokeBtns.length).toBe(2);
+  });
+
+  it("last_used_at is shown when present", async () => {
+    mockGet.mockResolvedValue({
+      tokens: [token({
+        id: "tok-1",
+        created_at: new Date(Date.now() - 86400_000).toISOString(),
+        last_used_at: new Date(Date.now() - 3600_000).toISOString(),
+      })],
+      count: 1,
+    });
+    render(<OrgTokensTab />);
+    await flush();
+    expect(screen.getByText(/Last used/i)).toBeTruthy();
+  });
+});
+
+// ─── Create token ─────────────────────────────────────────────────────────────
+
+describe("OrgTokensTab — create", () => {
+  it("Create button calls POST with empty body when no label", async () => {
+    mockGet.mockResolvedValue({ tokens: [], count: 0 });
+    mockPost.mockResolvedValue({ auth_token: "tok_new_secret", prefix: "tok_new" });
+    render(<OrgTokensTab />);
+    await flush();
+    const createBtn = screen.getByRole("button", { name: "+ New Key" });
+    await act(async () => { createBtn.click(); });
+    await flush();
+    expect(mockPost).toHaveBeenCalledWith("/org/tokens", {});
+  });
+
+  it("Create button calls POST with name when label is filled", async () => {
+    mockGet.mockResolvedValue({ tokens: [], count: 0 });
+    mockPost.mockResolvedValue({ auth_token: "tok_new_secret", prefix: "tok_new" });
+    render(<OrgTokensTab />);
+    await flush();
+    const input = screen.getByRole("textbox");
+    fireEvent.change(input, { target: { value: "zapier-prod" } });
+    await act(async () => { screen.getByRole("button", { name: "+ New Key" }).click(); });
+    await flush();
+    expect(mockPost).toHaveBeenCalledWith("/org/tokens", { name: "zapier-prod" });
+  });
+
+  it("shows spinner while creating", async () => {
+    mockGet.mockResolvedValue({ tokens: [], count: 0 });
+    mockPost.mockImplementation(() => new Promise(() => {}));
+    render(<OrgTokensTab />);
+    await flush();
+    await act(async () => { screen.getByRole("button", { name: "+ New Key" }).click(); });
+    await flush();
+    expect(screen.getByText(/Creating/)).toBeTruthy();
+  });
+
+  it("shows new token box after creation", async () => {
+    mockGet.mockResolvedValue({ tokens: [], count: 0 });
+    mockPost.mockResolvedValue({ auth_token: "tok_new_secret_xyz", prefix: "tok_new" });
+    render(<OrgTokensTab />);
+    await flush();
+    await act(async () => { screen.getByRole("button", { name: "+ New Key" }).click(); });
+    await flush();
+    expect(screen.getByText(/tok_new_secret_xyz/)).toBeTruthy();
+    expect(screen.getByText(/Copy now/)).toBeTruthy();
+  });
+
+  it("new token shows label when provided", async () => {
+    mockGet.mockResolvedValue({ tokens: [], count: 0 });
+    mockPost.mockResolvedValue({ auth_token: "tok_abc123", prefix: "tok_abc" });
+    render(<OrgTokensTab />);
+    await flush();
+    const input = screen.getByRole("textbox");
+    fireEvent.change(input, { target: { value: "my-label" } });
+    await act(async () => { screen.getByRole("button", { name: "+ New Key" }).click(); });
+    await flush();
+    expect(screen.getByText(/New Key: my-label/)).toBeTruthy();
+  });
+
+  it("dismiss hides the new-token box", async () => {
+    mockGet.mockResolvedValue({ tokens: [], count: 0 });
+    mockPost.mockResolvedValue({ auth_token: "tok_dismiss", prefix: "tok_d" });
+    render(<OrgTokensTab />);
+    await flush();
+    await act(async () => { screen.getByRole("button", { name: "+ New Key" }).click(); });
+    await flush();
+    expect(screen.getByText(/tok_dismiss/)).toBeTruthy();
+    await act(async () => { screen.getByText("Dismiss").closest("button")!.click(); });
+    await flush();
+    expect(screen.queryByText(/tok_dismiss/)).toBeNull();
+  });
+});
+
+// ─── Copy button ─────────────────────────────────────────────────────────────
+
+describe("OrgTokensTab — copy", () => {
+  it("Copy button writes token to clipboard", async () => {
+    mockGet.mockResolvedValue({ tokens: [], count: 0 });
+    mockPost.mockResolvedValue({ auth_token: "tok_copy_test", prefix: "tok_c" });
+    render(<OrgTokensTab />);
+    await flush();
+    await act(async () => { screen.getByRole("button", { name: "+ New Key" }).click(); });
+    await flush();
+    const copyBtn = screen.getByRole("button", { name: "Copy" });
+    await act(async () => { copyBtn.click(); });
+    expect(navigator.clipboard.writeText).toHaveBeenCalledWith("tok_copy_test");
+  });
+
+  it("Copy button shows 'Copied' after click", async () => {
+    mockGet.mockResolvedValue({ tokens: [], count: 0 });
+    mockPost.mockResolvedValue({ auth_token: "tok_copy_2", prefix: "tok_c" });
+    render(<OrgTokensTab />);
+    await flush();
+    await act(async () => { screen.getByRole("button", { name: "+ New Key" }).click(); });
+    await flush();
+    await act(async () => { screen.getByRole("button", { name: "Copy" }).click(); });
+    await flush();
+    expect(screen.getByRole("button", { name: "Copied" })).toBeTruthy();
+  });
+
+  it("Copy resets to 'Copy' after 2s", async () => {
+    vi.useFakeTimers();
+    mockGet.mockResolvedValue({ tokens: [], count: 0 });
+    mockPost.mockResolvedValue({ auth_token: "tok_timer", prefix: "tok_t" });
+    render(<OrgTokensTab />);
+    await act(async () => { await Promise.resolve(); });
+    await act(async () => { screen.getByRole("button", { name: "+ New Key" }).click(); });
+    await act(async () => { await Promise.resolve(); });
+    await act(async () => { screen.getByRole("button", { name: "Copy" }).click(); });
+    await act(async () => { await Promise.resolve(); });
+    expect(screen.getByRole("button", { name: "Copied" })).toBeTruthy();
+    act(() => { vi.advanceTimersByTime(2000); });
+    await act(async () => { await Promise.resolve(); });
+    expect(screen.getByRole("button", { name: "Copy" })).toBeTruthy();
+    vi.useRealTimers();
+  });
+});
+
+// ─── Revoke ─────────────────────────────────────────────────────────────────
+
+describe("OrgTokensTab — revoke", () => {
+  it("Revoke button opens ConfirmDialog", async () => {
+    mockGet.mockResolvedValue({ tokens: [token({ id: "tok-revoke", prefix: "mol_pk_rev" })], count: 1 });
+    render(<OrgTokensTab />);
+    await flush();
+    expect(screen.queryByRole("dialog")).toBeNull();
+    await act(async () => {
+      Array.from(document.querySelectorAll("button")).find(b => b.textContent === "Revoke")!.click();
+    });
+    await flush();
+    // ConfirmDialog is mocked — verify it was called with open=true
+    const ConfirmDialog = (await import("@/components/ConfirmDialog")).ConfirmDialog as ReturnType<typeof vi.fn>;
+    const lastCall = ConfirmDialog.mock.calls[ConfirmDialog.mock.calls.length - 1];
+    expect(lastCall[0]).toMatchObject({ open: true, title: "Revoke API Key" });
+  });
+
+  it("DELETE is called with correct URL on confirm", async () => {
+    mockGet.mockResolvedValue({ tokens: [token({ id: "tok-del", prefix: "mol_pk_del" })], count: 1 });
+    mockDel.mockResolvedValue(undefined);
+    render(<OrgTokensTab />);
+    await flush();
+
+    // Open confirm
+    await act(async () => {
+      Array.from(document.querySelectorAll("button")).find(b => b.textContent === "Revoke")!.click();
+    });
+    await flush();
+
+    // Get the onConfirm prop from the last ConfirmDialog call
+    const ConfirmDialog = (await import("@/components/ConfirmDialog")).ConfirmDialog as ReturnType<typeof vi.fn>;
+    const lastCall = ConfirmDialog.mock.calls[ConfirmDialog.mock.calls.length - 1];
+    const onConfirm = lastCall[0]?.onConfirm;
+
+    // Call onConfirm
+    await act(async () => { onConfirm?.(); });
+    await flush();
+
+    expect(mockDel).toHaveBeenCalledWith("/org/tokens/tok-del");
+  });
+});
+
+// ─── Error states ─────────────────────────────────────────────────────────────
+
+describe("OrgTokensTab — errors", () => {
+  it("shows error when fetch fails", async () => {
+    mockGet.mockRejectedValue(new Error("network failure"));
+    render(<OrgTokensTab />);
+    await flush();
+    expect(screen.getByText(/network failure/i)).toBeTruthy();
+  });
+
+  it("shows error when create fails", async () => {
+    mockGet.mockResolvedValue({ tokens: [], count: 0 });
+    mockPost.mockRejectedValue(new Error("server error"));
+    render(<OrgTokensTab />);
+    await flush();
+    await act(async () => { screen.getByRole("button", { name: "+ New Key" }).click(); });
+    await flush();
+    expect(screen.getByText(/server error/i)).toBeTruthy();
+  });
+
+  it("shows error when revoke fails", async () => {
+    mockGet.mockResolvedValue({ tokens: [token({ id: "tok-err" })], count: 1 });
+    mockDel.mockRejectedValue(new Error("revoke denied"));
+    render(<OrgTokensTab />);
+    await flush();
+
+    await act(async () => {
+      Array.from(document.querySelectorAll("button")).find(b => b.textContent === "Revoke")!.click();
+    });
+    await flush();
+
+    const ConfirmDialog = (await import("@/components/ConfirmDialog")).ConfirmDialog as ReturnType<typeof vi.fn>;
+    const onConfirm = ConfirmDialog.mock.calls[ConfirmDialog.mock.calls.length - 1][0]?.onConfirm;
+    await act(async () => { onConfirm?.(); });
+    await flush();
+
+    expect(screen.getByText(/revoke denied/i)).toBeTruthy();
+  });
+});
diff --git a/canvas/src/components/settings/__tests__/SecretRow.test.tsx b/canvas/src/components/settings/__tests__/SecretRow.test.tsx
new file mode 100644
index 00000000..1db10a82
--- /dev/null
+++ b/canvas/src/components/settings/__tests__/SecretRow.test.tsx
@@ -0,0 +1,291 @@
+// @vitest-environment jsdom
+/**
+ * Tests for SecretRow — single secret display/edit row.
+ *
+ * Covers:
+ *   - Display mode: key name, masked value, action buttons
+ *   - StatusBadge shown with correct status
+ *   - role="row" with aria-label
+ *   - Edit button sets editingKey in store
+ *   - Reveal toggle button rendered
+ *   - Copy button calls navigator.clipboard.writeText
+ *   - Delete button dispatches secret:delete-request event
+ *   - Edit mode: KeyValueField + save/cancel rendered
+ *   - Cancel calls setEditingKey(null)
+ *   - Save calls updateSecret + setSecretStatus
+ *   - Save error shown on failure
+ *   - TestConnectionButton shown when testSupported + value entered
+ */
+import React from "react";
+import { render, screen, fireEvent, cleanup, act } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { SecretRow } from "../SecretRow";
+
+// ── Hoisted mocks — vi.hoisted() so they're stable references ────────────────
+
+const { mockUpdateSecret, mockSetSecretStatus, mockSetEditingKey, mockValidateSecretValue } = vi.hoisted(() => ({
+  mockUpdateSecret: vi.fn(),
+  mockSetSecretStatus: vi.fn(),
+  mockSetEditingKey: vi.fn(),
+  mockValidateSecretValue: vi.fn(() => null), // always valid to avoid secret-pattern triggers
+}));
+
+// ── Store mock — single shared mutable object ───────────────────────────────
+
+const storeState = {
+  editingKey: null as string | null,
+  setEditingKey: mockSetEditingKey,
+  updateSecret: mockUpdateSecret,
+  setSecretStatus: mockSetSecretStatus,
+};
+
+vi.mock("@/stores/secrets-store", () => ({
+  useSecretsStore: Object.assign(
+    vi.fn((selector?: (s: typeof storeState) => unknown) =>
+      selector ? selector(storeState) : storeState
+    ),
+    { getState: () => storeState },
+  ),
+}));
+
+// ── Child component stubs ────────────────────────────────────────────────────
+
+vi.mock("@/lib/validation/secret-formats", () => ({
+  validateSecretValue: mockValidateSecretValue,
+}));
+
+vi.mock("@/components/ui/StatusBadge", () => ({
+  StatusBadge: ({ status }: { status: string }) => (
+    <span data-testid="status-badge" data-status={status}>{status}</span>
+  ),
+}));
+
+vi.mock("@/components/ui/RevealToggle", () => ({
+  RevealToggle: ({ revealed, onToggle, label }: { revealed: boolean; onToggle: () => void; label: string }) => (
+    <button type="button" data-testid="reveal-toggle" aria-label={label} onClick={onToggle}>
+      {revealed ? "HIDE" : "REVEAL"}
+    </button>
+  ),
+}));
+
+vi.mock("@/components/ui/KeyValueField", () => ({
+  KeyValueField: ({ value, onChange, disabled }: { value: string; onChange: (v: string) => void; disabled?: boolean }) => (
+    <textarea
+      data-testid="edit-value-field"
+      value={value}
+      onChange={(e) => { onChange(e.target.value); }}
+      disabled={disabled}
+    />
+  ),
+}));
+
+vi.mock("@/components/ui/ValidationHint", () => ({
+  ValidationHint: ({ error }: { error: string | null }) =>
+    error ? <span role="alert">{error}</span> : null,
+}));
+
+vi.mock("@/components/ui/TestConnectionButton", () => ({
+  TestConnectionButton: () => <button data-testid="test-connection-btn" type="button">Test connection</button>,
+}));
+
+// ── Test data ────────────────────────────────────────────────────────────────
+
+const GITHUB_SECRET = { name: "GITHUB_TOKEN", masked_value: "ghp_••••••••••••xK9f", group: "github" as const, status: "verified" as const, updated_at: "2024-01-01" };
+const ANTHROPIC_SECRET = { name: "ANTHROPIC_API_KEY", masked_value: "sk-ant-•••••••••••••••••a3Zq", group: "anthropic" as const, status: "unverified" as const, updated_at: "2024-01-02" };
+const CUSTOM_SECRET = { name: "MY_CUSTOM_KEY", masked_value: "••••••••••••••••9d2a", group: "custom" as const, status: "invalid" as const, updated_at: "2024-01-03" };
+
+// Use a value that definitely does NOT match any secret format regex
+const EDIT_VALUE = "TEST_VALID_TOKEN_VALUE_PLACEHOLDER_FOR_EDIT_MODE";
+
+beforeEach(() => {
+  // Mutate the shared object so all closures see the update
+  storeState.editingKey = null;
+  storeState.setEditingKey = vi.fn();
+  storeState.updateSecret = vi.fn().mockResolvedValue(undefined);
+  storeState.setSecretStatus = vi.fn();
+});
+
+afterEach(() => {
+  cleanup();
+  vi.useRealTimers();
+});
+
+// ─── Display mode ───────────────────────────────────────────────────────────
+
+describe("SecretRow — display mode", () => {
+  it("shows secret name", () => {
+    render(<SecretRow secret={GITHUB_SECRET} workspaceId="ws-1" />);
+    expect(screen.getByText("GITHUB_TOKEN")).toBeTruthy();
+  });
+
+  it("shows masked value", () => {
+    render(<SecretRow secret={GITHUB_SECRET} workspaceId="ws-1" />);
+    expect(screen.getByText("ghp_••••••••••••xK9f")).toBeTruthy();
+  });
+
+  it("shows StatusBadge", () => {
+    render(<SecretRow secret={GITHUB_SECRET} workspaceId="ws-1" />);
+    expect(screen.getByTestId("status-badge")).toBeTruthy();
+  });
+
+  it("StatusBadge has correct data-status attribute", () => {
+    render(<SecretRow secret={GITHUB_SECRET} workspaceId="ws-1" />);
+    expect(screen.getByTestId("status-badge").getAttribute("data-status")).toBe("verified");
+  });
+
+  it("role=row", () => {
+    render(<SecretRow secret={GITHUB_SECRET} workspaceId="ws-1" />);
+    expect(document.querySelector('[role="row"]')).toBeTruthy();
+  });
+
+  it("has Reveal, Copy, Edit, Delete buttons", () => {
+    render(<SecretRow secret={GITHUB_SECRET} workspaceId="ws-1" />);
+    expect(screen.getByTestId("reveal-toggle")).toBeTruthy();
+    expect(screen.getByRole("button", { name: /copy/i })).toBeTruthy();
+    expect(screen.getByRole("button", { name: /edit/i })).toBeTruthy();
+    expect(screen.getByRole("button", { name: /delete/i })).toBeTruthy();
+  });
+
+  it("shows invalid status correctly", () => {
+    render(<SecretRow secret={CUSTOM_SECRET} workspaceId="ws-1" />);
+    expect(screen.getByTestId("status-badge").getAttribute("data-status")).toBe("invalid");
+  });
+});
+
+// ─── Edit ───────────────────────────────────────────────────────────────────
+
+describe("SecretRow — edit", () => {
+  it("Edit button calls setEditingKey(secret.name)", () => {
+    render(<SecretRow secret={GITHUB_SECRET} workspaceId="ws-1" />);
+    fireEvent.click(screen.getByRole("button", { name: /edit/i }));
+    expect(storeState.setEditingKey).toHaveBeenCalledWith("GITHUB_TOKEN");
+  });
+
+  it("shows edit form (KeyValueField + save/cancel) when editingKey set", () => {
+    storeState.editingKey = "GITHUB_TOKEN";
+    render(<SecretRow secret={GITHUB_SECRET} workspaceId="ws-1" />);
+    expect(screen.getByTestId("edit-value-field")).toBeTruthy();
+    expect(screen.getByRole("button", { name: /cancel/i })).toBeTruthy();
+    expect(screen.getByRole("button", { name: /save/i })).toBeTruthy();
+  });
+
+  it("Cancel calls setEditingKey(null)", () => {
+    storeState.editingKey = "GITHUB_TOKEN";
+    render(<SecretRow secret={GITHUB_SECRET} workspaceId="ws-1" />);
+    fireEvent.click(screen.getByRole("button", { name: /cancel/i }));
+    expect(storeState.setEditingKey).toHaveBeenCalledWith(null);
+  });
+
+  it("Save button disabled when editValue is empty", () => {
+    storeState.editingKey = "GITHUB_TOKEN";
+    render(<SecretRow secret={GITHUB_SECRET} workspaceId="ws-1" />);
+    expect((screen.getByRole("button", { name: /save/i }) as HTMLButtonElement).disabled).toBe(true);
+  });
+
+  it("Save enabled when editValue is non-empty", async () => {
+    storeState.editingKey = "GITHUB_TOKEN";
+    render(<SecretRow secret={GITHUB_SECRET} workspaceId="ws-abc" />);
+    const textarea = screen.getByTestId("edit-value-field");
+    fireEvent.change(textarea, { target: { value: EDIT_VALUE } });
+    await act(async () => { await Promise.resolve(); });
+    expect((screen.getByRole("button", { name: /save/i }) as HTMLButtonElement).disabled).toBe(false);
+  });
+
+  it("Save calls updateSecret(workspaceId, name, editValue)", async () => {
+    storeState.editingKey = "GITHUB_TOKEN";
+    render(<SecretRow secret={GITHUB_SECRET} workspaceId="ws-test" />);
+    fireEvent.change(screen.getByTestId("edit-value-field"), { target: { value: EDIT_VALUE } });
+    await act(async () => { await Promise.resolve(); });
+    fireEvent.click(screen.getByRole("button", { name: /save/i }));
+    await act(async () => { await Promise.resolve(); });
+    expect(storeState.updateSecret).toHaveBeenCalledWith("ws-test", "GITHUB_TOKEN", EDIT_VALUE);
+  });
+
+  it("Save calls setSecretStatus(secret.name, 'unverified')", async () => {
+    storeState.editingKey = "GITHUB_TOKEN";
+    render(<SecretRow secret={GITHUB_SECRET} workspaceId="ws-1" />);
+    fireEvent.change(screen.getByTestId("edit-value-field"), { target: { value: EDIT_VALUE } });
+    await act(async () => { await Promise.resolve(); });
+    fireEvent.click(screen.getByRole("button", { name: /save/i }));
+    await act(async () => { await Promise.resolve(); });
+    expect(storeState.setSecretStatus).toHaveBeenCalledWith("GITHUB_TOKEN", "unverified");
+  });
+
+  it("Save button shows 'Saving…' during pending save", async () => {
+    storeState.editingKey = "GITHUB_TOKEN";
+    storeState.updateSecret = vi.fn(() => new Promise(() => {}));
+    render(<SecretRow secret={GITHUB_SECRET} workspaceId="ws-1" />);
+    fireEvent.change(screen.getByTestId("edit-value-field"), { target: { value: EDIT_VALUE } });
+    await act(async () => { await Promise.resolve(); });
+    fireEvent.click(screen.getByRole("button", { name: /save/i }));
+    await act(async () => { await Promise.resolve(); });
+    expect(screen.getByText("Saving…")).toBeTruthy();
+  });
+
+  it("shows error on save failure", async () => {
+    storeState.editingKey = "GITHUB_TOKEN";
+    storeState.updateSecret = vi.fn().mockRejectedValue(new Error("network error"));
+    render(<SecretRow secret={GITHUB_SECRET} workspaceId="ws-1" />);
+    fireEvent.change(screen.getByTestId("edit-value-field"), { target: { value: EDIT_VALUE } });
+    await act(async () => { await Promise.resolve(); });
+    fireEvent.click(screen.getByRole("button", { name: /save/i }));
+    await act(async () => { await Promise.resolve(); });
+    expect(screen.getByText(/network error/i)).toBeTruthy();
+  });
+});
+
+// ─── Copy ───────────────────────────────────────────────────────────────────
+
+describe("SecretRow — copy", () => {
+  it("Copy calls navigator.clipboard.writeText with masked value", async () => {
+    const writeText = vi.fn().mockResolvedValue(undefined);
+    Object.defineProperty(navigator, "clipboard", {
+      value: { writeText },
+      configurable: true,
+    });
+    render(<SecretRow secret={GITHUB_SECRET} workspaceId="ws-1" />);
+    fireEvent.click(screen.getByRole("button", { name: /copy/i }));
+    expect(writeText).toHaveBeenCalledWith("ghp_••••••••••••xK9f");
+  });
+});
+
+// ─── Delete ─────────────────────────────────────────────────────────────────
+
+describe("SecretRow — delete", () => {
+  it("Delete dispatches secret:delete-request with secret name", () => {
+    const listener = vi.fn();
+    window.addEventListener("secret:delete-request", listener);
+    render(<SecretRow secret={GITHUB_SECRET} workspaceId="ws-1" />);
+    fireEvent.click(screen.getByRole("button", { name: /delete/i }));
+    expect(listener).toHaveBeenCalledWith(
+      expect.objectContaining({ detail: "GITHUB_TOKEN" })
+    );
+    window.removeEventListener("secret:delete-request", listener);
+  });
+});
+
+// ─── TestConnectionButton ────────────────────────────────────────────────────
+
+describe("SecretRow — TestConnectionButton", () => {
+  it("shown for github secret when editValue is entered", async () => {
+    storeState.editingKey = "GITHUB_TOKEN";
+    render(<SecretRow secret={GITHUB_SECRET} workspaceId="ws-1" />);
+    fireEvent.change(screen.getByTestId("edit-value-field"), { target: { value: EDIT_VALUE } });
+    await act(async () => { await Promise.resolve(); });
+    expect(screen.getByTestId("test-connection-btn")).toBeTruthy();
+  });
+
+  it("NOT shown for custom secret (testSupported=false)", async () => {
+    storeState.editingKey = "MY_CUSTOM_KEY";
+    render(<SecretRow secret={CUSTOM_SECRET} workspaceId="ws-1" />);
+    fireEvent.change(screen.getByTestId("edit-value-field"), { target: { value: EDIT_VALUE } });
+    await act(async () => { await Promise.resolve(); });
+    expect(screen.queryByTestId("test-connection-btn")).toBeNull();
+  });
+
+  it("NOT shown when editValue is empty", () => {
+    storeState.editingKey = "GITHUB_TOKEN";
+    render(<SecretRow secret={GITHUB_SECRET} workspaceId="ws-1" />);
+    expect(screen.queryByTestId("test-connection-btn")).toBeNull();
+  });
+});
diff --git a/canvas/src/components/settings/__tests__/SecretsTab.test.tsx b/canvas/src/components/settings/__tests__/SecretsTab.test.tsx
new file mode 100644
index 00000000..79b775a7
--- /dev/null
+++ b/canvas/src/components/settings/__tests__/SecretsTab.test.tsx
@@ -0,0 +1,308 @@
+// @vitest-environment jsdom
+/**
+ * Tests for SecretsTab — API keys tab inside SettingsPanel.
+ *
+ * Covers:
+ *   - Loading state (aria-busy, "Loading API keys…")
+ *   - Error state (role=alert, error text, Refresh button)
+ *   - Empty state (renders EmptyState)
+ *   - Secret list renders ServiceGroup per group
+ *   - SearchBar shown only when secrets.length >= 4
+ *   - Search filters results — no-results state + Clear search
+ *   - "+ Add API Key" button toggles AddKeyForm
+ *   - AddKeyForm visible when isAddFormOpen=true
+ *   - ServiceGroup with multiple groups rendered
+ *   - Single-key group count label ("1 key")
+ *   - Multi-key group count label ("N keys")
+ */
+import React from "react";
+import { render, screen, fireEvent, cleanup, act, waitFor } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { SecretsTab } from "../SecretsTab";
+
+// ── Secrets store mock ───────────────────────────────────────────────────────
+
+type SecretsStoreState = {
+  secrets: Array<{ name: string; masked_value: string; group: string; status: string; updated_at: string }>;
+  isLoading: boolean;
+  error: string | null;
+  isAddFormOpen: boolean;
+  searchQuery: string;
+  fetchSecrets: ReturnType<typeof vi.fn>;
+  setAddFormOpen: ReturnType<typeof vi.fn>;
+  setSearchQuery: ReturnType<typeof vi.fn>;
+};
+
+// Mutable store state — tests reassign fields to test different states
+let storeState: SecretsStoreState;
+
+const mockFetchSecrets = vi.fn().mockResolvedValue(undefined);
+const mockSetAddFormOpen = vi.fn();
+const mockSetSearchQuery = vi.fn();
+
+storeState = {
+  secrets: [],
+  isLoading: false,
+  error: null,
+  isAddFormOpen: false,
+  searchQuery: "",
+  fetchSecrets: mockFetchSecrets,
+  setAddFormOpen: mockSetAddFormOpen,
+  setSearchQuery: mockSetSearchQuery,
+};
+
+vi.mock("@/stores/secrets-store", () => ({
+  useSecretsStore: Object.assign(
+    vi.fn((selector: (s: SecretsStoreState) => unknown) => selector(storeState)),
+    { getState: () => storeState },
+  ),
+}));
+
+// ── Child component stubs ────────────────────────────────────────────────────
+vi.mock("../ServiceGroup", () => ({
+  ServiceGroup: ({ group, secrets }: { group: string; secrets: unknown[] }) => (
+    <div data-testid={`service-group-${group}`}>
+      <span data-testid={`service-group-${group}-count`}>{secrets.length}</span>
+    </div>
+  ),
+}));
+
+vi.mock("../EmptyState", () => ({
+  EmptyState: ({ onAddFirst }: { onAddFirst: () => void }) => (
+    <div data-testid="secrets-empty-state">
+      <button onClick={onAddFirst}>Add first key</button>
+    </div>
+  ),
+}));
+
+vi.mock("../AddKeyForm", () => ({
+  AddKeyForm: ({ workspaceId, onCancel }: { workspaceId: string; onCancel: () => void }) => (
+    <div data-testid="add-key-form">AddKeyForm workspaceId={workspaceId} <button onClick={onCancel}>Cancel</button></div>
+  ),
+}));
+
+vi.mock("../SearchBar", () => ({
+  SearchBar: () => <div data-testid="search-bar" />,
+}));
+
+beforeEach(() => {
+  storeState = {
+    secrets: [],
+    isLoading: false,
+    error: null,
+    isAddFormOpen: false,
+    searchQuery: "",
+    fetchSecrets: mockFetchSecrets,
+    setAddFormOpen: mockSetAddFormOpen,
+    setSearchQuery: mockSetSearchQuery,
+  };
+  mockFetchSecrets.mockReset().mockResolvedValue(undefined);
+  mockSetAddFormOpen.mockReset();
+  mockSetSearchQuery.mockReset();
+});
+
+afterEach(() => {
+  cleanup();
+});
+
+async function flush() {
+  await act(async () => { await Promise.resolve(); });
+}
+
+// ─── Loading ────────────────────────────────────────────────────────────────
+
+describe("SecretsTab — loading", () => {
+  it("shows loading state", () => {
+    storeState.isLoading = true;
+    render(<SecretsTab workspaceId="ws-test" />);
+    expect(screen.getByText("Loading API keys…")).toBeTruthy();
+  });
+});
+
+// ─── Error ─────────────────────────────────────────────────────────────────
+
+describe("SecretsTab — error", () => {
+  it("shows error with role=alert", () => {
+    storeState.error = "network failure";
+    render(<SecretsTab workspaceId="ws-test" />);
+    expect(screen.getByRole("alert")).toBeTruthy();
+    expect(screen.getByText("network failure")).toBeTruthy();
+  });
+
+  it("shows Refresh button in error state", () => {
+    storeState.error = "server error";
+    render(<SecretsTab workspaceId="ws-test" />);
+    expect(screen.getByRole("button", { name: "Refresh" })).toBeTruthy();
+  });
+
+  it("Refresh button calls fetchSecrets with workspaceId", () => {
+    storeState.error = "server error";
+    render(<SecretsTab workspaceId="ws-123" />);
+    fireEvent.click(screen.getByRole("button", { name: "Refresh" }));
+    expect(mockFetchSecrets).toHaveBeenCalledWith("ws-123");
+  });
+});
+
+// ─── Empty state ────────────────────────────────────────────────────────────
+
+describe("SecretsTab — empty", () => {
+  it("shows EmptyState when secrets is empty and not loading", () => {
+    storeState.secrets = [];
+    storeState.isLoading = false;
+    render(<SecretsTab workspaceId="ws-test" />);
+    expect(screen.getByTestId("secrets-empty-state")).toBeTruthy();
+  });
+
+  it("EmptyState Add first button opens add form", () => {
+    storeState.secrets = [];
+    render(<SecretsTab workspaceId="ws-test" />);
+    fireEvent.click(screen.getByText("Add first key"));
+    expect(mockSetAddFormOpen).toHaveBeenCalledWith(true);
+  });
+});
+
+// ─── Secret list ────────────────────────────────────────────────────────────
+
+describe("SecretsTab — secret list", () => {
+  const ANTHROPIC_SECRET = { name: "ANTHROPIC_API_KEY", masked_value: "sk-ant-••••", group: "anthropic", status: "active", updated_at: "2024-01-01" };
+  const GITHUB_SECRET = { name: "GITHUB_TOKEN", masked_value: "ghp_••••", group: "github", status: "active", updated_at: "2024-01-02" };
+  const OPENROUTER_SECRET = { name: "OPENROUTER_API_KEY", masked_value: "sk-or-••••", group: "openrouter", status: "active", updated_at: "2024-01-03" };
+  const CUSTOM_SECRET = { name: "MY_CUSTOM_KEY", masked_value: "••••", group: "custom", status: "active", updated_at: "2024-01-04" };
+
+  it("renders one ServiceGroup per non-empty group", () => {
+    storeState.secrets = [ANTHROPIC_SECRET, GITHUB_SECRET];
+    render(<SecretsTab workspaceId="ws-test" />);
+    expect(screen.getByTestId("service-group-anthropic")).toBeTruthy();
+    expect(screen.getByTestId("service-group-github")).toBeTruthy();
+  });
+
+  it("does NOT render empty groups", () => {
+    storeState.secrets = [ANTHROPIC_SECRET]; // only anthropic has secrets
+    render(<SecretsTab workspaceId="ws-test" />);
+    expect(screen.queryByTestId("service-group-github")).toBeNull();
+    expect(screen.queryByTestId("service-group-openrouter")).toBeNull();
+  });
+
+  it("renders all 4 groups when all are populated", () => {
+    storeState.secrets = [ANTHROPIC_SECRET, GITHUB_SECRET, OPENROUTER_SECRET, CUSTOM_SECRET];
+    render(<SecretsTab workspaceId="ws-test" />);
+    expect(screen.getByTestId("service-group-anthropic")).toBeTruthy();
+    expect(screen.getByTestId("service-group-github")).toBeTruthy();
+    expect(screen.getByTestId("service-group-openrouter")).toBeTruthy();
+    expect(screen.getByTestId("service-group-custom")).toBeTruthy();
+  });
+
+  it("shows '+ Add API Key' button", () => {
+    storeState.secrets = [ANTHROPIC_SECRET];
+    render(<SecretsTab workspaceId="ws-test" />);
+    expect(screen.getByRole("button", { name: /add api key/i })).toBeTruthy();
+  });
+
+  it("'+ Add API Key' opens AddKeyForm", () => {
+    storeState.secrets = [ANTHROPIC_SECRET];
+    render(<SecretsTab workspaceId="ws-test" />);
+    fireEvent.click(screen.getByRole("button", { name: /add api key/i }));
+    expect(mockSetAddFormOpen).toHaveBeenCalledWith(true);
+  });
+
+  it("shows AddKeyForm when isAddFormOpen=true", () => {
+    storeState.secrets = [ANTHROPIC_SECRET];
+    storeState.isAddFormOpen = true;
+    render(<SecretsTab workspaceId="ws-456" />);
+    expect(screen.getByTestId("add-key-form")).toBeTruthy();
+  });
+
+  it("AddKeyForm Cancel closes the form", () => {
+    storeState.secrets = [ANTHROPIC_SECRET];
+    storeState.isAddFormOpen = true;
+    render(<SecretsTab workspaceId="ws-test" />);
+    fireEvent.click(screen.getByText("Cancel"));
+    expect(mockSetAddFormOpen).toHaveBeenCalledWith(false);
+  });
+
+  it("shows SearchBar when secrets.length >= 4", () => {
+    storeState.secrets = [
+      ANTHROPIC_SECRET, GITHUB_SECRET, OPENROUTER_SECRET,
+      { ...CUSTOM_SECRET, name: "EXTRA_KEY_1" },
+    ];
+    render(<SecretsTab workspaceId="ws-test" />);
+    expect(screen.getByTestId("search-bar")).toBeTruthy();
+  });
+
+  it("hides SearchBar when secrets.length < 4", () => {
+    storeState.secrets = [ANTHROPIC_SECRET, GITHUB_SECRET];
+    render(<SecretsTab workspaceId="ws-test" />);
+    expect(screen.queryByTestId("search-bar")).toBeNull();
+  });
+});
+
+// ─── Search / filtering ──────────────────────────────────────────────────────
+
+describe("SecretsTab — search", () => {
+  const S1 = { name: "ANTHROPIC_API_KEY", masked_value: "sk-ant-••••", group: "anthropic", status: "active", updated_at: "2024-01-01" };
+  const S2 = { name: "GITHUB_TOKEN", masked_value: "ghp_••••", group: "github", status: "active", updated_at: "2024-01-02" };
+  const S3 = { name: "OPENROUTER_API_KEY", masked_value: "sk-or-••••", group: "openrouter", status: "active", updated_at: "2024-01-03" };
+  const S4 = { name: "MY_CUSTOM_KEY", masked_value: "••••", group: "custom", status: "active", updated_at: "2024-01-04" };
+
+  beforeEach(() => {
+    // Need 4+ secrets for SearchBar to appear
+    storeState.secrets = [S1, S2, S3, S4];
+  });
+
+  it("shows no-results message when search filters all secrets", () => {
+    storeState.searchQuery = "nonexistent-key";
+    render(<SecretsTab workspaceId="ws-test" />);
+    expect(screen.getByText(/no keys match/i)).toBeTruthy();
+    expect(screen.getByText(/nonexistent-key/i)).toBeTruthy();
+  });
+
+  it("shows 'Clear search' button in no-results state", () => {
+    storeState.searchQuery = "nonexistent";
+    render(<SecretsTab workspaceId="ws-test" />);
+    expect(screen.getByRole("button", { name: /clear search/i })).toBeTruthy();
+  });
+
+  it("'Clear search' clears searchQuery via store.getState()", () => {
+    storeState.searchQuery = "nonexistent";
+    render(<SecretsTab workspaceId="ws-test" />);
+    fireEvent.click(screen.getByRole("button", { name: /clear search/i }));
+    expect(mockSetSearchQuery).toHaveBeenCalledWith("");
+  });
+
+  it("shows matching group when search matches one secret", () => {
+    storeState.searchQuery = "anthropic";
+    storeState.secrets = [S1, S2, S3, S4];
+    render(<SecretsTab workspaceId="ws-test" />);
+    expect(screen.getByTestId("service-group-anthropic")).toBeTruthy();
+    // Other groups should be filtered out
+    expect(screen.queryByTestId("service-group-github")).toBeNull();
+  });
+});
+
+// ─── SearchBar visibility threshold ─────────────────────────────────────────
+
+describe("SecretsTab — search bar threshold", () => {
+  const makeSecret = (n: number) => ({
+    name: `KEY_${n}`, masked_value: "••••", group: "custom" as const, status: "active" as const, updated_at: "2024-01-01",
+  });
+
+  it("SearchBar hidden at 3 secrets", () => {
+    storeState.secrets = [makeSecret(1), makeSecret(2), makeSecret(3)];
+    render(<SecretsTab workspaceId="ws-test" />);
+    expect(screen.queryByTestId("search-bar")).toBeNull();
+  });
+
+  it("SearchBar shown at 4 secrets (threshold)", () => {
+    storeState.secrets = [makeSecret(1), makeSecret(2), makeSecret(3), makeSecret(4)];
+    render(<SecretsTab workspaceId="ws-test" />);
+    expect(screen.getByTestId("search-bar")).toBeTruthy();
+  });
+
+  it("SearchBar hidden when secrets drop to 3 below threshold", () => {
+    // Separate render with 3 secrets — plain object state won't
+    // re-render React on mutation, so test the logic directly.
+    storeState.secrets = [makeSecret(1), makeSecret(2), makeSecret(3)];
+    render(<SecretsTab workspaceId="ws-test" />);
+    expect(screen.queryByTestId("search-bar")).toBeNull();
+  });
+});