paperclip/ui/src/components
Dotta 2de893f624
[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>
2026-04-20 12:13:23 -05:00
..
access feat: implement multi-user access and invite flows (#3784) 2026-04-17 09:44:19 -05:00
transcript [codex] Harden dashboard run activity charts (#4126) 2026-04-20 10:34:21 -05:00
ui [codex] Polish issue and operator workflow UI (#4090) 2026-04-20 06:16:41 -05:00
AccountingModelCard.tsx feat(costs): add billing, quota, and budget control plane 2026-03-16 15:11:01 -05:00
ActiveAgentsPanel.tsx [codex] Harden dashboard run activity charts (#4126) 2026-04-20 10:34:21 -05:00
ActivityCharts.test.tsx [codex] Harden dashboard run activity charts (#4126) 2026-04-20 10:34:21 -05:00
ActivityCharts.tsx [codex] Harden dashboard run activity charts (#4126) 2026-04-20 10:34:21 -05:00
ActivityRow.tsx feat: implement multi-user access and invite flows (#3784) 2026-04-17 09:44:19 -05:00
agent-config-defaults.ts feat(codex-local): add fast mode support 2026-04-11 08:21:55 -05:00
agent-config-primitives.tsx feat: implement multi-user access and invite flows (#3784) 2026-04-17 09:44:19 -05:00
AgentActionButtons.tsx Redesign routines UI to match issue page design language 2026-03-19 15:05:32 -05:00
AgentConfigForm.tsx [codex] Improve agent runtime recovery and governance (#4086) 2026-04-20 06:19:48 -05:00
AgentIconPicker.tsx Fix markdown mention chips 2026-03-23 16:57:27 -05:00
AgentProperties.tsx feat: polish inbox and issue list workflows 2026-04-10 22:26:21 -05:00
ApprovalCard.tsx Polish board approval card styling 2026-04-06 21:24:44 -05:00
ApprovalPayload.test.tsx Polish board approval card styling 2026-04-06 21:24:44 -05:00
ApprovalPayload.tsx Polish board approval card styling 2026-04-06 21:24:44 -05:00
AsciiArtAnimation.tsx feat(ui): reconcile backup UI changes with current routing and interaction features 2026-03-02 16:44:03 -06:00
BillerSpendCard.tsx feat(costs): add billing, quota, and budget control plane 2026-03-16 15:11:01 -05:00
BreadcrumbBar.tsx [codex] Improve issue detail and issue-list UX (#3678) 2026-04-14 12:50:48 -05:00
BudgetIncidentCard.tsx [codex] add comprehensive UI Storybook coverage (#4132) 2026-04-20 12:13:23 -05:00
BudgetPolicyCard.tsx Add budget tabs and sidebar budget indicators 2026-03-16 15:11:01 -05:00
BudgetSidebarMarker.tsx [codex] add comprehensive UI Storybook coverage (#4132) 2026-04-20 12:13:23 -05:00
ClaudeSubscriptionPanel.tsx feat(costs): add billing, quota, and budget control plane 2026-03-16 15:11:01 -05:00
CloudAccessGate.tsx feat: implement multi-user access and invite flows (#3784) 2026-04-17 09:44:19 -05:00
CodexSubscriptionPanel.tsx feat(costs): add billing, quota, and budget control plane 2026-03-16 15:11:01 -05:00
CommandPalette.test.tsx Broaden comment matches in issue search 2026-04-11 08:26:09 -05:00
CommandPalette.tsx Broaden comment matches in issue search 2026-04-11 08:26:09 -05:00
CommentThread.test.tsx [codex] Improve issue detail and issue-list UX (#3678) 2026-04-14 12:50:48 -05:00
CommentThread.tsx [codex] Improve issue detail and issue-list UX (#3678) 2026-04-14 12:50:48 -05:00
CompanyPatternIcon.tsx feat: implement multi-user access and invite flows (#3784) 2026-04-17 09:44:19 -05:00
CompanyRail.tsx [codex] Improve workspace runtime and navigation ergonomics (#3680) 2026-04-14 12:57:11 -05:00
CompanySettingsSidebar.test.tsx feat: implement multi-user access and invite flows (#3784) 2026-04-17 09:44:19 -05:00
CompanySettingsSidebar.tsx feat: implement multi-user access and invite flows (#3784) 2026-04-17 09:44:19 -05:00
CompanySwitcher.tsx [codex] add comprehensive UI Storybook coverage (#4132) 2026-04-20 12:13:23 -05:00
CopyText.tsx [codex] Improve workspace navigation and runtime UI (#4089) 2026-04-20 06:14:32 -05:00
DevRestartBanner.tsx fix: address greptile follow-up feedback 2026-03-20 13:18:29 -05:00
DocumentDiffModal.tsx refactor(ui): inline document diff rendering 2026-04-06 21:43:19 -05:00
EmptyState.tsx Polish UI components and rework AgentConfigForm 2026-02-18 10:43:25 -06:00
EntityRow.tsx feat(ui): reconcile backup UI changes with current routing and interaction features 2026-03-02 16:44:03 -06:00
EnvVarEditor.tsx Add project-level environment variables 2026-04-06 21:23:30 -05:00
ExecutionParticipantPicker.tsx feat: implement multi-user access and invite flows (#3784) 2026-04-17 09:44:19 -05:00
ExecutionWorkspaceCloseDialog.tsx [codex] Respect manual workspace runtime controls (#4125) 2026-04-20 10:39:37 -05:00
FilterBar.tsx Add shared UI primitives, contexts, and reusable components 2026-02-17 09:57:00 -06:00
FinanceBillerCard.tsx feat(costs): add billing, quota, and budget control plane 2026-03-16 15:11:01 -05:00
FinanceKindCard.tsx feat(costs): add billing, quota, and budget control plane 2026-03-16 15:11:01 -05:00
FinanceTimelineCard.tsx feat(costs): add billing, quota, and budget control plane 2026-03-16 15:11:01 -05:00
GoalProperties.tsx feat: polish inbox and issue list workflows 2026-04-10 22:26:21 -05:00
GoalTree.tsx fix(ui): render sub-goals in goal detail tree 2026-03-04 20:20:21 -07:00
HermesIcon.tsx feat(hermes): upgrade hermes-paperclip-adapter + UI adapter + skills + detectModel 2026-03-28 01:34:48 +01:00
Identity.tsx Fix xs avatar alignment and dashboard task row layout 2026-02-20 11:35:59 -06:00
ImageGalleryModal.tsx fix(ui): polish issue detail timelines and attachments 2026-04-02 11:51:40 -05:00
InlineEditor.test.tsx [codex] harden authenticated routes and issue editor reliability (#3741) 2026-04-15 08:41:15 -05:00
InlineEditor.tsx [codex] harden authenticated routes and issue editor reliability (#3741) 2026-04-15 08:41:15 -05:00
InlineEntitySelector.tsx [codex] Polish issue and operator workflow UI (#4090) 2026-04-20 06:16:41 -05:00
InstanceSidebar.tsx feat: implement multi-user access and invite flows (#3784) 2026-04-17 09:44:19 -05:00
IssueChatThread.test.tsx [codex] Polish issue and operator workflow UI (#4090) 2026-04-20 06:16:41 -05:00
IssueChatThread.tsx [codex] Harden dashboard run activity charts (#4126) 2026-04-20 10:34:21 -05:00
IssueColumns.tsx feat: implement multi-user access and invite flows (#3784) 2026-04-17 09:44:19 -05:00
IssueContinuationHandoff.test.tsx [codex] Add run liveness continuations (#4083) 2026-04-20 06:01:49 -05:00
IssueContinuationHandoff.tsx [codex] Add run liveness continuations (#4083) 2026-04-20 06:01:49 -05:00
IssueDocumentsSection.test.tsx [codex] Add run liveness continuations (#4083) 2026-04-20 06:01:49 -05:00
IssueDocumentsSection.tsx [codex] Add run liveness continuations (#4083) 2026-04-20 06:01:49 -05:00
IssueFiltersPopover.test.tsx [codex] Improve workspace runtime and navigation ergonomics (#3680) 2026-04-14 12:57:11 -05:00
IssueFiltersPopover.tsx Sync/master post pap1497 followups 2026 04 15 (#3779) 2026-04-15 21:13:56 -05:00
IssueGroupHeader.tsx [codex] Improve workspace runtime and navigation ergonomics (#3680) 2026-04-14 12:57:11 -05:00
IssueLinkQuicklook.tsx [codex] harden authenticated routes and issue editor reliability (#3741) 2026-04-15 08:41:15 -05:00
IssueProperties.test.tsx [codex] Polish issue and operator workflow UI (#4090) 2026-04-20 06:16:41 -05:00
IssueProperties.tsx [codex] Polish issue and operator workflow UI (#4090) 2026-04-20 06:16:41 -05:00
IssueRow.test.tsx Speed up issue-to-issue navigation 2026-04-12 21:14:12 -05:00
IssueRow.tsx Speed up issue-to-issue navigation 2026-04-12 21:14:12 -05:00
IssueRunLedger.test.tsx [codex] Add run liveness continuations (#4083) 2026-04-20 06:01:49 -05:00
IssueRunLedger.tsx [codex] Add run liveness continuations (#4083) 2026-04-20 06:01:49 -05:00
IssuesList.test.tsx feat: implement multi-user access and invite flows (#3784) 2026-04-17 09:44:19 -05:00
IssuesList.tsx feat: implement multi-user access and invite flows (#3784) 2026-04-17 09:44:19 -05:00
IssuesQuicklook.tsx feat: polish inbox and issue list workflows 2026-04-10 22:26:21 -05:00
IssueWorkspaceCard.test.tsx Improve issue detail load stability 2026-04-09 06:21:14 -05:00
IssueWorkspaceCard.tsx [codex] Respect manual workspace runtime controls (#4125) 2026-04-20 10:39:37 -05:00
JsonSchemaForm.tsx Add plugin framework and settings UI 2026-03-13 16:22:34 -05:00
KanbanBoard.tsx feat: polish inbox and issue list workflows 2026-04-10 22:26:21 -05:00
KeyboardShortcutsCheatsheet.tsx [codex] add comprehensive UI Storybook coverage (#4132) 2026-04-20 12:13:23 -05:00
Layout.test.tsx feat: implement multi-user access and invite flows (#3784) 2026-04-17 09:44:19 -05:00
Layout.tsx feat: implement multi-user access and invite flows (#3784) 2026-04-17 09:44:19 -05:00
LiveRunWidget.tsx Refine issue workflow surfaces and live updates 2026-04-09 10:26:17 -05:00
MarkdownBody.test.tsx feat: implement multi-user access and invite flows (#3784) 2026-04-17 09:44:19 -05:00
MarkdownBody.tsx feat: implement multi-user access and invite flows (#3784) 2026-04-17 09:44:19 -05:00
MarkdownEditor.test.tsx [codex] harden authenticated routes and issue editor reliability (#3741) 2026-04-15 08:41:15 -05:00
MarkdownEditor.tsx [codex] add comprehensive UI Storybook coverage (#4132) 2026-04-20 12:13:23 -05:00
MetricCard.tsx ui: apply interface polish from design article review 2026-03-11 08:20:24 -05:00
MobileBottomNav.tsx Refine issue workflow surfaces and live updates 2026-04-09 10:26:17 -05:00
NewAgentDialog.tsx feat(adapters): external adapter plugin system with dynamic UI parser 2026-04-03 21:11:20 +01:00
NewGoalDialog.tsx fix(ui): make goal description area scrollable in create dialog 2026-04-03 23:19:50 +09:00
NewIssueDialog.test.tsx [codex] Harden execution reliability and heartbeat tooling (#3679) 2026-04-14 13:34:52 -05:00
NewIssueDialog.tsx [codex] Polish issue and operator workflow UI (#4090) 2026-04-20 06:16:41 -05:00
NewProjectDialog.tsx feat: implement multi-user access and invite flows (#3784) 2026-04-17 09:44:19 -05:00
OnboardingWizard.tsx Harden API route authorization boundaries (#4122) 2026-04-20 10:56:48 -05:00
OpenCodeLogoIcon.tsx Add OpenCode provider integration and strict model selection 2026-03-05 15:24:20 +01:00
OutputFeedbackButtons.tsx Refine issue chat activity and message chrome 2026-04-08 06:02:34 -05:00
PackageFileTree.tsx [codex] Split reusable agent hiring templates (#4124) 2026-04-20 10:33:19 -05:00
PageSkeleton.tsx feat(ui): reconcile backup UI changes with current routing and interaction features 2026-03-02 16:44:03 -06:00
PageTabBar.tsx Refine project and agent configuration UI 2026-03-10 10:58:43 -05:00
PathInstructionsModal.tsx refactor(ui): extract ChoosePathButton into reusable PathInstructionsModal 2026-03-02 16:08:59 -06:00
PriorityIcon.tsx refactor(ui): standardize status/priority colors and improve text legibility 2026-02-23 19:52:43 -06:00
ProjectProperties.tsx feat: polish inbox and issue list workflows 2026-04-10 22:26:21 -05:00
ProjectWorkspacesContent.tsx [codex] Improve workspace navigation and runtime UI (#4089) 2026-04-20 06:14:32 -05:00
ProjectWorkspaceSummaryCard.test.tsx [codex] Improve workspace navigation and runtime UI (#4089) 2026-04-20 06:14:32 -05:00
ProjectWorkspaceSummaryCard.tsx [codex] Respect manual workspace runtime controls (#4125) 2026-04-20 10:39:37 -05:00
PropertiesPanel.tsx feat: polish inbox and issue list workflows 2026-04-10 22:26:21 -05:00
ProviderQuotaCard.tsx feat(costs): add billing, quota, and budget control plane 2026-03-16 15:11:01 -05:00
QuotaBar.tsx feat(ui): add resource and usage dashboard (/usage route) 2026-03-16 15:08:54 -05:00
ReportsToPicker.tsx refactor: improve layout and truncation in ReportsToPicker 2026-03-20 20:33:36 +00:00
RoutineRunVariablesDialog.test.tsx [codex] Respect manual workspace runtime controls (#4125) 2026-04-20 10:39:37 -05:00
RoutineRunVariablesDialog.tsx [codex] Respect manual workspace runtime controls (#4125) 2026-04-20 10:39:37 -05:00
RoutineVariablesEditor.tsx Support routine variables in titles 2026-04-09 06:16:05 -05:00
RunChatSurface.tsx [codex] Harden dashboard run activity charts (#4126) 2026-04-20 10:34:21 -05:00
RunInvocationCard.test.tsx feat(adapters): external adapter plugin system with dynamic UI parser 2026-04-03 21:11:20 +01:00
ScheduleEditor.tsx Fix schedule time picker: cleaner hour labels, hide selectors for every-minute 2026-03-19 17:29:09 -05:00
ScrollToBottom.tsx Offset scroll-to-bottom button when properties panel is open 2026-04-06 21:24:44 -05:00
Sidebar.test.tsx [codex] Improve workspace navigation and runtime UI (#4089) 2026-04-20 06:14:32 -05:00
Sidebar.tsx [codex] Improve workspace navigation and runtime UI (#4089) 2026-04-20 06:14:32 -05:00
SidebarAccountMenu.test.tsx feat: implement multi-user access and invite flows (#3784) 2026-04-17 09:44:19 -05:00
SidebarAccountMenu.tsx [codex] add comprehensive UI Storybook coverage (#4132) 2026-04-20 12:13:23 -05:00
SidebarAgents.tsx feat: polish inbox and issue list workflows 2026-04-10 22:26:21 -05:00
SidebarCompanyMenu.test.tsx feat: implement multi-user access and invite flows (#3784) 2026-04-17 09:44:19 -05:00
SidebarCompanyMenu.tsx [codex] add comprehensive UI Storybook coverage (#4132) 2026-04-20 12:13:23 -05:00
SidebarNavItem.tsx feat: polish inbox and issue list workflows 2026-04-10 22:26:21 -05:00
SidebarProjects.tsx [codex] Improve workspace runtime and navigation ergonomics (#3680) 2026-04-14 12:57:11 -05:00
SidebarSection.tsx Remove collapsible behavior from sidebar Work and Company sections 2026-02-20 15:08:03 -06:00
StatusBadge.tsx fix(ui): prevent status badge pills from wrapping text 2026-02-23 20:16:17 -06:00
StatusIcon.tsx refactor(ui): standardize status/priority colors and improve text legibility 2026-02-23 19:52:43 -06:00
SwipeToArchive.test.tsx Add dark mode inbox selection color 2026-03-30 14:14:14 -05:00
SwipeToArchive.tsx Add dark mode inbox selection color 2026-03-30 14:14:14 -05:00
ToastViewport.tsx [codex] Harden execution reliability and heartbeat tooling (#3679) 2026-04-14 13:34:52 -05:00
WorkspaceRuntimeControls.test.tsx [codex] Improve workspace navigation and runtime UI (#4089) 2026-04-20 06:14:32 -05:00
WorkspaceRuntimeControls.tsx [codex] Improve workspace navigation and runtime UI (#4089) 2026-04-20 06:14:32 -05:00
WorktreeBanner.tsx Make worktree banner name clickable to copy to clipboard 2026-04-09 06:18:05 -05:00