fix: use @gocodealone/workflow-ui@0.2.0 from registry, fix trace type mismatches and ESLint (#267)

* Initial plan

* fix: use @gocodealone/workflow-ui@0.2.0 from registry, fix trace types and ESLint

Co-authored-by: intel352 <77607+intel352@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: intel352 <77607+intel352@users.noreply.github.com>

Author: Copilot

ui/package-lock.json

@@ -14,7 +14,7 @@
     "test:e2e:execution": "npx playwright test --config playwright-e2e.config.ts"
   },
   "dependencies": {
-    "@gocodealone/workflow-ui": "file:../../workflow-ui",
+    "@gocodealone/workflow-ui": "^0.2.0",
     "@types/dagre": "^0.7.53",
     "@xyflow/react": "^12.10.0",
     "dagre": "^0.8.5",

ui/package.json

@@ -1,6 +1,7 @@
 import { describe, it, expect, beforeEach, vi } from 'vitest';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import TraceView, { toTraceStep, toLogEntry } from './TraceView.tsx';
+import TraceView from './TraceView.tsx';
+import { toTraceStep, toLogEntry } from './traceUtils.ts';
 import useObservabilityStore from '../../store/observabilityStore.ts';
 import type { TraceStep } from '@gocodealone/workflow-ui/trace';
 
@@ -159,7 +160,7 @@ describe('TraceView', () => {
   it('handleStepClick selects a step on first click (via TraceCanvas)', async () => {
     // Make configToNodes return non-empty nodes so TraceCanvas renders
     vi.mocked(configToNodes).mockReturnValue({
-      nodes: [{ id: 'n1', type: 'default', position: { x: 0, y: 0 }, data: {} }],
+      nodes: [{ id: 'n1', type: 'default', position: { x: 0, y: 0 }, data: { moduleType: '', label: '', config: {} } }],
       edges: [],
     });
 
@@ -177,7 +178,7 @@ describe('TraceView', () => {
 
   it('handleStepClick toggles: clicking same step twice deselects it (via TraceCanvas)', async () => {
     vi.mocked(configToNodes).mockReturnValue({
-      nodes: [{ id: 'n1', type: 'default', position: { x: 0, y: 0 }, data: {} }],
+      nodes: [{ id: 'n1', type: 'default', position: { x: 0, y: 0 }, data: { moduleType: '', label: '', config: {} } }],
       edges: [],
     });
 
@@ -288,7 +289,6 @@ describe('toTraceStep', () => {
     expect(result.status).toBe('completed');
     expect(result.sequenceNum).toBe(3);
     expect(result.durationMs).toBe(120);
-    expect(result.startedAt).toBe('2026-01-01T00:00:00Z');
     expect(result.inputData).toEqual({ key: 'value' });
     expect(result.outputData).toEqual({ result: 42 });
   });
@@ -306,7 +306,6 @@ describe('toTraceStep', () => {
     const result = toTraceStep(step);
 
     expect(result.durationMs).toBeUndefined();
-    expect(result.startedAt).toBeUndefined();
     expect(result.inputData).toBeUndefined();
     expect(result.outputData).toBeUndefined();
     expect(result.errorMessage).toBeUndefined();
@@ -330,7 +329,7 @@ describe('toLogEntry', () => {
 
     const result = toLogEntry(log);
 
-    expect(result.id).toBe(7);
+    expect(result.id).toBe('7');
     expect(result.level).toBe('info');
     expect(result.message).toBe('Step started');
     expect(result.moduleName).toBe('step1');

ui/src/components/trace/TraceView.test.tsx

@@ -7,37 +7,11 @@ import {
   StepDetailPanel,
 } from '@gocodealone/workflow-ui/trace';
 import type { TraceStep, TraceData, LogEntry } from '@gocodealone/workflow-ui/trace';
+import { toTraceStep, toLogEntry } from './traceUtils.ts';
 import useObservabilityStore from '../../store/observabilityStore.ts';
 import useWorkflowStore from '../../store/workflowStore.ts';
 import { apiGetExecutionLogs, apiGetWorkflow } from '../../utils/api.ts';
 import { configToNodes, parseYaml } from '../../utils/serialization.ts';
-import type { ExecutionStep, ExecutionLog } from '../../types/observability.ts';
-
-export function toTraceStep(step: ExecutionStep): TraceStep {
-  return {
-    stepName: step.step_name,
-    stepType: step.step_type,
-    status: step.status as TraceStep['status'],
-    durationMs: step.duration_ms,
-    startedAt: step.started_at,
-    inputData: step.input_data as Record<string, unknown> | null | undefined,
-    outputData: step.output_data as Record<string, unknown> | null | undefined,
-    errorMessage: step.error_message,
-    sequenceNum: step.sequence_num,
-  };
-}
-
-export function toLogEntry(log: ExecutionLog): LogEntry {
-  const level = log.level === 'fatal' ? 'error' : log.level;
-  return {
-    id: log.id,
-    level: level as LogEntry['level'],
-    message: log.message,
-    moduleName: log.module_name,
-    fields: log.fields,
-    createdAt: log.created_at,
-  };
-}
 
 const STATUS_COLORS: Record<string, string> = {
   pending: '#6c7086',
@@ -102,15 +76,15 @@ export default function TraceView({ executionId }: { executionId: string }) {
 
   const handleStepClick = useCallback(
     (step: TraceStep) => {
-      setSelectedStep((prev) => (prev?.stepName === step.stepName ? null : step));
+      setSelectedStep((prev: TraceStep | null) => (prev?.stepName === step.stepName ? null : step));
     },
     [],
   );
 
   const handleWaterfallStepClick = useCallback(
     (stepName: string) => {
       const step = executionSteps.map(toTraceStep).find((s) => s.stepName === stepName);
-      if (step) setSelectedStep((prev) => (prev?.stepName === stepName ? null : step));
+      if (step) setSelectedStep((prev: TraceStep | null) => (prev?.stepName === stepName ? null : step));
     },
     [executionSteps],
   );

ui/src/components/trace/TraceView.tsx

@@ -0,0 +1,27 @@
+import type { ExecutionStep, ExecutionLog } from '../../types/observability.ts';
+import type { TraceStep, LogEntry } from '@gocodealone/workflow-ui/trace';
+
+export function toTraceStep(step: ExecutionStep): TraceStep {
+  return {
+    stepName: step.step_name,
+    stepType: step.step_type,
+    status: step.status as TraceStep['status'],
+    durationMs: step.duration_ms,
+    inputData: step.input_data as Record<string, unknown> | null | undefined,
+    outputData: step.output_data as Record<string, unknown> | null | undefined,
+    errorMessage: step.error_message,
+    sequenceNum: step.sequence_num,
+  };
+}
+
+export function toLogEntry(log: ExecutionLog): LogEntry {
+  const level = log.level === 'fatal' ? 'error' : log.level;
+  return {
+    id: String(log.id),
+    level: level as LogEntry['level'],
+    message: log.message,
+    moduleName: log.module_name,
+    fields: log.fields,
+    createdAt: log.created_at,
+  };
+}