screenhand 0.2.0 → 0.3.1

package/dist-playbooks/google-flow-edit-video.json

@@ -0,0 +1,90 @@
+{
+  "id": "google-flow-edit-video",
+  "name": "Google Flow — Edit Video",
+  "description": "Open a Flow project, switch to video assets, open a matching video edit URL, and apply an Extend or Camera edit through Flow's internal prompt tray. EXTEND, CAMERA_MOTION, and CAMERA_POSITION are fully automated. INSERT and REMOVE are staged because they still need on-frame region selection unless {AUTO_SUBMIT} is explicitly set to 1.",
+  "platform": "google-flow",
+  "version": "1.0.0",
+  "urlPatterns": [
+    "*labs.google/fx/tools/flow*"
+  ],
+  "tags": [
+    "google-flow",
+    "browser",
+    "cdp",
+    "video",
+    "edit"
+  ],
+  "successCount": 0,
+  "failCount": 0,
+  "steps": [
+    {
+      "action": "navigate",
+      "url": "https://labs.google/fx/tools/flow",
+      "description": "Open the Flow dashboard"
+    },
+    {
+      "action": "wait",
+      "ms": 1500,
+      "description": "Wait for dashboard project cards"
+    },
+    {
+      "action": "browser_js",
+      "code": "(() => { const visible = el => { const r = el.getBoundingClientRect(); const s = getComputedStyle(el); return r.width > 0 && r.height > 0 && s.visibility !== 'hidden' && s.display !== 'none'; }; const rawWanted = `{PROJECT_NAME}`.trim(); const wanted = rawWanted.toLowerCase(); const hasWanted = !!rawWanted && rawWanted !== '{PROJECT_NAME}'; const links = [...document.querySelectorAll(\"a[href*='/fx/tools/flow/project/']\")].filter(visible); if (!links.length) throw new Error('No Flow project cards found'); const pick = hasWanted ? links.find(link => ((link.closest('div')?.textContent || link.parentElement?.textContent || '')).toLowerCase().includes(wanted)) : links[0]; if (!(pick instanceof HTMLAnchorElement)) throw new Error(hasWanted ? `Flow project not found: ${rawWanted}` : 'No clickable Flow project found'); const url = pick.href || pick.getAttribute('href'); if (!url) throw new Error('Project card is missing href'); window.location.assign(url); return url; })()",
+      "description": "Open the matching project card",
+      "verify": "[role='textbox'][contenteditable='true'][data-slate-editor='true']",
+      "verifyTimeoutMs": 15000
+    },
+    {
+      "action": "wait",
+      "ms": 800,
+      "description": "Allow the project editor to settle"
+    },
+    {
+      "action": "browser_js",
+      "code": "(() => { const button = [...document.querySelectorAll('button')].find(el => (el.textContent || '').includes('View videos')); if (button instanceof HTMLElement) button.click(); return !!button; })()",
+      "description": "Switch the asset rail to videos when the filter is present"
+    },
+    {
+      "action": "wait",
+      "ms": 400,
+      "description": "Wait for the video grid filter to apply"
+    },
+    {
+      "action": "browser_js",
+      "code": "(() => { const visible = el => { const r = el.getBoundingClientRect(); const s = getComputedStyle(el); return r.width > 0 && r.height > 0 && s.visibility !== 'hidden' && s.display !== 'none'; }; const rawUrl = `{ASSET_URL}`.trim(); const rawId = `{ASSET_ID}`.trim(); const rawIndex = `{ASSET_INDEX}`.trim(); const wantedIndex = rawIndex && rawIndex !== '{ASSET_INDEX}' ? Number(rawIndex) : 0; const anchors = [...document.querySelectorAll(\"a[href*='/edit/']\")].filter(visible).filter(anchor => { const tile = anchor.closest(\"[id^='fe_id_']\") || anchor.parentElement; return !!tile?.querySelector('video') || /play_circle/.test(tile?.textContent || ''); }); let pick = null; if (rawUrl && rawUrl !== '{ASSET_URL}') pick = anchors.find(anchor => anchor.href === rawUrl); else if (rawId && rawId !== '{ASSET_ID}') pick = anchors.find(anchor => anchor.href.includes(`/edit/${rawId}`) || anchor.closest(`[id='fe_id_${rawId}']`)); else pick = anchors[Math.max(0, wantedIndex)] || anchors[0]; if (!(pick instanceof HTMLAnchorElement)) throw new Error('No Flow video edit link found'); window.location.assign(pick.href); return pick.href; })()",
+      "description": "Open the requested video asset in edit view",
+      "verify": "[role='textbox'][contenteditable='true'][data-slate-editor='true']",
+      "verifyTimeoutMs": 15000
+    },
+    {
+      "action": "wait",
+      "ms": 600,
+      "description": "Allow the video editor to settle"
+    },
+    {
+      "action": "browser_js",
+      "code": "(() => { const modeRaw = `{EDIT_MODE}`.trim().toUpperCase(); const mode = !modeRaw || modeRaw === '{EDIT_MODE}' ? 'EXTEND' : modeRaw; const autoSubmit = `{AUTO_SUBMIT}`.trim() === '1'; const clickButton = text => { const button = [...document.querySelectorAll('button')].find(el => (el.textContent || '').includes(text)); if (!(button instanceof HTMLElement)) throw new Error(`Flow video control not found: ${text}`); button.click(); return text; }; const pickPreset = preferred => { const buttons = [...document.querySelectorAll('button')]; const exact = buttons.find(el => (el.textContent || '').trim() === preferred); const fuzzy = buttons.find(el => (el.textContent || '').includes(preferred)); const button = exact || fuzzy; if (!(button instanceof HTMLElement)) throw new Error(`Flow camera preset not found: ${preferred}`); button.click(); return preferred; }; return new Promise(resolve => { let shouldSubmit = false; let needsPrompt = false; let selected = mode; const finish = extra => { window.__flowVideoEditMode = mode; window.__flowVideoEditShouldSubmit = shouldSubmit; window.__flowVideoEditNeedsPrompt = needsPrompt; resolve(JSON.stringify({ mode, shouldSubmit, needsPrompt, selected, ...extra })); }; if (mode === 'EXTEND') { clickButton('Extend'); shouldSubmit = true; needsPrompt = true; finish({}); return; } if (mode === 'CAMERA_MOTION' || mode === 'CAMERA_POSITION') { clickButton('Camera'); setTimeout(() => { clickButton(mode === 'CAMERA_MOTION' ? 'Camera motion' : 'Camera position'); const rawPreset = `{CAMERA_PRESET}`.trim(); const preferred = rawPreset && rawPreset !== '{CAMERA_PRESET}' ? rawPreset : mode === 'CAMERA_MOTION' ? 'Dolly in' : 'Center'; selected = pickPreset(preferred); shouldSubmit = true; needsPrompt = false; finish({}); }, 120); return; } if (mode === 'INSERT') { clickButton('Insert'); shouldSubmit = autoSubmit; needsPrompt = true; finish({ stagedOnly: !autoSubmit }); return; } if (mode === 'REMOVE') { clickButton('Remove'); shouldSubmit = autoSubmit; needsPrompt = false; finish({ stagedOnly: !autoSubmit }); return; } throw new Error(`Unsupported Flow video edit mode: ${mode}`); }); })()",
+      "description": "Choose the video edit mode and stage any camera or region-selection UI"
+    },
+    {
+      "action": "browser_js",
+      "code": "(() => { if (!window.__flowVideoEditShouldSubmit || !window.__flowVideoEditNeedsPrompt) return JSON.stringify({ skipped: true, reason: window.__flowVideoEditShouldSubmit ? 'no_prompt_needed' : 'staged_only' }); const prompt = `{PROMPT_TEXT}`.trim(); if (!prompt || prompt === '{PROMPT_TEXT}') throw new Error('PROMPT_TEXT variable is required for this Flow video edit mode'); const editorEl = document.querySelector(\"[role='textbox'][contenteditable='true'][data-slate-editor='true']\"); if (!(editorEl instanceof HTMLElement)) throw new Error('Flow video edit prompt box not found'); const fiberKey = Object.keys(editorEl).find(k => k.startsWith('__reactFiber')); let cur = fiberKey ? editorEl[fiberKey] : null; let store = null; for (let i = 0; cur && i < 9; i++, cur = cur.return) { if (i === 7) { store = cur.memoizedProps?.promptBoxStore; break; } } const state = store?.getState?.(); const actions = state?.actions; const textEditor = state?.inputs?.textEditor; if (!actions || !textEditor) throw new Error('Flow video edit store not found'); if (typeof actions.setMode === 'function') actions.setMode('VIDEO'); const currentText = textEditor.children?.[0]?.children?.[0]?.text ?? ''; try { textEditor.select({ anchor: { path: [0, 0], offset: 0 }, focus: { path: [0, 0], offset: currentText.length } }); } catch {} try { textEditor.deleteFragment(); } catch {} textEditor.insertText(prompt); try { textEditor.onChange(); } catch {} const text = (textEditor.children || []).map(node => (node.children || []).map(child => child.text || '').join('')).join('\\n'); window.__flowVideoEditPrompt = text; return JSON.stringify({ prompt: text, mode: store.getState().mode, editMode: window.__flowVideoEditMode || 'EXTEND' }); })()",
+      "description": "Insert the video edit prompt when the selected mode needs one"
+    },
+    {
+      "action": "browser_js",
+      "code": "(() => { if (!window.__flowVideoEditShouldSubmit) return JSON.stringify({ submitted: false, reason: 'staged_only' }); const submitButton = [...document.querySelectorAll('button')].find(el => (el.textContent || '').includes('arrow_forward') && (el.textContent || '').includes('Create')); if (!(submitButton instanceof HTMLElement)) throw new Error('Flow video edit submit button not found'); const fiberKey = Object.keys(submitButton).find(k => k.startsWith('__reactFiber')); let cur = fiberKey ? submitButton[fiberKey] : null; let onSubmit = null; for (let i = 0; cur && i < 6; i++, cur = cur.return) { if (i === 5) { onSubmit = cur.memoizedProps?.onSubmit; break; } } if (typeof onSubmit !== 'function') throw new Error('Flow video edit onSubmit handler not found'); window.__flowVideoEditBaseline = { resourceCount: performance.getEntriesByType('resource').length }; onSubmit(); return JSON.stringify({ submitted: true, baseline: window.__flowVideoEditBaseline, editMode: window.__flowVideoEditMode || 'EXTEND' }); })()",
+      "description": "Submit the video edit through Flow's internal handler"
+    },
+    {
+      "action": "browser_js",
+      "code": "(() => { if (!window.__flowVideoEditShouldSubmit) return JSON.stringify({ staged: true }); const baseline = window.__flowVideoEditBaseline || { resourceCount: 0 }; const seenRequest = () => performance.getEntriesByType('resource').slice(baseline.resourceCount).some(entry => /video:batchAsyncGenerateVideoText|flowWorkflows\\//.test(entry.name)); const start = Date.now(); return new Promise(resolve => { const check = () => { if (seenRequest()) { resolve(JSON.stringify({ submitted: true, generationRequestSeen: true, editMode: window.__flowVideoEditMode || 'EXTEND' })); return; } if (Date.now() - start > 30000) { resolve(JSON.stringify({ submitted: false, generationRequestSeen: false, editMode: window.__flowVideoEditMode || 'EXTEND' })); return; } setTimeout(check, 1000); }; check(); }); })()",
+      "description": "Wait for Flow to issue the video edit request"
+    },
+    {
+      "action": "screenshot",
+      "description": "Capture the video editor after staging or submission",
+      "optional": true
+    }
+  ]
+}

package/dist-playbooks/google-flow-generate-image.json

@@ -0,0 +1,68 @@
+{
+  "id": "google-flow-generate-image",
+  "name": "Google Flow — Generate Image",
+  "description": "Open a Flow project, switch the internal prompt store to IMAGE mode, insert {PROMPT_TEXT} into Flow's Slate text editor, and submit through the prompt tray's internal onSubmit handler. If {PROJECT_NAME} is omitted, the first visible project is used.",
+  "platform": "google-flow",
+  "version": "1.0.0",
+  "urlPatterns": [
+    "*labs.google/fx/tools/flow*"
+  ],
+  "tags": [
+    "google-flow",
+    "browser",
+    "cdp",
+    "image",
+    "generate"
+  ],
+  "successCount": 0,
+  "failCount": 0,
+  "steps": [
+    {
+      "action": "navigate",
+      "url": "https://labs.google/fx/tools/flow",
+      "description": "Open the Flow dashboard"
+    },
+    {
+      "action": "wait",
+      "ms": 1500,
+      "description": "Wait for dashboard project cards"
+    },
+    {
+      "action": "browser_js",
+      "code": "(() => { const visible = el => { const r = el.getBoundingClientRect(); const s = getComputedStyle(el); return r.width > 0 && r.height > 0 && s.visibility !== 'hidden' && s.display !== 'none'; }; const rawWanted = `{PROJECT_NAME}`.trim(); const wanted = rawWanted.toLowerCase(); const hasWanted = !!rawWanted && rawWanted !== '{PROJECT_NAME}'; const links = [...document.querySelectorAll(\"a[href*='/fx/tools/flow/project/']\")].filter(visible); if (!links.length) throw new Error('No Flow project cards found'); const pick = hasWanted ? links.find(link => ((link.closest('div')?.textContent || link.parentElement?.textContent || '')).toLowerCase().includes(wanted)) : links[0]; if (!(pick instanceof HTMLAnchorElement)) throw new Error(hasWanted ? `Flow project not found: ${rawWanted}` : 'No clickable Flow project found'); const url = pick.href || pick.getAttribute('href'); if (!url) throw new Error('Project card is missing href'); window.location.assign(url); return url; })()",
+      "description": "Open the matching project card",
+      "verify": "[role='textbox'][contenteditable='true'][data-slate-editor='true']",
+      "verifyTimeoutMs": 15000
+    },
+    {
+      "action": "wait",
+      "ms": 800,
+      "description": "Allow the prompt panel to settle"
+    },
+    {
+      "action": "browser_js",
+      "code": "(() => { const editorEl = document.querySelector(\"[role='textbox'][contenteditable='true'][data-slate-editor='true']\"); if (!(editorEl instanceof HTMLElement)) throw new Error('Flow prompt box not found'); const fiberKey = Object.keys(editorEl).find(k => k.startsWith('__reactFiber')); let cur = fiberKey ? editorEl[fiberKey] : null; let store = null; for (let i = 0; cur && i < 9; i++, cur = cur.return) { if (i === 7) { store = cur.memoizedProps?.promptBoxStore; break; } } const state = store?.getState?.(); const actions = state?.actions; if (!actions) throw new Error('Flow prompt store actions not found'); const aspectRaw = `{ASPECT_RATIO}`.trim(); const aspect = aspectRaw && aspectRaw !== '{ASPECT_RATIO}' ? aspectRaw.toUpperCase() : 'LANDSCAPE'; const outputsRaw = `{OUTPUT_COUNT}`.trim(); const outputs = outputsRaw && outputsRaw !== '{OUTPUT_COUNT}' ? Number(outputsRaw) : 1; actions.setMode('IMAGE'); if (typeof actions.setAspectRatio === 'function') actions.setAspectRatio(aspect === 'PORTRAIT' ? 'PORTRAIT' : 'LANDSCAPE'); if (typeof actions.setOutputsPerPrompt === 'function' && Number.isFinite(outputs) && outputs >= 1) actions.setOutputsPerPrompt(outputs); return JSON.stringify({ mode: store.getState().mode, aspectRatio: store.getState().aspectRatio, outputsPerPrompt: store.getState().outputsPerPrompt }); })()",
+      "description": "Set Flow to IMAGE mode through the internal prompt store"
+    },
+    {
+      "action": "browser_js",
+      "code": "(() => { const prompt = `{PROMPT_TEXT}`.trim(); if (!prompt || prompt === '{PROMPT_TEXT}') throw new Error('PROMPT_TEXT variable is required'); const editorEl = document.querySelector(\"[role='textbox'][contenteditable='true'][data-slate-editor='true']\"); if (!(editorEl instanceof HTMLElement)) throw new Error('Flow prompt box not found'); const fiberKey = Object.keys(editorEl).find(k => k.startsWith('__reactFiber')); let cur = fiberKey ? editorEl[fiberKey] : null; let store = null; for (let i = 0; cur && i < 9; i++, cur = cur.return) { if (i === 7) { store = cur.memoizedProps?.promptBoxStore; break; } } const textEditor = store?.getState?.().inputs?.textEditor; if (!textEditor) throw new Error('Flow text editor not found'); const currentText = textEditor.children?.[0]?.children?.[0]?.text ?? ''; try { textEditor.select({ anchor: { path: [0, 0], offset: 0 }, focus: { path: [0, 0], offset: currentText.length } }); } catch {} try { textEditor.deleteFragment(); } catch {} textEditor.insertText(prompt); try { textEditor.onChange(); } catch {} const text = (textEditor.children || []).map(node => (node.children || []).map(child => child.text || '').join('')).join('\\n'); window.__flowPromptText = text; return JSON.stringify({ prompt: text, mode: store.getState().mode, aspectRatio: store.getState().aspectRatio }); })()",
+      "description": "Insert the generation prompt through Flow's internal Slate editor"
+    },
+    {
+      "action": "browser_js",
+      "code": "(() => { const uniqueTiles = () => [...new Set([...document.querySelectorAll('[data-tile-id]')].map(el => el.getAttribute('data-tile-id')).filter(Boolean))]; const submitButton = [...document.querySelectorAll('button')].find(el => (el.textContent || '').includes('arrow_forward') && (el.textContent || '').includes('Create')); if (!(submitButton instanceof HTMLElement)) throw new Error('Flow submit button not found'); const fiberKey = Object.keys(submitButton).find(k => k.startsWith('__reactFiber')); let cur = fiberKey ? submitButton[fiberKey] : null; let onSubmit = null; for (let i = 0; cur && i < 6; i++, cur = cur.return) { if (i === 5) { onSubmit = cur.memoizedProps?.onSubmit; break; } } if (typeof onSubmit !== 'function') throw new Error('Flow internal onSubmit handler not found'); window.__flowSubmitBaseline = { tileCount: uniqueTiles().length, resourceCount: performance.getEntriesByType('resource').length }; onSubmit(); return JSON.stringify(window.__flowSubmitBaseline); })()",
+      "description": "Submit through Flow's internal prompt tray handler"
+    },
+    {
+      "action": "browser_js",
+      "code": "(() => { const baseline = window.__flowSubmitBaseline || { tileCount: 0, resourceCount: 0 }; const uniqueTiles = () => [...new Set([...document.querySelectorAll('[data-tile-id]')].map(el => el.getAttribute('data-tile-id')).filter(Boolean))]; const hasGenerationRequest = () => performance.getEntriesByType('resource').slice(baseline.resourceCount).some(entry => /flowMedia:batchGenerateImages|flowWorkflows\\//.test(entry.name)); const start = Date.now(); return new Promise(resolve => { const check = () => { const tileCount = uniqueTiles().length; if (tileCount > baseline.tileCount || hasGenerationRequest()) { resolve(JSON.stringify({ submitted: true, tileCount, baselineTileCount: baseline.tileCount, generationRequestSeen: hasGenerationRequest() })); return; } if (Date.now() - start > 30000) { resolve(JSON.stringify({ submitted: false, tileCount, baselineTileCount: baseline.tileCount, generationRequestSeen: false })); return; } setTimeout(check, 1000); }; check(); }); })()",
+      "description": "Wait for Flow to create an image generation request or a new tile"
+    },
+    {
+      "action": "screenshot",
+      "description": "Capture the project after submission",
+      "optional": true
+    }
+  ]
+}

package/dist-playbooks/google-flow-generate-video.json

@@ -0,0 +1,191 @@
+{
+  "id": "google-flow-generate-video",
+  "name": "Google Flow — Generate Video",
+  "description": "Open a Flow project, select video settings (model, aspect ratio, generation mode) through UI tab clicks, type {PROMPT_TEXT} via keyboard into the Slate editor, and submit by clicking the Create button. Requires {PROJECT_URL} for direct navigation. Defaults to Veo 3.1 Fast, Portrait, Frames mode for image-to-video workflows.",
+  "platform": "google-flow",
+  "version": "4.0.0",
+  "urlPatterns": [
+    "*labs.google/fx/tools/flow*"
+  ],
+  "tags": [
+    "google-flow",
+    "browser",
+    "cdp",
+    "video",
+    "generate",
+    "frames"
+  ],
+  "successCount": 1,
+  "failCount": 0,
+  "notes": [
+    "CRITICAL: For job_create inline steps, browser_js code goes in the 'description' field (not 'text' or 'code'). The job runner calls execBrowserJs(step.description).",
+    "CRITICAL: The ONLY reliable submit method is the job runner's 'click' action with target 'Create'. browser_human_click fails with 'Element not found via CDP'. JS-dispatched MouseEvents and programmatic onSubmit() from fiber tree both fire but silently do nothing.",
+    "CRITICAL: Settings panel tabs use Material Icons font for icons — the icon name (e.g. 'videocam') may or may not appear in textContent depending on font loading state. Match tabs by their label text ('Video', 'Image', 'Frames', etc.) not icon names.",
+    "Settings panel is opened by clicking the button whose text includes crop_16_9 or crop_9_16 plus x[1234]. All settings inside use role='tab' with aria-selected.",
+    "Frames mode lets you create video from reference images (start frame, end frame, or both). Ingredients mode lets you reference uploaded media assets.",
+    "Video generation costs 20 credits per output on Veo 3.1 Fast. Check weekly limit before generating.",
+    "type_text action works for prompt entry after focusing the Slate editor via browser_js and clearing with document.execCommand.",
+    "The prompt editor is focused and cleared with: editor.focus(); document.execCommand('selectAll'); document.execCommand('delete');",
+    "Wait 800ms+ after opening the settings panel before clicking tabs, otherwise tabs may not be rendered yet."
+  ],
+  "jobStepsTemplate": [
+    {
+      "action": "navigate",
+      "target": "{PROJECT_URL}",
+      "description": "Open the Flow project"
+    },
+    {
+      "action": "browser_js",
+      "description": "(() => { const start = Date.now(); return new Promise(resolve => { const check = () => { if (document.querySelector(\"[role='textbox'][contenteditable='true'][data-slate-editor='true']\")) { resolve('editor ready'); return; } if (Date.now() - start > 15000) { resolve('timeout'); return; } setTimeout(check, 500); }; check(); }); })()"
+    },
+    {
+      "action": "browser_js",
+      "description": "(() => { const btn = [...document.querySelectorAll('button')].find(el => { const t = el.textContent || ''; return (t.includes('crop_16_9') || t.includes('crop_9_16')) && t.match(/x[1234]/); }); if (!btn) throw new Error('Settings button not found'); btn.click(); return 'opened settings panel'; })()"
+    },
+    {
+      "action": "browser_js",
+      "description": "(() => { return new Promise(resolve => setTimeout(() => resolve('panel rendered'), 800)); })()"
+    },
+    {
+      "action": "browser_js",
+      "description": "(() => { const tabs = [...document.querySelectorAll('[role=\"tab\"]')]; const videoTab = tabs.find(el => { const t = (el.textContent || '').toLowerCase(); return t.includes('video') && !t.includes('image'); }); if (!videoTab) throw new Error('Video tab not found among: ' + tabs.map(t => t.textContent?.trim()).join(' | ')); videoTab.click(); return 'Video mode selected (aria-selected=' + videoTab.getAttribute('aria-selected') + ')'; })()"
+    },
+    {
+      "action": "browser_js",
+      "description": "(() => { return new Promise(resolve => { setTimeout(() => { const tabs = [...document.querySelectorAll('[role=\"tab\"]')]; const framesTab = tabs.find(el => (el.textContent || '').includes('Frames')); if (framesTab && framesTab.getAttribute('aria-selected') !== 'true') framesTab.click(); const portraitTab = tabs.find(el => (el.textContent || '').includes('Portrait')); if (portraitTab && portraitTab.getAttribute('aria-selected') !== 'true') portraitTab.click(); resolve('Frames + Portrait applied'); }, 300); }); })()"
+    },
+    {
+      "action": "browser_js",
+      "description": "(() => { return new Promise(resolve => { setTimeout(() => { const btn = [...document.querySelectorAll('button')].find(el => { const t = el.textContent || ''; return (t.includes('crop_16_9') || t.includes('crop_9_16')) && t.match(/x[1234]/); }); if (btn) btn.click(); resolve('settings panel closed'); }, 300); }); })()"
+    },
+    {
+      "action": "wait",
+      "description": "Allow settings to settle"
+    },
+    {
+      "action": "browser_js",
+      "description": "(() => { const ed = document.querySelector(\"[role='textbox'][contenteditable='true'][data-slate-editor='true']\"); if (ed) { ed.focus(); document.execCommand('selectAll'); document.execCommand('delete'); } return 'prompt editor focused and cleared'; })()"
+    },
+    {
+      "action": "type_text",
+      "text": "{PROMPT_TEXT}",
+      "description": "Type the video generation prompt via keyboard"
+    },
+    {
+      "action": "wait",
+      "description": "Allow Slate to process typed text"
+    },
+    {
+      "action": "click",
+      "target": "Create",
+      "description": "Click the Create button to start video generation"
+    },
+    {
+      "action": "browser_js",
+      "description": "(() => { const start = Date.now(); return new Promise(resolve => { const check = () => { const body = document.body.innerText; if (body.includes('Generating') || body.match(/\\d+%/)) { resolve('video generation started'); return; } if (Date.now() - start > 20000) { resolve('timeout waiting for generation indicator'); return; } setTimeout(check, 1000); }; check(); }); })()"
+    },
+    {
+      "action": "screenshot",
+      "description": "Capture the project after submission"
+    }
+  ],
+  "steps": [
+    {
+      "action": "navigate",
+      "url": "{PROJECT_URL}",
+      "description": "Navigate directly to the Flow project URL"
+    },
+    {
+      "action": "wait",
+      "ms": 2000,
+      "description": "Wait for page to load"
+    },
+    {
+      "action": "browser_js",
+      "code": "(() => { const start = Date.now(); return new Promise(resolve => { const check = () => { if (document.querySelector(\"[role='textbox'][contenteditable='true'][data-slate-editor='true']\")) { resolve('editor ready'); return; } if (Date.now() - start > 15000) { resolve('timeout waiting for editor'); return; } setTimeout(check, 500); }; check(); }); })()",
+      "description": "Wait for the Slate prompt editor to appear (up to 15s)"
+    },
+    {
+      "action": "wait",
+      "ms": 500,
+      "description": "Allow the prompt panel to settle"
+    },
+    {
+      "action": "browser_js",
+      "code": "(() => { const settingsBtn = [...document.querySelectorAll('button')].find(el => { const t = (el.textContent || ''); return (t.includes('crop_16_9') || t.includes('crop_9_16')) && t.match(/x[1234]/); }); if (!(settingsBtn instanceof HTMLElement)) throw new Error('Settings button not found'); settingsBtn.click(); return 'opened settings panel'; })()",
+      "description": "Open the generation settings panel by clicking the mode/aspect/count button"
+    },
+    {
+      "action": "wait",
+      "ms": 800,
+      "description": "Allow settings panel to fully render before clicking tabs"
+    },
+    {
+      "action": "browser_js",
+      "code": "(() => { const tabs = [...document.querySelectorAll('[role=\"tab\"]')]; const videoTab = tabs.find(el => { const t = (el.textContent || '').toLowerCase(); return t.includes('video') && !t.includes('image'); }); if (!videoTab) throw new Error('Video tab not found among: ' + tabs.map(t => t.textContent?.trim()).join(' | ')); videoTab.click(); return 'Video mode selected'; })()",
+      "description": "Select Video mode"
+    },
+    {
+      "action": "wait",
+      "ms": 300,
+      "description": "Allow mode switch to settle"
+    },
+    {
+      "action": "browser_js",
+      "code": "(() => { const rawMode = `{GENERATION_MODE}`.trim(); const mode = (!rawMode || rawMode === '{GENERATION_MODE}') ? 'Frames' : rawMode; const tab = [...document.querySelectorAll('[role=\"tab\"]')].find(el => (el.textContent || '').includes(mode)); if (tab && tab.getAttribute('aria-selected') !== 'true') tab.click(); return `${mode} mode selected`; })()",
+      "description": "Select Frames or Ingredients mode (defaults to Frames for image-to-video)"
+    },
+    {
+      "action": "browser_js",
+      "code": "(() => { const rawAspect = `{ASPECT_RATIO}`.trim().toLowerCase(); const aspect = (!rawAspect || rawAspect === '{aspect_ratio}') ? 'Portrait' : (rawAspect === 'landscape' ? 'Landscape' : 'Portrait'); const tab = [...document.querySelectorAll('[role=\"tab\"]')].find(el => (el.textContent || '').includes(aspect)); if (tab && tab.getAttribute('aria-selected') !== 'true') tab.click(); return `${aspect} aspect selected`; })()",
+      "description": "Select aspect ratio (defaults to Portrait)"
+    },
+    {
+      "action": "browser_js",
+      "code": "(() => { const btn = [...document.querySelectorAll('button')].find(el => { const t = (el.textContent || ''); return (t.includes('crop_16_9') || t.includes('crop_9_16')) && t.match(/x[1234]/); }); if (btn) btn.click(); return 'closed settings panel'; })()",
+      "description": "Close the settings panel"
+    },
+    {
+      "action": "wait",
+      "ms": 500,
+      "description": "Allow settings to settle"
+    },
+    {
+      "action": "browser_click",
+      "selector": "[role='textbox'][contenteditable='true'][data-slate-editor='true']",
+      "description": "Click/focus the prompt editor before typing"
+    },
+    {
+      "action": "browser_type",
+      "selector": "[role='textbox'][contenteditable='true'][data-slate-editor='true']",
+      "text": "{PROMPT_TEXT}",
+      "clear": true,
+      "description": "Type the video prompt via CDP keyboard events"
+    },
+    {
+      "action": "wait",
+      "ms": 300,
+      "description": "Allow Slate to process the typed text"
+    },
+    {
+      "action": "browser_js",
+      "code": "(() => { const btn = [...document.querySelectorAll('button')].find(el => (el.textContent || '').includes('arrow_forward') && (el.textContent || '').includes('Create')); if (!btn) throw new Error('Create button not found'); btn.id = 'flow-create-submit'; return 'tagged Create button'; })()",
+      "description": "Assign a unique ID to the Create submit button"
+    },
+    {
+      "action": "browser_human_click",
+      "selector": "#flow-create-submit",
+      "description": "Click the Create button with realistic mouse events to trigger video generation"
+    },
+    {
+      "action": "browser_js",
+      "code": "(() => { const start = Date.now(); return new Promise(resolve => { const check = () => { const body = document.body.innerText; if (body.includes('Generating') || body.match(/\\d+%/)) { resolve('video generation started'); return; } if (Date.now() - start > 20000) { resolve('timeout waiting for generation indicator'); return; } setTimeout(check, 1000); }; check(); }); })()",
+      "description": "Verify that video generation started"
+    },
+    {
+      "action": "screenshot",
+      "description": "Capture the project after submission",
+      "optional": true
+    }
+  ]
+}

package/dist-playbooks/google-flow-open-project.json

@@ -0,0 +1,48 @@
+{
+  "id": "google-flow-open-project",
+  "name": "Google Flow — Open Project",
+  "description": "Open a Google Flow project from the dashboard. If {PROJECT_NAME} is provided, the playbook opens the first card whose container text matches it; otherwise it opens the first visible project.",
+  "platform": "google-flow",
+  "version": "1.0.0",
+  "urlPatterns": [
+    "*labs.google/fx/tools/flow*"
+  ],
+  "tags": [
+    "google-flow",
+    "browser",
+    "cdp",
+    "project",
+    "open"
+  ],
+  "successCount": 0,
+  "failCount": 0,
+  "steps": [
+    {
+      "action": "navigate",
+      "url": "https://labs.google/fx/tools/flow",
+      "description": "Open the Flow dashboard"
+    },
+    {
+      "action": "wait",
+      "ms": 1500,
+      "description": "Wait for dashboard project cards"
+    },
+    {
+      "action": "browser_js",
+      "code": "(() => { const visible = el => { const r = el.getBoundingClientRect(); const s = getComputedStyle(el); return r.width > 0 && r.height > 0 && s.visibility !== 'hidden' && s.display !== 'none'; }; const rawWanted = `{PROJECT_NAME}`.trim(); const wanted = rawWanted.toLowerCase(); const hasWanted = !!rawWanted && rawWanted !== '{PROJECT_NAME}'; const links = [...document.querySelectorAll(\"a[href*='/fx/tools/flow/project/']\")].filter(visible); if (!links.length) throw new Error('No Flow project cards found'); const pick = hasWanted ? links.find(link => ((link.closest('div')?.textContent || link.parentElement?.textContent || '')).toLowerCase().includes(wanted)) : links[0]; if (!(pick instanceof HTMLAnchorElement)) throw new Error(hasWanted ? `Flow project not found: ${rawWanted}` : 'No clickable Flow project found'); const url = pick.href || pick.getAttribute('href'); if (!url) throw new Error('Project card is missing href'); window.location.assign(url); return url; })()",
+      "description": "Open the matching project card",
+      "verify": "input[aria-label='Editable text']",
+      "verifyTimeoutMs": 15000
+    },
+    {
+      "action": "wait",
+      "ms": 1000,
+      "description": "Allow the project editor to settle"
+    },
+    {
+      "action": "screenshot",
+      "description": "Capture the open project editor",
+      "optional": true
+    }
+  ]
+}

package/dist-playbooks/google-flow-open-scenebuilder.json

@@ -0,0 +1,64 @@
+{
+  "id": "google-flow-open-scenebuilder",
+  "name": "Google Flow — Open Scenebuilder",
+  "description": "Open a Flow project and switch into Scenebuilder. If {PROJECT_NAME} is omitted, the first visible project is used. This playbook stages scene work but does not reorder clips because the current playbook engine has no drag step.",
+  "platform": "google-flow",
+  "version": "1.0.0",
+  "urlPatterns": [
+    "*labs.google/fx/tools/flow*"
+  ],
+  "tags": [
+    "google-flow",
+    "browser",
+    "cdp",
+    "scene",
+    "scenebuilder"
+  ],
+  "successCount": 0,
+  "failCount": 0,
+  "steps": [
+    {
+      "action": "navigate",
+      "url": "https://labs.google/fx/tools/flow",
+      "description": "Open the Flow dashboard"
+    },
+    {
+      "action": "wait",
+      "ms": 1500,
+      "description": "Wait for dashboard project cards"
+    },
+    {
+      "action": "browser_js",
+      "code": "(() => { const visible = el => { const r = el.getBoundingClientRect(); const s = getComputedStyle(el); return r.width > 0 && r.height > 0 && s.visibility !== 'hidden' && s.display !== 'none'; }; const rawWanted = `{PROJECT_NAME}`.trim(); const wanted = rawWanted.toLowerCase(); const hasWanted = !!rawWanted && rawWanted !== '{PROJECT_NAME}'; const links = [...document.querySelectorAll(\"a[href*='/fx/tools/flow/project/']\")].filter(visible); if (!links.length) throw new Error('No Flow project cards found'); const pick = hasWanted ? links.find(link => ((link.closest('div')?.textContent || link.parentElement?.textContent || '')).toLowerCase().includes(wanted)) : links[0]; if (!(pick instanceof HTMLAnchorElement)) throw new Error(hasWanted ? `Flow project not found: ${rawWanted}` : 'No clickable Flow project found'); const url = pick.href || pick.getAttribute('href'); if (!url) throw new Error('Project card is missing href'); window.location.assign(url); return url; })()",
+      "description": "Open the matching project card",
+      "verify": "[role='textbox'][contenteditable='true'][data-slate-editor='true']",
+      "verifyTimeoutMs": 15000
+    },
+    {
+      "action": "wait",
+      "ms": 600,
+      "description": "Allow the project toolbar to settle"
+    },
+    {
+      "action": "browser_js",
+      "code": "(() => { const visible = el => { const r = el.getBoundingClientRect(); const s = getComputedStyle(el); return r.width > 0 && r.height > 0 && s.visibility !== 'hidden' && s.display !== 'none'; }; const button = [...document.querySelectorAll('button,[role=\"button\"]')].filter(visible).find(el => (el.textContent || '').replace(/\\s+/g, ' ').includes('Scenebuilder')); if (!(button instanceof HTMLElement)) throw new Error('Scenebuilder button not found'); button.click(); return 'opened Scenebuilder'; })()",
+      "description": "Switch the project into Scenebuilder mode"
+    },
+    {
+      "action": "wait",
+      "ms": 1000,
+      "description": "Allow Scenebuilder to render"
+    },
+    {
+      "action": "browser_js",
+      "code": "(() => { const visible = el => { const r = el.getBoundingClientRect(); const s = getComputedStyle(el); return r.width > 0 && r.height > 0 && s.visibility !== 'hidden' && s.display !== 'none'; }; const button = [...document.querySelectorAll('button,[role=\"button\"]')].filter(visible).find(el => (el.textContent || '').replace(/\\s+/g, ' ').includes('Arrange')); if (!(button instanceof HTMLElement)) return 'Arrange not visible'; button.click(); return 'opened Arrange'; })()",
+      "description": "Open Arrange if it is available in the current scene",
+      "optional": true
+    },
+    {
+      "action": "screenshot",
+      "description": "Capture the Scenebuilder state",
+      "optional": true
+    }
+  ]
+}

package/dist-playbooks/google-flow-search-assets.json

@@ -0,0 +1,64 @@
+{
+  "id": "google-flow-search-assets",
+  "name": "Google Flow — Search Assets",
+  "description": "Open a Flow project and search its asset grid for {SEARCH_TERM}. If {PROJECT_NAME} is omitted, the first visible project is used.",
+  "platform": "google-flow",
+  "version": "1.0.0",
+  "urlPatterns": [
+    "*labs.google/fx/tools/flow*"
+  ],
+  "tags": [
+    "google-flow",
+    "browser",
+    "cdp",
+    "assets",
+    "search"
+  ],
+  "successCount": 0,
+  "failCount": 0,
+  "steps": [
+    {
+      "action": "navigate",
+      "url": "https://labs.google/fx/tools/flow",
+      "description": "Open the Flow dashboard"
+    },
+    {
+      "action": "wait",
+      "ms": 1500,
+      "description": "Wait for dashboard project cards"
+    },
+    {
+      "action": "browser_js",
+      "code": "(() => { const visible = el => { const r = el.getBoundingClientRect(); const s = getComputedStyle(el); return r.width > 0 && r.height > 0 && s.visibility !== 'hidden' && s.display !== 'none'; }; const rawWanted = `{PROJECT_NAME}`.trim(); const wanted = rawWanted.toLowerCase(); const hasWanted = !!rawWanted && rawWanted !== '{PROJECT_NAME}'; const links = [...document.querySelectorAll(\"a[href*='/fx/tools/flow/project/']\")].filter(visible); if (!links.length) throw new Error('No Flow project cards found'); const pick = hasWanted ? links.find(link => ((link.closest('div')?.textContent || link.parentElement?.textContent || '')).toLowerCase().includes(wanted)) : links[0]; if (!(pick instanceof HTMLAnchorElement)) throw new Error(hasWanted ? `Flow project not found: ${rawWanted}` : 'No clickable Flow project found'); const url = pick.href || pick.getAttribute('href'); if (!url) throw new Error('Project card is missing href'); window.location.assign(url); return url; })()",
+      "description": "Open the matching project card",
+      "verify": "form input[type='text']",
+      "verifyTimeoutMs": 15000
+    },
+    {
+      "action": "wait",
+      "ms": 600,
+      "description": "Allow the project toolbar to settle"
+    },
+    {
+      "action": "browser_js",
+      "code": "(() => { const text = `{SEARCH_TERM}`; if (!text.trim() || text === '{SEARCH_TERM}') throw new Error('SEARCH_TERM variable is required'); const input = document.querySelector(\"form input[type='text']\"); if (!(input instanceof HTMLInputElement)) throw new Error('Flow search input not found'); input.focus(); input.value = ''; input.value = text; input.dispatchEvent(new Event('input', { bubbles: true })); input.dispatchEvent(new Event('change', { bubbles: true })); return input.value; })()",
+      "description": "Enter the asset search term"
+    },
+    {
+      "action": "wait",
+      "ms": 700,
+      "description": "Wait for the grid to update"
+    },
+    {
+      "action": "browser_js",
+      "code": "(() => { const visible = el => { const r = el.getBoundingClientRect(); const s = getComputedStyle(el); return r.width > 0 && r.height > 0 && s.visibility !== 'hidden' && s.display !== 'none'; }; const button = [...document.querySelectorAll('button,[role=\"button\"]')].filter(visible).find(el => (el.textContent || '').replace(/\\s+/g, ' ').includes('Sort & Filter')); if (!(button instanceof HTMLElement)) return 'filter button not visible'; button.click(); return 'opened Sort & Filter'; })()",
+      "description": "Open Sort & Filter for manual follow-up if available",
+      "optional": true
+    },
+    {
+      "action": "screenshot",
+      "description": "Capture the filtered asset view",
+      "optional": true
+    }
+  ]
+}

package/dist-playbooks/instagram.json

@@ -0,0 +1,57 @@
+{
+  "id": "instagram",
+  "name": "Instagram Automation",
+  "description": "Battle-tested playbook for Instagram browser automation via CDP. Covers feed, search, like, comment, save, DM, create post, follow/unfollow, and profile viewing.",
+  "platform": "instagram",
+  "version": "4.0.0",
+  "urlPatterns": [
+    "*instagram.com*"
+  ],
+  "tags": [
+    "instagram",
+    "social",
+    "browser",
+    "cdp"
+  ],
+  "successCount": 0,
+  "failCount": 0,
+  "steps": [
+    {
+      "action": "navigate",
+      "url": "https://www.instagram.com/",
+      "description": "Open Instagram home feed"
+    },
+    {
+      "action": "wait",
+      "ms": 1500,
+      "description": "Wait for feed to load"
+    },
+    {
+      "action": "extract",
+      "target": "article",
+      "format": "text",
+      "description": "Extract first visible post content"
+    },
+    {
+      "action": "scroll",
+      "direction": "down",
+      "amount": 5,
+      "description": "Scroll down to see more posts"
+    },
+    {
+      "action": "wait",
+      "ms": 1000,
+      "description": "Wait for new posts to load"
+    },
+    {
+      "action": "extract",
+      "target": "article",
+      "format": "text",
+      "description": "Extract posts after scroll"
+    },
+    {
+      "action": "screenshot",
+      "description": "Capture current feed state"
+    }
+  ]
+}