@ai-ecoverse/slicc-spectrum 1.50.0 → 1.51.0

package/dist/slicc-ui.js

@@ -21001,10 +21001,270 @@ var SliccApp = class extends ThemedElement {
         </main>
         ${rails.bottom}
       </div>
+      <slicc-approvals .model=${this.model}></slicc-approvals>
     </sp-theme></div>`;
   }
 };
 
+// src/app/approvals.ts
+function countdown(ms) {
+  const seconds = Math.max(0, Math.ceil(ms / 1e3));
+  return `${Math.floor(seconds / 60)}:${String(seconds % 60).padStart(2, "0")}`;
+}
+function asking(approval) {
+  const { kind, name, where: where2 } = approval.requester;
+  const place2 = where2 ? ` in ${where2}` : "";
+  return kind === "user" ? `You ran this with sudo${place2} (as ${name})` : `${name} wants to run this with sudo${place2}`;
+}
+function sudo(approval) {
+  const as = approval.target && approval.target !== "root" ? `-u ${approval.target} ` : "";
+  return `sudo ${as}${approval.command}`;
+}
+function waiting(model, now) {
+  return [...model?.approvals?.list() ?? []].filter((approval) => approval.expiresAt > now).sort((a22, b13) => a22.createdAt - b13.createdAt);
+}
+function gone(reason) {
+  return reason === "expired" ? "expired" : "elsewhere";
+}
+var SliccApprovals = class extends ModelElement {
+  static properties = {
+    ...ModelElement.properties,
+    now: { state: true },
+    busy: { state: true },
+    failure: { state: true },
+    gone: { state: true }
+  };
+  arming = 500;
+  #armed = false;
+  #arming;
+  #showing = null;
+  #pending = /* @__PURE__ */ new Set();
+  #done = /* @__PURE__ */ new Set();
+  #port;
+  #ended = /* @__PURE__ */ new Map();
+  #timer = null;
+  #shown = "";
+  #trigger = null;
+  constructor() {
+    super();
+    this.now = Date.now();
+    this.busy = "";
+    this.failure = null;
+    this.gone = null;
+  }
+  static styles = [
+    dialogStyles,
+    i`
+      :host {
+        display: contents;
+      }
+      .command {
+        margin: var(--swc-spacing-200) 0 0;
+        padding: var(--swc-spacing-200) var(--swc-spacing-300);
+        border-radius: var(--swc-corner-radius-medium-default);
+        background: var(--swc-gray-100);
+        font-family: var(--swc-code-font-family-stack);
+        font-size: var(--swc-font-size-100);
+        white-space: pre-wrap;
+        overflow-wrap: anywhere;
+        max-block-size: 8lh;
+        overflow: auto;
+      }
+      .cwd,
+      .hint,
+      .timer,
+      .more {
+        margin-block-start: var(--swc-spacing-100);
+        color: var(--swc-neutral-subdued-content-color-default);
+        font-size: var(--swc-font-size-75);
+      }
+      .cwd {
+        overflow-wrap: anywhere;
+      }
+      .timer {
+        margin-block-start: var(--swc-spacing-300);
+        font-variant-numeric: tabular-nums;
+      }
+      .problem {
+        display: flex;
+        align-items: flex-start;
+        gap: var(--swc-spacing-75);
+        margin-block-start: var(--swc-spacing-200);
+        color: var(--swc-negative-content-color-default);
+        --swc-icon-color: var(--swc-negative-content-color-default);
+      }
+    `
+  ];
+  subscribe(model) {
+    const port = model.approvals;
+    if (port !== this.#port) {
+      this.#port = port;
+      this.#showing = null;
+      this.gone = null;
+      this.busy = "";
+      this.failure = null;
+      this.#pending.clear();
+      this.#done.clear();
+      this.#ended.clear();
+    }
+    if (!port) return [];
+    return [
+      port.on("approvals", () => {
+        this.now = Date.now();
+        this.requestUpdate();
+      }),
+      port.on("ended", ({ id, reason }) => {
+        this.#ended.set(id, reason);
+        if (this.gone?.approval.id === id) {
+          this.gone = reason === "withdrawn" ? null : { ...this.gone, reason: gone(reason) };
+          if (!this.gone) this.#showing = null;
+        }
+        this.requestUpdate();
+      })
+    ];
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.#tick(false);
+    clearTimeout(this.#arming);
+    this.#showing = null;
+  }
+  #tick(on) {
+    if (on && !this.#timer) this.#timer = setInterval(() => this.now = Date.now(), 1e3);
+    if (!on && this.#timer) {
+      clearInterval(this.#timer);
+      this.#timer = null;
+    }
+  }
+  async decide(approval, decision) {
+    const port = this.model?.approvals;
+    if (!port?.decide || this.busy || decision !== "deny" && !this.#armed) return;
+    this.busy = decision;
+    this.failure = null;
+    this.#pending.add(approval.id);
+    try {
+      await port.decide(approval.id, decision);
+      this.#done.add(approval.id);
+    } catch (error) {
+      this.failure = {
+        id: approval.id,
+        message: error instanceof Error ? error.message : String(error)
+      };
+    } finally {
+      this.#pending.delete(approval.id);
+      this.busy = "";
+    }
+  }
+  #current() {
+    return this.model?.approvals?.decide ? waiting(this.model, this.now) : [];
+  }
+  willUpdate(changed) {
+    super.willUpdate(changed);
+    const list3 = this.#current();
+    const showing = this.#showing;
+    if (showing && this.#pending.has(showing.id)) return;
+    if (showing && !this.gone && !this.#done.has(showing.id) && !list3.some((approval) => approval.id === showing.id)) {
+      const reason = this.#ended.get(showing.id) ?? (showing.expiresAt <= this.now ? "expired" : "answered");
+      if (reason !== "withdrawn") this.gone = { approval: showing, reason: gone(reason) };
+    }
+    if (this.gone) return;
+    const next = list3[0] ?? null;
+    if (next?.id === showing?.id) return;
+    this.#showing = next;
+    clearTimeout(this.#arming);
+    this.#armed = false;
+    this.#arming = setTimeout(() => this.#armed = true, this.arming);
+  }
+  updated(changed) {
+    super.updated(changed);
+    const all2 = this.model?.approvals?.list() ?? [];
+    this.#tick(this.isConnected && all2.length > 0);
+    const dialog = this.renderRoot.querySelector("dialog");
+    const key2 = dialog ? `${dialog.dataset.approval}:${dialog.dataset.gone ?? ""}` : "";
+    if (key2 === this.#shown) return;
+    if (dialog && !this.#shown) this.#trigger = focused();
+    this.#shown = key2;
+    if (!dialog) {
+      if (this.#trigger?.isConnected) this.#trigger.focus();
+      this.#trigger = null;
+      return;
+    }
+    if (!dialog.open) dialog.showModal();
+    const first2 = dialog.querySelector("[data-action=deny], [data-action=close]");
+    void first2.updateComplete.then(() => first2.focus());
+  }
+  close() {
+    this.gone = null;
+    this.#showing = null;
+  }
+  #cancel(event2, approval) {
+    event2.preventDefault();
+    if (this.gone) this.close();
+    else void this.decide(approval, "deny");
+  }
+  #button(approval, decision, label, variant) {
+    return b`<swc-button
+      slot="button"
+      variant=${variant}
+      fill-style=${variant === "accent" ? A : "outline"}
+      data-action=${decision}
+      ?pending=${this.busy === decision}
+      ?disabled=${!!this.busy && this.busy !== decision}
+      @click=${() => this.decide(approval, decision)}
+      >${label}</swc-button
+    >`;
+  }
+  #dialog(approval, key2, content) {
+    return i17(
+      key2,
+      b`<dialog role="alertdialog" aria-labelledby="title" aria-describedby="asking" data-approval=${approval.id} data-kind=${approval.kind} data-requester=${approval.requester.kind} data-gone=${this.gone?.reason ?? A} @cancel=${(event2) => this.#cancel(event2, approval)}>${content}</dialog>`
+    );
+  }
+  #request(approval) {
+    return b`<p id="asking">${asking(approval)}:</p>
+      <pre class="command" data-command>${sudo(approval)}</pre>`;
+  }
+  render() {
+    if (this.gone) {
+      const { approval: approval2, reason } = this.gone;
+      return this.#dialog(
+        approval2,
+        `gone:${approval2.id}`,
+        b`<sp-alert-dialog variant="information">
+          <h2 id="title" slot="heading">${reason === "expired" ? "Sudo request timed out" : "Answered in another tab"}</h2>
+          ${this.#request(approval2)}
+          ${reason === "expired" ? b`<p class="timer" data-timer>Denied because nobody answered in time.</p>` : A}
+          <swc-button slot="button" variant="secondary" fill-style="outline" data-action="close" @click=${() => this.close()}>Close</swc-button>
+        </sp-alert-dialog>`
+      );
+    }
+    const held = this.#showing && this.#pending.has(this.#showing.id) ? this.#showing : null;
+    const list3 = this.#current();
+    const [approval, ...rest] = held ? [held, ...list3.filter(({ id }) => id !== held.id)] : list3;
+    if (!approval) return A;
+    const failure2 = this.failure?.id === approval.id ? this.failure.message : "";
+    return this.#dialog(
+      approval,
+      approval.id,
+      b`<sp-alert-dialog variant="warning">
+          <h2 id="title" slot="heading">Allow sudo?</h2>
+          ${this.#request(approval)}
+          ${approval.cwd ? b`<p class="cwd">In ${approval.cwd}</p>` : A}
+          ${approval.always ? b`<p class="hint">Always allow lets ${approval.requester.name} run exactly this command with sudo without asking again.</p>` : A}
+          ${failure2 ? b`<p class="problem" role="alert" data-error><swc-icon-alert-triangle size="s" aria-hidden="true"></swc-icon-alert-triangle><span>${failure2}</span></p>` : A}
+          <p class="timer" data-timer>Denied automatically in ${countdown(approval.expiresAt - this.now)}.</p>
+          ${rest.length ? b`<p class="more" data-more>${rest.length === 1 ? "1 more request is waiting." : `${rest.length} more requests are waiting.`}</p>` : A}
+          ${this.#button(approval, "deny", "Deny", "secondary")}
+          ${approval.always ? this.#button(approval, "always", "Always allow", "secondary") : A}
+          ${this.#button(approval, "once", "Allow once", "accent")}
+        </sp-alert-dialog>`
+    );
+  }
+};
+function deadline(at) {
+  return new Date(at).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+}
+
 // node_modules/@adobe/spectrum-wc/dist/components/close-button/close-button.js
 var t77 = i`:host{display:inline-flex;vertical-align:top}*{box-sizing:border-box}.swc-CloseButton{--_swc-close-button-border-width: 2px;-webkit-tap-highlight-color:transparent;display:inline-flex;position:relative;align-items:center;justify-content:center;inline-size:var(--swc-close-button-size, var(--swc-component-height-100));block-size:var(--swc-close-button-size, var(--swc-component-height-100));padding:0;margin:0;color:var(--swc-close-button-icon-color-default, var(--swc-gray-800));background-color:var(--swc-close-button-background-color-default, transparent);border-color:transparent;border-style:solid;border-width:var(--_swc-close-button-border-width);border-radius:var(--swc-close-button-border-radius, 50%);overflow:visible;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;outline:0 solid transparent;transition-timing-function:cubic-bezier(.45,0,.4,1);transition-duration:.13s;transition-property:outline,border-color,color,background-color,transform}.swc-CloseButton:focus-visible{color:var(--swc-close-button-icon-color-focus, var(--swc-gray-900));background-color:var(--swc-close-button-background-color-focus, var(--swc-gray-100));outline:var(--swc-close-button-focus-indicator-thickness, 2px) solid var(--swc-close-button-focus-indicator-color, var(--swc-blue-800));outline-offset:var(--swc-close-button-focus-indicator-gap, 2px)}.swc-CloseButton:hover{color:var(--swc-close-button-icon-color-hover, var(--swc-gray-900));background-color:var(--swc-close-button-background-color-hover, var(--swc-gray-100))}.swc-CloseButton:active{color:var(--swc-close-button-icon-color-down, var(--swc-gray-900));background-color:var(--swc-close-button-background-color-down, var(--swc-gray-100));transform:perspective(var(--swc-close-button-size, var(--swc-component-height-100))) translateZ(-2px);will-change:transform}.swc-CloseButton:disabled:is(*,:hover){color:var(--swc-close-button-icon-color-disabled, var(--swc-gray-400));background-color:var(--swc-close-button-background-color-default, transparent);cursor:default;transform:none}.swc-CloseButton-icon{display:block;flex-shrink:0;inline-size:var(--swc-close-button-icon-size, var(--swc-ui-icon-medium));block-size:var(--swc-close-button-icon-size, var(--swc-ui-icon-medium))}.swc-CloseButton-icon swc-ui-icon{display:block;inline-size:100%;block-size:100%}:host([size=\"s\"]){--swc-close-button-icon-size: var(--swc-ui-icon-small);--swc-close-button-size: var(--swc-component-height-75)}:host([size=\"m\"]){--swc-close-button-icon-size: var(--swc-ui-icon-medium);--swc-close-button-size: var(--swc-component-height-100)}:host([size=\"l\"]){--swc-close-button-icon-size: var(--swc-ui-icon-large);--swc-close-button-size: var(--swc-component-height-200)}:host([size=\"xl\"]){--swc-close-button-icon-size: var(--swc-ui-icon-extra-large);--swc-close-button-size: var(--swc-component-height-300)}:host([static-color=\"white\"]){--swc-close-button-background-color-default: transparent;--swc-close-button-background-color-down: rgba(255, 255, 255, .11);--swc-close-button-background-color-focus: rgba(255, 255, 255, .11);--swc-close-button-background-color-hover: rgba(255, 255, 255, .11);--swc-close-button-focus-indicator-color: var(--swc-white);--swc-close-button-icon-color-default: rgba(255, 255, 255, .85);--swc-close-button-icon-color-disabled: var(--swc-transparent-white-100);--swc-close-button-icon-color-down: rgba(255, 255, 255, .94);--swc-close-button-icon-color-focus: rgba(255, 255, 255, .94);--swc-close-button-icon-color-hover: rgba(255, 255, 255, .94)}:host([static-color=\"black\"]){--swc-close-button-background-color-default: transparent;--swc-close-button-background-color-down: rgba(0, 0, 0, .09);--swc-close-button-background-color-focus: rgba(0, 0, 0, .09);--swc-close-button-background-color-hover: rgba(0, 0, 0, .09);--swc-close-button-focus-indicator-color: var(--swc-black);--swc-close-button-icon-color-default: rgba(0, 0, 0, .84);--swc-close-button-icon-color-disabled: var(--swc-transparent-black-100);--swc-close-button-icon-color-down: rgba(0, 0, 0, .93);--swc-close-button-icon-color-focus: rgba(0, 0, 0, .93);--swc-close-button-icon-color-hover: rgba(0, 0, 0, .93)}`;
 
@@ -25396,6 +25656,10 @@ var SliccNotices = class extends ModelElement {
     p {
       margin: 0;
     }
+    code {
+      font-family: var(--swc-code-font-family-stack);
+      overflow-wrap: anywhere;
+    }
     .actions {
       display: flex;
       flex-wrap: wrap;
@@ -25419,7 +25683,10 @@ var SliccNotices = class extends ModelElement {
       this.pending = /* @__PURE__ */ new Map();
       this.failures = /* @__PURE__ */ new Map();
     }
-    const tabs = model.tabs ? [model.tabs.on("tabs", () => this.requestUpdate())] : [];
+    const tabs = [
+      ...model.tabs ? [model.tabs.on("tabs", () => this.requestUpdate())] : [],
+      ...model.approvals ? [model.approvals.on("approvals", () => this.requestUpdate())] : []
+    ];
     if (!port) return tabs;
     return [
       ...tabs,
@@ -25484,12 +25751,23 @@ var SliccNotices = class extends ModelElement {
       </div>
     </div>`;
   }
+  #approval(approval) {
+    return b`<div class="notice" role="status" data-approval-notice=${approval.id} data-tone="warning">
+      <swc-icon-alert-triangle></swc-icon-alert-triangle>
+      <div class="text">
+        <span class="title">Waiting for sudo approval</span>
+        <p>${asking(approval)}: <code>${sudo(approval)}</code></p>
+        <p>Answer it in the tab running SLICC. Denied automatically at ${deadline(approval.expiresAt)}.</p>
+      </div>
+    </div>`;
+  }
   render() {
     const port = this.model?.notices;
     const notices = (port?.list() ?? []).filter((notice) => !this.dismissed.has(notice.id));
     const tabs = this.#tabs();
-    if (!notices.length && tabs === A) return A;
-    return b`<div class="notices">${tabs}${c(
+    const approvals = this.model?.approvals?.decide ? [] : waiting(this.model, Date.now());
+    if (!notices.length && !approvals.length && tabs === A) return A;
+    return b`<div class="notices">${tabs}${approvals.map((approval) => this.#approval(approval))}${c(
       notices,
       (notice) => notice.id,
       (notice) => this.#notice(notice)
@@ -77732,6 +78010,7 @@ var elements = {
   "slicc-updates": SliccUpdates,
   "slicc-network": SliccNetwork,
   "slicc-notices": SliccNotices,
+  "slicc-approvals": SliccApprovals,
   "slicc-confirm": SliccConfirm,
   "slicc-prompt": SliccPrompt,
   "slicc-app": SliccApp
@@ -77750,6 +78029,7 @@ export {
   Emitter,
   SliccAgents,
   SliccApp,
+  SliccApprovals,
   SliccBrowser,
   SliccChanges,
   SliccChat,