happy-life-star/docs/superpowers/plans/2026-05-24-mini-program-script-generation-feedback.md

Mini Program Script Generation Feedback 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: Add animated progress, long-wait guidance, and graceful failure recovery to the mini-program 心愿实现中 screen.

Architecture: Keep all AI stream calls unchanged and add a small local feedback state in ScriptView.vue. The screen uses timer thresholds to distinguish normal waiting, slow waiting, very slow waiting, streaming output, and failure.

Tech Stack: Vue 3 single-file component, uni-app mini-program build, existing useTypewriterStream composable.

---

Task 1: Add Generation Feedback State

Files:

• Modify: mini-program/src/pages/main/ScriptView.vue

• Add generationStatus, generationError, generationHintIndex, and lastSubmitSource refs.

• Add local timers for rotating hints, 8-second slow state, and 20-second very-slow state.

• Add startGenerationFeedback, clearGenerationFeedbackTimers, markGenerationStreaming, and markGenerationFailed helpers.

• Clear timers on success, failure, returning home, and component unmount.

Task 2: Update Generation Flow

Files:

• Modify: mini-program/src/pages/main/ScriptView.vue

• Call startGenerationFeedback() when submitWish enters viewState = 'generating'.

• Call markGenerationStreaming() in the stream onDelta callback before pushing typewriter text.

• On failure, keep viewState = 'generating' and show a failure state instead of immediately returning home with only a toast.

• Add retryGeneration() and returnToEdit() actions for the failure state.

Task 3: Update Generation Screen UI

Files:

• Modify: mini-program/src/pages/main/ScriptView.vue

• Replace static 心愿实现中…… copy with computed generationTitle.

• Add thinking dots when no stream output has arrived.

• Add a secondary hint line under the main loading copy.

• Add failure actions 再试一次 and 返回修改 when generationStatus === 'failed'.

Task 4: Add Themed Animations

Files:

• Modify: mini-program/src/pages/main/ScriptView.vue

• Animate .loading-orbit with a gentle breathing pulse.

• Animate .loading-orbit::after as the small orbiting light.

• Add animated thinking dots inside the system bubble.

• Style the failure copy and actions in the current purple/gold theme.

Task 5: Validate

Commands:

• cd mini-program && npm run build:mp-weixin

• git diff --check

• Mini-program build passes.

• Diff check reports no new whitespace errors.