@lincyaw/workbench 0.0.0-stage → 0.2.0-rc.0

package/src/panels/DocumentVoiceDialog.tsx

@@ -0,0 +1,179 @@
+import { useEffect, useRef, useState } from 'react'
+import type { SpeechEngineInfo, VoiceCatalogAnswer, VoicePreviewQuote } from '@lincyaw/kernel'
+import { PmButton, PmDialog, PmField, PmInput, PmNotice, PmSearchList, PmSegmented, PmSelect } from '../components.tsx'
+import { useWorkbench, useWorkbenchState } from '../context.tsx'
+import { documentVoiceStepIds, previewDocumentVoiceChange, resolveDocumentStepVoice } from '../document-voices.ts'
+import type { DocumentVoiceImpact } from '../document-voices.ts'
+import { clearVoiceDraft, keepVoiceDraft, readVoiceDraft, voiceDraftStorageStatus } from '../voice-drafts.ts'
+import type { VoiceDraft } from '../voice-drafts.ts'
+import { PRODUCTION_MESSAGES } from '../production-messages.ts'
+import { VOICE_CLONE_MESSAGES } from '../voice-clone-messages.ts'
+import { VOICE_MESSAGES, voiceFailure } from '../voice-messages.ts'
+import { prepareVoiceSnapshot, voiceSnapshotCurrent } from '../voice-snapshot.ts'
+import type { VoiceSnapshot } from '../voice-snapshot.ts'
+import { isAgentChanging } from '../workbench.ts'
+import { VoiceCloneDialog } from './VoiceCloneDialog.tsx'
+import { VoicePreviewDialog } from './VoicePreviewDialog.tsx'
+import { VoiceScopeField } from './VoiceScopeField.tsx'
+
+interface Review { draft: VoiceDraft, impact: DocumentVoiceImpact, scopeLabel: string, targets: string[], expected: { identity: string, version: string, fingerprint: string } }
+const supportsLanguage = (languages: string[], lang: string) => !languages.length || languages.some(value => value.toLowerCase().split('-')[0] === lang.toLowerCase().split('-')[0])
+
+/** Catalogue choices are drafts; one explicit, reviewed action changes the canonical source actor. */
+export function DocumentVoiceDialog({ stepId, onClose }: { stepId: string, onClose(): void }) {
+  const workbench = useWorkbench(), actor = useWorkbenchState(state => state.authoring), locale = useWorkbenchState(state => state.locale)
+  const blocked = useWorkbenchState(state => Boolean(state.authoring?.loading || state.authoring?.composing) || isAgentChanging(state))
+  const t = VOICE_MESSAGES[locale], p = PRODUCTION_MESSAGES[locale], c = VOICE_CLONE_MESSAGES[locale]
+  const serviceVersion = useWorkbenchState(state => state.voiceServiceVersion)
+  const identity = useRef(actor!.identity!).current, directory = useRef(actor!.directory).current
+  const [restored] = useState(() => readVoiceDraft(workbench.client, identity, stepId))
+  const [draft, setDraft] = useState<VoiceDraft>(() => restored ?? { version: actor!.version!, scope: { kind: 'step', stepId }, source: resolveDocumentStepVoice(actor!.content!, stepId).value ?? null, replaceOverrides: false })
+  const [storageFailed, setStorageFailed] = useState(() => voiceDraftStorageStatus(workbench.client, identity, stepId) !== 'available')
+  const [engineFilter, setEngineFilter] = useState(draft.source?.type === 'tts' ? draft.source.voice.engine : undefined)
+  const [language, setLanguage] = useState(''), [query, setQuery] = useState(''), [catalog, setCatalog] = useState<VoiceCatalogAnswer>()
+  const [catalogBusy, setCatalogBusy] = useState(true), [catalogFailure, setCatalogFailure] = useState<string>(), [reload, setReload] = useState(0)
+  const [busy, setBusy] = useState(false), [failure, setFailure] = useState<string>(), [review, setReview] = useState<Review>()
+  const [preview, setPreview] = useState<{ quote: VoicePreviewQuote, snapshot: VoiceSnapshot }>(), [cloning, setCloning] = useState(false)
+  const owner = useRef({ active: true, generation: 0 }), request = useRef<AbortController>()
+  useEffect(() => () => { owner.current.active = false; owner.current.generation++; request.current?.abort() }, [])
+  useEffect(() => {
+    const controller = new AbortController()
+    setCatalogBusy(true); setCatalogFailure(undefined)
+    void workbench.client.readVoiceCatalog(directory, engineFilter, undefined, controller.signal).then(value => {
+      if (!controller.signal.aborted) setCatalog(value)
+    }, error => { if (!controller.signal.aborted) setCatalogFailure(voiceFailure(error, locale)) }).finally(() => { if (!controller.signal.aborted) setCatalogBusy(false) })
+    return () => controller.abort()
+  }, [workbench, directory, engineFilter, reload, actor?.reset, locale, serviceVersion])
+  const document = actor?.content, validTarget = actor?.identity === identity && Boolean(document?.steps[stepId])
+  const engineId = engineFilter ?? catalog?.engine
+  const engines = catalog?.engines.filter(engine => engine.tts) ?? []
+  const engine: SpeechEngineInfo | undefined = engines.find(engine => engine.id === (draft.source?.type === 'tts' ? draft.source.voice.engine ?? engineId : engineId))
+  const voices = catalog?.catalog.status === 'available' ? catalog.catalog.voices : []
+  const lang = document?.metadata.lang ?? 'zh-CN'
+  const languages = [...new Set(voices.flatMap(voice => voice.lang))].sort()
+  const rateRange = engine?.parameters?.rate, styles = engine?.parameters?.styles
+  const normalizedRate = draft.rateInput?.normalize('NFKC').trim()
+  const rate = normalizedRate ? Number(normalizedRate) : undefined
+  const rateInvalid = draft.rateInput !== undefined && normalizedRate !== undefined && normalizedRate.length > 0 && (!rateRange || !/^\d+(?:\.\d+)?$/.test(normalizedRate) || !Number.isFinite(rate) || rate! < rateRange.min || rate! > rateRange.max)
+  const sourceType = draft.source === null ? 'inherit' : draft.source.type
+  const current = () => owner.current.active && workbench.getState().authoring?.identity === identity
+  const edit = (value: VoiceDraft) => {
+    request.current?.abort(); owner.current.generation++
+    setBusy(false); setFailure(undefined); setReview(undefined); setPreview(undefined); workbench.stopAuditions()
+    setDraft(value); setStorageFailed(!keepVoiceDraft(workbench.client, identity, stepId, value))
+  }
+  const checkedDraft = (value: VoiceDraft): VoiceDraft => ({ ...value, version: workbench.getState().authoring!.version! })
+  const checkScope = async (value = draft) => {
+    if (!current() || !validTarget || blocked || value.source?.type === 'tts' && (rateInvalid || !value.source.voice.voice.trim())) return
+    const generation = ++owner.current.generation, controller = new AbortController()
+    request.current?.abort(); request.current = controller; setBusy(true); setFailure(undefined)
+    try {
+      await workbench.flushPendingEdits(controller.signal)
+      if (!current() || generation !== owner.current.generation) return
+      const source = workbench.getState().authoring, latest = workbench.getDocument(identity)
+      if (!source?.version || !source.fingerprint || !latest || source.dirty || source.saving || source.error || source.restored || source.composing) throw new Error('voice-context-changed')
+      const proposal = checkedDraft(value), impact = previewDocumentVoiceChange(latest, proposal.scope, proposal.source, { replaceOverrides: proposal.replaceOverrides })
+      setDraft(proposal); setStorageFailed(!keepVoiceDraft(workbench.client, identity, stepId, proposal))
+      const targets = documentVoiceStepIds(latest, proposal.scope).map(id => { const step = latest.steps[id]!, page = latest.sections[step.sectionId]!; return `${page.title} · ${t.step(latest.sectionOrder.indexOf(page.id) + 1, page.stepOrder.indexOf(id) + 1)}` })
+      setReview({ draft: proposal, impact, scopeLabel: t.scopes[proposal.scope.kind], targets, expected: { identity, version: source.version, fingerprint: source.fingerprint } })
+    } catch (error) { if (current() && generation === owner.current.generation) setFailure(voiceFailure(error, locale)) }
+    finally { if (current() && generation === owner.current.generation) setBusy(false) }
+  }
+  const apply = async () => {
+    if (!review || !current()) return
+    const confirmation = review, generation = ++owner.current.generation
+    setBusy(true); setFailure(undefined)
+    try {
+      const saved = await workbench.applyDocumentVoice(confirmation.draft.scope, confirmation.draft.source, { replaceOverrides: confirmation.draft.replaceOverrides }, confirmation.expected)
+      if (!current() || generation !== owner.current.generation) return
+      if (!saved) throw new Error('voice-context-changed')
+      if (!clearVoiceDraft(workbench.client, identity, stepId, confirmation.draft)) { setStorageFailed(true); setReview(undefined); return }
+      onClose()
+    } catch (error) { if (current() && generation === owner.current.generation) { setReview(undefined); setFailure(voiceFailure(error, locale)) } }
+    finally { if (current() && generation === owner.current.generation) setBusy(false) }
+  }
+  const audition = async (mode: 'sample' | 'step') => {
+    if (draft.source?.type !== 'tts' || rateInvalid || !validTarget || blocked) return
+    const generation = ++owner.current.generation, controller = new AbortController(), voice = draft.source.voice
+    request.current?.abort(); request.current = controller; setBusy(true); setFailure(undefined)
+    try {
+      const snapshot = await prepareVoiceSnapshot(workbench, stepId, controller.signal)
+      const quote = await workbench.client.readVoicePreview(directory, { revision: snapshot.revision, voice, mode, ...mode === 'step' ? { target: snapshot.target } : {} }, controller.signal)
+      if (!current() || generation !== owner.current.generation) return
+      if (!voiceSnapshotCurrent(workbench, snapshot) || quote.source.version !== snapshot.source.version || quote.source.fingerprint !== snapshot.source.fingerprint || quote.source.documentId !== snapshot.source.documentId) throw new Error('voice-context-changed')
+      setPreview({ quote, snapshot })
+    } catch (error) { if (current() && generation === owner.current.generation) setFailure(voiceFailure(error, locale)) }
+    finally { if (current() && generation === owner.current.generation) setBusy(false) }
+  }
+  const reviewCurrent = Boolean(review && actor?.version === review.expected.version && actor.fingerprint === review.expected.fingerprint && !actor.dirty && !actor.saving && !actor.error && !blocked)
+  if (!document || !validTarget) return <PmDialog open label={t.settings} closeLabel={t.close} onClose={onClose}><PmNotice tone="warn">{p.draftChanged}</PmNotice></PmDialog>
+  return <>
+    <PmDialog open label={t.settings} closeLabel={t.close} onClose={onClose} footer={<><PmButton onClick={onClose}>{t.close}</PmButton><PmButton loading={busy} disabled={blocked || rateInvalid || draft.source?.type === 'tts' && !draft.source.voice.voice.trim() || draft.scope.kind === 'steps' && !draft.scope.stepIds.length} variant="primary" onClick={() => void checkScope()}>{t.check}</PmButton></>}>
+      <div className="pmw-voice__form">
+        {restored && <PmNotice tone="accent">{t.draftRecovered}</PmNotice>}
+        {storageFailed && <PmNotice tone="warn">{t.recoveryFailed}</PmNotice>}
+        {failure && <PmNotice tone="danger">{failure}</PmNotice>}
+        <VoiceScopeField document={document} stepId={stepId} value={draft.scope} disabled={busy || blocked} onChange={scope => edit({ ...draft, scope, replaceOverrides: scope.kind === 'steps' && draft.source === null ? true : scope.kind === 'step' ? false : draft.replaceOverrides })} />
+        <PmField label={t.source} group><PmSegmented label={t.source} value={sourceType} disabled={busy || blocked} options={[
+          { value: 'tts', label: t.voice }, { value: 'none', label: p.none }, { value: 'inherit', label: t.inherit },
+          ...sourceType === 'recording' ? [{ value: 'recording', label: p.recording }] : [],
+        ]} onChange={value => {
+          if (value === 'none') edit({ ...draft, source: { type: 'none' }, rateInput: undefined })
+          else if (value === 'inherit') edit({ ...draft, source: null, rateInput: undefined, replaceOverrides: draft.scope.kind === 'steps' ? true : draft.replaceOverrides })
+          else if (value === 'tts') edit({ ...draft, source: { type: 'tts', voice: { ...engineId ? { engine: engineId } : {}, voice: '' } }, rateInput: undefined })
+        }} /></PmField>
+        {draft.source?.type === 'recording' && <span>{document.assets[draft.source.assetId]?.title || p.recording}</span>}
+        {draft.source?.type === 'tts' && <>
+          <PmSelect label={t.provider} value={engineId ?? ''} disabled={!engines.length || busy || blocked} onChange={event => { setEngineFilter(event.target.value); setLanguage(''); setQuery('') }}>
+            {!engines.length && <option value={engineId ?? ''}>{engineId ? `${engineId} · ${t.savedEngineUnavailable}` : t.noServiceOption}</option>}
+            {engines.map(engine => <option key={engine.id} value={engine.id}>{engine.id} · {engine.provider}</option>)}
+            {engineId && engines.length > 0 && !engines.some(engine => engine.id === engineId) && <option value={engineId}>{engineId} · {t.savedEngineUnavailable}</option>}
+          </PmSelect>
+          {catalogFailure && <PmButton small onClick={() => setReload(value => value + 1)}>{t.retry}</PmButton>}
+          {catalog?.catalog.status === 'unavailable' && <PmNotice tone="warn">{catalog.catalog.reason === 'not-configured' ? t.noService : t.catalogUnsupported}</PmNotice>}
+          {voices.length > 0 && <PmSelect label={t.language} value={language} disabled={busy || blocked} onChange={event => setLanguage(event.target.value)}><option value="">{t.allLanguages}</option>{languages.map(lang => <option key={lang} value={lang}>{lang}</option>)}</PmSelect>}
+          {(catalogBusy || catalogFailure || catalog?.catalog.status === 'available') && <PmSearchList label={t.available} searchLabel={t.search} searchPlaceholder={t.searchPlaceholder} emptyLabel={t.empty} loadingLabel={t.loadingVoices} loading={catalogBusy} error={catalogFailure} disabled={busy || blocked || catalog?.catalog.status !== 'available'} query={query} onQueryChange={setQuery}
+            value={draft.source.voice.engine === engineId || !draft.source.voice.engine ? draft.source.voice.voice : undefined}
+            items={voices.filter(voice => !language || voice.lang.includes(language)).map(voice => ({ value: voice.id, label: voice.label, description: [voice.lang.join(', '), voice.cloned ? c.cloned : '', supportsLanguage(voice.lang, lang) ? '' : t.languageMismatch].filter(Boolean).join(' · '), keywords: [voice.id, ...voice.lang, engineId ?? ''], disabled: !supportsLanguage(voice.lang, lang) }))}
+            resultsLabel={t.results} onValueChange={voice => edit({ ...draft, source: { type: 'tts', voice: { ...engineId ? { engine: engineId } : {}, voice } }, rateInput: undefined })} />}
+          {engine?.clone && <div className="pmw-voice__actions"><PmButton small disabled={busy || blocked} onClick={() => setCloning(true)}>{c.open}</PmButton></div>}
+          <PmField label={p.selectedVoice}><span>{draft.source.voice.voice || t.unset}</span></PmField>
+          {rateRange && <PmInput label={t.rate} width="number" inputMode="decimal" maxLength={32} value={draft.rateInput ?? (draft.source.voice.rate === undefined ? '' : String(draft.source.voice.rate))} error={rateInvalid ? t.rateInvalid(rateRange.min, rateRange.max) : undefined} disabled={busy || blocked} onChange={event => {
+            if (draft.source?.type !== 'tts') return
+            const raw = event.target.value, normalized = raw.normalize('NFKC').trim(), value = Number(normalized)
+            const valid = /^\d+(?:\.\d+)?$/.test(normalized) && Number.isFinite(value) && value >= rateRange.min && value <= rateRange.max
+            const voice = { ...draft.source.voice }
+            if (!normalized) delete voice.rate
+            else if (valid) voice.rate = value
+            edit({ ...draft, rateInput: raw, source: { type: 'tts', voice } })
+          }} />}
+          {styles?.length ? <PmSelect label={t.style} value={draft.source.voice.style ?? ''} disabled={busy || blocked} onChange={event => {
+            if (draft.source?.type !== 'tts') return
+            const voice = { ...draft.source.voice }
+            if (event.target.value) voice.style = event.target.value; else delete voice.style
+            edit({ ...draft, source: { type: 'tts', voice } })
+          }}><option value="">{t.styleDefault}</option>{styles.map(style => <option key={style} value={style}>{style}</option>)}</PmSelect> : null}
+          {draft.rateInput !== undefined && !rateRange && <PmNotice tone="warn">{p.draftChanged} <PmButton small onClick={() => edit({ ...draft, rateInput: undefined })}>{t.recheck}</PmButton></PmNotice>}
+          <div className="pmw-voice__actions"><PmButton small icon="audio" disabled={busy || blocked || !draft.source.voice.voice || rateInvalid} onClick={() => void audition('sample')}>{t.standard}</PmButton><PmButton small icon="audio" disabled={busy || blocked || !draft.source.voice.voice || rateInvalid} onClick={() => void audition('step')}>{p.currentScript}</PmButton></div>
+          <p className="pmw-pane__footer">{t.previewHint}</p>
+        </>}
+        {draft.scope.kind !== 'step' && !(draft.scope.kind === 'steps' && draft.source === null) && <PmField label={t.replace} group><PmSegmented label={t.replace} value={draft.replaceOverrides ? 'replace' : 'preserve'} disabled={busy || blocked} options={[{ value: 'preserve', label: t.preserve }, { value: 'replace', label: t.replaceAll }]} onChange={value => edit({ ...draft, replaceOverrides: value === 'replace' })} /></PmField>}
+      </div>
+    </PmDialog>
+    <PmDialog open={Boolean(review)} label={review?.draft.source === null ? p.restoreTitle : p.applyTitle} closeLabel={t.close} onClose={() => setReview(undefined)} busy={busy} description={review?.draft.source === null ? p.restoreHint : p.applyHint} footer={<><PmButton disabled={busy} onClick={() => setReview(undefined)}>{t.cancel}</PmButton><PmButton loading={busy} disabled={!reviewCurrent} variant={review?.draft.replaceOverrides && review.impact.overrides.pages + review.impact.overrides.steps > 0 ? 'danger' : 'primary'} onClick={() => void apply()}>{review?.draft.replaceOverrides && review.impact.overrides.pages + review.impact.overrides.steps > 0 ? p.replaceCount(review.impact.overrides.pages + review.impact.overrides.steps) : t.apply}</PmButton></>}>
+      {review && <div className="pmw-voice__form">
+        <PmField label={t.source}><span>{review.draft.source === null ? t.inherit : review.draft.source.type === 'none' ? p.none : review.draft.source.type === 'recording' ? document.assets[review.draft.source.assetId]?.title || p.recording : `${review.draft.source.voice.voice}${review.draft.source.voice.engine ? ` · ${review.draft.source.voice.engine}` : ''}`}</span></PmField>
+        {review.draft.source?.type === 'tts' && <>
+          {review.draft.source.voice.rate !== undefined && <PmField label={t.rate}><span>{review.draft.source.voice.rate}</span></PmField>}
+          {review.draft.source.voice.style && <PmField label={t.style}><span>{review.draft.source.voice.style}</span></PmField>}
+        </>}
+        <PmField label={t.scope}><span>{review.scopeLabel}</span></PmField><details><summary>{t.selected(review.targets.length)}</summary><ul>{review.targets.map(target => <li key={target}>{target}</li>)}</ul></details><p>{p.counts(review.impact.updated, review.impact.preserved, review.impact.unchanged)}</p><p>{p.overridden(review.impact.overrides.none, review.impact.overrides.recording)}</p>{review.draft.replaceOverrides && <PmNotice tone="warn">{t.replaceAll} {p.keepAssets}</PmNotice>}{!reviewCurrent && <PmNotice tone="warn">{p.draftChanged}</PmNotice>}
+      </div>}
+    </PmDialog>
+    {cloning && engine && <VoiceCloneDialog directory={directory} engine={engine} lang={lang} onClose={() => setCloning(false)} onUse={(voice) => {
+      setCloning(false); setReload(value => value + 1)
+      edit({ ...draft, source: { type: 'tts', voice: { engine: engine.id, voice } }, rateInput: undefined })
+    }} />}
+    {preview && <VoicePreviewDialog quote={preview.quote} snapshot={preview.snapshot} onClose={() => setPreview(undefined)} onRecheck={() => { const mode = preview.quote.mode; setPreview(undefined); void audition(mode) }} />}
+  </>
+}

package/src/panels/DocumentVoiceField.tsx

@@ -0,0 +1,35 @@
+import { useEffect, useState } from 'react'
+import { PmButton, PmField } from '../components.tsx'
+import { useWorkbench, useWorkbenchState } from '../context.tsx'
+import { resolveDocumentStepVoice } from '../document-voices.ts'
+import { PRODUCTION_MESSAGES } from '../production-messages.ts'
+import { isAgentChanging } from '../workbench.ts'
+import { DocumentVoiceDialog } from './DocumentVoiceDialog.tsx'
+
+/** One current voice and selector, shared by document captions and production. */
+export function DocumentVoiceField({ stepId, disabled = false, onGenerate }: { stepId: string, disabled?: boolean, onGenerate?(): void }) {
+  const workbench = useWorkbench()
+  const source = useWorkbenchState(state => state.authoring)
+  const locale = useWorkbenchState(state => state.locale)
+  const blocked = useWorkbenchState(state => Boolean(state.authoring?.loading || state.authoring?.composing) || isAgentChanging(state))
+  const [open, setOpen] = useState(false)
+  useEffect(() => { setOpen(false) }, [source?.identity, stepId])
+  const document = source?.content, step = document?.steps[stepId], p = PRODUCTION_MESSAGES[locale]
+  if (!document || !step || !source?.identity) return null
+  const voice = resolveDocumentStepVoice(document, stepId)
+  const recording = voice.value?.type === 'recording' ? document.assets[voice.value.assetId] : undefined
+  const label = voice.value?.type === 'tts' ? voice.value.voice.voice
+    : voice.value?.type === 'none' ? p.none
+      : voice.value?.type === 'recording' ? recording?.title || p.recording : p.unset
+  return <>
+    <PmField group label={p.voice} hint={p.inherited[voice.inheritedFrom]}>
+      <span>{label}</span>
+      <div className="pmw-voice__actions">
+        <PmButton small icon="audio" disabled={disabled || blocked} onClick={() => { workbench.pauseDocumentStep(step.sectionId, stepId); workbench.stopAuditions(); setOpen(true) }}>{p.choose}</PmButton>
+        {onGenerate && <PmButton small icon="refresh" disabled={disabled || blocked} onClick={onGenerate}>{p.generate}</PmButton>}
+        {workbench.client.openSpeechSettings && <PmButton small variant="ghost" icon="sliders" onClick={() => { workbench.stopAuditions(); void workbench.pausePlayback(true).catch(() => {}); workbench.client.openSpeechSettings?.() }}>{p.serviceSettings}</PmButton>}
+      </div>
+    </PmField>
+    {open && <DocumentVoiceDialog key={`${source.identity}:${stepId}`} stepId={stepId} onClose={() => setOpen(false)} />}
+  </>
+}

package/src/panels/ExportPanel.tsx

@@ -0,0 +1,133 @@
+import { useEffect, useState } from 'react'
+import type { CSSProperties } from 'react'
+import type { CompileJob, OutputTarget } from '@lincyaw/kernel'
+import type { IconName } from '@lincyaw/design'
+import { PmBadge, PmButton, PmDialog, PmEmpty, PmIcon, PmIconButton, PmMascot, PmNotice } from '../components.tsx'
+import { useMessages, useWorkbench, useWorkbenchState } from '../context.tsx'
+import { failureReason, timeAgo } from '../messages.ts'
+
+// The media types a browser shows by itself; a file of another type is downloaded.
+const SHOWN = new Set(['text/html', 'application/pdf'])
+const isVideo = (type: string | undefined) => type?.startsWith('video/') === true
+
+const TONES: Record<CompileJob['state'], 'neutral' | 'accent' | 'ok' | 'warn' | 'danger'> = { queued: 'neutral', running: 'accent', done: 'ok', failed: 'danger', cancelled: 'warn' }
+
+function iconOf(target: string): IconName {
+  if (target === 'web') return 'website'
+  if (target === 'slides' || target === 'pdf' || target === 'pptx') return 'slides'
+  if (target === 'notebook') return 'notebook'
+  if (target === 'video' || target === 'lecture') return 'video'
+  return 'export'
+}
+
+/**
+ * Making the document into files, as Word's Export: what it can be made into, each a button, and what was made, by the
+ * author or the AI, newest first, with its progress, its log, and the file to open, play or download.
+ */
+export function ExportPanel({ documentOnly = false, embedded = false, onClose }: { documentOnly?: boolean, embedded?: boolean, onClose(): void }) {
+  const t = useMessages()
+  const workbench = useWorkbench()
+  const document = useWorkbenchState(state => state.document)
+  useEffect(() => workbench.observeJobs(), [workbench, document])
+  const answer = useWorkbenchState(state => state.jobs)
+  const failure = useWorkbenchState(state => state.jobsFailure)
+  const source = useWorkbenchState(state => state.authoring)
+  const preparing = useWorkbenchState(state => state.jobPreparing)
+  const locale = useWorkbenchState(state => state.locale)
+  const [playing, setPlaying] = useState<CompileJob>()
+  const labelOf = (target: Pick<OutputTarget, 'id' | 'label'>) => (target.label[locale] !== target.id ? target.label[locale] : undefined) ?? t.outputLabels[target.id] ?? target.id
+  const included = (id: string) => !documentOnly || id !== 'video' && id !== 'lecture'
+  const targets = (answer?.targets ?? []).filter(target => included(target.id))
+  const jobs = (answer?.jobs ?? []).filter(job => included(job.target))
+  const label = (id: string) => labelOf(targets.find(target => target.id === id) ?? { id, label: {} })
+  const busy = (id: string) => jobs.some(job => job.target === id && (job.state === 'queued' || job.state === 'running'))
+  return (
+    <section className="pmw-pane" aria-labelledby={embedded ? undefined : 'pmw-export-title'} aria-label={embedded ? t.exportPane : undefined}>
+      {!embedded && <header className="pmw-pane__header">
+        <h2 id="pmw-export-title" className="pmw-pane__title">{documentOnly ? t.documentExport : t.exportPane}</h2>
+        <PmIconButton small icon="close" label={t.close} onClick={onClose} />
+      </header>}
+      {failure && <PmNotice tone="danger">{t.outputFailed(t.jobFailureReasons[failure] ?? failureReason(t, failure))}</PmNotice>}
+      {preparing && <PmNotice>{preparing.canCancel ? t.outputConfirmingSave : t.outputStarting} {preparing.canCancel && <PmButton small onClick={() => workbench.cancelJobPreparation()}>{t.cancelOutput}</PmButton>}</PmNotice>}
+      {!embedded && <h3 id="pmw-export-make" className="pmw-export__subtitle">{t.makeLabel}</h3>}
+      <ul className="pmw-export__targets" aria-labelledby={embedded ? undefined : 'pmw-export-make'} aria-label={embedded ? t.makeLabel : undefined}>
+        {targets.map(target => (
+          <li key={target.id}>
+            <PmButton small loading={preparing?.target === target.id} icon={iconOf(target.id)} aria-label={t.makeOutput(labelOf(target))} disabled={busy(target.id) || preparing !== undefined} onClick={() => void workbench.startJob(target.id)}>{labelOf(target)}</PmButton>
+          </li>
+        ))}
+      </ul>
+      <h3 className="pmw-export__subtitle">{t.outputsList}</h3>
+      {jobs.length === 0
+        ? <PmEmpty icon="export">{t.noOutputs}</PmEmpty>
+        : (
+            <ol className="pmw-jobs">
+              {jobs.map(job => <JobItem key={job.id} job={job} label={label(job.target)} current={Boolean(!source?.error && !source?.loading && !source?.dirty && !source?.saving && !source?.composing && !source?.restored && job.source && job.source.version === source?.version && job.source.fingerprint === source?.fingerprint)} onPlay={() => setPlaying(job)} />)}
+            </ol>
+          )}
+      <VideoDialog job={playing} label={playing ? label(playing.target) : ''} onClose={() => setPlaying(undefined)} />
+    </section>
+  )
+}
+
+/** A video a job made, played in a dialog with its captions (those in the workbench's language shown). */
+export function VideoDialog({ job, label, onClose }: { job: CompileJob | undefined, label: string, onClose(): void }) {
+  const t = useMessages()
+  const locale = useWorkbenchState(state => state.locale)
+  return (
+    <PmDialog open={job !== undefined} label={label} closeLabel={t.close} onClose={onClose}>
+      {job?.main && (
+        <video className="pmw-export__video" controls autoPlay src={`${job.url}${job.main}`} crossOrigin="anonymous">
+          {Object.entries(job.captions ?? {}).map(([lang, path]) => <track key={lang} kind="subtitles" srcLang={lang} label={lang} src={`${job.url}${path}`} default={lang === locale} />)}
+        </video>
+      )}
+    </PmDialog>
+  )
+}
+
+function JobItem({ job, label, current, onPlay }: { job: CompileJob, label: string, current: boolean, onPlay(): void }) {
+  const t = useMessages()
+  const workbench = useWorkbench()
+  const locale = useWorkbenchState(state => state.locale)
+  const main = job.main && `${job.url}${job.main}`
+  const type = job.files.find(file => file.path === job.main)?.type
+  const progress = job.progress
+  return (
+    <li className="pmw-job" data-state={job.state}>
+      <span className="pmw-job__icon" aria-hidden="true"><PmIcon name={iconOf(job.target)} size={16} /></span>
+      <div className="pmw-job__body">
+        <p className="pmw-job__title">{label}</p>
+        <p className="pmw-job__meta">
+          <PmBadge tone={TONES[job.state]}>{t.jobStates[job.state]}</PmBadge>
+          <time dateTime={job.createdAt} title={new Date(job.createdAt).toLocaleString(locale)}>{timeAgo(job.createdAt, locale)}</time>
+          {job.state === 'done' && <span>· {!job.source ? t.outputVersionUnknown : current ? t.currentContent : t.olderContent}</span>}
+          {job.state === 'done' && job.files.length > 1 && <span>· {t.outputFiles(job.files.length)}</span>}
+        </p>
+        {job.state === 'running' && progress && (
+          <div className="pmw-job__progress">
+            {/* the kitten runs along the bar to how far the job has come; with no total yet it walks at the start */}
+            <span className="pmw-job__runner" style={{ '--pmw-job-done': progress.total ? Math.min(1, (progress.done ?? 0) / progress.total) : 0 } as CSSProperties}>
+              <PmMascot size="small" action={progress.total ? 'run' : 'walk'} />
+            </span>
+            <progress max={progress.total ?? 1} value={progress.total ? progress.done ?? 0 : undefined} aria-label={label} />
+            <span>{t.jobProgress(t.jobPhases[progress.phase] ?? t.outputLabels[progress.phase] ?? progress.phase, progress.done, progress.total)}</span>
+          </div>
+        )}
+        {job.error && <p className="pmw-job__error">{t.jobFailureReasons[job.error] ?? failureReason(t, job.error)}</p>}
+        {job.log.length > 0 && (
+          <details className="pmw-job__log">
+            <summary>{t.outputLog}</summary>
+            {/* Scrolled to its end, the latest lines in sight. */}
+            <div className="pmw-job__log-lines"><pre>{job.log.join('\n')}</pre></div>
+          </details>
+        )}
+        <div className="pmw-job__actions">
+          {job.state === 'done' && main && isVideo(type) && <PmButton small icon="play" onClick={onPlay}>{t.playOutput}</PmButton>}
+          {job.state === 'done' && main && type && SHOWN.has(type) && <a className="pm-ui-button pm-ui-button--small" href={main} target="_blank" rel="noopener"><PmIcon name="external" size={14} />{t.openOutput}</a>}
+          {job.state === 'done' && main && type !== 'text/html' && <a className="pm-ui-button pm-ui-button--small" href={`${main}?download`}><PmIcon name="download" size={14} />{t.downloadOutput}</a>}
+          {job.canCancel !== false && (job.state === 'queued' || job.state === 'running') && <PmButton small onClick={() => void workbench.cancelJob(job.id)}>{t.cancelOutput}</PmButton>}
+        </div>
+      </div>
+    </li>
+  )
+}

package/src/panels/HistoryPanel.tsx

@@ -0,0 +1,88 @@
+import type { HistoryRevision } from '@lincyaw/kernel'
+import { PmBadge, PmButton, PmEmpty, PmIcon, PmIconButton, PmNotice } from '../components.tsx'
+import type { IconName } from '@lincyaw/design'
+import { useMessages, useWorkbench, useWorkbenchState } from '../context.tsx'
+import { timeAgo } from '../messages.ts'
+import { isAgentChanging } from '../workbench.ts'
+
+/** A host-owned operation on a version, such as restoring an entire saved snapshot. This never replaces selective undo. */
+export interface HistoryRevisionAction {
+  label: string
+  icon?: IconName
+  onSelect(revision: HistoryRevision): void
+  disabled?: boolean | ((revision: HistoryRevision) => boolean)
+  /** The revision whose operation the host is performing. Other history actions wait for it. */
+  pendingRevision?: string
+}
+
+export interface HistoryPanelProps {
+  onClose(): void
+  revisionAction?: HistoryRevisionAction
+}
+
+/** The document's versions, newest first: who changed what and when, with selective undo and optional host operations. */
+export function HistoryPanel({ onClose, revisionAction }: HistoryPanelProps) {
+  const t = useMessages()
+  const workbench = useWorkbench()
+  const history = useWorkbenchState(state => state.history)
+  const outside = useWorkbenchState(state => state.outside)
+  const changing = useWorkbenchState(state => state.isHistoryBusy || state.isHistoryPreparing || isAgentChanging(state))
+  const busy = changing || revisionAction?.pendingRevision !== undefined
+  const readOnly = workbench.client.capabilities?.readOnly === true
+  const locale = useWorkbenchState(state => state.locale)
+  const memberId = useWorkbenchState(state => state.authoring?.member?.id)
+  const revisions = history?.revisions ?? []
+  // Undoing and redoing are not versions of their own: they mark the change they act on.
+  const changes = revisions.filter(revision => !revision.reverts)
+  const who = (revision: HistoryRevision) => (revision.origin.kind === 'agent' ? t.byAi : revision.origin.kind === 'document' ? t.byDocument : revision.origin.member?.id && revision.origin.member.id !== memberId ? revision.author : t.byYou)
+  const icon = (revision: HistoryRevision): IconName => (revision.origin.kind === 'agent' ? 'sparkle' : revision.origin.kind === 'document' ? 'document' : 'edit')
+  return (
+    <section className="pmw-pane" aria-labelledby="pmw-history-title">
+      <header className="pmw-pane__header">
+        <h2 id="pmw-history-title" className="pmw-pane__title">{t.versionHistory}</h2>
+        <PmIconButton small icon="close" label={t.close} onClick={onClose} />
+      </header>
+      {outside && outside.length > 0 && (
+        <PmNotice tone="warn">
+          <span>{t.outside(outside.length)}</span>
+          <PmButton small disabled={busy} onClick={() => void workbench.recordOutsideChanges()}>{t.recordOutside}</PmButton>
+        </PmNotice>
+      )}
+      {changes.length === 0
+        ? <PmEmpty icon="versions">{t.noHistory}</PmEmpty>
+        : (
+            <ol className="pmw-versions">
+              {changes.map((revision) => {
+                const undone = revision.undone === true
+                const [summary = ''] = revision.message.split('\n')
+                const hostDisabled = typeof revisionAction?.disabled === 'function' ? revisionAction.disabled(revision) : revisionAction?.disabled
+                return (
+                  <li key={revision.id} className="pmw-version" data-origin={revision.origin.kind} data-undone={undone || undefined}>
+                    <span className="pmw-version__icon" aria-hidden="true"><PmIcon name={icon(revision)} /></span>
+                    <div className="pmw-version__body">
+                      <p className="pmw-version__summary">{summary}</p>
+                      <p className="pmw-version__meta">
+                        <span>{who(revision)}</span>
+                        <span>·</span>
+                        <time dateTime={revision.date} title={new Date(revision.date).toLocaleString(locale)}>{timeAgo(revision.date, locale)}</time>
+                        {undone && <PmBadge>{t.undone}</PmBadge>}
+                      </p>
+                    </div>
+                    {!revision.operation && revision.revertible !== false && (
+                      <PmButton small className="pmw-version__action" disabled={readOnly || busy || history?.loading} onClick={() => void workbench.revertRevision(revision.revertTarget ?? revision.id)}>
+                        {undone ? t.redoChange : t.undoChange}
+                      </PmButton>
+                    )}
+                    {revisionAction && <PmButton small className="pmw-version__action" icon={revisionAction.icon} disabled={readOnly || busy || history?.loading || hostDisabled} loading={revisionAction.pendingRevision === revision.id} onClick={() => revisionAction.onSelect(revision)}>{revisionAction.label}</PmButton>}
+                  </li>
+                )
+              })}
+            </ol>
+          )}
+      {(history?.nextOffset !== undefined || history?.previousOffset !== undefined) && <div className="pmw-history-pages">
+        <PmButton small disabled={busy || history.previousOffset === undefined} loading={Boolean(history.loading)} onClick={() => { if (history.previousOffset !== undefined) void workbench.readHistoryPage(history.previousOffset) }}>{t.historyNewer}</PmButton>
+        <PmButton small disabled={busy || history.nextOffset === undefined} loading={Boolean(history.loading)} onClick={() => { if (history.nextOffset !== undefined) void workbench.readHistoryPage(history.nextOffset) }}>{t.historyOlder}</PmButton>
+      </div>}
+    </section>
+  )
+}

package/src/panels/HomePanel.tsx

@@ -0,0 +1,184 @@
+import { useEffect, useRef, useState } from 'react'
+import { errorMessage } from '@lincyaw/kernel'
+import type { DocumentSummary, ProjectPlan } from '@lincyaw/kernel'
+import { PmButton, PmDialog, PmEmpty, PmInput, PmSelect, PmIcon, PmMenu, PmNotice } from '../components.tsx'
+import { useMessages, useWorkbench, useWorkbenchState } from '../context.tsx'
+import { contentText } from '../messages.ts'
+
+type Editing =
+  | { op: 'create' }
+  | { op: 'rename' | 'delete', doc: DocumentSummary }
+
+/** The documents of the workspace: open one, make a new one, rename, copy or delete one. */
+export function HomePanel() {
+  const t = useMessages()
+  const workbench = useWorkbench()
+  const answer = useWorkbenchState(state => state.documents)
+  const failure = useWorkbenchState(state => state.documentsFailure)
+  const bundleDisabled = useWorkbenchState(state => state.isBundleDisabled)
+  const [editing, setEditing] = useState<Editing>()
+  const [query, setQuery] = useState('')
+  const [done, setDone] = useState<string>()
+  const [error, setError] = useState<string>()
+  const [working, setWorking] = useState(false)
+  const handingOff = useRef(false)
+  useEffect(() => {
+    void workbench.loadDocuments()
+  }, [workbench])
+  const documents = answer?.documents ?? []
+  const operable = Boolean(answer?.git) && !answer?.single
+  const shown = documents.filter(doc => doc.title.toLowerCase().includes(query.trim().toLowerCase()))
+
+  const run = async (work: () => Promise<string>) => {
+    setError(undefined)
+    setWorking(true)
+    try {
+      setDone(await work())
+      setEditing(undefined)
+    } catch (failed) {
+      setError(errorMessage(failed))
+    } finally {
+      setWorking(false)
+    }
+  }
+
+  return (
+    <section className="pmw-home" aria-labelledby="pmw-home-title">
+      <header className="pmw-home__bar">
+        <h1 id="pmw-home-title" className="pmw-home__title">{answer?.title ?? t.documents}</h1>
+        {operable && <PmButton variant="primary" icon="plus" disabled={working} onClick={() => { handingOff.current = false; setError(undefined); setEditing({ op: 'create' }) }}>{t.newDocument}</PmButton>}
+      </header>
+      {failure && <PmNotice tone="danger">{bundleDisabled ? t.bundleDisabled : failure}</PmNotice>}
+      {done && <PmNotice tone="ok">{done}</PmNotice>}
+      {error && !editing && <PmNotice tone="danger">{error}</PmNotice>}
+      {answer && !answer.git && !answer.single && <PmNotice tone="warn">{t.notGit}</PmNotice>}
+      <div className="pmw-home__heading-row">
+        <h2 className="pmw-home__heading">{t.allDocuments}</h2>
+        {documents.length > 6 && (
+          <div className="pmw-home__search"><PmInput label={t.search} type="search" prefixIcon="search" value={query} placeholder={t.search} onChange={event => setQuery(event.target.value)} /></div>
+        )}
+      </div>
+      {answer && documents.length === 0
+        ? <PmEmpty icon="document" title={t.noDocuments} />
+        : shown.length === 0 && query
+          ? <p className="pmw-muted">{t.noMatch}</p>
+          : (
+              <ul className="pmw-home__cards" aria-label={t.allDocuments}>
+                {shown.map(doc => (
+                  <li key={doc.dir} className="pmw-home__card" data-document={doc.dir}>
+                      <button type="button" className="pmw-home__open" onClick={() => void workbench.openDocument(doc.dir)}>
+                        <span className="pmw-home__doc-icon" aria-hidden="true"><PmIcon name="document" /></span>
+                        <span className="pmw-home__doc-title">{doc.title}</span>
+                      </button>
+                      {operable && (
+                        <PmMenu
+                          label={t.more(doc.title)}
+                          items={[{ id: 'rename', label: t.rename, icon: 'edit', disabled: working }, { id: 'copy', label: t.makeCopy, icon: 'copy', disabled: working || doc.dir === '' }, { id: 'delete', label: t.remove, icon: 'trash', danger: true, disabled: working || doc.dir === '' }]}
+                          onSelect={(id) => {
+                            if (id === 'copy') {
+                              const title = contentText(doc.lang).copyTitle(doc.title)
+                              void run(async () => {
+                                await workbench.copyDocument(doc.dir, title)
+                                return t.copied(title)
+                              })
+                            } else { setError(undefined); setEditing({ op: id as 'rename' | 'delete', doc }) }
+                          }}
+                        />
+                      )}
+                  </li>
+                ))}
+              </ul>
+            )}
+      {editing && (
+        <DocumentDialog
+          editing={editing}
+          templates={answer?.templates ?? []}
+          error={error}
+          working={working}
+          onClose={() => {
+            setEditing(undefined)
+            setError(undefined)
+          }}
+          onCloseAutoFocus={event => {
+            if (!handingOff.current) return
+            handingOff.current = false
+            event.preventDefault()
+          }}
+          onCreate={(title, template) => void run(async () => {
+            const dir = await workbench.createDocument(title, template)
+            handingOff.current = true
+            await workbench.openDocument(dir, { focus: 'body' })
+            return t.created(title)
+          })}
+          onRename={(doc, title) => void run(async () => {
+            await workbench.retitleDocument(doc.dir, title)
+            return t.renamed(title)
+          })}
+          onDelete={(doc, plan) => void run(async () => {
+            await workbench.operateDocument({ op: 'delete', dir: doc.dir }, plan)
+            return t.removed(doc.title)
+          })}
+        />
+      )}
+    </section>
+  )
+}
+
+function DocumentDialog({ editing, templates, error, working, onClose, onCloseAutoFocus, onCreate, onRename, onDelete }: {
+  editing: Editing
+  templates: string[]
+  error?: string
+  working: boolean
+  onClose(): void
+  onCloseAutoFocus(event: Event): void
+  onCreate(title: string, template?: string): void
+  onRename(doc: DocumentSummary, title: string): void
+  onDelete(doc: DocumentSummary, plan: ProjectPlan): void
+}) {
+  const t = useMessages()
+  const workbench = useWorkbench()
+  const [plan, setPlan] = useState<ProjectPlan>()
+  const [planFailure, setPlanFailure] = useState<string>()
+  useEffect(() => {
+    if (editing.op !== 'delete') return
+    let active = true
+    void workbench.planDocumentOperation({ op: 'delete', dir: editing.doc.dir }).then(value => { if (active) setPlan(value) }, error => { if (active) setPlanFailure(errorMessage(error)) })
+    return () => { active = false }
+  }, [workbench, editing])
+  const [title, setTitle] = useState(editing.op === 'rename' ? editing.doc.title : '')
+  const [template, setTemplate] = useState(templates.includes('default') ? 'default' : templates[0] ?? '')
+  const label = editing.op === 'create' ? t.newDocument : editing.op === 'rename' ? t.rename : t.remove
+  return (
+    <PmDialog open label={label} closeLabel={t.close} name="pmw-operation" busy={working} onClose={onClose} onCloseAutoFocus={onCloseAutoFocus}>
+      <form
+        className="pmw-operation"
+        onKeyDown={event => { if (event.key === 'Enter' && (event.nativeEvent.isComposing || event.nativeEvent.keyCode === 229)) event.preventDefault() }}
+        onSubmit={(event) => {
+          event.preventDefault()
+          if (working) return
+          if (editing.op === 'create') onCreate(title.trim(), template || undefined)
+          else if (editing.op === 'rename') onRename(editing.doc, title.trim())
+          else if (plan) onDelete(editing.doc, plan)
+        }}
+      >
+        {editing.op === 'delete'
+          ? <><p>{t.confirmRemove(editing.doc.title)}</p><p className="pmw-muted">{plan ? t.removeImpact(plan.impact.files) : planFailure ?? t.projectInspecting}</p></>
+          : (
+              <PmInput label={t.title} density="regular" value={title} required autoFocus readOnly={working} placeholder={t.titlePlaceholder} onChange={event => setTitle(event.target.value)} />
+            )}
+        {editing.op === 'create' && templates.length > 1 && (
+            <PmSelect label={t.template} density="regular" value={template} disabled={working} onChange={event => setTemplate(event.target.value)}>
+              {templates.map(name => <option key={name} value={name}>{name}</option>)}
+            </PmSelect>
+        )}
+        {error && <PmNotice tone="danger">{error}</PmNotice>}
+        <div className="pmw-operation__actions">
+          <PmButton disabled={working} onClick={onClose}>{t.cancel}</PmButton>
+          <PmButton type="submit" variant={editing.op === 'delete' ? 'danger' : 'primary'} loading={working} disabled={editing.op === 'delete' ? !plan : !title.trim()}>
+            {editing.op === 'create' ? t.create : editing.op === 'rename' ? t.save : t.remove}
+          </PmButton>
+        </div>
+      </form>
+    </PmDialog>
+  )
+}