From 047b690cfee7bd91adcfd6bcde39e19151f50ea2 Mon Sep 17 00:00:00 2001
From: Tegan Churchill <tegan.churchill@temporal.io>
Date: Mon, 4 May 2026 14:47:24 -0700
Subject: [PATCH 1/4] More trivial migrations

---
 .../components/batch-operations/header.svelte |  6 +-
 src/lib/components/data-encoder-status.svelte | 10 +--
 .../import/event-history-file-import.svelte   |  9 ++-
 .../lines-and-dots/event-sort-filter.svelte   | 26 +++++---
 .../lines-and-dots/svg/timeline-graph.svelte  | 65 ++++++++++++-------
 .../close-filter-button.svelte                |  2 +
 .../filter-list.svelte                        | 16 +++--
 .../status-filter.svelte                      | 16 +++--
 .../filter-bar.svelte                         |  2 +
 .../index.svelte                              | 22 +++++--
 .../orderable-list.svelte                     | 28 ++++----
 .../dropdown-filter/conditional.svelte        | 10 ++-
 .../relationships/workflow-family-tree.svelte | 14 ++--
 .../workflow/scheduler-table.svelte           |  2 +
 .../workflow-relationships-old.svelte         | 32 ++++-----
 src/lib/holocene/day-of-month-picker.svelte   | 10 ++-
 src/lib/holocene/day-of-week-picker.svelte    | 10 ++-
 src/lib/holocene/month-picker.svelte          | 10 ++-
 src/lib/holocene/select/multi-select.svelte   | 57 +++++++++++-----
 src/lib/holocene/toaster.svelte               | 12 ++--
 src/lib/holocene/user-menu.svelte             | 10 ++-
 src/lib/pages/batch-operation.svelte          | 10 ++-
 src/lib/pages/workflow-metadata.svelte        |  2 +-
 src/routes/+error.svelte                      | 32 +++++----
 24 files changed, 267 insertions(+), 146 deletions(-)

diff --git a/src/lib/components/batch-operations/header.svelte b/src/lib/components/batch-operations/header.svelte
index 2b74341774..56d12edd61 100644
--- a/src/lib/components/batch-operations/header.svelte
+++ b/src/lib/components/batch-operations/header.svelte
@@ -8,7 +8,11 @@
   import { autoRefresh } from '$lib/stores/batch-operations';
   import type { BatchOperation, BatchOperationState } from '$lib/types/batch';
 
-  export let operation: BatchOperation;
+  interface Props {
+    operation: BatchOperation;
+  }
+
+  let { operation }: Props = $props();
 
   const dispatch = createEventDispatcher<{
     toggleAutoRefresh: { checked: boolean };
diff --git a/src/lib/components/data-encoder-status.svelte b/src/lib/components/data-encoder-status.svelte
index 0c9140cfe6..a73f195292 100644
--- a/src/lib/components/data-encoder-status.svelte
+++ b/src/lib/components/data-encoder-status.svelte
@@ -13,13 +13,9 @@
     }
   };
 
-  let variant: 'primary' | 'ghost' = 'ghost';
-
-  const updateVariant = (open: boolean) => {
-    variant = open ? 'primary' : 'ghost';
-  };
-
-  $: updateVariant($viewDataEncoderSettings);
+  const variant = $derived<'primary' | 'ghost'>(
+    $viewDataEncoderSettings ? 'primary' : 'ghost',
+  );
 </script>
 
 <div class="mx-1 flex items-center">
diff --git a/src/lib/components/import/event-history-file-import.svelte b/src/lib/components/import/event-history-file-import.svelte
index f2cf708e60..ca015a786b 100644
--- a/src/lib/components/import/event-history-file-import.svelte
+++ b/src/lib/components/import/event-history-file-import.svelte
@@ -1,3 +1,5 @@
+<svelte:options runes />
+
 <script lang="ts">
   import { goto } from '$app/navigation';
 
@@ -13,8 +15,9 @@
   import { parseWithBigInt } from '$lib/utilities/parse-with-big-int';
   import { routeForEventHistoryImport } from '$lib/utilities/route-for';
 
-  let rawEvents: HistoryEvent[] | { events: HistoryEvent[] };
-  let fileLoaded = false;
+  let rawEvents: HistoryEvent[] | { events: HistoryEvent[] } | undefined =
+    $state(undefined);
+  let fileLoaded = $state(false);
 
   const onFileSelect = async (e: Event) => {
     const target = e.target as HTMLInputElement;
@@ -70,7 +73,7 @@
     class="import-input block border border-slate-200 p-2"
     type="file"
     accept=".json"
-    on:change={onFileSelect}
+    onchange={onFileSelect}
   />
   <Button leadingIcon="file-upload" on:click={onConfirm} disabled={!fileLoaded}
     >{translate('common.import')}</Button
diff --git a/src/lib/components/lines-and-dots/event-sort-filter.svelte b/src/lib/components/lines-and-dots/event-sort-filter.svelte
index a3c52f3ab8..15ebc9572a 100644
--- a/src/lib/components/lines-and-dots/event-sort-filter.svelte
+++ b/src/lib/components/lines-and-dots/event-sort-filter.svelte
@@ -1,9 +1,9 @@
-<script context="module">
+<script module>
   export const dateParameter = 'time-format';
 </script>
 
 <script lang="ts">
-  import { page } from '$app/stores';
+  import { page } from '$app/state';
 
   import Icon from '$lib/holocene/icon/icon.svelte';
   import {
@@ -22,9 +22,13 @@
   import { getDateFilterValue } from '$lib/utilities/event-formatting';
   import { updateQueryParameters } from '$lib/utilities/update-query-parameters';
 
-  export let compact: boolean;
+  interface Props {
+    compact: boolean;
+  }
 
-  let sortOptions: EventSortOrderOptions = [
+  let { compact }: Props = $props();
+
+  const sortOptions: EventSortOrderOptions = [
     { label: translate('events.sort-ascending'), option: 'ascending' },
     { label: translate('events.sort-descending'), option: 'descending' },
   ];
@@ -34,7 +38,7 @@
     updateQueryParameters({
       parameter: 'sort',
       value: option,
-      url: $page.url,
+      url: page.url,
     });
   };
 
@@ -46,11 +50,13 @@
     }
   };
 
-  $: value = getDateFilterValue({
-    compact,
-    sortOrder: $eventFilterSort,
-    showElapsed: $eventShowElapsed,
-  });
+  const value = $derived(
+    getDateFilterValue({
+      compact,
+      sortOrder: $eventFilterSort,
+      showElapsed: $eventShowElapsed,
+    }),
+  );
 </script>
 
 <MenuContainer>
diff --git a/src/lib/components/lines-and-dots/svg/timeline-graph.svelte b/src/lib/components/lines-and-dots/svg/timeline-graph.svelte
index 0048821884..e3254b44a4 100644
--- a/src/lib/components/lines-and-dots/svg/timeline-graph.svelte
+++ b/src/lib/components/lines-and-dots/svg/timeline-graph.svelte
@@ -17,38 +17,57 @@
   import TimelineGraphRow from './timeline-graph-row.svelte';
   import WorkflowRow from './workflow-row.svelte';
 
-  export let x = 0;
-  export let y = 0;
-  export let workflow: WorkflowExecution;
-  export let groups: EventGroups;
-  export let viewportHeight: number | undefined;
-  export let readOnly = false;
-  export let error: boolean = false;
+  interface Props {
+    x?: number;
+    y?: number;
+    workflow: WorkflowExecution;
+    groups: EventGroups;
+    viewportHeight: number | undefined;
+    readOnly?: boolean;
+    error?: boolean;
+  }
+
+  let {
+    x = 0,
+    y = 0,
+    workflow,
+    groups,
+    viewportHeight,
+    readOnly = false,
+    error = false,
+  }: Props = $props();
 
   const { height, gutter, radius } = TimelineConfig;
 
-  let canvasWidth = 0;
-  let scrollY = 0;
+  let canvasWidth = $state(0);
+  let scrollY = $state(0);
 
-  $: expandedGroupHeight = readOnly ? 0 : $activeGroupHeight;
-  $: filteredGroups = getFailedOrPendingGroups(groups, $eventStatusFilter);
-  $: firstStartTime =
+  const expandedGroupHeight = $derived(readOnly ? 0 : $activeGroupHeight);
+  const filteredGroups = $derived(
+    getFailedOrPendingGroups(groups, $eventStatusFilter),
+  );
+  const firstStartTime = $derived(
     $fullEventHistory[0]?.eventTime < workflow.executionTime
       ? $fullEventHistory[0]?.eventTime
-      : workflow.executionTime;
-  $: startTime =
-    (!isWorkflowDelayed(workflow) && firstStartTime) || workflow.startTime;
-  $: timelineHeight =
-    Math.max(height * (filteredGroups.length + 2), 120) + expandedGroupHeight;
-  $: canvasHeight = timelineHeight + 120;
+      : workflow.executionTime,
+  );
+  const startTime = $derived(
+    (!isWorkflowDelayed(workflow) && firstStartTime) || workflow.startTime,
+  );
+  const timelineHeight = $derived(
+    Math.max(height * (filteredGroups.length + 2), 120) + expandedGroupHeight,
+  );
+  const canvasHeight = $derived(timelineHeight + 120);
 
-  const handleScroll = (e) => {
-    scrollY = e?.target?.scrollTop;
+  const handleScroll = (e: Event) => {
+    scrollY = (e?.target as HTMLElement)?.scrollTop;
   };
 
-  $: groupIndexMap = new Map(filteredGroups.map((g, i) => [g.id, i]));
+  const groupIndexMap = $derived(
+    new Map(filteredGroups.map((g, i) => [g.id, i])),
+  );
 
-  $: activeGroupsHeightAboveGroup = (groupIndex: number) => {
+  const activeGroupsHeightAboveGroup = (groupIndex: number) => {
     const hasActiveAbove = $activeGroups?.some((id) => {
       const activeIndex = groupIndexMap.get(id);
       return activeIndex !== undefined && activeIndex < groupIndex;
@@ -62,7 +81,7 @@
   class="relative h-auto overflow-auto border border-t-0 border-subtle bg-primary"
   bind:clientWidth={canvasWidth}
   style={viewportHeight ? `max-height: ${viewportHeight}px;` : ''}
-  on:scroll={handleScroll}
+  onscroll={handleScroll}
 >
   <EndTimeInterval
     {workflow}
diff --git a/src/lib/components/search-attribute-filter/close-filter-button.svelte b/src/lib/components/search-attribute-filter/close-filter-button.svelte
index 93b68eabd0..c44fdb399d 100644
--- a/src/lib/components/search-attribute-filter/close-filter-button.svelte
+++ b/src/lib/components/search-attribute-filter/close-filter-button.svelte
@@ -1,3 +1,5 @@
+<svelte:options runes />
+
 <script lang="ts">
   import { getContext } from 'svelte';
 
diff --git a/src/lib/components/search-attribute-filter/filter-list.svelte b/src/lib/components/search-attribute-filter/filter-list.svelte
index 284ec6f261..f33392d9bb 100644
--- a/src/lib/components/search-attribute-filter/filter-list.svelte
+++ b/src/lib/components/search-attribute-filter/filter-list.svelte
@@ -3,7 +3,7 @@
 
   import { getContext } from 'svelte';
 
-  import { page } from '$app/stores';
+  import { page } from '$app/state';
 
   import Timestamp from '$lib/components/timestamp.svelte';
   import WorkflowStatus from '$lib/components/workflow-status.svelte';
@@ -24,7 +24,11 @@
 
   import { FILTER_CONTEXT, type FilterContext } from './index.svelte';
 
-  export let filters: SearchAttributeFilter[];
+  interface Props {
+    filters: SearchAttributeFilter[];
+  }
+
+  let { filters = $bindable() }: Props = $props();
 
   const { filter, activeQueryIndex } =
     getContext<FilterContext>(FILTER_CONTEXT);
@@ -32,7 +36,7 @@
   const removeQuery = (index: number) => {
     filters.splice(index, 1);
     filters = filters;
-    updateQueryParamsFromFilter($page.url, filters);
+    updateQueryParamsFromFilter(page.url, filters);
 
     if (index === filters.length) {
       const previousQuery = filters[filters.length - 1];
@@ -49,10 +53,10 @@
     }
   };
 
-  let totalFiltersInView = 5;
+  let totalFiltersInView = $state(5);
 
-  $: visibleFilters = filters.slice(0, totalFiltersInView);
-  $: hasMoreFilters = totalFiltersInView < filters.length;
+  const visibleFilters = $derived(filters.slice(0, totalFiltersInView));
+  const hasMoreFilters = $derived(totalFiltersInView < filters.length);
 
   const viewMoreFilters = () => {
     if (hasMoreFilters) {
diff --git a/src/lib/components/search-attribute-filter/status-filter.svelte b/src/lib/components/search-attribute-filter/status-filter.svelte
index aacffdc753..f69f0aabd0 100644
--- a/src/lib/components/search-attribute-filter/status-filter.svelte
+++ b/src/lib/components/search-attribute-filter/status-filter.svelte
@@ -3,7 +3,7 @@
 
   import { getContext } from 'svelte';
 
-  import { page } from '$app/stores';
+  import { page } from '$app/state';
 
   import WorkflowStatus from '$lib/components/workflow-status.svelte';
   import Checkbox from '$lib/holocene/checkbox.svelte';
@@ -22,16 +22,22 @@
 
   import { FILTER_CONTEXT, type FilterContext } from './index.svelte';
 
-  export let filters: SearchAttributeFilter[];
+  interface Props {
+    filters: SearchAttributeFilter[];
+  }
+
+  let { filters = $bindable() }: Props = $props();
 
   const { filter, resetFilter } = getContext<FilterContext>(FILTER_CONTEXT);
   const open = writable(true);
-  $: _filters = [...filters];
-  $: statusFilters = _filters.filter((filter) => isStatusFilter(filter));
+  let _filters: SearchAttributeFilter[] = $derived([...filters]);
+  const statusFilters = $derived(
+    _filters.filter((filter) => isStatusFilter(filter)),
+  );
 
   function apply() {
     filters = _filters;
-    updateQueryParamsFromFilter($page.url, filters);
+    updateQueryParamsFromFilter(page.url, filters);
   }
 
   function mapStatusToFilter(value: string) {
diff --git a/src/lib/components/standalone-activities/activities-summary-filter-bar/filter-bar.svelte b/src/lib/components/standalone-activities/activities-summary-filter-bar/filter-bar.svelte
index bc964c9fc1..7bf93f7d2c 100644
--- a/src/lib/components/standalone-activities/activities-summary-filter-bar/filter-bar.svelte
+++ b/src/lib/components/standalone-activities/activities-summary-filter-bar/filter-bar.svelte
@@ -1,3 +1,5 @@
+<svelte:options runes />
+
 <script lang="ts">
   import FilterBar from '$lib/components/shared-search-attribute-filter/filter-bar.svelte';
   import { activitiesQuery, activityRefresh } from '$lib/stores/activities';
diff --git a/src/lib/components/workflow/configurable-table-headers-drawer/index.svelte b/src/lib/components/workflow/configurable-table-headers-drawer/index.svelte
index b1db9457f7..5b18fe65c5 100644
--- a/src/lib/components/workflow/configurable-table-headers-drawer/index.svelte
+++ b/src/lib/components/workflow/configurable-table-headers-drawer/index.svelte
@@ -1,3 +1,5 @@
+<svelte:options runes />
+
 <script lang="ts">
   import type { Readable } from 'svelte/store';
 
@@ -13,11 +15,21 @@
 
   import OrderableList from './orderable-list.svelte';
 
-  export let availableColumns: Readable<ConfigurableTableHeader[]>;
-  export let open: boolean;
-  export let table: ConfigurableTableType = TABLE_TYPE.WORKFLOWS;
-  export let type: string;
-  export let title: string;
+  interface Props {
+    availableColumns: Readable<ConfigurableTableHeader[]>;
+    open: boolean;
+    table?: ConfigurableTableType;
+    type: string;
+    title: string;
+  }
+
+  let {
+    availableColumns,
+    open = $bindable(),
+    table = TABLE_TYPE.WORKFLOWS,
+    type,
+    title,
+  }: Props = $props();
 
   const closeCustomizationDrawer = () => {
     open = false;
diff --git a/src/lib/components/workflow/configurable-table-headers-drawer/orderable-list.svelte b/src/lib/components/workflow/configurable-table-headers-drawer/orderable-list.svelte
index 28f7d496c2..191f69eff3 100644
--- a/src/lib/components/workflow/configurable-table-headers-drawer/orderable-list.svelte
+++ b/src/lib/components/workflow/configurable-table-headers-drawer/orderable-list.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Readable } from 'svelte/store';
 
-  import { page } from '$app/stores';
+  import { page } from '$app/state';
 
   import OrderableListItem from '$lib/holocene/orderable-list/orderable-list-item.svelte';
   import OrderableList from '$lib/holocene/orderable-list/orderable-list.svelte';
@@ -16,15 +16,21 @@
     removeColumn,
   } from '$lib/stores/configurable-table-columns';
 
-  export let table: ConfigurableTableType;
-  export let availableColumns: Readable<ConfigurableTableHeader[]>;
-  export let type: string;
+  interface Props {
+    table: ConfigurableTableType;
+    availableColumns: Readable<ConfigurableTableHeader[]>;
+    type: string;
+  }
 
-  $: namespace = $page.params.namespace;
-  $: columnsInUse = $configurableTableColumns?.[namespace]?.[table] ?? [];
-  $: availableCustomColumns = availableCustomSearchAttributeColumns(
-    namespace,
-    table,
+  let { table, availableColumns, type }: Props = $props();
+
+  const namespace = $derived(page.params.namespace);
+  const columnsInUse = $derived(
+    $configurableTableColumns?.[namespace]?.[table] ?? [],
+  );
+
+  const availableCustomColumns = $derived(
+    availableCustomSearchAttributeColumns(namespace, table),
   );
 </script>
 
@@ -65,7 +71,7 @@
     <svelte:fragment slot="heading">
       Available Columns <span class="font-normal">(not in view)</span>
     </svelte:fragment>
-    {#each $availableColumns as { label }}
+    {#each $availableColumns as { label } (label)}
       <OrderableListItem
         static
         on:addItem={() => addColumn(label, namespace, table)}
@@ -86,7 +92,7 @@
       {translate('events.custom-search-attributes')}
       <span class="font-normal">(not in view)</span>
     </svelte:fragment>
-    {#each $availableCustomColumns as { label }}
+    {#each $availableCustomColumns as { label } (label)}
       <OrderableListItem
         static
         on:addItem={() => addColumn(label, namespace, table)}
diff --git a/src/lib/components/workflow/dropdown-filter/conditional.svelte b/src/lib/components/workflow/dropdown-filter/conditional.svelte
index baffba2ed8..1e2f31ecc3 100644
--- a/src/lib/components/workflow/dropdown-filter/conditional.svelte
+++ b/src/lib/components/workflow/dropdown-filter/conditional.svelte
@@ -1,14 +1,18 @@
 <script lang="ts">
-  export let conditional = '=';
+  interface Props {
+    conditional?: string;
+  }
+
+  let { conditional = $bindable('=') }: Props = $props();
 </script>
 
 <div class="mt-2 transition-all hover:cursor-pointer">
-  <button class="flex items-center" on:click={() => (conditional = '=')}>
+  <button class="flex items-center" onclick={() => (conditional = '=')}>
     <div class="ml-4 mr-2 p-1 text-primary" class:active={conditional === '='}>
       Is
     </div>
   </button>
-  <button class="flex items-center" on:click={() => (conditional = '!=')}>
+  <button class="flex items-center" onclick={() => (conditional = '!=')}>
     <div class="ml-4 mr-2 p-1 text-primary" class:active={conditional === '!='}>
       Is Not
     </div>
diff --git a/src/lib/components/workflow/relationships/workflow-family-tree.svelte b/src/lib/components/workflow/relationships/workflow-family-tree.svelte
index 9c14803d16..82516d2740 100644
--- a/src/lib/components/workflow/relationships/workflow-family-tree.svelte
+++ b/src/lib/components/workflow/relationships/workflow-family-tree.svelte
@@ -13,12 +13,16 @@
   import WorkflowFamilyNodeDescription from './workflow-family-node-description.svelte';
   import WorkflowFamilyNodeTree from './workflow-family-node-tree.svelte';
 
-  export let root: RootNode;
-  export let namespace: string;
+  interface Props {
+    root: RootNode;
+    namespace: string;
+  }
 
-  $: expandAll = !$showFullTree;
-  let activeWorkflow: WorkflowExecution | undefined = undefined;
-  let openRuns = new Map<number, string>();
+  let { root = $bindable(), namespace }: Props = $props();
+
+  let expandAll = $derived(!$showFullTree);
+  let activeWorkflow = $state<WorkflowExecution | undefined>(undefined);
+  let openRuns = $state(new Map<number, string>());
 
   const onExpandAll = () => {
     expandAll = !expandAll;
diff --git a/src/lib/components/workflow/scheduler-table.svelte b/src/lib/components/workflow/scheduler-table.svelte
index 31590c99f8..8f7224c437 100644
--- a/src/lib/components/workflow/scheduler-table.svelte
+++ b/src/lib/components/workflow/scheduler-table.svelte
@@ -1,3 +1,5 @@
+<svelte:options runes />
+
 <script lang="ts">
   import Copyable from '$lib/holocene/copyable/index.svelte';
   import Link from '$lib/holocene/link.svelte';
diff --git a/src/lib/components/workflow/workflow-relationships-old.svelte b/src/lib/components/workflow/workflow-relationships-old.svelte
index 4fee8dc2dd..da1ea6d20d 100644
--- a/src/lib/components/workflow/workflow-relationships-old.svelte
+++ b/src/lib/components/workflow/workflow-relationships-old.svelte
@@ -12,25 +12,25 @@
   import ParentWorkflowTable from './parent-workflow-table.svelte';
   import SchedulerTable from './scheduler-table.svelte';
 
-  $: ({ namespace, workflow: workflowId, run: runId } = page.params);
-  $: ({ workflow } = $workflowRun);
+  const namespace = $derived(page.params.namespace);
+  const workflowId = $derived(page.params.workflow);
+  const runId = $derived(page.params.run);
+  const workflow = $derived($workflowRun.workflow);
 
-  $: workflowRelationships = getWorkflowRelationships(
-    workflow,
-    $fullEventHistory,
-    page.data.namespace,
+  const workflowRelationships = $derived(
+    getWorkflowRelationships(workflow, $fullEventHistory, page.data.namespace),
   );
 
-  $: ({
-    hasChildren,
-    first,
-    parent,
-    parentNamespaceName,
-    children,
-    next,
-    previous,
-    scheduleId,
-  } = workflowRelationships);
+  const hasChildren = $derived(workflowRelationships.hasChildren);
+  const first = $derived(workflowRelationships.first);
+  const parent = $derived(workflowRelationships.parent);
+  const parentNamespaceName = $derived(
+    workflowRelationships.parentNamespaceName,
+  );
+  const children = $derived(workflowRelationships.children);
+  const next = $derived(workflowRelationships.next);
+  const previous = $derived(workflowRelationships.previous);
+  const scheduleId = $derived(workflowRelationships.scheduleId);
 </script>
 
 <div class="flex flex-col gap-4 px-4 py-4 xl:px-8">
diff --git a/src/lib/holocene/day-of-month-picker.svelte b/src/lib/holocene/day-of-month-picker.svelte
index 91770b2eb6..6601910373 100644
--- a/src/lib/holocene/day-of-month-picker.svelte
+++ b/src/lib/holocene/day-of-month-picker.svelte
@@ -1,9 +1,13 @@
 <script lang="ts">
   import Button from '$lib/holocene/button.svelte';
 
-  const daysInMonth = Array.from({ length: 31 }).map((_, i) => i + 1);
+  interface Props {
+    daysOfMonth: number[];
+  }
 
-  export let daysOfMonth: number[];
+  let { daysOfMonth = $bindable() }: Props = $props();
+
+  const daysInMonth = Array.from({ length: 31 }).map((_, i) => i + 1);
 
   const onClick = (e: MouseEvent, day: number) => {
     if (e.metaKey) {
@@ -21,7 +25,7 @@
 <div
   class="surface-primary grid place-items-center gap-1 rounded border border-subtle px-0 py-4 text-center sm:gap-4 md:gap-x-8 md:px-2 xl:gap-x-16 xl:px-4"
 >
-  {#each daysInMonth as day}
+  {#each daysInMonth as day (day)}
     {@const active = daysOfMonth.includes(day)}
     <Button
       variant="secondary"
diff --git a/src/lib/holocene/day-of-week-picker.svelte b/src/lib/holocene/day-of-week-picker.svelte
index ba2a7d8a28..d7039e906e 100644
--- a/src/lib/holocene/day-of-week-picker.svelte
+++ b/src/lib/holocene/day-of-week-picker.svelte
@@ -2,7 +2,11 @@
   import Button from '$lib/holocene/button.svelte';
   import { genericWeekDays, weekDays } from '$lib/utilities/calendar';
 
-  export let daysOfWeek: string[];
+  interface Props {
+    daysOfWeek: string[];
+  }
+
+  let { daysOfWeek = $bindable() }: Props = $props();
 
   const onClick = (e: MouseEvent, day: string) => {
     if (e.metaKey) {
@@ -29,7 +33,7 @@
 
 <div class="flex flex-col gap-4 text-center">
   <div class="flex flex-wrap gap-2 text-center">
-    {#each genericWeekDays as { label, value }}
+    {#each genericWeekDays as { label, value } (value)}
       {@const active = daysOfWeek.includes(value)}
       <Button
         variant="secondary"
@@ -41,7 +45,7 @@
     {/each}
   </div>
   <div class="flex flex-wrap gap-2 text-center">
-    {#each weekDays as { label, value }}
+    {#each weekDays as { label, value } (value)}
       {@const active = daysOfWeek.includes(value)}
       <Button
         variant="secondary"
diff --git a/src/lib/holocene/month-picker.svelte b/src/lib/holocene/month-picker.svelte
index 5e2ced8ce7..2d5cce7500 100644
--- a/src/lib/holocene/month-picker.svelte
+++ b/src/lib/holocene/month-picker.svelte
@@ -1,8 +1,14 @@
+<svelte:options runes />
+
 <script lang="ts">
   import Button from '$lib/holocene/button.svelte';
   import { monthNames } from '$lib/utilities/calendar';
 
-  export let months: string[];
+  interface Props {
+    months: string[];
+  }
+
+  let { months = $bindable() }: Props = $props();
 
   const onClick = (e: MouseEvent, month: string) => {
     if (e.metaKey && month !== '*') {
@@ -21,7 +27,7 @@
 </script>
 
 <div class="flex flex-wrap gap-4 text-center">
-  {#each monthNames as { label, value }}
+  {#each monthNames as { label, value } (value)}
     {@const active = months.includes(value)}
     <Button
       variant="secondary"
diff --git a/src/lib/holocene/select/multi-select.svelte b/src/lib/holocene/select/multi-select.svelte
index 2eaf3fa19a..404769ebfb 100644
--- a/src/lib/holocene/select/multi-select.svelte
+++ b/src/lib/holocene/select/multi-select.svelte
@@ -19,25 +19,46 @@
   import type { IconName } from '../icon';
   import Icon from '../icon/icon.svelte';
 
-  export let options: MultiSelectOptions = [];
-  export let initialSelected: MultiSelectOptions = [];
-  export let onChange: (options: MultiSelectOptions) => void;
-  export let label: string;
-  export let id: string;
-  export let variant: ButtonStyles['variant'] = 'secondary';
-  export let icon: IconName | undefined = undefined;
-  export let selectAllLabel: string;
-  export let clearAllLabel: string;
-  export let active = false;
-  export let disabled = false;
-  export let position: 'left' | 'right' = 'left';
-  export let initialSelectedAll = true;
+  interface Props {
+    options?: MultiSelectOptions;
+    initialSelected?: MultiSelectOptions;
+    onChange: (options: MultiSelectOptions) => void;
+    label: string;
+    id: string;
+    variant?: ButtonStyles['variant'];
+    icon?: IconName | undefined;
+    selectAllLabel: string;
+    clearAllLabel: string;
+    active?: boolean;
+    disabled?: boolean;
+    position?: 'left' | 'right';
+    initialSelectedAll?: boolean;
+  }
 
-  let selectedOptions = initialSelected.length
-    ? initialSelected
-    : initialSelectedAll
-      ? options
-      : [];
+  let {
+    options = [],
+    initialSelected = [],
+    onChange,
+    label,
+    id,
+    variant = 'secondary',
+    icon = undefined,
+    selectAllLabel,
+    clearAllLabel,
+    active = false,
+    disabled = false,
+    position = 'left',
+    initialSelectedAll = true,
+  }: Props = $props();
+
+  // svelte-ignore state_referenced_locally
+  let selectedOptions = $state(
+    initialSelected.length
+      ? initialSelected
+      : initialSelectedAll
+        ? options
+        : [],
+  );
 
   const open = writable(false);
 
diff --git a/src/lib/holocene/toaster.svelte b/src/lib/holocene/toaster.svelte
index ab19f7b0fa..e4902c3bfc 100644
--- a/src/lib/holocene/toaster.svelte
+++ b/src/lib/holocene/toaster.svelte
@@ -10,10 +10,14 @@
   import Link from './link.svelte';
   import ToastComponent from './toast.svelte';
 
-  export let pop: Toast['pop'];
-  export let toasts: Toast['toasts'];
-  export let closeButtonLabel: string;
-  export let position: Writable<ToastPosition>;
+  interface Props {
+    pop: Toast['pop'];
+    toasts: Toast['toasts'];
+    closeButtonLabel: string;
+    position: Writable<ToastPosition>;
+  }
+
+  let { pop, toasts, closeButtonLabel, position }: Props = $props();
 
   const dismissToast = (event: CustomEvent<{ id: string }>) => {
     pop(event.detail.id);
diff --git a/src/lib/holocene/user-menu.svelte b/src/lib/holocene/user-menu.svelte
index 0a4f48fa6f..59ef3faa09 100644
--- a/src/lib/holocene/user-menu.svelte
+++ b/src/lib/holocene/user-menu.svelte
@@ -13,9 +13,13 @@
   import Icon from './icon/icon.svelte';
   import MenuDivider from './menu/menu-divider.svelte';
 
-  export let logout: () => void;
+  interface Props {
+    logout: () => void;
+  }
+
+  let { logout }: Props = $props();
 
-  let showProfilePic = true;
+  let showProfilePic = $state(true);
 
   function fixImage() {
     showProfilePic = false;
@@ -34,7 +38,7 @@
         src={$authUser?.picture}
         alt={$authUser?.profile ?? translate('common.user-profile')}
         class="h-[24px] w-[24px] cursor-pointer"
-        on:error={fixImage}
+        onerror={fixImage}
         class:hidden={!showProfilePic}
       />
       <div
diff --git a/src/lib/pages/batch-operation.svelte b/src/lib/pages/batch-operation.svelte
index 03ac0c3186..f2bb7e9c8a 100644
--- a/src/lib/pages/batch-operation.svelte
+++ b/src/lib/pages/batch-operation.svelte
@@ -9,10 +9,14 @@
   import { autoRefresh } from '$lib/stores/batch-operations';
   import { routeForBatchOperations } from '$lib/utilities/route-for';
 
-  export let namespace: string;
-  export let jobId: string;
+  interface Props {
+    namespace: string;
+    jobId: string;
+  }
 
-  let fetchKey: number = 0;
+  let { namespace, jobId }: Props = $props();
+
+  let fetchKey = $state(0);
   let timeout: number;
 
   const handleToggleAutoRefresh = (
diff --git a/src/lib/pages/workflow-metadata.svelte b/src/lib/pages/workflow-metadata.svelte
index 92ffa6ff69..a18a623923 100644
--- a/src/lib/pages/workflow-metadata.svelte
+++ b/src/lib/pages/workflow-metadata.svelte
@@ -4,7 +4,7 @@
   import { translate } from '$lib/i18n/translate';
   import { workflowRun } from '$lib/stores/workflow-run';
 
-  $: ({ workflow } = $workflowRun);
+  const workflow = $derived($workflowRun.workflow);
 </script>
 
 <div class="flex flex-col gap-4">
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
index 0c55d6e0f9..1d1db25498 100644
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@@ -1,29 +1,33 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   import '../app.css';
 </script>
 
 <script lang="ts">
-  import { page } from '$app/stores';
+  import { page } from '$app/state';
 
   import Error from '$lib/holocene/error.svelte';
   import { isNetworkError } from '$lib/utilities/is-network-error';
   import { parseWithBigInt } from '$lib/utilities/parse-with-big-int';
 
-  $: error = $page.error;
-  $: status = $page.status;
-  let requestFromAPIError: Record<string, unknown>;
+  const error = $derived(page.error);
+  const status = $derived.by(() => {
+    let resolvedStatus: number = page.status;
+    let requestFromAPIError: Record<string, unknown>;
 
-  try {
-    if (error?.message) {
-      requestFromAPIError = parseWithBigInt(error.message);
-    }
+    try {
+      if (error?.message) {
+        requestFromAPIError = parseWithBigInt(error.message);
+      }
 
-    if (isNetworkError(requestFromAPIError)) {
-      status = requestFromAPIError.statusCode;
+      if (isNetworkError(requestFromAPIError)) {
+        resolvedStatus = requestFromAPIError.statusCode;
+      }
+    } catch (e) {
+      console.error(e);
     }
-  } catch (e) {
-    console.error(e);
-  }
+
+    return resolvedStatus;
+  });
 </script>
 
 <Error {error} {status} />

From c4ccaf18b6fbbdaaba71a09dc7d5794f7e25e72c Mon Sep 17 00:00:00 2001
From: Tegan Churchill <tegan.churchill@temporal.io>
Date: Mon, 4 May 2026 14:54:00 -0700
Subject: [PATCH 2/4] Remove redundant svelte:options

---
 src/lib/components/import/event-history-file-import.svelte      | 2 --
 .../workflow/configurable-table-headers-drawer/index.svelte     | 2 --
 src/lib/components/workflow/scheduler-table.svelte              | 2 --
 src/lib/holocene/month-picker.svelte                            | 2 --
 4 files changed, 8 deletions(-)

diff --git a/src/lib/components/import/event-history-file-import.svelte b/src/lib/components/import/event-history-file-import.svelte
index ca015a786b..6b7139a4b2 100644
--- a/src/lib/components/import/event-history-file-import.svelte
+++ b/src/lib/components/import/event-history-file-import.svelte
@@ -1,5 +1,3 @@
-<svelte:options runes />
-
 <script lang="ts">
   import { goto } from '$app/navigation';
 
diff --git a/src/lib/components/workflow/configurable-table-headers-drawer/index.svelte b/src/lib/components/workflow/configurable-table-headers-drawer/index.svelte
index 5b18fe65c5..f7812ffd21 100644
--- a/src/lib/components/workflow/configurable-table-headers-drawer/index.svelte
+++ b/src/lib/components/workflow/configurable-table-headers-drawer/index.svelte
@@ -1,5 +1,3 @@
-<svelte:options runes />
-
 <script lang="ts">
   import type { Readable } from 'svelte/store';
 
diff --git a/src/lib/components/workflow/scheduler-table.svelte b/src/lib/components/workflow/scheduler-table.svelte
index 8f7224c437..31590c99f8 100644
--- a/src/lib/components/workflow/scheduler-table.svelte
+++ b/src/lib/components/workflow/scheduler-table.svelte
@@ -1,5 +1,3 @@
-<svelte:options runes />
-
 <script lang="ts">
   import Copyable from '$lib/holocene/copyable/index.svelte';
   import Link from '$lib/holocene/link.svelte';
diff --git a/src/lib/holocene/month-picker.svelte b/src/lib/holocene/month-picker.svelte
index 2d5cce7500..acdca0be70 100644
--- a/src/lib/holocene/month-picker.svelte
+++ b/src/lib/holocene/month-picker.svelte
@@ -1,5 +1,3 @@
-<svelte:options runes />
-
 <script lang="ts">
   import Button from '$lib/holocene/button.svelte';
   import { monthNames } from '$lib/utilities/calendar';

From d672df2fc230281b91b5ff16a5a052febaacaed6 Mon Sep 17 00:00:00 2001
From: Tegan Churchill <tegan.churchill@temporal.io>
Date: Mon, 4 May 2026 15:09:55 -0700
Subject: [PATCH 3/4] Type fixes

---
 src/lib/holocene/day-of-week-picker.svelte | 4 ++--
 src/lib/holocene/month-picker.svelte       | 2 +-
 src/routes/+error.svelte                   | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/lib/holocene/day-of-week-picker.svelte b/src/lib/holocene/day-of-week-picker.svelte
index d7039e906e..0ea0a30ead 100644
--- a/src/lib/holocene/day-of-week-picker.svelte
+++ b/src/lib/holocene/day-of-week-picker.svelte
@@ -37,7 +37,7 @@
       {@const active = daysOfWeek.includes(value)}
       <Button
         variant="secondary"
-        class={active && 'bg-interactive-secondary-active'}
+        class={active ? 'bg-interactive-secondary-active' : undefined}
         on:click={(e) => onClick(e, value)}
       >
         {label}
@@ -49,7 +49,7 @@
       {@const active = daysOfWeek.includes(value)}
       <Button
         variant="secondary"
-        class={active && 'bg-interactive-secondary-active'}
+        class={active ? 'bg-interactive-secondary-active' : undefined}
         on:click={(e) => onClick(e, value)}
       >
         {label}
diff --git a/src/lib/holocene/month-picker.svelte b/src/lib/holocene/month-picker.svelte
index acdca0be70..35b4ac7e6f 100644
--- a/src/lib/holocene/month-picker.svelte
+++ b/src/lib/holocene/month-picker.svelte
@@ -29,7 +29,7 @@
     {@const active = months.includes(value)}
     <Button
       variant="secondary"
-      class={active && 'bg-interactive-secondary-active'}
+      class={active ? 'bg-interactive-secondary-active' : undefined}
       on:click={(e) => onClick(e, value)}
     >
       {label}
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
index 1d1db25498..cdcd346cc7 100644
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@@ -12,7 +12,7 @@
   const error = $derived(page.error);
   const status = $derived.by(() => {
     let resolvedStatus: number = page.status;
-    let requestFromAPIError: Record<string, unknown>;
+    let requestFromAPIError: Record<string, unknown> = {};
 
     try {
       if (error?.message) {

From 6874efae8810ab90b19139a09e0315ef579cacda Mon Sep 17 00:00:00 2001
From: Tegan Churchill <tegan.churchill@temporal.io>
Date: Mon, 4 May 2026 15:27:05 -0700
Subject: [PATCH 4/4] Type fixes

---
 .../lines-and-dots/svg/timeline-graph.svelte  | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/lines-and-dots/svg/timeline-graph.svelte b/src/lib/components/lines-and-dots/svg/timeline-graph.svelte
index e3254b44a4..dd2d181325 100644
--- a/src/lib/components/lines-and-dots/svg/timeline-graph.svelte
+++ b/src/lib/components/lines-and-dots/svg/timeline-graph.svelte
@@ -46,11 +46,18 @@
   const filteredGroups = $derived(
     getFailedOrPendingGroups(groups, $eventStatusFilter),
   );
-  const firstStartTime = $derived(
-    $fullEventHistory[0]?.eventTime < workflow.executionTime
-      ? $fullEventHistory[0]?.eventTime
-      : workflow.executionTime,
-  );
+  const firstStartTime = $derived.by(() => {
+    const firstEventTime = $fullEventHistory[0]?.eventTime;
+
+    if (!firstEventTime) {
+      return workflow.executionTime;
+    }
+
+    return firstEventTime < workflow.executionTime
+      ? firstEventTime
+      : workflow.executionTime;
+  });
+
   const startTime = $derived(
     (!isWorkflowDelayed(workflow) && firstStartTime) || workflow.startTime,
   );
@@ -127,7 +134,7 @@
         x2={canvasWidth - gutter + radius / 4}
         {timelineHeight}
         {startTime}
-        {duration}
+        duration={duration ?? 0}
       />
       <WorkflowRow {workflow} y={height} length={canvasWidth} />
       {#each filteredGroups as group, index (group.id)}