agent-session-replayer 0.1.0

package/dist/index.cjs

@@ -0,0 +1,573 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  AgentSessionReplayer: () => AgentSessionReplayer
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/AgentSessionReplayer.tsx
+var import_react2 = require("react");
+
+// src/playback.ts
+var initialPlaybackState = () => ({ eventIndex: 0, revealOffset: 0, phase: "typing" });
+var segmentGraphemes = (value) => {
+  if (typeof Intl.Segmenter === "function") return [...new Intl.Segmenter(void 0, { granularity: "grapheme" }).segment(value)].map(({ segment }) => segment);
+  return Array.from(value);
+};
+var getEventText = (event) => event.blocks.map((block) => `${block.title ? `${block.title}
+` : ""}${block.content}`).join("\n");
+var getEventLength = (event) => segmentGraphemes(getEventText(event)).length;
+var revealEvent = (event, offset) => {
+  let remaining = offset;
+  const blocks = [];
+  for (const block of event.blocks) {
+    if (remaining <= 0) break;
+    const titleParts = segmentGraphemes(block.title ?? "");
+    const title = titleParts.slice(0, remaining).join("");
+    remaining = Math.max(0, remaining - titleParts.length - (block.title ? 1 : 0));
+    const contentParts = segmentGraphemes(block.content);
+    const content = contentParts.slice(0, remaining).join("");
+    remaining = Math.max(0, remaining - contentParts.length - 1);
+    blocks.push({ ...block, title: block.title ? title : void 0, content });
+  }
+  return { ...event, blocks };
+};
+function playbackReducer(state, action) {
+  if (action.type === "RESTART") return initialPlaybackState();
+  if (action.eventIndex !== state.eventIndex) return state;
+  if (action.type === "FINISH_COLLAPSE") return state.phase === "collapsing" ? { ...state, phase: "between-events" } : state;
+  if (action.type === "ADVANCE_EVENT") return state.phase === "between-events" ? { eventIndex: state.eventIndex + 1, revealOffset: 0, phase: "typing" } : state;
+  if (state.phase !== "typing") return state;
+  const event = action.item.events[state.eventIndex];
+  const length = getEventLength(event);
+  const revealOffset = action.type === "COMPLETE_EVENT" ? length : Math.min(length, state.revealOffset + action.amount);
+  if (revealOffset < length) return { ...state, revealOffset };
+  return { ...state, revealOffset, phase: state.eventIndex === action.item.events.length - 1 ? "case-complete" : "collapsing" };
+}
+
+// src/validation.ts
+var import_zod = require("zod");
+var nonEmpty = import_zod.z.string().min(1);
+var actorSchema = import_zod.z.enum(["implementer", "reviewer"]);
+var eventTypeSchema = import_zod.z.enum([
+  "task_received",
+  "plan",
+  "patch",
+  "review_request",
+  "review_start",
+  "blocking_finding",
+  "revision",
+  "verification",
+  "approval"
+]);
+var blockKindSchema = import_zod.z.enum([
+  "message",
+  "code",
+  "tool_call",
+  "tool_output",
+  "finding",
+  "patch",
+  "git_diff",
+  "status",
+  "result"
+]);
+var agentSchema = import_zod.z.object({
+  id: nonEmpty,
+  name: nonEmpty,
+  role: nonEmpty,
+  context: nonEmpty
+}).strict();
+var blockSchema = import_zod.z.object({
+  id: nonEmpty,
+  kind: blockKindSchema,
+  title: nonEmpty.optional(),
+  content: nonEmpty,
+  language: nonEmpty.optional()
+}).strict();
+var eventSchema = import_zod.z.object({
+  id: nonEmpty,
+  type: eventTypeSchema,
+  actor: actorSchema,
+  title: nonEmpty,
+  summary: nonEmpty,
+  blocks: import_zod.z.array(blockSchema).min(1).describe("Block IDs must be unique within each event. The runtime parser enforces this constraint.")
+}).strict().superRefine((event, context) => {
+  if (new Set(event.blocks.map(({ id }) => id)).size !== event.blocks.length) {
+    context.addIssue({
+      code: "custom",
+      path: ["blocks"],
+      message: "Block IDs must be unique within an event"
+    });
+  }
+});
+var sessionSchema = import_zod.z.object({
+  id: nonEmpty,
+  title: nonEmpty,
+  summary: nonEmpty,
+  repository: nonEmpty,
+  branch: nonEmpty,
+  events: import_zod.z.array(eventSchema).min(1).describe("Event IDs must be unique within each case. The runtime parser enforces this constraint.")
+}).strict().superRefine((session, context) => {
+  if (new Set(session.events.map(({ id }) => id)).size !== session.events.length) {
+    context.addIssue({
+      code: "custom",
+      path: ["events"],
+      message: "Event IDs must be unique within a case"
+    });
+  }
+});
+var colorsSchema = import_zod.z.object({
+  background: import_zod.z.string().optional(),
+  surface: import_zod.z.string().optional(),
+  border: import_zod.z.string().optional(),
+  text: import_zod.z.string().optional(),
+  muted: import_zod.z.string().optional(),
+  implementer: import_zod.z.string().optional(),
+  reviewer: import_zod.z.string().optional(),
+  success: import_zod.z.string().optional(),
+  danger: import_zod.z.string().optional(),
+  focus: import_zod.z.string().optional()
+}).strict();
+var replayContentShape = {
+  agents: import_zod.z.object({ implementer: agentSchema, reviewer: agentSchema }).strict(),
+  cases: import_zod.z.array(sessionSchema).min(1).describe("Case IDs must be unique across this array. The runtime parser enforces this constraint.")
+};
+function addReplayContentIssues(value, context) {
+  if (new Set(value.cases.map(({ id }) => id)).size !== value.cases.length) {
+    context.addIssue({ code: "custom", path: ["cases"], message: "Case IDs must be unique" });
+  }
+}
+var replayContentSchema = import_zod.z.object(replayContentShape).strict().superRefine(addReplayContentIssues);
+var propsSchema = import_zod.z.object({
+  ...replayContentShape,
+  typingSpeed: import_zod.z.number().finite().positive(),
+  eventDelayMs: import_zod.z.number().finite().nonnegative(),
+  height: import_zod.z.number({ error: "height must be greater than zero." }).refine((value) => Number.isFinite(value) && value > 0, "height must be greater than zero."),
+  colors: colorsSchema.optional(),
+  caseIndex: import_zod.z.number().int().nonnegative().optional(),
+  initialCaseIndex: import_zod.z.number().int().nonnegative(),
+  className: import_zod.z.string().optional(),
+  onCaseChange: import_zod.z.function().optional(),
+  onEventStart: import_zod.z.function().optional(),
+  onEventComplete: import_zod.z.function().optional(),
+  onCaseComplete: import_zod.z.function().optional()
+}).strict().superRefine((props, context) => {
+  addReplayContentIssues(props, context);
+  for (const key of ["caseIndex", "initialCaseIndex"]) {
+    const value = props[key];
+    if (value !== void 0 && value >= props.cases.length) {
+      context.addIssue({
+        code: "custom",
+        path: [key],
+        message: `${key} must reference an available case`
+      });
+    }
+  }
+});
+function formatPath(path) {
+  const formatted = path.reduce((result, part) => typeof part === "number" ? `${result}[${part}]` : result ? `${result}.${String(part)}` : String(part), "");
+  return formatted || "$";
+}
+function parseReplayerProps(value) {
+  const result = propsSchema.safeParse(value);
+  if (result.success) return result.data;
+  const details = result.error.issues.map((issue) => `${formatPath(issue.path)}: ${issue.message}`).join("; ");
+  throw new Error(`AgentSessionReplayer received invalid props: ${details}`);
+}
+
+// src/GitDiffBlock.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var METADATA_PREFIXES = [
+  "diff --git ",
+  "index ",
+  "new file mode ",
+  "deleted file mode ",
+  "similarity index ",
+  "rename from ",
+  "rename to ",
+  "--- ",
+  "+++ ",
+  "\"
+];
+function classifyGitDiffLine(line) {
+  if (METADATA_PREFIXES.some((prefix) => line.startsWith(prefix))) return "metadata";
+  if (line.startsWith("@@")) return "hunk";
+  if (line.startsWith("+")) return "addition";
+  if (line.startsWith("-")) return "removal";
+  return "context";
+}
+function GitDiffBlock({ content }) {
+  const lines = content.split("\n");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("pre", { className: "asr-git-diff", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { children: lines.map((line, index) => {
+    const kind = classifyGitDiffLine(line);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `asr-git-diff-line asr-git-diff-line--${kind}`, children: line }),
+      index < lines.length - 1 ? "\n" : null
+    ] }, index);
+  }) }) });
+}
+
+// src/AgentSessionReplayer.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var DEFAULT_TYPING_SPEED = 110;
+var DEFAULT_EVENT_DELAY = 500;
+var COLLAPSE_DURATION_MS = 220;
+var COLLAPSE_EASING = "cubic-bezier(0.23, 1, 0.32, 1)";
+var colorVariables = {
+  background: "--asr-background",
+  surface: "--asr-surface",
+  border: "--asr-border",
+  text: "--asr-text",
+  muted: "--asr-muted",
+  implementer: "--asr-implementer",
+  reviewer: "--asr-reviewer",
+  success: "--asr-success",
+  danger: "--asr-danger",
+  focus: "--asr-focus"
+};
+function usePrefersReducedMotion() {
+  const [reduced, setReduced] = (0, import_react2.useState)(false);
+  (0, import_react2.useEffect)(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+    const query = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const update = () => setReduced(query.matches);
+    update();
+    query.addEventListener?.("change", update);
+    return () => query.removeEventListener?.("change", update);
+  }, []);
+  return reduced;
+}
+function Agent({ actor, active, agent }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: `asr-agent asr-agent--${actor} ${active ? "asr-is-active" : ""}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "asr-agent-avatar", "aria-hidden": "true", children: "\u2723" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("strong", { children: agent.name }),
+      " ",
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: agent.role }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("p", { children: [
+        "its context: ",
+        agent.context
+      ] })
+    ] })
+  ] });
+}
+function Block({ block }) {
+  const codeLike = block.kind === "code" || block.kind === "patch" || block.kind === "tool_output";
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("section", { className: `asr-chat-block asr-chat-block--${block.kind}`, children: [
+    block.title && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("header", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: block.kind.replace("_", " ") }),
+      block.title
+    ] }),
+    block.kind === "git_diff" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(GitDiffBlock, { content: block.content }) : codeLike ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("pre", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("code", { children: block.content }) }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { children: block.content })
+  ] });
+}
+function ExpandedEvent({ event, visibleEvent, typing }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("article", { className: `asr-expanded-event asr-expanded-event--${event.actor}`, "aria-label": event.title, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "asr-event-heading", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: event.actor === "implementer" ? "\u2723 claude" : "adversarial reviewer \u2723" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("strong", { children: event.title })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "asr-blocks", children: visibleEvent.blocks.map((block) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Block, { block }, block.id)) }),
+    typing && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "asr-typing-caret", "aria-hidden": "true" })
+  ] });
+}
+function EventSummaryContent({ event, index }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: String(index + 1).padStart(2, "0") }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("strong", { children: event.title }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { children: event.summary }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "asr-disclosure", "aria-hidden": "true", children: "\u2304" })
+  ] });
+}
+function EventSummaryRow({ event, index, contentId, onToggle, className = "" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "button",
+    {
+      type: "button",
+      className: `asr-event-summary-row asr-event-summary-row--${event.actor}${className ? ` ${className}` : ""}`,
+      "aria-expanded": "false",
+      "aria-controls": contentId,
+      "aria-label": `Expand ${event.title}`,
+      onClick: onToggle,
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(EventSummaryContent, { event, index })
+    }
+  );
+}
+function CompletedEvent({ event, index, expanded, onToggle }) {
+  const contentId = `asr-event-${event.id}`;
+  if (!expanded) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "asr-completed-event", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(EventSummaryRow, { event, index, contentId, onToggle }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { id: contentId, hidden: true })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("article", { className: `asr-expanded-event asr-expanded-event--${event.actor}`, "aria-label": event.title, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      "button",
+      {
+        type: "button",
+        className: "asr-expanded-toggle",
+        "aria-expanded": "true",
+        "aria-controls": contentId,
+        "aria-label": `Collapse ${event.title}`,
+        onClick: onToggle,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: event.actor === "implementer" ? "\u2723 claude" : "adversarial reviewer \u2723" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("strong", { children: event.title }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "asr-disclosure", "aria-hidden": "true", children: "\u2303" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "asr-blocks", id: contentId, children: event.blocks.map((block) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Block, { block }, block.id)) })
+  ] });
+}
+function CollapsingEvent({
+  event,
+  index,
+  reduceMotion,
+  onComplete
+}) {
+  const shellRef = (0, import_react2.useRef)(null);
+  const expandedRef = (0, import_react2.useRef)(null);
+  const summaryRef = (0, import_react2.useRef)(null);
+  (0, import_react2.useEffect)(() => {
+    const shell = shellRef.current;
+    const expanded = expandedRef.current;
+    const summary = summaryRef.current;
+    if (!shell || !expanded || !summary) return;
+    if (reduceMotion || typeof shell.animate !== "function") {
+      onComplete();
+      return;
+    }
+    let cancelled = false;
+    const options = {
+      duration: COLLAPSE_DURATION_MS,
+      easing: COLLAPSE_EASING,
+      fill: "forwards"
+    };
+    const shellAnimation = shell.animate([
+      { height: `${shell.scrollHeight}px` },
+      { height: "46px" }
+    ], options);
+    const expandedAnimation = expanded.animate([
+      { opacity: 1, transform: "translateY(0)" },
+      { opacity: 0, transform: "translateY(-6px)" }
+    ], options);
+    const summaryAnimation = summary.animate([
+      { opacity: 0, transform: "translateY(6px)" },
+      { opacity: 1, transform: "translateY(0)" }
+    ], options);
+    void shellAnimation.finished.then(() => {
+      if (!cancelled) onComplete();
+    }).catch(() => void 0);
+    return () => {
+      cancelled = true;
+      shellAnimation.cancel();
+      expandedAnimation.cancel();
+      summaryAnimation.cancel();
+    };
+  }, [event.id, onComplete, reduceMotion]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "asr-collapse-shell", ref: shellRef, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "asr-collapse-expanded", ref: expandedRef, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ExpandedEvent, { event, visibleEvent: event, typing: false }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "asr-collapse-summary", ref: summaryRef, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: `asr-event-summary-row asr-event-summary-row--${event.actor}`, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(EventSummaryContent, { event, index }) }) })
+  ] });
+}
+function AgentSessionReplayer(props) {
+  const {
+    agents,
+    cases,
+    typingSpeed,
+    eventDelayMs,
+    height,
+    colors,
+    caseIndex,
+    initialCaseIndex,
+    className,
+    onCaseChange,
+    onEventStart,
+    onEventComplete,
+    onCaseComplete
+  } = parseReplayerProps({
+    ...props,
+    typingSpeed: props.typingSpeed === void 0 ? DEFAULT_TYPING_SPEED : props.typingSpeed,
+    eventDelayMs: props.eventDelayMs === void 0 ? DEFAULT_EVENT_DELAY : props.eventDelayMs,
+    height: props.height === void 0 ? 720 : props.height,
+    initialCaseIndex: props.initialCaseIndex === void 0 ? 0 : props.initialCaseIndex
+  });
+  const controlled = caseIndex !== void 0;
+  const [internalCaseIndex, setInternalCaseIndex] = (0, import_react2.useState)(initialCaseIndex);
+  const resolvedCaseIndex = controlled ? caseIndex : internalCaseIndex;
+  const [state, dispatch] = (0, import_react2.useReducer)(playbackReducer, void 0, initialPlaybackState);
+  const [generation, bumpGeneration] = (0, import_react2.useReducer)((value) => value + 1, 0);
+  const [expandedEventIds, setExpandedEventIds] = (0, import_react2.useState)(() => /* @__PURE__ */ new Set());
+  const reduceMotion = usePrefersReducedMotion();
+  const transcriptRef = (0, import_react2.useRef)(null);
+  const started = (0, import_react2.useRef)(/* @__PURE__ */ new Set());
+  const completed = (0, import_react2.useRef)(/* @__PURE__ */ new Set());
+  const completedCases = (0, import_react2.useRef)(/* @__PURE__ */ new Set());
+  const previousCase = (0, import_react2.useRef)(resolvedCaseIndex);
+  const activeCase = cases[resolvedCaseIndex];
+  const caseChanged = previousCase.current !== resolvedCaseIndex;
+  const eventIndex = caseChanged ? 0 : state.eventIndex;
+  const revealOffset = caseChanged ? 0 : state.revealOffset;
+  const phase = caseChanged ? "typing" : state.phase;
+  const event = activeCase.events[eventIndex];
+  const visibleEvent = (0, import_react2.useMemo)(() => revealEvent(event, revealOffset), [event, revealOffset]);
+  const finishCollapse = (0, import_react2.useCallback)(() => {
+    dispatch({ type: "FINISH_COLLAPSE", eventIndex });
+  }, [eventIndex]);
+  (0, import_react2.useEffect)(() => {
+    if (previousCase.current === resolvedCaseIndex) return;
+    previousCase.current = resolvedCaseIndex;
+    setExpandedEventIds(/* @__PURE__ */ new Set());
+    bumpGeneration();
+    dispatch({ type: "RESTART" });
+  }, [resolvedCaseIndex]);
+  (0, import_react2.useEffect)(() => {
+    if (caseChanged) return;
+    const key = `${generation}:${activeCase.id}:${event.id}`;
+    if (!started.current.has(key)) {
+      started.current.add(key);
+      onEventStart?.(event, activeCase);
+    }
+  }, [activeCase, caseChanged, event, generation, onEventStart]);
+  (0, import_react2.useEffect)(() => {
+    if (caseChanged) return;
+    if (phase === "typing") {
+      if (reduceMotion) {
+        dispatch({ type: "COMPLETE_EVENT", item: activeCase, eventIndex });
+        return;
+      }
+      const timer = window.setTimeout(() => dispatch({ type: "TICK", item: activeCase, eventIndex, amount: 1 }), 1e3 / typingSpeed);
+      return () => window.clearTimeout(timer);
+    }
+    if (phase === "between-events") {
+      const timer = window.setTimeout(() => dispatch({ type: "ADVANCE_EVENT", eventIndex }), eventDelayMs);
+      return () => window.clearTimeout(timer);
+    }
+  }, [activeCase, caseChanged, eventDelayMs, eventIndex, phase, reduceMotion, revealOffset, typingSpeed]);
+  (0, import_react2.useEffect)(() => {
+    if (phase === "typing") return;
+    const key = `${generation}:${activeCase.id}:${event.id}`;
+    if (!completed.current.has(key)) {
+      completed.current.add(key);
+      onEventComplete?.(event, activeCase);
+    }
+    if (phase === "case-complete") {
+      const caseKey = `${generation}:${activeCase.id}`;
+      if (!completedCases.current.has(caseKey)) {
+        completedCases.current.add(caseKey);
+        onCaseComplete?.(activeCase);
+      }
+    }
+  }, [activeCase, event, generation, onCaseComplete, onEventComplete, phase]);
+  (0, import_react2.useEffect)(() => {
+    const transcript = transcriptRef.current;
+    if (!transcript || transcript.scrollHeight <= transcript.clientHeight) return;
+    transcript.scrollTo({ top: transcript.scrollHeight, behavior: reduceMotion ? "auto" : "smooth" });
+    const bottomGap = transcript.scrollHeight - transcript.clientHeight - transcript.scrollTop;
+    if (bottomGap > 1) transcript.scrollTop = transcript.scrollHeight;
+  }, [eventIndex, reduceMotion, resolvedCaseIndex, revealOffset, visibleEvent.blocks.length]);
+  const requestCase = (nextIndex) => {
+    if (nextIndex === resolvedCaseIndex || nextIndex < 0 || nextIndex >= cases.length) return;
+    if (!controlled) {
+      setInternalCaseIndex(nextIndex);
+      dispatch({ type: "RESTART" });
+    }
+    onCaseChange?.(nextIndex, cases[nextIndex]);
+  };
+  const restart = () => {
+    setExpandedEventIds(/* @__PURE__ */ new Set());
+    bumpGeneration();
+    dispatch({ type: "RESTART" });
+  };
+  const toggleEvent = (eventId) => {
+    setExpandedEventIds((current) => {
+      const next = new Set(current);
+      if (next.has(eventId)) next.delete(eventId);
+      else next.add(eventId);
+      return next;
+    });
+  };
+  const style = {
+    ...Object.fromEntries(Object.entries(colors ?? {}).map(([key, value]) => [colorVariables[key], value])),
+    "--asr-height": `${height}px`,
+    height: `${height}px`
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("section", { "data-agent-session-replayer": true, className: `asr-root${className ? ` ${className}` : ""}`, style, "aria-label": "Two-agent review conversation", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "asr-chat-stage", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("header", { className: "asr-frame-header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "asr-workflow-line", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "asr-brand", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "\u2723" }),
+          " Claude Code \xB7 Dynamic workflow"
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "asr-review-label", children: "Adversarial review" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("p", { className: "asr-case-summary", children: [
+        cases.length,
+        " bugs caught by adversarial review before merge"
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "asr-case-nav", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "asr-case-progress", children: [
+          "Case ",
+          resolvedCaseIndex + 1,
+          " of ",
+          cases.length
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h2", { className: "asr-case-title", children: activeCase.title }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "asr-repository", children: [
+          activeCase.repository,
+          " \xB7 ",
+          activeCase.branch,
+          " \xB7 ",
+          phase === "case-complete" ? "Case complete" : `Message ${eventIndex + 1} of ${activeCase.events.length}`
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "asr-controls", "aria-label": "Playback controls", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "button", onClick: () => requestCase(resolvedCaseIndex - 1), disabled: resolvedCaseIndex === 0, "aria-label": "Previous case", children: "\u2190" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "button", onClick: restart, "aria-label": "Restart case", children: "Restart" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "button", className: "asr-next-button", onClick: () => requestCase(resolvedCaseIndex + 1), disabled: resolvedCaseIndex === cases.length - 1, children: "Next case \u2192" })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "asr-agent-row", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Agent, { actor: "implementer", active: event.actor === "implementer", agent: agents.implementer }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Agent, { actor: "reviewer", active: event.actor === "reviewer", agent: agents.reviewer })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "asr-transcript", ref: transcriptRef, children: [
+      activeCase.events.slice(0, eventIndex).map((past, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CompletedEvent, { event: past, index, expanded: expandedEventIds.has(past.id), onToggle: () => toggleEvent(past.id) }, past.id)),
+      phase === "collapsing" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CollapsingEvent, { event, index: eventIndex, reduceMotion, onComplete: finishCollapse }) : phase === "between-events" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CompletedEvent, { event, index: eventIndex, expanded: expandedEventIds.has(event.id), onToggle: () => toggleEvent(event.id) }, event.id) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ExpandedEvent, { event, visibleEvent, typing: phase === "typing" }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "asr-live-status", "aria-live": "polite", children: phase === "case-complete" ? `${activeCase.title} complete.` : `Autoplaying ${event.title}.` }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("footer", { className: "asr-footer", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Scripted playback: each reviewer receives only the diff and is told to find how it is wrong. No live model is running." }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("a", { className: "asr-watermark", href: "https://devos.ing", target: "_blank", rel: "noopener noreferrer", children: "devos" })
+    ] })
+  ] }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AgentSessionReplayer
+});
+//# sourceMappingURL=index.cjs.map