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

package/dashboard/routes/logs/components/LogExplorerTab.tsx

@@ -88,50 +88,46 @@ export function LogExplorerTab({ initialRunId }: { initialRunId?: string }) {
     const totalPages = Math.ceil(totalItems / pageSize);
     const pipelines = pipelinesQuery.data?.items ?? [];
 
-    const handleRefetch = React.useCallback(() => logsQuery.refetch(), [logsQuery.refetch]);
+    const handleRefetch = () => logsQuery.refetch();
 
-    const handleRunIdChange = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const handleRunIdChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         setRunId(e.target.value);
         setPage(1);
-    }, []);
+    };
 
-    const handleClearRunId = React.useCallback(() => {
+    const handleClearRunId = () => {
         setRunId('');
         setPage(1);
-    }, []);
+    };
 
-    const handlePipelineChange = React.useCallback((v: string) => {
+    const handlePipelineChange = (v: string) => {
         setPipelineId(v === FILTER_VALUES.ALL ? '' : v);
         setPage(1);
-    }, []);
+    };
 
-    const handleLevelChange = React.useCallback((v: string) => {
+    const handleLevelChange = (v: string) => {
         setLevel(v === FILTER_VALUES.ALL ? '' : v);
         setPage(1);
-    }, []);
+    };
 
-    const handleStartDateChange = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const handleStartDateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         setStartDate(e.target.value);
         setPage(1);
-    }, []);
+    };
 
-    const handleEndDateChange = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const handleEndDateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         setEndDate(e.target.value);
         setPage(1);
-    }, []);
+    };
 
-    const handleSearchChange = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         setSearch(e.target.value);
         setPage(1);
-    }, []);
+    };
 
-    const handlePrevPage = React.useCallback(() => {
-        setPage(p => Math.max(1, p - 1));
-    }, []);
+    const handlePrevPage = () => setPage(p => Math.max(1, p - 1));
 
-    const handleNextPage = React.useCallback(() => {
-        setPage(p => Math.min(totalPages, p + 1));
-    }, [totalPages]);
+    const handleNextPage = () => setPage(p => Math.min(totalPages, p + 1));
 
     const handleSelectLog = React.useCallback((log: DataHubLog) => {
         setSelectedLog(log);
@@ -320,7 +316,7 @@ export function LogExplorerTab({ initialRunId }: { initialRunId?: string }) {
                     </div>
                 </CardHeader>
                 <CardContent>
-                    <div className="border rounded-lg overflow-hidden">
+                    <div className="border rounded-lg overflow-x-auto">
                         <table className="w-full text-sm" data-testid="datahub-logs-table">
                             <thead>
                                 <tr className="bg-muted">

package/dashboard/routes/logs/components/LogTableRow.tsx

@@ -19,7 +19,8 @@ export const LogTableRow = React.memo(function LogTableRow({
 }: LogTableRowProps) {
     const handleClick = React.useCallback(() => onSelect(log), [onSelect, log]);
     const handleKeyDown = React.useCallback((e: React.KeyboardEvent) => {
-        if (e.key === 'Enter') {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
             onSelect(log);
         }
     }, [onSelect, log]);
@@ -55,8 +56,8 @@ export const LogTableRow = React.memo(function LogTableRow({
                 {log.recordsProcessed != null ? (
                     <span>
                         {log.recordsProcessed}
-                        {log.recordsFailed > 0 && (
-                            <span className="text-red-600 ml-1">
+                        {(log.recordsFailed ?? 0) > 0 && (
+                            <span className="text-red-600 dark:text-red-400 ml-1">
                                 ({log.recordsFailed} failed)
                             </span>
                         )}

package/dashboard/routes/logs/components/LogsOverviewTab.tsx

@@ -22,7 +22,7 @@ import {
 } from '../../../hooks';
 import { useOptionValues } from '../../../hooks/api/use-config-options';
 import { ErrorState, LoadingState, StatCard, LoadMoreButton } from '../../../components/shared';
-import { QUERY_LIMITS, UI_DEFAULTS } from '../../../constants';
+import { QUERY_LIMITS } from '../../../constants';
 import { LevelBadge } from './LogLevelBadge';
 import type { DataHubPipeline } from '../../../types';
 
@@ -43,7 +43,7 @@ const PipelineStatCard = React.memo(function PipelineStatCard({ pipeline }: { pi
                     <span className="font-medium text-foreground">{isLoading ? '\u2014' : (stats?.total ?? 0)}</span> logs
                 </span>
                 {!isLoading && (stats?.errorsToday ?? 0) > 0 && (
-                    <span className="text-red-600">
+                    <span className="text-red-600 dark:text-red-400">
                         {stats?.errorsToday} errors today
                     </span>
                 )}
@@ -160,7 +160,7 @@ export function LogsOverviewTab() {
                     </div>
                 </CardHeader>
                 <CardContent>
-                    <div className="grid grid-cols-2 gap-4">
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                         {displayedPipelines.map((p) => (
                             <PipelineStatCard key={p.id} pipeline={p} />
                         ))}

package/dashboard/routes/logs/components/RealtimeLogTab.tsx

@@ -98,8 +98,8 @@ export function RealtimeLogTab() {
                                         {log.recordsProcessed != null && (
                                             <span>
                                                 {log.recordsProcessed} records
-                                                {log.recordsFailed > 0 && (
-                                                    <span className="text-red-600 ml-1">
+                                                {(log.recordsFailed ?? 0) > 0 && (
+                                                    <span className="text-red-600 dark:text-red-400 ml-1">
                                                         ({log.recordsFailed} failed)
                                                     </span>
                                                 )}

package/dashboard/routes/pipelines/ImportWizardPage.tsx

@@ -63,7 +63,7 @@ function ImportWizardPageContent() {
 
     const createMutation = useMutation({
         mutationFn: (config: ImportConfiguration) => {
-            const definition = importConfigToPipelineDefinition(config, resolver, loaderAdapterInfos, triggerSchemas, strategyMappings);
+            const definition = importConfigToPipelineDefinition(config, strategyMappings, resolver, loaderAdapterInfos, triggerSchemas);
             return api.mutate(createPipelineDocument, {
                 input: {
                     code: generatePipelineCode(config.name),

package/dashboard/routes/pipelines/PipelineRunsBlock.tsx

@@ -54,7 +54,7 @@ import { getErrorMessage } from '../../../shared';
 import type { RunRow } from '../../types';
 
 /**
- * Terminal run statuses — intentionally hardcoded rather than derived from backend.
+ * Terminal run statuses, intentionally hardcoded rather than derived from backend.
  * These are a fundamental system invariant: a run is either still in progress or it has
  * reached one of these four terminal states. Adding `isFinished` metadata to the GraphQL
  * `DataHubOptionValue` type would require schema + codegen changes for no practical benefit,
@@ -128,7 +128,7 @@ export function PipelineRunsBlock({ pipelineId }: { pipelineId?: string }) {
         if (!open) setSelectedRun(null);
     }, []);
 
-    const handleOnRerun = React.useCallback((id: string) => {
+    const handleRerun = React.useCallback((id: string) => {
         runPipeline.mutate(id, {
             onSuccess: () => toast.success(TOAST_PIPELINE.RUN_STARTED),
             onError: (err) => handleMutationError('start pipeline run', err),
@@ -222,7 +222,7 @@ export function PipelineRunsBlock({ pipelineId }: { pipelineId?: string }) {
                         {isPaused && (
                             <Tooltip>
                                 <TooltipTrigger asChild>
-                                    <Button variant="ghost" size="icon" className="h-7 w-7 text-amber-600" onClick={() => handleSelectRun(row.original)} aria-label="Approve gate">
+                                    <Button variant="ghost" size="icon" className="h-7 w-7 text-amber-600 dark:text-amber-400" onClick={() => handleSelectRun(row.original)} aria-label="Approve gate">
                                         <ShieldCheck className="h-3.5 w-3.5" />
                                     </Button>
                                 </TooltipTrigger>
@@ -234,7 +234,7 @@ export function PipelineRunsBlock({ pipelineId }: { pipelineId?: string }) {
                             <PermissionGuard requires={[DATAHUB_PERMISSIONS.RUN_PIPELINE]}>
                                 <Tooltip>
                                     <TooltipTrigger asChild>
-                                        <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => handleOnRerun(pipelineId)} aria-label="Re-run pipeline">
+                                        <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => handleRerun(pipelineId)} aria-label="Re-run pipeline">
                                             <Play className="h-3.5 w-3.5" />
                                         </Button>
                                     </TooltipTrigger>
@@ -260,7 +260,7 @@ export function PipelineRunsBlock({ pipelineId }: { pipelineId?: string }) {
             },
             enableSorting: false,
         },
-    ], [handleSelectRun, handleCancelRun, handleOnRerun, cancellingRunId, pipelineId]);
+    ], [handleSelectRun, handleCancelRun, handleRerun, cancellingRunId, pipelineId]);
 
     let content: React.ReactNode;
 
@@ -333,7 +333,7 @@ export function PipelineRunsBlock({ pipelineId }: { pipelineId?: string }) {
                                 runId={selectedRun.id}
                                 initialData={selectedRun}
                                 onCancel={handleCancelRun}
-                                onRerun={handleOnRerun}
+                                onRerun={handleRerun}
                                 isCancelling={cancellingRunId === selectedRun.id}
                             />
                         )}

package/dashboard/routes/pipelines/RunDetailsPanel.tsx

@@ -201,7 +201,6 @@ export function RunDetailsPanel({ runId, initialData, onCancel, onRerun, isCance
                 <div className="text-sm text-muted-foreground mb-2">Failed records captured during this run</div>
                 <PermissionGuard requires={[DATAHUB_PERMISSIONS.VIEW_QUARANTINE]}>
                     <RunErrorsList
-                        runId={runId}
                         items={errors ?? []}
                         onRetry={handleRetry}
                     />

package/dashboard/routes/pipelines/RunErrorsList.tsx

@@ -39,7 +39,7 @@ function ErrorRow({ item, onStartEditing }: ErrorRowProps) {
     );
 }
 
-export function RunErrorsList({ runId: _runId, items, onRetry }: RunErrorsListProps) {
+export function RunErrorsList({ items, onRetry }: RunErrorsListProps) {
     const [editing, setEditing] = React.useState<{ id: string; patch: string } | null>(null);
 
     const handleStartEditing = React.useCallback((itemId: string) => {
@@ -56,13 +56,15 @@ export function RunErrorsList({ runId: _runId, items, onRetry }: RunErrorsListPr
 
     const handleRetryClick = React.useCallback(async () => {
         if (!editing) return;
+        let patch: Record<string, unknown>;
         try {
-            const patch = JSON.parse(editing.patch);
-            await onRetry(editing.id, patch);
-            setEditing(null);
+            patch = JSON.parse(editing.patch);
         } catch {
             toast.error(TOAST_PIPELINE.INVALID_JSON_PATCH);
+            return;
         }
+        await onRetry(editing.id, patch);
+        setEditing(null);
     }, [editing, onRetry]);
 
     const handleCancelEditing = React.useCallback(() => {
@@ -96,9 +98,11 @@ export function RunErrorsList({ runId: _runId, items, onRetry }: RunErrorsListPr
             </table>
             {editing && (
                 <div className="border rounded p-2 space-y-2">
-                    <div className="text-sm font-medium">Patch JSON</div>
+                    <label htmlFor="retry-patch-json" className="text-sm font-medium">Patch JSON</label>
                     <textarea
-                        className="w-full h-32 font-mono p-2 border rounded"
+                        id="retry-patch-json"
+                        className="w-full h-32 font-mono p-2 border rounded bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 border-gray-300 dark:border-gray-700"
+                        aria-label="JSON patch for retry"
                         value={editing.patch}
                         onChange={handlePatchChange}
                     />

package/dashboard/routes/pipelines/StepSummaryTable.tsx

@@ -14,14 +14,13 @@ export function StepSummaryTable({ metrics }: { metrics: IndividualRunMetrics })
                         <th className="text-left px-2 py-1">Step</th>
                         <th className="text-left px-2 py-1">Type</th>
                         <th className="text-left px-2 py-1">Adapter</th>
-                        <th className="text-left px-2 py-1">Out/OK/Fail</th>
+                        <th className="text-left px-2 py-1">OK / Fail</th>
                         <th className="text-left px-2 py-1">Duration</th>
                     </tr>
                 </thead>
                 <tbody>
-                    {/* stepKey is unique within a run, safe to use as key */}
-                    {details.map((s) => (
-                        <tr key={s.stepKey} className="border-t">
+                    {details.map((s, i) => (
+                        <tr key={s.stepKey ?? `step-${i}`} className="border-t">
                             <td className="px-2 py-1 font-mono text-muted-foreground">{s.stepKey}</td>
                             <td className="px-2 py-1">{s.type}</td>
                             <td className="px-2 py-1">{s.adapterCode ?? '—'}</td>

package/dashboard/routes/pipelines/components/DryRunDialog.tsx

@@ -56,14 +56,12 @@ export function DryRunDialog({
         });
     }, [pipelineId, dryRun.mutate]);
 
-    // Run dry run when dialog opens (only once)
     React.useEffect(() => {
         if (open && pipelineId && !hasAttempted && !dryRun.isPending) {
             handleDryRun();
         }
     }, [open, pipelineId, hasAttempted, dryRun.isPending, handleDryRun]);
 
-    // Reset state when dialog closes
     React.useEffect(() => {
         if (!open) {
             dryRun.reset();
@@ -128,9 +126,8 @@ export function DryRunDialog({
                                                 <div className="border rounded-md p-3 bg-red-50 dark:bg-red-950/30 border-red-200 dark:border-red-800">
                                                     <div className="text-sm font-medium text-red-800 dark:text-red-400 mb-1">Errors</div>
                                                     <ul className="list-disc pl-5 text-sm text-red-700 dark:text-red-400">
-                                                        {/* Static display list, using content-based key */}
-                                                        {dryRunResult.notes.filter(n => n.startsWith('Error:')).map((n) => (
-                                                            <li key={`error-${n.slice(0, UI_LIMITS.TRUNCATE_LENGTH)}`}>{n.replace('Error: ', '')}</li>
+                                                        {dryRunResult.notes.filter(n => n.startsWith('Error:')).map((n, i) => (
+                                                            <li key={`error-${i}`}>{n.replace('Error: ', '')}</li>
                                                         ))}
                                                     </ul>
                                                 </div>
@@ -139,9 +136,8 @@ export function DryRunDialog({
                                                 <div className="border rounded-md p-3 bg-amber-50 dark:bg-amber-950/30 border-amber-200 dark:border-amber-800">
                                                     <div className="text-sm font-medium text-amber-800 dark:text-amber-400 mb-1">Notes</div>
                                                     <ul className="list-disc pl-5 text-sm text-amber-700 dark:text-amber-400">
-                                                        {/* Static display list, using content-based key */}
-                                                        {dryRunResult.notes.filter(n => !n.startsWith('Error:')).map((n) => (
-                                                            <li key={`note-${n.slice(0, UI_LIMITS.TRUNCATE_LENGTH)}`}>{n}</li>
+                                                        {dryRunResult.notes.filter(n => !n.startsWith('Error:')).map((n, i) => (
+                                                            <li key={`note-${i}`}>{n}</li>
                                                         ))}
                                                     </ul>
                                                 </div>
@@ -218,10 +214,10 @@ export function DryRunDialog({
 function DryRunMetricsSummary({ metrics }: Readonly<{ metrics: unknown }>) {
     const dryRunMetrics = (metrics ?? {}) as DryRunMetrics;
     const cards = [
-        { label: 'Processed', value: dryRunMetrics.recordsProcessed ?? 0, color: 'text-blue-600' },
-        { label: 'Succeeded', value: dryRunMetrics.recordsSucceeded ?? 0, color: 'text-green-600' },
-        { label: 'Failed', value: dryRunMetrics.recordsFailed ?? 0, color: 'text-red-600' },
-        { label: 'Skipped', value: dryRunMetrics.recordsSkipped ?? 0, color: 'text-amber-600' },
+        { label: 'Processed', value: dryRunMetrics.recordsProcessed ?? 0, color: 'text-blue-600 dark:text-blue-400' },
+        { label: 'Succeeded', value: dryRunMetrics.recordsSucceeded ?? 0, color: 'text-green-600 dark:text-green-400' },
+        { label: 'Failed', value: dryRunMetrics.recordsFailed ?? 0, color: 'text-red-600 dark:text-red-400' },
+        { label: 'Skipped', value: dryRunMetrics.recordsSkipped ?? 0, color: 'text-amber-600 dark:text-amber-400' },
     ];
 
     return (

package/dashboard/routes/pipelines/components/PipelineWebhookInfo.tsx

@@ -47,21 +47,22 @@ export function PipelineWebhookInfo({
     }
 
     const pipelineCode = def.code ?? 'PIPELINE_CODE';
-    const url = `${window.location.origin}${DATAHUB_API_WEBHOOK(pipelineCode)}`;
+    const origin = typeof window !== 'undefined' ? window.location.origin : '';
+    const url = `${origin}${DATAHUB_API_WEBHOOK(pipelineCode)}`;
 
     // Generate cURL for first webhook (as example)
     const firstWebhook = webhookTriggers[0];
     const curlParts = [
-        `curl -X POST '${url}' \\`,
+        `curl -X POST '${url}'`,
         `  -H 'Content-Type: application/json'`,
     ];
 
     if (firstWebhook.requiresIdk) {
-        curlParts.push(`  -H 'X-Idempotency-Key: <unique-id>' \\`);
+        curlParts.push(`  -H 'X-Idempotency-Key: <unique-id>'`);
     }
 
     if (firstWebhook.sig) {
-        curlParts.push(`  -H '${firstWebhook.headerName}: <hmac-of-body>' \\`);
+        curlParts.push(`  -H '${firstWebhook.headerName}: <hmac-of-body>'`);
     }
 
     curlParts.push(`  -d '{"records":[{"id":"123","name":"Example"}]}'`);

package/dashboard/routes/pipelines/components/ValidationPanel.tsx

@@ -46,7 +46,7 @@ export function ValidationPanel({
                     )}
                     {validation.warnings.length > 0 && (
                         <div className="mt-4">
-                            <div className="text-sm font-medium text-amber-800 mb-2">Warnings</div>
+                            <div className="text-sm font-medium text-amber-800 dark:text-amber-400 mb-2">Warnings</div>
                             {validation.warnings.map((warning) => (
                                 <ValidationIssueItem key={`warning-${warning.stepKey ?? 'global'}-${warning.field ?? 'none'}-${warning.message}`} issue={warning} variant="warning" />
                             ))}
@@ -69,7 +69,9 @@ interface ValidationIssueItemProps {
 }
 
 function ValidationIssueItem({ issue, variant = 'error' }: ValidationIssueItemProps) {
-    const bgClass = variant === 'warning' ? 'bg-amber-50 dark:bg-amber-950/30 border-amber-200 dark:border-amber-800' : '';
+    const bgClass = variant === 'warning'
+        ? 'bg-amber-50 dark:bg-amber-950/30 border-amber-200 dark:border-amber-800'
+        : 'bg-red-50 dark:bg-red-950/30 border-red-200 dark:border-red-800';
 
     return (
         <div className={`border rounded p-2 ${bgClass}`}>
@@ -102,14 +104,14 @@ export function ValidationStatusBadge({
     }
 
     if (validation.isValid === true) {
-        return <span className="text-xs px-2 py-0.5 rounded bg-emerald-100 text-emerald-800">Valid</span>;
+        return <span className="text-xs px-2 py-0.5 rounded bg-emerald-100 dark:bg-emerald-900/40 text-emerald-800 dark:text-emerald-400">Valid</span>;
     }
 
     if (validation.isValid === false) {
         return (
             <button
                 type="button"
-                className="text-xs px-2 py-0.5 rounded bg-amber-100 text-amber-800 hover:underline"
+                className="text-xs px-2 py-0.5 rounded bg-amber-100 dark:bg-amber-900/40 text-amber-800 dark:text-amber-400 hover:underline"
                 onClick={onShowIssues}
             >
                 Issues: {validation.count}

package/dashboard/routes/pipelines/components/VersionHistoryDialog.tsx

@@ -98,7 +98,7 @@ export function VersionHistoryDialog({
                                         {entry.revision.authorName && <span>by {entry.revision.authorName}</span>}
                                         {entry.runCount > 0 && <span>{entry.runCount} run{entry.runCount !== 1 ? 's' : ''}</span>}
                                         {entry.lastRunStatus && (
-                                            <span className={entry.lastRunStatus === RUN_STATUS.COMPLETED ? 'text-green-600' : entry.lastRunStatus === RUN_STATUS.FAILED ? 'text-red-600' : ''}>
+                                            <span className={entry.lastRunStatus === RUN_STATUS.COMPLETED ? 'text-green-600 dark:text-green-400' : entry.lastRunStatus === RUN_STATUS.FAILED ? 'text-red-600 dark:text-red-400' : ''}>
                                                 Last: {entry.lastRunStatus}
                                             </span>
                                         )}

package/dashboard/routes/queues/ConsumersTable.tsx

@@ -72,7 +72,7 @@ const ConsumerRow = React.memo(function ConsumerRow({
     );
 });
 
-// Consumers Table with virtualization
+// Consumers Table with load-more pagination
 export function ConsumersTable({
     consumers,
     onStop,

package/dashboard/routes/queues/FailedRunsTable.tsx

@@ -33,7 +33,7 @@ const FailedRunRow = React.memo(function FailedRunRow({
     );
 });
 
-// Failed Runs Table with virtualization
+// Failed Runs Table with load-more pagination
 export function FailedRunsTable({
     recentFailed,
     onSelectRun,

package/dashboard/routes/queues/QueuesPage.tsx

@@ -120,6 +120,8 @@ function QueuesPage() {
         }
     }, []);
 
+    const activeConsumerCount = consumers.filter(c => c.isActive).length;
+
     return (
         <Page pageId="data-hub-queues">
             <PageActionBar>
@@ -164,8 +166,8 @@ function QueuesPage() {
                         <TabsTrigger value="consumers">
                             <Radio className="w-4 h-4 mr-1" />
                             Consumers
-                            {consumers.filter(c => c.isActive).length > 0 && (
-                                <Badge variant="secondary" className="ml-2">{consumers.filter(c => c.isActive).length}</Badge>
+                            {activeConsumerCount > 0 && (
+                                <Badge variant="secondary" className="ml-2">{activeConsumerCount}</Badge>
                             )}
                         </TabsTrigger>
                     </TabsList>
@@ -173,7 +175,7 @@ function QueuesPage() {
                     <TabsContent value="overview" className="mt-4">
                         <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
                             <StatCard title="Pending" value={stats?.pending ?? 0} icon={<Clock className="w-4 h-4" />} />
-                            <StatCard title="Running" value={stats?.running ?? 0} icon={<RefreshCw className="w-4 h-4 animate-spin" />} />
+                            <StatCard title="Running" value={stats?.running ?? 0} icon={<RefreshCw className={`w-4 h-4 ${(stats?.running ?? 0) > 0 ? 'animate-spin' : ''}`} />} />
                             <StatCard title="Failed" value={stats?.failed ?? 0} icon={<XCircle className="w-4 h-4" />} variant="error" />
                             <StatCard title="Completed today" value={stats?.completedToday ?? 0} icon={<CheckCircle className="w-4 h-4" />} variant="success" />
                         </div>

package/dashboard/routes/secrets/SecretDetail.tsx

@@ -104,6 +104,12 @@ function SecretDetailPage({ route }: { route: AnyRoute }) {
         },
     });
 
+    React.useEffect(() => {
+        if (creating && !form.getValues('provider')) {
+            form.setValue('provider', SECRET_PROVIDER.INLINE, { shouldDirty: false, shouldValidate: true });
+        }
+    }, [creating, form]);
+
     React.useEffect(() => {
         if (!entity) return;
         form.reset(
@@ -170,10 +176,18 @@ function SecretDetailPage({ route }: { route: AnyRoute }) {
                             name="provider"
                             label="Provider"
                             rules={{ required: ERROR_MESSAGES.PROVIDER_REQUIRED }}
-                            render={({ field, fieldState }) => (
+                            render={({ field, fieldState }) => {
+                                // Ensure the form state has a valid provider value, not just a visual fallback.
+                                // Without this, the Select displays the correct default but the form
+                                // submits an empty string because field.value was never updated.
+                                const effectiveProvider = (field.value as string) || (entity?.provider ?? SECRET_PROVIDER.INLINE);
+                                if (field.value !== effectiveProvider) {
+                                    queueMicrotask(() => field.onChange(effectiveProvider));
+                                }
+                                return (
                                 <div>
                                     <Select
-                                        value={(field.value as string) || (entity?.provider ?? SECRET_PROVIDER.INLINE)}
+                                        value={effectiveProvider}
                                         onValueChange={field.onChange}
                                     >
                                         <SelectTrigger className={SELECT_WIDTHS.PROVIDER}>
@@ -201,7 +215,8 @@ function SecretDetailPage({ route }: { route: AnyRoute }) {
                                         </p>
                                     )}
                                 </div>
-                            )}
+                                );
+                            }}
                         />
                     </DetailFormGrid>
 

package/dashboard/routes/settings/Settings.tsx

@@ -76,9 +76,7 @@ function SettingsPage() {
         return undefined;
     };
 
-    const isFormValid = React.useMemo(() => {
-        return !errors.runsDays && !errors.errorsDays && !errors.logsDays;
-    }, [errors]);
+    const isFormValid = !errors.runsDays && !errors.errorsDays && !errors.logsDays;
 
     React.useEffect(() => {
         if (settings?.retentionDaysRuns != null) {
@@ -207,7 +205,7 @@ function SettingsPage() {
                     </CardHeader>
                     <CardContent>
                         <div className="space-y-6">
-                            <div className="grid grid-cols-2 gap-6">
+                            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                                 <div className="space-y-2">
                                     <Label htmlFor="runs-days">Pipeline Run History</Label>
                                     <Input
@@ -281,7 +279,7 @@ function SettingsPage() {
                     </CardHeader>
                     <CardContent>
                         <div className="space-y-6">
-                            <div className="grid grid-cols-2 gap-6">
+                            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                                 <div className="space-y-2">
                                     <Label htmlFor="log-level">Log Persistence Level</Label>
                                     <Select value={logLevel} onValueChange={handleLogLevelChange} disabled={isLoadingOptions}>

package/dashboard/types/ui-types.ts

@@ -71,7 +71,7 @@ export interface SchemaFormRendererProps {
 }
 
 export interface LoadingStateProps {
-    type?: 'TABLE' | 'FORM' | 'CARD' | 'LIST' | 'SPINNER';
+    type?: 'table' | 'form' | 'card' | 'list' | 'spinner';
     rows?: number;
     message?: string;
     className?: string;
@@ -226,7 +226,6 @@ export interface RunDetailsPanelProps {
 }
 
 export interface RunErrorsListProps {
-    runId: string;
     items: Array<{ id: string; stepKey: string; message: string; payload: unknown }>;
     onRetry: (errorId: string, patch: Record<string, unknown>) => Promise<void>;
 }

package/dashboard/utils/formatters.ts

@@ -5,7 +5,8 @@ export function formatValue(value: JsonValue, maxLength = 50): string {
         return '\u2014';
     }
     if (typeof value === 'object') {
-        return JSON.stringify(value);
+        const str = JSON.stringify(value);
+        return str.length > maxLength ? str.substring(0, maxLength) + '...' : str;
     }
     if (typeof value === 'boolean') {
         return value ? 'true' : 'false';
@@ -20,11 +21,12 @@ export function formatCellValue(value: JsonValue): string {
 
 export function formatKey(key: string): string {
     return key
-        .replace(/([A-Z])/g, ' $1')
-        .replace(/^./, s => s.toUpperCase())
+        .replace(/([A-Z]+)([A-Z][a-z])/g, '$1 $2')
+        .replace(/([a-z\d])([A-Z])/g, '$1 $2')
         .replace(/[_-]/g, ' ')
         .replace(/\s+/g, ' ')
-        .trim();
+        .trim()
+        .replace(/^./, s => s.toUpperCase());
 }
 
 export function formatDateTime(date: Date | string | number | null | undefined, options?: Intl.DateTimeFormatOptions): string {
@@ -40,7 +42,7 @@ export function formatDateTime(date: Date | string | number | null | undefined,
         minute: '2-digit',
     };
 
-    return dateObj.toLocaleString('en-US', options || defaultOptions);
+    return dateObj.toLocaleString(undefined, options || defaultOptions);
 }
 
 export function formatSmartDateTime(date: Date | string | number | null | undefined): string {
@@ -52,7 +54,7 @@ export function formatSmartDateTime(date: Date | string | number | null | undefi
     const isToday = dateObj.toDateString() === now.toDateString();
 
     if (isToday) {
-        return dateObj.toLocaleTimeString();
+        return dateObj.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' });
     }
     return dateObj.toLocaleString(undefined, {
         month: 'short',
@@ -82,13 +84,3 @@ export function formatFileSize(bytes: number): string {
     return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 }
 
-/**
- * Converts a camelCase field name to a human-readable label.
- * Example: 'databaseType' -> 'Database Type', 'remotePath' -> 'Remote Path'
- *
- * Delegates to {@link formatKey} which handles the same conversion plus
- * underscores, hyphens, and extra whitespace normalization.
- */
-export function formatFieldLabel(field: string): string {
-    return formatKey(field);
-}

package/dashboard/utils/icon-resolver.ts

@@ -16,8 +16,8 @@ function kebabToPascal(name: string): string {
  * to a LucideIcon component. Accepts both kebab-case and PascalCase input.
  * Returns undefined if the name is not recognized, allowing callers to provide a fallback.
  *
- * Uses lucide-react's `icons` export for fully dynamic resolution —
- * no manual map needed when new icons are used.
+ * Uses lucide-react's `icons` export for fully dynamic resolution.
+ * No manual map needed when new icons are used.
  */
 export function resolveIconName(name: string | undefined | null): LucideIcon | undefined {
     if (!name) return undefined;

package/dashboard/utils/index.ts

@@ -3,7 +3,6 @@ export {
     formatValue,
     formatCellValue,
     formatKey,
-    formatFieldLabel,
     formatDateTime,
     formatSmartDateTime,
     formatDiffValue,