Function LiveTranscript

notfair-cmo/src/components/live-transcript.tsx:148–786

({
  projectSlug,
  agentSlug,
  agentDisplayName,
  threadId,
  sessionKey,
  initialEvents,
  initialByteOffset,
  composerDisabled = false,
  blockedReason,
  onPolled,
  autoKickoff = false,
  kickoffMessage,
  taskId,
  mcpCatalog,
}: Props)

const KICKOFF_FIRED = new Set<string>();

export function LiveTranscript({
  projectSlug,
  agentSlug,
  agentDisplayName,
  threadId,
  sessionKey,
  initialEvents,
  initialByteOffset,
  composerDisabled = false,
  blockedReason,
  onPolled,
  autoKickoff = false,
  kickoffMessage,
  taskId,
  mcpCatalog,
}: Props) {
  const router = useRouter();
  const [events, setEvents] = useState<TranscriptEvent[]>(initialEvents);
  const [byteOffset, setByteOffset] = useState(initialByteOffset);
  const [input, setInput] = useState("");
  const [sendingChat, setSendingChat] = useState(false);
  /**
   * Wallclock when the current turn started, in ms. Drives the "elapsed"
   * counter in WorkingStatus during the gap between hitting send and the
   * agent's first transcript event landing — without this, elapsed reflects
   * the *previous* turn's last event timestamp (often minutes/hours stale).
   * Cleared once the new user_message lands and rendering catches up.
   */
  const [turnStartedAt, setTurnStartedAt] = useState<number | null>(null);
  const [stopPolling, setStopPolling] = useState(false);
  const [slashIndex, setSlashIndex] = useState(0);
  const textareaRef = useRef<HTMLTextAreaElement>(null);

  // Slash command autocomplete: open while input starts with "/" and the
  // user is still composing the command name (no space yet). After they
  // pick or type a space, the popover closes.
  const slashQuery = input.startsWith("/") && !input.includes(" ") ? input : null;
  const slashOpen = slashQuery !== null && !sendingChat && !composerDisabled;
  const slashMatches = useMemo<SlashCommand[]>(
    () => (slashOpen ? filterSlashCommands(slashQuery!) : []),
    [slashOpen, slashQuery],
  );
  const safeSlashIndex =
    slashMatches.length === 0
      ? 0
      : Math.min(slashIndex, slashMatches.length - 1);

  function insertSlashCommand(cmd: SlashCommand) {
    // Catalog `name` is the command without the leading slash ("new", "clear").
    // Insert ends with a trailing space so the popover closes — a second
    // Enter then submits.
    const insert = cmd.insert ?? `/${cmd.name} `;
    setInput(insert);
    setSlashIndex(0);
    requestAnimationFrame(() => {
      const ta = textareaRef.current;
      if (ta) {
        ta.focus();