@dfosco/storyboard-core 4.2.0-beta.2 → 4.2.0-beta.21

package/src/cli/canvasBatch.js

@@ -0,0 +1,98 @@
+/**
+ * storyboard canvas batch — Execute multiple canvas operations in one call.
+ *
+ * Usage:
+ *   storyboard canvas batch --canvas my-canvas --ops '[{"op":"create-widget","type":"sticky-note","props":{"text":"Hi"}}]'
+ *   storyboard canvas batch --canvas my-canvas --ops-file ops.json
+ *   cat ops.json | storyboard canvas batch --canvas my-canvas --ops-file -
+ *
+ * Always outputs JSON. Designed for scripting and agent use.
+ */
+
+import fs from 'node:fs'
+import { parseFlags, hasFlags, formatFlagHelp } from './flags.js'
+import { ensureDevServer, serverPost } from './create.js'
+
+const batchSchema = {
+  canvas: {
+    type: 'string',
+    required: true,
+    description: 'Target canvas name',
+    aliases: ['c'],
+  },
+  ops: {
+    type: 'string',
+    description: 'Operations as a JSON string (array)',
+  },
+  'ops-file': {
+    type: 'string',
+    description: 'Path to JSON file with operations (use - for stdin)',
+    aliases: ['f'],
+  },
+}
+
+async function canvasBatch() {
+  const rest = process.argv.slice(4)
+
+  if (rest.includes('--help') || rest.includes('-h')) {
+    console.log(`\n  canvas batch flags:\n`)
+    console.log(formatFlagHelp(batchSchema))
+    console.log(`\n  Operations: create-widget, update-widget, move-widget, delete-widget, create-connector, delete-connector`)
+    console.log(`  Refs: use $0, $1 etc. to reference IDs from earlier create ops. Named refs via "ref" field.\n`)
+    process.exit(0)
+  }
+
+  const { flags, errors } = parseFlags(rest, batchSchema)
+
+  if (errors.length) {
+    for (const e of errors) console.error(e)
+    process.exit(1)
+  }
+
+  if (!flags.ops && !flags['ops-file']) {
+    console.error(JSON.stringify({ error: 'Provide --ops (JSON string) or --ops-file (path or - for stdin)' }))
+    process.exit(1)
+  }
+
+  await ensureDevServer({ quiet: true })
+
+  let operations
+  try {
+    if (flags['ops-file']) {
+      let raw
+      if (flags['ops-file'] === '-') {
+        // Read from stdin
+        const chunks = []
+        for await (const chunk of process.stdin) chunks.push(chunk)
+        raw = Buffer.concat(chunks).toString('utf8')
+      } else {
+        raw = fs.readFileSync(flags['ops-file'], 'utf8')
+      }
+      operations = JSON.parse(raw)
+    } else {
+      operations = JSON.parse(flags.ops)
+    }
+  } catch (err) {
+    console.error(JSON.stringify({ error: `Failed to parse operations: ${err.message}` }))
+    process.exit(1)
+  }
+
+  if (!Array.isArray(operations)) {
+    console.error(JSON.stringify({ error: 'Operations must be a JSON array' }))
+    process.exit(1)
+  }
+
+  try {
+    const result = await serverPost('/_storyboard/canvas/batch', {
+      name: flags.canvas,
+      operations,
+    })
+    console.log(JSON.stringify(result))
+    if (!result.success) process.exit(1)
+  } catch (err) {
+    console.error(JSON.stringify({ error: err.message }))
+    process.exit(1)
+  }
+}
+
+canvasBatch()

package/src/cli/canvasBounds.js

@@ -22,7 +22,7 @@ const bold = (s) => `\x1b[1m${s}\x1b[0m`
 
 async function checkServer() {
   try {
-    await fetch(getServerUrl(), { signal: AbortSignal.timeout(2000) })
+    await fetch(`${getServerUrl()}/_storyboard/canvas/list`, { signal: AbortSignal.timeout(2000) })
     return true
   } catch {
     return false

package/src/cli/canvasRead.js

@@ -24,7 +24,7 @@ const cyan = (s) => `\x1b[36m${s}\x1b[0m`
 
 async function checkServer() {
   try {
-    await fetch(getServerUrl(), { signal: AbortSignal.timeout(2000) })
+    await fetch(`${getServerUrl()}/_storyboard/canvas/list`, { signal: AbortSignal.timeout(2000) })
     return true
   } catch {
     return false

package/src/cli/canvasUpdate.js

@@ -0,0 +1,179 @@
+/**
+ * storyboard canvas update <widget-id> — Update a widget's props or position.
+ *
+ * Usage:
+ *   storyboard canvas update <widget-id> --canvas my-canvas --text "New text"
+ *   storyboard canvas update <widget-id> --canvas my-canvas --content "# Markdown"
+ *   storyboard canvas update <widget-id> --canvas my-canvas --props '{"key":"value"}'
+ *   storyboard canvas update <widget-id> --canvas my-canvas --x 100 --y 200
+ *
+ * Shorthand flags (merged into props):
+ *   --text <string>       Set props.text (sticky notes)
+ *   --content <string>    Set props.content (markdown blocks)
+ *   --src <string>        Set props.src (images, prototypes)
+ *   --url <string>        Set props.url (link previews, embeds)
+ *   --color <string>      Set props.color (sticky notes)
+ *
+ * Position flags:
+ *   --x <number>          Move widget to x position
+ *   --y <number>          Move widget to y position
+ */
+
+import * as p from '@clack/prompts'
+import { getServerUrl } from './serverUrl.js'
+
+const dim = (s) => `\x1b[2m${s}\x1b[0m`
+const bold = (s) => `\x1b[1m${s}\x1b[0m`
+
+async function checkServer() {
+  try {
+    await fetch(`${getServerUrl()}/_storyboard/canvas/list`, { signal: AbortSignal.timeout(2000) })
+    return true
+  } catch {
+    return false
+  }
+}
+
+async function serverPatch(path, body) {
+  const base = getServerUrl()
+  const res = await fetch(`${base}${path}`, {
+    method: 'PATCH',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  })
+  if (!res.ok) {
+    const text = await res.text().catch(() => '')
+    throw new Error(`${res.status} ${res.statusText}${text ? ': ' + text : ''}`)
+  }
+  return res.json()
+}
+
+async function canvasUpdate() {
+  const args = process.argv.slice(4)
+
+  if (args.includes('--help') || args.includes('-h')) {
+    console.log(`
+  canvas update — Update a widget's props or position
+
+  Usage:
+    storyboard canvas update <widget-id> --canvas <name> [flags]
+
+  Shorthand flags (merged into props):
+    --text <string>       Set props.text (sticky notes)
+    --content <string>    Set props.content (markdown blocks)
+    --src <string>        Set props.src (images, prototypes)
+    --url <string>        Set props.url (link previews, embeds)
+    --color <string>      Set props.color (sticky notes)
+    --props <json>        Set arbitrary props as JSON
+
+  Position flags:
+    --x <number>          Move widget to x position
+    --y <number>          Move widget to y position
+
+  Options:
+    --canvas <name>       Canvas name ${dim('(required)')}
+    --json                Output result as JSON
+`)
+    process.exit(0)
+  }
+
+  // Parse args
+  let widgetId = ''
+  let canvasName = ''
+  let outputJson = false
+  let rawProps = ''
+  const shorthandProps = {}
+  let posX = undefined
+  let posY = undefined
+
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i]
+    if (arg === '--canvas' && args[i + 1]) {
+      canvasName = args[++i]
+    } else if (arg === '--json') {
+      outputJson = true
+    } else if (arg === '--props' && args[i + 1]) {
+      rawProps = args[++i]
+    } else if (arg === '--text' && args[i + 1]) {
+      shorthandProps.text = args[++i]
+    } else if (arg === '--content' && args[i + 1]) {
+      shorthandProps.content = args[++i]
+    } else if (arg === '--src' && args[i + 1]) {
+      shorthandProps.src = args[++i]
+    } else if (arg === '--url' && args[i + 1]) {
+      shorthandProps.url = args[++i]
+    } else if (arg === '--color' && args[i + 1]) {
+      shorthandProps.color = args[++i]
+    } else if (arg === '--x' && args[i + 1]) {
+      posX = Number(args[++i])
+    } else if (arg === '--y' && args[i + 1]) {
+      posY = Number(args[++i])
+    } else if (!arg.startsWith('-') && !widgetId) {
+      widgetId = arg
+    }
+  }
+
+  if (!widgetId) {
+    p.log.error('Widget ID is required. Usage: storyboard canvas update <widget-id> --canvas <name>')
+    process.exit(1)
+  }
+
+  if (!canvasName) {
+    p.log.error('Canvas name is required. Use --canvas <name>')
+    process.exit(1)
+  }
+
+  // Build props
+  let props = {}
+  if (rawProps) {
+    try {
+      props = JSON.parse(rawProps)
+    } catch {
+      p.log.error('--props must be valid JSON')
+      process.exit(1)
+    }
+  }
+  Object.assign(props, shorthandProps)
+
+  // Build position
+  let position = undefined
+  if (posX !== undefined || posY !== undefined) {
+    position = {}
+    if (posX !== undefined) position.x = posX
+    if (posY !== undefined) position.y = posY
+  }
+
+  if (Object.keys(props).length === 0 && !position) {
+    p.log.error('Nothing to update. Provide --props, --text, --content, --x, --y, or other flags.')
+    process.exit(1)
+  }
+
+  // Check server
+  const serverUp = await checkServer()
+  if (!serverUp) {
+    p.log.error('Dev server is not running. Start it with: storyboard dev')
+    process.exit(1)
+  }
+
+  try {
+    const body = { name: canvasName, widgetId }
+    if (Object.keys(props).length > 0) body.props = props
+    if (position) body.position = position
+
+    const result = await serverPatch('/_storyboard/canvas/widget', body)
+
+    if (outputJson) {
+      console.log(JSON.stringify(result, null, 2))
+    } else {
+      const updates = []
+      if (Object.keys(props).length > 0) updates.push(`props: ${Object.keys(props).join(', ')}`)
+      if (position) updates.push(`position: ${posX ?? '·'}, ${posY ?? '·'}`)
+      p.log.success(`Updated ${bold(widgetId)} in ${bold(canvasName)} (${updates.join('; ')})`)
+    }
+  } catch (err) {
+    p.log.error(`Failed to update widget: ${err.message}`)
+    process.exit(1)
+  }
+}
+
+canvasUpdate()

package/src/cli/create.js

@@ -18,7 +18,7 @@ import * as p from '@clack/prompts'
 import { parseFlags, hasFlags, formatFlagHelp } from './flags.js'
 import { prototypeSchema, canvasSchema, flowSchema, pageSchema, componentSchema } from './schemas.js'
 import { getServerUrl } from './serverUrl.js'
-import { detectWorktreeName, getPort } from '../worktree/port.js'
+import { detectWorktreeName, getPort, resolveRunningPort } from '../worktree/port.js'
 
 const dim = (s) => `\x1b[2m${s}\x1b[0m`
 const green = (s) => `\x1b[32m${s}\x1b[0m`
@@ -59,24 +59,45 @@ async function serverPost(path, body) {
   return res.json()
 }
 
-async function checkServer() {
+async function checkServer(url, { quiet = false } = {}) {
+  const target = url || getServerUrl()
   try {
-    await fetch(getServerUrl(), { signal: AbortSignal.timeout(2000) })
+    await fetch(`${target}/_storyboard/canvas/list`, { signal: AbortSignal.timeout(5000) })
     return true
-  } catch {
+  } catch (err) {
+    if (!quiet) p.log.warning(`Could not reach dev server at ${target}: ${err.message}`)
     return false
   }
 }
 
-async function ensureDevServer() {
-  if (await checkServer()) return
+async function ensureDevServer({ quiet = false } = {}) {
+  // 1. If STORYBOARD_SERVER_URL is explicitly set, try it first (with retry)
+  if (process.env.STORYBOARD_SERVER_URL) {
+    const envUrl = process.env.STORYBOARD_SERVER_URL.replace(/\/$/, '')
+    if (await checkServer(envUrl, { quiet })) return
 
-  const s = p.spinner()
-  s.start('Starting dev server...')
+    // Retry once after a short delay (server may be mid-restart)
+    await new Promise((r) => setTimeout(r, 1000))
+    if (await checkServer(envUrl, { quiet })) return
+
+    if (!quiet) {
+      p.log.warning(
+        `STORYBOARD_SERVER_URL (${envUrl}) is not reachable — falling back to auto-discovery.`
+      )
+    }
+  }
+
+  // 2. Try auto-discovered URL (Caddy → ports.json)
+  if (await checkServer(undefined, { quiet })) return
+
+  // 3. No server found — start one
+  let s
+  if (!quiet) {
+    s = p.spinner()
+    s.start('No running dev server found — starting one...')
+  }
 
   const { spawn } = await import('child_process')
-  const { readFileSync } = await import('fs')
-  const { resolve } = await import('path')
   const { generateCaddyfile, isCaddyRunning, reloadCaddy } = await import('./proxy.js')
 
   const worktreeName = detectWorktreeName()
@@ -95,17 +116,20 @@ async function ensureDevServer() {
   const start = Date.now()
   while (Date.now() - start < 30000) {
     await new Promise((r) => setTimeout(r, 500))
-    if (await checkServer()) {
+    try {
+      await fetch(`http://localhost:${port}`, { signal: AbortSignal.timeout(2000) })
       // Update Caddy with actual port
       try {
         const caddyfilePath = generateCaddyfile({ [worktreeName]: port })
         if (isCaddyRunning()) reloadCaddy(caddyfilePath)
       } catch {}
-      s.stop('Dev server started')
+      if (s) s.stop('Dev server started')
       return
+    } catch {
+      // Not ready yet — keep waiting
     }
   }
-  s.stop('Dev server may still be starting...')
+  if (s) s.stop('Dev server may still be starting...')
 }
 
 function getProxyUrl() {
@@ -116,7 +140,7 @@ function getProxyUrl() {
 
 function getDirectUrl() {
   const name = detectWorktreeName()
-  const port = getPort(name)
+  const port = resolveRunningPort(name)
   const isMain = name === 'main'
   return isMain ? `http://localhost:${port}/` : `http://localhost:${port}/branch--${name}/`
 }