Merge pull request #192 from VooDisss/issue-144

[QOL] Add informational tooltips to Status Panel sections

package-lock.json

@@ -12092,7 +12092,8 @@
         "shiki": "^3.13.0",
         "solid-js": "^1.8.0",
         "solid-toast": "^0.5.0",
-        "tauri-plugin-keepawake-api": "^0.1.0"
+        "tauri-plugin-keepawake-api": "^0.1.0",
+        "yaml": "^2.4.2"
       },
       "devDependencies": {
         "@vite-pwa/assets-generator": "^1.0.2",

packages/server/README.md

@@ -5,18 +5,21 @@
 ## Features & Capabilities
 
 ### 🌍 Deployment Freedom
+
 - **Remote Access**: Host CodeNomad on a powerful workstation and access it from your lightweight laptop.
 - **Code Anywhere**: Tunnel in via VPN or SSH to code securely from coffee shops or while traveling.
 - **Multi-Device**: The responsive web client works on tablets and iPads, turning any screen into a dev terminal.
 - **Always-On**: Run as a background service so your sessions are always ready when you connect.
 
 ### ⚡️ Workspace Power
+
 - **Multi-Instance**: Juggle multiple OpenCode sessions side-by-side with per-instance tabs.
 - **Long-Context Native**: Scroll through massive transcripts without hitches.
 - **Deep Task Awareness**: Monitor background tasks and child sessions without losing your flow.
 - **Command Palette**: A single, global palette to jump tabs, launch tools, and fire shortcuts.
 
 ## Prerequisites
+
 - **OpenCode**: `opencode` must be installed and configured on your system.
 - Node.js 18+ and npm (for running or building from source).
 - A workspace folder on disk you want to serve.
@@ -25,6 +28,7 @@
 ## Usage
 
 ### Run via npx (Recommended)
+
 You can run CodeNomad directly without installing it:
 
 ```sh
@@ -43,6 +47,7 @@ On startup, CodeNomad prints two URLs:
 - `Remote Connection URL : ...` (used by browsers/other machines when remote access is enabled)
 
 ### Install Globally
+
 Or install it globally to use the `codenomad` command:
 
 ```sh
@@ -51,6 +56,7 @@ codenomad --launch
 ```
 
 ### Install Locally (per-project)
+
 If you prefer to install CodeNomad into a project and run the local binary:
 
 ```sh
@@ -61,6 +67,7 @@ npx codenomad --launch
 (`npx codenomad ...` will use `./node_modules/.bin/codenomad` when present.)
 
 ### Common Flags
+
 You can configure the server using flags or environment variables:
 
 | Flag | Env Variable | Description |
@@ -74,7 +81,7 @@ You can configure the server using flags or environment variables:
 | `--tls-ca <path>` | `CLI_TLS_CA` | Optional CA chain/bundle (PEM) |
 | `--tlsSANs <list>` | `CLI_TLS_SANS` | Additional TLS SANs (comma-separated) |
 | `--host <addr>` | `CLI_HOST` | Interface to bind (default 127.0.0.1) |
-| `--workspace-root <path>` | `CLI_WORKSPACE_ROOT` | Default root for new workspaces |
+| `--workspace-root <path>` | `CLI_WORKSPACE_ROOT` | Restricts the root path where new workspaces can be opened. Git worktrees are created in `.codenomad/worktrees` inside the project folder. |
 | `--unrestricted-root` | `CLI_UNRESTRICTED_ROOT` | Allow full-filesystem browsing |
 | `--config <path>` | `CLI_CONFIG` | Config file location |
 | `--launch` | `CLI_LAUNCH` | Open the UI in a Chromium-based browser |
@@ -87,10 +94,11 @@ You can configure the server using flags or environment variables:
 | `--ui-dir <path>` | `CLI_UI_DIR` | Directory containing the built UI bundle |
 | `--ui-dev-server <url>` | `CLI_UI_DEV_SERVER` | Proxy UI requests to a running dev server (requires `--https=false --http=true`) |
 | `--ui-no-update` | `CLI_UI_NO_UPDATE` | Disable remote UI updates |
-| `--ui-auto-update <enabled>` | `CLI_UI_AUTO_UPDATE` | Enable remote UI updates (true|false) |
+| `--ui-auto-update <enabled>` | `CLI_UI_AUTO_UPDATE` | Enable remote UI updates (`true` |
 | `--ui-manifest-url <url>` | `CLI_UI_MANIFEST_URL` | Remote UI manifest URL |
 
 ### Dev Releases (Advanced)
+
 If you want the latest bleeding-edge builds (published as GitHub pre-releases), use the dev package:
 
 ```sh
@@ -141,12 +149,14 @@ codenomad --tlsSANs "localhost,127.0.0.1,my-hostname,192.168.1.10"
 ```
 
 ### Authentication
+
 - Default behavior: CodeNomad requires a login (username/password) and stores a session cookie in the browser.
 - `--dangerously-skip-auth` / `CODENOMAD_SKIP_AUTH=true` disables the login prompt and treats all requests as authenticated.
   Use this only when access is already protected by another layer (SSO proxy, VPN, Coder workspace auth, etc.).
   If you bind to `0.0.0.0` while skipping auth, anyone who can reach the port can access the API.
 
 ### Progressive Web App (PWA)
+
 When running as a server CodeNomad can also be installed as a PWA from any supported browser, giving you a native app experience just like the Electron installation but executing on the remote server instead.
 
 1. Open the CodeNomad UI in a Chromium-based browser (Chrome, Edge, Brave, etc.).
@@ -158,5 +168,6 @@ When running as a server CodeNomad can also be installed as a PWA from any suppo
 > If you host CodeNomad on a remote machine, use HTTPS. Self-signed certificates generally won't work unless they are explicitly trusted by the device/browser (e.g., via a custom CA).
 
 ### Data Storage
+
 - **Config**: `~/.config/codenomad/config.json`
 - **Instance Data**: `~/.config/codenomad/instances` (chat history, etc.)

packages/server/src/index.ts

@@ -78,7 +78,7 @@ function parseCliOptions(argv: string[]): CliOptions {
     .addOption(new Option("--tls-ca <path>", "TLS CA chain (PEM)").env("CLI_TLS_CA"))
     .addOption(new Option("--tlsSANs <list>", "Additional TLS SANs (comma-separated)").env("CLI_TLS_SANS"))
     .addOption(
-      new Option("--workspace-root <path>", "Workspace root directory").env("CLI_WORKSPACE_ROOT").default(process.cwd()),
+      new Option("--workspace-root <path>", "Restricts root path where workspaces can be opened").env("CLI_WORKSPACE_ROOT").default(process.cwd()),
     )
     .addOption(new Option("--root <path>").env("CLI_ROOT").hideHelp(true))
     .addOption(new Option("--unrestricted-root", "Allow browsing the full filesystem").env("CLI_UNRESTRICTED_ROOT").default(false))

packages/server/src/workspaces/manager.ts

@@ -8,7 +8,7 @@ import { FileSystemBrowser } from "../filesystem/browser"
 import { searchWorkspaceFiles, WorkspaceFileSearchOptions } from "../filesystem/search"
 import { clearWorkspaceSearchCache } from "../filesystem/search-cache"
 import { WorkspaceDescriptor, WorkspaceFileResponse, FileSystemEntry } from "../api-types"
-import { WorkspaceRuntime, ProcessExitInfo, probeBinaryVersion } from "./runtime"
+import { WorkspaceRuntime, ProcessExitInfo } from "./runtime"
 import { Logger } from "../logger"
 import { getOpencodeConfigDir } from "../opencode-config.js"
 import {
@@ -109,10 +109,6 @@ export class WorkspaceManager {
       updatedAt: new Date().toISOString(),
     }
 
-    if (!descriptor.binaryVersion) {
-      descriptor.binaryVersion = this.detectBinaryVersion(resolvedBinaryPath)
-    }
-
     this.workspaces.set(id, descriptor)
 
 
@@ -149,7 +145,10 @@ export class WorkspaceManager {
         onExit: (info) => this.handleProcessExit(info.workspaceId, info),
       })
 
-      await this.waitForWorkspaceReadiness({ workspaceId: id, port, exitPromise, getLastOutput })
+      const runtimeVersion = await this.waitForWorkspaceReadiness({ workspaceId: id, port, exitPromise, getLastOutput })
+      if (runtimeVersion) {
+        descriptor.binaryVersion = runtimeVersion
+      }
 
       descriptor.pid = pid
       descriptor.port = port
@@ -278,36 +277,12 @@ export class WorkspaceManager {
     return candidates[0] ?? ""
   }
 
-  private detectBinaryVersion(resolvedPath: string): string | undefined {
-    if (!resolvedPath) {
-      return undefined
-    }
-
-    const result = probeBinaryVersion(resolvedPath)
-    if (result.valid) {
-      if (result.version) {
-        this.options.logger.debug({ binary: resolvedPath, version: result.version }, "Detected binary version")
-        return result.version
-      }
-      if (result.reported) {
-        this.options.logger.debug({ binary: resolvedPath, reported: result.reported }, "Binary reported version string")
-        return result.reported
-      }
-      return undefined
-    }
-
-    if (result.error) {
-      this.options.logger.warn({ binary: resolvedPath, err: result.error }, "Failed to detect binary version")
-    }
-    return undefined
-  }
-
   private async waitForWorkspaceReadiness(params: {
     workspaceId: string
     port: number
     exitPromise: Promise<ProcessExitInfo>
     getLastOutput: () => string
-  }) {
+  }): Promise<string | undefined> {
 
     await Promise.race([
       this.waitForPortAvailability(params.port),
@@ -321,7 +296,7 @@ export class WorkspaceManager {
       }),
     ])
 
-    await this.waitForInstanceHealth(params)
+    const version = await this.waitForInstanceHealth(params)
 
     await Promise.race([
       this.delay(STARTUP_STABILITY_DELAY_MS),
@@ -334,6 +309,8 @@ export class WorkspaceManager {
         )
       }),
     ])
+
+    return version
   }
 
   private async waitForInstanceHealth(params: {
@@ -341,7 +318,7 @@ export class WorkspaceManager {
     port: number
     exitPromise: Promise<ProcessExitInfo>
     getLastOutput: () => string
-  }) {
+  }): Promise<string | undefined> {
     const probeResult = await Promise.race([
       this.probeInstance(params.workspaceId, params.port),
       params.exitPromise.then((info) => {
@@ -355,7 +332,7 @@ export class WorkspaceManager {
     ])
 
     if (probeResult.ok) {
-      return
+      return probeResult.version
     }
 
     const latestOutput = params.getLastOutput().trim()
@@ -366,8 +343,11 @@ export class WorkspaceManager {
     throw new Error(`Workspace ${params.workspaceId} failed health check: ${reason}.`)
   }
 
-  private async probeInstance(workspaceId: string, port: number): Promise<{ ok: boolean; reason?: string }> {
+  private async probeInstance(
-    const url = `http://127.0.0.1:${port}/project/current`
+    workspaceId: string,
+    port: number,
+  ): Promise<{ ok: boolean; reason?: string; version?: string }> {
+    const url = `http://127.0.0.1:${port}/global/health`
 
     try {
       const headers: Record<string, string> = {}
@@ -378,11 +358,22 @@ export class WorkspaceManager {
 
       const response = await fetch(url, { headers })
       if (!response.ok) {
-        const reason = `health probe returned HTTP ${response.status}`
+        const reason = `/global/health returned HTTP ${response.status}`
         this.options.logger.debug({ workspaceId, status: response.status }, "Health probe returned server error")
         return { ok: false, reason }
       }
-      return { ok: true }
+
+      const payload = (await response.json().catch(() => null)) as null | { healthy?: unknown; version?: unknown }
+      const healthy = payload?.healthy === true
+      const version = typeof payload?.version === "string" ? payload.version.trim() : undefined
+
+      if (!healthy) {
+        const reason = "Instance reported unhealthy"
+        this.options.logger.debug({ workspaceId, payload }, "Health probe returned unhealthy response")
+        return { ok: false, reason }
+      }
+
+      return { ok: true, version: version || undefined }
     } catch (error) {
       const reason = error instanceof Error ? error.message : String(error)
       this.options.logger.debug({ workspaceId, err: error }, "Health probe failed")

packages/ui/package.json

@@ -30,7 +30,8 @@
     "shiki": "^3.13.0",
     "solid-js": "^1.8.0",
     "solid-toast": "^0.5.0",
-    "tauri-plugin-keepawake-api": "^0.1.0"
+    "tauri-plugin-keepawake-api": "^0.1.0",
+    "yaml": "^2.4.2"
   },
   "devDependencies": {
     "@vite-pwa/assets-generator": "^1.0.2",

packages/ui/src/App.tsx

@@ -18,6 +18,8 @@ import { useTheme } from "./lib/theme"
 import { useCommands } from "./lib/hooks/use-commands"
 import { useAppLifecycle } from "./lib/hooks/use-app-lifecycle"
 import { getLogger } from "./lib/logger"
+import { launchError, showLaunchError, clearLaunchError } from "./stores/launch-errors"
+import { formatLaunchErrorMessage, isMissingBinaryMessage } from "./lib/launch-errors"
 import { initReleaseNotifications } from "./stores/releases"
 import { runtimeEnv } from "./lib/runtime-env"
 import { useI18n } from "./lib/i18n"
@@ -72,14 +74,9 @@ const App: Component = () => {
     setToolOutputExpansion,
     setDiagnosticsExpansion,
     setThinkingBlocksExpansion,
+    setToolInputsVisibility,
   } = useConfig()
   const [escapeInDebounce, setEscapeInDebounce] = createSignal(false)
-  interface LaunchErrorState {
-    message: string
-    binaryPath: string
-    missingBinary: boolean
-  }
-  const [launchError, setLaunchError] = createSignal<LaunchErrorState | null>(null)
   const [isAdvancedSettingsOpen, setIsAdvancedSettingsOpen] = createSignal(false)
   const [remoteAccessOpen, setRemoteAccessOpen] = createSignal(false)
   const [instanceTabBarHeight, setInstanceTabBarHeight] = createSignal(0)
@@ -244,35 +241,6 @@ const App: Component = () => {
 
   const launchErrorMessage = () => launchError()?.message ?? ""
 
-  const formatLaunchErrorMessage = (error: unknown): string => {
-    if (!error) {
-      return t("app.launchError.fallbackMessage")
-    }
-    const raw = typeof error === "string" ? error : error instanceof Error ? error.message : String(error)
-    try {
-      const parsed = JSON.parse(raw)
-      if (parsed && typeof parsed.error === "string") {
-        return parsed.error
-      }
-    } catch {
-      // ignore JSON parse errors
-    }
-    return raw
-  }
-
-  const isMissingBinaryMessage = (message: string): boolean => {
-    const normalized = message.toLowerCase()
-    return (
-      normalized.includes("opencode binary not found") ||
-      normalized.includes("binary not found") ||
-      normalized.includes("no such file or directory") ||
-      normalized.includes("binary is not executable") ||
-      normalized.includes("enoent")
-    )
-  }
-
-  const clearLaunchError = () => setLaunchError(null)
-
   async function handleSelectFolder(folderPath: string, binaryPath?: string) {
     if (!folderPath) {
       return
@@ -291,13 +259,9 @@ const App: Component = () => {
         port: instances().get(instanceId)?.port,
       })
     } catch (error) {
-      const message = formatLaunchErrorMessage(error)
+      const message = formatLaunchErrorMessage(error, t("app.launchError.fallbackMessage"))
       const missingBinary = isMissingBinaryMessage(message)
-      setLaunchError({
+      showLaunchError({ source: "create", message, binaryPath: selectedBinary, missingBinary })
-        message,
-        binaryPath: selectedBinary,
-        missingBinary,
-      })
       log.error("Failed to create instance", error)
     } finally {
       setIsSelectingFolder(false)
@@ -402,6 +366,7 @@ const App: Component = () => {
     setToolOutputExpansion,
     setDiagnosticsExpansion,
     setThinkingBlocksExpansion,
+    setToolInputsVisibility,
     handleNewInstanceRequest,
     handleCloseInstance,
     handleNewSession,

packages/ui/src/components/alert-dialog.tsx

@@ -116,11 +116,8 @@ const AlertDialog: Component = () => {
             <Dialog.Portal>
               <Dialog.Overlay class="modal-overlay" />
                <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
-                 <Dialog.Content
+                 <Dialog.Content class="modal-surface w-full max-w-sm p-6 border border-base shadow-2xl" tabIndex={-1}>
-                   class="modal-surface w-full max-w-xl md:max-w-2xl p-6 border border-base shadow-2xl max-h-[85vh] overflow-hidden flex flex-col"
+                   <div class="flex items-start gap-3">
-                   tabIndex={-1}
-                 >
-                   <div class="flex items-start gap-3 min-h-0">
                      <div
                        class="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl border text-base font-semibold"
                        style={{
@@ -132,16 +129,11 @@ const AlertDialog: Component = () => {
                      >
                        {accent.symbol}
                      </div>
-                     <div class="flex-1 min-w-0 min-h-0">
+                     <div class="flex-1 min-w-0">
                        <Dialog.Title class="text-lg font-semibold text-primary">{title}</Dialog.Title>
-                       <Dialog.Description class="text-sm text-secondary mt-1">
+                       <Dialog.Description class="text-sm text-secondary mt-1 whitespace-pre-line break-words">
-                         <div
+                         {payload.message}
-                           class="max-h-[60vh] overflow-auto pr-2 whitespace-pre-wrap break-words"
+                         {payload.detail && <p class="mt-2 text-secondary">{payload.detail}</p>}
-                           style={{ "overflow-wrap": "anywhere" }}
-                         >
-                           {payload.message}
-                           {payload.detail && <div class="mt-3">{payload.detail}</div>}
-                         </div>
                        </Dialog.Description>
                      </div>
                    </div>

packages/ui/src/components/instance/shell/right-panel/tabs/StatusTab.tsx

@@ -1,8 +1,9 @@
 import { For, Show, type Accessor, type Component } from "solid-js"
 import type { ToolState } from "@opencode-ai/sdk"
 import { Accordion } from "@kobalte/core"
+import { Tooltip } from "@kobalte/core/tooltip"
 
-import { ChevronDown, TerminalSquare, Trash2, XOctagon } from "lucide-solid"
+import { ChevronDown, Info, TerminalSquare, Trash2, XOctagon } from "lucide-solid"
 
 import type { Instance } from "../../../../../types/instance"
 import type { BackgroundProcess } from "../../../../../../../server/src/api-types"
@@ -206,21 +207,25 @@ const StatusTab: Component<StatusTabProps> = (props) => {
     {
       id: "session-changes",
       labelKey: "instanceShell.rightPanel.sections.sessionChanges",
+      tooltipKey: "instanceShell.rightPanel.sections.sessionChanges.tooltip",
       render: renderStatusSessionChanges,
     },
     {
       id: "plan",
       labelKey: "instanceShell.rightPanel.sections.plan",
+      tooltipKey: "instanceShell.rightPanel.sections.plan.tooltip",
       render: renderPlanSectionContent,
     },
     {
       id: "background-processes",
       labelKey: "instanceShell.rightPanel.sections.backgroundProcesses",
+      tooltipKey: "instanceShell.rightPanel.sections.backgroundProcesses.tooltip",
       render: renderBackgroundProcesses,
     },
     {
       id: "mcp",
       labelKey: "instanceShell.rightPanel.sections.mcp",
+      tooltipKey: "instanceShell.rightPanel.sections.mcp.tooltip",
       render: () => (
         <InstanceServiceStatus
           initialInstance={props.instance}
@@ -233,6 +238,7 @@ const StatusTab: Component<StatusTabProps> = (props) => {
     {
       id: "lsp",
       labelKey: "instanceShell.rightPanel.sections.lsp",
+      tooltipKey: "instanceShell.rightPanel.sections.lsp.tooltip",
       render: () => (
         <InstanceServiceStatus
           initialInstance={props.instance}
@@ -245,6 +251,7 @@ const StatusTab: Component<StatusTabProps> = (props) => {
     {
       id: "plugins",
       labelKey: "instanceShell.rightPanel.sections.plugins",
+      tooltipKey: "instanceShell.rightPanel.sections.plugins.tooltip",
       render: () => (
         <InstanceServiceStatus
           initialInstance={props.instance}
@@ -276,7 +283,23 @@ const StatusTab: Component<StatusTabProps> = (props) => {
             <Accordion.Item value={section.id} class="right-panel-accordion-item">
               <Accordion.Header>
                 <Accordion.Trigger class="right-panel-accordion-trigger">
-                  <span>{props.t(section.labelKey)}</span>
+                  <span class="section-left">
+                    <Tooltip openDelay={200} gutter={4} placement="top">
+                      <Tooltip.Trigger
+                        class="section-info-trigger"
+                        aria-label={props.t(section.tooltipKey)}
+                        onClick={(e) => e.stopPropagation()}
+                      >
+                        <Info class="section-info-icon" />
+                      </Tooltip.Trigger>
+                      <Tooltip.Portal>
+                        <Tooltip.Content class="section-info-tooltip">
+                          {props.t(section.tooltipKey)}
+                        </Tooltip.Content>
+                      </Tooltip.Portal>
+                    </Tooltip>
+                    <span class="section-label">{props.t(section.labelKey)}</span>
+                  </span>
                   <ChevronDown
                     class={`right-panel-accordion-chevron ${isSectionExpanded(section.id) ? "right-panel-accordion-chevron-expanded" : ""}`}
                   />

packages/ui/src/components/prompt-input.tsx

@@ -351,7 +351,9 @@ export default function PromptInput(props: PromptInputProps) {
     const blockquote = lines.map((line) => `> ${line}`).join("\n")
     if (!blockquote) return
 
-    insertBlockContent(`${blockquote}\n`)
+    // End the blockquote with a blank line so the user's next line
+    // doesn't get parsed as a lazy continuation of the quote.
+    insertBlockContent(`${blockquote}\n\n`)
   }
 
   function insertCodeSelection(rawText: string) {

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

@@ -1,5 +1,6 @@
 import { createSignal, Show, createEffect, createMemo, onCleanup } from "solid-js"
-import { Copy } 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"
 import { useGlobalCache } from "../lib/hooks/use-global-cache"
@@ -27,7 +28,17 @@ import type {
   ToolRendererContext,
   ToolScrollHelpers,
 } from "./tool-call/types"
-import { getRelativePath, getToolIcon, getToolName, isToolStateCompleted, isToolStateError, isToolStateRunning, getDefaultToolAction } from "./tool-call/utils"
+import {
+  ensureMarkdownContent,
+  getRelativePath,
+  getToolIcon,
+  getToolName,
+  isToolStateCompleted,
+  isToolStateError,
+  isToolStateRunning,
+  getDefaultToolAction,
+  readToolStatePayload,
+} from "./tool-call/utils"
 import { resolveTitleForTool } from "./tool-call/tool-title"
 import { getLogger } from "../lib/logger"
 
@@ -155,12 +166,33 @@ export default function ToolCall(props: ToolCallProps) {
     const prefExpanded = toolOutputDefaultExpanded()
     const toolName = toolCallMemo()?.tool || ""
     if (toolName === "read") {
+      const state = toolState()
+      if (state?.status === "error") {
+        return true
+      }
       return false
     }
     return prefExpanded
   })
 
   const [userExpanded, setUserExpanded] = createSignal<boolean | null>(null)
+  const toolInputsVisibility = createMemo(() => preferences().toolInputsVisibility || "collapsed")
+  const [toolInputVisibilityOverride, setToolInputVisibilityOverride] = createSignal<"hidden" | "expanded" | null>(null)
+  const effectiveToolInputsVisibility = createMemo(() => toolInputVisibilityOverride() ?? toolInputsVisibility())
+  const isToolInputVisible = createMemo(() => effectiveToolInputsVisibility() !== "hidden")
+  const inputDefaultExpanded = createMemo(() => effectiveToolInputsVisibility() === "expanded")
+  const [inputSectionOverride, setInputSectionOverride] = createSignal<boolean | null>(null)
+  const [outputSectionOverride, setOutputSectionOverride] = createSignal<boolean | null>(null)
+  const inputSectionExpanded = () => {
+    const override = inputSectionOverride()
+    if (override !== null) return override
+    return inputDefaultExpanded()
+  }
+  const outputSectionExpanded = () => {
+    const override = outputSectionOverride()
+    if (override !== null) return override
+    return true
+  }
 
   const isPermissionActive = createMemo(() => {
     const pending = pendingPermission()
@@ -183,6 +215,35 @@ export default function ToolCall(props: ToolCallProps) {
     return defaultExpandedForTool()
   }
 
+  const toolInput = createMemo(() => {
+    const state = toolState()
+    return readToolStatePayload(state).input
+  })
+
+  const hasToolInput = createMemo(() => {
+    const input = toolInput()
+    return input && Object.keys(input).length > 0
+  })
+
+  const toolInputMarkdown = createMemo(() => {
+    const input = toolInput()
+    if (!input || Object.keys(input).length === 0) return null
+
+    try {
+      const yamlText = stringifyYaml(input)
+      return ensureMarkdownContent(yamlText, "yaml", true)
+    } catch (error) {
+      log.error("Failed to convert tool call input to YAML", error)
+      try {
+        const jsonText = JSON.stringify(input, null, 2)
+        return ensureMarkdownContent(jsonText, "json", true)
+      } catch (nestedError) {
+        log.error("Failed to stringify tool call input", nestedError)
+        return null
+      }
+    }
+  })
+
   const permissionDetails = createMemo(() => pendingPermission()?.permission)
   const questionDetails = createMemo(() => pendingQuestion()?.request)
 
@@ -515,13 +576,13 @@ export default function ToolCall(props: ToolCallProps) {
     const status = toolState()?.status || ""
     switch (status) {
       case "pending":
-        return "⏸"
-      case "running":
         return "⏳"
+      case "running":
+        return "🔄"
       case "completed":
-        return "✓"
+        return "✅"
       case "error":
-        return "✗"
+        return "⚠️"
       default:
         return ""
     }
@@ -548,6 +609,25 @@ export default function ToolCall(props: ToolCallProps) {
     })
   }
 
+  createEffect(() => {
+    // When global preference changes, reset per-tool-call overrides so palette changes apply.
+    toolInputsVisibility()
+    setToolInputVisibilityOverride(null)
+    setInputSectionOverride(null)
+    setOutputSectionOverride(null)
+  })
+
+  const handleToggleInputVisibility = (event: MouseEvent) => {
+    event.preventDefault()
+    event.stopPropagation()
+    if (!expanded()) {
+      toggle()
+    }
+
+    const currentlyVisible = isToolInputVisible()
+    setToolInputVisibilityOverride(currentlyVisible ? "hidden" : "expanded")
+  }
+
   const renderer = createMemo(() => resolveToolRenderer(toolName()))
 
   const { renderAnsiContent } = createAnsiContentRenderer({
@@ -789,6 +869,23 @@ export default function ToolCall(props: ToolCallProps) {
           </span>
         </button>
 
+        <Show when={hasToolInput()}>
+          <button
+            type="button"
+            class="tool-call-header-input"
+            onClick={handleToggleInputVisibility}
+            aria-pressed={isToolInputVisible()}
+            aria-label={
+              isToolInputVisible()
+                ? t("toolCall.header.hideInputAriaLabel")
+                : t("toolCall.header.showInputAriaLabel")
+            }
+            title={isToolInputVisible() ? t("toolCall.header.hideInputTitle") : t("toolCall.header.showInputTitle")}
+          >
+            <ArrowRightSquare class="w-3.5 h-3.5" />
+          </button>
+        </Show>
+
         <button
           type="button"
           class="tool-call-header-copy"
@@ -806,19 +903,79 @@ export default function ToolCall(props: ToolCallProps) {
 
       {expanded() && (
         <div class="tool-call-details">
-          {renderToolBody()}
+          <Show
- 
+            when={isToolInputVisible() && hasToolInput()}
-          {renderError()}
+            fallback={
- 
+              <>
-          {renderPermissionBlock()}
+                {renderToolBody()}
-          {renderQuestionBlock()}
+                {renderError()}
- 
+
-          <Show when={status() === "pending" && !pendingPermission()}>
+                <Show when={status() === "pending" && !pendingPermission()}>
-            <div class="tool-call-pending-message">
+                  <div class="tool-call-pending-message">
-              <span class="spinner-small"></span>
+                    <span class="spinner-small"></span>
-              <span>{t("toolCall.pending.waitingToRun")}</span>
+                    <span>{t("toolCall.pending.waitingToRun")}</span>
+                  </div>
+                </Show>
+              </>
+            }
+          >
+            <div class="tool-call-io-sections">
+              <div class="tool-call-io-section">
+                <button
+                  type="button"
+                  class="tool-call-io-toggle"
+                  aria-expanded={inputSectionExpanded()}
+                  onClick={() => setInputSectionOverride((prev) => {
+                    const current = prev === null ? inputSectionExpanded() : prev
+                    return !current
+                  })}
+                >
+                  <span class="tool-call-io-title">{t("toolCall.io.input")}</span>
+                </button>
+
+                <Show when={inputSectionExpanded()}>
+                  <div class="tool-call-io-body">
+                    {(() => {
+                      const content = toolInputMarkdown()
+                      if (!content) return null
+                      return renderMarkdownContent({ content, cacheKey: "input" })
+                    })()}
+                  </div>
+                </Show>
+              </div>
+
+              <div class="tool-call-io-section">
+                <button
+                  type="button"
+                  class="tool-call-io-toggle"
+                  aria-expanded={outputSectionExpanded()}
+                  onClick={() => setOutputSectionOverride((prev) => {
+                    const current = prev === null ? outputSectionExpanded() : prev
+                    return !current
+                  })}
+                >
+                  <span class="tool-call-io-title">{t("toolCall.io.output")}</span>
+                </button>
+
+                <Show when={outputSectionExpanded()}>
+                  <div class="tool-call-io-body">
+                    {renderToolBody()}
+                    {renderError()}
+
+                    <Show when={status() === "pending" && !pendingPermission()}>
+                      <div class="tool-call-pending-message">
+                        <span class="spinner-small"></span>
+                        <span>{t("toolCall.pending.waitingToRun")}</span>
+                      </div>
+                    </Show>
+                  </div>
+                </Show>
+              </div>
             </div>
           </Show>
+
+          {renderPermissionBlock()}
+          {renderQuestionBlock()}
         </div>
       )}
  

packages/ui/src/lib/hooks/use-commands.ts

@@ -1,6 +1,6 @@
 import { createSignal, onMount } from "solid-js"
 import type { Accessor } from "solid-js"
-import type { Preferences, ExpansionPreference } from "../../stores/preferences"
+import type { Preferences, ExpansionPreference, ToolInputsVisibilityPreference } from "../../stores/preferences"
 import { createCommandRegistry, type Command } from "../commands"
 import { instances, activeInstanceId, setActiveInstanceId } from "../../stores/instances"
 import type { ClientPart, MessageInfo } from "../../types/message"
@@ -38,6 +38,7 @@ export interface UseCommandsOptions {
   setToolOutputExpansion: (mode: ExpansionPreference) => void
   setDiagnosticsExpansion: (mode: ExpansionPreference) => void
   setThinkingBlocksExpansion: (mode: ExpansionPreference) => void
+  setToolInputsVisibility: (mode: ToolInputsVisibilityPreference) => void
   handleNewInstanceRequest: () => void
   handleCloseInstance: (instanceId: string) => Promise<void>
   handleNewSession: (instanceId: string) => Promise<void>
@@ -551,6 +552,29 @@ export function useCommands(options: UseCommandsOptions) {
       },
     })
 
+    commandRegistry.register({
+      id: "tool-inputs-visibility",
+      label: () => {
+        const mode = options.preferences().toolInputsVisibility || "hidden"
+        const state =
+          mode === "expanded"
+            ? tGlobal("commands.common.expanded")
+            : mode === "collapsed"
+              ? tGlobal("commands.common.collapsed")
+              : tGlobal("commands.common.hidden")
+        return tGlobal("commands.toolInputsVisibility.label", { state })
+      },
+      description: () => tGlobal("commands.toolInputsVisibility.description"),
+      category: "System",
+      keywords: () => splitKeywords("commands.toolInputsVisibility.keywords"),
+      action: () => {
+        const mode = options.preferences().toolInputsVisibility || "hidden"
+        const next: ToolInputsVisibilityPreference =
+          mode === "hidden" ? "collapsed" : mode === "collapsed" ? "expanded" : "hidden"
+        options.setToolInputsVisibility(next)
+      },
+    })
+
     commandRegistry.register({
       id: "token-usage-visibility",
       label: () => {

packages/ui/src/lib/i18n/messages/en/commands.ts

@@ -130,6 +130,10 @@ export const commandMessages = {
   "commands.diagnosticsDefault.description": "Toggle default expansion for diagnostics output",
   "commands.diagnosticsDefault.keywords": "diagnostics, expand, collapse",
 
+  "commands.toolInputsVisibility.label": "Tool Inputs Visibility · {state}",
+  "commands.toolInputsVisibility.description": "Set default visibility for tool call input arguments",
+  "commands.toolInputsVisibility.keywords": "tool, inputs, arguments, visibility, hide, show, expand, collapse",
+
   "commands.tokenUsageDisplay.label": "Token Usage Display · {state}",
   "commands.tokenUsageDisplay.description": "Show or hide token and cost stats for assistant messages",
   "commands.tokenUsageDisplay.keywords": "token, usage, cost, stats",

packages/ui/src/lib/i18n/messages/en/instance.ts

@@ -96,11 +96,17 @@ export const instanceMessages = {
   "instanceShell.rightPanel.tabs.ariaLabel": "Right panel tabs",
   "instanceShell.rightPanel.actions.refresh": "Refresh",
   "instanceShell.rightPanel.sections.sessionChanges": "Session Changes",
+  "instanceShell.rightPanel.sections.sessionChanges.tooltip": "Files modified in the current session. Shows additions and deletions for each file.",
   "instanceShell.rightPanel.sections.plan": "Plan",
+  "instanceShell.rightPanel.sections.plan.tooltip": "The agent's roadmap for this session. Tracks tasks, subtasks, and their completion status.",
   "instanceShell.rightPanel.sections.backgroundProcesses": "Background Shells",
+  "instanceShell.rightPanel.sections.backgroundProcesses.tooltip": "Long-running processes started by the agent. You can monitor their output, stop, or terminate them.",
   "instanceShell.rightPanel.sections.mcp": "MCP Servers",
+  "instanceShell.rightPanel.sections.mcp.tooltip": "Model Context Protocol servers that extend the agent's capabilities with external tools and services.",
   "instanceShell.rightPanel.sections.lsp": "LSP Servers",
+  "instanceShell.rightPanel.sections.lsp.tooltip": "Language Server Protocol servers providing code intelligence, diagnostics, and language-specific features.",
   "instanceShell.rightPanel.sections.plugins": "Plugins",
+  "instanceShell.rightPanel.sections.plugins.tooltip": "Plugins that customize the UI and server behavior, adding features beyond MCP and LSP.",
 
   "instanceShell.sessionChanges.noSessionSelected": "Select a session to view changes.",
   "instanceShell.sessionChanges.loading": "Fetching session changes...",

packages/ui/src/lib/i18n/messages/en/toolCall.ts

@@ -5,6 +5,14 @@ export const toolCallMessages = {
   "toolCall.header.copyTitle": "Copy tool call title",
   "toolCall.header.copyAriaLabel": "Copy tool call title",
 
+  "toolCall.header.showInputTitle": "Show Tool Arguments",
+  "toolCall.header.showInputAriaLabel": "Show Tool Arguments",
+  "toolCall.header.hideInputTitle": "Hide Tool Arguments",
+  "toolCall.header.hideInputAriaLabel": "Hide Tool Arguments",
+
+  "toolCall.io.input": "Tool Input",
+  "toolCall.io.output": "Tool Output",
+
   "toolCall.diff.label": "Diff",
   "toolCall.diff.label.withPath": "Diff · {path}",
   "toolCall.diff.viewMode.ariaLabel": "Diff view mode",

packages/ui/src/lib/i18n/messages/es/commands.ts

@@ -130,6 +130,10 @@ export const commandMessages = {
   "commands.diagnosticsDefault.description": "Alternar la expansión por defecto de la salida de diagnósticos",
   "commands.diagnosticsDefault.keywords": "diagnósticos, expandir, colapsar",
 
+  "commands.toolInputsVisibility.label": "Visibilidad de entradas de herramientas · {state}",
+  "commands.toolInputsVisibility.description": "Configurar la visibilidad por defecto de los argumentos de entrada de llamadas de herramienta",
+  "commands.toolInputsVisibility.keywords": "herramienta, entradas, argumentos, visibilidad, ocultar, mostrar, expandir, colapsar",
+
   "commands.tokenUsageDisplay.label": "Mostrar uso de tokens · {state}",
   "commands.tokenUsageDisplay.description": "Mostrar u ocultar estadísticas de tokens y costo en los mensajes del asistente",
   "commands.tokenUsageDisplay.keywords": "token, uso, costo, estadísticas",

packages/ui/src/lib/i18n/messages/es/instance.ts

@@ -48,7 +48,7 @@ export const instanceMessages = {
   "instanceShell.commandPalette.openAriaLabel": "Abrir paleta de comandos",
   "instanceShell.commandPalette.button": "Paleta de comandos",
 
-  "instanceShell.connection.ariaLabel": "Connection {status}",
+  "instanceShell.connection.ariaLabel": "Conexión {status}",
   "instanceShell.connection.connected": "Conectada",
   "instanceShell.connection.connecting": "Conectando...",
   "instanceShell.connection.disconnected": "Desconectada",
@@ -93,16 +93,22 @@ export const instanceMessages = {
   "instanceShell.rightPanel.tabs.files": "Archivos",
   "instanceShell.rightPanel.tabs.status": "Estado",
   "instanceShell.rightPanel.tabs.ariaLabel": "Pestañas del panel derecho",
-  "instanceShell.rightPanel.sections.sessionChanges": "Cambios de sesion",
+  "instanceShell.rightPanel.sections.sessionChanges": "Cambios de sesión",
+  "instanceShell.rightPanel.sections.sessionChanges.tooltip": "Archivos modificados en la sesión actual. Muestra las adiciones y eliminaciones de cada archivo.",
   "instanceShell.rightPanel.sections.plan": "Plan",
+  "instanceShell.rightPanel.sections.plan.tooltip": "Hoja de ruta del agente para esta sesión. Realiza el seguimiento de tareas, subtareas y su estado de finalización.",
   "instanceShell.rightPanel.sections.backgroundProcesses": "Shells en segundo plano",
+  "instanceShell.rightPanel.sections.backgroundProcesses.tooltip": "Procesos de larga duración iniciados por el agente. Puedes supervisar su salida, detenerlos o terminarlos.",
   "instanceShell.rightPanel.sections.mcp": "Servidores MCP",
+  "instanceShell.rightPanel.sections.mcp.tooltip": "Servidores del Model Context Protocol (MCP) que amplían las capacidades del agente con herramientas y servicios externos.",
   "instanceShell.rightPanel.sections.lsp": "Servidores LSP",
+  "instanceShell.rightPanel.sections.lsp.tooltip": "Servidores del Language Server Protocol (LSP) que proporcionan inteligencia de código, diagnósticos y funciones específicas del lenguaje.",
   "instanceShell.rightPanel.sections.plugins": "Plugins",
+  "instanceShell.rightPanel.sections.plugins.tooltip": "Plugins que personalizan el comportamiento de la UI y del servidor, y añaden funciones más allá de MCP y LSP.",
 
-  "instanceShell.sessionChanges.noSessionSelected": "Selecciona una sesion para ver los cambios.",
+  "instanceShell.sessionChanges.noSessionSelected": "Selecciona una sesión para ver los cambios.",
-  "instanceShell.sessionChanges.loading": "Obteniendo cambios de la sesion...",
+  "instanceShell.sessionChanges.loading": "Obteniendo cambios de la sesión...",
-  "instanceShell.sessionChanges.empty": "Aun no hay cambios.",
+  "instanceShell.sessionChanges.empty": "Aún no hay cambios.",
   "instanceShell.sessionChanges.filesChanged": "{count} archivos cambiados",
   "instanceShell.sessionChanges.actions.show": "Mostrar cambios",
 

packages/ui/src/lib/i18n/messages/es/toolCall.ts

@@ -5,6 +5,14 @@ export const toolCallMessages = {
   "toolCall.header.copyTitle": "Copy tool call title",
   "toolCall.header.copyAriaLabel": "Copy tool call title",
 
+  "toolCall.header.showInputTitle": "Show Tool Arguments",
+  "toolCall.header.showInputAriaLabel": "Show Tool Arguments",
+  "toolCall.header.hideInputTitle": "Hide Tool Arguments",
+  "toolCall.header.hideInputAriaLabel": "Hide Tool Arguments",
+
+  "toolCall.io.input": "Tool Input",
+  "toolCall.io.output": "Tool Output",
+
   "toolCall.diff.label": "Diff",
   "toolCall.diff.label.withPath": "Diff · {path}",
   "toolCall.diff.viewMode.ariaLabel": "Modo de vista de diff",

packages/ui/src/lib/i18n/messages/fr/commands.ts

@@ -130,6 +130,10 @@ export const commandMessages = {
   "commands.diagnosticsDefault.description": "Choisir l'ouverture par défaut de la sortie des diagnostics",
   "commands.diagnosticsDefault.keywords": "diagnostics, développer, réduire",
 
+  "commands.toolInputsVisibility.label": "Visibilité des entrées d'outil · {state}",
+  "commands.toolInputsVisibility.description": "Définir la visibilité par défaut des arguments d'entrée des appels d'outil",
+  "commands.toolInputsVisibility.keywords": "outil, entrées, arguments, visibilité, masquer, afficher, développer, réduire",
+
   "commands.tokenUsageDisplay.label": "Affichage de l'usage des tokens · {state}",
   "commands.tokenUsageDisplay.description": "Afficher ou masquer les stats de tokens et de coût pour les messages de l'assistant",
   "commands.tokenUsageDisplay.keywords": "token, usage, coût, stats",

packages/ui/src/lib/i18n/messages/fr/instance.ts

@@ -94,11 +94,17 @@ export const instanceMessages = {
   "instanceShell.rightPanel.tabs.status": "Statut",
   "instanceShell.rightPanel.tabs.ariaLabel": "Onglets du panneau droit",
   "instanceShell.rightPanel.sections.sessionChanges": "Changements de session",
+  "instanceShell.rightPanel.sections.sessionChanges.tooltip": "Fichiers modifiés dans la session actuelle. Affiche les ajouts et suppressions pour chaque fichier.",
   "instanceShell.rightPanel.sections.plan": "Plan",
+  "instanceShell.rightPanel.sections.plan.tooltip": "Feuille de route de l'agent pour cette session. Suit les tâches et leur statut d'achèvement.",
   "instanceShell.rightPanel.sections.backgroundProcesses": "Shells en arrière-plan",
+  "instanceShell.rightPanel.sections.backgroundProcesses.tooltip": "Processus longs démarrés par l'agent. Vous pouvez surveiller leur sortie, les arrêter ou les terminer.",
   "instanceShell.rightPanel.sections.mcp": "Serveurs MCP",
+  "instanceShell.rightPanel.sections.mcp.tooltip": "Serveurs du protocole Model Context Protocol qui étendent les capacités de l'agent avec des outils externes.",
   "instanceShell.rightPanel.sections.lsp": "Serveurs LSP",
+  "instanceShell.rightPanel.sections.lsp.tooltip": "Serveurs du protocole Language Server Protocol fournissant l'intelligence de code et les diagnostics.",
   "instanceShell.rightPanel.sections.plugins": "Plugins",
+  "instanceShell.rightPanel.sections.plugins.tooltip": "Plugins qui personnalisent le comportement de l'UI et du serveur, ajoutant des fonctionnalités au-delà de MCP et LSP.",
 
   "instanceShell.sessionChanges.noSessionSelected": "Sélectionnez une session pour voir les changements.",
   "instanceShell.sessionChanges.loading": "Récupération des changements...",

packages/ui/src/lib/i18n/messages/fr/toolCall.ts

@@ -5,6 +5,14 @@ export const toolCallMessages = {
   "toolCall.header.copyTitle": "Copy tool call title",
   "toolCall.header.copyAriaLabel": "Copy tool call title",
 
+  "toolCall.header.showInputTitle": "Show Tool Arguments",
+  "toolCall.header.showInputAriaLabel": "Show Tool Arguments",
+  "toolCall.header.hideInputTitle": "Hide Tool Arguments",
+  "toolCall.header.hideInputAriaLabel": "Hide Tool Arguments",
+
+  "toolCall.io.input": "Tool Input",
+  "toolCall.io.output": "Tool Output",
+
   "toolCall.diff.label": "Diff",
   "toolCall.diff.label.withPath": "Diff · {path}",
   "toolCall.diff.viewMode.ariaLabel": "Mode d'affichage du diff",

packages/ui/src/lib/i18n/messages/ja/commands.ts

@@ -130,6 +130,10 @@ export const commandMessages = {
   "commands.diagnosticsDefault.description": "診断出力を既定で展開するか切り替え",
   "commands.diagnosticsDefault.keywords": "診断, 展開, 折りたたみ, diagnostics, expand, collapse",
 
+  "commands.toolInputsVisibility.label": "ツール入力の表示 · {state}",
+  "commands.toolInputsVisibility.description": "ツール呼び出しの入力引数の既定の表示状態を設定します",
+  "commands.toolInputsVisibility.keywords": "ツール, 入力, 引数, 表示, 非表示, 展開, 折りたたみ, tool, inputs, arguments, visibility, hide, show, expand, collapse",
+
   "commands.tokenUsageDisplay.label": "トークン使用量表示 · {state}",
   "commands.tokenUsageDisplay.description": "アシスタントメッセージのトークン/コスト統計を表示/非表示",
   "commands.tokenUsageDisplay.keywords": "トークン, 使用量, コスト, 統計, token, usage, cost, stats",

packages/ui/src/lib/i18n/messages/ja/instance.ts

@@ -94,11 +94,17 @@ export const instanceMessages = {
   "instanceShell.rightPanel.tabs.status": "ステータス",
   "instanceShell.rightPanel.tabs.ariaLabel": "右パネルのタブ",
   "instanceShell.rightPanel.sections.sessionChanges": "セッション変更",
+  "instanceShell.rightPanel.sections.sessionChanges.tooltip": "現在のセッションで変更されたファイル。各ファイルの追加と削除を表示します。",
   "instanceShell.rightPanel.sections.plan": "計画",
+  "instanceShell.rightPanel.sections.plan.tooltip": "このセッションにおけるエージェントのロードマップ。タスクやサブタスク、および完了状況を追跡します。",
   "instanceShell.rightPanel.sections.backgroundProcesses": "バックグラウンドシェル",
+  "instanceShell.rightPanel.sections.backgroundProcesses.tooltip": "エージェントが開始した長時間実行プロセス。出力を監視し、停止または終了できます。",
   "instanceShell.rightPanel.sections.mcp": "MCP サーバー",
+  "instanceShell.rightPanel.sections.mcp.tooltip": "Model Context Protocol (MCP) サーバー。外部ツールやサービスでエージェントの機能を拡張します。",
   "instanceShell.rightPanel.sections.lsp": "LSP サーバー",
+  "instanceShell.rightPanel.sections.lsp.tooltip": "Language Server Protocolサーバーがコードインテリジェンス、診断、言語固有の機能を提供します。",
   "instanceShell.rightPanel.sections.plugins": "プラグイン",
+  "instanceShell.rightPanel.sections.plugins.tooltip": "UI とサーバーの動作をカスタマイズし、MCP や LSP 以外の機能も追加できるプラグイン。",
 
   "instanceShell.sessionChanges.noSessionSelected": "変更を表示するにはセッションを選択してください。",
   "instanceShell.sessionChanges.loading": "変更を取得中...",

packages/ui/src/lib/i18n/messages/ja/toolCall.ts

@@ -5,6 +5,14 @@ export const toolCallMessages = {
   "toolCall.header.copyTitle": "Copy tool call title",
   "toolCall.header.copyAriaLabel": "Copy tool call title",
 
+  "toolCall.header.showInputTitle": "Show Tool Arguments",
+  "toolCall.header.showInputAriaLabel": "Show Tool Arguments",
+  "toolCall.header.hideInputTitle": "Hide Tool Arguments",
+  "toolCall.header.hideInputAriaLabel": "Hide Tool Arguments",
+
+  "toolCall.io.input": "Tool Input",
+  "toolCall.io.output": "Tool Output",
+
   "toolCall.diff.label": "Diff",
   "toolCall.diff.label.withPath": "Diff · {path}",
   "toolCall.diff.viewMode.ariaLabel": "diff 表示モード",

packages/ui/src/lib/i18n/messages/ru/commands.ts

@@ -130,6 +130,10 @@ export const commandMessages = {
   "commands.diagnosticsDefault.description": "Переключить, разворачивать ли вывод диагностики по умолчанию",
   "commands.diagnosticsDefault.keywords": "diagnostics, развернуть, свернуть",
 
+  "commands.toolInputsVisibility.label": "Видимость входных данных инструмента · {state}",
+  "commands.toolInputsVisibility.description": "Установить видимость аргументов входа вызовов инструментов по умолчанию",
+  "commands.toolInputsVisibility.keywords": "инструмент, вход, аргументы, видимость, скрыть, показать, раскрыть, свернуть, tool, inputs, arguments, visibility, hide, show, expand, collapse",
+
   "commands.tokenUsageDisplay.label": "Отображение token-статистики · {state}",
   "commands.tokenUsageDisplay.description": "Показать или скрыть статистику token и стоимости для сообщений ассистента",
   "commands.tokenUsageDisplay.keywords": "token, usage, cost, статистика",

packages/ui/src/lib/i18n/messages/ru/instance.ts

@@ -94,11 +94,17 @@ export const instanceMessages = {
   "instanceShell.rightPanel.tabs.status": "Статус",
   "instanceShell.rightPanel.tabs.ariaLabel": "Вкладки правой панели",
   "instanceShell.rightPanel.sections.sessionChanges": "Изменения сессии",
+  "instanceShell.rightPanel.sections.sessionChanges.tooltip": "Файлы, измененные в текущей сессии. Показывает добавления и удаления для каждого файла.",
   "instanceShell.rightPanel.sections.plan": "План",
-  "instanceShell.rightPanel.sections.backgroundProcesses": "Фоновые Shell",
+  "instanceShell.rightPanel.sections.plan.tooltip": "Дорожная карта агента для этой сессии. Отслеживает задачи и их статус выполнения.",
+  "instanceShell.rightPanel.sections.backgroundProcesses": "Фоновые оболочки",
+  "instanceShell.rightPanel.sections.backgroundProcesses.tooltip": "Долгоработающие процессы, запущенные агентом. Вы можете следить за их выводом, останавливать или завершать их.",
   "instanceShell.rightPanel.sections.mcp": "MCP-серверы",
+  "instanceShell.rightPanel.sections.mcp.tooltip": "Серверы протокола Model Context Protocol, расширяющие возможности агента внешними инструментами.",
   "instanceShell.rightPanel.sections.lsp": "LSP-серверы",
+  "instanceShell.rightPanel.sections.lsp.tooltip": "Серверы протокола Language Server Protocol, обеспечивающие интеллектуальную поддержку кода и диагностику.",
   "instanceShell.rightPanel.sections.plugins": "Плагины",
+  "instanceShell.rightPanel.sections.plugins.tooltip": "Плагины, настраивающие поведение интерфейса и сервера, добавляющие функции поверх MCP и LSP.",
 
   "instanceShell.sessionChanges.noSessionSelected": "Выберите сессию, чтобы просмотреть изменения.",
   "instanceShell.sessionChanges.loading": "Загрузка изменений...",
@@ -128,7 +134,7 @@ export const instanceMessages = {
   "versionPill.uiWithVersion": "UI {version}",
   "versionPill.source": " ({source})",
 
-  "opencodeBinarySelector.title": "OpenCode Binary",
+  "opencodeBinarySelector.title": "Бинарник OpenCode",
   "opencodeBinarySelector.subtitle": "Выберите, какой исполняемый файл OpenCode запускать",
   "opencodeBinarySelector.customPath.placeholder": "Введите путь к бинарнику opencode…",
   "opencodeBinarySelector.actions.add": "Добавить",

packages/ui/src/lib/i18n/messages/ru/toolCall.ts

@@ -5,6 +5,14 @@ export const toolCallMessages = {
   "toolCall.header.copyTitle": "Copy tool call title",
   "toolCall.header.copyAriaLabel": "Copy tool call title",
 
+  "toolCall.header.showInputTitle": "Show Tool Arguments",
+  "toolCall.header.showInputAriaLabel": "Show Tool Arguments",
+  "toolCall.header.hideInputTitle": "Hide Tool Arguments",
+  "toolCall.header.hideInputAriaLabel": "Hide Tool Arguments",
+
+  "toolCall.io.input": "Tool Input",
+  "toolCall.io.output": "Tool Output",
+
   "toolCall.diff.label": "Diff",
   "toolCall.diff.label.withPath": "Diff · {path}",
   "toolCall.diff.viewMode.ariaLabel": "Режим просмотра diff",

packages/ui/src/lib/i18n/messages/zh-Hans/commands.ts

@@ -130,6 +130,10 @@ export const commandMessages = {
   "commands.diagnosticsDefault.description": "切换诊断输出是否默认展开",
   "commands.diagnosticsDefault.keywords": "diagnostics, expand, collapse, 诊断, 展开, 折叠",
 
+  "commands.toolInputsVisibility.label": "工具输入可见性 · {state}",
+  "commands.toolInputsVisibility.description": "设置工具调用输入参数的默认可见性",
+  "commands.toolInputsVisibility.keywords": "工具, 输入, 参数, 可见性, 隐藏, 显示, 展开, 折叠, tool, inputs, arguments, visibility, hide, show, expand, collapse",
+
   "commands.tokenUsageDisplay.label": "Token 使用显示 · {state}",
   "commands.tokenUsageDisplay.description": "显示或隐藏助手消息的 token 和费用统计",
   "commands.tokenUsageDisplay.keywords": "token, usage, cost, stats, 令牌, 用量, 费用, 统计",

packages/ui/src/lib/i18n/messages/zh-Hans/instance.ts

@@ -94,11 +94,17 @@ export const instanceMessages = {
   "instanceShell.rightPanel.tabs.status": "状态",
   "instanceShell.rightPanel.tabs.ariaLabel": "右侧面板标签页",
   "instanceShell.rightPanel.sections.sessionChanges": "会话更改",
+  "instanceShell.rightPanel.sections.sessionChanges.tooltip": "当前会话中修改的文件。显示每个文件的添加和删除。",
   "instanceShell.rightPanel.sections.plan": "计划",
+  "instanceShell.rightPanel.sections.plan.tooltip": "代理的路线图。跟踪任务、子任务及其完成状态。",
   "instanceShell.rightPanel.sections.backgroundProcesses": "后台 Shell",
+  "instanceShell.rightPanel.sections.backgroundProcesses.tooltip": "代理启动的后台进程。您可以监控其输出、停止或终止它们。",
   "instanceShell.rightPanel.sections.mcp": "MCP 服务器",
+  "instanceShell.rightPanel.sections.mcp.tooltip": "模型上下文协议服务器，使用外部工具和服务扩展代理能力。",
   "instanceShell.rightPanel.sections.lsp": "LSP 服务器",
+  "instanceShell.rightPanel.sections.lsp.tooltip": "语言服务器协议服务器，提供代码智能、诊断和语言特定的功能。",
   "instanceShell.rightPanel.sections.plugins": "插件",
+  "instanceShell.rightPanel.sections.plugins.tooltip": "自定义 UI 和服务器行为的插件，添加超出 MCP 和 LSP 的功能。",
 
   "instanceShell.sessionChanges.noSessionSelected": "选择会话以查看更改。",
   "instanceShell.sessionChanges.loading": "正在获取会话更改...",

packages/ui/src/lib/i18n/messages/zh-Hans/toolCall.ts

@@ -5,6 +5,14 @@ export const toolCallMessages = {
   "toolCall.header.copyTitle": "Copy tool call title",
   "toolCall.header.copyAriaLabel": "Copy tool call title",
 
+  "toolCall.header.showInputTitle": "Show Tool Arguments",
+  "toolCall.header.showInputAriaLabel": "Show Tool Arguments",
+  "toolCall.header.hideInputTitle": "Hide Tool Arguments",
+  "toolCall.header.hideInputAriaLabel": "Hide Tool Arguments",
+
+  "toolCall.io.input": "Tool Input",
+  "toolCall.io.output": "Tool Output",
+
   "toolCall.diff.label": "Diff",
   "toolCall.diff.label.withPath": "Diff · {path}",
   "toolCall.diff.viewMode.ariaLabel": "Diff 视图模式",

packages/ui/src/lib/launch-errors.ts

@@ -0,0 +1,29 @@
+export function formatLaunchErrorMessage(error: unknown, fallbackMessage: string): string {
+  if (!error) {
+    return fallbackMessage
+  }
+
+  const raw = typeof error === "string" ? error : error instanceof Error ? error.message : String(error)
+
+  try {
+    const parsed = JSON.parse(raw) as unknown
+    if (parsed && typeof parsed === "object" && "error" in parsed && typeof (parsed as any).error === "string") {
+      return (parsed as any).error
+    }
+  } catch {
+    // ignore JSON parse errors
+  }
+
+  return raw
+}
+
+export function isMissingBinaryMessage(message: string): boolean {
+  const normalized = message.toLowerCase()
+  return (
+    normalized.includes("opencode binary not found") ||
+    normalized.includes("binary not found") ||
+    normalized.includes("no such file or directory") ||
+    normalized.includes("binary is not executable") ||
+    normalized.includes("enoent")
+  )
+}

packages/ui/src/stores/instances.ts

@@ -35,6 +35,7 @@ import { upsertPermissionV2, removePermissionV2, upsertQuestionV2, removeQuestio
 import { clearCacheForInstance } from "../lib/global-cache"
 import { getLogger } from "../lib/logger"
 import { mergeInstanceMetadata, clearInstanceMetadata } from "./instance-metadata"
+import { showWorkspaceLaunchError } from "./launch-errors"
 
 const log = getLogger("api")
 
@@ -372,6 +373,7 @@ function handleWorkspaceEvent(event: WorkspaceEventPayload) {
       break
     case "workspace.error":
       upsertWorkspace(event.workspace)
+      showWorkspaceLaunchError(event.workspace)
       break
     case "workspace.stopped":
       releaseInstanceResources(event.workspaceId)

packages/ui/src/stores/launch-errors.ts

@@ -0,0 +1,53 @@
+import { createSignal } from "solid-js"
+import type { WorkspaceDescriptor } from "../../../server/src/api-types"
+import { tGlobal } from "../lib/i18n"
+import { formatLaunchErrorMessage, isMissingBinaryMessage } from "../lib/launch-errors"
+
+type LaunchErrorSource = "create" | "workspace"
+
+export interface LaunchErrorState {
+  source: LaunchErrorSource
+  message: string
+  binaryPath: string
+  missingBinary: boolean
+  instanceId?: string
+}
+
+const [launchError, setLaunchError] = createSignal<LaunchErrorState | null>(null)
+
+// Avoid spamming the user with the same modal on repeated events.
+const lastWorkspaceErrorByInstanceId = new Map<string, string>()
+
+export function showLaunchError(next: LaunchErrorState) {
+  setLaunchError(next)
+}
+
+export function clearLaunchError() {
+  setLaunchError(null)
+}
+
+export function showWorkspaceLaunchError(workspace: WorkspaceDescriptor) {
+  const instanceId = workspace.id
+  const rawMessage = workspace.error
+  const message = formatLaunchErrorMessage(rawMessage, tGlobal("app.launchError.fallbackMessage"))
+
+  const previous = lastWorkspaceErrorByInstanceId.get(instanceId)
+  if (previous && previous === message) {
+    return
+  }
+
+  lastWorkspaceErrorByInstanceId.set(instanceId, message)
+
+  const binaryPath = (workspace.binaryLabel || workspace.binaryId || "opencode").trim() || "opencode"
+  const missingBinary = isMissingBinaryMessage(message)
+
+  showLaunchError({
+    source: "workspace",
+    instanceId,
+    message,
+    binaryPath,
+    missingBinary,
+  })
+}
+
+export { launchError }

packages/ui/src/stores/preferences.tsx

@@ -25,6 +25,7 @@ export interface ModelPreference {
 
 export type DiffViewMode = "split" | "unified"
 export type ExpansionPreference = "expanded" | "collapsed"
+export type ToolInputsVisibilityPreference = "hidden" | "collapsed" | "expanded"
 export type ListeningMode = "local" | "all"
 
 export interface UiSettings {
@@ -37,6 +38,7 @@ export interface UiSettings {
   diffViewMode: DiffViewMode
   toolOutputExpansion: ExpansionPreference
   diagnosticsExpansion: ExpansionPreference
+  toolInputsVisibility: ToolInputsVisibilityPreference
   showUsageMetrics: boolean
   autoCleanupBlankSessions: boolean
 
@@ -108,6 +110,7 @@ const defaultUiSettings: UiSettings = {
   diffViewMode: "split",
   toolOutputExpansion: "expanded",
   diagnosticsExpansion: "expanded",
+  toolInputsVisibility: "collapsed",
   showUsageMetrics: true,
   autoCleanupBlankSessions: true,
 
@@ -130,6 +133,10 @@ function normalizeUiSettings(input?: Partial<UiSettings> | null): UiSettings {
     diffViewMode: sanitized.diffViewMode ?? defaultUiSettings.diffViewMode,
     toolOutputExpansion: sanitized.toolOutputExpansion ?? defaultUiSettings.toolOutputExpansion,
     diagnosticsExpansion: sanitized.diagnosticsExpansion ?? defaultUiSettings.diagnosticsExpansion,
+    toolInputsVisibility:
+      sanitized.toolInputsVisibility === "hidden" || sanitized.toolInputsVisibility === "collapsed" || sanitized.toolInputsVisibility === "expanded"
+        ? sanitized.toolInputsVisibility
+        : defaultUiSettings.toolInputsVisibility,
     showUsageMetrics: sanitized.showUsageMetrics ?? defaultUiSettings.showUsageMetrics,
     autoCleanupBlankSessions: sanitized.autoCleanupBlankSessions ?? defaultUiSettings.autoCleanupBlankSessions,
     osNotificationsEnabled: sanitized.osNotificationsEnabled ?? defaultUiSettings.osNotificationsEnabled,
@@ -439,6 +446,11 @@ function setDiagnosticsExpansion(mode: ExpansionPreference): void {
   updateUiSettings({ diagnosticsExpansion: mode })
 }
 
+function setToolInputsVisibility(mode: ToolInputsVisibilityPreference): void {
+  if (preferences().toolInputsVisibility === mode) return
+  updateUiSettings({ toolInputsVisibility: mode })
+}
+
 function setThinkingBlocksExpansion(mode: ExpansionPreference): void {
   if (preferences().thinkingBlocksExpansion === mode) return
   updateUiSettings({ thinkingBlocksExpansion: mode })
@@ -536,6 +548,7 @@ interface ConfigContextValue {
   setToolOutputExpansion: typeof setToolOutputExpansion
   setDiagnosticsExpansion: typeof setDiagnosticsExpansion
   setThinkingBlocksExpansion: typeof setThinkingBlocksExpansion
+  setToolInputsVisibility: typeof setToolInputsVisibility
 
   // instance scoped
   setAgentModelPreference: typeof setAgentModelPreference
@@ -579,6 +592,7 @@ const configContextValue: ConfigContextValue = {
   setToolOutputExpansion,
   setDiagnosticsExpansion,
   setThinkingBlocksExpansion,
+  setToolInputsVisibility,
   setAgentModelPreference,
   getAgentModelPreference,
 }

packages/ui/src/styles/messaging/tool-call.css

@@ -87,6 +87,7 @@
   @apply flex items-stretch w-full;
   background-color: transparent;
   color: var(--text-primary);
+  border-bottom: 1px solid var(--tool-call-border-color);
 }
 
 .tool-call-header:hover {
@@ -127,11 +128,30 @@
   cursor: pointer;
 }
 
+.tool-call-header-input {
+  @apply inline-flex items-center justify-center;
+  background-color: transparent;
+  border: none;
+  color: var(--text-secondary);
+  padding: 0 0.5rem;
+  border-radius: 0;
+  cursor: pointer;
+}
+
 .tool-call-header-copy:hover {
   background-color: transparent;
   color: var(--text-primary);
 }
 
+.tool-call-header-input:hover {
+  background-color: transparent;
+  color: var(--text-primary);
+}
+
+.tool-call-header-input[aria-pressed="true"] {
+  color: var(--text-primary);
+}
+
 .tool-call-header-status {
   @apply inline-flex items-center justify-center;
   font-size: 0.95rem;
@@ -213,6 +233,63 @@
   font-size: var(--font-size-xs);
 }
 
+
+.tool-call-io-sections {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+  padding: 0;
+}
+
+.tool-call-io-section {
+  border: 1px solid var(--tool-call-border-color);
+  overflow: hidden;
+  background-color: transparent;
+  border-radius: 0;
+}
+
+.tool-call-io-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 0.75rem;
+  padding: 0.5rem;
+  background-color: var(--surface-secondary);
+  border: none;
+  border-bottom: 1px solid var(--tool-call-border-color);
+  width: 100%;
+  text-align: left;
+  font-size: 0.875rem;
+  font-weight: normal;
+  color: var(--text-primary);
+  cursor: pointer;
+}
+
+.tool-call-io-toggle::before {
+  content: "▶";
+  font-size: 11px;
+  margin-right: 0.35rem;
+  color: var(--text-secondary);
+}
+
+.tool-call-io-toggle[aria-expanded="true"]::before {
+  content: "▼";
+}
+
+.tool-call-io-title {
+  font-weight: inherit;
+  color: inherit;
+}
+
+.tool-call-io-body {
+  background-color: var(--surface-code);
+}
+
+/* IO sections provide the outer frame; avoid double borders on markdown frames. */
+.tool-call-io-body .tool-call-markdown {
+  border: none;
+}
+
 .tool-call-markdown {
   background-color: var(--surface-code);
   /* Keep a visible frame around the scroll viewport (not the content). */

packages/ui/src/styles/panels/right-panel.css

@@ -412,7 +412,7 @@
 }
 
 .right-panel-accordion-trigger {
-  @apply w-full flex items-center justify-between gap-3 px-3 py-2.5 text-[11px] font-semibold uppercase tracking-wide transition-colors duration-150;
+  @apply w-full flex items-center justify-between px-3 py-2.5 text-[11px] font-semibold uppercase tracking-wide transition-colors duration-150;
   color: var(--text-secondary);
   background-color: transparent;
 }
@@ -422,6 +422,11 @@
   color: var(--text-primary);
 }
 
+.section-left {
+  @apply flex items-center;
+  flex-shrink: 0;
+}
+
 .right-panel-accordion-chevron {
   @apply h-4 w-4 transition-transform duration-200;
   color: var(--text-muted);
@@ -441,6 +446,51 @@
   min-height: 0;
 }
 
+/* Section info tooltip */
+.section-info-trigger {
+  @apply inline-flex items-center justify-center p-0.5 rounded transition-all duration-150;
+  color: var(--text-muted);
+  flex-shrink: 0;
+}
+
+.section-info-trigger:hover {
+  color: var(--text-primary);
+  background-color: var(--surface-hover);
+}
+
+.section-label {
+  margin-left: 2px;
+}
+
+.section-info-icon {
+  @apply w-3.5 h-3.5;
+}
+
+.section-info-tooltip {
+  @apply max-w-xs px-3 py-2 text-xs rounded-lg border shadow-lg;
+  background-color: var(--surface-base);
+  border-color: var(--border-base);
+  color: var(--text-primary);
+  animation: tooltipShow 150ms ease-out;
+  transform-origin: var(--kb-tooltip-content-transform-origin);
+  z-index: 9999;
+}
+
+.section-info-tooltip[data-expanded] {
+  animation: tooltipShow 150ms ease-out;
+}
+
+@keyframes tooltipShow {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
 /* Background process cards in status panel */
 .status-process-card {
   @apply rounded-lg border flex flex-col gap-2 p-3 transition-all duration-150;