assets/mcp-cards/agent-card-v1.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: var(--cp-danger);
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);
}
</style></head>
<body><div id="card"></div><script>"use strict";(()=>{var oe="2026-01-26";var E=class{constructor(n){this.appInfo=n;window.addEventListener("message",t=>{t.source===window.parent&&this.#a(t.data)}),this.on("ui/notifications/host-context-changed",t=>{let r=t,{styles:o,...a}=this.hostContext??{},d=r.theme!==void 0&&r.theme!==a.theme&&!r.styles;this.hostContext={...a,...o&&!d?{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:oe});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;U(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{}U(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((a,d)=>{let l=setTimeout(()=>{r?this.#e.set(o,{resolve:r,reject:()=>{}}):this.#e.delete(o),d(new Error(`${n} timed out`))},6e4);this.#e.set(o,{resolve:p=>{clearTimeout(l),a(p)},reject:p=>{clearTimeout(l),d(p)}}),window.parent.postMessage({jsonrpc:"2.0",id:o,method:n,params:t},"*")})}#a(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 U(e){if(e?.isError===!0)throw new Error("The host refused it")}function ae(e){document.documentElement.setAttribute("data-theme",e),document.documentElement.style.colorScheme=e}function ie(e){for(let[n,t]of Object.entries(e))t!==void 0&&document.documentElement.style.setProperty(n,t)}var q=[];function M(e){e?.theme&&ae(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 q)t[r]===void 0&&document.documentElement.style.removeProperty(r);ie(t),q=Object.keys(t).filter(r=>t[r]!==void 0)}function P(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 V(e,n){let t=e.quotedWhole?"":` (${de(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=se[e.action],o=ce(e.place,n);return`${o?`${o}, ${r}`:`${r[0].toUpperCase()}${r.slice(1)}`}: ${n(e.quote)}${t}`}var se={adds:"adds",removes:"removes",changes:"changes wording to"};function ce(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 de(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`}var j=new Set(["get_creation_status","get_agent"]),le=2e3,ue=16e3,pe=2*6e4,B={view:{kind:"waiting"},busy:!1,seq:0},i=(e,n=[])=>({state:e,effects:n}),u=(e,n=[])=>({state:{view:e,busy:!1},effects:n}),m=(e,n)=>({type:"call",call:{tool:e,args:n}});function z(e,n){let t=fe(e,n),r=t.state.view===e.view?e.seq:e.seq+1;return{state:{...t.state,seq:r},effects:t.effects.map(o=>o.type==="call"?{...o,call:{...o.call,seq:r}}:o)}}function fe(e,n){switch(n.type){case"result":return ge(n.result,n.now);case"press":return e.busy?i(e):me(e,n.action,n.now);case"reply":return H(e,n.call)?i(e):he(e,n.call,n.result,n.now);case"unreachable":return H(e,n.call)?i(e):j.has(n.call.tool)?e.view.kind!=="creating"?i(e):O({...e.view,failures:(e.view.failures??0)+1},n.now):i({...e,busy:!1,error:"Chickpea could not be reached. Try again."});case"refused":return i({...e,error:w});case"no_result":return e.view.kind==="waiting"?u(G):i(e);case"tick":return e.busy?i(e):ye(e,n.now);case"reread":return e.busy?i(e):W(e,n.now)}}function H(e,n){return n.seq!==e.seq&&(j.has(n.tool)||!e.busy)}function ge(e,n){let t=J(e);if(t)return u({kind:"notice",title:t});let r=e.structuredContent;return we(r)?u({kind:"proposal",proposal:r}):xe(r)?u({kind:"change",preview:r}):_(r)?e._meta?.["chickpea/tool"]==="create_agent"&&r.status==="done"&&r.agent?K(r,{answersIn:[],needs:[]},n):C(r,n):u(G)}function C(e,n,t={}){switch(e.status){case"needs_confirmation":return e.confirmation?I(e.confirmation,n)?u(S):u({kind:"confirm",confirmation:e.confirmation,...e.agent?{agent:e.agent}:{}},[F(e.confirmation,n)]):u({kind:"notice",title:e.summary});case"done":return u({kind:"done",summary:e.summary,...e.agent?{agent:e.agent,slackUrl:x(e.agent.links?.slack)}:{},undoToken:e.undoToken,version:e.version,...t.saved?{saved:!0}:{}});default:return u({kind:"notice",title:e.summary})}}function K(e,n,t){let r=e.agent;return u({kind:"creating",agentId:r.agentId,agent:{name:r.name,handle:r.handle},workspaceName:n.workspaceName,answersIn:n.answersIn,needs:n.needs,adminUrl:x(r.links?.admin),startedAt:t},[m("get_creation_status",{agentId:r.agentId})])}function me(e,n,t){let{view:r}=e,o=a=>i({view:r,busy:!0},[a]);switch(n){case"create":return r.kind==="proposal"?o(m("create_agent",r.proposal.create.arguments)):i(e);case"create_anyway":return r.kind==="similar"?o(m("create_agent",{...r.create,createEvenIfSimilar:!0,idempotencyKey:`${r.create.idempotencyKey}:anyway`})):i(e);case"change_something":{let a=r.kind==="proposal"?r.proposal.proposal.name:r.kind==="similar"?r.name:void 0;return a?i(e,[{type:"message",draft:`Change ${a}: `,sent:`I want to change something about ${a} before you create it.`}]):i(e)}case"save":return r.kind==="change"&&!r.stale?o(m("update_agent",r.preview.save.arguments)):i(e);case"cancel":return r.kind==="change"?u({kind:"notice",title:"Not saved",body:"Nothing changed."}):i(e);case"confirm":return r.kind!=="confirm"?i(e):I(r.confirmation,t)?u(S):o(m("confirm_change",{confirmToken:r.confirmation.confirmToken}));case"keep":return r.kind==="confirm"?u({kind:"notice",title:"Kept as it is",body:"Nothing changed."}):i(e);case"undo":return r.kind==="done"&&r.undoToken?o(m("undo_change",{undoToken:r.undoToken,idempotencyKey:`undo:${r.undoToken}`})):i(e);case"open_slack":{let a=be(r);return a?i(e,[{type:"open",url:a}]):i(e)}case"open_admin":return(r.kind==="ready"||r.kind==="creating")&&r.adminUrl?i(e,[{type:"open",url:r.adminUrl}]):i(e);case"next_step":{let a=r.kind==="ready"?r.needs[0]:void 0;return a&&r.kind==="ready"?i(e,[{type:"message",sent:`Connect ${a.name} to ${r.agent.name}.`}]):i(e)}case"check_again":return W(e,t)}}function he(e,n,t,r){let{view:o}=e,a=J(t),d=ve(t),l=t.structuredContent;switch(n.tool){case"create_agent":{if(a||!_(l))return i({view:o,busy:!1,error:a??w});let p=o.kind==="proposal"?o.proposal.proposal:void 0;if(l.status==="done"&&l.agent)return K(l,{answersIn:P(p?.answersIn??[]),needs:p?.needs??[],workspaceName:p?.workspaceName},r);if(l.status==="similar_agent_exists"){let c=o.kind==="proposal"?o.proposal.create.arguments:o.kind==="similar"?o.create:void 0;if(c)return u({kind:"similar",summary:l.summary,create:c,name:c.name})}return C(l,r)}case"get_creation_status":return ke(e,a?void 0:l,r);case"update_agent":return a||!_(l)?o.kind==="change"&&d==="changed_since_read"?i({view:{...o,stale:!0},busy:!1,error:a}):i({view:o,busy:!1,error:a??w}):C(l,r,{saved:!0});case"confirm_change":return d==="confirmation_expired"?u(S):a||!_(l)?d==="temporarily_unavailable"||!a?i({view:o,busy:!1,error:a??w}):u({kind:"notice",title:"Nothing changed",body:a}):C(l,r);case"undo_change":return a||!_(l)?i({view:(d==="nothing_to_undo"||d==="changed_since_read")&&o.kind==="done"?{...o,undoToken:void 0}:o,busy:!1,error:a??w}):C(l,r);case"get_agent":{let p=a?void 0:l?.version;return typeof p!="string"?i(e):o.kind==="change"&&p!==o.preview.save.arguments.version?i({...e,view:{...o,stale:!0}}):o.kind==="done"&&o.undoToken&&p!==o.version?i({...e,view:{...o,undoToken:void 0}}):i(e)}default:return i({...e,busy:!1})}}function ke(e,n,t){let{view:r}=e;if(r.kind!=="creating"&&r.kind!=="ready")return i(e);if(!n||typeof n.stage!="string")return r.kind==="creating"?O({...r,failures:(r.failures??0)+1},t):i(e);if(!(n.stage==="needs_attention"||n.stage!=="joining"&&n.channels!=="joining")){let{failures:a,...d}=r.kind==="creating"?r:{...r,kind:"creating",startedAt:t};return O({...d,status:n},t)}return u({kind:"ready",agentId:r.agentId,agent:r.agent,answersIn:r.answersIn,needs:r.needs,adminUrl:r.adminUrl,status:n})}function O(e,n){if(n-e.startedAt>=pe)return u({...e,slow:!0});let t=Math.min(le*2**(e.failures??0),ue);return u(e,[{type:"timer",inMs:t}])}function ye(e,n){let{view:t}=e;return t.kind==="creating"&&!t.slow?i(e,[m("get_creation_status",{agentId:t.agentId})]):t.kind==="confirm"&&I(t.confirmation,n)?u(S):i(e)}function W(e,n){let{view:t}=e;switch(t.kind){case"creating":{let{slow:r,failures:o,...a}=t;return i({...e,view:{...a,startedAt:n}},[m("get_creation_status",{agentId:t.agentId})])}case"ready":return i(e,[m("get_creation_status",{agentId:t.agentId})]);case"change":return i(e,[m("get_agent",{agentId:t.preview.save.arguments.agentId})]);case"done":return t.undoToken&&t.agent?i(e,[m("get_agent",{agentId:t.agent.agentId})]):i(e);case"confirm":return I(t.confirmation,n)?u(S):i(e,[F(t.confirmation,n)]);default:return i(e)}}var w="That did not work. Try again.",G={kind:"notice",title:"Nothing to show here."},S={kind:"notice",title:"This confirmation expired",body:"Nothing changed. Ask again for a fresh one."};function F(e,n){return{type:"timer",inMs:Math.max(0,Date.parse(e.expiresAt)-n)}}function I(e,n){let t=Date.parse(e.expiresAt);return Number.isFinite(t)&&n>=t}function be(e){if(e.kind==="ready")return x(e.status.slackUrl);if(e.kind==="creating")return x(e.status?.slackUrl);if(e.kind==="done")return e.slackUrl}function x(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 we(e){return f(e)&&f(e.proposal)&&f(e.create)&&f(e.create.arguments)}function xe(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"}function J(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 ve(e){let n=f(e.structuredContent)?e.structuredContent.error:void 0;return e.isError&&f(n)&&typeof n.code=="string"?n.code:void 0}var Ce={name:"Name",description:"Description",handle:"Slack handle",instructions:"Instructions",on:"On or off",model:"Model",effort:"Effort",imageModel:"Image model",whoCanEdit:"Who can edit"},_e={creator_and_admins:"Its creator and workspace admins",all_workspace_members:"Anyone in the workspace"};function L(e){try{return Se(e)}catch{return{busy:e.busy,error:e.error,avatar:"none",title:"Nothing to show here.",blocks:[],buttons:[]}}}function Se(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,...Te(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,...Ee(t)};case"ready":return{...n,...Ie(t)};case"change":return{...n,...Ae(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 Te({proposal:e,issues:n}){let t=["Your DMs",...P(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 Ee(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 Ie(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"}]:[],...x(n.slackUrl)?[{label:"Open in Slack",action:"open_slack",tone:"secondary"}]:[]]};let o=e.answersIn.length?`your DMs and ${Me(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:[...x(n.slackUrl)?[{label:"Open in Slack",action:"open_slack",tone:"primary"}]:[],...Re(e)]}}function Re(e){let n=e.needs[0];return n?[{label:`Connect ${n.name}`,action:"next_step",tone:"secondary"}]:[]}function Ae(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:Ce[r.field]},...Ne(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 Ne(e){if(e.field==="instructions")return e.quotes.length?e.quotes.map(t=>({kind:"quote",text:V(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===""?$e[e.field]??"Not set":e.field==="handle"?`@${t}`:e.field==="whoCanEdit"?_e[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 $e={model:"The workspace default",imageModel:"The workspace default",effort:"The model's standard effort"};function Me(e){return e.length<=2?e.join(" and "):`${e.slice(0,-1).join(", ")} and ${e.at(-1)}`}var X=(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>`,Pe={agent:X("#3a2a1e","#E8901A","#f3d9b1"),alert:X("#2a1f2e","#c2453a","#f1d3b8")},Oe={done:"done",now:"in progress",todo:"to do",failed:"failed"};function s(e,n,t){let r=document.createElement(e);return n&&(r.className=n),t!==void 0&&(r.textContent=t),r}function Y(e,n="lg"){let t=s("span",`cp-avatar cp-avatar-${n}`);return t.innerHTML=Pe[e],t}function Le(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 De(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 a=s("div");a.append(o,s("div",void 0,e.ask)),r.append(s("span","cp-init","Y"),a);let d=s("div","cp-msg"),l=s("div");return l.append(s("div","cp-who",e.agent),s("div",void 0,e.answer)),d.append(Y(n,"sm"),l),t.append(r,d),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 a of r.chips??[])o.append(s("span","cp-chip",a)," ");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 a=s("li"),d=s("span",`cp-ic cp-ic-${o}`,o==="done"?"\u2713":o==="failed"?"!":"");d.setAttribute("aria-hidden","true"),a.append(d,r,s("span","sr-only",` (${Oe[o]})`)),t.append(a)}return t}}}function Q(e,n){let t=s("p","sr-only");t.setAttribute("aria-live","polite");let r=s("main","cp-card"),o=s("div","cp-content"),a=s("div","cp-acts"),d=s("p","cp-error");d.setAttribute("role","alert"),r.append(o,a,d),e.replaceChildren(t,r),a.addEventListener("click",c=>{let b=c.target?.closest("button[data-action]");b instanceof HTMLButtonElement&&!b.disabled&&n(b.dataset.action)});let l="",p="";return{render(c){let b=JSON.stringify(c);if(b===l)return;l=b;let te=r.contains(document.activeElement);t.textContent!==c.title&&(t.textContent=c.title);let A=s("header","cp-hdr"),re=c.avatar==="none"?"agent":c.avatar;c.avatar!=="none"&&A.append(Y(c.avatar));let N=s("div","cp-heading"),v=s("h2","cp-title");if(v.tabIndex=-1,c.done){let g=s("span","cp-ok","\u2713 ");g.setAttribute("aria-hidden","true"),v.append(g)}v.append(c.title),N.append(v),c.subtitle&&N.append(Le(c.subtitle)),A.append(N),o.replaceChildren(A,...c.blocks.map(g=>De(g,re)),...c.foot?[s("p","cp-foot",c.foot)]:[]);let D=JSON.stringify(c.buttons);D!==p&&(p=D,a.replaceChildren(...c.buttons.map(g=>{let $=s("button",`btn cursor-interaction cp-btn-${g.tone}`,g.label);return $.type="button",$.dataset.action=g.action,$}))),a.hidden=c.buttons.length===0;for(let g of a.querySelectorAll("button"))g.disabled=c.busy,g.toggleAttribute("aria-busy",c.busy);d.textContent=c.error??"",d.hidden=!c.error,te&&!r.contains(document.activeElement)&&v.focus({preventScroll:!0})}}}var Ue=1e3,k=new E({name:"chickpea-agent-card",version:String(1)}),T=Ve(),y=T?{view:T.view,busy:!1,seq:T.seq}:B,Z,ee=0,ne=Q(document.getElementById("card"),e=>h({type:"press",action:e,now:Date.now()}));function h(e){let n=z(y,e),t=n.state.view!==y.view;y=n.state,t&&He(y),ne.render(L(y));for(let r of n.effects)qe(r)}function qe(e){switch(e.type){case"call":{let n=t=>h({type:"reply",call:e.call,result:t,now:Date.now()});k.callTool(e.call.tool,e.call.args,n).then(n,()=>h({type:"unreachable",call:e.call,now:Date.now()}));return}case"timer":clearTimeout(Z),Z=setTimeout(()=>h({type:"tick",now:Date.now()}),e.inMs);return;case"message":k.sendMessage(e).catch(()=>h({type:"refused",now:Date.now()}));return;case"open":k.openLink(e.url).catch(()=>h({type:"refused",now:Date.now()}));return}}function Ve(){let e=window.openai?.widgetState,n=e?.card?.view;return e?.card?.version===1&&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:1,view:e,seq:n}})).catch(()=>{})}function R(){let e=Date.now();e-ee<Ue||y.view.kind==="waiting"||(ee=e,h({type:"reread",now:e}))}k.on("ui/notifications/tool-result",e=>{T||y.view.kind!=="waiting"||(h({type:"result",result:e,now:Date.now()}),R())});k.on("ui/notifications/tool-cancelled",()=>h({type:"no_result",now:Date.now()}));k.on("ui/notifications/host-context-changed",()=>M(k.hostContext));window.addEventListener("focus",R);document.addEventListener("visibilitychange",()=>{document.visibilityState==="visible"&&R()});ne.render(L(y));k.connect().then(()=>{M(k.hostContext),T&&R()},()=>h({type:"no_result",now:Date.now()}));})();
</script></body>
</html>