diff --git a/app/api/tasks/[taskId]/diff/route.ts b/app/api/tasks/[taskId]/diff/route.ts
new file mode 100644
index 00000000..398a8519
--- /dev/null
+++ b/app/api/tasks/[taskId]/diff/route.ts
@@ -0,0 +1,144 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { db } from '@/lib/db/client'
+import { tasks } from '@/lib/db/schema'
+import { eq } from 'drizzle-orm'
+import { octokit } from '@/lib/github/client'
+
+function getLanguageFromFilename(filename: string): string {
+  const ext = filename.split('.').pop()?.toLowerCase()
+  const langMap: { [key: string]: string } = {
+    js: 'javascript',
+    jsx: 'javascript',
+    ts: 'typescript',
+    tsx: 'typescript',
+    py: 'python',
+    java: 'java',
+    cpp: 'cpp',
+    c: 'c',
+    cs: 'csharp',
+    php: 'php',
+    rb: 'ruby',
+    go: 'go',
+    rs: 'rust',
+    swift: 'swift',
+    kt: 'kotlin',
+    scala: 'scala',
+    sh: 'bash',
+    yaml: 'yaml',
+    yml: 'yaml',
+    json: 'json',
+    xml: 'xml',
+    html: 'html',
+    css: 'css',
+    scss: 'scss',
+    less: 'less',
+    md: 'markdown',
+    sql: 'sql',
+  }
+  return langMap[ext || ''] || 'text'
+}
+
+async function getFileContent(owner: string, repo: string, path: string, ref: string): Promise<string> {
+  try {
+    const response = await octokit.rest.repos.getContent({
+      owner,
+      repo,
+      path,
+      ref,
+    })
+
+    if ('content' in response.data && typeof response.data.content === 'string') {
+      return Buffer.from(response.data.content, 'base64').toString('utf-8')
+    }
+
+    return ''
+  } catch (error: unknown) {
+    // File might not exist in this ref (e.g., new file)
+    if (error && typeof error === 'object' && 'status' in error && error.status === 404) {
+      return ''
+    }
+    throw error
+  }
+}
+
+export async function GET(request: NextRequest, { params }: { params: Promise<{ taskId: string }> }) {
+  try {
+    const { taskId } = await params
+    const searchParams = request.nextUrl.searchParams
+    const filename = searchParams.get('filename')
+
+    if (!filename) {
+      return NextResponse.json({ error: 'Missing filename parameter' }, { status: 400 })
+    }
+
+    // Get task from database
+    const [task] = await db.select().from(tasks).where(eq(tasks.id, taskId)).limit(1)
+
+    if (!task) {
+      return NextResponse.json({ error: 'Task not found' }, { status: 404 })
+    }
+
+    if (!task.branchName || !task.repoUrl) {
+      return NextResponse.json({ error: 'Task does not have branch or repository information' }, { status: 400 })
+    }
+
+    // Parse GitHub repository URL to get owner and repo
+    const githubMatch = task.repoUrl.match(/github\.com\/([^\/]+)\/([^\/\.]+)/)
+    if (!githubMatch) {
+      return NextResponse.json({ error: 'Invalid GitHub repository URL' }, { status: 400 })
+    }
+
+    const [, owner, repo] = githubMatch
+
+    try {
+      // Get file content from both main/master and the task branch
+      let oldContent = ''
+      let newContent = ''
+
+      // Try to get content from main branch first, fallback to master
+      try {
+        oldContent = await getFileContent(owner, repo, filename, 'main')
+      } catch (error: unknown) {
+        if (error && typeof error === 'object' && 'status' in error && error.status === 404) {
+          try {
+            oldContent = await getFileContent(owner, repo, filename, 'master')
+          } catch (masterError: unknown) {
+            if (
+              !(masterError && typeof masterError === 'object' && 'status' in masterError && masterError.status === 404)
+            ) {
+              throw masterError
+            }
+            // File doesn't exist in main/master (could be a new file)
+            oldContent = ''
+          }
+        } else {
+          throw error
+        }
+      }
+
+      // Get content from the task branch
+      newContent = await getFileContent(owner, repo, filename, task.branchName)
+
+      return NextResponse.json({
+        success: true,
+        data: {
+          filename,
+          oldContent,
+          newContent,
+          language: getLanguageFromFilename(filename),
+        },
+      })
+    } catch (error: unknown) {
+      console.error('Error fetching file content from GitHub:', error)
+      return NextResponse.json({ error: 'Failed to fetch file content from GitHub' }, { status: 500 })
+    }
+  } catch (error) {
+    console.error('Error in diff API:', error)
+    return NextResponse.json(
+      {
+        error: error instanceof Error ? error.message : 'Internal server error',
+      },
+      { status: 500 },
+    )
+  }
+}
diff --git a/app/api/tasks/[taskId]/files/route.ts b/app/api/tasks/[taskId]/files/route.ts
new file mode 100644
index 00000000..f8b003f1
--- /dev/null
+++ b/app/api/tasks/[taskId]/files/route.ts
@@ -0,0 +1,225 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { db } from '@/lib/db/client'
+import { tasks } from '@/lib/db/schema'
+import { eq } from 'drizzle-orm'
+import { octokit } from '@/lib/github/client'
+
+interface FileChange {
+  filename: string
+  status: 'added' | 'modified' | 'deleted' | 'renamed'
+  additions: number
+  deletions: number
+  changes: number
+}
+
+interface FileTreeNode {
+  type: 'file' | 'directory'
+  filename?: string
+  status?: string
+  additions?: number
+  deletions?: number
+  changes?: number
+  children?: { [key: string]: FileTreeNode }
+}
+
+export async function GET(request: NextRequest, { params }: { params: Promise<{ taskId: string }> }) {
+  try {
+    const { taskId } = await params
+
+    // Get task from database
+    const [task] = await db.select().from(tasks).where(eq(tasks.id, taskId)).limit(1)
+
+    if (!task) {
+      return NextResponse.json({ success: false, error: 'Task not found' }, { status: 404 })
+    }
+
+    // Check if task has a branch assigned
+    if (!task.branchName) {
+      return NextResponse.json({
+        success: true,
+        files: [],
+        fileTree: {},
+        branchName: null,
+      })
+    }
+
+    // Extract owner and repo from the repository URL
+    const repoUrl = task.repoUrl
+    if (!repoUrl) {
+      return NextResponse.json({
+        success: true,
+        files: [],
+        fileTree: {},
+        branchName: task.branchName,
+      })
+    }
+
+    // Parse GitHub repository URL to get owner and repo
+    const githubMatch = repoUrl.match(/github\.com\/([^\/]+)\/([^\/\.]+)/)
+    if (!githubMatch) {
+      console.error('Invalid GitHub URL format:', repoUrl)
+      return NextResponse.json(
+        {
+          success: false,
+          error: 'Invalid repository URL format',
+        },
+        { status: 400 },
+      )
+    }
+
+    const [, owner, repo] = githubMatch
+
+    let files: FileChange[] = []
+
+    try {
+      // First check if the branch exists
+      try {
+        await octokit.rest.repos.getBranch({
+          owner,
+          repo,
+          branch: task.branchName,
+        })
+      } catch (branchError: unknown) {
+        if (branchError && typeof branchError === 'object' && 'status' in branchError && branchError.status === 404) {
+          // Branch doesn't exist yet (task is still processing)
+          console.log(`Branch ${task.branchName} doesn't exist yet, returning empty file list`)
+          return NextResponse.json({
+            success: true,
+            files: [],
+            fileTree: {},
+            branchName: task.branchName,
+            message: 'Branch is being created...',
+          })
+        } else {
+          throw branchError
+        }
+      }
+
+      // Try to get the comparison between the branch and main
+      let comparison
+      try {
+        comparison = await octokit.rest.repos.compareCommits({
+          owner,
+          repo,
+          base: 'main',
+          head: task.branchName,
+        })
+      } catch (mainError: unknown) {
+        if (mainError && typeof mainError === 'object' && 'status' in mainError && mainError.status === 404) {
+          // If main branch doesn't exist, try master
+          try {
+            comparison = await octokit.rest.repos.compareCommits({
+              owner,
+              repo,
+              base: 'master',
+              head: task.branchName,
+            })
+          } catch (masterError: unknown) {
+            if (
+              masterError &&
+              typeof masterError === 'object' &&
+              'status' in masterError &&
+              masterError.status === 404
+            ) {
+              // Neither main nor master exists, or head branch doesn't exist
+              console.log(`Could not compare branches for ${task.branchName}`)
+              return NextResponse.json({
+                success: true,
+                files: [],
+                fileTree: {},
+                branchName: task.branchName,
+                message: 'No base branch found for comparison',
+              })
+            } else {
+              throw masterError
+            }
+          }
+        } else {
+          throw mainError
+        }
+      }
+
+      // Convert GitHub API response to our FileChange format
+      files =
+        comparison.data.files?.map((file) => ({
+          filename: file.filename,
+          status: file.status as 'added' | 'modified' | 'deleted' | 'renamed',
+          additions: file.additions || 0,
+          deletions: file.deletions || 0,
+          changes: file.changes || 0,
+        })) || []
+
+      console.log(`Found ${files.length} changed files in branch ${task.branchName}`)
+    } catch (error: unknown) {
+      console.error('Error fetching file changes from GitHub:', error)
+
+      // If it's a 404 error, return empty results instead of failing
+      if (error && typeof error === 'object' && 'status' in error && error.status === 404) {
+        console.log(`Branch or repository not found, returning empty file list`)
+        return NextResponse.json({
+          success: true,
+          files: [],
+          fileTree: {},
+          branchName: task.branchName,
+          message: 'Branch not found or still being created',
+        })
+      }
+
+      return NextResponse.json(
+        {
+          success: false,
+          error: 'Failed to fetch file changes from GitHub',
+        },
+        { status: 500 },
+      )
+    }
+
+    // Build file tree from files
+    const fileTree: { [key: string]: FileTreeNode } = {}
+
+    for (const file of files) {
+      addToFileTree(fileTree, file.filename, file)
+    }
+
+    return NextResponse.json({
+      success: true,
+      files,
+      fileTree,
+      branchName: task.branchName,
+    })
+  } catch (error) {
+    console.error('Error fetching task files:', error)
+    return NextResponse.json({ success: false, error: 'Failed to fetch task files' }, { status: 500 })
+  }
+}
+
+function addToFileTree(tree: { [key: string]: FileTreeNode }, filename: string, fileObj: FileChange) {
+  const parts = filename.split('/')
+  let currentLevel = tree
+
+  for (let i = 0; i < parts.length; i++) {
+    const part = parts[i]
+    const isLastPart = i === parts.length - 1
+
+    if (isLastPart) {
+      // It's a file
+      currentLevel[part] = {
+        type: 'file',
+        filename: fileObj.filename,
+        status: fileObj.status,
+        additions: fileObj.additions,
+        deletions: fileObj.deletions,
+        changes: fileObj.changes,
+      }
+    } else {
+      // It's a directory
+      if (!currentLevel[part]) {
+        currentLevel[part] = {
+          type: 'directory',
+          children: {},
+        }
+      }
+      currentLevel = currentLevel[part].children!
+    }
+  }
+}
diff --git a/components/app-layout.tsx b/components/app-layout.tsx
index 51acd2d3..97418e0c 100644
--- a/components/app-layout.tsx
+++ b/components/app-layout.tsx
@@ -21,6 +21,7 @@ interface TasksContextType {
   refreshTasks: () => Promise<void>
   toggleSidebar: () => void
   isSidebarOpen: boolean
+  isSidebarResizing: boolean
   addTaskOptimistically: (taskData: {
     prompt: string
     repoUrl: string
@@ -265,7 +266,15 @@ export function AppLayout({ children, initialSidebarWidth, initialSidebarOpen }:
   }, [isResizing])
 
   return (
-    <TasksContext.Provider value={{ refreshTasks: fetchTasks, toggleSidebar, isSidebarOpen, addTaskOptimistically }}>
+    <TasksContext.Provider
+      value={{
+        refreshTasks: fetchTasks,
+        toggleSidebar,
+        isSidebarOpen,
+        isSidebarResizing: isResizing,
+        addTaskOptimistically,
+      }}
+    >
       <ConnectorsProvider>
         <div
           className="h-screen flex relative"
@@ -309,7 +318,7 @@ export function AppLayout({ children, initialSidebarWidth, initialSidebarOpen }:
           {/* Resize Handle - Desktop Only, when sidebar is open */}
           <div
             className={`
-            hidden lg:block fixed inset-y-0 cursor-col-resize group z-41 hover:bg-primary/20
+            hidden lg:block fixed inset-y-0 cursor-col-resize group z-50 hover:bg-primary/20
             ${isResizing ? '' : 'transition-all duration-300 ease-in-out'}
             ${isSidebarOpen ? 'w-1 opacity-100' : 'w-0 opacity-0'}
           `}
diff --git a/components/file-browser.tsx b/components/file-browser.tsx
new file mode 100644
index 00000000..d2b067ff
--- /dev/null
+++ b/components/file-browser.tsx
@@ -0,0 +1,208 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { File, Folder, FolderOpen, Clock, GitBranch } from 'lucide-react'
+
+interface FileChange {
+  filename: string
+  status: 'added' | 'modified' | 'deleted' | 'renamed'
+  additions: number
+  deletions: number
+  changes: number
+}
+
+interface FileTreeNode {
+  type: 'file' | 'directory'
+  filename?: string
+  status?: string
+  additions?: number
+  deletions?: number
+  changes?: number
+  children?: { [key: string]: FileTreeNode }
+}
+
+interface FileBrowserProps {
+  taskId: string
+  branchName?: string | null
+  onFileSelect?: (filename: string) => void
+  onFilesLoaded?: (filenames: string[]) => void
+  selectedFile?: string
+}
+
+export function FileBrowser({ taskId, branchName, onFileSelect, onFilesLoaded, selectedFile }: FileBrowserProps) {
+  const [files, setFiles] = useState<FileChange[]>([])
+  const [fileTree, setFileTree] = useState<{ [key: string]: FileTreeNode }>({})
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [expandedFolders, setExpandedFolders] = useState<Set<string>>(new Set())
+
+  useEffect(() => {
+    if (branchName) {
+      fetchBranchFiles()
+    }
+  }, [taskId, branchName])
+
+  // Helper function to recursively collect all folder paths
+  const getAllFolderPaths = (tree: { [key: string]: FileTreeNode }, basePath = ''): string[] => {
+    const paths: string[] = []
+
+    Object.entries(tree).forEach(([name, node]) => {
+      const fullPath = basePath ? `${basePath}/${name}` : name
+
+      if (node.type === 'directory') {
+        paths.push(fullPath)
+        if (node.children) {
+          paths.push(...getAllFolderPaths(node.children, fullPath))
+        }
+      }
+    })
+
+    return paths
+  }
+
+  const fetchBranchFiles = async () => {
+    if (!branchName) return
+
+    setLoading(true)
+    setError(null)
+
+    try {
+      const response = await fetch(`/api/tasks/${taskId}/files`)
+      const result = await response.json()
+
+      if (result.success) {
+        const fetchedFiles = result.files || []
+        setFiles(fetchedFiles)
+        const fileTree = result.fileTree || {}
+        setFileTree(fileTree)
+
+        // Expand all folders by default
+        const allFolderPaths = getAllFolderPaths(fileTree)
+        setExpandedFolders(new Set(allFolderPaths))
+
+        // Notify parent component with list of filenames
+        if (onFilesLoaded && fetchedFiles.length > 0) {
+          onFilesLoaded(fetchedFiles.map((f: FileChange) => f.filename))
+        }
+      } else {
+        setError(result.error || 'Failed to fetch files')
+      }
+    } catch (err) {
+      setError('Failed to fetch branch files')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const toggleFolder = (path: string) => {
+    const newExpanded = new Set(expandedFolders)
+    if (newExpanded.has(path)) {
+      newExpanded.delete(path)
+    } else {
+      newExpanded.add(path)
+    }
+    setExpandedFolders(newExpanded)
+  }
+
+  const renderFileTree = (tree: { [key: string]: FileTreeNode }, path = '') => {
+    // Sort entries: directories first, then files, both alphabetically
+    const sortedEntries = Object.entries(tree).sort(([nameA, nodeA], [nameB, nodeB]) => {
+      // If one is a directory and the other is a file, directory comes first
+      if (nodeA.type === 'directory' && nodeB.type === 'file') return -1
+      if (nodeA.type === 'file' && nodeB.type === 'directory') return 1
+      // If both are the same type, sort alphabetically (case-insensitive)
+      return nameA.toLowerCase().localeCompare(nameB.toLowerCase())
+    })
+
+    return sortedEntries.map(([name, node]) => {
+      const fullPath = path ? `${path}/${name}` : name
+
+      if (node.type === 'directory') {
+        const isExpanded = expandedFolders.has(fullPath)
+        return (
+          <div key={fullPath}>
+            <div
+              className="flex items-center gap-2 px-3 py-1.5 hover:bg-card/50 cursor-pointer rounded-sm"
+              onClick={() => toggleFolder(fullPath)}
+            >
+              {isExpanded ? (
+                <FolderOpen className="w-4 h-4 text-blue-500 flex-shrink-0" />
+              ) : (
+                <Folder className="w-4 h-4 text-blue-500 flex-shrink-0" />
+              )}
+              <span className="text-sm font-medium">{name}</span>
+            </div>
+            {isExpanded && node.children && <div className="ml-4">{renderFileTree(node.children, fullPath)}</div>}
+          </div>
+        )
+      } else {
+        // File node
+        const isSelected = selectedFile === node.filename
+        return (
+          <div
+            key={fullPath}
+            className={`flex items-center gap-2 px-3 py-1.5 cursor-pointer rounded-sm ${
+              isSelected ? 'bg-card' : 'hover:bg-card/50'
+            }`}
+            onClick={() => onFileSelect?.(node.filename!)}
+          >
+            <File className="w-4 h-4 text-muted-foreground flex-shrink-0" />
+            <span className="text-sm flex-1 truncate">{name}</span>
+            {node.changes && node.changes > 0 && (
+              <div className="flex items-center gap-1 text-xs flex-shrink-0">
+                {node.additions && node.additions > 0 && <span className="text-green-600">+{node.additions}</span>}
+                {node.deletions && node.deletions > 0 && <span className="text-red-600">-{node.deletions}</span>}
+              </div>
+            )}
+          </div>
+        )
+      }
+    })
+  }
+
+  if (!branchName) {
+    return (
+      <div className="flex flex-col h-full">
+        <div className="p-4 border-b">
+          <h3 className="text-lg font-semibold">Files</h3>
+          <p className="text-sm text-muted-foreground">Task in progress</p>
+        </div>
+
+        <div className="flex-1 flex items-center justify-center p-6">
+          <div className="text-center space-y-4">
+            <div className="flex justify-center">
+              <div className="flex items-center gap-2 text-amber-500">
+                <Clock className="w-6 h-6" />
+                <GitBranch className="w-6 h-6" />
+              </div>
+            </div>
+            <div className="space-y-2">
+              <h4 className="font-medium">Branch Not Created Yet</h4>
+              <p className="text-sm text-muted-foreground max-w-xs">
+                The coding agent is still working on this task. File changes will appear here once the agent creates a
+                branch.
+              </p>
+            </div>
+            <div className="text-xs text-muted-foreground">Check the logs for progress updates</div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex-1 overflow-y-auto">
+        {loading ? (
+          <div className="p-4 text-center text-sm text-muted-foreground">Loading files...</div>
+        ) : error ? (
+          <div className="p-4 text-center text-sm text-destructive">{error}</div>
+        ) : files.length === 0 ? (
+          <div className="p-4 text-center text-sm text-muted-foreground">No files changed</div>
+        ) : (
+          <div>{renderFileTree(fileTree)}</div>
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/components/file-diff-viewer.tsx b/components/file-diff-viewer.tsx
new file mode 100644
index 00000000..391c2f47
--- /dev/null
+++ b/components/file-diff-viewer.tsx
@@ -0,0 +1,214 @@
+'use client'
+
+import { useEffect, useState, useMemo } from 'react'
+import { useParams } from 'next/navigation'
+import { DiffView, DiffModeEnum } from '@git-diff-view/react'
+import { generateDiffFile } from '@git-diff-view/file'
+import '@git-diff-view/react/styles/diff-view-pure.css'
+
+interface DiffData {
+  filename: string
+  oldContent: string
+  newContent: string
+  language: string
+}
+
+interface FileDiffViewerProps {
+  selectedFile?: string
+  diffsCache?: Record<string, DiffData>
+  isInitialLoading?: boolean
+}
+
+export function FileDiffViewer({ selectedFile, diffsCache, isInitialLoading }: FileDiffViewerProps) {
+  const params = useParams()
+  const taskId = params.taskId as string
+
+  const [diffData, setDiffData] = useState<DiffData | null>(null)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [theme, setTheme] = useState<'light' | 'dark'>('light')
+  const diffViewMode = DiffModeEnum.Unified // Always use unified view
+  const [mounted, setMounted] = useState(false)
+
+  // Detect theme from parent window or system - only on client
+  useEffect(() => {
+    setMounted(true)
+
+    const detectTheme = () => {
+      try {
+        const parentHasDarkClass = document.documentElement.classList.contains('dark')
+        const parentMediaQuery = window.matchMedia('(prefers-color-scheme: dark)').matches
+        const parentTheme = parentHasDarkClass || parentMediaQuery ? 'dark' : 'light'
+        setTheme(parentTheme)
+      } catch (e) {
+        const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+        setTheme(systemTheme)
+      }
+    }
+
+    detectTheme()
+
+    // Listen for theme changes
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+    const handleThemeChange = () => detectTheme()
+    mediaQuery.addEventListener('change', handleThemeChange)
+
+    // Watch for class changes on document element
+    const observer = new MutationObserver(handleThemeChange)
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class'],
+    })
+
+    return () => {
+      mediaQuery.removeEventListener('change', handleThemeChange)
+      observer.disconnect()
+    }
+  }, [])
+
+  useEffect(() => {
+    const fetchDiffData = async () => {
+      if (!selectedFile || !taskId) {
+        setDiffData(null)
+        setError(null)
+        setLoading(false)
+        return
+      }
+
+      // Check if we have cached data first
+      if (diffsCache && diffsCache[selectedFile]) {
+        setDiffData(diffsCache[selectedFile])
+        setError(null)
+        setLoading(false)
+        return
+      }
+
+      setLoading(true)
+      setError(null)
+
+      try {
+        const params = new URLSearchParams()
+        params.set('filename', selectedFile)
+
+        const response = await fetch(`/api/tasks/${taskId}/diff?${params.toString()}`)
+        const result = await response.json()
+
+        if (!response.ok || !result.success) {
+          throw new Error(result.error || 'Failed to fetch diff data')
+        }
+
+        setDiffData(result.data)
+      } catch (err) {
+        console.error('Error fetching diff data:', err)
+        setError(err instanceof Error ? err.message : 'Failed to fetch diff data')
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    fetchDiffData()
+  }, [taskId, selectedFile, diffsCache])
+
+  const diffFile = useMemo(() => {
+    if (!diffData) return null
+
+    try {
+      const file = generateDiffFile(
+        diffData.filename,
+        diffData.oldContent,
+        diffData.filename,
+        diffData.newContent,
+        diffData.language,
+        diffData.language,
+      )
+
+      file.initTheme(mounted ? theme : 'light')
+      file.init()
+      file.buildSplitDiffLines()
+      file.buildUnifiedDiffLines()
+
+      return file
+    } catch (error) {
+      console.error('Error generating diff file:', error)
+      return null
+    }
+  }, [diffData, mounted, theme])
+
+  if (!selectedFile) {
+    // Don't show "No file selected" during initial loading
+    if (isInitialLoading) {
+      return null
+    }
+
+    return (
+      <div className="flex items-center justify-center h-full text-center text-muted-foreground">
+        <div>
+          <div className="mb-2">No file selected</div>
+          <div className="text-sm">Click on a file in the file tree to view its diff</div>
+        </div>
+      </div>
+    )
+  }
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-2"></div>
+          <p className="text-sm text-muted-foreground">Loading diff...</p>
+        </div>
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <div className="text-center">
+          <p className="text-destructive mb-2 text-sm">{error}</p>
+          <p className="text-xs text-muted-foreground">Unable to load diff for {selectedFile}</p>
+        </div>
+      </div>
+    )
+  }
+
+  if (!diffData) {
+    return null
+  }
+
+  if (!diffFile) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <div className="text-center">
+          <p className="text-destructive mb-2 text-sm">Error generating diff</p>
+        </div>
+      </div>
+    )
+  }
+
+  try {
+    return (
+      <div className="git-diff-view-container">
+        <DiffView
+          key={`${selectedFile}-${diffData?.filename}`}
+          diffFile={diffFile}
+          diffViewMode={diffViewMode}
+          diffViewTheme={mounted ? theme : 'light'}
+          diffViewHighlight={true}
+          diffViewWrap={true}
+          diffViewFontSize={12}
+        />
+      </div>
+    )
+  } catch (error) {
+    console.error('Error rendering diff:', error)
+    return (
+      <div className="flex items-center justify-center py-12">
+        <div className="text-center">
+          <p className="text-destructive mb-2 text-sm">Error rendering diff</p>
+          <p className="text-xs text-muted-foreground">{error instanceof Error ? error.message : 'Unknown error'}</p>
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/components/home-page-content.tsx b/components/home-page-content.tsx
index fa4689d5..ad34eebb 100644
--- a/components/home-page-content.tsx
+++ b/components/home-page-content.tsx
@@ -91,8 +91,8 @@ export function HomePageContent({
   }
 
   return (
-    <div className="flex-1 bg-background">
-      <div className="mx-auto p-3">
+    <div className="flex-1 bg-background flex flex-col">
+      <div className="p-3">
         <HomePageHeader
           selectedOwner={selectedOwner}
           selectedRepo={selectedRepo}
@@ -101,17 +101,15 @@ export function HomePageContent({
         />
       </div>
 
-      <div className="fixed inset-0 flex items-center justify-center pointer-events-none">
-        <div className="pointer-events-auto">
-          <TaskForm
-            onSubmit={handleTaskSubmit}
-            isSubmitting={isSubmitting}
-            selectedOwner={selectedOwner}
-            selectedRepo={selectedRepo}
-            initialInstallDependencies={initialInstallDependencies}
-            initialMaxDuration={initialMaxDuration}
-          />
-        </div>
+      <div className="flex-1 flex items-center justify-center">
+        <TaskForm
+          onSubmit={handleTaskSubmit}
+          isSubmitting={isSubmitting}
+          selectedOwner={selectedOwner}
+          selectedRepo={selectedRepo}
+          initialInstallDependencies={initialInstallDependencies}
+          initialMaxDuration={initialMaxDuration}
+        />
       </div>
     </div>
   )
diff --git a/components/logs-pane.tsx b/components/logs-pane.tsx
new file mode 100644
index 00000000..90a6fe45
--- /dev/null
+++ b/components/logs-pane.tsx
@@ -0,0 +1,217 @@
+'use client'
+
+import { Task, LogEntry } from '@/lib/db/schema'
+import { Button } from '@/components/ui/button'
+import { Copy, Check, ChevronDown, ChevronUp } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { useState, useEffect, useRef } from 'react'
+import { toast } from 'sonner'
+import { useTasks } from '@/components/app-layout'
+import { getLogsPaneHeight, setLogsPaneHeight, getLogsPaneCollapsed, setLogsPaneCollapsed } from '@/lib/utils/cookies'
+
+interface LogsPaneProps {
+  task: Task
+  onHeightChange?: (height: number) => void
+}
+
+export function LogsPane({ task, onHeightChange }: LogsPaneProps) {
+  const [copiedLogs, setCopiedLogs] = useState(false)
+  const [isCollapsed, setIsCollapsedState] = useState(true)
+  const [paneHeight, setPaneHeight] = useState(200)
+  const [isResizing, setIsResizing] = useState(false)
+  const logsContainerRef = useRef<HTMLDivElement>(null)
+  const prevLogsLengthRef = useRef<number>(0)
+  const hasInitialScrolled = useRef<boolean>(false)
+  const { isSidebarOpen, isSidebarResizing } = useTasks()
+
+  // Initialize height and collapsed state from cookies on mount
+  useEffect(() => {
+    const savedHeight = getLogsPaneHeight()
+    const savedCollapsed = getLogsPaneCollapsed()
+    setPaneHeight(savedHeight)
+    setIsCollapsedState(savedCollapsed)
+    // Notify parent of initial height
+    onHeightChange?.(savedCollapsed ? 40 : savedHeight)
+  }, [onHeightChange])
+
+  // Wrapper to update both state and cookie
+  const setIsCollapsed = (collapsed: boolean) => {
+    setIsCollapsedState(collapsed)
+    setLogsPaneCollapsed(collapsed)
+    // Notify parent of height change (collapsed = ~40px, expanded = paneHeight)
+    onHeightChange?.(collapsed ? 40 : paneHeight)
+  }
+
+  // Notify parent when paneHeight changes
+  useEffect(() => {
+    if (!isCollapsed) {
+      onHeightChange?.(paneHeight)
+    }
+  }, [paneHeight, isCollapsed, onHeightChange])
+
+  // Handle resize
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!isResizing) return
+
+      // Calculate new height (resize from top, so subtract from window height)
+      const newHeight = window.innerHeight - e.clientY
+      const minHeight = 100
+      const maxHeight = 600
+
+      if (newHeight >= minHeight && newHeight <= maxHeight) {
+        setPaneHeight(newHeight)
+        setLogsPaneHeight(newHeight)
+      }
+    }
+
+    const handleMouseUp = () => {
+      setIsResizing(false)
+    }
+
+    if (isResizing) {
+      document.addEventListener('mousemove', handleMouseMove)
+      document.addEventListener('mouseup', handleMouseUp)
+      document.body.style.cursor = 'row-resize'
+      document.body.style.userSelect = 'none'
+    }
+
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove)
+      document.removeEventListener('mouseup', handleMouseUp)
+      document.body.style.cursor = ''
+      document.body.style.userSelect = ''
+    }
+  }, [isResizing])
+
+  // Scroll to bottom on initial load
+  useEffect(() => {
+    if (task.logs && task.logs.length > 0 && !hasInitialScrolled.current && logsContainerRef.current) {
+      setTimeout(() => {
+        if (logsContainerRef.current) {
+          logsContainerRef.current.scrollTop = logsContainerRef.current.scrollHeight
+          hasInitialScrolled.current = true
+        }
+      }, 100)
+    }
+  }, [task.logs])
+
+  // Auto-scroll to bottom when new logs are added
+  useEffect(() => {
+    const currentLogsLength = task.logs?.length || 0
+
+    if (currentLogsLength > prevLogsLengthRef.current && prevLogsLengthRef.current > 0) {
+      if (logsContainerRef.current) {
+        logsContainerRef.current.scrollTop = logsContainerRef.current.scrollHeight
+      }
+    }
+
+    prevLogsLengthRef.current = currentLogsLength
+  }, [task.logs])
+
+  const copyLogsToClipboard = async () => {
+    try {
+      const logsText = (task.logs || []).map((log) => log.message).join('\n')
+
+      await navigator.clipboard.writeText(logsText)
+      setCopiedLogs(true)
+      setTimeout(() => setCopiedLogs(false), 2000)
+    } catch {
+      toast.error('Failed to copy logs to clipboard')
+    }
+  }
+
+  if (!task.logs || task.logs.length === 0) {
+    return null
+  }
+
+  const handleMouseDown = (e: React.MouseEvent) => {
+    e.preventDefault()
+    setIsResizing(true)
+  }
+
+  return (
+    <div
+      className={`fixed bottom-0 right-0 z-10 bg-background ${isResizing || isSidebarResizing ? '' : 'transition-all duration-300 ease-in-out'}`}
+      style={{
+        left: isSidebarOpen ? 'var(--sidebar-width)' : '0px',
+        height: isCollapsed ? 'auto' : `${paneHeight}px`,
+      }}
+    >
+      {/* Resize Handle */}
+      {!isCollapsed && (
+        <div
+          className={`absolute top-0 left-0 right-0 h-1 cursor-row-resize group hover:bg-primary/20 ${isResizing ? '' : 'transition-colors'}`}
+          onMouseDown={handleMouseDown}
+        >
+          <div className="absolute inset-x-0 top-0 h-2 -mt-0.5" />
+          <div className="absolute inset-x-0 top-0 h-0.5 bg-primary/50 opacity-0 group-hover:opacity-100 transition-opacity" />
+        </div>
+      )}
+
+      <div className="flex flex-col h-full border-t">
+        <div className="border-b flex items-center justify-between flex-shrink-0">
+          <div
+            className="flex items-center gap-1.5 py-1.5 px-3 flex-1 cursor-pointer hover:bg-accent/50"
+            onClick={() => setIsCollapsed(!isCollapsed)}
+          >
+            <div className="h-5 w-5 flex items-center justify-center">
+              {isCollapsed ? <ChevronUp className="h-3.5 w-3.5" /> : <ChevronDown className="h-3.5 w-3.5" />}
+            </div>
+            <span className="text-xs font-medium uppercase tracking-wide text-muted-foreground">Logs</span>
+          </div>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={copyLogsToClipboard}
+            className="h-5 w-5 p-0 hover:bg-accent mr-3"
+            title="Copy logs to clipboard"
+          >
+            {copiedLogs ? <Check className="h-3 w-3 text-green-600" /> : <Copy className="h-3 w-3" />}
+          </Button>
+        </div>
+        {!isCollapsed && (
+          <div
+            ref={logsContainerRef}
+            className="bg-black text-green-400 p-2 font-mono text-xs flex-1 overflow-y-auto leading-relaxed"
+          >
+            {(task.logs || []).map((log, index) => {
+              const getLogColor = (logType: LogEntry['type']) => {
+                switch (logType) {
+                  case 'command':
+                    return 'text-gray-400'
+                  case 'error':
+                    return 'text-red-400'
+                  case 'success':
+                    return 'text-green-400'
+                  case 'info':
+                  default:
+                    return 'text-white'
+                }
+              }
+
+              const formatTime = (timestamp: Date) => {
+                return new Date(timestamp).toLocaleTimeString('en-US', {
+                  hour12: false,
+                  hour: '2-digit',
+                  minute: '2-digit',
+                  second: '2-digit',
+                  fractionalSecondDigits: 3,
+                })
+              }
+
+              return (
+                <div key={index} className={cn('flex gap-1.5 leading-tight', getLogColor(log.type))}>
+                  <span className="text-gray-500 text-[10px] shrink-0 opacity-60">
+                    [{formatTime(log.timestamp || new Date())}]
+                  </span>
+                  <span className="flex-1">{log.message}</span>
+                </div>
+              )
+            })}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/components/page-header.tsx b/components/page-header.tsx
index 3eb36160..eadc32af 100644
--- a/components/page-header.tsx
+++ b/components/page-header.tsx
@@ -9,6 +9,7 @@ interface PageHeaderProps {
   onToggleMobileMenu?: () => void
   actions?: React.ReactNode
   leftActions?: React.ReactNode
+  showPlatformName?: boolean
 }
 
 export function PageHeader({
@@ -17,15 +18,21 @@ export function PageHeader({
   onToggleMobileMenu,
   actions,
   leftActions,
+  showPlatformName = false,
 }: PageHeaderProps) {
   return (
-    <div className="relative p-3">
+    <div className="relative px-3 pt-3">
       {/* Left side - Menu Button and Left Actions */}
       <div className="absolute top-0 left-0 z-10 flex items-center gap-2">
         {showMobileMenu && (
-          <Button onClick={onToggleMobileMenu} variant="ghost" size="sm" className="h-8 w-8 p-0">
-            <Menu className="h-4 w-4" />
-          </Button>
+          <>
+            <Button onClick={onToggleMobileMenu} variant="ghost" size="sm" className="h-8 w-8 p-0">
+              <Menu className="h-4 w-4" />
+            </Button>
+            {showPlatformName && (
+              <span className="text-sm font-semibold text-muted-foreground">Coding Agent Template</span>
+            )}
+          </>
         )}
         {leftActions}
       </div>
diff --git a/components/task-actions.tsx b/components/task-actions.tsx
index 25fa32a9..45ed9a97 100644
--- a/components/task-actions.tsx
+++ b/components/task-actions.tsx
@@ -51,13 +51,13 @@ const AGENT_MODELS = {
     { value: 'openai/gpt-4.1', label: 'GPT-4.1' },
   ],
   cursor: [
+    { value: 'auto', label: 'Auto' },
+    { value: 'sonnet-4.5', label: 'Sonnet 4.5' },
+    { value: 'sonnet-4.5-thinking', label: 'Sonnet 4.5 Thinking' },
     { value: 'gpt-5', label: 'GPT-5' },
-    { value: 'gpt-5-mini', label: 'GPT-5 Mini' },
-    { value: 'gpt-5-nano', label: 'GPT-5 Nano' },
-    { value: 'gpt-4.1', label: 'GPT-4.1' },
-    { value: 'claude-sonnet-4-5-20250929', label: 'Sonnet 4.5' },
-    { value: 'claude-sonnet-4-20250514', label: 'Sonnet 4' },
-    { value: 'claude-opus-4-1-20250805', label: 'Opus 4.1' },
+    { value: 'gpt-5-codex', label: 'GPT-5 Codex' },
+    { value: 'opus-4.1', label: 'Opus 4.1' },
+    { value: 'grok', label: 'Grok' },
   ],
   gemini: [
     { value: 'gemini-2.5-pro', label: 'Gemini 2.5 Pro' },
@@ -78,7 +78,7 @@ const AGENT_MODELS = {
 const DEFAULT_MODELS = {
   claude: 'claude-sonnet-4-5-20250929',
   codex: 'openai/gpt-5',
-  cursor: 'gpt-5',
+  cursor: 'auto',
   gemini: 'gemini-2.5-pro',
   opencode: 'gpt-5',
 } as const
diff --git a/components/task-details.tsx b/components/task-details.tsx
index f7a8a851..62c2dc41 100644
--- a/components/task-details.tsx
+++ b/components/task-details.tsx
@@ -1,15 +1,17 @@
 'use client'
 
-import { Task, LogEntry, Connector } from '@/lib/db/schema'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Task, Connector } from '@/lib/db/schema'
 import { Button } from '@/components/ui/button'
-import { ExternalLink, GitBranch, Clock, CheckCircle, AlertCircle, Loader2, Copy, Check, Server } from 'lucide-react'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
+import { GitBranch, CheckCircle, AlertCircle, Loader2, Copy, Check, Server, Cable, Square } from 'lucide-react'
 import { cn } from '@/lib/utils'
-import { useState, useEffect, useRef } from 'react'
+import { useState, useEffect } from 'react'
 import { toast } from 'sonner'
-import { Claude, Codex, Cursor, OpenCode } from '@/components/logos'
+import { Claude, Codex, Cursor, Gemini, OpenCode } from '@/components/logos'
 import { useTasks } from '@/components/app-layout'
 import { TaskDuration } from '@/components/task-duration'
+import { FileBrowser } from '@/components/file-browser'
+import { FileDiffViewer } from '@/components/file-diff-viewer'
 import BrowserbaseIcon from '@/components/icons/browserbase-icon'
 import Context7Icon from '@/components/icons/context7-icon'
 import ConvexIcon from '@/components/icons/convex-icon'
@@ -24,16 +26,22 @@ interface TaskDetailsProps {
   task: Task
 }
 
+interface DiffData {
+  filename: string
+  oldContent: string
+  newContent: string
+  language: string
+}
+
 export function TaskDetails({ task }: TaskDetailsProps) {
   const [copiedPrompt, setCopiedPrompt] = useState(false)
-  const [copiedLogs, setCopiedLogs] = useState(false)
   const [isStopping, setIsStopping] = useState(false)
   const [optimisticStatus, setOptimisticStatus] = useState<Task['status'] | null>(null)
   const [mcpServers, setMcpServers] = useState<Connector[]>([])
   const [loadingMcpServers, setLoadingMcpServers] = useState(false)
-  const logsContainerRef = useRef<HTMLDivElement>(null)
-  const prevLogsLengthRef = useRef<number>(0)
-  const hasInitialScrolled = useRef<boolean>(false)
+  const [selectedFile, setSelectedFile] = useState<string | undefined>(undefined)
+  const [diffsCache, setDiffsCache] = useState<Record<string, DiffData>>({})
+  const [loadingDiffs, setLoadingDiffs] = useState(false)
   const { refreshTasks } = useTasks()
 
   // Helper function to format dates - show only time if same day as today
@@ -68,6 +76,8 @@ export function TaskDetails({ task }: TaskDetailsProps) {
         return Codex
       case 'cursor':
         return Cursor
+      case 'gemini':
+        return Gemini
       case 'opencode':
         return OpenCode
       default:
@@ -92,13 +102,12 @@ export function TaskDetails({ task }: TaskDetailsProps) {
     ],
     cursor: [
       { value: 'auto', label: 'Auto' },
+      { value: 'sonnet-4.5', label: 'Sonnet 4.5' },
+      { value: 'sonnet-4.5-thinking', label: 'Sonnet 4.5 Thinking' },
       { value: 'gpt-5', label: 'GPT-5' },
-      { value: 'gpt-5-mini', label: 'GPT-5 mini' },
-      { value: 'gpt-5-nano', label: 'GPT-5 nano' },
-      { value: 'gpt-4.1', label: 'GPT-4.1' },
-      { value: 'claude-sonnet-4-5-20250929', label: 'Sonnet 4.5' },
-      { value: 'claude-sonnet-4-20250514', label: 'Sonnet 4' },
-      { value: 'claude-opus-4-1-20250805', label: 'Opus 4.1' },
+      { value: 'gpt-5-codex', label: 'GPT-5 Codex' },
+      { value: 'opus-4.1', label: 'Opus 4.1' },
+      { value: 'grok', label: 'Grok' },
     ],
     gemini: [
       { value: 'gemini-2.5-pro', label: 'Gemini 2.5 Pro' },
@@ -193,33 +202,39 @@ export function TaskDetails({ task }: TaskDetailsProps) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [JSON.stringify(task.mcpServerIds)])
 
-  // Scroll to bottom on initial load
-  useEffect(() => {
-    if (task.logs && task.logs.length > 0 && !hasInitialScrolled.current && logsContainerRef.current) {
-      // Use setTimeout to ensure the DOM is fully rendered
-      setTimeout(() => {
-        if (logsContainerRef.current) {
-          logsContainerRef.current.scrollTop = logsContainerRef.current.scrollHeight
-          hasInitialScrolled.current = true
-        }
-      }, 100)
-    }
-  }, [task.logs])
+  // Fetch all diffs when files list changes
+  const fetchAllDiffs = async (filesList: string[]) => {
+    if (!filesList.length || loadingDiffs) return
 
-  // Auto-scroll to bottom when new logs are added (after initial load)
-  useEffect(() => {
-    const currentLogsLength = task.logs?.length || 0
+    setLoadingDiffs(true)
+    const newDiffsCache: Record<string, DiffData> = {}
 
-    // Only scroll if new logs were added (not on initial load)
-    if (currentLogsLength > prevLogsLengthRef.current && prevLogsLengthRef.current > 0) {
-      if (logsContainerRef.current) {
-        logsContainerRef.current.scrollTop = logsContainerRef.current.scrollHeight
-      }
-    }
+    try {
+      // Fetch all diffs in parallel
+      const diffPromises = filesList.map(async (filename) => {
+        try {
+          const params = new URLSearchParams()
+          params.set('filename', filename)
 
-    // Update the previous logs length
-    prevLogsLengthRef.current = currentLogsLength
-  }, [task.logs])
+          const response = await fetch(`/api/tasks/${task.id}/diff?${params.toString()}`)
+          const result = await response.json()
+
+          if (response.ok && result.success) {
+            newDiffsCache[filename] = result.data
+          }
+        } catch (err) {
+          console.error(`Error fetching diff for ${filename}:`, err)
+        }
+      })
+
+      await Promise.all(diffPromises)
+      setDiffsCache(newDiffsCache)
+    } catch (error) {
+      console.error('Error fetching diffs:', error)
+    } finally {
+      setLoadingDiffs(false)
+    }
+  }
 
   const copyPromptToClipboard = async (text: string) => {
     try {
@@ -232,19 +247,6 @@ export function TaskDetails({ task }: TaskDetailsProps) {
     }
   }
 
-  const copyLogsToClipboard = async () => {
-    try {
-      const logsText = (task.logs || []).map((log) => log.message).join('\n')
-
-      await navigator.clipboard.writeText(logsText)
-      setCopiedLogs(true)
-      toast.success('Logs copied to clipboard!')
-      setTimeout(() => setCopiedLogs(false), 2000)
-    } catch {
-      toast.error('Failed to copy logs to clipboard')
-    }
-  }
-
   const handleStopTask = async () => {
     setIsStopping(true)
     // Optimistically update the status to 'stopped'
@@ -281,7 +283,7 @@ export function TaskDetails({ task }: TaskDetailsProps) {
   const getStatusIcon = (status: Task['status']) => {
     switch (status) {
       case 'pending':
-        return <Clock className="h-4 w-4" />
+        return <AlertCircle className="h-4 w-4" />
       case 'processing':
         return <Loader2 className="h-4 w-4 animate-spin" />
       case 'completed':
@@ -291,24 +293,7 @@ export function TaskDetails({ task }: TaskDetailsProps) {
       case 'stopped':
         return <AlertCircle className="h-4 w-4" />
       default:
-        return <Clock className="h-4 w-4" />
-    }
-  }
-
-  const getStatusText = (status: Task['status']) => {
-    switch (status) {
-      case 'pending':
-        return 'Waiting to start'
-      case 'processing':
-        return 'In progress'
-      case 'completed':
-        return 'Completed'
-      case 'error':
-        return 'Failed'
-      case 'stopped':
-        return 'Stopped'
-      default:
-        return 'Unknown'
+        return <AlertCircle className="h-4 w-4" />
     }
   }
 
@@ -330,219 +315,182 @@ export function TaskDetails({ task }: TaskDetailsProps) {
   }
 
   return (
-    <div className="flex-1 p-6 overflow-y-auto">
-      <div className="max-w-4xl mx-auto space-y-6">
-        {/* Task Details */}
-        <Card>
-          <CardContent className="space-y-4">
-            {/* Status, Created, Completed, and Duration */}
-            <div className="grid grid-cols-2 gap-4 lg:grid-cols-4">
-              <div>
-                <h4 className="font-medium mb-1">Status</h4>
-                <div className={cn('flex items-center gap-2 text-sm', getStatusColor(currentStatus))}>
+    <div className="flex flex-col flex-1 min-h-0">
+      {/* Overview Section */}
+      <div className="space-y-3 pb-6 border-b pl-6 pr-3 flex-shrink-0">
+        {/* Prompt */}
+        <div className="flex items-center gap-2">
+          <p className="text-2xl flex-1 truncate">{task.prompt}</p>
+          {currentStatus === 'processing' && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleStopTask}
+              disabled={isStopping}
+              className="h-8 w-8 p-0 flex-shrink-0"
+              title="Stop task"
+            >
+              <Square className="h-4 w-4" />
+            </Button>
+          )}
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => copyPromptToClipboard(task.prompt)}
+            className="h-8 w-8 p-0 flex-shrink-0"
+            title="Copy prompt to clipboard"
+          >
+            {copiedPrompt ? <Check className="h-4 w-4 text-green-600" /> : <Copy className="h-4 w-4" />}
+          </Button>
+        </div>
+
+        {/* Compact info row */}
+        <div className="flex items-center gap-4 flex-wrap text-sm">
+          {/* Status + Duration */}
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <div className={cn('flex items-center gap-2 cursor-help', getStatusColor(currentStatus))}>
                   {getStatusIcon(currentStatus)}
-                  <span>{getStatusText(currentStatus)}</span>
-                  {currentStatus === 'processing' && (
-                    <Button
-                      variant="default"
-                      size="sm"
-                      onClick={handleStopTask}
-                      disabled={isStopping}
-                      className="h-5 w-5 p-0 rounded-full"
-                      title="Stop task"
-                    >
-                      <div className="h-2.5 w-2.5 bg-current" />
-                    </Button>
-                  )}
+                  <span className="text-muted-foreground">
+                    <TaskDuration task={task} hideTitle={true} />
+                  </span>
+                </div>
+              </TooltipTrigger>
+              <TooltipContent side="bottom" className="space-y-1">
+                <div>
+                  <span className="font-medium">Created:</span>{' '}
+                  <span className="text-muted-foreground">{formatDateTime(new Date(task.createdAt))}</span>
+                </div>
+                <div>
+                  <span className="font-medium">Completed:</span>{' '}
+                  <span className="text-muted-foreground">
+                    {task.completedAt ? formatDateTime(new Date(task.completedAt)) : 'Not completed'}
+                  </span>
                 </div>
-              </div>
-              <div>
-                <h4 className="font-medium mb-1">Created</h4>
-                <p className="text-sm text-muted-foreground">{formatDateTime(new Date(task.createdAt))}</p>
-              </div>
-              <div>
-                <h4 className="font-medium mb-1">Completed</h4>
-                <p className="text-sm text-muted-foreground">
-                  {task.completedAt ? formatDateTime(new Date(task.completedAt)) : 'Not completed'}
-                </p>
-              </div>
-              <TaskDuration task={task} />
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+
+          {/* Repo */}
+          {task.repoUrl && (
+            <div className="flex items-center gap-2">
+              <svg className="h-4 w-4 flex-shrink-0 text-muted-foreground" fill="currentColor" viewBox="0 0 24 24">
+                <path
+                  fillRule="evenodd"
+                  d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
+                  clipRule="evenodd"
+                />
+              </svg>
+              <a
+                href={task.repoUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-muted-foreground hover:text-foreground truncate"
+              >
+                {task.repoUrl.replace('https://github.com/', '').replace('.git', '')}
+              </a>
             </div>
-
-            <div>
-              <div className="flex items-center justify-between mb-2">
-                <h4 className="font-medium">Prompt</h4>
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={() => copyPromptToClipboard(task.prompt)}
-                  className="h-8 w-8 p-0"
-                  title="Copy prompt to clipboard"
+          )}
+
+          {/* Branch */}
+          {task.branchName && (
+            <div className="flex items-center gap-2">
+              <GitBranch className="h-4 w-4 flex-shrink-0 text-muted-foreground" />
+              {task.repoUrl ? (
+                <a
+                  href={`${task.repoUrl.replace('.git', '')}/tree/${task.branchName}`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-muted-foreground hover:text-foreground truncate"
                 >
-                  {copiedPrompt ? <Check className="h-4 w-4 text-green-600" /> : <Copy className="h-4 w-4" />}
-                </Button>
-              </div>
-              <p className="text-sm bg-muted p-3 rounded-md">{task.prompt}</p>
+                  {task.branchName}
+                </a>
+              ) : (
+                <span className="text-muted-foreground truncate">{task.branchName}</span>
+              )}
             </div>
-
-            {(task.selectedAgent || task.selectedModel) && (
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                {task.selectedAgent && (
-                  <div className="min-w-0">
-                    <h4 className="font-medium mb-2">Agent</h4>
-                    <div className="flex items-center gap-2 text-sm">
-                      {(() => {
-                        const AgentLogo = getAgentLogo(task.selectedAgent)
-                        return AgentLogo ? <AgentLogo className="w-4 h-4 flex-shrink-0" /> : null
-                      })()}
-                      <span className="capitalize truncate">{task.selectedAgent}</span>
-                    </div>
-                  </div>
-                )}
-
-                {task.selectedModel && (
-                  <div className="min-w-0">
-                    <h4 className="font-medium mb-2">Model</h4>
-                    <p className="text-sm text-muted-foreground truncate">
-                      {getModelName(task.selectedModel, task.selectedAgent)}
-                    </p>
-                  </div>
-                )}
-              </div>
-            )}
-
-            {(task.repoUrl || task.branchName) && (
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                {task.repoUrl && (
-                  <div className="min-w-0">
-                    <h4 className="font-medium mb-2">Repo</h4>
-                    <div className="flex items-center gap-2 text-sm">
-                      <ExternalLink className="h-4 w-4 flex-shrink-0 text-muted-foreground" />
-                      <a
-                        href={task.repoUrl}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="text-muted-foreground hover:text-foreground truncate"
-                      >
-                        {task.repoUrl.replace('https://github.com/', '').replace('.git', '')}
-                      </a>
-                    </div>
-                  </div>
-                )}
-
-                {task.branchName && (
-                  <div className="min-w-0">
-                    <h4 className="font-medium mb-2">Branch</h4>
-                    <div className="flex items-center gap-2 text-sm">
-                      <GitBranch className="h-4 w-4 flex-shrink-0 text-muted-foreground" />
-                      {task.repoUrl ? (
-                        <a
-                          href={`${task.repoUrl.replace('.git', '')}/tree/${task.branchName}`}
-                          target="_blank"
-                          rel="noopener noreferrer"
-                          className="text-muted-foreground hover:text-foreground truncate"
-                        >
-                          {task.branchName}
-                        </a>
-                      ) : (
-                        <span className="text-muted-foreground truncate">{task.branchName}</span>
-                      )}
-                    </div>
-                  </div>
-                )}
-              </div>
-            )}
-
-            {task.mcpServerIds && task.mcpServerIds.length > 0 && (
-              <div>
-                <h4 className="font-medium mb-2">MCP Servers</h4>
-                {loadingMcpServers ? (
-                  <div className="flex flex-wrap gap-2">
-                    {Array.from({ length: 3 }).map((_, i) => (
-                      <div key={i} className="h-10 w-32 bg-muted rounded-md animate-pulse" />
-                    ))}
+          )}
+
+          {/* Agent */}
+          {(task.selectedAgent || task.selectedModel) && (
+            <div className="flex items-center gap-2">
+              {task.selectedAgent &&
+                (() => {
+                  const AgentLogo = getAgentLogo(task.selectedAgent)
+                  return AgentLogo ? <AgentLogo className="w-4 h-4 flex-shrink-0" /> : null
+                })()}
+              {task.selectedModel && (
+                <span className="text-muted-foreground">{getModelName(task.selectedModel, task.selectedAgent)}</span>
+              )}
+            </div>
+          )}
+
+          {/* MCP Servers */}
+          {!loadingMcpServers && mcpServers.length > 0 && (
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <div className="flex items-center gap-2 cursor-help text-muted-foreground">
+                    <Cable className="h-4 w-4 flex-shrink-0" />
+                    <span>
+                      {mcpServers.length} MCP Server{mcpServers.length !== 1 ? 's' : ''}
+                    </span>
                   </div>
-                ) : mcpServers.length > 0 ? (
-                  <div className="flex flex-wrap gap-2">
+                </TooltipTrigger>
+                <TooltipContent side="bottom" className="max-w-xs">
+                  <div className="space-y-1">
                     {mcpServers.map((server) => (
-                      <div key={server.id} className="flex items-center gap-2 px-3 py-2 bg-muted rounded-md text-sm">
+                      <div key={server.id} className="flex items-center gap-1.5">
                         {getConnectorIcon(server)}
                         <span>{server.name}</span>
                       </div>
                     ))}
                   </div>
-                ) : (
-                  <p className="text-sm text-muted-foreground">No MCP servers found</p>
-                )}
-              </div>
-            )}
-          </CardContent>
-        </Card>
-
-        {/* Logs */}
-        {task.logs && task.logs.length > 0 && (
-          <Card>
-            <CardHeader>
-              <div className="flex items-center justify-between">
-                <div>
-                  <CardTitle className="text-lg">Execution Logs</CardTitle>
-                  <CardDescription>Detailed logs from the task execution</CardDescription>
-                </div>
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={copyLogsToClipboard}
-                  className="h-8 w-8 p-0"
-                  title="Copy logs to clipboard"
-                >
-                  {copiedLogs ? <Check className="h-4 w-4 text-green-600" /> : <Copy className="h-4 w-4" />}
-                </Button>
-              </div>
-            </CardHeader>
-            <CardContent>
-              <div
-                ref={logsContainerRef}
-                className="bg-black text-green-400 p-4 rounded-md font-mono text-sm max-h-96 overflow-y-auto"
-              >
-                {(task.logs || []).map((log, index) => {
-                  const getLogColor = (logType: LogEntry['type']) => {
-                    switch (logType) {
-                      case 'command':
-                        return 'text-gray-400'
-                      case 'error':
-                        return 'text-red-400'
-                      case 'success':
-                        return 'text-green-400'
-                      case 'info':
-                      default:
-                        return 'text-white'
-                    }
-                  }
-
-                  const formatTime = (timestamp: Date) => {
-                    return new Date(timestamp).toLocaleTimeString('en-US', {
-                      hour12: false,
-                      hour: '2-digit',
-                      minute: '2-digit',
-                      second: '2-digit',
-                      fractionalSecondDigits: 3,
-                    })
-                  }
-
-                  return (
-                    <div key={index} className={cn('mb-1 flex gap-2', getLogColor(log.type))}>
-                      <span className="text-gray-500 text-xs shrink-0 mt-0.5">
-                        [{formatTime(log.timestamp || new Date())}]
-                      </span>
-                      <span className="flex-1">{log.message}</span>
-                    </div>
-                  )
-                })}
-              </div>
-            </CardContent>
-          </Card>
-        )}
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          )}
+        </div>
       </div>
+
+      {/* Changes Section */}
+      {task.branchName ? (
+        <div className="flex-1 flex gap-6 pl-3 pr-6 pt-6 pb-6 min-h-0 overflow-hidden">
+          {/* File Browser */}
+          <div className="w-1/3 overflow-y-auto min-h-0">
+            <FileBrowser
+              taskId={task.id}
+              branchName={task.branchName}
+              onFileSelect={setSelectedFile}
+              onFilesLoaded={fetchAllDiffs}
+              selectedFile={selectedFile}
+            />
+          </div>
+
+          {/* Diff Viewer */}
+          <div className="flex-1 min-h-0 bg-card rounded-md border overflow-hidden">
+            <div className="overflow-y-auto h-full">
+              {loadingDiffs ? (
+                <div className="h-full w-full animate-pulse bg-muted/50" />
+              ) : (
+                <FileDiffViewer
+                  selectedFile={selectedFile}
+                  diffsCache={diffsCache}
+                  isInitialLoading={Object.keys(diffsCache).length === 0}
+                />
+              )}
+            </div>
+          </div>
+        </div>
+      ) : currentStatus === 'pending' || currentStatus === 'processing' ? (
+        <div className="flex-1 flex items-center justify-center pl-6 pr-3">
+          <div className="text-center">
+            <Loader2 className="h-8 w-8 animate-spin mx-auto mb-3 text-muted-foreground" />
+            <p className="text-sm text-muted-foreground">Working...</p>
+          </div>
+        </div>
+      ) : null}
     </div>
   )
 }
diff --git a/components/task-duration.tsx b/components/task-duration.tsx
index 3dac3cee..12132160 100644
--- a/components/task-duration.tsx
+++ b/components/task-duration.tsx
@@ -5,9 +5,10 @@ import { Task } from '@/lib/db/schema'
 
 interface TaskDurationProps {
   task: Task
+  hideTitle?: boolean
 }
 
-export function TaskDuration({ task }: TaskDurationProps) {
+export function TaskDuration({ task, hideTitle = false }: TaskDurationProps) {
   const [currentTime, setCurrentTime] = useState(Date.now())
 
   useEffect(() => {
@@ -27,17 +28,15 @@ export function TaskDuration({ task }: TaskDurationProps) {
     const durationMs = endTime - startTime
     const durationSeconds = Math.floor(durationMs / 1000)
 
-    const hours = Math.floor(durationSeconds / 3600)
-    const minutes = Math.floor((durationSeconds % 3600) / 60)
+    const minutes = Math.floor(durationSeconds / 60)
     const seconds = durationSeconds % 60
 
-    if (hours > 0) {
-      return `${hours}h ${minutes}m ${seconds}s`
-    } else if (minutes > 0) {
-      return `${minutes}m ${seconds}s`
-    } else {
-      return `${seconds}s`
-    }
+    // Format as MM:SS with zero padding
+    return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
+  }
+
+  if (hideTitle) {
+    return <p className="text-sm text-muted-foreground min-w-[40px] inline-block">{formatDuration()}</p>
   }
 
   return (
diff --git a/components/task-form.tsx b/components/task-form.tsx
index 63f5ea4c..3580c1ed 100644
--- a/components/task-form.tsx
+++ b/components/task-form.tsx
@@ -72,13 +72,12 @@ const AGENT_MODELS = {
   ],
   cursor: [
     { value: 'auto', label: 'Auto' },
+    { value: 'sonnet-4.5', label: 'Sonnet 4.5' },
+    { value: 'sonnet-4.5-thinking', label: 'Sonnet 4.5 Thinking' },
     { value: 'gpt-5', label: 'GPT-5' },
-    { value: 'gpt-5-mini', label: 'GPT-5 mini' },
-    { value: 'gpt-5-nano', label: 'GPT-5 nano' },
-    { value: 'gpt-4.1', label: 'GPT-4.1' },
-    { value: 'claude-sonnet-4-5-20250929', label: 'Sonnet 4.5' },
-    { value: 'claude-sonnet-4-20250514', label: 'Sonnet 4' },
-    { value: 'claude-opus-4-1-20250805', label: 'Opus 4.1' },
+    { value: 'gpt-5-codex', label: 'GPT-5 Codex' },
+    { value: 'opus-4.1', label: 'Opus 4.1' },
+    { value: 'grok', label: 'Grok' },
   ],
   gemini: [
     { value: 'gemini-2.5-pro', label: 'Gemini 2.5 Pro' },
diff --git a/components/task-page-client.tsx b/components/task-page-client.tsx
index 450fe1f0..fa0678e5 100644
--- a/components/task-page-client.tsx
+++ b/components/task-page-client.tsx
@@ -1,13 +1,14 @@
 'use client'
 
+import { useState } from 'react'
 import { useTask } from '@/lib/hooks/use-task'
 import { TaskDetails } from '@/components/task-details'
 import { TaskPageHeader } from '@/components/task-page-header'
 import { PageHeader } from '@/components/page-header'
-import { Card, CardContent } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
 import { MoreHorizontal } from 'lucide-react'
 import { useTasks } from '@/components/app-layout'
+import { LogsPane } from '@/components/logs-pane'
 import { VERCEL_DEPLOY_URL } from '@/lib/constants'
 
 interface TaskPageClientProps {
@@ -17,11 +18,12 @@ interface TaskPageClientProps {
 export function TaskPageClient({ taskId }: TaskPageClientProps) {
   const { task, isLoading, error } = useTask(taskId)
   const { toggleSidebar } = useTasks()
+  const [logsPaneHeight, setLogsPaneHeight] = useState(40) // Default to collapsed height
 
   if (isLoading) {
     return (
       <div className="flex-1 bg-background">
-        <div className="mx-auto p-3">
+        <div className="p-3">
           <PageHeader
             showMobileMenu={true}
             onToggleMobileMenu={toggleSidebar}
@@ -54,22 +56,6 @@ export function TaskPageClient({ taskId }: TaskPageClientProps) {
               </div>
             }
           />
-
-          <div className="max-w-4xl mx-auto">
-            <div className="flex-1 p-6 overflow-y-auto">
-              <div className="max-w-4xl mx-auto space-y-6">
-                {/* Task Info Skeleton - 339px height */}
-                <Card className="h-[339px]">
-                  <CardContent className="space-y-4"></CardContent>
-                </Card>
-
-                {/* Logs Skeleton - 512px height */}
-                <Card className="h-[512px]">
-                  <CardContent></CardContent>
-                </Card>
-              </div>
-            </div>
-          </div>
         </div>
       </div>
     )
@@ -91,15 +77,18 @@ export function TaskPageClient({ taskId }: TaskPageClientProps) {
   }
 
   return (
-    <div className="flex-1 bg-background">
-      <div className="mx-auto p-3">
+    <div className="flex-1 bg-background relative flex flex-col h-full overflow-hidden">
+      <div className="flex-shrink-0 p-3">
         <TaskPageHeader task={task} />
+      </div>
 
-        {/* Task details */}
-        <div className="max-w-4xl mx-auto">
-          <TaskDetails task={task} />
-        </div>
+      {/* Task details */}
+      <div className="flex-1 flex flex-col min-h-0 overflow-hidden" style={{ paddingBottom: `${logsPaneHeight}px` }}>
+        <TaskDetails task={task} />
       </div>
+
+      {/* Logs pane at bottom */}
+      <LogsPane task={task} onHeightChange={setLogsPaneHeight} />
     </div>
   )
 }
diff --git a/components/task-page-header.tsx b/components/task-page-header.tsx
index 7b42ae97..5f19f506 100644
--- a/components/task-page-header.tsx
+++ b/components/task-page-header.tsx
@@ -12,5 +12,12 @@ interface TaskPageHeaderProps {
 export function TaskPageHeader({ task }: TaskPageHeaderProps) {
   const { toggleSidebar } = useTasks()
 
-  return <PageHeader showMobileMenu={true} onToggleMobileMenu={toggleSidebar} actions={<TaskActions task={task} />} />
+  return (
+    <PageHeader
+      showMobileMenu={true}
+      onToggleMobileMenu={toggleSidebar}
+      showPlatformName={true}
+      actions={<TaskActions task={task} />}
+    />
+  )
 }
diff --git a/components/task-sidebar.tsx b/components/task-sidebar.tsx
index 3f528cc0..30410b9d 100644
--- a/components/task-sidebar.tsx
+++ b/components/task-sidebar.tsx
@@ -25,13 +25,13 @@ const AGENT_MODELS = {
     { value: 'openai/gpt-4.1', label: 'GPT-4.1' },
   ],
   cursor: [
+    { value: 'auto', label: 'Auto' },
+    { value: 'sonnet-4.5', label: 'Sonnet 4.5' },
+    { value: 'sonnet-4.5-thinking', label: 'Sonnet 4.5 Thinking' },
     { value: 'gpt-5', label: 'GPT-5' },
-    { value: 'gpt-5-mini', label: 'GPT-5 Mini' },
-    { value: 'gpt-5-nano', label: 'GPT-5 Nano' },
-    { value: 'gpt-4.1', label: 'GPT-4.1' },
-    { value: 'claude-sonnet-4-5-20250929', label: 'Sonnet 4.5' },
-    { value: 'claude-sonnet-4-20250514', label: 'Sonnet 4' },
-    { value: 'claude-opus-4-1-20250805', label: 'Opus 4.1' },
+    { value: 'gpt-5-codex', label: 'GPT-5 Codex' },
+    { value: 'opus-4.1', label: 'Opus 4.1' },
+    { value: 'grok', label: 'Grok' },
   ],
   gemini: [
     { value: 'gemini-2.5-pro', label: 'Gemini 2.5 Pro' },
diff --git a/lib/github/client.ts b/lib/github/client.ts
new file mode 100644
index 00000000..d976b649
--- /dev/null
+++ b/lib/github/client.ts
@@ -0,0 +1,9 @@
+import { Octokit } from '@octokit/rest'
+
+if (!process.env.GITHUB_TOKEN) {
+  console.warn('GITHUB_TOKEN environment variable is not set. GitHub API calls will be unauthenticated.')
+}
+
+export const octokit = new Octokit({
+  auth: process.env.GITHUB_TOKEN,
+})
diff --git a/lib/sandbox/agents/cursor.ts b/lib/sandbox/agents/cursor.ts
index e62cd993..95bd7e6a 100644
--- a/lib/sandbox/agents/cursor.ts
+++ b/lib/sandbox/agents/cursor.ts
@@ -231,7 +231,6 @@ EOF`
 
     // Use the correct flags: -p for print mode (non-interactive), --force for file modifications
     // Try multiple approaches to find and execute cursor-agent
-    let result
 
     // Log what we're about to execute
     const modelFlag = selectedModel ? ` --model ${selectedModel}` : ''
@@ -312,16 +311,20 @@ EOF`
       await logger.info('Cursor command started with output capture, monitoring for completion...')
     }
 
-    // Poll for completion instead of waiting for the API
+    // Wait for completion - let sandbox timeout handle the hard limit
     let attempts = 0
-    const maxAttempts = 60 // 60 seconds max
 
-    while (!isCompleted && attempts < maxAttempts) {
+    while (!isCompleted) {
       await new Promise((resolve) => setTimeout(resolve, 1000)) // Wait 1 second
       attempts++
 
-      if (attempts % 10 === 0 && logger) {
-        await logger.info(`Still waiting for completion... ${attempts}s elapsed`)
+      // Safety check: if we've been waiting over 4 minutes, break and check git status
+      // (sandbox timeout is 5 minutes, so we leave a buffer)
+      if (attempts > 240) {
+        if (logger) {
+          await logger.info('Approaching sandbox timeout, checking for changes...')
+        }
+        break
       }
     }
 
@@ -329,65 +332,55 @@ EOF`
       if (logger) {
         await logger.info(`Cursor completed successfully in ${attempts} seconds`)
       }
-
-      result = {
-        success: true,
-        output: capturedOutput,
-        error: capturedError,
-        command: logCommand,
-      }
     } else {
       if (logger) {
-        await logger.info('Timeout waiting for completion, but may have succeeded')
+        await logger.info(`Cursor execution ended after ${attempts} seconds, checking for changes...`)
       }
+    }
 
-      result = {
-        success: false,
-        output: capturedOutput,
-        error: capturedError || 'Timeout waiting for completion',
-        command: logCommand,
-      }
+    const result = {
+      success: true, // We'll determine actual success based on git changes
+      output: capturedOutput,
+      error: capturedError,
+      command: logCommand,
     }
 
     // Log the output and error results (similar to Claude)
     if (result.output && result.output.trim()) {
       const redactedOutput = redactSensitiveInfo(result.output.trim())
       await logger.info(redactedOutput)
-      if (logger) {
-        await logger.info(redactedOutput)
-      }
     }
 
-    if (!result.success && result.error) {
+    if (result.error && result.error.trim()) {
       const redactedError = redactSensitiveInfo(result.error)
-      await logger.error(redactedError)
-      if (logger) {
-        await logger.error(redactedError)
-      }
+      await logger.info(`Cursor stderr: ${redactedError}`)
     }
 
     // Cursor CLI execution completed
 
-    // Check if any files were modified
+    // Check if any files were modified - this is the real indicator of success
     const gitStatusCheck = await runAndLogCommand(sandbox, 'git', ['status', '--porcelain'], logger)
     const hasChanges = gitStatusCheck.success && gitStatusCheck.output?.trim()
 
-    if (result.success) {
+    // Determine success based on whether changes were made
+    const actualSuccess = !!hasChanges
+
+    if (actualSuccess) {
       return {
         success: true,
-        output: `Cursor CLI executed successfully${hasChanges ? ' (Changes detected)' : ' (No changes made)'}`,
+        output: `Cursor CLI executed successfully (Changes detected)`,
         agentResponse: result.output || 'Cursor CLI completed the task',
         cliName: 'cursor',
-        changesDetected: !!hasChanges,
+        changesDetected: true,
         error: undefined,
       }
     } else {
       return {
         success: false,
-        error: `Cursor CLI failed: ${result.error || 'No error message'}`,
+        error: `Cursor CLI failed: No changes were made to the repository`,
         agentResponse: result.output,
         cliName: 'cursor',
-        changesDetected: !!hasChanges,
+        changesDetected: false,
       }
     }
   } catch (error: unknown) {
diff --git a/lib/utils/cookies.ts b/lib/utils/cookies.ts
index a71d1c69..675eb1a0 100644
--- a/lib/utils/cookies.ts
+++ b/lib/utils/cookies.ts
@@ -2,12 +2,16 @@ import Cookies from 'js-cookie'
 
 const SIDEBAR_WIDTH_COOKIE = 'sidebar-width'
 const SIDEBAR_OPEN_COOKIE = 'sidebar-open'
+const LOGS_PANE_HEIGHT_COOKIE = 'logs-pane-height'
+const LOGS_PANE_COLLAPSED_COOKIE = 'logs-pane-collapsed'
 const INSTALL_DEPENDENCIES_COOKIE = 'install-dependencies'
 const MAX_DURATION_COOKIE = 'max-duration'
 const SELECTED_OWNER_COOKIE = 'selected-owner'
 const SELECTED_REPO_COOKIE = 'selected-repo'
 const DEFAULT_SIDEBAR_WIDTH = 288
 const DEFAULT_SIDEBAR_OPEN = false // Default to false to avoid hydration issues
+const DEFAULT_LOGS_PANE_HEIGHT = 200
+const DEFAULT_LOGS_PANE_COLLAPSED = true // Default to collapsed
 const DEFAULT_INSTALL_DEPENDENCIES = false
 const DEFAULT_MAX_DURATION = 5
 
@@ -107,6 +111,58 @@ export function getSidebarOpenFromCookie(cookieString?: string): boolean {
   return DEFAULT_SIDEBAR_OPEN
 }
 
+// Logs pane height functions
+export function getLogsPaneHeight(): number {
+  if (typeof window === 'undefined') {
+    return DEFAULT_LOGS_PANE_HEIGHT
+  }
+
+  const cookieValue = Cookies.get(LOGS_PANE_HEIGHT_COOKIE)
+  if (cookieValue) {
+    const height = parseInt(cookieValue, 10)
+    if (!isNaN(height) && height >= 100 && height <= 600) {
+      return height
+    }
+  }
+
+  return DEFAULT_LOGS_PANE_HEIGHT
+}
+
+export function setLogsPaneHeight(height: number): void {
+  if (typeof window === 'undefined') return
+
+  // Validate height
+  if (height >= 100 && height <= 600) {
+    Cookies.set(LOGS_PANE_HEIGHT_COOKIE, height.toString(), {
+      expires: 365, // 1 year
+      sameSite: 'strict',
+    })
+  }
+}
+
+// Logs pane collapsed state functions
+export function getLogsPaneCollapsed(): boolean {
+  if (typeof window === 'undefined') {
+    return DEFAULT_LOGS_PANE_COLLAPSED
+  }
+
+  const cookieValue = Cookies.get(LOGS_PANE_COLLAPSED_COOKIE)
+  if (cookieValue !== undefined) {
+    return cookieValue === 'true'
+  }
+
+  return DEFAULT_LOGS_PANE_COLLAPSED
+}
+
+export function setLogsPaneCollapsed(isCollapsed: boolean): void {
+  if (typeof window === 'undefined') return
+
+  Cookies.set(LOGS_PANE_COLLAPSED_COOKIE, isCollapsed.toString(), {
+    expires: 365, // 1 year
+    sameSite: 'strict',
+  })
+}
+
 // Task options functions
 export function getInstallDependencies(): boolean {
   if (typeof window === 'undefined') {
diff --git a/package.json b/package.json
index 4de691a5..4ca6296b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "coding-agent-template",
-  "version": "0.1.0",
+  "version": "1.5.0",
   "private": true,
   "scripts": {
     "dev": "next dev --turbopack",
@@ -17,7 +17,10 @@
     "prepare": "husky"
   },
   "dependencies": {
+    "@git-diff-view/file": "^0.0.32",
+    "@git-diff-view/react": "^0.0.32",
     "@neondatabase/serverless": "^0.10.1",
+    "@octokit/rest": "^22.0.0",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-avatar": "^1.1.10",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 53bbe83f..196a07ad 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,9 +8,18 @@ importers:
 
   .:
     dependencies:
+      '@git-diff-view/file':
+        specifier: ^0.0.32
+        version: 0.0.32
+      '@git-diff-view/react':
+        specifier: ^0.0.32
+        version: 0.0.32(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@neondatabase/serverless':
         specifier: ^0.10.1
         version: 0.10.4
+      '@octokit/rest':
+        specifier: ^22.0.0
+        version: 22.0.0
       '@radix-ui/react-accordion':
         specifier: ^1.2.12
         version: 1.2.12(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -516,6 +525,21 @@ packages:
   '@floating-ui/utils@0.2.10':
     resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==}
 
+  '@git-diff-view/core@0.0.32':
+    resolution: {integrity: sha512-10pLxd/6cRYZf8yXL2sxB22WGq4i72A/8OWRUkoNixLXWvo/XY1K3TASegZqZhALZgndno5Bx0qcXztC9/PMXg==}
+
+  '@git-diff-view/file@0.0.32':
+    resolution: {integrity: sha512-mBlNji6OB2SDw7kK6CRDMR+EwNg/qcrupPKOAf5jFaWm2Uz4LJNkIE3N4nXGUqsycYtk+Bt4D+OR1Xm8sZaRlA==}
+
+  '@git-diff-view/lowlight@0.0.32':
+    resolution: {integrity: sha512-U/t7ucGtmmFYdnHR7L8SivW5smYi+mGrIxj62GCsrN7eVARIrOjRWs6wTOIDaW2OiIfkFb4yV3ZkOkpFpcDpgQ==}
+
+  '@git-diff-view/react@0.0.32':
+    resolution: {integrity: sha512-HEMmli+Q98vs440Uztk9bhN2J+B1vLfwUsokjn3K271LMfdZZ7Mcpa/zzYsB+hUM601RWbeAwQ8UB3Kxfq115g==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   '@humanfs/core@0.19.1':
     resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
     engines: {node: '>=18.18.0'}
@@ -754,6 +778,58 @@ packages:
     resolution: {integrity: sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA==}
     engines: {node: '>=12.4.0'}
 
+  '@octokit/auth-token@6.0.0':
+    resolution: {integrity: sha512-P4YJBPdPSpWTQ1NU4XYdvHvXJJDxM6YwpS0FZHRgP7YFkdVxsWcpWGy/NVqlAA7PcPCnMacXlRm1y2PFZRWL/w==}
+    engines: {node: '>= 20'}
+
+  '@octokit/core@7.0.5':
+    resolution: {integrity: sha512-t54CUOsFMappY1Jbzb7fetWeO0n6K0k/4+/ZpkS+3Joz8I4VcvY9OiEBFRYISqaI2fq5sCiPtAjRDOzVYG8m+Q==}
+    engines: {node: '>= 20'}
+
+  '@octokit/endpoint@11.0.1':
+    resolution: {integrity: sha512-7P1dRAZxuWAOPI7kXfio88trNi/MegQ0IJD3vfgC3b+LZo1Qe6gRJc2v0mz2USWWJOKrB2h5spXCzGbw+fAdqA==}
+    engines: {node: '>= 20'}
+
+  '@octokit/graphql@9.0.2':
+    resolution: {integrity: sha512-iz6KzZ7u95Fzy9Nt2L8cG88lGRMr/qy1Q36ih/XVzMIlPDMYwaNLE/ENhqmIzgPrlNWiYJkwmveEetvxAgFBJw==}
+    engines: {node: '>= 20'}
+
+  '@octokit/openapi-types@26.0.0':
+    resolution: {integrity: sha512-7AtcfKtpo77j7Ts73b4OWhOZHTKo/gGY8bB3bNBQz4H+GRSWqx2yvj8TXRsbdTE0eRmYmXOEY66jM7mJ7LzfsA==}
+
+  '@octokit/plugin-paginate-rest@13.2.0':
+    resolution: {integrity: sha512-YuAlyjR8o5QoRSOvMHxSJzPtogkNMgeMv2mpccrvdUGeC3MKyfi/hS+KiFwyH/iRKIKyx+eIMsDjbt3p9r2GYA==}
+    engines: {node: '>= 20'}
+    peerDependencies:
+      '@octokit/core': '>=6'
+
+  '@octokit/plugin-request-log@6.0.0':
+    resolution: {integrity: sha512-UkOzeEN3W91/eBq9sPZNQ7sUBvYCqYbrrD8gTbBuGtHEuycE4/awMXcYvx6sVYo7LypPhmQwwpUe4Yyu4QZN5Q==}
+    engines: {node: '>= 20'}
+    peerDependencies:
+      '@octokit/core': '>=6'
+
+  '@octokit/plugin-rest-endpoint-methods@16.1.0':
+    resolution: {integrity: sha512-nCsyiKoGRnhH5LkH8hJEZb9swpqOcsW+VXv1QoyUNQXJeVODG4+xM6UICEqyqe9XFr6LkL8BIiFCPev8zMDXPw==}
+    engines: {node: '>= 20'}
+    peerDependencies:
+      '@octokit/core': '>=6'
+
+  '@octokit/request-error@7.0.1':
+    resolution: {integrity: sha512-CZpFwV4+1uBrxu7Cw8E5NCXDWFNf18MSY23TdxCBgjw1tXXHvTrZVsXlW8hgFTOLw8RQR1BBrMvYRtuyaijHMA==}
+    engines: {node: '>= 20'}
+
+  '@octokit/request@10.0.5':
+    resolution: {integrity: sha512-TXnouHIYLtgDhKo+N6mXATnDBkV05VwbR0TtMWpgTHIoQdRQfCSzmy/LGqR1AbRMbijq/EckC/E3/ZNcU92NaQ==}
+    engines: {node: '>= 20'}
+
+  '@octokit/rest@22.0.0':
+    resolution: {integrity: sha512-z6tmTu9BTnw51jYGulxrlernpsQYXpui1RK21vmXn8yF5bp6iX16yfTtJYGK5Mh1qDkvDOmp2n8sRMcQmR8jiA==}
+    engines: {node: '>= 20'}
+
+  '@octokit/types@15.0.0':
+    resolution: {integrity: sha512-8o6yDfmoGJUIeR9OfYU0/TUJTnMPG2r68+1yEdUeG2Fdqpj8Qetg0ziKIgcBm0RW/j29H41WP37CYCEhp6GoHQ==}
+
   '@opentelemetry/api@1.9.0':
     resolution: {integrity: sha512-3giAOQvZiH5F9bMlMiv8+GSPMeqg0dbaeo58/0SlA9sxSqZhnUtxzX9/2FzyhS9sWQf5S0GJE0AKBrFqjpeYcg==}
     engines: {node: '>=8.0.0'}
@@ -1336,6 +1412,9 @@ packages:
   '@types/estree@1.0.8':
     resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
 
+  '@types/hast@3.0.4':
+    resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==}
+
   '@types/js-cookie@3.0.6':
     resolution: {integrity: sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ==}
 
@@ -1365,6 +1444,9 @@ packages:
   '@types/react@19.1.13':
     resolution: {integrity: sha512-hHkbU/eoO3EG5/MZkuFSKmYqPbSVk5byPFa3e7y/8TybHiLMACgI8seVYlicwk7H5K/rI2px9xrQp/C+AUDTiQ==}
 
+  '@types/unist@3.0.3':
+    resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}
+
   '@typescript-eslint/eslint-plugin@8.44.1':
     resolution: {integrity: sha512-molgphGqOBT7t4YKCSkbasmu1tb1MgrZ2szGzHbclF7PNmOkSTQVHy+2jXOSnxvR3+Xe1yySHFZoqMpz3TfQsw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -1526,6 +1608,12 @@ packages:
   '@vercel/sandbox@0.0.21':
     resolution: {integrity: sha512-j6nAUQyuw6znVaZGd7yI0nab1EWhEtIZPnTXvpDatJ2SObodYZOz5hGoLjCopAuhQBC7vOngbZ1bwP6HxtB5+g==}
 
+  '@vue/reactivity@3.5.22':
+    resolution: {integrity: sha512-f2Wux4v/Z2pqc9+4SmgZC1p73Z53fyD90NFWXiX9AKVnVBEvLFOWCEgJD3GdGnlxPZt01PSlfmLqbLYzY/Fw4A==}
+
+  '@vue/shared@3.5.22':
+    resolution: {integrity: sha512-F4yc6palwq3TT0u+FYf0Ns4Tfl9GRFURDN2gWG7L1ecIaS/4fCIuFOjMTnCyjsu/OK6vaDKLCrGAa+KvvH+h4w==}
+
   acorn-jsx@5.3.2:
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
@@ -1628,6 +1716,9 @@ packages:
   bare-events@2.7.0:
     resolution: {integrity: sha512-b3N5eTW1g7vXkw+0CXh/HazGTcO5KYuu/RCNaJbDMPI6LHDi+7qe8EmxKUVe1sUbY2KZOVZFyj62x0OEz9qyAA==}
 
+  before-after-hook@4.0.0:
+    resolution: {integrity: sha512-q6tR3RPqIB1pMiTRMFcZwuG5T8vwp+vUvEG0vuI6B+Rikh5BfPp2fQ82c925FOs+b0lcFQ8CFrL+KbilfZFhOQ==}
+
   brace-expansion@1.1.12:
     resolution: {integrity: sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==}
 
@@ -1738,6 +1829,10 @@ packages:
     resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==}
     engines: {node: '>= 0.4'}
 
+  dequal@2.0.3:
+    resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
+    engines: {node: '>=6'}
+
   detect-libc@2.1.0:
     resolution: {integrity: sha512-vEtk+OcP7VBRtQZ1EJ3bdgzSfBjgnEalLTp5zjJrS+2Z1w2KZly4SBdac/WDU3hhsNAZ9E8SC96ME4Ey8MZ7cg==}
     engines: {node: '>=8'}
@@ -1745,6 +1840,13 @@ packages:
   detect-node-es@1.1.0:
     resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
 
+  devlop@1.1.0:
+    resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
+
+  diff@8.0.2:
+    resolution: {integrity: sha512-sSuxWU5j5SR9QQji/o2qMvqRNYRDOcBTgsJ/DeCf4iSN4gW+gNMXM7wFIP+fdXZxoNiAnHUTGjCr+TSWXdRDKg==}
+    engines: {node: '>=0.3.1'}
+
   doctrine@2.1.0:
     resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
     engines: {node: '>=0.10.0'}
@@ -2034,9 +2136,15 @@ packages:
     resolution: {integrity: sha512-Vo1ab+QXPzZ4tCa8SwIHJFaSzy4R6SHf7BY79rFBDf0idraZWAkYrDjDj8uWaSm3S2TK+hJ7/t1CEmZ7jXw+pg==}
     engines: {node: '>=18.0.0'}
 
+  fast-content-type-parse@3.0.0:
+    resolution: {integrity: sha512-ZvLdcY8P+N8mGQJahJV5G4U88CSvT1rP8ApL6uETe88MBXrBHAkZlSEySdUlyztF7ccb+Znos3TFqaepHxdhBg==}
+
   fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
 
+  fast-diff@1.3.0:
+    resolution: {integrity: sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==}
+
   fast-fifo@1.3.2:
     resolution: {integrity: sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ==}
 
@@ -2176,6 +2284,10 @@ packages:
     resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
     engines: {node: '>= 0.4'}
 
+  highlight.js@11.11.1:
+    resolution: {integrity: sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==}
+    engines: {node: '>=12.0.0'}
+
   husky@9.1.7:
     resolution: {integrity: sha512-5gs5ytaNjBrh5Ow3zrvdUUY+0VxIuWVL4i9irt6friV+BqdCfmV11CQTWMiBYWHbXhco+J1kHfTOUkePhCDvMA==}
     engines: {node: '>=18'}
@@ -2463,6 +2575,9 @@ packages:
     resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
     hasBin: true
 
+  lowlight@3.3.0:
+    resolution: {integrity: sha512-0JNhgFoPvP6U6lE/UdVsSq99tn6DhjjpAj5MxG49ewd2mOBVtwWYIT8ClyABhq198aXXODMU6Ox8DrGy/CpTZQ==}
+
   lucide-react@0.544.0:
     resolution: {integrity: sha512-t5tS44bqd825zAW45UQxpG2CvcC4urOwn2TrwSH8u+MjeE+1NnWl6QqeQ/6NdjMqdOygyiT9p3Ev0p1NJykxjw==}
     peerDependencies:
@@ -2780,6 +2895,11 @@ packages:
     resolution: {integrity: sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==}
     engines: {node: '>=0.10.0'}
 
+  reactivity-store@0.3.11:
+    resolution: {integrity: sha512-s21jwqVm1yJg4Gv1P/I09UVbnODJvK7JQiK6bNDBtZGgDqCF3m8hhMMkruWzA0B2uEGd9zNP2cWuE6opF50wqg==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   reflect.getprototypeof@1.0.10:
     resolution: {integrity: sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==}
     engines: {node: '>= 0.4'}
@@ -3045,6 +3165,9 @@ packages:
     resolution: {integrity: sha512-QEg3HPMll0o3t2ourKwOeUAZ159Kn9mx5pnzHRQO8+Wixmh88YdZRiIwat0iNzNNXn0yoEtXJqFpyW7eM8BV7g==}
     engines: {node: '>=20.18.1'}
 
+  universal-user-agent@7.0.3:
+    resolution: {integrity: sha512-TmnEAEAsBJVZM/AADELsK76llnwcf9vMKuPz8JflO1frO8Lchitr0fNaN9d+Ap0BjKtqWqd/J17qeDnXh8CL2A==}
+
   unrs-resolver@1.11.1:
     resolution: {integrity: sha512-bSjt9pjaEBnNiGgc9rUiHGKv5l4/TGzDmYw3RhnkJGtLhbnnA/5qJj7x3dNDCRx/PJxu774LlH8lCOlB4hEfKg==}
 
@@ -3375,6 +3498,39 @@ snapshots:
 
   '@floating-ui/utils@0.2.10': {}
 
+  '@git-diff-view/core@0.0.32':
+    dependencies:
+      '@git-diff-view/lowlight': 0.0.32
+      fast-diff: 1.3.0
+      highlight.js: 11.11.1
+      lowlight: 3.3.0
+
+  '@git-diff-view/file@0.0.32':
+    dependencies:
+      '@git-diff-view/core': 0.0.32
+      diff: 8.0.2
+      fast-diff: 1.3.0
+      highlight.js: 11.11.1
+      lowlight: 3.3.0
+
+  '@git-diff-view/lowlight@0.0.32':
+    dependencies:
+      '@types/hast': 3.0.4
+      highlight.js: 11.11.1
+      lowlight: 3.3.0
+
+  '@git-diff-view/react@0.0.32(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@git-diff-view/core': 0.0.32
+      '@types/hast': 3.0.4
+      fast-diff: 1.3.0
+      highlight.js: 11.11.1
+      lowlight: 3.3.0
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+      reactivity-store: 0.3.11(react@19.1.0)
+      use-sync-external-store: 1.5.0(react@19.1.0)
+
   '@humanfs/core@0.19.1': {}
 
   '@humanfs/node@0.16.7':
@@ -3553,6 +3709,68 @@ snapshots:
 
   '@nolyfill/is-core-module@1.0.39': {}
 
+  '@octokit/auth-token@6.0.0': {}
+
+  '@octokit/core@7.0.5':
+    dependencies:
+      '@octokit/auth-token': 6.0.0
+      '@octokit/graphql': 9.0.2
+      '@octokit/request': 10.0.5
+      '@octokit/request-error': 7.0.1
+      '@octokit/types': 15.0.0
+      before-after-hook: 4.0.0
+      universal-user-agent: 7.0.3
+
+  '@octokit/endpoint@11.0.1':
+    dependencies:
+      '@octokit/types': 15.0.0
+      universal-user-agent: 7.0.3
+
+  '@octokit/graphql@9.0.2':
+    dependencies:
+      '@octokit/request': 10.0.5
+      '@octokit/types': 15.0.0
+      universal-user-agent: 7.0.3
+
+  '@octokit/openapi-types@26.0.0': {}
+
+  '@octokit/plugin-paginate-rest@13.2.0(@octokit/core@7.0.5)':
+    dependencies:
+      '@octokit/core': 7.0.5
+      '@octokit/types': 15.0.0
+
+  '@octokit/plugin-request-log@6.0.0(@octokit/core@7.0.5)':
+    dependencies:
+      '@octokit/core': 7.0.5
+
+  '@octokit/plugin-rest-endpoint-methods@16.1.0(@octokit/core@7.0.5)':
+    dependencies:
+      '@octokit/core': 7.0.5
+      '@octokit/types': 15.0.0
+
+  '@octokit/request-error@7.0.1':
+    dependencies:
+      '@octokit/types': 15.0.0
+
+  '@octokit/request@10.0.5':
+    dependencies:
+      '@octokit/endpoint': 11.0.1
+      '@octokit/request-error': 7.0.1
+      '@octokit/types': 15.0.0
+      fast-content-type-parse: 3.0.0
+      universal-user-agent: 7.0.3
+
+  '@octokit/rest@22.0.0':
+    dependencies:
+      '@octokit/core': 7.0.5
+      '@octokit/plugin-paginate-rest': 13.2.0(@octokit/core@7.0.5)
+      '@octokit/plugin-request-log': 6.0.0(@octokit/core@7.0.5)
+      '@octokit/plugin-rest-endpoint-methods': 16.1.0(@octokit/core@7.0.5)
+
+  '@octokit/types@15.0.0':
+    dependencies:
+      '@octokit/openapi-types': 26.0.0
+
   '@opentelemetry/api@1.9.0': {}
 
   '@petamoriken/float16@3.9.2': {}
@@ -4125,6 +4343,10 @@ snapshots:
 
   '@types/estree@1.0.8': {}
 
+  '@types/hast@3.0.4':
+    dependencies:
+      '@types/unist': 3.0.3
+
   '@types/js-cookie@3.0.6': {}
 
   '@types/json-schema@7.0.15': {}
@@ -4158,6 +4380,8 @@ snapshots:
     dependencies:
       csstype: 3.1.3
 
+  '@types/unist@3.0.3': {}
+
   '@typescript-eslint/eslint-plugin@8.44.1(@typescript-eslint/parser@8.44.1(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.2))(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.2)':
     dependencies:
       '@eslint-community/regexpp': 4.12.1
@@ -4327,6 +4551,12 @@ snapshots:
     transitivePeerDependencies:
       - react-native-b4a
 
+  '@vue/reactivity@3.5.22':
+    dependencies:
+      '@vue/shared': 3.5.22
+
+  '@vue/shared@3.5.22': {}
+
   acorn-jsx@5.3.2(acorn@8.15.0):
     dependencies:
       acorn: 8.15.0
@@ -4449,6 +4679,8 @@ snapshots:
 
   bare-events@2.7.0: {}
 
+  before-after-hook@4.0.0: {}
+
   brace-expansion@1.1.12:
     dependencies:
       balanced-match: 1.0.2
@@ -4558,10 +4790,18 @@ snapshots:
       has-property-descriptors: 1.0.2
       object-keys: 1.1.1
 
+  dequal@2.0.3: {}
+
   detect-libc@2.1.0: {}
 
   detect-node-es@1.1.0: {}
 
+  devlop@1.1.0:
+    dependencies:
+      dequal: 2.0.3
+
+  diff@8.0.2: {}
+
   doctrine@2.1.0:
     dependencies:
       esutils: 2.0.3
@@ -4965,8 +5205,12 @@ snapshots:
 
   eventsource-parser@3.0.6: {}
 
+  fast-content-type-parse@3.0.0: {}
+
   fast-deep-equal@3.1.3: {}
 
+  fast-diff@1.3.0: {}
+
   fast-fifo@1.3.2: {}
 
   fast-glob@3.3.1:
@@ -5118,6 +5362,8 @@ snapshots:
     dependencies:
       function-bind: 1.1.2
 
+  highlight.js@11.11.1: {}
+
   husky@9.1.7: {}
 
   ignore@5.3.2: {}
@@ -5369,6 +5615,12 @@ snapshots:
     dependencies:
       js-tokens: 4.0.0
 
+  lowlight@3.3.0:
+    dependencies:
+      '@types/hast': 3.0.4
+      devlop: 1.1.0
+      highlight.js: 11.11.1
+
   lucide-react@0.544.0(react@19.1.0):
     dependencies:
       react: 19.1.0
@@ -5668,6 +5920,13 @@ snapshots:
 
   react@19.1.0: {}
 
+  reactivity-store@0.3.11(react@19.1.0):
+    dependencies:
+      '@vue/reactivity': 3.5.22
+      '@vue/shared': 3.5.22
+      react: 19.1.0
+      use-sync-external-store: 1.5.0(react@19.1.0)
+
   reflect.getprototypeof@1.0.10:
     dependencies:
       call-bind: 1.0.8
@@ -6024,6 +6283,8 @@ snapshots:
 
   undici@7.16.0: {}
 
+  universal-user-agent@7.0.3: {}
+
   unrs-resolver@1.11.1:
     dependencies:
       napi-postinstall: 0.3.3