diff --git a/src/api.ts b/src/api.ts
new file mode 100644
index 0000000..b2ae7e9
--- /dev/null
+++ b/src/api.ts
@@ -0,0 +1,19 @@
+import type { ZinoClient } from './zino-sdk'
+
+// The SDK's start/perform helpers send `workflow_id`; the runtime API reads
+// `workflow_uuid`. These calls go through the SDK's client with the right body.
+export interface StepResult { instance_id?: string | number; success?: boolean }
+
+export function startProcess(client: ZinoClient, workflowId: string, activityId: string, data: Record<string, unknown>) {
+  return client.request<StepResult>('POST', '/start', { workflow_uuid: workflowId, activity_id: activityId, data })
+}
+
+export function performStep(client: ZinoClient, workflowId: string, instanceId: string, activityId: string, data: Record<string, unknown>) {
+  const n = Number(instanceId)
+  return client.request<StepResult>('POST', '/activity', {
+    workflow_uuid: workflowId,
+    instance_id: Number.isFinite(n) ? n : instanceId,
+    activity_id: activityId,
+    data,
+  })
+}
diff --git a/src/pages/RecordPage.tsx b/src/pages/RecordPage.tsx
index a97c9a9..6ef8a54 100644
--- a/src/pages/RecordPage.tsx
+++ b/src/pages/RecordPage.tsx
@@ -3,6 +3,7 @@ import { useQuery, useZino } from '../zino-sdk'
 import { DETAIL_VIEW_IDS, FIELD_DEFS, STEPS, SYSTEM_KEYS, type StepDef } from '../config'
 import { ErrorBox, Loading, PageTitle, btnPrimary, btnSecondary, formatValue } from '../components/ui'
 import { useState } from 'react'
+import { performStep } from '../api'
 import { useMutation, useQueryClient } from '../zino-sdk'
 import { WORKFLOW_IDS } from '../config'
 
@@ -14,7 +15,7 @@ function canPerform(step: StepDef, roles: string[]) {
 
 export default function RecordPage() {
   const { id = '' } = useParams()
-  const { views, user, workflows } = useZino()
+  const { views, user, client } = useZino()
   const qc = useQueryClient()
   const [done, setDone] = useState<string | null>(null)
   const q = useQuery({
@@ -22,7 +23,7 @@ export default function RecordPage() {
     queryFn: () => views.getDetailView(DETAIL_VIEW_IDS.REGISTRATION_DETAILS, id),
   })
   const quick = useMutation({
-    mutationFn: (step: StepDef) => workflows.performActivity(WORKFLOW_IDS.TRUCK_ONBOARDING, id, step.id, {}),
+    mutationFn: (step: StepDef) => performStep(client, WORKFLOW_IDS.TRUCK_ONBOARDING, id, step.id, {}),
     onSuccess: (_r, step) => { setDone(step.name); qc.invalidateQueries({ queryKey: ['detailview'] }); qc.invalidateQueries({ queryKey: ['recordview'] }) },
   })
 
diff --git a/src/pages/StepFormPage.tsx b/src/pages/StepFormPage.tsx
index f5a6975..edf871b 100644
--- a/src/pages/StepFormPage.tsx
+++ b/src/pages/StepFormPage.tsx
@@ -1,6 +1,7 @@
 import { useState, type FormEvent } from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
 import { useMutation, useQueryClient, useZino } from '../zino-sdk'
+import { performStep, startProcess } from '../api'
 import { FILE_ALLOWED_TYPES, INIT_STEP, WORKFLOW_IDS, fieldDef, stepById, type FieldDef } from '../config'
 import { ErrorBox, PageTitle, btnPrimary, btnSecondary, inputCls } from '../components/ui'
 
@@ -27,7 +28,7 @@ export default function StepFormPage({ start }: { start?: boolean }) {
   const params = useParams()
   const step = start ? INIT_STEP : stepById(params.stepId ?? '')
   const instanceId = start ? undefined : params.id
-  const { workflows } = useZino()
+  const { client } = useZino()
   const qc = useQueryClient()
   const nav = useNavigate()
   const [values, setValues] = useState<Record<string, Val>>({})
@@ -35,11 +36,11 @@ export default function StepFormPage({ start }: { start?: boolean }) {
 
   const submit = useMutation({
     mutationFn: (data: Record<string, Val>) => start
-      ? workflows.startWorkflow(WORKFLOW_IDS.TRUCK_ONBOARDING, step!.id, data)
-      : workflows.performActivity(WORKFLOW_IDS.TRUCK_ONBOARDING, instanceId!, step!.id, data),
+      ? startProcess(client, WORKFLOW_IDS.TRUCK_ONBOARDING, step!.id, data)
+      : performStep(client, WORKFLOW_IDS.TRUCK_ONBOARDING, instanceId!, step!.id, data),
     onSuccess: (r) => {
       qc.invalidateQueries({ queryKey: ['recordview'] }); qc.invalidateQueries({ queryKey: ['detailview'] })
-      nav(`/records/${encodeURIComponent(r.instance_id || instanceId || '')}`)
+      nav(`/records/${encodeURIComponent(String(r.instance_id ?? instanceId ?? ''))}`)
     },
   })
   if (!step) return <ErrorBox error={{ message: 'Unknown step' }} />