fix(secrets): drop fork's CompanySecrets page and dedupe sidebar/route

The merge of upstream's #5429 (provider vaults + AWS Secrets Manager) added a
new 2,155-line Secrets.tsx page covering everything the fork's 528-line
CompanySecrets page did, plus vault management and AWS import. Auto-merge took
both sides' sidebar entry and route registration, so React Router picked the
fork's older page first and upstream's AWS UI never rendered.

- ui/src/App.tsx: drop CompanySecrets import + duplicate route at /company/settings/secrets
- ui/src/components/CompanySettingsSidebar.tsx: drop duplicate Secrets nav item
- ui/src/pages/CompanySecrets.tsx: delete (superseded)

Server-side delete guard (services/secrets.ts: refuse delete when secret is
referenced by agents or skills) is preserved and still enforced; upstream's
page surfaces the API error message in place of the fork's inline reference list.

ui/src/App.tsx

@@ -31,7 +31,6 @@ import { CompanySettings } from "./pages/CompanySettings";
 import { CompanyEnvironments } from "./pages/CompanyEnvironments";
 import { CompanyAccess } from "./pages/CompanyAccess";
 import { CompanyInvites } from "./pages/CompanyInvites";
-import { CompanySecrets } from "./pages/CompanySecrets";
 import { CompanySkills } from "./pages/CompanySkills";
 import { Secrets } from "./pages/Secrets";
 import { CompanyExport } from "./pages/CompanyExport";
@@ -71,7 +70,6 @@ function boardRoutes() {
       <Route path="company/settings/environments" element={<CompanyEnvironments />} />
       <Route path="company/settings/access" element={<CompanyAccess />} />
       <Route path="company/settings/invites" element={<CompanyInvites />} />
-      <Route path="company/settings/secrets" element={<CompanySecrets />} />
       <Route path="company/export/*" element={<CompanyExport />} />
       <Route path="company/import" element={<CompanyImport />} />
       <Route path="company/settings/secrets" element={<Secrets />} />

ui/src/components/CompanySettingsSidebar.tsx

@@ -69,7 +69,6 @@ export function CompanySettingsSidebar() {
             end
           />
           <SidebarNavItem to="/company/settings/invites" label="Invites" icon={MailPlus} end />
-          <SidebarNavItem to="/company/settings/secrets" label="Secrets" icon={KeyRound} end />
         </div>
       </nav>
     </aside>

ui/src/pages/CompanySecrets.tsx

@@ -1,528 +0,0 @@
-import { useEffect, useState } from "react";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import type { CompanySecret } from "@paperclipai/shared";
-import { KeyRound, Pencil, RefreshCw, Trash2 } from "lucide-react";
-import { ApiError } from "@/api/client";
-import { secretsApi } from "@/api/secrets";
-import { Button } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { Input } from "@/components/ui/input";
-import { Textarea } from "@/components/ui/textarea";
-import { useBreadcrumbs } from "@/context/BreadcrumbContext";
-import { useCompany } from "@/context/CompanyContext";
-import { useToast } from "@/context/ToastContext";
-import { cn, relativeTime } from "@/lib/utils";
-
-type DialogMode =
-  | { kind: "closed" }
-  | { kind: "create" }
-  | { kind: "rotate"; secret: CompanySecret }
-  | { kind: "edit"; secret: CompanySecret }
-  | { kind: "delete"; secret: CompanySecret };
-
-const COMPANY_SECRETS_QUERY_KEY = "company-secrets";
-
-export function CompanySecrets() {
-  const { selectedCompany, selectedCompanyId } = useCompany();
-  const { setBreadcrumbs } = useBreadcrumbs();
-  const { pushToast } = useToast();
-  const queryClient = useQueryClient();
-  const [dialog, setDialog] = useState<DialogMode>({ kind: "closed" });
-
-  useEffect(() => {
-    setBreadcrumbs([
-      { label: selectedCompany?.name ?? "Company", href: "/dashboard" },
-      { label: "Settings", href: "/company/settings" },
-      { label: "Secrets" },
-    ]);
-  }, [selectedCompany?.name, setBreadcrumbs]);
-
-  const { data: secrets, isLoading } = useQuery({
-    queryKey: selectedCompanyId
-      ? [COMPANY_SECRETS_QUERY_KEY, selectedCompanyId]
-      : [COMPANY_SECRETS_QUERY_KEY, "none"],
-    queryFn: () => secretsApi.list(selectedCompanyId!),
-    enabled: Boolean(selectedCompanyId),
-  });
-
-  function invalidateList() {
-    if (!selectedCompanyId) return;
-    queryClient.invalidateQueries({
-      queryKey: [COMPANY_SECRETS_QUERY_KEY, selectedCompanyId],
-    });
-  }
-
-  function handleApiError(error: unknown, fallback: string) {
-    const message = error instanceof Error ? error.message : fallback;
-    pushToast({ tone: "error", title: fallback, body: message });
-  }
-
-  return (
-    <div
-      className="max-w-5xl space-y-6"
-      data-testid="company-settings-secrets-section"
-    >
-      <div className="space-y-2">
-        <div className="flex items-center gap-2">
-          <KeyRound className="h-5 w-5 text-muted-foreground" />
-          <h1 className="text-lg font-semibold">Company Secrets</h1>
-        </div>
-        <p className="max-w-3xl text-sm text-muted-foreground">
-          Encrypted values that agents can reference from environment variables.
-          Rotate to change a secret's value; delete to remove it from the company
-          library.
-        </p>
-      </div>
-
-      <div className="flex items-center justify-between">
-        <p className="text-xs text-muted-foreground">
-          {secrets?.length ?? 0} secret{secrets?.length === 1 ? "" : "s"}
-        </p>
-        <Button
-          size="sm"
-          onClick={() => setDialog({ kind: "create" })}
-          disabled={!selectedCompanyId}
-        >
-          New secret
-        </Button>
-      </div>
-
-      <div className="rounded-md border border-border">
-        {isLoading ? (
-          <div className="px-4 py-6 text-sm text-muted-foreground">Loading…</div>
-        ) : !secrets || secrets.length === 0 ? (
-          <div className="px-4 py-6 text-sm text-muted-foreground">
-            No secrets yet. Use <span className="font-medium">New secret</span> to
-            create one, or seal a plain env var from the agent configuration page.
-          </div>
-        ) : (
-          <ul className="divide-y divide-border">
-            {secrets.map((secret) => (
-              <li
-                key={secret.id}
-                className="flex items-start gap-4 px-4 py-3 text-sm"
-              >
-                <div className="min-w-0 flex-1">
-                  <div className="font-mono font-medium">{secret.name}</div>
-                  {secret.description ? (
-                    <p className="mt-0.5 text-xs text-muted-foreground">
-                      {secret.description}
-                    </p>
-                  ) : null}
-                  <p className="mt-0.5 text-xs text-muted-foreground/70">
-                    v{secret.latestVersion} · last rotated{" "}
-                    {relativeTime(secret.updatedAt)}
-                  </p>
-                </div>
-                <div className="flex shrink-0 items-center gap-1">
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    onClick={() => setDialog({ kind: "rotate", secret })}
-                    title="Rotate value"
-                  >
-                    <RefreshCw className="h-3.5 w-3.5" />
-                  </Button>
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    onClick={() => setDialog({ kind: "edit", secret })}
-                    title="Edit name and description"
-                  >
-                    <Pencil className="h-3.5 w-3.5" />
-                  </Button>
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    onClick={() => setDialog({ kind: "delete", secret })}
-                    title="Delete secret"
-                    className="text-muted-foreground hover:text-destructive"
-                  >
-                    <Trash2 className="h-3.5 w-3.5" />
-                  </Button>
-                </div>
-              </li>
-            ))}
-          </ul>
-        )}
-      </div>
-
-      {dialog.kind === "create" && selectedCompanyId ? (
-        <CreateSecretDialog
-          companyId={selectedCompanyId}
-          onClose={() => setDialog({ kind: "closed" })}
-          onCreated={(name) => {
-            pushToast({ tone: "success", title: `Secret "${name}" created` });
-            invalidateList();
-            setDialog({ kind: "closed" });
-          }}
-          onError={(error) => handleApiError(error, "Failed to create secret")}
-        />
-      ) : null}
-
-      {dialog.kind === "rotate" ? (
-        <RotateSecretDialog
-          secret={dialog.secret}
-          onClose={() => setDialog({ kind: "closed" })}
-          onRotated={() => {
-            pushToast({
-              tone: "success",
-              title: `Secret "${dialog.secret.name}" rotated`,
-            });
-            invalidateList();
-            setDialog({ kind: "closed" });
-          }}
-          onError={(error) => handleApiError(error, "Failed to rotate secret")}
-        />
-      ) : null}
-
-      {dialog.kind === "edit" ? (
-        <EditSecretDialog
-          secret={dialog.secret}
-          onClose={() => setDialog({ kind: "closed" })}
-          onSaved={(name) => {
-            pushToast({ tone: "success", title: `Secret "${name}" updated` });
-            invalidateList();
-            setDialog({ kind: "closed" });
-          }}
-          onError={(error) => handleApiError(error, "Failed to update secret")}
-        />
-      ) : null}
-
-      {dialog.kind === "delete" ? (
-        <DeleteSecretDialog
-          secret={dialog.secret}
-          onClose={() => setDialog({ kind: "closed" })}
-          onDeleted={() => {
-            pushToast({
-              tone: "success",
-              title: `Secret "${dialog.secret.name}" deleted`,
-            });
-            invalidateList();
-            setDialog({ kind: "closed" });
-          }}
-        />
-      ) : null}
-    </div>
-  );
-}
-
-function CreateSecretDialog({
-  companyId,
-  onClose,
-  onCreated,
-  onError,
-}: {
-  companyId: string;
-  onClose: () => void;
-  onCreated: (name: string) => void;
-  onError: (error: unknown) => void;
-}) {
-  const [name, setName] = useState("");
-  const [value, setValue] = useState("");
-  const [description, setDescription] = useState("");
-
-  const create = useMutation({
-    mutationFn: () =>
-      secretsApi.create(companyId, {
-        name: name.trim(),
-        value,
-        description: description.trim() || null,
-      }),
-    onSuccess: () => onCreated(name.trim()),
-    onError,
-  });
-
-  return (
-    <Dialog open onOpenChange={(open) => !open && onClose()}>
-      <DialogContent className="sm:max-w-md">
-        <DialogHeader>
-          <DialogTitle>New secret</DialogTitle>
-          <DialogDescription>
-            Stored encrypted; visible to agents only when referenced from a
-            secret-typed environment variable.
-          </DialogDescription>
-        </DialogHeader>
-        <div className="space-y-3">
-          <div className="space-y-1">
-            <label className="text-xs font-medium">Name</label>
-            <Input
-              value={name}
-              onChange={(event) => setName(event.target.value)}
-              placeholder="API_TOKEN"
-              autoFocus
-            />
-          </div>
-          <div className="space-y-1">
-            <label className="text-xs font-medium">Value</label>
-            <Textarea
-              rows={4}
-              className="font-mono"
-              value={value}
-              onChange={(event) => setValue(event.target.value)}
-              placeholder="paste secret value"
-            />
-          </div>
-          <div className="space-y-1">
-            <label className="text-xs font-medium">Description (optional)</label>
-            <Input
-              value={description}
-              onChange={(event) => setDescription(event.target.value)}
-              placeholder="What this secret is used for"
-            />
-          </div>
-        </div>
-        <DialogFooter>
-          <Button variant="ghost" onClick={onClose}>
-            Cancel
-          </Button>
-          <Button
-            onClick={() => create.mutate()}
-            disabled={!name.trim() || !value || create.isPending}
-          >
-            {create.isPending ? "Creating…" : "Create secret"}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-function RotateSecretDialog({
-  secret,
-  onClose,
-  onRotated,
-  onError,
-}: {
-  secret: CompanySecret;
-  onClose: () => void;
-  onRotated: () => void;
-  onError: (error: unknown) => void;
-}) {
-  const [value, setValue] = useState("");
-
-  const rotate = useMutation({
-    mutationFn: () => secretsApi.rotate(secret.id, { value }),
-    onSuccess: onRotated,
-    onError,
-  });
-
-  return (
-    <Dialog open onOpenChange={(open) => !open && onClose()}>
-      <DialogContent className="sm:max-w-md">
-        <DialogHeader>
-          <DialogTitle>Rotate "{secret.name}"</DialogTitle>
-          <DialogDescription>
-            Stores a new version. Agents that reference this secret will pick up
-            the new value on their next run.
-          </DialogDescription>
-        </DialogHeader>
-        <div className="space-y-1">
-          <label className="text-xs font-medium">New value</label>
-          <Textarea
-            rows={5}
-            className="font-mono"
-            value={value}
-            onChange={(event) => setValue(event.target.value)}
-            placeholder="paste new value"
-            autoFocus
-          />
-          <p className="text-xs text-muted-foreground">
-            Current version: v{secret.latestVersion}
-          </p>
-        </div>
-        <DialogFooter>
-          <Button variant="ghost" onClick={onClose}>
-            Cancel
-          </Button>
-          <Button
-            onClick={() => rotate.mutate()}
-            disabled={!value || rotate.isPending}
-          >
-            {rotate.isPending ? "Rotating…" : "Rotate"}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-function EditSecretDialog({
-  secret,
-  onClose,
-  onSaved,
-  onError,
-}: {
-  secret: CompanySecret;
-  onClose: () => void;
-  onSaved: (name: string) => void;
-  onError: (error: unknown) => void;
-}) {
-  const [name, setName] = useState(secret.name);
-  const [description, setDescription] = useState(secret.description ?? "");
-
-  const save = useMutation({
-    mutationFn: () =>
-      secretsApi.update(secret.id, {
-        name: name.trim(),
-        description: description.trim() || null,
-      }),
-    onSuccess: () => onSaved(name.trim()),
-    onError,
-  });
-
-  return (
-    <Dialog open onOpenChange={(open) => !open && onClose()}>
-      <DialogContent className="sm:max-w-md">
-        <DialogHeader>
-          <DialogTitle>Edit secret</DialogTitle>
-          <DialogDescription>
-            Changes the metadata. The stored value is unchanged — use Rotate to
-            replace the value.
-          </DialogDescription>
-        </DialogHeader>
-        <div className="space-y-3">
-          <div className="space-y-1">
-            <label className="text-xs font-medium">Name</label>
-            <Input
-              value={name}
-              onChange={(event) => setName(event.target.value)}
-              autoFocus
-            />
-          </div>
-          <div className="space-y-1">
-            <label className="text-xs font-medium">Description</label>
-            <Input
-              value={description}
-              onChange={(event) => setDescription(event.target.value)}
-            />
-          </div>
-        </div>
-        <DialogFooter>
-          <Button variant="ghost" onClick={onClose}>
-            Cancel
-          </Button>
-          <Button
-            onClick={() => save.mutate()}
-            disabled={!name.trim() || save.isPending}
-          >
-            {save.isPending ? "Saving…" : "Save"}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-type DeleteUsageAgent = { id: string; name: string; envKeys: string[] };
-type DeleteUsageSkill = { id: string; name: string; slug: string };
-type DeleteBlock = { agents: DeleteUsageAgent[]; skills: DeleteUsageSkill[] };
-
-function DeleteSecretDialog({
-  secret,
-  onClose,
-  onDeleted,
-}: {
-  secret: CompanySecret;
-  onClose: () => void;
-  onDeleted: () => void;
-}) {
-  const [blockedBy, setBlockedBy] = useState<DeleteBlock | null>(null);
-  const [errorMessage, setErrorMessage] = useState<string | null>(null);
-
-  const remove = useMutation({
-    mutationFn: () => secretsApi.remove(secret.id),
-    onSuccess: onDeleted,
-    onError: (error: unknown) => {
-      if (error instanceof ApiError) {
-        const body = error.body as
-          | { details?: { usedByAgents?: DeleteUsageAgent[]; usedBySkills?: DeleteUsageSkill[] } }
-          | null
-          | undefined;
-        const usedByAgents = body?.details?.usedByAgents ?? [];
-        const usedBySkills = body?.details?.usedBySkills ?? [];
-        if (
-          (Array.isArray(usedByAgents) && usedByAgents.length > 0)
-          || (Array.isArray(usedBySkills) && usedBySkills.length > 0)
-        ) {
-          setBlockedBy({ agents: usedByAgents, skills: usedBySkills });
-          setErrorMessage(error.message);
-          return;
-        }
-      }
-      setErrorMessage(
-        error instanceof Error ? error.message : "Failed to delete secret",
-      );
-    },
-  });
-
-  const totalBlockers = blockedBy ? blockedBy.agents.length + blockedBy.skills.length : 0;
-
-  return (
-    <Dialog open onOpenChange={(open) => !open && onClose()}>
-      <DialogContent className="sm:max-w-md">
-        <DialogHeader>
-          <DialogTitle>Delete "{secret.name}"</DialogTitle>
-          <DialogDescription>
-            This permanently deletes the secret and all of its versions. Agents
-            and skills that reference it will fail until the binding is removed.
-          </DialogDescription>
-        </DialogHeader>
-
-        {blockedBy && totalBlockers > 0 ? (
-          <div className="space-y-2 rounded-md border border-destructive/50 bg-destructive/5 px-3 py-3 text-xs">
-            <p className="font-medium text-destructive">
-              Cannot delete — still referenced by:
-            </p>
-            <ul className="space-y-1 text-muted-foreground">
-              {blockedBy.agents.map((agent) => (
-                <li key={`agent:${agent.id}`}>
-                  <span className="font-medium text-foreground">{agent.name}</span>{" "}
-                  <span className="text-muted-foreground/70">agent</span>{" "}
-                  ({agent.envKeys.join(", ")})
-                </li>
-              ))}
-              {blockedBy.skills.map((skill) => (
-                <li key={`skill:${skill.id}`}>
-                  <span className="font-medium text-foreground">{skill.name}</span>{" "}
-                  <span className="text-muted-foreground/70">skill</span>{" "}
-                  ({skill.slug})
-                </li>
-              ))}
-            </ul>
-            <p className="text-muted-foreground">
-              Detach this secret from those references first.
-            </p>
-          </div>
-        ) : errorMessage ? (
-          <p className={cn("text-xs text-destructive")}>{errorMessage}</p>
-        ) : null}
-
-        <DialogFooter>
-          <Button variant="ghost" onClick={onClose}>
-            {blockedBy ? "Close" : "Cancel"}
-          </Button>
-          {!blockedBy ? (
-            <Button
-              variant="destructive"
-              onClick={() => {
-                setErrorMessage(null);
-                remove.mutate();
-              }}
-              disabled={remove.isPending}
-            >
-              {remove.isPending ? "Deleting…" : "Delete"}
-            </Button>
-          ) : null}
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}