forked from farhoodlabs/paperclip
Add secrets provider vaults and remote import (#5429)
## Thinking Path > - Paperclip orchestrates AI-agent companies and needs secrets handling to work across local development, hosted operators, and governed agent execution. > - The affected subsystem is the company-scoped secrets control plane: database schema, server services/routes, CLI workflows, and the Secrets settings UI. > - The gap was that secrets were local-only and operators could not manage provider vaults or import existing remote references without exposing plaintext. > - This branch adds provider vault configuration plus an AWS Secrets Manager remote-import path while preserving company boundaries, binding context, and audit trails. > - I kept the PR to a single branch PR, removed unrelated lockfile/package drift, rebased the full branch onto the current `public-gh/master`, and addressed fresh Greptile findings. > - The benefit is a reviewable implementation of provider-backed secrets with focused tests covering provider selection, import conflicts, deleted secret reuse, rotation guards, and AWS signing behavior. ## What Changed - Added provider vault support for company secrets, including provider config storage, default vault handling, health checks, binding usage, access events, and remote import preview/commit. - Added an AWS Secrets Manager provider using SigV4 request signing, bounded request timeouts, namespace guardrails, cached runtime credential resolution, and external-reference linking without plaintext reads. - Added Secrets UI surfaces for vault management and remote import, plus CLI/API documentation for setup and operations. - Stabilized routine webhook secret binding paths and SSH environment-driver fixture bindings discovered during verification. - Addressed Greptile and CI findings: no lockfile/package drift, monotonic migration metadata, disabled-vault default races, soft-deleted secret hiding/recreate behavior, remove behavior with disabled vaults, soft-deleted external-reference re-import, non-active rotation guards, managed-secret soft deletion through PATCH, and per-call AWS SDK credential client churn. - Rebased this branch onto `public-gh/master` at `0e1a5828` and force-pushed with lease to keep this as the single PR for the branch. ## Verification - `git fetch public-gh master` - `git rebase public-gh/master` - `git diff --name-only public-gh/master...HEAD | grep '^pnpm-lock\.yaml$' || true` confirmed `pnpm-lock.yaml` is not in the PR diff. - Confirmed migration ordering: master ends at `0081_optimal_dormammu`; this PR adds `0082_dry_vision` and `0083_company_secret_provider_configs`. - Inspected migrations for repeat safety: new tables/indexes use `IF NOT EXISTS`; foreign keys are guarded by `DO $$ ... IF NOT EXISTS`; column additions use `ADD COLUMN IF NOT EXISTS`. - `pnpm -r typecheck` passed before the Greptile follow-up commits. - `pnpm test:run` ran the full stable Vitest path before the Greptile follow-up commits; it completed with 3 timing-related failures under parallel load: `codex-local-execute.test.ts`, `cursor-local-execute.test.ts`, and `environment-service.test.ts`. - `pnpm --filter @paperclipai/server exec vitest run src/__tests__/codex-local-execute.test.ts src/__tests__/cursor-local-execute.test.ts src/__tests__/environment-service.test.ts` passed on targeted rerun (`24/24`). - `pnpm build` passed before the Greptile follow-up commits. Vite reported existing chunk-size/dynamic-import warnings. - After Greptile follow-up commits: `pnpm --filter @paperclipai/server exec vitest run src/__tests__/secrets-service.test.ts` passed (`26/26`). - After Greptile follow-up commits: `pnpm --filter @paperclipai/server exec vitest run src/__tests__/aws-secrets-manager-provider.test.ts src/__tests__/secrets-service.test.ts` passed (`39/39`). - After Greptile follow-up commits: `pnpm --filter @paperclipai/server typecheck` passed. - Captured Storybook screenshots from `ui/storybook-static` for visual review. - Latest PR checks on `5ca3a5cf`: `policy`, serialized server suites 1/4-4/4, `Canary Dry Run`, `e2e`, `security/snyk`, and `Greptile Review` pass; aggregate `verify` is still registering the completed child checks. - Greptile review loop continued through the latest requested pass; all Greptile review threads are resolved and the latest `Greptile Review` check on `5ca3a5cf` passed with 0 comments added. ## Screenshots Before: the provider-vault and remote-import surfaces did not exist on `master`; these are after-state screenshots from the Storybook fixtures.    ## Risks - Migration risk: this adds new secret provider tables and extends existing secret rows. The migrations were checked for monotonic ordering and idempotent guards, but reviewers should still inspect upgrade behavior carefully. - Provider risk: AWS support uses direct SigV4 requests. Automated tests cover signing, request timeouts, vault-config selection, namespace guardrails, pending-version archival, sanitized provider errors, and service-level cleanup paths. A real-vault AWS smoke test remains deployment validation for an operator with AWS credentials rather than an unverified merge blocker in this local branch. - UI risk: the Secrets page and import dialog are large new surfaces; screenshots are included above for reviewer inspection. - Verification risk: the full local stable test command hit parallel-load timing failures, although the exact failed files passed when rerun directly. - Operational risk: remote import intentionally avoids plaintext reads; operators must understand that imported external references resolve at runtime and may fail if AWS permissions change. > For core feature work, check [`ROADMAP.md`](ROADMAP.md) first and discuss it in `#dev` before opening the PR. Feature PRs that overlap with planned core work may need to be redirected — check the roadmap first. See `CONTRIBUTING.md`. ## Model Used - OpenAI Codex, GPT-5 coding agent with local shell/tool use in the Paperclip worktree. Exact context-window size was not exposed by the runtime. ## Checklist - [x] I have included a thinking path that traces from project context to this change - [x] I have specified the model used (with version and capability details) - [x] I have checked ROADMAP.md and confirmed this PR does not duplicate planned core work - [ ] I have run tests locally and they pass - [x] I have added or updated tests where applicable - [x] If this change affects the UI, I have included before/after screenshots - [x] I have updated relevant documentation to reflect my changes - [x] I have considered and documented any risks above - [x] I will address all Greptile and reviewer comments before requesting merge --------- Co-authored-by: Paperclip <noreply@paperclip.ing> Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Dotta
@@ -20,6 +20,11 @@ import {
|
||||
storybookIssues,
|
||||
storybookLiveRuns,
|
||||
storybookProjects,
|
||||
storybookSecretAccessEvents,
|
||||
storybookSecretBindings,
|
||||
storybookSecretProviderHealth,
|
||||
storybookSecretProviders,
|
||||
storybookSecrets,
|
||||
storybookSidebarBadges,
|
||||
} from "../fixtures/paperclipData";
|
||||
import "@mdxeditor/editor/style.css";
|
||||
@@ -164,6 +169,39 @@ function installStorybookApiFixtures() {
|
||||
if (schema) return Response.json(schema);
|
||||
}
|
||||
|
||||
const secretsListMatch = url.pathname.match(/^\/api\/companies\/([^/]+)\/secrets$/);
|
||||
if (secretsListMatch) {
|
||||
const [, companyId] = secretsListMatch;
|
||||
return Response.json(companyId === "company-storybook" ? storybookSecrets : []);
|
||||
}
|
||||
|
||||
const secretProvidersMatch = url.pathname.match(/^\/api\/companies\/([^/]+)\/secret-providers$/);
|
||||
if (secretProvidersMatch) {
|
||||
return Response.json(storybookSecretProviders);
|
||||
}
|
||||
|
||||
const secretProviderHealthMatch = url.pathname.match(
|
||||
/^\/api\/companies\/([^/]+)\/secret-providers\/health$/,
|
||||
);
|
||||
if (secretProviderHealthMatch) {
|
||||
return Response.json(storybookSecretProviderHealth);
|
||||
}
|
||||
|
||||
const secretUsageMatch = url.pathname.match(/^\/api\/secrets\/([^/]+)\/usage$/);
|
||||
if (secretUsageMatch) {
|
||||
const [, secretId] = secretUsageMatch;
|
||||
return Response.json({
|
||||
secretId,
|
||||
bindings: storybookSecretBindings.filter((binding) => binding.secretId === secretId),
|
||||
});
|
||||
}
|
||||
|
||||
const secretEventsMatch = url.pathname.match(/^\/api\/secrets\/([^/]+)\/access-events$/);
|
||||
if (secretEventsMatch) {
|
||||
const [, secretId] = secretEventsMatch;
|
||||
return Response.json(storybookSecretAccessEvents.filter((event) => event.secretId === secretId));
|
||||
}
|
||||
|
||||
const companyResourceMatch = url.pathname.match(/^\/api\/companies\/([^/]+)\/([^/]+)$/);
|
||||
if (companyResourceMatch) {
|
||||
const [, companyId, resource] = companyResourceMatch;
|
||||
@@ -222,6 +260,11 @@ function installStorybookApiFixtures() {
|
||||
};
|
||||
}
|
||||
|
||||
// Install fetch fixtures at module load so React Query never sees a real network failure.
|
||||
if (typeof window !== "undefined") {
|
||||
installStorybookApiFixtures();
|
||||
}
|
||||
|
||||
function applyStorybookTheme(theme: "light" | "dark") {
|
||||
if (typeof document === "undefined") return;
|
||||
document.documentElement.classList.toggle("dark", theme === "dark");
|
||||
@@ -247,6 +290,10 @@ function StorybookProviders({
|
||||
}),
|
||||
);
|
||||
|
||||
if (typeof window !== "undefined") {
|
||||
installStorybookApiFixtures();
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
applyStorybookTheme(theme);
|
||||
}, [theme]);
|
||||
|
||||
@@ -5,6 +5,8 @@ import type {
|
||||
AuthSession,
|
||||
BudgetPolicySummary,
|
||||
Company,
|
||||
CompanySecret,
|
||||
CompanySecretBinding,
|
||||
DashboardSummary,
|
||||
ExecutionWorkspace,
|
||||
Goal,
|
||||
@@ -12,6 +14,8 @@ import type {
|
||||
IssueDocument,
|
||||
IssueLabel,
|
||||
Project,
|
||||
SecretAccessEvent,
|
||||
SecretProviderDescriptor,
|
||||
SidebarBadges,
|
||||
WorkspaceRuntimeService,
|
||||
} from "@paperclipai/shared";
|
||||
@@ -1303,3 +1307,229 @@ export const storybookLiveRuns: LiveRunForIssue[] = [
|
||||
nextAction: "Build fixture-backed navigation stories",
|
||||
},
|
||||
];
|
||||
|
||||
export const storybookSecretProviders: SecretProviderDescriptor[] = [
|
||||
{ id: "local_encrypted", label: "Local encrypted", requiresExternalRef: false },
|
||||
{ id: "aws_secrets_manager", label: "AWS Secrets Manager", requiresExternalRef: false },
|
||||
{ id: "gcp_secret_manager", label: "GCP Secret Manager", requiresExternalRef: false },
|
||||
{ id: "vault", label: "HashiCorp Vault", requiresExternalRef: false },
|
||||
];
|
||||
|
||||
export const storybookSecrets: CompanySecret[] = [
|
||||
{
|
||||
id: "secret-openai",
|
||||
companyId: "company-storybook",
|
||||
key: "openai_api_key",
|
||||
name: "OPENAI_API_KEY",
|
||||
provider: "local_encrypted",
|
||||
status: "active",
|
||||
managedMode: "paperclip_managed",
|
||||
externalRef: null,
|
||||
providerConfigId: null,
|
||||
providerMetadata: null,
|
||||
latestVersion: 3,
|
||||
description: "OpenAI API key shared by all model adapters.",
|
||||
lastResolvedAt: recent(12),
|
||||
lastRotatedAt: new Date("2026-04-15T09:30:00.000Z"),
|
||||
deletedAt: null,
|
||||
createdByAgentId: null,
|
||||
createdByUserId: "user-board",
|
||||
createdAt: new Date("2026-03-01T10:00:00.000Z"),
|
||||
updatedAt: recent(12),
|
||||
},
|
||||
{
|
||||
id: "secret-aws-prod",
|
||||
companyId: "company-storybook",
|
||||
key: "prod_aws_deploy",
|
||||
name: "PROD_AWS_DEPLOY_KEY",
|
||||
provider: "aws_secrets_manager",
|
||||
status: "active",
|
||||
managedMode: "external_reference",
|
||||
externalRef: "arn:aws:secretsmanager:us-east-1:123456789012:secret:paperclip/prod/aws-deploy-AbCdEf",
|
||||
providerConfigId: null,
|
||||
providerMetadata: null,
|
||||
latestVersion: 2,
|
||||
description: "Deploy key for the prod ECS rollout pipeline.",
|
||||
lastResolvedAt: recent(180),
|
||||
lastRotatedAt: new Date("2026-04-22T14:00:00.000Z"),
|
||||
deletedAt: null,
|
||||
createdByAgentId: null,
|
||||
createdByUserId: "user-board",
|
||||
createdAt: new Date("2026-02-01T10:00:00.000Z"),
|
||||
updatedAt: recent(180),
|
||||
},
|
||||
{
|
||||
id: "secret-github",
|
||||
companyId: "company-storybook",
|
||||
key: "github_app_pem",
|
||||
name: "GITHUB_APP_PEM",
|
||||
provider: "local_encrypted",
|
||||
status: "disabled",
|
||||
managedMode: "paperclip_managed",
|
||||
externalRef: null,
|
||||
providerConfigId: null,
|
||||
providerMetadata: null,
|
||||
latestVersion: 1,
|
||||
description: "Disabled until GitHub App reinstall is approved.",
|
||||
lastResolvedAt: new Date("2026-03-30T08:11:00.000Z"),
|
||||
lastRotatedAt: null,
|
||||
deletedAt: null,
|
||||
createdByAgentId: null,
|
||||
createdByUserId: "user-board",
|
||||
createdAt: new Date("2026-03-15T10:00:00.000Z"),
|
||||
updatedAt: new Date("2026-04-21T11:30:00.000Z"),
|
||||
},
|
||||
{
|
||||
id: "secret-stripe-archived",
|
||||
companyId: "company-storybook",
|
||||
key: "stripe_legacy",
|
||||
name: "STRIPE_LEGACY",
|
||||
provider: "vault",
|
||||
status: "archived",
|
||||
managedMode: "external_reference",
|
||||
externalRef: "secret/data/payments/stripe-legacy",
|
||||
providerConfigId: null,
|
||||
providerMetadata: null,
|
||||
latestVersion: 4,
|
||||
description: "Migrated to managed billing service. Kept for backfill jobs.",
|
||||
lastResolvedAt: new Date("2026-02-25T08:11:00.000Z"),
|
||||
lastRotatedAt: new Date("2026-02-20T08:11:00.000Z"),
|
||||
deletedAt: null,
|
||||
createdByAgentId: null,
|
||||
createdByUserId: "user-board",
|
||||
createdAt: new Date("2025-12-01T10:00:00.000Z"),
|
||||
updatedAt: new Date("2026-03-01T11:30:00.000Z"),
|
||||
},
|
||||
];
|
||||
|
||||
export const storybookSecretBindings: CompanySecretBinding[] = [
|
||||
{
|
||||
id: "binding-openai-agent",
|
||||
companyId: "company-storybook",
|
||||
secretId: "secret-openai",
|
||||
targetType: "agent",
|
||||
targetId: "agent-codex",
|
||||
configPath: "env.OPENAI_API_KEY",
|
||||
versionSelector: "latest",
|
||||
required: true,
|
||||
label: "Codex agent env",
|
||||
createdAt: new Date("2026-03-02T09:00:00.000Z"),
|
||||
updatedAt: new Date("2026-03-02T09:00:00.000Z"),
|
||||
},
|
||||
{
|
||||
id: "binding-openai-project",
|
||||
companyId: "company-storybook",
|
||||
secretId: "secret-openai",
|
||||
targetType: "project",
|
||||
targetId: "project-app",
|
||||
configPath: "env.OPENAI_API_KEY",
|
||||
versionSelector: "latest",
|
||||
required: true,
|
||||
label: "Paperclip App project env",
|
||||
createdAt: new Date("2026-03-02T09:00:00.000Z"),
|
||||
updatedAt: new Date("2026-03-02T09:00:00.000Z"),
|
||||
},
|
||||
{
|
||||
id: "binding-aws-environment",
|
||||
companyId: "company-storybook",
|
||||
secretId: "secret-aws-prod",
|
||||
targetType: "environment",
|
||||
targetId: "env-prod",
|
||||
configPath: "secrets.AWS_DEPLOY",
|
||||
versionSelector: 2,
|
||||
required: true,
|
||||
label: "Prod environment",
|
||||
createdAt: new Date("2026-04-22T14:01:00.000Z"),
|
||||
updatedAt: new Date("2026-04-22T14:01:00.000Z"),
|
||||
},
|
||||
];
|
||||
|
||||
export const storybookSecretAccessEvents: SecretAccessEvent[] = [
|
||||
{
|
||||
id: "evt-1",
|
||||
companyId: "company-storybook",
|
||||
secretId: "secret-openai",
|
||||
version: 3,
|
||||
provider: "local_encrypted",
|
||||
actorType: "agent",
|
||||
actorId: "agent-codex",
|
||||
consumerType: "agent",
|
||||
consumerId: "agent-codex",
|
||||
configPath: "env.OPENAI_API_KEY",
|
||||
issueId: "issue-storybook-1",
|
||||
heartbeatRunId: "run-storybook",
|
||||
pluginId: null,
|
||||
outcome: "success",
|
||||
errorCode: null,
|
||||
createdAt: recent(12),
|
||||
},
|
||||
{
|
||||
id: "evt-2",
|
||||
companyId: "company-storybook",
|
||||
secretId: "secret-openai",
|
||||
version: 3,
|
||||
provider: "local_encrypted",
|
||||
actorType: "system",
|
||||
actorId: null,
|
||||
consumerType: "project",
|
||||
consumerId: "project-app",
|
||||
configPath: "env.OPENAI_API_KEY",
|
||||
issueId: null,
|
||||
heartbeatRunId: null,
|
||||
pluginId: null,
|
||||
outcome: "success",
|
||||
errorCode: null,
|
||||
createdAt: recent(48),
|
||||
},
|
||||
{
|
||||
id: "evt-3",
|
||||
companyId: "company-storybook",
|
||||
secretId: "secret-openai",
|
||||
version: null,
|
||||
provider: "local_encrypted",
|
||||
actorType: "agent",
|
||||
actorId: "agent-codex",
|
||||
consumerType: "agent",
|
||||
consumerId: "agent-codex",
|
||||
configPath: "env.OPENAI_API_KEY",
|
||||
issueId: "issue-storybook-1",
|
||||
heartbeatRunId: "run-storybook",
|
||||
pluginId: null,
|
||||
outcome: "failure",
|
||||
errorCode: "secret_disabled",
|
||||
createdAt: recent(360),
|
||||
},
|
||||
];
|
||||
|
||||
export const storybookSecretProviderHealth = {
|
||||
providers: [
|
||||
{
|
||||
provider: "local_encrypted" as const,
|
||||
status: "ok" as const,
|
||||
message: "Encryption key loaded; permissions OK.",
|
||||
warnings: [] as string[],
|
||||
backupGuidance: ["Backup ~/.paperclip/instances/default/secrets/key separately from the database."],
|
||||
},
|
||||
{
|
||||
provider: "aws_secrets_manager" as const,
|
||||
status: "warn" as const,
|
||||
message: "Connected; KMS key rotation policy not yet enforced.",
|
||||
warnings: ["Set up automated KMS key rotation for production tenants."],
|
||||
backupGuidance: [],
|
||||
},
|
||||
{
|
||||
provider: "gcp_secret_manager" as const,
|
||||
status: "ok" as const,
|
||||
message: "Service account reachable.",
|
||||
warnings: [] as string[],
|
||||
backupGuidance: [],
|
||||
},
|
||||
{
|
||||
provider: "vault" as const,
|
||||
status: "ok" as const,
|
||||
message: "KV v2 mount reachable.",
|
||||
warnings: [] as string[],
|
||||
backupGuidance: [],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
@@ -250,28 +250,44 @@ const runtimeState: AgentRuntimeState = {
|
||||
};
|
||||
|
||||
const storybookSecrets: CompanySecret[] = [
|
||||
{
|
||||
id: "secret-openai",
|
||||
companyId: COMPANY_ID,
|
||||
name: "OPENAI_API_KEY",
|
||||
provider: "local_encrypted",
|
||||
externalRef: null,
|
||||
latestVersion: 5,
|
||||
description: "Primary coding model key for local Codex agents.",
|
||||
createdByAgentId: null,
|
||||
createdByUserId: "user-board",
|
||||
createdAt: recent(21_000),
|
||||
{
|
||||
id: "secret-openai",
|
||||
companyId: COMPANY_ID,
|
||||
key: "openai-api-key",
|
||||
name: "OPENAI_API_KEY",
|
||||
provider: "local_encrypted",
|
||||
status: "active",
|
||||
managedMode: "paperclip_managed",
|
||||
externalRef: null,
|
||||
providerConfigId: null,
|
||||
providerMetadata: null,
|
||||
latestVersion: 5,
|
||||
description: "Primary coding model key for local Codex agents.",
|
||||
lastResolvedAt: recent(600),
|
||||
lastRotatedAt: recent(21_000),
|
||||
deletedAt: null,
|
||||
createdByAgentId: null,
|
||||
createdByUserId: "user-board",
|
||||
createdAt: recent(21_000),
|
||||
updatedAt: recent(400),
|
||||
},
|
||||
{
|
||||
id: "secret-ops-webhook",
|
||||
companyId: COMPANY_ID,
|
||||
name: "OPS_WEBHOOK_TOKEN",
|
||||
provider: "local_encrypted",
|
||||
externalRef: null,
|
||||
latestVersion: 3,
|
||||
description: "Webhook token for runtime observability callbacks.",
|
||||
createdByAgentId: "agent-cto",
|
||||
{
|
||||
id: "secret-ops-webhook",
|
||||
companyId: COMPANY_ID,
|
||||
key: "ops-webhook-token",
|
||||
name: "OPS_WEBHOOK_TOKEN",
|
||||
provider: "local_encrypted",
|
||||
status: "active",
|
||||
managedMode: "paperclip_managed",
|
||||
externalRef: null,
|
||||
providerConfigId: null,
|
||||
providerMetadata: null,
|
||||
latestVersion: 3,
|
||||
description: "Webhook token for runtime observability callbacks.",
|
||||
lastResolvedAt: recent(120),
|
||||
lastRotatedAt: recent(12_000),
|
||||
deletedAt: null,
|
||||
createdByAgentId: "agent-cto",
|
||||
createdByUserId: null,
|
||||
createdAt: recent(12_000),
|
||||
updatedAt: recent(80),
|
||||
|
||||
@@ -199,28 +199,44 @@ const adapterErrors = {
|
||||
};
|
||||
|
||||
const storybookSecrets: CompanySecret[] = [
|
||||
{
|
||||
id: "secret-openai",
|
||||
companyId: "company-storybook",
|
||||
name: "OPENAI_API_KEY",
|
||||
provider: "local_encrypted",
|
||||
externalRef: null,
|
||||
latestVersion: 3,
|
||||
description: null,
|
||||
createdByAgentId: null,
|
||||
{
|
||||
id: "secret-openai",
|
||||
companyId: "company-storybook",
|
||||
key: "openai-api-key",
|
||||
name: "OPENAI_API_KEY",
|
||||
provider: "local_encrypted",
|
||||
status: "active",
|
||||
managedMode: "paperclip_managed",
|
||||
externalRef: null,
|
||||
providerConfigId: null,
|
||||
providerMetadata: null,
|
||||
latestVersion: 3,
|
||||
description: null,
|
||||
lastResolvedAt: new Date("2026-04-20T09:00:00.000Z"),
|
||||
lastRotatedAt: new Date("2026-04-18T10:00:00.000Z"),
|
||||
deletedAt: null,
|
||||
createdByAgentId: null,
|
||||
createdByUserId: "user-board",
|
||||
createdAt: new Date("2026-04-18T10:00:00.000Z"),
|
||||
updatedAt: new Date("2026-04-20T10:00:00.000Z"),
|
||||
},
|
||||
{
|
||||
id: "secret-github",
|
||||
companyId: "company-storybook",
|
||||
name: "GITHUB_TOKEN",
|
||||
provider: "local_encrypted",
|
||||
externalRef: null,
|
||||
latestVersion: 1,
|
||||
description: null,
|
||||
createdByAgentId: null,
|
||||
{
|
||||
id: "secret-github",
|
||||
companyId: "company-storybook",
|
||||
key: "github-token",
|
||||
name: "GITHUB_TOKEN",
|
||||
provider: "local_encrypted",
|
||||
status: "active",
|
||||
managedMode: "paperclip_managed",
|
||||
externalRef: null,
|
||||
providerConfigId: null,
|
||||
providerMetadata: null,
|
||||
latestVersion: 1,
|
||||
description: null,
|
||||
lastResolvedAt: null,
|
||||
lastRotatedAt: new Date("2026-04-19T10:00:00.000Z"),
|
||||
deletedAt: null,
|
||||
createdByAgentId: null,
|
||||
createdByUserId: "user-board",
|
||||
createdAt: new Date("2026-04-19T10:00:00.000Z"),
|
||||
updatedAt: new Date("2026-04-19T10:00:00.000Z"),
|
||||
|
||||
@@ -0,0 +1,229 @@
|
||||
import { useEffect, useState, type ReactNode } from "react";
|
||||
import type { Meta, StoryObj } from "@storybook/react-vite";
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import { AlertCircle, KeyRound } from "lucide-react";
|
||||
import type { CompanySecret, EnvBinding } from "@paperclipai/shared";
|
||||
import { Secrets } from "@/pages/Secrets";
|
||||
import { SecretBindingPicker, type SecretBindingValue } from "@/components/SecretBindingPicker";
|
||||
import { EnvVarEditor } from "@/components/EnvVarEditor";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { useCompany } from "@/context/CompanyContext";
|
||||
import { queryKeys } from "@/lib/queryKeys";
|
||||
import { storybookCompanies, storybookSecrets } from "../fixtures/paperclipData";
|
||||
|
||||
const COMPANY_ID = "company-storybook";
|
||||
|
||||
// Seed localStorage before CompanyContext mounts so its `useState` initializer reads the right id.
|
||||
if (typeof window !== "undefined") {
|
||||
window.localStorage.setItem("paperclip.selectedCompanyId", COMPANY_ID);
|
||||
}
|
||||
|
||||
function StorybookSecretsFixtures({ children }: { children: ReactNode }) {
|
||||
const queryClient = useQueryClient();
|
||||
// Seed query caches synchronously so children hydrate from cache on first render.
|
||||
queryClient.setQueryData(queryKeys.companies.all, storybookCompanies);
|
||||
queryClient.setQueryData(queryKeys.secrets.list(COMPANY_ID), storybookSecrets);
|
||||
|
||||
const { selectedCompanyId, setSelectedCompanyId } = useCompany();
|
||||
useEffect(() => {
|
||||
if (selectedCompanyId !== COMPANY_ID) {
|
||||
setSelectedCompanyId(COMPANY_ID);
|
||||
}
|
||||
}, [selectedCompanyId, setSelectedCompanyId]);
|
||||
|
||||
// Block render until the company id is the storybook fixture so the BindingPicker's
|
||||
// useQuery never sees the production-like null state.
|
||||
if (selectedCompanyId !== COMPANY_ID) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return <>{children}</>;
|
||||
}
|
||||
|
||||
const meta: Meta = {
|
||||
title: "Product/Secrets",
|
||||
parameters: {
|
||||
layout: "fullscreen",
|
||||
a11y: {
|
||||
test: "off",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
|
||||
type Story = StoryObj;
|
||||
|
||||
function Section({ eyebrow, title, children }: { eyebrow: string; title: string; children: ReactNode }) {
|
||||
return (
|
||||
<section className="border-b border-border pb-8 last:border-b-0">
|
||||
<header className="mb-3 px-6 pt-6">
|
||||
<p className="text-[11px] uppercase tracking-wide text-muted-foreground">{eyebrow}</p>
|
||||
<h2 className="text-lg font-semibold text-foreground">{title}</h2>
|
||||
</header>
|
||||
<div className="px-6">{children}</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export const SecretsInventory: Story = {
|
||||
render: () => (
|
||||
<StorybookSecretsFixtures>
|
||||
<div className="h-screen w-full bg-background">
|
||||
<Secrets />
|
||||
</div>
|
||||
</StorybookSecretsFixtures>
|
||||
),
|
||||
};
|
||||
|
||||
function BindingPickerSurface({
|
||||
initial,
|
||||
label,
|
||||
}: {
|
||||
initial: SecretBindingValue | null;
|
||||
label: string;
|
||||
}) {
|
||||
const [value, setValue] = useState<SecretBindingValue | null>(initial);
|
||||
return (
|
||||
<Card className="w-96">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-sm">{label}</CardTitle>
|
||||
<CardDescription className="text-xs">
|
||||
Picker can be reused across agent, project, environment, and plugin config surfaces.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<SecretBindingPicker value={value} onChange={setValue} />
|
||||
<pre className="rounded bg-muted/40 p-2 text-[11px] font-mono">
|
||||
{JSON.stringify(value, null, 2)}
|
||||
</pre>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export const BindingPicker: Story = {
|
||||
render: () => {
|
||||
return (
|
||||
<StorybookSecretsFixtures>
|
||||
<div className="grid grid-cols-1 gap-6 p-6 md:grid-cols-2">
|
||||
<BindingPickerSurface initial={null} label="Empty state" />
|
||||
<BindingPickerSurface
|
||||
initial={{ secretId: storybookSecrets[0]!.id, version: "latest" }}
|
||||
label="Bound to active secret"
|
||||
/>
|
||||
<BindingPickerSurface
|
||||
initial={{ secretId: storybookSecrets[2]!.id, version: "latest" }}
|
||||
label="Bound but disabled"
|
||||
/>
|
||||
<BindingPickerSurface
|
||||
initial={{ secretId: "missing-id", version: "latest" }}
|
||||
label="Bound to missing secret"
|
||||
/>
|
||||
</div>
|
||||
</StorybookSecretsFixtures>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
export const EnvEditorWithSecrets: Story = {
|
||||
render: () => {
|
||||
function EditorDemo({ initial, label }: { initial: Record<string, EnvBinding>; label: string }) {
|
||||
const [env, setEnv] = useState<Record<string, EnvBinding>>(initial);
|
||||
return (
|
||||
<Card className="w-full max-w-2xl">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-sm flex items-center gap-2">
|
||||
<KeyRound className="h-3.5 w-3.5" />
|
||||
{label}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<EnvVarEditor
|
||||
value={env}
|
||||
secrets={storybookSecrets as CompanySecret[]}
|
||||
onCreateSecret={async (name, value) => ({
|
||||
...storybookSecrets[0]!,
|
||||
id: `secret-${Math.random().toString(36).slice(2, 8)}`,
|
||||
name,
|
||||
key: name.toLowerCase(),
|
||||
description: `New secret with value len=${value.length}`,
|
||||
})}
|
||||
onChange={(next) => setEnv(next ?? {})}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div className="space-y-6 p-6">
|
||||
<EditorDemo
|
||||
label="Healthy bindings"
|
||||
initial={{
|
||||
OPENAI_API_KEY: { type: "secret_ref", secretId: "secret-openai", version: "latest" },
|
||||
STAGE: { type: "plain", value: "production" },
|
||||
}}
|
||||
/>
|
||||
<EditorDemo
|
||||
label="Mixed bindings (some need attention)"
|
||||
initial={{
|
||||
OPENAI_API_KEY: { type: "secret_ref", secretId: "secret-openai", version: 2 },
|
||||
GITHUB_APP_PEM: { type: "secret_ref", secretId: "secret-github", version: "latest" },
|
||||
ABANDONED: { type: "secret_ref", secretId: "missing-id", version: "latest" },
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
export const RunFailureCopy: Story = {
|
||||
render: () => (
|
||||
<div className="space-y-4 p-6">
|
||||
<Section eyebrow="Run failure" title="Missing or disabled secret blocks the run">
|
||||
<Card className="border-destructive/40 bg-destructive/5">
|
||||
<CardHeader className="space-y-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<AlertCircle className="h-4 w-4 text-destructive" />
|
||||
<Badge variant="outline" className="border-destructive/40 text-destructive">
|
||||
Run failed
|
||||
</Badge>
|
||||
<span className="text-xs font-mono text-muted-foreground">PAP-2350 · run-storybook</span>
|
||||
</div>
|
||||
<CardTitle className="text-sm">
|
||||
Secret <span className="font-mono">OPENAI_API_KEY</span> is{" "}
|
||||
<span className="font-medium text-destructive">disabled</span>
|
||||
</CardTitle>
|
||||
<CardDescription className="text-xs">
|
||||
The agent tried to resolve <span className="font-mono">env.OPENAI_API_KEY</span> for{" "}
|
||||
<span className="font-mono">agent:CodexCoder</span> but the secret is currently disabled. No value was
|
||||
loaded, no run logs were emitted that contained secret material.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-2 text-xs">
|
||||
<div>
|
||||
<p className="text-muted-foreground">Next action</p>
|
||||
<ul className="list-disc pl-4 space-y-0.5">
|
||||
<li>
|
||||
Re-enable the secret on{" "}
|
||||
<a className="text-primary underline" href="/PAP/company/settings/secrets">
|
||||
Company settings > Secrets
|
||||
</a>
|
||||
</li>
|
||||
<li>Or, rotate to a new value and pin v3 explicitly for this agent.</li>
|
||||
<li>Or, swap the binding to a different secret with the binding picker.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-muted-foreground">Audit</p>
|
||||
<p className="font-mono text-[11px]">
|
||||
secret_access_events.outcome=failure error=secret_disabled consumer=agent:CodexCoder
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Section>
|
||||
</div>
|
||||
),
|
||||
};
|
||||
Reference in New Issue
Block a user