From e4188ed949b0710e15650efd808ccd0c35e88821 Mon Sep 17 00:00:00 2001
From: Gabriel Gordon-Hall <gabriel@bloop.ai>
Date: Thu, 10 Jul 2025 14:05:57 +0100
Subject: [PATCH] feat: improve sidebar layout (#112)

* improve diff box styling

* separate logs and diffs tabs

* improve sidebar layout

* fix tsc errors
---
 frontend/src/components/tasks/DiffCard.tsx    |  476 ++++++++
 .../tasks/NormalizedConversationViewer.tsx    |  271 ++++-
 .../src/components/tasks/TaskDetailsPanel.tsx | 1071 +++++------------
 3 files changed, 992 insertions(+), 826 deletions(-)
 create mode 100644 frontend/src/components/tasks/DiffCard.tsx

diff --git a/frontend/src/components/tasks/DiffCard.tsx b/frontend/src/components/tasks/DiffCard.tsx
new file mode 100644
index 00000000..9aa3776e
--- /dev/null
+++ b/frontend/src/components/tasks/DiffCard.tsx
@@ -0,0 +1,476 @@
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { ChevronDown, ChevronUp, Trash2, GitCompare } from 'lucide-react';
+import type { WorktreeDiff, DiffChunkType, DiffChunk } from 'shared/types';
+
+interface ProcessedLine {
+  content: string;
+  chunkType: DiffChunkType;
+  oldLineNumber?: number;
+  newLineNumber?: number;
+}
+
+interface ProcessedSection {
+  type: 'context' | 'change' | 'expanded';
+  lines: ProcessedLine[];
+  expandKey?: string;
+  expandedAbove?: boolean;
+  expandedBelow?: boolean;
+}
+
+interface DiffCardProps {
+  diff: WorktreeDiff | null;
+  isBackgroundRefreshing?: boolean;
+  onDeleteFile?: (filePath: string) => void;
+  deletingFiles?: Set<string>;
+  compact?: boolean;
+  className?: string;
+}
+
+export function DiffCard({
+  diff,
+  isBackgroundRefreshing = false,
+  onDeleteFile,
+  deletingFiles = new Set(),
+  compact = false,
+  className = '',
+}: DiffCardProps) {
+  const [collapsedFiles, setCollapsedFiles] = useState<Set<string>>(new Set());
+  const [expandedSections, setExpandedSections] = useState<Set<string>>(
+    new Set()
+  );
+
+  // Diff processing functions
+  const getChunkClassName = (chunkType: DiffChunkType) => {
+    const baseClass = 'font-mono text-sm whitespace-pre flex w-full';
+
+    switch (chunkType) {
+      case 'Insert':
+        return `${baseClass} bg-green-50 dark:bg-green-900/20 text-green-900 dark:text-green-100`;
+      case 'Delete':
+        return `${baseClass} bg-red-50 dark:bg-red-900/20 text-red-900 dark:text-red-100`;
+      case 'Equal':
+      default:
+        return `${baseClass} text-muted-foreground`;
+    }
+  };
+
+  const getLineNumberClassName = (chunkType: DiffChunkType) => {
+    const baseClass =
+      'flex-shrink-0 w-12 px-1.5 text-xs border-r select-none min-h-[1.25rem] flex items-center';
+
+    switch (chunkType) {
+      case 'Insert':
+        return `${baseClass} text-green-800 dark:text-green-200 bg-green-100 dark:bg-green-900/40 border-green-300 dark:border-green-600`;
+      case 'Delete':
+        return `${baseClass} text-red-800 dark:text-red-200 bg-red-100 dark:bg-red-900/40 border-red-300 dark:border-red-600`;
+      case 'Equal':
+      default:
+        return `${baseClass} text-gray-500 dark:text-gray-400 bg-gray-50 dark:bg-gray-800 border-gray-200 dark:border-gray-700`;
+    }
+  };
+
+  const getChunkPrefix = (chunkType: DiffChunkType) => {
+    switch (chunkType) {
+      case 'Insert':
+        return '+';
+      case 'Delete':
+        return '-';
+      case 'Equal':
+      default:
+        return ' ';
+    }
+  };
+
+  const processFileChunks = (chunks: DiffChunk[], fileIndex: number) => {
+    const CONTEXT_LINES = compact ? 2 : 3;
+    const lines: ProcessedLine[] = [];
+    let oldLineNumber = 1;
+    let newLineNumber = 1;
+
+    // Convert chunks to lines with line numbers
+    chunks.forEach((chunk) => {
+      const chunkLines = chunk.content.split('\n');
+      chunkLines.forEach((line, index) => {
+        if (index < chunkLines.length - 1 || line !== '') {
+          const processedLine: ProcessedLine = {
+            content: line,
+            chunkType: chunk.chunk_type,
+          };
+
+          switch (chunk.chunk_type) {
+            case 'Equal':
+              processedLine.oldLineNumber = oldLineNumber++;
+              processedLine.newLineNumber = newLineNumber++;
+              break;
+            case 'Delete':
+              processedLine.oldLineNumber = oldLineNumber++;
+              break;
+            case 'Insert':
+              processedLine.newLineNumber = newLineNumber++;
+              break;
+          }
+
+          lines.push(processedLine);
+        }
+      });
+    });
+
+    const sections: ProcessedSection[] = [];
+    let i = 0;
+
+    while (i < lines.length) {
+      const line = lines[i];
+
+      if (line.chunkType === 'Equal') {
+        let nextChangeIndex = i + 1;
+        while (
+          nextChangeIndex < lines.length &&
+          lines[nextChangeIndex].chunkType === 'Equal'
+        ) {
+          nextChangeIndex++;
+        }
+
+        const contextLength = nextChangeIndex - i;
+        const hasNextChange = nextChangeIndex < lines.length;
+        const hasPrevChange =
+          sections.length > 0 &&
+          sections[sections.length - 1].type === 'change';
+
+        if (
+          contextLength <= CONTEXT_LINES * 2 ||
+          (!hasPrevChange && !hasNextChange)
+        ) {
+          sections.push({
+            type: 'context',
+            lines: lines.slice(i, nextChangeIndex),
+          });
+        } else {
+          if (hasPrevChange) {
+            sections.push({
+              type: 'context',
+              lines: lines.slice(i, i + CONTEXT_LINES),
+            });
+            i += CONTEXT_LINES;
+          }
+
+          if (hasNextChange) {
+            const expandStart = hasPrevChange ? i : i + CONTEXT_LINES;
+            const expandEnd = nextChangeIndex - CONTEXT_LINES;
+
+            if (expandEnd > expandStart) {
+              const expandKey = `${fileIndex}-${expandStart}-${expandEnd}`;
+              const isExpanded = expandedSections.has(expandKey);
+
+              if (isExpanded) {
+                sections.push({
+                  type: 'expanded',
+                  lines: lines.slice(expandStart, expandEnd),
+                  expandKey,
+                });
+              } else {
+                sections.push({
+                  type: 'context',
+                  lines: [],
+                  expandKey,
+                });
+              }
+            }
+
+            sections.push({
+              type: 'context',
+              lines: lines.slice(
+                nextChangeIndex - CONTEXT_LINES,
+                nextChangeIndex
+              ),
+            });
+          } else if (!hasPrevChange) {
+            sections.push({
+              type: 'context',
+              lines: lines.slice(i, i + CONTEXT_LINES),
+            });
+          }
+        }
+
+        i = nextChangeIndex;
+      } else {
+        const changeStart = i;
+        while (i < lines.length && lines[i].chunkType !== 'Equal') {
+          i++;
+        }
+
+        sections.push({
+          type: 'change',
+          lines: lines.slice(changeStart, i),
+        });
+      }
+    }
+
+    return sections;
+  };
+
+  const toggleExpandSection = (expandKey: string) => {
+    setExpandedSections((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(expandKey)) {
+        newSet.delete(expandKey);
+      } else {
+        newSet.add(expandKey);
+      }
+      return newSet;
+    });
+  };
+
+  const toggleFileCollapse = (filePath: string) => {
+    setCollapsedFiles((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(filePath)) {
+        newSet.delete(filePath);
+      } else {
+        newSet.add(filePath);
+      }
+      return newSet;
+    });
+  };
+
+  const collapseAllFiles = () => {
+    if (diff) {
+      setCollapsedFiles(new Set(diff.files.map((file) => file.path)));
+    }
+  };
+
+  const expandAllFiles = () => {
+    setCollapsedFiles(new Set());
+  };
+
+  if (!diff || diff.files.length === 0) {
+    return (
+      <div
+        className={`bg-muted/30 border border-muted rounded-lg p-4 ${className}`}
+      >
+        <div className="text-center py-4 text-muted-foreground">
+          <GitCompare className="h-8 w-8 mx-auto mb-2 opacity-50" />
+          <p className="text-sm">No changes detected</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={`bg-background border border-border rounded-lg overflow-hidden shadow-sm flex flex-col ${className}`}
+    >
+      {/* Header */}
+      <div className="bg-muted/50 px-3 py-2 border-b flex items-center justify-between flex-shrink-0">
+        <div className="flex items-center gap-2">
+          <GitCompare className="h-4 w-4 text-muted-foreground" />
+          <div className="text-sm font-medium">
+            {diff.files.length} file{diff.files.length !== 1 ? 's' : ''} changed
+          </div>
+          {isBackgroundRefreshing && (
+            <div className="flex items-center gap-1">
+              <div className="animate-spin h-3 w-3 border border-blue-500 border-t-transparent rounded-full"></div>
+              <span className="text-xs text-blue-600 dark:text-blue-400">
+                Updating...
+              </span>
+            </div>
+          )}
+        </div>
+        {!compact && diff.files.length > 1 && (
+          <div className="flex items-center gap-2">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={expandAllFiles}
+              className="h-6 text-xs"
+              disabled={collapsedFiles.size === 0}
+            >
+              Expand All
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={collapseAllFiles}
+              className="h-6 text-xs"
+              disabled={collapsedFiles.size === diff.files.length}
+            >
+              Collapse All
+            </Button>
+          </div>
+        )}
+      </div>
+
+      {/* Files */}
+      <div
+        className={`${compact ? 'max-h-80' : 'flex-1 min-h-0'} overflow-y-auto`}
+      >
+        <div className="space-y-2 p-3">
+          {diff.files.map((file, fileIndex) => (
+            <div
+              key={fileIndex}
+              className={`border rounded-lg overflow-hidden ${
+                collapsedFiles.has(file.path) ? 'border-muted' : 'border-border'
+              }`}
+            >
+              <div
+                className={`bg-muted px-3 py-1.5 flex items-center justify-between ${
+                  !collapsedFiles.has(file.path) ? 'border-b' : ''
+                }`}
+              >
+                <div className="flex items-center gap-2">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => toggleFileCollapse(file.path)}
+                    className="h-5 w-5 p-0 hover:bg-muted-foreground/10"
+                    title={
+                      collapsedFiles.has(file.path)
+                        ? 'Expand diff'
+                        : 'Collapse diff'
+                    }
+                  >
+                    {collapsedFiles.has(file.path) ? (
+                      <ChevronDown className="h-3 w-3" />
+                    ) : (
+                      <ChevronUp className="h-3 w-3" />
+                    )}
+                  </Button>
+                  <p className="text-xs font-medium text-muted-foreground font-mono">
+                    {file.path}
+                  </p>
+                  {collapsedFiles.has(file.path) && (
+                    <div className="flex items-center gap-1 text-xs text-muted-foreground ml-2">
+                      <span className="bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-200 px-1 py-0.5 rounded text-xs">
+                        +
+                        {file.chunks
+                          .filter((c) => c.chunk_type === 'Insert')
+                          .reduce(
+                            (acc, c) => acc + c.content.split('\n').length - 1,
+                            0
+                          )}
+                      </span>
+                      <span className="bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-200 px-1 py-0.5 rounded text-xs">
+                        -
+                        {file.chunks
+                          .filter((c) => c.chunk_type === 'Delete')
+                          .reduce(
+                            (acc, c) => acc + c.content.split('\n').length - 1,
+                            0
+                          )}
+                      </span>
+                    </div>
+                  )}
+                </div>
+                {onDeleteFile && (
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => onDeleteFile(file.path)}
+                    disabled={deletingFiles.has(file.path)}
+                    className="text-red-600 hover:text-red-800 hover:bg-red-50 h-6 px-2 gap-1"
+                    title={`Delete ${file.path}`}
+                  >
+                    <Trash2 className="h-3 w-3" />
+                    {!compact && (
+                      <span className="text-xs">
+                        {deletingFiles.has(file.path)
+                          ? 'Deleting...'
+                          : 'Delete'}
+                      </span>
+                    )}
+                  </Button>
+                )}
+              </div>
+              {!collapsedFiles.has(file.path) && (
+                <div className="overflow-x-auto">
+                  <div className="inline-block min-w-full">
+                    {processFileChunks(file.chunks, fileIndex).map(
+                      (section, sectionIndex) => {
+                        if (
+                          section.type === 'context' &&
+                          section.lines.length === 0 &&
+                          section.expandKey
+                        ) {
+                          const lineCount =
+                            parseInt(section.expandKey.split('-')[2]) -
+                            parseInt(section.expandKey.split('-')[1]);
+                          return (
+                            <div
+                              key={`expand-${section.expandKey}`}
+                              className="w-full"
+                            >
+                              <Button
+                                variant="ghost"
+                                size="sm"
+                                onClick={() =>
+                                  toggleExpandSection(section.expandKey!)
+                                }
+                                className="w-full h-5 text-xs text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 hover:bg-blue-50 dark:hover:bg-blue-950/50 border-t border-b border-gray-200 dark:border-gray-700 rounded-none justify-start"
+                              >
+                                <ChevronDown className="h-3 w-3 mr-1" />
+                                Show {lineCount} more lines
+                              </Button>
+                            </div>
+                          );
+                        }
+
+                        return (
+                          <div key={`section-${sectionIndex}`}>
+                            {section.type === 'expanded' &&
+                              section.expandKey && (
+                                <div className="w-full">
+                                  <Button
+                                    variant="ghost"
+                                    size="sm"
+                                    onClick={() =>
+                                      toggleExpandSection(section.expandKey!)
+                                    }
+                                    className="w-full h-5 text-xs text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 hover:bg-blue-50 dark:hover:bg-blue-950/50 border-t border-b border-gray-200 dark:border-gray-700 rounded-none justify-start"
+                                  >
+                                    <ChevronUp className="h-3 w-3 mr-1" />
+                                    Hide expanded lines
+                                  </Button>
+                                </div>
+                              )}
+                            {section.lines.map((line, lineIndex) => (
+                              <div
+                                key={`${sectionIndex}-${lineIndex}`}
+                                className={getChunkClassName(line.chunkType)}
+                                style={{ minWidth: 'max-content' }}
+                              >
+                                <div
+                                  className={getLineNumberClassName(
+                                    line.chunkType
+                                  )}
+                                >
+                                  <span className="inline-block w-4 text-right text-xs">
+                                    {line.oldLineNumber || ''}
+                                  </span>
+                                  <span className="inline-block w-4 text-right ml-1 text-xs">
+                                    {line.newLineNumber || ''}
+                                  </span>
+                                </div>
+                                <div className="flex-1 px-2 min-h-[1rem] flex items-center">
+                                  <span className="inline-block w-3 text-xs">
+                                    {getChunkPrefix(line.chunkType)}
+                                  </span>
+                                  <span className="text-xs">
+                                    {line.content}
+                                  </span>
+                                </div>
+                              </div>
+                            ))}
+                          </div>
+                        );
+                      }
+                    )}
+                  </div>
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/tasks/NormalizedConversationViewer.tsx b/frontend/src/components/tasks/NormalizedConversationViewer.tsx
index 84e8bd89..f20acd3b 100644
--- a/frontend/src/components/tasks/NormalizedConversationViewer.tsx
+++ b/frontend/src/components/tasks/NormalizedConversationViewer.tsx
@@ -20,18 +20,24 @@ import {
 } from 'lucide-react';
 import { makeRequest } from '@/lib/api';
 import { MarkdownRenderer } from '@/components/ui/markdown-renderer';
+import { DiffCard } from './DiffCard';
 import type {
   NormalizedConversation,
   NormalizedEntry,
   NormalizedEntryType,
   ExecutionProcess,
   ApiResponse,
+  WorktreeDiff,
 } from 'shared/types';
 
 interface NormalizedConversationViewerProps {
   executionProcess: ExecutionProcess;
   projectId: string;
   onConversationUpdate?: () => void;
+  diff?: WorktreeDiff | null;
+  isBackgroundRefreshing?: boolean;
+  onDeleteFile?: (filePath: string) => void;
+  deletingFiles?: Set<string>;
 }
 
 const getEntryIcon = (entryType: NormalizedEntryType) => {
@@ -207,6 +213,116 @@ const clusterGeminiMessages = (
   return clustered;
 };
 
+// Helper function to determine if a tool call modifies files
+const isFileModificationToolCall = (
+  entryType: NormalizedEntryType
+): boolean => {
+  if (entryType.type !== 'tool_use') {
+    return false;
+  }
+
+  // Check for direct file write action
+  if (entryType.action_type.action === 'file_write') {
+    return true;
+  }
+
+  // Check for "other" actions that are file modification tools
+  if (entryType.action_type.action === 'other') {
+    const fileModificationTools = [
+      'edit',
+      'write',
+      'create_file',
+      'multiedit',
+      'edit_file',
+    ];
+    return fileModificationTools.includes(
+      entryType.tool_name?.toLowerCase() || ''
+    );
+  }
+
+  return false;
+};
+
+// Extract file path from tool call
+const extractFilePathFromToolCall = (entry: NormalizedEntry): string | null => {
+  if (entry.entry_type.type !== 'tool_use') {
+    return null;
+  }
+
+  const { action_type, tool_name } = entry.entry_type;
+
+  // Direct path extraction from action_type
+  if (action_type.action === 'file_write') {
+    return action_type.path || null;
+  }
+
+  // For "other" actions, check if it's a known file modification tool
+  if (action_type.action === 'other') {
+    const fileModificationTools = [
+      'edit',
+      'write',
+      'create_file',
+      'multiedit',
+      'edit_file',
+    ];
+
+    if (fileModificationTools.includes(tool_name.toLowerCase())) {
+      // Parse file path from content field
+      return parseFilePathFromContent(entry.content);
+    }
+  }
+
+  return null;
+};
+
+// Parse file path from content (handles various formats)
+const parseFilePathFromContent = (content: string): string | null => {
+  // Try to extract path from backticks: `path/to/file.ext`
+  const backtickMatch = content.match(/`([^`]+)`/);
+  if (backtickMatch) {
+    return backtickMatch[1];
+  }
+
+  // Try to extract from common patterns like "Edit file: path" or "Write file: path"
+  const actionMatch = content.match(
+    /(?:Edit|Write|Create)\s+file:\s*([^\s\n]+)/i
+  );
+  if (actionMatch) {
+    return actionMatch[1];
+  }
+
+  return null;
+};
+
+// Create filtered diff showing only specific files
+const createIncrementalDiff = (
+  fullDiff: WorktreeDiff | null,
+  targetFilePaths: string[]
+): WorktreeDiff | null => {
+  if (!fullDiff || targetFilePaths.length === 0) {
+    return null;
+  }
+
+  // Filter files to only include the target file paths
+  const filteredFiles = fullDiff.files.filter((file) =>
+    targetFilePaths.some(
+      (targetPath) =>
+        file.path === targetPath ||
+        file.path.endsWith('/' + targetPath) ||
+        targetPath.endsWith('/' + file.path)
+    )
+  );
+
+  if (filteredFiles.length === 0) {
+    return null;
+  }
+
+  return {
+    ...fullDiff,
+    files: filteredFiles,
+  };
+};
+
 // Helper function to determine if content should be rendered as markdown
 const shouldRenderMarkdown = (entryType: NormalizedEntryType) => {
   // Render markdown for assistant messages and tool outputs that contain backticks
@@ -242,6 +358,10 @@ export function NormalizedConversationViewer({
   executionProcess,
   projectId,
   onConversationUpdate,
+  diff,
+  isBackgroundRefreshing = false,
+  onDeleteFile,
+  deletingFiles = new Set(),
 }: NormalizedConversationViewerProps) {
   const [conversation, setConversation] =
     useState<NormalizedConversation | null>(null);
@@ -430,70 +550,105 @@ export function NormalizedConversationViewer({
           const isExpanded = expandedErrors.has(index);
           const hasMultipleLines =
             isErrorMessage && entry.content.includes('\n');
+          const isFileModification = isFileModificationToolCall(
+            entry.entry_type
+          );
+
+          // Extract file path from this specific tool call
+          const modifiedFilePath = isFileModification
+            ? extractFilePathFromToolCall(entry)
+            : null;
+
+          // Create incremental diff showing only the files modified by this specific tool call
+          const incrementalDiff =
+            modifiedFilePath && diff
+              ? createIncrementalDiff(diff, [modifiedFilePath])
+              : null;
+
+          // Show incremental diff for this specific file modification
+          const shouldShowDiff =
+            isFileModification &&
+            incrementalDiff &&
+            incrementalDiff.files.length > 0;
 
           return (
-            <div key={index} className="flex items-start gap-3">
-              <div className="flex-shrink-0 mt-1">
-                {isErrorMessage && hasMultipleLines ? (
-                  <button
-                    onClick={() => toggleErrorExpansion(index)}
-                    className="transition-colors hover:opacity-70"
-                  >
-                    {getEntryIcon(entry.entry_type)}
-                  </button>
-                ) : (
-                  getEntryIcon(entry.entry_type)
-                )}
-              </div>
-              <div className="flex-1 min-w-0">
-                {isErrorMessage && hasMultipleLines ? (
-                  <div className={isExpanded ? 'space-y-2' : ''}>
-                    <div className={getContentClassName(entry.entry_type)}>
-                      {isExpanded ? (
-                        shouldRenderMarkdown(entry.entry_type) ? (
-                          <MarkdownRenderer
-                            content={entry.content}
-                            className="whitespace-pre-wrap break-words"
-                          />
+            <div key={index}>
+              <div className="flex items-start gap-3">
+                <div className="flex-shrink-0 mt-1">
+                  {isErrorMessage && hasMultipleLines ? (
+                    <button
+                      onClick={() => toggleErrorExpansion(index)}
+                      className="transition-colors hover:opacity-70"
+                    >
+                      {getEntryIcon(entry.entry_type)}
+                    </button>
+                  ) : (
+                    getEntryIcon(entry.entry_type)
+                  )}
+                </div>
+                <div className="flex-1 min-w-0">
+                  {isErrorMessage && hasMultipleLines ? (
+                    <div className={isExpanded ? 'space-y-2' : ''}>
+                      <div className={getContentClassName(entry.entry_type)}>
+                        {isExpanded ? (
+                          shouldRenderMarkdown(entry.entry_type) ? (
+                            <MarkdownRenderer
+                              content={entry.content}
+                              className="whitespace-pre-wrap break-words"
+                            />
+                          ) : (
+                            entry.content
+                          )
                         ) : (
-                          entry.content
-                        )
-                      ) : (
-                        <>
-                          {entry.content.split('\n')[0]}
-                          <button
-                            onClick={() => toggleErrorExpansion(index)}
-                            className="ml-2 inline-flex items-center gap-1 text-xs text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 transition-colors"
-                          >
-                            <ChevronRight className="h-3 w-3" />
-                            Show more
-                          </button>
-                        </>
+                          <>
+                            {entry.content.split('\n')[0]}
+                            <button
+                              onClick={() => toggleErrorExpansion(index)}
+                              className="ml-2 inline-flex items-center gap-1 text-xs text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 transition-colors"
+                            >
+                              <ChevronRight className="h-3 w-3" />
+                              Show more
+                            </button>
+                          </>
+                        )}
+                      </div>
+                      {isExpanded && (
+                        <button
+                          onClick={() => toggleErrorExpansion(index)}
+                          className="flex items-center gap-1 text-xs text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 transition-colors"
+                        >
+                          <ChevronUp className="h-3 w-3" />
+                          Show less
+                        </button>
                       )}
                     </div>
-                    {isExpanded && (
-                      <button
-                        onClick={() => toggleErrorExpansion(index)}
-                        className="flex items-center gap-1 text-xs text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 transition-colors"
-                      >
-                        <ChevronUp className="h-3 w-3" />
-                        Show less
-                      </button>
-                    )}
-                  </div>
-                ) : (
-                  <div className={getContentClassName(entry.entry_type)}>
-                    {shouldRenderMarkdown(entry.entry_type) ? (
-                      <MarkdownRenderer
-                        content={entry.content}
-                        className="whitespace-pre-wrap break-words"
-                      />
-                    ) : (
-                      entry.content
-                    )}
-                  </div>
-                )}
+                  ) : (
+                    <div className={getContentClassName(entry.entry_type)}>
+                      {shouldRenderMarkdown(entry.entry_type) ? (
+                        <MarkdownRenderer
+                          content={entry.content}
+                          className="whitespace-pre-wrap break-words"
+                        />
+                      ) : (
+                        entry.content
+                      )}
+                    </div>
+                  )}
+                </div>
               </div>
+
+              {/* Render incremental diff card inline after file modification entries */}
+              {shouldShowDiff && incrementalDiff && (
+                <div className="mt-4 mb-2">
+                  <DiffCard
+                    diff={incrementalDiff}
+                    isBackgroundRefreshing={isBackgroundRefreshing}
+                    onDeleteFile={onDeleteFile}
+                    deletingFiles={deletingFiles}
+                    compact={true}
+                  />
+                </div>
+              )}
             </div>
           );
         })}
diff --git a/frontend/src/components/tasks/TaskDetailsPanel.tsx b/frontend/src/components/tasks/TaskDetailsPanel.tsx
index 8c2d9295..6b9dfa1e 100644
--- a/frontend/src/components/tasks/TaskDetailsPanel.tsx
+++ b/frontend/src/components/tasks/TaskDetailsPanel.tsx
@@ -20,20 +20,17 @@ import {
   DialogTitle,
 } from '@/components/ui/dialog';
 import {
-  FileText,
   ChevronDown,
   ChevronUp,
-  Trash2,
-  Eye,
-  EyeOff,
+  MessageSquare,
+  GitCompare,
 } from 'lucide-react';
+import { DiffCard } from './DiffCard';
 import type {
   TaskWithAttemptStatus,
   EditorType,
   Project,
   WorktreeDiff,
-  DiffChunkType,
-  DiffChunk,
 } from 'shared/types';
 
 interface TaskDetailsPanelProps {
@@ -53,21 +50,6 @@ interface ApiResponse<T> {
   message: string | null;
 }
 
-interface ProcessedLine {
-  content: string;
-  chunkType: DiffChunkType;
-  oldLineNumber?: number;
-  newLineNumber?: number;
-}
-
-interface ProcessedSection {
-  type: 'context' | 'change' | 'expanded';
-  lines: ProcessedLine[];
-  expandKey?: string;
-  expandedAbove?: boolean;
-  expandedBelow?: boolean;
-}
-
 export function TaskDetailsPanel({
   task,
   project,
@@ -84,18 +66,18 @@ export function TaskDetailsPanel({
   const scrollContainerRef = useRef<HTMLDivElement>(null);
   const setupScrollRef = useRef<HTMLDivElement>(null);
 
+  // Tab and collapsible state
+  const [activeTab, setActiveTab] = useState<'logs' | 'diffs'>('logs');
+  const [isHeaderCollapsed, setIsHeaderCollapsed] = useState(false);
+  const [userSelectedTab, setUserSelectedTab] = useState<boolean>(false);
+
   // Diff-related state
   const [diff, setDiff] = useState<WorktreeDiff | null>(null);
   const [diffLoading, setDiffLoading] = useState(true);
   const [diffError, setDiffError] = useState<string | null>(null);
   const [isBackgroundRefreshing, setIsBackgroundRefreshing] = useState(false);
-  const [expandedSections, setExpandedSections] = useState<Set<string>>(
-    new Set()
-  );
-  const [collapsedFiles, setCollapsedFiles] = useState<Set<string>>(new Set());
   const [deletingFiles, setDeletingFiles] = useState<Set<string>>(new Set());
   const [fileToDelete, setFileToDelete] = useState<string | null>(null);
-  const [showDiffs, setShowDiffs] = useState(true);
 
   // Use the custom hook for all task details logic
   const {
@@ -132,6 +114,14 @@ export function TaskDetailsPanel({
   // Use ref to track loading state to prevent dependency cycles
   const diffLoadingRef = useRef(false);
 
+  // Reset to logs tab when task changes
+  useEffect(() => {
+    if (task) {
+      setActiveTab('logs');
+      setUserSelectedTab(true); // Treat this as a user selection to prevent auto-switching
+    }
+  }, [task?.id]);
+
   // Fetch diff when attempt changes
   const fetchDiff = useCallback(
     async (isBackgroundRefresh = false) => {
@@ -227,6 +217,10 @@ export function TaskDetailsPanel({
       hasChanges
     ) {
       fetchDiff();
+      // Auto-switch to diffs tab when changes are detected, but only if user hasn't manually selected a tab
+      if (activeTab === 'logs' && !userSelectedTab) {
+        setActiveTab('diffs');
+      }
     }
   }, [
     executionState?.execution_state,
@@ -234,6 +228,8 @@ export function TaskDetailsPanel({
     isOpen,
     selectedAttempt,
     fetchDiff,
+    activeTab,
+    userSelectedTab,
   ]);
 
   // Handle ESC key locally to prevent global navigation
@@ -259,7 +255,11 @@ export function TaskDetailsPanel({
 
   // Auto-scroll to bottom when activities, execution processes, or conversation changes (for logs section)
   useEffect(() => {
-    if (shouldAutoScrollLogs && scrollContainerRef.current) {
+    if (
+      shouldAutoScrollLogs &&
+      scrollContainerRef.current &&
+      activeTab === 'logs'
+    ) {
       scrollContainerRef.current.scrollTop =
         scrollContainerRef.current.scrollHeight;
     }
@@ -268,6 +268,7 @@ export function TaskDetailsPanel({
     attemptData.processes,
     conversationUpdateTrigger,
     shouldAutoScrollLogs,
+    activeTab,
   ]);
 
   // Auto-scroll setup script logs to bottom
@@ -302,216 +303,6 @@ export function TaskDetailsPanel({
     }
   };
 
-  // Diff processing functions
-  const getChunkClassName = (chunkType: DiffChunkType) => {
-    const baseClass = 'font-mono text-sm whitespace-pre flex w-full';
-
-    switch (chunkType) {
-      case 'Insert':
-        return `${baseClass} bg-green-50 dark:bg-green-900/20 text-green-900 dark:text-green-100`;
-      case 'Delete':
-        return `${baseClass} bg-red-50 dark:bg-red-900/20 text-red-900 dark:text-red-100`;
-      case 'Equal':
-      default:
-        return `${baseClass} text-muted-foreground`;
-    }
-  };
-
-  const getLineNumberClassName = (chunkType: DiffChunkType) => {
-    const baseClass =
-      'flex-shrink-0 w-12 px-1.5 text-xs border-r select-none min-h-[1.25rem] flex items-center';
-
-    switch (chunkType) {
-      case 'Insert':
-        return `${baseClass} text-green-800 dark:text-green-200 bg-green-100 dark:bg-green-900/40 border-green-300 dark:border-green-600`;
-      case 'Delete':
-        return `${baseClass} text-red-800 dark:text-red-200 bg-red-100 dark:bg-red-900/40 border-red-300 dark:border-red-600`;
-      case 'Equal':
-      default:
-        return `${baseClass} text-gray-500 dark:text-gray-400 bg-gray-50 dark:bg-gray-800 border-gray-200 dark:border-gray-700`;
-    }
-  };
-
-  const getChunkPrefix = (chunkType: DiffChunkType) => {
-    switch (chunkType) {
-      case 'Insert':
-        return '+';
-      case 'Delete':
-        return '-';
-      case 'Equal':
-      default:
-        return ' ';
-    }
-  };
-
-  const processFileChunks = (chunks: DiffChunk[], fileIndex: number) => {
-    const CONTEXT_LINES = 3;
-    const lines: ProcessedLine[] = [];
-    let oldLineNumber = 1;
-    let newLineNumber = 1;
-
-    // Convert chunks to lines with line numbers
-    chunks.forEach((chunk) => {
-      const chunkLines = chunk.content.split('\n');
-      chunkLines.forEach((line, index) => {
-        if (index < chunkLines.length - 1 || line !== '') {
-          const processedLine: ProcessedLine = {
-            content: line,
-            chunkType: chunk.chunk_type,
-          };
-
-          switch (chunk.chunk_type) {
-            case 'Equal':
-              processedLine.oldLineNumber = oldLineNumber++;
-              processedLine.newLineNumber = newLineNumber++;
-              break;
-            case 'Delete':
-              processedLine.oldLineNumber = oldLineNumber++;
-              break;
-            case 'Insert':
-              processedLine.newLineNumber = newLineNumber++;
-              break;
-          }
-
-          lines.push(processedLine);
-        }
-      });
-    });
-
-    const sections: ProcessedSection[] = [];
-    let i = 0;
-
-    while (i < lines.length) {
-      const line = lines[i];
-
-      if (line.chunkType === 'Equal') {
-        let nextChangeIndex = i + 1;
-        while (
-          nextChangeIndex < lines.length &&
-          lines[nextChangeIndex].chunkType === 'Equal'
-        ) {
-          nextChangeIndex++;
-        }
-
-        const contextLength = nextChangeIndex - i;
-        const hasNextChange = nextChangeIndex < lines.length;
-        const hasPrevChange =
-          sections.length > 0 &&
-          sections[sections.length - 1].type === 'change';
-
-        if (
-          contextLength <= CONTEXT_LINES * 2 ||
-          (!hasPrevChange && !hasNextChange)
-        ) {
-          sections.push({
-            type: 'context',
-            lines: lines.slice(i, nextChangeIndex),
-          });
-        } else {
-          if (hasPrevChange) {
-            sections.push({
-              type: 'context',
-              lines: lines.slice(i, i + CONTEXT_LINES),
-            });
-            i += CONTEXT_LINES;
-          }
-
-          if (hasNextChange) {
-            const expandStart = hasPrevChange ? i : i + CONTEXT_LINES;
-            const expandEnd = nextChangeIndex - CONTEXT_LINES;
-
-            if (expandEnd > expandStart) {
-              const expandKey = `${fileIndex}-${expandStart}-${expandEnd}`;
-              const isExpanded = expandedSections.has(expandKey);
-
-              if (isExpanded) {
-                sections.push({
-                  type: 'expanded',
-                  lines: lines.slice(expandStart, expandEnd),
-                  expandKey,
-                });
-              } else {
-                sections.push({
-                  type: 'context',
-                  lines: [],
-                  expandKey,
-                });
-              }
-            }
-
-            sections.push({
-              type: 'context',
-              lines: lines.slice(
-                nextChangeIndex - CONTEXT_LINES,
-                nextChangeIndex
-              ),
-            });
-          } else if (!hasPrevChange) {
-            sections.push({
-              type: 'context',
-              lines: lines.slice(i, i + CONTEXT_LINES),
-            });
-          }
-        }
-
-        i = nextChangeIndex;
-      } else {
-        const changeStart = i;
-        while (i < lines.length && lines[i].chunkType !== 'Equal') {
-          i++;
-        }
-
-        sections.push({
-          type: 'change',
-          lines: lines.slice(changeStart, i),
-        });
-      }
-    }
-
-    return sections;
-  };
-
-  const toggleExpandSection = (expandKey: string) => {
-    setExpandedSections((prev) => {
-      const newSet = new Set(prev);
-      if (newSet.has(expandKey)) {
-        newSet.delete(expandKey);
-      } else {
-        newSet.add(expandKey);
-      }
-      return newSet;
-    });
-  };
-
-  const toggleFileCollapse = (filePath: string) => {
-    setCollapsedFiles((prev) => {
-      const newSet = new Set(prev);
-      if (newSet.has(filePath)) {
-        newSet.delete(filePath);
-      } else {
-        newSet.add(filePath);
-      }
-      return newSet;
-    });
-  };
-
-  const collapseAllFiles = () => {
-    if (diff) {
-      setCollapsedFiles(new Set(diff.files.map((file) => file.path)));
-    }
-  };
-
-  const expandAllFiles = () => {
-    setCollapsedFiles(new Set());
-  };
-
-  // Helper to check if all files with content are collapsed
-  const areAllFilesCollapsed = () => {
-    return (
-      diff && diff.files.length > 0 && collapsedFiles.size === diff.files.length
-    );
-  };
-
   const handleDeleteFileClick = (filePath: string) => {
     setFileToDelete(filePath);
   };
@@ -557,8 +348,58 @@ export function TaskDetailsPanel({
     setFileToDelete(null);
   };
 
-  // Determine what content to show based on execution state
-  const renderMainContent = (): JSX.Element => {
+  // Render tab content based on active tab
+  const renderTabContent = (): JSX.Element => {
+    console.log('renderTabContent called with activeTab:', activeTab);
+    if (activeTab === 'diffs') {
+      return renderDiffsContent();
+    }
+    return renderLogsContent();
+  };
+
+  // Render diffs content
+  const renderDiffsContent = (): JSX.Element => {
+    if (diffLoading) {
+      return (
+        <div className="flex items-center justify-center h-32">
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-foreground mx-auto mb-4"></div>
+          <p className="text-muted-foreground ml-4">Loading changes...</p>
+        </div>
+      );
+    }
+
+    if (diffError) {
+      return (
+        <div className="text-center py-8 text-destructive">
+          <p>{diffError}</p>
+        </div>
+      );
+    }
+
+    return (
+      <div className="h-full px-4 pb-4">
+        <DiffCard
+          diff={diff}
+          isBackgroundRefreshing={isBackgroundRefreshing}
+          onDeleteFile={handleDeleteFileClick}
+          deletingFiles={deletingFiles}
+          compact={false}
+          className="h-full"
+        />
+      </div>
+    );
+  };
+
+  // Render logs content
+  const renderLogsContent = (): JSX.Element => {
+    // Debug logging to help identify the issue
+    console.log('renderLogsContent called with state:', {
+      loading,
+      selectedAttempt: selectedAttempt?.id,
+      executionState: executionState?.execution_state,
+      activeTab,
+    });
+
     // Show loading spinner only when we're actually loading data
     if (loading) {
       return (
@@ -572,10 +413,10 @@ export function TaskDetailsPanel({
     // If no attempt is selected, show message
     if (!selectedAttempt) {
       return (
-        <div className="flex-1 min-h-0 p-6 overflow-y-auto">
-          <div className="text-center py-8 text-muted-foreground">
-            <p>No attempt selected</p>
-          </div>
+        <div className="text-center py-8 text-muted-foreground">
+          <MessageSquare className="h-12 w-12 mx-auto mb-4 opacity-50" />
+          <p className="text-lg font-medium mb-2">No attempt selected</p>
+          <p className="text-sm">Select an attempt to view its logs</p>
         </div>
       );
     }
@@ -583,10 +424,14 @@ export function TaskDetailsPanel({
     // If no execution state, execution hasn't started yet
     if (!executionState) {
       return (
-        <div className="flex-1 min-h-0 p-6 overflow-y-auto">
-          <div className="text-center py-8 text-muted-foreground">
-            <p>Task execution not started yet</p>
-          </div>
+        <div className="text-center py-8 text-muted-foreground">
+          <MessageSquare className="h-12 w-12 mx-auto mb-4 opacity-50" />
+          <p className="text-lg font-medium mb-2">
+            Task execution not started yet
+          </p>
+          <p className="text-sm">
+            Logs will appear here once the task execution begins
+          </p>
         </div>
       );
     }
@@ -613,10 +458,7 @@ export function TaskDetailsPanel({
           );
 
       return (
-        <div
-          className="flex-1 min-h-0 p-6 overflow-y-auto"
-          ref={setupScrollRef}
-        >
+        <div ref={setupScrollRef} className="h-full overflow-y-auto">
           <div className="mb-4">
             <p className="text-lg font-semibold mb-2">Setup Script Running</p>
             <p className="text-muted-foreground mb-4">
@@ -647,7 +489,7 @@ export function TaskDetailsPanel({
           );
 
       return (
-        <div className="flex-1 min-h-0 p-6 overflow-y-auto">
+        <div className="h-full overflow-y-auto">
           <div className="mb-4">
             <p className="text-lg font-semibold mb-2 text-destructive">
               Setup Script Failed
@@ -679,7 +521,7 @@ export function TaskDetailsPanel({
           );
 
       return (
-        <div className="flex-1 min-h-0 p-6 overflow-y-auto">
+        <div className="h-full overflow-y-auto">
           <div className="mb-4">
             <p className="text-lg font-semibold mb-2 text-destructive">
               Coding Agent Failed
@@ -709,11 +551,10 @@ export function TaskDetailsPanel({
       !hasChanges
     ) {
       return (
-        <div className="flex-1 min-h-0 p-6 overflow-y-auto">
-          <div className="text-center py-8 text-muted-foreground">
-            <p className="text-lg font-semibold mb-2">Setup Complete</p>
-            <p>Waiting for coding agent to start...</p>
-          </div>
+        <div className="text-center py-8 text-muted-foreground">
+          <MessageSquare className="h-12 w-12 mx-auto mb-4 opacity-50" />
+          <p className="text-lg font-semibold mb-2">Setup Complete</p>
+          <p>Waiting for coding agent to start...</p>
         </div>
       );
     }
@@ -721,511 +562,137 @@ export function TaskDetailsPanel({
     // When task is complete, show completion message
     if (isComplete) {
       return (
-        <div className="flex-1 min-h-0 p-6 overflow-y-auto">
-          <div className="text-center py-8 text-green-600">
-            <p className="text-lg font-semibold mb-2">Task Complete</p>
-            <p className="text-muted-foreground">
-              The task has been completed successfully.
-            </p>
-          </div>
+        <div className="text-center py-8 text-green-600">
+          <MessageSquare className="h-12 w-12 mx-auto mb-4 opacity-50" />
+          <p className="text-lg font-semibold mb-2">Task Complete</p>
+          <p className="text-muted-foreground">
+            The task has been completed successfully.
+          </p>
         </div>
       );
     }
 
-    // When coding agent is running or complete but no changes yet, show just agent conversation (full height)
-    if ((isCodingAgentRunning || isCodingAgentComplete) && !hasChanges) {
+    // When coding agent is running or complete, show conversation
+    if (isCodingAgentRunning || isCodingAgentComplete || hasChanges) {
       return (
-        <div className="flex-1 min-h-0 border-t bg-muted/30">
-          <div
-            ref={scrollContainerRef}
-            onScroll={handleLogsScroll}
-            className="h-full overflow-y-auto p-6"
-          >
-            {loading ? (
-              <div className="text-center py-8">
-                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-foreground mx-auto mb-4"></div>
-                <p className="text-muted-foreground">Loading...</p>
-              </div>
-            ) : (
-              (() => {
-                // Find main coding agent process (command: "executor")
-                let mainCodingAgentProcess = Object.values(
-                  attemptData.runningProcessDetails
-                ).find(
+        <div
+          ref={scrollContainerRef}
+          onScroll={handleLogsScroll}
+          className="h-full overflow-y-auto"
+        >
+          {loading ? (
+            <div className="text-center py-8">
+              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-foreground mx-auto mb-4"></div>
+              <p className="text-muted-foreground">Loading...</p>
+            </div>
+          ) : (
+            (() => {
+              // Find main coding agent process (command: "executor")
+              let mainCodingAgentProcess = Object.values(
+                attemptData.runningProcessDetails
+              ).find(
+                (process) =>
+                  process.process_type === 'codingagent' &&
+                  process.command === 'executor'
+              );
+
+              if (!mainCodingAgentProcess) {
+                const mainCodingAgentSummary = attemptData.processes.find(
                   (process) =>
                     process.process_type === 'codingagent' &&
                     process.command === 'executor'
                 );
 
-                if (!mainCodingAgentProcess) {
-                  const mainCodingAgentSummary = attemptData.processes.find(
-                    (process) =>
-                      process.process_type === 'codingagent' &&
-                      process.command === 'executor'
-                  );
-
-                  if (mainCodingAgentSummary) {
-                    mainCodingAgentProcess = Object.values(
-                      attemptData.runningProcessDetails
-                    ).find(
-                      (process) => process.id === mainCodingAgentSummary.id
-                    );
-
-                    if (!mainCodingAgentProcess) {
-                      mainCodingAgentProcess = {
-                        ...mainCodingAgentSummary,
-                        stdout: null,
-                        stderr: null,
-                      } as any;
-                    }
-                  }
-                }
-
-                // Find follow up executor processes (command: "followup_executor")
-                const followUpProcesses = attemptData.processes
-                  .filter(
-                    (process) =>
-                      process.process_type === 'codingagent' &&
-                      process.command === 'followup_executor'
-                  )
-                  .map((summary) => {
-                    const detailedProcess = Object.values(
-                      attemptData.runningProcessDetails
-                    ).find((process) => process.id === summary.id);
-                    return (
-                      detailedProcess ||
-                      ({
-                        ...summary,
-                        stdout: null,
-                        stderr: null,
-                      } as any)
-                    );
-                  });
-
-                if (mainCodingAgentProcess || followUpProcesses.length > 0) {
-                  return (
-                    <div className="space-y-8">
-                      {mainCodingAgentProcess && (
-                        <div>
-                          <NormalizedConversationViewer
-                            executionProcess={mainCodingAgentProcess}
-                            projectId={projectId}
-                            onConversationUpdate={handleConversationUpdate}
-                          />
-                        </div>
-                      )}
-                      {followUpProcesses.map((followUpProcess) => (
-                        <div key={followUpProcess.id}>
-                          <div className="border-t border-border mb-8"></div>
-                          <NormalizedConversationViewer
-                            executionProcess={followUpProcess}
-                            projectId={projectId}
-                            onConversationUpdate={handleConversationUpdate}
-                          />
-                        </div>
-                      ))}
-                    </div>
-                  );
-                }
-
-                return (
-                  <div className="text-center py-8 text-muted-foreground">
-                    <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mx-auto mb-4"></div>
-                    <p className="text-lg font-semibold mb-2">
-                      Coding Agent Starting
-                    </p>
-                    <p>Initializing conversation...</p>
-                  </div>
-                );
-              })()
-            )}
-          </div>
-        </div>
-      );
-    }
-
-    // When changes appear, show them (2/3) and conversation (1/3) in split view
-    if (hasChanges) {
-      return (
-        <>
-          {/* Top area - Code Changes (responsive height) */}
-          {showDiffs && (
-            <div
-              className={`${areAllFilesCollapsed() ? 'h-auto' : 'max-h-[66vh]'} min-h-0 p-4 overflow-y-auto`}
-            >
-              {diffLoading ? (
-                <div className="flex items-center justify-center h-32">
-                  <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-foreground mx-auto mb-4"></div>
-                  <p className="text-muted-foreground ml-4">
-                    Loading changes...
-                  </p>
-                </div>
-              ) : diffError ? (
-                <div className="text-center py-8 text-destructive">
-                  <p>{diffError}</p>
-                </div>
-              ) : !diff || diff.files.length === 0 ? (
-                <div className="text-center py-8 text-muted-foreground">
-                  <FileText className="h-12 w-12 mx-auto mb-4 opacity-50" />
-                  <p>No changes detected</p>
-                  <p className="text-sm">
-                    The worktree is identical to the base commit
-                  </p>
-                </div>
-              ) : (
-                <div
-                  className={`${areAllFilesCollapsed() ? 'space-y-1' : 'space-y-3'}`}
-                >
-                  <div
-                    className={`flex items-center justify-between ${areAllFilesCollapsed() ? 'mb-1' : 'mb-3'}`}
-                  >
-                    <div className="flex items-center gap-2">
-                      <div className="text-sm text-muted-foreground">
-                        {diff.files.length} file
-                        {diff.files.length !== 1 ? 's' : ''} changed
-                      </div>
-                      {isBackgroundRefreshing && (
-                        <div className="flex items-center gap-1">
-                          <div className="animate-spin h-3 w-3 border border-blue-500 border-t-transparent rounded-full"></div>
-                          <span className="text-xs text-blue-600 dark:text-blue-400">
-                            Updating...
-                          </span>
-                        </div>
-                      )}
-                    </div>
-                    <div className="flex items-center gap-2">
-                      <Button
-                        variant="ghost"
-                        size="sm"
-                        onClick={() => setShowDiffs(false)}
-                        className="h-7 text-xs"
-                      >
-                        <EyeOff className="h-3 w-3 mr-1" />
-                        Hide Diffs
-                      </Button>
-                      {diff.files.length > 1 && (
-                        <>
-                          <Button
-                            variant="ghost"
-                            size="sm"
-                            onClick={expandAllFiles}
-                            className="h-7 text-xs"
-                            disabled={collapsedFiles.size === 0}
-                          >
-                            Expand All
-                          </Button>
-                          <Button
-                            variant="ghost"
-                            size="sm"
-                            onClick={collapseAllFiles}
-                            className="h-7 text-xs"
-                            disabled={collapsedFiles.size === diff.files.length}
-                          >
-                            Collapse All
-                          </Button>
-                        </>
-                      )}
-                    </div>
-                  </div>
-                  {diff.files.map((file, fileIndex) => (
-                    <div
-                      key={fileIndex}
-                      className={`border rounded-lg overflow-hidden ${collapsedFiles.has(file.path) ? 'border-muted' : ''}`}
-                    >
-                      <div
-                        className={`bg-muted px-3 py-1.5 flex items-center justify-between ${!collapsedFiles.has(file.path) ? 'border-b' : ''}`}
-                      >
-                        <div className="flex items-center gap-2">
-                          <Button
-                            variant="ghost"
-                            size="sm"
-                            onClick={() => toggleFileCollapse(file.path)}
-                            className="h-6 w-6 p-0 hover:bg-muted-foreground/10"
-                            title={
-                              collapsedFiles.has(file.path)
-                                ? 'Expand diff'
-                                : 'Collapse diff'
-                            }
-                          >
-                            {collapsedFiles.has(file.path) ? (
-                              <ChevronDown className="h-4 w-4" />
-                            ) : (
-                              <ChevronUp className="h-4 w-4" />
-                            )}
-                          </Button>
-                          <p className="text-sm font-medium text-muted-foreground font-mono">
-                            {file.path}
-                          </p>
-                          {collapsedFiles.has(file.path) && (
-                            <div className="flex items-center gap-1 text-xs text-muted-foreground ml-2">
-                              <span className="bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-200 px-1.5 py-0.5 rounded">
-                                +
-                                {file.chunks
-                                  .filter((c) => c.chunk_type === 'Insert')
-                                  .reduce(
-                                    (acc, c) =>
-                                      acc + c.content.split('\n').length - 1,
-                                    0
-                                  )}
-                              </span>
-                              <span className="bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-200 px-1.5 py-0.5 rounded">
-                                -
-                                {file.chunks
-                                  .filter((c) => c.chunk_type === 'Delete')
-                                  .reduce(
-                                    (acc, c) =>
-                                      acc + c.content.split('\n').length - 1,
-                                    0
-                                  )}
-                              </span>
-                            </div>
-                          )}
-                        </div>
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          onClick={() => handleDeleteFileClick(file.path)}
-                          disabled={deletingFiles.has(file.path)}
-                          className="text-red-600 hover:text-red-800 hover:bg-red-50 h-8 px-3 gap-1"
-                          title={`Delete ${file.path}`}
-                        >
-                          <Trash2 className="h-4 w-4" />
-                          <span className="text-xs">
-                            {deletingFiles.has(file.path)
-                              ? 'Deleting...'
-                              : 'Delete File'}
-                          </span>
-                        </Button>
-                      </div>
-                      {!collapsedFiles.has(file.path) && (
-                        <div className="overflow-x-auto">
-                          <div className="inline-block min-w-full">
-                            {processFileChunks(file.chunks, fileIndex).map(
-                              (section, sectionIndex) => {
-                                if (
-                                  section.type === 'context' &&
-                                  section.lines.length === 0 &&
-                                  section.expandKey
-                                ) {
-                                  const lineCount =
-                                    parseInt(section.expandKey.split('-')[2]) -
-                                    parseInt(section.expandKey.split('-')[1]);
-                                  return (
-                                    <div
-                                      key={`expand-${section.expandKey}`}
-                                      className="w-full"
-                                    >
-                                      <Button
-                                        variant="ghost"
-                                        size="sm"
-                                        onClick={() =>
-                                          toggleExpandSection(
-                                            section.expandKey!
-                                          )
-                                        }
-                                        className="w-full h-6 text-xs text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 hover:bg-blue-50 dark:hover:bg-blue-950/50 border-t border-b border-gray-200 dark:border-gray-700 rounded-none justify-start"
-                                      >
-                                        <ChevronDown className="h-3 w-3 mr-1" />
-                                        Show {lineCount} more lines
-                                      </Button>
-                                    </div>
-                                  );
-                                }
-
-                                return (
-                                  <div key={`section-${sectionIndex}`}>
-                                    {section.type === 'expanded' &&
-                                      section.expandKey && (
-                                        <div className="w-full">
-                                          <Button
-                                            variant="ghost"
-                                            size="sm"
-                                            onClick={() =>
-                                              toggleExpandSection(
-                                                section.expandKey!
-                                              )
-                                            }
-                                            className="w-full h-6 text-xs text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 hover:bg-blue-50 dark:hover:bg-blue-950/50 border-t border-b border-gray-200 dark:border-gray-700 rounded-none justify-start"
-                                          >
-                                            <ChevronUp className="h-3 w-3 mr-1" />
-                                            Hide expanded lines
-                                          </Button>
-                                        </div>
-                                      )}
-                                    {section.lines.map((line, lineIndex) => (
-                                      <div
-                                        key={`${sectionIndex}-${lineIndex}`}
-                                        className={getChunkClassName(
-                                          line.chunkType
-                                        )}
-                                        style={{ minWidth: 'max-content' }}
-                                      >
-                                        <div
-                                          className={getLineNumberClassName(
-                                            line.chunkType
-                                          )}
-                                        >
-                                          <span className="inline-block w-5 text-right">
-                                            {line.oldLineNumber || ''}
-                                          </span>
-                                          <span className="inline-block w-5 text-right ml-1">
-                                            {line.newLineNumber || ''}
-                                          </span>
-                                        </div>
-                                        <div className="flex-1 px-2 min-h-[1.25rem] flex items-center">
-                                          <span className="inline-block w-4">
-                                            {getChunkPrefix(line.chunkType)}
-                                          </span>
-                                          <span>{line.content}</span>
-                                        </div>
-                                      </div>
-                                    ))}
-                                  </div>
-                                );
-                              }
-                            )}
-                          </div>
-                        </div>
-                      )}
-                    </div>
-                  ))}
-                </div>
-              )}
-            </div>
-          )}
-
-          {/* Show Diffs button when diffs are hidden */}
-          {!showDiffs && hasChanges && (
-            <div className="p-2 border-b bg-muted/50">
-              <div className="flex justify-center">
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={() => setShowDiffs(true)}
-                  className="h-7 text-xs"
-                >
-                  <Eye className="h-3 w-3 mr-1" />
-                  Show Diffs
-                </Button>
-              </div>
-            </div>
-          )}
-
-          {/* Bottom area - Agent Logs (responsive height) */}
-          <div
-            className={`${!showDiffs || areAllFilesCollapsed() ? 'flex-1' : 'flex-1'} min-h-60 ${showDiffs ? 'border-t' : ''} bg-muted/30`}
-          >
-            <div
-              ref={scrollContainerRef}
-              onScroll={handleLogsScroll}
-              className="h-full overflow-y-auto p-4"
-            >
-              {loading ? (
-                <div className="text-center py-8">
-                  <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-foreground mx-auto mb-4"></div>
-                  <p className="text-muted-foreground">Loading...</p>
-                </div>
-              ) : (
-                (() => {
-                  // Find main coding agent process (command: "executor")
-                  let mainCodingAgentProcess = Object.values(
+                if (mainCodingAgentSummary) {
+                  mainCodingAgentProcess = Object.values(
                     attemptData.runningProcessDetails
-                  ).find(
-                    (process) =>
-                      process.process_type === 'codingagent' &&
-                      process.command === 'executor'
-                  );
+                  ).find((process) => process.id === mainCodingAgentSummary.id);
 
                   if (!mainCodingAgentProcess) {
-                    const mainCodingAgentSummary = attemptData.processes.find(
-                      (process) =>
-                        process.process_type === 'codingagent' &&
-                        process.command === 'executor'
-                    );
-
-                    if (mainCodingAgentSummary) {
-                      mainCodingAgentProcess = Object.values(
-                        attemptData.runningProcessDetails
-                      ).find(
-                        (process) => process.id === mainCodingAgentSummary.id
-                      );
-
-                      if (!mainCodingAgentProcess) {
-                        mainCodingAgentProcess = {
-                          ...mainCodingAgentSummary,
-                          stdout: null,
-                          stderr: null,
-                        } as any;
-                      }
-                    }
-                  }
-
-                  // Find follow up executor processes (command: "followup_executor")
-                  const followUpProcesses = attemptData.processes
-                    .filter(
-                      (process) =>
-                        process.process_type === 'codingagent' &&
-                        process.command === 'followup_executor'
-                    )
-                    .map((summary) => {
-                      const detailedProcess = Object.values(
-                        attemptData.runningProcessDetails
-                      ).find((process) => process.id === summary.id);
-                      return (
-                        detailedProcess ||
-                        ({
-                          ...summary,
-                          stdout: null,
-                          stderr: null,
-                        } as any)
-                      );
-                    });
-
-                  if (mainCodingAgentProcess || followUpProcesses.length > 0) {
-                    return (
-                      <div className="space-y-8">
-                        {mainCodingAgentProcess && (
-                          <div>
-                            <NormalizedConversationViewer
-                              executionProcess={mainCodingAgentProcess}
-                              projectId={projectId}
-                              onConversationUpdate={handleConversationUpdate}
-                            />
-                          </div>
-                        )}
-                        {followUpProcesses.map((followUpProcess) => (
-                          <div key={followUpProcess.id}>
-                            <div className="border-t border-border mb-8"></div>
-                            <NormalizedConversationViewer
-                              executionProcess={followUpProcess}
-                              projectId={projectId}
-                              onConversationUpdate={handleConversationUpdate}
-                            />
-                          </div>
-                        ))}
-                      </div>
-                    );
+                    mainCodingAgentProcess = {
+                      ...mainCodingAgentSummary,
+                      stdout: null,
+                      stderr: null,
+                    } as any;
                   }
+                }
+              }
 
+              // Find follow up executor processes (command: "followup_executor")
+              const followUpProcesses = attemptData.processes
+                .filter(
+                  (process) =>
+                    process.process_type === 'codingagent' &&
+                    process.command === 'followup_executor'
+                )
+                .map((summary) => {
+                  const detailedProcess = Object.values(
+                    attemptData.runningProcessDetails
+                  ).find((process) => process.id === summary.id);
                   return (
-                    <div className="text-center py-8 text-muted-foreground">
-                      <p>No coding agent conversation to display</p>
-                    </div>
+                    detailedProcess ||
+                    ({
+                      ...summary,
+                      stdout: null,
+                      stderr: null,
+                    } as any)
                   );
-                })()
-              )}
-            </div>
-          </div>
-        </>
+                });
+
+              if (mainCodingAgentProcess || followUpProcesses.length > 0) {
+                return (
+                  <div className="space-y-8">
+                    {mainCodingAgentProcess && (
+                      <div className="space-y-6">
+                        <NormalizedConversationViewer
+                          executionProcess={mainCodingAgentProcess}
+                          projectId={projectId}
+                          onConversationUpdate={handleConversationUpdate}
+                          diff={diff}
+                          isBackgroundRefreshing={isBackgroundRefreshing}
+                          onDeleteFile={handleDeleteFileClick}
+                          deletingFiles={deletingFiles}
+                        />
+                      </div>
+                    )}
+                    {followUpProcesses.map((followUpProcess) => (
+                      <div key={followUpProcess.id}>
+                        <div className="border-t border-border mb-8"></div>
+                        <NormalizedConversationViewer
+                          executionProcess={followUpProcess}
+                          projectId={projectId}
+                          onConversationUpdate={handleConversationUpdate}
+                          diff={diff}
+                          isBackgroundRefreshing={isBackgroundRefreshing}
+                          onDeleteFile={handleDeleteFileClick}
+                          deletingFiles={deletingFiles}
+                        />
+                      </div>
+                    ))}
+                  </div>
+                );
+              }
+
+              return (
+                <div className="text-center py-8 text-muted-foreground">
+                  <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mx-auto mb-4"></div>
+                  <p className="text-lg font-semibold mb-2">
+                    Coding Agent Starting
+                  </p>
+                  <p>Initializing conversation...</p>
+                </div>
+              );
+            })()
+          )}
+        </div>
       );
     }
 
     // Default case - unexpected state
     return (
-      <div className="flex-1 min-h-0 p-6 overflow-y-auto">
-        <div className="text-center py-8 text-muted-foreground">
-          <p>Unknown execution state</p>
-        </div>
+      <div className="text-center py-8 text-muted-foreground">
+        <MessageSquare className="h-12 w-12 mx-auto mb-4 opacity-50" />
+        <p>Unknown execution state</p>
       </div>
     );
   };
@@ -1250,34 +717,102 @@ export function TaskDetailsPanel({
                 onDeleteTask={onDeleteTask}
               />
 
-              {/* Toolbar */}
-              <TaskDetailsToolbar
-                task={task}
-                project={project}
-                projectId={projectId}
-                selectedAttempt={selectedAttempt}
-                taskAttempts={taskAttempts}
-                isAttemptRunning={isAttemptRunning}
-                isStopping={isStopping}
-                selectedExecutor={selectedExecutor}
-                runningDevServer={runningDevServer}
-                isStartingDevServer={isStartingDevServer}
-                devServerDetails={devServerDetails}
-                processedDevServerLogs={processedDevServerLogs}
-                branches={branches}
-                selectedBranch={selectedBranch}
-                onAttemptChange={handleAttemptChange}
-                onCreateNewAttempt={createNewAttempt}
-                onStopAllExecutions={stopAllExecutions}
-                onStartDevServer={startDevServer}
-                onStopDevServer={stopDevServer}
-                onOpenInEditor={handleOpenInEditor}
-                onSetIsHoveringDevServer={setIsHoveringDevServer}
-              />
+              {/* Collapsible Toolbar */}
+              <div className="border-b">
+                <div className="px-4 pb-2 flex items-center justify-between">
+                  <h3 className="text-sm font-medium text-muted-foreground">
+                    Task Details
+                  </h3>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => setIsHeaderCollapsed(!isHeaderCollapsed)}
+                    className="h-6 w-6 p-0"
+                  >
+                    {isHeaderCollapsed ? (
+                      <ChevronDown className="h-4 w-4" />
+                    ) : (
+                      <ChevronUp className="h-4 w-4" />
+                    )}
+                  </Button>
+                </div>
+                {!isHeaderCollapsed && (
+                  <TaskDetailsToolbar
+                    task={task}
+                    project={project}
+                    projectId={projectId}
+                    selectedAttempt={selectedAttempt}
+                    taskAttempts={taskAttempts}
+                    isAttemptRunning={isAttemptRunning}
+                    isStopping={isStopping}
+                    selectedExecutor={selectedExecutor}
+                    runningDevServer={runningDevServer}
+                    isStartingDevServer={isStartingDevServer}
+                    devServerDetails={devServerDetails}
+                    processedDevServerLogs={processedDevServerLogs}
+                    branches={branches}
+                    selectedBranch={selectedBranch}
+                    onAttemptChange={handleAttemptChange}
+                    onCreateNewAttempt={createNewAttempt}
+                    onStopAllExecutions={stopAllExecutions}
+                    onStartDevServer={startDevServer}
+                    onStopDevServer={stopDevServer}
+                    onOpenInEditor={handleOpenInEditor}
+                    onSetIsHoveringDevServer={setIsHoveringDevServer}
+                  />
+                )}
+              </div>
 
-              {/* Main Content - Dynamic based on execution state */}
-              <div className="flex-1 flex flex-col min-h-0">
-                {renderMainContent()}
+              {/* Tab Navigation */}
+              <div className="border-b bg-muted/30">
+                <div className="flex px-4">
+                  <button
+                    onClick={() => {
+                      console.log(
+                        'Logs tab clicked - setting activeTab to logs'
+                      );
+                      setActiveTab('logs');
+                      setUserSelectedTab(true);
+                    }}
+                    className={`flex items-center px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
+                      activeTab === 'logs'
+                        ? 'border-primary text-primary bg-background'
+                        : 'border-transparent text-muted-foreground hover:text-foreground hover:bg-muted/50'
+                    }`}
+                  >
+                    <MessageSquare className="h-4 w-4 mr-2" />
+                    Logs
+                  </button>
+                  <button
+                    onClick={() => {
+                      console.log(
+                        'Diffs tab clicked - setting activeTab to diffs'
+                      );
+                      setActiveTab('diffs');
+                      setUserSelectedTab(true);
+                    }}
+                    className={`flex items-center px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
+                      activeTab === 'diffs'
+                        ? 'border-primary text-primary bg-background'
+                        : 'border-transparent text-muted-foreground hover:text-foreground hover:bg-muted/50'
+                    }`}
+                  >
+                    <GitCompare className="h-4 w-4 mr-2" />
+                    Diffs
+                    {diff && diff.files.length > 0 && (
+                      <span className="ml-2 px-1.5 py-0.5 text-xs bg-primary/10 text-primary rounded-full">
+                        {diff.files.length}
+                      </span>
+                    )}
+                  </button>
+                </div>
+              </div>
+
+              {/* Tab Content */}
+              <div
+                className={`flex-1 flex flex-col min-h-0 ${activeTab === 'logs' ? 'p-4' : 'pt-4'}`}
+              >
+                {renderTabContent()}
               </div>
 
               {/* Footer - Follow-up section */}