@dfosco/storyboard 0.6.0-beta.1 → 0.6.0-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dfosco/storyboard",
-  "version": "0.6.0-beta.1",
+  "version": "0.6.0-beta.3",
   "type": "module",
   "license": "MIT",
   "description": "Storyboard prototyping framework — core engine, React integration, and canvas",

package/scaffold/skills/migrate/SKILL.md

@@ -74,7 +74,9 @@ Clients on 4.1.x likely have no `canvas` block at all. The full canvas config is
         "label": "Claude Code",
         "icon": "claude",
         "startupCommand": "claude --agent terminal-agent --dangerously-skip-permissions",
-        "resumeCommand": "claude --resume={id} --agent terminal-agent --dangerously-skip-permissions",
+        "resumeCommand": "claude --resume {id} --agent terminal-agent --dangerously-skip-permissions",
+        "sessionIdEnv": "CLAUDE_SESSION_ID",
+        "sessionStateGlob": "~/.claude/projects/*/{id}.jsonl",
         "resizable": true,
         "readinessSignal": "bypass permissions"
       },
@@ -82,7 +84,9 @@ Clients on 4.1.x likely have no `canvas` block at all. The full canvas config is
         "label": "Codex CLI",
         "icon": "codex",
         "startupCommand": "codex --full-auto",
-        "resumeCommand": "codex --resume={id} --ask-for-approval never",
+        "resumeCommand": "codex resume {id}",
+        "sessionIdEnv": "CODEX_SESSION_ID",
+        "sessionStateGlob": "~/.codex/sessions/**/rollout-*-{id}.jsonl",
         "configFiles": [".codex/config.toml"],
         "resizable": true
       }
@@ -116,6 +120,10 @@ Clients on 4.1.x likely have no `canvas` block at all. The full canvas config is
 | `startupCommand` | yes | Shell command to start the agent |
 | `resumeCommand` | no | Full launch template to resume a session, with `{id}` placeholder (e.g. `copilot --resume={id} --agent terminal-agent`). Used both for auto-resume on cold restart and for the interactive "Browse existing sessions" flow. |
 | `sessionIdEnv` | no | Env var exposed in the agent SessionStart hook payload that holds its session id (e.g. `COPILOT_AGENT_SESSION_ID`). When set, widget cold restarts auto-resume the previous session. |
+| `sessionStateDir` | no | Directory where the agent stores per-session state, used to pre-flight `--resume` (e.g. `~/.copilot/session-state`). Pass `null` to skip the fs check (UUID-only validation). |
+| `sessionStateGlob` | no | Glob to validate session existence for agents that store sessions in nested subdirs. Supports `<root>/*/{id}.jsonl` (Claude) and `<root>/**/<name-with-{id}>` (Codex). |
+
+**Codex CLI: one-time hook trust.** Codex requires explicit user trust for non-managed hooks (`Non-managed command hooks must be reviewed and trusted before they run`). After the first dev-server boot, run `codex` interactively in any directory and enter `/hooks`, navigate to SessionStart, and enable the `storyboard-capture` hook. Trust persists in `~/.codex/state_*.sqlite`. Until trusted, Codex agent widgets will launch fresh on restart instead of resuming.
 | `postStartup` | no | Text sent to the agent's stdin after it starts |
 | `readinessSignal` | no | Substring to wait for in output before marking agent as ready |
 | `configFiles` | no | Array of config file paths the agent requires |

package/src/core/canvas/agent-session.js

@@ -18,14 +18,18 @@
  * pre-validate).
  */
 
-import { existsSync, mkdirSync, readFileSync, unlinkSync, writeFileSync, watch as fsWatch } from 'node:fs'
+import { existsSync, mkdirSync, readFileSync, unlinkSync, writeFileSync, watch as fsWatch, readdirSync, statSync } from 'node:fs'
 import { join } from 'node:path'
 import { homedir } from 'node:os'
+import { execFileSync } from 'node:child_process'
 
 const CAPTURE_DIR = join('.storyboard', 'agent-sessions')
 const COPILOT_USER_HOOKS_DIR = join(homedir(), '.copilot', 'hooks')
 const COPILOT_HOOK_FILENAME = 'storyboard-capture.json'
 const COPILOT_SESSION_STATE_DIR = join(homedir(), '.copilot', 'session-state')
+const CLAUDE_SETTINGS_PATH = join(homedir(), '.claude', 'settings.json')
+const CLAUDE_HOOK_MARKER = 'storyboard-capture'
+const CODEX_HOOKS_PATH = join(homedir(), '.codex', 'hooks.json')
 
 /** Resolve absolute path to the per-widget capture directory under root. */
 function captureDir(root) {
@@ -62,24 +66,11 @@ export function ensureCopilotCaptureHookInstalled() {
 
   const hookPath = join(COPILOT_USER_HOOKS_DIR, COPILOT_HOOK_FILENAME)
 
-  // Single-line bash script. Reads stdin JSON, extracts sessionId via sed
-  // (no jq dependency), writes it to the widget's per-project capture file.
-  const bashScript =
-    'wid="${STORYBOARD_WIDGET_ID}"; ' +
-    'root="${STORYBOARD_PROJECT_ROOT}"; ' +
-    '[ -z "$wid" ] && exit 0; ' +
-    '[ -z "$root" ] && exit 0; ' +
-    'id=$(cat | sed -n \'s/.*"sessionId"[[:space:]]*:[[:space:]]*"\\([^"]*\\)".*/\\1/p\' | head -n1); ' +
-    '[ -z "$id" ] && exit 0; ' +
-    'dir="$root/.storyboard/agent-sessions"; ' +
-    'mkdir -p "$dir" 2>/dev/null; ' +
-    'printf %s "$id" > "$dir/$wid.session-id"'
-
   const hook = {
     version: 1,
     hooks: {
       sessionStart: [
-        { type: 'command', bash: bashScript, timeoutSec: 5 },
+        { type: 'command', bash: buildCaptureBashScript(), timeoutSec: 5 },
       ],
     },
   }
@@ -94,6 +85,121 @@ export function ensureCopilotCaptureHookInstalled() {
   return hookPath
 }
 
+/**
+ * Install (idempotently) a SessionStart hook in `~/.claude/settings.json`
+ * that captures Claude Code session ids the same way the Copilot hook does.
+ *
+ * Claude's hook payload uses `session_id` (snake_case) instead of Copilot's
+ * `sessionId` — our capture script handles both. Claude reads the hook from
+ * `~/.claude/settings.json` and merges it with project / local / managed
+ * settings, so we install user-scope and let Claude do the merging.
+ *
+ * Existing settings are preserved: we read, deep-merge our hook into the
+ * SessionStart array (replacing any prior storyboard hook by `command`
+ * marker), and write back.
+ *
+ * Safe to call on every dev-server boot.
+ */
+export function ensureClaudeCaptureHookInstalled() {
+  let settings = {}
+  try {
+    settings = JSON.parse(readFileSync(CLAUDE_SETTINGS_PATH, 'utf8'))
+  } catch { /* file may not exist or be invalid — start fresh */ }
+
+  if (typeof settings !== 'object' || settings === null) settings = {}
+  if (typeof settings.hooks !== 'object' || settings.hooks === null) settings.hooks = {}
+  if (!Array.isArray(settings.hooks.SessionStart)) settings.hooks.SessionStart = []
+
+  const ourHandler = {
+    type: 'command',
+    command: buildCaptureBashScript(),
+    timeout: 5,
+  }
+  // Claude wraps handlers in a matcher group. Use no matcher (matches all).
+  const ourGroup = { hooks: [ourHandler] }
+
+  // Replace any prior storyboard-capture group; identify by marker substring.
+  const next = settings.hooks.SessionStart.filter((g) => {
+    const handlers = Array.isArray(g?.hooks) ? g.hooks : []
+    return !handlers.some((h) => typeof h?.command === 'string' && h.command.includes(CLAUDE_HOOK_MARKER))
+  })
+  // Tag our handler command with the marker so we can find/replace it later.
+  ourHandler.command = `# ${CLAUDE_HOOK_MARKER}\n${ourHandler.command}`
+  next.push(ourGroup)
+
+  settings.hooks.SessionStart = next
+
+  try { mkdirSync(join(homedir(), '.claude'), { recursive: true }) } catch { /* empty */ }
+  try {
+    writeFileSync(CLAUDE_SETTINGS_PATH, JSON.stringify(settings, null, 2) + '\n')
+  } catch { /* best-effort */ }
+  return CLAUDE_SETTINGS_PATH
+}
+
+/**
+ * Install (idempotently) a SessionStart hook for Codex CLI at
+ * `~/.codex/hooks.json` using the same shared capture script.
+ *
+ * Codex's hook format is JSON with PascalCase event names like Claude's
+ * (and uses `session_id` snake_case in the payload, also like Claude).
+ * We own this file end-to-end (Codex merges multiple hook sources, so
+ * other hooks the user has via config.toml or repo-level files keep
+ * working). The marker comment identifies our handler for replace.
+ */
+export function ensureCodexCaptureHookInstalled() {
+  let hooks = { hooks: { SessionStart: [] } }
+  try {
+    const existing = JSON.parse(readFileSync(CODEX_HOOKS_PATH, 'utf8'))
+    if (existing && typeof existing === 'object') hooks = existing
+  } catch { /* file may not exist — start fresh */ }
+
+  if (typeof hooks.hooks !== 'object' || hooks.hooks === null) hooks.hooks = {}
+  if (!Array.isArray(hooks.hooks.SessionStart)) hooks.hooks.SessionStart = []
+
+  const ourHandler = {
+    type: 'command',
+    command: `# ${CLAUDE_HOOK_MARKER}\n${buildCaptureBashScript()}`,
+    timeout: 5,
+  }
+  // Codex matchers for SessionStart: "startup", "resume", "clear" — match all
+  const ourGroup = { matcher: '*', hooks: [ourHandler] }
+
+  hooks.hooks.SessionStart = hooks.hooks.SessionStart.filter((g) => {
+    const handlers = Array.isArray(g?.hooks) ? g.hooks : []
+    return !handlers.some((h) => typeof h?.command === 'string' && h.command.includes(CLAUDE_HOOK_MARKER))
+  })
+  hooks.hooks.SessionStart.push(ourGroup)
+
+  try { mkdirSync(join(homedir(), '.codex'), { recursive: true }) } catch { /* empty */ }
+  try {
+    writeFileSync(CODEX_HOOKS_PATH, JSON.stringify(hooks, null, 2) + '\n')
+  } catch { /* best-effort */ }
+  return CODEX_HOOKS_PATH
+}
+
+/**
+ * Shared capture bash script. Handles both Copilot (`sessionId` camelCase)
+ * and Claude (`session_id` snake_case) payload shapes. Reads
+ * STORYBOARD_WIDGET_ID + STORYBOARD_PROJECT_ROOT from env (exported by
+ * terminal-server into the agent shell). Silently no-ops if either env
+ * var is missing.
+ */
+function buildCaptureBashScript() {
+  return [
+    'wid="${STORYBOARD_WIDGET_ID}"',
+    'root="${STORYBOARD_PROJECT_ROOT}"',
+    '[ -z "$wid" ] && exit 0',
+    '[ -z "$root" ] && exit 0',
+    'payload=$(cat)',
+    'id=$(printf %s "$payload" | sed -n \'s/.*"sessionId"[[:space:]]*:[[:space:]]*"\\([^"]*\\)".*/\\1/p\' | head -n1)',
+    '[ -z "$id" ] && id=$(printf %s "$payload" | sed -n \'s/.*"session_id"[[:space:]]*:[[:space:]]*"\\([^"]*\\)".*/\\1/p\' | head -n1)',
+    '[ -z "$id" ] && exit 0',
+    'dir="$root/.storyboard/agent-sessions"',
+    'mkdir -p "$dir" 2>/dev/null',
+    'printf %s "$id" > "$dir/$wid.session-id"',
+  ].join('; ')
+}
+
 /**
  * Build a resume-aware startup command for an agent.
  *
@@ -120,13 +226,25 @@ export function buildResumeStartupCommand({ startupCommand, sessionId, agentCfg
 const UUID_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i
 
 /**
- * Decide whether a captured sessionId is still resumable. For copilot, this
- * means the id is a UUID and `~/.copilot/session-state/<id>/` still exists.
- * Other agents can opt out of validation by setting `sessionStateDir` to null.
+ * Decide whether a captured sessionId is still resumable.
+ *
+ * Strategies:
+ *   - `agentCfg.sessionStateDir` → check if `<dir>/<id>` exists (Copilot)
+ *   - `agentCfg.sessionStateGlob` → check if any
+ *     `~/.claude/projects/*‍/<id>.jsonl` exists (Claude)
+ *   - both null → trust the UUID
+ *
+ * Defaults to the Copilot session-state dir when nothing is configured.
  */
 export function isResumableSessionId(sessionId, agentCfg = {}) {
   if (!sessionId) return false
   if (!UUID_RE.test(sessionId)) return false
+
+  // Explicit glob check (Claude-style: <dir>/*/<id>.jsonl)
+  if (agentCfg.sessionStateGlob) {
+    return matchesSessionStateGlob(sessionId, agentCfg.sessionStateGlob)
+  }
+
   const stateDir = agentCfg.sessionStateDir === undefined
     ? COPILOT_SESSION_STATE_DIR
     : agentCfg.sessionStateDir
@@ -134,6 +252,48 @@ export function isResumableSessionId(sessionId, agentCfg = {}) {
   return existsSync(join(stateDir, sessionId))
 }
 
+/**
+ * Check if `<root>/<anySubdir>/<id>.jsonl` exists, where `glob` is a
+ * shorthand string. Supports two forms:
+ *   - `<root>/*` + `/{id}.jsonl` — exactly one subdir level (Claude pattern)
+ *   - `<root>/**` + `/<name-with-{id}>` — recursive find (Codex pattern, where
+ *     sessions are nested under year/month/day and the id is embedded in
+ *     a longer filename like `rollout-<ts>-<id>.jsonl`)
+ */
+function matchesSessionStateGlob(sessionId, glob) {
+  const expanded = glob.replace('~', homedir()).replace(/\{id\}/g, sessionId)
+
+  // Recursive form: root/**/name
+  if (expanded.includes('/**/')) {
+    const [root, namePattern] = expanded.split('/**/')
+    if (!existsSync(root)) return false
+    try {
+      const out = execFileSync('find', [root, '-name', namePattern, '-print', '-quit'], {
+        encoding: 'utf8', timeout: 3000, stdio: ['ignore', 'pipe', 'ignore'],
+      })
+      return out.trim().length > 0
+    } catch { return false }
+  }
+
+  // Single-level form: root/*/suffix
+  const parts = expanded.split('/*/')
+  if (parts.length !== 2) {
+    // Plain path with no wildcard — direct check.
+    return existsSync(expanded)
+  }
+  const [root, suffix] = parts
+  let entries = []
+  try { entries = readdirSync(root) } catch { return false }
+  for (const name of entries) {
+    const full = join(root, name)
+    try {
+      if (!statSync(full).isDirectory()) continue
+    } catch { continue }
+    if (existsSync(join(full, suffix))) return true
+  }
+  return false
+}
+
 /**
  * Watch `captureFile` for the agent's session id and call `onCapture(id)`
  * once it appears or is updated. Unlike the previous one-shot version,

package/src/core/canvas/agent-session.test.js

@@ -39,6 +39,32 @@ describe('agent-session', () => {
       mkdirSync(join(stateDir, id), { recursive: true })
       expect(isResumableSessionId(id, { sessionStateDir: stateDir })).toBe(true)
     })
+
+    it('uses sessionStateGlob to validate per-project session files (Claude shape)', () => {
+      const id = '11111111-2222-4333-8444-555555555555'
+      const { mkdirSync, writeFileSync } = require('node:fs')
+      const projectsDir = join(root, 'projects')
+      mkdirSync(join(projectsDir, '-Users-foo-some-project'), { recursive: true })
+      writeFileSync(join(projectsDir, '-Users-foo-some-project', `${id}.jsonl`), '')
+      expect(isResumableSessionId(id, { sessionStateGlob: `${projectsDir}/*/{id}.jsonl` })).toBe(true)
+      expect(isResumableSessionId(
+        '99999999-2222-4333-8444-555555555555',
+        { sessionStateGlob: `${projectsDir}/*/{id}.jsonl` },
+      )).toBe(false)
+    })
+
+    it('uses recursive ** in sessionStateGlob to validate nested session files (Codex shape)', () => {
+      const id = '22222222-2222-4333-8444-555555555555'
+      const { mkdirSync, writeFileSync } = require('node:fs')
+      const sessionsRoot = join(root, 'sessions')
+      mkdirSync(join(sessionsRoot, '2026', '05', '15'), { recursive: true })
+      writeFileSync(join(sessionsRoot, '2026', '05', '15', `rollout-2026-05-15T10-00-00-${id}.jsonl`), '')
+      expect(isResumableSessionId(id, { sessionStateGlob: `${sessionsRoot}/**/rollout-*-{id}.jsonl` })).toBe(true)
+      expect(isResumableSessionId(
+        '99999999-2222-4333-8444-555555555555',
+        { sessionStateGlob: `${sessionsRoot}/**/rollout-*-{id}.jsonl` },
+      )).toBe(false)
+    })
   })
 
   describe('buildResumeStartupCommand', () => {
@@ -78,8 +104,7 @@ describe('agent-session', () => {
     })
   })
 
-  describe('captureFilePath / readCapturedSessionId / clearCaptureFile', () => {
-    it('writes to .storyboard/agent-sessions/<key>.session-id', () => {
+  describe('captureFilePath / readCapturedSessionId / clearCaptureFile', () => {    it('writes to .storyboard/agent-sessions/<key>.session-id', () => {
       const cap = captureFilePath(root, 'agent-foo')
       expect(cap).toBe(join(root, '.storyboard', 'agent-sessions', 'agent-foo.session-id'))
     })

package/src/core/canvas/terminal-server.js

@@ -62,6 +62,8 @@ import {
   watchSessionIdFile,
   captureFilePath,
   ensureCopilotCaptureHookInstalled,
+  ensureClaudeCaptureHookInstalled,
+  ensureCodexCaptureHookInstalled,
 } from './agent-session.js'
 
 let pty
@@ -686,9 +688,13 @@ export function setupTerminalServer(httpServer, base = '/', branch = 'unknown',
   initRegistry(root, { gracePeriod: termCfg.orphanGracePeriod })
   initTerminalConfig(root)
 
-  // Install user-level Copilot CLI hook (~/.copilot/hooks/storyboard-capture.json)
-  // that captures sessionStart payloads into per-widget files. Idempotent.
+  // Install user-level Copilot CLI hook (~/.copilot/hooks/storyboard-capture.json),
+  // Claude Code hook (~/.claude/settings.json), and Codex CLI hook
+  // (~/.codex/hooks.json) that capture sessionStart payloads into per-widget
+  // files. All idempotent.
   try { ensureCopilotCaptureHookInstalled() } catch { /* best-effort */ }
+  try { ensureClaudeCaptureHookInstalled() } catch { /* best-effort */ }
+  try { ensureCodexCaptureHookInstalled() } catch { /* best-effort */ }
 
   // Best-effort: apply shell-config overrides if a tmux server already exists
   // from a previous dev server run. If no server exists, this fails silently —

package/src/core/stores/configSchema.js

@@ -62,7 +62,9 @@
  * @property {string}  [readinessSignal] — tmux pane text that signals the agent is ready (fragile, prefer readinessFile)
  * @property {string}  [resumeCommand]  — full command template to resume a session, with `{id}` placeholder (e.g. `"copilot --resume={id} --agent terminal-agent"`). Used both for auto-resume on cold restart (with `{id}` substituted) and for the interactive "Browse existing sessions" flow (binary derived, `--resume` appended).
  * @property {boolean} [readinessFile]  — use a file-based SessionStart hook for readiness (writes --settings with hook, polls for signal file)
- * @property {string}  [sessionIdEnv]   — env var exposed inside the agent's SessionStart hook payload that holds its session id (e.g. "COPILOT_AGENT_SESSION_ID"). When set, the server captures the id per-widget so cold restarts can auto-resume.
+ * @property {string}  [sessionIdEnv]   — env var exposed in the agent's SessionStart hook payload that holds its session id (e.g. "COPILOT_AGENT_SESSION_ID"). When set, the server captures the id per-widget so cold restarts can auto-resume.
+ * @property {string}  [sessionStateDir] — directory where the agent stores per-session state, used to pre-flight `--resume` (e.g. "~/.copilot/session-state"). Pass `null` to skip the fs check (UUID-only validation).
+ * @property {string}  [sessionStateGlob] — alternative to sessionStateDir for agents that store sessions under a per-project subdir, with `{id}` placeholder (e.g. "~/.claude/projects/*‍/{id}.jsonl").
  * @property {boolean} [resizable]     — override terminal resizability for this agent
  * @property {number}  [defaultWidth]  — override default width
  * @property {number}  [defaultHeight] — override default height