@checkstack/automation-frontend 0.7.1 → 0.8.0

package/src/pages/AutomationListPage.tsx

@@ -5,6 +5,7 @@ import {
   usePluginClient,
   accessApiRef,
   useApi,
+  useQueryClient,
   wrapInSuspense,
 } from "@checkstack/frontend-api";
 import {
@@ -28,6 +29,8 @@ import {
   TableHead,
   TableBody,
   TableCell,
+  ResponsiveTable,
+  MobileCardList,
   LoadingSpinner,
   QueryErrorState,
   EmptyState,
@@ -37,11 +40,22 @@ import {
   AccordionTrigger,
   AccordionContent,
   useToast,
+  toastError,
+  cn,
 } from "@checkstack/ui";
-import { extractErrorMessage, resolveRoute } from "@checkstack/common";
+import { resolveRoute } from "@checkstack/common";
 import { formatDistanceToNow } from "date-fns";
 import { groupAutomations } from "./automation-grouping";
 
+/**
+ * Left status-accent class for an automation's enabled/disabled state. Reuses
+ * the colorblind-safe triad so the stripe encodes status by position + hue,
+ * not by the toggle switch alone: an enabled automation reads `ok`, a disabled
+ * one reads muted/`unknown`. Spelled out so Tailwind's JIT keeps the classes.
+ */
+const automationAccent = (status: Automation["status"]): string =>
+  status === "enabled" ? "bg-status-ok" : "bg-status-unknown/60";
+
 /**
  * Lists every automation the operator can see, with quick enable / disable
  * toggle and delete. The "Create" button navigates to `/automation/new`
@@ -52,9 +66,18 @@ import { groupAutomations } from "./automation-grouping";
  * the most common operation here is "find the one I broke", which a
  * single sorted list of recent activity covers without a pager UX.
  */
+/**
+ * Cache shape of the `listAutomations` loader: the paginated wrapper around the
+ * automation rows. Used to type the optimistic snapshot/patch on the toggle.
+ */
+type AutomationsQueryData = {
+  items: Automation[];
+};
+
 const AutomationListContent: React.FC = () => {
   const client = usePluginClient(AutomationApi);
   const accessApi = useApi(accessApiRef);
+  const queryClient = useQueryClient();
   const toast = useToast();
   const navigate = useNavigate();
 
@@ -68,19 +91,64 @@ const AutomationListContent: React.FC = () => {
   >("all");
   const [deleteId, setDeleteId] = React.useState<string | undefined>();
 
-  const query = client.listAutomations.useQuery({
-    limit: 100,
-    offset: 0,
-    ...(statusFilter === "all" ? {} : { status: statusFilter }),
-  });
+  // The loader input depends on the status filter, so the cache key changes
+  // when the filter changes. Build the input once and derive the exact oRPC
+  // query key from it so the optimistic patch addresses the same cache entry.
+  // See `docs/.../frontend/optimistic-updates.md` for the query-key contract.
+  const listInput = React.useMemo(
+    () => ({
+      limit: 100,
+      offset: 0,
+      ...(statusFilter === "all" ? {} : { status: statusFilter }),
+    }),
+    [statusFilter],
+  );
+
+  const automationsQueryKey = React.useMemo(
+    () =>
+      [
+        ["automation", "listAutomations"],
+        { input: listInput, type: "query" },
+      ] as const,
+    [listInput],
+  );
+
+  const query = client.listAutomations.useQuery(listInput);
 
-  const toggleMutation = client.toggleAutomation.useMutation({
-    onSuccess: (data) => {
-      toast.success(
-        `${data.name} ${data.status === "enabled" ? "enabled" : "disabled"}`,
-      );
+  // Toggle is a cheap, low-risk per-row flip — apply the optimistic pattern so
+  // the switch flips on click instead of after the round-trip:
+  // 1. onMutate cancels in-flight refetches, snapshots, flips the row status.
+  // 2. onError rolls back from the snapshot, then surfaces a toast.
+  // 3. onSettled invalidates so server truth settles in either branch.
+  // 4. No success toast — the visible switch flip IS the feedback.
+  const toggleMutation = client.toggleAutomation.useMutation<{
+    previous: AutomationsQueryData | undefined;
+  }>({
+    onMutate: async ({ id, enabled }) => {
+      await queryClient.cancelQueries({ queryKey: automationsQueryKey });
+      const previous =
+        queryClient.getQueryData<AutomationsQueryData>(automationsQueryKey);
+      if (previous) {
+        queryClient.setQueryData<AutomationsQueryData>(automationsQueryKey, {
+          ...previous,
+          items: previous.items.map((automation) =>
+            automation.id === id
+              ? { ...automation, status: enabled ? "enabled" : "disabled" }
+              : automation,
+          ),
+        });
+      }
+      return { previous };
+    },
+    onError: (error, _vars, ctx) => {
+      if (ctx?.previous) {
+        queryClient.setQueryData(automationsQueryKey, ctx.previous);
+      }
+      toastError(toast, "Failed to toggle automation", error);
+    },
+    onSettled: () => {
+      void queryClient.invalidateQueries({ queryKey: automationsQueryKey });
     },
-    onError: (error) => toast.error(extractErrorMessage(error)),
   });
 
   const deleteMutation = client.deleteAutomation.useMutation({
@@ -88,7 +156,7 @@ const AutomationListContent: React.FC = () => {
       toast.success("Automation deleted");
       setDeleteId(undefined);
     },
-    onError: (error) => toast.error(extractErrorMessage(error)),
+    onError: (error) => toastError(toast, "Failed to delete automation", error),
   });
 
   const items = query.data?.items;
@@ -106,7 +174,7 @@ const AutomationListContent: React.FC = () => {
   const renderRow = (automation: Automation) => (
     <TableRow
       key={automation.id}
-      className="cursor-pointer hover:bg-accent/40"
+      className="relative cursor-pointer transition-colors hover:bg-surface-inset"
       onClick={() =>
         navigate(
           resolveRoute(automationRoutes.routes.edit, {
@@ -115,7 +183,18 @@ const AutomationListContent: React.FC = () => {
         )
       }
     >
-      <TableCell onClick={(e) => e.stopPropagation()}>
+      <TableCell
+        onClick={(e) => e.stopPropagation()}
+        className="relative pl-4"
+      >
+        {/* Status accent: enabled/disabled by position + hue, not toggle alone. */}
+        <span
+          className={cn(
+            "absolute inset-y-0 left-0 w-1",
+            automationAccent(automation.status),
+          )}
+          aria-hidden
+        />
         {canManage ? (
           <Toggle
             checked={automation.status === "enabled"}
@@ -142,8 +221,10 @@ const AutomationListContent: React.FC = () => {
         )}
       </TableCell>
       <TableCell>
-        <div className="flex flex-col">
-          <span className="font-medium">{automation.name}</span>
+        <div className="flex flex-col gap-0.5">
+          <span className="font-semibold text-foreground">
+            {automation.name}
+          </span>
           {automation.description && (
             <span className="text-xs text-muted-foreground">
               {automation.description}
@@ -157,13 +238,16 @@ const AutomationListContent: React.FC = () => {
             <Badge
               key={`${trigger.event}-${index}`}
               variant="outline"
-              className="text-[10px] font-mono"
+              className="font-mono text-[10px] font-normal text-muted-foreground"
             >
               {trigger.event}
             </Badge>
           ))}
           {automation.definition.triggers.length > 3 && (
-            <Badge variant="outline" className="text-[10px]">
+            <Badge
+              variant="outline"
+              className="text-[10px] font-normal text-muted-foreground"
+            >
               +{automation.definition.triggers.length - 3}
             </Badge>
           )}
@@ -208,6 +292,118 @@ const AutomationListContent: React.FC = () => {
     </TableRow>
   );
 
+  const renderMobileCard = (automation: Automation) => (
+    <div
+      key={automation.id}
+      className="group relative cursor-pointer overflow-hidden rounded-[var(--d-card-r)] border border-border/70 bg-gradient-to-b from-surface-2 to-surface p-[var(--d-pad)] shadow-[0_1px_2px_hsl(var(--foreground)/0.04),0_10px_30px_-14px_hsl(var(--foreground)/0.12)] transition-all duration-200 hover:-translate-y-0.5 hover:border-primary/40 hover:shadow-xl"
+      onClick={() =>
+        navigate(
+          resolveRoute(automationRoutes.routes.edit, {
+            automationId: automation.id,
+          }),
+        )
+      }
+    >
+      {/* Status accent: enabled/disabled by position + hue, not toggle alone. */}
+      <span
+        className={cn(
+          "absolute inset-y-0 left-0 w-1",
+          automationAccent(automation.status),
+        )}
+        aria-hidden
+      />
+      <div className="flex items-start justify-between gap-2 pl-2">
+        <div className="flex min-w-0 flex-col gap-0.5">
+          <span className="truncate text-sm font-semibold text-foreground">
+            {automation.name}
+          </span>
+          {automation.description && (
+            <span className="truncate text-xs text-muted-foreground">
+              {automation.description}
+            </span>
+          )}
+        </div>
+        <div onClick={(e) => e.stopPropagation()}>
+          {canManage ? (
+            <Toggle
+              checked={automation.status === "enabled"}
+              onCheckedChange={(enabled) =>
+                toggleMutation.mutate({
+                  id: automation.id,
+                  enabled,
+                })
+              }
+              aria-label={
+                automation.status === "enabled"
+                  ? "Disable automation"
+                  : "Enable automation"
+              }
+            />
+          ) : (
+            <Badge
+              variant={automation.status === "enabled" ? "success" : "outline"}
+            >
+              {automation.status}
+            </Badge>
+          )}
+        </div>
+      </div>
+      <div className="mt-2 flex flex-wrap items-center gap-1 pl-2">
+        {automation.definition.triggers.slice(0, 3).map((trigger, index) => (
+          <Badge
+            key={`${trigger.event}-${index}`}
+            variant="outline"
+            className="font-mono text-[10px] font-normal text-muted-foreground"
+          >
+            {trigger.event}
+          </Badge>
+        ))}
+        {automation.definition.triggers.length > 3 && (
+          <Badge
+            variant="outline"
+            className="text-[10px] font-normal text-muted-foreground"
+          >
+            +{automation.definition.triggers.length - 3}
+          </Badge>
+        )}
+        <Badge variant="secondary" className="text-[10px]">
+          {automation.definition.mode}
+        </Badge>
+      </div>
+      <div className="mt-1 pl-2 text-xs text-muted-foreground">
+        Updated{" "}
+        {formatDistanceToNow(new Date(automation.updatedAt), {
+          addSuffix: true,
+        })}
+      </div>
+      <div
+        onClick={(e) => e.stopPropagation()}
+        className="mt-3 flex justify-end gap-1 pl-2"
+      >
+        <Link
+          to={resolveRoute(automationRoutes.routes.runs, {
+            automationId: automation.id,
+          })}
+        >
+          <Button variant="ghost" size="sm">
+            Runs
+          </Button>
+        </Link>
+        {canManage && (
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-8 w-8 text-destructive hover:bg-destructive/10"
+            onClick={() => setDeleteId(automation.id)}
+            aria-label="Delete automation"
+          >
+            <Trash2 className="h-4 w-4" />
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+
   return (
     <PageLayout
       title="Automations"
@@ -305,25 +501,32 @@ const AutomationListContent: React.FC = () => {
                     </span>
                   </AccordionTrigger>
                   <AccordionContent className="px-0 pb-0">
-                    <Table>
-                      <TableHeader>
-                        <TableRow>
-                          <TableHead className="w-8" />
-                          <TableHead>Name</TableHead>
-                          <TableHead>Triggers</TableHead>
-                          <TableHead>Mode</TableHead>
-                          <TableHead>Updated</TableHead>
-                          <TableHead className="w-24 text-right">
-                            Actions
-                          </TableHead>
-                        </TableRow>
-                      </TableHeader>
-                      <TableBody>
-                        {group.items.map((automation) =>
-                          renderRow(automation),
-                        )}
-                      </TableBody>
-                    </Table>
+                    <ResponsiveTable>
+                      <Table>
+                        <TableHeader>
+                          <TableRow>
+                            <TableHead className="w-8" />
+                            <TableHead>Name</TableHead>
+                            <TableHead>Triggers</TableHead>
+                            <TableHead>Mode</TableHead>
+                            <TableHead>Updated</TableHead>
+                            <TableHead className="w-24 text-right">
+                              Actions
+                            </TableHead>
+                          </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                          {group.items.map((automation) =>
+                            renderRow(automation),
+                          )}
+                        </TableBody>
+                      </Table>
+                    </ResponsiveTable>
+                    <MobileCardList className="p-2">
+                      {group.items.map((automation) =>
+                        renderMobileCard(automation),
+                      )}
+                    </MobileCardList>
                   </AccordionContent>
                 </AccordionItem>
               ))}

package/src/pages/AutomationTemplatePickerPage.tsx

@@ -15,10 +15,6 @@ import {
 } from "@checkstack/automation-common";
 import {
   PageLayout,
-  Card,
-  CardHeader,
-  CardTitle,
-  CardContent,
   Button,
   Badge,
   DynamicIcon,
@@ -75,25 +71,25 @@ const AutomationTemplatePickerContent: React.FC = () => {
       allowed={canManage}
     >
       <div className="space-y-6">
-        <Card>
-          <CardContent className="flex flex-col gap-3 p-4 sm:flex-row sm:items-center sm:justify-between">
-            <div className="flex items-center gap-3">
-              <div className="flex h-10 w-10 items-center justify-center rounded-md bg-muted">
-                <FilePlus2 className="h-5 w-5 text-muted-foreground" />
+        <div className="relative flex flex-col gap-3 overflow-hidden rounded-[var(--d-card-r)] border border-border/70 bg-gradient-to-b from-surface-2 to-surface p-[var(--d-pad)] shadow-[0_1px_2px_hsl(var(--foreground)/0.04),0_10px_30px_-14px_hsl(var(--foreground)/0.12)] sm:flex-row sm:items-center sm:justify-between">
+          <div className="flex items-center gap-3">
+            <div className="flex h-10 w-10 items-center justify-center rounded-md bg-surface-inset">
+              <FilePlus2 className="h-5 w-5 text-muted-foreground" />
+            </div>
+            <div>
+              <div className="font-semibold text-foreground">
+                Blank automation
               </div>
-              <div>
-                <div className="font-medium">Blank automation</div>
-                <div className="text-sm text-muted-foreground">
-                  Start with an empty editor and add triggers and actions yourself.
-                </div>
+              <div className="text-sm text-muted-foreground">
+                Start with an empty editor and add triggers and actions yourself.
               </div>
             </div>
-            <Button onClick={startBlank}>
-              Start blank
-              <ArrowRight className="ml-1 h-4 w-4" />
-            </Button>
-          </CardContent>
-        </Card>
+          </div>
+          <Button onClick={startBlank}>
+            Start blank
+            <ArrowRight className="ml-1 h-4 w-4" />
+          </Button>
+        </div>
 
         {query.isLoading ? (
           <div className="p-6">
@@ -109,20 +105,20 @@ const AutomationTemplatePickerContent: React.FC = () => {
               </h2>
               <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
                 {items.map((template) => (
-                  <Card
+                  <div
                     key={template.id}
-                    className="flex h-full cursor-pointer flex-col transition-colors hover:border-primary"
+                    className="group relative flex h-full cursor-pointer flex-col overflow-hidden rounded-[var(--d-card-r)] border border-border/70 bg-gradient-to-b from-surface-2 to-surface p-[var(--d-pad)] shadow-[0_1px_2px_hsl(var(--foreground)/0.04),0_10px_30px_-14px_hsl(var(--foreground)/0.12)] transition-all duration-200 hover:-translate-y-0.5 hover:border-primary/40 hover:shadow-xl"
                     onClick={() => openTemplate(template)}
                   >
-                    <CardHeader className="flex-row items-start gap-3 space-y-0">
+                    <div className="flex items-start gap-3">
                       <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary">
                         <DynamicIcon name={template.icon} className="h-5 w-5" />
                       </div>
-                      <CardTitle className="text-base leading-snug">
+                      <h3 className="text-base font-semibold leading-snug text-foreground">
                         {template.name}
-                      </CardTitle>
-                    </CardHeader>
-                    <CardContent className="flex flex-1 flex-col justify-between gap-3">
+                      </h3>
+                    </div>
+                    <div className="mt-3 flex flex-1 flex-col justify-between gap-3">
                       <p className="text-sm text-muted-foreground">
                         {template.description}
                       </p>
@@ -130,13 +126,13 @@ const AutomationTemplatePickerContent: React.FC = () => {
                         <Badge variant="secondary" className="font-normal">
                           {template.ownerPluginId}
                         </Badge>
-                        <span className="flex items-center text-sm font-medium text-primary">
+                        <span className="flex items-center text-sm font-medium text-primary transition-colors group-hover:text-primary">
                           Use template
-                          <ArrowRight className="ml-1 h-4 w-4" />
+                          <ArrowRight className="ml-1 h-4 w-4 transition-transform group-hover:translate-x-0.5" />
                         </span>
                       </div>
-                    </CardContent>
-                  </Card>
+                    </div>
+                  </div>
                 ))}
               </div>
             </section>

package/src/pages/RunDetailPage.tsx

@@ -37,14 +37,27 @@ import {
   Alert,
   AlertTitle,
   AlertDescription,
+  cn,
 } from "@checkstack/ui";
 import { resolveRoute } from "@checkstack/common";
 import { formatDistanceToNow } from "date-fns";
+import {
+  RunStatusPill,
+  RUN_STATUS_TONE,
+  RUN_TONE_STYLES,
+} from "./run-status-pill";
+import { formatDuration } from "./run-duration";
 
 const noop = (): void => {
   return;
 };
 
+/**
+ * Poll interval for a live (`running`/`waiting`) run. Polling stops the moment
+ * the run reaches a terminal status, so a finished run makes no further calls.
+ */
+const RUN_POLL_INTERVAL_MS = 2000;
+
 const STEP_STATUS_ICON: Record<StepStatus, React.ComponentType<{ className?: string }>> = {
   pending: Clock,
   running: CircleDot,
@@ -54,26 +67,29 @@ const STEP_STATUS_ICON: Record<StepStatus, React.ComponentType<{ className?: str
   waiting: Hourglass,
 };
 
+// Step status icons carry the signal via shape + the status triad hue (never
+// hue alone): terminal outcomes map to the colorblind-safe status colors, while
+// in-flight/neutral lifecycle states stay muted/primary.
 const STEP_STATUS_COLOR: Record<StepStatus, string> = {
   pending: "text-muted-foreground",
   running: "text-primary",
-  success: "text-emerald-500",
-  failed: "text-destructive",
+  success: "text-status-ok",
+  failed: "text-status-down",
   skipped: "text-muted-foreground",
-  waiting: "text-amber-500",
+  waiting: "text-status-warn",
 };
 
-const RUN_STATUS_VARIANT: Record<
-  RunStatus,
-  "default" | "secondary" | "outline" | "destructive" | "success" | "warning"
-> = {
-  pending: "outline",
-  running: "secondary",
-  waiting: "warning",
-  success: "success",
-  failed: "destructive",
-  cancelled: "outline",
-  skipped: "outline",
+// Left status-accent for each step, mirroring STEP_STATUS_COLOR's tone intent
+// so a failed/waiting step reads down the timeline's left edge by position +
+// hue, not the icon alone. Neutral lifecycle states stay muted. Spelled out as
+// full literal strings so Tailwind's JIT keeps them.
+const STEP_STATUS_ACCENT: Record<StepStatus, string> = {
+  pending: "bg-muted-foreground/40",
+  running: "bg-primary",
+  success: "bg-status-ok",
+  failed: "bg-status-down",
+  skipped: "bg-muted-foreground/40",
+  waiting: "bg-status-warn",
 };
 
 /**
@@ -103,9 +119,24 @@ const RunDetailContent: React.FC = () => {
 
   const query = client.getRun.useQuery(
     { id: runId ?? "" },
-    { enabled: Boolean(runId) },
+    {
+      enabled: Boolean(runId),
+      // Live runs only: poll every 2s while the run is `running`/`waiting` so a
+      // user watching an execution sees steps progress without a manual reload.
+      // Returning `false` on a terminal status stops the polling entirely.
+      refetchInterval: (query) => {
+        const status = query.state.data?.run.status;
+        return status === "running" || status === "waiting"
+          ? RUN_POLL_INTERVAL_MS
+          : false;
+      },
+    },
   );
 
+  const isLive =
+    query.data?.run.status === "running" ||
+    query.data?.run.status === "waiting";
+
   const cancelMutation = client.cancelRun.useMutation();
 
   if (!automationId || !runId) {
@@ -133,6 +164,12 @@ const RunDetailContent: React.FC = () => {
       allowed={allowed}
       actions={
         <div className="flex items-center gap-2">
+          {isLive && (
+            <span className="flex items-center gap-1.5 text-xs font-medium text-primary">
+              <CircleDot className="h-3.5 w-3.5" />
+              Live
+            </span>
+          )}
           <Link
             to={resolveRoute(automationRoutes.routes.runs, { automationId })}
           >
@@ -219,7 +256,7 @@ const RunDetailContent: React.FC = () => {
                   query.data.artifacts.map((artifact) => (
                     <details
                       key={artifact.id}
-                      className="rounded border border-border bg-card"
+                      className="rounded border border-border bg-surface-inset"
                     >
                       <summary className="flex cursor-pointer items-center justify-between px-2 py-1 text-xs">
                         <Badge variant="outline" className="font-mono">
@@ -248,13 +285,27 @@ const RunDetailContent: React.FC = () => {
 
 const RunHeader: React.FC<{
   run: { status: RunStatus; startedAt: Date; finishedAt?: Date };
-}> = ({ run }) => (
-  <Card>
-    <CardContent className="flex flex-wrap items-center gap-4 p-4">
-      <Badge variant={RUN_STATUS_VARIANT[run.status]} className="capitalize">
-        {run.status}
-      </Badge>
-      <div className="flex flex-col text-xs text-muted-foreground">
+}> = ({ run }) => {
+  const accent = RUN_TONE_STYLES[RUN_STATUS_TONE[run.status]].accent;
+  const duration = formatDuration(run.startedAt, run.finishedAt);
+
+  return (
+    <div className="relative overflow-hidden rounded-[var(--d-card-r)] border border-border/70 bg-gradient-to-b from-surface-2 to-surface p-[var(--d-pad)] shadow-[0_1px_2px_hsl(var(--foreground)/0.04),0_10px_30px_-14px_hsl(var(--foreground)/0.12)]">
+      {/* Status accent stripe, matching the run-status pill's tone. */}
+      <span
+        className={cn("absolute inset-y-0 left-0 w-1", accent)}
+        aria-hidden
+      />
+      <div className="flex items-start justify-between gap-4 pl-2">
+        <div>
+          <p className="text-3xl font-bold leading-none tabular-nums text-foreground">
+            {duration}
+          </p>
+          <p className="mt-1 text-xs text-muted-foreground">duration</p>
+        </div>
+        <RunStatusPill status={run.status} />
+      </div>
+      <div className="mt-4 flex flex-col gap-0.5 pl-2 text-xs text-muted-foreground">
         <span>
           Started{" "}
           {formatDistanceToNow(new Date(run.startedAt), { addSuffix: true })}
@@ -266,9 +317,9 @@ const RunHeader: React.FC<{
           </span>
         )}
       </div>
-    </CardContent>
-  </Card>
-);
+    </div>
+  );
+};
 
 const StepRow: React.FC<{
   step: {
@@ -285,11 +336,17 @@ const StepRow: React.FC<{
 }> = ({ step }) => {
   const Icon = STEP_STATUS_ICON[step.status];
   const colorClass = STEP_STATUS_COLOR[step.status];
+  const accentClass = STEP_STATUS_ACCENT[step.status];
 
   return (
-    <div className="rounded border border-border bg-card">
-      <div className="flex items-start gap-2 p-2">
-        <Icon className={`mt-0.5 h-4 w-4 shrink-0 ${colorClass}`} />
+    <div className="relative overflow-hidden rounded-[var(--d-card-r)] border border-border/70 bg-gradient-to-b from-surface-2 to-surface">
+      {/* Step status accent: failed/waiting read down the left edge by hue. */}
+      <span
+        className={cn("absolute inset-y-0 left-0 w-1", accentClass)}
+        aria-hidden
+      />
+      <div className="flex items-start gap-2 p-2 pl-4">
+        <Icon className={cn("mt-0.5 h-4 w-4 shrink-0", colorClass)} />
         <div className="flex-1 min-w-0">
           <div className="flex flex-wrap items-center gap-2">
             <code className="truncate font-mono text-xs">
@@ -317,11 +374,11 @@ const StepRow: React.FC<{
         </div>
       </div>
       {step.resultPayload && Object.keys(step.resultPayload).length > 0 && (
-        <details className="border-t border-border">
-          <summary className="cursor-pointer px-2 py-1 text-[10px] text-muted-foreground">
+        <details className="border-t border-border/70">
+          <summary className="cursor-pointer px-2 py-1 pl-4 text-[10px] text-muted-foreground">
             Result payload
           </summary>
-          <pre className="overflow-x-auto p-2 text-xs">
+          <pre className="overflow-x-auto p-2 pl-4 text-xs">
             {JSON.stringify(step.resultPayload, null, 2)}
           </pre>
         </details>