import { useState, useEffect, useCallback } from "react";
import type { WorktreeInfo } from "../../lib/api";
import { getWorktreeInfo } from "../../lib/api";
interface WorktreeFilesPanelProps {
taskId: string;
}
/** Get status badge styling based on file status */
function getStatusStyle(status: string): { color: string; bgColor: string; label: string } {
switch (status) {
case "M":
case "modified":
return { color: "text-yellow-400", bgColor: "bg-yellow-400/10", label: "M" };
case "A":
case "added":
return { color: "text-green-400", bgColor: "bg-green-400/10", label: "A" };
case "D":
case "deleted":
return { color: "text-red-400", bgColor: "bg-red-400/10", label: "D" };
case "R":
case "renamed":
return { color: "text-cyan-400", bgColor: "bg-cyan-400/10", label: "R" };
case "C":
case "copied":
return { color: "text-purple-400", bgColor: "bg-purple-400/10", label: "C" };
case "U":
case "unmerged":
return { color: "text-orange-400", bgColor: "bg-orange-400/10", label: "U" };
case "?":
case "untracked":
return { color: "text-[#555]", bgColor: "bg-[#555]/10", label: "?" };
default:
return { color: "text-[#9bc3ff]", bgColor: "bg-[rgba(117,170,252,0.1)]", label: status.charAt(0).toUpperCase() };
}
}
export function WorktreeFilesPanel({ taskId }: WorktreeFilesPanelProps) {
const [worktreeInfo, setWorktreeInfo] = useState<WorktreeInfo | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const [expanded, setExpanded] = useState(false);
const fetchWorktreeInfo = useCallback(async () => {
try {
setLoading(true);
setError(null);
const info = await getWorktreeInfo(taskId);
setWorktreeInfo(info);
} catch (e) {
console.error("Failed to fetch worktree info:", e);
setError(e instanceof Error ? e.message : "Failed to fetch worktree info");
} finally {
setLoading(false);
}
}, [taskId]);
useEffect(() => {
fetchWorktreeInfo();
}, [fetchWorktreeInfo]);
if (loading) {
return (
<div className="bg-[rgba(0,0,0,0.2)] border border-[rgba(117,170,252,0.15)] p-3">
<div className="font-mono text-xs text-[#9bc3ff] tracking-wide uppercase mb-2">
Worktree Changes
</div>
<div className="font-mono text-xs text-[#555] animate-pulse">
Loading worktree info...
</div>
</div>
);
}
if (error) {
return (
<div className="bg-[rgba(0,0,0,0.2)] border border-[rgba(117,170,252,0.15)] p-3">
<div className="flex items-center justify-between mb-2">
<div className="font-mono text-xs text-[#9bc3ff] tracking-wide uppercase">
Worktree Changes
</div>
<button
onClick={fetchWorktreeInfo}
className="font-mono text-[10px] text-[#75aafc] hover:text-[#9bc3ff] transition-colors"
>
Retry
</button>
</div>
<div className="font-mono text-xs text-red-400">
{error}
</div>
</div>
);
}
if (!worktreeInfo || worktreeInfo.files.length === 0) {
return (
<div className="bg-[rgba(0,0,0,0.2)] border border-[rgba(117,170,252,0.15)] p-3">
<div className="flex items-center justify-between mb-2">
<div className="font-mono text-xs text-[#9bc3ff] tracking-wide uppercase">
Worktree Changes
</div>
<button
onClick={fetchWorktreeInfo}
className="font-mono text-[10px] text-[#75aafc] hover:text-[#9bc3ff] transition-colors"
>
Refresh
</button>
</div>
<div className="font-mono text-xs text-[#555]">
No changes in worktree
</div>
</div>
);
}
const { stats, files } = worktreeInfo;
const displayFiles = expanded ? files : files.slice(0, 10);
return (
<div className="bg-[rgba(0,0,0,0.2)] border border-[rgba(117,170,252,0.15)]">
{/* Header */}
<div className="flex items-center justify-between p-3 border-b border-[rgba(117,170,252,0.1)]">
<div className="font-mono text-xs text-[#9bc3ff] tracking-wide uppercase">
Worktree Changes
</div>
<div className="flex items-center gap-3">
{/* Stats */}
<div className="flex items-center gap-2 font-mono text-[10px]">
<span className="text-[#75aafc]">
{stats.filesChanged} file{stats.filesChanged !== 1 ? "s" : ""}
</span>
<span className="text-green-400">+{stats.insertions}</span>
<span className="text-red-400">-{stats.deletions}</span>
</div>
<button
onClick={fetchWorktreeInfo}
className="font-mono text-[10px] text-[#555] hover:text-[#75aafc] transition-colors"
title="Refresh"
>
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
</svg>
</button>
</div>
</div>
{/* File list */}
<div className="divide-y divide-[rgba(117,170,252,0.05)]">
{displayFiles.map((file) => {
const statusStyle = getStatusStyle(file.status);
return (
<div
key={file.path}
className="flex items-center gap-2 px-3 py-1.5 hover:bg-[rgba(117,170,252,0.03)]"
>
{/* Status badge */}
<span
className={`w-5 h-5 flex items-center justify-center font-mono text-[10px] font-medium ${statusStyle.color} ${statusStyle.bgColor} border border-current/20`}
title={file.status}
>
{statusStyle.label}
</span>
{/* File path */}
<span className="flex-1 font-mono text-xs text-[#dbe7ff] truncate" title={file.path}>
{file.path}
</span>
{/* Line stats */}
<div className="flex items-center gap-1.5 font-mono text-[10px] shrink-0">
{file.linesAdded > 0 && (
<span className="text-green-400">+{file.linesAdded}</span>
)}
{file.linesRemoved > 0 && (
<span className="text-red-400">-{file.linesRemoved}</span>
)}
</div>
</div>
);
})}
</div>
{/* Show more/less button */}
{files.length > 10 && (
<div className="px-3 py-2 border-t border-[rgba(117,170,252,0.1)]">
<button
onClick={() => setExpanded(!expanded)}
className="font-mono text-[10px] text-[#75aafc] hover:text-[#9bc3ff] transition-colors"
>
{expanded ? `Show less` : `Show ${files.length - 10} more files...`}
</button>
</div>
)}
</div>
);
}
