@ai-ecoverse/slicc-spectrum 1.102.0 → 1.103.0

package/dist/slicc-ui.js

@@ -10435,6 +10435,9 @@ var o55 = class extends a10 {
 };
 e25("swc-icon-new", o55);
 
+// node_modules/@adobe/spectrum-wc/dist/link.css
+var link_default = '/**\n * Copyright 2026 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the "License");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/**\n * Standalone link presentation for native `<a href>` elements.\n *\n * Default anchor appearance inside `.swc-Typography--prose` and\n * `.swc-Typography--links` ships with `typography.css` (generated). Import this\n * stylesheet when authors need explicit BEM modifiers on anchors.\n *\n */\n\n.swc-Link {\n  inline-size: -moz-fit-content;\n  inline-size: fit-content;\n  font-family: var(--swc-sans-font-family-stack);\n  font-size: var(--swc-font-size-100);\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1.30;\n  color: var(--swc-link-text-color-default, var(--swc-accent-color-900));\n  -webkit-text-decoration: underline;\n  text-decoration: underline;\n  text-decoration-thickness: 1px;\n  text-underline-offset: 1px;\n  transition: color 130ms ease-in-out;\n\n  &:hover {\n    color: var(--swc-link-text-color-hover, var(--swc-accent-color-1000));\n  }\n\n  &:active {\n    color: var(--swc-link-text-color-down, var(--swc-accent-color-1000));\n  }\n\n  &:focus-visible {\n    color: var(--swc-link-text-color-focus, var(--swc-accent-color-1000));\n    border-radius: 4px;\n    outline: 2px solid var(--swc-link-focus-indicator-color, var(--swc-blue-800));\n    outline-offset: 2px;\n  }\n\n  &:lang(ja),\n  &:lang(zh),\n  &:lang(ko) {\n    line-height: 1.50;\n  }\n}\n\n.swc-Link--standalone {\n  font-weight: 500;\n}\n\n.swc-Link--secondary {\n  --swc-link-text-color-default: var(--swc-gray-800);\n  --swc-link-text-color-hover: var(--swc-gray-900);\n  --swc-link-text-color-down: var(--swc-gray-900);\n  --swc-link-text-color-focus: var(--swc-gray-900);\n}\n\n.swc-Link--staticWhite {\n  --swc-link-text-color-default: var(--swc-white);\n  --swc-link-text-color-hover: var(--swc-white);\n  --swc-link-text-color-down: var(--swc-white);\n  --swc-link-text-color-focus: var(--swc-white);\n  --swc-link-focus-indicator-color: var(--swc-white);\n}\n\n.swc-Link--staticBlack {\n  --swc-link-text-color-default: var(--swc-black);\n  --swc-link-text-color-hover: var(--swc-black);\n  --swc-link-text-color-down: var(--swc-black);\n  --swc-link-text-color-focus: var(--swc-black);\n  --swc-link-focus-indicator-color: var(--swc-black);\n}\n\n.swc-Link--quiet.swc-Link--standalone {\n  -webkit-text-decoration: none;\n  text-decoration: none;\n}\n\n.swc-Link--quiet.swc-Link--standalone:hover {\n  -webkit-text-decoration: underline;\n  text-decoration: underline;\n}\n';
+
 // src/app/command.ts
 var toShow = "Show the full command to allow it.";
 var toScroll = "Scroll to the end of the command to allow it.";
@@ -21436,6 +21439,94 @@ var markdownCss = i`
   }
 `;
 
+// node_modules/@adobe/spectrum-wc-icons/dist/Copy.js
+function e98() {
+  return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="var(--swc-icon-color, currentColor)" d="M11.75 18h-7.5C3.01 18 2 16.99 2 15.75v-7.5C2 7.01 3.01 6 4.25 6a.75.75 0 0 1 0 1.5.75.75 0 0 0-.75.75v7.5c0 .413.337.75.75.75h7.5c.413 0 .75-.337.75-.75a.75.75 0 0 1 1.5 0c0 1.24-1.01 2.25-2.25 2.25m-5-13A.75.75 0 0 1 6 4.25C6 3.01 7.01 2 8.25 2a.75.75 0 0 1 0 1.5.75.75 0 0 0-.75.75.75.75 0 0 1-.75.75M13 3.5h-2A.75.75 0 0 1 11 2h2a.75.75 0 0 1 0 1.5"/><path fill="var(--swc-icon-color, currentColor)" d="M13 14h-2a.75.75 0 0 1 0-1.5h2a.75.75 0 0 1 0 1.5m2.75 0a.75.75 0 0 1 0-1.5c.413 0 .75-.337.75-.75a.75.75 0 0 1 1.5 0c0 1.24-1.01 2.25-2.25 2.25m1.5-9a.75.75 0 0 1-.75-.75.75.75 0 0 0-.75-.75.75.75 0 0 1 0-1.5C16.99 2 18 3.01 18 4.25a.75.75 0 0 1-.75.75m0 4.75A.75.75 0 0 1 16.5 9V7A.75.75 0 0 1 18 7v2a.75.75 0 0 1-.75.75m-10.5 0A.75.75 0 0 1 6 9V7a.75.75 0 0 1 1.5 0v2a.75.75 0 0 1-.75.75M8.25 14C7.01 14 6 12.99 6 11.75a.75.75 0 0 1 1.5 0c0 .413.337.75.75.75a.75.75 0 0 1 0 1.5"/></svg>';
+}
+
+// node_modules/@adobe/spectrum-wc-icons/dist/swc-icon-copy.js
+var o64 = class extends a10 {
+  static get styles() {
+    return [t40];
+  }
+  render() {
+    return b`
+      ${o16(e98())}
+    `;
+  }
+};
+e25("swc-icon-copy", o64);
+
+// src/app/reach.ts
+var command = "curl -fsSL https://get.sliccy.ai/slicc | sh";
+var startCommand = "slicc";
+var nodeCommand = "npx sliccy@next";
+var reachStyles = i`
+  .command {
+    display: flex;
+    align-items: center;
+    gap: var(--swc-spacing-100);
+    padding: var(--swc-spacing-75) var(--swc-spacing-75) var(--swc-spacing-75) var(--swc-spacing-200);
+    border-radius: var(--swc-corner-radius-medium-default);
+    background: var(--swc-background-layer-1-color);
+  }
+  code {
+    flex: 1;
+    min-width: 0;
+    overflow-wrap: break-word;
+    word-break: normal;
+    font-family: var(--swc-code-font-family-stack);
+    font-size: var(--swc-font-size-75);
+    color: var(--swc-code-color);
+    user-select: all;
+  }
+  .commands {
+    display: grid;
+    gap: var(--swc-spacing-100);
+  }
+  .commands p {
+    margin: 0;
+    font-size: var(--swc-font-size-75);
+    color: var(--swc-neutral-subdued-content-color-default);
+  }
+`;
+function block2(text5, copied, copy, first2 = false) {
+  const done2 = copied === text5;
+  return b`<div class="command" data-command=${text5}>
+      <code>${breakable(text5)}</code>
+      <swc-action-button size="s" quiet data-action=${first2 ? "copy-command" : A} accessible-label=${done2 ? "Copied" : `Copy ${text5}`} @click=${() => copy(text5)}>
+        <swc-icon-copy slot="icon"></swc-icon-copy>${done2 ? "Copied" : "Copy"}
+      </swc-action-button>
+    </div>`;
+}
+function breakable(text5) {
+  return text5.split("/").map(
+    (part2, index2, parts3) => b`${part2}${index2 < parts3.length - 1 ? b`/<wbr />` : A}`
+  );
+}
+function reach({ intro, extensionUrl, copied, uncopied, copy }) {
+  return b`<p>${intro}</p>
+    ${extensionUrl ? b`<p><a class="swc-Link" href=${extensionUrl} target="_blank" rel="noopener noreferrer" data-action="install-extension">Install the Chrome extension</a></p>` : A}
+    <p>To run slicc, enter this in a terminal:</p>
+    <div class="commands">
+      ${block2(command, copied, copy, true)}
+      ${block2(startCommand, copied, copy)}
+    </div>
+    <div class="commands" data-commands="node">
+      <p>With Node:</p>
+      ${block2(nodeCommand, copied, copy)}
+    </div>
+    ${uncopied ? b`<div class="error" role="alert" data-error="copy"><swc-icon-alert-triangle size="s" aria-hidden="true"></swc-icon-alert-triangle><span>Couldn’t copy. Select the command and copy it.</span></div>` : A}`;
+}
+async function copyText(text5) {
+  try {
+    await globalThis.navigator.clipboard.writeText(text5);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
 // src/app/sign-in.ts
 var continuing = "Continue in the sign-in window that opened.";
 var closed = "Closed the sign-in window? Cancel, then Log in again.";
@@ -21463,6 +21554,116 @@ var SignInWaits = class {
     this.#since.delete(key2);
   }
 };
+var signInCopy = { shownFor: 2e3 };
+var SignInCopies = class {
+  #copied = /* @__PURE__ */ new Map();
+  #update;
+  constructor(update) {
+    this.#update = update;
+  }
+  state(key2) {
+    return this.#copied.get(key2)?.state;
+  }
+  async copy(key2, code3) {
+    let state2 = "done";
+    try {
+      await globalThis.navigator.clipboard.writeText(code3);
+    } catch {
+      state2 = "failed";
+    }
+    const entry = { state: state2 };
+    this.#copied.set(key2, entry);
+    this.#update();
+    setTimeout(() => {
+      if (this.#copied.get(key2) !== entry) return;
+      this.#copied.delete(key2);
+      this.#update();
+    }, signInCopy.shownFor);
+  }
+};
+var signInHosts = /* @__PURE__ */ new Map([
+  ["openai-codex", ["auth.openai.com"]],
+  ["xai", ["accounts.x.ai"]],
+  ["kimi-coding", ["www.kimi.com"]]
+]);
+function signInPage(id, url) {
+  let page;
+  try {
+    page = new URL(url);
+  } catch {
+    return null;
+  }
+  const plain3 = page.protocol === "https:" && !page.username && !page.password && !page.port;
+  return plain3 && signInHosts.get(id)?.includes(page.hostname) ? page.href : null;
+}
+var unknownPage = "This sign-in page isn\u2019t one SLICC knows. Check the address before you go there.";
+function pageLink(url, known) {
+  if (known)
+    return b`<a class="swc-Link swc-Link--standalone swc-Link--quiet" href=${known} target="_blank" rel="noopener noreferrer" data-action="open-sign-in">Open the sign-in page</a>`;
+  if (!url) return A;
+  return b`<p class="unknown" data-id="sign-in-unknown"><swc-icon-alert-triangle size="s" aria-hidden="true"></swc-icon-alert-triangle><span>${unknownPage}</span></p>
+    <span class="address" data-id="sign-in-url">${breakable(url)}</span>`;
+}
+var copyLabels = { done: "Copied", failed: "Couldn\u2019t copy" };
+function codeBlock(code3, copied, copy, size4) {
+  const label = copied ? copyLabels[copied] : "Copy";
+  return b`<p class="enter">Enter this code on the sign-in page:</p>
+    <div class="code-row">
+      <span class="code" data-id="sign-in-code">${code3}</span>
+      <swc-action-button size=${size4} quiet data-action="copy-sign-in-code" accessible-label=${copied ? label : "Copy the code"} @click=${() => copy(code3)}><swc-icon-copy slot="icon"></swc-icon-copy>${label}</swc-action-button>
+      <span class="sr" role="status">${copied ? label : ""}</span>
+    </div>`;
+}
+function signInDetails(id, signIn, copied, copy, size4 = "m") {
+  if (!(signIn?.code || signIn?.url)) return A;
+  return b`<div class="sign-in" data-sign-in>
+    ${signIn.code ? codeBlock(signIn.code, copied, copy, size4) : A}
+    ${pageLink(signIn.url, signInPage(id, signIn.url))}
+  </div>`;
+}
+var signInCss = i`
+  .sign-in {
+    display: grid;
+    justify-items: start;
+    gap: var(--swc-spacing-75);
+  }
+  .sign-in .enter {
+    margin: 0;
+  }
+  .sign-in .code-row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--swc-spacing-100);
+  }
+  .sign-in .unknown {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--swc-spacing-75);
+    margin: 0;
+    color: var(--swc-neutral-subdued-content-color-default);
+    --swc-icon-color: var(--swc-notice-visual-color);
+  }
+  .sign-in .unknown swc-icon-alert-triangle {
+    flex: none;
+    margin-block-start: var(--swc-spacing-50);
+  }
+  .sign-in .address {
+    font-family: var(--swc-code-font-family-stack);
+    color: var(--swc-neutral-content-color-default);
+    overflow-wrap: anywhere;
+    user-select: text;
+  }
+  .sign-in .code {
+    font-family: var(--swc-code-font-family-stack);
+    font-size: var(--swc-heading-size-s);
+    font-weight: var(--swc-bold-font-weight);
+    line-height: var(--swc-heading-line-height);
+    color: var(--swc-neutral-content-color-default);
+    overflow-wrap: anywhere;
+    user-select: all;
+  }
+`;
 
 // src/app/messages.ts
 var alone = { calls: [], live: false };
@@ -21604,6 +21805,7 @@ function errorCard(item2, handlers) {
     ${resolved ? A : b`<span class="sr">Error: </span>`}<span class="lead">${title}</span>
     ${text5 ? b`<span class="detail" role=${login ? "status" : A}>${text5}</span>` : A}
     ${fix ? b`<div class="fix" aria-live="off">${fixButton(fix, item2, handlers, login)}</div>` : A}
+    ${signing ? signInDetails(item2.account, login.signIn, login.copied, (code3) => handlers.copySignIn?.(item2.account, id, code3), "s") : A}
     ${failure2 ? b`<div class="help" data-error="login"><sp-help-text size="s" variant="negative" icon>${failure2}</sp-help-text><swc-action-button size="s" quiet data-action="settings" @click=${() => handlers.action("settings", item2.id, item2.account)}>Open settings</swc-action-button></div>` : A}
   </div>`;
 }
@@ -22012,6 +22214,7 @@ function assistant(message, name, model, handlers, showThinking, suggestion = nu
       action: (action, _id, account) => handlers.action(action, message.id, account),
       login: (account) => handlers.login?.(account, message.id),
       cancelLogin: (account) => handlers.cancelLogin?.(account, message.id),
+      copySignIn: (account, _id, code3) => handlers.copySignIn?.(account, message.id, code3),
       dropping: () => handlers.dropping(message.id)
     },
     showThinking
@@ -22778,6 +22981,9 @@ var messageCss = i`
   .error-card swc-button {
     white-space: nowrap;
   }
+  .error-card .sign-in {
+    grid-column: 2 / -1;
+  }
   .error-card .help {
     grid-column: 2 / -1;
     display: flex;
@@ -23912,13 +24118,13 @@ var SliccComposer = class extends ThemedElement {
     globalThis.removeEventListener("blur", this.#release);
     clearValues(this.renderRoot);
     const kept3 = this.#waiting.draft?.attachments;
-    const held = [
+    const held2 = [
       this.attachments === kept3 ? [] : this.attachments,
       ...[...this.#drafts.values()].map((draft2) => draft2.attachments)
     ];
-    if (held.flat().some((attachment2) => attachment2.url?.startsWith("blob:")))
+    if (held2.flat().some((attachment2) => attachment2.url?.startsWith("blob:")))
       this.#abandon = setTimeout(() => {
-        for (const attachments of held) release(attachments);
+        for (const attachments of held2) release(attachments);
       }, linger);
   }
   updated(changed2) {
@@ -24581,10 +24787,10 @@ ${this.value}` : text5;
     if (!hold2) return A;
     const locked = hold2.reason === "locked";
     const vault = this.model?.vault;
-    const held = hold2.held === 1 ? "1 tool result held" : `${hold2.held} tool results held`;
+    const held2 = hold2.held === 1 ? "1 tool result held" : `${hold2.held} tool results held`;
     return b`<div class="hold" role="status" data-hold=${hold2.reason}>
       ${locked ? b`<swc-icon-lock size="s" aria-hidden="true"></swc-icon-lock>` : b`<swc-progress-circle size="s" label="Waiting" aria-hidden="true"></swc-progress-circle>`}
-      <span class="text">${locked ? "Unlock the vault to continue" : "Waiting for the vault"}${hold2.held ? b`<span class="held"> · ${held}</span>` : A}</span>
+      <span class="text">${locked ? "Unlock the vault to continue" : "Waiting for the vault"}${hold2.held ? b`<span class="held"> · ${held2}</span>` : A}</span>
       ${locked && vault ? b`<slicc-vault-button
               data-action="unlock-vault"
               .vault=${vault}
@@ -24628,18 +24834,18 @@ ${this.value}` : text5;
   #starter(message) {
     const lost2 = message.lost ?? [];
     const empty5 = !(message.text || message.attachments.length);
-    const held = !empty5 && lost2.length > 0;
-    const alert = empty5 || held;
+    const held2 = !empty5 && lost2.length > 0;
+    const alert = empty5 || held2;
     const files = message.attachments.length;
-    return b`<li class="queued" data-id=${message.id} data-mode="starting" ?data-unsent=${empty5} ?data-held=${held}>
+    return b`<li class="queued" data-id=${message.id} data-mode="starting" ?data-unsent=${empty5} ?data-held=${held2}>
       ${alert ? b`<swc-icon-alert-triangle size="s" aria-hidden="true"></swc-icon-alert-triangle>` : b`<swc-icon-clock size="s" aria-hidden="true"></swc-icon-clock>`}
       ${message.text ? A : b`<swc-icon-file size="xs" aria-hidden="true"></swc-icon-file>`}
       <span class="body">
-        <span class="text"><span class="sr">${held ? "Held: " : "Queued: "}</span>${message.text || names(message.attachments) || names(lost2)}</span>
-        ${lost2.length ? b`<span class="lost" data-lost title=${names(lost2)}><span class="sr">, </span>${held ? notKept(lost2) : "Not kept after reload"}${lost2.length > 1 ? b`<span class="sr"> (${names(lost2)})</span>` : A}</span>` : A}
+        <span class="text"><span class="sr">${held2 ? "Held: " : "Queued: "}</span>${message.text || names(message.attachments) || names(lost2)}</span>
+        ${lost2.length ? b`<span class="lost" data-lost title=${names(lost2)}><span class="sr">, </span>${held2 ? notKept(lost2) : "Not kept after reload"}${lost2.length > 1 ? b`<span class="sr"> (${names(lost2)})</span>` : A}</span>` : A}
       </span>
       ${message.text && files ? b`<span class="next" data-files><swc-icon-file size="xs" aria-hidden="true"></swc-icon-file><span class="sr">, </span>${files === 1 ? "1 file" : `${files} files`}</span>` : A}
-      ${held ? b`<swc-action-button size="s" quiet data-action="restore-starting" accessible-label=${`Put back: ${message.text}`} @click=${() => this.#putBack(message)}>Put back</swc-action-button>` : b`<span class="next">${empty5 ? "Not sent. Attach the files again." : "Sent when the agent starts"}</span>`}
+      ${held2 ? b`<swc-action-button size="s" quiet data-action="restore-starting" accessible-label=${`Put back: ${message.text}`} @click=${() => this.#putBack(message)}>Put back</swc-action-button>` : b`<span class="next">${empty5 ? "Not sent. Attach the files again." : "Sent when the agent starts"}</span>`}
       <swc-close-button size="s" data-action="unqueue" accessible-label=${alert ? "Dismiss" : "Remove from queue"} @click=${() => this.#unwait(message.id)}></swc-close-button>
     </li>`;
   }
@@ -24687,7 +24893,7 @@ ${this.value}` : text5;
     const canSend = !!this.value.trim() || this.attachments.some((attachment2) => !attachment2.error);
     const pushToTalk = this.model?.settings.get().pushToTalk ?? false;
     const talk = !!speech();
-    const held = this.#held();
+    const held2 = this.#held();
     const starting = this.#starting();
     const back = new Set(
       this.attachments.filter((attachment2) => !attachment2.error).map((attachment2) => attachment2.name)
@@ -24707,8 +24913,8 @@ ${this.value}` : text5;
           send-label=${busy ? "Steer" : "Send"}
           max-rows="10"
           ?generating=${busy && !canSend}
-          ?disabled=${!!held}
-          placeholder=${held ? `Reconnecting to ${held}\u2026` : starting ? starting : suggestion ? `${suggestion}  (Tab)` : `Message ${agent?.name ?? ""}`}
+          ?disabled=${!!held2}
+          placeholder=${held2 ? `Reconnecting to ${held2}\u2026` : starting ? starting : suggestion ? `${suggestion}  (Tab)` : `Message ${agent?.name ?? ""}`}
           .value=${l(this.value)}
           @keydown=${this.#keys}
           @swc-prompt-field-input=${this.#input}
@@ -25248,6 +25454,8 @@ var SliccChat = class _SliccChat extends ThemedElement {
     markdownCss,
     messageCss,
     clampCss,
+    r(link_default),
+    signInCss,
     i`
       :host {
         position: relative;
@@ -25518,6 +25726,9 @@ var SliccChat = class _SliccChat extends ThemedElement {
     action: (action, messageId, account) => this.#action(action, messageId, account),
     login: (account, messageId) => this.#loginState(account, messageId),
     cancelLogin: (account, messageId) => this.#cancelLogin(account, messageId),
+    copySignIn: (account, messageId, code3) => {
+      void this.#copies.copy(`${messageId}:${account}`, code3);
+    },
     dropping: (messageId) => failedTurns(this.model.agent.messages(this.#id()), messageId).length,
     open: (path2) => this.dispatchEvent(
       new CustomEvent("open-file", { detail: { path: path2 }, bubbles: true, composed: true })
@@ -25798,6 +26009,7 @@ var SliccChat = class _SliccChat extends ThemedElement {
   }
   #logins = /* @__PURE__ */ new Map();
   #waits = new SignInWaits(() => this.requestUpdate());
+  #copies = new SignInCopies(() => this.requestUpdate());
   #loginState(accountId, messageId) {
     const settings = this.model.settings;
     const account = settings.accounts().find((candidate) => candidate.id === accountId);
@@ -25806,7 +26018,14 @@ var SliccChat = class _SliccChat extends ThemedElement {
     const window2 = account?.auth === "oauth";
     const key2 = `${messageId}:${accountId}`;
     if (account?.status === "signing-in" || local2?.pending)
-      return { state: "signing-in", cancel, window: window2, waited: window2 && this.#waits.waited(key2) };
+      return {
+        state: "signing-in",
+        cancel,
+        window: window2,
+        waited: window2 && this.#waits.waited(key2),
+        signIn: account?.status === "signing-in" ? account.signIn : void 0,
+        copied: this.#copies.state(key2)
+      };
     this.#waits.done(key2);
     if (account?.status === "connected") return { state: "connected", provider: account.provider };
     return { state: "idle", error: local2?.error };
@@ -26074,22 +26293,22 @@ var SliccChat = class _SliccChat extends ThemedElement {
 };
 
 // node_modules/@adobe/spectrum-wc-icons/dist/FolderAdd.js
-function e98() {
+function e99() {
   return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="var(--swc-icon-color, currentColor)" d="M8.373 15.498H3.25a.75.75 0 0 1-.75-.75v-8.25h14.25a.75.75 0 0 1 .75.75V9.07a.75.75 0 0 0 1.5 0V7.248c0-1.24-1.01-2.25-2.25-2.25h-5.964a.75.75 0 0 1-.566-.258L8.515 2.773a2.25 2.25 0 0 0-1.7-.775H3.25C2.01 1.998 1 3.008 1 4.248v10.5c0 1.24 1.01 2.25 2.25 2.25h5.123a.75.75 0 0 0 0-1.5m-5.123-12h3.565a.75.75 0 0 1 .567.258l1.076 1.242H2.5v-.75a.75.75 0 0 1 .75-.75"/><path fill="var(--swc-icon-color, currentColor)" d="M15 10.498a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9m2.5 5.125h-1.875v1.875a.625.625 0 1 1-1.25 0v-1.875H12.5a.625.625 0 1 1 0-1.25h1.875v-1.875a.625.625 0 1 1 1.25 0v1.875H17.5a.625.625 0 1 1 0 1.25"/></svg>';
 }
 
 // node_modules/@adobe/spectrum-wc-icons/dist/swc-icon-folder-add.js
-var o64 = class extends a10 {
+var o65 = class extends a10 {
   static get styles() {
     return [t40];
   }
   render() {
     return b`
-      ${o16(e98())}
+      ${o16(e99())}
     `;
   }
 };
-e25("swc-icon-folder-add", o64);
+e25("swc-icon-folder-add", o65);
 
 // src/app/search.ts
 var searchCss = i`
@@ -26768,7 +26987,7 @@ var SliccFileView = class extends ThemedElement {
 var t83 = i`:host([indeterminate]) .swc-LinearProgress-fill{inline-size:100%;min-inline-size:0;transform-origin:left;transition:none;animation:indeterminate-loop-ltr 1s cubic-bezier(.45,0,.4,1) infinite;will-change:transform;&:dir(rtl){animation-name:indeterminate-loop-rtl}}@keyframes indeterminate-loop-ltr{0%{transform:translate(-70%) scaleX(.7)}to{transform:translate(100%) scaleX(.7)}}@keyframes indeterminate-loop-rtl{0%{transform:translate(100%) scaleX(.7)}to{transform:translate(-70%) scaleX(.7)}}@media(prefers-reduced-motion:reduce){:host([indeterminate]) .swc-LinearProgress-fill{animation-duration:15s;animation-timing-function:linear}}`;
 
 // node_modules/@adobe/spectrum-wc-core/dist/components/progress-bar/ProgressBar.base.js
-var o65 = class extends m3(i12(i9, {
+var o66 = class extends m3(i12(i9, {
   validSizes: s6,
   defaultSize: "m"
 })) {
@@ -26779,10 +26998,10 @@ var o65 = class extends m3(i12(i9, {
 e24([n({
   type: Boolean,
   reflect: true
-})], o65.prototype, "indeterminate", void 0);
+})], o66.prototype, "indeterminate", void 0);
 
 // node_modules/@adobe/spectrum-wc/dist/components/progress-bar/ProgressBar.js
-var o66 = class extends o65 {
+var o67 = class extends o66 {
   static get styles() {
     return [t26, t83];
   }
@@ -26831,25 +27050,7 @@ var o66 = class extends o65 {
 };
 
 // node_modules/@adobe/spectrum-wc/dist/components/progress-bar/swc-progress-bar.js
-e25("swc-progress-bar", o66);
-
-// node_modules/@adobe/spectrum-wc-icons/dist/Copy.js
-function e99() {
-  return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="var(--swc-icon-color, currentColor)" d="M11.75 18h-7.5C3.01 18 2 16.99 2 15.75v-7.5C2 7.01 3.01 6 4.25 6a.75.75 0 0 1 0 1.5.75.75 0 0 0-.75.75v7.5c0 .413.337.75.75.75h7.5c.413 0 .75-.337.75-.75a.75.75 0 0 1 1.5 0c0 1.24-1.01 2.25-2.25 2.25m-5-13A.75.75 0 0 1 6 4.25C6 3.01 7.01 2 8.25 2a.75.75 0 0 1 0 1.5.75.75 0 0 0-.75.75.75.75 0 0 1-.75.75M13 3.5h-2A.75.75 0 0 1 11 2h2a.75.75 0 0 1 0 1.5"/><path fill="var(--swc-icon-color, currentColor)" d="M13 14h-2a.75.75 0 0 1 0-1.5h2a.75.75 0 0 1 0 1.5m2.75 0a.75.75 0 0 1 0-1.5c.413 0 .75-.337.75-.75a.75.75 0 0 1 1.5 0c0 1.24-1.01 2.25-2.25 2.25m1.5-9a.75.75 0 0 1-.75-.75.75.75 0 0 0-.75-.75.75.75 0 0 1 0-1.5C16.99 2 18 3.01 18 4.25a.75.75 0 0 1-.75.75m0 4.75A.75.75 0 0 1 16.5 9V7A.75.75 0 0 1 18 7v2a.75.75 0 0 1-.75.75m-10.5 0A.75.75 0 0 1 6 9V7a.75.75 0 0 1 1.5 0v2a.75.75 0 0 1-.75.75M8.25 14C7.01 14 6 12.99 6 11.75a.75.75 0 0 1 1.5 0c0 .413.337.75.75.75a.75.75 0 0 1 0 1.5"/></svg>';
-}
-
-// node_modules/@adobe/spectrum-wc-icons/dist/swc-icon-copy.js
-var o67 = class extends a10 {
-  static get styles() {
-    return [t40];
-  }
-  render() {
-    return b`
-      ${o16(e99())}
-    `;
-  }
-};
-e25("swc-icon-copy", o67);
+e25("swc-progress-bar", o67);
 
 // src/app/disclosure.ts
 var chevron = b`<swc-icon-chevron-right class="chevron" size="s" aria-hidden="true"></swc-icon-chevron-right>`;
@@ -27641,76 +27842,6 @@ var SliccFreezer = class extends ModelElement {
   }
 };
 
-// src/app/reach.ts
-var command = "curl -fsSL https://get.sliccy.ai/slicc | sh";
-var startCommand = "slicc";
-var nodeCommand = "npx sliccy@next";
-var reachStyles = i`
-  .command {
-    display: flex;
-    align-items: center;
-    gap: var(--swc-spacing-100);
-    padding: var(--swc-spacing-75) var(--swc-spacing-75) var(--swc-spacing-75) var(--swc-spacing-200);
-    border-radius: var(--swc-corner-radius-medium-default);
-    background: var(--swc-background-layer-1-color);
-  }
-  code {
-    flex: 1;
-    min-width: 0;
-    overflow-wrap: break-word;
-    word-break: normal;
-    font-family: var(--swc-code-font-family-stack);
-    font-size: var(--swc-font-size-75);
-    color: var(--swc-code-color);
-    user-select: all;
-  }
-  .commands {
-    display: grid;
-    gap: var(--swc-spacing-100);
-  }
-  .commands p {
-    margin: 0;
-    font-size: var(--swc-font-size-75);
-    color: var(--swc-neutral-subdued-content-color-default);
-  }
-`;
-function block2(text5, copied, copy, first2 = false) {
-  const done2 = copied === text5;
-  return b`<div class="command" data-command=${text5}>
-      <code>${breakable(text5)}</code>
-      <swc-action-button size="s" quiet data-action=${first2 ? "copy-command" : A} accessible-label=${done2 ? "Copied" : `Copy ${text5}`} @click=${() => copy(text5)}>
-        <swc-icon-copy slot="icon"></swc-icon-copy>${done2 ? "Copied" : "Copy"}
-      </swc-action-button>
-    </div>`;
-}
-function breakable(text5) {
-  return text5.split("/").map(
-    (part2, index2, parts3) => b`${part2}${index2 < parts3.length - 1 ? b`/<wbr />` : A}`
-  );
-}
-function reach({ intro, extensionUrl, copied, uncopied, copy }) {
-  return b`<p>${intro}</p>
-    ${extensionUrl ? b`<p><a class="swc-Link" href=${extensionUrl} target="_blank" rel="noopener noreferrer" data-action="install-extension">Install the Chrome extension</a></p>` : A}
-    <p>To run slicc, enter this in a terminal:</p>
-    <div class="commands">
-      ${block2(command, copied, copy, true)}
-      ${block2(startCommand, copied, copy)}
-    </div>
-    <div class="commands" data-commands="node">
-      <p>With Node:</p>
-      ${block2(nodeCommand, copied, copy)}
-    </div>
-    ${uncopied ? b`<div class="error" role="alert" data-error="copy"><swc-icon-alert-triangle size="s" aria-hidden="true"></swc-icon-alert-triangle><span>Couldn’t copy. Select the command and copy it.</span></div>` : A}`;
-}
-async function copyText(text5) {
-  try {
-    await globalThis.navigator.clipboard.writeText(text5);
-    return true;
-  } catch {
-    return false;
-  }
-}
-
 // src/app/monitor.ts
 function sparkline(points, width = 120, height = 28) {
   if (points.length < 2) return "";
@@ -28990,9 +29121,6 @@ var o74 = class extends a10 {
 };
 e25("swc-icon-visibility-off", o74);
 
-// node_modules/@adobe/spectrum-wc/dist/link.css
-var link_default = '/**\n * Copyright 2026 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the "License");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/**\n * Standalone link presentation for native `<a href>` elements.\n *\n * Default anchor appearance inside `.swc-Typography--prose` and\n * `.swc-Typography--links` ships with `typography.css` (generated). Import this\n * stylesheet when authors need explicit BEM modifiers on anchors.\n *\n */\n\n.swc-Link {\n  inline-size: -moz-fit-content;\n  inline-size: fit-content;\n  font-family: var(--swc-sans-font-family-stack);\n  font-size: var(--swc-font-size-100);\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1.30;\n  color: var(--swc-link-text-color-default, var(--swc-accent-color-900));\n  -webkit-text-decoration: underline;\n  text-decoration: underline;\n  text-decoration-thickness: 1px;\n  text-underline-offset: 1px;\n  transition: color 130ms ease-in-out;\n\n  &:hover {\n    color: var(--swc-link-text-color-hover, var(--swc-accent-color-1000));\n  }\n\n  &:active {\n    color: var(--swc-link-text-color-down, var(--swc-accent-color-1000));\n  }\n\n  &:focus-visible {\n    color: var(--swc-link-text-color-focus, var(--swc-accent-color-1000));\n    border-radius: 4px;\n    outline: 2px solid var(--swc-link-focus-indicator-color, var(--swc-blue-800));\n    outline-offset: 2px;\n  }\n\n  &:lang(ja),\n  &:lang(zh),\n  &:lang(ko) {\n    line-height: 1.50;\n  }\n}\n\n.swc-Link--standalone {\n  font-weight: 500;\n}\n\n.swc-Link--secondary {\n  --swc-link-text-color-default: var(--swc-gray-800);\n  --swc-link-text-color-hover: var(--swc-gray-900);\n  --swc-link-text-color-down: var(--swc-gray-900);\n  --swc-link-text-color-focus: var(--swc-gray-900);\n}\n\n.swc-Link--staticWhite {\n  --swc-link-text-color-default: var(--swc-white);\n  --swc-link-text-color-hover: var(--swc-white);\n  --swc-link-text-color-down: var(--swc-white);\n  --swc-link-text-color-focus: var(--swc-white);\n  --swc-link-focus-indicator-color: var(--swc-white);\n}\n\n.swc-Link--staticBlack {\n  --swc-link-text-color-default: var(--swc-black);\n  --swc-link-text-color-hover: var(--swc-black);\n  --swc-link-text-color-down: var(--swc-black);\n  --swc-link-text-color-focus: var(--swc-black);\n  --swc-link-focus-indicator-color: var(--swc-black);\n}\n\n.swc-Link--quiet.swc-Link--standalone {\n  -webkit-text-decoration: none;\n  text-decoration: none;\n}\n\n.swc-Link--quiet.swc-Link--standalone:hover {\n  -webkit-text-decoration: underline;\n  text-decoration: underline;\n}\n';
-
 // src/app/guests.ts
 var hour = 36e5;
 var day3 = 24 * hour;
@@ -35619,15 +35747,29 @@ function pinVersion(item2, pin) {
   if (pin.base === null) return [pin.range === version2 ? version2 : `${pin.range} \u2192 ${version2}`];
   return [version2, pin.base === version2 ? "the version seven ships" : `seven ships ${pin.base}`];
 }
+function held(item2) {
+  if (!item2.withheld) return item2;
+  return {
+    ...item2,
+    offered: item2.version,
+    state: item2.state === "outdated" ? "installed" : item2.state,
+    actions: item2.actions.filter((action) => action !== "install" && action !== "update")
+  };
+}
 function placed(item2) {
   const installs = item2.installs ?? [];
-  if (!installs.length) return item2;
+  if (!installs.length) return held(item2);
   const version2 = item2.version ?? installs[0].version;
   const newer2 = item2.offered !== null && item2.offered !== version2;
   const state2 = item2.state === "available" ? newer2 ? "outdated" : "installed" : item2.state;
   const owned = installs.some((install) => install.manager === "panel");
   const hidden = new Set(owned ? ["install"] : ["install", "remove"]);
-  return { ...item2, version: version2, state: state2, actions: item2.actions.filter((action) => !hidden.has(action)) };
+  return held({
+    ...item2,
+    version: version2,
+    state: state2,
+    actions: item2.actions.filter((action) => !hidden.has(action))
+  });
 }
 var elsewhere = (item2) => (item2.installs ?? []).filter((install) => install.manager !== "panel");
 function installText(install, version2) {
@@ -35645,6 +35787,44 @@ function actionLabel2(item2, action) {
   if (action === "remove" && shared2(item2)) return `Remove the panel\u2019s copy of ${item2.label}`;
   return `${packageActions[action]} ${item2.label}`;
 }
+var plainLimit = 300;
+var entities = {
+  amp: "&",
+  lt: "<",
+  gt: ">",
+  quot: '"',
+  apos: "'",
+  nbsp: " ",
+  copy: "\xA9",
+  reg: "\xAE",
+  trade: "\u2122",
+  hellip: "\u2026",
+  ndash: "\u2013",
+  mdash: "\u2014",
+  lsquo: "\u2018",
+  rsquo: "\u2019",
+  ldquo: "\u201C",
+  rdquo: "\u201D"
+};
+var decoded = (text5) => text5.replace(/&(#x[\da-f]+|#\d+|[a-z]+);/gi, (entity, name) => {
+  if (name[0] !== "#") return entities[name.toLowerCase()] ?? entity;
+  const hex = /^#x/i.test(name);
+  const code3 = Number.parseInt(name.slice(hex ? 2 : 1), hex ? 16 : 10);
+  return code3 > 0 && code3 <= 1114111 ? String.fromCodePoint(code3) : entity;
+});
+function stripped(text5) {
+  const target = String.raw`\(((?:[^()]|\([^()]*\))*)\)`;
+  return decoded(text5).replace(/^[ \t]*(?:`{3,}|~{3,}).*$/gm, "").replace(/^[ \t]*(?:#{1,6}[ \t]+|>[ \t]?|[-*+][ \t]+|\d+[.)][ \t]+)+/gm, "").replace(/<!--[\s\S]*?-->/g, "").replace(/<\/?[a-z][^>]*>/gi, "").replace(new RegExp(String.raw`!\[([^\]]*)\]${target}`, "g"), "$1").replace(new RegExp(String.raw`\[([^\]]*)\]${target}`, "g"), "$1").replace(/(`+)([^\n]+?)\1(?!`)/g, "$2").replace(/(\*\*|__)(?=\S)(.+?)\1/g, "$2").replace(/\*(?=\S)([^*\n]+?)\*/g, "$1").replace(/(^|[^\w])_(?=\S)([^_\n]+?)_(?![\w])/g, "$1$2");
+}
+function plain2(text5, limit2 = plainLimit) {
+  const flat = [...stripped(text5).replace(/\s+/g, " ").trim()];
+  return flat.length > limit2 ? `${flat.slice(0, limit2 - 1).join("").trimEnd()}\u2026` : flat.join("");
+}
+function withheldText(reason, prefix = "Not offered") {
+  const text5 = plain2(reason, 200).replace(/\.$/, "");
+  return `${prefix}: ${text5}${text5.endsWith("\u2026") ? "" : "."}`;
+}
+var unreachable = (items) => items.some((item2) => item2.registry === "unreachable");
 var packageRunning = /* @__PURE__ */ new Set(["installing", "updating", "removing"]);
 var list5 = (names2) => new Intl.ListFormat("en", { type: "conjunction" }).format(names2);
 function requiresText(item2, all3) {
@@ -35743,6 +35923,9 @@ function whatsNew(releases, from, to, name) {
   const range3 = releases.filter((release3) => newer(release3.version, from) > 0 && newer(release3.version, to) <= 0).sort((a23, b13) => newer(b13.version, a23.version)).map((release3) => releaseNotes(release3, name));
   return range3.some((entry) => entry.body) ? range3 : [];
 }
+var npmPage = (name) => `https://www.npmjs.com/package/${name.split("/").map(
+  (part2) => part2.startsWith("@") ? `@${encodeURIComponent(part2.slice(1))}` : encodeURIComponent(part2)
+).join("/")}`;
 var secure = (url) => /^https:\/\//i.test(url);
 var installed2 = (releases, version2) => releases?.find((release3) => newer(release3.version, version2) === 0 && secure(release3.url));
 var snapshot = (items) => new Map(items.map(({ id, state: state2, error }) => [id, { state: state2, error }]));
@@ -35799,10 +35982,13 @@ var SliccUpdates = class extends ModelElement {
     pending: { state: true },
     failures: { state: true },
     busy: { state: true },
-    problems: { state: true }
+    problems: { state: true },
+    refreshing: { state: true },
+    still: { state: true }
   };
   #logs = new ViewSet(this, "updates");
   #reached = /* @__PURE__ */ new Map();
+  #retryHeld = false;
   constructor() {
     super();
     this.pending = /* @__PURE__ */ new Set();
@@ -35972,8 +36158,35 @@ var SliccUpdates = class extends ModelElement {
         grid-area: description;
         margin: 0;
         overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        overflow-wrap: anywhere;
+      }
+      [data-registry] > .description,
+      .withheld {
+        color: var(--swc-neutral-subdued-content-color-default);
+      }
+      .withheld {
+        font-size: var(--swc-font-size-75);
+        line-height: var(--swc-line-height-200);
+        overflow-wrap: anywhere;
+      }
+      .rows > li[data-registry='unreachable'] {
+        grid-template-areas: 'name buttons';
+      }
+      .registry {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--swc-spacing-100) var(--swc-spacing-200);
+        margin-block-end: var(--swc-spacing-100);
+      }
+      .registry .hint {
+        margin: 0;
+      }
+      #packages:focus {
+        outline: none;
       }
       .rows > li > .meta {
         justify-content: flex-start;
@@ -36109,12 +36322,6 @@ var SliccUpdates = class extends ModelElement {
         .rows > li {
           grid-template-areas: 'name buttons' 'description description';
         }
-        .description {
-          display: -webkit-box;
-          -webkit-box-orient: vertical;
-          -webkit-line-clamp: 2;
-          white-space: normal;
-        }
       }
     `
   ];
@@ -36123,6 +36330,8 @@ var SliccUpdates = class extends ModelElement {
     this.failures = /* @__PURE__ */ new Map();
     this.busy = /* @__PURE__ */ new Map();
     this.problems = /* @__PURE__ */ new Map();
+    this.refreshing = false;
+    this.still = false;
     this.#reached.clear();
     const port = model.updates;
     if (!port) return [];
@@ -36198,6 +36407,42 @@ var SliccUpdates = class extends ModelElement {
       }
     }
   }
+  async refreshPackages() {
+    const port = this.model?.updates;
+    if (!port?.refreshPackages || this.refreshing) return;
+    this.refreshing = true;
+    this.still = false;
+    try {
+      await port.refreshPackages();
+    } catch {
+    } finally {
+      if (this.model?.updates === port) {
+        this.refreshing = false;
+        this.still = unreachable(port.packages?.() ?? []);
+      }
+    }
+  }
+  willUpdate(changed2) {
+    super.willUpdate(changed2);
+    const active = this.shadowRoot?.activeElement;
+    this.#retryHeld = active?.dataset.action === "retry-registry";
+  }
+  updated(changed2) {
+    super.updated(changed2);
+    if (this.#retryHeld && !this.renderRoot.querySelector('[data-action="retry-registry"]'))
+      this.renderRoot.querySelector("#packages")?.focus();
+    for (const row of this.renderRoot.querySelectorAll("li[data-id]")) {
+      const description = row.querySelector(".description");
+      for (const button of row.querySelectorAll(
+        ".buttons swc-button"
+      ))
+        void button.updateComplete.then(() => {
+          const inner = button.shadowRoot?.querySelector("button");
+          if (inner)
+            inner.ariaDescribedByElements = description && !row.dataset.registry ? [description] : [];
+        });
+    }
+  }
   #prune(kind, items, busy) {
     const live = new Set(items.filter(busy).map((item2) => `${kind}:${item2.id}`));
     for (const key2 of this.#reached.keys()) {
@@ -36297,7 +36542,7 @@ var SliccUpdates = class extends ModelElement {
       return b`<a class="swc-Link swc-Link--standalone" href=${release3.url} target="_blank" rel="noopener noreferrer" data-action="release-notes" aria-label=${`${label} ${version2} release notes`}>Release notes</a>`;
     }
     if (!npm) return A;
-    return b`<a class="swc-Link swc-Link--standalone" href=${`https://www.npmjs.com/package/${npm}/v/${version2}`} target="_blank" rel="noopener noreferrer" data-action="npm-page" aria-label=${`npm page for ${label} ${version2}`}>npm page</a>`;
+    return b`<a class="swc-Link swc-Link--standalone" href=${npmPage(npm)} target="_blank" rel="noopener noreferrer" data-action="npm-page" aria-label=${`npm page for ${label} ${version2}`}>npm page</a>`;
   }
   #version(item2, meta) {
     const text5 = meta ? b`<span data-npm-meta>${meta}</span>` : b`<span class="version">${item2.from ?? "Not installed"}${item2.to && item2.to !== item2.from ? b` → ${item2.to}` : A}</span>`;
@@ -36348,12 +36593,13 @@ var SliccUpdates = class extends ModelElement {
     }
     const version2 = item2.version === null ? item2.offered : item2.offered && item2.offered !== item2.version ? `${item2.version} \u2192 ${item2.offered}` : item2.version;
     const download2 = item2.size !== void 0 && (item2.version === null || item2.offered !== item2.version);
+    const bytes = download2 ? `${size3(item2.size)}${item2.unpacked ? " on disk" : ""}` : "";
     const requires = requiresText(item2, all3);
     return b`<p class="meta">
       ${version2 ? b`<span class="version">${version2}</span>` : A}
       ${shared2(item2) ? b`<span data-install="panel">the panel’s copy</span>` : A}
       ${elsewhere(item2).map((install) => b`<span data-install>${installText(install, item2.version)}</span>`)}
-      ${download2 ? b`<span>${size3(item2.size)}</span>` : A}
+      ${download2 ? b`<span data-size>${bytes}</span>` : A}
       ${requires ? b`<span data-requires>${requires}</span>` : A}
       ${this.#packageLink(item2)}
     </p>`;
@@ -36377,10 +36623,11 @@ var SliccUpdates = class extends ModelElement {
   #package(item2, all3, act2) {
     const light = packageLight(item2);
     const busy = this.busy.get(item2.id);
-    const shown4 = busy ? [busy] : act2 ? item2.actions : [];
+    const actions2 = item2.registry ? item2.actions.filter((action) => action !== "retry") : item2.actions;
+    const shown4 = busy ? [busy] : act2 ? actions2 : [];
     const error = this.problems.get(item2.id) ?? item2.error;
     const managed = managedText(item2);
-    return b`<li data-id=${item2.id} data-state=${item2.state}>
+    return b`<li data-id=${item2.id} data-state=${item2.state} data-registry=${item2.registry ?? A}>
       <div class="name">
         <h3 title=${item2.package}>${item2.label}</h3>
         ${light ? b`<swc-status-light size="s" variant=${light[0]}>${light[1]}</swc-status-light>` : A}
@@ -36395,9 +36642,10 @@ var SliccUpdates = class extends ModelElement {
             @click=${() => void this.actPackage(item2.id, action)}
           >${packageActions[action]}</swc-button>`
     )}</div>
-      <p class="description">${item2.description}</p>
-      ${this.#packageMeta(item2, all3)}
-      ${item2.notes?.length || managed ? b`<p class="notes" data-notes>${(item2.notes ?? []).map((note) => b`<span>${note}</span>`)}${managed ? b`<span data-managed>${managed}</span>` : A}</p>` : A}
+      ${item2.registry === "unreachable" ? A : b`<p class="description">${item2.registry ? "Checking npm\u2026" : plain2(item2.description)}</p>`}
+      ${item2.withheld ? b`<p class="withheld" data-withheld>${withheldText(item2.withheld)}</p>` : item2.newer ? b`<p class="withheld" data-newer>${withheldText(item2.newer.reason, `${item2.newer.version} isn\u2019t offered yet`)}</p>` : A}
+      ${item2.registry === "unreachable" && item2.version === null ? A : this.#packageMeta(item2, all3)}
+      ${item2.notes?.length || managed ? b`<p class="notes" data-notes>${(item2.notes ?? []).map((note) => b`<span>${plain2(note)}</span>`)}${managed ? b`<span data-managed>${managed}</span>` : A}</p>` : A}
       ${item2.warnings?.length ? b`<p class="warnings" data-warnings>${item2.warnings.map(
       (warning) => b`<span><swc-icon-alert-triangle size="s" aria-hidden="true"></swc-icon-alert-triangle>${warning}</span>`
     )}</p>` : A}
@@ -36420,6 +36668,24 @@ var SliccUpdates = class extends ModelElement {
       (item2) => this.#package(item2, all3, Boolean(port.actPackage))
     )}</ul>`;
   }
+  #packagesHint(port, offered) {
+    if (!unreachable(offered) && !this.refreshing)
+      return b`<p class="hint">
+        ${offered.length ? "Tools for the agent and the terminal. Install the ones you need; you can remove them later." : "No optional packages are offered right now."}
+      </p>`;
+    return b`<div class="registry" data-registry="unreachable">
+      <p class="hint">${this.refreshing ? "Checking npm\u2026" : "Couldn\u2019t reach npm, so versions and sizes aren\u2019t shown."}</p>
+      ${port.refreshPackages ? b`<swc-button
+              size="s"
+              variant="secondary"
+              data-action="retry-registry"
+              accessible-label="Retry reaching npm"
+              ?pending=${this.refreshing}
+              @click=${() => void this.refreshPackages()}
+            >Retry</swc-button>` : A}
+      <span class="hidden" role="status" aria-live="polite" data-still>${this.still ? "Still couldn\u2019t reach npm." : ""}</span>
+    </div>`;
+  }
   #packages(port) {
     if (!port?.packages) return A;
     const all3 = port.packages().map(placed);
@@ -36427,10 +36693,8 @@ var SliccUpdates = class extends ModelElement {
     const yours = all3.filter((item2) => item2.origin === "user");
     return b`<section data-section="packages" aria-labelledby="packages">
       <swc-divider size="m"></swc-divider>
-      <h2 id="packages">Optional packages</h2>
-      <p class="hint">
-        ${offered.length ? "Tools for the agent and the terminal. Install the ones you need; you can remove them later." : "No optional packages are offered right now."}
-      </p>
+      <h2 id="packages" tabindex="-1">Optional packages</h2>
+      ${this.#packagesHint(port, offered)}
       ${offered.length ? this.#list(offered, all3, port) : A}
     </section>
     ${yours.length ? b`<section data-section="user-packages" aria-labelledby="user-packages">
@@ -37031,7 +37295,7 @@ var SliccApp = class extends ThemedElement {
     if (!dock2 || !this.#started) return;
     const known = new Set(this.model?.agent.list().map((agent2) => agent2.id));
     const agent = this.#active();
-    const held = !!agent && !!dock2.content("chat")?.shadowRoot?.activeElement;
+    const held2 = !!agent && !!dock2.content("chat")?.shadowRoot?.activeElement;
     this.panels.quietly(() => {
       for (const id of chats(dock2)) {
         if (!known.has(chatAgent(id))) dock2.close(id);
@@ -37051,7 +37315,7 @@ var SliccApp = class extends ThemedElement {
       if (this.model && this.#offers("terminal"))
         this.terminalPanels.sync(dock2, this.model.terminals, this.screen);
     });
-    if (agent && held && this.#offers("chat")) openChat(dock2, agent, this.screen, true);
+    if (agent && held2 && this.#offers("chat")) openChat(dock2, agent, this.screen, true);
   }
   #activated(event2) {
     const { id } = event2.detail;
@@ -37525,9 +37789,9 @@ function ansi2(command3) {
   const escape3 = /\\(?:x([0-9a-fA-F]{1,2})|u([0-9a-fA-F]{1,4})|U([0-9a-fA-F]{1,8})|([0-7]{1,3})|([\s\S]))/g;
   return command3.replace(
     /\$'((?:[^'\\]|\\[\s\S])*)'/g,
-    (_9, body4) => `'${body4.replace(escape3, (_match, hex, short2, long, octal, plain2) => {
+    (_9, body4) => `'${body4.replace(escape3, (_match, hex, short2, long, octal, plain3) => {
       if (octal) return String.fromCharCode(Number.parseInt(octal, 8));
-      if (plain2) return plain2;
+      if (plain3) return plain3;
       return String.fromCodePoint(
         Math.min(Number.parseInt(hex ?? short2 ?? long, 16), 1114111)
       );
@@ -37624,9 +37888,9 @@ function reach2(command3, cwd) {
   if (protects(start2, false)) return start2;
   const cwds = /* @__PURE__ */ new Set([start2]);
   const text5 = unglob(ansi2(command3.replace(/\\\n/g, "")));
-  const plain2 = text5.split(separators).map((segment2) => commas(segment2.split(/[\s<>=]+/).map((word2) => word2.replace(/['"\\]/g, ""))));
+  const plain3 = text5.split(separators).map((segment2) => commas(segment2.split(/[\s<>=]+/).map((word2) => word2.replace(/['"\\]/g, ""))));
   const aware = shield(text5).split(separators).map((segment2) => commas(quoted(unshield(segment2))));
-  const segments = JSON.stringify(aware) === JSON.stringify(plain2) ? plain2 : [...plain2, ...aware];
+  const segments = JSON.stringify(aware) === JSON.stringify(plain3) ? plain3 : [...plain3, ...aware];
   const whole = segments.some((words2) => words2.length > 0 && !trusted2(words2[0]));
   for (const words2 of segments) {
     const hit = scan2(words2, cwds, whole);
@@ -38042,9 +38306,9 @@ var SliccApprovals = class extends ModelElement {
         </sp-alert-dialog>`
       );
     }
-    const held = this.#showing && this.#pending.has(this.#showing.id) ? this.#showing : null;
+    const held2 = this.#showing && this.#pending.has(this.#showing.id) ? this.#showing : null;
     const list6 = this.#current();
-    const [approval, ...rest] = held ? [held, ...list6.filter(({ id }) => id !== held.id)] : list6;
+    const [approval, ...rest] = held2 ? [held2, ...list6.filter(({ id }) => id !== held2.id)] : list6;
     if (!approval) return A;
     const failure2 = this.failure?.id === approval.id ? this.failure.message : "";
     const verdict = rulesOf(approval);
@@ -41904,6 +42168,8 @@ function words(message, word2) {
   return new RegExp(`\\b${word2.replace(/[^a-z0-9 ]/gi, "\\$&")}\\b`, "i").test(message);
 }
 var popup = (account) => account.group === "mcp" && account.auth === "oauth";
+var dual = (account) => account.auth === "oauth" && account.secret === "api-key";
+var signInMethod = (account) => dual(account) ? { method: "sign-in" } : void 0;
 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.";
 var secretNames = { "api-key": "API key", token: "token" };
@@ -41933,6 +42199,7 @@ var SliccSettings = class extends ThemedElement {
     developerError: { state: true }
   };
   #waits = new SignInWaits(() => this.requestUpdate());
+  #copies = new SignInCopies(() => this.requestUpdate());
   #landing = null;
   #away = false;
   #bases = /* @__PURE__ */ new Map();
@@ -41959,6 +42226,7 @@ var SliccSettings = class extends ThemedElement {
     dialogFrame,
     searchCss,
     r(link_default),
+    signInCss,
     i`
       :host {
         display: block;
@@ -42073,6 +42341,15 @@ var SliccSettings = class extends ThemedElement {
         color: var(--swc-neutral-subdued-content-color-default);
         font-size: var(--swc-font-size-75);
       }
+      .sign-in .enter {
+        color: var(--swc-neutral-subdued-content-color-default);
+      }
+      .sign-in .enter,
+      .sign-in .unknown,
+      .sign-in .address,
+      .sign-in .swc-Link {
+        font-size: var(--swc-font-size-75);
+      }
       .switched {
         grid-column: 2;
       }
@@ -42126,6 +42403,20 @@ var SliccSettings = class extends ThemedElement {
         flex: none;
         margin-block-start: var(--swc-spacing-50);
       }
+      .other-way {
+        justify-self: start;
+        padding: 0;
+        border: 0;
+        background: none;
+        font-size: var(--swc-font-size-75);
+        cursor: pointer;
+      }
+      @media (forced-colors: active) {
+        .other-way {
+          color: LinkText;
+          text-decoration: underline;
+        }
+      }
       .add {
         margin-block-start: var(--swc-spacing-200);
         margin-inline-start: calc(-1 * var(--swc-spacing-100));
@@ -42378,13 +42669,13 @@ var SliccSettings = class extends ThemedElement {
     const rest = [...this.pending].filter((candidate) => candidate !== id);
     this.pending = new Set(on2 ? [...rest, id] : rest);
   }
-  async connect(id, secret, fields) {
+  async connect(id, secret, fields, options2) {
     this.#busy(id, true);
     this.failure = null;
     this.#cancelled.delete(id);
     const settings = this.model?.settings;
     try {
-      await (fields ? settings?.connect(id, secret, fields) : secret === void 0 ? settings?.connect(id) : settings?.connect(id, secret));
+      await (options2 ? settings?.connect(id, secret, fields, options2) : fields ? settings?.connect(id, secret, fields) : secret === void 0 ? settings?.connect(id) : settings?.connect(id, secret));
       if (this.entering === id) this.entering = null;
       if (this.adding?.id === id && this.#added(id)?.status === "connected") this.#finish(id);
     } catch (error) {
@@ -42396,7 +42687,8 @@ var SliccSettings = class extends ThemedElement {
   }
   #vault(account) {
     const vault = this.model?.vault;
-    return account.auth === "api-key" && account.store === "vault" && vault?.put ? vault : null;
+    const keyed2 = account.auth === "api-key" || dual(account);
+    return keyed2 && account.store === "vault" && vault?.put ? vault : null;
   }
   async keep(account, value, fields) {
     const model = this.model;
@@ -42526,7 +42818,7 @@ var SliccSettings = class extends ThemedElement {
         return;
       }
     }
-    await this.connect(id, secret, fields);
+    await this.connect(id, secret, fields, dual(account) ? { method: "key" } : void 0);
     if (this.failure?.id === id) {
       this.#placeFailure(account, fields);
       const back = forward ? this.#modelChange(name, changes2, "url", "old") : null;
@@ -42585,11 +42877,30 @@ var SliccSettings = class extends ThemedElement {
   }
   #start(account) {
     if (account.auth !== "api-key") {
-      void this.connect(account.id);
+      void this.connect(account.id, void 0, void 0, signInMethod(account));
       return;
     }
     this.#enter(account);
   }
+  #useSignIn(account) {
+    this.#cancel();
+    void this.updateComplete.then(
+      () => this.renderRoot.querySelector(
+        `.account[data-id="${CSS.escape(account.id)}"] [data-action=connect]`
+      )?.focus()
+    );
+  }
+  #otherWay(account) {
+    if (!dual(account) || account.status === "connected" || this.#signingIn(account) || this.pending.has(account.id))
+      return A;
+    const entering = this.entering === account.id;
+    return b`<button
+      type="button"
+      class="swc-Link swc-Link--standalone swc-Link--quiet other-way"
+      data-action=${entering ? "use-sign-in" : "use-key"}
+      @click=${() => entering ? this.#useSignIn(account) : this.#enter(account)}
+    >${entering ? "Sign in instead" : "Use an API key instead"}</button>`;
+  }
   #enter(account) {
     this.failure = null;
     this.problem = null;
@@ -42770,6 +43081,7 @@ var SliccSettings = class extends ThemedElement {
   }
   #leave(account) {
     const adding = this.adding?.id === account.id;
+    if (dual(account) && !adding) return A;
     return b`<swc-button size="m" variant="secondary" data-action=${adding ? "back" : "cancel"} @click=${() => adding ? this.#back() : this.#cancel()}>${adding ? "Back" : "Cancel"}</swc-button>`;
   }
   #saveLabel(account) {
@@ -42863,7 +43175,8 @@ var SliccSettings = class extends ThemedElement {
     return account.auth !== "api-key" || !!vault.put;
   }
   #records(account, vault) {
-    if (account.auth === "api-key") return [[recordName(account), recordKind(account)]];
+    if (account.auth === "api-key" || dual(account))
+      return [[recordName(account), recordKind(account)]];
     const server = serverOf(account);
     const names2 = (vault.list()?.secrets ?? []).filter(
       (secret) => secret.kind === "mcp" && secret.server === server && secret.state !== "removed"
@@ -42875,7 +43188,7 @@ var SliccSettings = class extends ThemedElement {
     const model = this.model;
     const vault = model?.vault;
     const vaulted = account.store === "vault" && !!vault?.remove;
-    const key2 = vaulted && account.auth === "api-key";
+    const key2 = vaulted && (account.auth === "api-key" || dual(account));
     const signIn = vaulted && account.auth !== "api-key" && account.group === "mcp";
     const stored2 = key2 || signIn ? vault : void 0;
     const body4 = `Agents can\u2019t use ${account.provider} until you connect it again.${key2 ? " You can restore its key from Removed in Secrets for 30 days." : ""}`;
@@ -42919,7 +43232,7 @@ var SliccSettings = class extends ThemedElement {
     return this.picking ? "a provider is being added" : null;
   }
   #signingIn(account) {
-    return account.status === "signing-in" || account.auth !== "api-key" && account.status !== "connected" && this.pending.has(account.id);
+    return account.status === "signing-in" || account.auth !== "api-key" && account.status !== "connected" && this.entering !== account.id && this.pending.has(account.id);
   }
   #action(account) {
     if (this.#signingIn(account) && this.model?.settings.cancel) {
@@ -42941,14 +43254,15 @@ var SliccSettings = class extends ThemedElement {
         @click=${() => this.#disconnect(account)}
       >Disconnect</swc-button>`;
     }
-    const label = popup(account) ? "Sign in" : account.status === "expired" ? "Reconnect" : "Connect";
+    const signs = popup(account) || dual(account);
+    const label = signs ? "Sign in" : account.status === "expired" ? "Reconnect" : "Connect";
     const entering = this.entering === account.id;
     const busy = this.#signingIn(account) || !entering && this.pending.has(account.id);
     return b`<swc-button
       size="m"
       variant="secondary"
       data-action="connect"
-      accessible-label=${popup(account) ? `Sign in to ${account.provider}` : `${label} ${account.provider}`}
+      accessible-label=${signs ? `Sign in to ${account.provider}` : `${label} ${account.provider}`}
       ?pending=${busy}
       ?disabled=${entering || !!account.blocked}
       @click=${() => this.#start(account)}
@@ -42976,9 +43290,14 @@ var SliccSettings = class extends ThemedElement {
       <swc-status-light class="state" variant=${variant}>${label}</swc-status-light>
       ${this.#actions(account)}
     </div>
-    ${this.#offered() ? this.#rowNotes(account) : A}
+    ${this.#rowNotes(account)}
     ${this.#movedNote(account)}
-    ${this.adding?.id === account.id ? A : b`${this.#key(account)}${failure2}`}`;
+    ${this.adding?.id === account.id ? A : b`${this.#key(account)}${this.#otherKey(account)}${failure2}`}`;
+  }
+  #otherKey(account) {
+    if (this.entering !== account.id) return A;
+    const other = this.#otherWay(account);
+    return other === A ? A : b`<div class="notes">${other}</div>`;
   }
   #actions(account) {
     const moved2 = account.status === "connected" ? this.#moved(account) : null;
@@ -43029,7 +43348,7 @@ var SliccSettings = class extends ThemedElement {
     clearValues(this.renderRoot);
     if (this.entering === account.id) this.entering = null;
     const vault = model.vault;
-    const keyed2 = account.store === "vault" && account.auth === "api-key" && !!vault?.remove;
+    const keyed2 = account.store === "vault" && (account.auth === "api-key" || dual(account)) && !!vault?.remove;
     if (keyed2 && !await this.#forget(account, vault)) return;
     if (this.model !== model) return;
     await this.#closeTip(`remove-${account.id}`);
@@ -43074,11 +43393,21 @@ var SliccSettings = class extends ThemedElement {
     }
     return b`<p class="hint" role="status" data-signing>${signInText(this.#waits.waited(key2))}</p>`;
   }
+  #signInDetails(account) {
+    if (account.status !== "signing-in") return A;
+    return signInDetails(account.id, account.signIn, this.#copies.state(account.id), (code3) => {
+      void this.#copies.copy(account.id, code3);
+    });
+  }
   #rowNotes(account) {
-    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>`;
+    const offered = !!this.#offered();
+    const adding = this.adding?.id === account.id;
+    const notice = offered ? this.#notice(account) : A;
+    const signing = offered && !adding ? this.#signingNote(account) : A;
+    const details = adding ? A : this.#signInDetails(account);
+    const other = this.entering === account.id ? A : this.#otherWay(account);
+    if ([notice, signing, details, other].every((part2) => part2 === A)) return A;
+    return b`<div class="notes">${notice}${signing}${details}${other}</div>`;
   }
   #openPicker() {
     this.query = "";
@@ -43233,9 +43562,10 @@ 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} ?disabled=${!!account.blocked} @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, void 0, void 0, signInMethod(account))}>${signing ? "Signing in\u2026" : "Sign in"}</swc-button>
         ${signing ? A : this.#leave(account)}
-      </div>`;
+      </div>
+      ${this.#signInDetails(account)}`;
   }
   #localStep(account) {
     return b`<p class="hint">SLICC connects to ${account.provider} on this device.</p>
@@ -43730,13 +44060,13 @@ var SliccSprinkle = class extends ThemedElement {
     value: null
   };
   #hold(port, ask, id) {
-    const held = { port, id, ready: false, value: null };
-    this.#held = held;
+    const held2 = { port, id, ready: false, value: null };
+    this.#held = held2;
     this.#frame = { key: "", doc: "" };
     const settle2 = (value) => {
-      held.value = value ?? null;
-      held.ready = true;
-      if (this.#held === held) this.requestUpdate();
+      held2.value = value ?? null;
+      held2.ready = true;
+      if (this.#held === held2) this.requestUpdate();
     };
     ask.call(port, id, "getState", []).then(settle2, () => settle2(null));
   }