Commit Card

"use client"

import * as React from "react"
import { CommitCard, CommitCardState, DiffFile, DiffFileStatus, DiffHunk, DiffLine, DiffSegment } from "@/components/ui/commit-card"

const FIT_CSS = "html,body{overflow:hidden}[data-fit-small] [data-fit-hide]{display:none!important}"

/**
 * 21st shows a demo in a small frame: about 674 by 421 on a component page, 358 by 224 on a
 * phone and 245 by 139 on a profile card. A demo taller than its frame gets scrollbars, which
 * render white on dark pages. FitFrame fills the frame exactly instead.
 *
 * - "scale": the content shrinks until it fits, centered. For visuals such as orbs.
 * - "crop": the content stays at full size from the top and fades out at the bottom. For text
 *   that streams in, where a changing scale would make the page breathe.
 *
 * `minWidth` lays out a wide demo (a table, a two column panel) at that width and scales it down
 * to the frame, instead of letting it collapse to a narrow layout. The frame centers it, so it
 * shrinks evenly on both sides.
 *
 * Anything marked `data-fit-hide` (state buttons, the chatcn.dev line) drops out in frames
 * shorter than `hideBelow`, so a profile card shows the visual alone.
 */
function FitFrame({
  children,
  mode = "scale",
  hideBelow = 360,
  minWidth,
}: {
  children: React.ReactNode
  mode?: "scale" | "crop"
  hideBelow?: number
  minWidth?: string
}) {
  const content = React.useRef<HTMLDivElement>(null)
  const [cropped, setCropped] = React.useState(false)

  React.useLayoutEffect(() => {
    const el = content.current
    if (!el) return
    const measure = () => {
      const vw = window.innerWidth
      const vh = window.innerHeight
      el.toggleAttribute("data-fit-small", vh < hideBelow)
      // Layout sizes ignore the transform, so measuring never feeds back.
      const w = Math.max(el.offsetWidth, el.scrollWidth)
      const h = Math.max(el.offsetHeight, el.scrollHeight)
      const scale = mode === "scale" ? Math.min(1, vw / w, vh / h) : 1
      el.style.transform = scale < 1 ? `scale(${scale})` : ""
      setCropped(mode === "crop" && h > vh + 1)
    }
    measure()
    const observer = new ResizeObserver(measure)
    observer.observe(el)
    // Content that changes inside a fixed width box (a headline that cycles words) never resizes
    // the box itself, so changes below it measure again on the next frame.
    let frame = 0
    const mutations = new MutationObserver(() => {
      cancelAnimationFrame(frame)
      frame = requestAnimationFrame(measure)
    })
    mutations.observe(el, { subtree: true, childList: true, characterData: true })
    window.addEventListener("resize", measure)
    return () => {
      observer.disconnect()
      mutations.disconnect()
      cancelAnimationFrame(frame)
      window.removeEventListener("resize", measure)
    }
  }, [mode, hideBelow])

  const fade = "linear-gradient(to bottom, #000 calc(100% - 40px), transparent)"
  return (
    <div
      className="flex w-full justify-center overflow-hidden"
      style={{
        height: "100dvh",
        alignItems: mode === "crop" ? "flex-start" : "center",
        maskImage: cropped ? fade : undefined,
        WebkitMaskImage: cropped ? fade : undefined,
      }}
    >
      <style>{FIT_CSS}</style>
      <div
        ref={content}
        className="w-full shrink-0"
        style={{ transformOrigin: mode === "crop" ? "top center" : "center", minWidth }}
      >
        {children}
      </div>
    </div>
  )
}

const commitMessage = `Add cursor pagination to the runs list

getRuns now takes { cursor, limit } and returns a page with nextCursor,
so the runs page loads 20 at a time instead of every run in the project.

- Add GET /api/projects/[projectId]/runs for the next page
- Add LoadMore, a client component that appends pages in place
- Move RunRow next to the page and show the short commit sha
- Remove legacy-runs-cache, which never invalidated`

const SHA = "8f3c2a91d4be07c5a2e6f13b9d0c7e44a1b5f290"

interface FixtureFile {
  path: string
  oldPath?: string
  before: string
  after: string
}

/**
 * One coherent agent change for the diff examples: cursor pagination for a runs list in a
 * Next.js app. Every file is a real before and after, so the diffs, counts and collapsed
 * regions are computed, not faked.
 */

const runsBefore = `import { and, desc, eq } from "drizzle-orm"
import { db } from "@/db"
import { runs } from "@/db/schema"
import { runsCache } from "./legacy-runs-cache"

export type RunStatus = "queued" | "running" | "passed" | "failed"

export interface Run {
  id: string
  name: string
  status: RunStatus
  branch: string
  commitSha: string
  durationMs: number | null
  createdAt: Date
}

export async function getRuns(projectId: string): Promise<Run[]> {
  const cached = runsCache.get(projectId)
  if (cached) return cached

  const rows = await db
    .select()
    .from(runs)
    .where(eq(runs.projectId, projectId))
    .orderBy(desc(runs.createdAt))

  runsCache.set(projectId, rows)
  return rows
}

export async function getRun(projectId: string, id: string): Promise<Run | undefined> {
  const [row] = await db
    .select()
    .from(runs)
    .where(and(eq(runs.projectId, projectId), eq(runs.id, id)))
    .limit(1)
  return row
}

export async function countRuns(projectId: string): Promise<number> {
  const rows = await db.select({ id: runs.id }).from(runs).where(eq(runs.projectId, projectId))
  return rows.length
}

export function formatDuration(ms: number | null) {
  if (ms === null) return "Running"
  if (ms < 1000) return \`\${ms} ms\`
  return \`\${(ms / 1000).toFixed(1)} s\`
}
`

const runsAfter = `import { and, desc, eq, lt } from "drizzle-orm"
import { db } from "@/db"
import { runs } from "@/db/schema"

export type RunStatus = "queued" | "running" | "passed" | "failed"

export interface Run {
  id: string
  name: string
  status: RunStatus
  branch: string
  commitSha: string
  durationMs: number | null
  createdAt: Date
}

export interface RunsPage {
  runs: Run[]
  /** Pass back to getRuns for the next page. Null on the last page. */
  nextCursor: string | null
}

const PAGE_SIZE = 20

export async function getRuns(
  projectId: string,
  { cursor, limit = PAGE_SIZE }: { cursor?: string; limit?: number } = {},
): Promise<RunsPage> {
  const rows = await db
    .select()
    .from(runs)
    .where(
      cursor
        ? and(eq(runs.projectId, projectId), lt(runs.createdAt, new Date(cursor)))
        : eq(runs.projectId, projectId),
    )
    .orderBy(desc(runs.createdAt))
    .limit(limit + 1)

  const hasMore = rows.length > limit
  const page = hasMore ? rows.slice(0, limit) : rows
  const last = page[page.length - 1]
  return { runs: page, nextCursor: hasMore && last ? last.createdAt.toISOString() : null }
}

export async function getRun(projectId: string, id: string): Promise<Run | undefined> {
  const [row] = await db
    .select()
    .from(runs)
    .where(and(eq(runs.projectId, projectId), eq(runs.id, id)))
    .limit(1)
  return row
}

export async function countRuns(projectId: string): Promise<number> {
  const rows = await db.select({ id: runs.id }).from(runs).where(eq(runs.projectId, projectId))
  return rows.length
}

export function formatDuration(ms: number | null) {
  if (ms === null) return "Running"
  if (ms < 1000) return \`\${ms} ms\`
  if (ms < 60_000) return \`\${(ms / 1000).toFixed(1)} s\`
  return \`\${Math.floor(ms / 60_000)} m \${Math.round((ms % 60_000) / 1000)} s\`
}
`

const pageBefore = `import { notFound } from "next/navigation"
import { RunRow } from "@/components/run-row"
import { getProject } from "@/lib/projects"
import { getRuns } from "@/lib/runs"

export default async function RunsPage({
  params,
}: {
  params: Promise<{ projectId: string }>
}) {
  const { projectId } = await params
  const project = await getProject(projectId)
  if (!project) notFound()

  const runs = await getRuns(projectId)

  return (
    <main className="mx-auto max-w-4xl px-6 py-10">
      <h1 className="text-2xl font-semibold">{project.name} runs</h1>
      <ul className="mt-6 divide-y">
        {runs.map((run) => (
          <RunRow key={run.id} run={run} />
        ))}
      </ul>
    </main>
  )
}
`

const pageAfter = `import { notFound } from "next/navigation"
import { getProject } from "@/lib/projects"
import { getRuns } from "@/lib/runs"
import { LoadMore } from "./load-more"
import { RunRow } from "./run-row"

export default async function RunsPage({
  params,
}: {
  params: Promise<{ projectId: string }>
}) {
  const { projectId } = await params
  const project = await getProject(projectId)
  if (!project) notFound()

  const { runs, nextCursor } = await getRuns(projectId, { limit: 20 })

  return (
    <main className="mx-auto max-w-4xl px-6 py-10">
      <h1 className="text-2xl font-semibold">{project.name} runs</h1>
      <ul className="mt-6 divide-y">
        {runs.map((run) => (
          <RunRow key={run.id} run={run} />
        ))}
      </ul>
      {nextCursor ? <LoadMore projectId={projectId} cursor={nextCursor} /> : null}
    </main>
  )
}
`

const loadMore = `"use client"

import { useState, useTransition } from "react"
import type { Run } from "@/lib/runs"
import { RunRow } from "./run-row"

export function LoadMore({ projectId, cursor }: { projectId: string; cursor: string }) {
  const [runs, setRuns] = useState<Run[]>([])
  const [next, setNext] = useState<string | null>(cursor)
  const [pending, startTransition] = useTransition()

  function load() {
    if (!next) return
    startTransition(async () => {
      const res = await fetch(\`/api/projects/\${projectId}/runs?cursor=\${encodeURIComponent(next)}\`)
      const page: { runs: Run[]; nextCursor: string | null } = await res.json()
      setRuns((current) => [...current, ...page.runs])
      setNext(page.nextCursor)
    })
  }

  return (
    <>
      <ul className="divide-y">
        {runs.map((run) => (
          <RunRow key={run.id} run={run} />
        ))}
      </ul>
      {next ? (
        <button type="button" onClick={load} disabled={pending} className="mt-4 text-sm">
          {pending ? "Loading runs…" : "Load 20 more"}
        </button>
      ) : null}
    </>
  )
}
`

const route = `import { NextResponse } from "next/server"
import { getRuns } from "@/lib/runs"

export async function GET(
  request: Request,
  { params }: { params: Promise<{ projectId: string }> },
) {
  const { projectId } = await params
  const cursor = new URL(request.url).searchParams.get("cursor") ?? undefined
  return NextResponse.json(await getRuns(projectId, { cursor }))
}
`

const rowBefore = `import Link from "next/link"
import { formatDuration, type Run } from "@/lib/runs"

export function RunRow({ run }: { run: Run }) {
  return (
    <li className="flex items-center gap-3 py-3">
      <span className="font-medium">{run.name}</span>
      <span className="text-muted-foreground font-mono text-xs">{run.branch}</span>
      <span className="ml-auto tabular-nums">{formatDuration(run.durationMs)}</span>
      <Link href={\`runs/\${run.id}\`} className="text-sm">
        Open
      </Link>
    </li>
  )
}
`

const rowAfter = `import Link from "next/link"
import { formatDuration, type Run } from "@/lib/runs"

export function RunRow({ run }: { run: Run }) {
  return (
    <li className="flex items-center gap-3 py-3">
      <span className="font-medium">{run.name}</span>
      <span className="text-muted-foreground font-mono text-xs">{run.branch}</span>
      <span className="text-muted-foreground font-mono text-xs">{run.commitSha.slice(0, 7)}</span>
      <span className="ml-auto tabular-nums">{formatDuration(run.durationMs)}</span>
      <Link href={\`runs/\${run.id}\`} className="text-sm">
        Open
      </Link>
    </li>
  )
}
`

const cacheBefore = `import type { Run } from "./runs"

/**
 * In-memory cache for the runs list. It never invalidates, so new runs only show up after a
 * deploy. Replaced by cursor pagination.
 */
const store = new Map<string, Run[]>()

export const runsCache = {
  get: (projectId: string) => store.get(projectId),
  set: (projectId: string, rows: Run[]) => store.set(projectId, rows),
}
`

const agentChangeSources: FixtureFile[] = [
  { path: "src/lib/runs.ts", before: runsBefore, after: runsAfter },
  { path: "src/app/runs/page.tsx", before: pageBefore, after: pageAfter },
  { path: "src/app/runs/load-more.tsx", before: "", after: loadMore },
  { path: "src/app/api/projects/[projectId]/runs/route.ts", before: "", after: route },
  {
    path: "src/app/runs/run-row.tsx",
    oldPath: "src/components/run-row.tsx",
    before: rowBefore,
    after: rowAfter,
  },
  { path: "src/lib/legacy-runs-cache.ts", before: cacheBefore, after: "" },
]

interface DiffTextOptions {
  path?: string
  oldPath?: string
  status?: DiffFileStatus
  /** Unchanged lines kept around each change. Defaults to 3. */
  context?: number
  /** Word-level highlights on changed lines. Defaults to true. */
  words?: boolean
  /** Work budget for the line diff. Above it, the rest becomes one delete plus one insert. */
  budget?: number
}

/* -------------------------------------------------------------------------------------------------
 * Files and hunks
 * -----------------------------------------------------------------------------------------------*/

/** Splits text into lines. A trailing newline does not make an extra empty line. */
function splitLines(text: string): string[] {
  if (text === "") return []
  const lines = text.split("\n")
  if (lines[lines.length - 1] === "") lines.pop()
  return lines.map((line) => (line.endsWith("\r") ? line.slice(0, -1) : line))
}

/**
 * chatcn-diff: dependency-free diffs for code review UIs.
 *
 * - `myersDiff` is Myers' O(ND) algorithm in linear space (the middle-snake bisection), with
 *   common prefix and suffix trimming and a work budget so huge inputs degrade instead of hang.
 * - `diffText` turns two versions of a file into hunks with context and word-level highlights.
 * - `parsePatch` reads unified diff text (git or plain), including a patch that is still streaming.
 * - `applyHunks` builds the resulting file from per-hunk accept and reject decisions.
 */

/* -------------------------------------------------------------------------------------------------
 * Types
 * -----------------------------------------------------------------------------------------------*/

type DiffOpType = "equal" | "insert" | "delete"

/** A run of equal, inserted or deleted items. Deletes always come before inserts in a change. */
interface DiffOp {
  type: DiffOpType
  count: number
}

class OpList {
  ops: DiffOp[] = []
  push(type: DiffOpType, count: number) {
    if (count <= 0) return
    const last = this.ops[this.ops.length - 1]
    if (last && last.type === type) last.count += count
    else this.ops.push({ type, count })
  }
}

/**
 * Slides pure insert and pure delete blocks along runs of identical lines so they read the way a
 * person would write them. Myers may report `+ }` `+` `+ export interface X {` ... where the
 * natural block is `+ export interface X {` ... `+ }` `+`. Among the equivalent positions this
 * picks the lowest one whose last line is blank, else the lowest one, like git's slider.
 */
function slideBlocks(ops: DiffOp[], a: readonly string[], b: readonly string[]): DiffOp[] {
  type Entry = { k: DiffOpType; text: string }
  const entries: Entry[] = []
  let i = 0
  let j = 0
  for (const op of ops) {
    for (let c = 0; c < op.count; c++) {
      if (op.type === "delete") entries.push({ k: op.type, text: a[i++] as string })
      else {
        entries.push({ k: op.type, text: b[j] as string })
        j++
        if (op.type === "equal") i++
      }
    }
  }

  let s = 0
  while (s < entries.length) {
    const kind = (entries[s] as Entry).k
    if (kind === "equal") {
      s++
      continue
    }
    let e = s
    while (e < entries.length && (entries[e] as Entry).k === kind) e++
    const pure =
      (s === 0 || (entries[s - 1] as Entry).k === "equal") &&
      (e === entries.length || (entries[e] as Entry).k === "equal")
    if (!pure) {
      s = e
      continue
    }
    const at = (n: number) => entries[n] as Entry
    // Slide up as far as possible.
    while (s > 0 && at(s - 1).k === "equal" && at(s - 1).text === at(e - 1).text) {
      at(e - 1).k = "equal"
      at(s - 1).k = kind
      s--
      e--
    }
    // Walk down, remembering the best stop.
    let best = s
    let bestBlank = at(e - 1).text.trim() === ""
    while (e < entries.length && at(e).k === "equal" && at(s).text === at(e).text) {
      at(s).k = "equal"
      at(e).k = kind
      s++
      e++
      const blank = at(e - 1).text.trim() === ""
      if (blank || !bestBlank) {
        best = s
        bestBlank = blank
      }
    }
    // Slide back up to the best stop.
    while (s > best) {
      at(e - 1).k = "equal"
      at(s - 1).k = kind
      s--
      e--
    }
    s = e
  }

  const out = new OpList()
  for (const entry of entries) out.push(entry.k, 1)
  return out.ops
}

/** Maps items to small integers so the inner loop compares numbers, never strings. */
function intern<T>(a: readonly T[], b: readonly T[]): [Int32Array, Int32Array] {
  const ids = new Map<T, number>()
  const map = (list: readonly T[]) => {
    const out = new Int32Array(list.length)
    for (let i = 0; i < list.length; i++) {
      const item = list[i] as T
      let id = ids.get(item)
      if (id === undefined) {
        id = ids.size
        ids.set(item, id)
      }
      out[i] = id
    }
    return out
  }
  return [map(a), map(b)]
}

/* -------------------------------------------------------------------------------------------------
 * Myers diff
 * -----------------------------------------------------------------------------------------------*/

const DEFAULT_BUDGET = 20_000_000

/**
 * Finds the middle snake by walking forward from the start and backward from the end at once,
 * then recurses on both halves. Memory stays linear in the input size.
 */
function bisect(
  a: Int32Array,
  aLo: number,
  aHi: number,
  b: Int32Array,
  bLo: number,
  bHi: number,
  out: OpList,
  state: { budget: number },
) {
  const n = aHi - aLo
  const m = bHi - bLo
  const maxD = Math.ceil((n + m) / 2)
  const offset = maxD
  const size = 2 * maxD + 2
  const v1 = new Int32Array(size).fill(-1)
  const v2 = new Int32Array(size).fill(-1)
  v1[offset + 1] = 0
  v2[offset + 1] = 0
  const delta = n - m
  // With an odd delta the paths meet on a forward step, otherwise on a backward step.
  const front = delta % 2 !== 0
  let k1start = 0
  let k1end = 0
  let k2start = 0
  let k2end = 0

  for (let d = 0; d < maxD; d++) {
    if (state.budget <= 0) break
    for (let k1 = -d + k1start; k1 <= d - k1end; k1 += 2) {
      const k1o = offset + k1
      let x1 =
        k1 === -d || (k1 !== d && (v1[k1o - 1] as number) < (v1[k1o + 1] as number))
          ? (v1[k1o + 1] as number)
          : (v1[k1o - 1] as number) + 1
      let y1 = x1 - k1
      const from1 = x1
      while (x1 < n && y1 < m && a[aLo + x1] === b[bLo + y1]) {
        x1++
        y1++
      }
      state.budget -= x1 - from1 + 1
      v1[k1o] = x1
      if (x1 > n) k1end += 2
      else if (y1 > m) k1start += 2
      else if (front) {
        const k2o = offset + delta - k1
        if (k2o >= 0 && k2o < size && v2[k2o] !== -1) {
          const x2 = n - (v2[k2o] as number)
          if (x1 >= x2) {
            diffRange(a, aLo, aLo + x1, b, bLo, bLo + y1, out, state)
            diffRange(a, aLo + x1, aHi, b, bLo + y1, bHi, out, state)
            return
          }
        }
      }
    }
    for (let k2 = -d + k2start; k2 <= d - k2end; k2 += 2) {
      const k2o = offset + k2
      let x2 =
        k2 === -d || (k2 !== d && (v2[k2o - 1] as number) < (v2[k2o + 1] as number))
          ? (v2[k2o + 1] as number)
          : (v2[k2o - 1] as number) + 1
      let y2 = x2 - k2
      const from2 = x2
      while (x2 < n && y2 < m && a[aHi - 1 - x2] === b[bHi - 1 - y2]) {
        x2++
        y2++
      }
      state.budget -= x2 - from2 + 1
      v2[k2o] = x2
      if (x2 > n) k2end += 2
      else if (y2 > m) k2start += 2
      else if (!front) {
        const k1o = offset + delta - k2
        if (k1o >= 0 && k1o < size && v1[k1o] !== -1) {
          const x1 = v1[k1o] as number
          const y1 = offset + x1 - k1o
          if (x1 >= n - x2) {
            diffRange(a, aLo, aLo + x1, b, bLo, bLo + y1, out, state)
            diffRange(a, aLo + x1, aHi, b, bLo + y1, bHi, out, state)
            return
          }
        }
      }
    }
  }
  // Over budget, or no overlap found: replace the whole range.
  out.push("delete", n)
  out.push("insert", m)
}

function diffRange(
  a: Int32Array,
  aLo: number,
  aHi: number,
  b: Int32Array,
  bLo: number,
  bHi: number,
  out: OpList,
  state: { budget: number },
) {
  let prefix = 0
  while (aLo + prefix < aHi && bLo + prefix < bHi && a[aLo + prefix] === b[bLo + prefix]) prefix++
  out.push("equal", prefix)
  aLo += prefix
  bLo += prefix

  let suffix = 0
  while (aHi - suffix > aLo && bHi - suffix > bLo && a[aHi - 1 - suffix] === b[bHi - 1 - suffix])
    suffix++
  aHi -= suffix
  bHi -= suffix

  if (aLo === aHi) out.push("insert", bHi - bLo)
  else if (bLo === bHi) out.push("delete", aHi - aLo)
  else bisect(a, aLo, aHi, b, bLo, bHi, out, state)

  out.push("equal", suffix)
}

/** Merges runs and puts every delete before the inserts of the same change. */
function normalize(ops: DiffOp[]): DiffOp[] {
  const out = new OpList()
  let del = 0
  let ins = 0
  const flush = () => {
    out.push("delete", del)
    out.push("insert", ins)
    del = 0
    ins = 0
  }
  for (const op of ops) {
    if (op.type === "equal") {
      flush()
      out.push("equal", op.count)
    } else if (op.type === "delete") del += op.count
    else ins += op.count
  }
  flush()
  return out.ops
}

/**
 * Shortest edit script from `a` to `b`. Items compare with `===`. Within each change, deletes
 * come before inserts, the order every diff tool shows.
 */
function myersDiff<T>(
  a: readonly T[],
  b: readonly T[],
  options: { budget?: number } = {},
): DiffOp[] {
  const [x, y] = intern(a, b)
  const out = new OpList()
  const state = { budget: options.budget ?? DEFAULT_BUDGET }
  diffRange(x, 0, x.length, y, 0, y.length, out, state)
  return normalize(out.ops)
}

function countChanges(lines: DiffLine[]) {
  let additions = 0
  let deletions = 0
  for (const line of lines) {
    if (line.kind === "add") additions++
    else if (line.kind === "remove") deletions++
  }
  return { additions, deletions }
}

function hunkId(oldStart: number, newStart: number) {
  return `h-${oldStart}-${newStart}`
}

/**
 * Builds a hunk from its lines. `oldBefore` and `newBefore` count the lines that come before it,
 * so an empty side points at the line before the change, like `@@ -12,0 +13,4 @@`.
 */
function makeHunk(lines: DiffLine[], oldBefore: number, newBefore: number, heading?: string) {
  let oldLines = 0
  let newLines = 0
  for (const line of lines) {
    if (line.oldNumber !== undefined) oldLines++
    if (line.newNumber !== undefined) newLines++
  }
  const oldStart = oldLines ? oldBefore + 1 : oldBefore
  const newStart = newLines ? newBefore + 1 : newBefore
  const { additions, deletions } = countChanges(lines)
  const hunk: DiffHunk = {
    id: hunkId(oldStart, newStart),
    oldStart,
    oldLines,
    newStart,
    newLines,
    ...(heading ? { heading } : {}),
    lines,
    additions,
    deletions,
    complete: true,
  }
  return hunk
}

/* -------------------------------------------------------------------------------------------------
 * Words
 * -----------------------------------------------------------------------------------------------*/

const TOKEN = /\s+|[\p{L}\p{N}_$]+|[^\s\p{L}\p{N}_$]/gu

function tokenize(text: string): string[] {
  return text.match(TOKEN) ?? []
}

/** Below this share of unchanged characters, a pair of lines is a rewrite, not an edit. */
const MIN_SIMILARITY = 0.4

/**
 * Word-level diff of two lines. Returns `null` when the lines have too little in common for word
 * highlights to help: then the whole line is the change.
 */
function diffWords(
  oldLine: string,
  newLine: string,
): { old: DiffSegment[]; new: DiffSegment[] } | null {
  if (oldLine === newLine) return null
  const a = tokenize(oldLine)
  const b = tokenize(newLine)
  const ops = myersDiff(a, b, { budget: 200_000 })

  type Piece = { type: DiffOpType; old: string; new: string }
  const pieces: Piece[] = []
  let i = 0
  let j = 0
  for (const op of ops) {
    const oldText = op.type === "insert" ? "" : a.slice(i, i + op.count).join("")
    const newText = op.type === "delete" ? "" : b.slice(j, j + op.count).join("")
    if (op.type !== "insert") i += op.count
    if (op.type !== "delete") j += op.count
    pieces.push({ type: op.type, old: oldText, new: newText })
  }

  let same = 0
  for (const piece of pieces) if (piece.type === "equal") same += piece.old.trim().length
  const longest = Math.max(oldLine.trim().length, newLine.trim().length, 1)
  if (same / longest < MIN_SIMILARITY) return null

  const toSegments = (side: "old" | "new") => {
    const segments: DiffSegment[] = []
    for (const piece of pieces) {
      const text = piece[side]
      if (!text) continue
      const changed = piece.type !== "equal"
      const last = segments[segments.length - 1]
      if (last && last.changed === changed) last.text += text
      else segments.push({ text, changed })
    }
    // On each side, a lone space or punctuation mark between two changes joins them, so
    // `a + b` to `x - y` reads as one change, not three.
    const merged: DiffSegment[] = []
    for (let k = 0; k < segments.length; k++) {
      const seg = segments[k] as DiffSegment
      const prev = merged[merged.length - 1]
      const next = segments[k + 1]
      const short = seg.text.trim() === "" || seg.text.length === 1
      if (!seg.changed && short && prev?.changed && next?.changed) {
        prev.text += seg.text + next.text
        k++
      } else if (prev && prev.changed === seg.changed) prev.text += seg.text
      else merged.push({ ...seg })
    }
    return merged
  }
  return { old: toSegments("old"), new: toSegments("new") }
}

/**
 * Pairs removed and added lines inside each change block (first with first) and attaches word
 * segments to pairs that look alike. Mutates and returns `lines`.
 */
function refineWords(lines: DiffLine[]): DiffLine[] {
  let i = 0
  while (i < lines.length) {
    if (lines[i]?.kind !== "remove") {
      i++
      continue
    }
    const removeStart = i
    while (lines[i]?.kind === "remove") i++
    const addStart = i
    while (lines[i]?.kind === "add") i++
    const pairs = Math.min(addStart - removeStart, i - addStart)
    for (let p = 0; p < pairs; p++) {
      const removed = lines[removeStart + p] as DiffLine
      const added = lines[addStart + p] as DiffLine
      const words = diffWords(removed.text, added.text)
      if (words) {
        removed.segments = words.old
        added.segments = words.new
      }
    }
  }
  return lines
}

function statusFor(oldText: string, newText: string, path?: string, oldPath?: string) {
  if (oldPath && path && oldPath !== path) return "renamed" as const
  if (oldText === "" && newText !== "") return "added" as const
  if (newText === "" && oldText !== "") return "deleted" as const
  return "modified" as const
}

/** Diffs two versions of a file into hunks with `context` unchanged lines around each change. */
function diffText(oldText: string, newText: string, options: DiffTextOptions = {}): DiffFile {
  const { context = 3, words = true } = options
  const a = splitLines(oldText)
  const b = splitLines(newText)
  const ops = slideBlocks(myersDiff(a, b, { budget: options.budget }), a, b)

  const all: DiffLine[] = []
  // Old and new lines consumed before each entry of `all`, for hunk starts.
  const cursors: Array<[number, number]> = []
  let i = 0
  let j = 0
  for (const op of ops) {
    for (let c = 0; c < op.count; c++) {
      cursors.push([i, j])
      if (op.type === "equal") {
        all.push({ kind: "context", text: b[j] as string, oldNumber: i + 1, newNumber: j + 1 })
        i++
        j++
      } else if (op.type === "delete") {
        all.push({ kind: "remove", text: a[i] as string, oldNumber: i + 1 })
        i++
      } else {
        all.push({ kind: "add", text: b[j] as string, newNumber: j + 1 })
        j++
      }
    }
  }

  // Group changes whose context windows touch into one hunk.
  const hunks: DiffHunk[] = []
  let k = 0
  while (k < all.length) {
    if (all[k]?.kind === "context") {
      k++
      continue
    }
    const start = Math.max(0, k - context)
    let end = k
    let lastChange = k
    while (end < all.length) {
      if (all[end]?.kind !== "context") lastChange = end
      else if (end - lastChange > context * 2) break
      end++
    }
    const stop = Math.min(all.length, lastChange + context + 1)
    const lines = all.slice(start, stop)
    const [oldBefore, newBefore] = cursors[start] as [number, number]
    hunks.push(makeHunk(words ? refineWords(lines) : lines, oldBefore, newBefore))
    k = stop
  }

  const totals = countChanges(all)
  return {
    path: options.path ?? "",
    ...(options.oldPath && options.oldPath !== options.path ? { oldPath: options.oldPath } : {}),
    status: options.status ?? statusFor(oldText, newText, options.path, options.oldPath),
    hunks,
    additions: totals.additions,
    deletions: totals.deletions,
    source: { old: a, new: b, oldEol: oldText.endsWith("\n"), newEol: newText.endsWith("\n") },
    complete: true,
  }
}

/** The change set as diffed files, ready for `ChangedFiles` and `DiffViewer`. */
const agentChange: DiffFile[] = agentChangeSources.map((f) =>
  diffText(f.before, f.after, { path: f.path, oldPath: f.oldPath }),
)

/** Drafting streams the message, then the commit lands, pushes, and the demo replays. */
function CommitCardDemo() {
  const [length, setLength] = React.useState(0)
  const [state, setState] = React.useState<CommitCardState>("drafting")

  React.useEffect(() => {
    let id: number
    if (state === "drafting") {
      id =
        length < commitMessage.length
          ? window.setTimeout(() => setLength((n) => Math.min(commitMessage.length, n + 6)), 28)
          : window.setTimeout(() => setState("created"), 500)
    } else if (state === "pushing") {
      id = window.setTimeout(() => setState("pushed"), 1400)
    } else if (state === "pushed") {
      id = window.setTimeout(() => {
        setLength(0)
        setState("drafting")
      }, 4000)
    } else {
      id = window.setTimeout(() => setState("pushing"), 2600)
    }
    return () => window.clearTimeout(id)
  }, [state, length])

  return (
    <CommitCard
      className="w-full max-w-lg"
      state={state}
      message={commitMessage.slice(0, length)}
      sha={state === "drafting" ? undefined : SHA}
      branch="feat/runs-pagination"
      files={state === "drafting" ? undefined : agentChange}
      href="https://github.com/brightwell/console/commit/8f3c2a91d4be07c5a2e6f13b9d0c7e44a1b5f290"
      onPush={() => setState("pushing")}
    />
  )
}

/** The line under each 21st demo that points back to the kit. */
function MoreOn({ slug, children }: { slug: string; children: React.ReactNode }) {
  return (
    <p data-fit-hide className="text-[0.75rem]/[1rem] text-(color:--chatcn-fg-faint) text-center text-balance">
      {children}{" "}
      <a
        href={`https://chatcn.dev/docs/components/${slug}`}
        target="_blank"
        rel="noopener"
        className="text-(color:--chatcn-fg-subtle) hover:text-(color:--chatcn-fg) underline underline-offset-2"
      >
        chatcn.dev
      </a>
    </p>
  )
}

/** The kit's own example, framed for the 21st preview. */
export default function CommitCardPreview() {
  return (
    <FitFrame minWidth="36rem">
      <div className="flex w-full flex-col items-center justify-center gap-4 p-6">
        <div className="flex h-[23.5rem] w-full max-w-2xl items-start justify-center">
          <CommitCardDemo />
        </div>
        <MoreOn slug="commit-card">A commit an agent made, with files and checks. On</MoreOn>
      </div>
    </FitFrame>
  )
}