# AI Typewriter Output 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:** Make all existing AI stream outputs in mini-program, life-script, and web show a themed loading state first, then reveal generated text smoothly one character at a time.

**Architecture:** Keep backend stream protocol unchanged. Add a small typewriter buffer utility per frontend stack and wire pages/stores to display the typewriter-visible text while retaining the full stream output for saving and final state.

**Tech Stack:** Vue 3/uni-app, React, Pinia, WebSocket/SSE streaming.

---

### Task 1: Mini Program Typewriter

**Files:**
- Create: `mini-program/src/composables/useTypewriterStream.js`
- Modify: `mini-program/src/pages/main/ScriptView.vue`
- Modify: `mini-program/src/pages/main/PathView.vue`
- Modify: `mini-program/src/pages/life-event/form.vue`

- [x] Add a composable with `visibleText`, `isWaiting`, `isStreaming`, `push`, `finish`, `fail`, `reset`, `dispose`.
- [x] In `ScriptView.vue`, push each full stream output to the composable and render `visibleText`.
- [x] Improve the generating panel with themed loading copy and a typing cursor.
- [x] In `PathView.vue` and `life-event/form.vue`, use typewriter visible text for AI output.

### Task 2: Life Script Typewriter

**Files:**
- Create: `life-script/src/hooks/useTypewriterStream.js`
- Modify: `life-script/src/views/ScriptView.jsx`
- Modify: `life-script/src/views/PathView.jsx`
- Modify: `life-script/src/views/TimelineView.jsx`

- [x] Add a React hook with the same buffer behavior.
- [x] Replace direct `setStreamContent(output)` / `setStreamFeedback(output)` calls with `push(output)`.
- [x] Render hook `visibleText` during AI generation.
- [x] Add a subtle glass loading state before the first visible character.

### Task 3: Web Chat Typewriter

**Files:**
- Modify: `web/src/stores/chat.ts`

- [x] Add per-message pending buffers and timer maps inside the chat store.
- [x] On `AI_STREAM_DELTA`, append delta to the buffer and start a timer for the target message.
- [x] On `AI_STREAM_DONE`, mark the message as done only after the pending buffer is empty.
- [x] On error or disconnect, stop timers for affected messages.

### Task 4: Verification

**Commands:**
- `cd mini-program && npm run build:mp-weixin`
- `cd life-script && npm run build`
- `cd web && npm run build`
- `git diff --check`

- [x] Mini-program build passes.
- [x] life-script build passes.
- [x] web build passes.
- [x] Diff check reports no new whitespace errors.
