dashboard: artifact side panel — pinnable PR previews, file edits, Penpot frames, design-review screenshots #970

New issue

Closed

opened 2026-05-08 12:16:33 +00:00 by claude-desktop · 2 comments

claude-desktop commented

2026-05-08 12:16:33 +00:00

Collaborator

User story

As an operator I want to pin run artifacts (PR preview cards, individual file edits, Penpot frames produced by the designer, design-review screenshots) into a side panel separate from the chat scroll, so verifying agent output doesn't require rewinding through 200 events to find the latest version.

Context

Cursor 3 cloud agents "generate demos and screenshots of their work" specifically so operators don't scroll to verify (Cursor 3). Vercel chat templates and Claude.ai Artifacts both have this pattern.

Acceptance criteria

<ArtifactPanel> mounted as a tab in the run drawer (alongside Pipeline / Graph / Timeline). Empty state explains how to pin an artifact.
Each tool card in the timeline gets a "pin" affordance (<lucide.Pin />). Pinning a card adds a snapshot of its rendered output to the artifact panel.
Auto-pinned artifact kinds (configurable):
- PRs (when PR URL extracted from result.git.branches[*].prUrl or terminal result)
- Penpot frame URLs from designer agent runs
- Screenshots from design-review agents
- Final file edits when result.ok === true (collapsed by default; toggle to auto-pin)
Each artifact: title, source-event link, "open external" button (PR URL, Penpot file, image full-screen).
Persist artifact pins on task_history.artifacts (JSON array). Survives refresh.
Drag-to-reorder; right-click to remove.

Out of scope

Cross-run artifact gallery.
Artifact diffing across runs.

Dependencies

Depends on <ToolCard> ticket (the pin affordance).

References

Cursor 3: https://cursor.com/blog/cursor-3
AI Elements <Artifact>: https://elements.ai-sdk.dev/components/artifact (concept reference; not a strict copy)

## User story As an operator I want to pin run artifacts (PR preview cards, individual file edits, Penpot frames produced by the designer, design-review screenshots) into a side panel separate from the chat scroll, so verifying agent output doesn't require rewinding through 200 events to find the latest version. ## Context Cursor 3 cloud agents "generate demos and screenshots of their work" specifically so operators don't scroll to verify ([Cursor 3](https://cursor.com/blog/cursor-3)). Vercel chat templates and Claude.ai Artifacts both have this pattern. ## Acceptance criteria - [ ] `<ArtifactPanel>` mounted as a tab in the run drawer (alongside Pipeline / Graph / Timeline). Empty state explains how to pin an artifact. - [ ] Each tool card in the timeline gets a "pin" affordance (`<lucide.Pin />`). Pinning a card adds a snapshot of its rendered output to the artifact panel. - [ ] Auto-pinned artifact kinds (configurable): - PRs (when PR URL extracted from `result.git.branches[*].prUrl` or terminal `result`) - Penpot frame URLs from designer agent runs - Screenshots from design-review agents - Final file edits when `result.ok === true` (collapsed by default; toggle to auto-pin) - [ ] Each artifact: title, source-event link, "open external" button (PR URL, Penpot file, image full-screen). - [ ] Persist artifact pins on `task_history.artifacts` (JSON array). Survives refresh. - [ ] Drag-to-reorder; right-click to remove. ## Out of scope - Cross-run artifact gallery. - Artifact diffing across runs. ## Dependencies - Depends on `<ToolCard>` ticket (the pin affordance). ## References - Cursor 3: https://cursor.com/blog/cursor-3 - AI Elements `<Artifact>`: https://elements.ai-sdk.dev/components/artifact (concept reference; not a strict copy)

claude-desktop added the

area:dashboard

type:user-story

labels

2026-05-08 12:18:12 +00:00

claude-desktop added a new dependency

2026-05-08 12:19:18 +00:00

#960 dashboard: generic <ToolCard> — header/pill/duration/caret, errors+approvals open, successes collapsed