Ctrl K
ComunidadGuías…

assets/mcp-cards/agent-card-v4.html.txt

Rama main · réplica de lectura del repositorio original.

Archivo original ↗Preguntar a KiBot
<!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,
.cp-avatar img {
  display: block;
  width: 100%;
  height: 100%;
}

/* Slack's rounded square, cropped as Admin and the setup page crop it. */
.cp-avatar img {
  object-fit: cover;
}

.cp-avatar-lg {
  width: 44px;
  height: 44px;
}

.cp-avatar-lg img {
  border-radius: 12px;
}

.cp-avatar-sm {
  width: 26px;
  height: 26px;
}

.cp-avatar-sm img {
  border-radius: 7px;
}

/* On an alert card, an Agent's picture keeps the alert art's red. */
.cp-avatar-alert img {
  outline: 2px solid var(--cp-danger);
  outline-offset: 1px;
}

.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);
}

/* A host may pass an example's line breaks as they are; they show as written. */
.cp-said {
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.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 we="2026-01-26";var I=class{constructor(n){this.appInfo=n;window.addEventListener("message",t=>{t.source===window.parent&&this.#o(t.data)}),this.on("ui/notifications/host-context-changed",t=>{let r=t,{styles:a,...o}=this.hostContext??{},l=r.theme!==void 0&&r.theme!==o.theme&&!r.styles;this.hostContext={...o,...a&&!l?{styles:a}:{},...r}})}appInfo;#a=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:we});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;L(await this.#n("ui/message",{role:"user",content:[{type:"text",text:r}],...r===n.draft?{_meta:{"openai/message":{target:"active",send:!1}}}:{}}))}async updateModelContext(n){L(await this.#n("ui/update-model-context",{content:[{type:"text",text:n}]}))}async openLink(n){if(window.openai?.openExternal)try{await window.openai.openExternal({href:n,redirectUrl:!1});return}catch{}L(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 a=this.#a++;return new Promise((o,l)=>{let c=setTimeout(()=>{r?this.#e.set(a,{resolve:r,reject:()=>{}}):this.#e.delete(a),l(new Error(`${n} timed out`))},6e4);this.#e.set(a,{resolve:d=>{clearTimeout(c),o(d)},reject:d=>{clearTimeout(c),l(d)}}),window.parent.postMessage({jsonrpc:"2.0",id:a,method:n,params:t},"*")})}#o(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 L(e){if(e?.isError===!0)throw new Error("The host refused it")}function be(e){document.documentElement.setAttribute("data-theme",e),document.documentElement.style.colorScheme=e}function xe(e){for(let[n,t]of Object.entries(e))t!==void 0&&document.documentElement.style.setProperty(n,t)}var G=[];function D(e){e?.theme&&be(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 G)t[r]===void 0&&document.documentElement.style.removeProperty(r);xe(t),G=Object.keys(t).filter(r=>t[r]!==void 0)}var W=(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>`,ve={agent:W("#3a2a1e","#E8901A","#f3d9b1"),alert:W("#2a1f2e","#c2453a","#f1d3b8")},Ce={done:"done",now:"in progress",todo:"to do",failed:"failed"},F={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}var X=new Set;function Y(e,n,t){let r=s("span",`cp-avatar cp-avatar-${n}`),a=()=>{r.innerHTML=ve[e]};if(!t||X.has(t))return a(),r;e==="alert"&&r.classList.add("cp-avatar-alert");let o=s("img");return o.alt="",o.decoding="async",o.addEventListener("error",()=>{X.add(t),a()},{once:!0}),o.src=t,r.append(o),r}function Ae(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 _e(e,n,t){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 r=s("div","cp-thread"),a=s("div","cp-msg"),o=s("div","cp-who","You");o.append(s("span","cp-who-note","example"));let l=s("div");l.append(o,s("div","cp-said",e.ask)),a.append(s("span","cp-init","Y"),l);let c=s("div","cp-msg"),d=s("div");return d.append(s("div","cp-who",e.agent),s("div","cp-said",e.answer)),c.append(Y(n,"sm",t),d),r.append(a,c),r}case"facts":{let r=s("dl","cp-facts");for(let a of e.rows){let o=s("dd",void 0,a.value);for(let l of a.chips??[])o.append(s("span","cp-chip",l)," ");a.note&&o.append(s("span","cp-faint",a.note)),r.append(s("dt",void 0,a.label),o)}return r}case"steps":{let r=s("ul","cp-steps");for(let{label:a,state:o}of e.steps){let l=s("li"),c=s("span",`cp-ic cp-ic-${o}`,o==="done"?"\u2713":o==="failed"?"!":"");c.setAttribute("aria-hidden","true"),l.append(c,a,s("span","sr-only",` (${Ce[o]})`)),r.append(l)}return r}case"rows":{let r=s("ul","cp-rows");return r.append(...e.rows.map(Se)),r}}}function Se(e){let n=s("li","cp-row");if(e.icon==="tile"){let a=s("span","cp-tile",e.tile??"");a.setAttribute("aria-hidden","true"),n.append(a)}else{let a=F[e.icon],o=s("span",`cp-ic cp-ic-${e.icon}`,a.glyph);o.setAttribute("aria-hidden","true"),n.append(o)}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",` (${F[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:a,action:o,style:l}=e.control;n.append(Q(a,o,l==="link"?"cp-link cp-link-go":l==="toggle"?"cp-link":`btn btn-sm cp-btn-${l}`))}return n}function Q(e,n,t){let r=s("button",`${t} cursor-interaction`,e);return r.type="button",r.dataset.action=n,r}function Z(e,n){let t=s("p","sr-only");t.setAttribute("aria-live","polite");let r=s("main","cp-card"),a=s("div","cp-content"),o=s("div","cp-acts"),l=s("p","cp-error");l.setAttribute("role","alert"),r.append(a,o,l),e.replaceChildren(t,r),r.addEventListener("click",u=>{let p=u.target?.closest("button[data-action]");p instanceof HTMLButtonElement&&!p.disabled&&n(p.dataset.action)});let c="",d="",f=new Map;return{render(u){let p=JSON.stringify(u);if(p===c)return;c=p;let b=r.contains(document.activeElement),C=u.announce??u.title;t.textContent!==C&&(t.textContent=C);let S=s("header","cp-hdr"),K=u.avatar==="none"?"agent":u.avatar,{avatarUrl:P}=u;u.avatar!=="none"&&S.append(Y(u.avatar,"lg",P));let O=s("div","cp-heading"),T=s("h2","cp-title");if(T.tabIndex=-1,u.done){let k=s("span","cp-ok","\u2713 ");k.setAttribute("aria-hidden","true"),T.append(k)}T.append(u.title),O.append(T),u.subtitle&&O.append(Ae(u.subtitle)),S.append(O);let $=new Map,ye=u.blocks.map(k=>{let N=JSON.stringify([k,K,P]),J=!$.has(N)&&f.get(N)||_e(k,K,P);return $.has(N)||$.set(N,J),J});f=$,a.replaceChildren(S,...ye,...u.foot?[s("p","cp-foot",u.foot)]:[]);let z=JSON.stringify(u.buttons);z!==d&&(d=z,o.replaceChildren(...u.buttons.map(k=>Q(k.label,k.action,`btn cp-btn-${k.tone}`)))),o.hidden=u.buttons.length===0;for(let k of r.querySelectorAll("button"))k.disabled=u.busy,k.toggleAttribute("aria-busy",u.busy);l.textContent=u.error??"",l.hidden=!u.error,b&&!r.contains(document.activeElement)&&T.focus({preventScroll:!0})}}}var Te=1e3;function ee(e,n){let t=new I({name:e,version:String(4)}),r=Re(),a=r?{view:r.view,busy:!1,seq:r.seq}:n.initial,o,l=0,c=Z(document.getElementById("card"),p=>d({type:"press",action:p,now:Date.now()}));function d(p){let b=n.step(a,p),C=b.state.view!==a.view;a=b.state,C&&$e(a),c.render(n.present(a));for(let S of b.effects)f(S)}function f(p){switch(p.type){case"call":{let b=C=>d({type:"reply",call:p.call,result:C,now:Date.now()});t.callTool(p.call.tool,p.call.args,b).then(b,()=>d({type:"unreachable",call:p.call,now:Date.now()}));return}case"timer":clearTimeout(o),o=setTimeout(()=>d({type:"tick",now:Date.now()}),p.inMs);return;case"message":t.sendMessage(p).catch(()=>d({type:"refused",effect:p,now:Date.now()}));return;case"open":t.openLink(p.url).catch(()=>d({type:"refused",effect:p,now:Date.now()}));return;case"context":t.updateModelContext(p.text).catch(()=>{});return}}function u(){let p=Date.now();p-l<Te||a.view.kind==="waiting"||(l=p,d({type:"reread",now:p}))}t.on("ui/notifications/tool-result",p=>{r||a.view.kind!=="waiting"||(d({type:"result",result:Ee(p),now:Date.now()}),u())}),t.on("ui/notifications/tool-cancelled",()=>d({type:"no_result",now:Date.now()})),t.on("ui/notifications/host-context-changed",()=>D(t.hostContext)),window.addEventListener("focus",u),document.addEventListener("visibilitychange",()=>{document.visibilityState==="visible"&&u()}),c.render(n.present(a)),t.connect().then(()=>{D(t.hostContext),r&&u()},()=>d({type:"no_result",now:Date.now()}))}function Ee(e){let n=window.openai?.toolResponseMetadata;return e._meta||typeof n!="object"||n===null||Array.isArray(n)?e:{...e,_meta:n}}function Re(){let n=window.openai?.widgetState?.privateContent?.card,t=n?.view;return n?.version===4&&t&&typeof t.kind=="string"?{view:t,seq:n.seq??0}:void 0}function $e({view:e,seq:n}){if(e.kind==="waiting")return;let t={version:4,view:e,seq:n};Promise.resolve(window.openai?.setWidgetState?.({privateContent:{card:t}})).catch(()=>{})}function E(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 ne(e,n){let t=e.quotedWhole?"":` (${Ue(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=Ne[e.action],a=Ie(e.place,n);return`${a?`${a}, ${r}`:`${r[0].toUpperCase()}${r.slice(1)}`}: ${n(e.quote)}${t}`}var Ne={adds:"adds",removes:"removes",changes:"changes wording to"};function Ie(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 Ue(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 re(e=0){return Math.min(2e3*2**e,16e3)}var i=(e,n=[])=>({state:e,effects:n}),g=(e,n=[])=>({state:{view:e,busy:!1},effects:n}),y=(e,n)=>({type:"call",call:{tool:e,args:n}}),w=(e,n)=>({...e,effects:[{type:"context",text:n},...e.effects]});function ae(e){return(n,t)=>{let r=e(n,t.type==="result"||t.type==="reply"?{...t,result:Ve(t.result)}:t),a=r.state.view===n.view?n.seq:n.seq+1;return{state:{...r.state,seq:a},effects:r.effects.map(o=>o.type==="call"?{...o,call:{...o.call,seq:a}}:o)}}}function q(e,n){return n.seq!==e.seq}function Ve(e){let n=e._meta?.["chickpea/held"],t=e.structuredContent;if(!m(n)||!m(t))return e;let r=typeof n.confirmToken=="string"?n.confirmToken:void 0,a=typeof n.undoToken=="string"?n.undoToken:void 0;return{...e,structuredContent:{...t,...a?{undoToken:a}:{},...r&&m(t.confirmation)?{confirmation:{...t.confirmation,confirmToken:r}}:{}}}}var x="That did not work. Try again.",oe="Chickpea could not be reached. Try again.",U={kind:"notice",title:"Nothing to show here."};function h(e){return typeof e=="string"&&URL.parse(e)?.protocol==="https:"?e:void 0}var te=60;function A(e,n){let t=e.length>te?`${e.slice(0,te-1)}\u2026`:e;return`the Agent ${JSON.stringify(t)}${n?` (@${n})`:""}`}function ie(e,n){if(n.length===0)return`Try it: message @${e} in Slack.`;let t=n.length<=2?n.join(" or "):`${n.slice(0,-1).join(", ")} or ${n.at(-1)}`;return`Try it: mention @${e} in ${t}.`}function m(e){return typeof e=="object"&&e!==null&&!Array.isArray(e)}function H(e){if(!e.isError)return;let n=m(e.structuredContent)?e.structuredContent.error:void 0;return m(n)&&typeof n.message=="string"?n.message:x}function se(e){let n=m(e.structuredContent)?e.structuredContent.error:void 0;return e.isError&&m(n)&&typeof n.code=="string"?n.code:void 0}function ce(e){let n=e._meta?.["chickpea/tool"];return typeof n=="string"?n:void 0}function de(e){return n=>{try{return e(n)}catch{return{busy:n.busy,error:n.error,avatar:"none",title:U.title,blocks:[],buttons:[]}}}}var Pe=new Set(["get_creation_status","get_agent"]),ue={view:{kind:"waiting"},busy:!1,seq:0},pe=ae(Oe);function Oe(e,n){switch(n.type){case"result":return Le(n.result,n.now);case"press":return e.busy?i(e):De(e,n.action,n.now);case"reply":return q(e,n.call)&&!qe(e,n.call)?i(e):He(e,n.call,n.result,n.now);case"unreachable":return q(e,n.call)?i(e):Pe.has(n.call.tool)?e.view.kind!=="creating"?i(e):B({...e.view,failures:(e.view.failures??0)+1},n.now):i({view:e.view.kind==="starting"?e.view.from:e.view,busy:!1,error:oe});case"refused":return i({...e,error:x});case"no_result":return e.view.kind==="waiting"?g(U):i(e);case"tick":return e.busy?i(e):je(e,n.now);case"reread":return e.busy?i(e):fe(e,n.now)}}function Le(e,n){let t=H(e);if(t)return g({kind:"notice",title:t});let r=e.structuredContent;if(Je(r))return g({kind:"proposal",proposal:r});if(Ge(r))return g({kind:"change",preview:r});if(v(r)){let a=ce(e);return a==="create_agent"&&r.status==="done"&&r.agent?ge(r,{answersIn:[],needs:[]},n):_(r,n,{saved:a==="update_agent",undone:a==="undo_change"})}return g(U)}function _(e,n,t={}){switch(e.status){case"needs_confirmation":return e.confirmation?M(e.confirmation,n)?g(R):g({kind:"confirm",confirmation:e.confirmation,...e.agent?{agent:e.agent,avatarUrl:h(e.agent.avatarUrl),adminUrl:h(e.agent.links?.admin)}:{}},[me(e.confirmation,n)]):g({kind:"notice",title:e.summary});case"done":{let{agent:r}=e;return g({kind:"done",summary:e.summary,...r?{agent:{agentId:r.agentId,name:r.name,handle:r.handle},avatarUrl:h(r.avatarUrl),status:r.status,channels:E(r.channels??[]),slackUrl:h(r.links?.slack)}:{},undoToken:t.undone?void 0:e.undoToken,version:e.version,...t.saved?{saved:!0}:{}})}default:return g({kind:"notice",title:e.summary})}}function ge(e,n,t){let r=e.agent;return g({kind:"creating",agentId:r.agentId,agent:{name:r.name,handle:r.handle},avatarUrl:h(r.avatarUrl)??n.avatarUrl,workspaceName:n.workspaceName,answersIn:n.answersIn,needs:n.needs,adminUrl:h(r.links?.admin),startedAt:t,...n.byPress?{byPress:!0}:{}},[y("get_creation_status",{agentId:r.agentId})])}function De(e,n,t){let{view:r}=e,a=o=>i({view:r,busy:!0},[o]);switch(n){case"create":return r.kind==="proposal"?le(r,r.proposal.create.arguments):i(e);case"create_anyway":return r.kind==="similar"?le(r,{...r.create,createEvenIfSimilar:!0,idempotencyKey:`${r.create.idempotencyKey}:anyway`}):i(e);case"change_something":{let o=r.kind==="proposal"?r.proposal.proposal.name:r.kind==="similar"?r.name:void 0;return o?i(e,[{type:"message",draft:`Change ${o}: `,sent:`Change ${o}: `}]):i(e)}case"save":return r.kind==="change"&&!r.stale?a(y("update_agent",r.preview.save.arguments)):i(e);case"cancel":return r.kind==="change"?w(g({kind:"notice",title:"Not saved",body:"Nothing changed."}),`The person cancelled this change to ${A(r.preview.agent.name)} on the card. Nothing was saved.`):i(e);case"confirm":return r.kind!=="confirm"||!r.confirmation.confirmToken?i(e):M(r.confirmation,t)?g(R):a(y("confirm_change",{confirmToken:r.confirmation.confirmToken}));case"keep":return r.kind!=="confirm"||!r.confirmation.confirmToken?i(e):a(y("decline_change",{confirmToken:r.confirmation.confirmToken}));case"undo":return r.kind==="done"&&r.undoToken?a(y("undo_change",{undoToken:r.undoToken,idempotencyKey:`undo:${r.undoToken}`})):i(e);case"open_slack":{let o=ze(r);return o?i(e,[{type:"open",url:o}]):i(e)}case"open_admin":{let o=r.kind==="ready"||r.kind==="creating"||r.kind==="confirm"&&he(r)?r.adminUrl:void 0;return o?i(e,[{type:"open",url:o}]):i(e)}case"next_step":{let o=r.kind==="ready"?r.needs[0]:void 0;return o&&r.kind==="ready"?i(e,[{type:"message",sent:`Connect ${o.name} to ${r.agent.name}.`}]):i(e)}case"check_again":return fe(e,t)}}function qe(e,n){let{view:t}=e;if(e.busy||n.tool!=="create_agent")return!1;let r=n.args.idempotencyKey;return t.kind==="proposal"?r===t.proposal.create.arguments.idempotencyKey:t.kind==="similar"&&r===`${t.create.idempotencyKey}:anyway`}function le(e,n){return{state:{view:{kind:"starting",from:e},busy:!0},effects:[y("create_agent",n)]}}function He(e,n,t,r){let{view:a}=e,o=H(t),l=se(t),c=t.structuredContent;switch(n.tool){case"create_agent":{let d=a.kind==="starting"?a.from:a.kind==="proposal"||a.kind==="similar"?a:void 0;if(o||!v(c))return i({view:d??a,busy:!1,error:o??x});let f=d?.kind==="proposal"?d.proposal.proposal:void 0;if(c.status==="done"&&c.agent){let{name:u,handle:p}=c.agent;return w(ge(c,{answersIn:E(f?.answersIn??[]),needs:f?.needs??[],workspaceName:f?.workspaceName,avatarUrl:j(d),byPress:!0},r),`The person created ${A(u,p)} from the card. It is joining Slack now.`)}if(c.status==="similar_agent_exists"&&d){let u=d.kind==="proposal"?d.proposal.create.arguments:d.create;return w(g({kind:"similar",summary:c.summary,create:u,name:u.name,avatarUrl:j(d)}),`The person pressed Create in Slack on the card, but nothing was created: ${c.summary}`)}return _(c,r)}case"get_creation_status":return l==="not_found"?V(e,"unavailable"):Be(e,o?void 0:c,r);case"update_agent":{if(o||!v(c))return a.kind==="change"&&l==="changed_since_read"?i({view:{...a,stale:!0},busy:!1,error:o}):i({view:a,busy:!1,error:o??x});let d=a.kind==="change"?a.preview.agent.name:c.agent?.name,f=d===void 0?"the Agent":A(d);return w(_(c,r,{saved:!0}),c.status==="needs_confirmation"?`The person pressed Save on the card for ${f}. Nothing has changed yet: it waits for their confirmation on the card.`:`The person saved the change to ${f} from the card. ${c.summary}`)}case"confirm_change":return l==="confirmation_expired"?g(R):o||!v(c)?l==="temporarily_unavailable"||!o?i({view:a,busy:!1,error:o??x}):w(g({kind:"notice",title:"Nothing changed",body:o}),`The person confirmed on the card, but nothing changed: ${o}`):w(_(c,r),`The person confirmed on the card. ${c.summary}`);case"decline_change":{if(!(o?l==="not_found":v(c)))return i({view:a,busy:!1,error:o??x});let f=a.kind==="confirm"?a.confirmation.ask.keep:"Keep it";return!o&&v(c)&&c.status==="done"?w(_(c,r),`On the card, the person pressed "${f}", but the change was already made. ${c.summary}`):w(g(Ke),`On the card, the person pressed "${f}", so nothing changed. Make this change only if they ask for it again.`)}case"undo_change":return o||!v(c)?i({view:(l==="nothing_to_undo"||l==="changed_since_read")&&a.kind==="done"?{...a,undoToken:void 0}:a,busy:!1,error:o??x}):w(_(c,r,{undone:!0}),c.status==="needs_confirmation"?"The person pressed Undo on the card. Nothing has changed yet: it waits for their confirmation on the card.":`The person undid the change${a.kind==="done"&&a.agent?` to ${A(a.agent.name)}`:""} from the card.`);case"get_agent":{if(e.busy)return i(e);if(l==="not_found")return V(e,"unavailable");let d=o?void 0:c;return typeof d?.version!="string"?i(e):d.status==="archived"?V(e,"archived"):a.kind==="change"&&d.version!==a.preview.save.arguments.version?i({...e,view:{...a,stale:!0}}):a.kind==="done"&&a.undoToken&&d.version!==a.version?i({...e,view:{...a,undoToken:void 0}}):i(e)}default:return i({...e,busy:!1})}}function V(e,n){let{view:t}=e,r=t.kind==="creating"||t.kind==="ready"||t.kind==="done"?t.agent:t.kind==="change"?t.preview.agent:void 0;if(!r)return i(e);let a=t.kind==="change"?h(t.preview.agent.avatarUrl):"avatarUrl"in t?t.avatarUrl:void 0;return g({kind:"gone",agent:{name:r.name,handle:r.handle},why:n,avatarUrl:a})}function Be(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"?B({...r,failures:(r.failures??0)+1},t):i(e);if(n.agent?.status==="archived")return V(e,"archived");let a=h(n.agent?.avatarUrl)??r.avatarUrl;if(!(n.stage==="needs_attention"||n.stage!=="joining"&&n.channels!=="joining")){let{failures:d,...f}=r.kind==="creating"?r:{...r,kind:"creating",startedAt:t};return B({...f,avatarUrl:a,status:n},t)}let l=g({kind:"ready",agentId:r.agentId,agent:r.agent,avatarUrl:a,answersIn:r.answersIn,needs:r.needs,adminUrl:r.adminUrl,status:n});if(r.kind!=="creating"||!r.byPress)return l;let c=A(r.agent.name,r.agent.handle);return w(l,n.stage==="needs_attention"?`The person created ${c} from the card, but it needs attention in Slack: ${n.problem??"Slack has not finished setting it up."}`:`The person created ${c} from the card. It is ready in Slack${n.stage==="said_hello"?" and said hello to them there":""}.`)}function B(e,n){return n-e.startedAt>=12e4?g({...e,slow:!0}):g(e,[{type:"timer",inMs:re(e.failures)}])}function je(e,n){let{view:t}=e;return t.kind==="creating"&&!t.slow?i(e,[y("get_creation_status",{agentId:t.agentId})]):t.kind==="confirm"&&M(t.confirmation,n)?g(R):i(e)}function fe(e,n){let{view:t}=e;switch(t.kind){case"starting":return g(t.from);case"creating":{let{slow:r,failures:a,...o}=t;return i({...e,view:{...o,startedAt:n}},[y("get_creation_status",{agentId:t.agentId})])}case"ready":return i(e,[y("get_creation_status",{agentId:t.agentId})]);case"change":return i(e,[y("get_agent",{agentId:t.preview.save.arguments.agentId})]);case"done":return t.agent?i(e,[y("get_agent",{agentId:t.agent.agentId})]):i(e);case"confirm":return M(t.confirmation,n)?g(R):i(e,[me(t.confirmation,n)]);default:return i(e)}}var R={kind:"notice",title:"This confirmation expired",body:"Nothing changed. Ask again for a fresh one."},Ke={kind:"notice",title:"Kept as it is",body:"Nothing changed."};function me(e,n){return{type:"timer",inMs:Math.max(0,Date.parse(e.expiresAt)-n)}}function M(e,n){let t=Date.parse(e.expiresAt);return Number.isFinite(t)&&n>=t}function ze(e){if(e.kind==="ready")return h(e.status.slackUrl);if(e.kind==="creating")return h(e.status?.slackUrl);if(e.kind==="done")return e.slackUrl}function j(e){return e?.kind==="proposal"?h(e.proposal.proposal.avatarUrl):e?.avatarUrl}function he(e){return e.confirmation.inAdmin===!0&&e.adminUrl!==void 0}function Je(e){return m(e)&&m(e.proposal)&&m(e.create)&&m(e.create.arguments)}function Ge(e){return m(e)&&Array.isArray(e.changes)&&m(e.save)&&m(e.save.arguments)}function v(e){return m(e)&&typeof e.status=="string"&&typeof e.summary=="string"}var We={name:"Name",description:"Description",handle:"Slack handle",instructions:"Instructions",on:"On or off",model:"Model",effort:"Effort",imageModel:"Image model",whoCanEdit:"Who can edit"},Fe={creator_and_admins:"Its creator and workspace admins",all_workspace_members:"Anyone in the workspace"},ke=de(Xe);function Xe(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,...Qe(t.proposal)};case"similar":return{...n,avatar:"agent",avatarUrl:t.avatarUrl,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"starting":return{...n,...Ze(t.from)};case"creating":return{...n,...en(t)};case"ready":return{...n,...nn(t)};case"change":return{...n,...an(t.preview,t.stale===!0)};case"done":return{...n,...rn(t)};case"confirm":return{...n,...Ye(t)};case"gone":return{...n,avatar:"agent",avatarUrl:t.avatarUrl,title:t.why==="archived"?`${t.agent.name} is archived`:`${t.agent.name} is no longer available`,blocks:[{kind:"text",text:t.why==="archived"?"It no longer answers in Slack.":"It was deleted, or you can no longer manage it."}],buttons:[]};case"notice":return{...n,avatar:"none",title:t.title,blocks:t.body?[{kind:"text",text:t.body}]:[],buttons:[]}}}function Ye(e){let{ask:n,confirmToken:t,inAdmin:r}=e.confirmation,a={avatar:e.agent?"alert":"none",avatarUrl:e.avatarUrl,title:n.question};return t?{...a,blocks:[{kind:"text",text:n.consequence}],buttons:[{label:n.confirm,action:"confirm",tone:"danger"},{label:n.keep,action:"keep",tone:"secondary"}]}:{...a,blocks:[{kind:"text",text:n.consequence},{kind:"note",text:r?"Confirm this in Admin.":"Ask again in a new chat to confirm it."}],buttons:he(e)?[{label:"Open in Admin",action:"open_admin",tone:"secondary"}]:[]}}function Qe({proposal:e,issues:n}){let t=["Your DMs",...E(e.answersIn)];return{avatar:"agent",avatarUrl:h(e.avatarUrl),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 Ze(e){let n=e.kind==="proposal"?e.proposal.proposal:void 0,t=n?.handle??(e.kind==="similar"?e.create.handle:void 0),r=E(n?.answersIn??[]);return{avatar:"agent",avatarUrl:j(e),title:n?.name??(e.kind==="similar"?e.name:""),subtitle:[{text:n?.workspaceName?`Setting up in ${n.workspaceName}'s Slack\u2026`:"Setting up in Slack\u2026"}],blocks:[{kind:"steps",steps:[{label:"Creating it in Chickpea",state:"now"},{label:t?`Joining Slack as @${t}`:"Joining Slack",state:"todo"},{label:"Saying hello to you",state:"todo"},...r.length?[{label:`Joining ${r.join(", ")}`,state:"todo"}]:[]]}],buttons:[]}}function en(e){let n=e.status?.stage??"joining",t=e.status?.channels??"none",r=n!=="joining";return{avatar:"agent",avatarUrl:e.avatarUrl,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 nn(e){let{status:n,agent:t}=e,r=t.handle?`@${t.handle}`:t.name;if(n.stage==="needs_attention")return{avatar:"alert",avatarUrl:e.avatarUrl,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"}]:[],...h(n.slackUrl)?[{label:"Open in Slack",action:"open_slack",tone:"secondary"}]:[]]};let a=e.answersIn.length?`your DMs and ${cn(e.answersIn)}`:"your DMs";return{avatar:"agent",avatarUrl:e.avatarUrl,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 ${a}`}],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:[...h(n.slackUrl)?[{label:"Open in Slack",action:"open_slack",tone:"primary"}]:[],...tn(e)]}}function tn(e){let n=e.needs[0];return n?[{label:`Connect ${n.name}`,action:"next_step",tone:"secondary"}]:[]}function rn(e){let n=e.status==="off"?"It won't answer in Slack until it's turned back on.":e.saved&&e.agent?.handle&&e.status!=="archived"?ie(e.agent.handle,e.channels??[]):void 0;return{avatar:"agent",avatarUrl:e.avatarUrl,title:e.summary.replace(/\.$/,""),done:!0,...n?{subtitle:[{text:n}]}:{},blocks:[],buttons:[...e.undoToken?[{label:"Undo",action:"undo",tone:"secondary"}]:[],...e.slackUrl?[{label:"Open in Slack",action:"open_slack",tone:"secondary"}]:[]]}}function an(e,n){let t=e.changes.length;return{avatar:"agent",avatarUrl:h(e.agent.avatarUrl),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:We[r.field]},...on(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 on(e){if(e.field==="instructions")return e.quotes.length?e.quotes.map(t=>({kind:"quote",text:ne(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===""?sn[e.field]??"Not set":e.field==="handle"?`@${t}`:e.field==="whoCanEdit"?Fe[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 sn={model:"The workspace default",imageModel:"The workspace default",effort:"The model's standard effort"};function cn(e){return e.length<=2?e.join(" and "):`${e.slice(0,-1).join(", ")} and ${e.at(-1)}`}ee("chickpea-agent-card",{initial:ue,step:pe,present:ke});})();
</script></body>
</html>