@dfosco/storyboard 0.5.0-alpha.0

package/src/core/worktree/port.test.js

@@ -0,0 +1,222 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest'
+import { mkdtempSync, mkdirSync, writeFileSync, readFileSync, existsSync, rmSync, realpathSync } from 'fs'
+import { join } from 'path'
+import { tmpdir } from 'os'
+
+// We test the pure functions by importing and overriding cwd
+import { portsFilePath, getPort, resolvePort, slugify, repoRoot, worktreeDir, listWorktrees } from './port.js'
+
+describe('slugify', () => {
+  it('lowercases and replaces dots with hyphens', () => {
+    expect(slugify('v3.11.0')).toBe('v3-11-0')
+  })
+
+  it('replaces underscores and spaces', () => {
+    expect(slugify('my_cool.feature')).toBe('my-cool-feature')
+  })
+
+  it('lowercases', () => {
+    expect(slugify('UPPER.Case')).toBe('upper-case')
+  })
+
+  it('collapses consecutive hyphens', () => {
+    expect(slugify('a..b__c')).toBe('a-b-c')
+  })
+
+  it('trims hyphens per segment', () => {
+    expect(slugify('.leading')).toBe('leading')
+  })
+
+  it('preserves slashes', () => {
+    expect(slugify('feat/my.branch')).toBe('feat/my-branch')
+  })
+})
+
+describe('portsFilePath', () => {
+  let tempRoot
+
+  beforeEach(() => {
+    tempRoot = realpathSync(mkdtempSync(join(tmpdir(), 'sb-port-test-')))
+  })
+
+  afterEach(() => {
+    rmSync(tempRoot, { recursive: true, force: true })
+  })
+
+  it('returns root worktrees/ports.json from repo root', () => {
+    const result = portsFilePath(tempRoot)
+    expect(result).toBe(join(tempRoot, 'worktrees', 'ports.json'))
+  })
+
+  it('returns shared ports.json from inside a worktree dir', () => {
+    // Simulate worktrees/my-branch/
+    const worktreeDir = join(tempRoot, 'worktrees', 'my-branch')
+    mkdirSync(worktreeDir, { recursive: true })
+    const result = portsFilePath(worktreeDir)
+    expect(result).toBe(join(tempRoot, 'worktrees', 'ports.json'))
+  })
+
+  it('returns shared ports.json from worktree even when ports.json does not exist', () => {
+    // This is the key bug fix — first run from a worktree with no ports.json
+    const worktreeDir = join(tempRoot, 'worktrees', 'first-run')
+    mkdirSync(worktreeDir, { recursive: true })
+    const result = portsFilePath(worktreeDir)
+    // Must point to root, NOT to worktrees/first-run/worktrees/ports.json
+    expect(result).toBe(join(tempRoot, 'worktrees', 'ports.json'))
+    expect(result).not.toContain('first-run/worktrees')
+  })
+})
+
+describe('getPort / resolvePort', () => {
+  let tempRoot
+  let originalCwd
+
+  beforeEach(() => {
+    tempRoot = realpathSync(mkdtempSync(join(tmpdir(), 'sb-port-test-')))
+    mkdirSync(join(tempRoot, 'worktrees'), { recursive: true })
+    originalCwd = process.cwd()
+    process.chdir(tempRoot)
+  })
+
+  afterEach(() => {
+    process.chdir(originalCwd)
+    rmSync(tempRoot, { recursive: true, force: true })
+  })
+
+  it('returns 1234 for main', () => {
+    expect(getPort('main')).toBe(1234)
+  })
+
+  it('assigns 1235 to the first worktree', () => {
+    const port = getPort('my-feature')
+    expect(port).toBe(1235)
+  })
+
+  it('assigns sequential ports to multiple worktrees', () => {
+    getPort('branch-a')
+    const portB = getPort('branch-b')
+    expect(portB).toBe(1236)
+  })
+
+  it('returns the same port on subsequent calls', () => {
+    const first = getPort('stable-branch')
+    const second = getPort('stable-branch')
+    expect(first).toBe(second)
+  })
+
+  it('persists to ports.json', () => {
+    getPort('persisted')
+    const portsFile = join(tempRoot, 'worktrees', 'ports.json')
+    expect(existsSync(portsFile)).toBe(true)
+    const data = JSON.parse(readFileSync(portsFile, 'utf8'))
+    expect(data.persisted).toBe(1235)
+    expect(data.main).toBe(1234)
+  })
+
+  it('resolvePort returns fallback when no ports.json exists', () => {
+    expect(resolvePort('unknown')).toBe(1234)
+  })
+
+  it('resolvePort returns assigned port', () => {
+    getPort('known')
+    expect(resolvePort('known')).toBe(1235)
+  })
+
+  it('handles corrupted ports.json gracefully', () => {
+    const portsFile = join(tempRoot, 'worktrees', 'ports.json')
+    writeFileSync(portsFile, 'not valid json')
+    // Should not throw — starts fresh
+    const port = getPort('recovery')
+    expect(port).toBe(1235)
+  })
+})
+
+describe('repoRoot', () => {
+  let tempRoot
+
+  beforeEach(() => {
+    tempRoot = realpathSync(mkdtempSync(join(tmpdir(), 'sb-root-test-')))
+    mkdirSync(join(tempRoot, 'worktrees', 'my-branch'), { recursive: true })
+  })
+
+  afterEach(() => {
+    rmSync(tempRoot, { recursive: true, force: true })
+  })
+
+  it('returns cwd when at repo root', () => {
+    expect(repoRoot(tempRoot)).toBe(tempRoot)
+  })
+
+  it('returns parent of worktrees when inside a worktree', () => {
+    const wt = join(tempRoot, 'worktrees', 'my-branch')
+    expect(repoRoot(wt)).toBe(tempRoot)
+  })
+})
+
+describe('worktreeDir', () => {
+  let tempRoot
+
+  beforeEach(() => {
+    tempRoot = realpathSync(mkdtempSync(join(tmpdir(), 'sb-wtdir-test-')))
+    mkdirSync(join(tempRoot, 'worktrees'), { recursive: true })
+  })
+
+  afterEach(() => {
+    rmSync(tempRoot, { recursive: true, force: true })
+  })
+
+  it('returns repo root for main', () => {
+    expect(worktreeDir('main', tempRoot)).toBe(tempRoot)
+  })
+
+  it('returns worktrees/<name> for branches', () => {
+    expect(worktreeDir('my-feature', tempRoot)).toBe(join(tempRoot, 'worktrees', 'my-feature'))
+  })
+})
+
+describe('listWorktrees', () => {
+  let tempRoot
+
+  beforeEach(() => {
+    tempRoot = realpathSync(mkdtempSync(join(tmpdir(), 'sb-list-test-')))
+  })
+
+  afterEach(() => {
+    rmSync(tempRoot, { recursive: true, force: true })
+  })
+
+  it('returns empty array when worktrees does not exist', () => {
+    expect(listWorktrees(tempRoot)).toEqual([])
+  })
+
+  it('returns only directories with a .git file', () => {
+    const wtDir = join(tempRoot, 'worktrees')
+    mkdirSync(wtDir)
+
+    // Valid worktree — has .git file
+    mkdirSync(join(wtDir, 'valid'))
+    writeFileSync(join(wtDir, 'valid', '.git'), 'gitdir: /some/path')
+
+    // Not a worktree — no .git file
+    mkdirSync(join(wtDir, 'no-git'))
+
+    // Not a directory — file
+    writeFileSync(join(wtDir, 'ports.json'), '{}')
+
+    const result = listWorktrees(tempRoot)
+    expect(result).toEqual(['valid'])
+  })
+
+  it('returns multiple worktrees', () => {
+    const wtDir = join(tempRoot, 'worktrees')
+    mkdirSync(wtDir)
+
+    for (const name of ['alpha', 'beta', 'gamma']) {
+      mkdirSync(join(wtDir, name))
+      writeFileSync(join(wtDir, name, '.git'), 'gitdir: /some/path')
+    }
+
+    const result = listWorktrees(tempRoot)
+    expect(result.sort()).toEqual(['alpha', 'beta', 'gamma'])
+  })
+})

package/src/core/worktree/serverRegistry.js

@@ -0,0 +1,120 @@
+/**
+ * Server Registry — tracks running dev servers in .storyboard/servers.json.
+ *
+ * Each server gets a unique hex ID. The registry is pruned on every read
+ * to remove entries whose PIDs are no longer alive.
+ */
+
+import { randomBytes } from 'crypto'
+import { readFileSync, writeFileSync, existsSync, mkdirSync, renameSync } from 'fs'
+import { join, dirname } from 'path'
+import { repoRoot } from './port.js'
+
+/**
+ * Absolute path to .storyboard/servers.json.
+ */
+export function registryPath(cwd) {
+  return join(repoRoot(cwd), '.storyboard', 'servers.json')
+}
+
+/**
+ * Generate a short unique hex ID (6 chars).
+ */
+export function generateId() {
+  return randomBytes(3).toString('hex')
+}
+
+/**
+ * Check whether a PID is alive.
+ */
+function isAlive(pid) {
+  try {
+    process.kill(pid, 0)
+    return true
+  } catch {
+    return false
+  }
+}
+
+/**
+ * Read the registry file. Returns an object keyed by server ID.
+ */
+function readRegistry(cwd) {
+  const file = registryPath(cwd)
+  if (!existsSync(file)) return {}
+  try {
+    const data = JSON.parse(readFileSync(file, 'utf8'))
+    return data.servers || {}
+  } catch {
+    return {}
+  }
+}
+
+/**
+ * Write the registry atomically (write tmp then rename).
+ */
+function writeRegistry(servers, cwd) {
+  const file = registryPath(cwd)
+  const dir = dirname(file)
+  if (!existsSync(dir)) mkdirSync(dir, { recursive: true })
+  const tmp = file + '.tmp'
+  writeFileSync(tmp, JSON.stringify({ servers }, null, 2) + '\n')
+  renameSync(tmp, file)
+}
+
+/**
+ * Remove entries whose PIDs are dead.
+ * @returns {object} pruned servers map
+ */
+export function prune(cwd) {
+  const servers = readRegistry(cwd)
+  const alive = {}
+  for (const [id, entry] of Object.entries(servers)) {
+    if (isAlive(entry.pid)) {
+      alive[id] = entry
+    }
+  }
+  writeRegistry(alive, cwd)
+  return alive
+}
+
+/**
+ * Register a new server entry.
+ */
+export function register({ id, worktree, pid, port, background = false }, cwd) {
+  const servers = prune(cwd)
+  servers[id] = { id, worktree, pid, port, background, startedAt: new Date().toISOString() }
+  writeRegistry(servers, cwd)
+  return servers[id]
+}
+
+/**
+ * Unregister a server by ID.
+ */
+export function unregister(id, cwd) {
+  const servers = readRegistry(cwd)
+  delete servers[id]
+  writeRegistry(servers, cwd)
+}
+
+/**
+ * List all live servers (prunes dead ones first).
+ */
+export function list(cwd) {
+  return Object.values(prune(cwd))
+}
+
+/**
+ * Find servers running for a given worktree name.
+ */
+export function findByWorktree(name, cwd) {
+  return list(cwd).filter((s) => s.worktree === name)
+}
+
+/**
+ * Find a server by its unique ID.
+ */
+export function findById(id, cwd) {
+  const servers = prune(cwd)
+  return servers[id] || null
+}

package/src/internals/AuthModal/AuthModal.jsx

@@ -0,0 +1,132 @@
+/**
+ * AuthModal — Global PAT entry dialog for comments authentication.
+ * Mounted at app root, triggered by:
+ *   - CoreUIBar (comments tool / "C" shortcut) via 'storyboard:open-auth-modal' event
+ *   - ViewfinderNew sidebar login button via same event
+ */
+import { useState, useEffect, useCallback } from 'react'
+import { Dialog } from '@base-ui/react/dialog'
+import css from './AuthModal.module.css'
+
+const COMMENTS_TOKEN_KEY = 'sb-comments-token'
+
+function getRepoInfo() {
+  try {
+    // eslint-disable-next-line no-undef
+    const cfg = typeof __STORYBOARD_CONFIG__ !== 'undefined' ? __STORYBOARD_CONFIG__ : null
+    const repo = cfg?.repository
+    if (repo?.owner && repo?.name) return repo
+  } catch { /* ignore */ }
+  return { owner: 'github', name: 'storyboard' }
+}
+
+export default function AuthModal() {
+  const [open, setOpen] = useState(false)
+  const [tokenValue, setTokenValue] = useState('')
+
+  useEffect(() => {
+    function handleOpen() { setOpen(true) }
+    document.addEventListener('storyboard:open-auth-modal', handleOpen)
+    return () => document.removeEventListener('storyboard:open-auth-modal', handleOpen)
+  }, [])
+
+  const handleSignIn = useCallback(() => {
+    const trimmed = tokenValue.trim()
+    if (!trimmed) return
+
+    try { localStorage.setItem(COMMENTS_TOKEN_KEY, trimmed) } catch { /* ignore */ }
+
+    try {
+      import('../../core/comments/index.js').then(({ setToken, validateToken }) => {
+        setToken(trimmed)
+        // Validate to cache user info (login + avatar), then notify Viewfinder
+        validateToken(trimmed)
+          .then(() => document.dispatchEvent(new CustomEvent('storyboard:auth-changed')))
+          .catch(() => document.dispatchEvent(new CustomEvent('storyboard:auth-changed')))
+      }).catch(() => {})
+    } catch { /* comments module may not be initialized */ }
+
+    setTokenValue('')
+    setOpen(false)
+  }, [tokenValue])
+
+  const handleKeyDown = useCallback((e) => {
+    if (e.key === 'Enter') handleSignIn()
+  }, [handleSignIn])
+
+  const repo = getRepoInfo()
+
+  return (
+    <Dialog.Root open={open} onOpenChange={setOpen}>
+      <Dialog.Portal>
+        <Dialog.Backdrop className={css.backdrop} />
+        <div className={css.popupWrap}>
+          <Dialog.Popup className={css.popup}>
+            <Dialog.Title className={css.title}>Sign in with GitHub</Dialog.Title>
+            <Dialog.Description className={css.desc}>
+              Leave comments for other users to see and respond, and react to! Storyboard
+              comments use Discussions as a back-end and require a GitHub PAT to be enabled.
+            </Dialog.Description>
+            <Dialog.Close className={css.closeBtn} aria-label="Close">×</Dialog.Close>
+
+            <hr className={css.separator} />
+
+            <div className={css.tokenCard}>
+              <p className={css.tokenCardTitle}>Fine-grained Personal Access Token</p>
+              <div className={css.tokenCardRow}>
+                <span className={css.tokenCardLabel}>Owner:</span>
+                <code className={css.tokenCardCode}>{repo.owner}</code>
+              </div>
+              <div className={css.tokenCardRow}>
+                <span className={css.tokenCardLabel}>Expiration:</span>
+                <code className={css.tokenCardCode}>366 days</code>
+                <span className={css.tokenCardHint}>(recommended)</span>
+              </div>
+              <div className={css.tokenCardRow}>
+                <span className={css.tokenCardLabel}>Repository access:</span>
+                <code className={css.tokenCardCode}>Only select repositories &gt; {repo.owner}/{repo.name}</code>
+              </div>
+              <div className={css.tokenCardRow}>
+                <span className={css.tokenCardLabel}>Permissions:</span>
+                <code className={css.tokenCardCode}>Repositories &gt; Discussions &gt; Access: Read and Write</code>
+              </div>
+            </div>
+
+            <a
+              className={css.tokenLink}
+              href="https://github.com/settings/personal-access-tokens/new"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Create a GitHub Fine-Grained Personal Access Token ↗
+            </a>
+
+            <hr className={css.separator} />
+
+            <label className={css.label} htmlFor="auth-modal-token">Personal Access Token</label>
+            <input
+              id="auth-modal-token"
+              className={css.input}
+              placeholder="github_pat_… or ghp_…"
+              type="password"
+              autoFocus
+              value={tokenValue}
+              onChange={e => setTokenValue(e.target.value)}
+              onKeyDown={handleKeyDown}
+            />
+
+            <div className={css.warning}>
+              <span className={css.warningIcon}>⚠️</span>
+              <span>Comments are an experimental feature and may be unstable.</span>
+            </div>
+
+            <div className={css.actions}>
+              <Dialog.Close className={css.btnSecondary}>Cancel</Dialog.Close>
+              <button className={css.btnPrimary} onClick={handleSignIn}>Sign in</button>
+            </div>
+          </Dialog.Popup>
+        </div>
+      </Dialog.Portal>
+    </Dialog.Root>
+  )
+}

package/src/internals/AuthModal/AuthModal.module.css

@@ -0,0 +1,221 @@
+/* AuthModal — PAT entry dialog (BaseUI Dialog) */
+
+.backdrop {
+  position: fixed;
+  inset: 0;
+  background: var(--overlay-backdrop-bgColor, rgba(0, 0, 0, 0.4));
+  z-index: 10000;
+}
+
+.popupWrap {
+  position: fixed;
+  inset: 0;
+  z-index: 10001;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+
+.popupWrap > * {
+  pointer-events: auto;
+}
+
+.popup {
+  background: var(--bgColor-default);
+  border-radius: 12px;
+  box-shadow: var(--shadow-overlay, 0 16px 48px rgba(0, 0, 0, 0.12));
+  padding: 28px;
+  max-width: 620px;
+  max-height: 90vh;
+  overflow-y: auto;
+  color: var(--fgColor-default);
+  position: relative;
+}
+
+.closeBtn {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  background: none;
+  border: none;
+  font-size: 24px;
+  line-height: 1;
+  color: var(--fgColor-muted);
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 4px;
+}
+
+.closeBtn:hover {
+  background: var(--bgColor-neutral-muted);
+  color: var(--fgColor-default);
+}
+
+.title {
+  font-size: 18px;
+  font-weight: 600;
+  margin-bottom: 8px;
+  color: var(--fgColor-default);
+  padding-right: 32px;
+}
+
+.desc {
+  font-size: 15px;
+  color: var(--fgColor-muted);
+  margin-bottom: 16px;
+  line-height: 1.5;
+}
+
+.separator {
+  border: none;
+  border-top: 1px solid var(--borderColor-default);
+  margin: 16px 0;
+}
+
+/* Token config card — matches GitHub PAT settings screenshot */
+
+.tokenCard {
+  background: var(--bgColor-muted);
+  border: 1px solid var(--borderColor-default);
+  border-radius: 8px;
+  padding: 14px 16px;
+  margin-bottom: 12px;
+}
+
+.tokenCardTitle {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--fgColor-default);
+  margin-bottom: 8px;
+}
+
+.tokenCardRow {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  font-size: 14px;
+  line-height: 1.8;
+  color: var(--fgColor-muted);
+}
+
+.tokenCardLabel {
+  flex-shrink: 0;
+}
+
+.tokenCardCode {
+  font-family: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
+  font-size: 13px;
+  color: var(--fgColor-default);
+  background: var(--bgColor-default);
+  padding: 1px 6px;
+  border-radius: 4px;
+}
+
+.tokenCardHint {
+  color: var(--fgColor-muted);
+}
+
+.tokenLink {
+  display: inline-block;
+  font-size: 15px;
+  color: var(--fgColor-accent);
+  text-decoration: none;
+  margin-bottom: 4px;
+}
+
+.tokenLink:hover {
+  text-decoration: underline;
+}
+
+/* Input */
+
+.label {
+  display: block;
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--fgColor-default);
+  margin-bottom: 6px;
+}
+
+.input {
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid var(--borderColor-default);
+  border-radius: 6px;
+  font-size: 15px;
+  font-family: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
+  margin-bottom: 16px;
+  box-sizing: border-box;
+  background: var(--bgColor-default);
+  color: var(--fgColor-default);
+}
+
+.input::placeholder {
+  color: var(--fgColor-muted);
+}
+
+.input:focus {
+  outline: none;
+  border-color: var(--borderColor-accent-emphasis);
+  box-shadow: 0 0 0 3px var(--borderColor-accent-muted);
+}
+
+/* Warning banner */
+
+.warning {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  background: var(--bgColor-attention-muted);
+  border: 1px solid var(--borderColor-attention-muted);
+  border-radius: 6px;
+  font-size: 14px;
+  color: var(--fgColor-attention);
+  margin-bottom: 8px;
+}
+
+.warningIcon {
+  flex-shrink: 0;
+  font-size: 16px;
+}
+
+/* Actions */
+
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.btnSecondary {
+  padding: 8px 16px;
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  font-size: 15px;
+  color: var(--fgColor-muted);
+  cursor: pointer;
+}
+
+.btnSecondary:hover {
+  color: var(--fgColor-default);
+  background: var(--bgColor-neutral-muted);
+}
+
+.btnPrimary {
+  padding: 8px 20px;
+  background: var(--bgColor-accent-emphasis);
+  border: none;
+  border-radius: 6px;
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--fgColor-onEmphasis);
+  cursor: pointer;
+}
+
+.btnPrimary:hover {
+  background: var(--bgColor-accent-emphasis-hover, var(--bgColor-accent-emphasis));
+}