@mastra/playground-ui 60.0.0-alpha.8 → 60.0.0

package/dist/domains/chat/tools/badges/observation-marker-badge.es.js

@@ -1,515 +1,150 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Loader2, Brain, ChevronDown, ChevronRight, Unplug, XCircle, Eye } from 'lucide-react';
-import { useState, useEffect } from 'react';
-import { ObservationRenderer } from './observation-renderer.es.js';
-import { B as Badge } from '../../../../Badge-Bzn8Z-_I.js';
-import { M as MarkdownRenderer } from '../../../../markdown-renderer-DdD4LqK4.js';
-import { T as Txt } from '../../../../Txt-BP1SRHmL.js';
-import { Icon } from '../../../../icons/Icon.es.js';
-import { c as cn } from '../../../../cn-65Adrsfj.js';
-import { formatDuration } from '../../../../utils/duration.es.js';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { Brain, Unplug, Eye } from 'lucide-react';
+import { useState } from 'react';
+import { ObservationStats, ObservationSections, Extractions } from './observation-marker-details.es.js';
+import { extractedValueEntries, formatTokens, compressionRatio } from './observation-marker-format.es.js';
+import { A as Activity, m as ActivityTrigger, e as ActivityHeadline, a as ActivityContent } from '../../../../activity-Duth8KP_.js';
+import { T as ToolCallOutput } from '../../../../tool-call-output-DEoCE_Xn.js';
 
-const formatTokens = (tokens) => {
-  if (tokens >= 1e3) {
-    return `${(tokens / 1e3).toFixed(1)}k`;
-  }
-  return String(Math.round(tokens));
-};
-const hasExtractedValue = (value) => value !== void 0 && value !== null && value !== "";
-const getExtractedValueEntries = (values) => {
-  return Object.entries(values ?? {}).filter(([, value]) => hasExtractedValue(value));
-};
-const formatExtractedValue = (value) => {
-  if (typeof value === "string") return value;
-  if (typeof value === "number" || typeof value === "boolean") return String(value);
-  try {
-    return JSON.stringify(value, null, 2) ?? String(value);
-  } catch {
-    return String(value);
-  }
-};
-const isStructuredExtractedValue = (value) => typeof value === "object" && value !== null;
-const ObservationIcon = ({ className }) => /* @__PURE__ */ jsx(Eye, { className });
-const MarkerPill = ({
-  children,
-  icon,
-  expanded,
-  onClick,
-  className
-}) => {
-  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
-    onClick && /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(ChevronDown, { className: cn("transition-all", expanded ? "rotate-0" : "-rotate-90") }) }),
-    /* @__PURE__ */ jsx(Badge, { icon, children })
-  ] });
-  if (!onClick) {
-    return /* @__PURE__ */ jsx("div", { className: cn("inline-flex items-center gap-2", className), children: content });
-  }
-  return /* @__PURE__ */ jsx("button", { onClick, className: cn("inline-flex items-center gap-2", className), type: "button", children: content });
-};
-const ExtractedValuesPanel = ({
-  extractedValues,
-  extractionFailures,
-  isExpanded,
-  onToggle
-}) => {
-  const entries = getExtractedValueEntries(extractedValues);
-  const failures = extractionFailures ?? [];
-  if (entries.length === 0 && failures.length === 0) return null;
-  return /* @__PURE__ */ jsxs("div", { className: "mt-2 border-t border-border pt-2", children: [
-    /* @__PURE__ */ jsxs(
-      "button",
-      {
-        onClick: onToggle,
-        className: "flex items-center gap-1 text-meta tracking-wide text-foreground uppercase transition-opacity hover:opacity-80",
-        children: [
-          isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "size-2.5" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "size-2.5" }),
-          "Extractions (",
-          entries.length,
-          ")",
-          failures.length > 0 ? ` · ${failures.length} failed` : ""
-        ]
-      }
-    ),
-    isExpanded && /* @__PURE__ */ jsxs("div", { className: "mt-1 space-y-2", children: [
-      entries.map(([slug, value]) => /* @__PURE__ */ jsxs("div", { className: "rounded border border-border bg-fill-subtle p-2", children: [
-        /* @__PURE__ */ jsx("div", { className: "text-meta tracking-wide text-foreground/70 uppercase", children: slug }),
-        isStructuredExtractedValue(value) ? /* @__PURE__ */ jsx("pre", { className: "mt-1 max-h-40 overflow-auto text-caption break-words whitespace-pre-wrap text-foreground/80", children: formatExtractedValue(value) }) : /* @__PURE__ */ jsx("div", { className: "mt-1 [&_code]:rounded [&_code]:bg-fill [&_code]:px-1 [&_code]:py-0.5 [&_code]:text-meta", children: /* @__PURE__ */ jsx(MarkdownRenderer, { className: "text-caption text-foreground/80", children: formatExtractedValue(value) }) })
-      ] }, slug)),
-      failures.map((failure) => /* @__PURE__ */ jsxs("div", { className: "rounded border border-red-500/20 bg-red-500/5 p-2 text-red-700", children: [
-        /* @__PURE__ */ jsx("div", { className: "text-meta tracking-wide uppercase", children: failure.slug }),
-        /* @__PURE__ */ jsx("div", { className: "mt-1 text-caption", children: failure.error })
-      ] }, failure.slug))
-    ] })
-  ] });
-};
-const ObservationMarkerBadge = ({ toolName, args, metadata }) => {
-  const omData = metadata?.omData || args;
-  const cycleId = omData.cycleId || "";
-  const state = omData._state || (omData.failedAt ? "failed" : omData.completedAt ? "complete" : omData.disconnectedAt ? "disconnected" : "loading");
-  const isStart = state === "loading";
-  const isEnd = state === "complete";
-  const isFailed = state === "failed";
-  const isDisconnected = state === "disconnected";
-  const isBuffering = state === "buffering";
-  const isBufferingComplete = state === "buffering-complete";
-  const isBufferingFailed = state === "buffering-failed";
-  const isActivated = state === "activated";
+function markerState(omData) {
+  if (omData._state) return omData._state;
+  if (omData.failedAt) return "failed";
+  if (omData.completedAt) return "complete";
+  if (omData.disconnectedAt) return "disconnected";
+  return "loading";
+}
+function tokenFlow(inputTokens, outputTokens) {
+  const ratio = compressionRatio(inputTokens, outputTokens);
+  const input = inputTokens ? formatTokens(inputTokens) : "?";
+  const output = outputTokens ? formatTokens(outputTokens) : "?";
+  return `${input}→${output} tokens${ratio ? ` (-${ratio}x)` : ""}`;
+}
+function pendingTokens(tokens) {
+  return tokens ? `~${formatTokens(tokens)} tokens` : void 0;
+}
+function markerLine(toolName, state, omData) {
   const isReflection = omData.operationType === "reflection";
-  const hasExtractionContent = getExtractedValueEntries(omData.extractedValues).length > 0 || (omData.extractionFailures?.length ?? 0) > 0;
-  const shouldAutoExpand = isFailed && isReflection || hasExtractionContent;
-  const [isExpanded, setIsExpanded] = useState(shouldAutoExpand);
-  useEffect(() => {
-    if (shouldAutoExpand) {
-      setIsExpanded(true);
-    }
-  }, [shouldAutoExpand]);
-  const [isObservationsExpanded, setIsObservationsExpanded] = useState(true);
-  const [isTaskExpanded, setIsTaskExpanded] = useState(false);
-  const [isResponseExpanded, setIsResponseExpanded] = useState(false);
-  const [isExtractedExpanded, setIsExtractedExpanded] = useState(false);
-  const bgColor = "bg-blue-500/10";
-  const textColor = "text-blue-600";
-  const completeBgColor = "bg-green-500/10";
-  const completeTextColor = "text-green-600";
-  const completeHoverBgColor = "hover:bg-green-500/20";
-  const expandedBgColor = "bg-green-500/5";
-  const expandedBorderColor = "border-green-500/10";
-  const labelColor = "text-green-600";
-  const bufferExpandedBgColor = "bg-background";
-  const bufferExpandedBorderColor = "border-border-1";
-  const actionLabel = isReflection ? "Reflecting" : "Observing";
-  const completedLabel = isReflection ? "Reflected" : "Observed";
-  if (isStart) {
-    const tokensToObserve = omData.tokensToObserve;
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "mb-3",
-        "data-om-badge": cycleId,
-        "data-om-state": state,
-        "data-om-type": isReflection ? "reflection" : "observation",
-        children: /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: `inline-flex items-center gap-1.5 rounded-md px-2 py-1 ${bgColor} ${textColor} my-1 text-column`,
-            children: [
-              /* @__PURE__ */ jsx(Loader2, { className: "size-3 animate-spin" }),
-              isReflection ? /* @__PURE__ */ jsx(Brain, { className: "size-3" }) : /* @__PURE__ */ jsx(ObservationIcon, { className: "size-3" }),
-              /* @__PURE__ */ jsxs("span", { children: [
-                actionLabel,
-                tokensToObserve ? ` ~${formatTokens(tokensToObserve)} tokens` : "..."
-              ] })
-            ]
-          }
-        )
-      }
-    );
-  }
-  if (isEnd) {
-    const tokensObserved = omData.tokensObserved;
-    const observationTokens = omData.observationTokens;
-    const observations = omData.observations;
-    const currentTask = omData.currentTask;
-    const suggestedResponse = omData.suggestedResponse;
-    const extractedValues = omData.extractedValues;
-    const extractionFailures = omData.extractionFailures;
-    const durationMs = omData.durationMs;
-    const compressionRatio = tokensObserved && observationTokens && observationTokens > 0 ? Math.round(tokensObserved / observationTokens) : null;
-    const handleToggle = (e) => {
-      const scrollContainer = e.currentTarget.closest("[data-radix-scroll-area-viewport]") || document.documentElement;
-      const scrollTop = scrollContainer.scrollTop;
-      setIsExpanded(!isExpanded);
-      requestAnimationFrame(() => {
-        scrollContainer.scrollTop = scrollTop;
-      });
-    };
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "mb-3",
-        "data-om-badge": cycleId,
-        "data-om-state": state,
-        "data-om-type": isReflection ? "reflection" : "observation",
-        children: /* @__PURE__ */ jsxs("div", { className: "my-1", children: [
-          /* @__PURE__ */ jsxs(
-            "button",
+  const icon = isReflection ? /* @__PURE__ */ jsx(Brain, {}) : /* @__PURE__ */ jsx(Eye, {});
+  const doneLabel = isReflection ? "Reflected" : "Observed";
+  const errorBody = omData.error ? /* @__PURE__ */ jsx(ToolCallOutput, { text: omData.error, error: true }) : void 0;
+  switch (state) {
+    case "loading":
+      return {
+        icon,
+        label: isReflection ? "Reflecting" : "Observing",
+        detail: pendingTokens(omData.tokensToObserve),
+        status: "running"
+      };
+    case "complete":
+      return {
+        icon,
+        label: doneLabel,
+        detail: tokenFlow(omData.tokensObserved, omData.observationTokens),
+        status: "idle",
+        body: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            ObservationStats,
             {
-              onClick: handleToggle,
-              className: `inline-flex items-center gap-1.5 rounded-md px-2 py-1 ${completeBgColor} ${completeTextColor} text-column ${completeHoverBgColor} cursor-pointer`,
-              children: [
-                isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "size-3" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "size-3" }),
-                isReflection ? /* @__PURE__ */ jsx(Brain, { className: "size-3" }) : /* @__PURE__ */ jsx(ObservationIcon, { className: "size-3" }),
-                /* @__PURE__ */ jsxs("span", { children: [
-                  completedLabel,
-                  " ",
-                  tokensObserved ? formatTokens(tokensObserved) : "?",
-                  "→",
-                  observationTokens ? formatTokens(observationTokens) : "?",
-                  " tokens",
-                  compressionRatio ? ` (-${compressionRatio}x)` : ""
-                ] })
-              ]
+              inputTokens: omData.tokensObserved,
+              outputTokens: omData.observationTokens,
+              durationMs: omData.durationMs
             }
           ),
-          isExpanded && /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: `mt-1 ml-6 rounded-md p-2 ${expandedBgColor} space-y-1.5 border text-caption ${expandedBorderColor}`,
-              children: [
-                /* @__PURE__ */ jsxs("div", { className: `flex gap-4 text-caption ${labelColor}`, children: [
-                  tokensObserved && /* @__PURE__ */ jsxs("span", { children: [
-                    "Input: ",
-                    formatTokens(tokensObserved)
-                  ] }),
-                  observationTokens && /* @__PURE__ */ jsxs("span", { children: [
-                    "Output: ",
-                    formatTokens(observationTokens)
-                  ] }),
-                  compressionRatio && compressionRatio > 1 && /* @__PURE__ */ jsxs("span", { children: [
-                    "Compression: ",
-                    compressionRatio,
-                    "x"
-                  ] }),
-                  durationMs && /* @__PURE__ */ jsxs("span", { children: [
-                    "Duration:",
-                    " ",
-                    /* @__PURE__ */ jsx(Txt, { as: "span", variant: "caption", font: "mono", children: formatDuration(durationMs) })
-                  ] })
-                ] }),
-                observations && /* @__PURE__ */ jsx("div", { className: "mt-1 border-t border-border pt-1", children: !currentTask && !suggestedResponse ? /* @__PURE__ */ jsx(ObservationRenderer, { observations, maxHeight: "500px" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsxs(
-                    "button",
-                    {
-                      onClick: () => setIsObservationsExpanded(!isObservationsExpanded),
-                      className: "flex items-center gap-1 text-meta tracking-wide text-foreground uppercase transition-opacity hover:opacity-80",
-                      children: [
-                        isObservationsExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "size-2.5" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "size-2.5" }),
-                        isReflection ? "Reflections" : "Observations"
-                      ]
-                    }
-                  ),
-                  isObservationsExpanded && /* @__PURE__ */ jsx("div", { className: "mt-1", children: /* @__PURE__ */ jsx(ObservationRenderer, { observations, maxHeight: "500px" }) })
-                ] }) }),
-                currentTask && /* @__PURE__ */ jsxs("div", { className: "mt-2 border-t border-border pt-2", children: [
-                  /* @__PURE__ */ jsxs(
-                    "button",
-                    {
-                      onClick: () => setIsTaskExpanded(!isTaskExpanded),
-                      className: "flex items-center gap-1 text-meta tracking-wide text-foreground uppercase transition-opacity hover:opacity-80",
-                      children: [
-                        isTaskExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "size-2.5" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "size-2.5" }),
-                        "Current Task"
-                      ]
-                    }
-                  ),
-                  isTaskExpanded && /* @__PURE__ */ jsx("div", { className: "mt-1 [&_code]:rounded [&_code]:bg-fill [&_code]:px-1 [&_code]:py-0.5 [&_code]:text-meta", children: /* @__PURE__ */ jsx(MarkdownRenderer, { className: "text-caption text-foreground", children: currentTask }) })
-                ] }),
-                suggestedResponse && /* @__PURE__ */ jsxs("div", { className: "mt-2 border-t border-border pt-2", children: [
-                  /* @__PURE__ */ jsxs(
-                    "button",
-                    {
-                      onClick: () => setIsResponseExpanded(!isResponseExpanded),
-                      className: "flex items-center gap-1 text-meta tracking-wide text-foreground uppercase transition-opacity hover:opacity-80",
-                      children: [
-                        isResponseExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "size-2.5" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "size-2.5" }),
-                        "Suggested Response"
-                      ]
-                    }
-                  ),
-                  isResponseExpanded && /* @__PURE__ */ jsx("div", { className: "mt-1 italic [&_code]:rounded [&_code]:bg-fill [&_code]:px-1 [&_code]:py-0.5 [&_code]:text-meta", children: /* @__PURE__ */ jsx(MarkdownRenderer, { className: "text-caption text-foreground/80", children: suggestedResponse }) })
-                ] }),
-                /* @__PURE__ */ jsx(
-                  ExtractedValuesPanel,
-                  {
-                    extractedValues,
-                    extractionFailures,
-                    isExpanded: isExtractedExpanded,
-                    onToggle: () => setIsExtractedExpanded(!isExtractedExpanded)
-                  }
-                )
-              ]
-            }
-          )
-        ] })
-      }
-    );
-  }
-  if (isDisconnected) {
-    const disconnectedLabel = isReflection ? "Reflection interrupted" : "Observation interrupted";
-    const tokensToObserve = omData.tokensToObserve;
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "mb-3",
-        "data-om-badge": cycleId,
-        "data-om-state": state,
-        "data-om-type": isReflection ? "reflection" : "observation",
-        children: /* @__PURE__ */ jsxs("div", { className: "my-1 inline-flex items-center gap-1.5 rounded-md bg-yellow-500/10 px-2 py-1 text-column text-yellow-600", children: [
-          /* @__PURE__ */ jsx(Unplug, { className: "size-3" }),
-          /* @__PURE__ */ jsxs("span", { children: [
-            disconnectedLabel,
-            tokensToObserve ? ` (~${formatTokens(tokensToObserve)} tokens)` : ""
-          ] })
-        ] })
-      }
-    );
-  }
-  if (isFailed) {
-    const error = omData.error;
-    const failedLabel = isReflection ? "Reflection failed" : "Observation failed";
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "mb-3",
-        "data-om-badge": cycleId,
-        "data-om-state": state,
-        "data-om-type": isReflection ? "reflection" : "observation",
-        children: /* @__PURE__ */ jsxs("div", { className: "my-1", children: [
-          /* @__PURE__ */ jsxs(
-            "button",
+          /* @__PURE__ */ jsx(
+            ObservationSections,
             {
-              onClick: () => setIsExpanded(!isExpanded),
-              className: "inline-flex cursor-pointer items-center gap-1.5 rounded-md bg-red-500/10 px-2 py-1 text-column text-red-600 hover:bg-red-500/20",
-              children: [
-                isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "size-3" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "size-3" }),
-                /* @__PURE__ */ jsx(XCircle, { className: "size-3" }),
-                /* @__PURE__ */ jsx("span", { children: failedLabel })
-              ]
+              observations: omData.observations,
+              isReflection,
+              maxHeight: "500px",
+              currentTask: omData.currentTask,
+              suggestedResponse: omData.suggestedResponse
             }
           ),
-          isExpanded && error && /* @__PURE__ */ jsxs("div", { className: "mt-1 ml-4 rounded-md border border-red-500/10 bg-red-500/5 p-2 text-caption text-red-700", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-column", children: "Error:" }),
-            " ",
-            error
-          ] })
+          /* @__PURE__ */ jsx(Extractions, { extractedValues: omData.extractedValues, extractionFailures: omData.extractionFailures })
         ] })
-      }
-    );
-  }
-  if (isBuffering) {
-    const tokensToBuffer = omData.tokensToBuffer;
-    const bufferingLabel = isReflection ? "Buffering reflection" : "Buffering observations";
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "mt-2 mb-8",
-        "data-om-badge": cycleId,
-        "data-om-state": state,
-        "data-om-type": isReflection ? "reflection" : "observation",
-        children: /* @__PURE__ */ jsxs(MarkerPill, { icon: /* @__PURE__ */ jsx(Loader2, { className: "animate-spin text-accent6" }), children: [
-          bufferingLabel,
-          tokensToBuffer ? ` ~${formatTokens(tokensToBuffer)} tokens` : "..."
-        ] })
-      }
-    );
-  }
-  if (isBufferingComplete) {
-    const tokensBuffered = omData.tokensBuffered;
-    const bufferedTokens = omData.bufferedTokens;
-    const { observations, extractedValues, extractionFailures } = omData;
-    const bufferedLabel = isReflection ? "Buffered reflection" : "Buffered observations";
-    const compressionRatio = tokensBuffered && bufferedTokens && bufferedTokens > 0 ? Math.round(tokensBuffered / bufferedTokens) : null;
-    const handleToggle = (e) => {
-      const scrollContainer = e.currentTarget.closest("[data-radix-scroll-area-viewport]") || document.documentElement;
-      const scrollTop = scrollContainer.scrollTop;
-      setIsExpanded(!isExpanded);
-      requestAnimationFrame(() => {
-        scrollContainer.scrollTop = scrollTop;
-      });
-    };
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "mt-2 mb-8",
-        "data-om-badge": cycleId,
-        "data-om-state": state,
-        "data-om-type": isReflection ? "reflection" : "observation",
-        children: /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsxs(MarkerPill, { expanded: isExpanded, onClick: handleToggle, icon: /* @__PURE__ */ jsx(ObservationIcon, { className: "text-accent6" }), children: [
-            bufferedLabel,
-            " ",
-            tokensBuffered ? formatTokens(tokensBuffered) : "?",
-            "→",
-            bufferedTokens ? formatTokens(bufferedTokens) : "?",
-            " tokens",
-            compressionRatio ? ` (-${compressionRatio}x)` : ""
-          ] }),
-          isExpanded && /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: `mt-2 ml-6 rounded-lg ${bufferExpandedBgColor} space-y-2 border p-4 text-caption ${bufferExpandedBorderColor}`,
-              children: [
-                observations && /* @__PURE__ */ jsx(ObservationRenderer, { observations, maxHeight: "240px" }),
-                /* @__PURE__ */ jsx(
-                  ExtractedValuesPanel,
-                  {
-                    extractedValues,
-                    extractionFailures,
-                    isExpanded: isExtractedExpanded,
-                    onToggle: () => setIsExtractedExpanded(!isExtractedExpanded)
-                  }
-                )
-              ]
-            }
-          )
+      };
+    case "disconnected":
+      return {
+        icon: /* @__PURE__ */ jsx(Unplug, {}),
+        label: isReflection ? "Reflection interrupted" : "Observation interrupted",
+        detail: pendingTokens(omData.tokensToObserve),
+        status: "idle"
+      };
+    case "failed":
+      return {
+        icon,
+        label: isReflection ? "Reflection" : "Observation",
+        status: "error",
+        body: errorBody
+      };
+    case "buffering":
+      return {
+        icon,
+        label: isReflection ? "Buffering reflection" : "Buffering observations",
+        detail: pendingTokens(omData.tokensToBuffer),
+        status: "running"
+      };
+    case "buffering-complete":
+      return {
+        icon,
+        label: isReflection ? "Buffered reflection" : "Buffered observations",
+        detail: tokenFlow(omData.tokensBuffered, omData.bufferedTokens),
+        status: "idle",
+        body: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(ObservationSections, { observations: omData.observations, isReflection, maxHeight: "240px" }),
+          /* @__PURE__ */ jsx(Extractions, { extractedValues: omData.extractedValues, extractionFailures: omData.extractionFailures })
         ] })
-      }
-    );
-  }
-  if (isBufferingFailed) {
-    const error = omData.error;
-    const failedLabel = isReflection ? "Buffered reflection failed" : "Buffered observation failed";
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "mb-3",
-        "data-om-badge": cycleId,
-        "data-om-state": state,
-        "data-om-type": isReflection ? "reflection" : "observation",
-        children: /* @__PURE__ */ jsxs("div", { className: "my-1", children: [
-          /* @__PURE__ */ jsxs(
-            "button",
-            {
-              onClick: () => setIsExpanded(!isExpanded),
-              className: "inline-flex cursor-pointer items-center gap-1.5 rounded-md border border-dashed border-red-400/40 bg-red-500/10 px-2 py-1 text-column text-red-600 hover:bg-red-500/20",
-              children: [
-                isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "size-3" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "size-3" }),
-                /* @__PURE__ */ jsx(XCircle, { className: "size-3" }),
-                /* @__PURE__ */ jsx("span", { children: failedLabel })
-              ]
-            }
-          ),
-          isExpanded && error && /* @__PURE__ */ jsxs("div", { className: "mt-1 ml-4 rounded-md border border-red-500/10 bg-red-500/5 p-2 text-caption text-red-700", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-column", children: "Error:" }),
-            " ",
-            error
-          ] })
+      };
+    case "buffering-failed":
+      return {
+        icon,
+        label: isReflection ? "Buffered reflection" : "Buffered observations",
+        status: "error",
+        body: errorBody
+      };
+    case "activated":
+      return {
+        icon,
+        label: doneLabel,
+        detail: tokenFlow(omData.tokensActivated, omData.observationTokens),
+        status: "idle",
+        body: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(ObservationStats, { inputTokens: omData.tokensActivated, outputTokens: omData.observationTokens }),
+          /* @__PURE__ */ jsx(ObservationSections, { observations: omData.observations, isReflection, maxHeight: "500px" })
         ] })
-      }
-    );
+      };
+    default:
+      return { icon: /* @__PURE__ */ jsx(Brain, {}), label: toolName, status: "idle" };
   }
-  if (isActivated) {
-    const tokensActivated = omData.tokensActivated ?? 0;
-    const observationTokens = omData.observationTokens ?? 0;
-    const { observations } = omData;
-    const activatedLabel = isReflection ? "Reflected" : "Observed";
-    const compressionRatio = tokensActivated && observationTokens && observationTokens > 0 ? Math.round(tokensActivated / observationTokens) : null;
-    const handleToggle = (e) => {
-      const scrollContainer = e.currentTarget.closest("[data-radix-scroll-area-viewport]") || document.documentElement;
-      const scrollTop = scrollContainer.scrollTop;
-      setIsExpanded(!isExpanded);
-      requestAnimationFrame(() => {
-        scrollContainer.scrollTop = scrollTop;
-      });
-    };
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "mb-3",
-        "data-om-badge": cycleId,
-        "data-om-state": state,
-        "data-om-type": isReflection ? "reflection" : "observation",
-        "data-om-no-highlight": "true",
-        children: /* @__PURE__ */ jsxs("div", { className: "my-1", children: [
-          /* @__PURE__ */ jsxs(
-            "button",
-            {
-              onClick: handleToggle,
-              className: `inline-flex items-center gap-1.5 rounded-md px-2 py-1 ${completeBgColor} ${completeTextColor} text-column ${completeHoverBgColor} cursor-pointer`,
-              children: [
-                isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "size-3" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "size-3" }),
-                isReflection ? /* @__PURE__ */ jsx(Brain, { className: "size-3" }) : /* @__PURE__ */ jsx(ObservationIcon, { className: "size-3" }),
-                /* @__PURE__ */ jsxs("span", { children: [
-                  activatedLabel,
-                  " ",
-                  tokensActivated ? formatTokens(tokensActivated) : "?",
-                  "→",
-                  observationTokens ? formatTokens(observationTokens) : "?",
-                  " tokens",
-                  compressionRatio ? ` (-${compressionRatio}x)` : ""
-                ] })
-              ]
-            }
-          ),
-          isExpanded && /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: `mt-1 ml-6 rounded-md p-2 ${expandedBgColor} space-y-1.5 border text-caption ${expandedBorderColor}`,
-              children: [
-                /* @__PURE__ */ jsxs("div", { className: `flex gap-4 text-caption ${labelColor}`, children: [
-                  tokensActivated > 0 && /* @__PURE__ */ jsxs("span", { children: [
-                    "Input: ",
-                    formatTokens(tokensActivated)
-                  ] }),
-                  observationTokens > 0 && /* @__PURE__ */ jsxs("span", { children: [
-                    "Output: ",
-                    formatTokens(observationTokens)
-                  ] }),
-                  compressionRatio && compressionRatio > 1 && /* @__PURE__ */ jsxs("span", { children: [
-                    "Compression: ",
-                    compressionRatio,
-                    "x"
-                  ] })
-                ] }),
-                observations && /* @__PURE__ */ jsx("div", { className: "mt-1 border-t border-border pt-1", children: /* @__PURE__ */ jsx(ObservationRenderer, { observations, maxHeight: "500px" }) })
-              ]
-            }
-          )
-        ] })
-      }
-    );
+}
+const ObservationMarkerBadge = ({ toolName, omData }) => {
+  const state = markerState(omData);
+  const isReflection = omData.operationType === "reflection";
+  const { icon, label, detail, status, body } = markerLine(toolName, state, omData);
+  const hasExtractions = extractedValueEntries(omData.extractedValues).length > 0 || (omData.extractionFailures?.length ?? 0) > 0;
+  const opensItself = state === "failed" && isReflection || hasExtractions;
+  const [openedByUser, setOpenedByUser] = useState();
+  const [openedItselfBefore, setOpenedItselfBefore] = useState(opensItself);
+  if (opensItself !== openedItselfBefore) {
+    setOpenedItselfBefore(opensItself);
+    if (opensItself) setOpenedByUser(void 0);
   }
-  return /* @__PURE__ */ jsx(
-    "div",
+  return /* @__PURE__ */ jsxs(
+    Activity,
     {
-      className: "mb-3",
-      "data-om-badge": cycleId,
+      open: openedByUser ?? opensItself,
+      onOpenChange: setOpenedByUser,
+      foldable: Boolean(body),
+      status,
+      "aria-label": label,
+      "data-om-badge": omData.cycleId ?? "",
       "data-om-state": state,
       "data-om-type": isReflection ? "reflection" : "observation",
-      children: /* @__PURE__ */ jsxs("div", { className: "my-1 inline-flex items-center gap-1.5 rounded-md bg-fill px-2 py-1 text-column text-muted-foreground", children: [
-        /* @__PURE__ */ jsx(Brain, { className: "size-3" }),
-        /* @__PURE__ */ jsx("span", { children: toolName })
-      ] })
+      "data-om-no-highlight": state === "activated" ? "true" : void 0,
+      children: [
+        /* @__PURE__ */ jsx(ActivityTrigger, { children: /* @__PURE__ */ jsx(ActivityHeadline, { icon, label, detail, detailFont: "sans" }) }),
+        body && /* @__PURE__ */ jsx(ActivityContent, { children: body })
+      ]
     }
   );
 };