@spunto/design-system 0.28.0 → 0.30.0

package/src/components/tasks/diff-panel.tsx

@@ -0,0 +1,534 @@
+"use client"
+
+import { useEffect, useMemo, useRef, useState, type ReactNode } from "react"
+import {
+  ChevronRightIcon,
+  CopyIcon,
+  FileDiffIcon,
+  PowerIcon,
+  RefreshCwIcon,
+  SearchIcon,
+} from "lucide-react"
+
+import { cn } from "../../utils"
+import type { TaskDiff, TaskDiffFile, TaskFilePatch, TaskPatchHunk } from "./types"
+
+/**
+ * What a task changed — the review panel of the cockpit, beside the session.
+ *
+ * The session answers "what did it do?". This answers the question that decides whether the work
+ * is accepted: **what is different now.** Spunto reads the task's own machine with git, so there
+ * is no forge in the loop and no pull request required to review a branch. The component itself
+ * reads nothing: the summary comes in as `diff`, and each file's patch through `loadPatch`.
+ *
+ * Three decisions shape the layout, and they are all about a reviewer's eye rather than about
+ * diffs in general:
+ *
+ *  - **The list opens, the files load.** A 60-file change must appear instantly; the bytes of a
+ *    file arrive when it is opened. So the summary is one request and every patch is its own.
+ *  - **The line is the unit.** Two gutters of numbers, a coloured rail, and — the part that makes
+ *    a dense diff readable — the *changed span within a line* is highlighted, so a renamed
+ *    variable in a 200-character line does not have to be hunted for.
+ *  - **Nothing is claimed that was not read.** A stopped machine, a missing base branch and an
+ *    empty diff are three different sentences: "this task changed nothing" is the one answer that
+ *    must never be a side effect of not having looked.
+ */
+
+type DiffFile = TaskDiffFile
+type Hunk = TaskPatchHunk
+type FilePatch = TaskFilePatch
+
+const STATUS_STYLE: Record<string, { letter: string; label: string; className: string }> = {
+  added: { letter: "A", label: "added", className: "border-emerald-500/30 bg-emerald-500/10 text-emerald-700 dark:text-emerald-400" },
+  modified: { letter: "M", label: "modified", className: "border-primary/30 bg-primary/10 text-primary" },
+  deleted: { letter: "D", label: "deleted", className: "border-destructive/30 bg-destructive/10 text-destructive" },
+  renamed: { letter: "R", label: "renamed", className: "border-violet-500/30 bg-violet-500/10 text-violet-700 dark:text-violet-400" },
+  copied: { letter: "C", label: "copied", className: "border-violet-500/30 bg-violet-500/10 text-violet-700 dark:text-violet-400" },
+  "type-changed": { letter: "T", label: "type changed", className: "border-border bg-muted text-muted-foreground" },
+  untracked: { letter: "U", label: "never added to git", className: "border-dashed border-amber-500/40 bg-amber-500/10 text-amber-700 dark:text-amber-400" },
+  unknown: { letter: "?", label: "unknown", className: "border-border bg-muted text-muted-foreground" },
+}
+
+/** `apps/api/src/` + `task-diff.ts` — the eye finds a file by its name, not by its directory. */
+function splitPath(path: string): { dir: string; name: string } {
+  const cut = path.lastIndexOf("/")
+  return cut === -1 ? { dir: "", name: path } : { dir: path.slice(0, cut + 1), name: path.slice(cut + 1) }
+}
+
+const clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value))
+
+/**
+ * Five squares of add/delete ratio, GitHub's idea, warm palette.
+ *
+ * It is worth the pixels because it is read *without* reading: a row of green says "new code", a
+ * row of red says "something was removed", and mixed says "rewritten" — before the numbers next
+ * to it have been parsed at all.
+ */
+function RatioSquares({ additions, deletions }: { additions: number; deletions: number }) {
+  const total = additions + deletions
+  // Nothing counted (a file git never saw, a binary blob) gets no squares at all: five grey ones
+  // look like a measurement that came back empty, when there was no measurement to make.
+  if (total === 0) return null
+  // Each side that exists keeps at least one square: a file that only deletes must not read as
+  // one green square, which is what proportional rounding alone does to it.
+  const green = deletions === 0 ? 5 : additions === 0 ? 0 : clamp(Math.round((additions / total) * 5), 1, 4)
+  const red = 5 - green
+  return (
+    <span className="flex shrink-0 gap-[2px]" aria-hidden>
+      {Array.from({ length: 5 }, (_, i) => (
+        <span
+          key={i}
+          className={cn(
+            "h-2 w-2 rounded-[2px]",
+            i < green ? "bg-emerald-500" : i < green + red ? "bg-destructive" : "bg-muted-foreground/20",
+          )}
+        />
+      ))}
+    </span>
+  )
+}
+
+/** `+248 −7`, with the minus sign that is a minus sign rather than a hyphen. */
+function Counts({ additions, deletions, binary }: { additions: number | null; deletions: number | null; binary: boolean }) {
+  if (binary) return <span className="font-mono text-[11px] text-muted-foreground">binary</span>
+  return (
+    <span className="font-mono text-[11px] tabular-nums">
+      {additions !== null && additions > 0 && <span className="text-emerald-600 dark:text-emerald-400">+{additions}</span>}
+      {additions !== null && additions > 0 && deletions !== null && deletions > 0 && " "}
+      {deletions !== null && deletions > 0 && <span className="text-destructive">−{deletions}</span>}
+      {(additions ?? 0) === 0 && (deletions ?? 0) === 0 && <span className="text-muted-foreground">—</span>}
+    </span>
+  )
+}
+
+/**
+ * The span that actually changed inside a pair of lines.
+ *
+ * Common prefix and suffix, nothing cleverer: a real word diff would need a token model per
+ * language, and this catches the case that matters — one identifier, one string, one number
+ * changed in a long line — without pretending to understand the code. Returns `null` when the
+ * lines share almost nothing, where highlighting "the middle" would just be noise.
+ */
+function changedSpan(a: string, b: string): { start: number; endA: number; endB: number } | null {
+  if (!a || !b) return null
+  let start = 0
+  while (start < a.length && start < b.length && a[start] === b[start]) start++
+  let end = 0
+  while (end < a.length - start && end < b.length - start && a[a.length - 1 - end] === b[b.length - 1 - end]) end++
+  const endA = a.length - end
+  const endB = b.length - end
+  if (endA <= start && endB <= start) return null
+  // Shared edges shorter than a fifth of the line: these are two different lines, not an edit.
+  if (start + end < Math.min(a.length, b.length) / 5) return null
+  return { start, endA, endB }
+}
+
+function LineText({ text, span, side }: { text: string; span: { start: number; endA: number; endB: number } | null; side: "del" | "add" }) {
+  if (!span) return <>{text || " "}</>
+  const end = side === "del" ? span.endA : span.endB
+  return (
+    <>
+      {text.slice(0, span.start)}
+      <mark
+        className={cn(
+          "rounded-[2px] bg-transparent px-0 text-inherit",
+          side === "del" ? "bg-destructive/25" : "bg-emerald-500/25",
+        )}
+      >
+        {text.slice(span.start, end)}
+      </mark>
+      {text.slice(end)}
+    </>
+  )
+}
+
+/** One rendered hunk: the `@@` label, then the lines with both gutters. */
+function HunkBlock({ hunk }: { hunk: Hunk }) {
+  // Pair a run of deletions with the run of additions right after it, so line *n* of one is
+  // compared with line *n* of the other — which is what a human assumes is being shown.
+  const spans = useMemo(() => {
+    const out = new Map<number, { start: number; endA: number; endB: number } | null>()
+    for (let i = 0; i < hunk.lines.length; i++) {
+      if (hunk.lines[i].kind !== "del") continue
+      let dels = 0
+      while (hunk.lines[i + dels]?.kind === "del") dels++
+      let adds = 0
+      while (hunk.lines[i + dels + adds]?.kind === "add") adds++
+      if (dels === adds) {
+        for (let k = 0; k < dels; k++) {
+          const span = changedSpan(hunk.lines[i + k].text, hunk.lines[i + dels + k].text)
+          out.set(i + k, span)
+          out.set(i + dels + k, span)
+        }
+      }
+      i += dels + adds - 1
+    }
+    return out
+  }, [hunk])
+
+  return (
+    <div className="border-t border-border/60 first:border-t-0">
+      <div className="flex items-baseline gap-2 bg-muted/40 px-3 py-1 font-mono text-[10px] text-muted-foreground">
+        <span>{hunk.header}</span>
+        {hunk.context && <span className="truncate opacity-70">{hunk.context}</span>}
+      </div>
+      <div className="overflow-x-auto">
+        <table className="w-full border-collapse font-mono text-[11.5px] leading-[1.55]">
+          <tbody>
+            {hunk.lines.map((line, i) => (
+              <tr
+                key={i}
+                className={cn(
+                  line.kind === "add" && "bg-emerald-500/[0.07]",
+                  line.kind === "del" && "bg-destructive/[0.06]",
+                )}
+              >
+                <td className="w-[1%] select-none whitespace-nowrap border-r border-border/50 px-2 text-right text-[10px] tabular-nums text-muted-foreground/70">
+                  {line.old ?? ""}
+                </td>
+                <td className="w-[1%] select-none whitespace-nowrap border-r border-border/50 px-2 text-right text-[10px] tabular-nums text-muted-foreground/70">
+                  {line.new ?? ""}
+                </td>
+                <td
+                  className={cn(
+                    "w-[1%] select-none border-r-2 px-1.5 text-center text-[10px]",
+                    line.kind === "add" && "border-r-emerald-500/60 text-emerald-600 dark:text-emerald-400",
+                    line.kind === "del" && "border-r-destructive/60 text-destructive",
+                    line.kind === "context" && "border-r-transparent text-transparent",
+                  )}
+                >
+                  {line.kind === "add" ? "+" : line.kind === "del" ? "−" : "·"}
+                </td>
+                <td className="whitespace-pre px-3">
+                  {line.kind === "context" ? (
+                    <span className="text-muted-foreground">{line.text || " "}</span>
+                  ) : (
+                    <LineText text={line.text} span={spans.get(i) ?? null} side={line.kind === "add" ? "add" : "del"} />
+                  )}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}
+
+function patchText(patch: FilePatch): string {
+  return patch.hunks
+    .flatMap((hunk) => [
+      `${hunk.header}${hunk.context ? ` ${hunk.context}` : ""}`,
+      ...hunk.lines.map((l) => `${l.kind === "add" ? "+" : l.kind === "del" ? "-" : " "}${l.text}`),
+    ])
+    .join("\n")
+}
+
+type PatchState = { status: "loading" } | { status: "loaded"; patch: FilePatch } | { status: "error"; message: string }
+
+function FileRow({
+  file,
+  open,
+  onToggle,
+  patchState,
+}: {
+  file: DiffFile
+  open: boolean
+  onToggle: () => void
+  patchState: PatchState | undefined
+}) {
+  const style = STATUS_STYLE[file.status] ?? STATUS_STYLE.unknown
+  const { dir, name } = splitPath(file.path)
+  const [copied, setCopied] = useState(false)
+  const patch = patchState?.status === "loaded" ? patchState.patch : undefined
+  const isLoading = !patchState || patchState.status === "loading"
+
+  return (
+    <div className="border-b border-border/60 last:border-b-0">
+      <div className="group flex items-center gap-2 px-3 py-1.5 hover:bg-muted/40">
+        <button type="button" onClick={onToggle} className="flex min-w-0 flex-1 items-center gap-2 text-left">
+          <ChevronRightIcon className={cn("h-3 w-3 shrink-0 text-muted-foreground transition-transform", open && "rotate-90")} />
+          <span
+            title={style.label}
+            className={cn("flex h-4 w-4 shrink-0 items-center justify-center rounded border text-[9px] font-semibold", style.className)}
+          >
+            {style.letter}
+          </span>
+          <span className="min-w-0 truncate text-xs">
+            <span className="text-muted-foreground">{dir}</span>
+            <span className="font-medium">{name}</span>
+            {file.oldPath && (
+              <span className="ml-1.5 text-[10px] text-muted-foreground">← {splitPath(file.oldPath).name}</span>
+            )}
+          </span>
+        </button>
+        <Counts additions={file.additions} deletions={file.deletions} binary={!!file.binary} />
+        {!file.binary && <RatioSquares additions={file.additions ?? 0} deletions={file.deletions ?? 0} />}
+        {open && patch && !patch.binary && patch.hunks.length > 0 && (
+          <button
+            type="button"
+            title="Copy this patch"
+            onClick={() => {
+              navigator.clipboard?.writeText(patchText(patch))
+              setCopied(true)
+              setTimeout(() => setCopied(false), 1500)
+            }}
+            className="shrink-0 text-[10px] text-muted-foreground opacity-0 transition-opacity hover:text-foreground group-hover:opacity-100"
+          >
+            {copied ? "copied" : <CopyIcon className="h-3 w-3" />}
+          </button>
+        )}
+      </div>
+
+      {open && (
+        <div className="border-t border-border/60 bg-background">
+          {isLoading && <p className="px-3 py-2 text-[11px] text-muted-foreground">Reading the file in the worker…</p>}
+          {patchState?.status === "error" && (
+            <p className="px-3 py-2 text-[11px] text-destructive">{patchState.message}</p>
+          )}
+          {patch?.binary && <p className="px-3 py-2 text-[11px] text-muted-foreground">Binary file — nothing to read line by line.</p>}
+          {patch && !patch.binary && patch.hunks.length === 0 && (
+            <p className="px-3 py-2 text-[11px] text-muted-foreground">
+              {file.status === "deleted" ? "File deleted." : "No textual change to show."}
+            </p>
+          )}
+          {patch?.hunks.map((hunk, i) => <HunkBlock key={i} hunk={hunk} />)}
+          {patch?.truncated && (
+            <p className="border-t border-border/60 px-3 py-2 text-[11px] text-amber-600 dark:text-amber-400">
+              This file is larger than what a patch is read in — the end is not shown.
+            </p>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+/** The whole-change bar: one strip where additions and deletions are to scale against each other. */
+function TotalsBar({ additions, deletions }: { additions: number; deletions: number }) {
+  const total = additions + deletions
+  if (total === 0) return null
+  return (
+    <div className="flex h-1 w-full overflow-hidden rounded-full bg-muted">
+      <div className="bg-emerald-500/80" style={{ width: `${(additions / total) * 100}%` }} />
+      <div className="bg-destructive/70" style={{ width: `${(deletions / total) * 100}%` }} />
+    </div>
+  )
+}
+
+const UNAVAILABLE: Record<string, { title: string; detail: string }> = {
+  "no-machine": {
+    title: "No machine to read",
+    detail: "This task never got a worker, so there is no checkout to compare. Nothing was lost — there is simply nothing to look at yet.",
+  },
+  "machine-stopped": {
+    title: "The machine is asleep",
+    detail: "This project parks a task's worker while it waits for review. Start it again — the Machine panel does it in one click — and the diff is readable.",
+  },
+  "node-unreachable": {
+    title: "The node is not answering",
+    detail: "The compute node hosting this worker is offline right now. The diff is in the machine, not in Spunto, so it comes back when the node does.",
+  },
+  unsupported: {
+    title: "This node's agent is too old",
+    detail: "Reading a diff needs the worker agent's command execution. Update the agent on this node.",
+  },
+}
+
+export interface TaskDiffPanelProps {
+  /** The summary: files, counts, per repository. `undefined`/`null` while the first read is in flight. */
+  diff: TaskDiff | null | undefined
+  /** First read in flight — "Asking the machine what changed…". */
+  loading?: boolean
+  /** A re-read in flight — spins the refresh button. */
+  fetching?: boolean
+  /** The refresh button. Omitted → no button. */
+  onRefresh?: () => void
+  /**
+   * One file's patch, fetched when the file is first opened and kept while its counts don't
+   * change. The component owns the per-file loading/error state; the app only fetches (wrap it
+   * in the app's query cache to share it across mounts).
+   */
+  loadPatch: (args: { repo: string; file: TaskDiffFile }) => Promise<TaskFilePatch>
+  /** Rendered where the panel's title would be — the cockpit puts the Session/Diff switch there. */
+  tabs?: ReactNode
+  className?: string
+}
+
+/** Identity of a file's *content*: new counts mean a new patch, the old one is stale. */
+function patchKey(repo: string, file: DiffFile): string {
+  return `${repo}:${file.path}:${file.additions ?? "-"}:${file.deletions ?? "-"}`
+}
+
+export function TaskDiffPanel({ diff: data, loading: isLoading = false, fetching: isFetching = false, onRefresh, loadPatch, tabs, className }: TaskDiffPanelProps) {
+  const [open, setOpen] = useState<Set<string>>(new Set())
+  const [filter, setFilter] = useState("")
+  const [patches, setPatches] = useState<Record<string, PatchState>>({})
+  const requested = useRef(new Set<string>())
+  const loadPatchRef = useRef(loadPatch)
+  useEffect(() => {
+    loadPatchRef.current = loadPatch
+  })
+
+  // Every open file whose patch has not been asked for yet — opened one by one, or all at once
+  // by "Expand all". Tracked in a ref so a re-render mid-flight never asks twice.
+  useEffect(() => {
+    if (!data?.available) return
+    for (const repo of data.repos) {
+      for (const file of repo.files) {
+        if (!open.has(`${repo.name}:${file.path}`)) continue
+        const key = patchKey(repo.name, file)
+        if (requested.current.has(key)) continue
+        requested.current.add(key)
+        setPatches((prev) => ({ ...prev, [key]: { status: "loading" } }))
+        loadPatchRef
+          .current({ repo: repo.name, file })
+          .then((patch) => setPatches((prev) => ({ ...prev, [key]: { status: "loaded", patch } })))
+          .catch((error: unknown) => {
+            requested.current.delete(key)
+            setPatches((prev) => ({
+              ...prev,
+              [key]: { status: "error", message: error instanceof Error ? error.message : "Could not read this file." },
+            }))
+          })
+      }
+    }
+  }, [open, data])
+
+  const toggle = (key: string) =>
+    setOpen((previous) => {
+      const next = new Set(previous)
+      if (next.has(key)) next.delete(key)
+      else next.add(key)
+      return next
+    })
+
+  const needle = filter.trim().toLowerCase()
+  const repos = (data?.repos ?? []).map((repo) => ({
+    ...repo,
+    files: needle ? repo.files.filter((f) => f.path.toLowerCase().includes(needle)) : repo.files,
+  }))
+  const showFilter = (data?.files ?? 0) > 8
+
+  return (
+    <div className={cn("flex min-h-0 flex-1 flex-col", className)}>
+      <div className="flex shrink-0 items-center gap-2 border-b border-border bg-card px-4 py-2">
+        {tabs ?? <h2 className="text-xs font-medium">Diff</h2>}
+        {data?.available && (
+          <span className="truncate font-mono text-[11px] text-muted-foreground">
+            {data.repos[0]?.base ? `vs ${data.repos[0].base}` : data.baseBranch ? `vs ${data.baseBranch}` : ""}
+          </span>
+        )}
+        {onRefresh && (
+          <button
+            type="button"
+            onClick={onRefresh}
+            title="Read it again"
+            className="ml-auto shrink-0 text-muted-foreground transition-colors hover:text-foreground"
+          >
+            <RefreshCwIcon className={cn("h-3 w-3", isFetching && "animate-spin")} />
+          </button>
+        )}
+      </div>
+
+      <div className="min-h-0 flex-1 overflow-y-auto">
+        {isLoading && !data && <p className="p-4 text-xs text-muted-foreground">Asking the machine what changed…</p>}
+
+        {data && !data.available && (
+          <div className="flex h-full items-center justify-center p-6">
+            <div className="max-w-sm text-center">
+              <PowerIcon className="mx-auto mb-2 h-5 w-5 text-muted-foreground" />
+              <p className="text-xs font-medium">{UNAVAILABLE[data.reason ?? ""]?.title ?? "Nothing to read"}</p>
+              <p className="mt-1 text-[11px] leading-relaxed text-muted-foreground">
+                {UNAVAILABLE[data.reason ?? ""]?.detail ?? "The diff could not be read."}
+              </p>
+            </div>
+          </div>
+        )}
+
+        {data?.available && (
+          <>
+            <div className="space-y-2 border-b border-border bg-card/60 px-4 py-3">
+              <div className="flex items-center gap-2 text-xs">
+                <FileDiffIcon className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+                <span className="font-mono">{data.branch}</span>
+                <span className="text-muted-foreground">←</span>
+                <span className="font-mono text-muted-foreground">{data.repos[0]?.base || data.baseBranch || "base"}</span>
+                <span className="ml-auto shrink-0">
+                  <Counts additions={data.additions} deletions={data.deletions} binary={false} />
+                </span>
+              </div>
+              <TotalsBar additions={data.additions} deletions={data.deletions} />
+              <div className="flex items-baseline gap-2">
+                <p className="text-[11px] text-muted-foreground">
+                  {data.files === 0
+                    ? "No file differs from the base branch yet."
+                    : `${data.files} file${data.files === 1 ? "" : "s"} changed · since the branch point, working tree included`}
+                </p>
+                {data.files > 0 && (
+                  <button
+                    type="button"
+                    onClick={() =>
+                      setOpen((previous) =>
+                        previous.size > 0
+                          ? new Set()
+                          : new Set(repos.flatMap((r) => r.files.map((f) => `${r.name}:${f.path}`))),
+                      )
+                    }
+                    className="ml-auto shrink-0 whitespace-nowrap text-[10px] text-muted-foreground hover:text-foreground"
+                  >
+                    {open.size > 0 ? "Collapse all" : "Expand all"}
+                  </button>
+                )}
+              </div>
+              {showFilter && (
+                <div className="flex items-center gap-1.5 rounded-md border border-border bg-background px-2 py-1">
+                  <SearchIcon className="h-3 w-3 shrink-0 text-muted-foreground" />
+                  <input
+                    value={filter}
+                    onChange={(e) => setFilter(e.target.value)}
+                    placeholder="Filter by path…"
+                    className="w-full bg-transparent text-[11px] outline-none placeholder:text-muted-foreground"
+                  />
+                </div>
+              )}
+            </div>
+
+            {repos.map((repo) => (
+              <div key={repo.cwd ?? repo.name}>
+                {(data.repos.length > 1 || repo.error) && (
+                  <div className="flex items-center gap-2 border-b border-border/60 bg-muted/30 px-3 py-1.5">
+                    <span className="font-mono text-[11px]">{repo.name}</span>
+                    {repo.error ? (
+                      <span className="truncate text-[11px] text-destructive">{repo.error}</span>
+                    ) : (
+                      <span className="ml-auto">
+                        <Counts additions={repo.additions} deletions={repo.deletions} binary={false} />
+                      </span>
+                    )}
+                  </div>
+                )}
+                {repo.files.map((file) => {
+                  const key = `${repo.name}:${file.path}`
+                  return (
+                    <FileRow
+                      key={key}
+                      file={file}
+                      open={open.has(key)}
+                      onToggle={() => toggle(key)}
+                      patchState={patches[patchKey(repo.name, file)]}
+                    />
+                  )
+                })}
+              </div>
+            ))}
+
+            {data.files > 0 && repos.every((r) => r.files.length === 0) && (
+              <p className="p-4 text-[11px] text-muted-foreground">No file matches “{filter}”.</p>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  )
+}