storyshot 0.1.0 → 0.1.3

package/README.md

@@ -108,11 +108,14 @@ so a change only pays for the lines that changed.
 
 When the flow is behind a login, the agent says so in its plan. Then:
 
-1. A browser window opens (the `login` tool, or `storyshot login <url>`).
-2. You log in there. 2FA and "Sign in with Google" work.
-3. The session is saved to `videos/<site>-login.json` once you're logged in, or
-   when you close the window. It includes cookies, localStorage and IndexedDB,
-   and the file is added to `.gitignore` because it holds your session.
+1. A normal Chrome window opens (the `login` tool, or `storyshot login <url>`).
+   No script is attached to it while you log in, so "Sign in with Google" and
+   2FA work as usual.
+2. You log in there. When you see the app logged in, tell the agent "done"
+   (or press Enter in the terminal). You can also just close the window.
+3. The session is saved to `videos/<site>-login.json`. It includes cookies,
+   localStorage, IndexedDB and sessionStorage, and the file is added to `.gitignore` because
+   it holds your session. The temporary browser profile is deleted.
 4. Every recording starts logged in, so the video never shows a login screen.
 
 If the session expires, Storyshot says so ("the saved login has expired, run
@@ -191,6 +194,7 @@ music: { bpm: 120, volume: 1 }                  # or { file: track.mp3 }, or fal
 sfx: true                                       # click / whoosh / riser sounds
 voice: { provider: elevenlabs, voice: hpp4J3VqNfWAUOO0d1Us }   # optional voiceover, see below
 storageState: auth.json                         # optional Playwright login state
+ignoreHTTPSErrors: true                         # internal site with a self-signed HTTPS certificate (plain http:// needs nothing)
 captionPosition: bottom                         # or top; can also be set per step. A caption that would cover a step's click target or zoom subject moves to the other side automatically
 purpose: pitch                                  # pitch | tutorial | course | docs (sets the defaults below)
 highlight: false                                # spotlight targets before click/type (per step or per action too)

package/bin/storyshot.mjs

@@ -33,6 +33,8 @@ Options:
   --draft   (render/compose) use the free local voice instead of a paid TTS provider and write
             <out>.draft.mp4; when it looks right, run \`compose\` without --draft (reuses the recording)
   --viewport 1600x900   (inspect, init)
+  --insecure            (inspect, init) accept a self-signed HTTPS certificate (internal sites);
+                        storyboards use \`ignoreHTTPSErrors: true\`
 `;
 
 const args = process.argv.slice(2);
@@ -80,11 +82,11 @@ try {
   } else if (cmd === 'login') {
     const { login, authFileFor } = await import('../src/auth.mjs');
     const r = await login(arg, { file: flag('save') ?? authFileFor(arg), viewport: viewport() });
-    console.log(`✔ saved the login session to ${r.file} (${r.how}, ${r.cookies} cookies)${r.gitignore ? `\n  added it to ${r.gitignore}` : ''}` +
+    console.log(`✔ saved the login session to ${r.file} (${r.how}, ${r.cookies} cookies, ${r.siteCookies} for this site${r.sessionStorage ? `, sessionStorage for ${r.sessionStorage} site(s)` : ''})${r.gitignore ? `\n  added it to ${r.gitignore}` : ''}` +
       `\n  use it: \`storageState: ${r.file.split(/[\\/]/).pop()}\` in the storyboard (path relative to the yaml), or \`--storage ${r.file}\` for inspect/init`);
   } else if (cmd === 'init') {
     const { initStoryboard } = await import('../src/init.mjs');
-    const r = await initStoryboard(arg, { purpose: flag('purpose') ?? 'pitch', topic: flag('topic'), file: flag('file'), storageState: flag('storage'), viewport: viewport() });
+    const r = await initStoryboard(arg, { purpose: flag('purpose') ?? 'pitch', topic: flag('topic'), file: flag('file'), storageState: flag('storage'), ignoreHTTPSErrors: args.includes('--insecure'), viewport: viewport() });
     console.log(`✔ wrote ${r.file}\n  screenshot: ${r.screenshot}\n  next: edit it, then \`storyshot check ${r.file}\``);
   } else if (cmd === 'inspect') {
     await (await import('../src/doctor.mjs')).ensureBrowser();
@@ -94,7 +96,7 @@ try {
       const after = flag('after');
       console.log((await record(cfg, { log: () => {}, inspectAfter: after != null ? Number(after) : cfg.steps.length })).text);
     } else {
-      console.log((await inspect(arg, { viewport: viewport(), storageState: flag('storage') })).text);
+      console.log((await inspect(arg, { viewport: viewport(), storageState: flag('storage'), ignoreHTTPSErrors: args.includes('--insecure') })).text);
     }
   } else if (cmd === 'check') {
     const r = check(arg, { draft: args.includes('--draft') });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "storyshot",
-  "version": "0.1.0",
+  "version": "0.1.3",
   "description": "Turn a short YAML storyboard into a polished product demo video of your web app — smooth cursor, auto zoom, captions, music.",
   "author": "boheling <boheling@gmail.com>",
   "repository": {

package/skills/storyshot/SKILL.md

@@ -82,9 +82,14 @@ everything.
    - Tell the user a browser window will open and that they should log in
      there, preferably with a demo account (the video shows whatever is on
      screen).
-   - Call `login` with a URL behind the login. It saves the session to
-     `videos/<site>-login.json` and adds it to `.gitignore`. If it returns
-     "still waiting", call it again.
+   - Call `login` with a URL behind the login. It opens a normal Chrome
+     window and returns at once. Tell the user to log in there and, once the
+     app shows them logged in, to leave the window open and reply "done".
+     Nothing watches the window meanwhile (Google sign-in breaks if a script
+     probes it), so wait for their reply.
+   - Then call `login` again with the same URL and `done: true`. It saves the
+     session to `videos/<site>-login.json`, adds it to `.gitignore` and closes
+     the window. (CLI: `storyshot login <url>`, then press Enter.)
    - Pass that file as `storage_state` to `inspect_page` and `init_storyboard`,
      and add `storageState: <site>-login.json` to the storyboard.
    - Never ask for, store or type a password, and never write login steps.
@@ -163,6 +168,9 @@ Rules of thumb from real renders:
   `at (x, y)`.
 - Never put real credentials in a storyboard. For logged-in apps, use
   `storageState` (see step 1).
+- Internal sites: `http://` URLs just work. If an `https://` internal site
+  fails with an untrusted certificate, add `ignoreHTTPSErrors: true` (inspect/init:
+  `ignore_https_errors`). Never turn it on for public sites.
 
 Run `check_storyboard` after every edit, and fix every ✖ before rendering. It
 checks structure, typos and leftover `TODO`s, but not whether targets exist on

package/src/auth.mjs

@@ -1,7 +1,8 @@
 // Logged-in apps: detect login walls, and `storyshot login` — the user logs in once in a real
 // browser window and the session (cookies, localStorage, IndexedDB) is saved for recording.
 import { chromium } from 'playwright';
-import { execFileSync } from 'node:child_process';
+import { execFileSync, spawn } from 'node:child_process';
+import os from 'node:os';
 import fs from 'node:fs';
 import path from 'node:path';
 import { VIDEO_DIR, siteOf } from './config.mjs';
@@ -41,44 +42,121 @@ export function gitIgnored(file) {
 function ignore(file) {
   if (gitIgnored(file) === true) return null;
   let root = process.cwd();
-  try { root = execFileSync('git', ['rev-parse', '--show-toplevel'], { cwd: path.dirname(path.resolve(file)) }).toString().trim(); } catch {}
+  try { root = execFileSync('git', ['rev-parse', '--show-toplevel'], { cwd: path.dirname(path.resolve(file)), stdio: ['ignore', 'pipe', 'ignore'] }).toString().trim(); } catch {}
   const gi = path.join(root, '.gitignore');
   const rel = path.relative(root, path.resolve(file)).split(path.sep).join('/');
+  if (rel.startsWith('../') || path.isAbsolute(rel)) return null; // outside the project: nothing to ignore
   const cur = fs.existsSync(gi) ? fs.readFileSync(gi, 'utf8') : '';
   if (cur.split('\n').includes(rel)) return null;
   fs.writeFileSync(gi, `${cur}${cur && !cur.endsWith('\n') ? '\n' : ''}# Storyshot login session (contains your session cookies — never commit)\n${rel}\n`);
   return gi;
 }
 
-// Open a visible browser at `url`; save the session when the user has logged in (a login wall
-// appeared and then went away) or closes the window. Resolves with the saved file.
-export async function login(url, { file = authFileFor(url), viewport = { width: 1600, height: 900 }, timeoutMs = 10 * 60_000, log = console.log } = {}) {
-  let browser;
-  try { browser = await chromium.launch({ headless: false }); } catch (e) {
-    throw new Error(`could not open a browser window (${e.message.split('\n')[0]}). Log in on a machine with a screen ` +
-      `(storyshot login ${url} --save ${file}) and copy the file here.`);
+// --- login ------------------------------------------------------------------------------------
+// The user logs in in a plain Chrome window that NOTHING is attached to while they do it: Google
+// (and other SSO providers) refuse automated browsers, polling the page from a script makes
+// Google's sign-in bounce between the app and accounts.google.com, and even an open DevTools port
+// gets "This browser or app may not be secure". So Chrome runs with only a temporary profile; when
+// the user is done we quit it and read the session back from that profile.
+
+function chromeExecutable() {
+  const home = os.homedir();
+  const candidates = process.platform === 'darwin'
+    ? ['/Applications/Google Chrome.app/Contents/MacOS/Google Chrome', path.join(home, 'Applications/Google Chrome.app/Contents/MacOS/Google Chrome')]
+    : process.platform === 'win32'
+      ? [process.env.PROGRAMFILES, process.env['PROGRAMFILES(X86)'], process.env.LOCALAPPDATA].filter(Boolean).map((d) => path.join(d, 'Google', 'Chrome', 'Application', 'chrome.exe'))
+      : ['/usr/bin/google-chrome', '/usr/bin/google-chrome-stable', '/usr/bin/chromium', '/usr/bin/chromium-browser'];
+  return candidates.find((c) => fs.existsSync(c)) ?? chromium.executablePath();
+}
+
+// Opens the window and returns at once. Pass the result to finishLogin() when the user is done.
+export function openLoginWindow(url, { viewport = { width: 1600, height: 900 }, headless = false } = {}) {
+  const dir = fs.mkdtempSync(path.join(os.tmpdir(), 'storyshot-login-'));
+  // "Continue where you left off" also keeps session cookies when the user closes the window.
+  fs.mkdirSync(path.join(dir, 'Default'), { recursive: true });
+  fs.writeFileSync(path.join(dir, 'Default', 'Preferences'), JSON.stringify({ session: { restore_on_startup: 1 } }));
+  const exe = chromeExecutable();
+  const args = [`--user-data-dir=${dir}`, '--no-first-run', '--no-default-browser-check',
+    `--window-size=${viewport.width},${viewport.height}`, ...(headless ? ['--headless=new'] : []), url];
+  let proc;
+  try { proc = spawn(exe, args, { stdio: 'ignore' }); } catch (e) {
+    throw new Error(`could not open a browser window (${e.message}). Log in on a machine with a screen (storyshot login ${url}) and copy the file here.`);
   }
-  const context = await browser.newContext({ viewport });
-  const page = await context.newPage();
-  await page.goto(url, { waitUntil: 'domcontentloaded' }).catch(() => {});
-  log(`A browser window is open at ${url}. Log in there (2FA and "Sign in with Google" work).`);
-  log('The session is saved automatically once you are logged in — or close the window when done.');
-  let state = null, sawWall = false, clearFor = 0, done = 'timeout';
-  const end = Date.now() + timeoutMs;
-  while (Date.now() < end) {
-    if (!browser.isConnected() || page.isClosed()) { done = 'closed'; break; }
-    try {
-      state = await context.storageState({ indexedDB: true });
-      const d = await detectLogin(page);
-      if (d.wall) { sawWall = true; clearFor = 0; } else if (sawWall && ++clearFor >= 3) { done = 'logged in'; break; }
-    } catch {}
+  const session = { url, dir, exe, proc, exited: false };
+  proc.on('exit', () => { session.exited = true; });
+  proc.on('error', () => { session.exited = true; });
+  return session;
+}
+
+// Quit the window (if the user hasn't), read the session back from its profile, save it and delete
+// the temporary profile.
+export async function finishLogin(session, { file = authFileFor(session.url), log = console.log } = {}) {
+  const { url, dir, exe, proc } = session;
+  const how = session.exited ? 'window closed' : 'logged in';
+  let state;
+  try {
+    if (!session.exited) {
+      // SIGTERM makes Chrome shut down cleanly and flush cookies; force it if it hangs
+      proc.kill('SIGTERM');
+      const t = setTimeout(() => proc.kill('SIGKILL'), 10_000);
+      await new Promise((r) => (session.exited ? r() : proc.once('exit', r)));
+      clearTimeout(t);
+    }
+    // --restore-last-session reopens the user's tabs, which brings back their sessionStorage (some
+    // apps, e.g. Microsoft MSAL, keep the login token there; storageState() doesn't capture it)
+    const context = await chromium.launchPersistentContext(dir, { executablePath: exe, headless: true, ignoreHTTPSErrors: true, args: ['--restore-last-session'] });
     await new Promise((r) => setTimeout(r, 1000));
+    const sessionStorage = {};
+    for (const p of context.pages()) {
+      if (!/^https?:/.test(p.url())) continue;
+      await p.waitForLoadState('load', { timeout: 15_000 }).catch(() => {});
+      const items = await p.evaluate(() => Object.entries(window.sessionStorage)).catch(() => []);
+      if (items.length) Object.assign(sessionStorage[new URL(p.url()).origin] ??= {}, Object.fromEntries(items));
+    }
+    // load the app once in a fresh tab, so its localStorage / IndexedDB are part of the snapshot
+    const page = await context.newPage();
+    await page.goto(url, { waitUntil: 'load', timeout: 30_000 }).catch(() => {});
+    state = await context.storageState({ indexedDB: true });
+    const extra = Object.entries(sessionStorage).map(([origin, items]) => ({ origin, items: Object.entries(items).map(([name, value]) => ({ name, value })) }));
+    if (extra.length) state.sessionStorage = extra;
+    await context.close().catch(() => {});
+  } finally {
+    if (!session.exited) proc.kill('SIGKILL');
+    fs.rmSync(dir, { recursive: true, force: true, maxRetries: 5, retryDelay: 200 });
   }
-  await browser.close().catch(() => {});
-  if (!state) throw new Error('the browser was closed before anything could be saved — run login again');
-  if (done === 'timeout') log('warning: timed out waiting for the login; saving the session as it is');
+  const host = new URL(url).hostname.replace(/^www\./, '');
+  const siteCookies = state.cookies.filter((c) => host.endsWith(c.domain.replace(/^\./, '')) || c.domain.replace(/^\./, '').endsWith(host)).length;
   fs.mkdirSync(path.dirname(path.resolve(file)), { recursive: true });
   fs.writeFileSync(file, JSON.stringify(state, null, 1));
   const gi = ignore(file);
-  return { file: path.resolve(file), how: done, gitignore: gi, cookies: state.cookies.length, sawWall };
+  return { file: path.resolve(file), how, gitignore: gi, cookies: state.cookies.length, siteCookies, sessionStorage: state.sessionStorage?.length ?? 0 };
+}
+
+// A browser context with a saved login: storageState plus the sessionStorage that login() saved
+// alongside it (Playwright has no sessionStorage in storageState, so it is restored by a script).
+export async function sessionContext(browser, { storageState, ...options } = {}) {
+  let state = storageState;
+  if (typeof state === 'string') state = JSON.parse(fs.readFileSync(state, 'utf8'));
+  const { sessionStorage, ...rest } = state ?? {};
+  const context = await browser.newContext({ ...options, storageState: state ? rest : undefined });
+  if (sessionStorage?.length) {
+    await context.addInitScript((saved) => {
+      const s = saved.find((o) => o.origin === location.origin);
+      if (s) for (const { name, value } of s.items) if (window.sessionStorage.getItem(name) === null) window.sessionStorage.setItem(name, value);
+    }, sessionStorage);
+  }
+  return context;
+}
+
+// CLI: open the window, wait for Enter (or the window closing), then save.
+export async function login(url, { file = authFileFor(url), viewport, log = console.log } = {}) {
+  const session = openLoginWindow(url, { viewport });
+  log(`A Chrome window is open at ${url}. Log in there (2FA and "Sign in with Google" work).`);
+  log('When you see the app logged in, come back here and press Enter (or just close the window).');
+  await new Promise((resolve) => {
+    const done = () => { process.stdin.pause(); resolve(); };
+    process.stdin.resume(); process.stdin.once('data', done);
+    session.proc.once('exit', done);
+  });
+  return finishLogin(session, { file, log });
 }

package/src/check.mjs

@@ -4,7 +4,7 @@ import YAML from 'yaml';
 import { loadConfig } from './config.mjs';
 import { gitIgnored } from './auth.mjs';
 
-const TOP = ['name', 'url', 'out', 'purpose', 'viewport', 'output', 'theme', 'music', 'voice', 'sfx', 'storageState', 'colorScheme',
+const TOP = ['name', 'url', 'out', 'purpose', 'viewport', 'output', 'theme', 'music', 'voice', 'sfx', 'storageState', 'ignoreHTTPSErrors', 'colorScheme',
   'scrollOffset', 'captionPosition', 'highlight', 'stepNumbers', 'subtitles', 'chapters', 'clips', 'maxWait', 'setup', 'steps', 'end_card'];
 const STEP = ['caption', 'say', 'sayAt', 'duration', 'zoom', 'actions', 'hidden', 'sfx', 'highlight', 'captionPosition'];
 const ZOOM = ['target', 'scale', 'start', 'end', 'ramp', 'offset'];

package/src/config.mjs

@@ -29,7 +29,20 @@ export const PURPOSES = {
 // .mp4, so a promo, a tutorial and a lesson for the same app never collide or all read "demo".
 export const VIDEO_DIR = 'videos';
 export const KINDS = { pitch: 'promo', tutorial: 'tutorial', course: 'lesson', docs: 'docs' };
-export const siteOf = (url) => new URL(url).hostname.replace(/^www\./, '').split('.')[0];
+// pxgenius.ai → pxgenius; an IP or a port is kept whole so two internal apps don't share a name
+// (http://10.1.2.3:8080 → 10-1-2-3-8080, http://localhost:3000 → localhost-3000)
+export const siteOf = (url) => {
+  const { hostname, port } = new URL(url);
+  const host = hostname.replace(/^\[|\]$/g, '');
+  const ip = /^[\d.]+$/.test(host) || host.includes(':');
+  return [ip ? host.replace(/[.:]+/g, '-').replace(/^-|-$/g, '') : host.replace(/^www\./, '').split('.')[0], port].filter(Boolean).join('-');
+};
+
+// A clear message for an internal site with a self-signed / untrusted HTTPS certificate.
+export const certError = (e, url) => (/ERR_CERT|ERR_SSL/.test(e?.message ?? '')
+  ? new Error(`${url} has an untrusted HTTPS certificate (${e.message.match(/ERR_\w+/)[0]}). If it is your own internal site with a self-signed ` +
+    'certificate, add `ignoreHTTPSErrors: true` to the storyboard (inspect/init: --insecure, MCP: ignore_https_errors: true).')
+  : null);
 const slug = (s) => String(s).toLowerCase().normalize('NFKD').replace(/[^\p{L}\p{N}]+/gu, '-').replace(/^-+|-+$/g, '').slice(0, 40);
 
 export function defaultStoryboard(url, purpose = 'pitch', topic) {
@@ -108,6 +121,7 @@ export function loadConfig(file, { draft = false } = {}) {
     output,
     scale,
     colorScheme: raw.colorScheme ?? 'light',
+    ignoreHTTPSErrors: raw.ignoreHTTPSErrors === true,
     storageState: raw.storageState ? path.resolve(dir, raw.storageState) : undefined,
     scrollOffset: raw.scrollOffset ?? 40,
     captionPosition: raw.captionPosition ?? 'bottom',

package/src/init.mjs

@@ -9,11 +9,11 @@ import { loginAdvice } from './auth.mjs';
 const q = (s) => JSON.stringify(String(s));
 const tgt = (t) => (typeof t === 'string' ? q(t) : `{ ${Object.entries(t).map(([k, v]) => `${k}: ${typeof v === 'string' ? q(v) : v}`).join(', ')} }`);
 
-export async function initStoryboard(url, { purpose = 'pitch', topic, file, storageState, viewport = { width: 1600, height: 900 } } = {}) {
+export async function initStoryboard(url, { purpose = 'pitch', topic, file, storageState, ignoreHTTPSErrors = false, viewport = { width: 1600, height: 900 } } = {}) {
   if (!PURPOSES[purpose]) throw new Error(`purpose must be one of ${Object.keys(PURPOSES).join(', ')}`);
   file ??= defaultStoryboard(url, purpose, topic);
   if (fs.existsSync(file)) throw new Error(`${file} already exists — edit it, or choose another path`);
-  const page = await inspect(url, { viewport, storageState, outDir: path.join(path.dirname(path.resolve(file)), '.storyshot', 'inspect') });
+  const page = await inspect(url, { viewport, storageState, ignoreHTTPSErrors, outDir: path.join(path.dirname(path.resolve(file)), '.storyshot', 'inspect') });
   if (page.login?.wall) {
     throw new Error(`${url} asks to log in (${page.login.reason})${storageState ? ' even with the saved session — it has probably expired, log in again' : ''}. ` +
       `${loginAdvice(url)} Then run init again with that session (MCP: storage_state, CLI: --storage).`);
@@ -38,7 +38,7 @@ name: ${name}
 url: ${page.url}
 purpose: ${purpose}
 out: ${name}.mp4
-${storageState ? `storageState: ${path.relative(path.dirname(path.resolve(file)), path.resolve(storageState)).split(path.sep).join('/')}   # saved login (never commit it)\n` : ''}${narrated ? 'voice: { provider: kokoro }        # free, local, English. For the final: { provider: elevenlabs, voice: <voice id> } + ELEVENLABS_API_KEY' : '# voice: { provider: kokoro }      # optional voiceover; add `say:` lines to steps'}
+${storageState ? `storageState: ${path.relative(path.dirname(path.resolve(file)), path.resolve(storageState)).split(path.sep).join('/')}   # saved login (never commit it)\n` : ''}${ignoreHTTPSErrors ? 'ignoreHTTPSErrors: true   # internal site with a self-signed certificate\n' : ''}${narrated ? 'voice: { provider: kokoro }        # free, local, English. For the final: { provider: elevenlabs, voice: <voice id> } + ELEVENLABS_API_KEY' : '# voice: { provider: kokoro }      # optional voiceover; add `say:` lines to steps'}
 
 setup:                             # runs before recording; clean the frame here${dismiss ? `\n  - dismiss: ${tgt(dismiss.target)}` : '\n  # - dismiss: { role: button, name: Accept cookies }'}
 

package/src/inspect.mjs

@@ -3,7 +3,8 @@
 import { chromium } from 'playwright';
 import fs from 'node:fs';
 import path from 'node:path';
-import { detectLogin, loginAdvice } from './auth.mjs';
+import { detectLogin, loginAdvice, sessionContext } from './auth.mjs';
+import { certError } from './config.mjs';
 
 // Runs in the page. Positions are relative to the top of the main scrolling content,
 // which may be the window or an inner scroll container (common in web apps).
@@ -161,11 +162,15 @@ export async function describePage(page, viewport, { maxElements = 80 } = {}) {
   return { text: lines.join('\n'), height: info.height, title: info.title, url, headings: info.headings, anchors: info.anchors, elements };
 }
 
-export async function inspect(url, { viewport = { width: 1600, height: 900 }, storageState, outDir = '.storyshot/inspect', maxElements = 80 } = {}) {
+export async function inspect(url, { viewport = { width: 1600, height: 900 }, storageState, ignoreHTTPSErrors = false, outDir = '.storyshot/inspect', maxElements = 80 } = {}) {
   const browser = await chromium.launch();
-  const context = await browser.newContext({ viewport, storageState });
+  const context = await sessionContext(browser, { viewport, storageState, ignoreHTTPSErrors });
   const page = await context.newPage();
-  await page.goto(url, { waitUntil: 'networkidle', timeout: 45000 }).catch(() => page.waitForLoadState('domcontentloaded'));
+  await page.goto(url, { waitUntil: 'networkidle', timeout: 45000 }).catch(async (e) => {
+    const cert = certError(e, url);
+    if (cert) { await browser.close(); throw cert; }
+    await page.waitForLoadState('domcontentloaded');
+  });
   await page.waitForTimeout(1500); // let late toasts / banners appear so they get listed
 
   const desc = await describePage(page, viewport, { maxElements });

package/src/mcp.mjs

@@ -14,7 +14,7 @@ import { record } from './record.mjs';
 import { guide } from './guide.mjs';
 import { check, formatCheck } from './check.mjs';
 import { initStoryboard } from './init.mjs';
-import { login, authFileFor } from './auth.mjs';
+import { openLoginWindow, finishLogin, authFileFor } from './auth.mjs';
 import { ensureBrowser, ffmpegInstallCommand } from './doctor.mjs';
 import { execFileSync } from 'node:child_process';
 
@@ -54,11 +54,12 @@ server.registerTool('init_storyboard', {
     purpose: z.enum(['pitch', 'tutorial', 'course', 'docs']).optional().describe('pitch = 15–30s promo (default); tutorial = narrated how-to; course = narrated lesson; docs = silent per-step GIFs'),
     topic: z.string().optional().describe('Short topic for the file name, e.g. "export-pdf" → videos/<site>-tutorial-export-pdf.yaml. Use it for tutorials/lessons, since a site usually gets several'),
     storage_state: z.string().optional().describe('Absolute path to a saved login (from the login tool) for apps behind a login'),
+    ignore_https_errors: z.boolean().optional().describe('Accept a self-signed HTTPS certificate (internal sites only); also writes ignoreHTTPSErrors: true into the storyboard'),
   },
-}, async ({ url, path: file, purpose = 'pitch', topic, storage_state }) => {
+}, async ({ url, path: file, purpose = 'pitch', topic, storage_state, ignore_https_errors = false }) => {
   try {
     await ensureBrowser(() => {});
-    const r = await initStoryboard(url, { purpose, topic, file: file ? abs(file) : undefined, storageState: storage_state ? abs(storage_state) : undefined });
+    const r = await initStoryboard(url, { purpose, topic, file: file ? abs(file) : undefined, storageState: storage_state ? abs(storage_state) : undefined, ignoreHTTPSErrors: ignore_https_errors });
     return { content: [text(`${r.login?.hint ? `ℹ Login: ${r.login.hint}. If the flow needs it, call login first.\n\n` : ''}Wrote ${r.file}:\n\n${r.yaml}`), image(r.screenshot)] };
   } catch (e) { return fail(`init failed: ${e.message}`); }
 });
@@ -73,10 +74,11 @@ server.registerTool('inspect_page', {
     storyboard: z.string().optional().describe('Absolute path to a storyboard YAML (instead of url)'),
     after_step: z.number().int().min(0).optional().describe('With storyboard: run steps 1..N first (0 = only setup). Default: all steps.'),
     storage_state: z.string().optional().describe('With url: absolute path to a saved login (from the login tool)'),
+    ignore_https_errors: z.boolean().optional().describe('With url: accept a self-signed HTTPS certificate (internal sites only)'),
     viewport_width: z.number().optional(),
     viewport_height: z.number().optional(),
   },
-}, async ({ url, storyboard, after_step, storage_state, viewport_width = 1600, viewport_height = 900 }) => {
+}, async ({ url, storyboard, after_step, storage_state, ignore_https_errors = false, viewport_width = 1600, viewport_height = 900 }) => {
   try {
     await ensureBrowser(() => {});
     if (storyboard) {
@@ -85,7 +87,7 @@ server.registerTool('inspect_page', {
       return { content: [text(r.text), image(r.screenshot)] };
     }
     if (!url) return fail('give either url or storyboard');
-    const r = await inspect(url, { viewport: { width: viewport_width, height: viewport_height }, storageState: storage_state ? abs(storage_state) : undefined });
+    const r = await inspect(url, { viewport: { width: viewport_width, height: viewport_height }, storageState: storage_state ? abs(storage_state) : undefined, ignoreHTTPSErrors: ignore_https_errors });
     return { content: [text(r.text), image(r.screenshot)] };
   } catch (e) {
     const extra = [];
@@ -95,35 +97,41 @@ server.registerTool('inspect_page', {
   }
 });
 
-// --- login: the user logs in once in a visible browser window ---------------------------------
+// --- login: the user logs in once in a plain Chrome window ---------------------------------------
+// Two calls: the first opens the window and returns; after the user says they are logged in, the
+// second (done: true) saves the session. Nothing watches the window in between, because Google
+// sign-in breaks when a script probes it.
 const logins = new Map();
 server.registerTool('login', {
   title: 'Log in (user)',
-  description: 'For apps behind a login. Opens a visible browser window at `url` where THE USER logs in (never type passwords yourself); ' +
-    'the session is saved to a file (added to .gitignore) once they are logged in or close the window. Tell the user to look for the window first. ' +
-    `Waits up to ${Math.round(WAIT_MS / 1000)}s; if they are still logging in, call login again with the same arguments to keep waiting. ` +
+  description: 'For apps behind a login. Call 1 (`url`): opens a normal Chrome window at `url` and returns at once. ' +
+    'Then tell the user: "A Chrome window opened. Log in there (Sign in with Google and 2FA work). When you see the app logged in, ' +
+    'leave the window open and reply \'done\'." Never type passwords yourself, and do NOT make call 2 until the user replies. ' +
+    'Call 2 (same `url`, `done: true`): saves the session to a file (added to .gitignore) and closes the window. ' +
     'Then use the file as storage_state in inspect_page/init_storyboard and as `storageState:` in the storyboard.',
   inputSchema: {
     url: z.string().describe('A page of the app that requires login (its login page or a page behind it)'),
+    done: z.boolean().optional().describe('true only after the user has said they are logged in'),
     path: z.string().optional().describe('Absolute path for the session file. Default: <cwd>/videos/<site>-login.json'),
   },
-}, async ({ url, path: file }) => {
+}, async ({ url, done, path: file }) => {
   const out = abs(file ?? authFileFor(url));
-  await ensureBrowser(() => {});
-  let job = logins.get(out);
-  if (!job || job.done) {
-    job = { done: false, logs: [] };
-    job.promise = login(url, { file: out, log: (m) => job.logs.push(m) }).then((r) => { job.result = r; }, (e) => { job.error = e; }).finally(() => { job.done = true; });
-    logins.set(out, job);
+  if (!done) {
+    const old = logins.get(out);
+    if (old && !old.exited) return { content: [text(`The login window for ${url} is already open. Ask the user to log in there and reply when done, then call login with done: true.`)] };
+    await ensureBrowser(() => {});
+    try { logins.set(out, openLoginWindow(url)); } catch (e) { return fail(e.message); }
+    return { content: [text(`A Chrome window is open at ${url}. Tell the user: log in there (Sign in with Google and 2FA work); when the app shows them logged in, leave the window open and reply "done". ` +
+      'Wait for their reply, then call login again with the same url and done: true.')] };
   }
-  const deadline = Date.now() + WAIT_MS;
-  while (!job.done && Date.now() < deadline) await new Promise((r) => setTimeout(r, 1000));
-  if (!job.done) return { content: [text(`A browser window is open at ${url}. Still waiting for the user to log in — ask them to finish, then call login again with the same arguments.`)] };
-  if (job.error) return fail(`login failed: ${job.error.message}`);
-  const r = job.result;
-  return { content: [text(`✔ Saved the login session to ${r.file} (${r.how}, ${r.cookies} cookies).${r.gitignore ? ` Added it to ${r.gitignore}.` : ''}\n` +
+  const session = logins.get(out);
+  if (!session) return fail('no login window is open for this url — call login without done first');
+  logins.delete(out);
+  let r;
+  try { r = await finishLogin(session, { file: out }); } catch (e) { return fail(`login failed: ${e.message}`); }
+  return { content: [text(`✔ Saved the login session to ${r.file} (${r.how}, ${r.cookies} cookies, ${r.siteCookies} for this site${r.sessionStorage ? `, sessionStorage for ${r.sessionStorage} site(s)` : ''}).${r.gitignore ? ` Added it to ${r.gitignore}.` : ''}\n` +
     `Next: inspect_page with storage_state "${r.file}" to confirm you see the logged-in app, and put \`storageState: ${path.basename(r.file)}\` (path relative to the yaml) in the storyboard.` +
-    (r.sawWall ? '' : '\nNote: no login form was seen in that window — if the user did not log in, inspect will show the login wall again.'))] };
+    (r.siteCookies || r.sessionStorage ? '' : '\nNote: no cookies were saved for this site — the user may not have finished logging in; inspect will show the login wall again if so.'))] };
 });
 
 server.registerTool('check_storyboard', {

package/src/record.mjs

@@ -4,7 +4,8 @@ import { chromium } from 'playwright';
 import fs from 'node:fs';
 import path from 'node:path';
 import { describePage } from './inspect.mjs';
-import { detectLogin, loginAdvice } from './auth.mjs';
+import { detectLogin, loginAdvice, sessionContext } from './auth.mjs';
+import { certError } from './config.mjs';
 
 // Injected into every page: fake cursor, click ripple, smooth in-page anchor scrolling.
 function pageScript({ scrollOffset }) {
@@ -154,8 +155,8 @@ export async function record(cfg, { log = console.log, inspectAfter = null } = {
   const { width: VW, height: VH } = cfg.viewport;
 
   const browser = await chromium.launch();
-  const context = await browser.newContext({
-    viewport: cfg.viewport, deviceScaleFactor: cfg.scale, colorScheme: cfg.colorScheme, storageState: cfg.storageState,
+  const context = await sessionContext(browser, {
+    viewport: cfg.viewport, deviceScaleFactor: cfg.scale, colorScheme: cfg.colorScheme, storageState: cfg.storageState, ignoreHTTPSErrors: cfg.ignoreHTTPSErrors,
   });
   await context.addInitScript(pageScript, { scrollOffset: cfg.scrollOffset });
   const page = await context.newPage();
@@ -354,7 +355,7 @@ export async function record(cfg, { log = console.log, inspectAfter = null } = {
   }
 
   log(`opening ${cfg.url}`);
-  await page.goto(cfg.url, { waitUntil: 'networkidle' }).catch(() => page.goto(cfg.url));
+  await page.goto(cfg.url, { waitUntil: 'networkidle' }).catch(() => page.goto(cfg.url)).catch((e) => { throw certError(e, cfg.url) ?? e; });
   // sent to a login page instead of the start url → no (valid) session
   if (new URL(page.url()).pathname !== new URL(cfg.url).pathname || cfg.storageState) {
     const d = await detectLogin(page);