@young1lin/dsh-ui-gitworkbench 0.1.0

package/src/client/commit-graph.ts

@@ -0,0 +1,140 @@
+/**
+ * Lane assignment for the commit graph — the branch/merge diagram down the left
+ * edge of the history list, the way IDEA, gitk and GitHub's network view draw it.
+ *
+ * A LANE is a vertical line. Each one is "waiting for" a commit hash: the hash
+ * of the commit that will terminate it further down the list. Walking the log
+ * newest-first, every commit takes over the lane(s) waiting for it, then hands
+ * that lane to its FIRST parent and opens a lane for each additional one. That
+ * single rule is what makes mainline history read as one straight line and the
+ * merged branch the one that curves away — first-parent order is the meaning of
+ * `%p`, not an arbitrary choice.
+ *
+ * Everything here is pure. The renderer that consumes it draws paths and has no
+ * decisions of its own, so the graph's whole behaviour is testable without a DOM.
+ *
+ * The list is PAGED, so the layout is always over a prefix of history. A lane
+ * still waiting for an unfetched parent simply leaves the bottom edge, which is
+ * exactly what should be drawn: the line continues because the history does.
+ *
+ * @module
+ */
+
+/** The only thing the layout needs from a commit. */
+export interface GraphInput {
+  readonly hash: string
+  /** Parent hashes in git's order — first parent first. */
+  readonly parents: readonly string[]
+}
+
+/** One row's geometry, in lane indices. The renderer turns these into paths. */
+export interface GraphRow {
+  readonly hash: string
+  /** Lane the commit's dot sits in. */
+  readonly lane: number
+  /**
+   * Lanes arriving from the rows above and ending at this commit. Contains
+   * {@link lane} when this commit continues the line it sits on, and additional
+   * entries when branches converge here. Empty for a tip.
+   */
+  readonly into: readonly number[]
+  /**
+   * Lanes leaving toward the rows below. Contains {@link lane} unless this is a
+   * root commit, plus one entry per additional parent.
+   */
+  readonly outOf: readonly number[]
+  /** Lanes crossing this row untouched — drawn as an unbroken vertical line. */
+  readonly through: readonly number[]
+  /** Lanes in use at this row; every index above is `< width`. */
+  readonly width: number
+  readonly isMerge: boolean
+}
+
+export interface Graph {
+  readonly rows: readonly GraphRow[]
+  /** The widest row — how much horizontal space the column reserves. */
+  readonly width: number
+}
+
+/**
+ * Assign lanes to a page of commits.
+ * @param commits - newest-first, as `git log` orders them.
+ * @returns per-row geometry plus the column width to reserve.
+ */
+export function layoutGraph(commits: readonly GraphInput[]): Graph {
+  /** `lanes[i]` is the hash lane `i` is waiting for; null means the lane is free. */
+  const lanes: (string | null)[] = []
+  const rows: GraphRow[] = []
+  let width = 0
+
+  const freeSlot = (): number => {
+    const reused = lanes.indexOf(null)
+    if (reused !== -1) return reused
+    lanes.push(null)
+    return lanes.length - 1
+  }
+  const occupiedWidth = (state: readonly (string | null)[]): number => {
+    for (let i = state.length - 1; i >= 0; i -= 1) if (state[i] !== null) return i + 1
+    return 0
+  }
+
+  for (const commit of commits) {
+    const before = [...lanes]
+
+    // Every lane waiting for this commit ends here. The leftmost becomes the
+    // commit's own lane; picking the leftmost is what keeps the graph compact
+    // and holds the mainline against the left edge.
+    const into: number[] = []
+    for (let i = 0; i < lanes.length; i += 1) if (lanes[i] === commit.hash) into.push(i)
+
+    const lane = into.length > 0 ? into[0]! : freeSlot()
+    for (const other of into) if (other !== lane) lanes[other] = null
+
+    // Hand the lane to the first parent; open one per additional parent. A
+    // parent some other lane is already waiting for reuses that lane instead of
+    // opening a second line to the same commit.
+    const outOf: number[] = []
+    const seen = new Set<string>()
+    lanes[lane] = null
+    for (const parent of commit.parents) {
+      if (seen.has(parent)) continue
+      seen.add(parent)
+      if (outOf.length === 0) {
+        lanes[lane] = parent
+        outOf.push(lane)
+        continue
+      }
+      let target = lanes.indexOf(parent)
+      if (target === -1) {
+        target = freeSlot()
+        lanes[target] = parent
+      }
+      outOf.push(target)
+    }
+
+    // A lane passes through when it was busy before, is still busy after, and
+    // its expectation did not change — i.e. this commit had nothing to do with it.
+    const through: number[] = []
+    for (let i = 0; i < before.length; i += 1) {
+      if (i === lane) continue
+      if (before[i] !== null && before[i] === lanes[i]) through.push(i)
+    }
+
+    // Trailing free lanes cost width without carrying a line.
+    while (lanes.length > 0 && lanes[lanes.length - 1] === null) lanes.pop()
+
+    const rowWidth = Math.max(occupiedWidth(before), occupiedWidth(lanes), lane + 1)
+    width = Math.max(width, rowWidth)
+    rows.push({
+      hash: commit.hash,
+      lane,
+      into,
+      outOf,
+      through,
+      width: rowWidth,
+      isMerge: seen.size > 1,
+    })
+  }
+
+  return { rows, width }
+}

package/src/client/diff-model.ts

@@ -0,0 +1,193 @@
+/**
+ * Pure diff-model: unified-diff rows and word-level ranges. Kept free of
+ * React/CSS so `tests/diff-regression.test.ts` can load it without pulling the
+ * panel (CSS modules + the client shim) into vitest.
+ *
+ * Colour is not this module's job — `highlight.ts` runs Shiki against a real
+ * TextMate theme. What stays here is the part Shiki does not do: reading the
+ * diff itself, and working out which words on a line actually changed.
+ */
+
+export interface Row {
+  readonly kind: 'add' | 'del' | 'context' | 'hunk'
+  readonly text: string
+  readonly oldL: number
+  readonly newL: number
+}
+
+export interface RowWithRanges extends Row {
+  ranges?: Array<readonly [number, number]>
+}
+
+/**
+ * Parse a unified diff segment into typed rows, tracking line numbers.
+ * @param segment - one file's `diff --git` text (headers are skipped).
+ */
+export function parseRows(segment: string): Row[] {
+  const rows: Row[] = []
+  const lines = segment.split('\n')
+  let oldL = 0
+  let newL = 0
+  for (const line of lines) {
+    if (line.startsWith('diff --git') || line.startsWith('index ') || line.startsWith('old mode')
+      || line.startsWith('new mode') || line.startsWith('--- ') || line.startsWith('+++ ')
+      || line.startsWith('new file') || line.startsWith('deleted file') || line.startsWith('similarity')
+      || line.startsWith('rename from') || line.startsWith('rename to') || line.startsWith('\\ No newline')) continue
+    if (line.startsWith('@@')) {
+      const m = /^@@ -(\d+)(?:,\d+)? \+(\d+)(?:,\d+)? @@/.exec(line)
+      if (m) { oldL = Number.parseInt(m[1]!, 10); newL = Number.parseInt(m[2]!, 10) }
+      rows.push({ kind: 'hunk', text: line, oldL: 0, newL: 0 })
+      continue
+    }
+    if (line.startsWith('+')) {
+      rows.push({ kind: 'add', text: line.slice(1), oldL: 0, newL })
+      newL += 1
+    } else if (line.startsWith('-')) {
+      rows.push({ kind: 'del', text: line.slice(1), oldL, newL: 0 })
+      oldL += 1
+    } else {
+      rows.push({ kind: 'context', text: line.slice(1), oldL, newL })
+      oldL += 1; newL += 1
+    }
+  }
+  return rows
+}
+
+/**
+ * Which line-number columns a unified diff actually uses.
+ * A new file is only `+` rows (`@@ -0,0 +1,n`), a deletion is only `-`;
+ * those should not keep an empty second gutter. Context or a mix needs both.
+ * @param rows - parsed unified-diff rows.
+ */
+export function gutterSides(rows: readonly Row[]): { old: boolean; new: boolean } {
+  let old = false
+  let neu = false
+  for (const row of rows) {
+    if (row.kind === 'del') old = true
+    else if (row.kind === 'add') neu = true
+    else if (row.kind === 'context') { old = true; neu = true }
+    if (old && neu) return { old: true, new: true }
+  }
+  return { old, new: neu }
+}
+
+/**
+ * Pair adjacent +/- runs index-wise and compute word-level changed ranges per line.
+ * @param rows - parsed unified-diff rows.
+ */
+export function attachWordRanges(rows: Row[]): RowWithRanges[] {
+  const out: RowWithRanges[] = rows.map(row => ({ ...row }))
+  let i = 0
+  while (i < out.length) {
+    if (out[i]!.kind !== 'del' && out[i]!.kind !== 'add') { i += 1; continue }
+    let delEnd = i
+    while (delEnd < out.length && out[delEnd]!.kind === 'del') delEnd += 1
+    let addEnd = delEnd
+    while (addEnd < out.length && out[addEnd]!.kind === 'add') addEnd += 1
+    const pairs = Math.min(delEnd - i, addEnd - delEnd)
+    for (let p = 0; p < pairs; p++) {
+      const delRow = out[i + p]!
+      const addRow = out[delEnd + p]!
+      const { oldRanges, newRanges } = changedRanges(delRow.text, addRow.text)
+      delRow.ranges = oldRanges
+      addRow.ranges = newRanges
+    }
+    i = addEnd
+  }
+  return out
+}
+
+interface Tok { readonly text: string; readonly start: number; readonly isWs: boolean }
+
+function tokensWithOffsets(text: string): Tok[] {
+  const out: Tok[] = []
+  const re = /\s+|\S+/g
+  let m: RegExpExecArray | null
+  while ((m = re.exec(text)) !== null) out.push({ text: m[0], start: m.index, isWs: m[0].trim().length === 0 })
+  return out
+}
+
+/** Word-level diff of two text lines via LCS over whitespace-preserved tokens.
+ *  Falls back to whole-line emphasis when the pair is too large. */
+function changedRanges(oldText: string, newText: string): { oldRanges: Array<readonly [number, number]>; newRanges: Array<readonly [number, number]> } {
+  if (oldText === newText) return { oldRanges: [], newRanges: [] }
+  const a = tokensWithOffsets(oldText)
+  const b = tokensWithOffsets(newText)
+  if (a.length * b.length > 200_000 || a.length + b.length < 2) {
+    return { oldRanges: a.length > 0 ? [[0, oldText.length]] : [], newRanges: b.length > 0 ? [[0, newText.length]] : [] }
+  }
+  const n = a.length
+  const m = b.length
+  const dp: Uint32Array[] = Array.from({ length: n + 1 }, () => new Uint32Array(m + 1))
+  for (let i = n - 1; i >= 0; i -= 1) {
+    for (let j = m - 1; j >= 0; j -= 1) {
+      const same = (a[i]!.isWs && b[j]!.isWs) || a[i]!.text === b[j]!.text
+      dp[i]![j] = same ? dp[i + 1]![j + 1]! + 1 : Math.max(dp[i + 1]![j]!, dp[i]![j + 1]!)
+    }
+  }
+  const oldRanges: Array<readonly [number, number]> = []
+  const newRanges: Array<readonly [number, number]> = []
+  const push = (into: Array<readonly [number, number]>, start: number, end: number): void => {
+    const last = into[into.length - 1]
+    if (last !== undefined && last[1] === start) into[into.length - 1] = [last[0], end]
+    else into.push([start, end])
+  }
+  let i = 0
+  let j = 0
+  while (i < n && j < m) {
+    const same = (a[i]!.isWs && b[j]!.isWs) || a[i]!.text === b[j]!.text
+    if (same) { i += 1; j += 1; continue }
+    if (dp[i + 1]![j]! >= dp[i]![j + 1]!) {
+      push(oldRanges, a[i]!.start, a[i]!.start + a[i]!.text.length)
+      i += 1
+    } else {
+      push(newRanges, b[j]!.start, b[j]!.start + b[j]!.text.length)
+      j += 1
+    }
+  }
+  while (i < n) { push(oldRanges, a[i]!.start, a[i]!.start + a[i]!.text.length); i += 1 }
+  while (j < m) { push(newRanges, b[j]!.start, b[j]!.start + b[j]!.text.length); j += 1 }
+  return { oldRanges, newRanges }
+}
+
+export interface PaintedTok {
+  readonly text: string
+  readonly color?: string
+  readonly italic?: boolean
+  readonly mark: boolean
+}
+
+/**
+ * Overlay word-level change ranges onto already-lexed tokens, instead of
+ * re-lexing slices (a slice of a comment looks like code).
+ * @param tokens - one line's tokens (`text` plus optional `color` from Shiki).
+ * @param ranges - changed character ranges on that line.
+ */
+export function overlayRanges(
+  tokens: ReadonlyArray<{ readonly text: string; readonly color?: string; readonly italic?: boolean }>,
+  ranges: ReadonlyArray<readonly [number, number]>,
+): PaintedTok[] {
+  if (tokens.length === 0) return []
+  if (ranges.length === 0) return tokens.map(tok => ({ text: tok.text, color: tok.color, italic: tok.italic, mark: false }))
+  const out: PaintedTok[] = []
+  let offset = 0
+  let ri = 0
+  for (const tok of tokens) {
+    let local = 0
+    while (local < tok.text.length) {
+      const abs = offset + local
+      while (ri < ranges.length && ranges[ri]![1] <= abs) ri += 1
+      const range = ranges[ri]
+      const marked = range !== undefined && abs >= range[0] && abs < range[1]
+      const cut = marked
+        ? Math.min(tok.text.length, range[1] - offset)
+        : range !== undefined && range[0] > abs
+          ? Math.min(tok.text.length, range[0] - offset)
+          : tok.text.length
+      if (cut > local) out.push({ text: tok.text.slice(local, cut), color: tok.color, italic: tok.italic, mark: marked })
+      local = cut > local ? cut : local + 1
+    }
+    offset += tok.text.length
+  }
+  return out
+}

package/src/client/highlight.ts

@@ -0,0 +1,257 @@
+/**
+ * Diff highlighter: Shiki core with the JavaScript regex engine (no Oniguruma
+ * WASM) and a real TextMate theme per drawer palette. The css-variables theme
+ * only has ~8 token slots, so identifiers, types and punctuation all collapsed
+ * to the body colour — which is why a homemade four-kind pass looked the same
+ * as "only keywords are coloured". Bundled themes emit a hex per scope.
+ *
+ * Boot grammars: TypeScript, shell, JSON. Everything else the drawer opens
+ * loads lazily.
+ */
+import { createHighlighterCoreSync } from 'shiki/core'
+import { createJavaScriptRegexEngine, defaultJavaScriptRegexConstructor } from 'shiki/engine/javascript'
+import langTs from '@shikijs/langs/typescript'
+import langBash from '@shikijs/langs/shellscript'
+import langJson from '@shikijs/langs/json'
+import githubDark from 'shiki/themes/github-dark-default.mjs'
+import githubLight from 'shiki/themes/github-light-default.mjs'
+import darkPlus from 'shiki/themes/dark-plus.mjs'
+import lightPlus from 'shiki/themes/light-plus.mjs'
+import oneDarkPro from 'shiki/themes/one-dark-pro.mjs'
+import oneLight from 'shiki/themes/one-light.mjs'
+import solarizedDark from 'shiki/themes/solarized-dark.mjs'
+import solarizedLight from 'shiki/themes/solarized-light.mjs'
+import nord from 'shiki/themes/nord.mjs'
+import synthwave84 from 'shiki/themes/synthwave-84.mjs'
+import type { HighlighterCore } from 'shiki/core'
+import type { Row } from './diff-model.ts'
+
+type LangModule = { default: typeof langTs }
+
+const LANGS = [langTs, langBash, langJson]
+
+const THEMES = [
+  githubDark, githubLight, darkPlus, lightPlus,
+  oneDarkPro, oneLight, solarizedDark, solarizedLight,
+  nord, synthwave84,
+]
+
+const LAZY_GRAMMARS = new Map<string, () => Promise<LangModule>>([
+  ['python', () => import('@shikijs/langs/python')],
+  ['css', () => import('@shikijs/langs/css')],
+  ['markdown', () => import('@shikijs/langs/markdown')],
+  ['html', () => import('@shikijs/langs/html')],
+  ['yaml', () => import('@shikijs/langs/yaml')],
+  ['toml', () => import('@shikijs/langs/toml')],
+  ['rust', () => import('@shikijs/langs/rust')],
+  ['go', () => import('@shikijs/langs/go')],
+  ['java', () => import('@shikijs/langs/java')],
+  ['c', () => import('@shikijs/langs/c')],
+  ['cpp', () => import('@shikijs/langs/cpp')],
+])
+
+const LANG_ALIASES = new Map<string, string>([
+  ['typescript', 'typescript'], ['ts', 'typescript'], ['tsx', 'typescript'],
+  ['javascript', 'typescript'], ['js', 'typescript'], ['jsx', 'typescript'],
+  ['mjs', 'typescript'], ['cjs', 'typescript'],
+  ['shellscript', 'shellscript'], ['bash', 'shellscript'], ['sh', 'shellscript'],
+  ['shell', 'shellscript'], ['zsh', 'shellscript'], ['ps1', 'shellscript'],
+  ['json', 'json'], ['jsonc', 'json'],
+  ['py', 'python'], ['python', 'python'],
+  ['css', 'css'], ['scss', 'css'], ['less', 'css'],
+  ['md', 'markdown'], ['markdown', 'markdown'],
+  ['html', 'html'], ['htm', 'html'],
+  ['yaml', 'yaml'], ['yml', 'yaml'],
+  ['toml', 'toml'],
+  ['rs', 'rust'], ['rust', 'rust'],
+  ['go', 'go'],
+  ['java', 'java'],
+  ['c', 'c'],
+  ['cpp', 'cpp'], ['h', 'c'], ['hpp', 'cpp'],
+])
+
+/** Drawer `data-gs-theme` → a loaded Shiki theme name. */
+const PALETTE_THEMES: Record<string, string> = {
+  'github-dark': 'github-dark-default',
+  'github-light': 'github-light-default',
+  'vscode-dark': 'dark-plus',
+  'vscode-light': 'light-plus',
+  'one-dark': 'one-dark-pro',
+  'one-light': 'one-light',
+  'solarized-dark': 'solarized-dark',
+  'solarized-light': 'solarized-light',
+  'nord-dark': 'nord',
+  'nord-light': 'github-light-default',
+  'cyberpunk-dark': 'synthwave-84',
+  'cyberpunk-light': 'synthwave-84',
+}
+
+const regexEngine = createJavaScriptRegexEngine({
+  forgiving: true,
+  regexConstructor: pattern => defaultJavaScriptRegexConstructor(pattern, {
+    lazyCompileLength: Number.POSITIVE_INFINITY,
+  }),
+})
+
+let singleton: HighlighterCore | undefined
+
+function highlighter(): HighlighterCore {
+  singleton ??= createHighlighterCoreSync({
+    themes: THEMES,
+    langs: LANGS,
+    engine: regexEngine,
+  })
+  return singleton
+}
+
+const requested = new Set<string>()
+const listeners = new Set<() => void>()
+let loadCount = 0
+
+/** Subscribe to lazy-grammar loads so a first render can re-highlight. */
+export function subscribeGrammarLoaded(listener: () => void): () => void {
+  listeners.add(listener)
+  return () => { listeners.delete(listener) }
+}
+
+/** Snapshot for `useSyncExternalStore`. */
+export function grammarLoadCount(): number {
+  return loadCount
+}
+
+function ensureGrammar(resolved: string): boolean {
+  const load = LAZY_GRAMMARS.get(resolved)
+  if (load === undefined) return true
+  if (highlighter().getLoadedLanguages().includes(resolved)) return true
+  if (!requested.has(resolved)) {
+    requested.add(resolved)
+    void load().then(mod => {
+      highlighter().loadLanguageSync(mod.default)
+      loadCount += 1
+      for (const listener of listeners) listener()
+    })
+  }
+  return false
+}
+
+export interface HighlightRun {
+  readonly text: string
+  readonly color: string | undefined
+  readonly italic?: boolean
+}
+
+/**
+ * Language id Shiki accepts for this path, or undefined for plain text.
+ * @param path - file path from the unified diff.
+ */
+export function shikiLangOf(path: string): string | undefined {
+  const ext = path.slice(path.lastIndexOf('.') + 1).toLowerCase()
+  return LANG_ALIASES.get(ext)
+}
+
+/**
+ * Shiki theme loaded for this drawer palette.
+ * @param palette - `data-gs-theme` value (`github-dark`, …).
+ */
+export function shikiThemeOf(palette: string): string {
+  return PALETTE_THEMES[palette] ?? (palette.endsWith('light') ? 'github-light-default' : 'github-dark-default')
+}
+
+/**
+ * Tokenize a whole file into per-line runs. Undefined until a lazy grammar
+ * finishes loading (caller re-renders via {@link subscribeGrammarLoaded}).
+ *
+ * Diff reconstructions are not real files: a hunk often starts inside
+ * `export default {` or an unclosed `/*`, and Shiki then paints the following
+ * added statements as object keys or comments — keywords go missing. Comment
+ * lines keep the file-level pass (JSDoc ` * `); every other line is re-lexed
+ * on its own so `async` / `function` / `const` colour as they would at the
+ * top level.
+ * @param lines - source lines, no leading +/-.
+ * @param lang - from {@link shikiLangOf}.
+ * @param theme - from {@link shikiThemeOf}.
+ */
+export function highlightFile(
+  lines: readonly string[],
+  lang: string | undefined,
+  theme = 'github-dark-default',
+): HighlightRun[][] | undefined {
+  const fileTok = tokenizeLines(lines, lang, theme)
+  if (fileTok === undefined) return undefined
+  return lines.map((line, i) => {
+    const together = fileTok[i] ?? [{ text: line, color: undefined }]
+    if (looksLikeCommentLine(line)) return together
+    const solo = tokenizeLines([line], lang, theme)?.[0]
+    return solo !== undefined && solo.length > 0 ? solo : together
+  })
+}
+
+function looksLikeCommentLine(text: string): boolean {
+  const t = text.trimStart()
+  return t.startsWith('//') || t.startsWith('/*') || t.startsWith('*') || t.startsWith('#')
+}
+
+function tokenizeLines(
+  lines: readonly string[],
+  lang: string | undefined,
+  theme: string,
+): HighlightRun[][] | undefined {
+  if (lang === undefined || lines.length === 0) return undefined
+  if (!ensureGrammar(lang)) return undefined
+  const { tokens } = highlighter().codeToTokens(lines.join('\n'), { lang, theme })
+  const last = tokens[tokens.length - 1]
+  const rows = tokens.length > 1 && last !== undefined && last.length === 0
+    ? tokens.slice(0, -1)
+    : tokens
+  const out: HighlightRun[][] = rows.map(line => line.map(token => ({
+    text: token.content,
+    color: token.color,
+    italic: token.fontStyle !== undefined && (token.fontStyle & 1) !== 0 ? true : undefined,
+  })))
+  while (out.length < lines.length) out.push([{ text: lines[out.length]!, color: undefined }])
+  return out.slice(0, lines.length)
+}
+
+/**
+ * Per-row Shiki runs for a unified diff: deletions from the old side,
+ * additions and context from the new side, each side highlighted as one file.
+ * @param rows - parsed unified-diff rows.
+ * @param lang - from {@link shikiLangOf}.
+ * @param theme - from {@link shikiThemeOf}.
+ */
+export function highlightForRows(
+  rows: readonly Row[],
+  lang: string | undefined,
+  theme = 'github-dark-default',
+): HighlightRun[][] {
+  const oldLines: string[] = []
+  const newLines: string[] = []
+  const oldAt: number[] = []
+  const newAt: number[] = []
+  for (const row of rows) {
+    if (row.kind === 'del') {
+      oldAt.push(oldLines.length)
+      newAt.push(-1)
+      oldLines.push(row.text)
+    } else if (row.kind === 'add') {
+      oldAt.push(-1)
+      newAt.push(newLines.length)
+      newLines.push(row.text)
+    } else if (row.kind === 'context') {
+      oldAt.push(oldLines.length)
+      newAt.push(newLines.length)
+      oldLines.push(row.text)
+      newLines.push(row.text)
+    } else {
+      oldAt.push(-1)
+      newAt.push(-1)
+    }
+  }
+  const oldTok = highlightFile(oldLines, lang, theme)
+  const newTok = highlightFile(newLines, lang, theme)
+  return rows.map((row, i) => {
+    if (row.kind === 'del') return oldTok?.[oldAt[i]!] ?? [{ text: row.text, color: undefined }]
+    if (row.kind === 'add' || row.kind === 'context') return newTok?.[newAt[i]!] ?? [{ text: row.text, color: undefined }]
+    return [{ text: row.text, color: undefined }]
+  })
+}