tiletopia/src/components/McpConfirm.tsx

import { useEffect } from "react";

export interface McpConfirmSpec {
  tool: string;
  args: unknown;
  reason: string | null;
  /** Human-readable summary of what's about to happen, computed by the
   *  per-tool handler (e.g. "rename pane 'shell' to 'build'"). */
  summary: string;
  /** Set when the action targets (or spawns) an SSH-connected pane. The
   *  modal renders an extra warning banner — SSH targets bypass our
   *  in-app safety net since the remote shell expands aliases/subshells
   *  before executing, and the policy engine only sees the bytes we send. */
  ssh?: { hostLabel: string };
}

interface McpConfirmProps {
  spec: McpConfirmSpec;
  onAccept: () => void;
  onReject: () => void;
  /** Approve this call AND add the bare tool name to the policy allow list
   *  so future calls of this tool skip the prompt. */
  onAlwaysAllow: () => void | Promise<void>;
}

export default function McpConfirm({ spec, onAccept, onReject, onAlwaysAllow }: McpConfirmProps) {
  useEffect(() => {
    function onKey(e: KeyboardEvent) {
      if (e.key === "Escape") {
        e.preventDefault();
        onReject();
      } else if (e.key === "Enter") {
        e.preventDefault();
        onAccept();
      }
    }
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onAccept, onReject]);

  const argsJson = JSON.stringify(spec.args, null, 2);

  return (
    <>
      <button
        className="backdrop"
        onClick={onReject}
        aria-label="Reject MCP action"
      />
      <div className="mcp-confirm" role="dialog" aria-label="MCP action confirm">
        <header className="mcp-confirm-header">
          <span className="mcp-confirm-title">
            MCP wants to run <code>{spec.tool}</code>
          </span>
        </header>
        <div className="mcp-confirm-body">
          {spec.ssh && (
            <div className="mcp-confirm-ssh-warn">
              <strong>SSH target — extra caveats apply.</strong>{" "}
              This runs on the remote host <code>{spec.ssh.hostLabel}</code>.
              The pattern matching in your policy only sees the bytes
              tiletopia sends; the remote shell expands aliases, subshells,
              and variables before executing. The hard-deny list still
              applies, but treat this as <em>best-effort</em>, not a sandbox.
            </div>
          )}
          <p className="mcp-confirm-summary">{spec.summary}</p>
          {spec.reason && (
            <p className="mcp-confirm-reason">
              Policy decision: <em>{spec.reason}</em>
            </p>
          )}
          <details className="mcp-confirm-args">
            <summary>Raw arguments</summary>
            <pre>{argsJson}</pre>
          </details>
        </div>
        <footer className="mcp-confirm-actions">
          <button className="mcp-confirm-reject" onClick={onReject}>
            Reject (Esc)
          </button>
          <button
            className="mcp-confirm-always"
            onClick={() => { void onAlwaysAllow(); }}
            title={`Add "${spec.tool}" to the policy allow list — future calls of this tool won't prompt`}
          >
            Always allow {spec.tool}
          </button>
          <button className="mcp-confirm-accept" onClick={onAccept} autoFocus>
            Approve (Enter)
          </button>
        </footer>
      </div>
    </>
  );
}