feat(custom-widgets): Full Mantine v9 + SubFetch support for custom JSX (#6304)

apps/nextjs/src/app/[locale]/manage/custom-widgets/_beta-banner.tsx

@@ -1,18 +1,21 @@
+"use client";
+
 import { Alert, Anchor, Text } from "@mantine/core";
 import { IconFlask } from "@tabler/icons-react";
+import { useScopedI18n } from "@homarr/translation/client";
 
 const FEEDBACK_URL = "https://github.com/homarr-labs/homarr/discussions/categories/custom-widgets";
 
 export function CustomWidgetBetaBanner() {
+  const t = useScopedI18n("customWidget.betaBanner");
   return (
-    <Alert variant="light" color="yellow" title="Custom Widgets are in Beta" icon={<IconFlask />}>
+    <Alert variant="light" color="yellow" title={t("title")} icon={<IconFlask />}>
       <Text size="sm">
-        This feature is experimental and will probably change a lot in the future. If you encounter bugs, wish it did
-        more, or find something confusing, then please complain to us as much as possible! Only feedback posted on the{" "}
+        {t("description")}{" "}
         <Anchor href={FEEDBACK_URL} target="_blank" fw={600}>
-          official discussion thread
+          {t("link")}
         </Anchor>{" "}
-        will be taken into account. Happy Hacking!
+        {t("closing")}
       </Text>
     </Alert>
   );

apps/nextjs/src/app/[locale]/manage/custom-widgets/_code-editor-diagnostics.tsx

@@ -0,0 +1,51 @@
+import type { EditorView } from "@codemirror/view";
+import { Alert, Stack, Text, UnstyledButton } from "@mantine/core";
+import { IconAlertTriangle } from "@tabler/icons-react";
+
+import type { EditorDiagnostic } from "@homarr/custom-widgets/workbench";
+
+import classes from "./_code-editor.module.css";
+
+interface CodeEditorDiagnosticsProps {
+  diagnostics: EditorDiagnostic[];
+  editorView: EditorView | null;
+  title: string;
+  formatDiagnostic: (diagnostic: EditorDiagnostic) => string;
+}
+
+export function CodeEditorDiagnostics({
+  diagnostics,
+  editorView,
+  title,
+  formatDiagnostic,
+}: CodeEditorDiagnosticsProps) {
+  if (diagnostics.length === 0) return null;
+  return (
+    <Stack component="ul" gap={6} mt="xs" pl={0} style={{ listStyle: "none" }} aria-label={title}>
+      {diagnostics.map((diagnostic, index) => (
+        <li key={`${diagnostic.code}-${diagnostic.line ?? 0}-${index}`}>
+          <UnstyledButton
+            type="button"
+            w="100%"
+            className={classes.diagnosticButton}
+            onClick={() => {
+              if (!editorView || diagnostic.index === undefined) return;
+              const anchor = Math.min(diagnostic.index, editorView.state.doc.length);
+              editorView.dispatch({ selection: { anchor }, scrollIntoView: true });
+              editorView.focus();
+            }}
+          >
+            <Alert
+              color={diagnostic.severity === "error" ? "red" : "yellow"}
+              variant="light"
+              p="xs"
+              icon={<IconAlertTriangle size={15} />}
+            >
+              <Text size="xs">{formatDiagnostic(diagnostic)}</Text>
+            </Alert>
+          </UnstyledButton>
+        </li>
+      ))}
+    </Stack>
+  );
+}

apps/nextjs/src/app/[locale]/manage/custom-widgets/_code-editor.module.css

@@ -0,0 +1,80 @@
+.root {
+  margin-top: 4px;
+  border: 1px solid light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-4));
+  border-radius: var(--mantine-radius-sm);
+  background: light-dark(var(--mantine-color-white), var(--mantine-color-dark-7));
+  overflow: hidden;
+}
+
+.root:focus-within {
+  border-color: var(--mantine-primary-color-filled);
+  outline: 2px solid color-mix(in srgb, var(--mantine-primary-color-filled) 20%, transparent);
+  outline-offset: 1px;
+}
+
+.toolbar,
+.footer {
+  padding: 7px 10px;
+  background: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-8));
+}
+
+.toolbar {
+  border-bottom: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-5));
+}
+
+.footer {
+  border-top: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-5));
+}
+
+.viewport {
+  max-height: min(62vh, 680px);
+  overflow: auto;
+}
+
+.viewport :global(.cm-editor) {
+  background: light-dark(var(--mantine-color-white), var(--mantine-color-dark-7));
+  color: light-dark(var(--mantine-color-black), var(--mantine-color-gray-0));
+  font-family: "Fira Code", "SFMono-Regular", Consolas, monospace;
+  font-size: 12px;
+}
+
+.viewport :global(.cm-editor.cm-focused) {
+  outline: none;
+}
+
+.viewport :global(.cm-scroller) {
+  line-height: 1.65;
+  overflow: auto;
+}
+
+.viewport :global(.cm-gutters) {
+  background: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-8));
+  border-color: light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-5));
+}
+
+.diagnosticButton {
+  min-height: 44px;
+  border-radius: var(--mantine-radius-sm);
+}
+
+.diagnosticButton:focus-visible {
+  outline: 2px solid var(--mantine-primary-color-filled);
+  outline-offset: 2px;
+}
+
+@media (max-width: 48em) {
+  .viewport {
+    max-height: 52vh;
+  }
+
+  .toolbar,
+  .footer {
+    align-items: flex-start;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .root {
+    scroll-behavior: auto;
+  }
+}

apps/nextjs/src/app/[locale]/manage/custom-widgets/_code-editor.tsx

@@ -0,0 +1,271 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import dynamic from "next/dynamic";
+import { autocompletion } from "@codemirror/autocomplete";
+import type { CompletionSource } from "@codemirror/autocomplete";
+import { redo, redoDepth, undo, undoDepth } from "@codemirror/commands";
+import { javascript } from "@codemirror/lang-javascript";
+import { json } from "@codemirror/lang-json";
+import { linter } from "@codemirror/lint";
+import { EditorView } from "@codemirror/view";
+import { Badge, Button, Group, Input, Loader, Text, useComputedColorScheme } from "@mantine/core";
+import { IconArrowBackUp, IconArrowForwardUp, IconCheck, IconCode, IconFileCode, IconWand } from "@tabler/icons-react";
+import { enabledCustomJsxComponents } from "@homarr/custom-widgets/core";
+import { ComponentReference } from "@homarr/custom-widgets/workbench";
+import type { EditorDiagnostic } from "@homarr/custom-widgets/workbench";
+import { useScopedI18n } from "@homarr/translation/client";
+
+import { CodeEditorDiagnostics } from "./_code-editor-diagnostics";
+import classes from "./_code-editor.module.css";
+
+const Editor = dynamic(() => import("@uiw/react-codemirror").then((module) => module.default), {
+  ssr: false,
+  loading: () => (
+    <Group justify="center" p="xl">
+      <Loader size="sm" />
+    </Group>
+  ),
+});
+
+const customJsxCompletionSource: CompletionSource = (context) => {
+  const word = context.matchBefore(/[A-Z][\w.]*/u);
+  if (!word && !context.explicit) return null;
+  return {
+    from: word?.from ?? context.pos,
+    options: enabledCustomJsxComponents.map((component) => ({
+      label: component.name,
+      type: "class",
+      detail: `${component.category} · ${component.safety}`,
+    })),
+  };
+};
+
+interface CodeEditorProps {
+  id: string;
+  value: string;
+  onChange: (value: string) => void;
+  label: string;
+  description?: string;
+  placeholder?: string;
+  language: "jsx" | "json";
+  diagnostics?: EditorDiagnostic[];
+  error?: React.ReactNode;
+  required?: boolean;
+  maxLength?: number;
+  starter?: string;
+}
+
+export function CodeEditor({
+  id,
+  value,
+  onChange,
+  label,
+  description,
+  placeholder,
+  language,
+  diagnostics = [],
+  error,
+  required,
+  maxLength,
+  starter,
+}: CodeEditorProps) {
+  const t = useScopedI18n("customWidget.editor");
+  const [cursor, setCursor] = useState({ line: 1, column: 1 });
+  const [editorView, setEditorView] = useState<EditorView | null>(null);
+  const [historyDepth, setHistoryDepth] = useState({ undo: 0, redo: 0 });
+  const colorScheme = useComputedColorScheme("light");
+  const extensions = useMemo(() => {
+    const diagnosticsExtension = linter((view) =>
+      diagnostics.map((diagnostic) => {
+        const from = Math.min(diagnostic.index ?? 0, view.state.doc.length);
+        return {
+          from,
+          to: Math.min(from + 1, view.state.doc.length),
+          severity: diagnostic.severity,
+          message: t(`diagnostics.${diagnostic.code}` as never, { value: diagnostic.value ?? "" } as never),
+        };
+      }),
+    );
+    const accessibilityExtension = EditorView.contentAttributes.of({
+      id,
+      "aria-label": label,
+    });
+    return language === "jsx"
+      ? [
+          javascript({ jsx: true }),
+          autocompletion({ override: [customJsxCompletionSource] }),
+          diagnosticsExtension,
+          accessibilityExtension,
+        ]
+      : [json(), diagnosticsExtension, accessibilityExtension];
+  }, [diagnostics, id, label, language, t]);
+  const errorCount = diagnostics.filter((diagnostic) => diagnostic.severity === "error").length;
+  const warningCount = diagnostics.length - errorCount;
+
+  const formattedValue = useMemo(() => {
+    if (language === "json") {
+      try {
+        return `${JSON.stringify(JSON.parse(value) as unknown, null, 2)}\n`;
+      } catch {
+        return value;
+      }
+    }
+    return value
+      .replace(/\r\n?/gu, "\n")
+      .split("\n")
+      .map((line) => line.trimEnd())
+      .join("\n")
+      .trim();
+  }, [language, value]);
+
+  return (
+    <Input.Wrapper
+      label={label}
+      description={description}
+      error={error}
+      required={required}
+      labelProps={{ htmlFor: id }}
+      inputWrapperOrder={["label", "description", "input", "error"]}
+    >
+      <div className={classes.root}>
+        <Group className={classes.toolbar} justify="space-between" gap="xs" wrap="wrap">
+          <Group gap={6}>
+            <IconCode size={16} aria-hidden />
+            <Text size="xs" fw={600}>
+              {language === "jsx" ? t("language.jsx") : t("language.json")}
+            </Text>
+          </Group>
+          <Group gap={6}>
+            <Button
+              type="button"
+              size="compact-xs"
+              variant="subtle"
+              leftSection={<IconArrowBackUp size={14} />}
+              onClick={() => editorView && undo(editorView)}
+              disabled={!editorView || historyDepth.undo === 0}
+            >
+              {t("action.undo")}
+            </Button>
+            <Button
+              type="button"
+              size="compact-xs"
+              variant="subtle"
+              leftSection={<IconArrowForwardUp size={14} />}
+              onClick={() => editorView && redo(editorView)}
+              disabled={!editorView || historyDepth.redo === 0}
+            >
+              {t("action.redo")}
+            </Button>
+            {language === "jsx" && (
+              <ComponentReference
+                messages={{
+                  action: t("action.components"),
+                  search: t("componentReference.search"),
+                  empty: t("componentReference.empty"),
+                  count: (count) => t("componentReference.count", { count }),
+                }}
+              />
+            )}
+            {starter && value.trim().length === 0 && (
+              <Button
+                type="button"
+                size="compact-xs"
+                variant="subtle"
+                leftSection={<IconFileCode size={14} />}
+                onClick={() => onChange(starter)}
+              >
+                {t("action.insertStarter")}
+              </Button>
+            )}
+            <Button
+              type="button"
+              size="compact-xs"
+              variant="subtle"
+              leftSection={<IconWand size={14} />}
+              onClick={() => onChange(formattedValue)}
+              disabled={formattedValue === value}
+            >
+              {t("action.format")}
+            </Button>
+          </Group>
+        </Group>
+
+        <div className={classes.viewport}>
+          <Editor
+            id={`${id}-root`}
+            value={value}
+            onChange={onChange}
+            placeholder={placeholder}
+            extensions={extensions}
+            theme={colorScheme}
+            height={language === "jsx" ? "320px" : "220px"}
+            basicSetup={{
+              autocompletion: language !== "jsx",
+              bracketMatching: true,
+              closeBrackets: true,
+              foldGutter: true,
+              history: true,
+              highlightActiveLine: true,
+              highlightActiveLineGutter: true,
+              indentOnInput: true,
+              lineNumbers: true,
+            }}
+            onCreateEditor={setEditorView}
+            onUpdate={(update) => {
+              if (!update.selectionSet && !update.docChanged) return;
+              const head = update.state.selection.main.head;
+              const line = update.state.doc.lineAt(head);
+              setCursor({ line: line.number, column: head - line.from + 1 });
+              setHistoryDepth({ undo: undoDepth(update.state), redo: redoDepth(update.state) });
+            }}
+          />
+        </div>
+
+        <Group className={classes.footer} justify="space-between" gap="xs">
+          <Group gap={6}>
+            {errorCount > 0 ? (
+              <Badge size="xs" color="red" variant="light">
+                {t("status.errors", { count: errorCount })}
+              </Badge>
+            ) : warningCount > 0 ? (
+              <Badge size="xs" color="yellow" variant="light">
+                {t("status.warnings", { count: warningCount })}
+              </Badge>
+            ) : (
+              <Group gap={4}>
+                <IconCheck size={13} color="var(--mantine-color-green-6)" aria-hidden />
+                <Text size="xs" c="dimmed">
+                  {t("status.ready")}
+                </Text>
+              </Group>
+            )}
+            <Text size="xs" c="dimmed">
+              {t("status.position", cursor)}
+            </Text>
+          </Group>
+          <Text
+            size="xs"
+            c={maxLength && value.length > maxLength * 0.95 ? (value.length > maxLength ? "red" : "orange") : "dimmed"}
+          >
+            {maxLength
+              ? t("status.charactersWithLimit", { count: value.length, limit: maxLength })
+              : t("status.characters", { count: value.length })}
+          </Text>
+        </Group>
+      </div>
+
+      <CodeEditorDiagnostics
+        diagnostics={diagnostics}
+        editorView={editorView}
+        title={t("diagnostics.title")}
+        formatDiagnostic={(diagnostic) =>
+          `${diagnostic.line ? `${t("diagnostics.line", { line: diagnostic.line })}: ` : ""}${t(
+            `diagnostics.${diagnostic.code}` as never,
+            { value: diagnostic.value ?? "" } as never,
+          )}`
+        }
+      />
+    </Input.Wrapper>
+  );
+}

apps/nextjs/src/app/[locale]/manage/custom-widgets/_copy-ai-prompt-button.tsx

@@ -5,289 +5,10 @@ import { useDisclosure } from "@mantine/hooks";
 import { IconCopy, IconSparkles } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
+import { buildCustomWidgetAiPrompt } from "@homarr/custom-widgets/core";
 import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useScopedI18n } from "@homarr/translation/client";
 
-const PROMPT_HEADER = `You are helping configure a Homarr custom widget. Homarr is a self-hosted dashboard that can display data from any API endpoint as a widget.
-
-## Your Task
-Generate a valid JSON configuration for a Homarr custom widget based on the user's description and the API response below. If you need clarification, ask specific questions.
-
-## Output Format
-- Output the JSON inside a \`\`\`json code block for syntax highlighting. If \`\`\`json is not supported, use a generic \`\`\` code block instead.
-- Do NOT include any text before or after the JSON block unless you have clarifying questions.
-- If your environment supports structured/JSON output mode, use it.
-
-## JSON Schema
-The output must conform to this JSON Schema:
-
-`;
-
-const PROMPT_RULES = `
-
-## Key Rules
-- The \`displayConfig.type\` field MUST match the \`displayType\` field exactly
-- All \`jsonPath\` fields use JSONPath syntax (e.g. \`$.data.count\`, \`$.items[*].name\`)
-- The \`$schema\` field should be \`"homarr-custom-widget-v2"\`
-- Do NOT include secrets/passwords in the output — those are configured separately in the UI
-- \`url\` must be a full URL including protocol (e.g. \`https://...\`)
-- For arrays of items, inspect the API response to find the correct paths
-
-## Display Type Guide
-- \`singleValue\`: Show one prominent number/text (e.g. total count, status)
-- \`keyValue\`: Show labeled pairs like "CPU: 45%" — use \`mappings\` array
-- \`table\`: Show tabular data from an array — needs \`tablePath\` for the array and \`columns\` for headers
-- \`statGrid\`: Grid of stat cards with optional colors — great for dashboards (e.g. "Movies: 38, Series: 63")
-- \`progressBars\`: Visual progress bars with value/max — for storage, quotas, etc.
-- \`statusIndicator\`: Green/red dots based on value matching — for service health checks
-- \`countGrid\`: Simple grid of counts — like statGrid but simpler, no colors
-- \`raw\`: Raw JSON display — for debugging or complex data
-- \`actionButton\`: A button that triggers the API call on click — for POST/PUT actions
-- \`customJsx\`: Custom JSX layout using whitelisted Mantine components — full creative control over presentation. Set \`displayConfig.template\` to a JSX string. Access API data via \`{data.fieldName}\` bindings (e.g. \`{data.name}\`, \`{data.items[0].title}\`).
-
-## Custom JSX (\`customJsx\`) — Available Mantine Components
-When using \`customJsx\`, the template supports whitelisted Mantine UI components. These are React components from the Mantine v9 library. Use their props as documented below.
-
-### Layout Components
-- **Stack** — Vertical flex container. Props: \`gap\` (xs|sm|md|lg|xl or number), \`align\` (stretch|center|flex-start|flex-end), \`justify\`
-- **Group** — Horizontal flex container. Props: \`gap\`, \`justify\` (flex-start|center|space-between|space-around|flex-end), \`wrap\` (wrap|nowrap), \`grow\` (boolean)
-- **Flex** — Generic flex container. Props: \`direction\` (row|column), \`gap\`, \`align\`, \`justify\`, \`wrap\`
-- **Grid** + **Grid.Col** — CSS grid layout. Grid props: \`gutter\` (gap). Grid.Col props: \`span\` (1-12 or "auto"), \`offset\`
-- **SimpleGrid** — Auto-column grid. Props: \`cols\` (number), \`spacing\`, \`verticalSpacing\`
-- **Center** — Centers content. Props: \`inline\` (boolean)
-- **Space** — Empty spacing. Props: \`h\` (height), \`w\` (width)
-- **Container** — Max-width wrapper. Props: \`size\` (xs|sm|md|lg|xl), \`fluid\` (boolean)
-- **AspectRatio** — Maintains aspect ratio. Props: \`ratio\` (number, e.g. 16/9)
-
-### Typography Components
-- **Text** — Body text. Props: \`size\` (xs|sm|md|lg|xl), \`fw\` (font-weight number, e.g. 700), \`c\` (color: "dimmed"|"red"|"blue"|...), \`ta\` (text-align), \`tt\` (text-transform: "capitalize"|"uppercase"|"lowercase"), \`td\` (text-decoration), \`lineClamp\` (number), \`truncate\` (boolean), \`span\` (renders as span)
-- **Title** — Heading. Props: \`order\` (1-6, maps to h1-h6), \`size\`, \`c\`, \`ta\`, \`tt\`
-- **Code** — Inline code. Props: \`color\`, \`block\` (boolean for code block)
-- **Highlight** — Text with highlighted substring. Props: \`highlight\` (string or string[])
-- **Mark** — Highlighted text background. Props: \`color\`
-- **Kbd** — Keyboard key display
-- **Blockquote** — Styled quote. Props: \`color\`, \`cite\`, \`icon\`
-- **Anchor** — Link. Props: \`href\`, \`target\`, \`underline\` ("always"|"hover"|"never")
-- **NumberFormatter** — Formatted number display. Props: \`value\` (number), \`prefix\` (e.g. "$"), \`suffix\` (e.g. "%"), \`thousandSeparator\` (boolean or string), \`decimalScale\` (number)
-
-### Data Display Components
-- **Badge** — Label badge. Props: \`color\`, \`variant\` (filled|light|outline|dot|default), \`size\` (xs|sm|md|lg|xl), \`radius\`, \`tt\`
-- **Card** + **Card.Section** — Content card. Card props: \`shadow\` (xs|sm|md|lg|xl), \`padding\`/\`p\`, \`radius\`, \`withBorder\` (boolean). Card.Section props: \`withBorder\`, \`inheritPadding\`
-- **Paper** — Surface container. Props: \`shadow\`, \`p\`, \`radius\`, \`withBorder\`
-- **Alert** — Notification box. Props: \`color\`, \`variant\` (filled|light|outline), \`title\`, \`icon\`
-- **ThemeIcon** — Icon container. Props: \`color\`, \`variant\`, \`size\`, \`radius\`
-- **ColorSwatch** — Color preview. Props: \`color\` (CSS color string)
-- **Table** + **Table.Thead**, **Table.Tbody**, **Table.Tr**, **Table.Th**, **Table.Td** — HTML table. Table props: \`striped\` (boolean), \`withTableBorder\`, \`withColumnBorders\`, \`highlightOnHover\`
-- **List** + **List.Item** — Ordered/unordered list. List props: \`type\` ("ordered"|"unordered"), \`icon\`, \`spacing\`
-- **Timeline** + **Timeline.Item** — Vertical timeline. Timeline props: \`active\` (number), \`bulletSize\`. Item props: \`title\`, \`bullet\`
-- **Accordion** + **.Item** + **.Control** + **.Panel** — Collapsible sections. Item props: \`value\` (string). Control: clickable header. Panel: content.
-- **Indicator** — Dot indicator on content. Props: \`color\`, \`position\`, \`size\`, \`label\`, \`processing\` (boolean)
-- **Pill** — Removable tag. Props: \`size\`, \`withRemoveButton\`
-- **Spoiler** — Show more/less. Props: \`maxHeight\` (number), \`showLabel\`, \`hideLabel\`
-
-### Feedback Components
-- **Progress** + **Progress.Section** — Progress bar. Progress props: \`value\` (0-100), \`color\`, \`size\`, \`radius\`, \`striped\`, \`animated\`. Section props: \`value\`, \`color\`
-- **RingProgress** — Circular progress. Props: \`sections\` (array of {value, color}), \`size\`, \`thickness\`, \`label\` (ReactNode)
-- **Skeleton** — Loading placeholder. Props: \`height\`, \`width\`, \`radius\`, \`visible\` (boolean)
-- **Loader** — Spinner. Props: \`size\`, \`color\`, \`type\` (oval|bars|dots)
-
-### Media Components
-- **Image** — Responsive image. Props: \`src\`, \`alt\`, \`w\` (width), \`h\` (height), \`radius\`, \`fit\` (cover|contain|fill)
-- **Avatar** + **Avatar.Group** — User avatar. Props: \`src\`, \`alt\`, \`size\` (xs|sm|md|lg|xl or number), \`radius\` (sm|xl), \`color\`
-- **BackgroundImage** — Background image container. Props: \`src\`, \`radius\`
-- **Tooltip** — Hover tooltip. Props: \`label\` (string), \`position\` (top|bottom|left|right), \`withArrow\`
-- **Divider** — Horizontal/vertical rule. Props: \`orientation\` (horizontal|vertical), \`label\`, \`labelPosition\`, \`size\`
-- **ScrollArea** — Scrollable container. Props: \`h\` (height), \`type\` (auto|always|scroll|hover)
-
-### Charts (@mantine/charts)
-- **AreaChart**, **BarChart**, **LineChart** — Props: \`data\` (array of objects), \`dataKey\` (x-axis key), \`series\` (array of {name, color}), \`h\` (height), \`curveType\` (for Area/Line)
-- **DonutChart**, **PieChart** — Props: \`data\` (array of {name, value, color}), \`h\`, \`withLabels\`, \`withLabelsLine\`
-- **RadarChart** — Props: \`data\`, \`dataKey\`, \`series\`
-- **RadialBarChart** — Props: \`data\` (array of {name, value, color}), \`h\`
-- **Sparkline** — Props: \`data\` (flat number array), \`h\`, \`w\`, \`color\`, \`curveType\`
-
-### Common Prop Patterns
-- **Spacing/sizing:** Most components accept \`p\` (padding), \`m\` (margin), \`px\`/\`py\`/\`mx\`/\`my\`/\`pt\`/\`pb\`/\`pl\`/\`pr\`/\`mt\`/\`mb\`/\`ml\`/\`mr\` with values xs|sm|md|lg|xl or numbers
-- **Colors:** Use Mantine color names: "red", "blue", "green", "orange", "violet", "pink", "cyan", "grape", "teal", "yellow", "lime", "indigo", "gray", "dark". Add shade suffix: "red.6", "blue.4"
-- **Styles:** Use \`style={{...}}\` for inline CSS. E.g. \`style={{flex: 1, minWidth: 0}}\`
-- **Conditional rendering:** Use ternaries: \`{condition ? <Text>Yes</Text> : <Text>No</Text>}\`
-- **Responsive:** Most size/spacing props accept object: \`{{ base: "sm", md: "lg" }}\`
-
-### Interactive Components (built-in, state-managed)
-These components manage their own internal state — they provide interactivity without event handlers:
-
-**PaginatedList** — Paginates its children with prev/next buttons.
-Props: \`pageSize\` (number, default 6)
-Usage: Wrap a \`.map()\` expression to paginate results.
-\`\`\`jsx
-<PaginatedList pageSize={8}>
-  {data.results.map(item =>
-    <Card withBorder p="xs" mb="xs">
-      <Text>{item.name}</Text>
-    </Card>
-  )}
-</PaginatedList>
-\`\`\`
-
-**TabsContainer + TabPanel** — Tabbed interface with automatic tab switching.
-TabsContainer props: \`defaultTab\` (string, optional — defaults to first tab)
-TabPanel props: \`value\` (string, required — unique tab ID), \`label\` (string, optional — tab display text)
-\`\`\`jsx
-<TabsContainer defaultTab="overview">
-  <TabPanel value="overview" label="Overview">
-    <Text>{data.description}</Text>
-  </TabPanel>
-  <TabPanel value="stats" label="Statistics">
-    <Text>Total: {data.count}</Text>
-  </TabPanel>
-</TabsContainer>
-\`\`\`
-
-**Collapsible** — Expandable/collapsible section with a title.
-Props: \`title\` (string, required), \`defaultOpen\` (boolean, default false)
-\`\`\`jsx
-<Collapsible title="Details" defaultOpen={true}>
-  <Text>{data.details}</Text>
-</Collapsible>
-\`\`\`
-
-**StatBar** — A horizontal stat bar with label/value (great for RPG-style stats, progress).
-Props: \`value\` (number), \`max\` (number, default 100), \`label\` (string), \`color\` (Mantine color)
-\`\`\`jsx
-<StatBar label="HP" value={45} max={100} color="red" />
-<StatBar label="ATK" value={80} max={255} color="orange" />
-\`\`\`
-
-**TypeBadge** — A colored badge that maps common type names to colors (normal, fire, water, electric, grass, ice, fighting, poison, ground, flying, psychic, bug, rock, ghost, dragon, dark, steel, fairy).
-Props: \`type\` (string), \`size\` (xs|sm|md|lg|xl, default sm)
-\`\`\`jsx
-<Group gap="xs">
-  <TypeBadge type="fire" />
-  <TypeBadge type="flying" />
-</Group>
-\`\`\`
-
-**Available bindings in templates:**
-- \`data\` — the full API response JSON object
-- \`String(v)\`, \`Number(v)\`, \`Boolean(v)\` — type coercion helpers
-- \`Math.round\`, \`Math.floor\`, \`Math.ceil\`, \`Math.abs\`, \`Math.min\`, \`Math.max\`, \`Math.pow\`, \`Math.sqrt\`, \`Math.PI\`
-- \`JSON.stringify(v)\`, \`Array.isArray(v)\`, \`Object.keys(v)\`, \`Object.values(v)\`, \`Object.entries(v)\`
-- Expression arrows for \`.map()\`, \`.filter()\`, \`.slice()\` — e.g. \`{data.items.map(item => <Text>{item.name}</Text>)}\`
-- Ternaries for conditionals — e.g. \`{data.count > 0 ? "active" : "idle"}\`
-
-**FORBIDDEN keywords (template will be rejected):** constructor, __proto__, eval, Function, import, require, globalThis, window, document, fetch
-
-**Chart data formats:**
-- BarChart/LineChart/AreaChart: \`data={data.items}\` + \`dataKey="month"\` (x-axis key) + \`series={[{ name: "count", color: "blue" }]}\` where series \`name\` matches a numeric key in each data row
-- DonutChart/PieChart: \`data={data.items}\` where each item is \`{ name: "Label", value: 42, color: "blue" }\` — NO dataKey or series
-- Sparkline: \`data={[1,2,3]}\` — flat number array
-- NumberFormatter: \`<NumberFormatter value={data.price} thousandSeparator prefix="$" />\`
-
-### Full Pokémon Card Example (demonstrating TypeBadge, StatBar, TabsContainer, Collapsible)
-API: \`https://pokeapi.co/api/v2/pokemon/charizard\`
-\`\`\`jsx
-<Stack gap="sm" p="xs">
-  <Group wrap="nowrap">
-    <Avatar src={data.sprites.front_default} size={80} radius="sm" />
-    <Stack gap={4} style={{flex: 1}}>
-      <Title order={3} tt="capitalize">{data.name}</Title>
-      <Text size="xs" c="dimmed">#{String(data.id).padStart(3, "0")}</Text>
-      <Group gap="xs">
-        {data.types.map(t => <TypeBadge type={t.type.name} />)}
-      </Group>
-    </Stack>
-  </Group>
-  <TabsContainer defaultTab="stats">
-    <TabPanel value="stats" label="Stats">
-      <Stack gap="xs" pt="xs">
-        {data.stats.map(s =>
-          <StatBar label={s.stat.name} value={s.base_stat} max={255} color={s.base_stat > 100 ? "green" : "red"} />
-        )}
-      </Stack>
-    </TabPanel>
-    <TabPanel value="abilities" label="Abilities">
-      <Stack gap="xs" pt="xs">
-        {data.abilities.map(a =>
-          <Badge variant={a.is_hidden ? "outline" : "filled"} tt="capitalize">
-            {a.ability.name}{a.is_hidden ? " (hidden)" : ""}
-          </Badge>
-        )}
-      </Stack>
-    </TabPanel>
-    <TabPanel value="moves" label="Moves">
-      <Collapsible title="Move list">
-        <Group gap="xs" pt="xs">
-          {data.moves.slice(0, 20).map(m =>
-            <Badge size="xs" variant="light" tt="capitalize">{m.move.name}</Badge>
-          )}
-        </Group>
-      </Collapsible>
-    </TabPanel>
-  </TabsContainer>
-</Stack>
-\`\`\`
-
-### Paginated List Example
-API: \`https://pokeapi.co/api/v2/pokemon?limit=50\`
-\`\`\`jsx
-<Stack gap="sm" p="xs">
-  <Group justify="space-between">
-    <Title order={3}>Pokédex</Title>
-    <Badge size="lg" color="red">{data.count} Pokémon</Badge>
-  </Group>
-  <PaginatedList pageSize={10}>
-    {data.results.map((pokemon, i) =>
-      <Card withBorder p="xs" mb="xs">
-        <Group wrap="nowrap">
-          <Avatar
-            src={"https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/" + String(i + 1) + ".png"}
-            size="lg"
-            radius="sm"
-          />
-          <Stack gap={0} style={{ flex: 1 }}>
-            <Text fw={700} tt="capitalize">{pokemon.name}</Text>
-            <Text size="xs" c="dimmed">#{String(i + 1)}</Text>
-          </Stack>
-        </Group>
-      </Card>
-    )}
-  </PaginatedList>
-</Stack>
-\`\`\`
-
-## API Response
-`;
-
-const PROMPT_NO_RESPONSE = `Paste the raw JSON response from your API endpoint below:
-
-\`\`\`json
-PASTE_YOUR_API_RESPONSE_HERE
-\`\`\`
-`;
-
-const PROMPT_FOOTER = `
-## Your Request
-Describe what you want the widget to show:
-
-`;
-
-function buildAiPrompt(
-  jsonSchema: unknown,
-  rawResponse?: string | null,
-  currentConfig?: Record<string, unknown> | null,
-) {
-  const schemaStr = JSON.stringify(jsonSchema, null, 2);
-  const responseSection = rawResponse
-    ? `The API returned the following JSON:\n\n\`\`\`json\n${rawResponse}\n\`\`\`\n`
-    : PROMPT_NO_RESPONSE;
-
-  const configSection = currentConfig
-    ? `\n## Current Widget Configuration\nThe widget is currently configured as follows. Use this as a starting point and modify based on the user's request:\n\n\`\`\`json\n${JSON.stringify(currentConfig, null, 2)}\n\`\`\`\n`
-    : "";
-
-  return PROMPT_HEADER + schemaStr + PROMPT_RULES + responseSection + configSection + PROMPT_FOOTER;
-}
-
 interface CopyAiPromptButtonProps {
   rawResponse?: string | null;
   currentConfig?: Record<string, unknown> | null;
@@ -300,9 +21,8 @@ export const CopyAiPromptButton = ({ rawResponse, currentConfig }: CopyAiPromptB
 
   const handleCopy = async () => {
     if (!schema) return;
-    const prompt = buildAiPrompt(schema, rawResponse, currentConfig);
     try {
-      await navigator.clipboard.writeText(prompt);
+      await navigator.clipboard.writeText(buildCustomWidgetAiPrompt(schema, rawResponse, currentConfig));
       close();
       showSuccessNotification({ title: t("action.copyAiPrompt"), message: t("notification.aiPromptCopied") });
     } catch {
@@ -314,6 +34,7 @@ export const CopyAiPromptButton = ({ rawResponse, currentConfig }: CopyAiPromptB
     <Popover opened={opened} onClose={close} width={320} position="bottom" shadow="md" withinPortal>
       <Popover.Target>
         <Button
+          type="button"
           variant="light"
           leftSection={<IconSparkles size={16} />}
           onClick={open}
@@ -333,7 +54,7 @@ export const CopyAiPromptButton = ({ rawResponse, currentConfig }: CopyAiPromptB
               {t("notification.aiPromptNoResponse")}
             </Text>
           )}
-          <Button leftSection={<IconCopy size={16} />} onClick={() => void handleCopy()} fullWidth>
+          <Button type="button" leftSection={<IconCopy size={16} />} onClick={() => void handleCopy()} fullWidth>
             {t("notification.aiPromptCopy")}
           </Button>
         </Stack>

apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-actions.tsx

@@ -1,19 +1,14 @@
 "use client";
 
-import { useRef } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { ActionIcon, Menu } from "@mantine/core";
-import {
-  IconCopy,
-  IconDots,
-  IconDownload,
-  IconToggleLeft,
-  IconToggleRight,
-  IconTrash,
-  IconUpload,
-} from "@tabler/icons-react";
+import { useDisclosure } from "@mantine/hooks";
+import { IconCopy, IconDots, IconDownload, IconTrash, IconUpload } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
 import { revalidatePathActionAsync } from "@homarr/common/client";
+import { getImportReview, parseCustomWidgetClipboard } from "@homarr/custom-widgets/core";
+import { ImportReviewDialog } from "@homarr/custom-widgets/workbench";
 import { useConfirmModal } from "@homarr/modals";
 import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useScopedI18n } from "@homarr/translation/client";
@@ -33,28 +28,8 @@ export const CustomWidgetRowActions = ({ widget }: { widget: WidgetRef }) => {
   const { openConfirmModal } = useConfirmModal();
   const deleteMutation = clientApi.customWidget.delete.useMutation();
   const duplicateMutation = clientApi.customWidget.duplicate.useMutation();
-  const toggleEnabledMutation = clientApi.customWidget.toggleEnabled.useMutation();
   const utils = clientApi.useUtils();
 
-  const handleToggleEnabled = () => {
-    toggleEnabledMutation.mutate(
-      { id: widget.id, enabled: !widget.enabled },
-      {
-        onSuccess: () => {
-          void utils.customWidget.all.invalidate();
-          void utils.widget.customApi.getData.invalidate({ definitionId: widget.id });
-          void revalidatePathActionAsync("/manage/custom-widgets");
-        },
-        onError: () => {
-          showErrorNotification({
-            title: widget.enabled ? t("action.disable") : t("action.enable"),
-            message: t("notification.toggleError"),
-          });
-        },
-      },
-    );
-  };
-
   const handleExport = async () => {
     try {
       const data = await utils.customWidget.export.fetch({ id: widget.id });
@@ -103,7 +78,7 @@ export const CustomWidgetRowActions = ({ widget }: { widget: WidgetRef }) => {
                 message: t("notification.deleted", { name: widget.name }),
               });
               void utils.customWidget.all.invalidate();
-              void utils.widget.customApi.getData.invalidate({ definitionId: widget.id });
+              void utils.widget.customApi.getData.invalidate();
               void revalidatePathActionAsync("/manage/custom-widgets");
             },
             onError: () => {
@@ -123,14 +98,6 @@ export const CustomWidgetRowActions = ({ widget }: { widget: WidgetRef }) => {
         </ActionIcon>
       </Menu.Target>
       <Menu.Dropdown>
-        <Menu.Item
-          onClick={handleToggleEnabled}
-          leftSection={widget.enabled ? <IconToggleLeft {...iconProps} /> : <IconToggleRight {...iconProps} />}
-          disabled={toggleEnabledMutation.isPending}
-        >
-          {widget.enabled ? t("action.disable") : t("action.enable")}
-        </Menu.Item>
-        <Menu.Divider />
         <Menu.Item
           onClick={handleDuplicate}
           leftSection={<IconCopy {...iconProps} />}
@@ -158,9 +125,13 @@ export const CustomWidgetRowActions = ({ widget }: { widget: WidgetRef }) => {
 export const ImportCustomWidgetButton = () => {
   const t = useScopedI18n("customWidget");
   const fileInputRef = useRef<HTMLInputElement>(null);
+  const [pendingImport, setPendingImport] = useState<Record<string, unknown> | null>(null);
+  const [reviewOpened, { open: openReview, close: closeReview }] = useDisclosure(false);
   const utils = clientApi.useUtils();
   const importMutation = clientApi.customWidget.import.useMutation({
     onSuccess: () => {
+      closeReview();
+      setPendingImport(null);
       showSuccessNotification({ title: t("action.import"), message: t("notification.imported") });
       void utils.customWidget.all.invalidate();
       void revalidatePathActionAsync("/manage/custom-widgets");
@@ -169,23 +140,45 @@ export const ImportCustomWidgetButton = () => {
       showErrorNotification({ title: t("action.import"), message: t("notification.importError") });
     },
   });
+  const review = useMemo(() => getImportReview(pendingImport), [pendingImport]);
+  const queueImport = useCallback(
+    (value: Record<string, unknown>) => {
+      setPendingImport(value);
+      openReview();
+    },
+    [openReview],
+  );
+
+  useEffect(() => {
+    const handlePaste = (event: ClipboardEvent) => {
+      const target = event.target as HTMLElement | null;
+      if (target?.matches("input, textarea, [contenteditable='true']")) return;
+      const widget = parseCustomWidgetClipboard(event.clipboardData?.getData("text/plain") ?? "");
+      if (!widget) return;
+      event.preventDefault();
+      queueImport(widget);
+    };
+    window.addEventListener("paste", handlePaste);
+    return () => window.removeEventListener("paste", handlePaste);
+  }, [queueImport]);
 
   const handleImport = (event: React.ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0];
     if (!file) return;
 
     const reader = new FileReader();
-    reader.onload = (e) => {
+    reader.addEventListener("load", (e) => {
       try {
-        const json = JSON.parse(e.target?.result as string);
-        importMutation.mutate(json);
+        const widget = parseCustomWidgetClipboard(e.target?.result as string);
+        if (!widget) throw new Error("Invalid import");
+        queueImport(widget);
       } catch {
         showErrorNotification({ title: t("action.import"), message: t("notification.importError") });
       }
-    };
-    reader.onerror = () => {
+    });
+    reader.addEventListener("error", () => {
       showErrorNotification({ title: t("action.import"), message: t("notification.importError") });
-    };
+    });
     reader.readAsText(file);
     event.target.value = "";
   };
@@ -197,16 +190,39 @@ export const ImportCustomWidgetButton = () => {
         leftSection={<IconUpload size={16} />}
         onClick={() => fileInputRef.current?.click()}
         loading={importMutation.isPending}
+        title={t("action.pasteImportHint")}
       >
         {t("action.import")}
       </MobileAffixButton>
       <input
         ref={fileInputRef}
         type="file"
-        accept=".json"
+        accept=".json,.md,text/markdown,application/json"
         hidden
         onChange={handleImport}
-        aria-label="Import custom widget"
+        aria-label={t("importReview.fileLabel")}
+      />
+      <ImportReviewDialog
+        opened={reviewOpened}
+        review={review}
+        pending={importMutation.isPending}
+        onClose={closeReview}
+        onConfirm={() => pendingImport && importMutation.mutate(pendingImport as never)}
+        messages={{
+          title: t("importReview.title"),
+          description: t("importReview.description"),
+          name: t("importReview.name"),
+          origin: t("importReview.origin"),
+          authentication: t("importReview.authentication"),
+          networkScope: t("importReview.networkScope"),
+          methods: t("importReview.methods"),
+          permissions: t("importReview.permissions"),
+          actionWarningTitle: t("importReview.actionWarning.title"),
+          actionWarningDescription: t("importReview.actionWarning.description"),
+          cancel: t("importReview.cancel"),
+          confirm: t("importReview.confirm"),
+          permission: (permission) => t(`preview.request.permission.${permission}` as never),
+        }}
       />
     </>
   );

apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-form-errors.ts

@@ -0,0 +1,42 @@
+const serverToFormFieldMap: Record<string, Record<string, string>> = {
+  statGrid: { items: "statGridItems" },
+  countGrid: { items: "countGridItems" },
+  statusIndicator: { items: "statusItems" },
+  progressBars: { bars: "progressBars" },
+  keyValue: { mappings: "mappings" },
+  table: { columns: "columns", tablePath: "tablePath" },
+  singleValue: { jsonPath: "jsonPath", label: "label", unit: "unit" },
+  raw: { jsonPath: "rawJsonPath" },
+  actionButton: { buttonLabel: "buttonLabel" },
+  customJsx: { template: "template", requests: "requestManifest", networkScope: "networkScope" },
+};
+
+export function extractServerErrors(error: unknown, displayType: string): Record<string, string> {
+  const errors: Record<string, string> = {};
+  const trpcError = error as {
+    data?: { zodError?: { fieldErrors?: Record<string, string[]> } };
+    message?: string;
+  };
+  if (trpcError.data?.zodError?.fieldErrors) {
+    for (const [field, messages] of Object.entries(trpcError.data.zodError.fieldErrors)) {
+      if (messages?.[0]) errors[field] = messages[0];
+    }
+    return errors;
+  }
+  try {
+    const issues = JSON.parse(trpcError.message ?? "[]") as Array<{ path: (string | number)[]; message: string }>;
+    const fieldMap = serverToFormFieldMap[displayType] ?? {};
+    for (const issue of issues) {
+      const path = [...issue.path];
+      if (path[0] === "displayConfig") {
+        path.shift();
+        const serverField = String(path[0]);
+        path[0] = fieldMap[serverField] ?? serverField;
+      }
+      errors[path.join(".")] = issue.message;
+    }
+  } catch {
+    // Non-validation server errors are handled by the caller's notification.
+  }
+  return errors;
+}

apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-form-sections.tsx

@@ -0,0 +1,238 @@
+import type { RefObject } from "react";
+import {
+  Button,
+  Fieldset,
+  Group,
+  PasswordInput,
+  SegmentedControl,
+  Select,
+  Stack,
+  Text,
+  TextInput,
+  Textarea,
+  ThemeIcon,
+} from "@mantine/core";
+import { IconCode, IconLayoutGrid, IconPlayerPlay } from "@tabler/icons-react";
+import { IconPicker } from "@homarr/forms-collection";
+import { CUSTOM_JSX_STARTER } from "@homarr/custom-widgets/core";
+import {
+  CUSTOM_WIDGET_AUTH_SECRET_FIELDS,
+  CUSTOM_WIDGET_AUTH_USES_HEADER_NAME,
+} from "@homarr/custom-widgets/workbench";
+
+import type { DisplayFieldsProps } from "./_display-field-types";
+import { DISPLAY_TYPE_ICONS, DisplayTypeFields, DisplayTypePicker } from "./_display-type-fields";
+import classes from "./_custom-widget-form.module.css";
+
+interface SharedSectionProps extends DisplayFieldsProps {
+  sectionRef: RefObject<HTMLElement | null>;
+}
+
+interface FormatSectionProps extends SharedSectionProps {
+  onContinue: () => void;
+}
+
+export function FormatSection({ form, t, sectionRef, onContinue }: FormatSectionProps) {
+  return (
+    <section ref={sectionRef} className={classes.formSection} tabIndex={-1}>
+      <ThemeIcon className={classes.sectionMarker} variant="filled" size={40} radius="xl">
+        <IconLayoutGrid size={20} />
+      </ThemeIcon>
+      <Stack gap="xl">
+        <SectionHeading label={t("steps.format.label")} description={t("steps.format.description")} />
+        <Fieldset legend={t("fieldset.general")}>
+          <Stack gap="sm">
+            <TextInput label={t("field.name")} required {...form.getInputProps("name")} />
+            <Textarea label={t("field.description")} {...form.getInputProps("description")} />
+            <IconPicker withAsterisk={false} {...form.getInputProps("iconUrl")} />
+          </Stack>
+        </Fieldset>
+        <Fieldset legend={t("field.displayType")}>
+          <Stack gap="sm">
+            <Text size="sm" c="dimmed">
+              {t("steps.format.help")}
+            </Text>
+            <DisplayTypePicker
+              value={form.values.displayType}
+              onChange={(value) => {
+                form.setFieldValue("displayType", value);
+                if (value === "customJsx" && !form.values.template.trim())
+                  form.setFieldValue("template", CUSTOM_JSX_STARTER);
+              }}
+              t={t}
+            />
+          </Stack>
+        </Fieldset>
+        <ContinueButton label={t("steps.continueTo", { step: t("steps.connection.label") })} onClick={onContinue} />
+      </Stack>
+    </section>
+  );
+}
+
+interface ConnectionSectionProps extends SharedSectionProps {
+  isTesting: boolean;
+  onTest: () => void;
+  onContinue: () => void;
+}
+
+export function ConnectionSection({ form, t, sectionRef, isTesting, onTest, onContinue }: ConnectionSectionProps) {
+  const secretFields = CUSTOM_WIDGET_AUTH_SECRET_FIELDS[form.values.authType] ?? [];
+  const authTypeOptions = ["none", "bearer", "basic", "apiKeyHeader", "apiKeyQuery"].map((value) => ({
+    value,
+    label: t(`authType.${value}` as never),
+  }));
+  const handleAuthTypeChange = (value: string) => {
+    form.setFieldValue("authType", value);
+    form.setFieldValue(
+      "secrets",
+      (CUSTOM_WIDGET_AUTH_SECRET_FIELDS[value] ?? []).map((field) => ({
+        kind: field.kind,
+        value: form.values.secrets.find((secret) => secret.kind === field.kind)?.value ?? "",
+      })),
+    );
+  };
+  return (
+    <section ref={sectionRef} className={classes.formSection} tabIndex={-1}>
+      <ThemeIcon className={classes.sectionMarker} variant="light" size={40} radius="xl">
+        <IconPlayerPlay size={20} />
+      </ThemeIcon>
+      <Stack gap="xl">
+        <SectionHeading label={t("steps.connection.label")} description={t("steps.connection.description")} />
+        <Fieldset legend={t("fieldset.connection")}>
+          <Stack gap="sm">
+            <Group align="end" wrap="wrap" gap="xs">
+              <Select
+                label={t("field.method")}
+                data={["GET", "POST", "PUT", "DELETE", "PATCH"].map((value) => ({
+                  value,
+                  label: t(`method.${value}` as never),
+                }))}
+                w={110}
+                {...form.getInputProps("method")}
+                allowDeselect={false}
+                disabled={form.values.displayType === "customJsx" && form.values.jsxApiVersion === "2"}
+              />
+              <TextInput
+                label={t("field.url")}
+                required
+                placeholder={t("placeholder.url")}
+                style={{ flex: "1 1 260px" }}
+                {...form.getInputProps("url")}
+              />
+              <Button
+                type="button"
+                size="sm"
+                variant="light"
+                leftSection={<IconPlayerPlay size={16} />}
+                onClick={onTest}
+                loading={isTesting}
+                disabled={!form.values.url || form.values.method !== "GET"}
+              >
+                {t("preview.test")}
+              </Button>
+            </Group>
+            <div>
+              <Text size="sm" fw={500} mb={4}>
+                {t("field.authType")}
+              </Text>
+              <Select
+                hiddenFrom="sm"
+                value={form.values.authType}
+                data={authTypeOptions}
+                onChange={(value) => handleAuthTypeChange(value ?? "none")}
+                allowDeselect={false}
+                aria-label={t("field.authType")}
+              />
+              <SegmentedControl
+                visibleFrom="sm"
+                fullWidth
+                value={form.values.authType}
+                data={authTypeOptions}
+                onChange={handleAuthTypeChange}
+              />
+            </div>
+            {CUSTOM_WIDGET_AUTH_USES_HEADER_NAME[form.values.authType] && (
+              <TextInput
+                label={t("field.headerName")}
+                placeholder={t("placeholder.headerName")}
+                {...form.getInputProps("headerName")}
+              />
+            )}
+            {secretFields.map((field) => {
+              const index = form.values.secrets.findIndex((secret) => secret.kind === field.kind);
+              const secret = form.values.secrets[index];
+              if (index === -1 || !secret) return null;
+              const props = {
+                label: t(`secret.${field.labelKey}` as never),
+                placeholder: secret.hasValue && !secret.value ? t("secret.savedPlaceholder" as never) : undefined,
+                ...form.getInputProps(`secrets.${index}.value`),
+              };
+              return field.isPassword ? (
+                <PasswordInput key={field.kind} {...props} />
+              ) : (
+                <TextInput key={field.kind} {...props} />
+              );
+            })}
+            {form.values.method !== "GET" && (
+              <Textarea label={t("field.requestBody")} minRows={3} {...form.getInputProps("requestBody")} />
+            )}
+          </Stack>
+        </Fieldset>
+        <ContinueButton label={t("steps.continueTo", { step: t("steps.configure.label") })} onClick={onContinue} />
+      </Stack>
+    </section>
+  );
+}
+
+export function ConfigureSection({ form, t, previewJson, sectionRef }: SharedSectionProps) {
+  const SelectedIcon = DISPLAY_TYPE_ICONS[form.values.displayType as keyof typeof DISPLAY_TYPE_ICONS];
+  return (
+    <section ref={sectionRef} className={classes.formSection} tabIndex={-1}>
+      <ThemeIcon className={classes.sectionMarker} variant="light" size={40} radius="xl">
+        <IconCode size={20} />
+      </ThemeIcon>
+      <Stack gap="xl">
+        <SectionHeading label={t("steps.configure.label")} description={t("steps.configure.description")} />
+        <Fieldset legend={t("fieldset.display")}>
+          <Stack gap="sm">
+            <Group gap="xs">
+              <ThemeIcon variant="light" size="lg">
+                {SelectedIcon ? <SelectedIcon size={20} /> : null}
+              </ThemeIcon>
+              <div>
+                <Text fw={600}>{t(`displayType.${form.values.displayType}` as never)}</Text>
+                <Text size="xs" c="dimmed">
+                  {t(`displayTypeDescription.${form.values.displayType}` as never)}
+                </Text>
+              </div>
+            </Group>
+            <DisplayTypeFields form={form} t={t} previewJson={previewJson} />
+          </Stack>
+        </Fieldset>
+      </Stack>
+    </section>
+  );
+}
+
+function SectionHeading({ label, description }: { label: string; description: string }) {
+  return (
+    <div>
+      <Text fw={700} size="lg">
+        {label}
+      </Text>
+      <Text size="sm" c="dimmed">
+        {description}
+      </Text>
+    </div>
+  );
+}
+
+function ContinueButton({ label, onClick }: { label: string; onClick: () => void }) {
+  return (
+    <Group justify="flex-end">
+      <Button type="button" variant="light" size="md" onClick={onClick}>
+        {label}
+      </Button>
+    </Group>
+  );
+}

apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-form.module.css

@@ -0,0 +1,151 @@
+.form {
+  min-width: 0;
+}
+
+.workbench {
+  display: grid;
+  gap: var(--mantine-spacing-xl);
+  align-items: start;
+}
+
+.paneSwitcher {
+  position: sticky;
+  top: var(--mantine-spacing-xs);
+  z-index: 10;
+  margin-bottom: var(--mantine-spacing-lg);
+  background: var(--mantine-color-body);
+}
+
+@media (max-width: 74.9375em) {
+  .workbench[data-mobile-pane="configure"] .previewPane,
+  .workbench[data-mobile-pane="preview"] .configuration {
+    display: none;
+  }
+}
+
+.configuration,
+.previewPane {
+  min-width: 0;
+}
+
+.previewPane {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mantine-spacing-md);
+}
+
+.actionBar {
+  position: sticky;
+  bottom: var(--mantine-spacing-sm);
+  z-index: 10;
+  background: var(--mantine-color-body);
+}
+
+.mobileSaveBar {
+  position: sticky;
+  bottom: var(--mantine-spacing-sm);
+  z-index: 10;
+  background: var(--mantine-color-body);
+}
+
+.formFlow {
+  --flow-marker-size: 2.5rem;
+}
+
+.formSection {
+  position: relative;
+  padding: 0 0 var(--mantine-spacing-xl) calc(var(--flow-marker-size) + var(--mantine-spacing-lg));
+  scroll-margin-top: 5rem;
+  outline: none;
+}
+
+.formSection:not(:last-child)::before {
+  position: absolute;
+  top: var(--flow-marker-size);
+  bottom: 0;
+  left: calc(var(--flow-marker-size) / 2);
+  width: 1px;
+  background: var(--mantine-color-default-border);
+  content: "";
+}
+
+.formSection:focus-visible {
+  border-radius: var(--mantine-radius-md);
+  outline: 2px solid var(--mantine-primary-color-filled);
+  outline-offset: 4px;
+}
+
+.sectionMarker {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+.displayTypeOption {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--mantine-spacing-sm);
+  min-height: 7rem;
+  padding: var(--mantine-spacing-md);
+  border: 1px solid var(--mantine-color-default-border);
+  border-radius: var(--mantine-radius-md);
+  background: var(--mantine-color-body);
+  transition:
+    border-color 160ms ease,
+    background-color 160ms ease;
+}
+
+.displayTypeOption:hover {
+  background: var(--mantine-color-default-hover);
+}
+
+.displayTypeOption[data-selected] {
+  border-color: var(--mantine-primary-color-filled);
+  background: var(--mantine-primary-color-light);
+}
+
+.displayTypeOption:focus-visible {
+  outline: 2px solid var(--mantine-primary-color-filled);
+  outline-offset: 2px;
+}
+
+.displayTypeCopy {
+  min-width: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .displayTypeOption {
+    transition: none;
+  }
+}
+
+@media (min-width: 75em) {
+  .paneSwitcher {
+    display: none;
+  }
+
+  .mobileSaveBar {
+    display: none;
+  }
+
+  .workbench {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .previewPane {
+    position: sticky;
+    top: 5rem;
+  }
+
+  .actionBar {
+    top: 5rem;
+    bottom: auto;
+  }
+}
+
+@media (min-width: 100em) {
+  .workbench {
+    grid-template-columns: 0.9fr 1.1fr;
+  }
+}

apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-list.tsx

@@ -1,9 +1,12 @@
 "use client";
 
-import { ActionIcon, Avatar, Badge, Group, Stack, Table, Text } from "@mantine/core";
+import { ActionIcon, Avatar, Badge, Card, Group, Stack, Switch, Text, Tooltip } from "@mantine/core";
 import { IconApi, IconPencil } from "@tabler/icons-react";
 
 import type { RouterOutputs } from "@homarr/api";
+import { clientApi } from "@homarr/api/client";
+import { revalidatePathActionAsync } from "@homarr/common/client";
+import { showErrorNotification } from "@homarr/notifications";
 import { useScopedI18n } from "@homarr/translation/client";
 import { Link } from "@homarr/ui";
 
@@ -23,8 +26,6 @@ const displayTypeBadgeColors: Record<string, string> = {
   customJsx: "pink",
 };
 
-const iconProps = { size: 16, stroke: 1.5 };
-
 interface CustomWidgetListProps {
   definitions: RouterOutputs["customWidget"]["all"];
 }
@@ -43,59 +44,99 @@ export const CustomWidgetList = ({ definitions }: CustomWidgetListProps) => {
   }
 
   return (
-    <Stack gap="md">
-      <Table striped highlightOnHover withTableBorder>
-        <Table.Thead>
-          <Table.Tr>
-            <Table.Th>{t("table.name")}</Table.Th>
-            <Table.Th>{t("table.url")}</Table.Th>
-            <Table.Th>{t("table.display")}</Table.Th>
-            <Table.Th w={90} />
-          </Table.Tr>
-        </Table.Thead>
-        <Table.Tbody>
-          {definitions.map((def) => (
-            <Table.Tr key={def.id} style={{ opacity: def.enabled ? undefined : 0.5 }}>
-              <Table.Td>
-                <Group gap="xs" wrap="nowrap">
-                  {def.iconUrl ? (
-                    <Avatar size={20} radius="sm" src={def.iconUrl} styles={{ image: { objectFit: "contain" } }} />
-                  ) : (
-                    <IconApi size={16} />
-                  )}
-                  <Text size="sm" fw={500} lineClamp={1} c={def.enabled ? undefined : "dimmed"} style={{ minWidth: 0 }}>
-                    {def.name}
-                  </Text>
-                </Group>
-              </Table.Td>
-              <Table.Td>
-                <Text size="sm" c="dimmed" lineClamp={1}>
-                  {def.url}
-                </Text>
-              </Table.Td>
-              <Table.Td>
-                <Badge color={displayTypeBadgeColors[def.displayType] ?? "gray"} size="sm">
-                  {t(`displayType.${def.displayType}` as never)}
-                </Badge>
-              </Table.Td>
-              <Table.Td>
-                <Group gap={4} justify="flex-end" wrap="nowrap">
-                  <ActionIcon
-                    component={Link}
-                    href={`/manage/custom-widgets/edit/${def.id}`}
-                    variant="filled"
-                    color="red"
-                    aria-label={t("action.edit")}
-                  >
-                    <IconPencil {...iconProps} />
-                  </ActionIcon>
-                  <CustomWidgetRowActions widget={{ id: def.id, name: def.name, enabled: def.enabled }} />
-                </Group>
-              </Table.Td>
-            </Table.Tr>
-          ))}
-        </Table.Tbody>
-      </Table>
+    <Stack gap="sm">
+      {definitions.map((def) => (
+        <CustomWidgetCard key={def.id} widget={def} />
+      ))}
     </Stack>
   );
 };
+
+type WidgetDef = RouterOutputs["customWidget"]["all"][number];
+
+function CustomWidgetCard({ widget }: { widget: WidgetDef }) {
+  const t = useScopedI18n("customWidget");
+  const toggleMutation = clientApi.customWidget.toggleEnabled.useMutation();
+  const utils = clientApi.useUtils();
+
+  const handleToggle = () => {
+    toggleMutation.mutate(
+      { id: widget.id, enabled: !widget.enabled },
+      {
+        onSuccess: () => {
+          void utils.customWidget.all.invalidate();
+          void utils.widget.customApi.getData.invalidate();
+          void revalidatePathActionAsync("/manage/custom-widgets");
+        },
+        onError: () => {
+          showErrorNotification({
+            title: widget.enabled ? t("action.disable") : t("action.enable"),
+            message: t("notification.toggleError"),
+          });
+        },
+      },
+    );
+  };
+
+  return (
+    <Card
+      padding="sm"
+      style={{
+        opacity: widget.enabled ? 1 : 0.55,
+        transition: "opacity 150ms ease",
+      }}
+    >
+      <Group justify="space-between" wrap="nowrap" gap="md">
+        <Group wrap="nowrap" gap="sm" style={{ flex: 1, minWidth: 0 }}>
+          {widget.iconUrl ? (
+            <Avatar size={36} radius="sm" src={widget.iconUrl} styles={{ image: { objectFit: "contain" } }} />
+          ) : (
+            <Avatar size={36} radius="sm" color="red">
+              <IconApi size={18} />
+            </Avatar>
+          )}
+          <Stack gap={2} style={{ minWidth: 0, flex: 1 }}>
+            <Text size="sm" fw={600} lineClamp={1} style={{ minWidth: 0 }}>
+              {widget.name}
+            </Text>
+            {widget.url && (
+              <Text size="xs" c="dimmed" ff="monospace" lineClamp={1} style={{ wordBreak: "break-all", minWidth: 0 }}>
+                {widget.url}
+              </Text>
+            )}
+          </Stack>
+          <Badge
+            color={displayTypeBadgeColors[widget.displayType] ?? "gray"}
+            size="sm"
+            variant="light"
+            style={{ flexShrink: 0 }}
+          >
+            {t(`displayType.${widget.displayType}` as never)}
+          </Badge>
+        </Group>
+
+        <Group gap="xs" wrap="nowrap" style={{ flexShrink: 0 }}>
+          <Tooltip label={widget.enabled ? t("action.disable") : t("action.enable")}>
+            <Switch
+              size="sm"
+              checked={widget.enabled}
+              onChange={handleToggle}
+              disabled={toggleMutation.isPending}
+              aria-label={widget.enabled ? t("action.disable") : t("action.enable")}
+            />
+          </Tooltip>
+          <ActionIcon
+            component={Link}
+            href={`/manage/custom-widgets/edit/${widget.id}`}
+            variant="subtle"
+            color="gray"
+            aria-label={t("action.edit")}
+          >
+            <IconPencil size={16} stroke={1.5} />
+          </ActionIcon>
+          <CustomWidgetRowActions widget={{ id: widget.id, name: widget.name, enabled: widget.enabled }} />
+        </Group>
+      </Group>
+    </Card>
+  );
+}

apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-preview.tsx

@@ -1,23 +1,42 @@
 "use client";
 
-import { useMemo } from "react";
-import { Alert, Badge, Button, Card, Center, Code, Group, Loader, ScrollArea, Stack, Text, Title } from "@mantine/core";
-import { IconAlertTriangle, IconExternalLink, IconPlayerPlay } from "@tabler/icons-react";
+import { useMemo, useState } from "react";
+import { Card, Stack, Tabs } from "@mantine/core";
 
+import { clientApi } from "@homarr/api/client";
+import type {
+  CustomWidgetAuthType,
+  CustomWidgetDisplayType,
+  CustomWidgetMethod,
+  CustomWidgetSecretKind,
+  DisplayConfig,
+} from "@homarr/custom-widgets/core";
+import { extractDisplayData } from "@homarr/custom-widgets/core";
+import {
+  analyzeJsxTemplate,
+  getPreviewLegacyMethods,
+  getPreviewNamedRequests,
+  PreviewDiagnosticsPanel,
+  PreviewErrorBoundary,
+  PreviewHeader,
+  PreviewRequestPanel,
+  PreviewResponsePanel,
+  redactPreviewUrl,
+} from "@homarr/custom-widgets/workbench";
+import { CUSTOM_JSX_METHOD_COLORS } from "@homarr/widgets/custom-api/custom-jsx-display";
 import { useScopedI18n } from "@homarr/translation/client";
-import { extractDisplayData } from "@homarr/widgets/custom-api/extract-display-data";
 
-import { displayComponents } from "@homarr/widgets/custom-api/component";
+import { PreviewWidgetPanel } from "./_preview-widget-panel";
 
-interface PreviewInput {
+export interface PreviewInput {
   url: string;
-  method: string;
-  authType: string;
+  method: CustomWidgetMethod;
+  authType: CustomWidgetAuthType;
   headerName?: string;
   requestBody?: string;
-  displayType: string;
-  displayConfig: Record<string, unknown>;
-  secrets: Array<{ kind: string; value: string }>;
+  displayType: CustomWidgetDisplayType;
+  displayConfig: DisplayConfig;
+  secrets: Array<{ kind: CustomWidgetSecretKind; value: string }>;
   definitionId?: string;
 }
 
@@ -26,6 +45,7 @@ export interface PreviewFetchResult {
   error?: string;
   responseInfo: { status: number; statusText: string } | null;
   rawResponse: string | null;
+  previewSession?: { id: string; expiresAt: number; liveActions: boolean } | null;
 }
 
 interface CustomWidgetPreviewProps {
@@ -35,146 +55,223 @@ interface CustomWidgetPreviewProps {
   cachedJson: unknown;
   onTest: () => void;
   isTesting: boolean;
+  isSampleStale?: boolean;
   testError?: string | null;
+  onInsertDataPath?: (path: string) => void;
+  onSetPreviewLiveActions?: (enabled: boolean) => void;
+  isUpdatingPreviewActions?: boolean;
+  onSampleDataChange?: (value: unknown) => void;
 }
 
-export function CustomWidgetPreview({
+const methodColor = (method: string) => CUSTOM_JSX_METHOD_COLORS[method] ?? "gray";
+
+export function CustomWidgetPreview(props: CustomWidgetPreviewProps) {
+  const t = useScopedI18n("customWidget.preview");
+  return (
+    <PreviewErrorBoundary
+      title={t("errorBoundary.title")}
+      description={t("errorBoundary.description")}
+      retryLabel={t("errorBoundary.retry")}
+    >
+      <CustomWidgetPreviewContent {...props} />
+    </PreviewErrorBoundary>
+  );
+}
+
+function CustomWidgetPreviewContent({
   getFormValues,
   formValues,
   fetchResult,
   cachedJson,
   onTest,
   isTesting,
+  isSampleStale = false,
   testError,
+  onInsertDataPath,
+  onSetPreviewLiveActions,
+  isUpdatingPreviewActions = false,
+  onSampleDataChange,
 }: CustomWidgetPreviewProps) {
   const t = useScopedI18n("customWidget");
+  const editorT = useScopedI18n("customWidget.editor");
+  const [previewSize, setPreviewSize] = useState("standard");
+  const displayConfig = formValues.displayConfig as DisplayConfig & Record<string, unknown>;
+  const previewSessionId = fetchResult?.previewSession?.id ?? "";
+  const journalQuery = clientApi.customWidget.previewJournal.useQuery(
+    { sessionId: previewSessionId },
+    { enabled: previewSessionId.length > 0, retry: false, refetchInterval: 1_000 },
+  );
 
   const displayData = useMemo((): Record<string, unknown> | null => {
-    const { displayType, displayConfig } = formValues;
+    const { displayType } = formValues;
     if (displayType === "actionButton") {
       return extractDisplayData(null, displayType, displayConfig) as Record<string, unknown>;
     }
     if (!fetchResult?.success || cachedJson == null) return null;
-    return extractDisplayData(cachedJson, displayType, displayConfig) as Record<string, unknown>;
-  }, [fetchResult?.success, cachedJson, formValues]);
+    const extracted = extractDisplayData(cachedJson, displayType, displayConfig) as Record<string, unknown>;
+    return displayType === "customJsx" && fetchResult.previewSession
+      ? {
+          ...extracted,
+          previewSessionId: fetchResult.previewSession.id,
+          previewLiveActions: fetchResult.previewSession.liveActions,
+        }
+      : extracted;
+  }, [fetchResult, cachedJson, formValues, displayConfig]);
+
+  const namedRequests = useMemo(() => getPreviewNamedRequests(displayConfig), [displayConfig]);
+  const httpMethods = useMemo(() => {
+    if (formValues.displayType !== "customJsx") return [];
+    if (namedRequests.length > 0) return [...new Set(namedRequests.map((request) => request.method))];
+    return getPreviewLegacyMethods((displayConfig.template as string) ?? "");
+  }, [formValues.displayType, displayConfig.template, namedRequests]);
+  const hasNamedActions = namedRequests.some((request) => request.kind === "action");
+  const templateDiagnostics = useMemo(
+    () =>
+      formValues.displayType === "customJsx"
+        ? analyzeJsxTemplate((displayConfig.template as string) ?? "", {
+            apiVersion: displayConfig.jsxApiVersion === 2 ? 2 : 1,
+            requestIds: namedRequests.map((request) => request.id),
+          })
+        : [],
+    [displayConfig, formValues.displayType, namedRequests],
+  );
 
   const handleTest = () => {
     const values = getFormValues();
-    if (!values.url) return;
+    if (!values.url || values.method !== "GET") return;
     onTest();
   };
 
   return (
-    <Card withBorder shadow="sm" p="md">
-      <Stack gap="sm">
-        <Group justify="space-between" align="center">
-          <Title order={5}>{t("preview.title")}</Title>
-          <Button
-            size="xs"
-            variant="light"
-            leftSection={isTesting ? <Loader size={14} /> : <IconPlayerPlay size={14} />}
-            onClick={handleTest}
-            loading={isTesting}
-          >
-            {t("preview.test")}
-          </Button>
-        </Group>
+    <Card withBorder p="lg">
+      <Stack gap="md">
+        <PreviewHeader
+          method={formValues.method}
+          url={formValues.url}
+          methods={httpMethods}
+          hasNamedActions={hasNamedActions}
+          hasPreviewSession={Boolean(fetchResult?.previewSession)}
+          liveActions={fetchResult?.previewSession?.liveActions ?? false}
+          isUpdatingLiveActions={isUpdatingPreviewActions}
+          isTesting={isTesting}
+          isSampleStale={isSampleStale}
+          testError={testError}
+          responseError={fetchResult?.success === false ? fetchResult.error : undefined}
+          responseStatus={fetchResult?.success === false ? fetchResult.responseInfo : undefined}
+          onTest={handleTest}
+          onSetLiveActions={onSetPreviewLiveActions}
+          methodColor={methodColor}
+          messages={{
+            title: t("preview.title"),
+            interactive: t("preview.capabilities.interactive"),
+            capabilitiesTitle: t("preview.capabilities.title"),
+            capabilitiesDescription: t("preview.capabilities.description"),
+            liveActions: t("preview.capabilities.liveActions"),
+            liveActionsDescription: t("preview.capabilities.liveActionsDescription"),
+            runTestFirst: t("preview.capabilities.runTestFirst"),
+            simulated: t("preview.capabilities.simulated"),
+            test: t("preview.test"),
+            mutationDisabled: t("preview.mutationDisabled"),
+            staleTitle: t("preview.stale.title"),
+            staleDescription: t("preview.stale.description"),
+          }}
+        />
 
-        {testError && (
-          <Alert color="red" icon={<IconAlertTriangle size={16} />} p="xs">
-            <Text size="xs">{testError}</Text>
-          </Alert>
-        )}
+        <Tabs defaultValue="widget" keepMounted={false}>
+          <Tabs.List grow>
+            <Tabs.Tab value="widget">{t("preview.tab.widget")}</Tabs.Tab>
+            <Tabs.Tab value="response">{t("preview.tab.response")}</Tabs.Tab>
+            <Tabs.Tab value="request">{t("preview.tab.request")}</Tabs.Tab>
+            <Tabs.Tab value="diagnostics">{t("preview.tab.diagnostics")}</Tabs.Tab>
+          </Tabs.List>
 
-        {fetchResult && !fetchResult.success && (
-          <Alert color="red" icon={<IconAlertTriangle size={16} />} p="xs">
-            <Text size="xs" fw={500}>
-              {fetchResult.error}
-            </Text>
-            {fetchResult.responseInfo && (
-              <Badge size="xs" color="red" variant="light" mt={4}>
-                {fetchResult.responseInfo.status} {fetchResult.responseInfo.statusText}
-              </Badge>
-            )}
-          </Alert>
-        )}
+          <Tabs.Panel value="widget" pt="sm">
+            <PreviewWidgetPanel
+              data={displayData}
+              displayType={formValues.displayType}
+              success={fetchResult?.success ?? false}
+              responseInfo={fetchResult?.responseInfo ?? null}
+              previewSize={previewSize}
+              onPreviewSizeChange={setPreviewSize}
+            />
+          </Tabs.Panel>
 
-        {displayData && (formValues.displayType === "actionButton" || fetchResult?.success) && (
-          <Stack gap="xs">
-            {fetchResult?.success && (
-              <Group gap="xs">
-                <Badge size="xs" color="green" variant="light">
-                  {fetchResult.responseInfo?.status} {fetchResult.responseInfo?.statusText}
-                </Badge>
-              </Group>
-            )}
+          <Tabs.Panel value="response" pt="sm">
+            <PreviewResponsePanel
+              value={cachedJson}
+              rawResponse={fetchResult?.rawResponse}
+              onInsertDataPath={onInsertDataPath}
+              onSampleDataChange={onSampleDataChange}
+              messages={{
+                empty: t("preview.response.empty"),
+                sampleHint: t("preview.response.sampleHint"),
+                editSample: t("preview.response.editSample"),
+                addSample: t("preview.response.addSample"),
+                copied: t("preview.response.copied"),
+                copy: t("preview.response.copy"),
+                sampleLabel: t("preview.response.sampleLabel"),
+                sampleDescription: t("preview.response.sampleDescription"),
+                invalidSample: t("preview.response.invalidSample"),
+                cancelSample: t("preview.response.cancelSample"),
+                applySample: t("preview.response.applySample"),
+                copyPath: t("preview.response.copyPath"),
+                pathCopied: t("preview.response.pathCopied"),
+                insertPath: t("preview.response.insertPath"),
+                openRaw: t("preview.rawResponse"),
+              }}
+            />
+          </Tabs.Panel>
 
-            <Card withBorder p="xs" bg="var(--mantine-color-dark-7)" mah={320} style={{ overflow: "auto" }}>
-              <PreviewDisplay data={displayData} />
-            </Card>
+          <Tabs.Panel value="request" pt="sm">
+            <PreviewRequestPanel
+              method={formValues.method}
+              authentication={formValues.authType}
+              endpoint={redactPreviewUrl(formValues.url)}
+              status={fetchResult?.responseInfo?.status}
+              namedRequests={namedRequests}
+              journal={journalQuery.data}
+              methodColor={methodColor}
+              messages={{
+                method: t("preview.request.method"),
+                authentication: t("preview.request.authentication"),
+                endpoint: t("preview.request.endpoint"),
+                status: t("preview.request.status"),
+                notRun: t("preview.request.notRun"),
+                named: t("preview.request.named", { count: namedRequests.length }),
+                journal: t("preview.request.journal"),
+                journalEmpty: t("preview.request.journalEmpty"),
+                simulated: t("preview.request.simulated"),
+                redacted: t("preview.request.redacted"),
+                permission: (permission) => t(`preview.request.permission.${permission}` as never),
+                duration: (duration) => t("preview.request.duration", { duration }),
+              }}
+            />
+          </Tabs.Panel>
 
-            {fetchResult?.success && fetchResult.rawResponse && (
-              <Button
-                size="xs"
-                variant="subtle"
-                leftSection={<IconExternalLink size={14} />}
-                onClick={() => {
-                  const blob = new Blob([fetchResult.rawResponse ?? ""], {
-                    type: "application/json",
-                  });
-                  const blobUrl = URL.createObjectURL(blob);
-                  window.open(blobUrl);
-                  setTimeout(() => URL.revokeObjectURL(blobUrl), 60_000);
-                }}
-              >
-                {t("preview.rawResponse")}
-              </Button>
-            )}
-          </Stack>
-        )}
-
-        {!displayData && !testError && !isTesting && (
-          <Text size="xs" c="dimmed" ta="center">
-            {t("preview.hint")}
-          </Text>
-        )}
+          <Tabs.Panel value="diagnostics" pt="sm">
+            <PreviewDiagnosticsPanel
+              templateLength={(displayConfig.template as string | undefined)?.length ?? 0}
+              namedRequestCount={namedRequests.length}
+              methods={httpMethods.join(", ") || "GET"}
+              networkScope={(displayConfig.networkScope as string | undefined) ?? t("preview.diagnostics.legacy")}
+              diagnostics={templateDiagnostics}
+              messages={{
+                templateSize: t("preview.diagnostics.templateSize"),
+                characters: (count) => t("preview.diagnostics.characters", { count }),
+                namedRequests: t("preview.diagnostics.namedRequests"),
+                methods: t("preview.diagnostics.methods"),
+                networkScope: t("preview.diagnostics.networkScope"),
+                ready: t("preview.diagnostics.ready"),
+                diagnostic: (diagnostic) =>
+                  `${diagnostic.line ? `${editorT("diagnostics.line", { line: diagnostic.line })}: ` : ""}${editorT(
+                    `diagnostics.${diagnostic.code}` as never,
+                    { value: diagnostic.value ?? "" } as never,
+                  )}`,
+              }}
+            />
+          </Tabs.Panel>
+        </Tabs>
       </Stack>
     </Card>
   );
 }
-
-function PreviewDisplay({ data }: { data: unknown }) {
-  const typed = data as Record<string, unknown>;
-  if (!typed || typeof typed !== "object") {
-    return (
-      <Text size="xs" c="dimmed">
-        No data
-      </Text>
-    );
-  }
-
-  const dataType = typed.type as string | undefined;
-
-  if (dataType === "actionButton") {
-    return (
-      <Center p="sm">
-        <Button size="sm" color={(typed.buttonColor as string) ?? "blue"} disabled>
-          {(typed.buttonLabel as string) ?? "Execute"}
-        </Button>
-      </Center>
-    );
-  }
-
-  const Component = dataType ? displayComponents[dataType] : undefined;
-  if (Component) {
-    return <Component data={typed} />;
-  }
-
-  return (
-    <ScrollArea h={100}>
-      <Code block style={{ fontSize: 11 }}>
-        {JSON.stringify(data, null, 2)}
-      </Code>
-    </ScrollArea>
-  );
-}

apps/nextjs/src/app/[locale]/manage/custom-widgets/_display-field-shared.ts

@@ -0,0 +1,39 @@
+export const listItemDefaults = {
+  mapping: { label: "", jsonPath: "$", unit: "" },
+  column: { header: "", jsonPath: "$" },
+  statGridItem: { label: "", jsonPath: "$", unit: "", color: "blue" },
+  progressBar: { label: "", valuePath: "$", maxPath: "", unit: "", color: "blue" },
+  statusItem: { label: "", jsonPath: "$", goodValues: "online,true" },
+  countGridItem: { label: "", jsonPath: "$", unit: "" },
+} as const;
+
+export function cloneLast<T extends Record<string, unknown>>(items: T[], fallback: T): T {
+  return { ...(items.at(-1) ?? fallback) };
+}
+
+export const MANTINE_COLORS = [
+  "blue",
+  "teal",
+  "green",
+  "red",
+  "orange",
+  "yellow",
+  "violet",
+  "pink",
+  "cyan",
+  "grape",
+  "indigo",
+  "lime",
+] as const;
+export const REQUEST_MANIFEST_STARTER = `[
+  {
+    "id": "details",
+    "kind": "query",
+    "method": "GET",
+    "pathTemplate": "/api/details/{id}",
+    "parameters": { "id": "string" },
+    "auth": "inherit",
+    "minimumBoardPermission": "view",
+    "cacheTtlSeconds": 30
+  }
+]`;

apps/nextjs/src/app/[locale]/manage/custom-widgets/_display-field-types.ts

@@ -0,0 +1,12 @@
+import type { useZodForm } from "@homarr/form";
+import type { useScopedI18n } from "@homarr/translation/client";
+import type { customWidgetFormSchema } from "@homarr/custom-widgets/workbench";
+
+export type CustomWidgetFormInstance = ReturnType<typeof useZodForm<typeof customWidgetFormSchema>>;
+export type CustomWidgetTranslator = ReturnType<typeof useScopedI18n<"customWidget">>;
+
+export interface DisplayFieldsProps {
+  form: CustomWidgetFormInstance;
+  t: CustomWidgetTranslator;
+  previewJson: unknown;
+}

apps/nextjs/src/app/[locale]/manage/custom-widgets/_display-fields-basic.tsx

@@ -0,0 +1,178 @@
+import { ActionIcon, Box, Button, Group, NumberInput, Select, Stack, Switch, Text, TextInput } from "@mantine/core";
+import { IconPlus, IconTrash } from "@tabler/icons-react";
+import { JsonPathTreePicker } from "@homarr/widgets/_inputs/json-path-tree-picker";
+import { cloneLast, listItemDefaults } from "./_display-field-shared";
+import type { DisplayFieldsProps } from "./_display-field-types";
+
+export function BasicDisplayFields({ form, t, previewJson }: DisplayFieldsProps) {
+  const dt = form.values.displayType;
+
+  if (dt === "singleValue") {
+    return (
+      <>
+        <JsonPathTreePicker
+          json={previewJson}
+          label={t("field.jsonPath")}
+          description={t("field.jsonPathHint")}
+          required
+          placeholder={t("placeholder.jsonPath")}
+          {...form.getInputProps("jsonPath")}
+        />
+        <TextInput
+          label={t("field.label")}
+          placeholder={t("placeholder.exampleLabel")}
+          {...form.getInputProps("label")}
+        />
+        <TextInput label={t("field.unit")} placeholder={t("placeholder.exampleUnit")} {...form.getInputProps("unit")} />
+        <Group grow>
+          <Select
+            label={t("field.valueSize")}
+            data={["sm", "md", "lg", "xl"].map((v) => ({
+              value: v,
+              label: t(`sizeOption.${v}` as never),
+            }))}
+            {...form.getInputProps("valueSize")}
+            allowDeselect={false}
+          />
+          <Select
+            label={t("field.labelPosition")}
+            data={["above", "below"].map((v) => ({
+              value: v,
+              label: t(`labelPositionOption.${v}` as never),
+            }))}
+            {...form.getInputProps("labelPosition")}
+            allowDeselect={false}
+          />
+        </Group>
+      </>
+    );
+  }
+
+  if (dt === "keyValue") {
+    return (
+      <Stack gap="xs">
+        <Group grow>
+          <Select
+            label={t("field.kvLayout")}
+            data={["list", "grid"].map((v) => ({
+              value: v,
+              label: t(`layoutOption.${v}` as never),
+            }))}
+            {...form.getInputProps("kvLayout")}
+            allowDeselect={false}
+          />
+          {form.values.kvLayout === "grid" && (
+            <NumberInput label={t("field.gridColumns")} min={1} max={3} {...form.getInputProps("kvColumns")} />
+          )}
+        </Group>
+        <Text size="sm" fw={500}>
+          {t("field.mappings")}
+        </Text>
+        {form.values.mappings.map((_m, i) => (
+          <Group key={i} align="end" wrap="nowrap">
+            <TextInput
+              label={t("field.label")}
+              placeholder={t("placeholder.exampleLabelShort")}
+              style={{ flex: 1 }}
+              {...form.getInputProps(`mappings.${i}.label`)}
+            />
+            <Box style={{ flex: 1 }}>
+              <JsonPathTreePicker
+                json={previewJson}
+                label={t("field.jsonPath")}
+                placeholder={t("placeholder.jsonPath")}
+                {...form.getInputProps(`mappings.${i}.jsonPath`)}
+              />
+            </Box>
+            <TextInput
+              label={t("field.unit")}
+              placeholder={t("placeholder.exampleUnit")}
+              style={{ width: 80 }}
+              {...form.getInputProps(`mappings.${i}.unit`)}
+            />
+            <ActionIcon
+              type="button"
+              color="red"
+              variant="subtle"
+              onClick={() => form.removeListItem("mappings", i)}
+              disabled={form.values.mappings.length <= 1}
+              aria-label={t("action.removeMapping")}
+            >
+              <IconTrash size={16} />
+            </ActionIcon>
+          </Group>
+        ))}
+        <Button
+          type="button"
+          variant="light"
+          size="xs"
+          leftSection={<IconPlus size={14} />}
+          onClick={() => form.insertListItem("mappings", cloneLast(form.values.mappings, listItemDefaults.mapping))}
+        >
+          {t("action.addMapping")}
+        </Button>
+      </Stack>
+    );
+  }
+
+  if (dt === "table") {
+    return (
+      <Stack gap="xs">
+        <JsonPathTreePicker
+          json={previewJson}
+          label={t("field.tablePath")}
+          description={t("field.tablePathHint")}
+          required
+          placeholder={t("placeholder.tablePath")}
+          {...form.getInputProps("tablePath")}
+        />
+        <Group grow>
+          <Switch label={t("field.striped")} {...form.getInputProps("striped", { type: "checkbox" })} />
+          <Switch label={t("field.compact")} {...form.getInputProps("compact", { type: "checkbox" })} />
+        </Group>
+        <Text size="sm" fw={500}>
+          {t("field.columns")}
+        </Text>
+        {form.values.columns.map((_col, i) => (
+          <Group key={i} align="end" wrap="nowrap">
+            <TextInput
+              label={t("field.header")}
+              placeholder={t("placeholder.exampleHeader")}
+              style={{ flex: 1 }}
+              {...form.getInputProps(`columns.${i}.header`)}
+            />
+            <Box style={{ flex: 1 }}>
+              <JsonPathTreePicker
+                json={previewJson}
+                label={t("field.jsonPath")}
+                placeholder={t("placeholder.columnJsonPath")}
+                {...form.getInputProps(`columns.${i}.jsonPath`)}
+              />
+            </Box>
+            <ActionIcon
+              type="button"
+              color="red"
+              variant="subtle"
+              onClick={() => form.removeListItem("columns", i)}
+              disabled={form.values.columns.length <= 1}
+              aria-label={t("action.removeColumn")}
+            >
+              <IconTrash size={16} />
+            </ActionIcon>
+          </Group>
+        ))}
+        <Button
+          type="button"
+          variant="light"
+          size="xs"
+          leftSection={<IconPlus size={14} />}
+          onClick={() => form.insertListItem("columns", cloneLast(form.values.columns, listItemDefaults.column))}
+        >
+          {t("action.addColumn")}
+        </Button>
+      </Stack>
+    );
+  }
+
+  return null;
+}

apps/nextjs/src/app/[locale]/manage/custom-widgets/_display-fields-jsx.tsx

@@ -0,0 +1,97 @@
+import { Alert, SegmentedControl, Select, Stack, Text } from "@mantine/core";
+import { IconAlertTriangle } from "@tabler/icons-react";
+import { CUSTOM_JSX_STARTER } from "@homarr/custom-widgets/core";
+import {
+  analyzeJsxTemplate,
+  analyzeRequestManifest,
+  CUSTOM_JSX_TEMPLATE_LIMIT,
+  parseRequestManifest,
+} from "@homarr/custom-widgets/workbench";
+import { CodeEditor } from "./_code-editor";
+import { REQUEST_MANIFEST_STARTER } from "./_display-field-shared";
+import type { DisplayFieldsProps } from "./_display-field-types";
+
+export function CustomJsxDisplayFields({ form, t }: DisplayFieldsProps) {
+  const dt = form.values.displayType;
+
+  if (dt === "customJsx") {
+    const parsedRequests = parseRequestManifest(form.values.requestManifest);
+    const requestIds = parsedRequests
+      .map((request) => (request && typeof request === "object" && "id" in request ? request.id : null))
+      .filter((id): id is string => typeof id === "string");
+    const templateDiagnostics = analyzeJsxTemplate(form.values.template, {
+      apiVersion: form.values.jsxApiVersion === "2" ? 2 : 1,
+      requestIds,
+    });
+    const manifestDiagnostics =
+      form.values.jsxApiVersion === "2" ? analyzeRequestManifest(form.values.requestManifest) : [];
+
+    return (
+      <Stack gap="md">
+        <div>
+          <Text size="sm" fw={500} mb={4}>
+            {t("field.jsxApiVersion.label")}
+          </Text>
+          <SegmentedControl
+            fullWidth
+            value={form.values.jsxApiVersion}
+            onChange={(value) => form.setFieldValue("jsxApiVersion", value)}
+            data={[
+              { value: "2", label: t("field.jsxApiVersion.v2") },
+              { value: "1", label: t("field.jsxApiVersion.v1") },
+            ]}
+          />
+        </div>
+
+        {form.values.jsxApiVersion === "1" ? (
+          <Alert color="yellow" variant="light" icon={<IconAlertTriangle size={16} />}>
+            <Text size="sm">{t("field.jsxApiVersion.legacyWarning")}</Text>
+          </Alert>
+        ) : (
+          <Stack gap="sm">
+            <Select
+              label={t("field.networkScope.label")}
+              description={t(`field.networkScope.description.${form.values.networkScope}` as never)}
+              value={form.values.networkScope}
+              onChange={(value) => form.setFieldValue("networkScope", value ?? "public")}
+              data={(["public", "private", "loopback"] as const).map((value) => ({
+                value,
+                label: t(`field.networkScope.option.${value}` as never),
+              }))}
+              allowDeselect={false}
+            />
+            <CodeEditor
+              id="custom-widget-request-manifest"
+              language="json"
+              label={t("field.requestManifest.label")}
+              description={t("field.requestManifest.description")}
+              value={form.values.requestManifest}
+              onChange={(value) => form.setFieldValue("requestManifest", value)}
+              placeholder={REQUEST_MANIFEST_STARTER}
+              starter={REQUEST_MANIFEST_STARTER}
+              diagnostics={manifestDiagnostics}
+              error={form.errors.requestManifest ? t("field.requestManifest.invalid") : undefined}
+            />
+          </Stack>
+        )}
+
+        <CodeEditor
+          id="custom-widget-jsx-template"
+          language="jsx"
+          label={t("field.template.label")}
+          description={t("field.template.description")}
+          value={form.values.template}
+          onChange={(value) => form.setFieldValue("template", value)}
+          placeholder={CUSTOM_JSX_STARTER}
+          starter={CUSTOM_JSX_STARTER}
+          diagnostics={templateDiagnostics}
+          error={form.errors.template}
+          required
+          maxLength={CUSTOM_JSX_TEMPLATE_LIMIT}
+        />
+      </Stack>
+    );
+  }
+
+  return null;
+}

apps/nextjs/src/app/[locale]/manage/custom-widgets/_display-fields-metric.tsx

@@ -0,0 +1,167 @@
+import { ActionIcon, Box, Button, Group, Select, Stack, Switch, Text, TextInput, NumberInput } from "@mantine/core";
+import { IconPlus, IconTrash } from "@tabler/icons-react";
+import { JsonPathTreePicker } from "@homarr/widgets/_inputs/json-path-tree-picker";
+import { cloneLast, listItemDefaults, MANTINE_COLORS } from "./_display-field-shared";
+import type { DisplayFieldsProps } from "./_display-field-types";
+
+export function MetricDisplayFields({ form, t, previewJson }: DisplayFieldsProps) {
+  const dt = form.values.displayType;
+
+  if (dt === "statGrid") {
+    return (
+      <Stack gap="xs">
+        <Group grow>
+          <NumberInput label={t("field.gridColumns")} min={1} max={4} {...form.getInputProps("statGridColumns")} />
+          <Select
+            label={t("field.cardStyle")}
+            data={["filled", "outline", "subtle"].map((v) => ({
+              value: v,
+              label: t(`cardStyleOption.${v}` as never),
+            }))}
+            {...form.getInputProps("cardStyle")}
+            allowDeselect={false}
+          />
+        </Group>
+        <Text size="sm" fw={500}>
+          {t("field.items")}
+        </Text>
+        {form.values.statGridItems.map((_item, i) => (
+          <Group key={i} align="end" wrap="nowrap">
+            <TextInput
+              label={t("field.label")}
+              placeholder={t("placeholder.exampleLabelShort")}
+              style={{ flex: 1 }}
+              {...form.getInputProps(`statGridItems.${i}.label`)}
+            />
+            <Box style={{ flex: 1 }}>
+              <JsonPathTreePicker
+                json={previewJson}
+                label={t("field.jsonPath")}
+                placeholder={t("placeholder.jsonPath")}
+                {...form.getInputProps(`statGridItems.${i}.jsonPath`)}
+              />
+            </Box>
+            <TextInput
+              label={t("field.unit")}
+              placeholder={t("placeholder.exampleUnit")}
+              style={{ width: 80 }}
+              {...form.getInputProps(`statGridItems.${i}.unit`)}
+            />
+            <Select
+              label={t("field.color")}
+              data={MANTINE_COLORS.map((c) => ({ value: c, label: c }))}
+              style={{ width: 100 }}
+              {...form.getInputProps(`statGridItems.${i}.color`)}
+              allowDeselect={false}
+            />
+            <ActionIcon
+              type="button"
+              color="red"
+              variant="subtle"
+              onClick={() => form.removeListItem("statGridItems", i)}
+              disabled={form.values.statGridItems.length <= 1}
+              aria-label={t("action.removeItem")}
+            >
+              <IconTrash size={16} />
+            </ActionIcon>
+          </Group>
+        ))}
+        <Button
+          type="button"
+          variant="light"
+          size="xs"
+          leftSection={<IconPlus size={14} />}
+          onClick={() =>
+            form.insertListItem("statGridItems", cloneLast(form.values.statGridItems, listItemDefaults.statGridItem))
+          }
+        >
+          {t("action.addItem")}
+        </Button>
+      </Stack>
+    );
+  }
+
+  if (dt === "progressBars") {
+    return (
+      <Stack gap="xs">
+        <Group grow>
+          <Switch label={t("field.showPercentage")} {...form.getInputProps("showPercentage", { type: "checkbox" })} />
+          <Select
+            label={t("field.barSize")}
+            data={["sm", "md", "lg"].map((v) => ({
+              value: v,
+              label: t(`sizeOption.${v}` as never),
+            }))}
+            {...form.getInputProps("barSize")}
+            allowDeselect={false}
+          />
+        </Group>
+        <Text size="sm" fw={500}>
+          {t("field.bars")}
+        </Text>
+        {form.values.progressBars.map((_bar, i) => (
+          <Group key={i} align="end" wrap="nowrap">
+            <TextInput
+              label={t("field.label")}
+              placeholder={t("placeholder.exampleLabelShort")}
+              style={{ flex: 1 }}
+              {...form.getInputProps(`progressBars.${i}.label`)}
+            />
+            <Box style={{ flex: 1 }}>
+              <JsonPathTreePicker
+                json={previewJson}
+                label={t("field.valuePath")}
+                placeholder={t("placeholder.valuePath")}
+                {...form.getInputProps(`progressBars.${i}.valuePath`)}
+              />
+            </Box>
+            <Box style={{ flex: 1 }}>
+              <JsonPathTreePicker
+                json={previewJson}
+                label={t("field.maxPath")}
+                placeholder={t("placeholder.maxPath")}
+                {...form.getInputProps(`progressBars.${i}.maxPath`)}
+              />
+            </Box>
+            <TextInput
+              label={t("field.unit")}
+              placeholder={t("placeholder.exampleUnit")}
+              style={{ width: 60 }}
+              {...form.getInputProps(`progressBars.${i}.unit`)}
+            />
+            <Select
+              label={t("field.color")}
+              data={MANTINE_COLORS.map((c) => ({ value: c, label: c }))}
+              style={{ width: 100 }}
+              {...form.getInputProps(`progressBars.${i}.color`)}
+              allowDeselect={false}
+            />
+            <ActionIcon
+              type="button"
+              color="red"
+              variant="subtle"
+              onClick={() => form.removeListItem("progressBars", i)}
+              disabled={form.values.progressBars.length <= 1}
+              aria-label={t("action.removeItem")}
+            >
+              <IconTrash size={16} />
+            </ActionIcon>
+          </Group>
+        ))}
+        <Button
+          type="button"
+          variant="light"
+          size="xs"
+          leftSection={<IconPlus size={14} />}
+          onClick={() =>
+            form.insertListItem("progressBars", cloneLast(form.values.progressBars, listItemDefaults.progressBar))
+          }
+        >
+          {t("action.addBar")}
+        </Button>
+      </Stack>
+    );
+  }
+
+  return null;
+}

apps/nextjs/src/app/[locale]/manage/custom-widgets/_display-fields-status.tsx

@@ -0,0 +1,198 @@
+import { ActionIcon, Box, Button, Group, NumberInput, Select, Stack, Text, TextInput } from "@mantine/core";
+import { IconPlus, IconTrash } from "@tabler/icons-react";
+import { JsonPathTreePicker } from "@homarr/widgets/_inputs/json-path-tree-picker";
+import { cloneLast, listItemDefaults, MANTINE_COLORS } from "./_display-field-shared";
+import type { DisplayFieldsProps } from "./_display-field-types";
+
+export function StatusDisplayFields({ form, t, previewJson }: DisplayFieldsProps) {
+  const dt = form.values.displayType;
+
+  if (dt === "statusIndicator") {
+    return (
+      <Stack gap="xs">
+        <Group grow>
+          <Select
+            label={t("field.kvLayout")}
+            data={["list", "grid"].map((v) => ({
+              value: v,
+              label: t(`layoutOption.${v}` as never),
+            }))}
+            {...form.getInputProps("statusLayout")}
+            allowDeselect={false}
+          />
+          <Select
+            label={t("field.dotSize")}
+            data={["sm", "md", "lg"].map((v) => ({
+              value: v,
+              label: t(`sizeOption.${v}` as never),
+            }))}
+            {...form.getInputProps("dotSize")}
+            allowDeselect={false}
+          />
+        </Group>
+        <Text size="sm" fw={500}>
+          {t("field.items")}
+        </Text>
+        {form.values.statusItems.map((_item, i) => (
+          <Group key={i} align="end" wrap="nowrap">
+            <TextInput
+              label={t("field.label")}
+              placeholder={t("placeholder.exampleLabelShort")}
+              style={{ flex: 1 }}
+              {...form.getInputProps(`statusItems.${i}.label`)}
+            />
+            <Box style={{ flex: 1 }}>
+              <JsonPathTreePicker
+                json={previewJson}
+                label={t("field.jsonPath")}
+                placeholder={t("placeholder.jsonPath")}
+                {...form.getInputProps(`statusItems.${i}.jsonPath`)}
+              />
+            </Box>
+            <TextInput
+              label={t("field.goodValues")}
+              placeholder={t("placeholder.goodValues")}
+              style={{ flex: 1 }}
+              {...form.getInputProps(`statusItems.${i}.goodValues`)}
+            />
+            <ActionIcon
+              type="button"
+              color="red"
+              variant="subtle"
+              onClick={() => form.removeListItem("statusItems", i)}
+              disabled={form.values.statusItems.length <= 1}
+              aria-label={t("action.removeItem")}
+            >
+              <IconTrash size={16} />
+            </ActionIcon>
+          </Group>
+        ))}
+        <Button
+          type="button"
+          variant="light"
+          size="xs"
+          leftSection={<IconPlus size={14} />}
+          onClick={() =>
+            form.insertListItem("statusItems", cloneLast(form.values.statusItems, listItemDefaults.statusItem))
+          }
+        >
+          {t("action.addItem")}
+        </Button>
+      </Stack>
+    );
+  }
+
+  if (dt === "countGrid") {
+    return (
+      <Stack gap="xs">
+        <Group grow>
+          <NumberInput label={t("field.gridColumns")} min={2} max={4} {...form.getInputProps("countGridColumns")} />
+          <Select
+            label={t("field.valueSize")}
+            data={["sm", "md", "lg"].map((v) => ({
+              value: v,
+              label: t(`sizeOption.${v}` as never),
+            }))}
+            {...form.getInputProps("countValueSize")}
+            allowDeselect={false}
+          />
+        </Group>
+        <Text size="sm" fw={500}>
+          {t("field.items")}
+        </Text>
+        {form.values.countGridItems.map((_item, i) => (
+          <Group key={i} align="end" wrap="nowrap">
+            <TextInput
+              label={t("field.label")}
+              placeholder={t("placeholder.exampleLabelShort")}
+              style={{ flex: 1 }}
+              {...form.getInputProps(`countGridItems.${i}.label`)}
+            />
+            <Box style={{ flex: 1 }}>
+              <JsonPathTreePicker
+                json={previewJson}
+                label={t("field.jsonPath")}
+                placeholder={t("placeholder.jsonPath")}
+                {...form.getInputProps(`countGridItems.${i}.jsonPath`)}
+              />
+            </Box>
+            <TextInput
+              label={t("field.unit")}
+              placeholder={t("placeholder.exampleUnit")}
+              style={{ width: 80 }}
+              {...form.getInputProps(`countGridItems.${i}.unit`)}
+            />
+            <ActionIcon
+              type="button"
+              color="red"
+              variant="subtle"
+              onClick={() => form.removeListItem("countGridItems", i)}
+              disabled={form.values.countGridItems.length <= 1}
+              aria-label={t("action.removeItem")}
+            >
+              <IconTrash size={16} />
+            </ActionIcon>
+          </Group>
+        ))}
+        <Button
+          type="button"
+          variant="light"
+          size="xs"
+          leftSection={<IconPlus size={14} />}
+          onClick={() =>
+            form.insertListItem("countGridItems", cloneLast(form.values.countGridItems, listItemDefaults.countGridItem))
+          }
+        >
+          {t("action.addItem")}
+        </Button>
+      </Stack>
+    );
+  }
+
+  if (dt === "raw") {
+    return (
+      <>
+        <JsonPathTreePicker
+          json={previewJson}
+          label={t("field.jsonPath")}
+          description={t("field.jsonPathHint")}
+          placeholder={t("placeholder.jsonPath")}
+          {...form.getInputProps("rawJsonPath")}
+        />
+        <NumberInput
+          label={t("field.maxHeight")}
+          min={50}
+          max={1000}
+          step={50}
+          {...form.getInputProps("rawMaxHeight")}
+        />
+      </>
+    );
+  }
+
+  if (dt === "actionButton") {
+    return (
+      <Stack gap="sm">
+        <TextInput label={t("field.buttonLabel")} required {...form.getInputProps("buttonLabel")} />
+        <Select
+          label={t("field.buttonColor")}
+          data={MANTINE_COLORS.map((c) => ({ value: c, label: c }))}
+          {...form.getInputProps("buttonColor")}
+          allowDeselect={false}
+        />
+        <TextInput
+          label={t("field.confirmText")}
+          description={t("field.confirmTextHint")}
+          {...form.getInputProps("confirmText")}
+        />
+        <TextInput
+          label={t("field.successMessage")}
+          description={t("field.successMessageHint")}
+          {...form.getInputProps("successMessage")}
+        />
+      </Stack>
+    );
+  }
+
+  return null;
+}

apps/nextjs/src/app/[locale]/manage/custom-widgets/_display-type-fields.tsx

@@ -0,0 +1,89 @@
+import { SimpleGrid, Text, ThemeIcon, UnstyledButton } from "@mantine/core";
+import {
+  Icon123,
+  IconActivityHeartbeat,
+  IconBraces,
+  IconCode,
+  IconHash,
+  IconLayoutGrid,
+  IconListDetails,
+  IconPointer,
+  IconProgress,
+  IconTable,
+} from "@tabler/icons-react";
+import type { useScopedI18n } from "@homarr/translation/client";
+import type { CustomWidgetDisplayType } from "@homarr/custom-widgets/core";
+import { customWidgetDisplayDescriptors } from "@homarr/custom-widgets/core";
+
+import { BasicDisplayFields } from "./_display-fields-basic";
+import { CustomJsxDisplayFields } from "./_display-fields-jsx";
+import { MetricDisplayFields } from "./_display-fields-metric";
+import { StatusDisplayFields } from "./_display-fields-status";
+import type { DisplayFieldsProps } from "./_display-field-types";
+import classes from "./_custom-widget-form.module.css";
+
+export const DISPLAY_TYPE_ICONS = {
+  number: Icon123,
+  keyValue: IconListDetails,
+  table: IconTable,
+  grid: IconLayoutGrid,
+  progress: IconProgress,
+  status: IconActivityHeartbeat,
+  count: IconHash,
+  json: IconBraces,
+  action: IconPointer,
+  code: IconCode,
+} as const;
+
+export function DisplayTypePicker({
+  value,
+  onChange,
+  t,
+}: {
+  value: string;
+  onChange: (value: CustomWidgetDisplayType) => void;
+  t: ReturnType<typeof useScopedI18n<"customWidget">>;
+}) {
+  return (
+    <SimpleGrid cols={{ base: 1, xs: 2 }} spacing="sm">
+      {customWidgetDisplayDescriptors.map((descriptor) => {
+        const displayType = descriptor.type;
+        const Icon = DISPLAY_TYPE_ICONS[descriptor.icon];
+        const selected = value === displayType;
+        return (
+          <UnstyledButton
+            type="button"
+            key={displayType}
+            className={classes.displayTypeOption}
+            data-selected={selected || undefined}
+            onClick={() => onChange(displayType)}
+            aria-pressed={selected}
+          >
+            <ThemeIcon variant={selected ? "filled" : "light"} size={42} radius="md">
+              <Icon size={22} />
+            </ThemeIcon>
+            <div className={classes.displayTypeCopy}>
+              <Text fw={600} size="sm">
+                {t(`displayType.${displayType}` as never)}
+              </Text>
+              <Text size="xs" c="dimmed" lineClamp={3}>
+                {t(`displayTypeDescription.${displayType}` as never)}
+              </Text>
+            </div>
+          </UnstyledButton>
+        );
+      })}
+    </SimpleGrid>
+  );
+}
+
+export function DisplayTypeFields(props: DisplayFieldsProps) {
+  return (
+    <>
+      <BasicDisplayFields {...props} />
+      <MetricDisplayFields {...props} />
+      <StatusDisplayFields {...props} />
+      <CustomJsxDisplayFields {...props} />
+    </>
+  );
+}

apps/nextjs/src/app/[locale]/manage/custom-widgets/_preview-widget-panel.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import { useMemo } from "react";
+import { Badge, Button, Center, Code, Paper, ScrollArea, SegmentedControl, Stack, Text } from "@mantine/core";
+import { IconPlayerPlay } from "@tabler/icons-react";
+
+import { useScopedI18n } from "@homarr/translation/client";
+import { createDisplayComponents } from "@homarr/widgets/custom-api/component";
+
+interface PreviewWidgetPanelProps {
+  data: Record<string, unknown> | null;
+  displayType: string;
+  success: boolean;
+  responseInfo: { status: number; statusText: string } | null;
+  previewSize: string;
+  onPreviewSizeChange: (value: string) => void;
+}
+
+const HEIGHTS: Record<string, number> = { compact: 240, standard: 360, wide: 520 };
+
+export function PreviewWidgetPanel({
+  data,
+  displayType,
+  success,
+  responseInfo,
+  previewSize,
+  onPreviewSizeChange,
+}: PreviewWidgetPanelProps) {
+  const t = useScopedI18n("customWidget");
+  const height = HEIGHTS[previewSize] ?? HEIGHTS.standard;
+  return (
+    <Stack gap="xs">
+      <SegmentedControl
+        size="xs"
+        fullWidth
+        value={previewSize}
+        onChange={onPreviewSizeChange}
+        data={(["compact", "standard", "wide"] as const).map((value) => ({
+          value,
+          label: t(`preview.size.${value}` as never),
+        }))}
+      />
+      {data && (displayType === "actionButton" || success) ? (
+        <>
+          {success && (
+            <Badge
+              size="xs"
+              color={responseInfo ? "green" : "gray"}
+              variant="light"
+              style={{ alignSelf: "flex-start" }}
+            >
+              {responseInfo ? `${responseInfo.status} ${responseInfo.statusText}` : t("preview.response.localSample")}
+            </Badge>
+          )}
+          <Paper withBorder p="xs" h={height} style={{ overflow: "auto" }}>
+            <PreviewDisplay data={data} />
+          </Paper>
+        </>
+      ) : (
+        <Center h={height}>
+          <Stack gap={4} align="center" maw={280}>
+            <IconPlayerPlay size={22} color="var(--mantine-color-dimmed)" />
+            <Text size="sm" fw={500} ta="center">
+              {t("preview.empty.title")}
+            </Text>
+            <Text size="xs" c="dimmed" ta="center">
+              {t("preview.hint")}
+            </Text>
+          </Stack>
+        </Center>
+      )}
+    </Stack>
+  );
+}
+
+function PreviewDisplay({ data }: { data: Record<string, unknown> }) {
+  const t = useScopedI18n("customWidget");
+  const widgetT = useScopedI18n("widget.customApi");
+  const displayComponents = useMemo(() => createDisplayComponents(widgetT("openJson")), [widgetT]);
+  const dataType = data.type as string | undefined;
+  if (dataType === "actionButton") {
+    return (
+      <Center p="sm" h="100%">
+        <Button type="button" size="sm" color={(data.buttonColor as string) ?? "blue"} disabled>
+          {(data.buttonLabel as string) ?? t("preview.execute")}
+        </Button>
+      </Center>
+    );
+  }
+  const Component = dataType ? displayComponents[dataType] : undefined;
+  if (Component) return <Component data={data} />;
+  return (
+    <ScrollArea h="100%">
+      <Code block style={{ fontSize: 11 }}>
+        {JSON.stringify(data, null, 2)}
+      </Code>
+    </ScrollArea>
+  );
+}

apps/nextjs/src/app/[locale]/manage/custom-widgets/_use-custom-widget-clipboard.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import { useCallback, useEffect } from "react";
+import { Alert, Badge, Group, Stack, Text } from "@mantine/core";
+import { IconAlertTriangle } from "@tabler/icons-react";
+
+import { buildDisplayFormValues, getImportReview, parseCustomWidgetClipboard } from "@homarr/custom-widgets/core";
+import { CUSTOM_WIDGET_AUTH_SECRET_FIELDS } from "@homarr/custom-widgets/workbench";
+import { useConfirmModal } from "@homarr/modals";
+import { showSuccessNotification } from "@homarr/notifications";
+
+import type { CustomWidgetFormInstance, CustomWidgetTranslator } from "./_display-field-types";
+
+interface UseCustomWidgetClipboardOptions {
+  enabled: boolean;
+  form: CustomWidgetFormInstance;
+  t: CustomWidgetTranslator;
+  onReplace: () => void;
+}
+
+export function useCustomWidgetClipboard({ enabled, form, t, onReplace }: UseCustomWidgetClipboardOptions) {
+  const { openConfirmModal } = useConfirmModal();
+  const queueReplacement = useCallback(
+    (widget: Record<string, unknown>) => {
+      const review = getImportReview(widget);
+      if (!review) return;
+      openConfirmModal({
+        title: t("importReview.replaceTitle"),
+        children: (
+          <Stack gap="sm">
+            <Text size="sm">{t("importReview.replaceDescription", { name: review.name, origin: review.origin })}</Text>
+            <Group gap={6}>
+              {review.methods.map((method) => (
+                <Badge key={method} color={{ DELETE: "red", GET: "blue" }[method] ?? "orange"}>
+                  {method}
+                </Badge>
+              ))}
+            </Group>
+            {review.hasActions && (
+              <Alert color="yellow" icon={<IconAlertTriangle size={16} />}>
+                <Text size="sm">{t("importReview.actionWarning.description")}</Text>
+              </Alert>
+            )}
+          </Stack>
+        ),
+        labels: { confirm: t("importReview.replaceConfirm"), cancel: t("importReview.cancel") },
+        onConfirm: () => {
+          const displayType = String(widget.displayType);
+          const displayConfig = widget.displayConfig as Record<string, unknown>;
+          const authType = typeof widget.authType === "string" ? widget.authType : "none";
+          const secrets = (CUSTOM_WIDGET_AUTH_SECRET_FIELDS[authType] ?? []).map((field) => {
+            const existing = form.values.secrets.find((secret) => secret.kind === field.kind);
+            return { kind: field.kind, value: existing?.value ?? "", hasValue: existing?.hasValue ?? false };
+          });
+          form.setValues({
+            ...form.values,
+            name: String(widget.name),
+            description: typeof widget.description === "string" ? widget.description : "",
+            iconUrl: typeof widget.iconUrl === "string" ? widget.iconUrl : "",
+            url: String(widget.url),
+            authType,
+            headerName: typeof widget.headerName === "string" ? widget.headerName : "",
+            method: typeof widget.method === "string" ? widget.method : "GET",
+            requestBody: typeof widget.requestBody === "string" ? widget.requestBody : "",
+            ...buildDisplayFormValues(displayType, displayConfig),
+            secrets,
+          });
+          onReplace();
+          showSuccessNotification({ title: t("action.import"), message: t("notification.pastedForReplacement") });
+        },
+      });
+    },
+    [form, onReplace, openConfirmModal, t],
+  );
+
+  useEffect(() => {
+    if (!enabled) return;
+    const handlePaste = (event: ClipboardEvent) => {
+      const widget = parseCustomWidgetClipboard(event.clipboardData?.getData("text/plain") ?? "");
+      if (!widget) return;
+      event.preventDefault();
+      queueReplacement(widget);
+    };
+    window.addEventListener("paste", handlePaste);
+    return () => window.removeEventListener("paste", handlePaste);
+  }, [enabled, queueReplacement]);
+}

apps/nextjs/src/app/[locale]/manage/custom-widgets/_use-custom-widget-preview.ts

@@ -0,0 +1,156 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+
+import { clientApi } from "@homarr/api/client";
+import type {
+  CustomWidgetAuthType,
+  CustomWidgetDisplayType,
+  CustomWidgetMethod,
+  CustomWidgetSecretKind,
+  DisplayConfig,
+} from "@homarr/custom-widgets/core";
+import { buildDisplayConfigFromFormValues } from "@homarr/custom-widgets/core";
+import { showErrorNotification } from "@homarr/notifications";
+
+import type { CustomWidgetFormInstance, CustomWidgetTranslator } from "./_display-field-types";
+import type { PreviewFetchResult, PreviewInput } from "./_custom-widget-preview";
+
+interface UseCustomWidgetPreviewOptions {
+  form: CustomWidgetFormInstance;
+  definitionId?: string;
+  refreshSignal: number;
+  onOpenPreview: () => void;
+  t: CustomWidgetTranslator;
+}
+
+export function useCustomWidgetPreview({
+  form,
+  definitionId,
+  refreshSignal,
+  onOpenPreview,
+  t,
+}: UseCustomWidgetPreviewOptions) {
+  const previewMutation = clientApi.customWidget.preview.useMutation();
+  const liveActionsMutation = clientApi.customWidget.setPreviewLiveActions.useMutation();
+  const [json, setJson] = useState<unknown>(null);
+  const [fetchResult, setFetchResult] = useState<PreviewFetchResult | null>(null);
+  const [lastFingerprint, setLastFingerprint] = useState<string | null>(null);
+  const hasTestedRef = useRef(false);
+
+  const getInput = useCallback((): PreviewInput => {
+    const values = form.values;
+    return {
+      url: values.url,
+      method: values.method as CustomWidgetMethod,
+      authType: values.authType as CustomWidgetAuthType,
+      headerName: values.headerName || undefined,
+      requestBody: values.requestBody || undefined,
+      displayType: values.displayType as CustomWidgetDisplayType,
+      displayConfig: buildDisplayConfigFromFormValues(values) as DisplayConfig,
+      secrets: values.secrets
+        .filter((secret) => secret.value)
+        .map((secret) => ({ kind: secret.kind as CustomWidgetSecretKind, value: secret.value })),
+      definitionId,
+    };
+  }, [definitionId, form.values]);
+
+  const test = useCallback(async () => {
+    const input = getInput();
+    if (!input.url || input.method !== "GET") return;
+    onOpenPreview();
+    setLastFingerprint(JSON.stringify(input));
+    try {
+      const result = await previewMutation.mutateAsync(input);
+      hasTestedRef.current = true;
+      setFetchResult({
+        success: result.success,
+        error: result.success ? undefined : result.error,
+        responseInfo: result.responseInfo,
+        rawResponse: result.rawResponse,
+        previewSession: result.previewSession,
+      });
+      if (!result.success || !result.rawResponse) return setJson(null);
+      try {
+        setJson(JSON.parse(result.rawResponse));
+      } catch {
+        setJson(null);
+      }
+    } catch {
+      setFetchResult({ success: false, error: t("notification.previewError"), responseInfo: null, rawResponse: null });
+      setJson(null);
+    }
+  }, [getInput, onOpenPreview, previewMutation, t]);
+
+  const setLiveActions = useCallback(
+    async (enabled: boolean) => {
+      const sessionId = fetchResult?.previewSession?.id;
+      if (!sessionId) return;
+      try {
+        const previewSession = await liveActionsMutation.mutateAsync({ sessionId, enabled });
+        setFetchResult((current) => (current ? { ...current, previewSession } : current));
+      } catch {
+        showErrorNotification({
+          title: t("preview.capabilities.liveActions"),
+          message: t("notification.previewActionsError"),
+        });
+      }
+    },
+    [fetchResult?.previewSession?.id, liveActionsMutation, t],
+  );
+
+  const testRef = useRef(test);
+  testRef.current = test;
+  const getInputRef = useRef(getInput);
+  getInputRef.current = getInput;
+  const pendingRefreshRef = useRef(false);
+  useEffect(() => {
+    if (refreshSignal <= 0 || !hasTestedRef.current) return;
+    if (previewMutation.isPending) return void (pendingRefreshRef.current = true);
+    if (getInputRef.current().method === "GET") void testRef.current();
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- refreshSignal is the explicit event source
+  }, [refreshSignal]);
+  useEffect(() => {
+    if (previewMutation.isPending || !pendingRefreshRef.current) return;
+    pendingRefreshRef.current = false;
+    if (getInputRef.current().method === "GET" && hasTestedRef.current) void testRef.current();
+  }, [previewMutation.isPending]);
+
+  const input = getInput();
+  const isStale = lastFingerprint !== null && lastFingerprint !== JSON.stringify(input);
+  const insertDataPath = useCallback(
+    (path: string) => {
+      if (form.values.displayType !== "customJsx") return;
+      const template = form.values.template.trimEnd();
+      const snippet = `<Text>{${path}}</Text>`;
+      form.setFieldValue("template", template ? `${template}\n${snippet}` : snippet);
+    },
+    [form],
+  );
+  const setSampleData = useCallback((value: unknown) => {
+    setJson(value);
+    setFetchResult({ success: true, responseInfo: null, rawResponse: JSON.stringify(value, null, 2) });
+    setLastFingerprint(null);
+  }, []);
+  const reset = useCallback(() => {
+    setJson(null);
+    setFetchResult(null);
+    setLastFingerprint(null);
+  }, []);
+
+  return {
+    input,
+    getInput,
+    json,
+    fetchResult,
+    isStale,
+    test,
+    setLiveActions,
+    insertDataPath,
+    setSampleData,
+    reset,
+    isTesting: previewMutation.isPending,
+    testError: previewMutation.error,
+    isUpdatingLiveActions: liveActionsMutation.isPending,
+  };
+}

apps/nextjs/src/app/[locale]/manage/custom-widgets/edit/[id]/page.tsx

@@ -3,6 +3,7 @@ import { Container, Stack, Title } from "@mantine/core";
 
 import { api } from "@homarr/api/server";
 import { auth } from "@homarr/auth/next";
+import { buildDisplayFormValues } from "@homarr/custom-widgets/core";
 
 import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
 import { catchTrpcNotFound } from "~/errors/trpc-catch-error";
@@ -28,122 +29,6 @@ function buildInitialSecrets(authType: string, dbSecrets: Array<{ kind: string;
   return result;
 }
 
-function buildDisplayInitialValues(displayType: string, config: Record<string, unknown>) {
-  const base = {
-    displayType,
-    jsonPath: "$",
-    label: "",
-    unit: "",
-    valueSize: "lg",
-    labelPosition: "below",
-    mappings: [{ label: "", jsonPath: "$", unit: "" }],
-    kvLayout: "list",
-    kvColumns: 2,
-    tablePath: "$",
-    columns: [{ header: "", jsonPath: "$" }],
-    striped: true,
-    compact: false,
-    statGridItems: [{ label: "", jsonPath: "$", unit: "", color: "blue" }],
-    statGridColumns: 2,
-    cardStyle: "filled",
-    progressBars: [{ label: "", valuePath: "$", maxPath: "", unit: "", color: "blue" }],
-    showPercentage: true,
-    barSize: "md",
-    statusItems: [{ label: "", jsonPath: "$", goodValues: "online,true" }],
-    statusLayout: "list",
-    dotSize: "md",
-    countGridItems: [{ label: "", jsonPath: "$", unit: "" }],
-    countGridColumns: 2,
-    countValueSize: "md",
-    rawJsonPath: "$",
-    rawMaxHeight: 300,
-    buttonLabel: "Execute",
-    buttonColor: "blue",
-    confirmText: "",
-    successMessage: "",
-    template: "",
-  };
-
-  const typeOverrides: Record<string, () => Record<string, unknown>> = {
-    singleValue: () => ({
-      jsonPath: (config.jsonPath as string) ?? "$",
-      label: (config.label as string) ?? "",
-      unit: (config.unit as string) ?? "",
-      valueSize: (config.valueSize as string) ?? "lg",
-      labelPosition: (config.labelPosition as string) ?? "below",
-    }),
-    keyValue: () => ({
-      mappings: (config.mappings as Array<{ label: string; jsonPath: string; unit: string }>) ?? base.mappings,
-      kvLayout: (config.layout as string) ?? "list",
-      kvColumns: (config.columns as number) ?? 2,
-    }),
-    table: () => ({
-      tablePath: (config.tablePath as string) ?? "$",
-      columns: (config.columns as Array<{ header: string; jsonPath: string }>) ?? base.columns,
-      striped: (config.striped as boolean) ?? true,
-      compact: (config.compact as boolean) ?? false,
-    }),
-    statGrid: () => ({
-      statGridItems: (
-        (config.items as Array<{ label: string; jsonPath: string; unit: string; color?: string }>) ?? []
-      ).map((item) => ({
-        label: item.label,
-        jsonPath: item.jsonPath,
-        unit: item.unit,
-        color: item.color ?? "blue",
-      })),
-      statGridColumns: (config.columns as number) ?? 2,
-      cardStyle: (config.cardStyle as string) ?? "filled",
-    }),
-    progressBars: () => ({
-      progressBars: (
-        (config.bars as Array<{ label: string; valuePath: string; maxPath?: string; unit: string; color?: string }>) ??
-        []
-      ).map((bar) => ({
-        label: bar.label,
-        valuePath: bar.valuePath,
-        maxPath: bar.maxPath ?? "",
-        unit: bar.unit,
-        color: bar.color ?? "blue",
-      })),
-      showPercentage: (config.showPercentage as boolean) ?? true,
-      barSize: (config.barSize as string) ?? "md",
-    }),
-    statusIndicator: () => ({
-      statusItems: ((config.items as Array<{ label: string; jsonPath: string; goodValues: string[] }>) ?? []).map(
-        (item) => ({
-          label: item.label,
-          jsonPath: item.jsonPath,
-          goodValues: item.goodValues.join(", "),
-        }),
-      ),
-      statusLayout: (config.layout as string) ?? "list",
-      dotSize: (config.dotSize as string) ?? "md",
-    }),
-    countGrid: () => ({
-      countGridItems: (config.items as Array<{ label: string; jsonPath: string; unit: string }>) ?? base.countGridItems,
-      countGridColumns: (config.columns as number) ?? 2,
-      countValueSize: (config.valueSize as string) ?? "md",
-    }),
-    raw: () => ({
-      rawJsonPath: (config.jsonPath as string) ?? "$",
-      rawMaxHeight: (config.maxHeight as number) ?? 300,
-    }),
-    actionButton: () => ({
-      buttonLabel: (config.buttonLabel as string) ?? "Execute",
-      buttonColor: (config.buttonColor as string) ?? "blue",
-      confirmText: (config.confirmText as string) ?? "",
-      successMessage: (config.successMessage as string) ?? "",
-    }),
-    customJsx: () => ({
-      template: (config.template as string) ?? "",
-    }),
-  };
-
-  const overrides = typeOverrides[displayType]?.() ?? {};
-  return { ...base, ...overrides };
-}
-
 interface EditCustomWidgetPageProps {
   params: Promise<{ id: string }>;
 }
@@ -158,7 +43,7 @@ export default async function EditCustomWidgetPage(props: EditCustomWidgetPagePr
   const definition = await api.customWidget.byId({ id: params.id }).catch(catchTrpcNotFound);
 
   const displayConfig = definition.displayConfig as Record<string, unknown>;
-  const displayValues = buildDisplayInitialValues(definition.displayType, displayConfig);
+  const displayValues = buildDisplayFormValues(definition.displayType, displayConfig);
 
   return (
     <>

apps/nextjs/src/components/board/items/item-select-modal.tsx

@@ -165,7 +165,7 @@ export const ItemSelectModal = createModal<void>(({ actions }) => {
                   </Text>
                 </Group>
                 <Text lh={1.2} style={{ whiteSpace: "normal" }} size="xs" c="dimmed" lineClamp={1}>
-                  {def.description ?? def.url}
+                  {def.description ?? ""}
                 </Text>
               </Stack>
               <Box