feat: add Electron desktop app

src/components/chat/hooks/useChatComposerState.ts

@@ -204,6 +204,8 @@ export function useChatComposerState({
 
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const inputHighlightRef = useRef<HTMLDivElement>(null);
+  const textareaLineHeightRef = useRef<number | null>(null);
+  const lastAutosizedInputRef = useRef<string | null>(null);
   const handleSubmitRef = useRef<
     ((event: FormEvent<HTMLFormElement> | MouseEvent | TouchEvent | KeyboardEvent<HTMLTextAreaElement>) => Promise<void>) | null
   >(null);
@@ -457,6 +459,22 @@ export function useChatComposerState({
     inputHighlightRef.current.scrollLeft = target.scrollLeft;
   }, []);
 
+  const resizeTextarea = useCallback((target: HTMLTextAreaElement) => {
+    target.style.height = 'auto';
+    const nextHeight = Math.max(22, target.scrollHeight);
+    target.style.height = `${nextHeight}px`;
+
+    let lineHeight = textareaLineHeightRef.current;
+    if (!lineHeight) {
+      lineHeight = parseInt(window.getComputedStyle(target).lineHeight);
+      textareaLineHeightRef.current = Number.isFinite(lineHeight) ? lineHeight : 24;
+    }
+
+    const expanded = nextHeight > (textareaLineHeightRef.current || 24) * 2;
+    setIsTextareaExpanded((previous) => previous === expanded ? previous : expanded);
+    lastAutosizedInputRef.current = target.value;
+  }, []);
+
   const handleImageFiles = useCallback((files: File[]) => {
     const validFiles = files.filter((file) => {
       try {
@@ -817,13 +835,13 @@ export function useChatComposerState({
     if (!textareaRef.current) {
       return;
     }
-    // Re-run when input changes so restored drafts get the same autosize behavior as typed text.
-    textareaRef.current.style.height = 'auto';
-    textareaRef.current.style.height = `${Math.max(22, textareaRef.current.scrollHeight)}px`;
-    const lineHeight = parseInt(window.getComputedStyle(textareaRef.current).lineHeight);
-    const expanded = textareaRef.current.scrollHeight > lineHeight * 2;
-    setIsTextareaExpanded(expanded);
-  }, [input]);
+    if (lastAutosizedInputRef.current === input) {
+      return;
+    }
+    // Re-run for restored drafts and programmatic input changes. User typing is
+    // already resized in onInput, so this avoids doing the same forced layout twice.
+    resizeTextarea(textareaRef.current);
+  }, [input, resizeTextarea]);
 
   useEffect(() => {
     if (!textareaRef.current || input.trim()) {
@@ -905,15 +923,11 @@ export function useChatComposerState({
   const handleTextareaInput = useCallback(
     (event: FormEvent<HTMLTextAreaElement>) => {
       const target = event.currentTarget;
-      target.style.height = 'auto';
-      target.style.height = `${Math.max(22, target.scrollHeight)}px`;
+      resizeTextarea(target);
       setCursorPosition(target.selectionStart);
       syncInputOverlayScroll(target);
-
-      const lineHeight = parseInt(window.getComputedStyle(target).lineHeight);
-      setIsTextareaExpanded(target.scrollHeight > lineHeight * 2);
     },
-    [setCursorPosition, syncInputOverlayScroll],
+    [resizeTextarea, setCursorPosition, syncInputOverlayScroll],
   );
 
   const handleClearInput = useCallback(() => {

src/components/chat/utils/toolGrouping.ts

@@ -0,0 +1,62 @@
+import type { ChatMessage } from '../types/types';
+
+export const TOOL_GROUP_THRESHOLD = 3;
+
+export interface ToolGroupItem {
+  _isGroup: true;
+  toolName: string;
+  messages: ChatMessage[];
+  timestamp: ChatMessage['timestamp'];
+}
+
+export type MessageListItem = ChatMessage | ToolGroupItem;
+
+export function isToolGroupItem(item: MessageListItem): item is ToolGroupItem {
+  return '_isGroup' in item && (item as ToolGroupItem)._isGroup === true;
+}
+
+function isGroupableToolMessage(message: ChatMessage): message is ChatMessage & { toolName: string } {
+  return Boolean(message.isToolUse && message.toolName && !message.isSubagentContainer);
+}
+
+export function groupConsecutiveTools(messages: ChatMessage[]): MessageListItem[] {
+  const items: MessageListItem[] = [];
+  let index = 0;
+
+  while (index < messages.length) {
+    const message = messages[index];
+
+    if (!isGroupableToolMessage(message)) {
+      items.push(message);
+      index += 1;
+      continue;
+    }
+
+    const run: ChatMessage[] = [message];
+    let nextIndex = index + 1;
+
+    while (
+      nextIndex < messages.length &&
+      isGroupableToolMessage(messages[nextIndex]) &&
+      messages[nextIndex].toolName === message.toolName
+    ) {
+      run.push(messages[nextIndex]);
+      nextIndex += 1;
+    }
+
+    if (run.length >= TOOL_GROUP_THRESHOLD) {
+      items.push({
+        _isGroup: true,
+        toolName: message.toolName,
+        messages: run,
+        timestamp: message.timestamp,
+      });
+    } else {
+      items.push(...run);
+    }
+
+    index = nextIndex;
+  }
+
+  return items;
+}

src/components/chat/view/ChatInterface.tsx

@@ -311,7 +311,7 @@ function ChatInterface({
 
   return (
     <PermissionContext.Provider value={permissionContextValue}>
-      <div className="flex h-full flex-col">
+      <div className="flex h-full min-h-0 flex-col">
         <ChatMessagesPane
           scrollContainerRef={scrollContainerRef}
           onWheel={handleScroll}

src/components/chat/view/subcomponents/ChatComposer.tsx

@@ -1,4 +1,5 @@
 import { useTranslation } from 'react-i18next';
+import { useMemo } from 'react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import type {
   ChangeEvent,
@@ -160,6 +161,17 @@ export default function ChatComposer({
   sendByCtrlEnter,
 }: ChatComposerProps) {
   const { t } = useTranslation('chat');
+  const commandMenuPosition = useMemo(() => {
+    if (!isCommandMenuOpen) {
+      return { top: 0, left: 16, bottom: 90 };
+    }
+    const textareaRect = textareaRef.current?.getBoundingClientRect();
+    return {
+      top: textareaRect ? Math.max(16, textareaRect.top - 316) : 0,
+      left: textareaRect ? textareaRect.left : 16,
+      bottom: textareaRect ? window.innerHeight - textareaRect.top + 8 : 90,
+    };
+  }, [input, isCommandMenuOpen, textareaRef]);
 
   // Voice state is hosted here (not in the mic button) so the main Send button can stop
   // recording and send the transcript in one tap, the way the mic button drops it in the box.
@@ -182,13 +194,6 @@ export default function ChatComposer({
   const isRecording = voiceState === 'recording';
   const isTranscribing = voiceState === 'transcribing';
 
-  const textareaRect = textareaRef.current?.getBoundingClientRect();
-  const commandMenuPosition = {
-    top: textareaRect ? Math.max(16, textareaRect.top - 316) : 0,
-    left: textareaRect ? textareaRect.left : 16,
-    bottom: textareaRect ? window.innerHeight - textareaRect.top + 8 : 90,
-  };
-
   // Detect if the AskUserQuestion interactive panel is active
   const hasQuestionPanel = pendingPermissionRequests.some(
     (r) => r.toolName === 'AskUserQuestion'
@@ -198,7 +203,7 @@ export default function ChatComposer({
   const hasPendingPermissions = pendingPermissionRequests.length > 0;
 
   return (
-    <div className="flex-shrink-0 p-2 pb-2 sm:p-4 sm:pb-4 md:p-4 md:pb-6">
+    <div className="chat-composer-shell flex-shrink-0 p-2 pb-2 sm:p-4 sm:pb-4 md:p-4 md:pb-6">
       {!hasPendingPermissions && (
         <ActivityIndicator activity={activity} onAbort={onAbortSession} />
       )}

src/components/chat/view/subcomponents/ChatMessagesPane.tsx

@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next';
-import { useCallback, useRef } from 'react';
+import { memo, useCallback, useMemo, useRef } from 'react';
 import type { Dispatch, RefObject, SetStateAction } from 'react';
 
 import type { ChatMessage } from '../../types/types';
@@ -10,9 +10,11 @@ import type {
   ProviderModelsDefinition,
 } from '../../../../types/app';
 import { getIntrinsicMessageKey } from '../../utils/messageKeys';
+import { groupConsecutiveTools, isToolGroupItem } from '../../utils/toolGrouping';
 
 import MessageComponent from './MessageComponent';
 import ProviderSelectionEmptyState from './ProviderSelectionEmptyState';
+import ToolGroupContainer from './ToolGroupContainer';
 
 interface ChatMessagesPaneProps {
   scrollContainerRef: RefObject<HTMLDivElement>;
@@ -65,7 +67,7 @@ interface ChatMessagesPaneProps {
   selectedProject: Project;
 }
 
-export default function ChatMessagesPane({
+function ChatMessagesPane({
   scrollContainerRef,
   onWheel,
   onTouchMove,
@@ -118,6 +120,7 @@ export default function ChatMessagesPane({
   const messageKeyMapRef = useRef<WeakMap<ChatMessage, string>>(new WeakMap());
   const allocatedKeysRef = useRef<Set<string>>(new Set());
   const generatedMessageKeyCounterRef = useRef(0);
+  const groupedVisibleMessages = useMemo(() => groupConsecutiveTools(visibleMessages), [visibleMessages]);
 
   // Keep keys stable across prepends so existing MessageComponent instances retain local state.
   const getMessageKey = useCallback((message: ChatMessage) => {
@@ -148,7 +151,7 @@ export default function ChatMessagesPane({
       ref={scrollContainerRef}
       onWheel={onWheel}
       onTouchMove={onTouchMove}
-      className="relative flex-1 space-y-3 overflow-y-auto overflow-x-hidden px-0 py-3 sm:space-y-4 sm:p-4"
+      className="chat-messages-pane relative min-h-0 flex-1 space-y-3 overflow-y-auto overflow-x-hidden px-0 py-3 sm:space-y-4 sm:p-4"
     >
       {(isLoadingSessionMessages || isProcessing) && chatMessages.length === 0 ? (
         <div className="mt-8 text-center text-gray-500 dark:text-gray-400">
@@ -252,28 +255,58 @@ export default function ChatMessagesPane({
             </div>
           )}
 
-          {visibleMessages.map((message, index) => {
-            const prevMessage = index > 0 ? visibleMessages[index - 1] : null;
-            return (
-              <MessageComponent
-                key={getMessageKey(message)}
-                message={message}
-                prevMessage={prevMessage}
-                createDiff={createDiff}
-                onFileOpen={onFileOpen}
-                onShowSettings={onShowSettings}
-                onGrantToolPermission={onGrantToolPermission}
-                autoExpandTools={autoExpandTools}
-                showRawParameters={showRawParameters}
-                showThinking={showThinking}
-                selectedProject={selectedProject}
-                provider={provider}
-              />
-            );
-          })}
+          {(() => {
+            let prevMessage: ChatMessage | null = null;
+
+            return groupedVisibleMessages.map((item) => {
+              if (isToolGroupItem(item)) {
+                const groupPrevMessage = prevMessage;
+                prevMessage = item.messages[item.messages.length - 1] || prevMessage;
+
+                return (
+                  <ToolGroupContainer
+                    key={`tool-group-${getMessageKey(item.messages[0])}`}
+                    group={item}
+                    prevMessage={groupPrevMessage}
+                    createDiff={createDiff}
+                    getMessageKey={getMessageKey}
+                    onFileOpen={onFileOpen}
+                    onShowSettings={onShowSettings}
+                    onGrantToolPermission={onGrantToolPermission}
+                    autoExpandTools={autoExpandTools}
+                    showRawParameters={showRawParameters}
+                    showThinking={showThinking}
+                    selectedProject={selectedProject}
+                    provider={provider}
+                  />
+                );
+              }
+
+              const messagePrevMessage = prevMessage;
+              prevMessage = item;
+
+              return (
+                <MessageComponent
+                  key={getMessageKey(item)}
+                  message={item}
+                  prevMessage={messagePrevMessage}
+                  createDiff={createDiff}
+                  onFileOpen={onFileOpen}
+                  onShowSettings={onShowSettings}
+                  onGrantToolPermission={onGrantToolPermission}
+                  autoExpandTools={autoExpandTools}
+                  showRawParameters={showRawParameters}
+                  showThinking={showThinking}
+                  selectedProject={selectedProject}
+                  provider={provider}
+                />
+              );
+            });
+          })()}
         </>
       )}
     </div>
   );
 }
 
+export default memo(ChatMessagesPane);

src/components/chat/view/subcomponents/ToolGroupContainer.tsx

@@ -0,0 +1,147 @@
+import { useMemo, useState } from 'react';
+import { ChevronRight } from 'lucide-react';
+
+import type { ChatMessage, ClaudePermissionSuggestion, PermissionGrantResult, Provider } from '../../types/types';
+import type { Project } from '../../../../types/app';
+import type { ToolGroupItem } from '../../utils/toolGrouping';
+import { getToolConfig } from '../../tools';
+
+import MessageComponent from './MessageComponent';
+
+type DiffLine = {
+  type: string;
+  content: string;
+  lineNum: number;
+};
+
+interface ToolGroupContainerProps {
+  group: ToolGroupItem;
+  prevMessage: ChatMessage | null;
+  createDiff: (oldStr: string, newStr: string) => DiffLine[];
+  getMessageKey: (message: ChatMessage) => string;
+  onFileOpen?: (filePath: string, diffInfo?: unknown) => void;
+  onShowSettings?: () => void;
+  onGrantToolPermission?: (suggestion: ClaudePermissionSuggestion) => PermissionGrantResult | null | undefined;
+  autoExpandTools?: boolean;
+  showRawParameters?: boolean;
+  showThinking?: boolean;
+  selectedProject?: Project | null;
+  provider: Provider | string;
+}
+
+function parseToolInput(toolInput: unknown): unknown {
+  if (typeof toolInput !== 'string') {
+    return toolInput;
+  }
+
+  try {
+    return JSON.parse(toolInput);
+  } catch {
+    return toolInput;
+  }
+}
+
+function getToolInputPreview(message: ChatMessage): string {
+  const config = getToolConfig(message.toolName || 'UnknownTool').input;
+  const parsedInput = parseToolInput(message.toolInput);
+  const title = typeof config.title === 'function' ? config.title(parsedInput) : config.title;
+  const value = config.getValue?.(parsedInput);
+
+  return String(value || title || message.displayText || message.content || '').trim();
+}
+
+function getToolGroupIcon(icon: string | undefined, toolName: string): string {
+  if (icon === 'terminal') {
+    return '$';
+  }
+
+  return icon || toolName.slice(0, 1).toUpperCase();
+}
+
+export default function ToolGroupContainer({
+  group,
+  prevMessage,
+  createDiff,
+  getMessageKey,
+  onFileOpen,
+  onShowSettings,
+  onGrantToolPermission,
+  autoExpandTools,
+  showRawParameters,
+  showThinking,
+  selectedProject,
+  provider,
+}: ToolGroupContainerProps) {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const config = getToolConfig(group.toolName).input;
+  const label = config.label || group.toolName;
+  const borderClass = config.colorScheme?.border || 'border-border';
+  const iconClass = config.colorScheme?.icon || 'text-muted-foreground';
+  const icon = getToolGroupIcon(config.icon, group.toolName);
+
+  const preview = useMemo(() => {
+    const visiblePreviews = group.messages
+      .slice(0, 2)
+      .map(getToolInputPreview)
+      .filter(Boolean);
+
+    const extraCount = group.messages.length - visiblePreviews.length;
+    const previewText = visiblePreviews.join(', ');
+
+    if (!previewText) {
+      return extraCount > 0 ? `+${extraCount} more` : '';
+    }
+
+    return extraCount > 0 ? `${previewText}, +${extraCount} more` : previewText;
+  }, [group.messages]);
+
+  return (
+    <div className="chat-message tool px-3 sm:px-0" data-message-timestamp={group.timestamp || undefined}>
+      <button
+        type="button"
+        className={`group flex w-full items-center gap-2 border-l-2 ${borderClass} rounded-r-md bg-muted/25 px-3 py-2 text-left transition-colors hover:bg-muted/40 dark:bg-muted/10 dark:hover:bg-muted/20`}
+        onClick={() => setIsExpanded((current) => !current)}
+        aria-expanded={isExpanded}
+      >
+        <ChevronRight
+          className={`h-3.5 w-3.5 flex-shrink-0 text-muted-foreground transition-transform ${isExpanded ? 'rotate-90' : ''}`}
+          aria-hidden
+        />
+        <span className={`${iconClass} flex h-5 w-5 flex-shrink-0 items-center justify-center rounded bg-background/80 text-xs font-medium`}>
+          {icon}
+        </span>
+        <span className="min-w-0 flex-shrink-0 text-xs font-medium text-foreground">{label}</span>
+        <span className="flex-shrink-0 rounded-full bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground">
+          x{group.messages.length}
+        </span>
+        {preview && (
+          <>
+            <span className="text-[10px] text-muted-foreground/40">/</span>
+            <span className="min-w-0 truncate font-mono text-xs text-muted-foreground">{preview}</span>
+          </>
+        )}
+      </button>
+
+      {isExpanded && (
+        <div className="mt-2 space-y-3 sm:space-y-4">
+          {group.messages.map((message, index) => (
+            <MessageComponent
+              key={getMessageKey(message)}
+              message={message}
+              prevMessage={index > 0 ? group.messages[index - 1] : prevMessage}
+              createDiff={createDiff}
+              onFileOpen={onFileOpen}
+              onShowSettings={onShowSettings}
+              onGrantToolPermission={onGrantToolPermission}
+              autoExpandTools={autoExpandTools}
+              showRawParameters={showRawParameters}
+              showThinking={showThinking}
+              selectedProject={selectedProject}
+              provider={provider}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}