feat(ipuaro): add TUI advanced components (v0.12.0)

Add DiffView, ConfirmDialog, ErrorDialog, and Progress components
for enhanced terminal UI interactions.

packages/ipuaro/src/tui/components/DiffView.tsx

@@ -0,0 +1,193 @@
+/**
+ * DiffView component for TUI.
+ * Displays inline diff with green (added) and red (removed) highlighting.
+ */
+
+import { Box, Text } from "ink"
+import type React from "react"
+
+export interface DiffViewProps {
+    filePath: string
+    oldLines: string[]
+    newLines: string[]
+    startLine: number
+}
+
+interface DiffLine {
+    type: "add" | "remove" | "context"
+    content: string
+    lineNumber?: number
+}
+
+function computeDiff(oldLines: string[], newLines: string[], startLine: number): DiffLine[] {
+    const result: DiffLine[] = []
+
+    let oldIdx = 0
+    let newIdx = 0
+
+    while (oldIdx < oldLines.length || newIdx < newLines.length) {
+        const oldLine = oldIdx < oldLines.length ? oldLines[oldIdx] : undefined
+        const newLine = newIdx < newLines.length ? newLines[newIdx] : undefined
+
+        if (oldLine === newLine) {
+            result.push({
+                type: "context",
+                content: oldLine ?? "",
+                lineNumber: startLine + newIdx,
+            })
+            oldIdx++
+            newIdx++
+        } else {
+            if (oldLine !== undefined) {
+                result.push({
+                    type: "remove",
+                    content: oldLine,
+                })
+                oldIdx++
+            }
+            if (newLine !== undefined) {
+                result.push({
+                    type: "add",
+                    content: newLine,
+                    lineNumber: startLine + newIdx,
+                })
+                newIdx++
+            }
+        }
+    }
+
+    return result
+}
+
+function getLinePrefix(line: DiffLine): string {
+    switch (line.type) {
+        case "add": {
+            return "+"
+        }
+        case "remove": {
+            return "-"
+        }
+        case "context": {
+            return " "
+        }
+    }
+}
+
+function getLineColor(line: DiffLine): string {
+    switch (line.type) {
+        case "add": {
+            return "green"
+        }
+        case "remove": {
+            return "red"
+        }
+        case "context": {
+            return "gray"
+        }
+    }
+}
+
+function formatLineNumber(num: number | undefined, width: number): string {
+    if (num === undefined) {
+        return " ".repeat(width)
+    }
+    return String(num).padStart(width, " ")
+}
+
+function DiffLine({
+    line,
+    lineNumberWidth,
+}: {
+    line: DiffLine
+    lineNumberWidth: number
+}): React.JSX.Element {
+    const prefix = getLinePrefix(line)
+    const color = getLineColor(line)
+    const lineNum = formatLineNumber(line.lineNumber, lineNumberWidth)
+
+    return (
+        <Box>
+            <Text color="gray">{lineNum} </Text>
+            <Text color={color}>
+                {prefix} {line.content}
+            </Text>
+        </Box>
+    )
+}
+
+function DiffHeader({
+    filePath,
+    startLine,
+    endLine,
+}: {
+    filePath: string
+    startLine: number
+    endLine: number
+}): React.JSX.Element {
+    const lineRange =
+        startLine === endLine
+            ? `line ${String(startLine)}`
+            : `lines ${String(startLine)}-${String(endLine)}`
+
+    return (
+        <Box>
+            <Text color="gray">┌─── </Text>
+            <Text color="cyan">{filePath}</Text>
+            <Text color="gray"> ({lineRange}) ───┐</Text>
+        </Box>
+    )
+}
+
+function DiffFooter(): React.JSX.Element {
+    return (
+        <Box>
+            <Text color="gray">└───────────────────────────────────────┘</Text>
+        </Box>
+    )
+}
+
+function DiffStats({
+    additions,
+    deletions,
+}: {
+    additions: number
+    deletions: number
+}): React.JSX.Element {
+    return (
+        <Box gap={1} marginTop={1}>
+            <Text color="green">+{String(additions)}</Text>
+            <Text color="red">-{String(deletions)}</Text>
+        </Box>
+    )
+}
+
+export function DiffView({
+    filePath,
+    oldLines,
+    newLines,
+    startLine,
+}: DiffViewProps): React.JSX.Element {
+    const diffLines = computeDiff(oldLines, newLines, startLine)
+    const endLine = startLine + newLines.length - 1
+    const lineNumberWidth = String(endLine).length
+
+    const additions = diffLines.filter((l) => l.type === "add").length
+    const deletions = diffLines.filter((l) => l.type === "remove").length
+
+    return (
+        <Box flexDirection="column" paddingX={1}>
+            <DiffHeader filePath={filePath} startLine={startLine} endLine={endLine} />
+            <Box flexDirection="column" paddingX={1}>
+                {diffLines.map((line, index) => (
+                    <DiffLine
+                        key={`${line.type}-${String(index)}`}
+                        line={line}
+                        lineNumberWidth={lineNumberWidth}
+                    />
+                ))}
+            </Box>
+            <DiffFooter />
+            <DiffStats additions={additions} deletions={deletions} />
+        </Box>
+    )
+}