@syrin/iris 0.6.10 → 0.8.0

package/dist/index.js

@@ -1,32 +1,4 @@
-// ../protocol/dist/constants.js
-var IRIS_DEFAULT_PORT = 4400;
-var IRIS_WS_PATH = "/iris";
-var IRIS_PROTOCOL_VERSION = 1;
-var TRANSPORT_LIMITS = {
-  MAX_MESSAGE_BYTES: 1024 * 1024,
-  MAX_MESSAGES_PER_SECOND: 1e3,
-  MAX_SESSIONS: 32,
-  MAX_PENDING_CONNECTIONS: 16,
-  HELLO_TIMEOUT_MS: 5e3,
-  MAX_BUFFER_BYTES: 8 * 1024 * 1024,
-  MAX_SESSION_ID_LENGTH: 128,
-  MAX_URL_LENGTH: 4096,
-  MAX_TITLE_LENGTH: 512,
-  MAX_ADAPTERS: 32,
-  MAX_ADAPTER_NAME_LENGTH: 128,
-  MAX_TOKEN_LENGTH: 512,
-  MAX_COMMAND_ID_LENGTH: 128,
-  MAX_COMMAND_NAME_LENGTH: 128,
-  MAX_REF_LENGTH: 128,
-  MAX_ERROR_LENGTH: 4096,
-  MAX_SERIALIZE_DEPTH: 8,
-  MAX_COLLECTION_ITEMS: 200,
-  MAX_OBJECT_KEYS: 200,
-  MAX_STRING_LENGTH: 64 * 1024
-};
-var REDACTED_VALUE = "[REDACTED]";
-var DANGEROUS_ACTION_CONFIRM_ARG = "confirmDangerous";
-var UpdateCheckIntervalMs = 24 * 60 * 60 * 1e3;
+// ../protocol/dist/flow-constants.js
 var RunKind = {
   FLOW_REPLAY: "flow_replay",
   // auto-recorded by iris_flow_replay
@@ -45,8 +17,10 @@ var AnchorKind = {
   // { kind:'testid', value }
   ROLE: "role",
   // { kind:'role', role, name? } — best-effort fallback
-  SIGNAL: "signal"
+  SIGNAL: "signal",
   // { kind:'signal', name } — wait/assert anchors
+  COMPONENT: "component"
+  // { kind:'component', component?, source?, role?, name? } — auto-anchor (no testid)
 };
 var DEGRADED_ANCHOR_ROLE = "unresolved";
 var AnnotationKind = {
@@ -54,10 +28,14 @@ var AnnotationKind = {
   // → step.expect.signal  (invariant)
   ASSERT_VISIBLE: "assert-visible",
   // → step.expect.element (invariant)
+  ASSERT_STATE: "assert-state",
+  // → step.expect.state   (store-truth invariant on the last step)
   MARK_DYNAMIC: "mark-dynamic",
   // → flow.dynamic[]      (don't assert words/content)
-  SUCCESS_STATE: "success-state"
+  SUCCESS_STATE: "success-state",
   // → flow.success        (golden end condition)
+  INTENT: "intent"
+  // → flow.intent         (the business goal this flow exists to verify)
 };
 var RecorderPhase = {
   IDLE: "idle",
@@ -67,6 +45,40 @@ var RecorderPhase = {
   ANNOTATING: "annotating"
   // recording paused, awaiting an annotation target/kind
 };
+
+// ../protocol/dist/constants.js
+var IRIS_DEFAULT_PORT = 4400;
+var IRIS_WS_PATH = "/iris";
+var IRIS_PROTOCOL_VERSION = 1;
+var TRANSPORT_LIMITS = {
+  MAX_MESSAGE_BYTES: 1024 * 1024,
+  MAX_MESSAGES_PER_SECOND: 1e3,
+  MAX_SESSIONS: 32,
+  MAX_PENDING_CONNECTIONS: 16,
+  HELLO_TIMEOUT_MS: 5e3,
+  MAX_BUFFER_BYTES: 8 * 1024 * 1024,
+  MAX_SESSION_ID_LENGTH: 128,
+  MAX_URL_LENGTH: 4096,
+  MAX_TITLE_LENGTH: 512,
+  MAX_ADAPTERS: 32,
+  MAX_ADAPTER_NAME_LENGTH: 128,
+  MAX_TOKEN_LENGTH: 512,
+  MAX_COMMAND_ID_LENGTH: 128,
+  MAX_COMMAND_NAME_LENGTH: 128,
+  MAX_REF_LENGTH: 128,
+  MAX_ERROR_LENGTH: 4096,
+  MAX_SERIALIZE_DEPTH: 8,
+  MAX_COLLECTION_ITEMS: 200,
+  MAX_OBJECT_KEYS: 200,
+  MAX_STRING_LENGTH: 64 * 1024,
+  /** Human review marks: the note the human types when flagging a mistake on the page. */
+  MAX_MARK_NOTE_LENGTH: 2e3,
+  /** Human review marks: the legible element label that pins the mark (e.g. "Submit button"). */
+  MAX_MARK_LABEL_LENGTH: 256
+};
+var REDACTED_VALUE = "[REDACTED]";
+var DANGEROUS_ACTION_CONFIRM_ARG = "confirmDangerous";
+var UpdateCheckIntervalMs = 24 * 60 * 60 * 1e3;
 var RING_BUFFER_DEFAULTS = {
   MAX_EVENTS: 2e3,
   MAX_AGE_MS: 6e4,
@@ -102,19 +114,37 @@ var EventType = {
    * Live-control: browser → bridge. A human acted on the presenter panel.
    * `data: { kind: HumanControlKind; text?: string }`. Rides the existing EventMessage.
    */
-  HUMAN_CONTROL: "human.control"
+  HUMAN_CONTROL: "human.control",
+  /**
+   * Human review: browser → bridge. A human pinned a mistake to an element on the running page
+   * (the "annotate the bug where you see it" loop). `data` narrows to HumanMarkDataSchema — a note
+   * plus a re-resolvable element anchor (and its source file:line when the framework stamped one) so
+   * the agent that drains the mark knows exactly which element and which source to fix.
+   */
+  HUMAN_MARK: "human.mark"
 };
 var SessionState = {
   ACTIVE: "active",
   PAUSED: "paused",
   ENDED: "ended"
 };
+function isSessionState(value) {
+  return value === SessionState.ACTIVE || value === SessionState.PAUSED || value === SessionState.ENDED;
+}
 var SESSION_AUTO = "auto";
 var HumanControlKind = {
   PAUSE: "pause",
   RESUME: "resume",
   END: "end",
-  MESSAGE: "message"
+  MESSAGE: "message",
+  /** Human clicked ▶ on a saved flow in the panel — replay it (no agent). `text` carries the name. */
+  REPLAY: "replay"
+};
+var MarkAnchorStrategy = {
+  TESTID: "testid",
+  COMPONENT: "component",
+  ROLE: "role",
+  POSITION: "position"
 };
 var SESSION_HEALTH = {
   HEARTBEAT_MS: 5e3,
@@ -122,7 +152,11 @@ var SESSION_HEALTH = {
   STALE_THRESHOLD_MS: 12e3
 };
 var SESSION_LIFECYCLE = {
-  /** Default agent-idle window before the server reaps a session. Agent-tunable via iris_session. */
+  /**
+   * Default agent-idle window before the panel hands back to the human as WAITING. The agent signals
+   * this IMMEDIATELY via iris_yield; this reaper is only the slow backstop for a forgotten yield, so
+   * it's deliberately long (a short window would auto-end a session mid slow-step). iris_session-tunable.
+   */
   IDLE_END_MS: 3e5,
   /** Floor for a tuned idle window (so an agent can't disable the safety net). */
   IDLE_END_MIN_MS: 5e3,
@@ -191,7 +225,10 @@ var QueryBy = {
   LABEL: "label",
   PLACEHOLDER: "placeholder",
   TESTID: "testid",
-  ALT: "alt"
+  ALT: "alt",
+  /** Resolve by component identity / source location (auto-anchors — addresses any element with
+   * no hand-added testid). Pair with ElementQuery.component and/or .source. */
+  COMPONENT: "component"
 };
 var IrisCommand = {
   SNAPSHOT: "snapshot",
@@ -217,7 +254,9 @@ var IrisCommand = {
   /** Navigate the page to a new URL. `args: { url: string }`. */
   NAVIGATE: "navigate",
   /** Reload the page. `args: { hard?: boolean }` — hard clears the cache via location replace trick. */
-  REFRESH: "refresh"
+  REFRESH: "refresh",
+  /** Bridge → browser: the saved flows the human can replay from the panel. `args: { flows: [{name}] }`. */
+  FLOWS: "flows"
 };
 var PresenterMode = {
   IDLE: "idle",
@@ -236,6 +275,17 @@ var MessageKind = {
   EVENT: "event"
 };
 
+// ../protocol/dist/notices.js
+var PresenterTone = {
+  CALM: "calm",
+  WAITING: "waiting",
+  ASK: "ask",
+  WARN: "warn"
+};
+function isPresenterTone(value) {
+  return value === PresenterTone.CALM || value === PresenterTone.WAITING || value === PresenterTone.ASK || value === PresenterTone.WARN;
+}
+
 // ../protocol/dist/messages.js
 import { z } from "zod";
 var sessionIdSchema = z.string().min(1).max(TRANSPORT_LIMITS.MAX_SESSION_ID_LENGTH);
@@ -244,6 +294,20 @@ var HumanControlDataSchema = z.object({
   kind: z.nativeEnum(HumanControlKind),
   text: z.string().optional()
 });
+var HumanMarkDataSchema = z.object({
+  note: z.string().min(1).max(TRANSPORT_LIMITS.MAX_MARK_NOTE_LENGTH),
+  anchor: z.string().max(TRANSPORT_LIMITS.MAX_REF_LENGTH),
+  strategy: z.nativeEnum(MarkAnchorStrategy),
+  /** Human-legible element label (role + accessible name / text), to show the agent what was flagged. */
+  label: z.string().max(TRANSPORT_LIMITS.MAX_MARK_LABEL_LENGTH).optional(),
+  /** Source file:line stamped by the framework's compiler/plugin, when available. */
+  source: z.object({
+    file: z.string().max(TRANSPORT_LIMITS.MAX_URL_LENGTH),
+    line: z.number().int().min(0)
+  }).optional(),
+  /** Route/URL the mark was made on, so the agent can reproduce the context. */
+  route: z.string().max(TRANSPORT_LIMITS.MAX_URL_LENGTH).optional()
+});
 var IrisEventSchema = z.object({
   t: z.number(),
   type: z.nativeEnum(EventType),
@@ -309,6 +373,54 @@ function isDangerousActionText(text) {
   return DANGEROUS_ACTION.test(text.replace(/[_-]+/g, " "));
 }
 
+// ../protocol/dist/state-select.js
+function keysOf(value) {
+  if (Array.isArray(value))
+    return value.map((_, i) => String(i));
+  if (typeof value === "object" && value !== null)
+    return Object.keys(value);
+  return [];
+}
+function selectPath(root, path) {
+  const segments = path.split(".").filter((s) => s.length > 0);
+  let current = root;
+  for (const segment of segments) {
+    if (Array.isArray(current)) {
+      const index = Number(segment);
+      if (!Number.isInteger(index) || index < 0 || index >= current.length) {
+        return { found: false, value: null, availableKeys: keysOf(current) };
+      }
+      current = current[index];
+      continue;
+    }
+    if (typeof current === "object" && current !== null && segment in current) {
+      current = current[segment];
+      continue;
+    }
+    return { found: false, value: null, availableKeys: keysOf(current) };
+  }
+  return { found: true, value: current };
+}
+function capDepth(value, maxDepth) {
+  if (maxDepth < 0)
+    return value;
+  if (Array.isArray(value)) {
+    if (maxDepth === 0)
+      return `[Array(${String(value.length)})]`;
+    return value.map((v) => capDepth(v, maxDepth - 1));
+  }
+  if (typeof value === "object" && value !== null) {
+    const keys = Object.keys(value);
+    if (maxDepth === 0)
+      return `{\u2026${String(keys.length)} keys}`;
+    const out = {};
+    for (const key of keys)
+      out[key] = capDepth(value[key], maxDepth - 1);
+    return out;
+  }
+  return value;
+}
+
 // ../protocol/dist/types.js
 import { z as z2 } from "zod";
 var ElementQuerySchema = z2.object({
@@ -321,6 +433,10 @@ var ElementQuerySchema = z2.object({
   placeholder: z2.string().optional(),
   testid: z2.string().optional(),
   alt: z2.string().optional(),
+  /** Component display name (auto-anchor resolution). The nearest enclosing component of the target. */
+  component: z2.string().optional(),
+  /** Source location of the target element (auto-anchor resolution) — the precise, granular match. */
+  source: z2.object({ file: z2.string(), line: z2.number(), column: z2.number().optional() }).optional(),
   /** CSS selector or ref to scope the search. */
   scope: z2.string().optional()
 });
@@ -369,7 +485,16 @@ var FlowAnchorSchema = z2.discriminatedUnion("kind", [
     role: z2.string().min(1),
     name: z2.string().optional()
   }),
-  z2.object({ kind: z2.literal(AnchorKind.SIGNAL), name: z2.string().min(1) })
+  z2.object({ kind: z2.literal(AnchorKind.SIGNAL), name: z2.string().min(1) }),
+  // Auto-anchor: re-find an element by component identity / source location when it has no testid.
+  // component or source carries the durable signal; role/name are disambiguating extras.
+  z2.object({
+    kind: z2.literal(AnchorKind.COMPONENT),
+    component: z2.string().optional(),
+    source: z2.object({ file: z2.string(), line: z2.number(), column: z2.number().optional() }).optional(),
+    role: z2.string().optional(),
+    name: z2.string().optional()
+  })
 ]);
 var FlowExpectSchema = z2.object({
   signal: z2.string().optional(),
@@ -382,12 +507,45 @@ var FlowExpectSchema = z2.object({
   net: z2.object({
     method: z2.string().optional(),
     urlContains: z2.string().optional(),
-    status: z2.number().optional()
+    status: z2.number().optional(),
+    /**
+     * Exact number of matching requests since the action — turns presence into a cardinality
+     * assertion. Catches the double-submit / useEffect-double-fire / retry-storm regression class:
+     * the request fired (presence passes) but fired the WRONG number of times. Omit = presence (≥1).
+     */
+    count: z2.number().int().nonnegative().optional()
+  }).optional(),
+  /**
+   * Console golden end-condition: assert the action logged (or, with absent:true, did NOT log) a
+   * console message at `level` (default 'error'). `absent:true` is the common case — "the action
+   * completed with a clean console" — catching the regression where an action throws a caught error
+   * / logs an uncaught rejection while the UI still renders fine (a presence check passes it).
+   */
+  console: z2.object({
+    level: z2.string().optional(),
+    absent: z2.boolean().optional()
   }).optional(),
   element: z2.object({
     testid: z2.string().optional(),
     role: z2.string().optional(),
     name: z2.string().optional()
+  }).optional(),
+  /**
+   * Assert a registered store's value — the source of truth no DOM/network read can reach. Compiles
+   * to the predicate engine's `state` predicate. Additive/optional — a flow without it still parses
+   * and the on-disk version stays FLOW_FILE_VERSION 1. `equals` accepts a literal, omitted = presence,
+   * or a `{ $gte | $contains | $length }` operator pattern.
+   */
+  state: z2.object({
+    store: z2.string().optional(),
+    path: z2.string(),
+    equals: z2.unknown().optional(),
+    /**
+     * Treat this as an INVARIANT that must still hold AFTER the action settles, rather than a
+     * condition to wait for. Set it for a blast-radius check ("this unrelated path must NOT have
+     * moved") — without it a wait-until-true read passes before an over-reaching side-effect lands.
+     */
+    hold: z2.boolean().optional()
   }).optional()
 });
 var baseFlowStep = z2.object({
@@ -404,6 +562,14 @@ var FlowStepSchema = baseFlowStep.extend({
 var FlowFileSchema = z2.object({
   version: z2.literal(FLOW_FILE_VERSION),
   name: z2.string(),
+  /**
+   * The business goal this flow exists to verify, one line (e.g. "ship a deploy to production").
+   * Optional + back-compat (a flow without it still parses). Set via an `intent` annotation. The
+   * point of "intent + outcome oracle": a flow that declares an intent should also assert an
+   * observable business OUTCOME (a consequence success-state), or it claims to verify a goal it
+   * cannot actually check — flow-classify flags that gap.
+   */
+  intent: z2.string().optional(),
   // FUTURE: fixtures/preconditions — schema slot reserved, unpopulated this cut. The recorder
   // never writes it and no fixture runner exists.
   fixture: z2.string().optional(),
@@ -431,6 +597,12 @@ var AnnotationSchema = z2.discriminatedUnion("kind", [
     kind: z2.literal(AnnotationKind.ASSERT_VISIBLE),
     testid: z2.string().min(1)
   }),
+  z2.object({
+    kind: z2.literal(AnnotationKind.ASSERT_STATE),
+    statePath: z2.string().min(1),
+    store: z2.string().min(1).optional(),
+    equals: z2.unknown().optional()
+  }),
   z2.object({
     kind: z2.literal(AnnotationKind.MARK_DYNAMIC),
     testid: z2.string().min(1)
@@ -438,7 +610,34 @@ var AnnotationSchema = z2.discriminatedUnion("kind", [
   z2.object({
     kind: z2.literal(AnnotationKind.SUCCESS_STATE),
     signal: z2.string().min(1).optional(),
-    testid: z2.string().min(1).optional()
+    testid: z2.string().min(1).optional(),
+    // A store-truth golden end-condition: the flow succeeds when this store path holds (e.g. the
+    // created deployment actually reached status 'live' in the store, not just on screen).
+    statePath: z2.string().min(1).optional(),
+    store: z2.string().min(1).optional(),
+    equals: z2.unknown().optional(),
+    // Treat the statePath as an INVARIANT that must hold AFTER settle (a blast-radius "this unrelated
+    // path must not have moved" check), not a condition to wait for.
+    hold: z2.boolean().optional(),
+    // A network-cardinality golden end-condition: the flow succeeds only when EXACTLY `count` matching
+    // requests fired (omit count = presence). Catches the double-submit / retry-storm regression class.
+    net: z2.object({
+      method: z2.string().min(1).optional(),
+      urlContains: z2.string().min(1).optional(),
+      status: z2.number().optional(),
+      count: z2.number().int().nonnegative().optional()
+    }).optional(),
+    // A console golden end-condition: with absent:true, "the action completed with a clean console"
+    // (no message at `level`, default 'error') — catches an action that logs a caught error / rejection
+    // while the UI still renders fine.
+    console: z2.object({
+      level: z2.string().min(1).optional(),
+      absent: z2.boolean().optional()
+    }).optional()
+  }),
+  z2.object({
+    kind: z2.literal(AnnotationKind.INTENT),
+    text: z2.string().min(1)
   })
 ]);
 
@@ -480,7 +679,7 @@ var OMIT_VALUE = /* @__PURE__ */ Symbol("omit");
 var MAX_KEY_LENGTH = 256;
 var MAX_TOTAL_CHARACTERS = Math.floor(TRANSPORT_LIMITS.MAX_MESSAGE_BYTES / 8);
 var MAX_TOTAL_NODES = TRANSPORT_LIMITS.MAX_COLLECTION_ITEMS * 5;
-var SENSITIVE_KEY = /password|passwd|passcode|secret|token|authorization|api[-_]?key|access[-_]?key|private[-_]?key|client[-_]?secret|credit[-_]?card|card[-_]?number|cvv|cvc|ssn/i;
+var SENSITIVE_KEY = /password|passwd|passcode|secret|(?:(?:access|refresh|auth|bearer|api|id|session|csrf|client)[-_]?tokens?|(?:^|[-_])tokens?(?=$|[-_]))|authorization|api[-_]?key|access[-_]?key|private[-_]?key|client[-_]?secret|credit[-_]?card|card[-_]?number|cvv|cvc|ssn/i;
 function isSensitiveKey(key) {
   return SENSITIVE_KEY.test(key);
 }
@@ -801,8 +1000,8 @@ function isIrisOverlay(el) {
   return el.closest(IRIS_OVERLAY) !== null;
 }
 function isIgnored(el) {
-  const sel = extraIgnore.length > 0 ? `${IRIS_OVERLAY},${DEV_OVERLAYS},${extraIgnore}` : `${IRIS_OVERLAY},${DEV_OVERLAYS}`;
-  return el.closest(sel) !== null;
+  const sel2 = extraIgnore.length > 0 ? `${IRIS_OVERLAY},${DEV_OVERLAYS},${extraIgnore}` : `${IRIS_OVERLAY},${DEV_OVERLAYS}`;
+  return el.closest(sel2) !== null;
 }
 
 // ../browser/dist/dom/snapshot.js
@@ -822,6 +1021,16 @@ var INTERACTIVE = /* @__PURE__ */ new Set([
   "option"
 ]);
 var SKIP_TAGS = /* @__PURE__ */ new Set(["script", "style", "noscript", "template", "head", "meta", "link"]);
+var TEXT_MAX = 80;
+function directText(el) {
+  let out = "";
+  for (const node of el.childNodes) {
+    if (node.nodeType === 3)
+      out += node.textContent ?? "";
+  }
+  const collapsed = out.replace(/\s+/g, " ").trim();
+  return collapsed.length > TEXT_MAX ? `${collapsed.slice(0, TEXT_MAX)}\u2026` : collapsed;
+}
 function skip(el) {
   if (SKIP_TAGS.has(el.tagName.toLowerCase()))
     return true;
@@ -843,13 +1052,29 @@ function stateSuffix(el) {
   const states = getStates(el).filter((s) => s === ElementState.DISABLED || s === ElementState.CHECKED || s === ElementState.EXPANDED || s === ElementState.FOCUSED);
   return states.length > 0 ? ` [${states.join(",")}]` : "";
 }
-function formatLine(el, depth, role, name) {
+function formatLine(el, depth, role, name, layout) {
   const indent = "  ".repeat(depth);
   const value = getValue(el);
   const namePart = name.length > 0 ? ` "${name}"` : "";
   const refPart = INTERACTIVE.has(role) || name.length > 0 ? ` (ref=${refs.refFor(el)})` : "";
   const valuePart = value !== void 0 && value.length > 0 ? ` [value="${value}"]` : "";
-  return `${indent}- ${role}${namePart}${refPart}${valuePart}${stateSuffix(el)}`;
+  const layoutPart = layout.length > 0 ? ` [${layout}]` : "";
+  return `${indent}- ${role}${namePart}${refPart}${valuePart}${layoutPart}${stateSuffix(el)}`;
+}
+function formatTextLine(depth, text) {
+  return `${"  ".repeat(depth)}- text "${text}"`;
+}
+function layoutSignature(el) {
+  const view = el.ownerDocument.defaultView;
+  if (view === null)
+    return "";
+  const style = view.getComputedStyle(el);
+  const display = style.display;
+  if (display === "grid" || display === "inline-grid") {
+    const cols = style.gridTemplateColumns;
+    return cols !== "" && cols !== "none" ? `grid-cols:${cols}` : "grid";
+  }
+  return "";
 }
 function walk(parent, depth, ctx) {
   if (depth > ctx.maxDepth)
@@ -864,11 +1089,14 @@ function walk(parent, depth, ctx) {
     const role = getRole(child);
     const name = getAccessibleName(child);
     const interactive = INTERACTIVE.has(role);
-    const meaningful = interactive || role !== "generic" || name.length > 0;
-    const include = ctx.mode === SnapshotMode.INTERACTIVE ? interactive : meaningful;
+    const lean = ctx.mode === SnapshotMode.INTERACTIVE;
+    const text = !lean && role === "generic" && name.length === 0 ? directText(child) : "";
+    const layout = lean ? "" : layoutSignature(child);
+    const meaningful = interactive || role !== "generic" || name.length > 0 || text.length > 0 || layout.length > 0;
+    const include = lean ? interactive : meaningful;
     if (include) {
       ctx.nodes += 1;
-      ctx.lines.push(formatLine(child, depth, role, name));
+      ctx.lines.push(text.length > 0 && name.length === 0 && layout.length === 0 ? formatTextLine(depth, text) : formatLine(child, depth, role, name, layout));
       walk(child, depth + 1, ctx);
     } else {
       walk(child, depth, ctx);
@@ -959,9 +1187,50 @@ function hasCapabilities() {
   return capabilities.testids.length > 0 || capabilities.signals.length > 0 || capabilities.stores.length > 0 || capabilities.flows.length > 0;
 }
 
+// ../browser/dist/registry/adapters.js
+var globalStore2 = globalThis;
+var adapters = globalStore2.__irisAdapters ??= [];
+function registerAdapter(adapter) {
+  if (!adapters.some((a) => a.name === adapter.name))
+    adapters.push(adapter);
+}
+function identifyComponent(el) {
+  for (const adapter of adapters) {
+    const info = adapter.identify(el);
+    if (info !== null)
+      return info;
+  }
+  return null;
+}
+function readComponentState(el) {
+  for (const adapter of adapters) {
+    if (adapter.readState === void 0)
+      continue;
+    const state = adapter.readState(el);
+    if (state !== void 0)
+      return state;
+  }
+  return void 0;
+}
+function elementHasHoverHandlers(el) {
+  for (const adapter of adapters) {
+    if (adapter.hasHoverHandlers === void 0)
+      continue;
+    if (adapter.hasHoverHandlers(el))
+      return true;
+  }
+  return false;
+}
+function adapterNames() {
+  return adapters.map((a) => a.name);
+}
+
 // ../browser/dist/dom/query.js
 var TESTID_ATTR = "data-testid";
+var SOURCE_ATTR = "data-iris-source";
 var MAX_PRESENT_TESTIDS = 12;
+var MAX_COMPONENT_CANDIDATES = 2e3;
+var COMPONENT_CANDIDATE_SELECTOR = "[data-iris-source], [data-testid], button, a, input, select, textarea, [role]";
 function resolveContainer(scope) {
   const body = document.body;
   if (scope === void 0)
@@ -977,6 +1246,38 @@ function resolveContainer(scope) {
   }
   return body;
 }
+function findBySource(container, source) {
+  const prefix = `${source.file}:${source.line}:`.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
+  try {
+    return Array.from(container.querySelectorAll(`[${SOURCE_ATTR}^="${prefix}"]`));
+  } catch {
+    return [];
+  }
+}
+function findByComponentName(container, component) {
+  const out = [];
+  let scanned = 0;
+  for (const el of Array.from(container.querySelectorAll(COMPONENT_CANDIDATE_SELECTOR))) {
+    if (scanned >= MAX_COMPONENT_CANDIDATES)
+      break;
+    scanned += 1;
+    const info = identifyComponent(el);
+    if (info !== null && info.componentStack[0] === component)
+      out.push(el);
+  }
+  return out;
+}
+function findByComponent(container, query) {
+  if (query.source !== void 0) {
+    const bySource = findBySource(container, query.source);
+    if (bySource.length > 0)
+      return bySource;
+  }
+  if (query.component !== void 0 && query.component.length > 0) {
+    return findByComponentName(container, query.component);
+  }
+  return [];
+}
 function findCandidates(query) {
   const container = resolveContainer(query.scope);
   const by = query.by;
@@ -995,10 +1296,15 @@ function findCandidates(query) {
         return queryAllByTestId(container, value, { exact: true });
       case QueryBy.ALT:
         return queryAllByAltText(container, value, { exact: false });
+      case QueryBy.COMPONENT:
+        return findByComponent(container, { ...query, component: query.component ?? value });
       default:
         return [];
     }
   }
+  if (query.component !== void 0 || query.source !== void 0) {
+    return findByComponent(container, query);
+  }
   if (query.role !== void 0) {
     const options = query.name !== void 0 ? { hidden: true, name: query.name } : { hidden: true };
     return queryAllByRole(container, query.role, options);
@@ -1112,44 +1418,6 @@ function runQuery(query) {
   return { elements: result2.elements };
 }
 
-// ../browser/dist/registry/adapters.js
-var globalStore2 = globalThis;
-var adapters = globalStore2.__irisAdapters ??= [];
-function registerAdapter(adapter) {
-  if (!adapters.some((a) => a.name === adapter.name))
-    adapters.push(adapter);
-}
-function identifyComponent(el) {
-  for (const adapter of adapters) {
-    const info = adapter.identify(el);
-    if (info !== null)
-      return info;
-  }
-  return null;
-}
-function readComponentState(el) {
-  for (const adapter of adapters) {
-    if (adapter.readState === void 0)
-      continue;
-    const state = adapter.readState(el);
-    if (state !== void 0)
-      return state;
-  }
-  return void 0;
-}
-function elementHasHoverHandlers(el) {
-  for (const adapter of adapters) {
-    if (adapter.hasHoverHandlers === void 0)
-      continue;
-    if (adapter.hasHoverHandlers(el))
-      return true;
-  }
-  return false;
-}
-function adapterNames() {
-  return adapters.map((a) => a.name);
-}
-
 // ../browser/dist/timers/native-timers.js
 var g = globalThis;
 var realSetTimeout = typeof g.setTimeout === "function" ? g.setTimeout.bind(g) : null;
@@ -1224,8 +1492,20 @@ function requireElement(ref) {
     throw new Error(`ref '${ref}' is not an HTMLElement`);
   return el;
 }
-var result = (ref, action, effect, settled, settleReason, warning) => {
-  const testid = refs.resolve(ref)?.getAttribute("data-testid") ?? void 0;
+function anchorOf(el) {
+  const testid = el.getAttribute("data-testid") ?? void 0;
+  if (testid !== void 0)
+    return { testid };
+  const info = identifyComponent(el);
+  const out = {};
+  const component = info?.componentStack[0];
+  if (component !== void 0)
+    out.component = component;
+  if (info?.source !== void 0)
+    out.source = info.source;
+  return out;
+}
+var result = (ref, action, effect, settled, settleReason, anchor, warning) => {
   const base = {
     ok: true,
     ref,
@@ -1235,8 +1515,14 @@ var result = (ref, action, effect, settled, settleReason, warning) => {
     settleReason,
     effect
   };
-  if (testid !== void 0)
-    base.testid = testid;
+  if (anchor.testid !== void 0) {
+    base.testid = anchor.testid;
+  } else {
+    if (anchor.component !== void 0)
+      base.component = anchor.component;
+    if (anchor.source !== void 0)
+      base.source = anchor.source;
+  }
   if (warning !== void 0)
     base.warning = warning;
   return base;
@@ -1435,6 +1721,7 @@ async function dispatchFor(el, action, args) {
 async function executeAction(ref, action, args = {}) {
   const el = requireElement(ref);
   assertActionAllowed(el, action, args);
+  const anchor = anchorOf(el);
   const visible = isVisible(el);
   const enabled = enabledOf(el);
   const prevFocus = activeRef(el);
@@ -1477,7 +1764,7 @@ async function executeAction(ref, action, args = {}) {
     scrolledIntoView: geometry.scrolledIntoView
   };
   const warning = geometry.occluded ? ActionWarning.CLICK_OCCLUDED : action === ActionType.HOVER && elementHasHoverHandlers(el) ? ActionWarning.HOVER_NATIVE_ENTER_LEAVE : void 0;
-  return result(ref, action, effect, settled, settleReason, warning);
+  return result(ref, action, effect, settled, settleReason, anchor, warning);
 }
 var sleep = (ms) => new Promise((r) => nativeSetTimeout(r, ms));
 function firePointer(el, type, relatedTarget = null) {
@@ -1573,6 +1860,77 @@ async function executeSequence(steps) {
   return { ok: true, count: steps.length, effects, steps: stepResults };
 }
 
+// ../browser/dist/dom/theme.js
+var cached = null;
+function toRgb(value) {
+  if (value.length === 0)
+    return null;
+  const probe = document.createElement("span");
+  probe.style.color = "";
+  probe.style.color = value;
+  if (probe.style.color === "")
+    return null;
+  probe.style.position = "absolute";
+  probe.style.pointerEvents = "none";
+  document.body.appendChild(probe);
+  const rgb = getComputedStyle(probe).color;
+  probe.remove();
+  return rgb;
+}
+function collectTokens() {
+  const out = {};
+  for (const sheet of Array.from(document.styleSheets)) {
+    let rules = null;
+    try {
+      rules = sheet.cssRules;
+    } catch {
+      continue;
+    }
+    if (rules === null)
+      continue;
+    for (const rule of Array.from(rules)) {
+      if (!(rule instanceof CSSStyleRule))
+        continue;
+      if (!/(^|,)\s*(:root|html)\b/.test(rule.selectorText))
+        continue;
+      for (const prop of Array.from(rule.style)) {
+        if (prop.startsWith("--"))
+          out[prop] = rule.style.getPropertyValue(prop).trim();
+      }
+    }
+  }
+  return out;
+}
+function palette() {
+  if (cached !== null)
+    return cached;
+  const byColor = /* @__PURE__ */ new Map();
+  for (const [name, value] of Object.entries(collectTokens())) {
+    const rgb = toRgb(value);
+    if (rgb !== null && !byColor.has(rgb))
+      byColor.set(rgb, name);
+  }
+  cached = { byColor };
+  return cached;
+}
+function isTransparent(rgb) {
+  return rgb === "rgba(0, 0, 0, 0)" || rgb === "transparent";
+}
+function themeReport(cs) {
+  const p = palette();
+  const colorToken = p.byColor.get(cs.color) ?? null;
+  const backgroundToken = p.byColor.get(cs.backgroundColor) ?? null;
+  const colorOff = !isTransparent(cs.color) && colorToken === null;
+  const bgOff = !isTransparent(cs.backgroundColor) && backgroundToken === null;
+  return {
+    colorToken,
+    backgroundToken,
+    // Only meaningful when a palette exists; an app with no tokens can't violate one.
+    offTheme: p.byColor.size > 0 && (colorOff || bgOff),
+    tokenCount: p.byColor.size
+  };
+}
+
 // ../browser/dist/registry/stores.js
 var globalStore3 = globalThis;
 var stores = globalStore3.__irisStores ??= /* @__PURE__ */ new Map();
@@ -1711,6 +2069,9 @@ function scrollContainer(ref, dy, fraction) {
 function str(value) {
   return typeof value === "string" ? value : void 0;
 }
+function num(value) {
+  return typeof value === "number" ? value : void 0;
+}
 function record(value) {
   return typeof value === "object" && value !== null ? value : {};
 }
@@ -1736,7 +2097,14 @@ function inspect(ref) {
   const component = identifyComponent(el);
   const view = el.ownerDocument.defaultView;
   const cs = view !== null ? view.getComputedStyle(el) : null;
-  const styles = cs !== null ? { color: cs.color, backgroundColor: cs.backgroundColor, opacity: cs.opacity } : null;
+  const styles = cs !== null ? {
+    color: cs.color,
+    backgroundColor: cs.backgroundColor,
+    opacity: cs.opacity,
+    cursor: cs.cursor,
+    display: cs.display,
+    visibility: cs.visibility
+  } : null;
   return {
     ...describe(el),
     tag: el.tagName.toLowerCase(),
@@ -1744,10 +2112,24 @@ function inspect(ref) {
     formAction: el instanceof HTMLButtonElement || el instanceof HTMLInputElement ? el.form?.getAttribute("action") ?? void 0 : void 0,
     formText: el instanceof HTMLButtonElement || el instanceof HTMLInputElement ? el.form?.textContent ?? void 0 : void 0,
     box: { x: rect.x, y: rect.y, width: rect.width, height: rect.height },
+    // True when another element sits over this one's center point — the click would hit the overlay,
+    // not this control (a z-index/overlay bug the DOM tree cannot show).
+    occluded: isOccluded(el, rect),
     styles,
+    // Theme compliance vs the app's design tokens (off-theme colors a DOM tool can't judge).
+    theme: cs !== null ? themeReport(cs) : null,
     component
   };
 }
+function isOccluded(el, rect) {
+  if (rect.width === 0 || rect.height === 0)
+    return false;
+  const doc = el.ownerDocument;
+  if (typeof doc.elementFromPoint !== "function")
+    return false;
+  const top = doc.elementFromPoint(rect.x + rect.width / 2, rect.y + rect.height / 2);
+  return top !== null && top !== el && !el.contains(top);
+}
 function isComponentStateResult(value) {
   return typeof value === "object" && value !== null && "ok" in value && typeof value.ok === "boolean";
 }
@@ -1755,11 +2137,25 @@ var COMPONENT_UNAVAILABLE = {
   ok: false,
   reason: ComponentStateReason.UNAVAILABLE
 };
-function readState(ref, store) {
+function readState(ref, store, path, depth) {
   const stores2 = readStores(store);
+  const names = storeNames();
+  if (path !== void 0 || depth !== void 0) {
+    const base = store !== void 0 ? stores2[store] : { stores: stores2, storeNames: names };
+    const selection = path !== void 0 ? selectPath(base, path) : { found: true, value: base };
+    const value = selection.found && depth !== void 0 ? capDepth(selection.value, depth) : selection.value;
+    return {
+      store,
+      path,
+      found: selection.found,
+      value,
+      ..."availableKeys" in selection ? { availableKeys: selection.availableKeys } : {},
+      storeNames: names
+    };
+  }
   const result2 = {
     stores: stores2,
-    storeNames: storeNames()
+    storeNames: names
   };
   if (ref !== void 0 && ref.length > 0) {
     const el = refs.resolve(ref);
@@ -1828,7 +2224,7 @@ function createCommandRegistry() {
     }
     return { frozen: isClockFrozen() };
   });
-  reg.set(IrisCommand.STATE_READ, (args) => readState(str(args["ref"]), str(args["store"])));
+  reg.set(IrisCommand.STATE_READ, (args) => readState(str(args["ref"]), str(args["store"]), str(args["path"]), num(args["depth"])));
   reg.set(IrisCommand.CAPABILITIES, () => getCapabilities());
   reg.set(IrisCommand.SCROLL, (args) => {
     const dy = args["dy"];
@@ -2080,13 +2476,18 @@ function methodOf(input, init) {
 function installNetwork(emit) {
   const origFetch = window.fetch;
   const callFetch = origFetch.bind(window);
+  let seq2 = 0;
+  const nextId = () => `n${++seq2}`;
   window.fetch = async (input, init) => {
+    const id = nextId();
     const start = performance.now();
     const method = methodOf(input, init);
     const url = urlOf(input);
+    emit(EventType.NET_PENDING, { id, method, url, initiator: "fetch" });
     try {
       const res = await callFetch(input, init);
       emit(EventType.NET_REQUEST, {
+        id,
         method,
         url,
         status: res.status,
@@ -2097,6 +2498,7 @@ function installNetwork(emit) {
       return res;
     } catch (error) {
       emit(EventType.NET_REQUEST, {
+        id,
         method,
         url,
         status: 0,
@@ -2114,15 +2516,17 @@ function installNetwork(emit) {
   const origSend = proto.send;
   const callOpen = origOpen;
   proto.open = function(method, url, ...rest) {
-    meta.set(this, { method: method.toUpperCase(), url: String(url), start: 0 });
+    meta.set(this, { id: nextId(), method: method.toUpperCase(), url: String(url), start: 0 });
     callOpen.call(this, method, url, ...rest);
   };
   proto.send = function(body) {
     const m = meta.get(this);
     if (m !== void 0) {
       m.start = performance.now();
+      emit(EventType.NET_PENDING, { id: m.id, method: m.method, url: m.url, initiator: "xhr" });
       this.addEventListener("loadend", () => {
         emit(EventType.NET_REQUEST, {
+          id: m.id,
           method: m.method,
           url: m.url,
           status: this.status,
@@ -2496,6 +2900,7 @@ function appendLogRow(container, kind, text, ts, logMax) {
 
 // ../browser/dist/presenter/presenter-controls.js
 var DATA_IRIS_STATE = "data-iris-state";
+var DATA_IRIS_TONE = "data-iris-tone";
 var DATA_ON = "data-on";
 var GLOW_OFF = "0";
 var CONTROL_LABEL = {
@@ -2509,6 +2914,7 @@ var PAUSED_BADGE_TEXT = "PAUSED";
 var ENDED_BANNER_TEXT = "Session ended";
 var COPY_LABEL = "Copy run";
 var EXPORT_LABEL = "Export";
+var FLOWS_LABEL = "Replay a flow";
 var COPIED_TEXT = "Copied \u2713";
 var RUN_FILENAME = "iris-run.json";
 var ENDED_FADE_MS = 4e3;
@@ -2526,11 +2932,12 @@ var CONTROLS_CSS = `
   color:var(--iris-accent);border:1px solid var(--iris-accent);background:var(--iris-accent-soft);padding:2px 8px;border-radius:999px;}
 [data-iris-overlay][data-iris-state="paused"] [data-iris-badge]{display:inline-flex;}
 [data-iris-hud] [data-iris-foot]{flex:none;padding:10px 12px 12px;border-top:1px solid var(--iris-line2);background:rgba(0,0,0,.16);}
-[data-iris-hud] .iris-composer{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.05);
+[data-iris-hud] .iris-composer{display:flex;align-items:flex-end;gap:6px;background:rgba(255,255,255,.05);
   border:1px solid var(--iris-line);border-radius:14px;padding:5px 6px 5px 14px;transition:border-color .15s,box-shadow .15s;}
 [data-iris-hud] .iris-composer:focus-within{border-color:var(--iris-accent);box-shadow:0 0 0 3px var(--iris-accent-soft);}
-[data-iris-hud] .iris-msg{flex:1;min-width:0;pointer-events:auto;background:transparent;border:none;outline:none;
-  color:var(--iris-fg);font-family:var(--iris-font);font-size:13px;height:28px;padding:0;}
+[data-iris-hud] .iris-msg{flex:1;min-width:0;pointer-events:auto;background:transparent;border:none;outline:none;resize:none;
+  color:var(--iris-fg);font-family:var(--iris-font);font-size:13px;line-height:18px;height:18px;min-height:18px;max-height:96px;
+  padding:5px 0;overflow-y:auto;}
 [data-iris-hud] .iris-msg::placeholder{color:var(--iris-faint);}
 [data-iris-hud] .iris-msg:disabled{opacity:.5;}
 [data-iris-hud] .iris-send{flex:none;width:30px;height:30px;padding:0;border-radius:10px;border:none;cursor:pointer;pointer-events:auto;
@@ -2551,11 +2958,40 @@ var CONTROLS_CSS = `
   box-shadow:inset 0 0 0 3px rgba(246,180,76,.9),inset 0 0 30px 6px rgba(246,180,76,.4);}
 [data-iris-overlay][data-iris-state="ended"] [data-iris-glow][data-on="1"]{animation:none;
   box-shadow:inset 0 0 0 2px rgba(61,215,166,.55);}
+/* Handoff tones tell the human the agent's mode at a glance. waiting = calm teal "your turn" (no
+   alarm); ask = amber "answer me" with a pulse; warn = amber "agent crashed" with a pulse. Each leads
+   the banner with an icon and overrides the calm ended-green accent. */
+[data-iris-overlay][data-iris-tone="waiting"] [data-iris-hud]{--iris-accent:#38bdf8;--iris-accent-soft:rgba(56,189,248,.16);}
+[data-iris-overlay][data-iris-tone="waiting"] [data-iris-banner]{font-weight:600;color:#7dd3fc;}
+[data-iris-overlay][data-iris-tone="waiting"] [data-iris-banner]::before{content:"\\270B  ";}
+[data-iris-overlay][data-iris-tone="waiting"] [data-iris-glow][data-on="1"]{animation:none;
+  box-shadow:inset 0 0 0 2px rgba(56,189,248,.5);}
+[data-iris-overlay][data-iris-tone="ask"] [data-iris-hud],
+[data-iris-overlay][data-iris-tone="warn"] [data-iris-hud]{--iris-accent:#fb923c;--iris-accent-soft:rgba(251,146,60,.18);}
+[data-iris-overlay][data-iris-tone="ask"] [data-iris-banner],
+[data-iris-overlay][data-iris-tone="warn"] [data-iris-banner]{font-weight:600;color:#fdba74;}
+[data-iris-overlay][data-iris-tone="ask"] [data-iris-banner]::before{content:"\\2753  ";}
+[data-iris-overlay][data-iris-tone="warn"] [data-iris-banner]::before{content:"\\26A0\\FE0F  ";}
+[data-iris-overlay][data-iris-tone="ask"] [data-iris-glow][data-on="1"],
+[data-iris-overlay][data-iris-tone="warn"] [data-iris-glow][data-on="1"]{animation:iris-warn-pulse 1.5s ease-in-out infinite;
+  box-shadow:inset 0 0 0 2px rgba(251,146,60,.7);}
+@keyframes iris-warn-pulse{0%,100%{box-shadow:inset 0 0 0 2px rgba(251,146,60,.32);}
+  50%{box-shadow:inset 0 0 0 3px rgba(251,146,60,.85),inset 0 0 26px 5px rgba(251,146,60,.34);}}
+/* Replay-a-flow row: the human re-runs a saved flow with no agent. Hidden until flows are pushed. */
+[data-iris-hud] .iris-flows{display:none;flex-wrap:wrap;gap:6px;padding:9px 12px;border-top:1px solid var(--iris-line2);}
+[data-iris-hud] .iris-flows[data-has="1"]{display:flex;}
+[data-iris-hud] .iris-flows-cap{flex:0 0 100%;margin-bottom:1px;color:var(--iris-faint);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;}
+[data-iris-hud] .iris-flow{pointer-events:auto;cursor:pointer;display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;
+  border-radius:7px;border:1px solid var(--iris-line);background:rgba(255,255,255,.04);color:var(--iris-muted);
+  font-family:var(--iris-font);font-size:11px;font-weight:500;transition:background .15s,color .15s,border-color .15s,transform .1s;}
+[data-iris-hud] .iris-flow:hover{color:var(--iris-fg);background:var(--iris-accent-soft);border-color:var(--iris-accent);}
+[data-iris-hud] .iris-flow:active{transform:scale(.95);}
 `;
 var CONTROLS_HEAD_HTML = `<button type="button" data-iris-pause class="iris-ctl">${CONTROL_LABEL.PAUSE}</button><button type="button" data-iris-end class="iris-ctl">${CONTROL_LABEL.END}</button><span data-iris-badge class="iris-badge">${PAUSED_BADGE_TEXT}</span>`;
 var CONTROLS_BANNER_HTML = `<div data-iris-banner class="iris-banner">${ENDED_BANNER_TEXT}</div>`;
+var CONTROLS_FLOWS_HTML = `<div data-iris-flows class="iris-flows"><span class="iris-flows-cap">${FLOWS_LABEL}</span></div>`;
 var SEND_ICON = `<svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>`;
-var CONTROLS_FOOT_HTML = `<div data-iris-foot><div class="iris-composer"><input data-iris-input class="iris-msg" type="text" placeholder="${INPUT_PLACEHOLDER}" /><button type="button" data-iris-send class="iris-send" aria-label="${CONTROL_LABEL.SEND}">${SEND_ICON}</button></div><div class="iris-export"><button type="button" data-iris-copy class="iris-ctl">${COPY_LABEL}</button><button type="button" data-iris-export class="iris-ctl">${EXPORT_LABEL}</button><span data-iris-export-msg class="iris-export-msg"></span></div></div>`;
+var CONTROLS_FOOT_HTML = `<div data-iris-foot><div class="iris-composer"><textarea data-iris-input class="iris-msg" rows="1" placeholder="${INPUT_PLACEHOLDER}"></textarea><button type="button" data-iris-send class="iris-send" aria-label="${CONTROL_LABEL.SEND}">${SEND_ICON}</button></div><div class="iris-export"><button type="button" data-iris-copy class="iris-ctl">${COPY_LABEL}</button><button type="button" data-iris-export class="iris-ctl">${EXPORT_LABEL}</button><span data-iris-export-msg class="iris-export-msg"></span></div></div>`;
 function queryControlRefs(root) {
   return {
     pauseBtn: root.querySelector("[data-iris-pause]") ?? void 0,
@@ -2565,7 +3001,8 @@ function queryControlRefs(root) {
     banner: root.querySelector("[data-iris-banner]") ?? void 0,
     copyBtn: root.querySelector("[data-iris-copy]") ?? void 0,
     exportBtn: root.querySelector("[data-iris-export]") ?? void 0,
-    exportMsg: root.querySelector("[data-iris-export-msg]") ?? void 0
+    exportMsg: root.querySelector("[data-iris-export-msg]") ?? void 0,
+    flows: root.querySelector("[data-iris-flows]") ?? void 0
   };
 }
 var ControlPanel = class {
@@ -2577,7 +3014,8 @@ var ControlPanel = class {
     banner: void 0,
     copyBtn: void 0,
     exportBtn: void 0,
-    exportMsg: void 0
+    exportMsg: void 0,
+    flows: void 0
   };
   #state = SessionState.ACTIVE;
   #fadeTimer;
@@ -2599,8 +3037,20 @@ var ControlPanel = class {
     this.#refs.endBtn?.addEventListener("click", () => this.#onEnd());
     this.#refs.sendBtn?.addEventListener("click", () => this.#onSend());
     this.#refs.input?.addEventListener("keydown", (e) => {
-      if (e instanceof KeyboardEvent && e.key === "Enter")
+      if (e instanceof KeyboardEvent && e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
         this.#onSend();
+      }
+    });
+    this.#refs.input?.addEventListener("input", () => this.#autosize());
+    this.#refs.flows?.addEventListener("click", (e) => {
+      const target = e.target;
+      if (!(target instanceof HTMLElement))
+        return;
+      const name = target.closest("[data-iris-replay]")?.getAttribute("data-iris-replay");
+      if (name !== null && name !== void 0 && name.length > 0) {
+        this.#host.emit(HumanControlKind.REPLAY, name);
+      }
     });
     this.#refs.copyBtn?.addEventListener("click", () => this.#onCopy());
     this.#refs.exportBtn?.addEventListener("click", () => this.#onExport());
@@ -2661,15 +3111,49 @@ var ControlPanel = class {
     this.#host.logHuman(text);
     if (this.#refs.input !== void 0)
       this.#refs.input.value = "";
+    this.#autosize();
+  }
+  /** Grow the composer to fit its content (up to the CSS max-height), then shrink back — soothing,
+   *  no scrollbar until it's genuinely long. Driven on input and after a send clears the field. */
+  #autosize() {
+    const el = this.#refs.input;
+    if (el === void 0)
+      return;
+    el.style.height = "auto";
+    el.style.height = `${String(Math.min(el.scrollHeight, 96))}px`;
+  }
+  /** Render the replayable-flow chips from the server push. Each ▶ click re-runs that flow, no agent.
+   *  Takes the raw wire value and narrows it here (the panel is the consumer of this push). */
+  setFlows(flows) {
+    const el = this.#refs.flows;
+    if (el === void 0)
+      return;
+    const list = Array.isArray(flows) ? flows : [];
+    const names = list.map((f) => typeof f === "object" && f !== null ? f["name"] : f).filter((n) => typeof n === "string" && n.length > 0);
+    el.querySelectorAll("[data-iris-replay]").forEach((b) => b.remove());
+    for (const name of names) {
+      const btn = el.ownerDocument.createElement("button");
+      btn.type = "button";
+      btn.className = "iris-flow";
+      btn.setAttribute("data-iris-replay", name);
+      btn.textContent = `\u25B6 ${name}`;
+      el.appendChild(btn);
+    }
+    el.setAttribute("data-has", names.length > 0 ? "1" : "0");
   }
   /**
    * Drive the panel's visual state. Idempotent; NEVER emits a control — the shared path for both the
    * optimistic local click and the authoritative server PRESENTER echo. Only the ended-border fade
    * touches a clock, via the injected native timer.
    */
-  setState(state, text) {
+  setState(state, text, tone) {
     this.#state = state;
     this.#root?.setAttribute(DATA_IRIS_STATE, state);
+    const handoff = tone !== void 0 && tone !== PresenterTone.CALM;
+    if (handoff)
+      this.#root?.setAttribute(DATA_IRIS_TONE, tone);
+    else
+      this.#root?.removeAttribute(DATA_IRIS_TONE);
     if (this.#fadeTimer !== void 0) {
       nativeClearTimeout(this.#fadeTimer);
       this.#fadeTimer = void 0;
@@ -2687,8 +3171,8 @@ var ControlPanel = class {
     if (refs2.input !== void 0)
       refs2.input.disabled = ended;
     if (refs2.banner !== void 0) {
-      const summary = text !== void 0 && text.trim().length > 0 ? ` \xB7 ${text.trim()}` : "";
-      refs2.banner.textContent = `${ENDED_BANNER_TEXT}${summary}`;
+      const summary = text !== void 0 && text.trim().length > 0 ? text.trim() : "";
+      refs2.banner.textContent = handoff && summary.length > 0 ? summary : `${ENDED_BANNER_TEXT}${summary.length > 0 ? ` \xB7 ${summary}` : ""}`;
     }
     if (ended) {
       const glow = this.#glow;
@@ -2699,8 +3183,8 @@ var ControlPanel = class {
   }
 };
 
-// ../browser/dist/presenter/presenter.js
-var CSS = `
+// ../browser/dist/presenter/presenter-styles.js
+var PRESENTER_CSS = `
 @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:wght@400;500&family=Inter:wght@400;450;500;600&display=swap");
 [data-iris-glow]{position:fixed;inset:0;pointer-events:none;z-index:2147483600;opacity:0;
   transition:opacity .25s ease;box-shadow:inset 0 0 0 3px rgba(99,102,241,.9),inset 0 0 28px 6px rgba(99,102,241,.45);}
@@ -2772,6 +3256,14 @@ var CSS = `
 [data-iris-hud] [data-iris-min-btn]:hover{color:var(--iris-fg);background:rgba(255,255,255,.08);}
 [data-iris-hud] [data-iris-min-btn]:active{transform:scale(.94);}
 [data-iris-hud] .iris-pass{color:var(--iris-ok);}[data-iris-hud] .iris-fail{color:var(--iris-bad);}
+[data-iris-hud] .iris-tally{flex:none;display:inline-flex;align-items:center;gap:8px;font-size:11.5px;
+  font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.01em;}
+[data-iris-hud] .iris-tally[hidden]{display:none;}
+[data-iris-hud] .iris-tally .iris-t-pass{color:var(--iris-ok);}
+[data-iris-hud] .iris-tally .iris-t-fail{color:var(--iris-bad);}
+[data-iris-hud] .iris-tally [data-z="1"]{opacity:.4;}
+@keyframes iris-tally-pop{0%{transform:scale(1)}38%{transform:scale(1.3)}100%{transform:scale(1)}}
+[data-iris-hud] .iris-tally [data-bump="1"]{display:inline-block;animation:iris-tally-pop .36s cubic-bezier(.16,1,.3,1);}
 [data-iris-hud] .iris-chip{display:none;flex:none;font-size:9px;font-weight:600;letter-spacing:.08em;
   padding:2px 7px;border-radius:6px;vertical-align:middle;}
 [data-iris-hud] .iris-chip[data-mode="reading"]{display:inline-block;color:var(--iris-read);
@@ -2802,6 +3294,8 @@ var CSS = `
 [data-iris-overlay][data-iris-throttled="1"] [data-iris-hud]{--iris-accent:#fbbf24;--iris-accent-soft:rgba(251,191,36,.16);}
 ${LOG_CSS}
 ${CONTROLS_CSS}`;
+
+// ../browser/dist/presenter/presenter-config.js
 var BorderMode = { SESSION: "session", BUSY: "busy" };
 var DEFAULT_BORDER_MODE = BorderMode.SESSION;
 var DATA_BUSY = "data-busy";
@@ -2824,27 +3318,224 @@ var GLOW_OFF2 = "0";
 var DATA_ON2 = "data-on";
 var MIN_ATTR = "data-iris-min";
 var THROTTLED_ATTR = "data-iris-throttled";
-var Presenter = class {
-  #paceMs;
-  #root;
-  #glow;
-  #cursor;
-  #ring;
-  #hud;
-  #actLine;
-  #chip;
-  #liveLine;
-  #mode = PresenterMode.IDLE;
+
+// ../browser/dist/presenter/presenter-run-state.js
+function buildRunState(input) {
+  const start = input.startMs ?? input.now;
+  const counts = { reads: 0, acts: 0, narrations: 0, human: 0, passes: 0, fails: 0 };
+  for (const e of input.runLog) {
+    if (e.kind === LOG_KIND.READ)
+      counts.reads += 1;
+    else if (e.kind === LOG_KIND.ACT)
+      counts.acts += 1;
+    else if (e.kind === LOG_KIND.NARRATION)
+      counts.narrations += 1;
+    else if (e.kind === LOG_KIND.HUMAN)
+      counts.human += 1;
+    if (e.result === LOG_RESULT.PASS)
+      counts.passes += 1;
+    else if (e.result === LOG_RESULT.FAIL)
+      counts.fails += 1;
+  }
+  return {
+    session: input.sessionId,
+    url: typeof location === "undefined" ? "" : location.href,
+    state: input.state,
+    startedMs: start,
+    durationMs: Math.max(0, (input.endMs ?? input.now) - start),
+    counts,
+    capabilities: getCapabilities(),
+    log: input.runLog.map((e) => ({ ...e }))
+  };
+}
+
+// ../browser/dist/presenter/presenter-effects.js
+function moveCursor(cursor, x, y) {
+  if (cursor === void 0)
+    return;
+  cursor.setAttribute("data-on", "1");
+  cursor.style.transform = `translate(${String(x)}px, ${String(y)}px)`;
+}
+function ringAround(ring, rect) {
+  if (ring === void 0)
+    return;
+  ring.style.left = `${String(rect.left - 4)}px`;
+  ring.style.top = `${String(rect.top - 4)}px`;
+  ring.style.width = `${String(rect.width + 8)}px`;
+  ring.style.height = `${String(rect.height + 8)}px`;
+  ring.setAttribute("data-on", "1");
+  nativeSetTimeout(() => ring.setAttribute("data-on", "0"), 700);
+}
+function spawnRipple(root, x, y) {
+  if (root === void 0)
+    return;
+  const r = document.createElement("div");
+  r.setAttribute("data-iris-ripple", "");
+  r.style.left = `${String(x)}px`;
+  r.style.top = `${String(y)}px`;
+  root.appendChild(r);
+  nativeSetTimeout(() => r.remove(), 520);
+}
+function pace(ms) {
+  return new Promise((res) => nativeSetTimeout(res, ms));
+}
+
+// ../browser/dist/presenter/presenter-glow.js
+var GlowController = class {
+  #phase = GlowPhase.IDLE;
+  #lastActivityMs = 0;
+  #idleCheckTimer;
+  #fadeTimer;
+  #glow;
+  #cursor;
   #now;
   #idleAfterMs;
   #glowFadeMs;
+  #borderMode;
+  #setMode;
+  constructor(deps) {
+    this.#now = deps.now;
+    this.#idleAfterMs = deps.idleAfterMs;
+    this.#glowFadeMs = deps.glowFadeMs;
+    this.#borderMode = deps.borderMode;
+    this.#setMode = deps.setMode;
+  }
+  /** Wire the glow + cursor elements after the Presenter mounts the DOM. */
+  setElements(glow, cursor) {
+    this.#glow = glow;
+    this.#cursor = cursor;
+  }
+  /** Current glow phase (test/diagnostic accessor). */
+  phase() {
+    return this.#phase;
+  }
+  /** Last activity timestamp — read by the Presenter's liveness heartbeat. */
+  lastActivityMs() {
+    return this.#lastActivityMs;
+  }
+  /** Set the activity baseline WITHOUT entering busy (sessionStart / revive). */
+  resetActivity(ms) {
+    this.#lastActivityMs = ms;
+  }
+  /**
+   * Record agent activity. Idempotent while busy — only the first activity from idle/fading flips the
+   * glow on (no strobe). `ms` lets log() read the clock exactly once per row.
+   */
+  markActivity(ms = this.#now()) {
+    this.#lastActivityMs = ms;
+    if (this.#phase === GlowPhase.IDLE || this.#phase === GlowPhase.FADING)
+      this.#enterBusy();
+    this.#armIdleCheck();
+  }
+  /** Re-arm the quiet-window idle check (kept for iris.ts's finally block). */
+  scheduleIdle() {
+    this.#armIdleCheck();
+  }
+  /** Clear both timers (called from Presenter.destroy). */
+  teardown() {
+    if (this.#idleCheckTimer !== void 0)
+      nativeClearTimeout(this.#idleCheckTimer);
+    if (this.#fadeTimer !== void 0)
+      nativeClearTimeout(this.#fadeTimer);
+    this.#idleCheckTimer = void 0;
+    this.#fadeTimer = void 0;
+  }
+  #enterBusy() {
+    if (this.#fadeTimer !== void 0) {
+      nativeClearTimeout(this.#fadeTimer);
+      this.#fadeTimer = void 0;
+    }
+    this.#phase = GlowPhase.BUSY;
+    if (this.#borderMode === BorderMode.SESSION) {
+      this.#glow?.setAttribute(DATA_BUSY, BUSY_ON);
+    } else {
+      this.#glow?.setAttribute(DATA_ON2, GLOW_ON);
+    }
+    this.#cursor?.setAttribute(DATA_ON2, GLOW_ON);
+  }
+  #armIdleCheck() {
+    if (this.#idleCheckTimer !== void 0)
+      nativeClearTimeout(this.#idleCheckTimer);
+    this.#idleCheckTimer = nativeSetTimeout(() => this.#checkIdle(), this.#idleAfterMs);
+  }
+  #checkIdle() {
+    this.#idleCheckTimer = void 0;
+    if (this.#phase !== GlowPhase.BUSY)
+      return;
+    const quietFor = this.#now() - this.#lastActivityMs;
+    if (quietFor < this.#idleAfterMs) {
+      this.#idleCheckTimer = nativeSetTimeout(() => this.#checkIdle(), this.#idleAfterMs - quietFor);
+      return;
+    }
+    this.#beginFade();
+  }
+  #beginFade() {
+    this.#phase = GlowPhase.FADING;
+    if (this.#borderMode === BorderMode.SESSION) {
+      this.#glow?.setAttribute(DATA_BUSY, BUSY_OFF);
+    } else {
+      this.#glow?.setAttribute(DATA_ON2, GLOW_OFF2);
+    }
+    this.#cursor?.setAttribute(DATA_ON2, GLOW_OFF2);
+    this.#setMode(PresenterMode.IDLE);
+    this.#fadeTimer = nativeSetTimeout(() => {
+      this.#fadeTimer = void 0;
+      if (this.#phase === GlowPhase.FADING)
+        this.#phase = GlowPhase.IDLE;
+    }, this.#glowFadeMs);
+  }
+};
+
+// ../browser/dist/presenter/presenter-tally.js
+function countVerdicts(runLog) {
+  let passes = 0;
+  let fails = 0;
+  for (const e of runLog) {
+    if (e.result === LOG_RESULT.PASS)
+      passes += 1;
+    else if (e.result === LOG_RESULT.FAIL)
+      fails += 1;
+  }
+  return { passes, fails };
+}
+function renderTally(el, runLog, prev) {
+  const next = countVerdicts(runLog);
+  if (el === void 0)
+    return next;
+  if (next.passes === 0 && next.fails === 0) {
+    el.setAttribute("hidden", "");
+    return next;
+  }
+  const bumpPass = next.passes > prev.passes ? ' data-bump="1"' : "";
+  const bumpFail = next.fails > prev.fails ? ' data-bump="1"' : "";
+  const dimP = next.passes === 0 ? ' data-z="1"' : "";
+  const dimF = next.fails === 0 ? ' data-z="1"' : "";
+  el.removeAttribute("hidden");
+  el.innerHTML = `<span class="iris-t-pass"${dimP}${bumpPass}>\u2713 ${String(next.passes)}</span><span class="iris-t-fail"${dimF}${bumpFail}>\u2717 ${String(next.fails)}</span>`;
+  return next;
+}
+
+// ../browser/dist/presenter/presenter.js
+var Presenter = class {
+  #paceMs;
+  #root;
+  #glow;
+  #cursor;
+  #ring;
+  #hud;
+  #actLine;
+  #chip;
+  /** Live verdict tally (✓N ✗M) in the header — the running testing score the human watches. */
+  #tally;
+  #tallied = { passes: 0, fails: 0 };
+  #liveLine;
+  #mode = PresenterMode.IDLE;
+  #now;
   #heartbeatMs;
   #idleNoticeMs;
   #borderMode;
-  #phase = GlowPhase.IDLE;
-  #lastActivityMs = 0;
-  #idleCheckTimer;
-  #fadeTimer;
+  /** The glow / activity state machine (border shimmer + cursor visibility from activity timing). */
+  #glowCtl;
   /** Liveness: the most recent action text + a 1s ticker that ages it into an "idle · {dur}" clock. */
   #lastActionText = "";
   #heartbeatTimer;
@@ -2867,13 +3558,18 @@ var Presenter = class {
   constructor(options = {}) {
     this.#paceMs = options.paceMs ?? DEFAULT_PACE;
     this.#now = options.now ?? nativeNow;
-    this.#idleAfterMs = options.idleAfterMs ?? IDLE_AFTER_MS;
-    this.#glowFadeMs = options.glowFadeMs ?? GLOW_FADE_MS;
     this.#heartbeatMs = options.heartbeatMs ?? HEARTBEAT_MS;
     this.#idleNoticeMs = options.idleNoticeMs ?? IDLE_NOTICE_MS;
     this.#idleEndMs = options.idleEndMs ?? IDLE_END_MS;
     this.#sessionId = options.sessionId ?? "";
     this.#borderMode = options.border ?? DEFAULT_BORDER_MODE;
+    this.#glowCtl = new GlowController({
+      now: this.#now,
+      idleAfterMs: options.idleAfterMs ?? IDLE_AFTER_MS,
+      glowFadeMs: options.glowFadeMs ?? GLOW_FADE_MS,
+      borderMode: this.#borderMode,
+      setMode: (mode) => this.setMode(mode)
+    });
     this.#logMax = clampLogMax(options.logMax);
     this.#onControl = options.onControl;
     this.#panel = new ControlPanel({
@@ -2898,8 +3594,21 @@ var Presenter = class {
     return this.#sessionActive;
   }
   /** Drive the panel's live-control visual state (server-push / agent path; never emits). */
-  setState(state, text) {
-    this.#panel.setState(state, text);
+  setState(state, text, tone) {
+    this.#panel.setState(state, text, tone);
+  }
+  /** Apply a bridge→browser presenter push: PRESENTER (state echo) or FLOWS (replay list, the human's
+   *  no-agent replay surface). Owns the wire parsing so the SDK dispatcher stays a thin router;
+   *  setState-only so an echo can't re-emit. */
+  handlePush(command) {
+    const a = command.args;
+    if (command.name === IrisCommand.FLOWS)
+      return void this.#panel.setFlows(a["flows"]);
+    const state = a["state"];
+    const tone = a["tone"];
+    const text = typeof a["text"] === "string" && a["text"].length > 0 ? a["text"] : void 0;
+    if (isSessionState(state))
+      this.setState(state, text, isPresenterTone(tone) ? tone : void 0);
   }
   /** Current cap on accumulated log rows. */
   get logMax() {
@@ -2914,7 +3623,7 @@ var Presenter = class {
       return;
     const style = document.createElement("style");
     style.setAttribute("data-iris-overlay", "");
-    style.textContent = CSS;
+    style.textContent = PRESENTER_CSS;
     document.head.appendChild(style);
     const root = document.createElement("div");
     root.setAttribute("data-iris-overlay", "");
@@ -2923,10 +3632,11 @@ var Presenter = class {
       <div data-iris-cursor></div>
       <div data-iris-ring></div>
       <div data-iris-hud>
-        <div class="iris-hud-head"><span class="iris-dot"></span><span class="iris-brand">iris</span><span class="iris-chip" data-iris-chip></span><span class="iris-live"></span><span class="iris-head-sp"></span><button type="button" data-iris-min-btn title="Minimise" aria-label="Minimise the panel">\u2304</button>${CONTROLS_HEAD_HTML}<span class="iris-maxhint" aria-hidden="true">\u2303</span></div>
+        <div class="iris-hud-head"><span class="iris-dot"></span><span class="iris-brand">iris</span><span class="iris-chip" data-iris-chip></span><span class="iris-tally" data-iris-tally hidden></span><span class="iris-live"></span><span class="iris-head-sp"></span><button type="button" data-iris-min-btn title="Minimise" aria-label="Minimise the panel">\u2304</button>${CONTROLS_HEAD_HTML}<span class="iris-maxhint" aria-hidden="true">\u2303</span></div>
         <div class="iris-act-strip"><span class="iris-act">idle</span></div>
         ${CONTROLS_BANNER_HTML}
         <div ${DATA_IRIS_LOG}></div>
+        ${CONTROLS_FLOWS_HTML}
         ${CONTROLS_FOOT_HTML}
       </div>`;
     document.body.appendChild(root);
@@ -2938,6 +3648,7 @@ var Presenter = class {
     this.#actLine = root.querySelector(".iris-act") ?? void 0;
     this.#log = root.querySelector(`[${DATA_IRIS_LOG}]`) ?? void 0;
     this.#chip = root.querySelector("[data-iris-chip]") ?? void 0;
+    this.#tally = root.querySelector("[data-iris-tally]") ?? void 0;
     this.#liveLine = root.querySelector(".iris-live") ?? void 0;
     const setMin = (on) => root.setAttribute(MIN_ATTR, on ? "1" : "0");
     root.querySelector("[data-iris-min-btn]")?.addEventListener("click", (e) => {
@@ -2948,20 +3659,16 @@ var Presenter = class {
       if (root.getAttribute(MIN_ATTR) === "1")
         setMin(false);
     });
+    this.#glowCtl.setElements(this.#glow, this.#cursor);
     this.#panel.mount(root, this.#glow);
     this.setMode(this.#mode);
   }
   destroy() {
-    if (this.#idleCheckTimer !== void 0)
-      nativeClearTimeout(this.#idleCheckTimer);
-    if (this.#fadeTimer !== void 0)
-      nativeClearTimeout(this.#fadeTimer);
+    this.#glowCtl.teardown();
     if (this.#heartbeatTimer !== void 0)
       nativeClearTimeout(this.#heartbeatTimer);
     this.#heartbeatTimer = void 0;
     this.#panel.teardown();
-    this.#idleCheckTimer = void 0;
-    this.#fadeTimer = void 0;
     this.#sessionActive = false;
     this.#logBaseMs = void 0;
     this.#log = void 0;
@@ -2984,7 +3691,7 @@ var Presenter = class {
     this.#startMs ??= this.#now();
     this.#endMs = void 0;
     this.#showSession();
-    this.#lastActivityMs = this.#now();
+    this.#glowCtl.resetActivity(this.#now());
     this.#startHeartbeat();
   }
   /** Turn the base border (session mode) + the HUD/log on — the visible "session is live" state. */
@@ -2998,7 +3705,7 @@ var Presenter = class {
     this.#panel.setState(SessionState.ACTIVE);
     this.#endMs = void 0;
     this.#showSession();
-    this.#lastActivityMs = this.#now();
+    this.#glowCtl.resetActivity(this.#now());
     this.#startHeartbeat();
   }
   /**
@@ -3025,23 +3732,15 @@ var Presenter = class {
    * just refresh the last-activity timestamp and re-arm the idle check.
    */
   markActivity() {
-    this.#markActivityAt(this.#now());
-  }
-  /** markActivity with a caller-supplied timestamp so log() reads the clock exactly once per row. */
-  #markActivityAt(ms) {
-    this.#lastActivityMs = ms;
-    if (this.#phase === GlowPhase.IDLE || this.#phase === GlowPhase.FADING) {
-      this.#enterBusy();
-    }
-    this.#armIdleCheck();
+    this.#glowCtl.markActivity();
   }
   /** Re-arm the quiet-window idle check (kept for iris.ts's finally block). */
   scheduleIdle() {
-    this.#armIdleCheck();
+    this.#glowCtl.scheduleIdle();
   }
   /** Test/diagnostic accessor for the current glow phase. */
   glowPhase() {
-    return this.#phase;
+    return this.#glowCtl.phase();
   }
   /** Current intent (reading vs acting), exposed for tests + the watcher. */
   get mode() {
@@ -3061,50 +3760,6 @@ var Presenter = class {
     if (mode === PresenterMode.READING)
       this.#cursor?.setAttribute(DATA_ON2, GLOW_OFF2);
   }
-  #enterBusy() {
-    if (this.#fadeTimer !== void 0) {
-      nativeClearTimeout(this.#fadeTimer);
-      this.#fadeTimer = void 0;
-    }
-    this.#phase = GlowPhase.BUSY;
-    if (this.#borderMode === BorderMode.SESSION) {
-      this.#glow?.setAttribute(DATA_BUSY, BUSY_ON);
-    } else {
-      this.#glow?.setAttribute(DATA_ON2, GLOW_ON);
-    }
-    this.#cursor?.setAttribute(DATA_ON2, GLOW_ON);
-  }
-  #armIdleCheck() {
-    if (this.#idleCheckTimer !== void 0)
-      nativeClearTimeout(this.#idleCheckTimer);
-    this.#idleCheckTimer = nativeSetTimeout(() => this.#checkIdle(), this.#idleAfterMs);
-  }
-  #checkIdle() {
-    this.#idleCheckTimer = void 0;
-    if (this.#phase !== GlowPhase.BUSY)
-      return;
-    const quietFor = this.#now() - this.#lastActivityMs;
-    if (quietFor < this.#idleAfterMs) {
-      this.#idleCheckTimer = nativeSetTimeout(() => this.#checkIdle(), this.#idleAfterMs - quietFor);
-      return;
-    }
-    this.#beginFade();
-  }
-  #beginFade() {
-    this.#phase = GlowPhase.FADING;
-    if (this.#borderMode === BorderMode.SESSION) {
-      this.#glow?.setAttribute(DATA_BUSY, BUSY_OFF);
-    } else {
-      this.#glow?.setAttribute(DATA_ON2, GLOW_OFF2);
-    }
-    this.#cursor?.setAttribute(DATA_ON2, GLOW_OFF2);
-    this.setMode(PresenterMode.IDLE);
-    this.#fadeTimer = nativeSetTimeout(() => {
-      this.#fadeTimer = void 0;
-      if (this.#phase === GlowPhase.FADING)
-        this.#phase = GlowPhase.IDLE;
-    }, this.#glowFadeMs);
-  }
   status(text) {
     this.markActivity();
     this.#lastActionText = text;
@@ -3131,7 +3786,7 @@ var Presenter = class {
       return;
     if (this.state === SessionState.ENDED)
       return;
-    const idleMs = this.#now() - this.#lastActivityMs;
+    const idleMs = this.#now() - this.#glowCtl.lastActivityMs();
     if (idleMs >= this.#idleEndMs) {
       this.#endIdle(idleMs);
       return;
@@ -3162,33 +3817,14 @@ var Presenter = class {
    * (The full network/console ring-buffer lives server-side; this is the in-page run summary.)
    */
   runState() {
-    const now = this.#now();
-    const start = this.#startMs ?? now;
-    const counts = { reads: 0, acts: 0, narrations: 0, human: 0, passes: 0, fails: 0 };
-    for (const e of this.#runLog) {
-      if (e.kind === LOG_KIND.READ)
-        counts.reads += 1;
-      else if (e.kind === LOG_KIND.ACT)
-        counts.acts += 1;
-      else if (e.kind === LOG_KIND.NARRATION)
-        counts.narrations += 1;
-      else if (e.kind === LOG_KIND.HUMAN)
-        counts.human += 1;
-      if (e.result === LOG_RESULT.PASS)
-        counts.passes += 1;
-      else if (e.result === LOG_RESULT.FAIL)
-        counts.fails += 1;
-    }
-    return {
-      session: this.#sessionId,
-      url: typeof location === "undefined" ? "" : location.href,
+    return buildRunState({
+      sessionId: this.#sessionId,
       state: this.state,
-      startedMs: start,
-      durationMs: Math.max(0, (this.#endMs ?? now) - start),
-      counts,
-      capabilities: getCapabilities(),
-      log: this.#runLog.map((e) => ({ ...e }))
-    };
+      startMs: this.#startMs,
+      endMs: this.#endMs,
+      now: this.#now(),
+      runLog: this.#runLog
+    });
   }
   /**
    * Append an activity-log row. Accumulates (never overwrites): each call adds a timestamped row
@@ -3197,7 +3833,7 @@ var Presenter = class {
    */
   log(kind, text, result2) {
     const ms = this.#now();
-    this.#markActivityAt(ms);
+    this.#glowCtl.markActivity(ms);
     if (this.#log === void 0)
       return void 0;
     const trimmed = text.trim();
@@ -3214,13 +3850,19 @@ var Presenter = class {
       handle.result(result2);
     if (this.#liveLine !== void 0)
       this.#liveLine.textContent = trimmed;
+    this.#renderTally();
     return {
       result: (r) => {
         handle.result(r);
         entry.result = r;
+        this.#renderTally();
       }
     };
   }
+  /** Repaint the header verdict tally from the run log; the side that grew gets a one-shot pop. */
+  #renderTally() {
+    this.#tallied = renderTally(this.#tally, this.#runLog, this.#tallied);
+  }
   /** Back-compat: narration appends to the live log (append-only, never overwrites). */
   narrate(text, level = "info") {
     const line = level === "info" ? text : `[${level}] ${text}`;
@@ -3252,46 +3894,17 @@ var Presenter = class {
     const el = refs.resolve(refId);
     this.status(`${actionVerb(action)} ${label}`);
     if (!(el instanceof HTMLElement)) {
-      await this.#pause();
+      await pace(this.#paceMs);
       return;
     }
     const rect = el.getBoundingClientRect();
     const cx = rect.left + rect.width / 2;
     const cy = rect.top + rect.height / 2;
-    this.#moveCursor(cx, cy);
-    this.#ringAround(rect);
-    await this.#pause();
+    moveCursor(this.#cursor, cx, cy);
+    ringAround(this.#ring, rect);
+    await pace(this.#paceMs);
     if (action === "click" || action === "dblclick" || action === "submit")
-      this.#ripple(cx, cy);
-  }
-  #moveCursor(x, y) {
-    if (this.#cursor === void 0)
-      return;
-    this.#cursor.setAttribute("data-on", "1");
-    this.#cursor.style.transform = `translate(${String(x)}px, ${String(y)}px)`;
-  }
-  #ringAround(rect) {
-    if (this.#ring === void 0)
-      return;
-    this.#ring.style.left = `${String(rect.left - 4)}px`;
-    this.#ring.style.top = `${String(rect.top - 4)}px`;
-    this.#ring.style.width = `${String(rect.width + 8)}px`;
-    this.#ring.style.height = `${String(rect.height + 8)}px`;
-    this.#ring.setAttribute("data-on", "1");
-    nativeSetTimeout(() => this.#ring?.setAttribute("data-on", "0"), 700);
-  }
-  #ripple(x, y) {
-    if (this.#root === void 0)
-      return;
-    const r = document.createElement("div");
-    r.setAttribute("data-iris-ripple", "");
-    r.style.left = `${String(x)}px`;
-    r.style.top = `${String(y)}px`;
-    this.#root.appendChild(r);
-    nativeSetTimeout(() => r.remove(), 520);
-  }
-  #pause() {
-    return new Promise((res) => nativeSetTimeout(res, this.#paceMs));
+      spawnRipple(this.#root, cx, cy);
   }
 };
 
@@ -3350,8 +3963,10 @@ var BUTTON_LABEL = {
 var ANNOTATION_LABEL = {
   [AnnotationKind.ASSERT_SIGNAL]: "assert signal",
   [AnnotationKind.ASSERT_VISIBLE]: "assert visible",
+  [AnnotationKind.ASSERT_STATE]: "assert state",
   [AnnotationKind.MARK_DYNAMIC]: "mark dynamic",
-  [AnnotationKind.SUCCESS_STATE]: "success state"
+  [AnnotationKind.SUCCESS_STATE]: "success state",
+  [AnnotationKind.INTENT]: "intent"
 };
 var NEEDS_SIGNAL = /* @__PURE__ */ new Set([
   AnnotationKind.ASSERT_SIGNAL,
@@ -3670,6 +4285,8 @@ var Recorder = class {
       return;
     menu.textContent = "";
     for (const kind of Object.values(AnnotationKind)) {
+      if (kind === AnnotationKind.INTENT)
+        continue;
       const item = document.createElement("button");
       item.setAttribute("data-iris-annkind", kind);
       item.textContent = ANNOTATION_LABEL[kind];
@@ -3720,6 +4337,410 @@ function installRecorder(deps) {
   return new Recorder(deps);
 }
 
+// ../browser/dist/dom/auto-anchor.js
+var AnchorStrategy = {
+  TESTID: "testid",
+  COMPONENT: "component",
+  ROLE: "role",
+  POSITION: "position"
+};
+function nonEmpty(s) {
+  return typeof s === "string" && s.length > 0;
+}
+function sourceTag(source) {
+  const base = source.file.split("/").pop() ?? source.file;
+  return `${base}:${source.line}`;
+}
+function synthesizeAnchor(input) {
+  if (nonEmpty(input.testid)) {
+    return { strategy: AnchorStrategy.TESTID, value: input.testid, stable: true };
+  }
+  if (nonEmpty(input.component) && input.source !== void 0) {
+    return {
+      strategy: AnchorStrategy.COMPONENT,
+      value: `${input.component}@${sourceTag(input.source)}`,
+      stable: true
+    };
+  }
+  if (nonEmpty(input.component) && (nonEmpty(input.role) || nonEmpty(input.name))) {
+    const qualifier = nonEmpty(input.name) ? input.name : input.role;
+    return {
+      strategy: AnchorStrategy.COMPONENT,
+      value: `${input.component}[${qualifier ?? ""}]`,
+      stable: true
+    };
+  }
+  if (nonEmpty(input.role) && nonEmpty(input.name)) {
+    return { strategy: AnchorStrategy.ROLE, value: `${input.role}:${input.name}`, stable: false };
+  }
+  if (nonEmpty(input.role)) {
+    const suffix = input.nth !== void 0 ? `#${input.nth}` : "";
+    return { strategy: AnchorStrategy.ROLE, value: `${input.role}${suffix}`, stable: false };
+  }
+  return { strategy: AnchorStrategy.POSITION, value: `el#${input.nth ?? 0}`, stable: false };
+}
+
+// ../browser/dist/review/mark-anchor.js
+var TESTID_ATTR3 = "data-testid";
+var SOURCE_ATTR2 = "data-iris-source";
+var STRATEGY = {
+  [AnchorStrategy.TESTID]: MarkAnchorStrategy.TESTID,
+  [AnchorStrategy.COMPONENT]: MarkAnchorStrategy.COMPONENT,
+  [AnchorStrategy.ROLE]: MarkAnchorStrategy.ROLE,
+  [AnchorStrategy.POSITION]: MarkAnchorStrategy.POSITION
+};
+function parseSourceAttr(value) {
+  if (value === null)
+    return void 0;
+  const m = /^(.*):(\d+):(\d+)$/.exec(value);
+  if (m === null)
+    return void 0;
+  const file = m[1];
+  const line = Number(m[2]);
+  if (file === void 0 || file.length === 0 || !Number.isFinite(line))
+    return void 0;
+  return { file, line };
+}
+function sourceFor(el, adapterSource) {
+  if (adapterSource !== void 0)
+    return { file: adapterSource.file, line: adapterSource.line };
+  const host = el.closest(`[${SOURCE_ATTR2}]`);
+  return host !== null ? parseSourceAttr(host.getAttribute(SOURCE_ATTR2)) : void 0;
+}
+function labelFor(el, role, name) {
+  if (name.length > 0)
+    return role.length > 0 ? `${role} "${name}"` : `"${name}"`;
+  return role.length > 0 ? role : el.tagName.toLowerCase();
+}
+function resolveMarkAnchor(el) {
+  const testid = el.getAttribute(TESTID_ATTR3) ?? void 0;
+  const info = identifyComponent(el);
+  const component = info?.componentStack[0];
+  const source = sourceFor(el, info?.source);
+  const role = getRole(el);
+  const name = getAccessibleName(el);
+  const input = {};
+  if (testid !== void 0)
+    input.testid = testid;
+  if (component !== void 0)
+    input.component = component;
+  if (source !== void 0)
+    input.source = source;
+  if (role.length > 0)
+    input.role = role;
+  if (name.length > 0)
+    input.name = name;
+  const synthesized = synthesizeAnchor(input);
+  const out = {
+    anchor: synthesized.value,
+    strategy: STRATEGY[synthesized.strategy],
+    label: labelFor(el, role, name)
+  };
+  if (source !== void 0)
+    out.source = source;
+  return out;
+}
+
+// ../browser/dist/review/annotator.js
+var HIGHLIGHT_REST_MS = 130;
+var MARK_ATTR = "data-iris-mark";
+var ACTIVE_ATTR = "data-iris-mark-active";
+var Z = 2147483640;
+var sel = (role) => `[${MARK_ATTR}="${role}"]`;
+var CSS = `
+${sel("fab")}{position:fixed;left:18px;bottom:18px;z-index:${String(Z + 2)};
+  font:500 13px/1 "Inter",system-ui,sans-serif;display:inline-flex;align-items:center;gap:7px;
+  padding:9px 13px;border-radius:11px;cursor:pointer;color:#e9ebf2;
+  background:linear-gradient(180deg,rgba(19,22,32,.92),rgba(13,15,22,.92));
+  border:1px solid rgba(255,255,255,.12);box-shadow:0 10px 30px -10px rgba(0,0,0,.6);
+  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);transition:transform .12s,border-color .15s;}
+${sel("fab")}:hover{transform:translateY(-1px);border-color:rgba(124,131,255,.55);}
+${sel("fab")}[data-on="1"]{color:#fff;border-color:#7c83ff;background:linear-gradient(180deg,#6366f1,#4f46e5);}
+${sel("dot")}{width:8px;height:8px;border-radius:50%;background:#ff7a7a;flex:none;}
+${sel("fab")}[data-on="1"] ${sel("dot")}{background:#fff;}
+html[${ACTIVE_ATTR}] *{cursor:crosshair !important;}
+/* The Flag button + its popover are interactive \u2014 keep the pointer cursor over them, not crosshair. */
+html[${ACTIVE_ATTR}] ${sel("fab")},html[${ACTIVE_ATTR}] ${sel("fab")} *,html[${ACTIVE_ATTR}] ${sel("pop")},html[${ACTIVE_ATTR}] ${sel("pop")} *{cursor:pointer !important;}
+/* The outline glides to the rested element with an ease (soothing), and fades rather than snapping. */
+${sel("hi")}{position:fixed;z-index:${String(Z + 1)};pointer-events:none;opacity:0;box-sizing:border-box;
+  border:2px solid #7c83ff;border-radius:6px;background:rgba(124,131,255,.12);box-shadow:0 0 0 2px rgba(124,131,255,.22);
+  transition:left .22s cubic-bezier(.22,1,.36,1),top .22s cubic-bezier(.22,1,.36,1),width .22s cubic-bezier(.22,1,.36,1),height .22s cubic-bezier(.22,1,.36,1),opacity .18s ease;}
+${sel("hi")}[data-on="1"]{opacity:1;}
+${sel("hilabel")}{position:absolute;top:-21px;left:-2px;background:#6366f1;color:#fff;
+  font:600 10.5px/1 "Inter",system-ui,sans-serif;padding:3px 6px;border-radius:5px;white-space:nowrap;
+  max-width:300px;overflow:hidden;text-overflow:ellipsis;}
+${sel("pin")}{position:fixed;z-index:${String(Z + 1)};width:22px;height:22px;margin:-11px 0 0 -11px;
+  border-radius:50% 50% 50% 2px;background:#ff5d5d;border:2px solid #fff;box-shadow:0 4px 12px -2px rgba(0,0,0,.5);
+  color:#fff;font:700 11px/18px "Inter",system-ui,sans-serif;text-align:center;pointer-events:none;}
+${sel("pop")}{position:fixed;z-index:${String(Z + 3)};width:280px;box-sizing:border-box;
+  background:linear-gradient(180deg,rgba(19,22,32,.96),rgba(13,15,22,.96));border:1px solid rgba(255,255,255,.14);
+  border-radius:14px;padding:12px;box-shadow:0 24px 60px -16px rgba(0,0,0,.7);
+  -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);font:13px/1.5 "Inter",system-ui,sans-serif;color:#e9ebf2;}
+${sel("pop")} .iris-mark-where{color:#9aa0b2;font-size:11.5px;margin-bottom:7px;
+  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
+${sel("pop")} textarea{width:100%;box-sizing:border-box;min-height:62px;resize:vertical;
+  background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.12);border-radius:9px;color:#e9ebf2;
+  font:13px/1.45 "Inter",system-ui,sans-serif;padding:8px;outline:none;}
+${sel("pop")} textarea:focus{border-color:#7c83ff;}
+${sel("pop")} .iris-mark-row{display:flex;gap:8px;align-items:center;margin-top:9px;}
+${sel("pop")} .iris-mark-hint{margin-right:auto;color:#6a7186;font-size:10.5px;letter-spacing:.02em;}
+${sel("pop")} button{font:600 12px/1 "Inter",system-ui,sans-serif;padding:8px 12px;border-radius:9px;cursor:pointer;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:#cdd2e2;}
+${sel("pop")} button[data-send]{background:#6366f1;border-color:#7c83ff;color:#fff;}
+${sel("pop")} button[data-send]:disabled{opacity:.5;cursor:default;}`;
+var Annotator = class {
+  #emit;
+  #now;
+  #onMark;
+  #root;
+  #fab;
+  #pop;
+  /** Hover outline box that shows WHICH element a click would flag (agentation-style). */
+  #hi;
+  #hiLabel;
+  /** Debounce timer — boxes the element only once the cursor rests, so a fast sweep doesn't flicker. */
+  #hiTimer;
+  #active = false;
+  #markCount = 0;
+  #onClick;
+  #onKeydown;
+  #onMove;
+  constructor(deps) {
+    this.#emit = deps.emit;
+    this.#now = deps.now;
+    this.#onMark = deps.onMark;
+  }
+  /** Whether annotate mode is currently capturing clicks. */
+  get active() {
+    return this.#active;
+  }
+  /** Number of marks sent this session (drives the pin numbering). */
+  get markCount() {
+    return this.#markCount;
+  }
+  mount() {
+    if (this.#root !== void 0 || typeof document === "undefined")
+      return;
+    const style = document.createElement("style");
+    style.setAttribute(MARK_ATTR, "style");
+    style.textContent = CSS;
+    document.head.appendChild(style);
+    const root = document.createElement("div");
+    root.setAttribute(MARK_ATTR, "root");
+    root.innerHTML = `<button type="button" ${MARK_ATTR}="fab" aria-label="Flag a bug for the agent">
+      <span ${MARK_ATTR}="dot"></span><span>Flag a bug</span></button>
+      <div ${MARK_ATTR}="hi"><span ${MARK_ATTR}="hilabel"></span></div>`;
+    document.body.appendChild(root);
+    this.#root = root;
+    this.#fab = root.querySelector(sel("fab")) ?? void 0;
+    this.#hi = root.querySelector(sel("hi")) ?? void 0;
+    this.#hiLabel = root.querySelector(sel("hilabel")) ?? void 0;
+    this.#fab?.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this.toggle();
+    });
+    this.#onClick = (ev) => this.#handleClick(ev);
+    document.addEventListener("click", this.#onClick, { capture: true });
+    this.#onMove = (ev) => this.#scheduleMove(ev);
+    document.addEventListener("mousemove", this.#onMove, { passive: true, capture: true });
+    this.#onKeydown = (ev) => {
+      if (ev.key !== "Escape" || !this.#active)
+        return;
+      if (this.#pop !== void 0)
+        this.#closePopover();
+      else
+        this.toggle(false);
+    };
+    document.addEventListener("keydown", this.#onKeydown);
+  }
+  destroy() {
+    if (this.#onClick !== void 0) {
+      document.removeEventListener("click", this.#onClick, { capture: true });
+      this.#onClick = void 0;
+    }
+    if (this.#onKeydown !== void 0) {
+      document.removeEventListener("keydown", this.#onKeydown);
+      this.#onKeydown = void 0;
+    }
+    if (this.#onMove !== void 0) {
+      document.removeEventListener("mousemove", this.#onMove, { capture: true });
+      this.#onMove = void 0;
+    }
+    if (this.#hiTimer !== void 0) {
+      nativeClearTimeout(this.#hiTimer);
+      this.#hiTimer = void 0;
+    }
+    this.#closePopover();
+    document.documentElement.removeAttribute(ACTIVE_ATTR);
+    this.#root?.remove();
+    document.querySelectorAll(`style[${MARK_ATTR}="style"]`).forEach((s) => s.remove());
+    this.#root = void 0;
+    this.#fab = void 0;
+    this.#active = false;
+  }
+  /** Turn annotate mode on/off. With no argument, flips the current state. */
+  toggle(on) {
+    this.#active = on ?? !this.#active;
+    this.#fab?.setAttribute("data-on", this.#active ? "1" : "0");
+    if (this.#active)
+      document.documentElement.setAttribute(ACTIVE_ATTR, "1");
+    else {
+      document.documentElement.removeAttribute(ACTIVE_ATTR);
+      this.#hideHighlight();
+      this.#closePopover();
+    }
+  }
+  #handleClick(ev) {
+    if (!this.#active)
+      return;
+    const target = ev.target;
+    if (!(target instanceof Element))
+      return;
+    if (target.closest(`[${MARK_ATTR}]`) !== null)
+      return;
+    ev.preventDefault();
+    ev.stopPropagation();
+    this.#openPopover(target, ev.clientX, ev.clientY);
+  }
+  /**
+   * Debounce the outline: while the cursor is moving the human is still travelling, so we wait for a
+   * brief rest before boxing the element under it (the box then eases into place via CSS). A pending
+   * timer is replaced on every move, so only the resting position ever paints.
+   */
+  #scheduleMove(ev) {
+    if (this.#hiTimer !== void 0)
+      nativeClearTimeout(this.#hiTimer);
+    this.#hiTimer = nativeSetTimeout(() => {
+      this.#hiTimer = void 0;
+      this.#handleMove(ev);
+    }, HIGHLIGHT_REST_MS);
+  }
+  /** Box the element under the cursor (when active, no popover open) so you see what a click flags. */
+  #handleMove(ev) {
+    if (this.#hi === void 0)
+      return;
+    const target = ev.target;
+    const skip2 = !this.#active || this.#pop !== void 0 || !(target instanceof Element) || target.closest(`[${MARK_ATTR}]`) !== null;
+    if (skip2) {
+      this.#hi.setAttribute("data-on", "0");
+      return;
+    }
+    const rect = target.getBoundingClientRect();
+    if (rect.width === 0 && rect.height === 0) {
+      this.#hi.setAttribute("data-on", "0");
+      return;
+    }
+    this.#hi.style.left = `${String(rect.left)}px`;
+    this.#hi.style.top = `${String(rect.top)}px`;
+    this.#hi.style.width = `${String(rect.width)}px`;
+    this.#hi.style.height = `${String(rect.height)}px`;
+    this.#hi.setAttribute("data-on", "1");
+    if (this.#hiLabel !== void 0)
+      this.#hiLabel.textContent = describeEl(target);
+  }
+  /** Hide the hover outline (annotate mode off, or a popover took over). Cancels any pending box. */
+  #hideHighlight() {
+    if (this.#hiTimer !== void 0) {
+      nativeClearTimeout(this.#hiTimer);
+      this.#hiTimer = void 0;
+    }
+    this.#hi?.setAttribute("data-on", "0");
+  }
+  #openPopover(el, x, y) {
+    this.#closePopover();
+    this.#hideHighlight();
+    const resolved = resolveMarkAnchor(el);
+    const pop = document.createElement("div");
+    pop.setAttribute(MARK_ATTR, "pop");
+    const where = resolved.source !== void 0 ? `${resolved.label} \xB7 ${resolved.source.file}:${String(resolved.source.line)}` : resolved.label;
+    pop.innerHTML = `<div class="iris-mark-where"></div>
+      <textarea placeholder="What's wrong here? The agent will read this and fix it."></textarea>
+      <div class="iris-mark-row"><span class="iris-mark-hint">\u2318\u21B5 send \xB7 esc cancel</span><button type="button" data-cancel>Cancel</button>
+      <button type="button" data-send disabled>Send to agent</button></div>`;
+    const whereEl = pop.querySelector(".iris-mark-where");
+    if (whereEl !== null)
+      whereEl.textContent = where;
+    const left = Math.min(x, window.innerWidth - 296);
+    const top = Math.min(y + 12, window.innerHeight - 170);
+    pop.style.left = `${String(Math.max(8, left))}px`;
+    pop.style.top = `${String(Math.max(8, top))}px`;
+    document.body.appendChild(pop);
+    this.#pop = pop;
+    const textarea = pop.querySelector("textarea");
+    const send = pop.querySelector("button[data-send]");
+    const submit = () => {
+      const note = textarea?.value.trim() ?? "";
+      if (note.length === 0)
+        return;
+      this.#sendMark(note, resolved, x, y);
+      this.#closePopover();
+    };
+    textarea?.addEventListener("input", () => {
+      if (send !== null)
+        send.disabled = textarea.value.trim().length === 0;
+    });
+    textarea?.addEventListener("keydown", (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        this.#closePopover();
+      } else if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        submit();
+      }
+    });
+    textarea?.focus();
+    pop.querySelector("button[data-cancel]")?.addEventListener("click", () => this.#closePopover());
+    send?.addEventListener("click", submit);
+  }
+  #sendMark(note, resolved, x, y) {
+    const data = {
+      note,
+      anchor: resolved.anchor,
+      strategy: resolved.strategy,
+      label: resolved.label,
+      route: typeof location === "undefined" ? "" : location.pathname + location.search
+    };
+    if (resolved.source !== void 0)
+      data["source"] = resolved.source;
+    this.#emit(EventType.HUMAN_MARK, data);
+    this.#onMark?.(note, resolved.label);
+    this.#markCount += 1;
+    this.#dropPin(x, y, this.#markCount);
+  }
+  #dropPin(x, y, n) {
+    if (this.#root === void 0)
+      return;
+    const pin = document.createElement("div");
+    pin.setAttribute(MARK_ATTR, "pin");
+    pin.style.left = `${String(x)}px`;
+    pin.style.top = `${String(y)}px`;
+    pin.textContent = String(n);
+    this.#root.appendChild(pin);
+    const ref = pin;
+    this.#now();
+    window.setTimeout(() => ref.remove(), 2600);
+  }
+  #closePopover() {
+    this.#pop?.remove();
+    this.#pop = void 0;
+  }
+};
+function describeEl(el) {
+  const testid = el.getAttribute("data-testid");
+  if (testid !== null && testid.length > 0)
+    return testid;
+  const tag = el.tagName.toLowerCase();
+  const aria = el.getAttribute("aria-label");
+  if (aria !== null && aria.length > 0)
+    return `${tag} "${aria}"`;
+  const text = (el.textContent ?? "").trim().replace(/\s+/g, " ").slice(0, 40);
+  return text.length > 0 ? `${tag} "${text}"` : tag;
+}
+function installAnnotator(deps) {
+  const annotator = new Annotator(deps);
+  annotator.mount();
+  return annotator;
+}
+
 // ../browser/dist/iris.js
 function connectionPolicy(pageHostname, bridgeUrl, allowNonLocalhost, token) {
   let bridge;
@@ -3762,9 +4783,6 @@ var BRIDGE_LOST_SUMMARY = "Session ended \u2014 lost connection to Iris (the age
 function resolveSessionLabel(option, gen) {
   return option === void 0 || option === SESSION_AUTO ? gen() : option;
 }
-function isSessionState(value) {
-  return value === SessionState.ACTIVE || value === SessionState.PAUSED || value === SessionState.ENDED;
-}
 function refLabel(refId) {
   const el = refs.resolve(refId);
   if (!(el instanceof Element))
@@ -3782,6 +4800,7 @@ var Iris = class {
   #overlay;
   #presenter;
   #recorder;
+  #annotator;
   #eventCount = 0;
   #token;
   /** Act-row log handle for the in-flight act/act_sequence, so its outcome stamps the right row. */
@@ -3856,6 +4875,16 @@ var Iris = class {
       this.#recorder = installRecorder({ emit, now: () => Date.now() });
       this.#recorder.mount();
     }
+    if (options.annotate ?? options.present === true) {
+      const presenter = this.#presenter;
+      this.#annotator = new Annotator({
+        emit,
+        now: () => Date.now(),
+        // Echo the flag into the live panel so the human watches their bug report land in the log.
+        onMark: (note, label) => presenter?.log(LOG_KIND.HUMAN, `\u{1F6A9} ${label}: ${note}`)
+      });
+      this.#annotator.mount();
+    }
     this.#transport.connect();
     this.#connected = true;
   }
@@ -3894,6 +4923,8 @@ var Iris = class {
     this.#presenter = void 0;
     this.#recorder?.destroy();
     this.#recorder = void 0;
+    this.#annotator?.destroy();
+    this.#annotator = void 0;
     resetClock();
     this.#connected = false;
   }
@@ -3933,11 +4964,8 @@ var Iris = class {
         this.#presenter?.setIdleEndMs(idleEndMs);
       return { ok: true, result: { applied: this.#presenter !== void 0, idleEndMs } };
     }
-    if (command.name === IrisCommand.PRESENTER) {
-      const state = command.args["state"];
-      if (isSessionState(state)) {
-        this.#presenter?.setState(state, str2(command.args["text"]) || void 0);
-      }
+    if (command.name === IrisCommand.PRESENTER || command.name === IrisCommand.FLOWS) {
+      this.#presenter?.handlePush(command);
       return { ok: true, result: { applied: this.#presenter !== void 0 } };
     }
     const handler = this.#registry.get(command.name);
@@ -4080,6 +5108,52 @@ function registerIrisDomain(domain) {
 var globalStore4 = globalThis;
 var iris = globalStore4.__irisInstance ??= new Iris();
 
+// ../react/dist/render-meter.js
+var HOOK_KEY = "__REACT_DEVTOOLS_GLOBAL_HOOK__";
+var RENDER_STORE = "__iris_renders";
+var commits = 0;
+var installed2 = false;
+function noop() {
+}
+function getRenderStats() {
+  return { commits };
+}
+function installRenderMeter() {
+  if (installed2)
+    return;
+  installed2 = true;
+  try {
+    const root = globalThis;
+    const existing = root[HOOK_KEY];
+    if (existing === void 0) {
+      root[HOOK_KEY] = {
+        supportsFiber: true,
+        renderers: /* @__PURE__ */ new Map(),
+        inject: () => 1,
+        onScheduleFiberRoot: noop,
+        onCommitFiberRoot: () => {
+          commits += 1;
+        },
+        onPostCommitFiberRoot: noop,
+        onCommitFiberUnmount: noop
+      };
+    } else {
+      const original = typeof existing.onCommitFiberRoot === "function" ? existing.onCommitFiberRoot.bind(existing) : void 0;
+      existing.onCommitFiberRoot = (...args) => {
+        commits += 1;
+        if (original !== void 0) {
+          try {
+            original(...args);
+          } catch {
+          }
+        }
+      };
+    }
+    registerStore(RENDER_STORE, () => getRenderStats());
+  } catch {
+  }
+}
+
 // ../react/dist/index.js
 var FIBER_PREFIXES = ["__reactFiber$", "__reactInternalInstance$"];
 var MAX_DEPTH = 200;
@@ -4243,14 +5317,15 @@ function hasHoverHandlers(el) {
   const p = props;
   return HOVER_HANDLER_KEYS.some((k) => typeof p[k] === "function");
 }
-var installed2 = false;
+var installed3 = false;
 function install() {
-  if (installed2)
+  if (installed3)
     return;
-  installed2 = true;
+  installed3 = true;
   registerAdapter({ name: "react", identify, readState: readState2, hasHoverHandlers });
 }
 export {
+  Annotator,
   Iris,
   RefRegistry,
   SESSION_AUTO,
@@ -4271,6 +5346,8 @@ export {
   identify,
   identifyComponent,
   install,
+  installAnnotator,
+  installRenderMeter,
   iris,
   isVisible,
   matchQuery,
@@ -4282,6 +5359,7 @@ export {
   registerCapabilities,
   registerIrisDomain,
   registerStore,
+  resolveMarkAnchor,
   runQuery,
   setIgnoreSelectors,
   storeNames,