scriptflow/docs/plans/2026-03-11-account-sync-drafts.md

Account Sync Drafts Implementation Plan

For Claude: REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.

Goal: Add lightweight account/password auth, cloud draft persistence, cross-device restore, resumable episode conversion, and full-regenerate controls.

Architecture: Keep the current Vite frontend, add a minimal Express + SQLite backend under server/, and let the frontend auto-save/load the current draft for the logged-in account. Continue using the existing conversion UI, but persist the generated episode results and resume state remotely.

Tech Stack: React 19, TypeScript, Vite, Express, better-sqlite3, Node crypto, SQLite

---

Task 1: Create backend skeleton and shared storage model

Files:

• Create: server/index.ts
• Create: server/db.ts
• Create: server/auth.ts
• Modify: package.json
• Modify: vite.config.ts

Step 1: Add a backend run script

• Add dev:server and dev:full scripts.
• Keep existing frontend scripts unchanged.

Step 2: Create SQLite schema helpers

• Add users, sessions, and drafts tables.
• Store one current draft JSON blob per user for now.

Step 3: Add Express server bootstrap

• Enable JSON body parsing.
• Mount auth and draft endpoints under /api.

Step 4: Add Vite proxy for local development

• Proxy /api to the local backend server.

Step 5: Verify backend compiles under TypeScript

• Run npm run lint.

Task 2: Implement lightweight account/password authentication

Files:

• Modify: server/db.ts
• Modify: server/auth.ts
• Modify: server/index.ts

Step 1: Implement password hashing with Node crypto

• Use scryptSync + random salt.

Step 2: Add register endpoint

• Accept username and password.
• Reject duplicate usernames and invalid payloads.

Step 3: Add login endpoint

• Verify password.
• Create a random session token and persist it.

Step 4: Add auth middleware

• Read bearer token.
• Resolve current user from sessions.

Step 5: Add session restore endpoint

• Return current user info when token is valid.

Task 3: Add cloud draft persistence endpoints

Files:

• Modify: server/db.ts
• Modify: server/index.ts
• Create: server/types.ts

Step 1: Define draft payload shape

• Include conversion settings, extracted episodes, conversion episode results, finalized selections, and source metadata.

Step 2: Add load current draft endpoint

• Return the saved draft JSON for the authenticated user.

Step 3: Add save current draft endpoint

• Upsert the latest draft JSON and update timestamp.

Step 4: Add reset/restart endpoint if needed

• Allow frontend to intentionally replace cloud draft on full regeneration.

Task 4: Add frontend auth state and draft synchronization

Files:

• Create: src/services/api.ts
• Modify: src/App.tsx
• Modify: src/main.tsx if needed

Step 1: Add auth modal/panel UI

• Support register and login with username/password.

Step 2: Add token persistence

• Save token locally and restore session on app load.

Step 3: Load remote draft on login/app restore

• Hydrate the conversion state from the server.

Step 4: Auto-save remote draft

• Debounce save calls when relevant conversion state changes.
• Save generated content and manual edits.

Task 5: Strengthen resumable conversion workflow

Files:

• Modify: src/App.tsx
• Modify: src/services/ai.ts
• Modify: src/lib/conversionWorkflow.ts
• Modify: tests/conversionWorkflow.test.ts

Step 1: Preserve current stop/resume behavior

• Keep paused episode/version state intact.

Step 2: Add <D6><D8><D0><C2>ȫ<B2><BF><C9><FA><B3><C9> control

• When a resumable state exists, show both <BC><CC><D0><F8><D0><F8><BC><AF><C9><FA><B3><C9> and <D6><D8><D0><C2>ȫ<B2><BF><C9><FA><B3><C9>.
• Full regenerate clears existing generated episode results before starting from episode 1.

Step 3: Ensure manual edits persist

• Save edited episode version content into draft state and remote storage.

Task 6: Enforce continuity and scope constraints in generation

Files:

• Modify: src/App.tsx
• Modify: src/services/ai.ts

Step 1: Build previous-episode continuity context

• For episode N, pass episode N-1 selected final version, or current active version if not finalized.

Step 2: Restrict generation scope

• Explicitly tell the model to only generate within the current episode outline shown on the left.

Step 3: Reassert global constraints

• Require adherence to worldview, story outline, and core character settings.

Step 4: Keep resume continuation safe

• Continue from already generated content without rewriting earlier text.

Task 7: Verification

Files:

• Test: tests/conversionWorkflow.test.ts
• Test: backend endpoint smoke verification via local commands

Step 1: Run draft workflow unit test

• Run node --experimental-strip-types tests/conversionWorkflow.test.ts

Step 2: Run type-check

• Run npm run lint

Step 3: Run production build

• Run npm run build

Step 4: Smoke-test backend boot if possible

• Start local backend and verify auth/draft endpoints respond.