[EtanHey]

Problem

Below 640 CSS px, the unfocused composer collapses to one line. With a quote in the draft, it shows the raw [Assistant quote](t3-citation://v1/…) link instead of the quote chip. Context references (t3-context://) and @-file mentions leak the same way.

Fixes #22076

Root cause

The collapsed row (showCollapsedMobilePromptRow, ChatComposer.tsx:2812) renders the serialized prompt as-is at ChatComposer.tsx:6610 ({prompt.trim() || …}), never through the editor that turns links into chips. The desktop resting composer still uses the editor: the same draft shows raw links at 639 px and chips at 641 px.

Change

New CollapsedComposerPromptPreview splits the draft with the editor's own parser, splitPromptIntoComposerSegments, and draws each segment with the composer's existing chips: quotes (labelled with the comment if there is one, else the quoted text), @-file mentions, context references by kind, and skills the provider offers (SkillChip, now exported). Everything else stays text. The chips are inert; the row is still one Expand composer button.

Chips, not plain text, because the issue asks for them, and reusing the editor's parser and chips keeps this row in step with the editor.

Scope and approval

Triaged issue #22076. 4 files, +210/−3, of which 89 lines are the browser test.

Verification

Real app at 639 px, composer unfocused, same saved draft on main (67c0fc0cda) and this branch (b4e6db6634).

Draft	Before (main)	After (this PR)
A1: text + one quote
A2: quote with comment "Check retries"
A3: two quotes on one line
A4: @-file + terminal context + quote
E1: 390 px, file + terminal + two quotes; overflow hides behind the ellipsis

More: 641 px control, dark theme, image attachment

A5, 641 px: the full editor shows the A4 draft with the same chips.

Case	Before (main)	After (this PR)
E2: dark theme, A4 draft
E3: A4 draft + image attachment

AFTER: row stays 50 CSS px tall, A1–A4 show 1, 1, 2, 3 chips, no t3-citation://, t3-context:// or ]( markup is visible.

cd apps/web
vp test run src/components/chat/CollapsedComposerPromptPreview.browser.test.tsx

Checks five chip kinds render with icons and no focusable children, and an unknown $skill stays text.

• Red against the plain-text row: AssertionError: expected [] to deeply equal [ 'Cache the parsed config.', …(4) ] (1 failed | 1 passed).
• Green: Tests 2 passed (2). vp lint and vpr typecheck (apps/web) exit 0.

Known limits:

• Overflowing chips hide behind the ellipsis, uncounted.
• Context chips show label and icon, not live state like upload progress.
• @-mentions always get a file icon, even folders.
• Native mobile app not checked.
• Math directly followed by an @-mention keeps the mention as text, as the editor does on main.

Related PRs

#22136 by @fixfon fixes the same issue by converting citation links to plain text; context references and @-file mentions still show as links there. This PR renders chips for all of them, as the issue asks.

Process

Loop-record: implementer=claude/claude-opus-5-5 reviewer=codex/gpt-6.1-sol rounds=3/0 defects=0 role=worker

Implemented by Claude Opus 5.5 (Claude Code in T3 Code). Code review by GPT-6.1-Sol (Codex): 3 rounds, 0 blocking defects. Visual review of the images by a separate Claude Opus 5.5 session: PASS.

Model and harness: Claude Opus 5.5 · Claude Code

🤖 Generated with Claude Code

— EtanHey's t3codeClaude (worker) · claude-code/claude-opus-5-5

[macroscopeapp]

Approvability

Verdict: Approved at a8d3209

Macroscope's review found this PR approvable — This is a small, self-contained web bug fix that replaces serialized citation, context, and file-mention markup with readable text only in the existing collapsed mobile composer preview. Prompt processing and persistence remain unchanged, and focused tests cover the new formatter.

^{You can add or adjust custom eligibility rules. Learn more.}

[coderabbitai]

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

• Last reviewed commit: b5614f9

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Source mode: Auto
• Repository: pingdotgg/t3code
• Branch: main
• File: .coderabbit.config.ts
• Commit: cf3acd9
• Layers: Repository TS config
• Review profile: CHILL
• Plan: Advanced
• Run ID: e8745852-6270-4069-97d9-2e6abcadfefa

📥 Commits

Reviewing files that changed from the base of the PR and between 06e10eb and b5614f9.

📒 Files selected for processing: 1

• apps/web/src/components/chat/ChatComposer.tsx

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 9 remain after this review.

📝 Walkthrough

The collapsed composer now renders recognized segments in nonempty prompts as chips. It preserves surrounding text and retains the existing provider-unavailable and default placeholder branches for empty prompts.

Changes: Collapsed Composer Prompt Preview

Layer / File(s)	Summary
Render prompt segments as preview chips apps/web/src/components/chat/CollapsedComposerPromptPreview.tsx, apps/web/src/components/chat/SkillInlineText.tsx, apps/web/src/components/chat/CollapsedComposerPromptPreview.browser.test.tsx	The preview renders citations, file mentions, context references, and matching invocable skills as chips. Unknown context kinds render as unresolved chips. Unavailable or non-invocable skills remain raw text. Browser tests cover chip rendering and unknown skills.
Use preview in collapsed composer apps/web/src/components/chat/ChatComposer.tsx	The collapsed composer passes the prompt, selected provider skills, and theme to the preview. Existing empty-prompt fallback branches remain unchanged.

Priority: ➖ Normal

Estimated code review effort: 2 (Simple) | ~15 minutes

Change: Bug fix · Severity of issue fixed: Medium

Sequence Diagram(s)

sequenceDiagram
  participant ChatComposer
  participant CollapsedComposerPromptPreview
  participant ComposerParser
  participant ChipComponents
  ChatComposer->>CollapsedComposerPromptPreview: pass prompt, skills, and theme
  CollapsedComposerPromptPreview->>ComposerParser: parse prompt segments
  ComposerParser-->>CollapsedComposerPromptPreview: return prompt segments
  CollapsedComposerPromptPreview->>ChipComponents: render recognized segments as inert chips

Loading

Possibly related issues

• pingdotgg/t3code#22304 reports serialized citations in thread search results. This change applies to the collapsed composer, not thread search results.

Suggested reviewers: matthewferoz, t3dotgg

Merge Risk: ⚪ Minimal · up to b5614

No actionable merge-blocking risk was established for this change.

Pre-merge checks: 4

Check name	Status	Explanation
Title check		The title clearly identifies the main fix: the collapsed composer displays quoted content instead of the citation link. It is concise and uses the repository's conventional commit format, although the…
Description check		The description is complete and follows the required sections. It explains the problem, root cause, implementation, issue scope, focused tests, lint and typecheck results, screenshots, known limits, a…
Linked Issues check		Issue #22076 requires the collapsed composer to show an assistant quote as a quote chip instead of serialized t3-citation text. CollapsedComposerPromptPreview parses the prompt with `splitPromptIn…
Out of Scope Changes check		The changes stay within the collapsed composer preview. File mentions, context references, and provider-invocable skills use the same parser and existing chip components to prevent related serialized …

Full details: Title check

Explanation

The title clearly identifies the main fix: the collapsed composer displays quoted content instead of the citation link. It is concise and uses the repository's conventional commit format, although the implementation also covers context references and file mentions.

Full details: Description check

Explanation

The description is complete and follows the required sections. It explains the problem, root cause, implementation, issue scope, focused tests, lint and typecheck results, screenshots, known limits, and the agent details.

Full details: Linked Issues check

Explanation

Issue #22076 requires the collapsed composer to show an assistant quote as a quote chip instead of serialized t3-citation text. CollapsedComposerPromptPreview parses the prompt with splitPromptIntoComposerSegments and renders citation segments with ContextChip and QuoteIcon. ChatComposer uses this preview in the collapsed row. The browser test verifies quote labels, preserved text, chip icons, and inert chips. This meets the issue coding requirement.

Full details: Out of Scope Changes check

Explanation

The changes stay within the collapsed composer preview. File mentions, context references, and provider-invocable skills use the same parser and existing chip components to prevent related serialized references from appearing in the same row. The SkillChip export changes visibility only. The tests cover the preview behavior. No unrelated product change is demonstrated.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create a new PR

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

_{Comment @coderabbitai help to get the list of available commands.}