@dfosco/storyboard 0.5.0-alpha.0

package/src/internals/canvas/PageSelector.module.css

@@ -0,0 +1,261 @@
+.container {
+  position: relative;
+  font-size: 13px;
+}
+
+.trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 10px;
+  border: 1px solid var(--borderColor-default, rgba(0, 0, 0, 0.15));
+  border-radius: 6px;
+  background: var(--bgColor-default, #fff);
+  color: var(--fgColor-default, #1f2328);
+  cursor: pointer;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  transition: border-color 0.15s, box-shadow 0.15s;
+  line-height: 1;
+}
+
+.trigger:hover {
+  border-color: var(--borderColor-emphasis, rgba(0, 0, 0, 0.3));
+  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
+}
+
+.label {
+  font-weight: 600;
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.badge {
+  font-size: 11px;
+  color: var(--fgColor-muted, #656d76);
+  font-variant-numeric: tabular-nums;
+}
+
+.chevron {
+  color: var(--fgColor-muted, #656d76);
+  transition: transform 0.15s;
+  flex-shrink: 0;
+}
+
+.chevronOpen {
+  transform: rotate(180deg);
+}
+
+.menu {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  min-width: 260px;
+  max-width: 360px;
+  max-height: 320px;
+  overflow-y: auto;
+  margin: 0;
+  padding: 6px;
+  list-style: none;
+  background: var(--bgColor-default, #fff);
+  border: 1px solid var(--borderColor-default, rgba(0, 0, 0, 0.15));
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+}
+
+.item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 8px 10px 8px 4px;
+  border-radius: 4px;
+  cursor: pointer;
+  color: var(--fgColor-default, #1f2328);
+}
+
+.itemContent {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.itemLink {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+  color: inherit;
+  text-decoration: none;
+}
+
+.dragHandle {
+  opacity: 0;
+  color: var(--fgColor-muted, #656d76);
+  cursor: grab;
+  flex-shrink: 0;
+  padding: 2px;
+}
+
+.item:hover .dragHandle {
+  opacity: 1;
+}
+
+.duplicateBtn {
+  opacity: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--fgColor-muted, #656d76);
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.duplicateBtn:hover {
+  color: var(--fgColor-default, #1f2328);
+  background: var(--bgColor-neutral-muted, rgba(0, 0, 0, 0.06));
+}
+
+.item:hover .duplicateBtn {
+  opacity: 1;
+}
+
+.itemDragging {
+  opacity: 0.5;
+}
+
+.dropIndicator {
+  position: absolute;
+  top: -1px;
+  left: 4px;
+  right: 4px;
+  height: 2px;
+  background: var(--focus-outlineColor, #0969da);
+  border-radius: 1px;
+  pointer-events: none;
+}
+
+.dropZoneEnd {
+  position: relative;
+  padding-top: 8px;
+  list-style: none;
+}
+
+.item:hover {
+  background: var(--bgColor-muted, #f6f8fa);
+}
+
+.item:focus-visible {
+  outline: 2px solid var(--focus-outlineColor, #0969da);
+  outline-offset: -2px;
+}
+
+.itemActive {
+  font-weight: 600;
+  background: var(--bgColor-accent-muted, #ddf4ff);
+}
+
+.itemActive:hover {
+  background: var(--bgColor-accent-muted, #ddf4ff);
+}
+
+.separator {
+  height: 1px;
+  background: var(--borderColor-default, rgba(0, 0, 0, 0.15));
+  margin: 4px 8px;
+  list-style: none;
+}
+
+.separatorRow {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 10px 6px 4px;
+  border-radius: 4px;
+  list-style: none;
+  cursor: default;
+}
+
+.separatorRow:hover .dragHandle {
+  opacity: 1;
+}
+
+.separatorLine {
+  flex: 1;
+  height: 1px;
+  background: var(--borderColor-default, rgba(0, 0, 0, 0.15));
+}
+
+.addItem {
+  padding: 6px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  white-space: nowrap;
+  color: var(--fgColor-muted, #656d76);
+  font-size: 12px;
+  background: var(--bgColor-muted, #f6f8fa);
+}
+
+.addItem:hover {
+  background: var(--bgColor-neutral-muted, rgba(0, 0, 0, 0.08));
+  color: var(--fgColor-default, #1f2328);
+}
+
+.addForm {
+  display: flex;
+  gap: 4px;
+  padding: 4px 6px;
+  list-style: none;
+}
+
+.addInput {
+  flex: 1;
+  min-width: 0;
+  padding: 4px 8px;
+  border: 1px solid var(--borderColor-default, rgba(0, 0, 0, 0.15));
+  border-radius: 4px;
+  font-size: 12px;
+  font-family: inherit;
+  outline: none;
+}
+
+.addInput:focus {
+  border-color: var(--focus-outlineColor, #0969da);
+  box-shadow: 0 0 0 2px rgba(9, 105, 218, 0.3);
+}
+
+.addSubmit {
+  padding: 4px 10px;
+  border: none;
+  border-radius: 4px;
+  background: var(--bgColor-accent-emphasis, #0969da);
+  color: #fff;
+  font-size: 12px;
+  font-family: inherit;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.addSubmit:hover {
+  opacity: 0.9;
+}
+
+.addSubmit:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.successMsg {
+  padding: 4px 12px 6px;
+  font-size: 11px;
+  color: #1a7f37;
+  font-weight: 500;
+}

package/src/internals/canvas/PageSelector.test.jsx

@@ -0,0 +1,113 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import { render, screen, fireEvent, waitFor } from '@testing-library/react'
+import PageSelector from './PageSelector.jsx'
+
+const PAGES = [
+  { name: 'research/interviews', route: '/canvas/research/interviews', title: 'Interviews' },
+  { name: 'research/surveys', route: '/canvas/research/surveys', title: 'Surveys' },
+  { name: 'research/analysis', route: '/canvas/research/analysis', title: 'Analysis' },
+]
+
+describe('PageSelector', () => {
+  beforeEach(() => {
+    // Reset location mock — use a setter spy so we can track assignments
+    delete window.location
+    const loc = { _href: '' }
+    Object.defineProperty(loc, 'href', {
+      get() { return loc._href },
+      set(v) { loc._href = v },
+      configurable: true,
+    })
+    window.location = loc
+  })
+
+  it('renders nothing when fewer than 2 pages', () => {
+    const { container } = render(<PageSelector currentName="solo" pages={[{ name: 'solo', route: '/canvas/solo', title: 'Solo' }]} />)
+    expect(container.innerHTML).toBe('')
+  })
+
+  it('renders nothing when pages is empty', () => {
+    const { container } = render(<PageSelector currentName="foo" pages={[]} />)
+    expect(container.innerHTML).toBe('')
+  })
+
+  it('shows current page label and page count', () => {
+    render(<PageSelector currentName="research/interviews" pages={PAGES} />)
+    expect(screen.getByText('Interviews')).toBeTruthy()
+    expect(screen.getByText('1/3')).toBeTruthy()
+  })
+
+  it('shows correct index for non-first page', () => {
+    render(<PageSelector currentName="research/surveys" pages={PAGES} />)
+    expect(screen.getByText('Surveys')).toBeTruthy()
+    expect(screen.getByText('2/3')).toBeTruthy()
+  })
+
+  it('opens dropdown on click and shows all pages', () => {
+    render(<PageSelector currentName="research/interviews" pages={PAGES} />)
+    const trigger = screen.getByTitle('Switch canvas page')
+    fireEvent.click(trigger)
+
+    const options = screen.getAllByRole('option')
+    expect(options).toHaveLength(3)
+    expect(options[0].textContent).toBe('Interviews')
+    expect(options[1].textContent).toBe('Surveys')
+    expect(options[2].textContent).toBe('Analysis')
+  })
+
+  it('marks the current page as active', () => {
+    render(<PageSelector currentName="research/surveys" pages={PAGES} />)
+    fireEvent.click(screen.getByTitle('Switch canvas page'))
+
+    const options = screen.getAllByRole('option')
+    expect(options[1].getAttribute('aria-selected')).toBe('true')
+    expect(options[0].getAttribute('aria-selected')).toBe('false')
+  })
+
+  it('navigates to selected page', async () => {
+    render(<PageSelector currentName="research/interviews" pages={PAGES} />)
+    fireEvent.click(screen.getByTitle('Switch canvas page'))
+    // Click the option in the menu (not the trigger label)
+    const options = screen.getAllByRole('option')
+    fireEvent.click(options[1]) // Surveys
+
+    // Navigation uses a 300ms setTimeout for mouse clicks
+    await waitFor(() => {
+      expect(window.location.href).toContain('/canvas/research/surveys')
+    })
+  })
+
+  it('closes dropdown on Escape', () => {
+    render(<PageSelector currentName="research/interviews" pages={PAGES} />)
+    fireEvent.click(screen.getByTitle('Switch canvas page'))
+    expect(screen.queryByRole('listbox')).toBeTruthy()
+
+    fireEvent.keyDown(document, { key: 'Escape' })
+    expect(screen.queryByRole('listbox')).toBeNull()
+  })
+
+  it('closes dropdown on outside click', () => {
+    render(
+      <div>
+        <PageSelector currentName="research/interviews" pages={PAGES} />
+        <span data-testid="outside">Outside</span>
+      </div>
+    )
+    fireEvent.click(screen.getByTitle('Switch canvas page'))
+    expect(screen.queryByRole('listbox')).toBeTruthy()
+
+    fireEvent.mouseDown(screen.getByTestId('outside'))
+    expect(screen.queryByRole('listbox')).toBeNull()
+  })
+
+  it('does not navigate when selecting the current page', () => {
+    render(<PageSelector currentName="research/interviews" pages={PAGES} />)
+    fireEvent.click(screen.getByTitle('Switch canvas page'))
+    // Click the current page option
+    const options = screen.getAllByRole('option')
+    fireEvent.click(options[0]) // Interviews (current)
+
+    // location.href was set to '' initially, should remain unchanged
+    expect(window.location.href).toBe('')
+  })
+})

package/src/internals/canvas/WebGLContextPool.jsx

@@ -0,0 +1,292 @@
+import { createContext, useContext, useCallback, useEffect, useMemo, useSyncExternalStore } from 'react'
+
+/**
+ * WebGL Context Pool — manages live WebGL slots for terminal widgets.
+ *
+ * Browsers cap WebGL contexts at ~8-16. This pool ensures only a subset
+ * of terminal widgets hold live ghostty-web renderers at any time.
+ * Offscreen terminals release their context and show a frozen snapshot.
+ *
+ * Architecture:
+ * - Lease-based: widgets register and receive live/frozen status
+ * - Priority: PINNED > VISIBLE > NEAR_VIEWPORT > OFFSCREEN
+ * - Hysteresis: 3s grace before evicting recently-visible terminals
+ * - Generation tokens prevent stale async opens after eviction
+ */
+
+// Priority levels (higher = more important to keep live)
+export const Priority = {
+  OFFSCREEN: 0,
+  NEAR_VIEWPORT: 1,
+  VISIBLE: 2,
+  PINNED: 3, // expanded, focused, or actively interacting
+}
+
+const DEFAULT_MAX_LIVE = 6
+const HYSTERESIS_MS = 3000
+
+// ── Pool Engine (framework-agnostic) ─────────────────────────────────
+
+class ContextPool {
+  constructor(maxLive = DEFAULT_MAX_LIVE) {
+    this._maxLive = maxLive
+    /** @type {Map<string, { priority: number, generation: number, live: boolean, lastVisible: number }>} */
+    this._slots = new Map()
+    this._listeners = new Set()
+    this._hysteresisTimers = new Map()
+    // Monotonic version counter — bumped on every state change so
+    // useSyncExternalStore detects updates via a new snapshot value.
+    this._version = 0
+  }
+
+  /** Subscribe to pool state changes. Returns unsubscribe fn. */
+  subscribe(listener) {
+    this._listeners.add(listener)
+    return () => this._listeners.delete(listener)
+  }
+
+  _notify() {
+    this._version++
+    for (const fn of this._listeners) fn()
+  }
+
+  /** Register a widget. Returns its initial generation. */
+  register(widgetId, initialPriority = Priority.OFFSCREEN) {
+    if (this._slots.has(widgetId)) return this._slots.get(widgetId).generation
+    this._slots.set(widgetId, {
+      priority: initialPriority,
+      generation: 0,
+      live: false,
+      lastVisible: initialPriority >= Priority.VISIBLE ? Date.now() : 0,
+    })
+    this._recompute()
+    return 0
+  }
+
+  /** Unregister a widget (on unmount). */
+  unregister(widgetId) {
+    this._slots.delete(widgetId)
+    const timer = this._hysteresisTimers.get(widgetId)
+    if (timer) { clearTimeout(timer); this._hysteresisTimers.delete(widgetId) }
+    this._recompute()
+  }
+
+  /** Update a widget's priority. Triggers recomputation. */
+  setPriority(widgetId, priority) {
+    const slot = this._slots.get(widgetId)
+    if (!slot) return
+    const prev = slot.priority
+    slot.priority = priority
+
+    // Track when widget was last visible/pinned for hysteresis
+    if (priority >= Priority.VISIBLE) {
+      slot.lastVisible = Date.now()
+    }
+
+    // Immediate recompute when priority increases or widget is pinned
+    if (priority > prev || priority === Priority.PINNED) {
+      this._recompute()
+      return
+    }
+
+    // When priority drops (e.g. scrolled offscreen), use hysteresis
+    if (priority < prev && prev >= Priority.VISIBLE) {
+      const existing = this._hysteresisTimers.get(widgetId)
+      if (existing) clearTimeout(existing)
+      this._hysteresisTimers.set(widgetId, setTimeout(() => {
+        this._hysteresisTimers.delete(widgetId)
+        this._recompute()
+      }, HYSTERESIS_MS))
+      return
+    }
+
+    this._recompute()
+  }
+
+  /** Get current state for a widget. */
+  getSlot(widgetId) {
+    return this._slots.get(widgetId) || null
+  }
+
+  /**
+   * Recompute which widgets should be live.
+   * Sorts by priority (desc), then by lastVisible (desc).
+   * Top N get live status; rest are frozen.
+   */
+  _recompute() {
+    const entries = [...this._slots.entries()]
+
+    // Sort: pinned first, then by priority desc, then by recency
+    entries.sort(([, a], [, b]) => {
+      if (a.priority !== b.priority) return b.priority - a.priority
+      return b.lastVisible - a.lastVisible
+    })
+
+    let liveCount = 0
+    const changes = []
+
+    for (const [id, slot] of entries) {
+      // Pinned terminals always get a slot (they bypass the cap)
+      const shouldBeLive = slot.priority === Priority.PINNED || liveCount < this._maxLive
+      if (shouldBeLive) liveCount++
+
+      if (slot.live !== shouldBeLive) {
+        changes.push({ id, slot, shouldBeLive })
+      }
+    }
+
+    if (changes.length === 0) return
+
+    for (const { slot, shouldBeLive } of changes) {
+      slot.live = shouldBeLive
+      if (!shouldBeLive) {
+        // Bump generation so stale async opens abort
+        slot.generation++
+      }
+    }
+
+    this._notify()
+  }
+}
+
+// ── React Context ────────────────────────────────────────────────────
+
+const WebGLPoolContext = createContext(null)
+
+/**
+ * Provider that creates and owns the context pool.
+ * Place this around the canvas widget tree in CanvasPage.
+ *
+ * @param {{ maxLive?: number, children: React.ReactNode }} props
+ */
+export function WebGLContextPoolProvider({ maxLive = DEFAULT_MAX_LIVE, children }) {
+  // useMemo is correct here: the pool is a stable singleton for this provider's lifetime.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const pool = useMemo(() => new ContextPool(maxLive), [])
+  return (
+    <WebGLPoolContext.Provider value={pool}>
+      {children}
+    </WebGLPoolContext.Provider>
+  )
+}
+
+/**
+ * Hook that manages a terminal widget's WebGL slot lifecycle.
+ *
+ * Returns:
+ * - `isLive`: whether this widget should create a live ghostty terminal
+ * - `generation`: counter that increments on each live→frozen transition;
+ *   use as an effect dep to detect when to re-create the terminal
+ * - `setPriority(p)`: update this widget's priority
+ *
+ * @param {string} widgetId
+ * @returns {{ isLive: boolean, generation: number, setPriority: (p: number) => void }}
+ */
+export function useWebGLSlot(widgetId, initialPriority) {
+  const pool = useContext(WebGLPoolContext)
+
+  // Register on mount, unregister on unmount
+  useEffect(() => {
+    if (!pool) return
+    pool.register(widgetId, initialPriority)
+    return () => pool.unregister(widgetId)
+  }, [pool, widgetId]) // initialPriority intentionally excluded — only used on first register
+
+  // Subscribe to pool state for reactivity.
+  // getSnapshot returns the pool's version counter — a primitive that changes
+  // on every state mutation, satisfying useSyncExternalStore's identity check.
+  const subscribe = useCallback(
+    (cb) => pool ? pool.subscribe(cb) : () => {},
+    [pool],
+  )
+  const getSnapshot = useCallback(() => {
+    if (!pool) return -1
+    return pool._version
+  }, [pool])
+
+  // This triggers re-render whenever the pool version changes
+  useSyncExternalStore(subscribe, getSnapshot)
+
+  // Read the actual slot state (after subscription ensures freshness)
+  const slot = pool?.getSlot(widgetId)
+
+  const setPriority = useCallback(
+    (p) => pool?.setPriority(widgetId, p),
+    [pool, widgetId],
+  )
+
+  // When there's no pool provider (e.g. standalone usage), always be live
+  if (!pool || !slot) {
+    return { isLive: true, generation: 0, setPriority: () => {} }
+  }
+
+  return {
+    isLive: slot.live,
+    generation: slot.generation,
+    setPriority,
+  }
+}
+
+/**
+ * Hook for CanvasPage to batch-update visibility for all terminal widgets.
+ * Call this with the current viewport rect and widget positions.
+ *
+ * @returns {(viewportRect: {x:number,y:number,w:number,h:number}, widgets: Array<{id:string,type:string,position:{x:number,y:number},props?:object}>, selectedIds: Set<string>, expandedId: string|null) => void}
+ */
+export function usePoolVisibilityUpdater() {
+  const pool = useContext(WebGLPoolContext)
+
+  return useCallback((viewportRect, widgets, selectedIds, expandedId) => {
+    if (!pool) return
+
+    const NEAR_MARGIN = 400 // canvas-space pixels for "near viewport" zone
+
+    const terminalTypes = new Set(['terminal', 'agent', 'prompt'])
+
+    for (const w of widgets) {
+      if (!terminalTypes.has(w.type)) continue
+
+      // Determine priority
+      if (w.id === expandedId) {
+        pool.setPriority(w.id, Priority.PINNED)
+        continue
+      }
+
+      if (selectedIds?.has(w.id)) {
+        pool.setPriority(w.id, Priority.PINNED)
+        continue
+      }
+
+      const wx = w.position?.x ?? 0
+      const wy = w.position?.y ?? 0
+      const ww = w.props?.width ?? 800
+      const wh = w.props?.height ?? 450
+
+      // Check overlap with viewport
+      const visible = rectsOverlap(
+        viewportRect.x, viewportRect.y, viewportRect.w, viewportRect.h,
+        wx, wy, ww, wh,
+      )
+
+      if (visible) {
+        pool.setPriority(w.id, Priority.VISIBLE)
+        continue
+      }
+
+      // Check overlap with expanded viewport (near margin)
+      const near = rectsOverlap(
+        viewportRect.x - NEAR_MARGIN,
+        viewportRect.y - NEAR_MARGIN,
+        viewportRect.w + NEAR_MARGIN * 2,
+        viewportRect.h + NEAR_MARGIN * 2,
+        wx, wy, ww, wh,
+      )
+
+      pool.setPriority(w.id, near ? Priority.NEAR_VIEWPORT : Priority.OFFSCREEN)
+    }
+  }, [pool])
+}
+
+function rectsOverlap(ax, ay, aw, ah, bx, by, bw, bh) {
+  return ax < bx + bw && ax + aw > bx && ay < by + bh && ay + ah > by
+}