@agent-native/dispatch 0.0.0-beta-20260819155526

package/src/routes/pages/vault.tsx

@@ -0,0 +1,978 @@
+import {
+  useActionMutation,
+  useActionQuery,
+} from "@agent-native/core/client/hooks";
+import { useOrgRole } from "@agent-native/core/client/org";
+import {
+  IconChevronDown,
+  IconChevronRight,
+  IconEdit,
+  IconEye,
+  IconEyeOff,
+  IconKey,
+  IconPlus,
+  IconRefresh,
+  IconTrash,
+  IconX,
+} from "@tabler/icons-react";
+import { useState } from "react";
+import { toast } from "sonner";
+
+import { ActionQueryError } from "../../components/action-query-error";
+import { DispatchShell } from "../../components/dispatch-shell";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "../../components/ui/alert-dialog";
+import { Badge } from "../../components/ui/badge";
+import { Button } from "../../components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../../components/ui/dialog";
+import { Input } from "../../components/ui/input";
+import { Label } from "../../components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../../components/ui/select";
+import { Skeleton } from "../../components/ui/skeleton";
+import { Switch } from "../../components/ui/switch";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "../../components/ui/tabs";
+import { Textarea } from "../../components/ui/textarea";
+
+const PROVIDERS = [
+  "google",
+  "slack",
+  "sendgrid",
+  "github",
+  "stripe",
+  "hubspot",
+  "jira",
+  "bigquery",
+  "anthropic",
+  "other",
+];
+const PROVIDER_NONE_VALUE = "__none__";
+
+type VaultAccessMode = "all-apps" | "manual";
+
+export function meta() {
+  return [{ title: "Vault — Dispatch" }];
+}
+
+function AddSecretDialog() {
+  const [open, setOpen] = useState(false);
+  const [credentialKey, setCredentialKey] = useState("");
+  const [name, setName] = useState("");
+  const [value, setValue] = useState("");
+  const [provider, setProvider] = useState("");
+  const [description, setDescription] = useState("");
+
+  const create = useActionMutation("create-vault-secret", {
+    onSuccess: () => {
+      toast.success("Secret created");
+      setOpen(false);
+      setCredentialKey("");
+      setName("");
+      setValue("");
+      setProvider("");
+      setDescription("");
+    },
+    onError: (err) => toast.error(String(err)),
+  });
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button>
+          <IconPlus size={16} className="mr-1.5" />
+          Add secret
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Add vault secret</DialogTitle>
+          <DialogDescription>
+            Store a credential that can be granted to workspace apps.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="space-y-4 py-2">
+          <div className="space-y-2">
+            <Label>Name</Label>
+            <Input
+              placeholder="Google OAuth Client ID"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label>Credential key (env var name)</Label>
+            <Input
+              placeholder="GOOGLE_CLIENT_ID"
+              value={credentialKey}
+              onChange={(e) => setCredentialKey(e.target.value)}
+              className="font-mono text-sm"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label>Value</Label>
+            <Input
+              type="password"
+              placeholder="The secret value"
+              value={value}
+              onChange={(e) => setValue(e.target.value)}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label>Provider</Label>
+            <Select value={provider} onValueChange={setProvider}>
+              <SelectTrigger>
+                <SelectValue placeholder="Select a provider..." />
+              </SelectTrigger>
+              <SelectContent>
+                {PROVIDERS.map((p) => (
+                  <SelectItem key={p} value={p}>
+                    {p.charAt(0).toUpperCase() + p.slice(1)}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="space-y-2">
+            <Label>Description (optional)</Label>
+            <Textarea
+              placeholder="What is this secret used for?"
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              rows={2}
+            />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button
+            onClick={() =>
+              create.mutate({
+                credentialKey,
+                name,
+                value,
+                provider: provider || undefined,
+                description: description || undefined,
+              })
+            }
+            disabled={!credentialKey || !name || !value || create.isPending}
+          >
+            {create.isPending ? "Creating..." : "Create secret"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function EditSecretDialog({ secret }: { secret: any }) {
+  const [open, setOpen] = useState(false);
+  const [credentialKey, setCredentialKey] = useState(
+    secret.credentialKey || "",
+  );
+  const [name, setName] = useState(secret.name || "");
+  const [value, setValue] = useState(secret.value || "");
+  const [provider, setProvider] = useState(secret.provider || "");
+  const [description, setDescription] = useState(secret.description || "");
+  const [showValue, setShowValue] = useState(false);
+
+  const update = useActionMutation("update-vault-secret", {
+    onSuccess: () => {
+      toast.success("Secret updated");
+      setOpen(false);
+      setShowValue(false);
+    },
+    onError: (err) => toast.error(String(err)),
+  });
+
+  const resetDraft = () => {
+    setCredentialKey(secret.credentialKey || "");
+    setName(secret.name || "");
+    setValue(secret.value || "");
+    setProvider(secret.provider || "");
+    setDescription(secret.description || "");
+    setShowValue(false);
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(nextOpen) => {
+        if (nextOpen) resetDraft();
+        setOpen(nextOpen);
+      }}
+    >
+      <DialogTrigger asChild>
+        <Button variant="outline" size="sm">
+          <IconEdit size={14} className="mr-1" />
+          Edit secret
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Edit vault secret</DialogTitle>
+          <DialogDescription>
+            Update the stored key and metadata. Changes sync to the shared
+            credential store.
+          </DialogDescription>
+        </DialogHeader>
+        <form
+          className="space-y-4 py-2"
+          onSubmit={(event) => {
+            event.preventDefault();
+            update.mutate({
+              id: secret.id,
+              credentialKey,
+              name,
+              value,
+              provider: provider || null,
+              description: description || null,
+            });
+          }}
+        >
+          <div className="space-y-2">
+            <Label htmlFor={`vault-secret-name-${secret.id}`}>Name</Label>
+            <Input
+              id={`vault-secret-name-${secret.id}`}
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor={`vault-secret-key-${secret.id}`}>
+              Credential key (env var name)
+            </Label>
+            <Input
+              id={`vault-secret-key-${secret.id}`}
+              value={credentialKey}
+              onChange={(e) => setCredentialKey(e.target.value)}
+              className="font-mono text-sm"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor={`vault-secret-value-${secret.id}`}>Value</Label>
+            <div className="flex gap-2">
+              <Input
+                id={`vault-secret-value-${secret.id}`}
+                type={showValue ? "text" : "password"}
+                value={value}
+                onChange={(e) => setValue(e.target.value)}
+                className="font-mono text-sm"
+              />
+              <Button
+                type="button"
+                variant="outline"
+                size="icon"
+                onClick={() => setShowValue((current) => !current)}
+                aria-label={
+                  showValue ? "Hide secret value" : "Show secret value"
+                }
+              >
+                {showValue ? <IconEyeOff size={15} /> : <IconEye size={15} />}
+              </Button>
+            </div>
+          </div>
+          <div className="space-y-2">
+            <Label>Provider</Label>
+            <Select
+              value={provider || PROVIDER_NONE_VALUE}
+              onValueChange={(nextProvider) =>
+                setProvider(
+                  nextProvider === PROVIDER_NONE_VALUE ? "" : nextProvider,
+                )
+              }
+            >
+              <SelectTrigger>
+                <SelectValue placeholder="Select a provider..." />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value={PROVIDER_NONE_VALUE}>No provider</SelectItem>
+                {PROVIDERS.map((p) => (
+                  <SelectItem key={p} value={p}>
+                    {p.charAt(0).toUpperCase() + p.slice(1)}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor={`vault-secret-description-${secret.id}`}>
+              Description
+            </Label>
+            <Textarea
+              id={`vault-secret-description-${secret.id}`}
+              placeholder="What is this secret used for?"
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              rows={2}
+            />
+          </div>
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => setOpen(false)}
+            >
+              Cancel
+            </Button>
+            <Button
+              type="submit"
+              disabled={
+                !credentialKey.trim() ||
+                !name.trim() ||
+                !value ||
+                update.isPending
+              }
+            >
+              {update.isPending ? "Saving..." : "Save changes"}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function GrantDialog({
+  secretId,
+  secretName,
+}: {
+  secretId: string;
+  secretName: string;
+}) {
+  const [open, setOpen] = useState(false);
+  const [appId, setAppId] = useState("");
+  const { data: catalog } = useActionQuery("list-integrations-catalog", {});
+
+  const grant = useActionMutation("create-vault-grant", {
+    onSuccess: () => {
+      toast.success(`Granted to ${appId}`);
+      setOpen(false);
+      setAppId("");
+    },
+    onError: (err) => toast.error(String(err)),
+  });
+
+  const apps = (catalog || []).map((a: any) => ({
+    id: a.appId,
+    name: a.appName,
+  }));
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button variant="outline" size="sm">
+          <IconPlus size={14} className="mr-1" />
+          Grant
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Grant "{secretName}" to an app</DialogTitle>
+          <DialogDescription>
+            Choose which app should receive this secret.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="py-2">
+          <Select value={appId} onValueChange={setAppId}>
+            <SelectTrigger>
+              <SelectValue placeholder="Select an app..." />
+            </SelectTrigger>
+            <SelectContent>
+              {apps.map((app: any) => (
+                <SelectItem key={app.id} value={app.id}>
+                  {app.name}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        <DialogFooter>
+          <Button
+            onClick={() => grant.mutate({ secretId, appId })}
+            disabled={!appId || grant.isPending}
+          >
+            {grant.isPending ? "Granting..." : "Grant access"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function VaultAccessSettingsCard({ mode }: { mode: VaultAccessMode }) {
+  const update = useActionMutation("set-vault-access-settings", {
+    onSuccess: (next: any) =>
+      toast.success(
+        next?.mode === "manual"
+          ? "Manual vault access enabled"
+          : "All apps can use vault keys",
+      ),
+    onError: (err) => toast.error(String(err)),
+  });
+  const allApps = mode !== "manual";
+
+  return (
+    <div className="rounded-xl bg-card px-4 py-3">
+      <div className="flex items-center justify-between gap-4">
+        <div className="min-w-0">
+          <Label className="text-sm font-medium">
+            All apps can use vault keys
+          </Label>
+          <p className="mt-1 text-xs text-muted-foreground">
+            {allApps
+              ? "Every workspace app can receive every saved key."
+              : "Only apps with explicit grants can receive saved keys."}
+          </p>
+        </div>
+        <Switch
+          checked={allApps}
+          disabled={update.isPending}
+          onCheckedChange={(checked) =>
+            update.mutate({ mode: checked ? "all-apps" : "manual" })
+          }
+          aria-label="Allow all workspace apps to use vault keys"
+        />
+      </div>
+    </div>
+  );
+}
+
+function SecretRow({
+  secret,
+  grants,
+  accessMode,
+}: {
+  secret: any;
+  grants: any[];
+  accessMode: VaultAccessMode;
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const [showValue, setShowValue] = useState(false);
+
+  const deleteSecret = useActionMutation("delete-vault-secret", {
+    onSuccess: () => toast.success("Secret deleted"),
+    onError: (err) => toast.error(String(err)),
+  });
+  const revokeGrant = useActionMutation("revoke-vault-grant", {
+    onSuccess: () => toast.success("Grant revoked"),
+    onError: (err) => toast.error(String(err)),
+  });
+  const syncToApp = useActionMutation("sync-vault-to-app", {
+    onSuccess: (data: any) =>
+      toast.success(`Synced ${data.synced} key(s) to ${data.appId}`),
+    onError: (err) => toast.error(String(err)),
+  });
+
+  const activeGrants = grants.filter((g) => g.status === "active");
+  const allApps = accessMode !== "manual";
+
+  return (
+    <div className="rounded-xl bg-card">
+      <button
+        type="button"
+        className="flex w-full items-center gap-3 px-4 py-3 text-left cursor-pointer"
+        onClick={() => setExpanded(!expanded)}
+      >
+        {expanded ? (
+          <IconChevronDown size={16} className="text-muted-foreground" />
+        ) : (
+          <IconChevronRight size={16} className="text-muted-foreground" />
+        )}
+        <div className="min-w-0 flex-1">
+          <div className="flex items-center gap-2">
+            <span className="text-sm font-medium text-foreground">
+              {secret.name}
+            </span>
+            {secret.provider && (
+              <Badge variant="secondary" className="text-xs">
+                {secret.provider}
+              </Badge>
+            )}
+          </div>
+          <div className="mt-0.5 font-mono text-xs text-muted-foreground">
+            {secret.credentialKey}
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
+          <Badge variant="outline" className="text-xs">
+            {allApps
+              ? "All apps"
+              : `${activeGrants.length} grant${activeGrants.length !== 1 ? "s" : ""}`}
+          </Badge>
+        </div>
+      </button>
+
+      {expanded && (
+        <div className="border-t px-4 py-3 space-y-3">
+          {secret.description && (
+            <p className="text-sm text-muted-foreground">
+              {secret.description}
+            </p>
+          )}
+
+          <div className="flex items-center gap-2">
+            <span className="text-xs text-muted-foreground">Value:</span>
+            <code className="text-xs font-mono text-foreground">
+              {showValue ? secret.value : `••••${secret.value.slice(-4)}`}
+            </code>
+            <button
+              type="button"
+              onClick={() => setShowValue(!showValue)}
+              className="text-muted-foreground hover:text-foreground cursor-pointer"
+            >
+              {showValue ? <IconEyeOff size={14} /> : <IconEye size={14} />}
+            </button>
+          </div>
+
+          <div className="space-y-2">
+            <div className="flex items-center justify-between">
+              <span className="text-xs font-medium text-foreground">
+                {allApps ? "Access" : "Grants"}
+              </span>
+              {!allApps && (
+                <GrantDialog secretId={secret.id} secretName={secret.name} />
+              )}
+            </div>
+            {allApps ? (
+              <div className="rounded-lg border border-dashed px-3 py-4 text-center text-xs text-muted-foreground">
+                Available to every workspace app.
+              </div>
+            ) : activeGrants.length > 0 ? (
+              <div className="space-y-1.5">
+                {activeGrants.map((grant: any) => (
+                  <div
+                    key={grant.id}
+                    className="flex items-center justify-between rounded-lg border px-3 py-2"
+                  >
+                    <div>
+                      <span className="text-sm font-medium text-foreground">
+                        {grant.appId}
+                      </span>
+                      <span className="ml-2 text-xs text-muted-foreground">
+                        {grant.syncedAt
+                          ? `synced ${new Date(grant.syncedAt).toLocaleString()}`
+                          : "not synced"}
+                      </span>
+                    </div>
+                    <div className="flex gap-1.5">
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => syncToApp.mutate({ appId: grant.appId })}
+                        disabled={syncToApp.isPending}
+                      >
+                        <IconRefresh size={14} />
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() =>
+                          revokeGrant.mutate({ grantId: grant.id })
+                        }
+                        disabled={revokeGrant.isPending}
+                      >
+                        <IconX size={14} />
+                      </Button>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <div className="rounded-lg border border-dashed px-3 py-4 text-center text-xs text-muted-foreground">
+                No grants yet.
+              </div>
+            )}
+          </div>
+
+          <div className="flex justify-end gap-2 border-t pt-3">
+            <EditSecretDialog secret={secret} />
+            <AlertDialog>
+              <AlertDialogTrigger asChild>
+                <Button
+                  variant="destructive"
+                  size="sm"
+                  disabled={deleteSecret.isPending}
+                >
+                  <IconTrash size={14} className="mr-1" />
+                  Delete secret
+                </Button>
+              </AlertDialogTrigger>
+              <AlertDialogContent>
+                <AlertDialogHeader>
+                  <AlertDialogTitle>Delete this secret?</AlertDialogTitle>
+                  <AlertDialogDescription>
+                    Removing “{secret.name}” revokes all of its grants. Apps
+                    that depended on this credential can lose access on the next
+                    sync. This cannot be undone.
+                  </AlertDialogDescription>
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                  <AlertDialogCancel>Cancel</AlertDialogCancel>
+                  <AlertDialogAction
+                    onClick={() => deleteSecret.mutate({ id: secret.id })}
+                  >
+                    Delete secret
+                  </AlertDialogAction>
+                </AlertDialogFooter>
+              </AlertDialogContent>
+            </AlertDialog>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function RequestRow({
+  request,
+  canManage,
+}: {
+  request: any;
+  canManage: boolean;
+}) {
+  const [secretValue, setSecretValue] = useState("");
+
+  const approve = useActionMutation("approve-vault-request", {
+    onSuccess: () => {
+      toast.success("Request approved");
+      setSecretValue("");
+    },
+    onError: (err) => toast.error(String(err)),
+  });
+  const deny = useActionMutation("deny-vault-request", {
+    onSuccess: () => toast.success("Request denied"),
+    onError: (err) => toast.error(String(err)),
+  });
+
+  return (
+    <div className="rounded-xl border bg-muted/30 px-4 py-3">
+      <div className="flex items-start justify-between gap-3">
+        <div>
+          <div className="text-sm font-medium text-foreground">
+            <span className="font-mono">{request.credentialKey}</span> for{" "}
+            <span className="font-semibold">{request.appId}</span>
+          </div>
+          <div className="mt-1 text-xs text-muted-foreground">
+            Requested by {request.requestedBy}
+            {request.reason && ` — "${request.reason}"`}
+          </div>
+          <div className="mt-0.5 text-xs text-muted-foreground">
+            {request.status === "pending"
+              ? "Pending"
+              : request.status === "approved"
+                ? `Approved by ${request.reviewedBy}`
+                : `Denied by ${request.reviewedBy}`}{" "}
+            · {new Date(request.createdAt).toLocaleString()}
+          </div>
+        </div>
+        {request.status === "pending" && (
+          <Badge variant="outline" className="whitespace-nowrap">
+            Pending
+          </Badge>
+        )}
+        {request.status === "approved" && (
+          <Badge
+            variant="secondary"
+            className="whitespace-nowrap bg-green-500/10 text-green-700 dark:text-green-400"
+          >
+            Approved
+          </Badge>
+        )}
+        {request.status === "denied" && (
+          <Badge
+            variant="secondary"
+            className="whitespace-nowrap bg-red-500/10 text-red-700 dark:text-red-400"
+          >
+            Denied
+          </Badge>
+        )}
+      </div>
+      {request.status === "pending" && canManage ? (
+        <div className="mt-3 flex items-end gap-2 border-t pt-3">
+          <div className="flex-1 space-y-1">
+            <Label className="text-xs">Secret value to provision</Label>
+            <Input
+              type="password"
+              placeholder="Enter the secret value"
+              value={secretValue}
+              onChange={(e) => setSecretValue(e.target.value)}
+              className="h-8 text-sm"
+            />
+          </div>
+          <Button
+            size="sm"
+            onClick={() => approve.mutate({ id: request.id, secretValue })}
+            disabled={!secretValue || approve.isPending}
+          >
+            Approve
+          </Button>
+          <Button
+            size="sm"
+            variant="outline"
+            onClick={() => deny.mutate({ id: request.id })}
+            disabled={deny.isPending}
+          >
+            Deny
+          </Button>
+        </div>
+      ) : request.status === "pending" ? (
+        <p className="mt-3 border-t pt-3 text-xs text-muted-foreground">
+          Waiting for a workspace owner or admin to review this request.
+        </p>
+      ) : null}
+    </div>
+  );
+}
+
+export default function VaultRoute() {
+  const { org, role, isLoading: orgLoading, error: orgError } = useOrgRole();
+  const accessReady = !orgLoading && !orgError && !!org;
+  const canManageVault =
+    accessReady && (!org.orgId || role === "owner" || role === "admin");
+  const secretsQuery = useActionQuery(
+    "list-vault-secrets",
+    {},
+    { enabled: canManageVault },
+  );
+  const grantsQuery = useActionQuery(
+    "list-vault-grants",
+    {},
+    { enabled: canManageVault },
+  );
+  const requestsQuery = useActionQuery(
+    "list-vault-requests",
+    {},
+    { enabled: accessReady },
+  );
+  const auditQuery = useActionQuery(
+    "list-vault-audit",
+    { limit: 20 },
+    { enabled: canManageVault },
+  );
+  const accessQuery = useActionQuery(
+    "get-vault-access-settings",
+    {},
+    { enabled: accessReady },
+  );
+  const { data: secrets, isLoading: secretsLoading } = secretsQuery;
+  const { data: grants } = grantsQuery;
+  const { data: requests } = requestsQuery;
+  const { data: audit } = auditQuery;
+  const { data: accessSettings } = accessQuery;
+  const accessMode: VaultAccessMode =
+    (accessSettings as any)?.mode === "manual" ? "manual" : "all-apps";
+
+  const grantsBySecret = (grants || []).reduce(
+    (acc: Record<string, any[]>, g: any) => {
+      if (!acc[g.secretId]) acc[g.secretId] = [];
+      acc[g.secretId].push(g);
+      return acc;
+    },
+    {} as Record<string, any[]>,
+  );
+
+  const pendingRequests = (requests || []).filter(
+    (r: any) => r.status === "pending",
+  );
+
+  return (
+    <DispatchShell
+      title="Vault"
+      description="Centralized secret management for your workspace. Store credentials once and sync them to apps."
+    >
+      <Tabs defaultValue="secrets">
+        <TabsList>
+          <TabsTrigger value="secrets">
+            Secrets {(secrets?.length || 0) > 0 && `(${secrets?.length})`}
+          </TabsTrigger>
+          <TabsTrigger value="requests">
+            Requests{" "}
+            {pendingRequests.length > 0 && (
+              <Badge
+                variant="secondary"
+                className="ml-1.5 h-5 px-1.5 text-xs bg-amber-500/10 text-amber-700 dark:text-amber-400"
+              >
+                {pendingRequests.length}
+              </Badge>
+            )}
+          </TabsTrigger>
+          {canManageVault ? (
+            <TabsTrigger value="audit">Audit</TabsTrigger>
+          ) : null}
+        </TabsList>
+
+        <TabsContent value="secrets" className="mt-4 space-y-3">
+          {!accessReady ? (
+            <div className="space-y-3">
+              {Array.from({ length: 3 }).map((_, index) => (
+                <div key={index} className="rounded-lg bg-card px-4 py-4">
+                  <Skeleton className="h-4 w-1/3" />
+                  <Skeleton className="mt-2 h-3 w-2/3" />
+                </div>
+              ))}
+            </div>
+          ) : !canManageVault ? (
+            <div className="rounded-2xl border border-dashed px-6 py-12 text-center">
+              <IconKey size={32} className="mx-auto text-muted-foreground/50" />
+              <h3 className="mt-3 text-sm font-medium text-foreground">
+                Vault management is restricted
+              </h3>
+              <p className="mx-auto mt-1 max-w-md text-sm text-muted-foreground">
+                Workspace owners and admins manage shared secret values. Use a
+                request from the app that needs a key, and an admin can review
+                it from the Requests tab.
+              </p>
+            </div>
+          ) : secretsQuery.isError ||
+            grantsQuery.isError ||
+            accessQuery.isError ? (
+            <ActionQueryError
+              error={
+                secretsQuery.error ?? grantsQuery.error ?? accessQuery.error
+              }
+              onRetry={() => {
+                void secretsQuery.refetch();
+                void grantsQuery.refetch();
+                void accessQuery.refetch();
+              }}
+            />
+          ) : null}
+          {accessReady && canManageVault ? (
+            <>
+              <VaultAccessSettingsCard mode={accessMode} />
+
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                  <IconKey size={16} />
+                  {secretsLoading ? (
+                    <Skeleton className="h-4 w-20" />
+                  ) : (
+                    <span>
+                      {`${secrets?.length || 0} secret${(secrets?.length || 0) !== 1 ? "s" : ""}`}
+                    </span>
+                  )}
+                </div>
+                <AddSecretDialog />
+              </div>
+
+              {!secretsQuery.isError &&
+              secretsLoading &&
+              (secrets ?? []).length === 0
+                ? Array.from({ length: 3 }).map((_, index) => (
+                    <div
+                      key={index}
+                      className="rounded-2xl bg-card px-5 py-4 space-y-2"
+                    >
+                      <Skeleton className="h-4 w-1/3" />
+                      <Skeleton className="h-3 w-2/3" />
+                    </div>
+                  ))
+                : (secrets || []).map((secret: any) => (
+                    <SecretRow
+                      key={secret.id}
+                      secret={secret}
+                      grants={grantsBySecret[secret.id] || []}
+                      accessMode={accessMode}
+                    />
+                  ))}
+
+              {!secretsQuery.isError &&
+                !secretsLoading &&
+                (secrets?.length || 0) === 0 && (
+                  <div className="rounded-2xl border border-dashed px-6 py-12 text-center">
+                    <IconKey
+                      size={32}
+                      className="mx-auto text-muted-foreground/50"
+                    />
+                    <h3 className="mt-3 text-sm font-medium text-foreground">
+                      No secrets yet
+                    </h3>
+                    <p className="mt-1 text-sm text-muted-foreground">
+                      Add your first secret to start sharing credentials across
+                      workspace apps.
+                    </p>
+                  </div>
+                )}
+            </>
+          ) : null}
+        </TabsContent>
+
+        <TabsContent value="requests" className="mt-4 space-y-3">
+          {requestsQuery.isError ? (
+            <ActionQueryError
+              error={requestsQuery.error}
+              onRetry={() => void requestsQuery.refetch()}
+            />
+          ) : null}
+          {(requests || []).map((request: any) => (
+            <RequestRow
+              key={request.id}
+              request={request}
+              canManage={canManageVault}
+            />
+          ))}
+          {!requestsQuery.isError && (requests?.length || 0) === 0 && (
+            <div className="rounded-2xl border border-dashed px-6 py-12 text-center text-sm text-muted-foreground">
+              No secret requests yet.
+            </div>
+          )}
+        </TabsContent>
+
+        {canManageVault ? (
+          <TabsContent value="audit" className="mt-4 space-y-2">
+            {auditQuery.isError ? (
+              <ActionQueryError
+                error={auditQuery.error}
+                onRetry={() => void auditQuery.refetch()}
+              />
+            ) : null}
+            {(audit || []).map((event: any) => (
+              <div
+                key={event.id}
+                className="rounded-xl border bg-muted/30 px-4 py-3"
+              >
+                <div className="text-sm font-medium text-foreground">
+                  {event.summary}
+                </div>
+                <div className="mt-1 text-xs text-muted-foreground">
+                  {event.actor} · {new Date(event.createdAt).toLocaleString()}
+                </div>
+              </div>
+            ))}
+            {!auditQuery.isError && (audit?.length || 0) === 0 && (
+              <div className="rounded-2xl border border-dashed px-6 py-12 text-center text-sm text-muted-foreground">
+                No vault activity yet.
+              </div>
+            )}
+          </TabsContent>
+        ) : null}
+      </Tabs>
+    </DispatchShell>
+  );
+}