feat(ui): Redesign the workload overview

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",

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),

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>

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>
+  );
+}

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)}

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>
   );
 }