feat: improve terminal tool card readability and command preview

src/web-ui/src/component-library/components/Tooltip/Tooltip.scss

@@ -20,6 +20,10 @@
     transform: scale(1);
   }
 
+  &--interactive.bitfun-tooltip--visible {
+    pointer-events: auto;
+  }
+
   &__content {
     padding: 6px 10px;
 
@@ -41,6 +45,7 @@
 
     max-width: 280px;
     word-wrap: break-word;
+    user-select: text;
   }
 
   &--top.bitfun-tooltip--visible {

src/web-ui/src/component-library/components/Tooltip/Tooltip.tsx

@@ -16,6 +16,7 @@ export interface TooltipProps {
   delay?: number;
   disabled?: boolean;
   className?: string;
+  interactive?: boolean;
 }
 
 const assignRef = <T,>(ref: React.Ref<T> | undefined, value: T | null): void => {
@@ -150,6 +151,7 @@ export const Tooltip: React.FC<TooltipProps> = ({
   delay = DEFAULT_TOOLTIP_DELAY,
   disabled = false,
   className = '',
+  interactive = false,
 }) => {
   const [visible, setVisible] = useState(false);
   const [position, setPosition] = useState({ top: 0, left: 0 });
@@ -159,6 +161,7 @@ export const Tooltip: React.FC<TooltipProps> = ({
   const triggerRef = useRef<HTMLElement | null>(null);
   const tooltipRef = useRef<HTMLDivElement>(null);
   const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const hideTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const latestMousePositionRef = useRef<{ x: number; y: number } | null>(null);
 
   const gap = 8;
@@ -205,6 +208,10 @@ export const Tooltip: React.FC<TooltipProps> = ({
     if (timeoutRef.current) {
       clearTimeout(timeoutRef.current);
     }
+    if (hideTimeoutRef.current) {
+      clearTimeout(hideTimeoutRef.current);
+      hideTimeoutRef.current = null;
+    }
     if (followCursor && e) {
       latestMousePositionRef.current = { x: e.clientX, y: e.clientY };
     }
@@ -223,6 +230,10 @@ export const Tooltip: React.FC<TooltipProps> = ({
       clearTimeout(timeoutRef.current);
       timeoutRef.current = null;
     }
+    if (hideTimeoutRef.current) {
+      clearTimeout(hideTimeoutRef.current);
+      hideTimeoutRef.current = null;
+    }
     setVisible(false);
     setPositionReady(false);
     if (followCursor) {
@@ -231,6 +242,22 @@ export const Tooltip: React.FC<TooltipProps> = ({
     }
   };
 
+  const scheduleHideTooltip = useCallback(() => {
+    if (!interactive) {
+      hideTooltip();
+      return;
+    }
+
+    if (hideTimeoutRef.current) {
+      clearTimeout(hideTimeoutRef.current);
+    }
+
+    hideTimeoutRef.current = setTimeout(() => {
+      hideTimeoutRef.current = null;
+      hideTooltip();
+    }, 150);
+  }, [interactive]);
+
   const handleMouseMove = useCallback(
     (e: React.MouseEvent) => {
       if (followCursor && !visible) {
@@ -271,6 +298,9 @@ export const Tooltip: React.FC<TooltipProps> = ({
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
       }
+      if (hideTimeoutRef.current) {
+        clearTimeout(hideTimeoutRef.current);
+      }
     };
   }, []);
 
@@ -290,7 +320,7 @@ export const Tooltip: React.FC<TooltipProps> = ({
   };
 
   const handleMouseLeave = (e: React.MouseEvent) => {
-    if (trigger === 'hover') hideTooltip();
+    if (trigger === 'hover') scheduleHideTooltip();
     if (typeof childProps.onMouseLeave === 'function') {
       (childProps.onMouseLeave as (e: React.MouseEvent) => void)(e);
     }
@@ -334,6 +364,7 @@ export const Tooltip: React.FC<TooltipProps> = ({
     'bitfun-tooltip',
     `bitfun-tooltip--${actualPlacement}`,
     visible && positionReady && 'bitfun-tooltip--visible',
+    interactive && 'bitfun-tooltip--interactive',
     className
   ].filter(Boolean).join(' ');
 
@@ -344,6 +375,13 @@ export const Tooltip: React.FC<TooltipProps> = ({
         <div
           ref={tooltipRef}
           className={tooltipClass}
+          onMouseEnter={interactive ? () => {
+            if (hideTimeoutRef.current) {
+              clearTimeout(hideTimeoutRef.current);
+              hideTimeoutRef.current = null;
+            }
+          } : undefined}
+          onMouseLeave={interactive ? scheduleHideTooltip : undefined}
           style={{
             position: 'fixed',
             top: `${position.top}px`,
@@ -359,4 +397,4 @@ export const Tooltip: React.FC<TooltipProps> = ({
   );
 };
 
-Tooltip.displayName = 'Tooltip';
+Tooltip.displayName = 'Tooltip';

src/web-ui/src/flow_chat/tool-cards/TerminalToolCard.scss

@@ -95,6 +95,12 @@
   }
 }
 
+:root[data-theme="light"] .terminal-command,
+:root[data-theme-type="light"] .terminal-command,
+.light .terminal-command {
+  color: var(--color-text-secondary);
+}
+
 .terminal-command-input {
   flex: 1;
   min-width: 0;
@@ -125,6 +131,12 @@
   }
 }
 
+:root[data-theme="light"] .terminal-command-input,
+:root[data-theme-type="light"] .terminal-command-input,
+.light .terminal-command-input {
+  color: var(--color-text-secondary);
+}
+
 /* ========== Status text styles ========== */
 .terminal-status-text {
   display: inline-flex;
@@ -262,18 +274,21 @@
 }
 
 /* ========== Execution output container (streaming) ========== */
-.terminal-execution-output {
-  background: var(--color-bg-primary);
-  padding: 8px 12px;
+.terminal-execution-output,
+.terminal-result-output {
+  margin-bottom: 0;
+  background: transparent;
+  border: none;
+  overflow: hidden;
   max-height: 300px;
   overflow-y: auto;
-  
+
   &.terminal-waiting {
     display: flex;
     align-items: center;
     justify-content: center;
     min-height: 60px;
-    
+
     .waiting-text {
       color: var(--color-text-muted);
       font-size: 12px;
@@ -348,15 +363,6 @@
   line-height: 1.2;
 }
 
-.terminal-result-output {
-  margin-bottom: 0;
-  background: transparent;
-  border: none;
-  overflow: hidden;
-  max-height: 300px;
-  overflow-y: auto;
-}
-
 .terminal-exit-code {
   display: inline-flex;
   align-items: center;
@@ -390,18 +396,25 @@
 
   .xterm {
     padding: 0;
-    
+
     .xterm-viewport {
       overflow-y: auto !important;
-
     }
-
+
+    &:not(.allow-transparency) {
+      .xterm-viewport {
+        background-color: var(--color-bg-scene);
+      }
+    }
+
     .xterm-screen {
+      width: 100%;
+      height: 100%;
     }
   }
 }
 .terminal-output-renderer {
-  background: transparent;
+  background: var(--color-bg-scene);
   border-radius: 4px;
   overflow: hidden;
 
@@ -410,6 +423,20 @@
   }
 }
 
+.terminal-command-tooltip {
+  .bitfun-tooltip__content {
+    max-width: min(640px, calc(100vw - 32px));
+    cursor: text;
+  }
+}
+
+.terminal-command-tooltip-content {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  user-select: text;
+}
+
 
 /* ========== Error content styles ========== */
 .error-content {

src/web-ui/src/flow_chat/tool-cards/TerminalToolCard.tsx

@@ -18,7 +18,7 @@ import type { ToolCardProps } from '../types/flow-chat';
 import { Terminal, Play, X, ExternalLink, Square } from 'lucide-react';
 import { createTerminalTab } from '@/shared/utils/tabUtils';
 import { BaseToolCard, ToolCardHeader } from './BaseToolCard';
-import { CubeLoading, IconButton } from '../../component-library';
+import { CubeLoading, IconButton, Tooltip } from '../../component-library';
 import { TerminalOutputRenderer } from '@/tools/terminal/components';
 import { createLogger } from '@/shared/utils/logger';
 import { useToolCardHeightContract } from './useToolCardHeightContract';
@@ -113,8 +113,10 @@ export const TerminalToolCard: React.FC<TerminalToolCardProps> = ({
   const [isExpanded, setIsExpanded] = useState(() => getInitialExpandedState(toolId, status));
   const [isExecuting, setIsExecuting] = useState(false);
   const [isEditingCommand, setIsEditingCommand] = useState(false);
+  const [isCommandTruncated, setIsCommandTruncated] = useState(false);
   const [editedCommand, setEditedCommand] = useState('');
   const inputRef = useRef<HTMLInputElement>(null);
+  const commandRef = useRef<HTMLElement | null>(null);
   const hasInitializedExpand = useRef(false);
   const previousStatusRef = useRef<string>(status);
   const {
@@ -191,6 +193,50 @@ export const TerminalToolCard: React.FC<TerminalToolCardProps> = ({
     }
   }, [status]);
 
+  const updateCommandTruncation = useCallback(() => {
+    const element = commandRef.current;
+    if (!element) {
+      setIsCommandTruncated(false);
+      return;
+    }
+
+    const nextValue = element.scrollWidth - element.clientWidth > 1;
+    setIsCommandTruncated((prev) => (prev === nextValue ? prev : nextValue));
+  }, []);
+
+  useEffect(() => {
+    if (isEditingCommand) {
+      setIsCommandTruncated(false);
+      return;
+    }
+
+    const element = commandRef.current;
+    if (!element) {
+      setIsCommandTruncated(false);
+      return;
+    }
+
+    const frameId = window.requestAnimationFrame(updateCommandTruncation);
+    const resizeObserver = typeof ResizeObserver !== 'undefined'
+      ? new ResizeObserver(() => {
+          updateCommandTruncation();
+        })
+      : null;
+
+    resizeObserver?.observe(element);
+    if (element.parentElement) {
+      resizeObserver?.observe(element.parentElement);
+    }
+
+    window.addEventListener('resize', updateCommandTruncation);
+
+    return () => {
+      window.cancelAnimationFrame(frameId);
+      resizeObserver?.disconnect();
+      window.removeEventListener('resize', updateCommandTruncation);
+    };
+  }, [command, isEditingCommand, updateCommandTruncation]);
+
   const handleStartEdit = useCallback((e: React.MouseEvent) => {
     e.stopPropagation();
     setEditedCommand(command || '');
@@ -390,16 +436,32 @@ export const TerminalToolCard: React.FC<TerminalToolCardProps> = ({
         />
       );
     }
-    
-    return (
+
+    const commandNode = (
       <code 
+        ref={commandRef}
         className={`terminal-command ${canEditCommand ? 'editable' : ''}`}
         onClick={canEditCommand ? handleStartEdit : undefined}
-        title={canEditCommand ? t('toolCards.terminal.clickToEditCommand') : undefined}
+        title={canEditCommand && !isCommandTruncated ? t('toolCards.terminal.clickToEditCommand') : undefined}
       >
         {command || (canEditCommand ? <span className="command-empty">{t('toolCards.terminal.commandEmpty')}</span> : <span className="command-empty">{t('toolCards.terminal.noCommand')}</span>)}
       </code>
     );
+
+    if (command && isCommandTruncated) {
+      return (
+        <Tooltip
+          content={<div className="terminal-command-tooltip-content">{command}</div>}
+          placement="bottom"
+          className="terminal-command-tooltip"
+          interactive
+        >
+          {commandNode}
+        </Tooltip>
+      );
+    }
+
+    return commandNode;
   };
 
   const renderStatusText = () => {

src/web-ui/src/tools/terminal/components/TerminalOutputRenderer.tsx

@@ -102,9 +102,8 @@ export const TerminalOutputRenderer: React.FC<TerminalOutputRendererProps> = mem
       minimumContrastRatio: DEFAULT_XTERM_MINIMUM_CONTRAST_RATIO,
       scrollback: 5000,
       convertEol: true,
-      allowTransparency: true,
+      allowTransparency: false,
       theme: buildXtermTheme(currentTheme, {
-        background: 'transparent',
         cursor: 'transparent',    // Hide cursor in read-only mode.
         cursorAccent: 'transparent',
       }),
@@ -167,7 +166,6 @@ export const TerminalOutputRenderer: React.FC<TerminalOutputRendererProps> = mem
       const fontWeights = getXtermFontWeights(theme.type);
 
       terminal.options.theme = buildXtermTheme(theme, {
-        background: 'transparent',
         cursor: 'transparent',
         cursorAccent: 'transparent',
       });