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

package/scaffold/toolbar.config.json

@@ -1,4 +1,4 @@
 {
-  "_comment": "Client toolbar overrides. Deep-merged with core defaults. See @dfosco/storyboard-core/toolbar.config.json for all options. Tools use 'surface' to target where they render (main-toolbar, canvas-toolbar, command-list) and 'handler' to reference their logic (core:name for built-in, custom:name for custom handlers).",
+  "_comment": "Client toolbar overrides. Deep-merged with core defaults. See @dfosco/storyboard-core/toolbar.config.json for all options. Tools use 'surface' to target where they render (command-toolbar, canvas-toolbar, command-palette) and 'handler' to reference their logic (core:name for built-in, custom:name for custom handlers).",
   "tools": {}
 }

package/src/ActionMenuButton.jsx

@@ -0,0 +1,100 @@
+import { useState, useEffect, useCallback } from 'react'
+import { TriggerButton } from './lib/components/ui/trigger-button/index.js'
+import * as DropdownMenu from './lib/components/ui/dropdown-menu/index.js'
+import Icon from './svelte-plugin-ui/components/Icon.jsx'
+import { getActionChildren, subscribeToCommandActions } from './commandActions.js'
+
+export default function ActionMenuButton({ config = {}, data, localOnly, tabindex = -1 }) {
+  const [menuOpen, setMenuOpen] = useState(false)
+  const [actionsVersion, setActionsVersion] = useState(0)
+
+  useEffect(() => {
+    const unsub = subscribeToCommandActions(() => { setActionsVersion((v) => v + 1) })
+    return unsub
+  }, [])
+
+  const children = config.action ? getActionChildren(config.action) : []
+  const hasRadio = children.some((c) => c.type === 'radio')
+  const activeValue = children.find((c) => c.type === 'radio' && c.active)?.id || ''
+
+  const handleOpenChange = useCallback((open) => {
+    setMenuOpen(open)
+    if (open) setActionsVersion((v) => v + 1)
+  }, [])
+
+  if (children.length === 0) return null
+
+  return (
+    <DropdownMenu.Root open={menuOpen} onOpenChange={handleOpenChange}>
+      <DropdownMenu.Trigger>
+          <TriggerButton
+            active={menuOpen}
+            size="icon-xl"
+            aria-label={config.ariaLabel || config.label || 'Menu'}
+            tabIndex={tabindex}
+          >
+            <Icon name={config.icon || 'primer/gear'} size={16} {...(config.meta || {})} />
+          </TriggerButton>
+      </DropdownMenu.Trigger>
+
+      <DropdownMenu.Content
+        side="top"
+        align="end"
+        sideOffset={16}
+        style={config.menuWidth ? { minWidth: config.menuWidth } : undefined}
+        className={config.menuWidth ? '' : 'min-w-[200px]'}
+      >
+        {config.label && <DropdownMenu.Label>{config.label}</DropdownMenu.Label>}
+
+        {hasRadio ? (
+          <DropdownMenu.RadioGroup value={activeValue}>
+            {children.map((child) => {
+              if (child.type !== 'radio') return null
+              return (
+                <DropdownMenu.RadioItem
+                  key={child.id || child.label}
+                  value={child.id}
+                  onClick={(e) => {
+                    if (child.href && (e.metaKey || e.ctrlKey)) {
+                      e.preventDefault(); window.open(child.href, '_blank'); setMenuOpen(false); return
+                    }
+                    if (child.execute) child.execute(); setMenuOpen(false)
+                  }}
+                >
+                  {child.label}
+                </DropdownMenu.RadioItem>
+              )
+            })}
+          </DropdownMenu.RadioGroup>
+        ) : (
+          children.map((child) => {
+            if (child.type === 'toggle') {
+              return (
+                <DropdownMenu.CheckboxItem
+                  key={child.id || child.label}
+                  checked={child.active}
+                  onSelect={(e) => { e.preventDefault(); if (child.execute) child.execute(); setActionsVersion((v) => v + 1) }}
+                >
+                  {child.label}
+                </DropdownMenu.CheckboxItem>
+              )
+            }
+            return (
+              <DropdownMenu.Item
+                key={child.id || child.label}
+                onClick={(e) => {
+                  if (child.href && (e.metaKey || e.ctrlKey)) {
+                    e.preventDefault(); window.open(child.href, '_blank'); setMenuOpen(false); return
+                  }
+                  if (child.execute) child.execute(); setMenuOpen(false)
+                }}
+              >
+                {child.label}
+              </DropdownMenu.Item>
+            )
+          })
+        )}
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>
+  )
+}

package/src/AutosyncMenuButton.css

@@ -0,0 +1,67 @@
+.menuTitle {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--fgColor-default, #e6edf3);
+  padding: 6px 6px 0;
+  margin: 0;
+}
+
+.description {
+  font-size: 12px;
+  color: var(--fgColor-muted, #848d97);
+  padding: 0 6px 4px;
+  margin: 0;
+  line-height: 1.4;
+}
+
+.branchRow {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 6px 6px;
+}
+
+.branchLabel {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--fgColor-default, #e6edf3);
+}
+
+.statusRow {
+  padding: 4px 6px 2px;
+}
+
+.scopeHint {
+  font-size: 11px;
+  color: var(--fgColor-muted, #848d97);
+  padding: 4px 0;
+  margin: 0;
+}
+
+.statusError {
+  font-size: 11px;
+  color: var(--fgColor-danger, #f85149);
+}
+
+.statusOk {
+  font-size: 11px;
+  color: var(--fgColor-muted, #848d97);
+}
+
+.footer {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--fgColor-muted, #848d97);
+  padding: 2px 6px 0;
+  margin: 0;
+}
+
+.footerDot {
+  width: 8px;
+  height: 8px;
+  background: hsl(212, 92%, 45%);
+  border-radius: 50%;
+  flex-shrink: 0;
+}

package/src/AutosyncMenuButton.jsx

@@ -0,0 +1,241 @@
+import './AutosyncMenuButton.css';
+import { useState, useEffect, useRef, useCallback } from 'react'
+import { TriggerButton } from './lib/components/ui/trigger-button/index.js'
+import * as DropdownMenu from './lib/components/ui/dropdown-menu/index.js'
+import Icon from './svelte-plugin-ui/components/Icon.jsx'
+import BranchSelect from './BranchSelect.jsx'
+
+export default function AutosyncMenuButton({ config = {}, basePath = '/', tabindex = -1 }) {
+  const apiBase = (basePath === '/' ? '' : basePath.replace(/\/$/, '')) + '/_storyboard/autosync'
+
+  const [menuOpen, setMenuOpen] = useState(false)
+  const [branches, setBranches] = useState([])
+  const [currentBranch, setCurrentBranch] = useState('')
+  const [selectedBranch, setSelectedBranch] = useState('')
+  const [enabledScopes, setEnabledScopes] = useState({ canvas: false, prototype: false })
+  const [lastSyncTime, setLastSyncTime] = useState(null)
+  const [lastError, setLastError] = useState(null)
+  const [lastErrorByScope, setLastErrorByScope] = useState({ canvas: null, prototype: null })
+  const [syncing, setSyncing] = useState(false)
+  const [syncingScope, setSyncingScope] = useState(null)
+  const [loading, setLoading] = useState(false)
+
+  const pollRef = useRef(null)
+  const enabledScopesRef = useRef(enabledScopes)
+  enabledScopesRef.current = enabledScopes
+
+  function isProtectedBranch(name) {
+    const normalized = String(name || '').toLowerCase()
+    return normalized === 'main' || normalized === 'master'
+  }
+
+  function hasEnabled(scopes) {
+    return scopes?.canvas || scopes?.prototype
+  }
+
+  const applyStatus = useCallback((data) => {
+    const incomingScopes = data.enabledScopes
+    let newScopes
+    if (incomingScopes && typeof incomingScopes === 'object') {
+      newScopes = { canvas: incomingScopes.canvas === true, prototype: incomingScopes.prototype === true }
+    } else {
+      newScopes = {
+        canvas: data.enabled === true && data.scope === 'canvas',
+        prototype: data.enabled === true && data.scope === 'prototype',
+      }
+    }
+    setEnabledScopes(newScopes)
+
+    if (data.branch) setCurrentBranch(data.branch)
+    if (data.targetBranch) setSelectedBranch(data.targetBranch)
+    setLastSyncTime(data.lastSyncTime || null)
+    setLastError(data.lastError || null)
+    setSyncing(data.syncing === true)
+    setSyncingScope(
+      data.syncingScope === 'prototype' || data.syncingScope === 'canvas' ? data.syncingScope : null,
+    )
+
+    const incomingErrorByScope = data.lastErrorByScope
+    if (incomingErrorByScope && typeof incomingErrorByScope === 'object') {
+      setLastErrorByScope({ canvas: incomingErrorByScope.canvas || null, prototype: incomingErrorByScope.prototype || null })
+    }
+  }, [])
+
+  const fetchStatus = useCallback(async () => {
+    try {
+      const res = await fetch(`${apiBase}/status`)
+      const data = await res.json()
+      applyStatus(data)
+    } catch { /* ignore */ }
+  }, [apiBase, applyStatus])
+
+  function startPolling() {
+    if (pollRef.current) return
+    pollRef.current = setInterval(fetchStatus, 5000)
+  }
+
+  function stopPolling() {
+    if (pollRef.current) { clearInterval(pollRef.current); pollRef.current = null }
+  }
+
+  async function fetchBranches() {
+    try {
+      const res = await fetch(`${apiBase}/branches`)
+      const data = await res.json()
+      const branchList = data.branches || []
+      const current = data.current || ''
+      setBranches(branchList)
+      setCurrentBranch(current)
+      setSelectedBranch((prev) => {
+        if (!prev || isProtectedBranch(prev) || !branchList.includes(prev)) {
+          return branchList.includes(current) ? current : (branchList[0] || '')
+        }
+        return prev
+      })
+    } catch { /* ignore */ }
+  }
+
+  async function setAutosyncScope(scope, shouldEnable, e) {
+    e.preventDefault()
+    setLoading(true)
+    setLastError(null)
+    try {
+      if (shouldEnable && !selectedBranch) {
+        setLastError('Select a non-main branch first')
+        return
+      }
+      const res = await fetch(
+        shouldEnable ? `${apiBase}/enable` : `${apiBase}/disable`,
+        {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(shouldEnable ? { branch: selectedBranch, scope } : { scope }),
+        },
+      )
+      const data = await res.json()
+      if (!res.ok) {
+        setLastError(data.error || (shouldEnable ? 'Failed to enable' : 'Failed to disable'))
+      } else {
+        applyStatus(data)
+      }
+    } catch (err) {
+      setLastError(err.message || 'Request failed')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const branchSelectRef = useRef(null)
+
+  function handleOpenChange(open) {
+    setMenuOpen(open)
+    if (open) {
+      fetchBranches()
+      fetchStatus()
+      startPolling()
+      // Focus the branch selector after the menu mounts
+      requestAnimationFrame(() => branchSelectRef.current?.focus())
+    } else if (!hasEnabled(enabledScopesRef.current)) {
+      stopPolling()
+    }
+  }
+
+  // Allow command palette to open this menu via custom event
+  useEffect(() => {
+    const open = () => handleOpenChange(true)
+    document.addEventListener('storyboard:open-autosync', open)
+    return () => document.removeEventListener('storyboard:open-autosync', open)
+  }, [])
+
+  function formatSyncTime(iso) {
+    if (!iso) return ''
+    try {
+      return new Date(iso).toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true })
+    } catch { return iso }
+  }
+
+  useEffect(() => {
+    fetchStatus()
+    return () => stopPolling()
+  }, [fetchStatus])
+
+  const isScopeEnabled = (target) => enabledScopes[target] === true
+  const showStatus = hasEnabled(enabledScopes) || lastError || lastSyncTime || lastErrorByScope.canvas || lastErrorByScope.prototype
+
+  return (
+    <DropdownMenu.Root open={menuOpen} onOpenChange={handleOpenChange}>
+      <DropdownMenu.Trigger>
+          <TriggerButton
+            active={menuOpen || hasEnabled(enabledScopes)}
+            size="icon-xl"
+            aria-label={config.ariaLabel || 'Autosync'}
+            tabIndex={tabindex}
+          >
+            <Icon name={config.icon || 'primer/sync'} size={16} {...(config.meta || {})} />
+          </TriggerButton>
+      </DropdownMenu.Trigger>
+
+      <DropdownMenu.Content
+        side="top"
+        align="end"
+        sideOffset={16}
+        style={config.menuWidth ? { minWidth: config.menuWidth } : undefined}
+        className="min-w-[280px]"
+      >
+        <p className="menuTitle">{config.label || 'Autosync'}</p>
+        <p className="description">Automatically commit and push changes every 30s</p>
+
+        <DropdownMenu.Separator />
+
+        {/* Branch selector */}
+        <div className="branchRow">
+          <label className="branchLabel" htmlFor="autosync-branch">Branch</label>
+          <BranchSelect
+            id="autosync-branch"
+            ref={branchSelectRef}
+            branches={branches}
+            value={selectedBranch}
+            onChange={(e) => setSelectedBranch(e.target.value)}
+            disabled={hasEnabled(enabledScopes) || loading}
+            placeholder="No non-main branches available"
+          />
+        </div>
+
+        <DropdownMenu.Separator />
+
+        <DropdownMenu.CheckboxItem
+          checked={isScopeEnabled('canvas')}
+          onSelect={(e) => setAutosyncScope('canvas', !isScopeEnabled('canvas'), e)}
+          disabled={loading || (!isScopeEnabled('canvas') && !selectedBranch)}
+        >
+          {isScopeEnabled('canvas') ? 'Disable autosync for canvas changes' : 'Enable autosync for canvas changes'}
+        </DropdownMenu.CheckboxItem>
+        <DropdownMenu.CheckboxItem
+          checked={isScopeEnabled('prototype')}
+          onSelect={(e) => setAutosyncScope('prototype', !isScopeEnabled('prototype'), e)}
+          disabled={loading || (!isScopeEnabled('prototype') && !selectedBranch)}
+        >
+          {isScopeEnabled('prototype') ? 'Disable autosync for prototype changes' : 'Enable autosync for prototype changes'}
+        </DropdownMenu.CheckboxItem>
+
+        {showStatus && (
+          <>
+            <DropdownMenu.Separator />
+            <div className="statusRow">
+              {syncing && syncingScope && (
+                <p className="scopeHint">Syncing <strong>{syncingScope}</strong> changes</p>
+              )}
+              {lastError && <span className="statusError">⚠ {lastError}</span>}
+              {lastErrorByScope.canvas && <span className="statusError">⚠ Canvas: {lastErrorByScope.canvas}</span>}
+              {lastErrorByScope.prototype && <span className="statusError">⚠ Prototype: {lastErrorByScope.prototype}</span>}
+              {!syncing && lastSyncTime && <span className="statusOk">Last sync: {formatSyncTime(lastSyncTime)}</span>}
+            </div>
+          </>
+        )}
+
+        <DropdownMenu.Separator />
+        <p className="footer"><span className="footerDot" />&nbsp;Only available in dev environment</p>
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>
+  )
+}

package/src/BranchSelect.jsx

@@ -0,0 +1,29 @@
+import css from './BranchSelect.module.css'
+
+export default function BranchSelect({
+  branches = [],
+  value,
+  onChange,
+  disabled,
+  id,
+  placeholder,
+  ref,
+}) {
+  return (
+    <select
+      ref={ref}
+      id={id}
+      className={css.select}
+      value={value}
+      onChange={onChange}
+      disabled={disabled}
+    >
+      {branches.length === 0 && (
+        <option value="" disabled>{placeholder || 'No branches available'}</option>
+      )}
+      {branches.map((branch) => (
+        <option key={branch} value={branch}>{branch}</option>
+      ))}
+    </select>
+  )
+}

package/src/BranchSelect.module.css

@@ -0,0 +1,30 @@
+.select {
+  width: 100%;
+  appearance: none;
+  background-color: var(--bgColor-default, #0d1117);
+  color: var(--fgColor-default, #e6edf3);
+  border: 1px solid var(--borderColor-default, #30363d);
+  border-radius: 8px;
+  padding: 8px 32px 8px 12px;
+  font-size: 13px;
+  font-family: inherit;
+  cursor: pointer;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23848d97'%3E%3Cpath d='M6 8.5L1.5 4h9L6 8.5z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+  transition: border-color 0.15s ease;
+}
+
+.select:hover:not(:disabled) {
+  border-color: var(--fgColor-muted, #848d97);
+}
+
+.select:focus-visible {
+  outline: 2px solid var(--borderColor-accent-emphasis, #1f6feb);
+  outline-offset: -1px;
+}
+
+.select:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}

package/src/CanvasAgentsMenu.jsx

@@ -0,0 +1,87 @@
+/**
+ * CanvasAgentsMenu — CoreUIBar dropdown for adding agent widgets to the active canvas.
+ * Reads agent definitions from canvas.agents config and dispatches add-widget events.
+ * Only visible when a canvas page is active and agents are configured.
+ */
+import { useState, useMemo } from 'react'
+import { TriggerButton } from './lib/components/ui/trigger-button/index.js'
+import * as DropdownMenu from './lib/components/ui/dropdown-menu/index.js'
+import Icon from './svelte-plugin-ui/components/Icon.jsx'
+import { getConfig } from './configStore.js'
+
+export default function CanvasAgentsMenu({ config = {}, data, canvasName = '', zoom, tabindex }) {
+  const [menuOpen, setMenuOpen] = useState(false)
+
+  const agents = useMemo(() => {
+    const canvasConfig = getConfig('canvas')
+    const agentsConfig = canvasConfig?.agents
+    if (!agentsConfig || typeof agentsConfig !== 'object') return []
+    return Object.entries(agentsConfig).map(([id, cfg]) => ({
+      id,
+      label: cfg.label || id,
+      icon: cfg.icon,
+      startupCommand: cfg.startupCommand || id,
+      defaultWidth: cfg.defaultWidth,
+      defaultHeight: cfg.defaultHeight,
+    }))
+  }, [])
+
+  function addAgent(agent) {
+    document.dispatchEvent(new CustomEvent('storyboard:canvas:add-widget', {
+      detail: {
+        type: 'agent',
+        canvasName,
+        props: {
+          agentId: agent.id,
+          startupCommand: agent.startupCommand,
+          ...(agent.defaultWidth ? { width: agent.defaultWidth } : {}),
+          ...(agent.defaultHeight ? { height: agent.defaultHeight } : {}),
+        },
+      }
+    }))
+    setMenuOpen(false)
+  }
+
+  if (agents.length === 0) return null
+
+  return (
+    <DropdownMenu.Root open={menuOpen} onOpenChange={setMenuOpen}>
+      <DropdownMenu.Trigger asChild>
+        <TriggerButton
+          active={menuOpen}
+          size="icon-xl"
+          aria-label={config.ariaLabel || 'Add agent'}
+          tabIndex={tabindex}
+        >
+          {config.icon ? (
+            <Icon name={config.icon} size={16} {...(config.meta || {})} />
+          ) : (
+            <Icon name="agents" size={16} />
+          )}
+        </TriggerButton>
+      </DropdownMenu.Trigger>
+
+      <DropdownMenu.Content
+        side="top"
+        align="start"
+        sideOffset={16}
+        className="min-w-[180px]"
+      >
+        <DropdownMenu.Label>Add agent</DropdownMenu.Label>
+        {agents.map((agent) => (
+          <DropdownMenu.Item key={agent.id} onClick={() => addAgent(agent)}>
+            <span style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+              <Icon name={agent.icon || 'agents'} size={16} />
+              {agent.label}
+            </span>
+          </DropdownMenu.Item>
+        ))}
+        <DropdownMenu.Separator />
+        <div className="px-2 py-1.5 text-xs text-muted-foreground flex flex-row items-baseline">
+          <span className="inline-flex w-2 h-2 rounded-full mr-1.5" style={{ background: 'hsl(212, 92%, 45%)' }}></span>
+          Only available in dev environment
+        </div>
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>
+  )
+}