Carlos Florêncio
130 lines
5.3 KiB
Markdown
130 lines
5.3 KiB
Markdown
---
|
|
id: "01-render-thinking-message-previews"
|
|
title: "Render thinking-message previews"
|
|
status: done
|
|
wave: 1
|
|
depends_on: []
|
|
plan: "plan.md"
|
|
requirements:
|
|
- REQ-UI-THINKING-MESSAGE-PREVIEW-001
|
|
acceptance_criteria:
|
|
- 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
|
|
system_design:
|
|
- ../../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:
|
|
|
|
```bash
|
|
cd apps && pnpm install --frozen-lockfile
|
|
```
|
|
|
|
Run the focused TDD and validation commands:
|
|
|
|
```bash
|
|
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.
|