diff --git a/frontend/src/components/layout/TasksLayout.tsx b/frontend/src/components/layout/TasksLayout.tsx
index b24890f3..88ea58de 100644
--- a/frontend/src/components/layout/TasksLayout.tsx
+++ b/frontend/src/components/layout/TasksLayout.tsx
@@ -1,6 +1,7 @@
 import { ReactNode, useState } from 'react';
 import { PanelGroup, Panel, PanelResizeHandle } from 'react-resizable-panels';
 import { AnimatePresence, motion } from 'framer-motion';
+import { cn } from '@/lib/utils';
 
 export type LayoutMode = 'preview' | 'diffs' | null;
 
@@ -86,6 +87,7 @@ function RightWorkArea({
   const [innerSizes] = useState<SplitSizes>(() =>
     loadSizes(STORAGE_KEYS.ATTEMPT_AUX, DEFAULT_ATTEMPT_AUX)
   );
+  const [isAttemptCollapsed, setIsAttemptCollapsed] = useState(false);
 
   return (
     <div className="h-full min-h-0 flex flex-col">
@@ -114,6 +116,8 @@ function RightWorkArea({
               minSize={MIN_PANEL_SIZE}
               collapsible
               collapsedSize={0}
+              onCollapse={() => setIsAttemptCollapsed(true)}
+              onExpand={() => setIsAttemptCollapsed(false)}
               className="min-w-0 min-h-0 overflow-hidden"
               role="region"
               aria-label="Details"
@@ -123,7 +127,13 @@ function RightWorkArea({
 
             <PanelResizeHandle
               id="handle-aa"
-              className="relative z-30 w-1 bg-border cursor-col-resize group touch-none focus:outline-none focus-visible:ring-2 focus-visible:ring-ring/60 focus-visible:ring-offset-1 focus-visible:ring-offset-background"
+              className={cn(
+                'relative z-30 bg-border cursor-col-resize group touch-none',
+                'focus:outline-none focus-visible:ring-2 focus-visible:ring-ring/60',
+                'focus-visible:ring-offset-1 focus-visible:ring-offset-background',
+                'transition-all',
+                isAttemptCollapsed ? 'w-6' : 'w-1'
+              )}
               aria-label="Resize panels"
               role="separator"
               aria-orientation="vertical"
@@ -176,6 +186,7 @@ function DesktopSimple({
   const [outerSizes] = useState<SplitSizes>(() =>
     loadSizes(STORAGE_KEYS.KANBAN_ATTEMPT, DEFAULT_KANBAN_ATTEMPT)
   );
+  const [isKanbanCollapsed, setIsKanbanCollapsed] = useState(false);
 
   // When preview/diffs is open, hide Kanban entirely and render only RightWorkArea
   if (mode !== null) {
@@ -207,6 +218,8 @@ function DesktopSimple({
         minSize={MIN_PANEL_SIZE}
         collapsible
         collapsedSize={0}
+        onCollapse={() => setIsKanbanCollapsed(true)}
+        onExpand={() => setIsKanbanCollapsed(false)}
         className="min-w-0 min-h-0 overflow-hidden"
         role="region"
         aria-label="Kanban board"
@@ -216,7 +229,13 @@ function DesktopSimple({
 
       <PanelResizeHandle
         id="handle-kr"
-        className="relative z-30 w-1 bg-border cursor-col-resize group touch-none focus:outline-none focus-visible:ring-2 focus-visible:ring-ring/60 focus-visible:ring-offset-1 focus-visible:ring-offset-background"
+        className={cn(
+          'relative z-30 bg-border cursor-col-resize group touch-none',
+          'focus:outline-none focus-visible:ring-2 focus-visible:ring-ring/60',
+          'focus-visible:ring-offset-1 focus-visible:ring-offset-background',
+          'transition-all',
+          isKanbanCollapsed ? 'w-6' : 'w-1'
+        )}
         aria-label="Resize panels"
         role="separator"
         aria-orientation="vertical"