@oronts/vendure-data-hub-plugin 0.1.2 → 0.1.4

package/dist/dashboard/components/pipelines/PipelineEditor.tsx

@@ -8,6 +8,7 @@ import {
     AlertTriangle,
     Zap,
     Bell,
+    Webhook,
 } from 'lucide-react';
 import { TriggersPanel } from '../shared/triggers-panel';
 import { StepConfigPanel } from '../shared/step-config';
@@ -19,9 +20,10 @@ import {
     PIPELINE_EDITOR_PANEL,
     DEFAULT_STEP_CONFIGS,
 } from '../../constants';
-import { useStepConfigs, useTriggerTypes } from '../../hooks';
+import { useStepConfigs, useTriggerTypes, useHookStages, useHookStageCategories } from '../../hooks';
 import type { MoveDirection, PipelineEditorPanel } from '../../constants';
 import { useAdapterCatalog } from '../../hooks';
+import { FALLBACK_STAGE_CATEGORIES } from '../../constants';
 import type {
     StepType,
     PipelineStepDefinition,
@@ -29,7 +31,7 @@ import type {
     PipelineEditorProps,
     JsonObject,
 } from '../../types';
-import { getCombinedTriggers, updateDefinitionWithTriggers } from '../../utils';
+import { getCombinedTriggers, updateDefinitionWithTriggers, resolveIconName } from '../../utils';
 
 const ADDABLE_STEP_TYPES = Object.keys(DEFAULT_STEP_CONFIGS).filter(
     t => t !== STEP_TYPE.ROUTE && t !== STEP_TYPE.GATE
@@ -157,10 +159,21 @@ export function PipelineEditor({ definition, onChange, issues = [] }: PipelineEd
     // Get combined triggers from both steps and triggers array
     const combinedTriggers = useMemo(() => getCombinedTriggers(definition), [definition]);
 
+    // Hook stage metadata
+    const { hookStages: backendStages } = useHookStages();
+    const { categories: backendCategories } = useHookStageCategories();
+    const stageCategories = useMemo(
+        () => backendCategories.length > 0 ? backendCategories : FALLBACK_STAGE_CATEGORIES,
+        [backendCategories],
+    );
+    const hooks = definition.hooks ?? {};
+    const hookCount = useMemo(() => Object.values(hooks).reduce((sum, arr) => sum + (Array.isArray(arr) ? arr.length : 0), 0), [hooks]);
+
     // Panel switch handlers
     const handleSwitchToSteps = useCallback(() => setActivePanel(PIPELINE_EDITOR_PANEL.STEPS), []);
     const handleSwitchToTriggers = useCallback(() => setActivePanel(PIPELINE_EDITOR_PANEL.TRIGGERS), []);
     const handleSwitchToSettings = useCallback(() => setActivePanel(PIPELINE_EDITOR_PANEL.SETTINGS), []);
+    const handleSwitchToHooks = useCallback(() => setActivePanel(PIPELINE_EDITOR_PANEL.HOOKS), []);
 
     // Settings change handler
     const handleContextChange = useCallback((context: JsonObject) => {
@@ -192,7 +205,8 @@ export function PipelineEditor({ definition, onChange, issues = [] }: PipelineEd
             ...selectedStep,
             key: updated.key,
             type: updated.type as StepType,
-            config: { ...updated.config, adapterCode: updated.adapterCode },
+            adapterCode: updated.adapterCode || selectedStep.adapterCode,
+            config: updated.config,
         });
     }, [selectedStepIndex, selectedStep, updateStep]);
 
@@ -249,6 +263,25 @@ export function PipelineEditor({ definition, onChange, issues = [] }: PipelineEd
                             <Settings className="h-3 w-3 inline mr-1" />
                             Settings
                         </button>
+                        <button
+                            type="button"
+                            role="tab"
+                            aria-selected={activePanel === PIPELINE_EDITOR_PANEL.HOOKS}
+                            aria-controls="panel-hooks"
+                            className={`flex-1 px-3 py-2 text-xs font-medium transition-colors ${
+                                activePanel === PIPELINE_EDITOR_PANEL.HOOKS
+                                    ? 'bg-primary/10 text-primary border-b-2 border-primary'
+                                    : 'text-muted-foreground hover:bg-muted'
+                            }`}
+                            onClick={handleSwitchToHooks}
+                            data-testid="datahub-editor-tab-hooks"
+                        >
+                            <Webhook className="h-3 w-3 inline mr-1" />
+                            Hooks
+                            {hookCount > 0 && (
+                                <span className="ml-1 px-1 py-0.5 text-[10px] rounded-full bg-primary/20 text-primary">{hookCount}</span>
+                            )}
+                        </button>
                     </div>
                 </div>
 
@@ -309,6 +342,58 @@ export function PipelineEditor({ definition, onChange, issues = [] }: PipelineEd
                         onChange={handleContextChange}
                     />
                 )}
+
+                {activePanel === PIPELINE_EDITOR_PANEL.HOOKS && (
+                    <div className="flex-1 overflow-auto">
+                        <div className="p-3 border-b bg-muted/50">
+                            <h3 className="font-semibold text-sm">Pipeline Hooks</h3>
+                            <p className="text-xs text-muted-foreground">
+                                {hookCount > 0 ? `${hookCount} hook${hookCount === 1 ? '' : 's'} configured (read-only)` : 'No hooks configured'}
+                            </p>
+                        </div>
+                        <div className="p-2 space-y-3">
+                            {stageCategories.map(cat => {
+                                const catStages = backendStages.filter(s => s.category === cat.key);
+                                const configuredStages = catStages.filter(s => {
+                                    const stageHooks = (hooks as Record<string, unknown[]>)[s.key];
+                                    return Array.isArray(stageHooks) && stageHooks.length > 0;
+                                });
+                                if (configuredStages.length === 0) return null;
+                                return (
+                                    <div key={cat.key}>
+                                        <div className="flex items-center gap-1.5 mb-1.5 px-1">
+                                            <span className={`text-[10px] px-1.5 py-0.5 rounded-full font-medium ${cat.color}`}>
+                                                {cat.label}
+                                            </span>
+                                        </div>
+                                        <div className="space-y-1">
+                                            {configuredStages.map(stage => {
+                                                const stageHooks = (hooks as Record<string, unknown[]>)[stage.key] ?? [];
+                                                const StageIcon = resolveIconName(stage.icon) ?? Zap;
+                                                return (
+                                                    <div key={stage.key} className="px-2 py-1.5 rounded bg-muted/50 border text-xs">
+                                                        <div className="flex items-center gap-1.5 font-medium">
+                                                            <StageIcon className="h-3 w-3 text-muted-foreground" />
+                                                            {stage.label}
+                                                            <span className="text-muted-foreground">({stageHooks.length})</span>
+                                                        </div>
+                                                    </div>
+                                                );
+                                            })}
+                                        </div>
+                                    </div>
+                                );
+                            })}
+                            {hookCount === 0 && (
+                                <div className="p-4 text-center text-muted-foreground text-xs">
+                                    <Webhook className="h-6 w-6 mx-auto mb-2 opacity-30" />
+                                    <p>No hooks configured.</p>
+                                    <p className="mt-1">Hooks are defined in code via the pipeline builder DSL.</p>
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                )}
             </div>
 
             <div className="flex-1 overflow-auto">
@@ -319,7 +404,7 @@ export function PipelineEditor({ definition, onChange, issues = [] }: PipelineEd
                                 key: selectedStep.key,
                                 type: selectedStep.type,
                                 config: selectedStep.config ?? {},
-                                adapterCode: selectedStep.config?.adapterCode as string | undefined,
+                                adapterCode: selectedStep.adapterCode ?? selectedStep.config?.adapterCode as string | undefined,
                             }}
                             onChange={handleSelectedStepChange}
                             catalog={adapters}
@@ -369,7 +454,7 @@ export function PipelineEditor({ definition, onChange, issues = [] }: PipelineEd
                             )}
                         </div>
                     </div>
-                ) : (
+                ) : activePanel === PIPELINE_EDITOR_PANEL.SETTINGS ? (
                     <div className="p-6">
                         <h3 className="font-semibold mb-4">Pipeline Settings</h3>
                         <p className="text-sm text-muted-foreground">
@@ -406,6 +491,75 @@ export function PipelineEditor({ definition, onChange, issues = [] }: PipelineEd
                             </div>
                         </div>
                     </div>
+                ) : (
+                    <div className="p-6">
+                        <div className="flex items-center gap-2 mb-4">
+                            <Webhook className="h-5 w-5 text-primary" />
+                            <h3 className="font-semibold">Pipeline Hooks</h3>
+                            <span className="text-xs text-muted-foreground">(read-only)</span>
+                        </div>
+                        <p className="text-sm text-muted-foreground mb-4">
+                            Hooks run custom code at specific points during pipeline execution.
+                            They are defined in code via the pipeline builder DSL.
+                        </p>
+                        {hookCount > 0 ? (
+                            <div className="space-y-4">
+                                {stageCategories.map(cat => {
+                                    const catStages = backendStages.filter(s => s.category === cat.key);
+                                    const configuredStages = catStages.filter(s => {
+                                        const stageHooks = (hooks as Record<string, unknown[]>)[s.key];
+                                        return Array.isArray(stageHooks) && stageHooks.length > 0;
+                                    });
+                                    if (configuredStages.length === 0) return null;
+                                    return (
+                                        <div key={cat.key}>
+                                            <div className="flex items-center gap-2 mb-2">
+                                                <span className={`text-xs px-2 py-0.5 rounded-full font-medium ${cat.color}`}>
+                                                    {cat.label}
+                                                </span>
+                                                <span className="text-xs text-muted-foreground">{cat.description}</span>
+                                            </div>
+                                            <div className="space-y-2">
+                                                {configuredStages.map(stage => {
+                                                    const stageHooks = (hooks as Record<string, Array<Record<string, unknown>>>)[stage.key] ?? [];
+                                                    const StageIcon = resolveIconName(stage.icon) ?? Zap;
+                                                    return (
+                                                        <div key={stage.key} className="p-3 rounded-lg border bg-muted/30">
+                                                            <div className="flex items-center gap-2 mb-2">
+                                                                <StageIcon className="h-4 w-4 text-primary" />
+                                                                <span className="text-sm font-medium">{stage.label}</span>
+                                                            </div>
+                                                            <p className="text-xs text-muted-foreground mb-2">{stage.description}</p>
+                                                            <div className="space-y-1">
+                                                                {stageHooks.map((hook, i) => (
+                                                                    <div key={i} className="flex items-center gap-2 text-xs px-2 py-1 rounded bg-background border">
+                                                                        <span className="px-1.5 py-0.5 rounded bg-primary/10 text-primary font-mono">
+                                                                            {String(hook.type || 'UNKNOWN')}
+                                                                        </span>
+                                                                        <span className="text-muted-foreground truncate">
+                                                                            {String(hook.name || hook.scriptName || hook.event || hook.message || '')}
+                                                                        </span>
+                                                                    </div>
+                                                                ))}
+                                                            </div>
+                                                        </div>
+                                                    );
+                                                })}
+                                            </div>
+                                        </div>
+                                    );
+                                })}
+                            </div>
+                        ) : (
+                            <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+                                <Webhook className="h-12 w-12 mb-4 opacity-20" />
+                                <p className="text-sm font-medium">No hooks configured</p>
+                                <p className="text-xs mt-1 text-center max-w-xs">
+                                    Add hooks via the pipeline builder DSL using <code className="px-1 py-0.5 bg-muted rounded text-xs">.hooks()</code>
+                                </p>
+                            </div>
+                        )}
+                    </div>
                 )}
             </div>
         </div>

package/dist/dashboard/components/pipelines/ReactFlowPipelineEditor.tsx

@@ -156,7 +156,7 @@ export function ReactFlowPipelineEditor({
                 label,
                 type: category,
                 adapterCode: nodeType,
-                config: { adapterCode: nodeType },
+                config: {},
             },
         };
 
@@ -194,7 +194,7 @@ export function ReactFlowPipelineEditor({
                     label,
                     type: category,
                     adapterCode: nodeType,
-                    config: { adapterCode: nodeType },
+                    config: {},
                 },
             };
 
@@ -487,7 +487,7 @@ function NodePaletteDynamic({ adapters, onDragStart, onAddNode }: { adapters: Ad
                 const items = adapters.filter(a => a.type === adapterType);
                 return {
                     key: category,
-                    label: config.label === 'Source' ? 'Data Sources' : `${config.label}s`,
+                    label: config.label === 'Source' ? 'Data Sources' : config.label === 'Enrich' ? 'Enrichment' : `${config.label}s`,
                     items,
                     category,
                     icon: config.icon,

package/dist/dashboard/components/pipelines/shared/NodePropertiesPanel.tsx

@@ -16,6 +16,9 @@ import { useAdapterCatalog, AdapterMetadata } from '../../../hooks';
 import { StepConfigPanel, StepConfigData, OperatorCheatSheetButton } from '../../shared/step-config';
 import { PANEL_WIDTHS, SCROLL_HEIGHTS } from '../../../constants';
 
+/** Minimum panel width (pixels) when resizing */
+const MIN_PANEL_WIDTH = parseInt(PANEL_WIDTHS.PROPERTIES_MIN, 10) || 380;
+
 export interface NodePropertiesPanelProps {
     node: Node<PipelineNodeData> | null;
     onUpdate: (node: Node<PipelineNodeData>) => void;
@@ -48,6 +51,31 @@ function NodePropertiesPanelComponent({
     const connectionCodes = externalConnectionCodes ?? hookResult.connectionCodes;
     const secretOptions = externalSecretOptions ?? hookResult.secretOptions;
 
+    // Resizable panel width
+    const defaultWidth = parseInt(panelWidth, 10) || 520;
+    const [width, setWidth] = React.useState(defaultWidth);
+    const dragging = React.useRef(false);
+
+    const onResizeStart = useCallback((e: React.MouseEvent) => {
+        e.preventDefault();
+        dragging.current = true;
+        const startX = e.clientX;
+        const startW = width;
+        const onMove = (ev: MouseEvent) => {
+            if (!dragging.current) return;
+            // Panel opens from right — dragging left increases width
+            const delta = startX - ev.clientX;
+            setWidth(Math.max(MIN_PANEL_WIDTH, Math.min(window.innerWidth * 0.9, startW + delta)));
+        };
+        const onUp = () => {
+            dragging.current = false;
+            document.removeEventListener('mousemove', onMove);
+            document.removeEventListener('mouseup', onUp);
+        };
+        document.addEventListener('mousemove', onMove);
+        document.addEventListener('mouseup', onUp);
+    }, [width]);
+
     const data = node?.data;
 
     const selectedAdapter = useMemo(
@@ -73,8 +101,8 @@ function NodePropertiesPanelComponent({
                 ...data,
                 label: updated.key,
                 type: updated.type,
-                config: { ...updated.config, adapterCode: updated.adapterCode },
-                adapterCode: updated.adapterCode,
+                config: updated.config,
+                adapterCode: updated.adapterCode || data.adapterCode,
             },
         });
     }, [node, data, onUpdate]);
@@ -85,9 +113,19 @@ function NodePropertiesPanelComponent({
     return (
         <Sheet open={!!node} onOpenChange={() => onClose()}>
             <SheetContent
-                className="overflow-y-auto p-0"
-                style={{ width: panelWidth, maxWidth: PANEL_WIDTHS.MAX_VW }}
+                side="right"
+                className="overflow-y-auto p-0 !max-w-none"
+                style={{ width: `${width}px`, maxWidth: PANEL_WIDTHS.MAX_VW }}
             >
+                {/* Resize drag handle (left edge) */}
+                <div
+                    className="absolute left-0 top-0 bottom-0 w-1.5 cursor-col-resize z-50
+                               hover:bg-primary/20 active:bg-primary/30 transition-colors"
+                    onMouseDown={onResizeStart}
+                    role="separator"
+                    aria-orientation="vertical"
+                    aria-label="Resize panel"
+                />
                 <SheetHeader className="px-4 py-3 border-b bg-muted/30">
                     <SheetTitle className="flex items-center justify-between">
                         <div className="flex items-center gap-2">

package/dist/dashboard/components/pipelines/shared/StepListItem.tsx

@@ -96,9 +96,9 @@ function StepListItemComponent({
                         {config?.label ?? step.type}
                     </Badge>
                 </div>
-                {step.config?.adapterCode && (
+                {(step.adapterCode || step.config?.adapterCode) && (
                     <p className="text-xs text-muted-foreground truncate">
-                        {String(step.config.adapterCode)}
+                        {String(step.adapterCode || step.config?.adapterCode)}
                     </p>
                 )}
             </div>

package/dist/dashboard/components/shared/CodeEditor.tsx

@@ -0,0 +1,289 @@
+import * as React from 'react';
+import { useCallback, useRef, useMemo, useState } from 'react';
+import {
+    Button,
+    Dialog,
+    DialogContent,
+    DialogHeader,
+    DialogTitle,
+} from '@vendure/dashboard';
+import { Maximize2, Minimize2, WandSparkles } from 'lucide-react';
+
+/**
+ * Lightweight JavaScript formatter. Handles indentation, brace/bracket alignment,
+ * semicolon insertion, and basic whitespace normalization without external deps.
+ */
+function formatJavaScript(code: string): string {
+    if (!code.trim()) return code;
+
+    const lines = code.split('\n');
+    let indent = 0;
+    const indentStr = '  ';
+    const result: string[] = [];
+
+    for (const rawLine of lines) {
+        let line = rawLine.trim();
+        if (!line) {
+            // Preserve blank lines (max 1 consecutive)
+            if (result.length > 0 && result[result.length - 1] !== '') {
+                result.push('');
+            }
+            continue;
+        }
+
+        // Decrease indent for closing braces/brackets/parens
+        if (/^[}\])]/.test(line)) {
+            indent = Math.max(0, indent - 1);
+        }
+
+        // Apply current indentation
+        result.push(indentStr.repeat(indent) + line);
+
+        // Increase indent for opening braces/brackets (not in strings/comments)
+        const stripped = line.replace(/\/\/.*$/, '').replace(/'[^']*'|"[^"]*"|`[^`]*`/g, '""');
+        const opens = (stripped.match(/[{(\[]/g) || []).length;
+        const closes = (stripped.match(/[})\]]/g) || []).length;
+        indent = Math.max(0, indent + opens - closes);
+    }
+
+    // Remove trailing blank lines
+    while (result.length > 0 && result[result.length - 1] === '') {
+        result.pop();
+    }
+
+    return result.join('\n');
+}
+
+export interface CodeEditorProps {
+    id: string;
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    rows: number;
+    className?: string;
+    showFormatButton?: boolean;
+}
+
+/**
+ * Code editor with line numbers, Tab key support, and synchronized scroll.
+ * Used by both SchemaFormRenderer (TextareaField) and OperatorFieldInput.
+ */
+export function CodeEditor({
+    id,
+    value,
+    onChange,
+    placeholder,
+    disabled,
+    rows,
+    className,
+    showFormatButton,
+}: CodeEditorProps) {
+    const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+    const lineCount = useMemo(() => {
+        const lines = (value || '').split('\n').length;
+        return Math.max(lines, rows);
+    }, [value, rows]);
+
+    const lineNumbers = useMemo(
+        () => Array.from({ length: lineCount }, (_, i) => i + 1),
+        [lineCount],
+    );
+
+    const handleChange = useCallback(
+        (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+            onChange(e.target.value);
+        },
+        [onChange],
+    );
+
+    const handleKeyDown = useCallback(
+        (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+            if (e.key === 'Tab') {
+                e.preventDefault();
+                const ta = e.currentTarget;
+                const start = ta.selectionStart;
+                const end = ta.selectionEnd;
+                const newValue = value.substring(0, start) + '  ' + value.substring(end);
+                onChange(newValue);
+                requestAnimationFrame(() => {
+                    ta.selectionStart = ta.selectionEnd = start + 2;
+                });
+            }
+            // Enter key: auto-indent to match current line
+            if (e.key === 'Enter') {
+                const ta = e.currentTarget;
+                const start = ta.selectionStart;
+                const lineStart = value.lastIndexOf('\n', start - 1) + 1;
+                const currentLine = value.substring(lineStart, start);
+                const match = currentLine.match(/^(\s*)/);
+                const currentIndent = match ? match[1] : '';
+
+                // Add extra indent if line ends with { or (
+                const trimmed = currentLine.trimEnd();
+                const extraIndent = /[{(\[]$/.test(trimmed) ? '  ' : '';
+
+                e.preventDefault();
+                const newValue = value.substring(0, start) + '\n' + currentIndent + extraIndent + value.substring(ta.selectionEnd);
+                onChange(newValue);
+                const newPos = start + 1 + currentIndent.length + extraIndent.length;
+                requestAnimationFrame(() => {
+                    ta.selectionStart = ta.selectionEnd = newPos;
+                });
+            }
+        },
+        [value, onChange],
+    );
+
+    const handleScroll = useCallback(() => {
+        const ta = textareaRef.current;
+        const gutter = ta?.parentElement?.querySelector('[data-gutter]') as HTMLElement | null;
+        if (ta && gutter) {
+            gutter.scrollTop = ta.scrollTop;
+        }
+    }, []);
+
+    const handleFormat = useCallback(() => {
+        onChange(formatJavaScript(value));
+    }, [value, onChange]);
+
+    return (
+        <div className={`relative rounded-md border border-input bg-background overflow-hidden focus-within:ring-1 focus-within:ring-ring ${className ?? ''}`}>
+            {showFormatButton && (
+                <div className="flex items-center justify-between px-2 py-1 bg-muted/30 border-b border-input">
+                    <span className="text-[10px] font-mono text-muted-foreground uppercase tracking-wider">JavaScript</span>
+                    <Button
+                        variant="ghost"
+                        size="sm"
+                        className="h-5 text-[10px] gap-1 px-1.5 text-muted-foreground hover:text-foreground"
+                        onClick={handleFormat}
+                        type="button"
+                        disabled={disabled}
+                    >
+                        <WandSparkles className="h-3 w-3" />
+                        Format
+                    </Button>
+                </div>
+            )}
+            <div className="flex">
+                <div
+                    data-gutter
+                    className="flex flex-col items-end pt-2 pb-2 px-2 bg-muted/50 text-muted-foreground text-xs font-mono select-none overflow-hidden border-r border-input"
+                    style={{ minWidth: '2.5rem' }}
+                    aria-hidden="true"
+                >
+                    {lineNumbers.map((n) => (
+                        <div key={n} className="leading-5 h-5">{n}</div>
+                    ))}
+                </div>
+                <textarea
+                    ref={textareaRef}
+                    id={id}
+                    value={value ?? ''}
+                    onChange={handleChange}
+                    onKeyDown={handleKeyDown}
+                    onScroll={handleScroll}
+                    placeholder={placeholder}
+                    disabled={disabled}
+                    rows={rows}
+                    spellCheck={false}
+                    className="flex-1 resize-none bg-transparent p-2 font-mono text-sm leading-5 outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
+                    style={{ tabSize: 2 }}
+                />
+            </div>
+        </div>
+    );
+}
+
+export interface CodeEditorWithExpandProps {
+    id: string;
+    label: string;
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    rows?: number;
+    description?: string;
+}
+
+/**
+ * Code editor with an Expand button that opens a fullscreen dialog.
+ * Wraps CodeEditor with expand/collapse functionality.
+ * Includes Format button for JavaScript code formatting.
+ */
+export function CodeEditorWithExpand({
+    id,
+    label,
+    value,
+    onChange,
+    placeholder,
+    disabled,
+    rows = 10,
+    description,
+}: CodeEditorWithExpandProps) {
+    const [expanded, setExpanded] = useState(false);
+
+    return (
+        <div className="space-y-1">
+            <div className="flex justify-end">
+                <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-6 text-xs gap-1"
+                    onClick={() => setExpanded(true)}
+                    type="button"
+                >
+                    <Maximize2 className="h-3 w-3" />
+                    Expand
+                </Button>
+            </div>
+
+            <CodeEditor
+                id={id}
+                value={value}
+                onChange={onChange}
+                placeholder={placeholder}
+                disabled={disabled}
+                rows={rows}
+                showFormatButton
+            />
+
+            {description && (
+                <p className="text-[11px] text-muted-foreground leading-relaxed mt-1">{description}</p>
+            )}
+
+            <Dialog open={expanded} onOpenChange={setExpanded}>
+                <DialogContent className="max-w-4xl h-[80vh] flex flex-col">
+                    <DialogHeader className="flex-row items-center justify-between pr-8">
+                        <DialogTitle className="font-mono text-sm">
+                            {label}
+                        </DialogTitle>
+                        <Button
+                            variant="ghost"
+                            size="sm"
+                            className="h-6 text-xs gap-1"
+                            onClick={() => setExpanded(false)}
+                            type="button"
+                        >
+                            <Minimize2 className="h-3 w-3" />
+                            Collapse
+                        </Button>
+                    </DialogHeader>
+                    <div className="flex-1 min-h-0">
+                        <CodeEditor
+                            id={`${id}-expanded`}
+                            value={value}
+                            onChange={onChange}
+                            placeholder={placeholder}
+                            disabled={disabled}
+                            rows={30}
+                            className="h-full"
+                            showFormatButton
+                        />
+                    </div>
+                </DialogContent>
+            </Dialog>
+        </div>
+    );
+}