# Previz Tab Accordion Redesign — Implementation Plan

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

**Goal:** Replace the Previz tab's state-machine progressive disclosure with compact shot cards + an expandable detail drawer containing 5 always-accessible accordion sections.

**Architecture:** Compact cards in CSS grid show thumbnail + progress dots + status. Clicking a card expands a detail drawer (full grid width, below the card row) with 5 accordion sections: PREVIZ, HERO FRAME, FRAME CONFIG, EXTRACTION, VIDEO. One section open at a time with auto-advance. Accordion/drawer state tracked in JS variables, not DOM, to survive morphdom re-renders.

**Tech Stack:** Vanilla JS, morphdom, CSS custom properties (existing design system)

---

### Task 1: Add Accordion CSS Styles

**Files:**
- Modify: `editors/styles/console.css`

Add new CSS classes for compact cards, accordion headers/bodies, status chips, progress dots, detail drawer, forward/backward buttons. Keep existing `.kf-*` styles (they're used by other code). Add at end of file.

### Task 2: Rewrite previz.js — Module State + Compact Cards

**Files:**
- Modify: `editors/tabs/previz.js`

Replace the monolithic `renderShotCard()` with:
- Module-level state: `selectedShot`, `accordionState` (tracks open section per shot), `sceneCollapsed`
- `renderCompactCard(shot, ep)` — small card with thumbnail, shot ID, progress dots, status
- `selectShot(shotId)` — sets selectedShot, collapses previous, re-renders
- Clicking a card calls `selectShot()`

### Task 3: Implement Detail Drawer + Accordion Sections

**Files:**
- Modify: `editors/tabs/previz.js`

Add `renderDetailDrawer(shotId)` that produces 5 accordion sections. Each section:
- Header: chevron + title + status chip
- Body: the actual controls (prompts, images, buttons)
- `toggleAccordion(shotId, sectionIndex)` to open/close
- Auto-advance: when a section completes, auto-open next after 300ms

The 5 sections map to existing functionality:
1. **PREVIZ**: Image, prompt textarea, GENERATE/REGENERATE, LOCK (from States A/B)
2. **HERO FRAME**: Smart prompt, auto-optimize toggle, GENERATE HERO, REGENERATE, LOCK HERO (from States C1/C3)
3. **FRAME CONFIG**: Position radios, frame checkboxes, auto-suggestion, EXTRACT (from State C4)
4. **EXTRACTION**: Frame viewer (2 or 3 panes), RE-EXTRACT, CONFIRM → VIDEO (from State C5)
5. **VIDEO**: Status display, video preview when ready (new, placeholder for now)

### Task 4: Remove "Still Only" + Wire Auto-Save

**Files:**
- Modify: `editors/tabs/previz.js`

- Remove all `still_only` references, `toggleStillOnly`, the checkbox
- In `suggestFrameConfig()`, remove `stillOnly: true` return — ENV shots still get frame config, just defaulting to 2-frame from first
- Wire prompt textarea `onblur` to `ConsoleApp.debounceSave()` for auto-save

### Task 5: Keyboard Navigation

**Files:**
- Modify: `editors/tabs/previz.js`

When detail drawer is open and focus is not in a textarea/input:
- Left/Right: navigate between shots
- Up/Down: navigate between accordion sections
- Enter: execute primary forward action of current section
- Escape: close drawer
- 1-5: jump to accordion section by number

### Task 6: Update morphdom Integration

**Files:**
- Modify: `editors/tabs/previz.js`

- Render the detail drawer as a child of `#previz-root` but track its state in JS variables
- In morphdom `onBeforeElUpdated`: preserve accordion open states, selected shot highlighting
- `updateDetailDrawer()` for targeted updates (status chips, images) without clobbering textareas

### Task 7: Cache Bust + Smoke Test

**Files:**
- Modify: `editors/production-console.html` — update cache bust versions
- Modify: `editors/styles/console.css` — update cache bust version in HTML link

Visual verification checklist:
- Grid shows compact cards with progress dots
- Clicking a card opens detail drawer with 5 accordion sections
- Accordion auto-advances on lock/generate
- "Still Only" is gone
- Prompts auto-save on blur
- Arrow keys navigate between shots
- 40-shot episode doesn't overwhelm (test with full episode view)