@young1lin/dsh-ui-gitworkbench 0.1.5 → 0.1.7

package/src/atomic-json.ts

@@ -22,10 +22,9 @@ function delay(ms: number): Promise<void> {
  * Write a JSON value so a crash can never leave a truncated file behind.
  *
  * The value is staged into `<path>.tmp` and renamed over the destination, which
- * is atomic within a filesystem. On Windows that rename fails with EPERM while
- * another handle briefly holds the destination open (a concurrent read, an
- * antivirus scan, the search indexer); those locks are short-lived, so the
- * rename is retried with backoff before the error is surfaced.
+ * is atomic within a filesystem. The rename itself goes through
+ * {@link renameWithRetry} — the one home of the Windows EPERM backoff, shared
+ * with `write-checked.ts`'s worktree writes rather than duplicated per caller.
  * @param ensureDir - creates the containing directory, recursively.
  * @param writeText - writes a file's whole text.
  * @param rename - renames a path over another.
@@ -43,9 +42,34 @@ export async function saveJsonAtomic(
   await ensureDir(join(path, '..'))
   const tmp = `${path}.tmp`
   await writeText(tmp, `${JSON.stringify(value, null, 2)}\n`)
+  await renameWithRetry(rename, delay, tmp, path)
+}
+
+/**
+ * Rename `from` over `to`, retrying the short-lived Windows failures.
+ *
+ * On Windows a rename over an existing destination fails with EPERM while
+ * another handle briefly holds it open (a concurrent read, an antivirus scan,
+ * the search indexer); those locks are short-lived, so the rename is retried
+ * with backoff before the error is surfaced. Extracted from
+ * {@link saveJsonAtomic} when the editable diff needed the same atomic write
+ * for worktree files: one mechanism, two callers, not two mechanisms that can
+ * drift.
+ * @param rename - renames a path over another.
+ * @param delay - waits the given milliseconds.
+ * @param from - the staged temp path.
+ * @param to - the destination.
+ * @throws whatever `rename` threw, once the retries are exhausted.
+ */
+export async function renameWithRetry(
+  rename: (from: string, to: string) => Promise<void>,
+  delay: (ms: number) => Promise<void>,
+  from: string,
+  to: string,
+): Promise<void> {
   for (let attempt = 0; ; attempt++) {
     try {
-      await rename(tmp, path)
+      await rename(from, to)
       return
     } catch (error) {
       if (attempt >= RENAME_RETRY_DELAYS.length) throw error

package/src/blame.ts

@@ -0,0 +1,94 @@
+/**
+ * `git blame --line-porcelain`, parsed into one record per line.
+ *
+ * Porcelain is the only blame format worth parsing: the human format packs
+ * author, date and code into fixed-width columns that shift with the longest
+ * name in the file, and reading it back means guessing where the columns are.
+ * The porcelain repeats a full header for every line — verbose on the wire,
+ * unambiguous to read.
+ *
+ * A line nobody has committed yet gets the all-zero sha and git's own English
+ * "Not Committed Yet" as its author. That flag is reported separately so the
+ * drawer can say it in the reader's language rather than passing git's string
+ * through untranslated.
+ *
+ * Pure: no node, no git, no React. `tests/blame.test.ts` loads it directly.
+ *
+ * @module @young1lin/dsh-ui-gitworkbench/blame
+ */
+
+/** One line's provenance. Every field is JSON-safe and always present. */
+export interface BlameLine {
+  /** Full commit sha; all zeros for a line not committed yet. */
+  readonly hash: string
+  readonly author: string
+  /** Author time, unix seconds. 0 when git did not say. */
+  readonly time: number
+  /** The commit's subject line; '' when git did not say. */
+  readonly summary: string
+  /** Whether this line has no commit behind it yet. */
+  readonly uncommitted: boolean
+}
+
+/** A header line: sha, line in the original, line in the final file, [count]. */
+const ENTRY = /^([0-9a-f]{40}) (\d+) (\d+)(?: (\d+))?$/
+
+const ZERO_SHA = '0'.repeat(40)
+
+/**
+ * Parse blame porcelain into per-line records, indexed by final line number.
+ *
+ * @param text - stdout of `git blame --line-porcelain -- <path>`.
+ * @returns one entry per line of the file, in file order. Gaps cannot happen
+ *          in well-formed output, but a truncated stream yields a shorter
+ *          array rather than a hole — the caller renders what it has.
+ */
+export function parseBlame(text: string): BlameLine[] {
+  if (text.length === 0) return []
+  const byLine = new Map<number, BlameLine>()
+  let line = 0
+  let hash = ''
+  let author = ''
+  let time = 0
+  let summary = ''
+
+  for (const raw of text.split('\n')) {
+    const head = ENTRY.exec(raw)
+    if (head !== null) {
+      hash = head[1]!
+      line = Number.parseInt(head[3]!, 10)
+      // Each entry restates its own fields; carrying the previous line's over
+      // would attribute a line to whatever came before it in the stream.
+      author = ''
+      time = 0
+      summary = ''
+      continue
+    }
+    if (raw.startsWith('author ')) { author = raw.slice(7); continue }
+    if (raw.startsWith('author-time ')) {
+      const parsed = Number.parseInt(raw.slice(12), 10)
+      time = Number.isFinite(parsed) ? parsed : 0
+      continue
+    }
+    if (raw.startsWith('summary ')) { summary = raw.slice(8); continue }
+    // The content line, which closes the entry. Its text is the file's own and
+    // the drawer already has it, so only the provenance is kept.
+    if (raw.startsWith('\t') && line > 0) {
+      byLine.set(line, {
+        hash,
+        author,
+        time,
+        summary,
+        uncommitted: hash === ZERO_SHA,
+      })
+      line = 0
+    }
+  }
+
+  const highest = byLine.size === 0 ? 0 : Math.max(...byLine.keys())
+  const out: BlameLine[] = []
+  for (let at = 1; at <= highest; at += 1) {
+    out.push(byLine.get(at) ?? { hash: '', author: '', time: 0, summary: '', uncommitted: false })
+  }
+  return out
+}

package/src/client/CodeEditor.tsx

@@ -0,0 +1,317 @@
+/**
+ * The side pane's editor: a real CodeMirror 6 view, wired to the pane's
+ * existing buffer state.
+ *
+ * What this replaces was a transparent textarea laid over its own rendered
+ * lines. That kept the caret on the glyphs, but a textarea is a textarea: Tab
+ * left the field, there was no undo stack of its own, no multiple selections,
+ * no find-in-file. Those are not polish — they are what "editing" means to
+ * anyone who has used an editor, and the pane was asking people to edit.
+ *
+ * CodeMirror is here for the EDITING only. Highlighting still comes from
+ * shiki, through {@link tokenRanges}: the diff columns beside this editor are
+ * painted by shiki, and a second grammar engine would cost another megabyte of
+ * bundle to render the same file in slightly different colours. So the tokens
+ * the pane already computed are handed over as decorations.
+ *
+ * The document is CONTROLLED by the pane, not owned here: `value` is the
+ * pane's buffer, and every change is reported back through `onChange`. The
+ * effect below writes an incoming `value` into the view only when it actually
+ * differs from what the view holds, so a save's round trip does not fight the
+ * caret.
+ *
+ * @module @young1lin/dsh-ui-gitworkbench/client/CodeEditor
+ */
+
+import { useEffect, useRef, type ReactNode } from 'react'
+import { EditorState, StateEffect, StateField, type Extension } from '@codemirror/state'
+import { EditorView, keymap, lineNumbers, highlightActiveLine, Decoration, type DecorationSet } from '@codemirror/view'
+import { defaultKeymap, history, historyKeymap, indentWithTab } from '@codemirror/commands'
+import { indentUnit } from '@codemirror/language'
+import { search, searchKeymap } from '@codemirror/search'
+
+import css from './GitWorkbenchPanel.module.css'
+import { blameCompartment, blameField, blameGutter, setBlame } from './blame-gutter.ts'
+import { bufferDiff } from './cm-diff.ts'
+import { tokenRanges } from './cm-tokens.ts'
+import type { HighlightRun } from './highlight.ts'
+import type { BlameLine } from './GitWorkbenchPanel.tsx'
+
+/** Carries a fresh set of shiki-derived decorations into the view. */
+const setPaint = StateEffect.define<DecorationSet>()
+
+/**
+ * The decoration layer. It maps through document changes so the colours stay
+ * on their text between repaints — without that, a keystroke would smear every
+ * token after the caret until the next highlight pass landed.
+ */
+const paintField = StateField.define<DecorationSet>({
+  create: () => Decoration.none,
+  update(paint, tr) {
+    for (const effect of tr.effects) {
+      if (effect.is(setPaint)) return effect.value
+    }
+    return tr.docChanged ? paint.map(tr.changes) : paint
+  },
+  provide: field => EditorView.decorations.from(field),
+})
+
+/** One span's inline style, from the shiki run that produced it. */
+function styleFor(color: string | undefined, italic: boolean | undefined): string {
+  const paint = color === undefined ? '' : 'color:' + color + ';'
+  return italic === true ? paint + 'font-style:italic;' : paint
+}
+
+/** Build the decoration set for one buffer's worth of shiki runs. */
+function paintFor(text: string, syntax: readonly (readonly HighlightRun[])[] | undefined): DecorationSet {
+  const ranges = tokenRanges(text.split('\n'), syntax)
+  return Decoration.set(
+    ranges.map(range => Decoration
+      .mark({ attributes: { style: styleFor(range.color, range.italic) } })
+      .range(range.from, range.to)),
+    true,
+  )
+}
+
+/** The other side's text, kept in state so the diff layer can recompute from
+ *  a transaction alone rather than from a closure over some past render. */
+const setOriginal = StateEffect.define<string>()
+const originalText = StateField.define<string>({
+  create: () => '',
+  update(held, tr) {
+    for (const effect of tr.effects) {
+      if (effect.is(setOriginal)) return effect.value
+    }
+    return held
+  },
+})
+
+/**
+ * The add/delete tint, recomputed on every keystroke.
+ *
+ * Arming the editor used to take the diff colours away, because the pane's
+ * tints come from git's diff and git has not seen a keystroke. Watching the
+ * change take shape is the reason to edit inside a diff view at all, so the
+ * tint is recomputed here from the text on both sides instead.
+ *
+ * This diff is a READING AID. No git operation uses it: the block actions
+ * still send line indices against the host's own `diffSha`-stamped patch.
+ */
+const diffField = StateField.define<DecorationSet>({
+  create: state => diffDecorations(state),
+  update(deco, tr) {
+    const reset = tr.effects.some(effect => effect.is(setOriginal))
+    return tr.docChanged || reset ? diffDecorations(tr.state) : deco
+  },
+  provide: field => EditorView.decorations.from(field),
+})
+
+function diffDecorations(state: EditorState): DecorationSet {
+  const original = state.field(originalText, false) ?? ''
+  const doc = state.doc.toString()
+  const { changed, deletedBefore } = bufferDiff(original, doc)
+  const marks: { at: number; deco: Decoration }[] = []
+  const lineCount = state.doc.lines
+  for (const line of changed) {
+    if (line <= lineCount) marks.push({ at: state.doc.line(line).from, deco: CHANGED_LINE })
+  }
+  for (const line of deletedBefore) {
+    if (line <= lineCount) marks.push({ at: state.doc.line(line).from, deco: DELETED_AT })
+  }
+  marks.sort((a, b) => a.at - b.at)
+  return Decoration.set(marks.map(mark => mark.deco.range(mark.at)), true)
+}
+
+const CHANGED_LINE = Decoration.line({ class: 'cm-gwChanged' })
+const DELETED_AT = Decoration.line({ class: 'cm-gwDeleted' })
+
+/**
+ * Metrics restated to match the diff columns beside this editor exactly: same
+ * family, same size, same 20px rhythm, ligatures off. The pane's own CSS
+ * variables carry the colours, so the editor follows the drawer's palette
+ * without a CodeMirror theme per palette.
+ */
+const paneTheme = EditorView.theme({
+  '&': { backgroundColor: 'transparent', color: 'var(--gs-fg)', height: 'auto' },
+  '&.cm-focused': { outline: 'none' },
+  '.cm-scroller': {
+    overflow: 'visible',
+    fontFamily: "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace",
+    fontSize: 'var(--gs-t-dense)',
+    lineHeight: '20px',
+    fontVariantLigatures: 'none',
+  },
+  '.cm-content': { padding: '0', caretColor: 'var(--gs-accent)' },
+  '.cm-gutters': {
+    backgroundColor: 'transparent',
+    color: 'var(--gs-fg-faint)',
+    border: 'none',
+    paddingRight: '8px',
+  },
+  '.cm-activeLine': { backgroundColor: 'var(--gs-hover)' },
+  // Same tints the diff columns use, so a line the reader just typed reads as
+  // the same kind of thing as a line git already knows about.
+  '.cm-gwChanged': { backgroundColor: 'var(--gs-add-line)' },
+  '.cm-gwDeleted': { boxShadow: 'inset 0 2px 0 0 var(--gs-del-line)' },
+  '.cm-activeLineGutter': { backgroundColor: 'transparent', color: 'var(--gs-fg-dim)' },
+  '.cm-cursor': { borderLeftColor: 'var(--gs-accent)' },
+  // The blame gutter. Dim and monospaced-narrow: it sits beside code the
+  // reader came to read, so it must be legible without competing.
+  '.cm-gwBlameGutter': {
+    color: 'var(--gs-fg-faint)',
+    fontSize: 'var(--gs-t-meta)',
+    paddingRight: '10px',
+    borderRight: '1px solid var(--gs-border)',
+    marginRight: '6px',
+  },
+  '.cm-gwBlameCell': {
+    display: 'block',
+    maxWidth: '12ch',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    cursor: 'pointer',
+  },
+})
+
+export function CodeEditor({ value, original, onChange, syntax, indent, ariaLabel, onSave, blame, notCommitted, readOnly, onBlameClick }: {
+  /** The pane's buffer. The view is written to only when this really differs. */
+  value: string
+  /** The other side's whole text — the index side, for the unstaged layer this
+   *  editor lives on. What the live tint is computed against. */
+  original: string
+  onChange: (next: string) => void
+  /** `highlightFile`'s runs for this buffer; undefined while a grammar loads. */
+  syntax: readonly (readonly HighlightRun[])[] | undefined
+  /** One indent level, from `detectIndent` — what Tab inserts. */
+  indent: string
+  ariaLabel: string
+  /** Ctrl/Cmd+S. Bound inside the view too: CodeMirror sees the key first, and
+   *  a save shortcut that works everywhere except inside the editor is worse
+   *  than none at all. */
+  onSave: () => void
+  /** Per-line provenance for the blame gutter, or null for "not showing".
+   *  The gutter is added and removed with it, because an installed gutter with
+   *  no markers still reserves its column. */
+  blame?: readonly BlameLine[] | null
+  /** The drawer's own wording for a line no commit covers yet. */
+  notCommitted?: string
+  /** A file the editor may show but must not change — a CRLF or non-UTF-8
+   *  file, where any save would rewrite bytes nobody touched. */
+  readOnly?: boolean
+  /** A click in the blame gutter, with the 1-based line number. */
+  onBlameClick?: (line: number) => void
+}): ReactNode {
+  /**
+   * Editable, and SAID to be editable, from one boolean.
+   *
+   * Nothing about rendered code looks like a field. In the Files tab this
+   * editor is live the moment a file opens — no button in between — so
+   * without a mark the reader learns they may type by typing, and learns
+   * they may NOT by typing into a pane that swallows it. The stylesheet
+   * draws a rule down the leading edge for this attribute and lights it
+   * while the caret is inside.
+   *
+   * Derived here rather than taken as a second prop so the mark and
+   * `EditorState.readOnly` below cannot disagree: a pane that shows the
+   * rule and then refuses the keystroke is worse than one with no rule.
+   */
+  const editable = readOnly !== true
+  const host = useRef<HTMLDivElement>(null)
+  const view = useRef<EditorView | null>(null)
+  // Read inside CodeMirror's own callbacks, which close over the render that
+  // created the view — several states old by the time a key is pressed.
+  const latest = useRef({ onChange, onSave, onBlameClick })
+  latest.current = { onChange, onSave, onBlameClick }
+  // Stable across renders so reconfiguring the gutter does not depend on a
+  // callback identity that changes every time the pane re-renders.
+  const pick = useRef((line: number) => { latest.current.onBlameClick?.(line) }).current
+
+  useEffect(() => {
+    const parent = host.current
+    if (parent === null) return
+    const extensions: Extension[] = [
+      lineNumbers(),
+      history(),
+      search({ top: true }),
+      highlightActiveLine(),
+      paintField,
+      blameField,
+      blameCompartment.of([]),
+      EditorState.readOnly.of(!editable),
+      originalText.init(() => original),
+      diffField,
+      paneTheme,
+      keymap.of([
+        { key: 'Mod-s', preventDefault: true, run: () => { latest.current.onSave(); return true } },
+        ...searchKeymap,
+        ...historyKeymap,
+        indentWithTab,
+        ...defaultKeymap,
+      ]),
+      EditorView.updateListener.of(update => {
+        if (update.docChanged) latest.current.onChange(update.state.doc.toString())
+      }),
+      EditorState.allowMultipleSelections.of(true),
+      EditorView.contentAttributes.of({ 'aria-label': ariaLabel }),
+    ]
+    const created = new EditorView({ state: EditorState.create({ doc: value, extensions }), parent })
+    view.current = created
+    // Arming dropped the caret into the buffer for the textarea too: the click
+    // that armed the editor said "I want to type here".
+    created.focus()
+    return () => { created.destroy(); view.current = null }
+    // Built once per armed session. `value` and `syntax` flow in through the
+    // effects below; rebuilding the view on either would drop the caret, the
+    // undo stack and the selection on every keystroke.
+  }, [])
+
+  // Blame arriving, changing, or being switched off. The gutter itself goes
+  // in and out through the compartment; the field carries the lines.
+  useEffect(() => {
+    const current = view.current
+    if (current === null) return
+    const lines = blame ?? null
+    current.dispatch({
+      effects: [
+        blameCompartment.reconfigure(lines === null ? [] : blameGutter(notCommitted ?? '', pick)),
+        setBlame.of(lines),
+      ],
+    })
+  }, [blame, notCommitted])
+
+  // The other side, when a refresh brings a new one in.
+  useEffect(() => {
+    const current = view.current
+    if (current === null) return
+    if (current.state.field(originalText, false) === original) return
+    current.dispatch({ effects: setOriginal.of(original) })
+  }, [original])
+
+  // The indent unit can change when the pane moves to another file.
+  useEffect(() => {
+    const current = view.current
+    if (current === null) return
+    current.dispatch({ effects: StateEffect.appendConfig.of(indentUnit.of(indent)) })
+  }, [indent])
+
+  // The pane's buffer, written in only when it really differs — a save's round
+  // trip hands back the same text, and rewriting it would move the caret.
+  useEffect(() => {
+    const current = view.current
+    if (current === null) return
+    const held = current.state.doc.toString()
+    if (held === value) return
+    current.dispatch({ changes: { from: 0, to: held.length, insert: value } })
+  }, [value])
+
+  // Repaint. Depends on `value` as well as `syntax` so it runs after the write
+  // above, against the text the view now actually holds.
+  useEffect(() => {
+    const current = view.current
+    if (current === null) return
+    current.dispatch({ effects: setPaint.of(paintFor(current.state.doc.toString(), syntax)) })
+  }, [syntax, value])
+
+  return <div ref={host} className={css.cmHost} data-editable={editable ? '' : undefined} />
+}