306 lines
11 KiB
TypeScript
306 lines
11 KiB
TypeScript
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,
|
|
UserSecretCoverageSummary,
|
|
UserSecretDefinition,
|
|
} from "@paperclipai/shared";
|
|
import { Secrets } from "@/pages/Secrets";
|
|
import { SecretBindingPicker, type SecretBindingValue } from "@/components/SecretBindingPicker";
|
|
import { EnvironmentVariablesEditor } from "@/components/environment-variables-editor";
|
|
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";
|
|
|
|
const storybookUserSecretDefinitions: UserSecretDefinition[] = [
|
|
{
|
|
id: "def-storybook-github",
|
|
companyId: COMPANY_ID,
|
|
key: "PERSONAL_GH_TOKEN",
|
|
name: "Personal GitHub token",
|
|
description: "Used when the responsible user's own repos must be reached.",
|
|
status: "active",
|
|
provider: "local_encrypted",
|
|
managedMode: "paperclip_managed",
|
|
providerConfigId: null,
|
|
providerMetadata: null,
|
|
usageGuidance: "Create a fine-grained PAT with repo read access.",
|
|
createdByAgentId: null,
|
|
createdByUserId: "user-board",
|
|
updatedByAgentId: null,
|
|
updatedByUserId: "user-board",
|
|
deletedAt: null,
|
|
createdAt: new Date("2026-06-01T00:00:00.000Z"),
|
|
updatedAt: new Date("2026-06-02T00:00:00.000Z"),
|
|
},
|
|
{
|
|
id: "def-storybook-openai",
|
|
companyId: COMPANY_ID,
|
|
key: "USER_OPENAI_API_KEY",
|
|
name: "User OpenAI API key",
|
|
description: "Each member bills agent experiments to their own account.",
|
|
status: "active",
|
|
provider: "local_encrypted",
|
|
managedMode: "paperclip_managed",
|
|
providerConfigId: null,
|
|
providerMetadata: null,
|
|
usageGuidance: "Create a project-scoped OpenAI key.",
|
|
createdByAgentId: null,
|
|
createdByUserId: "user-board",
|
|
updatedByAgentId: null,
|
|
updatedByUserId: "user-board",
|
|
deletedAt: null,
|
|
createdAt: new Date("2026-06-03T00:00:00.000Z"),
|
|
updatedAt: new Date("2026-06-04T00:00:00.000Z"),
|
|
},
|
|
];
|
|
|
|
const storybookUserSecretCoverage: Record<string, UserSecretCoverageSummary> = {
|
|
"def-storybook-github": {
|
|
definitionId: "def-storybook-github",
|
|
configuredCount: 5,
|
|
missingCount: 2,
|
|
inactiveCount: 0,
|
|
},
|
|
"def-storybook-openai": {
|
|
definitionId: "def-storybook-openai",
|
|
configuredCount: 7,
|
|
missingCount: 0,
|
|
inactiveCount: 0,
|
|
},
|
|
};
|
|
|
|
// 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.secrets.list(COMPANY_ID), storybookSecrets);
|
|
queryClient.setQueryData(
|
|
queryKeys.secrets.userDefinitions(COMPANY_ID),
|
|
storybookUserSecretDefinitions,
|
|
);
|
|
queryClient.setQueryData(
|
|
queryKeys.secrets.myUserSecrets(COMPANY_ID),
|
|
storybookUserSecretDefinitions.map((definition) => ({ definition, secret: null })),
|
|
);
|
|
for (const [definitionId, summary] of Object.entries(storybookUserSecretCoverage)) {
|
|
queryClient.setQueryData(
|
|
queryKeys.secrets.userDefinitionCoverage(COMPANY_ID, definitionId),
|
|
summary,
|
|
);
|
|
}
|
|
|
|
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>
|
|
<EnvironmentVariablesEditor
|
|
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>
|
|
),
|
|
};
|