From 5815c89134b3d9c294a0bbef4f025eab3f41b457 Mon Sep 17 00:00:00 2001
From: Ross Nelson <axcess1@me.com>
Date: Tue, 3 Mar 2026 14:32:48 -0500
Subject: [PATCH 1/7] feat: add serverless worker types and mock service

Foundation for serverless workers prototype with types, CRUD operations,
and async mock validators for Lambda ARN, IAM role, region, and task queue.
---
 src/lib/services/serverless-worker-service.ts | 182 ++++++++++++++++++
 src/lib/types/serverless-workers.ts           |  45 +++++
 2 files changed, 227 insertions(+)
 create mode 100644 src/lib/services/serverless-worker-service.ts
 create mode 100644 src/lib/types/serverless-workers.ts

diff --git a/src/lib/services/serverless-worker-service.ts b/src/lib/services/serverless-worker-service.ts
new file mode 100644
index 0000000000..ca2ddb34a8
--- /dev/null
+++ b/src/lib/services/serverless-worker-service.ts
@@ -0,0 +1,182 @@
+import type {
+  MockValidationResult,
+  ServerlessWorker,
+  ServerlessWorkerCreateInput,
+  ServerlessWorkerUpdateInput,
+} from '$lib/types/serverless-workers';
+
+const MOCK_TASK_QUEUES = [
+  'order-processing',
+  'payment-tasks',
+  'notification-queue',
+  'etl-pipeline',
+];
+
+let mockWorkers: ServerlessWorker[] = [
+  {
+    id: 'slw-a1b2c3d4-e5f6-7890-abcd-ef1234567890',
+    name: 'order-processor',
+    status: 'active',
+    lambdaArn:
+      'arn:aws:lambda:us-east-1:123456789012:function:temporal-order-processor',
+    iamRoleArn:
+      'arn:aws:iam::123456789012:role/temporal-order-processor-execution-role',
+    region: 'us-east-1',
+    taskQueue: 'order-processing',
+    maxWorkers: 10,
+    maxConcurrentActivities: 100,
+    maxTaskQueueActivitiesPerSecond: 50,
+    idleTimeoutSeconds: 300,
+    createdAt: '2024-11-01T09:00:00Z',
+    updatedAt: '2024-11-15T14:22:00Z',
+  },
+  {
+    id: 'slw-b2c3d4e5-f6a7-8901-bcde-f12345678901',
+    name: 'payment-handler',
+    status: 'active',
+    lambdaArn:
+      'arn:aws:lambda:us-west-2:123456789012:function:temporal-payment-handler',
+    iamRoleArn:
+      'arn:aws:iam::123456789012:role/temporal-payment-handler-execution-role',
+    region: 'us-west-2',
+    taskQueue: 'payment-tasks',
+    maxWorkers: 5,
+    maxConcurrentActivities: 50,
+    maxTaskQueueActivitiesPerSecond: 25,
+    idleTimeoutSeconds: 120,
+    createdAt: '2024-10-15T11:30:00Z',
+    updatedAt: '2024-11-20T08:45:00Z',
+  },
+  {
+    id: 'slw-c3d4e5f6-a7b8-9012-cdef-123456789012',
+    name: 'notification-sender',
+    status: 'degraded',
+    lambdaArn:
+      'arn:aws:lambda:eu-west-1:123456789012:function:temporal-notification-sender',
+    iamRoleArn:
+      'arn:aws:iam::123456789012:role/temporal-notification-sender-execution-role',
+    region: 'eu-west-1',
+    taskQueue: 'notification-queue',
+    maxWorkers: 20,
+    maxConcurrentActivities: 200,
+    maxTaskQueueActivitiesPerSecond: 100,
+    idleTimeoutSeconds: 600,
+    createdAt: '2024-09-20T16:00:00Z',
+    updatedAt: '2024-11-22T03:12:00Z',
+  },
+  {
+    id: 'slw-d4e5f6a7-b8c9-0123-defa-234567890123',
+    name: 'data-pipeline',
+    status: 'provisioning',
+    lambdaArn:
+      'arn:aws:lambda:ap-southeast-1:123456789012:function:temporal-data-pipeline',
+    iamRoleArn:
+      'arn:aws:iam::123456789012:role/temporal-data-pipeline-execution-role',
+    region: 'ap-southeast-1',
+    taskQueue: 'etl-pipeline',
+    maxWorkers: 8,
+    maxConcurrentActivities: 80,
+    maxTaskQueueActivitiesPerSecond: 40,
+    idleTimeoutSeconds: 900,
+    createdAt: '2024-11-25T10:00:00Z',
+    updatedAt: '2024-11-25T10:00:00Z',
+  },
+];
+
+const MOCK_LAMBDA_ARNS = mockWorkers.map((w) => w.lambdaArn);
+const MOCK_IAM_ROLE_ARNS = mockWorkers.map((w) => w.iamRoleArn);
+
+export function getServerlessWorkers(): ServerlessWorker[] {
+  return mockWorkers;
+}
+
+export function getServerlessWorker(id: string): ServerlessWorker | undefined {
+  return mockWorkers.find((w) => w.id === id);
+}
+
+export function createServerlessWorker(
+  input: ServerlessWorkerCreateInput,
+): ServerlessWorker {
+  const now = new Date().toISOString();
+  const worker: ServerlessWorker = {
+    ...input,
+    id: crypto.randomUUID(),
+    status: 'provisioning',
+    createdAt: now,
+    updatedAt: now,
+  };
+  mockWorkers = [...mockWorkers, worker];
+  return worker;
+}
+
+export function deleteServerlessWorker(id: string): boolean {
+  const index = mockWorkers.findIndex((w) => w.id === id);
+  if (index === -1) return false;
+  mockWorkers = mockWorkers.filter((w) => w.id !== id);
+  return true;
+}
+
+export function updateServerlessWorker(
+  id: string,
+  input: ServerlessWorkerUpdateInput,
+): ServerlessWorker | undefined {
+  const index = mockWorkers.findIndex((w) => w.id === id);
+  if (index === -1) return undefined;
+  const updated = {
+    ...mockWorkers[index],
+    ...input,
+    updatedAt: new Date().toISOString(),
+  };
+  mockWorkers = mockWorkers.map((w) => (w.id === id ? updated : w));
+  return updated;
+}
+
+export async function validateLambdaArn(
+  arn: string,
+): Promise<MockValidationResult> {
+  await new Promise((resolve) => setTimeout(resolve, 500));
+  if (!arn.startsWith('arn:aws:lambda:')) {
+    return { valid: false, message: 'Invalid Lambda ARN format' };
+  }
+  if (MOCK_LAMBDA_ARNS.includes(arn)) {
+    return { valid: true, message: 'Lambda function verified' };
+  }
+  return { valid: false, message: 'Function not found' };
+}
+
+export async function validateIamRole(
+  arn: string,
+): Promise<MockValidationResult> {
+  await new Promise((resolve) => setTimeout(resolve, 500));
+  if (!arn.startsWith('arn:aws:iam::')) {
+    return { valid: false, message: 'Invalid IAM role ARN format' };
+  }
+  if (MOCK_IAM_ROLE_ARNS.includes(arn)) {
+    return { valid: true, message: 'Permissions verified' };
+  }
+  return { valid: false, message: 'Missing permissions' };
+}
+
+export async function validateRegion(
+  region: string,
+  namespaceRegion: string = 'us-west-2',
+): Promise<MockValidationResult> {
+  await new Promise((resolve) => setTimeout(resolve, 500));
+  if (region === namespaceRegion) {
+    return { valid: true, message: 'Region matches namespace region' };
+  }
+  return {
+    valid: true,
+    message: `Cross-region latency warning: worker in ${region}, namespace in ${namespaceRegion}`,
+  };
+}
+
+export async function validateTaskQueue(
+  name: string,
+): Promise<MockValidationResult> {
+  await new Promise((resolve) => setTimeout(resolve, 500));
+  if (MOCK_TASK_QUEUES.includes(name)) {
+    return { valid: true, message: 'Task queue found' };
+  }
+  return { valid: false, message: 'Task queue not found' };
+}
diff --git a/src/lib/types/serverless-workers.ts b/src/lib/types/serverless-workers.ts
new file mode 100644
index 0000000000..ae538dfc3f
--- /dev/null
+++ b/src/lib/types/serverless-workers.ts
@@ -0,0 +1,45 @@
+import type { WorkerInfo } from '$lib/types';
+
+export type ServerlessWorkerStatus =
+  | 'active'
+  | 'degraded'
+  | 'inactive'
+  | 'provisioning';
+
+export type ServerlessWorker = {
+  id: string;
+  name: string;
+  status: ServerlessWorkerStatus;
+  lambdaArn: string;
+  iamRoleArn: string;
+  region: string;
+  taskQueue: string;
+  maxWorkers: number;
+  maxConcurrentActivities: number;
+  maxTaskQueueActivitiesPerSecond: number;
+  idleTimeoutSeconds: number;
+  createdAt: string;
+  updatedAt: string;
+};
+
+export type ServerlessWorkerCreateInput = Omit<
+  ServerlessWorker,
+  'id' | 'status' | 'createdAt' | 'updatedAt'
+>;
+
+export type ServerlessWorkerUpdateInput = Pick<
+  ServerlessWorker,
+  | 'maxWorkers'
+  | 'maxConcurrentActivities'
+  | 'maxTaskQueueActivitiesPerSecond'
+  | 'idleTimeoutSeconds'
+>;
+
+export type MockValidationResult = {
+  valid: boolean;
+  message: string;
+};
+
+export type UnifiedWorkerRow =
+  | { type: 'traditional'; data: WorkerInfo }
+  | { type: 'serverless'; data: ServerlessWorker };

From e63b48543ce60edda6f595900a0a10b4eb6c20ac Mon Sep 17 00:00:00 2001
From: Ross Nelson <axcess1@me.com>
Date: Tue, 3 Mar 2026 14:33:01 -0500
Subject: [PATCH 2/7] feat: add i18n keys and route helpers for serverless
 workers

Adds 60+ translation keys for serverless worker management UI and route
helpers for configuration, detail, and edit pages.
---
 src/lib/i18n/locales/en/workers.ts | 69 ++++++++++++++++++++++++++++++
 src/lib/utilities/route-for.ts     | 34 +++++++++++++++
 2 files changed, 103 insertions(+)

diff --git a/src/lib/i18n/locales/en/workers.ts b/src/lib/i18n/locales/en/workers.ts
index 87ef81221b..b4a035a468 100644
--- a/src/lib/i18n/locales/en/workers.ts
+++ b/src/lib/i18n/locales/en/workers.ts
@@ -41,4 +41,73 @@ export const Strings = {
     'Viewing workers for pinned Build ID. Go to the Task Queue page to view all workers.',
   'viewing-auto-upgrade-build-ids':
     'Viewing workers for current and ramping Build IDs. Go to the Task Queue page to view all workers.',
+  configuration: 'Configuration',
+  type: 'Type',
+  'type-traditional': 'Traditional',
+  'type-serverless': 'Serverless',
+  'serverless-workers': 'Serverless Workers',
+  'serverless-workers-description':
+    'Manage serverless worker configurations for this namespace.',
+  'serverless-worker': 'Serverless Worker',
+  'config-serverless': 'Serverless Workers',
+  'config-general': 'General',
+  'config-policies': 'Policies',
+  'config-alerts': 'Alerts',
+  'serverless-empty-state': 'No Serverless Workers Configured',
+  'serverless-empty-state-description':
+    'Create a serverless worker to get started.',
+  'create-serverless-worker': 'Create Serverless Worker',
+  'back-to-configuration': 'Back to Configuration',
+  'serverless-detail-title': 'Serverless Worker Details',
+  'lambda-arn': 'Lambda ARN',
+  'iam-role-arn': 'IAM Role ARN',
+  region: 'Region',
+  'max-workers': 'Max Workers',
+  'max-concurrent-activities': 'Max Concurrent Activities',
+  'max-task-queue-rate': 'Max Task Queue Rate',
+  'idle-timeout': 'Idle Timeout',
+  'created-at': 'Created',
+  'updated-at': 'Last Updated',
+  'edit-serverless-worker': 'Edit',
+  'edit-serverless-worker-title': 'Edit Serverless Worker',
+  'connection-details': 'Connection Details',
+  'save-changes': 'Save Changes',
+  'delete-serverless-worker': 'Delete Serverless Worker',
+  'delete-confirm': 'Are you sure you want to delete this serverless worker?',
+  'create-serverless-title': 'Create Serverless Worker',
+  'name-label': 'Name',
+  'name-hint': 'A unique name for this serverless worker configuration.',
+  'name-placeholder': 'my-serverless-worker',
+  'lambda-arn-label': 'Lambda ARN',
+  'lambda-arn-hint': 'The ARN of the AWS Lambda function to invoke.',
+  'lambda-arn-placeholder':
+    'arn:aws:lambda:us-east-1:123456789:function:my-function',
+  'iam-role-label': 'IAM Role ARN',
+  'iam-role-hint': 'The ARN of the IAM role for Temporal to assume.',
+  'iam-role-placeholder':
+    'arn:aws:iam::123456789:role/temporal-serverless-role',
+  'region-label': 'Region',
+  'region-hint': 'The AWS region where the Lambda function is deployed.',
+  'task-queue-label': 'Task Queue',
+  'task-queue-hint':
+    'The Temporal task queue this serverless worker will poll.',
+  'task-queue-placeholder': 'my-task-queue',
+  'advanced-config': 'Advanced Configuration',
+  'max-workers-label': 'Max Workers',
+  'max-workers-hint': 'Maximum number of concurrent worker instances.',
+  'max-concurrent-label': 'Max Concurrent Activities',
+  'max-concurrent-hint': 'Maximum concurrent activities per worker.',
+  'max-rate-label': 'Max Task Queue Activities Per Second',
+  'max-rate-hint': 'Rate limit for task queue polling.',
+  'idle-timeout-label': 'Idle Timeout (seconds)',
+  'idle-timeout-hint': 'Time before an idle worker is terminated.',
+  'validation-checking': 'Checking...',
+  'validation-function-found': 'Lambda function found',
+  'validation-function-not-found': 'Lambda function not found',
+  'validation-permissions-verified': 'Permissions verified',
+  'validation-permissions-missing': 'Missing required permissions',
+  'validation-region-match': 'Region matches namespace',
+  'validation-region-mismatch': 'Cross-region: may increase latency',
+  'validation-queue-available': 'Task queue name available',
+  'validation-queue-exists': 'Task queue already in use',
 } as const;
diff --git a/src/lib/utilities/route-for.ts b/src/lib/utilities/route-for.ts
index 7d8d49e94b..58f6e7cca7 100644
--- a/src/lib/utilities/route-for.ts
+++ b/src/lib/utilities/route-for.ts
@@ -369,6 +369,40 @@ export const routeForWorkerDeploymentVersion = ({
   );
 };
 
+export const routeForWorkerConfiguration = ({
+  namespace,
+}: {
+  namespace: string;
+}): ResolvedPathname => {
+  return resolve('/namespaces/[namespace]/worker-configuration', { namespace });
+};
+
+export const routeForServerlessWorker = ({
+  namespace,
+  id,
+}: {
+  namespace: string;
+  id: string;
+}): ResolvedPathname => {
+  return resolve('/namespaces/[namespace]/serverless-workers/[id]', {
+    namespace,
+    id,
+  });
+};
+
+export function routeForServerlessWorkerEdit({
+  namespace,
+  id,
+}: {
+  namespace: string;
+  id: string;
+}): string {
+  return resolve('/namespaces/[namespace]/serverless-workers/[id]/edit', {
+    namespace,
+    id,
+  });
+}
+
 export const routeForRelationships = (
   parameters: WorkflowParameters,
 ): ResolvedPathname => {

From c440ae083715feddcca37a996de8634c60b5b2ed Mon Sep 17 00:00:00 2001
From: Ross Nelson <axcess1@me.com>
Date: Tue, 3 Mar 2026 14:33:14 -0500
Subject: [PATCH 3/7] feat: add Configuration tab and update nav for serverless
 workers

Adds Configuration as third tab alongside Workers and Deployments.
Updates sidebar nav isActive to include worker-configuration and
serverless-workers routes.
---
 src/routes/(app)/+layout.svelte                     | 13 ++++++++++++-
 .../[namespace]/worker-deployments/+page.svelte     | 10 ++++++++++
 .../namespaces/[namespace]/workers/+page.svelte     | 10 ++++++++++
 3 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index 347647ab5f..6dfbaecf8b 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -34,6 +34,7 @@
     routeForNexus,
     routeForSchedules,
     routeForStandaloneActivities,
+    routeForWorkerConfiguration,
     routeForWorkerDeployments,
     routeForWorkers,
     routeForWorkflows,
@@ -80,6 +81,7 @@
       schedulesRoute: routeForSchedules({ namespace }),
       batchOperationsRoute: routeForBatchOperations({ namespace }),
       workersRoute: routeForWorkers({ namespace }),
+      workerConfigurationRoute: routeForWorkerConfiguration({ namespace }),
       workerDeploymentsRoute: routeForWorkerDeployments({ namespace }),
       archivalRoute: routeForArchivalWorkflows({ namespace }),
       namespacesRoute: routeForNamespaces(),
@@ -95,6 +97,7 @@
       schedulesRoute,
       batchOperationsRoute,
       workersRoute,
+      workerConfigurationRoute,
       workerDeploymentsRoute,
       archivalRoute,
       namespacesRoute,
@@ -106,6 +109,7 @@
       schedulesRoute: string;
       batchOperationsRoute: string;
       workersRoute: string;
+      workerConfigurationRoute: string;
       workerDeploymentsRoute: string;
       archivalRoute: string;
       namespacesRoute: string;
@@ -126,6 +130,8 @@
           !path.includes(batchOperationsRoute) &&
           !path.includes(workersRoute) &&
           !path.includes(workerDeploymentsRoute) &&
+          !path.includes(workerConfigurationRoute) &&
+          !path.includes('/serverless-workers') &&
           !path.includes(standaloneActivitiesRoute) &&
           !path.includes(archivalRoute),
       },
@@ -162,7 +168,10 @@
         label: translate('deployments.deployments'),
         tooltip: translate('deployments.worker-deployments'),
         isActive: (path) =>
-          path.includes(workersRoute) || path.includes(workerDeploymentsRoute),
+          path.includes(workersRoute) ||
+          path.includes(workerDeploymentsRoute) ||
+          path.includes(workerConfigurationRoute) ||
+          path.includes('/serverless-workers'),
       },
       {
         href: nexusRoute,
@@ -205,6 +214,7 @@
     schedulesRoute,
     batchOperationsRoute,
     workersRoute,
+    workerConfigurationRoute,
     workerDeploymentsRoute,
     archivalRoute,
     standaloneActivitiesRoute,
@@ -215,6 +225,7 @@
       schedulesRoute,
       workersRoute,
       workerDeploymentsRoute,
+      workerConfigurationRoute,
       batchOperationsRoute,
       archivalRoute,
       standaloneActivitiesRoute,
diff --git a/src/routes/(app)/namespaces/[namespace]/worker-deployments/+page.svelte b/src/routes/(app)/namespaces/[namespace]/worker-deployments/+page.svelte
index 266a412b77..394566634e 100644
--- a/src/routes/(app)/namespaces/[namespace]/worker-deployments/+page.svelte
+++ b/src/routes/(app)/namespaces/[namespace]/worker-deployments/+page.svelte
@@ -8,6 +8,7 @@
   import { translate } from '$lib/i18n/translate';
   import WorkerDeployments from '$lib/pages/deployments.svelte';
   import {
+    routeForWorkerConfiguration,
     routeForWorkerDeployments,
     routeForWorkers,
   } from '$lib/utilities/route-for';
@@ -16,6 +17,9 @@
 
   const workersHref = $derived(routeForWorkers({ namespace }));
   const deploymentsHref = $derived(routeForWorkerDeployments({ namespace }));
+  const configurationHref = $derived(
+    routeForWorkerConfiguration({ namespace }),
+  );
 </script>
 
 <PageTitle
@@ -42,6 +46,12 @@
         href={deploymentsHref}
         active={true}
       />
+      <Tab
+        label={translate('workers.configuration')}
+        id="configuration-tab"
+        href={configurationHref}
+        active={false}
+      />
     </TabList>
   </Tabs>
 </header>
diff --git a/src/routes/(app)/namespaces/[namespace]/workers/+page.svelte b/src/routes/(app)/namespaces/[namespace]/workers/+page.svelte
index 6d43a1e512..5b02aff7ac 100644
--- a/src/routes/(app)/namespaces/[namespace]/workers/+page.svelte
+++ b/src/routes/(app)/namespaces/[namespace]/workers/+page.svelte
@@ -8,6 +8,7 @@
   import Tabs from '$lib/holocene/tab/tabs.svelte';
   import { translate } from '$lib/i18n/translate';
   import {
+    routeForWorkerConfiguration,
     routeForWorkerDeployments,
     routeForWorkers,
   } from '$lib/utilities/route-for';
@@ -16,6 +17,9 @@
 
   const workersHref = $derived(routeForWorkers({ namespace }));
   const deploymentsHref = $derived(routeForWorkerDeployments({ namespace }));
+  const configurationHref = $derived(
+    routeForWorkerConfiguration({ namespace }),
+  );
 </script>
 
 <PageTitle title={translate('workers.workers')} url={page.url.href} />
@@ -39,6 +43,12 @@
         href={deploymentsHref}
         active={false}
       />
+      <Tab
+        label={translate('workers.configuration')}
+        id="configuration-tab"
+        href={configurationHref}
+        active={false}
+      />
     </TabList>
   </Tabs>
 </header>

From 49825fec4e1dfa624a82fbcc1e8b96e8975ff189 Mon Sep 17 00:00:00 2001
From: Ross Nelson <axcess1@me.com>
Date: Tue, 3 Mar 2026 14:33:26 -0500
Subject: [PATCH 4/7] feat: unified workers table with serverless rows and
 context menus

Shows traditional and serverless workers in one table with Type column.
Reorders columns to Instance, Task Queue, Status, Type. Adds three-dots
context menu to serverless rows with View, Edit, and Delete actions.
---
 .../task-queue/worker-table-row.svelte        |  5 ++
 .../serverless-worker-table-row.svelte        | 87 +++++++++++++++++++
 .../workers/worker-search-table.svelte        | 25 +++++-
 3 files changed, 114 insertions(+), 3 deletions(-)
 create mode 100644 src/lib/components/workers/serverless-worker-table-row.svelte

diff --git a/src/lib/components/task-queue/worker-table-row.svelte b/src/lib/components/task-queue/worker-table-row.svelte
index 686515c64d..6a9b79bcdc 100644
--- a/src/lib/components/task-queue/worker-table-row.svelte
+++ b/src/lib/components/task-queue/worker-table-row.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Badge from '$lib/holocene/badge.svelte';
   import { translate } from '$lib/i18n/translate';
   import type { WorkerInfo } from '$lib/types';
   import { routeForWorkerInstance } from '$lib/utilities/route-for';
@@ -84,6 +85,10 @@
         >{worker.workerHeartbeat?.nexusTaskSlotsInfo?.currentUsedSlots ?? 0} / {worker
           .workerHeartbeat?.nexusTaskSlotsInfo?.currentAvailableSlots ?? 0}</td
       >
+    {:else if label === translate('workers.type')}
+      <td><Badge>{translate('workers.type-traditional')}</Badge></td>
+    {:else}
+      <td></td>
     {/if}
   {/each}
 </tr>
diff --git a/src/lib/components/workers/serverless-worker-table-row.svelte b/src/lib/components/workers/serverless-worker-table-row.svelte
new file mode 100644
index 0000000000..90941c7535
--- /dev/null
+++ b/src/lib/components/workers/serverless-worker-table-row.svelte
@@ -0,0 +1,87 @@
+<script lang="ts">
+  import Badge from '$lib/holocene/badge.svelte';
+  import Icon from '$lib/holocene/icon/icon.svelte';
+  import {
+    Menu,
+    MenuButton,
+    MenuContainer,
+    MenuItem,
+  } from '$lib/holocene/menu';
+  import { translate } from '$lib/i18n/translate';
+  import type { ServerlessWorker } from '$lib/types/serverless-workers';
+  import {
+    routeForServerlessWorker,
+    routeForServerlessWorkerEdit,
+  } from '$lib/utilities/route-for';
+
+  type Props = {
+    worker: ServerlessWorker;
+    namespace: string;
+    columns: { label: string }[];
+  };
+
+  let { worker, namespace, columns }: Props = $props();
+
+  const detailHref = $derived(
+    routeForServerlessWorker({ namespace, id: worker.id }),
+  );
+  const editHref = $derived(
+    routeForServerlessWorkerEdit({ namespace, id: worker.id }),
+  );
+  const menuId = $derived(`serverless-worker-menu-${worker.id}`);
+</script>
+
+<tr>
+  {#each columns as { label } (label)}
+    {#if label === translate('workers.type')}
+      <td
+        ><Badge type="primary">{translate('workers.type-serverless')}</Badge
+        ></td
+      >
+    {:else if label === translate('workers.status')}
+      <td
+        ><Badge type={worker.status === 'active' ? 'success' : 'warning'}
+          >{worker.status}</Badge
+        ></td
+      >
+    {:else if label === translate('workers.instance')}
+      <td>
+        <a href={detailHref} class="text-blue-700 hover:underline">
+          {worker.name}
+        </a>
+      </td>
+    {:else if label === translate('workers.task-queue')}
+      <td>{worker.taskQueue}</td>
+    {:else if label === translate('workers.identity')}
+      <td class="font-mono text-xs">{worker.lambdaArn.split(':').pop()}</td>
+    {:else if label === translate('workers.host-name')}
+      <td>{worker.region}</td>
+    {:else if label === ''}
+      <td class="w-10 text-right">
+        <MenuContainer>
+          <MenuButton
+            controls={menuId}
+            hasIndicator={false}
+            variant="ghost"
+            size="xs"
+          >
+            <Icon name="vertical-ellipsis" />
+          </MenuButton>
+          <Menu id={menuId} position="right">
+            <MenuItem href={detailHref}>
+              {translate('common.view')}
+            </MenuItem>
+            <MenuItem href={editHref}>
+              {translate('workers.edit-serverless-worker')}
+            </MenuItem>
+            <MenuItem destructive>
+              {translate('common.delete')}
+            </MenuItem>
+          </Menu>
+        </MenuContainer>
+      </td>
+    {:else}
+      <td class="text-secondary">—</td>
+    {/if}
+  {/each}
+</tr>
diff --git a/src/lib/components/workers/worker-search-table.svelte b/src/lib/components/workers/worker-search-table.svelte
index c0edded95f..43eaf7118b 100644
--- a/src/lib/components/workers/worker-search-table.svelte
+++ b/src/lib/components/workers/worker-search-table.svelte
@@ -5,25 +5,39 @@
   import EmptyState from '$lib/holocene/empty-state.svelte';
   import PaginatedTable from '$lib/holocene/table/paginated-table/api-paginated.svelte';
   import { translate } from '$lib/i18n/translate';
+  import { getServerlessWorkers } from '$lib/services/serverless-worker-service';
   import { fetchPaginatedWorkers } from '$lib/services/worker-service';
 
+  import ServerlessWorkerTableRow from './serverless-worker-table-row.svelte';
+
   let { namespace } = $props();
 
   const query = $derived(page.url.searchParams.get('query') || '');
+  const serverlessWorkers = getServerlessWorkers();
 
   const columns = [
-    { label: translate('workers.status') },
     { label: translate('workers.instance') },
     { label: translate('workers.task-queue') },
+    { label: translate('workers.status') },
+    { label: translate('workers.type') },
     { label: translate('workers.identity') },
     { label: translate('workers.host-name') },
     { label: translate('workers.workflow-task-slots') },
     { label: translate('workers.activity-task-slots') },
     { label: translate('workers.nexus-task-slots') },
     { label: translate('workers.sdk') },
+    { label: '' },
   ];
 
-  const onFetch = $derived(() => fetchPaginatedWorkers({ namespace, query }));
+  const onFetch = $derived(() =>
+    fetchPaginatedWorkers({ namespace, query }).then((fetcher) => {
+      return (pageSize: number, token: string) =>
+        fetcher(pageSize, token).catch(() => ({
+          items: [],
+          nextPageToken: '',
+        }));
+    }),
+  );
 </script>
 
 {#key query}
@@ -49,9 +63,14 @@
     {#each visibleItems as worker, i (i)}
       <WorkerTableRow {worker} {columns} {namespace} filterable />
     {/each}
+    {#each serverlessWorkers as sw (sw.id)}
+      <ServerlessWorkerTableRow worker={sw} {columns} {namespace} />
+    {/each}
 
     <svelte:fragment slot="empty">
-      <EmptyState title={translate('workers.empty-state-title')}></EmptyState>
+      {#if serverlessWorkers.length === 0}
+        <EmptyState title={translate('workers.empty-state-title')}></EmptyState>
+      {/if}
     </svelte:fragment>
   </PaginatedTable>
 {/key}

From f651b125f34df3998edba83deffceb1d1dc57d4f Mon Sep 17 00:00:00 2001
From: Ross Nelson <axcess1@me.com>
Date: Tue, 3 Mar 2026 14:33:44 -0500
Subject: [PATCH 5/7] feat: add worker configuration pages with VerticalNav
 layout

Configuration tab uses side-nav with Serverless Workers active and
placeholder items. Includes serverless workers list with context menus
and create form with superforms validation.
---
 .../worker-configuration/+layout.svelte       | 106 +++++++++++++++++
 .../[namespace]/worker-configuration/+page.ts |   7 ++
 .../serverless/+page.svelte                   | 109 ++++++++++++++++++
 .../serverless/create/+page.svelte            |  31 +++++
 4 files changed, 253 insertions(+)
 create mode 100644 src/routes/(app)/namespaces/[namespace]/worker-configuration/+layout.svelte
 create mode 100644 src/routes/(app)/namespaces/[namespace]/worker-configuration/+page.ts
 create mode 100644 src/routes/(app)/namespaces/[namespace]/worker-configuration/serverless/+page.svelte
 create mode 100644 src/routes/(app)/namespaces/[namespace]/worker-configuration/serverless/create/+page.svelte

diff --git a/src/routes/(app)/namespaces/[namespace]/worker-configuration/+layout.svelte b/src/routes/(app)/namespaces/[namespace]/worker-configuration/+layout.svelte
new file mode 100644
index 0000000000..ffcf456d52
--- /dev/null
+++ b/src/routes/(app)/namespaces/[namespace]/worker-configuration/+layout.svelte
@@ -0,0 +1,106 @@
+<script lang="ts">
+  import { page } from '$app/state';
+
+  import type { LayoutProps } from './$types';
+
+  import PageTitle from '$lib/components/page-title.svelte';
+  import TabList from '$lib/holocene/tab/tab-list.svelte';
+  import Tab from '$lib/holocene/tab/tab.svelte';
+  import Tabs from '$lib/holocene/tab/tabs.svelte';
+  import VerticalNavItem from '$lib/holocene/vertical-nav/vertical-nav-item.svelte';
+  import VerticalNav from '$lib/holocene/vertical-nav/vertical-nav.svelte';
+  import { translate } from '$lib/i18n/translate';
+  import { pathMatches } from '$lib/utilities/path-matches';
+  import {
+    routeForWorkerConfiguration,
+    routeForWorkerDeployments,
+    routeForWorkers,
+  } from '$lib/utilities/route-for';
+
+  let { children }: LayoutProps = $props();
+
+  const { namespace } = $derived(page.params);
+
+  const workersHref = $derived(routeForWorkers({ namespace }));
+  const deploymentsHref = $derived(routeForWorkerDeployments({ namespace }));
+  const configurationHref = $derived(
+    routeForWorkerConfiguration({ namespace }),
+  );
+  const serverlessHref = $derived(`${configurationHref}/serverless`);
+
+  const activeNavItem = $derived.by(() => {
+    if (pathMatches(serverlessHref, page.url.pathname)) return 'serverless';
+    return 'serverless';
+  });
+</script>
+
+<PageTitle title={translate('workers.configuration')} url={page.url.href} />
+<header class="flex flex-col gap-2">
+  <div class="flex flex-wrap items-center gap-2">
+    <h1 class="leading-7" data-cy="configuration-title">
+      {translate('workers.configuration')}
+    </h1>
+  </div>
+  <Tabs>
+    <TabList label={translate('workers.worker-views')}>
+      <Tab
+        label={translate('workers.workers')}
+        id="workers-tab"
+        href={workersHref}
+        active={false}
+      />
+      <Tab
+        label={translate('deployments.deployments')}
+        id="deployments-tab"
+        href={deploymentsHref}
+        active={false}
+      />
+      <Tab
+        label={translate('workers.configuration')}
+        id="configuration-tab"
+        href={configurationHref}
+        active={true}
+      />
+    </TabList>
+  </Tabs>
+</header>
+
+<div class="mt-4 flex min-h-full">
+  <div class="w-64 border-r border-subtle pr-4">
+    <VerticalNav
+      aria-label={translate('workers.configuration')}
+      activeItemId={activeNavItem}
+    >
+      <VerticalNavItem
+        id="serverless"
+        href={serverlessHref}
+        label={translate('workers.config-serverless')}
+        leadingIcon="lightning-bolt"
+      />
+      <VerticalNavItem
+        id="general"
+        href="#"
+        label={translate('workers.config-general')}
+        leadingIcon="settings"
+        disabled
+      />
+      <VerticalNavItem
+        id="policies"
+        href="#"
+        label={translate('workers.config-policies')}
+        leadingIcon="lock"
+        disabled
+      />
+      <VerticalNavItem
+        id="alerts"
+        href="#"
+        label={translate('workers.config-alerts')}
+        leadingIcon="warning"
+        disabled
+      />
+    </VerticalNav>
+  </div>
+  <div class="flex-1 pl-6">
+    {@render children()}
+  </div>
+</div>
diff --git a/src/routes/(app)/namespaces/[namespace]/worker-configuration/+page.ts b/src/routes/(app)/namespaces/[namespace]/worker-configuration/+page.ts
new file mode 100644
index 0000000000..b7d31a8e37
--- /dev/null
+++ b/src/routes/(app)/namespaces/[namespace]/worker-configuration/+page.ts
@@ -0,0 +1,7 @@
+import { redirect } from '@sveltejs/kit';
+
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async function ({ url }) {
+  redirect(302, `${url.pathname}/serverless`);
+};
diff --git a/src/routes/(app)/namespaces/[namespace]/worker-configuration/serverless/+page.svelte b/src/routes/(app)/namespaces/[namespace]/worker-configuration/serverless/+page.svelte
new file mode 100644
index 0000000000..1dd45bbd7c
--- /dev/null
+++ b/src/routes/(app)/namespaces/[namespace]/worker-configuration/serverless/+page.svelte
@@ -0,0 +1,109 @@
+<script lang="ts">
+  import { page } from '$app/state';
+
+  import Badge from '$lib/holocene/badge.svelte';
+  import Button from '$lib/holocene/button.svelte';
+  import EmptyState from '$lib/holocene/empty-state.svelte';
+  import Icon from '$lib/holocene/icon/icon.svelte';
+  import {
+    Menu,
+    MenuButton,
+    MenuContainer,
+    MenuItem,
+  } from '$lib/holocene/menu';
+  import { translate } from '$lib/i18n/translate';
+  import { getServerlessWorkers } from '$lib/services/serverless-worker-service';
+  import {
+    routeForServerlessWorker,
+    routeForServerlessWorkerEdit,
+  } from '$lib/utilities/route-for';
+
+  const { namespace } = $derived(page.params);
+  const workers = $derived(getServerlessWorkers());
+  const createHref = $derived(`${page.url.pathname}/create`);
+</script>
+
+<div class="mb-4 flex items-center justify-between">
+  <div>
+    <h2 class="text-lg font-semibold">
+      {translate('workers.serverless-workers')}
+    </h2>
+    <p class="text-sm text-secondary">
+      {translate('workers.serverless-workers-description')}
+    </p>
+  </div>
+  <Button href={createHref}>
+    {translate('workers.create-serverless-worker')}
+  </Button>
+</div>
+
+{#if workers.length === 0}
+  <EmptyState title={translate('workers.serverless-empty-state')}>
+    <p>{translate('workers.serverless-empty-state-description')}</p>
+  </EmptyState>
+{:else}
+  <table class="w-full">
+    <thead>
+      <tr class="border-b border-subtle text-left">
+        <th class="pb-2">{translate('workers.name-label')}</th>
+        <th class="pb-2">{translate('workers.status')}</th>
+        <th class="pb-2">{translate('workers.task-queue')}</th>
+        <th class="pb-2">{translate('workers.region')}</th>
+        <th class="pb-2">{translate('workers.lambda-arn')}</th>
+        <th class="w-10 pb-2"></th>
+      </tr>
+    </thead>
+    <tbody>
+      {#each workers as worker (worker.id)}
+        <tr class="border-b border-subtle hover:bg-interactive-secondary-hover">
+          <td class="py-2">
+            <a
+              href={routeForServerlessWorker({ namespace, id: worker.id })}
+              class="text-blue-700 hover:underline"
+            >
+              {worker.name}
+            </a>
+          </td>
+          <td class="py-2">
+            <Badge type={worker.status === 'active' ? 'success' : 'warning'}>
+              {worker.status}
+            </Badge>
+          </td>
+          <td class="py-2">{worker.taskQueue}</td>
+          <td class="py-2">{worker.region}</td>
+          <td class="py-2 font-mono text-xs">{worker.lambdaArn}</td>
+          <td class="py-2 text-right">
+            <MenuContainer>
+              <MenuButton
+                controls={`serverless-config-menu-${worker.id}`}
+                hasIndicator={false}
+                variant="ghost"
+                size="xs"
+              >
+                <Icon name="vertical-ellipsis" />
+              </MenuButton>
+              <Menu id={`serverless-config-menu-${worker.id}`} position="right">
+                <MenuItem
+                  href={routeForServerlessWorker({ namespace, id: worker.id })}
+                >
+                  {translate('common.view')}
+                </MenuItem>
+                <MenuItem
+                  href={routeForServerlessWorkerEdit({
+                    namespace,
+                    id: worker.id,
+                  })}
+                >
+                  {translate('workers.edit-serverless-worker')}
+                </MenuItem>
+                <MenuItem destructive>
+                  {translate('common.delete')}
+                </MenuItem>
+              </Menu>
+            </MenuContainer>
+          </td>
+        </tr>
+      {/each}
+    </tbody>
+  </table>
+{/if}
diff --git a/src/routes/(app)/namespaces/[namespace]/worker-configuration/serverless/create/+page.svelte b/src/routes/(app)/namespaces/[namespace]/worker-configuration/serverless/create/+page.svelte
new file mode 100644
index 0000000000..632afd9654
--- /dev/null
+++ b/src/routes/(app)/namespaces/[namespace]/worker-configuration/serverless/create/+page.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  import { page } from '$app/state';
+
+  import PageTitle from '$lib/components/page-title.svelte';
+  import Link from '$lib/holocene/link.svelte';
+  import { translate } from '$lib/i18n/translate';
+  import ServerlessWorkerCreate from '$lib/pages/serverless-worker-create.svelte';
+  import { routeForWorkerConfiguration } from '$lib/utilities/route-for';
+
+  const namespace = $derived(page.params.namespace);
+  const backHref = $derived(
+    `${routeForWorkerConfiguration({ namespace })}/serverless`,
+  );
+</script>
+
+<PageTitle
+  title={translate('workers.create-serverless-title')}
+  url={page.url.href}
+/>
+
+<header class="mb-4 flex flex-col gap-2">
+  <Link href={backHref} icon="chevron-left">
+    {translate('workers.back-to-configuration')}
+  </Link>
+  <h1 class="text-xl font-semibold">
+    {translate('workers.create-serverless-title')}
+  </h1>
+</header>
+
+<ServerlessWorkerCreate {namespace} onSuccess={() => goto(backHref)} />

From e20d669a7b5ae0bec411d1dc07e9f6be0086d03a Mon Sep 17 00:00:00 2001
From: Ross Nelson <axcess1@me.com>
Date: Tue, 3 Mar 2026 14:34:02 -0500
Subject: [PATCH 6/7] feat: add serverless worker detail, edit, and create
 pages

Detail page shows config and advanced settings with Edit/Delete actions.
Edit page shows read-only connection details with editable advanced config.
Create form uses superforms with zod validation and async mock checks.
---
 src/lib/pages/serverless-worker-create.svelte | 321 ++++++++++++++++++
 src/lib/pages/serverless-worker-detail.svelte | 176 ++++++++++
 src/lib/pages/serverless-worker-edit.svelte   | 179 ++++++++++
 .../serverless-workers/[id]/+page.svelte      |  29 ++
 .../serverless-workers/[id]/edit/+page.svelte |  29 ++
 5 files changed, 734 insertions(+)
 create mode 100644 src/lib/pages/serverless-worker-create.svelte
 create mode 100644 src/lib/pages/serverless-worker-detail.svelte
 create mode 100644 src/lib/pages/serverless-worker-edit.svelte
 create mode 100644 src/routes/(app)/namespaces/[namespace]/serverless-workers/[id]/+page.svelte
 create mode 100644 src/routes/(app)/namespaces/[namespace]/serverless-workers/[id]/edit/+page.svelte

diff --git a/src/lib/pages/serverless-worker-create.svelte b/src/lib/pages/serverless-worker-create.svelte
new file mode 100644
index 0000000000..b2a8c304ff
--- /dev/null
+++ b/src/lib/pages/serverless-worker-create.svelte
@@ -0,0 +1,321 @@
+<script lang="ts">
+  import { superForm } from 'sveltekit-superforms';
+  import { zodClient } from 'sveltekit-superforms/adapters';
+  import { z } from 'zod/v3';
+
+  import Accordion from '$lib/holocene/accordion/accordion.svelte';
+  import Alert from '$lib/holocene/alert.svelte';
+  import Button from '$lib/holocene/button.svelte';
+  import Input from '$lib/holocene/input/input.svelte';
+  import { translate } from '$lib/i18n/translate';
+  import {
+    createServerlessWorker,
+    validateIamRole,
+    validateLambdaArn,
+    validateRegion,
+    validateTaskQueue,
+  } from '$lib/services/serverless-worker-service';
+  import type { MockValidationResult } from '$lib/types/serverless-workers';
+
+  type Props = {
+    namespace: string;
+    onSuccess: () => void;
+  };
+
+  let { namespace: _namespace, onSuccess }: Props = $props();
+
+  const schema = z.object({
+    name: z
+      .string()
+      .min(3, 'Name must be at least 3 characters')
+      .max(100)
+      .regex(
+        /^[a-z][a-z0-9-]*$/,
+        'Must be lowercase, alphanumeric with hyphens',
+      ),
+    lambdaArn: z
+      .string()
+      .min(1, 'Lambda ARN is required')
+      .regex(
+        /^arn:aws:lambda:[a-z0-9-]+:\d{12}:function:.+$/,
+        'Invalid Lambda ARN format',
+      ),
+    iamRoleArn: z
+      .string()
+      .min(1, 'IAM Role ARN is required')
+      .regex(/^arn:aws:iam::\d{12}:role\/.+$/, 'Invalid IAM Role ARN format'),
+    region: z.string().min(1, 'Region is required'),
+    taskQueue: z.string().min(1, 'Task queue is required'),
+    maxWorkers: z.number().min(1).max(100).default(10),
+    maxConcurrentActivities: z.number().min(1).max(50).default(5),
+    maxTaskQueueActivitiesPerSecond: z.number().min(1).max(10000).default(100),
+    idleTimeoutSeconds: z.number().min(30).max(3600).default(300),
+  });
+
+  const initialData = {
+    name: '',
+    lambdaArn: '',
+    iamRoleArn: '',
+    region: '',
+    taskQueue: '',
+    maxWorkers: 10,
+    maxConcurrentActivities: 5,
+    maxTaskQueueActivitiesPerSecond: 100,
+    idleTimeoutSeconds: 300,
+  };
+
+  const superform = superForm(initialData, {
+    SPA: true,
+    validators: zodClient(schema),
+    resetForm: false,
+    dataType: 'json',
+    onUpdate: async ({ form }) => {
+      if (!form.valid) return;
+      createServerlessWorker({
+        name: form.data.name,
+        lambdaArn: form.data.lambdaArn,
+        iamRoleArn: form.data.iamRoleArn,
+        region: form.data.region,
+        taskQueue: form.data.taskQueue,
+        maxWorkers: form.data.maxWorkers,
+        maxConcurrentActivities: form.data.maxConcurrentActivities,
+        maxTaskQueueActivitiesPerSecond:
+          form.data.maxTaskQueueActivitiesPerSecond,
+        idleTimeoutSeconds: form.data.idleTimeoutSeconds,
+      });
+      onSuccess();
+    },
+  });
+
+  const { form, errors, enhance, submitting } = superform;
+
+  let lambdaValidation = $state<{
+    checking: boolean;
+    result?: MockValidationResult;
+  }>({ checking: false });
+  let iamValidation = $state<{
+    checking: boolean;
+    result?: MockValidationResult;
+  }>({ checking: false });
+  let regionValidation = $state<{
+    checking: boolean;
+    result?: MockValidationResult;
+  }>({ checking: false });
+  let taskQueueValidation = $state<{
+    checking: boolean;
+    result?: MockValidationResult;
+  }>({ checking: false });
+
+  async function checkLambdaArn() {
+    const arn = $form.lambdaArn;
+    if (!arn || !/^arn:aws:lambda:/.test(arn)) return;
+    lambdaValidation = { checking: true };
+    const result = await validateLambdaArn(arn);
+    lambdaValidation = { checking: false, result };
+  }
+
+  async function checkIamRole() {
+    const arn = $form.iamRoleArn;
+    if (!arn || !/^arn:aws:iam::/.test(arn)) return;
+    iamValidation = { checking: true };
+    const result = await validateIamRole(arn);
+    iamValidation = { checking: false, result };
+  }
+
+  async function checkRegion() {
+    const region = $form.region;
+    if (!region) return;
+    regionValidation = { checking: true };
+    const result = await validateRegion(region);
+    regionValidation = { checking: false, result };
+  }
+
+  async function checkTaskQueue() {
+    const name = $form.taskQueue;
+    if (!name) return;
+    taskQueueValidation = { checking: true };
+    const result = await validateTaskQueue(name);
+    taskQueueValidation = { checking: false, result };
+  }
+
+  const regions = [
+    { value: 'us-east-1', label: 'US East (N. Virginia)' },
+    { value: 'us-west-2', label: 'US West (Oregon)' },
+    { value: 'eu-west-1', label: 'EU (Ireland)' },
+    { value: 'ap-southeast-1', label: 'Asia Pacific (Singapore)' },
+  ];
+</script>
+
+<form class="flex w-full flex-col gap-4 xl:w-2/3" use:enhance novalidate>
+  <Input
+    bind:value={$form.name}
+    id="name"
+    name="name"
+    label={translate('workers.name-label')}
+    hintText={$errors.name?.[0] || translate('workers.name-hint')}
+    error={!!$errors.name?.[0]}
+    placeholder={translate('workers.name-placeholder')}
+    required
+  />
+
+  <div class="flex flex-col gap-1">
+    <Input
+      bind:value={$form.lambdaArn}
+      id="lambdaArn"
+      name="lambdaArn"
+      label={translate('workers.lambda-arn-label')}
+      hintText={$errors.lambdaArn?.[0] || translate('workers.lambda-arn-hint')}
+      error={!!$errors.lambdaArn?.[0]}
+      placeholder={translate('workers.lambda-arn-placeholder')}
+      required
+      on:blur={checkLambdaArn}
+    />
+    {#if lambdaValidation.checking}
+      <span class="text-xs text-secondary"
+        >{translate('workers.validation-checking')}</span
+      >
+    {:else if lambdaValidation.result}
+      <Alert
+        intent={lambdaValidation.result.valid ? 'success' : 'error'}
+        title={lambdaValidation.result.message}
+      />
+    {/if}
+  </div>
+
+  <div class="flex flex-col gap-1">
+    <Input
+      bind:value={$form.iamRoleArn}
+      id="iamRoleArn"
+      name="iamRoleArn"
+      label={translate('workers.iam-role-label')}
+      hintText={$errors.iamRoleArn?.[0] || translate('workers.iam-role-hint')}
+      error={!!$errors.iamRoleArn?.[0]}
+      placeholder={translate('workers.iam-role-placeholder')}
+      required
+      on:blur={checkIamRole}
+    />
+    {#if iamValidation.checking}
+      <span class="text-xs text-secondary"
+        >{translate('workers.validation-checking')}</span
+      >
+    {:else if iamValidation.result}
+      <Alert
+        intent={iamValidation.result.valid ? 'success' : 'error'}
+        title={iamValidation.result.message}
+      />
+    {/if}
+  </div>
+
+  <div class="flex flex-col gap-1">
+    <label for="region" class="text-sm font-medium text-primary">
+      {translate('workers.region-label')}
+    </label>
+    <select
+      id="region"
+      name="region"
+      bind:value={$form.region}
+      onblur={checkRegion}
+      class="surface-primary border border-subtle px-3 py-2 text-sm text-primary focus:outline-none focus:ring-2 focus:ring-primary/70"
+    >
+      <option value="" disabled>Select a region</option>
+      {#each regions as { value, label } (value)}
+        <option {value}>{label}</option>
+      {/each}
+    </select>
+    <span class="text-xs text-secondary"
+      >{$errors.region?.[0] || translate('workers.region-hint')}</span
+    >
+    {#if regionValidation.checking}
+      <span class="text-xs text-secondary"
+        >{translate('workers.validation-checking')}</span
+      >
+    {:else if regionValidation.result}
+      <Alert
+        intent={regionValidation.result.valid ? 'success' : 'warning'}
+        title={regionValidation.result.message}
+      />
+    {/if}
+  </div>
+
+  <div class="flex flex-col gap-1">
+    <Input
+      bind:value={$form.taskQueue}
+      id="taskQueue"
+      name="taskQueue"
+      label={translate('workers.task-queue-label')}
+      hintText={$errors.taskQueue?.[0] || translate('workers.task-queue-hint')}
+      error={!!$errors.taskQueue?.[0]}
+      placeholder={translate('workers.task-queue-placeholder')}
+      required
+      on:blur={checkTaskQueue}
+    />
+    {#if taskQueueValidation.checking}
+      <span class="text-xs text-secondary"
+        >{translate('workers.validation-checking')}</span
+      >
+    {:else if taskQueueValidation.result}
+      <Alert
+        intent={taskQueueValidation.result.valid ? 'success' : 'error'}
+        title={taskQueueValidation.result.message}
+      />
+    {/if}
+  </div>
+
+  <Accordion title={translate('workers.advanced-config')} id="advanced-config">
+    <div class="flex flex-col gap-4 p-4">
+      <Input
+        value={String($form.maxWorkers)}
+        on:input={(e) =>
+          ($form.maxWorkers = Number(
+            (e.currentTarget as HTMLInputElement).value,
+          ))}
+        id="maxWorkers"
+        name="maxWorkers"
+        label={translate('workers.max-workers-label')}
+        hintText={translate('workers.max-workers-hint')}
+      />
+      <Input
+        value={String($form.maxConcurrentActivities)}
+        on:input={(e) =>
+          ($form.maxConcurrentActivities = Number(
+            (e.currentTarget as HTMLInputElement).value,
+          ))}
+        id="maxConcurrentActivities"
+        name="maxConcurrentActivities"
+        label={translate('workers.max-concurrent-label')}
+        hintText={translate('workers.max-concurrent-hint')}
+      />
+      <Input
+        value={String($form.maxTaskQueueActivitiesPerSecond)}
+        on:input={(e) =>
+          ($form.maxTaskQueueActivitiesPerSecond = Number(
+            (e.currentTarget as HTMLInputElement).value,
+          ))}
+        id="maxRate"
+        name="maxRate"
+        label={translate('workers.max-rate-label')}
+        hintText={translate('workers.max-rate-hint')}
+      />
+      <Input
+        value={String($form.idleTimeoutSeconds)}
+        on:input={(e) =>
+          ($form.idleTimeoutSeconds = Number(
+            (e.currentTarget as HTMLInputElement).value,
+          ))}
+        id="idleTimeout"
+        name="idleTimeout"
+        label={translate('workers.idle-timeout-label')}
+        hintText={translate('workers.idle-timeout-hint')}
+      />
+    </div>
+  </Accordion>
+
+  <div class="flex gap-4">
+    <Button type="submit" loading={$submitting}>
+      {translate('workers.create-serverless-worker')}
+    </Button>
+    <Button variant="ghost" on:click={onSuccess}>
+      {translate('common.cancel')}
+    </Button>
+  </div>
+</form>
diff --git a/src/lib/pages/serverless-worker-detail.svelte b/src/lib/pages/serverless-worker-detail.svelte
new file mode 100644
index 0000000000..a0c0c79aba
--- /dev/null
+++ b/src/lib/pages/serverless-worker-detail.svelte
@@ -0,0 +1,176 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+
+  import Alert from '$lib/holocene/alert.svelte';
+  import Badge from '$lib/holocene/badge.svelte';
+  import Button from '$lib/holocene/button.svelte';
+  import Card from '$lib/holocene/card.svelte';
+  import Modal from '$lib/holocene/modal.svelte';
+  import { translate } from '$lib/i18n/translate';
+  import {
+    deleteServerlessWorker,
+    getServerlessWorker,
+  } from '$lib/services/serverless-worker-service';
+  import {
+    routeForServerlessWorkerEdit,
+    routeForWorkers,
+  } from '$lib/utilities/route-for';
+
+  type Props = { id: string; namespace: string };
+  let { id, namespace }: Props = $props();
+
+  const worker = $derived(getServerlessWorker(id));
+  let showDeleteModal = $state(false);
+
+  const statusBadgeType = $derived.by(() => {
+    if (!worker) return 'default';
+    switch (worker.status) {
+      case 'active':
+        return 'success';
+      case 'degraded':
+        return 'warning';
+      case 'inactive':
+        return 'danger';
+      case 'provisioning':
+        return 'primary';
+      default:
+        return 'default';
+    }
+  });
+
+  function handleDelete() {
+    deleteServerlessWorker(id);
+    goto(routeForWorkers({ namespace }));
+  }
+</script>
+
+{#if !worker}
+  <Alert intent="warning" title="Serverless worker not found">
+    No serverless worker found with ID "{id}".
+  </Alert>
+{:else}
+  <div class="flex flex-col gap-6">
+    <div class="flex items-center justify-between">
+      <div class="flex items-center gap-3">
+        <h2 class="text-xl font-semibold">{worker.name}</h2>
+        <Badge type={statusBadgeType}>{worker.status}</Badge>
+      </div>
+      <div class="flex gap-2">
+        <Button href={routeForServerlessWorkerEdit({ namespace, id })}>
+          {translate('workers.edit-serverless-worker')}
+        </Button>
+        <Button variant="destructive" on:click={() => (showDeleteModal = true)}>
+          {translate('workers.delete-serverless-worker')}
+        </Button>
+      </div>
+    </div>
+
+    <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
+      <Card>
+        <h3 class="mb-4 text-base font-semibold">Configuration</h3>
+        <div class="flex flex-col gap-4">
+          <div class="flex flex-col gap-1">
+            <span class="text-xs font-medium text-secondary"
+              >{translate('workers.lambda-arn')}</span
+            >
+            <span class="break-all font-mono text-sm text-primary"
+              >{worker.lambdaArn}</span
+            >
+          </div>
+          <div class="flex flex-col gap-1">
+            <span class="text-xs font-medium text-secondary"
+              >{translate('workers.iam-role-arn')}</span
+            >
+            <span class="break-all font-mono text-sm text-primary"
+              >{worker.iamRoleArn}</span
+            >
+          </div>
+          <div class="flex flex-col gap-1">
+            <span class="text-xs font-medium text-secondary"
+              >{translate('workers.region')}</span
+            >
+            <span class="text-sm text-primary">{worker.region}</span>
+          </div>
+          <div class="flex flex-col gap-1">
+            <span class="text-xs font-medium text-secondary"
+              >{translate('workers.task-queue')}</span
+            >
+            <span class="text-sm text-primary">{worker.taskQueue}</span>
+          </div>
+        </div>
+      </Card>
+
+      <Card>
+        <h3 class="mb-4 text-base font-semibold">
+          {translate('workers.advanced-config')}
+        </h3>
+        <div class="flex flex-col gap-4">
+          <div class="flex flex-col gap-1">
+            <span class="text-xs font-medium text-secondary"
+              >{translate('workers.max-workers')}</span
+            >
+            <span class="text-sm text-primary">{worker.maxWorkers}</span>
+          </div>
+          <div class="flex flex-col gap-1">
+            <span class="text-xs font-medium text-secondary"
+              >{translate('workers.max-concurrent-activities')}</span
+            >
+            <span class="text-sm text-primary"
+              >{worker.maxConcurrentActivities}</span
+            >
+          </div>
+          <div class="flex flex-col gap-1">
+            <span class="text-xs font-medium text-secondary"
+              >{translate('workers.max-task-queue-rate')}</span
+            >
+            <span class="text-sm text-primary"
+              >{worker.maxTaskQueueActivitiesPerSecond}/s</span
+            >
+          </div>
+          <div class="flex flex-col gap-1">
+            <span class="text-xs font-medium text-secondary"
+              >{translate('workers.idle-timeout')}</span
+            >
+            <span class="text-sm text-primary"
+              >{worker.idleTimeoutSeconds}s</span
+            >
+          </div>
+        </div>
+
+        <div class="mt-6 border-t border-subtle pt-4">
+          <div class="flex flex-col gap-2">
+            <div class="flex flex-col gap-1">
+              <span class="text-xs font-medium text-secondary"
+                >{translate('workers.created-at')}</span
+              >
+              <span class="text-sm text-primary"
+                >{new Date(worker.createdAt).toLocaleString()}</span
+              >
+            </div>
+            <div class="flex flex-col gap-1">
+              <span class="text-xs font-medium text-secondary"
+                >{translate('workers.updated-at')}</span
+              >
+              <span class="text-sm text-primary"
+                >{new Date(worker.updatedAt).toLocaleString()}</span
+              >
+            </div>
+          </div>
+        </div>
+      </Card>
+    </div>
+  </div>
+
+  <Modal
+    id="delete-serverless-worker-modal"
+    open={showDeleteModal}
+    confirmText={translate('workers.delete-serverless-worker')}
+    cancelText={translate('common.cancel')}
+    confirmType="destructive"
+    on:confirmModal={handleDelete}
+    on:cancelModal={() => (showDeleteModal = false)}
+  >
+    <h3 slot="title">{translate('workers.delete-serverless-worker')}</h3>
+    <p slot="content">{translate('workers.delete-confirm')}</p>
+  </Modal>
+{/if}
diff --git a/src/lib/pages/serverless-worker-edit.svelte b/src/lib/pages/serverless-worker-edit.svelte
new file mode 100644
index 0000000000..ae3f6872d1
--- /dev/null
+++ b/src/lib/pages/serverless-worker-edit.svelte
@@ -0,0 +1,179 @@
+<script lang="ts">
+  import { superForm } from 'sveltekit-superforms';
+  import { zodClient } from 'sveltekit-superforms/adapters';
+  import { z } from 'zod/v3';
+
+  import { goto } from '$app/navigation';
+
+  import Alert from '$lib/holocene/alert.svelte';
+  import Button from '$lib/holocene/button.svelte';
+  import Card from '$lib/holocene/card.svelte';
+  import Input from '$lib/holocene/input/input.svelte';
+  import { translate } from '$lib/i18n/translate';
+  import {
+    getServerlessWorker,
+    updateServerlessWorker,
+  } from '$lib/services/serverless-worker-service';
+  import { routeForServerlessWorker } from '$lib/utilities/route-for';
+
+  type Props = { id: string; namespace: string };
+  let { id, namespace }: Props = $props();
+
+  const worker = $derived(getServerlessWorker(id));
+  const detailHref = $derived(routeForServerlessWorker({ namespace, id }));
+
+  const schema = z.object({
+    maxWorkers: z.number().min(1).max(100),
+    maxConcurrentActivities: z.number().min(1).max(50),
+    maxTaskQueueActivitiesPerSecond: z.number().min(1).max(10000),
+    idleTimeoutSeconds: z.number().min(30).max(3600),
+  });
+
+  const initialData = $derived(
+    worker
+      ? {
+          maxWorkers: worker.maxWorkers,
+          maxConcurrentActivities: worker.maxConcurrentActivities,
+          maxTaskQueueActivitiesPerSecond:
+            worker.maxTaskQueueActivitiesPerSecond,
+          idleTimeoutSeconds: worker.idleTimeoutSeconds,
+        }
+      : {
+          maxWorkers: 10,
+          maxConcurrentActivities: 5,
+          maxTaskQueueActivitiesPerSecond: 100,
+          idleTimeoutSeconds: 300,
+        },
+  );
+
+  const superform = superForm(initialData, {
+    SPA: true,
+    validators: zodClient(schema),
+    resetForm: false,
+    dataType: 'json',
+    onUpdate: async ({ form }) => {
+      if (!form.valid) return;
+      updateServerlessWorker(id, form.data);
+      goto(detailHref);
+    },
+  });
+
+  const { form, errors, enhance, submitting } = superform;
+</script>
+
+{#if !worker}
+  <Alert intent="warning" title="Serverless worker not found">
+    No serverless worker found with ID "{id}".
+  </Alert>
+{:else}
+  <div class="flex flex-col gap-6">
+    <Card>
+      <h3 class="mb-4 text-base font-semibold">
+        {translate('workers.connection-details')}
+      </h3>
+      <div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
+        <div class="flex flex-col gap-1">
+          <span class="text-xs font-medium text-secondary"
+            >{translate('workers.name-label')}</span
+          >
+          <span class="text-sm text-primary">{worker.name}</span>
+        </div>
+        <div class="flex flex-col gap-1">
+          <span class="text-xs font-medium text-secondary"
+            >{translate('workers.region')}</span
+          >
+          <span class="text-sm text-primary">{worker.region}</span>
+        </div>
+        <div class="flex flex-col gap-1">
+          <span class="text-xs font-medium text-secondary"
+            >{translate('workers.lambda-arn')}</span
+          >
+          <span class="break-all font-mono text-sm text-primary"
+            >{worker.lambdaArn}</span
+          >
+        </div>
+        <div class="flex flex-col gap-1">
+          <span class="text-xs font-medium text-secondary"
+            >{translate('workers.iam-role-arn')}</span
+          >
+          <span class="break-all font-mono text-sm text-primary"
+            >{worker.iamRoleArn}</span
+          >
+        </div>
+        <div class="flex flex-col gap-1">
+          <span class="text-xs font-medium text-secondary"
+            >{translate('workers.task-queue')}</span
+          >
+          <span class="text-sm text-primary">{worker.taskQueue}</span>
+        </div>
+      </div>
+    </Card>
+
+    <form class="flex w-full flex-col gap-4 xl:w-2/3" use:enhance novalidate>
+      <h3 class="text-base font-semibold">
+        {translate('workers.advanced-config')}
+      </h3>
+      <Input
+        value={String($form.maxWorkers)}
+        on:input={(e) =>
+          ($form.maxWorkers = Number(
+            (e.currentTarget as HTMLInputElement).value,
+          ))}
+        id="maxWorkers"
+        name="maxWorkers"
+        label={translate('workers.max-workers-label')}
+        hintText={$errors.maxWorkers?.[0] ||
+          translate('workers.max-workers-hint')}
+        error={!!$errors.maxWorkers?.[0]}
+      />
+      <Input
+        value={String($form.maxConcurrentActivities)}
+        on:input={(e) =>
+          ($form.maxConcurrentActivities = Number(
+            (e.currentTarget as HTMLInputElement).value,
+          ))}
+        id="maxConcurrentActivities"
+        name="maxConcurrentActivities"
+        label={translate('workers.max-concurrent-label')}
+        hintText={$errors.maxConcurrentActivities?.[0] ||
+          translate('workers.max-concurrent-hint')}
+        error={!!$errors.maxConcurrentActivities?.[0]}
+      />
+      <Input
+        value={String($form.maxTaskQueueActivitiesPerSecond)}
+        on:input={(e) =>
+          ($form.maxTaskQueueActivitiesPerSecond = Number(
+            (e.currentTarget as HTMLInputElement).value,
+          ))}
+        id="maxRate"
+        name="maxRate"
+        label={translate('workers.max-rate-label')}
+        hintText={$errors.maxTaskQueueActivitiesPerSecond?.[0] ||
+          translate('workers.max-rate-hint')}
+        error={!!$errors.maxTaskQueueActivitiesPerSecond?.[0]}
+      />
+      <Input
+        value={String($form.idleTimeoutSeconds)}
+        on:input={(e) =>
+          ($form.idleTimeoutSeconds = Number(
+            (e.currentTarget as HTMLInputElement).value,
+          ))}
+        id="idleTimeout"
+        name="idleTimeout"
+        label={translate('workers.idle-timeout-label')}
+        hintText={$errors.idleTimeoutSeconds?.[0] ||
+          translate('workers.idle-timeout-hint')}
+        error={!!$errors.idleTimeoutSeconds?.[0]}
+      />
+
+      <div class="flex gap-4">
+        <Button type="submit" loading={$submitting}>
+          {translate('workers.save-changes')}
+        </Button>
+        <Button variant="ghost" on:click={() => goto(detailHref)}>
+          {translate('common.cancel')}
+        </Button>
+      </div>
+    </form>
+  </div>
+{/if}
diff --git a/src/routes/(app)/namespaces/[namespace]/serverless-workers/[id]/+page.svelte b/src/routes/(app)/namespaces/[namespace]/serverless-workers/[id]/+page.svelte
new file mode 100644
index 0000000000..79746351ae
--- /dev/null
+++ b/src/routes/(app)/namespaces/[namespace]/serverless-workers/[id]/+page.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { page } from '$app/state';
+
+  import PageTitle from '$lib/components/page-title.svelte';
+  import Link from '$lib/holocene/link.svelte';
+  import { translate } from '$lib/i18n/translate';
+  import ServerlessWorkerDetail from '$lib/pages/serverless-worker-detail.svelte';
+  import { routeForWorkers } from '$lib/utilities/route-for';
+
+  const namespace = $derived(page.params.namespace);
+  const id = $derived(page.params.id);
+</script>
+
+<PageTitle
+  title={translate('workers.serverless-detail-title')}
+  url={page.url.href}
+/>
+
+<header class="flex flex-col gap-2">
+  <Link
+    href={routeForWorkers({ namespace })}
+    data-testid="back-to-workers"
+    icon="chevron-left"
+  >
+    {translate('workers.back-to-workers')}
+  </Link>
+</header>
+
+<ServerlessWorkerDetail {id} {namespace} />
diff --git a/src/routes/(app)/namespaces/[namespace]/serverless-workers/[id]/edit/+page.svelte b/src/routes/(app)/namespaces/[namespace]/serverless-workers/[id]/edit/+page.svelte
new file mode 100644
index 0000000000..877e95302c
--- /dev/null
+++ b/src/routes/(app)/namespaces/[namespace]/serverless-workers/[id]/edit/+page.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { page } from '$app/state';
+
+  import PageTitle from '$lib/components/page-title.svelte';
+  import Link from '$lib/holocene/link.svelte';
+  import { translate } from '$lib/i18n/translate';
+  import ServerlessWorkerEdit from '$lib/pages/serverless-worker-edit.svelte';
+  import { routeForServerlessWorker } from '$lib/utilities/route-for';
+
+  const namespace = $derived(page.params.namespace);
+  const id = $derived(page.params.id);
+</script>
+
+<PageTitle
+  title={translate('workers.edit-serverless-worker-title')}
+  url={page.url.href}
+/>
+
+<header class="flex flex-col gap-2">
+  <Link
+    href={routeForServerlessWorker({ namespace, id })}
+    data-testid="back-to-worker-detail"
+    icon="chevron-left"
+  >
+    {translate('workers.back-to-workers')}
+  </Link>
+</header>
+
+<ServerlessWorkerEdit {id} {namespace} />

From d007bd94034195aa997905158130908454b82018 Mon Sep 17 00:00:00 2001
From: Ross Nelson <axcess1@me.com>
Date: Wed, 4 Mar 2026 12:58:02 -0500
Subject: [PATCH 7/7] feat: improve serverless workers UX with guided setup and
 shared form

Extract shared form component for create/edit, add provider picker,
pre-setup guidance with CloudFormation/Terraform snippets, Combobox
region selector, validation spinners, tooltip help, copyable ARNs
with AWS console links, and educational empty state.
---
 src/lib/i18n/locales/en/workers.ts            |  50 ++
 src/lib/pages/serverless-worker-create.svelte | 325 +--------
 src/lib/pages/serverless-worker-detail.svelte |  63 +-
 src/lib/pages/serverless-worker-edit.svelte   | 170 +----
 src/lib/pages/serverless-worker-form.svelte   | 618 ++++++++++++++++++
 src/lib/services/serverless-worker-service.ts |  18 +-
 .../serverless/+page.svelte                   |  27 +-
 7 files changed, 795 insertions(+), 476 deletions(-)
 create mode 100644 src/lib/pages/serverless-worker-form.svelte

diff --git a/src/lib/i18n/locales/en/workers.ts b/src/lib/i18n/locales/en/workers.ts
index b4a035a468..ff3a4058ee 100644
--- a/src/lib/i18n/locales/en/workers.ts
+++ b/src/lib/i18n/locales/en/workers.ts
@@ -110,4 +110,54 @@ export const Strings = {
   'validation-region-mismatch': 'Cross-region: may increase latency',
   'validation-queue-available': 'Task queue name available',
   'validation-queue-exists': 'Task queue already in use',
+  'compute-provider': 'Compute Provider',
+  'compute-provider-description':
+    'Select how your worker activities will be executed.',
+  'provider-lambda': 'AWS Lambda',
+  'provider-lambda-description':
+    'Run activities as serverless Lambda function invocations.',
+  'provider-coming-soon': 'More providers coming soon',
+  'provider-coming-soon-description':
+    'Support for additional compute providers is planned.',
+  'setup-guide-title': 'Prerequisites: AWS Setup Guide',
+  'setup-guide-intro':
+    'Before creating a serverless worker, you need a Lambda function and an IAM role in your AWS account.',
+  'setup-guide-lambda-console': 'Open AWS Lambda Console',
+  'setup-guide-iam-console': 'Open AWS IAM Console',
+  'setup-guide-iam-note':
+    'The IAM role must have a trust policy allowing Temporal to assume it. Use the templates below as a starting point.',
+  'validation-checking-lambda': 'Validating Lambda function access...',
+  'validation-checking-iam': 'Validating IAM role permissions...',
+  'validation-checking-region': 'Checking region compatibility...',
+  'validation-checking-queue': 'Checking task queue availability...',
+  'validation-function-not-found-detail':
+    'Lambda function not found. Verify the ARN and ensure the function exists in the specified region.',
+  'validation-permissions-missing-detail':
+    'IAM role lacks required permissions. Ensure the role has a trust policy allowing Temporal to assume it.',
+  'validation-queue-new':
+    'This will create a new task queue. Serverless workers require a dedicated task queue.',
+  'serverless-empty-title': 'Get Started with Serverless Workers',
+  'serverless-empty-description':
+    'Serverless workers execute your Temporal activities as AWS Lambda function invocations, eliminating the need to manage worker infrastructure.',
+  'serverless-empty-prereq-title': 'What you need:',
+  'serverless-empty-prereq-lambda':
+    'An AWS Lambda function with your activity code',
+  'serverless-empty-prereq-iam':
+    'An IAM role allowing Temporal to invoke your function',
+  'serverless-empty-prereq-queue':
+    'A task queue name for your serverless worker',
+  'serverless-docs-link': 'Learn more about serverless workers',
+  'open-lambda-console': 'Open in Lambda Console',
+  'open-iam-console': 'Open in IAM Console',
+  'copy-arn': 'Copy ARN',
+  'copy-task-queue': 'Copy task queue name',
+  copied: 'Copied!',
+  'lambda-arn-help':
+    'The Amazon Resource Name of your Lambda function. Use an unqualified ARN (no version/alias suffix).',
+  'iam-role-help':
+    'Temporal assumes this role to invoke your Lambda function. The role needs a trust policy for Temporal and permission to invoke the function.',
+  'task-queue-help':
+    'Serverless workers require a dedicated task queue. You cannot share a task queue between serverless and traditional workers.',
+  'region-help':
+    'Choose the AWS region where your Lambda function is deployed. For best performance, match your Temporal namespace region.',
 } as const;
diff --git a/src/lib/pages/serverless-worker-create.svelte b/src/lib/pages/serverless-worker-create.svelte
index b2a8c304ff..c98fd73197 100644
--- a/src/lib/pages/serverless-worker-create.svelte
+++ b/src/lib/pages/serverless-worker-create.svelte
@@ -1,321 +1,24 @@
 <script lang="ts">
-  import { superForm } from 'sveltekit-superforms';
-  import { zodClient } from 'sveltekit-superforms/adapters';
-  import { z } from 'zod/v3';
-
-  import Accordion from '$lib/holocene/accordion/accordion.svelte';
-  import Alert from '$lib/holocene/alert.svelte';
-  import Button from '$lib/holocene/button.svelte';
-  import Input from '$lib/holocene/input/input.svelte';
   import { translate } from '$lib/i18n/translate';
-  import {
-    createServerlessWorker,
-    validateIamRole,
-    validateLambdaArn,
-    validateRegion,
-    validateTaskQueue,
-  } from '$lib/services/serverless-worker-service';
-  import type { MockValidationResult } from '$lib/types/serverless-workers';
+  import ServerlessWorkerForm from '$lib/pages/serverless-worker-form.svelte';
+  import { createServerlessWorker } from '$lib/services/serverless-worker-service';
+  import type { ServerlessWorkerCreateInput } from '$lib/types/serverless-workers';
+  import { routeForWorkers } from '$lib/utilities/route-for';
 
   type Props = {
     namespace: string;
     onSuccess: () => void;
   };
 
-  let { namespace: _namespace, onSuccess }: Props = $props();
-
-  const schema = z.object({
-    name: z
-      .string()
-      .min(3, 'Name must be at least 3 characters')
-      .max(100)
-      .regex(
-        /^[a-z][a-z0-9-]*$/,
-        'Must be lowercase, alphanumeric with hyphens',
-      ),
-    lambdaArn: z
-      .string()
-      .min(1, 'Lambda ARN is required')
-      .regex(
-        /^arn:aws:lambda:[a-z0-9-]+:\d{12}:function:.+$/,
-        'Invalid Lambda ARN format',
-      ),
-    iamRoleArn: z
-      .string()
-      .min(1, 'IAM Role ARN is required')
-      .regex(/^arn:aws:iam::\d{12}:role\/.+$/, 'Invalid IAM Role ARN format'),
-    region: z.string().min(1, 'Region is required'),
-    taskQueue: z.string().min(1, 'Task queue is required'),
-    maxWorkers: z.number().min(1).max(100).default(10),
-    maxConcurrentActivities: z.number().min(1).max(50).default(5),
-    maxTaskQueueActivitiesPerSecond: z.number().min(1).max(10000).default(100),
-    idleTimeoutSeconds: z.number().min(30).max(3600).default(300),
-  });
-
-  const initialData = {
-    name: '',
-    lambdaArn: '',
-    iamRoleArn: '',
-    region: '',
-    taskQueue: '',
-    maxWorkers: 10,
-    maxConcurrentActivities: 5,
-    maxTaskQueueActivitiesPerSecond: 100,
-    idleTimeoutSeconds: 300,
-  };
-
-  const superform = superForm(initialData, {
-    SPA: true,
-    validators: zodClient(schema),
-    resetForm: false,
-    dataType: 'json',
-    onUpdate: async ({ form }) => {
-      if (!form.valid) return;
-      createServerlessWorker({
-        name: form.data.name,
-        lambdaArn: form.data.lambdaArn,
-        iamRoleArn: form.data.iamRoleArn,
-        region: form.data.region,
-        taskQueue: form.data.taskQueue,
-        maxWorkers: form.data.maxWorkers,
-        maxConcurrentActivities: form.data.maxConcurrentActivities,
-        maxTaskQueueActivitiesPerSecond:
-          form.data.maxTaskQueueActivitiesPerSecond,
-        idleTimeoutSeconds: form.data.idleTimeoutSeconds,
-      });
-      onSuccess();
-    },
-  });
-
-  const { form, errors, enhance, submitting } = superform;
-
-  let lambdaValidation = $state<{
-    checking: boolean;
-    result?: MockValidationResult;
-  }>({ checking: false });
-  let iamValidation = $state<{
-    checking: boolean;
-    result?: MockValidationResult;
-  }>({ checking: false });
-  let regionValidation = $state<{
-    checking: boolean;
-    result?: MockValidationResult;
-  }>({ checking: false });
-  let taskQueueValidation = $state<{
-    checking: boolean;
-    result?: MockValidationResult;
-  }>({ checking: false });
-
-  async function checkLambdaArn() {
-    const arn = $form.lambdaArn;
-    if (!arn || !/^arn:aws:lambda:/.test(arn)) return;
-    lambdaValidation = { checking: true };
-    const result = await validateLambdaArn(arn);
-    lambdaValidation = { checking: false, result };
-  }
-
-  async function checkIamRole() {
-    const arn = $form.iamRoleArn;
-    if (!arn || !/^arn:aws:iam::/.test(arn)) return;
-    iamValidation = { checking: true };
-    const result = await validateIamRole(arn);
-    iamValidation = { checking: false, result };
-  }
-
-  async function checkRegion() {
-    const region = $form.region;
-    if (!region) return;
-    regionValidation = { checking: true };
-    const result = await validateRegion(region);
-    regionValidation = { checking: false, result };
-  }
-
-  async function checkTaskQueue() {
-    const name = $form.taskQueue;
-    if (!name) return;
-    taskQueueValidation = { checking: true };
-    const result = await validateTaskQueue(name);
-    taskQueueValidation = { checking: false, result };
-  }
-
-  const regions = [
-    { value: 'us-east-1', label: 'US East (N. Virginia)' },
-    { value: 'us-west-2', label: 'US West (Oregon)' },
-    { value: 'eu-west-1', label: 'EU (Ireland)' },
-    { value: 'ap-southeast-1', label: 'Asia Pacific (Singapore)' },
-  ];
+  let { namespace, onSuccess }: Props = $props();
 </script>
 
-<form class="flex w-full flex-col gap-4 xl:w-2/3" use:enhance novalidate>
-  <Input
-    bind:value={$form.name}
-    id="name"
-    name="name"
-    label={translate('workers.name-label')}
-    hintText={$errors.name?.[0] || translate('workers.name-hint')}
-    error={!!$errors.name?.[0]}
-    placeholder={translate('workers.name-placeholder')}
-    required
-  />
-
-  <div class="flex flex-col gap-1">
-    <Input
-      bind:value={$form.lambdaArn}
-      id="lambdaArn"
-      name="lambdaArn"
-      label={translate('workers.lambda-arn-label')}
-      hintText={$errors.lambdaArn?.[0] || translate('workers.lambda-arn-hint')}
-      error={!!$errors.lambdaArn?.[0]}
-      placeholder={translate('workers.lambda-arn-placeholder')}
-      required
-      on:blur={checkLambdaArn}
-    />
-    {#if lambdaValidation.checking}
-      <span class="text-xs text-secondary"
-        >{translate('workers.validation-checking')}</span
-      >
-    {:else if lambdaValidation.result}
-      <Alert
-        intent={lambdaValidation.result.valid ? 'success' : 'error'}
-        title={lambdaValidation.result.message}
-      />
-    {/if}
-  </div>
-
-  <div class="flex flex-col gap-1">
-    <Input
-      bind:value={$form.iamRoleArn}
-      id="iamRoleArn"
-      name="iamRoleArn"
-      label={translate('workers.iam-role-label')}
-      hintText={$errors.iamRoleArn?.[0] || translate('workers.iam-role-hint')}
-      error={!!$errors.iamRoleArn?.[0]}
-      placeholder={translate('workers.iam-role-placeholder')}
-      required
-      on:blur={checkIamRole}
-    />
-    {#if iamValidation.checking}
-      <span class="text-xs text-secondary"
-        >{translate('workers.validation-checking')}</span
-      >
-    {:else if iamValidation.result}
-      <Alert
-        intent={iamValidation.result.valid ? 'success' : 'error'}
-        title={iamValidation.result.message}
-      />
-    {/if}
-  </div>
-
-  <div class="flex flex-col gap-1">
-    <label for="region" class="text-sm font-medium text-primary">
-      {translate('workers.region-label')}
-    </label>
-    <select
-      id="region"
-      name="region"
-      bind:value={$form.region}
-      onblur={checkRegion}
-      class="surface-primary border border-subtle px-3 py-2 text-sm text-primary focus:outline-none focus:ring-2 focus:ring-primary/70"
-    >
-      <option value="" disabled>Select a region</option>
-      {#each regions as { value, label } (value)}
-        <option {value}>{label}</option>
-      {/each}
-    </select>
-    <span class="text-xs text-secondary"
-      >{$errors.region?.[0] || translate('workers.region-hint')}</span
-    >
-    {#if regionValidation.checking}
-      <span class="text-xs text-secondary"
-        >{translate('workers.validation-checking')}</span
-      >
-    {:else if regionValidation.result}
-      <Alert
-        intent={regionValidation.result.valid ? 'success' : 'warning'}
-        title={regionValidation.result.message}
-      />
-    {/if}
-  </div>
-
-  <div class="flex flex-col gap-1">
-    <Input
-      bind:value={$form.taskQueue}
-      id="taskQueue"
-      name="taskQueue"
-      label={translate('workers.task-queue-label')}
-      hintText={$errors.taskQueue?.[0] || translate('workers.task-queue-hint')}
-      error={!!$errors.taskQueue?.[0]}
-      placeholder={translate('workers.task-queue-placeholder')}
-      required
-      on:blur={checkTaskQueue}
-    />
-    {#if taskQueueValidation.checking}
-      <span class="text-xs text-secondary"
-        >{translate('workers.validation-checking')}</span
-      >
-    {:else if taskQueueValidation.result}
-      <Alert
-        intent={taskQueueValidation.result.valid ? 'success' : 'error'}
-        title={taskQueueValidation.result.message}
-      />
-    {/if}
-  </div>
-
-  <Accordion title={translate('workers.advanced-config')} id="advanced-config">
-    <div class="flex flex-col gap-4 p-4">
-      <Input
-        value={String($form.maxWorkers)}
-        on:input={(e) =>
-          ($form.maxWorkers = Number(
-            (e.currentTarget as HTMLInputElement).value,
-          ))}
-        id="maxWorkers"
-        name="maxWorkers"
-        label={translate('workers.max-workers-label')}
-        hintText={translate('workers.max-workers-hint')}
-      />
-      <Input
-        value={String($form.maxConcurrentActivities)}
-        on:input={(e) =>
-          ($form.maxConcurrentActivities = Number(
-            (e.currentTarget as HTMLInputElement).value,
-          ))}
-        id="maxConcurrentActivities"
-        name="maxConcurrentActivities"
-        label={translate('workers.max-concurrent-label')}
-        hintText={translate('workers.max-concurrent-hint')}
-      />
-      <Input
-        value={String($form.maxTaskQueueActivitiesPerSecond)}
-        on:input={(e) =>
-          ($form.maxTaskQueueActivitiesPerSecond = Number(
-            (e.currentTarget as HTMLInputElement).value,
-          ))}
-        id="maxRate"
-        name="maxRate"
-        label={translate('workers.max-rate-label')}
-        hintText={translate('workers.max-rate-hint')}
-      />
-      <Input
-        value={String($form.idleTimeoutSeconds)}
-        on:input={(e) =>
-          ($form.idleTimeoutSeconds = Number(
-            (e.currentTarget as HTMLInputElement).value,
-          ))}
-        id="idleTimeout"
-        name="idleTimeout"
-        label={translate('workers.idle-timeout-label')}
-        hintText={translate('workers.idle-timeout-hint')}
-      />
-    </div>
-  </Accordion>
-
-  <div class="flex gap-4">
-    <Button type="submit" loading={$submitting}>
-      {translate('workers.create-serverless-worker')}
-    </Button>
-    <Button variant="ghost" on:click={onSuccess}>
-      {translate('common.cancel')}
-    </Button>
-  </div>
-</form>
+<ServerlessWorkerForm
+  {namespace}
+  submitButtonText={translate('workers.create-serverless-worker')}
+  cancelHref={routeForWorkers({ namespace })}
+  onSubmit={(data) => {
+    createServerlessWorker(data as unknown as ServerlessWorkerCreateInput);
+    onSuccess();
+  }}
+/>
diff --git a/src/lib/pages/serverless-worker-detail.svelte b/src/lib/pages/serverless-worker-detail.svelte
index a0c0c79aba..6bd2e67927 100644
--- a/src/lib/pages/serverless-worker-detail.svelte
+++ b/src/lib/pages/serverless-worker-detail.svelte
@@ -5,12 +5,15 @@
   import Badge from '$lib/holocene/badge.svelte';
   import Button from '$lib/holocene/button.svelte';
   import Card from '$lib/holocene/card.svelte';
+  import CopyButton from '$lib/holocene/copyable/button.svelte';
+  import Link from '$lib/holocene/link.svelte';
   import Modal from '$lib/holocene/modal.svelte';
   import { translate } from '$lib/i18n/translate';
   import {
     deleteServerlessWorker,
     getServerlessWorker,
   } from '$lib/services/serverless-worker-service';
+  import { copyToClipboard } from '$lib/utilities/copy-to-clipboard';
   import {
     routeForServerlessWorkerEdit,
     routeForWorkers,
@@ -22,6 +25,20 @@
   const worker = $derived(getServerlessWorker(id));
   let showDeleteModal = $state(false);
 
+  const { copy: copyLambda, copied: lambdaCopied } = copyToClipboard();
+  const { copy: copyIam, copied: iamCopied } = copyToClipboard();
+  const { copy: copyTaskQueue, copied: taskQueueCopied } = copyToClipboard();
+
+  function parseLambdaArn(arn: string) {
+    const parts = arn.split(':');
+    return { region: parts[3], functionName: parts[6] };
+  }
+
+  function parseIamRoleArn(arn: string) {
+    const parts = arn.split('/');
+    return { roleName: parts[parts.length - 1] };
+  }
+
   const statusBadgeType = $derived.by(() => {
     if (!worker) return 'default';
     switch (worker.status) {
@@ -73,17 +90,45 @@
             <span class="text-xs font-medium text-secondary"
               >{translate('workers.lambda-arn')}</span
             >
-            <span class="break-all font-mono text-sm text-primary"
-              >{worker.lambdaArn}</span
+            <div class="flex items-center gap-2">
+              <span class="break-all font-mono text-sm text-primary"
+                >{worker.lambdaArn}</span
+              >
+              <CopyButton
+                copyIconTitle={translate('workers.copy-arn')}
+                copySuccessIconTitle={translate('workers.copied')}
+                copied={$lambdaCopied}
+                on:click={(e) => copyLambda(e, worker.lambdaArn)}
+              />
+            </div>
+            <Link
+              href={`https://console.aws.amazon.com/lambda/home?region=${parseLambdaArn(worker.lambdaArn).region}#/functions/${parseLambdaArn(worker.lambdaArn).functionName}`}
+              newTab
             >
+              {translate('workers.open-lambda-console')}
+            </Link>
           </div>
           <div class="flex flex-col gap-1">
             <span class="text-xs font-medium text-secondary"
               >{translate('workers.iam-role-arn')}</span
             >
-            <span class="break-all font-mono text-sm text-primary"
-              >{worker.iamRoleArn}</span
+            <div class="flex items-center gap-2">
+              <span class="break-all font-mono text-sm text-primary"
+                >{worker.iamRoleArn}</span
+              >
+              <CopyButton
+                copyIconTitle={translate('workers.copy-arn')}
+                copySuccessIconTitle={translate('workers.copied')}
+                copied={$iamCopied}
+                on:click={(e) => copyIam(e, worker.iamRoleArn)}
+              />
+            </div>
+            <Link
+              href={`https://console.aws.amazon.com/iam/home#/roles/${parseIamRoleArn(worker.iamRoleArn).roleName}`}
+              newTab
             >
+              {translate('workers.open-iam-console')}
+            </Link>
           </div>
           <div class="flex flex-col gap-1">
             <span class="text-xs font-medium text-secondary"
@@ -95,7 +140,15 @@
             <span class="text-xs font-medium text-secondary"
               >{translate('workers.task-queue')}</span
             >
-            <span class="text-sm text-primary">{worker.taskQueue}</span>
+            <div class="flex items-center gap-2">
+              <span class="text-sm text-primary">{worker.taskQueue}</span>
+              <CopyButton
+                copyIconTitle={translate('workers.copy-task-queue')}
+                copySuccessIconTitle={translate('workers.copied')}
+                copied={$taskQueueCopied}
+                on:click={(e) => copyTaskQueue(e, worker.taskQueue)}
+              />
+            </div>
           </div>
         </div>
       </Card>
diff --git a/src/lib/pages/serverless-worker-edit.svelte b/src/lib/pages/serverless-worker-edit.svelte
index ae3f6872d1..25a257dfd4 100644
--- a/src/lib/pages/serverless-worker-edit.svelte
+++ b/src/lib/pages/serverless-worker-edit.svelte
@@ -1,19 +1,14 @@
 <script lang="ts">
-  import { superForm } from 'sveltekit-superforms';
-  import { zodClient } from 'sveltekit-superforms/adapters';
-  import { z } from 'zod/v3';
-
   import { goto } from '$app/navigation';
 
   import Alert from '$lib/holocene/alert.svelte';
-  import Button from '$lib/holocene/button.svelte';
-  import Card from '$lib/holocene/card.svelte';
-  import Input from '$lib/holocene/input/input.svelte';
   import { translate } from '$lib/i18n/translate';
+  import ServerlessWorkerForm from '$lib/pages/serverless-worker-form.svelte';
   import {
     getServerlessWorker,
     updateServerlessWorker,
   } from '$lib/services/serverless-worker-service';
+  import type { ServerlessWorkerUpdateInput } from '$lib/types/serverless-workers';
   import { routeForServerlessWorker } from '$lib/utilities/route-for';
 
   type Props = { id: string; namespace: string };
@@ -21,44 +16,6 @@
 
   const worker = $derived(getServerlessWorker(id));
   const detailHref = $derived(routeForServerlessWorker({ namespace, id }));
-
-  const schema = z.object({
-    maxWorkers: z.number().min(1).max(100),
-    maxConcurrentActivities: z.number().min(1).max(50),
-    maxTaskQueueActivitiesPerSecond: z.number().min(1).max(10000),
-    idleTimeoutSeconds: z.number().min(30).max(3600),
-  });
-
-  const initialData = $derived(
-    worker
-      ? {
-          maxWorkers: worker.maxWorkers,
-          maxConcurrentActivities: worker.maxConcurrentActivities,
-          maxTaskQueueActivitiesPerSecond:
-            worker.maxTaskQueueActivitiesPerSecond,
-          idleTimeoutSeconds: worker.idleTimeoutSeconds,
-        }
-      : {
-          maxWorkers: 10,
-          maxConcurrentActivities: 5,
-          maxTaskQueueActivitiesPerSecond: 100,
-          idleTimeoutSeconds: 300,
-        },
-  );
-
-  const superform = superForm(initialData, {
-    SPA: true,
-    validators: zodClient(schema),
-    resetForm: false,
-    dataType: 'json',
-    onUpdate: async ({ form }) => {
-      if (!form.valid) return;
-      updateServerlessWorker(id, form.data);
-      goto(detailHref);
-    },
-  });
-
-  const { form, errors, enhance, submitting } = superform;
 </script>
 
 {#if !worker}
@@ -66,114 +23,17 @@
     No serverless worker found with ID "{id}".
   </Alert>
 {:else}
-  <div class="flex flex-col gap-6">
-    <Card>
-      <h3 class="mb-4 text-base font-semibold">
-        {translate('workers.connection-details')}
-      </h3>
-      <div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
-        <div class="flex flex-col gap-1">
-          <span class="text-xs font-medium text-secondary"
-            >{translate('workers.name-label')}</span
-          >
-          <span class="text-sm text-primary">{worker.name}</span>
-        </div>
-        <div class="flex flex-col gap-1">
-          <span class="text-xs font-medium text-secondary"
-            >{translate('workers.region')}</span
-          >
-          <span class="text-sm text-primary">{worker.region}</span>
-        </div>
-        <div class="flex flex-col gap-1">
-          <span class="text-xs font-medium text-secondary"
-            >{translate('workers.lambda-arn')}</span
-          >
-          <span class="break-all font-mono text-sm text-primary"
-            >{worker.lambdaArn}</span
-          >
-        </div>
-        <div class="flex flex-col gap-1">
-          <span class="text-xs font-medium text-secondary"
-            >{translate('workers.iam-role-arn')}</span
-          >
-          <span class="break-all font-mono text-sm text-primary"
-            >{worker.iamRoleArn}</span
-          >
-        </div>
-        <div class="flex flex-col gap-1">
-          <span class="text-xs font-medium text-secondary"
-            >{translate('workers.task-queue')}</span
-          >
-          <span class="text-sm text-primary">{worker.taskQueue}</span>
-        </div>
-      </div>
-    </Card>
-
-    <form class="flex w-full flex-col gap-4 xl:w-2/3" use:enhance novalidate>
-      <h3 class="text-base font-semibold">
-        {translate('workers.advanced-config')}
-      </h3>
-      <Input
-        value={String($form.maxWorkers)}
-        on:input={(e) =>
-          ($form.maxWorkers = Number(
-            (e.currentTarget as HTMLInputElement).value,
-          ))}
-        id="maxWorkers"
-        name="maxWorkers"
-        label={translate('workers.max-workers-label')}
-        hintText={$errors.maxWorkers?.[0] ||
-          translate('workers.max-workers-hint')}
-        error={!!$errors.maxWorkers?.[0]}
-      />
-      <Input
-        value={String($form.maxConcurrentActivities)}
-        on:input={(e) =>
-          ($form.maxConcurrentActivities = Number(
-            (e.currentTarget as HTMLInputElement).value,
-          ))}
-        id="maxConcurrentActivities"
-        name="maxConcurrentActivities"
-        label={translate('workers.max-concurrent-label')}
-        hintText={$errors.maxConcurrentActivities?.[0] ||
-          translate('workers.max-concurrent-hint')}
-        error={!!$errors.maxConcurrentActivities?.[0]}
-      />
-      <Input
-        value={String($form.maxTaskQueueActivitiesPerSecond)}
-        on:input={(e) =>
-          ($form.maxTaskQueueActivitiesPerSecond = Number(
-            (e.currentTarget as HTMLInputElement).value,
-          ))}
-        id="maxRate"
-        name="maxRate"
-        label={translate('workers.max-rate-label')}
-        hintText={$errors.maxTaskQueueActivitiesPerSecond?.[0] ||
-          translate('workers.max-rate-hint')}
-        error={!!$errors.maxTaskQueueActivitiesPerSecond?.[0]}
-      />
-      <Input
-        value={String($form.idleTimeoutSeconds)}
-        on:input={(e) =>
-          ($form.idleTimeoutSeconds = Number(
-            (e.currentTarget as HTMLInputElement).value,
-          ))}
-        id="idleTimeout"
-        name="idleTimeout"
-        label={translate('workers.idle-timeout-label')}
-        hintText={$errors.idleTimeoutSeconds?.[0] ||
-          translate('workers.idle-timeout-hint')}
-        error={!!$errors.idleTimeoutSeconds?.[0]}
-      />
-
-      <div class="flex gap-4">
-        <Button type="submit" loading={$submitting}>
-          {translate('workers.save-changes')}
-        </Button>
-        <Button variant="ghost" on:click={() => goto(detailHref)}>
-          {translate('common.cancel')}
-        </Button>
-      </div>
-    </form>
-  </div>
+  <ServerlessWorkerForm
+    {namespace}
+    {worker}
+    submitButtonText={translate('workers.save-changes')}
+    cancelHref={detailHref}
+    onSubmit={(data) => {
+      updateServerlessWorker(
+        id,
+        data as unknown as ServerlessWorkerUpdateInput,
+      );
+      goto(detailHref);
+    }}
+  />
 {/if}
diff --git a/src/lib/pages/serverless-worker-form.svelte b/src/lib/pages/serverless-worker-form.svelte
new file mode 100644
index 0000000000..b8f1e6814c
--- /dev/null
+++ b/src/lib/pages/serverless-worker-form.svelte
@@ -0,0 +1,618 @@
+<script lang="ts">
+  import { writable } from 'svelte/store';
+
+  import { superForm } from 'sveltekit-superforms';
+  import { zodClient } from 'sveltekit-superforms/adapters';
+  import { z } from 'zod/v3';
+
+  import Accordion from '$lib/holocene/accordion/accordion.svelte';
+  import Alert from '$lib/holocene/alert.svelte';
+  import Button from '$lib/holocene/button.svelte';
+  import Card from '$lib/holocene/card.svelte';
+  import CodeBlock from '$lib/holocene/code-block.svelte';
+  import Combobox from '$lib/holocene/combobox/combobox.svelte';
+  import Icon from '$lib/holocene/icon/icon.svelte';
+  import Input from '$lib/holocene/input/input.svelte';
+  import Link from '$lib/holocene/link.svelte';
+  import RadioGroup from '$lib/holocene/radio-input/radio-group.svelte';
+  import RadioInput from '$lib/holocene/radio-input/radio-input.svelte';
+  import Tooltip from '$lib/holocene/tooltip.svelte';
+  import { translate } from '$lib/i18n/translate';
+  import {
+    validateIamRole,
+    validateLambdaArn,
+    validateRegion,
+    validateTaskQueue,
+  } from '$lib/services/serverless-worker-service';
+  import type { MockValidationResult } from '$lib/types/serverless-workers';
+  import type { ServerlessWorker } from '$lib/types/serverless-workers';
+
+  type Props = {
+    namespace: string;
+    onSubmit: (data: Record<string, unknown>) => void;
+    worker?: ServerlessWorker;
+    submitButtonText: string;
+    cancelHref: string;
+  };
+
+  let {
+    namespace: _namespace,
+    onSubmit,
+    worker,
+    submitButtonText,
+    cancelHref,
+  }: Props = $props();
+
+  const isEditMode = $derived(!!worker);
+
+  const createSchema = z.object({
+    name: z
+      .string()
+      .min(3, 'Name must be at least 3 characters')
+      .max(100)
+      .regex(
+        /^[a-z][a-z0-9-]*$/,
+        'Must be lowercase, alphanumeric with hyphens',
+      ),
+    lambdaArn: z
+      .string()
+      .min(1, 'Lambda ARN is required')
+      .regex(
+        /^arn:aws:lambda:[a-z0-9-]+:\d{12}:function:.+$/,
+        'Invalid Lambda ARN format',
+      ),
+    iamRoleArn: z
+      .string()
+      .min(1, 'IAM Role ARN is required')
+      .regex(/^arn:aws:iam::\d{12}:role\/.+$/, 'Invalid IAM Role ARN format'),
+    region: z.string().min(1, 'Region is required'),
+    taskQueue: z.string().min(1, 'Task queue is required'),
+    maxWorkers: z.number().min(1).max(100).default(10),
+    maxConcurrentActivities: z.number().min(1).max(50).default(5),
+    maxTaskQueueActivitiesPerSecond: z.number().min(1).max(10000).default(100),
+    idleTimeoutSeconds: z.number().min(30).max(3600).default(300),
+  });
+
+  const editSchema = z.object({
+    maxWorkers: z.number().min(1).max(100),
+    maxConcurrentActivities: z.number().min(1).max(50),
+    maxTaskQueueActivitiesPerSecond: z.number().min(1).max(10000),
+    idleTimeoutSeconds: z.number().min(30).max(3600),
+  });
+
+  const initialData = $derived(
+    isEditMode
+      ? {
+          maxWorkers: worker!.maxWorkers,
+          maxConcurrentActivities: worker!.maxConcurrentActivities,
+          maxTaskQueueActivitiesPerSecond:
+            worker!.maxTaskQueueActivitiesPerSecond,
+          idleTimeoutSeconds: worker!.idleTimeoutSeconds,
+        }
+      : {
+          name: '',
+          lambdaArn: '',
+          iamRoleArn: '',
+          region: '',
+          taskQueue: '',
+          maxWorkers: 10,
+          maxConcurrentActivities: 5,
+          maxTaskQueueActivitiesPerSecond: 100,
+          idleTimeoutSeconds: 300,
+        },
+  );
+
+  const superform = superForm(initialData, {
+    SPA: true,
+    validators: zodClient(isEditMode ? editSchema : createSchema),
+    resetForm: false,
+    dataType: 'json',
+    onUpdate: async ({ form }) => {
+      if (!form.valid) return;
+      onSubmit(form.data);
+    },
+  });
+
+  const { form, errors, enhance, submitting } = superform;
+
+  let lambdaValidation = $state<{
+    checking: boolean;
+    result?: MockValidationResult;
+  }>({ checking: false });
+  let iamValidation = $state<{
+    checking: boolean;
+    result?: MockValidationResult;
+  }>({ checking: false });
+  let regionValidation = $state<{
+    checking: boolean;
+    result?: MockValidationResult;
+  }>({ checking: false });
+  let taskQueueValidation = $state<{
+    checking: boolean;
+    result?: MockValidationResult;
+  }>({ checking: false });
+
+  async function checkLambdaArn() {
+    const arn = $form.lambdaArn;
+    if (!arn || !/^arn:aws:lambda:/.test(arn)) return;
+    lambdaValidation = { checking: true };
+    const result = await validateLambdaArn(arn);
+    lambdaValidation = { checking: false, result };
+  }
+
+  async function checkIamRole() {
+    const arn = $form.iamRoleArn;
+    if (!arn || !/^arn:aws:iam::/.test(arn)) return;
+    iamValidation = { checking: true };
+    const result = await validateIamRole(arn);
+    iamValidation = { checking: false, result };
+  }
+
+  async function checkRegion() {
+    const region = $form.region;
+    if (!region) return;
+    regionValidation = { checking: true };
+    const result = await validateRegion(region);
+    regionValidation = { checking: false, result };
+  }
+
+  async function checkTaskQueue() {
+    const name = $form.taskQueue;
+    if (!name) return;
+    taskQueueValidation = { checking: true };
+    const result = await validateTaskQueue(name);
+    taskQueueValidation = { checking: false, result };
+  }
+
+  const regions = [
+    { value: 'us-east-1', label: 'US East (N. Virginia) — us-east-1' },
+    { value: 'us-west-2', label: 'US West (Oregon) — us-west-2' },
+    { value: 'eu-west-1', label: 'EU (Ireland) — eu-west-1' },
+    {
+      value: 'ap-southeast-1',
+      label: 'Asia Pacific (Singapore) — ap-southeast-1',
+    },
+  ];
+
+  const provider = writable<string>('lambda');
+
+  let activeTab = $state('CloudFormation');
+
+  const cfnSnippet = `AWSTemplateFormatVersion: '2010-09-09'
+Resources:
+  TemporalWorkerRole:
+    Type: AWS::IAM::Role
+    Properties:
+      AssumeRolePolicyDocument:
+        Version: '2012-10-17'
+        Statement:
+          - Effect: Allow
+            Principal:
+              Service: temporal.io
+            Action: sts:AssumeRole
+      Policies:
+        - PolicyName: InvokeLambda
+          PolicyDocument:
+            Version: '2012-10-17'
+            Statement:
+              - Effect: Allow
+                Action: lambda:InvokeFunction
+                Resource: '*'`;
+
+  const terraformSnippet = `resource "aws_iam_role" "temporal_worker" {
+  name = "temporal-serverless-worker"
+  assume_role_policy = jsonencode({
+    Version = "2012-10-17"
+    Statement = [{
+      Effect = "Allow"
+      Principal = { Service = "temporal.io" }
+      Action = "sts:AssumeRole"
+    }]
+  })
+}
+
+resource "aws_iam_role_policy" "invoke_lambda" {
+  name = "invoke-lambda"
+  role = aws_iam_role.temporal_worker.id
+  policy = jsonencode({
+    Version = "2012-10-17"
+    Statement = [{
+      Effect   = "Allow"
+      Action   = "lambda:InvokeFunction"
+      Resource = "*"
+    }]
+  })
+}`;
+
+  const snippetContent = $derived(
+    activeTab === 'CloudFormation' ? cfnSnippet : terraformSnippet,
+  );
+  const snippetLanguage = 'text' as const;
+</script>
+
+{#if isEditMode}
+  <div class="flex flex-col gap-6">
+    <Card>
+      <h3 class="mb-4 text-base font-semibold">
+        {translate('workers.connection-details')}
+      </h3>
+      <div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
+        <div class="flex flex-col gap-1">
+          <span class="text-xs font-medium text-secondary"
+            >{translate('workers.name-label')}</span
+          >
+          <span class="text-sm text-primary">{worker!.name}</span>
+        </div>
+        <div class="flex flex-col gap-1">
+          <span class="text-xs font-medium text-secondary"
+            >{translate('workers.region')}</span
+          >
+          <span class="text-sm text-primary">{worker!.region}</span>
+        </div>
+        <div class="flex flex-col gap-1">
+          <span class="text-xs font-medium text-secondary"
+            >{translate('workers.lambda-arn')}</span
+          >
+          <span class="break-all font-mono text-sm text-primary"
+            >{worker!.lambdaArn}</span
+          >
+        </div>
+        <div class="flex flex-col gap-1">
+          <span class="text-xs font-medium text-secondary"
+            >{translate('workers.iam-role-arn')}</span
+          >
+          <span class="break-all font-mono text-sm text-primary"
+            >{worker!.iamRoleArn}</span
+          >
+        </div>
+        <div class="flex flex-col gap-1">
+          <span class="text-xs font-medium text-secondary"
+            >{translate('workers.task-queue')}</span
+          >
+          <span class="text-sm text-primary">{worker!.taskQueue}</span>
+        </div>
+      </div>
+    </Card>
+
+    <form class="flex w-full flex-col gap-4 xl:w-1/2" use:enhance novalidate>
+      <h3 class="text-base font-semibold">
+        {translate('workers.advanced-config')}
+      </h3>
+      <Input
+        value={String($form.maxWorkers)}
+        on:input={(e) =>
+          ($form.maxWorkers = Number(
+            (e.currentTarget as HTMLInputElement).value,
+          ))}
+        id="maxWorkers"
+        name="maxWorkers"
+        label={translate('workers.max-workers-label')}
+        hintText={$errors.maxWorkers?.[0] ||
+          translate('workers.max-workers-hint')}
+        error={!!$errors.maxWorkers?.[0]}
+      />
+      <Input
+        value={String($form.maxConcurrentActivities)}
+        on:input={(e) =>
+          ($form.maxConcurrentActivities = Number(
+            (e.currentTarget as HTMLInputElement).value,
+          ))}
+        id="maxConcurrentActivities"
+        name="maxConcurrentActivities"
+        label={translate('workers.max-concurrent-label')}
+        hintText={$errors.maxConcurrentActivities?.[0] ||
+          translate('workers.max-concurrent-hint')}
+        error={!!$errors.maxConcurrentActivities?.[0]}
+      />
+      <Input
+        value={String($form.maxTaskQueueActivitiesPerSecond)}
+        on:input={(e) =>
+          ($form.maxTaskQueueActivitiesPerSecond = Number(
+            (e.currentTarget as HTMLInputElement).value,
+          ))}
+        id="maxRate"
+        name="maxRate"
+        label={translate('workers.max-rate-label')}
+        hintText={$errors.maxTaskQueueActivitiesPerSecond?.[0] ||
+          translate('workers.max-rate-hint')}
+        error={!!$errors.maxTaskQueueActivitiesPerSecond?.[0]}
+      />
+      <Input
+        value={String($form.idleTimeoutSeconds)}
+        on:input={(e) =>
+          ($form.idleTimeoutSeconds = Number(
+            (e.currentTarget as HTMLInputElement).value,
+          ))}
+        id="idleTimeout"
+        name="idleTimeout"
+        label={translate('workers.idle-timeout-label')}
+        hintText={$errors.idleTimeoutSeconds?.[0] ||
+          translate('workers.idle-timeout-hint')}
+        error={!!$errors.idleTimeoutSeconds?.[0]}
+      />
+
+      <div class="flex gap-4">
+        <Button type="submit" loading={$submitting}>
+          {submitButtonText}
+        </Button>
+        <Button variant="ghost" href={cancelHref}>
+          {translate('common.cancel')}
+        </Button>
+      </div>
+    </form>
+  </div>
+{:else}
+  <div class="flex w-full flex-col gap-6 xl:w-1/2">
+    <div class="mb-4">
+      <h3 class="mb-2 text-base font-semibold">
+        {translate('workers.compute-provider')}
+      </h3>
+      <RadioGroup
+        name="provider"
+        group={provider}
+        description={translate('workers.compute-provider-description')}
+      >
+        <RadioInput
+          value="lambda"
+          id="provider-lambda"
+          label={translate('workers.provider-lambda')}
+          description={translate('workers.provider-lambda-description')}
+        />
+        <RadioInput
+          value="other"
+          id="provider-other"
+          label={translate('workers.provider-coming-soon')}
+          description={translate('workers.provider-coming-soon-description')}
+          disabled
+        />
+      </RadioGroup>
+    </div>
+
+    <Accordion
+      title={translate('workers.setup-guide-title')}
+      id="setup-guide"
+      open
+    >
+      <div class="flex flex-col gap-4 p-4">
+        <p class="text-sm text-secondary">
+          {translate('workers.setup-guide-intro')}
+        </p>
+        <div class="flex gap-4">
+          <Link href="https://console.aws.amazon.com/lambda" newTab>
+            {translate('workers.setup-guide-lambda-console')}
+          </Link>
+          <Link href="https://console.aws.amazon.com/iam" newTab>
+            {translate('workers.setup-guide-iam-console')}
+          </Link>
+        </div>
+        <p class="text-sm text-secondary">
+          {translate('workers.setup-guide-iam-note')}
+        </p>
+        <CodeBlock
+          tabs={['CloudFormation', 'Terraform']}
+          bind:activeTab
+          content={snippetContent}
+          language={snippetLanguage}
+          copyable
+          copyIconTitle="Copy snippet"
+          copySuccessIconTitle="Copied!"
+        />
+      </div>
+    </Accordion>
+
+    <form class="flex w-full flex-col gap-4" use:enhance novalidate>
+      <Input
+        bind:value={$form.name}
+        id="name"
+        name="name"
+        label={translate('workers.name-label')}
+        hintText={$errors.name?.[0] || translate('workers.name-hint')}
+        error={!!$errors.name?.[0]}
+        placeholder={translate('workers.name-placeholder')}
+        required
+      />
+
+      <div class="flex flex-col gap-1">
+        <div class="flex items-center gap-1">
+          <label for="lambdaArn" class="text-sm font-medium">
+            {translate('workers.lambda-arn-label')}
+          </label>
+          <Tooltip top text={translate('workers.lambda-arn-help')}>
+            <Icon name="circle-question" class="h-4 w-4 text-secondary" />
+          </Tooltip>
+        </div>
+        <Input
+          bind:value={$form.lambdaArn}
+          id="lambdaArn"
+          name="lambdaArn"
+          labelHidden
+          label={translate('workers.lambda-arn-label')}
+          hintText={$errors.lambdaArn?.[0] ||
+            translate('workers.lambda-arn-hint')}
+          error={!!$errors.lambdaArn?.[0]}
+          placeholder={translate('workers.lambda-arn-placeholder')}
+          required
+          on:blur={checkLambdaArn}
+        />
+        {#if lambdaValidation.checking}
+          <div class="flex items-center gap-2 text-xs text-secondary">
+            <Icon name="spinner" class="h-3 w-3 animate-spin" />
+            <span>{translate('workers.validation-checking-lambda')}</span>
+          </div>
+        {:else if lambdaValidation.result}
+          <Alert
+            intent={lambdaValidation.result.valid ? 'success' : 'error'}
+            title={lambdaValidation.result.message}
+          />
+        {/if}
+      </div>
+
+      <div class="flex flex-col gap-1">
+        <div class="flex items-center gap-1">
+          <label for="iamRoleArn" class="text-sm font-medium">
+            {translate('workers.iam-role-label')}
+          </label>
+          <Tooltip top text={translate('workers.iam-role-help')}>
+            <Icon name="circle-question" class="h-4 w-4 text-secondary" />
+          </Tooltip>
+        </div>
+        <Input
+          bind:value={$form.iamRoleArn}
+          id="iamRoleArn"
+          name="iamRoleArn"
+          labelHidden
+          label={translate('workers.iam-role-label')}
+          hintText={$errors.iamRoleArn?.[0] ||
+            translate('workers.iam-role-hint')}
+          error={!!$errors.iamRoleArn?.[0]}
+          placeholder={translate('workers.iam-role-placeholder')}
+          required
+          on:blur={checkIamRole}
+        />
+        {#if iamValidation.checking}
+          <div class="flex items-center gap-2 text-xs text-secondary">
+            <Icon name="spinner" class="h-3 w-3 animate-spin" />
+            <span>{translate('workers.validation-checking-iam')}</span>
+          </div>
+        {:else if iamValidation.result}
+          <Alert
+            intent={iamValidation.result.valid ? 'success' : 'error'}
+            title={iamValidation.result.message}
+          />
+        {/if}
+      </div>
+
+      <div class="flex flex-col gap-1">
+        <div class="flex items-center gap-1">
+          <label for="region" class="text-sm font-medium">
+            {translate('workers.region-label')}
+          </label>
+          <Tooltip top text={translate('workers.region-help')}>
+            <Icon name="circle-question" class="h-4 w-4 text-secondary" />
+          </Tooltip>
+        </div>
+        <Combobox
+          id="region"
+          label={translate('workers.region-label')}
+          labelHidden
+          placeholder="Search regions..."
+          noResultsText="No matching regions"
+          options={regions}
+          optionValueKey="value"
+          optionLabelKey="label"
+          bind:value={$form.region}
+          onchange={checkRegion}
+          required
+          error={$errors.region?.[0]}
+        />
+        {#if regionValidation.checking}
+          <div class="flex items-center gap-2 text-xs text-secondary">
+            <Icon name="spinner" class="h-3 w-3 animate-spin" />
+            <span>{translate('workers.validation-checking-region')}</span>
+          </div>
+        {:else if regionValidation.result}
+          <Alert
+            intent={regionValidation.result.valid ? 'success' : 'warning'}
+            title={regionValidation.result.message}
+          />
+        {/if}
+      </div>
+
+      <div class="flex flex-col gap-1">
+        <div class="flex items-center gap-1">
+          <label for="taskQueue" class="text-sm font-medium">
+            {translate('workers.task-queue-label')}
+          </label>
+          <Tooltip top text={translate('workers.task-queue-help')}>
+            <Icon name="circle-question" class="h-4 w-4 text-secondary" />
+          </Tooltip>
+        </div>
+        <Input
+          bind:value={$form.taskQueue}
+          id="taskQueue"
+          name="taskQueue"
+          labelHidden
+          label={translate('workers.task-queue-label')}
+          hintText={$errors.taskQueue?.[0] ||
+            translate('workers.task-queue-hint')}
+          error={!!$errors.taskQueue?.[0]}
+          placeholder={translate('workers.task-queue-placeholder')}
+          required
+          on:blur={checkTaskQueue}
+        />
+        {#if taskQueueValidation.checking}
+          <div class="flex items-center gap-2 text-xs text-secondary">
+            <Icon name="spinner" class="h-3 w-3 animate-spin" />
+            <span>{translate('workers.validation-checking-queue')}</span>
+          </div>
+        {:else if taskQueueValidation.result}
+          <Alert
+            intent={taskQueueValidation.result.valid ? 'success' : 'info'}
+            title={taskQueueValidation.result.message}
+          />
+        {/if}
+      </div>
+
+      <Accordion
+        title={translate('workers.advanced-config')}
+        id="advanced-config"
+      >
+        <div class="flex flex-col gap-4 p-4">
+          <Input
+            value={String($form.maxWorkers)}
+            on:input={(e) =>
+              ($form.maxWorkers = Number(
+                (e.currentTarget as HTMLInputElement).value,
+              ))}
+            id="maxWorkers"
+            name="maxWorkers"
+            label={translate('workers.max-workers-label')}
+            hintText={translate('workers.max-workers-hint')}
+          />
+          <Input
+            value={String($form.maxConcurrentActivities)}
+            on:input={(e) =>
+              ($form.maxConcurrentActivities = Number(
+                (e.currentTarget as HTMLInputElement).value,
+              ))}
+            id="maxConcurrentActivities"
+            name="maxConcurrentActivities"
+            label={translate('workers.max-concurrent-label')}
+            hintText={translate('workers.max-concurrent-hint')}
+          />
+          <Input
+            value={String($form.maxTaskQueueActivitiesPerSecond)}
+            on:input={(e) =>
+              ($form.maxTaskQueueActivitiesPerSecond = Number(
+                (e.currentTarget as HTMLInputElement).value,
+              ))}
+            id="maxRate"
+            name="maxRate"
+            label={translate('workers.max-rate-label')}
+            hintText={translate('workers.max-rate-hint')}
+          />
+          <Input
+            value={String($form.idleTimeoutSeconds)}
+            on:input={(e) =>
+              ($form.idleTimeoutSeconds = Number(
+                (e.currentTarget as HTMLInputElement).value,
+              ))}
+            id="idleTimeout"
+            name="idleTimeout"
+            label={translate('workers.idle-timeout-label')}
+            hintText={translate('workers.idle-timeout-hint')}
+          />
+        </div>
+      </Accordion>
+
+      <div class="flex gap-4">
+        <Button type="submit" loading={$submitting}>
+          {submitButtonText}
+        </Button>
+        <Button variant="ghost" href={cancelHref}>
+          {translate('common.cancel')}
+        </Button>
+      </div>
+    </form>
+  </div>
+{/if}
diff --git a/src/lib/services/serverless-worker-service.ts b/src/lib/services/serverless-worker-service.ts
index ca2ddb34a8..02f65b107d 100644
--- a/src/lib/services/serverless-worker-service.ts
+++ b/src/lib/services/serverless-worker-service.ts
@@ -141,7 +141,11 @@ export async function validateLambdaArn(
   if (MOCK_LAMBDA_ARNS.includes(arn)) {
     return { valid: true, message: 'Lambda function verified' };
   }
-  return { valid: false, message: 'Function not found' };
+  return {
+    valid: false,
+    message:
+      'Lambda function not found. Verify the ARN and ensure the function exists in the specified region.',
+  };
 }
 
 export async function validateIamRole(
@@ -154,7 +158,11 @@ export async function validateIamRole(
   if (MOCK_IAM_ROLE_ARNS.includes(arn)) {
     return { valid: true, message: 'Permissions verified' };
   }
-  return { valid: false, message: 'Missing permissions' };
+  return {
+    valid: false,
+    message:
+      'IAM role lacks required permissions. Ensure the role has a trust policy allowing Temporal to assume it.',
+  };
 }
 
 export async function validateRegion(
@@ -178,5 +186,9 @@ export async function validateTaskQueue(
   if (MOCK_TASK_QUEUES.includes(name)) {
     return { valid: true, message: 'Task queue found' };
   }
-  return { valid: false, message: 'Task queue not found' };
+  return {
+    valid: true,
+    message:
+      'This will create a new task queue. Serverless workers require a dedicated task queue.',
+  };
 }
diff --git a/src/routes/(app)/namespaces/[namespace]/worker-configuration/serverless/+page.svelte b/src/routes/(app)/namespaces/[namespace]/worker-configuration/serverless/+page.svelte
index 1dd45bbd7c..eb3b34a155 100644
--- a/src/routes/(app)/namespaces/[namespace]/worker-configuration/serverless/+page.svelte
+++ b/src/routes/(app)/namespaces/[namespace]/worker-configuration/serverless/+page.svelte
@@ -5,6 +5,7 @@
   import Button from '$lib/holocene/button.svelte';
   import EmptyState from '$lib/holocene/empty-state.svelte';
   import Icon from '$lib/holocene/icon/icon.svelte';
+  import Link from '$lib/holocene/link.svelte';
   import {
     Menu,
     MenuButton,
@@ -38,8 +39,30 @@
 </div>
 
 {#if workers.length === 0}
-  <EmptyState title={translate('workers.serverless-empty-state')}>
-    <p>{translate('workers.serverless-empty-state-description')}</p>
+  <EmptyState title={translate('workers.serverless-empty-title')}>
+    <div class="flex flex-col gap-4">
+      <p class="text-sm text-secondary">
+        {translate('workers.serverless-empty-description')}
+      </p>
+      <div>
+        <p class="mb-2 text-sm font-medium">
+          {translate('workers.serverless-empty-prereq-title')}
+        </p>
+        <ul class="list-inside list-disc text-sm text-secondary">
+          <li>{translate('workers.serverless-empty-prereq-lambda')}</li>
+          <li>{translate('workers.serverless-empty-prereq-iam')}</li>
+          <li>{translate('workers.serverless-empty-prereq-queue')}</li>
+        </ul>
+      </div>
+      <div class="flex gap-4">
+        <Button href={createHref}
+          >{translate('workers.create-serverless-worker')}</Button
+        >
+        <Link href="https://docs.temporal.io/serverless-workers" newTab>
+          {translate('workers.serverless-docs-link')}
+        </Link>
+      </div>
+    </div>
   </EmptyState>
 {:else}
   <table class="w-full">