@lincyaw/workbench 0.0.0-stage → 0.1.0

package/src/editor.ts

@@ -0,0 +1,223 @@
+import { defaultKeymap, history, historyKeymap } from '@codemirror/commands'
+import { markdown } from '@codemirror/lang-markdown'
+import { yaml, yamlFrontmatter } from '@codemirror/lang-yaml'
+import { bracketMatching, HighlightStyle, indentOnInput, syntaxHighlighting } from '@codemirror/language'
+import { lintGutter, setDiagnostics } from '@codemirror/lint'
+import type { Diagnostic } from '@codemirror/lint'
+import { highlightSelectionMatches, searchKeymap } from '@codemirror/search'
+import { EditorSelection, EditorState, StateEffect, StateField } from '@codemirror/state'
+import type { Extension } from '@codemirror/state'
+import { Decoration, drawSelection, EditorView, highlightActiveLine, highlightActiveLineGutter, keymap, lineNumbers, MatchDecorator, ViewPlugin } from '@codemirror/view'
+import type { DecorationSet, ViewUpdate } from '@codemirror/view'
+import { tags } from '@lezer/highlight'
+
+export interface EditorOptions {
+  label: string
+  save(): void
+  changed(path: string, text: string): void
+  moved(line: number): void
+  selected?(selection: { startLine: number, endLine: number, text: string }): void
+}
+
+export interface Problem {
+  line: number
+  severity: 'error' | 'warning' | 'info'
+  message: string
+}
+
+export interface SourceEditor {
+  show(path: string, text: string): void
+  text(path: string): string | undefined
+  replace(path: string, text: string, fresh: boolean): void
+  reveal(line: number, endLine?: number, mark?: boolean): void
+  problems(path: string, problems: Problem[]): void
+  paths(): string[]
+  forget(path: string): void
+  focus(): void
+  destroy(): void
+}
+
+const MYST = new MatchDecorator({
+  regexp: /^(?:`{3,}|:{3,})\{[\w.:-]+\}.*$|^:[\w-]+:(?=\s|$)|^\([^)\s]+\)=\s*$|\{[\w.:-]+\}`[^`]*`/g,
+  decoration: match => Decoration.mark({ class: match[0].startsWith('(') ? 'pm-cm-myst-label' : 'pm-cm-myst' }),
+})
+const mystMarks = ViewPlugin.fromClass(class {
+  decorations: DecorationSet
+  constructor(view: EditorView) {
+    this.decorations = MYST.createDeco(view)
+  }
+
+  update(update: ViewUpdate) {
+    this.decorations = MYST.updateDeco(update, this.decorations)
+  }
+}, { decorations: plugin => plugin.decorations })
+
+const HIGHLIGHT = HighlightStyle.define([
+  { tag: tags.heading, color: 'var(--pm-color-accent)', fontWeight: '600' },
+  { tag: [tags.processingInstruction, tags.meta, tags.contentSeparator, tags.comment, tags.punctuation], color: 'var(--pm-color-muted)' },
+  { tag: tags.emphasis, fontStyle: 'italic' },
+  { tag: tags.strong, fontWeight: '600' },
+  { tag: [tags.link, tags.url], color: 'var(--pm-color-accent)' },
+  { tag: tags.monospace, color: 'var(--pm-color-syntax-string)' },
+  { tag: [tags.propertyName, tags.definition(tags.propertyName), tags.attributeName, tags.labelName], color: 'var(--pm-color-syntax-key)' },
+  { tag: [tags.string, tags.special(tags.string)], color: 'var(--pm-color-syntax-string)' },
+  { tag: [tags.keyword, tags.bool, tags.null, tags.number, tags.atom], color: 'var(--pm-color-syntax-keyword)' },
+])
+
+const THEME = EditorView.theme({
+  '&': { height: '100%', backgroundColor: 'var(--pm-color-code)', color: 'var(--pm-color-ink)', fontSize: '0.84375rem' },
+  '&.cm-focused': { outline: 'none' },
+  '.cm-scroller': { fontFamily: 'var(--pm-font-mono)', lineHeight: '1.75' },
+  '.cm-content': { caretColor: 'var(--pm-color-ink)', padding: '14px 0' },
+  '.cm-line': { padding: '0 14px 0 6px' },
+  '.cm-gutters': { backgroundColor: 'var(--pm-color-code)', color: 'var(--pm-color-muted)', border: 'none' },
+  '.cm-lineNumbers .cm-gutterElement': { padding: '0 4px 0 12px', minWidth: '2.5em' },
+  '.cm-activeLineGutter': { backgroundColor: 'transparent', color: 'var(--pm-color-ink)' },
+  '.cm-activeLine': { backgroundColor: 'color-mix(in srgb, var(--pm-color-selected) 55%, transparent)' },
+  '&.cm-focused .cm-cursor': { borderLeftColor: 'var(--pm-color-ink)' },
+  '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': { backgroundColor: 'var(--pm-color-accent-soft)' },
+  '.cm-line.pm-cm-picked': { backgroundColor: 'var(--pm-color-selected)', boxShadow: 'inset 2px 0 0 var(--pm-color-accent)' },
+  '.pm-cm-myst': { color: 'var(--pm-color-syntax-key)' },
+  '.pm-cm-myst-label': { color: 'var(--pm-color-muted)' },
+  '.cm-lintRange-error, .cm-lintRange-warning, .cm-lintRange-info': { backgroundImage: 'none', textDecoration: 'underline wavy', textUnderlineOffset: '3px' },
+  '.cm-lintRange-error': { textDecorationColor: 'var(--pm-color-danger)' },
+  '.cm-lintRange-warning': { textDecorationColor: 'var(--pm-color-warn)' },
+  '.cm-lintRange-info': { textDecorationColor: 'var(--pm-color-accent)' },
+  '.cm-tooltip': { border: '1px solid var(--pm-color-line)', backgroundColor: 'var(--pm-color-surface)', color: 'var(--pm-color-ink)', borderRadius: 'var(--pm-radius-small)' },
+  '.cm-panels': { backgroundColor: 'var(--pm-color-sunk)', color: 'var(--pm-color-ink)' },
+  '.cm-searchMatch': { backgroundColor: 'var(--pm-color-warn-soft)' },
+  '.cm-matchingBracket, &.cm-focused .cm-matchingBracket': { backgroundColor: 'var(--pm-color-accent-soft)' },
+})
+
+const pick = StateEffect.define<{ from: number, to: number } | null>()
+const picked = StateField.define<DecorationSet>({
+  create: () => Decoration.none,
+  update(marks, transaction) {
+    marks = marks.map(transaction.changes)
+    for (const effect of transaction.effects) {
+      if (!effect.is(pick)) continue
+      if (!effect.value) return Decoration.none
+      const { doc } = transaction.state
+      const lines = []
+      for (let n = effect.value.from; n <= effect.value.to && n <= doc.lines; n++) lines.push(Decoration.line({ class: 'pm-cm-picked' }).range(doc.line(n).from))
+      return Decoration.set(lines)
+    }
+    return marks
+  },
+  provide: field => EditorView.decorations.from(field),
+})
+
+function language(path: string): Extension {
+  if (/\.(?:md|markdown)$/i.test(path)) return [yamlFrontmatter({ content: markdown() }), mystMarks]
+  if (/\.ya?ml$/i.test(path)) return yaml()
+  return []
+}
+
+export function createEditor(parent: HTMLElement, options: EditorOptions): SourceEditor {
+  const states = new Map<string, EditorState>()
+  const problems = new Map<string, Problem[]>()
+  let current: string | undefined
+  const listener = EditorView.updateListener.of((update) => {
+    if (!current) return
+    if (update.docChanged) options.changed(current, update.state.doc.toString())
+    if (update.docChanged || update.selectionSet) options.moved(update.state.doc.lineAt(update.state.selection.main.head).number)
+    const selection = update.state.selection.main
+    if (update.view.hasFocus && update.selectionSet && !selection.empty) {
+      options.selected?.({
+        startLine: update.state.doc.lineAt(selection.from).number,
+        endLine: update.state.doc.lineAt(Math.max(selection.from, selection.to - 1)).number,
+        text: update.state.sliceDoc(selection.from, selection.to),
+      })
+    }
+  })
+  const extensions = (path: string): Extension => [
+    lineNumbers(),
+    highlightActiveLineGutter(),
+    highlightActiveLine(),
+    history(),
+    drawSelection(),
+    indentOnInput(),
+    bracketMatching(),
+    highlightSelectionMatches(),
+    lintGutter(),
+    picked,
+    EditorView.lineWrapping,
+    syntaxHighlighting(HIGHLIGHT),
+    THEME,
+    language(path),
+    keymap.of([
+      { key: 'Mod-s', preventDefault: true, run: () => {
+        options.save()
+        return true
+      } },
+      ...defaultKeymap,
+      ...historyKeymap,
+      ...searchKeymap,
+    ]),
+    EditorView.contentAttributes.of({ 'aria-label': options.label }),
+    listener,
+  ]
+  const view = new EditorView({ parent, state: EditorState.create({ doc: '', extensions: [THEME, EditorState.readOnly.of(true)] }) })
+
+  const diagnose = () => {
+    if (!current) return
+    const { doc } = view.state
+    const diagnostics: Diagnostic[] = (problems.get(current) ?? []).filter(problem => problem.line >= 1 && problem.line <= doc.lines).map((problem) => {
+      const line = doc.line(problem.line)
+      return { from: line.from, to: line.to, severity: problem.severity, message: problem.message }
+    })
+    view.dispatch(setDiagnostics(view.state, diagnostics))
+  }
+
+  return {
+    show(path, text) {
+      if (current === path) return
+      if (current) states.set(current, view.state)
+      current = path
+      view.setState(states.get(path) ?? EditorState.create({ doc: text, extensions: extensions(path) }))
+      diagnose()
+      options.moved(view.state.doc.lineAt(view.state.selection.main.head).number)
+    },
+    text(path) {
+      return (path === current ? view.state : states.get(path))?.doc.toString()
+    },
+    replace(path, text, fresh) {
+      if (path !== current) {
+        states.set(path, EditorState.create({ doc: text, extensions: extensions(path) }))
+        return
+      }
+      if (fresh) {
+        const head = Math.min(view.state.selection.main.head, text.length)
+        view.setState(EditorState.create({ doc: text, selection: EditorSelection.cursor(head), extensions: extensions(path) }))
+        diagnose()
+        return
+      }
+      view.dispatch({ changes: { from: 0, to: view.state.doc.length, insert: text } })
+    },
+    reveal(line, endLine, mark) {
+      const { doc } = view.state
+      const first = Math.min(Math.max(line, 1), doc.lines)
+      const last = Math.min(Math.max(endLine ?? first, first), doc.lines)
+      const position = doc.line(first).from
+      view.dispatch({
+        selection: { anchor: position },
+        effects: [EditorView.scrollIntoView(position, { y: 'center' }), pick.of(mark ? { from: first, to: last } : null)],
+      })
+    },
+    problems(path, list) {
+      problems.set(path, list)
+      if (path === current) diagnose()
+    },
+    paths: () => [...new Set([...states.keys(), ...current ? [current] : []])],
+    forget(path) {
+      states.delete(path)
+      problems.delete(path)
+      if (path === current) {
+        current = undefined
+        view.setState(EditorState.create({ doc: '', extensions: [THEME, EditorState.readOnly.of(true)] }))
+      }
+    },
+    focus: () => view.focus(),
+    destroy: () => view.destroy(),
+  }
+}

package/src/index.ts

@@ -0,0 +1,46 @@
+import type { IconName } from '@lincyaw/design'
+import type { ComponentType } from 'react'
+import type { WorkbenchMessages } from './messages.ts'
+import { ChangesPanel } from './panels/Changes.tsx'
+import { DocumentView } from './panels/DocumentView.tsx'
+import { FilesPanel } from './panels/Files.tsx'
+import { HomePanel } from './panels/Home.tsx'
+import { PreviewPanel } from './panels/Preview.tsx'
+import { ProblemsPanel } from './panels/Problems.tsx'
+import { SourcePanel } from './panels/Source.tsx'
+
+export type * from './api.ts'
+export * from './components.tsx'
+export { createEditor } from './editor.ts'
+export type { EditorOptions, Problem, SourceEditor } from './editor.ts'
+export { mergeTexts } from './merge.ts'
+export type { MergeLabels, Merged } from './merge.ts'
+export { MESSAGES } from './messages.ts'
+export type { WorkbenchMessages } from './messages.ts'
+export { placeAt, placeOf } from './places.ts'
+export type { Place } from './places.ts'
+export { connectPreview } from './preview.ts'
+export type { PreviewConnection, PreviewHandlers } from './preview.ts'
+export { useMessages, useWorkbench, useWorkbenchStore, WorkbenchProvider } from './react.tsx'
+export { ServiceError, workspaceClient } from './service.ts'
+export type { WorkspaceClient } from './service.ts'
+export { localeOf, Workbench } from './store.ts'
+export type { DocumentLayout, EditorBridge, FileNotice, Locale, OpenFile, PageIssue, PreviewSink, PreviewView, Reveal, WorkbenchState } from './store.ts'
+export { StatusItems } from './panels/Status.tsx'
+export { ChangesPanel, DocumentView, FilesPanel, HomePanel, PreviewPanel, ProblemsPanel, SourcePanel }
+
+export interface PanelDescriptor {
+  id: string
+  icon: IconName
+  title(t: WorkbenchMessages): string
+  Component: ComponentType
+}
+
+export const PANELS = {
+  documents: { id: 'documents', icon: 'document', title: t => t.documents, Component: HomePanel },
+  files: { id: 'files', icon: 'folder', title: t => t.files, Component: FilesPanel },
+  source: { id: 'source', icon: 'edit', title: t => t.source, Component: SourcePanel },
+  problems: { id: 'problems', icon: 'warning', title: t => t.problems, Component: ProblemsPanel },
+  preview: { id: 'preview', icon: 'slides', title: t => t.preview, Component: PreviewPanel },
+  changes: { id: 'changes', icon: 'diff', title: t => t.changes, Component: ChangesPanel },
+} satisfies Record<string, PanelDescriptor>

package/src/merge.ts

@@ -0,0 +1,30 @@
+import { diff3Merge } from 'node-diff3'
+
+export interface Merged {
+  text: string
+  conflicts: number
+}
+
+export interface MergeLabels {
+  mine: string
+  theirs: string
+}
+
+export function mergeTexts(mine: string, base: string, theirs: string, labels: MergeLabels): Merged {
+  const lines: string[] = []
+  let conflicts = 0
+  for (const region of diff3Merge(mine.split('\n'), base.split('\n'), theirs.split('\n'), { excludeFalseConflicts: true })) {
+    if (region.ok) {
+      lines.push(...region.ok)
+      continue
+    }
+    const { a, o, b } = region.conflict!
+    if (o.length === 0) {
+      lines.push(...b, ...a)
+      continue
+    }
+    conflicts++
+    lines.push(`<<<<<<< ${labels.mine}`, ...a, '=======', ...b, `>>>>>>> ${labels.theirs}`)
+  }
+  return { text: lines.join('\n'), conflicts }
+}

package/src/messages.ts

@@ -0,0 +1,233 @@
+import type { Locale } from './store.ts'
+
+const zh = {
+  documents: '文档',
+  workspace: '工作区',
+  launcher: '启动台',
+  search: '搜索文档与命令',
+  resize: '拖动调整宽度',
+  searchHint: 'Ctrl K',
+  noMatch: '没有找到',
+  commands: '命令',
+  newDocument: '新建文档',
+  manage: '管理文档',
+  noDocuments: '工作区中还没有文档。',
+  notGit: '工作区不是 git 仓库：在其中运行 git init，才能新建、改名、复制与删除文档。',
+  single: '这个仓库只有一份文档。',
+  noRoutes: '工作台读不到工作区：Presmium 的插件包 @lincyaw/dsh 在“插件”页中被关掉了。从活动栏打开“插件”，把它重新打开，然后重新载入页面。',
+  open: '打开',
+  more: (title: string) => `${title} 的操作`,
+  rename: '改名',
+  copy: '复制',
+  remove: '删除',
+  dir: '目录',
+  title: '标题',
+  template: '模板',
+  create: '新建',
+  renameTo: '新的目录',
+  copyTo: '副本的目录',
+  confirmRemove: (title: string) => `删除文档“${title}”？删除也是一个提交，可以在修改历史中撤销。`,
+  cancel: '取消',
+  close: '关闭',
+  created: (dir: string) => `已新建 ${dir}`,
+  renamed: (dir: string) => `已改名为 ${dir}`,
+  copied: (dir: string) => `已复制为 ${dir}`,
+  removed: (dir: string) => `已删除 ${dir}`,
+  sections: (n: number) => `${n} 节`,
+  mcp: '连接外部 agent（MCP）',
+  mcpHint: 'Claude Code、Codex 等经 MCP 使用与这里相同的工具；令牌在服务的状态文件中。',
+  copyAddress: '复制',
+  copiedAddress: '已复制',
+  files: '文件',
+  filesOf: (title: string) => `${title} 的文件`,
+  noFiles: '没有文件。',
+  truncated: '文件太多，只列出了一部分。',
+  backToDocuments: '回到文档',
+  source: '源码',
+  editor: (path: string) => `源码：${path}`,
+  noFile: '在文件树中选一个文件打开。',
+  openFailed: (reason: string) => `打不开：${reason}`,
+  save: '保存',
+  unsaved: '未保存',
+  saveChanges: '保存未完成的修改？',
+  unsavedFiles: '以下文件有未保存的修改。',
+  discardChanges: '不保存',
+  saveBeforeLeavingFailed: '修改未能全部保存，文件仍保留在编辑器中。取消后可查看保存错误或处理冲突。',
+  closeFile: (name: string) => `关闭 ${name}`,
+  changedOnDisk: (name: string) => `${name} 在打开之后被别处改过，编辑器中也有改动。`,
+  merge: '合并',
+  reload: '重新载入',
+  merged: (n: number) => (n === 0 ? '已合并，保存即写入。' : `已合并，有 ${n} 处冲突标在文中，解决后保存。`),
+  mergeMine: '编辑器中的',
+  mergeTheirs: '磁盘上的',
+  locked: '文档正被 agent 的修改占用，审阅结束后再保存。',
+  saveFailed: (reason: string) => `没能保存：${reason}`,
+  problems: '问题',
+  noProblems: '没有问题。',
+  severity: { error: '错误', warning: '警告', info: '提示' } as Record<string, string>,
+  page: '页面',
+  preview: '预览',
+  documentLayout: '文档显示方式',
+  split: '并排',
+  focus: '对话关注内容',
+  focusSaving: '正在同步关注内容…',
+  clearFocus: '清除关注内容',
+  retryFocus: '重新同步',
+  focusFailed: (reason: string) => `关注内容未同步到对话：${reason}`,
+  views: { web: '文档', slides: '幻灯片' },
+  view: '预览的形态',
+  pick: '点选',
+  pickHint: '点选内容供对话参考；并排时同时定位源码',
+  reloadPreview: '重新载入预览',
+  previewTitle: (title: string) => `${title} 的预览`,
+  previewFailed: (reason: string) => `预览不可用：${reason}`,
+  previewLoading: '预览载入中…',
+  noSlides: '这份文稿没有幻灯片形态。',
+  versionMismatch: '预览的版本与工作台不符，请重新启动。',
+  branch: (name: string) => `分支 ${name}`,
+  noGit: '不是 git 仓库',
+  uncommitted: (n: number) => `${n} 处未提交`,
+  line: (n: number) => `第 ${n} 行`,
+  encoding: 'UTF-8',
+  language: (lang: string) => `语言 ${lang}`,
+  changes: '修改',
+  review: 'AI 的修改',
+  reviewRunning: 'agent 还在修改……',
+  reviewWaiting: (n: number) => `${n} 个文件等待审阅，接受之后成为一个提交。`,
+  rejectFile: (path: string) => `撤回 ${path}`,
+  checkpoints: '检查点',
+  restore: '回到这里',
+  accept: '接受',
+  rejectAll: '全部撤回',
+  optionalMessage: '提交说明（可选）',
+  uncommittedFiles: '未提交的修改',
+  noUncommitted: '没有未提交的修改。',
+  commitMessage: '提交说明',
+  commit: '提交',
+  discard: '放弃',
+  confirmDiscard: '放弃全部未提交的修改？文件回到上次提交时的样子，不能撤销。',
+  history: '修改历史',
+  noHistory: '还没有提交。',
+  revert: '撤销',
+  reverted: '已撤销',
+  origins: { agent: 'AI', editor: '编辑器', document: '文档' } as Record<string, string>,
+  changesFailed: (reason: string) => `没能完成：${reason}`,
+}
+
+export type WorkbenchMessages = typeof zh
+
+const en: WorkbenchMessages = {
+  documents: 'Documents',
+  workspace: 'Workspace',
+  launcher: 'Launcher',
+  search: 'Search documents and commands',
+  resize: 'Resize panels',
+  searchHint: 'Ctrl K',
+  noMatch: 'Nothing found',
+  commands: 'Commands',
+  newDocument: 'New document',
+  manage: 'Manage documents',
+  noDocuments: 'The workspace has no documents yet.',
+  notGit: 'The workspace is not a git repository: run git init in it to create, rename, copy and delete documents.',
+  single: 'This repository is one document.',
+  noRoutes: 'The workbench cannot reach the workspace: Presmium\'s bundle @lincyaw/dsh was turned off in the Plugins page. Open Plugins in the activity bar, turn it on again, then reload the page.',
+  open: 'Open',
+  more: (title: string) => `Actions of ${title}`,
+  rename: 'Rename',
+  copy: 'Copy',
+  remove: 'Delete',
+  dir: 'Directory',
+  title: 'Title',
+  template: 'Template',
+  create: 'Create',
+  renameTo: 'New directory',
+  copyTo: 'Directory of the copy',
+  confirmRemove: (title: string) => `Delete the document “${title}”? The deletion is a commit too, which the history can undo.`,
+  cancel: 'Cancel',
+  close: 'Close',
+  created: (dir: string) => `Created ${dir}`,
+  renamed: (dir: string) => `Renamed to ${dir}`,
+  copied: (dir: string) => `Copied to ${dir}`,
+  removed: (dir: string) => `Deleted ${dir}`,
+  sections: (n: number) => `${n} sections`,
+  mcp: 'Connect an outside agent (MCP)',
+  mcpHint: 'Claude Code, Codex and others use the same tools as here over MCP; the token is in the service\'s state file.',
+  copyAddress: 'Copy',
+  copiedAddress: 'Copied',
+  files: 'Files',
+  filesOf: (title: string) => `Files of ${title}`,
+  noFiles: 'No files.',
+  truncated: 'Too many files: the list stops here.',
+  backToDocuments: 'Back to the documents',
+  source: 'Source',
+  editor: (path: string) => `Source: ${path}`,
+  noFile: 'Pick a file in the tree to open it.',
+  openFailed: (reason: string) => `Cannot open: ${reason}`,
+  save: 'Save',
+  unsaved: 'Unsaved',
+  saveChanges: 'Save your changes?',
+  unsavedFiles: 'These files have unsaved changes.',
+  discardChanges: 'Don’t save',
+  saveBeforeLeavingFailed: 'Some changes could not be saved. Your files remain open. Cancel to inspect the save error or resolve conflicts.',
+  closeFile: (name: string) => `Close ${name}`,
+  changedOnDisk: (name: string) => `${name} changed elsewhere since it was opened, and it has changes in the editor.`,
+  merge: 'Merge',
+  reload: 'Reload',
+  merged: (n: number) => (n === 0 ? 'Merged: saving writes it.' : `Merged with ${n} conflict${n === 1 ? '' : 's'} marked in the text: resolve, then save.`),
+  mergeMine: 'in the editor',
+  mergeTheirs: 'on disk',
+  locked: 'An agent\'s change holds the document: save once its review is over.',
+  saveFailed: (reason: string) => `Not saved: ${reason}`,
+  problems: 'Problems',
+  noProblems: 'No problems.',
+  severity: { error: 'Error', warning: 'Warning', info: 'Note' },
+  page: 'Page',
+  preview: 'Preview',
+  documentLayout: 'Document layout',
+  split: 'Side by side',
+  focus: 'Context for the conversation',
+  focusSaving: 'Syncing conversation context…',
+  clearFocus: 'Clear conversation context',
+  retryFocus: 'Retry sync',
+  focusFailed: (reason: string) => `Conversation context was not synced: ${reason}`,
+  views: { web: 'Document', slides: 'Slides' },
+  view: 'Form of the preview',
+  pick: 'Pick',
+  pickHint: 'Pick conversation context; side by side also locates its source',
+  reloadPreview: 'Reload the preview',
+  previewTitle: (title: string) => `Preview of ${title}`,
+  previewFailed: (reason: string) => `No preview: ${reason}`,
+  previewLoading: 'Loading the preview…',
+  noSlides: 'This document has no slides.',
+  versionMismatch: 'The preview speaks another version than the workbench: restart it.',
+  branch: (name: string) => `Branch ${name}`,
+  noGit: 'Not a git repository',
+  uncommitted: (n: number) => `${n} not committed`,
+  line: (n: number) => `Line ${n}`,
+  encoding: 'UTF-8',
+  language: (lang: string) => `Language ${lang}`,
+  changes: 'Changes',
+  review: 'The AI\'s change',
+  reviewRunning: 'The agent is still changing files…',
+  reviewWaiting: (n: number) => `${n} file${n === 1 ? '' : 's'} waiting for review; accepted, the change is one commit.`,
+  rejectFile: (path: string) => `Take back ${path}`,
+  checkpoints: 'Checkpoints',
+  restore: 'Back to here',
+  accept: 'Accept',
+  rejectAll: 'Take back all',
+  optionalMessage: 'Commit message (optional)',
+  uncommittedFiles: 'Not committed',
+  noUncommitted: 'No changes to commit.',
+  commitMessage: 'Commit message',
+  commit: 'Commit',
+  discard: 'Discard',
+  confirmDiscard: 'Discard every change not committed? The files go back to the last commit; this cannot be undone.',
+  history: 'History',
+  noHistory: 'No commits yet.',
+  revert: 'Undo',
+  reverted: 'Undone',
+  origins: { agent: 'AI', editor: 'Editor', document: 'Document' },
+  changesFailed: (reason: string) => `Not done: ${reason}`,
+}
+
+export const MESSAGES: Record<Locale, WorkbenchMessages> = { 'zh-CN': zh, 'en': en }

package/src/panels/Changes.tsx

@@ -0,0 +1,128 @@
+import { useState } from 'react'
+import type { FormEvent } from 'react'
+import { PmBadge, PmButton, PmDialog, PmIconButton, PmNotice } from '../components.tsx'
+import { useMessages, useWorkbench, useWorkbenchStore } from '../react.tsx'
+
+function Counts({ added, removed }: { added?: number, removed?: number }) {
+  return (
+    <span className="pmw-changes__counts">
+      {added !== undefined && <span data-sign="added">+{added}</span>}
+      {removed !== undefined && <span data-sign="removed">−{removed}</span>}
+    </span>
+  )
+}
+
+export function ChangesPanel() {
+  const t = useMessages()
+  const workbench = useWorkbenchStore()
+  const locale = useWorkbench(state => state.locale)
+  const review = useWorkbench(state => state.review)
+  const changed = useWorkbench(state => state.changed)
+  const history = useWorkbench(state => state.history)
+  const failure = useWorkbench(state => state.changesFailure)
+  const dir = useWorkbench(state => state.document)
+  const short = (path: string) => (dir && path.startsWith(`${dir}/`) ? path.slice(dir.length + 1) : path)
+  const [reviewMessage, setReviewMessage] = useState('')
+  const [commitMessage, setCommitMessage] = useState('')
+  const [discarding, setDiscarding] = useState(false)
+  const pending = new Set(review?.changes.map(change => change.path))
+  const own = changed?.filter(file => !pending.has(file.path))
+  const submit = (work: () => Promise<boolean>, done: () => void) => async (event: FormEvent) => {
+    event.preventDefault()
+    if (await work()) done()
+  }
+  return (
+    <section className="pmw-changes" aria-label={t.changes}>
+      {failure && <PmNotice tone="danger">{t.changesFailed(failure)}</PmNotice>}
+      {review && (
+        <section className="pmw-changes__group" aria-label={t.review} data-group="review">
+          <h2 className="pmw-changes__head">{t.review}<PmBadge tone="accent">{review.changes.length}</PmBadge></h2>
+          <p className="pmw-muted">{review.running ? t.reviewRunning : t.reviewWaiting(review.changes.length)}</p>
+          <ul className="pmw-changes__list">
+            {review.changes.map(change => (
+              <li key={change.path} className="pmw-changes__file">
+                <details>
+                  <summary><span className="pmw-changes__path" data-kind={change.kind} title={change.path}>{short(change.path)}</span><Counts added={change.added} removed={change.removed} /></summary>
+                  {change.diff && <pre className="pmw-changes__diff">{change.diff}</pre>}
+                </details>
+                <PmIconButton icon="undo" small label={t.rejectFile(short(change.path))} disabled={review.running} onClick={() => void workbench.rejectReview([change.path])} />
+              </li>
+            ))}
+          </ul>
+          {review.steps.length > 1 && (
+            <details className="pmw-changes__steps">
+              <summary>{t.checkpoints}</summary>
+              <ol>
+                {review.steps.map(step => (
+                  <li key={step.id}>
+                    <span>{step.label}</span>
+                    <PmButton small disabled={review.running} onClick={() => void workbench.restoreReview(step.id)}>{t.restore}</PmButton>
+                  </li>
+                ))}
+              </ol>
+            </details>
+          )}
+          <form className="pmw-changes__form" onSubmit={submit(() => workbench.acceptReview(reviewMessage.trim() || undefined), () => setReviewMessage(''))}>
+            <input className="pm-ui-input" aria-label={t.optionalMessage} placeholder={t.optionalMessage} value={reviewMessage} onChange={event => setReviewMessage(event.target.value)} />
+            <PmButton type="submit" variant="primary" icon="check" disabled={review.running}>{t.accept}</PmButton>
+            <PmButton variant="danger" disabled={review.running} onClick={() => void workbench.rejectReview()}>{t.rejectAll}</PmButton>
+          </form>
+        </section>
+      )}
+      <section className="pmw-changes__group" aria-label={t.uncommittedFiles} data-group="uncommitted">
+        <h2 className="pmw-changes__head">{t.uncommittedFiles}{own?.length ? <PmBadge>{own.length}</PmBadge> : null}</h2>
+        {own?.length === 0 && <p className="pmw-muted">{t.noUncommitted}</p>}
+        {own && own.length > 0 && (
+          <>
+            <ul className="pmw-changes__list">
+              {own.map(file => (
+                <li key={file.path} className="pmw-changes__file">
+                  <span className="pmw-changes__path" data-kind={file.kind} title={file.path}>{short(file.path)}</span>
+                  <Counts added={file.added} removed={file.removed} />
+                </li>
+              ))}
+            </ul>
+            <form className="pmw-changes__form" onSubmit={submit(() => workbench.commitChanges(commitMessage.trim()), () => setCommitMessage(''))}>
+              <input className="pm-ui-input" required aria-label={t.commitMessage} placeholder={t.commitMessage} value={commitMessage} onChange={event => setCommitMessage(event.target.value)} />
+              <PmButton type="submit" variant="primary" disabled={Boolean(review)}>{t.commit}</PmButton>
+              <PmButton disabled={Boolean(review)} onClick={() => setDiscarding(true)}>{t.discard}</PmButton>
+            </form>
+          </>
+        )}
+      </section>
+      <section className="pmw-changes__group" aria-label={t.history} data-group="history">
+        <h2 className="pmw-changes__head">{t.history}</h2>
+        {history?.length === 0 && <p className="pmw-muted">{t.noHistory}</p>}
+        <ol className="pmw-changes__list">
+          {history?.map(revision => (
+            <li key={revision.id} className="pmw-changes__revision" data-revision={revision.id}>
+              <span className="pmw-changes__subject">{revision.message.split('\n')[0]}</span>
+              <span className="pmw-muted pmw-changes__meta">
+                <PmBadge>{t.origins[revision.origin.kind] ?? revision.origin.kind}</PmBadge>
+                {revision.author.replace(/\s*<[^>]*>$/, '')} · {new Date(revision.date).toLocaleString(locale, { dateStyle: 'short', timeStyle: 'short' })}
+              </span>
+              {revision.revertedBy
+                ? <span className="pmw-muted">{t.reverted}</span>
+                : <PmButton small icon="undo" onClick={() => void workbench.revert(revision.id)}>{t.revert}</PmButton>}
+            </li>
+          ))}
+        </ol>
+      </section>
+      <PmDialog open={discarding} label={t.discard} closeLabel={t.close} onClose={() => setDiscarding(false)}>
+        <p>{t.confirmDiscard}</p>
+        <div className="pmw-operation__actions">
+          <PmButton onClick={() => setDiscarding(false)}>{t.cancel}</PmButton>
+          <PmButton
+            variant="danger"
+            onClick={() => {
+              setDiscarding(false)
+              void workbench.discardChanges()
+            }}
+          >
+            {t.discard}
+          </PmButton>
+        </div>
+      </PmDialog>
+    </section>
+  )
+}