dsh-remote-vs 0.0.0-stage → 0.8.3

package/src/client/scm/HistoryPanel.tsx

@@ -0,0 +1,353 @@
+/**
+ * History view: the commit graph with branch lanes and merge curves (lane
+ * layout ported from the previous Git view), plus click-to-expand changed
+ * files and a per-file diff of that commit.
+ *
+ * Loading is a SINGLE capped call (`api.git.log(..., GIT_LOG_MAX)`); a deep
+ * repository shows the newest GIT_LOG_MAX commits and is filtered client-side.
+ * The docstring here used to promise scroll-triggered paging that does not
+ * exist, which is worse than no comment: a reader trusts it.
+ */
+import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from 'react'
+import type { GitCommit, GitCommitFile } from '../../protocol.ts'
+import { GIT_LOG_MAX } from '../../git-format.ts'
+import { api } from '../api.ts'
+import { useExplorer } from '../store.tsx'
+import { checkoutCommit, loadCommitFiles } from './actions.ts'
+import {
+  IconButton,
+  IconChevronDown,
+  IconChevronRight,
+  IconRefresh,
+  MiniSpinner,
+  confirmDialog,
+  FileIcon,
+  gitStatusClass,
+  relTime,
+  toast,
+} from '../vsc/kit.tsx'
+
+const ROW_H = 22
+const LANE_W = 13
+const PAD_X = 9
+const LANE_COLORS = ['#e2b714', '#4ec9b0', '#58a6ff', '#d2a8ff', '#ff7b72', '#79c0ff', '#7ee787', '#ffa657']
+
+/**
+ * Ref badge decoration for one `%D` entry. Extracted from a pair of nested
+ * ternaries (forbidden by this project's review checklist) that were doing two
+ * different jobs — CSS modifier and display text — inside one JSX expression.
+ */
+function refBadgeClass(ref: string): string {
+  if (ref.startsWith('HEAD ->')) return ' head'
+  if (ref.startsWith('tag:')) return ' tag'
+  return ''
+}
+
+function refBadgeLabel(ref: string): string {
+  if (ref.startsWith('HEAD -> ')) return ref.slice('HEAD -> '.length)
+  return ref.replace(/^tag: /, '')
+}
+
+interface GraphRow {
+  commit: GitCommit
+  lane: number
+  before: (string | null)[]
+  after: (string | null)[]
+  merges: { lane: number; fresh: boolean }[]
+  cleared: number[]
+}
+
+/** Assign one lane per commit line; extra parents open or ride lanes. */
+function layoutLanes(commits: GitCommit[]): { rows: GraphRow[]; laneCount: number } {
+  const lanes: (string | null)[] = []
+  const rows: GraphRow[] = []
+  for (const commit of commits) {
+    let i = lanes.indexOf(commit.hash)
+    if (i === -1) {
+      const free = lanes.indexOf(null)
+      if (free === -1) {
+        lanes.push(commit.hash)
+        i = lanes.length - 1
+      } else {
+        lanes[free] = commit.hash
+        i = free
+      }
+    }
+    const before = [...lanes]
+    const merges: GraphRow['merges'] = []
+    const cleared: number[] = []
+    const parents = commit.parents
+    if (parents.length === 0) {
+      lanes[i] = null
+    } else {
+      lanes[i] = parents[0] as string
+      for (let k = 0; k < lanes.length; k++) {
+        if (k !== i && lanes[k] === parents[0]) {
+          lanes[k] = null
+          cleared.push(k)
+        }
+      }
+      for (let p = 1; p < parents.length; p++) {
+        const parentHash = parents[p] as string
+        const j = lanes.indexOf(parentHash)
+        if (j === -1) {
+          const free = lanes.indexOf(null)
+          if (free === -1) {
+            lanes.push(parentHash)
+            merges.push({ lane: lanes.length - 1, fresh: true })
+          } else {
+            lanes[free] = parentHash
+            merges.push({ lane: free, fresh: true })
+          }
+        } else {
+          merges.push({ lane: j, fresh: false })
+        }
+      }
+    }
+    rows.push({ commit, lane: i, before, after: [...lanes], merges, cleared })
+  }
+  let used = 1
+  for (const row of rows) {
+    used = Math.max(used, row.lane + 1)
+    row.before.forEach((hash, j) => { if (hash !== null) used = Math.max(used, j + 1) })
+    row.after.forEach((hash, j) => { if (hash !== null) used = Math.max(used, j + 1) })
+    for (const merge of row.merges) used = Math.max(used, merge.lane + 1)
+  }
+  return { rows, laneCount: used }
+}
+
+function laneColor(lane: number): string {
+  return LANE_COLORS[lane % LANE_COLORS.length] as string
+}
+
+export function HistoryPanel(): ReactNode {
+  const store = useExplorer()
+  const { t, lang, alias, repoRoot } = store
+  const [commits, setCommits] = useState<GitCommit[]>([])
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | undefined>(undefined)
+  const [expanded, setExpanded] = useState<string | undefined>(undefined)
+  const [files, setFiles] = useState<Record<string, GitCommitFile[]>>({})
+  const [filter, setFilter] = useState('')
+  const head = store.head?.branch ?? ''
+  /**
+   * Ticket for the log request. The panel stays mounted across binding
+   * switches, so two `git log` calls can overlap; without this the slower one
+   * lands last and the tab lists the OTHER workspace's commits, with checkout
+   * buttons that act on the currently bound repository.
+   */
+  const loadSeq = useRef(0)
+
+  const load = useCallback(async (): Promise<void> => {
+    if (alias === '' || repoRoot === undefined) {
+      loadSeq.current += 1
+      setCommits([])
+      setLoading(false)
+      return
+    }
+    const ticket = ++loadSeq.current
+    setLoading(true)
+    setError(undefined)
+    try {
+      const list = await api.git.log(alias, repoRoot, GIT_LOG_MAX)
+      if (loadSeq.current !== ticket) return
+      setCommits(list)
+    } catch (caught) {
+      if (loadSeq.current !== ticket) return
+      setCommits([])
+      setError(caught instanceof Error ? caught.message : String(caught))
+    } finally {
+      if (loadSeq.current === ticket) setLoading(false)
+    }
+  }, [alias, repoRoot])
+
+  useEffect(() => {
+    void load()
+  }, [load])
+
+  const visible = useMemo(() => {
+    if (filter.trim() === '') return commits
+    const needle = filter.trim().toLowerCase()
+    return commits.filter(commit =>
+      commit.subject.toLowerCase().includes(needle)
+      || commit.author.toLowerCase().includes(needle)
+      || commit.hash.startsWith(needle))
+  }, [commits, filter])
+
+  const graph = useMemo(() => layoutLanes(visible), [visible])
+
+  const toggleCommit = async (hash: string): Promise<void> => {
+    if (expanded === hash) {
+      setExpanded(undefined)
+      return
+    }
+    setExpanded(hash)
+    if (files[hash] !== undefined || repoRoot === undefined) return
+    try {
+      const rows = await loadCommitFiles(alias, repoRoot, hash)
+      setFiles(prev => ({ ...prev, [hash]: rows }))
+    } catch (error) {
+      toast(error instanceof Error ? error.message : String(error), true)
+    }
+  }
+
+  const x = (lane: number): number => PAD_X + lane * LANE_W
+  const y = (row: number): number => row * ROW_H + ROW_H / 2
+
+  return (
+    <div className="rvs-pane grow">
+      <div className="rvs-header">
+        <span className="rvs-title">{t('tab.history')}</span>
+        {head !== '' && <span className="rvs-pill">⑂ {store.head?.detached === true ? t('scm.detached') : head}</span>}
+        <IconButton title={t('scm.refresh')} onClick={() => { void load() }} disabled={loading}>
+          <IconRefresh size={14} />
+        </IconButton>
+      </div>
+      <div className="rvs-search-row">
+        <input
+          className="rvs-input"
+          placeholder={t('history.filter')}
+          value={filter}
+          spellCheck={false}
+          onChange={(e) => setFilter(e.target.value)}
+        />
+      </div>
+      {error !== undefined && <div className="rvs-banner error">{error}</div>}
+      <div className="rvs-scroll">
+        {loading && commits.length === 0 && <div className="rvs-empty"><MiniSpinner /> {t('common.loading')}</div>}
+        {!loading && commits.length === 0 && error === undefined && <div className="rvs-empty">{t('scm.logEmpty')}</div>}
+        {graph.rows.map((row, index) => {
+          const commit = row.commit
+          const isOpen = expanded === commit.hash
+          const changed = files[commit.hash]
+          return (
+            <div key={commit.hash}>
+              <button
+                type="button"
+                className={`rvs-commit-item${isOpen ? ' selected' : ''}`}
+                title={`${commit.hash}\n${commit.author} <${commit.email}>\n${commit.subject}`}
+                onClick={() => { void toggleCommit(commit.hash) }}
+              >
+                <span className="rvs-node-icon" style={{ width: 12 }}>
+                  {isOpen ? <IconChevronDown size={11} /> : <IconChevronRight size={11} />}
+                </span>
+                <svg className="rvs-graph-svg" width={PAD_X * 2 + (graph.laneCount - 1) * LANE_W} height={ROW_H}>
+                  {row.before.map((hash, lane) => {
+                    const after = row.after[lane] ?? null
+                    if (hash === null || after === null || hash !== after) return null
+                    return (
+                      <line
+                        key={`v${lane}`}
+                        x1={x(lane)}
+                        y1={y(index) - ROW_H / 2}
+                        x2={x(lane)}
+                        y2={y(index) + ROW_H / 2}
+                        stroke={laneColor(lane)}
+                        strokeWidth="2"
+                      />
+                    )
+                  })}
+                  {index > 0 && row.before[row.lane] != null && (
+                    <line x1={x(row.lane)} y1={y(index) - ROW_H / 2} x2={x(row.lane)} y2={y(index)} stroke={laneColor(row.lane)} strokeWidth="2" />
+                  )}
+                  {row.after[row.lane] != null && (
+                    <line x1={x(row.lane)} y1={y(index)} x2={x(row.lane)} y2={y(index) + ROW_H / 2} stroke={laneColor(row.lane)} strokeWidth="2" />
+                  )}
+                  {row.cleared.map(lane => (
+                    <path
+                      key={`c${lane}`}
+                      d={`M ${x(lane)} ${y(index) - ROW_H / 2} Q ${x(lane)} ${y(index)} ${x(row.lane)} ${y(index)}`}
+                      fill="none"
+                      stroke={laneColor(lane)}
+                      strokeWidth="2"
+                    />
+                  ))}
+                  {row.merges.map(merge => (
+                    <path
+                      key={`m${merge.lane}`}
+                      d={merge.fresh
+                        ? `M ${x(row.lane)} ${y(index)} Q ${x(row.lane)} ${y(index) + ROW_H / 2} ${x(merge.lane)} ${y(index) + ROW_H / 2}`
+                        : `M ${x(row.lane)} ${y(index)} Q ${(x(row.lane) + x(merge.lane)) / 2} ${y(index) + 9} ${x(merge.lane)} ${y(index)}`}
+                      fill="none"
+                      stroke={laneColor(merge.lane)}
+                      strokeWidth="2"
+                    />
+                  ))}
+                  <circle cx={x(row.lane)} cy={y(index)} r="3.4" fill={laneColor(row.lane)} />
+                </svg>
+                {commit.refs.length > 0 && (
+                  <span style={{ display: 'flex', gap: 3, flex: 'none' }}>
+                    {commit.refs.slice(0, 2).map(ref => (
+                      <span
+                        key={ref}
+                        className={`rvs-ref-badge${refBadgeClass(ref)}`}
+                      >
+                        {refBadgeLabel(ref)}
+                      </span>
+                    ))}
+                  </span>
+                )}
+                <span className="rvs-commit-hash">{commit.hash.slice(0, 7)}</span>
+                <span className="rvs-commit-msg">{commit.subject}</span>
+                <span className="rvs-commit-date">{relTime(commit.date, lang)}</span>
+              </button>
+              {isOpen && (
+                <div className="rvs-detail">
+                  <div className="rvs-detail-meta">
+                    {commit.author} &lt;{commit.email}&gt; · {relTime(commit.date, lang)} · {commit.hash.slice(0, 10)}
+                  </div>
+                  {changed === undefined
+                    ? <div className="rvs-empty" style={{ padding: 8 }}><MiniSpinner /> {t('common.loading')}</div>
+                    : changed.length === 0
+                      ? <div className="rvs-empty" style={{ padding: 8 }}>{t('scm.logEmpty')}</div>
+                      : changed.slice(0, 200).map(file => (
+                        <div
+                          key={`${file.status}:${file.path}`}
+                          className="rvs-file-row"
+                          title={file.origPath === undefined ? file.path : `${file.origPath} → ${file.path}`}
+                          onClick={() => { store.openCommitFile(commit.hash, file.path) }}
+                        >
+                          <span className="rvs-node-icon"><FileIcon path={file.path} size={13} /></span>
+                          <span className="rvs-file-path">
+                            {file.origPath === undefined ? file.path : `${file.origPath} → ${file.path}`}
+                          </span>
+                          <span className={`rvs-file-status rvs-letter-${gitStatusClass(file.status)}`}>{file.status[0]}</span>
+                        </div>
+                      ))}
+                  <div className="rvs-commit-row">
+                    <button
+                      type="button"
+                      className="rvs-chip"
+                      onClick={() => {
+                        void (async () => {
+                          const ok = await confirmDialog({
+                            title: t('scm.checkoutCommitTitle'),
+                            text: t('scm.checkoutCommitText').replace('{hash}', commit.hash.slice(0, 10)),
+                            okText: t('scm.checkout'),
+                          })
+                          if (!ok || repoRoot === undefined) return
+                          try {
+                            await checkoutCommit(alias, repoRoot, commit.hash)
+                            await store.afterWrite()
+                            toast(t('scm.checkedOut'))
+                          } catch (caught) {
+                            toast(caught instanceof Error ? caught.message : String(caught), true)
+                          }
+                        })()
+                      }}
+                    >
+                      {t('scm.checkout')}
+                    </button>
+                  </div>
+                </div>
+              )}
+            </div>
+          )
+        })}
+        {visible.length >= GIT_LOG_MAX && (
+          <div className="rvs-empty">{t('scm.logCapped').replace('{n}', String(GIT_LOG_MAX))}</div>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/client/scm/RepoPicker.tsx

@@ -0,0 +1,238 @@
+/**
+ * Repository directory picker (SCM): a workspace binding is often a container
+ * (`/srv/sites`) while the repository sits one or more levels below it
+ * (`/srv/sites/shop/.git`). Git only answers for the directory it runs in, so
+ * this dialog browses the REMOTE tree under the workspace root and reports, per
+ * directory, which repository it would resolve to before the user commits.
+ *
+ * Three ways in, because they cover different situations:
+ *  - the discovered-repository list (one `find` under the workspace root, max
+ *    depth 3) for the common case,
+ *  - drilling through directories (dirs only, `..` included),
+ *  - typing or pasting a path (relative or absolute inside the workspace) when
+ *    the tree is deep.
+ */
+import { useCallback, useEffect, useMemo, useState, type ReactNode } from 'react'
+import { api } from '../api.ts'
+import { normalizeRepoSubdir, repoSubdirOf, repoWorkdir } from '../../git-ops.ts'
+import { resolveRepoRoot } from './actions.ts'
+import { IconButton, IconChevronRight, IconClose, IconFolder, IconRefresh, FolderIcon, MiniSpinner } from '../vsc/kit.tsx'
+import { useExplorer } from '../store.tsx'
+
+/** What git resolves to for the directory currently being browsed. */
+type Probe =
+  | { kind: 'loading' }
+  | { kind: 'root' }
+  | { kind: 'inside'; subdir: string }
+  | { kind: 'none' }
+  | { kind: 'error'; message: string }
+
+export function RepoPicker(props: {
+  alias: string
+  /** Absolute workspace root (the tree the picker may browse). */
+  root: string
+  /** Currently selected workspace-relative directory ('' = the root). */
+  current: string
+  onPick: (subdir: string) => void
+  onClose: () => void
+}): ReactNode {
+  const store = useExplorer()
+  const { t, discoverRepos } = store
+  const [cwd, setCwd] = useState<string>(() => repoWorkdir(props.root, props.current))
+  const [dirs, setDirs] = useState<{ name: string; path: string }[]>([])
+  const [listing, setListing] = useState(false)
+  const [probe, setProbe] = useState<Probe>({ kind: 'loading' })
+  const [candidates, setCandidates] = useState<string[] | undefined>(undefined)
+  const [finding, setFinding] = useState(false)
+  const [typed, setTyped] = useState('')
+  const [error, setError] = useState<string | undefined>(undefined)
+
+  const rel = repoSubdirOf(props.root, cwd) ?? ''
+  const insideRoot = repoSubdirOf(props.root, cwd) !== undefined
+
+  // Directory listing + repository probe for the browsed directory.
+  useEffect(() => {
+    let cancelled = false
+    setListing(true)
+    setProbe({ kind: 'loading' })
+    api.fileOp.list(props.alias, cwd).then(
+      (entries) => {
+        if (cancelled) return
+        setDirs(
+          entries
+            .filter(entry => entry.isDir)
+            .map(entry => ({ name: entry.name, path: entry.path }))
+            .sort((a, b) => a.name.localeCompare(b.name)),
+        )
+        setListing(false)
+      },
+      (e: unknown) => {
+        if (cancelled) return
+        setDirs([])
+        setListing(false)
+        setError(e instanceof Error ? e.message : String(e))
+      },
+    )
+    resolveRepoRoot(props.alias, cwd).then(
+      (found) => {
+        if (cancelled) return
+        if (found === undefined) setProbe({ kind: 'none' })
+        else if (found === cwd) setProbe({ kind: 'root' })
+        else setProbe({ kind: 'inside', subdir: repoSubdirOf(props.root, found) ?? found })
+      },
+      (e: unknown) => {
+        if (cancelled) return
+        setProbe({ kind: 'error', message: e instanceof Error ? e.message : String(e) })
+      },
+    )
+    return () => { cancelled = true }
+  }, [props.alias, props.root, cwd])
+
+  const find = useCallback(async (): Promise<void> => {
+    setFinding(true)
+    try {
+      setCandidates(await discoverRepos())
+    } finally {
+      setFinding(false)
+    }
+  }, [discoverRepos])
+
+  // Discovery runs once when the dialog opens, and again only when the dialog
+  // is re-pointed at another binding: it is the shortest path for the "my
+  // repository is in a subdirectory somewhere" case. The dependency used to be
+  // the whole `store`, whose snapshot is a NEW object on every publish — so
+  // every background git refresh under an open dialog re-ran a remote
+  // `git rev-parse` (plus a `find -maxdepth 3` when the root is not a repo).
+  // It does not depend on `cwd`: the scan starts at the workspace root.
+  useEffect(() => { void find() }, [find, props.alias, props.root])
+
+  const parent = useMemo(() => {
+    if (!insideRoot) return undefined
+    if (rel === '') return undefined
+    const cut = rel.lastIndexOf('/')
+    return repoWorkdir(props.root, cut === -1 ? '' : rel.slice(0, cut))
+  }, [insideRoot, rel, props.root])
+
+  const jump = (input: string): void => {
+    const value = input.trim()
+    if (value === '') return
+    if (value.startsWith('/')) {
+      const subdir = repoSubdirOf(props.root, value.replace(/\/+$/, ''))
+      if (subdir === undefined) {
+        setError(t('scm.pickOutside'))
+        return
+      }
+      setError(undefined)
+      setCwd(repoWorkdir(props.root, subdir))
+      setTyped('')
+      return
+    }
+    setError(undefined)
+    setCwd(repoWorkdir(props.root, normalizeRepoSubdir(value)))
+    setTyped('')
+  }
+
+  const crumbs = rel === '' ? [] : rel.split('/')
+
+  return (
+    <div className="rvs-modal-mask" onMouseDown={(e) => { if (e.target === e.currentTarget) props.onClose() }}>
+      <div className="rvs-modal-box rvs-repopick" role="dialog" aria-label={t('scm.pickTitle')}>
+        <div className="rvs-modal-title">
+          {t('scm.pickTitle')}
+          <IconButton title={t('common.close')} onClick={props.onClose}><IconClose size={13} /></IconButton>
+        </div>
+
+        <div className="rvs-repopick-bar">
+          <button type="button" className="rvs-crumb" onClick={() => setCwd(props.root)}>{t('scm.repoDirRoot')}</button>
+          {crumbs.map((part, index) => (
+            <span key={`${part}-${index}`} className="rvs-crumb-wrap">
+              <IconChevronRight size={11} />
+              <button
+                type="button"
+                className="rvs-crumb"
+                onClick={() => setCwd(repoWorkdir(props.root, crumbs.slice(0, index + 1).join('/')))}
+              >
+                {part}
+              </button>
+            </span>
+          ))}
+          {listing && <MiniSpinner />}
+        </div>
+
+        <div className={`rvs-repopick-probe ${probe.kind}`}>
+          {probe.kind === 'loading' && t('common.loading')}
+          {probe.kind === 'root' && `✓ ${t('scm.pickRoot')}`}
+          {probe.kind === 'inside' && `${t('scm.pickInside')} ${probe.subdir === '' ? t('scm.repoDirRoot') : probe.subdir}`}
+          {probe.kind === 'none' && t('scm.pickNone')}
+          {probe.kind === 'error' && probe.message}
+        </div>
+
+        {candidates !== undefined && (
+          <div className="rvs-repopick-found">
+            <span className="rvs-repopick-found-label">{t('scm.discoverFound')}</span>
+            {candidates.length === 0
+              ? <span className="rvs-repopick-dim">{t('scm.discoverEmpty')}</span>
+              : candidates.map(dir => (
+                <button
+                  key={dir === '' ? '.' : dir}
+                  type="button"
+                  className="rvs-chip"
+                  title={repoWorkdir(props.root, dir)}
+                  onClick={() => setCwd(repoWorkdir(props.root, dir))}
+                >
+                  {dir === '' ? t('scm.repoDirRoot') : dir}
+                </button>
+              ))}
+            <IconButton title={t('scm.discover')} onClick={() => { void find() }} disabled={finding}>
+              <IconRefresh size={12} />
+            </IconButton>
+          </div>
+        )}
+
+        <div className="rvs-repopick-list">
+          {parent !== undefined && (
+            <button type="button" className="rvs-repopick-row up" onClick={() => setCwd(parent)}>
+              <IconFolder size={14} /><span>..</span>
+            </button>
+          )}
+          {dirs.map(dir => (
+            <button key={dir.path} type="button" className="rvs-repopick-row" title={dir.path} onClick={() => setCwd(dir.path)}>
+              <FolderIcon path={dir.path} open={false} size={14} />
+              <span>{dir.name}</span>
+            </button>
+          ))}
+          {!listing && dirs.length === 0 && <div className="rvs-repopick-dim">{t('scm.pickEmptyDir')}</div>}
+        </div>
+
+        <form
+          className="rvs-repopick-type"
+          onSubmit={(e) => { e.preventDefault(); jump(typed) }}
+        >
+          <input
+            className="rvs-input"
+            value={typed}
+            spellCheck={false}
+            placeholder={t('scm.pickPathPlaceholder')}
+            onChange={(e) => setTyped(e.target.value)}
+          />
+          <button type="submit" className="rvs-chip" disabled={typed.trim() === ''}>{t('scm.pickGo')}</button>
+        </form>
+
+        {error !== undefined && <div className="rvs-repopick-error">{error}</div>}
+
+        <div className="rvs-modal-row">
+          <button type="button" className="rvs-modal-btn" onClick={props.onClose}>{t('scm.pickCancel')}</button>
+          <button
+            type="button"
+            className="rvs-modal-btn primary"
+            disabled={!insideRoot}
+            title={cwd}
+            onClick={() => props.onPick(rel)}
+          >
+            {t('scm.pickChoose')}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}