Jyotisha/docs/superpowers/plans/2026-07-17-chat-interaction-state-polish.md

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.