@dfosco/storyboard 0.7.0 → 0.8.1

package/src/internals/canvas/useUndoRedo.js

@@ -1,86 +1,101 @@
 import { useRef, useState, useCallback } from 'react'
 
 const MAX_HISTORY = 100
-const COALESCE_MS = 2000
 
 /**
- * Snapshot-based undo/redo history for canvas widgets.
+ * Per-tab undo/redo history for canvas events.
  *
- * Tracks past/future stacks of widget array clones. The present state
- * is always the live `localWidgets` — this hook only manages history.
+ * Maintains two stacks of event IDs:
+ *   undoStack — ids of user-initiated forward events, newest last.
+ *   redoStack — ids of undo events (the inverse events appended by the
+ *               server's POST /undo), newest last.
  *
- * Edit coalescing: continuous edits to the same widget within COALESCE_MS
- * are merged into one undo step (like Figma).
+ * Workflow:
+ *   • Every user-initiated mutation that succeeds calls `track(eventId)` —
+ *     pushes onto undoStack and clears redoStack.
+ *   • `popUndo()` returns the next id to undo. Caller POSTs /undo and on
+ *     success calls `pushRedo(inverseId)`.
+ *   • `popRedo()` returns the next id to redo. Caller POSTs /redo and on
+ *     success calls `pushUndo(inverseId)` (so the redo is itself undoable).
+ *
+ * This hook holds *no* widget data — undo state lives in the JSONL. The
+ * stacks are per-tab and ephemeral; refreshing the page resets them.
  */
 export default function useUndoRedo() {
-  const pastRef = useRef([])
-  const futureRef = useRef([])
-  const lastActionRef = useRef({ type: null, widgetId: null, time: 0 })
-  // State counter drives canUndo/canRedo re-renders without cloning the stacks
-  const [counts, setCounts] = useState({ past: 0, future: 0 })
+  const undoStackRef = useRef([])
+  const redoStackRef = useRef([])
+  const [counts, setCounts] = useState({ undo: 0, redo: 0 })
+
+  const syncCounts = useCallback(() => {
+    setCounts({ undo: undoStackRef.current.length, redo: redoStackRef.current.length })
+  }, [])
 
-  const snapshot = useCallback((currentWidgets, actionType, widgetId) => {
-    const widgets = currentWidgets ?? []
+  const track = useCallback((eventId) => {
+    if (!eventId || typeof eventId !== 'string') return
+    undoStackRef.current.push(eventId)
+    if (undoStackRef.current.length > MAX_HISTORY) undoStackRef.current.shift()
+    // New mutation invalidates the redo chain
+    redoStackRef.current = []
+    syncCounts()
+  }, [syncCounts])
 
-    // Edit coalescing — skip snapshot if same edit target within timeout
-    if (actionType === 'edit' && widgetId) {
-      const last = lastActionRef.current
-      const now = Date.now()
-      if (
-        last.type === 'edit' &&
-        last.widgetId === widgetId &&
-        now - last.time < COALESCE_MS
-      ) {
-        lastActionRef.current = { type: 'edit', widgetId, time: now }
-        return
+  const trackMany = useCallback((eventIds) => {
+    if (!Array.isArray(eventIds)) return
+    for (const id of eventIds) {
+      if (id && typeof id === 'string') {
+        undoStackRef.current.push(id)
+        if (undoStackRef.current.length > MAX_HISTORY) undoStackRef.current.shift()
       }
     }
+    redoStackRef.current = []
+    syncCounts()
+  }, [syncCounts])
 
-    pastRef.current.push(structuredClone(widgets))
-    if (pastRef.current.length > MAX_HISTORY) pastRef.current.shift()
-    futureRef.current = []
-    lastActionRef.current = {
-      type: actionType,
-      widgetId: widgetId || null,
-      time: Date.now(),
-    }
-    setCounts({ past: pastRef.current.length, future: 0 })
-  }, [])
+  const popUndo = useCallback(() => {
+    const id = undoStackRef.current.pop()
+    syncCounts()
+    return id ?? null
+  }, [syncCounts])
 
-  const undo = useCallback((currentWidgets) => {
-    if (pastRef.current.length === 0) return null
-    futureRef.current.push(structuredClone(currentWidgets))
-    const previous = pastRef.current.pop()
-    lastActionRef.current = { type: 'undo', widgetId: null, time: Date.now() }
-    setCounts({ past: pastRef.current.length, future: futureRef.current.length })
-    return previous
-  }, [])
+  const popRedo = useCallback(() => {
+    const id = redoStackRef.current.pop()
+    syncCounts()
+    return id ?? null
+  }, [syncCounts])
 
-  const redo = useCallback((currentWidgets) => {
-    if (futureRef.current.length === 0) return null
-    pastRef.current.push(structuredClone(currentWidgets))
-    const next = futureRef.current.pop()
-    lastActionRef.current = { type: 'redo', widgetId: null, time: Date.now() }
-    setCounts({ past: pastRef.current.length, future: futureRef.current.length })
-    return next
-  }, [])
+  const pushRedo = useCallback((eventId) => {
+    if (!eventId || typeof eventId !== 'string') return
+    redoStackRef.current.push(eventId)
+    if (redoStackRef.current.length > MAX_HISTORY) redoStackRef.current.shift()
+    syncCounts()
+  }, [syncCounts])
+
+  const pushUndo = useCallback((eventId) => {
+    if (!eventId || typeof eventId !== 'string') return
+    undoStackRef.current.push(eventId)
+    if (undoStackRef.current.length > MAX_HISTORY) undoStackRef.current.shift()
+    syncCounts()
+  }, [syncCounts])
 
   const reset = useCallback(() => {
-    pastRef.current = []
-    futureRef.current = []
-    lastActionRef.current = { type: null, widgetId: null, time: 0 }
+    undoStackRef.current = []
+    redoStackRef.current = []
     setCounts((prev) => {
-      if (prev.past === 0 && prev.future === 0) return prev
-      return { past: 0, future: 0 }
+      if (prev.undo === 0 && prev.redo === 0) return prev
+      return { undo: 0, redo: 0 }
     })
   }, [])
 
   return {
-    snapshot,
-    undo,
-    redo,
+    track,
+    trackMany,
+    popUndo,
+    popRedo,
+    pushRedo,
+    pushUndo,
     reset,
-    canUndo: counts.past > 0,
-    canRedo: counts.future > 0,
+    canUndo: counts.undo > 0,
+    canRedo: counts.redo > 0,
   }
 }
+

package/src/internals/canvas/useUndoRedo.test.js

@@ -1,231 +1,99 @@
 import { renderHook, act } from '@testing-library/react'
+import { describe, it, expect } from 'vitest'
 import useUndoRedo from './useUndoRedo.js'
 
-describe('useUndoRedo', () => {
+describe('useUndoRedo (canvas)', () => {
   it('starts with canUndo and canRedo as false', () => {
     const { result } = renderHook(() => useUndoRedo())
     expect(result.current.canUndo).toBe(false)
     expect(result.current.canRedo).toBe(false)
   })
 
-  it('can undo after a snapshot', () => {
+  it('track pushes an event id and enables undo', () => {
     const { result } = renderHook(() => useUndoRedo())
-    const widgets = [{ id: '1', type: 'sticky-note', props: { text: 'a' }, position: { x: 0, y: 0 } }]
-
-    act(() => result.current.snapshot(widgets, 'add'))
-
+    act(() => result.current.track('evt_a'))
     expect(result.current.canUndo).toBe(true)
     expect(result.current.canRedo).toBe(false)
   })
 
-  it('undo returns the previous state and enables redo', () => {
+  it('popUndo returns the most recent tracked id; pushRedo enables redo', () => {
     const { result } = renderHook(() => useUndoRedo())
-    const before = [{ id: '1', props: { text: 'a' } }]
-    const after = [{ id: '1', props: { text: 'b' } }]
+    act(() => result.current.track('evt_a'))
+    act(() => result.current.track('evt_b'))
 
-    act(() => result.current.snapshot(before, 'edit', '1'))
+    let popped
+    act(() => { popped = result.current.popUndo() })
 
-    let restored
-    act(() => { restored = result.current.undo(after) })
+    expect(popped).toBe('evt_b')
+    expect(result.current.canUndo).toBe(true)
+    expect(result.current.canRedo).toBe(false)
 
-    expect(restored).toEqual(before)
-    expect(result.current.canUndo).toBe(false)
+    act(() => result.current.pushRedo('evt_b_inv'))
     expect(result.current.canRedo).toBe(true)
   })
 
-  it('redo returns the next state', () => {
+  it('popRedo returns the most recent redo id; pushUndo restores undo availability', () => {
     const { result } = renderHook(() => useUndoRedo())
-    const before = [{ id: '1', props: { text: 'a' } }]
-    const after = [{ id: '1', props: { text: 'b' } }]
+    act(() => result.current.track('evt_a'))
+    act(() => { result.current.popUndo() })
+    act(() => result.current.pushRedo('evt_a_inv'))
 
-    act(() => result.current.snapshot(before, 'edit', '1'))
-    act(() => { result.current.undo(after) })
+    expect(result.current.canRedo).toBe(true)
 
-    let redone
-    act(() => { redone = result.current.redo(before) })
+    let popped
+    act(() => { popped = result.current.popRedo() })
+    expect(popped).toBe('evt_a_inv')
+    expect(result.current.canRedo).toBe(false)
 
-    expect(redone).toEqual(after)
+    act(() => result.current.pushUndo('evt_a_inv_inv'))
     expect(result.current.canUndo).toBe(true)
-    expect(result.current.canRedo).toBe(false)
   })
 
-  it('new mutation after undo clears the redo chain', () => {
+  it('new track call after undo clears the redo stack', () => {
     const { result } = renderHook(() => useUndoRedo())
-    const s0 = [{ id: '1' }]
-    const s1 = [{ id: '1' }, { id: '2' }]
-    const s2 = [{ id: '1' }, { id: '3' }] // eslint-disable-line no-unused-vars
-
-    act(() => result.current.snapshot(s0, 'add'))
-    act(() => result.current.undo(s1))
+    act(() => result.current.track('evt_a'))
+    act(() => { result.current.popUndo() })
+    act(() => result.current.pushRedo('evt_a_inv'))
     expect(result.current.canRedo).toBe(true)
 
-    // New mutation breaks redo
-    act(() => result.current.snapshot(s0, 'add'))
+    act(() => result.current.track('evt_b'))
     expect(result.current.canRedo).toBe(false)
     expect(result.current.canUndo).toBe(true)
   })
 
-  it('supports multi-step undo-redo-undo chains', () => {
+  it('trackMany pushes multiple ids and clears redo', () => {
     const { result } = renderHook(() => useUndoRedo())
-    const s0 = [{ id: '1' }]
-    const s1 = [{ id: '1' }, { id: '2' }]
-    const s2 = [{ id: '1' }, { id: '2' }, { id: '3' }]
-    const s3 = [{ id: '1' }, { id: '2' }, { id: '3' }, { id: '4' }]
-
-    // Build history: s0 → s1 → s2 → s3
-    act(() => result.current.snapshot(s0, 'add'))
-    act(() => result.current.snapshot(s1, 'add'))
-    act(() => result.current.snapshot(s2, 'add'))
-
-    // present = s3, past = [s0, s1, s2]
-    // Undo to s2
-    let r
-    act(() => { r = result.current.undo(s3) })
-    expect(r).toEqual(s2)
-
-    // Undo to s1
-    act(() => { r = result.current.undo(s2) })
-    expect(r).toEqual(s1)
-
-    // Redo to s2
-    act(() => { r = result.current.redo(s1) })
-    expect(r).toEqual(s2)
-
-    // Redo to s3
-    act(() => { r = result.current.redo(s2) })
-    expect(r).toEqual(s3)
-
-    // Undo to s2 again
-    act(() => { r = result.current.undo(s3) })
-    expect(r).toEqual(s2)
-
-    // Undo to s1
-    act(() => { r = result.current.undo(s2) })
-    expect(r).toEqual(s1)
-
-    // Undo to s0
-    act(() => { r = result.current.undo(s1) })
-    expect(r).toEqual(s0)
-
-    // Can't undo further
-    expect(result.current.canUndo).toBe(false)
-    act(() => { r = result.current.undo(s0) })
-    expect(r).toBeNull()
-  })
-
-  it('coalesces edits to the same widget within timeout', () => {
-    const { result } = renderHook(() => useUndoRedo())
-    const s0 = [{ id: '1', props: { text: '' } }]
-
-    // First edit — creates snapshot
-    act(() => result.current.snapshot(s0, 'edit', '1'))
+    act(() => result.current.trackMany(['evt_a', 'evt_b', 'evt_c']))
     expect(result.current.canUndo).toBe(true)
-
-    // Second edit to same widget within 2s — coalesced, no new snapshot
-    act(() => result.current.snapshot(s0, 'edit', '1'))
-    // Still only one entry in past
-    let r
-    act(() => { r = result.current.undo([{ id: '1', props: { text: 'abc' } }]) })
-    expect(r).toEqual(s0)
-    // No more undo after that
-    expect(result.current.canUndo).toBe(false)
+    let popped
+    act(() => { popped = result.current.popUndo() })
+    expect(popped).toBe('evt_c')
   })
 
-  it('does NOT coalesce edits to different widgets', () => {
+  it('ignores empty / non-string ids', () => {
     const { result } = renderHook(() => useUndoRedo())
-    const s0 = [{ id: '1' }, { id: '2' }]
-    const s1 = [{ id: '1', props: { text: 'a' } }, { id: '2' }]
-
-    act(() => result.current.snapshot(s0, 'edit', '1'))
-    act(() => result.current.snapshot(s1, 'edit', '2'))
-
-    // Two entries in past
-    expect(result.current.canUndo).toBe(true)
-    act(() => { result.current.undo([]) })
-    expect(result.current.canUndo).toBe(true)
-    act(() => { result.current.undo([]) })
+    act(() => result.current.track(null))
+    act(() => result.current.track(undefined))
+    act(() => result.current.track(''))
+    act(() => result.current.track(42))
     expect(result.current.canUndo).toBe(false)
   })
 
-  it('does NOT coalesce edit after a different action type', () => {
+  it('reset clears both stacks', () => {
     const { result } = renderHook(() => useUndoRedo())
-    const s0 = [{ id: '1' }]
-    const s1 = [{ id: '1' }, { id: '2' }]
-
-    act(() => result.current.snapshot(s0, 'edit', '1'))
-    act(() => result.current.snapshot(s1, 'add'))
-    act(() => result.current.snapshot(s1, 'edit', '1'))
-
-    // Three entries in past (edit + add + edit — not coalesced because add broke the sequence)
-    act(() => { result.current.undo([]) })
-    act(() => { result.current.undo([]) })
-    act(() => { result.current.undo([]) })
-    expect(result.current.canUndo).toBe(false)
-  })
-
-  it('reset clears all history', () => {
-    const { result } = renderHook(() => useUndoRedo())
-    act(() => result.current.snapshot([{ id: '1' }], 'add'))
-    act(() => result.current.snapshot([{ id: '1' }, { id: '2' }], 'add'))
-    expect(result.current.canUndo).toBe(true)
+    act(() => result.current.track('evt_a'))
+    act(() => { result.current.popUndo() })
+    act(() => result.current.pushRedo('evt_a_inv'))
 
     act(() => result.current.reset())
     expect(result.current.canUndo).toBe(false)
     expect(result.current.canRedo).toBe(false)
   })
 
-  it('undo returns null when history is empty', () => {
-    const { result } = renderHook(() => useUndoRedo())
-    let r
-    act(() => { r = result.current.undo([]) })
-    expect(r).toBeNull()
-  })
-
-  it('redo returns null when future is empty', () => {
-    const { result } = renderHook(() => useUndoRedo())
-    let r
-    act(() => { r = result.current.redo([]) })
-    expect(r).toBeNull()
-  })
-
-  it('snapshots are deep clones (mutations do not leak)', () => {
-    const { result } = renderHook(() => useUndoRedo())
-    const widgets = [{ id: '1', props: { text: 'original' } }]
-
-    act(() => result.current.snapshot(widgets, 'add'))
-
-    // Mutate the original array
-    widgets[0].props.text = 'mutated'
-
-    let restored
-    act(() => { restored = result.current.undo(widgets) })
-    expect(restored[0].props.text).toBe('original')
-  })
-
-  it('caps history at 100 entries', () => {
+  it('popUndo on empty stack returns null', () => {
     const { result } = renderHook(() => useUndoRedo())
-
-    for (let i = 0; i < 110; i++) {
-      act(() => result.current.snapshot([{ id: String(i) }], 'add'))
-    }
-
-    // Should be capped at 100 — undo 100 times, then can't undo further
-    let count = 0
-    let r = true
-    while (r !== null) {
-      act(() => { r = result.current.undo([]) })
-      if (r !== null) count++
-    }
-    expect(count).toBe(100)
-  })
-
-  it('snapshots null widgets as empty array (first widget on new canvas)', () => {
-    const { result } = renderHook(() => useUndoRedo())
-    act(() => result.current.snapshot(null, 'add'))
-    expect(result.current.canUndo).toBe(true)
-
-    let restored
-    act(() => { restored = result.current.undo([{ id: '1' }]) })
-    expect(restored).toEqual([])
+    let popped
+    act(() => { popped = result.current.popUndo() })
+    expect(popped).toBeNull()
   })
 })

package/src/internals/canvas/widgets/ExpandedPaneTopBar.jsx

@@ -13,7 +13,7 @@
  *      Combined with `getState` for toggle resolution and `onAction` for dispatch.
  */
 import { ScreenNormalIcon } from '@primer/octicons-react'
-import { Tooltip } from '@primer/react'
+import Tooltip from '../../Tooltip.jsx'
 import { ICON_REGISTRY } from './widgetIcons.jsx'
 import { getWidgetMeta } from './widgetConfig.js'
 import Icon from '../../Icon.jsx'

package/src/internals/canvas/widgets/FrozenTerminalOverlay.jsx

@@ -48,32 +48,41 @@ export default function FrozenTerminalOverlay({ widgetId, onActivate }) {
 
     async function fetchSnapshot() {
       const baseUrl = getBaseUrl()
-      const urls = [
-        `${baseUrl}_storyboard/canvas/terminal-snapshot/${widgetId}`,
-        `${baseUrl}_storyboard/terminal-snapshots/${widgetId}.snapshot.json`,
-      ]
-
-      for (const url of urls) {
-        try {
-          const res = await fetch(url)
-          if (!res.ok) continue
+      // Try the dev-server REST endpoint first, then fall back to the static
+      // consolidated index (production builds / no server).
+      const restUrl = `${baseUrl}_storyboard/canvas/terminal-snapshot/${widgetId}`
+      const indexUrl = `${baseUrl}_storyboard/terminal-snapshots/agents.snapshot.json`
+
+      try {
+        const res = await fetch(restUrl)
+        if (res.ok) {
           const data = await res.json()
           if (cancelled) return
           const text = data.paneContent || data.content || data.output || ''
-          if (!text) continue
-
-          const converter = await getConverter()
-          if (cancelled) return
-          if (converter) {
-            setHtml(converter.toHtml(text))
-          } else {
-            setPlainText(stripAnsi(text))
+          if (text) {
+            const converter = await getConverter()
+            if (cancelled) return
+            if (converter) setHtml(converter.toHtml(text))
+            else setPlainText(stripAnsi(text))
+            return
           }
-          return
-        } catch {
-          continue
         }
-      }
+      } catch { /* fall through to static index */ }
+
+      try {
+        const res = await fetch(indexUrl)
+        if (!res.ok) return
+        const data = await res.json()
+        if (cancelled) return
+        const entry = data?.agents?.[widgetId]
+        if (!entry) return
+        const text = entry.paneContent || entry.content || entry.output || ''
+        if (!text) return
+        const converter = await getConverter()
+        if (cancelled) return
+        if (converter) setHtml(converter.toHtml(text))
+        else setPlainText(stripAnsi(text))
+      } catch { /* empty */ }
     }
 
     fetchSnapshot()

package/src/internals/canvas/widgets/ImageWidget.jsx

@@ -137,7 +137,10 @@ const ImageWidget = forwardRef(function ImageWidget({ id, props, onUpdate, resiz
             const blobUrl = URL.createObjectURL(blob)
             const a = document.createElement('a')
             a.href = blobUrl
-            a.download = src.replace(/^~/, '')
+            // Strip optional drafts/ directory prefix and leading ~ from the
+            // downloaded filename — the user wants the bare basename.
+            const baseName = src.includes('/') ? src.slice(src.lastIndexOf('/') + 1) : src
+            a.download = baseName.replace(/^~/, '')
             document.body.appendChild(a)
             a.click()
             document.body.removeChild(a)
@@ -156,7 +159,9 @@ const ImageWidget = forwardRef(function ImageWidget({ id, props, onUpdate, resiz
           .catch((err) => console.error('[canvas] Failed to copy image:', err))
       } else if (actionId === 'copy-file-path') {
         if (!src) return
-        navigator.clipboard.writeText(`src/canvas/images/${src}`).catch(() => {})
+        // `src` may include an optional `drafts/` prefix; in both cases the
+        // file lives under assets/canvas/images/.
+        navigator.clipboard.writeText(`assets/canvas/images/${src}`).catch(() => {})
       }
     }
   }), [src, onUpdate])

package/src/internals/canvas/widgets/LinkPreview.jsx

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useMemo, useRef, useState, forwardRef, useImper
 import { remark } from 'remark'
 import remarkGfm from 'remark-gfm'
 import remarkHtml from 'remark-html'
-import { MarkGithubIcon } from '@primer/octicons-react'
+import { GitBranchIcon, GitMergeIcon, GitPullRequestClosedIcon, GitPullRequestDraftIcon, GitPullRequestIcon, MarkGithubIcon } from '@primer/octicons-react'
 import WidgetWrapper from './WidgetWrapper.jsx'
 import ResizeHandle from './ResizeHandle.jsx'
 import { readProp, linkPreviewSchema } from './widgetProps.js'
@@ -119,6 +119,48 @@ function getCommentKindLabel(github) {
   return 'Comment'
 }
 
+const PR_STATE_META = {
+  merged: { label: 'Merged', Icon: GitMergeIcon, className: 'prStateMerged' },
+  closed: { label: 'Closed', Icon: GitPullRequestClosedIcon, className: 'prStateClosed' },
+  draft: { label: 'Draft', Icon: GitPullRequestDraftIcon, className: 'prStateDraft' },
+  open: { label: 'Open', Icon: GitPullRequestIcon, className: 'prStateOpen' },
+}
+
+function PullRequestMeta({ github }) {
+  if (github?.kind !== 'pull_request') return null
+  const stateKey = github?.state || 'open'
+  const stateMeta = PR_STATE_META[stateKey] || PR_STATE_META.open
+  const { Icon: StateIcon } = stateMeta
+  const baseRef = github?.baseRef || null
+  const headRef = github?.headRef || null
+  const additions = typeof github?.additions === 'number' ? github.additions : null
+  const deletions = typeof github?.deletions === 'number' ? github.deletions : null
+  const hasDiff = additions !== null || deletions !== null
+
+  return (
+    <div className={styles.prMeta}>
+      <span className={`${styles.prStateBadge} ${styles[stateMeta.className]}`}>
+        <StateIcon size={12} />
+        {stateMeta.label}
+      </span>
+      {(baseRef || headRef) && (
+        <span className={styles.prBranchRef} title={`${headRef || '?'} → ${baseRef || '?'}`}>
+          <GitBranchIcon size={12} />
+          <span className={styles.prBranchName}>{baseRef || '?'}</span>
+          <span className={styles.prBranchArrow}>←</span>
+          <span className={styles.prBranchName}>{headRef || '?'}</span>
+        </span>
+      )}
+      {hasDiff && (
+        <span className={styles.prDiffStat}>
+          {additions !== null && <span className={styles.prDiffAdd}>+{additions}</span>}
+          {deletions !== null && <span className={styles.prDiffDel}>-{deletions}</span>}
+        </span>
+      )}
+    </div>
+  )
+}
+
 function GitHubIssueCard({ id, url, title, github, width, collapsed, expanded, expandMode, onCloseExpand }) {
   const authors = Array.isArray(github?.authors)
     ? github.authors.filter((a) => typeof a === 'string' && a.trim())
@@ -209,6 +251,7 @@ function GitHubIssueCard({ id, url, title, github, width, collapsed, expanded, e
               {primaryAuthor && createdAgo ? ` opened ${createdAgo}` : createdAgo ? `Opened ${createdAgo}` : ''}
             </span>
           </div>
+          <PullRequestMeta github={github} />
         </div>
 
         {bodyHtml && (
@@ -243,6 +286,7 @@ function GitHubIssueCard({ id, url, title, github, width, collapsed, expanded, e
               )}
               {createdAgo && <span className={styles.expandedBylineText}>{primaryAuthor ? ` opened ${createdAgo}` : `Opened ${createdAgo}`}</span>}
             </div>
+            <PullRequestMeta github={github} />
           </header>
           {bodyHtml && <div className={styles.expandedIssueBody} dangerouslySetInnerHTML={{ __html: bodyHtml }} />}
         </div>