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

package/src/cli/proxy.js

@@ -1,18 +1,22 @@
 /**
- * storyboard proxy — Generate Caddyfile from ports.json and start/reload Caddy.
+ * storyboard proxy — Manage the Caddy reverse proxy.
+ *
+ * Usage:
+ *   storyboard proxy start       Start or reload Caddy proxy
+ *   storyboard proxy close       Stop Caddy proxy
  *
  * Caddy listens on port 80 for storyboard.localhost, routing:
  *   /storyboard/*              → main (port 1234)
  *   /<branchname>/storyboard/* → worktree (assigned port)
  *
  * Requires Caddy to be installed (brew install caddy).
- * Port 80 requires `sudo caddy start` — handled by `storyboard setup`.
  */
 
 import { readFileSync, writeFileSync, existsSync, mkdirSync } from 'fs'
 import { execSync } from 'child_process'
 import { dirname, resolve } from 'path'
 import { portsFilePath } from '../worktree/port.js'
+import { list as listRunningServers } from '../worktree/serverRegistry.js'
 
 export function readDevDomain(cwd) {
   try {
@@ -26,25 +30,48 @@ export function readDevDomain(cwd) {
 
 const DOMAIN = readDevDomain()
 
+/**
+ * Build branch→port map from running servers (servers.json) + explicit overrides.
+ * Only includes branches with live processes — prevents stale routes from
+ * creating redirect loops when ports get reused by different Vite instances.
+ * When multiple servers run for the same worktree, latest startedAt wins.
+ */
+function livePortMap(portOverrides = {}) {
+  const map = {}
+  try {
+    for (const srv of listRunningServers()) {
+      if (srv.worktree === 'main') continue
+      const existing = map[srv.worktree]
+      if (!existing || srv.startedAt > existing.startedAt) {
+        map[srv.worktree] = { port: srv.port, startedAt: srv.startedAt }
+      }
+    }
+  } catch { /* registry unavailable — rely on overrides only */ }
+
+  // Build final branch→port, overrides always win
+  const result = {}
+  for (const [name, info] of Object.entries(map)) result[name] = info.port
+  Object.assign(result, portOverrides)
+  // Remove 'main' if accidentally passed — handled separately
+  delete result.main
+  return result
+}
+
 export function generateCaddyfile(portOverrides = {}) {
   const portsFile = portsFilePath()
   const dir = dirname(portsFile)
   if (!existsSync(dir)) mkdirSync(dir, { recursive: true })
 
-  let ports = { main: 1234 }
+  // Main port from ports.json (always 1234 unless overridden)
+  let mainPort = 1234
   if (existsSync(portsFile)) {
     try {
-      ports = JSON.parse(readFileSync(portsFile, 'utf8'))
-    } catch {
-      // Corrupted — use defaults
-    }
+      const ports = JSON.parse(readFileSync(portsFile, 'utf8'))
+      mainPort = ports.main || 1234
+    } catch { /* use default */ }
   }
 
-  // Apply runtime overrides (e.g. when assigned port was in use)
-  Object.assign(ports, portOverrides)
-
-  const mainPort = ports.main || 1234
-  const branches = Object.entries(ports).filter(([name]) => name !== 'main')
+  const branches = Object.entries(livePortMap(portOverrides))
 
   // Build Caddy route blocks — branches first (more specific), main last (fallback)
   const branchBlocks = branches
@@ -104,15 +131,17 @@ const CADDY_ADMIN = 'http://localhost:2019'
  * Tagged with @id so it can be upserted independently of other repos.
  */
 export function generateRouteConfig(portOverrides = {}) {
+  // Main port from ports.json
   const portsFile = portsFilePath()
-  let ports = { main: 1234 }
+  let mainPort = 1234
   if (existsSync(portsFile)) {
-    try { ports = JSON.parse(readFileSync(portsFile, 'utf8')) } catch { /* use defaults */ }
+    try {
+      const ports = JSON.parse(readFileSync(portsFile, 'utf8'))
+      mainPort = ports.main || 1234
+    } catch { /* use default */ }
   }
-  Object.assign(ports, portOverrides)
 
-  const mainPort = ports.main || 1234
-  const branches = Object.entries(ports).filter(([name]) => name !== 'main')
+  const branches = Object.entries(livePortMap(portOverrides))
 
   // Branch subroutes first (more specific), then main fallback
   const subroutes = branches.map(([name, port]) => ({
@@ -215,7 +244,16 @@ export function upsertCaddyRoute(routeConfig) {
 
 export function startCaddy(caddyfilePath) {
   try {
-    execSync(`sudo caddy start --config "${caddyfilePath}" >/dev/null 2>&1`, { stdio: ['inherit', 'pipe', 'pipe'] })
+    execSync(`caddy start --config "${caddyfilePath}" >/dev/null 2>&1`, { stdio: ['inherit', 'pipe', 'pipe'] })
+    return true
+  } catch {
+    return false
+  }
+}
+
+export function stopCaddy() {
+  try {
+    execSync('curl -sf -X POST http://localhost:2019/stop', { timeout: 5000, stdio: 'ignore' })
     return true
   } catch {
     return false
@@ -226,35 +264,56 @@ export function startCaddy(caddyfilePath) {
 const isDirectRun = process.argv[2] === 'proxy'
 if (isDirectRun) {
   const { intro, outro, log, spinner } = await import('@clack/prompts')
-  intro('storyboard proxy')
-
-  const caddyfilePath = generateCaddyfile()
+  const subcommand = process.argv[3]
 
   if (!isCaddyInstalled()) {
+    intro('storyboard proxy')
     log.error('Caddy is not installed. Run: brew install caddy')
     process.exit(1)
   }
 
-  const s = spinner()
-  if (isCaddyRunning()) {
-    s.start('Updating proxy routes...')
-    const routeConfig = generateRouteConfig()
-    if (upsertCaddyRoute(routeConfig)) {
-      s.stop('Proxy routes updated (admin API)')
-    } else if (reloadCaddy(caddyfilePath)) {
-      s.stop('Proxy reloaded (Caddyfile fallback)')
+  if (subcommand === 'close' || subcommand === 'stop') {
+    intro('storyboard proxy close')
+    if (!isCaddyRunning()) {
+      log.info('Proxy is not running.')
+      outro('')
+    } else if (stopCaddy()) {
+      log.success('Proxy stopped.')
+      outro('')
     } else {
-      s.stop('Failed to update proxy')
+      log.error('Failed to stop proxy.')
       process.exit(1)
     }
-  } else {
-    s.start('Starting proxy (requires sudo for port 80)...')
-    if (startCaddy(caddyfilePath)) {
-      s.stop('Proxy started')
+  } else if (subcommand === 'start' || !subcommand) {
+    intro('storyboard proxy start')
+    const caddyfilePath = generateCaddyfile()
+
+    const s = spinner()
+    if (isCaddyRunning()) {
+      s.start('Updating proxy routes...')
+      const routeConfig = generateRouteConfig()
+      if (upsertCaddyRoute(routeConfig)) {
+        s.stop('Proxy routes updated (admin API)')
+      } else if (reloadCaddy(caddyfilePath)) {
+        s.stop('Proxy reloaded (Caddyfile fallback)')
+      } else {
+        s.stop('Failed to update proxy')
+        process.exit(1)
+      }
     } else {
-      s.stop('Failed to start')
-      process.exit(1)
+      s.start('Starting proxy...')
+      if (startCaddy(caddyfilePath)) {
+        s.stop('Proxy started')
+      } else {
+        s.stop('Failed to start proxy')
+        process.exit(1)
+      }
     }
+    outro(`Proxy ready at http://${DOMAIN}/`)
+  } else {
+    intro('storyboard proxy')
+    log.error(`Unknown subcommand: "${subcommand}"`)
+    log.info('Available: start, close')
+    process.exit(1)
   }
-  outro(`Proxy ready at http://${DOMAIN}/`)
 }

package/src/cli/schemas.js

@@ -170,13 +170,26 @@ export const widgetSchema = {
   },
   x: {
     type: 'number',
-    default: 0,
-    description: 'X position',
+    description: 'X position (omit for auto-positioning)',
   },
   y: {
     type: 'number',
-    default: 0,
-    description: 'Y position',
+    description: 'Y position (omit for auto-positioning)',
+  },
+  near: {
+    type: 'string',
+    description: 'Place near this widget ID (default: auto-selects last widget). Use --near false to disable',
+  },
+  direction: {
+    type: 'string',
+    default: 'right',
+    description: 'Direction from reference widget: right, left, above, below',
+    aliases: ['dir'],
+  },
+  resolve: {
+    type: 'boolean',
+    default: false,
+    description: 'Run server-side collision detection on the target position',
   },
   props: {
     type: 'string',
@@ -187,6 +200,11 @@ export const widgetSchema = {
     description: 'Path to a JSON file containing widget props (avoids shell escaping)',
     aliases: ['pf'],
   },
+  json: {
+    type: 'boolean',
+    default: false,
+    description: 'Output result as JSON (includes widget id)',
+  },
 }
 
 /** @type {FlagSchema} */

package/src/cli/server.js

@@ -1,35 +1,75 @@
 /**
- * storyboard server [branch] — Start the persistent Storyboard dev server.
- *
- * Manages Vite child processes and serves the /_storyboard/ API.
- * If a branch is given, also starts Vite for that branch immediately.
+ * storyboard server — Dev server lifecycle management.
  *
  * Usage:
- *   storyboard server              # start server, detect branch from cwd
- *   storyboard server main         # start server + dev for main
- *   storyboard server my-feature   # start server + dev for my-feature
+ *   storyboard server              List running dev servers
+ *   storyboard server list         List running dev servers
+ *   storyboard server start [wt]   Start the persistent server + Vite for a worktree
+ *   storyboard server stop <id>    Stop a dev server by worktree name or ID
  */
 
 import * as p from '@clack/prompts'
 import { startServer, SERVER_PORT, spawnViteForBranch } from '../server/index.js'
 import { parseFlags } from './flags.js'
 import { readDevDomain, generateCaddyfile, generateRouteConfig, upsertCaddyRoute, isCaddyRunning } from './proxy.js'
-import { detectWorktreeName, getPort } from '../worktree/port.js'
+import { detectWorktreeName, getPort, releasePort, repoRoot } from '../worktree/port.js'
+import {
+  list,
+  findByWorktree,
+  findById,
+  unregister,
+  prune,
+} from '../worktree/serverRegistry.js'
 
 const flagSchema = {
   port: { type: 'number', description: 'Server port (default: 4100)' },
+  background: { type: 'boolean', default: false, description: 'Run in background (--bg alias)' },
+  bg: { type: 'boolean', default: false, description: 'Run in background' },
+  multiple: { type: 'boolean', default: false, description: 'Allow multiple servers per worktree' },
 }
 
-async function main() {
-  const { flags, positional } = parseFlags(process.argv.slice(3), flagSchema)
-  const port = flags.port || SERVER_PORT
-  const branchArg = positional[0] || undefined
+// ─── Commands ────────────────────────────────────────────
 
-  p.intro('storyboard server')
+function serverList() {
+  const servers = list()
+  if (servers.length === 0) {
+    p.log.info('No dev servers running.')
+    return
+  }
 
   const devDomain = readDevDomain()
 
-  // Register server itself with Caddy so it's reachable at the dev domain
+  p.log.info('Running dev servers:\n')
+  for (const s of servers) {
+    const isMain = s.worktree === 'main'
+    const basePath = isMain ? '/' : `/branch--${s.worktree}/`
+    const proxyUrl = `http://${devDomain}${basePath}`
+    const bg = s.background ? ' (bg)' : ''
+    console.log(`  ${s.id}  ${s.worktree.padEnd(32)}  :${String(s.port).padEnd(5)}  PID ${String(s.pid).padEnd(7)}  ${proxyUrl}${bg}`)
+  }
+  console.log()
+}
+
+async function serverStart(branchArg, flags) {
+  const { background, bg, multiple } = flags
+  const isBackground = background || bg
+  const worktreeName = branchArg || detectWorktreeName()
+
+  // Check for duplicate worktree servers
+  if (!multiple) {
+    const existing = findByWorktree(worktreeName)
+    if (existing.length > 0) {
+      p.log.error(`A dev server is already running for "${worktreeName}" (ID: ${existing[0].id}, PID: ${existing[0].pid}).`)
+      p.log.info(`To stop it:  npx storyboard server stop ${existing[0].id}`)
+      p.log.info(`To allow multiple:  npx storyboard server start ${worktreeName} --multiple`)
+      process.exit(1)
+    }
+  }
+
+  const devDomain = readDevDomain()
+  const port = flags.port || SERVER_PORT
+
+  // Register server itself with Caddy
   try {
     const serverRoute = generateRouteConfig({ __server__: port })
     if (isCaddyRunning()) {
@@ -37,33 +77,116 @@ async function main() {
     }
   } catch { /* Caddy not available */ }
 
-  const server = startServer(port)
+  try {
+    await startServer(port)
+  } catch (err) {
+    if (err.code === 'EADDRINUSE') {
+      p.log.error(`Port ${port} is already in use — another server may be running.`)
+      p.log.info('Try: npx storyboard server list')
+      process.exit(1)
+    }
+    throw err
+  }
 
-  // Determine initial branch to start
-  const initialBranch = branchArg || detectWorktreeName()
-  const isMain = initialBranch === 'main'
-  const basePath = isMain ? '/' : `/branch--${initialBranch}/`
+  const isMain = worktreeName === 'main'
+  const basePath = isMain ? '/' : `/branch--${worktreeName}/`
   const proxyUrl = `http://${devDomain}${basePath}`
 
-  p.log.step(`Starting dev session for ${initialBranch}...`)
+  p.log.step(`Starting dev session for ${worktreeName}...`)
 
   try {
-    const entry = spawnViteForBranch(initialBranch)
-
-    // Wait for ready
+    const entry = spawnViteForBranch(worktreeName)
     const { waitForPort } = await import('../server/index.js')
     const ready = await waitForPort(entry.port)
 
     if (ready) {
-      p.log.success(proxyUrl)
+      p.log.success(`[${entry.serverId}] ${proxyUrl}`)
     } else {
       p.log.warning(`Vite started but may not be ready yet — check ${proxyUrl}`)
     }
   } catch (err) {
-    p.log.error(`Failed to start dev for ${initialBranch}: ${err.message}`)
+    p.log.error(`Failed to start dev for ${worktreeName}: ${err.message}`)
   }
 
   p.outro('Server running')
 }
 
+function serverStop(target) {
+  if (!target) {
+    p.log.error('Usage: storyboard server stop <worktree|ID>')
+    process.exit(1)
+  }
+
+  // Try by ID first
+  let entry = findById(target)
+
+  // Then by worktree name
+  if (!entry) {
+    const matches = findByWorktree(target)
+    if (matches.length === 0) {
+      p.log.error(`No server found for "${target}".`)
+      p.log.info('Run `npx storyboard server list` to see running servers.')
+      process.exit(1)
+    }
+    if (matches.length > 1) {
+      p.log.error(`Multiple servers running for worktree "${target}":`)
+      for (const s of matches) {
+        console.log(`  ${s.id}  PID: ${s.pid}  Port: ${s.port}`)
+      }
+      p.log.info('Specify an ID: npx storyboard server stop <ID>')
+      process.exit(1)
+    }
+    entry = matches[0]
+  }
+
+  try {
+    process.kill(entry.pid, 'SIGTERM')
+    p.log.success(`Stopped server ${entry.id} (PID: ${entry.pid}, worktree: "${entry.worktree}")`)
+  } catch (err) {
+    if (err.code === 'ESRCH') {
+      p.log.info(`Server ${entry.id} (PID: ${entry.pid}) was already dead.`)
+    } else {
+      p.log.error(`Failed to kill PID ${entry.pid}: ${err.message}`)
+    }
+  }
+
+  unregister(entry.id)
+  releasePort(entry.worktree)
+}
+
+// ─── Dispatch ────────────────────────────────────────────
+
+async function main() {
+  const { flags, positional } = parseFlags(process.argv.slice(3), flagSchema)
+  const subcommand = positional[0]
+
+  p.intro('storyboard server')
+
+  switch (subcommand) {
+    case undefined:
+    case 'list':
+      serverList()
+      break
+    case 'start':
+      await serverStart(positional[1], flags)
+      break
+    case 'stop':
+      serverStop(positional[1])
+      break
+    default: {
+      // Catch unknown subcommands before falling through to legacy branch behavior
+      const knownSubcommands = ['list', 'start', 'stop']
+      if (subcommand && !subcommand.match(/^[a-z0-9]/) || ['exit', 'help', 'status'].includes(subcommand)) {
+        p.log.error(`Unknown subcommand: "${subcommand}"`)
+        p.log.info(`Available: ${knownSubcommands.join(', ')}`)
+        p.log.info(`To start a branch: npx storyboard server start <branch>`)
+        process.exit(1)
+      }
+      // Legacy behavior: treat argument as branch name (storyboard server <branch>)
+      await serverStart(subcommand, flags)
+      break
+    }
+  }
+}
+
 main()

package/src/cli/serverUrl.js

@@ -6,11 +6,16 @@
  * dev server. Falls back to ports.json if Caddy isn't reachable.
  */
 
-import { detectWorktreeName, getPort } from '../worktree/port.js'
+import { detectWorktreeName, resolveRunningPort } from '../worktree/port.js'
 import { readDevDomain } from './proxy.js'
 import { execSync } from 'child_process'
 
 export function getServerUrl() {
+  // Prefer explicit env var (set by terminal agent sessions)
+  if (process.env.STORYBOARD_SERVER_URL) {
+    return process.env.STORYBOARD_SERVER_URL.replace(/\/$/, '')
+  }
+
   const name = detectWorktreeName()
 
   // Try Caddy admin API for the real port
@@ -50,7 +55,7 @@ export function getServerUrl() {
     // Caddy not running or not reachable — fall through
   }
 
-  // Fallback to ports.json
-  const port = getPort(name)
+  // Fallback to server registry / ports.json
+  const port = resolveRunningPort(name)
   return `http://localhost:${port}`
 }

package/src/cli/sessions.js

@@ -12,13 +12,14 @@
 
 import * as p from '@clack/prompts'
 import { execSync as execSyncFn } from 'node:child_process'
-import { detectWorktreeName, getPort } from '../worktree/port.js'
+import { detectWorktreeName, resolveRunningPort } from '../worktree/port.js'
 import { readDevDomain } from './proxy.js'
 import { parseFlags } from './flags.js'
 import { dim, cyan, bold, yellow } from './intro.js'
 
 const blue = (s) => `\x1b[34m${s}\x1b[0m`
 const orange = (s) => `\x1b[38;5;180m${s}\x1b[0m`
+const green = (s) => `\x1b[32m${s}\x1b[0m`
 
 const flagSchema = {
   all: { type: 'boolean', description: 'Show sessions from all branches' },
@@ -74,13 +75,13 @@ function summaryText(entry, showCanvas = true) {
   return canvas ? `${canvas} › ${name}` : name
 }
 
-/** Detect the current tmux session name (the one running this CLI) */
+/** Detect the current tmux session name (only if it's a storyboard session) */
 function getCurrentTmuxSession() {
   try {
     const result = execSyncFn('tmux display-message -p "#{session_name}" 2>/dev/null', {
       encoding: 'utf8', stdio: ['pipe', 'pipe', 'pipe'],
-    })
-    return result.trim()
+    }).trim()
+    return result.startsWith('sb-') ? result : null
   } catch {
     return null
   }
@@ -126,9 +127,130 @@ function formatRow(idx, entry, isCurrent = false, showCanvas = true) {
   return `  ${dim(num)}${statusColored}${dim(modified)}${dim(created)}${summaryColored}${badges}`
 }
 
+/** Call the bulk cleanup API */
+async function cleanupSessions(worktreeName, port, statuses) {
+  const { proxyBase, directBase } = getBaseUrl(worktreeName, port)
+  for (const base of [proxyBase, directBase]) {
+    try {
+      const res = await fetch(`${base}_storyboard/terminal/sessions/cleanup`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ statuses }),
+        signal: AbortSignal.timeout(5000),
+      })
+      if (res.ok) return await res.json()
+    } catch { continue }
+  }
+  return null
+}
+
+/** Wait for a single keypress and return it. Returns null if not a TTY. */
+function waitForKey() {
+  const { stdin } = process
+  if (!stdin.isTTY) return Promise.resolve(null)
+  return new Promise((resolve) => {
+    const wasRaw = stdin.isRaw
+    stdin.setRawMode(true)
+    stdin.resume()
+    stdin.once('data', (data) => {
+      stdin.setRawMode(wasRaw)
+      stdin.pause()
+      resolve(data)
+    })
+  })
+}
+
+/** Count sessions by status */
+function countByStatus(sessions) {
+  let live = 0, background = 0, archived = 0
+  for (const s of sessions) {
+    if (s.status === 'live') live++
+    else if (s.status === 'background') background++
+    else if (s.status === 'archived') archived++
+  }
+  return { live, background, archived }
+}
+
+/** Show cleanup pre-prompt. Returns true if user chose cleanup (and it was handled). */
+async function showCleanupPrompt(sessions, worktreeName, port) {
+  const { live, background, archived } = countByStatus(sessions)
+  const cleanable = background + archived
+  if (cleanable === 0) return false
+
+  const parts = []
+  if (live > 0) parts.push(blue(`${live} live`))
+  if (background > 0) parts.push(orange(`${background} background`))
+  if (archived > 0) parts.push(dim(`${archived} archived`))
+
+  p.log.info(`${sessions.length} sessions: ${parts.join(dim(' · '))}`)
+  process.stdout.write(`\n  ${dim('Press')} Tab ${dim('to clean up sessions, or')} Enter ${dim('to browse')}\n\n`)
+
+  const key = await waitForKey()
+  if (!key) return false // non-TTY, skip pre-prompt
+  const keyStr = key.toString()
+
+  // Tab = \t, Enter = \r or \n, Ctrl+C = \x03
+  if (keyStr === '\x03') {
+    p.outro(dim('Done'))
+    process.exit(0)
+  }
+
+  if (keyStr !== '\t') return false // Enter or any other key → continue to session list
+
+  // Build cleanup options
+  const options = []
+  if (archived > 0) {
+    options.push({
+      value: 'archived',
+      label: `Remove ${bold(String(archived))} archived session${archived !== 1 ? 's' : ''}`,
+    })
+  }
+  if (cleanable > 0 && (archived > 0 && background > 0)) {
+    options.push({
+      value: 'all',
+      label: `Remove ${bold(String(cleanable))} archived + background sessions`,
+    })
+  } else if (background > 0 && archived === 0) {
+    options.push({
+      value: 'all',
+      label: `Remove ${bold(String(background))} background session${background !== 1 ? 's' : ''}`,
+    })
+  }
+  options.push({ value: 'cancel', label: dim('Cancel') })
+
+  const action = await p.select({
+    message: 'Clean up sessions',
+    options,
+  })
+
+  if (p.isCancel(action) || action === 'cancel') return false
+
+  const statuses = action === 'archived' ? ['archived'] : ['archived', 'background']
+  const targetCount = action === 'archived' ? archived : cleanable
+  const statusLabel = action === 'archived' ? 'archived' : 'archived + background'
+
+  const confirm = await p.confirm({
+    message: `Remove ${bold(String(targetCount))} ${statusLabel} session${targetCount !== 1 ? 's' : ''}? This cannot be undone.`,
+  })
+  if (p.isCancel(confirm) || !confirm) return false
+
+  const result = await cleanupSessions(worktreeName, port, statuses)
+  if (result && result.success) {
+    p.log.success(green(`Removed ${result.removed} session${result.removed !== 1 ? 's' : ''}`))
+    const rem = result.remaining
+    if (rem && rem.total > 0) {
+      p.log.info(dim(`${rem.total} remaining: ${rem.live} live, ${rem.background} background, ${rem.archived} archived`))
+    }
+  } else {
+    p.log.error('Cleanup failed — could not reach dev server')
+  }
+
+  return true // handled — re-enter loop to refresh list
+}
+
 async function main() {
   const worktreeName = detectWorktreeName()
-  const port = getPort(worktreeName)
+  const port = resolveRunningPort(worktreeName)
   const currentTmuxSession = getCurrentTmuxSession()
 
   // Session list loop — user can navigate back here after actions
@@ -155,6 +277,10 @@ async function main() {
       process.exit(0)
     }
 
+    // Show Tab cleanup pre-prompt when there are cleanable sessions
+    const didCleanup = await showCleanupPrompt(sessions, worktreeName, port)
+    if (didCleanup) continue // re-fetch and re-render after cleanup
+
     // Determine if all sessions are from the same canvas (hide canvas name if so)
     const canvasIds = new Set(sessions.map(s => s.canvasId).filter(c => c && c !== 'unknown'))
     const showCanvas = canvasIds.size > 1