Wyzowl Video Studio

1// Wyzowl Video Studio's hooks module (one per plugin), both parts only in a session inside a studio (a folder with
2// studio.json): the band above Claude's message box, and the answer box around Claude's final answer.
3//
4// The band: when a script, storyboard or video is waiting for the person's review it says so, with a button that opens
5// that page; while Claude makes something it says what, and the step it's on, with "Watch", which opens the video's
6// overview (where it shows as it happens); otherwise "Working on a video?" with "Open dashboard". The button opens the
7// page beside the chat (the desktop app's browser pane, opened if it's closed) or in the web browser. What's waiting is
8// checked when the session starts, after each of Claude's turns and after each studio tool Claude runs (they mark the
9// steps), never on a timer. Dismissed, the band stays away until something new is waiting.
10//
11// The answer box: Claude's final message of a turn that did some work (used a tool) is drawn in a rounded box with a
12// yellow border and a faint yellow ground, so after a long run of tool calls it's plain where the answer starts. A turn
13// that was only a reply draws as usual, and so does every message before the final one. The final message is told by
14// its text (turn.complete's answer), each answer's fingerprint a member of its own, so a new answer redraws its own
15// message alone.
16//
17// Everything that uses the engine (`$`) or registers a hook (`on`) is in this one file, as Anthropic's plugin directory
18// asks of a mod.
19import { atom, read, update } from 'claude-code'
20import type { EngineInterface, Register } from 'claude-code'
21import type { ReadyPage } from '../types'
22
23const studioAt = atom({ plugin: 'video-studio', key: 'studio' } as const, '')
24const readyAt = atom({ plugin: 'video-studio', key: 'ready' } as const, null as ReadyPage | null)
25const dismissedAt = atom({ plugin: 'video-studio', key: 'dismissed' } as const, '')
26// one member per boxed answer, by its fingerprint
27const BOXED = { plugin: 'video-studio', key: 'boxed' } as const
28
29// Homebrew's node on Apple silicon and Intel Macs, ahead of the system's own folders
30const PATH = '/opt/homebrew/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin'
31// the studio's own tools, which move a stage under way on: what the band says may have changed
32const STUDIO_TOOL = /studio\.mjs|render-frames\.mjs|sheets\.mjs|footage\.mjs/
33
34const YELLOW = '#F9B336'
35// the same yellow at 10%, where the surface paints with transparency (the terminal can't: there, the border alone)
36const TINT = '#F9B3361A'
37
38/** The studio this session works in: the nearest folder at or above its root that holds studio.json, or ''. */
39async function findStudio($: EngineInterface): Promise<string> {
40  let dir = (await $.session.root()).replace(/\/+$/, '') || '/'
41  for (;;) {
42    if (await $.fs.exists(`${dir === '/' ? '' : dir}/studio.json`)) return dir
43    if (dir === '/') return ''
44    dir = dir.replace(/\/[^/]+$/, '') || '/'
45  }
46}
47
48/** Runs the studio helper (scripts/studio.mjs) for the studio; its output, or '' when it fails. */
49async function helper($: EngineInterface, studio: string, args: string[]): Promise<string> {
50  const argv = ['/usr/bin/env', `PATH=${PATH}`, 'node', `${$.plugin.root}/scripts/studio.mjs`, ...args, '--studio', studio]
51  const run = await $.process.run(argv, { timeoutMs: 20000 }).catch(() => null)
52  return run?.exitCode === 0 ? run.stdout.trim() : ''
53}
54
55/** What's waiting for the person's review now, or else what Claude is making (studio.mjs ready), into the band's state. */
56async function checkReady($: EngineInterface, studio: string): Promise<void> {
57  let page: ReadyPage | null = null
58  try {
59    const now = JSON.parse(await helper($, studio, ['ready']))
60    page = now.page ?? now.making ?? null
61  } catch {}
62  await update($, readyAt, () => page)
63}
64
65/** Starts the studio's page server if needed and opens a page: beside the chat, or in the web browser. */
66async function openPage($: EngineInterface, studio: string, path: string): Promise<void> {
67  const url = (await helper($, studio, ['url', path])).split('\n').pop() ?? ''
68  if (!/^http:\/\/127\.0\.0\.1:\d+\//.test(url)) {
69    $.ui.toast(`Couldn't open the studio's pages. In Claude, run /video-studio:dashboard to see why.`)
70    return
71  }
72  const beside = await $.mcp.call('Claude_Browser', 'preview_start', { url }).catch(() => null)
73  if (beside && !beside.isError) return
74  await $.process.run(['/usr/bin/open', url]).catch(() => null)
75}
76
77/** A short, stable name for a message's text: its length and a hash of it, whitespace evened out. */
78function fingerprint(text: string): string {
79  const s = text.replace(/\s+/g, ' ').trim()
80  let hash = 0x811c9dc5
81  for (let i = 0; i < s.length; i++) hash = Math.imul(hash ^ s.charCodeAt(i), 0x01000193)
82  return `${s.length.toString(36)}-${(hash >>> 0).toString(36)}`
83}
84
85export const register: Register = on => {
86  // ───────── the band ─────────
87  on('session.start', async ($, e, next) => {
88    const started = await next(e)
89    const studio = await findStudio($)
90    await update($, studioAt, () => studio)
91    if (studio) await checkReady($, studio)
92    return started
93  })
94
95  // after each of Claude's own turns (not a subagent's), see what's waiting now: a new storyboard, a reviewed video
96  on('turn.complete', async ($, e, next) => {
97    const studio = await read($, studioAt)
98    if (studio && e.agentId === undefined) $.clock.after(0, () => void checkReady($, studio).catch(() => {}))
99    return next(e)
100  })
101
102  // after each studio tool Claude runs, see what it's making now ("Claude is making storyboard v3: make the frames")
103  on('tool.call', { tool: 'Bash' }, async ($, e, next) => {
104    const ran = await next(e)
105    try {
106      const studio = await read($, studioAt)
107      if (studio && STUDIO_TOOL.test(String(e.command ?? ''))) $.clock.after(0, () => void checkReady($, studio).catch(() => {}))
108    } catch {}
109    return ran
110  })
111
112  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
113    const studio = await read($, studioAt)
114    const ready = await read($, readyAt)
115    const shows = ready?.path ?? 'idle'
116    if (!studio || e.props.hasSurvey || (await read($, dismissedAt)) === shows) return next(e)
117    const { Box, Text, Button } = $.ui.resolve(e)
118    return (
119      <Box key="studio-bar" flexDirection="row" justifyContent="space-between" alignItems="center" gap={2}>
120        <Text>{ready ? ready.text : 'Working on a video?'}</Text>
121        <Box flexDirection="row" alignItems="center" gap={1}>
122          <Button
123            key="open"
124            variant="primary"
125            label={ready ? ready.button : 'Open dashboard'}
126            onPress={() => openPage($, studio, ready ? ready.path : '/')}
127          />
128          <Button key="dismiss" role="dismiss" label="Dismiss" onPress={() => update($, dismissedAt, () => shows)} />
129        </Box>
130      </Box>
131    )
132  })
133
134  // ───────── the answer box ─────────
135  // did this turn do any work? (a module value: a reload mid-turn just leaves that one answer unboxed)
136  let worked = false
137
138  on('turn.start', ($, e, next) => {
139    worked = false
140    return next(e)
141  })
142
143  on('tool.call', ($, e, next) => {
144    worked = true
145    return next(e)
146  })
147
148  // a turn that ended with an answer: the main loop's, not a subagent's report (turn.start starts each one afresh)
149  on('turn.complete', { reason: 'answer' }, async ($, e, next) => {
150    const done = await next(e)
151    if (e.agentId === undefined) {
152      if (worked && e.answer.trim() && (await read($, studioAt))) await update($, { ...BOXED, id: fingerprint(e.answer) }, () => true)
153      worked = false
154    }
155    return done
156  })
157
158  on('ui.render', { component: 'AssistantMessage' }, async ($, e, next) => {
159    if (e.props.isSummary || !e.props.text.trim() || !(await read($, studioAt))) return next(e)
160    if (!(await read($, { ...BOXED, id: fingerprint(e.props.text) }))) return next(e)
161    const drawn = await next(e)
162    const { Box } = $.ui.resolve(e)
163    const ground = e.surface === 'terminal' ? {} : { backgroundColor: TINT }
164    return (
165      <Box key="answer-box" flexDirection="column" borderStyle="round" borderColor={YELLOW} paddingX={1} {...ground}>
166        {drawn}
167      </Box>
168    )
169  })
170}
171

1// The values Wyzowl Video Studio's band (in hooks/index.tsx) keeps for the session: the studio it works in ('' outside
2// one), the page waiting for the person's review (from `studio.mjs ready`), and what the person dismissed (a page's
3// path, or 'idle' for the dashboard band). The answer box (also in hooks/index.tsx) keeps which of Claude's answers to
4// draw boxed, each by a fingerprint of its text.
5export type StudioPath = string
6
7/** A script, storyboard or video waiting for review: its page path, the band's words and its button's label. */
8export type ReadyPage = { path: string; text: string; button: string }
9
10declare module 'claude-code' {
11  interface PluginState {
12    'video-studio': { studio: StudioPath; ready: ReadyPage | null; dismissed: string; boxed: StateFamily<boolean> }
13  }
14}
15