@antelopejs/dms 0.9.0 → 0.9.1

package/frontend-vue/layers/dms-layout/app/custom-pages/modules.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { Ref, VNode } from "vue";
 import { MONO_CHIP_CLASS } from "#dms-ui/app/build/utils/monoChip";
 import UButton from "@nuxt/ui/components/Button.vue";
 import UIcon from "@nuxt/ui/runtime/vue/components/Icon.vue";
@@ -13,6 +14,7 @@ import { useKeyboardPlatform } from "#dms-ui/app/composables/global/keyboardPlat
 import DmsChipGroup from "#dms-ui/app/build/components/form/ChipGroup.vue";
 import ModuleCatalogTile from "../build/components/pages/modules/ModuleCatalogTile.vue";
 import ModuleStoreTile from "../build/components/pages/modules/ModuleStoreTile.vue";
+import ModuleStoreDependencyPicker from "../build/components/pages/modules/ModuleStoreDependencyPicker.vue";
 import { usePageHeaderActions } from "../composables/layout/usePageHeaderActions";
 import {
   ENDPOINT_MODULES_LISTING,
@@ -30,9 +32,30 @@ import {
   type ModuleSortMode,
 } from "../build/utils/modules-catalog";
 import {
-  MODULE_STORE_CATALOG,
-  availableStoreModules,
+  type ModuleStoreEntry,
+  type StoreScope,
+  FRONTEND_BUILD_COMMAND,
+  filterByScope,
+  isAwaitingFrontend,
+  needsDependencyChoice,
+  sortStoreModules,
+  toModuleStoreEntry,
 } from "../build/utils/module-store-catalog";
+import {
+  type DependencyDraft,
+  areDependencyDraftsValid,
+  buildInstallBody,
+  createDependencyDrafts,
+} from "../build/utils/module-store-install";
+import { useModuleStore } from "../composables/page/useModuleStore";
+import {
+  ConfirmActionError,
+  useConfirm,
+} from "#dms-ui/app/composables/confirm";
+import type {
+  StoreActionBody,
+  StoreOperationKind,
+} from "../types/module-store";
 import DmsSearchInput from "#dms-ui/app/build/components/form/SearchInput.vue";
 
 const SKELETON_PLACEHOLDER_COUNT = 6;
@@ -197,26 +220,49 @@ function clearFilters(): void {
   category.value = MODULE_CATEGORY_ALL;
 }
 
-// ── Module store (preview) ─────────────────────────────────────────
-// A static list of the official modules not installed here: nothing installs
-// yet, only the search and the category chips work, locally.
+// ── Module store ───────────────────────────────────────────────────
+const moduleStore = useModuleStore();
+const toast = useToast();
+const { confirm } = useConfirm();
+
+onMounted(() => {
+  if (isOwner.value) void moduleStore.load();
+});
+onBeforeUnmount(() => moduleStore.stop());
+
+const storeListing = computed(() => moduleStore.listing.value);
+const isStoreLoading = computed(
+  () => storeListing.value === undefined && !moduleStore.loadingError.value,
+);
 const storeModules = computed(() =>
-  availableStoreModules(
-    MODULE_STORE_CATALOG,
-    new Set((modulesListing.modules.value ?? []).map((entry) => entry.id)),
+  sortStoreModules(
+    (storeListing.value?.modules ?? []).map(toModuleStoreEntry),
     processI18n,
   ),
 );
+const storeScope = ref<StoreScope>("all");
 const storeQuery = ref("");
 const storeCategory = ref<string>(MODULE_CATEGORY_ALL);
 
+const storeScopeItems = computed(() =>
+  (["all", "available", "installed"] as const).map((scope) => ({
+    value: scope,
+    label: t(`modules.store.scope.${scope}`, {
+      count: filterByScope(storeModules.value, scope).length,
+    }),
+  })),
+);
+const scopedStoreModules = computed(() =>
+  filterByScope(storeModules.value, storeScope.value),
+);
+
 const storeCategoryOptions = computed(() => [
   {
     value: MODULE_CATEGORY_ALL,
     label: t("modules.category.all"),
-    count: storeModules.value.length,
+    count: scopedStoreModules.value.length,
   },
-  ...moduleCategoryOptions(storeModules.value, processI18n),
+  ...moduleCategoryOptions(scopedStoreModules.value, processI18n),
 ]);
 
 watch(storeCategoryOptions, (options) => {
@@ -226,7 +272,7 @@ watch(storeCategoryOptions, (options) => {
 });
 
 const visibleStoreModules = computed(() =>
-  filterModules(storeModules.value, {
+  filterModules(scopedStoreModules.value, {
     query: storeQuery.value,
     category: storeCategory.value,
     resolve: processI18n,
@@ -239,6 +285,153 @@ function clearStoreFilters(): void {
   storeCategory.value = MODULE_CATEGORY_ALL;
 }
 
+/** Store modules whose interface the running frontend does not match yet. */
+const frontendLagging = computed(() =>
+  storeModules.value.filter(
+    (entry) =>
+      isAwaitingFrontend(entry) ||
+      (entry.frontend === "unknown" &&
+        moduleStore.awaitingReload.value.has(entry.id)),
+  ),
+);
+const frontendNotice = computed(() => {
+  const lagging = frontendLagging.value;
+  if (lagging.length === 0) return null;
+  const names = lagging.map((entry) => processI18n(entry.title)).join(", ");
+  const hasReported = lagging.every((entry) => entry.frontend !== "unknown");
+  const key = !hasReported
+    ? "unknown"
+    : storeListing.value?.dev
+      ? "dev"
+      : "production";
+  return { key, names };
+});
+
+/**
+ * Runs `kind` from a dialog: a refusal is worded as the toast words it and
+ * shown in the dialog, which stays open.
+ */
+async function runFromDialog(
+  kind: StoreOperationKind,
+  entry: ModuleStoreEntry,
+  body?: StoreActionBody,
+): Promise<void> {
+  try {
+    await moduleStore.run(kind, entry, body);
+  } catch (error) {
+    throw new ConfirmActionError({
+      title: t("modules.store.action_failed", {
+        module: processI18n(entry.title),
+      }),
+      description: resolveStoreError(error),
+    });
+  }
+}
+
+/** What the owner last picked in a module's install dialog, for a retry. */
+const lastDependencyDrafts = new Map<string, DependencyDraft[]>();
+
+function renderDependencyPicker(
+  entry: ModuleStoreEntry,
+  drafts: Ref<DependencyDraft[]>,
+  showErrors: boolean,
+): VNode {
+  return h(ModuleStoreDependencyPicker, {
+    missing: entry.missingInterfaces,
+    drafts: drafts.value,
+    showErrors,
+    onUpdate: (index: number, patch: Partial<DependencyDraft>) => {
+      drafts.value = drafts.value.map((draft, position) =>
+        position === index ? { ...draft, ...patch } : draft,
+      );
+    },
+  });
+}
+
+/**
+ * Asks which modules implement the interfaces the release misses, then
+ * installs them with it. A refusal shows in the dialog, kept open.
+ */
+async function installWithDependencies(entry: ModuleStoreEntry): Promise<void> {
+  const title = processI18n(entry.title);
+  const drafts = ref(
+    createDependencyDrafts(
+      entry.missingInterfaces,
+      lastDependencyDrafts.get(entry.id),
+    ),
+  );
+  const showErrors = ref(false);
+  await confirm({
+    title: t("modules.store.install_dialog.title", { module: title }),
+    description: t("modules.store.install_dialog.description", {
+      module: title,
+    }),
+    confirmLabel: t("modules.store.actions.install"),
+    confirmIcon: "i-ph-download-simple",
+    icon: "i-ph-puzzle-piece",
+    body: () => renderDependencyPicker(entry, drafts, showErrors.value),
+    validate: () => {
+      showErrors.value = true;
+      return areDependencyDraftsValid(drafts.value);
+    },
+    onConfirm: async () => {
+      lastDependencyDrafts.set(entry.id, drafts.value);
+      await runFromDialog(
+        "install",
+        entry,
+        buildInstallBody(entry.id, drafts.value),
+      );
+    },
+  });
+}
+
+async function runStoreAction(
+  kind: StoreOperationKind,
+  entry: ModuleStoreEntry,
+): Promise<void> {
+  const title = processI18n(entry.title);
+  if (needsDependencyChoice(entry, kind)) {
+    await installWithDependencies(entry);
+    return;
+  }
+  if (kind === "uninstall") {
+    await confirm({
+      title: t("modules.store.uninstall_confirm.title", { module: title }),
+      description: t("modules.store.uninstall_confirm.description", {
+        module: title,
+      }),
+      confirmLabel: t("modules.store.actions.uninstall"),
+      color: "error",
+      icon: "i-ph-trash",
+      onConfirm: () => runFromDialog(kind, entry),
+    });
+    return;
+  }
+  try {
+    await moduleStore.run(kind, entry);
+  } catch (error) {
+    toast.add({
+      color: "error",
+      icon: "i-ph-warning-circle",
+      title: t("modules.store.action_failed", { module: title }),
+      description: resolveStoreError(error),
+    });
+  }
+}
+
+/** What a refused store request carries: the server's error key, if any. */
+interface StoreRequestError {
+  data?: unknown;
+  message?: string;
+}
+
+function resolveStoreError(error: unknown): string {
+  const details = error as StoreRequestError | undefined;
+  const key = typeof details?.data === "string" ? details.data : undefined;
+  if (!key) return details?.message ?? "";
+  return t(`modules.store.errors.${key.replace("error.", "")}`);
+}
+
 // ── Actions ────────────────────────────────────────────────────────
 async function retry(): Promise<void> {
   if (isRetrying.value) return;
@@ -506,49 +699,141 @@ const summaryCards = computed<StatGroupItem[]>(() =>
         </div>
       </section>
 
-      <!-- Module store: a preview, nothing installs from here yet. -->
+      <!-- Module store: the official modules, installed or not. -->
       <section class="mt-10" aria-labelledby="module-store-title">
         <DmsSectionHeader
           class="mb-3"
-          :count="isInitiallyLoading ? undefined : storeModules.length"
+          :count="isStoreLoading ? undefined : storeModules.length"
           :description="t('modules.store.description')"
         >
           <template #title>
             <span id="module-store-title">{{ t("modules.store.title") }}</span>
           </template>
-          <template #badge>
-            <DmsStatusPill
-              tone="info"
-              :label="t('modules.store.soon')"
+          <template #trailing>
+            <span
+              v-if="storeListing?.frontendVersion"
+              :class="[
+                MONO_CHIP_CLASS,
+                'text-dimmed border border-(--ui-border) text-[11px] max-sm:hidden',
+              ]"
+              :title="
+                storeListing.frontendVersionSource
+                  ? t(
+                      `modules.store.frontend_version.${storeListing.frontendVersionSource}`,
+                    )
+                  : undefined
+              "
+            >
+              {{
+                t("modules.store.frontend_version.label", {
+                  version: storeListing.frontendVersion,
+                })
+              }}
+            </span>
+            <DmsSegmented
+              v-model="storeScope"
+              :items="storeScopeItems"
               size="sm"
-              uppercase
+              :aria-label="t('modules.store.scope.label')"
             />
           </template>
         </DmsSectionHeader>
 
         <DmsBanner
+          v-if="storeListing?.configError"
+          class="mb-4"
+          tone="error"
+          size="sm"
+          icon="i-ph-file-x"
+          :title="t('modules.store.config_error')"
+          :description="storeListing.configError"
+        />
+        <DmsBanner
+          v-else-if="storeListing && !storeListing.enabled"
           class="mb-4"
           tone="info"
           size="sm"
-          icon="i-ph-storefront"
-          :title="t('modules.store.banner.title')"
-          :description="t('modules.store.banner.description')"
+          icon="i-ph-lock-simple"
+          :title="t('modules.store.disabled.title')"
+          :description="t('modules.store.disabled.description')"
         />
 
-        <!-- Which modules are installed is unknown until the listing loads:
-             the store list waits for it. -->
-        <DmsCard
-          v-if="!isInitiallyLoading && storeModules.length === 0"
-          :padded="false"
+        <!-- The interface lags behind the backend: say what follows. -->
+        <DmsBanner
+          v-if="frontendNotice"
+          class="mb-4"
+          :tone="frontendNotice.key === 'dev' ? 'info' : 'warning'"
+          size="sm"
+          :icon="
+            frontendNotice.key === 'dev'
+              ? 'i-ph-circle-notch'
+              : 'i-ph-arrows-clockwise'
+          "
+          :title="
+            t(`modules.store.frontend.${frontendNotice.key}.title`, {
+              modules: frontendNotice.names,
+            })
+          "
         >
-          <DmsEmptyState
-            icon="i-ph-check-circle"
-            :title="t('modules.store.all_installed.title')"
-            :description="t('modules.store.all_installed.description')"
-          />
-        </DmsCard>
+          <template #description>
+            <i18n-t
+              :keypath="`modules.store.frontend.${frontendNotice.key}.description`"
+              scope="global"
+              tag="span"
+            >
+              <template #command>
+                <code
+                  :class="[
+                    MONO_CHIP_CLASS,
+                    'bg-elevated text-highlighted text-xs',
+                  ]"
+                >
+                  {{ FRONTEND_BUILD_COMMAND }}
+                </code>
+              </template>
+            </i18n-t>
+          </template>
+        </DmsBanner>
 
-        <template v-else-if="!isInitiallyLoading">
+        <div v-if="isStoreLoading" :class="TILE_GRID_CLASS" aria-busy="true">
+          <DmsCard
+            v-for="placeholder in skeletonItems"
+            :key="placeholder"
+            :padded="false"
+            class="flex min-h-[228px] flex-col gap-3 p-4"
+          >
+            <USkeleton
+              :aria-label="t('dms.a11y.loading')"
+              class="size-9 rounded-[10px]"
+            />
+            <USkeleton
+              :aria-label="t('dms.a11y.loading')"
+              class="mt-auto h-2.5 w-3/5"
+            />
+          </DmsCard>
+        </div>
+
+        <!-- Only when nothing is on screen yet: a follow-up read that fails
+             while the frontend restarts keeps the tiles and tries again. -->
+        <DmsBanner
+          v-else-if="moduleStore.loadingError.value && !storeListing"
+          tone="error"
+          size="sm"
+          icon="i-ph-plugs"
+          :title="t('modules.store.load_error')"
+        >
+          <template #actions>
+            <UButton
+              color="error"
+              size="sm"
+              icon="i-ph-arrows-clockwise"
+              :label="t('modules.error.retry')"
+              @click="moduleStore.load()"
+            />
+          </template>
+        </DmsBanner>
+
+        <template v-else>
           <div :class="TOOLBAR_CLASS">
             <DmsSearchInput
               v-model="storeQuery"
@@ -564,7 +849,18 @@ const summaryCards = computed<StatGroupItem[]>(() =>
             />
           </div>
 
-          <DmsCard v-if="visibleStoreModules.length === 0" :padded="false">
+          <DmsCard
+            v-if="scopedStoreModules.length === 0 && storeScope === 'available'"
+            :padded="false"
+          >
+            <DmsEmptyState
+              icon="i-ph-check-circle"
+              :title="t('modules.store.all_installed.title')"
+              :description="t('modules.store.all_installed.description')"
+            />
+          </DmsCard>
+
+          <DmsCard v-else-if="visibleStoreModules.length === 0" :padded="false">
             <DmsEmptyState
               variant="no-result"
               :title="
@@ -592,6 +888,11 @@ const summaryCards = computed<StatGroupItem[]>(() =>
               v-for="entry in visibleStoreModules"
               :key="entry.id"
               :entry="entry"
+              :is-locked="
+                !storeListing?.enabled ||
+                (storeListing?.busy === true && entry.state !== 'busy')
+              "
+              @action="runStoreAction($event, entry)"
             />
           </div>
         </template>

package/frontend-vue/layers/dms-layout/app/types/module-store.ts

@@ -0,0 +1,134 @@
+/**
+ * Mirror of the backend's module store listing (`GET /dms/store/listing`,
+ * `src/store/types.ts` in `@antelopejs/dms`).
+ */
+export type StoreModuleState =
+  | "available"
+  | "busy"
+  | "active"
+  | "disabled"
+  | "error"
+  | "pending";
+
+export type StoreFrontendState = "none" | "synced" | "pending" | "unknown";
+
+export type StoreOperationKind =
+  | "install"
+  | "update"
+  | "enable"
+  | "disable"
+  | "uninstall"
+  | "apply";
+
+export type StoreOperationStep =
+  | "resolve"
+  | "dependencies"
+  | "unload"
+  | "load"
+  | "save";
+
+export interface StoreOperation {
+  moduleId: string;
+  kind: StoreOperationKind;
+  step: StoreOperationStep;
+  targetVersion?: string;
+  startedAt: number;
+}
+
+/** A module of the AntelopeJS interfaces registry that implements an interface. */
+export interface InterfaceImplementation {
+  /** Name the registry gives it, such as `redis`. */
+  name: string;
+  /** npm package it is installed from. */
+  package: string;
+}
+
+/** An interface the release to install needs and no running module implements. */
+export interface MissingInterface {
+  interfacePackage: string;
+  /** Registry modules that implement it, npm packages only. */
+  candidates: InterfaceImplementation[];
+}
+
+/** A frontend layer that would stop loading on another dms-frontend. */
+export interface FrontendBreak {
+  name: string;
+  /** The dms-frontend range the layer supports. */
+  range: string;
+}
+
+/** Why a release cannot load on the running dms-frontend, and what moving it would take. */
+export interface FrontendRequirement {
+  /** The dms-frontend range the release supports. */
+  range: string;
+  /** The dms-frontend version that runs. */
+  running: string;
+  /** Latest published dms-frontend in the range, when there is one. */
+  target?: string;
+  /** Command that moves the project to `target`. */
+  command?: string;
+  /** Layers already loaded that `target` would refuse. */
+  breaks: FrontendBreak[];
+}
+
+/** Where the store read the running dms-frontend version. */
+export type FrontendVersionSource = "reported" | "project";
+
+export interface StoreListingEntry {
+  id: string;
+  package: string;
+  icon: string;
+  /** Store category key, under `modules.store.category`. */
+  category: string;
+  /** `$i18n.key` */
+  title: string;
+  /** `$i18n.key` */
+  description: string;
+  state: StoreModuleState;
+  installedVersion?: string;
+  /** The version range antelope.config.ts declares. */
+  declaredRange?: string;
+  latestVersion?: string;
+  updateAvailable: boolean;
+  compatible: boolean;
+  requiredInterfaceRange?: string;
+  error?: string;
+  operation?: StoreOperation;
+  frontend: StoreFrontendState;
+  /** The dms-frontend range the release to install declares, when it does. */
+  frontendRange?: string;
+  /** Set when that range excludes the running dms-frontend. */
+  frontendRequirement?: FrontendRequirement;
+  /** Interfaces the release to install needs and nothing implements. */
+  missingInterfaces: MissingInterface[];
+  /** Running modules that need an interface only this one implements. */
+  dependents: string[];
+}
+
+export interface StoreListing {
+  enabled: boolean;
+  modules: StoreListingEntry[];
+  busy: boolean;
+  interfaceVersion: string;
+  dev: boolean;
+  /** Why antelope.config.ts cannot be read or edited, when it cannot. */
+  configError?: string;
+  /** The dms-frontend version that runs, when the store can tell. */
+  frontendVersion?: string;
+  frontendVersionSource?: FrontendVersionSource;
+}
+
+/** A module the owner picked to implement a missing interface. */
+export interface StoreDependencyChoice {
+  interfacePackage: string;
+  /** npm package, never a git or local source. */
+  package: string;
+  /** Config written to its antelope.config.ts entry. */
+  config?: Record<string, unknown>;
+}
+
+/** Body of `POST /dms/store/<kind>`; only an install carries dependencies. */
+export interface StoreActionBody {
+  id: string;
+  dependencies?: StoreDependencyChoice[];
+}