Function TaskCard

apps/vis/web/src/components/tasks/TasksTab.tsx:70–186

({ sessionId, entry }: { sessionId: string; entry: BackgroundTaskEntry })

}

function TaskCard({ sessionId, entry }: { sessionId: string; entry: BackgroundTaskEntry }) {
  const { task } = entry;
  const [showLog, setShowLog] = useState(false);
  const [showRaw, setShowRaw] = useState(false);

  const duration =
    task.endedAt !== null && task.endedAt !== undefined
      ? task.endedAt - task.startedAt
      : null;

  return (
    <div className="border border-border bg-surface-0">
      {/* Header line */}
      <div className="flex flex-wrap items-center gap-2 border-b border-border px-3 py-2">
        <Pill tone={kindTone(task.kind)} variant="outline">{task.kind}</Pill>
        <Pill tone={STATUS_TONE[task.status]}>{task.status}</Pill>
        <span className="font-mono text-[12px] text-fg-0">{task.taskId}</span>
        <CopyButton value={task.taskId} />
        {entry.agentId !== 'main' ? (
          <Pill tone="subagent" variant="outline" title="the agent that spawned this task">
            {entry.agentId}
          </Pill>
        ) : null}
        {task.detached === false ? (
          <Pill tone="warning" variant="outline">foreground</Pill>
        ) : null}
        <span className="ml-auto font-mono text-[11px] text-fg-3 tabular" title={formatAbsoluteTime(task.startedAt)}>
          started {formatRelativeTime(task.startedAt)}
        </span>
      </div>

      {/* Body fields */}
      <div className="grid grid-cols-1 gap-x-6 gap-y-1 px-3 py-2 md:grid-cols-2">
        <Field label="description">{task.description || <Dim>(none)</Dim>}</Field>
        {task.kind === 'process' ? (
          <>
            <Field label="command"><code className="break-all">{task.command}</code></Field>
            <Field label="pid">{task.pid}</Field>
            <Field label="exitCode">
              {task.exitCode ?? <Dim>(running)</Dim>}
            </Field>
          </>
        ) : null}
        {task.kind === 'agent' ? (
          <>
            <Field label="agentId">
              {task.agentId ? (
                <Link
                  to={`/sessions/${sessionId}/agents/${task.agentId}`}
                  className="text-[var(--color-cat-subagent)] underline-offset-2 hover:underline"
                  title="open this subagent's wire"
                >
                  {task.agentId} →
                </Link>
              ) : (
                <Dim>(none)</Dim>
              )}
            </Field>