From ad947691dfb6f0f6aae754b59f0ca0f96ca1a601 Mon Sep 17 00:00:00 2001
From: Kacper <kacperlachowiczwp.pl@wp.pl>
Date: Fri, 2 Jan 2026 00:23:25 +0100
Subject: [PATCH] feat: enhance TaskProgressPanel and AgentOutputModal
 components

- Added defaultExpanded prop to TaskProgressPanel for customizable initial state.
- Updated styling in TaskProgressPanel for improved layout and consistency.
- Modified AgentOutputModal to utilize the new defaultExpanded prop and adjusted class names for better responsiveness and appearance.
- Enhanced overflow handling in AgentOutputModal for improved user experience.
---
 .../src/components/ui/task-progress-panel.tsx | 19 +++++++++++++------
 .../board-view/dialogs/agent-output-modal.tsx | 17 +++++++++--------
 2 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/apps/ui/src/components/ui/task-progress-panel.tsx b/apps/ui/src/components/ui/task-progress-panel.tsx
index add8d41e..12ebe69e 100644
--- a/apps/ui/src/components/ui/task-progress-panel.tsx
+++ b/apps/ui/src/components/ui/task-progress-panel.tsx
@@ -19,11 +19,18 @@ interface TaskProgressPanelProps {
   featureId: string;
   projectPath?: string;
   className?: string;
+  /** Whether the panel starts expanded (default: true) */
+  defaultExpanded?: boolean;
 }
 
-export function TaskProgressPanel({ featureId, projectPath, className }: TaskProgressPanelProps) {
+export function TaskProgressPanel({
+  featureId,
+  projectPath,
+  className,
+  defaultExpanded = true,
+}: TaskProgressPanelProps) {
   const [tasks, setTasks] = useState<TaskInfo[]>([]);
-  const [isExpanded, setIsExpanded] = useState(true);
+  const [isExpanded, setIsExpanded] = useState(defaultExpanded);
   const [isLoading, setIsLoading] = useState(true);
   const [currentTaskId, setCurrentTaskId] = useState<string | null>(null);
 
@@ -151,13 +158,13 @@ export function TaskProgressPanel({ featureId, projectPath, className }: TaskPro
   return (
     <div
       className={cn(
-        'group rounded-xl border bg-card/50 shadow-sm overflow-hidden transition-all duration-200',
+        'group rounded-lg border bg-card/50 shadow-sm overflow-hidden transition-all duration-200',
         className
       )}
     >
       <button
         onClick={() => setIsExpanded(!isExpanded)}
-        className="w-full flex items-center justify-between p-4 bg-muted/10 hover:bg-muted/20 transition-colors"
+        className="w-full flex items-center justify-between px-3 py-2.5 bg-muted/10 hover:bg-muted/20 transition-colors"
       >
         <div className="flex items-center gap-3">
           <div
@@ -218,9 +225,9 @@ export function TaskProgressPanel({ featureId, projectPath, className }: TaskPro
         )}
       >
         <div className="overflow-hidden">
-          <div className="p-5 pt-2 relative max-h-[300px] overflow-y-auto scrollbar-visible">
+          <div className="p-4 pt-2 relative max-h-[300px] overflow-y-auto scrollbar-visible">
             {/* Vertical Connector Line */}
-            <div className="absolute left-[2.35rem] top-4 bottom-8 w-px bg-gradient-to-b from-border/80 via-border/40 to-transparent" />
+            <div className="absolute left-[2.35rem] top-4 bottom-8 w-px bg-linear-to-b from-border/80 via-border/40 to-transparent" />
 
             <div className="space-y-5">
               {tasks.map((task, index) => {
diff --git a/apps/ui/src/components/views/board-view/dialogs/agent-output-modal.tsx b/apps/ui/src/components/views/board-view/dialogs/agent-output-modal.tsx
index 58fe3ad6..9ea5ed32 100644
--- a/apps/ui/src/components/views/board-view/dialogs/agent-output-modal.tsx
+++ b/apps/ui/src/components/views/board-view/dialogs/agent-output-modal.tsx
@@ -296,10 +296,10 @@ export function AgentOutputModal({
   return (
     <Dialog open={open} onOpenChange={onClose}>
       <DialogContent
-        className="w-[60vw] max-w-[60vw] max-h-[80vh] flex flex-col"
+        className="w-[60vw] max-w-[60vw] max-h-[80vh] flex flex-col overflow-hidden min-h-0 gap-3"
         data-testid="agent-output-modal"
       >
-        <DialogHeader className="flex-shrink-0">
+        <DialogHeader className="shrink-0">
           <div className="flex items-center justify-between">
             <DialogTitle className="flex items-center gap-2">
               {featureStatus !== 'verified' && featureStatus !== 'waiting_approval' && (
@@ -347,7 +347,7 @@ export function AgentOutputModal({
             </div>
           </div>
           <DialogDescription
-            className="mt-1 max-h-24 overflow-y-auto break-words"
+            className="mt-1 max-h-24 overflow-y-auto wrap-break-word"
             data-testid="agent-output-description"
           >
             {featureDescription}
@@ -358,11 +358,12 @@ export function AgentOutputModal({
         <TaskProgressPanel
           featureId={featureId}
           projectPath={projectPath}
-          className="flex-shrink-0 mx-1"
+          className="shrink-0 rounded-lg"
+          defaultExpanded={false}
         />
 
         {viewMode === 'changes' ? (
-          <div className="flex-1 min-h-[400px] max-h-[60vh] overflow-y-auto scrollbar-visible">
+          <div className="flex-1 min-h-0 overflow-y-auto scrollbar-visible">
             {projectPath ? (
               <GitDiffPanel
                 projectPath={projectPath}
@@ -383,7 +384,7 @@ export function AgentOutputModal({
             <div
               ref={scrollRef}
               onScroll={handleScroll}
-              className="flex-1 overflow-y-auto bg-zinc-950 rounded-lg p-4 font-mono text-xs min-h-[400px] max-h-[60vh] scrollbar-visible"
+              className="flex-1 min-h-0 overflow-y-auto bg-zinc-950 rounded-lg p-4 font-mono text-xs scrollbar-visible"
             >
               {isLoading && !output ? (
                 <div className="flex items-center justify-center h-full text-muted-foreground">
@@ -397,11 +398,11 @@ export function AgentOutputModal({
               ) : viewMode === 'parsed' ? (
                 <LogViewer output={output} />
               ) : (
-                <div className="whitespace-pre-wrap break-words text-zinc-300">{output}</div>
+                <div className="whitespace-pre-wrap wrap-break-word text-zinc-300">{output}</div>
               )}
             </div>
 
-            <div className="text-xs text-muted-foreground text-center flex-shrink-0">
+            <div className="text-xs text-muted-foreground text-center shrink-0">
               {autoScrollRef.current
                 ? 'Auto-scrolling enabled'
                 : 'Scroll to bottom to enable auto-scroll'}