fix(web): keep long completed commands compact and expandable

[hiimchinh]

What Changed

Completed standalone commands containing line breaks or more than 120 characters use a compact label such as Ran python3. The full command remains available through expansion, even when it produced no output. Short one-line commands retain their existing labels.

Why

Fixes #10879. A successful Python heredoc with no output previously filled the timeline with the entire script and had no expansion control.

Validation: four regression cases red → green, including missing/empty/nonempty output and long single-line commands; 151 affected tests pass; web typecheck and focused lint pass.

UI Changes

Same seeded no-output heredoc in an isolated dev environment. Browser verification confirmed expansion preserves the full command and collapse restores the compact row.

Before	After

Expansion demo:

command-expansion-demo.webm

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for any UI changes
• I included a video for animation/interaction changes

Model: GPT-6. Harness: Codex.

Summary by CodeRabbit

• Bug Fixes

  • Long or multiline command executions now display a compact “Ran” label instead of exposing the full command inline.
  • Users can expand the entry to view the complete command and any additional details when needed.

• Tests

  • Added coverage for long commands, heredoc commands, empty details, CRLF line endings, and expandable command output.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Advanced

Run ID: 5edfed8b-2e7d-41f9-bd08-305ca88dd1a1

📥 Commits

Reviewing files that changed from the base of the PR and between 6076906 and d426904.

📒 Files selected for processing (1)

• apps/web/src/components/chat/MessagesTimeline.logic.ts

🚧 Files skipped from review as they are similar to previous changes (1)

• apps/web/src/components/chat/MessagesTimeline.logic.ts

Included review availability: Your plan provides up to 10 included reviews per hour; 7 remain after this review.

---

📝 Walkthrough

Walkthrough

Completed commands with newlines or more than 120 characters now display compact labels. Tests verify collapsed summaries and expanded command details.

Changes

Command label rendering

Layer / File(s)	Summary
Compact command label and regression coverage apps/web/src/components/chat/MessagesTimeline.logic.ts, apps/web/src/components/chat/MessagesTimeline.test.tsx	singleToolCallLabel uses a compact label for multiline or long commands. Parameterized tests verify compact collapsed output and full command details after expansion.

Priority: ⬇️ Low

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

Severity of issue fixed: Low

Merge Risk: ⚪ Minimal · up to d4269

Completed long or multiline commands now use compact labels while retaining expandable details, with no concrete merge-blocking risk identified.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main change: keeping long completed commands compact while preserving expansion.
Description check	✅ Passed	The description includes complete What Changed, Why, UI Changes, and Checklist sections. It documents validation and provides before/after screenshots plus an interaction video.
Linked Issues check	✅ Passed	The implementation addresses issue #10879 by compacting multiline and long standalone completed commands while preserving expandable command details, including missing and empty output cases. Short co…
Out of Scope Changes check	✅ Passed	The changes are limited to command-label rendering and focused regression tests. They directly support issue #10879 and contain no unrelated code or feature changes.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 1 functions across 2 files.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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