{meta()?.label ?? "NO ARTIFACT MOUNTED"}
{ e.stopPropagation(); toggle(); }}>
{isOpen() ? "▾" : "▸"}
store.switchProject(props.project.name)}>
{props.project.name}
{isOpen() ? "▾" : "▸"}
{props.ep.episode_id}
{isOpen() ? "▾" : "▸"}
{props.sceneId === "_" ? "(unscened)" : props.sceneId}
{props.beat.beat_id}
{props.beat.eval_score != null ? props.beat.eval_score.toFixed(2) : "—"}
);
}
```
### Tree keyboard navigation (Phase 12 sub-agent: implement)
- Up/Down: move focus to prev/next visible tree node (a node is visible if all ancestors are expanded). Use a flat list rebuilt from the rendered DOM (`treeRef.querySelectorAll(".v2-tree-node")`).
- Right: if collapsed, expand. If already expanded, move down to first child.
- Left: if expanded, collapse. If already collapsed, move up to parent.
- Enter: dispatch the node's `onClick` (move focus / toggle expand).
### Scope boundary
- Do NOT fetch takes here (mount on the TakesBrowser does that)
- Do NOT mutate any state outside the store
- Do NOT add drag-and-drop, multi-select beyond Shift+Click, or reordering — V1 scope
### Validation
```bash
cd /Users/joeturnerlin/Dropbox/CLAUDE_PROJECTS/recoil/pipeline/editors/v2 && \
grep -q "ProjectNode" src/components/Navigator.tsx && \
grep -q "EpisodeNode" src/components/Navigator.tsx && \
grep -q "BeatNode" src/components/Navigator.tsx && \
grep -q "store.setFocus" src/components/Navigator.tsx && \
grep -q "store.setMount" src/components/Navigator.tsx && \
grep -q "store.toggleSelectBeat" src/components/Navigator.tsx && \
npm run typecheck && \
echo "Phase 12 OK"
```
---
## Phase 13: Artifact Stage + Template Registry + 3 Initial Templates
**depends_on:** 11
**engine:** opus (registry contract); Gemini for the 3 template implementations
### What already exists (from prior phases)
- `store.mount()` returns the current `ArtifactMount` (template name + context)
- `api.ts` with `fetchBeats`, `fetchTakes`
- CSS for `.v2-stage`, `.v2-stage-chrome`, `.v2-stage-content`, `.v2-eval-badge`
### Files to create
- `recoil/pipeline/editors/v2/src/templates/BaseTemplate.tsx` — contract
- `recoil/pipeline/editors/v2/src/templates/registry.ts` — registry + dynamic loader
- `recoil/pipeline/editors/v2/src/templates/EpisodeOverview.tsx`
- `recoil/pipeline/editors/v2/src/templates/TakesBrowser.tsx`
- `recoil/pipeline/editors/v2/src/templates/BeatOverview.tsx`
- `recoil/pipeline/editors/v2/src/components/EvalBadge.tsx`
### Files to modify
- `recoil/pipeline/editors/v2/src/components/ArtifactStage.tsx`
### Template contract — `BaseTemplate.tsx`
```typescript
/**
* Template contract.
*
* Templates are Solid components that:
* - take `context: Record
SELECT A BEAT OR TYPE A COMMAND
);
}
```
### `EvalBadge.tsx` (shared component)
```typescript
import type { EvalBadgeState } from "../types.gen";
export default function EvalBadge(props: { state: EvalBadgeState; score?: number | null }) {
const label = () => {
if (props.state === "evaluated" && props.score != null) return `[${props.score.toFixed(2)}]`;
return { evaluated: "[?.??]", skip: "[---]", error: "[!]", config_miss: "[?]" }[props.state];
};
const cls = () => `v2-eval-badge ${
props.state === "evaluated" ? "evaluated" :
props.state === "skip" ? "skip" :
props.state === "error" ? "error" : "config-miss"
}`;
return {label()};
}
```
### `EpisodeOverview.tsx`
```typescript
import { createResource, For, Show } from "solid-js";
import { fetchBeats } from "../api";
import { store } from "../store";
import EvalBadge from "../components/EvalBadge";
import type { TemplateMeta } from "./BaseTemplate";
export const meta: TemplateMeta = {
name: "EpisodeOverview", label: "EPISODE OVERVIEW",
contextSchema: ["episode"],
};
export default function EpisodeOverview(props: { context: Record{episode() || "—"}
| BEAT | SCENE | STATUS | EVAL | COST | TAKES |
|---|---|---|---|---|---|
| {b.beat_id} | {b.scene_id ?? "—"} | {b.status} |
|
${b.cost_usd.toFixed(3)} | {b.take_count} |
{beatId() || "—"} · {takes()?.length ?? 0} TAKES
store.setFocus({ take: t.take_id })}
style={{ background:"var(--bg-card)",
border: t.is_primary ? "2px solid var(--accent-cyan)"
: "1px solid var(--border-dim)",
"border-radius":"var(--radius-md)", overflow:"hidden",
cursor:"pointer", "aspect-ratio":"9 / 16",
display:"flex", "flex-direction":"column" }}>
★ PRIMARY
)}
{t.take_id}
{
store.setFocus({ episode: episode(), beat: b.beat_id });
store.setMount("TakesBrowser", { beat_id: b.beat_id });
}}
style={{ background:"var(--bg-card)",
border:"1px solid var(--border-dim)",
"border-radius":"var(--radius-sm)",
padding:"8px", cursor:"pointer",
display:"flex","flex-direction":"column", gap:"4px" }}>
)}{b.beat_id}
{
if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) { e.preventDefault(); approve(); }
}}>
{props.payload.type}
{props.payload.rationale}
{error()}
{props.payload.beat_id} — prompt rewrite
{props.payload.new_prompt}
;
}
function ProposalScriptEdit(props: { payload: any }) {
return <>
{props.payload.beat_id} · {props.payload.field}
{props.payload.new_value}
;
}
function ProposalParameterChange(props: { payload: any }) {
return <>
Parameter change · {props.payload.beat_ids?.length ?? 0} beats
{JSON.stringify(props.payload.parameters, null, 2)}
;
}
function ProposalGeneric(props: { payload: any }) {
return <>
{props.payload.type}
{JSON.stringify(props.payload, null, 2)}
;
}
```
### `ChatPanel.tsx`
```typescript
import { createSignal, createEffect, For, Match, Switch } from "solid-js";
import { fetchChatHistory, postChat } from "../api";
import { tryFastPath } from "../fastpath";
import { store } from "../store";
import ProposalCard from "./ProposalCard";
import type { ChatStreamEvent } from "../types.gen";
type DisplayMessage =
| { kind: "user"; text: string }
| { kind: "assistant"; text: string; streaming: boolean }
| { kind: "system"; text: string }
| { kind: "proposal"; payload: any };
export default function ChatPanel() {
const [messages, setMessages] = createSignal