feat: Enhance multi-cli-plan support with new synthesis types and update related components

ccw/frontend/src/components/cli-viewer/ContentArea.tsx

@@ -32,7 +32,7 @@ function EmptyTabState() {
   const { formatMessage } = useIntl();
 
   return (
-    <div className="h-full flex flex-col items-center justify-center text-muted-foreground gap-4">
+    <div className="flex-1 flex flex-col items-center justify-center text-muted-foreground gap-4">
       <Terminal className="h-12 w-12 opacity-30" />
       <div className="text-center">
         <p className="text-sm font-medium">
@@ -56,7 +56,7 @@ function ExecutionNotFoundState({ executionId }: { executionId: string }) {
   const { formatMessage } = useIntl();
 
   return (
-    <div className="h-full flex flex-col items-center justify-center text-muted-foreground gap-4">
+    <div className="flex-1 flex flex-col items-center justify-center text-muted-foreground gap-4">
       <Terminal className="h-12 w-12 opacity-30" />
       <div className="text-center">
         <p className="text-sm font-medium">
@@ -113,7 +113,7 @@ function CliOutputDisplay({ execution, executionId }: { execution: CliExecutionS
 
   if (!execution.output || execution.output.length === 0) {
     return (
-      <div className="h-full flex flex-col items-center justify-center text-muted-foreground gap-4">
+      <div className="flex-1 flex flex-col items-center justify-center text-muted-foreground gap-4">
         <Terminal className="h-12 w-12 opacity-30" />
         <div className="text-center">
           <p className="text-sm">
@@ -185,7 +185,7 @@ export function ContentArea({ paneId, className }: ContentAreaProps) {
   return (
     <div
       className={cn(
-        'flex-1 overflow-hidden',
+        'flex-1 min-h-0 flex flex-col overflow-hidden',
         'bg-background',
         className
       )}

ccw/frontend/src/components/cli-viewer/LayoutContainer.tsx

@@ -3,7 +3,7 @@
 // ========================================
 // Manages allotment-based split panes for CLI viewer
 
-import { useCallback, useMemo, useRef, useEffect } from 'react';
+import { useMemo, useRef, useEffect, useCallback } from 'react';
 import { Allotment } from 'allotment';
 import 'allotment/dist/style.css';
 import { cn } from '@/lib/utils';
@@ -46,13 +46,6 @@ function isPaneId(child: PaneId | AllotmentLayoutGroup): child is PaneId {
 function LayoutGroupRenderer({ group, minSize, onSizeChange }: LayoutGroupRendererProps) {
   const panes = useViewerPanes();
 
-  const handleChange = useCallback(
-    (sizes: number[]) => {
-      onSizeChange(sizes);
-    },
-    [onSizeChange]
-  );
-
   // Check if all panes in this group exist
   const validChildren = useMemo(() => {
     return group.children.filter(child => {
@@ -71,7 +64,7 @@ function LayoutGroupRenderer({ group, minSize, onSizeChange }: LayoutGroupRender
     <Allotment
       vertical={group.direction === 'vertical'}
       defaultSizes={group.sizes}
-      onChange={handleChange}
+      onChange={onSizeChange}
       className="h-full"
     >
       {validChildren.map((child, index) => (

ccw/frontend/src/components/shared/CliStreamMonitor/MonitorBody/index.tsx

@@ -104,14 +104,12 @@ function MonitorBodyComponent(
   return (
     <div
       ref={containerRef}
-      className={cn('flex-1 overflow-y-auto bg-background relative', className)}
+      className={cn('flex-1 min-h-0 overflow-y-auto bg-background relative', className)}
       onScroll={handleScroll}
     >
-      <div className="h-full">
-        {children}
-        {/* Anchor for scroll to bottom */}
-        <div ref={logsEndRef} />
-      </div>
+      {children}
+      {/* Anchor for scroll to bottom */}
+      <div ref={logsEndRef} />
 
       {/* Show scroll button when user is not at bottom */}
       {showScrollButton && isUserScrolling && (

ccw/frontend/src/components/shared/TaskDrawer.tsx

@@ -82,15 +82,16 @@ export function TaskDrawer({ task, isOpen, onClose }: TaskDrawerProps) {
     return () => window.removeEventListener('keydown', handleEsc);
   }, [isOpen, onClose]);
 
-  if (!task || !isOpen) {
-    return null;
-  }
-
   // Normalize task to unified flat format (handles old nested, new flat, and raw LiteTask/TaskData)
+  // MUST be called before early return to satisfy React hooks rules
   const nt = React.useMemo(
-    () => normalizeTask(task as unknown as Record<string, unknown>),
+    () => task ? normalizeTask(task as unknown as Record<string, unknown>) : null,
     [task],
   );
+
+  if (!task || !isOpen || !nt) {
+    return null;
+  }
   const taskId = nt.task_id || 'N/A';
   const taskTitle = nt.title || 'Untitled Task';
   const taskDescription = nt.description;