@open-mercato/core 0.4.7-develop-0a657b411f → 0.4.7-develop-11728c8558

package/dist/modules/integrations/backend/integrations/[id]/page.js

@@ -1,9 +1,14 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import Link from "next/link";
-import { useParams } from "next/navigation";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { z } from "zod";
 import { Page, PageBody } from "@open-mercato/ui/backend/Page";
+import { CrudForm } from "@open-mercato/ui/backend/CrudForm";
+import { WebhookSetupGuide } from "@open-mercato/ui/backend/WebhookSetupGuide";
+import { InjectionSpot, useInjectionWidgets } from "@open-mercato/ui/backend/injection/InjectionSpot";
+import { useGuardedMutation } from "@open-mercato/ui/backend/injection/useGuardedMutation";
+import { FormHeader } from "@open-mercato/ui/backend/forms";
 import { Card, CardHeader, CardTitle, CardContent } from "@open-mercato/ui/primitives/card";
 import { Badge } from "@open-mercato/ui/primitives/badge";
 import { Button } from "@open-mercato/ui/primitives/button";
@@ -11,11 +16,20 @@ import { Switch } from "@open-mercato/ui/primitives/switch";
 import { Input } from "@open-mercato/ui/primitives/input";
 import { Spinner } from "@open-mercato/ui/primitives/spinner";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@open-mercato/ui/primitives/tabs";
+import { JsonDisplay } from "@open-mercato/ui/backend/JsonDisplay";
 import { apiCall } from "@open-mercato/ui/backend/utils/apiCall";
 import { flash } from "@open-mercato/ui/backend/FlashMessages";
+import { createCrudFormError } from "@open-mercato/ui/backend/utils/serverErrors";
 import { useT } from "@open-mercato/shared/lib/i18n/context";
-import { LoadingMessage } from "@open-mercato/ui/backend/detail";
-import { ErrorMessage } from "@open-mercato/ui/backend/detail";
+import { LEGACY_INTEGRATION_DETAIL_TABS_SPOT_ID } from "@open-mercato/shared/modules/integrations/types";
+import { LoadingMessage, ErrorMessage } from "@open-mercato/ui/backend/detail";
+import { Bell, ChevronDown, ChevronRight, CreditCard, HardDrive, MessageSquare, RefreshCw, Truck, Webhook, Zap } from "lucide-react";
+import {
+  buildIntegrationDetailInjectedTabs,
+  filterIntegrationDetailWidgetsByKind,
+  resolveIntegrationDetailWidgetSpotId,
+  resolveRequestedIntegrationDetailTab
+} from "../detail-page-widgets.js";
 const UNSUPPORTED_CREDENTIAL_FIELD_TYPES = /* @__PURE__ */ new Set(["oauth", "ssh_keypair"]);
 function isEditableCredentialField(field) {
   return !UNSUPPORTED_CREDENTIAL_FIELD_TYPES.has(field.type);
@@ -30,49 +44,190 @@ const HEALTH_STATUS_STYLES = {
   degraded: "bg-yellow-100 text-yellow-800",
   unhealthy: "bg-red-100 text-red-800"
 };
-function IntegrationDetailPage() {
-  const params = useParams();
-  const integrationId = params.id;
+const CATEGORY_ICONS = {
+  payment: CreditCard,
+  shipping: Truck,
+  data_sync: RefreshCw,
+  communication: MessageSquare,
+  notification: Bell,
+  storage: HardDrive,
+  webhook: Webhook
+};
+function resolveRouteId(value) {
+  if (Array.isArray(value)) return value[0];
+  return value;
+}
+function resolvePathnameId(pathname) {
+  const parts = pathname.split("/").filter(Boolean);
+  const integrationId = parts.at(-1);
+  if (!integrationId || integrationId === "integrations" || integrationId === "bundle") return void 0;
+  return decodeURIComponent(integrationId);
+}
+function buildCredentialFields(credFields) {
+  return credFields.map((field) => {
+    const shared = {
+      id: field.key,
+      label: field.label,
+      description: field.helpDetails ? /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+        field.helpText ? /* @__PURE__ */ jsx("div", { children: field.helpText }) : null,
+        /* @__PURE__ */ jsx(WebhookSetupGuide, { guide: field.helpDetails, buttonLabel: "Show details" })
+      ] }) : field.helpText,
+      placeholder: field.placeholder,
+      required: field.required
+    };
+    if (field.type === "secret") {
+      return {
+        ...shared,
+        type: "custom",
+        component: ({ id, value, setValue, disabled }) => /* @__PURE__ */ jsx(
+          Input,
+          {
+            id,
+            type: "password",
+            placeholder: field.placeholder,
+            value: typeof value === "string" ? value : "",
+            onChange: (event) => setValue(event.target.value),
+            disabled
+          }
+        )
+      };
+    }
+    if (field.type === "select" && field.options) {
+      return {
+        ...shared,
+        type: "select",
+        options: field.options
+      };
+    }
+    if (field.type === "boolean") {
+      return {
+        ...shared,
+        type: "checkbox"
+      };
+    }
+    return {
+      ...shared,
+      type: "text"
+    };
+  });
+}
+function isHealthLog(log) {
+  return log.message === "Health check passed" || log.message.startsWith("Health check:");
+}
+function extractHealthDetails(payload) {
+  if (!payload) return {};
+  return Object.fromEntries(
+    Object.entries(payload).filter(([key, value]) => key !== "status" && key !== "message" && value !== void 0 && value !== null)
+  );
+}
+function formatHealthValue(value) {
+  if (typeof value === "boolean") return value ? "Yes" : "No";
+  if (typeof value === "string") return value;
+  if (typeof value === "number") return String(value);
+  if (value instanceof Date) return value.toLocaleString();
+  return JSON.stringify(value);
+}
+function formatTypeLabel(value) {
+  return value.split("_").filter(Boolean).map((part) => part[0]?.toUpperCase() + part.slice(1)).join(" ");
+}
+function isPrimitiveLogValue(value) {
+  return value === null || typeof value === "string" || typeof value === "number" || typeof value === "boolean";
+}
+function formatLogDetailLabel(key) {
+  return key.replace(/([a-z0-9])([A-Z])/g, "$1 $2").replace(/[_-]+/g, " ").split(" ").filter(Boolean).map((part) => part[0]?.toUpperCase() + part.slice(1)).join(" ");
+}
+function formatLogPrimitiveValue(value) {
+  if (value === null) return "None";
+  if (typeof value === "boolean") return value ? "Yes" : "No";
+  return String(value);
+}
+function splitLogPayload(payload) {
+  if (!payload) {
+    return {
+      inlineEntries: [],
+      nestedEntries: []
+    };
+  }
+  const inlineEntries = [];
+  const nestedEntries = [];
+  Object.entries(payload).forEach(([key, value]) => {
+    if (isPrimitiveLogValue(value)) {
+      inlineEntries.push([key, value]);
+      return;
+    }
+    nestedEntries.push([key, value]);
+  });
+  return { inlineEntries, nestedEntries };
+}
+function IntegrationDetailPage({ params }) {
+  const pathname = usePathname();
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const integrationId = resolveRouteId(params?.id) ?? resolvePathnameId(pathname);
   const t = useT();
   const [detail, setDetail] = React.useState(null);
   const [isLoading, setIsLoading] = React.useState(true);
   const [error, setError] = React.useState(null);
   const [credValues, setCredValues] = React.useState({});
-  const [isSavingCreds, setIsSavingCreds] = React.useState(false);
+  const [credentialsFormKey, setCredentialsFormKey] = React.useState(0);
+  const [isSavingCredentials, setIsSavingCredentials] = React.useState(false);
   const [logs, setLogs] = React.useState([]);
   const [logLevel, setLogLevel] = React.useState("");
   const [isLoadingLogs, setIsLoadingLogs] = React.useState(false);
+  const [expandedLogId, setExpandedLogId] = React.useState(null);
   const [isCheckingHealth, setIsCheckingHealth] = React.useState(false);
   const [isTogglingState, setIsTogglingState] = React.useState(false);
+  const [latestHealthResult, setLatestHealthResult] = React.useState(null);
+  const [activeTab, setActiveTab] = React.useState("credentials");
+  const credentialsFormId = React.useId();
+  const resolveCurrentIntegrationId = React.useCallback(() => {
+    return integrationId ?? (typeof window !== "undefined" ? resolvePathnameId(window.location.pathname) : void 0);
+  }, [integrationId]);
   const loadDetail = React.useCallback(async () => {
-    setIsLoading(true);
-    setError(null);
-    const call = await apiCall(
-      `/api/integrations/${encodeURIComponent(integrationId)}`,
-      void 0,
-      { fallback: null }
-    );
-    if (!call.ok || !call.result) {
-      setError(t("integrations.detail.loadError"));
+    const currentIntegrationId = resolveCurrentIntegrationId();
+    if (!currentIntegrationId) {
       setIsLoading(false);
+      setError(t("integrations.detail.loadError", "Failed to load integration"));
       return;
     }
-    setDetail(call.result);
-    setIsLoading(false);
-  }, [integrationId, t]);
+    setError(null);
+    setIsLoading(true);
+    try {
+      const call = await apiCall(
+        `/api/integrations/${encodeURIComponent(currentIntegrationId)}`,
+        void 0,
+        { fallback: null }
+      );
+      if (!call.ok || !call.result) {
+        setError(t("integrations.detail.loadError", "Failed to load integration"));
+        setIsLoading(false);
+        return;
+      }
+      setDetail(call.result);
+      setIsLoading(false);
+    } catch {
+      setError(t("integrations.detail.loadError", "Failed to load integration"));
+      setIsLoading(false);
+    }
+  }, [resolveCurrentIntegrationId, t]);
   const loadCredentials = React.useCallback(async () => {
+    const currentIntegrationId = resolveCurrentIntegrationId();
+    if (!currentIntegrationId) return;
     const call = await apiCall(
-      `/api/integrations/${encodeURIComponent(integrationId)}/credentials`,
+      `/api/integrations/${encodeURIComponent(currentIntegrationId)}/credentials`,
       void 0,
       { fallback: null }
     );
     if (call.ok && call.result?.credentials) {
       setCredValues(call.result.credentials);
+      setCredentialsFormKey((current) => current + 1);
     }
-  }, [integrationId]);
+  }, [resolveCurrentIntegrationId]);
   const loadLogs = React.useCallback(async () => {
+    const currentIntegrationId = resolveCurrentIntegrationId();
+    if (!currentIntegrationId) return;
     setIsLoadingLogs(true);
-    const params2 = new URLSearchParams({ integrationId, pageSize: "50" });
+    const params2 = new URLSearchParams({ integrationId: currentIntegrationId, pageSize: "50" });
     if (logLevel) params2.set("level", logLevel);
     const call = await apiCall(
       `/api/integrations/logs?${params2.toString()}`,
@@ -83,7 +238,101 @@ function IntegrationDetailPage() {
       setLogs(call.result.items);
     }
     setIsLoadingLogs(false);
-  }, [integrationId, logLevel]);
+  }, [logLevel, resolveCurrentIntegrationId]);
+  const detailWidgetSpotId = React.useMemo(
+    () => resolveIntegrationDetailWidgetSpotId(detail?.integration ?? null, LEGACY_INTEGRATION_DETAIL_TABS_SPOT_ID),
+    [detail?.integration]
+  );
+  const mutationContextId = React.useMemo(
+    () => `integrations.detail:${integrationId ?? "unknown"}`,
+    [integrationId]
+  );
+  const { runMutation, retryLastMutation } = useGuardedMutation({
+    contextId: mutationContextId,
+    spotId: detailWidgetSpotId
+  });
+  const refreshDetail = React.useCallback(async () => {
+    await loadDetail();
+    await loadCredentials();
+  }, [loadCredentials, loadDetail]);
+  const refreshLogs = React.useCallback(async () => {
+    await loadLogs();
+  }, [loadLogs]);
+  const injectionContext = React.useMemo(
+    () => ({
+      formId: mutationContextId,
+      integrationDetailWidgetSpotId: detailWidgetSpotId,
+      resourceKind: "integrations.integration",
+      resourceId: integrationId ?? detail?.integration.id,
+      integrationId: integrationId ?? detail?.integration.id,
+      integration: detail?.integration ?? null,
+      detail,
+      state: detail?.state ?? null,
+      credentialValues: credValues,
+      latestHealthResult,
+      activeTab,
+      setActiveTab,
+      refreshDetail,
+      refreshLogs,
+      retryLastMutation
+    }),
+    [
+      activeTab,
+      credValues,
+      detail,
+      detailWidgetSpotId,
+      integrationId,
+      latestHealthResult,
+      mutationContextId,
+      refreshDetail,
+      refreshLogs,
+      retryLastMutation
+    ]
+  );
+  const { widgets: detailWidgets } = useInjectionWidgets(detailWidgetSpotId, {
+    context: injectionContext,
+    triggerOnLoad: true
+  });
+  const stackedDetailWidgets = React.useMemo(
+    () => filterIntegrationDetailWidgetsByKind(detailWidgets, "stack"),
+    [detailWidgets]
+  );
+  const groupedDetailWidgets = React.useMemo(
+    () => filterIntegrationDetailWidgetsByKind(detailWidgets, "group"),
+    [detailWidgets]
+  );
+  const injectedTabs = React.useMemo(
+    () => buildIntegrationDetailInjectedTabs(
+      detailWidgets,
+      (widget) => widget.placement?.groupLabel ? t(widget.placement.groupLabel, widget.module.metadata.title ?? widget.widgetId) : widget.module.metadata.title ?? widget.widgetId
+    ),
+    [detailWidgets, t]
+  );
+  const customTabIds = React.useMemo(
+    () => injectedTabs.map((tab) => tab.id),
+    [injectedTabs]
+  );
+  const runMutationWithContext = React.useCallback(
+    async ({
+      operation,
+      mutationPayload,
+      actionId,
+      tabId,
+      operationType = "update"
+    }) => {
+      return runMutation({
+        operation,
+        mutationPayload,
+        context: {
+          ...injectionContext,
+          operation: operationType,
+          actionId,
+          activeTab: tabId ?? activeTab
+        }
+      });
+    },
+    [activeTab, injectionContext, runMutation]
+  );
   React.useEffect(() => {
     void loadDetail();
   }, [loadDetail]);
@@ -93,181 +342,363 @@ function IntegrationDetailPage() {
   React.useEffect(() => {
     void loadLogs();
   }, [loadLogs]);
+  React.useEffect(() => {
+    setExpandedLogId((current) => current && logs.some((log) => log.id === current) ? current : null);
+  }, [logs]);
   const handleToggleState = React.useCallback(async (enabled) => {
+    const currentIntegrationId = resolveCurrentIntegrationId();
+    if (!currentIntegrationId) return;
     setIsTogglingState(true);
-    const call = await apiCall(`/api/integrations/${encodeURIComponent(integrationId)}/state`, {
-      method: "PUT",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ isEnabled: enabled })
-    }, { fallback: null });
-    if (call.ok) {
-      setDetail((prev) => prev ? { ...prev, state: { ...prev.state, isEnabled: enabled } } : prev);
-      flash(t("integrations.detail.stateUpdated"), "success");
-    } else {
+    try {
+      const call = await runMutationWithContext({
+        actionId: "toggle-state",
+        mutationPayload: { integrationId: currentIntegrationId, isEnabled: enabled },
+        operation: () => apiCall(`/api/integrations/${encodeURIComponent(currentIntegrationId)}/state`, {
+          method: "PUT",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ isEnabled: enabled })
+        }, { fallback: null })
+      });
+      if (call.ok) {
+        setDetail((prev) => prev ? { ...prev, state: { ...prev.state, isEnabled: enabled } } : prev);
+        flash(t("integrations.detail.stateUpdated"), "success");
+      } else {
+        flash(t("integrations.detail.stateError"), "error");
+      }
+    } catch {
       flash(t("integrations.detail.stateError"), "error");
+    } finally {
+      setIsTogglingState(false);
     }
-    setIsTogglingState(false);
-  }, [integrationId, t]);
-  const handleSaveCredentials = React.useCallback(async () => {
-    setIsSavingCreds(true);
-    const call = await apiCall(`/api/integrations/${encodeURIComponent(integrationId)}/credentials`, {
-      method: "PUT",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ credentials: credValues })
-    }, { fallback: null });
-    if (call.ok) {
-      flash(t("integrations.detail.credentials.saved"), "success");
-    } else {
-      flash(t("integrations.detail.credentials.saveError"), "error");
+  }, [resolveCurrentIntegrationId, runMutationWithContext, t]);
+  const handleSaveCredentials = React.useCallback(async (values) => {
+    const currentIntegrationId = resolveCurrentIntegrationId();
+    if (!currentIntegrationId) return;
+    setIsSavingCredentials(true);
+    try {
+      const call = await runMutationWithContext({
+        actionId: "save-credentials",
+        tabId: "credentials",
+        mutationPayload: { integrationId: currentIntegrationId, credentials: values },
+        operation: () => apiCall(`/api/integrations/${encodeURIComponent(currentIntegrationId)}/credentials`, {
+          method: "PUT",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ credentials: values })
+        }, { fallback: null })
+      });
+      if (call.ok) {
+        setCredValues(values);
+        setCredentialsFormKey((current) => current + 1);
+        flash(t("integrations.detail.credentials.saved"), "success");
+        return;
+      }
+      const result = call.result;
+      throw createCrudFormError(
+        result?.error ?? t("integrations.detail.credentials.saveError", "Failed to save credentials"),
+        result?.details?.fieldErrors,
+        { details: result?.details }
+      );
+    } finally {
+      setIsSavingCredentials(false);
     }
-    setIsSavingCreds(false);
-  }, [integrationId, credValues, t]);
+  }, [resolveCurrentIntegrationId, runMutationWithContext, t]);
   const handleVersionChange = React.useCallback(async (version) => {
-    const call = await apiCall(`/api/integrations/${encodeURIComponent(integrationId)}/version`, {
-      method: "PUT",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ apiVersion: version })
-    }, { fallback: null });
-    if (call.ok) {
-      setDetail((prev) => prev ? { ...prev, state: { ...prev.state, apiVersion: version } } : prev);
-      flash(t("integrations.detail.version.saved"), "success");
-    } else {
+    const currentIntegrationId = resolveCurrentIntegrationId();
+    if (!currentIntegrationId) return;
+    try {
+      const call = await runMutationWithContext({
+        actionId: "change-version",
+        tabId: "version",
+        mutationPayload: { integrationId: currentIntegrationId, apiVersion: version },
+        operation: () => apiCall(`/api/integrations/${encodeURIComponent(currentIntegrationId)}/version`, {
+          method: "PUT",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ apiVersion: version })
+        }, { fallback: null })
+      });
+      if (call.ok) {
+        setDetail((prev) => prev ? { ...prev, state: { ...prev.state, apiVersion: version } } : prev);
+        flash(t("integrations.detail.version.saved"), "success");
+      } else {
+        flash(t("integrations.detail.version.saveError"), "error");
+      }
+    } catch {
       flash(t("integrations.detail.version.saveError"), "error");
     }
-  }, [integrationId, t]);
+  }, [resolveCurrentIntegrationId, runMutationWithContext, t]);
   const handleHealthCheck = React.useCallback(async () => {
+    const currentIntegrationId = resolveCurrentIntegrationId();
+    if (!currentIntegrationId) return;
     setIsCheckingHealth(true);
-    const call = await apiCall(
-      `/api/integrations/${encodeURIComponent(integrationId)}/health`,
-      { method: "POST" },
-      { fallback: null }
-    );
-    if (call.ok && call.result) {
-      setDetail((prev) => prev ? {
-        ...prev,
-        state: {
-          ...prev.state,
-          lastHealthStatus: call.result.status,
-          lastHealthCheckedAt: call.result.checkedAt
-        }
-      } : prev);
-    } else {
+    try {
+      const call = await runMutationWithContext({
+        actionId: "run-health-check",
+        tabId: "health",
+        mutationPayload: { integrationId: currentIntegrationId },
+        operation: () => apiCall(
+          `/api/integrations/${encodeURIComponent(currentIntegrationId)}/health`,
+          { method: "POST" },
+          { fallback: null }
+        )
+      });
+      const result = call.result;
+      if (call.ok && result) {
+        setLatestHealthResult(result);
+        setDetail((prev) => prev ? {
+          ...prev,
+          state: {
+            ...prev.state,
+            lastHealthStatus: result.status,
+            lastHealthCheckedAt: result.checkedAt
+          }
+        } : prev);
+        void refreshLogs();
+      } else {
+        flash(t("integrations.detail.health.checkError"), "error");
+      }
+    } catch {
       flash(t("integrations.detail.health.checkError"), "error");
+    } finally {
+      setIsCheckingHealth(false);
     }
-    setIsCheckingHealth(false);
-  }, [integrationId, t]);
+  }, [refreshLogs, resolveCurrentIntegrationId, runMutationWithContext, t]);
+  const hasVersions = Boolean(detail?.integration.apiVersions?.length);
+  const integration = detail?.integration ?? null;
+  const state = detail?.state ?? null;
+  const editableCredentialFields = React.useMemo(
+    () => (detail?.integration.credentials?.fields ?? detail?.bundle?.credentials?.fields ?? []).filter(isEditableCredentialField),
+    [detail?.bundle?.credentials?.fields, detail?.integration.credentials?.fields]
+  );
+  const credentialFormFields = React.useMemo(
+    () => buildCredentialFields(editableCredentialFields),
+    [editableCredentialFields]
+  );
+  const credentialSchema = React.useMemo(() => z.object({}).passthrough().superRefine((rawValues, ctx) => {
+    const values = rawValues;
+    editableCredentialFields.forEach((field) => {
+      const value = values[field.key];
+      if (field.type === "boolean") {
+        if (value !== void 0 && value !== null && typeof value !== "boolean") {
+          ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            path: [field.key],
+            message: t("integrations.detail.credentials.validation.boolean", "Select a valid value.")
+          });
+        }
+        if (field.required && typeof value !== "boolean") {
+          ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            path: [field.key],
+            message: t("integrations.detail.credentials.validation.required", "{field} is required.", { field: field.label })
+          });
+        }
+        return;
+      }
+      if (value !== void 0 && value !== null && typeof value !== "string") {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          path: [field.key],
+          message: t("integrations.detail.credentials.validation.text", "Enter a valid value.")
+        });
+        return;
+      }
+      const normalizedValue = typeof value === "string" ? value : "";
+      if (field.required && normalizedValue.trim().length === 0) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          path: [field.key],
+          message: t("integrations.detail.credentials.validation.required", "{field} is required.", { field: field.label })
+        });
+      }
+      if (normalizedValue.length > 2e4) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          path: [field.key],
+          message: t("integrations.detail.credentials.validation.tooLong", "Value is too long.")
+        });
+      }
+      if (field.type === "select" && normalizedValue && field.options && !field.options.some((option) => option.value === normalizedValue)) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          path: [field.key],
+          message: t("integrations.detail.credentials.validation.option", "Select one of the available options.")
+        });
+      }
+    });
+  }), [editableCredentialFields, t]);
+  const latestHealthLog = React.useMemo(() => logs.find(isHealthLog) ?? null, [logs]);
+  const healthMessage = latestHealthResult?.message ?? (typeof latestHealthLog?.payload?.message === "string" ? latestHealthLog.payload.message : null);
+  const healthDetailsSource = latestHealthResult?.details ?? extractHealthDetails(latestHealthLog?.payload);
+  const healthDetails = latestHealthLog?.code ? { ...healthDetailsSource, code: latestHealthLog.code } : healthDetailsSource;
+  const healthDetailEntries = Object.entries(healthDetails);
+  const healthStatusDescription = state?.lastHealthStatus ? t(
+    `integrations.detail.health.meaning.${state.lastHealthStatus}`,
+    state.lastHealthStatus === "healthy" ? "The provider responded successfully using the current credentials." : state.lastHealthStatus === "degraded" ? "The provider responded, but reported warnings or limited functionality." : integration?.id === "gateway_stripe" ? "Stripe rejected the last check. This usually means the secret key is invalid, missing required permissions, revoked, or Stripe was temporarily unavailable." : "The last check failed. This usually means invalid credentials, missing permissions, or a provider outage."
+  ) : null;
+  React.useEffect(() => {
+    setActiveTab(resolveRequestedIntegrationDetailTab(searchParams?.get("tab"), hasVersions, customTabIds));
+  }, [customTabIds, hasVersions, searchParams]);
+  const handleTabChange = React.useCallback((nextValue) => {
+    const currentIntegrationId = resolveCurrentIntegrationId();
+    const nextTab = resolveRequestedIntegrationDetailTab(nextValue, hasVersions, customTabIds);
+    setActiveTab(nextTab);
+    if (!currentIntegrationId) return;
+    const basePath = `/backend/integrations/${encodeURIComponent(currentIntegrationId)}`;
+    router.replace(nextTab === "credentials" ? basePath : `${basePath}?tab=${encodeURIComponent(nextTab)}`);
+  }, [customTabIds, hasVersions, resolveCurrentIntegrationId, router]);
   if (isLoading) return /* @__PURE__ */ jsx(Page, { children: /* @__PURE__ */ jsx(PageBody, { children: /* @__PURE__ */ jsx(LoadingMessage, { label: t("integrations.detail.title") }) }) });
   if (error || !detail) return /* @__PURE__ */ jsx(Page, { children: /* @__PURE__ */ jsx(PageBody, { children: /* @__PURE__ */ jsx(ErrorMessage, { label: error ?? t("integrations.detail.loadError") }) }) });
-  const { integration, state } = detail;
-  const credFields = integration.credentials?.fields ?? detail.bundle?.credentials?.fields ?? [];
-  const hasVersions = Boolean(integration.apiVersions?.length);
+  const resolvedIntegration = detail.integration;
+  const resolvedState = detail.state;
+  const CategoryIcon = resolvedIntegration.category ? CATEGORY_ICONS[resolvedIntegration.category] : null;
+  const showCredentialActions = activeTab === "credentials" && credentialFormFields.length > 0;
   return /* @__PURE__ */ jsx(Page, { children: /* @__PURE__ */ jsxs(PageBody, { className: "space-y-6", children: [
-    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Link, { href: "/backend/integrations", className: "text-sm text-muted-foreground hover:underline", children: t("integrations.detail.back") }) }),
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("h1", { className: "text-2xl font-semibold", children: integration.title }),
-        integration.description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-1", children: integration.description }),
-        /* @__PURE__ */ jsxs("div", { className: "flex gap-2 mt-2", children: [
-          integration.category && /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: integration.category }),
-          integration.hub && /* @__PURE__ */ jsx(Badge, { variant: "outline", children: integration.hub })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: state.isEnabled ? t("integrations.detail.enable") : t("integrations.detail.disable") }),
-        /* @__PURE__ */ jsx(
-          Switch,
-          {
-            checked: state.isEnabled,
-            disabled: isTogglingState,
-            onCheckedChange: (checked) => void handleToggleState(checked)
-          }
-        )
+    /* @__PURE__ */ jsx(
+      FormHeader,
+      {
+        backHref: "/backend/integrations",
+        title: resolvedIntegration.title,
+        actions: {
+          cancelHref: showCredentialActions ? "/backend/integrations" : void 0,
+          submit: showCredentialActions ? {
+            formId: credentialsFormId,
+            pending: isSavingCredentials,
+            label: t("integrations.detail.credentials.save", "Save credentials"),
+            pendingLabel: t("ui.forms.status.saving", "Saving...")
+          } : void 0
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      resolvedIntegration.description ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: resolvedIntegration.description }) : null,
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-4 text-sm text-muted-foreground", children: [
+        resolvedIntegration.category ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          CategoryIcon ? /* @__PURE__ */ jsx(CategoryIcon, { className: "h-4 w-4" }) : null,
+          /* @__PURE__ */ jsx("span", { children: formatTypeLabel(resolvedIntegration.category) })
+        ] }) : null,
+        resolvedIntegration.hub ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground/80", children: t("integrations.detail.hub.label", "Hub") }),
+          /* @__PURE__ */ jsx("span", { children: formatTypeLabel(resolvedIntegration.hub) })
+        ] }) : null
       ] })
     ] }),
-    /* @__PURE__ */ jsxs(Tabs, { defaultValue: "credentials", children: [
+    /* @__PURE__ */ jsx("section", { className: "rounded-lg border bg-card p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-[11px] uppercase tracking-wide text-muted-foreground", children: t("integrations.detail.state.label", "State") }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: resolvedState.isEnabled ? t("integrations.detail.state.enabled", "Enabled") : t("integrations.detail.state.disabled", "Disabled") })
+      ] }),
+      /* @__PURE__ */ jsx(
+        Switch,
+        {
+          checked: resolvedState.isEnabled,
+          disabled: isTogglingState,
+          onCheckedChange: (checked) => void handleToggleState(checked)
+        }
+      )
+    ] }) }),
+    stackedDetailWidgets.length > 0 ? /* @__PURE__ */ jsx("section", { className: "space-y-4", children: /* @__PURE__ */ jsx(
+      InjectionSpot,
+      {
+        spotId: detailWidgetSpotId,
+        context: injectionContext,
+        data: detail,
+        onDataChange: (next) => setDetail(next),
+        widgetsOverride: stackedDetailWidgets
+      }
+    ) }) : null,
+    groupedDetailWidgets.length > 0 ? /* @__PURE__ */ jsx("section", { className: "grid gap-4 lg:grid-cols-2", children: groupedDetailWidgets.map((widget) => /* @__PURE__ */ jsxs(
+      Card,
+      {
+        className: widget.placement?.column === 2 ? "lg:col-start-2" : void 0,
+        children: [
+          /* @__PURE__ */ jsxs(CardHeader, { children: [
+            /* @__PURE__ */ jsx(CardTitle, { children: widget.placement?.groupLabel ? t(widget.placement.groupLabel, widget.module.metadata.title) : widget.module.metadata.title }),
+            widget.placement?.groupDescription ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: widget.placement.groupDescription }) : null
+          ] }),
+          /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(
+            widget.module.Widget,
+            {
+              context: injectionContext,
+              data: detail,
+              onDataChange: (next) => setDetail(next)
+            }
+          ) })
+        ]
+      },
+      widget.widgetId
+    )) }) : null,
+    /* @__PURE__ */ jsxs(Tabs, { value: activeTab, onValueChange: handleTabChange, className: "space-y-4", children: [
       /* @__PURE__ */ jsxs(TabsList, { children: [
         /* @__PURE__ */ jsx(TabsTrigger, { value: "credentials", children: t("integrations.detail.tabs.credentials") }),
-        hasVersions && /* @__PURE__ */ jsx(TabsTrigger, { value: "version", children: t("integrations.detail.tabs.version") }),
+        hasVersions ? /* @__PURE__ */ jsx(TabsTrigger, { value: "version", children: t("integrations.detail.tabs.version") }) : null,
         /* @__PURE__ */ jsx(TabsTrigger, { value: "health", children: t("integrations.detail.tabs.health") }),
-        /* @__PURE__ */ jsx(TabsTrigger, { value: "logs", children: t("integrations.detail.tabs.logs") })
+        /* @__PURE__ */ jsx(TabsTrigger, { value: "logs", children: t("integrations.detail.tabs.logs") }),
+        injectedTabs.map((tab) => /* @__PURE__ */ jsx(TabsTrigger, { value: tab.id, children: tab.label }, tab.id))
       ] }),
-      /* @__PURE__ */ jsxs(TabsContent, { value: "credentials", className: "space-y-4 mt-4", children: [
-        detail.bundle && /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-blue-200 bg-blue-50 p-3 text-sm text-blue-800", children: t("integrations.detail.credentials.bundleShared", { bundle: detail.bundle.title }) }),
-        credFields.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: t("integrations.detail.credentials.notConfigured") }) : /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(CardContent, { className: "pt-6 space-y-4", children: [
-          credFields.filter(isEditableCredentialField).map((field) => /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
-            /* @__PURE__ */ jsxs("label", { className: "text-sm font-medium", children: [
-              field.label,
-              field.required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-0.5", children: "*" })
-            ] }),
-            field.type === "select" && field.options ? /* @__PURE__ */ jsxs(
-              "select",
-              {
-                className: "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm",
-                value: credValues[field.key] ?? "",
-                onChange: (e) => setCredValues((prev) => ({ ...prev, [field.key]: e.target.value })),
-                children: [
-                  /* @__PURE__ */ jsx("option", { value: "", children: "\u2014" }),
-                  field.options.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value))
-                ]
-              }
-            ) : field.type === "boolean" ? /* @__PURE__ */ jsx(
-              Switch,
-              {
-                checked: Boolean(credValues[field.key]),
-                onCheckedChange: (checked) => setCredValues((prev) => ({ ...prev, [field.key]: checked }))
-              }
-            ) : /* @__PURE__ */ jsx(
-              Input,
-              {
-                type: field.type === "secret" ? "password" : "text",
-                placeholder: field.placeholder,
-                value: credValues[field.key] ?? "",
-                onChange: (e) => setCredValues((prev) => ({ ...prev, [field.key]: e.target.value }))
-              }
-            )
-          ] }, field.key)),
-          /* @__PURE__ */ jsxs(Button, { type: "button", onClick: () => void handleSaveCredentials(), disabled: isSavingCreds, children: [
-            isSavingCreds ? /* @__PURE__ */ jsx(Spinner, { className: "mr-2 h-4 w-4" }) : null,
-            t("integrations.detail.credentials.save")
-          ] })
-        ] }) })
-      ] }),
-      hasVersions && /* @__PURE__ */ jsx(TabsContent, { value: "version", className: "space-y-4 mt-4", children: /* @__PURE__ */ jsxs(Card, { children: [
+      /* @__PURE__ */ jsx(TabsContent, { value: "credentials", className: "mt-0", children: /* @__PURE__ */ jsxs("section", { className: "space-y-4 rounded-lg border bg-card p-6", children: [
+        detail.bundle ? /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-blue-200 bg-blue-50 p-3 text-sm text-blue-800", children: t("integrations.detail.credentials.bundleShared", { bundle: detail.bundle.title }) }) : null,
+        credentialFormFields.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("integrations.detail.credentials.notConfigured") }) : /* @__PURE__ */ jsx(
+          CrudForm,
+          {
+            formId: credentialsFormId,
+            entityId: "integrations.integration",
+            schema: credentialSchema,
+            fields: credentialFormFields,
+            initialValues: credValues,
+            onSubmit: handleSaveCredentials,
+            embedded: true,
+            hideFooterActions: true
+          },
+          `${resolvedIntegration.id}:${credentialsFormKey}`
+        )
+      ] }) }),
+      hasVersions ? /* @__PURE__ */ jsx(TabsContent, { value: "version", className: "mt-0 space-y-4", children: /* @__PURE__ */ jsxs(Card, { children: [
         /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { children: t("integrations.detail.version.select") }) }),
-        /* @__PURE__ */ jsx(CardContent, { className: "space-y-3", children: integration.apiVersions.map((v) => {
-          const isSelected = (state.apiVersion ?? integration.apiVersions.find((x) => x.status === "stable")?.id) === v.id;
+        /* @__PURE__ */ jsx(CardContent, { className: "space-y-3", children: resolvedIntegration.apiVersions?.map((version) => {
+          const stableVersion = resolvedIntegration.apiVersions?.find((item) => item.status === "stable")?.id;
+          const isSelected = (resolvedState.apiVersion ?? stableVersion) === version.id;
           return /* @__PURE__ */ jsxs(
             "div",
             {
-              className: `flex items-center justify-between rounded-lg border p-3 cursor-pointer transition-colors ${isSelected ? "border-primary bg-primary/5" : "hover:bg-muted/50"}`,
-              onClick: () => void handleVersionChange(v.id),
+              className: `flex cursor-pointer items-center justify-between rounded-lg border p-3 transition-colors ${isSelected ? "border-primary bg-primary/5" : "hover:bg-muted/50"}`,
+              onClick: () => void handleVersionChange(version.id),
               children: [
                 /* @__PURE__ */ jsxs("div", { children: [
-                  /* @__PURE__ */ jsx("span", { className: "font-medium text-sm", children: v.label ?? v.id }),
+                  /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: version.label ?? version.id }),
                   /* @__PURE__ */ jsx(
                     Badge,
                     {
-                      variant: v.status === "stable" ? "default" : v.status === "deprecated" ? "destructive" : "secondary",
+                      variant: version.status === "stable" ? "default" : version.status === "deprecated" ? "destructive" : "secondary",
                       className: "ml-2",
-                      children: t(`integrations.detail.version.${v.status}`)
+                      children: t(`integrations.detail.version.${version.status}`)
                     }
                   ),
-                  v.status === "deprecated" && v.sunsetAt && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground ml-2", children: t("integrations.detail.version.sunsetAt", { date: new Date(v.sunsetAt).toLocaleDateString() }) })
+                  version.status === "deprecated" && version.sunsetAt ? /* @__PURE__ */ jsx("span", { className: "ml-2 text-xs text-muted-foreground", children: t("integrations.detail.version.sunsetAt", { date: new Date(version.sunsetAt).toLocaleDateString() }) }) : null
                 ] }),
-                isSelected && /* @__PURE__ */ jsx(Badge, { variant: "outline", children: t("integrations.detail.version.current") })
+                isSelected ? /* @__PURE__ */ jsx(Badge, { variant: "outline", children: t("integrations.detail.version.current") }) : null
               ]
             },
-            v.id
+            version.id
           );
         }) })
-      ] }) }),
-      /* @__PURE__ */ jsx(TabsContent, { value: "health", className: "space-y-4 mt-4", children: /* @__PURE__ */ jsxs(Card, { children: [
+      ] }) }) : null,
+      /* @__PURE__ */ jsx(TabsContent, { value: "health", className: "mt-0 space-y-4", children: /* @__PURE__ */ jsxs(Card, { children: [
         /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
           /* @__PURE__ */ jsx(CardTitle, { children: t("integrations.detail.health.title") }),
-          /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => void handleHealthCheck(), disabled: isCheckingHealth, children: [
-            isCheckingHealth ? /* @__PURE__ */ jsx(Spinner, { className: "mr-2 h-4 w-4" }) : null,
-            isCheckingHealth ? t("integrations.detail.health.checking") : t("integrations.detail.health.check")
-          ] })
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              type: "button",
+              variant: "outline",
+              size: "sm",
+              onClick: () => void handleHealthCheck(),
+              disabled: isCheckingHealth,
+              children: [
+                isCheckingHealth ? /* @__PURE__ */ jsx(Spinner, { className: "mr-2 h-4 w-4" }) : /* @__PURE__ */ jsx(Zap, { className: "mr-2 h-4 w-4" }),
+                isCheckingHealth ? t("integrations.detail.health.checking") : t("integrations.detail.health.check")
+              ]
+            }
+          )
         ] }) }),
         /* @__PURE__ */ jsxs(CardContent, { className: "space-y-3", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
@@ -275,39 +706,140 @@ function IntegrationDetailPage() {
               t("integrations.detail.health.title"),
               ":"
             ] }),
-            state.lastHealthStatus ? /* @__PURE__ */ jsx(Badge, { className: HEALTH_STATUS_STYLES[state.lastHealthStatus] ?? "", children: t(`integrations.detail.health.${state.lastHealthStatus}`) }) : /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: t("integrations.detail.health.unknown") })
+            resolvedState.lastHealthStatus ? /* @__PURE__ */ jsx(Badge, { className: HEALTH_STATUS_STYLES[resolvedState.lastHealthStatus] ?? "", children: t(`integrations.detail.health.${resolvedState.lastHealthStatus}`) }) : /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: t("integrations.detail.health.unknown") })
           ] }),
-          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: state.lastHealthCheckedAt ? t("integrations.detail.health.lastChecked", { date: new Date(state.lastHealthCheckedAt).toLocaleString() }) : t("integrations.detail.health.neverChecked") })
+          healthStatusDescription ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: healthStatusDescription }) : null,
+          healthMessage ? /* @__PURE__ */ jsxs("div", { className: "rounded-lg border bg-muted/30 p-3", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: t("integrations.detail.health.lastResult", "Last result") }),
+            /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm", children: healthMessage })
+          ] }) : null,
+          healthDetailEntries.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "rounded-lg border p-3", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: t("integrations.detail.health.details", "Details") }),
+            /* @__PURE__ */ jsx("dl", { className: "mt-3 grid gap-3 sm:grid-cols-2", children: healthDetailEntries.map(([key, value]) => /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("dt", { className: "text-xs font-medium text-muted-foreground", children: key }),
+              /* @__PURE__ */ jsx("dd", { className: "mt-1 text-sm", children: formatHealthValue(value) })
+            ] }, key)) })
+          ] }) : null,
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: resolvedState.lastHealthCheckedAt ? t("integrations.detail.health.lastChecked", { date: new Date(resolvedState.lastHealthCheckedAt).toLocaleString() }) : t("integrations.detail.health.neverChecked") })
         ] })
       ] }) }),
-      /* @__PURE__ */ jsxs(TabsContent, { value: "logs", className: "space-y-4 mt-4", children: [
-        /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ jsxs(
-          "select",
-          {
-            className: "flex h-9 rounded-md border border-input bg-transparent px-3 py-1 text-sm",
-            value: logLevel,
-            onChange: (e) => setLogLevel(e.target.value),
-            children: [
-              /* @__PURE__ */ jsx("option", { value: "", children: t("integrations.detail.logs.level.all") }),
-              /* @__PURE__ */ jsx("option", { value: "info", children: t("integrations.detail.logs.level.info") }),
-              /* @__PURE__ */ jsx("option", { value: "warn", children: t("integrations.detail.logs.level.warn") }),
-              /* @__PURE__ */ jsx("option", { value: "error", children: t("integrations.detail.logs.level.error") })
-            ]
-          }
-        ) }),
-        isLoadingLogs ? /* @__PURE__ */ jsx("div", { className: "flex justify-center py-8", children: /* @__PURE__ */ jsx(Spinner, {}) }) : logs.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm py-4", children: t("integrations.detail.logs.empty") }) : /* @__PURE__ */ jsx("div", { className: "rounded-lg border", children: /* @__PURE__ */ jsxs("table", { className: "w-full text-sm", children: [
+      /* @__PURE__ */ jsxs(TabsContent, { value: "logs", className: "mt-0 space-y-4", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ jsxs("div", { className: "relative inline-flex", children: [
+          /* @__PURE__ */ jsxs(
+            "select",
+            {
+              className: "h-11 min-w-40 appearance-none rounded-xl border border-border bg-card pl-4 pr-11 text-sm font-medium text-foreground shadow-sm transition-colors focus-visible:border-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30",
+              value: logLevel,
+              onChange: (event) => setLogLevel(event.target.value),
+              children: [
+                /* @__PURE__ */ jsx("option", { value: "", children: t("integrations.detail.logs.level.all") }),
+                /* @__PURE__ */ jsx("option", { value: "info", children: t("integrations.detail.logs.level.info") }),
+                /* @__PURE__ */ jsx("option", { value: "warn", children: t("integrations.detail.logs.level.warn") }),
+                /* @__PURE__ */ jsx("option", { value: "error", children: t("integrations.detail.logs.level.error") })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(ChevronDown, { className: "pointer-events-none absolute right-4 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" })
+        ] }) }),
+        isLoadingLogs ? /* @__PURE__ */ jsx("div", { className: "flex justify-center py-8", children: /* @__PURE__ */ jsx(Spinner, {}) }) : logs.length === 0 ? /* @__PURE__ */ jsx("p", { className: "py-4 text-sm text-muted-foreground", children: t("integrations.detail.logs.empty") }) : /* @__PURE__ */ jsx("div", { className: "rounded-lg border", children: /* @__PURE__ */ jsxs("table", { className: "w-full text-sm", children: [
           /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "border-b bg-muted/50", children: [
             /* @__PURE__ */ jsx("th", { className: "px-4 py-2 text-left font-medium", children: t("integrations.detail.logs.columns.time") }),
             /* @__PURE__ */ jsx("th", { className: "px-4 py-2 text-left font-medium", children: t("integrations.detail.logs.columns.level") }),
             /* @__PURE__ */ jsx("th", { className: "px-4 py-2 text-left font-medium", children: t("integrations.detail.logs.columns.message") })
           ] }) }),
-          /* @__PURE__ */ jsx("tbody", { children: logs.map((log) => /* @__PURE__ */ jsxs("tr", { className: "border-b last:border-0", children: [
-            /* @__PURE__ */ jsx("td", { className: "px-4 py-2 text-muted-foreground whitespace-nowrap", children: new Date(log.createdAt).toLocaleString() }),
-            /* @__PURE__ */ jsx("td", { className: "px-4 py-2", children: /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: LOG_LEVEL_STYLES[log.level] ?? "", children: log.level }) }),
-            /* @__PURE__ */ jsx("td", { className: "px-4 py-2", children: log.message })
-          ] }, log.id)) })
+          /* @__PURE__ */ jsx("tbody", { children: logs.map((log) => {
+            const isExpanded = expandedLogId === log.id;
+            const metadataEntries = [
+              ["Time", new Date(log.createdAt).toLocaleString()],
+              ["Level", log.level],
+              ["Code", log.code ?? null],
+              ["Run ID", log.runId ?? null],
+              ["Entity Type", log.scopeEntityType ?? null],
+              ["Entity ID", log.scopeEntityId ?? null]
+            ].filter((entry) => typeof entry[1] === "string" && entry[1].trim().length > 0);
+            const { inlineEntries, nestedEntries } = splitLogPayload(log.payload);
+            return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+              /* @__PURE__ */ jsxs("tr", { className: "border-b last:border-0", children: [
+                /* @__PURE__ */ jsx("td", { className: "whitespace-nowrap px-4 py-2 text-muted-foreground", children: new Date(log.createdAt).toLocaleString() }),
+                /* @__PURE__ */ jsx("td", { className: "px-4 py-2", children: /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: LOG_LEVEL_STYLES[log.level] ?? "", children: log.level }) }),
+                /* @__PURE__ */ jsx("td", { className: "px-4 py-2", children: /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "ghost",
+                    size: "sm",
+                    className: "h-auto w-full justify-start gap-2 px-0 py-0 text-left hover:bg-transparent",
+                    onClick: () => setExpandedLogId((current) => current === log.id ? null : log.id),
+                    children: [
+                      isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 shrink-0" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 shrink-0" }),
+                      /* @__PURE__ */ jsx("span", { className: "truncate", children: log.message })
+                    ]
+                  }
+                ) })
+              ] }),
+              isExpanded ? /* @__PURE__ */ jsx("tr", { className: "border-b bg-muted/20 last:border-0", children: /* @__PURE__ */ jsx("td", { colSpan: 3, className: "px-4 py-4", children: /* @__PURE__ */ jsx("div", { className: "space-y-4 rounded-lg border bg-card p-4", children: /* @__PURE__ */ jsxs("div", { className: "grid gap-4 lg:grid-cols-[minmax(0,1.1fr)_minmax(0,0.9fr)]", children: [
+                /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+                  /* @__PURE__ */ jsxs("section", { className: "space-y-3", children: [
+                    /* @__PURE__ */ jsxs("div", { children: [
+                      /* @__PURE__ */ jsx("p", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: t("integrations.detail.logs.details.summary", "Summary") }),
+                      /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm font-medium", children: log.message })
+                    ] }),
+                    metadataEntries.length > 0 ? /* @__PURE__ */ jsx("dl", { className: "grid gap-3 sm:grid-cols-2", children: metadataEntries.map(([label, value]) => /* @__PURE__ */ jsxs("div", { className: "rounded-md border bg-muted/30 px-3 py-2", children: [
+                      /* @__PURE__ */ jsx("dt", { className: "text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: label }),
+                      /* @__PURE__ */ jsx("dd", { className: "mt-1 break-all text-sm", children: value })
+                    ] }, label)) }) : null
+                  ] }),
+                  inlineEntries.length > 0 ? /* @__PURE__ */ jsxs("section", { className: "space-y-3", children: [
+                    /* @__PURE__ */ jsx("p", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: t("integrations.detail.logs.details.fields", "Fields") }),
+                    /* @__PURE__ */ jsx("dl", { className: "grid gap-3 sm:grid-cols-2", children: inlineEntries.map(([key, value]) => /* @__PURE__ */ jsxs("div", { className: "rounded-md border bg-muted/30 px-3 py-2", children: [
+                      /* @__PURE__ */ jsx("dt", { className: "text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: formatLogDetailLabel(key) }),
+                      /* @__PURE__ */ jsx("dd", { className: "mt-1 break-words text-sm", children: formatLogPrimitiveValue(value) })
+                    ] }, key)) })
+                  ] }) : null
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+                  nestedEntries.map(([key, value]) => /* @__PURE__ */ jsx(
+                    JsonDisplay,
+                    {
+                      data: value,
+                      title: formatLogDetailLabel(key),
+                      defaultExpanded: true,
+                      maxInitialDepth: 1,
+                      theme: "dark",
+                      maxHeight: "16rem",
+                      className: "p-4"
+                    },
+                    key
+                  )),
+                  log.payload && nestedEntries.length === 0 ? /* @__PURE__ */ jsx(
+                    JsonDisplay,
+                    {
+                      data: log.payload,
+                      title: t("integrations.detail.logs.details.payload", "Payload"),
+                      defaultExpanded: true,
+                      maxInitialDepth: 1,
+                      theme: "dark",
+                      maxHeight: "16rem",
+                      className: "p-4"
+                    }
+                  ) : null,
+                  !log.payload ? /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-dashed px-4 py-6 text-sm text-muted-foreground", children: t("integrations.detail.logs.details.noPayload", "No structured payload was stored for this log entry.") }) : null
+                ] })
+              ] }) }) }) }) : null
+            ] }, log.id);
+          }) })
         ] }) })
-      ] })
+      ] }),
+      injectedTabs.map((tab) => /* @__PURE__ */ jsx(TabsContent, { value: tab.id, className: "mt-0 space-y-4", children: /* @__PURE__ */ jsx(
+        InjectionSpot,
+        {
+          spotId: detailWidgetSpotId,
+          context: injectionContext,
+          data: detail,
+          onDataChange: (next) => setDetail(next),
+          widgetsOverride: tab.widgets
+        }
+      ) }, tab.id))
     ] })
   ] }) });
 }