feat(ui): toggle tool call input YAML (#182)

* feat(ui): toggle tool call input yaml

* ui: rename tool input toggle and add IO headers

* ui: add input/output accordions in tool calls

* ui: refine tool IO accordion styling

* ui: remove extra padding around IO sections

* ui: remove semibold from IO headers

* feat(ui): add tool input visibility preference

* fix(ui): scope tool input toggle to current tool call

* ui: left-align tool IO header text

* fix(ui): let palette tool input visibility override per-call

* ui: default tool input visibility to collapsed

* fix(ui): expand read tool calls on error

---------

Co-authored-by: Shantur Rathore <i@shantur.com>

packages/ui/src/components/instance/instance-shell2.tsx

@@ -625,7 +625,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
                     <div class="flex flex-wrap items-center justify-center gap-1">
                       <button
                         type="button"
-                        class="connection-status-button command-palette-button px-2 py-0.5 text-xs"
+                        class="connection-status-button px-2 py-0.5 text-xs"
                         onClick={handleCommandPaletteClick}
                         aria-label={t("instanceShell.commandPalette.openAriaLabel")}
                         style={{ flex: "0 0 auto", width: "auto" }}
@@ -721,7 +721,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
               <div class="session-toolbar-center flex items-center justify-center gap-2 min-w-[160px]">
                 <button
                   type="button"
-                  class="connection-status-button command-palette-button px-2 py-0.5 text-xs"
+                  class="connection-status-button px-2 py-0.5 text-xs"
                   onClick={handleCommandPaletteClick}
                   aria-label={t("instanceShell.commandPalette.openAriaLabel")}
                   style={{ flex: "0 0 auto", width: "auto" }}

packages/ui/src/components/message-list-header.tsx

@@ -51,7 +51,7 @@ export default function MessageListHeader(props: MessageListHeaderProps) {
         <div class="connection-status-shortcut-action">
           <button
             type="button"
-            class="connection-status-button command-palette-button"
+            class="connection-status-button"
             onClick={props.onCommandPalette}
             aria-label={t("messageListHeader.commandPalette.ariaLabel")}
           >

packages/ui/src/components/tool-call.tsx

@@ -1,5 +1,5 @@
 import { createSignal, Show, createEffect, createMemo, onCleanup } from "solid-js"
-import { ArrowRightSquare, Check, Copy, Hourglass, Loader2, XCircle } from "lucide-solid"
+import { ArrowRightSquare, Copy } from "lucide-solid"
 import { stringify as stringifyYaml } from "yaml"
 import { messageStoreBus } from "../stores/message-v2/bus"
 import { useTheme } from "../lib/theme"
@@ -576,13 +576,13 @@ export default function ToolCall(props: ToolCallProps) {
     const status = toolState()?.status || ""
     switch (status) {
       case "pending":
-        return <Hourglass class="w-4 h-4" />
+        return "⏸"
       case "running":
-        return <Loader2 class="w-4 h-4 animate-spin" />
+        return "⏳"
       case "completed":
-        return <Check class="w-4 h-4" />
+        return "✓"
       case "error":
-        return <XCircle class="w-4 h-4" />
+        return "✗"
       default:
         return ""
     }

packages/ui/src/styles/messaging/message-section.css

@@ -130,17 +130,6 @@
   color: var(--text-primary);
 }
 
-/* Make the command palette trigger stand out in the header. */
-.connection-status-button.command-palette-button {
-  border-color: var(--accent-primary);
-  background-color: var(--surface-secondary);
-}
-
-.connection-status-button.command-palette-button:hover {
-  border-color: var(--accent-primary);
-  background-color: var(--surface-hover);
-}
-
 .connection-status-button:hover {
   background-color: var(--surface-hover);
 }