From 6c80f738f562679b1d8ac74cbb7f3582450dc1df Mon Sep 17 00:00:00 2001
From: Ross Edfort <ross.edfort@temporal.io>
Date: Tue, 16 Dec 2025 11:51:06 -0700
Subject: [PATCH 1/3] WIP - start standalone activity

---
 .../payload-input-with-encoding.svelte        |  13 +-
 .../schedule/schedule-input-payload.svelte    |   9 +-
 .../standalone-activity-form/form.svelte      | 163 ++++++++++++++++++
 .../standalone-activity-form/types.ts         |  13 ++
 src/lib/holocene/icon/svg/activity.svelte     |   2 +-
 .../navigation/navigation-container.svelte    |   2 +-
 .../holocene/tab-buttons/tab-button.svelte    |   1 +
 src/lib/i18n/locales/en/activities.ts         |   2 +
 src/lib/models/payload-encoding.ts            |   7 +
 src/lib/pages/start-workflow.svelte           |   5 +-
 src/lib/services/standalone-activities.ts     |  17 ++
 src/lib/services/workflow-service.ts          |   4 +-
 src/lib/types/api.ts                          |  10 +-
 src/lib/utilities/route-for-api.ts            |   9 +
 src/lib/utilities/route-for.ts                |  12 ++
 src/routes/(app)/+layout.svelte               |  17 ++
 .../standalone-activities/+page.svelte        |  21 +++
 .../standalone-activities/start/+page.svelte  |  18 ++
 18 files changed, 303 insertions(+), 22 deletions(-)
 create mode 100644 src/lib/components/standalone-activity-form/form.svelte
 create mode 100644 src/lib/components/standalone-activity-form/types.ts
 create mode 100644 src/lib/models/payload-encoding.ts
 create mode 100644 src/lib/services/standalone-activities.ts
 create mode 100644 src/routes/(app)/namespaces/[namespace]/standalone-activities/+page.svelte
 create mode 100644 src/routes/(app)/namespaces/[namespace]/standalone-activities/start/+page.svelte

diff --git a/src/lib/components/payload-input-with-encoding.svelte b/src/lib/components/payload-input-with-encoding.svelte
index eb01dff1c7..26eddb5599 100644
--- a/src/lib/components/payload-input-with-encoding.svelte
+++ b/src/lib/components/payload-input-with-encoding.svelte
@@ -1,19 +1,12 @@
-<script context="module" lang="ts">
-  const encoding = ['json/plain', 'json/protobuf'] as const;
-  export type PayloadInputEncoding = (typeof encoding)[number];
-  export const isPayloadInputEncodingType = (
-    x: unknown,
-  ): x is PayloadInputEncoding => encoding.includes(x as PayloadInputEncoding);
-</script>
-
 <script lang="ts">
-  import { type Writable } from 'svelte/store';
+  import type { Writable } from 'svelte/store';
 
   import Card from '$lib/holocene/card.svelte';
   import Input from '$lib/holocene/input/input.svelte';
   import RadioGroup from '$lib/holocene/radio-input/radio-group.svelte';
   import RadioInput from '$lib/holocene/radio-input/radio-input.svelte';
   import { translate } from '$lib/i18n/translate';
+  import type { PayloadInputEncoding } from '$lib/models/payload-encoding';
 
   import PayloadInput from './payload-input.svelte';
 
@@ -44,7 +37,7 @@
         <div class="flex w-full flex-col gap-2">
           <RadioGroup
             description={translate('workflows.encoding')}
-            bind:group={encoding}
+            group={encoding}
             name="encoding"
           >
             <RadioInput id="json/plain" value="json/plain" label="json/plain" />
diff --git a/src/lib/components/schedule/schedule-input-payload.svelte b/src/lib/components/schedule/schedule-input-payload.svelte
index 3189d48636..81d994c335 100644
--- a/src/lib/components/schedule/schedule-input-payload.svelte
+++ b/src/lib/components/schedule/schedule-input-payload.svelte
@@ -3,15 +3,16 @@
 
   import Button from '$lib/holocene/button.svelte';
   import { translate } from '$lib/i18n/translate';
+  import {
+    isPayloadInputEncodingType,
+    type PayloadInputEncoding,
+  } from '$lib/models/payload-encoding';
   import type { Payloads } from '$lib/types';
   import { atob } from '$lib/utilities/atob';
   import { getSinglePayload } from '$lib/utilities/encode-payload';
 
   import PayloadDecoder from '../event/payload-decoder.svelte';
-  import PayloadInputWithEncoding, {
-    isPayloadInputEncodingType,
-    type PayloadInputEncoding,
-  } from '../payload-input-with-encoding.svelte';
+  import PayloadInputWithEncoding from '../payload-input-with-encoding.svelte';
 
   export let input: string;
   export let editInput: boolean;
diff --git a/src/lib/components/standalone-activity-form/form.svelte b/src/lib/components/standalone-activity-form/form.svelte
new file mode 100644
index 0000000000..250128238f
--- /dev/null
+++ b/src/lib/components/standalone-activity-form/form.svelte
@@ -0,0 +1,163 @@
+<script lang="ts">
+  import { writable } from 'svelte/store';
+
+  import { onDestroy } from 'svelte';
+  import { superForm } from 'sveltekit-superforms';
+  import { zodClient } from 'sveltekit-superforms/adapters';
+  import z from 'zod/v3';
+
+  import Button from '$lib/holocene/button.svelte';
+  import Card from '$lib/holocene/card.svelte';
+  import Input from '$lib/holocene/input/input.svelte';
+  import Label from '$lib/holocene/label.svelte';
+  import MarkdownEditor from '$lib/holocene/markdown-editor/markdown-editor.svelte';
+  import { translate } from '$lib/i18n/translate';
+  import {
+    encodings,
+    type PayloadInputEncoding,
+  } from '$lib/models/payload-encoding';
+  import { startStandaloneActivity } from '$lib/services/standalone-activities';
+
+  import PayloadInputWithEncoding from '../payload-input-with-encoding.svelte';
+  import AddSearchAttributes from '../workflow/add-search-attributes.svelte';
+
+  interface Props {
+    namespace: string;
+  }
+
+  const { namespace }: Props = $props();
+
+  const schema = z.object({
+    activityId: z.string(),
+    taskQueue: z.string(),
+    activityType: z.string(),
+    input: z.string(),
+    encoding: z.enum(encodings),
+    searchAttributes: z.array(
+      z.object({ label: z.string(), value: z.string(), type: z.string() }),
+    ),
+    summary: z.string(),
+    details: z.string(),
+  });
+
+  const { form, enhance } = superForm(
+    {
+      activityId: '',
+      taskQueue: '',
+      activityType: '',
+      input: '',
+      encoding: '',
+      searchAttributes: [],
+      summary: '',
+      details: '',
+    },
+    {
+      SPA: true,
+      dataType: 'json',
+      resetForm: false,
+      validators: zodClient(schema),
+      onUpdate: async ({ form }) => {
+        console.log(form);
+        if (!form.valid) return;
+
+        try {
+          startStandaloneActivity(form.data, namespace);
+        } catch (error) {
+          console.error(error);
+        }
+      },
+    },
+  );
+
+  const encoding = writable<PayloadInputEncoding>('json/plain');
+  let messageType = $state('');
+  let advancedOptionsVisible = $state(false);
+
+  const unsubscribe = encoding.subscribe((e) => {
+    $form.encoding = e;
+  });
+
+  onDestroy(() => {
+    unsubscribe?.();
+  });
+
+  const generateRandomId = () => {
+    $form.activityId = crypto.randomUUID();
+  };
+</script>
+
+<form class="flex max-w-[45rem] flex-col gap-4" use:enhance>
+  <div class="flex w-full items-end gap-2.5">
+    <Input
+      class="grow"
+      label="Activity ID"
+      required
+      id="activityId"
+      bind:value={$form.activityId}
+    />
+    <Button on:click={generateRandomId} leadingIcon="retry">Random UUID</Button>
+  </div>
+  <Input
+    id="taskQueue"
+    required
+    label="Task Queue"
+    bind:value={$form.taskQueue}
+  />
+  <Input
+    id="activityType"
+    required
+    label="Activity Type"
+    bind:value={$form.activityType}
+  />
+  <PayloadInputWithEncoding
+    bind:input={$form.input}
+    bind:messageType
+    {encoding}
+  />
+
+  {#if advancedOptionsVisible}
+    <Card class="space-y-4">
+      <div class="space-y-2">
+        <p class="text-base font-medium">Custom Search Attributes</p>
+        <p class="text-secondary">
+          Indexed fields used in a List Filter to filter a list of Standalone
+          Activities.
+        </p>
+      </div>
+      <AddSearchAttributes bind:attributesToAdd={$form.searchAttributes} />
+    </Card>
+
+    <Card class="space-y-4">
+      <div class="space-y-2">
+        <p class="text-base font-medium">User Metadata</p>
+        <p class="text-secondary">
+          Add context to Standalone Activities to help identify and understand
+          its operations.
+        </p>
+      </div>
+      <div class="space-y-2">
+        <Label label={translate('workflows.summary')} for="summary" />
+        <MarkdownEditor bind:content={$form.summary} />
+      </div>
+      <div class="space-y-2">
+        <Label label={translate('workflows.details')} for="details" />
+        <MarkdownEditor bind:content={$form.details} />
+      </div>
+    </Card>
+  {/if}
+
+  <div class="flex items-center justify-between">
+    <Button
+      type="button"
+      variant="ghost"
+      trailingIcon={advancedOptionsVisible ? 'chevron-up' : 'chevron-down'}
+      on:click={() => (advancedOptionsVisible = !advancedOptionsVisible)}
+    >
+      {translate('common.more-options')}
+    </Button>
+
+    <Button type="submit">
+      {translate('activities.start-standalone-activity')}
+    </Button>
+  </div>
+</form>
diff --git a/src/lib/components/standalone-activity-form/types.ts b/src/lib/components/standalone-activity-form/types.ts
new file mode 100644
index 0000000000..72b8012fe8
--- /dev/null
+++ b/src/lib/components/standalone-activity-form/types.ts
@@ -0,0 +1,13 @@
+import type { PayloadInputEncoding } from '$lib/models/payload-encoding';
+import type { SearchAttributeInput } from '$lib/stores/search-attributes';
+
+export interface StandaloneActivityFormData {
+  activityId: string;
+  taskQueue: string;
+  activityType: string;
+  input?: string;
+  encoding?: PayloadInputEncoding;
+  searchAttributes?: SearchAttributeInput[];
+  summary?: string;
+  details?: string;
+}
diff --git a/src/lib/holocene/icon/svg/activity.svelte b/src/lib/holocene/icon/svg/activity.svelte
index ac1a65d8e6..2007b665e6 100644
--- a/src/lib/holocene/icon/svg/activity.svelte
+++ b/src/lib/holocene/icon/svg/activity.svelte
@@ -5,7 +5,7 @@
 
 <Svg {...props}>
   <path
-    d="M11.0031 18.8625L12 20L12.9969 18.8625L19 12L12.9969 5.1375L12 4L11.0031 5.1375L5 12L11.0031 18.8625ZM12 17.7219L6.99375 12L12 6.27813L17.0063 12L12 17.7219Z"
+    d="M 10.454314,22.29375 11.949664,24 13.445014,22.29375 22.449664,12 13.445014,1.70625 11.949664,0 10.454314,1.70625 1.4496644,12 Z m 1.49535,-1.7109 L 4.4402894,12 11.949664,3.417195 19.459114,12 Z"
     fill="currentcolor"
   />
 </Svg>
diff --git a/src/lib/holocene/navigation/navigation-container.svelte b/src/lib/holocene/navigation/navigation-container.svelte
index 2f9e76dcc6..d12a476c7f 100644
--- a/src/lib/holocene/navigation/navigation-container.svelte
+++ b/src/lib/holocene/navigation/navigation-container.svelte
@@ -24,7 +24,7 @@
 
 <nav
   class={merge(
-    'group grid min-h-screen w-16 grid-cols-[2rem] grid-rows-[fit-content(1.5rem)] gap-2 border-r border-subtle px-4 py-5 transition-width data-[nav=open]:w-[180px] data-[nav=open]:grid-cols-[100%]',
+    'group grid min-h-screen w-16 grid-cols-[2rem] grid-rows-[fit-content(1.5rem)] gap-2 border-r border-subtle px-4 py-5 transition-width data-[nav=open]:w-auto data-[nav=open]:grid-cols-[100%]',
     'focus-visible:[&_[role=button]]:outline-none focus-visible:[&_[role=button]]:ring-2 focus-visible:[&_[role=button]]:ring-primary/70 focus-visible:[&_a]:outline-none focus-visible:[&_a]:ring-2 focus-visible:[&_a]:ring-primary/70',
     isCloud
       ? 'bg-gradient-to-b from-indigo-600 to-indigo-950 text-off-white focus-visible:[&_[role=button]]:outline-none focus-visible:[&_[role=button]]:ring-2 focus-visible:[&_[role=button]]:ring-success focus-visible:[&_a]:ring-success'
diff --git a/src/lib/holocene/tab-buttons/tab-button.svelte b/src/lib/holocene/tab-buttons/tab-button.svelte
index 26cd9ecc5c..dcb2efb1b6 100644
--- a/src/lib/holocene/tab-buttons/tab-button.svelte
+++ b/src/lib/holocene/tab-buttons/tab-button.svelte
@@ -60,6 +60,7 @@
   on:click
   role="button"
   tabindex="0"
+  type={href ? undefined : 'button'}
   {...$$restProps}
 >
   <Tooltip hide={!tooltip} text={tooltip} top>
diff --git a/src/lib/i18n/locales/en/activities.ts b/src/lib/i18n/locales/en/activities.ts
index 73c28b7a71..e4c3ed9300 100644
--- a/src/lib/i18n/locales/en/activities.ts
+++ b/src/lib/i18n/locales/en/activities.ts
@@ -16,4 +16,6 @@ export const Strings = {
   'unpause-all-activity-types': 'Unpause all {{type}} runs',
   'reset-heartbeat-details': 'Reset Heartbeat Details (optional)',
   'reset-success': 'Activity {{activityId}} has been reset successfully.',
+  'standalone-activities': 'Standalone Activities',
+  'start-standalone-activity': 'Start Standalone Activity',
 };
diff --git a/src/lib/models/payload-encoding.ts b/src/lib/models/payload-encoding.ts
new file mode 100644
index 0000000000..ab59f17c99
--- /dev/null
+++ b/src/lib/models/payload-encoding.ts
@@ -0,0 +1,7 @@
+export const encodings = ['json/plain', 'json/protobuf'] as const;
+
+export type PayloadInputEncoding = (typeof encodings)[number];
+
+export const isPayloadInputEncodingType = (
+  x: unknown,
+): x is PayloadInputEncoding => encodings.includes(x as PayloadInputEncoding);
diff --git a/src/lib/pages/start-workflow.svelte b/src/lib/pages/start-workflow.svelte
index 68fa4d939e..3e905b129c 100644
--- a/src/lib/pages/start-workflow.svelte
+++ b/src/lib/pages/start-workflow.svelte
@@ -6,9 +6,7 @@
   import { page } from '$app/stores';
 
   import CodecServerErrorBanner from '$lib/components/codec-server-error-banner.svelte';
-  import PayloadInputWithEncoding, {
-    type PayloadInputEncoding,
-  } from '$lib/components/payload-input-with-encoding.svelte';
+  import PayloadInputWithEncoding from '$lib/components/payload-input-with-encoding.svelte';
   import AddSearchAttributes from '$lib/components/workflow/add-search-attributes.svelte';
   import Alert from '$lib/holocene/alert.svelte';
   import Button from '$lib/holocene/button.svelte';
@@ -20,6 +18,7 @@
   import MarkdownEditor from '$lib/holocene/markdown-editor/markdown-editor.svelte';
   import Tooltip from '$lib/holocene/tooltip.svelte';
   import { translate } from '$lib/i18n/translate';
+  import type { PayloadInputEncoding } from '$lib/models/payload-encoding';
   import { getPollers } from '$lib/services/pollers-service';
   import {
     fetchInitialValuesForStartWorkflow,
diff --git a/src/lib/services/standalone-activities.ts b/src/lib/services/standalone-activities.ts
new file mode 100644
index 0000000000..4ce88bb26a
--- /dev/null
+++ b/src/lib/services/standalone-activities.ts
@@ -0,0 +1,17 @@
+import type { StandaloneActivityFormData } from '$lib/components/standalone-activity-form/types';
+import { stringifyWithBigInt } from '$lib/utilities/parse-with-big-int';
+import { requestFromAPI } from '$lib/utilities/request-from-api';
+import { routeForApi } from '$lib/utilities/route-for-api';
+
+export const startStandaloneActivity = (
+  activity: StandaloneActivityFormData,
+  namespace: string,
+) => {
+  const route = routeForApi('standalone-activities.start', {
+    namespace,
+    activityId: activity.activityId,
+  });
+  return requestFromAPI(route, {
+    options: { method: 'POST', body: stringifyWithBigInt(activity) },
+  });
+};
diff --git a/src/lib/services/workflow-service.ts b/src/lib/services/workflow-service.ts
index 85d6939512..9319808c98 100644
--- a/src/lib/services/workflow-service.ts
+++ b/src/lib/services/workflow-service.ts
@@ -2,11 +2,11 @@ import { get } from 'svelte/store';
 
 import { page } from '$app/stores';
 
+import { translate } from '$lib/i18n/translate';
 import {
   isPayloadInputEncodingType,
   type PayloadInputEncoding,
-} from '$lib/components/payload-input-with-encoding.svelte';
-import { translate } from '$lib/i18n/translate';
+} from '$lib/models/payload-encoding';
 import { Action } from '$lib/models/workflow-actions';
 import {
   toWorkflowExecution,
diff --git a/src/lib/types/api.ts b/src/lib/types/api.ts
index 480da8c8be..7cdd0f9800 100644
--- a/src/lib/types/api.ts
+++ b/src/lib/types/api.ts
@@ -54,6 +54,9 @@ export type NexusAPIRoutePath = 'nexus-endpoint' | 'nexus-endpoint.update';
 export type WorkerDeploymentsAPIRoutePath = 'worker-deployments';
 export type WorkerDeploymentAPIRoutePath = 'worker-deployment';
 export type WorkerDeploymentVersionAPIRoutePath = 'worker-deployment-version';
+export type StandaloneActivitiesAPIRoutePath =
+  | 'standalone-activities'
+  | 'standalone-activities.start';
 
 export type APIRoutePath =
   | ParameterlessAPIRoutePath
@@ -73,7 +76,8 @@ export type APIRoutePath =
   | NexusAPIRoutePath
   | WorkerDeploymentsAPIRoutePath
   | WorkerDeploymentAPIRoutePath
-  | WorkerDeploymentVersionAPIRoutePath;
+  | WorkerDeploymentVersionAPIRoutePath
+  | StandaloneActivitiesAPIRoutePath;
 
 export type APIRouteParameters = {
   namespace: string;
@@ -92,6 +96,10 @@ export type APIRouteParameters = {
   version: string;
 };
 
+export type StandaloneActivitiesParameters = Pick<
+  APIRouteParameters,
+  'namespace' | 'activityId'
+>;
 export type WorkflowListRouteParameters = Pick<APIRouteParameters, 'namespace'>;
 export type NamespaceRouteParameters = Pick<APIRouteParameters, 'namespace'>;
 export type ScheduleListRouteParameters = Pick<APIRouteParameters, 'namespace'>;
diff --git a/src/lib/utilities/route-for-api.ts b/src/lib/utilities/route-for-api.ts
index 0fc28685e1..30428de6fc 100644
--- a/src/lib/utilities/route-for-api.ts
+++ b/src/lib/utilities/route-for-api.ts
@@ -19,6 +19,8 @@ import type {
   SchedulesAPIRoutePath,
   SearchAttributesRouteParameters,
   SearchAttributesRoutePath,
+  StandaloneActivitiesAPIRoutePath,
+  StandaloneActivitiesParameters,
   TaskQueueAPIRoutePath,
   TaskQueueRouteParameters,
   WorkerAPIRoutePath,
@@ -170,11 +172,18 @@ export function pathForApi(
     'worker-deployments': `/namespaces/${parameters.namespace}/worker-deployments`,
     'worker-deployment': `/namespaces/${parameters.namespace}/worker-deployments/${parameters.deploymentName}`,
     'worker-deployment-version': `/namespaces/${parameters.namespace}/worker-deployment-versions/${parameters.version}`,
+    'standalone-activities': `/namespaces/${parameters.namespace}/standalone-activities`,
+    'standalone-activities.start': `/namespaces/${parameters.namespace}/activities/${parameters.activityId}`,
   };
 
   return getPath(routes[route]);
 }
 
+export function routeForApi(
+  route: StandaloneActivitiesAPIRoutePath,
+  parameters: StandaloneActivitiesParameters,
+  shouldEncode?: boolean,
+): string;
 export function routeForApi(
   route: WorkflowsAPIRoutePath,
   parameters: WorkflowListRouteParameters,
diff --git a/src/lib/utilities/route-for.ts b/src/lib/utilities/route-for.ts
index bcfd0c98ae..5d0789f8f1 100644
--- a/src/lib/utilities/route-for.ts
+++ b/src/lib/utilities/route-for.ts
@@ -94,6 +94,18 @@ export const routeForWorkflows = (parameters: NamespaceParameter): string => {
   return `${routeForNamespace(parameters)}/workflows`;
 };
 
+export const routeForStandaloneActivities = (
+  parameters: NamespaceParameter,
+): string => {
+  return `${routeForNamespace(parameters)}/standalone-activities`;
+};
+
+export const routeForStartStandaloneActivity = (
+  parameters: NamespaceParameter,
+): string => {
+  return `${routeForStandaloneActivities(parameters)}/start`;
+};
+
 type StartWorkflowParameters = NamespaceParameter &
   Partial<{
     workflowId: string;
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index fb0775468a..531ef522ee 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -32,6 +32,7 @@
     routeForNamespaces,
     routeForNexus,
     routeForSchedules,
+    routeForStandaloneActivities,
     routeForWorkerDeployments,
     routeForWorkflows,
   } from '$lib/utilities/route-for';
@@ -72,6 +73,7 @@
   const getRoutes = (namespace: string) => {
     return {
       workflowsRoute: routeForWorkflows({ namespace }),
+      standaloneActivitiesRoute: routeForStandaloneActivities({ namespace }),
       schedulesRoute: routeForSchedules({ namespace }),
       batchOperationsRoute: routeForBatchOperations({ namespace }),
       workerDeploymentsRoute: routeForWorkerDeployments({ namespace }),
@@ -85,6 +87,7 @@
   const getLinkList = (
     {
       workflowsRoute,
+      standaloneActivitiesRoute,
       schedulesRoute,
       batchOperationsRoute,
       workerDeploymentsRoute,
@@ -94,6 +97,7 @@
       historyImportRoute,
     }: {
       workflowsRoute: string;
+      standaloneActivitiesRoute: string;
       schedulesRoute: string;
       batchOperationsRoute: string;
       workerDeploymentsRoute: string;
@@ -115,6 +119,7 @@
           !path.includes(schedulesRoute) &&
           !path.includes(batchOperationsRoute) &&
           !path.includes(workerDeploymentsRoute) &&
+          !path.includes(standaloneActivitiesRoute) &&
           !path.includes(archivalRoute),
       },
       {
@@ -123,6 +128,12 @@
         label: translate('common.workflows'),
         isActive: (path) => path.includes(workflowsRoute),
       },
+      {
+        href: standaloneActivitiesRoute,
+        icon: 'activity',
+        label: translate('activities.standalone-activities'),
+        isActive: (path) => path.includes(standaloneActivitiesRoute),
+      },
       {
         href: schedulesRoute,
         icon: 'schedules',
@@ -184,6 +195,7 @@
     batchOperationsRoute,
     workerDeploymentsRoute,
     archivalRoute,
+    standaloneActivitiesRoute,
   } = $derived(routes);
   let showNamespacePicker = $derived(
     [
@@ -192,6 +204,7 @@
       workerDeploymentsRoute,
       batchOperationsRoute,
       archivalRoute,
+      standaloneActivitiesRoute,
     ].some((route) => page.url.href.includes(route)),
   );
 
@@ -205,6 +218,10 @@
         subPath: 'batch-operations',
         fullRoute: routeForBatchOperations({ namespace }),
       },
+      {
+        subPath: 'standalone-activities',
+        fullRoute: routeForStandaloneActivities({ namespace }),
+      },
       {
         subPath: 'worker-deployments',
         fullRoute: routeForWorkerDeployments({ namespace }),
diff --git a/src/routes/(app)/namespaces/[namespace]/standalone-activities/+page.svelte b/src/routes/(app)/namespaces/[namespace]/standalone-activities/+page.svelte
new file mode 100644
index 0000000000..7d44746c30
--- /dev/null
+++ b/src/routes/(app)/namespaces/[namespace]/standalone-activities/+page.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { page } from '$app/state';
+
+  import PageTitle from '$lib/components/page-title.svelte';
+  import Button from '$lib/holocene/button.svelte';
+  import { translate } from '$lib/i18n/translate';
+  import { routeForStartStandaloneActivity } from '$lib/utilities/route-for';
+
+  const namespace = $derived(page.params.namespace);
+</script>
+
+<PageTitle
+  title="{translate('activities.standalone-activities')} | {namespace}"
+  url={page.url.href}
+/>
+<div class="flex items-center justify-between">
+  <h1>{translate('activities.standalone-activities')}</h1>
+  <Button href={routeForStartStandaloneActivity({ namespace })}>
+    {translate('activities.start-standalone-activity')}
+  </Button>
+</div>
diff --git a/src/routes/(app)/namespaces/[namespace]/standalone-activities/start/+page.svelte b/src/routes/(app)/namespaces/[namespace]/standalone-activities/start/+page.svelte
new file mode 100644
index 0000000000..1877ef7980
--- /dev/null
+++ b/src/routes/(app)/namespaces/[namespace]/standalone-activities/start/+page.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { page } from '$app/state';
+
+  import PageTitle from '$lib/components/page-title.svelte';
+  import StandaloneActivityForm from '$lib/components/standalone-activity-form/form.svelte';
+  import { translate } from '$lib/i18n/translate';
+
+  const namespace = $derived(page.params.namespace);
+</script>
+
+<PageTitle
+  title="{translate('activities.start-standalone-activity')} | {namespace}"
+  url={page.url.href}
+/>
+
+<h1>{translate('activities.start-standalone-activity')}</h1>
+
+<StandaloneActivityForm {namespace} />

From a30990b8db7fa4318e0da824b261a458c68dd326 Mon Sep 17 00:00:00 2001
From: Ross Edfort <ross.edfort@temporal.io>
Date: Thu, 18 Dec 2025 13:16:52 -0700
Subject: [PATCH 2/3] change routes, add duration input, fix imports

---
 package.json                                  |   2 +-
 pnpm-lock.yaml                                |  16 +-
 .../schedule/schedule-form-view.svelte        |   3 +-
 .../standalone-activity-form/form.svelte      | 160 ++++++++++++++----
 .../standalone-activity-form/types.ts         |  10 +-
 .../signal-confirmation-modal.svelte          |   5 +-
 .../update-confirmation-modal.svelte          |   2 +-
 src/lib/holocene/card.svelte                  |  12 +-
 .../duration-input/duration-input.mdx         |  67 ++++++++
 .../duration-input.stories.svelte             |  51 ++++++
 .../duration-input/duration-input.svelte      | 133 +++++++++++++++
 src/lib/services/standalone-activities.ts     | 119 ++++++++++++-
 src/lib/types/api.ts                          |  10 +-
 src/lib/types/index.ts                        |   6 +
 src/lib/types/schedule.ts                     |   2 +-
 src/lib/utilities/encode-payload.ts           |   6 +-
 src/lib/utilities/route-for-api.ts            |   7 +
 src/lib/utilities/route-for.ts                |   2 +-
 .../+page.svelte                              |   5 +
 .../start/+page.svelte                        |   0
 20 files changed, 556 insertions(+), 62 deletions(-)
 create mode 100644 src/lib/holocene/duration-input/duration-input.mdx
 create mode 100644 src/lib/holocene/duration-input/duration-input.stories.svelte
 create mode 100644 src/lib/holocene/duration-input/duration-input.svelte
 rename src/routes/(app)/namespaces/[namespace]/{standalone-activities => activities}/+page.svelte (79%)
 rename src/routes/(app)/namespaces/[namespace]/{standalone-activities => activities}/start/+page.svelte (100%)

diff --git a/package.json b/package.json
index 8d49442398..1d90c65e71 100644
--- a/package.json
+++ b/package.json
@@ -130,7 +130,7 @@
     "@storybook/addon-essentials": "^8.6.11",
     "@storybook/addon-interactions": "^8.6.11",
     "@storybook/addon-links": "^8.6.11",
-    "@storybook/addon-svelte-csf": "^5.0.0-next.23",
+    "@storybook/addon-svelte-csf": "^5.0.10",
     "@storybook/addon-themes": "^8.6.11",
     "@storybook/blocks": "^8.6.11",
     "@storybook/icons": "^1.4.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1b3cd90b5e..68856918e8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -165,8 +165,8 @@ devDependencies:
     specifier: ^8.6.11
     version: 8.6.11(react@18.2.0)(storybook@8.6.11)
   '@storybook/addon-svelte-csf':
-    specifier: ^5.0.0-next.23
-    version: 5.0.0-next.27(@storybook/svelte@8.6.11)(@sveltejs/vite-plugin-svelte@5.0.3)(storybook@8.6.11)(svelte@5.25.5)(vite@6.4.1)
+    specifier: ^5.0.10
+    version: 5.0.10(@storybook/svelte@8.6.11)(@sveltejs/vite-plugin-svelte@5.0.3)(storybook@8.6.11)(svelte@5.25.5)(vite@6.4.1)
   '@storybook/addon-themes':
     specifier: ^8.6.11
     version: 8.6.11(storybook@8.6.11)
@@ -3442,14 +3442,14 @@ packages:
       ts-dedent: 2.2.0
     dev: true
 
-  /@storybook/addon-svelte-csf@5.0.0-next.27(@storybook/svelte@8.6.11)(@sveltejs/vite-plugin-svelte@5.0.3)(storybook@8.6.11)(svelte@5.25.5)(vite@6.4.1):
-    resolution: {integrity: sha512-iWEg084pWy2m9Z7jLDg+zXS8cjA2eRBrLe127KV9P1RYtyYzh45ALN72wVNoHmWzLNQl2CAh0ggTCKjMHHEjRg==}
+  /@storybook/addon-svelte-csf@5.0.10(@storybook/svelte@8.6.11)(@sveltejs/vite-plugin-svelte@5.0.3)(storybook@8.6.11)(svelte@5.25.5)(vite@6.4.1):
+    resolution: {integrity: sha512-poSvTS7VdaQ42ZoqW5e4+2Hv1iLO0mekH9fwn/QuBNse48R4WlTyR8XFbHRTfatl9gdc9ZYC4uWzazrmV6zGIA==}
     peerDependencies:
-      '@storybook/svelte': ^0.0.0-0 || ^8.2.0 || ^9.0.0-0
-      '@sveltejs/vite-plugin-svelte': ^4.0.0 || ^5.0.0
-      storybook: ^0.0.0-0 || ^8.2.0 || ^9.0.0-0
+      '@storybook/svelte': ^0.0.0-0 || ^8.2.0 || ^9.0.0 || ^9.1.0-0 || ^10.0.0-0
+      '@sveltejs/vite-plugin-svelte': ^4.0.0 || ^5.0.0 || ^6.0.0
+      storybook: ^0.0.0-0 || ^8.2.0 || ^9.0.0 || ^9.1.0-0 || ^10.0.0-0
       svelte: ^5.0.0
-      vite: ^5.0.0 || ^6.0.0
+      vite: ^5.0.0 || ^6.0.0 || ^7.0.0
     dependencies:
       '@storybook/csf': 0.1.13
       '@storybook/svelte': 8.6.11(storybook@8.6.11)(svelte@5.25.5)
diff --git a/src/lib/components/schedule/schedule-form-view.svelte b/src/lib/components/schedule/schedule-form-view.svelte
index e8b981f1aa..88ab6f1f08 100644
--- a/src/lib/components/schedule/schedule-form-view.svelte
+++ b/src/lib/components/schedule/schedule-form-view.svelte
@@ -14,6 +14,7 @@
   import Link from '$lib/holocene/link.svelte';
   import Loading from '$lib/holocene/loading.svelte';
   import { translate } from '$lib/i18n/translate';
+  import type { PayloadInputEncoding } from '$lib/models/payload-encoding';
   import { error, loading } from '$lib/stores/schedules';
   import {
     customSearchAttributes,
@@ -31,8 +32,6 @@
   } from '$lib/utilities/route-for';
   import { writeActionsAreAllowed } from '$lib/utilities/write-actions-are-allowed';
 
-  import type { PayloadInputEncoding } from '../payload-input-with-encoding.svelte';
-
   import ScheduleInputPayload from './schedule-input-payload.svelte';
   import SchedulesSearchAttributesInputs from './schedules-search-attributes-inputs.svelte';
 
diff --git a/src/lib/components/standalone-activity-form/form.svelte b/src/lib/components/standalone-activity-form/form.svelte
index 250128238f..6b6550d5aa 100644
--- a/src/lib/components/standalone-activity-form/form.svelte
+++ b/src/lib/components/standalone-activity-form/form.svelte
@@ -4,10 +4,12 @@
   import { onDestroy } from 'svelte';
   import { superForm } from 'sveltekit-superforms';
   import { zodClient } from 'sveltekit-superforms/adapters';
+  import { twMerge } from 'tailwind-merge';
   import z from 'zod/v3';
 
   import Button from '$lib/holocene/button.svelte';
   import Card from '$lib/holocene/card.svelte';
+  import DurationInput from '$lib/holocene/duration-input/duration-input.svelte';
   import Input from '$lib/holocene/input/input.svelte';
   import Label from '$lib/holocene/label.svelte';
   import MarkdownEditor from '$lib/holocene/markdown-editor/markdown-editor.svelte';
@@ -17,7 +19,9 @@
     type PayloadInputEncoding,
   } from '$lib/models/payload-encoding';
   import { startStandaloneActivity } from '$lib/services/standalone-activities';
+  import { getIdentity } from '$lib/utilities/core-context';
 
+  import Message from '../form/message.svelte';
   import PayloadInputWithEncoding from '../payload-input-with-encoding.svelte';
   import AddSearchAttributes from '../workflow/add-search-attributes.svelte';
 
@@ -27,29 +31,66 @@
 
   const { namespace }: Props = $props();
 
-  const schema = z.object({
-    activityId: z.string(),
-    taskQueue: z.string(),
-    activityType: z.string(),
-    input: z.string(),
-    encoding: z.enum(encodings),
-    searchAttributes: z.array(
-      z.object({ label: z.string(), value: z.string(), type: z.string() }),
-    ),
-    summary: z.string(),
-    details: z.string(),
-  });
+  const schema = z
+    .object({
+      identity: z.string(),
+      namespace: z.string(),
+      id: z.string().min(1, { message: 'Activity ID is required.' }),
+      taskQueue: z.string().min(1, { message: 'Task Queue is required.' }),
+      type: z.string().min(1, { message: 'Activity Type is required.' }),
+      input: z.string().optional(),
+      startToCloseTimeout: z.string().optional(),
+      scheduleToCloseTimeout: z.string().optional(),
+      encoding: z.enum(encodings).optional(),
+      messageType: z.string().optional(),
+      searchAttributes: z
+        .array(
+          z.object({ label: z.string(), value: z.string(), type: z.string() }),
+        )
+        .optional(),
+      summary: z.string().optional(),
+      details: z.string().optional(),
+      scheduleToStartTimeout: z.string().optional(),
+      heartbeatTimeout: z.number().optional(),
+      retryPolicy: z
+        .object({
+          stuff: z.string(),
+        })
+        .optional(),
+    })
+    .superRefine((data, context) => {
+      if (!data.startToCloseTimeout && !data.scheduleToCloseTimeout) {
+        context.addIssue({
+          code: z.ZodIssueCode.custom,
+          path: ['startToCloseTimeout'],
+          message:
+            'Either "Start to Close Timeout" or "Schedule to Close Timeout" is required.',
+        });
+        context.addIssue({
+          code: z.ZodIssueCode.custom,
+          path: ['scheduleToCloseTimeout'],
+          message:
+            'Either "Start to Close Timeout" or "Schedule to Close Timeout" is required.',
+        });
+      }
+    });
 
-  const { form, enhance } = superForm(
+  const { form, enhance, errors, message } = superForm(
     {
-      activityId: '',
+      identity: getIdentity(),
+      namespace,
+      id: '',
       taskQueue: '',
-      activityType: '',
+      type: '',
       input: '',
       encoding: '',
+      messageType: '',
+      startToCloseTimeout: '',
+      scheduleToCloseTimeout: '',
       searchAttributes: [],
       summary: '',
       details: '',
+      scheduleToStartTimeout: '',
     },
     {
       SPA: true,
@@ -57,20 +98,22 @@
       resetForm: false,
       validators: zodClient(schema),
       onUpdate: async ({ form }) => {
-        console.log(form);
         if (!form.valid) return;
 
         try {
-          startStandaloneActivity(form.data, namespace);
+          startStandaloneActivity(form.data);
+          return { type: 'success' };
         } catch (error) {
           console.error(error);
+          return {
+            type: 'error',
+          };
         }
       },
     },
   );
 
   const encoding = writable<PayloadInputEncoding>('json/plain');
-  let messageType = $state('');
   let advancedOptionsVisible = $state(false);
 
   const unsubscribe = encoding.subscribe((e) => {
@@ -82,39 +125,92 @@
   });
 
   const generateRandomId = () => {
-    $form.activityId = crypto.randomUUID();
+    $form.id = crypto.randomUUID();
   };
 </script>
 
-<form class="flex max-w-[45rem] flex-col gap-4" use:enhance>
-  <div class="flex w-full items-end gap-2.5">
-    <Input
-      class="grow"
-      label="Activity ID"
-      required
-      id="activityId"
-      bind:value={$form.activityId}
-    />
-    <Button on:click={generateRandomId} leadingIcon="retry">Random UUID</Button>
-  </div>
+<form class="max-w-[45rem] space-y-4" use:enhance novalidate>
+  <Message value={$message} />
+
+  <Input
+    class="grow"
+    label="Activity ID"
+    required
+    id="activityId"
+    bind:value={$form.id}
+    error={!!$errors?.id}
+    hintText={$errors?.id?.[0]}
+  >
+    <Button
+      class="ml-2.5"
+      variant="secondary"
+      slot="after-input"
+      on:click={generateRandomId}
+      leadingIcon="retry">Random UUID</Button
+    >
+  </Input>
+
   <Input
     id="taskQueue"
     required
     label="Task Queue"
     bind:value={$form.taskQueue}
+    error={!!$errors.taskQueue}
+    hintText={$errors.taskQueue?.[0]}
   />
   <Input
     id="activityType"
     required
     label="Activity Type"
-    bind:value={$form.activityType}
+    bind:value={$form.type}
+    error={!!$errors.type}
+    hintText={$errors.type?.[0]}
   />
+
   <PayloadInputWithEncoding
     bind:input={$form.input}
-    bind:messageType
+    bind:messageType={$form.messageType}
     {encoding}
   />
 
+  <Card
+    class={twMerge(
+      'space-y-4',
+      $errors.startToCloseTimeout ? 'border-danger' : '',
+    )}
+  >
+    <p class="text-base font-medium">Activity Timeouts</p>
+
+    <DurationInput
+      id="startToCloseTimeout"
+      label="Start to Close Timeout"
+      required={!$form.scheduleToCloseTimeout}
+      hintText="Maximum time an activity is allowed to execute after being picked up by a worker."
+      bind:value={$form.startToCloseTimeout}
+    />
+
+    <DurationInput
+      id="scheduleToCloseTimeout"
+      label="Schedule to Close Timeout"
+      required={!$form.startToCloseTimeout}
+      hintText="How long the caller is willing to wait for an activity completion."
+      bind:value={$form.scheduleToCloseTimeout}
+    />
+
+    <DurationInput
+      id="scheduleToStartTimeout"
+      label="Schedule to Start Timeout"
+      hintText={'Limits time an activity task can stay in a task queue before a worker picks it up. Defaults to "Schedule to Close Timeout" if not specified.'}
+      bind:value={$form.scheduleToStartTimeout}
+    />
+
+    {#if $errors.startToCloseTimeout}
+      <p class="text-xs text-danger">
+        {$errors.startToCloseTimeout}
+      </p>
+    {/if}
+  </Card>
+
   {#if advancedOptionsVisible}
     <Card class="space-y-4">
       <div class="space-y-2">
diff --git a/src/lib/components/standalone-activity-form/types.ts b/src/lib/components/standalone-activity-form/types.ts
index 72b8012fe8..479df0bee4 100644
--- a/src/lib/components/standalone-activity-form/types.ts
+++ b/src/lib/components/standalone-activity-form/types.ts
@@ -2,11 +2,17 @@ import type { PayloadInputEncoding } from '$lib/models/payload-encoding';
 import type { SearchAttributeInput } from '$lib/stores/search-attributes';
 
 export interface StandaloneActivityFormData {
-  activityId: string;
+  identity: string;
+  namespace: string;
+  id: string;
   taskQueue: string;
-  activityType: string;
+  type: string;
+  startToCloseTimeout: string;
+  scheduleToCloseTimeout: string;
+  scheduleToStartTimeout: string;
   input?: string;
   encoding?: PayloadInputEncoding;
+  messageType?: string;
   searchAttributes?: SearchAttributeInput[];
   summary?: string;
   details?: string;
diff --git a/src/lib/components/workflow/client-actions/signal-confirmation-modal.svelte b/src/lib/components/workflow/client-actions/signal-confirmation-modal.svelte
index 0b20a29aeb..dd626c0cda 100644
--- a/src/lib/components/workflow/client-actions/signal-confirmation-modal.svelte
+++ b/src/lib/components/workflow/client-actions/signal-confirmation-modal.svelte
@@ -1,14 +1,13 @@
 <script lang="ts">
   import { writable, type Writable } from 'svelte/store';
 
-  import PayloadInputWithEncoding, {
-    type PayloadInputEncoding,
-  } from '$lib/components/payload-input-with-encoding.svelte';
+  import PayloadInputWithEncoding from '$lib/components/payload-input-with-encoding.svelte';
   import Input from '$lib/holocene/input/input.svelte';
   import Modal from '$lib/holocene/modal.svelte';
   import Option from '$lib/holocene/select/option.svelte';
   import Select from '$lib/holocene/select/select.svelte';
   import { translate } from '$lib/i18n/translate';
+  import type { PayloadInputEncoding } from '$lib/models/payload-encoding';
   import { signalWorkflow } from '$lib/services/workflow-service';
   import { toaster } from '$lib/stores/toaster';
   import { workflowRun } from '$lib/stores/workflow-run';
diff --git a/src/lib/components/workflow/client-actions/update-confirmation-modal.svelte b/src/lib/components/workflow/client-actions/update-confirmation-modal.svelte
index 1d1371ba6e..ef4a92aa95 100644
--- a/src/lib/components/workflow/client-actions/update-confirmation-modal.svelte
+++ b/src/lib/components/workflow/client-actions/update-confirmation-modal.svelte
@@ -4,7 +4,6 @@
   import { page } from '$app/stores';
 
   import PayloadDecoder from '$lib/components/event/payload-decoder.svelte';
-  import { type PayloadInputEncoding } from '$lib/components/payload-input-with-encoding.svelte';
   import PayloadInput from '$lib/components/payload-input.svelte';
   import Alert from '$lib/holocene/alert.svelte';
   import Button from '$lib/holocene/button.svelte';
@@ -14,6 +13,7 @@
   import Option from '$lib/holocene/select/option.svelte';
   import Select from '$lib/holocene/select/select.svelte';
   import { translate } from '$lib/i18n/translate';
+  import { type PayloadInputEncoding } from '$lib/models/payload-encoding';
   import { updateWorkflow } from '$lib/services/workflow-service';
   import { toaster } from '$lib/stores/toaster';
   import { workflowRun } from '$lib/stores/workflow-run';
diff --git a/src/lib/holocene/card.svelte b/src/lib/holocene/card.svelte
index 8587194818..aabd84220f 100644
--- a/src/lib/holocene/card.svelte
+++ b/src/lib/holocene/card.svelte
@@ -1,13 +1,23 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
+  import { twMerge } from 'tailwind-merge';
 
   type Props = {
     class?: string;
     children?: Snippet;
   };
+
   let { class: className = '', children }: Props = $props();
 </script>
 
-<div class="surface-primary border border-subtle p-4 {className}">
+<div
+  class={twMerge(
+    'surface-primary',
+    'border',
+    'border-subtle',
+    'p-4',
+    className,
+  )}
+>
   {@render children?.()}
 </div>
diff --git a/src/lib/holocene/duration-input/duration-input.mdx b/src/lib/holocene/duration-input/duration-input.mdx
new file mode 100644
index 0000000000..9630cb4d1b
--- /dev/null
+++ b/src/lib/holocene/duration-input/duration-input.mdx
@@ -0,0 +1,67 @@
+import { Meta } from '@storybook/blocks';
+
+import DurationInput from './duration-input.stories.svelte';
+
+<Meta of={DurationInput} />
+
+# Duration Input
+
+`<DurationInput />` allows specifying a Duration in seconds (eg: `"10s"`) while allowing input in varying units.
+
+By default, `<DurationInput />` includes the following Unit options:
+
+- millisecond(s)
+- second(s)
+- minute(s)
+- hour(s)
+
+When entering a value with "millisecond(s)" selected, the value will be converted to a `Duration`, eg. `1000` will be converted to `"1s"`.
+
+An array of custom `Units` can be passed if more options are needed. A `Unit` is described by a `label`, and a `convert` function, with the type signature: `(n: number) => number`. The job of the `convert` function is to convert the value in the selected unit to seconds.
+
+```svelte
+<script lang="ts">
+  import DurationInput, { type Units } from '$lib/holocene/duration-input/duration-input.svelte';
+
+  const customUnits: Units<'day(s)' | 'week(s)'> = [
+    { label: 'day(s)', convert: (n) => (n * 60 * 60 * 24) },
+    { label: 'week(s)', convert: (n) => (n * 60 * 60 * 24 * 7) }
+  ];
+
+  let duration = $state('');
+</script>
+
+
+<DurationInput
+  label="Duration"
+  id="duration"
+  bind:value={duration}
+  units={customUnits}
+  initialUnit="day(s)"
+/>
+```
+
+The `<DurationInput />` Props interface is generic, such that the type of the `initialUnit` prop can be inferred based on the array of `Units` passed in:
+
+
+```svelte
+<script lang="ts">
+  import DurationInput, { type Units } from '$lib/holocene/duration-input/duration-input.svelte';
+
+  const customUnits: Units<'day(s)' | 'week(s)'> = [
+    { label: 'day(s)', convert: (n) => (n * 60 * 60 * 24) },
+    { label: 'week(s)', convert: (n) => (n * 60 * 60 * 24 * 7) }
+  ];
+
+  let duration = $state('');
+</script>
+
+
+<DurationInput
+  label="Duration"
+  id="duration"
+  bind:value={duration}
+  units={customUnits}
+  initialUnit="second(s)" <!-- will error because "second(s)" is not included in customUnits -->
+/>
+```
diff --git a/src/lib/holocene/duration-input/duration-input.stories.svelte b/src/lib/holocene/duration-input/duration-input.stories.svelte
new file mode 100644
index 0000000000..6b44a4be99
--- /dev/null
+++ b/src/lib/holocene/duration-input/duration-input.stories.svelte
@@ -0,0 +1,51 @@
+<script lang="ts" module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import type { ComponentProps } from 'svelte';
+
+  import DurationInput from './duration-input.svelte';
+
+  export { template };
+
+  const { Story } = defineMeta({
+    title: 'Duration Input',
+    component: DurationInput,
+    render: template,
+    argTypes: {
+      value: { control: false },
+      units: { control: false },
+      initialUnit: { control: false },
+    },
+    args: {
+      value: '',
+      id: 'duration-input',
+      label: 'Duration',
+      required: false,
+    },
+  });
+
+  type Args = ComponentProps<
+    DurationInput<string, { label: string; convert: (n: number) => number }[]>
+  >;
+</script>
+
+{#snippet template(args: Args)}
+  <DurationInput
+    {...args}
+    bind:value={args.value}
+    hintText="Value: {args.value}"
+  />
+{/snippet}
+
+<Story name="With default units" />
+
+<Story
+  name="With custom units"
+  args={{
+    units: [
+      { label: 'Nanosecond(s)', convert: (n) => n / Math.pow(10, 9) },
+      { label: 'Day(s)', convert: (n) => n * 86400 },
+      { label: 'Week(s)', convert: (n) => n * 604800 },
+    ],
+    initialUnit: 'Day(s)',
+  }}
+/>
diff --git a/src/lib/holocene/duration-input/duration-input.svelte b/src/lib/holocene/duration-input/duration-input.svelte
new file mode 100644
index 0000000000..f6f029c5ff
--- /dev/null
+++ b/src/lib/holocene/duration-input/duration-input.svelte
@@ -0,0 +1,133 @@
+<script lang="ts" module>
+  export type Unit<K extends string> = {
+    label: K;
+    convert: (n: number) => number;
+  };
+
+  export type Units<T extends string> = Unit<T>[];
+
+  export const MILLISECONDS: Unit<'millisecond(s)'> = {
+    label: 'millisecond(s)',
+    convert: (n) => n / 1000,
+  };
+
+  export const SECONDS: Unit<'second(s)'> = {
+    label: 'second(s)',
+    convert: (n) => n,
+  };
+
+  export const MINUTES: Unit<'minute(s)'> = {
+    label: 'minute(s)',
+    convert: (n) => n * 60,
+  };
+
+  export const HOURS: Unit<'hour(s)'> = {
+    label: 'hour(s)',
+    convert: (n) => n * 60 * 60,
+  };
+
+  export type DefaultUnits =
+    | 'millisecond(s)'
+    | 'second(s)'
+    | 'minute(s)'
+    | 'hour(s)';
+
+  export const DEFAULT_UNITS: Units<DefaultUnits> = [
+    MILLISECONDS,
+    SECONDS,
+    MINUTES,
+    HOURS,
+  ];
+
+  type ExtractLabel<T> = T extends { label: infer K }[] ? K : never;
+</script>
+
+<script lang="ts">
+  import type { ChangeEventHandler } from 'svelte/elements';
+
+  import { type ClassNameValue, twMerge } from 'tailwind-merge';
+
+  import Label from '../label.svelte';
+
+  type K = $$Generic<string>;
+  type T = $$Generic<Units<K>>;
+
+  interface BaseProps {
+    value: string;
+    label: string;
+    id: string;
+    required?: boolean;
+    hintText?: string;
+    class?: ClassNameValue;
+  }
+
+  interface PropsWithoutCustomUnits extends BaseProps {
+    units?: never;
+    initialUnit?: never;
+  }
+
+  interface PropsWithCustomUnits extends BaseProps {
+    units: T;
+    initialUnit: ExtractLabel<T>;
+  }
+
+  type Props = PropsWithoutCustomUnits | PropsWithCustomUnits;
+
+  let {
+    label,
+    id,
+    hintText,
+    units = DEFAULT_UNITS as T,
+    initialUnit = 'second(s)' as ExtractLabel<T>,
+    required = false,
+    value = $bindable(),
+    class: className = '',
+  }: Props = $props();
+
+  let rawValue: string = $state('');
+  let unit = $state(initialUnit);
+
+  const convert = (durationValue: string, durationUnit: string) => {
+    const unit = units.find((u) => u.label === durationUnit);
+
+    if (unit) {
+      value = `${unit.convert(Number(durationValue))}s`;
+    }
+  };
+
+  const handleNumberInput: ChangeEventHandler<HTMLInputElement> = (e) => {
+    convert(e.currentTarget.value, unit);
+  };
+
+  const handleUnitChange: ChangeEventHandler<HTMLSelectElement> = (e) => {
+    convert(rawValue, e.currentTarget.value);
+  };
+</script>
+
+<div class={twMerge('flex flex-col gap-1', className)}>
+  <Label {required} {label} for={id} />
+  <div
+    class="flex h-10 items-center border border-subtle focus-within:ring-2 focus-within:ring-brand/50"
+  >
+    <input
+      {id}
+      class="flex h-full grow border-r border-subtle p-2 focus-visible:outline-none"
+      type="number"
+      bind:value={rawValue}
+      oninput={handleNumberInput}
+    />
+    <select
+      id="{id}-unit-select"
+      class="surface-secondary h-full pl-2 focus-visible:outline-none"
+      bind:value={unit}
+      onchange={handleUnitChange}
+    >
+      {#each units as unit}
+        <option value={unit.label}>{unit.label}</option>
+      {/each}
+    </select>
+  </div>
+  {#if hintText}
+    <p class="text-xs text-secondary">{hintText}</p>
+  {/if}
+</div>
diff --git a/src/lib/services/standalone-activities.ts b/src/lib/services/standalone-activities.ts
index 4ce88bb26a..8ea9ab3554 100644
--- a/src/lib/services/standalone-activities.ts
+++ b/src/lib/services/standalone-activities.ts
@@ -1,17 +1,128 @@
 import type { StandaloneActivityFormData } from '$lib/components/standalone-activity-form/types';
+import type {
+  ActivityType,
+  Payload,
+  Payloads,
+  TaskQueue,
+  UserMetadata,
+} from '$lib/types';
+import { encodePayloads } from '$lib/utilities/encode-payload';
 import { stringifyWithBigInt } from '$lib/utilities/parse-with-big-int';
 import { requestFromAPI } from '$lib/utilities/request-from-api';
 import { routeForApi } from '$lib/utilities/route-for-api';
 
-export const startStandaloneActivity = (
+// TODO: Use @temporalio/proto once updated
+type StartActivityExecutionRequest = {
+  namespace: string;
+  identity: string;
+  requestId: string;
+  activityId: string;
+  activityType: ActivityType;
+  taskQueue: TaskQueue;
+  startToCloseTimeout: string;
+  scheduleToCloseTimeout: string;
+  scheduleToStartTimeout: string;
+  input?: Payloads;
+  userMetadata?: UserMetadata;
+};
+
+const toStartActivityExecutionRequest = async (
+  activityFormData: StandaloneActivityFormData,
+): Promise<StartActivityExecutionRequest> => {
+  let inputPayloads: Payload[] | null = null;
+  let summaryPayload: Payload | null = null;
+  let detailsPayload: Payload | null = null;
+
+  if (activityFormData.input) {
+    const { input, encoding, messageType } = activityFormData;
+    try {
+      inputPayloads = await encodePayloads({ input, encoding, messageType });
+    } catch {
+      throw new Error('Could not encode input for starting activity execution');
+    }
+  }
+
+  if (activityFormData.summary) {
+    try {
+      const payloads = await encodePayloads({
+        input: stringifyWithBigInt(activityFormData.summary),
+        encoding: 'json/plain',
+      });
+
+      if (payloads && payloads[0]) {
+        summaryPayload = payloads[0];
+      }
+    } catch {
+      throw new Error(
+        'Could not encode summary for starting activity execution',
+      );
+    }
+  }
+
+  if (activityFormData.details) {
+    try {
+      const payloads = await encodePayloads({
+        input: stringifyWithBigInt(activityFormData.details),
+        encoding: 'json/plain',
+      });
+
+      if (payloads && payloads[0]) {
+        detailsPayload = payloads[0];
+      }
+    } catch {
+      throw new Error(
+        'Could not encode details for starting activity execution',
+      );
+    }
+  }
+
+  return {
+    identity: activityFormData.identity,
+    namespace: activityFormData.namespace,
+    activityId: activityFormData.id,
+    requestId: crypto.randomUUID(),
+    activityType: { name: activityFormData.type },
+    taskQueue: { name: activityFormData.taskQueue },
+    input: { payloads: inputPayloads },
+    userMetadata: {
+      summary: summaryPayload,
+      details: detailsPayload,
+    },
+    ...(activityFormData.startToCloseTimeout && {
+      startToCloseTimeout: activityFormData.startToCloseTimeout,
+    }),
+    ...(activityFormData.scheduleToCloseTimeout && {
+      scheduleToCloseTimeout: activityFormData.scheduleToCloseTimeout,
+    }),
+    ...(activityFormData.scheduleToStartTimeout && {
+      scheduleToStartTimeout: activityFormData.scheduleToStartTimeout,
+    }),
+  };
+};
+
+export const startStandaloneActivity = async (
   activity: StandaloneActivityFormData,
-  namespace: string,
 ) => {
+  const { id: activityId, namespace } = activity;
+
   const route = routeForApi('standalone-activities.start', {
     namespace,
-    activityId: activity.activityId,
+    activityId,
   });
+
+  const startActivityExecutionRequest =
+    await toStartActivityExecutionRequest(activity);
+
   return requestFromAPI(route, {
-    options: { method: 'POST', body: stringifyWithBigInt(activity) },
+    options: {
+      method: 'POST',
+      body: stringifyWithBigInt(startActivityExecutionRequest),
+    },
   });
 };
+
+export const getActivityExecutions = (namespace: string) => {
+  const route = routeForApi('standalone-activities', { namespace });
+
+  return requestFromAPI(route);
+};
diff --git a/src/lib/types/api.ts b/src/lib/types/api.ts
index 7cdd0f9800..55d58900ed 100644
--- a/src/lib/types/api.ts
+++ b/src/lib/types/api.ts
@@ -54,9 +54,8 @@ export type NexusAPIRoutePath = 'nexus-endpoint' | 'nexus-endpoint.update';
 export type WorkerDeploymentsAPIRoutePath = 'worker-deployments';
 export type WorkerDeploymentAPIRoutePath = 'worker-deployment';
 export type WorkerDeploymentVersionAPIRoutePath = 'worker-deployment-version';
-export type StandaloneActivitiesAPIRoutePath =
-  | 'standalone-activities'
-  | 'standalone-activities.start';
+export type StandaloneActivitiesAPIRoutePath = 'standalone-activities';
+export type StartStandaloneActivityAPIRoutePath = 'standalone-activities.start';
 
 export type APIRoutePath =
   | ParameterlessAPIRoutePath
@@ -77,6 +76,7 @@ export type APIRoutePath =
   | WorkerDeploymentsAPIRoutePath
   | WorkerDeploymentAPIRoutePath
   | WorkerDeploymentVersionAPIRoutePath
+  | StartStandaloneActivityAPIRoutePath
   | StandaloneActivitiesAPIRoutePath;
 
 export type APIRouteParameters = {
@@ -97,6 +97,10 @@ export type APIRouteParameters = {
 };
 
 export type StandaloneActivitiesParameters = Pick<
+  APIRouteParameters,
+  'namespace'
+>;
+export type StartStandaloneActivityParameters = Pick<
   APIRouteParameters,
   'namespace' | 'activityId'
 >;
diff --git a/src/lib/types/index.ts b/src/lib/types/index.ts
index 5070d8a159..1d93ec857a 100644
--- a/src/lib/types/index.ts
+++ b/src/lib/types/index.ts
@@ -221,9 +221,12 @@ export type Payloads = temporal.api.common.v1.IPayloads;
 export type WorkflowExecutionInput = temporal.api.common.v1.IWorkflowExecution;
 export type Memo = temporal.api.common.v1.IMemo;
 export type Header = temporal.api.common.v1.IHeader;
+export type ActivityType = temporal.api.common.v1.IActivityType;
+export type RetryPolicy = temporal.api.common.v1.IRetryPolicy;
 
 // api.taskqueue
 
+export type TaskQueue = temporal.api.taskqueue.v1.ITaskQueue;
 export type TaskQueueRequest =
   temporal.api.workflowservice.v1.IDescribeTaskQueueRequest;
 export type TaskQueueResponse =
@@ -274,6 +277,7 @@ export type Failure = temporal.api.failure.v1.IFailure;
 // google
 
 export type Timestamp = google.protobuf.ITimestamp;
+export type Duration = google.protobuf.IDuration;
 
 // extra APIs
 export type SettingsResponse = {
@@ -303,3 +307,5 @@ export type SettingsResponse = {
   FeedbackURL: string;
   Version: string;
 };
+
+export type UserMetadata = temporal.api.sdk.v1.IUserMetadata;
diff --git a/src/lib/types/schedule.ts b/src/lib/types/schedule.ts
index 583f20a3b3..09e24db3a6 100644
--- a/src/lib/types/schedule.ts
+++ b/src/lib/types/schedule.ts
@@ -1,4 +1,4 @@
-import type { PayloadInputEncoding } from '$lib/components/payload-input-with-encoding.svelte';
+import type { PayloadInputEncoding } from '$lib/models/payload-encoding';
 import type { SearchAttributeInput } from '$lib/stores/search-attributes';
 import type {
   CalendarSpec,
diff --git a/src/lib/utilities/encode-payload.ts b/src/lib/utilities/encode-payload.ts
index 12273ff6f7..7244a2db64 100644
--- a/src/lib/utilities/encode-payload.ts
+++ b/src/lib/utilities/encode-payload.ts
@@ -1,9 +1,9 @@
 import { get } from 'svelte/store';
 
-import type { PayloadInputEncoding } from '$lib/components/payload-input-with-encoding.svelte';
+import type { PayloadInputEncoding } from '$lib/models/payload-encoding';
 import { encodePayloadsWithCodec } from '$lib/services/data-encoder';
 import { dataEncoder } from '$lib/stores/data-encoder';
-import type { Payloads } from '$lib/types';
+import type { Payload } from '$lib/types';
 import { btoa } from '$lib/utilities/btoa';
 import {
   parseWithBigInt,
@@ -57,7 +57,7 @@ export const encodePayloads = async ({
   encoding,
   messageType = '',
   encodeWithCodec = true,
-}: EncodePayloads): Promise<Payloads> => {
+}: EncodePayloads): Promise<Payload[]> => {
   let payloads = null;
 
   if (input) {
diff --git a/src/lib/utilities/route-for-api.ts b/src/lib/utilities/route-for-api.ts
index 30428de6fc..ea22d2abe1 100644
--- a/src/lib/utilities/route-for-api.ts
+++ b/src/lib/utilities/route-for-api.ts
@@ -21,6 +21,8 @@ import type {
   SearchAttributesRoutePath,
   StandaloneActivitiesAPIRoutePath,
   StandaloneActivitiesParameters,
+  StartStandaloneActivityAPIRoutePath,
+  StartStandaloneActivityParameters,
   TaskQueueAPIRoutePath,
   TaskQueueRouteParameters,
   WorkerAPIRoutePath,
@@ -184,6 +186,11 @@ export function routeForApi(
   parameters: StandaloneActivitiesParameters,
   shouldEncode?: boolean,
 ): string;
+export function routeForApi(
+  route: StartStandaloneActivityAPIRoutePath,
+  parameters: StartStandaloneActivityParameters,
+  shouldEncode?: boolean,
+): string;
 export function routeForApi(
   route: WorkflowsAPIRoutePath,
   parameters: WorkflowListRouteParameters,
diff --git a/src/lib/utilities/route-for.ts b/src/lib/utilities/route-for.ts
index 5d0789f8f1..9ef7ce15cb 100644
--- a/src/lib/utilities/route-for.ts
+++ b/src/lib/utilities/route-for.ts
@@ -97,7 +97,7 @@ export const routeForWorkflows = (parameters: NamespaceParameter): string => {
 export const routeForStandaloneActivities = (
   parameters: NamespaceParameter,
 ): string => {
-  return `${routeForNamespace(parameters)}/standalone-activities`;
+  return `${routeForNamespace(parameters)}/activities`;
 };
 
 export const routeForStartStandaloneActivity = (
diff --git a/src/routes/(app)/namespaces/[namespace]/standalone-activities/+page.svelte b/src/routes/(app)/namespaces/[namespace]/activities/+page.svelte
similarity index 79%
rename from src/routes/(app)/namespaces/[namespace]/standalone-activities/+page.svelte
rename to src/routes/(app)/namespaces/[namespace]/activities/+page.svelte
index 7d44746c30..aac8ba0a53 100644
--- a/src/routes/(app)/namespaces/[namespace]/standalone-activities/+page.svelte
+++ b/src/routes/(app)/namespaces/[namespace]/activities/+page.svelte
@@ -4,6 +4,7 @@
   import PageTitle from '$lib/components/page-title.svelte';
   import Button from '$lib/holocene/button.svelte';
   import { translate } from '$lib/i18n/translate';
+  import { getActivityExecutions } from '$lib/services/standalone-activities';
   import { routeForStartStandaloneActivity } from '$lib/utilities/route-for';
 
   const namespace = $derived(page.params.namespace);
@@ -19,3 +20,7 @@
     {translate('activities.start-standalone-activity')}
   </Button>
 </div>
+
+{#await getActivityExecutions(namespace) then executions}
+  {JSON.stringify(executions, null, 2)}
+{/await}
diff --git a/src/routes/(app)/namespaces/[namespace]/standalone-activities/start/+page.svelte b/src/routes/(app)/namespaces/[namespace]/activities/start/+page.svelte
similarity index 100%
rename from src/routes/(app)/namespaces/[namespace]/standalone-activities/start/+page.svelte
rename to src/routes/(app)/namespaces/[namespace]/activities/start/+page.svelte

From 01e6b86a6d08ad219314197871048567f555150c Mon Sep 17 00:00:00 2001
From: Ross Edfort <ross.edfort@temporal.io>
Date: Thu, 18 Dec 2025 15:21:12 -0700
Subject: [PATCH 3/3] use queryparams for initial form values

---
 .../standalone-activity-form/form.svelte      | 47 ++++++++++++-------
 .../standalone-activity-form/types.ts         |  8 ++--
 .../duration-input/duration-input.svelte      |  6 ++-
 src/lib/services/standalone-activities.ts     |  6 +--
 4 files changed, 43 insertions(+), 24 deletions(-)

diff --git a/src/lib/components/standalone-activity-form/form.svelte b/src/lib/components/standalone-activity-form/form.svelte
index 6b6550d5aa..b9711911df 100644
--- a/src/lib/components/standalone-activity-form/form.svelte
+++ b/src/lib/components/standalone-activity-form/form.svelte
@@ -7,6 +7,8 @@
   import { twMerge } from 'tailwind-merge';
   import z from 'zod/v3';
 
+  import { page } from '$app/state';
+
   import Button from '$lib/holocene/button.svelte';
   import Card from '$lib/holocene/card.svelte';
   import DurationInput from '$lib/holocene/duration-input/duration-input.svelte';
@@ -21,6 +23,7 @@
   import { startStandaloneActivity } from '$lib/services/standalone-activities';
   import { getIdentity } from '$lib/utilities/core-context';
 
+  import type { StandaloneActivityFormData } from './types';
   import Message from '../form/message.svelte';
   import PayloadInputWithEncoding from '../payload-input-with-encoding.svelte';
   import AddSearchAttributes from '../workflow/add-search-attributes.svelte';
@@ -31,13 +34,27 @@
 
   const { namespace }: Props = $props();
 
+  const formDefaults = $derived<StandaloneActivityFormData>({
+    namespace,
+    identity: getIdentity(),
+    activityId: page.url.searchParams.get('activityId') ?? '',
+    activityType: page.url.searchParams.get('activityType') ?? '',
+    taskQueue: page.url.searchParams.get('taskQueue') ?? '',
+    startToCloseTimeout: page.url.searchParams.get('startToCloseTimeout') ?? '',
+  });
+
+  // https://svelte.dev/docs/svelte/compiler-warnings#state_referenced_locally
+  const getFormDefaults = () => formDefaults;
+
   const schema = z
     .object({
       identity: z.string(),
       namespace: z.string(),
-      id: z.string().min(1, { message: 'Activity ID is required.' }),
+      activityId: z.string().min(1, { message: 'Activity ID is required.' }),
       taskQueue: z.string().min(1, { message: 'Task Queue is required.' }),
-      type: z.string().min(1, { message: 'Activity Type is required.' }),
+      activityType: z
+        .string()
+        .min(1, { message: 'Activity Type is required.' }),
       input: z.string().optional(),
       startToCloseTimeout: z.string().optional(),
       scheduleToCloseTimeout: z.string().optional(),
@@ -77,25 +94,21 @@
 
   const { form, enhance, errors, message } = superForm(
     {
-      identity: getIdentity(),
-      namespace,
-      id: '',
-      taskQueue: '',
-      type: '',
+      ...getFormDefaults(),
       input: '',
       encoding: '',
       messageType: '',
-      startToCloseTimeout: '',
       scheduleToCloseTimeout: '',
+      scheduleToStartTimeout: '',
       searchAttributes: [],
       summary: '',
       details: '',
-      scheduleToStartTimeout: '',
     },
     {
       SPA: true,
       dataType: 'json',
       resetForm: false,
+      invalidateAll: false,
       validators: zodClient(schema),
       onUpdate: async ({ form }) => {
         if (!form.valid) return;
@@ -113,6 +126,8 @@
     },
   );
 
+  $inspect($form);
+
   const encoding = writable<PayloadInputEncoding>('json/plain');
   let advancedOptionsVisible = $state(false);
 
@@ -125,7 +140,7 @@
   });
 
   const generateRandomId = () => {
-    $form.id = crypto.randomUUID();
+    $form.activityId = crypto.randomUUID();
   };
 </script>
 
@@ -137,9 +152,9 @@
     label="Activity ID"
     required
     id="activityId"
-    bind:value={$form.id}
-    error={!!$errors?.id}
-    hintText={$errors?.id?.[0]}
+    bind:value={$form.activityId}
+    error={!!$errors?.activityId}
+    hintText={$errors?.activityId?.[0]}
   >
     <Button
       class="ml-2.5"
@@ -162,9 +177,9 @@
     id="activityType"
     required
     label="Activity Type"
-    bind:value={$form.type}
-    error={!!$errors.type}
-    hintText={$errors.type?.[0]}
+    bind:value={$form.activityType}
+    error={!!$errors.activityType}
+    hintText={$errors.activityType?.[0]}
   />
 
   <PayloadInputWithEncoding
diff --git a/src/lib/components/standalone-activity-form/types.ts b/src/lib/components/standalone-activity-form/types.ts
index 479df0bee4..d2dee1f420 100644
--- a/src/lib/components/standalone-activity-form/types.ts
+++ b/src/lib/components/standalone-activity-form/types.ts
@@ -4,12 +4,12 @@ import type { SearchAttributeInput } from '$lib/stores/search-attributes';
 export interface StandaloneActivityFormData {
   identity: string;
   namespace: string;
-  id: string;
+  activityId: string;
   taskQueue: string;
-  type: string;
+  activityType: string;
   startToCloseTimeout: string;
-  scheduleToCloseTimeout: string;
-  scheduleToStartTimeout: string;
+  scheduleToCloseTimeout?: string;
+  scheduleToStartTimeout?: string;
   input?: string;
   encoding?: PayloadInputEncoding;
   messageType?: string;
diff --git a/src/lib/holocene/duration-input/duration-input.svelte b/src/lib/holocene/duration-input/duration-input.svelte
index f6f029c5ff..b2e01af156 100644
--- a/src/lib/holocene/duration-input/duration-input.svelte
+++ b/src/lib/holocene/duration-input/duration-input.svelte
@@ -39,6 +39,10 @@
     HOURS,
   ];
 
+  export const parseDuration = (duration: string): string => {
+    return duration.split('s')[0] ?? '';
+  };
+
   type ExtractLabel<T> = T extends { label: infer K }[] ? K : never;
 </script>
 
@@ -84,7 +88,7 @@
     class: className = '',
   }: Props = $props();
 
-  let rawValue: string = $state('');
+  let rawValue = $state(parseDuration(value));
   let unit = $state(initialUnit);
 
   const convert = (durationValue: string, durationUnit: string) => {
diff --git a/src/lib/services/standalone-activities.ts b/src/lib/services/standalone-activities.ts
index 8ea9ab3554..c4797ced77 100644
--- a/src/lib/services/standalone-activities.ts
+++ b/src/lib/services/standalone-activities.ts
@@ -79,9 +79,9 @@ const toStartActivityExecutionRequest = async (
   return {
     identity: activityFormData.identity,
     namespace: activityFormData.namespace,
-    activityId: activityFormData.id,
+    activityId: activityFormData.activityId,
     requestId: crypto.randomUUID(),
-    activityType: { name: activityFormData.type },
+    activityType: { name: activityFormData.activityType },
     taskQueue: { name: activityFormData.taskQueue },
     input: { payloads: inputPayloads },
     userMetadata: {
@@ -103,7 +103,7 @@ const toStartActivityExecutionRequest = async (
 export const startStandaloneActivity = async (
   activity: StandaloneActivityFormData,
 ) => {
-  const { id: activityId, namespace } = activity;
+  const { activityId, namespace } = activity;
 
   const route = routeForApi('standalone-activities.start', {
     namespace,