@lincyaw/workbench 0.1.0 → 0.2.0-rc.1

package/src/panels/ProductionTranscription.tsx

@@ -0,0 +1,140 @@
+import { useEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react'
+import type { DocumentTranscriptionRequest, TeachingDocument, TranscriptionCapabilities, TranscriptionListAnswer, TranscriptionRevision, TranscriptionTask } from '@lincyaw/kernel'
+import { PmBadge, PmButton, PmCard, PmDialog, PmField, PmIconButton, PmNotice, PmSelect } from '../components.tsx'
+import { useWorkbench, useWorkbenchState } from '../context.tsx'
+import { documentTranscriptionSession } from '../transcription-session.ts'
+import { TRANSCRIPTION_MESSAGES, transcriptionFailure } from '../transcription-messages.ts'
+import { TranscriptionAdoption } from './TranscriptionAdoption.tsx'
+
+interface Props { identity: string, directory: string, document: TeachingDocument, sectionId: string, stepId: string, disabled: boolean, active: boolean, selectedAsset?: { id: string, revision: number }, onSelectAsset(): void }
+
+/** ASR creates material; a separate, source-bound review is the only script write. */
+export function ProductionTranscription({ identity, directory, document, sectionId, stepId, disabled, active, selectedAsset, onSelectAsset }: Props) {
+  const workbench = useWorkbench(), locale = useWorkbenchState(state => state.locale), t = TRANSCRIPTION_MESSAGES[locale]
+  const source = useWorkbenchState(state => state.authoring)
+  const session = useMemo(() => documentTranscriptionSession(workbench.client, identity, directory, document.id), [workbench, identity, directory, document.id])
+  const subscribe = useMemo(() => active ? session.subscribe : () => () => {}, [session, active])
+  const state = useSyncExternalStore(subscribe, session.getState, session.getState)
+  const assets = Object.values(document.assets).filter(asset => asset.kind === 'audio')
+  const [assetId, setAssetId] = useState(selectedAsset?.id ?? state.request?.assetId ?? state.task?.audio.assetId ?? assets.at(-1)?.id ?? '')
+  const receivedSelection = useRef<number>()
+  const [capability, setCapability] = useState<TranscriptionCapabilities>(), [engine, setEngine] = useState(''), [refresh, setRefresh] = useState(0)
+  const [candidate, setCandidate] = useState<TranscriptionRevision>(), [reading, setReading] = useState(false), [failure, setFailure] = useState<string>()
+  const [records, setRecords] = useState<TranscriptionListAnswer>({ tasks: [], issues: [] })
+  const [importing, setImporting] = useState(false), [inspecting, setInspecting] = useState(false), [cancel, setCancel] = useState(false), [cancelTarget, setCancelTarget] = useState<TranscriptionTask>(), [cancellingOther, setCancellingOther] = useState(false)
+  const owner = useRef({ active: true }), file = useRef<HTMLInputElement>(null), importRequest = useRef<AbortController>(), inspectionRequest = useRef<AbortController>(), pendingFile = useRef<File>()
+  const current = () => owner.current.active && workbench.getState().authoring?.identity === identity
+  const sourceReady = Boolean(source?.identity === identity && source.version && source.fingerprint && !source.loading && !source.dirty && !source.saving && !source.composing && !source.restored && !source.error)
+  const selectedBusy = state.sending || state.cancelling || Boolean(state.request) || Boolean(state.task && ['queued', 'running', 'cancelling'].includes(state.task.state)) || Boolean(session.intent && !state.verified && !state.failure)
+  const otherTask = records.tasks.find(task => task.id !== state.task?.id && ['queued', 'running', 'cancelling'].includes(task.state))
+  const busy = selectedBusy || Boolean(otherTask)
+  useEffect(() => {
+    if (selectedAsset && receivedSelection.current !== selectedAsset.revision && document.assets[selectedAsset.id]?.kind === 'audio') {
+      receivedSelection.current = selectedAsset.revision
+      inspectionRequest.current?.abort(); setAssetId(selectedAsset.id)
+    }
+  }, [selectedAsset, document.assets])
+  useEffect(() => { owner.current.active = true; return () => { owner.current.active = false; importRequest.current?.abort(); inspectionRequest.current?.abort() } }, [])
+  useEffect(() => { if (!active || disabled) inspectionRequest.current?.abort() }, [active, disabled])
+  useEffect(() => {
+    if (!active) return
+    const controller = new AbortController(); let timer: ReturnType<typeof setTimeout> | undefined
+    const read = async () => {
+      try {
+        const answer = await workbench.client.readTranscriptions(directory, controller.signal)
+        if (controller.signal.aborted || !current()) return
+        setRecords(answer)
+        if (!session.intent && !session.getState().failure && !session.getState().cancelled) {
+          const task = answer.tasks.find(task => task.source.documentId === document.id && ['queued', 'running', 'cancelling'].includes(task.state)) ?? answer.tasks.find(task => task.source.documentId === document.id)
+          if (task) session.select(task)
+        }
+      } catch (error) { if (!controller.signal.aborted && current()) setFailure(transcriptionFailure(error, locale)) }
+      finally { if (!controller.signal.aborted) timer = setTimeout(() => void read(), 2000) }
+    }
+    void read()
+    return () => { controller.abort(); clearTimeout(timer) }
+  }, [workbench, identity, directory, document.id, source?.version, active, refresh, locale, session])
+  useEffect(() => {
+    const controller = new AbortController()
+    if (!active) return
+    void workbench.client.readTranscriptionCapabilities(directory, controller.signal).then(answer => {
+      if (!controller.signal.aborted && current()) {
+        setCapability(answer)
+        setEngine(previous => answer.engines.some(value => value.id === previous) ? previous : answer.engines[0]?.id ?? '')
+      }
+    }, error => { if (!controller.signal.aborted && current()) setFailure(transcriptionFailure(error, locale)) })
+    return () => controller.abort()
+  }, [workbench, identity, directory, source?.version, active, refresh, locale])
+  useEffect(() => {
+    const result = state.verified && state.task?.state === 'done' ? state.task.result : undefined, controller = new AbortController()
+    if (!active || !result) { setReading(false); if (!result) setCandidate(undefined); return }
+    setReading(true)
+    void workbench.client.readTranscriptionResult(directory, result.transcriptionId, result.revision, controller.signal).then(answer => {
+      if (!controller.signal.aborted && current() && answer.source.documentId === document.id && answer.transcriptionId === result.transcriptionId && answer.revision === result.revision) { setCandidate(answer); setFailure(undefined) }
+    }, () => { if (!controller.signal.aborted && current()) setFailure(t.readFailed) }).finally(() => { if (!controller.signal.aborted && current()) setReading(false) })
+    return () => controller.abort()
+  }, [workbench, identity, directory, document.id, state.task?.result?.transcriptionId, state.task?.result?.revision, state.task?.state, state.verified, active, refresh, locale])
+  const importAudio = async (value: File) => {
+    const now = workbench.getState().authoring
+    if (!current() || importRequest.current || disabled || !now?.version) return
+    onSelectAsset()
+    const controller = new AbortController(); importRequest.current = controller; setImporting(true); setFailure(undefined)
+    pendingFile.current = value
+    try {
+      const answer = await workbench.ensureDocumentAudio(value, { identity, version: now.version }, controller.signal)
+      if (current() && !controller.signal.aborted) { setAssetId(answer.inspection.assetId); pendingFile.current = undefined }
+    } catch (error) { if (current() && !controller.signal.aborted) setFailure(transcriptionFailure(error, locale)) }
+    finally { if (importRequest.current === controller) { importRequest.current = undefined; if (current()) setImporting(false) } }
+  }
+  const start = async () => {
+    const now = workbench.getState().authoring
+    if (!current() || inspectionRequest.current || disabled || !sourceReady || busy || !now?.version || !now.content || !now.fingerprint || !assetId || !engine || !capability?.available) return
+    const controller = new AbortController(); inspectionRequest.current = controller; setInspecting(true)
+    setFailure(undefined)
+    try {
+      const expected = { identity, version: now.version }, audio = await workbench.inspectDocumentAudio(assetId, expected, controller.signal)
+      if (!current() || controller.signal.aborted) return
+      const request: DocumentTranscriptionRequest = { intent: `transcription_${crypto.randomUUID()}`, source: { documentId: now.content.id, version: now.version, fingerprint: now.fingerprint }, assetId, audioSha256: audio.inspection.sha256, engine, lang: now.content.metadata.lang, confirmed: true }
+      await session.start(request, () => workbench.startDocumentTranscription(request, expected))
+    } catch (error) { if (current() && !controller.signal.aborted) setFailure(transcriptionFailure(error, locale)) }
+    finally { if (inspectionRequest.current === controller) { inspectionRequest.current = undefined; if (current()) setInspecting(false) } }
+  }
+  const cancelJob = async (target?: TranscriptionTask) => {
+    if (!target || target.id === state.task?.id) return session.cancel()
+    setCancellingOther(true)
+    try { await workbench.client.cancelTranscription(directory, { id: target.id }); if (current()) setRefresh(value => value + 1) }
+    catch (error) { if (current()) setFailure(transcriptionFailure(error, locale)) }
+    finally { if (current()) setCancellingOther(false) }
+  }
+  const requestCancel = (target?: TranscriptionTask) => { if (target?.state === 'running') { setCancelTarget(target); setCancel(true) } else void cancelJob(target) }
+  const task = state.task, stale = task && (task.current === false || source?.version !== task.source.version || source?.fingerprint !== task.source.fingerprint)
+  const currentRecords = records.tasks.filter(value => value.source.documentId === document.id), recorded = currentRecords.some(value => value.id === task?.id)
+  const status = state.cancelled ? t.cancelled : state.sending || !task && state.request ? t.sending : task ? t[task.state] : undefined
+  return <PmCard className="pmw-transcription" data-transcription="true">
+    <div className="pmw-transcription__actions"><strong>{t.title}</strong><span className="pmw-spacer" />
+      <PmButton small disabled={disabled || !sourceReady || importing} loading={importing} onClick={() => file.current?.click()}>{t.import}</PmButton>
+      {pendingFile.current && failure && <PmButton small disabled={disabled || !sourceReady || importing} onClick={() => { if (pendingFile.current) void importAudio(pendingFile.current) }}>{t.retry}</PmButton>}
+      <input ref={file} hidden type="file" accept="audio/*,.wav,.ogg,.mp3,.m4a,.webm" onChange={event => { const value = event.currentTarget.files?.[0]; event.currentTarget.value = ''; if (value) void importAudio(value) }} />
+      <PmIconButton small icon="refresh" label={t.refresh} loading={state.checking && !busy} onClick={() => { setRefresh(value => value + 1); void session.refresh() }} />
+    </div>
+    {!assets.length ? <span>{t.noAudio}</span> : <>
+      <PmSelect label={t.audio} value={document.assets[assetId]?.kind === 'audio' ? assetId : ''} disabled={disabled || importing} onChange={event => { onSelectAsset(); inspectionRequest.current?.abort(); setAssetId(event.target.value) }}><option value="">{t.none}</option>{assets.map(asset => <option key={asset.id} value={asset.id}>{asset.title ?? asset.location.split('/').at(-1) ?? asset.id}</option>)}</PmSelect>
+      {capability?.engines.length ? <PmSelect label={t.service} value={engine} disabled={disabled || busy} onChange={event => { inspectionRequest.current?.abort(); setEngine(event.target.value) }}>{capability.engines.map(value => <option key={value.id} value={value.id}>{value.provider}{capability.engines.filter(other => other.provider === value.provider).length > 1 ? ` · ${value.id}` : ''}</option>)}</PmSelect> : capability ? <span>{capability.status === 'unknown' ? t.unresolved : t.unavailable}</span> : null}
+      {capability && !capability.available && capability.engines.length > 0 && <span>{capability.reason === 'audio-unavailable' ? t.audioUnavailable : t.unresolved}</span>}
+      <div className="pmw-transcription__actions">
+        <PmButton small disabled={disabled || !sourceReady || busy || inspecting || !assetId || !engine || !capability?.available} loading={state.sending || inspecting} onClick={() => void start()}>{t.start}</PmButton>
+        {(selectedBusy || session.intent && !state.verified && !state.cancelled) && <PmButton small loading={state.cancelling || task?.state === 'cancelling'} disabled={state.cancelling || task?.state === 'cancelling'} onClick={() => requestCancel(task)}>{t.cancel}</PmButton>}
+        {status && <span role="status" aria-live="polite"><PmBadge tone={task?.state === 'done' ? 'ok' : task?.state === 'failed' ? 'danger' : 'neutral'}>{status}</PmBadge></span>}
+        {stale && <PmBadge tone="warn">{t.stale}</PmBadge>}
+      </div>
+    </>}
+    {currentRecords.length > 0 && (currentRecords.length > 1 || !recorded) && <PmSelect label={t.records} disabled={selectedBusy || inspecting} value={recorded ? task?.id : ''} onChange={event => { const selected = currentRecords.find(task => task.id === event.target.value); if (selected) session.select(selected) }}>{!recorded && <option value="">{t.show}</option>}{currentRecords.map(task => <option key={task.id} value={task.id}>{t[task.state]} · {new Date(task.createdAt).toLocaleTimeString(locale)} · {document.assets[task.audio.assetId]?.title ?? t.audio}</option>)}</PmSelect>}
+    {otherTask && <div className="pmw-transcription__actions"><span>{t.other}</span>{otherTask.source.documentId === document.id && <PmButton small disabled={selectedBusy} onClick={() => session.select(otherTask)}>{t.show}</PmButton>}<PmButton small loading={cancellingOther} onClick={() => requestCancel(otherTask)}>{t.cancel}</PmButton></div>}
+    {(records.issues.length > 0 || records.truncated) && <PmNotice tone="warn">{t.partial}</PmNotice>}
+    {state.storageFailure && <PmNotice tone="warn">{t.storage}</PmNotice>}
+    {(failure || state.failure || task?.error) && <PmNotice tone="danger">{failure ?? transcriptionFailure(new Error(state.failure ?? task?.error), locale)}</PmNotice>}
+    {reading && <PmField label={t.text}><span aria-busy="true">{t.loading}</span></PmField>}
+    {candidate && <TranscriptionAdoption key={`${identity}:${candidate.transcriptionId}:${candidate.revision}:${stepId}`} identity={identity} candidate={candidate} document={document} sectionId={sectionId} stepId={stepId} disabled={disabled} />}
+    {cancel && <PmDialog open label={t.cancelTitle} closeLabel={t.close} onClose={() => setCancel(false)} actions={<><PmButton onClick={() => setCancel(false)}>{t.cancelKeep}</PmButton><PmButton variant="danger" onClick={() => { const target = cancelTarget; setCancel(false); setCancelTarget(undefined); void cancelJob(target) }}>{t.cancelConfirm}</PmButton></>} />}
+  </PmCard>
+}

package/src/panels/SourceDocumentPanel.tsx

@@ -0,0 +1,215 @@
+import { useEffect, useRef, useState } from 'react'
+import { hasRole } from '@lincyaw/kernel'
+import { PmButton, PmNotice, PmSelect, PmSkeleton } from '../components.tsx'
+import { useMessages, useWorkbench, useWorkbenchState } from '../context.tsx'
+import { DocumentEditor } from '../document-editor/DocumentEditor.tsx'
+import { DOCUMENT_EDITOR_MESSAGES } from '../document-editor/messages.ts'
+import { DocumentBlockFallback } from '../document-editor/DocumentBlockFallback.tsx'
+import { DocumentBlockPreview } from '../document-editor/DocumentBlockPreview.tsx'
+import { nativeEditingCursor } from '../document-editor/selection.ts'
+import { hasBlockPreview } from '../document-editor/projection.ts'
+import type { NativeDocumentEditor } from '../document-editor/schema.tsx'
+import { isAgentChanging } from '../workbench.ts'
+import { EditorChangeTrail } from './ChangeTrail.tsx'
+
+/** Source editing is available before the first successful runtime compilation. */
+export function SourceDocumentPanel({ commentsPortal, onCommentDraftRestore }: { commentsPortal?: HTMLElement | null, onCommentDraftRestore?(): void }) {
+  const workbench = useWorkbench(), t = useMessages()
+  const source = useWorkbenchState(state => state.authoring)
+  const sourceAcknowledged = () => {
+    const current = workbench.getState().authoring
+    return Boolean(current && current.identity === source?.identity && current.reset === source?.reset
+      && !current.loading && !current.dirty && !current.saving && !current.error && !current.restored && !current.recovering && !current.composing)
+  }
+  const positionFailure = useWorkbenchState(state => state.documentPositionFailure)
+  const locale = useWorkbenchState(state => state.locale), messages = DOCUMENT_EDITOR_MESSAGES[locale]
+  const navigation = useWorkbenchState(state => state.documentNavigation)
+  const readOnly = useWorkbenchState(state => state.mode !== 'editing' || workbench.client.capabilities?.readOnly === true || Boolean(state.authoring?.member && !hasRole(state.authoring.member, 'editor')) || Boolean(state.authoring?.loading) || isAgentChanging(state))
+  const container = useRef<HTMLElement>(null)
+  const sheet = useRef<HTMLDivElement>(null)
+  const consumedNavigation = useRef<string>()
+  const bodyEditor = useRef<NativeDocumentEditor>()
+  const editingPosition = useRef<{ nativeBlockId: string, sectionId: string, position: number, editor: NativeDocumentEditor, identity: string, reset: number | undefined }>()
+  const cancelReading = useRef<() => void>()
+  const [selectedDraft, setSelectedDraft] = useState('')
+  const drafts = source?.recoveryDrafts ?? []
+  const draftKey = (value: { id: string, revision: number, token: string }) => JSON.stringify([value.id, value.revision, value.token])
+  const draft = drafts.find(value => draftKey(value) === selectedDraft)
+  useEffect(() => { setSelectedDraft('') }, [source?.identity])
+  const recoveryDisabled = readOnly || source?.saving || source?.composing || source?.recovering
+  useEffect(() => {
+    const element = container.current
+    if (element && source?.identity && source.content) return workbench.attachDocumentViewport(element, source.identity)
+  }, [workbench, source?.identity, Boolean(source?.content)])
+  // The editor applies `readOnly` while committing, so it is editable by the time this runs.
+  useEffect(() => { if (!readOnly) workbench.documentEditorEditable() }, [workbench, readOnly])
+  useEffect(() => {
+    if (!navigation) return
+    const request = JSON.stringify([source?.identity, navigation.request])
+    if (consumedNavigation.current === request) return
+    const target = navigation.block ? container.current?.querySelector(`[data-block-preview="${CSS.escape(navigation.block)}"]`) : container.current?.querySelector(`[data-document-section="${CSS.escape(navigation.section)}"]`)
+    if (target) {
+      consumedNavigation.current = request; target.scrollIntoView({ block: navigation.block ? 'center' : 'start' })
+      if (navigation.block) target.querySelector<HTMLElement>('[data-component-properties]')?.focus({ preventScroll: true })
+    }
+  }, [navigation, source?.identity, source?.reset])
+  useEffect(() => {
+    const element = container.current
+    if (!element || !source?.content) return
+    let frame: number | undefined
+    const measure = () => ({ top: element.scrollTop, width: element.clientWidth, height: element.clientHeight, extent: element.scrollHeight })
+    type Viewport = ReturnType<typeof measure>
+    const sameGeometry = (a: Viewport, b: Viewport) => a.width === b.width && a.height === b.height && a.extent === b.extent
+    let baseline = measure(), reading: { generation: string, viewport: Viewport } | undefined
+    const cancel = () => { reading = undefined }
+    cancelReading.current = cancel
+    const read = () => {
+      frame = undefined
+      const gesture = reading
+      cancel()
+      if (!gesture || !element.clientHeight) return
+      const viewport = measure(), state = workbench.getState()
+      if (gesture.generation !== state.documentPositionToken || !sameGeometry(gesture.viewport, viewport) || gesture.viewport.top !== viewport.top) return
+      if (!state.authoring?.loading && !isAgentChanging(state)) {
+        const field = workbench.focusedDocumentField(), root = field?.editor.prosemirrorView.dom.getRootNode()
+        if (field && root instanceof ShadowRoot && element.contains(root.host)) {
+          try {
+            const point = field.editor.prosemirrorView.coordsAtPos(field.editor.prosemirrorState.selection.head), bounds = element.getBoundingClientRect()
+            if (![point.left, point.right, point.top, point.bottom].every(Number.isFinite)) return
+            const step = state.authoring?.content?.steps[field.stepId]
+            if (step && point.bottom >= bounds.top && point.top <= bounds.bottom && point.right >= bounds.left && point.left <= bounds.right) {
+              workbench.observeDocumentStep(step.sectionId, field.stepId)
+              return
+            }
+          } catch { return }
+        }
+      }
+      const editor = bodyEditor.current
+      if (editor?.prosemirrorView.isDestroyed) return
+      if (editor?.isFocused() && !state.authoring?.loading && !isAgentChanging(state)) {
+        const current = editingPosition.current, source = state.authoring
+        if (!source || !current || current.editor !== editor || current.identity !== source.identity || current.reset !== source.reset) return
+        try {
+          const cursor = nativeEditingCursor(editor)
+          if (!cursor || cursor.nativeBlockId !== current.nativeBlockId || cursor.position !== current.position) return
+          const node = cursor.objectSelected ? editor.prosemirrorView.nodeDOM(cursor.position) : undefined
+          const point = node instanceof Element ? node.getBoundingClientRect() : editor.prosemirrorView.coordsAtPos(cursor.position), bounds = element.getBoundingClientRect()
+          if (![point.left, point.right, point.top, point.bottom].every(Number.isFinite)) return
+          if (point.bottom >= bounds.top && point.top <= bounds.bottom && point.right >= bounds.left && point.left <= bounds.right) {
+            workbench.observeDocumentSection(current.sectionId)
+            return
+          }
+        } catch { return }
+      }
+      const headings = [...element.querySelectorAll<HTMLElement>('[data-document-section]')]
+      const band = element.getBoundingClientRect().top + element.clientHeight * 0.05
+      let current = headings[0]
+      for (const heading of headings) if (heading.getBoundingClientRect().top <= band) current = heading
+      if (element.scrollTop > 0 && element.scrollTop + element.clientHeight >= element.scrollHeight - 1) current = headings.at(-1)
+      if (current?.dataset.documentSection) workbench.observeDocumentSection(current.dataset.documentSection)
+    }
+    const queue = (viewport: Viewport) => {
+      reading = { generation: workbench.getState().documentPositionToken, viewport }
+      if (frame === undefined) frame = requestAnimationFrame(read)
+    }
+    const scroll = (event: Event) => {
+      const viewport = measure(), previous = baseline
+      baseline = viewport
+      if (workbench.consumeDocumentReturnScroll(element)) { cancel(); return }
+      // Native scroll chaining from an iframe has no parent wheel event.
+      if (!event.isTrusted) return
+      if (!sameGeometry(previous, viewport)) { cancel(); return }
+      if (viewport.top === previous.top) return
+      workbench.documentInteraction()
+      queue(viewport)
+    }
+    const interact = (event: Event) => {
+      if (!event.isTrusted) return
+      workbench.documentInteraction()
+      baseline = measure()
+      queue(baseline)
+    }
+    const keys = (event: KeyboardEvent) => {
+      if (event.defaultPrevented || event.isComposing || event.altKey || !['PageDown', 'PageUp', 'Home', 'End'].includes(event.key)) return
+      const target = event.target instanceof Element ? event.target : undefined
+      if (target?.closest('input, textarea, select, [data-narration-editor]')) return
+      if (['Home', 'End'].includes(event.key) && target instanceof HTMLElement && target.isContentEditable && !event.ctrlKey && !event.metaKey) return
+      interact(event)
+    }
+    const pointer = () => { cancel(); workbench.documentInteraction() }
+    element.addEventListener('scroll', scroll, { passive: true })
+    element.addEventListener('wheel', interact, { passive: true })
+    element.addEventListener('touchmove', interact, { passive: true })
+    element.addEventListener('pointerdown', pointer, true)
+    element.addEventListener('focusin', cancel, true)
+    element.addEventListener('keydown', keys)
+    const resize = new ResizeObserver(() => { baseline = measure(); cancel() }); resize.observe(element)
+    const sheet = element.querySelector('.pmw-source-document__sheet')
+    if (sheet) resize.observe(sheet)
+    return () => {
+      if (cancelReading.current === cancel) cancelReading.current = undefined
+      element.removeEventListener('scroll', scroll); element.removeEventListener('wheel', interact); element.removeEventListener('touchmove', interact)
+      element.removeEventListener('pointerdown', pointer, true); element.removeEventListener('focusin', cancel, true); element.removeEventListener('keydown', keys)
+      resize.disconnect(); if (frame !== undefined) cancelAnimationFrame(frame)
+    }
+  }, [workbench, navigation, source?.identity, source?.reset, Boolean(source?.content)])
+  const error = source?.error === 'document-version-changed' || source?.error === 'document-identity-changed' ? messages.conflict
+    : source?.error ? messages.saveFailure : undefined
+  return <section ref={container} className="pmw-source-document" aria-label={t.documentEditor} aria-busy={source?.loading || undefined}>
+    {Boolean(positionFailure || source?.storageFailure || source?.recoveryReadFailure || source?.restored || error || drafts.length || source?.recoveryChanged) && <div className="pmw-source-document__notices">
+      {positionFailure && <PmNotice tone="warn">{t.documentPositionRemoved}</PmNotice>}
+      {Boolean(source?.storageFailure || source?.recoveryReadFailure) && <PmNotice tone="warn">{source?.storageFailure ? t.narrationRecoveryUnavailable : t.documentDraftUnreadable}</PmNotice>}
+      {Boolean(drafts.length || source?.recoveryChanged) && <PmNotice tone="accent"><div className="pmw-source-document__recovery">
+        <span>{source?.recoveryChanged ? t.documentDraftChanged : t.documentDraftFound}</span>
+        <PmSelect label={t.documentDraftSelect} value={draft ? selectedDraft : ''} disabled={Boolean(recoveryDisabled)} onChange={event => setSelectedDraft(event.currentTarget.value)}>
+          <option value="">{t.documentDraftChoose}</option>
+          {drafts.map((value, index) => <option key={draftKey(value)} value={draftKey(value)}>{t.documentDraftOption(index + 1, new Intl.DateTimeFormat(locale, { month: 'numeric', day: 'numeric', hour: '2-digit', minute: '2-digit' }).format(value.updatedAt), value.source)}</option>)}
+        </PmSelect>
+        <div className="pmw-source-document__recovery-actions">
+          <PmButton small variant="primary" disabled={!draft || Boolean(recoveryDisabled)} onClick={() => { if (draft && source?.identity) void workbench.recoverDocumentDraft(draft, source.identity) }}>{t.documentDraftRestore}</PmButton>
+          <PmButton small disabled={!draft || Boolean(recoveryDisabled)} onClick={() => { if (draft && source?.identity) workbench.forgetDocumentDraft(draft, source.identity) }}>{t.narrationDiscard}</PmButton>
+        </div>
+      </div></PmNotice>}
+      {source?.restored && !error && <PmNotice tone="accent"><span>{messages.restored}</span><span className="pmw-notice__actions"><PmButton small onClick={() => void workbench.retryDocument()}>{t.retry}</PmButton><PmButton small onClick={() => void workbench.discardDocument()}>{t.narrationDiscard}</PmButton></span></PmNotice>}
+      {error && <PmNotice tone="danger"><span>{error}</span><span className="pmw-notice__actions"><PmButton small onClick={() => void workbench.retryDocument()}>{t.retry}</PmButton>{source?.dirty && <PmButton small onClick={() => void workbench.discardDocument()}>{t.narrationDiscard}</PmButton>}</span></PmNotice>}
+    </div>}
+    {source?.issues.length ? <div className="pmw-source-document__diagnostics"><PmNotice tone="warn"><details><summary>{messages.diagnostics(source.issues.length)}</summary><ul>{source.issues.map((issue, index) => <li key={`${issue.path}:${index}`}><code>{issue.path}</code> {issue.message}</li>)}</ul></details></PmNotice></div> : null}
+    {!source?.content || !source.identity ? source?.loading
+      ? <div className="pmw-source-document__sheet pmw-source-document__sheet--loading"><PmSkeleton label={messages.loading} /></div>
+      : <PmNotice tone="warn"><span>{messages.unavailable}</span><span className="pmw-notice__actions"><PmButton small onClick={() => void workbench.retryDocument()}>{t.retry}</PmButton></span></PmNotice> : <div ref={sheet} className="pmw-source-document__sheet">
+      <EditorChangeTrail sheet={sheet} />
+      <DocumentEditor acknowledged={sourceAcknowledged()} getDocumentAcknowledged={sourceAcknowledged} onCommentDraftRestore={onCommentDraftRestore} commentDrafts={workbench.documentCommentDrafts(source.identity)} identity={source.identity} document={source.content} version={source.version} member={source.member} getDocument={() => workbench.getDocument(source.identity)}
+        getDocumentVersion={() => { const current = workbench.getState().authoring; return current && current.identity === source.identity && current.reset === source.reset ? current.version : undefined }} reset={source.reset} locale={locale} readOnly={readOnly}
+        uploadImage={(file, signal) => workbench.importDocumentImage(file, source.identity!, signal)}
+        getPositionToken={() => workbench.getState().documentPositionToken}
+        onSectionLink={sectionId => {
+          if (!workbench.getDocument(source.identity)?.sections[sectionId]) return false
+          workbench.goToSection(sectionId); return true
+        }}
+        resolveAssetURL={async location => {
+          if (/^(?:[a-z][a-z\d+.-]*:|\/)/i.test(location)) return location
+          const asset = Object.values((workbench.getDocument(source.identity) ?? source.content)?.assets ?? {}).find(asset => asset.location === location)
+          return asset ? workbench.client.documentAssetURL(source.directory, asset.id) : location
+        }}
+        nodeViews={{ renderBlock: id => {
+          const block = source.content?.blocks[id]
+          if (!block || !source.content) return undefined
+          const fallback = <DocumentBlockFallback block={block} document={source.content} locale={locale} />
+          return hasBlockPreview(block, source.content) ? <DocumentBlockPreview blockId={id} fallback={fallback} /> : fallback
+        } }}
+        commentsPortal={commentsPortal} onChange={document => workbench.recordDocument(document)} onReady={(editor, commands) => {
+          bodyEditor.current = editor
+          editingPosition.current = undefined
+          workbench.attachDocumentEditor(editor, commands, { identity: source.identity!, reset: source.reset })
+        }}
+        onEditingPosition={(position, editor) => {
+          const state = workbench.getState(), current = state.authoring
+          if (!current?.identity || current.loading || isAgentChanging(state) || editor !== bodyEditor.current || !editor.isFocused() || current.identity !== source.identity || current.reset !== source.reset) return
+          cancelReading.current?.()
+          editingPosition.current = { ...position, editor, identity: current.identity, reset: current.reset }
+          workbench.observeDocumentSection(position.sectionId)
+        }}
+        onComposition={composing => workbench.documentComposition(composing, 'body', source.identity)} onError={() => workbench.documentError(new Error(messages.adapterError))} />
+    </div>}
+  </section>
+}

package/src/panels/SpeechSettingsPanel.tsx

@@ -0,0 +1,64 @@
+import { useEffect, useRef, useState } from 'react'
+import type { SpeechSettingsAnswer } from '@lincyaw/kernel'
+import { PmBadge, PmButton, PmCard, PmDialog, PmField, PmInput, PmNotice, PmPanelHeader } from '../components.tsx'
+import { useWorkbench, useWorkbenchState } from '../context.tsx'
+import { SPEECH_SETTINGS_MESSAGES } from '../speech-settings-messages.ts'
+import { WorkspaceServerError } from '../workspace-client.ts'
+
+/** Write-only credentials: values stay in this mounted form until an acknowledged save or close. */
+export function SpeechSettingsPanel() {
+  const workbench = useWorkbench(), locale = useWorkbenchState(state => state.locale), t = SPEECH_SETTINGS_MESSAGES[locale]
+  const [settings, setSettings] = useState<SpeechSettingsAnswer>(), [key, setKey] = useState(''), [appId, setAppId] = useState('')
+  const [loading, setLoading] = useState(true), [busy, setBusy] = useState(false), [failure, setFailure] = useState<string>(), [status, setStatus] = useState<string>(), [confirm, setConfirm] = useState(false)
+  const owner = useRef(true), request = useRef<AbortController>(), dirty = useRef(false)
+  const load = async (checked = false) => {
+    request.current?.abort(); const controller = new AbortController(); request.current = controller
+    setLoading(true); setFailure(undefined); setStatus(undefined)
+    try {
+      if (!workbench.client.readSpeechSettings) throw new Error('unsupported')
+      const value = await workbench.client.readSpeechSettings(controller.signal)
+      if (!owner.current || controller.signal.aborted) return
+      setSettings(value)
+      if (checked) setStatus(value.configured ? t.checked : t.unconfigured)
+    } catch { if (owner.current && !controller.signal.aborted) setFailure(t.unavailable) }
+    finally { if (owner.current && !controller.signal.aborted) setLoading(false) }
+  }
+  useEffect(() => { owner.current = true; void load(); return () => { owner.current = false; request.current?.abort() } }, [workbench])
+  const save = async (clear = false) => {
+    if (!settings || !workbench.client.changeSpeechSettings) return
+    request.current?.abort(); const controller = new AbortController(); request.current = controller
+    setBusy(true); setFailure(undefined); setStatus(undefined)
+    try {
+      const value = await workbench.client.changeSpeechSettings(clear ? { action: 'clear', revision: settings.revision } : { action: 'save', revision: settings.revision, ...key.trim() ? { apiKey: key.trim() } : {}, ...appId.trim() ? { appId: appId.trim() } : {} }, controller.signal)
+      if (!owner.current || controller.signal.aborted) return
+      setSettings(value); setKey(''); setAppId(''); dirty.current = false; setConfirm(false)
+      setStatus(clear ? t.cleared : t.saved); workbench.refreshVoiceServices()
+    } catch (error) {
+      if (owner.current && !controller.signal.aborted) {
+        const code = error instanceof WorkspaceServerError ? error.answer.error : undefined
+        setFailure(code === 'speech-settings-conflict' ? t.conflict : code === 'speech-settings-invalid' ? t.invalid : code === 'speech-settings-busy' ? t.busy : t.failed)
+      }
+    } finally { if (owner.current && !controller.signal.aborted) setBusy(false) }
+  }
+  const disabled = busy || loading || !settings?.writable
+  return <section className="pmw-speech-settings pm-ui" aria-label={t.title}>
+    <PmPanelHeader title={t.title} />
+    <div className="pmw-speech-settings__content">
+      <p>{t.description}</p>
+      {loading && <PmNotice>{t.loading}</PmNotice>}
+      {failure && <PmNotice tone="danger">{failure} <PmButton small disabled={busy || loading} onClick={() => void load()}>{t.retry}</PmButton></PmNotice>}
+      {status && <PmNotice tone="accent">{status}</PmNotice>}
+      <PmCard><div className="pmw-speech-settings__fields">
+        <PmField label={t.service}><span>{t.provider} · {t.model}</span><PmBadge tone={settings?.configured ? 'accent' : 'neutral'}>{settings?.configured ? t.configured : t.unconfigured}</PmBadge></PmField>
+        {settings && <p>{t.source[settings.source]}</p>}
+        <PmInput type="password" label={t.key} hint={t.keyHint} placeholder={settings?.configured ? t.keySaved : t.keyPlaceholder} value={key} disabled={disabled} autoComplete="new-password" spellCheck={false} maxLength={8192} onChange={event => { dirty.current = Boolean(event.target.value.trim() || appId.trim()); setKey(event.target.value); setStatus(undefined) }} />
+        <PmInput label={t.appId} hint={t.appIdHint} placeholder={settings?.appIdConfigured ? t.keySaved : t.appIdPlaceholder} value={appId} disabled={disabled} autoComplete="off" inputMode="numeric" spellCheck={false} maxLength={32} onChange={event => { dirty.current = Boolean(event.target.value.trim() || key.trim()); setAppId(event.target.value); setStatus(undefined) }} />
+        <div className="pmw-speech-settings__actions"><PmButton variant="accent" loading={busy} disabled={disabled || !key.trim() && !settings?.configured} onClick={() => void save()}>{t.save}</PmButton><PmButton disabled={busy || loading || dirty.current} onClick={() => void load(true)}>{t.check}</PmButton></div>
+      </div></PmCard>
+      <PmNotice>{t.verification}</PmNotice>
+      <p>{t.privacy}</p>
+      <div className="pmw-speech-settings__actions"><a className="pm-ui-link" href="https://console.volcengine.com/speech/new/setting/apikeys" target="_blank" rel="noreferrer">{t.console}</a>{settings?.stored && <PmButton small variant="ghost" disabled={disabled} onClick={() => setConfirm(true)}>{t.remove}</PmButton>}</div>
+    </div>
+    <PmDialog open={confirm} label={t.removeTitle} closeLabel={t.cancel} busy={busy} onClose={() => setConfirm(false)} description={t.removeHint} footer={<><PmButton disabled={busy} onClick={() => setConfirm(false)}>{t.cancel}</PmButton><PmButton variant="danger" loading={busy} onClick={() => void save(true)}>{t.remove}</PmButton></>} />
+  </section>
+}

package/src/panels/TranscriptionAdoption.tsx

@@ -0,0 +1,147 @@
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { prepareTranscriptionAdoption } from '@lincyaw/kernel'
+import type { CanonicalSource, NarrationNode, TeachingDocument, TranscriptionRevision, TranscriptionAdoptionDraft, TranscriptionAdoptionPart, TranscriptionAdoptionPlan } from '@lincyaw/kernel'
+import { PmBadge, PmButton, PmDialog, PmField, PmNotice, PmSelect, PmTextarea } from '../components.tsx'
+import { useWorkbench, useWorkbenchState } from '../context.tsx'
+import { NarrationEditor } from '../document-editor/NarrationEditor.tsx'
+import { narrationToNative } from '../document-editor/narration.ts'
+import type { NativeNarrationEditor } from '../document-editor/narration-schema.tsx'
+import { TRANSCRIPTION_MESSAGES } from '../transcription-messages.ts'
+
+interface Props { identity: string, candidate: TranscriptionRevision, document: TeachingDocument, sectionId: string, stepId: string, disabled: boolean }
+interface Draft { id: string, revision: number, nodes?: NarrationNode[], discarded: string[], shared: 'fork' | 'edit-shared', baseVersion?: string, applied?: boolean }
+const ordered = (value: unknown): unknown => Array.isArray(value) ? value.map(ordered) : value && typeof value === 'object' ? Object.fromEntries(Object.keys(value).sort().map(key => [key, ordered((value as Record<string, unknown>)[key])])) : value
+const same = (a: unknown, b: unknown) => JSON.stringify(ordered(a)) === JSON.stringify(ordered(b))
+const displayed = (nodes: readonly NarrationNode[]) => nodes.map(node => node.type === 'text' ? node.text : node.type === 'pronunciation' ? node.display : '').join('')
+function restore(key: string): { draft: Draft, failed: boolean } {
+  const fallback = () => ({ draft: { id: crypto.randomUUID(), revision: 0, discarded: [], shared: 'fork' as const }, failed: false })
+  try {
+    const raw = localStorage.getItem(key)
+    if (!raw) return fallback()
+    const value = JSON.parse(raw)
+    if (!value || typeof value.id !== 'string' || !Number.isSafeInteger(value.revision) || value.revision < 0 || !Array.isArray(value.discarded) || !value.discarded.every((key: unknown) => typeof key === 'string') || !['fork', 'edit-shared'].includes(value.shared)
+      || value.baseVersion !== undefined && typeof value.baseVersion !== 'string' || value.applied !== undefined && typeof value.applied !== 'boolean'
+      || value.nodes !== undefined && (!Array.isArray(value.nodes) || !value.nodes.every((node: NarrationNode) => node && (node.type === 'text' && typeof node.text === 'string' || node.type === 'pronunciation' && typeof node.display === 'string' && typeof node.spoken === 'string' || node.type === 'cue' && typeof node.id === 'string' && typeof node.action === 'string')))) throw new Error('invalid-draft')
+    return { draft: value, failed: false }
+  } catch { return { ...fallback(), failed: true } }
+}
+
+export function TranscriptionAdoption(props: Props) {
+  const locale = useWorkbenchState(state => state.locale), t = TRANSCRIPTION_MESSAGES[locale]
+  const ids = props.document.steps[props.stepId]?.narrationIds ?? []
+  const [selected, setSelected] = useState(ids[0] ?? ''), [segment, setSegment] = useState('all')
+  const narrationId = ids.includes(selected) ? selected : ids[0]
+  const segments = segment === 'all' ? props.candidate.result.segments.map(value => value.id) : [segment]
+  return <>
+    {ids.length > 1 && <PmSelect label={t.narration} value={narrationId ?? ''} disabled={props.disabled} onChange={event => setSelected(event.target.value)}>{ids.map((id, index) => <option key={id} value={id}>{t.narration} {index + 1}</option>)}</PmSelect>}
+    {props.candidate.result.segments.length > 1 && <PmSelect label={t.segments} value={segment} disabled={props.disabled} onChange={event => setSegment(event.target.value)}><option value="all">{t.allSegments}</option>{props.candidate.result.segments.map((value, index) => <option key={value.id} value={value.id}>{t.segment(index)} · {value.text.slice(0, 30)}</option>)}</PmSelect>}
+    <AdoptionTarget key={JSON.stringify([narrationId, segments])} {...props} narrationId={narrationId} segments={segments} />
+  </>
+}
+
+function AdoptionTarget({ identity, candidate, document, sectionId, stepId, disabled, narrationId, segments }: Props & { narrationId?: string, segments: string[] }) {
+  const workbench = useWorkbench(), locale = useWorkbenchState(state => state.locale), t = TRANSCRIPTION_MESSAGES[locale], source = useWorkbenchState(state => state.authoring)
+  const key = `presmium.transcription-draft.v1:${JSON.stringify([identity, candidate.transcriptionId, candidate.revision, stepId, narrationId, segments])}`
+  const [restored] = useState(() => restore(key)), [draft, setDraft] = useState(restored.draft), latest = useRef(draft)
+  const [storageFailed, setStorageFailed] = useState(restored.failed), [composing, setComposing] = useState(false)
+  const [plan, setPlan] = useState<TranscriptionAdoptionPlan>(), [reviewing, setReviewing] = useState(false), [applying, setApplying] = useState(false), [open, setOpen] = useState(false), [failure, setFailure] = useState<string>(), [status, setStatus] = useState<string>()
+  const editor = useRef<NativeNarrationEditor>(), generation = useRef(0)
+  useEffect(() => () => { generation.current++ }, [])
+  const binding: CanonicalSource = { documentId: document.id, version: source?.version ?? '', fingerprint: source?.fingerprint ?? '' }
+  const references = narrationId ? Object.values(document.steps).filter(step => step.narrationIds.includes(narrationId)).map(step => step.id) : []
+  const target = { sectionId, stepId, ...narrationId ? { narrationId } : {}, segmentIds: segments, ...references.length > 1 ? { shared: draft.shared, ...draft.shared === 'edit-shared' ? { affectedStepIds: references } : {} } : {} }
+  const baseline = useMemo(() => prepareTranscriptionAdoption(document, candidate, { id: draft.id, source: binding, candidate: { id: candidate.transcriptionId, revision: candidate.revision }, draftRevision: draft.revision, targets: [target] }), [document, candidate, draft.id, draft.shared, sectionId, stepId, narrationId, segments.join('\0'), binding.version, binding.fingerprint])
+  const original = baseline.targets[0], atoms = original?.atoms ?? []
+  const proposed = original?.proposed.map(node => {
+    if (node.type !== 'cue') return node
+    const previous = baseline.impact.forks.flatMap(fork => fork.cues).find(cue => cue.to === node.id)
+    return previous ? atoms.find(atom => atom.node.type === 'cue' && atom.node.id === previous.from)?.node ?? node : node
+  })
+  const nodes = draft.nodes ?? proposed ?? [{ type: 'text' as const, text: candidate.result.segments.filter(value => segments.includes(value.id)).map(value => value.text).join('\n') }]
+  const content = (): { parts: TranscriptionAdoptionPart[], used: Set<string>, invalid: boolean } => {
+    const used = new Set<string>(), parts: TranscriptionAdoptionPart[] = []; let invalid = false
+    for (const node of latest.current.nodes ?? nodes) {
+      if (node.type === 'text') parts.push({ type: 'text', text: node.text })
+      else {
+        const atom = atoms.find(atom => !used.has(atom.key) && same(atom.node, node))
+        if (!atom) invalid = true
+        else { used.add(atom.key); parts.push({ type: 'preserve', key: atom.key }) }
+      }
+    }
+    return { parts, used, invalid }
+  }
+  const parsed = content(), sourceReady = Boolean(source?.identity === identity && source.version && source.fingerprint && !source.loading && !source.dirty && !source.saving && !source.composing && !source.restored && !source.error)
+  const planCurrent = Boolean(plan && plan.source.version === source?.version && plan.source.fingerprint === source?.fingerprint)
+  const change = (patch: Partial<Draft>) => {
+    generation.current++
+    const next = { ...latest.current, ...patch, revision: latest.current.revision + 1, applied: false }
+    latest.current = next; setDraft(next); setPlan(undefined); setFailure(undefined); setStatus(undefined)
+    try { localStorage.setItem(key, JSON.stringify(next)); setStorageFailed(false) } catch { setStorageFailed(true) }
+  }
+  const pause = () => { workbench.stopAuditions(); void workbench.pausePlayback().catch(() => {}) }
+  const preview = async () => {
+    const now = workbench.getState().authoring
+    if (disabled || reviewing || applying || composing || !sourceReady || !now?.version || !now.fingerprint || parsed.invalid) return
+    pause()
+    if (latest.current.baseVersion && latest.current.baseVersion !== now.version) change({ id: crypto.randomUUID(), baseVersion: now.version })
+    else if (!latest.current.baseVersion) change({ baseVersion: now.version })
+    const value = latest.current, request = ++generation.current, normalized = content()
+    const retainsOriginal = references.length > 1 && value.shared === 'fork'
+    const removeCueTimings = atoms.filter(atom => value.discarded.includes(atom.key) && atom.node.type === 'cue' && !retainsOriginal && Object.hasOwn(document.production.cueTimings ?? {}, atom.node.id)).map(atom => (atom.node as Extract<NarrationNode, { type: 'cue' }>).id)
+    const sent: TranscriptionAdoptionDraft = { id: value.id, source: { documentId: document.id, version: now.version, fingerprint: now.fingerprint }, candidate: { id: candidate.transcriptionId, revision: candidate.revision }, draftRevision: value.revision, targets: [{ ...target, content: normalized.parts, discardAtoms: value.discarded.filter(key => atoms.some(atom => atom.key === key)) }], ...removeCueTimings.length ? { removeCueTimings } : {} }
+    setReviewing(true); setFailure(undefined)
+    try {
+      const answer = await workbench.planDocumentTranscription(sent, { identity, version: now.version })
+      if (request !== generation.current || latest.current.revision !== sent.draftRevision) return
+      setPlan(answer); setOpen(true)
+    } catch { if (request === generation.current) setFailure(t.previewFailed) }
+    finally { setReviewing(false) }
+  }
+  const apply = async () => {
+    if (!plan?.planId || !planCurrent || plan.conflicts.length || plan.draftRevision !== latest.current.revision || composing || applying || !sourceReady) return
+    const sent = plan, planId = plan.planId
+    setApplying(true); setFailure(undefined)
+    try {
+      const answer = await workbench.adoptDocumentTranscription({ planId, source: sent.source, candidate: sent.candidate, draftRevision: sent.draftRevision }, { identity, version: sent.source.version })
+      if (latest.current.id === sent.changeId && latest.current.revision === sent.draftRevision) {
+        const next: Draft = { ...latest.current, id: crypto.randomUUID(), revision: 0, discarded: [], baseVersion: answer.version, applied: true }
+        latest.current = next; setDraft(next)
+        try { localStorage.setItem(key, JSON.stringify(next)); setStorageFailed(false) } catch { setStorageFailed(true) }
+      }
+      setPlan(undefined); setOpen(false); setStatus(t.adopted)
+    } catch { setFailure(t.applyFailed) }
+    finally { setApplying(false) }
+  }
+  if (!displayed(nodes).trim() && !atoms.length) return <span>{t.empty}</span>
+  return <>
+    <PmField label={t.text} group><NarrationEditor identity={key} narrationId={original?.outputNarrationId ?? draft.id} content={nodes} getContent={() => latest.current.nodes ?? nodes} locale={locale} advanced={false} readOnly={disabled || applying}
+      onReady={value => { editor.current = value }} onComposition={setComposing} onFocus={pause} onChange={value => {
+        const used = new Set<string>()
+        for (const node of value) { const atom = atoms.find(atom => !used.has(atom.key) && same(atom.node, node)); if (atom) used.add(atom.key) }
+        change({ nodes: value, discarded: latest.current.discarded.filter(key => !used.has(key)) })
+      }} /></PmField>
+    {references.length > 1 && <PmSelect label={t.shared} value={draft.shared} disabled={disabled || applying} onChange={event => change({ shared: event.target.value as Draft['shared'] })}><option value="fork">{t.fork}</option><option value="edit-shared">{t.editShared}</option></PmSelect>}
+    {atoms.length > 0 && <details open={atoms.some(atom => !parsed.used.has(atom.key) && !draft.discarded.includes(atom.key)) || undefined}><summary>{t.atoms}</summary><div className="pmw-transcription__atoms">{atoms.map(atom => {
+      const used = parsed.used.has(atom.key), removed = draft.discarded.includes(atom.key)
+      const cleanup = atom.node.type === 'cue' && Object.hasOwn(document.production.cueTimings ?? {}, atom.node.id) && !(references.length > 1 && draft.shared === 'fork')
+      return <div key={atom.key} className="pmw-transcription__actions"><span>{atom.node.type === 'pronunciation' ? `${t.pronunciation} · ${atom.node.display} → ${atom.node.spoken}` : `${t.cue} ${atoms.indexOf(atom) + 1}`}</span>
+        {used ? <PmBadge tone="ok">{t.atoms}</PmBadge> : <>
+          <PmButton small disabled={disabled || applying || composing} onClick={() => { const field = editor.current; if (!field) return; field.focus(); field.insertInlineContent(narrationToNative('adoption-atom', [atom.node])[0]!.content ?? []) }}>{t.keepAtom}</PmButton>
+          <PmButton small aria-pressed={removed} disabled={disabled || applying} onClick={() => change({ discarded: removed ? draft.discarded.filter(key => key !== atom.key) : [...draft.discarded, atom.key] })}>{cleanup ? t.removeTiming : t.removeAtom}</PmButton>
+        </>}
+      </div>
+    })}</div></details>}
+    {parsed.invalid && <PmNotice tone="warn">{t.unknownAtom}</PmNotice>}
+    {storageFailed && <PmNotice tone="warn">{t.draftStorage}</PmNotice>}
+    {failure && <PmNotice tone="danger">{failure}</PmNotice>}
+    {status && <span role="status">{status}</span>}
+    <div className="pmw-transcription__actions"><PmButton small variant="primary" loading={reviewing} disabled={disabled || !sourceReady || composing || applying || parsed.invalid || draft.applied} onClick={() => void preview()}>{t.review}</PmButton></div>
+    {open && plan && <PmDialog open label={t.confirm} closeLabel={t.edit} busy={applying} onClose={() => setOpen(false)} footer={<><PmButton disabled={applying} onClick={() => setOpen(false)}>{t.edit}</PmButton><PmButton variant="primary" loading={applying} disabled={!plan.planId || !planCurrent || plan.conflicts.length > 0 || !sourceReady || composing || plan.draftRevision !== draft.revision} onClick={() => void apply()}>{t.apply}</PmButton></>}>
+      <div className="pmw-transcription__review"><PmTextarea label={t.before} readOnly value={displayed(plan.targets[0]?.before ?? [])} /><PmTextarea label={t.after} readOnly value={displayed(plan.targets[0]?.proposed ?? [])} /></div>
+      {plan.impact.stepIds.length > 1 && <PmNotice tone="warn">{t.affected(plan.impact.stepIds.length)}</PmNotice>}
+      {plan.conflicts.length > 0 && <PmNotice tone="warn">{t.conflicts}</PmNotice>}
+      {!planCurrent && <PmNotice tone="warn">{t.sourceChanged}</PmNotice>}
+      {failure && <PmNotice tone="danger">{failure}</PmNotice>}
+    </PmDialog>}
+  </>
+}