@escalated-dev/escalated 0.9.0 → 0.11.2

package/src/pages/Admin/Webhooks/DeliveryLog.vue

@@ -108,8 +108,7 @@ function togglePayload(id) {
                             <td colspan="5" class="bg-[var(--esc-panel-hover)] px-4 py-3">
                                 <pre
                                     class="max-h-40 overflow-auto rounded-lg bg-[var(--esc-panel-surface-alt)] p-3 text-xs text-[var(--esc-panel-text-tertiary)]"
-                                    >{{ JSON.stringify(delivery.payload, null, 2) }}</pre
-                                >
+                                    >{{ JSON.stringify(delivery.payload, null, 2) }}</pre>
                             </td>
                         </tr>
                     </template>

package/src/pages/Admin/Workflows/Form.vue

@@ -0,0 +1,24 @@
+<script setup>
+import Builder from './Builder.vue';
+
+/**
+ * The workflow editor, under the name the backends render.
+ *
+ * Builder.vue is the editor itself and takes exactly these props. Several
+ * backends render `Escalated/Admin/Workflows/Form` for both create and edit,
+ * and a page name with no component behind it is not an error in Inertia --
+ * the panel simply comes up blank. This is that name.
+ */
+defineProps({
+    workflow: { type: Object, default: null },
+
+    // Passed by the backends alongside the workflow. Builder derives its own
+    // trigger list, so this is accepted rather than forwarded; declaring it
+    // keeps it out of the fallthrough attributes.
+    triggerEvents: { type: [Array, Object], default: null },
+});
+</script>
+
+<template>
+    <Builder :workflow="workflow" />
+</template>

package/src/pages/Plugin/Page.vue

@@ -0,0 +1,61 @@
+<script setup>
+import EscalatedLayout from '../../components/EscalatedLayout.vue';
+import { computed, resolveComponent } from 'vue';
+
+/**
+ * A full page registered by a plugin.
+ *
+ * A plugin declares a route on the backend and a component on the frontend;
+ * the backend renders this page with the component's name, and this is where
+ * the two meet. `defineEscalatedPlugin` registers those components globally on
+ * the app, so the name is resolved from the global registry rather than
+ * imported.
+ *
+ * Two backends render `Escalated/Plugin/Page`, and there was no component
+ * behind the name — so every plugin page was blank, whether or not the plugin
+ * had registered its component correctly. A plugin that has not been installed
+ * on the frontend now says so instead.
+ */
+const props = defineProps({
+    plugin: { type: String, default: '' },
+    component: { type: String, default: '' },
+    layout: { type: String, default: 'admin' },
+    props: { type: Object, default: () => ({}) },
+});
+
+const resolved = computed(() => {
+    if (!props.component) {
+        return null;
+    }
+
+    const found = resolveComponent(props.component);
+
+    // resolveComponent hands back the name as a string when nothing is
+    // registered under it, which would render as a literal <ComponentName>
+    // element rather than as anything useful.
+    return typeof found === 'string' ? null : found;
+});
+
+const title = computed(() => props.component || props.plugin || 'Plugin');
+</script>
+
+<template>
+    <EscalatedLayout :title="title">
+        <component :is="resolved" v-if="resolved" v-bind="props.props" />
+
+        <div
+            v-else
+            class="rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] p-6 text-center"
+        >
+            <p class="text-sm text-[var(--esc-panel-text-secondary)]">
+                The <strong>{{ plugin || 'plugin' }}</strong> plugin registered a page here, but no component named
+                <code class="rounded bg-[var(--esc-panel-hover)] px-1">{{ component || '(unnamed)' }}</code> is
+                available.
+            </p>
+            <p class="mt-2 text-xs text-[var(--esc-panel-text-muted)]">
+                Register it on the frontend with <code>defineEscalatedPlugin</code> — the backend route exists, so only
+                the component is missing.
+            </p>
+        </div>
+    </EscalatedLayout>
+</template>

package/src/resolvePage.js

@@ -0,0 +1,160 @@
+import manifest from '../pages.json';
+
+/**
+ * Resolve an Escalated page name to its component, loudly.
+ *
+ * Inertia resolves a page name to a component, and a name with nothing behind
+ * it is not an error: `resolve()` returns undefined, Vue renders nothing, and
+ * the panel comes up blank. It looks like a permissions problem or an empty
+ * dataset, and the request was a 200 the whole time — which is how four screens
+ * shipped blank across this package and its backends without anyone noticing.
+ *
+ * This wraps the lookup so an unresolvable name says so. In development it
+ * throws, naming what was asked for and the nearest thing that exists; in
+ * production it logs and hands back a component that renders the same message,
+ * because a panel that explains itself beats a panel that is empty.
+ *
+ * Wire it into the host's Inertia setup:
+ *
+ *     import { resolveEscalatedPage } from '@escalated-dev/escalated';
+ *
+ *     createInertiaApp({
+ *         resolve: (name) =>
+ *             resolveEscalatedPage(name, () =>
+ *                 resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**')),
+ *             ),
+ *     });
+ *
+ * @param {string} name             The page name the backend rendered.
+ * @param {Function} [fallback]     Resolver for names this package does not own.
+ * @param {Object} [options]
+ * @param {boolean} [options.throwOnMissing]  Defaults to true outside production.
+ * @returns {Promise<Object>|Object}
+ */
+export function resolveEscalatedPage(name, fallback, options = {}) {
+    const pages = import.meta.glob('./pages/**/*.vue');
+    const path = `./pages/${String(name ?? '').replace(/^Escalated\//, '')}.vue`;
+
+    if (pages[path]) {
+        return pages[path]();
+    }
+
+    // Not ours: a host page, or a plugin's. Only names this package claims are
+    // its responsibility to complain about.
+    if (!isEscalatedPage(name)) {
+        if (fallback) {
+            return fallback(name);
+        }
+
+        return missing(name, options);
+    }
+
+    return missing(name, options);
+}
+
+/** Whether a name is one this package is supposed to own. */
+export function isEscalatedPage(name) {
+    return String(name ?? '').startsWith('Escalated/');
+}
+
+/** Every page name this package can resolve. */
+export function escalatedPages() {
+    return [...manifest.pages];
+}
+
+/**
+ * Names close enough to be the one that was meant.
+ *
+ * Nearly every real instance of this has been a naming difference rather than
+ * an absent screen — `CohortAnalysis` for `Cohorts`, `New` for `Form` — so the
+ * message is far more useful when it can point at the likely intent.
+ */
+export function suggestPages(name, limit = 3) {
+    const wanted = segments(name);
+
+    if (!wanted.length) {
+        return [];
+    }
+
+    return manifest.pages
+        .map((page) => ({ page, score: similarity(wanted, segments(page)) }))
+        .filter((entry) => entry.score > 0)
+        .sort((a, b) => b.score - a.score || a.page.localeCompare(b.page))
+        .slice(0, limit)
+        .map((entry) => entry.page);
+}
+
+function segments(name) {
+    return String(name ?? '')
+        .toLowerCase()
+        .split('/')
+        .filter(Boolean);
+}
+
+/**
+ * How much two page paths have in common.
+ *
+ * Segment overlap rather than leaf equality: nearly every page ends in `Index`
+ * or `Form`, so matching on the last segment alone ranks half the package
+ * equally. What actually distinguishes the intended page is the path around it
+ * -- `Admin/KB/Articles/Index` and `Admin/KnowledgeBase/Articles/Index` share
+ * three segments and differ in one.
+ */
+function similarity(wanted, candidate) {
+    const shared = wanted.filter((part) => candidate.includes(part)).length;
+
+    if (!shared) {
+        return 0;
+    }
+
+    // The folder counts for more than the leaf, so a differently named screen
+    // in the right place outranks the same leaf somewhere unrelated.
+    const sameFolder = wanted.slice(0, -1).join('/') === candidate.slice(0, -1).join('/') ? 2 : 0;
+    const lengthPenalty = Math.abs(wanted.length - candidate.length) * 0.5;
+
+    // Every page in a folder shares its whole path, so the folder alone ranks
+    // them all equally -- `CohortAnalysis` would tie with `AgentMetrics` and
+    // lose on alphabet. How much of the name itself matches is what separates
+    // the one that was meant.
+    const leaf = commonPrefix(wanted[wanted.length - 1], candidate[candidate.length - 1]);
+
+    return shared + sameFolder + leaf - lengthPenalty;
+}
+
+/** How many leading characters two names share, as a fraction of the shorter. */
+function commonPrefix(a = '', b = '') {
+    let i = 0;
+
+    while (i < a.length && i < b.length && a[i] === b[i]) {
+        i += 1;
+    }
+
+    return i / Math.max(1, Math.min(a.length, b.length));
+}
+
+function missing(name, options) {
+    const suggestions = suggestPages(name);
+    const message =
+        `Escalated: no page component for "${name}". ` +
+        (suggestions.length
+            ? `Did you mean ${suggestions.map((s) => `"${s}"`).join(', ')}?`
+            : 'It is not in this package; a host or plugin page needs its own resolver.');
+
+    const shouldThrow = options.throwOnMissing ?? !isProduction();
+
+    if (shouldThrow) {
+        throw new Error(message);
+    }
+
+    console.error(message);
+
+    return { render: () => null, name: 'EscalatedMissingPage', __escalatedMissing: message };
+}
+
+function isProduction() {
+    try {
+        return import.meta.env?.PROD === true;
+    } catch {
+        return false;
+    }
+}