@ai-ecoverse/slicc-spectrum 1.94.2 → 1.96.0

package/dist/slicc-kernel-model.js

@@ -6,7 +6,7 @@ import {
   DummySettings,
   clock,
   dummySettingsKey
-} from "./chunk-2R4DLSKG.js";
+} from "./chunk-CVMI4FSY.js";
 import {
   Emitter
 } from "./chunk-T5NHW4KC.js";

package/dist/slicc-ui.js

@@ -30183,28 +30183,56 @@ function decision(message, handlers, pile) {
     </div>
   </swc-conversation-turn>`;
 }
+var scoopWords = {
+  completed: "finished",
+  failed: "failed",
+  stopped: "stopped"
+};
+var scoopBracket = /^\[(?:scoop |@)[^\]\n]* (completed|failed|stopped)\][^\S\n]*(?:\n|$)/;
+function scoopLine(message) {
+  const icon = lickIcons[message.channel];
+  const [label] = lickLabels[message.channel];
+  const bracket = message.channel === "scoop-notify" && scoopBracket.exec(message.text);
+  if (!bracket) return [message.text, false, icon, label];
+  const name = message.title.replace(/\s*\([^)]*\)$/, "");
+  const word = scoopWords[bracket[1]];
+  if (bracket[1] === "completed") return [`Scoop ${name} ${word}`, false, icon, label];
+  return [`Scoop ${name} ${word}`, true, "\u274C", `Scoop ${word}`];
+}
+function lickBody(message) {
+  return message.channel === "scoop-notify" ? (message.body ?? "").replace(scoopBracket, "").trim() : message.body;
+}
+function lickContent(message, body4, handlers) {
+  const scoop = message.channel === "scoop-notify";
+  const report = message.report;
+  if (!scoop && !report) return b`<pre class="output">${body4}</pre>`;
+  const shown4 = !body4 ? A : scoop ? b`<div class="text">${markdown(body4)}</div>` : b`<pre class="output">${body4}</pre>`;
+  return b`<div class="report">${shown4}${report ? b`<swc-button size="s" variant="secondary" fill-style="outline" data-action="open-report" @click=${() => handlers.open(report)}>Open the report</swc-button>` : A}</div>`;
+}
 function lick(message, handlers, stamp = true, pile = flatPile) {
   if (pendingApproval(message)) return decision(message, handlers, pile);
-  const [label] = lickLabels[message.channel];
+  const [line, failed2, icon, label] = scoopLine(message);
+  const severity = message.severity ?? (failed2 ? "error" : void 0);
   const outcome = message.state === "confirmed" ? "Allowed" : message.state === "dismissed" ? "Denied" : "";
-  const head2 = b`${message.severity ? b`<span class="sr">${severities[message.severity].prefix}</span>` : A}
+  const head2 = b`${severity ? b`<span class="sr">${severities[severity].prefix}</span>` : A}
     ${outcome ? b`<span class="sr">${outcome}. </span>` : A}
-    <span class="text">${message.text}</span>
+    <span class="text" data-summary=${message.summary ? "" : A}>${message.summary || line}</span>
     ${message.count && message.count > 1 ? b`<span class="times" title="Coalesced events">×${message.count}</span>` : A}`;
   const outcomeIcon = message.state === "confirmed" ? "\u{1F44D}" : message.state === "dismissed" ? "\u{1F44E}" : "";
-  const reaction = b`<span class="reactions"><span class="reaction" title=${label} aria-hidden="true">${lickIcons[message.channel]}</span>${outcomeIcon ? b`<span class="reaction" title=${outcome} aria-hidden="true">${outcomeIcon}</span>` : A}</span>`;
-  const name = `${message.severity ? severities[message.severity].prefix : ""}${label} event`;
-  const byline2 = b`<div class="meta">${message.severity ? b`<span class="severity-icon">${severities[message.severity].icon}</span>` : A}<span class="who">${message.title}</span>${stamp ? when(message.createdAt) : unseen(message.createdAt)}</div>`;
-  if (!message.body) {
+  const reaction = b`<span class="reactions"><span class="reaction" title=${label} aria-hidden="true">${icon}</span>${outcomeIcon ? b`<span class="reaction" title=${outcome} aria-hidden="true">${outcomeIcon}</span>` : A}</span>`;
+  const name = `${severity ? severities[severity].prefix : ""}${label} event`;
+  const byline2 = b`<div class="meta">${severity ? b`<span class="severity-icon">${severities[severity].icon}</span>` : A}<span class="who">${message.title}</span>${stamp ? when(message.createdAt) : unseen(message.createdAt)}</div>`;
+  const body4 = lickBody(message);
+  if (!body4 && !message.report) {
     return outside(
       name,
       byline2,
-      b`<div class="lick-frame"><div class="lick" data-id=${message.id} data-channel=${message.channel} data-severity=${message.severity ?? A}><div class="lick-head">${head2}</div></div>${reaction}</div>`
+      b`<div class="lick-frame"><div class="lick" data-id=${message.id} data-channel=${message.channel} data-severity=${severity ?? A}><div class="lick-head">${head2}</div></div>${reaction}</div>`
     );
   }
-  const details = b`<details class="lick" data-id=${message.id} data-channel=${message.channel} data-severity=${message.severity ?? A} ?open=${handlers.licks?.has(message.id) ?? false} @toggle=${handlers.licks?.details(message.id) ?? A}>
+  const details = b`<details class="lick" data-id=${message.id} data-channel=${message.channel} data-severity=${severity ?? A} ?open=${handlers.licks?.has(message.id) ?? false} @toggle=${handlers.licks?.details(message.id) ?? A}>
     <summary class="lick-head">${head2}<swc-icon-chevron-right class="chevron" size="s" aria-hidden="true"></swc-icon-chevron-right></summary>
-    <pre class="output">${message.body}</pre>
+    ${lickContent(message, body4, handlers)}
   </details>`;
   return outside(name, byline2, b`<div class="lick-frame">${details}${reaction}</div>`);
 }
@@ -30395,16 +30423,35 @@ var messageCss = i`
   details[open] > summary .chevron {
     transform: rotate(90deg);
   }
-  .lick .text,
+  .lick-head .text,
   .runs .label {
     min-inline-size: 0;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
-  .lick .text {
+  .lick-head .text {
     flex: 1;
   }
+  .lick-head .text[data-summary] {
+    white-space: normal;
+  }
+  .lick .report {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--swc-spacing-200);
+    padding: var(--swc-spacing-75) var(--swc-spacing-200) var(--swc-spacing-200);
+    overflow-wrap: anywhere;
+  }
+  .lick .report .heading {
+    font-size: inherit;
+  }
+  .lick .report > .text {
+    align-self: stretch;
+    max-block-size: calc(var(--swc-spacing-1000) * 4);
+    overflow: auto;
+  }
   swc-system-message > slicc-tool-runs + slicc-tool-runs {
     margin-block-start: var(--swc-spacing-75);
   }
@@ -49643,7 +49690,8 @@ var accountStatus = {
   "signing-in": ["info", "Signing in\u2026"],
   rejected: ["notice", "Rejected"],
   "needs-sign-in": ["neutral", "Needs sign-in"],
-  "sign-in-expired": ["notice", "Sign-in expired"]
+  "sign-in-expired": ["notice", "Sign-in expired"],
+  unreachable: ["notice", "Unreachable"]
 };
 var authHints = {
   "api-key": "API key",
@@ -49677,6 +49725,7 @@ function draft(option2) {
     fields: option2.fields,
     keyUrl: option2.keyUrl,
     needs: option2.needs,
+    blocked: option2.blocked,
     vaultName: option2.vaultName
   };
 }
@@ -49687,6 +49736,23 @@ function matchProviders(options2, query) {
     return words.every((word) => text5.includes(word));
   });
 }
+var mcpRegistrations = "slicc-spectrum.mcp-endpoints";
+function registrations2() {
+  try {
+    return JSON.parse(globalThis.localStorage.getItem(mcpRegistrations) ?? "{}") ?? {};
+  } catch {
+    return {};
+  }
+}
+function register(server, url) {
+  const all3 = registrations2();
+  if (url) all3[server] = url;
+  else delete all3[server];
+  try {
+    globalThis.localStorage.setItem(mcpRegistrations, JSON.stringify(all3));
+  } catch {
+  }
+}
 var popup = (account) => account.group === "mcp" && account.auth === "oauth";
 var start = (options2, value) => options2.some((option2) => option2.value === value) ? value : options2[0]?.value ?? "";
 var nothingToChoose = "Nothing to choose from yet. You can connect without it.";
@@ -49716,6 +49782,7 @@ var SliccSettings = class extends ThemedElement {
   };
   #waits = new SignInWaits(() => this.requestUpdate());
   #landing = null;
+  #away = false;
   #bases = /* @__PURE__ */ new Map();
   #scroll = new ViewScroll(this, "settings:scroll", { scroller: () => this, rows: "[data-id]" });
   constructor() {
@@ -49954,6 +50021,10 @@ var SliccSettings = class extends ThemedElement {
       .option[aria-disabled='true'] .name {
         color: var(--swc-neutral-subdued-content-color-default);
       }
+      .option[data-blocked] .name,
+      .option[data-blocked] .description {
+        color: var(--swc-disabled-content-color);
+      }
       .option .tag {
         justify-self: end;
         color: var(--swc-neutral-subdued-content-color-default);
@@ -50052,7 +50123,7 @@ var SliccSettings = class extends ThemedElement {
       model.settings.on("settings", settle2),
       model.settings.on("accounts", settle2),
       model.settings.on("providers", update),
-      ...model.vault ? [model.vault.on("status", update)] : []
+      ...model.vault ? [model.vault.on("status", update), model.vault.on("list", update)] : []
     ];
   }
   focus() {
@@ -50123,8 +50194,18 @@ var SliccSettings = class extends ThemedElement {
     const options2 = account.group === "mcp" ? { kind: "mcp", server: serverOf(account) } : { kind: "model", provider: account.id };
     this.#busy(id, true);
     this.failure = null;
+    const url = this.#mcpUrl(account);
     try {
       await vault.put?.(recordName(account), value, void 0, options2);
+      if (url) {
+        const server = serverOf(account);
+        const old = registrations2()[server];
+        await vault.endpoints?.({
+          ...old && old !== url ? { remove: { mcp: [{ server, url: old }] } } : {},
+          add: { mcp: [{ server, url }] }
+        });
+        register(server, url);
+      }
     } catch (error) {
       this.#busy(id, false);
       if (this.model === model) this.#refuse(id, "value", failureText(error));
@@ -50261,9 +50342,15 @@ var SliccSettings = class extends ThemedElement {
   }
   #submit(event2, account) {
     event2.preventDefault();
+    if (account.blocked) return;
     const form = event2.currentTarget;
     this.problem = null;
     this.filled = new Set([...this.filled].filter((name) => name !== "value"));
+    const url = this.#mcpUrl(account);
+    if (this.#vault(account) && url) {
+      void this.#confirmSubmit(form, account, url);
+      return;
+    }
     if (this.#vault(account)) {
       const value = take(form.querySelector("input[data-field=value]"));
       const fields2 = this.#fields(form, account);
@@ -50276,6 +50363,67 @@ var SliccSettings = class extends ThemedElement {
     const fields = this.#fields(form, account);
     if (secret && fields !== null) void this.#connectBases(account, secret, fields);
   }
+  async #confirmSubmit(form, account, url) {
+    const input = form.querySelector("input[data-field=value]");
+    const problem = valueProblem(input.value);
+    if (problem) return this.#refuse(account.id, "value", problem);
+    const fields = this.#fields(form, account);
+    if (fields === null || this.pending.has(account.id)) return;
+    const model = this.model;
+    if (!await this.#confirmUrl(url)) return;
+    if (!input.isConnected || this.model !== model) return;
+    await this.keep(account, take(input), fields);
+  }
+  #confirmUrl(url) {
+    return confirm({
+      title: `Connect to ${url}?`,
+      body: `SLICC sends this token only to ${url}.`,
+      action: "Connect",
+      variant: "confirmation"
+    });
+  }
+  #mcpUrl(account) {
+    if (account.group !== "mcp" || !this.model?.vault?.endpoints) return null;
+    return this.#baseOf(account.url) ?? null;
+  }
+  #pinned(account) {
+    const server = serverOf(account);
+    return this.model?.vault?.list()?.secrets.find(
+      (secret) => secret.kind === "mcp" && secret.server === server && secret.state !== "removed" && secret.pinned
+    )?.url;
+  }
+  #moved(account) {
+    const url = this.#mcpUrl(account);
+    const old = registrations2()[serverOf(account)] ?? this.#pinned(account);
+    return url && old && old !== url ? url : null;
+  }
+  async #reconnectMcp(account, url) {
+    const model = this.model;
+    const server = serverOf(account);
+    const old = registrations2()[server];
+    if (!await this.#confirmUrl(url)) return;
+    if (this.model !== model) return;
+    this.#busy(account.id, true);
+    this.failure = null;
+    try {
+      await model.vault?.endpoints?.({
+        ...old ? { remove: { mcp: [{ server, url: old }] } } : {},
+        add: { mcp: [{ server, url }] }
+      });
+      register(server, url);
+    } catch (error) {
+      if (this.model === model) this.failure = { id: account.id, message: failureText(error) };
+      return;
+    } finally {
+      this.#busy(account.id, false);
+    }
+    if (this.model === model) await this.connect(account.id);
+  }
+  #movedNote(account) {
+    const url = this.#moved(account);
+    if (!url) return A;
+    return b`<div class="notes"><p class="notice" data-notice="moved"><swc-icon-alert-triangle size="s" aria-hidden="true"></swc-icon-alert-triangle><span>The server moved to ${url}. Reconnect to send the token there.</span></p></div>`;
+  }
   #submitOnEnter(event2) {
     const target2 = event2.target;
     if (event2.key !== "Enter" || target2.localName !== "input") return;
@@ -50369,6 +50517,7 @@ var SliccSettings = class extends ThemedElement {
     return this.adding?.id === account.id ? "Connect" : "Save";
   }
   #ready(account) {
+    if (account.blocked) return false;
     if (!this.#offered()) return true;
     const required = (account.fields ?? []).filter((field) => field.required && !field.options);
     return ["value", ...required.map((field) => field.name)].every((name) => this.filled.has(name));
@@ -50474,8 +50623,16 @@ var SliccSettings = class extends ThemedElement {
     if (!await confirm({ title, body: body4, action: "Disconnect", variant: "confirmation" })) return;
     clearValues(this.renderRoot);
     if (this.model !== model) return;
+    const server = serverOf(account);
+    const pinned = !!this.#pinned(account);
+    const url = account.group === "mcp" ? registrations2()[server] ?? (pinned ? null : this.#mcpUrl(account)) : null;
     if (stored && !await this.#forget(account, stored)) return;
-    if (this.model === model) model?.settings.disconnect(account.id);
+    if (this.model !== model) return;
+    model?.settings.disconnect(account.id);
+    if (!url || !stored?.endpoints) return;
+    await stored.endpoints({ remove: { mcp: [{ server, url }] } }).then(() => register(server, void 0)).catch((error) => {
+      if (this.model === model) this.failure = { id: account.id, message: failureText(error) };
+    });
   }
   async #forget(account, vault) {
     this.#busy(account.id, true);
@@ -50533,12 +50690,13 @@ var SliccSettings = class extends ThemedElement {
       data-action="connect"
       accessible-label=${popup(account) ? `Sign in to ${account.provider}` : `${label} ${account.provider}`}
       ?pending=${busy}
-      ?disabled=${entering}
+      ?disabled=${entering || !!account.blocked}
       @click=${() => this.#start(account)}
     >${label}</swc-button>`;
   }
   #status(account) {
     if (this.#signingIn(account)) return "signing-in";
+    if (account.status === "connected" && account.blocked) return "unreachable";
     if (account.status === "expired" && account.auth === "api-key") return "rejected";
     if (popup(account) && account.status === "disconnected") return "needs-sign-in";
     if (popup(account) && account.status === "expired") return "sign-in-expired";
@@ -50556,11 +50714,27 @@ var SliccSettings = class extends ThemedElement {
       <span class="provider">${account.provider}</span>
       <span class="identity">${account.identity}${this.#inVault(account) ? b`<span class="kept" data-store="vault">${account.identity ? " \xB7 " : ""}${kept2(account)}</span>` : A}</span>
       <swc-status-light class="state" variant=${variant}>${label}</swc-status-light>
-      ${this.#removable(account) ? b`<div class="actions">${this.#action(account)}${this.#removeButton(account)}</div>` : this.#action(account)}
+      ${this.#actions(account)}
     </div>
     ${this.#offered() ? this.#rowNotes(account) : A}
+    ${this.#movedNote(account)}
     ${this.adding?.id === account.id ? A : b`${this.#key(account)}${failure2}`}`;
   }
+  #actions(account) {
+    const moved2 = account.status === "connected" ? this.#moved(account) : null;
+    if (moved2)
+      return b`<div class="actions"><swc-button
+          size="m"
+          variant="accent"
+          data-action="reconnect-mcp"
+          accessible-label=${`Reconnect ${account.provider}`}
+          ?pending=${this.pending.has(account.id)}
+          @click=${() => this.#reconnectMcp(account, moved2)}
+        >Reconnect</swc-button>${this.#action(account)}</div>`;
+    if (this.#removable(account))
+      return b`<div class="actions">${this.#action(account)}${this.#removeButton(account)}</div>`;
+    return this.#action(account);
+  }
   #removable(account) {
     return !!this.#offered() && !!this.model?.settings.remove && account.group !== "mcp";
   }
@@ -50578,6 +50752,14 @@ var SliccSettings = class extends ThemedElement {
         ><swc-icon-delete slot="icon"></swc-icon-delete></swc-action-button
       ><swc-tooltip for=${id} placement="top">${label}</swc-tooltip>`;
   }
+  async #closeTip(id) {
+    const tip = this.renderRoot.querySelector(
+      `swc-tooltip[for="${CSS.escape(id)}"]`
+    );
+    if (!tip) return;
+    tip.open = false;
+    await tip.updateComplete;
+  }
   async #remove(account) {
     const model = this.model;
     const body4 = removeBodies[account.auth ?? ""] ?? "Its key is deleted from the vault. Models from it stop working.";
@@ -50590,6 +50772,7 @@ var SliccSettings = class extends ThemedElement {
     const keyed = account.store === "vault" && account.auth === "api-key" && !!vault?.remove;
     if (keyed && !await this.#forget(account, vault)) return;
     if (this.model !== model) return;
+    await this.#closeTip(`remove-${account.id}`);
     this.#busy(account.id, true);
     this.failure = null;
     try {
@@ -50603,9 +50786,25 @@ var SliccSettings = class extends ThemedElement {
     this.focusOn("[data-action=add-provider]");
     for (const field of account.fields ?? []) this.#bases.delete(`${account.id} ${field.name}`);
   }
-  #notice(needs, size4 = "long") {
+  #notice(row, size4 = "long") {
+    const needs = row.blocked;
     if (needs !== "cors-free-transport") return A;
-    return b`<p class="notice" data-notice=${needs}><swc-icon-alert-triangle size="s" aria-hidden="true"></swc-icon-alert-triangle><span>${corsNotice[size4]}</span></p>`;
+    return b`<p class="notice" data-notice=${needs} data-blocked><swc-icon-alert-triangle size="s" aria-hidden="true"></swc-icon-alert-triangle><span>${corsNotice[size4]} <a class="swc-Link" href="#network" data-action="setup-network" aria-label="Set up the SLICC extension or CLI" @click=${(event2) => this.#setUp(event2)}>Set up</a></span></p>`;
+  }
+  #setUp(event2) {
+    event2.preventDefault();
+    event2.stopPropagation();
+    if (this.picking) {
+      this.#away = true;
+      this.#closePicker();
+    }
+    this.dispatchEvent(
+      new CustomEvent("show-surface", {
+        detail: { id: "network", section: "whole" },
+        bubbles: true,
+        composed: true
+      })
+    );
   }
   #signingNote(account) {
     const key2 = `settings:${account.id}`;
@@ -50616,7 +50815,7 @@ var SliccSettings = class extends ThemedElement {
     return b`<p class="hint" role="status" data-signing>${signInText(this.#waits.waited(key2))}</p>`;
   }
   #rowNotes(account) {
-    const notice = this.#notice(account.needs);
+    const notice = this.#notice(account);
     const signing = this.adding?.id === account.id ? A : this.#signingNote(account);
     if (notice === A && signing === A) return A;
     return b`<div class="notes">${notice}${signing}</div>`;
@@ -50653,6 +50852,9 @@ var SliccSettings = class extends ThemedElement {
     this.query = "";
     const landing = this.#landing;
     this.#landing = null;
+    const away2 = this.#away;
+    this.#away = false;
+    if (away2) return;
     void this.updateComplete.then(() => {
       const root2 = this.renderRoot;
       const row = landing ? root2.querySelector(`.account[data-id="${CSS.escape(landing)}"] swc-button`) : null;
@@ -50664,7 +50866,7 @@ var SliccSettings = class extends ThemedElement {
     this.#closePicker();
   }
   #choose(option2) {
-    if (this.#added(option2.id)) return;
+    if (option2.blocked || this.#added(option2.id)) return;
     this.adding = option2;
     this.failure = null;
     if (option2.auth === "api-key" || option2.auth === "fields") {
@@ -50703,11 +50905,13 @@ var SliccSettings = class extends ThemedElement {
     if (event2.key !== "Enter") return;
     event2.preventDefault();
     const first2 = matchProviders(this.#offered() ?? [], this.query).find(
-      (option2) => !this.#added(option2.id)
+      (option2) => !option2.blocked && !this.#added(option2.id)
     );
     if (first2) this.#choose(first2);
   }
   #optionKey(event2, option2) {
+    const inner = event2.target !== event2.currentTarget;
+    if (inner && (event2.key === "Enter" || event2.key === " ")) return;
     const options2 = this.#options();
     const at = options2.indexOf(event2.currentTarget);
     const moves = {
@@ -50736,14 +50940,15 @@ var SliccSettings = class extends ThemedElement {
       tabindex="-1"
       data-provider=${option2.id}
       data-auth=${option2.auth}
-      aria-disabled=${added ? "true" : "false"}
+      ?data-blocked=${!!option2.blocked}
+      aria-disabled=${added || option2.blocked ? "true" : "false"}
       @click=${() => this.#choose(option2)}
       @keydown=${(event2) => this.#optionKey(event2, option2)}
     >
       <span class="name">${option2.name}</span>
       <span class="tag">${added ? b`<span class="added" data-added><swc-icon-checkmark size="s" aria-hidden="true"></swc-icon-checkmark>Added</span>` : authHints[option2.auth]}</span>
       ${option2.description ? b`<span class="description">${option2.description}</span>` : A}
-      ${this.#notice(option2.needs, "short")}
+      ${this.#notice(option2, "short")}
     </div>`;
   }
   #pickStep(offered) {
@@ -50768,23 +50973,24 @@ var SliccSettings = class extends ThemedElement {
       ${signing ? this.#signingNote(account) : A}
       <div class="buttons">
         ${cancel ? b`<swc-button size="m" variant="secondary" data-action="cancel-sign-in" @click=${() => this.#stopSigningIn(account)}>Cancel</swc-button>` : A}
-        <swc-button size="m" variant="accent" data-action="sign-in" ?pending=${signing} @click=${() => this.connect(account.id)}>${signing ? "Signing in\u2026" : "Sign in"}</swc-button>
+        <swc-button size="m" variant="accent" data-action="sign-in" ?pending=${signing} ?disabled=${!!account.blocked} @click=${() => this.connect(account.id)}>${signing ? "Signing in\u2026" : "Sign in"}</swc-button>
         ${signing ? A : this.#leave(account)}
       </div>`;
   }
   #localStep(account) {
     return b`<p class="hint">SLICC connects to ${account.provider} on this device.</p>
       <div class="buttons">
-        <swc-button size="m" variant="accent" data-action="connect" ?pending=${this.pending.has(account.id)} @click=${() => this.connect(account.id)}>Connect</swc-button>
+        <swc-button size="m" variant="accent" data-action="connect" ?pending=${this.pending.has(account.id)} ?disabled=${!!account.blocked} @click=${() => this.connect(account.id)}>Connect</swc-button>
         ${this.#leave(account)}
       </div>`;
   }
-  #connectStep(option2) {
+  #connectStep(adding) {
+    const option2 = this.#offered()?.find((candidate) => candidate.id === adding.id) ?? adding;
     const account = this.#added(option2.id) ?? draft(option2);
     const step = option2.auth === "oauth" ? this.#signInStep(account) : option2.auth === "local" ? this.#localStep(account) : this.#key(account);
     return b`<div class="step" data-step=${option2.auth} data-provider=${option2.id}>
       ${option2.description ? b`<p class="lead">${option2.description}</p>` : A}
-      ${this.#notice(option2.needs)}
+      ${this.#notice(option2)}
       ${step}
       ${this.failure?.id === option2.id ? b`<div class="failure" role="alert"><swc-icon-alert-triangle size="s" aria-hidden="true"></swc-icon-alert-triangle><span>${this.failure.message}</span></div>` : A}
     </div>`;