Function ToolRunPanel

packages/react/src/components/tool-run-panel.tsx:87–364

(props: {
  /** Integration slug — the `<integration>` address segment. */
  readonly integration: IntegrationSlug;
  /** Bare tool name — the `<tool>` address segment (may contain dots). */
  readonly toolName: string;
  /** This integration's connections (accounts) across BOTH owners. Each is
   *  addressed under its OWN owner — there is no ambient owner. */
  readonly connections: readonly Connection[];
  /** Pre-select this connection (the account the selected tool belongs to in the
   *  grouped Tools tab). Falls back to the first connection when null/unmatched. */
  readonly initialConnectionName?: ConnectionName | string | null;
})

};

export function ToolRunPanel(props: {
  /** Integration slug — the `<integration>` address segment. */
  readonly integration: IntegrationSlug;
  /** Bare tool name — the `<tool>` address segment (may contain dots). */
  readonly toolName: string;
  /** This integration's connections (accounts) across BOTH owners. Each is
   *  addressed under its OWN owner — there is no ambient owner. */
  readonly connections: readonly Connection[];
  /** Pre-select this connection (the account the selected tool belongs to in the
   *  grouped Tools tab). Falls back to the first connection when null/unmatched. */
  readonly initialConnectionName?: ConnectionName | string | null;
}) {
  const { integration, toolName, connections, initialConnectionName } = props;

  const [selectedConnection, setSelectedConnection] = useState<ConnectionName | null>(
    (initialConnectionName as ConnectionName | null) ?? connections[0]?.name ?? null,
  );
  const [argsJson, setArgsJson] = useState("{}");
  const [argsError, setArgsError] = useState<string | null>(null);
  const [argsMode, setArgsMode] = useState<"form" | "json">("json");
  const [running, setRunning] = useState(false);
  const [result, setResult] = useState<RunResult | null>(null);

  const doExecute = useAtomSet(executeCode, { mode: "promiseExit" });

  // Reset the picker + result when the connection set or the tool changes, so a
  // result never lingers against a stale tool/account. Prefer the tool's own
  // account (`initialConnectionName`) when it is present in the list.
  useEffect(() => {
    setSelectedConnection((current) => {
      if (
        initialConnectionName &&
        connections.some((c: Connection) => c.name === initialConnectionName)
      ) {
        return initialConnectionName as ConnectionName;
      }
      if (current && connections.some((c: Connection) => c.name === current)) return current;
      return connections[0]?.name ?? null;
    });
  }, [connections, initialConnectionName]);

  useEffect(() => {
    setResult(null);
    setArgsError(null);
  }, [toolName]);

  // The full `Connection` for the selected name — carries its OWN owner, which
  // is the `<owner>` address segment (never an ambient owner).
  const selectedConnectionObj = useMemo<Connection | null>(
    () => connections.find((c: Connection) => c.name === selectedConnection) ?? null,
    [connections, selectedConnection],
  );

  // Build the per-connection address `tools.<int>.<owner>.<conn>.<tool>` and the
  // proxy form (the same string minus the `tools.` root), using the SELECTED
  // CONNECTION's own owner.
  const addressNoPrefix = useMemo(
    () =>