diff --git a/gui/src/components/mainInput/ContinueInputBox.tsx b/gui/src/components/mainInput/ContinueInputBox.tsx
index 457aefd449..14d4816f43 100644
--- a/gui/src/components/mainInput/ContinueInputBox.tsx
+++ b/gui/src/components/mainInput/ContinueInputBox.tsx
@@ -5,7 +5,7 @@ import styled, { keyframes } from "styled-components";
 import { defaultBorderRadius, vscBackground } from "..";
 import { useAppSelector } from "../../redux/hooks";
 import { selectSlashCommandComboBoxInputs } from "../../redux/selectors";
-import ContextItemsPeek from "./belowMainInput/ContextItemsPeek";
+import { ContextItemsPeek } from "./belowMainInput/ContextItemsPeek";
 import { ToolbarOptions } from "./InputToolbar";
 import { Lump } from "./Lump";
 import { TipTapEditor } from "./TipTapEditor";
diff --git a/gui/src/components/mainInput/belowMainInput/ContextItemsPeek.tsx b/gui/src/components/mainInput/belowMainInput/ContextItemsPeek.tsx
index 5840240c2e..7c67463a96 100644
--- a/gui/src/components/mainInput/belowMainInput/ContextItemsPeek.tsx
+++ b/gui/src/components/mainInput/belowMainInput/ContextItemsPeek.tsx
@@ -18,14 +18,15 @@ interface ContextItemsPeekProps {
   isCurrentContextPeek: boolean;
   icon?: ComponentType<React.SVGProps<SVGSVGElement>>;
   title?: JSX.Element | string;
-  showWhenNoResults?: boolean;
 }
 
 interface ContextItemsPeekItemProps {
   contextItem: ContextItemWithId;
 }
 
-function ContextItemsPeekItem({ contextItem }: ContextItemsPeekItemProps) {
+export function ContextItemsPeekItem({
+  contextItem,
+}: ContextItemsPeekItemProps) {
   const ideMessenger = useContext(IdeMessengerContext);
   const isUrl = contextItem.uri?.type === "url";
 
@@ -150,12 +151,11 @@ function ContextItemsPeekItem({ contextItem }: ContextItemsPeekItemProps) {
   );
 }
 
-function ContextItemsPeek({
+export function ContextItemsPeek({
   contextItems,
   isCurrentContextPeek,
   icon,
   title,
-  showWhenNoResults,
 }: ContextItemsPeekProps) {
   const ctxItems = useMemo(() => {
     return contextItems?.filter((ctxItem) => !ctxItem.hidden) ?? [];
@@ -165,11 +165,7 @@ function ContextItemsPeek({
 
   const indicateIsGathering = isCurrentContextPeek && isGatheringContext;
 
-  if (
-    !showWhenNoResults &&
-    (!ctxItems || ctxItems.length === 0) &&
-    !indicateIsGathering
-  ) {
+  if ((!ctxItems || ctxItems.length === 0) && !indicateIsGathering) {
     return null;
   }
 
@@ -198,5 +194,3 @@ function ContextItemsPeek({
     </ToggleDiv>
   );
 }
-
-export default ContextItemsPeek;
diff --git a/gui/src/pages/gui/ToolCallDiv/SimpleToolCallUI.tsx b/gui/src/pages/gui/ToolCallDiv/SimpleToolCallUI.tsx
new file mode 100644
index 0000000000..f88b6fdac6
--- /dev/null
+++ b/gui/src/pages/gui/ToolCallDiv/SimpleToolCallUI.tsx
@@ -0,0 +1,97 @@
+import { ChevronDownIcon, ChevronRightIcon } from "@heroicons/react/24/outline";
+import { ContextItemWithId, Tool, ToolCallState } from "core";
+import { ComponentType, useMemo, useState } from "react";
+import { ContextItemsPeekItem } from "../../../components/mainInput/belowMainInput/ContextItemsPeek";
+import { ArgsItems, ArgsToggleIcon } from "./ToolCallArgs";
+import { ToolCallStatusMessage } from "./ToolCallStatusMessage";
+
+interface SimpleToolCallUIProps {
+  toolCallState: ToolCallState;
+  tool: Tool | undefined;
+  contextItems: ContextItemWithId[];
+  icon?: ComponentType<React.SVGProps<SVGSVGElement>>;
+}
+
+export function SimpleToolCallUI({
+  contextItems,
+  icon: Icon,
+  toolCallState,
+  tool,
+}: SimpleToolCallUIProps) {
+  const ctxItems = useMemo(() => {
+    return contextItems?.filter((ctxItem) => !ctxItem.hidden) ?? [];
+  }, [contextItems]);
+
+  const [open, setOpen] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+
+  const [showingArgs, setShowingArgs] = useState(false);
+
+  const args: [string, any][] = useMemo(() => {
+    return Object.entries(toolCallState.parsedArgs);
+  }, [toolCallState.parsedArgs]);
+
+  return (
+    <div className={`flex flex-1 flex-col px-2 pt-2`}>
+      <div className="flex flex-row justify-between">
+        <div
+          className="flex cursor-pointer items-center justify-start text-xs text-gray-300"
+          onClick={() => setOpen((prev) => !prev)}
+          onMouseEnter={() => setIsHovered(true)}
+          onMouseLeave={() => setIsHovered(false)}
+          data-testid="context-items-peek"
+        >
+          <div className="relative mr-1 h-4 w-4">
+            {Icon && !isHovered && !open ? (
+              <Icon className={`absolute h-4 w-4 text-gray-400`} />
+            ) : (
+              <>
+                <ChevronRightIcon
+                  className={`absolute h-4 w-4 text-gray-400 transition-all duration-200 ease-in-out ${
+                    open ? "rotate-90 opacity-0" : "rotate-0 opacity-100"
+                  }`}
+                />
+                <ChevronDownIcon
+                  className={`absolute h-4 w-4 text-gray-400 transition-all duration-200 ease-in-out ${
+                    open ? "rotate-0 opacity-100" : "-rotate-90 opacity-0"
+                  }`}
+                />
+              </>
+            )}
+          </div>
+          <span
+            className="ml-1 text-xs text-gray-400 transition-colors duration-200"
+            data-testid="toggle-div-title"
+          >
+            <ToolCallStatusMessage tool={tool} toolCallState={toolCallState} />
+          </span>
+        </div>
+        <div>
+          {args.length > 0 ? (
+            <ArgsToggleIcon
+              isShowing={showingArgs}
+              setIsShowing={setShowingArgs}
+              toolCallId={toolCallState.toolCallId}
+            />
+          ) : null}
+        </div>
+      </div>
+      <ArgsItems args={args} isShowing={showingArgs} />
+      <div
+        className={`mt-2 overflow-y-auto transition-all duration-300 ease-in-out ${
+          open ? "max-h-[50vh] opacity-100" : "max-h-0 opacity-0"
+        }`}
+      >
+        {ctxItems.length ? (
+          ctxItems.map((contextItem, idx) => (
+            <ContextItemsPeekItem key={idx} contextItem={contextItem} />
+          ))
+        ) : (
+          <div className="pl-2 text-xs italic text-gray-400">
+            No tool call output
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/gui/src/pages/gui/ToolCallDiv/ToolCall.tsx b/gui/src/pages/gui/ToolCallDiv/ToolCall.tsx
index 2d823b7f32..6f313236d3 100644
--- a/gui/src/pages/gui/ToolCallDiv/ToolCall.tsx
+++ b/gui/src/pages/gui/ToolCallDiv/ToolCall.tsx
@@ -1,102 +1,26 @@
-import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/react/24/outline";
-import { Tool, ToolCallDelta, ToolCallState } from "core";
-import Mustache from "mustache";
-import { ReactNode, useMemo, useState } from "react";
-import { ToolTip } from "../../../components/gui/Tooltip";
-import { useAppSelector } from "../../../redux/hooks";
+import { Tool, ToolCallState } from "core";
+import { useMemo, useState } from "react";
+import { ArgsItems, ArgsToggleIcon } from "./ToolCallArgs";
+import { ToolCallStatusMessage } from "./ToolCallStatusMessage";
 
 interface ToolCallDisplayProps {
   children: React.ReactNode;
   icon: React.ReactNode;
-  toolCall: ToolCallDelta;
+  tool: Tool | undefined;
   toolCallState: ToolCallState;
 }
 
-export function getToolCallStatusMessage(
-  tool: Tool | undefined,
-  toolCallState: ToolCallState,
-) {
-  if (!tool) return "Agent tool use";
-
-  const defaultToolDescription = (
-    <>
-      <code>{tool.displayTitle ?? tool.function.name}</code> <span>tool</span>
-    </>
-  );
-
-  const futureMessage = tool.wouldLikeTo ? (
-    Mustache.render(tool.wouldLikeTo, toolCallState.parsedArgs)
-  ) : (
-    <>
-      <span>use the</span> {defaultToolDescription}
-    </>
-  );
-
-  let intro = "";
-  let message: ReactNode = "";
-
-  if (
-    toolCallState.status === "done" ||
-    (tool.isInstant && toolCallState.status === "calling")
-  ) {
-    intro = "";
-    message = tool.hasAlready ? (
-      Mustache.render(tool.hasAlready, toolCallState.parsedArgs)
-    ) : (
-      <>
-        <span>used the</span> {defaultToolDescription}
-      </>
-    );
-  } else if (toolCallState.status === "generating") {
-    intro = "is generating output to";
-    message = futureMessage;
-  } else if (toolCallState.status === "generated") {
-    intro = "wants to";
-    message = futureMessage;
-  } else if (toolCallState.status === "calling") {
-    intro = "is";
-    message = tool.isCurrently ? (
-      Mustache.render(tool.isCurrently, toolCallState.parsedArgs)
-    ) : (
-      <>
-        <span>calling the</span> {defaultToolDescription}
-      </>
-    );
-  } else if (
-    toolCallState.status === "canceled" ||
-    toolCallState.status === "errored"
-  ) {
-    intro = "tried to";
-    message = futureMessage;
-  }
-  return (
-    <div className="block">
-      <span>Continue</span> {intro} {message}
-    </div>
-  );
-}
-
-export function ToolCallDisplay(props: ToolCallDisplayProps) {
-  const [isExpanded, setIsExpanded] = useState(false);
-  const availableTools = useAppSelector((state) => state.config.config.tools);
-
-  const tool = useMemo(() => {
-    return availableTools.find(
-      (tool) => props.toolCall.function?.name === tool.function.name,
-    );
-  }, [availableTools, props.toolCall]);
-
-  const statusMessage = useMemo(() => {
-    return getToolCallStatusMessage(tool, props.toolCallState);
-  }, [props.toolCallState, tool]);
+export function ToolCallDisplay({
+  tool,
+  toolCallState,
+  children,
+  icon,
+}: ToolCallDisplayProps) {
+  const [argsExpanded, setArgsExpanded] = useState(false);
 
   const args: [string, any][] = useMemo(() => {
-    return Object.entries(props.toolCallState.parsedArgs);
-  }, [props.toolCallState.parsedArgs]);
-
-  const argsTooltipId = useMemo(() => {
-    return "args-hover-" + props.toolCallState.toolCallId;
-  }, [props.toolCallState]);
+    return Object.entries(toolCallState.parsedArgs);
+  }, [toolCallState.parsedArgs]);
 
   return (
     <>
@@ -104,54 +28,32 @@ export function ToolCallDisplay(props: ToolCallDisplayProps) {
         <div className="mb-4 flex flex-col">
           <div className="flex flex-row items-center justify-between gap-3">
             <div className="flex flex-row gap-2">
-              <div
-                style={{
-                  width: `16px`,
-                  height: `16px`,
-                  fontWeight: "bolder",
-                  marginTop: "1px",
-                  flexShrink: 0,
-                }}
-              >
-                {props.icon}
+              <div className="mt-[1px] h-4 w-4 flex-shrink-0 font-semibold">
+                {icon}
               </div>
               {tool?.faviconUrl && (
                 <img src={tool.faviconUrl} className="h-4 w-4 rounded-sm" />
               )}
               <div className="flex" data-testid="tool-call-status-message">
-                {statusMessage}
+                <ToolCallStatusMessage
+                  tool={tool}
+                  toolCallState={toolCallState}
+                />
               </div>
             </div>
             {!!args.length ? (
-              <div
-                data-tooltip-id={argsTooltipId}
-                onClick={() => setIsExpanded(!isExpanded)}
-                className="ml-2 cursor-pointer hover:opacity-80"
-              >
-                {isExpanded ? (
-                  <ChevronUpIcon className="h-4 w-4" />
-                ) : (
-                  <ChevronDownIcon className="h-4 w-4" />
-                )}
-              </div>
+              <ArgsToggleIcon
+                isShowing={argsExpanded}
+                setIsShowing={setArgsExpanded}
+                toolCallId={toolCallState.toolCallId}
+              />
             ) : null}
-            <ToolTip id={argsTooltipId}>
-              {isExpanded ? "Hide args" : "Show args"}
-            </ToolTip>
           </div>
-
-          {isExpanded && !!args.length && (
-            <div className="ml-7 mt-1">
-              {args.map(([key, value]) => (
-                <div key={key} className="flex gap-2 py-0.5">
-                  <span className="text-lightgray">{key}:</span>
-                  <code className="line-clamp-1">{value.toString()}</code>
-                </div>
-              ))}
-            </div>
+          {argsExpanded && !!args.length && (
+            <ArgsItems args={args} isShowing={argsExpanded} />
           )}
         </div>
-        <div>{props.children}</div>
+        <div>{children}</div>
       </div>
     </>
   );
diff --git a/gui/src/pages/gui/ToolCallDiv/ToolCallArgs.tsx b/gui/src/pages/gui/ToolCallDiv/ToolCallArgs.tsx
new file mode 100644
index 0000000000..738be01f9a
--- /dev/null
+++ b/gui/src/pages/gui/ToolCallDiv/ToolCallArgs.tsx
@@ -0,0 +1,64 @@
+import { CodeBracketIcon } from "@heroicons/react/24/outline";
+import { useMemo } from "react";
+import { ToolTip } from "../../../components/gui/Tooltip";
+
+interface ArgsToggleIconProps {
+  isShowing: boolean;
+  setIsShowing: (val: boolean) => void;
+  toolCallId: string;
+}
+
+export const ArgsToggleIcon = ({
+  isShowing,
+  setIsShowing,
+  toolCallId,
+}: ArgsToggleIconProps) => {
+  const argsTooltipId = useMemo(() => {
+    return "args-hover-" + toolCallId;
+  }, [toolCallId]);
+
+  return (
+    <>
+      <div
+        data-tooltip-id={argsTooltipId}
+        onClick={(e) => {
+          e.stopPropagation();
+          setIsShowing(!isShowing);
+        }}
+        className={`cursor-pointer select-none rounded-sm px-1 py-0.5 hover:bg-gray-400/40 hover:opacity-80 ${isShowing ? "bg-gray-400/40" : "bg-transparent"}`}
+      >
+        <CodeBracketIcon className="h-3 w-3 flex-shrink-0" />
+        {/* {`{}`} */}
+      </div>
+      <ToolTip id={argsTooltipId}>
+        {isShowing ? "Hide args" : "Show args"}
+      </ToolTip>
+    </>
+  );
+};
+
+interface ArgsItemsProps {
+  isShowing: boolean;
+  args: [string, string][];
+}
+
+export const ArgsItems = ({ args, isShowing }: ArgsItemsProps) => {
+  if (args.length === 0) {
+    return null;
+  }
+
+  if (!isShowing) {
+    return null;
+  }
+
+  return (
+    <div className="ml-7 mt-1">
+      {args.map(([key, value]) => (
+        <div key={key} className="flex flex-row items-center gap-2 py-0.5">
+          <span className="text-lightgray">{key}:</span>
+          <code className="line-clamp-1">{value.toString()}</code>
+        </div>
+      ))}
+    </div>
+  );
+};
diff --git a/gui/src/pages/gui/ToolCallDiv/ToolCallStatusMessage.tsx b/gui/src/pages/gui/ToolCallDiv/ToolCallStatusMessage.tsx
new file mode 100644
index 0000000000..e4e4c6e420
--- /dev/null
+++ b/gui/src/pages/gui/ToolCallDiv/ToolCallStatusMessage.tsx
@@ -0,0 +1,72 @@
+import { Tool, ToolCallState } from "core";
+import Mustache from "mustache";
+import { ReactNode } from "react";
+
+interface ToolCallStatusMessageProps {
+  tool: Tool | undefined;
+  toolCallState: ToolCallState;
+}
+
+export function ToolCallStatusMessage({
+  tool,
+  toolCallState,
+}: ToolCallStatusMessageProps) {
+  if (!tool) return "Agent tool use";
+
+  const defaultToolDescription = (
+    <>
+      <code>{tool.displayTitle ?? tool.function.name}</code> <span>tool</span>
+    </>
+  );
+
+  const futureMessage = tool.wouldLikeTo ? (
+    Mustache.render(tool.wouldLikeTo, toolCallState.parsedArgs)
+  ) : (
+    <>
+      <span>use the</span> {defaultToolDescription}
+    </>
+  );
+
+  let intro = "";
+  let message: ReactNode = "";
+
+  if (
+    toolCallState.status === "done" ||
+    (tool.isInstant && toolCallState.status === "calling")
+  ) {
+    intro = "";
+    message = tool.hasAlready ? (
+      Mustache.render(tool.hasAlready, toolCallState.parsedArgs)
+    ) : (
+      <>
+        <span>used the</span> {defaultToolDescription}
+      </>
+    );
+  } else if (toolCallState.status === "generating") {
+    intro = "is generating output to";
+    message = futureMessage;
+  } else if (toolCallState.status === "generated") {
+    intro = "wants to";
+    message = futureMessage;
+  } else if (toolCallState.status === "calling") {
+    intro = "is";
+    message = tool.isCurrently ? (
+      Mustache.render(tool.isCurrently, toolCallState.parsedArgs)
+    ) : (
+      <>
+        <span>calling the</span> {defaultToolDescription}
+      </>
+    );
+  } else if (
+    toolCallState.status === "canceled" ||
+    toolCallState.status === "errored"
+  ) {
+    intro = "tried to";
+    message = futureMessage;
+  }
+  return (
+    <div className="block">
+      <span>Continue</span> {intro} {message}
+    </div>
+  );
+}
diff --git a/gui/src/pages/gui/ToolCallDiv/ToolOutput.tsx b/gui/src/pages/gui/ToolCallDiv/ToolOutput.tsx
deleted file mode 100644
index 069f839cae..0000000000
--- a/gui/src/pages/gui/ToolCallDiv/ToolOutput.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { ContextItemWithId } from "core";
-import { ComponentType } from "react";
-import ContextItemsPeek from "../../../components/mainInput/belowMainInput/ContextItemsPeek";
-
-interface ToolOutputProps {
-  contextItems: ContextItemWithId[];
-  toolCallId: string;
-  icon?: ComponentType;
-  title?: JSX.Element | string;
-}
-
-function ToolOutput(props: ToolOutputProps) {
-  // Terminal has dedicated UI to show the output
-  if (props.contextItems.some((ci) => ci.name === "Terminal")) {
-    return null;
-  }
-
-  return (
-    <div>
-      <ContextItemsPeek
-        showWhenNoResults={true}
-        title={props.title}
-        icon={props.icon}
-        isCurrentContextPeek={false}
-        contextItems={props.contextItems}
-      />
-    </div>
-  );
-}
-
-export default ToolOutput;
diff --git a/gui/src/pages/gui/ToolCallDiv/index.tsx b/gui/src/pages/gui/ToolCallDiv/index.tsx
index 5fd016d450..167ff191c1 100644
--- a/gui/src/pages/gui/ToolCallDiv/index.tsx
+++ b/gui/src/pages/gui/ToolCallDiv/index.tsx
@@ -8,6 +8,7 @@ import {
   FolderIcon,
   FolderOpenIcon,
   GlobeAltIcon,
+  ListBulletIcon,
   MagnifyingGlassIcon,
   MapIcon,
   XMarkIcon,
@@ -24,8 +25,8 @@ import { vscButtonBackground } from "../../../components";
 import Spinner from "../../../components/gui/Spinner";
 import { useAppSelector } from "../../../redux/hooks";
 import FunctionSpecificToolCallDiv from "./FunctionSpecificToolCallDiv";
-import { getToolCallStatusMessage, ToolCallDisplay } from "./ToolCall";
-import ToolOutput from "./ToolOutput";
+import { SimpleToolCallUI } from "./SimpleToolCallUI";
+import { ToolCallDisplay } from "./ToolCall";
 
 interface ToolCallDivProps {
   toolCall: ToolCallDelta;
@@ -44,24 +45,28 @@ const toolCallIcons: Record<string, ComponentType> = {
   [BuiltInToolNames.ViewDiff]: CodeBracketIcon,
   [BuiltInToolNames.ViewRepoMap]: MapIcon,
   [BuiltInToolNames.ViewSubdirectory]: FolderOpenIcon,
+  [BuiltInToolNames.CreateRuleBlock]: ListBulletIcon,
+  // EditExistingFile = "builtin_edit_existing_file",
+  // CreateNewFile = "builtin_create_new_file",
+  // RunTerminalCommand = "builtin_run_terminal_command",
 };
 
-export function ToolCallDiv(props: ToolCallDivProps) {
-  function getIcon(state: ToolStatus) {
-    switch (state) {
-      case "generating":
-      case "calling":
-        return <Spinner />;
-      case "generated":
-        return <ArrowRightIcon color={vscButtonBackground} />;
-      case "done":
-        return <CheckIcon className="text-green-500" />;
-      case "canceled":
-      case "errored":
-        return <XMarkIcon className="text-red-500" />;
-    }
+function getStatusIcon(state: ToolStatus) {
+  switch (state) {
+    case "generating":
+    case "calling":
+      return <Spinner />;
+    case "generated":
+      return <ArrowRightIcon color={vscButtonBackground} />;
+    case "done":
+      return <CheckIcon className="text-green-500" />;
+    case "canceled":
+    case "errored":
+      return <XMarkIcon className="text-red-500" />;
   }
+}
 
+export function ToolCallDiv(props: ToolCallDivProps) {
   const availableTools = useAppSelector((state) => state.config.config.tools);
   const tool = useMemo(() => {
     return availableTools.find(
@@ -69,24 +74,20 @@ export function ToolCallDiv(props: ToolCallDivProps) {
     );
   }, [availableTools, props.toolCall]);
 
-  const statusMessage = useMemo(() => {
-    return getToolCallStatusMessage(tool, props.toolCallState);
-  }, [props.toolCallState, tool]);
-
   const icon =
     props.toolCall.function?.name &&
-    toolCallIcons[props.toolCall.function?.name];
+    toolCallIcons[props.toolCall.function.name];
 
-  if (icon && props.toolCall.id) {
+  if (icon) {
     return (
-      <div className="ml-4 mt-2">
-        <ToolOutput
-          title={statusMessage}
+      <div className="ml-4 mt-2 flex">
+        <SimpleToolCallUI
+          tool={tool}
+          toolCallState={props.toolCallState}
           icon={
             props.toolCallState.status === "generated" ? ArrowRightIcon : icon
           }
           contextItems={props.output ?? []}
-          toolCallId={props.toolCall.id}
         />
       </div>
     );
@@ -94,8 +95,8 @@ export function ToolCallDiv(props: ToolCallDivProps) {
 
   return (
     <ToolCallDisplay
-      icon={getIcon(props.toolCallState.status)}
-      toolCall={props.toolCall}
+      icon={getStatusIcon(props.toolCallState.status)}
+      tool={tool}
       toolCallState={props.toolCallState}
     >
       <FunctionSpecificToolCallDiv