diff --git a/aws-schema.png b/aws-schema.png
new file mode 100644
index 0000000..fef8f37
Binary files /dev/null and b/aws-schema.png differ
diff --git a/docker/Dockerfile b/docker/Dockerfile
index fd396f2..11d41f9 100644
--- a/docker/Dockerfile
+++ b/docker/Dockerfile
@@ -1,11 +1,14 @@
 # Stage 1 — build frontend
 FROM node:20-alpine AS frontend-build
 WORKDIR /app
-COPY packages/frontend/package.json ./
-RUN npm install
-COPY packages/frontend/ .
-COPY OS_img/ /OS_img/
-RUN npm run build
+RUN corepack enable && corepack prepare pnpm@9.2.0 --activate
+COPY package.json pnpm-lock.yaml pnpm-workspace.yaml ./
+COPY packages/api/package.json packages/api/package.json
+COPY packages/frontend/package.json packages/frontend/package.json
+RUN pnpm install --frozen-lockfile --filter @floci/frontend
+COPY packages/frontend/ packages/frontend/
+COPY OS_img/ OS_img/
+RUN pnpm --filter @floci/frontend run build
 
 # Stage 2 — compile API to a self-contained binary
 FROM oven/bun:1-alpine AS api-build
@@ -20,7 +23,7 @@ FROM alpine:3
 RUN apk add --no-cache ca-certificates libstdc++
 WORKDIR /app
 COPY --from=api-build /app/server ./server
-COPY --from=frontend-build /app/dist ./public
+COPY --from=frontend-build /app/packages/frontend/dist ./public
 ENV PORT=4500
 EXPOSE 4500
 CMD ["./server"]
diff --git a/packages/api/src/adapter-aws/AwsStepFunctionsAdapter.test.ts b/packages/api/src/adapter-aws/AwsStepFunctionsAdapter.test.ts
index c958548..183ed7d 100644
--- a/packages/api/src/adapter-aws/AwsStepFunctionsAdapter.test.ts
+++ b/packages/api/src/adapter-aws/AwsStepFunctionsAdapter.test.ts
@@ -9,9 +9,11 @@ import {
     ListStateMachinesCommand,
     StartExecutionCommand,
     StopExecutionCommand,
+    UpdateStateMachineCommand,
     type SFNClient,
 } from '@aws-sdk/client-sfn'
 import {AwsStepFunctionsAdapter} from './AwsStepFunctionsAdapter'
+import {mapAwsSdkError} from './awsErrors'
 import {ValidationError} from '../cloud-spi/errors'
 
 type SendResult = Record<string, unknown>
@@ -177,13 +179,32 @@ describe('AwsStepFunctionsAdapter', () => {
         expect(resource.id).toBe(ARN)
     })
 
-    test('requires the fields the schema marks required', async () => {
+    test('passes an explicit definition to the SDK exactly as received', async () => {
+        const definition = `  ${DEFINITION}\n`
+        const {client, sent} = runtimeStub()
+
+        await new AwsStepFunctionsAdapter(client).create({values: {...validValues, definition}})
+
+        expect((sent[0] as CreateStateMachineCommand).input.definition).toBe(definition)
+    })
+
+    test('creates a name-only workflow with a local role and valid initial ASL', async () => {
+        const {client, sent} = runtimeStub()
+        await new AwsStepFunctionsAdapter(client).create({values: {name: 'orders'}})
+
+        expect((sent[0] as CreateStateMachineCommand).input).toEqual(expect.objectContaining({
+            name: 'orders',
+            roleArn: 'arn:aws:iam::000000000000:role/floci-step-functions',
+            definition: JSON.stringify({StartAt: 'Initial', States: {Initial: {Type: 'Pass', End: true}}}),
+        }))
+    })
+
+    test('requires the name the schema marks required', async () => {
         const adapter = new AwsStepFunctionsAdapter(runtimeStub().client)
 
         const cases: Array<[Record<string, unknown>, string]> = [
             [{}, 'name is required'],
-            [{name: 'orders'}, 'roleArn is required'],
-            [{name: 'orders', roleArn: ROLE}, 'definition is required'],
+            [{name: 'orders', definition: ''}, 'definition is required'],
         ]
 
         for (const [values, message] of cases) {
@@ -199,16 +220,22 @@ describe('AwsStepFunctionsAdapter', () => {
         )
     })
 
-    test('rejects a definition missing StartAt or States', async () => {
+    test('rejects a definition without a string StartAt or object States', async () => {
         // Valid JSON is not a valid state machine. The runtime rejects it, but with
         // a parser message; naming the missing field is more actionable.
         const adapter = new AwsStepFunctionsAdapter(runtimeStub().client)
 
         await expect(adapter.create({values: {...validValues, definition: '{"States":{}}'}})).rejects.toThrow(
-            new ValidationError('definition must contain StartAt'),
+            new ValidationError('definition must contain StartAt as a string'),
         )
         await expect(adapter.create({values: {...validValues, definition: '{"StartAt":"Done"}'}})).rejects.toThrow(
-            new ValidationError('definition must contain States'),
+            new ValidationError('definition must contain States as an object'),
+        )
+        await expect(adapter.create({values: {...validValues, definition: '{"StartAt":1,"States":{}}'}})).rejects.toThrow(
+            new ValidationError('definition must contain StartAt as a string'),
+        )
+        await expect(adapter.create({values: {...validValues, definition: '{"StartAt":"Done","States":[]}'}})).rejects.toThrow(
+            new ValidationError('definition must contain States as an object'),
         )
     })
 
@@ -227,6 +254,43 @@ describe('AwsStepFunctionsAdapter', () => {
         expect((sent[0] as DeleteStateMachineCommand).input.stateMachineArn).toBe(ARN)
     })
 
+    test('updates only the definition and reads the state machine back', async () => {
+        const updatedDefinition = '{\n  "StartAt": "Pass",\n  "States": {"Pass": {"Type": "Pass", "End": true}}\n}'
+        const {client, sent} = stubSfn((command) => {
+            if (command instanceof UpdateStateMachineCommand) return {updateDate: new Date()}
+            if (command instanceof DescribeStateMachineCommand) return {...described, definition: updatedDefinition}
+            return {}
+        })
+
+        const resource = await new AwsStepFunctionsAdapter(client).update(ARN, {values: {definition: updatedDefinition}})
+
+        expect(sent[0]).toBeInstanceOf(UpdateStateMachineCommand)
+        expect((sent[0] as UpdateStateMachineCommand).input).toEqual({stateMachineArn: ARN, definition: updatedDefinition})
+        expect(sent[1]).toBeInstanceOf(DescribeStateMachineCommand)
+        expect(resource.metadata.definition).toBe(updatedDefinition)
+    })
+
+    test('leaves update SDK failures for the shared AWS error mapper', async () => {
+        const providerError = Object.assign(new Error('definition is invalid'), {
+            name: 'InvalidDefinition',
+            $fault: 'client',
+            $metadata: {httpStatusCode: 400},
+        })
+        const {client} = stubSfn(() => {
+            throw providerError
+        })
+
+        let caught: unknown
+        try {
+            await new AwsStepFunctionsAdapter(client).update(ARN, {values: {definition: DEFINITION}})
+        } catch (error) {
+            caught = error
+        }
+
+        expect(caught).toBe(providerError)
+        expect(mapAwsSdkError(caught)).toBeInstanceOf(ValidationError)
+    })
+
     test('uses AWS execution commands with input data and history pagination', async () => {
         const executionArn = 'arn:aws:states:us-east-1:000000000000:execution:orders:run-1'
         const {client, sent} = stubSfn((command) => {
diff --git a/packages/api/src/adapter-aws/AwsStepFunctionsAdapter.ts b/packages/api/src/adapter-aws/AwsStepFunctionsAdapter.ts
index c69d6a0..82187ce 100644
--- a/packages/api/src/adapter-aws/AwsStepFunctionsAdapter.ts
+++ b/packages/api/src/adapter-aws/AwsStepFunctionsAdapter.ts
@@ -8,6 +8,7 @@ import {
     ListStateMachinesCommand,
     StartExecutionCommand,
     StopExecutionCommand,
+    UpdateStateMachineCommand,
     type SFNClient,
     type StateMachineListItem,
 } from '@aws-sdk/client-sfn'
@@ -20,6 +21,7 @@ import type {
     CreateResourceInput,
     ResourceQuery,
     ServiceSchema,
+    UpdateResourceInput,
 } from '../cloud-spi/types'
 
 /**
@@ -91,11 +93,11 @@ export class AwsStepFunctionsAdapter implements CloudServiceAdapter {
                 'name must be up to 80 characters of letters, digits, hyphens and underscores',
             )
         }
-        const roleArn = requiredString(input.values.roleArn, 'roleArn')
+        const roleArn = optionalString(input.values.roleArn) ?? 'arn:aws:iam::000000000000:role/floci-step-functions'
         if (!/^arn:aws[a-z-]*:iam::\d{12}:role\/.+$/.test(roleArn)) {
             throw new ValidationError('roleArn must be an IAM role ARN, e.g. arn:aws:iam::000000000000:role/my-role')
         }
-        const definition = requiredDefinition(input.values.definition)
+        const definition = input.values.definition === undefined ? initialDefinition() : requiredDefinition(input.values.definition)
 
         const res = await this.sfn.send(new CreateStateMachineCommand({name, definition, roleArn}))
         const arn = res.stateMachineArn
@@ -111,6 +113,15 @@ export class AwsStepFunctionsAdapter implements CloudServiceAdapter {
         await this.sfn.send(new DeleteStateMachineCommand({stateMachineArn: id}))
     }
 
+    async update(id: string, input: UpdateResourceInput): Promise<CloudResource> {
+        const definition = requiredDefinition(input.values.definition)
+        await this.sfn.send(new UpdateStateMachineCommand({stateMachineArn: id, definition}))
+
+        const updated = await this.get(id)
+        if (!updated) throw new RuntimeError(`State machine ${id} was updated but could not be read back`)
+        return updated
+    }
+
     async startExecution(stateMachineArn: string, input: StartWorkflowExecutionInput): Promise<{executionArn: string; startDate: Date}> {
         const result = await this.sfn.send(new StartExecutionCommand({
             stateMachineArn,
@@ -220,21 +231,24 @@ function filterBySearch(resources: CloudResource[], search?: string): CloudResou
  * with a JSON parser message; naming the missing field is more actionable.
  */
 function requiredDefinition(value: unknown): string {
-    const raw = requiredString(value, 'definition')
+    if (typeof value !== 'string') throw new ValidationError('definition must be a string')
+    if (!value.trim()) throw new ValidationError('definition is required')
 
     let parsed: unknown
     try {
-        parsed = JSON.parse(raw)
+        parsed = JSON.parse(value)
     } catch {
         throw new ValidationError('definition must be valid JSON')
     }
     if (typeof parsed !== 'object' || parsed === null || Array.isArray(parsed)) {
         throw new ValidationError('definition must be a JSON object')
     }
-    for (const field of ['StartAt', 'States'] as const) {
-        if (!(field in parsed)) throw new ValidationError(`definition must contain ${field}`)
+    const definition = parsed as Record<string, unknown>
+    if (typeof definition.StartAt !== 'string') throw new ValidationError('definition must contain StartAt as a string')
+    if (typeof definition.States !== 'object' || definition.States === null || Array.isArray(definition.States)) {
+        throw new ValidationError('definition must contain States as an object')
     }
-    return raw
+    return value
 }
 
 function validExecutionInput(value: string): string {
@@ -259,3 +273,12 @@ function requiredString(value: unknown, field: string): string {
     if (!trimmed) throw new ValidationError(`${field} is required`)
     return trimmed
 }
+
+function optionalString(value: unknown): string | undefined {
+    if (value === undefined || value === null || value === '') return undefined
+    return requiredString(value, 'roleArn')
+}
+
+function initialDefinition(): string {
+    return JSON.stringify({StartAt: 'Initial', States: {Initial: {Type: 'Pass', End: true}}})
+}
diff --git a/packages/api/src/cloud-spi/workflowsSchema.test.ts b/packages/api/src/cloud-spi/workflowsSchema.test.ts
new file mode 100644
index 0000000..441adfb
--- /dev/null
+++ b/packages/api/src/cloud-spi/workflowsSchema.test.ts
@@ -0,0 +1,17 @@
+import {describe, expect, test} from 'bun:test'
+import {awsWorkflowsSchema} from './workflowsSchema'
+
+describe('awsWorkflowsSchema', () => {
+    test('requires a name and truthfully exposes the optional ASL definition', () => {
+        const schema = awsWorkflowsSchema()
+
+        expect(schema.fields.map((field) => field.name)).toEqual(['name', 'definition'])
+        expect(schema.fields[0]?.required).toBe(true)
+        expect(schema.fields[1]).toMatchObject({
+            name: 'definition',
+            type: 'textarea',
+            required: false,
+            span: true,
+        })
+    })
+})
diff --git a/packages/api/src/cloud-spi/workflowsSchema.ts b/packages/api/src/cloud-spi/workflowsSchema.ts
index b73eec7..9b29219 100644
--- a/packages/api/src/cloud-spi/workflowsSchema.ts
+++ b/packages/api/src/cloud-spi/workflowsSchema.ts
@@ -40,29 +40,17 @@ export function awsWorkflowsSchema(): ServiceSchema {
                     message: 'Up to 80 characters: letters, digits, hyphens and underscores.',
                 },
             },
-            {
-                name: 'roleArn',
-                label: 'Execution Role ARN',
-                type: 'text',
-                required: true,
-                group: 'Required',
-                description: 'The IAM role the state machine assumes when it runs.',
-                validation: {
-                    pattern: '^arn:aws[a-z-]*:iam::\\d{12}:role/.+$',
-                    message: 'Must be an IAM role ARN, e.g. arn:aws:iam::000000000000:role/my-role.',
-                },
-            },
             {
                 name: 'definition',
-                label: 'Definition (Amazon States Language)',
+                label: 'ASL Definition',
                 type: 'textarea',
-                required: true,
+                required: false,
+                group: 'Optional',
                 span: true,
-                group: 'Required',
-                description: 'JSON with StartAt and States, e.g. {"StartAt":"Done","States":{"Done":{"Type":"Succeed"}}}',
+                description: 'Complete Amazon States Language JSON. When omitted, a valid starter workflow is created.',
             },
         ],
-        actions: ['list', 'create', 'delete', 'inspect'],
+        actions: ['list', 'create', 'update', 'delete', 'inspect'],
         capabilities: {
             resourceActions: [
                 {name: 'list', label: 'List state machines', enabled: true, status: 'available', runtimeRequired: true},
@@ -74,6 +62,7 @@ export function awsWorkflowsSchema(): ServiceSchema {
                     status: 'available',
                     runtimeRequired: true,
                 },
+                {name: 'update', label: 'Update definition', enabled: true, status: 'available', runtimeRequired: true},
                 {name: 'delete', label: 'Delete', enabled: true, status: 'available', runtimeRequired: true},
             ],
         },
diff --git a/packages/frontend/package.json b/packages/frontend/package.json
index 819f552..0f777d8 100644
--- a/packages/frontend/package.json
+++ b/packages/frontend/package.json
@@ -17,6 +17,7 @@
   "dependencies": {
     "@tanstack/react-query": "^5.101.2",
     "@tanstack/react-query-devtools": "^5.101.2",
+    "@xyflow/react": "^12.10.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "date-fns": "^4.1.0",
diff --git a/packages/frontend/src/App.tsx b/packages/frontend/src/App.tsx
index 7596388..d0a08ed 100644
--- a/packages/frontend/src/App.tsx
+++ b/packages/frontend/src/App.tsx
@@ -4,6 +4,7 @@ import {SecretsManagerPage} from '@/features/secretsmanager/SecretsManagerPage'
 import {CloudExplorerPage} from '@/pages/CloudExplorerPage'
 import {CloudConsoleHomePage} from '@/pages/CloudConsoleHomePage'
 import {DatabaseDataPage} from '@/pages/DatabaseDataPage'
+import {WorkflowStudioPage} from '@/pages/WorkflowStudioPage'
 
 export default function App() {
     return (
@@ -17,6 +18,7 @@ export default function App() {
                     <Route path="/cloud-explorer" element={<Navigate to="/cloud-explorer/aws/storage" replace/>}/>
                     <Route path="/cloud-explorer/:cloud/:service" element={<CloudExplorerPage/>}/>
                     <Route path="/cloud-explorer/:cloud/:service/:resourceId/data" element={<DatabaseDataPage/>}/>
+                    <Route path="/cloud-explorer/aws/workflows/:resourceId/studio" element={<WorkflowStudioPage/>}/>
                     <Route path="/secretsmanager" element={<SecretsManagerPage/>}/>
                     <Route path="*" element={<Navigate to="/console/aws" replace/>}/>
                 </Route>
diff --git a/packages/frontend/src/api/queries/cloudQueries.ts b/packages/frontend/src/api/queries/cloudQueries.ts
index ac37b35..3e0715f 100644
--- a/packages/frontend/src/api/queries/cloudQueries.ts
+++ b/packages/frontend/src/api/queries/cloudQueries.ts
@@ -1,5 +1,6 @@
 import {useQuery} from '@tanstack/react-query'
 import {
+    getCloudResource,
     getCloudServiceStatus,
     getCloudStatus,
     listCloudResources,
@@ -23,6 +24,8 @@ export const cloudQueryKeys = {
         ['cloud-service-status', cloud, service] as const,
     resources: (cloud: CloudProvider, service: CloudServiceType) =>
         ['cloud-console-resources', cloud, service] as const,
+    resource: (cloud: CloudProvider, service: CloudServiceType, id: string) =>
+        ['cloud-resource', cloud, service, id] as const,
 }
 
 export function useCloudsQuery() {
@@ -82,6 +85,21 @@ export function useCloudConsoleResourcesQuery({
     })
 }
 
+export function useCloudResourceQuery(
+    cloud: CloudProvider,
+    service: CloudServiceType,
+    id?: string,
+) {
+    return useQuery({
+        queryKey: cloudQueryKeys.resource(cloud, service, id ?? ''),
+        queryFn: ({signal}) => getCloudResource(cloud, service, id!, signal),
+        enabled: Boolean(id),
+        // A list refresh returns summary rows. Keep the inspected resource cached
+        // until the user selects a different state machine.
+        staleTime: Infinity,
+    })
+}
+
 function hasAvailableService(services: CloudServiceDescriptor[] | undefined, service: CloudServiceType): boolean {
     return services?.some((item) => item.service === service && item.availability === 'available') ?? false
 }
diff --git a/packages/frontend/src/components/DynamicResourceView.tsx b/packages/frontend/src/components/DynamicResourceView.tsx
index 7dd9718..c839873 100644
--- a/packages/frontend/src/components/DynamicResourceView.tsx
+++ b/packages/frontend/src/components/DynamicResourceView.tsx
@@ -59,6 +59,10 @@ import { LoadBalancerPanel } from "@/components/LoadBalancerPanel";
 import { TargetGroupPanel } from "@/components/TargetGroupPanel";
 import { LoadBalancerListenerPanel } from "@/components/LoadBalancerListenerPanel";
 import { WorkflowExecutionDebugger } from "@/components/WorkflowExecutionDebugger";
+import {WorkflowCreatePanel} from "@/components/WorkflowCreatePanel";
+import {workflowCreationDestinationPath, type WorkflowCreationDestination} from "@/lib/workflowCreate";
+import {workflowStudioPath} from "@/lib/workflowStudio";
+import {useNavigate} from "react-router-dom";
 
 interface DynamicResourceViewProps {
   cloud: CloudProvider;
@@ -71,6 +75,11 @@ interface DynamicResourceViewProps {
   onOpenInfo: () => void;
 }
 
+interface CreateMutationVariables {
+  values: Record<string, unknown>;
+  destination?: WorkflowCreationDestination;
+}
+
 export function DynamicResourceView({
   cloud,
   service,
@@ -80,6 +89,7 @@ export function DynamicResourceView({
   statusLoading = false,
   onOpenInfo,
 }: DynamicResourceViewProps) {
+  const navigate = useNavigate();
   const qc = useQueryClient();
   const [search, setSearch] = useState("");
   const [state, setState] = useState("");
@@ -166,7 +176,7 @@ export function DynamicResourceView({
   };
 
   const createMut = useMutation({
-    mutationFn: async (values: Record<string, unknown>) => {
+    mutationFn: async ({values}: CreateMutationVariables) => {
       const blueprintBucketName = typeof values.blueprintBucketName === "string" ? values.blueprintBucketName.trim() : "";
       const blueprintApiName = typeof values.blueprintApiName === "string" ? values.blueprintApiName.trim() : "";
       const blueprintRuleName = typeof values.blueprintRuleName === "string" ? values.blueprintRuleName.trim() : "";
@@ -254,12 +264,16 @@ export function DynamicResourceView({
         throw error;
       }
     },
-    onSuccess: (resource) => {
+    onSuccess: (resource, variables) => {
       setSelected(resource);
       setCreateOpen(false);
       void qc.invalidateQueries({
         queryKey: ["cloud-resources", cloud, service],
       });
+      if (cloud === "aws" && service === "workflows" && variables.destination === "studio") {
+        const destinationPath = workflowCreationDestinationPath(variables.destination, resource.id);
+        if (destinationPath) navigate(destinationPath);
+      }
     },
   });
 
@@ -774,14 +788,21 @@ export function DynamicResourceView({
                       isSubmitting={createMut.isPending}
                       submitError={createMut.error instanceof Error ? createMut.error.message : null}
                       onCancel={() => setCreateOpen(false)}
-                      onSubmit={(values) => createMut.mutate(values)}
+                      onSubmit={(values) => createMut.mutate({values})}
                     />
                   ) : service === "loadbalancing" && cloud === "aws" ? (
                     <LoadBalancerPanel
                       isSubmitting={createMut.isPending}
                       submitError={createMut.error instanceof Error ? createMut.error.message : null}
                       onCancel={() => setCreateOpen(false)}
-                      onSubmit={(values) => createMut.mutate(values)}
+                      onSubmit={(values) => createMut.mutate({values})}
+                    />
+                  ) : service === "workflows" && cloud === "aws" ? (
+                    <WorkflowCreatePanel
+                      isSubmitting={createMut.isPending}
+                      submitError={createMut.error instanceof Error ? createMut.error.message : null}
+                      onCancel={() => setCreateOpen(false)}
+                      onSubmit={(submission) => createMut.mutate(submission)}
                     />
                   ) : (
                     <DynamicFormRenderer
@@ -796,7 +817,7 @@ export function DynamicResourceView({
                           : null
                       }
                       onCancel={() => setCreateOpen(false)}
-                      onSubmit={(values) => createMut.mutate(values)}
+                      onSubmit={(values) => createMut.mutate({values})}
                     />
                   )}
                 </div>
@@ -840,13 +861,16 @@ export function DynamicResourceView({
           )}
         </section>
         {activeSelected && !showDatabaseSnapshots && (
-          <ResourceInspector
-            resource={activeSelected}
-            object={selectedObject}
-            cloud={cloud}
-            runtimeReachable={canUseRuntime}
-            serviceName={schema.displayName}
-          />
+          <div>
+            {cloud === "aws" && service === "workflows" && <button className="button compact workflow-open-studio" type="button" onClick={() => navigate(workflowStudioPath(activeSelected.id))}>Open Studio</button>}
+            <ResourceInspector
+              resource={activeSelected}
+              object={selectedObject}
+              cloud={cloud}
+              runtimeReachable={canUseRuntime}
+              serviceName={schema.displayName}
+            />
+          </div>
         )}
       </div>
       {service === "storage" && (
diff --git a/packages/frontend/src/components/WorkflowCreatePanel.test.tsx b/packages/frontend/src/components/WorkflowCreatePanel.test.tsx
new file mode 100644
index 0000000..a3a4e8f
--- /dev/null
+++ b/packages/frontend/src/components/WorkflowCreatePanel.test.tsx
@@ -0,0 +1,61 @@
+import {fireEvent, render, screen} from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import {describe, expect, test, vi} from 'vitest'
+import {WorkflowCreatePanel} from './WorkflowCreatePanel'
+
+function renderPanel(onSubmit = vi.fn()) {
+    render(<WorkflowCreatePanel isSubmitting={false} submitError={null} onCancel={vi.fn()} onSubmit={onSubmit}/>)
+    return onSubmit
+}
+
+describe('WorkflowCreatePanel', () => {
+    test('offers explicit Studio and ASL creation modes', () => {
+        renderPanel()
+
+        expect(screen.getByRole('button', {name: /workflow studio/i})).toHaveAttribute('aria-pressed', 'true')
+        expect(screen.getByRole('button', {name: /asl definition/i})).toHaveAttribute('aria-pressed', 'false')
+        expect(screen.queryByLabelText(/asl definition/i)).not.toBeInTheDocument()
+    })
+
+    test('submits a name-only Studio creation targeting Studio', async () => {
+        const user = userEvent.setup()
+        const onSubmit = renderPanel()
+
+        await user.type(screen.getByLabelText(/state machine name/i), ' orders ')
+        await user.click(screen.getByRole('button', {name: /create and open studio/i}))
+
+        expect(onSubmit).toHaveBeenCalledWith({values: {name: 'orders'}, destination: 'studio'})
+    })
+
+    test('submits the exact ASL text targeting Explorer', async () => {
+        const user = userEvent.setup()
+        const onSubmit = renderPanel()
+        const definition = '  {\n  "StartAt": "Done",\n  "States": {"Done": {"Type": "Succeed"}}\n}\n'
+
+        await user.click(screen.getByRole('button', {name: /asl definition/i}))
+        await user.type(screen.getByLabelText(/state machine name/i), 'orders')
+        fireEvent.change(screen.getByLabelText(/asl definition/i), {target: {value: definition}})
+        await user.click(screen.getByRole('button', {name: /create state machine/i}))
+
+        expect(onSubmit).toHaveBeenCalledWith({values: {name: 'orders', definition}, destination: 'explorer'})
+    })
+
+    test.each([
+        ['', 'ASL definition is required.'],
+        ['not json', 'ASL definition must be valid JSON.'],
+        ['[]', 'ASL definition must be a JSON object.'],
+        ['{"StartAt":1,"States":{}}', 'ASL definition must include StartAt as a string.'],
+        ['{"StartAt":"Done","States":[]}', 'ASL definition must include States as an object.'],
+    ])('rejects invalid ASL definition %s', async (definition, message) => {
+        const user = userEvent.setup()
+        const onSubmit = renderPanel()
+
+        await user.click(screen.getByRole('button', {name: /asl definition/i}))
+        await user.type(screen.getByLabelText(/state machine name/i), 'orders')
+        if (definition) fireEvent.change(screen.getByLabelText(/asl definition/i), {target: {value: definition}})
+        await user.click(screen.getByRole('button', {name: /create state machine/i}))
+
+        expect(screen.getByRole('alert')).toHaveTextContent(message)
+        expect(onSubmit).not.toHaveBeenCalled()
+    })
+})
diff --git a/packages/frontend/src/components/WorkflowCreatePanel.tsx b/packages/frontend/src/components/WorkflowCreatePanel.tsx
new file mode 100644
index 0000000..9818b9a
--- /dev/null
+++ b/packages/frontend/src/components/WorkflowCreatePanel.tsx
@@ -0,0 +1,51 @@
+import {useState} from 'react'
+import {Braces, PanelsTopLeft} from 'lucide-react'
+import {validateAslDefinition, workflowCreateSubmission, type WorkflowCreateSubmission} from '@/lib/workflowCreate'
+
+type CreationMode = 'studio' | 'asl'
+
+export function WorkflowCreatePanel({isSubmitting, submitError, onCancel, onSubmit}: {isSubmitting: boolean; submitError: string | null; onCancel: () => void; onSubmit: (submission: WorkflowCreateSubmission) => void}) {
+    const [mode, setMode] = useState<CreationMode>('studio')
+    const [name, setName] = useState('')
+    const [definition, setDefinition] = useState('')
+    const [definitionError, setDefinitionError] = useState<string | null>(null)
+    const validName = /^[a-zA-Z0-9_-]{1,80}$/.test(name.trim())
+
+    return <form className="dynamic-form" onSubmit={(event) => {
+        event.preventDefault()
+        if (!validName) return
+        if (mode === 'asl') {
+            const error = validateAslDefinition(definition)
+            setDefinitionError(error)
+            if (error) return
+            onSubmit(workflowCreateSubmission(name, 'explorer', definition))
+            return
+        }
+        onSubmit(workflowCreateSubmission(name, 'studio'))
+    }}>
+        <div className="workflow-create-modes" role="group" aria-label="Creation mode">
+            <button className={`workflow-create-mode${mode === 'studio' ? ' active' : ''}`} type="button" aria-pressed={mode === 'studio'} disabled={isSubmitting} onClick={() => { setMode('studio'); setDefinitionError(null) }}>
+                <PanelsTopLeft size={18}/><span><strong>Workflow Studio</strong><small>Create a valid starter workflow, then design it visually.</small></span>
+            </button>
+            <button className={`workflow-create-mode${mode === 'asl' ? ' active' : ''}`} type="button" aria-pressed={mode === 'asl'} disabled={isSubmitting} onClick={() => setMode('asl')}>
+                <Braces size={18}/><span><strong>ASL definition</strong><small>Create directly from a complete Amazon States Language document.</small></span>
+            </button>
+        </div>
+        <label className="dynamic-field dynamic-field--span">
+            <span>State Machine Name<em className="field-required">*</em></span>
+            <input className="input" autoFocus value={name} disabled={isSubmitting} onChange={(event) => setName(event.target.value)} maxLength={80} required pattern="[a-zA-Z0-9_-]+" aria-describedby="workflow-name-help"/>
+            <small id="workflow-name-help">Up to 80 characters: letters, digits, hyphens, and underscores.</small>
+        </label>
+        {mode === 'asl' && <label className="dynamic-field dynamic-field--span">
+            <span>ASL Definition<em className="field-required">*</em></span>
+            <textarea className={`textarea workflow-definition-input${definitionError ? ' invalid' : ''}`} value={definition} disabled={isSubmitting} onChange={(event) => { setDefinition(event.target.value); setDefinitionError(null) }} rows={14} spellCheck={false} aria-describedby="workflow-definition-help workflow-definition-error"/>
+            <small id="workflow-definition-help">Enter the complete JSON definition. It must contain a string <code>StartAt</code> and an object <code>States</code>.</small>
+            {definitionError && <small className="field-error" id="workflow-definition-error" role="alert">{definitionError}</small>}
+        </label>}
+        {submitError && <p className="error-text" role="alert">{submitError}</p>}
+        <div className="form-actions">
+            <button className="button" type="button" disabled={isSubmitting} onClick={onCancel}>Cancel</button>
+            <button className="button primary" type="submit" disabled={!validName || isSubmitting}>{isSubmitting ? 'Creating' : mode === 'studio' ? 'Create and open Studio' : 'Create state machine'}</button>
+        </div>
+    </form>
+}
diff --git a/packages/frontend/src/components/WorkflowExecutionDebugger.test.tsx b/packages/frontend/src/components/WorkflowExecutionDebugger.test.tsx
index 9c124cd..9098e28 100644
--- a/packages/frontend/src/components/WorkflowExecutionDebugger.test.tsx
+++ b/packages/frontend/src/components/WorkflowExecutionDebugger.test.tsx
@@ -1,5 +1,5 @@
 import {QueryClient, QueryClientProvider} from '@tanstack/react-query'
-import {fireEvent, render, screen, waitFor} from '@testing-library/react'
+import {fireEvent, render, screen, waitFor, within} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import {afterEach, describe, expect, test, vi} from 'vitest'
 import {WorkflowExecutionDebugger} from '@/components/WorkflowExecutionDebugger'
@@ -45,9 +45,24 @@ describe('WorkflowExecutionDebugger', () => {
         expect(screen.queryByRole('button', {name: 'Load more history'})).not.toBeInTheDocument()
         fireEvent.change(screen.getByLabelText('JSON input'), {target: {value: '{"orderId":"1"}'}})
         await user.click(screen.getByRole('button', {name: 'Start execution'}))
+        expect(screen.getByRole('alertdialog')).toHaveTextContent('{"orderId":"1"}')
+        await user.click(within(screen.getByRole('alertdialog')).getByRole('button', {name: 'Start execution'}))
         await waitFor(() => expect(startWorkflowExecution).toHaveBeenCalledWith(machine.id, {input: '{"orderId":"1"}'}))
     })
 
+    test('does not start until the inline confirmation is accepted', async () => {
+        vi.mocked(listWorkflowExecutions).mockResolvedValue([])
+        const user = userEvent.setup()
+        renderPanel()
+
+        await user.click(screen.getByRole('button', {name: 'Start execution'}))
+        expect(screen.getByRole('alertdialog')).toHaveTextContent('may invoke an unavailable Lambda')
+        expect(startWorkflowExecution).not.toHaveBeenCalled()
+        await user.click(screen.getByRole('button', {name: 'Cancel'}))
+        expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument()
+        expect(startWorkflowExecution).not.toHaveBeenCalled()
+    })
+
     test('confirms stopping only a running execution', async () => {
         vi.stubGlobal('confirm', vi.fn(() => true))
         vi.mocked(listWorkflowExecutions).mockResolvedValue([{executionArn, name: 'run-1', status: 'RUNNING', startDate: '2026-07-28T10:01:00.000Z'}])
diff --git a/packages/frontend/src/components/WorkflowExecutionDebugger.tsx b/packages/frontend/src/components/WorkflowExecutionDebugger.tsx
index 48343c4..bc659c6 100644
--- a/packages/frontend/src/components/WorkflowExecutionDebugger.tsx
+++ b/packages/frontend/src/components/WorkflowExecutionDebugger.tsx
@@ -25,6 +25,7 @@ export function WorkflowExecutionDebugger({resource, runtimeReachable}: Workflow
     const [input, setInput] = useState('{}')
     const [name, setName] = useState('')
     const [selectedExecutionArn, setSelectedExecutionArn] = useState<string>()
+    const [startConfirmation, setStartConfirmation] = useState(false)
     const isStandard = resource?.metadata.machineType === 'STANDARD'
     const enabled = Boolean(resource && runtimeReachable && isStandard)
     const executionKey = ['workflow-executions', resource?.id]
@@ -70,8 +71,12 @@ export function WorkflowExecutionDebugger({resource, runtimeReachable}: Workflow
         <div className="input-row" style={{alignItems: 'end'}}>
             <label className="field"><span>JSON input</span><textarea className="input" aria-label="JSON input" rows={4} value={input} onChange={(event) => setInput(event.target.value)}/></label>
             <label className="field"><span>Execution name (optional)</span><input className="input" aria-label="Execution name (optional)" value={name} onChange={(event) => setName(event.target.value)}/></label>
-            <button className="button" type="button" disabled={!enabled || start.isPending} onClick={() => start.mutate()}><Play size={13}/>{start.isPending ? 'Starting' : 'Start execution'}</button>
+            <button className="button" type="button" disabled={!enabled || start.isPending} onClick={() => setStartConfirmation(true)}><Play size={13}/>{start.isPending ? 'Starting' : 'Start execution'}</button>
         </div>
+        {startConfirmation && <div className="workflow-confirmation" role="alertdialog" aria-labelledby="workflow-start-title">
+            <strong id="workflow-start-title">Start this execution?</strong><span>This execution may invoke an unavailable Lambda. Name: {name.trim() || 'generated by AWS'}. Input: {input}</span>
+            <div><button className="button compact" type="button" disabled={start.isPending} onClick={() => { setStartConfirmation(false); start.mutate() }}>Start execution</button><button className="button compact" type="button" disabled={start.isPending} onClick={() => setStartConfirmation(false)}>Cancel</button></div>
+        </div>}
         <p className="muted compact-text">Execution input, output, and history can contain sensitive data.</p>
         {start.isError && <p className="error-text compact-text">{message(start.error, 'Unable to start execution.')}</p>}
         {executions.isError && <p className="error-text compact-text">{message(executions.error, 'Unable to load executions.')}</p>}
@@ -132,7 +137,7 @@ function useExecutionHistory(stateMachineArn: string | undefined, executionArn:
             let token = nextToken
             do {
                 if (!poll && pages === MAX_HISTORY_PAGES) {
-                    publish(false, limitMessage())
+                    publish(false, limitMessage(true, false))
                     return false
                 }
                 const page = await getWorkflowExecutionHistory(stateMachineArn, executionArn, token, controller.signal)
diff --git a/packages/frontend/src/components/WorkflowStudio.test.tsx b/packages/frontend/src/components/WorkflowStudio.test.tsx
new file mode 100644
index 0000000..5ea3096
--- /dev/null
+++ b/packages/frontend/src/components/WorkflowStudio.test.tsx
@@ -0,0 +1,804 @@
+import {fireEvent, render, screen, waitFor} from '@testing-library/react'
+import {QueryClient, QueryClientProvider} from '@tanstack/react-query'
+import userEvent from '@testing-library/user-event'
+import {beforeEach, describe, expect, test, vi} from 'vitest'
+import type {ComponentType, MouseEvent, ReactNode} from 'react'
+import {buildFlowGraph, deleteStateInScope, insertRootState, renameStateInScope, spliceLambdaIntoEdge, spliceTaskIntoEdge, WorkflowStudio} from '@/components/WorkflowStudio'
+import type {CloudResource} from '@/types/resource'
+
+const {getCloudResource, listCloudResources, updateCloudResource} = vi.hoisted(() => ({getCloudResource: vi.fn(), listCloudResources: vi.fn(), updateCloudResource: vi.fn()}))
+
+vi.mock('@/api/cloudProxyClient', () => ({getCloudResource, listCloudResources, updateCloudResource}))
+
+vi.mock('@xyflow/react', () => ({
+    Background: () => null,
+    BaseEdge: () => null,
+    Controls: () => null,
+    EdgeLabelRenderer: ({children}: {children: ReactNode}) => children,
+    getSmoothStepPath: () => ['M 0 0 L 100 100', 50, 50],
+    Handle: () => null,
+    MarkerType: {ArrowClosed: 'arrowclosed'},
+    Position: {Top: 'top', Bottom: 'bottom', Right: 'right'},
+    ReactFlow: ({nodes, edges, nodeTypes, edgeTypes, onNodeClick}: {nodes: Array<{id: string; type?: string; data: Record<string, unknown>}>; edges: Array<{id: string; type?: string; data?: Record<string, unknown>}>; nodeTypes: Record<string, ComponentType<{data: Record<string, unknown>}>>; edgeTypes: Record<string, ComponentType<Record<string, unknown>>>; onNodeClick: (event: MouseEvent, node: {data: Record<string, unknown>}) => void}) => <div>{nodes.map((node) => {
+        const NodeType = node.type ? nodeTypes[node.type] : undefined
+        if (node.type === 'placeholder' && NodeType) return <div key={node.id} onClick={(event) => onNodeClick(event, node)}><NodeType data={node.data}/></div>
+        return NodeType ? <div key={node.id}><button type="button" onClick={(event) => onNodeClick(event, node)}>{String(node.data.label)}</button><NodeType data={node.data}/></div> : <button key={node.id} type="button" onClick={(event) => onNodeClick(event, node)}>{String(node.data.label)}</button>
+    })}{edges.map((edge) => {
+        const EdgeType = edge.type ? edgeTypes[edge.type] : undefined
+        const edgeProps = {id: edge.id, sourceX: 0, sourceY: 0, targetX: 100, targetY: 100, sourcePosition: 'bottom', targetPosition: 'top', data: edge.data} as Record<string, unknown>
+        return EdgeType ? <EdgeType key={edge.id} {...edgeProps}/> : null
+    })}</div>,
+}))
+
+const definition = JSON.stringify({
+    StartAt: 'Work',
+    States: {
+        Work: {Type: 'Task', Resource: 'arn:aws:lambda:local', Retry: [{ErrorEquals: ['States.ALL'], UnknownRetryField: {kept: true}}], Catch: [{ErrorEquals: ['States.ALL'], Next: 'Failed', UnknownCatchField: {kept: true}}], Next: 'Decision', UnknownTaskField: {kept: true}},
+        DirectMissing: {Type: 'Task', Resource: 'arn:aws:lambda:us-east-1:000000000000:function:missing', Next: 'Done', UnknownTaskField: {kept: true}},
+        IntegrationAttached: {Type: 'Task', Resource: 'arn:aws:states:::lambda:invoke', Parameters: {FunctionName: 'arn:aws:lambda:local'}, Next: 'Done'},
+        IntegrationMissing: {Type: 'Task', Resource: 'arn:aws:states:::lambda:invoke', Parameters: {FunctionName: 'arn:aws:lambda:us-east-1:000000000000:function:missing-integration', Payload: {keep: true}}, Next: 'Done'},
+        PublishNotice: {Type: 'Task', Resource: 'arn:aws:states:::sns:publish', Parameters: {TopicArn: 'arn:aws:sns:us-east-1:000000000000:old-topic', Message: 'keep'}, Next: 'Done'},
+        NonLambda: {Type: 'Task', Resource: 'arn:aws:states:::dynamodb:putItem', Next: 'Done'},
+        NoResource: {Type: 'Task', Next: 'Done'},
+        Decision: {Type: 'Choice', Choices: [{Variable: '$.approved', BooleanEquals: true, Next: 'Done'}], Default: 'Failed', Custom: ['unchanged']},
+        PassThrough: {Type: 'Pass', Next: 'WaitHere'},
+        WaitHere: {Type: 'Wait', Seconds: 3, Next: 'Done'},
+        Done: {Type: 'Succeed'},
+        Failed: {Type: 'Fail'},
+        ParallelWork: {Type: 'Parallel', Branches: [{StartAt: 'BranchPass', States: {BranchPass: {Type: 'Pass', End: true}}}]},
+        MapWork: {Type: 'Map', Iterator: {StartAt: 'ItemPass', States: {ItemPass: {Type: 'Pass', End: true}}}},
+    },
+})
+
+const resource: CloudResource = {
+    id: 'arn:aws:states:us-east-1:000000000000:stateMachine:orders',
+    name: 'orders',
+    cloud: 'aws',
+    service: 'workflows',
+    type: 'state-machine',
+    region: 'us-east-1',
+    createdAt: null,
+    metadata: {machineType: 'STANDARD', definition},
+}
+
+function renderStudio(selected = resource) {
+    const queryClient = new QueryClient({defaultOptions: {queries: {retry: false}}})
+    return {queryClient, ...render(<QueryClientProvider client={queryClient}><WorkflowStudio resource={selected}/></QueryClientProvider>)}
+}
+
+describe('WorkflowStudio', () => {
+    beforeEach(() => {
+        getCloudResource.mockReset()
+        listCloudResources.mockReset()
+        updateCloudResource.mockReset()
+    })
+
+    test('maps supported ASL states, top-to-bottom boundaries, choice labels, retry markers, and directional catch edges', () => {
+        const graph = buildFlowGraph(JSON.parse(definition) as Record<string, unknown>, new Set(['arn:aws:lambda:local']))
+
+        expect(graph.nodes.map((node) => node.data.stateType)).toEqual(expect.arrayContaining(['Task', 'Choice', 'Pass', 'Parallel', 'Map', 'Wait', 'Succeed', 'Fail']))
+        expect(graph.nodes.find((node) => node.data.label === 'Work')?.data.retry).toBe(true)
+        expect(graph.edges).toEqual(expect.arrayContaining([
+            expect.objectContaining({label: '$.approved BooleanEquals true'}),
+            expect.objectContaining({label: 'Default'}),
+            expect.objectContaining({label: 'Catch', className: 'workflow-catch-edge'}),
+        ]))
+        expect(graph.nodes.find((node) => node.data.label === 'BranchPass')?.parentId).toContain('ParallelWork')
+        expect(graph.nodes.find((node) => node.data.label === 'ItemPass')?.parentId).toContain('MapWork')
+        expect(graph.nodes.map((node) => node.data.label)).toEqual(expect.arrayContaining(['Start', 'End']))
+        expect(graph.nodes.find((node) => node.data.label === 'Work')?.position.y).toBeGreaterThan(graph.nodes.find((node) => node.data.label === 'Start')?.position.y ?? 0)
+        expect(graph.edges.every((edge) => edge.markerEnd)).toBe(true)
+        expect(graph.nodes.find((node) => node.data.label === 'DirectMissing')?.data.unattached).toBe(true)
+        expect(graph.nodes.find((node) => node.data.label === 'Work')?.data.unattached).toBe(false)
+        expect(graph.nodes.find((node) => node.data.label === 'IntegrationAttached')?.data.unattached).toBe(false)
+        expect(graph.nodes.find((node) => node.data.label === 'IntegrationMissing')?.data.unattached).toBe(true)
+        expect(graph.nodes.find((node) => node.data.label === 'NonLambda')?.data.unattached).toBe(false)
+        expect(graph.nodes.find((node) => node.data.label === 'NoResource')?.data.unattached).toBe(false)
+        expect(graph.nodes.find((node) => node.data.label === 'Decision')?.data.choiceBranches).toEqual(['Rule #1', 'Default'])
+        expect(graph.edges.find((edge) => edge.label === '$.approved BooleanEquals true')).toMatchObject({sourceHandle: 'choice-0'})
+    })
+
+    test('renders transient start-to-guidance-to-end edges for an empty States object', () => {
+        const graph = buildFlowGraph({StartAt: 'Initial', States: {}})
+
+        expect(graph.nodes.map((node) => node.id)).toEqual(expect.arrayContaining(['workflow-start', 'workflow-empty-guidance', 'workflow-end']))
+        expect(graph.edges).toEqual(expect.arrayContaining([
+            expect.objectContaining({source: 'workflow-start', target: 'workflow-empty-guidance'}),
+            expect.objectContaining({source: 'workflow-empty-guidance', target: 'workflow-end'}),
+        ]))
+    })
+
+    test('connects each terminal state to End', () => {
+        const graph = buildFlowGraph({StartAt: 'Done', States: {Done: {Type: 'Succeed'}, Failed: {Type: 'Fail'}}})
+
+        expect(graph.edges).toEqual(expect.arrayContaining([
+            expect.objectContaining({source: 'states/Done', target: 'workflow-end'}),
+            expect.objectContaining({source: 'states/Failed', target: 'workflow-end'}),
+        ]))
+    })
+
+    test('adds focused action skeletons and continues a previous End state', () => {
+        const initial = {StartAt: 'Done', States: {Done: {Type: 'Pass', End: true}}}
+        const lambda = insertRootState(initial, 'lambda').definition as {States: Record<string, Record<string, unknown>>}
+        expect(lambda.States.Done).toEqual({Type: 'Pass', Next: 'LambdaInvoke'})
+        expect(lambda.States.LambdaInvoke).toEqual({
+            Type: 'Task', Resource: 'arn:aws:states:::lambda:invoke',
+            Parameters: {'Payload.$': '$', FunctionName: 'Enter Lambda function name'},
+            OutputPath: '$.Payload',
+            Retry: [{ErrorEquals: ['Lambda.ServiceException', 'Lambda.AWSLambdaException', 'Lambda.SdkClientException', 'Lambda.TooManyRequestsException'], IntervalSeconds: 2, MaxAttempts: 6, BackoffRate: 2}],
+            End: true,
+        })
+
+        const sns = insertRootState(initial, 'sns').definition as {States: Record<string, Record<string, unknown>>}
+        expect(sns.States.SnsPublish).toEqual({Type: 'Task', Resource: 'arn:aws:states:::sns:publish', Parameters: {TopicArn: ''}, End: true})
+
+        const integrations = [
+            ['sqs-send-message', 'SqsSendMessage', 'arn:aws:states:::sqs:sendMessage'],
+            ['dynamodb-put-item', 'DynamoDbPutItem', 'arn:aws:states:::dynamodb:putItem'],
+            ['dynamodb-get-item', 'DynamoDbGetItem', 'arn:aws:states:::dynamodb:getItem'],
+            ['dynamodb-update-item', 'DynamoDbUpdateItem', 'arn:aws:states:::dynamodb:updateItem'],
+            ['dynamodb-delete-item', 'DynamoDbDeleteItem', 'arn:aws:states:::dynamodb:deleteItem'],
+            ['eventbridge-put-events', 'EventBridgePutEvents', 'arn:aws:states:::events:putEvents'],
+            ['ecs-run-task', 'EcsRunTask', 'arn:aws:states:::ecs:runTask'],
+            ['ecs-run-task-sync', 'EcsRunTaskSync', 'arn:aws:states:::ecs:runTask.sync'],
+            ['states-start-execution', 'StartExecution', 'arn:aws:states:::states:startExecution'],
+        ] as const
+        integrations.forEach(([action, stateName, taskResource]) => {
+            const workflow = insertRootState(initial, action).definition as {States: Record<string, Record<string, unknown>>}
+            expect(workflow.States[stateName]).toMatchObject({Type: 'Task', Resource: taskResource, Parameters: expect.any(Object)})
+        })
+    })
+
+    test('shows only live-audited integrations grouped by service', async () => {
+        getCloudResource.mockResolvedValue(resource)
+        listCloudResources.mockResolvedValue([])
+        renderStudio()
+
+        for (const name of ['Lambda Invoke', 'SNS Publish', 'SQS SendMessage', 'DynamoDB PutItem', 'DynamoDB GetItem', 'DynamoDB UpdateItem', 'DynamoDB DeleteItem', 'EventBridge PutEvents', 'ECS RunTask', 'ECS RunTask (.sync)', 'Step Functions StartExecution']) {
+            expect(await screen.findByRole('button', {name})).toBeInTheDocument()
+        }
+        expect(screen.queryByRole('button', {name: /EC2 RunInstances/})).not.toBeInTheDocument()
+        expect(screen.queryByRole('button', {name: /API Gateway Invoke/})).not.toBeInTheDocument()
+    })
+
+    test('creates a Choice with two transient branch placeholders and no dangling ASL targets', () => {
+        const result = insertRootState({StartAt: 'Initial', States: {Initial: {Type: 'Pass', End: true}}}, 'choice')
+        const workflow = result.definition as {States: Record<string, Record<string, unknown>>}
+        const choice = workflow.States[result.name]
+        const graph = buildFlowGraph(result.definition)
+
+        expect(choice).toEqual({Type: 'Choice', Choices: [{Variable: '$.choice', IsPresent: true}]})
+        expect(JSON.stringify(result.definition)).not.toMatch(/placeholder|__ui|draft/i)
+        expect(graph.nodes.filter((node) => node.type === 'placeholder').map((node) => node.data.label)).toEqual(['Rule #1', 'Default'])
+        expect(graph.edges).toEqual(expect.arrayContaining([
+            expect.objectContaining({source: `states/${result.name}`, target: `states/${result.name}/placeholder-0`, label: 'Rule #1'}),
+            expect.objectContaining({source: `states/${result.name}`, target: `states/${result.name}/placeholder-default`, label: 'Default'}),
+            expect.objectContaining({source: `states/${result.name}/placeholder-0`, target: 'workflow-end'}),
+            expect.objectContaining({source: `states/${result.name}/placeholder-default`, target: 'workflow-end'}),
+        ]))
+    })
+
+    test('assigns Lambda and SNS to Choice lanes, edits the rule, and saves marker-free valid ASL', async () => {
+        const simpleDefinition = JSON.stringify({StartAt: 'Initial', States: {Initial: {Type: 'Pass', End: true}}})
+        const simpleResource = {...resource, metadata: {...resource.metadata, definition: simpleDefinition}}
+        getCloudResource.mockResolvedValue(simpleResource)
+        listCloudResources.mockResolvedValue([])
+        updateCloudResource.mockResolvedValue(simpleResource)
+        const user = userEvent.setup()
+        renderStudio(simpleResource)
+
+        await user.click(await screen.findByRole('button', {name: 'Flow'}))
+        await user.click(screen.getByRole('button', {name: 'Choice'}))
+        expect(screen.getByRole('alert')).toHaveTextContent('1 error')
+        expect(screen.getByRole('button', {name: 'Save definition'})).toBeDisabled()
+        expect(screen.getByRole('button', {name: 'Rule #1: Drop state here'})).toBeInTheDocument()
+        expect(screen.getByRole('button', {name: 'Default: Drop state here'})).toBeInTheDocument()
+
+        await user.clear(screen.getByRole('textbox', {name: 'Rule 1 variable'}))
+        await user.type(screen.getByRole('textbox', {name: 'Rule 1 variable'}), '$.total')
+        await user.selectOptions(screen.getByRole('combobox', {name: 'Rule 1 operator'}), 'NumericEquals')
+        await user.clear(screen.getByRole('textbox', {name: 'Rule 1 value'}))
+        await user.type(screen.getByRole('textbox', {name: 'Rule 1 value'}), '42')
+
+        await user.click(screen.getByRole('button', {name: 'Rule #1: Drop state here'}))
+        await user.click(screen.getByRole('button', {name: 'Actions'}))
+        await user.click(screen.getByRole('button', {name: 'Lambda Invoke'}))
+        expect(screen.getByRole('button', {name: 'Save definition'})).toBeEnabled()
+        await user.click(screen.getByRole('button', {name: 'Default: Drop state here'}))
+        await user.click(screen.getByRole('button', {name: 'SNS Publish'}))
+
+        expect(screen.queryByText(/^\d+ errors?$/)).not.toBeInTheDocument()
+        expect(screen.getByRole('button', {name: 'Save definition'})).toBeEnabled()
+        await user.click(screen.getByRole('button', {name: 'Save definition'}))
+        await waitFor(() => expect(updateCloudResource).toHaveBeenCalledTimes(1))
+        const savedText = updateCloudResource.mock.calls[0][3].definition as string
+        const saved = JSON.parse(savedText) as {States: Record<string, Record<string, unknown> & {Choices?: Array<Record<string, unknown>>}>}
+        expect(saved.States.Choice.Choices?.[0]).toMatchObject({Variable: '$.total', NumericEquals: 42, Next: 'LambdaInvoke'})
+        expect(saved.States.Choice.Default).toBe('SnsPublish')
+        expect(saved.States.LambdaInvoke).toMatchObject({Type: 'Task', Resource: 'arn:aws:states:::lambda:invoke'})
+        expect(saved.States.SnsPublish).toMatchObject({Type: 'Task', Resource: 'arn:aws:states:::sns:publish'})
+        expect(savedText).not.toMatch(/placeholder|__ui|draft/i)
+        const graph = buildFlowGraph(saved)
+        expect(graph.nodes.some((node) => node.type === 'placeholder')).toBe(false)
+        expect(graph.edges).toEqual(expect.arrayContaining([
+            expect.objectContaining({source: 'states/Choice', target: 'states/LambdaInvoke'}),
+            expect.objectContaining({source: 'states/Choice', target: 'states/SnsPublish'}),
+            expect.objectContaining({source: 'states/LambdaInvoke', target: 'workflow-end'}),
+            expect.objectContaining({source: 'states/SnsPublish', target: 'workflow-end'}),
+        ]))
+    })
+
+    test('deleting an assigned Choice branch restores its placeholder and blocks saving', async () => {
+        const assignedDefinition = JSON.stringify({
+            StartAt: 'Choice',
+            States: {
+                Choice: {Type: 'Choice', Choices: [{Variable: '$.ok', BooleanEquals: true, Next: 'LambdaInvoke'}], Default: 'SnsPublish'},
+                LambdaInvoke: {Type: 'Task', Resource: 'arn:aws:states:::lambda:invoke', Parameters: {FunctionName: 'worker'}, End: true},
+                SnsPublish: {Type: 'Task', Resource: 'arn:aws:states:::sns:publish', Parameters: {TopicArn: 'topic'}, End: true},
+            },
+        })
+        const assignedResource = {...resource, metadata: {...resource.metadata, definition: assignedDefinition}}
+        getCloudResource.mockResolvedValue(assignedResource)
+        listCloudResources.mockResolvedValue([])
+        const user = userEvent.setup()
+        renderStudio(assignedResource)
+
+        await user.click(await screen.findByRole('button', {name: 'Delete LambdaInvoke'}))
+
+        expect(screen.getByText('1 error')).toBeInTheDocument()
+        expect(screen.getByRole('button', {name: 'Rule #1: Drop state here'})).toBeInTheDocument()
+        expect(screen.getByRole('button', {name: 'Save definition'})).toBeDisabled()
+        expect(screen.getByRole('button', {name: 'SnsPublish'})).toBeInTheDocument()
+    })
+
+    test.each([
+        ['Succeed', {Type: 'Succeed', UnknownTerminalField: {kept: true}}],
+        ['Fail', {Type: 'Fail', Error: 'OriginalFailure', UnknownTerminalField: {kept: true}}],
+    ])('prepends Lambda and SNS from a %s start without detached states', (_type, terminalState) => {
+        const initial = {StartAt: 'Terminal', States: {Terminal: terminalState}}
+        const lambdaResult = insertRootState(initial, 'lambda')
+        const snsResult = insertRootState(lambdaResult.definition, 'sns')
+        const workflow = snsResult.definition as {StartAt: string; States: Record<string, Record<string, unknown>>}
+        const graph = buildFlowGraph(snsResult.definition)
+
+        expect(workflow.StartAt).toBe('SnsPublish')
+        expect(workflow.States.SnsPublish).toMatchObject({Type: 'Task', Next: 'LambdaInvoke'})
+        expect(workflow.States.SnsPublish.End).toBeUndefined()
+        expect(workflow.States.LambdaInvoke).toMatchObject({Type: 'Task', Next: 'Terminal'})
+        expect(workflow.States.LambdaInvoke.End).toBeUndefined()
+        expect(workflow.States.Terminal).toEqual(terminalState)
+        expect(graph.edges).toEqual(expect.arrayContaining([
+            expect.objectContaining({source: 'workflow-start', target: 'states/SnsPublish'}),
+            expect.objectContaining({source: 'states/SnsPublish', target: 'states/LambdaInvoke'}),
+            expect.objectContaining({source: 'states/LambdaInvoke', target: 'states/Terminal'}),
+        ]))
+        Object.values(workflow.States).forEach((state) => {
+            if (state.Type === 'Succeed' || state.Type === 'Fail') {
+                expect(state.Next).toBeUndefined()
+                expect(state.End).toBeUndefined()
+            }
+        })
+    })
+
+    test.each([
+        ['succeed', 'Fail'],
+        ['fail', 'Succeed'],
+    ] as const)('extends an explicit terminal safely when adding %s', (action, originalType) => {
+        const initial = {StartAt: 'Terminal', States: {Terminal: {Type: originalType, ...(originalType === 'Fail' ? {Error: 'OriginalFailure'} : {}), UnknownTerminalField: {kept: true}}}}
+        const result = insertRootState(initial, action)
+        const workflow = result.definition as {States: Record<string, Record<string, unknown>>}
+
+        expect(workflow.States.Terminal).toEqual({Type: 'Pass', Next: result.name, UnknownTerminalField: {kept: true}})
+        expect(workflow.States[result.name]).toMatchObject({Type: action === 'succeed' ? 'Succeed' : 'Fail'})
+        expect(workflow.States[result.name].Next).toBeUndefined()
+        expect(workflow.States[result.name].End).toBeUndefined()
+    })
+
+    test('renames only within the owning States scope and rewrites start, next, choice, and catch references', () => {
+        const source = {
+            StartAt: 'Work',
+            States: {
+                Work: {Type: 'Task', Next: 'Decision', Catch: [{ErrorEquals: ['States.ALL'], Next: 'Failed'}], Unknown: true},
+                Decision: {Type: 'Choice', Choices: [{Variable: '$.ok', BooleanEquals: true, Next: 'Work'}], Default: 'Work'},
+                Failed: {Type: 'Fail'},
+                Nested: {Type: 'Parallel', Branches: [{StartAt: 'Work', States: {Work: {Type: 'Pass', End: true}}}]},
+            },
+        }
+        const renamed = renameStateInScope(source, ['states', 'Work'], 'Process')!.definition as {StartAt: string; States: Record<string, Record<string, unknown>>}
+        expect(renamed.StartAt).toBe('Process')
+        expect(renamed.States.Work).toBeUndefined()
+        expect(renamed.States.Process).toMatchObject({Next: 'Decision', Catch: [{Next: 'Failed'}], Unknown: true})
+        expect(renamed.States.Decision).toMatchObject({Choices: [{Next: 'Process'}], Default: 'Process'})
+        expect((renamed.States.Nested.Branches as Array<{StartAt: string}>)[0].StartAt).toBe('Work')
+    })
+
+    test('adds an unattached Lambda from the palette and supports local undo and redo', async () => {
+        getCloudResource.mockResolvedValue(resource)
+        listCloudResources.mockResolvedValue([])
+        const user = userEvent.setup()
+        renderStudio()
+
+        await screen.findByRole('button', {name: 'Work'})
+        await user.click(screen.getByRole('button', {name: 'Lambda Invoke'}))
+        expect(screen.getByRole('alert')).toHaveTextContent('Task states reference a Lambda that is not in the current inventory')
+        await user.click(screen.getByRole('button', {name: 'Definition'}))
+        expect((screen.getByRole('textbox', {name: 'Complete ASL definition'}) as HTMLTextAreaElement).value).toContain('"FunctionName": "Enter Lambda function name"')
+        expect(screen.getByRole('button', {name: 'Undo'})).toBeEnabled()
+
+        await user.click(screen.getByRole('button', {name: 'Undo'}))
+        expect(screen.queryByRole('button', {name: 'LambdaInvoke'})).not.toBeInTheDocument()
+        await user.click(screen.getByRole('button', {name: 'Redo'}))
+        expect(screen.getByRole('button', {name: 'LambdaInvoke'})).toBeInTheDocument()
+    })
+
+    test('shows the complete editable workflow definition rather than only the selected state', async () => {
+        getCloudResource.mockResolvedValue(resource)
+        const user = userEvent.setup()
+        renderStudio()
+
+        await user.click(await screen.findByRole('button', {name: 'Decision'}))
+        await user.click(screen.getByRole('button', {name: 'Definition'}))
+        const editor = screen.getByRole('textbox', {name: 'Complete ASL definition'})
+        expect((editor as HTMLTextAreaElement).value).toContain('"Custom": [')
+        expect((editor as HTMLTextAreaElement).value).toContain('"StartAt": "Work"')
+    })
+
+    test('deletes a state from its compact node button without selecting the node first', async () => {
+        getCloudResource.mockResolvedValue(resource)
+        listCloudResources.mockResolvedValue([])
+        const user = userEvent.setup()
+        renderStudio()
+
+        await screen.findByRole('button', {name: 'Delete Work'})
+        await user.click(screen.getByRole('button', {name: 'Delete Work'}))
+        expect(screen.queryByRole('button', {name: 'Delete Work'})).not.toBeInTheDocument()
+        expect(screen.queryByRole('button', {name: 'Work'})).not.toBeInTheDocument()
+        expect(screen.getByRole('button', {name: 'Save definition'})).toBeEnabled()
+    })
+
+    test('uses deterministic deletion for linear, terminal, catch, and converging references', () => {
+        const linear = deleteStateInScope({StartAt: 'A', States: {A: {Type: 'Pass', Next: 'B'}, B: {Type: 'Pass', Next: 'C'}, C: {Type: 'Pass', End: true}}}, ['states', 'B'])
+        expect(linear).toEqual({definition: {StartAt: 'A', States: {A: {Type: 'Pass', Next: 'C'}, C: {Type: 'Pass', End: true}}}})
+
+        const terminal = deleteStateInScope({StartAt: 'Choice', States: {
+            Choice: {Type: 'Choice', Choices: [{Variable: '$.kind', StringEquals: 'purchase', Next: 'Result'}, {Variable: '$.kind', StringEquals: 'refund', Next: 'Result'}], Default: 'Result'},
+            Purchase: {Type: 'Task', Next: 'Result', Catch: [{ErrorEquals: ['States.ALL'], Next: 'Result'}]},
+            Refund: {Type: 'Task', Next: 'Result'},
+            Result: {Type: 'Pass', End: true},
+        }}, ['states', 'Result'])
+        expect(terminal).toEqual({definition: {StartAt: 'Choice', States: {
+            Choice: {Type: 'Choice', Choices: [{Variable: '$.kind', StringEquals: 'purchase'}, {Variable: '$.kind', StringEquals: 'refund'}]},
+            Purchase: {Type: 'Task', End: true},
+            Refund: {Type: 'Task', End: true},
+        }}})
+    })
+
+    test('updates nested Parallel and Map StartAt and rejects sole nested and self-loop deletion', () => {
+        const source = {StartAt: 'Parallel', States: {
+            Parallel: {Type: 'Parallel', Branches: [{StartAt: 'First', States: {First: {Type: 'Pass', Next: 'Second'}, Second: {Type: 'Pass', End: true}}}], Next: 'Map'},
+            Map: {Type: 'Map', ItemProcessor: {StartAt: 'ItemFirst', States: {ItemFirst: {Type: 'Pass', Next: 'ItemSecond'}, ItemSecond: {Type: 'Pass', End: true}}}, End: true},
+        }}
+        const parallel = deleteStateInScope(source, ['states', 'Parallel', 'branch-0', 'First'])
+        expect('definition' in parallel && ((parallel.definition.States as Record<string, Record<string, unknown>>).Parallel.Branches as Array<{StartAt: string}>)[0].StartAt).toBe('Second')
+        const map = deleteStateInScope('definition' in parallel ? parallel.definition : source, ['states', 'Map', 'items', 'ItemFirst'])
+        expect('definition' in map && (((map.definition.States as Record<string, Record<string, unknown>>).Map.ItemProcessor as {StartAt: string}).StartAt)).toBe('ItemSecond')
+        expect(deleteStateInScope({StartAt: 'Parallel', States: {Parallel: {Type: 'Parallel', Branches: [{StartAt: 'Only', States: {Only: {Type: 'Pass', End: true}}}], End: true}}}, ['states', 'Parallel', 'branch-0', 'Only'])).toEqual({error: 'A Parallel branch or Map item scope must contain at least one state.'})
+        expect(deleteStateInScope({StartAt: 'Loop', States: {Loop: {Type: 'Pass', Next: 'Loop'}, Other: {Type: 'Pass', End: true}}}, ['states', 'Loop'])).toEqual({error: 'Cannot delete Loop because it transitions to itself.'})
+    })
+
+    test('allows a sole root state to become a transient empty draft but prevents saving it', async () => {
+        const sole = JSON.stringify({StartAt: 'Only', States: {Only: {Type: 'Pass', End: true}}})
+        const soleResource = {...resource, metadata: {...resource.metadata, definition: sole}}
+        getCloudResource.mockResolvedValue(soleResource)
+        listCloudResources.mockResolvedValue([])
+        const user = userEvent.setup()
+        renderStudio(soleResource)
+
+        await user.click(await screen.findByRole('button', {name: 'Delete Only'}))
+        expect(screen.getByText(/Workflow must contain at least one state/)).toBeInTheDocument()
+        expect(screen.getByRole('button', {name: 'Save definition'})).toBeDisabled()
+        expect(screen.getAllByText('Add your first state')).toHaveLength(2)
+    })
+
+    test('blocks toolbar deletion of boundaries and Choice placeholders with a visible message', async () => {
+        const choiceResource = {...resource, metadata: {...resource.metadata, definition: JSON.stringify({StartAt: 'Choice', States: {Choice: {Type: 'Choice', Choices: [{Variable: '$.ok', IsPresent: true}]}}})}}
+        getCloudResource.mockResolvedValue(choiceResource)
+        listCloudResources.mockResolvedValue([])
+        const user = userEvent.setup()
+        renderStudio(choiceResource)
+
+        await user.click(await screen.findByRole('button', {name: 'Start'}))
+        await user.click(screen.getByRole('button', {name: 'Delete selected state'}))
+        expect(screen.getByText(/Start, End, empty guidance, and Choice branch placeholders cannot be deleted/)).toBeInTheDocument()
+        await user.click(screen.getByRole('button', {name: 'Rule #1: Drop state here'}))
+        await user.click(screen.getByRole('button', {name: 'Delete selected state'}))
+        expect(screen.getByRole('button', {name: 'Choice'})).toBeInTheDocument()
+        expect(screen.getByText(/Start, End, empty guidance, and Choice branch placeholders cannot be deleted/)).toBeInTheDocument()
+    })
+
+    test('imports and renders a complete two-rule Choice workflow converging on one Result Handler', async () => {
+        const initialResource = {...resource, metadata: {...resource.metadata, definition: JSON.stringify({StartAt: 'Initial', States: {Initial: {Type: 'Pass', End: true}}})}}
+        const retry = [{
+            ErrorEquals: ['Lambda.ServiceException', 'Lambda.AWSLambdaException', 'Lambda.SdkClientException', 'Lambda.TooManyRequestsException'],
+            IntervalSeconds: 2,
+            MaxAttempts: 6,
+            BackoffRate: 2,
+        }]
+        const supplied = {
+            Comment: 'A description of my state machine',
+            StartAt: 'Choice',
+            States: {
+                Choice: {Type: 'Choice', Choices: [{Variable: '$.type', StringEquals: 'PURCHASE', Next: 'Purchase Handler'}, {Variable: '$.type', StringEquals: 'REFUND', Next: 'Refund Handler'}]},
+                'Purchase Handler': {Type: 'Task', Resource: 'arn:aws:states:::lambda:invoke', OutputPath: '$.Payload', Parameters: {'Payload.$': '$', FunctionName: 'arn:aws:lambda:us-east-1:755314965794:function:PurchaseHandler:$LATEST'}, Retry: retry, Next: 'Result Handler'},
+                'Result Handler': {Type: 'Task', Resource: 'arn:aws:states:::lambda:invoke', OutputPath: '$.Payload', Parameters: {'Payload.$': '$', FunctionName: 'arn:aws:lambda:us-east-1:755314965794:function:ResultHandler:$LATEST'}, Retry: retry, End: true},
+                'Refund Handler': {Type: 'Task', Resource: 'arn:aws:states:::lambda:invoke', OutputPath: '$.Payload', Parameters: {'Payload.$': '$', FunctionName: 'arn:aws:lambda:us-east-1:755314965794:function:RefundHandler:$LATEST'}, Retry: retry, Next: 'Result Handler'},
+            },
+        }
+        getCloudResource.mockResolvedValue(initialResource)
+        listCloudResources.mockResolvedValue([])
+        updateCloudResource.mockResolvedValue(initialResource)
+        const user = userEvent.setup()
+        renderStudio(initialResource)
+
+        await user.click(await screen.findByRole('button', {name: 'Definition'}))
+        fireEvent.change(screen.getByRole('textbox', {name: 'Complete ASL definition'}), {target: {value: JSON.stringify(supplied, null, 2)}})
+        await user.click(screen.getByRole('button', {name: 'Apply to graph'}))
+
+        expect(screen.getByRole('button', {name: 'Purchase Handler'})).toBeInTheDocument()
+        expect(screen.getByRole('button', {name: 'Refund Handler'})).toBeInTheDocument()
+        expect(screen.getAllByRole('button', {name: 'Result Handler'})).toHaveLength(1)
+        const graph = buildFlowGraph(supplied)
+        expect(graph.edges.filter((edge) => edge.target === 'states/Result Handler')).toHaveLength(2)
+        expect(graph.nodes.some((node) => node.type === 'placeholder')).toBe(false)
+        expect(graph.nodes.find((node) => node.data.label === 'Purchase Handler')?.position.x).toBeLessThan(graph.nodes.find((node) => node.data.label === 'Choice')?.position.x ?? 0)
+        expect(graph.nodes.find((node) => node.data.label === 'Refund Handler')?.position.x).toBeGreaterThan(graph.nodes.find((node) => node.data.label === 'Choice')?.position.x ?? 0)
+        await user.click(screen.getByRole('button', {name: 'Save definition'}))
+        await waitFor(() => expect(updateCloudResource).toHaveBeenCalledTimes(1))
+        expect(JSON.parse(updateCloudResource.mock.calls[0][3].definition)).toEqual(supplied)
+    })
+
+    test('edits ordinary transitions and Choice targets to existing same-scope states', async () => {
+        const transitions = {StartAt: 'Choice', States: {
+            Choice: {Type: 'Choice', Choices: [{Variable: '$.action', StringEquals: 'purchase', Next: 'Purchase Handler'}], Default: 'Refund Handler'},
+            'Purchase Handler': {Type: 'Pass', End: true},
+            'Refund Handler': {Type: 'Pass', End: true},
+            'Result Handler': {Type: 'Succeed'},
+        }}
+        const transitionsResource = {...resource, metadata: {...resource.metadata, definition: JSON.stringify(transitions)}}
+        getCloudResource.mockResolvedValue(transitionsResource)
+        listCloudResources.mockResolvedValue([])
+        updateCloudResource.mockResolvedValue(transitionsResource)
+        const user = userEvent.setup()
+        renderStudio(transitionsResource)
+
+        await user.click(await screen.findByRole('button', {name: 'Choice'}))
+        await user.selectOptions(screen.getByRole('combobox', {name: 'Rule 1 target'}), 'Result Handler')
+        await user.selectOptions(screen.getByRole('combobox', {name: 'Default target'}), 'Result Handler')
+        await user.click(screen.getByRole('button', {name: 'Purchase Handler'}))
+        await user.selectOptions(screen.getByRole('combobox', {name: 'State transition'}), 'Result Handler')
+        await user.click(screen.getByRole('button', {name: 'Refund Handler'}))
+        await user.selectOptions(screen.getByRole('combobox', {name: 'State transition'}), 'Result Handler')
+        await user.click(screen.getByRole('button', {name: 'Save definition'}))
+        await waitFor(() => expect(updateCloudResource).toHaveBeenCalledTimes(1))
+        const saved = JSON.parse(updateCloudResource.mock.calls[0][3].definition) as typeof transitions
+        expect(saved.States.Choice).toMatchObject({Choices: [{Next: 'Result Handler'}], Default: 'Result Handler'})
+        expect(saved.States['Purchase Handler']).toEqual({Type: 'Pass', Next: 'Result Handler'})
+        expect(saved.States['Refund Handler']).toEqual({Type: 'Pass', Next: 'Result Handler'})
+    })
+
+    test('splices an unattached Lambda into only the selected Choice edge', () => {
+        const supplied = {StartAt: 'Choice', States: {
+            Choice: {Type: 'Choice', Choices: [
+                {Variable: '$.type', StringEquals: 'PURCHASE', Next: 'Purchase Handler'},
+                {Variable: '$.type', StringEquals: 'REFUND', Next: 'Refund Handler'},
+            ]},
+            'Purchase Handler': {Type: 'Task', Resource: 'arn:aws:states:::lambda:invoke', Parameters: {'Payload.$': '$', FunctionName: 'purchase'}, Retry: [{ErrorEquals: ['States.ALL'], MaxAttempts: 3}], Next: 'Result Handler'},
+            'Refund Handler': {Type: 'Task', Resource: 'arn:aws:states:::lambda:invoke', Parameters: {'Payload.$': '$', FunctionName: 'refund'}, Next: 'Result Handler'},
+            'Result Handler': {Type: 'Succeed'},
+        }}
+        const result = spliceLambdaIntoEdge(supplied, {sourcePath: ['states', 'Choice'], kind: 'choice', choiceIndex: 0})
+        const saved = result?.definition as typeof supplied & {States: Record<string, Record<string, unknown>>}
+        expect(saved.States.Choice.Choices[0].Next).toBe('LambdaInvoke')
+        expect(saved.States.Choice.Choices[1]).toEqual(supplied.States.Choice.Choices[1])
+        expect(saved.States.LambdaInvoke).toMatchObject({Type: 'Task', Next: 'Purchase Handler'})
+        expect(saved.States['Purchase Handler']).toEqual(supplied.States['Purchase Handler'])
+        expect(saved.States['Refund Handler']).toEqual(supplied.States['Refund Handler'])
+    })
+
+    test('splices any confirmed service integration into the selected edge', () => {
+        const source = {StartAt: 'First', States: {First: {Type: 'Pass', Next: 'Last'}, Last: {Type: 'Succeed'}}}
+        const result = spliceTaskIntoEdge(source, {sourcePath: ['states', 'First'], kind: 'next'}, 'sqs-send-message')
+        const states = result?.definition.States as Record<string, Record<string, unknown>>
+
+        expect(states.First.Next).toBe('SqsSendMessage')
+        expect(states.SqsSendMessage).toMatchObject({Resource: 'arn:aws:states:::sqs:sendMessage', Next: 'Last'})
+        expect(states.Last).toEqual(source.States.Last)
+    })
+
+    test('loads the definition once for the selected machine despite a list refresh', async () => {
+        getCloudResource.mockResolvedValue(resource)
+
+        const {queryClient, rerender} = renderStudio()
+
+        await screen.findByRole('button', {name: 'Decision'})
+        rerender(<QueryClientProvider client={queryClient}><WorkflowStudio resource={{...resource, name: 'renamed in list'}}/></QueryClientProvider>)
+
+        expect(getCloudResource).toHaveBeenCalledTimes(1)
+    })
+
+    test('shows a describe failure', async () => {
+        getCloudResource.mockRejectedValue(new Error('DescribeStateMachine failed'))
+
+        renderStudio()
+
+        expect(await screen.findByRole('alert')).toHaveTextContent('Unable to load state machine definition: DescribeStateMachine failed')
+    })
+
+    test('marks a direct Lambda ARN absent from inventory and rewrites only its Resource', async () => {
+        getCloudResource.mockResolvedValue(resource)
+        listCloudResources.mockResolvedValue([{
+            id: 'orders-worker', name: 'orders-worker', cloud: 'aws', service: 'serverless', type: 'lambda', region: null, createdAt: null,
+            metadata: {arn: 'arn:aws:lambda:us-east-1:000000000000:function:orders-worker'},
+        }, {
+            id: 'local', name: 'local', cloud: 'aws', service: 'serverless', type: 'lambda', region: null, createdAt: null,
+            metadata: {arn: 'arn:aws:lambda:local'},
+        }])
+        const user = userEvent.setup()
+        renderStudio()
+
+        await user.click(await screen.findByRole('button', {name: 'DirectMissing'}))
+        expect(screen.getByRole('alert')).toHaveTextContent('2 Task states reference a Lambda that is not in the current inventory')
+        await user.selectOptions(await screen.findByRole('combobox', {name: 'Lambda function'}), 'arn:aws:lambda:us-east-1:000000000000:function:orders-worker')
+
+        expect(screen.queryByRole('combobox', {name: 'Lambda function'})).not.toBeInTheDocument()
+        await user.click(screen.getByRole('button', {name: 'Definition'}))
+        expect((screen.getByRole('textbox', {name: 'Complete ASL definition'}) as HTMLTextAreaElement).value).toContain('"Resource": "arn:aws:lambda:us-east-1:000000000000:function:orders-worker"')
+        expect((screen.getByRole('textbox', {name: 'Complete ASL definition'}) as HTMLTextAreaElement).value).toContain('"UnknownTaskField":')
+    })
+
+    test('recognizes Lambda service integrations and rewrites only Parameters.FunctionName', async () => {
+        getCloudResource.mockResolvedValue(resource)
+        listCloudResources.mockResolvedValue([{
+            id: 'orders-worker', name: 'orders-worker', cloud: 'aws', service: 'serverless', type: 'lambda', region: null, createdAt: null,
+            metadata: {arn: 'arn:aws:lambda:us-east-1:000000000000:function:orders-worker'},
+        }, {
+            id: 'local', name: 'local', cloud: 'aws', service: 'serverless', type: 'lambda', region: null, createdAt: null,
+            metadata: {arn: 'arn:aws:lambda:local'},
+        }])
+        const user = userEvent.setup()
+        renderStudio()
+
+        await user.click(await screen.findByRole('button', {name: 'IntegrationMissing'}))
+        await user.selectOptions(await screen.findByRole('combobox', {name: 'Lambda function'}), 'arn:aws:lambda:us-east-1:000000000000:function:orders-worker')
+
+        await user.click(screen.getByRole('button', {name: 'Definition'}))
+        const editor = screen.getByRole('textbox', {name: 'Complete ASL definition'})
+        expect((editor as HTMLTextAreaElement).value).toContain('"Resource": "arn:aws:states:::lambda:invoke"')
+        expect((editor as HTMLTextAreaElement).value).toContain('"FunctionName": "arn:aws:lambda:us-east-1:000000000000:function:orders-worker"')
+        expect((editor as HTMLTextAreaElement).value).toContain('"Payload":')
+    })
+
+    test('edits Lambda retry and catch rules while preserving rule fields and refreshing catch targets', async () => {
+        getCloudResource.mockResolvedValue(resource)
+        listCloudResources.mockResolvedValue([])
+        const user = userEvent.setup()
+        renderStudio()
+
+        await user.click(await screen.findByRole('button', {name: 'Work'}))
+        expect(screen.getByRole('heading', {name: 'Task policy'})).toBeInTheDocument()
+        await user.clear(screen.getByRole('spinbutton', {name: 'Retry 1 IntervalSeconds'}))
+        await user.type(screen.getByRole('spinbutton', {name: 'Retry 1 IntervalSeconds'}), '5')
+        await user.selectOptions(screen.getByRole('combobox', {name: 'Catch 1 Next'}), 'Decision')
+        await user.click(screen.getByRole('button', {name: 'Add retry'}))
+        await user.click(screen.getByRole('button', {name: 'Add catch'}))
+        await user.click(screen.getAllByRole('button', {name: 'Remove retry'})[1])
+        await user.click(screen.getAllByRole('button', {name: 'Remove catch'})[1])
+
+        await user.click(screen.getByRole('button', {name: 'Save definition'}))
+        await waitFor(() => expect(updateCloudResource).toHaveBeenCalledTimes(1))
+        const saved = JSON.parse(updateCloudResource.mock.calls[0][3].definition) as {States: Record<string, Record<string, unknown> & {Retry: Array<Record<string, unknown>>; Catch: Array<Record<string, unknown>>}>}
+        expect(saved.States.Work.Retry).toEqual([expect.objectContaining({ErrorEquals: ['States.ALL'], IntervalSeconds: 5, UnknownRetryField: {kept: true}})])
+        expect(saved.States.Work.Catch).toEqual([expect.objectContaining({ErrorEquals: ['States.ALL'], Next: 'Decision', UnknownCatchField: {kept: true}})])
+        expect(saved.States.Work.UnknownTaskField).toEqual({kept: true})
+    })
+
+    test('attaches an inventory SNS topic to an SNS publish task without replacing Parameters', async () => {
+        getCloudResource.mockResolvedValue(resource)
+        listCloudResources.mockImplementation((_: string, service: string) => Promise.resolve(service === 'notifications' ? [{
+            id: 'arn:aws:sns:us-east-1:000000000000:orders', name: 'orders', cloud: 'aws', service: 'notifications', type: 'topic', region: null, createdAt: null, metadata: {},
+        }] : []))
+        const user = userEvent.setup()
+        renderStudio()
+
+        await user.click(await screen.findByRole('button', {name: 'PublishNotice'}))
+        expect(screen.getByRole('heading', {name: 'SNS Publish Task'})).toBeInTheDocument()
+        expect(listCloudResources).toHaveBeenCalledWith('aws', 'notifications', undefined, expect.any(AbortSignal))
+        await user.selectOptions(screen.getByRole('combobox', {name: 'SNS topic'}), 'arn:aws:sns:us-east-1:000000000000:orders')
+        await user.click(screen.getByRole('button', {name: 'Save definition'}))
+        await waitFor(() => expect(updateCloudResource).toHaveBeenCalledTimes(1))
+        const saved = JSON.parse(updateCloudResource.mock.calls[0][3].definition) as {States: Record<string, {Parameters: Record<string, unknown>}>}
+        expect(saved.States.PublishNotice.Parameters).toEqual({TopicArn: 'arn:aws:sns:us-east-1:000000000000:orders', Message: 'keep'})
+    })
+
+    test('edits SQS parameters from queue inventory and keeps shared task policy controls', async () => {
+        const selected = {...resource, metadata: {...resource.metadata, definition: JSON.stringify({StartAt: 'Send', States: {Send: {Type: 'Task', Resource: 'arn:aws:states:::sqs:sendMessage', Parameters: {QueueUrl: 'old', MessageBody: 'old', Unknown: 'keep'}, End: true}}})}}
+        getCloudResource.mockResolvedValue(selected)
+        updateCloudResource.mockResolvedValue(selected)
+        listCloudResources.mockImplementation((_: string, service: string) => Promise.resolve(service === 'messaging' ? [{id: 'orders', name: 'orders', cloud: 'aws', service: 'messaging', type: 'queue', region: null, createdAt: null, metadata: {queueUrl: 'http://localhost:4566/000000000000/orders'}}] : []))
+        const user = userEvent.setup()
+        renderStudio(selected)
+
+        expect(await screen.findByRole('heading', {name: 'SQS SendMessage'})).toBeInTheDocument()
+        await user.selectOptions(screen.getByRole('combobox', {name: 'SQS queue'}), 'http://localhost:4566/000000000000/orders')
+        await user.clear(screen.getByRole('textbox', {name: 'SQS message body'}))
+        await user.type(screen.getByRole('textbox', {name: 'SQS message body'}), 'hello from workflow')
+        await user.click(screen.getByRole('button', {name: 'Add retry'}))
+        await user.click(screen.getByRole('button', {name: 'Save definition'}))
+        await waitFor(() => expect(updateCloudResource).toHaveBeenCalledTimes(1))
+        const saved = JSON.parse(updateCloudResource.mock.calls[0][3].definition) as {States: Record<string, {Parameters: Record<string, unknown>; Retry: unknown[]}>}
+        expect(saved.States.Send.Parameters).toEqual({QueueUrl: 'http://localhost:4566/000000000000/orders', MessageBody: 'hello from workflow', Unknown: 'keep'})
+        expect(saved.States.Send.Retry).toHaveLength(1)
+    })
+
+    test('edits DynamoDB operation fields with a real table picker', async () => {
+        const selected = {...resource, metadata: {...resource.metadata, definition: JSON.stringify({StartAt: 'Put', States: {Put: {Type: 'Task', Resource: 'arn:aws:states:::dynamodb:putItem', Parameters: {TableName: 'old', Item: {id: {S: 'old'}}, Unknown: true}, End: true}}})}}
+        getCloudResource.mockResolvedValue(selected)
+        updateCloudResource.mockResolvedValue(selected)
+        listCloudResources.mockImplementation((_: string, service: string) => Promise.resolve(service === 'nosql' ? [{id: 'orders', name: 'orders', cloud: 'aws', service: 'nosql', type: 'dynamodb-table', region: null, createdAt: null, metadata: {}}] : []))
+        const user = userEvent.setup()
+        renderStudio(selected)
+
+        expect(await screen.findByRole('heading', {name: 'DynamoDB PutItem'})).toBeInTheDocument()
+        await user.selectOptions(screen.getByRole('combobox', {name: 'DynamoDB table'}), 'orders')
+        fireEvent.change(screen.getByRole('textbox', {name: 'Item'}), {target: {value: '{"id":{"S":"new"},"total":{"N":"42"}}'}})
+        await user.click(screen.getByRole('button', {name: 'Save definition'}))
+        await waitFor(() => expect(updateCloudResource).toHaveBeenCalledTimes(1))
+        const saved = JSON.parse(updateCloudResource.mock.calls[0][3].definition) as {States: Record<string, {Parameters: Record<string, unknown>}>}
+        expect(saved.States.Put.Parameters).toEqual({TableName: 'orders', Item: {id: {S: 'new'}, total: {N: '42'}}, Unknown: true})
+    })
+
+    test('edits EventBridge entries without collapsing imported entries', async () => {
+        const selected = {...resource, metadata: {...resource.metadata, definition: JSON.stringify({StartAt: 'Events', States: {Events: {Type: 'Task', Resource: 'arn:aws:states:::events:putEvents', Parameters: {Entries: [{EventBusName: 'old', Source: 'old.source', DetailType: 'old', Detail: {before: true}, Unknown: 'keep'}, {EventBusName: 'second', Source: 'second.source', DetailType: 'second', Detail: '{}'}]}, End: true}}})}}
+        getCloudResource.mockResolvedValue(selected)
+        updateCloudResource.mockResolvedValue(selected)
+        listCloudResources.mockImplementation((_: string, service: string) => Promise.resolve(service === 'events' ? [{id: 'event-bus:orders', name: 'orders', cloud: 'aws', service: 'events', type: 'event-bus', region: null, createdAt: null, metadata: {}}] : []))
+        const user = userEvent.setup()
+        renderStudio(selected)
+
+        expect(await screen.findByRole('heading', {name: 'EventBridge PutEvents'})).toBeInTheDocument()
+        await user.selectOptions(screen.getByRole('combobox', {name: 'EventBridge entry 1 event bus'}), 'orders')
+        await user.clear(screen.getByRole('textbox', {name: 'EventBridge entry 1 source'}))
+        await user.type(screen.getByRole('textbox', {name: 'EventBridge entry 1 source'}), 'orders.created')
+        await user.click(screen.getByRole('button', {name: 'Save definition'}))
+        await waitFor(() => expect(updateCloudResource).toHaveBeenCalledTimes(1))
+        const saved = JSON.parse(updateCloudResource.mock.calls[0][3].definition) as {States: Record<string, {Parameters: {Entries: Array<Record<string, unknown>>}}>}
+        expect(saved.States.Events.Parameters.Entries[0]).toMatchObject({EventBusName: 'orders', Source: 'orders.created', Unknown: 'keep'})
+        expect(saved.States.Events.Parameters.Entries[1]).toEqual({EventBusName: 'second', Source: 'second.source', DetailType: 'second', Detail: '{}'})
+    })
+
+    test('edits ECS and nested workflow parameters through action-specific forms', async () => {
+        const selected = {...resource, metadata: {...resource.metadata, definition: JSON.stringify({StartAt: 'Ecs', States: {Ecs: {Type: 'Task', Resource: 'arn:aws:states:::ecs:runTask.sync', Parameters: {Cluster: 'old', TaskDefinition: 'old'}, Next: 'Nested'}, Nested: {Type: 'Task', Resource: 'arn:aws:states:::states:startExecution', Parameters: {StateMachineArn: 'old', Input: {keep: true}}, End: true}}})}}
+        const childArn = 'arn:aws:states:us-east-1:000000000000:stateMachine:child'
+        getCloudResource.mockResolvedValue(selected)
+        updateCloudResource.mockResolvedValue(selected)
+        listCloudResources.mockImplementation((_: string, service: string) => Promise.resolve(service === 'workflows' ? [{id: childArn, name: 'child', cloud: 'aws', service: 'workflows', type: 'state-machine', region: null, createdAt: null, metadata: {machineType: 'STANDARD'}}] : []))
+        const user = userEvent.setup()
+        renderStudio(selected)
+
+        expect(await screen.findByRole('heading', {name: 'ECS RunTask (.sync)'})).toBeInTheDocument()
+        await user.clear(screen.getByRole('textbox', {name: 'ECS cluster'}))
+        await user.type(screen.getByRole('textbox', {name: 'ECS cluster'}), 'audit-cluster')
+        await user.clear(screen.getByRole('textbox', {name: 'ECS task definition'}))
+        await user.type(screen.getByRole('textbox', {name: 'ECS task definition'}), 'audit-task:1')
+        await user.click(screen.getByRole('button', {name: 'Nested'}))
+        expect(screen.getByRole('heading', {name: 'Step Functions StartExecution'})).toBeInTheDocument()
+        await user.selectOptions(screen.getByRole('combobox', {name: 'Nested state machine'}), childArn)
+        await user.click(screen.getByRole('button', {name: 'Save definition'}))
+        await waitFor(() => expect(updateCloudResource).toHaveBeenCalledTimes(1))
+        const saved = JSON.parse(updateCloudResource.mock.calls[0][3].definition) as {States: Record<string, {Parameters: Record<string, unknown>}>}
+        expect(saved.States.Ecs.Parameters).toMatchObject({Cluster: 'audit-cluster', TaskDefinition: 'audit-task:1'})
+        expect(saved.States.Nested.Parameters).toEqual({StateMachineArn: childArn, Input: {keep: true}})
+    })
+
+    test('saves the complete local ASL draft through the generic resource update API', async () => {
+        getCloudResource.mockResolvedValue(resource)
+        listCloudResources.mockResolvedValue([{
+            id: 'orders-worker', name: 'orders-worker', cloud: 'aws', service: 'serverless', type: 'lambda', region: null, createdAt: null,
+            metadata: {arn: 'arn:aws:lambda:us-east-1:000000000000:function:orders-worker'},
+        }])
+        let resolveUpdate: (value: CloudResource) => void = () => undefined
+        updateCloudResource.mockImplementation(() => new Promise<CloudResource>((resolve) => {
+            resolveUpdate = resolve
+        }))
+        const user = userEvent.setup()
+        const {queryClient} = renderStudio()
+        const invalidateQueries = vi.spyOn(queryClient, 'invalidateQueries')
+
+        const saveButton = screen.getByRole('button', {name: 'Save definition'})
+        expect(saveButton).toBeDisabled()
+        await user.click(await screen.findByRole('button', {name: 'DirectMissing'}))
+        await user.selectOptions(screen.getByRole('combobox', {name: 'Lambda function'}), 'arn:aws:lambda:us-east-1:000000000000:function:orders-worker')
+        await user.click(saveButton)
+
+        expect(screen.getByRole('status')).toHaveTextContent('Saving definition.')
+        const expectedDraft = JSON.parse(definition) as {States: Record<string, Record<string, unknown>>}
+        expectedDraft.States.DirectMissing.Resource = 'arn:aws:lambda:us-east-1:000000000000:function:orders-worker'
+        const expectedDefinition = JSON.stringify(expectedDraft)
+        expect(updateCloudResource).toHaveBeenCalledWith('aws', 'workflows', resource.id, {
+            definition: expectedDefinition,
+        })
+        const savedDefinition = JSON.parse(updateCloudResource.mock.calls[0][3].definition) as Record<string, unknown>
+        const savedStates = savedDefinition.States as Record<string, Record<string, unknown>>
+        expect(savedStates.DirectMissing).toMatchObject({
+            Resource: 'arn:aws:lambda:us-east-1:000000000000:function:orders-worker',
+            UnknownTaskField: {kept: true},
+        })
+        expect((savedStates.IntegrationMissing.Parameters as Record<string, unknown>).Payload).toEqual({keep: true})
+
+        resolveUpdate({...resource, metadata: {...resource.metadata, definition: expectedDefinition}})
+        expect(await screen.findByText('Definition saved.')).toBeInTheDocument()
+        expect(saveButton).toBeDisabled()
+        expect(invalidateQueries).toHaveBeenCalledWith({queryKey: ['cloud-resource', 'aws', 'workflows', resource.id]})
+        expect(invalidateQueries).toHaveBeenCalledWith({queryKey: ['cloud-console-resources', 'aws', 'workflows']})
+    })
+
+    test('retains the local draft and shows an accessible error when save fails', async () => {
+        getCloudResource.mockResolvedValue(resource)
+        listCloudResources.mockResolvedValue([{
+            id: 'orders-worker', name: 'orders-worker', cloud: 'aws', service: 'serverless', type: 'lambda', region: null, createdAt: null,
+            metadata: {arn: 'arn:aws:lambda:us-east-1:000000000000:function:orders-worker'},
+        }])
+        updateCloudResource.mockRejectedValue(new Error('UpdateStateMachine failed'))
+        const user = userEvent.setup()
+        renderStudio()
+
+        await user.click(await screen.findByRole('button', {name: 'DirectMissing'}))
+        await user.selectOptions(screen.getByRole('combobox', {name: 'Lambda function'}), 'arn:aws:lambda:us-east-1:000000000000:function:orders-worker')
+        await user.click(screen.getByRole('button', {name: 'Save definition'}))
+
+        expect(await screen.findByText('Unable to save definition: UpdateStateMachine failed')).toHaveAttribute('role', 'alert')
+        expect(screen.getByRole('button', {name: 'Save definition'})).toBeEnabled()
+        await user.click(screen.getByRole('button', {name: 'Definition'}))
+        expect((screen.getByRole('textbox', {name: 'Complete ASL definition'}) as HTMLTextAreaElement).value).toContain('"UnknownTaskField":')
+        expect((screen.getByRole('textbox', {name: 'Complete ASL definition'}) as HTMLTextAreaElement).value).toContain('"Resource": "arn:aws:lambda:us-east-1:000000000000:function:orders-worker"')
+    })
+
+    test('reloads a clean definition immediately and asks before discarding a draft', async () => {
+        const fresh = {...resource, metadata: {...resource.metadata, definition: JSON.stringify({StartAt: 'Fresh', States: {Fresh: {Type: 'Pass', End: true}}})}}
+        getCloudResource.mockResolvedValueOnce(resource).mockResolvedValueOnce(resource).mockResolvedValueOnce(fresh)
+        listCloudResources.mockResolvedValue([{id: 'orders-worker', name: 'orders-worker', cloud: 'aws', service: 'serverless', type: 'lambda', region: null, createdAt: null, metadata: {arn: 'arn:aws:lambda:us-east-1:000000000000:function:orders-worker'}}])
+        const user = userEvent.setup()
+        renderStudio()
+
+        await user.click(await screen.findByRole('button', {name: 'Reload'}))
+        expect(await screen.findByRole('button', {name: 'DirectMissing'})).toBeInTheDocument()
+        await user.click(screen.getByRole('button', {name: 'DirectMissing'}))
+        await user.selectOptions(screen.getByRole('combobox', {name: 'Lambda function'}), 'arn:aws:lambda:us-east-1:000000000000:function:orders-worker')
+        await user.click(screen.getByRole('button', {name: 'Reload'}))
+        expect(screen.getByRole('alertdialog')).toHaveTextContent('Discard local changes?')
+        await user.click(screen.getByRole('button', {name: 'Reload definition'}))
+        expect(await screen.findByRole('button', {name: 'Fresh'})).toBeInTheDocument()
+        expect(screen.getByRole('button', {name: 'Save definition'})).toBeDisabled()
+    })
+
+    test('checks the latest revision before saving and only overwrites after confirmation', async () => {
+        const loaded = {...resource, metadata: {...resource.metadata, revisionId: 'revision-1'}}
+        const changed = {...resource, metadata: {...resource.metadata, revisionId: 'revision-2'}}
+        getCloudResource.mockResolvedValueOnce(loaded).mockResolvedValueOnce(changed)
+        listCloudResources.mockResolvedValue([{id: 'orders-worker', name: 'orders-worker', cloud: 'aws', service: 'serverless', type: 'lambda', region: null, createdAt: null, metadata: {arn: 'arn:aws:lambda:us-east-1:000000000000:function:orders-worker'}}])
+        updateCloudResource.mockResolvedValue(loaded)
+        const user = userEvent.setup()
+        renderStudio()
+
+        await user.click(await screen.findByRole('button', {name: 'DirectMissing'}))
+        await user.selectOptions(screen.getByRole('combobox', {name: 'Lambda function'}), 'arn:aws:lambda:us-east-1:000000000000:function:orders-worker')
+        await user.click(screen.getByRole('button', {name: 'Save definition'}))
+        expect(await screen.findByText('Definition changed elsewhere')).toBeInTheDocument()
+        expect(updateCloudResource).not.toHaveBeenCalled()
+        expect(getCloudResource).toHaveBeenCalledWith('aws', 'workflows', resource.id)
+        await user.click(screen.getByRole('button', {name: 'Overwrite'}))
+        await waitFor(() => expect(updateCloudResource).toHaveBeenCalledTimes(1))
+        expect(updateCloudResource.mock.calls[0][3]).toEqual(expect.objectContaining({definition: expect.any(String)}))
+        expect(updateCloudResource.mock.calls[0][3]).not.toHaveProperty('revisionId')
+    })
+})
diff --git a/packages/frontend/src/components/WorkflowStudio.tsx b/packages/frontend/src/components/WorkflowStudio.tsx
new file mode 100644
index 0000000..1db6d8f
--- /dev/null
+++ b/packages/frontend/src/components/WorkflowStudio.tsx
@@ -0,0 +1,1490 @@
+import {type ReactNode, useEffect, useRef, useState} from 'react'
+import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query'
+import {BellRing, Braces, CheckCircle2, CirclePlay, CircleStop, Clock3, Container, Database, GitBranch, ListTree, LocateFixed, MessageSquare, Minus, Plus, Radio, Redo2, Repeat2, Search, Split, Trash2, Undo2, Workflow, XCircle, Zap, type LucideIcon} from 'lucide-react'
+import {Background, BaseEdge, EdgeLabelRenderer, getSmoothStepPath, Handle, MarkerType, Position, ReactFlow, type Edge, type EdgeProps, type Node, type NodeProps, type ReactFlowInstance} from '@xyflow/react'
+import '@xyflow/react/dist/style.css'
+import {getCloudResource, listCloudResources, updateCloudResource} from '@/api/cloudProxyClient'
+import {cloudQueryKeys, useCloudResourceQuery} from '@/api/queries/cloudQueries'
+import type {CloudResource} from '@/types/resource'
+
+type AslObject = Record<string, unknown>
+
+interface StateNodeData extends Record<string, unknown> {
+    label: string
+    state?: AslObject
+    stateType: string
+    retry: boolean
+    path?: string[]
+    unattached?: boolean
+    onDelete?: () => void
+    choiceBranches?: string[]
+    choicePath?: string[]
+    choiceBranch?: number | 'default'
+    integration?: TaskAction
+    onAssign?: (action: TaskAction) => void
+}
+
+type StateNode = Node<StateNodeData>
+
+type TaskAction = 'lambda' | 'sns' | 'sqs-send-message' | 'dynamodb-put-item' | 'dynamodb-get-item' | 'dynamodb-update-item' | 'dynamodb-delete-item' | 'eventbridge-put-events' | 'ecs-run-task' | 'ecs-run-task-sync' | 'states-start-execution'
+type FlowAction = 'pass' | 'choice' | 'wait' | 'succeed' | 'fail'
+type WorkflowAction = TaskAction | FlowAction
+
+interface TaskIntegration {
+    action: TaskAction
+    service: string
+    label: string
+    nodeLabel: string
+    stateName: string
+    resource: string
+    icon: LucideIcon
+    parameters: AslObject
+}
+
+const TASK_INTEGRATIONS: TaskIntegration[] = [
+    {action: 'lambda', service: 'Lambda', label: 'Invoke', nodeLabel: 'Lambda: Invoke', stateName: 'LambdaInvoke', resource: 'arn:aws:states:::lambda:invoke', icon: Zap, parameters: {'Payload.$': '$', FunctionName: 'Enter Lambda function name'}},
+    {action: 'sns', service: 'SNS', label: 'Publish', nodeLabel: 'SNS: Publish', stateName: 'SnsPublish', resource: 'arn:aws:states:::sns:publish', icon: BellRing, parameters: {TopicArn: ''}},
+    {action: 'sqs-send-message', service: 'SQS', label: 'SendMessage', nodeLabel: 'SQS: SendMessage', stateName: 'SqsSendMessage', resource: 'arn:aws:states:::sqs:sendMessage', icon: MessageSquare, parameters: {QueueUrl: '', MessageBody: ''}},
+    {action: 'dynamodb-put-item', service: 'DynamoDB', label: 'PutItem', nodeLabel: 'DynamoDB: PutItem', stateName: 'DynamoDbPutItem', resource: 'arn:aws:states:::dynamodb:putItem', icon: Database, parameters: {TableName: '', Item: {}}},
+    {action: 'dynamodb-get-item', service: 'DynamoDB', label: 'GetItem', nodeLabel: 'DynamoDB: GetItem', stateName: 'DynamoDbGetItem', resource: 'arn:aws:states:::dynamodb:getItem', icon: Database, parameters: {TableName: '', Key: {}}},
+    {action: 'dynamodb-update-item', service: 'DynamoDB', label: 'UpdateItem', nodeLabel: 'DynamoDB: UpdateItem', stateName: 'DynamoDbUpdateItem', resource: 'arn:aws:states:::dynamodb:updateItem', icon: Database, parameters: {TableName: '', Key: {}, UpdateExpression: '', ExpressionAttributeValues: {}}},
+    {action: 'dynamodb-delete-item', service: 'DynamoDB', label: 'DeleteItem', nodeLabel: 'DynamoDB: DeleteItem', stateName: 'DynamoDbDeleteItem', resource: 'arn:aws:states:::dynamodb:deleteItem', icon: Database, parameters: {TableName: '', Key: {}}},
+    {action: 'eventbridge-put-events', service: 'EventBridge', label: 'PutEvents', nodeLabel: 'EventBridge: PutEvents', stateName: 'EventBridgePutEvents', resource: 'arn:aws:states:::events:putEvents', icon: Radio, parameters: {Entries: [{EventBusName: '', Source: '', DetailType: '', Detail: {}}]}},
+    {action: 'ecs-run-task', service: 'ECS', label: 'RunTask', nodeLabel: 'ECS: RunTask', stateName: 'EcsRunTask', resource: 'arn:aws:states:::ecs:runTask', icon: Container, parameters: {Cluster: '', TaskDefinition: '', LaunchType: 'FARGATE', Count: 1, NetworkConfiguration: {}}},
+    {action: 'ecs-run-task-sync', service: 'ECS', label: 'RunTask (.sync)', nodeLabel: 'ECS: RunTask (.sync)', stateName: 'EcsRunTaskSync', resource: 'arn:aws:states:::ecs:runTask.sync', icon: Container, parameters: {Cluster: '', TaskDefinition: '', LaunchType: 'FARGATE', Count: 1, NetworkConfiguration: {}}},
+    {action: 'states-start-execution', service: 'Step Functions', label: 'StartExecution', nodeLabel: 'Step Functions: StartExecution', stateName: 'StartExecution', resource: 'arn:aws:states:::states:startExecution', icon: Workflow, parameters: {StateMachineArn: '', Input: {}}},
+]
+
+const TASK_INTEGRATION_BY_ACTION = new Map(TASK_INTEGRATIONS.map((integration) => [integration.action, integration]))
+const TASK_INTEGRATION_BY_RESOURCE = new Map(TASK_INTEGRATIONS.map((integration) => [integration.resource, integration]))
+
+export interface EdgeSplice {
+    sourcePath: string[]
+    kind: 'next' | 'choice' | 'default'
+    choiceIndex?: number
+}
+
+interface WorkflowEdgeData extends Record<string, unknown> {
+    label?: string
+    splice?: EdgeSplice
+    onSplice?: (splice: EdgeSplice, action: TaskAction) => void
+}
+
+interface FlowGraph {
+    nodes: StateNode[]
+    edges: Edge[]
+    firstNodeId?: string
+}
+
+interface WorkflowStudioProps {
+    resource?: CloudResource
+}
+
+const nodeTypes = {state: StateGraphNode, container: ContainerGraphNode, boundary: BoundaryGraphNode, empty: EmptyGraphNode, placeholder: ChoicePlaceholderNode}
+const edgeTypes = {workflow: WorkflowGraphEdge}
+
+export function WorkflowStudio({resource}: WorkflowStudioProps) {
+    const queryClient = useQueryClient()
+    const detailQuery = useCloudResourceQuery('aws', 'workflows', resource?.id)
+    const detailedResource = detailQuery.data
+    const definition = typeof detailedResource?.metadata.definition === 'string' ? detailedResource.metadata.definition : undefined
+    const [graph, setGraph] = useState<FlowGraph>({nodes: [], edges: []})
+    const [error, setError] = useState<string>()
+    const [workflow, setWorkflow] = useState<AslObject>()
+    const [draftDefinition, setDraftDefinition] = useState<string>()
+    const [definitionText, setDefinitionText] = useState('')
+    const [authoringMessage, setAuthoringMessage] = useState<string>()
+    const [selectedNode, setSelectedNode] = useState<StateNode>()
+    const [saveError, setSaveError] = useState<string>()
+    const [saveSuccess, setSaveSuccess] = useState(false)
+    const [loadedRevisionId, setLoadedRevisionId] = useState<string>()
+    const [reloadConfirmation, setReloadConfirmation] = useState(false)
+    const [saveConflict, setSaveConflict] = useState(false)
+    const [checkingRevision, setCheckingRevision] = useState(false)
+    const [inspectorTab, setInspectorTab] = useState<'form' | 'definition'>('form')
+    const [history, setHistory] = useState<AslObject[]>([])
+    const [historyIndex, setHistoryIndex] = useState(-1)
+    const [flowInstance, setFlowInstance] = useState<ReactFlowInstance>()
+    const [paletteTab, setPaletteTab] = useState<'actions' | 'flow'>('actions')
+    const [paletteSearch, setPaletteSearch] = useState('')
+    const [activeBranch, setActiveBranch] = useState<{path: string[]; branch: number | 'default'}>()
+    const deleteStateRef = useRef<(path: string[]) => void>(() => undefined)
+    const graphDeleteState = useRef((path: string[]) => deleteStateRef.current(path)).current
+    const assignBranchRef = useRef<(path: string[], branch: number | 'default', action: TaskAction) => void>(() => undefined)
+    const graphAssignBranch = useRef((path: string[], branch: number | 'default', action: TaskAction) => assignBranchRef.current(path, branch, action)).current
+    const spliceEdgeRef = useRef<(splice: EdgeSplice, action: TaskAction) => void>(() => undefined)
+    const graphSpliceEdge = useRef((splice: EdgeSplice, action: TaskAction) => spliceEdgeRef.current(splice, action)).current
+    const draftDefaultPathsRef = useRef(new Set<string>())
+    const lambdaQuery = useQuery({
+        queryKey: ['workflow-studio-lambdas'],
+        queryFn: ({signal}) => listCloudResources('aws', 'serverless', undefined, signal),
+        enabled: Boolean(definition),
+    })
+    const topicQuery = useQuery({
+        queryKey: ['workflow-studio-topics'],
+        queryFn: ({signal}) => listCloudResources('aws', 'notifications', undefined, signal),
+        enabled: Boolean(definition),
+    })
+    const queueQuery = useQuery({
+        queryKey: ['workflow-studio-queues'],
+        queryFn: ({signal}) => listCloudResources('aws', 'messaging', undefined, signal),
+        enabled: Boolean(definition),
+    })
+    const tableQuery = useQuery({
+        queryKey: ['workflow-studio-tables'],
+        queryFn: ({signal}) => listCloudResources('aws', 'nosql', undefined, signal),
+        enabled: Boolean(definition),
+    })
+    const eventBusQuery = useQuery({
+        queryKey: ['workflow-studio-event-buses'],
+        queryFn: ({signal}) => listCloudResources('aws', 'events', undefined, signal),
+        enabled: Boolean(definition),
+    })
+    const stateMachineQuery = useQuery({
+        queryKey: ['workflow-studio-state-machines'],
+        queryFn: ({signal}) => listCloudResources('aws', 'workflows', undefined, signal),
+        enabled: Boolean(definition),
+    })
+
+    useEffect(() => {
+        draftDefaultPathsRef.current.clear()
+        if (!definition) {
+            setGraph({nodes: [], edges: []})
+            setWorkflow(undefined)
+            setDraftDefinition(undefined)
+            setDefinitionText('')
+            setSelectedNode(undefined)
+            setActiveBranch(undefined)
+            setError(undefined)
+            setLoadedRevisionId(undefined)
+            return
+        }
+
+        const parsed = parseDefinition(definition)
+        if (parsed instanceof Error) {
+            setError(parsed.message)
+            return
+        }
+        setWorkflow(parsed)
+        setDraftDefinition(undefined)
+        setDefinitionText(JSON.stringify(parsed, null, 2))
+        setHistory([parsed])
+        setHistoryIndex(0)
+        setError(undefined)
+        setLoadedRevisionId(revisionId(detailedResource))
+    }, [definition, detailedResource])
+
+    useEffect(() => {
+        setSaveError(undefined)
+        setSaveSuccess(false)
+        setReloadConfirmation(false)
+        setSaveConflict(false)
+    }, [resource?.id])
+
+    const saveMutation = useMutation({
+        mutationFn: (draft: string) => updateCloudResource('aws', 'workflows', resource!.id, {definition: draft}),
+        onSuccess: async (updatedResource) => {
+            queryClient.setQueryData(cloudQueryKeys.resource('aws', 'workflows', resource!.id), updatedResource)
+            setDraftDefinition(undefined)
+            setSaveError(undefined)
+            setSaveSuccess(true)
+            await queryClient.invalidateQueries({queryKey: cloudQueryKeys.resource('aws', 'workflows', resource!.id)})
+            await queryClient.invalidateQueries({queryKey: cloudQueryKeys.resources('aws', 'workflows')})
+        },
+        onError: (mutationError) => {
+            setSaveSuccess(false)
+            setSaveError(mutationError instanceof Error ? mutationError.message : 'Unable to save definition.')
+        },
+    })
+
+    useEffect(() => {
+        if (!workflow) return
+        const nextGraph = buildFlowGraph(workflow, lambdaIdentifiers(lambdaQuery.data), graphDeleteState, graphAssignBranch, graphSpliceEdge, draftDefaultPathsRef.current)
+        setGraph(nextGraph)
+        setSelectedNode((current) => current ? nextGraph.nodes.find((node) => node.id === current.id) : nextGraph.firstNodeId ? nextGraph.nodes.find((node) => node.id === nextGraph.firstNodeId) : undefined)
+    }, [workflow, lambdaQuery.data, graphDeleteState, graphAssignBranch, graphSpliceEdge])
+
+    if (!resource) {
+        return null
+    }
+    if (resource.metadata.machineType !== 'STANDARD') {
+        return null
+    }
+
+    const selectedState = selectedNode?.data.state
+    const selectedStateNames = workflow && selectedNode?.data.path ? stateNamesAtPath(workflow, selectedNode.data.path) : []
+    const unattachedTasks = graph.nodes.filter((node) => node.data.unattached)
+    const validationErrors = workflow ? aslValidationErrors(workflow) : []
+    const commitWorkflow = (nextWorkflow: AslObject, selectedId = selectedNode?.id) => {
+        const nextGraph = buildFlowGraph(nextWorkflow, lambdaIdentifiers(lambdaQuery.data), graphDeleteState, graphAssignBranch, graphSpliceEdge, draftDefaultPathsRef.current)
+        setWorkflow(nextWorkflow)
+        setDraftDefinition(JSON.stringify(nextWorkflow))
+        setDefinitionText(JSON.stringify(nextWorkflow, null, 2))
+        setAuthoringMessage(undefined)
+        setSaveError(undefined)
+        setSaveSuccess(false)
+        setGraph(nextGraph)
+        setSelectedNode(selectedId ? nextGraph.nodes.find((node) => node.id === selectedId) : undefined)
+        setHistory((current) => [...current.slice(0, historyIndex + 1), nextWorkflow])
+        setHistoryIndex((current) => current + 1)
+    }
+    const attachLambda = (arn: string) => {
+        if (!workflow || !selectedNode?.data.path) return
+        const nextWorkflow = replaceLambdaReference(workflow, selectedNode.data.path, arn)
+        commitWorkflow(nextWorkflow)
+    }
+
+    const updateSelectedState = (change: (state: AslObject) => void) => {
+        if (!workflow || !selectedNode?.data.path) return
+        const nextWorkflow = structuredClone(workflow)
+        const state = stateAtPath(nextWorkflow, selectedNode.data.path)
+        if (!state) return
+        change(state)
+        commitWorkflow(nextWorkflow)
+    }
+
+    const saveDraft = () => {
+        if (!draftDefinition || saveMutation.isPending || validationErrors.length > 0) return
+        setSaveError(undefined)
+        setSaveSuccess(false)
+        saveMutation.mutate(draftDefinition)
+    }
+
+    const saveDefinition = async () => {
+        if (!draftDefinition || saveMutation.isPending || checkingRevision || validationErrors.length > 0) return
+        setCheckingRevision(true)
+        setSaveError(undefined)
+        setSaveSuccess(false)
+        try {
+            const freshResource = await getCloudResource('aws', 'workflows', resource.id)
+            if (revisionId(freshResource) !== loadedRevisionId) {
+                setSaveConflict(true)
+                return
+            }
+            saveDraft()
+        } catch (revisionError: unknown) {
+            setSaveError(revisionError instanceof Error ? revisionError.message : 'Unable to check the latest definition.')
+        } finally {
+            setCheckingRevision(false)
+        }
+    }
+
+    const reload = async () => {
+        setReloadConfirmation(false)
+        setSaveConflict(false)
+        setSaveError(undefined)
+        await queryClient.invalidateQueries({queryKey: cloudQueryKeys.resource('aws', 'workflows', resource.id), refetchType: 'none'})
+        const freshResult = await detailQuery.refetch()
+        if (freshResult.data) {
+            const freshDefinition = typeof freshResult.data.metadata.definition === 'string' ? freshResult.data.metadata.definition : undefined
+            if (freshDefinition) {
+                const parsed = parseDefinition(freshDefinition)
+                if (parsed instanceof Error) {
+                    setError(parsed.message)
+                    return
+                }
+                setWorkflow(parsed)
+                setDraftDefinition(undefined)
+                setDefinitionText(JSON.stringify(parsed, null, 2))
+                setHistory([parsed])
+                setHistoryIndex(0)
+                setError(undefined)
+                setLoadedRevisionId(revisionId(freshResult.data))
+            }
+        }
+    }
+    const addAction = (action: WorkflowAction) => {
+        if (!workflow) return
+        if (activeBranch && isTaskAction(action)) {
+            assignBranch(activeBranch.path, activeBranch.branch, action)
+            return
+        }
+        const result = insertRootState(workflow, action)
+        commitWorkflow(result.definition, `states/${result.name}`)
+        setActiveBranch(undefined)
+    }
+    const renameSelectedState = (name: string) => {
+        if (!workflow || !selectedNode?.data.path || !name.trim()) return
+        const result = renameStateInScope(workflow, selectedNode.data.path, name.trim())
+        if (!result) return
+        commitWorkflow(result.definition, result.path.join('/'))
+    }
+    const undo = () => {
+        if (historyIndex <= 0) return
+        const nextIndex = historyIndex - 1
+        const nextWorkflow = structuredClone(history[nextIndex])
+        const nextGraph = buildFlowGraph(nextWorkflow, lambdaIdentifiers(lambdaQuery.data), graphDeleteState, graphAssignBranch, graphSpliceEdge, draftDefaultPathsRef.current)
+        setWorkflow(nextWorkflow)
+        setDraftDefinition(JSON.stringify(nextWorkflow))
+        setDefinitionText(JSON.stringify(nextWorkflow, null, 2))
+        setGraph(nextGraph)
+        setSelectedNode(nextGraph.nodes.find((node) => node.id === selectedNode?.id) ?? (nextGraph.firstNodeId ? nextGraph.nodes.find((node) => node.id === nextGraph.firstNodeId) : undefined))
+        setHistoryIndex(nextIndex)
+    }
+    const redo = () => {
+        if (historyIndex >= history.length - 1) return
+        const nextIndex = historyIndex + 1
+        const nextWorkflow = structuredClone(history[nextIndex])
+        const nextGraph = buildFlowGraph(nextWorkflow, lambdaIdentifiers(lambdaQuery.data), graphDeleteState, graphAssignBranch, graphSpliceEdge, draftDefaultPathsRef.current)
+        setWorkflow(nextWorkflow)
+        setDraftDefinition(JSON.stringify(nextWorkflow))
+        setDefinitionText(JSON.stringify(nextWorkflow, null, 2))
+        setGraph(nextGraph)
+        setSelectedNode(nextGraph.nodes.find((node) => node.id === selectedNode?.id) ?? (nextGraph.firstNodeId ? nextGraph.nodes.find((node) => node.id === nextGraph.firstNodeId) : undefined))
+        setHistoryIndex(nextIndex)
+    }
+    const deleteSelected = () => {
+        if (selectedNode?.data.path && selectedNode.type !== 'placeholder' && selectedNode.data.state) {
+            deleteState(selectedNode.data.path)
+        } else {
+            setAuthoringMessage('Start, End, empty guidance, and Choice branch placeholders cannot be deleted.')
+        }
+    }
+    function deleteState(path: string[]): void {
+        if (!workflow) {
+            setAuthoringMessage('Only workflow states can be deleted.')
+            return
+        }
+        const result = deleteStateInScope(workflow, path)
+        if ('error' in result) {
+            setAuthoringMessage(result.error)
+            return
+        }
+        commitWorkflow(result.definition, undefined)
+    }
+    deleteStateRef.current = deleteState
+    function assignBranch(path: string[], branch: number | 'default', action: TaskAction): void {
+        if (!workflow) return
+        const nextWorkflow = structuredClone(workflow)
+        const choice = stateAtPath(nextWorkflow, path)
+        const scope = stateScopeAtPath(nextWorkflow, path)
+        if (!choice || choice.Type !== 'Choice' || !scope) return
+        if (choiceHasDefaultLane(choice)) draftDefaultPathsRef.current.add(path.join('/'))
+        const name = uniqueStateName(scope, taskIntegrationForAction(action).stateName)
+        scope[name] = actionState(action)
+        if (branch === 'default') {
+            choice.Default = name
+        } else {
+            const rule = arrayValue(choice.Choices)[branch]
+            if (!isObject(rule)) return
+            rule.Next = name
+        }
+        setActiveBranch(undefined)
+        commitWorkflow(nextWorkflow, [...path.slice(0, -1), name].join('/'))
+    }
+    assignBranchRef.current = assignBranch
+    function spliceEdge(splice: EdgeSplice, action: TaskAction): void {
+        if (!workflow) return
+        const result = spliceTaskIntoEdge(workflow, splice, action)
+        if (!result) return
+        commitWorkflow(result.definition, [...splice.sourcePath.slice(0, -1), result.name].join('/'))
+    }
+    spliceEdgeRef.current = spliceEdge
+
+    const applyDefinition = () => {
+        const parsed = parseDefinition(definitionText)
+        if (parsed instanceof Error) {
+            setAuthoringMessage(`Definition was not applied: ${parsed.message}`)
+            return
+        }
+        const errors = aslValidationErrors(parsed, true)
+        if (errors.length > 0) {
+            setAuthoringMessage(`Definition was not applied: ${errors[0]}`)
+            return
+        }
+        commitWorkflow(parsed)
+    }
+
+    const flowPaletteItems: Array<{action: FlowAction; label: string; icon: LucideIcon}> = [
+        {action: 'pass', label: 'Pass', icon: Braces},
+        {action: 'choice', label: 'Choice', icon: GitBranch},
+        {action: 'wait', label: 'Wait', icon: Clock3},
+        {action: 'succeed', label: 'Succeed', icon: CheckCircle2},
+        {action: 'fail', label: 'Fail', icon: XCircle},
+    ]
+    const paletteFilter = paletteSearch.trim().toLowerCase()
+    const visibleIntegrations = TASK_INTEGRATIONS.filter((integration) => `${integration.service} ${integration.label}`.toLowerCase().includes(paletteFilter))
+    const visibleFlowItems = flowPaletteItems.filter((item) => item.label.toLowerCase().includes(paletteFilter))
+    const integrationGroups = [...new Set(visibleIntegrations.map((integration) => integration.service))]
+
+    return <section className="table-panel workflow-studio">
+        <div className="dynamic-stage-header">
+            <div><p className="eyebrow">Workflow Studio</p><h3>ASL graph</h3></div>
+            <div className="workflow-studio-actions">
+                <span className="badge neutral">Standard</span>
+                <button className="button compact" type="button" disabled={saveMutation.isPending} onClick={() => draftDefinition ? setReloadConfirmation(true) : void reload()}>Reload</button>
+                <button className="button compact workflow-save-definition" type="button" disabled={!draftDefinition || saveMutation.isPending || checkingRevision || validationErrors.length > 0} onClick={() => void saveDefinition()}>{saveMutation.isPending ? 'Saving' : checkingRevision ? 'Checking' : 'Save definition'}</button>
+            </div>
+        </div>
+        <p className="muted compact-text">Build a focused Step Functions workflow. The graph preserves fields outside the selected state.</p>
+        {detailQuery.isLoading && <p className="muted compact-text" role="status">Loading state machine definition.</p>}
+        {detailQuery.isError && <p className="error-text compact-text" role="alert">Unable to load state machine definition: {detailQuery.error instanceof Error ? detailQuery.error.message : 'Unknown error.'}</p>}
+        {error && <p className="error-text compact-text" role="alert">Invalid ASL JSON: {error}</p>}
+        {saveMutation.isPending && <p className="muted compact-text" role="status">Saving definition.</p>}
+        {saveSuccess && <p className="success-text compact-text" role="status">Definition saved.</p>}
+        {saveError && <p className="error-text compact-text" role="alert">Unable to save definition: {saveError}</p>}
+        {authoringMessage && <p className="error-text compact-text" role="alert">{authoringMessage}</p>}
+        {reloadConfirmation && <div className="workflow-confirmation" role="alertdialog" aria-labelledby="workflow-reload-title">
+            <strong id="workflow-reload-title">Discard local changes?</strong><span>Reloading restores the latest saved definition.</span>
+            <div><button className="button compact" type="button" onClick={() => void reload()}>Reload definition</button><button className="button compact" type="button" onClick={() => setReloadConfirmation(false)}>Cancel</button></div>
+        </div>}
+        {saveConflict && <div className="workflow-confirmation" role="alert" aria-live="assertive">
+            <strong>Definition changed elsewhere</strong><span>The latest saved revision differs from this draft. Reload to discard this draft, or overwrite it with your local changes.</span>
+            <div><button className="button compact" type="button" onClick={() => void reload()}>Reload</button><button className="button compact workflow-save-definition" type="button" disabled={saveMutation.isPending} onClick={() => { setSaveConflict(false); saveDraft() }}>Overwrite</button></div>
+        </div>}
+        {!detailQuery.isLoading && !detailQuery.isError && !definition && <p className="muted compact-text">This state machine does not expose a definition.</p>}
+        {unattachedTasks.length > 0 && <div className="workflow-validation" role="alert">
+            <strong>Validation warning</strong>
+            <span>{unattachedTasks.length} Task state{unattachedTasks.length === 1 ? '' : 's'} reference{unattachedTasks.length === 1 ? 's' : ''} a Lambda that is not in the current inventory. This is advisory and does not block saving.</span>
+        </div>}
+        {validationErrors.length > 0 && <div className="workflow-validation workflow-validation-errors" role="alert">
+            <strong>{validationErrors.length} error{validationErrors.length === 1 ? '' : 's'}</strong>
+            <span>{validationErrors[0]} Fix every ASL reference before saving.</span>
+        </div>}
+        {graph.nodes.length > 0 && <div className="workflow-studio-split">
+            <aside className="workflow-action-palette" aria-label="Actions">
+                <div className="workflow-pane-title"><span>States</span><small>DRAG OR CLICK</small></div>
+                <label className="workflow-palette-search"><Search size={14}/><span className="visually-hidden">Search states</span><input aria-label="Search states" placeholder="Search states" value={paletteSearch} onChange={(event) => setPaletteSearch(event.target.value)}/></label>
+                <div className="workflow-palette-tabs"><button className={paletteTab === 'actions' ? 'active' : ''} type="button" onClick={() => setPaletteTab('actions')}>Actions</button><button className={paletteTab === 'flow' ? 'active' : ''} type="button" onClick={() => setPaletteTab('flow')}>Flow</button></div>
+                <p>{paletteTab === 'actions' ? 'AWS service integrations' : 'Flow states'}</p>
+                {paletteTab === 'actions' ? integrationGroups.map((service) => <section className="workflow-palette-service-group" key={service}>
+                    <h4>{service}</h4>
+                    <div className="workflow-palette-cards">{visibleIntegrations.filter((integration) => integration.service === service).map(({action, label, icon: Icon}) => <button key={action} aria-label={`${service} ${label}`} type="button" draggable onDragStart={(event) => event.dataTransfer.setData('application/x-workflow-action', action)} onClick={() => addAction(action)}><span className={`workflow-palette-icon workflow-palette-${action}`}><Icon size={17}/></span><span><strong>{label}</strong><small>Optimized integration</small></span></button>)}</div>
+                </section>) : <div className="workflow-palette-cards">{visibleFlowItems.map(({action, label, icon: Icon}) => <button key={action} aria-label={label} type="button" onClick={() => addAction(action)}><span className={`workflow-palette-icon workflow-palette-${action}`}><Icon size={17}/></span><span><strong>{label}</strong><small>Workflow control</small></span></button>)}</div>}
+                {activeBranch && <div className="workflow-branch-hint" role="status">Choose an AWS service integration for the selected branch.</div>}
+            </aside>
+            <div className="workflow-studio-canvas" aria-label="Workflow graph">
+                <div className="workflow-canvas-toolbar" aria-label="Canvas controls">
+                    <button className="nodrag nopan" type="button" aria-label="Undo" disabled={historyIndex <= 0} onClick={undo}><Undo2 size={15}/></button>
+                    <button className="nodrag nopan" type="button" aria-label="Redo" disabled={historyIndex >= history.length - 1} onClick={redo}><Redo2 size={15}/></button>
+                    <span/>
+                    <button className="nodrag nopan" type="button" aria-label="Zoom in" onClick={() => flowInstance?.zoomIn()}><Plus size={15}/></button>
+                    <button className="nodrag nopan" type="button" aria-label="Zoom out" onClick={() => flowInstance?.zoomOut()}><Minus size={15}/></button>
+                    <button className="nodrag nopan" type="button" aria-label="Center workflow" onClick={() => flowInstance?.fitView()}><LocateFixed size={15}/></button>
+                    <span/>
+                    <button className="nodrag nopan" type="button" aria-label="Delete selected state" disabled={!selectedNode} onClick={deleteSelected}><Trash2 size={15}/></button>
+                </div>
+                <ReactFlow
+                    nodes={graph.nodes}
+                    edges={graph.edges}
+                    nodeTypes={nodeTypes}
+                    edgeTypes={edgeTypes}
+                    fitView
+                    minZoom={0.2}
+                    maxZoom={2}
+                    nodesDraggable={false}
+                    nodesConnectable={false}
+                    elementsSelectable
+                    deleteKeyCode={null}
+                    onNodeClick={(_, node) => {
+                        const stateNode = node as StateNode
+                        setSelectedNode(stateNode)
+                        if (stateNode.data.choicePath && stateNode.data.choiceBranch !== undefined) setActiveBranch({path: stateNode.data.choicePath, branch: stateNode.data.choiceBranch})
+                        else setActiveBranch(undefined)
+                    }}
+                    onInit={setFlowInstance}
+                >
+                    <Background gap={18} size={1}/>
+                </ReactFlow>
+            </div>
+            <aside className="workflow-studio-json">
+                <div className="workflow-pane-title"><span>Inspector</span><small>{selectedNode?.data.label ?? 'No selection'}</small></div>
+                <div className="workflow-inspector-tabs"><button className={inspectorTab === 'form' ? 'active' : ''} type="button" onClick={() => setInspectorTab('form')}>Form</button><button className={inspectorTab === 'definition' ? 'active' : ''} type="button" onClick={() => setInspectorTab('definition')}>Definition</button></div>
+                {inspectorTab === 'form' && selectedState && selectedNode?.data.path && <label className="workflow-rename">State name<input aria-label="State name" value={selectedNode.data.path[selectedNode.data.path.length - 1] ?? selectedNode.data.label} onChange={(event) => renameSelectedState(event.target.value)} /></label>}
+                {inspectorTab === 'form' && selectedState?.Type === 'Choice' && <ChoiceEditor state={selectedState} targetNames={selectedStateNames} onChange={updateSelectedState}/>} 
+                {inspectorTab === 'form' && selectedState && supportsTransition(selectedState) && <TransitionEditor state={selectedState} targetNames={selectedStateNames} onChange={updateSelectedState}/>} 
+                {inspectorTab === 'form' && selectedState?.Type === 'Task' && <TaskPolicyEditor state={selectedState} targetNames={selectedStateNames} onChange={updateSelectedState}/>} 
+                {inspectorTab === 'form' && selectedState && isSnsPublishTask(selectedState) && <SnsTaskPicker state={selectedState} topics={topicQuery.data ?? []} loading={topicQuery.isLoading} failed={topicQuery.isError} onChange={updateSelectedState}/>} 
+                {inspectorTab === 'form' && selectedState && <ServiceIntegrationEditor state={selectedState} queues={queueQuery.data ?? []} tables={tableQuery.data ?? []} eventBuses={eventBusQuery.data ?? []} stateMachines={(stateMachineQuery.data ?? []).filter((machine) => machine.id !== resource.id)} loading={{queues: queueQuery.isLoading, tables: tableQuery.isLoading, eventBuses: eventBusQuery.isLoading, stateMachines: stateMachineQuery.isLoading}} failed={{queues: queueQuery.isError, tables: tableQuery.isError, eventBuses: eventBusQuery.isError, stateMachines: stateMachineQuery.isError}} onChange={updateSelectedState}/>} 
+                {inspectorTab === 'form' && selectedNode?.data.unattached && <div className="workflow-lambda-picker">
+                    <label htmlFor="workflow-lambda">Attach Lambda</label>
+                    <select id="workflow-lambda" aria-label="Lambda function" defaultValue="" disabled={lambdaQuery.isLoading || lambdaQuery.isError} onChange={(event) => attachLambda(event.target.value)}>
+                        <option value="" disabled>{lambdaQuery.isLoading ? 'Loading Lambda inventory...' : lambdaQuery.isError ? 'Unable to load Lambda inventory' : 'Select a Lambda function'}</option>
+                        {(lambdaQuery.data ?? []).map((lambda) => {
+                            const arn = typeof lambda.metadata.arn === 'string' ? lambda.metadata.arn : undefined
+                            return arn && <option key={lambda.id} value={arn}>{lambda.name}</option>
+                        })}
+                    </select>
+                </div>}
+                {inspectorTab === 'definition' && <div className="workflow-definition-editor"><label htmlFor="workflow-definition">Complete ASL definition</label><textarea id="workflow-definition" aria-label="Complete ASL definition" spellCheck={false} value={definitionText} onChange={(event) => setDefinitionText(event.target.value)}/><button className="button compact" type="button" onClick={applyDefinition}>Apply to graph</button></div>}
+                {inspectorTab === 'form' && !selectedState && <p className="muted compact-text">Select a state to edit its focused controls.</p>}
+            </aside>
+        </div>}
+    </section>
+}
+
+function TaskPolicyEditor({state, targetNames, onChange}: {state: AslObject; targetNames: string[]; onChange: (change: (state: AslObject) => void) => void}) {
+    const retries = ruleEntries(state.Retry)
+    const catchers = ruleEntries(state.Catch)
+    return <div className="workflow-task-editor">
+        <h4>Task policy</h4>
+        <TaskEditorSection title="Retry" addLabel="Add retry" onAdd={() => onChange((next) => { next.Retry = [...arrayValue(next.Retry), {ErrorEquals: ['States.ALL'], IntervalSeconds: 1, MaxAttempts: 3, BackoffRate: 2}] })}>
+            {retries.map(({rule, index}) => <div className="workflow-task-rule" key={index}>
+                <label>ErrorEquals<input aria-label={`Retry ${index + 1} ErrorEquals`} value={errorEqualsValue(rule)} onChange={(event) => onChange((next) => updateRule(next, 'Retry', index, (nextRule) => { nextRule.ErrorEquals = errorEqualsFromValue(event.target.value) }))}/></label>
+                <label>Interval seconds<input aria-label={`Retry ${index + 1} IntervalSeconds`} type="number" min="0" value={numberValue(rule.IntervalSeconds)} onChange={(event) => onChange((next) => updateRule(next, 'Retry', index, (nextRule) => setNumber(nextRule, 'IntervalSeconds', event.target.value)))}/></label>
+                <label>Max attempts<input aria-label={`Retry ${index + 1} MaxAttempts`} type="number" min="0" value={numberValue(rule.MaxAttempts)} onChange={(event) => onChange((next) => updateRule(next, 'Retry', index, (nextRule) => setNumber(nextRule, 'MaxAttempts', event.target.value)))}/></label>
+                <label>Backoff rate<input aria-label={`Retry ${index + 1} BackoffRate`} type="number" min="0" step="0.1" value={numberValue(rule.BackoffRate)} onChange={(event) => onChange((next) => updateRule(next, 'Retry', index, (nextRule) => setNumber(nextRule, 'BackoffRate', event.target.value)))}/></label>
+                <button className="button compact" type="button" onClick={() => onChange((next) => removeRule(next, 'Retry', index))}>Remove retry</button>
+            </div>)}
+        </TaskEditorSection>
+        <TaskEditorSection title="Catch" addLabel="Add catch" disabled={targetNames.length === 0} onAdd={() => onChange((next) => { next.Catch = [...arrayValue(next.Catch), {ErrorEquals: ['States.ALL'], Next: targetNames[0]}] })}>
+            {catchers.map(({rule, index}) => <div className="workflow-task-rule" key={index}>
+                <label>ErrorEquals<input aria-label={`Catch ${index + 1} ErrorEquals`} value={errorEqualsValue(rule)} onChange={(event) => onChange((next) => updateRule(next, 'Catch', index, (nextRule) => { nextRule.ErrorEquals = errorEqualsFromValue(event.target.value) }))}/></label>
+                <label>Next<select aria-label={`Catch ${index + 1} Next`} value={stringValue(rule.Next) ?? ''} onChange={(event) => onChange((next) => updateRule(next, 'Catch', index, (nextRule) => { nextRule.Next = event.target.value }))}>{targetNames.map((name) => <option key={name} value={name}>{name}</option>)}</select></label>
+                <button className="button compact" type="button" onClick={() => onChange((next) => removeRule(next, 'Catch', index))}>Remove catch</button>
+            </div>)}
+        </TaskEditorSection>
+    </div>
+}
+
+function TaskEditorSection({title, addLabel, disabled, onAdd, children}: {title: string; addLabel: string; disabled?: boolean; onAdd: () => void; children: ReactNode}) {
+    return <section className="workflow-task-section"><div><strong>{title}</strong><button className="button compact" type="button" disabled={disabled} onClick={onAdd}>{addLabel}</button></div>{children}</section>
+}
+
+function SnsTaskPicker({state, topics, loading, failed, onChange}: {state: AslObject; topics: CloudResource[]; loading: boolean; failed: boolean; onChange: (change: (state: AslObject) => void) => void}) {
+    const topicArn = isObject(state.Parameters) ? stringValue(state.Parameters.TopicArn) ?? '' : ''
+    return <div className="workflow-task-editor workflow-sns-task-picker">
+        <h4>SNS Publish Task</h4>
+        <label htmlFor="workflow-sns-topic">Topic</label>
+        <select id="workflow-sns-topic" aria-label="SNS topic" value={topicArn} disabled={loading || failed} onChange={(event) => onChange((next) => {
+            const parameters = isObject(next.Parameters) ? next.Parameters : {}
+            parameters.TopicArn = event.target.value
+            next.Parameters = parameters
+        })}>
+            <option value="" disabled>{loading ? 'Loading SNS topics...' : failed ? 'Unable to load SNS topics' : 'Select an SNS topic'}</option>
+            {topics.map((topic) => <option key={topic.id} value={topic.id}>{topic.name}</option>)}
+        </select>
+    </div>
+}
+
+interface IntegrationInventories {
+    queues: CloudResource[]
+    tables: CloudResource[]
+    eventBuses: CloudResource[]
+    stateMachines: CloudResource[]
+    loading: Record<'queues' | 'tables' | 'eventBuses' | 'stateMachines', boolean>
+    failed: Record<'queues' | 'tables' | 'eventBuses' | 'stateMachines', boolean>
+}
+
+function ServiceIntegrationEditor({state, queues, tables, eventBuses, stateMachines, loading, failed, onChange}: IntegrationInventories & {state: AslObject; onChange: (change: (state: AslObject) => void) => void}) {
+    const integration = taskIntegrationForState(state)
+    if (!integration || integration.action === 'lambda' || integration.action === 'sns') return null
+    if (integration.action === 'sqs-send-message') return <SqsTaskEditor state={state} queues={queues} loading={loading.queues} failed={failed.queues} onChange={onChange}/>
+    if (integration.action.startsWith('dynamodb-')) return <DynamoDbTaskEditor state={state} action={integration.action} tables={tables} loading={loading.tables} failed={failed.tables} onChange={onChange}/>
+    if (integration.action === 'eventbridge-put-events') return <EventBridgeTaskEditor state={state} eventBuses={eventBuses} loading={loading.eventBuses} failed={failed.eventBuses} onChange={onChange}/>
+    if (integration.action === 'ecs-run-task' || integration.action === 'ecs-run-task-sync') return <EcsTaskEditor state={state} sync={integration.action === 'ecs-run-task-sync'} onChange={onChange}/>
+    return <NestedExecutionTaskEditor state={state} stateMachines={stateMachines} loading={loading.stateMachines} failed={failed.stateMachines} onChange={onChange}/>
+}
+
+function SqsTaskEditor({state, queues, loading, failed, onChange}: {state: AslObject; queues: CloudResource[]; loading: boolean; failed: boolean; onChange: (change: (state: AslObject) => void) => void}) {
+    const parameters = parametersOf(state)
+    const queueUrl = stringValue(parameters.QueueUrl) ?? ''
+    const pathMode = typeof parameters['MessageBody.$'] === 'string'
+    const messageBody = pathMode ? stringValue(parameters['MessageBody.$']) ?? '' : stringValue(parameters.MessageBody) ?? ''
+    const options = queues.flatMap((queue) => typeof queue.metadata.queueUrl === 'string' ? [{value: queue.metadata.queueUrl, label: queue.name}] : [])
+    return <div className="workflow-task-editor workflow-service-editor">
+        <h4>SQS SendMessage</h4>
+        <InventorySelect label="Queue URL" ariaLabel="SQS queue" value={queueUrl} options={options} loading={loading} failed={failed} onChange={(value) => onChange((next) => setTaskParameter(next, 'QueueUrl', value))}/>
+        <label>Message body mode<select aria-label="SQS message body mode" value={pathMode ? 'path' : 'literal'} onChange={(event) => onChange((next) => {
+            const nextParameters = mutableParameters(next)
+            if (event.target.value === 'path') {
+                nextParameters['MessageBody.$'] = stringValue(nextParameters.MessageBody) || '$'
+                delete nextParameters.MessageBody
+            } else {
+                nextParameters.MessageBody = stringValue(nextParameters['MessageBody.$']) || ''
+                delete nextParameters['MessageBody.$']
+            }
+        })}><option value="literal">Literal</option><option value="path">JSONPath</option></select></label>
+        <label>Message body<input aria-label="SQS message body" value={messageBody} onChange={(event) => onChange((next) => setTaskParameter(next, pathMode ? 'MessageBody.$' : 'MessageBody', event.target.value))}/></label>
+        <label>Message group ID<input aria-label="SQS message group ID" value={stringValue(parameters.MessageGroupId) ?? ''} onChange={(event) => onChange((next) => setOptionalTaskParameter(next, 'MessageGroupId', event.target.value))}/></label>
+        <label>Deduplication ID<input aria-label="SQS deduplication ID" value={stringValue(parameters.MessageDeduplicationId) ?? ''} onChange={(event) => onChange((next) => setOptionalTaskParameter(next, 'MessageDeduplicationId', event.target.value))}/></label>
+    </div>
+}
+
+function DynamoDbTaskEditor({state, action, tables, loading, failed, onChange}: {state: AslObject; action: TaskAction; tables: CloudResource[]; loading: boolean; failed: boolean; onChange: (change: (state: AslObject) => void) => void}) {
+    const parameters = parametersOf(state)
+    const tableName = stringValue(parameters.TableName) ?? ''
+    const options = tables.filter((table) => table.type === 'dynamodb-table').map((table) => ({value: table.name, label: table.name}))
+    const operation = taskIntegrationForAction(action).label
+    const itemField = action === 'dynamodb-put-item' ? 'Item' : 'Key'
+    return <div className="workflow-task-editor workflow-service-editor">
+        <h4>DynamoDB {operation}</h4>
+        <InventorySelect label="Table name" ariaLabel="DynamoDB table" value={tableName} options={options} loading={loading} failed={failed} onChange={(value) => onChange((next) => setTaskParameter(next, 'TableName', value))}/>
+        <JsonParameterField label={itemField} value={parameters[itemField] ?? {}} expected="object" onChange={(value) => onChange((next) => setTaskParameter(next, itemField, value))}/>
+        {action === 'dynamodb-get-item' && <label className="workflow-checkbox"><input aria-label="DynamoDB consistent read" type="checkbox" checked={parameters.ConsistentRead === true} onChange={(event) => onChange((next) => setTaskParameter(next, 'ConsistentRead', event.target.checked))}/> Consistent read</label>}
+        {action === 'dynamodb-update-item' && <>
+            <label>Update expression<input aria-label="DynamoDB update expression" value={stringValue(parameters.UpdateExpression) ?? ''} onChange={(event) => onChange((next) => setTaskParameter(next, 'UpdateExpression', event.target.value))}/></label>
+            <label>Condition expression<input aria-label="DynamoDB condition expression" value={stringValue(parameters.ConditionExpression) ?? ''} onChange={(event) => onChange((next) => setOptionalTaskParameter(next, 'ConditionExpression', event.target.value))}/></label>
+            <JsonParameterField label="Expression attribute names" value={parameters.ExpressionAttributeNames ?? {}} expected="object" onChange={(value) => onChange((next) => setTaskParameter(next, 'ExpressionAttributeNames', value))}/>
+            <JsonParameterField label="Expression attribute values" value={parameters.ExpressionAttributeValues ?? {}} expected="object" onChange={(value) => onChange((next) => setTaskParameter(next, 'ExpressionAttributeValues', value))}/>
+            <label>Return values<select aria-label="DynamoDB return values" value={stringValue(parameters.ReturnValues) ?? 'NONE'} onChange={(event) => onChange((next) => setTaskParameter(next, 'ReturnValues', event.target.value))}><option value="NONE">NONE</option><option value="ALL_OLD">ALL_OLD</option><option value="ALL_NEW">ALL_NEW</option></select></label>
+        </>}
+    </div>
+}
+
+function EventBridgeTaskEditor({state, eventBuses, loading, failed, onChange}: {state: AslObject; eventBuses: CloudResource[]; loading: boolean; failed: boolean; onChange: (change: (state: AslObject) => void) => void}) {
+    const entries = arrayValue(parametersOf(state).Entries)
+    const options = eventBuses.filter((eventBus) => eventBus.type === 'event-bus').map((eventBus) => ({value: eventBus.name, label: eventBus.name}))
+    const changeEntry = (index: number, change: (entry: AslObject) => void) => onChange((next) => {
+        const nextParameters = mutableParameters(next)
+        const nextEntries = arrayValue(nextParameters.Entries)
+        const entry = nextEntries[index]
+        if (!isObject(entry)) return
+        change(entry)
+        nextParameters.Entries = nextEntries
+    })
+    return <div className="workflow-task-editor workflow-service-editor">
+        <h4>EventBridge PutEvents</h4>
+        {entries.map((entry, index) => isObject(entry) && <section className="workflow-integration-entry" key={index}>
+            <div><strong>Entry #{index + 1}</strong>{entries.length > 1 && <button className="button compact" type="button" onClick={() => onChange((next) => { const parameters = mutableParameters(next); parameters.Entries = arrayValue(parameters.Entries).filter((_, entryIndex) => entryIndex !== index) })}>Remove</button>}</div>
+            <InventorySelect label="Event bus" ariaLabel={`EventBridge entry ${index + 1} event bus`} value={stringValue(entry.EventBusName) ?? ''} options={options} loading={loading} failed={failed} onChange={(value) => changeEntry(index, (nextEntry) => { nextEntry.EventBusName = value })}/>
+            <label>Source<input aria-label={`EventBridge entry ${index + 1} source`} value={stringValue(entry.Source) ?? ''} onChange={(event) => changeEntry(index, (nextEntry) => { nextEntry.Source = event.target.value })}/></label>
+            <label>Detail type<input aria-label={`EventBridge entry ${index + 1} detail type`} value={stringValue(entry.DetailType) ?? ''} onChange={(event) => changeEntry(index, (nextEntry) => { nextEntry.DetailType = event.target.value })}/></label>
+            <JsonParameterField label="Detail" value={entry.Detail ?? {}} expected="any" onChange={(value) => changeEntry(index, (nextEntry) => { nextEntry.Detail = value })}/>
+            <JsonParameterField label="Resources" value={entry.Resources ?? []} expected="array" onChange={(value) => changeEntry(index, (nextEntry) => { nextEntry.Resources = value })}/>
+        </section>)}
+        <button className="button compact" type="button" onClick={() => onChange((next) => { const parameters = mutableParameters(next); parameters.Entries = [...arrayValue(parameters.Entries), {EventBusName: '', Source: '', DetailType: '', Detail: {}}] })}>Add event</button>
+    </div>
+}
+
+function EcsTaskEditor({state, sync, onChange}: {state: AslObject; sync: boolean; onChange: (change: (state: AslObject) => void) => void}) {
+    const parameters = parametersOf(state)
+    return <div className="workflow-task-editor workflow-service-editor">
+        <h4>ECS RunTask{sync ? ' (.sync)' : ''}</h4>
+        <label>Cluster<input aria-label="ECS cluster" value={stringValue(parameters.Cluster) ?? ''} onChange={(event) => onChange((next) => setTaskParameter(next, 'Cluster', event.target.value))}/></label>
+        <label>Task definition<input aria-label="ECS task definition" value={stringValue(parameters.TaskDefinition) ?? ''} onChange={(event) => onChange((next) => setTaskParameter(next, 'TaskDefinition', event.target.value))}/></label>
+        <label>Launch type<select aria-label="ECS launch type" value={stringValue(parameters.LaunchType) ?? ''} onChange={(event) => onChange((next) => setOptionalTaskParameter(next, 'LaunchType', event.target.value))}><option value="">Runtime default</option><option value="EC2">EC2</option><option value="FARGATE">FARGATE</option><option value="EXTERNAL">EXTERNAL</option></select></label>
+        <label>Count<input aria-label="ECS task count" type="number" min="1" value={numberValue(parameters.Count) || 1} onChange={(event) => onChange((next) => setTaskParameter(next, 'Count', Number(event.target.value)))}/></label>
+        <JsonParameterField label="Network configuration" value={parameters.NetworkConfiguration ?? {}} expected="object" onChange={(value) => onChange((next) => setTaskParameter(next, 'NetworkConfiguration', value))}/>
+        <JsonParameterField label="Overrides" value={parameters.Overrides ?? {}} expected="object" onChange={(value) => onChange((next) => setTaskParameter(next, 'Overrides', value))}/>
+    </div>
+}
+
+function NestedExecutionTaskEditor({state, stateMachines, loading, failed, onChange}: {state: AslObject; stateMachines: CloudResource[]; loading: boolean; failed: boolean; onChange: (change: (state: AslObject) => void) => void}) {
+    const parameters = parametersOf(state)
+    const options = stateMachines.filter((machine) => machine.type === 'state-machine').map((machine) => ({value: machine.id, label: machine.name}))
+    return <div className="workflow-task-editor workflow-service-editor">
+        <h4>Step Functions StartExecution</h4>
+        <InventorySelect label="State machine" ariaLabel="Nested state machine" value={stringValue(parameters.StateMachineArn) ?? ''} options={options} loading={loading} failed={failed} onChange={(value) => onChange((next) => setTaskParameter(next, 'StateMachineArn', value))}/>
+        <JsonParameterField label="Input" value={parameters.Input ?? {}} expected="any" onChange={(value) => onChange((next) => setTaskParameter(next, 'Input', value))}/>
+        <label>Execution name<input aria-label="Nested execution name" value={stringValue(parameters.Name) ?? ''} onChange={(event) => onChange((next) => setOptionalTaskParameter(next, 'Name', event.target.value))}/></label>
+    </div>
+}
+
+function InventorySelect({label, ariaLabel, value, options, loading, failed, onChange}: {label: string; ariaLabel: string; value: string; options: Array<{value: string; label: string}>; loading: boolean; failed: boolean; onChange: (value: string) => void}) {
+    const hasCurrent = options.some((option) => option.value === value)
+    return <label>{label}<select aria-label={ariaLabel} value={value} disabled={loading || failed} onChange={(event) => onChange(event.target.value)}>
+        <option value="">{loading ? 'Loading inventory...' : failed ? 'Unable to load inventory' : 'Select a resource'}</option>
+        {value && !hasCurrent && <option value={value}>{value}</option>}
+        {options.map((option) => <option key={option.value} value={option.value}>{option.label}</option>)}
+    </select></label>
+}
+
+function JsonParameterField({label, value, expected, onChange}: {label: string; value: unknown; expected: 'object' | 'array' | 'any'; onChange: (value: unknown) => void}) {
+    const [text, setText] = useState(() => JSON.stringify(value, null, 2))
+    const [jsonError, setJsonError] = useState<string>()
+    useEffect(() => setText(JSON.stringify(value, null, 2)), [value])
+    return <label>{label}<textarea aria-label={label} spellCheck={false} value={text} onChange={(event) => {
+        const nextText = event.target.value
+        setText(nextText)
+        try {
+            const parsed: unknown = JSON.parse(nextText)
+            if (expected === 'object' && !isObject(parsed)) throw new Error('Enter a JSON object.')
+            if (expected === 'array' && !Array.isArray(parsed)) throw new Error('Enter a JSON array.')
+            setJsonError(undefined)
+            onChange(parsed)
+        } catch (parseError: unknown) {
+            setJsonError(parseError instanceof Error ? parseError.message : 'Invalid JSON.')
+        }
+    }}/>{jsonError && <small className="error-text">{jsonError}</small>}</label>
+}
+
+const choiceOperators = ['StringEquals', 'NumericEquals', 'BooleanEquals', 'IsPresent'] as const
+
+function ChoiceEditor({state, targetNames, onChange}: {state: AslObject; targetNames: string[]; onChange: (change: (state: AslObject) => void) => void}) {
+    const rules = ruleEntries(state.Choices)
+    return <div className="workflow-choice-editor">
+        <div className="workflow-inspector-section-title"><div><h4>Choice rules</h4><span>Route input to the first matching branch.</span></div></div>
+        {rules.map(({rule, index}) => {
+            const operator = choiceOperator(rule)
+            return <section className="workflow-choice-rule" key={index}>
+                <div><strong>Rule #{index + 1}</strong><span>{stringValue(rule.Next) ?? 'State required'}</span></div>
+                <label>Variable<input aria-label={`Rule ${index + 1} variable`} value={stringValue(rule.Variable) ?? ''} onChange={(event) => onChange((next) => updateChoiceRule(next, index, (nextRule) => { nextRule.Variable = event.target.value }))}/></label>
+                <label>Operator<select aria-label={`Rule ${index + 1} operator`} value={operator} onChange={(event) => onChange((next) => updateChoiceRule(next, index, (nextRule) => setChoiceOperator(nextRule, event.target.value))) }>{choiceOperators.map((value) => <option key={value} value={value}>{value}</option>)}</select></label>
+                <label>Value<input aria-label={`Rule ${index + 1} value`} value={choiceEditorValue(rule[operator])} onChange={(event) => onChange((next) => updateChoiceRule(next, index, (nextRule) => { nextRule[operator] = parseChoiceValue(operator, event.target.value) }))}/></label>
+                <label>Target<select aria-label={`Rule ${index + 1} target`} value={stringValue(rule.Next) ?? ''} onChange={(event) => onChange((next) => updateChoiceRule(next, index, (nextRule) => { if (event.target.value) nextRule.Next = event.target.value; else delete nextRule.Next }))}><option value="">Assign by branch drop</option>{targetNames.map((name) => <option key={name} value={name}>{name}</option>)}</select></label>
+                <button className="button compact" type="button" onClick={() => onChange((next) => removeChoiceRule(next, index))}>Remove rule</button>
+            </section>
+        })}
+        <button className="button compact workflow-add-rule" type="button" onClick={() => onChange((next) => { next.Choices = [...arrayValue(next.Choices), {Variable: '$.choice', StringEquals: ''}] })}>Add choice rule</button>
+        <section className="workflow-choice-default"><div><strong>Default</strong><span>Fallback branch</span></div><label>Target<select aria-label="Default target" value={stringValue(state.Default) ?? ''} onChange={(event) => onChange((next) => { if (event.target.value) next.Default = event.target.value; else delete next.Default })}><option value="">Assign by branch drop</option>{targetNames.map((name) => <option key={name} value={name}>{name}</option>)}</select></label></section>
+    </div>
+}
+
+function TransitionEditor({state, targetNames, onChange}: {state: AslObject; targetNames: string[]; onChange: (change: (state: AslObject) => void) => void}) {
+    const transition = state.End === true ? '__end__' : stringValue(state.Next) ?? ''
+    return <div className="workflow-transition-editor">
+        <h4>Transition</h4>
+        <label>Next<select aria-label="State transition" value={transition} onChange={(event) => onChange((next) => {
+            if (event.target.value === '__end__') {
+                delete next.Next
+                next.End = true
+            } else {
+                next.Next = event.target.value
+                delete next.End
+            }
+        })}><option value="" disabled>Select a state or End</option>{targetNames.map((name) => <option key={name} value={name}>{name}</option>)}<option value="__end__">End workflow</option></select></label>
+    </div>
+}
+
+function StateGraphNode({data}: NodeProps<StateNode>) {
+    const integration = data.state ? taskIntegrationForState(data.state) : undefined
+    const Icon = integration?.icon ?? stateIcon(data.stateType)
+    return <div className={`workflow-state-node workflow-state-${data.stateType.toLowerCase()}${integration ? ` workflow-node-${integration.action}` : ''}${data.unattached ? ' workflow-state-unattached' : ''}`}>
+        <Handle type="target" position={Position.Top}/>
+        <button className="workflow-node-delete nodrag nopan" type="button" aria-label={`Delete ${data.label}`} onClick={(event) => { event.stopPropagation(); data.onDelete?.() }}><Trash2 size={12}/></button>
+        <span className="workflow-state-type"><Icon size={13}/>{data.stateType}</span>
+        <strong>{integration?.nodeLabel ?? data.label}</strong>
+        {integration && <span className="workflow-state-name">{data.label}</span>}
+        {data.retry && <span className="workflow-retry-marker">Retry</span>}
+        {data.unattached && <span className="workflow-unattached-marker">Unattached</span>}
+        {data.stateType === 'Choice' ? <div className="workflow-choice-branches">{(data.choiceBranches ?? []).map((label, index) => <div key={`${label}-${index}`}><span>{label}</span><Handle type="source" id={`choice-${index}`} position={Position.Bottom}/></div>)}</div> : <Handle type="source" position={Position.Bottom}/>}
+    </div>
+}
+
+function ContainerGraphNode({data}: NodeProps<StateNode>) {
+    const Icon = stateIcon(data.stateType)
+    return <div className="workflow-container-node">
+        <span className="workflow-state-type"><Icon size={13}/>{data.stateType}</span>
+        <strong>{data.label}</strong>
+    </div>
+}
+
+function BoundaryGraphNode({data}: NodeProps<StateNode>) {
+    const isStart = data.stateType === 'Start'
+    const Icon = isStart ? CirclePlay : CircleStop
+    return <div className={`workflow-boundary-node workflow-boundary-${isStart ? 'start' : 'end'}`}>
+        {!isStart && <Handle type="target" position={Position.Top}/>} 
+        <Icon size={16}/><strong>{data.label}</strong>
+        {isStart && <Handle type="source" position={Position.Bottom}/>} 
+    </div>
+}
+
+function EmptyGraphNode() {
+    return <div className="workflow-empty-guidance"><Handle type="target" position={Position.Top}/><strong>Add your first state</strong><span>Choose an action from the palette.</span><Handle type="source" position={Position.Bottom}/></div>
+}
+
+function ChoicePlaceholderNode({data}: NodeProps<StateNode>) {
+    return <div
+        className="workflow-choice-placeholder"
+        role="button"
+        tabIndex={0}
+        aria-label={`${data.label}: Drop state here`}
+        onDragOver={(event) => event.preventDefault()}
+        onDrop={(event) => {
+            event.preventDefault()
+            const action = event.dataTransfer.getData('application/x-workflow-action')
+            if (isTaskAction(action)) data.onAssign?.(action)
+        }}
+        onKeyDown={(event) => { if (event.key === 'Enter' || event.key === ' ') event.currentTarget.click() }}
+    >
+        <Handle type="target" position={Position.Top}/>
+        <span>{data.label}</span>
+        <strong>Drop state here</strong>
+        <small>or select, then choose an action</small>
+        <Handle type="source" position={Position.Bottom}/>
+    </div>
+}
+
+function WorkflowGraphEdge({id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, markerEnd, data}: EdgeProps<Edge<WorkflowEdgeData>>) {
+    const [dragActive, setDragActive] = useState(false)
+    const [edgePath, labelX, labelY] = getSmoothStepPath({sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, borderRadius: 14, offset: 28})
+    const label = data?.label
+    const splice = data?.splice
+    return <>
+        <BaseEdge id={id} path={edgePath} markerEnd={markerEnd}/>
+        {(label || splice) && <EdgeLabelRenderer>
+            <div
+                className={`workflow-edge-label${splice ? ' workflow-edge-splice' : ''}${dragActive ? ' drag-active' : ''}`}
+                style={{transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)`}}
+                aria-label={splice ? `Insert task on ${label ?? 'connector'}` : undefined}
+                onDragEnter={() => { if (splice) setDragActive(true) }}
+                onDragLeave={() => setDragActive(false)}
+                onDragOver={(event) => {
+                    if (!splice) return
+                    event.preventDefault()
+                    event.stopPropagation()
+                }}
+                onDrop={(event) => {
+                    event.preventDefault()
+                    event.stopPropagation()
+                    setDragActive(false)
+                    const action = event.dataTransfer.getData('application/x-workflow-action')
+                    if (splice && isTaskAction(action)) data?.onSplice?.(splice, action)
+                }}
+            >
+                {label && <span>{label}</span>}
+                {splice && <b aria-hidden="true">+</b>}
+            </div>
+        </EdgeLabelRenderer>}
+    </>
+}
+
+// This parser is exported for focused ASL graph tests.
+// eslint-disable-next-line react-refresh/only-export-components
+export function buildFlowGraph(definition: AslObject, knownLambdas?: ReadonlySet<string>, onDelete?: (path: string[]) => void, onAssign?: (path: string[], branch: number | 'default', action: TaskAction) => void, onSplice?: (splice: EdgeSplice, action: TaskAction) => void, draftDefaultPaths?: ReadonlySet<string>): FlowGraph {
+    const nodes: StateNode[] = []
+    const edges: Edge[] = []
+    const appendStates = (states: AslObject, prefix: string, offsetX: number, offsetY: number, parentId?: string): string | undefined => {
+        const entries = Object.entries(states).filter(([, state]) => isObject(state)) as Array<[string, AslObject]>
+        let firstId: string | undefined
+        entries.forEach(([name, state], index) => {
+            const id = `${prefix}/${name}`
+            if (!firstId) firstId = id
+            const type = stringValue(state.Type) ?? 'Unknown'
+            const isContainer = type === 'Parallel' || type === 'Map'
+            nodes.push({
+                id,
+                type: isContainer ? 'container' : 'state',
+                position: {x: offsetX, y: offsetY + index * 170},
+                ...(parentId ? {parentId, extent: 'parent' as const} : {}),
+                ...(isContainer ? {style: {width: type === 'Parallel' ? 760 : 520, height: type === 'Parallel' ? 390 : 250}} : {}),
+                data: {label: name, state, stateType: type, retry: Array.isArray(state.Retry) && state.Retry.length > 0, path: `${prefix}/${name}`.split('/'), integration: taskIntegrationForState(state)?.action, unattached: isUnattachedLambdaTask(state, knownLambdas), ...(onDelete ? {onDelete: () => onDelete(`${prefix}/${name}`.split('/'))} : {}), ...(type === 'Choice' ? {choiceBranches: choiceBranches(state)} : {})},
+            })
+
+            if (isContainer) {
+                const nested = type === 'Parallel' ? state.Branches : state.ItemProcessor ?? state.Iterator
+                if (type === 'Parallel' && Array.isArray(nested)) {
+                    nested.forEach((branch, branchIndex) => {
+                        if (isObject(branch) && isObject(branch.States)) appendStates(branch.States, `${id}/branch-${branchIndex}`, 36 + branchIndex * 240, 64, id)
+                    })
+                } else if (isObject(nested) && isObject(nested.States)) {
+                    appendStates(nested.States, `${id}/items`, 36, 64, id)
+                }
+            }
+        })
+
+        entries.forEach(([name, state], index) => {
+            const source = `${prefix}/${name}`
+            const addTransition = (targetName: unknown, label?: string, kind: 'default' | 'catch' = 'default', sourceHandle?: string, splice?: EdgeSplice) => {
+                if (typeof targetName !== 'string') return
+                const target = `${prefix}/${targetName}`
+                if (!nodes.some((node) => node.id === target)) return
+                edges.push({id: `${source}-${target}-${edges.length}`, type: 'workflow', source, target, markerEnd: {type: MarkerType.ArrowClosed}, ...(label ? {label} : {}), data: {label, splice, onSplice}, ...(sourceHandle ? {sourceHandle} : {}), ...(kind === 'catch' ? {className: 'workflow-catch-edge', animated: true} : {})})
+            }
+            const type = stringValue(state.Type)
+            if (type === 'Choice') {
+                const showDefaultLane = choiceHasDefaultLane(state) || draftDefaultPaths?.has(`${prefix}/${name}`) === true
+                const branchCount = arrayValue(state.Choices).length + (showDefaultLane ? 1 : 0)
+                const positionChoiceTarget = (targetName: unknown, branchIndex: number) => {
+                    if (typeof targetName !== 'string') return
+                    const targetNode = nodes.find((node) => node.id === `${prefix}/${targetName}`)
+                    if (targetNode) targetNode.position = {x: offsetX + (branchIndex - (branchCount - 1) / 2) * 250, y: offsetY + index * 170 + 200}
+                }
+                if (Array.isArray(state.Choices)) {
+                    state.Choices.forEach((choice, choiceIndex) => {
+                        if (!isObject(choice)) return
+                        if (typeof choice.Next === 'string') {
+                            positionChoiceTarget(choice.Next, choiceIndex)
+                            addTransition(choice.Next, choiceLabel(choice), 'default', `choice-${choiceIndex}`, {sourcePath: `${prefix}/${name}`.split('/'), kind: 'choice', choiceIndex})
+                        } else {
+                            addChoicePlaceholder(nodes, edges, source, state, `${prefix}/${name}`.split('/'), choiceIndex, offsetX, offsetY + index * 170, onAssign)
+                        }
+                    })
+                }
+                if (typeof state.Default === 'string') {
+                    positionChoiceTarget(state.Default, branchCount - 1)
+                    addTransition(state.Default, 'Default', 'default', `choice-${arrayValue(state.Choices).length}`, {sourcePath: `${prefix}/${name}`.split('/'), kind: 'default'})
+                } else if (showDefaultLane) {
+                    addChoicePlaceholder(nodes, edges, source, state, `${prefix}/${name}`.split('/'), 'default', offsetX, offsetY + index * 170, onAssign)
+                }
+            } else if (state.End !== true && state.Next !== undefined) {
+                addTransition(state.Next, undefined, 'default', undefined, {sourcePath: `${prefix}/${name}`.split('/'), kind: 'next'})
+            } else if (state.End !== true && index < entries.length - 1 && type !== 'Succeed' && type !== 'Fail') {
+                addTransition(entries[index + 1][0])
+            }
+            if (Array.isArray(state.Catch)) {
+                state.Catch.forEach((catcher) => {
+                    if (isObject(catcher)) addTransition(catcher.Next, 'Catch', 'catch')
+                })
+            }
+        })
+        return firstId
+    }
+
+    const firstNodeId = appendStates(isObject(definition.States) ? definition.States : {}, 'states', 120, 120)
+    const startAt = stringValue(definition.StartAt)
+    const startTarget = startAt && nodes.some((node) => node.id === `states/${startAt}`) ? `states/${startAt}` : firstNodeId
+    const rootNodes = nodes.filter((node) => !node.parentId)
+    const terminalNodes = rootNodes.filter((node) => node.type !== 'placeholder' && !edges.some((edge) => edge.source === node.id))
+    nodes.push({id: 'workflow-start', type: 'boundary', position: {x: 120, y: 20}, data: {label: 'Start', stateType: 'Start', retry: false}})
+    const lowestRootY = rootNodes.reduce((lowest, node) => Math.max(lowest, node.position.y), 120)
+    nodes.push({id: 'workflow-end', type: 'boundary', position: {x: 120, y: lowestRootY + 170}, data: {label: 'End', stateType: 'End', retry: false}})
+    if (startTarget) edges.push({id: 'workflow-start-edge', type: 'workflow', source: 'workflow-start', target: startTarget, markerEnd: {type: MarkerType.ArrowClosed}})
+    else {
+        nodes.push({id: 'workflow-empty-guidance', type: 'empty', position: {x: 105, y: 120}, data: {label: 'Add your first state', stateType: 'Guidance', retry: false}})
+        edges.push({id: 'workflow-start-empty', type: 'workflow', source: 'workflow-start', target: 'workflow-empty-guidance', markerEnd: {type: MarkerType.ArrowClosed}})
+        edges.push({id: 'workflow-empty-end', type: 'workflow', source: 'workflow-empty-guidance', target: 'workflow-end', markerEnd: {type: MarkerType.ArrowClosed}})
+    }
+    terminalNodes.forEach((node) => edges.push({id: `${node.id}-workflow-end`, type: 'workflow', source: node.id, target: 'workflow-end', markerEnd: {type: MarkerType.ArrowClosed}}))
+    nodes.filter((node) => node.type === 'placeholder').forEach((node) => edges.push({id: `${node.id}-workflow-end`, type: 'workflow', source: node.id, target: 'workflow-end', markerEnd: {type: MarkerType.ArrowClosed}, className: 'workflow-placeholder-edge'}))
+    return {nodes, edges, firstNodeId: startTarget}
+}
+
+function addChoicePlaceholder(nodes: StateNode[], edges: Edge[], source: string, choice: AslObject, path: string[], branch: number | 'default', choiceX: number, choiceY: number, onAssign?: (path: string[], branch: number | 'default', action: TaskAction) => void): void {
+    const branchIndex = branch === 'default' ? arrayValue(choice.Choices).length : branch
+    const branchCount = arrayValue(choice.Choices).length + 1
+    const id = `${source}/placeholder-${branch}`
+    nodes.push({
+        id,
+        type: 'placeholder',
+        position: {x: choiceX + (branchIndex - (branchCount - 1) / 2) * 250, y: choiceY + 200},
+        data: {
+            label: branch === 'default' ? 'Default' : `Rule #${branch + 1}`,
+            state: choice,
+            stateType: 'Placeholder',
+            retry: false,
+            path,
+            choicePath: path,
+            choiceBranch: branch,
+            ...(onAssign ? {onAssign: (action: TaskAction) => onAssign(path, branch, action)} : {}),
+        },
+    })
+    const label = branch === 'default' ? 'Default' : `Rule #${branch + 1}`
+    edges.push({id: `${source}-${id}`, type: 'workflow', source, target: id, label, data: {label}, markerEnd: {type: MarkerType.ArrowClosed}, sourceHandle: `choice-${branchIndex}`, className: 'workflow-placeholder-edge'})
+}
+
+function isUnattachedLambdaTask(state: AslObject, knownLambdas?: ReadonlySet<string>): boolean {
+    const reference = lambdaReference(state)
+    return reference !== undefined && knownLambdas !== undefined && (!reference.value || !knownLambdas.has(reference.value))
+}
+
+function lambdaReference(state: AslObject | undefined): {field: 'Resource' | 'Parameters.FunctionName'; value?: string} | undefined {
+    if (state?.Type !== 'Task') return undefined
+    const resource = stringValue(state.Resource)
+    if (resource?.startsWith('arn:aws:lambda:')) return {field: 'Resource', value: resource}
+    if (resource === 'arn:aws:states:::lambda:invoke') {
+        const parameters = state.Parameters
+        return {field: 'Parameters.FunctionName', value: isObject(parameters) ? stringValue(parameters.FunctionName) : undefined}
+    }
+    return undefined
+}
+
+function lambdaIdentifiers(lambdas: CloudResource[] | undefined): ReadonlySet<string> | undefined {
+    if (!lambdas) return undefined
+    const identifiers = new Set<string>()
+    lambdas.forEach((lambda) => {
+        identifiers.add(lambda.id)
+        identifiers.add(lambda.name)
+        const arn = stringValue(lambda.metadata.arn)
+        if (arn) identifiers.add(arn)
+    })
+    return identifiers
+}
+
+function stateIcon(type: string) {
+    return ({Task: Repeat2, Choice: GitBranch, Pass: Braces, Wait: Clock3, Succeed: CheckCircle2, Fail: XCircle, Parallel: Split, Map: ListTree, Start: CirclePlay, End: CircleStop}[type] ?? Repeat2)
+}
+
+function replaceLambdaReference(definition: AslObject, path: string[], resource: string): AslObject {
+    const [root, ...names] = path
+    if (root !== 'states' || names.length === 0) return definition
+    const nextDefinition = structuredClone(definition)
+    updateLambdaReference(nextDefinition.States as AslObject, names, resource)
+    return nextDefinition
+}
+
+function updateLambdaReference(states: AslObject, path: string[], resource: string): void {
+    const [name, next, ...remaining] = path
+    const state = states[name]
+    if (!isObject(state)) return
+    if (!next) {
+        const reference = lambdaReference(state)
+        if (reference?.field === 'Resource') state.Resource = resource
+        if (reference?.field === 'Parameters.FunctionName') {
+            if (isObject(state.Parameters)) state.Parameters.FunctionName = resource
+            else state.Parameters = {FunctionName: resource}
+        }
+        return
+    }
+    if (next.startsWith('branch-') && Array.isArray(state.Branches)) {
+        const branch = state.Branches[Number(next.slice(7))]
+        if (isObject(branch) && isObject(branch.States)) updateLambdaReference(branch.States, remaining, resource)
+        return
+    }
+    if (next === 'items') {
+        const nested = state.ItemProcessor ?? state.Iterator
+        if (isObject(nested) && isObject(nested.States)) updateLambdaReference(nested.States, remaining, resource)
+    }
+}
+
+function stateAtPath(definition: AslObject, path: string[]): AslObject | undefined {
+    const [root, ...names] = path
+    if (root !== 'states' || names.length === 0 || !isObject(definition.States)) return undefined
+    let states = definition.States
+    for (let index = 0; index < names.length; index++) {
+        const state = states[names[index]]
+        if (!isObject(state)) return undefined
+        if (index === names.length - 1) return state
+        const next = names[++index]
+        if (next.startsWith('branch-') && Array.isArray(state.Branches)) {
+            const branch = state.Branches[Number(next.slice(7))]
+            if (!isObject(branch) || !isObject(branch.States)) return undefined
+            states = branch.States
+        } else if (next === 'items') {
+            const nested = state.ItemProcessor ?? state.Iterator
+            if (!isObject(nested) || !isObject(nested.States)) return undefined
+            states = nested.States
+        } else {
+            return undefined
+        }
+    }
+    return undefined
+}
+
+function stateNamesAtPath(definition: AslObject, path: string[]): string[] {
+    const state = stateAtPath(definition, path)
+    if (!state) return []
+    const parentPath = path.slice(0, -1)
+    if (parentPath.length === 1 && isObject(definition.States)) return Object.keys(definition.States)
+    const parent = stateAtPath(definition, parentPath.slice(0, -1))
+    if (!parent) return []
+    const scope = parentPath[parentPath.length - 1]
+    if (scope?.startsWith('branch-') && Array.isArray(parent.Branches)) {
+        const branch = parent.Branches[Number(scope.slice(7))]
+        return isObject(branch) && isObject(branch.States) ? Object.keys(branch.States) : []
+    }
+    if (scope === 'items') {
+        const nested = parent.ItemProcessor ?? parent.Iterator
+        return isObject(nested) && isObject(nested.States) ? Object.keys(nested.States) : []
+    }
+    return []
+}
+
+function arrayValue(value: unknown): unknown[] {
+    return Array.isArray(value) ? value : []
+}
+
+function ruleEntries(value: unknown): Array<{rule: AslObject; index: number}> {
+    return arrayValue(value).flatMap((rule, index) => isObject(rule) ? [{rule, index}] : [])
+}
+
+function updateRule(state: AslObject, field: 'Retry' | 'Catch', index: number, change: (rule: AslObject) => void): void {
+    const rules = arrayValue(state[field])
+    const rule = rules[index]
+    if (!isObject(rule)) return
+    change(rule)
+    state[field] = rules
+}
+
+function removeRule(state: AslObject, field: 'Retry' | 'Catch', index: number): void {
+    const rules = arrayValue(state[field])
+    rules.splice(index, 1)
+    if (rules.length === 0) delete state[field]
+    else state[field] = rules
+}
+
+function errorEqualsValue(rule: AslObject): string {
+    return Array.isArray(rule.ErrorEquals) ? rule.ErrorEquals.filter((error): error is string => typeof error === 'string').join(', ') : ''
+}
+
+function errorEqualsFromValue(value: string): string[] {
+    return value.split(',').map((error) => error.trim()).filter(Boolean)
+}
+
+function numberValue(value: unknown): string {
+    return typeof value === 'number' ? String(value) : ''
+}
+
+function setNumber(rule: AslObject, field: 'IntervalSeconds' | 'MaxAttempts' | 'BackoffRate', value: string): void {
+    if (value === '') delete rule[field]
+    else rule[field] = Number(value)
+}
+
+function isSnsPublishTask(state: AslObject): boolean {
+    return state.Type === 'Task' && state.Resource === 'arn:aws:states:::sns:publish'
+}
+
+function choiceLabel(choice: AslObject): string {
+    const operator = Object.keys(choice).find((key) => key !== 'Next' && key !== 'Comment' && key !== 'Variable')
+    if (!operator) return 'condition'
+    const value = choice[operator]
+    return `${stringValue(choice.Variable) ?? ''} ${operator}${value === undefined ? '' : ` ${JSON.stringify(value)}`}`.trim()
+}
+
+function choiceBranches(state: AslObject): string[] {
+    const choices = Array.isArray(state.Choices) ? state.Choices.filter(isObject).map((_, index) => `Rule #${index + 1}`) : []
+    return choiceHasDefaultLane(state) ? [...choices, 'Default'] : choices
+}
+
+function choiceHasDefaultLane(state: AslObject): boolean {
+    const choices = arrayValue(state.Choices).filter(isObject)
+    return typeof state.Default === 'string' || choices.length === 0 || choices.some((choice) => typeof choice.Next !== 'string')
+}
+
+function choiceOperator(rule: AslObject): string {
+    return Object.keys(rule).find((key) => key !== 'Next' && key !== 'Comment' && key !== 'Variable') ?? 'StringEquals'
+}
+
+function choiceEditorValue(value: unknown): string {
+    if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') return String(value)
+    return ''
+}
+
+function parseChoiceValue(operator: string, value: string): string | number | boolean {
+    if (operator === 'NumericEquals') return value === '' ? 0 : Number(value)
+    if (operator === 'BooleanEquals' || operator === 'IsPresent') return value === 'true'
+    return value
+}
+
+function updateChoiceRule(state: AslObject, index: number, change: (rule: AslObject) => void): void {
+    const choices = arrayValue(state.Choices)
+    const rule = choices[index]
+    if (!isObject(rule)) return
+    change(rule)
+    state.Choices = choices
+}
+
+function removeChoiceRule(state: AslObject, index: number): void {
+    const choices = arrayValue(state.Choices)
+    choices.splice(index, 1)
+    state.Choices = choices
+}
+
+function supportsTransition(state: AslObject): boolean {
+    return state.Type !== 'Choice' && state.Type !== 'Succeed' && state.Type !== 'Fail'
+}
+
+function setChoiceOperator(rule: AslObject, operator: string): void {
+    const previous = choiceOperator(rule)
+    const previousValue = rule[previous]
+    delete rule[previous]
+    rule[operator] = operator === 'NumericEquals' ? (typeof previousValue === 'number' ? previousValue : 0) : operator === 'BooleanEquals' || operator === 'IsPresent' ? (typeof previousValue === 'boolean' ? previousValue : true) : typeof previousValue === 'string' ? previousValue : ''
+}
+
+function isObject(value: unknown): value is AslObject {
+    return typeof value === 'object' && value !== null && !Array.isArray(value)
+}
+
+function stringValue(value: unknown): string | undefined {
+    return typeof value === 'string' ? value : undefined
+}
+
+function parametersOf(state: AslObject): AslObject {
+    return isObject(state.Parameters) ? state.Parameters : {}
+}
+
+function mutableParameters(state: AslObject): AslObject {
+    if (!isObject(state.Parameters)) state.Parameters = {}
+    return state.Parameters as AslObject
+}
+
+function setTaskParameter(state: AslObject, key: string, value: unknown): void {
+    mutableParameters(state)[key] = value
+}
+
+function setOptionalTaskParameter(state: AslObject, key: string, value: string): void {
+    const parameters = mutableParameters(state)
+    if (value) parameters[key] = value
+    else delete parameters[key]
+}
+
+function revisionId(resource: CloudResource | undefined): string | undefined {
+    return stringValue(resource?.metadata.revisionId)
+}
+
+// These transformations operate on one ASL States scope, leaving nested and unknown fields intact.
+// eslint-disable-next-line react-refresh/only-export-components
+export function insertRootState(definition: AslObject, action: WorkflowAction): {definition: AslObject; name: string} {
+    const nextDefinition = structuredClone(definition)
+    const states = nextDefinition.States as AslObject
+    const name = uniqueStateName(states, isTaskAction(action) ? taskIntegrationForAction(action).stateName : action[0].toUpperCase() + action.slice(1))
+    const names = Object.keys(states)
+    const firstName = names[0]
+    const startAt = stringValue(nextDefinition.StartAt) ?? firstName
+    const state = actionState(action)
+    const terminal = [...names].reverse().map((stateName) => [stateName, states[stateName]] as const).find(([, candidate]) => isObject(candidate) && candidate.End === true && candidate.Type !== 'Succeed' && candidate.Type !== 'Fail')
+    const explicitTerminals = names.map((stateName) => states[stateName]).filter((candidate): candidate is AslObject => isObject(candidate) && (candidate.Type === 'Succeed' || candidate.Type === 'Fail'))
+
+    if (terminal && isObject(terminal[1])) {
+        delete terminal[1].End
+        terminal[1].Next = name
+    } else if (startAt && action !== 'succeed' && action !== 'fail' && action !== 'choice') {
+        delete state.End
+        state.Next = startAt
+        nextDefinition.StartAt = name
+    } else if (action === 'choice') {
+        nextDefinition.StartAt = name
+    } else if ((action === 'succeed' || action === 'fail') && explicitTerminals.length > 0) {
+        explicitTerminals.forEach((previousTerminal) => {
+            delete previousTerminal.Error
+            delete previousTerminal.Cause
+            delete previousTerminal.End
+            previousTerminal.Type = 'Pass'
+            previousTerminal.Next = name
+        })
+    }
+    states[name] = state
+    if (!stringValue(nextDefinition.StartAt)) {
+        nextDefinition.StartAt = name
+    }
+    return {definition: nextDefinition, name}
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+export function spliceLambdaIntoEdge(definition: AslObject, splice: EdgeSplice): {definition: AslObject; name: string} | undefined {
+    return spliceTaskIntoEdge(definition, splice, 'lambda')
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+export function spliceTaskIntoEdge(definition: AslObject, splice: EdgeSplice, action: TaskAction): {definition: AslObject; name: string} | undefined {
+    const nextDefinition = structuredClone(definition)
+    const source = stateAtPath(nextDefinition, splice.sourcePath)
+    const scope = stateScopeAtPath(nextDefinition, splice.sourcePath)
+    if (!source || !scope) return undefined
+
+    let originalTarget: string | undefined
+    if (splice.kind === 'next') originalTarget = stringValue(source.Next)
+    else if (splice.kind === 'default') originalTarget = stringValue(source.Default)
+    else {
+        const rule = arrayValue(source.Choices)[splice.choiceIndex ?? -1]
+        if (isObject(rule)) originalTarget = stringValue(rule.Next)
+    }
+    if (!originalTarget || !isObject(scope[originalTarget])) return undefined
+
+    const name = uniqueStateName(scope, taskIntegrationForAction(action).stateName)
+    const state = actionState(action)
+    delete state.End
+    state.Next = originalTarget
+    scope[name] = state
+    if (splice.kind === 'next') source.Next = name
+    else if (splice.kind === 'default') source.Default = name
+    else {
+        const rule = arrayValue(source.Choices)[splice.choiceIndex ?? -1]
+        if (!isObject(rule)) return undefined
+        rule.Next = name
+    }
+    return {definition: nextDefinition, name}
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+export function renameStateInScope(definition: AslObject, path: string[], newName: string): {definition: AslObject; path: string[]} | undefined {
+    const oldName = path[path.length - 1]
+    if (!oldName || oldName === newName) return {definition, path}
+    const nextDefinition = structuredClone(definition)
+    const scope = stateScopeAtPath(nextDefinition, path)
+    if (!scope || !isObject(scope[oldName]) || scope[newName] !== undefined) return undefined
+    const renamed = Object.fromEntries(Object.entries(scope).map(([name, state]) => [name === oldName ? newName : name, state]))
+    Object.keys(scope).forEach((name) => delete scope[name])
+    Object.assign(scope, renamed)
+    rewriteScopeReferences(nextDefinition, scope, oldName, newName)
+    return {definition: nextDefinition, path: [...path.slice(0, -1), newName]}
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+export function deleteStateInScope(definition: AslObject, path: string[]): {definition: AslObject} | {error: string} {
+    const name = path[path.length - 1]
+    if (!name) return {error: 'Only workflow states can be deleted.'}
+    const nextDefinition = structuredClone(definition)
+    const context = stateScopeContextAtPath(nextDefinition, path)
+    if (!context || !isObject(context.scope[name])) return {error: 'Only workflow states can be deleted.'}
+    const {scope, owner} = context
+    const names = Object.keys(scope)
+    if (owner !== nextDefinition && names.length === 1) return {error: 'A Parallel branch or Map item scope must contain at least one state.'}
+    const state = scope[name] as AslObject
+    const replacement = stringValue(state.Next)
+    if (replacement === name) return {error: `Cannot delete ${name} because it transitions to itself.`}
+    if (replacement && !isObject(scope[replacement])) return {error: `Cannot delete ${name} because its Next target ${replacement} does not exist.`}
+
+    Object.entries(scope).forEach(([candidateName, candidate]) => {
+        if (candidateName === name || !isObject(candidate)) return
+        if (candidate.Next === name) {
+            if (replacement) candidate.Next = replacement
+            else {
+                delete candidate.Next
+                if (candidate.Type !== 'Choice' && candidate.Type !== 'Succeed' && candidate.Type !== 'Fail') candidate.End = true
+            }
+        }
+        if (candidate.Default === name) {
+            if (replacement) candidate.Default = replacement
+            else delete candidate.Default
+        }
+        if (Array.isArray(candidate.Choices)) candidate.Choices.forEach((choice) => {
+            if (!isObject(choice) || choice.Next !== name) return
+            if (replacement) choice.Next = replacement
+            else delete choice.Next
+        })
+        if (Array.isArray(candidate.Catch)) {
+            const catchers = candidate.Catch.flatMap((catcher) => {
+                if (!isObject(catcher) || catcher.Next !== name) return [catcher]
+                if (!replacement) return []
+                catcher.Next = replacement
+                return [catcher]
+            })
+            if (catchers.length > 0) candidate.Catch = catchers
+            else delete candidate.Catch
+        }
+    })
+    delete scope[name]
+    if (owner.StartAt === name) {
+        const nextStart = replacement ?? Object.keys(scope)[0]
+        if (nextStart) owner.StartAt = nextStart
+        else delete owner.StartAt
+    }
+    return {definition: nextDefinition}
+}
+
+function actionState(action: WorkflowAction): AslObject {
+    if (isTaskAction(action)) {
+        const integration = taskIntegrationForAction(action)
+        if (action === 'lambda') return {
+            Type: 'Task',
+            Resource: integration.resource,
+            Parameters: structuredClone(integration.parameters),
+            OutputPath: '$.Payload',
+            Retry: [{ErrorEquals: ['Lambda.ServiceException', 'Lambda.AWSLambdaException', 'Lambda.SdkClientException', 'Lambda.TooManyRequestsException'], IntervalSeconds: 2, MaxAttempts: 6, BackoffRate: 2}],
+            End: true,
+        }
+        return {Type: 'Task', Resource: integration.resource, Parameters: structuredClone(integration.parameters), End: true}
+    }
+    switch (action) {
+        case 'pass': return {Type: 'Pass', End: true}
+        case 'choice': return {Type: 'Choice', Choices: [{Variable: '$.choice', IsPresent: true}]}
+        case 'wait': return {Type: 'Wait', Seconds: 1, End: true}
+        case 'succeed': return {Type: 'Succeed'}
+        case 'fail': return {Type: 'Fail', Error: 'WorkflowFailed'}
+    }
+}
+
+function isTaskAction(action: unknown): action is TaskAction {
+    return typeof action === 'string' && TASK_INTEGRATION_BY_ACTION.has(action as TaskAction)
+}
+
+function taskIntegrationForAction(action: TaskAction): TaskIntegration {
+    return TASK_INTEGRATION_BY_ACTION.get(action)!
+}
+
+function taskIntegrationForState(state: AslObject): TaskIntegration | undefined {
+    return state.Type === 'Task' ? TASK_INTEGRATION_BY_RESOURCE.get(stringValue(state.Resource) ?? '') : undefined
+}
+
+function uniqueStateName(states: AslObject, base: string): string {
+    if (states[base] === undefined) return base
+    let index = 2
+    while (states[`${base}${index}`] !== undefined) index++
+    return `${base}${index}`
+}
+
+function stateScopeAtPath(definition: AslObject, path: string[]): AslObject | undefined {
+    return stateScopeContextAtPath(definition, path)?.scope
+}
+
+function stateScopeContextAtPath(definition: AslObject, path: string[]): {scope: AslObject; owner: AslObject} | undefined {
+    if (path[0] !== 'states' || !isObject(definition.States)) return undefined
+    let scope = definition.States
+    let owner = definition
+    for (let index = 1; index < path.length - 1; index += 2) {
+        const parent = scope[path[index]]
+        const nestedScope = path[index + 1]
+        if (!isObject(parent)) return undefined
+        if (nestedScope?.startsWith('branch-') && Array.isArray(parent.Branches)) {
+            const branch = parent.Branches[Number(nestedScope.slice(7))]
+            if (!isObject(branch) || !isObject(branch.States)) return undefined
+            scope = branch.States
+            owner = branch
+        } else if (nestedScope === 'items') {
+            const iterator = parent.ItemProcessor ?? parent.Iterator
+            if (!isObject(iterator) || !isObject(iterator.States)) return undefined
+            scope = iterator.States
+            owner = iterator
+        } else {
+            return undefined
+        }
+    }
+    return {scope, owner}
+}
+
+function rewriteScopeReferences(definition: AslObject, scope: AslObject, oldName: string, newName: string): void {
+    const rewriteStartAt = (owner: AslObject): boolean => {
+        if (owner.States === scope && owner.StartAt === oldName) {
+            owner.StartAt = newName
+            return true
+        }
+        if (!isObject(owner.States)) return false
+        return Object.values(owner.States).some((candidate) => {
+            if (!isObject(candidate)) return false
+            if (candidate.Type === 'Parallel' && Array.isArray(candidate.Branches) && candidate.Branches.some((branch) => isObject(branch) && rewriteStartAt(branch))) return true
+            const iterator = candidate.ItemProcessor ?? candidate.Iterator
+            return candidate.Type === 'Map' && isObject(iterator) && rewriteStartAt(iterator)
+        })
+    }
+    rewriteStartAt(definition)
+    Object.values(scope).forEach((candidate) => {
+        if (!isObject(candidate)) return
+        if (candidate.Next === oldName) candidate.Next = newName
+        if (candidate.Default === oldName) candidate.Default = newName
+        if (Array.isArray(candidate.Choices)) candidate.Choices.forEach((choice) => { if (isObject(choice) && choice.Next === oldName) choice.Next = newName })
+        if (Array.isArray(candidate.Catch)) candidate.Catch.forEach((catcher) => { if (isObject(catcher) && catcher.Next === oldName) catcher.Next = newName })
+    })
+}
+
+function parseDefinition(definition: string): AslObject | Error {
+    try {
+        const parsed: unknown = JSON.parse(definition)
+        if (!isObject(parsed) || !isObject(parsed.States)) {
+            return new Error('ASL definition must contain a States object.')
+        }
+        return parsed
+    } catch (parseError: unknown) {
+        return parseError instanceof Error ? parseError : new Error('Unable to parse ASL JSON.')
+    }
+}
+
+function aslValidationErrors(definition: AslObject, allowEmptyRoot = false): string[] {
+    const errors: string[] = []
+    const inspectScope = (owner: AslObject, prefix: string, root = false) => {
+        if (!isObject(owner.States)) {
+            errors.push(`${prefix || 'Workflow'} needs a States object.`)
+            return
+        }
+        const states = owner.States
+        const names = Object.keys(states)
+        if (names.length === 0) {
+            if (!root || !allowEmptyRoot) errors.push(`${prefix || 'Workflow'} must contain at least one state.`)
+            return
+        }
+        if (typeof owner.StartAt !== 'string' || !isObject(states[owner.StartAt])) errors.push(`${prefix || 'Workflow'} StartAt needs an existing state.`)
+        Object.entries(states).forEach(([name, value]) => {
+            if (!isObject(value)) {
+                errors.push(`${prefix}${name} must be a state object.`)
+                return
+            }
+            if (typeof value.Next === 'string' && !isObject(states[value.Next])) errors.push(`${prefix}${name} Next target ${value.Next} does not exist.`)
+            if (Array.isArray(value.Catch)) value.Catch.forEach((catcher, index) => {
+                if (!isObject(catcher) || typeof catcher.Next !== 'string' || !isObject(states[catcher.Next])) errors.push(`${prefix}${name} Catch #${index + 1} needs an existing target.`)
+            })
+            if (value.Type === 'Choice') {
+                const choices = arrayValue(value.Choices)
+                if (choices.length === 0) errors.push(`${prefix}${name} needs at least one Choice rule.`)
+                choices.forEach((choice, index) => {
+                    if (!isObject(choice) || typeof choice.Next !== 'string' || !isObject(states[choice.Next])) errors.push(`${prefix}${name} Rule #${index + 1} needs a target.`)
+                })
+                if (value.Default !== undefined && (typeof value.Default !== 'string' || !isObject(states[value.Default]))) errors.push(`${prefix}${name} Default needs an existing target.`)
+            }
+            if (value.Type === 'Parallel') {
+                if (!Array.isArray(value.Branches) || value.Branches.length === 0) errors.push(`${prefix}${name} needs at least one Parallel branch.`)
+                else value.Branches.forEach((branch, index) => {
+                    if (isObject(branch)) inspectScope(branch, `${prefix}${name} branch ${index + 1} / `)
+                    else errors.push(`${prefix}${name} branch ${index + 1} must be an object.`)
+                })
+            }
+            const iterator = value.ItemProcessor ?? value.Iterator
+            if (value.Type === 'Map') {
+                if (isObject(iterator)) inspectScope(iterator, `${prefix}${name} items / `)
+                else errors.push(`${prefix}${name} needs an ItemProcessor or Iterator scope.`)
+            }
+        })
+    }
+    inspectScope(definition, '', true)
+    return errors
+}
diff --git a/packages/frontend/src/index.css b/packages/frontend/src/index.css
index 89b40b4..5011e77 100644
--- a/packages/frontend/src/index.css
+++ b/packages/frontend/src/index.css
@@ -53,6 +53,46 @@
     --bulk-bar-border: #5c6bc0;
     --bulk-bar-text: #e8eaf6;
 
+    /* Workflow Studio: keep canvas surfaces readable independently of state accents. */
+    --workflow-save-border: #4e628f;
+    --workflow-save-bg: #18233c;
+    --workflow-save-text: #dce7ff;
+    --workflow-save-hover-border: #7498e6;
+    --workflow-save-hover-bg: #21345a;
+    --workflow-canvas-bg: #f2f4f7;
+    --workflow-canvas-dot: rgba(58, 72, 98, .22);
+    --workflow-toolbar-bg: #ffffff;
+    --workflow-node-bg: #ffffff;
+    --workflow-node-text: #162033;
+    --workflow-node-muted: #526077;
+    --workflow-node-border: #73819a;
+    --workflow-node-accent: #6389e8;
+    --workflow-choice-border: #9a7137;
+    --workflow-container-border: #5773a9;
+    --workflow-container-bg: rgba(38, 56, 95, .36);
+    --workflow-warning-border: #bf7b37;
+    --workflow-warning-text: #f3b465;
+    --workflow-task: #5d8dff;
+    --workflow-choice: #d99a3d;
+    --workflow-pass: #76b7a1;
+    --workflow-pass-border: #4f8073;
+    --workflow-wait: #a480df;
+    --workflow-wait-border: #73589b;
+    --workflow-parallel: #d279bd;
+    --workflow-parallel-border: #9d568d;
+    --workflow-map: #45b1bd;
+    --workflow-map-border: #39848d;
+    --workflow-start-border: #4d9d82;
+    --workflow-start-text: #8de0b7;
+    --workflow-end-border: #ab5a67;
+    --workflow-end-text: #f19aa6;
+    --workflow-validation-border: #8f652f;
+    --workflow-validation-bg: rgba(143, 101, 47, .16);
+    --workflow-validation-text: #f2c47e;
+    --workflow-confirmation-border: #657da9;
+    --workflow-confirmation-bg: rgba(42, 61, 96, .34);
+    --workflow-edge: #59677d;
+
     /* ── Sidebar geometry ── */
     --sidebar-w: 220px;
     --sidebar-rail-w: 52px;
@@ -116,6 +156,45 @@
     --bulk-bar-border: #3949ab;
     --bulk-bar-text: #1a237e;
 
+    --workflow-save-border: #5565a7;
+    --workflow-save-bg: #e7ecff;
+    --workflow-save-text: #27366e;
+    --workflow-save-hover-border: #3949ab;
+    --workflow-save-hover-bg: #d9e2ff;
+    --workflow-canvas-bg: #f6f7f9;
+    --workflow-canvas-dot: rgba(69, 82, 108, .2);
+    --workflow-toolbar-bg: #ffffff;
+    --workflow-node-bg: #ffffff;
+    --workflow-node-text: #111827;
+    --workflow-node-muted: #4b5565;
+    --workflow-node-border: #7180b0;
+    --workflow-node-accent: #3949ab;
+    --workflow-choice-border: #a76519;
+    --workflow-container-border: #6679ad;
+    --workflow-container-bg: rgba(73, 95, 159, .08);
+    --workflow-warning-border: #a85f13;
+    --workflow-warning-text: #7a3f00;
+    --workflow-task: #1d4ed8;
+    --workflow-choice: #b45309;
+    --workflow-pass: #177a62;
+    --workflow-pass-border: #27806b;
+    --workflow-wait: #7040a6;
+    --workflow-wait-border: #7950a5;
+    --workflow-parallel: #ad3d87;
+    --workflow-parallel-border: #9f4d84;
+    --workflow-map: #147a88;
+    --workflow-map-border: #2d7b86;
+    --workflow-start-border: #24795f;
+    --workflow-start-text: #145a45;
+    --workflow-end-border: #a63b48;
+    --workflow-end-text: #862a35;
+    --workflow-validation-border: #a85f13;
+    --workflow-validation-bg: #fff4df;
+    --workflow-validation-text: #6f3900;
+    --workflow-confirmation-border: #6e7eb3;
+    --workflow-confirmation-bg: #edf1ff;
+    --workflow-edge: #5c6b91;
+
     /* 45% black at 32px blur is far too heavy under a white panel. */
     --sidebar-overlay-shadow: 6px 0 28px rgba(38, 48, 82, 0.18);
 }
@@ -820,6 +899,165 @@ pre,
     flex: 1 1 160px;
 }
 
+.workflow-studio-page { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100%; min-width: 0; }
+.workflow-studio-workspace { min-height: 0; max-width: 100%; padding: 0; overflow: hidden; }
+.workflow-studio { display: flex; height: 100%; min-height: 0; flex-direction: column; border: 0; border-radius: 0; }
+.workflow-studio > .dynamic-stage-header { min-height: 58px; margin: 0; padding: 9px 18px; border-bottom: 1px solid var(--border); }
+.workflow-studio > .dynamic-stage-header h3 { margin: 1px 0 0; font-size: 15px; }
+.workflow-studio > .compact-text { margin: 0; padding: 7px 18px; border-bottom: 1px solid var(--border-faint); }
+.workflow-studio-actions { display: flex; align-items: center; gap: 8px; }
+.workflow-save-definition { min-height: 30px; border-color: var(--workflow-save-border); background: var(--workflow-save-bg); color: var(--workflow-save-text); font-size: 11px; }
+.workflow-save-definition:not(:disabled):hover { border-color: var(--workflow-save-hover-border); background: var(--workflow-save-hover-bg); }
+.workflow-studio-split { display: grid; min-height: 0; flex: 1; grid-template-columns: 280px minmax(440px, 1fr) 350px; border-top: 1px solid var(--border); }
+.workflow-action-palette, .workflow-studio-json { min-width: 0; overflow-x: hidden; overflow-y: auto; background: var(--surface); scrollbar-gutter: stable; }
+.workflow-action-palette { padding: 18px 16px; border-right: 1px solid var(--border); }
+.workflow-studio-json { padding: 18px; border-left: 1px solid var(--border); }
+.workflow-studio-json > * { min-width: 0; max-width: 100%; }
+.workflow-pane-title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; color: var(--text-bright); font-size: 15px; font-weight: 700; }
+.workflow-pane-title small { overflow: hidden; color: var(--text-3); font-size: 9px; font-weight: 700; letter-spacing: .08em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
+.workflow-palette-search { position: relative; display: block; margin: 16px 0 12px; }
+.workflow-palette-search svg { position: absolute; top: 9px; left: 10px; color: var(--text-3); }
+.workflow-palette-search input { width: 100%; height: 34px; padding: 0 10px 0 32px; border: 1px solid var(--input-border); border-radius: 3px; background: var(--input-bg); color: var(--text); font-size: 12px; }
+.workflow-palette-tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--border); }
+.workflow-palette-tabs button { justify-content: center; margin: 0; padding: 8px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--text-3); font-size: 12px; font-weight: 700; }
+.workflow-palette-tabs button.active { border-bottom-color: var(--accent); color: var(--text-bright); }
+.workflow-action-palette > p { margin: 17px 0 8px; color: var(--text-3); font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
+.workflow-palette-cards { display: grid; gap: 8px; }
+.workflow-palette-cards > button { display: flex; width: 100%; align-items: center; gap: 10px; margin: 0; padding: 9px; border: 1px solid var(--border); border-radius: 4px; background: var(--elevated); color: var(--text); text-align: left; box-shadow: 0 2px 5px rgba(0, 0, 0, .12); }
+.workflow-palette-cards > button:hover { border-color: var(--accent); background: var(--raised); }
+.workflow-palette-cards > button > span:last-child { display: grid; min-width: 0; gap: 2px; }
+.workflow-palette-cards strong { font-size: 12px; }
+.workflow-palette-cards small { color: var(--text-3); font-size: 9px; }
+.workflow-palette-icon { display: grid; width: 32px; height: 32px; flex: 0 0 auto; place-items: center; border-radius: 3px; background: var(--accent-tint); color: var(--accent); }
+.workflow-palette-service-group { display: grid; gap: 6px; margin: 0 0 12px; }
+.workflow-palette-service-group h4 { margin: 0; color: var(--text-2); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; }
+.workflow-palette-lambda { background: rgba(255, 153, 0, .15); color: #d97706; }
+.workflow-palette-sns { background: rgba(196, 56, 123, .14); color: #c4387b; }
+.workflow-palette-sqs-send-message { background: rgba(209, 79, 100, .14); color: #c2415a; }
+.workflow-palette-dynamodb-put-item, .workflow-palette-dynamodb-get-item, .workflow-palette-dynamodb-update-item, .workflow-palette-dynamodb-delete-item { background: rgba(47, 110, 181, .14); color: #2f6eb5; }
+.workflow-palette-eventbridge-put-events { background: rgba(210, 68, 139, .14); color: #c3347a; }
+.workflow-palette-ecs-run-task, .workflow-palette-ecs-run-task-sync { background: rgba(232, 119, 34, .14); color: #d46613; }
+.workflow-palette-states-start-execution { background: rgba(119, 79, 184, .14); color: #7650b5; }
+.workflow-palette-choice { background: rgba(217, 154, 61, .14); color: var(--workflow-choice); }
+.workflow-palette-wait { background: rgba(164, 128, 223, .14); color: var(--workflow-wait); }
+.workflow-branch-hint { margin-top: 14px; padding: 9px; border: 1px solid var(--workflow-choice-border); border-radius: 3px; color: var(--workflow-warning-text); font-size: 11px; line-height: 1.45; }
+.workflow-studio-canvas { position: relative; min-height: 0; background: radial-gradient(circle at 1px 1px, var(--workflow-canvas-dot) 1px, transparent 0) 0 0 / 20px 20px, var(--workflow-canvas-bg); }
+.workflow-canvas-toolbar { position: absolute; z-index: 5; top: 12px; left: 50%; display: flex; gap: 2px; padding: 3px; transform: translateX(-50%); border: 1px solid #c4cad4; border-radius: 4px; background: var(--workflow-toolbar-bg); box-shadow: 0 2px 8px rgba(29, 38, 55, .16); }
+.workflow-canvas-toolbar span { width: 1px; margin: 3px; background: #d7dbe2; }
+.workflow-canvas-toolbar button { display: grid; width: 28px; height: 28px; place-items: center; border: 0; border-radius: 2px; background: transparent; color: #38455a; }
+.workflow-canvas-toolbar button:hover:not(:disabled) { background: #e8ecf4; color: #111827; }
+.workflow-canvas-toolbar button:disabled { color: #a1a9b5; cursor: not-allowed; }
+.workflow-inspector-tabs { display: flex; gap: 20px; margin: 17px -18px 18px; padding: 0 18px; border-bottom: 1px solid var(--border); }
+.workflow-inspector-tabs button { padding: 0 1px 10px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--text-3); font-size: 12px; font-weight: 700; }
+.workflow-inspector-tabs button.active { border-bottom-color: var(--accent); color: var(--text-bright); }
+.workflow-rename, .workflow-choice-rule label, .workflow-choice-default label, .workflow-transition-editor label, .workflow-sns-task-picker > label, .workflow-definition-editor > label { display: grid; gap: 5px; color: var(--text-2); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
+.workflow-rename { margin: 0 0 18px; }
+.workflow-rename input, .workflow-choice-rule input, .workflow-choice-rule select, .workflow-choice-default select, .workflow-transition-editor select { width: 100%; min-height: 34px; padding: 0 9px; border: 1px solid var(--input-border); border-radius: 3px; background: var(--input-bg); color: var(--text); font-size: 12px; }
+.workflow-studio-json pre { margin: 8px 0 0; overflow: auto; color: var(--text); font-size: 12px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
+.workflow-state-node { position: relative; min-width: 190px; max-width: 230px; padding: 12px 14px; border: 1px solid var(--workflow-node-border); border-left: 5px solid var(--workflow-node-accent); border-radius: 5px; background: var(--workflow-node-bg); color: var(--workflow-node-text); box-shadow: 0 3px 9px rgba(31, 41, 55, .2); }
+.workflow-state-node strong, .workflow-state-type, .workflow-retry-marker { display: block; }
+.workflow-state-node > strong { padding-right: 22px; font-size: 13px; line-height: 1.35; }
+.workflow-state-type { display: flex; align-items: center; gap: 5px; margin-bottom: 6px; color: var(--workflow-node-muted); font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
+.workflow-node-delete { position: absolute; z-index: 2; top: 8px; right: 8px; display: grid; width: 21px; height: 21px; place-items: center; border: 0; border-radius: 3px; background: transparent; color: var(--workflow-node-muted); }
+.workflow-node-delete:hover { background: #fee2e2; color: #b91c1c; }
+.workflow-choice-branches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; margin-top: 10px; }
+.workflow-choice-branches > div { position: relative; min-height: 24px; padding: 5px 13px 5px 6px; border: 1px solid #d69a46; border-radius: 2px; background: #fff8ed; color: #68420d; font-size: 9px; font-weight: 700; }
+.workflow-choice-branches .react-flow__handle { bottom: -5px; width: 8px; height: 8px; border-color: #945f16; background: #fff; }
+.workflow-choice-placeholder { display: grid; width: 210px; min-height: 100px; place-content: center; gap: 5px; border: 2px dashed #79879a; border-radius: 5px; background: rgba(255, 255, 255, .78); color: var(--workflow-node-text); text-align: center; box-shadow: 0 2px 6px rgba(31, 41, 55, .08); }
+.workflow-choice-placeholder:hover, .workflow-choice-placeholder:focus-visible { border-color: #3949ab; background: #fff; }
+.workflow-choice-placeholder > span { color: #74480b; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
+.workflow-choice-placeholder > strong { font-size: 13px; }
+.workflow-choice-placeholder > small { color: var(--workflow-node-muted); font-size: 9px; }
+.workflow-empty-guidance { display: grid; gap: 4px; min-width: 190px; padding: 15px; border: 2px dashed var(--workflow-node-border); border-radius: 5px; background: rgba(255, 255, 255, .82); color: var(--workflow-node-text); text-align: center; }
+.workflow-empty-guidance span { color: var(--workflow-node-muted); font-size: 11px; }
+.workflow-open-studio { width: calc(100% - 24px); margin: 12px 12px 0; }
+.workflow-container-node { height: 100%; padding: 10px; border: 1px dashed var(--workflow-container-border); border-radius: 6px; background: var(--workflow-container-bg); color: var(--workflow-node-text); }
+.workflow-retry-marker { margin-top: 7px; color: #854d0e; font-size: 10px; font-weight: 700; }
+.workflow-state-name { display: block; margin-top: 4px; color: var(--workflow-node-muted); font-size: 10px; }
+.workflow-unattached-marker { display: inline-block; margin-top: 7px; padding: 2px 5px; border: 1px solid #a85f13; border-radius: 2px; color: #7a3f00; font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
+.workflow-state-task { border-left-color: var(--workflow-task); }
+.workflow-node-lambda { border-left-color: #d97706; }
+.workflow-node-sns { border-left-color: #c4387b; }
+.workflow-node-sqs-send-message { border-left-color: #c2415a; }
+.workflow-node-dynamodb-put-item, .workflow-node-dynamodb-get-item, .workflow-node-dynamodb-update-item, .workflow-node-dynamodb-delete-item { border-left-color: #2f6eb5; }
+.workflow-node-eventbridge-put-events { border-left-color: #c3347a; }
+.workflow-node-ecs-run-task, .workflow-node-ecs-run-task-sync { border-left-color: #d46613; }
+.workflow-node-states-start-execution { border-left-color: #7650b5; }
+.workflow-state-choice { border-left-color: var(--workflow-choice); border-color: var(--workflow-choice-border); }
+.workflow-state-pass { border-left-color: var(--workflow-pass); border-color: var(--workflow-pass-border); }
+.workflow-state-wait { border-left-color: var(--workflow-wait); border-color: var(--workflow-wait-border); }
+.workflow-state-succeed { border-left-color: #15803d; border-color: #15803d; }
+.workflow-state-fail { border-left-color: #b91c1c; border-color: #b91c1c; }
+.workflow-state-parallel { border-left-color: var(--workflow-parallel); border-color: var(--workflow-parallel-border); }
+.workflow-state-map { border-left-color: var(--workflow-map); border-color: var(--workflow-map-border); }
+.workflow-state-unattached { border-color: #a85f13; }
+.workflow-boundary-node { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 104px; padding: 8px 12px; border: 1px solid; border-radius: 999px; background: #fff; box-shadow: 0 2px 6px rgba(31, 41, 55, .18); font-size: 12px; font-weight: 700; }
+.workflow-boundary-start { border-color: #24795f; color: #145a45; }
+.workflow-boundary-end { border-color: #a63b48; color: #862a35; }
+.workflow-validation { display: flex; align-items: baseline; gap: 9px; margin: 8px 16px; padding: 8px 11px; border: 1px solid var(--workflow-validation-border); border-radius: 3px; background: var(--workflow-validation-bg); color: var(--workflow-validation-text); font-size: 11px; }
+.workflow-validation-errors { border-color: var(--status-error); color: var(--status-error); }
+.workflow-confirmation { display: grid; gap: 6px; margin: 10px 16px; padding: 9px 11px; border: 1px solid var(--workflow-confirmation-border); border-radius: 3px; background: var(--workflow-confirmation-bg); color: var(--text-2); font-size: 12px; }
+.workflow-confirmation strong { color: var(--text); }
+.workflow-confirmation > div { display: flex; gap: 6px; }
+.workflow-lambda-picker { display: grid; gap: 5px; margin: 4px 0 14px; }
+.workflow-lambda-picker label { color: var(--text-2); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
+.workflow-lambda-picker select, .workflow-task-rule input, .workflow-task-rule select, .workflow-sns-task-picker select { width: 100%; min-height: 32px; border: 1px solid var(--input-border); border-radius: 3px; background: var(--input-bg); color: var(--text); }
+.workflow-task-editor { display: grid; gap: 10px; margin: 4px 0 14px; padding: 10px; border: 1px solid var(--border); border-radius: 3px; background: var(--connection-bg); }
+.workflow-task-editor h4 { margin: 0; color: var(--text); font-size: 13px; }
+.workflow-service-editor > label, .workflow-integration-entry > label { display: grid; min-width: 0; gap: 5px; color: var(--text-2); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
+.workflow-service-editor input, .workflow-service-editor select, .workflow-service-editor textarea { width: 100%; min-width: 0; min-height: 34px; padding: 6px 9px; border: 1px solid var(--input-border); border-radius: 3px; background: var(--input-bg); color: var(--text); font-size: 12px; }
+.workflow-service-editor textarea { min-height: 88px; resize: vertical; font: 11px/1.45 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; text-transform: none; }
+.workflow-service-editor .workflow-checkbox { display: flex; align-items: center; gap: 7px; }
+.workflow-service-editor .workflow-checkbox input { width: auto; min-height: 0; }
+.workflow-integration-entry { display: grid; min-width: 0; gap: 8px; padding: 9px; border: 1px solid var(--border); border-radius: 3px; }
+.workflow-integration-entry > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--text-2); font-size: 11px; }
+.workflow-task-section { display: grid; gap: 7px; }
+.workflow-task-section > div { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; color: var(--text-2); font-size: 11px; }
+.workflow-task-rule { display: grid; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 8px; border: 1px solid var(--border); border-radius: 3px; }
+.workflow-task-rule label { display: grid; gap: 3px; color: var(--text-3); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
+.workflow-task-rule label:first-child { grid-column: 1 / -1; }
+.workflow-task-rule .button { grid-column: 1 / -1; justify-self: start; }
+.workflow-choice-editor { display: grid; gap: 10px; }
+.workflow-inspector-section-title h4 { margin: 0; color: var(--text-bright); font-size: 13px; }
+.workflow-inspector-section-title span { color: var(--text-3); font-size: 10px; }
+.workflow-choice-rule { display: grid; gap: 9px; padding: 12px; border: 1px solid var(--border); border-radius: 3px; background: var(--connection-bg); }
+.workflow-choice-rule > div, .workflow-choice-default > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+.workflow-choice-rule > div > *, .workflow-choice-default > div > * { min-width: 0; }
+.workflow-choice-rule > div strong, .workflow-choice-default strong { color: var(--text); font-size: 11px; }
+.workflow-choice-rule > div span, .workflow-choice-default span { color: var(--text-3); font-size: 10px; }
+.workflow-add-rule { justify-self: start; }
+.workflow-choice-default { display: grid; gap: 7px; padding: 12px; border: 1px solid var(--border); border-radius: 3px; }
+.workflow-transition-editor { display: grid; gap: 8px; margin: 0 0 14px; padding: 10px; border: 1px solid var(--border); border-radius: 3px; background: var(--connection-bg); }
+.workflow-transition-editor h4 { margin: 0; color: var(--text); font-size: 13px; }
+.workflow-definition-editor { display: grid; gap: 9px; min-height: 460px; }
+.workflow-definition-editor textarea { width: 100%; min-height: 400px; resize: vertical; border: 1px solid var(--input-border); border-radius: 3px; background: var(--input-bg); color: var(--text); font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; tab-size: 2; }
+.workflow-definition-editor .button { justify-self: start; }
+.workflow-studio-canvas .react-flow__edge-path { stroke: var(--workflow-edge); stroke-width: 1.6; }
+.workflow-studio-canvas .react-flow__edge-text { fill: #283447; font-size: 10px; font-weight: 700; }
+.workflow-studio-canvas .react-flow__edge-textbg { fill: var(--workflow-canvas-bg); }
+.workflow-edge-label { position: absolute; z-index: 3; display: flex; max-width: 145px; align-items: center; gap: 6px; padding: 4px 7px; border: 1px solid #c6ccd6; border-radius: 999px; background: var(--surface); color: var(--text); font-size: 10px; font-weight: 700; line-height: 1.25; text-align: center; box-shadow: 0 1px 4px rgba(31, 41, 55, .14); pointer-events: all; overflow-wrap: anywhere; }
+.workflow-edge-label span { min-width: 0; }
+.workflow-edge-splice b { display: grid; width: 17px; height: 17px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--accent); color: #fff; font-size: 14px; line-height: 1; opacity: .72; }
+.workflow-edge-splice:hover, .workflow-edge-splice.drag-active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
+.workflow-edge-splice:hover b, .workflow-edge-splice.drag-active b { opacity: 1; }
+.workflow-catch-edge .react-flow__edge-path { stroke: #b91c1c; stroke-dasharray: 5 4; }
+.workflow-placeholder-edge .react-flow__edge-path { stroke-dasharray: 5 4; }
+
+@media (max-width: 1050px) {
+    .workflow-studio-split { grid-template-columns: 220px minmax(400px, 1fr) 300px; }
+}
+
+@media (max-width: 760px) {
+    .workflow-studio-page, .workflow-studio { height: auto; min-height: 100%; }
+    .workflow-studio-workspace { overflow: auto; }
+    .workflow-studio-split { grid-template-columns: 1fr; }
+    .workflow-action-palette { border-right: 0; border-bottom: 1px solid var(--border); }
+    .workflow-palette-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    .workflow-studio-canvas { min-height: 620px; }
+    .workflow-studio-json { border-top: 1px solid var(--border); border-left: 0; }
+    .workflow-task-rule { grid-template-columns: 1fr 1fr; }
+}
+
 .widget-header {
     display: flex;
     align-items: center;
@@ -1608,6 +1846,62 @@ pre,
     grid-template-columns: repeat(2, minmax(180px, 1fr));
 }
 
+.workflow-create-modes {
+    display: grid;
+    grid-column: 1 / -1;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 10px;
+    margin-bottom: 6px;
+}
+
+.workflow-create-mode {
+    align-items: flex-start;
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    background: var(--surface-subtle);
+    color: var(--text-2);
+    display: flex;
+    gap: 10px;
+    padding: 12px;
+    text-align: left;
+}
+
+.workflow-create-mode:hover,
+.workflow-create-mode.active {
+    border-color: var(--accent);
+    background: var(--accent-tint-faint);
+}
+
+.workflow-create-mode > svg {
+    color: var(--accent);
+    flex: 0 0 auto;
+}
+
+.workflow-create-mode strong,
+.workflow-create-mode small {
+    display: block;
+}
+
+.workflow-create-mode strong {
+    color: var(--text-bright);
+    font-size: 12px;
+}
+
+.workflow-create-mode small {
+    margin-top: 3px;
+    color: var(--text-muted);
+    font-size: 11px;
+    line-height: 1.35;
+}
+
+.workflow-definition-input {
+    box-sizing: border-box;
+    min-height: 230px;
+    resize: vertical;
+    width: 100%;
+    font-family: var(--font-mono, monospace);
+}
+
 .serverless-payload-editor {
     box-sizing: border-box;
     display: block;
@@ -3655,6 +3949,10 @@ button.console-service-card {
         grid-template-columns: 1fr;
     }
 
+    .workflow-create-modes {
+        grid-template-columns: 1fr;
+    }
+
     .resource-inspector {
         position: static;
     }
diff --git a/packages/frontend/src/lib/workflowCreate.test.ts b/packages/frontend/src/lib/workflowCreate.test.ts
new file mode 100644
index 0000000..82c4a4a
--- /dev/null
+++ b/packages/frontend/src/lib/workflowCreate.test.ts
@@ -0,0 +1,46 @@
+import {describe, expect, test} from 'vitest'
+import {validateAslDefinition, workflowCreateSubmission, workflowCreationDestinationPath} from './workflowCreate'
+
+describe('workflowCreateSubmission', () => {
+    test('keeps navigation metadata outside API values', () => {
+        expect(workflowCreateSubmission(' orders ', 'studio')).toEqual({
+            values: {name: 'orders'},
+            destination: 'studio',
+        })
+    })
+
+    test('preserves an explicit definition exactly', () => {
+        const definition = ' {"StartAt":"Done","States":{"Done":{"Type":"Succeed"}}}\n'
+
+        expect(workflowCreateSubmission('orders', 'explorer', definition)).toEqual({
+            values: {name: 'orders', definition},
+            destination: 'explorer',
+        })
+    })
+})
+
+describe('workflowCreationDestinationPath', () => {
+    test('opens Studio only for the Studio creation mode', () => {
+        const arn = 'arn:aws:states:us-east-1:000000000000:stateMachine:orders'
+
+        expect(workflowCreationDestinationPath('studio', arn)).toBe(`/cloud-explorer/aws/workflows/${encodeURIComponent(arn)}/studio`)
+        expect(workflowCreationDestinationPath('explorer', arn)).toBeNull()
+        expect(workflowCreationDestinationPath(undefined, arn)).toBeNull()
+    })
+})
+
+describe('validateAslDefinition', () => {
+    test('accepts an ASL object with a string StartAt and object States', () => {
+        expect(validateAslDefinition('{"StartAt":"Done","States":{}}')).toBeNull()
+    })
+
+    test.each([
+        [' ', 'ASL definition is required.'],
+        ['{', 'ASL definition must be valid JSON.'],
+        ['null', 'ASL definition must be a JSON object.'],
+        ['{"StartAt":false,"States":{}}', 'ASL definition must include StartAt as a string.'],
+        ['{"StartAt":"Done","States":null}', 'ASL definition must include States as an object.'],
+    ])('rejects %s', (definition, message) => {
+        expect(validateAslDefinition(definition)).toBe(message)
+    })
+})
diff --git a/packages/frontend/src/lib/workflowCreate.ts b/packages/frontend/src/lib/workflowCreate.ts
new file mode 100644
index 0000000..58e0d25
--- /dev/null
+++ b/packages/frontend/src/lib/workflowCreate.ts
@@ -0,0 +1,38 @@
+import {workflowStudioPath} from './workflowStudio'
+
+export type WorkflowCreationDestination = 'studio' | 'explorer'
+
+export interface WorkflowCreateSubmission {
+    values: Record<string, unknown>
+    destination: WorkflowCreationDestination
+}
+
+export function workflowCreateSubmission(name: string, destination: WorkflowCreationDestination, definition?: string): WorkflowCreateSubmission {
+    return {
+        values: definition === undefined ? {name: name.trim()} : {name: name.trim(), definition},
+        destination,
+    }
+}
+
+export function workflowCreationDestinationPath(destination: WorkflowCreationDestination | undefined, resourceId: string): string | null {
+    return destination === 'studio' ? workflowStudioPath(resourceId) : null
+}
+
+export function validateAslDefinition(definition: string): string | null {
+    if (!definition.trim()) return 'ASL definition is required.'
+
+    let parsed: unknown
+    try {
+        parsed = JSON.parse(definition)
+    } catch {
+        return 'ASL definition must be valid JSON.'
+    }
+    if (!isObject(parsed)) return 'ASL definition must be a JSON object.'
+    if (typeof parsed.StartAt !== 'string') return 'ASL definition must include StartAt as a string.'
+    if (!isObject(parsed.States)) return 'ASL definition must include States as an object.'
+    return null
+}
+
+function isObject(value: unknown): value is Record<string, unknown> {
+    return typeof value === 'object' && value !== null && !Array.isArray(value)
+}
diff --git a/packages/frontend/src/lib/workflowStudio.test.ts b/packages/frontend/src/lib/workflowStudio.test.ts
new file mode 100644
index 0000000..3181422
--- /dev/null
+++ b/packages/frontend/src/lib/workflowStudio.test.ts
@@ -0,0 +1,8 @@
+import {describe, expect, test} from 'vitest'
+import {workflowStudioPath} from '@/lib/workflowStudio'
+
+describe('workflowStudioPath', () => {
+    test('encodes a state machine ARN as one route parameter', () => {
+        expect(workflowStudioPath('arn:aws:states:us-east-1:000000000000:stateMachine:orders')).toBe('/cloud-explorer/aws/workflows/arn%3Aaws%3Astates%3Aus-east-1%3A000000000000%3AstateMachine%3Aorders/studio')
+    })
+})
diff --git a/packages/frontend/src/lib/workflowStudio.ts b/packages/frontend/src/lib/workflowStudio.ts
new file mode 100644
index 0000000..0beedd2
--- /dev/null
+++ b/packages/frontend/src/lib/workflowStudio.ts
@@ -0,0 +1,3 @@
+export function workflowStudioPath(resourceId: string): string {
+    return `/cloud-explorer/aws/workflows/${encodeURIComponent(resourceId)}/studio`
+}
diff --git a/packages/frontend/src/pages/WorkflowStudioPage.tsx b/packages/frontend/src/pages/WorkflowStudioPage.tsx
new file mode 100644
index 0000000..8521580
--- /dev/null
+++ b/packages/frontend/src/pages/WorkflowStudioPage.tsx
@@ -0,0 +1,24 @@
+import {ArrowLeft, Workflow} from 'lucide-react'
+import {Link, useParams} from 'react-router-dom'
+import {useCloudResourceQuery} from '@/api/queries/cloudQueries'
+import {WorkflowStudio} from '@/components/WorkflowStudio'
+
+export function WorkflowStudioPage() {
+    const {resourceId} = useParams()
+    const resourceQuery = useCloudResourceQuery('aws', 'workflows', resourceId)
+
+    return <div className="workflow-studio-page">
+        <header className="page-header data-workspace-header">
+            <Link className="button compact" to="/cloud-explorer/aws/workflows"><ArrowLeft size={14}/>Back to workflows</Link>
+            <div className="page-title">
+                <Workflow size={20}/>
+                <div><h1>{resourceQuery.data?.name ?? resourceId ?? 'Workflow Studio'}</h1><p className="muted">AWS Step Functions · Workflow Studio</p></div>
+            </div>
+        </header>
+        <div className="content workflow-studio-workspace">
+            {resourceQuery.isError && <p className="error-text" role="alert">Unable to load state machine: {resourceQuery.error instanceof Error ? resourceQuery.error.message : 'Unknown error.'}</p>}
+            {resourceQuery.isLoading && <p className="muted" role="status">Loading state machine.</p>}
+            {resourceQuery.data && <WorkflowStudio resource={resourceQuery.data}/>} 
+        </div>
+    </div>
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 964c0d8..88f6b62 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -110,6 +110,9 @@ importers:
       '@tanstack/react-query-devtools':
         specifier: ^5.101.2
         version: 5.101.2(@tanstack/react-query@5.101.2(react@19.2.7))(react@19.2.7)
+      '@xyflow/react':
+        specifier: ^12.10.1
+        version: 12.12.0(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       class-variance-authority:
         specifier: ^0.7.0
         version: 0.7.1
@@ -1263,6 +1266,24 @@ packages:
   '@types/chai@5.2.3':
     resolution: {integrity: sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==}
 
+  '@types/d3-color@3.1.3':
+    resolution: {integrity: sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==}
+
+  '@types/d3-drag@3.0.7':
+    resolution: {integrity: sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==}
+
+  '@types/d3-interpolate@3.0.4':
+    resolution: {integrity: sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==}
+
+  '@types/d3-selection@3.0.12':
+    resolution: {integrity: sha512-Qe/KWYhEiIIxGs7HrAAjMfShxKldx19SJtr5zu53f3afPsdZNz7HHtdTLXo/kqeiWNXVycI24kSnfzBYkTzpgw==}
+
+  '@types/d3-transition@3.0.9':
+    resolution: {integrity: sha512-uZS5shfxzO3rGlu0cC3bjmMFKsXv+SmZZcgp0KD22ts4uGXp5EVYGzu/0YdwZeKmddhcAccYtREJKkPfXkZuCg==}
+
+  '@types/d3-zoom@3.0.8':
+    resolution: {integrity: sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==}
+
   '@types/deep-eql@4.0.2':
     resolution: {integrity: sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==}
 
@@ -1400,6 +1421,22 @@ packages:
   '@vitest/utils@4.1.11':
     resolution: {integrity: sha512-zTCVGpyFsGWBhllOyKlTw/vnr6D9qxsfSDyfbyZmTyjHw5N/VuvzHpHoQjm2ZJzn4RJgx5w4r7V0er69CmLgPQ==}
 
+  '@xyflow/react@12.12.0':
+    resolution: {integrity: sha512-74oXI0Rgm1Eu33cHQAd74J6oVgCH9mbFyTVQbsGgp2kmWwh0HdtBr2VP04z8mbPD+M/xO69nqG5dDEt7/EN2rQ==}
+    peerDependencies:
+      '@types/react': '>=17'
+      '@types/react-dom': '>=17'
+      react: '>=17'
+      react-dom: '>=17'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@xyflow/system@0.0.83':
+    resolution: {integrity: sha512-a//eDjez3WZF47aaPTfVUDD0OINOq+WVwBZCRTqG+m0a5euX8EwlJ4jMY1Wxz0Ocj4xOeekJ70V22Pq0ll8RJw==}
+
   abort-controller@3.0.0:
     resolution: {integrity: sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==}
     engines: {node: '>=6.5'}
@@ -1500,6 +1537,9 @@ packages:
   class-variance-authority@0.7.1:
     resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
 
+  classcat@5.0.5:
+    resolution: {integrity: sha512-JhZUT7JFcQy/EzW605k/ktHtncoo9vnyW/2GspNYwFlN1C/WmjuV/xtS04e9SOkL2sTdw0VAZ2UGCcQ9lR6p6w==}
+
   clsx@2.1.1:
     resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
     engines: {node: '>=6'}
@@ -1529,6 +1569,44 @@ packages:
   csstype@3.2.3:
     resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
 
+  d3-color@3.1.0:
+    resolution: {integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==}
+    engines: {node: '>=12'}
+
+  d3-dispatch@3.0.1:
+    resolution: {integrity: sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==}
+    engines: {node: '>=12'}
+
+  d3-drag@3.0.0:
+    resolution: {integrity: sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==}
+    engines: {node: '>=12'}
+
+  d3-ease@3.0.1:
+    resolution: {integrity: sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==}
+    engines: {node: '>=12'}
+
+  d3-interpolate@3.0.1:
+    resolution: {integrity: sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==}
+    engines: {node: '>=12'}
+
+  d3-selection@3.0.0:
+    resolution: {integrity: sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==}
+    engines: {node: '>=12'}
+
+  d3-timer@3.0.1:
+    resolution: {integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==}
+    engines: {node: '>=12'}
+
+  d3-transition@3.0.1:
+    resolution: {integrity: sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      d3-selection: 2 - 3
+
+  d3-zoom@3.0.0:
+    resolution: {integrity: sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==}
+    engines: {node: '>=12'}
+
   data-urls@7.0.0:
     resolution: {integrity: sha512-23XHcCF+coGYevirZceTVD7NdJOqVn+49IHyxgszm+JIiHLoB2TkmPtsYkNWT1pvRSGkc35L6NHs0yHkN2SumA==}
     engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
@@ -2484,6 +2562,21 @@ packages:
   zod@4.4.3:
     resolution: {integrity: sha512-ytENFjIJFl2UwYglde2jchW2Hwm4GJFLDiSXWdTrJQBIN9Fcyp7n4DhxJEiWNAJMV1/BqWfW/kkg71UDcHJyTQ==}
 
+  zustand@4.5.7:
+    resolution: {integrity: sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw==}
+    engines: {node: '>=12.7.0'}
+    peerDependencies:
+      '@types/react': '>=16.8'
+      immer: '>=9.0.6'
+      react: '>=16.8'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      immer:
+        optional: true
+      react:
+        optional: true
+
   zustand@5.0.14:
     resolution: {integrity: sha512-/8tAspM5LMPr28b3fwLYrtdj77ECpfZviaP75CMTnwO8ISyaE4GDIG/9rDDYq/cH9D2Xw2A2RXglLInmVBQB/g==}
     engines: {node: '>=12.20.0'}
@@ -4330,6 +4423,27 @@ snapshots:
       '@types/deep-eql': 4.0.2
       assertion-error: 2.0.1
 
+  '@types/d3-color@3.1.3': {}
+
+  '@types/d3-drag@3.0.7':
+    dependencies:
+      '@types/d3-selection': 3.0.12
+
+  '@types/d3-interpolate@3.0.4':
+    dependencies:
+      '@types/d3-color': 3.1.3
+
+  '@types/d3-selection@3.0.12': {}
+
+  '@types/d3-transition@3.0.9':
+    dependencies:
+      '@types/d3-selection': 3.0.12
+
+  '@types/d3-zoom@3.0.8':
+    dependencies:
+      '@types/d3-interpolate': 3.0.4
+      '@types/d3-selection': 3.0.12
+
   '@types/deep-eql@4.0.2': {}
 
   '@types/esrecurse@4.3.1': {}
@@ -4513,6 +4627,31 @@ snapshots:
       convert-source-map: 2.0.0
       tinyrainbow: 3.1.1
 
+  '@xyflow/react@12.12.0(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+    dependencies:
+      '@xyflow/system': 0.0.83
+      classcat: 5.0.5
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+      zustand: 4.5.7(@types/react@19.2.17)(react@19.2.7)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+    transitivePeerDependencies:
+      - immer
+
+  '@xyflow/system@0.0.83':
+    dependencies:
+      '@types/d3-drag': 3.0.7
+      '@types/d3-interpolate': 3.0.4
+      '@types/d3-selection': 3.0.12
+      '@types/d3-transition': 3.0.9
+      '@types/d3-zoom': 3.0.8
+      d3-drag: 3.0.0
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-zoom: 3.0.0
+
   abort-controller@3.0.0:
     dependencies:
       event-target-shim: 5.0.1
@@ -4607,6 +4746,8 @@ snapshots:
     dependencies:
       clsx: 2.1.1
 
+  classcat@5.0.5: {}
+
   clsx@2.1.1: {}
 
   commander@11.1.0: {}
@@ -4630,6 +4771,42 @@ snapshots:
 
   csstype@3.2.3: {}
 
+  d3-color@3.1.0: {}
+
+  d3-dispatch@3.0.1: {}
+
+  d3-drag@3.0.0:
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-selection: 3.0.0
+
+  d3-ease@3.0.1: {}
+
+  d3-interpolate@3.0.1:
+    dependencies:
+      d3-color: 3.1.0
+
+  d3-selection@3.0.0: {}
+
+  d3-timer@3.0.1: {}
+
+  d3-transition@3.0.1(d3-selection@3.0.0):
+    dependencies:
+      d3-color: 3.1.0
+      d3-dispatch: 3.0.1
+      d3-ease: 3.0.1
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-timer: 3.0.1
+
+  d3-zoom@3.0.0:
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-drag: 3.0.0
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-transition: 3.0.1(d3-selection@3.0.0)
+
   data-urls@7.0.0:
     dependencies:
       whatwg-mimetype: 5.0.0
@@ -5369,7 +5546,6 @@ snapshots:
   use-sync-external-store@1.6.0(react@19.2.7):
     dependencies:
       react: 19.2.7
-    optional: true
 
   vite@8.1.3(@types/node@26.1.2)(jiti@1.21.7):
     dependencies:
@@ -5466,6 +5642,13 @@ snapshots:
 
   zod@4.4.3: {}
 
+  zustand@4.5.7(@types/react@19.2.17)(react@19.2.7):
+    dependencies:
+      use-sync-external-store: 1.6.0(react@19.2.7)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      react: 19.2.7
+
   zustand@5.0.14(@types/react@19.2.17)(react@19.2.7)(use-sync-external-store@1.6.0(react@19.2.7)):
     optionalDependencies:
       '@types/react': 19.2.17