mirror of
https://github.com/alkimake/paperclip.git
synced 2026-06-19 12:10:37 +09:00
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
GitHub
parent
06e6ee25cd
commit
778e775c35
103 changed files with 16971 additions and 509 deletions
|
|
@ -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"),
|
||||
|
|
|
|||
229
ui/storybook/stories/secrets.stories.tsx
Normal file
229
ui/storybook/stories/secrets.stories.tsx
Normal file
|
|
@ -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>
|
||||
),
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue