2e:"/_next/static/immutable/chunks/02uj9wr740ifu.js" 2f:"ToolApprovalDemo" 30:I[55167,["$2","$8","$9","$a","$b","$c","$d","$e","$f","$10","$11","$12","$2e"],"$2f"] 31:I[22016,["$2","$8","$9","$a","$b","$c","$d","$e","$f","$10","$11","$12","$2e"],""] 32:I[48147,["$2","$8","$9","$a","$b","$c","$d","$e","$f","$10","$11","$12","$2e"],"SourcePanel"] 33:T5110,"use client"; /** * PeachUI — ToolApproval (block) * @tier block * @deps button, motion * @requires app/globals.css * * Pick a connector, review the calls it wants to run, * approve them one by one or all at once, then run. */ import { useState, type ComponentType, type ReactNode } from "react"; import { Check, Database, Kanban, Message, Search, Store, X } from "reicon-react"; import { Button } from "@/components/atoms/button"; import { AnimatePresence, motion, motionInstantIfReduced, useReducedMotion, } from "@/components/lib/motion"; import { cx } from "@/lib/utils"; const TEXT_SWAP = { duration: 0.15, ease: "easeInOut" as const, }; type CallDecision = "approved" | "denied"; type ConnectorIcon = ComponentType<{ className?: string }>; export interface ToolCall { id: string; name: string; args: string; writes: boolean; detail: string; } export interface ApprovalConnector { id: string; name: string; meta: string; job: string; blurb: string; tone: string; Icon: ConnectorIcon; calls: ToolCall[]; } const DEFAULT_CONNECTORS: ApprovalConnector[] = [ { id: "shopify", name: "Shopify", meta: "Store · Connected", job: "Order sync", blurb: "Syncs orders, inventory, and refunds both ways.", tone: "bg-green", Icon: Store, calls: [ { id: "orders", name: "orders.list", args: 'orders.list({ since: "7d", status: "open" })', writes: false, detail: "Reads 214 open orders from the last week.", }, { id: "inventory", name: "inventory.set", args: 'inventory.set({ location: "main" })', writes: true, detail: "Writes reconciled stock levels back to the store.", }, { id: "customers", name: "customers.tag", args: 'customers.tag({ segment: "vip" })', writes: true, detail: "Tags 38 customers in the VIP segment.", }, { id: "refunds", name: "refunds.list", args: 'refunds.list({ since: "7d" })', writes: false, detail: "Reads 6 refunds from the same window.", }, ], }, { id: "postgres", name: "Postgres", meta: "Database · Connected", job: "Table backfill", blurb: "Backfills analytics tables on a schedule.", tone: "bg-accent", Icon: Database, calls: [ { id: "select", name: "sql.select", args: "SELECT * FROM orders WHERE day = today", writes: false, detail: "Reads today's orders into the staging frame.", }, { id: "insert", name: "sql.insert", args: "INSERT INTO analytics_daily (…)", writes: true, detail: "Writes 1,204 rows to analytics_daily.", }, ], }, { id: "slack", name: "Slack", meta: "Chat · Connected", job: "Weekly digest", blurb: "Posts digests and resolves teammates.", tone: "bg-orange", Icon: Message, calls: [ { id: "post", name: "chat.postMessage", args: 'chat.postMessage({ channel: "#sales" })', writes: true, detail: "Posts the digest to #sales on Friday.", }, { id: "lookup", name: "users.lookupByEmail", args: "users.lookupByEmail({ emails: owners })", writes: false, detail: "Resolves three deal owners to Slack handles.", }, ], }, { id: "linear", name: "Linear", meta: "Project management · Connected", job: "Issue sync", blurb: "Turns requests into issues and keeps status in sync.", tone: "bg-ink", Icon: Kanban, calls: [ { id: "issues", name: "issues.create", args: 'issues.create({ team: "release", count: 3 })', writes: true, detail: "Opens three issues on the release board.", }, { id: "cycles", name: "cycles.current", args: 'cycles.current({ team: "release" })', writes: false, detail: "Reads the active cycle to place the issues.", }, ], }, ]; function Swap({ swapKey, reduced, children, className, }: { swapKey: string; reduced: boolean | null; children: ReactNode; className?: string; }) { return ( {children} ); } function connectorMeta(connector: ApprovalConnector, pending: number, ran: boolean) { if (ran) return "Ran"; if (pending === 0) return "Reviewed"; return `${pending} pending`; } export type ToolApprovalProps = { className?: string; connectors?: ApprovalConnector[]; }; export function ToolApproval({ className, connectors = DEFAULT_CONNECTORS, }: ToolApprovalProps) { const reducedMotion = useReducedMotion(); const [openId, setOpenId] = useState(() => connectors[0]?.id ?? ""); const [decisions, setDecisions] = useState>({}); const [ranIds, setRanIds] = useState([]); const [query, setQuery] = useState(""); const open = connectors.find((connector) => connector.id === openId) ?? connectors[0] ?? null; const visible = query ? connectors.filter((connector) => connector.name.toLowerCase().includes(query.toLowerCase()), ) : connectors; const needsApproval = visible.filter((connector) => connector.calls.some((call) => !decisions[call.id]), ); const reviewed = visible.filter((connector) => connector.calls.every((call) => decisions[call.id]), ); const pendingTotal = connectors.reduce( (sum, connector) => sum + connector.calls.filter((call) => !decisions[call.id]).length, 0, ); const pendingCalls = open ? open.calls.filter((call) => !decisions[call.id]) : []; const approvedCalls = open ? open.calls.filter((call) => decisions[call.id] === "approved") : []; const deniedCalls = open ? open.calls.filter((call) => decisions[call.id] === "denied") : []; const allDecided = open !== null && pendingCalls.length === 0; const ran = open !== null && ranIds.includes(open.id); const decide = (callId: string, decision: CallDecision) => setDecisions((current) => ({ ...current, [callId]: decision })); const approveAll = () => { if (!open) return; setDecisions((current) => { const next = { ...current }; for (const call of open.calls) if (!next[call.id]) next[call.id] = "approved"; return next; }); }; const runApproved = () => { if (open && !ran) setRanIds((current) => [...current, open.id]); }; const status: { outcome: string; subject: string } = !open ? { outcome: "", subject: "No connector open" } : ran ? { outcome: "Ran", subject: open.job } : pendingCalls.length > 0 ? { outcome: `${pendingCalls.length} pending`, subject: open.job } : deniedCalls.length === open.calls.length ? { outcome: "Denied", subject: `${deniedCalls.length} calls` } : deniedCalls.length === 0 ? { outcome: "Approved", subject: `${approvedCalls.length} calls` } : { outcome: `${approvedCalls.length} approved`, subject: `${deniedCalls.length} denied`, }; const footerKey = !open ? "empty" : ran ? `ran-${open.id}` : `${open.id}-${pendingCalls.length}-${approvedCalls.length}-${deniedCalls.length}`; return (

Tool approval

{pendingTotal === 0 ? "All calls reviewed" : `${pendingTotal} calls waiting`}

Connectors asked to run. Approve each call before it goes.

setQuery(event.target.value)} placeholder="Search connectors" aria-label="Search connectors" className="min-w-0 flex-1 bg-transparent text-body-regular text-ink outline-none placeholder:text-ink-3" /> {query ? ( ) : null}

{visible.length === 0 ? (

No connectors match “{query}”.

) : ( [ { label: "Needs approval", rows: needsApproval }, { label: "Reviewed", rows: reviewed }, ].map( (group) => group.rows.length > 0 && (

{group.label}

), ) )}

Tool calls

{open ? ( <>

{open.name}

{ran ? ( Ran ) : null}

{open.job} · {open.meta}

{open.blurb}

{call.name} {call.writes ? ( Writes ) : null} {decision ? ( ) : ( )}
{call.args}
{call.detail}

) : (

Nothing needs approval.

Tool calls land here when a connector asks to run.

)}

); } 2b:["$","article",null,{"className":"doc-article doc-article--wide","children":[["$","header",null,{"className":"doc-article-header","children":[["$","p",null,{"className":"doc-article-kicker","children":["Blocks"," · ","Agent"]}],["$","h1",null,{"className":"doc-article-title","children":"Tool approval"}],["$","p",null,{"className":"doc-article-lead","children":"Connectors queue tool calls; approve each call or approve all, then run."}]]}],["$","section",null,{"className":"doc-demo","aria-label":"Tool approval demo","children":["$","div",null,{"className":"doc-demo-stage doc-demo-stage--wide","children":["$","$L30",null,{}]}]}],["$","section",null,{"className":"mt-10","aria-labelledby":"doc-composed-heading","children":[["$","h2",null,{"id":"doc-composed-heading","className":"text-body-strong text-ink","children":"Built from"}],["$","p",null,{"className":"mt-1 text-caption text-ink-3","children":"Paste the block file plus these modules; they are not separate catalog entries."}],["$","ul",null,{"className":"doc-composed-list","children":[["$","li","Call actions-components/atoms/button.tsx",{"children":[["$","span",null,{"className":"text-ink-2","children":"Call actions"}]," · ",["$","$L31",null,{"href":"/atoms/button","className":"doc-text-link font-mono text-[13px]","children":"components/atoms/button.tsx"}]]}]]}]]}],["$","$L32",null,{"source":"$33","deps":["motion"]}],"$L34"]}]