feat: restyle tool calls as collapsible blocks matching thinking block aesthetic

src/lib/components/Terminal.svelte

@@ -7,6 +7,7 @@
   import Markdown from "./Markdown.svelte";
   import HighlightedText from "./HighlightedText.svelte";
   import ThinkingBlock from "./ThinkingBlock.svelte";
+  import ToolCallBlock from "./ToolCallBlock.svelte";
   import { searchState, searchQuery } from "$lib/stores/search";
   import { clipboardStore } from "$lib/stores/clipboard";
   import { shouldHidePaths, maskPaths, showThinkingBlocks } from "$lib/stores/config";
@@ -208,22 +209,6 @@
     if (!currentConversationId) return;
     await invoke("send_prompt", { conversationId: currentConversationId, message: "/compact" });
   }
-
-  // Collapsible tool lines
-  const TOOL_COLLAPSE_THRESHOLD = 60;
-  let expandedToolLines: Record<string, boolean> = {};
-
-  function isToolContentLong(content: string): boolean {
-    return content.length > TOOL_COLLAPSE_THRESHOLD;
-  }
-
-  function truncateToolContent(content: string): string {
-    return content.slice(0, TOOL_COLLAPSE_THRESHOLD) + "…";
-  }
-
-  function toggleToolLine(id: string) {
-    expandedToolLines = { ...expandedToolLines, [id]: !expandedToolLines[id] };
-  }
 </script>
 
 <div
@@ -258,6 +243,18 @@
           {#if showThinking}
             <ThinkingBlock content={line.content} timestamp={line.timestamp} />
           {/if}
+        {:else if line.type === "tool"}
+          <div
+            style={line.parentToolUseId
+              ? "margin-left: 16px; padding-left: 8px; border-left: 2px solid var(--accent-primary);"
+              : ""}
+          >
+            <ToolCallBlock
+              toolName={line.toolName ?? null}
+              content={maskPaths(line.content, hidePaths)}
+              timestamp={line.timestamp}
+            />
+          </div>
         {:else}
           <div
             class="terminal-line mb-2 {getLineClass(line.type)} relative group"
@@ -296,9 +293,6 @@
             {#if getLinePrefix(line.type)}
               <span class="terminal-prefix mr-2">{getLinePrefix(line.type)}</span>
             {/if}
-            {#if line.toolName}
-              <span class="terminal-tool-name mr-2">[{line.toolName}]</span>
-            {/if}
             {#if line.type === "compact-prompt"}
               <button class="compact-action-btn" onclick={handleCompact}>
                 ⚡ Compact Conversation
@@ -330,22 +324,6 @@
                   <span class="copy-text">{copiedMessageId === line.id ? "Copied!" : "Copy"}</span>
                 </button>
               </div>
-            {:else if line.type === "tool" && isToolContentLong(maskPaths(line.content, hidePaths))}
-              <span class="tool-collapsible">
-                <HighlightedText
-                  content={expandedToolLines[line.id]
-                    ? maskPaths(line.content, hidePaths)
-                    : truncateToolContent(maskPaths(line.content, hidePaths))}
-                  searchQuery={currentSearchQuery}
-                />
-                <button
-                  class="tool-toggle-btn"
-                  onclick={() => toggleToolLine(line.id)}
-                  title={expandedToolLines[line.id] ? "Collapse" : "Expand to see full content"}
-                >
-                  {expandedToolLines[line.id] ? "▲" : "▼"}
-                </button>
-              </span>
             {:else}
               <HighlightedText
                 content={maskPaths(line.content, hidePaths)}
@@ -501,28 +479,4 @@
   .terminal-line {
     position: relative;
   }
-
-  .tool-collapsible {
-    display: inline-flex;
-    align-items: baseline;
-    gap: 0.4em;
-  }
-
-  .tool-toggle-btn {
-    background: none;
-    border: none;
-    color: var(--text-tertiary, #6b7280);
-    cursor: pointer;
-    font-size: 0.7em;
-    padding: 0;
-    line-height: 1;
-    opacity: 0.7;
-    transition: opacity 0.15s ease;
-    font-family: inherit;
-  }
-
-  .tool-toggle-btn:hover {
-    opacity: 1;
-    color: var(--terminal-tool, #c084fc);
-  }
 </style>