@sentry/junior-dashboard 0.60.0 → 0.61.0

package/dist/client/format.d.ts

@@ -10,6 +10,8 @@ export declare function formatTime(value: string | undefined): string;
 export declare function formatRelativeTime(value: string | undefined): string;
 /** Format millisecond durations for compact transcript metadata. */
 export declare function formatMs(value: number | undefined): string;
+/** Format aggregate runtime across turn summaries when duration data exists. */
+export declare function formatDurationTotal(durations: Array<number | undefined>): string;
 /** Format transcript event timestamps independently from turn start offsets. */
 export declare function formatMessageTimestamp(value: number | undefined): string;
 /** Format a transcript event as an offset from the current turn start. */
@@ -22,6 +24,8 @@ export declare function turnMessageCount(turn: ConversationTurn): number;
 export declare function turnToolCallCount(turn: ConversationTurn): number;
 /** Format known token counters without estimating per-message usage. */
 export declare function formatTokenTotal(usage: TurnUsage | undefined): string;
+/** Format the aggregate token count across conversation turns. */
+export declare function formatUsageTotal(usages: Array<TurnUsage | undefined>): string;
 /** Format known token counters with available input/output detail. */
 export declare function formatUsage(usage: TurnUsage | undefined): string;
 /** Format a conversation span from first turn start to latest activity. */
@@ -48,8 +52,18 @@ export declare function unavailableTranscriptLabel(turn: ConversationTurn): stri
 export declare function conversationPath(conversationId: string): string;
 /** Detect the syntax highlighter language for raw transcript blocks. */
 export declare function detectLanguage(text: string): BundledLanguage;
-/** Decide whether a fenced block can use the interactive markup renderer. */
-export declare function canRenderStructuredMarkup(language: BundledLanguage): boolean;
+/**
+ * Detect the language for LLM text output prose: json if the text is valid
+ * JSON or JSONL, markdown otherwise. Never auto-detects XML, HTML, TypeScript,
+ * or shell — those heuristics are unreliable for rendered assistant output.
+ */
+export declare function detectOutputLanguage(text: string): BundledLanguage;
+/**
+ * Decide whether a fenced block can use the interactive markup renderer.
+ * Structured XML/HTML rendering is only enabled for explicitly-fenced blocks;
+ * auto-detected prose is never eligible regardless of inferred language.
+ */
+export declare function canRenderStructuredMarkup(block: CodeBlock): boolean;
 /** Parse markdown into renderable code blocks while preserving plain text blocks. */
 export declare function parseMarkdownBlocks(text: string): CodeBlock[];
 /** Parse XML/HTML-ish fragments for the collapsible transcript renderer. */

package/dist/client/types.d.ts

@@ -140,6 +140,7 @@ export type SessionFilter = "active" | "recent" | "hung" | "failed" | "all";
 export type VisualStatus = "active" | "failed" | "hung" | "idle";
 export type CodeBlock = {
     code: string;
+    fenced?: boolean;
     language: BundledLanguage;
 };
 export type MarkupNode = {

package/dist/client.js

@@ -15891,12 +15891,12 @@ var require_use_sync_external_store_shim_production = __commonJS({
       return x2 === y2 && (0 !== x2 || 1 / x2 === 1 / y2) || x2 !== x2 && y2 !== y2;
     }
     var objectIs = "function" === typeof Object.is ? Object.is : is4;
-    var useState21 = React53.useState;
+    var useState23 = React53.useState;
     var useEffect27 = React53.useEffect;
     var useLayoutEffect12 = React53.useLayoutEffect;
     var useDebugValue2 = React53.useDebugValue;
     function useSyncExternalStore$2(subscribe, getSnapshot) {
-      var value = getSnapshot(), _useState = useState21({ inst: { value, getSnapshot } }), inst = _useState[0].inst, forceUpdate = _useState[1];
+      var value = getSnapshot(), _useState = useState23({ inst: { value, getSnapshot } }), inst = _useState[0].inst, forceUpdate = _useState[1];
       useLayoutEffect12(
         function() {
           inst.value = value;
@@ -19462,7 +19462,7 @@ function useQuery(options, queryClient) {
 }
 
 // src/client.tsx
-var import_react51 = __toESM(require_react(), 1);
+var import_react53 = __toESM(require_react(), 1);
 var import_client = __toESM(require_client(), 1);
 
 // ../../node_modules/.pnpm/react-router@7.16.0_react-dom@19.2.6_react@19.2.6__react@19.2.6/node_modules/react-router/dist/development/chunk-QUQL4437.mjs
@@ -30771,6 +30771,13 @@ function formatMs(value) {
   const remainingSeconds = Math.round(seconds2 % 60);
   return `${minutes}m ${remainingSeconds}s`;
 }
+function formatDurationTotal(durations) {
+  const total = durations.reduce((sum, value) => {
+    if (typeof value !== "number" || !Number.isFinite(value)) return sum;
+    return (sum ?? 0) + Math.max(0, Math.floor(value));
+  }, void 0);
+  return total === void 0 ? "" : formatMs(total);
+}
 function formatMessageTimestamp(value) {
   if (typeof value !== "number" || !Number.isFinite(value))
     return "no timestamp";
@@ -30798,6 +30805,21 @@ function formatNumber(value) {
   const formatted = scaled >= 100 || Number.isInteger(scaled) ? Math.round(scaled).toString() : scaled >= 10 ? Math.round(scaled).toString() : (Math.floor(scaled * 10) / 10).toFixed(1).replace(/\.0$/, "");
   return `${formatted}${suffix2}`;
 }
+function getFiniteTokenCount(value) {
+  return typeof value === "number" && Number.isFinite(value) ? Math.max(0, Math.floor(value)) : void 0;
+}
+function getUsageComponentTotal(usage) {
+  return [
+    usage.inputTokens,
+    usage.outputTokens,
+    usage.cachedInputTokens,
+    usage.cacheCreationTokens
+  ].reduce((sum, value) => {
+    const count = getFiniteTokenCount(value);
+    if (count === void 0) return sum;
+    return (sum ?? 0) + count;
+  }, void 0);
+}
 function formatBytes(value) {
   if (typeof value !== "number" || !Number.isFinite(value)) return "0b";
   const bytes = Math.max(0, Math.floor(value));
@@ -30814,8 +30836,28 @@ function formatBytes(value) {
 function transcriptSource(turn) {
   return turn.transcriptAvailable ? turn.transcript : turn.transcriptMetadata ?? [];
 }
+function isConversationMessageRole(role) {
+  const normalized = role.toLowerCase();
+  return normalized === "user" || normalized === "assistant";
+}
+function hasTextPart(message) {
+  return message.parts.some((part) => {
+    if (part.type !== "text") return false;
+    if (part.redacted) return true;
+    return typeof part.text === "string" && part.text.trim().length > 0;
+  });
+}
+function isConversationMessage(message) {
+  if (!isConversationMessageRole(message.role)) return false;
+  if (message.role.toLowerCase() === "assistant") return hasTextPart(message);
+  return message.parts.length > 0;
+}
 function turnMessageCount(turn) {
-  return turn.transcriptMessageCount ?? transcriptSource(turn).length;
+  const source = transcriptSource(turn);
+  if (source.length > 0) {
+    return source.filter(isConversationMessage).length;
+  }
+  return turn.transcriptMessageCount ?? 0;
 }
 function turnToolCallCount(turn) {
   return transcriptSource(turn).reduce((count, message) => {
@@ -30824,23 +30866,20 @@ function turnToolCallCount(turn) {
 }
 function totalUsageTokens(usage) {
   if (!usage) return void 0;
-  if (typeof usage.totalTokens === "number" && Number.isFinite(usage.totalTokens)) {
-    return usage.totalTokens;
-  }
-  return [
-    usage.inputTokens,
-    usage.outputTokens,
-    usage.cachedInputTokens,
-    usage.cacheCreationTokens
-  ].reduce((sum, value) => {
-    if (typeof value !== "number" || !Number.isFinite(value)) return sum;
-    return (sum ?? 0) + Math.max(0, Math.floor(value));
-  }, void 0);
+  return getUsageComponentTotal(usage) ?? getFiniteTokenCount(usage.totalTokens);
 }
 function formatTokenTotal(usage) {
   const total = totalUsageTokens(usage);
   return total === void 0 ? "" : `${formatNumber(total)} tokens`;
 }
+function formatUsageTotal(usages) {
+  const total = usages.reduce((sum, usage) => {
+    const tokens = totalUsageTokens(usage);
+    if (tokens === void 0) return sum;
+    return (sum ?? 0) + tokens;
+  }, void 0);
+  return total === void 0 ? "" : `${formatNumber(total)} tokens`;
+}
 function formatUsage(usage) {
   const total = totalUsageTokens(usage);
   if (total === void 0) return "";
@@ -31006,8 +31045,19 @@ function prettyJsonData(text2) {
 function formatCodeBlock(code, language) {
   return language === "json" ? prettyJsonData(code) ?? code : code;
 }
-function canRenderStructuredMarkup(language) {
-  return language === "xml" || language === "html";
+function detectOutputLanguage(text2) {
+  const trimmed = text2.trim();
+  if (!trimmed) return "markdown";
+  try {
+    JSON.parse(trimmed);
+    return "json";
+  } catch {
+  }
+  if (prettyJsonl(trimmed)) return "json";
+  return "markdown";
+}
+function canRenderStructuredMarkup(block) {
+  return block.fenced === true && (block.language === "xml" || block.language === "html");
 }
 function parseMarkdownBlocks(text2) {
   const blocks = [];
@@ -31017,24 +31067,25 @@ function parseMarkdownBlocks(text2) {
   while (match = fence.exec(text2)) {
     const prose = text2.slice(cursor, match.index).trim();
     if (prose) {
-      const language3 = detectLanguage(prose);
-      blocks.push({ code: formatCodeBlock(prose, language3), language: language3 });
+      const language3 = detectOutputLanguage(prose);
+      blocks.push({ code: formatCodeBlock(prose, language3), fenced: false, language: language3 });
     }
     const language2 = normalizeLanguage(match[1]);
     blocks.push({
       code: formatCodeBlock(match[2] ?? "", language2),
+      fenced: true,
       language: language2
     });
     cursor = match.index + match[0].length;
   }
   const rest = text2.slice(cursor).trim();
   if (rest) {
-    const language2 = detectLanguage(rest);
-    blocks.push({ code: formatCodeBlock(rest, language2), language: language2 });
+    const language2 = detectOutputLanguage(rest);
+    blocks.push({ code: formatCodeBlock(rest, language2), fenced: false, language: language2 });
   }
   if (blocks.length > 0) return blocks;
-  const language = detectLanguage(text2);
-  return [{ code: formatCodeBlock(text2, language), language }];
+  const language = detectOutputLanguage(text2);
+  return [{ code: formatCodeBlock(text2, language), fenced: false, language }];
 }
 function parseMarkupNodes(code, language) {
   const parser = new DOMParser();
@@ -31250,13 +31301,24 @@ function Stat(props) {
 // src/client/components/ConversationRowStats.tsx
 var import_jsx_runtime10 = __toESM(require_jsx_runtime(), 1);
 function ConversationRowStats(props) {
+  const tokens = formatUsageTotal(
+    props.conversation.turns.map((turn) => turn.cumulativeUsage)
+  );
+  const runtime = formatDurationTotal(
+    props.conversation.turns.map((turn) => turn.cumulativeDurationMs)
+  );
+  const primaryStats = [
+    `${props.conversation.turns.length} turns`,
+    tokens,
+    runtime ? `${runtime} runtime` : void 0
+  ].filter(Boolean);
+  const secondaryStats = [
+    props.timeLabel,
+    slackLocationLabel(props.conversation, { includeId: false })
+  ].filter(Boolean);
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "grid min-w-0 justify-items-end gap-1 text-right max-md:justify-items-start max-md:text-left", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "text-[0.84rem] leading-relaxed text-[#b8b8b8]", children: [
-      props.conversation.turns.length,
-      " turns \xB7 ",
-      props.timeLabel
-    ] }),
-    props.conversation.channel ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "max-w-full break-words text-[0.84rem] leading-relaxed text-[#888] md:truncate", children: slackLocationLabel(props.conversation, { includeId: false }) }) : null
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "text-[0.84rem] leading-relaxed text-[#b8b8b8]", children: primaryStats.join(" \xB7 ") }),
+    secondaryStats.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "max-w-full break-words text-[0.84rem] leading-relaxed text-[#888] md:truncate", children: secondaryStats.join(" \xB7 ") }) : null
   ] });
 }
 
@@ -54640,7 +54702,7 @@ function CommandCenter(props) {
 }
 
 // src/client/components/Transcript.tsx
-var import_react50 = __toESM(require_react(), 1);
+var import_react52 = __toESM(require_react(), 1);
 
 // src/client/components/TranscriptHeader.tsx
 var import_jsx_runtime16 = __toESM(require_jsx_runtime(), 1);
@@ -54674,10 +54736,14 @@ function TranscriptViewToggle(props) {
   );
 }
 
+// src/client/components/TranscriptTurn.tsx
+var import_react51 = __toESM(require_react(), 1);
+
 // src/client/code.tsx
+var import_react50 = __toESM(require_react(), 1);
 var import_jsx_runtime17 = __toESM(require_jsx_runtime(), 1);
 function countStructuredBlockChildren(block) {
-  if (!canRenderStructuredMarkup(block.language)) return 1;
+  if (!canRenderStructuredMarkup(block)) return 1;
   const rootCount = parseMarkupNodes(block.code, block.language).length;
   return rootCount > 0 ? rootCount : 1;
 }
@@ -54711,8 +54777,12 @@ function MarkupNodeView(props) {
   if (props.node.type === "text") {
     return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "min-w-0 whitespace-pre-wrap break-words text-white", children: props.node.text.trim() });
   }
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(MarkupElementView, { defaultOpen: props.defaultOpen, node: props.node });
+}
+function MarkupElementView(props) {
   const children = props.node.children;
   const hasChildren = children.length > 0;
+  const [open, setOpen] = (0, import_react50.useState)(props.defaultOpen ?? true);
   const attributes = props.node.attributes.map(([name, value]) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "ml-1.5 text-[#b8b8b8]", children: [
     name,
     "=",
@@ -54733,12 +54803,15 @@ function MarkupNodeView(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
     "details",
     {
-      className: "group min-w-0 break-words",
-      open: props.defaultOpen ?? true,
+      className: "min-w-0 break-words",
+      onToggle: (event) => {
+        if (event.currentTarget !== event.target) return;
+        setOpen(event.currentTarget.open);
+      },
+      open,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("summary", { className: "-ml-1 flex w-full max-w-full cursor-pointer list-none flex-wrap items-baseline px-1 py-0.5 transition-colors hover:bg-white/[0.05] hover:text-white [&::-webkit-details-marker]:hidden", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "mr-1 w-2 text-white group-open:hidden", children: "+" }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "mr-1 hidden w-2 text-white group-open:inline", children: "-" }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "mr-1 w-2 text-white", children: open ? "-" : "+" }),
           /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-[#888]", children: "<" }),
           /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "font-bold text-white", children: props.node.tagName }),
           attributes,
@@ -54827,7 +54900,7 @@ function TranscriptText(props) {
     const firstChildIndex = seenChildren;
     const childCount = countStructuredBlockChildren(block);
     seenChildren += childCount;
-    if (!canRenderStructuredMarkup(block.language)) {
+    if (!canRenderStructuredMarkup(block)) {
       return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         HighlightedCode,
         {
@@ -55437,20 +55510,7 @@ function TranscriptPartView(props) {
   }
   const value = part.output;
   if (part.type === "thinking") {
-    const rendered2 = stringifyPartValue(value);
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("details", { className: "border border-[#beaaff]/20 bg-white/[0.03] transition-colors hover:border-[#beaaff]/45 hover:bg-[rgba(190,170,255,0.06)]", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("summary", { className: "grid cursor-pointer grid-cols-[auto_minmax(0,1fr)] items-center gap-3 px-3 py-2 font-mono text-[0.8rem] leading-tight text-[#888] hover:bg-[rgba(190,170,255,0.07)] max-md:grid-cols-1 max-md:gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "uppercase text-[#b8b8b8]", children: "thinking" }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "min-w-0 truncate", children: previewToolValue(value) })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-        HighlightedCode,
-        {
-          code: rendered2 || "{}",
-          language: detectLanguage(rendered2)
-        }
-      )
-    ] });
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ThinkingPartView, { value });
   }
   const rendered = stringifyPartValue(value);
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("details", { className: toolFrameClass(), children: [
@@ -55462,6 +55522,34 @@ function TranscriptPartView(props) {
     /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(HighlightedCode, { code: rendered || "{}", language: "json" })
   ] });
 }
+function ThinkingPartView(props) {
+  const [open, setOpen] = (0, import_react51.useState)(false);
+  const rendered = stringifyPartValue(props.value);
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+    "details",
+    {
+      className: "border border-[#beaaff]/20 bg-white/[0.03] transition-colors hover:border-[#beaaff]/45 hover:bg-[rgba(190,170,255,0.06)]",
+      onToggle: (event) => {
+        if (event.currentTarget !== event.target) return;
+        setOpen(event.currentTarget.open);
+      },
+      open,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("summary", { className: "grid cursor-pointer grid-cols-[auto_minmax(0,1fr)] items-center gap-3 px-3 py-2 font-mono text-[0.8rem] leading-tight text-[#888] hover:bg-[rgba(190,170,255,0.07)] max-md:grid-cols-1 max-md:gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "uppercase text-[#b8b8b8]", children: "thinking" }),
+          open ? null : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "min-w-0 truncate", children: previewToolValue(props.value) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "border-t border-[#beaaff]/15 px-3 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          HighlightedCode,
+          {
+            code: rendered || "{}",
+            language: detectOutputLanguage(rendered)
+          }
+        ) })
+      ]
+    }
+  );
+}
 function isString3(value) {
   return typeof value === "string" && value.length > 0;
 }
@@ -55469,7 +55557,7 @@ function isString3(value) {
 // src/client/components/Transcript.tsx
 var import_jsx_runtime22 = __toESM(require_jsx_runtime(), 1);
 function Transcript(props) {
-  const [view, setView] = (0, import_react50.useState)("rich");
+  const [view, setView] = (0, import_react52.useState)("rich");
   const hasRedactedTurns = props.turns.some((turn) => turn.transcriptRedacted);
   if (props.turns.length === 0) {
     return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: transcriptEmptyClass(), children: "No transcript is available for this conversation." });
@@ -55573,11 +55661,17 @@ function ConversationStats(props) {
     (count, turn) => count + turnToolCallCount(turn),
     0
   ) : void 0;
+  const tokens = formatUsageTotal(
+    (props.detail?.turns ?? props.conversation.turns).map(
+      (turn) => turn.cumulativeUsage
+    )
+  );
   const stats = [
     slackLocationLabel(props.conversation, { includeId: false }),
     `${props.conversation.turns.length} turns`,
     messages === void 0 ? "messages loading" : `${messages} messages`,
     toolCalls === void 0 ? "tool calls loading" : `${toolCalls} tool calls`,
+    tokens,
     formatConversationDuration(props.conversation),
     `started ${formatTime(props.conversation.startedAt)}`
   ].filter(Boolean);
@@ -55865,7 +55959,7 @@ function LegacyConversationRedirect() {
 
 // src/client.tsx
 var import_jsx_runtime29 = __toESM(require_jsx_runtime(), 1);
-var DashboardErrorBoundary = class extends import_react51.Component {
+var DashboardErrorBoundary = class extends import_react53.Component {
   state = { error: null };
   static getDerivedStateFromError(error) {
     return { error };

package/dist/tailwind.css

@@ -1,2 +1,2 @@
 /*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial}}}@layer theme{:root,:host{--font-sans:-apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;--font-mono:"Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;--color-amber-200:oklch(92.4% .12 95.746);--color-amber-300:oklch(87.9% .169 91.605);--color-amber-400:oklch(82.8% .189 84.429);--color-emerald-300:oklch(84.5% .143 164.978);--color-emerald-400:oklch(76.5% .177 163.223);--color-violet-200:oklch(89.4% .057 293.283);--color-violet-300:oklch(81.1% .111 293.571);--color-rose-300:oklch(81% .117 11.638);--color-rose-400:oklch(71.2% .194 13.428);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-sm:24rem;--container-lg:32rem;--container-3xl:48rem;--container-5xl:64rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25 / 1.875);--text-5xl:3rem;--text-5xl--line-height:1;--text-6xl:3.75rem;--text-6xl--line-height:1;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--font-weight-black:900;--tracking-normal:0em;--leading-tight:1.25;--leading-snug:1.375;--leading-relaxed:1.625;--animate-pulse:pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.visible{visibility:visible}.absolute{position:absolute}.relative{position:relative}.static{position:static}.sticky{position:sticky}.top-0{top:calc(var(--spacing) * 0)}.bottom-0{bottom:calc(var(--spacing) * 0)}.left-0{left:calc(var(--spacing) * 0)}.z-10{z-index:10}.z-\[1\]{z-index:1}.col-span-full{grid-column:1/-1}.m-0{margin:calc(var(--spacing) * 0)}.my-4{margin-block:calc(var(--spacing) * 4)}.mt-0\.5{margin-top:calc(var(--spacing) * .5)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mr-1{margin-right:calc(var(--spacing) * 1)}.mr-3{margin-right:calc(var(--spacing) * 3)}.mb-1{margin-bottom:calc(var(--spacing) * 1)}.mb-3{margin-bottom:calc(var(--spacing) * 3)}.mb-4{margin-bottom:calc(var(--spacing) * 4)}.mb-6{margin-bottom:calc(var(--spacing) * 6)}.-ml-1{margin-left:calc(var(--spacing) * -1)}.ml-1{margin-left:calc(var(--spacing) * 1)}.ml-1\.5{margin-left:calc(var(--spacing) * 1.5)}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.table{display:table}.size-1\.5{width:calc(var(--spacing) * 1.5);height:calc(var(--spacing) * 1.5)}.size-2{width:calc(var(--spacing) * 2);height:calc(var(--spacing) * 2)}.size-2\.5{width:calc(var(--spacing) * 2.5);height:calc(var(--spacing) * 2.5)}.size-9{width:calc(var(--spacing) * 9);height:calc(var(--spacing) * 9)}.h-1\.5{height:calc(var(--spacing) * 1.5)}.max-h-\[60vh\]{max-height:60vh}.min-h-16{min-height:calc(var(--spacing) * 16)}.min-h-28{min-height:calc(var(--spacing) * 28)}.min-h-48{min-height:calc(var(--spacing) * 48)}.min-h-\[4\.5rem\]{min-height:4.5rem}.min-h-\[calc\(100vh-5rem\)\]{min-height:calc(100vh - 5rem)}.min-h-screen{min-height:100vh}.w-1{width:calc(var(--spacing) * 1)}.w-2{width:calc(var(--spacing) * 2)}.w-fit{width:fit-content}.w-full{width:100%}.w-px{width:1px}.max-w-3xl{max-width:var(--container-3xl)}.max-w-5xl{max-width:var(--container-5xl)}.max-w-full{max-width:100%}.max-w-lg{max-width:var(--container-lg)}.max-w-sm{max-width:var(--container-sm)}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-64{min-width:calc(var(--spacing) * 64)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.basis-1\/2{flex-basis:50%}.animate-pulse{animation:var(--animate-pulse)}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.list-none{list-style-type:none}.grid-cols-\[0\.875rem_minmax\(0\,1fr\)\]{grid-template-columns:.875rem minmax(0,1fr)}.grid-cols-\[auto_minmax\(0\,1fr\)\]{grid-template-columns:auto minmax(0,1fr)}.grid-cols-\[auto_minmax\(0\,1fr\)_auto\]{grid-template-columns:auto minmax(0,1fr) auto}.grid-cols-\[minmax\(0\,1fr\)_auto\]{grid-template-columns:minmax(0,1fr) auto}.grid-cols-\[minmax\(0\,1fr\)_minmax\(12rem\,max-content\)\]{grid-template-columns:minmax(0,1fr) minmax(12rem,max-content)}.grid-cols-\[minmax\(13rem\,1\.7fr\)_minmax\(13rem\,1fr\)\]{grid-template-columns:minmax(13rem,1.7fr) minmax(13rem,1fr)}.grid-rows-\[auto_1fr\]{grid-template-rows:auto 1fr}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.place-items-center{place-items:center}.items-baseline{align-items:baseline}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-end{justify-content:flex-end}.justify-items-end{justify-items:end}.gap-0{gap:calc(var(--spacing) * 0)}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-5{gap:calc(var(--spacing) * 5)}.gap-x-1{column-gap:calc(var(--spacing) * 1)}.gap-x-3{column-gap:calc(var(--spacing) * 3)}.gap-y-0\.5{row-gap:calc(var(--spacing) * .5)}.gap-y-1{row-gap:calc(var(--spacing) * 1)}.self-start{align-self:flex-start}.justify-self-end{justify-self:flex-end}.justify-self-start{justify-self:flex-start}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-visible{overflow:visible}.rounded-full{border-radius:3.40282e38px}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:0}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-b-4{border-bottom-style:var(--tw-border-style);border-bottom-width:4px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-l-4{border-left-style:var(--tw-border-style);border-left-width:4px}.border-\[\#beaaff\]\/20{border-color:oklab(78.6663% .0494663 -.109708/.2)}.border-\[\#beaaff\]\/70{border-color:oklab(78.6663% .0494663 -.109708/.7)}.border-amber-300{border-color:var(--color-amber-300)}.border-amber-400\/25{border-color:#fcbb0040}@supports (color:color-mix(in lab, red, red)){.border-amber-400\/25{border-color:color-mix(in oklab, var(--color-amber-400) 25%, transparent)}}.border-emerald-300{border-color:var(--color-emerald-300)}.border-emerald-400\/25{border-color:#00d29440}@supports (color:color-mix(in lab, red, red)){.border-emerald-400\/25{border-color:color-mix(in oklab, var(--color-emerald-400) 25%, transparent)}}.border-rose-300{border-color:var(--color-rose-300)}.border-rose-400{border-color:var(--color-rose-400)}.border-rose-400\/25{border-color:#ff667f40}@supports (color:color-mix(in lab, red, red)){.border-rose-400\/25{border-color:color-mix(in oklab, var(--color-rose-400) 25%, transparent)}}.border-rose-400\/50{border-color:#ff667f80}@supports (color:color-mix(in lab, red, red)){.border-rose-400\/50{border-color:color-mix(in oklab, var(--color-rose-400) 50%, transparent)}}.border-white\/10{border-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.border-white\/10{border-color:color-mix(in oklab, var(--color-white) 10%, transparent)}}.border-white\/15{border-color:#ffffff26}@supports (color:color-mix(in lab, red, red)){.border-white\/15{border-color:color-mix(in oklab, var(--color-white) 15%, transparent)}}.border-white\/30{border-color:#ffffff4d}@supports (color:color-mix(in lab, red, red)){.border-white\/30{border-color:color-mix(in oklab, var(--color-white) 30%, transparent)}}.border-b-\[\#beaaff\]{border-bottom-color:#beaaff}.border-b-transparent{border-bottom-color:#0000}.border-b-white\/10{border-bottom-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.border-b-white\/10{border-bottom-color:color-mix(in oklab, var(--color-white) 10%, transparent)}}.border-l-\[\#888\]{border-left-color:#888}.border-l-\[\#beaaff\]\/60{border-left-color:oklab(78.6663% .0494663 -.109708/.6)}.border-l-amber-300{border-left-color:var(--color-amber-300)}.border-l-amber-400{border-left-color:var(--color-amber-400)}.border-l-emerald-400{border-left-color:var(--color-emerald-400)}.border-l-rose-400{border-left-color:var(--color-rose-400)}.border-l-violet-300{border-left-color:var(--color-violet-300)}.border-l-white{border-left-color:var(--color-white)}.border-l-white\/25{border-left-color:#ffffff40}@supports (color:color-mix(in lab, red, red)){.border-l-white\/25{border-left-color:color-mix(in oklab, var(--color-white) 25%, transparent)}}.border-l-white\/35{border-left-color:#ffffff59}@supports (color:color-mix(in lab, red, red)){.border-l-white\/35{border-left-color:color-mix(in oklab, var(--color-white) 35%, transparent)}}.border-l-white\/70{border-left-color:#ffffffb3}@supports (color:color-mix(in lab, red, red)){.border-l-white\/70{border-left-color:color-mix(in oklab, var(--color-white) 70%, transparent)}}.bg-\[\#0b0b0b\]{background-color:#0b0b0b}.bg-\[\#111\]{background-color:#111}.bg-\[\#050505\]{background-color:#050505}.bg-\[\#050505\]\/95{background-color:oklab(11.4918% 7.45058e-9 7.45058e-9/.95)}.bg-\[\#b8b8b8\]{background-color:#b8b8b8}.bg-\[\#beaaff\]\/20{background-color:oklab(78.6663% .0494663 -.109708/.2)}.bg-\[\#beaaff\]\/50{background-color:oklab(78.6663% .0494663 -.109708/.5)}.bg-\[rgba\(190\,170\,255\,0\.08\)\]{background-color:#beaaff14}.bg-amber-300{background-color:var(--color-amber-300)}.bg-amber-300\/\[0\.06\]{background-color:#ffd2360f}@supports (color:color-mix(in lab, red, red)){.bg-amber-300\/\[0\.06\]{background-color:color-mix(in oklab, var(--color-amber-300) 6%, transparent)}}.bg-amber-400{background-color:var(--color-amber-400)}.bg-amber-400\/10{background-color:#fcbb001a}@supports (color:color-mix(in lab, red, red)){.bg-amber-400\/10{background-color:color-mix(in oklab, var(--color-amber-400) 10%, transparent)}}.bg-black{background-color:var(--color-black)}.bg-emerald-300{background-color:var(--color-emerald-300)}.bg-emerald-400\/10{background-color:#00d2941a}@supports (color:color-mix(in lab, red, red)){.bg-emerald-400\/10{background-color:color-mix(in oklab, var(--color-emerald-400) 10%, transparent)}}.bg-rose-300{background-color:var(--color-rose-300)}.bg-rose-400{background-color:var(--color-rose-400)}.bg-rose-400\/10{background-color:#ff667f1a}@supports (color:color-mix(in lab, red, red)){.bg-rose-400\/10{background-color:color-mix(in oklab, var(--color-rose-400) 10%, transparent)}}.bg-transparent{background-color:#0000}.bg-white{background-color:var(--color-white)}.bg-white\/20{background-color:#fff3}@supports (color:color-mix(in lab, red, red)){.bg-white\/20{background-color:color-mix(in oklab, var(--color-white) 20%, transparent)}}.bg-white\/35{background-color:#ffffff59}@supports (color:color-mix(in lab, red, red)){.bg-white\/35{background-color:color-mix(in oklab, var(--color-white) 35%, transparent)}}.bg-white\/\[0\.03\]{background-color:#ffffff08}@supports (color:color-mix(in lab, red, red)){.bg-white\/\[0\.03\]{background-color:color-mix(in oklab, var(--color-white) 3%, transparent)}}.bg-white\/\[0\.04\]{background-color:#ffffff0a}@supports (color:color-mix(in lab, red, red)){.bg-white\/\[0\.04\]{background-color:color-mix(in oklab, var(--color-white) 4%, transparent)}}.p-0{padding:calc(var(--spacing) * 0)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.p-5{padding:calc(var(--spacing) * 5)}.p-8{padding:calc(var(--spacing) * 8)}.px-0\.5{padding-inline:calc(var(--spacing) * .5)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-1\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-5{padding-block:calc(var(--spacing) * 5)}.py-8{padding-block:calc(var(--spacing) * 8)}.pt-2{padding-top:calc(var(--spacing) * 2)}.pt-3{padding-top:calc(var(--spacing) * 3)}.pt-4{padding-top:calc(var(--spacing) * 4)}.pr-3{padding-right:calc(var(--spacing) * 3)}.pb-1\.5{padding-bottom:calc(var(--spacing) * 1.5)}.pb-2{padding-bottom:calc(var(--spacing) * 2)}.pb-3{padding-bottom:calc(var(--spacing) * 3)}.pl-3{padding-left:calc(var(--spacing) * 3)}.pl-4{padding-left:calc(var(--spacing) * 4)}.pl-5{padding-left:calc(var(--spacing) * 5)}.text-left{text-align:left}.text-right{text-align:right}.font-\[inherit\]{font-family:inherit}.font-mono{font-family:var(--font-mono)}.font-sans{font-family:var(--font-sans)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-5xl{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[0\.8rem\]{font-size:.8rem}.text-\[0\.9rem\]{font-size:.9rem}.text-\[0\.68rem\]{font-size:.68rem}.text-\[0\.72rem\]{font-size:.72rem}.text-\[0\.76rem\]{font-size:.76rem}.text-\[0\.78rem\]{font-size:.78rem}.text-\[0\.82rem\]{font-size:.82rem}.text-\[0\.84rem\]{font-size:.84rem}.text-\[0\.86rem\]{font-size:.86rem}.text-\[0\.88rem\]{font-size:.88rem}.text-\[0\.92rem\]{font-size:.92rem}.text-\[0\.98rem\]{font-size:.98rem}.text-\[1\.04rem\]{font-size:1.04rem}.text-\[1\.05rem\]{font-size:1.05rem}.text-\[1\.75rem\]{font-size:1.75rem}.leading-\[1\.45\]{--tw-leading:1.45;line-height:1.45}.leading-none{--tw-leading:1;line-height:1}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.leading-snug{--tw-leading:var(--leading-snug);line-height:var(--leading-snug)}.leading-tight{--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.font-black{--tw-font-weight:var(--font-weight-black);font-weight:var(--font-weight-black)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-extrabold{--tw-font-weight:var(--font-weight-extrabold);font-weight:var(--font-weight-extrabold)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-normal{--tw-tracking:var(--tracking-normal);letter-spacing:var(--tracking-normal)}.break-words{overflow-wrap:break-word}.break-all{word-break:break-all}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.text-\[\#666\]{color:#666}.text-\[\#777\]{color:#777}.text-\[\#888\]{color:#888}.text-\[\#b8b8b8\]{color:#b8b8b8}.text-\[\#d6d6d6\]{color:#d6d6d6}.text-\[\#d8ccff\]{color:#d8ccff}.text-\[\#f4f4f4\]{color:#f4f4f4}.text-amber-200{color:var(--color-amber-200)}.text-amber-300{color:var(--color-amber-300)}.text-black{color:var(--color-black)}.text-emerald-300{color:var(--color-emerald-300)}.text-inherit{color:inherit}.text-rose-300{color:var(--color-rose-300)}.text-violet-200{color:var(--color-violet-200)}.text-white{color:var(--color-white)}.lowercase{text-transform:lowercase}.uppercase{text-transform:uppercase}.no-underline{text-decoration-line:none}.underline{text-decoration-line:underline}.decoration-white{-webkit-text-decoration-color:var(--color-white);-webkit-text-decoration-color:var(--color-white);text-decoration-color:var(--color-white)}.underline-offset-4{text-underline-offset:4px}.\[color-scheme\:dark\]{color-scheme:dark}.saturate-50{--tw-saturate:saturate(50%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.backdrop-blur{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition-\[filter\,stroke\,stroke-width\]{transition-property:filter,stroke,stroke-width;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}.group-open\:hidden:is(:where(.group):is([open],:popover-open,:open) *){display:none}.group-open\:inline:is(:where(.group):is([open],:popover-open,:open) *){display:inline}.first\:border-t-0:first-child{border-top-style:var(--tw-border-style);border-top-width:0}.last\:border-b-0:last-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0}@media (hover:hover){.hover\:border-\[\#beaaff\]\/45:hover{border-color:oklab(78.6663% .0494663 -.109708/.45)}.hover\:border-white:hover{border-color:var(--color-white)}.hover\:border-white\/25:hover{border-color:#ffffff40}@supports (color:color-mix(in lab, red, red)){.hover\:border-white\/25:hover{border-color:color-mix(in oklab, var(--color-white) 25%, transparent)}}.hover\:border-white\/30:hover{border-color:#ffffff4d}@supports (color:color-mix(in lab, red, red)){.hover\:border-white\/30:hover{border-color:color-mix(in oklab, var(--color-white) 30%, transparent)}}.hover\:border-b-white\/45:hover{border-bottom-color:#ffffff73}@supports (color:color-mix(in lab, red, red)){.hover\:border-b-white\/45:hover{border-bottom-color:color-mix(in oklab, var(--color-white) 45%, transparent)}}.hover\:bg-\[\#151515\]:hover{background-color:#151515}.hover\:bg-\[rgba\(190\,170\,255\,0\.06\)\]:hover{background-color:#beaaff0f}.hover\:bg-\[rgba\(190\,170\,255\,0\.07\)\]:hover{background-color:#beaaff12}.hover\:bg-white\/\[0\.04\]:hover{background-color:#ffffff0a}@supports (color:color-mix(in lab, red, red)){.hover\:bg-white\/\[0\.04\]:hover{background-color:color-mix(in oklab, var(--color-white) 4%, transparent)}}.hover\:bg-white\/\[0\.05\]:hover{background-color:#ffffff0d}@supports (color:color-mix(in lab, red, red)){.hover\:bg-white\/\[0\.05\]:hover{background-color:color-mix(in oklab, var(--color-white) 5%, transparent)}}.hover\:text-white:hover{color:var(--color-white)}.hover\:underline:hover{text-decoration-line:underline}.hover\:brightness-125:hover{--tw-brightness:brightness(125%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}}.focus-visible\:stroke-emerald-400:focus-visible{stroke:var(--color-emerald-400)}.focus-visible\:stroke-2:focus-visible{stroke-width:2px}@media not all and (min-width:48rem){.max-md\:hidden{display:none}.max-md\:w-full{width:100%}.max-md\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.max-md\:flex-col{flex-direction:column}.max-md\:flex-wrap{flex-wrap:wrap}.max-md\:items-stretch{align-items:stretch}.max-md\:justify-between{justify-content:space-between}.max-md\:justify-items-start{justify-items:start}.max-md\:gap-1{gap:calc(var(--spacing) * 1)}.max-md\:px-4{padding-inline:calc(var(--spacing) * 4)}.max-md\:py-4{padding-block:calc(var(--spacing) * 4)}.max-md\:text-left{text-align:left}}@media (min-width:40rem){.sm\:basis-1\/3{flex-basis:33.3333%}}@media (min-width:48rem){.md\:grid-cols-\[minmax\(0\,1fr\)_auto\]{grid-template-columns:minmax(0,1fr) auto}.md\:truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.md\:px-8{padding-inline:calc(var(--spacing) * 8)}.md\:text-right{text-align:right}.md\:text-6xl{font-size:var(--text-6xl);line-height:var(--tw-leading,var(--text-6xl--line-height))}}@media (min-width:64rem){.lg\:grid-cols-\[minmax\(21rem\,0\.32fr\)_minmax\(0\,1fr\)\]{grid-template-columns:minmax(21rem,.32fr) minmax(0,1fr)}}.\[\&_code\]\:break-words code{overflow-wrap:break-word}.\[\&_code\]\:whitespace-pre-wrap code{white-space:pre-wrap}.\[\&_pre\]\:\!m-0 pre{margin:calc(var(--spacing) * 0)!important}.\[\&_pre\]\:\!overflow-visible pre{overflow:visible!important}.\[\&_pre\]\:\!bg-transparent pre{background-color:#0000!important}.\[\&_pre\]\:\!p-0 pre{padding:calc(var(--spacing) * 0)!important}.\[\&_pre\]\:font-mono pre{font-family:var(--font-mono)}.\[\&_pre\]\:text-\[0\.86rem\] pre{font-size:.86rem}.\[\&_pre\]\:leading-relaxed pre{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.\[\&_pre\]\:break-words pre{overflow-wrap:break-word}.\[\&_pre\]\:whitespace-pre-wrap pre{white-space:pre-wrap}.\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker{display:none}}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@keyframes pulse{50%{opacity:.5}}
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial}}}@layer theme{:root,:host{--font-sans:-apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;--font-mono:"Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;--color-amber-200:oklch(92.4% .12 95.746);--color-amber-300:oklch(87.9% .169 91.605);--color-amber-400:oklch(82.8% .189 84.429);--color-emerald-300:oklch(84.5% .143 164.978);--color-emerald-400:oklch(76.5% .177 163.223);--color-violet-200:oklch(89.4% .057 293.283);--color-violet-300:oklch(81.1% .111 293.571);--color-rose-300:oklch(81% .117 11.638);--color-rose-400:oklch(71.2% .194 13.428);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-sm:24rem;--container-lg:32rem;--container-3xl:48rem;--container-5xl:64rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25 / 1.875);--text-5xl:3rem;--text-5xl--line-height:1;--text-6xl:3.75rem;--text-6xl--line-height:1;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--font-weight-black:900;--tracking-normal:0em;--leading-tight:1.25;--leading-snug:1.375;--leading-relaxed:1.625;--animate-pulse:pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.visible{visibility:visible}.absolute{position:absolute}.relative{position:relative}.static{position:static}.sticky{position:sticky}.top-0{top:calc(var(--spacing) * 0)}.bottom-0{bottom:calc(var(--spacing) * 0)}.left-0{left:calc(var(--spacing) * 0)}.z-10{z-index:10}.z-\[1\]{z-index:1}.col-span-full{grid-column:1/-1}.m-0{margin:calc(var(--spacing) * 0)}.my-4{margin-block:calc(var(--spacing) * 4)}.mt-0\.5{margin-top:calc(var(--spacing) * .5)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mr-1{margin-right:calc(var(--spacing) * 1)}.mr-3{margin-right:calc(var(--spacing) * 3)}.mb-1{margin-bottom:calc(var(--spacing) * 1)}.mb-3{margin-bottom:calc(var(--spacing) * 3)}.mb-4{margin-bottom:calc(var(--spacing) * 4)}.mb-6{margin-bottom:calc(var(--spacing) * 6)}.-ml-1{margin-left:calc(var(--spacing) * -1)}.ml-1{margin-left:calc(var(--spacing) * 1)}.ml-1\.5{margin-left:calc(var(--spacing) * 1.5)}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.table{display:table}.size-1\.5{width:calc(var(--spacing) * 1.5);height:calc(var(--spacing) * 1.5)}.size-2{width:calc(var(--spacing) * 2);height:calc(var(--spacing) * 2)}.size-2\.5{width:calc(var(--spacing) * 2.5);height:calc(var(--spacing) * 2.5)}.size-9{width:calc(var(--spacing) * 9);height:calc(var(--spacing) * 9)}.h-1\.5{height:calc(var(--spacing) * 1.5)}.max-h-\[60vh\]{max-height:60vh}.min-h-16{min-height:calc(var(--spacing) * 16)}.min-h-28{min-height:calc(var(--spacing) * 28)}.min-h-48{min-height:calc(var(--spacing) * 48)}.min-h-\[4\.5rem\]{min-height:4.5rem}.min-h-\[calc\(100vh-5rem\)\]{min-height:calc(100vh - 5rem)}.min-h-screen{min-height:100vh}.w-1{width:calc(var(--spacing) * 1)}.w-2{width:calc(var(--spacing) * 2)}.w-fit{width:fit-content}.w-full{width:100%}.w-px{width:1px}.max-w-3xl{max-width:var(--container-3xl)}.max-w-5xl{max-width:var(--container-5xl)}.max-w-full{max-width:100%}.max-w-lg{max-width:var(--container-lg)}.max-w-sm{max-width:var(--container-sm)}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-64{min-width:calc(var(--spacing) * 64)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.basis-1\/2{flex-basis:50%}.animate-pulse{animation:var(--animate-pulse)}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.list-none{list-style-type:none}.grid-cols-\[0\.875rem_minmax\(0\,1fr\)\]{grid-template-columns:.875rem minmax(0,1fr)}.grid-cols-\[auto_minmax\(0\,1fr\)\]{grid-template-columns:auto minmax(0,1fr)}.grid-cols-\[auto_minmax\(0\,1fr\)_auto\]{grid-template-columns:auto minmax(0,1fr) auto}.grid-cols-\[minmax\(0\,1fr\)_auto\]{grid-template-columns:minmax(0,1fr) auto}.grid-cols-\[minmax\(0\,1fr\)_minmax\(12rem\,max-content\)\]{grid-template-columns:minmax(0,1fr) minmax(12rem,max-content)}.grid-cols-\[minmax\(13rem\,1\.7fr\)_minmax\(13rem\,1fr\)\]{grid-template-columns:minmax(13rem,1.7fr) minmax(13rem,1fr)}.grid-rows-\[auto_1fr\]{grid-template-rows:auto 1fr}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.place-items-center{place-items:center}.items-baseline{align-items:baseline}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-end{justify-content:flex-end}.justify-items-end{justify-items:end}.gap-0{gap:calc(var(--spacing) * 0)}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-5{gap:calc(var(--spacing) * 5)}.gap-x-1{column-gap:calc(var(--spacing) * 1)}.gap-x-3{column-gap:calc(var(--spacing) * 3)}.gap-y-0\.5{row-gap:calc(var(--spacing) * .5)}.gap-y-1{row-gap:calc(var(--spacing) * 1)}.self-start{align-self:flex-start}.justify-self-end{justify-self:flex-end}.justify-self-start{justify-self:flex-start}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-visible{overflow:visible}.rounded-full{border-radius:3.40282e38px}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:0}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-b-4{border-bottom-style:var(--tw-border-style);border-bottom-width:4px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-l-4{border-left-style:var(--tw-border-style);border-left-width:4px}.border-\[\#beaaff\]\/15{border-color:oklab(78.6663% .0494663 -.109708/.15)}.border-\[\#beaaff\]\/20{border-color:oklab(78.6663% .0494663 -.109708/.2)}.border-\[\#beaaff\]\/70{border-color:oklab(78.6663% .0494663 -.109708/.7)}.border-amber-300{border-color:var(--color-amber-300)}.border-amber-400\/25{border-color:#fcbb0040}@supports (color:color-mix(in lab, red, red)){.border-amber-400\/25{border-color:color-mix(in oklab, var(--color-amber-400) 25%, transparent)}}.border-emerald-300{border-color:var(--color-emerald-300)}.border-emerald-400\/25{border-color:#00d29440}@supports (color:color-mix(in lab, red, red)){.border-emerald-400\/25{border-color:color-mix(in oklab, var(--color-emerald-400) 25%, transparent)}}.border-rose-300{border-color:var(--color-rose-300)}.border-rose-400{border-color:var(--color-rose-400)}.border-rose-400\/25{border-color:#ff667f40}@supports (color:color-mix(in lab, red, red)){.border-rose-400\/25{border-color:color-mix(in oklab, var(--color-rose-400) 25%, transparent)}}.border-rose-400\/50{border-color:#ff667f80}@supports (color:color-mix(in lab, red, red)){.border-rose-400\/50{border-color:color-mix(in oklab, var(--color-rose-400) 50%, transparent)}}.border-white\/10{border-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.border-white\/10{border-color:color-mix(in oklab, var(--color-white) 10%, transparent)}}.border-white\/15{border-color:#ffffff26}@supports (color:color-mix(in lab, red, red)){.border-white\/15{border-color:color-mix(in oklab, var(--color-white) 15%, transparent)}}.border-white\/30{border-color:#ffffff4d}@supports (color:color-mix(in lab, red, red)){.border-white\/30{border-color:color-mix(in oklab, var(--color-white) 30%, transparent)}}.border-b-\[\#beaaff\]{border-bottom-color:#beaaff}.border-b-transparent{border-bottom-color:#0000}.border-b-white\/10{border-bottom-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.border-b-white\/10{border-bottom-color:color-mix(in oklab, var(--color-white) 10%, transparent)}}.border-l-\[\#888\]{border-left-color:#888}.border-l-\[\#beaaff\]\/60{border-left-color:oklab(78.6663% .0494663 -.109708/.6)}.border-l-amber-300{border-left-color:var(--color-amber-300)}.border-l-amber-400{border-left-color:var(--color-amber-400)}.border-l-emerald-400{border-left-color:var(--color-emerald-400)}.border-l-rose-400{border-left-color:var(--color-rose-400)}.border-l-violet-300{border-left-color:var(--color-violet-300)}.border-l-white{border-left-color:var(--color-white)}.border-l-white\/25{border-left-color:#ffffff40}@supports (color:color-mix(in lab, red, red)){.border-l-white\/25{border-left-color:color-mix(in oklab, var(--color-white) 25%, transparent)}}.border-l-white\/35{border-left-color:#ffffff59}@supports (color:color-mix(in lab, red, red)){.border-l-white\/35{border-left-color:color-mix(in oklab, var(--color-white) 35%, transparent)}}.border-l-white\/70{border-left-color:#ffffffb3}@supports (color:color-mix(in lab, red, red)){.border-l-white\/70{border-left-color:color-mix(in oklab, var(--color-white) 70%, transparent)}}.bg-\[\#0b0b0b\]{background-color:#0b0b0b}.bg-\[\#111\]{background-color:#111}.bg-\[\#050505\]{background-color:#050505}.bg-\[\#050505\]\/95{background-color:oklab(11.4918% 7.45058e-9 7.45058e-9/.95)}.bg-\[\#b8b8b8\]{background-color:#b8b8b8}.bg-\[\#beaaff\]\/20{background-color:oklab(78.6663% .0494663 -.109708/.2)}.bg-\[\#beaaff\]\/50{background-color:oklab(78.6663% .0494663 -.109708/.5)}.bg-\[rgba\(190\,170\,255\,0\.08\)\]{background-color:#beaaff14}.bg-amber-300{background-color:var(--color-amber-300)}.bg-amber-300\/\[0\.06\]{background-color:#ffd2360f}@supports (color:color-mix(in lab, red, red)){.bg-amber-300\/\[0\.06\]{background-color:color-mix(in oklab, var(--color-amber-300) 6%, transparent)}}.bg-amber-400{background-color:var(--color-amber-400)}.bg-amber-400\/10{background-color:#fcbb001a}@supports (color:color-mix(in lab, red, red)){.bg-amber-400\/10{background-color:color-mix(in oklab, var(--color-amber-400) 10%, transparent)}}.bg-black{background-color:var(--color-black)}.bg-emerald-300{background-color:var(--color-emerald-300)}.bg-emerald-400\/10{background-color:#00d2941a}@supports (color:color-mix(in lab, red, red)){.bg-emerald-400\/10{background-color:color-mix(in oklab, var(--color-emerald-400) 10%, transparent)}}.bg-rose-300{background-color:var(--color-rose-300)}.bg-rose-400{background-color:var(--color-rose-400)}.bg-rose-400\/10{background-color:#ff667f1a}@supports (color:color-mix(in lab, red, red)){.bg-rose-400\/10{background-color:color-mix(in oklab, var(--color-rose-400) 10%, transparent)}}.bg-transparent{background-color:#0000}.bg-white{background-color:var(--color-white)}.bg-white\/20{background-color:#fff3}@supports (color:color-mix(in lab, red, red)){.bg-white\/20{background-color:color-mix(in oklab, var(--color-white) 20%, transparent)}}.bg-white\/35{background-color:#ffffff59}@supports (color:color-mix(in lab, red, red)){.bg-white\/35{background-color:color-mix(in oklab, var(--color-white) 35%, transparent)}}.bg-white\/\[0\.03\]{background-color:#ffffff08}@supports (color:color-mix(in lab, red, red)){.bg-white\/\[0\.03\]{background-color:color-mix(in oklab, var(--color-white) 3%, transparent)}}.bg-white\/\[0\.04\]{background-color:#ffffff0a}@supports (color:color-mix(in lab, red, red)){.bg-white\/\[0\.04\]{background-color:color-mix(in oklab, var(--color-white) 4%, transparent)}}.p-0{padding:calc(var(--spacing) * 0)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.p-5{padding:calc(var(--spacing) * 5)}.p-8{padding:calc(var(--spacing) * 8)}.px-0\.5{padding-inline:calc(var(--spacing) * .5)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-1\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-5{padding-block:calc(var(--spacing) * 5)}.py-8{padding-block:calc(var(--spacing) * 8)}.pt-2{padding-top:calc(var(--spacing) * 2)}.pt-3{padding-top:calc(var(--spacing) * 3)}.pt-4{padding-top:calc(var(--spacing) * 4)}.pr-3{padding-right:calc(var(--spacing) * 3)}.pb-1\.5{padding-bottom:calc(var(--spacing) * 1.5)}.pb-2{padding-bottom:calc(var(--spacing) * 2)}.pb-3{padding-bottom:calc(var(--spacing) * 3)}.pl-3{padding-left:calc(var(--spacing) * 3)}.pl-4{padding-left:calc(var(--spacing) * 4)}.pl-5{padding-left:calc(var(--spacing) * 5)}.text-left{text-align:left}.text-right{text-align:right}.font-\[inherit\]{font-family:inherit}.font-mono{font-family:var(--font-mono)}.font-sans{font-family:var(--font-sans)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-5xl{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[0\.8rem\]{font-size:.8rem}.text-\[0\.9rem\]{font-size:.9rem}.text-\[0\.68rem\]{font-size:.68rem}.text-\[0\.72rem\]{font-size:.72rem}.text-\[0\.76rem\]{font-size:.76rem}.text-\[0\.78rem\]{font-size:.78rem}.text-\[0\.82rem\]{font-size:.82rem}.text-\[0\.84rem\]{font-size:.84rem}.text-\[0\.86rem\]{font-size:.86rem}.text-\[0\.88rem\]{font-size:.88rem}.text-\[0\.92rem\]{font-size:.92rem}.text-\[0\.98rem\]{font-size:.98rem}.text-\[1\.04rem\]{font-size:1.04rem}.text-\[1\.05rem\]{font-size:1.05rem}.text-\[1\.75rem\]{font-size:1.75rem}.leading-\[1\.45\]{--tw-leading:1.45;line-height:1.45}.leading-none{--tw-leading:1;line-height:1}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.leading-snug{--tw-leading:var(--leading-snug);line-height:var(--leading-snug)}.leading-tight{--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.font-black{--tw-font-weight:var(--font-weight-black);font-weight:var(--font-weight-black)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-extrabold{--tw-font-weight:var(--font-weight-extrabold);font-weight:var(--font-weight-extrabold)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-normal{--tw-tracking:var(--tracking-normal);letter-spacing:var(--tracking-normal)}.break-words{overflow-wrap:break-word}.break-all{word-break:break-all}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.text-\[\#666\]{color:#666}.text-\[\#777\]{color:#777}.text-\[\#888\]{color:#888}.text-\[\#b8b8b8\]{color:#b8b8b8}.text-\[\#d6d6d6\]{color:#d6d6d6}.text-\[\#d8ccff\]{color:#d8ccff}.text-\[\#f4f4f4\]{color:#f4f4f4}.text-amber-200{color:var(--color-amber-200)}.text-amber-300{color:var(--color-amber-300)}.text-black{color:var(--color-black)}.text-emerald-300{color:var(--color-emerald-300)}.text-inherit{color:inherit}.text-rose-300{color:var(--color-rose-300)}.text-violet-200{color:var(--color-violet-200)}.text-white{color:var(--color-white)}.lowercase{text-transform:lowercase}.uppercase{text-transform:uppercase}.no-underline{text-decoration-line:none}.underline{text-decoration-line:underline}.decoration-white{-webkit-text-decoration-color:var(--color-white);-webkit-text-decoration-color:var(--color-white);text-decoration-color:var(--color-white)}.underline-offset-4{text-underline-offset:4px}.\[color-scheme\:dark\]{color-scheme:dark}.saturate-50{--tw-saturate:saturate(50%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.backdrop-blur{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition-\[filter\,stroke\,stroke-width\]{transition-property:filter,stroke,stroke-width;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}.first\:border-t-0:first-child{border-top-style:var(--tw-border-style);border-top-width:0}.last\:border-b-0:last-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0}@media (hover:hover){.hover\:border-\[\#beaaff\]\/45:hover{border-color:oklab(78.6663% .0494663 -.109708/.45)}.hover\:border-white:hover{border-color:var(--color-white)}.hover\:border-white\/25:hover{border-color:#ffffff40}@supports (color:color-mix(in lab, red, red)){.hover\:border-white\/25:hover{border-color:color-mix(in oklab, var(--color-white) 25%, transparent)}}.hover\:border-white\/30:hover{border-color:#ffffff4d}@supports (color:color-mix(in lab, red, red)){.hover\:border-white\/30:hover{border-color:color-mix(in oklab, var(--color-white) 30%, transparent)}}.hover\:border-b-white\/45:hover{border-bottom-color:#ffffff73}@supports (color:color-mix(in lab, red, red)){.hover\:border-b-white\/45:hover{border-bottom-color:color-mix(in oklab, var(--color-white) 45%, transparent)}}.hover\:bg-\[\#151515\]:hover{background-color:#151515}.hover\:bg-\[rgba\(190\,170\,255\,0\.06\)\]:hover{background-color:#beaaff0f}.hover\:bg-\[rgba\(190\,170\,255\,0\.07\)\]:hover{background-color:#beaaff12}.hover\:bg-white\/\[0\.04\]:hover{background-color:#ffffff0a}@supports (color:color-mix(in lab, red, red)){.hover\:bg-white\/\[0\.04\]:hover{background-color:color-mix(in oklab, var(--color-white) 4%, transparent)}}.hover\:bg-white\/\[0\.05\]:hover{background-color:#ffffff0d}@supports (color:color-mix(in lab, red, red)){.hover\:bg-white\/\[0\.05\]:hover{background-color:color-mix(in oklab, var(--color-white) 5%, transparent)}}.hover\:text-white:hover{color:var(--color-white)}.hover\:underline:hover{text-decoration-line:underline}.hover\:brightness-125:hover{--tw-brightness:brightness(125%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}}.focus-visible\:stroke-emerald-400:focus-visible{stroke:var(--color-emerald-400)}.focus-visible\:stroke-2:focus-visible{stroke-width:2px}@media not all and (min-width:48rem){.max-md\:hidden{display:none}.max-md\:w-full{width:100%}.max-md\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.max-md\:flex-col{flex-direction:column}.max-md\:flex-wrap{flex-wrap:wrap}.max-md\:items-stretch{align-items:stretch}.max-md\:justify-between{justify-content:space-between}.max-md\:justify-items-start{justify-items:start}.max-md\:gap-1{gap:calc(var(--spacing) * 1)}.max-md\:px-4{padding-inline:calc(var(--spacing) * 4)}.max-md\:py-4{padding-block:calc(var(--spacing) * 4)}.max-md\:text-left{text-align:left}}@media (min-width:40rem){.sm\:basis-1\/3{flex-basis:33.3333%}}@media (min-width:48rem){.md\:grid-cols-\[minmax\(0\,1fr\)_auto\]{grid-template-columns:minmax(0,1fr) auto}.md\:truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.md\:px-8{padding-inline:calc(var(--spacing) * 8)}.md\:text-right{text-align:right}.md\:text-6xl{font-size:var(--text-6xl);line-height:var(--tw-leading,var(--text-6xl--line-height))}}@media (min-width:64rem){.lg\:grid-cols-\[minmax\(21rem\,0\.32fr\)_minmax\(0\,1fr\)\]{grid-template-columns:minmax(21rem,.32fr) minmax(0,1fr)}}.\[\&_code\]\:break-words code{overflow-wrap:break-word}.\[\&_code\]\:whitespace-pre-wrap code{white-space:pre-wrap}.\[\&_pre\]\:\!m-0 pre{margin:calc(var(--spacing) * 0)!important}.\[\&_pre\]\:\!overflow-visible pre{overflow:visible!important}.\[\&_pre\]\:\!bg-transparent pre{background-color:#0000!important}.\[\&_pre\]\:\!p-0 pre{padding:calc(var(--spacing) * 0)!important}.\[\&_pre\]\:font-mono pre{font-family:var(--font-mono)}.\[\&_pre\]\:text-\[0\.86rem\] pre{font-size:.86rem}.\[\&_pre\]\:leading-relaxed pre{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.\[\&_pre\]\:break-words pre{overflow-wrap:break-word}.\[\&_pre\]\:whitespace-pre-wrap pre{white-space:pre-wrap}.\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker{display:none}}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@keyframes pulse{50%{opacity:.5}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sentry/junior-dashboard",
-  "version": "0.60.0",
+  "version": "0.61.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -39,7 +39,7 @@
     "react-router": "^7.16.0",
     "recharts": "^3.8.1",
     "shiki": "4.1.0",
-    "@sentry/junior": "0.60.0"
+    "@sentry/junior": "0.61.0"
   },
   "devDependencies": {
     "@tailwindcss/cli": "^4.3.0",

package/src/client/code.tsx

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { codeToHtml, type BundledLanguage } from "shiki/bundle/web";
 
@@ -6,7 +7,7 @@ import type { CodeBlock, MarkupNode } from "./types";
 
 /** Count rendered children so transcripts can decide which markup node expands. */
 export function countStructuredBlockChildren(block: CodeBlock): number {
-  if (!canRenderStructuredMarkup(block.language)) return 1;
+  if (!canRenderStructuredMarkup(block)) return 1;
   const rootCount = parseMarkupNodes(block.code, block.language).length;
   return rootCount > 0 ? rootCount : 1;
 }
@@ -53,8 +54,18 @@ function MarkupNodeView(props: { defaultOpen?: boolean; node: MarkupNode }) {
     );
   }
 
+  return (
+    <MarkupElementView defaultOpen={props.defaultOpen} node={props.node} />
+  );
+}
+
+function MarkupElementView(props: {
+  defaultOpen?: boolean;
+  node: Extract<MarkupNode, { type: "element" }>;
+}) {
   const children = props.node.children;
   const hasChildren = children.length > 0;
+  const [open, setOpen] = useState(props.defaultOpen ?? true);
   const attributes = props.node.attributes.map(([name, value]) => (
     <span className="ml-1.5 text-[#b8b8b8]" key={name}>
       {name}=<span className="text-white">"{value}"</span>
@@ -74,12 +85,15 @@ function MarkupNodeView(props: { defaultOpen?: boolean; node: MarkupNode }) {
 
   return (
     <details
-      className="group min-w-0 break-words"
-      open={props.defaultOpen ?? true}
+      className="min-w-0 break-words"
+      onToggle={(event) => {
+        if (event.currentTarget !== event.target) return;
+        setOpen(event.currentTarget.open);
+      }}
+      open={open}
     >
       <summary className="-ml-1 flex w-full max-w-full cursor-pointer list-none flex-wrap items-baseline px-1 py-0.5 transition-colors hover:bg-white/[0.05] hover:text-white [&::-webkit-details-marker]:hidden">
-        <span className="mr-1 w-2 text-white group-open:hidden">+</span>
-        <span className="mr-1 hidden w-2 text-white group-open:inline">-</span>
+        <span className="mr-1 w-2 text-white">{open ? "-" : "+"}</span>
         <span className="text-[#888]">&lt;</span>
         <span className="font-bold text-white">{props.node.tagName}</span>
         {attributes}

package/src/client/components/ConversationRowStats.tsx

@@ -1,4 +1,8 @@
-import { slackLocationLabel } from "../format";
+import {
+  formatDurationTotal,
+  formatUsageTotal,
+  slackLocationLabel,
+} from "../format";
 import type { Conversation } from "../types";
 
 /** Render compact conversation metadata aligned to row context. */
@@ -6,14 +10,30 @@ export function ConversationRowStats(props: {
   conversation: Conversation;
   timeLabel: string;
 }) {
+  const tokens = formatUsageTotal(
+    props.conversation.turns.map((turn) => turn.cumulativeUsage),
+  );
+  const runtime = formatDurationTotal(
+    props.conversation.turns.map((turn) => turn.cumulativeDurationMs),
+  );
+  const primaryStats = [
+    `${props.conversation.turns.length} turns`,
+    tokens,
+    runtime ? `${runtime} runtime` : undefined,
+  ].filter(Boolean);
+  const secondaryStats = [
+    props.timeLabel,
+    slackLocationLabel(props.conversation, { includeId: false }),
+  ].filter(Boolean);
+
   return (
     <div className="grid min-w-0 justify-items-end gap-1 text-right max-md:justify-items-start max-md:text-left">
       <div className="text-[0.84rem] leading-relaxed text-[#b8b8b8]">
-        {props.conversation.turns.length} turns · {props.timeLabel}
+        {primaryStats.join(" · ")}
       </div>
-      {props.conversation.channel ? (
+      {secondaryStats.length > 0 ? (
         <div className="max-w-full break-words text-[0.84rem] leading-relaxed text-[#888] md:truncate">
-          {slackLocationLabel(props.conversation, { includeId: false })}
+          {secondaryStats.join(" · ")}
         </div>
       ) : null}
     </div>

package/src/client/components/TranscriptText.tsx

@@ -21,7 +21,7 @@ export function TranscriptText(props: {
         const childCount = countStructuredBlockChildren(block);
         seenChildren += childCount;
 
-        if (!canRenderStructuredMarkup(block.language)) {
+        if (!canRenderStructuredMarkup(block)) {
           return (
             <HighlightedCode
               code={block.code}

package/src/client/components/TranscriptTurn.tsx

@@ -1,8 +1,9 @@
-import type { ClipboardEventHandler, ReactNode } from "react";
+import { useState, type ClipboardEventHandler, type ReactNode } from "react";
 
 import { HighlightedCode } from "../code";
 import {
   detectLanguage,
+  detectOutputLanguage,
   formatBytes,
   formatMessageOffset,
   formatMessageTimestamp,
@@ -450,19 +451,7 @@ function TranscriptPartView(props: {
 
   const value = part.output;
   if (part.type === "thinking") {
-    const rendered = stringifyPartValue(value);
-    return (
-      <details className="border border-[#beaaff]/20 bg-white/[0.03] transition-colors hover:border-[#beaaff]/45 hover:bg-[rgba(190,170,255,0.06)]">
-        <summary className="grid cursor-pointer grid-cols-[auto_minmax(0,1fr)] items-center gap-3 px-3 py-2 font-mono text-[0.8rem] leading-tight text-[#888] hover:bg-[rgba(190,170,255,0.07)] max-md:grid-cols-1 max-md:gap-1">
-          <span className="uppercase text-[#b8b8b8]">thinking</span>
-          <span className="min-w-0 truncate">{previewToolValue(value)}</span>
-        </summary>
-        <HighlightedCode
-          code={rendered || "{}"}
-          language={detectLanguage(rendered)}
-        />
-      </details>
-    );
+    return <ThinkingPartView value={value} />;
   }
 
   const rendered = stringifyPartValue(value);
@@ -482,6 +471,37 @@ function TranscriptPartView(props: {
   );
 }
 
+function ThinkingPartView(props: { value: unknown }) {
+  const [open, setOpen] = useState(false);
+  const rendered = stringifyPartValue(props.value);
+
+  return (
+    <details
+      className="border border-[#beaaff]/20 bg-white/[0.03] transition-colors hover:border-[#beaaff]/45 hover:bg-[rgba(190,170,255,0.06)]"
+      onToggle={(event) => {
+        if (event.currentTarget !== event.target) return;
+        setOpen(event.currentTarget.open);
+      }}
+      open={open}
+    >
+      <summary className="grid cursor-pointer grid-cols-[auto_minmax(0,1fr)] items-center gap-3 px-3 py-2 font-mono text-[0.8rem] leading-tight text-[#888] hover:bg-[rgba(190,170,255,0.07)] max-md:grid-cols-1 max-md:gap-1">
+        <span className="uppercase text-[#b8b8b8]">thinking</span>
+        {open ? null : (
+          <span className="min-w-0 truncate">
+            {previewToolValue(props.value)}
+          </span>
+        )}
+      </summary>
+      <div className="border-t border-[#beaaff]/15 px-3 py-3">
+        <HighlightedCode
+          code={rendered || "{}"}
+          language={detectOutputLanguage(rendered)}
+        />
+      </div>
+    </details>
+  );
+}
+
 function isString(value: string | undefined): value is string {
   return typeof value === "string" && value.length > 0;
 }

package/src/client/format.ts

@@ -104,6 +104,17 @@ export function formatMs(value: number | undefined): string {
   return `${minutes}m ${remainingSeconds}s`;
 }
 
+/** Format aggregate runtime across turn summaries when duration data exists. */
+export function formatDurationTotal(
+  durations: Array<number | undefined>,
+): string {
+  const total = durations.reduce<number | undefined>((sum, value) => {
+    if (typeof value !== "number" || !Number.isFinite(value)) return sum;
+    return (sum ?? 0) + Math.max(0, Math.floor(value));
+  }, undefined);
+  return total === undefined ? "" : formatMs(total);
+}
+
 /** Format transcript event timestamps independently from turn start offsets. */
 export function formatMessageTimestamp(value: number | undefined): string {
   if (typeof value !== "number" || !Number.isFinite(value))
@@ -151,6 +162,25 @@ function formatNumber(value: number | undefined): string {
   return `${formatted}${suffix}`;
 }
 
+function getFiniteTokenCount(value: unknown): number | undefined {
+  return typeof value === "number" && Number.isFinite(value)
+    ? Math.max(0, Math.floor(value))
+    : undefined;
+}
+
+function getUsageComponentTotal(usage: TurnUsage): number | undefined {
+  return [
+    usage.inputTokens,
+    usage.outputTokens,
+    usage.cachedInputTokens,
+    usage.cacheCreationTokens,
+  ].reduce<number | undefined>((sum, value) => {
+    const count = getFiniteTokenCount(value);
+    if (count === undefined) return sum;
+    return (sum ?? 0) + count;
+  }, undefined);
+}
+
 /** Format byte counts in lowercase compact units for transcript metadata. */
 export function formatBytes(value: number | undefined): string {
   if (typeof value !== "number" || !Number.isFinite(value)) return "0b";
@@ -174,9 +204,36 @@ function transcriptSource(turn: ConversationTurn) {
     : (turn.transcriptMetadata ?? []);
 }
 
+function isConversationMessageRole(role: string): boolean {
+  const normalized = role.toLowerCase();
+  return normalized === "user" || normalized === "assistant";
+}
+
+function hasTextPart(
+  message: Pick<ConversationTurn["transcript"][number], "parts" | "role">,
+): boolean {
+  return message.parts.some((part) => {
+    if (part.type !== "text") return false;
+    if (part.redacted) return true;
+    return typeof part.text === "string" && part.text.trim().length > 0;
+  });
+}
+
+function isConversationMessage(
+  message: Pick<ConversationTurn["transcript"][number], "parts" | "role">,
+): boolean {
+  if (!isConversationMessageRole(message.role)) return false;
+  if (message.role.toLowerCase() === "assistant") return hasTextPart(message);
+  return message.parts.length > 0;
+}
+
 /** Count visible or redacted message records for a turn. */
 export function turnMessageCount(turn: ConversationTurn): number {
-  return turn.transcriptMessageCount ?? transcriptSource(turn).length;
+  const source = transcriptSource(turn);
+  if (source.length > 0) {
+    return source.filter(isConversationMessage).length;
+  }
+  return turn.transcriptMessageCount ?? 0;
 }
 
 /** Count tool calls from visible transcripts or safe redacted metadata. */
@@ -190,21 +247,9 @@ export function turnToolCallCount(turn: ConversationTurn): number {
 
 function totalUsageTokens(usage: TurnUsage | undefined): number | undefined {
   if (!usage) return undefined;
-  if (
-    typeof usage.totalTokens === "number" &&
-    Number.isFinite(usage.totalTokens)
-  ) {
-    return usage.totalTokens;
-  }
-  return [
-    usage.inputTokens,
-    usage.outputTokens,
-    usage.cachedInputTokens,
-    usage.cacheCreationTokens,
-  ].reduce<number | undefined>((sum, value) => {
-    if (typeof value !== "number" || !Number.isFinite(value)) return sum;
-    return (sum ?? 0) + Math.max(0, Math.floor(value));
-  }, undefined);
+  return (
+    getUsageComponentTotal(usage) ?? getFiniteTokenCount(usage.totalTokens)
+  );
 }
 
 /** Format known token counters without estimating per-message usage. */
@@ -213,6 +258,16 @@ export function formatTokenTotal(usage: TurnUsage | undefined): string {
   return total === undefined ? "" : `${formatNumber(total)} tokens`;
 }
 
+/** Format the aggregate token count across conversation turns. */
+export function formatUsageTotal(usages: Array<TurnUsage | undefined>): string {
+  const total = usages.reduce<number | undefined>((sum, usage) => {
+    const tokens = totalUsageTokens(usage);
+    if (tokens === undefined) return sum;
+    return (sum ?? 0) + tokens;
+  }, undefined);
+  return total === undefined ? "" : `${formatNumber(total)} tokens`;
+}
+
 /** Format known token counters with available input/output detail. */
 export function formatUsage(usage: TurnUsage | undefined): string {
   const total = totalUsageTokens(usage);
@@ -456,9 +511,34 @@ function formatCodeBlock(code: string, language: BundledLanguage): string {
   return language === "json" ? (prettyJsonData(code) ?? code) : code;
 }
 
-/** Decide whether a fenced block can use the interactive markup renderer. */
-export function canRenderStructuredMarkup(language: BundledLanguage): boolean {
-  return language === "xml" || language === "html";
+/**
+ * Detect the language for LLM text output prose: json if the text is valid
+ * JSON or JSONL, markdown otherwise. Never auto-detects XML, HTML, TypeScript,
+ * or shell — those heuristics are unreliable for rendered assistant output.
+ */
+export function detectOutputLanguage(text: string): BundledLanguage {
+  const trimmed = text.trim();
+  if (!trimmed) return "markdown";
+  try {
+    JSON.parse(trimmed);
+    return "json";
+  } catch {
+    // continue
+  }
+  if (prettyJsonl(trimmed)) return "json";
+  return "markdown";
+}
+
+/**
+ * Decide whether a fenced block can use the interactive markup renderer.
+ * Structured XML/HTML rendering is only enabled for explicitly-fenced blocks;
+ * auto-detected prose is never eligible regardless of inferred language.
+ */
+export function canRenderStructuredMarkup(block: CodeBlock): boolean {
+  return (
+    block.fenced === true &&
+    (block.language === "xml" || block.language === "html")
+  );
 }
 
 /** Parse markdown into renderable code blocks while preserving plain text blocks. */
@@ -470,24 +550,25 @@ export function parseMarkdownBlocks(text: string): CodeBlock[] {
   while ((match = fence.exec(text))) {
     const prose = text.slice(cursor, match.index).trim();
     if (prose) {
-      const language = detectLanguage(prose);
-      blocks.push({ code: formatCodeBlock(prose, language), language });
+      const language = detectOutputLanguage(prose);
+      blocks.push({ code: formatCodeBlock(prose, language), fenced: false, language });
     }
     const language = normalizeLanguage(match[1]);
     blocks.push({
       code: formatCodeBlock(match[2] ?? "", language),
+      fenced: true,
       language,
     });
     cursor = match.index + match[0].length;
   }
   const rest = text.slice(cursor).trim();
   if (rest) {
-    const language = detectLanguage(rest);
-    blocks.push({ code: formatCodeBlock(rest, language), language });
+    const language = detectOutputLanguage(rest);
+    blocks.push({ code: formatCodeBlock(rest, language), fenced: false, language });
   }
   if (blocks.length > 0) return blocks;
-  const language = detectLanguage(text);
-  return [{ code: formatCodeBlock(text, language), language }];
+  const language = detectOutputLanguage(text);
+  return [{ code: formatCodeBlock(text, language), fenced: false, language }];
 }
 
 /** Parse XML/HTML-ish fragments for the collapsible transcript renderer. */

package/src/client/pages/ConversationPage.tsx

@@ -8,6 +8,7 @@ import {
   formatConversationDuration,
   formatRelativeTime,
   formatTime,
+  formatUsageTotal,
   slackLocationLabel,
   turnMessageCount,
   turnToolCallCount,
@@ -123,11 +124,17 @@ function ConversationStats(props: {
         0,
       )
     : undefined;
+  const tokens = formatUsageTotal(
+    (props.detail?.turns ?? props.conversation.turns).map(
+      (turn) => turn.cumulativeUsage,
+    ),
+  );
   const stats = [
     slackLocationLabel(props.conversation, { includeId: false }),
     `${props.conversation.turns.length} turns`,
     messages === undefined ? "messages loading" : `${messages} messages`,
     toolCalls === undefined ? "tool calls loading" : `${toolCalls} tool calls`,
+    tokens,
     formatConversationDuration(props.conversation),
     `started ${formatTime(props.conversation.startedAt)}`,
   ].filter(Boolean);

package/src/client/types.ts

@@ -141,7 +141,7 @@ export type SessionFilter = "active" | "recent" | "hung" | "failed" | "all";
 
 export type VisualStatus = "active" | "failed" | "hung" | "idle";
 
-export type CodeBlock = { code: string; language: BundledLanguage };
+export type CodeBlock = { code: string; fenced?: boolean; language: BundledLanguage };
 
 export type MarkupNode =
   | {