fix(web): refine sent message editing layout

[kev1n77]

Summary

Improve the sent-message and inline-editing experience in Flow Chat.

• Right-align sent message bubbles and size them to their content, with a constrained maximum width.
• Keep image attachments above and outside the text bubble in both display and edit states.
• Make the edit composer compact while allowing it to use the full available width.
• Restore MCP, Skill, Widget, and additional-mode references as editable capsules instead of exposing their raw prompt representation.
• Allow clicking empty space in the edit composer to focus the text editor without interfering with action or capsule controls.
• Add regression coverage for layout, capsule restoration, focus handling, and legacy MCP compatibility.

Type and Areas

Type:

Bug fix / UI/UX / regression fix / test

Areas:

Web UI / Flow Chat / sent-message editing

Motivation / Impact

Sent messages previously stretched across the full reading column, displayed images inconsistently between read and edit states, and required users to click close to the text to focus the compact editor.

Editing legacy MCP references could also expose their raw wire representation instead of rendering the corresponding capsule.

This change makes sent messages more compact and visually consistent, keeps non-editable images separate from editable text, preserves structured reference cards during editing, and restores the full edit surface as a usable focus target.

No user-facing strings or locale changes are introduced.

Verification

• pnpm --dir src/web-ui exec vitest run --maxWorkers=50% src/flow_chat/components/modern/UserMessageItemActions.test.ts src/flow_chat/components/modern/UserMessageItem.test.tsx src/flow_chat/components/modern/UserMessageEditComposer.test.tsx src/flow_chat/components/RichTextInput.test.tsx
  • Passed: 4 test files, 72 tests.
• pnpm --dir src/web-ui exec vitest run --maxWorkers=50% src/flow_chat/components/modern/UserMessageEditComposer.test.tsx
  • Passed: 11 tests, including plain/rich editor surface focus and action-button isolation.
• pnpm run check:web
  • Passed Web UI appearance, typography, theme color, visual contract, and type checks.
• pnpm --dir src/web-ui exec tsc --noEmit
  • Passed.
• git diff --check
  • Passed.

Reviewer Notes

• Existing MCP plain-text wire compatibility is preserved. Legacy messages are reconstructed as editable capsules without changing the persisted prompt format.
• Images remain visible during editing but stay outside the editor because this flow does not edit image attachments.
• The change is limited to shared Web UI presentation and editing behavior.
• Remote workspace, remote control, Peer Device Mode, and Detached Dispatch were not separately exercised because no transport, protocol, runtime, or persistence contract changed.

Checklist

• This PR is focused and does not include secrets, temporary prompts, generated scratch files, or unrelated artifacts.
• Relevant verification is recorded above, or skipped checks are explained.
• User-facing strings, docs, and locales are updated where applicable.