fix: polish chat interaction states

2026-07-17 15:31:39 +08:00
parent 129033787d
commit 45acb8278b
6 changed files with 171 additions and 6 deletions
@@ -0,0 +1,63 @@
+# Chat Interaction State Polish Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Keep suggestions stable until submission, allow read-only session switching during a request, and tighten two compact header/composer layouts.
+
+**Architecture:** Preserve request, billing, and session persistence logic. Change only JSX visibility/disabled guards and token-driven CSS, with source contract tests that fail on regression.
+
+**Tech Stack:** Next.js 16, React 19, TypeScript, Node test runner, CSS design tokens.
+
+## Global Constraints
+
+- Do not enable concurrent sends.
+- Do not alter billing, cancellation, or model routing.
+- Do not push the branch.
+- Preserve unrelated working-tree changes.
+
+---
+
+### Task 1: Suggestion visibility
+
+**Files:**
+- Modify: `frontend/tests/starter-questions.test.ts`
+- Modify: `frontend/src/app/page.tsx`
+- Modify: `frontend/DESIGN.md`
+
+- [ ] Add failing contracts proving neither initial nor follow-up visibility guards reference `draft`.
+- [ ] Run `node --test tests/starter-questions.test.ts` and confirm the follow-up contract fails.
+- [ ] Remove the draft guard from follow-up suggestions while retaining loading and cancellation guards.
+- [ ] Re-run the focused test and confirm it passes.
+
+### Task 2: Session navigation during requests
+
+**Files:**
+- Modify: `frontend/tests/starter-questions.test.ts`
+- Modify: `frontend/src/app/page.tsx`
+
+- [ ] Add a failing contract proving session-history buttons do not use `pendingSessionId` or `cancellationPending` as `disabled` state.
+- [ ] Remove the disabled prop from existing-session buttons only; keep new-chat and send locks unchanged.
+- [ ] Re-run the focused test and confirm it passes.
+
+### Task 3: Compact model selector and aligned credits
+
+**Files:**
+- Modify: `frontend/tests/starter-questions.test.ts`
+- Modify: `frontend/src/app/globals.css`
+- Modify: `frontend/DESIGN.md`
+
+- [ ] Add failing CSS contracts for a 180px model popup and a one-line centered credit value.
+- [ ] Change the popup width to `min(180px, calc(100vw - var(--space-6)))`.
+- [ ] Make the credit value an inline flex box with `line-height: 1` and retain the existing 16px icon.
+- [ ] Re-run the focused test and confirm it passes.
+
+### Task 4: Verification and commit
+
+**Files:**
+- Verify all modified frontend files.
+
+- [ ] Run `npm test`, `npx tsc --noEmit`, and `npm run lint`.
+- [ ] Run `npm run build` with the local environment loaded.
+- [ ] Verify the empty-session preview keeps cards during typing and removes them after submit; verify follow-up suggestions follow the same rule.
+- [ ] Inspect the final diff for unrelated files and debug artifacts.
+- [ ] Commit only this feature's files; do not push.
@@ -0,0 +1,26 @@
+# Chat Interaction State Polish
+
+## Goal
+
+Make question suggestions, session navigation, the model selector, and the credit indicator behave predictably without changing chat billing or allowing concurrent sends.
+
+## Approved behavior
+
+- Initial question cards remain visible while a user types or selects a question. They disappear only when the first user message is submitted.
+- Follow-up suggestions remain visible while a user types or selects one. The current set disappears when the next user message is submitted; the next assistant answer may provide a new set.
+- Existing sessions remain selectable while another session has a pending request. The pending request continues against its original session, while all new sends remain globally locked until it settles.
+- The model popover width is reduced from 360px to 180px, with viewport collision protection retained.
+- The credit icon and number share the same visual center using the existing flex layout and a compact line box.
+
+## Architecture
+
+Keep the current session-scoped request routing and billing locks. Correct only the UI guards: suggestion visibility follows submitted message state rather than draft state, session navigation no longer inherits the send lock, and CSS uses existing design tokens for the two layout adjustments.
+
+## Error and cancellation behavior
+
+Cancellation remains unchanged. If a send is withdrawn before output and the optimistic user message is removed, the previous suggestion set can reappear with the restored draft.
+
+## Verification
+
+- Contract tests cover draft-independent initial and follow-up suggestions, unlocked session navigation, the 180px popover, and credit alignment.
+- Run the full frontend test suite, TypeScript, ESLint, production build, and a local preview interaction check.