๐ŸŽจ AVA Dashboard WebUI โ€” Design Spec

OPS-021 โ€” Web interface cho phรฉp quแบฃn lรฝ stories, chat per-story, configure pipeline, approve/reject phases

๐ŸŽฏ Mแปฅc tiรชu

Rio cรณ thแปƒ quแบฃn lรฝ toร n bแป™ story pipeline tแปซ browser โ€” khรดng cแบงn Discord, khรดng cแบงn CLI.

Status

๐ŸŸก Design Phase

Pages

6

Timeline

7-11 days

Deploy

Cloudflare Pages

๐Ÿ—๏ธ Architecture

โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ AVA DASHBOARD (Next.js + CF Pages) โ”‚ โ”‚ โ”‚ โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ โ”‚ โ”‚ SIDEBAR โ”‚ โ”‚ CENTER โ”‚ โ”‚ RIGHT โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ PANEL โ”‚ โ”‚ โ”‚ โ”‚ ๐Ÿ  Home โ”‚ โ”‚ Prompt โ”‚ โ”‚ Step โ”‚ โ”‚ โ”‚ โ”‚ ๐Ÿ“ฅ Inboxโ”‚ โ”‚ Bar โ”‚ โ”‚ Detail โ”‚ โ”‚ โ”‚ โ”‚ ๐Ÿ”„ Flowsโ”‚ โ”‚ โ”‚ โ”‚ / Chat โ”‚ โ”‚ โ”‚ โ”‚ ๐Ÿ“ Hubs โ”‚ โ”‚ Visual โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โš™๏ธ Set โ”‚ โ”‚ Pipeline โ”‚ โ”‚ Config โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ View โ”‚ โ”‚ Panel โ”‚ โ”‚ โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ HTTPS โ–ผ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ CLOUDFLARE WORKER (API Proxy) โ”‚ โ”‚ /api/stories /api/chat /api/pipeline โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ Cloudflare Tunnel โ–ผ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ MAC MINI M4 (24GB) โ”‚ โ”‚ โ”œโ”€โ”€ OpenClaw Gateway :18795 โ”‚ โ”‚ โ”œโ”€โ”€ PostgreSQL (Pipeline DB) โ”‚ โ”‚ โ””โ”€โ”€ orchestrator_v2 (Python FSM) โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜

Connection Options

Option ACloudflare TunnelCF Worker โ†’ Tunnel โ†’ Mac mini (production)
Option BDirect LANFrontend served locally (development)

๐Ÿ“ฑ 6 UI Pages

1. ๐Ÿ  Home

Prompt bar + recent activity. Gรต text โ†’ auto-route tแป›i tool/story phรน hแปฃp.

2. ๐Ÿ“ฅ Inbox

Story milestone feed + notifications. Click โ†’ story detail.

3. ๐Ÿ“ Hubs

Channel workspaces. Mแป—i YouTube channel = 1 Hub (own context, files, system prompt).

4. ๐Ÿ“š Stories

List within Hub + CRUD (thรชm/xรณa/archive stories).

5. ๐Ÿ“– Story Detail

Visual pipeline + chat + phase control. Core page.

6. โš™๏ธ Settings

Global config, API keys, model preferences.

๐Ÿ“š Stories List

โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ ๐Ÿฆ‰ AVA Dashboard [+ New Story] โš™๏ธ โ”‚ โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค โ”‚ โ”‚ โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ โ”‚ โ”‚ ๐ŸŸข STO-006 โ”‚ The Box Under the Bed โ”‚ โ”‚ โ”‚ โ”‚ Phase: 9/10 โ”‚ Genre: revenge โ”‚ Scenes: 25 โ”‚ โ”‚ โ”‚ โ”‚ โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–‘โ–‘โ–‘โ–‘ 90% โ”‚ โ”‚ โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ โ”‚ โ”‚ โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ โ”‚ โ”‚ ๐ŸŸก STO-007 โ”‚ The Peach Tree โ”‚ โ”‚ โ”‚ โ”‚ Phase: 3/10 โ”‚ Genre: redemption โ”‚ Scenes: 20 โ”‚ โ”‚ โ”‚ โ”‚ โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘ 30% โ”‚ โ”‚ โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ โ”‚ โ”‚ โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ โ”‚ โ”‚ โœ… STO-005 โ”‚ Margaret's Gold โ”‚ โ”‚ โ”‚ โ”‚ Views: 1.2K โ”‚ CTR: 4.8% โ”‚ Rev: $12.50 โ”‚ โ”‚ โ”‚ โ”‚ โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆ 100% โ”‚ โ”‚ โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ โ”‚ โ”‚ โ”‚ [๐Ÿ—‘๏ธ Delete] [๐Ÿ“ฆ Archive] โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜

Features

๐Ÿ“– Story Detail โ€” Split Layout

โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ โ”‚ โ”‚ โ”‚ PIPELINE PHASES โ”‚ ๐Ÿ’ฌ CHAT SESSION โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โœ… 0. Ideation โ”‚ ๐Ÿฆ‰ Bible locked. 25 scenes โ”‚ โ”‚ โœ… 1. Research โ”‚ ready. Waiting for Phase 5 โ”‚ โ”‚ โœ… 2. Bible Draft โ”‚ approval. โ”‚ โ”‚ โœ… 3. Bible Lock ๐Ÿ”’ โ”‚ โ”‚ โ”‚ โœ… 4. Outline โ”‚ Rio: Proceed with scenes โ”‚ โ”‚ ๐Ÿ”„ 5. Scene Loop โ”‚ โ”‚ โ”‚ โ”œโ”€ Scene 1-15 โœ… โ”‚ ๐Ÿฆ‰ Starting scene 16. โ”‚ โ”‚ โ”œโ”€ Scene 16 ๐Ÿ”„ โ”‚ Protagonist confronts the โ”‚ โ”‚ โ””โ”€ Scene 17-25 โณโ”‚ family at dinner... โ”‚ โ”‚ โณ 6. Assembly โ”‚ โ”‚ โ”‚ โณ 7. Output โ”‚ [Type message...] [Send] โ”‚ โ”‚ โณ 8. Thumb/SEO โ”‚ โ”‚ โ”‚ โณ 9. Upload โ”‚ โ”‚ โ”‚ โณ 10. Monitor โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ [โœ… Approve] โ”‚ [๐Ÿ”Š Voice] [๐Ÿ‘๏ธ Preview] โ”‚ โ”‚ [โ—€ Back] [โ–ถ Skip] โ”‚ [๐Ÿ“Š Cost] [๐Ÿ“‹ Log] โ”‚ โ”‚ โ”‚ โ”‚ โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ดโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค โ”‚ Gate: G5 โ€” Scene 16/25 โ”‚ Attempts: 1/15 โ”‚ โ”‚ Cost: $2.45 / $150 โ”‚ Tokens: 45K in / 8K out โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜

Left Panel โ€” Pipeline Phases

  • Visual progress tree (Phase 0-10)
  • Status icons: โœ… done / ๐Ÿ”„ running / โณ waiting / โŒ failed / ๐Ÿ›‘ blocked
  • Scene loop: expandable per-scene status
  • Click phase โ†’ view gate tokens, auditor scores, timestamps

Right Panel โ€” Chat Session

  • Dedicated OpenClaw session per story
  • Streaming responses, markdown, code blocks
  • Context auto-loaded: bible, scenes, config
  • History preserved across page visits
  • Quick commands: /status /approve /cost

๐Ÿ’ฌ Chat Session Integration

Session Architecture

Story STO-006 โ†’ OpenClaw session key: "ava:story:STO-006"
               โ”œโ”€โ”€ Context auto-loaded: bible, scene specs, gate status
               โ”œโ”€โ”€ Model: configurable per-story (default: claude-sonnet-4.6)
               โ””โ”€โ”€ History: persistent in OpenClaw sessions/

Chat Features (match OpenClaw WebUI)

FeatureDescription
StreamingReal-time token display
MarkdownCode blocks, tables, lists
HistoryScroll back through conversation
ContextAVA knows story, phase, gate status
Tool resultsShow tool calls inline
Commands/status /approve /reject /config /cost /preview

WebSocket Protocol

Client โ†’ Server: { type: "message", storyId: "STO-006", text: "..." }
Server โ†’ Client: { type: "chunk", text: "..." }          // streaming
Server โ†’ Client: { type: "tool_call", name: "..." }
Server โ†’ Client: { type: "tool_result", content: "..." }
Server โ†’ Client: { type: "done", messageId: "..." }
Server โ†’ Client: { type: "phase_update", phase: 5, status: "running" }

โš™๏ธ Pipeline Config

โ”€โ”€ STORY IDENTITY โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ Title: [The Box Under the Bed ] Genre: [revenge โ–ผ] โ† GENRE_REGISTRY Archetype: [betrayed_victim โ–ผ] โ† ARCHETYPE_REGISTRY Mode: โ—‹ Guided โ— Auto โ”€โ”€ VOICE & AUDIO โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ Voice: [Fish Audio - Calm Storyteller โ–ผ] [โ–ถ Preview] WPM: [145] Music: [Ambient - Dark Moody โ–ผ] SFX Pack: [Upgraded Cinematic โ–ผ] โ”€โ”€ VISUAL CONCEPT โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ Image Gen: [Gemini โ–ผ] Style: [Cinematic / Dark Moody โ–ผ] LUT: [kodak_2383_cinematic.cube โ–ผ] Resolution:[1920x1080 โ–ผ] Ken Burns: โ— Enabled โ—‹ Disabled โ”€โ”€ PIPELINE PARAMETERS โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ Scene Count: [25] Text Pre-roll: [0.12]s CRF Quality: [18] Cost Limit: [150] Max Rewrites: [15] โ”€โ”€ MOOD / EMOTIONAL CURVE โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ [๐Ÿ“ˆ Interactive curve editor โ€” drag points] 1.0 โ”ค โ— โ”‚ โ•ฑ โ•ฒ โ— 0.5 โ”ค โ— โ•ฑ โ•ฒ โ•ฑ โ•ฒ โ”‚โ•ฑ โ•ฒ โ— 0.0 โ”ผโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ 0% 25% 50% 75% 100% โ”€โ”€ QUALITY THRESHOLDS โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ Consistency: [9.0] Originality: [8.5] Hook: [8.5] Cliffhanger: [8.0] Emotional: [8.5] TTS: [9.0] [๐Ÿ’พ Save Config] [โ†ฉ๏ธ Reset Defaults]

Dropdown Sources

DropdownSource
GenreGENRE_REGISTRY keys from config.py
ArchetypeARCHETYPE_REGISTRY, filtered by compatible genres
VoiceFish Audio voices + preview button
Style/LUTpipeline/assets/luts/ directory
Mood curveInteractive drag-points โ†’ emotional_curve in genre config

๐ŸŽฎ Phase Control

ActionButtonEffectConditions
Approveโœ… ApproveAdvance โ†’ next phaseCurrent phase complete, gate PASS
Backโ—€ BackRegress โ†’ previous phaseAny time (confirm required)
Forwardโ–ถ ForwardSkip aheadAdmin override, double-confirm
Abort๐Ÿ›‘ AbortStop โ†’ BLOCKEDAny time
Retry๐Ÿ”„ RetryRe-run current phaseOn failure/block

API Example

// Rio clicks [โœ… Approve] on Phase 3
POST /api/stories/STO-006/gate
{ "action": "approve", "phase": 3, "note": "Bible looks good" }

โ†’ { "success": true, "gate_token": "G3_abc...", "next_phase": 4 }

// Rio clicks [โ—€ Back] from Phase 5 to 4
POST /api/stories/STO-006/gate
{ "action": "regress", "to_phase": 4, "note": "Scene specs need revision" }

๐Ÿ”„ Genspark Workflows Integration

Concept

Lแบฅy cแบฃm hแปฉng tแปซ Genspark Workflows (visual no-code pipeline builder). AVA ฤ‘รฃ cรณ pipeline code โ†’ ta build visual interface lรชn trรชn pipeline cรณ sแบตn, khรดng build lแบกi.

Mapping Genspark โ†’ AVA

Genspark ConceptAVA EquivalentImplementation
Workflows (visual steps)Pipeline Phase ViewVertical step flow, click โ†’ detail panel
Hub (project workspace)Channel WorkspaceMแป—i YouTube channel = 1 Hub (own context/files)
TemplatesStory Templates"Quick Revenge", "Hidden Identity" pre-configs
Natural Language CreateSmart Story Creation"Tแบกo story revenge vแป..." โ†’ auto-fill config
InboxStory Milestone FeedMilestone notifications + click to detail
"Test run"Manual trigger 1 phaseRun single phase on demand
"Turn on"Toggle Auto modeSwitch Guided โ†” Auto

Hub per Channel

๐Ÿ“ Family Revenge Stories

Brand rules, voice config, 50+ audience presets, revenge/healing templates

๐ŸŸข Active

๐Ÿ“ The Love Compass

Different brand, audience, tone. Navy/gold palette, psychology content

๐ŸŸก Planned

Workflow Templates

๐Ÿ“‹ Quick Revenge Story

Research โ†’ Bible โ†’ 25 Scenes โ†’ Voice โ†’ Visual โ†’ Render โ†’ Upload

Genre: revenge, Archetype: betrayed_victim, Dark mood

๐Ÿ“‹ Hidden Identity Story

Research โ†’ Bible (2-layer villain) โ†’ Earned backstory โ†’ Scenes โ†’ Render

Genre: hidden_identity, 2-layer villain, Earned backstory

๐Ÿ“‹ Custom Template

Drag & drop phases, custom genre/archetype/curve

Full configuration, no presets

Natural Language Creation

Rio gรต: "Tแบกo story revenge vแป bร  ngoแบกi bแป‹ con rแปƒ phแบฃn bแป™i, 25 scenes, dark mood"

โ†’ Dashboard auto-fills:
  Genre: revenge
  Archetype: betrayed_victim
  Scene count: 25
  Mood: dark
  Voice: calm storyteller
  โ†’ [Review & Create]

๐Ÿ”ง Tech Stack

LayerTechnologyRationale
FrontendNext.js 15 + React 19SSR, RSC, great DX
StylingTailwind CSS + shadcn/uiFast, consistent dark theme
Chat UICustom (OpenClaw patterns)Streaming, markdown, tools
StateZustand + React QueryLightweight cache + real-time
WebSocketCF Durable ObjectsPer-story persistent connections
BackendCloudflare WorkersEdge compute, low latency
TunnelcloudflaredSecure Mac mini โ†” CF
AuthCloudflare Access (Zero Trust)SSO, no exposed ports
DBPostgreSQL via tunnelExisting data, no migration
Deploywrangler pages deployAlready in codebase

๐Ÿ”Œ API Endpoints

โ”€โ”€ STORIES โ”€โ”€
GET    /api/stories                    # List all stories
POST   /api/stories                    # Create new story
GET    /api/stories/:id                # Detail + phase status
DELETE /api/stories/:id                # Soft-delete
PATCH  /api/stories/:id/config         # Update pipeline config

โ”€โ”€ GATES โ”€โ”€
POST   /api/stories/:id/gate           # approve / back / forward
GET    /api/stories/:id/gates          # All gate tokens
GET    /api/stories/:id/events         # Event log (JSONL)
GET    /api/stories/:id/cost           # Cost report

โ”€โ”€ CHAT โ”€โ”€
WS     /api/stories/:id/chat           # WebSocket session
GET    /api/stories/:id/chat/history   # Chat history

โ”€โ”€ CONFIG โ”€โ”€
GET    /api/config/genres              # GENRE_REGISTRY
GET    /api/config/archetypes          # ARCHETYPE_REGISTRY
GET    /api/config/voices              # Available voices
GET    /api/config/styles              # Visual styles + LUTs

๐Ÿ“… Implementation Timeline โ€” 7-11 Days

โ“ Open Questions cho Rio

1. Auth

Cloudflare Access (recommended) hay custom login?

2. Domain

dashboard.ava-project.com hay tรชn khรกc?

3. Multi-user

Chแป‰ Rio access hay cแบงn role system (viewer/editor/admin)?

4. Chat model

Default model cho story chat sessions? Sonnet hay Opus?

5. CF Account

ฤรฃ cรณ Cloudflare account chฦฐa? Free plan ฤ‘แปง.

6. Real-time

WebSocket live updates hay polling ฤ‘แปง?

AVA Dashboard WebUI โ€” Design Spec v1.0
Last updated: 2026-03-24 | OPS-021