From 2ce3d4278c84bf67d9c859da213a85ebf79633c3 Mon Sep 17 00:00:00 2001
From: Matt Jenkinson <75292329+mattdjenkinson@users.noreply.github.com>
Date: Fri, 6 Nov 2026 13:25:23 +0000
Subject: [PATCH 1/4] feat(ui): Redesign the workload overview

The overview now leads with a summary card in the ALB overview's style:
status, endpoint, when it last changed, and the last hour's instances,
CPU, memory, network and requests. Instances and configuration move into
cards of their own, and recent activity replaces the recent-logs block
that was usually empty.

A deploy takes seconds, faster than the page polls, so the card no longer
shows a step-by-step progress bar. It says what it can say truthfully:
deploying, deployed (with a timeline rebuilt from condition timestamps),
stalled with the cause the API reports (a missing Secret or ConfigMap,
quota), or failed. Pages poll every 3s until instances are actually
ready, not just until the workload reports Available.

Instance pages explain a failure in plain words with what to try, and the
instances table shows per-instance network traffic and status badges in
the portal's style. The workload Metrics tab gains network in and out.
---
 ui/consumer/src/components/detail-list.tsx    |   4 +-
 .../src/components/instance-problem.tsx       |  63 ++
 .../src/components/metric-sparkline.tsx       |   4 +
 .../src/components/resource-activity.tsx      |  39 +-
 ui/consumer/src/components/skeletons.tsx      |  56 +-
 .../src/components/workload-instances.tsx     | 286 ++++++---
 .../src/components/workload-overview-card.tsx | 564 ++++++++++++++++++
 ui/consumer/src/components/workload-table.tsx |   2 +
 ui/consumer/src/lib/api.ts                    |  57 +-
 ui/consumer/src/lib/deploy-presenters.test.ts | 160 +++++
 ui/consumer/src/lib/deploy-presenters.ts      | 241 ++++++++
 ui/consumer/src/lib/metrics-queries.test.ts   |  22 +
 ui/consumer/src/lib/metrics-queries.ts        |  30 +-
 .../src/lib/network-interface-metrics.test.ts |  19 +-
 .../src/lib/network-interface-metrics.ts      |  72 +++
 .../src/lib/use-workload-overview-state.ts    |  15 +-
 .../src/lib/workload-presenters.test.ts       | 155 +++++
 ui/consumer/src/lib/workload-presenters.ts    | 157 +++++
 ui/consumer/src/lib/workload-settling.ts      |  20 +
 ui/consumer/src/pages/instance-overview.tsx   |  19 +-
 ui/consumer/src/pages/workload-detail.tsx     | 379 +++++++-----
 ui/consumer/src/pages/workload-metrics.tsx    |  42 +-
 22 files changed, 2081 insertions(+), 325 deletions(-)
 create mode 100644 ui/consumer/src/components/instance-problem.tsx
 create mode 100644 ui/consumer/src/components/workload-overview-card.tsx
 create mode 100644 ui/consumer/src/lib/deploy-presenters.test.ts
 create mode 100644 ui/consumer/src/lib/deploy-presenters.ts
 create mode 100644 ui/consumer/src/lib/workload-settling.ts

diff --git a/ui/consumer/src/components/detail-list.tsx b/ui/consumer/src/components/detail-list.tsx
index b4b34079..c88ada23 100644
--- a/ui/consumer/src/components/detail-list.tsx
+++ b/ui/consumer/src/components/detail-list.tsx
@@ -46,7 +46,7 @@ export function DetailList({
   );
 }
 
-/** Compact status badge matching portal `BadgeStatus` sizing. */
+/** Compact status badge, styled like cloud-portal's `BadgeStatus` (whose classes the host compiles). */
 export function StatusBadge({
   type,
   children,
@@ -59,7 +59,7 @@ export function StatusBadge({
       <Badge
         type={type}
         theme="light"
-        className="text-xs flex cursor-default items-center gap-1.5 px-1 py-0.5 font-medium">
+        className="text-5xs flex cursor-default items-center gap-1.5 px-1 py-0.5 font-bold tracking-[0.03em] uppercase">
         {children}
       </Badge>
     </div>
diff --git a/ui/consumer/src/components/instance-problem.tsx b/ui/consumer/src/components/instance-problem.tsx
new file mode 100644
index 00000000..cf379859
--- /dev/null
+++ b/ui/consumer/src/components/instance-problem.tsx
@@ -0,0 +1,63 @@
+/**
+ * The instance overview's problem callout: what is wrong in plain words, the
+ * platform's own message, and what to try. Shown only while the instance is
+ * failing or crashing; the General card's status badge stays as the summary.
+ */
+import { STATUS_TONE_COLOR, type InstanceProblem } from '../lib/workload-presenters';
+import { Icon } from '@datum-cloud/datum-ui/icons';
+import { CircleXIcon, LogsIcon, TriangleAlertIcon } from 'lucide-react';
+import { Link } from 'react-router';
+
+function tint(color: string, percent: number): string {
+  return `color-mix(in oklab, ${color} ${percent}%, transparent)`;
+}
+
+export function InstanceProblemCallout({ problem, logsHref }: { problem: InstanceProblem; logsHref?: string }) {
+  const color = STATUS_TONE_COLOR[problem.tone];
+  return (
+    <section
+      role="status"
+      aria-label={problem.title}
+      className="flex gap-3 rounded-xl border px-4 py-4"
+      style={{ background: tint(color, 6), borderColor: tint(color, 40) }}
+      data-testid="compute-plugin-instance-problem">
+      <Icon
+        icon={problem.tone === 'error' ? CircleXIcon : TriangleAlertIcon}
+        size={18}
+        className="mt-0.5 shrink-0"
+        style={{ color }}
+        aria-hidden
+      />
+      <div className="flex min-w-0 flex-1 flex-col gap-2">
+        <div className="flex flex-wrap items-center justify-between gap-3">
+          <h2 className="text-sm font-semibold">{problem.title}</h2>
+          {problem.showLogs && logsHref ? (
+            <Link
+              to={logsHref}
+              className="bg-foreground text-background inline-flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs font-medium hover:opacity-90">
+              <Icon icon={LogsIcon} size={12} aria-hidden />
+              View logs
+            </Link>
+          ) : null}
+        </div>
+        {problem.message ? (
+          <p className="text-muted-foreground font-mono text-xs" style={{ overflowWrap: 'anywhere' }}>
+            {problem.message}
+          </p>
+        ) : null}
+        {problem.hints.length > 0 ? (
+          <ul className="flex flex-col gap-1 text-sm">
+            {problem.hints.map((hint) => (
+              <li key={hint} className="flex gap-2">
+                <span className="text-muted-foreground" aria-hidden>
+                  •
+                </span>
+                <span>{hint}</span>
+              </li>
+            ))}
+          </ul>
+        ) : null}
+      </div>
+    </section>
+  );
+}
diff --git a/ui/consumer/src/components/metric-sparkline.tsx b/ui/consumer/src/components/metric-sparkline.tsx
index f165dc10..57dfb772 100644
--- a/ui/consumer/src/components/metric-sparkline.tsx
+++ b/ui/consumer/src/components/metric-sparkline.tsx
@@ -28,6 +28,7 @@ export function MetricSparkline({
   denied = false,
   allocated,
   series,
+  hideValue = false,
 }: {
   /** Project whose metrics to read. */
   projectId: string | undefined;
@@ -52,6 +53,8 @@ export function MetricSparkline({
    * in one request). When given, `query` is ignored and nothing is fetched.
    */
   series?: readonly ChartDataPoint[];
+  /** Draw the spark alone, for callers that show the value themselves. */
+  hideValue?: boolean;
 }) {
   const gradientId = useId().replace(/[^a-zA-Z0-9_-]/g, '');
   const provided = series !== undefined;
@@ -154,6 +157,7 @@ export function MetricSparkline({
         )}
       </div>
       <span
+        hidden={hideValue}
         className="text-muted-foreground shrink-0 text-xs tabular-nums"
         title={allocated && last !== undefined && Number.isFinite(last) ? rawTitle(last * allocated, allocated, format) : undefined}>
         {formatKpiValue(Number.isFinite(last) ? last : undefined, allocated ? 'percent' : format)}
diff --git a/ui/consumer/src/components/resource-activity.tsx b/ui/consumer/src/components/resource-activity.tsx
index c0618547..96cb5771 100644
--- a/ui/consumer/src/components/resource-activity.tsx
+++ b/ui/consumer/src/components/resource-activity.tsx
@@ -15,6 +15,8 @@ export function ResourceActivity({
   filter,
   liveNameMatch,
   resourceLinkResolver,
+  bare = false,
+  pageSize = 30,
 }: {
   projectId?: string;
   /** CEL that scopes the feed to this resource (see `lib/activity.ts`). */
@@ -28,6 +30,9 @@ export function ResourceActivity({
    */
   liveNameMatch: string;
   resourceLinkResolver: ResourceLinkResolver;
+  /** Render the feed alone, for a parent that frames it (the Overview). */
+  bare?: boolean;
+  pageSize?: number;
 }) {
   const client = useActivityClient(projectId);
   // A new object resets the feed's filter state, so keep it stable.
@@ -42,23 +47,27 @@ export function ResourceActivity({
   );
 
   if (!client) return null;
+  const feed = (
+    <ActivityFeed
+      client={client}
+      initialFilters={initialFilters}
+      resourceLinkResolver={resourceLinkResolver}
+      // Every row is in this project; the project badge would only repeat it.
+      tenantRenderer={() => null}
+      hiddenFilters={['resourceKinds', 'apiGroups', 'resourceName', 'resourceNamespaces']}
+      variant="timeline"
+      compact
+      enableStreaming
+      infiniteScroll={false}
+      // The Overview shows the latest few; filtering is the Activity tab's job.
+      showFilters={!bare}
+      pageSize={pageSize}
+    />
+  );
+  if (bare) return <div data-testid="compute-plugin-activity">{feed}</div>;
   return (
     <Card size="sm" className="w-full overflow-hidden" data-testid="compute-plugin-activity">
-      <CardContent>
-        <ActivityFeed
-          client={client}
-          initialFilters={initialFilters}
-          resourceLinkResolver={resourceLinkResolver}
-          // Every row is in this project; the project badge would only repeat it.
-          tenantRenderer={() => null}
-          hiddenFilters={['resourceKinds', 'apiGroups', 'resourceName', 'resourceNamespaces']}
-          variant="timeline"
-          compact
-          enableStreaming
-          infiniteScroll={false}
-          pageSize={30}
-        />
-      </CardContent>
+      <CardContent>{feed}</CardContent>
     </Card>
   );
 }
diff --git a/ui/consumer/src/components/skeletons.tsx b/ui/consumer/src/components/skeletons.tsx
index feb10ab8..18609bcb 100644
--- a/ui/consumer/src/components/skeletons.tsx
+++ b/ui/consumer/src/components/skeletons.tsx
@@ -5,7 +5,6 @@
  * Panel heights that the host stylesheet does not compile (`27rem`, `32rem`,
  * chart `224px`) are inline styles, matching the live pages.
  */
-import { DetailList, DETAILS_GRID_CLASS, OPEN_ROW_PADDING } from './detail-list';
 import { Card, CardContent, CardHeader } from '@datum-cloud/datum-ui/card';
 import { STRIP_GAP } from './stat-strip';
 import { Skeleton } from '@datum-cloud/datum-ui/skeleton';
@@ -215,31 +214,40 @@ function SectionHeaderBone({ action = false }: { action?: boolean }) {
 export function WorkloadOverviewSkeleton() {
   return (
     <div className="flex flex-col gap-6" aria-busy="true" data-testid="compute-plugin-loading-workload-overview">
-      <div className="flex h-9 items-center gap-3 px-1">
-        <Bone className="size-4 shrink-0 rounded-full" />
-        <Bone className="h-3 w-48" />
-      </div>
-      <div className="flex flex-col gap-2">
-        <SectionHeaderBone />
+      <Card size="sm" sectioned className="overflow-hidden">
+        <div className="flex items-start gap-3 px-4 py-4">
+          <Bone className="size-9 shrink-0 rounded-full" />
+          <div className="flex flex-1 flex-col gap-2">
+            <Bone className="h-4 w-40" />
+            <Bone className="h-3 w-64" />
+          </div>
+        </div>
+        <div className="grid grid-cols-2 gap-4 border-t px-4 py-4 sm:flex">
+          {Array.from({ length: 4 }, (_, index) => (
+            <div key={index} className="flex flex-1 flex-col gap-2">
+              <Bone className="h-3 w-16" />
+              <Bone className="h-5 w-12" />
+              <Bone className="h-6 w-full" />
+            </div>
+          ))}
+        </div>
+      </Card>
+      <Panel>
         <InstanceRowsSkeleton />
-      </div>
-      <div className="flex flex-col gap-2">
-        <SectionHeaderBone action />
-        <Bone className="min-h-48 w-full rounded-md" />
-      </div>
-      <div className="flex flex-col gap-2">
-        <SectionHeaderBone />
-        {/* The real rows, with bones for text, so heights and dividers match at every width. */}
-        <div style={OPEN_ROW_PADDING}>
-          <DetailList
-            className={DETAILS_GRID_CLASS}
-            itemClassName="py-2"
-            items={Array.from({ length: 6 }, () => ({
-              label: <Bone className="h-3 w-24" />,
-              content: <Bone className="h-3 w-32" />,
-            }))}
-          />
+      </Panel>
+      <div className="grid grid-cols-1 items-start gap-6 lg:grid-cols-2">
+        <div className="flex flex-col gap-2">
+          <SectionHeaderBone action />
+          <Bone className="min-h-48 w-full rounded-md" />
         </div>
+        <Panel>
+          {Array.from({ length: 6 }, (_, index) => (
+            <div key={index} className="flex gap-4">
+              <Bone className="h-3 w-24" />
+              <Bone className="h-3 w-32" />
+            </div>
+          ))}
+        </Panel>
       </div>
     </div>
   );
diff --git a/ui/consumer/src/components/workload-instances.tsx b/ui/consumer/src/components/workload-instances.tsx
index d0e4fdf8..27c860b4 100644
--- a/ui/consumer/src/components/workload-instances.tsx
+++ b/ui/consumer/src/components/workload-instances.tsx
@@ -1,19 +1,37 @@
 /**
- * The workload Overview's Instances section: one thin row per instance, in
- * the project home page's row shape (`h-10`, `px-2`, `rounded-md`,
- * `hover:bg-accent`). Each row says whether the instance is serving and why
- * not, where it runs, how to reach it on the private network, and links to
- * its Logs, Shell and Metrics.
+ * The workload Overview's Instances card: a table with one row per instance
+ * saying whether it is serving and why not, where it runs, its last hour of
+ * network traffic, how to reach it on the private network, and links to its Logs, Shell
+ * and Metrics. The workload-name prefix every instance shares is muted so the
+ * part that tells them apart stands out.
  */
 import { formatLocationName, formatLocationTooltip, type LocationIndex } from '../lib/locations';
 import type { ApiError } from '../lib/api';
-import { instanceReadiness, instancesSectionState, privateNameState } from '../lib/workload-presenters';
+import { seriesByWorkload } from '../lib/metrics-queries';
+import { useWorkloadNetworkMetrics } from '../lib/network-interface-metrics';
+import { usePrometheusChart } from '../lib/prometheus';
+import {
+  instanceNameParts,
+  instanceReadiness,
+  instancesSectionState,
+  STATUS_TONE_COLOR,
+  type StatusTone,
+} from '../lib/workload-presenters';
 import type { Instance } from '../schema';
+import { StatusBadge } from './detail-list';
+import { MetricSparkline } from './metric-sparkline';
+import { useOverviewRange } from './overview-range';
 import { InstanceRowsSkeleton } from './skeletons';
-import { QuietNotice, SectionFrame, StatusDot } from './surface';
+import { QuietNotice } from './surface';
 import { LinkButton } from '@datum-cloud/datum-ui/button';
+import { Badge } from '@datum-cloud/datum-ui/badge';
+import { Card, CardHeader, CardTitle } from '@datum-cloud/datum-ui/card';
 import { Icon } from '@datum-cloud/datum-ui/icons';
-import { ChartLineIcon, LogsIcon, SquareTerminalIcon } from 'lucide-react';
+import { cn } from '@datum-cloud/datum-ui/utils';
+import { Tooltip } from '@datum-cloud/datum-ui/tooltip';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@datum-cloud/datum-ui/table';
+import { ChartLineIcon, LogsIcon, ServerIcon, SquareTerminalIcon } from 'lucide-react';
+import { useMemo } from 'react';
 import { Link } from 'react-router';
 
 /** The address a person would dial first: the in-network one, else the external. */
@@ -21,29 +39,13 @@ function primaryAddress(instance: Instance): string | undefined {
   return instance.addresses[0] ?? instance.internalIP ?? instance.externalIPs[0] ?? instance.externalIP;
 }
 
-function PrivateName({ instance }: { instance: Instance }) {
-  const state = privateNameState(instance);
-  if (state.kind === 'missing') {
-    return (
-      <span className="text-muted-foreground truncate text-xs" data-testid="compute-plugin-instance-private-name">
-        {state.reason}
-      </span>
-    );
-  }
-  const [first, ...rest] = state.names;
-  return (
-    <span
-      className="truncate font-mono text-xs"
-      title={state.names.join('\n')}
-      data-testid="compute-plugin-instance-private-name">
-      {first}
-      {rest.length > 0 ? <span className="text-muted-foreground"> +{rest.length}</span> : null}
-    </span>
-  );
-}
-
-// Inline: the host stylesheet doesn't reliably compile `w-56`.
-const COLUMN_STYLE = { width: '14rem', maxWidth: '100%' } as const;
+/** Badge colours per readiness tone; anything still coming up reads as info. */
+const BADGE_TYPE: Record<StatusTone, 'success' | 'warning' | 'danger' | 'info'> = {
+  ok: 'success',
+  warn: 'warning',
+  error: 'danger',
+  muted: 'info',
+};
 
 const ROW_ACTIONS = [
   { label: 'Logs', suffix: '/logs', icon: LogsIcon },
@@ -51,67 +53,117 @@ const ROW_ACTIONS = [
   { label: 'Metrics', suffix: '/metrics', icon: ChartLineIcon },
 ] as const;
 
+// Column headers as the ALB Backends card sets them.
+const HEAD = 'text-muted-foreground text-3xs h-9 font-semibold uppercase';
+// Inline: the host compiles no fixed-width sparkline column.
+const SPARK_CELL = { width: '8rem', minWidth: '7rem' } as const;
+
 function InstanceRow({
   instance,
+  workloadName,
   href,
   locationIndex,
+  projectId,
+  traffic,
+  trafficLoading,
+  showTraffic,
+  timeRange,
+  deploying,
 }: {
   instance: Instance;
+  workloadName: string;
   href: string;
   locationIndex: LocationIndex;
+  projectId?: string;
+  traffic: Parameters<typeof MetricSparkline>[0]['series'];
+  trafficLoading: boolean;
+  showTraffic: boolean;
+  timeRange: { start: Date; end: Date };
+  deploying: boolean;
 }) {
   const readiness = instanceReadiness(instance);
   const address = primaryAddress(instance);
+  const name = instanceNameParts(instance.name, workloadName);
+  // Not ready is expected while a deploy is under way, so only tint it afterwards.
+  const tinted = readiness.tone === 'error' || (readiness.tone === 'warn' && !deploying);
   return (
-    <li
-      className="hover:bg-accent flex min-h-10 flex-wrap items-center gap-x-4 gap-y-1 rounded-md px-2 py-1"
-      data-testid="compute-plugin-instance-row">
-      <span className="flex min-w-0 shrink-0" style={COLUMN_STYLE}>
-        <StatusDot tone={readiness.tone} label={readiness.label} reason={readiness.reason} />
-      </span>
-      <Link
-        to={href}
-        className="text-foreground min-w-0 shrink-0 truncate font-mono text-sm hover:underline"
-        style={COLUMN_STYLE}>
-        {instance.name}
-      </Link>
-      <span
-        className="text-muted-foreground w-32 shrink-0 truncate text-xs"
+    <TableRow
+      data-testid="compute-plugin-instance-row"
+      style={
+        tinted ? { background: `color-mix(in oklab, ${STATUS_TONE_COLOR[readiness.tone]} 6%, transparent)` } : undefined
+      }>
+      <TableCell className="pl-(--card-px)">
+        <Link to={href} className="flex min-w-0 items-center font-mono text-xs hover:underline" title={instance.name}>
+          <span className="truncate">
+            {name.prefix ? <span className="text-muted-foreground hidden md:inline">{name.prefix}</span> : null}
+            <span className="font-medium">{name.rest}</span>
+          </span>
+        </Link>
+      </TableCell>
+      <TableCell
+        className="text-muted-foreground hidden text-xs md:table-cell"
         title={instance.location ? formatLocationTooltip(instance.location, locationIndex) : undefined}>
         {instance.location ? formatLocationName(instance.location, locationIndex) : 'Unknown location'}
-      </span>
-      <span className="flex min-w-0 flex-1 items-center gap-4">
-        <PrivateName instance={instance} />
-        {address ? (
-          <span className="text-muted-foreground shrink-0 font-mono text-xs" title={instance.addresses.join('\n')}>
-            {address}
-          </span>
-        ) : null}
-      </span>
-      <span className="flex shrink-0 items-center gap-1">
-        {ROW_ACTIONS.map((action) => (
-          <LinkButton
-            key={action.label}
-            as={Link}
-            href={`${href}${action.suffix}`}
-            type="quaternary"
-            theme="borderless"
-            size="xs"
-            icon={<Icon icon={action.icon} size={12} aria-hidden />}
-            aria-label={`${action.label} for ${instance.name}`}>
-            {action.label}
-          </LinkButton>
-        ))}
-      </span>
-    </li>
+      </TableCell>
+      <TableCell>
+        {readiness.reason ? (
+          // Focusable so keyboard users can open the reason too.
+          <Tooltip message={readiness.reason}>
+            <span tabIndex={0} className="inline-flex cursor-help" aria-label={`${readiness.label}: ${readiness.reason}`}>
+              <StatusBadge type={BADGE_TYPE[readiness.tone]}>{readiness.label}</StatusBadge>
+            </span>
+          </Tooltip>
+        ) : (
+          <StatusBadge type={BADGE_TYPE[readiness.tone]}>{readiness.label}</StatusBadge>
+        )}
+      </TableCell>
+      {showTraffic ? (
+        <TableCell className="hidden md:table-cell" style={SPARK_CELL}>
+          <MetricSparkline
+            projectId={projectId}
+            timeRange={timeRange}
+            format="bitsPerSecond"
+            series={traffic ?? []}
+            pending={trafficLoading && !traffic}
+            color="var(--color-badge-info)"
+            compact
+            wide
+            hideValue
+          />
+        </TableCell>
+      ) : null}
+      <TableCell className="text-muted-foreground hidden font-mono text-xs md:table-cell" title={instance.addresses.join('\n') || undefined}>
+        {address ?? '—'}
+      </TableCell>
+      <TableCell className="pr-(--card-px)">
+        <span className="flex items-center justify-end gap-0.5">
+          {ROW_ACTIONS.map((action) => (
+            <Tooltip key={action.label} message={action.label}>
+              <span className="inline-flex">
+                <LinkButton
+                  as={Link}
+                  href={`${href}${action.suffix}`}
+                  type="quaternary"
+                  theme="borderless"
+                  size="xs"
+                  aria-label={`${action.label} for ${instance.name}`}
+                  icon={<Icon icon={action.icon} size={14} aria-hidden />}
+                />
+              </span>
+            </Tooltip>
+          ))}
+        </span>
+      </TableCell>
+    </TableRow>
   );
 }
 
 /**
- * The Instances section: rows once any instance is known, placeholder rows
+ * The Instances card: a table once any instance is known, placeholder rows
  * while the query is unanswered, and a quiet notice for none or a failure.
  */
 export function WorkloadInstances({
+  workloadName,
   instances,
   loading,
   error,
@@ -119,7 +171,10 @@ export function WorkloadInstances({
   instanceHref,
   deploying,
   deleting,
+  projectId,
+  metricsDenied,
 }: {
+  workloadName: string;
   instances: readonly Instance[];
   /** The instances query hasn't answered yet. */
   loading: boolean;
@@ -129,30 +184,83 @@ export function WorkloadInstances({
   /** Still coming up, so no instances yet is expected. */
   deploying: boolean;
   deleting: boolean;
+  projectId?: string;
+  metricsDenied: boolean;
 }) {
   const state = instancesSectionState({ count: instances.length, loading, error, deploying, deleting });
+  const range = useOverviewRange('1h');
+  const network = useWorkloadNetworkMetrics(metricsDenied ? undefined : projectId, instances);
+  const showTraffic = !!network.throughputQuery;
+  const chart = usePrometheusChart(projectId, network.throughputQuery, range.timeRange, {
+    enabled: showTraffic,
+    keepPrevious: true,
+  });
+  // Interface series folded into one per instance (an instance may have several NICs).
+  const trafficByInstance = useMemo(
+    () => (chart.error ? {} : seriesByWorkload(chart.data, 'network', network.refsByInstance)),
+    [chart.data, chart.error, network.refsByInstance]
+  );
+
   return (
-    <SectionFrame
-      title="Instances"
-      count={instances.length}
-      isLoading={state.kind === 'loading'}
-      testId="compute-plugin-workload-instances">
+    <Card sectioned size="sm" className="overflow-hidden" data-testid="compute-plugin-workload-instances">
+      <CardHeader size="sm" bordered>
+        <CardTitle className="flex items-center gap-2 text-sm">
+          <Icon icon={ServerIcon} size={16} className="text-secondary" aria-hidden />
+          Instances
+          {state.kind !== 'loading' && instances.length > 0 ? (
+            <Badge type="muted" theme="solid" className="text-3xs h-5 rounded-md px-1.5 tabular-nums">
+              {instances.length}
+            </Badge>
+          ) : null}
+        </CardTitle>
+      </CardHeader>
       {state.kind === 'loading' ? (
-        <InstanceRowsSkeleton />
+        <div className="px-2 py-2">
+          <InstanceRowsSkeleton />
+        </div>
       ) : state.kind === 'notice' ? (
-        <QuietNotice testId="compute-plugin-instances-empty" title={state.title} description={state.description} />
+        <div className="px-4 py-4">
+          <QuietNotice testId="compute-plugin-instances-empty" title={state.title} description={state.description} />
+        </div>
       ) : (
-        <ul className="flex flex-col">
-          {instances.map((instance) => (
-            <InstanceRow
-              key={instance.uid || instance.name}
-              instance={instance}
-              href={instanceHref(instance.name)}
-              locationIndex={locationIndex}
-            />
-          ))}
-        </ul>
+        <Table>
+          <TableHeader className="bg-muted/40">
+            <TableRow className="hover:bg-transparent">
+              <TableHead className={cn(HEAD, 'pl-(--card-px)')}>Instance</TableHead>
+              <TableHead className={cn(HEAD, 'hidden md:table-cell')}>Location</TableHead>
+              <TableHead className={HEAD}>State</TableHead>
+              {showTraffic ? (
+                <TableHead className={cn(HEAD, 'hidden md:table-cell')}>
+                  <Tooltip message="Network in and out over the last hour">
+                    <span>Network · 1h</span>
+                  </Tooltip>
+                </TableHead>
+              ) : null}
+              <TableHead className={cn(HEAD, 'hidden md:table-cell')}>Address</TableHead>
+              <TableHead className="pr-(--card-px)">
+                <span className="sr-only">Actions</span>
+              </TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {instances.map((instance) => (
+              <InstanceRow
+                key={instance.uid || instance.name}
+                instance={instance}
+                workloadName={workloadName}
+                href={instanceHref(instance.name)}
+                locationIndex={locationIndex}
+                projectId={projectId}
+                traffic={trafficByInstance[instance.name]}
+                trafficLoading={chart.isLoading}
+                showTraffic={showTraffic}
+                timeRange={range.timeRange}
+                deploying={deploying}
+              />
+            ))}
+          </TableBody>
+        </Table>
       )}
-    </SectionFrame>
+    </Card>
   );
 }
diff --git a/ui/consumer/src/components/workload-overview-card.tsx b/ui/consumer/src/components/workload-overview-card.tsx
new file mode 100644
index 00000000..a7b824e2
--- /dev/null
+++ b/ui/consumer/src/components/workload-overview-card.tsx
@@ -0,0 +1,564 @@
+/**
+ * The workload Overview's summary card, in the shape of the ALB overview's
+ * health strip: a tinted status ring, a headline and detail, the public
+ * endpoint, and when the workload last changed. Below that, either a crash
+ * band (only while an instance is crashing), the deploy steps (while the
+ * workload first comes up), or the last hour's stats.
+ *
+ * The asleep state, wake-ups, revision and image digest from the design are
+ * left out until the API reports them (datum-cloud/compute#626).
+ */
+import { MetricSparkline } from './metric-sparkline';
+import { useOverviewRange } from './overview-range';
+import { albStatusDisplay, type AlbStatus } from '../lib/alb-status';
+import { formatKpiValue } from './metric-area-chart';
+import {
+  albRpsQuery,
+  workloadCpuSumQuery,
+  workloadMemorySumQuery,
+  type InstanceIdentityLabel,
+} from '../lib/metrics-queries';
+import type { DeployPhase, TimelineStep } from '../lib/deploy-presenters';
+import { useWorkloadNetworkMetrics } from '../lib/network-interface-metrics';
+import { usePrometheusChart, type ChartDataPoint } from '../lib/prometheus';
+import {
+  cpuUsageHint,
+  formatCpuUsage,
+  formatMemoryUsage,
+  memoryUsageHint,
+  type Allocation,
+} from '../lib/resource-usage';
+import {
+  crashDetailText,
+  formatAgo,
+  imageShortName,
+  instanceReadiness,
+  STATUS_TONE_COLOR,
+  type CrashDetail,
+  type InstanceProblem,
+  type OverviewStatus,
+  type StatusTone,
+} from '../lib/workload-presenters';
+import type { Instance } from '../schema';
+import { Card } from '@datum-cloud/datum-ui/card';
+import { useCopyToClipboard } from '@datum-cloud/datum-ui/hooks';
+import { Icon, SpinnerIcon } from '@datum-cloud/datum-ui/icons';
+import { Tooltip } from '@datum-cloud/datum-ui/tooltip';
+import { cn } from '@datum-cloud/datum-ui/utils';
+import {
+  CheckIcon,
+  CircleCheckIcon,
+  HourglassIcon,
+  InfoIcon,
+  CircleIcon,
+  CircleXIcon,
+  CopyIcon,
+  GlobeIcon,
+  LogsIcon,
+  TriangleAlertIcon,
+} from 'lucide-react';
+import { useMemo, type ReactNode } from 'react';
+import { Link } from 'react-router';
+
+const INFO_COLOR = 'var(--color-badge-info)';
+
+/** Text blocks keep this much width and push their neighbours onto the next line instead. */
+const WRAP_BASIS = { flexBasis: '18rem' } as const;
+
+// Inline: cloud-portal compiles no `h-1`.
+const BAR_STYLE = { height: 4 } as const;
+
+/** A tone's color at a low opacity, for the ring and the attention band. */
+function tint(color: string, percent: number): string {
+  return `color-mix(in oklab, ${color} ${percent}%, transparent)`;
+}
+
+const TONE_ICON: Record<StatusTone, typeof CircleCheckIcon> = {
+  ok: CircleCheckIcon,
+  warn: TriangleAlertIcon,
+  error: CircleXIcon,
+  muted: CircleIcon,
+};
+
+function StatusRing({ tone, phase }: { tone: StatusTone; phase?: DeployPhase }) {
+  const ring = phase ? PHASE_RING[phase] : undefined;
+  const color = ring?.color ?? STATUS_TONE_COLOR[tone];
+  return (
+    <span
+      className="flex size-9 shrink-0 items-center justify-center rounded-full"
+      style={{ background: tint(color, 14), color }}
+      aria-hidden>
+      {phase === 'deploying' ? <SpinnerIcon size="sm" /> : <Icon icon={ring?.icon ?? TONE_ICON[tone]} size={18} />}
+    </span>
+  );
+}
+
+export interface OverviewEndpoint {
+  hostname: string;
+  /** The load balancer's page in the portal. */
+  albHref?: string;
+  albStatus?: AlbStatus;
+}
+
+function Endpoint({ endpoint }: { endpoint: OverviewEndpoint }) {
+  const [copied, copy] = useCopyToClipboard();
+  const display = endpoint.albStatus ? albStatusDisplay(endpoint.albStatus) : undefined;
+  const ready = !display;
+  return (
+    <span className="flex min-w-0 items-center gap-2 pt-1" data-e2e="compute-workload-alb-chip">
+      <Icon
+        icon={GlobeIcon}
+        size={14}
+        className={cn('shrink-0', ready ? 'text-primary' : 'text-muted-foreground')}
+        aria-hidden
+      />
+      <a
+        href={`https://${endpoint.hostname}`}
+        target="_blank"
+        rel="noreferrer"
+        className={cn(
+          'min-w-0 truncate font-mono text-xs hover:underline',
+          ready ? 'text-primary' : 'text-muted-foreground'
+        )}>
+        https://{endpoint.hostname}
+      </a>
+      <Tooltip message={copied ? 'Copied' : 'Copy URL'}>
+        <button
+          type="button"
+          className="text-muted-foreground hover:text-foreground inline-flex shrink-0 cursor-pointer"
+          aria-label={copied ? 'Copied' : 'Copy URL'}
+          onClick={() => void copy(`https://${endpoint.hostname}`, { withToast: true })}>
+          <Icon icon={copied ? CheckIcon : CopyIcon} size={13} aria-hidden />
+        </button>
+      </Tooltip>
+      {display ? (
+        <span className="text-muted-foreground truncate text-xs" title={display.detail}>
+          · {display.short === 'Error' ? 'load balancer error' : 'not serving yet'}
+        </span>
+      ) : endpoint.albHref ? (
+        <Link to={endpoint.albHref} className="text-muted-foreground hidden shrink-0 text-xs hover:underline sm:inline-flex">
+          · load balancer
+        </Link>
+      ) : null}
+    </span>
+  );
+}
+
+/** The instance that is crashing, and what its runtime last reported. */
+export interface OverviewCrash {
+  instance: Instance;
+  detail: CrashDetail;
+  /** Where the instance runs, in words. */
+  locationLabel: string;
+  logsHref: string;
+  instanceHref: string;
+}
+
+function CrashBand({ crash }: { crash: OverviewCrash }) {
+  const color = STATUS_TONE_COLOR.warn;
+  return (
+    <div
+      className="flex flex-wrap items-center gap-3 border-t px-4 py-3"
+      style={{ background: tint(color, 8), borderColor: tint(color, 30) }}
+      data-testid="compute-plugin-workload-crash">
+      <Icon icon={TriangleAlertIcon} size={16} className="shrink-0" style={{ color }} aria-hidden />
+      <div className="flex min-w-0 flex-1 flex-col gap-0.5" style={WRAP_BASIS}>
+        <span className="text-sm font-medium">
+          {crash.instance.name} in {crash.locationLabel} keeps crashing
+        </span>
+        <span className="text-muted-foreground text-xs">{crashDetailText(crash.detail)}</span>
+      </div>
+      <div className="flex shrink-0 items-center gap-2">
+        <Link
+          to={crash.instanceHref}
+          className="bg-card hover:bg-accent rounded-md border px-2.5 py-1 text-xs font-medium">
+          Instance
+        </Link>
+        <Link
+          to={crash.logsHref}
+          className="bg-foreground text-background inline-flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs font-medium hover:opacity-90">
+          <Icon icon={LogsIcon} size={12} aria-hidden />
+          View logs
+        </Link>
+      </div>
+    </div>
+  );
+}
+
+const PHASE_RING: Record<DeployPhase, { color: string; icon?: typeof CircleCheckIcon }> = {
+  deploying: { color: INFO_COLOR },
+  deployed: { color: STATUS_TONE_COLOR.ok, icon: CircleCheckIcon },
+  stalled: { color: STATUS_TONE_COLOR.warn, icon: HourglassIcon },
+  failed: { color: STATUS_TONE_COLOR.error, icon: CircleXIcon },
+};
+
+/** While deploying: a slow pulse instead of fake progress, and what to expect. */
+function DeployingNote() {
+  return (
+    <>
+      <span className="relative block overflow-hidden" style={{ ...BAR_STYLE, height: 2, background: tint(INFO_COLOR, 12) }} aria-hidden>
+        <span className="absolute inset-y-0 left-0 w-1/3 animate-pulse" style={{ background: tint(INFO_COLOR, 70) }} />
+      </span>
+      <p className="text-muted-foreground flex items-center gap-2 px-4 py-3 text-xs" data-testid="compute-plugin-workload-deploying">
+        <Icon icon={InfoIcon} size={14} className="shrink-0" aria-hidden />
+        Most deploys finish in under a minute. CPU, memory and network appear once an instance is ready.
+      </p>
+    </>
+  );
+}
+
+const clock = (at: Date) => at.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
+
+function stepColor(state: TimelineStep['state']): string {
+  return state === 'done' ? STATUS_TONE_COLOR.ok : state === 'failed' ? STATUS_TONE_COLOR.error : STATUS_TONE_COLOR.warn;
+}
+
+/** Deployed: the steps on a line, each with its time and the gap from the one before. */
+function TimelineTrack({ steps }: { steps: TimelineStep[] }) {
+  return (
+    <ol
+      className="flex flex-col gap-3 border-t px-4 py-4 sm:flex-row sm:justify-between"
+      style={{ background: tint(STATUS_TONE_COLOR.ok, 5), borderColor: tint(STATUS_TONE_COLOR.ok, 25) }}
+      aria-label="Deploy timeline"
+      data-testid="compute-plugin-workload-timeline">
+      {steps.map((step, index) => {
+        const gap = index > 0 ? Math.round((step.at.getTime() - steps[index - 1].at.getTime()) / 1000) : undefined;
+        return (
+          <li key={step.label} className="flex min-w-0 items-start gap-2">
+            <span className="mt-1 size-2 shrink-0 rounded-full" style={{ background: stepColor(step.state) }} aria-hidden />
+            <span className="flex min-w-0 flex-col">
+              <span className="text-sm font-medium">{step.label}</span>
+              <span className="text-muted-foreground font-mono text-xs">
+                {clock(step.at)}
+                {gap !== undefined ? ` · +${gap}s` : ''}
+              </span>
+            </span>
+          </li>
+        );
+      })}
+    </ol>
+  );
+}
+
+/** Stalled and failed: steps reached so far, ending in the one it's stuck on. */
+function SoFar({ steps }: { steps: TimelineStep[] }) {
+  return (
+    <div className="flex flex-wrap items-center gap-x-4 gap-y-1 border-t px-4 py-2.5" data-testid="compute-plugin-workload-so-far">
+      <span className="text-muted-foreground text-xs font-semibold">So far</span>
+      {steps.map((step) => (
+        <span key={step.label} className="flex items-center gap-1.5 text-xs">
+          <span className="size-2 shrink-0 rounded-full" style={{ background: stepColor(step.state) }} aria-hidden />
+          {step.label}
+          <span className="text-muted-foreground font-mono">
+            {step.state === 'waiting' ? 'since ' : ''}
+            {clock(step.at)}
+          </span>
+        </span>
+      ))}
+    </div>
+  );
+}
+
+export interface OverviewAction {
+  label: string;
+  href: string;
+  primary?: boolean;
+}
+
+/** Stalled and failed: the cause in plain words, the platform's message, and what to try. */
+function ProblemBand({ problem, actions }: { problem: InstanceProblem; actions: OverviewAction[] }) {
+  const color = STATUS_TONE_COLOR[problem.tone];
+  return (
+    <div
+      className="flex gap-3 border-t px-4 py-4"
+      style={{ background: tint(color, 6), borderColor: tint(color, 30) }}
+      data-testid="compute-plugin-workload-problem">
+      <Icon icon={problem.tone === 'error' ? CircleXIcon : TriangleAlertIcon} size={16} className="mt-0.5 shrink-0" style={{ color }} aria-hidden />
+      <div className="flex min-w-0 flex-1 flex-col gap-2">
+        <div className="flex flex-wrap items-center justify-between gap-3">
+          <span className="text-sm font-semibold">{problem.title}</span>
+          {actions.length > 0 ? (
+            <span className="flex shrink-0 items-center gap-2">
+              {actions.map((action) => (
+                <Link
+                  key={action.label}
+                  to={action.href}
+                  className={
+                    action.primary
+                      ? 'bg-foreground text-background rounded-md px-2.5 py-1 text-xs font-medium hover:opacity-90'
+                      : 'bg-card hover:bg-accent rounded-md border px-2.5 py-1 text-xs font-medium'
+                  }>
+                  {action.label}
+                </Link>
+              ))}
+            </span>
+          ) : null}
+        </div>
+        {problem.message ? (
+          <p className="text-muted-foreground font-mono text-xs" style={{ overflowWrap: 'anywhere' }}>
+            {problem.message}
+          </p>
+        ) : null}
+        {problem.hints.length > 0 ? (
+          <ul className="flex flex-col gap-1 text-sm">
+            {problem.hints.map((hint) => (
+              <li key={hint} className="flex gap-2">
+                <span className="text-muted-foreground" aria-hidden>
+                  •
+                </span>
+                <span>{hint}</span>
+              </li>
+            ))}
+          </ul>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+function lastValue(points: readonly ChartDataPoint[] | undefined): number | undefined {
+  for (let i = (points?.length ?? 0) - 1; i >= 0; i--) {
+    const value = points?.[i]?.value;
+    if (typeof value === 'number' && Number.isFinite(value)) return value;
+  }
+  return undefined;
+}
+
+/** Two series added point by point; they share timestamps because one range query samples both. */
+function addSeries(
+  a: readonly ChartDataPoint[] | undefined,
+  b: readonly ChartDataPoint[] | undefined
+): ChartDataPoint[] | undefined {
+  if (!a && !b) return undefined;
+  const sums = new Map<number, ChartDataPoint>();
+  for (const point of [...(a ?? []), ...(b ?? [])]) {
+    const prev = sums.get(point.timestamp);
+    sums.set(point.timestamp, prev ? { ...prev, value: prev.value + point.value } : { ...point });
+  }
+  return [...sums.values()].sort((x, y) => x.timestamp - y.timestamp);
+}
+
+function StatCell({
+  label,
+  hint,
+  value,
+  children,
+}: {
+  label: string;
+  hint?: string;
+  value: ReactNode;
+  children?: ReactNode;
+}) {
+  return (
+    <div className="bg-card flex min-w-0 flex-1 flex-col gap-1.5 px-4 py-3">
+      <span className="flex items-baseline justify-between gap-2">
+        <span className="text-muted-foreground text-xs">{label}</span>
+        {hint ? <span className="text-muted-foreground truncate text-xs opacity-80">{hint}</span> : null}
+      </span>
+      <span className="text-lg font-semibold tabular-nums">{value}</span>
+      {children}
+    </div>
+  );
+}
+
+function Stats({
+  projectId,
+  instances,
+  identityLabel,
+  metricKeys,
+  metricsDenied,
+  proxyId,
+  allocation,
+  totalCount,
+}: {
+  projectId?: string;
+  instances: readonly Instance[];
+  identityLabel?: InstanceIdentityLabel;
+  metricKeys: readonly string[];
+  metricsDenied: boolean;
+  proxyId?: string;
+  allocation: Allocation;
+  totalCount: number;
+}) {
+  const range = useOverviewRange('1h');
+  const enabled = !!projectId && !!identityLabel && metricKeys.length > 0 && !metricsDenied;
+  const cpuQuery =
+    enabled && projectId && identityLabel ? workloadCpuSumQuery(projectId, identityLabel, metricKeys) : undefined;
+  const memoryQuery =
+    enabled && projectId && identityLabel ? workloadMemorySumQuery(projectId, identityLabel, metricKeys) : undefined;
+  const rpsQuery = projectId && proxyId && !metricsDenied ? albRpsQuery(projectId, proxyId) : undefined;
+  const cpu = usePrometheusChart(projectId, cpuQuery, range.timeRange, { enabled: !!cpuQuery, keepPrevious: true });
+  const memory = usePrometheusChart(projectId, memoryQuery, range.timeRange, {
+    enabled: !!memoryQuery,
+    keepPrevious: true,
+  });
+  const rps = usePrometheusChart(projectId, rpsQuery, range.timeRange, { enabled: !!rpsQuery, keepPrevious: true });
+  const network = useWorkloadNetworkMetrics(metricsDenied ? undefined : projectId, instances);
+  const rx = usePrometheusChart(projectId, network.receiveTotalQuery, range.timeRange, {
+    enabled: !!network.receiveTotalQuery,
+    keepPrevious: true,
+  });
+  const tx = usePrometheusChart(projectId, network.transmitTotalQuery, range.timeRange, {
+    enabled: !!network.transmitTotalQuery,
+    keepPrevious: true,
+  });
+
+  const cpuPoints = cpu.error ? undefined : cpu.data?.series[0]?.data;
+  const memoryPoints = memory.error ? undefined : memory.data?.series[0]?.data;
+  const rpsPoints = rps.error ? undefined : rps.data?.series[0]?.data;
+  const cpuNow = lastValue(cpuPoints);
+  const memoryNow = lastValue(memoryPoints);
+  const rpsNow = lastValue(rpsPoints);
+  const rxPoints = rx.error ? undefined : rx.data?.series[0]?.data;
+  const txPoints = tx.error ? undefined : tx.data?.series[0]?.data;
+  const rxNow = lastValue(rxPoints);
+  const txNow = lastValue(txPoints);
+  const ioPoints = useMemo(() => addSeries(rxPoints, txPoints), [rxPoints, txPoints]);
+  const showNetwork = !!network.receiveTotalQuery || network.isLoading;
+
+  const readiness = useMemo(() => instances.map((instance) => instanceReadiness(instance)), [instances]);
+  const ready = readiness.filter((r) => r.tone === 'ok').length;
+  const notReady = readiness.length - ready;
+
+  const spark = (points: readonly ChartDataPoint[] | undefined, loading: boolean, color?: string, format: 'cores' | 'bytes' | 'requestsPerSecond' | 'bitsPerSecond' = 'cores', allocated?: number, flat = false) => (
+    <MetricSparkline
+      projectId={projectId}
+      timeRange={range.timeRange}
+      format={format}
+      series={points ?? []}
+      pending={loading && !points}
+      allocated={allocated}
+      color={color}
+      flatWhenZero={flat}
+      wide
+      hideValue
+    />
+  );
+
+  return (
+    <div
+      className="bg-border grid grid-cols-2 gap-px border-t sm:flex"
+      data-testid="compute-plugin-workload-stats">
+      <StatCell
+        label="Instances"
+        hint={notReady > 0 ? `${notReady} not ready` : undefined}
+        value={`${ready} / ${totalCount}`}>
+        <span className="flex h-8 items-center gap-1.5" aria-hidden>
+          {readiness.slice(0, 24).map((r, index) => (
+            <span
+              key={index}
+              className="size-3 rounded-sm"
+              style={{ background: r.tone === 'muted' ? INFO_COLOR : STATUS_TONE_COLOR[r.tone] }}
+            />
+          ))}
+        </span>
+      </StatCell>
+      <StatCell label="CPU" hint={cpuUsageHint(cpuNow, allocation.cores)} value={formatCpuUsage(cpuNow, allocation.cores)}>
+        {spark(cpuPoints, cpu.isLoading, undefined, 'cores', allocation.cores)}
+      </StatCell>
+      <StatCell
+        label="Memory"
+        hint={memoryUsageHint(memoryNow, allocation.memoryBytes)}
+        value={formatMemoryUsage(memoryNow, allocation.memoryBytes)}>
+        {spark(memoryPoints, memory.isLoading, 'var(--color-chart-1)', 'bytes', allocation.memoryBytes)}
+      </StatCell>
+      {showNetwork ? (
+        <StatCell
+          label="Network"
+          hint={
+            rxNow !== undefined || txNow !== undefined
+              ? `${formatKpiValue(rxNow, 'bitsPerSecond')} in · ${formatKpiValue(txNow, 'bitsPerSecond')} out`
+              : 'in + out'
+          }
+          value={formatKpiValue(rxNow === undefined && txNow === undefined ? undefined : (rxNow ?? 0) + (txNow ?? 0), 'bitsPerSecond')}>
+          {spark(ioPoints, rx.isLoading || tx.isLoading || network.isLoading, 'var(--color-chart-3)', 'bitsPerSecond', undefined, true)}
+        </StatCell>
+      ) : null}
+      {proxyId ? (
+        <StatCell label="Requests" hint="per second" value={formatKpiValue(rpsNow, 'requestsPerSecond')}>
+          {spark(rpsPoints, rps.isLoading, INFO_COLOR, 'requestsPerSecond', undefined, true)}
+        </StatCell>
+      ) : null}
+    </div>
+  );
+}
+
+export interface WorkloadOverviewCardProps {
+  status: OverviewStatus;
+  /** A deploy state replaces the stats while it lasts; see `deployState`. */
+  phase?: DeployPhase;
+  /** Deployed: the full timeline. Stalled and failed: the steps so far. */
+  timeline?: TimelineStep[];
+  /** Stalled and failed: what is wrong. */
+  problem?: InstanceProblem;
+  problemActions?: OverviewAction[];
+  endpoint?: OverviewEndpoint;
+  image?: string;
+  updatedAt: Date;
+  now: number;
+  crash?: OverviewCrash;
+  projectId?: string;
+  instances: readonly Instance[];
+  totalCount: number;
+  identityLabel?: InstanceIdentityLabel;
+  metricKeys: readonly string[];
+  metricsDenied: boolean;
+  proxyId?: string;
+  allocation: Allocation;
+}
+
+export function WorkloadOverviewCard(props: WorkloadOverviewCardProps) {
+  const { status, phase, endpoint, image, updatedAt, now, crash } = props;
+  const attention = status.tone === 'warn' || status.tone === 'error';
+  const short = imageShortName(image);
+  return (
+    <Card
+      sectioned
+      size="sm"
+      className="overflow-hidden"
+      style={attention ? { borderColor: tint(STATUS_TONE_COLOR[status.tone], 45) } : undefined}
+      data-testid="compute-plugin-workload-health">
+      <div className="flex flex-wrap items-start justify-between gap-x-6 gap-y-3 px-4 py-4">
+        <div className="flex min-w-0 flex-1 items-start gap-3" style={WRAP_BASIS}>
+          <StatusRing tone={status.tone} phase={phase} />
+          <div className="flex min-w-0 flex-col gap-0.5">
+            <span className="text-base font-semibold">{status.title}</span>
+            <span className="text-muted-foreground text-sm" title={status.detail}>
+              {status.detail}
+            </span>
+            {endpoint ? <Endpoint endpoint={endpoint} /> : null}
+          </div>
+        </div>
+        <div className="flex shrink-0 flex-col gap-0.5">
+          <span className="text-sm font-medium" title={updatedAt.toLocaleString()}>
+            Updated {formatAgo(updatedAt, now)}
+          </span>
+          {short ? (
+            <span className="text-muted-foreground max-w-xs truncate font-mono text-xs" title={image}>
+              {short}
+            </span>
+          ) : null}
+        </div>
+      </div>
+      {phase === 'deploying' ? <DeployingNote /> : null}
+      {phase === 'deployed' && props.timeline ? <TimelineTrack steps={props.timeline} /> : null}
+      {(phase === 'stalled' || phase === 'failed') && props.problem ? (
+        <ProblemBand problem={props.problem} actions={props.problemActions ?? []} />
+      ) : null}
+      {(phase === 'stalled' || phase === 'failed') && props.timeline ? <SoFar steps={props.timeline} /> : null}
+      {!phase && crash ? <CrashBand crash={crash} /> : null}
+      {phase ? null : (
+        <Stats
+          projectId={props.projectId}
+          instances={props.instances}
+          identityLabel={props.identityLabel}
+          metricKeys={props.metricKeys}
+          metricsDenied={props.metricsDenied}
+          proxyId={props.proxyId}
+          allocation={props.allocation}
+          totalCount={props.totalCount}
+        />
+      )}
+    </Card>
+  );
+}
diff --git a/ui/consumer/src/components/workload-table.tsx b/ui/consumer/src/components/workload-table.tsx
index 5533991e..ab90d57d 100644
--- a/ui/consumer/src/components/workload-table.tsx
+++ b/ui/consumer/src/components/workload-table.tsx
@@ -276,6 +276,7 @@ export function WorkloadTable({
                   format="cores"
                   allocated={allocationByWorkload[row.original.name]?.cores}
                   compact
+                  hideValue
                 />
               ),
             },
@@ -292,6 +293,7 @@ export function WorkloadTable({
                   allocated={allocationByWorkload[row.original.name]?.memoryBytes}
                   color="var(--color-chart-1)"
                   compact
+                  hideValue
                 />
               ),
             },
diff --git a/ui/consumer/src/lib/api.ts b/ui/consumer/src/lib/api.ts
index 7afe10c3..2eaf4618 100644
--- a/ui/consumer/src/lib/api.ts
+++ b/ui/consumer/src/lib/api.ts
@@ -19,10 +19,11 @@
  *  - Client-side 403 handling instead of PR #1315's server-loader RBAC gate
  *    (`runDetailLoader`, portal-internal) — see `ApiError` below.
  */
+import { workloadSettling } from './workload-settling';
 import { toInstance, toInstanceList, toWorkload, toWorkloadList, INSTANCE_LABELS } from '../adapter';
 import { anyAlbProvisioning } from './alb-status';
 import type { RawInstance, RawInstanceList, RawWorkload, RawWorkloadList } from '../adapter';
-import type { Instance, Workload } from '../schema';
+import type { Instance, InstanceCondition, Workload } from '../schema';
 import { useEffect } from 'react';
 import {
   mutationOptions,
@@ -84,6 +85,7 @@ export function getProjectScopedBase(projectId: string): string {
 // in the compute repo.
 const WORKLOADS_PATH = '/apis/compute.datumapis.com/v1alpha/namespaces/default/workloads';
 const INSTANCES_PATH = '/apis/compute.datumapis.com/v1alpha/namespaces/default/instances';
+const WORKLOAD_DEPLOYMENTS_PATH = '/apis/compute.datumapis.com/v1alpha/namespaces/default/workloaddeployments';
 
 async function proxyFetch<T>(projectId: string, path: string): Promise<T> {
   const url = `${getProjectScopedBase(projectId)}${path}`;
@@ -530,10 +532,10 @@ export function useWorkload(
     enabled: !!projectId && !!name,
     queryFn: () => fetchWorkload(projectId as string, name as string),
     ...POLLED_QUERY,
+    // Fast while deploying, and while instances are still coming up after
+    // the workload reports Available (a placement exists seconds before they serve).
     refetchInterval: (query) =>
-      query.state.data?.health === 'Deploying' && !query.state.data.deleting
-        ? DEPLOYING_REFETCH_INTERVAL_MS
-        : REFETCH_INTERVAL_MS,
+      query.state.data && workloadSettling(query.state.data) ? DEPLOYING_REFETCH_INTERVAL_MS : REFETCH_INTERVAL_MS,
   });
 }
 
@@ -608,6 +610,53 @@ export function useInstance(
   });
 }
 
+// ── Workload deployments ─────────────────────────────────────────────────
+
+/** One WorkloadDeployment (a placement in one location), reduced to what explains a stalled deploy. */
+export interface WorkloadDeploymentSummary {
+  name: string;
+  location?: string;
+  conditions: InstanceCondition[];
+}
+
+interface RawWorkloadDeploymentList {
+  items?: Array<{
+    metadata?: { name?: string; labels?: Record<string, string> };
+    status?: { conditions?: InstanceCondition[] };
+  }>;
+}
+
+async function fetchWorkloadDeployments(projectId: string, workloadUid: string): Promise<WorkloadDeploymentSummary[]> {
+  const query = new URLSearchParams({ labelSelector: `compute.datumapis.com/workload-uid=${workloadUid}` });
+  const body = await proxyFetch<RawWorkloadDeploymentList>(projectId, `${WORKLOAD_DEPLOYMENTS_PATH}?${query.toString()}`);
+  return (body.items ?? []).map((item) => ({
+    name: item.metadata?.name ?? '',
+    location: item.metadata?.labels?.['compute.datumapis.com/location'],
+    conditions: item.status?.conditions ?? [],
+  }));
+}
+
+/**
+ * A workload's deployments, read only while it is still coming up: some
+ * causes of a stalled deploy (a missing Secret, say) are reported only here,
+ * not on the Workload or its instances.
+ */
+export function useWorkloadDeployments(
+  projectId: string | undefined,
+  workloadUid: string | undefined,
+  enabled: boolean
+): UseQueryResult<WorkloadDeploymentSummary[], ApiError> {
+  return useQuery({
+    queryKey: [PLUGIN_ID, 'workload-deployments', projectId, workloadUid],
+    enabled: enabled && !!projectId && !!workloadUid,
+    queryFn: () => fetchWorkloadDeployments(projectId as string, workloadUid as string),
+    ...POLLED_QUERY,
+    refetchInterval: DEPLOYING_REFETCH_INTERVAL_MS,
+    // A missing permission or an older API just means no extra detail.
+    retry: false,
+  });
+}
+
 // ── Connected ALB (HTTPProxy via NetworkService) ─────────────────────────
 //
 // A workload is on a public URL when an HTTPProxy (ALB) names a NetworkService
diff --git a/ui/consumer/src/lib/deploy-presenters.test.ts b/ui/consumer/src/lib/deploy-presenters.test.ts
new file mode 100644
index 00000000..4fbd6803
--- /dev/null
+++ b/ui/consumer/src/lib/deploy-presenters.test.ts
@@ -0,0 +1,160 @@
+import { describe, expect, test } from 'vitest';
+import {
+  DEPLOYED_FOR_MS,
+  deployHeadline,
+  deployState,
+  deployTimeline,
+  stallCause,
+} from './deploy-presenters';
+import type { DeployStatus } from './workload-presenters';
+import type { Instance, Workload } from '../schema';
+
+const T0 = new Date('2026-11-06T12:06:20Z');
+const at = (seconds: number) => new Date(T0.getTime() + seconds * 1000);
+
+function workload(extra: Partial<Workload> = {}): Workload {
+  return {
+    uid: 'w',
+    name: 'web',
+    createdAt: T0,
+    health: 'Available',
+    currentReplicas: 1,
+    readyReplicas: 1,
+    desiredReplicas: 1,
+    placements: [],
+    placementRegions: [],
+    conditions: [],
+    tags: [],
+    ports: [],
+    locations: ['us-east-1'],
+    networks: [],
+    deleting: false,
+    ...extra,
+  };
+}
+
+function instance(conditions: Instance['conditions'], extra: Partial<Instance> = {}): Instance {
+  return {
+    uid: 'i',
+    name: 'web-default-us-east-1-0',
+    createdAt: at(5),
+    location: 'us-east-1',
+    ports: [],
+    containers: [],
+    internalIPs: [],
+    addresses: [],
+    externalIPs: [],
+    hostnames: [],
+    networkInterfaces: [],
+    status: 'Pending',
+    conditions,
+    ...extra,
+  };
+}
+
+const ready = instance(
+  [
+    { type: 'Programmed', status: 'True', lastTransitionTime: at(7).toISOString() },
+    { type: 'Ready', status: 'True', lastTransitionTime: at(13).toISOString() },
+  ],
+  { status: 'Available' }
+);
+const booting = instance([
+  { type: 'Programmed', status: 'True', lastTransitionTime: at(7).toISOString() },
+  { type: 'Ready', status: 'False', reason: 'Provisioning' },
+]);
+const badImage = instance(
+  [{ type: 'Ready', status: 'False', reason: 'ImageUnavailable', message: 'could not be pulled', lastTransitionTime: at(9).toISOString() }],
+  { status: 'Failed', image: 'ghcr.io/acme/app:nope' }
+);
+const deploying: DeployStatus = { label: 'Deploying', title: 'Deploying', step: 'Starting instances', tone: 'info', inProgress: true, since: T0 };
+
+describe('deployTimeline', () => {
+  test('rebuilds Created → Placed → Started → Ready from timestamps', () => {
+    expect(deployTimeline(workload(), [ready]).map((s) => [s.label, s.at.toISOString()])).toEqual([
+      ['Created', T0.toISOString()],
+      ['Placed in us-east-1', at(5).toISOString()],
+      ['Started', at(7).toISOString()],
+      ['Ready', at(13).toISOString()],
+    ]);
+  });
+  test('stops where instances have got to and adds the step it is stuck on', () => {
+    const steps = deployTimeline(workload(), [booting], { label: 'Waiting for quota', at: at(5), state: 'waiting' });
+    expect(steps.map((s) => s.label)).toEqual(['Created', 'Placed in us-east-1', 'Started', 'Waiting for quota']);
+    expect(steps.at(-1)?.state).toBe('waiting');
+  });
+});
+
+describe('stallCause', () => {
+  test('names a missing Secret from the deployments', () => {
+    const cause = stallCause(
+      [{ name: 'd', conditions: [{ type: 'ReferencedDataReady', status: 'False', reason: 'SourceNotFound', message: 'Secret "x" not found' }] }],
+      []
+    );
+    expect(cause).toMatchObject({ title: "A Secret or ConfigMap it uses doesn't exist", message: 'Secret "x" not found' });
+  });
+  test('names a quota wait from the instances', () => {
+    const cause = stallCause([], [instance([{ type: 'QuotaGranted', status: 'False', reason: 'QuotaExceeded', message: 'over limit' }])]);
+    expect(cause).toMatchObject({ title: 'Waiting for quota', message: 'over limit' });
+  });
+  test('is undefined when nothing names a cause', () => {
+    expect(stallCause([], [booting], deploying)).toBeUndefined();
+  });
+});
+
+describe('deployState', () => {
+  const base = { deployments: [], healthyCount: 0 };
+  test('deploying while instances boot', () => {
+    const state = deployState({ ...base, workload: workload(), instances: [booting], now: at(10).getTime() });
+    expect(state?.phase).toBe('deploying');
+  });
+  test('stalled once it has taken over two minutes', () => {
+    const state = deployState({ ...base, workload: workload(), instances: [booting], deploy: deploying, now: at(150).getTime() });
+    expect(state?.phase).toBe('stalled');
+    expect(state?.problem?.title).toBe('Starting instances is taking longer than usual');
+    expect(state?.stuckOn).toBe('Starting instances');
+  });
+  test('stalled straight away when a cause is named', () => {
+    const state = deployState({
+      ...base,
+      workload: workload({ health: 'Deploying' }),
+      instances: [booting],
+      deploy: deploying,
+      deployments: [{ name: 'd', conditions: [{ type: 'ReferencedDataReady', status: 'False', reason: 'SourceNotFound' }] }],
+      now: at(10).getTime(),
+    });
+    expect(state?.phase).toBe('stalled');
+  });
+  test('failed when nothing serves and an instance cannot recover', () => {
+    const state = deployState({ ...base, workload: workload(), instances: [badImage], now: at(20).getTime() });
+    expect(state).toMatchObject({ phase: 'failed', failedInstance: badImage });
+  });
+  test('deployed for a minute after the last instance is ready, then nothing', () => {
+    const input = { ...base, workload: workload(), instances: [ready], healthyCount: 1 };
+    expect(deployState({ ...input, now: at(20).getTime() })?.phase).toBe('deployed');
+    expect(deployState({ ...input, now: at(13).getTime() + DEPLOYED_FOR_MS + 1 })).toBeUndefined();
+  });
+  test('no deployed moment for an old workload', () => {
+    const old = workload({ createdAt: new Date(T0.getTime() - 3_600_000) });
+    expect(deployState({ ...base, workload: old, instances: [ready], healthyCount: 1, now: at(20).getTime() })).toBeUndefined();
+  });
+});
+
+describe('deployHeadline', () => {
+  const counts = { healthy: 1, total: 1, locations: 1 };
+  test('deployed reads the time from creation to ready', () => {
+    expect(deployHeadline({ phase: 'deployed', since: T0, readyAt: at(13) }, counts, at(20).getTime())).toEqual({
+      tone: 'ok',
+      title: 'Deployed in 13s',
+      detail: '1/1 instance ready · 1 location',
+    });
+  });
+  test('failed names the problem', () => {
+    const headline = deployHeadline(
+      { phase: 'failed', since: T0, problem: { tone: 'error', title: "The image can't be pulled", hints: [], showLogs: false } },
+      { ...counts, healthy: 0 },
+      at(20).getTime()
+    );
+    expect(headline.detail).toBe("0/1 instance ready · the image can't be pulled");
+  });
+});
diff --git a/ui/consumer/src/lib/deploy-presenters.ts b/ui/consumer/src/lib/deploy-presenters.ts
new file mode 100644
index 00000000..066f1f6b
--- /dev/null
+++ b/ui/consumer/src/lib/deploy-presenters.ts
@@ -0,0 +1,241 @@
+/**
+ * The workload Overview's deploy states. A deploy takes seconds, faster than
+ * the page polls, so these say what can be said truthfully: it's happening,
+ * it worked (with a timeline rebuilt from condition timestamps), it's stuck
+ * and why, or it failed.
+ */
+import type { WorkloadDeploymentSummary } from './api';
+import {
+  DEPLOY_STALLED_AFTER_MS,
+  formatElapsed,
+  instanceProblem,
+  instancesStarting,
+  type DeployStatus,
+  type InstanceProblem,
+  type OverviewStatus,
+} from './workload-presenters';
+import type { Instance, Workload } from '../schema';
+
+export type DeployPhase = 'deploying' | 'deployed' | 'stalled' | 'failed';
+
+/** How long "Deployed in …" stays up after the last instance is ready. */
+export const DEPLOYED_FOR_MS = 60_000;
+
+/** Only a workload this young gets "Deployed in …": older ones are rollouts, not first deploys. */
+export const FIRST_DEPLOY_WINDOW_MS = 15 * 60_000;
+
+type Condition = Instance['conditions'][number];
+
+function transitionTime(condition: Condition | undefined): Date | undefined {
+  if (!condition?.lastTransitionTime) return undefined;
+  const at = new Date(condition.lastTransitionTime);
+  return Number.isNaN(at.getTime()) ? undefined : at;
+}
+
+/** The latest time `type` turned True, once it is True on every instance. */
+function allTrueAt(instances: readonly Instance[], type: string): Date | undefined {
+  if (instances.length === 0) return undefined;
+  let latest: Date | undefined;
+  for (const instance of instances) {
+    const condition = instance.conditions.find((c) => c.type === type);
+    if (condition?.status !== 'True') return undefined;
+    const at = transitionTime(condition) ?? instance.createdAt;
+    if (!latest || at > latest) latest = at;
+  }
+  return latest;
+}
+
+/** When the last instance became Ready, once all are. */
+export function instancesReadyAt(instances: readonly Instance[]): Date | undefined {
+  return allTrueAt(instances, 'Ready');
+}
+
+export interface TimelineStep {
+  label: string;
+  at: Date;
+  state: 'done' | 'waiting' | 'failed';
+}
+
+/**
+ * Created → Placed → Started → Ready, from timestamps the API keeps, so it is
+ * complete even when no poll landed mid-deploy. A step only appears once
+ * every instance has reached it. `end` adds the step a stalled or failed
+ * deploy is stuck on.
+ */
+export function deployTimeline(
+  workload: Workload,
+  instances: readonly Instance[],
+  end?: { label: string; at: Date; state: 'waiting' | 'failed' }
+): TimelineStep[] {
+  const steps: TimelineStep[] = [{ label: 'Created', at: workload.createdAt, state: 'done' }];
+  if (instances.length > 0) {
+    const placedAt = instances.reduce((min, i) => (i.createdAt < min ? i.createdAt : min), instances[0].createdAt);
+    const locations = [...new Set(instances.map((i) => i.location).filter(Boolean))];
+    steps.push({ label: locations.length ? `Placed in ${locations.join(', ')}` : 'Placed', at: placedAt, state: 'done' });
+  }
+  const startedAt = allTrueAt(instances, 'Programmed');
+  if (startedAt) steps.push({ label: 'Started', at: startedAt, state: 'done' });
+  const readyAt = allTrueAt(instances, 'Ready');
+  if (readyAt) steps.push({ label: 'Ready', at: readyAt, state: 'done' });
+  if (end && !readyAt) steps.push(end);
+  return steps;
+}
+
+/** Reasons a referenced Secret or ConfigMap blocks a deploy, in plain words. */
+const REFERENCED_DATA_PROBLEM: Record<string, { title: string; hint: string }> = {
+  SourceNotFound: {
+    title: "A Secret or ConfigMap it uses doesn't exist",
+    hint: 'Create it in this project, or remove the reference from the workload. The deploy carries on by itself once it exists.',
+  },
+  SourceUnauthorized: {
+    title: "Datum can't read a Secret or ConfigMap it uses",
+    hint: 'Check the permissions on the referenced Secret or ConfigMap.',
+  },
+  SourceTooLarge: {
+    title: 'A Secret or ConfigMap it uses is too large',
+    hint: 'Split it up or trim it, then redeploy.',
+  },
+  SourceNameTooLong: {
+    title: 'A referenced Secret or ConfigMap name is too long',
+    hint: 'Rename it to something shorter and update the reference.',
+  },
+};
+
+const QUOTA_PROBLEM_REASONS = new Set(['QuotaExceeded', 'QuotaNoBudget']);
+
+/**
+ * Why a deploy is stuck, when the API says: a referenced Secret or ConfigMap
+ * (reported only on the deployments), quota (on the instances), or the
+ * workload's own waiting message. Undefined when nothing names a cause.
+ */
+export function stallCause(
+  deployments: readonly WorkloadDeploymentSummary[],
+  instances: readonly Instance[],
+  deploy?: DeployStatus
+): InstanceProblem | undefined {
+  for (const deployment of deployments) {
+    const data = deployment.conditions.find((c) => c.type === 'ReferencedDataReady' && c.status === 'False');
+    const known = data?.reason && Object.hasOwn(REFERENCED_DATA_PROBLEM, data.reason) ? REFERENCED_DATA_PROBLEM[data.reason] : undefined;
+    if (known) return { tone: 'warn', title: known.title, message: data?.message, hints: [known.hint], showLogs: false };
+  }
+  const quota = instances
+    .flatMap((i) => i.conditions)
+    .find((c) => c.type === 'QuotaGranted' && c.status === 'False' && QUOTA_PROBLEM_REASONS.has(c.reason ?? ''));
+  if (quota || deploy?.label === 'Waiting for quota') {
+    return {
+      tone: 'warn',
+      title: 'Waiting for quota',
+      message: quota?.message || deploy?.message,
+      hints: [
+        'Scale down or delete another workload in this project to free resources.',
+        'Or ask Datum for a higher limit. The deploy carries on by itself once quota is granted.',
+      ],
+      showLogs: false,
+    };
+  }
+  return undefined;
+}
+
+export interface DeployState {
+  phase: DeployPhase;
+  /** When this deploy started. */
+  since: Date;
+  /** Set once every instance is ready. */
+  readyAt?: Date;
+  /** What is wrong, for stalled and failed. */
+  problem?: InstanceProblem;
+  /** The instance a failure comes from. */
+  failedInstance?: Instance;
+  /** Stalled: the step it is stuck on, short, for the end of the "so far" line. */
+  stuckOn?: string;
+}
+
+export interface DeployStateInput {
+  workload: Workload;
+  instances: readonly Instance[];
+  deploy?: DeployStatus;
+  deployments: readonly WorkloadDeploymentSummary[];
+  healthyCount: number;
+  now: number;
+}
+
+/**
+ * Which deploy state the Overview shows, if any:
+ * - failed: nothing serves and an instance hit a failure that won't clear on its own;
+ * - stalled: still coming up past `DEPLOY_STALLED_AFTER_MS`, or blocked on a named cause;
+ * - deploying: still coming up;
+ * - deployed: a first deploy whose last instance became ready in the last minute.
+ * Undefined once the workload is just running (or being deleted).
+ */
+export function deployState(input: DeployStateInput): DeployState | undefined {
+  const { workload, instances, deploy, deployments, healthyCount, now } = input;
+  if (workload.deleting) return undefined;
+
+  if (healthyCount === 0) {
+    for (const instance of instances) {
+      const problem = instanceProblem(instance);
+      if (problem?.tone === 'error') {
+        return { phase: 'failed', since: workload.createdAt, problem, failedInstance: instance };
+      }
+    }
+  }
+
+  const coming = !!deploy || instancesStarting(instances);
+  if (coming) {
+    const since = deploy?.since ?? workload.updatedAt ?? workload.createdAt;
+    const cause = stallCause(deployments, instances, deploy);
+    const slow = deploy?.tone === 'warning' || now - since.getTime() > DEPLOY_STALLED_AFTER_MS;
+    if (cause || slow) {
+      return {
+        phase: 'stalled',
+        since,
+        stuckOn: cause?.title ?? deploy?.step ?? 'Starting instances',
+        problem: cause ?? {
+          tone: 'warn',
+          title: `${deploy?.step ?? 'Starting instances'} is taking longer than usual`,
+          message: deploy?.message,
+          hints: ['Most deploys finish within a minute.', 'The instances below show how far each one has got.'],
+          showLogs: false,
+        },
+      };
+    }
+    return { phase: 'deploying', since };
+  }
+
+  const readyAt = instancesReadyAt(instances);
+  if (
+    readyAt &&
+    now - readyAt.getTime() < DEPLOYED_FOR_MS &&
+    now - workload.createdAt.getTime() < FIRST_DEPLOY_WINDOW_MS
+  ) {
+    return { phase: 'deployed', since: workload.createdAt, readyAt };
+  }
+  return undefined;
+}
+
+const plural = (n: number, one: string, many: string) => `${n} ${n === 1 ? one : many}`;
+
+/** The card's headline for a deploy state. */
+export function deployHeadline(
+  state: DeployState,
+  counts: { healthy: number; total: number; locations: number },
+  now: number
+): OverviewStatus {
+  const ready = `${counts.healthy}/${plural(counts.total, 'instance', 'instances')} ready`;
+  switch (state.phase) {
+    case 'deploying':
+      return { tone: 'muted', title: 'Deploying', detail: `Started ${formatElapsed(state.since, now)} ago · ${ready}` };
+    case 'deployed':
+      return {
+        tone: 'ok',
+        title: `Deployed in ${formatElapsed(state.since, (state.readyAt ?? new Date(now)).getTime())}`,
+        detail: `${ready} · ${plural(counts.locations, 'location', 'locations')}`,
+      };
+    case 'stalled':
+      return { tone: 'warn', title: 'Taking longer than expected', detail: `Deploying for ${formatElapsed(state.since, now)} · ${ready}` };
+    case 'failed': {
+      const what = state.problem?.title ?? 'an instance failed';
+      return { tone: 'error', title: 'Deploy failed', detail: `${ready} · ${what.charAt(0).toLowerCase()}${what.slice(1)}` };
+    }
+  }
+}
diff --git a/ui/consumer/src/lib/metrics-queries.test.ts b/ui/consumer/src/lib/metrics-queries.test.ts
index 72a55b9d..fadad6e2 100644
--- a/ui/consumer/src/lib/metrics-queries.test.ts
+++ b/ui/consumer/src/lib/metrics-queries.test.ts
@@ -4,6 +4,8 @@ import {
   namesMatcher,
   networkInterfaceSeriesLabels,
   networkTrafficQuery,
+  networkTrafficTotalQuery,
+  networkThroughputQuery,
   networkTrafficSeriesMatch,
   networkInterfaceRefs,
 } from './metrics-queries';
@@ -112,3 +114,23 @@ describe('seriesByWorkload', () => {
     expect(seriesByWorkload(undefined, 'resource_name', { web: ['web-1'] })).toEqual({});
   });
 });
+
+describe('networkTrafficTotalQuery', () => {
+  test('sums every interface into one series', () => {
+    expect(networkTrafficTotalQuery('proj', 'default', ifaces, 'receive')).toBe(
+      'sum(rate(datum_vpc_interface_receive_bytes_total{resourcemanager_datumapis_com_project_name="proj",resource_namespace="default",network=~"web-0-eth0|web-0-eth1"}[5m])) * 8'
+    );
+  });
+  test('has no query without refs or a namespace', () => {
+    expect(networkTrafficTotalQuery('proj', 'default', [], 'transmit')).toBeUndefined();
+    expect(networkTrafficTotalQuery('proj', undefined, ifaces, 'transmit')).toBeUndefined();
+  });
+});
+
+describe('networkThroughputQuery', () => {
+  test('adds receive and transmit per interface', () => {
+    expect(networkThroughputQuery('proj', 'default', [ifaces[0]])).toBe(
+      'sum by (network) (rate({__name__=~"datum_vpc_interface_receive_bytes_total|datum_vpc_interface_transmit_bytes_total",resourcemanager_datumapis_com_project_name="proj",resource_namespace="default",network="web-0-eth0"}[5m])) * 8'
+    );
+  });
+});
diff --git a/ui/consumer/src/lib/metrics-queries.ts b/ui/consumer/src/lib/metrics-queries.ts
index 92c0abfc..a8c0353d 100644
--- a/ui/consumer/src/lib/metrics-queries.ts
+++ b/ui/consumer/src/lib/metrics-queries.ts
@@ -98,6 +98,34 @@ export function networkTrafficQuery(
   return `sum by (network) (rate(${metric}{${labels}}[5m])) * 8`;
 }
 
+/**
+ * bits/s summed over every interface, one series. The workload Overview's
+ * Network stat passes every instance's interfaces; the series carry no
+ * workload label, so only instances that exist now are counted.
+ */
+export function networkTrafficTotalQuery(
+  projectId: string,
+  namespace: string | undefined,
+  interfaces: readonly InstanceNetworkInterface[],
+  direction: TrafficDirection
+): string | undefined {
+  const labels = networkTrafficLabels(projectId, namespace, interfaces);
+  if (!labels) return undefined;
+  const metric = direction === 'receive' ? VPC_INTERFACE_RECEIVE_METRIC : VPC_INTERFACE_TRANSMIT_METRIC;
+  return `sum(rate(${metric}{${labels}}[5m])) * 8`;
+}
+
+/** bits/s in and out together, per interface (`network` label). */
+export function networkThroughputQuery(
+  projectId: string,
+  namespace: string | undefined,
+  interfaces: readonly InstanceNetworkInterface[]
+): string | undefined {
+  const labels = networkTrafficLabels(projectId, namespace, interfaces);
+  if (!labels) return undefined;
+  return `sum by (network) (rate({__name__=~"${VPC_INTERFACE_RECEIVE_METRIC}|${VPC_INTERFACE_TRANSMIT_METRIC}",${labels}}[5m])) * 8`;
+}
+
 /** Instant selector used to probe whether the metric exists for this instance. */
 export function networkTrafficSeriesMatch(
   projectId: string,
@@ -197,7 +225,7 @@ export function workloadMemoryByInstanceQuery(
  */
 export function seriesByWorkload(
   data: FormattedMetricData | undefined,
-  label: InstanceIdentityLabel,
+  label: string,
   instanceKeysByWorkload: Readonly<Record<string, readonly string[]>>
 ): Record<string, ChartDataPoint[]> {
   if (!data) return {};
diff --git a/ui/consumer/src/lib/network-interface-metrics.test.ts b/ui/consumer/src/lib/network-interface-metrics.test.ts
index 64f153bb..668920ca 100644
--- a/ui/consumer/src/lib/network-interface-metrics.test.ts
+++ b/ui/consumer/src/lib/network-interface-metrics.test.ts
@@ -1,5 +1,6 @@
 import { describe, expect, test } from 'vitest';
-import { resolveNetworkInterfaceMetrics } from './network-interface-metrics';
+import { resolveNetworkInterfaceMetrics, workloadInterfaceSeriesLabels } from './network-interface-metrics';
+import type { Instance } from '../schema';
 
 const ifaces = [{ name: 'eth0', network: 'default', networkInterfaceRef: 'web-0-eth0' }];
 
@@ -138,3 +139,19 @@ describe('resolveNetworkInterfaceMetrics', () => {
     expect(s.transmitQuery).toBeUndefined();
   });
 });
+
+describe('workloadInterfaceSeriesLabels', () => {
+  const inst = (name: string, refs: string[]) =>
+    ({
+      name,
+      networkInterfaces: refs.map((ref, i) => ({ name: `eth${i}`, networkInterfaceRef: ref })),
+    }) as unknown as Instance;
+  test('labels each interface with its instance, and the interface when there are several', () => {
+    expect(
+      workloadInterfaceSeriesLabels([
+        inst('web-default-us-east-1-0', ['a-eth0']),
+        inst('web-default-eu-west-1-0', ['b-eth0', 'b-eth1']),
+      ])
+    ).toEqual({ 'a-eth0': 'us-east-1-0', 'b-eth0': 'eu-west-1-0 · eth0', 'b-eth1': 'eu-west-1-0 · eth1' });
+  });
+});
diff --git a/ui/consumer/src/lib/network-interface-metrics.ts b/ui/consumer/src/lib/network-interface-metrics.ts
index 115cfbdb..56665127 100644
--- a/ui/consumer/src/lib/network-interface-metrics.ts
+++ b/ui/consumer/src/lib/network-interface-metrics.ts
@@ -6,11 +6,14 @@
 import { useMemo } from 'react';
 import {
   networkInterfaceRefs,
+  networkTrafficTotalQuery,
+  networkThroughputQuery,
   networkInterfaceSeriesLabels,
   networkTrafficQuery,
   networkTrafficSeriesMatch,
 } from './metrics-queries';
 import { isPrometheusDenied, usePrometheusLabelValues } from './prometheus';
+import { shortInstanceLabels } from './series-view';
 import type { Instance, InstanceNetworkInterface } from '../schema';
 
 export interface NetworkInterfaceMetricsState {
@@ -94,3 +97,72 @@ export function useNetworkInterfaceMetrics(
     [projectId, namespace, interfaces, probedNetworks, probeDenied, probeError, probeLoading]
   );
 }
+
+/**
+ * Series labels for a workload's interfaces: the instance's short label
+ * ("us-east-1-0"), plus the interface name when an instance has several.
+ */
+export function workloadInterfaceSeriesLabels(instances: readonly Instance[]): Record<string, string> {
+  const short = shortInstanceLabels(instances.map((instance) => instance.name));
+  const labels: Record<string, string> = {};
+  for (const instance of instances) {
+    const refs = instance.networkInterfaces.filter((i) => i.networkInterfaceRef);
+    for (const iface of refs) {
+      const base = short[instance.name] ?? instance.name;
+      labels[iface.networkInterfaceRef as string] = refs.length > 1 ? `${base} · ${iface.name}` : base;
+    }
+  }
+  return labels;
+}
+
+export interface WorkloadNetworkMetricsState extends NetworkInterfaceMetricsState {
+  /** Every interface summed, for a single headline series. */
+  receiveTotalQuery: string | undefined;
+  transmitTotalQuery: string | undefined;
+  /** In and out together, one series per interface. */
+  throughputQuery: string | undefined;
+  /** Each instance's interface refs, to fold interface series into instance rows. */
+  refsByInstance: Record<string, string[]>;
+}
+
+/**
+ * Network traffic across a workload's instances: the instance hook's probe
+ * and queries over every instance's interfaces, with per-instance series
+ * labels and summed totals.
+ */
+export function useWorkloadNetworkMetrics(
+  projectId: string | undefined,
+  instances: readonly Instance[]
+): WorkloadNetworkMetricsState {
+  const interfaces = useMemo(() => instances.flatMap((instance) => instance.networkInterfaces), [instances]);
+  const namespace = instances.find((instance) => instance.namespace)?.namespace;
+  const match = projectId ? networkTrafficSeriesMatch(projectId, namespace, interfaces) : undefined;
+  const enabled = !!projectId && networkInterfaceRefs(interfaces).length > 0;
+  const probe = usePrometheusLabelValues(projectId, 'network', match, { enabled });
+  const probeDenied = isPrometheusDenied(probe.error);
+  const probeError = probe.error ?? undefined;
+  const probeLoading = enabled && probe.isLoading;
+  const probedNetworks = probe.data;
+  return useMemo(() => {
+    const state = resolveNetworkInterfaceMetrics({
+      projectId,
+      namespace,
+      interfaces,
+      probedNetworks,
+      probeDenied,
+      probeError,
+      probeLoading,
+    });
+    const live = projectId && !state.unavailable && !state.isDenied;
+    return {
+      ...state,
+      seriesLabels: workloadInterfaceSeriesLabels(instances),
+      receiveTotalQuery: live ? networkTrafficTotalQuery(projectId, namespace, interfaces, 'receive') : undefined,
+      transmitTotalQuery: live ? networkTrafficTotalQuery(projectId, namespace, interfaces, 'transmit') : undefined,
+      throughputQuery: live ? networkThroughputQuery(projectId, namespace, interfaces) : undefined,
+      refsByInstance: Object.fromEntries(
+        instances.map((instance) => [instance.name, networkInterfaceRefs(instance.networkInterfaces)])
+      ),
+    };
+  }, [projectId, namespace, interfaces, instances, probedNetworks, probeDenied, probeError, probeLoading]);
+}
diff --git a/ui/consumer/src/lib/use-workload-overview-state.ts b/ui/consumer/src/lib/use-workload-overview-state.ts
index 999e6e15..148c853d 100644
--- a/ui/consumer/src/lib/use-workload-overview-state.ts
+++ b/ui/consumer/src/lib/use-workload-overview-state.ts
@@ -5,8 +5,15 @@
  * topology and instance rows link to.
  */
 import { albStatus, anyAlbProvisioning, type AlbStatus } from './alb-status';
+import { DEPLOYED_FOR_MS, instancesReadyAt } from './deploy-presenters';
 import { useNow } from './use-now';
-import { deployStatus, overviewHealth, type DeployStatus, type StatusDisplay } from './workload-presenters';
+import {
+  deployStatus,
+  instancesStarting,
+  overviewHealth,
+  type DeployStatus,
+  type StatusDisplay,
+} from './workload-presenters';
 import type { WorkloadOutletContext } from '../pages/workload-outlet-context';
 import { workloadHealthToBadgeType, type WorkloadHealth } from '../schema';
 import { useCallback, useMemo } from 'react';
@@ -71,7 +78,11 @@ export function useWorkloadOverviewState({
 
   const { health, failure, instancesFailing } = overviewHealth(workload, instances);
   const albs = published?.proxies;
-  const now = useNow(health === 'Deploying' || (!!albs && anyAlbProvisioning(albs)));
+  const readyAt = instancesReadyAt(instances);
+  const justDeployed = !!readyAt && Date.now() - readyAt.getTime() < DEPLOYED_FOR_MS;
+  const now = useNow(
+    health === 'Deploying' || instancesStarting(instances) || justDeployed || (!!albs && anyAlbProvisioning(albs))
+  );
   const deploy = instancesFailing ? undefined : deployStatus(workload, now);
   const albStatuses = useMemo(
     () =>
diff --git a/ui/consumer/src/lib/workload-presenters.test.ts b/ui/consumer/src/lib/workload-presenters.test.ts
index 849e3cc9..4a04301a 100644
--- a/ui/consumer/src/lib/workload-presenters.test.ts
+++ b/ui/consumer/src/lib/workload-presenters.test.ts
@@ -1,6 +1,13 @@
 import { describe, expect, test } from 'vitest';
 import {
   compactDetailRows,
+  crashDetail,
+  crashDetailText,
+  firstCrash,
+  formatAgo,
+  instanceNameParts,
+  instanceProblem,
+  instancesStarting,
   DEPLOY_STALLED_AFTER_MS,
   HEALTH_DOT_COLOR,
   STATUS_TONE_COLOR,
@@ -21,6 +28,7 @@ import {
   workloadStatusTone,
 } from './workload-presenters';
 import type { Instance, Workload, WorkloadHealth } from '../schema';
+import { SETTLING_WINDOW_MS, workloadSettling } from './workload-settling';
 
 function workload(name: string, health: WorkloadHealth, createdAt: string): Workload {
   return {
@@ -676,3 +684,150 @@ describe('instanceReadiness before programming', () => {
     expect(result.tone).toBe('muted');
   });
 });
+
+describe('formatAgo', () => {
+  const now = new Date('2026-11-06T12:00:00Z').getTime();
+  test.each([
+    [2_000, 'just now'],
+    [45_000, '45s ago'],
+    [12 * 60_000, '12m ago'],
+    [3 * 3_600_000, '3h ago'],
+    [47 * 3_600_000, '47h ago'],
+    [4 * 86_400_000, '4d ago'],
+  ])('%i ms ago reads %s', (ago, text) => {
+    expect(formatAgo(new Date(now - ago), now)).toBe(text);
+  });
+});
+
+describe('instanceNameParts', () => {
+  test('splits off the workload name', () => {
+    expect(instanceNameParts('web-default-us-east-1-0', 'web')).toEqual({ prefix: 'web-', rest: 'default-us-east-1-0' });
+  });
+  test('keeps names that do not start with the workload name whole', () => {
+    expect(instanceNameParts('other-0', 'web')).toEqual({ prefix: '', rest: 'other-0' });
+    expect(instanceNameParts('web-', 'web')).toEqual({ prefix: '', rest: 'web-' });
+  });
+});
+
+describe('crashDetail', () => {
+  test('reads exit code and restarts from the runtime message', () => {
+    expect(crashDetail('Container "app" exited with code 137 and has restarted 3 times')).toEqual({
+      exitCode: 137,
+      restarts: 3,
+    });
+  });
+  test('reads restarts alone', () => {
+    expect(crashDetail('Container "app" keeps exiting and has restarted 1 time')).toEqual({ restarts: 1 });
+  });
+  test('is undefined for other messages', () => {
+    expect(crashDetail('Back-off restarting failed container')).toBeUndefined();
+    expect(crashDetail(undefined)).toBeUndefined();
+  });
+  test('describes exit 137 as out of memory', () => {
+    expect(crashDetailText({ exitCode: 137, restarts: 3 })).toBe('Killed, usually out of memory (exit 137) · 3 restarts');
+    expect(crashDetailText({ exitCode: 1, restarts: 1 })).toBe('Exited with code 1 · 1 restart');
+  });
+});
+
+describe('firstCrash', () => {
+  test('finds the first instance whose runtime is crashing', () => {
+    const healthy = instance('a', [{ type: 'Ready', status: 'True' }], 'Available');
+    const crash = instance('b', [
+      { type: 'RuntimeReady', status: 'False', reason: 'InstanceCrashing', message: 'Container "app" exited with code 2 and has restarted 5 times' },
+    ]);
+    expect(firstCrash([healthy, crash])).toEqual({ instance: crash, detail: { exitCode: 2, restarts: 5 } });
+    expect(firstCrash([healthy])).toBeUndefined();
+  });
+});
+
+
+describe('overviewStatusLine, partial failure', () => {
+  test('is degraded while some instances still serve', () => {
+    const line = overviewStatusLine({
+      health: 'Unavailable',
+      deleting: false,
+      healthyCount: 2,
+      totalCount: 3,
+      locationCount: 3,
+      failure: '1 instance failing: Back-off',
+    });
+    expect(line).toEqual({ tone: 'warn', title: 'Degraded', detail: '2/3 instances available · 1 instance failing: Back-off' });
+  });
+});
+
+describe('starting instances', () => {
+  const booting = () =>
+    instance('b', [
+      { type: 'Programmed', status: 'True' },
+      { type: 'Ready', status: 'False', reason: 'Provisioning' },
+    ]);
+  const running = () => instance('a', [{ type: 'Ready', status: 'True' }], 'Available');
+
+  test('a placed instance that is still provisioning reads as starting, not amber', () => {
+    expect(instanceReadiness(booting())).toEqual({ tone: 'muted', label: 'Starting', reason: 'Booting' });
+  });
+  test('instancesStarting is true while any instance boots and none has failed', () => {
+    expect(instancesStarting([running(), booting()])).toBe(true);
+    expect(instancesStarting([running()])).toBe(false);
+    expect(instancesStarting([])).toBe(false);
+    expect(instancesStarting([booting(), crashing('c')])).toBe(false);
+  });
+});
+
+describe('workloadSettling', () => {
+  const now = new Date('2026-11-06T12:00:00Z').getTime();
+  const at = (ago: number) => new Date(now - ago);
+  test('is true while deploying', () => {
+    expect(workloadSettling({ ...workload('w', 'Deploying', '2026-11-06T11:00:00Z') }, now)).toBe(true);
+  });
+  test('stays true after Available until replicas are ready, within the window', () => {
+    const w = { ...workload('w', 'Available', '2026-11-06T11:00:00Z'), readyReplicas: 0, updatedAt: at(5_000) };
+    expect(workloadSettling(w, now)).toBe(true);
+    expect(workloadSettling({ ...w, updatedAt: at(SETTLING_WINDOW_MS + 1) }, now)).toBe(false);
+    expect(workloadSettling({ ...w, readyReplicas: 1 }, now)).toBe(false);
+  });
+  test('is false while deleting', () => {
+    expect(workloadSettling({ ...workload('w', 'Deploying', '2026-11-06T11:00:00Z'), deleting: true }, now)).toBe(false);
+  });
+});
+
+describe('instanceProblem', () => {
+  const withImage = (i: Instance, image: string): Instance => ({ ...i, image });
+  test('is undefined for a healthy or starting instance', () => {
+    expect(instanceProblem(instance('a', [{ type: 'Ready', status: 'True' }], 'Available'))).toBeUndefined();
+    expect(instanceProblem(instance('b', [{ type: 'Ready', status: 'False', reason: 'Provisioning' }]))).toBeUndefined();
+  });
+  test('explains an image that cannot be pulled anonymously from Docker Hub', () => {
+    const p = instanceProblem(
+      withImage(
+        instance('c', [
+          { type: 'Programmed', status: 'False', reason: 'ImageUnavailable', message: 'Image "docker.io/library/busybox:1.37" for container "app" could not be pulled anonymously' },
+        ]),
+        'docker.io/library/busybox:1.37'
+      )
+    );
+    expect(p?.title).toBe("The image can't be pulled");
+    expect(p?.tone).toBe('error');
+    expect(p?.showLogs).toBe(false);
+    expect(p?.hints).toHaveLength(3);
+    expect(p?.hints[0]).toContain('docker.io/library/busybox:1.37');
+  });
+  test('leaves out the Docker Hub hint for other registries', () => {
+    const p = instanceProblem(
+      withImage(
+        instance('d', [{ type: 'Ready', status: 'False', reason: 'ImageUnavailable', message: 'could not be pulled anonymously' }]),
+        'ghcr.io/acme/app:1'
+      )
+    );
+    expect(p?.hints).toHaveLength(2);
+  });
+  test('turns a crash message into exit code, restarts and a memory hint', () => {
+    const p = instanceProblem(
+      instance('e', [
+        { type: 'RuntimeReady', status: 'False', reason: 'InstanceCrashing', message: 'Container "app" exited with code 137 and has restarted 3 times' },
+      ])
+    );
+    expect(p).toMatchObject({ tone: 'warn', title: 'The app keeps crashing', message: 'Killed, usually out of memory (exit 137) · 3 restarts', showLogs: true });
+    expect(p?.hints[0]).toContain('out of memory');
+  });
+});
diff --git a/ui/consumer/src/lib/workload-presenters.ts b/ui/consumer/src/lib/workload-presenters.ts
index aea66666..37cc82c0 100644
--- a/ui/consumer/src/lib/workload-presenters.ts
+++ b/ui/consumer/src/lib/workload-presenters.ts
@@ -310,6 +310,10 @@ export function instanceReadiness(instance: Instance): InstanceReadiness {
   if (instance.status === 'Available' && ready?.status !== 'False') {
     return { tone: 'ok', label: 'Running' };
   }
+  // Placed and booting: still on its way up, not a problem yet.
+  if (programmed?.status === 'True' && ready?.status === 'False' && ready.reason === 'Provisioning') {
+    return { tone: 'muted', label: 'Starting', reason: 'Booting' };
+  }
   if (programmed?.status === 'True' && ready?.status !== 'True') {
     const unrecoverable = UNRECOVERABLE_READY_REASONS.has(ready?.reason ?? '');
     const base: InstanceReadiness = unrecoverable
@@ -487,6 +491,8 @@ export function overviewStatusLine(input: OverviewStatusInput): OverviewStatus {
     ].join(' · ');
     return { tone: deploy.tone === 'warning' ? 'warn' : 'muted', title: deploy.title, detail };
   }
+  // Some instances still serve: a partial failure is degraded, not down.
+  if (failure && healthyCount > 0) return { tone: 'warn', title: 'Degraded', detail: `${available} · ${failure}` };
   if (failure) return { tone: 'error', title: 'Unavailable', detail: `${failure} · ${available}` };
   if (health === 'Unavailable') {
     return { tone: 'error', title: 'Unavailable', detail: totalCount === 0 ? 'No running instances' : available };
@@ -567,3 +573,154 @@ export function matchesWorkloadSearch(
     .toLowerCase()
     .includes(needle);
 }
+
+/** "just now", "45s ago", "12m ago", "3h ago", "4d ago". */
+export function formatAgo(since: Date, now: number = Date.now()): string {
+  const secs = Math.max(0, Math.floor((now - since.getTime()) / 1000));
+  if (secs < 5) return 'just now';
+  if (secs < 60) return `${secs}s ago`;
+  const mins = Math.floor(secs / 60);
+  if (mins < 60) return `${mins}m ago`;
+  const hours = Math.floor(mins / 60);
+  if (hours < 48) return `${hours}h ago`;
+  return `${Math.floor(hours / 24)}d ago`;
+}
+
+/** An instance name split so the part after the workload name can be emphasised. */
+export interface InstanceNameParts {
+  /** The workload name and its trailing hyphen, or empty when it doesn't lead. */
+  prefix: string;
+  rest: string;
+}
+
+export function instanceNameParts(instanceName: string, workloadName: string): InstanceNameParts {
+  const prefix = `${workloadName}-`;
+  return workloadName && instanceName.startsWith(prefix) && instanceName.length > prefix.length
+    ? { prefix, rest: instanceName.slice(prefix.length) }
+    : { prefix: '', rest: instanceName };
+}
+
+/** What a crash message says about the last exit, until the API reports it as fields. */
+export interface CrashDetail {
+  exitCode?: number;
+  restarts?: number;
+}
+
+/**
+ * Reads the exit code and restart count out of a `RuntimeReady` crash message
+ * ("Container "app" exited with code 137 and has restarted 3 times"). The
+ * instance status has no fields for them yet (datum-cloud/compute#626).
+ */
+export function crashDetail(message: string | undefined): CrashDetail | undefined {
+  if (!message) return undefined;
+  const exit = /exited with code (\d+)/.exec(message);
+  const restarts = /restarted (\d+) times?/.exec(message);
+  if (!exit && !restarts) return undefined;
+  const detail: CrashDetail = {};
+  if (exit) detail.exitCode = Number(exit[1]);
+  if (restarts) detail.restarts = Number(restarts[1]);
+  return detail;
+}
+
+/** "Killed, usually out of memory (exit 137) · 3 restarts". */
+export function crashDetailText(detail: CrashDetail): string {
+  const parts: string[] = [];
+  if (detail.exitCode === 137) parts.push('Killed, usually out of memory (exit 137)');
+  else if (detail.exitCode !== undefined) parts.push(`Exited with code ${detail.exitCode}`);
+  if (detail.restarts !== undefined) parts.push(plural(detail.restarts, 'restart', 'restarts'));
+  return parts.join(' · ');
+}
+
+/** The crash detail of the first crashing instance, with the instance it came from. */
+export function firstCrash(
+  instances: readonly Instance[]
+): { instance: Instance; detail: CrashDetail } | undefined {
+  for (const instance of instances) {
+    const failing = instance.conditions.find(
+      (c) => (c.type === 'RuntimeReady' || c.type === 'Ready') && c.status === 'False' && c.reason === 'InstanceCrashing'
+    );
+    const detail = crashDetail(failing?.message);
+    if (detail) return { instance, detail };
+  }
+  return undefined;
+}
+
+/**
+ * Instances still on their way up: none has failed, and at least one is
+ * starting. The workload reports Available as soon as a placement exists,
+ * seconds before its instances serve, so the Overview keeps showing deploy
+ * progress until this is false.
+ */
+export function instancesStarting(instances: readonly Instance[]): boolean {
+  if (instances.length === 0) return false;
+  const readiness = instances.map((instance) => instanceReadiness(instance));
+  if (readiness.some((r) => r.tone === 'error' || r.tone === 'warn')) return false;
+  return readiness.some((r) => r.tone === 'muted');
+}
+
+/** What is wrong with an instance, in plain words, and what to try. */
+export interface InstanceProblem {
+  tone: 'error' | 'warn';
+  title: string;
+  /** The platform's own message, shown as reported. */
+  message?: string;
+  hints: string[];
+  /** The logs are likely to say more (the app ran at least once). */
+  showLogs: boolean;
+}
+
+/**
+ * The instance's failure, explained: from its `Ready`/`Programmed` failure
+ * reason, or a crash reported by `RuntimeReady`. Undefined while healthy or
+ * still starting.
+ */
+export function instanceProblem(instance: Instance): InstanceProblem | undefined {
+  const crash = instance.conditions.find(
+    (c) => (c.type === 'RuntimeReady' || c.type === 'Ready') && c.status === 'False' && c.reason === 'InstanceCrashing'
+  );
+  const failure = crash ?? instanceFailure(instance.conditions);
+  if (!failure) return undefined;
+  const message = failure.message || undefined;
+
+  switch (failure.reason) {
+    case 'ImageUnavailable': {
+      const image = instance.image ?? 'the image';
+      const anonymous = /anonymous/i.test(message ?? '');
+      const dockerHub = /^(docker\.io\/|index\.docker\.io\/|[^./]+(:|$)|[^./]+\/[^./]+(:|$))/.test(instance.image ?? '');
+      const hints = [`Check that ${image} exists and its tag is spelled correctly.`];
+      hints.push(
+        anonymous
+          ? 'It was pulled without credentials. A private image needs registry credentials (imagePullSecrets) on the workload.'
+          : 'If the image is private, add registry credentials (imagePullSecrets) to the workload.'
+      );
+      if (dockerHub && anonymous) {
+        hints.push('Docker Hub can refuse anonymous pulls when it rate-limits. Retry later, or use the same image from another registry.');
+      }
+      return { tone: 'error', title: "The image can't be pulled", message, hints, showLogs: false };
+    }
+    case 'InstanceCrashing': {
+      const detail = crashDetail(message);
+      const hints = ['Check the logs for the error just before each exit.'];
+      if (detail?.exitCode === 137) {
+        hints.unshift('Exit 137 usually means it ran out of memory. Try a larger instance type, or lower the app’s memory use.');
+      }
+      return {
+        tone: 'warn',
+        title: 'The app keeps crashing',
+        message: detail ? crashDetailText(detail) : message,
+        hints,
+        showLogs: true,
+      };
+    }
+    case 'ConfigurationError':
+      return {
+        tone: 'error',
+        title: 'The configuration was rejected',
+        message,
+        hints: ['Fix the field the message names in the workload spec, then redeploy.'],
+        showLogs: false,
+      };
+    default:
+      return { tone: 'error', title: 'The instance failed', message, hints: [], showLogs: true };
+  }
+}
diff --git a/ui/consumer/src/lib/workload-settling.ts b/ui/consumer/src/lib/workload-settling.ts
new file mode 100644
index 00000000..2b8f4c3e
--- /dev/null
+++ b/ui/consumer/src/lib/workload-settling.ts
@@ -0,0 +1,20 @@
+/**
+ * Whether a workload's pages should poll fast. Kept free of runtime imports
+ * so `api.ts` can use it without an import cycle.
+ */
+import type { Workload } from '../schema';
+
+/** How long after its last change a workload short of ready replicas is still polled fast. */
+export const SETTLING_WINDOW_MS = 10 * 60_000;
+
+/**
+ * Whether a workload is still settling: deploying, or recently changed with
+ * fewer ready replicas than desired. Pages poll faster while it is, so short
+ * starting states are seen; a long-broken workload falls back to the normal rate.
+ */
+export function workloadSettling(workload: Workload, now: number = Date.now()): boolean {
+  if (workload.deleting) return false;
+  if (workload.health === 'Deploying') return true;
+  const changed = (workload.updatedAt ?? workload.createdAt).getTime();
+  return workload.readyReplicas < workload.desiredReplicas && now - changed < SETTLING_WINDOW_MS;
+}
diff --git a/ui/consumer/src/pages/instance-overview.tsx b/ui/consumer/src/pages/instance-overview.tsx
index 50505cfd..2beaee0e 100644
--- a/ui/consumer/src/pages/instance-overview.tsx
+++ b/ui/consumer/src/pages/instance-overview.tsx
@@ -2,7 +2,6 @@
  * Instance Overview tab body. Mounted under {@link ./instance-detail.tsx}'s
  * layout shell via `<Outlet />` — chrome stays mounted across tab changes.
  */
-import { instanceFailure } from '../adapter';
 import { CommandBlock } from '../components/cli-section';
 import { DetailList, StatusBadge } from '../components/detail-list';
 import { RecentInstanceLogs } from '../components/instance-logs';
@@ -20,7 +19,8 @@ import {
 import { formatLocationName, formatLocationTooltip, useLocationIndex } from '../lib/locations';
 import { cpuUsageQuery, memoryUsageQuery, useInstanceMetricIdentity } from '../lib/metrics-queries';
 import { lastThirtyMinutesRange, usePrometheusCard, type PrometheusTimeRange } from '../lib/prometheus';
-import { instanceStatusLabel } from '../lib/workload-presenters';
+import { instanceProblem, instanceStatusLabel } from '../lib/workload-presenters';
+import { InstanceProblemCallout } from '../components/instance-problem';
 import { instanceStatusToBadgeType, type Instance } from '../schema';
 import {
   Card,
@@ -137,19 +137,10 @@ function SizeValue({ instance }: { instance: Instance }) {
   );
 }
 
-/** Badge, plus what's wrong when the instance is failing. */
+/** The status badge. What's wrong, when anything is, is in the problem callout above the cards. */
 function StatusValue({ instance }: { instance: Instance }) {
-  const failure = instanceFailure(instance.conditions);
-
   return (
-    <span className="flex min-w-0 flex-col gap-1">
-      <StatusBadge type={instanceStatusToBadgeType(instance.status)}>
-        {instanceStatusLabel(instance)}
-      </StatusBadge>
-      {failure?.message ? (
-        <span className="text-muted-foreground text-xs">{failure.message}</span>
-      ) : null}
-    </span>
+    <StatusBadge type={instanceStatusToBadgeType(instance.status)}>{instanceStatusLabel(instance)}</StatusBadge>
   );
 }
 
@@ -466,9 +457,11 @@ export default function InstanceOverview() {
     albLoading,
   } = useInstanceOutlet();
   const locationIndex = useLocationIndex(projectId);
+  const problem = instanceProblem(instance);
 
   return (
     <>
+      {problem ? <InstanceProblemCallout problem={problem} logsHref={logsHref} /> : null}
       <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
         <GeneralCard
           instance={instance}
diff --git a/ui/consumer/src/pages/workload-detail.tsx b/ui/consumer/src/pages/workload-detail.tsx
index ea8d3da1..4d355c8e 100644
--- a/ui/consumer/src/pages/workload-detail.tsx
+++ b/ui/consumer/src/pages/workload-detail.tsx
@@ -9,13 +9,9 @@
  * Breadcrumbs are left to the host `ContentWrapper` — do not re-render them
  * inside the plugin (that double-stacks chrome vs native pages).
  */
-import {
-  DetailList,
-  DETAILS_GRID_CLASS,
-  OPEN_ROW_PADDING,
-  StatusBadge,
-} from "../components/detail-list";
-import { RecentInstanceLogs } from "../components/instance-logs";
+import { StatusBadge } from "../components/detail-list";
+import { ResourceActivity } from "../components/resource-activity";
+import { WorkloadOverviewCard } from "../components/workload-overview-card";
 import { WorkloadPageChrome } from "../components/workload-page-chrome";
 import { DeleteWorkloadDialog, useDeleteWorkloadDialog } from "../components/delete-workload-dialog";
 import {
@@ -25,12 +21,13 @@ import {
   WorkloadTopologySkeleton,
 } from "../components/skeletons";
 import { ErrorOrRestrictedState } from "../components/states";
-import { SectionFrame, StatusLine } from "../components/surface";
+import { SectionFrame } from "../components/surface";
 import { WorkloadInstances } from "../components/workload-instances";
 import {
   useDeletePermissions,
   usePublishedUrl,
   useWorkload,
+  useWorkloadDeployments,
   useWorkloadInstances,
   type PublishedUrl,
 } from "../lib/api";
@@ -43,16 +40,26 @@ import {
 } from "../lib/alb-status";
 import { WorkloadUrl } from "../components/workload-url";
 import { albOverviewHref, useWorkloadOverviewState } from "../lib/use-workload-overview-state";
-import { compactDetailRows, overviewStatusLine } from "../lib/workload-presenters";
-import { formatLocationNames, useLocationIndex } from "../lib/locations";
+import {
+  compactDetailRows,
+  firstCrash,
+  instancesStarting,
+  overviewStatusLine,
+} from "../lib/workload-presenters";
+import { deployHeadline, deployState, deployTimeline } from "../lib/deploy-presenters";
+import { formatLocationName, formatLocationNames, useLocationIndex } from "../lib/locations";
+import { computeResourceLinkResolver, workloadActivityFilter } from "../lib/activity";
+import { workloadSettling } from "../lib/workload-settling";
+import { allocationOf, formatBytes, parseCpuCores, parseMemoryBytes } from "../lib/resource-usage";
+import { Card, CardHeader, CardTitle } from "@datum-cloud/datum-ui/card";
 import { identityValues, useProjectResourceIdentity } from "../lib/metrics-queries";
 import type { WorkloadOutletContext } from "./workload-outlet-context";
 import { useWorkloadOutlet } from "./workload-outlet-context";
 import WorkloadLogs from "./workload-logs";
 import WorkloadMetrics from "./workload-metrics";
-import type { Workload } from "../schema";
+import type { Instance, Workload } from "../schema";
 import { Icon } from "@datum-cloud/datum-ui/icons";
-import { GlobeIcon } from "lucide-react";
+import { GlobeIcon, SettingsIcon } from "lucide-react";
 import { lazy, Suspense, useMemo, type ReactNode } from "react";
 import {
   Link,
@@ -153,9 +160,8 @@ interface DetailRow {
 
 interface WorkloadDetailsProps {
   workload: Workload;
+  instances: readonly Instance[];
   albStatuses: Record<string, AlbStatus>;
-  healthyCount: number;
-  totalCount: number;
   projectId?: string;
   published?: PublishedUrl | null;
   publishedLoading: boolean;
@@ -170,20 +176,52 @@ function mono(text: string) {
   );
 }
 
-/** General and Configuration rows, in display order, before empty ones are dropped. */
+/** "2 vCPU · 4 GB" from the first instance's allocation, when it is known. */
+function instanceSize(instances: readonly Instance[]): string | undefined {
+  const first = instances[0];
+  const cores = parseCpuCores(first?.cpu);
+  const memory = parseMemoryBytes(first?.memory);
+  const parts = [
+    cores !== undefined ? `${cores} vCPU` : undefined,
+    memory !== undefined ? formatBytes(memory) : undefined,
+  ].filter(Boolean);
+  return parts.length > 0 ? parts.join(" · ") : undefined;
+}
+
+/** Configuration rows, in display order, before empty ones are dropped. */
 function workloadDetailRows({
   workload,
+  instances,
   albStatuses,
-  healthyCount,
-  totalCount,
   projectId,
   published,
   publishedLoading,
   locationLabel,
 }: WorkloadDetailsProps): DetailRow[] {
   const { main: resourceShort } = splitSlashValue(workload.resources ?? "");
+  const size = instanceSize(instances);
+  const type = resourceShort || workload.resources;
   return [
-    { label: "Resource name", value: workload.name, content: mono(workload.name) },
+    { label: "Image", value: workload.image, content: workload.image ? mono(workload.image) : null },
+    {
+      label: "Instance type",
+      value: type ?? size,
+      content: [type, size].filter(Boolean).join(" · "),
+    },
+    {
+      label: "Replicas",
+      value: workload.desiredReplicas,
+      content:
+        workload.replicasPerRegion !== undefined
+          ? `${workload.replicasPerRegion} per location · ${workload.desiredReplicas} total`
+          : `${workload.desiredReplicas} total`,
+    },
+    {
+      label: "Locations",
+      value: workload.locations,
+      content: <span title={workload.locations.join(", ")}>{locationLabel}</span>,
+    },
+    { label: "Ports", value: workload.ports, content: mono(workload.ports.join(", ")) },
     {
       label: "Load balancer",
       // Held while loading so the row doesn't pop in after the rest.
@@ -197,56 +235,48 @@ function workloadDetailRows({
         />
       ),
     },
-    { label: "Instances", value: totalCount, content: `${healthyCount}/${totalCount}` },
+    { label: "Networks", value: workload.networks, content: mono(workload.networks.join(", ")) },
+    { label: "Runtime", value: workload.runtimeType, content: workload.runtimeType },
     {
       label: "Created",
       value: workload.createdAt,
       content: workload.createdAt.toLocaleDateString("en-GB", DETAIL_DATE_FORMAT),
     },
-    { label: "Runtime", value: workload.runtimeType, content: workload.runtimeType },
-    { label: "Image", value: workload.image, content: workload.image ? mono(workload.image) : null },
-    {
-      label: "Resources",
-      value: resourceShort || workload.resources,
-      content: resourceShort || workload.resources,
-    },
-    {
-      label: "Replicas",
-      value: workload.desiredReplicas,
-      content:
-        workload.replicasPerRegion !== undefined
-          ? `${workload.replicasPerRegion}/location · ${workload.desiredReplicas} total`
-          : `${workload.desiredReplicas} total`,
-    },
-    {
-      label: "Locations",
-      value: workload.locations,
-      content: <span title={workload.locations.join(", ")}>{locationLabel}</span>,
-    },
-    { label: "Networks", value: workload.networks, content: mono(workload.networks.join(", ")) },
-    { label: "Ports", value: workload.ports, content: mono(workload.ports.join(", ")) },
   ];
 }
 
+// Inline: the host compiles no fixed label width.
+const DETAIL_LABEL_STYLE = { width: "8rem" } as const;
+
 /**
- * General and Configuration merged into one two-column list. Rows with no
- * value are left out rather than shown as "Coming soon" or a dash, and the
- * grid fills row by row so dropped rows leave no holes.
+ * What the workload is, in its own card. Rows with no value are left out
+ * rather than shown as a dash; live state (instances, health) stays in the
+ * cards above.
  */
 function WorkloadDetails(props: WorkloadDetailsProps) {
   const rows = compactDetailRows(workloadDetailRows(props));
 
   return (
-    <SectionFrame title="Details" testId="compute-plugin-workload-details">
-      <div style={OPEN_ROW_PADDING}>
-        <DetailList
-          className={DETAILS_GRID_CLASS}
-          itemClassName="py-2"
-          labelClassName="text-muted-foreground font-normal"
-          items={rows.map((row) => ({ label: row.label, content: row.content }))}
-        />
-      </div>
-    </SectionFrame>
+    <Card sectioned size="sm" className="overflow-hidden" data-testid="compute-plugin-workload-details">
+      <CardHeader size="sm" bordered>
+        <CardTitle className="flex items-center gap-2 text-sm">
+          <Icon icon={SettingsIcon} size={16} className="text-secondary" aria-hidden />
+          Configuration
+        </CardTitle>
+      </CardHeader>
+      <dl className="flex flex-col">
+        {rows.map((row, index) => (
+          <div
+            key={row.label}
+            className={index === 0 ? "flex gap-4 px-4 py-2.5" : "flex gap-4 border-t px-4 py-2.5"}>
+            <dt className="text-muted-foreground shrink-0 text-sm" style={DETAIL_LABEL_STYLE}>
+              {row.label}
+            </dt>
+            <dd className="min-w-0 flex-1 text-sm">{row.content}</dd>
+          </div>
+        ))}
+      </dl>
+    </Card>
   );
 }
 
@@ -284,7 +314,8 @@ function WorkloadLayoutShell({
   } = useWorkloadInstances(
     projectId,
     workloadName,
-    workload?.health === "Deploying",
+    // Fast while instances are still coming up, not only while deploying.
+    workload ? workloadSettling(workload) : false,
   );
   const published = usePublishedUrl(projectId, workloadName);
   const locationIndex = useLocationIndex(projectId);
@@ -399,7 +430,20 @@ function WorkloadLayoutShell({
   );
 }
 
-function WorkloadOverview() {
+/**
+ * Overview: a summary card (status, endpoint, crash or deploy progress, the
+ * last hour's stats), the instances table, then what changed recently beside
+ * the workload's configuration.
+ */
+/** When an instance's failure was reported, for the end of the "so far" line. */
+function failedAt(instance: Instance | undefined): Date | undefined {
+  const condition = instance?.conditions.find(
+    (c) => (c.type === "Ready" || c.type === "Programmed") && c.status === "False" && c.lastTransitionTime,
+  );
+  return condition?.lastTransitionTime ? new Date(condition.lastTransitionTime) : undefined;
+}
+
+export function WorkloadOverview() {
   const context = useWorkloadOutlet();
   const {
     workload,
@@ -411,55 +455,102 @@ function WorkloadOverview() {
     published,
     publishedLoading,
     locationIndex,
-    instanceNames,
+    identityLabel,
+    identityDenied,
+    metricKeys,
     overviewHref,
   } = context;
-  const {
-    health,
-    failure,
-    deploy,
-    albStatuses,
-    now,
-    healthyCount,
-    totalCount,
-    instanceHref,
-  } = useWorkloadOverviewState(context);
+  const { health, failure, deploy, albStatuses, now, healthyCount, totalCount, instanceHref } =
+    useWorkloadOverviewState(context);
 
   const primaryAlb = published?.proxies[0];
   const primaryAlbStatus = primaryAlb ? albStatuses[primaryAlb.proxyName] : undefined;
-  const logsHref = `${overviewHref}/logs`;
-  const status = overviewStatusLine({
-    health,
-    deleting: workload.deleting,
-    deploy,
-    failure,
-    albError: primaryAlbStatus?.phase === "error" ? primaryAlbStatus.message : undefined,
-    healthyCount,
-    totalCount,
-    locationCount: workload.locations.length,
-    now,
-  });
+  // While a deploy is under way, stuck, failed or just finished, the card
+  // says so instead of showing (empty) stats.
+  const coming = !!deploy || (!workload.deleting && instancesStarting(instances));
+  const { data: deployments = [] } = useWorkloadDeployments(projectId, workload.uid, coming);
+  const state = deployState({ workload, instances, deploy, deployments, healthyCount, now });
+  const status = state
+    ? deployHeadline(state, { healthy: healthyCount, total: totalCount, locations: workload.locations.length }, now)
+    : overviewStatusLine({
+        health,
+        deleting: workload.deleting,
+        deploy,
+        failure,
+        albError: primaryAlbStatus?.phase === "error" ? primaryAlbStatus.message : undefined,
+        healthyCount,
+        totalCount,
+        locationCount: workload.locations.length,
+        now,
+      });
+  const timeline = state
+    ? deployTimeline(
+        workload,
+        instances,
+        state.phase === "failed" && state.problem
+          ? { label: state.problem.title, at: failedAt(state.failedInstance) ?? new Date(now), state: "failed" }
+          : state.phase === "stalled" && state.stuckOn
+            ? { label: state.stuckOn, at: state.since, state: "waiting" }
+            : undefined,
+      )
+    : undefined;
+  const problemActions =
+    state?.phase === "failed" && state.failedInstance
+      ? [{ label: "View instance", href: instanceHref(state.failedInstance.name), primary: true }]
+      : state?.phase === "stalled" && state.problem?.title === "Waiting for quota" && projectId
+        ? [{ label: "View usage", href: `/project/${projectId}/usage` }]
+        : [];
+  const crash = useMemo(() => firstCrash(instances), [instances]);
+  const allocation = useMemo(() => allocationOf(instances), [instances]);
+  const resolver = useMemo(
+    () => computeResourceLinkResolver(workload.name, overviewHref),
+    [workload.name, overviewHref],
+  );
 
   return (
     <>
-      <div data-testid="compute-plugin-workload-health">
-        <StatusLine
-          tone={status.tone}
-          title={status.title}
-          detail={<span title={status.detail}>{status.detail}</span>}
-          action={
-            primaryAlb?.hostname ? (
-              <AlbHostnameLink
-                hostname={primaryAlb.hostname}
-                href={projectId ? albOverviewHref(projectId, primaryAlb.proxyName) : undefined}
-                status={primaryAlbStatus}
-              />
-            ) : undefined
-          }
-        />
-      </div>
+      <WorkloadOverviewCard
+        status={status}
+        phase={state?.phase}
+        timeline={timeline}
+        problem={state?.problem}
+        problemActions={problemActions}
+        endpoint={
+          primaryAlb?.hostname
+            ? {
+                hostname: primaryAlb.hostname,
+                albHref: projectId ? albOverviewHref(projectId, primaryAlb.proxyName) : undefined,
+                albStatus: primaryAlbStatus,
+              }
+            : undefined
+        }
+        image={workload.image}
+        updatedAt={workload.updatedAt ?? workload.createdAt}
+        now={now}
+        crash={
+          crash
+            ? {
+                ...crash,
+                locationLabel: crash.instance.location
+                  ? formatLocationName(crash.instance.location, locationIndex)
+                  : "an unknown location",
+                instanceHref: instanceHref(crash.instance.name),
+                logsHref: `${instanceHref(crash.instance.name)}/logs`,
+              }
+            : undefined
+        }
+        projectId={projectId}
+        instances={instances}
+        totalCount={totalCount}
+        identityLabel={identityLabel}
+        metricKeys={metricKeys}
+        metricsDenied={identityDenied}
+        proxyId={proxyId}
+        allocation={allocation}
+      />
 
       <WorkloadInstances
+        workloadName={workload.name}
         instances={instances}
         loading={instancesLoading}
         error={instancesError}
@@ -467,80 +558,40 @@ function WorkloadOverview() {
         instanceHref={instanceHref}
         deploying={!!deploy}
         deleting={workload.deleting}
-      />
-
-      <RecentInstanceLogs
-        bare
-        logsHref={logsHref}
         projectId={projectId}
-        proxyId={proxyId}
-        albHostname={published?.hostname}
-        instanceNames={instanceNames}
-        // Without a load balancer the query waits on instance names; until
-        // they arrive it would otherwise read as "No logs".
-        waiting={instancesLoading && !proxyId}
+        metricsDenied={identityDenied}
       />
 
-      <WorkloadDetails
-        workload={workload}
-        albStatuses={albStatuses}
-        healthyCount={healthyCount}
-        totalCount={totalCount}
-        projectId={projectId}
-        published={published}
-        publishedLoading={publishedLoading}
-        locationLabel={formatLocationNames(workload.locations, locationIndex)}
-      />
-    </>
-  );
-}
-
-/**
- * The status line's action slot doesn't shrink, so the hostname needs its
- * own cap to truncate instead of pushing the detail out on narrow screens.
- */
-const ALB_HOSTNAME_STYLE = { maxWidth: 'min(20rem, 45vw)' } as const;
-
-/** The load balancer's hostname on the status line, with its state while it isn't ready. */
-function AlbHostnameLink({
-  hostname,
-  href,
-  status,
-}: {
-  hostname: string;
-  href?: string;
-  status?: AlbStatus;
-}) {
-  const display = status ? albStatusDisplay(status) : undefined;
-  const label = (
-    <>
-      <Icon icon={GlobeIcon} size={14} className="shrink-0" aria-hidden />
-      <span className="truncate font-mono text-xs">{hostname}</span>
+      <div className="grid grid-cols-1 items-start gap-6 lg:grid-cols-2">
+        <SectionFrame
+          title="What changed"
+          action={
+            <Link to={`${overviewHref}/activity`} className="text-primary text-sm hover:underline">
+              All activity
+            </Link>
+          }
+          testId="compute-plugin-workload-recent-activity">
+          <ResourceActivity
+            projectId={projectId}
+            filter={workloadActivityFilter(workload.name)}
+            liveNameMatch={workload.name}
+            resourceLinkResolver={resolver}
+            bare
+            pageSize={6}
+          />
+        </SectionFrame>
+        <WorkloadDetails
+          workload={workload}
+          instances={instances}
+          albStatuses={albStatuses}
+          projectId={projectId}
+          published={published}
+          publishedLoading={publishedLoading}
+          locationLabel={formatLocationNames(workload.locations, locationIndex)}
+        />
+      </div>
     </>
   );
-  return (
-    <span
-      className="flex min-w-0 items-center gap-2"
-      style={ALB_HOSTNAME_STYLE}
-      data-e2e="compute-workload-alb-chip">
-      {display ? (
-        <span className="text-muted-foreground hidden text-xs sm:inline" title={display.detail}>
-          {display.short}
-        </span>
-      ) : null}
-      {href ? (
-        <Link
-          to={href}
-          className="text-primary flex min-w-0 items-center gap-1.5 hover:underline"
-          title="Open load balancer"
-        >
-          {label}
-        </Link>
-      ) : (
-        <span className="flex min-w-0 items-center gap-1.5">{label}</span>
-      )}
-    </span>
-  );
 }
 
 export default function WorkloadDetail() {
diff --git a/ui/consumer/src/pages/workload-metrics.tsx b/ui/consumer/src/pages/workload-metrics.tsx
index 700bbb5d..9993fcc4 100644
--- a/ui/consumer/src/pages/workload-metrics.tsx
+++ b/ui/consumer/src/pages/workload-metrics.tsx
@@ -19,6 +19,7 @@ import {
   memoryUsageHint,
 } from '../lib/resource-usage';
 import { useInstanceFilters } from '../lib/instance-filters';
+import { useWorkloadNetworkMetrics } from '../lib/network-interface-metrics';
 import {
   albErrorRateQuery,
   albP99Query,
@@ -87,6 +88,7 @@ export default function WorkloadMetrics() {
   const coresTotal = allocatedTotal(coresByInstance, filters.matching);
   const memoryTotal = allocatedTotal(memoryByInstance, filters.matching);
   const noMatch = filters.isFiltered && filters.matching.length === 0;
+  const network = useWorkloadNetworkMetrics(projectId, filters.matching);
   const scopeHint = filters.isFiltered
     ? `${filters.matching.length} of ${instances.length} instances`
     : undefined;
@@ -215,16 +217,36 @@ export default function WorkloadMetrics() {
         />
       </div>
 
-      <MetricAreaChart
-        projectId={projectId}
-        title="Network I/O"
-        query={undefined}
-        timeRange={range.timeRange}
-        format="bytesPerSecond"
-        enabled={false}
-        unavailable
-        unavailableLabel={NETWORK_IO_UNAVAILABLE}
-      />
+      <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
+        <MetricAreaChart
+          projectId={projectId}
+          title="Network in"
+          query={network.receiveQuery}
+          timeRange={range.timeRange}
+          format="bitsPerSecond"
+          seriesLabels={network.seriesLabels}
+          pending={network.isLoading}
+          denied={network.isDenied}
+          error={network.error}
+          unavailable={noMatch || network.unavailable}
+          unavailableLabel={noMatch ? NO_MATCHING_INSTANCES : NETWORK_IO_UNAVAILABLE}
+          maxSeries={filters.instancesPicked ? undefined : MAX_INSTANCE_SERIES}
+        />
+        <MetricAreaChart
+          projectId={projectId}
+          title="Network out"
+          query={network.transmitQuery}
+          timeRange={range.timeRange}
+          format="bitsPerSecond"
+          seriesLabels={network.seriesLabels}
+          pending={network.isLoading}
+          denied={network.isDenied}
+          error={network.error}
+          unavailable={noMatch || network.unavailable}
+          unavailableLabel={noMatch ? NO_MATCHING_INSTANCES : NETWORK_IO_UNAVAILABLE}
+          maxSeries={filters.instancesPicked ? undefined : MAX_INSTANCE_SERIES}
+        />
+      </div>
 
       {proxyId ? (
         <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">

From 378f2005a3d2aeaa364199cbca412382851f0d57 Mon Sep 17 00:00:00 2001
From: Matt Jenkinson <75292329+mattdjenkinson@users.noreply.github.com>
Date: Fri, 6 Nov 2026 13:31:17 +0000
Subject: [PATCH 2/4] fix(ui): Slide the deploying bar across the card

Tailwind's animate-pulse only faded the bar in place. The host compiles no
keyframes the plugin could use, so the bar is animated with the Web
Animations API instead, and stays still under prefers-reduced-motion.
---
 .../src/components/workload-overview-card.tsx | 37 ++++++++++++++++---
 1 file changed, 31 insertions(+), 6 deletions(-)

diff --git a/ui/consumer/src/components/workload-overview-card.tsx b/ui/consumer/src/components/workload-overview-card.tsx
index a7b824e2..82863290 100644
--- a/ui/consumer/src/components/workload-overview-card.tsx
+++ b/ui/consumer/src/components/workload-overview-card.tsx
@@ -57,7 +57,7 @@ import {
   LogsIcon,
   TriangleAlertIcon,
 } from 'lucide-react';
-import { useMemo, type ReactNode } from 'react';
+import { useEffect, useMemo, useRef, type ReactNode } from 'react';
 import { Link } from 'react-router';
 
 const INFO_COLOR = 'var(--color-badge-info)';
@@ -65,8 +65,6 @@ const INFO_COLOR = 'var(--color-badge-info)';
 /** Text blocks keep this much width and push their neighbours onto the next line instead. */
 const WRAP_BASIS = { flexBasis: '18rem' } as const;
 
-// Inline: cloud-portal compiles no `h-1`.
-const BAR_STYLE = { height: 4 } as const;
 
 /** A tone's color at a low opacity, for the ring and the attention band. */
 function tint(color: string, percent: number): string {
@@ -193,12 +191,39 @@ const PHASE_RING: Record<DeployPhase, { color: string; icon?: typeof CircleCheck
 };
 
 /** While deploying: a slow pulse instead of fake progress, and what to expect. */
+/**
+ * An indeterminate bar sliding across the card. Animated with the Web
+ * Animations API because the host compiles no keyframes the plugin could use;
+ * it stays still for people who ask for reduced motion.
+ */
+function SlidingBar() {
+  const bar = useRef<HTMLSpanElement>(null);
+  useEffect(() => {
+    const el = bar.current;
+    if (!el || typeof el.animate !== 'function') return;
+    if (window.matchMedia?.('(prefers-reduced-motion: reduce)').matches) return;
+    const animation = el.animate([{ transform: 'translateX(-100%)' }, { transform: 'translateX(300%)' }], {
+      duration: 1600,
+      easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
+      iterations: Infinity,
+    });
+    return () => animation.cancel();
+  }, []);
+  return (
+    <span className="relative block overflow-hidden" style={{ height: 2, background: tint(INFO_COLOR, 12) }} aria-hidden>
+      <span
+        ref={bar}
+        className="absolute inset-y-0 left-0 w-1/3 rounded-full"
+        style={{ background: `linear-gradient(90deg, transparent, ${INFO_COLOR}, transparent)` }}
+      />
+    </span>
+  );
+}
+
 function DeployingNote() {
   return (
     <>
-      <span className="relative block overflow-hidden" style={{ ...BAR_STYLE, height: 2, background: tint(INFO_COLOR, 12) }} aria-hidden>
-        <span className="absolute inset-y-0 left-0 w-1/3 animate-pulse" style={{ background: tint(INFO_COLOR, 70) }} />
-      </span>
+      <SlidingBar />
       <p className="text-muted-foreground flex items-center gap-2 px-4 py-3 text-xs" data-testid="compute-plugin-workload-deploying">
         <Icon icon={InfoIcon} size={14} className="shrink-0" aria-hidden />
         Most deploys finish in under a minute. CPU, memory and network appear once an instance is ready.

From 161f743508fc1c2fff4ab05058fe0340e01ea617 Mon Sep 17 00:00:00 2001
From: Matt Jenkinson <75292329+mattdjenkinson@users.noreply.github.com>
Date: Fri, 6 Nov 2026 15:20:22 +0000
Subject: [PATCH 3/4] chore(ui): Bump datum-ui to 3.8.0 in both plugins

---
 ui/consumer/package.json   |   2 +-
 ui/consumer/pnpm-lock.yaml |  37 ++++++------
 ui/provider/package.json   |   2 +-
 ui/provider/pnpm-lock.yaml | 114 +++++++++++++++++++++++++++++++------
 4 files changed, 119 insertions(+), 36 deletions(-)

diff --git a/ui/consumer/package.json b/ui/consumer/package.json
index b5a53967..98a6881c 100644
--- a/ui/consumer/package.json
+++ b/ui/consumer/package.json
@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@datum-cloud/activity-ui": "0.7.1",
-    "@datum-cloud/datum-ui": "3.6.0",
+    "@datum-cloud/datum-ui": "3.8.0",
     "@tanstack/react-query": "5.102.8",
     "@tanstack/react-table": "^9.3.1",
     "@tanstack/react-virtual": "^3.14.26",
diff --git a/ui/consumer/pnpm-lock.yaml b/ui/consumer/pnpm-lock.yaml
index d600b664..583670e8 100644
--- a/ui/consumer/pnpm-lock.yaml
+++ b/ui/consumer/pnpm-lock.yaml
@@ -13,10 +13,10 @@ importers:
     dependencies:
       '@datum-cloud/activity-ui':
         specifier: 0.7.1
-        version: 0.7.1(23f2bc69542bccbc3ee5c81689a30302)
+        version: 0.7.1(4d79df9ee4747b64609303fe30ef220b)
       '@datum-cloud/datum-ui':
-        specifier: 3.6.0
-        version: 3.6.0(@monaco-editor/react@4.7.0(monaco-editor@0.52.2)(react-dom@19.3.0(react@19.3.0))(react@19.3.0))(@tanstack/react-table@9.3.1(react-dom@19.3.0(react@19.3.0))(react@19.3.0))(@tanstack/react-virtual@3.14.26(react-dom@19.3.0(react@19.3.0))(react@19.3.0))(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(ai@7.0.161(zod@4.6.7))(date-fns-tz@3.2.0(date-fns@4.4.0))(date-fns@4.4.0)(lucide-react@1.67.0(@types/react@19.3.0)(react@19.3.0))(monaco-editor@0.52.2)(motion@13.5.1(react-dom@19.3.0(react@19.3.0))(react@19.3.0))(nuqs@2.10.2(react-router@8.3.1(react-dom@19.3.0(react@19.3.0))(react@19.3.0))(react@19.3.0))(react-day-picker@10.0.2(@types/react@19.3.0)(react@19.3.0))(react-dom@19.3.0(react@19.3.0))(react@19.3.0)(recharts@3.10.1(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react-is@19.3.0)(react@19.3.0)(redux@5.0.1))(sonner@2.0.8(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0))(zod@4.6.7)
+        specifier: 3.8.0
+        version: 3.8.0(@monaco-editor/react@4.7.0(monaco-editor@0.52.2)(react-dom@19.3.0(react@19.3.0))(react@19.3.0))(@tanstack/react-table@9.3.1(react-dom@19.3.0(react@19.3.0))(react@19.3.0))(@tanstack/react-virtual@3.14.26(react-dom@19.3.0(react@19.3.0))(react@19.3.0))(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(ai@7.0.161(zod@4.6.7))(date-fns-tz@3.2.0(date-fns@4.4.0))(date-fns@4.4.0)(lucide-react@1.67.0(@types/react@19.3.0)(react@19.3.0))(monaco-editor@0.52.2)(motion@13.5.1(react-dom@19.3.0(react@19.3.0))(react@19.3.0))(nuqs@2.10.2(react-router@8.3.1(react-dom@19.3.0(react@19.3.0))(react@19.3.0))(react@19.3.0))(react-day-picker@10.0.2(@types/react@19.3.0)(react@19.3.0))(react-dom@19.3.0(react@19.3.0))(react@19.3.0)(recharts@3.10.1(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react-is@19.3.0)(react@19.3.0)(redux@5.0.1))(sonner@2.0.8(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0))(zod@4.6.7)
       '@tanstack/react-query':
         specifier: 5.102.8
         version: 5.102.8(react@19.3.0)
@@ -261,8 +261,8 @@ packages:
     peerDependencies:
       ai: '>=7 <8'
 
-  '@datum-cloud/datum-ui@3.6.0':
-    resolution: {integrity: sha512-SWA6m7k1UXsu8JZEjFGo0K32zfaoNFozYtLlrx7emNSP1TRBIOLkFVtRSewIhWKVPPMIdgI2o5zE2EuF+F0MOg==}
+  '@datum-cloud/datum-ui@3.8.0':
+    resolution: {integrity: sha512-T0IJxfBllKP7/TWO1Pbi7XCKKUYa0icaK176Okoyy1k4gR6ibOVl9QZSDrqR7LiHKGOVar7htzbetDID6K9vsQ==}
     peerDependencies:
       '@conform-to/react': '>=1.19.4 <2'
       '@conform-to/zod': '>=1.19.4 <2'
@@ -304,7 +304,7 @@ packages:
       recharts: '>=3 <4'
       sonner: '>=2.0.7 <3'
       streamdown: '>=2 <3'
-      zod: '>=4 <5'
+      zod: '>=4.6.6 <5'
     peerDependenciesMeta:
       '@conform-to/react':
         optional: true
@@ -356,8 +356,6 @@ packages:
         optional: true
       monaco-editor:
         optional: true
-      motion:
-        optional: true
       nprogress:
         optional: true
       nuqs:
@@ -1825,8 +1823,8 @@ packages:
   isexe@2.0.0:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
 
-  isomorphic-dompurify@3.22.0:
-    resolution: {integrity: sha512-cz/BkSODnQir4IV2quqbuEHhAGz4MAYGvhoemsxuwMpY/oZbRHlNjPLPyIQ0fdULiwDPUE+OHPwWb6XTEiNk1A==}
+  isomorphic-dompurify@3.23.0:
+    resolution: {integrity: sha512-RuYFgdNApoTlR3QxVUyWdS/1ATpLEWEVg3H2tMImbfr6HkYPnuW1sdEtW4PRGlFhp04VbQQjcjXnucHYpXT44A==}
     engines: {node: ^22.22.2 || ^24.15.0 || >=26.0.0}
     deprecated: Raised the minimum Node.js version (breaking) without a major bump. Use 4.x for the same code with correct semver, or pin 3.19.0 for Node < 22.22.2.
 
@@ -2152,6 +2150,9 @@ packages:
   tailwind-merge@3.6.0:
     resolution: {integrity: sha512-uxL7qAVQriqRQPAyK3pj66VqskWqoZ37PW94jwOTwNfq/z9oyu1V+eqrZqtR2+fCiXdYOZe/Modt8GtvqNzu+w==}
 
+  tailwind-merge@3.7.0:
+    resolution: {integrity: sha512-XPPUyAc+cvspz3lHTcR/QgPfW2A0lv/xQNIjX3HGhLR+Nq2lHaLq5MtTesHn8GUr3W3DguT2KT5x3NVgRtYwmA==}
+
   tiny-invariant@1.3.3:
     resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
 
@@ -2566,9 +2567,9 @@ snapshots:
 
   '@date-fns/tz@1.5.0': {}
 
-  '@datum-cloud/activity-ui@0.7.1(23f2bc69542bccbc3ee5c81689a30302)':
+  '@datum-cloud/activity-ui@0.7.1(4d79df9ee4747b64609303fe30ef220b)':
     dependencies:
-      '@datum-cloud/datum-ui': 3.6.0(@monaco-editor/react@4.7.0(monaco-editor@0.52.2)(react-dom@19.3.0(react@19.3.0))(react@19.3.0))(@tanstack/react-table@9.3.1(react-dom@19.3.0(react@19.3.0))(react@19.3.0))(@tanstack/react-virtual@3.14.26(react-dom@19.3.0(react@19.3.0))(react@19.3.0))(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(ai@7.0.161(zod@4.6.7))(date-fns-tz@3.2.0(date-fns@4.4.0))(date-fns@4.4.0)(lucide-react@1.67.0(@types/react@19.3.0)(react@19.3.0))(monaco-editor@0.52.2)(motion@13.5.1(react-dom@19.3.0(react@19.3.0))(react@19.3.0))(nuqs@2.10.2(react-router@8.3.1(react-dom@19.3.0(react@19.3.0))(react@19.3.0))(react@19.3.0))(react-day-picker@10.0.2(@types/react@19.3.0)(react@19.3.0))(react-dom@19.3.0(react@19.3.0))(react@19.3.0)(recharts@3.10.1(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react-is@19.3.0)(react@19.3.0)(redux@5.0.1))(sonner@2.0.8(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0))(zod@4.6.7)
+      '@datum-cloud/datum-ui': 3.8.0(@monaco-editor/react@4.7.0(monaco-editor@0.52.2)(react-dom@19.3.0(react@19.3.0))(react@19.3.0))(@tanstack/react-table@9.3.1(react-dom@19.3.0(react@19.3.0))(react@19.3.0))(@tanstack/react-virtual@3.14.26(react-dom@19.3.0(react@19.3.0))(react@19.3.0))(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(ai@7.0.161(zod@4.6.7))(date-fns-tz@3.2.0(date-fns@4.4.0))(date-fns@4.4.0)(lucide-react@1.67.0(@types/react@19.3.0)(react@19.3.0))(monaco-editor@0.52.2)(motion@13.5.1(react-dom@19.3.0(react@19.3.0))(react@19.3.0))(nuqs@2.10.2(react-router@8.3.1(react-dom@19.3.0(react@19.3.0))(react@19.3.0))(react@19.3.0))(react-day-picker@10.0.2(@types/react@19.3.0)(react@19.3.0))(react-dom@19.3.0(react@19.3.0))(react@19.3.0)(recharts@3.10.1(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react-is@19.3.0)(react@19.3.0)(redux@5.0.1))(sonner@2.0.8(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0))(zod@4.6.7)
       '@monaco-editor/react': 4.7.0(monaco-editor@0.52.2)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
       '@radix-ui/react-tooltip': 1.2.16(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
       class-variance-authority: 0.7.1
@@ -2584,7 +2585,7 @@ snapshots:
     dependencies:
       ai: 7.0.161(zod@4.6.7)
 
-  '@datum-cloud/datum-ui@3.6.0(@monaco-editor/react@4.7.0(monaco-editor@0.52.2)(react-dom@19.3.0(react@19.3.0))(react@19.3.0))(@tanstack/react-table@9.3.1(react-dom@19.3.0(react@19.3.0))(react@19.3.0))(@tanstack/react-virtual@3.14.26(react-dom@19.3.0(react@19.3.0))(react@19.3.0))(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(ai@7.0.161(zod@4.6.7))(date-fns-tz@3.2.0(date-fns@4.4.0))(date-fns@4.4.0)(lucide-react@1.67.0(@types/react@19.3.0)(react@19.3.0))(monaco-editor@0.52.2)(motion@13.5.1(react-dom@19.3.0(react@19.3.0))(react@19.3.0))(nuqs@2.10.2(react-router@8.3.1(react-dom@19.3.0(react@19.3.0))(react@19.3.0))(react@19.3.0))(react-day-picker@10.0.2(@types/react@19.3.0)(react@19.3.0))(react-dom@19.3.0(react@19.3.0))(react@19.3.0)(recharts@3.10.1(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react-is@19.3.0)(react@19.3.0)(redux@5.0.1))(sonner@2.0.8(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0))(zod@4.6.7)':
+  '@datum-cloud/datum-ui@3.8.0(@monaco-editor/react@4.7.0(monaco-editor@0.52.2)(react-dom@19.3.0(react@19.3.0))(react@19.3.0))(@tanstack/react-table@9.3.1(react-dom@19.3.0(react@19.3.0))(react@19.3.0))(@tanstack/react-virtual@3.14.26(react-dom@19.3.0(react@19.3.0))(react@19.3.0))(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(ai@7.0.161(zod@4.6.7))(date-fns-tz@3.2.0(date-fns@4.4.0))(date-fns@4.4.0)(lucide-react@1.67.0(@types/react@19.3.0)(react@19.3.0))(monaco-editor@0.52.2)(motion@13.5.1(react-dom@19.3.0(react@19.3.0))(react@19.3.0))(nuqs@2.10.2(react-router@8.3.1(react-dom@19.3.0(react@19.3.0))(react@19.3.0))(react@19.3.0))(react-day-picker@10.0.2(@types/react@19.3.0)(react@19.3.0))(react-dom@19.3.0(react@19.3.0))(react@19.3.0)(recharts@3.10.1(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react-is@19.3.0)(react@19.3.0)(redux@5.0.1))(sonner@2.0.8(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0))(zod@4.6.7)':
     dependencies:
       '@datum-cloud/datum-ui-assistant-core': 0.1.0(ai@7.0.161(zod@4.6.7))
       '@radix-ui/react-avatar': 1.2.6(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
@@ -2606,11 +2607,12 @@ snapshots:
       class-variance-authority: 0.7.1
       clsx: 2.1.1
       cmdk: 1.1.1(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      isomorphic-dompurify: 3.22.0
+      isomorphic-dompurify: 3.23.0
       lucide-react: 1.67.0(@types/react@19.3.0)(react@19.3.0)
+      motion: 13.5.1(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
       react: 19.3.0
       react-dom: 19.3.0(react@19.3.0)
-      tailwind-merge: 3.6.0
+      tailwind-merge: 3.7.0
       tw-animate-css: 1.4.0
     optionalDependencies:
       '@monaco-editor/react': 4.7.0(monaco-editor@0.52.2)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
@@ -2620,7 +2622,6 @@ snapshots:
       date-fns: 4.4.0
       date-fns-tz: 3.2.0(date-fns@4.4.0)
       monaco-editor: 0.52.2
-      motion: 13.5.1(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
       nuqs: 2.10.2(react-router@8.3.1(react-dom@19.3.0(react@19.3.0))(react@19.3.0))(react@19.3.0)
       react-day-picker: 10.0.2(@types/react@19.3.0)(react@19.3.0)
       recharts: 3.10.1(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react-is@19.3.0)(react@19.3.0)(redux@5.0.1)
@@ -3896,7 +3897,7 @@ snapshots:
 
   isexe@2.0.0: {}
 
-  isomorphic-dompurify@3.22.0:
+  isomorphic-dompurify@3.23.0:
     dependencies:
       dompurify: 3.4.17
       jsdom: 30.0.1
@@ -4196,6 +4197,8 @@ snapshots:
 
   tailwind-merge@3.6.0: {}
 
+  tailwind-merge@3.7.0: {}
+
   tiny-invariant@1.3.3: {}
 
   tinybench@6.2.2: {}
diff --git a/ui/provider/package.json b/ui/provider/package.json
index 069fcd0b..29867d54 100644
--- a/ui/provider/package.json
+++ b/ui/provider/package.json
@@ -12,7 +12,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@datum-cloud/datum-ui": "^3.5.0",
+    "@datum-cloud/datum-ui": "^3.8.0",
     "@monaco-editor/react": "^4.7.0",
     "@tanstack/react-query": "5.101.4",
     "@tanstack/react-table": "^9.0.0",
diff --git a/ui/provider/pnpm-lock.yaml b/ui/provider/pnpm-lock.yaml
index 30f1629a..1ec46946 100644
--- a/ui/provider/pnpm-lock.yaml
+++ b/ui/provider/pnpm-lock.yaml
@@ -13,8 +13,8 @@ importers:
   .:
     dependencies:
       '@datum-cloud/datum-ui':
-        specifier: ^3.5.0
-        version: 3.5.0(@monaco-editor/react@4.7.0(monaco-editor@0.55.1)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(@tanstack/react-table@9.2.3(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(@tanstack/react-virtual@3.14.10(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(date-fns-tz@3.2.0(date-fns@4.4.0))(date-fns@4.4.0)(js-yaml@5.4.2)(lucide-react@1.31.0(react@19.2.8))(monaco-editor@0.55.1)(motion@13.4.6(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(nuqs@2.10.1(react-router@7.18.2(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(react@19.2.8))(react-day-picker@10.0.1(@types/react@19.2.18)(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(recharts@3.10.1(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react-is@19.3.0)(react@19.2.8)(redux@5.0.1))(sonner@2.0.8(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(zod@4.6.7)
+        specifier: ^3.8.0
+        version: 3.8.0(@monaco-editor/react@4.7.0(monaco-editor@0.55.1)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(@tanstack/react-table@9.2.3(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(@tanstack/react-virtual@3.14.10(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(ai@7.0.163(zod@4.6.7))(date-fns-tz@3.2.0(date-fns@4.4.0))(date-fns@4.4.0)(js-yaml@5.4.2)(lucide-react@1.31.0(react@19.2.8))(monaco-editor@0.55.1)(motion@13.4.6(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(nuqs@2.10.1(react-router@7.18.2(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(react@19.2.8))(react-day-picker@10.0.1(@types/react@19.2.18)(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(recharts@3.10.1(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react-is@19.3.0)(react@19.2.8)(redux@5.0.1))(sonner@2.0.8(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(zod@4.6.7)
       '@monaco-editor/react':
         specifier: ^4.7.0
         version: 4.7.0(monaco-editor@0.55.1)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
@@ -94,6 +94,22 @@ importers:
 
 packages:
 
+  '@ai-sdk/gateway@4.0.136':
+    resolution: {integrity: sha512-P851NL80P85Ee6MhblRuuCzNlQdOYU5rKmdt/Wuo5dMtkzvIHhyVZY9wtfKG3wBJUUoxHxWKsI2aR6O75o8diA==}
+    engines: {node: '>=22'}
+    peerDependencies:
+      zod: ^3.25.76 || ^4.1.8
+
+  '@ai-sdk/provider-utils@5.0.75':
+    resolution: {integrity: sha512-k4yAsFliGZwoTpyTpm3ptxwIeaPvRh5vGh/UWoqDiLLXKoyz4zuBGS7p3ygf8to5Bh4fAOHynotLBsWLIYdu2A==}
+    engines: {node: '>=22'}
+    peerDependencies:
+      zod: ^3.25.76 || ^4.1.8
+
+  '@ai-sdk/provider@4.0.36':
+    resolution: {integrity: sha512-GqvWZSZdBelCGughlBdOoupT258rgM3YMbaLAS9WSZJ0vlt8c9vm3My+ZT31mYhiReMCMCF2qF2axnGbILpk1A==}
+    engines: {node: '>=22'}
+
   '@asamuzakjp/css-color@6.0.7':
     resolution: {integrity: sha512-vC/bk1Lz7Tn/EfU9/apOTBk80/8dyGyWMowPoV1tJ52muDGsDqt2HPT2klrFUiY60MQmQv9q8yIht15JnBgDGw==}
     engines: {node: ^22.13.0 || >=24.0.0}
@@ -228,8 +244,13 @@ packages:
   '@date-fns/tz@1.5.0':
     resolution: {integrity: sha512-lwYN/vDPeNRULcepoE/LO2Pgx+7/RV+S9ARfbc9lr2DtGkOD7pAiruHvbR1RX3Qyf6ja47EWJDMsNK5vK08DJg==}
 
-  '@datum-cloud/datum-ui@3.5.0':
-    resolution: {integrity: sha512-ShGLKZrfWJdsNHGiUrLmFDl0ZhsP2Z7LKQPzcD6uPxBRqM7hNUYNq/cKri7KWFIosfB6Z8GzenZKWOX8QQ+/WQ==}
+  '@datum-cloud/datum-ui-assistant-core@0.1.0':
+    resolution: {integrity: sha512-k/d17fVwYDt/DswVuWOCWo6hsAUJ/Y1hLeambRb3PckUqXnU+RdXJpYi62gNqHLpUZdU7rmmsVOohxyhFoxX0w==}
+    peerDependencies:
+      ai: '>=7 <8'
+
+  '@datum-cloud/datum-ui@3.8.0':
+    resolution: {integrity: sha512-T0IJxfBllKP7/TWO1Pbi7XCKKUYa0icaK176Okoyy1k4gR6ibOVl9QZSDrqR7LiHKGOVar7htzbetDID6K9vsQ==}
     peerDependencies:
       '@conform-to/react': '>=1.19.4 <2'
       '@conform-to/zod': '>=1.19.4 <2'
@@ -271,7 +292,7 @@ packages:
       recharts: '>=3 <4'
       sonner: '>=2.0.7 <3'
       streamdown: '>=2 <3'
-      zod: '>=4 <5'
+      zod: '>=4.6.6 <5'
     peerDependenciesMeta:
       '@conform-to/react':
         optional: true
@@ -323,8 +344,6 @@ packages:
         optional: true
       monaco-editor:
         optional: true
-      motion:
-        optional: true
       nprogress:
         optional: true
       nuqs:
@@ -1429,16 +1448,29 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@vercel/oidc@3.2.0':
+    resolution: {integrity: sha512-UycprH3T6n3jH0k44NHMa7pnFHGu/N05MjojYr+Mc6I7obkoLIJujSWwin1pCvdy/eOxrI/l3uDLQsmcrOb4ug==}
+    engines: {node: '>= 20'}
+
   '@vitejs/plugin-react@5.2.0':
     resolution: {integrity: sha512-YmKkfhOAi3wsB1PhJq5Scj3GXMn3WvtQ/JC0xoopuHoXSdmtdStOpFrYaT1kie2YgFBcIe64ROzMYRjCrYOdYw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     peerDependencies:
       vite: ^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
 
+  '@workflow/serde@4.1.0':
+    resolution: {integrity: sha512-pav4F2BoirECWR7Nf1TKt+2eETcBj7jj4cBefQ8VXQCA6NPkaKeLfj/zMgi+3zYV5ZIBT4GuUiphsj0/b9hPQQ==}
+
   adm-zip@0.6.1:
     resolution: {integrity: sha512-Xwrja8nx9e5o2N1my4DsKCeKpdrnACyr1wtbPxBDgGzKzKyE9kRtBFA8mWldI+RVlD7CBZNWY/wQ2+ydwOR6kQ==}
     engines: {node: '>=14.0'}
 
+  ai@7.0.163:
+    resolution: {integrity: sha512-nm8+qn36NQXO4Hjfj7SlbcNRhUyNXKtdoS9xhXr/z92lvdGFuPkzHmA2tFzhaUQy13IitNYrcw2QSNpEJC/iSA==}
+    engines: {node: '>=22'}
+    peerDependencies:
+      zod: ^3.25.76 || ^4.1.8
+
   argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
 
@@ -1588,6 +1620,10 @@ packages:
   eventemitter3@5.0.4:
     resolution: {integrity: sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==}
 
+  eventsource-parser@3.1.1:
+    resolution: {integrity: sha512-EKN1vKAMcZ8MlYMpaNuxN6R9yakzH6uajHcHVTqWJzvu5pWw9DyhbP35HH8MVBQ+dZjAfDxk+A8NiR9KWaXiyQ==}
+    engines: {node: '>=18.0.0'}
+
   fdir@6.5.0:
     resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
     engines: {node: '>=12.0.0'}
@@ -1635,8 +1671,8 @@ packages:
   is-potential-custom-element-name@1.0.1:
     resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
 
-  isomorphic-dompurify@3.22.0:
-    resolution: {integrity: sha512-cz/BkSODnQir4IV2quqbuEHhAGz4MAYGvhoemsxuwMpY/oZbRHlNjPLPyIQ0fdULiwDPUE+OHPwWb6XTEiNk1A==}
+  isomorphic-dompurify@3.23.0:
+    resolution: {integrity: sha512-RuYFgdNApoTlR3QxVUyWdS/1ATpLEWEVg3H2tMImbfr6HkYPnuW1sdEtW4PRGlFhp04VbQQjcjXnucHYpXT44A==}
     engines: {node: ^22.22.2 || ^24.15.0 || >=26.0.0}
     deprecated: Raised the minimum Node.js version (breaking) without a major bump. Use 4.x for the same code with correct semver, or pin 3.19.0 for Node < 22.22.2.
 
@@ -1666,6 +1702,9 @@ packages:
     engines: {node: '>=6'}
     hasBin: true
 
+  json-schema@0.4.0:
+    resolution: {integrity: sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==}
+
   json5@2.2.3:
     resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
     engines: {node: '>=6'}
@@ -1902,8 +1941,8 @@ packages:
   symbol-tree@3.2.4:
     resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
 
-  tailwind-merge@3.6.0:
-    resolution: {integrity: sha512-uxL7qAVQriqRQPAyK3pj66VqskWqoZ37PW94jwOTwNfq/z9oyu1V+eqrZqtR2+fCiXdYOZe/Modt8GtvqNzu+w==}
+  tailwind-merge@3.7.0:
+    resolution: {integrity: sha512-XPPUyAc+cvspz3lHTcR/QgPfW2A0lv/xQNIjX3HGhLR+Nq2lHaLq5MtTesHn8GUr3W3DguT2KT5x3NVgRtYwmA==}
 
   tiny-invariant@1.3.3:
     resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
@@ -2067,6 +2106,26 @@ packages:
 
 snapshots:
 
+  '@ai-sdk/gateway@4.0.136(zod@4.6.7)':
+    dependencies:
+      '@ai-sdk/provider': 4.0.36
+      '@ai-sdk/provider-utils': 5.0.75(zod@4.6.7)
+      '@vercel/oidc': 3.2.0
+      zod: 4.6.7
+
+  '@ai-sdk/provider-utils@5.0.75(zod@4.6.7)':
+    dependencies:
+      '@ai-sdk/provider': 4.0.36
+      '@standard-schema/spec': 1.1.0
+      '@workflow/serde': 4.1.0
+      eventsource-parser: 3.1.1
+      undici: 7.30.1
+      zod: 4.6.7
+
+  '@ai-sdk/provider@4.0.36':
+    dependencies:
+      json-schema: 0.4.0
+
   '@asamuzakjp/css-color@6.0.7':
     dependencies:
       '@csstools/css-calc': 3.3.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
@@ -2224,8 +2283,13 @@ snapshots:
 
   '@date-fns/tz@1.5.0': {}
 
-  '@datum-cloud/datum-ui@3.5.0(@monaco-editor/react@4.7.0(monaco-editor@0.55.1)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(@tanstack/react-table@9.2.3(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(@tanstack/react-virtual@3.14.10(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(date-fns-tz@3.2.0(date-fns@4.4.0))(date-fns@4.4.0)(js-yaml@5.4.2)(lucide-react@1.31.0(react@19.2.8))(monaco-editor@0.55.1)(motion@13.4.6(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(nuqs@2.10.1(react-router@7.18.2(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(react@19.2.8))(react-day-picker@10.0.1(@types/react@19.2.18)(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(recharts@3.10.1(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react-is@19.3.0)(react@19.2.8)(redux@5.0.1))(sonner@2.0.8(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(zod@4.6.7)':
+  '@datum-cloud/datum-ui-assistant-core@0.1.0(ai@7.0.163(zod@4.6.7))':
+    dependencies:
+      ai: 7.0.163(zod@4.6.7)
+
+  '@datum-cloud/datum-ui@3.8.0(@monaco-editor/react@4.7.0(monaco-editor@0.55.1)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(@tanstack/react-table@9.2.3(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(@tanstack/react-virtual@3.14.10(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(ai@7.0.163(zod@4.6.7))(date-fns-tz@3.2.0(date-fns@4.4.0))(date-fns@4.4.0)(js-yaml@5.4.2)(lucide-react@1.31.0(react@19.2.8))(monaco-editor@0.55.1)(motion@13.4.6(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(nuqs@2.10.1(react-router@7.18.2(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(react@19.2.8))(react-day-picker@10.0.1(@types/react@19.2.18)(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(recharts@3.10.1(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react-is@19.3.0)(react@19.2.8)(redux@5.0.1))(sonner@2.0.8(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(zod@4.6.7)':
     dependencies:
+      '@datum-cloud/datum-ui-assistant-core': 0.1.0(ai@7.0.163(zod@4.6.7))
       '@radix-ui/react-avatar': 1.2.6(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@radix-ui/react-checkbox': 1.3.11(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@radix-ui/react-collapsible': 1.1.20(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
@@ -2245,21 +2309,22 @@ snapshots:
       class-variance-authority: 0.7.1
       clsx: 2.1.1
       cmdk: 1.1.1(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      isomorphic-dompurify: 3.22.0
+      isomorphic-dompurify: 3.23.0
       lucide-react: 1.31.0(react@19.2.8)
+      motion: 13.4.6(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
-      tailwind-merge: 3.6.0
+      tailwind-merge: 3.7.0
       tw-animate-css: 1.4.0
     optionalDependencies:
       '@monaco-editor/react': 4.7.0(monaco-editor@0.55.1)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@tanstack/react-table': 9.2.3(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@tanstack/react-virtual': 3.14.10(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      ai: 7.0.163(zod@4.6.7)
       date-fns: 4.4.0
       date-fns-tz: 3.2.0(date-fns@4.4.0)
       js-yaml: 5.4.2
       monaco-editor: 0.55.1
-      motion: 13.4.6(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       nuqs: 2.10.1(react-router@7.18.2(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(react@19.2.8)
       react-day-picker: 10.0.1(@types/react@19.2.18)(react@19.2.8)
       recharts: 3.10.1(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react-is@19.3.0)(react@19.2.8)(redux@5.0.1)
@@ -3182,6 +3247,8 @@ snapshots:
   '@typescript/typescript-win32-x64@7.0.2':
     optional: true
 
+  '@vercel/oidc@3.2.0': {}
+
   '@vitejs/plugin-react@5.2.0(vite@7.3.7)':
     dependencies:
       '@babel/core': 7.29.7
@@ -3194,8 +3261,17 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@workflow/serde@4.1.0': {}
+
   adm-zip@0.6.1: {}
 
+  ai@7.0.163(zod@4.6.7):
+    dependencies:
+      '@ai-sdk/gateway': 4.0.136(zod@4.6.7)
+      '@ai-sdk/provider': 4.0.36
+      '@ai-sdk/provider-utils': 5.0.75(zod@4.6.7)
+      zod: 4.6.7
+
   argparse@2.0.1: {}
 
   aria-hidden@1.2.6:
@@ -3351,6 +3427,8 @@ snapshots:
 
   eventemitter3@5.0.4: {}
 
+  eventsource-parser@3.1.1: {}
+
   fdir@6.5.0(picomatch@4.0.5):
     optionalDependencies:
       picomatch: 4.0.5
@@ -3383,7 +3461,7 @@ snapshots:
 
   is-potential-custom-element-name@1.0.1: {}
 
-  isomorphic-dompurify@3.22.0:
+  isomorphic-dompurify@3.23.0:
     dependencies:
       dompurify: 3.4.17
       jsdom: 30.0.1
@@ -3429,6 +3507,8 @@ snapshots:
 
   jsesc@3.1.0: {}
 
+  json-schema@0.4.0: {}
+
   json5@2.2.3: {}
 
   lru-cache@11.5.2: {}
@@ -3641,7 +3721,7 @@ snapshots:
 
   symbol-tree@3.2.4: {}
 
-  tailwind-merge@3.6.0: {}
+  tailwind-merge@3.7.0: {}
 
   tiny-invariant@1.3.3: {}
 

From ace44fba3e166377dc9d5da6119d417c4e8a5963 Mon Sep 17 00:00:00 2001
From: Matt Jenkinson <75292329+mattdjenkinson@users.noreply.github.com>
Date: Fri, 6 Nov 2026 16:52:13 +0000
Subject: [PATCH 4/4] feat(ui): Show a workload's load balancers, and load the
 Overview in place
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A Load balancers card on the workload Overview lists each load balancer
whose rules send traffic to the workload: its state, hostname and the
routes that reach it ("/ → :8080 (http)", with the workload's share when
a rule splits traffic). Route reading comes from Kevin's
feat/workload-overview-polish branch. With no load balancer, "Add to a
load balancer" makes the workload's NetworkService if it has none (the
same object `datumctl compute url` makes) and opens the portal's create
dialog with the workload chosen.

A hostname belongs to its load balancer, so the page no longer presents
one as the workload's URL: the URL and Visit button by the title, the
endpoint line on the overview card and the Load balancer row in
Configuration are gone.

Loading states now match what they stand in for. The stats strip holds
each value, hint and sparkline with a bone until its data is in, instead
of showing zero or a flat line. The Instances and Load balancers cards
load as their tables, headers included, and the page and workloads-list
skeletons use the live tables' markup.

Co-authored-by: Kevin Williams <kwilliams@datum.net>
---
 ui/consumer/src/adapter.ts                    |  10 +
 ui/consumer/src/components/skeletons.tsx      | 208 +++++++++++---
 .../src/components/workload-instances.tsx     |   6 +-
 .../components/workload-load-balancers.tsx    | 260 ++++++++++++++++++
 .../src/components/workload-overview-card.tsx | 141 +++++-----
 .../src/components/workload-page-chrome.tsx   | 132 ++-------
 ui/consumer/src/lib/alb-status.test.ts        |   1 +
 ui/consumer/src/lib/api.test.ts               | 112 ++++++++
 ui/consumer/src/lib/api.ts                    | 156 ++++++++++-
 .../src/lib/workload-presenters.test.ts       |  35 +++
 ui/consumer/src/lib/workload-presenters.ts    |  20 ++
 ui/consumer/src/pages/workload-detail.tsx     | 159 ++---------
 ui/consumer/src/schema.ts                     |   2 +
 13 files changed, 862 insertions(+), 380 deletions(-)
 create mode 100644 ui/consumer/src/components/workload-load-balancers.tsx

diff --git a/ui/consumer/src/adapter.ts b/ui/consumer/src/adapter.ts
index a3198639..48153b0e 100644
--- a/ui/consumer/src/adapter.ts
+++ b/ui/consumer/src/adapter.ts
@@ -192,6 +192,15 @@ function deriveReplicasPerRegion(placements: RawWorkloadPlacement[]): number | u
   return mins.every((m) => m === first) ? first : undefined;
 }
 
+function deriveNamedPorts(runtime?: RawRuntime): Workload['namedPorts'] {
+  const containers = runtime?.sandbox?.containers ?? [];
+  return containers.flatMap((c) =>
+    (c.ports ?? []).flatMap((p) =>
+      p.name && p.port !== undefined ? [{ name: p.name, port: p.port, protocol: p.protocol ?? 'TCP' }] : []
+    )
+  );
+}
+
 function derivePorts(runtime?: RawRuntime): string[] {
   const containers = runtime?.sandbox?.containers ?? [];
   return containers.flatMap((c) =>
@@ -349,6 +358,7 @@ export function toWorkload(raw: RawWorkload): Workload {
     runtimeType: runtime ? (runtime.sandbox ? 'Container sandbox' : 'Virtual machine') : undefined,
     tags: deriveTags(runtime),
     ports,
+    namedPorts: deriveNamedPorts(runtime),
     locations: workloadLocations(placements, raw.status?.placements ?? []),
     resources: deriveResources(runtime),
     replicasPerRegion: deriveReplicasPerRegion(placements),
diff --git a/ui/consumer/src/components/skeletons.tsx b/ui/consumer/src/components/skeletons.tsx
index 18609bcb..65541c09 100644
--- a/ui/consumer/src/components/skeletons.tsx
+++ b/ui/consumer/src/components/skeletons.tsx
@@ -8,6 +8,10 @@
 import { Card, CardContent, CardHeader } from '@datum-cloud/datum-ui/card';
 import { STRIP_GAP } from './stat-strip';
 import { Skeleton } from '@datum-cloud/datum-ui/skeleton';
+import { cn } from '@datum-cloud/datum-ui/utils';
+import { Icon } from '@datum-cloud/datum-ui/icons';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@datum-cloud/datum-ui/table';
+import { ChevronDown, ChevronUp } from 'lucide-react';
 import type { CSSProperties } from 'react';
 
 const PANEL_STYLE = { height: '27rem' } as const;
@@ -16,15 +20,16 @@ const CHART_STYLE = { height: 224 } as const;
 const TOPOLOGY_STYLE = { height: '28rem' } as const;
 
 /**
- * The list table's columns before usage data arrives. CPU and Memory only
- * appear once a row has data, so the skeleton leaves them out.
+ * The list table's columns before usage data arrives, each with a bone the
+ * width of what it usually holds. CPU and Memory only appear once a row has
+ * data, so the skeleton leaves them out.
  */
-const TABLE_COLUMNS = ['Name', 'Status', 'Network', 'Locations'] as const;
-
-/** Same thin line the live table draws (`TABLE_STYLES` in workload-table). */
-const ROW_LINE_STYLE = {
-  borderBottom: '1px solid color-mix(in oklab, var(--border) 60%, transparent)',
-} as const;
+const TABLE_COLUMNS = [
+  { title: 'Name', bones: ['h-4 w-32'] },
+  { title: 'Status', bones: ['size-2 rounded-full', 'h-4 w-20'] },
+  { title: 'Network', bones: ['h-4 w-16'] },
+  { title: 'Locations', bones: ['size-1.5 rounded-full', 'h-4 w-40'] },
+] as const;
 
 function Bone({ className, style }: { className?: string; style?: CSSProperties }) {
   return <Skeleton className={className} style={style} />;
@@ -147,10 +152,21 @@ export function WorkloadListCardsSkeleton() {
   );
 }
 
+/** The sort chevrons `SortableHeader` draws, at rest. */
+function SortChevrons() {
+  return (
+    <div className="flex flex-col" aria-hidden>
+      <Icon icon={ChevronUp} size={10} className="text-foreground -mb-0.5 stroke-2 opacity-25" />
+      <Icon icon={ChevronDown} size={10} className="text-foreground -mt-0.5 stroke-2 opacity-25" />
+    </div>
+  );
+}
+
 /**
- * Open table like the live one: plain muted header, `h-10` rows, thin lines.
- * `summary={false}` is the in-page fallback, where the strip and toolbar are
- * already on screen.
+ * The live table's shell (`WorkloadTable`: datum-ui's DataTable markup in a
+ * rounded, bordered panel, with sortable headers) and placeholder rows in it, so the
+ * swap to real rows doesn't move anything. `summary={false}` is the in-page
+ * fallback, where the strip and toolbar are already on screen.
  */
 export function WorkloadListTableSkeleton({ summary = true }: { summary?: boolean }) {
   return (
@@ -161,39 +177,130 @@ export function WorkloadListTableSkeleton({ summary = true }: { summary?: boolea
           <ToolbarSkeleton />
         </>
       ) : null}
-      <div>
-        <div className="flex h-10 items-center gap-4 px-2" style={ROW_LINE_STYLE}>
-          {TABLE_COLUMNS.map((column) => (
-            <span key={column} className="text-muted-foreground min-w-0 flex-1 truncate text-xs font-medium">
-              {column}
-            </span>
-          ))}
+      <div className="overflow-hidden rounded-lg border">
+        {/* DataTable's class and slots: the host styles its tables by these. */}
+        <div className="datum-ui-data-table" data-slot="dt" style={{ overflowX: 'auto' }}>
+          <Table data-slot="dt-table">
+            <TableHeader data-slot="dt-header">
+              <TableRow data-slot="dt-header-row">
+                {TABLE_COLUMNS.map((column) => (
+                  <TableHead key={column.title} data-slot="dt-header-cell">
+                    <div className="flex h-full items-center justify-between gap-1">
+                      <span>{column.title}</span>
+                      <SortChevrons />
+                    </div>
+                  </TableHead>
+                ))}
+              </TableRow>
+            </TableHeader>
+            <TableBody data-slot="dt-body">
+              {Array.from({ length: 6 }).map((_, row) => (
+                <TableRow key={row} data-slot="dt-row">
+                  {TABLE_COLUMNS.map((column) => (
+                    <TableCell key={column.title} data-slot="dt-cell">
+                      <span className="flex h-5 items-center gap-2">
+                        {column.bones.map((bone) => (
+                          <Bone key={bone} className={bone} />
+                        ))}
+                      </span>
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
         </div>
-        {Array.from({ length: 6 }).map((_, row) => (
-          <div key={row} className="flex h-10 items-center gap-4 px-2" style={ROW_LINE_STYLE}>
-            {TABLE_COLUMNS.map((column) => (
-              <Bone key={column} className="h-4 min-w-0 flex-1" />
-            ))}
-          </div>
-        ))}
       </div>
     </div>
   );
 }
 
-/** Placeholder instance rows, the same `h-10` as `WorkloadInstances` rows. */
-export function InstanceRowsSkeleton({ rows = 2 }: { rows?: number }) {
+// Column heads as the Instances and Load balancers cards set them.
+const CARD_HEAD = 'text-muted-foreground text-3xs h-9 font-semibold uppercase';
+
+interface CardColumn {
+  title: string;
+  /** Bone classes, side by side in the cell. */
+  bones: readonly string[];
+  /** Hidden below `md`, as the live column is. */
+  wide?: boolean;
+}
+
+/** The Instances card's columns, before network data adds its sparkline column. */
+const INSTANCE_COLUMNS: readonly CardColumn[] = [
+  { title: 'Instance', bones: ['h-4 w-48'] },
+  { title: 'Location', bones: ['h-4 w-20'], wide: true },
+  { title: 'State', bones: ['h-4 w-14 rounded-sm'] },
+  { title: 'Address', bones: ['h-4 w-32'], wide: true },
+  { title: '', bones: ['size-6 rounded-md', 'size-6 rounded-md', 'size-6 rounded-md'] },
+];
+
+const LOAD_BALANCER_COLUMNS: readonly CardColumn[] = [
+  { title: 'Load balancer', bones: ['h-4 w-28'] },
+  { title: 'State', bones: ['h-4 w-14 rounded-sm'] },
+  { title: 'Hostname', bones: ['h-4 w-56'], wide: true },
+  { title: 'Routes', bones: ['h-4 w-32'] },
+  { title: '', bones: ['size-6 rounded-md'] },
+];
+
+/**
+ * A card's table while its rows load: the live table's header and cell
+ * padding, with bones where the values go, so the rows land without a jump.
+ */
+function CardTableSkeleton({ columns, rows }: { columns: readonly CardColumn[]; rows: number }) {
+  const edge = (index: number) =>
+    index === 0 ? 'pl-(--card-px)' : index === columns.length - 1 ? 'pr-(--card-px)' : undefined;
   return (
-    <div className="flex flex-col" aria-hidden>
-      {Array.from({ length: rows }).map((_, index) => (
-        <div key={index} className="flex h-10 items-center gap-4 px-2">
-          <Bone className="size-2 shrink-0 rounded-full" />
-          <Bone className="h-3 w-40" />
-          <Bone className="h-3 w-24" />
-          <Bone className="h-3 flex-1" />
-        </div>
-      ))}
-    </div>
+    <Table aria-hidden>
+      <TableHeader className="bg-muted/40">
+        <TableRow className="hover:bg-transparent">
+          {columns.map((column, index) => (
+            <TableHead
+              key={index}
+              className={cn(CARD_HEAD, edge(index), column.wide && 'hidden md:table-cell')}>
+              {column.title}
+            </TableHead>
+          ))}
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {Array.from({ length: rows }, (_, row) => (
+          <TableRow key={row} className="hover:bg-transparent">
+            {columns.map((column, index) => (
+              <TableCell key={index} className={cn(edge(index), column.wide && 'hidden md:table-cell')}>
+                <span className={cn('flex h-6 items-center gap-1', index === columns.length - 1 && 'justify-end')}>
+                  {column.bones.map((bone, i) => (
+                    <Bone key={i} className={bone} />
+                  ))}
+                </span>
+              </TableCell>
+            ))}
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+}
+
+/** The Instances card's table while instances load. */
+export function InstanceTableSkeleton({ rows = 2 }: { rows?: number }) {
+  return <CardTableSkeleton columns={INSTANCE_COLUMNS} rows={rows} />;
+}
+
+/** The Load balancers card's table while the lookup runs. */
+export function LoadBalancerTableSkeleton() {
+  return <CardTableSkeleton columns={LOAD_BALANCER_COLUMNS} rows={1} />;
+}
+
+/** A sectioned card's bordered header: icon and title. */
+function CardHeaderBone() {
+  return (
+    <CardHeader size="sm" bordered>
+      <span className="flex items-center gap-2">
+        <Bone className="size-4 rounded" />
+        <Bone className="h-4 w-28" />
+      </span>
+    </CardHeader>
   );
 }
 
@@ -222,19 +329,30 @@ export function WorkloadOverviewSkeleton() {
             <Bone className="h-3 w-64" />
           </div>
         </div>
-        <div className="grid grid-cols-2 gap-4 border-t px-4 py-4 sm:flex">
+        {/* The stats strip's cells (`StatCell` while loading): label and hint, value, sparkline. */}
+        <div className="bg-border grid grid-cols-2 gap-px border-t sm:flex">
           {Array.from({ length: 4 }, (_, index) => (
-            <div key={index} className="flex flex-1 flex-col gap-2">
-              <Bone className="h-3 w-16" />
-              <Bone className="h-5 w-12" />
-              <Bone className="h-6 w-full" />
+            <div key={index} className="bg-card flex min-w-0 flex-1 flex-col gap-1.5 px-4 py-3">
+              <span className="flex h-4 items-center justify-between gap-2">
+                <Bone className="h-3 w-14" />
+                <Bone className="h-3 w-16" />
+              </span>
+              <span className="flex h-7 items-center">
+                <Bone className="h-5 w-14" />
+              </span>
+              <Bone className="h-8 w-full" />
             </div>
           ))}
         </div>
       </Card>
-      <Panel>
-        <InstanceRowsSkeleton />
-      </Panel>
+      <Card sectioned size="sm" className="overflow-hidden">
+        <CardHeaderBone />
+        <InstanceTableSkeleton />
+      </Card>
+      <Card sectioned size="sm" className="overflow-hidden">
+        <CardHeaderBone />
+        <LoadBalancerTableSkeleton />
+      </Card>
       <div className="grid grid-cols-1 items-start gap-6 lg:grid-cols-2">
         <div className="flex flex-col gap-2">
           <SectionHeaderBone action />
diff --git a/ui/consumer/src/components/workload-instances.tsx b/ui/consumer/src/components/workload-instances.tsx
index 27c860b4..bca0ce69 100644
--- a/ui/consumer/src/components/workload-instances.tsx
+++ b/ui/consumer/src/components/workload-instances.tsx
@@ -21,7 +21,7 @@ import type { Instance } from '../schema';
 import { StatusBadge } from './detail-list';
 import { MetricSparkline } from './metric-sparkline';
 import { useOverviewRange } from './overview-range';
-import { InstanceRowsSkeleton } from './skeletons';
+import { InstanceTableSkeleton } from './skeletons';
 import { QuietNotice } from './surface';
 import { LinkButton } from '@datum-cloud/datum-ui/button';
 import { Badge } from '@datum-cloud/datum-ui/badge';
@@ -215,9 +215,7 @@ export function WorkloadInstances({
         </CardTitle>
       </CardHeader>
       {state.kind === 'loading' ? (
-        <div className="px-2 py-2">
-          <InstanceRowsSkeleton />
-        </div>
+        <InstanceTableSkeleton />
       ) : state.kind === 'notice' ? (
         <div className="px-4 py-4">
           <QuietNotice testId="compute-plugin-instances-empty" title={state.title} description={state.description} />
diff --git a/ui/consumer/src/components/workload-load-balancers.tsx b/ui/consumer/src/components/workload-load-balancers.tsx
new file mode 100644
index 00000000..6912715f
--- /dev/null
+++ b/ui/consumer/src/components/workload-load-balancers.tsx
@@ -0,0 +1,260 @@
+/**
+ * The workload Overview's Load balancers card: one row per load balancer
+ * whose rules send traffic to this workload, with its state, hostname and
+ * the routes that reach the workload. Same card and table styling as the
+ * Instances card.
+ */
+import { ensureWorkloadService, type AlbRoute, type ConnectedAlb, type PublishedUrl } from '../lib/api';
+import type { Workload } from '../schema';
+import type { AlbStatus } from '../lib/alb-status';
+import { albOverviewHref } from '../lib/use-workload-overview-state';
+import { albRowState, routePortText, type StatusTone } from '../lib/workload-presenters';
+import { StatusBadge } from './detail-list';
+import { LoadBalancerTableSkeleton } from './skeletons';
+import { QuietNotice } from './surface';
+import { Badge } from '@datum-cloud/datum-ui/badge';
+import { Button, LinkButton } from '@datum-cloud/datum-ui/button';
+import { Card, CardHeader, CardTitle } from '@datum-cloud/datum-ui/card';
+import { Icon } from '@datum-cloud/datum-ui/icons';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@datum-cloud/datum-ui/table';
+import { Tooltip } from '@datum-cloud/datum-ui/tooltip';
+import { cn } from '@datum-cloud/datum-ui/utils';
+import { ArrowUpRightIcon, NetworkIcon, PlusIcon, SquareArrowOutUpRightIcon } from 'lucide-react';
+import { useState } from 'react';
+import { Link, useNavigate } from 'react-router';
+
+// Column headers as the ALB Backends card (and our Instances card) sets them.
+const HEAD = 'text-muted-foreground text-3xs h-9 font-semibold uppercase';
+// Inline: the host compiles no arbitrary font size.
+const PILL_STYLE = { fontSize: '11px' } as const;
+
+const BADGE_TYPE: Record<StatusTone, 'success' | 'warning' | 'danger' | 'info'> = {
+  ok: 'success',
+  warn: 'warning',
+  error: 'danger',
+  muted: 'info',
+};
+
+/** The badge's one word; the full state goes in its tooltip. */
+function badgeLabel(status: AlbStatus | undefined): string {
+  if (!status || status.phase === 'ready') return 'Ready';
+  return status.phase === 'error' ? 'Error' : 'Provisioning';
+}
+
+/** "[50% of] /api → :8080 (http) · shared with 1 other backend" */
+function RouteLine({ route }: { route: AlbRoute }) {
+  const port = routePortText(route.port);
+  return (
+    <span className="text-muted-foreground flex min-w-0 flex-wrap items-center gap-x-1.5 gap-y-0.5 text-xs">
+      {route.percent !== undefined ? (
+        <>
+          <span className="bg-muted text-foreground rounded-full px-1.5 font-semibold" style={PILL_STYLE}>
+            {route.percent}%
+          </span>
+          of
+        </>
+      ) : null}
+      <span
+        className="text-foreground font-mono"
+        title={route.narrowed ? 'Also matches on headers, query or method' : undefined}>
+        {route.paths.join(', ')}
+        {route.narrowed ? '*' : null}
+      </span>
+      →
+      {port ? <span className="text-foreground font-mono">{port}</span> : <span>this workload</span>}
+      {route.sharedWith > 0 ? (
+        <span>
+          · shared with {route.sharedWith} other {route.sharedWith === 1 ? 'backend' : 'backends'}
+        </span>
+      ) : null}
+    </span>
+  );
+}
+
+function AlbRow({ alb, status, projectId }: { alb: ConnectedAlb; status?: AlbStatus; projectId?: string }) {
+  const state = albRowState(status);
+  const label = badgeLabel(status);
+  const href = projectId ? albOverviewHref(projectId, alb.proxyName) : undefined;
+  const name = alb.displayName || alb.proxyName;
+  const badge = <StatusBadge type={BADGE_TYPE[state.tone]}>{label}</StatusBadge>;
+  return (
+    <TableRow data-testid="compute-plugin-workload-alb-row">
+      <TableCell className="pl-(--card-px)">
+        {href ? (
+          <Link to={href} className="block truncate text-sm font-medium hover:underline" title={alb.proxyName}>
+            {name}
+          </Link>
+        ) : (
+          <span className="block truncate text-sm font-medium">{name}</span>
+        )}
+      </TableCell>
+      <TableCell>
+        {state.label !== label ? (
+          <Tooltip message={state.label}>
+            <span tabIndex={0} className="inline-flex cursor-help" aria-label={`${label}: ${state.label}`}>
+              {badge}
+            </span>
+          </Tooltip>
+        ) : (
+          badge
+        )}
+      </TableCell>
+      <TableCell className="hidden md:table-cell">
+        {alb.hostname ? (
+          <span className="flex min-w-0 items-center gap-1.5">
+            <a
+              href={`https://${alb.hostname}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex min-w-0 items-center gap-1.5 font-mono text-xs hover:underline">
+              <span className="truncate">{alb.hostname}</span>
+              <Icon icon={SquareArrowOutUpRightIcon} size={12} className="text-muted-foreground shrink-0" aria-hidden />
+            </a>
+            {alb.customHostnames.length > 0 ? (
+              <Tooltip message={alb.customHostnames.join(', ')}>
+                <span tabIndex={0} className="text-muted-foreground shrink-0 cursor-help text-xs">
+                  +{alb.customHostnames.length} more
+                </span>
+              </Tooltip>
+            ) : null}
+          </span>
+        ) : (
+          <span className="text-muted-foreground text-xs">No hostname yet</span>
+        )}
+      </TableCell>
+      <TableCell>
+        <span className="flex flex-col gap-1">
+          {alb.routes.length > 0 ? (
+            alb.routes.map((route, index) => <RouteLine key={index} route={route} />)
+          ) : (
+            // Labelled to the workload, with no service backend to read routes from.
+            <span className="text-muted-foreground text-xs">All traffic</span>
+          )}
+        </span>
+      </TableCell>
+      <TableCell className="pr-(--card-px)">
+        {href ? (
+          <span className="flex justify-end">
+            <Tooltip message="Open load balancer">
+              <span className="inline-flex">
+                <LinkButton
+                  as={Link}
+                  href={href}
+                  type="quaternary"
+                  theme="borderless"
+                  size="xs"
+                  aria-label={`Open load balancer ${name}`}
+                  icon={<Icon icon={ArrowUpRightIcon} size={14} aria-hidden />}
+                />
+              </span>
+            </Tooltip>
+          </span>
+        ) : null}
+      </TableCell>
+    </TableRow>
+  );
+}
+
+/**
+ * Opens the portal's new load balancer dialog with this workload chosen. The
+ * dialog can only choose a workload with a NetworkService, so one is made
+ * first when it has none; if that fails the dialog still opens and says why.
+ */
+function AddToLoadBalancer({ projectId, workload }: { projectId: string; workload: Workload }) {
+  const navigate = useNavigate();
+  const [busy, setBusy] = useState(false);
+  const open = async () => {
+    setBusy(true);
+    try {
+      await ensureWorkloadService(projectId, workload);
+    } catch {
+      // The dialog explains a workload it can't choose.
+    }
+    void navigate(`/project/${projectId}/alb?action=create&workload=${encodeURIComponent(workload.name)}`);
+  };
+  return (
+    <Button
+      type="quaternary"
+      theme="outline"
+      size="xs"
+      loading={busy}
+      onClick={() => void open()}
+      icon={<Icon icon={PlusIcon} size={12} aria-hidden />}>
+      Add to a load balancer
+    </Button>
+  );
+}
+
+export function WorkloadLoadBalancers({
+  projectId,
+  published,
+  loading,
+  albStatuses,
+  network,
+  workload,
+}: {
+  projectId?: string;
+  /** Chosen in the portal's create dialog. */
+  workload: Workload;
+  published?: PublishedUrl | null;
+  /** The load balancer lookup hasn't answered yet. */
+  loading: boolean;
+  albStatuses: Record<string, AlbStatus>;
+  /** The workload's network, for saying where it is reachable without one. */
+  network?: string;
+}) {
+  const albs = published?.proxies ?? [];
+  return (
+    <Card sectioned size="sm" className="overflow-hidden" data-testid="compute-plugin-workload-load-balancers">
+      <CardHeader size="sm" bordered>
+        <CardTitle className="flex items-center gap-2 text-sm">
+          <Icon icon={NetworkIcon} size={16} className="text-secondary" aria-hidden />
+          Load balancers
+          {!loading && albs.length > 0 ? (
+            <Badge type="muted" theme="solid" className="text-3xs h-5 rounded-md px-1.5 tabular-nums">
+              {albs.length}
+            </Badge>
+          ) : null}
+        </CardTitle>
+      </CardHeader>
+      {loading ? (
+        <LoadBalancerTableSkeleton />
+      ) : albs.length === 0 ? (
+        <div className="px-2 py-2">
+          <QuietNotice
+            testId="compute-plugin-workload-load-balancers-empty"
+            title={
+              network
+                ? `No load balancer sends traffic to this workload. It's reachable only on ${network}.`
+                : 'No load balancer sends traffic to this workload.'
+            }
+            action={
+              projectId ? (
+                <AddToLoadBalancer projectId={projectId} workload={workload} />
+              ) : undefined
+            }
+          />
+        </div>
+      ) : (
+        <Table>
+          <TableHeader className="bg-muted/40">
+            <TableRow className="hover:bg-transparent">
+              <TableHead className={cn(HEAD, 'pl-(--card-px)')}>Load balancer</TableHead>
+              <TableHead className={HEAD}>State</TableHead>
+              <TableHead className={cn(HEAD, 'hidden md:table-cell')}>Hostname</TableHead>
+              <TableHead className={HEAD}>Routes</TableHead>
+              <TableHead className="pr-(--card-px)">
+                <span className="sr-only">Actions</span>
+              </TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {albs.map((alb) => (
+              <AlbRow key={alb.proxyName} alb={alb} status={albStatuses[alb.proxyName]} projectId={projectId} />
+            ))}
+          </TableBody>
+        </Table>
+      )}
+    </Card>
+  );
+}
diff --git a/ui/consumer/src/components/workload-overview-card.tsx b/ui/consumer/src/components/workload-overview-card.tsx
index 82863290..a4810ff3 100644
--- a/ui/consumer/src/components/workload-overview-card.tsx
+++ b/ui/consumer/src/components/workload-overview-card.tsx
@@ -1,7 +1,7 @@
 /**
  * The workload Overview's summary card, in the shape of the ALB overview's
- * health strip: a tinted status ring, a headline and detail, the public
- * endpoint, and when the workload last changed. Below that, either a crash
+ * health strip: a tinted status ring, a headline and detail, and when the
+ * workload last changed. Hostnames live in the Load balancers card. Below that, either a crash
  * band (only while an instance is crashing), the deploy steps (while the
  * workload first comes up), or the last hour's stats.
  *
@@ -10,7 +10,6 @@
  */
 import { MetricSparkline } from './metric-sparkline';
 import { useOverviewRange } from './overview-range';
-import { albStatusDisplay, type AlbStatus } from '../lib/alb-status';
 import { formatKpiValue } from './metric-area-chart';
 import {
   albRpsQuery,
@@ -41,19 +40,14 @@ import {
 } from '../lib/workload-presenters';
 import type { Instance } from '../schema';
 import { Card } from '@datum-cloud/datum-ui/card';
-import { useCopyToClipboard } from '@datum-cloud/datum-ui/hooks';
+import { Skeleton } from '@datum-cloud/datum-ui/skeleton';
 import { Icon, SpinnerIcon } from '@datum-cloud/datum-ui/icons';
-import { Tooltip } from '@datum-cloud/datum-ui/tooltip';
-import { cn } from '@datum-cloud/datum-ui/utils';
 import {
-  CheckIcon,
   CircleCheckIcon,
   HourglassIcon,
   InfoIcon,
   CircleIcon,
   CircleXIcon,
-  CopyIcon,
-  GlobeIcon,
   LogsIcon,
   TriangleAlertIcon,
 } from 'lucide-react';
@@ -91,57 +85,6 @@ function StatusRing({ tone, phase }: { tone: StatusTone; phase?: DeployPhase })
   );
 }
 
-export interface OverviewEndpoint {
-  hostname: string;
-  /** The load balancer's page in the portal. */
-  albHref?: string;
-  albStatus?: AlbStatus;
-}
-
-function Endpoint({ endpoint }: { endpoint: OverviewEndpoint }) {
-  const [copied, copy] = useCopyToClipboard();
-  const display = endpoint.albStatus ? albStatusDisplay(endpoint.albStatus) : undefined;
-  const ready = !display;
-  return (
-    <span className="flex min-w-0 items-center gap-2 pt-1" data-e2e="compute-workload-alb-chip">
-      <Icon
-        icon={GlobeIcon}
-        size={14}
-        className={cn('shrink-0', ready ? 'text-primary' : 'text-muted-foreground')}
-        aria-hidden
-      />
-      <a
-        href={`https://${endpoint.hostname}`}
-        target="_blank"
-        rel="noreferrer"
-        className={cn(
-          'min-w-0 truncate font-mono text-xs hover:underline',
-          ready ? 'text-primary' : 'text-muted-foreground'
-        )}>
-        https://{endpoint.hostname}
-      </a>
-      <Tooltip message={copied ? 'Copied' : 'Copy URL'}>
-        <button
-          type="button"
-          className="text-muted-foreground hover:text-foreground inline-flex shrink-0 cursor-pointer"
-          aria-label={copied ? 'Copied' : 'Copy URL'}
-          onClick={() => void copy(`https://${endpoint.hostname}`, { withToast: true })}>
-          <Icon icon={copied ? CheckIcon : CopyIcon} size={13} aria-hidden />
-        </button>
-      </Tooltip>
-      {display ? (
-        <span className="text-muted-foreground truncate text-xs" title={display.detail}>
-          · {display.short === 'Error' ? 'load balancer error' : 'not serving yet'}
-        </span>
-      ) : endpoint.albHref ? (
-        <Link to={endpoint.albHref} className="text-muted-foreground hidden shrink-0 text-xs hover:underline sm:inline-flex">
-          · load balancer
-        </Link>
-      ) : null}
-    </span>
-  );
-}
-
 /** The instance that is crashing, and what its runtime last reported. */
 export interface OverviewCrash {
   instance: Instance;
@@ -363,25 +306,44 @@ function addSeries(
   return [...sums.values()].sort((x, y) => x.timestamp - y.timestamp);
 }
 
+/**
+ * One stat: label and hint, the value, then its sparkline (or instance
+ * squares). `loading` holds each line's place with a bone the same height, so
+ * nothing reads as zero before the numbers arrive and nothing moves when they do.
+ */
 function StatCell({
   label,
   hint,
   value,
+  loading = false,
   children,
 }: {
   label: string;
   hint?: string;
   value: ReactNode;
+  loading?: boolean;
   children?: ReactNode;
 }) {
   return (
-    <div className="bg-card flex min-w-0 flex-1 flex-col gap-1.5 px-4 py-3">
+    <div className="bg-card flex min-w-0 flex-1 flex-col gap-1.5 px-4 py-3" aria-busy={loading || undefined}>
       <span className="flex items-baseline justify-between gap-2">
         <span className="text-muted-foreground text-xs">{label}</span>
-        {hint ? <span className="text-muted-foreground truncate text-xs opacity-80">{hint}</span> : null}
+        {loading && hint ? (
+          <span className="flex h-4 items-center">
+            <Skeleton className="h-3 w-16" />
+          </span>
+        ) : hint ? (
+          <span className="text-muted-foreground truncate text-xs opacity-80">{hint}</span>
+        ) : null}
       </span>
-      <span className="text-lg font-semibold tabular-nums">{value}</span>
-      {children}
+      {loading ? (
+        <span className="flex h-7 items-center">
+          <Skeleton className="h-5 w-14" />
+        </span>
+      ) : (
+        <span className="text-lg font-semibold tabular-nums">{value}</span>
+      )}
+      {loading ? <Skeleton className="h-8 w-full" /> : children}
     </div>
   );
 }
@@ -395,6 +357,9 @@ function Stats({
   proxyId,
   allocation,
   totalCount,
+  instancesLoading,
+  identityLoading,
+  publishedLoading,
 }: {
   projectId?: string;
   instances: readonly Instance[];
@@ -404,6 +369,9 @@ function Stats({
   proxyId?: string;
   allocation: Allocation;
   totalCount: number;
+  instancesLoading: boolean;
+  identityLoading: boolean;
+  publishedLoading: boolean;
 }) {
   const range = useOverviewRange('1h');
   const enabled = !!projectId && !!identityLabel && metricKeys.length > 0 && !metricsDenied;
@@ -439,7 +407,16 @@ function Stats({
   const rxNow = lastValue(rxPoints);
   const txNow = lastValue(txPoints);
   const ioPoints = useMemo(() => addSeries(rxPoints, txPoints), [rxPoints, txPoints]);
-  const showNetwork = !!network.receiveTotalQuery || network.isLoading;
+  // Each stat's queries wait on the instances and the metrics label, so it is
+  // loading until those are in and its own query has answered.
+  const metricsPending = !metricsDenied && (instancesLoading || identityLoading);
+  const cpuLoading = !cpuPoints && (metricsPending || cpu.isLoading);
+  const memoryLoading = !memoryPoints && (metricsPending || memory.isLoading);
+  const networkLoading =
+    !metricsDenied && !rxPoints && !txPoints && (instancesLoading || network.isLoading || rx.isLoading || tx.isLoading);
+  const rpsLoading = !metricsDenied && !rpsPoints && (publishedLoading || rps.isLoading);
+  const showNetwork = !!network.receiveTotalQuery || networkLoading;
+  const showRequests = !!proxyId || (publishedLoading && !metricsDenied);
 
   const readiness = useMemo(() => instances.map((instance) => instanceReadiness(instance)), [instances]);
   const ready = readiness.filter((r) => r.tone === 'ok').length;
@@ -467,7 +444,8 @@ function Stats({
       <StatCell
         label="Instances"
         hint={notReady > 0 ? `${notReady} not ready` : undefined}
-        value={`${ready} / ${totalCount}`}>
+        value={`${ready} / ${totalCount}`}
+        loading={instancesLoading && instances.length === 0}>
         <span className="flex h-8 items-center gap-1.5" aria-hidden>
           {readiness.slice(0, 24).map((r, index) => (
             <span
@@ -478,13 +456,18 @@ function Stats({
           ))}
         </span>
       </StatCell>
-      <StatCell label="CPU" hint={cpuUsageHint(cpuNow, allocation.cores)} value={formatCpuUsage(cpuNow, allocation.cores)}>
+      <StatCell
+        label="CPU"
+        hint={cpuUsageHint(cpuNow, allocation.cores)}
+        value={formatCpuUsage(cpuNow, allocation.cores)}
+        loading={cpuLoading}>
         {spark(cpuPoints, cpu.isLoading, undefined, 'cores', allocation.cores)}
       </StatCell>
       <StatCell
         label="Memory"
         hint={memoryUsageHint(memoryNow, allocation.memoryBytes)}
-        value={formatMemoryUsage(memoryNow, allocation.memoryBytes)}>
+        value={formatMemoryUsage(memoryNow, allocation.memoryBytes)}
+        loading={memoryLoading}>
         {spark(memoryPoints, memory.isLoading, 'var(--color-chart-1)', 'bytes', allocation.memoryBytes)}
       </StatCell>
       {showNetwork ? (
@@ -495,12 +478,17 @@ function Stats({
               ? `${formatKpiValue(rxNow, 'bitsPerSecond')} in · ${formatKpiValue(txNow, 'bitsPerSecond')} out`
               : 'in + out'
           }
-          value={formatKpiValue(rxNow === undefined && txNow === undefined ? undefined : (rxNow ?? 0) + (txNow ?? 0), 'bitsPerSecond')}>
+          value={formatKpiValue(rxNow === undefined && txNow === undefined ? undefined : (rxNow ?? 0) + (txNow ?? 0), 'bitsPerSecond')}
+          loading={networkLoading}>
           {spark(ioPoints, rx.isLoading || tx.isLoading || network.isLoading, 'var(--color-chart-3)', 'bitsPerSecond', undefined, true)}
         </StatCell>
       ) : null}
-      {proxyId ? (
-        <StatCell label="Requests" hint="per second" value={formatKpiValue(rpsNow, 'requestsPerSecond')}>
+      {showRequests ? (
+        <StatCell
+          label="Requests"
+          hint="per second"
+          value={formatKpiValue(rpsNow, 'requestsPerSecond')}
+          loading={rpsLoading}>
           {spark(rpsPoints, rps.isLoading, INFO_COLOR, 'requestsPerSecond', undefined, true)}
         </StatCell>
       ) : null}
@@ -517,7 +505,6 @@ export interface WorkloadOverviewCardProps {
   /** Stalled and failed: what is wrong. */
   problem?: InstanceProblem;
   problemActions?: OverviewAction[];
-  endpoint?: OverviewEndpoint;
   image?: string;
   updatedAt: Date;
   now: number;
@@ -530,10 +517,14 @@ export interface WorkloadOverviewCardProps {
   metricsDenied: boolean;
   proxyId?: string;
   allocation: Allocation;
+  /** Still loading: the stats hold their places rather than read as zero. */
+  instancesLoading: boolean;
+  identityLoading: boolean;
+  publishedLoading: boolean;
 }
 
 export function WorkloadOverviewCard(props: WorkloadOverviewCardProps) {
-  const { status, phase, endpoint, image, updatedAt, now, crash } = props;
+  const { status, phase, image, updatedAt, now, crash } = props;
   const attention = status.tone === 'warn' || status.tone === 'error';
   const short = imageShortName(image);
   return (
@@ -551,7 +542,6 @@ export function WorkloadOverviewCard(props: WorkloadOverviewCardProps) {
             <span className="text-muted-foreground text-sm" title={status.detail}>
               {status.detail}
             </span>
-            {endpoint ? <Endpoint endpoint={endpoint} /> : null}
           </div>
         </div>
         <div className="flex shrink-0 flex-col gap-0.5">
@@ -582,6 +572,9 @@ export function WorkloadOverviewCard(props: WorkloadOverviewCardProps) {
           proxyId={props.proxyId}
           allocation={props.allocation}
           totalCount={props.totalCount}
+          instancesLoading={props.instancesLoading}
+          identityLoading={props.identityLoading}
+          publishedLoading={props.publishedLoading}
         />
       )}
     </Card>
diff --git a/ui/consumer/src/components/workload-page-chrome.tsx b/ui/consumer/src/components/workload-page-chrome.tsx
index 167b2772..ceed8a25 100644
--- a/ui/consumer/src/components/workload-page-chrome.tsx
+++ b/ui/consumer/src/components/workload-page-chrome.tsx
@@ -2,11 +2,11 @@
  * Shared workload layout chrome: breadcrumbs, title, and tab bar.
  * Used by the splat layout at `:workloadName/*`.
  *
- * The workload's public URL sits beside its name, so where to reach it is
- * visible from every tab rather than buried in the overview.
+ * No URL sits by the name: a hostname belongs to a load balancer, and the
+ * Overview's Load balancers card lists each one that reaches the workload.
  */
 import { PluginTabs, type PluginTab } from './plugin-tabs';
-import { Button, LinkButton } from '@datum-cloud/datum-ui/button';
+import { Button } from '@datum-cloud/datum-ui/button';
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -16,10 +16,8 @@ import {
   BreadcrumbSeparator,
 } from '@datum-cloud/datum-ui/breadcrumb';
 import { PageTitle } from '@datum-cloud/datum-ui/page-title';
-import { Skeleton } from '@datum-cloud/datum-ui/skeleton';
-import { Tooltip } from '@datum-cloud/datum-ui/tooltip';
 import { Icon } from '@datum-cloud/datum-ui/icons';
-import { HomeIcon, SquareArrowOutUpRightIcon, Trash2Icon } from 'lucide-react';
+import { HomeIcon, Trash2Icon } from 'lucide-react';
 import { Link } from 'react-router';
 
 export function workloadDetailTabs(
@@ -36,62 +34,6 @@ export function workloadDetailTabs(
   ];
 }
 
-const VISIT_ICON = <Icon icon={SquareArrowOutUpRightIcon} size={12} />;
-
-/**
- * The page's "go to my app" action, alongside the URL by the name. A real link
- * once the workload serves; disabled, with the reason on hover, while it comes
- * up; and holding its place while that's still being worked out.
- */
-function VisitButton({
-  visit,
-  loading,
-}: {
-  visit?: { href: string; live: boolean; status?: string };
-  loading: boolean;
-}) {
-  if (visit?.live) {
-    return (
-      <LinkButton
-        href={visit.href}
-        target="_blank"
-        rel="noopener noreferrer"
-        type="secondary"
-        theme="solid"
-        size="xs"
-        icon={VISIT_ICON}
-        iconPosition="right"
-        data-e2e="workload-visit">
-        Visit
-      </LinkButton>
-    );
-  }
-  if (!visit && !loading) return null;
-  const button = (
-    <Button
-      type="secondary"
-      theme="solid"
-      size="xs"
-      icon={VISIT_ICON}
-      iconPosition="right"
-      disabled
-      aria-busy={loading || undefined}
-      data-e2e="workload-visit">
-      Visit
-    </Button>
-  );
-  // A disabled button gets no pointer events, so the tooltip hangs off a wrapper.
-  return visit?.status ? (
-    <Tooltip message={visit.status}>
-      <span tabIndex={0} className="inline-flex">
-        {button}
-      </span>
-    </Tooltip>
-  ) : (
-    button
-  );
-}
-
 export function WorkloadPageChrome({
   projectHref,
   workloadsHref,
@@ -99,9 +41,6 @@ export function WorkloadPageChrome({
   metricsHref,
   logsHref,
   titleName,
-  url,
-  urlLoading = false,
-  visit,
   onDelete,
   deleteLoading = false,
   children,
@@ -112,15 +51,6 @@ export function WorkloadPageChrome({
   metricsHref: string;
   logsHref: string;
   titleName: string;
-  /** The workload's public URL (`WorkloadUrl`), when a load balancer publishes it. */
-  url?: React.ReactNode;
-  /**
-   * Still finding out whether there is a URL: hold its place (and the Visit
-   * button's) so nothing jumps.
-   */
-  urlLoading?: boolean;
-  /** Opens the workload's URL. `live` is false until it's serving; `status` says why. */
-  visit?: { href: string; live: boolean; status?: string };
   /** Omitted when the user can't delete this workload — the button is hidden. */
   onDelete?: () => void;
   /**
@@ -161,47 +91,21 @@ export function WorkloadPageChrome({
         // Stacked on a phone that just indents them; `gap-3` above already
         // spaces the two side by side. (`px-0` because `pl-0` isn't compiled.)
         actionsClassName="px-0"
-        description={
-          url || urlLoading ? (
-            // On a phone the URL always takes its own line under the name, so its
-            // loading placeholder sits exactly where it will land. From `sm` up
-            // they share a line, with a separator.
-            <span className="flex flex-col items-start gap-x-2 gap-y-1 sm:flex-row sm:flex-wrap sm:items-center">
-              <span style={{ overflowWrap: 'anywhere' }}>{titleName}</span>
-              <span aria-hidden className="text-muted-foreground hidden sm:inline">
-                ·
-              </span>
-              {url ?? (
-                <Skeleton
-                  aria-hidden
-                  data-testid="compute-plugin-workload-url-loading"
-                  style={{ display: 'inline-block', width: '18em', maxWidth: '100%', height: '1em' }}
-                />
-              )}
-            </span>
-          ) : (
-            titleName
-          )
-        }
-        descriptionClassName={url || urlLoading ? undefined : 'break-all'}
+        description={titleName}
+        descriptionClassName="break-all"
         actions={
-          visit || urlLoading || onDelete || deleteLoading ? (
-            <div className="flex items-center gap-2">
-              <VisitButton visit={visit} loading={urlLoading} />
-              {onDelete || deleteLoading ? (
-                <Button
-                  type="danger"
-                  theme="outline"
-                  size="xs"
-                  icon={<Icon icon={Trash2Icon} size={12} />}
-                  onClick={onDelete}
-                  disabled={!onDelete}
-                  aria-busy={deleteLoading || undefined}
-                  data-e2e="workload-delete">
-                  Delete
-                </Button>
-              ) : null}
-            </div>
+          onDelete || deleteLoading ? (
+            <Button
+              type="danger"
+              theme="outline"
+              size="xs"
+              icon={<Icon icon={Trash2Icon} size={12} />}
+              onClick={onDelete}
+              disabled={!onDelete}
+              aria-busy={deleteLoading || undefined}
+              data-e2e="workload-delete">
+              Delete
+            </Button>
           ) : undefined
         }
       />
diff --git a/ui/consumer/src/lib/alb-status.test.ts b/ui/consumer/src/lib/alb-status.test.ts
index 1ef63106..75983bdf 100644
--- a/ui/consumer/src/lib/alb-status.test.ts
+++ b/ui/consumer/src/lib/alb-status.test.ts
@@ -27,6 +27,7 @@ function alb(conditions: ResourceCondition[], services = [serviceReady]): Connec
     createdAt: new Date(T0),
     conditions,
     services,
+    routes: [],
   };
 }
 
diff --git a/ui/consumer/src/lib/api.test.ts b/ui/consumer/src/lib/api.test.ts
index 560de266..ccc818f7 100644
--- a/ui/consumer/src/lib/api.test.ts
+++ b/ui/consumer/src/lib/api.test.ts
@@ -1,6 +1,7 @@
 import { afterEach, beforeEach, describe, expect, test } from 'vitest';
 import { focusManager, MutationObserver, QueryClient, QueryObserver } from '@tanstack/react-query';
 import {
+  albRoutes,
   computeEntitlementQueryOptions,
   createDemoWorkloadMutationOptions,
   deleteWorkloadMutationOptions,
@@ -8,7 +9,12 @@ import {
   workloadsQueryOptions,
   type ComputeEntitlement,
   type DeleteWorkloadInput,
+  type RawHttpProxy,
+  type RawNetworkService,
+  servicePortName,
+  workloadServicePayload,
 } from './api';
+import type { Workload } from '../schema';
 
 const PROJECT_ID = 'p-1';
 const ENTITLEMENT_KEY = [PLUGIN_ID, 'compute-entitlement', PROJECT_ID];
@@ -184,3 +190,109 @@ describe('host caches after writes', () => {
     expect(domainsInvalidated()).toBe(true);
   });
 });
+
+describe('albRoutes', () => {
+  const service: RawNetworkService = {
+    metadata: { name: 'web' },
+    spec: { ports: [{ name: 'http', port: 8080, protocol: 'TCP' }] },
+  };
+  const proxy = (rules: NonNullable<RawHttpProxy['spec']>['rules']): RawHttpProxy => ({
+    metadata: { name: 'web-alb' },
+    spec: { rules },
+  });
+  const toWorkload = { networkService: { name: 'web', port: 'http' } };
+
+  test('a rule with no matches routes / to the named port', () => {
+    expect(albRoutes(proxy([{ backends: [toWorkload] }]), [service])).toEqual([
+      { paths: ['/'], narrowed: false, port: { name: 'http', number: 8080, appProtocol: undefined }, percent: undefined, sharedWith: 0 },
+    ]);
+  });
+
+  test('keeps only the rules that send traffic to this workload', () => {
+    const routes = albRoutes(
+      proxy([
+        { matches: [{ path: { type: 'PathPrefix', value: '/api' } }], backends: [toWorkload] },
+        { matches: [{ path: { type: 'PathPrefix', value: '/other' } }], backends: [{ endpoint: 'https://example.com' }] },
+      ]),
+      [service]
+    );
+    expect(routes.map((r) => r.paths)).toEqual([['/api']]);
+  });
+
+  test("a split rule gives this workload's share and how many backends share it", () => {
+    const [route] = albRoutes(
+      proxy([{ backends: [{ ...toWorkload, weight: 1 }, { endpoint: 'https://a.example', weight: 3 }] }]),
+      [service]
+    );
+    expect(route.percent).toBe(25);
+    expect(route.sharedWith).toBe(1);
+  });
+
+  test('unset weights count as 1', () => {
+    const [route] = albRoutes(proxy([{ backends: [toWorkload, { endpoint: 'https://a.example' }] }]), [service]);
+    expect(route.percent).toBe(50);
+  });
+
+  test('marks rules narrowed by headers, query or method, and regular expressions', () => {
+    const [route] = albRoutes(
+      proxy([
+        {
+          matches: [{ path: { type: 'RegularExpression', value: '/v[0-9]+' }, method: 'GET' }],
+          backends: [toWorkload],
+        },
+      ]),
+      [service]
+    );
+    expect(route.paths).toEqual(['~ /v[0-9]+']);
+    expect(route.narrowed).toBe(true);
+  });
+
+  test('a port the service does not declare keeps its name without a number', () => {
+    const [route] = albRoutes(
+      proxy([{ backends: [{ networkService: { name: 'web', port: 'grpc' } }] }]),
+      [service]
+    );
+    expect(route.port).toEqual({ name: 'grpc', number: undefined, appProtocol: undefined });
+  });
+
+  test('a proxy with no backend on this workload has no routes', () => {
+    expect(albRoutes(proxy([{ backends: [{ endpoint: 'https://a.example' }] }]), [service])).toEqual([]);
+    expect(albRoutes(proxy(undefined), [])).toEqual([]);
+  });
+});
+
+describe('workloadServicePayload', () => {
+  const workload = (namedPorts: Workload['namedPorts']) =>
+    ({ name: 'cpu-mem-wave', uid: 'uid-1', namedPorts }) as unknown as Workload;
+
+  test("matches the CLI's service: named for the workload, labelled, selecting its instances", () => {
+    const payload = workloadServicePayload(workload([{ name: 'http', port: 3000, protocol: 'TCP' }]));
+    expect(payload?.metadata).toMatchObject({
+      name: 'cpu-mem-wave',
+      labels: {
+        'compute.datumapis.com/workload-name': 'cpu-mem-wave',
+        'compute.datumapis.com/workload-uid': 'uid-1',
+      },
+    });
+    expect(payload?.spec).toEqual({
+      networkInterfaces: { selector: { matchLabels: { 'compute.datumapis.com/workload-name': 'cpu-mem-wave' } } },
+      ports: [{ name: 'http', port: 3000, protocol: 'TCP' }],
+    });
+  });
+
+  test('cleans port names into DNS labels and skips UDP and duplicates', () => {
+    const payload = workloadServicePayload(
+      workload([
+        { name: 'Web_UI', port: 8080, protocol: 'TCP' },
+        { name: 'web-ui', port: 8081, protocol: 'TCP' },
+        { name: 'dns', port: 53, protocol: 'UDP' },
+      ])
+    );
+    expect(payload?.spec.ports).toEqual([{ name: 'web-ui', port: 8080, protocol: 'TCP' }]);
+  });
+
+  test('is undefined with no named TCP port', () => {
+    expect(workloadServicePayload(workload([]))).toBeUndefined();
+    expect(servicePortName('--')).toBeUndefined();
+  });
+});
diff --git a/ui/consumer/src/lib/api.ts b/ui/consumer/src/lib/api.ts
index 2eaf4618..a013b3bb 100644
--- a/ui/consumer/src/lib/api.ts
+++ b/ui/consumer/src/lib/api.ts
@@ -679,17 +679,19 @@ export interface ResourceCondition {
   lastTransitionTime?: string;
 }
 
-interface RawNetworkService {
+export interface RawNetworkService {
   metadata?: { name?: string; labels?: Record<string, string> };
   spec?: {
     networkInterfaces?: {
       selector?: { matchLabels?: Record<string, string> };
     };
+    /** The ports members answer on; a backend names one of them. */
+    ports?: Array<{ name?: string; port?: number; protocol?: string; appProtocol?: string }>;
   };
   status?: { conditions?: ResourceCondition[] };
 }
 
-interface RawHttpProxy {
+export interface RawHttpProxy {
   metadata?: {
     name?: string;
     creationTimestamp?: string;
@@ -699,8 +701,18 @@ interface RawHttpProxy {
   spec?: {
     hostnames?: string[];
     rules?: Array<{
+      /** Gateway API `HTTPRouteMatch`es; any one matching selects the rule. Unset means `/`. */
+      matches?: Array<{
+        path?: { type?: string; value?: string };
+        headers?: unknown[];
+        queryParams?: unknown[];
+        method?: string;
+      }>;
       backends?: Array<{
-        networkService?: { name?: string };
+        networkService?: { name?: string; port?: string };
+        endpoint?: string;
+        /** Share of the rule's requests, relative to its other backends. Unset is 1. */
+        weight?: number;
       }>;
     }>;
   };
@@ -721,6 +733,22 @@ export interface ConnectedAlb {
   conditions: ResourceCondition[];
   /** This workload's NetworkServices the proxy backends to, with their `Ready` condition. */
   services: Array<{ name: string; ready?: ResourceCondition }>;
+  /** The proxy's rules that send traffic to this workload, in spec order. */
+  routes: AlbRoute[];
+}
+
+/** One rule of a load balancer that sends traffic to the workload. */
+export interface AlbRoute {
+  /** The paths the rule matches, as written: `/`, `/api`. */
+  paths: string[];
+  /** The rule also matches on headers, query parameters or method. */
+  narrowed: boolean;
+  /** The workload port the rule sends to, resolved from the service's named port. */
+  port?: { name: string; number?: number; appProtocol?: string };
+  /** This workload's share of the rule's requests when other backends share it, 0-100. */
+  percent?: number;
+  /** How many other backends share the rule. */
+  sharedWith: number;
 }
 
 export interface PublishedUrl {
@@ -784,6 +812,47 @@ function workloadNameForService(svc: RawNetworkService): string | undefined {
   );
 }
 
+/** A match's path as a person reads it. A regular expression is marked, since `/a.*` reads as a literal. */
+function matchPath(path: { type?: string; value?: string } | undefined): string {
+  const value = path?.value || '/';
+  return path?.type === 'RegularExpression' ? `~ ${value}` : value;
+}
+
+/**
+ * The proxy's rules that send traffic to one of `services` (the workload's own
+ * NetworkServices), each with the paths it matches, the workload port it sends
+ * to and, when the rule splits traffic with other backends, this workload's
+ * share. Weights follow the Gateway API: unset is 1.
+ */
+export function albRoutes(proxy: RawHttpProxy, services: RawNetworkService[]): AlbRoute[] {
+  const byName = new Map(services.flatMap((svc) => (svc.metadata?.name ? [[svc.metadata.name, svc] as const] : [])));
+  return (proxy.spec?.rules ?? []).flatMap((rule) => {
+    const backends = rule.backends ?? [];
+    const own = backends.filter((b) => b.networkService?.name && byName.has(b.networkService.name));
+    if (own.length === 0) return [];
+    const weight = (b: (typeof backends)[number]) => b.weight ?? 1;
+    const total = backends.reduce((sum, b) => sum + weight(b), 0);
+    const ownWeight = own.reduce((sum, b) => sum + weight(b), 0);
+    const matches = rule.matches?.length ? rule.matches : [{}];
+    const portName = own[0].networkService?.port;
+    const servicePort = portName
+      ? byName.get(own[0].networkService!.name!)?.spec?.ports?.find((p) => p.name === portName)
+      : undefined;
+    const sharedWith = backends.length - own.length;
+    return [
+      {
+        paths: [...new Set(matches.map((m) => matchPath(m.path)))],
+        narrowed: matches.some((m) => !!m.method || !!m.headers?.length || !!m.queryParams?.length),
+        port: portName
+          ? { name: portName, number: servicePort?.port, appProtocol: servicePort?.appProtocol }
+          : undefined,
+        percent: sharedWith > 0 && total > 0 ? Math.round((ownWeight / total) * 100) : undefined,
+        sharedWith,
+      },
+    ];
+  });
+}
+
 /** `services` are the workload's own NetworkServices the proxy names as backends. */
 function toConnectedAlb(proxy: RawHttpProxy, services: RawNetworkService[] = []): ConnectedAlb | null {
   const proxyName = proxy.metadata?.name ?? '';
@@ -801,6 +870,7 @@ function toConnectedAlb(proxy: RawHttpProxy, services: RawNetworkService[] = [])
       name: svc.metadata?.name ?? '',
       ready: svc.status?.conditions?.find((c) => c.type === 'Ready'),
     })),
+    routes: albRoutes(proxy, services),
   };
 }
 
@@ -1072,6 +1142,86 @@ export function useDeletePermissions(
   return { ...(query.data ?? NO_DELETE_PERMISSIONS), isLoading: query.isPending };
 }
 
+// ── Load balancer backend ────────────────────────────────────────────────
+
+/**
+ * A port name a NetworkService (and a load balancer backend naming it) will
+ * accept: a DNS label. Mirrors the CLI's `url.PortName`. Undefined when
+ * nothing usable is left.
+ */
+export function servicePortName(name: string): string | undefined {
+  const cleaned = name
+    .toLowerCase()
+    .replace(/[^a-z0-9]/g, '-')
+    .replace(/^-+|-+$/g, '')
+    .slice(0, 63)
+    .replace(/-+$/, '');
+  return cleaned || undefined;
+}
+
+/**
+ * The NetworkService that lets a load balancer reach `workload`: the same
+ * object `datumctl compute url` makes (named for the workload, labelled with
+ * its name and UID, selecting its instances), exposing each named TCP port.
+ * Undefined when the workload has no named TCP port to expose.
+ */
+export function workloadServicePayload(workload: Workload) {
+  const seen = new Set<string>();
+  const ports = workload.namedPorts.flatMap((p) => {
+    const name = servicePortName(p.name);
+    if (!name || seen.has(name) || p.protocol.toUpperCase() !== 'TCP') return [];
+    seen.add(name);
+    return [{ name, port: p.port, protocol: 'TCP' }];
+  });
+  if (ports.length === 0) return undefined;
+  return {
+    apiVersion: 'networking.datumapis.com/v1alpha',
+    kind: 'NetworkService',
+    metadata: {
+      name: workload.name,
+      namespace: 'default',
+      labels: {
+        [INSTANCE_LABELS.workloadName]: workload.name,
+        'compute.datumapis.com/workload-uid': workload.uid,
+      },
+      ownerReferences: [
+        {
+          apiVersion: 'compute.datumapis.com/v1alpha',
+          kind: 'Workload',
+          name: workload.name,
+          uid: workload.uid,
+          controller: false,
+          blockOwnerDeletion: false,
+        },
+      ],
+    },
+    spec: {
+      networkInterfaces: { selector: { matchLabels: { [INSTANCE_LABELS.workloadName]: workload.name } } },
+      ports,
+    },
+  };
+}
+
+/**
+ * Make sure a load balancer can pick `workload` as its backend: creates its
+ * NetworkService unless one already selects it. A 409 means one with its name
+ * exists already, which is as good.
+ */
+export async function ensureWorkloadService(projectId: string, workload: Workload): Promise<void> {
+  const services = await listOrUnavailable<RawNetworkService>(projectId, NETWORKSERVICES_PATH);
+  if (services?.some((svc) => workloadNameForService(svc) === workload.name)) return;
+  const payload = workloadServicePayload(workload);
+  if (!payload) return;
+  const res = await fetch(`${getProjectScopedBase(projectId)}${NETWORKSERVICES_PATH}`, {
+    method: 'POST',
+    headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload),
+  });
+  if (!res.ok && res.status !== 409) {
+    throw new ApiError(res.status, `Request failed (${res.status}): ${NETWORKSERVICES_PATH}`);
+  }
+}
+
 // ── Delete mutation ──────────────────────────────────────────────────────
 
 /** DELETEs one object; a 404 means it's already gone, which is what we wanted. */
diff --git a/ui/consumer/src/lib/workload-presenters.test.ts b/ui/consumer/src/lib/workload-presenters.test.ts
index 4a04301a..b0d85b58 100644
--- a/ui/consumer/src/lib/workload-presenters.test.ts
+++ b/ui/consumer/src/lib/workload-presenters.test.ts
@@ -1,5 +1,7 @@
 import { describe, expect, test } from 'vitest';
 import {
+  albRowState,
+  routePortText,
   compactDetailRows,
   crashDetail,
   crashDetailText,
@@ -831,3 +833,36 @@ describe('instanceProblem', () => {
     expect(p?.hints[0]).toContain('out of memory');
   });
 });
+
+describe('albRowState', () => {
+  test('ready, or nothing to judge, reads Ready', () => {
+    expect(albRowState({ phase: 'ready' })).toEqual({ tone: 'ok', label: 'Ready' });
+    expect(albRowState(undefined)).toEqual({ tone: 'ok', label: 'Ready' });
+  });
+
+  test('provisioning names the step, amber once it is slow', () => {
+    expect(albRowState({ phase: 'provisioning', step: 'Issuing TLS certificate', stalled: false })).toEqual({
+      tone: 'muted',
+      label: 'Provisioning · issuing TLS certificate',
+    });
+    expect(albRowState({ phase: 'provisioning', step: 'Issuing TLS certificate', stalled: true }).tone).toBe('warn');
+  });
+
+  test('an error carries its message', () => {
+    expect(albRowState({ phase: 'error', message: 'Certificate rejected' })).toEqual({
+      tone: 'error',
+      label: 'Certificate rejected',
+    });
+  });
+});
+
+describe('routePortText', () => {
+  test('number and name when the service declares the port', () => {
+    expect(routePortText({ name: 'http', number: 8080 })).toBe(':8080 (http)');
+  });
+
+  test('name alone when it does not', () => {
+    expect(routePortText({ name: 'grpc' })).toBe('port grpc');
+    expect(routePortText(undefined)).toBeUndefined();
+  });
+});
diff --git a/ui/consumer/src/lib/workload-presenters.ts b/ui/consumer/src/lib/workload-presenters.ts
index 37cc82c0..1f34741a 100644
--- a/ui/consumer/src/lib/workload-presenters.ts
+++ b/ui/consumer/src/lib/workload-presenters.ts
@@ -2,6 +2,8 @@
  * Display helpers shared by the workloads card grid and table views.
  */
 import { instanceFailure, QUOTA_REASONS } from '../adapter';
+import type { AlbRoute } from './api';
+import type { AlbStatus } from './alb-status';
 import { formatLocationNames, formatLocationSelector, type LocationIndex } from './locations';
 import {
   workloadHealthToBadgeType,
@@ -358,6 +360,24 @@ export function privateNameState(instance: Instance): PrivateNameState {
   };
 }
 
+/**
+ * A load balancer row's state on the workload Overview: "Ready",
+ * "Provisioning · issuing TLS certificate" (amber once it is taking longer
+ * than usual), or the error.
+ */
+export function albRowState(status: AlbStatus | undefined): { tone: StatusTone; label: string } {
+  if (!status || status.phase === 'ready') return { tone: 'ok', label: 'Ready' };
+  if (status.phase === 'error') return { tone: 'error', label: status.message || 'Error' };
+  const step = status.step.charAt(0).toLowerCase() + status.step.slice(1);
+  return { tone: status.stalled ? 'warn' : 'muted', label: `Provisioning · ${step}` };
+}
+
+/** The workload port a route sends to: ":8080 (http)", or "port http" when the number isn't known. */
+export function routePortText(port: AlbRoute['port']): string | undefined {
+  if (!port) return undefined;
+  return port.number !== undefined ? `:${port.number} (${port.name})` : `port ${port.name}`;
+}
+
 function isEmptyValue(value: unknown): boolean {
   return value === undefined || value === null || value === '' || (Array.isArray(value) && value.length === 0);
 }
diff --git a/ui/consumer/src/pages/workload-detail.tsx b/ui/consumer/src/pages/workload-detail.tsx
index 4d355c8e..8dfb1001 100644
--- a/ui/consumer/src/pages/workload-detail.tsx
+++ b/ui/consumer/src/pages/workload-detail.tsx
@@ -9,7 +9,6 @@
  * Breadcrumbs are left to the host `ContentWrapper` — do not re-render them
  * inside the plugin (that double-stacks chrome vs native pages).
  */
-import { StatusBadge } from "../components/detail-list";
 import { ResourceActivity } from "../components/resource-activity";
 import { WorkloadOverviewCard } from "../components/workload-overview-card";
 import { WorkloadPageChrome } from "../components/workload-page-chrome";
@@ -23,23 +22,16 @@ import {
 import { ErrorOrRestrictedState } from "../components/states";
 import { SectionFrame } from "../components/surface";
 import { WorkloadInstances } from "../components/workload-instances";
+import { WorkloadLoadBalancers } from "../components/workload-load-balancers";
 import {
   useDeletePermissions,
   usePublishedUrl,
   useWorkload,
   useWorkloadDeployments,
   useWorkloadInstances,
-  type PublishedUrl,
 } from "../lib/api";
 import { splitSlashValue } from "../lib/format";
-import {
-  albStatus,
-  albStatusDisplay,
-  workloadUrlState,
-  type AlbStatus,
-} from "../lib/alb-status";
-import { WorkloadUrl } from "../components/workload-url";
-import { albOverviewHref, useWorkloadOverviewState } from "../lib/use-workload-overview-state";
+import { useWorkloadOverviewState } from "../lib/use-workload-overview-state";
 import {
   compactDetailRows,
   firstCrash,
@@ -59,7 +51,7 @@ import WorkloadLogs from "./workload-logs";
 import WorkloadMetrics from "./workload-metrics";
 import type { Instance, Workload } from "../schema";
 import { Icon } from "@datum-cloud/datum-ui/icons";
-import { GlobeIcon, SettingsIcon } from "lucide-react";
+import { SettingsIcon } from "lucide-react";
 import { lazy, Suspense, useMemo, type ReactNode } from "react";
 import {
   Link,
@@ -76,71 +68,6 @@ const WorkloadActivity = lazy(() => import("./workload-activity"));
 // The topology canvas is the plugin's largest component; load it with its tab.
 const WorkloadTopology = lazy(() => import("./workload-topology"));
 
-function LoadBalancerValue({
-  projectId,
-  published,
-  isLoading,
-  albStatuses,
-}: {
-  projectId?: string;
-  published?: PublishedUrl | null;
-  isLoading: boolean;
-  albStatuses: Record<string, AlbStatus>;
-}) {
-  if (isLoading) {
-    return <span className="text-muted-foreground">—</span>;
-  }
-  if (!published?.proxies.length) {
-    return <span className="text-muted-foreground">Not connected</span>;
-  }
-
-  return (
-    <div className="flex flex-col gap-1">
-      {published.proxies.map((alb) => {
-        const label = alb.displayName || alb.proxyName;
-        const albStatus = albStatuses[alb.proxyName];
-        const display = albStatus ? albStatusDisplay(albStatus) : undefined;
-        const badge =
-          albStatus && albStatus.phase !== "ready" && display ? (
-            <span title={albStatus.message}>
-              <StatusBadge type={display.tone}>
-                {albStatus.phase === "provisioning" ? albStatus.step : "Error"}
-              </StatusBadge>
-            </span>
-          ) : null;
-        if (!projectId) {
-          return (
-            <span
-              key={alb.proxyName}
-              className="inline-flex items-center gap-1.5 text-sm"
-            >
-              <Icon
-                icon={GlobeIcon}
-                size={14}
-                className="text-muted-foreground shrink-0"
-              />
-              {label}
-              {badge}
-            </span>
-          );
-        }
-        return (
-          <span key={alb.proxyName} className="inline-flex items-center gap-2">
-            <Link
-              to={albOverviewHref(projectId, alb.proxyName)}
-              className="text-primary inline-flex items-center gap-1.5 text-sm hover:underline"
-            >
-              <Icon icon={GlobeIcon} size={14} className="shrink-0" />
-              {label}
-            </Link>
-            {badge}
-          </span>
-        );
-      })}
-    </div>
-  );
-}
-
 const DETAIL_DATE_FORMAT: Intl.DateTimeFormatOptions = {
   day: "2-digit",
   month: "short",
@@ -161,10 +88,6 @@ interface DetailRow {
 interface WorkloadDetailsProps {
   workload: Workload;
   instances: readonly Instance[];
-  albStatuses: Record<string, AlbStatus>;
-  projectId?: string;
-  published?: PublishedUrl | null;
-  publishedLoading: boolean;
   locationLabel: string;
 }
 
@@ -192,10 +115,6 @@ function instanceSize(instances: readonly Instance[]): string | undefined {
 function workloadDetailRows({
   workload,
   instances,
-  albStatuses,
-  projectId,
-  published,
-  publishedLoading,
   locationLabel,
 }: WorkloadDetailsProps): DetailRow[] {
   const { main: resourceShort } = splitSlashValue(workload.resources ?? "");
@@ -222,19 +141,6 @@ function workloadDetailRows({
       content: <span title={workload.locations.join(", ")}>{locationLabel}</span>,
     },
     { label: "Ports", value: workload.ports, content: mono(workload.ports.join(", ")) },
-    {
-      label: "Load balancer",
-      // Held while loading so the row doesn't pop in after the rest.
-      value: publishedLoading ? "loading" : published?.proxies,
-      content: (
-        <LoadBalancerValue
-          projectId={projectId}
-          published={published}
-          isLoading={publishedLoading}
-          albStatuses={albStatuses}
-        />
-      ),
-    },
     { label: "Networks", value: workload.networks, content: mono(workload.networks.join(", ")) },
     { label: "Runtime", value: workload.runtimeType, content: workload.runtimeType },
     {
@@ -330,14 +236,6 @@ function WorkloadLayoutShell({
     [instances],
   );
   const proxyId = published.data?.proxyName;
-  const headerAlb = published.data?.proxies[0];
-  const headerUrl =
-    workload && headerAlb?.hostname
-      ? workloadUrlState(
-          !workload.deleting && workload.health === "Available",
-          albStatus(headerAlb, { workloadServing: workload.health === "Available" }),
-        )
-      : undefined;
   const navigate = useNavigate();
   const permissions = useDeletePermissions(projectId);
   const deleteDialog = useDeleteWorkloadDialog();
@@ -354,25 +252,6 @@ function WorkloadLayoutShell({
       metricsHref={metricsHref}
       logsHref={logsHref}
       titleName={workload?.name ?? titleName}
-      // Held until the workload is known too, since that decides whether it links.
-      urlLoading={published.isLoading || (isLoading && !!headerAlb?.hostname)}
-      deleteLoading={(isLoading || permissions.isLoading) && !workload?.deleting}
-      visit={
-        headerAlb?.hostname && headerUrl
-          ? { href: `https://${headerAlb.hostname}`, live: headerUrl.live, status: headerUrl.status }
-          : undefined
-      }
-      url={
-        headerAlb?.hostname && headerUrl ? (
-          <WorkloadUrl
-            hostname={headerAlb.hostname}
-            customHostnames={headerAlb.customHostnames}
-            live={headerUrl.live}
-            status={headerUrl.status}
-            plain
-          />
-        ) : undefined
-      }
       onDelete={canDelete && workload ? () => deleteDialog.show(workload) : undefined}>
       <DeleteWorkloadDialog
         projectId={projectId}
@@ -431,9 +310,9 @@ function WorkloadLayoutShell({
 }
 
 /**
- * Overview: a summary card (status, endpoint, crash or deploy progress, the
- * last hour's stats), the instances table, then what changed recently beside
- * the workload's configuration.
+ * Overview: a summary card (status, crash or deploy progress, the
+ * last hour's stats), the instances table, the load balancers that reach it,
+ * then what changed recently beside the workload's configuration.
  */
 /** When an instance's failure was reported, for the end of the "so far" line. */
 function failedAt(instance: Instance | undefined): Date | undefined {
@@ -456,6 +335,7 @@ export function WorkloadOverview() {
     publishedLoading,
     locationIndex,
     identityLabel,
+    identityLoading,
     identityDenied,
     metricKeys,
     overviewHref,
@@ -515,15 +395,6 @@ export function WorkloadOverview() {
         timeline={timeline}
         problem={state?.problem}
         problemActions={problemActions}
-        endpoint={
-          primaryAlb?.hostname
-            ? {
-                hostname: primaryAlb.hostname,
-                albHref: projectId ? albOverviewHref(projectId, primaryAlb.proxyName) : undefined,
-                albStatus: primaryAlbStatus,
-              }
-            : undefined
-        }
         image={workload.image}
         updatedAt={workload.updatedAt ?? workload.createdAt}
         now={now}
@@ -547,6 +418,9 @@ export function WorkloadOverview() {
         metricsDenied={identityDenied}
         proxyId={proxyId}
         allocation={allocation}
+        instancesLoading={instancesLoading}
+        identityLoading={identityLoading}
+        publishedLoading={publishedLoading}
       />
 
       <WorkloadInstances
@@ -562,6 +436,15 @@ export function WorkloadOverview() {
         metricsDenied={identityDenied}
       />
 
+      <WorkloadLoadBalancers
+        projectId={projectId}
+        published={published}
+        loading={publishedLoading}
+        albStatuses={albStatuses}
+        network={workload.networks[0]}
+        workload={workload}
+      />
+
       <div className="grid grid-cols-1 items-start gap-6 lg:grid-cols-2">
         <SectionFrame
           title="What changed"
@@ -583,10 +466,6 @@ export function WorkloadOverview() {
         <WorkloadDetails
           workload={workload}
           instances={instances}
-          albStatuses={albStatuses}
-          projectId={projectId}
-          published={published}
-          publishedLoading={publishedLoading}
           locationLabel={formatLocationNames(workload.locations, locationIndex)}
         />
       </div>
diff --git a/ui/consumer/src/schema.ts b/ui/consumer/src/schema.ts
index f3e5ca80..e28e3c9a 100644
--- a/ui/consumer/src/schema.ts
+++ b/ui/consumer/src/schema.ts
@@ -63,6 +63,8 @@ export interface Workload {
   runtimeType?: string;
   tags: string[];
   ports: string[];
+  /** The containers' named ports, which a NetworkService can expose to a load balancer. */
+  namedPorts: Array<{ name: string; port: number; protocol: string }>;
   locations: string[];
   resources?: string;
   replicasPerRegion?: number;