diff --git a/frontend/src/components/tasks/TaskDetailsDialog.tsx b/frontend/src/components/tasks/TaskDetailsDialog.tsx
index 10f8d29e..c6b35148 100644
--- a/frontend/src/components/tasks/TaskDetailsDialog.tsx
+++ b/frontend/src/components/tasks/TaskDetailsDialog.tsx
@@ -1,124 +1,210 @@
-import { useState, useEffect } from 'react'
-import { Card, CardContent } from '@/components/ui/card'
+import { useState, useEffect } from "react";
+import { Card, CardContent } from "@/components/ui/card";
 import {
   Dialog,
   DialogContent,
   DialogHeader,
-  DialogTitle
-} from '@/components/ui/dialog'
-import { Label } from '@/components/ui/label'
-import { Button } from '@/components/ui/button'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
-import { makeAuthenticatedRequest } from '@/lib/auth'
-import type { TaskStatus, TaskAttempt, TaskAttemptActivity, ExecutorConfig } from 'shared/types'
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Separator } from "@/components/ui/separator";
+import { makeAuthenticatedRequest } from "@/lib/auth";
+import type {
+  TaskStatus,
+  TaskAttempt,
+  TaskAttemptActivity,
+  ExecutorConfig,
+} from "shared/types";
 
 interface Task {
-  id: string
-  project_id: string
-  title: string
-  description: string | null
-  status: TaskStatus
-  created_at: string
-  updated_at: string
+  id: string;
+  project_id: string;
+  title: string;
+  description: string | null;
+  status: TaskStatus;
+  created_at: string;
+  updated_at: string;
 }
 
 interface ApiResponse<T> {
-  success: boolean
-  data: T | null
-  message: string | null
+  success: boolean;
+  data: T | null;
+  message: string | null;
 }
 
 interface TaskDetailsDialogProps {
-  isOpen: boolean
-  onOpenChange: (open: boolean) => void
-  task: Task | null
-  projectId: string
-  onError: (error: string) => void
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+  task: Task | null;
+  projectId: string;
+  onError: (error: string) => void;
 }
 
 const statusLabels: Record<TaskStatus, string> = {
-  todo: 'To Do',
-  inprogress: 'In Progress',
-  inreview: 'In Review',
-  done: 'Done',
-  cancelled: 'Cancelled'
-}
+  todo: "To Do",
+  inprogress: "In Progress",
+  inreview: "In Review",
+  done: "Done",
+  cancelled: "Cancelled",
+};
 
-export function TaskDetailsDialog({ isOpen, onOpenChange, task, projectId, onError }: TaskDetailsDialogProps) {
-  const [taskAttempts, setTaskAttempts] = useState<TaskAttempt[]>([])
-  const [taskAttemptsLoading, setTaskAttemptsLoading] = useState(false)
-  const [selectedAttempt, setSelectedAttempt] = useState<TaskAttempt | null>(null)
-  const [attemptActivities, setAttemptActivities] = useState<TaskAttemptActivity[]>([])
-  const [activitiesLoading, setActivitiesLoading] = useState(false)
-  const [selectedExecutor, setSelectedExecutor] = useState<ExecutorConfig>({ type: "echo" })
-  const [creatingAttempt, setCreatingAttempt] = useState(false)
+export function TaskDetailsDialog({
+  isOpen,
+  onOpenChange,
+  task,
+  projectId,
+  onError,
+}: TaskDetailsDialogProps) {
+  const [taskAttempts, setTaskAttempts] = useState<TaskAttempt[]>([]);
+  const [taskAttemptsLoading, setTaskAttemptsLoading] = useState(false);
+  const [selectedAttempt, setSelectedAttempt] = useState<TaskAttempt | null>(
+    null
+  );
+  const [attemptActivities, setAttemptActivities] = useState<
+    TaskAttemptActivity[]
+  >([]);
+  const [activitiesLoading, setActivitiesLoading] = useState(false);
+  const [selectedExecutor, setSelectedExecutor] = useState<ExecutorConfig>({
+    type: "echo",
+  });
+  const [creatingAttempt, setCreatingAttempt] = useState(false);
+
+  // Edit mode state
+  const [isEditMode, setIsEditMode] = useState(false);
+  const [editedTitle, setEditedTitle] = useState("");
+  const [editedDescription, setEditedDescription] = useState("");
+  const [editedStatus, setEditedStatus] = useState<TaskStatus>("todo");
+  const [savingTask, setSavingTask] = useState(false);
 
   useEffect(() => {
     if (isOpen && task) {
-      fetchTaskAttempts(task.id)
+      fetchTaskAttempts(task.id);
+      // Initialize edit state with current task values
+      setEditedTitle(task.title);
+      setEditedDescription(task.description || "");
+      setEditedStatus(task.status);
+      setIsEditMode(false);
     }
-  }, [isOpen, task])
+  }, [isOpen, task]);
 
   const fetchTaskAttempts = async (taskId: string) => {
     try {
-      setTaskAttemptsLoading(true)
-      const response = await makeAuthenticatedRequest(`/api/projects/${projectId}/tasks/${taskId}/attempts`)
-      
+      setTaskAttemptsLoading(true);
+      const response = await makeAuthenticatedRequest(
+        `/api/projects/${projectId}/tasks/${taskId}/attempts`
+      );
+
       if (response.ok) {
-        const result: ApiResponse<TaskAttempt[]> = await response.json()
+        const result: ApiResponse<TaskAttempt[]> = await response.json();
         if (result.success && result.data) {
-          setTaskAttempts(result.data)
+          setTaskAttempts(result.data);
         }
       } else {
-        onError('Failed to load task attempts')
+        onError("Failed to load task attempts");
       }
     } catch (err) {
-      onError('Failed to load task attempts')
+      onError("Failed to load task attempts");
     } finally {
-      setTaskAttemptsLoading(false)
+      setTaskAttemptsLoading(false);
     }
-  }
+  };
 
   const fetchAttemptActivities = async (attemptId: string) => {
-    if (!task) return
-    
+    if (!task) return;
+
     try {
-      setActivitiesLoading(true)
-      const response = await makeAuthenticatedRequest(`/api/projects/${projectId}/tasks/${task.id}/attempts/${attemptId}/activities`)
-      
+      setActivitiesLoading(true);
+      const response = await makeAuthenticatedRequest(
+        `/api/projects/${projectId}/tasks/${task.id}/attempts/${attemptId}/activities`
+      );
+
       if (response.ok) {
-        const result: ApiResponse<TaskAttemptActivity[]> = await response.json()
+        const result: ApiResponse<TaskAttemptActivity[]> =
+          await response.json();
         if (result.success && result.data) {
-          setAttemptActivities(result.data)
+          setAttemptActivities(result.data);
         }
       } else {
-        onError('Failed to load attempt activities')
+        onError("Failed to load attempt activities");
       }
     } catch (err) {
-      onError('Failed to load attempt activities')
+      onError("Failed to load attempt activities");
     } finally {
-      setActivitiesLoading(false)
+      setActivitiesLoading(false);
     }
-  }
+  };
 
   const handleAttemptClick = (attempt: TaskAttempt) => {
-    setSelectedAttempt(attempt)
-    fetchAttemptActivities(attempt.id)
-  }
+    setSelectedAttempt(attempt);
+    fetchAttemptActivities(attempt.id);
+  };
+
+  const saveTaskChanges = async () => {
+    if (!task) return;
+
+    try {
+      setSavingTask(true);
+      const response = await makeAuthenticatedRequest(
+        `/api/projects/${projectId}/tasks/${task.id}`,
+        {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            title: editedTitle,
+            description: editedDescription || null,
+            status: editedStatus,
+          }),
+        }
+      );
+
+      if (response.ok) {
+        setIsEditMode(false);
+        // Update the local task state would require parent component to refresh
+        // For now, just exit edit mode
+      } else {
+        onError("Failed to save task changes");
+      }
+    } catch (err) {
+      onError("Failed to save task changes");
+    } finally {
+      setSavingTask(false);
+    }
+  };
+
+  const cancelEdit = () => {
+    if (task) {
+      setEditedTitle(task.title);
+      setEditedDescription(task.description || "");
+      setEditedStatus(task.status);
+    }
+    setIsEditMode(false);
+  };
 
   const createNewAttempt = async () => {
-    if (!task) return
-    
+    if (!task) return;
+
     try {
-      setCreatingAttempt(true)
-      const worktreePath = `/tmp/task-${task.id}-attempt-${Date.now()}`
-      
+      setCreatingAttempt(true);
+      const worktreePath = `/tmp/task-${task.id}-attempt-${Date.now()}`;
+
       const response = await makeAuthenticatedRequest(
         `/api/projects/${projectId}/tasks/${task.id}/attempts`,
         {
-          method: 'POST',
+          method: "POST",
           headers: {
-            'Content-Type': 'application/json',
+            "Content-Type": "application/json",
           },
           body: JSON.stringify({
             task_id: task.id,
@@ -128,175 +214,389 @@ export function TaskDetailsDialog({ isOpen, onOpenChange, task, projectId, onErr
             executor_config: selectedExecutor,
           }),
         }
-      )
-      
+      );
+
       if (response.ok) {
         // Refresh the attempts list
-        await fetchTaskAttempts(task.id)
+        await fetchTaskAttempts(task.id);
       } else {
-        onError('Failed to create task attempt')
+        onError("Failed to create task attempt");
       }
     } catch (err) {
-      onError('Failed to create task attempt')
+      onError("Failed to create task attempt");
     } finally {
-      setCreatingAttempt(false)
+      setCreatingAttempt(false);
     }
-  }
+  };
 
   return (
-    <Dialog open={isOpen} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-4xl max-h-[80vh] overflow-y-auto">
+    <Dialog open={isOpen} onOpenChange={onOpenChange} className="max-w-7xl">
+      <DialogContent className="max-h-[85vh] overflow-y-auto">
         <DialogHeader>
-          <DialogTitle>Task Details: {task?.title}</DialogTitle>
-        </DialogHeader>
-        <div className="space-y-6">
-          {/* Task Info */}
-          <div className="space-y-2">
-            <h3 className="text-lg font-semibold">Task Information</h3>
-            <div className="grid grid-cols-2 gap-4">
-              <div>
-                <Label>Title</Label>
-                <p className="text-sm text-muted-foreground">{task?.title}</p>
-              </div>
-              <div>
-                <Label>Status</Label>
-                <p className="text-sm text-muted-foreground">
-                  {task ? statusLabels[task.status] : ''}
-                </p>
-              </div>
-            </div>
-            {task?.description && (
-              <div>
-                <Label>Description</Label>
-                <p className="text-sm text-muted-foreground">{task.description}</p>
-              </div>
-            )}
-          </div>
-
-          {/* Task Attempts */}
-          <div className="space-y-4">
-            <div className="flex justify-between items-center">
-              <h3 className="text-lg font-semibold">Task Attempts</h3>
-              <div className="flex items-center gap-2">
-                <div className="flex items-center gap-2">
-                  <Label className="text-sm">Executor:</Label>
-                  <Select 
-                    value={selectedExecutor.type} 
-                    onValueChange={(value) => setSelectedExecutor({ type: value as "echo" | "claude" })}
+          <div className="flex justify-between items-start">
+            <DialogTitle className="text-xl">
+              {isEditMode ? "Edit Task" : "Task Details"}
+            </DialogTitle>
+            <div className="flex gap-2">
+              {isEditMode ? (
+                <>
+                  <Button
+                    onClick={saveTaskChanges}
+                    disabled={savingTask}
+                    size="sm"
                   >
-                    <SelectTrigger className="w-32">
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="echo">Echo</SelectItem>
-                      <SelectItem value="claude">Claude</SelectItem>
-                    </SelectContent>
-                  </Select>
-                </div>
-                <Button 
-                  onClick={createNewAttempt}
-                  disabled={creatingAttempt}
+                    {savingTask ? "Saving..." : "Save"}
+                  </Button>
+                  <Button onClick={cancelEdit} variant="outline" size="sm">
+                    Cancel
+                  </Button>
+                </>
+              ) : (
+                <Button
+                  onClick={() => setIsEditMode(true)}
+                  variant="outline"
                   size="sm"
                 >
-                  {creatingAttempt ? 'Creating...' : 'Create New Attempt'}
+                  Edit
                 </Button>
-              </div>
-            </div>
-            {taskAttemptsLoading ? (
-              <div className="text-center py-4">Loading attempts...</div>
-            ) : taskAttempts.length === 0 ? (
-              <div className="text-center py-4 text-muted-foreground">
-                No attempts found for this task
-              </div>
-            ) : (
-              <div className="space-y-2">
-                {taskAttempts.map((attempt) => (
-                  <Card 
-                    key={attempt.id} 
-                    className={`cursor-pointer transition-colors ${
-                      selectedAttempt?.id === attempt.id ? 'bg-blue-50 border-blue-200' : 'hover:bg-gray-50'
-                    }`}
-                    onClick={() => handleAttemptClick(attempt)}
-                  >
-                    <CardContent className="p-4">
-                      <div className="space-y-2">
-                        <div className="flex justify-between items-start">
-                          <div>
-                            <p className="font-medium">Worktree: {attempt.worktree_path}</p>
-                            <p className="text-sm text-muted-foreground">
-                              Created: {new Date(attempt.created_at).toLocaleDateString()}
-                            </p>
-                          </div>
-                        </div>
-                        <div className="grid grid-cols-2 gap-4 text-sm">
-                          <div>
-                            <Label className="text-xs">Base Commit</Label>
-                            <p className="text-muted-foreground">
-                              {attempt.base_commit || 'None'}
-                            </p>
-                          </div>
-                          <div>
-                            <Label className="text-xs">Merge Commit</Label>
-                            <p className="text-muted-foreground">
-                              {attempt.merge_commit || 'None'}
-                            </p>
-                          </div>
-                        </div>
-                      </div>
-                    </CardContent>
-                  </Card>
-                ))}
-              </div>
-            )}
-          </div>
-
-          {/* Activity History */}
-          {selectedAttempt && (
-            <div className="space-y-4">
-              <h3 className="text-lg font-semibold">
-                Activity History for Attempt: {selectedAttempt.worktree_path}
-              </h3>
-              {activitiesLoading ? (
-                <div className="text-center py-4">Loading activities...</div>
-              ) : attemptActivities.length === 0 ? (
-                <div className="text-center py-4 text-muted-foreground">
-                  No activities found for this attempt
-                </div>
-              ) : (
-                <div className="space-y-2">
-                  {attemptActivities.map((activity) => (
-                    <Card key={activity.id}>
-                      <CardContent className="p-4">
-                        <div className="flex justify-between items-start">
-                          <div className="space-y-1">
-                            <div className="flex items-center space-x-2">
-                              <span className={`px-2 py-1 rounded-full text-xs font-medium ${
-                                activity.status === 'init' ? 'bg-gray-100 text-gray-800' :
-                                activity.status === 'inprogress' ? 'bg-blue-100 text-blue-800' :
-                                'bg-yellow-100 text-yellow-800'
-                              }`}>
-                                {activity.status === 'init' ? 'Init' :
-                                 activity.status === 'inprogress' ? 'In Progress' :
-                                 'Paused'}
-                              </span>
-                            </div>
-                            {activity.note && (
-                              <p className="text-sm text-muted-foreground">{activity.note}</p>
-                            )}
-                          </div>
-                          <p className="text-xs text-muted-foreground">
-                            {new Date(activity.created_at).toLocaleString()}
-                          </p>
-                        </div>
-                      </CardContent>
-                    </Card>
-                  ))}
-                </div>
               )}
             </div>
-          )}
+          </div>
+        </DialogHeader>
+
+        <div className="grid grid-cols-3 gap-6">
+          {/* Main Content */}
+          <div className="col-span-2 space-y-6">
+            {/* Task Details */}
+            <Card>
+              <CardContent className="p-6">
+                <div className="space-y-4">
+                  <div>
+                    <Label className="text-sm font-medium">Title</Label>
+                    {isEditMode ? (
+                      <Input
+                        value={editedTitle}
+                        onChange={(e) => setEditedTitle(e.target.value)}
+                        className="mt-1"
+                        placeholder="Enter task title..."
+                      />
+                    ) : (
+                      <h2 className="text-lg font-semibold mt-1">
+                        {task?.title}
+                      </h2>
+                    )}
+                  </div>
+
+                  <div>
+                    <Label className="text-sm font-medium">Description</Label>
+                    {isEditMode ? (
+                      <Textarea
+                        value={editedDescription}
+                        onChange={(e) => setEditedDescription(e.target.value)}
+                        className="mt-1 min-h-[100px]"
+                        placeholder="Enter task description..."
+                      />
+                    ) : (
+                      <div className="mt-1 p-3 bg-gray-50 rounded-md min-h-[60px]">
+                        {task?.description ? (
+                          <p className="text-sm text-gray-700 whitespace-pre-wrap">
+                            {task.description}
+                          </p>
+                        ) : (
+                          <p className="text-sm text-gray-500 italic">
+                            No description provided
+                          </p>
+                        )}
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Task Attempt Output */}
+            {selectedAttempt &&
+              (selectedAttempt.stdout || selectedAttempt.stderr) && (
+                <Card className="bg-black">
+                  <CardContent className="p-6">
+                    <h3 className="text-lg font-semibold mb-4 text-green-400">
+                      Execution Output
+                    </h3>
+                    <div className="space-y-4">
+                      {selectedAttempt.stdout && (
+                        <div>
+                          <Label className="text-sm font-medium mb-2 block text-green-400">
+                            STDOUT
+                          </Label>
+                          <div
+                            className="bg-black border border-green-400 rounded-md p-4 font-mono text-sm text-green-400 max-h-96 overflow-y-auto whitespace-pre-wrap shadow-inner"
+                            style={{
+                              fontFamily:
+                                'ui-monospace, SFMono-Regular, "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+                            }}
+                          >
+                            {selectedAttempt.stdout}
+                          </div>
+                        </div>
+                      )}
+                      {selectedAttempt.stderr && (
+                        <div>
+                          <Label className="text-sm font-medium mb-2 block text-red-400">
+                            STDERR
+                          </Label>
+                          <div
+                            className="bg-black border border-red-400 rounded-md p-4 font-mono text-sm text-red-400 max-h-96 overflow-y-auto whitespace-pre-wrap shadow-inner"
+                            style={{
+                              textShadow: "0 0 2px #ff0000",
+                              fontFamily:
+                                'ui-monospace, SFMono-Regular, "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+                            }}
+                          >
+                            {selectedAttempt.stderr}
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                  </CardContent>
+                </Card>
+              )}
+          </div>
+
+          {/* Sidebar */}
+          <div className="space-y-4">
+            <Card>
+              <CardContent className="p-4">
+                <h4 className="font-semibold mb-3">Details</h4>
+                <div className="space-y-3">
+                  <div>
+                    <Label className="text-xs text-muted-foreground">
+                      Status
+                    </Label>
+                    {isEditMode ? (
+                      <Select
+                        value={editedStatus}
+                        onValueChange={(value) =>
+                          setEditedStatus(value as TaskStatus)
+                        }
+                      >
+                        <SelectTrigger className="mt-1">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="todo">To Do</SelectItem>
+                          <SelectItem value="inprogress">
+                            In Progress
+                          </SelectItem>
+                          <SelectItem value="inreview">In Review</SelectItem>
+                          <SelectItem value="done">Done</SelectItem>
+                          <SelectItem value="cancelled">Cancelled</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    ) : (
+                      <div
+                        className={`mt-1 px-2 py-1 rounded-full text-xs font-medium w-fit ${
+                          task?.status === "todo"
+                            ? "bg-gray-100 text-gray-800"
+                            : task?.status === "inprogress"
+                            ? "bg-blue-100 text-blue-800"
+                            : task?.status === "inreview"
+                            ? "bg-yellow-100 text-yellow-800"
+                            : task?.status === "done"
+                            ? "bg-green-100 text-green-800"
+                            : "bg-red-100 text-red-800"
+                        }`}
+                      >
+                        {task ? statusLabels[task.status] : ""}
+                      </div>
+                    )}
+                  </div>
+
+                  <Separator />
+
+                  <div>
+                    <Label className="text-xs text-muted-foreground">
+                      Created
+                    </Label>
+                    <p className="text-sm mt-1">
+                      {task
+                        ? new Date(task.created_at).toLocaleDateString()
+                        : ""}
+                    </p>
+                  </div>
+
+                  <div>
+                    <Label className="text-xs text-muted-foreground">
+                      Updated
+                    </Label>
+                    <p className="text-sm mt-1">
+                      {task
+                        ? new Date(task.updated_at).toLocaleDateString()
+                        : ""}
+                    </p>
+                  </div>
+
+                  <div>
+                    <Label className="text-xs text-muted-foreground">
+                      Project ID
+                    </Label>
+                    <p className="text-xs text-muted-foreground mt-1 font-mono">
+                      {projectId}
+                    </p>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Task Attempts */}
+            <Card>
+              <CardContent className="p-4">
+                <h4 className="font-semibold mb-3">Task Attempts</h4>
+                <div className="space-y-3">
+                  <div>
+                    <Label className="text-xs text-muted-foreground mb-2 block">
+                      Select Attempt
+                    </Label>
+                    {taskAttemptsLoading ? (
+                      <div className="text-center py-2 text-sm text-muted-foreground">
+                        Loading...
+                      </div>
+                    ) : taskAttempts.length === 0 ? (
+                      <div className="text-center py-2 text-sm text-muted-foreground">
+                        No attempts found
+                      </div>
+                    ) : (
+                      <Select
+                        value={selectedAttempt?.id || ""}
+                        onValueChange={(value) => {
+                          const attempt = taskAttempts.find(
+                            (a) => a.id === value
+                          );
+                          if (attempt) {
+                            handleAttemptClick(attempt);
+                          }
+                        }}
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select an attempt..." />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {taskAttempts.map((attempt) => (
+                            <SelectItem key={attempt.id} value={attempt.id}>
+                              <div className="flex flex-col">
+                                <span className="font-medium">
+                                  {new Date(
+                                    attempt.created_at
+                                  ).toLocaleDateString()}{" "}
+                                  {new Date(
+                                    attempt.created_at
+                                  ).toLocaleTimeString()}
+                                </span>
+                                <span className="text-xs text-muted-foreground">
+                                  Executor
+                                </span>
+                              </div>
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    )}
+                  </div>
+
+                  <Separator />
+
+                  <div className="space-y-2">
+                    <Label className="text-xs text-muted-foreground">
+                      New Attempt
+                    </Label>
+                    <div className="flex flex-col gap-2">
+                      <Select
+                        value={selectedExecutor.type}
+                        onValueChange={(value) =>
+                          setSelectedExecutor({
+                            type: value as "echo" | "claude",
+                          })
+                        }
+                      >
+                        <SelectTrigger>
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="echo">Echo</SelectItem>
+                          <SelectItem value="claude">Claude</SelectItem>
+                        </SelectContent>
+                      </Select>
+                      <Button
+                        onClick={createNewAttempt}
+                        disabled={creatingAttempt}
+                        size="sm"
+                        className="w-full"
+                      >
+                        {creatingAttempt ? "Creating..." : "Create Attempt"}
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Activity History */}
+            {selectedAttempt && (
+              <Card>
+                <CardContent className="p-4">
+                  <h4 className="font-semibold mb-3">Activity History</h4>
+                  <p className="text-xs text-muted-foreground mb-3">
+                    {selectedAttempt.worktree_path}
+                  </p>
+                  {activitiesLoading ? (
+                    <div className="text-center py-4">
+                      Loading activities...
+                    </div>
+                  ) : attemptActivities.length === 0 ? (
+                    <div className="text-center py-4 text-muted-foreground">
+                      No activities found
+                    </div>
+                  ) : (
+                    <div className="space-y-2">
+                      {attemptActivities.map((activity) => (
+                        <div
+                          key={activity.id}
+                          className="border-l-2 border-gray-200 pl-3 pb-2"
+                        >
+                          <div className="flex items-center justify-between">
+                            <span
+                              className={`px-2 py-1 rounded-full text-xs font-medium ${
+                                activity.status === "init"
+                                  ? "bg-gray-100 text-gray-800"
+                                  : activity.status === "inprogress"
+                                  ? "bg-blue-100 text-blue-800"
+                                  : "bg-yellow-100 text-yellow-800"
+                              }`}
+                            >
+                              {activity.status === "init"
+                                ? "Init"
+                                : activity.status === "inprogress"
+                                ? "In Progress"
+                                : "Paused"}
+                            </span>
+                            <p className="text-xs text-muted-foreground">
+                              {new Date(activity.created_at).toLocaleString()}
+                            </p>
+                          </div>
+                          {activity.note && (
+                            <p className="text-sm text-muted-foreground mt-1">
+                              {activity.note}
+                            </p>
+                          )}
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </CardContent>
+              </Card>
+            )}
+          </div>
         </div>
       </DialogContent>
     </Dialog>
-  )
+  );
 }