phase 3 initial completion

2026-05-07 00:22:45 +02:00
parent 5d8662595c
commit ce2aa2c776
19 changed files with 1216 additions and 37 deletions
@@ -0,0 +1,159 @@
+import { useMemo, useState } from 'react'
+import { cn } from '../../lib/utils'
+
+export interface FileDiff {
+  path: string
+  oldPath?: string
+  additions: number
+  deletions: number
+  patch: string
+}
+
+interface DiffViewerProps {
+  files: FileDiff[]
+}
+
+export function DiffViewer({ files }: DiffViewerProps) {
+  if (!files.length) {
+    return (
+      <div className="text-center py-12 text-[#5E6C84] text-sm">
+        No changes in this diff.
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex flex-col gap-4">
+      {files.map(file => (
+        <FileDiffBlock key={file.path} file={file} />
+      ))}
+    </div>
+  )
+}
+
+function FileDiffBlock({ file }: { file: FileDiff }) {
+  const [collapsed, setCollapsed] = useState(false)
+  const lines = useMemo(() => parsePatch(file.patch), [file.patch])
+
+  return (
+    <div className="border border-[#DFE1E6] rounded overflow-hidden font-mono text-xs">
+      {/* File header */}
+      <div className="flex items-center justify-between px-3 py-2 bg-[#F4F5F7] border-b border-[#DFE1E6] gap-2">
+        <button
+          onClick={() => setCollapsed(c => !c)}
+          className="flex items-center gap-2 text-left min-w-0"
+        >
+          <svg
+            width="12" height="12" fill="none" stroke="currentColor" strokeWidth="2"
+            viewBox="0 0 24 24"
+            className={cn('shrink-0 transition-transform', collapsed && '-rotate-90')}
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
+          </svg>
+          <span className="font-semibold text-[#172B4D] truncate">{file.path}</span>
+          {file.oldPath && file.oldPath !== file.path && (
+            <span className="text-[#5E6C84] text-[10px] shrink-0">← {file.oldPath}</span>
+          )}
+        </button>
+        <div className="flex items-center gap-2 shrink-0 text-[11px]">
+          {file.additions > 0 && (
+            <span className="text-[#00875A] font-semibold">+{file.additions}</span>
+          )}
+          {file.deletions > 0 && (
+            <span className="text-[#DE350B] font-semibold">-{file.deletions}</span>
+          )}
+        </div>
+      </div>
+
+      {/* Diff lines */}
+      {!collapsed && (
+        <div className="overflow-x-auto">
+          <table className="w-full border-collapse text-[11px] leading-5">
+            <tbody>
+              {lines.map((line, i) => (
+                <DiffLine key={i} line={line} />
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  )
+}
+
+type LineType = 'added' | 'removed' | 'context' | 'hunk'
+
+interface ParsedLine {
+  type: LineType
+  oldNo?: number
+  newNo?: number
+  content: string
+}
+
+function parsePatch(patch: string): ParsedLine[] {
+  const lines: ParsedLine[] = []
+  let oldNo = 0
+  let newNo = 0
+
+  for (const raw of patch.split('\n')) {
+    if (raw.startsWith('@@')) {
+      // @@ -oldStart,oldCount +newStart,newCount @@
+      const match = raw.match(/@@ -(\d+)(?:,\d+)? \+(\d+)(?:,\d+)? @@/)
+      if (match) {
+        oldNo = parseInt(match[1], 10)
+        newNo = parseInt(match[2], 10)
+      }
+      lines.push({ type: 'hunk', content: raw })
+      continue
+    }
+    if (raw.startsWith('+') && !raw.startsWith('+++')) {
+      lines.push({ type: 'added', newNo: newNo++, content: raw.slice(1) })
+    } else if (raw.startsWith('-') && !raw.startsWith('---')) {
+      lines.push({ type: 'removed', oldNo: oldNo++, content: raw.slice(1) })
+    } else if (!raw.startsWith('\\') && !raw.startsWith('---') && !raw.startsWith('+++')) {
+      lines.push({ type: 'context', oldNo: oldNo++, newNo: newNo++, content: raw })
+    }
+  }
+  return lines
+}
+
+function DiffLine({ line }: { line: ParsedLine }) {
+  if (line.type === 'hunk') {
+    return (
+      <tr className="bg-[#DEEBFF]">
+        <td className="px-2 py-0.5 text-[#5E6C84] select-none w-10 text-right" />
+        <td className="px-2 py-0.5 text-[#5E6C84] select-none w-10 text-right" />
+        <td className="px-3 py-0.5 text-[#0052CC] font-semibold whitespace-pre">{line.content}</td>
+      </tr>
+    )
+  }
+
+  const bg = line.type === 'added'
+    ? 'bg-[#E3FCEF]'
+    : line.type === 'removed'
+    ? 'bg-[#FFEBE6]'
+    : ''
+
+  const gutter = line.type === 'added'
+    ? 'bg-[#ABF5D1] text-[#006644]'
+    : line.type === 'removed'
+    ? 'bg-[#FFBDAD] text-[#BF2600]'
+    : 'bg-[#F4F5F7] text-[#5E6C84]'
+
+  const prefix = line.type === 'added' ? '+' : line.type === 'removed' ? '-' : ' '
+
+  return (
+    <tr className={cn('group', bg)}>
+      <td className={cn('px-2 py-0.5 select-none w-10 text-right tabular-nums', gutter)}>
+        {line.type !== 'added' ? line.oldNo : ''}
+      </td>
+      <td className={cn('px-2 py-0.5 select-none w-10 text-right tabular-nums', gutter)}>
+        {line.type !== 'removed' ? line.newNo : ''}
+      </td>
+      <td className="px-3 py-0.5 whitespace-pre">
+        <span className="select-none mr-2 opacity-50">{prefix}</span>
+        {line.content}
+      </td>
+    </tr>
+  )
+}