Function CronJobCard

src/components/CronJobCard.tsx:289–715

({
  job,
  onToggle,
  onSavePrompt,
  onDelete,
  onRun,
}: CronJobCardProps)

}

export function CronJobCard({
  job,
  onToggle,
  onSavePrompt,
  onDelete,
  onRun,
}: CronJobCardProps) {
  const [expanded, setExpanded] = useState(false);
  const [isEditingPrompt, setIsEditingPrompt] = useState(false);
  const [draftPrompt, setDraftPrompt] = useState(job.detailsText?.trim() || "");
  const [isSavingPrompt, setIsSavingPrompt] = useState(false);

  const health = useMemo(() => getHealthMeta(job), [job]);
  const timing = useMemo(() => getTimeMeta(job), [job]);
  const StatusIcon = getStatusIcon(health.tone);
  const promptText = job.detailsText?.trim() || job.description || "";

  useEffect(() => {
    if (!isEditingPrompt) {
      setDraftPrompt(promptText);
    }
  }, [promptText, isEditingPrompt]);

  const handlePromptSave = async () => {
    const trimmedPrompt = draftPrompt.trim();
    if (!trimmedPrompt || trimmedPrompt === promptText) {
      setIsEditingPrompt(false);
      setDraftPrompt(promptText);
      return;
    }

    setIsSavingPrompt(true);
    try {
      await onSavePrompt(job.id, trimmedPrompt);
      setIsEditingPrompt(false);
    } finally {
      setIsSavingPrompt(false);
    }
  };

  return (
    <div
      style={{
        backgroundColor: "var(--card)",
        border: `1px solid ${job.hasIssue ? "color-mix(in srgb, var(--error) 22%, var(--border))" : "var(--border)"}`,
        borderRadius: "1rem",
        padding: "0.95rem",
        boxShadow: job.hasIssue ? "0 0 0 1px color-mix(in srgb, var(--error) 14%, transparent)" : "none",
        minHeight: "100%",
      }}
    >
      <div style={{ display: "flex", justifyContent: "space-between", gap: "0.85rem", alignItems: "flex-start" }}>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: "flex", alignItems: "center", gap: "0.45rem", flexWrap: "wrap" }}>
            <span style={{ fontSize: "1.25rem", lineHeight: 1 }}>{getAgentEmoji(job.agentId)}</span>
            <h3
              style={{
                fontSize: "1rem",