import { ExternalLinkIcon, NetworkIcon } from "lucide-react";import { type ReactElement } from "react"; import { cn } from "~/lib/utils";import {  formatWorkflowDuration,  formatWorkflowTokens,  isRemoteWorkflowRun,  type WorkflowRun,  type WorkflowRunAgent,  workflowRunTitle,} from "~/workflow-logic";import { Button } from "../ui/button";import {  AgentRowContent,  PhaseHeader,  WorkflowStatusChip,  agentRollupLabel,  safeWorkflowSessionUrl,} from "./workflowUi"; const MAX_CARD_AGENT_ROWS = 8; function agentRecency(agent: WorkflowRunAgent): number {  return agent.lastProgressAt ?? agent.startedAt ?? agent.queuedAt ?? 0;} /** Choose which agent indices survive the card cap: running+error first, then most recent. */function selectVisibleAgentIndices(agents: WorkflowRunAgent[], cap: number): Set<number> {  const prioritized = [...agents].sort((a, b) => {    const aUrgent = a.status === "running" || a.status === "error" ? 0 : 1;    const bUrgent = b.status === "running" || b.status === "error" ? 0 : 1;    if (aUrgent !== bUrgent) {      return aUrgent - bUrgent;    }    return agentRecency(b) - agentRecency(a);  });  return new Set(prioritized.slice(0, cap).map((agent) => agent.index));} export function WorkflowRunCard(props: {  workflowRun: WorkflowRun;  onOpenDetails?: (() => void) | undefined;  onStop?: (() => void) | undefined;}): ReactElement {  const { workflowRun: run, onOpenDetails, onStop } = props;  const title = workflowRunTitle(run);  const remote = isRemoteWorkflowRun(run);  const tokens = run.usage?.totalTokens;  const durationMs = run.usage?.durationMs;   const allAgents = run.phases.flatMap((phase) => phase.agents);  const overCap = allAgents.length > MAX_CARD_AGENT_ROWS;  const visibleIndices = overCap ? selectVisibleAgentIndices(allAgents, MAX_CARD_AGENT_ROWS) : null;  const hiddenCount = overCap ? allAgents.length - MAX_CARD_AGENT_ROWS : 0;   return (    <div className="mt-2 rounded-lg border border-border/80 bg-card/45 p-2.5">      <div className="flex items-center gap-2">        <NetworkIcon className="size-3.5 shrink-0 text-muted-foreground" />        <span className="truncate font-medium text-[13px] text-foreground">{title}</span>        <WorkflowStatusChip status={run.status} />        <div className="ml-auto flex items-center gap-2">          <div className="flex items-center gap-2 text-[11px] text-muted-foreground/70 tabular-nums">            <span>{agentRollupLabel(run.agentCounts)}</span>            {tokens !== undefined && <span>{formatWorkflowTokens(tokens)}</span>}            {durationMs !== undefined && <span>{formatWorkflowDuration(durationMs)}</span>}          </div>          {(onStop || onOpenDetails) && (            <div className="flex items-center gap-1.5">              {onStop && (                <Button type="button" size="xs" variant="outline" onClick={onStop}>                  Stop                </Button>              )}              {onOpenDetails && (                <Button type="button" size="xs" variant="outline" onClick={onOpenDetails}>                  Details                </Button>              )}            </div>          )}        </div>      </div>       {remote ? (        <RemoteRunBody run={run} />      ) : allAgents.length > 0 ? (        <div className="mt-1 space-y-px">          {run.phases.map((phase) => {            const rows = phase.agents.filter(              (agent) => visibleIndices === null || visibleIndices.has(agent.index),            );            if (rows.length === 0) {              return null;            }            return (              <div key={`${run.taskId}:${phase.index}`}>                <PhaseHeader phase={phase} />                {rows.map((agent) => (                  <div key={`${run.taskId}:${agent.index}`} className="px-0.5 py-0.5">                    <AgentRowContent agent={agent} />                  </div>                ))}              </div>            );          })}          {hiddenCount > 0 && (            <button              type="button"              disabled={onOpenDetails === undefined}              onClick={onOpenDetails}              className={cn(                "w-full px-0.5 py-0.5 text-left text-[12px] text-muted-foreground/60 leading-5",                onOpenDetails &&                  "cursor-pointer rounded-md hover:bg-accent/20 hover:text-muted-foreground",              )}            >              +{hiddenCount} more agents — open details            </button>          )}        </div>      ) : null}       {run.handles?.warning !== undefined && (        <p className="mt-1.5 text-[11px] text-warning">{run.handles.warning}</p>      )}    </div>  );} function RemoteRunBody({ run }: { run: WorkflowRun }): ReactElement {  const sessionUrl = safeWorkflowSessionUrl(run.handles?.sessionUrl);  if (sessionUrl === undefined) {    return (      <p className="mt-1.5 px-0.5 text-[12px] text-muted-foreground/70 leading-5">        Running in the cloud      </p>    );  }  return (    <a      href={sessionUrl}      target="_blank"      rel="noopener noreferrer"      className="mt-1.5 flex items-center gap-1.5 rounded-md px-0.5 py-0.5 text-[12px] text-foreground/82 leading-5 hover:bg-accent/20 hover:text-foreground"    >      <ExternalLinkIcon className="size-3.5 shrink-0 text-muted-foreground" />      Running in the cloud — open session    </a>  );}