diff --git a/src/web-ui/src/app/components/panels/content-canvas/anchor-zone/AnchorZone.tsx b/src/web-ui/src/app/components/panels/content-canvas/anchor-zone/AnchorZone.tsx
index a753ec7d..087e4f93 100644
--- a/src/web-ui/src/app/components/panels/content-canvas/anchor-zone/AnchorZone.tsx
+++ b/src/web-ui/src/app/components/panels/content-canvas/anchor-zone/AnchorZone.tsx
@@ -46,11 +46,6 @@ export const AnchorZone: React.FC<AnchorZoneProps> = ({
   const startPosRef = useRef(0);
   const startSizeRef = useRef(size);
 
-  // Do not render when hidden
-  if (position === 'hidden') {
-    return null;
-  }
-
   const isBottom = position === 'bottom';
 
   // Handle resize start
@@ -96,6 +91,10 @@ export const AnchorZone: React.FC<AnchorZoneProps> = ({
   }, [isCollapsed]);
 
   // Toggle position
+  if (position === 'hidden') {
+    return null;
+  }
+
   return (
     <div
       ref={containerRef}
diff --git a/src/web-ui/src/flow_chat/components/FileMentionPicker.scss b/src/web-ui/src/flow_chat/components/FileMentionPicker.scss
index c563cf22..211c0e99 100644
--- a/src/web-ui/src/flow_chat/components/FileMentionPicker.scss
+++ b/src/web-ui/src/flow_chat/components/FileMentionPicker.scss
@@ -247,10 +247,17 @@
     }
 
     &__item--selected {
-      background: color-mix(in srgb, var(--color-accent-primary) 10%, transparent);
+      background: color-mix(in srgb, var(--color-accent-primary) 14%, white 86%);
+      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent-primary) 30%, transparent);
 
       .file-mention-picker__item-name {
-        color: var(--color-text-primary);
+        color: color-mix(in srgb, var(--color-accent-primary) 78%, var(--color-text-primary));
+      }
+
+      .file-mention-picker__icon,
+      .file-mention-picker__expand-icon {
+        color: color-mix(in srgb, var(--color-accent-primary) 70%, var(--color-text-primary));
+        opacity: 0.92;
       }
     }
 
diff --git a/src/web-ui/src/flow_chat/components/TaskDetailPanel/TaskDetailPanel.tsx b/src/web-ui/src/flow_chat/components/TaskDetailPanel/TaskDetailPanel.tsx
index 53c7b131..60394bdf 100644
--- a/src/web-ui/src/flow_chat/components/TaskDetailPanel/TaskDetailPanel.tsx
+++ b/src/web-ui/src/flow_chat/components/TaskDetailPanel/TaskDetailPanel.tsx
@@ -38,30 +38,15 @@ export interface TaskDetailPanelProps {
 export const TaskDetailPanel: React.FC<TaskDetailPanelProps> = ({ data }) => {
   const { t } = useTranslation('flow-chat');
   const { toolItem, taskInput, sessionId } = data || {};
+  const status = toolItem?.status;
+  const toolResult = toolItem?.toolResult;
+  const parentTaskToolId = toolItem?.id;
   
   const [subagentItems, setSubagentItems] = useState<FlowItem[]>([]);
   
   const contentRef = useRef<HTMLDivElement>(null);
   // Track auto-scroll; disable when the user scrolls up.
   const shouldAutoScrollRef = useRef(true);
-  
-  if (!toolItem) {
-    return (
-      <div className="task-detail-panel task-detail-panel--empty">
-        <div className="task-detail-panel__header">
-          <span className="task-detail-panel__header-title">
-            {t('toolCards.taskDetailPanel.untitled')}
-          </span>
-        </div>
-        <div className="task-detail-panel__empty-content">
-          {t('toolCards.taskDetailPanel.noData', 'Unable to load task data')}
-        </div>
-      </div>
-    );
-  }
-  
-  const { status, toolResult } = toolItem;
-  const parentTaskToolId = toolItem.id;
 
   // Collect subagent items associated with this task.
   useEffect(() => {
@@ -221,6 +206,21 @@ export const TaskDetailPanel: React.FC<TaskDetailPanelProps> = ({ data }) => {
     }
   }, [sessionId, handleOpenInEditor]);
 
+  if (!toolItem) {
+    return (
+      <div className="task-detail-panel task-detail-panel--empty">
+        <div className="task-detail-panel__header">
+          <span className="task-detail-panel__header-title">
+            {t('toolCards.taskDetailPanel.untitled')}
+          </span>
+        </div>
+        <div className="task-detail-panel__empty-content">
+          {t('toolCards.taskDetailPanel.noData', 'Unable to load task data')}
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className="task-detail-panel">
       <div className="task-detail-panel__header">
diff --git a/src/web-ui/src/flow_chat/components/modern/ScrollAnchor.tsx b/src/web-ui/src/flow_chat/components/modern/ScrollAnchor.tsx
index 50a1abb2..c7d2df4c 100644
--- a/src/web-ui/src/flow_chat/components/modern/ScrollAnchor.tsx
+++ b/src/web-ui/src/flow_chat/components/modern/ScrollAnchor.tsx
@@ -143,8 +143,6 @@ export const ScrollAnchor: React.FC<ScrollAnchorProps> = ({
     return content.substring(0, maxLength) + '...';
   };
 
-  if (anchorPoints.length === 0) return null;
-
   const handleContainerMouseEnter = useCallback(() => {
     setIsHovering(true);
   }, []);
@@ -153,6 +151,8 @@ export const ScrollAnchor: React.FC<ScrollAnchorProps> = ({
     setIsHovering(false);
   }, []);
 
+  if (anchorPoints.length === 0) return null;
+
   return (
     <>
       <div 
diff --git a/src/web-ui/src/flow_chat/tool-cards/GlobSearchDisplay.tsx b/src/web-ui/src/flow_chat/tool-cards/GlobSearchDisplay.tsx
index 771e2f40..c2f1dfd8 100644
--- a/src/web-ui/src/flow_chat/tool-cards/GlobSearchDisplay.tsx
+++ b/src/web-ui/src/flow_chat/tool-cards/GlobSearchDisplay.tsx
@@ -100,10 +100,6 @@ export const GlobSearchDisplay: React.FC<ToolCardProps> = ({
   const hasDetails = status === 'completed' && files.length > 0;
   const hasResultData = toolResult?.result !== undefined && toolResult?.result !== null;
 
-  if (status === 'error') {
-    return null;
-  }
-
   const handleClick = useCallback(() => {
     if (hasDetails) {
       applyExpandedState(isExpanded, !isExpanded, setIsExpanded, {
@@ -186,6 +182,10 @@ export const GlobSearchDisplay: React.FC<ToolCardProps> = ({
     </>
   );
 
+  if (status === 'error') {
+    return null;
+  }
+
   return (
     <div ref={cardRootRef} data-tool-card-id={toolId ?? ''}>
       <CompactToolCard
diff --git a/src/web-ui/src/flow_chat/tool-cards/GrepSearchDisplay.tsx b/src/web-ui/src/flow_chat/tool-cards/GrepSearchDisplay.tsx
index 32bae250..508dd39f 100644
--- a/src/web-ui/src/flow_chat/tool-cards/GrepSearchDisplay.tsx
+++ b/src/web-ui/src/flow_chat/tool-cards/GrepSearchDisplay.tsx
@@ -76,10 +76,6 @@ export const GrepSearchDisplay: React.FC<ToolCardProps> = ({
   const hasDetails = status === 'completed' && stats.matches > 0;
   const hasResultData = toolResult?.result !== undefined && toolResult?.result !== null;
 
-  if (status === 'error') {
-    return null;
-  }
-
   const handleClick = useCallback(() => {
     if (hasDetails) {
       applyExpandedState(isExpanded, !isExpanded, setIsExpanded, {
@@ -141,6 +137,10 @@ export const GrepSearchDisplay: React.FC<ToolCardProps> = ({
     </>
   );
 
+  if (status === 'error') {
+    return null;
+  }
+
   return (
     <div ref={cardRootRef} data-tool-card-id={toolId ?? ''}>
       <CompactToolCard
diff --git a/src/web-ui/src/flow_chat/tool-cards/LSDisplay.tsx b/src/web-ui/src/flow_chat/tool-cards/LSDisplay.tsx
index 5eb1f02f..7298fdb9 100644
--- a/src/web-ui/src/flow_chat/tool-cards/LSDisplay.tsx
+++ b/src/web-ui/src/flow_chat/tool-cards/LSDisplay.tsx
@@ -94,10 +94,6 @@ export const LSDisplay: React.FC<ToolCardProps> = ({
   const hasDetails = status === 'completed' && entries.length > 0;
   const hasResultData = toolResult?.result !== undefined && toolResult?.result !== null;
 
-  if (status === 'error') {
-    return null;
-  }
-
   const handleClick = useCallback(() => {
     if (hasDetails) {
       applyExpandedState(isExpanded, !isExpanded, setIsExpanded, {
@@ -182,6 +178,10 @@ export const LSDisplay: React.FC<ToolCardProps> = ({
     </>
   );
 
+  if (status === 'error') {
+    return null;
+  }
+
   return (
     <div ref={cardRootRef} data-tool-card-id={toolId ?? ''}>
       <CompactToolCard
diff --git a/src/web-ui/src/flow_chat/tool-cards/TodoWriteDisplay.tsx b/src/web-ui/src/flow_chat/tool-cards/TodoWriteDisplay.tsx
index 61ce5119..489cbde0 100644
--- a/src/web-ui/src/flow_chat/tool-cards/TodoWriteDisplay.tsx
+++ b/src/web-ui/src/flow_chat/tool-cards/TodoWriteDisplay.tsx
@@ -58,26 +58,6 @@ export const TodoWriteDisplay: React.FC<ToolCardProps> = ({
   
   const displayMode = config?.displayMode || 'compact';
 
-  if (displayMode === 'compact') {
-    return (
-      <div className={`tool-display-compact todo-write-compact status-${status}`}>
-        <span className="tool-icon">
-          {isLoading ? (
-            <Loader2 className="animate-spin" size={14} />
-          ) : (
-            <ListTodo size={14} />
-          )}
-        </span>
-        {todosToDisplay.length > 0 && (
-          <>
-            <span className="todo-count">{t('toolCards.todoWrite.tasksCount', { count: todosToDisplay.length })}</span>
-            <span className="todo-progress">{t('toolCards.todoWrite.progress', { completed: taskStats.completed, total: taskStats.total })}</span>
-          </>
-        )}
-      </div>
-    );
-  }
-
   const renderTrackDot = (todo: any, index: number) => {
     const statusClass = `track-dot--${todo.status}`;
     return (
@@ -125,6 +105,26 @@ export const TodoWriteDisplay: React.FC<ToolCardProps> = ({
     });
   }, [applyExpandedState, isExpanded, todosToDisplay.length]);
 
+  if (displayMode === 'compact') {
+    return (
+      <div className={`tool-display-compact todo-write-compact status-${status}`}>
+        <span className="tool-icon">
+          {isLoading ? (
+            <Loader2 className="animate-spin" size={14} />
+          ) : (
+            <ListTodo size={14} />
+          )}
+        </span>
+        {todosToDisplay.length > 0 && (
+          <>
+            <span className="todo-count">{t('toolCards.todoWrite.tasksCount', { count: todosToDisplay.length })}</span>
+            <span className="todo-progress">{t('toolCards.todoWrite.progress', { completed: taskStats.completed, total: taskStats.total })}</span>
+          </>
+        )}
+      </div>
+    );
+  }
+
   return (
     <div
       ref={cardRootRef}
diff --git a/src/web-ui/src/flow_chat/tool-cards/WebSearchCard.tsx b/src/web-ui/src/flow_chat/tool-cards/WebSearchCard.tsx
index 243a49a3..19960d45 100644
--- a/src/web-ui/src/flow_chat/tool-cards/WebSearchCard.tsx
+++ b/src/web-ui/src/flow_chat/tool-cards/WebSearchCard.tsx
@@ -88,10 +88,6 @@ export const WebSearchCard: React.FC<ToolCardProps> = ({
   const hasResultData = toolResult?.result !== undefined && toolResult?.result !== null;
   const hasResults = searchResults && searchResults.results.length > 0;
 
-  if (status === 'error') {
-    return null;
-  }
-
   const handleClick = useCallback(() => {
     if (status === 'completed' && hasResults) {
       applyExpandedState(isExpanded, !isExpanded, setIsExpanded, {
@@ -141,6 +137,10 @@ export const WebSearchCard: React.FC<ToolCardProps> = ({
     </div>
   );
 
+  if (status === 'error') {
+    return null;
+  }
+
   return (
     <div ref={cardRootRef} data-tool-card-id={toolId ?? ''}>
       <CompactToolCard