fix(web): the workflow detail page matches the mockup's routine layout (CL-9666)

apps/web/src/pages/routine-detail-page.tsx

@@ -1,4 +1,4 @@
-import { PageShell, RichEmptyState, RunNowButton, Skeleton } from "@corbits/react-ui";
+import { RichEmptyState, RunNowButton, Skeleton } from "@corbits/react-ui";
 import { type } from "arktype";
 import { useState } from "react";
 import { Clock } from "@/lib/icons";
@@ -9,12 +9,14 @@ import type { GlobalRoutineRow } from "../global-routines";
 import { useNavigate } from "../navigation";
 import { WORKFLOWS_PATH_PREFIX } from "../path-ids";
 import { PageLayout } from "../shell/page-layout";
+import { ListCard } from "./library-list";
 import { StageTopBar } from "../shell/stage-top-bar";
 import {
   PauseResumeButton,
   RoutinePill,
   formatWhen,
   routineState,
+  useRoutineDescription,
   useRoutineRuns,
 } from "./routine-ui";
 import type { RunRow } from "./routine-ui";
@@ -39,6 +41,8 @@ function runLabel(status: RunRow["status"]): string {
   return status === "deployed" ? "ok" : status;
 }
 
+const FAILED_WITHOUT_MESSAGE = "The run failed without reporting an error.";
+
 /** The run's own failure text: the newest error-ish event's message. */
 function failureMessage(events: readonly RunEvent[]): string | null {
   for (const event of events.toReversed()) {
@@ -51,6 +55,23 @@ function failureMessage(events: readonly RunEvent[]): string | null {
   return null;
 }
 
+/** The Result cell: what the run came to, the failure's own message when it failed. */
+function RunResult({ tenantId, run }: { readonly tenantId: string; readonly run: RunRow }) {
+  const eventsQuery = useAPIQuery(
+    run.status === "error" ? runEventsPath(tenantId, run.id) : "",
+    RunEventsSchema,
+  );
+  if (run.status === "error") {
+    const failure =
+      eventsQuery.kind === "ready"
+        ? (failureMessage(eventsQuery.data.events) ?? FAILED_WITHOUT_MESSAGE)
+        : "…";
+    return <span title={failure}>{failure}</span>;
+  }
+  if (run.status === "running" || run.status === "updating") return <span>Running…</span>;
+  return <span>{run.status === "deployed" ? "Succeeded" : run.status}</span>;
+}
+
 function RunDetail({
   tenantId,
   run,
@@ -72,7 +93,7 @@ function RunDetail({
     <div className="routine-run-detail">
       {run.status === "error" ? (
         <>
-          <p className="routine-error">{failure ?? "The run failed without reporting an error."}</p>
+          <p className="routine-error">{failure ?? FAILED_WITHOUT_MESSAGE}</p>
           <div>
             <RunNowButton variant="outline" size="sm" label="Retry" onRun={onRetry} />
           </div>
@@ -116,29 +137,33 @@ function RoutineRunsSection({
         <RichEmptyState title="No runs yet" description="This workflow hasn't run yet." />
       ) : null}
       {runsQuery.kind === "ready" && runsQuery.data.data.length > 0 ? (
-        <div className="routine-rows">
+        <ListCard
+          label="Recent runs"
+          columns="minmax(120px, 1fr) minmax(0, 2fr) 100px"
+          heads={["When", "Result", "Status"]}
+        >
           {runsQuery.data.data.map((run) => (
-            <div key={run.id} className="routine-run">
+            <li key={run.id} className="lib-row routine-run">
               <button
                 type="button"
-                className="routine-run-summary"
+                className="lib-cell lib-name routine-run-when"
                 aria-expanded={selectedRunId === run.id}
                 onClick={() => setSelectedRunId(selectedRunId === run.id ? null : run.id)}
               >
-                <span>{formatWhen(run.createdAt)}</span>
-                <span className="routine-meta">
-                  {run.endedAt === null || run.endedAt === undefined
-                    ? "In progress"
-                    : `Ended ${formatWhen(run.endedAt)}`}
-                </span>
-                <RoutinePill tone={runTone(run.status)}>{runLabel(run.status)}</RoutinePill>
+                {formatWhen(run.createdAt)}
               </button>
+              <span className="lib-cell lib-cell--soft">
+                <RunResult tenantId={tenantId} run={run} />
+              </span>
+              <span className="lib-cell">
+                <RoutinePill tone={runTone(run.status)}>{runLabel(run.status)}</RoutinePill>
+              </span>
               {selectedRunId === run.id ? (
                 <RunDetail tenantId={tenantId} run={run} onRetry={onRetry} />
               ) : null}
-            </div>
+            </li>
           ))}
-        </div>
+        </ListCard>
       ) : null}
     </section>
   );
@@ -184,41 +209,55 @@ export function RoutineDetailPage({
   const runs = useRoutineRuns(row.tenantId, row.definition.definitionId, 1);
   const lastRun = runs.kind === "ready" ? runs.data.data[0] : undefined;
   const state = routineState(row, lastRun);
+  const description = useRoutineDescription(row.tenantId, row.definition.name);
+  const paused = state.label === "paused";
   return (
     <div className="flex h-full min-h-0 flex-col">
       <StageTopBar
         crumbs={[
           { label: "Workflows", href: WORKFLOWS_PATH_PREFIX },
           { label: row.definition.name },
         ]}
-        actions={
-          <div className="flex items-center gap-2">
-            <PauseResumeButton row={row} />
-            <RunNowButton variant="outline" size="sm" onRun={onRunNow} />
-          </div>
-        }
       />
-      <PageShell>
-        <div className="routines-page">
-          <div className="routine-head">
-            <h1>{row.definition.name}</h1>
-            <RoutinePill tone={state.tone}>{state.label}</RoutinePill>
-          </div>
+      <div className="min-h-0 flex-1 overflow-y-auto">
+        <PageLayout
+          title={row.definition.name}
+          subtitle={
+            <span className="routine-sub">
+              {sentence}
+              <RoutinePill tone={state.tone}>{state.label}</RoutinePill>
+            </span>
+          }
+          actions={
+            <>
+              <PauseResumeButton row={row} />
+              <RunNowButton size="sm" onRun={onRunNow} />
+            </>
+          }
+        >
           <dl className="routine-kv">
             <dt>Schedule</dt>
             <dd>{sentence}</dd>
-            <dt>Workbench</dt>
-            <dd>{row.tenantName}</dd>
+            <dt>Delivers to</dt>
+            <dd>{row.tenantName === "" ? "This workbench" : row.tenantName}</dd>
             <dt>Last run</dt>
             <dd>{runs.kind === "ready" ? formatWhen(lastRun?.createdAt) : "…"}</dd>
+            <dt>Next run</dt>
+            <dd>{paused ? "Paused" : sentence}</dd>
           </dl>
+          {description !== null ? (
+            <section className="routine-sec">
+              <h2>What it does</h2>
+              <p className="routine-prose">{description}</p>
+            </section>
+          ) : null}
           <RoutineRunsSection
             tenantId={row.tenantId}
             definitionId={row.definition.definitionId}
             onRetry={onRunNow}
           />
-        </div>
-      </PageShell>
+        </PageLayout>
+      </div>
     </div>
   );
 }

apps/web/src/pages/routine-ui.tsx

@@ -3,7 +3,7 @@ import "./routines.css";
 import { Button } from "@corbits/react-ui";
 import { toast } from "@corbits/react-ui/ui/toast";
 import { reportError } from "@corbits/error-sink";
-import { WorkflowRunResponse, paginatedSchema } from "@intx/types";
+import { WorkflowDefinitionResponse, WorkflowRunResponse, paginatedSchema } from "@intx/types";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { describeApiError } from "@/lib/api-query";
 import { tenantKeys } from "../query-client";
@@ -27,6 +27,22 @@ export function useRoutineRuns(
   return useAPIQuery(runsPath(tenantId, definitionId, limit), RunsPageSchema);
 }
 
+const DefinitionsPageSchema = paginatedSchema(WorkflowDefinitionResponse);
+
+/** The definition's own description, joined to the deployment by name (the
+ * same join the cron row uses); null while loading or when it has none. */
+export function useRoutineDescription(tenantId: string, name: string): string | null {
+  const query = useAPIQuery(
+    `/api/tenants/${tenantId}/workflows/definitions?limit=100`,
+    DefinitionsPageSchema,
+  );
+  if (query.kind !== "ready") return null;
+  const description = query.data.data.find((definition) => definition.name === name)?.description;
+  return description === undefined || description === null || description === ""
+    ? null
+    : description;
+}
+
 export function formatWhen(iso: string | null | undefined): string {
   if (iso === null || iso === undefined) return "Never";
   const date = new Date(iso);

apps/web/src/pages/routines.css

@@ -1,13 +1,3 @@
-.routine-rows {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  background: var(--surface);
-  border-radius: var(--r-lg);
-  box-shadow: var(--raised);
-  overflow: hidden;
-}
-
 .routine-meta {
   color: var(--ink-2);
   overflow: hidden;
@@ -54,22 +44,18 @@
   background: var(--info);
 }
 
-.routine-head {
-  display: flex;
+.routine-sub {
+  display: inline-flex;
   align-items: center;
-  gap: 12px;
-}
-
-.routine-head h1 {
-  font-family: var(--font-mono);
-  font-size: 24px;
+  flex-wrap: wrap;
+  gap: 10px;
 }
 
 .routine-kv {
   display: grid;
   grid-template-columns: 140px 1fr;
   gap: 10px 16px;
-  margin: 0;
+  margin: 0 0 24px;
   font-size: 13.5px;
 }
 .routine-kv dt {
@@ -81,44 +67,35 @@
   min-width: 0;
 }
 
+.routine-sec {
+  margin-bottom: 24px;
+}
+.routine-prose {
+  margin: 0;
+  color: var(--ink-2);
+  font-size: 13.5px;
+}
 .routine-sec h2 {
   margin: 0 0 8px;
   font-size: 12.5px;
   font-weight: 800;
   color: var(--ink-2);
 }
 
-.routine-run {
-  border-bottom: 1px solid var(--line);
-}
-.routine-run:last-child {
-  border-bottom: 0;
-}
-
-.routine-run-summary {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto auto;
-  align-items: center;
-  gap: 16px;
-  width: 100%;
-  padding: 12px 16px;
+.routine-run-when {
+  padding: 0;
   border: 0;
   background: none;
-  color: inherit;
   font: inherit;
-  font-size: 13.5px;
   text-align: left;
   cursor: pointer;
 }
-.routine-run-summary:hover {
-  background: var(--surface-sunk);
-}
 
 .routine-run-detail {
   display: flex;
   flex-direction: column;
   gap: 8px;
-  padding: 0 16px 14px;
+  grid-column: 1 / -1;
 }
 
 .routine-error {