@ai-ecoverse/slicc-spectrum 1.13.0 → 1.14.0

package/dist/slicc-ui.js

@@ -6597,6 +6597,14 @@ var surfaces = [
     icon: "sp-icon-settings",
     side: "center",
     open: []
+  },
+  {
+    id: "updates",
+    title: "Install / Update",
+    tag: "slicc-updates",
+    icon: "sp-icon-refresh",
+    side: "center",
+    open: []
   }
 ];
 var documents = {
@@ -6757,6 +6765,248 @@ function openSprinkle(dock, sprinkle, screen, place = null) {
   return id;
 }
 
+// src/app/updates.ts
+var states = {
+  current: ["neutral", "Up to date"],
+  checking: ["informative", "Checking"],
+  downloading: ["informative", "Downloading"],
+  linking: ["informative", "Linking"],
+  installed: ["positive", "Installed"],
+  available: ["notice", "Update available"],
+  ready: ["notice", "Ready to apply"],
+  failed: ["negative", "Failed"]
+};
+var actions = {
+  "restart-agent": "Restart agent",
+  reload: "Reload",
+  "update-now": "Update now",
+  retry: "Retry"
+};
+function updatesStatus(items) {
+  const failed = items.filter((item2) => item2.state === "failed").length;
+  if (failed) return `${failed} failed`;
+  const running = items.filter(
+    (item2) => ["checking", "downloading", "linking"].includes(item2.state)
+  ).length;
+  if (running) return `updating ${running}`;
+  if (items.some((item2) => item2.state === "ready" || item2.state === "available")) {
+    return "update ready";
+  }
+  return null;
+}
+var UpdateVisibility = class {
+  #boot;
+  #initial = true;
+  #failed = /* @__PURE__ */ new Set();
+  constructor(ready) {
+    this.#boot = !ready;
+  }
+  change(port, layout = false) {
+    const failed = new Set(
+      port.list().filter((item2) => item2.state === "failed").map((item2) => item2.id)
+    );
+    const open = (this.#initial || layout) && this.#boot || [...failed].some((id) => !this.#failed.has(id));
+    this.#initial = false;
+    this.#failed = failed;
+    if (this.#boot && port.ready() && failed.size === 0) {
+      this.#boot = false;
+      return "close";
+    }
+    return open ? "open" : null;
+  }
+};
+var SliccUpdates = class extends ModelElement {
+  static properties = {
+    ...ModelElement.properties,
+    pending: { state: true },
+    failures: { state: true }
+  };
+  constructor() {
+    super();
+    this.pending = /* @__PURE__ */ new Set();
+    this.failures = /* @__PURE__ */ new Map();
+  }
+  static styles = [
+    shared,
+    i`
+      :host {
+        display: block;
+        height: 100%;
+        overflow: auto;
+        container-type: inline-size;
+        background: var(--spectrum-background-layer-2-color);
+        color: var(--spectrum-neutral-content-color-default);
+        font-size: var(--spectrum-font-size-100);
+      }
+      .page {
+        max-width: 800px;
+        padding: 24px;
+        margin: 0 auto;
+      }
+      h1 {
+        font-size: var(--spectrum-font-size-400);
+        margin: 0 0 8px;
+      }
+      .hint, .meta, summary {
+        color: var(--spectrum-neutral-subdued-content-color-default);
+        font-size: var(--spectrum-font-size-75);
+      }
+      .hint {
+        margin: 0 0 24px;
+        line-height: 1.5;
+      }
+      article {
+        padding: 16px 0;
+        border-top: 1px solid var(--spectrum-gray-200);
+      }
+      .head, .meta, .actions {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: 8px 12px;
+      }
+      .head {
+        justify-content: space-between;
+        margin-bottom: 8px;
+      }
+      .meta {
+        justify-content: space-between;
+        line-height: 1.5;
+      }
+      .version {
+        font-family: var(--spectrum-code-font-family);
+      }
+      progress {
+        display: block;
+        width: 100%;
+        height: 4px;
+        margin: 12px 0;
+        accent-color: var(--spectrum-accent-visual-color);
+      }
+      .actions {
+        margin-top: 12px;
+      }
+      .error {
+        margin: 12px 0 0;
+        padding: 12px;
+        border-left: 3px solid var(--spectrum-negative-visual-color);
+        background: var(--spectrum-background-layer-1-color);
+        color: var(--spectrum-negative-content-color-default);
+        overflow-wrap: anywhere;
+        line-height: 1.5;
+      }
+      details {
+        margin-top: 12px;
+      }
+      summary {
+        cursor: pointer;
+        width: fit-content;
+      }
+      summary:focus-visible {
+        outline: 2px solid var(--spectrum-focus-indicator-color);
+        outline-offset: 3px;
+      }
+      pre {
+        padding: 12px;
+        max-height: 180px;
+        overflow: auto;
+        background: var(--spectrum-background-layer-1-color);
+        border: 1px solid var(--spectrum-gray-200);
+        border-radius: 4px;
+        font-family: var(--spectrum-code-font-family);
+        font-size: var(--spectrum-font-size-75);
+        line-height: 1.5;
+        white-space: pre-wrap;
+        overflow-wrap: anywhere;
+      }
+      @container (max-width: 480px) {
+        .page {
+          padding: 16px;
+        }
+        .head, .meta {
+          align-items: flex-start;
+          flex-direction: column;
+        }
+      }
+    `
+  ];
+  subscribe(model) {
+    this.pending = /* @__PURE__ */ new Set();
+    this.failures = /* @__PURE__ */ new Map();
+    const port = model.updates;
+    if (!port) return [];
+    let previous = new Map(port.list().map(({ id, state, error }) => [id, { state, error }]));
+    return [
+      port.on("items", (items) => {
+        const next = new Map(items.map(({ id, state, error }) => [id, { state, error }]));
+        this.failures = new Map(
+          [...this.failures].filter(([id]) => {
+            const before = previous.get(id);
+            const after = next.get(id);
+            return before && after && before.state === after.state && before.error === after.error;
+          })
+        );
+        previous = next;
+        this.requestUpdate();
+      })
+    ];
+  }
+  focus() {
+    this.focusOn("sp-button, summary");
+  }
+  async act(id, action) {
+    const port = this.model?.updates;
+    if (!port || this.pending.has(id)) return;
+    this.pending = /* @__PURE__ */ new Set([...this.pending, id]);
+    this.failures = new Map([...this.failures].filter(([key2]) => key2 !== id));
+    try {
+      await port.act(id, action);
+    } catch (error) {
+      if (this.model?.updates === port) {
+        this.failures = new Map([
+          ...this.failures,
+          [id, error instanceof Error ? error.message : String(error)]
+        ]);
+      }
+    } finally {
+      if (this.model?.updates === port) {
+        this.pending = new Set([...this.pending].filter((key2) => key2 !== id));
+      }
+    }
+  }
+  #item(item2) {
+    const [variant, label] = states[item2.state];
+    const progress = item2.progress;
+    const error = this.failures.get(item2.id) ?? item2.error;
+    return b`<article data-id=${item2.id} data-state=${item2.state} aria-label=${item2.label}>
+      <div class="head">
+        <strong>${item2.label}</strong>
+        <sp-badge size="s" variant=${variant}>${label}${progress ? ` ${progress.done}/${progress.total}` : ""}</sp-badge>
+      </div>
+      <div class="meta">
+        <span class="version">${item2.from ?? "Not installed"}${item2.to && item2.to !== item2.from ? b` → ${item2.to}` : A}</span>
+        ${item2.checkedAt === null ? b`<span>Not checked yet</span>` : b`<span>Checked <time datetime=${new Date(item2.checkedAt).toISOString()}>${new Date(item2.checkedAt).toLocaleString("en-GB", { dateStyle: "medium", timeStyle: "short" })}</time></span>`}
+      </div>
+      ${progress ? b`<progress aria-label=${`${item2.label}: ${progress.phase === "download" ? "downloading" : "linking"}`} value=${progress.done} max=${progress.total}></progress>` : A}
+      ${error ? b`<div class="error" role="alert">${error}</div>` : A}
+      ${item2.actions.length ? b`<div class="actions">${item2.actions.map((action) => b`<sp-button size="s" variant="secondary" treatment="outline" ?disabled=${this.pending.has(item2.id)} ?pending=${this.pending.has(item2.id)} data-action=${action} @click=${() => void this.act(item2.id, action)}>${actions[action]}</sp-button>`)}</div>` : A}
+      ${item2.log ? b`<details><summary>Install log</summary><pre>${item2.log}</pre></details>` : A}
+    </article>`;
+  }
+  render() {
+    const port = this.model?.updates;
+    return b`<div class="page">
+      <h1>Install / Update</h1>
+      <p class="hint">${!port ? "Update information is not connected." : port.ready() ? "Your agent is ready. Background updates appear here; apply them when it suits you." : "Preparing your agent. You can keep working; this panel closes when the agent is ready."}</p>
+      ${c(
+      port?.list() ?? [],
+      (item2) => item2.id,
+      (item2) => this.#item(item2)
+    )}
+    </div>`;
+  }
+};
+
 // src/app/app.ts
 function railIcon(icon) {
   if (icon.startsWith("sp-icon-")) {
@@ -6777,6 +7027,8 @@ var SliccApp = class extends ThemedElement {
   #resize = null;
   #started = null;
   #saving = false;
+  #updatesPort;
+  #updatesVisibility = null;
   constructor() {
     super();
     this.screen = screenClass(globalThis.innerWidth ?? 1280);
@@ -6797,6 +7049,7 @@ var SliccApp = class extends ThemedElement {
     }
     .shell {
       display: grid;
+      grid-template-columns: minmax(0, 1fr);
       grid-template-rows: 40px minmax(0, 1fr) auto 24px;
       height: 100%;
     }
@@ -6834,11 +7087,12 @@ var SliccApp = class extends ThemedElement {
     }
     .rail.bottom {
       flex-direction: row;
-      justify-content: center;
+      justify-content: safe center;
       width: auto;
       height: 44px;
       padding: 0 8px;
       border-top: 1px solid var(--spectrum-gray-200);
+      overflow-x: auto;
     }
     .rail:empty {
       display: none;
@@ -6846,6 +7100,14 @@ var SliccApp = class extends ThemedElement {
     :host([screen='phone']) footer .hints {
       display: none;
     }
+    :host([screen='phone']) header sp-picker {
+      min-width: 0;
+      width: 0;
+      flex: 1;
+    }
+    :host([screen='phone']) header .spacer {
+      display: none;
+    }
     header {
       display: flex;
       align-items: center;
@@ -6941,7 +7203,8 @@ var SliccApp = class extends ThemedElement {
       }),
       model.files.on("changes", update),
       model.sprinkles.on("sprinkles", update),
-      this.dips.on("change", update)
+      this.dips.on("change", update),
+      ...model.updates ? [model.updates.on("items", update)] : []
     ];
   }
   connectedCallback() {
@@ -6978,8 +7241,28 @@ var SliccApp = class extends ThemedElement {
   }
   updated(changed) {
     if (!this.model) return;
-    if (this.#started !== this.screen) this.#start(this.model);
+    const layout = this.#started !== this.screen;
+    if (layout) this.#start(this.model);
     else if (changed.has("model")) this.#rebind(this.model);
+    this.#updates(layout);
+  }
+  #updates(layout) {
+    const port = this.model?.updates;
+    if (port !== this.#updatesPort) {
+      this.#updatesPort = port;
+      this.#updatesVisibility = port ? new UpdateVisibility(port.ready()) : null;
+    }
+    if (!port || !this.#offers("updates")) return;
+    const change = this.#updatesVisibility?.change(port, layout);
+    if (change === "open") {
+      if (this.dock.has("updates")) this.dock.reveal("updates");
+      else {
+        this.show("updates");
+        if (!port.ready()) this.dock.api.getPanel("updates")?.api.updateParameters({ boot: true });
+      }
+    } else if (this.dock.api.getPanel("updates")?.params?.boot && port.ready() && !port.list().some((item2) => item2.state === "failed")) {
+      this.dock.close("updates");
+    }
   }
   #factories(model) {
     return {
@@ -7072,6 +7355,7 @@ var SliccApp = class extends ThemedElement {
     const item2 = surface(id, this.surfaces);
     if (!item2) return;
     openSurface(this.dock, item2, this.screen);
+    if (id === "updates") this.dock.api.getPanel(id)?.api.updateParameters({ boot: false });
     this.dock.focusPanel(id);
   }
   #sprinkle(id) {
@@ -7150,7 +7434,7 @@ var SliccApp = class extends ThemedElement {
   }
   #menuItem(surface2, index) {
     return b`<sp-menu-item value=${surface2.id}>
-      ${surface2.title}<kbd slot="value">Alt+${index + 1}</kbd>
+      ${surface2.title}${index < 9 ? b`<kbd slot="value">Alt+${index + 1}</kbd>` : A}
     </sp-menu-item>`;
   }
   #offers(id) {
@@ -7174,7 +7458,9 @@ var SliccApp = class extends ThemedElement {
     return b`<button class="link" @click=${() => this.show("changes")}>${changes} ${changes === 1 ? "change" : "changes"}</button>`;
   }
   #status() {
+    const updates = this.#offers("updates") ? updatesStatus(this.model?.updates?.list() ?? []) : null;
     return b`<footer role="status" aria-label="Status">
+      ${updates ? b`<button class="link" aria-label=${`Install / Update: ${updates}`} data-updates @click=${() => this.show("updates")}>${updates}</button>` : A}
       ${this.#agentStatus()}
       ${this.#changes()}
       <slot name="status"></slot>
@@ -7196,7 +7482,7 @@ var SliccApp = class extends ThemedElement {
     )}
           </sp-picker>` : A}
           <span class="spacer"></span>
-          ${this.#offers("chat") ? b`<slicc-tray .model=${this.model}></slicc-tray>` : A}
+          ${this.#offers("chat") ? b`<slicc-tray .model=${this.model} ?compact=${this.screen === "phone"}></slicc-tray>` : A}
           <sp-action-menu size="s" quiet label="View" @change=${this.#view}>
             <sp-icon-view-grid slot="icon"></sp-icon-view-grid>
             <span slot="label">View</span>
@@ -8075,18 +8361,18 @@ function lick(message, handlers) {
     ${message.count && message.count > 1 ? b`<span class="times" title="Coalesced events">×${message.count}</span>` : A}
     ${outcome ? b`<span class="tag">${outcome}</span>` : A}
     <span class="when">${time(message.createdAt)}</span>`;
-  const actions = decide ? b`<div class="decide">
+  const actions2 = decide ? b`<div class="decide">
         <sp-button size="s" variant="accent" @click=${() => handlers.resolve(message.id, "confirmed")}>Allow</sp-button>
         <sp-button size="s" variant="secondary" treatment="outline" @click=${() => handlers.resolve(message.id, "dismissed")}>Deny</sp-button>
       </div>` : A;
   if (!message.body) {
-    return b`<div class="lick" data-id=${message.id} data-channel=${message.channel}><div class="lick-head">${head2}</div>${actions}</div>`;
+    return b`<div class="lick" data-id=${message.id} data-channel=${message.channel}><div class="lick-head">${head2}</div>${actions2}</div>`;
   }
   const details = b`<details class="lick" data-id=${message.id} data-channel=${message.channel}>
     <summary class="lick-head"><span class="chevron" aria-hidden="true">▸</span>${head2}</summary>
     <pre class="output">${message.body}</pre>
   </details>`;
-  return decide ? b`<div class="pending">${details}${actions}</div>` : details;
+  return decide ? b`<div class="pending">${details}${actions2}</div>` : details;
 }
 var messageCss = i`
   .message {
@@ -10889,6 +11175,9 @@ var SliccTray = class extends ModelElement {
       .chip:hover {
         background: var(--spectrum-gray-100);
       }
+      :host([compact]) .chip > span:not(.dot) {
+        display: none;
+      }
       .chip:focus-visible {
         outline: 2px solid var(--spectrum-focus-indicator-color);
       }
@@ -62248,6 +62537,7 @@ var elements = {
   "slicc-sprinkle": SliccSprinkle,
   "slicc-lucide": SliccLucide,
   "slicc-tray": SliccTray,
+  "slicc-updates": SliccUpdates,
   "slicc-app": SliccApp
 };
 function define2() {
@@ -62275,6 +62565,7 @@ export {
   SliccFileTree,
   SliccFileView,
   SliccFiles,
+  SliccUpdates,
   define2 as define,
   grammarBase,
   resolveColor,