Function EngineRow

dashboard/code-diagnostics/src/CodeDiagnostics.tsx:178–281

({
  engine,
  busy,
  onToggle,
  onConfigure,
  onRefresh,
}: {
  engine: EngineStatus;
  busy: boolean;
  onToggle: (enabled: boolean) => void;
  onConfigure: (commandOverride: string | null) => void;
  onRefresh: () => void;
})

}

function EngineRow({
  engine,
  busy,
  onToggle,
  onConfigure,
  onRefresh,
}: {
  engine: EngineStatus;
  busy: boolean;
  onToggle: (enabled: boolean) => void;
  onConfigure: (commandOverride: string | null) => void;
  onRefresh: () => void;
}) {
  const [expanded, setExpanded] = useState(false);
  const [commandDraft, setCommandDraft] = useState(engine.command);
  const hasOverride = engine.command !== engine.default_command;

  useEffect(() => {
    setCommandDraft(engine.command);
  }, [engine.command]);

  return (
    <div className="tdcd-engine-row">
      <label className="tdcd-toggle">
        <input
          type="checkbox"
          checked={engine.enabled}
          disabled={busy}
          onChange={(event) => onToggle(event.currentTarget.checked)}
        />
        <span>{engine.language}</span>
      </label>
      <code>{engine.command}</code>
      <Badge className={cn("tdcd-state", `tdcd-state-${engine.state}`)}>
        {STATE_LABELS[engine.state]}
      </Badge>
      <span className="tdcd-engine-time">
        {engine.last_diagnostic_update ? timeAgo(engine.last_diagnostic_update) : "Never"}
      </span>
      <Button size="sm" onClick={() => setExpanded((value) => !value)} disabled={busy}>
        {engine.state === "unavailable" ? "Setup" : "Configure"}
      </Button>
      <Button size="sm" onClick={onRefresh} disabled={busy || !engine.enabled}>
        Refresh
      </Button>
      {engine.last_error && <p className="tdcd-engine-error">{engine.last_error}</p>}
      {expanded && (
        <div className="tdcd-engine-setup">
          <div className="tdcd-engine-setup-copy">
            <span>Default</span>
            <code>{engine.default_command}</code>
            {engine.args.length > 0 && <code>{engine.args.join(" ")}</code>}
          </div>
          {engine.install_options.length > 0 && (
            <div className="tdcd-install-options">
              {engine.install_options.map((option) => (
                <div key={`${engine.language}-${option.label}`} className="tdcd-install-option">
                  <span>{option.label}</span>