@oronts/vendure-data-hub-plugin 0.1.3 → 0.1.5

package/dist/dashboard/components/shared/step-config/RouteConfigComponent.tsx

@@ -1,8 +1,19 @@
 import React, { useCallback } from 'react';
-import { Plus, Trash2, AlertTriangle } from 'lucide-react';
-import { Button, Input, Label } from '@vendure/dashboard';
+import { Plus, Trash2, AlertTriangle, ChevronDown, ChevronRight } from 'lucide-react';
+import {
+    Button,
+    Input,
+    Label,
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from '@vendure/dashboard';
 import { ROUTE_BRANCH_DEFAULTS, ERROR_MESSAGES } from '../../../constants';
 import { useStableKeys } from '../../../hooks';
+import { useComparisonOperators } from '../../../hooks/api/use-config-options';
+import type { ComparisonOperatorOption } from '../../../hooks/api/use-config-options';
 
 export interface RouteConfigComponentProps {
     readonly config: Record<string, unknown>;
@@ -10,9 +21,15 @@ export interface RouteConfigComponentProps {
     readonly showDuplicateWarning?: boolean;
 }
 
+interface BranchCondition {
+    field: string;
+    cmp: string;
+    value?: unknown;
+}
+
 interface Branch {
     name: string;
-    conditions?: unknown[];
+    when?: BranchCondition[];
 }
 
 export function RouteConfigComponent({
@@ -22,6 +39,7 @@ export function RouteConfigComponent({
 }: RouteConfigComponentProps) {
     const branches = (config.branches as Branch[]) ?? [];
     const branchKeys = useStableKeys(branches, 'branch');
+    const { operators: comparisonOperators } = useComparisonOperators();
 
     const getDuplicateBranches = React.useCallback((branchList: Branch[]) => {
         const names = branchList.map((b) => b.name.trim().toLowerCase());
@@ -50,11 +68,11 @@ export function RouteConfigComponent({
 
         onChange({
             ...config,
-            branches: [...branches, { name: newName, conditions: [] }],
+            branches: [...branches, { name: newName, when: [] }],
         });
     }, [branches, config, onChange]);
 
-    const updateBranch = useCallback((index: number, patch: Record<string, unknown>) => {
+    const updateBranch = useCallback((index: number, patch: Partial<Branch>) => {
         const newBranches = [...branches];
         newBranches[index] = { ...newBranches[index], ...patch };
         onChange({ ...config, branches: newBranches });
@@ -78,41 +96,28 @@ export function RouteConfigComponent({
                 </Button>
             </div>
 
-                        {showDuplicateWarning && hasDuplicates && (
+            {showDuplicateWarning && hasDuplicates && (
                 <div className="p-3 bg-amber-50 dark:bg-amber-950/30 border border-amber-200 dark:border-amber-800 rounded-md">
                     <div className="flex items-center gap-2 text-amber-800 dark:text-amber-400">
                         <AlertTriangle className="h-4 w-4" />
                         <span className="text-sm font-medium">Duplicate branch names detected</span>
                     </div>
-                    <p className="text-xs text-amber-700 mt-1">
+                    <p className="text-xs text-amber-700 dark:text-amber-500 mt-1">
                         {ERROR_MESSAGES.DUPLICATE_BRANCH_NAMES}. Duplicate: {Array.from(duplicates).join(', ')}
                     </p>
                 </div>
             )}
 
             {branches.map((branch, i) => (
-                <div key={branchKeys[i]} className="flex items-center gap-2 p-2 border rounded">
-                    <div className="flex-1">
-                        <Input
-                            value={branch.name}
-                            onChange={(e) => updateBranch(i, { name: e.target.value })}
-                            placeholder="Branch name"
-                            className={isBranchDuplicate(branch.name) ? 'border-amber-300 focus:border-amber-500' : ''}
-                        />
-                                                {!branch.name.trim() && (
-                            <p className="text-xs text-destructive mt-1">{ERROR_MESSAGES.BRANCH_NAME_EMPTY}</p>
-                        )}
-                    </div>
-                    <Button
-                        variant="ghost"
-                        size="sm"
-                        onClick={() => removeBranch(i)}
-                        className="text-destructive"
-                        aria-label={`Remove branch ${branch.name || i + 1}`}
-                    >
-                        <Trash2 className="h-4 w-4" />
-                    </Button>
-                </div>
+                <BranchEditor
+                    key={branchKeys[i]}
+                    branch={branch}
+                    isDuplicate={isBranchDuplicate(branch.name)}
+                    comparisonOperators={comparisonOperators}
+                    onUpdate={(patch) => updateBranch(i, patch)}
+                    onRemove={() => removeBranch(i)}
+                    index={i}
+                />
             ))}
 
             {branches.length === 0 && (
@@ -123,3 +128,187 @@ export function RouteConfigComponent({
         </div>
     );
 }
+
+interface BranchEditorProps {
+    branch: Branch;
+    isDuplicate: boolean;
+    comparisonOperators: ComparisonOperatorOption[];
+    onUpdate: (patch: Partial<Branch>) => void;
+    onRemove: () => void;
+    index: number;
+}
+
+function BranchEditor({
+    branch,
+    isDuplicate,
+    comparisonOperators,
+    onUpdate,
+    onRemove,
+    index,
+}: BranchEditorProps) {
+    const conditions = branch.when ?? [];
+    const [expanded, setExpanded] = React.useState(conditions.length > 0);
+
+    const addCondition = useCallback(() => {
+        const newConditions: BranchCondition[] = [...conditions, { field: '', cmp: 'eq', value: '' }];
+        onUpdate({ when: newConditions });
+        setExpanded(true);
+    }, [conditions, onUpdate]);
+
+    const updateCondition = useCallback((condIndex: number, patch: Partial<BranchCondition>) => {
+        const newConditions = [...conditions];
+        newConditions[condIndex] = { ...newConditions[condIndex], ...patch };
+        onUpdate({ when: newConditions });
+    }, [conditions, onUpdate]);
+
+    const removeCondition = useCallback((condIndex: number) => {
+        onUpdate({ when: conditions.filter((_, i) => i !== condIndex) });
+    }, [conditions, onUpdate]);
+
+    return (
+        <div className="border rounded-md overflow-hidden">
+            {/* Branch header: name + delete */}
+            <div className="flex items-center gap-2 p-2 bg-muted/30">
+                <button
+                    type="button"
+                    className="flex items-center text-muted-foreground hover:text-foreground transition-colors"
+                    onClick={() => setExpanded(!expanded)}
+                    aria-label={expanded ? 'Collapse conditions' : 'Expand conditions'}
+                >
+                    {expanded ? <ChevronDown className="h-3.5 w-3.5" /> : <ChevronRight className="h-3.5 w-3.5" />}
+                </button>
+                <div className="flex-1">
+                    <Input
+                        value={branch.name}
+                        onChange={(e) => onUpdate({ name: e.target.value })}
+                        placeholder="Branch name"
+                        className={`h-8 ${isDuplicate ? 'border-amber-300 focus:border-amber-500' : ''}`}
+                    />
+                    {!branch.name.trim() && (
+                        <p className="text-xs text-destructive mt-1">{ERROR_MESSAGES.BRANCH_NAME_EMPTY}</p>
+                    )}
+                </div>
+                <span className="text-xs text-muted-foreground tabular-nums whitespace-nowrap">
+                    {conditions.length === 0 ? 'catch-all' : `${conditions.length} rule${conditions.length !== 1 ? 's' : ''}`}
+                </span>
+                <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={onRemove}
+                    className="text-destructive h-8 w-8 p-0"
+                    aria-label={`Remove branch ${branch.name || index + 1}`}
+                >
+                    <Trash2 className="h-4 w-4" />
+                </Button>
+            </div>
+
+            {/* Conditions section */}
+            {expanded && (
+                <div className="p-2 space-y-2 border-t">
+                    {conditions.length === 0 ? (
+                        <p className="text-xs text-muted-foreground italic py-1">
+                            All records (catch-all) -- add conditions to filter records into this branch
+                        </p>
+                    ) : (
+                        <>
+                            <p className="text-xs text-muted-foreground font-medium">
+                                Conditions (all must match):
+                            </p>
+                            {conditions.map((cond, ci) => (
+                                <ConditionRow
+                                    key={ci}
+                                    condition={cond}
+                                    comparisonOperators={comparisonOperators}
+                                    onUpdate={(patch) => updateCondition(ci, patch)}
+                                    onRemove={() => removeCondition(ci)}
+                                />
+                            ))}
+                        </>
+                    )}
+                    <Button variant="outline" size="sm" className="h-7 text-xs" onClick={addCondition}>
+                        <Plus className="h-3 w-3 mr-1" />
+                        Add Condition
+                    </Button>
+                </div>
+            )}
+        </div>
+    );
+}
+
+interface ConditionRowProps {
+    condition: BranchCondition;
+    comparisonOperators: ComparisonOperatorOption[];
+    onUpdate: (patch: Partial<BranchCondition>) => void;
+    onRemove: () => void;
+}
+
+function ConditionRow({ condition, comparisonOperators, onUpdate, onRemove }: ConditionRowProps) {
+    const operatorDef = comparisonOperators.find((op) => op.value === condition.cmp);
+    const showValueInput = !operatorDef?.noValue;
+
+    return (
+        <div className="flex items-center gap-1.5">
+            {/* Field path */}
+            <Input
+                value={condition.field}
+                onChange={(e) => onUpdate({ field: e.target.value })}
+                placeholder="field.path"
+                className="flex-1 h-7 text-xs font-mono"
+            />
+
+            {/* Comparison operator */}
+            <Select value={condition.cmp} onValueChange={(v) => onUpdate({ cmp: v })}>
+                <SelectTrigger className="w-[120px] h-7 text-xs">
+                    <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                    {comparisonOperators.map((op) => (
+                        <SelectItem key={op.value} value={op.value}>
+                            {op.label}
+                        </SelectItem>
+                    ))}
+                </SelectContent>
+            </Select>
+
+            {/* Value */}
+            {showValueInput && (
+                <Input
+                    value={formatConditionValue(condition.value)}
+                    onChange={(e) => onUpdate({ value: parseConditionValue(e.target.value) })}
+                    placeholder="value"
+                    className="flex-1 h-7 text-xs"
+                />
+            )}
+
+            {/* Remove */}
+            <Button
+                variant="ghost"
+                size="sm"
+                className="h-7 w-7 p-0 shrink-0"
+                onClick={onRemove}
+                aria-label="Remove condition"
+            >
+                <Trash2 className="h-3 w-3 text-destructive" />
+            </Button>
+        </div>
+    );
+}
+
+function formatConditionValue(value: unknown): string {
+    if (value === null) return 'null';
+    if (value === undefined) return '';
+    if (typeof value === 'boolean') return String(value);
+    if (typeof value === 'number') return String(value);
+    return String(value);
+}
+
+function parseConditionValue(raw: string): unknown {
+    const trimmed = raw.trim();
+    if (trimmed === 'null') return null;
+    if (trimmed === 'true') return true;
+    if (trimmed === 'false') return false;
+    if (trimmed !== '' && !isNaN(Number(trimmed)) && trimmed === String(Number(trimmed))) {
+        return Number(trimmed);
+    }
+    return raw;
+}

package/dist/dashboard/components/shared/step-config/StepConfigPanel.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useMemo, useCallback } from 'react';
+import { useMemo, useCallback, useEffect } from 'react';
 import {
     Button,
     Input,
@@ -158,9 +158,11 @@ export function StepConfigPanel({
         [stepType, data.config?.operators]
     );
 
+    const hasSpecialConfigEditor = stepType in SPECIAL_CONFIG_EDITORS;
+
     const needsAdapterSelection = useMemo(
-        () => !adapterCode && !hasMultiOperatorConfig && stepType !== STEP_TYPE.TRIGGER,
-        [adapterCode, hasMultiOperatorConfig, stepType]
+        () => !adapterCode && !hasMultiOperatorConfig && stepType !== STEP_TYPE.TRIGGER && !hasSpecialConfigEditor,
+        [adapterCode, hasMultiOperatorConfig, stepType, hasSpecialConfigEditor]
     );
 
     const dynamicFields = React.useMemo<AdapterSchemaField[]>(
@@ -194,7 +196,6 @@ export function StepConfigPanel({
         onChange({
             ...data,
             adapterCode: code,
-            config: { ...data.config, adapterCode: code },
         });
     }, [onChange, data]);
 
@@ -210,11 +211,24 @@ export function StepConfigPanel({
     }, [updateKey]);
 
     const handleAdapterCodeChange = useCallback((code: string) => {
-        if (code !== adapterCode) {
+        if (code && code !== adapterCode) {
             updateAdapterCode(code);
         }
     }, [adapterCode, updateAdapterCode]);
 
+    // Auto-select the sole adapter for step types with a special config editor
+    // (e.g., ROUTE has exactly one ROUTER adapter: "condition"). This prevents
+    // the user from having to manually pick the only available adapter.
+    useEffect(() => {
+        if (
+            stepType in SPECIAL_CONFIG_EDITORS &&
+            !adapterCode &&
+            availableAdapters.length === 1
+        ) {
+            handleAdapterCodeChange(availableAdapters[0].code);
+        }
+    }, [stepType, adapterCode, availableAdapters, handleAdapterCodeChange]);
+
     const handleResetDefaults = useCallback(() => {
         const defaults: Record<string, unknown> = {};
         for (const f of dynamicFields) {
@@ -226,7 +240,7 @@ export function StepConfigPanel({
     }, [dynamicFields, updateConfigBatch]);
 
     const handleTriggerChange = useCallback((trigger: PipelineTrigger) => {
-        updateConfigBatch({
+        const batch: Record<string, unknown> = {
             type: trigger.type,
             enabled: trigger.enabled,
             cron: trigger.cron,
@@ -234,9 +248,12 @@ export function StepConfigPanel({
             webhookCode: trigger.webhookCode,
             authentication: trigger.authentication,
             secretCode: trigger.secretCode,
-            event: trigger.eventType,
-            eventType: trigger.eventType,
-        });
+            event: trigger.event,
+        };
+        // Preserve nested config objects (message, fileWatch) for complex triggers
+        if (trigger.message) batch.message = trigger.message;
+        if (trigger.fileWatch) batch.fileWatch = trigger.fileWatch;
+        updateConfigBatch(batch);
     }, [updateConfigBatch]);
 
     const triggerValue = useMemo(() => ({
@@ -247,8 +264,10 @@ export function StepConfigPanel({
         webhookCode: data.config?.webhookCode as string,
         authentication: data.config?.authentication as PipelineTrigger['authentication'],
         secretCode: data.config?.secretCode as string,
-        eventType: (data.config?.event as string) || (data.config?.eventType as string),
-    }), [data.config?.type, data.config?.enabled, data.config?.cron, data.config?.timezone, data.config?.webhookCode, data.config?.authentication, data.config?.secretCode, data.config?.event, data.config?.eventType]);
+        event: data.config?.event as string,
+        message: data.config?.message as Record<string, unknown> | undefined,
+        fileWatch: data.config?.fileWatch as Record<string, unknown> | undefined,
+    }), [data.config?.type, data.config?.enabled, data.config?.cron, data.config?.timezone, data.config?.webhookCode, data.config?.authentication, data.config?.secretCode, data.config?.event, data.config?.message, data.config?.fileWatch]);
 
     const renderHeader = () => {
         if (!showHeader) return null;
@@ -339,6 +358,7 @@ export function StepConfigPanel({
                 trigger={triggerValue}
                 onChange={handleTriggerChange}
                 compact={compact}
+                secretCodes={secretOptions.map(s => s.code)}
             />
         );
     };
@@ -363,9 +383,9 @@ export function StepConfigPanel({
             );
         }
 
-        // Steps with built-in config editors don't need the adapter selector empty state
+        // Steps with built-in config editors handle their own source/type selection
         const hasBuiltInConfig = stepType in SPECIAL_CONFIG_EDITORS;
-        if (hasBuiltInConfig && availableAdapters.length === 0) return null;
+        if (hasBuiltInConfig) return null;
 
         return (
             <div className={compact ? 'space-y-2' : 'space-y-3'}>
@@ -404,16 +424,16 @@ export function StepConfigPanel({
                 )}
 
                 {selectedAdapter && (
-                    <div className="flex items-center gap-2 p-2 bg-muted/50 rounded border">
+                    <div className="flex items-start gap-2 p-2 bg-muted/50 rounded border">
                         <div
-                            className="w-7 h-7 rounded flex items-center justify-center text-white shrink-0"
+                            className="w-7 h-7 rounded flex items-center justify-center text-white shrink-0 mt-0.5"
                             style={{ backgroundColor: selectedAdapter.color }}
                         >
                             <selectedAdapter.icon className="w-3.5 h-3.5" />
                         </div>
-                        <div className="min-w-0">
+                        <div className="min-w-0 flex-1">
                             <div className="font-medium text-sm truncate">{selectedAdapter.name}</div>
-                            <div className="text-xs text-muted-foreground truncate">
+                            <div className="text-xs text-muted-foreground line-clamp-2">
                                 {selectedAdapter.description}
                             </div>
                         </div>

package/dist/dashboard/components/shared/step-config/ValidateConfigComponent.tsx

@@ -76,8 +76,8 @@ export function ValidateConfigComponent({
     const ruleTypes = ruleTypeSchemas;
     const { options: validationModes } = useOptionValues('validationModes');
     const errorHandlingOptions = validationModes;
-    const errorHandlingMode = (config.errorHandlingMode as string) || 'FAIL_FAST';
-    const validationMode = (config.validationMode as string) || 'STRICT';
+    const errorHandlingMode = (config.errorHandlingMode as string) || '';
+    const validationMode = (config.validationMode as string) || '';
     const rawRules = (config.rules as ValidationRule[]) || [];
     const stableIds = useStableIndexIds(rawRules, 'validation-rule');
     const rules = useMemo<ValidationRuleWithId[]>(() =>

package/dist/dashboard/constants/ui-dimensions.ts

@@ -93,7 +93,8 @@ export const SKELETON_WIDTHS = [80, 120, 100, 140] as const;
  * Panel widths for drawers and side panels
  */
 export const PANEL_WIDTHS = {
-    PROPERTIES_DEFAULT: '420px',
+    PROPERTIES_DEFAULT: '520px',
+    PROPERTIES_MIN: '380px',
     NODE_PALETTE: 'w-[260px]',
     MAX_VW: '90vw',
 } as const;

package/dist/dashboard/constants/ui-states.ts

@@ -7,6 +7,7 @@ export const PIPELINE_EDITOR_PANEL = {
     STEPS: 'steps',
     TRIGGERS: 'triggers',
     SETTINGS: 'settings',
+    HOOKS: 'hooks',
 } as const;
 export type PipelineEditorPanel = typeof PIPELINE_EDITOR_PANEL[keyof typeof PIPELINE_EDITOR_PANEL];
 

package/dist/dashboard/gql/graphql.ts

@@ -2673,9 +2673,13 @@ export type DataHubPipelineRun = Node & {
   __typename?: 'DataHubPipelineRun';
   /** Checkpoint data for resumable pipelines: { lastProcessedId, cursor, state } */
   checkpoint?: Maybe<Scalars['JSON']['output']>;
+  /** Alias for finishedAt — when the run reached a terminal state */
+  completedAt?: Maybe<Scalars['DateTime']['output']>;
   createdAt: Scalars['DateTime']['output'];
   /** Error message if run failed */
   error?: Maybe<Scalars['String']['output']>;
+  /** Alias for error — error message if the run failed */
+  errorMessage?: Maybe<Scalars['String']['output']>;
   finishedAt?: Maybe<Scalars['DateTime']['output']>;
   id: Scalars['ID']['output'];
   /** Execution metrics: { recordsProcessed, recordsFailed, stepMetrics, duration, etc. } */
@@ -2693,8 +2697,10 @@ export type DataHubPipelineRun = Node & {
 export type DataHubPipelineRunFilterParameter = {
   _and?: InputMaybe<Array<DataHubPipelineRunFilterParameter>>;
   _or?: InputMaybe<Array<DataHubPipelineRunFilterParameter>>;
+  completedAt?: InputMaybe<DateOperators>;
   createdAt?: InputMaybe<DateOperators>;
   error?: InputMaybe<StringOperators>;
+  errorMessage?: InputMaybe<StringOperators>;
   finishedAt?: InputMaybe<DateOperators>;
   id?: InputMaybe<IdOperators>;
   startedAt?: InputMaybe<DateOperators>;
@@ -2724,8 +2730,10 @@ export type DataHubPipelineRunListOptions = {
 };
 
 export type DataHubPipelineRunSortParameter = {
+  completedAt?: InputMaybe<SortOrder>;
   createdAt?: InputMaybe<SortOrder>;
   error?: InputMaybe<SortOrder>;
+  errorMessage?: InputMaybe<SortOrder>;
   finishedAt?: InputMaybe<SortOrder>;
   id?: InputMaybe<SortOrder>;
   startedAt?: InputMaybe<SortOrder>;
@@ -5280,7 +5288,11 @@ export type Mutation = {
   settleRefund: SettleRefundResult;
   /** Simulate load step - checks what would be created/updated without writing */
   simulateDataHubLoad: Scalars['JSON']['output'];
-  /** Simulate transform step - applies transforms to input records */
+  /**
+   * Simulate transform step - applies transforms to input records.
+   * The step argument expects a JSON object with shape:
+   * { config: { operators: [{ op: string, args: Record<string, any> }] } }
+   */
   simulateDataHubTransform: Array<Scalars['JSON']['output']>;
   /** Simulate validate step - runs validation rules on input records */
   simulateDataHubValidate: DataHubValidateResult;

package/dist/dashboard/hooks/use-adapter-catalog.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import {
-    GitBranch,
     Settings,
     type LucideIcon,
 } from 'lucide-react';
@@ -143,24 +142,6 @@ function buildAdapterMetadata(adapter: {
     };
 }
 
-const CORE_ADAPTERS: AdapterMetadata[] = [
-    {
-        code: 'condition',
-        type: 'ROUTER',
-        name: 'Condition',
-        description: 'Route records based on conditions',
-        icon: GitBranch,
-        color: '#f97316',
-        category: UI_ADAPTER_CATEGORY.ROUTING,
-        nodeType: 'condition',
-        schema: {
-            fields: [
-                { key: 'expression', label: 'Condition Expression', type: 'text', required: true, description: 'JavaScript expression to evaluate (e.g., price > 100)' },
-            ],
-        },
-    },
-];
-
 interface UseAdapterCatalogResult {
     catalog: AdapterCatalog;
     adapters: AdapterMetadata[];
@@ -178,19 +159,10 @@ export function useAdapterCatalog(): UseAdapterCatalogResult {
     const { data: connectionCodesData } = useConnectionCodes();
     const { data: secretsData } = useSecrets({ take: QUERY_LIMITS.SECRETS_LIST });
 
-    const adapters: AdapterMetadata[] = React.useMemo(() => {
-        const rawAdapters = adaptersData ?? [];
-        const mapped = rawAdapters.map(buildAdapterMetadata);
-
-        const codes = new Set(mapped.map(a => a.code));
-        for (const core of CORE_ADAPTERS) {
-            if (!codes.has(core.code)) {
-                mapped.push(core);
-            }
-        }
-
-        return mapped;
-    }, [adaptersData]);
+    const adapters: AdapterMetadata[] = React.useMemo(
+        () => (adaptersData ?? []).map(buildAdapterMetadata),
+        [adaptersData],
+    );
 
     const catalog: AdapterCatalog = React.useMemo(() => {
         const sources = adapters.filter(a => a.category === UI_ADAPTER_CATEGORY.SOURCES);

package/dist/dashboard/routes/connections/ConnectionDetail.tsx

@@ -24,7 +24,13 @@ import {
 
 export const connectionDetail: DashboardRouteDefinition = {
     path: `${ROUTES.CONNECTIONS}/$id`,
-    loader: detailPageRouteLoader({ queryDocument: connectionDetailDocument, breadcrumb: (isNew, entity) => ['Data Hub', 'Connections', isNew ? 'New connection' : (entity?.code ?? '')] }),
+    loader: detailPageRouteLoader({
+        queryDocument: connectionDetailDocument,
+        breadcrumb: (isNew, entity) => [
+            { path: ROUTES.CONNECTIONS, label: 'Connections' },
+            isNew ? 'New connection' : (entity?.code ?? ''),
+        ],
+    }),
     component: route => (
         <PermissionGuard requires={[DATAHUB_PERMISSIONS.MANAGE_CONNECTIONS]}>
             <ConnectionDetailPage route={route} />

package/dist/dashboard/routes/pipelines/RunDetailsPanel.tsx

@@ -174,7 +174,7 @@ export function RunDetailsPanel({ runId, initialData, onCancel, onRerun, isCance
             </div>
             <div className="text-sm">
                 <div className="text-sm font-medium mb-1">Finished</div>
-                <div>{formatDateTime(run?.finishedAt ?? initialData.finishedAt)}</div>
+                <div>{(run?.finishedAt ?? initialData.finishedAt) ? formatDateTime(run?.finishedAt ?? initialData.finishedAt) : '—'}</div>
             </div>
 
             {run?.error && (

package/dist/dashboard/routes/pipelines/components/PipelineActionButtons.tsx

@@ -134,11 +134,11 @@ export function PipelineActionButtons({
     const canPublish = status === PIPELINE_STATUS.DRAFT || status === PIPELINE_STATUS.REVIEW;
 
     return (
-        <div className="flex items-center gap-2">
+        <div className="flex flex-wrap items-center gap-2">
             <PipelineImportDialog onImport={onImport} />
             <PipelineExportDialog definition={definition} />
 
-            <div className="mx-1 h-6 w-px bg-border" />
+            <div className="mx-1 hidden sm:block h-6 w-px bg-border" />
 
             <PermissionGuard requires={[DATAHUB_PERMISSIONS.RUN_PIPELINE]}>
                 <Button
@@ -168,7 +168,7 @@ export function PipelineActionButtons({
                 </Button>
             </PermissionGuard>
 
-            <div className="mx-1 h-6 w-px bg-border" />
+            <div className="mx-1 hidden sm:block h-6 w-px bg-border" />
 
             <Button
                 variant="ghost"

package/dist/dashboard/routes/pipelines/utils/pipeline-conversion.ts

@@ -148,7 +148,7 @@ export function toVisualDefinition(
     const nodes: PipelineNode[] = steps.map((step, i) => {
         const id = String(step.key ?? `step-${i}`);
         const category = mapStepTypeToCategory(step.type);
-        const adapterCode = step.config?.adapterCode;
+        const adapterCode = step.adapterCode ?? step.config?.adapterCode;
         const label = step.name || step.key || `Step ${i + 1}`;
 
         return {
@@ -220,10 +220,8 @@ export function toCanonicalDefinition(
                 key: node.id ?? `step-${idx}`,
                 type: stepType,
                 name: node.data?.label,
-                config: {
-                    ...restConfig,
-                    adapterCode,
-                },
+                adapterCode: adapterCode || undefined,
+                config: restConfig,
             };
         });
 

package/dist/dashboard/utils/formatters.ts

@@ -27,9 +27,10 @@ export function formatKey(key: string): string {
         .trim();
 }
 
-export function formatDateTime(date: Date | string | number, options?: Intl.DateTimeFormatOptions): string {
+export function formatDateTime(date: Date | string | number | null | undefined, options?: Intl.DateTimeFormatOptions): string {
+    if (date == null || date === '') return '\u2014';
     const dateObj = date instanceof Date ? date : new Date(date);
-    if (isNaN(dateObj.getTime())) return '\u2014';
+    if (isNaN(dateObj.getTime()) || dateObj.getFullYear() < 2000) return '\u2014';
 
     const defaultOptions: Intl.DateTimeFormatOptions = {
         year: 'numeric',
@@ -42,9 +43,10 @@ export function formatDateTime(date: Date | string | number, options?: Intl.Date
     return dateObj.toLocaleString('en-US', options || defaultOptions);
 }
 
-export function formatSmartDateTime(date: Date | string | number): string {
+export function formatSmartDateTime(date: Date | string | number | null | undefined): string {
+    if (date == null || date === '') return '\u2014';
     const dateObj = date instanceof Date ? date : new Date(date);
-    if (isNaN(dateObj.getTime())) return '\u2014';
+    if (isNaN(dateObj.getTime()) || dateObj.getFullYear() < 2000) return '\u2014';
 
     const now = new Date();
     const isToday = dateObj.toDateString() === now.toDateString();