@dfosco/storyboard 0.7.1 → 0.9.0

package/src/canvas/style.css

@@ -1,12 +1,12 @@
 /* tiny-canvas styles */
 
 :root {
-  --tc-border-radius: var(--borderRadius-large, 12px);
-  --tc-shadow-rest: var(--shadow-resting-small, 0 1px 3px rgba(0, 0, 0, 0.12));
-  --tc-shadow-float: var(--shadow-floating-small, 0 4px 12px rgba(0, 0, 0, 0.15));
-  --tc-border-color: var(--borderColor-muted, rgba(0, 0, 0, 0.15));
-  --tc-bg-muted: var(--bgColor-muted, #f6f8fa);
-  --tc-dot-color: var(--overlay-backdrop-bgColor, rgba(0, 0, 0, 0.08));
+  --tc-border-radius: var(--radius, 12px);
+  --tc-shadow-rest: var(--shadow-resting, 0 1px 3px rgba(0, 0, 0, 0.12));
+  --tc-shadow-float: var(--shadow-floating, 0 4px 12px rgba(0, 0, 0, 0.15));
+  --tc-border-color: var(--color-border-muted, rgba(0, 0, 0, 0.15));
+  --tc-bg-muted: var(--color-background-muted, #f6f8fa);
+  --tc-dot-color: var(--color-overlay-backdrop, rgba(0, 0, 0, 0.08));
   --tc-grid-size: var(--golden-number, 36px);
   --tc-grid-offset: calc(var(--tc-grid-size) / -2);
   --tc-dot-radius: 2px;
@@ -46,22 +46,22 @@
 
 @media (prefers-color-scheme: dark) {
   .tc-canvas:not([data-color-mode="light"]) {
-    --tc-bg-muted: var(--bgColor-muted, #161b22);
-    --tc-dot-color: var(--overlay-backdrop-bgColor, rgba(255, 255, 255, 0.1));
-    --tc-border-color: var(--borderColor-muted, rgba(255, 255, 255, 0.15));
-    --tc-shadow-rest: var(--shadow-resting-small, 0 1px 3px rgba(0, 0, 0, 0.3));
-    --tc-shadow-float: var(--shadow-floating-small, 0 4px 12px rgba(0, 0, 0, 0.4));
+    --tc-bg-muted: var(--color-background-muted, #161b22);
+    --tc-dot-color: var(--color-overlay-backdrop, rgba(255, 255, 255, 0.1));
+    --tc-border-color: var(--color-border-muted, rgba(255, 255, 255, 0.15));
+    --tc-shadow-rest: var(--shadow-resting, 0 1px 3px rgba(0, 0, 0, 0.3));
+    --tc-shadow-float: var(--shadow-floating, 0 4px 12px rgba(0, 0, 0, 0.4));
   }
 }
 
 /* Dark mode — explicit override */
 
 .tc-canvas[data-color-mode="dark"] {
-  --tc-bg-muted: var(--bgColor-muted, #161b22);
-  --tc-dot-color: var(--overlay-backdrop-bgColor, rgba(255, 255, 255, 0.1));
-  --tc-border-color: var(--borderColor-muted, rgba(255, 255, 255, 0.15));
-  --tc-shadow-rest: var(--shadow-resting-small, 0 1px 3px rgba(0, 0, 0, 0.3));
-  --tc-shadow-float: var(--shadow-floating-small, 0 4px 12px rgba(0, 0, 0, 0.4));
+  --tc-bg-muted: var(--color-background-muted, #161b22);
+  --tc-dot-color: var(--color-overlay-backdrop, rgba(255, 255, 255, 0.1));
+  --tc-border-color: var(--color-border-muted, rgba(255, 255, 255, 0.15));
+  --tc-shadow-rest: var(--shadow-resting, 0 1px 3px rgba(0, 0, 0, 0.3));
+  --tc-shadow-float: var(--shadow-floating, 0 4px 12px rgba(0, 0, 0, 0.4));
 }
 
 /* Draggable */

package/src/core/artifact/operations.js

@@ -128,8 +128,6 @@ function createPrototype(values, root) {
     ? path.join(prototypesDir, `${values.folder}.folder`, values.name)
     : path.join(prototypesDir, values.name)
 
-  fs.mkdirSync(targetDir, { recursive: true })
-
   const files = []
   const relDir = path.relative(root, targetDir)
 
@@ -148,6 +146,22 @@ function createPrototype(values, root) {
     return { success: false, errors: [{ message: partialError }] }
   }
 
+  // Pre-resolve the partial's component file *before* writing anything.
+  // If the partial's template/recipe directory is missing or empty we'd
+  // otherwise leave an orphan .prototype.json on disk and Vite would
+  // then try (and fail) to lazy-load a non-existent index.jsx. Validate
+  // first, write second.
+  let componentFile = null
+  if (partialEntry && !values.url) {
+    const partialDir = path.join(root, 'src', partialEntry.baseDir, partialEntry.name)
+    componentFile = findComponentFile(partialDir)
+    if (!componentFile) {
+      return { success: false, errors: [{ message: `No .jsx or .tsx file found in src/${partialEntry.baseDir}/${partialEntry.name}/` }] }
+    }
+  }
+
+  fs.mkdirSync(targetDir, { recursive: true })
+
   // Write .prototype.json (with $global from partial when applicable)
   const protoFile = `${values.name}.prototype.json`
   const protoBody = JSON.parse(prototypeJson(values))
@@ -159,22 +173,14 @@ function createPrototype(values, root) {
 
   // Write index.jsx (only for non-external prototypes)
   if (!values.url) {
-    let body
-    if (partialEntry) {
-      const partialDir = path.join(root, 'src', partialEntry.baseDir, partialEntry.name)
-      const componentFile = findComponentFile(partialDir)
-      if (!componentFile) {
-        return { success: false, errors: [{ message: `No .jsx or .tsx file found in src/${partialEntry.baseDir}/${partialEntry.name}/` }] }
-      }
-      body = renderPartialIndexJsx({
+    const body = partialEntry
+      ? renderPartialIndexJsx({
         partialEntry,
         componentFile,
         componentName: toPascalCase(values.name),
         title: values.title || values.name,
       })
-    } else {
-      body = prototypeIndexJsx(values.name)
-    }
+      : prototypeIndexJsx(values.name)
     fs.writeFileSync(path.join(targetDir, 'index.jsx'), body, 'utf-8')
     files.push(`${relDir}/index.jsx`)
   }
@@ -191,7 +197,30 @@ function createPrototype(values, root) {
 
 function createCanvas(values, root) {
   const canvasDir = path.join(root, 'src', 'canvas')
-  const targetDir = values.folder ? path.join(canvasDir, values.folder) : canvasDir
+
+  // Folder resolution mirrors the canvas-server /create endpoint:
+  //   - if folder is empty → write at root
+  //   - if <folder>.folder/ exists → use it (workspace grouping)
+  //   - if <folder>/ exists       → use it (multi-page grouping)
+  //   - otherwise create a new dir per `folderKind`
+  //     ("workspace" → .folder/, default "pages" → plain dir)
+  let targetDir = canvasDir
+  let usedFolderKind = null
+  if (values.folder) {
+    const dotFolderDir = path.join(canvasDir, `${values.folder}.folder`)
+    const plainDir = path.join(canvasDir, values.folder)
+    if (fs.existsSync(dotFolderDir)) {
+      targetDir = dotFolderDir
+      usedFolderKind = 'workspace'
+    } else if (fs.existsSync(plainDir) && fs.statSync(plainDir).isDirectory()) {
+      targetDir = plainDir
+      usedFolderKind = 'pages'
+    } else {
+      const useWorkspace = values.folderKind === 'workspace'
+      targetDir = useWorkspace ? dotFolderDir : plainDir
+      usedFolderKind = useWorkspace ? 'workspace' : 'pages'
+    }
+  }
   fs.mkdirSync(targetDir, { recursive: true })
 
   const files = []
@@ -212,8 +241,18 @@ function createCanvas(values, root) {
     files.push(path.relative(root, path.join(targetDir, jsxFile)))
   }
 
+  // Route always strips `.folder/` (per the data plugin), so both kinds
+  // produce the same `/canvas/<folder>/<name>` URL shape.
   const canvasRoute = `/canvas/${values.folder ? `${values.folder}/` : ''}${values.name}`
-  return { success: true, type: 'canvas', name: values.name, path: path.relative(root, targetDir), route: canvasRoute, files }
+  return {
+    success: true,
+    type: 'canvas',
+    name: values.name,
+    path: path.relative(root, targetDir),
+    route: canvasRoute,
+    folderKind: usedFolderKind,
+    files,
+  }
 }
 
 function createComponent(values, root) {

package/src/core/artifact/schemas/canvas.schema.json

@@ -19,7 +19,13 @@
     },
     "folder": {
       "type": "string",
-      "description": "Parent folder directory"
+      "description": "Parent folder directory (name only — no .folder suffix). If the folder already exists, its kind wins; otherwise `folderKind` decides whether to create a workspace folder (.folder/) or a multi-page canvas group (plain dir)."
+    },
+    "folderKind": {
+      "type": "string",
+      "enum": ["workspace", "pages"],
+      "default": "pages",
+      "description": "When `folder` is set and doesn't yet exist: `workspace` creates `<folder>.folder/` (each canvas appears under a workspace folder header), `pages` creates a plain `<folder>/` dir (canvases become pages of a shared multi-page group). Ignored when the folder already exists."
     },
     "grid": {
       "type": "boolean",

package/src/core/autosync/server.test.js

@@ -21,7 +21,7 @@ describe('autosync scope helpers', () => {
     expect(matchesAutosyncScope('canvas', 'src/canvas/notes.txt')).toBe(true)
     expect(matchesAutosyncScope('canvas', 'assets/canvas/images/photo.png')).toBe(true)
     expect(matchesAutosyncScope('canvas', 'assets/canvas/snapshots/snapshot-widget--latest.webp')).toBe(true)
-    expect(matchesAutosyncScope('canvas', 'assets/.storyboard-public/terminal-snapshots/agent-abc.snapshot.json')).toBe(true)
+    expect(matchesAutosyncScope('canvas', 'assets/.storyboard-public/terminal-snapshots/agents.snapshot.json')).toBe(true)
     expect(matchesAutosyncScope('canvas', 'src/prototypes/demo/default.flow.json')).toBe(false)
   })
 

package/src/core/canvas/hot-pool.js

@@ -82,7 +82,6 @@ export class HotPool {
   #healthTimer = null
   #prereqsAvailable = null
   #wsSend = null
-  #webglReadySlots = 0
 
   // Agent config (null for bare shell pools)
   #agentConfig = null
@@ -110,7 +109,6 @@ export class HotPool {
     this.#loadBalancer = config.load_balancer !== false
     this.#wsSend = wsSend
     this.#agentConfig = agentConfig
-    this.#webglReadySlots = Math.max(0, config.webgl_ready_slots ?? 0)
   }
 
   get poolId() { return this.#poolId }
@@ -169,17 +167,16 @@ export class HotPool {
   }
 
   /**
-   * Non-mutating probe: would the next acquire() return a session, and would it
-   * be webgl-ready? Used by callers that want to render in webgl-ready mode
-   * without claiming a slot (the actual claim happens later when the WS
-   * connects). Returns { ready, webglReady }.
+   * Non-mutating probe: would the next acquire() return a session? Used by
+   * callers that want to know whether to render in hot mode without claiming
+   * a slot (the actual claim happens later when the WS connects).
+   * Returns { ready }.
    */
   peek() {
-    if (!this.#enabled || this.#queue.length === 0) return { ready: false, webglReady: false }
+    if (!this.#enabled || this.#queue.length === 0) return { ready: false }
     const idx = this.#queue.findIndex(s => s.state === 'ready')
-    if (idx === -1) return { ready: false, webglReady: false }
-    const webglReady = this.#webglReadySlots > 0 && idx < this.#webglReadySlots
-    return { ready: true, webglReady }
+    if (idx === -1) return { ready: false }
+    return { ready: true }
   }
 
   acquire() {
@@ -193,12 +190,8 @@ export class HotPool {
       return null
     }
 
-    // Session is WebGL-ready if its queue position was within webgl_ready_slots
-    const webglReady = this.#webglReadySlots > 0 && idx < this.#webglReadySlots
-
     const session = this.#queue.splice(idx, 1)[0]
     session.state = 'acquired'
-    session.webglReady = webglReady
     this.#acquired.set(session.id, session)
     const age = ((Date.now() - session.createdAt) / 1000).toFixed(1)
     const readyCount = this.#queue.filter(s => s.state === 'ready').length
@@ -206,10 +199,10 @@ export class HotPool {
     // Scale-up: queue drained to 0 ready → enter pressure mode
     if (readyCount === 0 && !this.#pressured) {
       this.#pressured = true
-      this.#log(`→ ACQUIRED ${session.id} tmux=${session.tmuxName} (age: ${age}s, webglReady: ${webglReady}) — ⚡ PRESSURE ON (scaling to max_pool_size=${this.#maxPoolSize})`)
+      this.#log(`→ ACQUIRED ${session.id} tmux=${session.tmuxName} (age: ${age}s) — ⚡ PRESSURE ON (scaling to max_pool_size=${this.#maxPoolSize})`)
       this.#resetCooldown()
     } else {
-      this.#log(`→ ACQUIRED ${session.id} tmux=${session.tmuxName} (age: ${age}s, webglReady: ${webglReady}, queue: ${readyCount}/${this.#fillTarget})`)
+      this.#log(`→ ACQUIRED ${session.id} tmux=${session.tmuxName} (age: ${age}s, queue: ${readyCount}/${this.#fillTarget})`)
       this.#resetCooldown()
     }
 
@@ -273,7 +266,6 @@ export class HotPool {
         load_balancer: this.#loadBalancer,
         load_balancer_cooldown_mins: this.#cooldownMs / 60_000,
         verbose: this.#verbose,
-        webgl_ready_slots: this.#webglReadySlots,
       },
       agentConfig: this.#agentConfig ? {
         startupCommand: this.#agentConfig.startupCommand,
@@ -294,7 +286,6 @@ export class HotPool {
     if (config.max_pool_size !== undefined) this.#maxPoolSize = Math.max(0, config.max_pool_size)
     if (config.load_balancer_cooldown_mins !== undefined) this.#cooldownMs = config.load_balancer_cooldown_mins * 60_000
     if (config.load_balancer !== undefined) this.#loadBalancer = !!config.load_balancer
-    if (config.webgl_ready_slots !== undefined) this.#webglReadySlots = Math.max(0, config.webgl_ready_slots)
     const newSize = Math.min(Math.max(0, config.pool_size ?? this.#poolSize), this.#maxPoolSize)
     const newEnabled = config.enabled !== false
     if (config.verbose !== undefined) this.#verbose = !!config.verbose
@@ -551,8 +542,8 @@ export class HotPool {
             const paneContent = execSync(
               // H1: include scrollback so the readiness echo can still be
               // matched after the agent's TUI repaints over it.
-              `tmux capture-pane -t "${tmuxName}" -p -S -200`,
-              { encoding: 'utf8', timeout: 1000 }
+              `tmux capture-pane -t "${tmuxName}" -p -S -200 2>/dev/null`,
+              { encoding: 'utf8', timeout: 1000, stdio: ['ignore', 'pipe', 'ignore'] }
             )
             // Strip ANSI escape sequences — agent CLIs use heavy formatting
             // eslint-disable-next-line no-control-regex
@@ -580,14 +571,13 @@ export class HotPool {
       return this.#tmuxSessionExists(tmuxName)
     }
 
-    // Send postStartup command (e.g. "/allow-all on")
+    // postStartup is NOT sent here intentionally. It's deferred to widget
+    // handoff (see terminal-server.js warm path) so it runs *after* the
+    // identity/role injection — mode-toggling slash commands like
+    // `/autopilot` must come last so canvas context lands in conversation
+    // history before the agent enters autopilot mode.
     if (postStartup) {
-      try {
-        await new Promise(r => setTimeout(r, 500))
-        execSync(`tmux send-keys -t "${tmuxName}" -l ${JSON.stringify(postStartup)}`, { stdio: 'ignore' })
-        execSync(`tmux send-keys -t "${tmuxName}" Enter`, { stdio: 'ignore' })
-        this.#log(`⊕ AGENT ${sessionId} postStartup sent: ${postStartup}`)
-      } catch { /* empty */ }
+      this.#log(`⊕ AGENT ${sessionId} postStartup "${postStartup}" deferred to widget handoff`)
     }
 
     this.#log(`⊕ AGENT ${sessionId} ready (${signalFilePath ? 'file' : 'signal'}: "${readinessSignal || 'file'}")`)
@@ -615,8 +605,8 @@ export class HotPool {
     if (this.#agentConfig?.startupCommand) {
       try {
         const cmd = execSync(
-          `tmux display-message -t "${session.tmuxName}" -p "#{pane_current_command}"`,
-          { encoding: 'utf8', timeout: 1000 }
+          `tmux display-message -t "${session.tmuxName}" -p "#{pane_current_command}" 2>/dev/null`,
+          { encoding: 'utf8', timeout: 1000, stdio: ['ignore', 'pipe', 'ignore'] }
         ).trim()
         // Agent exited if the pane is back to a shell
         const shells = ['zsh', 'bash', 'sh', 'fish']
@@ -707,7 +697,6 @@ export class HotPoolManager {
       load_balancer: config.load_balancer !== false,
       enabled: this.#enabled,
       verbose: !!config.verbose,
-      webgl_ready_slots: poolsConfig[poolId]?.webgl_ready_slots ?? 0,
     })
 
     // Terminal pool (bare shells)
@@ -772,10 +761,10 @@ export class HotPoolManager {
     return pool.acquire()
   }
 
-  /** Non-mutating probe: { ready, webglReady } for the specified pool. */
+  /** Non-mutating probe: { ready } for the specified pool. */
   peek(poolId) {
     const pool = this.#pools.get(poolId)
-    if (!pool) return { ready: false, webglReady: false }
+    if (!pool) return { ready: false }
     return pool.peek()
   }
 
@@ -819,7 +808,6 @@ export class HotPoolManager {
         load_balancer: config.load_balancer,
         enabled: config.enabled,
         verbose: config.verbose,
-        webgl_ready_slots: poolsConfig[id]?.webgl_ready_slots,
       }
       pool.reconfigure(poolConfig)
     }

package/src/core/canvas/materializer.js

@@ -7,17 +7,36 @@
  * Event types:
  *   canvas_created   — full initial state (first line)
  *   widget_added     — append a widget
- *   widget_updated   — patch widget props
- *   widget_moved     — update widget position
- *   widget_removed   — remove a widget by id
- *   settings_updated — patch canvas-level settings
- *   source_updated   — replace the sources array
- *   widgets_replaced — replace the entire widgets array (bulk update)
+ *   widget_updated   — patch widget props (may carry `prevProps` for undo)
+ *   widget_moved     — update widget position (may carry `prevPosition` for undo)
+ *   widget_removed   — remove a widget by id (carries `widget` for undo;
+ *                      legacy events only had `widgetId`)
+ *   settings_updated — patch canvas-level settings (may carry `prevSettings` for undo)
+ *   source_updated   — replace the sources array (may carry `prevSources` for undo)
+ *   widgets_replaced — replace the entire widgets array (compaction only, not undoable)
  *   connector_added  — append a connector between two widgets
- *   connector_removed — remove a connector by id
- *   connectors_replaced — replace the entire connectors array (bulk update, used by undo/redo)
- *   connector_waypoints_set     — set/replace manual routing waypoints on a connector
- *   connector_waypoints_cleared — drop manual routing, revert to auto-routing
+ *   connector_removed — remove a connector by id (carries `connector` for undo;
+ *                       legacy events only had `connectorId`)
+ *   connectors_replaced — replace the entire connectors array (compaction only, not undoable)
+ *   connector_waypoints_set     — set/replace manual routing waypoints (may carry `prevWaypoints`)
+ *   connector_waypoints_cleared — drop manual routing (may carry `prevWaypoints`)
+ *   connector_updated — patch connector anchors/meta (may carry `prevUpdates` for undo)
+ *
+ * Event metadata (all events):
+ *   id        — short random id stamped by the server, used by undo/redo
+ *               to target a specific event. Legacy events without an id are
+ *               non-undoable but materialize normally.
+ *   meta.kind — present on undo/redo emissions ('undo' | 'redo'). The
+ *               materializer ignores meta; it's informational for tools
+ *               and a future timeline UI.
+ *   meta.of   — the id of the event this undo/redo targets.
+ *
+ * Undo model: the materializer never "skips" events. Undo is a normal
+ * forward event (a real `widget_added`/`widget_removed`/`widget_updated`)
+ * that happens to carry meta.kind === 'undo'. Folding is one pass, no
+ * special cases. Inverse payloads (`prevProps`, `prevPosition`, full
+ * `widget`/`connector` on removes, etc.) are read only by the server's
+ * POST /undo and POST /redo endpoints when computing the inverse event.
  */
 
 /**
@@ -134,13 +153,16 @@ export function materialize(events) {
       }
 
       case 'widget_removed': {
+        // Back-compat: legacy events only had `widgetId`; new events carry
+        // the full `widget` object so undo can re-add without history walk.
+        const removedId = evt.widget?.id ?? evt.widgetId
         state.widgets = (state.widgets || []).filter(
-          (w) => w.id !== evt.widgetId,
+          (w) => w.id !== removedId,
         )
         // Cascade: remove connectors referencing the deleted widget
         if (state.connectors?.length) {
           state.connectors = state.connectors.filter(
-            (c) => c.start.widgetId !== evt.widgetId && c.end.widgetId !== evt.widgetId,
+            (c) => c.start.widgetId !== removedId && c.end.widgetId !== removedId,
           )
         }
         break
@@ -179,8 +201,12 @@ export function materialize(events) {
       }
 
       case 'connector_removed': {
+        // Back-compat: legacy events only had `connectorId`; new events
+        // carry the full `connector` object so undo can re-add without
+        // history walk.
+        const removedId = evt.connector?.id ?? evt.connectorId
         state.connectors = (state.connectors || []).filter(
-          (c) => c.id !== evt.connectorId,
+          (c) => c.id !== removedId,
         )
         break
       }

package/src/core/canvas/selectedWidgets.js

@@ -34,7 +34,7 @@ function createPathResolver(root) {
 
   function scanFiles() {
     const results = []
-    const ignore = new Set(['node_modules', 'dist', '.git', '.worktrees'])
+    const ignore = new Set(['node_modules', 'dist', '.git', '.worktrees', 'worktrees', 'workleafs'])
     function walk(dir, rel) {
       let entries
       try { entries = fs.readdirSync(dir, { withFileTypes: true }) } catch { return }