mirror of
https://github.com/alkimake/paperclip.git
synced 2026-06-20 20:40:38 +09:00
[codex] add comprehensive UI Storybook coverage (#4132)
## Thinking Path > - Paperclip orchestrates AI agents for zero-human companies. > - The board UI is the main operator surface, so its component and workflow coverage needs to stay reviewable as the product grows. > - This branch adds Storybook as a dedicated UI reference surface for core Paperclip screens and interaction patterns. > - That work spans Storybook infrastructure, app-level provider wiring, and a large fixture set that can render real control-plane states without a live backend. > - The branch also expands coverage across agents, budgets, issues, chat, dialogs, navigation, projects, and data visualization so future UI changes have a concrete visual baseline. > - This pull request packages that Storybook work on top of the latest `master`, excludes the lockfile from the final diff per repo policy, and fixes one fixture contract drift caught during verification. > - The benefit is a single reviewable PR that adds broad UI documentation and regression-surfacing coverage without losing the existing branch work. ## What Changed - Added Storybook 10 wiring for the UI package, including root scripts, UI package scripts, Storybook config, preview wrappers, Tailwind entrypoints, and setup docs. - Added a large fixture-backed data source for Storybook so complex board states can render without a live server. - Added story suites covering foundations, status language, control-plane surfaces, overview, UX labs, agent management, budget and finance, forms and editors, issue management, navigation and layout, chat and comments, data visualization, dialogs and modals, and projects/goals/workspaces. - Adjusted several UI components for Storybook parity so dialogs, menus, keyboard shortcuts, budget markers, markdown editing, and related surfaces render correctly in isolation. - Rebasing work for PR assembly: replayed the branch onto current `master`, removed `pnpm-lock.yaml` from the final PR diff, and aligned the dashboard fixture with the current `DashboardSummary.runActivity` API contract. ## Verification - `pnpm --filter @paperclipai/ui typecheck` - `pnpm --filter @paperclipai/ui build-storybook` - Manual diff audit after rebase: verified the PR no longer includes `pnpm-lock.yaml` and now cleanly targets current `master`. - Before/after UI note: before this branch there was no dedicated Storybook surface for these Paperclip views; after this branch the local Storybook build includes the new overview and domain story suites in `ui/storybook-static`. ## Risks - Large static fixture files can drift from shared types as dashboard and UI contracts evolve; this PR already needed one fixture correction for `runActivity`. - Storybook bundle output includes some large chunks, so future growth may need chunking work if build performance becomes an issue. - Several component tweaks were made for isolated rendering parity, so reviewers should spot-check key board surfaces against the live app behavior. ## Model Used - OpenAI Codex, GPT-5-based coding agent in the Paperclip harness; exact serving model ID is not exposed in-runtime to the agent. - Tool-assisted workflow with terminal execution, git operations, local typecheck/build verification, and GitHub CLI PR creation. - Context window/reasoning mode not surfaced by the harness. ## 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 - [x] I have run tests locally and they pass - [x] I have added or updated tests where applicable - [ ] 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>
This commit is contained in:
Dotta
GitHub
parent
7a329fb8bb
commit
2de893f624
33 changed files with 8893 additions and 53 deletions
601
ui/storybook/stories/issue-management.stories.tsx
Normal file
601
ui/storybook/stories/issue-management.stories.tsx
Normal file
|
|
@ -0,0 +1,601 @@
|
|||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import type { Meta, StoryObj } from "@storybook/react-vite";
|
||||
import type { Issue } from "@paperclipai/shared";
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import {
|
||||
ArrowDownAZ,
|
||||
ArrowUpDown,
|
||||
Check,
|
||||
Columns3,
|
||||
Filter,
|
||||
GitBranch,
|
||||
LayoutList,
|
||||
Link2,
|
||||
PanelRight,
|
||||
Rows3,
|
||||
} from "lucide-react";
|
||||
import { IssueColumnPicker, InboxIssueMetaLeading, InboxIssueTrailingColumns } from "@/components/IssueColumns";
|
||||
import { IssueContinuationHandoff } from "@/components/IssueContinuationHandoff";
|
||||
import { IssueDocumentsSection } from "@/components/IssueDocumentsSection";
|
||||
import { IssueFiltersPopover } from "@/components/IssueFiltersPopover";
|
||||
import { IssueGroupHeader } from "@/components/IssueGroupHeader";
|
||||
import { IssueLinkQuicklook, IssueQuicklookCard } from "@/components/IssueLinkQuicklook";
|
||||
import { IssueProperties } from "@/components/IssueProperties";
|
||||
import { IssueRunLedgerContent } from "@/components/IssueRunLedger";
|
||||
import { IssuesList } from "@/components/IssuesList";
|
||||
import { IssuesQuicklook } from "@/components/IssuesQuicklook";
|
||||
import { IssueWorkspaceCard } from "@/components/IssueWorkspaceCard";
|
||||
import { Identity } from "@/components/Identity";
|
||||
import { PriorityIcon } from "@/components/PriorityIcon";
|
||||
import { StatusBadge } from "@/components/StatusBadge";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { countActiveIssueFilters, defaultIssueFilterState, type IssueFilterState } from "@/lib/issue-filters";
|
||||
import { DEFAULT_INBOX_ISSUE_COLUMNS, type InboxIssueColumn } from "@/lib/inbox";
|
||||
import { queryKeys } from "@/lib/queryKeys";
|
||||
import {
|
||||
storybookAgentMap,
|
||||
storybookAgents,
|
||||
storybookAuthSession,
|
||||
storybookCompanies,
|
||||
storybookContinuationHandoff,
|
||||
storybookExecutionWorkspaces,
|
||||
storybookIssueDocuments,
|
||||
storybookIssueLabels,
|
||||
storybookIssueRuns,
|
||||
storybookIssues,
|
||||
storybookProjects,
|
||||
} from "../fixtures/paperclipData";
|
||||
|
||||
const companyId = "company-storybook";
|
||||
const issueListViewKey = "storybook:issue-management:list";
|
||||
const scopedIssueListViewKey = `${issueListViewKey}:${companyId}`;
|
||||
const visibleColumns: InboxIssueColumn[] = ["status", "id", "assignee", "project", "workspace", "labels", "updated"];
|
||||
|
||||
const issueDocumentSummaries = storybookIssueDocuments.map(({ body: _body, ...summary }) => summary);
|
||||
const primaryIssue: Issue = {
|
||||
...storybookIssues[0]!,
|
||||
planDocument: storybookIssueDocuments.find((document) => document.key === "plan") ?? null,
|
||||
documentSummaries: issueDocumentSummaries,
|
||||
currentExecutionWorkspace: storybookExecutionWorkspaces[0]!,
|
||||
};
|
||||
const childIssues = storybookIssues.filter((issue) => issue.parentId === primaryIssue.id);
|
||||
|
||||
function Section({
|
||||
eyebrow,
|
||||
title,
|
||||
children,
|
||||
}: {
|
||||
eyebrow: string;
|
||||
title: string;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<section className="paperclip-story__frame overflow-hidden">
|
||||
<div className="border-b border-border px-5 py-4">
|
||||
<div className="paperclip-story__label">{eyebrow}</div>
|
||||
<h2 className="mt-1 text-xl font-semibold">{title}</h2>
|
||||
</div>
|
||||
<div className="p-5">{children}</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function hydrateStorybookQueries(queryClient: ReturnType<typeof useQueryClient>) {
|
||||
queryClient.setQueryData(queryKeys.companies.all, storybookCompanies);
|
||||
queryClient.setQueryData(queryKeys.auth.session, storybookAuthSession);
|
||||
queryClient.setQueryData(queryKeys.agents.list(companyId), storybookAgents);
|
||||
queryClient.setQueryData(queryKeys.projects.list(companyId), storybookProjects);
|
||||
queryClient.setQueryData(queryKeys.issues.list(companyId), storybookIssues);
|
||||
queryClient.setQueryData(queryKeys.issues.labels(companyId), storybookIssueLabels);
|
||||
queryClient.setQueryData(queryKeys.issues.documents(primaryIssue.id), storybookIssueDocuments);
|
||||
queryClient.setQueryData(queryKeys.issues.runs(primaryIssue.id), storybookIssueRuns);
|
||||
queryClient.setQueryData(queryKeys.issues.liveRuns(primaryIssue.id), []);
|
||||
queryClient.setQueryData(queryKeys.issues.activeRun(primaryIssue.id), null);
|
||||
queryClient.setQueryData(queryKeys.instance.experimentalSettings, {
|
||||
enableIsolatedWorkspaces: true,
|
||||
enableRoutineTriggers: true,
|
||||
});
|
||||
queryClient.setQueryData(queryKeys.access.companyUserDirectory(companyId), {
|
||||
users: [
|
||||
{
|
||||
principalId: "user-board",
|
||||
status: "active",
|
||||
user: {
|
||||
id: "user-board",
|
||||
email: "riley@paperclip.local",
|
||||
name: "Riley Board",
|
||||
image: null,
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
queryClient.setQueryData(
|
||||
queryKeys.sidebarPreferences.projectOrder(companyId, storybookAuthSession.user.id),
|
||||
{ orderedIds: storybookProjects.map((project) => project.id), updatedAt: null },
|
||||
);
|
||||
queryClient.setQueryData(
|
||||
queryKeys.executionWorkspaces.summaryList(companyId),
|
||||
storybookExecutionWorkspaces.map((workspace) => ({
|
||||
id: workspace.id,
|
||||
name: workspace.name,
|
||||
mode: workspace.mode,
|
||||
projectWorkspaceId: workspace.projectWorkspaceId,
|
||||
})),
|
||||
);
|
||||
queryClient.setQueryData(
|
||||
queryKeys.executionWorkspaces.list(companyId, {
|
||||
projectId: primaryIssue.projectId ?? undefined,
|
||||
projectWorkspaceId: primaryIssue.projectWorkspaceId ?? undefined,
|
||||
reuseEligible: true,
|
||||
}),
|
||||
storybookExecutionWorkspaces,
|
||||
);
|
||||
}
|
||||
|
||||
function seedIssueListLocalStorage() {
|
||||
if (typeof window === "undefined") return;
|
||||
window.localStorage.setItem(
|
||||
scopedIssueListViewKey,
|
||||
JSON.stringify({
|
||||
...defaultIssueFilterState,
|
||||
sortField: "priority",
|
||||
sortDir: "desc",
|
||||
groupBy: "status",
|
||||
viewMode: "list",
|
||||
nestingEnabled: true,
|
||||
collapsedGroups: [],
|
||||
collapsedParents: [],
|
||||
}),
|
||||
);
|
||||
window.localStorage.setItem(`${scopedIssueListViewKey}:issue-columns`, JSON.stringify(visibleColumns));
|
||||
}
|
||||
|
||||
function StorybookData({ children }: { children: React.ReactNode }) {
|
||||
const queryClient = useQueryClient();
|
||||
const [ready] = useState(() => {
|
||||
hydrateStorybookQueries(queryClient);
|
||||
seedIssueListLocalStorage();
|
||||
return true;
|
||||
});
|
||||
|
||||
return ready ? children : null;
|
||||
}
|
||||
|
||||
function ColumnConfigurationMatrix() {
|
||||
const [columns, setColumns] = useState<InboxIssueColumn[]>(visibleColumns);
|
||||
const visibleColumnSet = useMemo(() => new Set(columns), [columns]);
|
||||
const triggerRef = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const timer = window.setTimeout(() => {
|
||||
triggerRef.current?.querySelector("button")?.click();
|
||||
}, 150);
|
||||
return () => window.clearTimeout(timer);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="grid gap-5 lg:grid-cols-[minmax(0,1fr)_340px]">
|
||||
<div className="overflow-hidden rounded-lg border border-border bg-background/70">
|
||||
<div className="grid grid-cols-[minmax(0,1fr)_minmax(420px,0.9fr)] items-center border-b border-border px-4 py-2 text-[11px] font-semibold uppercase text-muted-foreground">
|
||||
<span>Issue</span>
|
||||
<span className="grid grid-cols-[6rem_7rem_9rem_6rem_4.5rem] gap-2">
|
||||
<span>Assignee</span>
|
||||
<span>Project</span>
|
||||
<span>Workspace</span>
|
||||
<span>Tags</span>
|
||||
<span className="text-right">Updated</span>
|
||||
</span>
|
||||
</div>
|
||||
{storybookIssues.slice(0, 3).map((issue) => (
|
||||
<div key={issue.id} className="grid grid-cols-[minmax(0,1fr)_minmax(420px,0.9fr)] items-center border-b border-border/60 px-4 py-3 last:border-b-0">
|
||||
<div className="flex min-w-0 items-center gap-2">
|
||||
<InboxIssueMetaLeading
|
||||
issue={issue}
|
||||
isLive={issue.id === primaryIssue.id}
|
||||
showStatus={visibleColumnSet.has("status")}
|
||||
showIdentifier={visibleColumnSet.has("id")}
|
||||
/>
|
||||
<span className="truncate text-sm font-medium">{issue.title}</span>
|
||||
</div>
|
||||
<InboxIssueTrailingColumns
|
||||
issue={issue}
|
||||
columns={columns.filter((column) => !["status", "id"].includes(column))}
|
||||
projectName={storybookProjects.find((project) => project.id === issue.projectId)?.name ?? null}
|
||||
projectColor={storybookProjects.find((project) => project.id === issue.projectId)?.color ?? null}
|
||||
workspaceId={issue.projectWorkspaceId ?? issue.executionWorkspaceId}
|
||||
workspaceName={issue.currentExecutionWorkspace?.name ?? "Board UI"}
|
||||
assigneeName={issue.assigneeAgentId ? storybookAgentMap.get(issue.assigneeAgentId)?.name ?? null : null}
|
||||
assigneeUserName={issue.assigneeUserId ? "Riley Board" : null}
|
||||
currentUserId="user-board"
|
||||
parentIdentifier={storybookIssues.find((candidate) => candidate.id === issue.parentId)?.identifier ?? null}
|
||||
parentTitle={storybookIssues.find((candidate) => candidate.id === issue.parentId)?.title ?? null}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<Card className="shadow-none">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Columns3 className="h-4 w-4" />
|
||||
Column configuration
|
||||
</CardTitle>
|
||||
<CardDescription>Open picker plus sort state tokens used beside issue rows.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div ref={triggerRef}>
|
||||
<IssueColumnPicker
|
||||
availableColumns={["status", "id", "assignee", "project", "workspace", "parent", "labels", "updated"]}
|
||||
visibleColumnSet={visibleColumnSet}
|
||||
onToggleColumn={(column, enabled) => {
|
||||
setColumns((current) => {
|
||||
const next = enabled ? [...current, column] : current.filter((value) => value !== column);
|
||||
return DEFAULT_INBOX_ISSUE_COLUMNS.filter((candidate) => next.includes(candidate)).concat(
|
||||
next.filter((candidate) => !DEFAULT_INBOX_ISSUE_COLUMNS.includes(candidate)),
|
||||
);
|
||||
});
|
||||
}}
|
||||
onResetColumns={() => setColumns(DEFAULT_INBOX_ISSUE_COLUMNS)}
|
||||
title="Choose which issue columns stay visible"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
{[
|
||||
{ label: "Priority", icon: ArrowUpDown, state: "descending" },
|
||||
{ label: "Title", icon: ArrowDownAZ, state: "ascending" },
|
||||
{ label: "Updated", icon: Check, state: "active default" },
|
||||
].map((item) => {
|
||||
const Icon = item.icon;
|
||||
return (
|
||||
<div key={item.label} className="flex items-center justify-between rounded-md border border-border bg-background/70 px-3 py-2 text-sm">
|
||||
<span className="flex items-center gap-2">
|
||||
<Icon className="h-3.5 w-3.5 text-muted-foreground" />
|
||||
{item.label}
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground">{item.state}</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function GroupHeaderMatrix() {
|
||||
const rows = [
|
||||
{ label: "In progress", trailing: "1 issue", badge: <StatusBadge status="in_progress" /> },
|
||||
{ label: "High priority", trailing: "3 issues", badge: <PriorityIcon priority="high" showLabel /> },
|
||||
{ label: "CodexCoder", trailing: "3 assigned", badge: <Identity name="CodexCoder" size="sm" /> },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
{rows.map((row, index) => (
|
||||
<div key={row.label} className="rounded-lg border border-border bg-background/70 p-2">
|
||||
<IssueGroupHeader
|
||||
label={row.label}
|
||||
collapsible
|
||||
collapsed={index === 1}
|
||||
trailing={<span className="text-xs text-muted-foreground">{row.trailing}</span>}
|
||||
/>
|
||||
<div className="border-t border-border px-3 py-4">{row.badge}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function OpenFiltersPopover() {
|
||||
const [state, setState] = useState<IssueFilterState>({
|
||||
...defaultIssueFilterState,
|
||||
statuses: ["in_progress", "blocked", "in_review"],
|
||||
priorities: ["critical", "high"],
|
||||
assignees: ["agent-codex", "agent-qa", "__unassigned"],
|
||||
});
|
||||
const triggerRef = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const timer = window.setTimeout(() => {
|
||||
triggerRef.current?.querySelector("button")?.click();
|
||||
}, 150);
|
||||
return () => window.clearTimeout(timer);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="flex min-h-[500px] items-start justify-end rounded-lg border border-dashed border-border bg-background/60 p-4">
|
||||
<div ref={triggerRef}>
|
||||
<IssueFiltersPopover
|
||||
state={state}
|
||||
onChange={(patch) => setState((current) => ({ ...current, ...patch }))}
|
||||
activeFilterCount={countActiveIssueFilters(state, true)}
|
||||
agents={storybookAgents.map((agent) => ({ id: agent.id, name: agent.name }))}
|
||||
projects={storybookProjects.map((project) => ({ id: project.id, name: project.name }))}
|
||||
labels={storybookIssueLabels.map((label) => ({ id: label.id, name: label.name, color: label.color }))}
|
||||
currentUserId="user-board"
|
||||
enableRoutineVisibilityFilter
|
||||
buttonVariant="outline"
|
||||
workspaces={storybookExecutionWorkspaces.map((workspace) => ({ id: workspace.id, name: workspace.name }))}
|
||||
creators={[
|
||||
{ id: "user:user-board", label: "Riley Board", kind: "user", searchText: "board user human" },
|
||||
...storybookAgents.map((agent) => ({
|
||||
id: `agent:${agent.id}`,
|
||||
label: agent.name,
|
||||
kind: "agent" as const,
|
||||
searchText: `${agent.name} ${agent.role}`,
|
||||
})),
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function RunLedgerWithCostColumns() {
|
||||
return (
|
||||
<div className="grid gap-5 xl:grid-cols-[minmax(0,1fr)_380px]">
|
||||
<IssueRunLedgerContent
|
||||
runs={storybookIssueRuns}
|
||||
activeRun={null}
|
||||
liveRuns={[]}
|
||||
issueStatus={primaryIssue.status}
|
||||
childIssues={childIssues}
|
||||
agentMap={storybookAgentMap}
|
||||
/>
|
||||
<div className="overflow-hidden rounded-lg border border-border bg-background/70">
|
||||
<div className="grid grid-cols-[1fr_90px_80px_70px] gap-2 border-b border-border px-3 py-2 text-[11px] font-semibold uppercase text-muted-foreground">
|
||||
<span>Run</span>
|
||||
<span>Status</span>
|
||||
<span>Duration</span>
|
||||
<span className="text-right">Cost</span>
|
||||
</div>
|
||||
{storybookIssueRuns.map((run) => {
|
||||
const start = run.startedAt ? new Date(run.startedAt).getTime() : null;
|
||||
const end = run.finishedAt ? new Date(run.finishedAt).getTime() : Date.now();
|
||||
const minutes = start ? Math.max(1, Math.round((end - start) / 60_000)) : null;
|
||||
const costCents = typeof run.usageJson?.costCents === "number" ? run.usageJson.costCents : 0;
|
||||
return (
|
||||
<div key={run.runId} className="grid grid-cols-[1fr_90px_80px_70px] gap-2 border-b border-border/60 px-3 py-2 text-xs last:border-b-0">
|
||||
<span className="min-w-0 truncate font-mono">{run.runId}</span>
|
||||
<span className="capitalize text-muted-foreground">{run.status}</span>
|
||||
<span className="text-muted-foreground">{minutes ? `${minutes}m` : "unknown"}</span>
|
||||
<span className="text-right font-mono">${(costCents / 100).toFixed(2)}</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function WorkspaceCardWithRuntime() {
|
||||
const service = primaryIssue.currentExecutionWorkspace?.runtimeServices?.[0] ?? null;
|
||||
|
||||
return (
|
||||
<div className="grid gap-5 lg:grid-cols-[minmax(0,1fr)_360px]">
|
||||
<IssueWorkspaceCard
|
||||
issue={primaryIssue}
|
||||
project={storybookProjects[0]!}
|
||||
onUpdate={() => undefined}
|
||||
/>
|
||||
<Card className="shadow-none">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<GitBranch className="h-4 w-4" />
|
||||
Runtime status
|
||||
</CardTitle>
|
||||
<CardDescription>Branch, path, and running service context paired with the workspace card.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3 text-sm">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<span className="text-muted-foreground">Branch</span>
|
||||
<span className="truncate font-mono text-xs">{primaryIssue.currentExecutionWorkspace?.branchName}</span>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<span className="text-muted-foreground">Path</span>
|
||||
<div className="break-all rounded-md border border-border bg-background/70 p-2 font-mono text-xs">
|
||||
{primaryIssue.currentExecutionWorkspace?.cwd}
|
||||
</div>
|
||||
</div>
|
||||
{service ? (
|
||||
<div className="flex items-center justify-between gap-3 rounded-md border border-border bg-background/70 px-3 py-2">
|
||||
<span>{service.serviceName}</span>
|
||||
<Badge variant="outline">{service.status}</Badge>
|
||||
</div>
|
||||
) : null}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function QuicklookSurfaces() {
|
||||
return (
|
||||
<div className="grid gap-5 lg:grid-cols-2">
|
||||
<div className="rounded-lg border border-border bg-background/70 p-4">
|
||||
<div className="mb-3 flex items-center gap-2 text-sm font-medium">
|
||||
<Link2 className="h-4 w-4 text-muted-foreground" />
|
||||
IssueLinkQuicklook
|
||||
</div>
|
||||
<IssueLinkQuicklook
|
||||
issuePathId={primaryIssue.identifier ?? primaryIssue.id}
|
||||
issuePrefetch={primaryIssue}
|
||||
to={`/PAP/issues/${primaryIssue.identifier}`}
|
||||
className="font-mono text-sm text-primary hover:underline"
|
||||
>
|
||||
{primaryIssue.identifier}
|
||||
</IssueLinkQuicklook>
|
||||
<div className="mt-4 rounded-md border border-border bg-popover p-3 shadow-xl">
|
||||
<IssueQuicklookCard
|
||||
issue={primaryIssue}
|
||||
linkTo={`/PAP/issues/${primaryIssue.identifier}`}
|
||||
compact
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg border border-border bg-background/70 p-4">
|
||||
<div className="mb-3 flex items-center gap-2 text-sm font-medium">
|
||||
<PanelRight className="h-4 w-4 text-muted-foreground" />
|
||||
IssuesQuicklook
|
||||
</div>
|
||||
<IssuesQuicklook issue={storybookIssues[2]!}>
|
||||
<Button variant="outline" size="sm">Hover preview trigger</Button>
|
||||
</IssuesQuicklook>
|
||||
<div className="mt-4 rounded-md border border-border bg-card p-3">
|
||||
<IssueQuicklookCard
|
||||
issue={storybookIssues[2]!}
|
||||
linkTo={`/PAP/issues/${storybookIssues[2]!.identifier}`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function IssueManagementStories() {
|
||||
return (
|
||||
<StorybookData>
|
||||
<div className="paperclip-story">
|
||||
<main className="paperclip-story__inner space-y-6">
|
||||
<section className="paperclip-story__frame p-6">
|
||||
<div className="flex flex-wrap items-start justify-between gap-5">
|
||||
<div>
|
||||
<div className="paperclip-story__label">Issue management</div>
|
||||
<h1 className="mt-2 text-3xl font-semibold tracking-tight">List, detail, filters, runs, and workspace states</h1>
|
||||
<p className="mt-3 max-w-3xl text-sm leading-6 text-muted-foreground">
|
||||
Fixture-backed issue management stories cover the operational states used by the board when reviewing,
|
||||
filtering, handing off, and continuing agent work.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Badge variant="outline">7 issues</Badge>
|
||||
<Badge variant="outline">3 agents</Badge>
|
||||
<Badge variant="outline">workspace aware</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Section eyebrow="IssuesList" title="Full list view with grouped issue rows and column headers">
|
||||
<div className="mb-3 grid grid-cols-[minmax(0,1fr)_120px_120px_110px] gap-3 rounded-lg border border-border bg-background/70 px-4 py-2 text-[11px] font-semibold uppercase text-muted-foreground">
|
||||
<span>Issue</span>
|
||||
<span>Assignee</span>
|
||||
<span>Workspace</span>
|
||||
<span className="text-right">Updated</span>
|
||||
</div>
|
||||
<IssuesList
|
||||
issues={storybookIssues}
|
||||
agents={storybookAgents}
|
||||
projects={storybookProjects}
|
||||
liveIssueIds={new Set([primaryIssue.id])}
|
||||
viewStateKey={issueListViewKey}
|
||||
onUpdateIssue={() => undefined}
|
||||
createIssueLabel="issue"
|
||||
enableRoutineVisibilityFilter
|
||||
/>
|
||||
</Section>
|
||||
|
||||
<Section eyebrow="IssueColumns" title="Column configuration and sorting states">
|
||||
<ColumnConfigurationMatrix />
|
||||
</Section>
|
||||
|
||||
<Section eyebrow="IssueGroupHeader" title="Grouped by status, priority, and assignee">
|
||||
<GroupHeaderMatrix />
|
||||
</Section>
|
||||
|
||||
<Section eyebrow="IssueProperties" title="Full issue detail sidebar with all property fields">
|
||||
<div className="grid gap-5 lg:grid-cols-[minmax(0,1fr)_380px]">
|
||||
<div className="space-y-4 rounded-lg border border-border bg-background/70 p-5">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<StatusBadge status={primaryIssue.status} />
|
||||
<PriorityIcon priority={primaryIssue.priority} showLabel />
|
||||
<Badge variant="secondary">{primaryIssue.identifier}</Badge>
|
||||
</div>
|
||||
<h3 className="text-2xl font-semibold tracking-tight">{primaryIssue.title}</h3>
|
||||
<p className="max-w-2xl text-sm leading-6 text-muted-foreground">{primaryIssue.description}</p>
|
||||
</div>
|
||||
<div className="rounded-lg border border-border bg-background/70 p-4">
|
||||
<IssueProperties
|
||||
issue={primaryIssue}
|
||||
childIssues={childIssues}
|
||||
onAddSubIssue={() => undefined}
|
||||
onUpdate={() => undefined}
|
||||
inline
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<Section eyebrow="IssueDocumentsSection" title="Documents list with plan and notes documents">
|
||||
<IssueDocumentsSection
|
||||
issue={primaryIssue}
|
||||
canDeleteDocuments
|
||||
feedbackDataSharingPreference="allowed"
|
||||
/>
|
||||
</Section>
|
||||
|
||||
<Section eyebrow="IssueFiltersPopover" title="Open filter popover with status, priority, and assignee filters">
|
||||
<OpenFiltersPopover />
|
||||
</Section>
|
||||
|
||||
<Section eyebrow="IssueContinuationHandoff" title="Expanded handoff for continuing work across runs">
|
||||
<IssueContinuationHandoff document={storybookContinuationHandoff} focusSignal={1} />
|
||||
</Section>
|
||||
|
||||
<Section eyebrow="IssueRunLedger" title="Run history table with status, duration, and cost columns">
|
||||
<RunLedgerWithCostColumns />
|
||||
</Section>
|
||||
|
||||
<Section eyebrow="IssueWorkspaceCard" title="Workspace info card with branch, path, and runtime status">
|
||||
<WorkspaceCardWithRuntime />
|
||||
</Section>
|
||||
|
||||
<Section eyebrow="Quicklook" title="Linked issue popup and side-panel quick look">
|
||||
<QuicklookSurfaces />
|
||||
</Section>
|
||||
|
||||
<section className="grid gap-4 md:grid-cols-3">
|
||||
{[
|
||||
{ icon: LayoutList, label: "List density", detail: "Grouped rows keep status and ownership visible." },
|
||||
{ icon: Filter, label: "Filtering", detail: "Selected filters are explicit and clearable." },
|
||||
{ icon: Rows3, label: "Detail panels", detail: "Properties, documents, runs, and workspaces stay close to the task." },
|
||||
].map((item) => {
|
||||
const Icon = item.icon;
|
||||
return (
|
||||
<Card key={item.label} className="paperclip-story__frame shadow-none">
|
||||
<CardHeader>
|
||||
<Icon className="h-4 w-4 text-muted-foreground" />
|
||||
<CardTitle>{item.label}</CardTitle>
|
||||
<CardDescription>{item.detail}</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</StorybookData>
|
||||
);
|
||||
}
|
||||
|
||||
const meta = {
|
||||
title: "Product/Issue Management",
|
||||
component: IssueManagementStories,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
"Issue-management stories exercise the full list, column, grouping, property, document, filter, continuation, run, workspace, and quicklook surfaces.",
|
||||
},
|
||||
},
|
||||
},
|
||||
} satisfies Meta<typeof IssueManagementStories>;
|
||||
|
||||
export default meta;
|
||||
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const FullSurfaceMatrix: Story = {};
|
||||
Loading…
Add table
Add a link
Reference in a new issue