DottaandPaperclip
88bf4c6c1d
## Thinking Path > - Paperclip is the open source app people use to manage AI agents for work. > - The feature map describes product areas and verification entry points. > - Storybook has 223 story suites that show production components, proposals, and retained history. > - The parent PR maps those suites to features, but their folders and sidebar still use unrelated groups. > - This pull request puts the existing suites under feature folders and uses the feature map's names and order in the sidebar. > - Explicit meta IDs preserve existing story links while the titles change. > - Contributors can find stories through the same product structure without losing examples. ## Linked Issues or Issue Description Refs #16046. This is the requested follow-up. Parent #16046 is merged. This PR now targets master, with its single follow-up commit rebased onto the parent squash merge. The Storybook implementation is unchanged by that rebase. Related open Storybook PRs were checked; this change organizes existing suites and adds no product capability. ## What Changed - Move all 223 story files into folders named for their primary feature area. Keep useful scenario groups below the feature's sidebar label. - Order the sidebar by the eight feature-map sections. Put Overview first and shared Foundations last. Leave areas with no stories out of the sidebar. - Move 19 support files into `ui/storybook/support/` and update relative imports and active documentation. - Preserve all 2,210 story IDs and the single docs ID through explicit CSF meta IDs. Keep all entry names and story exports. - Record stable IDs and sidebar titles in the downstream catalog. Validate feature folders, title prefixes, and IDs. Update the maintenance skill and review evidence. ## Verification - Storybook build passed. Built index comparison against parent `75bd3c977cd828d5222823850339e8204f40eb47` found the same 2,211 entries, IDs, and names. - UI typecheck passed (`ui/node_modules/.bin/tsc -b` from `ui`, invoked as `./node_modules/.bin/tsc -b`). - UI Vitest project: 728 files and 8,176 tests passed. - Catalog checker and its nine tests passed. Feature-map checks, token gates, and the maintenance-skill validator passed. - Chromium: nine existing play cases and one render case reached `storyFinished: success` with no page exceptions. The guide rendered, sidebar sections followed map order, and a search for `steering/queue` opened its preserved story link. - Source comparison found only meta title/ID changes, rebased relative references, and updated fixture path text in story files. - To inspect: build Storybook, start `node scripts/serve-storybook-static.mjs --port 6136`, and open the Overview guide. Expand feature folders and use existing story links. - The complete repository suite was not repeated for this organization change. The parent records a backend timeout that passed in isolation, without a complete broad-suite pass. Visual comparisons remain blocked by the unpublished empty baseline. The separate fixture-server story was not run. ## Risks - Open branches that add stories under old paths will need to choose a feature folder and update the catalog. Cross-feature suites have one primary home and retain related capability references. - Sidebar paths change; story and docs IDs remain stable. Automated references to source paths may need the new location. - This is one requested follow-up with 258 changed files, mostly moves. It exceeds the usual review-size guideline because splitting it would leave the sidebar and folder convention partly migrated. - Browser verification samples ten stories, not all 2,210. Existing production/prototype classifications and review gaps remain unchanged. - Required CI gates and a 5/5 review passed on the original head. Fresh checks and review are running for the rebased head. Catalog validation and all nine checker tests passed after rebase; UI, map, skill, and checker contents are identical to the original reviewed head. ## Model Used - OpenAI Codex, GPT-6. The exact runtime model ID and context-window size are not exposed in this session. Used reasoning, repository inspection, code execution, and local browser automation. ## 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 searched GitHub for duplicate or related PRs and linked them above - [x] I have either (a) linked existing issues with `Fixes: #` / `Closes #` / `Refs #` OR (b) described the issue in-PR following the relevant issue template - [x] I have not referenced internal/instance-local Paperclip issues or links (only public GitHub `#NNN` / `github.com/paperclipai/paperclip` URLs) - [x] My branch name describes the change (e.g. `docs/...`, `fix/...`) and contains no internal Paperclip ticket id or instance-derived details - [x] I have run tests locally and they pass - [x] I have added or updated tests where applicable - [x] I have updated relevant documentation to reflect my changes - [x] I have considered and documented any risks above - [ ] All Paperclip CI gates are green - [ ] Greptile is 5/5 with no open P2s, recommendations, or follow-ups - [x] I will address all Greptile and reviewer comments before requesting merge Co-authored-by: Paperclip <noreply@paperclip.ing>
Artifact cards
Storybook: Tasks and conversations → Documents, attachments, and work products → Explorations → Artifact cards. Each story renders one production
card from ui/src/components/artifacts/RichArtifactCards.tsx. All example titles,
authors, content, filenames, repository names, and URLs live in story args.
Use Controls to edit values, including Markdown bodies and JSON table data.
Theme and viewport use Storybook's toolbar.
Fixed component text consists of type, action, metadata, and state labels, such as “Pull request,” “Read document,” “Source,” and “Checks not available.” The contents of documents, column names, and descriptions are data.
Production data
IssuePropertiesArtifactsTab renders these cards through IssueArtifactCard.
It keeps run grouping, agent attribution, upload deduplication, document deep
links, the document editor/annotation surface, and the shared issue gallery.
Chat work-product rows and branch/runtime cards keep their existing rendering.
| Card | Source |
|---|---|
| Pull request | Work-product title, summary, status, and GitHub metadata (repo, number, baseRef, headRef, additions, deletions, changedFiles, state) |
| Commit | Work-product title, summary, repo, sha, branch, and diff counts |
| Document | Issue document body/revision, or the existing materialized Markdown attachment review document |
| Data | User-requested authenticated attachment CSV content, parsed locally with a 1 MiB limit, at most 200 preview rows and 50 columns; downloads retain the original file |
| Image | Attachment content path, filename, optional alt, width, and height metadata |
| Video | Attachment content path, filename, optional posterUrl and durationLabel metadata; native playback controls |
| Link preview | Preview work-product URL, title, summary, optional imageUrl and imageAlt metadata |
| File | Filename, MIME type, recorded byte size, original browser-open and download paths |
External file URLs (including signed query strings) are preserved unchanged. File cards retain a separate browser-open action for inline formats such as PDF.
Missing summaries and counts stay absent. Unknown PR state/checks stay unknown.
Optional producer metadata checks (passed, pending, failed),
reviewSummary, and evidenceSource appears only when supplied. These are
recorded values, not a new live GitHub check or review integration. Runtime health
is never inferred from a URL. No remote page is scraped to manufacture a preview. Optional link images and
video posters must use local authenticated attachment content URLs; remote
metadata cannot silently trigger requests from the operator’s browser. Markdown
card previews follow the same rule; remote images appear as explicit links.
CSV previews load only after the operator clicks Preview data. Opening a task does not fetch its CSV contents. Previews only fetch local attachment content endpoints. Malformed, oversized, or unavailable files retain the download action and explain the preview failure. The existing company-scoped APIs continue to authorize all content access. Markdown attachments retain the existing server materialization and annotation workflow. Their body preview appears after that document has been created.
Examples
PR and commit args use captured facts from public PR #14141. The explanatory summaries and agent-reported review details are editable examples, not live provider data. Other stories use illustrative data. Image and video stories use existing local Paper Trail fixtures. File downloads a small sample text file. The File story's optional entries demonstrate supplied archive contents; the app does not inspect arbitrary archive bytes.
Run and verify
pnpm storybook
pnpm build-storybook
pnpm --filter @paperclipai/ui typecheck
pnpm check:token-gates
Start at /?path=/story/explorations-artifact-cards-pull-request--pull-request.
Tests cover metadata validation, bounded CSV parsing/fetching, card selection,
Markdown review/annotations, deep links, agent filtering, and deduplication.