Files
PaperClipAI/ui
DottaandPaperclip 2f585ef26a fix(ui): preserve newer drafts after repeated receipt cleanup (#14332)
## Thinking Path

> - Paperclip is the open source app people use to manage AI agents for
work.
> - The task composer keeps unsent text across page reloads.
> - A server receipt confirms a submitted message after a reload.
> - Replayed cleanup can apply the old text offset to a newer draft
twice.
> - This pull request reconciles each confirmed attempt once and
preserves both tabs’ unsent intent.
> - The full newer draft stays available for the next send.

## Linked Issues or Issue Description

**What happened?**

Reloading the classic composer while a save was pending could truncate a
newer draft. Replayed receipt cleanup changed `A newer draft written
while delivery was pending.` into `nding.`. The storage helper rejected
the duplicate settlement, but the effect still changed the editor and
its body reference.

**Expected behavior**

A receipt settles its retained submission once. Later cleanup must
preserve the newer draft in both the editor and browser storage.

**Steps to reproduce**

1. Send a comment and hold its HTTP response after the server accepts
it.
2. Type a newer draft, then reload the page.
3. Restore the matching receipt under React StrictMode.
4. Inspect the newer draft after effect replay and unmount.

The deterministic regression reproduces this on current master. The
existing browser test exposed the issue during #14329 verification.
Related draft persistence code came from #13338. A search found no
separate fix for this duplicate settlement.

## What Changed

- Reconcile each confirmed attempt once in memory so duplicate effects
cannot trim its newer draft again.
- Unlock confirmed drafts when storage writes fail. Never acquire
another tab’s pending receipt or assume its text is newer. Keep a
conflicting local draft and its attachments in tab-scoped session
storage while preserving the shared draft unchanged.
- Add component regressions for StrictMode replay, exact editor and
stored bytes, foreign receipts, attachment-only differences, reload
recovery, unavailable storage, and task navigation before autosave. A
brief notice explains when this tab has a separate draft.

## Verification

- RED: the new test received `nding.` instead of the full newer draft
before the fix.
- Review RED: three cases reproduced a locked composer after failed
storage writes or another tab's settlement. A further negative case
preserves a newer retained attempt and its attachments.
- Cross-tab review RED: four deterministic cases reproduced lost local
text, foreign receipt takeover, attachment loss when text matched, and
overwriting newer stored text.
- GREEN: 118 tests across `IssueChatThread`, `composer-draft`, and
`comment-submit-draft`, including same-mounted A → B → A navigation and
a full recovery-storage failure. Two further lifecycle RED tests verify
finishing a recovery returns to the shared draft on a later visit while
continued typing and attachments retain recovery.
- Both existing browser reload cases passed against a fresh server and
database on exact head `ceb80aca77fc8cc0f813c328ba87025b3e1a2222` (42.5
seconds), with classic mode enabled and disabled. The browser flow
verifies one original comment, a preserved draft, and a successful
second send.
- UI typecheck, token gates, and the shipped static UI build passed. The
initial typecheck required the fresh worktree's plugin SDK build; the
retry passed after that dependency built.
- The session-only failure mock also preserves localStorage on platforms
where both share the Storage prototype; this fixes the Linux workspace
test failure.
- All 56 checks passed on `4c30dcccc4fe5b90dcd08dd1d90475ea89e4a376`;
Greptile is 5/5 with zero open review threads. An unrelated runner
baseline scan hit its existing 100 ms deadline once; its isolated test
and the single failed CI job passed on retry without source changes.
This four-file UI fix does not change server or database code.


- Final alternate-staging acceptance passed on deployed source
`d884e1ab046cc76004e35e6091e9e6e2c918c9eb`, with exact health checked
before and after. Three real browser cases used shipped static UI and
real API saves: reload during an accepted-but-unacknowledged save in
both composer variants, plus two classic tabs with different drafts. The
test deliberately held only its own accepted POST acknowledgement and
temporarily withheld its own GET receipt from one tab to reproduce
settlement ordering. Both drafts survived independent reloads, the
shared draft remained intact after the other tab sent, and finishing
recovery returned to the shared draft on a later visit. Exact request
IDs/counts and server comment bytes passed; no provider was invoked.
Screenshots preserve the live drafts before fixture cleanup.
- An ordinary authenticated Chrome/CUA visit independently showed the
exact original and newer comments; an additional unsent draft survived
reload and was then cleared. All three isolated fixtures are complete,
browser contexts are closed, and original user tasks were untouched.

## Risks

- Reconciliation uses the exact request ID and draft key. Conflicting
drafts stay separate; the tab recovery survives same-tab reload through
session storage and does not outlive the browser tab. If recovery
storage is unavailable, the editor keeps its in-memory text and
explicitly warns the user to copy it before leaving.
- Attachment selections remain bounded to 20 per draft; if combining
equal-text snapshots would exceed that limit, each original selection
stays in its respective draft.
- No API, schema, or migration changes. The status notice uses existing
design tokens.

## Model Used

OpenAI Codex, GPT-6, with tool use and code execution. The runtime does
not expose the exact deployment variant or context-window size.

## 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
- [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>
2026-09-28 14:03:36 -05:00
..

@paperclipai/ui

Published static assets for the Paperclip board UI.

What gets published

The npm package contains the production build under dist/. It does not ship the UI source tree or workspace-only dependencies.

Storybook

Storybook config, stories, and fixtures live under ui/storybook/.

pnpm --filter @paperclipai/ui storybook
pnpm --filter @paperclipai/ui build-storybook

Typical use

Install the package, then serve or copy the built files from node_modules/@paperclipai/ui/dist.

Editor dependency identity

Keep the root and workspace overrides for @codemirror/state, @codemirror/view, and @lezer/common aligned. CodeMirror requires shared extension identity, while Lezer parsers and syntax highlighters require shared NodeProp IDs. Multiple Lezer copies can crash code-block highlighting with tags is not iterable. src/lib/codemirror-single-instance.test.ts checks the installed dependency graph and highlights sample code through the editor's real language dependencies. GitHub Actions owns regeneration of pnpm-lock.yaml.