IdeA/frontend/src/features/terminals/ResumeConversationPopup.tsx

/**
 * Resume-conversation popup (T7). Shown for an agent cell whose PTY session is
 * dead but which carries a persisted `conversationId`, **before** the automatic
 * Resume launch fires. It lets the user choose between resuming the previous CLI
 * conversation or starting a fresh one.
 *
 * Pure presentation: it receives the status + best-effort details + the two
 * action callbacks. It never calls a gateway / `invoke()` itself — the parent
 * (`LayoutGrid`'s `LeafView`) wires it to the {@link AgentGateway} ports. The
 * status ("en cours" / "clot") is derived **only** from `agentWasRunning` (the
 * universal close-time flag), never from the inspector — a missing inspector
 * just hides the enriched topic/token lines (degraded mode).
 */

import type { ConversationDetails } from "@/ports";

interface ResumeConversationPopupProps {
  /**
   * Whether the agent process was running when the cell was last closed
   * (`agentWasRunning`). `true` ⇒ "en cours"; `false`/absent ⇒ "clot". This is
   * the universal status; it is NOT derived from the inspector.
   */
  agentWasRunning: boolean;
  /**
   * Best-effort enriched details (last topic + token indicator). `null` while
   * loading; an empty object once loaded with no details available (degraded
   * mode: only the status + the resume affordance are shown).
   */
  details: ConversationDetails | null;
  /** Resume the previous conversation (keeps the conversation id ⇒ Resume). */
  onResume: () => void;
  /** Start a fresh conversation (clears the conversation id ⇒ Assign). */
  onNewConversation: () => void;
}

export function ResumeConversationPopup({
  agentWasRunning,
  details,
  onResume,
  onNewConversation,
}: ResumeConversationPopupProps) {
  const statusLabel = agentWasRunning ? "en cours" : "clot";

  return (
    <div
      data-testid="resume-conversation-popup"
      role="dialog"
      aria-label="Reprise de conversation"
      style={{
        position: "absolute",
        inset: 0,
        zIndex: 5,
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        background: "rgba(0, 0, 0, 0.55)",
      }}
    >
      <div
        style={{
          minWidth: 260,
          maxWidth: 360,
          padding: "16px 18px",
          background: "var(--color-surface, #1e1e1e)",
          color: "var(--color-content, #e0e0e0)",
          border: "1px solid var(--color-border, #3a3a3a)",
          borderRadius: 6,
          boxShadow: "0 8px 24px rgba(0, 0, 0, 0.5)",
          fontSize: 13,
        }}
      >
        <p style={{ margin: "0 0 8px", fontWeight: 600 }}>
          Reprise de conversation
        </p>

        <p style={{ margin: "0 0 6px" }}>
          Statut :{" "}
          <span data-testid="resume-status">{statusLabel}</span>
        </p>

        {details?.lastTopic && (
          <p style={{ margin: "0 0 6px" }} data-testid="resume-last-topic">
            Dernier sujet : {details.lastTopic}
          </p>
        )}

        {details?.tokenCount !== undefined && (
          <p style={{ margin: "0 0 10px" }} data-testid="resume-token-count">
            Tokens : {details.tokenCount}
          </p>
        )}

        <div style={{ display: "flex", gap: 8, marginTop: 12 }}>
          <button
            type="button"
            onClick={onResume}
            style={{
              flex: 1,
              padding: "6px 10px",
              cursor: "pointer",
            }}
          >
            Reprendre la dernière conversation
          </button>
          <button
            type="button"
            onClick={onNewConversation}
            style={{
              flex: 1,
              padding: "6px 10px",
              cursor: "pointer",
            }}
          >
            Nouvelle conversation
          </button>
        </div>
      </div>
    </div>
  );
}