Edit Tool Invocation · UI Element Compendium

Name

Also known as (comma separated)

Brief definition

Notes

Tier

Controls schema (JSON array)

Templates (JSON object keyed by format)

{
  "html": "<div class=\"ti ti--{{status}}\" style=\"--accent:{{accent}};\">\n  <div class=\"ti__head\">\n    <span class=\"ti__icon\" aria-hidden=\"true\">\n      <span class=\"ti__icon-part ti__icon-part--running\">↻</span>\n      <span class=\"ti__icon-part ti__icon-part--success\">✓</span>\n      <span class=\"ti__icon-part ti__icon-part--error\">✕</span>\n    </span>\n    <code class=\"ti__name\">{{toolName}}</code>\n    <span class=\"ti__status-text\">\n      <span class=\"ti__status-part ti__status-part--running\">Running</span>\n      <span class=\"ti__status-part ti__status-part--success\">Success</span>\n      <span class=\"ti__status-part ti__status-part--error\">Error</span>\n    </span>\n  </div>\n  <p class=\"ti__args\">{{argsSummary}}</p>\n</div>\n<style>\n.ti { font: 13px/1.5 ui-monospace, monospace; max-width: 440px; padding: 12px 14px; border-radius: 10px;\n  border: 1.5px solid #24143026; background: #FAF7F2; color: #241430; }\n.ti__head { display: flex; align-items: center; gap: 8px; font-family: system-ui, sans-serif; }\n.ti__icon { display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center;\n  border-radius: 50%; background: var(--accent); font-size: 11px; flex: none; }\n.ti__icon-part { display: none; }\n.ti__name { flex: 1; font-weight: 600; }\n.ti__status-part { display: none; font-family: system-ui, sans-serif; font-weight: 600; font-size: 12px; }\n.ti--running .ti__icon-part--running { display: inline-block; }\n@media (prefers-reduced-motion: no-preference) {\n  .ti--running .ti__icon-part--running { animation: ti-spin .2s linear infinite; }\n}\n.ti--running .ti__status-part--running { display: inline-block; color: #241430b3; }\n.ti--success .ti__icon-part--success { display: inline-block; }\n.ti--success .ti__status-part--success { display: inline-block; color: #2F8F5B; }\n.ti--error .ti__icon-part--error { display: inline-block; }\n.ti--error .ti__status-part--error { display: inline-block; color: #B4433A; }\n@keyframes ti-spin { to { transform: rotate(360deg); } }\n.ti__args { margin: 8px 0 0; padding: 8px 10px; background: #24143008; border-radius: 6px; overflow-x: auto; white-space: pre; }\n</style>",
  "tailwind": "<div class=\"ti-tw ti-tw--{{status}} max-w-md p-3.5 rounded-[10px] border-[1.5px] border-[#24143026] bg-[#FAF7F2] text-[#241430] font-mono text-[13px]\" style=\"--accent:{{accent}};\">\n  <div class=\"flex items-center gap-2 font-sans\">\n    <span aria-hidden=\"true\" class=\"inline-flex w-[18px] h-[18px] items-center justify-center rounded-full flex-none text-[11px]\" style=\"background:{{accent}}\">\n      <span class=\"ti-tw__icon-part ti-tw__icon-part--running\">↻</span>\n      <span class=\"ti-tw__icon-part ti-tw__icon-part--success\">✓</span>\n      <span class=\"ti-tw__icon-part ti-tw__icon-part--error\">✕</span>\n    </span>\n    <code class=\"flex-1 font-semibold\">{{toolName}}</code>\n    <span class=\"font-sans font-semibold text-xs\">\n      <span class=\"ti-tw__status-part ti-tw__status-part--running\">Running</span>\n      <span class=\"ti-tw__status-part ti-tw__status-part--success\">Success</span>\n      <span class=\"ti-tw__status-part ti-tw__status-part--error\">Error</span>\n    </span>\n  </div>\n  <p class=\"mt-2 mb-0 px-2.5 py-2 bg-[#24143008] rounded-md overflow-x-auto whitespace-pre\">{{argsSummary}}</p>\n</div>\n<style>\n.ti-tw__icon-part, .ti-tw__status-part { display: none; }\n.ti-tw--running .ti-tw__icon-part--running { display: inline-block; }\n@media (prefers-reduced-motion: no-preference) {\n  .ti-tw--running .ti-tw__icon-part--running { animation: ti-tw-spin .2s linear infinite; }\n}\n.ti-tw--running .ti-tw__status-part--running { display: inline-block; color: #241430b3; }\n.ti-tw--success .ti-tw__icon-part--success { display: inline-block; }\n.ti-tw--success .ti-tw__status-part--success { display: inline-block; color: #2F8F5B; }\n.ti-tw--error .ti-tw__icon-part--error { display: inline-block; }\n.ti-tw--error .ti-tw__status-part--error { display: inline-block; color: #B4433A; }\n@keyframes ti-tw-spin { to { transform: rotate(360deg); } }\n</style>",
  "react": "export function ToolInvocation({\n  toolName = \"{{toolName}}\",\n  argsSummary = \"{{argsSummary}}\",\n  status = \"{{status}}\",\n  accent = \"{{accent}}\",\n}) {\n  const meta = {\n    running: { icon: \"↻\", text: \"Running\", color: \"#241430b3\", spin: true },\n    success: { icon: \"✓\", text: \"Success\", color: \"#2F8F5B\", spin: false },\n    error: { icon: \"✕\", text: \"Error\", color: \"#B4433A\", spin: false },\n  }[status];\n  return (\n    <div style={{ maxWidth: 440, padding: \"12px 14px\", borderRadius: 10, border: \"1.5px solid #24143026\",\n      background: \"#FAF7F2\", color: \"#241430\", fontFamily: \"ui-monospace, monospace\", fontSize: 13 }}>\n      <div style={{ display: \"flex\", alignItems: \"center\", gap: 8, fontFamily: \"system-ui, sans-serif\" }}>\n        <span aria-hidden=\"true\" className={meta.spin ? \"ti-react__icon ti-react__icon--spin\" : \"ti-react__icon\"} style={{ display: \"inline-flex\", width: 18, height: 18, alignItems: \"center\",\n          justifyContent: \"center\", borderRadius: \"50%\", background: accent, fontSize: 11, flex: \"none\" }}>\n          {meta.icon}\n        </span>\n        <code style={{ flex: 1, fontWeight: 600 }}>{toolName}</code>\n        <span style={{ fontWeight: 600, fontSize: 12, color: meta.color }}>{meta.text}</span>\n      </div>\n      <p style={{ margin: \"8px 0 0\", padding: \"8px 10px\", background: \"#24143008\", borderRadius: 6,\n        overflowX: \"auto\", whiteSpace: \"pre\" }}>\n        {argsSummary}\n      </p>\n      <style>{`\n        @keyframes ti-react-spin { to { transform: rotate(360deg); } }\n        @media (prefers-reduced-motion: no-preference) {\n          .ti-react__icon--spin { animation: ti-react-spin .2s linear infinite; }\n        }\n      `}</style>\n    </div>\n  );\n}"
}