@abot-ai/runtime 1.6.0 → 1.7.0

package/dist/src/web-ui/app/spark-chat-feature.js

@@ -15,11 +15,26 @@ export function createSparkChatFeature({ dom, state: appState, client, shell, re
   let configuration;
   let readState;
   let environmentId = "";
+  let available = false;
+  let accessRevision = 0;
   let sync;
   let settings;
   let conversation;
   let awaitingOpening = false;
-  const isAvailable = () => client.supportsSparkChat?.() === true;
+  let restoringOpen = false;
+  function isSparkAvailable() {
+    if (client.supportsSparkChat?.() !== true) return false;
+    return shell.isWorkspaceAvailable("learning");
+  }
+  function canCompleteSparkOpening(scope, revision) {
+    if (!isSparkAvailable()) return false;
+    if (scope !== getEnvironmentId()) return false;
+    return revision === accessRevision;
+  }
+  function hasSparkAccessChanged(nextEnvironment, nextAvailable) {
+    if (environmentId !== nextEnvironment) return true;
+    return available !== nextAvailable;
+  }
   const getSubmissionBlock = () => {
     if (!configuration?.sessionId) return { message: "SPARK conversation is loading." };
     if (isSparkModelUnavailable(configuration)) return { message: "Choose a model under Proactive mode in SPARK settings." };
@@ -68,7 +83,7 @@ export function createSparkChatFeature({ dom, state: appState, client, shell, re
     onComposerStateChange: (sending) => sync?.composerChanged(sending),
   });
   sync = createSparkChatSync({
-    client, getEnvironmentId, conversation, isAvailable,
+    client, getEnvironmentId, conversation, isAvailable: isSparkAvailable,
     onConfiguration: (next) => {
       const changedModel = configuration?.modelProfileId !== next.modelProfileId;
       configuration = next; settings?.render(next, getEnvironmentId());
@@ -108,37 +123,75 @@ export function createSparkChatFeature({ dom, state: appState, client, shell, re
   panel.dom.settingsButton.addEventListener("click", openSettings);
   panel.onToggle((opened) => {
     if (!opened) { conversation.view.closeFilePreview(); return; }
-    if (!configuration) { awaitingOpening = true; void sync.refresh(); return; }
-    reading.open(); conversation.render(); conversation.update();
-    void sync.refresh();
+    if (!isSparkAvailable()) { panel.setOpen(false, { focus: false }); return; }
+    if (!restoringOpen) void open();
   });
 
   async function open(messageId, reference) {
-    if (!isAvailable()) return false;
+    if (!isSparkAvailable()) return false;
     const scope = getEnvironmentId();
-    try { if (!configuration || reference !== undefined) await sync.refresh({ wait: true }); }
-    catch (error) { shell.showToast(`SPARK could not be opened: ${error.message}`, "failed"); return false; }
-    if (scope !== getEnvironmentId()) return false;
+    const revision = accessRevision;
+    try { await sync.refresh({ wait: true }); }
+    catch (error) {
+      if (!canCompleteSparkOpening(scope, revision)) return false;
+      shell.showToast(`SPARK could not be opened: ${error.message}`, "failed");
+      return false;
+    }
+    if (!canCompleteSparkOpening(scope, revision)) return false;
     if (!configuration) return false;
-    panel.setOpen(true);
-    const target = resolveSparkMessageTarget(configuration.snapshot?.messages, messageId, reference);
-    reading.open(target); conversation.render(); conversation.update();
+    const requestedTarget = messageId ?? readState?.unreadMessageIds?.[0];
+    if (!await ensureSparkTargetHistory(requestedTarget, reference, scope, revision)) return false;
+    if (!canCompleteSparkOpening(scope, revision)) return false;
+    const target = resolveSparkMessageTarget(conversation.state.messages, requestedTarget, reference);
+    reading.open(target); restoringOpen = true; panel.setOpen(true); restoringOpen = false;
+    conversation.render(); conversation.update();
     return true;
   }
+  async function ensureSparkTargetHistory(target, reference, scope, revision) {
+    if (target == null) return true;
+    if (reference === null) return true;
+    if (resolveSparkMessageTarget(conversation.state.messages, target, reference)) return true;
+    try {
+      await conversation.session.openSession(configuration.sessionId, { preserveCurrentWindow: true, page: {
+        targetMessageId: String(target), targetCreatedAt: reference?.createdAt,
+        targetRequestId: reference?.requestId ?? undefined,
+      } });
+    } catch (error) {
+      if (!canCompleteSparkOpening(scope, revision)) return false;
+      shell.showToast(`SPARK history unavailable: ${error.message}`, "failed");
+      return false;
+    }
+    return canCompleteSparkOpening(scope, revision);
+  }
+  function shouldRestoreUnavailableSparkFocus(nextAvailable) {
+    if (nextAvailable) return false;
+    const home = dom.homeWorkspaceButton;
+    if (!home) return false;
+    if (home.disabled) return false;
+    if (home.hidden) return false;
+    if (home.inert) return false;
+    if (home.closest?.("[hidden], [inert]")) return false;
+    const focused = document.activeElement;
+    if (!focused) return false;
+    if (panel.root?.contains(focused)) return true;
+    return panel.dom.launcherButton?.contains(focused) === true;
+  }
   function environmentChanged() {
     const next = getEnvironmentId();
-    panel.setAvailable(isAvailable());
-    if (environmentId === next) return;
-    environmentId = next;
+    const nextAvailable = isSparkAvailable();
+    if (shouldRestoreUnavailableSparkFocus(nextAvailable)) dom.homeWorkspaceButton.focus({ preventScroll: true });
+    panel.setAvailable(nextAvailable);
+    if (!hasSparkAccessChanged(next, nextAvailable)) return;
+    environmentId = next; available = nextAvailable; accessRevision += 1;
     configuration = undefined; readState = undefined;
     awaitingOpening = panel.isOpen();
     sync.reset(); reading.reset(); notices.reset(); conversation.reset(); panel.hideNotice();
     settings.render(undefined, next);
-    if (isAvailable()) void sync.refresh({ consolidated: true });
+    if (isSparkAvailable()) void sync.refresh({ consolidated: true });
   }
   function handleRealtime(message) {
     environmentChanged();
-    if (!isAvailable()) return;
+    if (!isSparkAvailable()) return;
     const environment = message.environmentId || message.environment;
     if (environment && environment !== getEnvironmentId()) return;
     if (message.type === "learning.changed") { sync.modelChanged(); return; }
@@ -160,14 +213,17 @@ export function createSparkChatFeature({ dom, state: appState, client, shell, re
     open, environmentChanged,
     prepareEnvironmentChange: conversation.prepareEnvironmentChange,
     async openSession(sessionId, messageId, reference) {
-      if (!isAvailable() || !sessionId) return false;
+      if (!isSparkAvailable()) return false;
+      if (!sessionId) return false;
       const scope = getEnvironmentId();
+      const revision = accessRevision;
       try { if (!configuration) await sync.refresh({ wait: true }); }
       catch (error) {
+        if (!canCompleteSparkOpening(scope, revision)) return false;
         shell.showToast(`SPARK could not be opened: ${error.message}`, "failed");
         return true;
       }
-      if (scope !== getEnvironmentId()) return true;
+      if (!canCompleteSparkOpening(scope, revision)) return true;
       if (sessionId !== configuration?.sessionId) return false;
       return open(messageId, reference);
     },
@@ -177,6 +233,7 @@ export function createSparkChatFeature({ dom, state: appState, client, shell, re
       realtime.subscribeConnectionChanged?.(() => conversation.update());
       realtime.subscribeConnected(() => { environmentChanged(); void sync.refresh({ consolidated: true, rehydrate: true }); });
       dom.environmentSelect.addEventListener("change", () => queueMicrotask(environmentChanged));
+      shell.subscribeRuntimeAvailabilityChange(environmentChanged);
       shell.subscribeWorkspaceChange(() => { environmentChanged(); if (panel.isOpen()) reading.scheduleRead(); });
       document.addEventListener("visibilitychange", () => {
         if (document.visibilityState === "visible") void sync.refresh({ consolidated: true });

package/dist/src/web-ui/app/styles/11-product-links.css

@@ -0,0 +1,30 @@
+/* Official website links in the brand and configuration header. */
+.product-site-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  color: var(--muted);
+  font-size: var(--font-size-xs);
+  line-height: 18px;
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.product-site-link:hover {
+  color: var(--text-strong);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.product-site-link:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 3px;
+  border-radius: 2px;
+}
+
+@media (min-width: 761px) {
+  .workspace-brand {
+    flex-direction: column;
+    gap: 1px;
+  }
+}

package/dist/src/web-ui/app/styles/41-plugin-configuration.css

@@ -0,0 +1,79 @@
+.plugin-configuration-fields {
+  border: 0;
+  padding: 0;
+  margin: 1.5rem 0;
+  display: grid;
+  gap: 1rem;
+  min-width: 0;
+}
+.plugin-configuration-fields legend {
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+.plugin-configuration-fields > p,
+.plugin-configuration-fields small {
+  color: var(--muted);
+  font-size: 0.875rem;
+}
+.plugin-configuration-fields label {
+  display: grid;
+  gap: 0.4rem;
+}
+.plugin-configuration-fields input:not([type="checkbox"]),
+.plugin-configuration-fields textarea,
+.plugin-configuration-fields select {
+  width: 100%;
+  box-sizing: border-box;
+}
+.plugin-configuration-fields textarea {
+  resize: vertical;
+  font-family: monospace;
+}
+.plugin-configuration-fields .plugin-setting-checkbox {
+  display: flex;
+  align-items: center;
+}
+.plugin-secret-field {
+  display: grid;
+  gap: 0.5rem;
+}
+.plugin-secret-field input[hidden] {
+  display: none;
+}
+.plugin-configuration-dialog {
+  color: var(--text);
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  width: min(38rem, calc(100vw - 2rem));
+  max-height: calc(100dvh - 3rem);
+  padding: 1.5rem;
+}
+.plugin-configuration-dialog::backdrop {
+  background: rgb(0 0 0 / 55%);
+}
+.plugin-configuration-dialog h2 {
+  margin: 0 0 1rem;
+}
+.plugin-configuration-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.75rem;
+  margin-top: 1rem;
+}
+
+.plugin-setting-source {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  margin-top: 0.3rem;
+}
+.plugin-setting-source button {
+  border: 0;
+  padding: 0;
+  background: transparent;
+  color: var(--muted);
+  font-size: 0.8rem;
+  text-decoration: underline;
+}

package/dist/src/web-ui/app/styles/41-plugin-discovery.css

@@ -0,0 +1,132 @@
+.plugin-workspace {
+  width: 100%;
+}
+.plugin-workspace > .config-category-nav {
+  grid-template-columns: repeat(2, minmax(0, 180px));
+  margin-bottom: 4px;
+}
+.plugin-discovery {
+  display: grid;
+  gap: 28px;
+  max-width: 880px;
+  margin: 0 auto;
+  padding: 12px 0 24px;
+}
+.plugin-marketplace-card,
+.plugin-source-card {
+  padding: 0;
+  background: transparent;
+}
+.plugin-source-card {
+  border-top: 1px solid var(--config-line);
+  padding-top: 28px;
+}
+.plugin-marketplace-card h2,
+.plugin-source-card h2 {
+  margin: 0 0 10px;
+  font-size: 20px;
+  font-weight: 400;
+}
+.plugin-marketplace-card p,
+.plugin-source-card > p {
+  color: var(--muted);
+  line-height: 1.6;
+  max-width: 66ch;
+}
+.plugin-marketplace-card a {
+  display: inline-block;
+  color: var(--text);
+}
+.plugin-source-card form,
+.plugin-source-card label {
+  display: grid;
+  gap: 8px;
+}
+.plugin-source-card form {
+  gap: 16px;
+  margin-top: 20px;
+}
+.plugin-source-card input {
+  width: 100%;
+  box-sizing: border-box;
+}
+.plugin-source-card form > button {
+  justify-self: start;
+}
+.plugin-source-options {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+}
+.plugin-source-card small {
+  color: var(--muted);
+  font-weight: normal;
+}
+.plugin-install-review {
+  margin-top: 24px;
+  padding-top: 20px;
+  border-top: 1px solid var(--config-line);
+}
+.plugin-install-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+.plugin-install-heading h3 {
+  margin: 0;
+}
+.plugin-install-heading p {
+  margin: 6px 0 0;
+  color: var(--muted);
+  font-size: 12px;
+}
+.plugin-install-review dl {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 8px 16px;
+  font-size: 12px;
+}
+.plugin-install-review dd {
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+.plugin-install-review dt {
+  color: var(--muted);
+}
+.plugin-install-capabilities {
+  list-style: none;
+  padding: 0;
+  display: grid;
+  gap: 12px;
+}
+.plugin-install-capabilities li {
+  border-bottom: 1px solid var(--config-line);
+  padding: 12px 0;
+}
+.plugin-install-capabilities p {
+  margin: 6px 0;
+  color: var(--muted);
+}
+.plugin-install-capabilities span {
+  font-size: 12px;
+  overflow-wrap: anywhere;
+}
+.plugin-install-trust {
+  padding: 8px 0;
+  color: var(--muted);
+  line-height: 1.6;
+}
+@media (max-width: 620px) {
+  .plugin-source-options {
+    grid-template-columns: 1fr;
+  }
+  .plugin-marketplace-card a {
+    display: block;
+    margin: 16px 0 0;
+  }
+  .plugin-install-review dl {
+    grid-template-columns: 1fr;
+  }
+}

package/dist/src/web-ui/app/styles/41-plugin-management.css

@@ -375,3 +375,9 @@
     padding: 16px;
   }
 }
+
+.plugin-card-actions {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}

package/dist/src/web-ui/app/styles/42-model-plugin-permissions.css

@@ -0,0 +1,173 @@
+.model-plugin-permissions {
+  min-width: 0;
+}
+
+.model-plugin-row > details > summary {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 48px;
+  min-width: 0;
+  cursor: pointer;
+  list-style: none;
+}
+
+.model-plugin-row > details > summary::-webkit-details-marker {
+  display: none;
+}
+
+.model-plugin-row > details > summary::before {
+  content: "";
+  flex: 0 0 6px;
+  width: 6px;
+  height: 6px;
+  margin-inline: 2px 4px;
+  border-inline-end: 1px solid var(--muted);
+  border-bottom: 1px solid var(--muted);
+  transform: rotate(-45deg);
+}
+
+.model-plugin-row > details[open] > summary::before {
+  transform: rotate(45deg);
+}
+
+.model-plugin-permissions summary:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 3px;
+}
+
+.model-plugin-summary-count,
+.model-plugin-global-note {
+  color: var(--muted);
+  font-size: var(--font-size-xs);
+}
+
+.model-plugin-summary-count {
+  margin-inline-start: auto;
+  text-align: end;
+}
+
+.model-plugin-permissions-body {
+  display: grid;
+  gap: 14px;
+  min-width: 0;
+  padding: 4px 0 12px;
+}
+
+.model-plugin-help,
+.model-plugin-description,
+.model-plugin-policy,
+.model-plugin-saved-rules p {
+  margin: 0;
+  color: var(--muted);
+  font-size: var(--font-size-xs);
+  line-height: 1.6;
+  overflow-wrap: anywhere;
+}
+
+.model-plugin-list {
+  min-width: 0;
+  border: 1px solid var(--config-line);
+  border-radius: 8px;
+}
+
+.model-plugin-row {
+  position: relative;
+  min-width: 0;
+  padding-inline: 12px;
+  border-top: 1px solid var(--config-line);
+}
+
+.model-plugin-row:first-child {
+  border-top: 0;
+}
+
+.model-plugin-row > details > summary {
+  padding-inline-end: 56px;
+}
+
+.model-plugin-name {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  font-size: var(--font-size-sm);
+}
+
+.model-plugin-row-status {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  gap: 4px 10px;
+  margin-inline-start: auto;
+}
+
+.model-plugin-master-switch {
+  position: absolute;
+  inset-block-start: 2px;
+  inset-inline-end: 12px;
+  width: 44px;
+  margin: 0;
+}
+
+.model-plugin-details-body {
+  display: grid;
+  gap: 10px;
+  padding: 0 0 14px 16px;
+}
+
+.model-plugin-policy {
+  color: var(--amber);
+}
+
+.model-plugin-capability-list {
+  overflow: visible;
+}
+
+.model-plugin-saved-rules summary {
+  cursor: pointer;
+  color: var(--muted);
+  font-size: var(--font-size-xs);
+}
+
+.model-plugin-saved-rules summary span {
+  margin-inline-start: 5px;
+}
+
+.model-plugin-saved-rules p {
+  margin-top: 10px;
+}
+
+.model-plugin-saved-rules ul {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px 16px;
+  padding: 0;
+  list-style: none;
+}
+
+.model-plugin-saved-rules code {
+  font-size: var(--font-size-xs);
+  overflow-wrap: anywhere;
+}
+
+@media (max-width: 600px) {
+  .model-plugin-permissions > summary {
+    flex-wrap: wrap;
+    padding-block: 10px;
+  }
+
+  .model-plugin-summary-count {
+    width: 100%;
+    padding-inline-start: 16px;
+    text-align: start;
+  }
+
+  .model-plugin-global-note {
+    display: none;
+  }
+
+  .model-plugin-row-status .plugin-selection-state {
+    padding: 4px 5px;
+    font-size: 11px;
+  }
+}