---
title: "Tool view"
description: "tool-view は同じアプリが宣言した tool call の表示を置換または拡張します。空でない toolNames で結び、Core は一つの toolResult prop を渡して state 変化中も同じ mount を維持します。"
url: "https://sotaagents.ai/ja/manual/developer-guide/tool-views"
generated_by: "sotaagents-ldp"
docs_index: "https://sotaagents.ai/manual/llms.txt"
locale: "ja"
---

# Tool view

`tool-view` は同じアプリが宣言した tool call の表示を置換または拡張します。空でない `toolNames` で結び、Core は一つの `toolResult` prop を渡して state 変化中も同じ mount を維持します。

YAML

```
contributes:
  ui:
    - id: calendar-result
      kind: nativeModule
      surface: tool-view
      slot: chat.message.inline.below
      toolNames: [readCalendar]
      renderBeforeOutput: true
      module:
        entry: dist/ui/app.js
        export: CalendarResult
```

TSX

```
import type { ToolResultSurfaceProps } from '@sota/platform';

type Input = { from: string; to: string };
type Output = { events: Array<{ id: string; title: string }> };

export function CalendarResult({ toolResult }: ToolResultSurfaceProps<Input, Output>) {
  if (toolResult.state === 'input-streaming') return <p>Preparing…</p>;
  if (toolResult.state === 'output-pending') return <p>Waiting for an action…</p>;
  if (toolResult.state === 'output-error') return <p>{toolResult.errorText}</p>;
  if (toolResult.state === 'output-denied') return <p>Permission denied.</p>;
  if (toolResult.state !== 'output-available') return <p>Running…</p>;
  return <p>{toolResult.result?.events.length ?? 0} events</p>;
}
```

| State | Contract |
| --- | --- |
| `input-streaming` | `renderBeforeOutput` 時の best-effort な partial `unknown` input。 |
| `input-available`、approval state | Schema validation 済みの完全な input。 |
| `output-pending` | Deferred call。`deferred.operationId` と opaque app `data` を持てます。 |
| `output-available` | `result` は transport metadata を除いた app result。 |
| `output-error`、`output-denied` | Result を仮定せず失敗または denial を描画します。 |

`execution` は call を生成した app lane を示します。Payload の診断用 context であり、producer の historical artifact を load する指定ではありません。