Improve schedule status pills + paused status

src/lib/components/schedule/schedule-view/schedule-view.svelte

@@ -8,12 +8,12 @@
   } from '$lib/components/detail-list';
   import DetailListLinkValue from '$lib/components/detail-list/detail-list-link-value.svelte';
   import StatusCounts from '$lib/components/status-counts.svelte';
-  import WorkflowStatusBadge from '$lib/components/workflow/workflow-status-badge.svelte';
   import Alert from '$lib/holocene/alert.svelte';
   import Link from '$lib/holocene/link.svelte';
   import MenuItem from '$lib/holocene/menu/menu-item.svelte';
   import SplitButton from '$lib/holocene/split-button.svelte';
   import { translate } from '$lib/i18n/translate';
+  import { BadgeStatus } from '$lib/io/badge-status';
   import { IconChevronLeft, IconFilter } from '$lib/io/icon';
   import { coreUserStore } from '$lib/stores/core-user';
   import {
@@ -65,8 +65,9 @@
       class="flex flex-wrap items-center gap-2 text-3xl"
       data-testid="schedule-name"
     >
-      <WorkflowStatusBadge
+      <BadgeStatus
         status={schedule?.schedule?.state?.paused ? 'Paused' : 'Running'}
+        data-testid="schedule-status"
       />
       <span class="select-all">
         {scheduleId}
@@ -149,7 +150,7 @@
 
   <dl class="-mt-2 flex flex-col gap-1">
     <dt class="text-secondary">
-      {translate('schedules.total-workflows-all-time')}
+      {translate('schedules.total-workflows')}
     </dt>
     <dd class="flex flex-wrap items-center gap-2">
       <span class="font-mono" data-testid="workflow-count"

src/lib/components/schedule/schedule-view/workflow-runs-recent.svelte

@@ -12,6 +12,7 @@
   import type {
     DescribeFullSchedule,
     RecentScheduleRun,
+    RecentScheduleRunEnriched,
   } from '$lib/types/schedule';
   import { routeForWorkflow } from '$lib/utilities/route-for';
 
@@ -34,7 +35,7 @@
   }: Props = $props();
 
   const recordedRuns = $derived(toRecentScheduleRuns(schedule));
-  const runsPromise = $derived(
+  const enrichedRunsPromise = $derived(
     fetchRecentScheduleRunStatuses({
       namespace,
       scheduleId: schedule.schedule_id,
@@ -54,7 +55,7 @@
     {openTriggerConfirmationModal}
   />
 {:else}
-  {#await runsPromise}
+  {#await enrichedRunsPromise}
     {@render runList(recordedRuns)}
   {:then runs}
     {@render runList(runs)}
@@ -63,28 +64,38 @@
   {/await}
 {/if}
 
-{#snippet runList(runs: RecentScheduleRun[])}
+{#snippet runList(runs: (RecentScheduleRun | RecentScheduleRunEnriched)[])}
   <ul class={twMerge('flex flex-col gap-2', className)}>
     {#each runs as run, i (run.runId || i)}
+      {@const isEnriched =
+        'delayed' in run && 'taskFailure' in run && 'inVisibility' in run}
       <li
         class="grid grid-cols-[max-content_1fr] gap-x-2 gap-y-1 border-b border-primary py-2 sm:grid-cols-[minmax(max-content,7rem)_1fr_max-content]"
       >
         <div class="col-start-1 row-start-1 flex items-center">
-          <WorkflowStatusBadge status={run.status} />
+          <WorkflowStatusBadge
+            status={run.status}
+            delayed={isEnriched && run.delayed}
+            taskFailure={isEnriched && run.taskFailure}
+          />
         </div>
 
         <div
           class="col-span-2 row-start-2 flex justify-center sm:col-span-1 sm:col-start-2 sm:row-start-1 sm:justify-start"
         >
-          <Link
-            href={routeForWorkflow({
-              workflow: run.workflowId,
-              run: run.runId,
-              namespace,
-            })}
-          >
+          {#if isEnriched && run.inVisibility}
+            <Link
+              href={routeForWorkflow({
+                workflow: run.workflowId,
+                run: run.runId,
+                namespace,
+              })}
+            >
+              {run.workflowId}
+            </Link>
+          {:else}
             {run.workflowId}
-          </Link>
+          {/if}
         </div>
 
         <p

src/lib/components/schedule/schedules-list/schedules-table-row.svelte

@@ -6,10 +6,10 @@
 
   import SearchAttributeValue from '$lib/components/table/search-attribute-value.svelte';
   import Timestamp from '$lib/components/timestamp.svelte';
-  import WorkflowStatusBadge from '$lib/components/workflow/workflow-status-badge.svelte';
   import Link from '$lib/holocene/link.svelte';
   import TableCellWithFilterOrCopyButtons from '$lib/holocene/table/table-cell-with-filter-or-copy-buttons.svelte';
   import { translate } from '$lib/i18n/translate';
+  import { BadgeStatus } from '$lib/io/badge-status';
   import type { ConfigurableTableHeader } from '$lib/stores/configurable-table-columns';
   import { customSearchAttributes } from '$lib/stores/search-attributes';
   import {
@@ -68,7 +68,7 @@
     {@const clampToWidth = width !== undefined && COLUMN_WIDTH_CLAMP_CLASSES}
     {#if label === translate('common.status')}
       <td class={twMerge('cell', clampToWidth)} style={widthStyle}>
-        <WorkflowStatusBadge {status} />
+        <BadgeStatus {status} data-testid="schedule-status" />
       </td>
     {:else if label === translate('schedules.id')}
       <td

src/lib/components/standalone-activities/activity-status-badge.svelte

@@ -7,7 +7,6 @@
   } from '$lib/io/badge-status';
   import { IconClock } from '$lib/io/icon';
   import type { ActivityStatus } from '$lib/utilities/get-activity-status-and-count';
-  import { getWorkflowStatusLabel } from '$lib/utilities/get-workflow-status-label';
 
   interface Props {
     status: ActivityStatus;
@@ -16,7 +15,6 @@
 
   let { status, delayed = false }: Props = $props();
 
-  const text = $derived(getWorkflowStatusLabel(status));
   const delayedText = $derived(translate('workflows.delayed'));
   const extensions = $derived<BadgeStatusExtensions>([
     delayed && {
@@ -27,5 +25,5 @@
 </script>
 
 <Tooltip topLeft text={delayedText} hide={!delayed}>
-  <BadgeStatus {status} {text} {extensions} data-testid="execution-status" />
+  <BadgeStatus {status} {extensions} data-testid="execution-status" />
 </Tooltip>

src/lib/components/standalone-nexus-operations/nexus-operation-status-badge.svelte

@@ -2,7 +2,6 @@
   import { BadgeStatus } from '$lib/io/badge-status';
   import type { NexusOperationExecutionStatus } from '$lib/types/nexus-operation-execution';
   import { toNexusOperationStatus } from '$lib/utilities/get-nexus-operation-status-and-count';
-  import { getWorkflowStatusLabel } from '$lib/utilities/get-workflow-status-label';
 
   interface Props {
     status: NexusOperationExecutionStatus;
@@ -11,7 +10,6 @@
   let { status }: Props = $props();
 
   const badgeStatus = $derived(toNexusOperationStatus(status));
-  const text = $derived(getWorkflowStatusLabel(badgeStatus));
 </script>
 
-<BadgeStatus status={badgeStatus} {text} data-testid="execution-status" />
+<BadgeStatus status={badgeStatus} data-testid="execution-status" />

src/lib/components/status-counts.svelte

@@ -12,7 +12,6 @@
     refresh as workflowRefresh,
   } from '$lib/stores/workflows';
   import { getStatusAndCountOfGroup } from '$lib/utilities/get-group-status-and-count';
-  import { getWorkflowStatusLabel } from '$lib/utilities/get-workflow-status-label';
 
   import {
     createStatusCountsState,
@@ -64,7 +63,6 @@
       {#if status}
         <BadgeStatus
           {status}
-          text={getWorkflowStatusLabel(status)}
           {count}
           extensions={difference
             ? [

src/lib/components/workflow/workflow-status-badge.svelte

@@ -29,7 +29,6 @@
     ...rest
   }: Props = $props();
 
-  const text = $derived(getWorkflowStatusLabel(status));
   const delayedText = $derived(translate('workflows.delayed'));
   const taskFailureText = $derived(translate('workflows.task-failure'));
   const extensions = $derived<BadgeStatusExtensions>([
@@ -53,12 +52,15 @@
   {#if status && isWorkflowStatusType(status)}
     <BadgeStatus
       {status}
-      {text}
       {extensions}
       {...rest}
       data-testid="execution-status"
     />
   {:else}
-    <Badge {text} {...rest} data-testid="execution-status" />
+    <Badge
+      text={getWorkflowStatusLabel(status)}
+      {...rest}
+      data-testid="execution-status"
+    />
   {/if}
 </Tooltip>

src/lib/i18n/locales/en/schedules.ts

@@ -276,5 +276,5 @@ export const Strings = {
   'add-another-spec': '+ Add another schedule spec',
   'run-time-based-on-timezone':
     'Based on the specified timezone ({{- timezoneName}})',
-  'total-workflows-all-time': 'Total Workflows (All Time)',
+  'total-workflows': 'Total Workflows',
 } as const;

src/lib/io/badge-count/badge-count.svelte

@@ -2,16 +2,22 @@
   export type BadgeCountSize = 'sm' | 'md';
 
   const sharedClasses =
-    'inline-flex whitespace-nowrap rounded-full border border-secondary bg-surface-tertiary font-mono font-medium leading-none text-primary uppercase';
+    'inline-flex whitespace-nowrap rounded-full border border-secondary bg-surface-tertiary font-sans uppercase font-medium leading-none text-primary';
   const segmentClasses =
     'inline-flex flex-nowrap items-center justify-center gap-1';
 
   const sizeClasses: Record<
     BadgeCountSize,
     { badge: string; segment: string }
   > = {
-    sm: { badge: 'text-2xs', segment: 'py-0.5 px-1' },
-    md: { badge: 'text-xs', segment: 'py-1 px-1.5' },
+    sm: {
+      badge: 'text-2xs leading-none min-h-[16px] py-0.5',
+      segment: ' px-1',
+    },
+    md: {
+      badge: 'text-xs leading-none min-h-[20px] py-0.5 ',
+      segment: 'px-1.5',
+    },
   };
 </script>
 
@@ -43,12 +49,15 @@
   class={twMerge(sharedClasses, sizeClasses[size].badge, className)}
   {...rest}
 >
-  <span class={twMerge(segmentClasses, sizeClasses[size].segment)}>{value}</span
-  >
+  <span class={twMerge(segmentClasses, sizeClasses[size].segment)}>
+    <span>{value}</span>
+  </span>
   {#if total !== undefined}
-    <span class="inline-flex items-center justify-center py-0.5">/</span>
-    <span class={twMerge(segmentClasses, sizeClasses[size].segment)}
-      >{total}</span
-    >
+    <span class="inline-flex items-center justify-center">
+      <span>/</span>
+    </span>
+    <span class={twMerge(segmentClasses, sizeClasses[size].segment)}>
+      <span>{total}</span>
+    </span>
   {/if}
 </span>

src/lib/io/badge-status/badge-status.stories.svelte

@@ -42,6 +42,7 @@
       size: { control: 'select', options: sizes },
       TrailIcon: { control: false },
       extensions: { control: 'object' },
+      showImpliedExtensions: { control: 'boolean' },
       class: { table: { disable: true } },
     },
     parameters: {
@@ -61,6 +62,26 @@
 
 <Story name="With trail icon" args={{ TrailIcon: IconHeartbeat }} />
 
+<Story name="Implied pause extension" args={{ status: 'Paused' }} />
+
+<Story
+  name="Without implied extensions"
+  args={{ status: 'Paused', showImpliedExtensions: false }}
+/>
+
+<Story
+  name="Implied and conditional extensions"
+  args={{
+    status: 'Paused',
+    extensions: [
+      false,
+      null,
+      undefined,
+      { text: 'extra', colorScheme: 'neutral' },
+    ],
+  }}
+/>
+
 <Story
   name="With extensions"
   args={{