@jskit-ai/shell-web 0.1.208 → 0.1.209

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jskit-ai/shell-web",
-  "version": "0.1.208",
+  "version": "0.1.209",
   "type": "module",
   "scripts": {
     "test": "node --test"
@@ -31,7 +31,7 @@
     "@mdi/js": "^7.4.47"
   },
   "peerDependencies": {
-    "@jskit-ai/kernel": "0.1.204",
+    "@jskit-ai/kernel": "0.1.205",
     "pinia": "^3.0.4",
     "vue": "^3.5.13",
     "vue-router": "^5.0.4",

package/src/client/components/ShellErrorHost.vue

@@ -106,13 +106,17 @@ function dismiss(entry) {
   store.dismiss(entry.channel, entry.id);
 }
 
-function runAction(entry) {
-  if (!entry || !entry.action || typeof entry.action.handler !== "function") {
+function actionsFor(entry) {
+  return entry ? [entry.action, ...entry.additionalActions].filter(Boolean) : [];
+}
+
+async function runAction(entry, action) {
+  if (!entry || typeof action?.handler !== "function") {
     return;
   }
 
   try {
-    entry.action.handler(entry);
+    await action.handler(entry);
   } catch (error) {
     runtime.report({
       source: "shell-web.error-host.action",
@@ -123,7 +127,7 @@ function runAction(entry) {
     });
   }
 
-  if (entry.action.dismissOnRun !== false) {
+  if (action.dismissOnRun !== false) {
     dismiss(entry);
   }
 }
@@ -171,13 +175,14 @@ function onSnackbarAfterLeave() {
             <span>{{ entry.message }}</span>
             <v-spacer />
             <v-btn
-              v-if="entry.action"
+              v-for="(action, index) in actionsFor(entry)"
+              :key="index"
               variant="text"
               size="small"
               class="text-none"
-              @click="runAction(entry)"
+              @click="runAction(entry, action)"
             >
-              {{ entry.action.label }}
+              {{ action.label }}
             </v-btn>
           </div>
         </v-alert>
@@ -188,6 +193,7 @@ function onSnackbarAfterLeave() {
       :model-value="snackbarOpen"
       location="bottom end"
       :timeout="resolveTimeout(displayedSnackbarEntry)"
+      :vertical="actionsFor(displayedSnackbarEntry).length > 1"
       :color="displayedSnackbarEntry ? resolveSeverityColor(displayedSnackbarEntry.severity) : undefined"
       @update:model-value="onSnackbarModelValue"
       @after-leave="onSnackbarAfterLeave"
@@ -196,12 +202,13 @@ function onSnackbarAfterLeave() {
 
       <template #actions>
         <v-btn
-          v-if="displayedSnackbarEntry?.action"
+          v-for="(action, index) in actionsFor(displayedSnackbarEntry)"
+          :key="index"
           variant="text"
-          size="small"
-          @click="runAction(displayedSnackbarEntry)"
+          min-height="48"
+          @click="runAction(displayedSnackbarEntry, action)"
         >
-          {{ displayedSnackbarEntry.action.label }}
+          {{ action.label }}
         </v-btn>
         <v-btn
           v-if="displayedSnackbarEntry"
@@ -226,11 +233,12 @@ function onSnackbarAfterLeave() {
         <v-card-actions>
           <v-spacer />
           <v-btn
-            v-if="dialogEntry.action"
+            v-for="(action, index) in actionsFor(dialogEntry)"
+            :key="index"
             variant="text"
-            @click="runAction(dialogEntry)"
+            @click="runAction(dialogEntry, action)"
           >
-            {{ dialogEntry.action.label }}
+            {{ action.label }}
           </v-btn>
           <v-btn
             color="primary"

package/src/client/error/normalize.js

@@ -79,6 +79,10 @@ function normalizeAction(value) {
   });
 }
 
+function normalizeAdditionalActions(value) {
+  return Object.freeze(Array.isArray(value) ? value.map(normalizeAction).filter(Boolean) : []);
+}
+
 export {
   ERROR_CHANNELS,
   ERROR_SEVERITIES,
@@ -89,5 +93,6 @@ export {
   normalizeSeverity,
   normalizeErrorIntent,
   normalizeNonNegativeInteger,
-  normalizeAction
+  normalizeAction,
+  normalizeAdditionalActions
 };

package/src/client/error/policy.js

@@ -1,5 +1,6 @@
 import {
   normalizeAction,
+  normalizeAdditionalActions,
   normalizeChannel,
   normalizeErrorIntent,
   normalizeSeverity,
@@ -53,6 +54,7 @@ function createDefaultErrorPolicy({
       severity: normalizeSeverity(event.severity, normalizedDefaultSeverity),
       presenterId: normalizeText(event.presenterId),
       action: normalizeAction(event.action),
+      additionalActions: normalizeAdditionalActions(event.additionalActions),
       persist: channel !== "snackbar",
       dedupeKey: normalizeText(event.dedupeKey)
     });

package/src/client/error/runtime.js

@@ -1,6 +1,7 @@
 import {
   isRecord,
   normalizeAction,
+  normalizeAdditionalActions,
   normalizeChannel,
   normalizeErrorIntent,
   normalizeNonNegativeInteger,
@@ -49,6 +50,7 @@ function normalizeErrorEvent(rawEvent = {}) {
     channel: normalizeChannel(source.channel),
     presenterId: normalizeText(source.presenterId),
     action: normalizeAction(source.action),
+    additionalActions: normalizeAdditionalActions(source.additionalActions),
     persist: typeof source.persist === "boolean" ? source.persist : null,
     blocking: source.blocking === true,
     dedupeKey: normalizeText(source.dedupeKey),
@@ -71,6 +73,7 @@ function normalizePolicyDecision(policyDecision = {}, event = {}) {
     message: normalizeText(source.message || event.userMessage || event.message, "Request failed."),
     severity: normalizeSeverity(source.severity || event.severity, "error"),
     action: normalizeAction(source.action || event.action),
+    additionalActions: normalizeAdditionalActions(source.additionalActions ?? event.additionalActions),
     persist:
       typeof source.persist === "boolean"
         ? source.persist

package/src/client/error/store.js

@@ -1,5 +1,6 @@
 import {
   normalizeAction,
+  normalizeAdditionalActions,
   normalizeSeverity,
   normalizeText
 } from "./normalize.js";
@@ -24,6 +25,7 @@ function cloneEntry(entry = {}) {
     severity: String(entry.severity || "error").trim(),
     persist: Boolean(entry.persist),
     action: entry.action || null,
+    additionalActions: entry.additionalActions,
     presenterId: String(entry.presenterId || "").trim(),
     dedupeKey: String(entry.dedupeKey || "").trim(),
     timestamp: Number(entry.timestamp || 0)
@@ -80,6 +82,7 @@ function createErrorPresentationStore({
       severity: normalizeSeverity(payload.severity, "error"),
       persist: typeof payload.persist === "boolean" ? payload.persist : normalizedChannel !== "snackbar",
       action: normalizeAction(payload.action),
+      additionalActions: normalizeAdditionalActions(payload.additionalActions),
       presenterId: normalizeText(payload.presenterId),
       dedupeKey: normalizeText(payload.dedupeKey),
       timestamp: Number(now())

package/test/errorActions.test.js

@@ -0,0 +1,113 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { readFileSync } from "node:fs";
+import { registerHooks } from "node:module";
+import { compileScript, parse } from "@vue/compiler-sfc";
+import { createRenderer, defineComponent, h, nextTick } from "vue";
+import { createPinia } from "pinia";
+import { createErrorRuntime } from "../src/client/error/runtime.js";
+import { createDefaultMaterialErrorPresenters } from "../src/client/error/presenters.js";
+import { createErrorPresentationStore } from "../src/client/error/store.js";
+import { useShellErrorPresentationStore } from "../src/client/stores/useShellErrorPresentationStore.js";
+
+const componentUrl = new URL("../src/client/components/ShellErrorHost.vue", import.meta.url).href;
+const hooks = registerHooks({
+  load(url, context, nextLoad) {
+    if (url !== componentUrl) return nextLoad(url, context);
+    const { descriptor } = parse(readFileSync(new URL(url), "utf8"));
+    return { format: "module", shortCircuit: true,
+      source: compileScript(descriptor, { id: "error-host", inlineTemplate: true }).content };
+  }
+});
+const { default: ShellErrorHost } = await import(componentUrl);
+hooks.deregister();
+
+function fixture(t) {
+  const node = (type, text = "") => ({ type, text, props: {}, children: [], parent: null });
+  const renderer = createRenderer({
+    createElement: node, createText: (text) => node("text", text), createComment: () => node("comment"),
+    setText: (item, text) => { item.text = text; },
+    setElementText: (item, text) => { item.text = text; item.children = []; },
+    patchProp: (item, key, _previous, value) => { item.props[key] = value; },
+    parentNode: (item) => item.parent,
+    nextSibling: (item) => item.parent?.children[item.parent.children.indexOf(item) + 1] ?? null,
+    insert(item, parent, anchor) {
+      if (item.parent) item.parent.children.splice(item.parent.children.indexOf(item), 1);
+      item.parent = parent;
+      const index = anchor ? parent.children.indexOf(anchor) : -1;
+      if (index < 0) parent.children.push(item); else parent.children.splice(index, 0, item);
+    },
+    remove(item) { if (item.parent) item.parent.children.splice(item.parent.children.indexOf(item), 1); }
+  });
+  const store = createErrorPresentationStore();
+  const runtime = createErrorRuntime({
+    presenters: createDefaultMaterialErrorPresenters({ store }),
+    defaultPresenterId: "material.snackbar"
+  });
+  const app = renderer.createApp(ShellErrorHost);
+  const pinia = createPinia();
+  app.use(pinia);
+  useShellErrorPresentationStore(pinia).attachRuntimeStore(store);
+  app.provide("jskit.shell-web.runtime.web-error.client", runtime);
+  for (const name of ["VSnackbar", "VDialog", "VCard", "VCardTitle", "VCardText", "VCardActions", "VSpacer", "VAlert", "VBtn"]) {
+    app.component(name, defineComponent({ setup: (_props, { slots }) => () =>
+      h(name, {}, [slots.default?.(), slots.actions?.()]) }));
+  }
+  const root = node("root");
+  app.mount(root);
+  t.after(() => app.unmount());
+  const all = (item = root) => [item, ...item.children.flatMap((child) => all(child))];
+  const button = (label) => all().find((item) => item.type === "VBtn" &&
+    all(item).some((child) => child.text.trim() === label));
+  return { runtime, store, all, button };
+}
+
+test("both snackbar actions survive the real runtime and render with independent handlers", async (t) => {
+  const { runtime, store, all, button } = fixture(t);
+  const calls = [];
+  runtime.report({ message: "Delivered for booking", severity: "success",
+    action: { label: "#142", handler: () => calls.push("booking"), dismissOnRun: false },
+    additionalActions: [null, { label: "invalid" }, {
+      label: " View message ", handler: async () => calls.push("message")
+    }]
+  });
+  await nextTick();
+  const entry = store.getState().channels.snackbar[0];
+  assert.deepEqual(entry.additionalActions.map((action) => action.label), ["View message"]);
+  assert.ok(Object.isFrozen(entry.additionalActions));
+  assert.ok(Object.isFrozen(entry.additionalActions[0]));
+  assert.equal(all().find((item) => item.type === "VSnackbar").props.vertical, true);
+  await button("#142").props.onClick();
+  assert.deepEqual(calls, ["booking"]);
+  assert.equal(store.getState().channels.snackbar.length, 1);
+  await button("View message").props.onClick();
+  assert.deepEqual(calls, ["booking", "message"]);
+  assert.equal(store.getState().channels.snackbar.length, 0);
+});
+
+test("additional-only actions work and rejected handlers use shared error reporting", async (t) => {
+  const { runtime, store, button } = fixture(t);
+  runtime.report({ message: "Delivered", additionalActions: [{ label: "View message",
+    handler: async () => { throw new Error("Navigation failed"); }
+  }] });
+  await nextTick();
+  assert.equal(store.getState().channels.snackbar[0].action, null);
+  await button("View message").props.onClick();
+  assert.equal(store.getState().channels.snackbar.length, 0);
+  assert.equal(store.getState().channels.dialog[0].message, "Error action failed.");
+});
+
+test("policies can suppress additional actions and single actions still render", async (t) => {
+  const { runtime, store, button, all } = fixture(t);
+  runtime.setPolicy(() => ({ channel: "snackbar", additionalActions: [] }));
+  let invoked = false;
+  runtime.report({ message: "Saved", action: { label: "Undo", handler: () => { invoked = true; } },
+    additionalActions: [{ label: "Hidden", handler() {} }] });
+  await nextTick();
+  assert.deepEqual(store.getState().channels.snackbar[0].additionalActions, []);
+  assert.equal(button("Hidden"), undefined);
+  assert.equal(all().find((item) => item.type === "VSnackbar").props.vertical, false);
+  await button("Undo").props.onClick();
+  assert.equal(invoked, true);
+  assert.equal(store.getState().channels.snackbar.length, 0);
+});