Function CronCard

apps/vis/web/src/components/tasks/CronTab.tsx:48–87

({ job }: { job: CronTask })

}

function CronCard({ job }: { job: CronTask }) {
  // `recurring` is undefined/true → recurring by convention; false → one-shot.
  const oneShot = job.recurring === false;
  return (
    <div className="border border-border bg-surface-0">
      <div className="flex flex-wrap items-center gap-2 border-b border-border px-3 py-2">
        <Pill tone={oneShot ? 'ephemeral' : 'lifecycle'} variant="outline">
          {oneShot ? 'one-shot' : 'recurring'}
        </Pill>
        <code className="font-mono text-[12px] text-fg-0">{job.cron}</code>
        <span className="font-mono text-[11px] text-fg-3">{job.id}</span>
        <CopyButton value={job.id} />
        <span
          className="ml-auto font-mono text-[11px] text-fg-3 tabular"
          title={formatAbsoluteTime(job.createdAt)}
        >
          created {formatRelativeTime(job.createdAt)}
        </span>
      </div>
      <div className="px-3 py-2">
        <div className="text-[10px] uppercase tracking-[0.1em] text-fg-3">prompt</div>
        <div className="mt-1 whitespace-pre-wrap break-words font-mono text-[12px] text-fg-1">
          {job.prompt}
        </div>
      </div>
      <div className="grid grid-cols-1 gap-x-6 gap-y-1 border-t border-border px-3 py-2 md:grid-cols-2">
        <Field label="lastFiredAt">
          {job.lastFiredAt === undefined ? (
            <span className="text-fg-3">(never fired)</span>
          ) : (
            <span title={formatAbsoluteTime(job.lastFiredAt)}>
              {formatAbsoluteTime(job.lastFiredAt)} ({formatRelativeTime(job.lastFiredAt)})
            </span>
          )}
        </Field>
        <Field label="createdAt">{formatAbsoluteTime(job.createdAt)}</Field>
      </div>
    </div>
  );
}

function Field({ label, children }: { label: string; children: import('react').ReactNode }) {
  return (