"use client";

import { useCallback, useRef, useState } from "react";
import {
  Activity,
  Database,
  FileJson,
  Gauge,
  Play,
  ShieldCheck,
  Square,
  Undo2,
  Zap,
} from "lucide-react";
import {
  Agent,
  AgentContent,
  AgentHeader,
  AgentInstructions,
  AgentOutput,
  AgentTool,
  AgentTools,
  ChainOfThought,
  ChainOfThoughtContent,
  ChainOfThoughtSearchResults,
  ChainOfThoughtStep,
  ChainOfThoughtTrigger,
  Context,
  ContextCacheUsage,
  ContextContentHeader,
  ContextInputUsage,
  ContextOutputUsage,
  ContextReasoningUsage,
  ContextTrigger,
  Conversation,
  ConversationContent,
  Message,
  MessageContent,
  MessageResponse,
  ModelSelector,
  PromptInput,
  PromptInputFooter,
  PromptInputSubmit,
  PromptInputTextarea,
  PromptInputTools,
  Queue,
  QueueItem,
  QueueSection,
  SourceDocumentItem,
  SourceItem,
  Sources,
  SourcesContent,
  SourcesTrigger,
  Terminal,
  TestResults,
  Tool,
  ToolContent,
  ToolHeader,
  ToolInput,
  ToolOutput,
  type ModelDef,
  type ToolPartState,
} from "@reopt-ai/opt-chat";
import {
  Avatar,
  Badge,
  Button,
  Progress,
  ToastProvider,
  cn,
} from "@reopt-ai/opt-ui";
import { useExampleAction } from "@/components/examples/use-example-action";
import type { ChatExampleDemoProps } from "./starter-conversation-demo";

interface AgentMessage {
  id: string;
  role: "user" | "assistant";
  text: string;
}

type ApprovalState = "pending" | "approved" | "held";
type PatchState =
  | "draft"
  | "approved"
  | "applying"
  | "applied"
  | "rolling-back"
  | "rolled-back";
type AuditPacketState = "idle" | "building" | "ready";
type EvalSuiteState = "idle" | "running" | "passed";
type ReleaseGateState = "blocked" | "checking" | "ready";
type RunEventTone = "info" | "success" | "warning";

interface RunEvent {
  id: string;
  label: string;
  detail: string;
  tone: RunEventTone;
}

interface PatchPreviewItem {
  field: string;
  before: string;
  after: string;
}

interface MemoryItem {
  id: string;
  label: string;
  value: string;
  tone: RunEventTone;
}

const AUDIT_PACKET_COPY: Record<
  AuditPacketState,
  { label: string; detail: string }
> = {
  idle: {
    label: "export ready",
    detail:
      "Bundle approval, model route, source list, memory, EAV diff, and rollback chain.",
  },
  building: {
    label: "building",
    detail:
      "Collecting trace, approval state, memory facts, and BrandApp EAV mutation context.",
  },
  ready: {
    label: "packet ready",
    detail: "agentops-audit-2026-06-19.json is sealed for BrandApp replay.",
  },
};

const AUDIT_PACKET_TONE: Record<AuditPacketState, RunEventTone> = {
  idle: "warning",
  building: "info",
  ready: "success",
};

const AUDIT_PACKET_BUTTON_LABEL: Record<AuditPacketState, string> = {
  idle: "Export audit",
  building: "Building",
  ready: "Packet ready",
};

const AGENT_MODELS: ModelDef[] = [
  {
    id: "anthropic/claude-sonnet-4.5",
    label: "sonnet-4.5",
    provider: "BrandApp",
    description: "Deep agent runs and tool planning",
    badge: "pro",
    capabilities: ["tools"],
  },
  {
    id: "anthropic/claude-haiku-4.5",
    label: "haiku-4.5",
    provider: "BrandApp",
    description: "Fast triage and low-cost summaries",
    badge: "fast",
  },
  {
    id: "zai/glm-4.7-flash",
    label: "glm-4.7-flash",
    provider: "BrandApp",
    description: "Lightweight operational checks",
  },
];

const INITIAL_MESSAGES: AgentMessage[] = [
  {
    id: "assistant-0",
    role: "assistant",
    text: "AgentOps is connected to BrandApp AI, EAV records, deployment notes, and the approval queue. Pick a runbook or ask for a status sweep.",
  },
  {
    id: "seed-user-0",
    role: "user",
    text: "What is blocking the spring launches right now?",
  },
  {
    id: "seed-assistant-0",
    role: "assistant",
    text: "Three launches are blocked: two are waiting on legal copy and one is missing a BrandApp EAV segment mapping. Owners are assigned on all three. I drafted a guarded patch you can review in the Approval gate before any EAV write runs.",
  },
];

const PROMPTS = [
  "Summarize blocked launches",
  "Draft an owner escalation",
  "Check credit risk before send",
] as const;

const INITIAL_RUN_EVENTS: RunEvent[] = [
  {
    id: "run-event-1",
    label: "Guard policy loaded",
    detail: "Write tools require approvalToken before EAV mutation.",
    tone: "success",
  },
  {
    id: "run-event-2",
    label: "Last runbook passed",
    detail: "Blocked launch sweep completed 4 minutes ago.",
    tone: "info",
  },
];

const INITIAL_MEMORY_ITEMS: MemoryItem[] = [
  {
    id: "guardrail",
    label: "Guardrail",
    value: "Writes require approvalToken; destructive tools stay draft-only.",
    tone: "success",
  },
  {
    id: "launch-context",
    label: "Launch context",
    value: "3 blockers: legal copy, owner note, missing segment.",
    tone: "info",
  },
  {
    id: "credit-policy",
    label: "Credit policy",
    value: "Cap image variants while credit load stays above 60%.",
    tone: "warning",
  },
];

const PATCH_PREVIEW_ITEMS: PatchPreviewItem[] = [
  {
    field: "launch.status",
    before: "Blocked",
    after: "Ready",
  },
  {
    field: "owner_note",
    before: "Needs copy review",
    after: "Legal copy approved; launch can proceed",
  },
  {
    field: "eav.segment",
    before: "missing",
    after: "vip-spring-2026",
  },
];

const ROUTE_SNIPPET = `// app/api/agent/route.ts
import { createBrandappProvider } from "@reopt-ai/brandapp-sdk/ai-provider";
import {
  convertToModelMessages,
  createUIMessageStreamResponse,
  streamText,
  toUIMessageStream,
} from "ai";

let brandapp: ReturnType<typeof createBrandappProvider> | undefined;

function getBrandapp() {
  brandapp ??= createBrandappProvider({
    clientId: process.env.BRANDAPP_CLIENT_ID!,
    clientSecret: process.env.BRANDAPP_CLIENT_SECRET!,
    brandappId: process.env.BRANDAPP_ID!,
  });
  return brandapp;
}

export async function POST(req: Request) {
  const {
    messages,
    model = "anthropic/claude-sonnet-4.5",
    approvalToken,
  } = await req.json();
  const mode = approvalToken ? "approved write mode" : "read-only mode";
  const result = streamText({
    model: getBrandapp()(model),
    instructions:
      "You are an operations agent. Never write EAV without approvalToken. " +
      "Current mode: " + mode,
    messages: await convertToModelMessages(messages),
  });
  return createUIMessageStreamResponse({
    stream: toUIMessageStream({ stream: result.stream }),
  });
}`;

function buildReply(prompt: string) {
  if (/credit/i.test(prompt)) {
    return "Credit risk is acceptable. The send plan consumes 1,840 credits against a 10,000 monthly allocation, but image variants should be capped until the launch owner approves final copy.";
  }

  if (/escalation/i.test(prompt)) {
    return "Escalation drafted: owner, blocking field, current reviewer, and next deadline are all included. I would request approval before posting to the customer-success channel.";
  }

  return "Three launches are blocked. Two are waiting for legal copy, one is missing a BrandApp EAV segment mapping, and all three have owners assigned. Recommended next action: approve the safe copy update and reopen the data sync check.";
}

function getPatchTone(state: PatchState) {
  switch (state) {
    case "applied":
      return "success";
    case "rolling-back":
    case "rolled-back":
      return "warning";
    case "approved":
    case "applying":
      return "info";
    default:
      return "default";
  }
}

function getApplyPatchVariant(state: PatchState) {
  if (
    state === "applied" ||
    state === "rolling-back" ||
    state === "rolled-back"
  ) {
    return "secondary";
  }
  return "primary";
}

function getApplyPatchLabel(state: PatchState) {
  switch (state) {
    case "applying":
      return "Applying";
    case "applied":
    case "rolling-back":
      return "Applied";
    case "rolled-back":
      return "Patch reverted";
    default:
      return "Apply patch";
  }
}

function getAgentRouteStatus(state: PatchState) {
  switch (state) {
    case "rolled-back":
      return "rollback-complete";
    case "rolling-back":
      return "rolling-back";
    case "applied":
      return "synced";
    default:
      return "streaming";
  }
}

function getReleaseGateCopy(
  releaseGateState: ReleaseGateState,
  releaseEvidenceReady: boolean,
) {
  if (releaseGateState === "ready") {
    return {
      label: "ready",
      detail:
        "Audit packet and eval evidence are attached to the release gate.",
    };
  }

  if (releaseGateState === "checking") {
    return {
      label: "checking",
      detail: "Verifying audit hash, eval pass, and approval trail.",
    };
  }

  if (releaseEvidenceReady) {
    return {
      label: "ready to open",
      detail: "Audit packet and eval suite passed; open the gate.",
    };
  }

  return {
    label: "blocked",
    detail: "Export the audit packet and pass evals before release can open.",
  };
}

function getEvalSuiteButtonLabel(state: EvalSuiteState) {
  switch (state) {
    case "running":
      return "Running evals";
    case "passed":
      return "Evals passed";
    default:
      return "Run evals";
  }
}

function getReleaseGateButtonLabel(state: ReleaseGateState) {
  switch (state) {
    case "checking":
      return "Checking gate";
    case "ready":
      return "Gate ready";
    default:
      return "Open release gate";
  }
}

function getReleaseGateTone(
  state: ReleaseGateState,
  releaseEvidenceReady: boolean,
) {
  if (state === "ready") return "success";
  if (releaseEvidenceReady) return "info";
  return "warning";
}

async function streamWords(
  text: string,
  onChunk: (value: string) => void,
  signal?: AbortSignal,
  delayMs = 22,
) {
  const parts = text.split(/(\s+)/);
  let buffer = "";

  for (const part of parts) {
    if (signal?.aborted) return "";
    if (delayMs > 0) {
      await new Promise((resolve) => window.setTimeout(resolve, delayMs));
    }
    buffer += part;
    onChunk(buffer);
  }

  return buffer;
}

function MetricCard({
  icon,
  label,
  value,
  tone = "info",
}: {
  icon: React.ReactNode;
  label: string;
  value: string;
  tone?: "info" | "success" | "warning";
}) {
  return (
    <div className="border-border bg-surface rounded-lg border p-3">
      <div className="flex items-center justify-between gap-2">
        <span className="text-text-tertiary">{icon}</span>
        <Badge variant={tone} size="sm">
          live
        </Badge>
      </div>
      <p className="text-text-primary mt-2 text-lg font-semibold">{value}</p>
      <p className="text-text-tertiary text-xs">{label}</p>
    </div>
  );
}

function RunbookButton({
  label,
  active,
  disabled,
  onClick,
}: {
  label: string;
  active: boolean;
  disabled: boolean;
  onClick: () => void;
}) {
  return (
    <button
      type="button"
      onClick={onClick}
      disabled={disabled}
      aria-pressed={active}
      className={cn(
        "border-border bg-surface text-text-secondary hover:border-border-hover hover:text-text-primary flex w-full items-center gap-2 rounded-lg border px-3 py-2 text-left text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-60",
        active && "border-accent bg-accent/10 text-text-primary",
      )}
    >
      <Play className="size-3.5" aria-hidden />
      {label}
    </button>
  );
}

interface AgentOpsAppDemoProps extends ChatExampleDemoProps {
  actionDelayMs?: number;
  streamDelayMs?: number;
}

export function AgentOpsAppDemo(props: AgentOpsAppDemoProps) {
  return (
    <ToastProvider position="bottom-right">
      <AgentOpsAppDemoInner {...props} />
    </ToastProvider>
  );
}

function AgentOpsAppDemoInner({
  actionDelayMs = 650,
  compact = false,
  streamDelayMs = 22,
}: AgentOpsAppDemoProps) {
  const { notReal } = useExampleAction();
  const [messages, setMessages] = useState<AgentMessage[]>(INITIAL_MESSAGES);
  const [streaming, setStreaming] = useState<string | null>(null);
  const [selectedModel, setSelectedModel] = useState(AGENT_MODELS[0].id);
  const [isLoading, setIsLoading] = useState(false);
  const [activeRunbook, setActiveRunbook] = useState<string>(PROMPTS[0]);
  const [approvalState, setApprovalState] = useState<ApprovalState>("pending");
  const [patchState, setPatchState] = useState<PatchState>("draft");
  const [auditPacketState, setAuditPacketState] =
    useState<AuditPacketState>("idle");
  const [evalSuiteState, setEvalSuiteState] = useState<EvalSuiteState>("idle");
  const [releaseGateState, setReleaseGateState] =
    useState<ReleaseGateState>("blocked");
  const [completedQueue, setCompletedQueue] = useState(1);
  const [openRuns, setOpenRuns] = useState(12);
  const [approvedRuns, setApprovedRuns] = useState(8);
  const [creditLoad, setCreditLoad] = useState(64);
  const [runEvents, setRunEvents] = useState<RunEvent[]>(INITIAL_RUN_EVENTS);
  const [memoryItems, setMemoryItems] =
    useState<MemoryItem[]>(INITIAL_MEMORY_ITEMS);
  const abortRef = useRef<AbortController | null>(null);
  const nextIdRef = useRef(1);
  const nextEventIdRef = useRef(INITIAL_RUN_EVENTS.length + 1);
  const approvalTone =
    approvalState === "approved"
      ? "success"
      : approvalState === "held"
        ? "warning"
        : "info";
  const toolState: ToolPartState =
    approvalState === "approved"
      ? "approval-responded"
      : approvalState === "held"
        ? "output-denied"
        : "approval-requested";
  const approvalCopy = {
    pending: {
      label: "approval pending",
      detail: "Owner approval required before the write tool can update EAV.",
      output: "Safe actions queued. No write tools executed.",
      next: "request_owner_approval",
    },
    approved: {
      label: "approved",
      detail: "Owner approved the guarded write for the selected launch set.",
      output: "Approval captured. The write patch is ready for EAV sync.",
      next: "write_eav_patch",
    },
    held: {
      label: "held",
      detail: "Write is paused and routed to manual review.",
      output: "Write denied. The agent will keep suggestions in draft mode.",
      next: "manual_review",
    },
  }[approvalState];
  const patchCopy = {
    draft: {
      label: "draft patch",
      detail: "The agent can preview the EAV mutation but cannot write yet.",
    },
    approved: {
      label: "approved patch",
      detail: "Owner approval is attached. The guarded EAV patch is ready.",
    },
    applying: {
      label: "applying patch",
      detail: "BrandApp EAV write is running with the approval token.",
    },
    applied: {
      label: "patch applied",
      detail: "Mutation audit is recorded and the launch row is synced.",
    },
    "rolling-back": {
      label: "rolling back",
      detail: "The agent is reverting the EAV mutation with audit context.",
    },
    "rolled-back": {
      label: "rollback complete",
      detail: "Rollback audit is recorded and the launch row is draft-safe.",
    },
  }[patchState];
  const patchTone = getPatchTone(patchState);
  const applyPatchVariant = getApplyPatchVariant(patchState);
  const applyPatchLabel = getApplyPatchLabel(patchState);
  const agentRouteStatus = getAgentRouteStatus(patchState);
  const auditPacketTone = AUDIT_PACKET_TONE[auditPacketState];
  const auditPacketCopy = AUDIT_PACKET_COPY[auditPacketState];
  const auditPacketButtonLabel = AUDIT_PACKET_BUTTON_LABEL[auditPacketState];
  const evalSuiteCopy = {
    idle: {
      label: "ready",
      detail:
        "Run guardrail, EAV mutation, source, and rollback replay checks.",
    },
    running: {
      label: "running",
      detail:
        "Evaluating approval policy, source grounding, and replay packet.",
    },
    passed: {
      label: "passed",
      detail: "Guardrail, EAV write, source, and replay checks passed.",
    },
  }[evalSuiteState];
  const releaseEvidenceReady =
    auditPacketState === "ready" && evalSuiteState === "passed";
  const releaseGateCopy = getReleaseGateCopy(
    releaseGateState,
    releaseEvidenceReady,
  );
  const evalSuiteButtonLabel = getEvalSuiteButtonLabel(evalSuiteState);
  const releaseGateButtonLabel = getReleaseGateButtonLabel(releaseGateState);
  const releaseGateTone = getReleaseGateTone(
    releaseGateState,
    releaseEvidenceReady,
  );

  const appendRunEvent = useCallback((event: Omit<RunEvent, "id">) => {
    setRunEvents((current) => [
      { id: `run-event-${nextEventIdRef.current++}`, ...event },
      ...current,
    ]);
  }, []);

  const upsertMemoryItem = useCallback((item: MemoryItem) => {
    setMemoryItems((current) => [
      item,
      ...current.filter((memoryItem) => memoryItem.id !== item.id),
    ]);
  }, []);

  const runPrompt = useCallback(
    async (prompt: string) => {
      if (isLoading || !prompt.trim()) return;

      const controller = new AbortController();
      abortRef.current = controller;
      const id = nextIdRef.current++;
      const modelLabel = selectedModel.split("/").pop() ?? selectedModel;

      setActiveRunbook(prompt);
      setApprovalState("pending");
      setPatchState("draft");
      setAuditPacketState("idle");
      setEvalSuiteState("idle");
      setReleaseGateState("blocked");
      setCompletedQueue(1);
      setOpenRuns((current) => current + 1);
      setCreditLoad((current) => Math.min(92, current + 2));
      appendRunEvent({
        label: "Runbook started",
        detail: `${prompt} started on ${modelLabel}.`,
        tone: "info",
      });
      upsertMemoryItem({
        id: "active-runbook",
        label: "Active runbook",
        value: `${prompt} planned with ${modelLabel}.`,
        tone: "info",
      });
      setMessages((current) => [
        ...current,
        { id: `user-${id}`, role: "user", text: prompt },
      ]);
      setStreaming("");
      setIsLoading(true);

      const finalText = await streamWords(
        buildReply(prompt),
        setStreaming,
        controller.signal,
        streamDelayMs,
      );

      if (finalText && !controller.signal.aborted) {
        setMessages((current) => [
          ...current,
          {
            id: `assistant-${id}`,
            role: "assistant",
            text: finalText,
          },
        ]);
        setCompletedQueue((current) => Math.max(current, 2));
        appendRunEvent({
          label: "Runbook completed",
          detail: `${prompt} returned a guarded action plan.`,
          tone: "success",
        });
      }

      setOpenRuns((current) => Math.max(0, current - 1));
      setStreaming(null);
      setIsLoading(false);
      abortRef.current = null;
    },
    [appendRunEvent, isLoading, selectedModel, streamDelayMs, upsertMemoryItem],
  );

  const handleStop = () => {
    abortRef.current?.abort();
    appendRunEvent({
      label: "Runbook stopped",
      detail: `${activeRunbook} was stopped before write tools ran.`,
      tone: "warning",
    });
    setStreaming(null);
    setIsLoading(false);
  };

  const appendAssistantMessage = (text: string) => {
    const id = nextIdRef.current++;
    setMessages((current) => [
      ...current,
      { id: `assistant-${id}`, role: "assistant", text },
    ]);
  };

  const handleApproveWrite = () => {
    if (approvalState === "approved") return;
    notReal("Approve write");
    setApprovalState("approved");
    setPatchState("approved");
    setCompletedQueue(2);
    setApprovedRuns((current) => current + 1);
    appendRunEvent({
      label: "Write approved",
      detail: `${activeRunbook} can now sync the guarded EAV patch.`,
      tone: "success",
    });
    upsertMemoryItem({
      id: "approval",
      label: "Approval memory",
      value: "approvalToken attached to the guarded write patch.",
      tone: "success",
    });
    appendAssistantMessage(
      "Owner approval captured. I queued the guarded EAV patch and kept the generated copy attached to the approval record.",
    );
  };

  const handleHoldWrite = () => {
    if (approvalState === "held") return;
    setApprovalState("held");
    setPatchState("draft");
    setCompletedQueue(2);
    appendRunEvent({
      label: "Write held",
      detail: `${activeRunbook} remains draft-only until manual review clears.`,
      tone: "warning",
    });
    upsertMemoryItem({
      id: "approval",
      label: "Approval memory",
      value: "Manual review required before any EAV write can run.",
      tone: "warning",
    });
    appendAssistantMessage(
      "Write held. I left the draft update in the queue and routed the unresolved fields to manual review.",
    );
  };

  const handleApplyPatch = () => {
    if (patchState !== "approved") return;
    notReal("Apply patch (EAV sync)");
    setPatchState("applying");
    appendRunEvent({
      label: "Patch applying",
      detail: `${activeRunbook} is writing the guarded BrandApp EAV patch.`,
      tone: "info",
    });
    window.setTimeout(() => {
      setPatchState("applied");
      setCompletedQueue(3);
      appendRunEvent({
        label: "Patch applied",
        detail: `${activeRunbook} synced launch status, owner note, and segment.`,
        tone: "success",
      });
      upsertMemoryItem({
        id: "eav-sync",
        label: "EAV memory",
        value: "launch.status, owner_note, and eav.segment persisted.",
        tone: "success",
      });
      appendAssistantMessage(
        "Guarded EAV patch applied. The mutation audit now includes launch status, owner note, segment mapping, and the approval token.",
      );
    }, actionDelayMs);
  };

  const handleRollbackPatch = () => {
    if (patchState !== "applied") return;
    notReal("Rollback patch");
    setPatchState("rolling-back");
    appendRunEvent({
      label: "Rollback queued",
      detail: `${activeRunbook} is reverting the guarded EAV mutation.`,
      tone: "warning",
    });
    window.setTimeout(() => {
      setPatchState("rolled-back");
      setCompletedQueue(4);
      appendRunEvent({
        label: "Rollback completed",
        detail: `${activeRunbook} restored launch status, owner note, and segment.`,
        tone: "success",
      });
      upsertMemoryItem({
        id: "rollback",
        label: "Rollback memory",
        value: "Last EAV mutation was reverted with approval audit retained.",
        tone: "warning",
      });
      appendAssistantMessage(
        "Rollback complete. I restored the prior launch values and kept the approval token, patch diff, and rollback reason attached to the audit packet.",
      );
    }, actionDelayMs);
  };

  const handleExportAuditPacket = () => {
    if (auditPacketState !== "idle") return;
    notReal("Export audit packet");
    setAuditPacketState("building");
    appendRunEvent({
      label: "Audit export queued",
      detail: `${activeRunbook} is bundling approval, sources, memory, and EAV diff.`,
      tone: "info",
    });
    window.setTimeout(() => {
      setAuditPacketState("ready");
      appendRunEvent({
        label: "Audit packet ready",
        detail:
          "agentops-audit-2026-06-19.json includes approvalToken hash, patch diff, sources, and rollback chain.",
        tone: "success",
      });
      upsertMemoryItem({
        id: "audit-packet",
        label: "Audit packet",
        value: "agentops-audit-2026-06-19.json sealed for BrandApp replay.",
        tone: "success",
      });
      appendAssistantMessage(
        "Audit packet ready. I bundled the model route, approval state, EAV diff, source list, run trace, and rollback chain for BrandApp replay.",
      );
    }, actionDelayMs);
  };

  const handleRunEvalSuite = () => {
    if (evalSuiteState !== "idle") return;
    notReal("Run eval suite");
    setEvalSuiteState("running");
    appendRunEvent({
      label: "Eval suite started",
      detail: `${activeRunbook} guardrail and replay checks are running.`,
      tone: "info",
    });
    window.setTimeout(() => {
      setEvalSuiteState("passed");
      appendRunEvent({
        label: "Eval suite passed",
        detail:
          "Approval policy, source grounding, EAV mutation, and replay packet checks passed.",
        tone: "success",
      });
      upsertMemoryItem({
        id: "eval-suite",
        label: "Eval memory",
        value: "Latest guardrail and BrandApp replay checks passed.",
        tone: "success",
      });
      appendAssistantMessage(
        "Eval suite passed. Approval policy, source grounding, EAV mutation shape, and BrandApp replay packet all cleared the release checks.",
      );
    }, actionDelayMs);
  };

  const handleOpenReleaseGate = () => {
    if (!releaseEvidenceReady || releaseGateState !== "blocked") return;
    notReal("Open release gate");
    setReleaseGateState("checking");
    appendRunEvent({
      label: "Release gate checking",
      detail: `${activeRunbook} is validating audit and eval evidence.`,
      tone: "info",
    });
    window.setTimeout(() => {
      setReleaseGateState("ready");
      setCompletedQueue(5);
      appendRunEvent({
        label: "Release gate opened",
        detail:
          "Audit packet, eval suite, approval policy, and BrandApp replay evidence are attached.",
        tone: "success",
      });
      upsertMemoryItem({
        id: "release-gate",
        label: "Release gate",
        value: "Latest runbook has audit and eval evidence ready for release.",
        tone: "success",
      });
      appendAssistantMessage(
        "Release gate opened. I attached the audit packet, eval suite result, approval policy, and BrandApp replay evidence to the runbook.",
      );
    }, actionDelayMs);
  };

  if (compact) {
    return (
      <div className="bg-surface border-border flex h-full w-full overflow-hidden rounded-lg border">
        <div className="border-border-subtle hidden w-52 shrink-0 border-r p-2 sm:block">
          <Agent className="bg-bg-subtle">
            <AgentHeader name="Ops Agent" model="sonnet" />
            <AgentContent>
              <p className="text-text-secondary text-xs">3 tools active</p>
            </AgentContent>
          </Agent>
        </div>
        <div className="flex min-w-0 flex-1 flex-col">
          <Conversation className="min-h-0 flex-1">
            <ConversationContent className="gap-4 p-3">
              {messages.slice(-3).map((message) => (
                <Message key={message.id} from={message.role}>
                  <MessageContent
                    className={
                      message.role === "assistant"
                        ? "border-border bg-surface-raised rounded-lg border px-3 py-2"
                        : undefined
                    }
                  >
                    <MessageResponse>{message.text}</MessageResponse>
                  </MessageContent>
                </Message>
              ))}
              {streaming !== null && (
                <Message from="assistant">
                  <MessageContent className="border-border bg-surface-raised rounded-lg border px-3 py-2">
                    <MessageResponse>{streaming || "..."}</MessageResponse>
                  </MessageContent>
                </Message>
              )}
            </ConversationContent>
          </Conversation>
          <div className="border-border-subtle bg-bg-subtle flex flex-wrap items-center gap-2 border-t px-3 py-2 text-xs">
            <Badge variant={auditPacketTone} size="sm" dot>
              audit {auditPacketCopy.label}
            </Badge>
            <Badge
              variant={evalSuiteState === "passed" ? "success" : "info"}
              size="sm"
              dot
            >
              eval {evalSuiteCopy.label}
            </Badge>
            <Badge variant={releaseGateTone} size="sm" dot>
              release {releaseGateCopy.label}
            </Badge>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="bg-surface border-border flex h-[100dvh] max-h-[100dvh] min-h-[660px] w-full overflow-hidden rounded-lg border shadow-sm lg:h-[100dvh]">
      <aside className="border-border-subtle bg-bg-subtle/60 hidden w-72 shrink-0 flex-col border-r lg:flex">
        <div className="border-border-subtle border-b p-4">
          <div className="flex items-center gap-3">
            <Avatar name="AgentOps" size="md" status="online" />
            <div className="min-w-0">
              <p className="text-text-primary truncate text-sm font-semibold">
                AI agent console
              </p>
              <p className="text-text-tertiary text-xs">BrandApp provider</p>
            </div>
          </div>
          <div className="mt-4">
            <ModelSelector
              models={AGENT_MODELS}
              selected={selectedModel}
              onSelect={setSelectedModel}
              labels={{ selectModel: "Model" }}
            />
          </div>
        </div>

        <div className="grid grid-cols-2 gap-3 p-4">
          <MetricCard
            icon={<Activity className="size-4" aria-hidden />}
            label="open runs"
            value={String(openRuns)}
          />
          <MetricCard
            icon={<Gauge className="size-4" aria-hidden />}
            label="credit load"
            value={`${creditLoad}%`}
            tone="warning"
          />
          <MetricCard
            icon={<ShieldCheck className="size-4" aria-hidden />}
            label="approved"
            value={String(approvedRuns)}
            tone="success"
          />
          <MetricCard
            icon={<Database className="size-4" aria-hidden />}
            label="EAV bases"
            value="5"
          />
        </div>

        <div className="flex flex-col gap-2 px-4">
          {PROMPTS.map((prompt) => (
            <RunbookButton
              key={prompt}
              label={prompt}
              active={prompt === activeRunbook}
              disabled={isLoading}
              onClick={() => {
                void runPrompt(prompt);
              }}
            />
          ))}
        </div>

        <div className="mt-auto p-4">
          <div className="border-border bg-surface rounded-lg border p-3">
            <Progress
              value={completedQueue}
              max={5}
              label="Runbook coverage"
              showLabel
              size="sm"
            />
          </div>
        </div>
      </aside>

      <main className="flex min-w-0 flex-1 flex-col">
        <header className="border-border-subtle flex flex-wrap items-center justify-between gap-3 border-b px-4 py-3">
          <div>
            <div className="flex items-center gap-2">
              <Badge variant="success" dot>
                {isLoading ? "running" : "online"}
              </Badge>
              <span className="text-text-tertiary text-xs">
                {selectedModel}
              </span>
            </div>
            <h2 className="text-text-primary mt-1 text-lg font-semibold">
              Launch reliability agent
            </h2>
          </div>
          <div className="flex items-center gap-2">
            <Button
              size="sm"
              variant="secondary"
              leftIcon={<Zap className="size-4" aria-hidden />}
              onClick={() => {
                void runPrompt(PROMPTS[0]);
              }}
            >
              Sweep
            </Button>
            <Button
              size="sm"
              variant="secondary"
              leftIcon={<Square className="size-4" aria-hidden />}
              onClick={handleStop}
              disabled={!isLoading}
            >
              Stop
            </Button>
          </div>
        </header>

        <div className="grid min-h-0 flex-1 grid-cols-1 xl:grid-cols-[minmax(0,1fr)_360px]">
          <section className="flex min-w-0 flex-col">
            <Conversation className="min-h-0 flex-1">
              <ConversationContent className="gap-6 p-5">
                {messages.map((message) => (
                  <Message key={message.id} from={message.role}>
                    <MessageContent
                      className={
                        message.role === "assistant"
                          ? "border-border bg-surface-raised rounded-lg border px-4 py-3"
                          : undefined
                      }
                    >
                      <MessageResponse>{message.text}</MessageResponse>
                    </MessageContent>
                  </Message>
                ))}
                {streaming !== null && (
                  <Message from="assistant">
                    <MessageContent className="border-border bg-surface-raised rounded-lg border px-4 py-3">
                      <MessageResponse>{streaming || "..."}</MessageResponse>
                    </MessageContent>
                  </Message>
                )}
              </ConversationContent>
            </Conversation>

            <div className="border-border-subtle border-t p-4">
              <PromptInput
                onSubmit={(prompt) => {
                  void runPrompt(prompt);
                }}
                isLoading={isLoading}
                onStop={handleStop}
                className="bg-surface-raised"
              >
                <PromptInputTextarea placeholder="Ask the agent to inspect launches, credits, or EAV sync..." />
                <PromptInputFooter>
                  <PromptInputTools>
                    <span className="bg-bg-muted text-text-primary rounded-full px-2 py-1 text-[11px] font-medium">
                      tool guarded
                    </span>
                  </PromptInputTools>
                  <div className="flex-1" />
                  <PromptInputSubmit />
                </PromptInputFooter>
              </PromptInput>
            </div>
          </section>

          <aside className="border-border-subtle bg-bg-subtle/40 flex min-h-0 flex-col gap-4 overflow-y-auto border-t p-4 xl:border-t-0 xl:border-l">
            <Agent className="bg-surface">
              <AgentHeader name="Launch Reliability" model="brandapp.ai" />
              <AgentContent>
                <p className="text-text-secondary text-sm">
                  Checks release notes, BrandApp EAV records, credits, and
                  approval state before changing customer-facing data.
                </p>
              </AgentContent>
              <AgentInstructions>
                Never execute a destructive tool without explicit approval.
              </AgentInstructions>
              <AgentTools>
                <AgentTool
                  name="list_eav_records"
                  description="Read BrandApp launch records"
                  schema={{ entity: "string", status: "string" }}
                />
                <AgentTool
                  name="draft_update"
                  description="Generate copy and owner notes"
                  schema={{ tone: "string", locale: "string" }}
                />
                <AgentTool
                  name="rollback_update"
                  description="Revert a guarded BrandApp EAV mutation"
                  schema={{ auditId: "string", reason: "string" }}
                />
              </AgentTools>
              <AgentOutput>{approvalCopy.output}</AgentOutput>
            </Agent>

            <div className="border-border bg-surface rounded-lg border p-4">
              <div className="flex items-center justify-between gap-3">
                <p className="text-text-primary text-sm font-semibold">
                  Agent memory
                </p>
                <Badge variant="info" size="sm">
                  {memoryItems.length} facts
                </Badge>
              </div>
              <div className="border-border-subtle mt-3 divide-y border-y">
                {memoryItems.slice(0, 4).map((item) => (
                  <div key={item.id} className="py-2">
                    <div className="flex items-center justify-between gap-2">
                      <p className="text-text-primary truncate text-sm font-medium">
                        {item.label}
                      </p>
                      <Badge variant={item.tone} size="sm" dot>
                        {item.tone}
                      </Badge>
                    </div>
                    <p className="text-text-tertiary mt-1 text-xs">
                      {item.value}
                    </p>
                  </div>
                ))}
              </div>
            </div>

            <div className="border-border bg-surface rounded-lg border p-4">
              <div className="flex items-start justify-between gap-3">
                <div className="min-w-0">
                  <p className="text-text-primary text-sm font-semibold">
                    Approval gate
                  </p>
                  <p className="text-text-tertiary mt-1 text-xs">
                    {approvalCopy.detail}
                  </p>
                </div>
                <Badge variant={approvalTone} size="sm" dot>
                  {approvalCopy.label}
                </Badge>
              </div>
              <div className="mt-3 flex flex-wrap gap-2">
                <Button
                  size="sm"
                  leftIcon={<ShieldCheck className="size-4" aria-hidden />}
                  disabled={approvalState === "approved"}
                  onClick={handleApproveWrite}
                >
                  Approve write
                </Button>
                <Button
                  size="sm"
                  variant="secondary"
                  leftIcon={<Square className="size-4" aria-hidden />}
                  disabled={approvalState === "held"}
                  onClick={handleHoldWrite}
                >
                  Hold
                </Button>
              </div>
            </div>

            <div className="border-border bg-surface rounded-lg border p-4">
              <div className="flex items-start justify-between gap-3">
                <div className="min-w-0">
                  <p className="text-text-primary text-sm font-semibold">
                    Guarded patch preview
                  </p>
                  <p className="text-text-tertiary mt-1 text-xs">
                    {patchCopy.detail}
                  </p>
                </div>
                <Badge variant={patchTone} size="sm" dot>
                  {patchCopy.label}
                </Badge>
              </div>
              <div className="mt-3 grid gap-2">
                {PATCH_PREVIEW_ITEMS.map((item) => (
                  <div
                    key={item.field}
                    className="border-border-subtle rounded-lg border px-3 py-2"
                  >
                    <div className="flex items-center justify-between gap-2">
                      <p className="text-text-primary truncate text-sm font-medium">
                        {item.field}
                      </p>
                      <Badge variant="default" size="sm">
                        patch
                      </Badge>
                    </div>
                    <p className="text-text-tertiary mt-1 truncate text-xs">
                      {item.before} to {item.after}
                    </p>
                  </div>
                ))}
              </div>
              <div className="mt-3 grid gap-2 sm:grid-cols-2">
                <Button
                  className="w-full"
                  size="sm"
                  variant={applyPatchVariant}
                  leftIcon={<Database className="size-4" aria-hidden />}
                  disabled={patchState !== "approved"}
                  onClick={handleApplyPatch}
                >
                  {applyPatchLabel}
                </Button>
                <Button
                  className="w-full"
                  size="sm"
                  variant="secondary"
                  leftIcon={<Undo2 className="size-4" aria-hidden />}
                  disabled={patchState !== "applied"}
                  onClick={handleRollbackPatch}
                >
                  {patchState === "rolling-back"
                    ? "Rolling back"
                    : patchState === "rolled-back"
                      ? "Rolled back"
                      : "Rollback patch"}
                </Button>
              </div>
            </div>

            <div className="border-border bg-surface rounded-lg border p-4">
              <div className="flex items-start justify-between gap-3">
                <div className="min-w-0">
                  <p className="text-text-primary text-sm font-semibold">
                    Audit packet
                  </p>
                  <p className="text-text-tertiary mt-1 text-xs">
                    {auditPacketCopy.detail}
                  </p>
                </div>
                <Badge variant={auditPacketTone} size="sm" dot>
                  {auditPacketCopy.label}
                </Badge>
              </div>
              <div className="border-border-subtle mt-3 flex items-start gap-3 rounded-lg border px-3 py-2">
                <FileJson
                  className="text-accent mt-0.5 size-4 shrink-0"
                  aria-hidden
                />
                <div className="min-w-0">
                  <p className="text-text-primary truncate text-sm font-medium">
                    agentops-audit-2026-06-19.json
                  </p>
                  <p className="text-text-tertiary mt-1 text-xs">
                    approvalToken hash · model route · sources · rollback chain
                  </p>
                </div>
              </div>
              <Button
                className="mt-3 w-full"
                size="sm"
                variant="secondary"
                leftIcon={<ShieldCheck className="size-4" aria-hidden />}
                disabled={auditPacketState !== "idle"}
                onClick={handleExportAuditPacket}
              >
                {auditPacketButtonLabel}
              </Button>
            </div>

            <div className="border-border bg-surface rounded-lg border p-4">
              <div className="flex items-start justify-between gap-3">
                <div className="min-w-0">
                  <p className="text-text-primary text-sm font-semibold">
                    Eval suite
                  </p>
                  <p className="text-text-tertiary mt-1 text-xs">
                    {evalSuiteCopy.detail}
                  </p>
                </div>
                <Badge
                  variant={evalSuiteState === "passed" ? "success" : "info"}
                  size="sm"
                  dot
                >
                  {evalSuiteCopy.label}
                </Badge>
              </div>
              <div className="mt-3 grid gap-2 text-xs">
                <div className="border-border-subtle rounded-lg border px-3 py-2">
                  <p className="text-text-primary font-medium">
                    release-gate.agentops
                  </p>
                  <p className="text-text-tertiary mt-1">
                    approval policy · source grounding · EAV mutation · replay
                  </p>
                </div>
              </div>
              <Button
                className="mt-3 w-full"
                size="sm"
                variant="secondary"
                leftIcon={
                  <Play
                    className={cn(
                      "size-4",
                      evalSuiteState === "running" && "animate-pulse",
                    )}
                    aria-hidden
                  />
                }
                disabled={evalSuiteState !== "idle"}
                onClick={handleRunEvalSuite}
              >
                {evalSuiteButtonLabel}
              </Button>
            </div>

            <div className="border-border bg-surface rounded-lg border p-4">
              <div className="flex items-start justify-between gap-3">
                <div className="min-w-0">
                  <p className="text-text-primary text-sm font-semibold">
                    Release gate
                  </p>
                  <p className="text-text-tertiary mt-1 text-xs">
                    {releaseGateCopy.detail}
                  </p>
                </div>
                <Badge variant={releaseGateTone} size="sm" dot>
                  {releaseGateCopy.label}
                </Badge>
              </div>
              <div className="mt-3 grid gap-2 text-xs">
                <div className="border-border-subtle flex items-center justify-between gap-3 rounded-lg border px-3 py-2">
                  <span className="text-text-secondary">audit packet</span>
                  <Badge
                    variant={auditPacketState === "ready" ? "success" : "info"}
                    size="sm"
                  >
                    {auditPacketState === "ready" ? "ready" : "pending"}
                  </Badge>
                </div>
                <div className="border-border-subtle flex items-center justify-between gap-3 rounded-lg border px-3 py-2">
                  <span className="text-text-secondary">eval suite</span>
                  <Badge
                    variant={evalSuiteState === "passed" ? "success" : "info"}
                    size="sm"
                  >
                    {evalSuiteState === "passed" ? "passed" : "pending"}
                  </Badge>
                </div>
              </div>
              <Button
                className="mt-3 w-full"
                size="sm"
                variant="secondary"
                leftIcon={
                  <ShieldCheck
                    className={cn(
                      "size-4",
                      releaseGateState === "checking" && "animate-pulse",
                    )}
                    aria-hidden
                  />
                }
                disabled={
                  !releaseEvidenceReady || releaseGateState !== "blocked"
                }
                onClick={handleOpenReleaseGate}
              >
                {releaseGateButtonLabel}
              </Button>
            </div>

            <div className="border-border bg-surface rounded-lg border p-4">
              <div className="flex items-center justify-between gap-3">
                <p className="text-text-primary text-sm font-semibold">
                  Run history
                </p>
                <Badge variant="info" size="sm">
                  {runEvents.length} events
                </Badge>
              </div>
              <div className="mt-3 grid gap-2">
                {runEvents.slice(0, 4).map((event) => (
                  <div
                    key={event.id}
                    className="border-border-subtle rounded-lg border px-3 py-2"
                  >
                    <div className="flex items-center justify-between gap-2">
                      <p className="text-text-primary truncate text-sm font-medium">
                        {event.label}
                      </p>
                      <Badge variant={event.tone} size="sm" dot>
                        {event.tone}
                      </Badge>
                    </div>
                    <p className="text-text-tertiary mt-1 truncate text-xs">
                      {event.detail}
                    </p>
                  </div>
                ))}
              </div>
            </div>

            <ChainOfThought defaultOpen className="bg-surface">
              <ChainOfThoughtTrigger labels={{ thinking: "Run trace" }} />
              <ChainOfThoughtContent>
                <ChainOfThoughtStep
                  step={{
                    id: "load-brandapp-context",
                    status: "complete",
                    label: "Loaded BrandApp context",
                    description: "5 entities, 12 active launch records",
                  }}
                />
                <ChainOfThoughtStep
                  step={{
                    id: "check-credit-budget",
                    status: "complete",
                    label: "Checked credit budget",
                    description: "64% monthly usage, no hard limit risk",
                  }}
                />
                <ChainOfThoughtStep
                  isLast
                  step={{
                    id: "prepare-guarded-write",
                    status:
                      approvalState === "approved"
                        ? "complete"
                        : isLoading
                          ? "active"
                          : "pending",
                    label: "Prepare guarded write",
                    description: approvalCopy.detail,
                  }}
                />
                <ChainOfThoughtSearchResults
                  query="status:blocked owner:* launch"
                  results={[
                    "Spring collection launch",
                    "Referral reminder",
                    "VIP early access",
                  ]}
                />
              </ChainOfThoughtContent>
            </ChainOfThought>

            <Tool defaultOpen className="bg-surface">
              <ToolHeader title="draft_update" state={toolState} />
              <ToolContent>
                <ToolInput
                  input={{
                    entity: "launches",
                    status: "blocked",
                    runbook: activeRunbook,
                  }}
                />
                <ToolOutput
                  output={{
                    count: 3,
                    approval: approvalState,
                    riskyWrite: approvalState !== "approved",
                    patch: patchState,
                    next:
                      patchState === "rolled-back"
                        ? "rollback_audit_ready"
                        : patchState === "applied"
                          ? "rollback_available"
                          : approvalCopy.next,
                  }}
                />
              </ToolContent>
            </Tool>

            <Queue className="bg-surface">
              <QueueSection title="Agent queue" count={5} defaultOpen>
                <QueueItem
                  item={{
                    id: "q1",
                    label: "Summarize blockers",
                    completed: completedQueue >= 1,
                  }}
                />
                <QueueItem
                  item={{
                    id: "q2",
                    label: "Prepare owner approval",
                    completed: completedQueue >= 2,
                  }}
                />
                <QueueItem
                  item={{
                    id: "q3",
                    label: "Write approved patch",
                    completed:
                      patchState === "applied" ||
                      patchState === "rolling-back" ||
                      patchState === "rolled-back",
                  }}
                />
                <QueueItem
                  item={{
                    id: "q4",
                    label: "Prepare rollback packet",
                    completed: patchState === "rolled-back",
                  }}
                />
                <QueueItem
                  item={{
                    id: "q5",
                    label: "Open release gate",
                    completed: releaseGateState === "ready",
                  }}
                />
              </QueueSection>
            </Queue>

            <Context
              usedTokens={32760}
              maxTokens={128000}
              modelId={selectedModel}
              usage={{
                inputTokens: 18420,
                outputTokens: 2190,
                reasoningTokens: 7020,
                cacheTokens: 5130,
              }}
              className="bg-surface"
            >
              <ContextTrigger labels={{ used: "tokens" }} />
              <ContextContentHeader />
              <ContextInputUsage />
              <ContextOutputUsage />
              <ContextReasoningUsage />
              <ContextCacheUsage />
            </Context>

            <Sources defaultOpen className="bg-surface">
              <SourcesTrigger count={3} labels={{ usedSources: " sources" }} />
              <SourcesContent>
                <SourceDocumentItem
                  title="BrandApp launch records"
                  filename="launches.eav"
                />
                <SourceDocumentItem
                  title="Current credit ledger"
                  filename="ai-credits.json"
                />
                <SourceItem
                  title="Agent route"
                  url="https://app.reopt.ai/docs/brandapp-sdk"
                />
              </SourcesContent>
            </Sources>

            <Terminal
              output={`$ POST /api/agent\nprovider=brandapp.ai\nstatus=${agentRouteStatus}\nmodel=${selectedModel}\naudit=${auditPacketState}\nrelease=${releaseGateState}`}
            />
            <TestResults
              results={[
                {
                  name: "tool approval policy",
                  status: approvalState === "approved" ? "passed" : "running",
                  duration: 12,
                },
                { name: "EAV read route", status: "passed", duration: 18 },
                {
                  name: "EAV write mutation",
                  status:
                    patchState === "applied" ||
                    patchState === "rolling-back" ||
                    patchState === "rolled-back"
                      ? "passed"
                      : "running",
                  duration: 21,
                },
                {
                  name: "rollback audit",
                  status: patchState === "rolled-back" ? "passed" : "running",
                  duration: 15,
                },
                {
                  name: "audit packet",
                  status: auditPacketState === "ready" ? "passed" : "running",
                  duration: 11,
                },
                {
                  name: "eval suite",
                  status: evalSuiteState === "passed" ? "passed" : "running",
                  duration: 17,
                },
                {
                  name: "release gate",
                  status: releaseGateState === "ready" ? "passed" : "running",
                  duration: 13,
                },
                { name: "write guard", status: "passed", duration: 9 },
              ]}
            />
            <pre className="text-text-primary border-border bg-surface max-h-48 overflow-auto rounded-lg border p-3 text-xs leading-5">
              <code>{ROUTE_SNIPPET}</code>
            </pre>
          </aside>
        </div>
      </main>
    </div>
  );
}