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

package/src/cli/terminal-welcome.js

@@ -5,21 +5,67 @@
  * Runs inside tmux, presents a Clack select prompt, loops back after
  * the chosen program exits.
  *
+ * When called with --startup <cmd>, auto-launches that command on the first
+ * iteration, then falls back to the interactive menu on subsequent iterations
+ * (i.e. when the command exits). This makes the welcome screen the universal
+ * supervisor for all terminal widget sessions.
+ *
  * Usage (called automatically by terminal-server for new sessions):
  *   storyboard terminal-welcome [--branch <name>] [--canvas <name>]
+ *   storyboard terminal-welcome --startup "copilot --agent terminal-agent" [--branch <name>] [--canvas <name>]
  */
 
 import * as p from '@clack/prompts'
 import { execSync, spawn } from 'node:child_process'
+import { readFileSync, existsSync } from 'node:fs'
+import { resolve, join } from 'node:path'
 import { parseFlags } from './flags.js'
 import { dim, cyan, bold } from './intro.js'
+import { takePendingMessages } from '../canvas/terminal-config.js'
 
 const blue = (s) => `\x1b[34m${s}\x1b[0m`
 
+// Prepend .storyboard/terminals/bin/ to PATH so `start`, `copilot`, etc.
+// are available in child shells. Done once at startup; child shells inherit it.
+const binDir = join(process.cwd(), '.storyboard', 'terminals', 'bin')
+if (existsSync(binDir) && !process.env.PATH?.includes(binDir)) {
+  process.env.PATH = `${binDir}:${process.env.PATH || ''}`
+}
+
+/**
+ * Read agents config from storyboard.config.json.
+ * Returns an array of { id, label, startupCommand, resumeCommand } entries.
+ */
+function loadAgents() {
+  try {
+    const raw = readFileSync(resolve(process.cwd(), 'storyboard.config.json'), 'utf8')
+    const config = JSON.parse(raw)
+    const agents = config?.canvas?.agents
+    if (!agents || typeof agents !== 'object') return []
+    return Object.entries(agents).map(([id, cfg]) => ({
+      id,
+      label: cfg.label || id,
+      startupCommand: cfg.startupCommand || null,
+      resumeCommand: cfg.resumeCommand || null,
+      readinessSignal: cfg.readinessSignal || null,
+      postStartup: cfg.postStartup || null,
+    })).filter(a => a.startupCommand)
+  } catch { return [] }
+}
+
+const agents = loadAgents()
+
+// Enable/disable tmux mouse — must be off during Clack prompts (mouse
+// events crash Clack), on during shell/copilot sessions (for scrolling).
+function setMouse(on) {
+  try { execSync(`tmux set-option mouse ${on ? 'on' : 'off'} 2>/dev/null`, { stdio: 'ignore' }) } catch {}
+}
+
 const flagSchema = {
   branch: { type: 'string', description: 'Current branch name' },
   canvas: { type: 'string', description: 'Current canvas name' },
   name: { type: 'string', description: 'Terminal pretty name' },
+  startup: { type: 'string', description: 'Auto-launch this command on first iteration' },
 }
 
 const { flags } = parseFlags(process.argv.slice(3), flagSchema)
@@ -27,27 +73,284 @@ const branch = flags.branch || 'unknown'
 const canvas = flags.canvas || 'unknown'
 const prettyName = flags.name || null
 const canvasShort = canvas === 'unknown' ? canvas : canvas.split('/').pop()
+const startupCmd = flags.startup || null
+
+/**
+ * Reset terminal state after a child process exits.
+ * Children (especially TUI apps) may leave the terminal in raw mode,
+ * alternate screen, or with the cursor hidden.
+ */
+function resetTerminal() {
+  // Leave alternate screen, show cursor, reset attributes
+  process.stdout.write('\x1b[?1049l\x1b[?25h\x1b[0m')
+  try { execSync('stty sane 2>/dev/null', { stdio: 'ignore' }) } catch {}
+}
+
+/**
+ * Spawn an interactive shell with the storyboard bin dir on PATH.
+ * zsh re-initializes PATH from .zshrc/.zprofile, so we inject an
+ * `export PATH=...` via tmux send-keys after the shell initializes.
+ */
+function spawnShell() {
+  const shell = process.env.SHELL || '/bin/zsh'
+  const child = spawn(shell, [], { stdio: 'inherit' })
+
+  // Inject PATH after shell init so `start`, `copilot`, etc. are available
+  if (existsSync(binDir)) {
+    setTimeout(() => {
+      try {
+        execSync(`tmux send-keys -l ${JSON.stringify(`export PATH="${binDir}:$PATH"`)}`, { stdio: 'ignore' })
+        execSync(`tmux send-keys Enter`, { stdio: 'ignore' })
+        setTimeout(() => {
+          try {
+            execSync(`tmux send-keys -l "clear"`, { stdio: 'ignore' })
+            execSync(`tmux send-keys Enter`, { stdio: 'ignore' })
+          } catch {}
+        }, 200)
+      } catch {}
+    }, 500)
+  }
+
+  return new Promise((resolve) => {
+    child.on('close', resolve)
+    child.on('error', resolve)
+  })
+}
+
+/**
+ * Get the current tmux session name (safe — returns null outside tmux).
+ */
+function getTmuxName() {
+  try {
+    return execSync('tmux display-message -p "#{session_name}"', { encoding: 'utf8', timeout: 1000 }).trim() || null
+  } catch { return null }
+}
+
+/**
+ * Inject [System] identity message into the running agent via tmux send-keys.
+ * Mirrors the identity injection in terminal-server.js so agents launched from
+ * the welcome menu receive the same initial context.
+ */
+function injectIdentityMessage(tmuxName) {
+  const widgetId = process.env.STORYBOARD_WIDGET_ID
+  if (!tmuxName || !widgetId) return
+
+  const canvasId = process.env.STORYBOARD_CANVAS_ID || canvas
+  const serverUrl = process.env.STORYBOARD_SERVER_URL || ''
+  const displayName = prettyName || widgetId
+  const configFile = `.storyboard/terminals/${widgetId}.json`
+
+  const msg = `[System] Your terminal identity has been set. widgetId=${widgetId} displayName=${displayName} canvasId=${canvasId} configFile=${configFile} serverUrl=${serverUrl} — this is a configuration step, no response needed.`
+  try {
+    execSync(`tmux send-keys -t "${tmuxName}" -l ${JSON.stringify(msg)}`, { stdio: 'ignore' })
+    execSync(`tmux send-keys -t "${tmuxName}" Enter`, { stdio: 'ignore' })
+  } catch {}
+}
+
+/**
+ * Deliver pending messages to the running agent via tmux send-keys.
+ * Uses takePendingMessages for atomic read+clear.
+ */
+function deliverPendingMessages(tmuxName) {
+  const widgetId = process.env.STORYBOARD_WIDGET_ID
+  if (!tmuxName || !widgetId) return
+
+  const messages = takePendingMessages(widgetId)
+  messages.forEach((msg, i) => {
+    setTimeout(() => {
+      try {
+        const excerpt = msg.message.length > 200 ? msg.message.slice(0, 200) + '…' : msg.message
+        const formatted = `📩 [${msg.fromName || msg.from || 'unknown'} → you]\n\`\`\`\n${excerpt}\n\`\`\`${msg.from ? `\nFull context: cat .storyboard/terminals/${msg.from}.json | jq '.latestOutput.content'` : ''}`
+        execSync(`tmux send-keys -t "${tmuxName}" -l ${JSON.stringify(formatted)}`, { stdio: 'ignore' })
+        execSync(`tmux send-keys -t "${tmuxName}" Enter`, { stdio: 'ignore' })
+      } catch {}
+    }, i * 1500)
+  })
+}
+
+/**
+ * Launch an agent by spawning its startupCommand via the user's shell.
+ * After the agent reaches readiness, injects identity context and pending
+ * messages — same treatment as the terminal-server cold path.
+ *
+ * @param {Object} agent - Agent config with label, startupCommand, readinessSignal, postStartup
+ * @param {Object} [opts]
+ * @param {boolean} [opts.isInitialStartup=false] - Skip context injection on the first
+ *   --startup iteration (terminal-server.js handles it independently).
+ */
+async function launchAgent(agent, { isInitialStartup = false } = {}) {
+  // Show metadata after selection
+  const meta = [
+    prettyName ? `${dim('name:')} ${blue(prettyName)}` : null,
+    `${dim('branch:')} ${blue(branch)}`,
+    `${dim('canvas:')} ${blue(canvasShort)}`,
+  ].filter(Boolean).join('  ')
+  p.log.info(meta)
+  p.outro(dim(`Starting ${agent.label}...`))
+  setMouse(true)
+
+  try {
+    const shell = process.env.SHELL || '/bin/zsh'
+    const child = spawn(shell, ['-lc', agent.startupCommand], { stdio: 'inherit' })
+
+    // Context injection — inject identity, postStartup, and pending messages
+    // after the agent reaches readiness. Skip on initial --startup since
+    // terminal-server.js handles that path independently.
+    let pollInterval = null
+    const tmuxName = !isInitialStartup ? getTmuxName() : null
+    const widgetId = process.env.STORYBOARD_WIDGET_ID
+
+    if (tmuxName && widgetId) {
+      const readinessSignal = agent.readinessSignal
+      const firstWord = agent.startupCommand.trim().split(/\s+/)[0]
+
+      if (readinessSignal) {
+        let contextSent = false
+        pollInterval = setInterval(() => {
+          if (contextSent) { clearInterval(pollInterval); pollInterval = null; return }
+          try {
+            const paneContent = execSync(
+              `tmux capture-pane -t "${tmuxName}" -p`,
+              { encoding: 'utf8', timeout: 1000 }
+            )
+            // Check configured readiness signal + copilot prompt fallback
+            const isReady = paneContent.includes(readinessSignal) ||
+              (firstWord === 'copilot' && paneContent.match(/^[>❯]\s*$/m))
+            if (isReady) {
+              contextSent = true
+              clearInterval(pollInterval)
+              pollInterval = null
+              setTimeout(() => {
+                if (agent.postStartup) {
+                  try {
+                    execSync(`tmux send-keys -t "${tmuxName}" -l ${JSON.stringify(agent.postStartup)}`, { stdio: 'ignore' })
+                    execSync(`tmux send-keys -t "${tmuxName}" Enter`, { stdio: 'ignore' })
+                  } catch {}
+                }
+                injectIdentityMessage(tmuxName)
+                setTimeout(() => deliverPendingMessages(tmuxName), 2000)
+              }, 500)
+            }
+          } catch {}
+        }, 2000)
+        // Timeout after 30s — don't wait forever
+        setTimeout(() => {
+          if (!contextSent) {
+            contextSent = true
+            if (pollInterval) { clearInterval(pollInterval); pollInterval = null }
+          }
+        }, 30000)
+      } else {
+        // No readiness signal configured — inject after a delay
+        const delayTimer = setTimeout(() => {
+          injectIdentityMessage(tmuxName)
+          setTimeout(() => deliverPendingMessages(tmuxName), 2000)
+        }, 5000)
+        // Store reference for cleanup
+        pollInterval = { clear: () => clearTimeout(delayTimer) }
+      }
+    }
+
+    await new Promise((resolve) => {
+      child.on('close', () => {
+        if (pollInterval) {
+          if (typeof pollInterval.clear === 'function') pollInterval.clear()
+          else clearInterval(pollInterval)
+        }
+        resolve()
+      })
+      child.on('error', () => {
+        if (pollInterval) {
+          if (typeof pollInterval.clear === 'function') pollInterval.clear()
+          else clearInterval(pollInterval)
+        }
+        resolve()
+      })
+    })
+  } catch {
+    p.log.error(`Failed to start ${agent.label}. Is it installed?`)
+    await new Promise(r => setTimeout(r, 2000))
+  }
+}
 
 async function welcomeLoop() {
+  let firstIteration = true
+
   while (true) {
+    // On first iteration with --startup, auto-launch the command
+    if (firstIteration && startupCmd) {
+      firstIteration = false
+
+      if (startupCmd === 'shell') {
+        // Plain shell — spawn interactive shell, return to welcome on exit
+        setMouse(true)
+        try { await spawnShell() } catch {}
+        resetTerminal()
+        continue
+      }
+
+      // Try to match against a configured agent for label resolution
+      const matchedAgent = agents.find(a =>
+        startupCmd.startsWith(a.startupCommand?.split(' ')[0])
+      )
+      const agent = matchedAgent || { label: startupCmd.split(/\s+/)[0], startupCommand: startupCmd }
+      await launchAgent(agent, { isInitialStartup: true })
+      resetTerminal()
+      continue
+    }
+    firstIteration = false
+
+    resetTerminal()
+    setMouse(false)
     console.clear()
     p.intro(`${bold('storyboard terminal')}`)
 
+    // Build the first option based on number of configured agents
+    const agentOption = agents.length > 1
+      ? { value: 'agents', label: '✦ Start a new agent session' }
+      : { value: 'copilot', label: `✦ Start a new ${agents[0]?.label || 'Copilot'} session` }
+
     const action = await p.select({
       message: 'How would you like to start?',
       options: [
-        { value: 'copilot', label: '✦ Start a new Copilot session' },
+        agentOption,
         { value: 'shell', label: '▸ Start a new terminal session' },
         { value: 'sessions', label: '⊞ Browse existing sessions' },
       ],
     })
 
     if (p.isCancel(action)) {
-      p.outro(dim('Opening shell...'))
-      break
+      // Don't exit to shell on cancel — loop back to welcome
+      continue
+    }
+
+    if (action === 'agents') {
+      // Multi-agent sub-select
+      const agentChoice = await p.select({
+        message: 'Which agent?',
+        options: agents.map(a => ({
+          value: a.id,
+          label: `✦ Start a new ${a.label} session`,
+        })),
+      })
+
+      if (p.isCancel(agentChoice)) continue
+
+      const agent = agents.find(a => a.id === agentChoice)
+      if (agent) {
+        await launchAgent(agent)
+      }
+      continue
     }
 
-    // Show metadata after selection
+    if (action === 'copilot') {
+      // Single agent — launch directly
+      const agent = agents[0] || { label: 'Copilot', startupCommand: 'copilot --agent terminal-agent' }
+      await launchAgent(agent)
+      continue
+    }
+
+    // Show metadata for non-agent actions (shell, sessions)
     const meta = [
       prettyName ? `${dim('name:')} ${blue(prettyName)}` : null,
       `${dim('branch:')} ${blue(branch)}`,
@@ -56,40 +359,69 @@ async function welcomeLoop() {
     p.log.info(meta)
 
     if (action === 'shell') {
-      p.outro(dim('Opening shell...'))
-      break
-    }
-
-    if (action === 'copilot') {
-      p.outro(dim('Starting Copilot...'))
-      // Run copilot as a child process, wait for it to exit, then loop back
-      try {
-        const child = spawn('copilot', [], { stdio: 'inherit' })
-        await new Promise((resolve) => {
-          child.on('close', resolve)
-          child.on('error', resolve)
-        })
-      } catch {
-        p.log.error('Failed to start Copilot. Is it installed?')
-        await new Promise(r => setTimeout(r, 2000))
-      }
-      // Loop back to welcome prompt
+      p.outro(dim('Opening shell... Enter any command below.'))
+      setMouse(true)
+      // Spawn an interactive shell; when it exits, loop back to welcome
+      try { await spawnShell() } catch {}
       continue
     }
 
     if (action === 'sessions') {
-      p.outro(dim('Loading sessions...'))
-      try {
-        const child = spawn('storyboard', ['terminal'], { stdio: 'inherit' })
-        await new Promise((resolve) => {
-          child.on('close', resolve)
-          child.on('error', resolve)
-        })
-      } catch {
-        p.log.error('Failed to load sessions.')
-        await new Promise(r => setTimeout(r, 2000))
+      // Sub-menu: pick which agent's sessions to browse, or terminal sessions
+      const resumableAgents = agents.filter(a => a.resumeCommand)
+
+      const sessionOptions = [
+        ...resumableAgents.map(a => ({
+          value: `agent:${a.id}`,
+          label: `✦ ${a.label} sessions`,
+        })),
+        { value: 'terminal', label: '⊞ Terminal sessions' },
+      ]
+
+      const sessionChoice = await p.select({
+        message: 'Browse sessions',
+        options: sessionOptions,
+      })
+
+      if (p.isCancel(sessionChoice)) continue
+
+      if (sessionChoice === 'terminal') {
+        p.outro(dim('Loading terminal sessions...'))
+        try {
+          const child = spawn('storyboard', ['terminal'], { stdio: 'inherit' })
+          await new Promise((resolve) => {
+            child.on('close', resolve)
+            child.on('error', resolve)
+          })
+        } catch {
+          p.log.error('Failed to load sessions.')
+          await new Promise(r => setTimeout(r, 2000))
+        }
+        continue
       }
-      // Loop back to welcome prompt
+
+      // Agent resume — spawn the resume command interactively
+      if (sessionChoice.startsWith('agent:')) {
+        const agentId = sessionChoice.replace('agent:', '')
+        const agent = resumableAgents.find(a => a.id === agentId)
+        if (agent) {
+          p.outro(dim(`Loading ${agent.label} sessions...`))
+          setMouse(true)
+          try {
+            const shell = process.env.SHELL || '/bin/zsh'
+            const child = spawn(shell, ['-lc', agent.resumeCommand], { stdio: 'inherit' })
+            await new Promise((resolve) => {
+              child.on('close', resolve)
+              child.on('error', resolve)
+            })
+          } catch {
+            p.log.error(`Failed to load ${agent.label} sessions.`)
+            await new Promise(r => setTimeout(r, 2000))
+          }
+        }
+        continue
+      }
+
       continue
     }
   }

package/src/commandActions.js

@@ -194,6 +194,7 @@ export function getActionsForMode(mode) {
       url: a.url || null,
       toolKey: a.toolKey || null,
       localOnly: a.localOnly || false,
+      hideFromCommandPaletteSearch: a.hideFromCommandPaletteSearch || false,
       handler,
       active,
     }

package/src/commandPaletteConfig.js

@@ -3,6 +3,8 @@
  * Framework-agnostic (zero npm dependencies).
  */
 
+import { getConfig } from './configStore.js'
+
 let _config = { sections: [] }
 
 /**
@@ -15,8 +17,15 @@ export function initCommandPaletteConfig(config) {
 
 /**
  * Get the current command palette config.
+ * Falls back to the unified config store if the legacy store wasn't initialized.
  * @returns {{ sections: Array }}
  */
 export function getCommandPaletteConfig() {
+  if (_config.sections.length === 0) {
+    const uc = getConfig('commandPalette')
+    if (uc?.sections?.length > 0) {
+      _config = { sections: [], ...uc }
+    }
+  }
   return _config
 }

package/src/comments/auth.js

@@ -73,7 +73,8 @@ export async function validateToken(token) {
   }
 
   const user = await res.json()
-  const userInfo = { login: user.login, avatarUrl: user.avatar_url }
+  const scopes = (res.headers.get('x-oauth-scopes') || '').split(',').map(s => s.trim()).filter(Boolean)
+  const userInfo = { login: user.login, avatarUrl: user.avatar_url, scopes }
 
   // 2. Verify the token can access repository discussions
   await validateTokenPermissions(token)

package/src/comments/ui/AuthModal.jsx

@@ -0,0 +1,114 @@
+/**
+ * AuthModal — PAT entry modal for comments authentication.
+ * Uses shadcn Button, Input, Label, Alert, Avatar.
+ */
+
+import { useState, useEffect, useRef } from 'react'
+import { setToken, validateToken } from '../auth.js'
+import { getCommentsConfig } from '../config.js'
+import { Button } from '../../lib/components/ui/button/index.js'
+import { Input } from '../../lib/components/ui/input/index.js'
+import { Label } from '../../lib/components/ui/label/index.js'
+import * as Alert from '../../lib/components/ui/alert/index.js'
+import * as Avatar from '../../lib/components/ui/avatar/index.js'
+
+export default function AuthModal({ onDone, onClose, initialError = null }) {
+  const [token, setTokenValue] = useState('')
+  const [submitting, setSubmitting] = useState(false)
+  const [error, setError] = useState(null)
+  const [user, setUser] = useState(null)
+  const inputRef = useRef(null)
+
+  const commentsConfig = getCommentsConfig()
+  const repoOwner = commentsConfig?.repo?.owner || 'github'
+  const repoName = commentsConfig?.repo?.name || 'storyboard'
+  const repoSlug = `${repoOwner}/${repoName}`
+  const tokenTemplateName = 'Storyboard Comments'
+  const tokenTemplateDescription =
+    `Token for enabling comments on ${repoSlug} prototype. Configure as:\n\n` +
+    `Owner: ${repoOwner}\n` +
+    'Expiration: 366 days (recommended)\n' +
+    `Repository access: Only select repositories > ${repoSlug}\n` +
+    'Permissions: Repositories > Discussions > Access: Read and Write'
+  const tokenCreateUrl =
+    `https://github.com/settings/personal-access-tokens/new?` +
+    new URLSearchParams({
+      name: tokenTemplateName,
+      description: tokenTemplateDescription,
+    }).toString()
+
+  useEffect(() => {
+    setError(initialError)
+    inputRef.current?.focus()
+  }, [])
+
+  async function submit() {
+    const val = token.trim()
+    if (!val) return
+    setSubmitting(true); setError(null)
+    try { const result = await validateToken(val); setToken(val); setUser(result) }
+    catch (err) { setError(err.message) }
+    finally { setSubmitting(false) }
+  }
+
+  function done() { if (user) onDone?.(user) }
+
+  function handleKeydown(e) {
+    if (e.key === 'Enter' && !user) submit()
+  }
+
+  return (
+    <div className="bg-popover text-popover-foreground border border-border rounded-lg shadow-lg overflow-hidden max-w-[600px] w-full font-sans">
+      <div className="flex items-center justify-between px-4 py-3 border-b border-border">
+        <h2 className="text-medium font-semibold">Sign in for comments</h2>
+        <Button variant="ghost" size="icon" onClick={onClose} aria-label="Close" className="h-7 w-7 text-muted-foreground">&#215;</Button>
+      </div>
+      <div className="p-4 space-y-3">
+        {error && <Alert.Root variant="destructive"><Alert.Description>{error}</Alert.Description></Alert.Root>}
+        <p className="text-sm text-muted-foreground leading-relaxed">
+          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.
+        </p>
+        <p className="text-sm text-muted-foreground leading-relaxed">
+          Create a <a className="text-primary underline" href={tokenCreateUrl} target="_blank" rel="noopener">GitHub Fine-Grained Personal Access Token</a> with the settings below to get started:
+        </p>
+        <div className="px-3 py-2 bg-muted border border-border rounded text-xs text-muted-foreground leading-relaxed">
+          <div className="mb-1"><strong className="text-foreground">Fine-grained Personal Access Token</strong></div>
+          <div>Owner: <code className="px-1 bg-background rounded font-mono text-foreground">{repoOwner}</code></div>
+          <div>Expiration: <code className="px-1 bg-background rounded font-mono text-foreground">366 days</code> (recommended)</div>
+          <div>Repository access: <code className="px-1 bg-background rounded font-mono text-foreground">Only select repositories &gt; {repoSlug}</code></div>
+          <div>Permissions: <code className="px-1 bg-background rounded font-mono text-foreground">Repositories &gt; Discussions &gt; Access: Read and Write</code></div>
+        </div>
+        <div className="space-y-1">
+          <Label htmlFor="sb-auth-token-input">Personal Access Token</Label>
+          <Input
+            id="sb-auth-token-input"
+            type="password"
+            placeholder="github_pat_… or ghp_…"
+            autoComplete="off"
+            spellCheck={false}
+            className="font-mono"
+            value={token}
+            onChange={(e) => setTokenValue(e.target.value)}
+            ref={inputRef}
+            onKeyDown={handleKeydown}
+          />
+        </div>
+        {user && (
+          <div className="flex items-center py-1 gap-3">
+            <Avatar.Root className="h-10 w-10"><Avatar.Image src={user.avatarUrl} alt={user.login} /><Avatar.Fallback>{user.login[0]?.toUpperCase()}</Avatar.Fallback></Avatar.Root>
+            <div className="text-sm"><span className="text-foreground">{user.login}</span><span className="block text-xs text-success mt-0.5">&#10003; Signed in</span></div>
+          </div>
+        )}
+        <Alert.Root variant="warning" className="bg-amber-100 border-amber-300">
+          <Alert.Description className="text-amber-700">
+            ⚠️ Comments are an experimental feature and may be unstable.
+          </Alert.Description>
+        </Alert.Root>
+      </div>
+      <div className="flex items-center justify-end px-4 py-3 border-t border-border gap-2">
+        <Button variant="outline" size="sm" onClick={onClose}>Cancel</Button>
+        <Button size="sm" disabled={submitting} onClick={user ? done : submit}>{user ? 'Done' : (submitting ? 'Validating\u2026' : 'Sign in')}</Button>
+      </div>
+    </div>
+  )
+}