Files
PaperClipAI/ui/src/components/task-chat
DottaandPaperclip eebdfe71b1 fix(ui): show submitted screenshots and Markdown in steering messages (#20367)
## Thinking Path

> - Paperclip is the open source app people use to manage AI agents for
work.
> - People send follow-up messages while an agent works.
> - The queue above the composer holds those messages until delivery.
> - The queue showed raw Markdown and had no screenshot previews.
> - Submitted screenshots stayed in the composer until the save response
arrived.
> - This pull request shows formatted text and previews in the queue at
submission.
> - It keeps upload receipts so failed saves can restore the draft and
its files.

## Linked Issues or Issue Description

**What happened?**

Send a message with Markdown and screenshots while an agent works. The
queue shows Markdown source. It has no screenshot previews. The composer
keeps the submitted screenshots until the save response arrives.

**Expected behavior**

Show formatted text and screenshot previews in the queue. Clear the
submitted previews with the text. Restore them if the save fails. Keep
files added for the next message.

**Steps to reproduce**

1. Open the Screenshot Submission Storybook case under Steering and
queued messages.
2. Add a screenshot and formatted text. Select Send.
3. Leave the simulated save pending. Inspect the queue and composer.
4. Reject the save. Confirm the draft and screenshots return. Retry and
complete the save.

Related work: #19321 bounds the queued-message list. This fix keeps that
scrolling behavior.

## What Changed

- Hide submitted attachment previews as soon as Send clears the text.
Keep their upload receipts until the request settles.
- Use the shared Markdown renderer in queued rows. Show up to three
compact screenshots with a count for more images. Strip standalone image
syntax from the text preview.
- Keep paragraph boundaries. Wrap thumbnails and controls within narrow
rows.
- Load queue previews only from local attachment and asset content
paths. Add an opt-in image omission mode to the shared Markdown renderer
for compact queue text.
- Correct the case lookup API summary so the existing search test passes
with the full catalog.
- Add regressions for successful, rejected, and uncertain saves. Check
files added to the next draft.
- Add a production-component Storybook case with controlled save
responses and a desktop/mobile browser test.
- Document the queue display and draft recovery behavior in DESIGN.md.

## Verification

- Red: the original components fail five new unit cases. The desktop and
mobile browser cases also fail on raw Markdown. Screenshots show the
previews still in the composer.
- Green: 256 composer, queue, and shared Markdown unit tests pass.
- Related coverage: 466 thread, draft, and attachment tests pass. One
existing test is skipped.
- Three browser cases pass. Desktop and mobile cases check pending save,
rejection, retry, successful save, and steering. A 320px case checks
separate paragraphs with no margins, three loaded thumbnails, the
additional-image count, and auto-send controls. It checks that all
controls and images fit within the queue.
- UI typecheck and design token gates pass after the review fixes. The
initial implementation also passed the UI production build, Storybook
catalog checks, and 30 map/catalog tests. The final PR workflow passed
typecheck, build, all required test suites, and browser E2E checks.
- Browser command: `pnpm exec playwright test
queued-message-screenshots.spec.ts
--config=tests/storybook-visual/playwright.config.ts --project=stories`.
Use `STORYBOOK_TEST_BASE_URL` to target an owned Storybook server.
- Review regressions first failed with two unit failures and an
inline-paragraph browser failure. They pass after the fixes.
- Initial CI failed the case lookup search test. It reproduced locally
and now passes all three cases after the API summary correction.
- Initial CI also failed process identity inspection during a server
shutdown test. All 22 focused shutdown tests pass locally without source
changes. The cause remains unconfirmed; the final CI Runner support
suite also passed without changes to process cleanup.
- The browser cases mount production components with simulated
upload/save and steer responses. They do not prove backend persistence
or live provider delivery.
- `pnpm verify` returns exit 2 because DESIGN.md is a global CI input.
The required PR workflow supplies the broad CI coverage.
- Native preflight cannot finish because Cargo is absent in this
environment. UI dependencies were installed. The missing plugin SDK
build was prepared before the successful UI checks.

- Final head: `2219de45721360d36341ea1ae46641b6bcb20360`. [CI
run](https://github.com/paperclipai/paperclip/actions/runs/42708839687)
passed. No checks are pending or failing. Greptile and Paperclip Review
each gave 5/5. All five prior review threads are resolved.

## Risks

- Narrow rows can grow to show two text lines and thumbnails. The
existing queue height limit still applies.
- Screenshot previews use the existing image-reference parser and a
local attachment path filter. Image omission is opt-in; thread and
decision media keep their existing modes.
- Pending uploads remain in draft state while their previews are hidden.
Rejection and uncertain-response tests check that the same receipts
return without losing later attachments.

## Model Used

- OpenAI Codex, based on GPT-6. The runtime does not expose a more
specific serving model ID or context limit. Used reasoning, tools, code
execution, and browser checks.

## 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-11-09 16:26:38 -06:00
..