assets/mcp-cards/agent-card-v3.html.txt
Rama main · réplica de lectura del repositorio original.
<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Chickpea Agent card</title>
<style>/*
* Framework-free MCP App styles.
*/
@layer base {
:root {
color-scheme: light dark;
--background: var(
--color-background-primary,
light-dark(rgb(255 255 255), rgb(24 24 24))
);
--foreground: var(
--color-text-primary,
light-dark(rgb(26 28 31), rgb(255 255 255))
);
--card: color-mix(in oklab, var(--foreground) 5%, var(--background));
--card-foreground: var(--color-text-primary, var(--foreground));
--primary: var(
--color-text-info,
light-dark(rgb(51 156 255), rgb(131 195 255))
);
--primary-foreground: var(
--color-text-inverse,
light-dark(rgb(255 255 255), rgb(13 13 13))
);
--secondary: var(
--color-background-secondary,
light-dark(rgb(255 255 255 / 96%), rgb(54 54 54 / 96%))
);
--secondary-foreground: var(--color-text-primary, var(--foreground));
--muted: color-mix(in srgb, var(--foreground) 10%, transparent);
--muted-foreground: var(
--color-text-secondary,
light-dark(rgb(26 28 31 / 49.4%), rgb(255 255 255 / 49.8%))
);
--accent: var(
--color-background-info,
light-dark(rgb(229 242 255), rgb(13 39 63))
);
--accent-foreground: var(--color-text-info, var(--primary));
--destructive: var(
--color-text-warning,
light-dark(rgb(226 85 7), rgb(255 133 73))
);
--border: var(
--color-border-secondary,
light-dark(rgb(26 28 31 / 8%), rgb(255 255 255 / 8.2%))
);
--input: var(
--color-border-primary,
light-dark(rgb(26 28 31 / 11.8%), rgb(255 255 255 / 12%))
);
--ring: var(--color-ring-primary, var(--primary));
--font-size-base: var(--font-text-md-size, 14px);
--radius: var(--border-radius-lg, 12.5px);
}
:root[data-theme="light"] {
color-scheme: light;
}
:root[data-theme="dark"] {
color-scheme: dark;
}
body {
margin: 0;
color: var(--foreground);
background: var(--background);
font-size: max(11px, var(--font-size-base));
font-weight: var(--font-weight-normal, 430);
line-height: 1.5;
}
/* MCP sandboxes can force their own font on body, so restore the host font below it. */
body,
body > * {
font-family: var(
--font-sans,
-apple-system,
system-ui,
"Segoe UI",
sans-serif
);
}
h1,
h2,
h3,
p {
margin-block: 0;
}
h1,
h2,
h3 {
font-weight: var(--font-weight-medium, 500);
line-height: 1.25;
}
h1 {
font-size: calc(var(--font-size-base) * 1.7142857143);
}
h2 {
font-size: calc(var(--font-size-base) * 1.4285714286);
}
h3 {
font-size: calc(var(--font-size-base) * 1.2857142857);
}
}
@layer components {
.cursor-interaction {
cursor: var(--cursor-interaction, pointer);
}
.card {
min-width: 0;
padding: 12px;
overflow-wrap: break-word;
border-radius: calc(var(--radius) * 1.6);
corner-shape: superellipse(1.5);
color: var(--card-foreground);
background: var(--card);
}
.btn,
.form-check-input,
.form-control,
.form-select {
box-sizing: border-box;
font: inherit;
}
.btn {
appearance: button;
display: inline-flex;
inline-size: fit-content;
max-inline-size: 100%;
min-height: 28px;
align-items: center;
justify-content: center;
gap: 4px;
margin: 0;
padding: 0 8px;
border: 1px solid var(--input);
border-radius: var(--radius);
corner-shape: superellipse(1.5);
color: var(--secondary-foreground);
background: var(--secondary);
cursor: var(--cursor-interaction, pointer);
text-align: center;
text-decoration: none;
white-space: nowrap;
user-select: none;
}
.btn:not(:disabled):hover {
background: color-mix(in srgb, var(--foreground) 6%, var(--secondary));
}
.btn-primary {
border-color: transparent;
color: var(--primary-foreground);
background: var(--foreground);
background-clip: padding-box;
}
.btn-primary:not(:disabled):hover {
background: color-mix(in srgb, var(--foreground) 80%, transparent);
background-clip: padding-box;
}
.btn-ghost {
border-color: transparent;
color: var(--muted-foreground);
background: transparent;
}
.btn-ghost:not(:disabled):hover {
color: var(--foreground);
background: color-mix(in srgb, var(--foreground) 6%, var(--secondary));
}
.btn:not(.btn-primary):is([aria-pressed="true"], [aria-selected="true"]) {
border-color: var(--primary);
color: var(--primary-foreground);
background: var(--primary);
}
.btn:focus-visible {
outline: 2px solid var(--ring);
outline-offset: 2px;
}
.btn:disabled,
.form-check-input:disabled,
.form-control:disabled,
.form-select:disabled {
cursor: not-allowed;
opacity: 0.4;
}
.form-label {
display: block;
margin-bottom: 6px;
color: var(--foreground);
}
.form-control,
.form-select {
display: block;
width: 100%;
min-height: 28px;
padding: 0 8px;
outline: none;
border: 1px solid var(--input);
border-radius: var(--radius);
corner-shape: superellipse(1.5);
color: var(--foreground);
background: var(--secondary);
}
.form-control::placeholder {
color: var(--muted-foreground);
}
.form-select {
appearance: none;
padding-right: 32px;
background-image:
linear-gradient(45deg, transparent 50%, var(--muted-foreground) 50%),
linear-gradient(135deg, var(--muted-foreground) 50%, transparent 50%);
background-position:
calc(100% - 14px) 50%,
calc(100% - 10px) 50%;
background-repeat: no-repeat;
background-size: 4px 4px;
cursor: var(--cursor-interaction, pointer);
}
.form-select:not(:disabled):hover {
background-color: color-mix(
in srgb,
var(--foreground) 6%,
var(--secondary)
);
}
textarea.form-control {
min-height: 72px;
padding: 8px 10px;
resize: vertical;
}
.form-control:focus-visible,
.form-select:focus-visible {
border-color: var(--ring);
box-shadow: inset 0 0 0 1px var(--ring);
}
.form-check {
display: flex;
min-height: 20px;
align-items: center;
gap: 8px;
}
.form-check-input {
appearance: none;
display: grid;
width: 16px;
height: 16px;
flex: 0 0 auto;
place-items: center;
margin: 0;
border: 1px solid var(--input);
border-radius: 5px;
corner-shape: superellipse(1.5);
color: var(--primary-foreground);
background: var(--secondary);
cursor: var(--cursor-interaction, pointer);
}
.form-check-input:checked {
border-color: var(--primary);
background: var(--primary);
}
.form-check-input:checked::after {
width: 7px;
height: 4px;
border-bottom: 2px solid currentColor;
border-left: 2px solid currentColor;
content: "";
transform: translateY(-1px) rotate(-45deg);
}
.form-check-input:focus-visible {
outline: 2px solid var(--ring);
outline-offset: 2px;
}
.form-check-label {
color: var(--foreground);
}
svg.lucide {
display: block;
width: 16px;
height: 16px;
flex: none;
stroke-width: 1.6;
}
.text-small {
font-size: max(11px, calc(var(--font-size-base) - 2px));
}
.text-muted {
color: var(--muted-foreground);
}
.text-destructive {
color: var(--destructive);
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
}
/*
* The Agent card in ChatGPT's own look: its type, colors and black primary
* buttons, from the host's style variables. Chickpea shows only in the avatar
* and the quote accent. Without host variables the colors fall back to the
* mockup's palette, and without a host theme to light.
*/
:root:not([data-theme]) {
color-scheme: light;
}
:root {
--cp-bg: var(--color-background-primary, light-dark(#ffffff, #181818));
--cp-fg: var(--color-text-primary, light-dark(#0d0d0d, #ededed));
/* Secondary text stays at AA contrast; the host's tertiary text does not. */
--cp-muted: var(--color-text-secondary, light-dark(#5d5d5d, #cdcdcd));
--cp-line: var(--color-border-primary, light-dark(#e5e5e5, rgb(255 255 255 / 20%)));
--cp-soft: light-dark(#f7f7f7, rgb(255 255 255 / 6%));
--cp-ok: light-dark(#1a7f37, #40c977);
--cp-warn: light-dark(#a15c00, #f0a050);
--cp-danger: #c62828;
--cp-danger-hover: #a31f1f;
--cp-accent: #e8901a;
--cp-size: var(--font-text-md-size, 14px);
}
html,
body {
background: var(--cp-bg);
color: var(--cp-fg);
}
body {
font-size: var(--cp-size);
line-height: 1.45;
}
.cp-card {
display: flex;
flex-direction: column;
gap: 0;
padding: 16px;
overflow-wrap: anywhere;
}
.cp-hdr {
display: flex;
gap: 12px;
align-items: center;
}
.cp-avatar {
flex: none;
display: block;
}
.cp-avatar svg {
display: block;
width: 100%;
height: 100%;
}
.cp-avatar-lg {
width: 44px;
height: 44px;
}
.cp-avatar-sm {
width: 26px;
height: 26px;
}
.cp-heading {
min-width: 0;
}
.cp-title {
margin: 0;
font-size: calc(var(--cp-size) * 1.143);
font-weight: 600;
line-height: 1.25;
}
/* Focus lands here after a redraw only so the keyboard stays on the card. */
.cp-title:focus {
outline: none;
}
.cp-sub {
margin: 2px 0 0;
color: var(--cp-muted);
font-size: calc(var(--cp-size) * 0.93);
}
.cp-ok {
color: var(--cp-ok);
}
.cp-warn {
color: var(--cp-warn);
}
.cp-text {
margin: 12px 0 0;
white-space: pre-line;
}
.cp-sect {
margin: 14px 0 6px;
color: var(--cp-muted);
font-size: calc(var(--cp-size) * 0.79);
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.cp-sect + .cp-text {
margin-top: 0;
}
.cp-quote {
margin: 6px 0;
padding: 2px 0 2px 10px;
border-left: 3px solid var(--cp-accent);
white-space: pre-line;
}
.cp-note {
margin: 6px 0 0;
color: var(--cp-muted);
font-size: calc(var(--cp-size) * 0.93);
}
.cp-note.cp-warn {
color: var(--cp-warn);
}
.cp-thread {
display: flex;
flex-direction: column;
gap: 9px;
padding: 10px 12px;
border: 1px solid var(--cp-line);
border-radius: 12px;
background: var(--cp-soft);
}
.cp-msg {
display: grid;
grid-template-columns: 26px 1fr;
gap: 8px;
font-size: calc(var(--cp-size) * 0.964);
}
.cp-who {
font-weight: 600;
font-size: calc(var(--cp-size) * 0.93);
}
.cp-who-note {
margin-left: 4px;
color: var(--cp-muted);
font-weight: 400;
}
.cp-init {
display: grid;
width: 26px;
height: 26px;
place-items: center;
border-radius: 7px;
background: #4a6cc4;
color: #ffffff;
font-size: calc(var(--cp-size) * 0.86);
font-weight: 600;
}
.cp-facts {
display: grid;
grid-template-columns: max-content 1fr;
gap: 6px 12px;
margin: 12px 0 0;
font-size: calc(var(--cp-size) * 0.964);
}
.cp-facts dt {
color: var(--cp-muted);
}
.cp-facts dd {
margin: 0;
}
.cp-chip {
display: inline-flex;
padding: 0 9px;
border: 1px solid var(--cp-line);
border-radius: 999px;
background: var(--cp-soft);
font-size: calc(var(--cp-size) * 0.9);
}
.cp-faint {
color: var(--cp-muted);
font-size: calc(var(--cp-size) * 0.86);
}
.cp-foot {
margin: 14px 0 0;
color: var(--cp-muted);
font-size: calc(var(--cp-size) * 0.93);
}
.cp-steps {
display: flex;
flex-direction: column;
gap: 7px;
margin: 12px 0 0;
padding: 0;
list-style: none;
font-size: calc(var(--cp-size) * 0.964);
}
.cp-steps li {
display: flex;
gap: 8px;
align-items: center;
}
.cp-ic {
display: inline-grid;
flex: none;
width: 18px;
height: 18px;
box-sizing: border-box;
place-items: center;
border-radius: 50%;
font-size: 11px;
}
.cp-ic-done {
background: color-mix(in srgb, var(--cp-ok) 14%, transparent);
color: var(--cp-ok);
}
.cp-ic-now {
border: 2px solid var(--cp-accent);
border-right-color: transparent;
animation: cp-spin 0.9s linear infinite;
}
.cp-ic-todo {
border: 1.5px solid var(--cp-line);
}
.cp-ic-failed {
background: color-mix(in srgb, var(--cp-danger) 14%, transparent);
color: light-dark(var(--cp-danger), #ff8a80);
font-weight: 700;
}
@keyframes cp-spin {
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: reduce) {
.cp-ic-now {
animation: none;
}
}
.cp-acts {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
margin-top: 14px;
}
.cp-card .btn {
min-height: 34px;
padding: 0 14px;
border-radius: 999px;
font-size: calc(var(--cp-size) * 0.964);
font-weight: 600;
}
.cp-btn-primary {
border-color: transparent;
color: var(--color-text-inverse, light-dark(#ffffff, #0d0d0d));
background: var(--cp-fg);
}
.cp-btn-primary:not(:disabled):hover {
background: color-mix(in srgb, var(--cp-fg) 82%, var(--cp-bg));
}
.cp-btn-danger {
border-color: transparent;
color: #ffffff;
background: var(--cp-danger);
}
.cp-btn-danger:not(:disabled):hover {
background: var(--cp-danger-hover);
}
.cp-btn-secondary {
border-color: var(--cp-line);
color: var(--cp-fg);
background: var(--cp-bg);
}
.cp-card .btn:focus-visible {
outline: 2px solid var(--color-ring-primary, light-dark(#0169cc, #ffffff));
outline-offset: 2px;
}
.cp-acts[hidden],
.cp-error[hidden] {
display: none;
}
.cp-error {
margin: 10px 0 0;
color: light-dark(#b42318, #ff8a80);
font-size: calc(var(--cp-size) * 0.93);
}
.cp-rows {
display: flex;
flex-direction: column;
container-type: inline-size;
margin: 12px 0 0;
padding: 0;
border: 1px solid var(--cp-line);
border-radius: 14px;
list-style: none;
}
.cp-row {
display: grid;
grid-template-columns: 22px minmax(0, 1fr) auto;
gap: 10px;
align-items: center;
padding: 10px 12px;
border-top: 1px solid var(--cp-line);
font-size: calc(var(--cp-size) * 0.964);
}
.cp-row:first-child {
border-top: 0;
}
/* A narrow card puts a row's link under its words instead of squeezing them. */
@container (max-width: 520px) {
.cp-row:has(> .cp-link-go) {
grid-template-columns: 22px minmax(0, 1fr);
row-gap: 2px;
}
.cp-row > .cp-link-go {
grid-column: 2;
justify-self: start;
white-space: normal;
text-align: start;
}
}
.cp-row-detail {
color: var(--cp-muted);
font-size: calc(var(--cp-size) * 0.893);
white-space: pre-line;
}
.cp-row-detail.cp-warn {
color: var(--cp-warn);
}
.cp-tile {
display: grid;
width: 22px;
height: 22px;
place-items: center;
border-radius: 6px;
background: var(--cp-fg);
color: var(--cp-bg);
font-size: calc(var(--cp-size) * 0.86);
font-weight: 700;
}
.cp-ic-warning {
background: color-mix(in srgb, var(--cp-warn) 16%, transparent);
color: var(--cp-warn);
font-weight: 700;
}
.cp-ic-unknown {
border: 1.5px solid var(--cp-line);
color: var(--cp-muted);
font-weight: 700;
}
.cp-card .btn-sm {
min-height: 30px;
padding: 0 12px;
font-size: calc(var(--cp-size) * 0.893);
white-space: nowrap;
}
.cp-link {
padding: 4px 0;
border: 0;
background: none;
color: var(--cp-fg);
font: inherit;
font-size: calc(var(--cp-size) * 0.93);
font-weight: 600;
white-space: nowrap;
cursor: var(--cursor-interaction, pointer);
}
.cp-link-go::after {
content: " →" / "";
}
.cp-link:not(:disabled):hover {
text-decoration: underline;
}
.cp-link:disabled {
color: var(--cp-muted);
}
.cp-link:focus-visible {
border-radius: 4px;
outline: 2px solid var(--color-ring-primary, light-dark(#0169cc, #ffffff));
outline-offset: 2px;
}
</style></head>
<body><div id="card"></div><script>"use strict";(()=>{var ce="2026-01-26";var R=class{constructor(n){this.appInfo=n;window.addEventListener("message",t=>{t.source===window.parent&&this.#i(t.data)}),this.on("ui/notifications/host-context-changed",t=>{let r=t,{styles:o,...i}=this.hostContext??{},c=r.theme!==void 0&&r.theme!==i.theme&&!r.styles;this.hostContext={...i,...o&&!c?{styles:o}:{},...r}})}appInfo;#o=1;#e=new Map;#t=new Map;hostContext;hostCapabilities;on(n,t){this.#t.set(n,[...this.#t.get(n)??[],t])}async connect(){let n=await this.#n("ui/initialize",{appInfo:this.appInfo,appCapabilities:{availableDisplayModes:["inline"]},protocolVersion:ce});this.hostContext=n?.hostContext,this.hostCapabilities=n?.hostCapabilities,this.#r("ui/notifications/initialized",{}),new ResizeObserver(()=>this.#r("ui/notifications/size-changed",{height:Math.ceil(document.body.getBoundingClientRect().height)})).observe(document.body)}async callTool(n,t,r){return await this.#n("tools/call",{name:n,arguments:t},r)}async sendMessage(n){let t=this.hostCapabilities?.experimental?.["openai/message"]?.draft!==void 0,r=n.draft!==void 0&&t?n.draft:n.sent;H(await this.#n("ui/message",{role:"user",content:[{type:"text",text:r}],...r===n.draft?{_meta:{"openai/message":{target:"active",send:!1}}}:{}}))}async openLink(n){if(window.openai?.openExternal)try{await window.openai.openExternal({href:n,redirectUrl:!1});return}catch{}H(await this.#n("ui/open-link",{url:n}))}#r(n,t){window.parent.postMessage({jsonrpc:"2.0",method:n,params:t},"*")}#n(n,t,r){let o=this.#o++;return new Promise((i,c)=>{let l=setTimeout(()=>{r?this.#e.set(o,{resolve:r,reject:()=>{}}):this.#e.delete(o),c(new Error(`${n} timed out`))},6e4);this.#e.set(o,{resolve:p=>{clearTimeout(l),i(p)},reject:p=>{clearTimeout(l),c(p)}}),window.parent.postMessage({jsonrpc:"2.0",id:o,method:n,params:t},"*")})}#i(n){if(!(!n||n.jsonrpc!=="2.0")){if(n.method===void 0){let t=typeof n.id=="number"?this.#e.get(n.id):void 0;if(!t)return;this.#e.delete(n.id),n.error?t.reject(n.error):t.resolve(n.result);return}for(let t of this.#t.get(n.method)??[])t(n.params);n.id!==void 0&&window.parent.postMessage({jsonrpc:"2.0",id:n.id,result:{}},"*")}}};function H(e){if(e?.isError===!0)throw new Error("The host refused it")}function de(e){document.documentElement.setAttribute("data-theme",e),document.documentElement.style.colorScheme=e}function le(e){for(let[n,t]of Object.entries(e))t!==void 0&&document.documentElement.style.setProperty(n,t)}var B=[];function V(e){e?.theme&&de(e.theme);let n=e?.["openai/interactionCursor"],t={...e?.styles?.variables,"--cursor-interaction":typeof n=="string"&&/^[a-z-]+$/.test(n)?n:void 0};for(let r of B)t[r]===void 0&&document.documentElement.style.removeProperty(r);le(t),B=Object.keys(t).filter(r=>t[r]!==void 0)}var j=(e,n,t)=>`<svg viewBox="0 0 44 44" aria-hidden="true" focusable="false"><rect width="44" height="44" rx="12" fill="${e}"/><path d="M22 6c-9 0-14 8-14 18v14h28V24C36 14 31 6 22 6z" fill="${n}"/><path d="M22 12c-6 0-9.5 6-9.5 13.5S16 38 22 38s9.5-5 9.5-12.5S28 12 22 12z" fill="${t}"/><circle cx="18.5" cy="26" r="1.3" fill="#3a2a1e"/><circle cx="25.5" cy="26" r="1.3" fill="#3a2a1e"/><path d="M20.5 30.2q1.5 1.2 3 0" stroke="#3a2a1e" stroke-width="1.1" fill="none" stroke-linecap="round"/></svg>`,ue={agent:j("#3a2a1e","#E8901A","#f3d9b1"),alert:j("#2a1f2e","#c2453a","#f1d3b8")},pe={done:"done",now:"in progress",todo:"to do",failed:"failed"},z={done:{glyph:"\u2713",words:"done"},now:{glyph:"",words:"in progress"},failed:{glyph:"!",words:"needs attention"},warning:{glyph:"!",words:"warning"},unknown:{glyph:"?",words:"unknown"}};function s(e,n,t){let r=document.createElement(e);return n&&(r.className=n),t!==void 0&&(r.textContent=t),r}function K(e,n="lg"){let t=s("span",`cp-avatar cp-avatar-${n}`);return t.innerHTML=ue[e],t}function ge(e){let n=s("p","cp-sub");for(let t of e)n.append(t.tone?s("span",`cp-${t.tone}`,t.text):t.text);return n}function fe(e,n){switch(e.kind){case"text":return s("p","cp-text",e.text);case"quote":return s("blockquote","cp-quote",e.text);case"section":return s("h3","cp-sect",e.label);case"note":return s("p",`cp-note${e.tone?` cp-${e.tone}`:""}`,e.text);case"exchange":{let t=s("div","cp-thread"),r=s("div","cp-msg"),o=s("div","cp-who","You");o.append(s("span","cp-who-note","example"));let i=s("div");i.append(o,s("div",void 0,e.ask)),r.append(s("span","cp-init","Y"),i);let c=s("div","cp-msg"),l=s("div");return l.append(s("div","cp-who",e.agent),s("div",void 0,e.answer)),c.append(K(n,"sm"),l),t.append(r,c),t}case"facts":{let t=s("dl","cp-facts");for(let r of e.rows){let o=s("dd",void 0,r.value);for(let i of r.chips??[])o.append(s("span","cp-chip",i)," ");r.note&&o.append(s("span","cp-faint",r.note)),t.append(s("dt",void 0,r.label),o)}return t}case"steps":{let t=s("ul","cp-steps");for(let{label:r,state:o}of e.steps){let i=s("li"),c=s("span",`cp-ic cp-ic-${o}`,o==="done"?"\u2713":o==="failed"?"!":"");c.setAttribute("aria-hidden","true"),i.append(c,r,s("span","sr-only",` (${pe[o]})`)),t.append(i)}return t}case"rows":{let t=s("ul","cp-rows");return t.append(...e.rows.map(me)),t}}}function me(e){let n=s("li","cp-row");if(e.icon==="tile"){let o=s("span","cp-tile",e.tile??"");o.setAttribute("aria-hidden","true"),n.append(o)}else{let o=z[e.icon],i=s("span",`cp-ic cp-ic-${e.icon}`,o.glyph);i.setAttribute("aria-hidden","true"),n.append(i)}let t=s("div","cp-row-body"),r=s("div","cp-row-title",e.title);if(e.icon!=="tile"&&r.append(s("span","sr-only",` (${z[e.icon].words})`)),t.append(r),e.detail&&t.append(s("div",`cp-row-detail${e.tone?` cp-${e.tone}`:""}`,e.detail)),n.append(t),e.control){let{label:o,action:i,style:c}=e.control;n.append(G(o,i,c==="link"?"cp-link cp-link-go":c==="toggle"?"cp-link":`btn btn-sm cp-btn-${c}`))}return n}function G(e,n,t){let r=s("button",`${t} cursor-interaction`,e);return r.type="button",r.dataset.action=n,r}function W(e,n){let t=s("p","sr-only");t.setAttribute("aria-live","polite");let r=s("main","cp-card"),o=s("div","cp-content"),i=s("div","cp-acts"),c=s("p","cp-error");c.setAttribute("role","alert"),r.append(o,i,c),e.replaceChildren(t,r),r.addEventListener("click",d=>{let u=d.target?.closest("button[data-action]");u instanceof HTMLButtonElement&&!u.disabled&&n(u.dataset.action)});let l="",p="",y=new Map;return{render(d){let u=JSON.stringify(d);if(u===l)return;l=u;let h=r.contains(document.activeElement),x=d.announce??d.title;t.textContent!==x&&(t.textContent=x);let C=s("header","cp-hdr"),U=d.avatar==="none"?"agent":d.avatar;d.avatar!=="none"&&C.append(K(d.avatar));let $=s("div","cp-heading"),v=s("h2","cp-title");if(v.tabIndex=-1,d.done){let m=s("span","cp-ok","\u2713 ");m.setAttribute("aria-hidden","true"),v.append(m)}v.append(d.title),$.append(v),d.subtitle&&$.append(ge(d.subtitle)),C.append($);let S=new Map,se=d.blocks.map(m=>{let T=JSON.stringify([m,U]),D=!S.has(T)&&y.get(T)||fe(m,U);return S.has(T)||S.set(T,D),D});y=S,o.replaceChildren(C,...se,...d.foot?[s("p","cp-foot",d.foot)]:[]);let q=JSON.stringify(d.buttons);q!==p&&(p=q,i.replaceChildren(...d.buttons.map(m=>G(m.label,m.action,`btn cp-btn-${m.tone}`)))),i.hidden=d.buttons.length===0;for(let m of r.querySelectorAll("button"))m.disabled=d.busy,m.toggleAttribute("aria-busy",d.busy);c.textContent=d.error??"",c.hidden=!d.error,h&&!r.contains(document.activeElement)&&v.focus({preventScroll:!0})}}}var ke=1e3;function F(e,n){let t=new R({name:e,version:String(3)}),r=ye(),o=r?{view:r.view,busy:!1,seq:r.seq}:n.initial,i,c=0,l=W(document.getElementById("card"),u=>p({type:"press",action:u,now:Date.now()}));function p(u){let h=n.step(o,u),x=h.state.view!==o.view;o=h.state,x&&he(o),l.render(n.present(o));for(let C of h.effects)y(C)}function y(u){switch(u.type){case"call":{let h=x=>p({type:"reply",call:u.call,result:x,now:Date.now()});t.callTool(u.call.tool,u.call.args,h).then(h,()=>p({type:"unreachable",call:u.call,now:Date.now()}));return}case"timer":clearTimeout(i),i=setTimeout(()=>p({type:"tick",now:Date.now()}),u.inMs);return;case"message":t.sendMessage(u).catch(()=>p({type:"refused",effect:u,now:Date.now()}));return;case"open":t.openLink(u.url).catch(()=>p({type:"refused",effect:u,now:Date.now()}));return}}function d(){let u=Date.now();u-c<ke||o.view.kind==="waiting"||(c=u,p({type:"reread",now:u}))}t.on("ui/notifications/tool-result",u=>{r||o.view.kind!=="waiting"||(p({type:"result",result:u,now:Date.now()}),d())}),t.on("ui/notifications/tool-cancelled",()=>p({type:"no_result",now:Date.now()})),t.on("ui/notifications/host-context-changed",()=>V(t.hostContext)),window.addEventListener("focus",d),document.addEventListener("visibilitychange",()=>{document.visibilityState==="visible"&&d()}),l.render(n.present(o)),t.connect().then(()=>{V(t.hostContext),r&&d()},()=>p({type:"no_result",now:Date.now()}))}function ye(){let e=window.openai?.widgetState,n=e?.card?.view;return e?.card?.version===3&&n&&typeof n.kind=="string"?{view:n,seq:e.card.seq??0}:void 0}function he({view:e,seq:n}){e.kind!=="waiting"&&Promise.resolve(window.openai?.setWidgetState?.({card:{version:3,view:e,seq:n}})).catch(()=>{})}function M(e){let n=e.flatMap(({name:r})=>r?[`#${r.replace(/^#/,"")}`]:[]),t=e.length-n.length;return t===0?n:[...n,t===1?"a private Channel":`${t} private Channels`]}function J(e,n){let t=e.quotedWhole?"":` (${xe(e.words)})`;if(e.kind==="section")return`${e.action==="adds"?`Adds a new section, ${n(e.heading)}${e.quote?`: ${n(e.quote)}`:""}`:`Removes the section ${n(e.heading)}`}${t}`;let r=we[e.action],o=be(e.place,n);return`${o?`${o}, ${r}`:`${r[0].toUpperCase()}${r.slice(1)}`}: ${n(e.quote)}${t}`}var we={adds:"adds",removes:"removes",changes:"changes wording to"};function be(e,n){switch(e.kind){case"heading":return`Under ${n(e.heading)}`;case"start":return"At the start";case"end":return"At the end";case"none":return}}function xe(e){return e<10?`${e} ${e===1?"word":"words"}`:`about ${(e<1e3?Math.round(e/10)*10:Math.round(e/100)*100).toLocaleString("en-US")} words`}function X(e=0){return Math.min(2e3*2**e,16e3)}var a=(e,n=[])=>({state:e,effects:n}),g=(e,n=[])=>({state:{view:e,busy:!1},effects:n}),k=(e,n)=>({type:"call",call:{tool:e,args:n}});function Y(e){return(n,t)=>{let r=e(n,t),o=r.state.view===n.view?n.seq:n.seq+1;return{state:{...r.state,seq:o},effects:r.effects.map(i=>i.type==="call"?{...i,call:{...i.call,seq:o}}:i)}}}function P(e,n){return n.seq!==e.seq}var w="That did not work. Try again.",Q="Chickpea could not be reached. Try again.",I={kind:"notice",title:"Nothing to show here."};function b(e){return typeof e=="string"&&URL.parse(e)?.protocol==="https:"?e:void 0}function f(e){return typeof e=="object"&&e!==null&&!Array.isArray(e)}function L(e){if(!e.isError)return;let n=f(e.structuredContent)?e.structuredContent.error:void 0;return f(n)&&typeof n.message=="string"?n.message:w}function Z(e){let n=f(e.structuredContent)?e.structuredContent.error:void 0;return e.isError&&f(n)&&typeof n.code=="string"?n.code:void 0}function ee(e){return n=>{try{return e(n)}catch{return{busy:n.busy,error:n.error,avatar:"none",title:I.title,blocks:[],buttons:[]}}}}var ve=new Set(["get_creation_status","get_agent"]),ne={view:{kind:"waiting"},busy:!1,seq:0},te=Y(Ae);function Ae(e,n){switch(n.type){case"result":return _e(n.result,n.now);case"press":return e.busy?a(e):Ee(e,n.action,n.now);case"reply":return P(e,n.call)?a(e):Se(e,n.call,n.result,n.now);case"unreachable":return P(e,n.call)?a(e):ve.has(n.call.tool)?e.view.kind!=="creating"?a(e):O({...e.view,failures:(e.view.failures??0)+1},n.now):a({...e,busy:!1,error:Q});case"refused":return a({...e,error:w});case"no_result":return e.view.kind==="waiting"?g(I):a(e);case"tick":return e.busy?a(e):Re(e,n.now);case"reread":return e.busy?a(e):oe(e,n.now)}}function _e(e,n){let t=L(e);if(t)return g({kind:"notice",title:t});let r=e.structuredContent;return Ne(r)?g({kind:"proposal",proposal:r}):$e(r)?g({kind:"change",preview:r}):_(r)?e._meta?.["chickpea/tool"]==="create_agent"&&r.status==="done"&&r.agent?re(r,{answersIn:[],needs:[]},n):A(r,n):g(I)}function A(e,n,t={}){switch(e.status){case"needs_confirmation":return e.confirmation?N(e.confirmation,n)?g(E):g({kind:"confirm",confirmation:e.confirmation,...e.agent?{agent:e.agent}:{}},[ie(e.confirmation,n)]):g({kind:"notice",title:e.summary});case"done":return g({kind:"done",summary:e.summary,...e.agent?{agent:e.agent,slackUrl:b(e.agent.links?.slack)}:{},undoToken:e.undoToken,version:e.version,...t.saved?{saved:!0}:{}});default:return g({kind:"notice",title:e.summary})}}function re(e,n,t){let r=e.agent;return g({kind:"creating",agentId:r.agentId,agent:{name:r.name,handle:r.handle},workspaceName:n.workspaceName,answersIn:n.answersIn,needs:n.needs,adminUrl:b(r.links?.admin),startedAt:t},[k("get_creation_status",{agentId:r.agentId})])}function Ee(e,n,t){let{view:r}=e,o=i=>a({view:r,busy:!0},[i]);switch(n){case"create":return r.kind==="proposal"?o(k("create_agent",r.proposal.create.arguments)):a(e);case"create_anyway":return r.kind==="similar"?o(k("create_agent",{...r.create,createEvenIfSimilar:!0,idempotencyKey:`${r.create.idempotencyKey}:anyway`})):a(e);case"change_something":{let i=r.kind==="proposal"?r.proposal.proposal.name:r.kind==="similar"?r.name:void 0;return i?a(e,[{type:"message",draft:`Change ${i}: `,sent:`I want to change something about ${i} before you create it.`}]):a(e)}case"save":return r.kind==="change"&&!r.stale?o(k("update_agent",r.preview.save.arguments)):a(e);case"cancel":return r.kind==="change"?g({kind:"notice",title:"Not saved",body:"Nothing changed."}):a(e);case"confirm":return r.kind!=="confirm"?a(e):N(r.confirmation,t)?g(E):o(k("confirm_change",{confirmToken:r.confirmation.confirmToken}));case"keep":return r.kind==="confirm"?g({kind:"notice",title:"Kept as it is",body:"Nothing changed."}):a(e);case"undo":return r.kind==="done"&&r.undoToken?o(k("undo_change",{undoToken:r.undoToken,idempotencyKey:`undo:${r.undoToken}`})):a(e);case"open_slack":{let i=Ie(r);return i?a(e,[{type:"open",url:i}]):a(e)}case"open_admin":return(r.kind==="ready"||r.kind==="creating")&&r.adminUrl?a(e,[{type:"open",url:r.adminUrl}]):a(e);case"next_step":{let i=r.kind==="ready"?r.needs[0]:void 0;return i&&r.kind==="ready"?a(e,[{type:"message",sent:`Connect ${i.name} to ${r.agent.name}.`}]):a(e)}case"check_again":return oe(e,t)}}function Se(e,n,t,r){let{view:o}=e,i=L(t),c=Z(t),l=t.structuredContent;switch(n.tool){case"create_agent":{if(i||!_(l))return a({view:o,busy:!1,error:i??w});let p=o.kind==="proposal"?o.proposal.proposal:void 0;if(l.status==="done"&&l.agent)return re(l,{answersIn:M(p?.answersIn??[]),needs:p?.needs??[],workspaceName:p?.workspaceName},r);if(l.status==="similar_agent_exists"){let y=o.kind==="proposal"?o.proposal.create.arguments:o.kind==="similar"?o.create:void 0;if(y)return g({kind:"similar",summary:l.summary,create:y,name:y.name})}return A(l,r)}case"get_creation_status":return Te(e,i?void 0:l,r);case"update_agent":return i||!_(l)?o.kind==="change"&&c==="changed_since_read"?a({view:{...o,stale:!0},busy:!1,error:i}):a({view:o,busy:!1,error:i??w}):A(l,r,{saved:!0});case"confirm_change":return c==="confirmation_expired"?g(E):i||!_(l)?c==="temporarily_unavailable"||!i?a({view:o,busy:!1,error:i??w}):g({kind:"notice",title:"Nothing changed",body:i}):A(l,r);case"undo_change":return i||!_(l)?a({view:(c==="nothing_to_undo"||c==="changed_since_read")&&o.kind==="done"?{...o,undoToken:void 0}:o,busy:!1,error:i??w}):A(l,r);case"get_agent":{if(e.busy)return a(e);let p=i?void 0:l?.version;return typeof p!="string"?a(e):o.kind==="change"&&p!==o.preview.save.arguments.version?a({...e,view:{...o,stale:!0}}):o.kind==="done"&&o.undoToken&&p!==o.version?a({...e,view:{...o,undoToken:void 0}}):a(e)}default:return a({...e,busy:!1})}}function Te(e,n,t){let{view:r}=e;if(r.kind!=="creating"&&r.kind!=="ready")return a(e);if(!n||typeof n.stage!="string")return r.kind==="creating"?O({...r,failures:(r.failures??0)+1},t):a(e);if(!(n.stage==="needs_attention"||n.stage!=="joining"&&n.channels!=="joining")){let{failures:i,...c}=r.kind==="creating"?r:{...r,kind:"creating",startedAt:t};return O({...c,status:n},t)}return g({kind:"ready",agentId:r.agentId,agent:r.agent,answersIn:r.answersIn,needs:r.needs,adminUrl:r.adminUrl,status:n})}function O(e,n){return n-e.startedAt>=12e4?g({...e,slow:!0}):g(e,[{type:"timer",inMs:X(e.failures)}])}function Re(e,n){let{view:t}=e;return t.kind==="creating"&&!t.slow?a(e,[k("get_creation_status",{agentId:t.agentId})]):t.kind==="confirm"&&N(t.confirmation,n)?g(E):a(e)}function oe(e,n){let{view:t}=e;switch(t.kind){case"creating":{let{slow:r,failures:o,...i}=t;return a({...e,view:{...i,startedAt:n}},[k("get_creation_status",{agentId:t.agentId})])}case"ready":return a(e,[k("get_creation_status",{agentId:t.agentId})]);case"change":return a(e,[k("get_agent",{agentId:t.preview.save.arguments.agentId})]);case"done":return t.undoToken&&t.agent?a(e,[k("get_agent",{agentId:t.agent.agentId})]):a(e);case"confirm":return N(t.confirmation,n)?g(E):a(e,[ie(t.confirmation,n)]);default:return a(e)}}var E={kind:"notice",title:"This confirmation expired",body:"Nothing changed. Ask again for a fresh one."};function ie(e,n){return{type:"timer",inMs:Math.max(0,Date.parse(e.expiresAt)-n)}}function N(e,n){let t=Date.parse(e.expiresAt);return Number.isFinite(t)&&n>=t}function Ie(e){if(e.kind==="ready")return b(e.status.slackUrl);if(e.kind==="creating")return b(e.status?.slackUrl);if(e.kind==="done")return e.slackUrl}function Ne(e){return f(e)&&f(e.proposal)&&f(e.create)&&f(e.create.arguments)}function $e(e){return f(e)&&Array.isArray(e.changes)&&f(e.save)&&f(e.save.arguments)}function _(e){return f(e)&&typeof e.status=="string"&&typeof e.summary=="string"}var Ve={name:"Name",description:"Description",handle:"Slack handle",instructions:"Instructions",on:"On or off",model:"Model",effort:"Effort",imageModel:"Image model",whoCanEdit:"Who can edit"},Me={creator_and_admins:"Its creator and workspace admins",all_workspace_members:"Anyone in the workspace"},ae=ee(Pe);function Pe(e){let n={busy:e.busy,error:e.error},{view:t}=e;switch(t.kind){case"waiting":return{...n,avatar:"none",title:"Loading\u2026",blocks:[],buttons:[]};case"proposal":return{...n,...Le(t.proposal)};case"similar":return{...n,avatar:"agent",title:"An Agent like this already exists",blocks:[{kind:"text",text:t.summary}],buttons:[{label:"Create it anyway",action:"create_anyway",tone:"primary"},{label:"Change something",action:"change_something",tone:"secondary"}]};case"creating":return{...n,...Oe(t)};case"ready":return{...n,...Ue(t)};case"change":return{...n,...De(t.preview,t.stale===!0)};case"done":return{...n,avatar:"agent",title:t.summary.replace(/\.$/,""),done:!0,...t.saved&&t.agent?.handle?{subtitle:[{text:`Try it: mention @${t.agent.handle} in Slack.`}]}:{},blocks:[],buttons:[...t.undoToken?[{label:"Undo",action:"undo",tone:"secondary"}]:[],...t.slackUrl?[{label:"Open in Slack",action:"open_slack",tone:"secondary"}]:[]]};case"confirm":return{...n,avatar:t.agent?"alert":"none",title:t.confirmation.ask.question,blocks:[{kind:"text",text:t.confirmation.ask.consequence}],buttons:[{label:t.confirmation.ask.confirm,action:"confirm",tone:"danger"},{label:t.confirmation.ask.keep,action:"keep",tone:"secondary"}]};case"notice":return{...n,avatar:"none",title:t.title,blocks:t.body?[{kind:"text",text:t.body}]:[],buttons:[]}}}function Le({proposal:e,issues:n}){let t=["Your DMs",...M(e.answersIn)];return{avatar:"agent",title:e.name,subtitle:[{text:`@${e.handle} \xB7 `},e.handleAvailable?{text:"handle is free",tone:"ok"}:{text:"handle is taken",tone:"warn"}],blocks:[{kind:"text",text:e.job},{kind:"section",label:"Example in Slack"},{kind:"exchange",ask:e.sampleExchange.ask,answer:e.sampleExchange.answer,agent:e.name},{kind:"facts",rows:[{label:"Answers in",value:t.join(" \xB7 ")},...e.needs.length?[{label:"Needs",value:"",chips:e.needs.map(({name:r})=>r),note:"you sign in after it's created"}]:[]]},...n.map(r=>({kind:"note",text:r,tone:"warn"}))],foot:e.workspaceName?`Everyone in ${e.workspaceName}'s Slack can message it.`:"Everyone in your Slack workspace can message it.",buttons:[{label:"Create in Slack",action:"create",tone:"primary"},{label:"Change something",action:"change_something",tone:"secondary"}]}}function Oe(e){let n=e.status?.stage??"joining",t=e.status?.channels??"none",r=n!=="joining";return{avatar:"agent",title:e.agent.name,subtitle:[{text:e.workspaceName?`Setting up in ${e.workspaceName}'s Slack\u2026`:"Setting up in Slack\u2026"}],blocks:[{kind:"steps",steps:[{label:"Created in Chickpea",state:"done"},{label:e.agent.handle?`Joining Slack as @${e.agent.handle}`:"Joining Slack",state:r?"done":"now"},...n==="ready"?[]:[{label:"Saying hello to you",state:r?"done":"todo"}],...t==="none"?[]:[{label:e.answersIn.length?`Joining ${e.answersIn.join(", ")}`:"Joining its Channels",state:t==="joined"?"done":t==="needs_attention"?"failed":r?"now":"todo"}]]},...e.slow?[{kind:"note",text:"This is taking longer than usual. It keeps going, and the card checks again when you come back."}]:[]],buttons:e.slow?[{label:"Check again",action:"check_again",tone:"secondary"}]:[]}}function Ue(e){let{status:n,agent:t}=e,r=t.handle?`@${t.handle}`:t.name;if(n.stage==="needs_attention")return{avatar:"alert",title:`${t.name} needs attention in Slack`,blocks:[{kind:"text",text:n.problem??"Slack has not finished setting it up."}],buttons:[...e.adminUrl?[{label:"Open in Admin",action:"open_admin",tone:"primary"}]:[],...b(n.slackUrl)?[{label:"Open in Slack",action:"open_slack",tone:"secondary"}]:[]]};let o=e.answersIn.length?`your DMs and ${je(e.answersIn)}`:"your DMs";return{avatar:"agent",title:n.stage==="said_hello"?`${r} said hello to you in Slack`:`${t.name} is ready in Slack`,subtitle:[{text:`${t.name} is ready \xB7 answers in ${o}`}],blocks:[...n.hello?[{kind:"quote",text:n.hello}]:[],...n.channels==="needs_attention"?[{kind:"note",text:"It could not join one of its Channels yet.",tone:"warn"}]:[]],buttons:[...b(n.slackUrl)?[{label:"Open in Slack",action:"open_slack",tone:"primary"}]:[],...qe(e)]}}function qe(e){let n=e.needs[0];return n?[{label:`Connect ${n.name}`,action:"next_step",tone:"secondary"}]:[]}function De(e,n){let t=e.changes.length;return{avatar:"agent",title:`Change ${e.agent.name}`,subtitle:[{text:`${t} ${t===1?"change":"changes"} \xB7 nothing is saved until you press Save`}],blocks:[...e.changes.flatMap(r=>[{kind:"section",label:Ve[r.field]},...He(r)]),...n?[{kind:"note",text:"It changed since this preview. Ask again for a fresh one.",tone:"warn"}]:[]],buttons:[...n?[]:[{label:"Save",action:"save",tone:"primary"}],{label:"Cancel",action:"cancel",tone:"secondary"}]}}function He(e){if(e.field==="instructions")return e.quotes.length?e.quotes.map(t=>({kind:"quote",text:J(t,r=>`\u201C${r}\u201D`)})):[{kind:"text",text:"Only spacing or line breaks change."}];if(e.field==="on")return[{kind:"text",text:e.after?"Turns it back on.":"Turns it off."}];let n=t=>t==null||t===""?Be[e.field]??"Not set":e.field==="handle"?`@${t}`:e.field==="whoCanEdit"?Me[String(t)]??String(t):String(t);return[{kind:"text",text:n(e.after)},...e.before===void 0?[]:[{kind:"note",text:`Was: ${n(e.before)}`}]]}var Be={model:"The workspace default",imageModel:"The workspace default",effort:"The model's standard effort"};function je(e){return e.length<=2?e.join(" and "):`${e.slice(0,-1).join(", ")} and ${e.at(-1)}`}F("chickpea-agent-card",{initial:ne,step:te,present:ae});})();
</script></body>
</html>