tower-studio 0.1.1 → 0.1.3

package/src/components/task/task-detail-panel.tsx

@@ -0,0 +1,455 @@
+"use client";
+
+import { useState, useCallback, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { ExternalLink, Terminal, Loader2, Square, FileText, CheckCircle2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Select, SelectTrigger, SelectContent, SelectItem } from "@/components/ui/select";
+import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip";
+import { TaskMetadata } from "./task-metadata";
+import { TaskDiffView } from "./task-diff-view";
+import { TaskMergeConfirmDialog } from "./task-merge-confirm-dialog";
+import { TerminalOutlet, useTerminalPortal } from "./terminal-portal";
+import { getTaskExecutions, startPtyExecution, stopPtyExecution, resumePtyExecution, continueLatestPtyExecution } from "@/actions/agent-actions";
+import { updateTaskStatus, checkWorktreeClean, commitWorktreeChanges } from "@/actions/task-actions";
+import { toast } from "sonner";
+import { getPrompts } from "@/actions/prompt-actions";
+import { ExecutionTimeline } from "./execution-timeline";
+import { TaskNotesPanel } from "./task-notes-panel";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import type { Task, TaskExecution } from "@prisma/client";
+import { useI18n } from "@/lib/i18n";
+
+interface TaskDetailPanelProps {
+  task: Task;
+  workspaceId: string;
+  projectLocalPath?: string | null;
+  onClose: () => void;
+}
+
+type TabType = "terminal" | "changes" | "notes";
+
+export function TaskDetailPanel({
+  task,
+  workspaceId,
+  projectLocalPath,
+  onClose,
+}: TaskDetailPanelProps) {
+  const { t } = useI18n();
+  const router = useRouter();
+  const { removePortal } = useTerminalPortal();
+  const [activeTab, setActiveTab] = useState<TabType>("terminal");
+  const [diffData, setDiffData] = useState<any>(null);
+  const [isLoadingDiff, setIsLoadingDiff] = useState(false);
+  const [taskStatus, setTaskStatus] = useState(task.status);
+
+  // Sync taskStatus when task prop changes (e.g. drag-and-drop status change)
+  useEffect(() => {
+    setTaskStatus(task.status);
+  }, [task.status]);
+
+  // Terminal + execution history state — reset when task changes
+  const [activeWorktreePath, setActiveWorktreePath] = useState<string | null>(null);
+  const [isExecuting, setIsExecuting] = useState(false);
+  const [executionLoaded, setExecutionLoaded] = useState(false);
+  const [pastExecutions, setPastExecutions] = useState<TaskExecution[]>([]);
+
+  // Reset terminal state when switching tasks
+  useEffect(() => {
+    setActiveWorktreePath(null);
+    setIsExecuting(false);
+    setExecutionLoaded(false);
+    setPastExecutions([]);
+    setDiffData(null);
+    setActiveTab("terminal");
+  }, [task.id]);
+  const [prompts, setPrompts] = useState<Array<{ id: string; name: string; isDefault: boolean }>>([]);
+  const [selectedPromptId, setSelectedPromptId] = useState<string | null>(null);
+
+  // Load prompts
+  useEffect(() => {
+    let cancelled = false;
+    getPrompts().then((data) => {
+      if (cancelled) return;
+      setPrompts(data.map((p) => ({ id: p.id, name: p.name, isDefault: p.isDefault })));
+      const defaultP = data.find((p) => p.isDefault);
+      if (defaultP) setSelectedPromptId(defaultP.id);
+    });
+    return () => { cancelled = true; };
+  }, []);
+
+  // Load executions: check for active terminal + build history
+  useEffect(() => {
+    // Reset terminal state immediately to prevent showing previous task's terminal
+    setActiveWorktreePath(null);
+    setExecutionLoaded(false);
+
+    let cancelled = false;
+    getTaskExecutions(task.id).then((executions) => {
+      if (cancelled) return;
+      const latest = executions[0];
+      if (latest?.status === "RUNNING") {
+        // worktreePath for worktree mode, or project localPath for direct mode
+        const cwdPath = latest.worktreePath || projectLocalPath || null;
+        if (cwdPath) setActiveWorktreePath(cwdPath);
+      }
+      // Past executions = all non-RUNNING ones
+      setPastExecutions(executions.filter((e) => e.status !== "RUNNING"));
+      setExecutionLoaded(true);
+    });
+    return () => { cancelled = true; };
+  }, [task.id]);
+
+  // Fetch diff when Changes tab is active and task has been executed
+  useEffect(() => {
+    if (activeTab !== "changes" || taskStatus === "TODO" || taskStatus === "CANCELLED") return;
+    let cancelled = false;
+    setIsLoadingDiff(true);
+    fetch(`/api/tasks/${task.id}/diff`)
+      .then((res) => {
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        return res.json();
+      })
+      .then((data) => {
+        if (!cancelled) setDiffData(data?.files || data?.branchDeleted ? data : null);
+      })
+      .catch(() => { if (!cancelled) setDiffData(null); })
+      .finally(() => { if (!cancelled) setIsLoadingDiff(false); });
+    return () => { cancelled = true; };
+  }, [activeTab, taskStatus, task.id]);
+
+  const handleExecute = useCallback(async () => {
+    if (isExecuting) return;
+    setIsExecuting(true);
+    try {
+      const { worktreePath } = await startPtyExecution(task.id, "", selectedPromptId);
+      setActiveWorktreePath(worktreePath);
+      setTaskStatus("IN_PROGRESS");
+    } catch (err) {
+      setIsExecuting(false);
+      toast.error(err instanceof Error ? err.message : String(err));
+    }
+  }, [task.id, isExecuting, selectedPromptId]);
+
+  const handleSessionEnd = useCallback(
+    (exitCode: number) => {
+      setIsExecuting(false);
+      setActiveWorktreePath(null);
+      removePortal(task.id);
+      if (exitCode === 0) {
+        setTaskStatus("IN_REVIEW");
+      }
+      getTaskExecutions(task.id).then((execs) => {
+        setPastExecutions(execs.filter((e) => e.status !== "RUNNING"));
+      });
+      router.refresh();
+    },
+    [router, task.id]
+  );
+
+  const handleStop = useCallback(async () => {
+    await stopPtyExecution(task.id);
+    setIsExecuting(false);
+    setActiveWorktreePath(null);
+    setTaskStatus("IN_REVIEW");
+    getTaskExecutions(task.id).then((execs) => {
+      setPastExecutions(execs.filter((e) => e.status !== "RUNNING"));
+    });
+    router.refresh();
+  }, [task.id, router]);
+
+  const handleResume = useCallback(async (sessionId: string) => {
+    setIsExecuting(true);
+    removePortal(task.id);
+    setActiveWorktreePath(null);
+    try {
+      const { worktreePath } = await resumePtyExecution(task.id, sessionId);
+      setActiveWorktreePath(worktreePath);
+      setTaskStatus("IN_PROGRESS");
+    } catch {
+      setIsExecuting(false);
+    }
+  }, [task.id, removePortal]);
+
+  const handleContinueLatest = useCallback(async () => {
+    setIsExecuting(true);
+    removePortal(task.id);
+    setActiveWorktreePath(null);
+    try {
+      const { worktreePath } = await continueLatestPtyExecution(task.id);
+      setActiveWorktreePath(worktreePath);
+      setTaskStatus("IN_PROGRESS");
+    } catch (err) {
+      setIsExecuting(false);
+      toast.error(err instanceof Error ? err.message : String(err));
+    }
+  }, [task.id, removePortal]);
+
+  const [showMergeDialog, setShowMergeDialog] = useState(false);
+  const [mergeCommitLog, setMergeCommitLog] = useState<string[]>([]);
+
+  const handleComplete = useCallback(async () => {
+    try {
+      const result = await checkWorktreeClean(task.id);
+
+      // Has worktree with uncommitted files → tell user to commit first
+      if (result.hasWorktree && !result.clean) {
+        toast.error(t("taskPage.uncommittedChanges", { count: String(result.files.length) }));
+        return;
+      }
+
+      // Has worktree but no commits and no uncommitted files → nothing was done
+      if (result.hasWorktree && result.clean && !result.hasCommits) {
+        toast.error(t("taskPage.noChangesToComplete"));
+        return;
+      }
+
+      // Has worktree with commits → show merge dialog
+      if (result.hasWorktree && result.hasCommits) {
+        setMergeCommitLog(result.commitLog);
+        setShowMergeDialog(true);
+        return;
+      }
+
+      // No worktree — just mark DONE
+      await updateTaskStatus(task.id, "DONE");
+      setTaskStatus("DONE");
+      toast.success(t("taskPage.taskCompleted"));
+      router.refresh();
+    } catch {
+      toast.error("Failed to complete task");
+    }
+  }, [task.id, router, t]);
+
+  const handleMergeComplete = useCallback(() => {
+    setTaskStatus("DONE");
+    setShowMergeDialog(false);
+    toast.success(t("taskPage.taskCompleted"));
+    router.refresh();
+  }, [router, t]);
+
+  const handleCommit = useCallback(async (message: string) => {
+    try {
+      const { hash } = await commitWorktreeChanges(task.id, message);
+      toast.success(t("diff.commitSuccess", { hash }));
+      router.refresh();
+      const res = await fetch(`/api/tasks/${task.id}/diff`);
+      if (res.ok) {
+        const data = await res.json();
+        setDiffData(data?.files ? data : null);
+      }
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : "Commit failed");
+    }
+  }, [task.id, router, t]);
+
+  return (
+    <div
+      className="flex h-full w-[600px] flex-shrink-0 flex-col border-l border-border bg-sidebar"
+      data-testid="task-detail-panel"
+    >
+      <TaskMetadata
+        title={task.title}
+        description={t("taskDetail.panelDescription")}
+        branch={`task/${task.id}`}
+        baseBranch={task.baseBranch}
+        hasConversation={false}
+        updatedAt={task.updatedAt}
+        onBack={onClose}
+      />
+
+      {/* Tab bar + View Details button */}
+      <div className="flex items-center justify-between border-b border-border px-4 py-2">
+        <div className="flex gap-1">
+          <button
+            onClick={() => setActiveTab("terminal")}
+            className={`flex items-center gap-1.5 px-3 py-1 text-xs font-medium rounded-md ${
+              activeTab === "terminal"
+                ? "bg-muted text-foreground"
+                : "text-muted-foreground hover:text-foreground"
+            }`}
+          >
+            <Terminal className="h-3 w-3" />
+            {t("terminal.execute")}
+          </button>
+          <button
+            onClick={() => setActiveTab("changes")}
+            className={`px-3 py-1 text-xs font-medium rounded-md ${
+              activeTab === "changes"
+                ? "bg-muted text-foreground"
+                : "text-muted-foreground hover:text-foreground"
+            }`}
+          >
+            {t("taskPage.changes")}
+          </button>
+          <button
+            onClick={() => setActiveTab("notes")}
+            className={`flex items-center gap-1.5 px-3 py-1 text-xs font-medium rounded-md ${
+              activeTab === "notes"
+                ? "bg-muted text-foreground"
+                : "text-muted-foreground hover:text-foreground"
+            }`}
+          >
+            <FileText className="h-3 w-3" />
+            {t("taskPage.notes")}
+          </button>
+        </div>
+        <div className="flex items-center gap-2">
+          {taskStatus === "IN_REVIEW" && (
+            <Button
+              size="sm"
+              onClick={handleComplete}
+              className="bg-emerald-500/15 text-emerald-400 ring-1 ring-emerald-500/20 hover:bg-emerald-500/25"
+            >
+              <CheckCircle2 className="h-3 w-3" />
+              {t("taskPage.completeTask")}
+            </Button>
+          )}
+          {taskStatus !== "DONE" && taskStatus !== "CANCELLED" && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => router.push(`/workspaces/${workspaceId}/tasks/${task.id}`)}
+              className="text-muted-foreground"
+            >
+              <ExternalLink className="h-3 w-3" />
+              {t("taskPage.viewDetails")}
+            </Button>
+          )}
+        </div>
+      </div>
+
+      {/* Content area */}
+      {activeTab === "terminal" ? (
+        <div className="flex-1 min-h-0 overflow-hidden">
+          {!executionLoaded ? (
+            <div className="flex h-full flex-col items-center justify-center gap-2 bg-[#0f1419]">
+              <Loader2 className="size-5 animate-spin text-neutral-500" />
+              <span className="text-xs text-neutral-500">{t("execution.loading")}</span>
+            </div>
+          ) : activeWorktreePath ? (
+            <div className="flex h-full flex-col overflow-hidden">
+              {/* Stop button bar */}
+              <div className="shrink-0 flex items-center justify-between border-b border-neutral-800 px-3 py-2 bg-[#0f1419]">
+                <span className="flex items-center gap-1.5 text-xs text-emerald-400">
+                  <span className="h-1.5 w-1.5 rounded-full bg-emerald-400 animate-pulse" />
+                  {t("execution.running")}
+                </span>
+                <Tooltip>
+                  <TooltipTrigger
+                    onClick={handleStop}
+                    className="flex items-center gap-1.5 rounded-md bg-red-500/15 px-3 py-1 text-xs font-medium text-red-400 hover:bg-red-500/25 transition-colors"
+                  >
+                    <Square className="h-3 w-3" />
+                    {t("terminal.stopExecution")}
+                  </TooltipTrigger>
+                  <TooltipContent side="bottom">
+                    {t("terminal.stopHint")}
+                  </TooltipContent>
+                </Tooltip>
+              </div>
+              <div className="flex-1 min-h-0">
+                <TerminalOutlet
+                  taskId={task.id}
+                  worktreePath={activeWorktreePath}
+                  onSessionEnd={handleSessionEnd}
+                />
+              </div>
+            </div>
+          ) : taskStatus === "DONE" || taskStatus === "CANCELLED" ? (
+            <div className="flex h-full flex-col overflow-hidden">
+              {/* History only — no launch/resume for completed/cancelled tasks */}
+              <ScrollArea className="flex-1 min-h-0">
+                <ExecutionTimeline executions={pastExecutions} />
+              </ScrollArea>
+            </div>
+          ) : (
+            <div className="flex h-full flex-col overflow-hidden">
+              {/* Prompt selector + Launch button */}
+              <div className="shrink-0 flex items-center gap-2 border-b border-border px-4 py-3">
+                {prompts.length > 0 && (
+                  <Select key={`prompt-${prompts.length}`} defaultValue={selectedPromptId ?? "none"} onValueChange={(v) => setSelectedPromptId(v === "none" ? null : v)}>
+                    <SelectTrigger size="sm" className="min-w-[120px]">
+                      <span className="text-left truncate">
+                        {selectedPromptId
+                          ? prompts.find((p) => p.id === selectedPromptId)?.name ?? t("terminal.noPrompt")
+                          : t("terminal.noPrompt")}
+                      </span>
+                    </SelectTrigger>
+                    <SelectContent className="min-w-[200px]">
+                      <SelectItem value="none">{t("terminal.noPrompt")}</SelectItem>
+                      {prompts.map((p) => (
+                        <SelectItem key={p.id} value={p.id}>
+                          {p.name}{p.isDefault ? " ★" : ""}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                )}
+                <Button
+                  onClick={handleExecute}
+                  disabled={isExecuting}
+                  size="sm" className="gap-2 px-4"
+                >
+                  {isExecuting ? (
+                    <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                  ) : (
+                    <Terminal className="h-3.5 w-3.5" />
+                  )}
+                  {isExecuting ? t("terminal.executing") : t("terminal.launch")}
+                </Button>
+              </div>
+              {/* Execution history */}
+              <ScrollArea className="flex-1 min-h-0">
+                <ExecutionTimeline executions={pastExecutions} onResume={handleResume} onContinueLatest={handleContinueLatest} />
+              </ScrollArea>
+            </div>
+          )}
+        </div>
+      ) : activeTab === "changes" ? (
+        <div className="flex-1 min-h-0 overflow-hidden">
+          {isLoadingDiff ? (
+            <div className="flex h-full items-center justify-center">
+              <p className="text-sm text-muted-foreground">{t("taskPage.loadingDiff")}</p>
+            </div>
+          ) : diffData?.branchDeleted ? (
+            <div className="flex h-full items-center justify-center">
+              <p className="text-sm text-muted-foreground">{t("taskPage.branchDeleted")}</p>
+            </div>
+          ) : diffData ? (
+            <TaskDiffView
+              files={diffData.files}
+              totalAdded={diffData.totalAdded}
+              totalRemoved={diffData.totalRemoved}
+              hasConflicts={diffData.hasConflicts}
+              conflictFiles={diffData.conflictFiles}
+              onCommit={handleCommit}
+              hasUncommitted={diffData.hasUncommitted}
+            />
+          ) : (
+            <div className="flex h-full items-center justify-center">
+              <p className="text-sm text-muted-foreground">{t("taskPage.noChanges")}</p>
+            </div>
+          )}
+        </div>
+      ) : activeTab === "notes" ? (
+        <div className="flex-1 min-h-0 overflow-hidden">
+          <TaskNotesPanel taskId={task.id} projectId={task.projectId} />
+        </div>
+      ) : null}
+
+      {/* Merge confirm dialog — triggered by Complete button */}
+      <TaskMergeConfirmDialog
+        open={showMergeDialog}
+        onOpenChange={setShowMergeDialog}
+        taskId={task.id}
+        taskTitle={task.title}
+        baseBranch={task.baseBranch ?? "main"}
+        fileCount={diffData?.files?.length ?? 0}
+        commitCount={diffData?.commitCount ?? 0}
+        commitLog={mergeCommitLog}
+        onMergeComplete={handleMergeComplete}
+      />
+    </div>
+  );
+}

package/src/components/task/task-diff-view.tsx

@@ -0,0 +1,207 @@
+"use client";
+
+import { useState } from "react";
+import { ChevronRight, ChevronDown, AlertTriangle, GitCompare, GitCommitHorizontal } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { EmptyState } from "@/components/ui/empty-state";
+import { Badge } from "@/components/ui/badge";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
+import { Textarea } from "@/components/ui/textarea";
+import { useI18n } from "@/lib/i18n";
+
+interface DiffFileEntry {
+  filename: string;
+  added: number;
+  removed: number;
+  isBinary: boolean;
+  patch: string;
+}
+
+interface TaskDiffViewProps {
+  files: DiffFileEntry[];
+  totalAdded: number;
+  totalRemoved: number;
+  hasConflicts: boolean;
+  conflictFiles: string[];
+  onCommit?: (message: string) => Promise<void>;
+  hasUncommitted?: boolean;
+}
+
+export function TaskDiffView({
+  files,
+  totalAdded,
+  totalRemoved,
+  hasConflicts,
+  conflictFiles,
+  onCommit,
+  hasUncommitted,
+}: TaskDiffViewProps) {
+  const { t } = useI18n();
+  const [expandedFiles, setExpandedFiles] = useState<Set<string>>(new Set());
+  const [showCommitDialog, setShowCommitDialog] = useState(false);
+  const [commitMessage, setCommitMessage] = useState("");
+  const [isCommitting, setIsCommitting] = useState(false);
+
+  const toggleFile = (filename: string) => {
+    setExpandedFiles((prev) => {
+      const next = new Set(prev);
+      if (next.has(filename)) {
+        next.delete(filename);
+      } else {
+        next.add(filename);
+      }
+      return next;
+    });
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Header bar */}
+      <div className="flex items-center justify-between border-b border-border px-4 py-3 flex-shrink-0">
+        <div className="flex items-center gap-3 text-sm text-muted-foreground">
+          <span className="font-medium text-foreground">{files.length} files changed</span>
+          <span className="text-green-400 font-mono text-xs">+{totalAdded}</span>
+          <span className="text-red-400 font-mono text-xs">-{totalRemoved}</span>
+        </div>
+        <div className="flex items-center gap-2">
+          {hasUncommitted && onCommit && (
+            <Button
+              variant="outline"
+              onClick={() => setShowCommitDialog(true)}
+              className="gap-2"
+            >
+              <GitCommitHorizontal className="h-4 w-4" />
+              {t("diff.commit")}
+            </Button>
+          )}
+        </div>
+      </div>
+
+      {/* Conflict warning */}
+      {hasConflicts && (
+        <div className="flex flex-col gap-2 border-b border-border bg-amber-500/5 px-4 py-3 flex-shrink-0">
+          <div className="flex items-center gap-2 text-amber-400">
+            <AlertTriangle className="h-4 w-4 flex-shrink-0" />
+            <span className="text-sm font-medium">
+              Merge blocked: {conflictFiles.length} conflicting file{conflictFiles.length !== 1 ? "s" : ""}
+            </span>
+          </div>
+          <ul className="ml-6 space-y-1">
+            {conflictFiles.map((file) => (
+              <li key={file} className="text-xs font-mono text-amber-300/80">
+                {file}
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+
+      {/* File list */}
+      <div className="flex-1 overflow-auto">
+        {files.length === 0 ? (
+          <EmptyState icon={GitCompare} title={t("diff.noChanges")} className="h-full" />
+        ) : (
+          <div className="divide-y divide-border">
+            {files.map((file) => {
+              const isExpanded = expandedFiles.has(file.filename);
+              return (
+                <div key={file.filename}>
+                  {/* File header row */}
+                  <Button
+                    variant="ghost"
+                    type="button"
+                    onClick={() => toggleFile(file.filename)}
+                    className="flex w-full items-center gap-2 px-4 py-2.5 text-left hover:bg-accent/50 transition-colors rounded-none h-auto"
+                  >
+                    {isExpanded ? (
+                      <ChevronDown className="h-3.5 w-3.5 flex-shrink-0 text-muted-foreground" />
+                    ) : (
+                      <ChevronRight className="h-3.5 w-3.5 flex-shrink-0 text-muted-foreground" />
+                    )}
+                    <span className="flex-1 truncate text-sm font-mono text-foreground">
+                      {file.filename}
+                    </span>
+                    {file.isBinary ? (
+                      <Badge
+                        variant="secondary"
+                        className="text-[10px] bg-muted text-muted-foreground border border-border"
+                      >
+                        Binary
+                      </Badge>
+                    ) : (
+                      <div className="flex items-center gap-1.5">
+                        <span className="text-xs font-mono text-green-400">+{file.added}</span>
+                        <span className="text-xs font-mono text-red-400">-{file.removed}</span>
+                      </div>
+                    )}
+                  </Button>
+
+                  {/* Expanded patch content */}
+                  {isExpanded && file.patch && (
+                    <div className="border-t border-border bg-background">
+                      <pre className="overflow-x-auto p-0 text-xs font-mono leading-5">
+                        {file.patch.split("\n").map((line, idx) => {
+                          const lineClass = line.startsWith("+") && !line.startsWith("+++")
+                            ? "px-4 block bg-green-500/10 text-green-400"
+                            : line.startsWith("-") && !line.startsWith("---")
+                            ? "px-4 block bg-red-500/10 text-red-400"
+                            : line.startsWith("@@")
+                            ? "px-4 block bg-blue-500/10 text-blue-300"
+                            : "px-4 block text-muted-foreground";
+                          return (
+                            <span key={idx} className={lineClass}>
+                              {line || " "}
+                            </span>
+                          );
+                        })}
+                      </pre>
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+
+      {/* Commit dialog */}
+      <Dialog open={showCommitDialog} onOpenChange={setShowCommitDialog}>
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle>{t("diff.commitChanges")}</DialogTitle>
+          </DialogHeader>
+          <div className="flex flex-col gap-3">
+            <Textarea
+              value={commitMessage}
+              onChange={(e) => setCommitMessage(e.target.value)}
+              placeholder={t("diff.commitMessagePlaceholder")}
+              rows={5}
+              className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground placeholder-muted-foreground outline-none resize-y min-h-[80px]"
+            />
+          </div>
+          <DialogFooter>
+            <Button variant="ghost" onClick={() => setShowCommitDialog(false)}>
+              {t("common.cancel")}
+            </Button>
+            <Button
+              onClick={async () => {
+                if (!commitMessage.trim() || !onCommit) return;
+                setIsCommitting(true);
+                try {
+                  await onCommit(commitMessage.trim());
+                  setCommitMessage("");
+                  setShowCommitDialog(false);
+                } finally {
+                  setIsCommitting(false);
+                }
+              }}
+              disabled={!commitMessage.trim() || isCommitting}
+            >
+              {isCommitting ? "..." : t("diff.commit")}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

package/src/components/task/task-file-changes.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { useI18n } from "@/lib/i18n";
+
+interface TaskFileChangesProps {
+  added: number;
+  removed: number;
+}
+
+export function TaskFileChanges({ added, removed }: TaskFileChangesProps) {
+  const { t } = useI18n();
+  return (
+    <span className="inline-flex items-center gap-1.5 text-xs text-gray-500">
+      <span>{t("diff.filesChanged", { count: String(added + removed) })}</span>
+      {added > 0 && <span className="text-green-500">+{added}</span>}
+      {removed > 0 && <span className="text-red-500">-{removed}</span>}
+    </span>
+  );
+}