From d02597fe8a2fa0b89824aa369ca1f39b316ec6c4 Mon Sep 17 00:00:00 2001
From: sawka <mike@commandline.dev>
Date: Mon, 13 Oct 2025 18:41:33 -0700
Subject: [PATCH 1/6] working on batch approval of read-file tools...

---
 frontend/app/aipanel/aimessage.tsx     | 180 ++++++++++++++++++++++++-
 frontend/app/aipanel/aipanel.tsx       |   8 +-
 pkg/aiusechat/openai/openai-backend.go |   2 -
 pkg/aiusechat/usechat.go               |   8 ++
 4 files changed, 187 insertions(+), 11 deletions(-)

diff --git a/frontend/app/aipanel/aimessage.tsx b/frontend/app/aipanel/aimessage.tsx
index 1a11805d28..09f9338df9 100644
--- a/frontend/app/aipanel/aimessage.tsx
+++ b/frontend/app/aipanel/aimessage.tsx
@@ -68,12 +68,107 @@ const UserMessageFiles = memo(({ fileParts }: UserMessageFilesProps) => {
 
 UserMessageFiles.displayName = "UserMessageFiles";
 
+interface AIToolUseBatchProps {
+    parts: Array<WaveUIMessagePart & { type: "data-tooluse" }>;
+    isStreaming: boolean;
+}
+
+const AIToolUseBatch = memo(({ parts, isStreaming }: AIToolUseBatchProps) => {
+    const [userApprovalOverride, setUserApprovalOverride] = useState<string | null>(null);
+    
+    if (parts.length === 0) return null;
+    
+    const firstTool = parts[0].data;
+    const baseApproval = userApprovalOverride || firstTool.approval;
+    const effectiveApproval = !isStreaming && baseApproval === "needs-approval" ? "timeout" : baseApproval;
+    const allNeedApproval = parts.every(p => (userApprovalOverride || p.data.approval) === "needs-approval");
+    
+    useEffect(() => {
+        if (!isStreaming || effectiveApproval !== "needs-approval") return;
+        
+        const interval = setInterval(() => {
+            parts.forEach(part => {
+                RpcApi.WaveAIToolApproveCommand(TabRpcClient, {
+                    toolcallid: part.data.toolcallid,
+                    keepalive: true,
+                });
+            });
+        }, 4000);
+        
+        return () => clearInterval(interval);
+    }, [isStreaming, effectiveApproval, parts]);
+    
+    const handleApprove = () => {
+        setUserApprovalOverride("user-approved");
+        parts.forEach(part => {
+            RpcApi.WaveAIToolApproveCommand(TabRpcClient, {
+                toolcallid: part.data.toolcallid,
+                approval: "user-approved",
+            });
+        });
+    };
+    
+    const handleDeny = () => {
+        setUserApprovalOverride("user-denied");
+        parts.forEach(part => {
+            RpcApi.WaveAIToolApproveCommand(TabRpcClient, {
+                toolcallid: part.data.toolcallid,
+                approval: "user-denied",
+            });
+        });
+    };
+    
+    const groupTitle = firstTool.toolname === "read_text_file" ? "Reading Files" : "Listing Directories";
+    
+    return (
+        <div className="flex items-start gap-2 p-2 rounded bg-gray-800 border border-gray-700">
+            <div className="flex-1">
+                <div className="font-semibold">{groupTitle}</div>
+                <div className="mt-1 space-y-0.5">
+                    {parts.map((part, idx) => {
+                        const statusIcon = part.data.status === "completed" ? "✓" : part.data.status === "error" ? "✗" : "•";
+                        const statusColor = part.data.status === "completed" ? "text-success" : part.data.status === "error" ? "text-error" : "text-gray-400";
+                        const effectiveErrorMessage = part.data.errormessage || (effectiveApproval === "timeout" ? "Not approved" : null);
+                        return (
+                            <div key={idx} className="text-sm pl-2">
+                                <span className={cn("font-bold mr-1.5", statusColor)}>{statusIcon}</span>
+                                <span className="text-gray-400">{part.data.tooldesc}</span>
+                                {effectiveErrorMessage && (
+                                    <div className="text-red-300 ml-4 mt-0.5">{effectiveErrorMessage}</div>
+                                )}
+                            </div>
+                        );
+                    })}
+                </div>
+                {allNeedApproval && effectiveApproval === "needs-approval" && (
+                    <div className="mt-2 flex gap-2">
+                        <button
+                            onClick={handleApprove}
+                            className="px-3 py-1 border border-gray-600 text-gray-300 hover:border-gray-500 hover:text-white text-sm rounded cursor-pointer transition-colors"
+                        >
+                            Approve All ({parts.length})
+                        </button>
+                        <button
+                            onClick={handleDeny}
+                            className="px-3 py-1 border border-gray-600 text-gray-300 hover:border-gray-500 hover:text-white text-sm rounded cursor-pointer transition-colors"
+                        >
+                            Deny All
+                        </button>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+});
+
+AIToolUseBatch.displayName = "AIToolUseBatch";
+
 interface AIToolUseProps {
     part: WaveUIMessagePart & { type: "data-tooluse" };
     isStreaming: boolean;
 }
 
-const AIToolUse = memo(({ part }: AIToolUseProps) => {
+const AIToolUse = memo(({ part, isStreaming }: AIToolUseProps) => {
     const toolData = part.data;
     const [userApprovalOverride, setUserApprovalOverride] = useState<string | null>(null);
 
@@ -81,10 +176,11 @@ const AIToolUse = memo(({ part }: AIToolUseProps) => {
     const statusColor =
         toolData.status === "completed" ? "text-success" : toolData.status === "error" ? "text-error" : "text-gray-400";
 
-    const effectiveApproval = userApprovalOverride || toolData.approval;
+    const baseApproval = userApprovalOverride || toolData.approval;
+    const effectiveApproval = !isStreaming && baseApproval === "needs-approval" ? "timeout" : baseApproval;
 
     useEffect(() => {
-        if (effectiveApproval !== "needs-approval") return;
+        if (!isStreaming || effectiveApproval !== "needs-approval") return;
 
         const interval = setInterval(() => {
             RpcApi.WaveAIToolApproveCommand(TabRpcClient, {
@@ -94,7 +190,7 @@ const AIToolUse = memo(({ part }: AIToolUseProps) => {
         }, 4000);
 
         return () => clearInterval(interval);
-    }, [effectiveApproval, toolData.toolcallid]);
+    }, [isStreaming, effectiveApproval, toolData.toolcallid]);
 
     const handleApprove = () => {
         setUserApprovalOverride("user-approved");
@@ -118,7 +214,11 @@ const AIToolUse = memo(({ part }: AIToolUseProps) => {
             <div className="flex-1">
                 <div className="font-semibold">{toolData.toolname}</div>
                 {toolData.tooldesc && <div className="text-sm text-gray-400">{toolData.tooldesc}</div>}
-                {toolData.errormessage && <div className="text-sm text-red-300 mt-1">{toolData.errormessage}</div>}
+                {(toolData.errormessage || effectiveApproval === "timeout") && (
+                    <div className="text-sm text-red-300 mt-1">
+                        {toolData.errormessage || "Not approved"}
+                    </div>
+                )}
                 {effectiveApproval === "needs-approval" && (
                     <div className="mt-2 flex gap-2">
                         <button
@@ -190,6 +290,66 @@ const isDisplayPart = (part: WaveUIMessagePart): boolean => {
     );
 };
 
+const isFileOperation = (part: WaveUIMessagePart): boolean => {
+    if (part.type !== "data-tooluse") return false;
+    const toolName = part.data?.toolname;
+    return toolName === "read_text_file" || toolName === "read_dir";
+};
+
+type GroupedPart =
+    | { type: "single"; part: WaveUIMessagePart }
+    | { type: "batch"; parts: Array<WaveUIMessagePart & { type: "data-tooluse" }> };
+
+const groupFileParts = (parts: WaveUIMessagePart[]): GroupedPart[] => {
+    const grouped: GroupedPart[] = [];
+    let currentBatch: Array<WaveUIMessagePart & { type: "data-tooluse" }> = [];
+    let currentToolName: string | null = null;
+    let currentNeedsApproval: boolean | null = null;
+    
+    for (const part of parts) {
+        if (isFileOperation(part)) {
+            const toolPart = part as WaveUIMessagePart & { type: "data-tooluse" };
+            const toolName = toolPart.data.toolname;
+            const needsApproval = toolPart.data.approval === "needs-approval";
+            
+            if (currentBatch.length === 0) {
+                currentBatch.push(toolPart);
+                currentToolName = toolName;
+                currentNeedsApproval = needsApproval;
+            } else if (toolName === currentToolName && needsApproval === currentNeedsApproval) {
+                currentBatch.push(toolPart);
+            } else {
+                if (currentBatch.length > 1) {
+                    grouped.push({ type: "batch", parts: currentBatch });
+                } else if (currentBatch.length === 1) {
+                    grouped.push({ type: "single", part: currentBatch[0] });
+                }
+                currentBatch = [toolPart];
+                currentToolName = toolName;
+                currentNeedsApproval = needsApproval;
+            }
+        } else {
+            if (currentBatch.length > 1) {
+                grouped.push({ type: "batch", parts: currentBatch });
+            } else if (currentBatch.length === 1) {
+                grouped.push({ type: "single", part: currentBatch[0] });
+            }
+            currentBatch = [];
+            currentToolName = null;
+            currentNeedsApproval = null;
+            grouped.push({ type: "single", part });
+        }
+    }
+    
+    if (currentBatch.length > 1) {
+        grouped.push({ type: "batch", parts: currentBatch });
+    } else if (currentBatch.length === 1) {
+        grouped.push({ type: "single", part: currentBatch[0] });
+    }
+    
+    return grouped;
+};
+
 export const AIMessage = memo(({ message, isStreaming }: AIMessageProps) => {
     const parts = message.parts || [];
     const displayParts = parts.filter(isDisplayPart);
@@ -205,6 +365,8 @@ export const AIMessage = memo(({ message, isStreaming }: AIMessageProps) => {
 
     const showThinkingOnly = !hasContent && isStreaming && message.role === "assistant";
     const showThinkingInline = hasContent && isStreaming && message.role === "assistant";
+    
+    const groupedParts = groupFileParts(displayParts);
 
     return (
         <div className={cn("flex", message.role === "user" ? "justify-end" : "justify-start")}>
@@ -220,9 +382,13 @@ export const AIMessage = memo(({ message, isStreaming }: AIMessageProps) => {
                     <div className="whitespace-pre-wrap break-words">(no text content)</div>
                 ) : (
                     <>
-                        {displayParts.map((part, index: number) => (
+                        {groupedParts.map((group, index: number) => (
                             <div key={index} className={cn(index > 0 && "mt-2")}>
-                                <AIMessagePart part={part} role={message.role} isStreaming={isStreaming} />
+                                {group.type === "batch" ? (
+                                    <AIToolUseBatch parts={group.parts} isStreaming={isStreaming} />
+                                ) : (
+                                    <AIMessagePart part={group.part} role={message.role} isStreaming={isStreaming} />
+                                )}
                             </div>
                         ))}
                         {showThinkingInline && (
diff --git a/frontend/app/aipanel/aipanel.tsx b/frontend/app/aipanel/aipanel.tsx
index 3ecbdf8830..a76a24d791 100644
--- a/frontend/app/aipanel/aipanel.tsx
+++ b/frontend/app/aipanel/aipanel.tsx
@@ -235,7 +235,7 @@ const AIPanelComponentInner = memo(({ className, onClose }: AIPanelProps) => {
         },
     });
 
-    // console.log("AICHAT messages", messages);
+    console.log("AICHAT messages", messages);
 
     const clearChat = () => {
         model.clearChat();
@@ -529,7 +529,11 @@ const AIPanelComponentInner = memo(({ className, onClose }: AIPanelProps) => {
                                 <AIWelcomeMessage />
                             </div>
                         ) : (
-                            <AIPanelMessages messages={messages} status={status} onContextMenu={handleMessagesContextMenu} />
+                            <AIPanelMessages
+                                messages={messages}
+                                status={status}
+                                onContextMenu={handleMessagesContextMenu}
+                            />
                         )}
                         {errorMessage && (
                             <AIErrorMessage errorMessage={errorMessage} onClear={() => model.clearError()} />
diff --git a/pkg/aiusechat/openai/openai-backend.go b/pkg/aiusechat/openai/openai-backend.go
index e8fa7db00b..6f4a4301f2 100644
--- a/pkg/aiusechat/openai/openai-backend.go
+++ b/pkg/aiusechat/openai/openai-backend.go
@@ -818,8 +818,6 @@ func handleOpenAIEvent(
 			if toolUseData.Approval == uctypes.ApprovalNeedsApproval && state.chatOpts.RegisterToolApproval != nil {
 				state.chatOpts.RegisterToolApproval(st.toolCallID)
 			}
-			log.Printf("AI data-tooluse %s\n", st.toolCallID)
-			_ = sse.AiMsgData("data-tooluse", st.toolCallID, *toolUseData)
 		}
 		return nil, nil
 
diff --git a/pkg/aiusechat/usechat.go b/pkg/aiusechat/usechat.go
index b0b1aa05ab..a7e54e27a9 100644
--- a/pkg/aiusechat/usechat.go
+++ b/pkg/aiusechat/usechat.go
@@ -310,6 +310,14 @@ func processToolCalls(stopReason *uctypes.WaveStopReason, chatOpts uctypes.WaveC
 		defer activeToolMap.Delete(toolCall.ID)
 	}
 
+	// Send all data-tooluse packets at the beginning
+	for _, toolCall := range stopReason.ToolCalls {
+		if toolCall.ToolUseData != nil {
+			log.Printf("AI data-tooluse %s\n", toolCall.ID)
+			_ = sseHandler.AiMsgData("data-tooluse", toolCall.ID, *toolCall.ToolUseData)
+		}
+	}
+
 	var toolResults []uctypes.AIToolResult
 	for _, toolCall := range stopReason.ToolCalls {
 		result := processToolCall(toolCall, chatOpts, sseHandler, metrics)

From 89d97ef3dd7bad97bec4003e78364c81fc39980d Mon Sep 17 00:00:00 2001
From: sawka <mike@commandline.dev>
Date: Mon, 13 Oct 2025 21:43:01 -0700
Subject: [PATCH 2/6] bundle monaco, shiki, mermaid, etc separately

---
 .gitignore              |  1 +
 electron.vite.config.ts | 14 ++++++++++++++
 package-lock.json       |  4 ++--
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/.gitignore b/.gitignore
index 57fd982c96..78f683ee96 100644
--- a/.gitignore
+++ b/.gitignore
@@ -17,6 +17,7 @@ make/
 artifacts/
 mikework/
 .env
+out
 
 # Yarn Modern
 .pnp.*
diff --git a/electron.vite.config.ts b/electron.vite.config.ts
index 1b16581370..43eeb869d8 100644
--- a/electron.vite.config.ts
+++ b/electron.vite.config.ts
@@ -130,6 +130,20 @@ export default defineConfig({
                 input: {
                     index: "index.html",
                 },
+                output: {
+                    manualChunks(id) {
+                        if (id.includes("node_modules/monaco") || id.includes("node_modules/@monaco")) return "monaco";
+                        if (id.includes("node_modules/mermaid") || id.includes("node_modules/@mermaid"))
+                            return "mermaid";
+                        if (id.includes("node_modules/katex") || id.includes("node_modules/@katex")) return "katex";
+                        if (id.includes("node_modules/shiki") || id.includes("node_modules/@shiki")) {
+                            return "shiki";
+                        }
+                        if (id.includes("node_modules/cytoscape") || id.includes("node_modules/@cytoscape"))
+                            return "cytoscape";
+                        return undefined;
+                    },
+                },
             },
         },
         optimizeDeps: {
diff --git a/package-lock.json b/package-lock.json
index 51d7be2188..dc23c81a4d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "waveterm",
-    "version": "0.12.0-beta.0",
+    "version": "0.12.0-beta.1",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "waveterm",
-            "version": "0.12.0-beta.0",
+            "version": "0.12.0-beta.1",
             "hasInstallScript": true,
             "license": "Apache-2.0",
             "workspaces": [

From c9f527c2a79490db866abef328f6bfaefa88a3c9 Mon Sep 17 00:00:00 2001
From: sawka <mike@commandline.dev>
Date: Mon, 13 Oct 2025 22:09:50 -0700
Subject: [PATCH 3/6] simpler batching logic

---
 frontend/app/aipanel/aimessage.tsx | 184 ++++++++++++++++-------------
 1 file changed, 101 insertions(+), 83 deletions(-)

diff --git a/frontend/app/aipanel/aimessage.tsx b/frontend/app/aipanel/aimessage.tsx
index 09f9338df9..f01a896a8f 100644
--- a/frontend/app/aipanel/aimessage.tsx
+++ b/frontend/app/aipanel/aimessage.tsx
@@ -75,60 +75,67 @@ interface AIToolUseBatchProps {
 
 const AIToolUseBatch = memo(({ parts, isStreaming }: AIToolUseBatchProps) => {
     const [userApprovalOverride, setUserApprovalOverride] = useState<string | null>(null);
-    
+
     if (parts.length === 0) return null;
-    
+
     const firstTool = parts[0].data;
     const baseApproval = userApprovalOverride || firstTool.approval;
     const effectiveApproval = !isStreaming && baseApproval === "needs-approval" ? "timeout" : baseApproval;
-    const allNeedApproval = parts.every(p => (userApprovalOverride || p.data.approval) === "needs-approval");
-    
+    const allNeedApproval = parts.every((p) => (userApprovalOverride || p.data.approval) === "needs-approval");
+
     useEffect(() => {
         if (!isStreaming || effectiveApproval !== "needs-approval") return;
-        
+
         const interval = setInterval(() => {
-            parts.forEach(part => {
+            parts.forEach((part) => {
                 RpcApi.WaveAIToolApproveCommand(TabRpcClient, {
                     toolcallid: part.data.toolcallid,
                     keepalive: true,
                 });
             });
         }, 4000);
-        
+
         return () => clearInterval(interval);
     }, [isStreaming, effectiveApproval, parts]);
-    
+
     const handleApprove = () => {
         setUserApprovalOverride("user-approved");
-        parts.forEach(part => {
+        parts.forEach((part) => {
             RpcApi.WaveAIToolApproveCommand(TabRpcClient, {
                 toolcallid: part.data.toolcallid,
                 approval: "user-approved",
             });
         });
     };
-    
+
     const handleDeny = () => {
         setUserApprovalOverride("user-denied");
-        parts.forEach(part => {
+        parts.forEach((part) => {
             RpcApi.WaveAIToolApproveCommand(TabRpcClient, {
                 toolcallid: part.data.toolcallid,
                 approval: "user-denied",
             });
         });
     };
-    
+
     const groupTitle = firstTool.toolname === "read_text_file" ? "Reading Files" : "Listing Directories";
-    
+
     return (
         <div className="flex items-start gap-2 p-2 rounded bg-gray-800 border border-gray-700">
             <div className="flex-1">
                 <div className="font-semibold">{groupTitle}</div>
                 <div className="mt-1 space-y-0.5">
                     {parts.map((part, idx) => {
-                        const statusIcon = part.data.status === "completed" ? "✓" : part.data.status === "error" ? "✗" : "•";
-                        const statusColor = part.data.status === "completed" ? "text-success" : part.data.status === "error" ? "text-error" : "text-gray-400";
-                        const effectiveErrorMessage = part.data.errormessage || (effectiveApproval === "timeout" ? "Not approved" : null);
+                        const statusIcon =
+                            part.data.status === "completed" ? "✓" : part.data.status === "error" ? "✗" : "•";
+                        const statusColor =
+                            part.data.status === "completed"
+                                ? "text-success"
+                                : part.data.status === "error"
+                                  ? "text-error"
+                                  : "text-gray-400";
+                        const effectiveErrorMessage =
+                            part.data.errormessage || (effectiveApproval === "timeout" ? "Not approved" : null);
                         return (
                             <div key={idx} className="text-sm pl-2">
                                 <span className={cn("font-bold mr-1.5", statusColor)}>{statusIcon}</span>
@@ -215,9 +222,7 @@ const AIToolUse = memo(({ part, isStreaming }: AIToolUseProps) => {
                 <div className="font-semibold">{toolData.toolname}</div>
                 {toolData.tooldesc && <div className="text-sm text-gray-400">{toolData.tooldesc}</div>}
                 {(toolData.errormessage || effectiveApproval === "timeout") && (
-                    <div className="text-sm text-red-300 mt-1">
-                        {toolData.errormessage || "Not approved"}
-                    </div>
+                    <div className="text-sm text-red-300 mt-1">{toolData.errormessage || "Not approved"}</div>
                 )}
                 {effectiveApproval === "needs-approval" && (
                     <div className="mt-2 flex gap-2">
@@ -242,6 +247,56 @@ const AIToolUse = memo(({ part, isStreaming }: AIToolUseProps) => {
 
 AIToolUse.displayName = "AIToolUse";
 
+interface AIToolUseGroupProps {
+    parts: Array<WaveUIMessagePart & { type: "data-tooluse" }>;
+    isStreaming: boolean;
+}
+
+const AIToolUseGroup = memo(({ parts, isStreaming }: AIToolUseGroupProps) => {
+    const isFileOp = (part: WaveUIMessagePart & { type: "data-tooluse" }) => {
+        const toolName = part.data?.toolname;
+        return toolName === "read_text_file" || toolName === "read_dir";
+    };
+
+    const fileOpsNeedApproval: Array<WaveUIMessagePart & { type: "data-tooluse" }> = [];
+    const fileOpsNoApproval: Array<WaveUIMessagePart & { type: "data-tooluse" }> = [];
+    const otherTools: Array<WaveUIMessagePart & { type: "data-tooluse" }> = [];
+
+    for (const part of parts) {
+        if (isFileOp(part)) {
+            if (part.data.approval === "needs-approval") {
+                fileOpsNeedApproval.push(part);
+            } else {
+                fileOpsNoApproval.push(part);
+            }
+        } else {
+            otherTools.push(part);
+        }
+    }
+
+    return (
+        <>
+            {fileOpsNoApproval.length > 0 && (
+                <div className="mt-2">
+                    <AIToolUseBatch parts={fileOpsNoApproval} isStreaming={isStreaming} />
+                </div>
+            )}
+            {fileOpsNeedApproval.length > 0 && (
+                <div className="mt-2">
+                    <AIToolUseBatch parts={fileOpsNeedApproval} isStreaming={isStreaming} />
+                </div>
+            )}
+            {otherTools.map((tool, idx) => (
+                <div key={idx} className="mt-2">
+                    <AIToolUse part={tool} isStreaming={isStreaming} />
+                </div>
+            ))}
+        </>
+    );
+});
+
+AIToolUseGroup.displayName = "AIToolUseGroup";
+
 interface AIMessagePartProps {
     part: WaveUIMessagePart;
     role: string;
@@ -268,10 +323,6 @@ const AIMessagePart = memo(({ part, role, isStreaming }: AIMessagePartProps) =>
         }
     }
 
-    if (part.type === "data-tooluse" && part.data) {
-        return <AIToolUse part={part as WaveUIMessagePart & { type: "data-tooluse" }} isStreaming={isStreaming} />;
-    }
-
     return null;
 });
 
@@ -290,63 +341,30 @@ const isDisplayPart = (part: WaveUIMessagePart): boolean => {
     );
 };
 
-const isFileOperation = (part: WaveUIMessagePart): boolean => {
-    if (part.type !== "data-tooluse") return false;
-    const toolName = part.data?.toolname;
-    return toolName === "read_text_file" || toolName === "read_dir";
-};
-
-type GroupedPart =
+type MessagePart =
     | { type: "single"; part: WaveUIMessagePart }
-    | { type: "batch"; parts: Array<WaveUIMessagePart & { type: "data-tooluse" }> };
-
-const groupFileParts = (parts: WaveUIMessagePart[]): GroupedPart[] => {
-    const grouped: GroupedPart[] = [];
-    let currentBatch: Array<WaveUIMessagePart & { type: "data-tooluse" }> = [];
-    let currentToolName: string | null = null;
-    let currentNeedsApproval: boolean | null = null;
-    
+    | { type: "toolgroup"; parts: Array<WaveUIMessagePart & { type: "data-tooluse" }> };
+
+const groupMessageParts = (parts: WaveUIMessagePart[]): MessagePart[] => {
+    const grouped: MessagePart[] = [];
+    let currentToolGroup: Array<WaveUIMessagePart & { type: "data-tooluse" }> = [];
+
     for (const part of parts) {
-        if (isFileOperation(part)) {
-            const toolPart = part as WaveUIMessagePart & { type: "data-tooluse" };
-            const toolName = toolPart.data.toolname;
-            const needsApproval = toolPart.data.approval === "needs-approval";
-            
-            if (currentBatch.length === 0) {
-                currentBatch.push(toolPart);
-                currentToolName = toolName;
-                currentNeedsApproval = needsApproval;
-            } else if (toolName === currentToolName && needsApproval === currentNeedsApproval) {
-                currentBatch.push(toolPart);
-            } else {
-                if (currentBatch.length > 1) {
-                    grouped.push({ type: "batch", parts: currentBatch });
-                } else if (currentBatch.length === 1) {
-                    grouped.push({ type: "single", part: currentBatch[0] });
-                }
-                currentBatch = [toolPart];
-                currentToolName = toolName;
-                currentNeedsApproval = needsApproval;
-            }
+        if (part.type === "data-tooluse") {
+            currentToolGroup.push(part as WaveUIMessagePart & { type: "data-tooluse" });
         } else {
-            if (currentBatch.length > 1) {
-                grouped.push({ type: "batch", parts: currentBatch });
-            } else if (currentBatch.length === 1) {
-                grouped.push({ type: "single", part: currentBatch[0] });
+            if (currentToolGroup.length > 0) {
+                grouped.push({ type: "toolgroup", parts: currentToolGroup });
+                currentToolGroup = [];
             }
-            currentBatch = [];
-            currentToolName = null;
-            currentNeedsApproval = null;
             grouped.push({ type: "single", part });
         }
     }
-    
-    if (currentBatch.length > 1) {
-        grouped.push({ type: "batch", parts: currentBatch });
-    } else if (currentBatch.length === 1) {
-        grouped.push({ type: "single", part: currentBatch[0] });
+
+    if (currentToolGroup.length > 0) {
+        grouped.push({ type: "toolgroup", parts: currentToolGroup });
     }
-    
+
     return grouped;
 };
 
@@ -365,14 +383,14 @@ export const AIMessage = memo(({ message, isStreaming }: AIMessageProps) => {
 
     const showThinkingOnly = !hasContent && isStreaming && message.role === "assistant";
     const showThinkingInline = hasContent && isStreaming && message.role === "assistant";
-    
-    const groupedParts = groupFileParts(displayParts);
+
+    const groupedParts = groupMessageParts(displayParts);
 
     return (
         <div className={cn("flex", message.role === "user" ? "justify-end" : "justify-start")}>
             <div
                 className={cn(
-                    "px-2 py-2 rounded-lg",
+                    "px-2 py-2 rounded-lg [&>*:first-child]:!mt-0",
                     message.role === "user" ? "bg-accent-800 text-white max-w-[calc(100%-20px)]" : null
                 )}
             >
@@ -382,15 +400,15 @@ export const AIMessage = memo(({ message, isStreaming }: AIMessageProps) => {
                     <div className="whitespace-pre-wrap break-words">(no text content)</div>
                 ) : (
                     <>
-                        {groupedParts.map((group, index: number) => (
-                            <div key={index} className={cn(index > 0 && "mt-2")}>
-                                {group.type === "batch" ? (
-                                    <AIToolUseBatch parts={group.parts} isStreaming={isStreaming} />
-                                ) : (
+                        {groupedParts.map((group, index: number) =>
+                            group.type === "toolgroup" ? (
+                                <AIToolUseGroup key={index} parts={group.parts} isStreaming={isStreaming} />
+                            ) : (
+                                <div key={index} className="mt-2">
                                     <AIMessagePart part={group.part} role={message.role} isStreaming={isStreaming} />
-                                )}
-                            </div>
-                        ))}
+                                </div>
+                            )
+                        )}
                         {showThinkingInline && (
                             <div className="mt-2">
                                 <AIThinking />

From 46ee88b91915aed611836095e55018d340b49d4c Mon Sep 17 00:00:00 2001
From: sawka <mike@commandline.dev>
Date: Mon, 13 Oct 2025 22:51:37 -0700
Subject: [PATCH 4/6] fix the "streaming" / "AI is thinking..." message

---
 frontend/app/aipanel/aimessage.tsx | 70 ++++++++++++++++++++++--------
 frontend/app/aipanel/aipanel.tsx   |  2 +-
 2 files changed, 53 insertions(+), 19 deletions(-)

diff --git a/frontend/app/aipanel/aimessage.tsx b/frontend/app/aipanel/aimessage.tsx
index f01a896a8f..12375e9931 100644
--- a/frontend/app/aipanel/aimessage.tsx
+++ b/frontend/app/aipanel/aimessage.tsx
@@ -10,14 +10,14 @@ import { getFileIcon } from "./ai-utils";
 import { WaveUIMessage, WaveUIMessagePart } from "./aitypes";
 import { WaveAIModel } from "./waveai-model";
 
-const AIThinking = memo(() => (
+const AIThinking = memo(({ message = "AI is thinking..." }: { message?: string }) => (
     <div className="flex items-center gap-2">
         <div className="animate-pulse flex items-center">
             <i className="fa fa-circle text-[10px]"></i>
             <i className="fa fa-circle text-[10px] mx-1"></i>
             <i className="fa fa-circle text-[10px]"></i>
         </div>
-        <span className="text-sm text-gray-400">AI is thinking...</span>
+        {message && <span className="text-sm text-gray-400">{message}</span>}
     </div>
 ));
 
@@ -368,35 +368,69 @@ const groupMessageParts = (parts: WaveUIMessagePart[]): MessagePart[] => {
     return grouped;
 };
 
+const getThinkingMessage = (parts: WaveUIMessagePart[], isStreaming: boolean, role: string): string | null => {
+    if (!isStreaming || role !== "assistant") {
+        return null;
+    }
+
+    // Check if there are any pending-approval tool calls - this takes priority
+    const hasPendingApprovals = parts.some(
+        (part) => part.type === "data-tooluse" && part.data?.approval === "needs-approval"
+    );
+
+    if (hasPendingApprovals) {
+        return "Waiting for Tool Approvals...";
+    }
+
+    // Find the last "step-start" marker
+    let lastStartStepIndex = -1;
+    for (let i = parts.length - 1; i >= 0; i--) {
+        if (parts[i].type === "step-start") {
+            lastStartStepIndex = i;
+            break;
+        }
+    }
+
+    // Get parts after the last start-step (or all parts if no start-step)
+    const partsAfterLastStep = lastStartStepIndex !== -1 ? parts.slice(lastStartStepIndex + 1) : parts;
+
+    // Check if there's content after the last step
+    const hasContentAfterStep = partsAfterLastStep.some(
+        (part) => (part.type === "text" && part.text) || part.type.startsWith("tool-") || part.type === "data-tooluse"
+    );
+
+    if (hasContentAfterStep) {
+        return null;
+    }
+
+    // Check if the last part is a reasoning part
+    const lastPart = parts[parts.length - 1];
+    if (lastPart?.type === "reasoning") {
+        return "AI is thinking...";
+    }
+
+    return "";
+};
+
 export const AIMessage = memo(({ message, isStreaming }: AIMessageProps) => {
     const parts = message.parts || [];
     const displayParts = parts.filter(isDisplayPart);
     const fileParts = parts.filter(
         (part): part is WaveUIMessagePart & { type: "data-userfile" } => part.type === "data-userfile"
     );
-    const hasContent =
-        displayParts.length > 0 &&
-        displayParts.some(
-            (part) =>
-                (part.type === "text" && part.text) || part.type.startsWith("tool-") || part.type === "data-tooluse"
-        );
-
-    const showThinkingOnly = !hasContent && isStreaming && message.role === "assistant";
-    const showThinkingInline = hasContent && isStreaming && message.role === "assistant";
 
+    const thinkingMessage = getThinkingMessage(parts, isStreaming, message.role);
     const groupedParts = groupMessageParts(displayParts);
 
     return (
         <div className={cn("flex", message.role === "user" ? "justify-end" : "justify-start")}>
             <div
                 className={cn(
-                    "px-2 py-2 rounded-lg [&>*:first-child]:!mt-0",
-                    message.role === "user" ? "bg-accent-800 text-white max-w-[calc(100%-20px)]" : null
+                    "px-2 rounded-lg [&>*:first-child]:!mt-0",
+                    message.role === "user" ? "py-2 bg-accent-800 text-white max-w-[calc(100%-20px)]" : null
                 )}
             >
-                {showThinkingOnly ? (
-                    <AIThinking />
-                ) : !hasContent && !isStreaming ? (
+                {displayParts.length === 0 && !isStreaming && !thinkingMessage ? (
                     <div className="whitespace-pre-wrap break-words">(no text content)</div>
                 ) : (
                     <>
@@ -409,9 +443,9 @@ export const AIMessage = memo(({ message, isStreaming }: AIMessageProps) => {
                                 </div>
                             )
                         )}
-                        {showThinkingInline && (
+                        {thinkingMessage != null && (
                             <div className="mt-2">
-                                <AIThinking />
+                                <AIThinking message={thinkingMessage} />
                             </div>
                         )}
                     </>
diff --git a/frontend/app/aipanel/aipanel.tsx b/frontend/app/aipanel/aipanel.tsx
index a76a24d791..4231d3add4 100644
--- a/frontend/app/aipanel/aipanel.tsx
+++ b/frontend/app/aipanel/aipanel.tsx
@@ -235,7 +235,7 @@ const AIPanelComponentInner = memo(({ className, onClose }: AIPanelProps) => {
         },
     });
 
-    console.log("AICHAT messages", messages);
+    // console.log("AICHAT messages", messages);
 
     const clearChat = () => {
         model.clearChat();

From f1411319f38420a0765ad42decf1cd534bc2a01e Mon Sep 17 00:00:00 2001
From: sawka <mike@commandline.dev>
Date: Mon, 13 Oct 2025 23:18:29 -0700
Subject: [PATCH 5/6] simplified thinking indicator logic, refactored common
 code for approvals, fix group part title

---
 frontend/app/aipanel/aimessage.tsx | 145 ++++++++++++++---------------
 1 file changed, 72 insertions(+), 73 deletions(-)

diff --git a/frontend/app/aipanel/aimessage.tsx b/frontend/app/aipanel/aimessage.tsx
index 12375e9931..e860cf4304 100644
--- a/frontend/app/aipanel/aimessage.tsx
+++ b/frontend/app/aipanel/aimessage.tsx
@@ -68,6 +68,64 @@ const UserMessageFiles = memo(({ fileParts }: UserMessageFilesProps) => {
 
 UserMessageFiles.displayName = "UserMessageFiles";
 
+interface AIToolApprovalButtonsProps {
+    count: number;
+    onApprove: () => void;
+    onDeny: () => void;
+}
+
+const AIToolApprovalButtons = memo(({ count, onApprove, onDeny }: AIToolApprovalButtonsProps) => {
+    const approveText = count > 1 ? `Approve All (${count})` : "Approve";
+    const denyText = count > 1 ? "Deny All" : "Deny";
+
+    return (
+        <div className="mt-2 flex gap-2">
+            <button
+                onClick={onApprove}
+                className="px-3 py-1 border border-gray-600 text-gray-300 hover:border-gray-500 hover:text-white text-sm rounded cursor-pointer transition-colors"
+            >
+                {approveText}
+            </button>
+            <button
+                onClick={onDeny}
+                className="px-3 py-1 border border-gray-600 text-gray-300 hover:border-gray-500 hover:text-white text-sm rounded cursor-pointer transition-colors"
+            >
+                {denyText}
+            </button>
+        </div>
+    );
+});
+
+AIToolApprovalButtons.displayName = "AIToolApprovalButtons";
+
+interface AIToolUseBatchItemProps {
+    part: WaveUIMessagePart & { type: "data-tooluse" };
+    effectiveApproval: string;
+}
+
+const AIToolUseBatchItem = memo(({ part, effectiveApproval }: AIToolUseBatchItemProps) => {
+    const statusIcon = part.data.status === "completed" ? "✓" : part.data.status === "error" ? "✗" : "•";
+    const statusColor =
+        part.data.status === "completed"
+            ? "text-success"
+            : part.data.status === "error"
+              ? "text-error"
+              : "text-gray-400";
+    const effectiveErrorMessage = part.data.errormessage || (effectiveApproval === "timeout" ? "Not approved" : null);
+
+    return (
+        <div className="text-sm pl-2 flex items-start gap-1.5">
+            <span className={cn("font-bold flex-shrink-0", statusColor)}>{statusIcon}</span>
+            <div className="flex-1">
+                <span className="text-gray-400">{part.data.tooldesc}</span>
+                {effectiveErrorMessage && <div className="text-red-300 mt-0.5">{effectiveErrorMessage}</div>}
+            </div>
+        </div>
+    );
+});
+
+AIToolUseBatchItem.displayName = "AIToolUseBatchItem";
+
 interface AIToolUseBatchProps {
     parts: Array<WaveUIMessagePart & { type: "data-tooluse" }>;
     isStreaming: boolean;
@@ -118,50 +176,17 @@ const AIToolUseBatch = memo(({ parts, isStreaming }: AIToolUseBatchProps) => {
         });
     };
 
-    const groupTitle = firstTool.toolname === "read_text_file" ? "Reading Files" : "Listing Directories";
-
     return (
         <div className="flex items-start gap-2 p-2 rounded bg-gray-800 border border-gray-700">
             <div className="flex-1">
-                <div className="font-semibold">{groupTitle}</div>
+                <div className="font-semibold">Reading Files</div>
                 <div className="mt-1 space-y-0.5">
-                    {parts.map((part, idx) => {
-                        const statusIcon =
-                            part.data.status === "completed" ? "✓" : part.data.status === "error" ? "✗" : "•";
-                        const statusColor =
-                            part.data.status === "completed"
-                                ? "text-success"
-                                : part.data.status === "error"
-                                  ? "text-error"
-                                  : "text-gray-400";
-                        const effectiveErrorMessage =
-                            part.data.errormessage || (effectiveApproval === "timeout" ? "Not approved" : null);
-                        return (
-                            <div key={idx} className="text-sm pl-2">
-                                <span className={cn("font-bold mr-1.5", statusColor)}>{statusIcon}</span>
-                                <span className="text-gray-400">{part.data.tooldesc}</span>
-                                {effectiveErrorMessage && (
-                                    <div className="text-red-300 ml-4 mt-0.5">{effectiveErrorMessage}</div>
-                                )}
-                            </div>
-                        );
-                    })}
+                    {parts.map((part, idx) => (
+                        <AIToolUseBatchItem key={idx} part={part} effectiveApproval={effectiveApproval} />
+                    ))}
                 </div>
                 {allNeedApproval && effectiveApproval === "needs-approval" && (
-                    <div className="mt-2 flex gap-2">
-                        <button
-                            onClick={handleApprove}
-                            className="px-3 py-1 border border-gray-600 text-gray-300 hover:border-gray-500 hover:text-white text-sm rounded cursor-pointer transition-colors"
-                        >
-                            Approve All ({parts.length})
-                        </button>
-                        <button
-                            onClick={handleDeny}
-                            className="px-3 py-1 border border-gray-600 text-gray-300 hover:border-gray-500 hover:text-white text-sm rounded cursor-pointer transition-colors"
-                        >
-                            Deny All
-                        </button>
-                    </div>
+                    <AIToolApprovalButtons count={parts.length} onApprove={handleApprove} onDeny={handleDeny} />
                 )}
             </div>
         </div>
@@ -225,20 +250,7 @@ const AIToolUse = memo(({ part, isStreaming }: AIToolUseProps) => {
                     <div className="text-sm text-red-300 mt-1">{toolData.errormessage || "Not approved"}</div>
                 )}
                 {effectiveApproval === "needs-approval" && (
-                    <div className="mt-2 flex gap-2">
-                        <button
-                            onClick={handleApprove}
-                            className="px-3 py-1 border border-gray-600 text-gray-300 hover:border-gray-500 hover:text-white text-sm rounded cursor-pointer transition-colors"
-                        >
-                            Approve
-                        </button>
-                        <button
-                            onClick={handleDeny}
-                            className="px-3 py-1 border border-gray-600 text-gray-300 hover:border-gray-500 hover:text-white text-sm rounded cursor-pointer transition-colors"
-                        >
-                            Deny
-                        </button>
-                    </div>
+                    <AIToolApprovalButtons count={1} onApprove={handleApprove} onDeny={handleDeny} />
                 )}
             </div>
         </div>
@@ -382,33 +394,20 @@ const getThinkingMessage = (parts: WaveUIMessagePart[], isStreaming: boolean, ro
         return "Waiting for Tool Approvals...";
     }
 
-    // Find the last "step-start" marker
-    let lastStartStepIndex = -1;
-    for (let i = parts.length - 1; i >= 0; i--) {
-        if (parts[i].type === "step-start") {
-            lastStartStepIndex = i;
-            break;
-        }
-    }
-
-    // Get parts after the last start-step (or all parts if no start-step)
-    const partsAfterLastStep = lastStartStepIndex !== -1 ? parts.slice(lastStartStepIndex + 1) : parts;
-
-    // Check if there's content after the last step
-    const hasContentAfterStep = partsAfterLastStep.some(
-        (part) => (part.type === "text" && part.text) || part.type.startsWith("tool-") || part.type === "data-tooluse"
-    );
-
-    if (hasContentAfterStep) {
-        return null;
-    }
+    const lastPart = parts[parts.length - 1];
 
     // Check if the last part is a reasoning part
-    const lastPart = parts[parts.length - 1];
     if (lastPart?.type === "reasoning") {
         return "AI is thinking...";
     }
 
+    // Only hide thinking indicator if the last part is text and not empty
+    // (this means text is actively streaming)
+    if (lastPart?.type === "text" && lastPart.text) {
+        return null;
+    }
+
+    // For all other cases (including finish-step, tooluse, etc.), show dots
     return "";
 };
 

From a73226726ecc2195a4dddb8e2256d90bdc137152 Mon Sep 17 00:00:00 2001
From: sawka <mike@commandline.dev>
Date: Mon, 13 Oct 2025 23:27:28 -0700
Subject: [PATCH 6/6] fix out of order hook issue, and hack for windows paths
 in vite manual chunks...

---
 electron.vite.config.ts            | 11 ++++++-----
 frontend/app/aipanel/aimessage.tsx |  4 +---
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/electron.vite.config.ts b/electron.vite.config.ts
index 43eeb869d8..ae5de1887c 100644
--- a/electron.vite.config.ts
+++ b/electron.vite.config.ts
@@ -132,14 +132,15 @@ export default defineConfig({
                 },
                 output: {
                     manualChunks(id) {
-                        if (id.includes("node_modules/monaco") || id.includes("node_modules/@monaco")) return "monaco";
-                        if (id.includes("node_modules/mermaid") || id.includes("node_modules/@mermaid"))
+                        const p = id.replace(/\\/g, "/");
+                        if (p.includes("node_modules/monaco") || p.includes("node_modules/@monaco")) return "monaco";
+                        if (p.includes("node_modules/mermaid") || p.includes("node_modules/@mermaid"))
                             return "mermaid";
-                        if (id.includes("node_modules/katex") || id.includes("node_modules/@katex")) return "katex";
-                        if (id.includes("node_modules/shiki") || id.includes("node_modules/@shiki")) {
+                        if (p.includes("node_modules/katex") || p.includes("node_modules/@katex")) return "katex";
+                        if (p.includes("node_modules/shiki") || p.includes("node_modules/@shiki")) {
                             return "shiki";
                         }
-                        if (id.includes("node_modules/cytoscape") || id.includes("node_modules/@cytoscape"))
+                        if (p.includes("node_modules/cytoscape") || p.includes("node_modules/@cytoscape"))
                             return "cytoscape";
                         return undefined;
                     },
diff --git a/frontend/app/aipanel/aimessage.tsx b/frontend/app/aipanel/aimessage.tsx
index e860cf4304..02ccb5d947 100644
--- a/frontend/app/aipanel/aimessage.tsx
+++ b/frontend/app/aipanel/aimessage.tsx
@@ -127,15 +127,13 @@ const AIToolUseBatchItem = memo(({ part, effectiveApproval }: AIToolUseBatchItem
 AIToolUseBatchItem.displayName = "AIToolUseBatchItem";
 
 interface AIToolUseBatchProps {
-    parts: Array<WaveUIMessagePart & { type: "data-tooluse" }>;
+    parts: Array<WaveUIMessagePart & { type: "data-tooluse" }>; // parts must not be empty
     isStreaming: boolean;
 }
 
 const AIToolUseBatch = memo(({ parts, isStreaming }: AIToolUseBatchProps) => {
     const [userApprovalOverride, setUserApprovalOverride] = useState<string | null>(null);
 
-    if (parts.length === 0) return null;
-
     const firstTool = parts[0].data;
     const baseApproval = userApprovalOverride || firstTool.approval;
     const effectiveApproval = !isStreaming && baseApproval === "needs-approval" ? "timeout" : baseApproval;