feat(web-ui): unify tool card status slot and processing indicator

Add ToolCardStatusSlot and ToolProcessingDots; route flow-chat and library tool cards through them. Polish Git and terminal tool cards, ToolStatusIndicator, and Markdown link handling; minor GlobalAPI and MCP tools config updates.

Author: GCWing

src/web-ui/src/component-library/components/FlowChatCards/BaseToolCard/BaseToolCard.tsx

@@ -4,8 +4,9 @@
  */
 
 import React from 'react';
-import { Loader2, CheckCircle, XCircle, Clock } from 'lucide-react';
+import { Loader2, CheckCircle, XCircle } from 'lucide-react';
 import { useI18n } from '@/infrastructure/i18n';
+import { ToolProcessingDots } from '../ToolProcessingDots';
 import './BaseToolCard.scss';
 
 export interface BaseToolCardProps {
@@ -63,7 +64,7 @@ export const BaseToolCard: React.FC<BaseToolCardProps> = ({
       case 'error':
         return <XCircle className="base-tool-card__status-error" size={12} />;
       default:
-        return <Clock className="base-tool-card__status-pending" size={12} />;
+        return <ToolProcessingDots className="base-tool-card__status-pending" size={12} />;
     }
   };
 

src/web-ui/src/component-library/components/FlowChatCards/SearchCard/SearchCard.tsx

@@ -4,9 +4,10 @@
  */
 
 import React, { useState, useMemo } from 'react';
-import { Search, File, FolderOpen, ChevronDown, ChevronUp, Loader2, CheckCircle, XCircle, Clock } from 'lucide-react';
+import { Search, File, FolderOpen, ChevronDown, ChevronUp, Loader2, CheckCircle, XCircle } from 'lucide-react';
 import { useI18n } from '@/infrastructure/i18n';
 import { BaseToolCard, BaseToolCardProps } from '../BaseToolCard';
+import { ToolProcessingDots } from '../ToolProcessingDots';
 import './SearchCard.scss';
 
 export interface SearchCardProps extends Omit<BaseToolCardProps, 'toolName' | 'displayName'> {
@@ -98,7 +99,7 @@ export const SearchCard: React.FC<SearchCardProps> = ({
       case 'error':
         return <XCircle className="search-card__status-error" size={12} />;
       default:
-        return <Clock className="search-card__status-pending" size={12} />;
+        return <ToolProcessingDots className="search-card__status-pending" size={12} />;
     }
   };
 

src/web-ui/src/component-library/components/FlowChatCards/SnapshotCard/SnapshotCard.tsx

@@ -4,9 +4,10 @@
  */
 
 import React from 'react';
-import { CheckCircle, XCircle, Maximize2, FileText, Loader2, Clock } from 'lucide-react';
+import { CheckCircle, XCircle, Maximize2, FileText, Loader2 } from 'lucide-react';
 import { useI18n } from '@/infrastructure/i18n';
 import { BaseToolCard, BaseToolCardProps } from '../BaseToolCard';
+import { ToolProcessingDots } from '../ToolProcessingDots';
 import './SnapshotCard.scss';
 
 export interface SnapshotCardProps extends Omit<BaseToolCardProps, 'toolName' | 'displayName'> {
@@ -71,7 +72,7 @@ export const SnapshotCard: React.FC<SnapshotCardProps> = ({
       case 'error':
         return <XCircle className="snapshot-card__status-error" size={12} />;
       default:
-        return <Clock className="snapshot-card__status-pending" size={12} />;
+        return <ToolProcessingDots className="snapshot-card__status-pending" size={12} />;
     }
   };
 

src/web-ui/src/component-library/components/FlowChatCards/ToolProcessingDots/ToolProcessingDots.scss

@@ -0,0 +1,75 @@
+/**
+ * Three-dot "processing" indicator for tool cards
+ */
+.bitfun-tool-processing-dots {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: inherit;
+  vertical-align: middle;
+}
+
+.bitfun-tool-processing-dots__dot {
+  flex-shrink: 0;
+  border-radius: 50%;
+  background: currentColor;
+  animation: bitfun-tool-processing-dots-bounce 1.05s ease-in-out infinite;
+
+  &:nth-child(2) {
+    animation-delay: 0.15s;
+  }
+
+  &:nth-child(3) {
+    animation-delay: 0.3s;
+  }
+}
+
+.bitfun-tool-processing-dots--s10 {
+  gap: 1px;
+
+  .bitfun-tool-processing-dots__dot {
+    width: 2px;
+    height: 2px;
+  }
+}
+
+.bitfun-tool-processing-dots--s12 {
+  gap: 2px;
+
+  .bitfun-tool-processing-dots__dot {
+    width: 2px;
+    height: 2px;
+  }
+}
+
+.bitfun-tool-processing-dots--s14 {
+  gap: 2px;
+
+  .bitfun-tool-processing-dots__dot {
+    width: 2.5px;
+    height: 2.5px;
+  }
+}
+
+.bitfun-tool-processing-dots--s16 {
+  gap: 3px;
+
+  .bitfun-tool-processing-dots__dot {
+    width: 3px;
+    height: 3px;
+  }
+}
+
+@keyframes bitfun-tool-processing-dots-bounce {
+  0%,
+  60%,
+  100% {
+    transform: translateY(0);
+    opacity: 0.55;
+  }
+
+  30% {
+    transform: translateY(-2px);
+    opacity: 1;
+  }
+}

src/web-ui/src/component-library/components/FlowChatCards/ToolProcessingDots/ToolProcessingDots.tsx

@@ -0,0 +1,29 @@
+/**
+ * Compact three-dot pulse for tool "pending / parsing" states (replaces clock icon).
+ */
+
+import React from 'react';
+import './ToolProcessingDots.scss';
+
+export type ToolProcessingDotsSize = 10 | 12 | 14 | 16;
+
+export interface ToolProcessingDotsProps {
+  /** Visual scale aligned with common lucide-react icon sizes in tool headers */
+  size?: ToolProcessingDotsSize;
+  className?: string;
+}
+
+export const ToolProcessingDots: React.FC<ToolProcessingDotsProps> = ({
+  size = 14,
+  className = '',
+}) => (
+  <span
+    className={`bitfun-tool-processing-dots bitfun-tool-processing-dots--s${size} ${className}`.trim()}
+    aria-hidden
+    role="presentation"
+  >
+    <span className="bitfun-tool-processing-dots__dot" />
+    <span className="bitfun-tool-processing-dots__dot" />
+    <span className="bitfun-tool-processing-dots__dot" />
+  </span>
+);

src/web-ui/src/component-library/components/FlowChatCards/ToolProcessingDots/index.ts

@@ -0,0 +1,2 @@
+export { ToolProcessingDots } from './ToolProcessingDots';
+export type { ToolProcessingDotsProps, ToolProcessingDotsSize } from './ToolProcessingDots';

src/web-ui/src/component-library/components/FlowChatCards/index.ts

@@ -8,6 +8,9 @@ import { i18nService } from '@/infrastructure/i18n';
 export { BaseToolCard } from './BaseToolCard';
 export type { BaseToolCardProps } from './BaseToolCard';
 
+export { ToolProcessingDots } from './ToolProcessingDots';
+export type { ToolProcessingDotsProps, ToolProcessingDotsSize } from './ToolProcessingDots';
+
 export { SnapshotCard } from './SnapshotCard';
 export type { SnapshotCardProps } from './SnapshotCard';
 

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

@@ -30,6 +30,26 @@ import './Markdown.scss';
 const log = createLogger('Markdown');
 const COMPUTER_LINK_PREFIX = 'computer://';
 
+// Module-level cache so that all simultaneously-mounting Markdown instances
+// (e.g. dozens of history blocks after a workspace switch) share a single
+// IPC round-trip for the workspace path. The in-flight deduplication in
+// GlobalAPI already coalesces concurrent calls into one; this cache avoids
+// even triggering a new IPC call while the result is still fresh.
+let _cachedWorkspacePathResult: string | undefined;
+let _cachedWorkspacePathAt = 0;
+const WORKSPACE_PATH_CACHE_MS = 5000;
+
+async function getWorkspacePathCached(): Promise<string | undefined> {
+  const now = Date.now();
+  if (_cachedWorkspacePathResult !== undefined && now - _cachedWorkspacePathAt < WORKSPACE_PATH_CACHE_MS) {
+    return _cachedWorkspacePathResult;
+  }
+  const result = await globalAPI.getCurrentWorkspacePath();
+  _cachedWorkspacePathResult = result;
+  _cachedWorkspacePathAt = Date.now();
+  return result;
+}
+
 /** Catches render errors from react-markdown/remark-gfm (e.g. RegExp in transformGfmAutolinkLiterals) and shows plain text fallback. */
 class MarkdownErrorBoundary extends Component<
   { children: ReactNode; fallbackContent: string },
@@ -577,7 +597,7 @@ export const Markdown = React.memo<MarkdownProps>(({
   useEffect(() => {
     let cancelled = false;
 
-    void globalAPI.getCurrentWorkspacePath()
+    void getWorkspacePathCached()
       .then((workspacePath) => {
         if (!cancelled && workspacePath) {
           setCurrentWorkspacePath(workspacePath);

src/web-ui/src/flow_chat/components/ToolStatusIndicator.tsx

@@ -3,7 +3,8 @@
  */
 
 import React from 'react';
-import { Loader2, CheckCircle, XCircle, Clock, AlertCircle } from 'lucide-react';
+import { Loader2, CheckCircle, XCircle, AlertCircle, type LucideIcon } from 'lucide-react';
+import { ToolProcessingDots } from '@/component-library';
 import type { ToolExecutionStatus } from '../../shared/types/tool-events';
 
 interface ToolStatusIndicatorProps {
@@ -13,13 +14,24 @@ interface ToolStatusIndicatorProps {
   showLabel?: boolean;
 }
 
-const STATUS_CONFIG = {
+const STATUS_CONFIG: Record<
+  ToolExecutionStatus,
+  {
+    icon: LucideIcon | null;
+    color: string;
+    bgColor: string;
+    label: string;
+    animate: boolean;
+    useDots?: boolean;
+  }
+> = {
   pending: {
-    icon: Clock,
+    icon: null,
     color: 'text-gray-500',
     bgColor: 'bg-gray-100',
     label: 'Waiting',
-    animate: false
+    animate: false,
+    useDots: true,
   },
   receiving: {
     icon: Loader2,
@@ -29,11 +41,12 @@ const STATUS_CONFIG = {
     animate: true
   },
   starting: {
-    icon: Clock,
-    color: 'text-blue-500', 
+    icon: null,
+    color: 'text-blue-500',
     bgColor: 'bg-blue-100',
     label: 'Starting',
-    animate: true
+    animate: false,
+    useDots: true,
   },
   running: {
     icon: Loader2,
@@ -72,7 +85,6 @@ export const ToolStatusIndicator: React.FC<ToolStatusIndicatorProps> = ({
   showLabel = true
 }) => {
   const config = STATUS_CONFIG[status];
-  const Icon = config.icon;
 
   const formatDuration = (ms: number) => {
     if (ms < 1000) return `${ms}ms`;
@@ -83,9 +95,13 @@ export const ToolStatusIndicator: React.FC<ToolStatusIndicatorProps> = ({
   return (
     <div className={`inline-flex items-center gap-2 ${className}`}>
       <div className={`flex items-center justify-center w-5 h-5 rounded-full ${config.bgColor}`}>
-        <Icon 
-          className={`w-3 h-3 ${config.color} ${config.animate ? 'animate-spin' : ''}`}
-        />
+        {config.useDots ? (
+          <ToolProcessingDots size={12} className={config.color} />
+        ) : config.icon ? (
+          <config.icon
+            className={`w-3 h-3 ${config.color} ${config.animate ? 'animate-spin' : ''}`}
+          />
+        ) : null}
       </div>
 
       {showLabel && (

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

@@ -10,12 +10,11 @@ import {
   AlertTriangle,
   AlertCircle,
   Info,
-  Clock,
   ChevronDown,
   ChevronUp,
 } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { Tooltip } from '@/component-library';
+import { Tooltip, ToolProcessingDots } from '@/component-library';
 import type { ToolCardProps } from '../types/flow-chat';
 import { BaseToolCard, ToolCardHeader } from './BaseToolCard';
 import { createLogger } from '@/shared/utils/logger';
@@ -168,7 +167,7 @@ export const CodeReviewToolCard: React.FC<ToolCardProps> = React.memo(({
         return null;
       case 'pending':
       default:
-        return <Clock size={12} />;
+        return <ToolProcessingDots size={12} />;
     }
   };