DottaandPaperclip
4814d1ab69
## Thinking Path > - Paperclip is the open source app people use to manage AI agents for work. > - People use the new-task and thread composers to send text and files. > - Images currently enter the text editor or appear with other files. > - Large images interrupt text entry and make the two composers inconsistent. > - This pull request puts image previews above the text in both composers. > - People can check and remove images while they continue to edit the text. ## Linked Issues or Issue Description Refs: #13206. Related shared-composer work: #15091. **What existing behavior does this improve?** Image selection, paste, and drop in the new-task and thread composers. **Current behavior** Thread images enter the editor at the text cursor. New-task images can appear inline or with file attachments. Images do not have one preview size. **Proposed behavior** Show images above the text as 80 by 80 previews with rounded corners. Use the existing spacing and radius tokens. Keep file attachments in their current row. Add image references when the thread message is sent. **Reason and benefit** People can review images without moving or deleting message text. One shared image row keeps both composers consistent. **Breaking changes** New image uploads stay outside the editor until send. Old inline-image drafts remain readable. No server API or database changes are required. ## What Changed - Add `ComposerImageAttachments` for local previews, removal, upload status, and retry. - Let `TaskChatComposer` own the image row and all image input paths. Keep attachment IDs in the existing send flow. - Let `NewIssueDialog` stage images and upload retained files after task creation. Save file bytes in browser IndexedDB by account and company. Restore them after reload. Clear them after creation. Show storage errors. Merge saved file changes in one IndexedDB transaction. Delete only the files removed by that draft. This keeps files saved by other open tabs. - Keep rich editing for old image Markdown. Use the same MIME and filename checks for image previews in both composers. - Save optional MIME data with thread draft attachments. Existing draft records remain valid. - Add desktop and mobile Storybook examples. Update the task feature map and component tests. ## Verification - `pnpm exec playwright test --config tests/e2e/playwright.config.ts tests/e2e/board-attachment-receipts.spec.ts`: all 14 Chromium tests pass against the real local Board, API, storage, and disposable database. The suite proves image recovery in two open tabs after saves and task creation, new-task image recovery after reload, byte-for-byte upload content, cleanup after creation, rich editing of old image drafts, upload receipt recovery, and removal during pending uploads. - The first local browser attempt could not start because Chromium was absent. Chromium was installed. A later run passed 12 tests but the new legacy-draft fixture restored an empty body. That fixture wrote storage while an empty composer was mounted. It now seeds before React startup and uses a real uploaded image. The complete 13-test rerun passes. Early component runs also exposed the new restore timing. Submit and file controls now wait for restoration. The test helper now waits for React effects. - 316 focused tests pass across `TaskChatComposer`, `NewIssueDialog`, `MarkdownEditor`, `composer-draft`, and `useStagedIssueFiles`. The tests cover explicit file removal, file recovery, account and company changes, storage failures, MIME-empty images, upload retries, and removal. - The two-tab browser test failed on the previous commit: the second save erased the first image. The fix merges files in one read/write transaction and records explicit removals. The first fixed run reached the final create step but had no text request after the other tab cleared the shared text draft. The test now enters a fresh request before that step. The full 14-test rerun passes. - `pnpm check:token-gates`, `node scripts/check-maps.mjs`, `node scripts/storybook-catalog.mjs`, and `git diff --check` pass. - `pnpm --filter @paperclipai/ui typecheck` and `pnpm --filter @paperclipai/ui build` pass after building the local plugin SDK dependency. Repository typecheck and build stop because this workspace has no `cargo`. Full CI must pass before merge. The first CI run passed typecheck, build, and all unit-test shards. Its browser failure expected the old inline upload label. The assertion now uses the thumbnail upload status. - The prior browser review used the production components with simulated upload and submit calls. Desktop, mobile, and dark-theme captures were accepted before this PR. Browser checks confirmed equal-size rounded previews above the editor, no inline image nodes, no horizontal overflow, and removal that preserves text. These checks do not prove live backend persistence. - Earlier repository typecheck and build attempts also stopped without `cargo`. An earlier full test run was killed with a recorded out-of-memory event during a server integration shard. It had no full-suite verdict. One document-recovery test timed out during that concurrent run. Its isolated rerun and later complete focused runs passed; the initial timeout cause was not established. - An initial catalog command in this workspace ran before dependency installation finished. It could not load Storybook. The command passed after installation. The first UI typecheck could not find plugin SDK declarations while that package was still building. The UI typecheck passed after `pnpm --filter @paperclipai/plugin-sdk build`. To inspect the layout, open `composer-new-task--images`, `composer-new-task--mobile-images`, `composer-add-menu--images`, and `composer-add-menu--mobile-images` in Storybook. Select images with different aspect ratios. Check removal, mixed files, failed upload and retry, and draft restoration. - Greptile reports 5/5 for commit `9b9e93beeed80371f667ad2e1a9573e82332c05c`. There are no open review threads. [CI](https://github.com/paperclipai/paperclip/actions/runs/41544180330) passed on this commit. All 58 checks finished: 54 passed, one review is neutral, and three optional checks were skipped. The legacy Snyk status passed. Paperclip also reports 5/5. No review threads are open. ## Risks - Open tabs share the account and company draft. Atomic file writes keep changes from other tabs. A reload can restore those saved files. - Attachment state now controls when image references enter a thread message. Tests cover pending uploads, failures, retry, removed images, and retained upload IDs. - New-task images use the existing staged-file upload flow after task creation. A failed upload follows that flow's existing error behavior. Browser storage can be unavailable or full. The composer keeps the files in memory and shows a recovery message. - Legacy inline-image drafts retain their original text. No migration is required. ## Model Used OpenAI GPT-6 through Codex, with reasoning, tool use, and shell execution. The exact runtime snapshot ID and context-window size are not exposed in this session. The earlier implementation's model snapshot is not recorded in the handoff. ## 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 available in this session) - [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 references) - [x] My remote branch name describes the change and contains no internal Paperclip ticket ID - [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 - [x] All Paperclip CI gates are green - [x] 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>
Paperclip feature map
Start here when reproducing a user-facing bug, verifying a change, or deciding which surfaces a fix must cover. Each recipe describes what a person can do, where they can do it, the expected result, and the evidence needed to verify it. Product behavior is still governed by the implementation spec.
The sibling agent access map records APIs, agent entry points and permission boundaries for the same capability IDs. Follow the shared map contract when maintaining either map.
The chat scenario catalog describes how people might request these capabilities in conversation, including setup and permission branches. These are planned Product E2E journeys, not live coverage results.
IDs and references
Use the existing IDs in issues, PRs, Storybook annotations, tests, and verification evidence:
| Reference | Example | Defined by |
|---|---|---|
| Feature ID | onboarding |
The recipe filename without .md. |
| Capability ID | onboarding/company |
The feature ID plus a key from its Sub-features list, separated by /. |
| Entry-point reference | onboarding.md#web-wizard | The recipe filename plus its entry-point heading. The local entry-point ID is web-wizard. |
For example, report verifying onboarding/company through web-wizard.
Capabilities describe behavior; entry points identify the surface used to exercise
it. Entry-point IDs are separate from generated capability IDs. Both maps and
Storybook use the same full capability IDs. Each child page states its feature
ID; recipe bullets show the full capability ID beside the local key, and access
companions show it beneath the local heading. Local keys remain unchanged for
parsing and existing anchors.
Keep recipe filenames, sub-feature keys, and entry-point keys stable when changing display titles or navigation. Renaming a filename or key changes its references. The section headings below are navigation labels, not additional IDs.
Browse features
Use this index to open a recipe or copy its feature and full capability IDs.
Getting started and access
| Feature ID | Recipe | Capability IDs |
|---|---|---|
onboarding |
Onboarding and first work | onboarding/instance, onboarding/company, onboarding/adapter, onboarding/first-task, onboarding/resume |
access |
Login, invitations, and access | access/login, access/invitations, access/membership, access/resources, access/cli-auth |
companies |
Companies and portability | companies/selection, companies/identity, companies/decision-models, companies/prompt-injection-prevention, companies/fast-responses, companies/agent-observability, companies/archive, companies/portability |
Tasks and conversations
| Feature ID | Recipe | Capability IDs |
|---|---|---|
tasks |
Task creation and lifecycle | tasks/create, tasks/organize, tasks/properties, tasks/discussion, tasks/completion, tasks/privacy |
task-coordination |
Delegation, dependencies, and signoff | task-coordination/delegation, task-coordination/dependencies, task-coordination/signoff, task-coordination/tree-control |
inbox-search |
Inbox, decisions, and search | inbox-search/views, inbox-search/triage, inbox-search/decisions, inbox-search/search, inbox-search/toasts |
agent-chat |
Agent conversations and project handoff | agent-chat/discovery, agent-chat/history, agent-chat/handoff, agent-chat/conference-room |
questions-and-approvals |
Questions and approvals | questions-and-approvals/questions, questions-and-approvals/dismiss-and-reopen, questions-and-approvals/confirmations, questions-and-approvals/plan-review, questions-and-approvals/audience, questions-and-approvals/governance, questions-and-approvals/tool-review, questions-and-approvals/continuation |
steering |
Steering and queued messages | steering/queue, steering/edit-order-discard, steering/steer, steering/interrupt, steering/stop-and-pause, steering/drafts, steering/approval-queue |
documents-artifacts |
Documents, attachments, and work products | documents-artifacts/documents, documents-artifacts/annotations, documents-artifacts/attachments, documents-artifacts/work-products, documents-artifacts/library |
Agents and reusable capabilities
| Feature ID | Recipe | Capability IDs |
|---|---|---|
agents |
Hiring, configuration, and organization | agents/hire, agents/grok-bot, agents/instructions, agents/organization, agents/primary-agent, agents/lifecycle, agents/built-in, agents/api-keys, agents/managed-agent-setup |
runs-adapters |
Runs, harnesses, and model accounts | runs-adapters/availability, runs-adapters/validation, runs-adapters/runs, runs-adapters/session |
skills |
Skills and Skill Studio | skills/discovery, skills/authoring, skills/versions, skills/policy, skills/testing |
teams |
Team packages and installation | teams/discovery, teams/preview, teams/install, teams/configuration |
Projects and execution
| Feature ID | Recipe | Capability IDs |
|---|---|---|
projects |
Projects and repositories | projects/lifecycle, projects/task-context, projects/repositories, projects/defaults, projects/privacy |
goals |
Goals and work alignment | goals/hierarchy, goals/alignment, goals/navigation |
workspaces |
Workspaces, services, and files | workspaces/binding, workspaces/provisioning, workspaces/services, workspaces/files-git, workspaces/closure |
execution-environments |
Execution environments | execution-environments/configuration, execution-environments/capabilities, execution-environments/probe, execution-environments/assignment, execution-environments/images |
recovery |
Recovery | recovery/diagnosis, recovery/bounded-continuation, recovery/source-action, recovery/exhaustion, recovery/workspace, recovery/unknown-outcome, recovery/user-continuation, recovery/reconnect |
Apps, channels, and extensions
| Feature ID | Recipe | Capability IDs |
|---|---|---|
connection-setup |
Connection setup | connection-setup/catalog, connection-setup/identity-and-access, connection-setup/credentials, connection-setup/handoff, connection-setup/draft-recovery, connection-setup/task-request, connection-setup/channel-setup, connection-setup/failure |
assistant-connections |
Assistant connections (MCP) | assistant-connections/setup, assistant-connections/consent, assistant-connections/device-login, assistant-connections/client-use, assistant-connections/revocation |
app-permissions |
App access and action permissions | app-permissions/agent-access, app-permissions/action-policy, app-permissions/catalog-change, app-permissions/test-action, app-permissions/account-maintenance |
chat-channels |
External chat and email | chat-channels/providers, chat-channels/identity, chat-channels/conversation, chat-channels/attachments, chat-channels/lifecycle, chat-channels/outbound-email |
gateways-profiles |
Tool gateways and access profiles | gateways-profiles/gateway, gateways-profiles/profiles, gateways-profiles/client-connect, gateways-profiles/tokens, gateways-profiles/activity |
secrets |
Secrets and proposals | secrets/company-secrets, secrets/user-secrets, secrets/proposals, secrets/vault-import, secrets/runtime-delivery |
plugins |
Plugins | plugins/installation, plugins/configuration, plugins/contributions, plugins/lifecycle |
Automation and structured work
| Feature ID | Recipe | Capability IDs |
|---|---|---|
routines |
Routines, schedules, and triggers | routines/definition, routines/triggers, routines/run-now, routines/history, routines/management |
cases |
Cases | cases/browse, cases/structure, cases/history, cases/task-links, cases/handoffs |
status-cards |
Status cards | status-cards/authoring, status-cards/generation, status-cards/inspection, status-cards/archive |
Oversight and operation
| Feature ID | Recipe | Capability IDs |
|---|---|---|
budgets-costs |
Costs and budgets | budgets-costs/cost-reporting, budgets-costs/budgets, budgets-costs/incidents, budgets-costs/resolution, budgets-costs/subscriptions, budgets-costs/accounting-recovery |
activity |
Dashboards and audit trails | activity/overview, activity/activity, activity/runs, activity/routine-audit, activity/timeline, activity/agent-commentary |
navigation-preferences |
Navigation, profile, and announcements | navigation-preferences/navigation, navigation-preferences/preferences, navigation-preferences/profile, navigation-preferences/announcements, navigation-preferences/fallbacks, navigation-preferences/command-palette |
instance-operations |
Instance operations | instance-operations/install-update, instance-operations/server-service, instance-operations/configuration, instance-operations/diagnostics, instance-operations/backup, instance-operations/runtime-setup |
cli-operations |
CLI/API and local worktrees | cli-operations/context, cli-operations/domain-commands, cli-operations/outputs, cli-operations/run-controls, cli-operations/worktree-instances, cli-operations/feedback-export |
Contributor surfaces
| Feature ID | Recipe | Capability IDs |
|---|---|---|
developer-labs |
Developer previews and diagnostic labs | developer-labs/design, developer-labs/interaction-labs, developer-labs/performance, developer-labs/route-gates |
Open the published Storybook guide for the assembled feature and capability index. The Markdown recipes in this directory are the authored source. Each has a same-named agent-access companion.
Run node scripts/storybook-catalog.mjs to generate local navigation in
maps/generated/feature-map.md, maps/generated/agent-access-map.md, and the
Storybook guide. Recipes are discovered automatically from their navigation
metadata; generation does not depend on this high-level index.
Before driving a journey
- Use this checkout's isolated test drive for manual product checks. It creates a temporary instance and prints its URL and data directory. Do not guess that a server on port 3100 belongs to you.
- Record the commit, URL, company, login role, relevant experimental settings, adapter, runtime mode, and live versus simulated dependencies. Use disposable tasks and provider resources. A fresh test drive creates a company and CEO, but no task or first run.
- Use the current navigation and company prefix. Paths in recipes omit that prefix. Record whether the streamlined or production shell is selected; Agent Chat, chat connectors, and the combined Inbox/Tasks view have separate gates. A hidden surface is an unmet prerequisite, not a successful test.
- Run the smallest relevant test first. Vitest commands below run from the repository root after installing dependencies. Playwright recipes use their named configuration and its isolated environment, not an unrelated running instance. Reserve expensive runner/provider tests for the behavior at issue.
- Exercise the actual user action, inspect its result, reload, and verify the persisted state or continuation. Use read-only API checks to corroborate UI evidence; creating state through the API does not prove the creation UI.
For agent-driven acceptance work, start with the Paperclip verification skill for an isolated launch, ownership/readiness checks, browser driving, evidence, and cleanup. It uses this directory as its feature map. The existing dev-workspace run/verify skill and evaluation skill describe runtime ownership and evidence handling. Reuse them; this map introduces no environment launcher, credentials, scheduled job, or second test framework.
Evidence contract
Report each entry point as passed, failed, blocked (with its missing
prerequisite), or not run. Include the feature ID, full capability IDs and
entry-point ID (for example, onboarding/company through web-wizard), plus the
recipe link, commit/environment, user action, expected and observed result,
command/exit code, and evidence links. Screenshots or traces should show both the
action and the discriminating result. Include task/run/request IDs when relevant,
without secrets.
A fix is verified across its affected surfaces only when each has evidence or an explicit reason it does not apply. Shared code alone does not prove parity. Keep product regressions visible; do not change the recipe to bless a failure. For Paperclip-assigned work, attach evidence through the artifact workflow.
Inventory and remaining depth
The generated maps/generated/coverage.json lists the current non-test TSX page
modules and the recipes that directly reference each one. An unreferenced module
is a documentation candidate, not proof that its feature is absent or untested.
Remaining workflow limits live in each recipe. Inventory and example associations
describe documentation scope, not runtime health.
Maintaining the reference
The map documents user journeys. It does not execute them automatically; generated inventories record documentation scope rather than live test health. Product E2E reports reuse these capability IDs through the journey associations. Their coverage view shows which scenarios in a campaign are linked to each capability and the associated test results. An association or passing scenario does not certify the whole capability; unselected and unmapped journeys remain distinct.
When maintaining a recipe, compare its entry points and expected results with
the current source. Check that linked tests still exercise the stated behavior
and that local references still exist. Keep the same-named agent access companion
and stable sub-feature IDs aligned when behavior or access changes. Source-only
access inventory remains distinct from live verification. Run
node scripts/check-maps.mjs after map edits for structural/reference checks;
follow the shared contract for the source and behavioral checks it cannot perform.
Each recipe starts with a small frontmatter navigation record, then an H1:
---
navigation: {"section":"Tasks and conversations","sectionOrder":20,"order":10}
---
The H1 supplies the feature title, and the first paragraph supplies its summary. Orders are local to the section; leave gaps for additions. Equal orders use the stable filename as a tie-breaker. Keep a section's name/order consistent across its recipes. Discovery uses the recipe and companion; keep the readable ID index above aligned when features or capability IDs change.
Optional ### Storybook verification guidance lives inside the recipe's Gotchas
section. Each level-four heading contains a backtick-quoted capability key and
has Scope (ui, cli, or browser),
Storybook, Production, and Sources fields. These are verification instructions
and intentional scope limits, not run results or a required story for every API.
The generated gap report combines this guidance with current story associations.
After frontmatter, each recipe starts with an H1 and a user-visible description, then exactly:
- Sub-features — stable backticked local keys, full capability IDs, and observable behavior/states,
such as
- `company`: `onboarding/company` — create a company. - How to get to it (user POV) — one H3 backticked entry-point ID per surface.
- Driving it with — starts with
Preconditions:; repeat each entry-point H3, withAutomated:andManual:paragraphs. Name test scope and gaps honestly. - Gotchas — misleading look-alikes, feature gates, and invalid evidence.
New or updated entries follow
Poteto's feature-map examples.
Existing entries with a Driving it heading can adopt the named harness when
their recipes are updated. The original format was inspired by
Omnigent's feature map.
Paperclip's recipes and checks follow its own task model and test infrastructure.