kandev/docs/plans/thinking-message-preview/task-01-render-thinking-message-previews.md

id, title, status, wave, depends_on, plan, requirements, acceptance_criteria, system_design

id	title	status	wave	depends_on	plan	requirements	acceptance_criteria	system_design
01-render-thinking-message-previews	Render thinking-message previews	done	1		plan.md	REQ-UI-THINKING-MESSAGE-PREVIEW-001	AC-UI-THINKING-MESSAGE-PREVIEW-001.1 AC-UI-THINKING-MESSAGE-PREVIEW-001.2 AC-UI-THINKING-MESSAGE-PREVIEW-001.3 AC-UI-THINKING-MESSAGE-PREVIEW-001.4 AC-UI-THINKING-MESSAGE-PREVIEW-001.5 AC-UI-THINKING-MESSAGE-PREVIEW-001.6 AC-UI-THINKING-MESSAGE-PREVIEW-001.7	../../specs/ui/system-design/thinking-message-preview.md

Task 01: Render Thinking-Message Previews

Summary

Show the first meaningful reasoning line in expandable thinking-message headers. Preserve complete Markdown content, compact single-line behavior, and provider-neutral message contracts while containing the preview on mobile.

In scope

• Write the focused component regression first.
• Derive a plain-text preview from the first meaningful source line.
• Render and truncate the preview in expandable thinking-message headers.
• Preserve label-only, compact-inline, streaming, and expanded-content paths.
• Add focused mobile browser evidence for visibility and containment.

Out of scope

• Agent adapter, lifecycle, task-message service, persistence, and WebSocket changes.
• Generated summaries, provider branches, new translations, or settings.
• Changes to ExpandableRow, the Markdown renderer, or shared transcript navigation.

Acceptance

• A Codex-shaped multiline thought shows its first non-empty Markdown-stripped line beside Thinking before expansion, while later appended lines do not replace it.
• Empty or decoration-only thoughts retain the label-only fallback, and compact single-line thoughts retain their current full inline behavior while wrapping when the row is narrow.
• The expandable preview stays on one truncated line without widening the mobile chat or document, and expansion reveals the complete source.

Verification

Bootstrap workspace dependencies once when apps/node_modules is absent:

cd apps && pnpm install --frozen-lockfile

Run the focused TDD and validation commands:

cd apps && pnpm --filter @kandev/web test -- components/task/chat/messages/thinking-message.test.tsx
cd apps/web && pnpm run typecheck
cd apps/web && pnpm exec eslint components/task/chat/messages/thinking-message.tsx components/task/chat/messages/thinking-message.test.tsx e2e/tests/chat/mobile-markdown-wrap.spec.ts
cd apps/web && pnpm exec prettier --check components/task/chat/messages/thinking-message.tsx components/task/chat/messages/thinking-message.test.tsx e2e/tests/chat/mobile-markdown-wrap.spec.ts
python3 scripts/lint-spec-files.test.py
python3 scripts/lint-spec-files.py --all
git diff --check -- docs/specs docs/plans apps/web/components/task/chat/messages apps/web/e2e/tests/chat/mobile-markdown-wrap.spec.ts
cd apps/web && pnpm e2e:run --host --project mobile-chrome tests/chat/mobile-markdown-wrap.spec.ts -- --grep "thinking preview" --retries=0

Files likely touched

• apps/web/components/task/chat/messages/thinking-message.tsx
• apps/web/components/task/chat/messages/thinking-message.test.tsx
• apps/web/e2e/tests/chat/mobile-markdown-wrap.spec.ts
• docs/specs/ui/requirements/thinking-message-preview.md
• docs/specs/ui/system-design/thinking-message-preview.md
• docs/specs/ui/README.md
• docs/plans/thinking-message-preview/plan.md
• docs/plans/thinking-message-preview/task-01-render-thinking-message-previews.md

Dependencies

None.

Risks

• A Markdown structural line can be a technically valid but less descriptive preview. Do not add semantic ranking beyond the specified first visible line.
• Flex truncation fails if a header ancestor cannot shrink. Cover the final DOM geometry in the mobile browser scenario.

Parallelism

sequential

Inputs

• REQ-UI-THINKING-MESSAGE-PREVIEW-001 and all acceptance criteria.
• Preview derivation, rendering, streaming, and responsive sections in the thinking-message-preview system design.
• Existing ThinkingMessage, ExpandableRow, message-renderer tests, and mobile Markdown containment scenario.

Results

Implemented a model-agnostic first-meaningful-line helper and rendered its plain-text result beside the localized Thinking label for expandable rows. Compact single-line messages remain complete, non-expandable, and readable when their inline text wraps; expanded Markdown content keeps its existing behavior. The header uses shrink-safe flex regions and truncates only the expandable preview; structural Markdown-only lines are skipped and identifier punctuation is preserved in previews.

Verification:

• cd apps && pnpm --filter @kandev/web test -- components/task/chat/messages/thinking-message.test.tsx — 7 passed.
• cd apps/web && pnpm run typecheck — passed.
• Targeted ESLint and Prettier checks — passed.
• python3 scripts/lint-spec-files.test.py and python3 scripts/lint-spec-files.py --all — passed.
• cd apps/web && pnpm e2e:run --host --project mobile-chrome tests/chat/mobile-markdown-wrap.spec.ts -- --grep "thinking preview" --retries=0 — 2 passed, including complete compact text wrapping.
• Disposable PR capture E2E — 1 passed; desktop and 393px mobile screenshots were inspected and compressed.