@checkstack/automation-frontend 0.7.1 → 0.9.0

package/src/pages/RunsPage.tsx

@@ -19,7 +19,6 @@ import {
   CardContent,
   CardHeader,
   CardTitle,
-  Badge,
   Button,
   Table,
   TableHeader,
@@ -30,22 +29,13 @@ import {
   LoadingSpinner,
   QueryErrorState,
   EmptyState,
+  ResponsiveTable,
+  MobileCardList,
 } from "@checkstack/ui";
 import { resolveRoute } from "@checkstack/common";
 import { formatDistanceToNow } from "date-fns";
-
-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",
-};
+import { RunStatusPill } from "./run-status-pill";
+import { formatDuration } from "./run-duration";
 
 /**
  * Run history for a single automation. Status filter pinned to the top;
@@ -87,7 +77,7 @@ const RunsPageContent: React.FC = () => {
     <PageLayout
       title={
         automationQuery.data
-          ? `${automationQuery.data.name} — runs`
+          ? `${automationQuery.data.name} - runs`
           : "Run history"
       }
       subtitle="Past executions of this automation"
@@ -152,65 +142,107 @@ const RunsPageContent: React.FC = () => {
               description="Manually trigger the automation from the edit page to generate a run."
             />
           ) : (
-            <Table>
-              <TableHeader>
-                <TableRow>
-                  <TableHead>Status</TableHead>
-                  <TableHead>Trigger</TableHead>
-                  <TableHead>Started</TableHead>
-                  <TableHead>Duration</TableHead>
-                  <TableHead className="w-24 text-right" />
-                </TableRow>
-              </TableHeader>
-              <TableBody>
+            <>
+              <ResponsiveTable>
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>Status</TableHead>
+                      <TableHead>Trigger</TableHead>
+                      <TableHead>Started</TableHead>
+                      <TableHead>Duration</TableHead>
+                      <TableHead className="w-24 text-right" />
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {runs.map((run) => (
+                      <TableRow key={run.id}>
+                        <TableCell>
+                          <RunStatusPill status={run.status} />
+                        </TableCell>
+                        <TableCell>
+                          <code className="font-mono text-xs">
+                            {run.triggerEventId || "manual"}
+                          </code>
+                        </TableCell>
+                        <TableCell>
+                          <span className="text-xs text-muted-foreground">
+                            {formatDistanceToNow(new Date(run.startedAt), {
+                              addSuffix: true,
+                            })}
+                          </span>
+                        </TableCell>
+                        <TableCell>
+                          <span className="text-xs text-muted-foreground">
+                            {formatDuration(run.startedAt, run.finishedAt)}
+                          </span>
+                        </TableCell>
+                        <TableCell className="text-right">
+                          {automationId && (
+                            <Link
+                              to={resolveRoute(
+                                automationRoutes.routes.runDetail,
+                                {
+                                  automationId,
+                                  runId: run.id,
+                                },
+                              )}
+                            >
+                              <Button variant="ghost" size="sm">
+                                Open
+                              </Button>
+                            </Link>
+                          )}
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </ResponsiveTable>
+
+              <MobileCardList className="p-4">
                 {runs.map((run) => (
-                  <TableRow key={run.id}>
-                    <TableCell>
-                      <Badge
-                        variant={RUN_STATUS_VARIANT[run.status] ?? "outline"}
-                        className="capitalize"
-                      >
-                        {run.status}
-                      </Badge>
-                    </TableCell>
-                    <TableCell>
-                      <code className="font-mono text-xs">
-                        {run.triggerEventId || "manual"}
-                      </code>
-                    </TableCell>
-                    <TableCell>
-                      <span className="text-xs text-muted-foreground">
-                        {formatDistanceToNow(new Date(run.startedAt), {
-                          addSuffix: true,
-                        })}
-                      </span>
-                    </TableCell>
-                    <TableCell>
-                      <span className="text-xs text-muted-foreground">
-                        {formatDuration(run.startedAt, run.finishedAt)}
-                      </span>
-                    </TableCell>
-                    <TableCell className="text-right">
+                  <div
+                    key={run.id}
+                    className="rounded-md border bg-surface p-4"
+                  >
+                    <div className="flex items-start justify-between gap-2">
+                      <RunStatusPill status={run.status} />
                       {automationId && (
                         <Link
-                          to={resolveRoute(
-                            automationRoutes.routes.runDetail,
-                            {
-                              automationId,
-                              runId: run.id,
-                            },
-                          )}
+                          to={resolveRoute(automationRoutes.routes.runDetail, {
+                            automationId,
+                            runId: run.id,
+                          })}
                         >
                           <Button variant="ghost" size="sm">
                             Open
                           </Button>
                         </Link>
                       )}
-                    </TableCell>
-                  </TableRow>
+                    </div>
+                    <div className="mt-2 flex flex-col gap-1 text-xs text-muted-foreground">
+                      <div className="flex items-center gap-1">
+                        <span>Trigger:</span>
+                        <code className="font-mono">
+                          {run.triggerEventId || "manual"}
+                        </code>
+                      </div>
+                      <div>
+                        Started{" "}
+                        {formatDistanceToNow(new Date(run.startedAt), {
+                          addSuffix: true,
+                        })}
+                      </div>
+                      <div>
+                        Duration:{" "}
+                        {formatDuration(run.startedAt, run.finishedAt)}
+                      </div>
+                    </div>
+                  </div>
                 ))}
-              </TableBody>
-            </Table>
+              </MobileCardList>
+            </>
           )}
         </CardContent>
       </Card>
@@ -218,16 +250,4 @@ const RunsPageContent: React.FC = () => {
   );
 };
 
-function formatDuration(
-  startedAt: Date | string,
-  finishedAt: Date | string | null | undefined,
-): string {
-  if (!finishedAt) return "—";
-  const ms =
-    new Date(finishedAt).getTime() - new Date(startedAt).getTime();
-  if (ms < 1000) return `${ms}ms`;
-  if (ms < 60_000) return `${(ms / 1000).toFixed(1)}s`;
-  return `${Math.round(ms / 60_000)}m`;
-}
-
 export const RunsPage = wrapInSuspense(RunsPageContent);

package/src/pages/run-duration.test.ts

@@ -0,0 +1,36 @@
+import { describe, expect, it } from "bun:test";
+import { formatDuration } from "./run-duration";
+
+describe("formatDuration", () => {
+  it("returns the placeholder when the run has not finished", () => {
+    expect(formatDuration("2026-01-01T00:00:00Z", null)).toBe("—");
+    expect(formatDuration("2026-01-01T00:00:00Z", undefined)).toBe("—");
+  });
+
+  it("reports sub-second durations in milliseconds", () => {
+    expect(
+      formatDuration("2026-01-01T00:00:00.000Z", "2026-01-01T00:00:00.450Z"),
+    ).toBe("450ms");
+  });
+
+  it("reports sub-minute durations as single-decimal seconds", () => {
+    expect(
+      formatDuration("2026-01-01T00:00:00.000Z", "2026-01-01T00:00:12.300Z"),
+    ).toBe("12.3s");
+  });
+
+  it("reports longer durations as rounded whole minutes", () => {
+    expect(
+      formatDuration("2026-01-01T00:00:00.000Z", "2026-01-01T00:02:30.000Z"),
+    ).toBe("3m");
+  });
+
+  it("accepts Date instances as well as strings", () => {
+    expect(
+      formatDuration(
+        new Date("2026-01-01T00:00:00.000Z"),
+        new Date("2026-01-01T00:00:05.000Z"),
+      ),
+    ).toBe("5.0s");
+  });
+});

package/src/pages/run-duration.ts

@@ -0,0 +1,18 @@
+/**
+ * Human-readable elapsed time between a run's start and finish.
+ *
+ * Returns an em-dash placeholder while the run has not finished yet. Below a
+ * second it reports raw milliseconds, below a minute a single-decimal seconds
+ * value, and otherwise whole minutes. Shared by the run history list and the
+ * run-detail hero so both surface the same figure.
+ */
+export function formatDuration(
+  startedAt: Date | string,
+  finishedAt: Date | string | null | undefined,
+): string {
+  if (!finishedAt) return "—";
+  const ms = new Date(finishedAt).getTime() - new Date(startedAt).getTime();
+  if (ms < 1000) return `${ms}ms`;
+  if (ms < 60_000) return `${(ms / 1000).toFixed(1)}s`;
+  return `${Math.round(ms / 60_000)}m`;
+}

package/src/pages/run-status-pill.tsx

@@ -0,0 +1,78 @@
+import React from "react";
+import { cn } from "@checkstack/ui";
+import type { RunStatus } from "@checkstack/automation-common";
+
+/**
+ * Colorblind-safe status tone for a run. Only the terminal health outcomes map
+ * to the status triad; in-flight and neutral lifecycle states (`pending`,
+ * `running`, `cancelled`, `skipped`) read as `unknown` so color is never the
+ * sole carrier of a "good vs bad" signal.
+ */
+export type RunStatusTone = "ok" | "warn" | "down" | "unknown";
+
+export const RUN_STATUS_TONE: Record<RunStatus, RunStatusTone> = {
+  pending: "unknown",
+  running: "unknown",
+  waiting: "warn",
+  success: "ok",
+  failed: "down",
+  cancelled: "unknown",
+  skipped: "unknown",
+};
+
+/**
+ * Per-tone pill + dot + left-accent classes. Spelled out as full literal
+ * strings (not interpolated) so Tailwind's JIT keeps them, driven by the
+ * colorblind-safe status triad. Status reads as hue + dot + text label, never
+ * color alone. The `accent` class drives the left status stripe on cards and
+ * timeline rows so the stripe always matches this pill.
+ */
+export const RUN_TONE_STYLES: Record<
+  RunStatusTone,
+  { pill: string; dot: string; accent: string }
+> = {
+  ok: {
+    pill: "bg-status-ok/10 text-status-ok",
+    dot: "bg-status-ok",
+    accent: "bg-status-ok",
+  },
+  warn: {
+    pill: "bg-status-warn/10 text-status-warn",
+    dot: "bg-status-warn",
+    accent: "bg-status-warn",
+  },
+  down: {
+    pill: "bg-status-down/10 text-status-down",
+    dot: "bg-status-down",
+    accent: "bg-status-down",
+  },
+  unknown: {
+    pill: "bg-status-unknown/10 text-status-unknown",
+    dot: "bg-status-unknown",
+    accent: "bg-status-unknown",
+  },
+};
+
+/**
+ * Multi-encoded run-status pill: a tinted chip carrying a status dot plus the
+ * run status word. The visible label keeps the raw `run.status` value so it
+ * matches the status filter buttons one-to-one.
+ */
+export const RunStatusPill: React.FC<{
+  status: RunStatus;
+  className?: string;
+}> = ({ status, className }) => {
+  const styles = RUN_TONE_STYLES[RUN_STATUS_TONE[status]];
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium capitalize",
+        styles.pill,
+        className,
+      )}
+    >
+      <span className={cn("size-1.5 rounded-full", styles.dot)} aria-hidden />
+      {status}
+    </span>
+  );
+};