PaperClipAI/packages/paperclip-runner/devtools/issue-thread/src/IssueHeader.tsx

import { useEffect, useRef, useState } from "react";

import type { Phase7IssueThreadSnapshot } from "../../../src/issue-thread/types";
import { Chip, PriorityIcon, StatusBadge } from "./primitives";

/**
 * Sticky issue header (contract §1 and §2). The three identity chips are never
 * hidden by scroll, mode is data rather than styling, and on mobile Stop stays
 * outside the overflow menu whenever a turn is active.
 */

export interface IssueHeaderProps {
  snapshot: Phase7IssueThreadSnapshot;
  scenarios: string[];
  /** `chat` is the clean room: no preset scenario, no recording to replay. */
  surface?: "issue" | "chat";
  /** Clean-room tenant token, rendered so identity rotation is visible. */
  cleanRoomToken?: string | null;
  onNewChat?: () => void;
  evidenceOpen: boolean;
  denialCount: number;
  segment: "thread" | "evidence";
  onToggleEvidence: () => void;
  onSelectScenario: (scenario: string) => void;
  onReplay: () => void;
  onReset: () => void;
  onStop: () => void;
  onSelectSegment: (segment: "thread" | "evidence") => void;
}

export function IssueHeader(props: IssueHeaderProps) {
  const {
    snapshot,
    scenarios,
    surface = "issue",
    cleanRoomToken = null,
    onNewChat,
    evidenceOpen,
    denialCount,
    segment,
    onToggleEvidence,
    onSelectScenario,
    onReplay,
    onReset,
    onStop,
    onSelectSegment,
  } = props;
  const chat = surface === "chat";
  const [menuOpen, setMenuOpen] = useState(false);
  const menuRef = useRef<HTMLDivElement | null>(null);
  const turnActive = snapshot.composer.state === "streaming" || snapshot.composer.state === "sending";

  useEffect(() => {
    if (!menuOpen) return;
    function onKeyDown(event: KeyboardEvent) {
      if (event.key === "Escape") setMenuOpen(false);
    }
    document.addEventListener("keydown", onKeyDown);
    return () => document.removeEventListener("keydown", onKeyDown);
  }, [menuOpen]);

  return (
    <header className="pit-header" data-session-mode={snapshot.mode}>
      <div className="pit-header-title-row">
        <span className="pit-identifier">{snapshot.issue.identifier}</span>
        <h1 className="pit-title">{snapshot.issue.title}</h1>
        <StatusBadge status={snapshot.issue.status} />
        <PriorityIcon priority={snapshot.issue.priority} />
        {snapshot.issue.assignee !== null ? (
          <span className="pit-assignee">{snapshot.issue.assignee}</span>
        ) : null}
      </div>

      <div className="pit-chip-row" data-testid="identity-chips">
        <Chip tone={snapshot.mode === "live" ? "live" : undefined} testId="agent-chip">
          {snapshot.identity.agentLabel}
          {snapshot.identity.replaySource !== null
            ? ` · ${snapshot.identity.replaySource} source`
            : ""}
        </Chip>
        <Chip testId="runner-chip">
          <span
            className="pit-process-dot"
            data-attached={snapshot.identity.runnerAttached}
            aria-hidden="true"
          />
          {snapshot.identity.runnerLabel}
          <span className="pit-visually-hidden">
            {snapshot.identity.runnerAttached ? "attached" : "detached"}
          </span>
        </Chip>
        <Chip tone="mock" title={snapshot.identity.controlPlaneTooltip} testId="control-plane-chip">
          {snapshot.identity.controlPlaneLabel}
        </Chip>
        {chat && cleanRoomToken !== null ? (
          <Chip tone="accent" testId="clean-room-identity">
            Clean room {cleanRoomToken}
          </Chip>
        ) : null}
      </div>

      <div className="pit-header-controls">
        <span className="pit-run-state">{snapshot.issue.runState}</span>

        {chat ? (
          <button
            type="button"
            className="pit-button"
            onClick={onNewChat}
            data-testid="new-chat-button"
          >
            New chat
          </button>
        ) : (
          <>
            <label className="pit-visually-hidden" htmlFor="scenario-picker">
              Scenario
            </label>
            <select
              className="pit-select pit-desktop-only"
              id="scenario-picker"
              value={snapshot.issue.fixtureProfile}
              onChange={(event) => onSelectScenario(event.target.value)}
              data-testid="scenario-picker"
            >
              {scenarios.map((scenario) => (
                <option key={scenario} value={scenario}>
                  {scenario}
                </option>
              ))}
            </select>

            <button
              type="button"
              className="pit-button pit-desktop-only"
              onClick={onReplay}
              data-testid="replay-button"
            >
              Replay
            </button>
          </>
        )}
        <button
          type="button"
          className="pit-button pit-desktop-only"
          data-variant="destructive"
          onClick={onReset}
          data-testid="reset-button"
        >
          Reset
        </button>
        <button
          type="button"
          className="pit-button"
          data-variant="destructive"
          onClick={onStop}
          disabled={!turnActive}
          data-testid="stop-button"
        >
          Stop
        </button>

        <div className="pit-menu pit-mobile-only" ref={menuRef}>
          <button
            type="button"
            className="pit-button"
            aria-expanded={menuOpen}
            aria-haspopup="menu"
            onClick={() => setMenuOpen((current) => !current)}
            data-testid="overflow-menu-button"
          >
            <span aria-hidden="true">⋯</span>
            <span className="pit-visually-hidden">More actions</span>
          </button>
          {menuOpen ? (
            <div className="pit-menu-list" role="menu" data-testid="overflow-menu">
              {chat ? null : (
                <>
                  <label className="pit-menu-item" htmlFor="scenario-picker-mobile">
                    Scenario
                    <select
                      className="pit-select"
                      id="scenario-picker-mobile"
                      value={snapshot.issue.fixtureProfile}
                      onChange={(event) => {
                        setMenuOpen(false);
                        onSelectScenario(event.target.value);
                      }}
                    >
                      {scenarios.map((scenario) => (
                        <option key={scenario} value={scenario}>
                          {scenario}
                        </option>
                      ))}
                    </select>
                  </label>
                  <button
                    type="button"
                    role="menuitem"
                    className="pit-menu-item"
                    onClick={() => {
                      setMenuOpen(false);
                      onReplay();
                    }}
                  >
                    Replay
                  </button>
                </>
              )}
              <button
                type="button"
                role="menuitem"
                className="pit-menu-item"
                onClick={() => {
                  setMenuOpen(false);
                  onReset();
                }}
              >
                {chat ? "Reset chat" : "Reset scenario"}
              </button>
            </div>
          ) : null}
        </div>

        <button
          type="button"
          className="pit-button pit-desktop-only"
          aria-expanded={evidenceOpen}
          onClick={onToggleEvidence}
          data-testid="evidence-toggle"
        >
          Evidence
          {denialCount > 0 ? ` (${denialCount})` : ""}
        </button>
      </div>

      <div className="pit-segmented" role="tablist" aria-label="Thread or evidence">
        <button
          type="button"
          role="tab"
          className="pit-segment"
          aria-selected={segment === "thread"}
          onClick={() => onSelectSegment("thread")}
          data-testid="segment-thread"
        >
          Thread
        </button>
        <button
          type="button"
          role="tab"
          className="pit-segment"
          aria-selected={segment === "evidence"}
          onClick={() => onSelectSegment("evidence")}
          data-testid="segment-evidence"
        >
          Evidence
          {denialCount > 0 ? (
            <span className="pit-segment-badge" data-testid="segment-denial-badge">
              {denialCount}
            </span>
          ) : null}
        </button>
      </div>
    </header>
  );
}