@puredesktop/puredesktop-ui-bridge 1.0.0-beta.1 → 2.1.0

package/src/components/proofing/PagedProofDialog.tsx

@@ -1,453 +1,453 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
-import { Camera } from 'lucide-react'
-import { styled } from 'styled-components'
-import {
-  ScreenAnnotationAgentDialog,
-  type ScreenAnnotationAgentPayload,
-} from '../agent-feedback/index.js'
-import {
-  callAgentRunModel,
-  createAgentSession,
-  startAgentRun,
-} from '../../bridge/agents.js'
-import { Button } from '../common/buttons/Button.js'
-import { CleanButton } from '../common/buttons/CleanButton.js'
-import { InlineBanner } from '../common/feedback/InlineBanner.js'
-import { Modal } from '../common/overlays/Modal.js'
-import { Text } from '../common/typography/Text.js'
-
-export interface PagedProofDialogProps {
-  open: boolean
-  title?: string
-  html: string
-  pageCount?: number
-  status?: string | null
-  busy?: boolean
-  appSlug: string
-  annotationContextLabel?: string
-  annotationContext?: string
-  onClose: () => void
-  onRefresh: () => void
-  onExportPdf: () => void
-  /** Open the screen-annotation camera scoped to DESIGN (print styles). */
-  onAnnotateDesign?: () => void
-}
-
-const MAX_MODEL_STEPS = 3
-
-interface QueuedProofIssue extends ScreenAnnotationAgentPayload {
-  id: string
-}
-
-const StyledBody = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: var(--platform-spacing-sm);
-  min-height: 0;
-`
-
-const StyledToolbar = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--platform-spacing-sm);
-`
-
-const StyledToolbarActions = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  gap: var(--platform-spacing-sm);
-`
-
-const StyledIssueQueue = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--platform-spacing-sm);
-  padding: 8px 10px;
-  border: 1px solid var(--platform-colors-border);
-  border-radius: var(--platform-radius-sm);
-  background: var(--platform-colors-surface);
-`
-
-const StyledIssueList = styled.div`
-  display: flex;
-  min-width: 0;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--platform-spacing-xs);
-`
-
-const StyledIssuePill = styled(CleanButton)`
-  max-width: 24ch;
-  overflow: hidden;
-  border: 1px solid var(--platform-colors-border);
-  border-radius: var(--platform-radius-pill);
-  background: transparent;
-  color: var(--platform-colors-text-secondary);
-  font-size: var(--platform-typography-font-size-xs);
-  padding: 3px 8px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-
-  &:hover {
-    border-color: var(--platform-colors-border-strong);
-    color: var(--platform-colors-text);
-  }
-`
-
-const StyledFrameWrap = styled.div`
-  position: relative;
-  width: 100%;
-  height: min(72vh, 820px);
-  border: 1px solid var(--platform-colors-border);
-  background: white;
-  overflow: hidden;
-`
-
-const StyledFrameLayer = styled.iframe`
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  border: 0;
-  background: white;
-  transition: opacity 280ms ease;
-`
-
-const FRAME_SANDBOX = 'allow-same-origin allow-scripts'
-
-/** Read the vertical scroll of a same-origin (srcDoc) iframe, best-effort. */
-function readFrameScroll(frame: HTMLIFrameElement | null): number {
-  try {
-    return frame?.contentWindow?.scrollY ?? 0
-  } catch {
-    return 0
-  }
-}
-
-interface FrameLayer {
-  id: number
-  html: string
-}
-
-/**
- * Renders preview HTML with a natural cross-fade on update: each render gets its
- * own keyed iframe (never remounted, so its scroll survives), the newest fades
- * in over the previous one carrying the scroll position across, then the older
- * layers are dropped — no blank flash, no scroll reset.
- */
-function CrossfadeFrame({
-  title,
-  html,
-}: {
-  title: string
-  html: string
-}): React.ReactElement {
-  const [layers, setLayers] = useState<FrameLayer[]>(() =>
-    html ? [{ id: 0, html }] : [],
-  )
-  const [topVisible, setTopVisible] = useState(true)
-  const nextId = useRef(1)
-  const targetScroll = useRef(0)
-  const frames = useRef(new Map<number, HTMLIFrameElement>())
-
-  // A new render arrived → capture the current scroll, then add a layer on top.
-  useEffect(() => {
-    const top = layers[layers.length - 1]
-    if (!html || top?.html === html) return
-    targetScroll.current = readFrameScroll(top ? frames.current.get(top.id) ?? null : null)
-    setTopVisible(false)
-    setLayers(prev => [...prev, { id: nextId.current++, html }])
-  }, [html, layers])
-
-  const handleLayerLoad = useCallback(
-    (layer: FrameLayer, isTop: boolean, isOnlyLayer: boolean) => {
-      const win = frames.current.get(layer.id)?.contentWindow ?? null
-      if (!isTop || isOnlyLayer) return
-      const y = targetScroll.current
-      const apply = (): void => {
-        try {
-          win?.scrollTo(0, y)
-        } catch {
-          // ignore
-        }
-      }
-      apply()
-      // Re-pin briefly in case layout settles just after load.
-      let ticks = 0
-      const id = window.setInterval(() => {
-        apply()
-        if ((ticks += 1) >= 8) window.clearInterval(id)
-      }, 50)
-      requestAnimationFrame(() => setTopVisible(true))
-    },
-    [],
-  )
-
-  const handleLayerTransitionEnd = useCallback(
-    (event: React.TransitionEvent, isTop: boolean) => {
-      if (event.propertyName !== 'opacity' || !isTop || !topVisible) return
-      // Keep only the now-visible top layer.
-      setLayers(prev => (prev.length > 1 ? prev.slice(prev.length - 1) : prev))
-    },
-    [topVisible],
-  )
-
-  return (
-    <StyledFrameWrap>
-      {layers.map((layer, index) => {
-        const isTop = index === layers.length - 1
-        const isOnlyLayer = layers.length === 1
-        const hidden = isTop && !isOnlyLayer && !topVisible
-        return (
-          <StyledFrameLayer
-            key={layer.id}
-            ref={el => {
-              if (el) frames.current.set(layer.id, el)
-              else frames.current.delete(layer.id)
-            }}
-            title={isTop ? title : `${title} (previous)`}
-            sandbox={FRAME_SANDBOX}
-            srcDoc={layer.html}
-            style={{
-              opacity: hidden ? 0 : 1,
-              zIndex: index,
-              pointerEvents: hidden ? 'none' : 'auto',
-            }}
-            onLoad={() => handleLayerLoad(layer, isTop, isOnlyLayer)}
-            onTransitionEnd={event => handleLayerTransitionEnd(event, isTop)}
-          />
-        )
-      })}
-    </StyledFrameWrap>
-  )
-}
-
-function annotationMessage({ note, imageDataUrl }: ScreenAnnotationAgentPayload): string {
-  return [
-    'Please use this paged proof annotation to adjust the print/typesetting CSS, then explain what changed and ask the user to preview again.',
-    '',
-    note.trim() ? `Proof note:\n${note.trim()}` : 'No extra proof note.',
-    '',
-    'Annotated proof screenshot:',
-    '',
-    `![Annotated proof screenshot](${imageDataUrl})`,
-  ].join('\n')
-}
-
-function queuedIssuesMessage(issues: QueuedProofIssue[]): string {
-  return [
-    `Please work through these ${issues.length} paged proof annotations as one typesetting pass.`,
-    'Adjust the print/typesetting CSS where appropriate, then explain what changed and ask the user to preview again.',
-    '',
-    ...issues.flatMap((issue, index) => [
-      `Issue ${index + 1}${issue.note.trim() ? `: ${issue.note.trim()}` : ''}`,
-      '',
-      `![Paged proof issue ${index + 1}](${issue.imageDataUrl})`,
-      '',
-    ]),
-  ].join('\n')
-}
-
-function issueLabel(issue: QueuedProofIssue, index: number): string {
-  const note = issue.note.trim()
-  return note ? `${index + 1}. ${note}` : `Issue ${index + 1}`
-}
-
-export function PagedProofDialog({
-  open,
-  title = 'Preview',
-  html,
-  pageCount,
-  status,
-  busy = false,
-  appSlug,
-  annotationContextLabel = 'paged proof',
-  annotationContext,
-  onClose,
-  onRefresh,
-  onExportPdf,
-  onAnnotateDesign,
-}: PagedProofDialogProps): React.ReactElement {
-  const [annotating, setAnnotating] = useState(false)
-  const [issues, setIssues] = useState<QueuedProofIssue[]>([])
-  const [submittingIssues, setSubmittingIssues] = useState(false)
-  const [issueStatus, setIssueStatus] = useState<string | null>(null)
-  const [issueError, setIssueError] = useState<string | null>(null)
-
-  const handleAddIssue = (payload: ScreenAnnotationAgentPayload): void => {
-    setIssues(current => [
-      ...current,
-      {
-        ...payload,
-        id: `proof-issue-${Date.now()}-${Math.random()
-          .toString(36)
-          .slice(2, 8)}`,
-      },
-    ])
-    setIssueStatus('Issue added. Add another, or press Go.')
-    setIssueError(null)
-  }
-
-  const handleRemoveIssue = (id: string): void => {
-    setIssues(current => current.filter(issue => issue.id !== id))
-  }
-
-  const handleGo = async (): Promise<void> => {
-    if (issues.length === 0) return
-    setSubmittingIssues(true)
-    setIssueError(null)
-    setIssueStatus('Sending proof issues…')
-    try {
-      const message = [
-        queuedIssuesMessage(issues),
-        annotationContext
-          ? `\n\nContext (${annotationContextLabel}):\n${annotationContext}`
-          : `\n\nContext: ${annotationContextLabel}.`,
-      ].join('')
-      const record = await createAgentSession({
-        scope: 'app',
-        appSlug,
-        title: `Paged proof issues · ${annotationContextLabel}`,
-      })
-      const session = {
-        scope: 'app' as const,
-        appSlug,
-        sessionId: record.sessionId,
-      }
-      let snapshot = await startAgentRun({ session, message })
-      for (let step = 0; step < MAX_MODEL_STEPS; step += 1) {
-        if (snapshot.state !== 'ready') break
-        snapshot = await callAgentRunModel({
-          runId: snapshot.runId,
-          sessionId: record.sessionId,
-        })
-      }
-      setIssues([])
-      setIssueStatus('Proof issues sent.')
-    } catch (cause) {
-      setIssueError(cause instanceof Error ? cause.message : String(cause))
-      setIssueStatus(null)
-    } finally {
-      setSubmittingIssues(false)
-    }
-  }
-
-  return (
-    <>
-      <Modal open={open} onClose={onClose} title={title} size="fullscreen" chrome>
-        <StyledBody>
-          <StyledToolbar>
-            <Text as="p" size="sm" tone="secondary">
-              {pageCount ? `${pageCount} pages` : 'Paged preview'}
-            </Text>
-            <StyledToolbarActions>
-              {onAnnotateDesign ? (
-                <Button
-                  type="button"
-                  variant="text"
-                  size="sm"
-                  disabled={busy}
-                  onClick={onAnnotateDesign}
-                >
-                  <Camera size={16} strokeWidth={1.8} aria-hidden="true" />
-                  Edit
-                </Button>
-              ) : null}
-              <Button
-                type="button"
-                variant="text"
-                size="sm"
-                disabled={busy}
-                onClick={() => setAnnotating(true)}
-              >
-                Annotate
-              </Button>
-              <Button
-                type="button"
-                variant="primary"
-                size="sm"
-                loading={submittingIssues}
-                disabled={busy || submittingIssues || issues.length === 0}
-                onClick={() => void handleGo()}
-              >
-                Go{issues.length ? ` · ${issues.length}` : ''}
-              </Button>
-              <Button
-                type="button"
-                variant="text"
-                size="sm"
-                loading={busy}
-                disabled={busy}
-                onClick={onRefresh}
-              >
-                Preview again
-              </Button>
-              <Button
-                type="button"
-                variant="primary"
-                size="md"
-                loading={busy}
-                disabled={busy}
-                onClick={onExportPdf}
-              >
-                Create PDF
-              </Button>
-            </StyledToolbarActions>
-          </StyledToolbar>
-          {status ? <InlineBanner>{status}</InlineBanner> : null}
-          {issues.length > 0 || issueStatus || issueError ? (
-            <StyledIssueQueue>
-              <StyledIssueList>
-                <Text as="p" size="sm" tone="secondary">
-                  {issues.length
-                    ? `${issues.length} issue${issues.length === 1 ? '' : 's'} ready`
-                    : issueStatus}
-                </Text>
-                {issues.map((issue, index) => (
-                  <StyledIssuePill
-                    key={issue.id}
-                    type="button"
-                    title="Remove issue"
-                    onClick={() => handleRemoveIssue(issue.id)}
-                  >
-                    {issueLabel(issue, index)}
-                  </StyledIssuePill>
-                ))}
-              </StyledIssueList>
-              {issues.length > 0 ? (
-                <Button
-                  type="button"
-                  variant="text"
-                  size="sm"
-                  disabled={submittingIssues}
-                  onClick={() => setIssues([])}
-                >
-                  Clear
-                </Button>
-              ) : null}
-              {issueError ? (
-                <InlineBanner variant="danger">{issueError}</InlineBanner>
-              ) : null}
-            </StyledIssueQueue>
-          ) : null}
-          <CrossfadeFrame title={title} html={html} />
-        </StyledBody>
-      </Modal>
-      <ScreenAnnotationAgentDialog
-        open={annotating}
-        appSlug={appSlug}
-        contextLabel={annotationContextLabel}
-        context={annotationContext}
-        title="Annotate proof"
-        buildMessage={annotationMessage}
-        submitLabel="Add issue"
-        onCapture={handleAddIssue}
-        onClose={() => setAnnotating(false)}
-      />
-    </>
-  )
-}
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { Camera } from 'lucide-react'
+import { styled } from 'styled-components'
+import {
+  ScreenAnnotationAgentDialog,
+  type ScreenAnnotationAgentPayload,
+} from '../agent-feedback/index.js'
+import {
+  callAgentRunModel,
+  createAgentSession,
+  startAgentRun,
+} from '../../bridge/agents.js'
+import { Button } from '../common/buttons/Button.js'
+import { CleanButton } from '../common/buttons/CleanButton.js'
+import { InlineBanner } from '../common/feedback/InlineBanner.js'
+import { Modal } from '../common/overlays/Modal.js'
+import { Text } from '../common/typography/Text.js'
+
+export interface PagedProofDialogProps {
+  open: boolean
+  title?: string
+  html: string
+  pageCount?: number
+  status?: string | null
+  busy?: boolean
+  appSlug: string
+  annotationContextLabel?: string
+  annotationContext?: string
+  onClose: () => void
+  onRefresh: () => void
+  onExportPdf: () => void
+  /** Open the screen-annotation camera scoped to DESIGN (print styles). */
+  onAnnotateDesign?: () => void
+}
+
+const MAX_MODEL_STEPS = 3
+
+interface QueuedProofIssue extends ScreenAnnotationAgentPayload {
+  id: string
+}
+
+const StyledBody = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--platform-spacing-sm);
+  min-height: 0;
+`
+
+const StyledToolbar = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--platform-spacing-sm);
+`
+
+const StyledToolbarActions = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: var(--platform-spacing-sm);
+`
+
+const StyledIssueQueue = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--platform-spacing-sm);
+  padding: 8px 10px;
+  border: 1px solid var(--platform-colors-border);
+  border-radius: var(--platform-radius-sm);
+  background: var(--platform-colors-surface);
+`
+
+const StyledIssueList = styled.div`
+  display: flex;
+  min-width: 0;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--platform-spacing-xs);
+`
+
+const StyledIssuePill = styled(CleanButton)`
+  max-width: 24ch;
+  overflow: hidden;
+  border: 1px solid var(--platform-colors-border);
+  border-radius: var(--platform-radius-pill);
+  background: transparent;
+  color: var(--platform-colors-text-secondary);
+  font-size: var(--platform-typography-font-size-xs);
+  padding: 3px 8px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  &:hover {
+    border-color: var(--platform-colors-border-strong);
+    color: var(--platform-colors-text);
+  }
+`
+
+const StyledFrameWrap = styled.div`
+  position: relative;
+  width: 100%;
+  height: min(72vh, 820px);
+  border: 1px solid var(--platform-colors-border);
+  background: white;
+  overflow: hidden;
+`
+
+const StyledFrameLayer = styled.iframe`
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  background: white;
+  transition: opacity 280ms ease;
+`
+
+const FRAME_SANDBOX = 'allow-same-origin allow-scripts'
+
+/** Read the vertical scroll of a same-origin (srcDoc) iframe, best-effort. */
+function readFrameScroll(frame: HTMLIFrameElement | null): number {
+  try {
+    return frame?.contentWindow?.scrollY ?? 0
+  } catch {
+    return 0
+  }
+}
+
+interface FrameLayer {
+  id: number
+  html: string
+}
+
+/**
+ * Renders preview HTML with a natural cross-fade on update: each render gets its
+ * own keyed iframe (never remounted, so its scroll survives), the newest fades
+ * in over the previous one carrying the scroll position across, then the older
+ * layers are dropped — no blank flash, no scroll reset.
+ */
+function CrossfadeFrame({
+  title,
+  html,
+}: {
+  title: string
+  html: string
+}): React.ReactElement {
+  const [layers, setLayers] = useState<FrameLayer[]>(() =>
+    html ? [{ id: 0, html }] : [],
+  )
+  const [topVisible, setTopVisible] = useState(true)
+  const nextId = useRef(1)
+  const targetScroll = useRef(0)
+  const frames = useRef(new Map<number, HTMLIFrameElement>())
+
+  // A new render arrived → capture the current scroll, then add a layer on top.
+  useEffect(() => {
+    const top = layers[layers.length - 1]
+    if (!html || top?.html === html) return
+    targetScroll.current = readFrameScroll(top ? frames.current.get(top.id) ?? null : null)
+    setTopVisible(false)
+    setLayers(prev => [...prev, { id: nextId.current++, html }])
+  }, [html, layers])
+
+  const handleLayerLoad = useCallback(
+    (layer: FrameLayer, isTop: boolean, isOnlyLayer: boolean) => {
+      const win = frames.current.get(layer.id)?.contentWindow ?? null
+      if (!isTop || isOnlyLayer) return
+      const y = targetScroll.current
+      const apply = (): void => {
+        try {
+          win?.scrollTo(0, y)
+        } catch {
+          // ignore
+        }
+      }
+      apply()
+      // Re-pin briefly in case layout settles just after load.
+      let ticks = 0
+      const id = window.setInterval(() => {
+        apply()
+        if ((ticks += 1) >= 8) window.clearInterval(id)
+      }, 50)
+      requestAnimationFrame(() => setTopVisible(true))
+    },
+    [],
+  )
+
+  const handleLayerTransitionEnd = useCallback(
+    (event: React.TransitionEvent, isTop: boolean) => {
+      if (event.propertyName !== 'opacity' || !isTop || !topVisible) return
+      // Keep only the now-visible top layer.
+      setLayers(prev => (prev.length > 1 ? prev.slice(prev.length - 1) : prev))
+    },
+    [topVisible],
+  )
+
+  return (
+    <StyledFrameWrap>
+      {layers.map((layer, index) => {
+        const isTop = index === layers.length - 1
+        const isOnlyLayer = layers.length === 1
+        const hidden = isTop && !isOnlyLayer && !topVisible
+        return (
+          <StyledFrameLayer
+            key={layer.id}
+            ref={el => {
+              if (el) frames.current.set(layer.id, el)
+              else frames.current.delete(layer.id)
+            }}
+            title={isTop ? title : `${title} (previous)`}
+            sandbox={FRAME_SANDBOX}
+            srcDoc={layer.html}
+            style={{
+              opacity: hidden ? 0 : 1,
+              zIndex: index,
+              pointerEvents: hidden ? 'none' : 'auto',
+            }}
+            onLoad={() => handleLayerLoad(layer, isTop, isOnlyLayer)}
+            onTransitionEnd={event => handleLayerTransitionEnd(event, isTop)}
+          />
+        )
+      })}
+    </StyledFrameWrap>
+  )
+}
+
+function annotationMessage({ note, imageDataUrl }: ScreenAnnotationAgentPayload): string {
+  return [
+    'Please use this paged proof annotation to adjust the print/typesetting CSS, then explain what changed and ask the user to preview again.',
+    '',
+    note.trim() ? `Proof note:\n${note.trim()}` : 'No extra proof note.',
+    '',
+    'Annotated proof screenshot:',
+    '',
+    `![Annotated proof screenshot](${imageDataUrl})`,
+  ].join('\n')
+}
+
+function queuedIssuesMessage(issues: QueuedProofIssue[]): string {
+  return [
+    `Please work through these ${issues.length} paged proof annotations as one typesetting pass.`,
+    'Adjust the print/typesetting CSS where appropriate, then explain what changed and ask the user to preview again.',
+    '',
+    ...issues.flatMap((issue, index) => [
+      `Issue ${index + 1}${issue.note.trim() ? `: ${issue.note.trim()}` : ''}`,
+      '',
+      `![Paged proof issue ${index + 1}](${issue.imageDataUrl})`,
+      '',
+    ]),
+  ].join('\n')
+}
+
+function issueLabel(issue: QueuedProofIssue, index: number): string {
+  const note = issue.note.trim()
+  return note ? `${index + 1}. ${note}` : `Issue ${index + 1}`
+}
+
+export function PagedProofDialog({
+  open,
+  title = 'Preview',
+  html,
+  pageCount,
+  status,
+  busy = false,
+  appSlug,
+  annotationContextLabel = 'paged proof',
+  annotationContext,
+  onClose,
+  onRefresh,
+  onExportPdf,
+  onAnnotateDesign,
+}: PagedProofDialogProps): React.ReactElement {
+  const [annotating, setAnnotating] = useState(false)
+  const [issues, setIssues] = useState<QueuedProofIssue[]>([])
+  const [submittingIssues, setSubmittingIssues] = useState(false)
+  const [issueStatus, setIssueStatus] = useState<string | null>(null)
+  const [issueError, setIssueError] = useState<string | null>(null)
+
+  const handleAddIssue = (payload: ScreenAnnotationAgentPayload): void => {
+    setIssues(current => [
+      ...current,
+      {
+        ...payload,
+        id: `proof-issue-${Date.now()}-${Math.random()
+          .toString(36)
+          .slice(2, 8)}`,
+      },
+    ])
+    setIssueStatus('Issue added. Add another, or press Go.')
+    setIssueError(null)
+  }
+
+  const handleRemoveIssue = (id: string): void => {
+    setIssues(current => current.filter(issue => issue.id !== id))
+  }
+
+  const handleGo = async (): Promise<void> => {
+    if (issues.length === 0) return
+    setSubmittingIssues(true)
+    setIssueError(null)
+    setIssueStatus('Sending proof issues…')
+    try {
+      const message = [
+        queuedIssuesMessage(issues),
+        annotationContext
+          ? `\n\nContext (${annotationContextLabel}):\n${annotationContext}`
+          : `\n\nContext: ${annotationContextLabel}.`,
+      ].join('')
+      const record = await createAgentSession({
+        scope: 'app',
+        appSlug,
+        title: `Paged proof issues · ${annotationContextLabel}`,
+      })
+      const session = {
+        scope: 'app' as const,
+        appSlug,
+        sessionId: record.sessionId,
+      }
+      let snapshot = await startAgentRun({ session, message })
+      for (let step = 0; step < MAX_MODEL_STEPS; step += 1) {
+        if (snapshot.state !== 'ready') break
+        snapshot = await callAgentRunModel({
+          runId: snapshot.runId,
+          sessionId: record.sessionId,
+        })
+      }
+      setIssues([])
+      setIssueStatus('Proof issues sent.')
+    } catch (cause) {
+      setIssueError(cause instanceof Error ? cause.message : String(cause))
+      setIssueStatus(null)
+    } finally {
+      setSubmittingIssues(false)
+    }
+  }
+
+  return (
+    <>
+      <Modal open={open} onClose={onClose} title={title} size="fullscreen" chrome>
+        <StyledBody>
+          <StyledToolbar>
+            <Text as="p" size="sm" tone="secondary">
+              {pageCount ? `${pageCount} pages` : 'Paged preview'}
+            </Text>
+            <StyledToolbarActions>
+              {onAnnotateDesign ? (
+                <Button
+                  type="button"
+                  variant="text"
+                  size="sm"
+                  disabled={busy}
+                  onClick={onAnnotateDesign}
+                >
+                  <Camera size={16} strokeWidth={1.8} aria-hidden="true" />
+                  Edit
+                </Button>
+              ) : null}
+              <Button
+                type="button"
+                variant="text"
+                size="sm"
+                disabled={busy}
+                onClick={() => setAnnotating(true)}
+              >
+                Annotate
+              </Button>
+              <Button
+                type="button"
+                variant="primary"
+                size="sm"
+                loading={submittingIssues}
+                disabled={busy || submittingIssues || issues.length === 0}
+                onClick={() => void handleGo()}
+              >
+                Go{issues.length ? ` · ${issues.length}` : ''}
+              </Button>
+              <Button
+                type="button"
+                variant="text"
+                size="sm"
+                loading={busy}
+                disabled={busy}
+                onClick={onRefresh}
+              >
+                Preview again
+              </Button>
+              <Button
+                type="button"
+                variant="primary"
+                size="md"
+                loading={busy}
+                disabled={busy}
+                onClick={onExportPdf}
+              >
+                Create PDF
+              </Button>
+            </StyledToolbarActions>
+          </StyledToolbar>
+          {status ? <InlineBanner>{status}</InlineBanner> : null}
+          {issues.length > 0 || issueStatus || issueError ? (
+            <StyledIssueQueue>
+              <StyledIssueList>
+                <Text as="p" size="sm" tone="secondary">
+                  {issues.length
+                    ? `${issues.length} issue${issues.length === 1 ? '' : 's'} ready`
+                    : issueStatus}
+                </Text>
+                {issues.map((issue, index) => (
+                  <StyledIssuePill
+                    key={issue.id}
+                    type="button"
+                    title="Remove issue"
+                    onClick={() => handleRemoveIssue(issue.id)}
+                  >
+                    {issueLabel(issue, index)}
+                  </StyledIssuePill>
+                ))}
+              </StyledIssueList>
+              {issues.length > 0 ? (
+                <Button
+                  type="button"
+                  variant="text"
+                  size="sm"
+                  disabled={submittingIssues}
+                  onClick={() => setIssues([])}
+                >
+                  Clear
+                </Button>
+              ) : null}
+              {issueError ? (
+                <InlineBanner variant="danger">{issueError}</InlineBanner>
+              ) : null}
+            </StyledIssueQueue>
+          ) : null}
+          <CrossfadeFrame title={title} html={html} />
+        </StyledBody>
+      </Modal>
+      <ScreenAnnotationAgentDialog
+        open={annotating}
+        appSlug={appSlug}
+        contextLabel={annotationContextLabel}
+        context={annotationContext}
+        title="Annotate proof"
+        buildMessage={annotationMessage}
+        submitLabel="Add issue"
+        onCapture={handleAddIssue}
+        onClose={() => setAnnotating(false)}
+      />
+    </>
+  )
+}