Function ToolsView

packages/ai-devtools/src/components/hooks/HookDetails.tsx:963–1086

(props)

}

const ToolsView: Component<{ hook: HookRecord }> = (props) => {
  const { state, applyToolFixture, deleteToolFixture } = useAIStore()
  const styles = useStyles()
  const [selectedToolName, setSelectedToolName] = createSignal<string | null>(
    props.hook.tools[0]?.name ?? null,
  )

  const selectedTool = createMemo(() =>
    props.hook.tools.find((tool) => tool.name === selectedToolName()),
  )

  const savedFixtures = createMemo(() =>
    state.hooks.fixtures
      .filter(
        (fixture) =>
          fixture.hookId === props.hook.id ||
          (!!props.hook.threadId && fixture.threadId === props.hook.threadId),
      )
      .sort((a, b) => b.createdAt - a.createdAt),
  )

  return (
    <div class={styles().hookDetails.toolsGrid} data-testid="ai-devtools-tools">
      <div class={styles().hookDetails.toolsList}>
        <Show
          when={props.hook.tools.length > 0}
          fallback={
            <div class={styles().hookDetails.emptySmall}>No tools.</div>
          }
        >
          <For each={props.hook.tools}>
            {(tool) => (
              <button
                type="button"
                data-testid="ai-devtools-tool-row"
                data-tool-name={tool.name}
                class={`${styles().hookDetails.toolRow} ${
                  selectedToolName() === tool.name
                    ? styles().hookDetails.toolRowSelected
                    : ''
                }`}
                onClick={() => setSelectedToolName(tool.name)}
              >
                <span class={styles().hookDetails.toolName}>{tool.name}</span>
                <Show when={tool.needsApproval}>
                  <span class={styles().hookDetails.eventBadge}>approval</span>
                </Show>
              </button>
            )}
          </For>
        </Show>
      </div>
      <div class={styles().hookDetails.toolDetail}>
        <Show
          when={selectedTool()}
          fallback={
            <div class={styles().hookDetails.emptySmall}>Select a tool.</div>
          }