1
import type { RunSummary } from "@/contracts";
2
import { Clock, GitBranch, GitCommitHorizontal } from "lucide-react";
3
import { Link } from "react-router-dom";
4
import { StatusPill } from "@/client/components/status-pill";
5
import { Badge } from "@/client/components/ui";
6
import { TRIGGER_TYPE_LABELS, formatDuration, formatRelativeTime } from "@/client/lib";
7
 
8
export const RunRow = ({ run }: { run: RunSummary }) => {
9
  const isTerminal = run.status === "passed" || run.status === "failed" || run.status === "canceled";
10
  const commitDisplay = run.commitSha ? run.commitSha.slice(0, 7) : "\u2014";
11
 
12
  return (
13
    <Link
14
      to={`/app/runs/${run.id}`}
15
      className="group flex items-center gap-4 rounded-2xl border border-zinc-800/60 bg-zinc-900/50 p-4 hover:border-zinc-700/60 hover:bg-zinc-900/80"
16
    >
17
      <StatusPill status={run.status} />
18
19
      <div className="min-w-0 flex-1">
20
        <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-sm">
21
          <span className="inline-flex items-center gap-1.5 text-zinc-200">
22
            <GitBranch className="h-3.5 w-3.5 text-zinc-500" />
23
            {run.branch}
24
          </span>
25
          <span className="inline-flex items-center gap-1.5 font-mono text-xs text-zinc-500">
26
            <GitCommitHorizontal className="h-3.5 w-3.5" />
27
            {commitDisplay}
28
          </span>
29
          <Badge>{TRIGGER_TYPE_LABELS[run.triggerType] ?? run.triggerType}</Badge>
30
        </div>
31
        <div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-zinc-500">
32
          <span className="inline-flex items-center gap-1">
33
            <Clock className="h-3 w-3" />
34
            {formatRelativeTime(run.queuedAt)}
35
          </span>
36
          {isTerminal && run.startedAt && run.finishedAt ? (
37
            <span>{formatDuration(run.startedAt, run.finishedAt)}</span>
38
          ) : null}
39
        </div>
40
      </div>
41
    </Link>
42
  );
43
};