@hartl-services/medusa-base 0.3.0 → 0.4.0

package/.medusa/server/src/admin/index.mjs

@@ -1,35 +1,91 @@
 import { defineRouteConfig } from "@medusajs/admin-sdk";
-import { jsxs, jsx } from "react/jsx-runtime";
-import { toast, Container, Heading, Text, Switch, Label, Button } from "@medusajs/ui";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { toast, Container, Heading, Text, Alert, Button, Label, Switch, Input, Select, Hint, StatusBadge, usePrompt } from "@medusajs/ui";
 import { useQuery, useQueryClient, useMutation } from "@tanstack/react-query";
 import { pluginFeaturesAdminPaths } from "@hartl-services/medusa-food-supplements-contracts/paths/plugin-features";
 import Medusa from "@medusajs/js-sdk";
+import { Link, useParams } from "react-router-dom";
+import { useState, useEffect, useMemo, useRef } from "react";
 const texts = {
   menu: {
     label: "Hartl Services Plugins"
   },
   page: {
     title: "Hartl Services Plugins",
-    description: "Plugins und einzelne Funktionen ein- oder ausschalten. Änderungen gelten sofort; abgeschaltete Funktionen sind im Shop nicht erreichbar."
+    description: "Plugins ein- oder ausschalten und öffnen, um Funktionen, Einstellungen und Aktionen zu verwalten. Änderungen gelten sofort; abgeschaltete Funktionen sind im Shop nicht erreichbar."
   },
   states: {
-    loading: "Funktionsschalter werden geladen…",
-    error: "Funktionsschalter konnten nicht geladen werden.",
+    loading: "Plugins werden geladen…",
+    error: "Plugins konnten nicht geladen werden.",
     empty: "Keine Plugins mit Funktionsschaltern installiert.",
-    retry: "Erneut laden"
+    retry: "Erneut laden",
+    notFound: "Dieses Plugin ist nicht installiert."
   },
   plugin: {
-    switchLabel: (label) => `${label} aktiv`
+    switchLabel: (label) => `${label} aktiv`,
+    open: "Öffnen",
+    openLabel: (label) => `${label} öffnen`
+  },
+  chips: {
+    enabled: "aktiv",
+    disabled: "aus",
+    configured: "konfiguriert",
+    notConfigured: (labels) => `nicht konfiguriert: ${labels}`
+  },
+  detail: {
+    back: "Zurück zu Hartl Services Plugins"
+  },
+  sections: {
+    features: "Funktionen",
+    settings: "Einstellungen",
+    actions: "Aktionen"
   },
   hints: {
     pluginDisabled: "Das Plugin ist ausgeschaltet. Alle Funktionen sind inaktiv, ihre Einstellungen bleiben erhalten.",
     parentDisabled: (parentLabel) => `Inaktiv, solange „${parentLabel}“ ausgeschaltet ist.`,
     saving: "Wird gespeichert…"
   },
+  settings: {
+    missing: (labels) => `Nicht konfiguriert: ${labels}`,
+    save: "Einstellungen speichern",
+    secretPlaceholder: "gesetzt",
+    secretClear: "Löschen",
+    secretClearPending: "Wird beim Speichern gelöscht; danach gilt der Wert aus der Konfiguration, falls vorhanden.",
+    secretClearUndo: "Nicht löschen",
+    secretClearLabel: (label) => `${label} löschen`,
+    secretClearUndoLabel: (label) => `${label} nicht löschen`,
+    invalidates: (labels) => `Beim Ändern muss ${labels} neu eingegeben werden.`,
+    required: "Pflichtfeld",
+    invalidNumber: "Bitte eine gültige Zahl eingeben.",
+    outOfRange: "Der Wert liegt außerhalb des erlaubten Bereichs.",
+    numberMin: (min) => `Mindestens ${min}.`,
+    numberMax: (max) => `Höchstens ${max}.`,
+    numberRange: (min, max) => `Zwischen ${min} und ${max}.`,
+    selectPlaceholder: "Bitte auswählen",
+    clearHint: "Ein leeres Feld speichern entfernt den gespeicherten Wert (dann gilt Konfiguration oder Standard).",
+    source: {
+      stored: "gespeichert",
+      config: "aus Konfiguration",
+      default: "Standard",
+      none: "nicht gesetzt"
+    }
+  },
+  actions: {
+    confirmTitle: (label) => `${label}?`,
+    confirm: "Ausführen",
+    cancel: "Abbrechen",
+    runningSince: (time) => `läuft seit ${time}`,
+    lastCompleted: (time) => `Zuletzt erfolgreich: ${time}`,
+    lastFailed: (time) => `Zuletzt fehlgeschlagen: ${time}`
+  },
   toasts: {
     saved: "Einstellung wurde gespeichert.",
     saveFailed: "Einstellung konnte nicht gespeichert werden.",
-    conflict: "Die Einstellungen wurden zwischenzeitlich geändert und neu geladen."
+    conflict: "Die Einstellungen wurden zwischenzeitlich geändert und neu geladen.",
+    actionCompleted: (label) => `„${label}“ wurde ausgeführt.`,
+    actionStarted: (label) => `„${label}“ wurde gestartet und läuft im Hintergrund.`,
+    actionFailed: (label) => `„${label}“ ist fehlgeschlagen.`,
+    actionAlreadyRunning: (label) => `„${label}“ läuft bereits; der Fortschritt wird angezeigt.`
   },
   errors: {
     unknown: "Unbekannter Fehler"
@@ -58,62 +114,679 @@ const getErrorMessage = (error) => {
   return void 0;
 };
 const sdk = new Medusa({
-  baseUrl: __BACKEND_URL__ ?? "/",
+  baseUrl: (typeof __BACKEND_URL__ === "undefined" ? void 0 : __BACKEND_URL__) ?? "/",
   auth: {
-    type: __AUTH_TYPE__ ?? "session",
-    jwtTokenStorageKey: __JWT_TOKEN_STORAGE_KEY__ || void 0
+    type: (typeof __AUTH_TYPE__ === "undefined" ? void 0 : __AUTH_TYPE__) ?? "session",
+    jwtTokenStorageKey: (typeof __JWT_TOKEN_STORAGE_KEY__ === "undefined" ? void 0 : __JWT_TOKEN_STORAGE_KEY__) || void 0
   }
 });
 const listPluginFeatures = () => sdk.client.fetch(
   pluginFeaturesAdminPaths.get.list,
   { method: "GET" }
 );
+const retrievePluginFeatures = (pluginKey) => sdk.client.fetch(
+  pluginFeaturesAdminPaths.get.retrieve(pluginKey),
+  { method: "GET" }
+);
 const updatePluginFeatures = (payload) => sdk.client.fetch(
   pluginFeaturesAdminPaths.post.update,
   { method: "POST", body: payload }
 );
+const updatePluginSettings = (pluginKey, payload) => sdk.client.fetch(
+  pluginFeaturesAdminPaths.post.updateSettings(pluginKey),
+  { method: "POST", body: payload }
+);
+const runPluginAction = (pluginKey, actionKey) => sdk.client.fetch(
+  pluginFeaturesAdminPaths.post.runAction(pluginKey, actionKey),
+  { method: "POST", body: {} }
+);
+const listPluginActionRuns = (pluginKey, actionKey, limit = 1) => sdk.client.fetch(
+  pluginFeaturesAdminPaths.get.actionRuns(pluginKey, actionKey),
+  { method: "GET", query: { limit } }
+);
 const pluginFeatureKeys = {
   all: ["plugin-features"],
-  list: () => [...pluginFeatureKeys.all, "list"]
+  list: () => [...pluginFeatureKeys.all, "list"],
+  details: () => [...pluginFeatureKeys.all, "detail"],
+  detail: (pluginKey) => [...pluginFeatureKeys.details(), pluginKey],
+  actionRuns: (pluginKey, actionKey) => [...pluginFeatureKeys.all, "action-runs", pluginKey, actionKey]
 };
 const isConflict = (error) => typeof error === "object" && error !== null && "status" in error && error.status === 409;
+const storePlugin = (queryClient, plugin2) => {
+  queryClient.setQueryData(
+    pluginFeatureKeys.list(),
+    (current) => current && {
+      plugins: current.plugins.map(
+        (entry) => entry.plugin_key === plugin2.plugin_key ? plugin2 : entry
+      )
+    }
+  );
+  queryClient.setQueryData(
+    pluginFeatureKeys.detail(plugin2.plugin_key),
+    { plugin: plugin2 }
+  );
+};
+const onSaveError = async (queryClient, error) => {
+  if (isConflict(error)) {
+    toast.error(texts.toasts.conflict);
+  } else {
+    toast.error(texts.toasts.saveFailed, {
+      description: getErrorMessage(error) ?? texts.errors.unknown
+    });
+  }
+  await queryClient.invalidateQueries({ queryKey: pluginFeatureKeys.all });
+};
 function usePluginFeatures() {
   return useQuery({
     queryKey: pluginFeatureKeys.list(),
     queryFn: listPluginFeatures
   });
 }
+function usePluginFeature(pluginKey) {
+  const queryClient = useQueryClient();
+  return useQuery({
+    queryKey: pluginFeatureKeys.detail(pluginKey ?? ""),
+    queryFn: () => retrievePluginFeatures(pluginKey),
+    enabled: Boolean(pluginKey),
+    placeholderData: () => {
+      const plugin2 = queryClient.getQueryData(pluginFeatureKeys.list())?.plugins.find((entry) => entry.plugin_key === pluginKey);
+      return plugin2 ? { plugin: plugin2 } : void 0;
+    }
+  });
+}
 function useUpdatePluginFeatures() {
   const queryClient = useQueryClient();
   return useMutation({
     mutationFn: updatePluginFeatures,
     onSuccess: ({ plugin: plugin2 }) => {
+      storePlugin(queryClient, plugin2);
+      toast.success(texts.toasts.saved);
+    },
+    onError: (error) => onSaveError(queryClient, error)
+  });
+}
+function useUpdatePluginSettings(pluginKey) {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (payload) => updatePluginSettings(pluginKey, payload),
+    onSuccess: ({ plugin: plugin2 }) => {
+      storePlugin(queryClient, plugin2);
+      toast.success(texts.toasts.saved);
+    },
+    onError: (error) => onSaveError(queryClient, error)
+  });
+}
+const PLUGIN_ACTION_RUN_POLL_MS = 2e3;
+function useLatestPluginActionRun(pluginKey, actionKey) {
+  return useQuery({
+    queryKey: pluginFeatureKeys.actionRuns(pluginKey, actionKey),
+    queryFn: () => listPluginActionRuns(pluginKey, actionKey, 1),
+    select: (data) => data.runs[0],
+    refetchInterval: (query) => query.state.data?.runs[0]?.status === "running" ? PLUGIN_ACTION_RUN_POLL_MS : false
+  });
+}
+function useRunPluginAction(pluginKey) {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (action) => runPluginAction(pluginKey, action.key),
+    onSuccess: ({ action: run }, action) => {
       queryClient.setQueryData(
-        pluginFeatureKeys.list(),
-        (current) => current && {
-          plugins: current.plugins.map(
-            (entry) => entry.plugin_key === plugin2.plugin_key ? plugin2 : entry
-          )
-        }
+        pluginFeatureKeys.actionRuns(pluginKey, action.key),
+        { runs: [run.run] }
       );
-      toast.success(texts.toasts.saved);
+      if (run.status === "started") {
+        toast.info(texts.toasts.actionStarted(action.label));
+      } else {
+        toast.success(texts.toasts.actionCompleted(action.label));
+      }
     },
-    onError: async (error) => {
+    onError: async (error, action) => {
       if (isConflict(error)) {
-        toast.error(texts.toasts.conflict);
+        toast.info(texts.toasts.actionAlreadyRunning(action.label));
       } else {
-        toast.error(texts.toasts.saveFailed, {
+        toast.error(texts.toasts.actionFailed(action.label), {
           description: getErrorMessage(error) ?? texts.errors.unknown
         });
       }
-      await queryClient.invalidateQueries({ queryKey: pluginFeatureKeys.list() });
+      await queryClient.invalidateQueries({
+        queryKey: pluginFeatureKeys.actionRuns(pluginKey, action.key)
+      });
     }
   });
 }
+const PLUGIN_HUB_PATH = "/settings/hartl-services";
+const pluginDetailPath = (pluginKey) => `${PLUGIN_HUB_PATH}/plugin/${encodeURIComponent(pluginKey)}`;
+const initialEntry = (setting) => {
+  if (setting.type === "secret") {
+    return "";
+  }
+  if (setting.type === "boolean") {
+    return setting.value === true;
+  }
+  return setting.value === null ? "" : String(setting.value);
+};
+const initialSettingsDraft = (settings) => Object.fromEntries(
+  settings.map((setting) => [setting.key, initialEntry(setting)])
+);
+const outsideBounds = (setting, value) => setting.min !== null && value < setting.min || setting.max !== null && value > setting.max;
+const numberEntryValue = (entry) => {
+  const value = Number(entry.trim());
+  return Number.isFinite(value) ? value : null;
+};
+const invalidDraftKeys = (settings, draft, unparsable = []) => settings.filter((setting) => {
+  if (setting.type !== "number") {
+    return false;
+  }
+  if (unparsable.includes(setting.key)) {
+    return true;
+  }
+  const entry = draft[setting.key];
+  if (typeof entry !== "string" || entry.trim() === "") {
+    return false;
+  }
+  const value = numberEntryValue(entry);
+  return value === null || outsideBounds(setting, value);
+}).map((setting) => setting.key);
+const changedSettingValues = (settings, draft, unparsable = []) => {
+  const initial = initialSettingsDraft(settings);
+  const values = {};
+  for (const setting of settings) {
+    const entry = draft[setting.key];
+    if (entry === void 0 || entry === initial[setting.key]) {
+      continue;
+    }
+    if (setting.type === "secret") {
+      if (entry === null) {
+        if (setting.source === "stored") {
+          values[setting.key] = null;
+        }
+      } else if (typeof entry === "string" && entry !== "") {
+        values[setting.key] = entry;
+      }
+      continue;
+    }
+    if (setting.type === "boolean") {
+      values[setting.key] = entry === true;
+      continue;
+    }
+    if (unparsable.includes(setting.key)) {
+      continue;
+    }
+    const text = typeof entry === "string" ? entry.trim() : "";
+    if (text === "") {
+      if (setting.source === "stored") {
+        values[setting.key] = null;
+      }
+    } else if (setting.type === "number") {
+      const value = numberEntryValue(text);
+      if (value !== null) {
+        values[setting.key] = value;
+      }
+    } else {
+      values[setting.key] = text;
+    }
+  }
+  return values;
+};
+function usePluginSettingsForm(plugin2) {
+  const mutation = useUpdatePluginSettings(plugin2.plugin_key);
+  const [draft, setDraft] = useState(
+    () => initialSettingsDraft(plugin2.settings)
+  );
+  const [unparsable, setUnparsable] = useState([]);
+  useEffect(() => {
+    setDraft(initialSettingsDraft(plugin2.settings));
+    setUnparsable([]);
+  }, [plugin2.settings, plugin2.settings_version]);
+  const changes = useMemo(
+    () => changedSettingValues(plugin2.settings, draft, unparsable),
+    [plugin2.settings, draft, unparsable]
+  );
+  const invalid = useMemo(
+    () => invalidDraftKeys(plugin2.settings, draft, unparsable),
+    [plugin2.settings, draft, unparsable]
+  );
+  const dirty = Object.keys(changes).length > 0;
+  const setValue = (key, value, badInput = false) => {
+    setDraft((current) => ({ ...current, [key]: value }));
+    setUnparsable(
+      (current) => badInput ? current.includes(key) ? current : [...current, key] : current.filter((entry) => entry !== key)
+    );
+  };
+  const submit = (event) => {
+    event.preventDefault();
+    if (!dirty || invalid.length > 0 || mutation.isPending) {
+      return;
+    }
+    mutation.mutate({
+      expected_version: plugin2.settings_version,
+      values: changes
+    });
+  };
+  return {
+    draft,
+    setValue,
+    dirty,
+    invalid,
+    submit,
+    mutation
+  };
+}
+const fieldId = (pluginKey, key) => `plugin-setting-${pluginKey}-${key}`;
+const missingLabels = (plugin2) => plugin2.missing.map(
+  (key) => plugin2.settings.find((setting) => setting.key === key)?.label ?? key
+).join(", ");
+const invalidatesLabels = (plugin2, setting) => setting.invalidates.map(
+  (key) => plugin2.settings.find((candidate) => candidate.key === key)?.label ?? key
+).join(", ");
+const boundsText = (setting) => setting.min !== null && setting.max !== null ? texts.settings.numberRange(setting.min, setting.max) : setting.min !== null ? texts.settings.numberMin(setting.min) : setting.max !== null ? texts.settings.numberMax(setting.max) : void 0;
+const SettingField = ({
+  pluginKey,
+  setting,
+  invalidatesLabels: invalidatesLabels2,
+  value,
+  invalid,
+  disabled,
+  onChange
+}) => {
+  const id = fieldId(pluginKey, setting.key);
+  const hintId = `${id}-hint`;
+  const clearPending = setting.type === "secret" && value === null;
+  const bounds = setting.type === "number" ? boundsText(setting) : void 0;
+  return /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsxs(Label, { htmlFor: id, size: "small", weight: "plus", children: [
+        setting.label,
+        setting.required && /* @__PURE__ */ jsxs("span", { className: "text-ui-fg-muted", children: [
+          " (",
+          texts.settings.required,
+          ")"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(Text, { size: "xsmall", className: "text-ui-fg-muted shrink-0", children: texts.settings.source[setting.source] })
+    ] }),
+    setting.type === "boolean" ? /* @__PURE__ */ jsx(
+      Switch,
+      {
+        id,
+        "aria-describedby": hintId,
+        checked: value === true,
+        disabled,
+        onCheckedChange: (checked) => onChange(checked === true)
+      }
+    ) : setting.type === "secret" ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          id,
+          "aria-describedby": hintId,
+          className: "flex-1",
+          type: "password",
+          autoComplete: "new-password",
+          placeholder: setting.is_set ? texts.settings.secretPlaceholder : "",
+          value: typeof value === "string" ? value : "",
+          disabled: disabled || clearPending,
+          onChange: (event) => onChange(event.target.value)
+        }
+      ),
+      setting.source === "stored" && /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          size: "small",
+          variant: "secondary",
+          disabled,
+          "aria-label": clearPending ? texts.settings.secretClearUndoLabel(setting.label) : texts.settings.secretClearLabel(setting.label),
+          onClick: () => onChange(clearPending ? "" : null),
+          children: clearPending ? texts.settings.secretClearUndo : texts.settings.secretClear
+        }
+      )
+    ] }) : setting.type === "select" ? /* @__PURE__ */ jsxs(
+      Select,
+      {
+        value: typeof value === "string" ? value : "",
+        disabled,
+        onValueChange: (next) => onChange(next),
+        children: [
+          /* @__PURE__ */ jsx(Select.Trigger, { id, "aria-describedby": hintId, children: /* @__PURE__ */ jsx(Select.Value, { placeholder: texts.settings.selectPlaceholder }) }),
+          /* @__PURE__ */ jsx(Select.Content, { children: setting.options.map((option) => /* @__PURE__ */ jsx(Select.Item, { value: option.value, children: option.label }, option.value)) })
+        ]
+      }
+    ) : setting.type === "number" ? /* @__PURE__ */ jsx(
+      Input,
+      {
+        id,
+        "aria-describedby": hintId,
+        "aria-invalid": invalid,
+        type: "number",
+        step: "any",
+        min: setting.min ?? void 0,
+        max: setting.max ?? void 0,
+        value: typeof value === "string" ? value : "",
+        disabled,
+        onChange: (event) => onChange(event.target.value, event.target.validity.badInput)
+      }
+    ) : /* @__PURE__ */ jsx(
+      Input,
+      {
+        id,
+        "aria-describedby": hintId,
+        "aria-invalid": invalid,
+        type: setting.type === "url" ? "url" : "text",
+        value: typeof value === "string" ? value : "",
+        disabled,
+        onChange: (event) => onChange(event.target.value)
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { id: hintId, className: "grid gap-1", children: [
+      setting.description && /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: setting.description }),
+      clearPending && /* @__PURE__ */ jsx(Hint, { variant: "info", children: texts.settings.secretClearPending }),
+      invalidatesLabels2 && /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-muted", children: texts.settings.invalidates(invalidatesLabels2) }),
+      bounds && !invalid && /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-muted", children: bounds }),
+      invalid && /* @__PURE__ */ jsx(Hint, { variant: "error", children: bounds ?? texts.settings.invalidNumber })
+    ] })
+  ] });
+};
+const PluginSettingsForm = ({ plugin: plugin2 }) => {
+  const form = usePluginSettingsForm(plugin2);
+  const pending = form.mutation.isPending;
+  const hasTextFields = plugin2.settings.some(
+    (setting) => setting.type !== "boolean" && setting.type !== "secret" && setting.type !== "select"
+  );
+  return /* @__PURE__ */ jsxs(Container, { className: "divide-y p-0", "aria-busy": pending, children: [
+    /* @__PURE__ */ jsxs("div", { className: "px-6 py-4", children: [
+      /* @__PURE__ */ jsx(Heading, { level: "h2", children: texts.sections.settings }),
+      hasTextFields && /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: texts.settings.clearHint })
+    ] }),
+    /* @__PURE__ */ jsxs("form", { onSubmit: form.submit, className: "grid gap-5 px-6 py-5", children: [
+      !plugin2.configured && /* @__PURE__ */ jsx(Alert, { variant: "warning", children: texts.settings.missing(missingLabels(plugin2)) }),
+      plugin2.settings.map((setting) => /* @__PURE__ */ jsx(
+        SettingField,
+        {
+          pluginKey: plugin2.plugin_key,
+          setting,
+          invalidatesLabels: invalidatesLabels(plugin2, setting),
+          value: form.draft[setting.key],
+          invalid: form.invalid.includes(setting.key),
+          disabled: pending,
+          onChange: (value, badInput) => form.setValue(setting.key, value, badInput)
+        },
+        setting.key
+      )),
+      /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "submit",
+          size: "small",
+          isLoading: pending,
+          disabled: !form.dirty || form.invalid.length > 0 || pending,
+          children: texts.settings.save
+        }
+      ) })
+    ] })
+  ] });
+};
+const PluginStatusChips = ({ plugin: plugin2 }) => /* @__PURE__ */ jsxs("div", { className: "mt-2 flex flex-wrap gap-2", children: [
+  plugin2.switchable && /* @__PURE__ */ jsx(StatusBadge, { color: plugin2.enabled ? "green" : "grey", children: plugin2.enabled ? texts.chips.enabled : texts.chips.disabled }),
+  plugin2.settings.length > 0 && /* @__PURE__ */ jsx(StatusBadge, { color: plugin2.configured ? "green" : "orange", children: plugin2.configured ? texts.chips.configured : texts.chips.notConfigured(missingLabels(plugin2)) })
+] });
+const PluginHubCard = ({ plugin: plugin2 }) => {
+  const mutation = useUpdatePluginFeatures();
+  const pending = mutation.isPending;
+  const toggle = (enabled) => {
+    mutation.mutate({
+      plugin_key: plugin2.plugin_key,
+      expected_version: plugin2.version,
+      enabled,
+      features: Object.fromEntries(
+        plugin2.features.map((feature) => [feature.key, feature.enabled])
+      )
+    });
+  };
+  return /* @__PURE__ */ jsxs(
+    Container,
+    {
+      className: "flex flex-wrap items-start justify-between gap-4 px-6 py-4",
+      "aria-busy": pending,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx(Heading, { level: "h2", children: plugin2.label }),
+          plugin2.description && /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: plugin2.description }),
+          /* @__PURE__ */ jsx(PluginStatusChips, { plugin: plugin2 }),
+          pending && /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-muted mt-1", children: texts.hints.saving })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-3", children: [
+          plugin2.switchable && /* @__PURE__ */ jsx(
+            Switch,
+            {
+              "aria-label": texts.plugin.switchLabel(plugin2.label),
+              checked: plugin2.enabled,
+              disabled: pending,
+              onCheckedChange: (checked) => toggle(checked === true)
+            }
+          ),
+          /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", asChild: true, children: /* @__PURE__ */ jsx(
+            Link,
+            {
+              to: plugin2.admin_page ?? pluginDetailPath(plugin2.plugin_key),
+              "aria-label": texts.plugin.openLabel(plugin2.label),
+              children: texts.plugin.open
+            }
+          ) })
+        ] })
+      ]
+    }
+  );
+};
+const PluginFeaturesSettingsPage = () => {
+  const query = usePluginFeatures();
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-3", children: [
+    /* @__PURE__ */ jsxs(Container, { className: "px-6 py-4", children: [
+      /* @__PURE__ */ jsx(Heading, { level: "h1", children: texts.page.title }),
+      /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-subtle", children: texts.page.description })
+    ] }),
+    query.isPending ? /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-subtle", children: texts.states.loading }) }) : query.isError ? /* @__PURE__ */ jsxs(Container, { className: "flex flex-wrap items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-error", children: texts.states.error }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "small",
+          variant: "secondary",
+          isLoading: query.isFetching,
+          onClick: () => void query.refetch(),
+          children: texts.states.retry
+        }
+      )
+    ] }) : query.data.plugins.length === 0 ? /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-subtle", children: texts.states.empty }) }) : [
+      ...query.data.plugins.filter((plugin2) => !plugin2.switchable),
+      ...query.data.plugins.filter((plugin2) => plugin2.switchable)
+    ].map((plugin2) => /* @__PURE__ */ jsx(PluginHubCard, { plugin: plugin2 }, plugin2.plugin_key))
+  ] });
+};
+const config = defineRouteConfig({
+  label: texts.menu.label
+});
+const SUMMARY_MAX_LENGTH = 200;
+const cut = (text) => text.length > SUMMARY_MAX_LENGTH ? `${text.slice(0, SUMMARY_MAX_LENGTH - 1)}…` : text;
+const isPrimitive = (value) => typeof value === "string" || typeof value === "number" || typeof value === "boolean";
+const summarizeActionResult = (result) => {
+  if (result === null || result === void 0) {
+    return null;
+  }
+  if (isPrimitive(result)) {
+    return cut(String(result));
+  }
+  if (typeof result !== "object" || Array.isArray(result)) {
+    return null;
+  }
+  const record = result;
+  for (const key of ["summary", "message"]) {
+    const value = record[key];
+    if (typeof value === "string" && value.trim()) {
+      return cut(value.trim());
+    }
+  }
+  const parts = Object.entries(record).filter(
+    (entry) => isPrimitive(entry[1])
+  ).map(([key, value]) => `${key}: ${String(value)}`);
+  return parts.length > 0 ? cut(parts.join(", ")) : null;
+};
+const progressPercent = (progress) => {
+  if (!progress || progress.total === null || progress.total <= 0) {
+    return null;
+  }
+  return Math.max(
+    0,
+    Math.min(100, Math.round(progress.current / progress.total * 100))
+  );
+};
+const progressCount = (progress) => {
+  if (!progress) {
+    return null;
+  }
+  return progress.total === null ? String(progress.current) : `${progress.current} / ${progress.total}`;
+};
+const formatRunTime = (iso) => {
+  if (!iso) {
+    return "";
+  }
+  const date = new Date(iso);
+  return Number.isNaN(date.getTime()) ? iso : date.toLocaleString("de-AT", { dateStyle: "short", timeStyle: "short" });
+};
+const runTransition = (previous, current) => {
+  if (!previous || !current || previous.id !== current.id || previous.status !== "running" || current.status === "running") {
+    return null;
+  }
+  return current.status;
+};
+const RunProgress = ({ run }) => {
+  const percent = progressPercent(run.progress);
+  const count = progressCount(run.progress);
+  const label = run.progress?.label;
+  return /* @__PURE__ */ jsxs("div", { className: "mt-2 flex flex-col gap-y-1", role: "status", children: [
+    (label || count) && /* @__PURE__ */ jsx(Text, { size: "small", children: [label, count].filter(Boolean).join(" · ") }),
+    percent !== null && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "bg-ui-border-base w-full overflow-hidden rounded-full",
+        style: { height: 6 },
+        role: "progressbar",
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-valuenow": percent,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "bg-ui-fg-interactive h-full rounded-full",
+            style: { width: `${percent}%`, height: "100%" }
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-muted", children: texts.actions.runningSince(formatRunTime(run.started_at)) })
+  ] });
+};
+const RunStatusLine = ({ run }) => {
+  if (run.status === "completed") {
+    const summary = summarizeActionResult(run.result);
+    return /* @__PURE__ */ jsxs("div", { className: "mt-1", children: [
+      /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: texts.actions.lastCompleted(
+        formatRunTime(run.finished_at ?? run.started_at)
+      ) }),
+      summary && /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: summary })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "mt-1", children: [
+    /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-error", children: texts.actions.lastFailed(
+      formatRunTime(run.finished_at ?? run.started_at)
+    ) }),
+    run.message && /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-error", children: run.message })
+  ] });
+};
+const PluginActionRow = ({
+  pluginKey,
+  action,
+  starting,
+  blocked,
+  onRun
+}) => {
+  const { data: run } = useLatestPluginActionRun(pluginKey, action.key);
+  const previous = useRef(void 0);
+  const running = run?.status === "running";
+  useEffect(() => {
+    const transition = runTransition(previous.current, run);
+    previous.current = run;
+    if (transition === "completed") {
+      toast.success(texts.toasts.actionCompleted(action.label), {
+        description: summarizeActionResult(run?.result) ?? void 0
+      });
+    } else if (transition === "failed") {
+      toast.error(texts.toasts.actionFailed(action.label), {
+        description: run?.message ?? texts.errors.unknown
+      });
+    }
+  }, [run, action.label]);
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4 px-6 py-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: action.label }),
+      action.description && /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: action.description }),
+      run && (running ? /* @__PURE__ */ jsx(RunProgress, { run }) : /* @__PURE__ */ jsx(RunStatusLine, { run }))
+    ] }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        size: "small",
+        variant: "secondary",
+        className: "shrink-0",
+        isLoading: starting || running,
+        disabled: blocked || starting || running,
+        onClick: () => onRun(action),
+        children: action.label
+      }
+    )
+  ] });
+};
+const PluginActionsSection = ({ plugin: plugin2 }) => {
+  const mutation = useRunPluginAction(plugin2.plugin_key);
+  const prompt = usePrompt();
+  const startingKey = mutation.isPending ? mutation.variables?.key : void 0;
+  const run = async (action) => {
+    if (mutation.isPending) {
+      return;
+    }
+    if (action.confirm) {
+      const confirmed = await prompt({
+        title: texts.actions.confirmTitle(action.label),
+        description: action.confirm,
+        confirmText: texts.actions.confirm,
+        cancelText: texts.actions.cancel,
+        variant: "confirmation"
+      });
+      if (!confirmed) {
+        return;
+      }
+    }
+    mutation.mutate(action);
+  };
+  return /* @__PURE__ */ jsxs(Container, { className: "divide-y p-0", children: [
+    /* @__PURE__ */ jsx("div", { className: "px-6 py-4", children: /* @__PURE__ */ jsx(Heading, { level: "h2", children: texts.sections.actions }) }),
+    plugin2.actions.map((action) => /* @__PURE__ */ jsx(
+      PluginActionRow,
+      {
+        pluginKey: plugin2.plugin_key,
+        action,
+        starting: startingKey === action.key,
+        blocked: mutation.isPending && startingKey !== action.key,
+        onRun: (entry) => void run(entry)
+      },
+      action.key
+    ))
+  ] });
+};
 const configuredFeatures = (plugin2) => Object.fromEntries(
   plugin2.features.map((feature) => [feature.key, feature.enabled])
 );
-const PluginFeaturesCard = ({ plugin: plugin2 }) => {
+const PluginFeaturesCard = ({ plugin: plugin2, title }) => {
   const mutation = useUpdatePluginFeatures();
   const pending = mutation.isPending;
   const labels = new Map(
@@ -132,12 +805,12 @@ const PluginFeaturesCard = ({ plugin: plugin2 }) => {
   return /* @__PURE__ */ jsxs(Container, { className: "divide-y p-0", "aria-busy": pending, children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4 px-6 py-4", children: [
       /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-        /* @__PURE__ */ jsx(Heading, { level: "h2", children: plugin2.label }),
-        plugin2.description && /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: plugin2.description }),
+        /* @__PURE__ */ jsx(Heading, { level: "h2", children: title ?? plugin2.label }),
+        title === void 0 && plugin2.description && /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: plugin2.description }),
         !plugin2.enabled && /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-muted mt-1", children: texts.hints.pluginDisabled }),
         pending && /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-muted mt-1", children: texts.hints.saving })
       ] }),
-      /* @__PURE__ */ jsx(
+      plugin2.switchable && /* @__PURE__ */ jsx(
         Switch,
         {
           id: pluginSwitchId,
@@ -197,14 +870,41 @@ const PluginFeaturesCard = ({ plugin: plugin2 }) => {
     })
   ] });
 };
-const PluginFeaturesSettingsPage = () => {
-  const query = usePluginFeatures();
+const PluginFeatureSections = ({ pluginKey }) => {
+  const plugin2 = usePluginFeature(pluginKey).data?.plugin;
+  if (!plugin2) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    (plugin2.switchable || plugin2.features.length > 0) && /* @__PURE__ */ jsx(PluginFeaturesCard, { plugin: plugin2, title: texts.sections.features }),
+    plugin2.settings.length > 0 && /* @__PURE__ */ jsx(PluginSettingsForm, { plugin: plugin2 }),
+    plugin2.actions.length > 0 && /* @__PURE__ */ jsx(PluginActionsSection, { plugin: plugin2 })
+  ] });
+};
+const isNotFound = (error) => typeof error === "object" && error !== null && error.status === 404;
+const PluginPageShell = ({ pluginKey, children }) => {
+  const query = usePluginFeature(pluginKey);
+  const plugin2 = query.data?.plugin;
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-3", children: [
-    /* @__PURE__ */ jsxs(Container, { className: "px-6 py-4", children: [
-      /* @__PURE__ */ jsx(Heading, { level: "h1", children: texts.page.title }),
-      /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-subtle", children: texts.page.description })
-    ] }),
-    query.isPending ? /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-subtle", children: texts.states.loading }) }) : query.isError ? /* @__PURE__ */ jsxs(Container, { className: "flex flex-wrap items-center justify-between gap-3", children: [
+    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
+      Link,
+      {
+        to: PLUGIN_HUB_PATH,
+        className: "text-ui-fg-subtle hover:text-ui-fg-base txt-compact-small-plus",
+        children: [
+          "← ",
+          texts.detail.back
+        ]
+      }
+    ) }),
+    plugin2 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(Container, { className: "px-6 py-4", children: [
+        /* @__PURE__ */ jsx(Heading, { level: "h1", children: plugin2.label }),
+        plugin2.description && /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-subtle", children: plugin2.description }),
+        /* @__PURE__ */ jsx(PluginStatusChips, { plugin: plugin2 })
+      ] }),
+      children
+    ] }) : query.isPending ? /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-subtle", children: texts.states.loading }) }) : isNotFound(query.error) ? /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-subtle", children: texts.states.notFound }) }) : /* @__PURE__ */ jsxs(Container, { className: "flex flex-wrap items-center justify-between gap-3", children: [
       /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-error", children: texts.states.error }),
       /* @__PURE__ */ jsx(
         Button,
@@ -216,12 +916,13 @@ const PluginFeaturesSettingsPage = () => {
           children: texts.states.retry
         }
       )
-    ] }) : query.data.plugins.length === 0 ? /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-subtle", children: texts.states.empty }) }) : query.data.plugins.map((plugin2) => /* @__PURE__ */ jsx(PluginFeaturesCard, { plugin: plugin2 }, plugin2.plugin_key))
+    ] })
   ] });
 };
-const config = defineRouteConfig({
-  label: texts.menu.label
-});
+const PluginDetailPage = () => {
+  const { plugin_key: pluginKey = "" } = useParams();
+  return /* @__PURE__ */ jsx(PluginPageShell, { pluginKey, children: /* @__PURE__ */ jsx(PluginFeatureSections, { pluginKey }) });
+};
 const widgetModule = { widgets: [] };
 const routeModule = {
   routes: [
@@ -229,6 +930,10 @@ const routeModule = {
       Component: PluginFeaturesSettingsPage,
       path: "/settings/hartl-services",
       handle: { label: config.label, translationNs: config.translationNs }
+    },
+    {
+      Component: PluginDetailPage,
+      path: "/settings/hartl-services/plugin/:plugin_key"
     }
   ]
 };