bedrock-flows 0.7.1

package/template/apps/dashboard/src/App.tsx

@@ -0,0 +1,2716 @@
+import { useEffect, useRef, useState, type ReactNode, type CSSProperties, type FormEvent } from 'react'
+import styles from './App.module.css'
+import { APP_VERSION, ChangelogView } from './changelog'
+
+// Custom icon set (public/icons/*.svg) inlined so they inherit
+// currentColor. One source of truth for every chrome glyph — nav,
+// the About "i" badge, and the comments count. viewBox 24, 1.5px
+// stroke; `black` from the source SVGs becomes `currentColor`.
+const ICON_PATHS: Record<string, ReactNode> = {
+  workflow: (
+    <>
+      <path d="M6.25 10C8.59721 10 10.5 8.76878 10.5 7.25C10.5 5.73122 8.59721 4.5 6.25 4.5C3.90279 4.5 2 5.73122 2 7.25C2 8.76878 3.90279 10 6.25 10Z" />
+      <path d="M12 19H8C7 19 5 18.4 5 16C5 13.6 7 13 8 13H17C18 13 20 12.4 20 10C20 7.6 18 7 17 7H13" />
+      <path d="M11 21.4142L13.7071 18.7071L11 16" />
+      <path d="M21 16H17C16.4477 16 16 16.4477 16 17V21C16 21.5523 16.4477 22 17 22H21C21.5523 22 22 21.5523 22 21V17C22 16.4477 21.5523 16 21 16Z" fill="currentColor" stroke="none" />
+    </>
+  ),
+  grid: (
+    <>
+      <path d="M19 4H15C14.4477 4 14 4.44772 14 5V9C14 9.55228 14.4477 10 15 10H19C19.5523 10 20 9.55228 20 9V5C20 4.44772 19.5523 4 19 4Z" />
+      <path d="M19 14H15C14.4477 14 14 14.4477 14 15V19C14 19.5523 14.4477 20 15 20H19C19.5523 20 20 19.5523 20 19V15C20 14.4477 19.5523 14 19 14Z" />
+      <path d="M9 4H5C4.44772 4 4 4.44772 4 5V9C4 9.55228 4.44772 10 5 10H9C9.55228 10 10 9.55228 10 9V5C10 4.44772 9.55228 4 9 4Z" />
+      <path d="M9 14H5C4.44772 14 4 14.4477 4 15V19C4 19.5523 4.44772 20 5 20H9C9.55228 20 10 19.5523 10 19V15C10 14.4477 9.55228 14 9 14Z" />
+    </>
+  ),
+  swatches: (
+    <>
+      <path d="M3 7C3 5.11438 3 4.17157 3.58579 3.58579C4.17157 3 5.11438 3 7 3C8.88562 3 9.82843 3 10.4142 3.58579C11 4.17157 11 5.11438 11 7V12V17C11 18.8856 11 19.8284 10.4142 20.4142C9.82843 21 8.88562 21 7 21C5.11438 21 4.17157 21 3.58579 20.4142C3 19.8284 3 18.8856 3 17V12V7Z" />
+      <path d="M11 7.49994L12.6716 5.82837C14.0049 4.49503 14.6716 3.82837 15.5 3.82837C16.3284 3.82837 16.9951 4.49503 18.3284 5.82837L19.1716 6.67151C20.5049 8.00485 21.1716 8.67151 21.1716 9.49994C21.1716 10.3283 20.5049 10.995 19.1716 12.3283L11 20.4999" />
+      <path d="M7 21H17C18.8856 21 19.8284 21 20.4142 20.4142C21 19.8284 21 18.8856 21 17V15.5C21 15.0353 21 14.803 20.9616 14.6098C20.8038 13.8164 20.1836 13.1962 19.3902 13.0384C19.197 13 18.9647 13 18.5 13" />
+      <path d="M7 16.9915L7.00849 17" />
+    </>
+  ),
+  circleInfo: (
+    <>
+      <path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" />
+      <path d="M11.9999 16.7122V10.6733" strokeLinecap="round" />
+      <path d="M12.0029 7.32996H12.0149" strokeLinecap="round" />
+    </>
+  ),
+  messageSquare: (
+    <path d="M21 15C21 15.5304 20.7893 16.0391 20.4142 16.4142C20.0391 16.7893 19.5304 17 19 17H7L3 21V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H19C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V15Z" strokeLinecap="round" strokeLinejoin="round" />
+  ),
+  caretDown: (
+    <path d="M15.9325 10C16.3564 10 16.588 10.4944 16.3166 10.8201L12.3841 15.5391C12.1842 15.7789 11.8158 15.7789 11.6159 15.5391L7.68341 10.8201C7.41202 10.4944 7.6436 10 8.06752 10H15.9325Z" fill="currentColor" stroke="none" />
+  ),
+  archive: (
+    <>
+      <rect width="20" height="5" x="2" y="3" rx="1" strokeLinecap="round" strokeLinejoin="round" />
+      <path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8" strokeLinecap="round" strokeLinejoin="round" />
+      <path d="M10 12h4" strokeLinecap="round" strokeLinejoin="round" />
+    </>
+  ),
+  users: (
+    <>
+      <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" strokeLinecap="round" strokeLinejoin="round" />
+      <circle cx="9" cy="7" r="4" />
+      <path d="M22 21v-2a4 4 0 0 0-3-3.87" strokeLinecap="round" strokeLinejoin="round" />
+      <path d="M16 3.13a4 4 0 0 1 0 7.75" strokeLinecap="round" strokeLinejoin="round" />
+    </>
+  ),
+  // The official Figma mark (provided by Johan) — single evenodd path, filled
+  // in currentColor (overrides the set's stroke default).
+  figma: (
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M15.5421 2L12.9419 2L11.5712 2L8.97095 2C7.91873 2 6.90902 2.41618 6.1641 3.15792C5.41908 3.89975 5 4.90652 5 5.95691L5 6.64226L5.06 6.64226C5.20042 7.43794 5.58318 8.17746 6.1641 8.7559C6.34117 8.93222 6.53321 9.09014 6.73722 9.22844C6.53321 9.36675 6.34117 9.52467 6.1641 9.70098C5.41908 10.4428 5 11.4496 5 12.5L5 13.1853L5.06 13.1853C5.20042 13.981 5.58318 14.7205 6.1641 15.299C6.34117 15.4753 6.53321 15.6332 6.73722 15.7715C6.53321 15.9098 6.34117 16.0677 6.1641 16.2441C5.41908 16.9859 5 17.9927 5 19.043L5 19.7284L5.06 19.7284C5.20042 20.5241 5.58318 21.2636 6.1641 21.842C6.90902 22.5838 7.91873 23 8.97094 23C10.0232 23 11.0329 22.5838 11.7778 21.842C12.5228 21.1002 12.9419 20.0934 12.9419 19.043L12.9419 16.4569L12.9419 15.4906C13.6616 16.112 14.5842 16.4569 15.5421 16.4569C16.5943 16.4569 17.604 16.0407 18.349 15.299C19.094 14.5571 19.5131 13.5504 19.5131 12.5C19.5131 11.4496 19.094 10.4428 18.349 9.70099C18.1719 9.52467 17.9798 9.36675 17.7758 9.22844C17.9798 9.09014 18.1719 8.93222 18.349 8.7559C19.094 8.01406 19.5131 7.00729 19.5131 5.95691C19.5131 4.90652 19.094 3.89975 18.349 3.15792C17.604 2.41618 16.5943 2 15.5421 2ZM12.9419 12.5109C12.9448 13.192 13.2177 13.845 13.7024 14.3277C14.1898 14.813 14.8515 15.0862 15.5421 15.0862C16.2327 15.0862 16.8944 14.813 17.3818 14.3277C17.8691 13.8424 18.1424 13.1849 18.1424 12.5C18.1424 11.815 17.8691 11.1575 17.3818 10.6723C16.8971 10.1897 16.2402 9.91687 15.5538 9.9138L15.5421 9.91382L15.527 9.91382C14.8419 9.91776 14.1863 10.1905 13.7024 10.6723C13.2177 11.1549 12.9448 11.808 12.9419 12.489L12.9419 12.5109ZM11.5712 8.54307L11.5712 3.3707L8.97095 3.3707C8.28037 3.3707 7.61867 3.64389 7.13126 4.12922C6.64394 4.61446 6.3707 5.27195 6.3707 5.95691C6.3707 6.64186 6.64394 7.29936 7.13126 7.78459C7.61592 8.26718 8.27289 8.54002 8.95923 8.54309C8.96314 8.54308 8.96704 8.54307 8.97094 8.54307L11.5712 8.54307ZM8.95904 16.4569C8.96301 16.4569 8.96698 16.4569 8.97094 16.4569L11.5712 16.4569L11.5712 19.043C11.5712 19.728 11.2979 20.3855 10.8106 20.8707C10.3232 21.3561 9.66152 21.6293 8.97094 21.6293C8.28037 21.6293 7.61867 21.3561 7.13126 20.8707C6.64394 20.3855 6.3707 19.728 6.3707 19.043C6.3707 18.3581 6.64394 17.7006 7.13126 17.2154C7.61587 16.7328 8.27277 16.46 8.95904 16.4569ZM11.5712 15.0861L8.97094 15.0861C8.96698 15.0861 8.96301 15.0861 8.95904 15.0862C8.27277 15.083 7.61587 14.8102 7.13126 14.3277C6.64394 13.8424 6.3707 13.1849 6.3707 12.5C6.3707 11.815 6.64394 11.1575 7.13126 10.6723C7.61592 10.1897 8.27289 9.91687 8.95923 9.9138C8.96314 9.91381 8.96704 9.91382 8.97095 9.91382L11.5712 9.91382L11.5712 9.91382L11.5712 12.4865C11.5712 12.491 11.5712 12.4955 11.5712 12.5C11.5712 12.5045 11.5712 12.5089 11.5712 12.5134L11.5712 15.0861ZM15.5421 3.3707L12.9419 3.3707L12.9419 8.54311L15.5235 8.54311L15.5421 8.54307L15.5538 8.54309C16.2402 8.54002 16.8971 8.26718 17.3818 7.78459C17.8691 7.29936 18.1424 6.64186 18.1424 5.95691C18.1424 5.27195 17.8691 4.61446 17.3818 4.12922C16.8944 3.64389 16.2327 3.3707 15.5421 3.3707Z"
+      fill="currentColor"
+      stroke="none"
+    />
+  ),
+}
+
+function Icon({
+  name,
+  size = 18,
+  className,
+}: {
+  name: keyof typeof ICON_PATHS
+  size?: number
+  className?: string
+}) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.5}
+      aria-hidden="true"
+      className={className}
+    >
+      {ICON_PATHS[name]}
+    </svg>
+  )
+}
+
+// Minimal contenteditable rich-text editor. Spec is stored as HTML so
+// inline comments can later be anchored to real DOM nodes (a wrapped
+// selection span) rather than fragile markdown markers. Deliberately
+// dependency-free — matches the repo's lean ethos; swap for Tiptap if
+// richer editing is needed.
+function RichEditor({
+  value,
+  onChange,
+}: {
+  value: string
+  onChange: (html: string) => void
+}) {
+  const ref = useRef<HTMLDivElement>(null)
+
+  // Seed once / when an external reset clears it; don't fight the caret
+  // by re-writing innerHTML on every keystroke.
+  useEffect(() => {
+    const el = ref.current
+    if (el && el.innerHTML !== value && document.activeElement !== el) {
+      el.innerHTML = value
+    }
+  }, [value])
+
+  const exec = (cmd: string, arg?: string) => {
+    document.execCommand(cmd, false, arg)
+    ref.current?.focus()
+    if (ref.current) onChange(ref.current.innerHTML)
+  }
+
+  const Btn = ({ cmd, arg, label }: { cmd: string; arg?: string; label: string }) => (
+    <button
+      type="button"
+      className={styles.rteBtn}
+      onMouseDown={(e) => e.preventDefault()}
+      onClick={() => (cmd === 'createLink' ? exec(cmd, prompt('Link URL') || undefined) : exec(cmd, arg))}
+      title={label}
+    >
+      {label}
+    </button>
+  )
+
+  return (
+    <div className={styles.rte}>
+      <div className={styles.rteToolbar}>
+        <Btn cmd="bold" label="B" />
+        <Btn cmd="italic" label="I" />
+        <Btn cmd="formatBlock" arg="<h2>" label="H2" />
+        <Btn cmd="formatBlock" arg="<h3>" label="H3" />
+        <Btn cmd="formatBlock" arg="<p>" label="P" />
+        <Btn cmd="insertUnorderedList" label="• List" />
+        <Btn cmd="insertOrderedList" label="1. List" />
+        <Btn cmd="createLink" label="Link" />
+      </div>
+      <div
+        ref={ref}
+        className={styles.rteSurface}
+        contentEditable
+        suppressContentEditableWarning
+        onInput={() => ref.current && onChange(ref.current.innerHTML)}
+        data-placeholder="Spec — the job, who, solution, workflow, edge cases…"
+      />
+    </div>
+  )
+}
+import { authClient, useSession, signIn, signOut, signUp } from './auth-client'
+import { type Theme, getTheme, setTheme as persistTheme } from './theme'
+
+// Two-letter initials fallback when the user has no profile image. Splits
+// on whitespace; first letter of first two tokens, uppercased.
+function initialsFor(name?: string | null, email?: string | null): string {
+  const source = (name || email || '').trim()
+  if (!source) return '?'
+  const tokens = source.split(/[\s@.]+/).filter(Boolean)
+  const a = tokens[0]?.[0] || ''
+  const b = tokens[1]?.[0] || ''
+  return (a + b).toUpperCase() || source[0]?.toUpperCase() || '?'
+}
+
+function UserPill({
+  user,
+  onSignOut,
+}: {
+  user: { name?: string | null; email?: string | null; image?: string | null }
+  onSignOut: () => void
+}) {
+  const [open, setOpen] = useState(false)
+  const [theme, setThemeState] = useState<Theme>(() => getTheme())
+
+  const changeTheme = (t: Theme) => {
+    persistTheme(t)
+    setThemeState(t)
+  }
+
+  // Outside-click closes the menu. Bound only while open so we don't pay
+  // for the listener at rest.
+  useEffect(() => {
+    if (!open) return
+    const onDown = (e: MouseEvent) => {
+      const t = e.target as HTMLElement | null
+      if (!t?.closest(`.${styles.userMenu}`)) setOpen(false)
+    }
+    document.addEventListener('mousedown', onDown)
+    return () => document.removeEventListener('mousedown', onDown)
+  }, [open])
+
+  return (
+    <div className={styles.userMenu}>
+      <button
+        type="button"
+        className={styles.userPill}
+        onClick={() => setOpen((o) => !o)}
+        aria-haspopup="menu"
+        aria-expanded={open}
+      >
+        {user.image ? (
+          <img className={styles.userAvatar} src={user.image} alt="" referrerPolicy="no-referrer" />
+        ) : (
+          <span className={styles.userAvatarFallback}>{initialsFor(user.name, user.email)}</span>
+        )}
+        <span className={styles.userName}>{user.name || user.email}</span>
+        <Icon name="caretDown" size={16} className={`${styles.userCaret} ${open ? styles.userCaretOpen : ''}`} />
+      </button>
+      {open && (
+        <div className={styles.userPanel} role="menu">
+          <div className={styles.userPanelMeta}>{user.email}</div>
+          <div className={styles.userPanelLabel}>Appearance</div>
+          <div className={styles.themeToggle} role="group" aria-label="Appearance">
+            {(['system', 'light', 'dark'] as const).map((t) => (
+              <button
+                key={t}
+                type="button"
+                className={`${styles.themeOption} ${theme === t ? styles.themeOptionActive : ''}`}
+                aria-pressed={theme === t}
+                onClick={() => changeTheme(t)}
+              >
+                {t === 'system' ? 'System' : t === 'light' ? 'Light' : 'Dark'}
+              </button>
+            ))}
+          </div>
+          <button
+            type="button"
+            className={styles.userPanelItem}
+            onClick={() => {
+              setOpen(false)
+              onSignOut()
+            }}
+          >
+            Sign out
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}
+
+function AuthGate() {
+  const [mode, setMode] = useState<'signin' | 'signup'>('signin')
+  const [step, setStep] = useState<'credentials' | 'verify'>('credentials')
+  const [name, setName] = useState('')
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [otp, setOtp] = useState('')
+  const [error, setError] = useState<string | null>(null)
+  const [notice, setNotice] = useState<string | null>(null)
+  const [busy, setBusy] = useState(false)
+  const [invited, setInvited] = useState(false)
+  const [googleEnabled, setGoogleEnabled] = useState(false)
+
+  // Only show providers that are actually configured (hide Google when a project
+  // is provisioned without it — otherwise the button 404s).
+  useEffect(() => {
+    fetch('/__auth-config')
+      .then((r) => (r.ok ? r.json() : null))
+      .then((d) => setGoogleEnabled(Boolean(d?.google)))
+      .catch(() => {})
+  }, [])
+
+  // Arrived via an invite link (?invite=<token>) → resolve it to the invited
+  // email, prefill + lock it, and switch to the create-account form.
+  useEffect(() => {
+    const t = new URLSearchParams(window.location.search).get('invite')
+    if (!t) return
+    fetch(`/api/invite?token=${encodeURIComponent(t)}`)
+      .then((r) => (r.ok ? r.json() : null))
+      .then((d) => {
+        if (d?.email) {
+          setEmail(d.email)
+          setMode('signup')
+          setInvited(true)
+        }
+      })
+      .catch(() => {})
+  }, [])
+
+  const sendCode = () =>
+    authClient.emailOtp.sendVerificationOtp({ email: email.trim(), type: 'email-verification' })
+
+  const submit = async (e: FormEvent) => {
+    e.preventDefault()
+    setError(null)
+    setNotice(null)
+    setBusy(true)
+    try {
+      if (mode === 'signup' || invited) {
+        const { error } = await signUp.email({
+          email: email.trim(),
+          password,
+          name: name.trim() || email.split('@')[0],
+        })
+        if (error) throw new Error(error.message || 'Sign up failed')
+        // Account created (unverified); a code was emailed on sign-up.
+        setStep('verify')
+        setNotice(`We emailed a 6-digit code to ${email.trim()}.`)
+      } else {
+        const { error } = await signIn.email({ email: email.trim(), password })
+        if (error) {
+          const unverified =
+            (error as { code?: string }).code === 'EMAIL_NOT_VERIFIED' ||
+            /verif/i.test(error.message || '')
+          if (unverified) {
+            await sendCode()
+            setStep('verify')
+            setNotice(`Your email isn't verified yet — we sent a code to ${email.trim()}.`)
+            return
+          }
+          throw new Error(error.message || 'Sign in failed')
+        }
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Something went wrong')
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const verify = async (e: FormEvent) => {
+    e.preventDefault()
+    setError(null)
+    setBusy(true)
+    try {
+      const { error } = await authClient.emailOtp.verifyEmail({ email: email.trim(), otp: otp.trim() })
+      if (error) throw new Error(error.message || 'Invalid or expired code')
+      // Verified → establish the session with the password they just set.
+      const { error: signinErr } = await signIn.email({ email: email.trim(), password })
+      if (signinErr) throw new Error('Verified — now sign in with your password.')
+      setPassword('')
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Something went wrong')
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const resend = async () => {
+    setError(null)
+    try {
+      await sendCode()
+      setNotice(`New code sent to ${email.trim()}.`)
+    } catch {
+      setError('Could not resend the code.')
+    }
+  }
+
+  const google = async () => {
+    setError(null)
+    try {
+      await signIn.social({ provider: 'google', callbackURL: window.location.href })
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Google sign-in failed')
+    }
+  }
+
+  if (step === 'verify') {
+    return (
+      <div className={'bf-auth-gate'}>
+        <div className={'bf-auth-gate__card'}>
+          <h2 className={'bf-auth-gate__title'}>Check your email</h2>
+          <p className={'bf-auth-gate__lede'}>Enter the 6-digit code we sent to {email.trim()}.</p>
+          {/* Errors surface as an alert banner at the top of the card. */}
+          {error && <p className={'bf-auth-error'} role="alert">{error}</p>}
+          <form className={'bf-auth-form'} onSubmit={verify}>
+            <label className={'bf-auth-form__field'}>
+              <span className={'bf-auth-form__label'}>Verification code</span>
+              <input
+                type="text"
+                inputMode="numeric"
+                autoComplete="one-time-code"
+                placeholder="123456"
+                value={otp}
+                onChange={(e) => setOtp(e.target.value.replace(/\D/g, '').slice(0, 6))}
+                maxLength={6}
+                required
+              />
+            </label>
+            <button type="submit" className={'bf-auth-form__submit'} disabled={busy || otp.length < 6}>
+              {busy ? 'Verifying…' : 'Verify & continue'}
+            </button>
+            <button type="button" className={'bf-auth-form__tab'} onClick={resend} disabled={busy}>
+              Resend code
+            </button>
+            {notice && <p className={'bf-auth-gate__lede'}>{notice}</p>}
+          </form>
+        </div>
+      </div>
+    )
+  }
+
+  const creating = mode === 'signup' || invited
+  return (
+    <div className={'bf-auth-gate'}>
+      <div className={'bf-auth-gate__card'}>
+        <h2 className={'bf-auth-gate__title'}>{invited ? 'Create your account' : 'Sign in to continue'}</h2>
+        <p className={'bf-auth-gate__lede'}>
+          {invited
+            ? "You've been invited — set a password to create your account."
+            : 'This prototype review tool is restricted to invited reviewers.'}
+        </p>
+        {/* Errors surface as an alert banner at the top of the card. */}
+        {error && <p className={'bf-auth-error'} role="alert">{error}</p>}
+        <form className={'bf-auth-form'} onSubmit={submit}>
+          {!invited && (
+            <div className={'bf-auth-form__tabs'}>
+              <button
+                type="button"
+                className={`bf-auth-form__tab ${mode === 'signin' ? 'is-active' : ''}`}
+                onClick={() => setMode('signin')}
+              >
+                Sign in
+              </button>
+              <button
+                type="button"
+                className={`bf-auth-form__tab ${mode === 'signup' ? 'is-active' : ''}`}
+                onClick={() => setMode('signup')}
+              >
+                Sign up
+              </button>
+            </div>
+          )}
+          {googleEnabled && (
+            <>
+              <button type="button" className={'bf-auth-form__google'} onClick={google}>
+                <svg width="16" height="16" viewBox="0 0 18 18" aria-hidden="true">
+                  <path fill="#4285F4" d="M17.64 9.2c0-.64-.06-1.25-.16-1.84H9v3.48h4.84a4.14 4.14 0 0 1-1.8 2.71v2.26h2.92c1.7-1.57 2.68-3.88 2.68-6.61z" />
+                  <path fill="#34A853" d="M9 18c2.43 0 4.47-.81 5.96-2.18l-2.92-2.26c-.81.54-1.84.86-3.04.86-2.34 0-4.32-1.58-5.03-3.7H.96v2.32A9 9 0 0 0 9 18z" />
+                  <path fill="#FBBC05" d="M3.97 10.71A5.4 5.4 0 0 1 3.69 9c0-.59.1-1.17.28-1.71V4.96H.96A9 9 0 0 0 0 9c0 1.45.35 2.83.96 4.04l3.01-2.33z" />
+                  <path fill="#EA4335" d="M9 3.58c1.32 0 2.5.45 3.44 1.35l2.58-2.58A9 9 0 0 0 9 0 9 9 0 0 0 .96 4.96l3.01 2.33C4.68 5.16 6.66 3.58 9 3.58z" />
+                </svg>
+                Continue with Google
+              </button>
+              <div className={'bf-auth-form__divider'}><span>or</span></div>
+            </>
+          )}
+          {creating && (
+            <label className={'bf-auth-form__field'}>
+              <span className={'bf-auth-form__label'}>Name</span>
+              <input
+                type="text"
+                placeholder="Your name"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                autoComplete="name"
+                maxLength={40}
+              />
+            </label>
+          )}
+          <label className={'bf-auth-form__field'}>
+            <span className={'bf-auth-form__label'}>Email</span>
+            <input
+              type="email"
+              placeholder="you@example.com"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              autoComplete="email"
+              readOnly={invited}
+              required
+            />
+          </label>
+          <label className={'bf-auth-form__field'}>
+            <span className={'bf-auth-form__label'}>Password</span>
+            <input
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              autoComplete={creating ? 'new-password' : 'current-password'}
+              minLength={8}
+              required
+            />
+          </label>
+          <button type="submit" className={'bf-auth-form__submit'} disabled={busy}>
+            {creating ? 'Create account' : 'Sign in'}
+          </button>
+          {notice && <p className={'bf-auth-gate__lede'}>{notice}</p>}
+        </form>
+      </div>
+    </div>
+  )
+}
+
+type Prototype = {
+  slug: string
+  id: string
+  name: string
+  /** 'wireflow' (default) or 'delivery' (open-ended front-end / page tree). */
+  kind?: string
+  dsVersion: string
+  briefUrl?: string
+  wireflowUrl?: string
+  figmaUrl?: string
+  status?: string
+  // ISO date the spec.md was last pulled in from its Google Doc.
+  specUpdatedAt?: string
+  // Superseded flows: kept for reference, shown in a separate list.
+  archived?: boolean
+  archivedNote?: string
+  // Versioning (see scripts/new-version.mjs). `version` is 1 implicitly on
+  // the original; new versions are 2, 3, … `supersedes` is the old id this
+  // version replaced; `supersededBy` is the new id that replaced this one.
+  version?: number
+  supersedes?: string
+  supersededBy?: string
+}
+
+// In production the dashboard is same-origin with the worker ('').
+//
+// Local dev: `npm run dev` sets VITE_LOCAL_QUEUE=1, so comment traffic goes
+// SAME-ORIGIN through the vite proxy → the local `npx wrangler dev` worker
+// (WF_COMMENTS bound to the REAL KV via `remote: true`, plus the localhost
+// auth-bypass). Reads AND writes work against the same data prod sees — run
+// `npx wrangler dev` alongside `npm run dev`. (Without the local worker,
+// comment fetches fail; that's the trade for working local writes. Writing
+// cross-origin to prod instead 401s: the prod cookie is SameSite=Lax so it
+// isn't sent, and the bypass only fires for a localhost-host request.)
+// Injected at build time from bedrock.config.ts `modules.commenting.prodOrigin`
+// (vite define) — per-project, so platform code stays deployment-agnostic.
+// Empty → same-origin only (fine when the dashboard is served by the worker).
+const COMMENTS_PROD_ORIGIN = __BEDROCK_COMMENTS_PROD_ORIGIN__
+function commentsBase(): string {
+  if (typeof window === 'undefined') return ''
+  // Local dev (npm run dev) → same-origin (vite proxy → local worker).
+  if ((import.meta.env as Record<string, string | undefined>).VITE_LOCAL_QUEUE) return ''
+  return /^(localhost|127\.0\.0\.1)$/.test(window.location.hostname)
+    ? COMMENTS_PROD_ORIGIN
+    : ''
+}
+
+// DS comment thread id: `DS-<version>-<component>`, sanitized to the
+// KV-key charset [A-Za-z0-9_-] (the worker enforces this regex). One
+// thread per component (its Docs page). MUST match the scheme the
+// Storybook commenting bar uses (.storybook/manager-head.html) so the
+// same KV key is read/written from both surfaces.
+function dsThreadId(version: string, component: string): string {
+  const clean = (s: string) => String(s || '').replace(/[^A-Za-z0-9_-]/g, '-')
+  return `DS-${clean(version)}-${clean(component)}`
+}
+
+type DsComponent = {
+  name: string
+  bucket: string
+  variants: string[]
+  // Storybook docs story id (kebab of the title); follows a storyTitle override
+  // so OS/-grouped components resolve to `os-…`, not `components-…`. May be
+  // absent on older manifests — callers fall back to `<bucket>-<name>`.
+  docId?: string
+}
+
+type DsVersion = {
+  version: string
+  components: string[]
+  // Optional richer detail (bucket + variant filenames). Older /__ds.json
+  // payloads won't have it; the queue degrades gracefully when absent.
+  componentDetails?: DsComponent[]
+}
+
+type Tab = 'flows' | 'deliveries' | 'ds' | 'drafts' | 'queue' | 'archived' | 'users' | 'changelog'
+
+type DraftFeature = {
+  id: string
+  fId?: string
+  name: string
+  briefUrl?: string
+  spec: string
+  author?: string
+  authorEmail?: string
+  createdAt?: string
+}
+
+// Who may submit draft feature specs. Mirrors the worker's allowlist;
+// the server is the real gate — this just hides the form for others.
+const SPEC_AUTHORS = ['johan@obra.studio', 'tyler@ziptility.com']
+
+const STATUS_TONES: Record<string, string> = {
+  'To do': styles.statusTodo,
+  'To validate': styles.statusValidate,
+  'Work in progress': styles.statusWip,
+  'Ready for design': styles.statusReady,
+  'Ready for engineering': styles.statusReady,
+  'Waiting for spec change': styles.statusTodo,
+}
+
+// URL hash → active tab. Letting the dashboard be deep-linkable means
+// "open the design systems list" or "open the queue" can be a real URL.
+// We mirror the active tab back into the hash so a copied link reproduces
+// the view.
+function readTabFromHash(): Tab {
+  const h = (typeof window !== 'undefined' ? window.location.hash : '').replace(/^#/, '')
+  if (h === 'ds' || h === 'flows' || h === 'deliveries' || h === 'queue' || h === 'archived' || h === 'users' || h === 'changelog') return h as Tab
+  return 'flows'
+}
+
+// ⌘K command palette: type a component name → open its Storybook docs (also
+// covers flows + the nav tabs). Opens in a new tab so you keep your place.
+function CommandPalette({
+  dsVersions,
+  items,
+  onNavTab,
+  onClose,
+}: {
+  dsVersions: DsVersion[] | null
+  items: Prototype[] | null
+  onNavTab: (t: Tab) => void
+  onClose: () => void
+}) {
+  const [query, setQuery] = useState('')
+  const [active, setActive] = useState(0)
+  const inputRef = useRef<HTMLInputElement>(null)
+  useEffect(() => { inputRef.current?.focus() }, [])
+
+  type Cmd = { id: string; label: string; sub: string; run: () => void }
+  const all: Cmd[] = []
+  for (const v of dsVersions || []) {
+    const detailOf = new Map((v.componentDetails || []).map((d) => [d.name, d]))
+    for (const c of v.components) {
+      const d = detailOf.get(c)
+      const docId = d?.docId || `${d?.bucket || 'components'}-${c}`
+      const href = `/ds/${v.version}/storybook/?path=/docs/${docId}--docs`
+      all.push({ id: `c:${v.version}:${c}`, label: c, sub: `Component · ${v.version}`, run: () => window.open(href, '_blank', 'noopener') })
+    }
+  }
+  for (const p of (items || []).filter((x) => !x.archived)) {
+    all.push({ id: `f:${p.id}`, label: p.name, sub: `Flow · ${p.id}`, run: () => window.open(`/p/${p.id}/`, '_blank', 'noopener') })
+  }
+  ;([['flows', 'Flows'], ['ds', 'Design systems'], ['queue', 'Resolution queue'], ['changelog', 'Changelog']] as [Tab, string][])
+    .forEach(([t, l]) => all.push({ id: `nav:${t}`, label: l, sub: 'Go to tab', run: () => onNavTab(t) }))
+
+  const q = query.trim().toLowerCase()
+  const results = q ? all.filter((c) => (c.label + ' ' + c.sub).toLowerCase().includes(q)) : all.slice(0, 60)
+  const activeIdx = Math.min(active, Math.max(0, results.length - 1))
+  const run = (c?: Cmd) => { if (c) { c.run(); onClose() } }
+
+  return (
+    <div
+      onClick={onClose}
+      style={{ position: 'fixed', inset: 0, zIndex: 2000, background: 'rgba(15,23,42,0.45)', display: 'flex', alignItems: 'flex-start', justifyContent: 'center', paddingTop: '12vh' }}
+    >
+      <div
+        onClick={(e) => e.stopPropagation()}
+        role="dialog"
+        aria-label="Command menu"
+        style={{ width: 'min(560px, 92vw)', background: 'var(--dash-surface)', border: '1px solid var(--dash-border-strong)', borderRadius: 12, boxShadow: '0 24px 64px rgba(0,0,0,0.4)', overflow: 'hidden' }}
+      >
+        <input
+          ref={inputRef}
+          value={query}
+          onChange={(e) => { setQuery(e.target.value); setActive(0) }}
+          onKeyDown={(e) => {
+            if (e.key === 'ArrowDown') { e.preventDefault(); setActive((a) => Math.min(a + 1, results.length - 1)) }
+            else if (e.key === 'ArrowUp') { e.preventDefault(); setActive((a) => Math.max(a - 1, 0)) }
+            else if (e.key === 'Enter') { e.preventDefault(); run(results[activeIdx]) }
+            else if (e.key === 'Escape') { e.preventDefault(); onClose() }
+          }}
+          placeholder="Search components, flows…"
+          style={{ width: '100%', boxSizing: 'border-box', border: 'none', borderBottom: '1px solid var(--dash-border)', background: 'transparent', color: 'var(--dash-text)', fontSize: 15, padding: '14px 16px', outline: 'none', fontFamily: 'inherit' }}
+        />
+        <div style={{ maxHeight: '52vh', overflowY: 'auto', padding: '6px 0' }}>
+          {results.length === 0 && <div style={{ padding: '16px', fontSize: 13, color: 'var(--dash-text-muted)' }}>No matches.</div>}
+          {results.map((c, i) => (
+            <button
+              key={c.id}
+              type="button"
+              onMouseEnter={() => setActive(i)}
+              onClick={() => run(c)}
+              style={{ display: 'flex', alignItems: 'baseline', gap: 10, width: '100%', textAlign: 'left', border: 'none', cursor: 'pointer', padding: '9px 16px', fontFamily: 'inherit', background: i === activeIdx ? 'var(--dash-surface-alt)' : 'transparent', color: 'var(--dash-text)' }}
+            >
+              <span style={{ fontSize: 14, fontWeight: 500 }}>{c.label}</span>
+              <span style={{ fontSize: 12, color: 'var(--dash-text-muted)' }}>{c.sub}</span>
+            </button>
+          ))}
+        </div>
+        <div style={{ padding: '8px 16px', borderTop: '1px solid var(--dash-border)', fontSize: 11, color: 'var(--dash-text-muted)' }}>
+          ↑↓ navigate · ↵ open in Storybook · esc close
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// ── Users admin (admin-only) ─────────────────────────────────────────────────
+// Self-hosted user management on the better-auth `admin` plugin — reads/writes
+// THIS deployment's own auth DB. No hosted dashboard / cloud project needed.
+type AdminUser = {
+  id: string
+  email: string
+  name?: string
+  role?: string | null
+  banned?: boolean | null
+}
+
+const uaBtn: CSSProperties = {
+  padding: '4px 10px',
+  fontSize: 13,
+  borderRadius: 6,
+  border: '1px solid rgba(127,127,127,0.35)',
+  background: 'transparent',
+  color: 'inherit',
+  cursor: 'pointer',
+}
+const uaInput: CSSProperties = {
+  padding: '6px 10px',
+  fontSize: 13,
+  borderRadius: 6,
+  border: '1px solid rgba(127,127,127,0.35)',
+  background: 'transparent',
+  color: 'inherit',
+}
+
+function UsersAdmin({ currentUserId }: { currentUserId?: string }) {
+  const [users, setUsers] = useState<AdminUser[] | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [busyId, setBusyId] = useState<string | null>(null)
+  const [inviteEmail, setInviteEmail] = useState('')
+  const [inviting, setInviting] = useState(false)
+  const [notice, setNotice] = useState<string | null>(null)
+
+  const load = async () => {
+    setError(null)
+    const res = await authClient.admin.listUsers({
+      query: { limit: 200, sortBy: 'createdAt', sortDirection: 'desc' },
+    })
+    if (res.error) {
+      setError(res.error.message || 'Failed to load users')
+      return
+    }
+    setUsers((res.data?.users as AdminUser[]) || [])
+  }
+  useEffect(() => {
+    load()
+  }, [])
+
+  const act = async (
+    id: string,
+    fn: () => Promise<{ error?: { message?: string } | null }>,
+  ) => {
+    setBusyId(id)
+    setError(null)
+    const res = await fn()
+    setBusyId(null)
+    if (res?.error) {
+      setError(res.error.message || 'Action failed')
+      return
+    }
+    await load()
+  }
+
+  // Role semantics: 'user' = invited reviewer; 'manager' = gives feedback that
+  // a designer must approve before agents act; 'designer' = actionable comments
+  // + approves manager feedback; 'admin' = designer powers + user management.
+  const ROLES = ['user', 'manager', 'designer', 'admin'] as const
+  const setRole = (u: AdminUser, role: string) =>
+    act(u.id, () => authClient.admin.setRole({ userId: u.id, role: role as 'user' | 'admin' }))
+  const toggleBan = (u: AdminUser) =>
+    act(u.id, () =>
+      u.banned
+        ? authClient.admin.unbanUser({ userId: u.id })
+        : authClient.admin.banUser({ userId: u.id }),
+    )
+  const remove = (u: AdminUser) => {
+    if (!window.confirm(`Delete ${u.email}? This cannot be undone.`)) return
+    act(u.id, () => authClient.admin.removeUser({ userId: u.id }))
+  }
+
+  // Email an invite — the person follows the link and creates their OWN account
+  // (no admin-set password). The invite also authorizes their email to sign up.
+  const sendInvite = async (e: FormEvent) => {
+    e.preventDefault()
+    setInviting(true)
+    setError(null)
+    setNotice(null)
+    const email = inviteEmail.trim().toLowerCase()
+    const res = await fetch('/api/invite', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      credentials: 'include',
+      body: JSON.stringify({ email }),
+    })
+    const data = (await res.json().catch(() => ({}))) as { error?: string }
+    setInviting(false)
+    if (!res.ok) {
+      setError(data.error || 'Failed to send invite')
+      return
+    }
+    setNotice(`Invite sent to ${email}. They'll get an email to create their account.`)
+    setInviteEmail('')
+  }
+
+  if (error && !users) return <p className={styles.error}>{error}</p>
+  if (!users) return <p className={styles.muted}>Loading users…</p>
+
+  return (
+    <section style={{ maxWidth: 880 }}>
+      {error && <p className={styles.error}>{error}</p>}
+      {notice && <p className={styles.muted}>{notice}</p>}
+      <form onSubmit={sendInvite} style={{ display: 'flex', gap: 8, flexWrap: 'wrap', alignItems: 'center', margin: '4px 0 18px' }}>
+        <input required type="email" placeholder="invite someone by email…" value={inviteEmail}
+          onChange={(e) => setInviteEmail(e.target.value)} style={{ ...uaInput, minWidth: 260 }} />
+        <button type="submit" disabled={inviting} style={uaBtn}>{inviting ? 'Sending…' : 'Send invite'}</button>
+      </form>
+      <p className={styles.muted}>
+        {users.length} user{users.length === 1 ? '' : 's'}
+      </p>
+      <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 14 }}>
+        <thead>
+          <tr style={{ textAlign: 'left', opacity: 0.6 }}>
+            <th style={{ padding: 8 }}>User</th>
+            <th style={{ padding: 8 }}>Role</th>
+            <th style={{ padding: 8 }}>Status</th>
+            <th style={{ padding: 8, textAlign: 'right' }}>Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          {users.map((u) => {
+            const self = u.id === currentUserId
+            const busy = busyId === u.id
+            return (
+              <tr key={u.id} style={{ borderTop: '1px solid rgba(127,127,127,0.2)' }}>
+                <td style={{ padding: 8 }}>
+                  <div style={{ fontWeight: 600 }}>
+                    {u.name || '—'}
+                    {self && ' (you)'}
+                  </div>
+                  <div style={{ opacity: 0.65 }}>{u.email}</div>
+                </td>
+                <td style={{ padding: 8 }}>
+                  <select
+                    value={u.role || 'user'}
+                    disabled={busy || self}
+                    onChange={(e) => setRole(u, e.target.value)}
+                    style={{ ...uaInput, padding: '4px 6px', cursor: self ? 'default' : 'pointer' }}
+                    title="user = reviewer · manager = comments need designer approval · designer = actionable comments + approves managers · admin = designer + user management"
+                  >
+                    {ROLES.map((r) => (
+                      <option key={r} value={r}>{r}</option>
+                    ))}
+                  </select>
+                </td>
+                <td style={{ padding: 8 }}>{u.banned ? 'Banned' : 'Active'}</td>
+                <td style={{ padding: 8, textAlign: 'right', whiteSpace: 'nowrap' }}>
+                  {' '}
+                  <button type="button" disabled={busy || self} onClick={() => toggleBan(u)} style={uaBtn}>
+                    {u.banned ? 'Unban' : 'Ban'}
+                  </button>{' '}
+                  <button
+                    type="button"
+                    disabled={busy || self}
+                    onClick={() => remove(u)}
+                    style={{ ...uaBtn, color: '#c0392b' }}
+                  >
+                    Delete
+                  </button>
+                </td>
+              </tr>
+            )
+          })}
+        </tbody>
+      </table>
+    </section>
+  )
+}
+
+function App() {
+  const session = useSession()
+  const user = session.data?.user
+  const sessionPending = session.isPending
+
+  const [items, setItems] = useState<Prototype[] | null>(null)
+  const [dsVersions, setDsVersions] = useState<DsVersion[] | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [tab, setTab] = useState<Tab>(readTabFromHash())
+  // Mobile-only: the sidebar is an off-canvas drawer toggled from the
+  // top bar. Desktop keeps it always visible (CSS handles the switch).
+  const [sidebarOpen, setSidebarOpen] = useState(false)
+  // Desktop sidebar collapse (shadcn-style) — toggled from the module top bar,
+  // persisted across sessions.
+  const [collapsed, setCollapsed] = useState(() => {
+    try { return localStorage.getItem('bf-sidebar-collapsed') === '1' } catch { return false }
+  })
+  const toggleCollapsed = () =>
+    setCollapsed((c) => {
+      const next = !c
+      try { localStorage.setItem('bf-sidebar-collapsed', next ? '1' : '0') } catch { /* ignore */ }
+      return next
+    })
+  // Comment counts populate after the manifest loads — one fetch per
+  // prototype against the deployed worker. Falls back to a sparse map
+  // so rows render immediately and counts pop in as they arrive.
+  const [commentCounts, setCommentCounts] = useState<Record<string, number>>({})
+  // Per-prototype count of comments awaiting human review
+  // (designed-by-agent + needs-human) — summed for the queue nav badge.
+  const [reviewCounts, setReviewCounts] = useState<Record<string, number>>({})
+  const [drafts, setDrafts] = useState<DraftFeature[] | null>(null)
+
+  const canAuthorSpecs = SPEC_AUTHORS.includes((user?.email || '').toLowerCase())
+  const loadDrafts = () => {
+    // Same-origin: draft writes are session-auth'd (cookies only flow
+    // same-origin) and the route lives on the worker, not the prod
+    // comment proxy. Use `wrangler dev` or a deploy to exercise it.
+    fetch(`/__draft-features.json`, { cache: 'no-store', credentials: 'include' })
+      .then((r) => (r.ok ? r.json() : []))
+      .then((d) => setDrafts(Array.isArray(d) ? d : []))
+      .catch(() => setDrafts([]))
+  }
+
+  // Keep tab and URL hash in sync — both ways. Clicking a tab pushes the
+  // hash so the back button respects it; arriving from a copied link with
+  // a hash selects the right tab.
+  useEffect(() => {
+    const onHash = () => setTab(readTabFromHash())
+    window.addEventListener('hashchange', onHash)
+    return () => window.removeEventListener('hashchange', onHash)
+  }, [])
+  const goToTab = (next: Tab) => {
+    setTab(next)
+    if (window.location.hash !== `#${next}`) {
+      // pushState keeps the back button working without scrolling.
+      history.pushState(null, '', `#${next}`)
+    }
+  }
+  // ⌘K / Ctrl+K command palette — jump to a DS component's Storybook docs (or
+  // a flow / tab) by name.
+  const [paletteOpen, setPaletteOpen] = useState(false)
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && (e.key === 'k' || e.key === 'K')) {
+        e.preventDefault()
+        setPaletteOpen((o) => !o)
+      }
+    }
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+  }, [])
+
+  // Server-side content gate bounces anonymous /p|/ds navigations here
+  // with ?next= — once a session exists, continue to the page they wanted.
+  useEffect(() => {
+    if (!user) return
+    const next = new URLSearchParams(window.location.search).get('next')
+    if (next && next.startsWith('/') && !next.startsWith('//')) window.location.replace(next)
+  }, [user?.id])
+
+  useEffect(() => {
+    // The manifests sit behind the worker's content gate (401 when signed
+    // out), so fetch only once a session exists — and refetch when sign-in
+    // completes, since the AuthGate doesn't reload the page.
+    if (!user) return
+    // Cache-bust the build manifests — they're plain static assets that
+    // Cloudflare edge-caches, so without a unique URL the dashboard can
+    // show a stale flow list for a while after a deploy.
+    const fresh = (path: string) => `${path}?t=${Date.now()}`
+    fetch(fresh('/__prototypes.json'), { cache: 'no-store', credentials: 'include' })
+      .then((r) => (r.ok ? r.json() : Promise.reject(new Error(`HTTP ${r.status}`))))
+      .then(setItems)
+      .catch((e) => setError(String(e)))
+    fetch(fresh('/__ds.json'), { cache: 'no-store', credentials: 'include' })
+      .then((r) => (r.ok ? r.json() : Promise.reject(new Error(`HTTP ${r.status}`))))
+      .then(setDsVersions)
+      .catch(() => setDsVersions([]))
+    loadDrafts()
+  }, [user?.id])
+
+  // Fan-out comment counts once the manifest has loaded. Each row fetches
+  // independently so a slow/failed prototype doesn't block the others.
+  useEffect(() => {
+    if (!items) return
+    const base = commentsBase()
+    let cancelled = false
+    for (const p of items) {
+      fetch(`${base}/__wf-comments/${p.id}.json`, {
+        cache: 'no-store',
+        credentials: 'include',
+      })
+        .then((r) => (r.ok ? r.json() : []))
+        .then((arr) => {
+          if (cancelled) return
+          // Show the actionable number: open (unresolved) top-level comments.
+          // Replies (parentId set) are messages, not actionable items.
+          const list = Array.isArray(arr) ? (arr as { resolved?: boolean; status?: string; parentId?: string }[]) : []
+          const n = list.filter((c) => !c?.parentId && !c?.resolved).length
+          setCommentCounts((prev) => (prev[p.id] === n ? prev : { ...prev, [p.id]: n }))
+          // Comments awaiting human review — feeds the queue nav badge.
+          // Includes manager comments waiting on a designer ('pending-review').
+          const reviewN = list.filter((c) => !c?.parentId && inReviewQueue(c)).length
+          setReviewCounts((prev) => (prev[p.id] === reviewN ? prev : { ...prev, [p.id]: reviewN }))
+        })
+        .catch(() => { /* leave undefined → renders as — */ })
+    }
+    return () => { cancelled = true }
+  }, [items])
+
+  // Fan-out review counts for DS component threads too, so the queue nav
+  // badge reflects DS comments awaiting human review alongside prototype
+  // ones. Keyed by the DS thread id (`DS-<version>-<component>`), which
+  // can't collide with a prototype's F-ID.
+  useEffect(() => {
+    if (!dsVersions) return
+    const base = commentsBase()
+    let cancelled = false
+    for (const v of dsVersions) {
+      for (const c of v.components) {
+        const dsId = dsThreadId(v.version, c)
+        fetch(`${base}/__wf-comments/${dsId}.json`, {
+          cache: 'no-store',
+          credentials: 'include',
+        })
+          .then((r) => (r.ok ? r.json() : []))
+          .then((arr) => {
+            if (cancelled) return
+            const list = Array.isArray(arr) ? (arr as { status?: string; parentId?: string }[]) : []
+            const reviewN = list.filter((x) => !x?.parentId && inReviewQueue(x)).length
+            setReviewCounts((prev) => (prev[dsId] === reviewN ? prev : { ...prev, [dsId]: reviewN }))
+          })
+          .catch(() => { /* leave undefined */ })
+      }
+    }
+    return () => { cancelled = true }
+  }, [dsVersions])
+
+  // Auth gate is the same as on wireflow pages — block all dashboard
+  // interaction until a session exists. While the session call is in
+  // flight, render nothing (avoids a flash of the gate).
+  if (sessionPending) return <div className={styles.page} />
+  if (!user) return <AuthGate />
+
+  // Mobile top bar (≤860px): toggle on the left, current-tab title in
+  // the middle — replaces the earlier floating-FAB toggle so users have
+  // a clear sense of where they are.
+  // Total comments awaiting human review — the queue nav badge.
+  const queuePending = Object.values(reviewCounts).reduce((a, b) => a + b, 0)
+  // Let the queue push a fresh per-flow review count up so the nav badge
+  // updates the instant a comment is approved/reopened (no reload).
+  const setReviewCount = (protoId: string, n: number) =>
+    setReviewCounts((prev) => (prev[protoId] === n ? prev : { ...prev, [protoId]: n }))
+  // Archived flows (superseded — e.g. F-008, split into F-008a/F-008b)
+  // are pulled out of the main table into their own list below it.
+  const activeItems = (items || []).filter((p) => !p.archived && p.kind !== 'delivery')
+  const deliveryItems = (items || []).filter((p) => !p.archived && p.kind === 'delivery')
+  const archivedItems = (items || []).filter((p) => p.archived)
+  // Count versions per flow family so the main list can flag flows that
+  // have history. The family is the id with any trailing `-vN` stripped
+  // (F-001, F-001-v2, F-001-v3 all share base "F-001"). Counts include
+  // both active and archived members.
+  const versionCount: Record<string, number> = {}
+  for (const p of items || []) {
+    const base = (p.id || '').replace(/-v\d+$/i, '')
+    versionCount[base] = (versionCount[base] || 0) + 1
+  }
+  const familyOf = (id: string) => (id || '').replace(/-v\d+$/i, '')
+  const TAB_LABEL: Record<Tab, string> = {
+    flows: 'Active wireflows',
+    deliveries: 'Front-end deliveries',
+    ds: 'Design systems',
+    drafts: 'Drafts',
+    queue: 'Agent designs',
+    archived: 'Archived wireflows',
+    users: 'Users',
+    changelog: 'Changelog',
+  }
+  const isAdmin = (user as { role?: string } | undefined)?.role === 'admin'
+  const navButton = (
+    key: Tab,
+    label: string,
+    count: number | null,
+    icon: keyof typeof ICON_PATHS,
+  ) => (
+    <button
+      key={key}
+      type="button"
+      aria-current={tab === key ? 'page' : undefined}
+      className={`${styles.navBtn} ${tab === key ? styles.navBtnActive : ''}`}
+      onClick={() => {
+        goToTab(key)
+        setSidebarOpen(false)
+      }}
+    >
+      <Icon name={icon} size={17} className={styles.navIcon} />
+      <span className={styles.navLabel}>{label}</span>
+      {count !== null && <span className={styles.navBadge}>{count}</span>}
+    </button>
+  )
+  return (
+    <div className={`${styles.page} ${collapsed ? styles.pageCollapsed : ''}`}>
+      {paletteOpen && (
+        <CommandPalette
+          dsVersions={dsVersions}
+          items={items}
+          onNavTab={(t) => { goToTab(t); setPaletteOpen(false) }}
+          onClose={() => setPaletteOpen(false)}
+        />
+      )}
+      <header className={styles.mobileTopBar} role="banner">
+        <button
+          type="button"
+          className={styles.sidebarToggle}
+          aria-label={sidebarOpen ? 'Collapse navigation' : 'Expand navigation'}
+          aria-expanded={sidebarOpen}
+          onClick={() => setSidebarOpen((o) => !o)}
+        >
+          {sidebarOpen ? (
+            /* Close (X) when the full-screen sidebar is open */
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+              <path d="M18 6 6 18" />
+              <path d="m6 6 12 12" />
+            </svg>
+          ) : (
+            /* shadcn PanelLeft icon */
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+              <rect width="18" height="18" x="3" y="3" rx="2" />
+              <path d="M9 3v18" />
+            </svg>
+          )}
+        </button>
+        <h1 className={styles.mobileTopBarTitle}>{TAB_LABEL[tab]}</h1>
+      </header>
+      {sidebarOpen && (
+        <div
+          className={styles.scrim}
+          onClick={() => setSidebarOpen(false)}
+          aria-hidden="true"
+        />
+      )}
+      <nav
+        className={`${styles.sidebar} ${sidebarOpen ? styles.sidebarOpen : ''}`}
+        aria-label="Sections"
+      >
+        <div className={styles.sidebarBrand}>
+          <h1 className={styles.title}>
+            Bedrock Flows
+            <button
+              type="button"
+              className={styles.titleInfo}
+              aria-label="About this app"
+            >
+              <Icon name="circleInfo" size={16} className={styles.titleInfoIcon} />
+              <span className={styles.titleInfoPanel} role="tooltip">
+                This app displays wireflows based on the{' '}
+                <a
+                  href="https://docs.google.com/spreadsheets/d/1r81pxEMhjo9H1UWUjjZggSLVHayzxvLCeWDeqq3HStg/edit?gid=345393954#gid=345393954"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  feature pipeline sheet
+                </a>
+                . Google Docs content is duplicated to the Spec page of every
+                wireflow. Then, the designer prompts a flow, usually starting
+                from Figma designs, but eventually iterating fully in their
+                LLM of choice.
+              </span>
+            </button>
+          </h1>
+          {/* Running release — the latest CHANGELOG.md heading. Click → changelog. */}
+          <button
+            type="button"
+            className={`${styles.versionPill} ${tab === 'changelog' ? styles.versionPillActive : ''}`}
+            title="What changed in each release"
+            onClick={() => { goToTab('changelog'); setSidebarOpen(false) }}
+          >
+            v{APP_VERSION}
+          </button>
+        </div>
+          <div className={styles.navSectionLabel}>Wireflows</div>
+          {navButton('flows', 'Active', items ? activeItems.length : null, 'workflow')}
+          {navButton('archived', 'Archived', items && archivedItems.length > 0 ? archivedItems.length : null, 'archive')}
+          <div className={styles.navSep} />
+          <div className={styles.navSectionLabel}>Front-end deliveries</div>
+          {navButton('deliveries', 'Deliveries', items ? deliveryItems.length : null, 'workflow')}
+          <div className={styles.navSep} />
+          {navButton('queue', 'Agent designs', queuePending > 0 ? queuePending : null, 'messageSquare')}
+          <div className={styles.navSep} />
+          {navButton('ds', 'Design systems', dsVersions ? dsVersions.length : null, 'swatches')}
+          {isAdmin && <div className={styles.navSep} />}
+          {isAdmin && navButton('users', 'Users', null, 'users')}
+          <div className={styles.sidebarUser}>
+            <UserPill
+              user={user}
+              onSignOut={() => signOut().then(() => authClient.getSession())}
+            />
+          </div>
+        </nav>
+        <div className={styles.contentCol}>
+      <header className={styles.pageTopbar}>
+        <button
+          type="button"
+          className={styles.topbarToggle}
+          onClick={toggleCollapsed}
+          aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+          title={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+        >
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+            <rect width="18" height="18" x="3" y="3" rx="2" />
+            <path d="M9 3v18" />
+          </svg>
+        </button>
+        <h1 className={styles.pageTopbarTitle}>{TAB_LABEL[tab]}</h1>
+        {tab === 'queue' && (
+          <button type="button" className={styles.titleInfo} aria-label="How the resolution queue works">
+            <Icon name="circleInfo" size={16} className={styles.titleInfoIcon} />
+            <span className={styles.titleInfoPanel} role="tooltip">
+              Comments an agent has addressed (<strong>designed by agent</strong>),
+              awaiting your sign-off. Check the live screen under each comment —
+              approve if the fix makes sense, reopen it if not, or archive it to
+              clear it from the queue when it no longer matters.
+              {' '}<strong>Manager comments</strong> also land here first: approve
+              them (optionally adding context) to hand them to the agent.
+            </span>
+          </button>
+        )}
+      </header>
+        <main className={styles.main}>
+
+      {error && <p className={styles.error}>{error}</p>}
+      {!items && !error && tab !== 'users' && tab !== 'changelog' && <p className={styles.muted}>Loading…</p>}
+
+      {tab === 'users' && isAdmin && <UsersAdmin currentUserId={user?.id} />}
+
+      {tab === 'changelog' && <ChangelogView />}
+
+      {tab === 'ds' && dsVersions && dsVersions.length > 0 && (
+        <section className={styles.dsSection}>
+          <ul className={styles.dsList}>
+            {dsVersions.map((v) => (
+              <li
+                key={v.version}
+                className={`${styles.dsItem} ${styles.dsItemClickable}`}
+                onClick={(e) => {
+                  if (!(e.target as HTMLElement).closest('a'))
+                    window.location.href = `/ds/${v.version}/storybook/`
+                }}
+              >
+                <div>
+                  <a className={styles.dsVersion} href={`/ds/${v.version}/storybook/`}>
+                    {v.version}
+                  </a>
+                  <span className={styles.dsCount}>
+                    {v.components.length}{' '}
+                    {v.components.length === 1 ? 'component' : 'components'}
+                  </span>
+                </div>
+                <div className={styles.dsComponents}>
+                  {v.components.map((c) => (
+                    <span key={c} className={styles.dsChip}>
+                      {c}
+                    </span>
+                  ))}
+                </div>
+                <a
+                  className={styles.dsLink}
+                  href={`/ds/${v.version}/storybook/`}
+                >
+                  Open storybook →
+                </a>
+              </li>
+            ))}
+          </ul>
+        </section>
+      )}
+
+      {tab === 'deliveries' && items && (
+        deliveryItems.length === 0 ? (
+          <p className={styles.muted}>
+            No deliveries yet. Add one under <code>prototypes/&lt;slug&gt;/</code> with{' '}
+            <code>meta.json</code> containing <code>"kind": "delivery"</code> — it renders a
+            page tree of every page instead of a wireflow.
+          </p>
+        ) : (
+          <table className={styles.table}>
+            <thead>
+              <tr>
+                <th className={styles.colId}>ID</th>
+                <th>Name</th>
+                <th className={styles.colStatus}>Flavor</th>
+                <th className={styles.colRefs}>Page tree</th>
+              </tr>
+            </thead>
+            <tbody>
+              {deliveryItems.map((p) => (
+                <tr key={p.id}>
+                  <td className={styles.colId}>{p.id}</td>
+                  <td>{p.name}</td>
+                  <td className={styles.colStatus}>{(p as { flavor?: string }).flavor || 'nunjucks'}</td>
+                  <td className={styles.colRefs}>
+                    <a href={`/p/${p.id}/`} target="_blank" rel="noreferrer">Open page tree ↗</a>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        )
+      )}
+
+      {tab === 'flows' && items && items.length === 0 && (
+        <p className={styles.muted}>
+          No prototypes yet. Add one under <code>prototypes/&lt;slug&gt;/</code> with{' '}
+          <code>meta.json</code> and <code>index.njk</code>.
+        </p>
+      )}
+
+      {tab === 'flows' && items && items.length > 0 && (
+        <table className={styles.table}>
+          <thead>
+            <tr>
+              <th className={styles.colId}>F-ID</th>
+              <th>Feature Name</th>
+              <th className={styles.colStatus}>Status</th>
+              <th className={styles.colStatus}>Spec updated</th>
+              <th className={styles.colRefs}>
+                References
+                <span
+                  className={styles.titleInfo}
+                  tabIndex={0}
+                  aria-label="About the References column"
+                >
+                  <Icon name="circleInfo" size={16} className={styles.titleInfoIcon} />
+                  <span className={styles.titleInfoPanel} role="tooltip">
+                    What this flow is built from: the <strong>design system</strong>{' '}
+                    it renders against (documented under the Design systems tab)
+                    and a <strong>Figma file</strong> when there's one to embed.
+                  </span>
+                </span>
+              </th>
+              <th className={styles.colComments}>Comments</th>
+              <th className={styles.colLinks}>Links</th>
+            </tr>
+          </thead>
+          <tbody>
+            {activeItems.map((p) => (
+              <tr key={p.slug}>
+                <td className={styles.mono} data-label="F-ID">
+                  {p.id}
+                  {versionCount[familyOf(p.id)] > 1 && (
+                    <span
+                      className={styles.versionBadge}
+                      title={`Version ${p.version ?? 1} of ${versionCount[familyOf(p.id)]}`}
+                    >
+                      v{p.version ?? 1}
+                    </span>
+                  )}
+                </td>
+                <td className={styles.featureNameCell} data-label="Feature">
+                  <a className={styles.featureLink} href={`/p/${p.id}/`}>
+                    {p.name}
+                  </a>
+                  {p.supersedes && (
+                    <span className={styles.supersedesLine}>
+                      supersedes{' '}
+                      <a href={`/p/${p.supersedes}/`}>{p.supersedes}</a>
+                      {versionCount[familyOf(p.id)] > 1 &&
+                        ` · ${versionCount[familyOf(p.id)]} versions`}
+                    </span>
+                  )}
+                </td>
+                <td data-label="Status">
+                  {p.status && (
+                    <span
+                      className={`${styles.statusBadge} ${STATUS_TONES[p.status] || ''}`}
+                    >
+                      {p.status}
+                    </span>
+                  )}
+                </td>
+                <td className={styles.mono} data-label="Spec updated">
+                  {p.specUpdatedAt
+                    ? p.specUpdatedAt
+                    : <span className={styles.tsetEmpty}>—</span>}
+                </td>
+                <td className={styles.mono} data-label="References">
+                  <div className={styles.refsCell}>
+                    <a
+                      className={`${styles.dsCell} ${styles.refRow}`}
+                      href={`/ds/${p.dsVersion}/storybook/`}
+                      title={`Open ${p.dsVersion} storybook`}
+                    >
+                      <Icon name="swatches" size={14} className={styles.refIcon} />
+                      {p.dsVersion}
+                    </a>
+                    {p.figmaUrl ? (
+                      <a
+                        className={`${styles.featureLink} ${styles.refRow}`}
+                        href={`/p/${p.id}/figma`}
+                        title="Open Figma wireframe view"
+                      >
+                        <Icon name="figma" size={14} className={styles.refIcon} />
+                        figma
+                      </a>
+                    ) : (
+                      <span className={`${styles.tsetEmpty} ${styles.refRow}`}>
+                        <Icon name="figma" size={14} className={styles.refIcon} />
+                        —
+                      </span>
+                    )}
+                  </div>
+                </td>
+                <td data-label="Comments">
+                  {(() => {
+                    const n = commentCounts[p.id]
+                    if (n === undefined) return <span className={styles.tsetEmpty}>·</span>
+                    if (n === 0) return <span className={styles.tsetEmpty}>—</span>
+                    return (
+                      <a
+                        href={`/p/${p.id}/?comments=1`}
+                        className={styles.commentCount}
+                        title={`${n} ${n === 1 ? 'comment' : 'comments'} — open wireflow with comments`}
+                      >
+                        <Icon name="messageSquare" size={12} />
+                        {n}
+                      </a>
+                    )
+                  })()}
+                </td>
+                <td className={styles.links} data-label="Links">
+                  {p.briefUrl && (
+                    <a href={p.briefUrl} target="_blank" rel="noreferrer">
+                      brief
+                    </a>
+                  )}
+                  {p.wireflowUrl && (
+                    <a href={p.wireflowUrl} target="_blank" rel="noreferrer">
+                      wireflow
+                    </a>
+                  )}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      )}
+
+      {tab === 'archived' && items && archivedItems.length === 0 && (
+        <p className={styles.muted}>No archived flows.</p>
+      )}
+
+      {tab === 'archived' && archivedItems.length > 0 && (
+        <table className={styles.table}>
+          <thead>
+            <tr>
+              <th className={styles.colId}>F-ID</th>
+              <th>Feature Name</th>
+              <th>Replaced by</th>
+            </tr>
+          </thead>
+          <tbody>
+            {archivedItems.map((p) => {
+              const next = p.supersededBy ? (items || []).find((q) => q.id === p.supersededBy) : null
+              return (
+                <tr key={p.slug}>
+                  <td className={styles.mono} data-label="F-ID">{p.id}</td>
+                  <td className={styles.featureNameCell} data-label="Feature">
+                    <a className={styles.featureLink} href={`/p/${p.id}/`}>{p.name}</a>
+                  </td>
+                  <td data-label="Replaced by">
+                    {p.supersededBy ? (
+                      <a className={styles.replacedByLink} href={`/p/${p.supersededBy}/`}>
+                        {next ? next.name : p.supersededBy}
+                      </a>
+                    ) : p.archivedNote ? (
+                      <span className={styles.muted}>{p.archivedNote}</span>
+                    ) : (
+                      <span className={styles.muted}>—</span>
+                    )}
+                  </td>
+                </tr>
+              )
+            })}
+          </tbody>
+        </table>
+      )}
+
+      {tab === 'drafts' && (
+        <DraftsPanel
+          drafts={drafts}
+          canAuthor={canAuthorSpecs}
+          onSubmitted={loadDrafts}
+          suggestedFId={(() => {
+            const nums: number[] = []
+            for (const p of items || []) {
+              const m = /F-0*(\d+)/i.exec(p.id || '')
+              if (m) nums.push(Number(m[1]))
+            }
+            for (const d of drafts || []) {
+              const m = /F-0*(\d+)/i.exec(d.fId || '')
+              if (m) nums.push(Number(m[1]))
+            }
+            const next = (nums.length ? Math.max(...nums) : 0) + 1
+            return 'F-' + String(next).padStart(3, '0')
+          })()}
+        />
+      )}
+
+      {tab === 'queue' && <QueueView items={items} dsVersions={dsVersions} user={user} onReviewCount={setReviewCount} />}
+        </main>
+        </div>
+    </div>
+  )
+}
+
+// ── Resolution queue ──────────────────────────────────────────────────
+// Comments move (pending-review →) open → designed-by-agent → approved
+// (+ needs-human). The queue surfaces everything an agent has addressed so a
+// human can check the live screen and sign it off, anything the agent flagged
+// as needing a human, and manager comments waiting on a designer's approval
+// (managers only give comments — a designer interprets/approves before the
+// agentic loop may act).
+
+// Statuses that land in the Agent designs queue: agent output awaiting a
+// human verdict, agent-flagged questions, and manager comments awaiting a
+// designer's approval before they become actionable.
+const QUEUE_REVIEW_STATUSES = ['designed-by-agent', 'needs-human', 'pending-review']
+const inReviewQueue = (c: { status?: string } | null | undefined) =>
+  QUEUE_REVIEW_STATUSES.includes(c?.status || '')
+
+type QComment = {
+  id: string
+  text?: string
+  author?: string
+  userId?: string
+  screenId?: string
+  status?: string
+  statusBy?: string
+  statusAt?: string
+  resolved?: boolean
+  createdAt?: string
+  parentId?: string
+  editedAt?: string
+  // DS-component comments may pin to a single Storybook story (id like
+  // `components-top-bar--two-line-title`) so the queue previews only that story.
+  storyId?: string
+  storyName?: string
+  agentResponse?: string
+  agentResponseBy?: string
+  agentResponseAt?: string
+  // Designer context added when approving a manager comment ('pending-review'
+  // → 'open') — the designer's interpretation of what the agent should do.
+  designerNote?: string
+  designerNoteBy?: string
+  designerNoteAt?: string
+  // Image attachment ids — served by GET /__wf-comments/<flow>/attachments/<id>.
+  attachments?: string[]
+  // Side notes are reference-only — agents skip them.
+  kind?: string
+  // Viewport the comment was made against (preview frame size and named
+  // breakpoint, or window size at 'full'). The queue re-renders its screen
+  // preview at this resolution so the reviewer sees what the commenter saw.
+  // Older comments lack it; the preview falls back to defaults.
+  viewport?: { w?: number; h?: number; bp?: string }
+  // Element the comment is pinned to — a CSS path scoped to the screen's
+  // content root plus a human-readable label (set by the screen panel's
+  // pick mode). Display-only here; re-resolving happens on the screen.
+  anchor?: { selector?: string; label?: string }
+}
+
+// Same FNV-1a 4-letter code used everywhere else a comment is referenced.
+function qCommentCode(id: string): string {
+  let h = 2166136261 >>> 0
+  const s = String(id || '')
+  for (let i = 0; i < s.length; i++) {
+    h ^= s.charCodeAt(i)
+    h = Math.imul(h, 16777619) >>> 0
+  }
+  let out = ''
+  for (let i = 0; i < 4; i++) {
+    out += String.fromCharCode(65 + (h % 26))
+    h = Math.floor(h / 26) + 131
+  }
+  return out
+}
+
+function qFmtDate(iso?: string): string {
+  if (!iso) return ''
+  try {
+    return new Date(iso).toLocaleDateString(undefined, {
+      month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit',
+    })
+  } catch { return iso }
+}
+
+// Coarse "how long ago" for a comment's age — makes a stale comment obvious
+// at a glance ("3 weeks ago") without the reader parsing an absolute date.
+function qRelAge(iso?: string): string {
+  if (!iso) return ''
+  const then = new Date(iso).getTime()
+  if (Number.isNaN(then)) return ''
+  const secs = Math.max(0, (Date.now() - then) / 1000)
+  const day = 86400
+  if (secs < 3600) { const m = Math.round(secs / 60); return m <= 1 ? 'just now' : `${m} min ago` }
+  if (secs < day) { const h = Math.round(secs / 3600); return `${h} hour${h === 1 ? '' : 's'} ago` }
+  if (secs < day * 14) { const d = Math.round(secs / day); return `${d} day${d === 1 ? '' : 's'} ago` }
+  if (secs < day * 60) { const w = Math.round(secs / (day * 7)); return `${w} week${w === 1 ? '' : 's'} ago` }
+  const mo = Math.round(secs / (day * 30)); return `${mo} month${mo === 1 ? '' : 's'} ago`
+}
+
+// A scaled, lazy iframe of the live screen so the reviewer can eyeball
+// the fix. On load it measures the real content (same-origin) so the whole
+// screen shows — not a fixed 800px crop. Desktop screens are ~1280 wide and
+// scale to the card width; mobile screens render a 402×874 phone frame
+// (`is-phone-frame` on <html>), which we show at up to 1:1, centered, with
+// its full height so nothing (e.g. a bottom FAB) gets clipped.
+function ScreenPreview({ url, flowHref, viewport }: { url: string; flowHref?: string; viewport?: { w?: number; h?: number; bp?: string } }) {
+  const wrapRef = useRef<HTMLDivElement>(null)
+  const frameRef = useRef<HTMLIFrameElement>(null)
+  const [cardW, setCardW] = useState(0)
+  // Natural content size of the iframe; corrected on load. When the comment
+  // recorded the viewport it was made against, render at that width so the
+  // reviewer sees the same breakpoint the commenter saw.
+  const vpW = viewport?.w && viewport.w > 0 ? Math.round(viewport.w) : undefined
+  // When the height was recorded too, render the exact commented viewport
+  // (w×h) instead of the full page height — that's what the reviewer saw:
+  // fixed dialogs center like on a real phone, the bottom drawer pins, and a
+  // dialog-state card doesn't become a 1300px-tall preview of dimmed page.
+  const vpH = vpW && viewport?.h && viewport.h > 0 ? Math.round(viewport.h) : undefined
+  const [dims, setDims] = useState({ w: vpW ?? 1280, h: vpH ?? viewport?.h ?? 800 })
+  // True when the screen 404s — e.g. a comment whose screen was removed in a
+  // later flow rebuild. We show a note instead of a blank iframe.
+  const [missing, setMissing] = useState(false)
+  useEffect(() => {
+    const el = wrapRef.current
+    if (!el) return
+    const fit = () => setCardW(el.clientWidth || 0)
+    fit()
+    const ro = new ResizeObserver(fit)
+    ro.observe(el)
+    return () => ro.disconnect()
+  }, [])
+  useEffect(() => {
+    let cancelled = false
+    fetch(url, { headers: { Accept: 'application/octet-stream' } })
+      .then((r) => { if (!cancelled && !r.ok) setMissing(true) })
+      .catch(() => {})
+    return () => { cancelled = true }
+  }, [url])
+  const measure = () => {
+    try {
+      const doc = frameRef.current?.contentDocument
+      if (!doc || !doc.body) return
+      if (vpW && vpH) {
+        setDims({ w: vpW, h: vpH }) // exact commented viewport — no measuring
+      } else if (vpW) {
+        // Width-only record (older comments): height is measured.
+        const h = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight, 400)
+        setDims({ w: vpW, h: Math.min(h, 4000) })
+      } else if (doc.documentElement.classList.contains('is-phone-frame')) {
+        const b = doc.body
+        setDims({ w: b.offsetWidth || 402, h: b.offsetHeight || 874 })
+      } else {
+        const h = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight, 600)
+        // Cap high enough for tall Storybook docs pages (e.g. the icon grid).
+        setDims({ w: 1280, h: Math.min(h, 4000) })
+      }
+    } catch { /* cross-origin — keep defaults */ }
+  }
+  const onLoad = () => {
+    measure()
+    // Storybook docs render asynchronously after the iframe's load event, so a
+    // one-shot measure catches an empty page. Re-measure on a few ticks so the
+    // frame grows to fit the rendered stories.
+    ;[250, 700, 1500, 3000].forEach((t) => window.setTimeout(measure, t))
+  }
+  // Never upscale past 1:1 (keeps the phone crisp); center horizontally.
+  const scale = cardW ? Math.min(1, cardW / dims.w) : 0.5
+  const offsetX = Math.max(0, (cardW - dims.w * scale) / 2)
+  if (missing) {
+    return (
+      <div style={{
+        padding: '24px 16px', fontSize: 13, lineHeight: 1.5, textAlign: 'center',
+        color: 'var(--dash-text-muted)',
+        borderTop: '1px solid var(--dash-border)', borderBottom: '1px solid var(--dash-border)',
+        background: 'var(--dash-surface-alt)',
+      }}>
+        This screen no longer exists (the flow was restructured since the comment).
+        If the fix was design-system-level, verify it in the design system instead.
+        {flowHref && (
+          <div style={{ marginTop: 8 }}>
+            <a href={flowHref} target="_blank" rel="noreferrer" style={{ color: 'var(--dash-link, #2563eb)', textDecoration: 'none', fontWeight: 600 }}>
+              Open the flow ↗
+            </a>
+          </div>
+        )}
+      </div>
+    )
+  }
+  return (
+    <>
+      {vpW && (
+        <div style={{
+          padding: '4px 16px', fontSize: 11, color: 'var(--dash-text-muted)',
+          borderTop: '1px solid var(--dash-border)', background: 'var(--dash-surface-alt)',
+        }}>
+          Commented at {vpW}{viewport?.h ? `×${Math.round(viewport.h)}` : ''}{viewport?.bp ? ` · ${viewport.bp}` : ''} — previewing {vpH ? 'that viewport' : 'at that width'}
+        </div>
+      )}
+    <div
+      ref={wrapRef}
+      style={{
+        width: '100%', overflow: 'hidden', height: dims.h * scale,
+        background: 'var(--dash-surface-alt)',
+        borderTop: '1px solid var(--dash-border)',
+        borderBottom: '1px solid var(--dash-border)',
+      }}
+    >
+      <iframe
+        ref={frameRef}
+        src={url}
+        loading="lazy"
+        title="Screen preview"
+        onLoad={onLoad}
+        style={{
+          width: dims.w, height: dims.h, border: 0,
+          transformOrigin: 'top left',
+          transform: `translateX(${offsetX}px) scale(${scale})`,
+        }}
+      />
+    </div>
+    </>
+  )
+}
+
+// Render comment text with http(s) URLs as clickable links. Returns an array
+// of strings + anchor elements (React escapes the strings, so it's XSS-safe;
+// only http/https match, so javascript: URLs can't slip through).
+// A short, friendly label for a long URL (full URL stays the href + hover
+// title). e.g. a giant Figma link → "figma.com · 14-410".
+function shortLinkLabel(url: string): string {
+  try {
+    const u = new URL(url)
+    const host = u.hostname.replace(/^www\./, '')
+    if (host.includes('figma.com')) {
+      const node = u.searchParams.get('node-id')
+      return node ? `figma.com · ${node}` : 'figma.com'
+    }
+    let tail = (u.pathname || '').replace(/\/+$/, '')
+    if (tail.length > 22) tail = tail.slice(0, 22) + '…'
+    return host + tail
+  } catch { return url.length > 42 ? url.slice(0, 42) + '…' : url }
+}
+
+function linkifyComment(text: string) {
+  if (!text) return text
+  return text.split(/(https?:\/\/[^\s]+)/g).map((part, i) => {
+    if (!/^https?:\/\//.test(part)) return part
+    let url = part, tail = ''
+    const trail = part.match(/[).,;:!?\]]+$/)
+    if (trail) { tail = trail[0]; url = part.slice(0, -tail.length) }
+    return (
+      <span key={i}>
+        <a href={url} title={url} target="_blank" rel="noreferrer noopener" style={{ color: '#2563eb', textDecoration: 'underline', wordBreak: 'break-word' }}>{shortLinkLabel(url)}</a>
+        {tail}
+      </span>
+    )
+  })
+}
+
+function QueueView({
+  items,
+  dsVersions,
+  user,
+  onReviewCount,
+}: {
+  items: Prototype[] | null
+  dsVersions: DsVersion[] | null
+  user: { id?: string | null; name?: string | null; email?: string | null; image?: string | null }
+  onReviewCount?: (protoId: string, n: number) => void
+}) {
+  // Both prototype threads and DS component threads land in the same
+  // `flows` map, keyed by their KV id. DS threads additionally carry a
+  // `preview` URL (a same-origin standalone variant page to iframe) so a
+  // card can show the component the comment is about. Prototype threads
+  // leave `preview` undefined and fall back to the per-screen iframe.
+  const [flows, setFlows] = useState<Record<string, { name: string; comments: QComment[]; preview?: string }>>({})
+  const [loading, setLoading] = useState(true)
+  // Cards mid-exit (key → 'approved' | 'archived') play a collapse animation
+  // before they leave the list, so the action feels completed rather than an
+  // instant swap. Approve flashes green "✓ Approved"; Archive is a quiet slate
+  // "Archived". The toast surfaces running progress / offers Undo.
+  const [exiting, setExiting] = useState<Record<string, 'approved' | 'archived'>>({})
+  const [toast, setToast] = useState<{ mode: 'approved' | 'archived'; reviewed: number; left: number } | null>(null)
+  // Which card (key `protoId:id`) has its "Reopen with a note" composer open,
+  // and the in-progress note. The note posts as a reply on the original
+  // comment so the agent sees the original + its implementation + why it's
+  // being sent back, all in one thread.
+  const [reopenFor, setReopenFor] = useState<string | null>(null)
+  const [reopenNote, setReopenNote] = useState('')
+  // Which pending manager comment has its "Approve for agent" composer open,
+  // and the designer-context note in progress.
+  const [approveFor, setApproveFor] = useState<string | null>(null)
+  const [approveNote, setApproveNote] = useState('')
+  // Images staged on the reopen note — uploaded on submit, attached to the
+  // reply so the agent gets the visual evidence with the send-back.
+  const [reopenAtts, setReopenAtts] = useState<{ blob: Blob; url: string }[]>([])
+  const sessionApprovedRef = useRef(0)
+  const toastTimer = useRef<number | null>(null)
+  // The most recent queue action, so the toast can offer an Undo. Holds the
+  // comment's prior state to restore, plus the mode (so undo only decrements
+  // the reviewed counter for approvals, not archives).
+  const lastApprovedRef = useRef<{ protoId: string; id: string; prev: QComment; mode: 'approved' | 'archived' } | null>(null)
+
+  // Prototype lookup so a queue card can warn when its comment sits on a flow
+  // that's since been superseded by a newer version (the comment may be stale).
+  const protoById = new Map((items || []).map((p) => [p.id, p]))
+
+  useEffect(() => {
+    if (!items) return
+    let cancelled = false
+    const base = commentsBase()
+    setLoading(true)
+
+    // Prototype threads — keyed by F-ID, no preview override (falls back
+    // to the per-screen iframe).
+    const protoFetches = items.map(async (p) => {
+      try {
+        const r = await fetch(`${base}/__wf-comments/${p.id}.json`, {
+          cache: 'no-store', credentials: 'include',
+        })
+        if (!r.ok) return null
+        const arr = await r.json()
+        return Array.isArray(arr)
+          ? { id: p.id, name: p.name, comments: arr as QComment[], preview: undefined as string | undefined }
+          : null
+      } catch { return null }
+    })
+
+    // DS component threads — keyed by `DS-<version>-<component>`. Preview
+    // iframes the component's standalone variant page (default.html, or the
+    // first available variant). Same-origin relative URL so cookies flow.
+    const dsFetches: Promise<{ id: string; name: string; comments: QComment[]; preview?: string } | null>[] = []
+    for (const v of dsVersions || []) {
+      const detailByName = new Map((v.componentDetails || []).map((d) => [d.name, d]))
+      for (const c of v.components) {
+        const dsId = dsThreadId(v.version, c)
+        const detail = detailByName.get(c)
+        const bucket = detail?.bucket || 'components'
+        // Embed the component's Storybook DOCS page (all its stories stacked)
+        // so the reviewer sees the real examples — including the specific one a
+        // comment is about — not just one standalone variant. iframe.html
+        // renders the preview without the manager chrome (so the DS commenting
+        // bar doesn't recurse). docId follows a storyTitle override (OS/ → os-…);
+        // fall back to `<bucket>-<component>` for older manifests.
+        const docId = detail?.docId || `${bucket}-${c}`
+        const preview = `/ds/${v.version}/storybook/iframe.html?viewMode=docs&id=${docId}--docs`
+        dsFetches.push(
+          (async () => {
+            try {
+              const r = await fetch(`${base}/__wf-comments/${dsId}.json`, {
+                cache: 'no-store', credentials: 'include',
+              })
+              if (!r.ok) return null
+              const arr = await r.json()
+              return Array.isArray(arr)
+                ? { id: dsId, name: `${c} · ${v.version}`, comments: arr as QComment[], preview }
+                : null
+            } catch { return null }
+          })(),
+        )
+      }
+    }
+
+    Promise.all([...protoFetches, ...dsFetches]).then((results) => {
+      if (cancelled) return
+      const next: Record<string, { name: string; comments: QComment[]; preview?: string }> = {}
+      for (const x of results) if (x) next[x.id] = { name: x.name, comments: x.comments, preview: x.preview }
+      setFlows(next)
+      setLoading(false)
+    })
+    return () => { cancelled = true }
+  }, [items, dsVersions])
+
+  // `isDs` + `preview` distinguish DS-component threads (id starts `DS-`,
+  // preview is a standalone variant page) from prototype threads (preview
+  // is undefined → per-screen iframe).
+  type Row = { protoId: string; protoName: string; c: QComment; isDs: boolean; preview?: string }
+  const designed: Row[] = []
+  const needsHuman: Row[] = []
+  const pendingReview: Row[] = []
+  for (const [pid, f] of Object.entries(flows)) {
+    const isDs = pid.startsWith('DS-')
+    for (const c of f.comments) {
+      const row: Row = { protoId: pid, protoName: f.name, c, isDs, preview: f.preview }
+      if (c.status === 'designed-by-agent') designed.push(row)
+      else if (c.status === 'needs-human') needsHuman.push(row)
+      else if (c.status === 'pending-review' && !c.parentId) pendingReview.push(row)
+    }
+  }
+  const byNewest = (a: Row, b: Row) =>
+    String(b.c.statusAt || '').localeCompare(String(a.c.statusAt || ''))
+  designed.sort(byNewest)
+  needsHuman.sort(byNewest)
+  // Manager comments have no statusAt until a designer touches them — sort by
+  // when they were posted instead.
+  pendingReview.sort((a, b) => String(b.c.createdAt || '').localeCompare(String(a.c.createdAt || '')))
+
+  // Approve (verdict: change is good) or Archive (no verdict: clear it from the
+  // queue without claiming the change was accepted — e.g. a comment on a since-
+  // superseded flow). Both are terminal + persist immediately, play the collapse
+  // animation, then drop the card and fire a toast offering Undo. Only Approve
+  // counts toward the "reviewed" progress tally.
+  function finishCard(protoId: string, c: QComment, mode: 'approved' | 'archived') {
+    const key = protoId + ':' + c.id
+    if (exiting[key]) return
+    const f = flows[protoId]
+    if (!f) return
+    const idx = f.comments.findIndex((x) => x.id === c.id)
+    if (idx < 0) return
+    const now = new Date().toISOString()
+    const by = user.name || user.email || 'Reviewer'
+    const prev = f.comments[idx]
+    lastApprovedRef.current = { protoId, id: c.id, prev, mode }
+    // `resolved` mirrors any terminal state so other surfaces' !resolved
+    // counters (screen badge, wireflow markers) drop it without a reload.
+    f.comments[idx] = { ...f.comments[idx], status: mode, resolved: true, statusAt: now, statusBy: by }
+    setExiting((p) => ({ ...p, [key]: mode }))
+    const base = commentsBase()
+    fetch(`${base}/__wf-comments/${protoId}.json`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      credentials: 'include',
+      body: JSON.stringify(f.comments),
+    })
+      .then((r) => { if (!r.ok) throw new Error('save failed (' + r.status + ')') })
+      .catch((err) => alert('Could not save: ' + (err instanceof Error ? err.message : String(err))))
+    onReviewCount?.(protoId, f.comments.filter((x) => !x.parentId && inReviewQueue(x)).length)
+    window.setTimeout(() => {
+      if (mode === 'approved') sessionApprovedRef.current += 1
+      const left = Object.values(flows).reduce(
+        (n, fl) => n + fl.comments.filter((x) => x.status === 'designed-by-agent').length, 0,
+      )
+      setToast({ mode, reviewed: sessionApprovedRef.current, left })
+      if (toastTimer.current) window.clearTimeout(toastTimer.current)
+      // Longer than the bare progress toast — leaves a window to hit Undo.
+      toastTimer.current = window.setTimeout(() => setToast(null), 6000)
+      setFlows({ ...flows, [protoId]: { ...f } })
+      setExiting((p) => { const n = { ...p }; delete n[key]; return n })
+    }, 520)
+  }
+  const approve = (protoId: string, c: QComment) => finishCard(protoId, c, 'approved')
+  const archive = (protoId: string, c: QComment) => finishCard(protoId, c, 'archived')
+
+  // Revert the most recent approval — restores the comment to its prior
+  // status, re-persists, and brings the card back into the list. Wired to the
+  // toast's Undo so a mis-click is recoverable.
+  function undoLast() {
+    const last = lastApprovedRef.current
+    if (!last) return
+    const f = flows[last.protoId]
+    if (!f) return
+    const idx = f.comments.findIndex((x) => x.id === last.id)
+    if (idx < 0) return
+    f.comments[idx] = last.prev
+    if (toastTimer.current) window.clearTimeout(toastTimer.current)
+    setToast(null)
+    // Only approvals bumped the reviewed tally — don't decrement for an archive.
+    if (last.mode === 'approved') sessionApprovedRef.current = Math.max(0, sessionApprovedRef.current - 1)
+    lastApprovedRef.current = null
+    const base = commentsBase()
+    fetch(`${base}/__wf-comments/${last.protoId}.json`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      credentials: 'include',
+      body: JSON.stringify(f.comments),
+    })
+      .then((r) => { if (!r.ok) throw new Error('save failed (' + r.status + ')') })
+      .catch((err) => alert('Could not undo: ' + (err instanceof Error ? err.message : String(err))))
+    onReviewCount?.(last.protoId, f.comments.filter((x) => !x.parentId && inReviewQueue(x)).length)
+    setFlows({ ...flows, [last.protoId]: { ...f } })
+  }
+
+  // Stage images for the reopen note: downscale to a 4K-class edge (detail is
+  // the point of design evidence), keep originals when already within bounds.
+  async function stageReopenImages(files: File[]) {
+    const MAX = 10 * 1024 * 1024
+    const staged: { blob: Blob; url: string }[] = []
+    for (const f of files) {
+      if (!f.type.startsWith('image/')) continue
+      try {
+        const img = await new Promise<HTMLImageElement>((res, rej) => {
+          const u = URL.createObjectURL(f)
+          const i = new Image()
+          i.onload = () => { URL.revokeObjectURL(u); res(i) }
+          i.onerror = () => { URL.revokeObjectURL(u); rej(new Error('unreadable')) }
+          i.src = u
+        })
+        const long = Math.max(img.naturalWidth, img.naturalHeight) || 1
+        const scale = Math.min(1, 4096 / long)
+        let blob: Blob
+        if (scale === 1 && f.size <= MAX) {
+          blob = f
+        } else {
+          const canvas = document.createElement('canvas')
+          canvas.width = Math.max(1, Math.round(img.naturalWidth * scale))
+          canvas.height = Math.max(1, Math.round(img.naturalHeight * scale))
+          canvas.getContext('2d')!.drawImage(img, 0, 0, canvas.width, canvas.height)
+          blob = await new Promise<Blob>((res, rej) =>
+            canvas.toBlob((b) => (b ? res(b) : rej(new Error('encode failed'))), 'image/jpeg', 0.85))
+          if (blob.size > MAX) continue
+        }
+        staged.push({ blob, url: URL.createObjectURL(blob) })
+      } catch { /* skip unreadable file */ }
+    }
+    if (staged.length) setReopenAtts((prev) => [...prev, ...staged])
+  }
+
+  async function uploadReopenAttachments(protoId: string): Promise<string[]> {
+    const ids: string[] = []
+    for (const att of reopenAtts) {
+      const r = await fetch(`${commentsBase()}/__wf-comments/${protoId}/attachments`, {
+        method: 'POST',
+        headers: { 'Content-Type': att.blob.type },
+        body: att.blob,
+        credentials: 'include',
+      })
+      if (!r.ok) throw new Error('attachment upload failed (' + r.status + ')')
+      const data = await r.json()
+      ids.push(data.id)
+    }
+    return ids
+  }
+
+  // Reopen, optionally attaching a note. The note posts as a reply on the
+  // original comment (so the agent gets the full thread: original ask →
+  // implementation → why it's coming back), then the comment returns to
+  // `open` so it re-enters the prototype's open list for another pass.
+  async function reopenWithNote(protoId: string, c: QComment, note: string) {
+    const f = flows[protoId]
+    if (!f) return
+    const idx = f.comments.findIndex((x) => x.id === c.id)
+    if (idx < 0) return
+    const now = new Date().toISOString()
+    const by = user.name || user.email || 'Reviewer'
+    let attIds: string[] = []
+    if (reopenAtts.length) {
+      try {
+        attIds = await uploadReopenAttachments(protoId)
+      } catch (err) {
+        alert('Could not upload attachment: ' + (err instanceof Error ? err.message : String(err)))
+        return // keep the composer state intact
+      }
+    }
+    if (note || attIds.length) {
+      const id = (crypto.randomUUID && crypto.randomUUID()) || String(Date.now()) + '-' + Math.random().toString(16).slice(2)
+      const reply: QComment & { parentId: string } = { id, text: note, author: by, userId: user.id || undefined, createdAt: now, parentId: c.id }
+      if (attIds.length) reply.attachments = attIds
+      f.comments.push(reply)
+    }
+    f.comments[idx] = { ...f.comments[idx], status: 'open', resolved: false, statusAt: now, statusBy: by }
+    setReopenFor(null)
+    setReopenNote('')
+    reopenAtts.forEach((a) => URL.revokeObjectURL(a.url))
+    setReopenAtts([])
+    const base = commentsBase()
+    try {
+      const r = await fetch(`${base}/__wf-comments/${protoId}.json`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify(f.comments),
+      })
+      if (!r.ok) throw new Error('save failed (' + r.status + ')')
+      setFlows({ ...flows, [protoId]: { ...f } })
+      onReviewCount?.(protoId, f.comments.filter((x) => !x.parentId && inReviewQueue(x)).length)
+    } catch (err) {
+      alert('Could not save: ' + (err instanceof Error ? err.message : String(err)))
+    }
+  }
+
+  // Approve a manager comment for the agent queue: 'pending-review' → 'open',
+  // optionally recording the designer's interpretation as designerNote so the
+  // agent gets "what to do with this" alongside the manager's words.
+  async function approveForAgent(protoId: string, c: QComment, note: string) {
+    const f = flows[protoId]
+    if (!f) return
+    const idx = f.comments.findIndex((x) => x.id === c.id)
+    if (idx < 0) return
+    const now = new Date().toISOString()
+    const by = user.name || user.email || 'Designer'
+    f.comments[idx] = {
+      ...f.comments[idx],
+      status: 'open',
+      resolved: false,
+      statusAt: now,
+      statusBy: by,
+      ...(note ? { designerNote: note, designerNoteBy: by, designerNoteAt: now } : {}),
+    }
+    setApproveFor(null)
+    setApproveNote('')
+    const base = commentsBase()
+    try {
+      const r = await fetch(`${base}/__wf-comments/${protoId}.json`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify(f.comments),
+      })
+      if (!r.ok) throw new Error('save failed (' + r.status + ')')
+      setFlows({ ...flows, [protoId]: { ...f } })
+      onReviewCount?.(protoId, f.comments.filter((x) => !x.parentId && inReviewQueue(x)).length)
+    } catch (err) {
+      alert('Could not save: ' + (err instanceof Error ? err.message : String(err)))
+    }
+  }
+
+  const card = (row: Row, kind: 'designed' | 'needs-human' | 'pending-review') => {
+    const { protoId, protoName, c, isDs, preview } = row
+    const key = protoId + ':' + c.id
+    const isExiting = !!exiting[key]
+    // Stale-flow warning: this comment lives on a prototype that's since been
+    // superseded by a newer version, so it may no longer reflect the live flow.
+    const proto = isDs ? undefined : protoById.get(protoId)
+    const supersededBy = proto?.supersededBy
+    // Replies on this comment (read-only here) so a reviewer sees the thread.
+    const replies = (flows[protoId]?.comments || [])
+      .filter((x) => x.parentId === c.id)
+      .sort((a, b) => String(a.createdAt || '').localeCompare(String(b.createdAt || '')))
+    // For DS rows, derive the storybook Docs URL from the standalone
+    // docs-iframe preview (`/ds/<version>/storybook/iframe.html?…&id=<docId>`).
+    // The manager Docs URL reuses that version + doc id.
+    // DS version, from the thread's docs-iframe preview URL.
+    const dsVer = isDs && preview ? /^\/ds\/([^/]+)\//.exec(preview)?.[1] : undefined
+    // If the comment pins a specific story, preview ONLY that story; otherwise
+    // the component's whole Docs page (the thread-level `preview`).
+    const dsPreview = isDs
+      ? (c.storyId && dsVer ? `/ds/${dsVer}/storybook/iframe.html?viewMode=story&id=${c.storyId}` : preview)
+      : preview
+    let dsStorybookUrl: string | undefined
+    if (isDs && c.storyId && dsVer) {
+      dsStorybookUrl = `/ds/${dsVer}/storybook/?path=/story/${c.storyId}`
+    } else if (isDs && preview) {
+      const m = /^\/ds\/([^/]+)\/storybook\/iframe\.html\?.*\bid=([^&]+)/.exec(preview)
+      if (m) {
+        const [, ver, docId] = m
+        dsStorybookUrl = `/ds/${ver}/storybook/?path=/docs/${docId}`
+      }
+    }
+    const openHref = isDs ? (dsStorybookUrl || dsPreview || `/p/${protoId}/`) : (c.screenId ? `/p/${protoId}/${c.screenId}` : `/p/${protoId}/`)
+    return (
+      <div
+        key={key}
+        style={{
+          background: 'var(--dash-surface)',
+          border: '1px solid ' + (isExiting ? '#16a34a' : 'var(--dash-border)'),
+          borderRadius: 12, overflow: 'hidden', position: 'relative',
+          transition: 'opacity .4s ease, max-height .5s ease, margin-bottom .5s ease, transform .4s ease',
+          maxHeight: isExiting ? 0 : 6000,
+          marginBottom: isExiting ? 0 : 16,
+          opacity: isExiting ? 0 : 1,
+          transform: isExiting ? 'scale(0.985)' : 'none',
+        }}
+      >
+        {isExiting && (
+          <div style={{
+            position: 'absolute', inset: 0, zIndex: 5, display: 'flex',
+            alignItems: 'center', justifyContent: 'center',
+            background: exiting[key] === 'archived' ? 'rgba(100,116,139,0.12)' : 'rgba(22,163,74,0.12)',
+          }}>
+            <span style={{
+              display: 'inline-flex', alignItems: 'center', gap: 8,
+              background: exiting[key] === 'archived' ? '#64748b' : '#16a34a',
+              color: '#fff', fontWeight: 700, fontSize: 15, padding: '8px 18px', borderRadius: 999,
+              boxShadow: exiting[key] === 'archived' ? '0 6px 16px rgba(100,116,139,0.45)' : '0 6px 16px rgba(22,163,74,0.45)',
+            }}>{exiting[key] === 'archived' ? 'Archived' : 'Approved'}</span>
+          </div>
+        )}
+        <div style={{ padding: '14px 16px 0' }}>
+          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', alignItems: 'center', fontSize: 12, color: 'var(--dash-text-muted)', marginBottom: 8 }}>
+            {!isDs && (
+              <span style={{ fontFamily: 'ui-monospace, Menlo, monospace', fontSize: 11, fontWeight: 700, letterSpacing: '.3px', color: 'var(--dash-text)', background: 'var(--dash-surface-alt)', borderRadius: 5, padding: '2px 7px' }}>
+                {protoId}
+              </span>
+            )}
+            <span style={{ fontWeight: 600, color: 'var(--dash-text)' }}>{protoName}</span>
+            {isDs && (
+              <span style={{ fontSize: 10, fontWeight: 700, letterSpacing: '.4px', textTransform: 'uppercase', color: '#fff', background: '#7c3aed', borderRadius: 5, padding: '2px 6px' }}>
+                Design system
+              </span>
+            )}
+            <span style={{ fontFamily: 'ui-monospace, Menlo, monospace', fontSize: 11, background: 'var(--dash-surface-alt)', borderRadius: 5, padding: '2px 7px' }}>
+              {isDs ? (c.storyName || (c.storyId ? c.storyId.split('--').pop()?.replace(/-/g, ' ') : 'Component')) : (c.screenId || 'Flow-level')}
+            </span>
+            <span style={{ fontFamily: 'ui-monospace, Menlo, monospace', fontSize: 11, fontWeight: 700, letterSpacing: '.5px' }}>
+              {qCommentCode(c.id)}
+            </span>
+            {(c.anchor?.label || c.anchor?.selector) && (
+              <span
+                title={c.anchor.selector || ''}
+                style={{ display: 'inline-flex', alignItems: 'center', gap: 4, maxWidth: 220, fontSize: 11, color: 'var(--dash-text-muted)', border: '1px solid var(--dash-border)', borderRadius: 999, padding: '1px 8px' }}
+              >
+                <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" style={{ flexShrink: 0 }}>
+                  <path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" />
+                  <circle cx="12" cy="10" r="3" />
+                </svg>
+                <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{c.anchor.label || c.anchor.selector}</span>
+              </span>
+            )}
+            {c.createdAt && (
+              <span title={qFmtDate(c.createdAt)}>· {qRelAge(c.createdAt)}</span>
+            )}
+          </div>
+        </div>
+        {supersededBy && (
+          <div style={{
+            margin: '0 16px 12px', padding: '8px 12px',
+            display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap',
+            background: '#fef3c7', border: '1px solid #f59e0b', borderRadius: 8,
+            fontSize: 12.5, lineHeight: 1.4, color: '#92400e',
+          }}>
+            <span style={{ fontSize: 14 }}>⚠️</span>
+            <span>
+              <strong>Newer version exists.</strong> {protoId} was superseded by{' '}
+              <a href={`/p/${supersededBy}/`} target="_blank" rel="noreferrer" style={{ color: '#92400e', fontWeight: 700 }}>{supersededBy}</a>
+              {' '}— this comment may be stale. Consider <strong>Archive</strong> rather than Approve.
+            </span>
+          </div>
+        )}
+        <div style={{ fontSize: 14, lineHeight: 1.5, padding: '0 16px 12px', whiteSpace: 'pre-wrap', color: 'var(--dash-text)' }}>
+          {linkifyComment(c.text || '')}
+        </div>
+        {Array.isArray(c.attachments) && c.attachments.length > 0 && (
+          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, padding: '0 16px 12px' }}>
+            {c.attachments.map((aid) => (
+              <a
+                key={aid}
+                href={`${commentsBase()}/__wf-comments/${protoId}/attachments/${encodeURIComponent(aid)}`}
+                target="_blank"
+                rel="noreferrer"
+                onClick={(e) => {
+                  // Shared harness lightbox when present; plain link fallback.
+                  const lb = (window as unknown as { bfLightbox?: { open: (u: string, a?: string, caption?: string) => void } }).bfLightbox
+                  if (!lb) return
+                  e.preventDefault()
+                  lb.open(e.currentTarget.href, 'Comment attachment', c.text || '')
+                }}>
+                <img
+                  src={`${commentsBase()}/__wf-comments/${protoId}/attachments/${encodeURIComponent(aid)}`}
+                  loading="lazy"
+                  alt="Comment attachment"
+                  style={{ display: 'block', maxHeight: 120, maxWidth: '100%', borderRadius: 6, border: '1px solid var(--dash-border)' }}
+                />
+              </a>
+            ))}
+          </div>
+        )}
+        <div style={{ fontSize: 12, color: 'var(--dash-text-muted)', padding: '0 16px 14px' }}>
+          {(c.author ? c.author + ' commented · ' : '')}
+          {kind === 'designed'
+            ? 'addressed by agent'
+            : kind === 'pending-review'
+            ? 'manager comment — awaiting your approval'
+            : 'flagged for a human'}
+          {c.statusBy ? ' · ' + c.statusBy : ''}
+          {c.statusAt ? ' · ' + qFmtDate(c.statusAt) : ''}
+        </div>
+        {c.designerNote ? (
+          <div style={{
+            margin: '0 16px 14px', padding: '10px 12px',
+            borderLeft: '3px solid var(--dash-border-strong)', borderRadius: '0 6px 6px 0',
+            background: 'var(--dash-surface-alt)', fontSize: 13, lineHeight: 1.5,
+            color: 'var(--dash-text)', whiteSpace: 'pre-wrap',
+          }}>
+            <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--dash-text-muted)', marginBottom: 4 }}>
+              ↳ Designer context{c.designerNoteBy ? ' · ' + c.designerNoteBy : ''}
+            </div>
+            {linkifyComment(c.designerNote)}
+          </div>
+        ) : null}
+        {c.agentResponse ? (
+          <div style={{
+            margin: '0 16px 14px', padding: '10px 12px',
+            borderLeft: '3px solid #16a34a', borderRadius: '0 6px 6px 0',
+            background: 'var(--dash-surface-alt)', fontSize: 13, lineHeight: 1.5,
+            color: 'var(--dash-text)', whiteSpace: 'pre-wrap',
+          }}>
+            <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--dash-text-muted)', marginBottom: 4 }}>
+              ↳ Agent response{c.agentResponseBy ? ' · ' + c.agentResponseBy : ''}
+            </div>
+            {linkifyComment(c.agentResponse)}
+          </div>
+        ) : null}
+        {replies.length > 0 && (
+          <div style={{
+            margin: '0 16px 14px', paddingLeft: 10,
+            borderLeft: '2px solid var(--dash-border)',
+            display: 'flex', flexDirection: 'column', gap: 8,
+          }}>
+            {replies.map((r) => (
+              <div key={r.id} style={{ fontSize: 13, lineHeight: 1.5, color: 'var(--dash-text)' }}>
+                <div style={{ whiteSpace: 'pre-wrap' }}>{linkifyComment(r.text || '')}</div>
+                <div style={{ fontSize: 11, color: 'var(--dash-text-muted)', marginTop: 2 }}>
+                  {(r.author ? r.author + ' · ' : '') + qFmtDate(r.createdAt)}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+        {/* Preview/links use SAME-ORIGIN relative paths (not commentsBase):
+            on localhost they render the local prototype page; on the deployed
+            dashboard they hit the authenticated same-origin worker. Using the
+            prod base from localhost loaded a cross-origin iframe whose cookie
+            is blocked as third-party → the sign-in gate showed instead. */}
+        {isDs
+          ? (dsPreview
+              ? <ScreenPreview url={dsPreview} />
+              : <a href={openHref} target="_blank" rel="noreferrer" style={{ display: 'block', padding: '16px', fontSize: 13, color: 'var(--dash-text-muted)', textAlign: 'center', borderTop: '1px solid var(--dash-border)', textDecoration: 'none' }}>Design-system component comment. Open in Storybook ↗</a>)
+          : c.screenId
+          ? <ScreenPreview url={`/p/${protoId}/${c.screenId}`} flowHref={`/p/${protoId}/`} viewport={c.viewport} />
+          : <a href={`/p/${protoId}/`} target="_blank" rel="noreferrer" style={{ display: 'block', padding: '16px', fontSize: 13, color: 'var(--dash-text-muted)', textAlign: 'center', borderTop: '1px solid var(--dash-border)', textDecoration: 'none' }}>Flow-level comment — not tied to a screen. Open the {protoId} flow ↗</a>}
+        <div style={{ display: 'flex', gap: 8, padding: '12px 16px', alignItems: 'center' }}>
+          {kind === 'pending-review' ? (
+            // Approving a manager comment isn't terminal — it promotes the
+            // comment to 'open' so the agentic loop picks it up, optionally
+            // with the designer's interpretation attached.
+            <button
+              type="button"
+              onClick={() => {
+                setApproveNote('')
+                setApproveFor(approveFor === key ? null : key)
+              }}
+              aria-expanded={approveFor === key}
+              style={{ fontFamily: 'inherit', fontSize: 13, fontWeight: 600, padding: '8px 14px', borderRadius: 7, border: '1px solid #16a34a', background: approveFor === key ? '#15803d' : '#16a34a', color: '#fff', cursor: 'pointer' }}
+            >
+              ✓ Approve for agent…
+            </button>
+          ) : (
+          <button
+            type="button"
+            onClick={() => approve(protoId, c)}
+            disabled={isExiting}
+            style={{ fontFamily: 'inherit', fontSize: 13, fontWeight: 600, padding: '8px 14px', borderRadius: 7, border: '1px solid #16a34a', background: '#16a34a', color: '#fff', cursor: isExiting ? 'default' : 'pointer', opacity: isExiting ? 0.7 : 1 }}
+          >
+            ✓ Approve
+          </button>
+          )}
+          <a
+            href={openHref}
+            target="_blank"
+            rel="noreferrer"
+            style={{ fontSize: 12, color: 'var(--dash-text-muted)' }}
+          >
+            {isDs ? 'Open in Storybook ↗' : (c.screenId ? 'Open full screen ↗' : 'Open flow ↗')}
+          </a>
+          <span style={{ flex: 1 }} />
+          <button
+            type="button"
+            onClick={() => archive(protoId, c)}
+            disabled={isExiting}
+            title="Clears this from your queue without approving. The prototype is unchanged — use this when the comment no longer matters (e.g. it sits on a superseded flow)."
+            style={{ fontFamily: 'inherit', fontSize: 13, fontWeight: 500, padding: '8px 14px', borderRadius: 7, border: 'none', background: 'transparent', color: 'var(--dash-text-muted)', cursor: isExiting ? 'default' : 'pointer' }}
+          >
+            Archive
+          </button>
+          {kind !== 'pending-review' && (
+          <button
+            type="button"
+            onClick={() => {
+              setReopenNote('')
+              setReopenFor(reopenFor === key ? null : key)
+            }}
+            aria-expanded={reopenFor === key}
+            style={{ fontFamily: 'inherit', fontSize: 13, fontWeight: 500, padding: '8px 14px', borderRadius: 7, border: '1px solid var(--dash-border-strong)', background: reopenFor === key ? 'var(--dash-surface-alt, var(--dash-surface))' : 'var(--dash-surface)', color: 'var(--dash-text)', cursor: 'pointer' }}
+          >
+            Reopen…
+          </button>
+          )}
+        </div>
+        {approveFor === key && (
+          <div style={{ padding: '0 16px 14px', display: 'flex', flexDirection: 'column', gap: 8 }}>
+            <textarea
+              autoFocus
+              value={approveNote}
+              onChange={(e) => setApproveNote(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) { e.preventDefault(); approveForAgent(protoId, c, approveNote.trim()) }
+                if (e.key === 'Escape') { e.preventDefault(); setApproveFor(null) }
+              }}
+              placeholder="Add context for the agent (optional) — your interpretation of what should be done with this feedback. Leave empty to approve as-is."
+              rows={3}
+              style={{ width: '100%', boxSizing: 'border-box', fontFamily: 'inherit', fontSize: 13, lineHeight: 1.5, padding: '8px 10px', borderRadius: 7, border: '1px solid var(--dash-border-strong)', background: 'var(--dash-surface)', color: 'var(--dash-text)', resize: 'vertical' }}
+            />
+            <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end', alignItems: 'center' }}>
+              <button
+                type="button"
+                onClick={() => { setApproveFor(null); setApproveNote('') }}
+                style={{ fontFamily: 'inherit', fontSize: 13, fontWeight: 500, padding: '8px 14px', borderRadius: 7, border: '1px solid var(--dash-border)', background: 'transparent', color: 'var(--dash-text-muted)', cursor: 'pointer' }}
+              >
+                Cancel
+              </button>
+              <button
+                type="button"
+                onClick={() => approveForAgent(protoId, c, approveNote.trim())}
+                style={{ fontFamily: 'inherit', fontSize: 13, fontWeight: 600, padding: '8px 14px', borderRadius: 7, border: '1px solid #16a34a', background: '#16a34a', color: '#fff', cursor: 'pointer' }}
+              >
+                {approveNote.trim() ? 'Approve with context' : 'Approve as-is'}
+              </button>
+            </div>
+          </div>
+        )}
+        {reopenFor === key && (
+          <div style={{ padding: '0 16px 14px', display: 'flex', flexDirection: 'column', gap: 8 }}>
+            <textarea
+              autoFocus
+              value={reopenNote}
+              onChange={(e) => setReopenNote(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) { e.preventDefault(); reopenWithNote(protoId, c, reopenNote.trim()) }
+                if (e.key === 'Escape') { e.preventDefault(); setReopenFor(null) }
+              }}
+              onPaste={(e) => {
+                const files = Array.from(e.clipboardData?.items || [])
+                  .filter((it) => it.kind === 'file' && it.type.startsWith('image/'))
+                  .map((it) => it.getAsFile())
+                  .filter((f): f is File => !!f)
+                if (!files.length) return
+                e.preventDefault()
+                stageReopenImages(files)
+              }}
+              placeholder="What's still off? This is added as a reply on the comment (the agent sees the original + implementation for context). Leave empty to just reopen."
+              rows={3}
+              style={{ width: '100%', boxSizing: 'border-box', fontFamily: 'inherit', fontSize: 13, lineHeight: 1.5, padding: '8px 10px', borderRadius: 7, border: '1px solid var(--dash-border-strong)', background: 'var(--dash-surface)', color: 'var(--dash-text)', resize: 'vertical' }}
+            />
+            {reopenAtts.length > 0 && (
+              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
+                {reopenAtts.map((att, i) => (
+                  <span key={att.url} style={{ position: 'relative', display: 'inline-block' }}>
+                    <img src={att.url} alt="Staged attachment" style={{ display: 'block', maxHeight: 72, borderRadius: 6, border: '1px solid var(--dash-border)' }} />
+                    <button
+                      type="button"
+                      aria-label="Remove image"
+                      onClick={() => {
+                        URL.revokeObjectURL(att.url)
+                        setReopenAtts(reopenAtts.filter((_, j) => j !== i))
+                      }}
+                      style={{ position: 'absolute', top: -6, right: -6, width: 18, height: 18, borderRadius: 999, border: '1px solid var(--dash-border-strong)', background: 'var(--dash-surface)', color: 'var(--dash-text)', fontSize: 11, lineHeight: 1, cursor: 'pointer', padding: 0 }}
+                    >
+                      ×
+                    </button>
+                  </span>
+                ))}
+              </div>
+            )}
+            <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end', alignItems: 'center' }}>
+              <label style={{ marginRight: 'auto', fontSize: 12, color: 'var(--dash-text-muted)', cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 5 }}>
+                <input
+                  type="file"
+                  accept="image/*"
+                  multiple
+                  style={{ display: 'none' }}
+                  onChange={(e) => {
+                    const files = Array.from(e.currentTarget.files || [])
+                    e.currentTarget.value = ''
+                    stageReopenImages(files)
+                  }}
+                />
+                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>
+                Attach image (or paste)
+              </label>
+              <button
+                type="button"
+                onClick={() => {
+                  setReopenFor(null); setReopenNote('')
+                  reopenAtts.forEach((a) => URL.revokeObjectURL(a.url)); setReopenAtts([])
+                }}
+                style={{ fontFamily: 'inherit', fontSize: 13, fontWeight: 500, padding: '8px 14px', borderRadius: 7, border: '1px solid var(--dash-border)', background: 'transparent', color: 'var(--dash-text-muted)', cursor: 'pointer' }}
+              >
+                Cancel
+              </button>
+              <button
+                type="button"
+                onClick={() => reopenWithNote(protoId, c, reopenNote.trim())}
+                style={{ fontFamily: 'inherit', fontSize: 13, fontWeight: 600, padding: '8px 14px', borderRadius: 7, border: '1px solid var(--dash-border-strong)', background: 'var(--dash-text)', color: 'var(--dash-bg, #fff)', cursor: 'pointer' }}
+              >
+                {reopenNote.trim() || reopenAtts.length ? 'Reopen with note' : 'Reopen'}
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+    )
+  }
+
+  return (
+    <div>
+      {loading && (
+        <div className={styles.loadingRow}>
+          <span className={styles.spinner} role="status" aria-label="Loading" />
+          Loading the Agent Designs queue…
+        </div>
+      )}
+      {!loading && designed.length === 0 && needsHuman.length === 0 && pendingReview.length === 0 && (
+        <div className={styles.emptyState}>
+          <Icon name="messageSquare" size={28} className={styles.emptyStateIcon} />
+          <p style={{ margin: 0 }}>Queue clear — nothing is waiting for review.</p>
+          <p style={{ margin: 0, maxWidth: 460 }}>
+            Tip: every comment has a 4-letter code. To send an agent to work on
+            one, prompt it with that code — e.g.{' '}
+            <code style={{
+              fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',
+              background: 'var(--dash-surface)',
+              border: '1px solid var(--dash-border)',
+              borderRadius: 4, padding: '1px 5px', fontSize: 12,
+            }}>Please fix QSAE for me</code>{' '}
+            when running your agent locally. Addressed comments show up here for review.
+          </p>
+        </div>
+      )}
+      {pendingReview.length > 0 && (
+        <>
+          <h2 style={{ fontSize: 14, fontWeight: 600, margin: '0 0 12px' }}>
+            Manager comments awaiting approval · {pendingReview.length}
+          </h2>
+          {pendingReview.map((row) => card(row, 'pending-review'))}
+        </>
+      )}
+      {designed.length > 0 && (
+        <>
+          <h2 style={{ fontSize: 14, fontWeight: 600, margin: pendingReview.length > 0 ? '24px 0 12px' : '0 0 12px' }}>
+            Designed by agent · {designed.length}
+          </h2>
+          {designed.map((row) => card(row, 'designed'))}
+        </>
+      )}
+      {needsHuman.length > 0 && (
+        <>
+          <h2 style={{ fontSize: 14, fontWeight: 600, margin: '24px 0 12px' }}>
+            Needs a human · {needsHuman.length}
+          </h2>
+          {needsHuman.map((row) => card(row, 'needs-human'))}
+        </>
+      )}
+      {toast && (
+        <div
+          role="status"
+          style={{
+            position: 'fixed', bottom: 24, right: 24, zIndex: 1000,
+            display: 'flex', alignItems: 'center', gap: 10,
+            background: toast.mode === 'archived' ? '#475569' : '#16a34a', color: '#fff', padding: '12px 16px',
+            borderRadius: 10, boxShadow: '0 8px 24px rgba(0,0,0,0.18)',
+            fontSize: 14, fontWeight: 600,
+          }}
+        >
+          <span>
+            {toast.mode === 'archived'
+              ? 'Archived · cleared from queue'
+              : `Approved · ${toast.reviewed} reviewed${toast.left > 0 ? ` · ${toast.left} to go` : ' · queue clear'}`}
+          </span>
+          <button
+            type="button"
+            onClick={undoLast}
+            style={{
+              fontFamily: 'inherit', fontSize: 13, fontWeight: 700,
+              marginLeft: 4, padding: '5px 12px', borderRadius: 7,
+              border: '1px solid rgba(255,255,255,0.7)', background: 'transparent',
+              color: '#fff', cursor: 'pointer',
+            }}
+          >
+            Undo
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}
+
+function DraftsPanel({
+  drafts,
+  canAuthor,
+  onSubmitted,
+  suggestedFId,
+}: {
+  drafts: DraftFeature[] | null
+  canAuthor: boolean
+  onSubmitted: () => void
+  suggestedFId: string
+}) {
+  const [fId, setFId] = useState('')
+  // Prefill with the next free F-ID once the prototype list has loaded
+  // (only if the author hasn't typed their own yet).
+  useEffect(() => {
+    setFId((cur) => (cur ? cur : suggestedFId))
+  }, [suggestedFId])
+  const [name, setName] = useState('')
+  const [briefUrl, setBriefUrl] = useState('')
+  const [spec, setSpec] = useState('')
+  const [busy, setBusy] = useState(false)
+  const [err, setErr] = useState<string | null>(null)
+  const [composing, setComposing] = useState(false)
+
+  const submit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setErr(null)
+    setBusy(true)
+    try {
+      const r = await fetch(`/__draft-features`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({ fId: fId.trim(), name: name.trim(), briefUrl: briefUrl.trim(), spec: spec.trim() }),
+      })
+      const data = await r.json().catch(() => ({}))
+      if (!r.ok) throw new Error(data.error || `Failed (${r.status})`)
+      setFId(''); setName(''); setBriefUrl(''); setSpec('')
+      setComposing(false)
+      onSubmitted()
+    } catch (e2) {
+      setErr(e2 instanceof Error ? e2.message : 'Something went wrong')
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <section className={styles.dsSection}>
+      {canAuthor ? (
+        <button
+          type="button"
+          className={styles.draftSubmit}
+          style={{ marginBottom: 20 }}
+          onClick={() => setComposing(true)}
+        >
+          + New feature spec
+        </button>
+      ) : (
+        <p className={styles.muted}>
+          Draft feature specs are submitted by the spec authors. You can review submitted drafts below.
+        </p>
+      )}
+
+      {composing && (
+        <div className={styles.draftOverlay} role="dialog" aria-modal="true">
+          <form className={styles.draftFull} onSubmit={submit}>
+            <header className={styles.draftFullHead}>
+              <input
+                className={styles.draftFullFid}
+                placeholder="F-ID"
+                value={fId}
+                onChange={(e) => setFId(e.target.value)}
+                maxLength={16}
+              />
+              <input
+                className={styles.draftFullName}
+                placeholder="Feature name"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                required
+              />
+              <div className={styles.draftFullActions}>
+                <button
+                  type="button"
+                  className={styles.draftCancel}
+                  onClick={() => setComposing(false)}
+                >
+                  Cancel
+                </button>
+                <button className={styles.draftSubmit} type="submit" disabled={busy}>
+                  {busy ? 'Submitting…' : 'Submit draft'}
+                </button>
+              </div>
+            </header>
+            <input
+              className={styles.draftInput}
+              placeholder="Brief URL (optional)"
+              value={briefUrl}
+              onChange={(e) => setBriefUrl(e.target.value)}
+            />
+            {err && <p className={styles.error}>{err}</p>}
+            <div className={styles.draftFullEditor}>
+              <RichEditor value={spec} onChange={setSpec} />
+            </div>
+          </form>
+        </div>
+      )}
+
+      {drafts && drafts.length === 0 && (
+        <p className={styles.muted}>No draft features yet.</p>
+      )}
+      {drafts && drafts.length > 0 && (
+        <ul className={styles.dsList}>
+          {drafts.map((d) => (
+            <li key={d.id} className={styles.dsItem}>
+              <div>
+                <span className={styles.dsVersion}>
+                  {d.fId ? `${d.fId} · ` : ''}{d.name}
+                </span>
+                <span className={styles.dsCount}>
+                  {d.author || d.authorEmail}
+                  {d.createdAt ? ` · ${new Date(d.createdAt).toLocaleDateString()}` : ''}
+                </span>
+              </div>
+              <div
+                className={styles.draftSpec}
+                dangerouslySetInnerHTML={{ __html: d.spec }}
+              />
+              {d.briefUrl && (
+                <a className={styles.dsLink} href={d.briefUrl} target="_blank" rel="noreferrer">
+                  Open brief →
+                </a>
+              )}
+            </li>
+          ))}
+        </ul>
+      )}
+    </section>
+  )
+}
+
+export default App