@flanksource/clicky-ui 0.3.15 → 0.3.17

package/dist/data/ai/SessionViewer.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { Density } from '../../hooks/use-density';
 import { SessionEvent, SessionInput } from './SessionViewer.model';
 import { SessionThemeOverride } from './SessionViewerMenu';
@@ -26,8 +27,12 @@ export interface SessionViewerProps {
     showThinking?: boolean;
     /** Show the summary header (model + action counts). Defaults to true. */
     showHeader?: boolean;
+    /** Show context usage in the summary header. Defaults to true. */
+    showContextMeter?: boolean;
     /** Show the 3-dot menu (density + category/tool/source filters). Defaults to true. */
     showMenu?: boolean;
+    /** Controls rendered beside the 3-dot menu in the summary header. */
+    headerActions?: ReactNode;
     /** Portal the 3-dot menu into this element instead of rendering it inline in
      *  the summary header — lets a host place the menu in its own toolbar while the
      *  filter/density state stays owned by the viewer. Ignored when `showMenu` is
@@ -51,6 +56,8 @@ export interface SessionViewerProps {
     showRowMetadata?: boolean;
     /** Show a per-row raw JSON payload expander when available. Defaults to false. */
     showRaw?: boolean;
+    /** Render content before each assistant message body. */
+    renderMessageBadge?: (event: SessionEvent) => ReactNode;
     pendingTools?: readonly SessionPendingTool[];
     onPendingToolDecision?: ((decision: SessionToolDecision) => Promise<void> | void) | undefined;
 }
@@ -65,5 +72,5 @@ export interface SessionViewerProps {
  * `captain history` filtering — toggle density and hide categories, tools or
  * sources.
  */
-export declare function SessionViewer({ session, className, defaultExpanded, showThinking, showHeader, showMenu, menuContainer, defaultDensity, defaultTheme, scrollable, windowSize, batchSize, showRowMetadata, showRaw, pendingTools, onPendingToolDecision, }: SessionViewerProps): import("react/jsx-runtime").JSX.Element;
+export declare function SessionViewer({ session, className, defaultExpanded, showThinking, showHeader, showContextMeter, showMenu, headerActions, menuContainer, defaultDensity, defaultTheme, scrollable, windowSize, batchSize, showRowMetadata, showRaw, renderMessageBadge, pendingTools, onPendingToolDecision, }: SessionViewerProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=SessionViewer.d.ts.map

package/dist/data/ai/SessionViewer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SessionViewer.d.ts","sourceRoot":"","sources":["../../../src/data/ai/SessionViewer.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAmB,KAAK,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAGxE,OAAO,EAKL,KAAK,YAAY,EACjB,KAAK,YAAY,EAClB,MAAM,uBAAuB,CAAC;AAc/B,OAAO,EAAqB,KAAK,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAGnF,YAAY,EACV,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,iBAAiB,GAClB,MAAM,uBAAuB,CAAC;AAC/B,YAAY,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAEhE,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,YAAY,CAAC;IACpB,KAAK,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC,CAAC;CAC7C;AAED,MAAM,WAAW,kBAAkB;IACjC,iFAAiF;IACjF,OAAO,EAAE,YAAY,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0EAA0E;IAC1E,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,wEAAwE;IACxE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,yEAAyE;IACzE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sFAAsF;IACtF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;qEAGiE;IACjE,aAAa,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC/B,8EAA8E;IAC9E,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iFAAiF;IACjF,YAAY,CAAC,EAAE,oBAAoB,CAAC;IACpC;;;;iCAI6B;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yEAAyE;IACzE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qFAAqF;IACrF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kFAAkF;IAClF,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kFAAkF;IAClF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,SAAS,kBAAkB,EAAE,CAAC;IAC7C,qBAAqB,CAAC,EAAE,CAAC,CAAC,QAAQ,EAAE,mBAAmB,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,GAAG,SAAS,CAAC;CAC/F;AASD;;;;;;;;;;GAUG;AACH,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,SAAS,EACT,eAAuB,EACvB,YAAmB,EACnB,UAAiB,EACjB,QAAe,EACf,aAAa,EACb,cAAc,EACd,YAAY,EACZ,UAAkB,EAClB,UAAe,EACf,SAAc,EACd,eAAuB,EACvB,OAAe,EACf,YAAiB,EACjB,qBAAqB,GACtB,EAAE,kBAAkB,2CA+JpB"}
+{"version":3,"file":"SessionViewer.d.ts","sourceRoot":"","sources":["../../../src/data/ai/SessionViewer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAI1D,OAAO,EAAmB,KAAK,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAGxE,OAAO,EAIL,KAAK,YAAY,EACjB,KAAK,YAAY,EAClB,MAAM,uBAAuB,CAAC;AAY/B,OAAO,EAEL,KAAK,oBAAoB,EAC1B,MAAM,qBAAqB,CAAC;AAG7B,YAAY,EACV,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,iBAAiB,GAClB,MAAM,uBAAuB,CAAC;AAC/B,YAAY,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAEhE,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,YAAY,CAAC;IACpB,KAAK,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC,CAAC;CAC7C;AAED,MAAM,WAAW,kBAAkB;IACjC,iFAAiF;IACjF,OAAO,EAAE,YAAY,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0EAA0E;IAC1E,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,wEAAwE;IACxE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,yEAAyE;IACzE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kEAAkE;IAClE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,sFAAsF;IACtF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qEAAqE;IACrE,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B;;;qEAGiE;IACjE,aAAa,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC/B,8EAA8E;IAC9E,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iFAAiF;IACjF,YAAY,CAAC,EAAE,oBAAoB,CAAC;IACpC;;;;iCAI6B;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yEAAyE;IACzE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qFAAqF;IACrF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kFAAkF;IAClF,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kFAAkF;IAClF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yDAAyD;IACzD,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,SAAS,CAAC;IACxD,YAAY,CAAC,EAAE,SAAS,kBAAkB,EAAE,CAAC;IAC7C,qBAAqB,CAAC,EAClB,CAAC,CAAC,QAAQ,EAAE,mBAAmB,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,GACzD,SAAS,CAAC;CACf;AASD;;;;;;;;;;GAUG;AACH,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,SAAS,EACT,eAAuB,EACvB,YAAmB,EACnB,UAAiB,EACjB,gBAAuB,EACvB,QAAe,EACf,aAAa,EACb,aAAa,EACb,cAAc,EACd,YAAY,EACZ,UAAkB,EAClB,UAAe,EACf,SAAc,EACd,eAAuB,EACvB,OAAe,EACf,kBAAkB,EAClB,YAAiB,EACjB,qBAAqB,GACtB,EAAE,kBAAkB,2CA+MpB"}

package/dist/data/ai/SessionViewer.fixtures.d.ts

@@ -1,4 +1,6 @@
 import { SessionEntry } from './SessionViewer.model';
+import { UnifiedSessionInput } from './SessionViewer.unified';
+export declare const INSPECTOR_SESSION: UnifiedSessionInput;
 export declare const SAMPLE_SESSION: SessionEntry[];
 export declare const SAMPLE_SESSION_JSONL: string;
 //# sourceMappingURL=SessionViewer.fixtures.d.ts.map

package/dist/data/ai/SessionViewer.fixtures.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SessionViewer.fixtures.d.ts","sourceRoot":"","sources":["../../../src/data/ai/SessionViewer.fixtures.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAK1D,eAAO,MAAM,cAAc,EAAE,YAAY,EA6FxC,CAAC;AAIF,eAAO,MAAM,oBAAoB,QAIrB,CAAC"}
+{"version":3,"file":"SessionViewer.fixtures.d.ts","sourceRoot":"","sources":["../../../src/data/ai/SessionViewer.fixtures.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAEnE,eAAO,MAAM,iBAAiB,EAAE,mBAqK/B,CAAC;AAKF,eAAO,MAAM,cAAc,EAAE,YAAY,EA8GxC,CAAC;AAIF,eAAO,MAAM,oBAAoB,QAIrB,CAAC"}

package/dist/data/ai/SessionViewer.header.cjs

@@ -0,0 +1,118 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const ContextMeter = require("../chat/ContextMeter.cjs");
+const providerIcons = require("../chat/provider-icons.cjs");
+const sessionCost = require("./session-cost.cjs");
+function hasContextMeterMetadata(metadata) {
+  return Boolean(metadata.context || metadata.sessionId || metadata.model);
+}
+function SessionContextMeter({
+  metadata,
+  mode
+}) {
+  if (!hasContextMeterMetadata(metadata)) return null;
+  const context = metadata.context;
+  const modelIcon = metadata.provider ? providerIcons.providerIcon(metadata.provider) : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ContextMeter.ContextMeter,
+    {
+      mode,
+      usedPercent: context ? 100 - context.freePercent : 0,
+      ...context ? {
+        usedTokens: context.usedTokens,
+        windowTokens: context.windowTokens
+      } : {},
+      ...metadata.sessionId ? { sessionId: metadata.sessionId } : {},
+      ...metadata.executionMode ? { executionMode: metadata.executionMode } : {},
+      ...metadata.model ? { model: metadata.model } : {},
+      ...metadata.reasoningEffort ? { effort: metadata.reasoningEffort } : {},
+      ...modelIcon ? { modelIcon } : {},
+      ...metadata.provider ? {
+        modelIconClassName: providerIcons.providerIconColor(metadata.provider)
+      } : {},
+      ...metadata.usage ? {
+        tokens: {
+          input: metadata.usage.inputTokens,
+          output: metadata.usage.outputTokens,
+          reasoning: metadata.usage.reasoningTokens,
+          cacheRead: metadata.usage.cacheReadTokens,
+          cacheWrite: metadata.usage.cacheWriteTokens,
+          total: sessionCost.tokenTotal(metadata.usage)
+        }
+      } : {},
+      ...metadata.cost ? {
+        cost: {
+          input: metadata.cost.inputCost,
+          output: metadata.cost.outputCost,
+          reasoning: metadata.cost.reasoningCost,
+          cacheRead: metadata.cost.cacheReadCost,
+          cacheWrite: metadata.cost.cacheWriteCost,
+          total: sessionCost.costTotal(metadata.cost)
+        }
+      } : {},
+      ...metadata.budget ? { budget: metadata.budget } : {}
+    }
+  );
+}
+function SessionMetadataBadges({
+  metadata,
+  showContextMeter
+}) {
+  var _a, _b, _c, _d, _e, _f;
+  const capabilityBadges = [
+    countBadge("tool", (_a = metadata.capabilities) == null ? void 0 : _a.tools),
+    countBadge("mcp", (_b = metadata.capabilities) == null ? void 0 : _b.pendingMcpServers),
+    countBadge("agent", (_c = metadata.capabilities) == null ? void 0 : _c.agents),
+    countBadge("skill", (_d = metadata.capabilities) == null ? void 0 : _d.skills)
+  ].filter(Boolean);
+  const badges = [
+    ...((_e = metadata.turns) == null ? void 0 : _e.length) ? [{ key: "turns", label: countLabel(metadata.turns.length, "turn") }] : [],
+    ...capabilityBadges,
+    ...!metadata.context && metadata.budget ? [{ key: "budget", label: budgetLabel(metadata.budget) }] : [],
+    ...((_f = metadata.events) == null ? void 0 : _f.length) ? [{ key: "events", label: countLabel(metadata.events.length, "event") }] : []
+  ];
+  const renderContextMeter = showContextMeter && hasContextMeterMetadata(metadata);
+  if (badges.length === 0 && !renderContextMeter) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    badges.map((badge) => /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        title: badge.title,
+        className: "inline-flex max-w-40 items-center rounded border border-border px-1.5 py-0.5 text-[11px] text-muted-foreground",
+        children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: badge.label })
+      },
+      badge.key
+    )),
+    renderContextMeter ? /* @__PURE__ */ jsxRuntime.jsx(SessionContextMeter, { metadata, mode: "bar" }) : null
+  ] });
+}
+function countBadge(label, values) {
+  const count = (values == null ? void 0 : values.length) ?? 0;
+  if (!count) return null;
+  return {
+    key: label,
+    label: countLabel(count, label),
+    title: values == null ? void 0 : values.join(", ")
+  };
+}
+function countLabel(count, label) {
+  if (label === "mcp") return `${count} mcp`;
+  return `${count} ${label}${count === 1 ? "" : "s"}`;
+}
+function budgetLabel(budget) {
+  if (budget.total !== void 0 && budget.total > 0) {
+    return `budget ${formatUSD(budget.used ?? 0)}/${formatUSD(budget.total)}`;
+  }
+  if (budget.remaining !== void 0)
+    return `budget ${formatUSD(budget.remaining)} left`;
+  if (budget.used !== void 0) return `budget ${formatUSD(budget.used)} used`;
+  return "budget";
+}
+function formatUSD(value) {
+  if (value < 1 || !Number.isInteger(value)) return `$${value.toFixed(2)}`;
+  return `$${value.toFixed(0)}`;
+}
+exports.SessionContextMeter = SessionContextMeter;
+exports.SessionMetadataBadges = SessionMetadataBadges;
+//# sourceMappingURL=SessionViewer.header.cjs.map

package/dist/data/ai/SessionViewer.header.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SessionViewer.header.cjs","sources":["../../../src/data/ai/SessionViewer.header.tsx"],"sourcesContent":["import { ContextMeter, type ContextMeterMode } from \"../chat/ContextMeter\";\nimport { providerIcon, providerIconColor } from \"../chat/provider-icons\";\nimport { costTotal, tokenTotal } from \"./session-cost\";\nimport type { SessionMetadataSummary } from \"./SessionViewer.model\";\n\nfunction hasContextMeterMetadata(metadata: SessionMetadataSummary) {\n  return Boolean(metadata.context || metadata.sessionId || metadata.model);\n}\n\nexport function SessionContextMeter({\n  metadata,\n  mode,\n}: {\n  metadata: SessionMetadataSummary;\n  mode: ContextMeterMode;\n}) {\n  if (!hasContextMeterMetadata(metadata)) return null;\n  const context = metadata.context;\n  const modelIcon = metadata.provider\n    ? providerIcon(metadata.provider)\n    : undefined;\n\n  return (\n    <ContextMeter\n      mode={mode}\n      usedPercent={context ? 100 - context.freePercent : 0}\n      {...(context\n        ? {\n            usedTokens: context.usedTokens,\n            windowTokens: context.windowTokens,\n          }\n        : {})}\n      {...(metadata.sessionId ? { sessionId: metadata.sessionId } : {})}\n      {...(metadata.executionMode\n        ? { executionMode: metadata.executionMode }\n        : {})}\n      {...(metadata.model ? { model: metadata.model } : {})}\n      {...(metadata.reasoningEffort\n        ? { effort: metadata.reasoningEffort }\n        : {})}\n      {...(modelIcon ? { modelIcon } : {})}\n      {...(metadata.provider\n        ? {\n            modelIconClassName: providerIconColor(metadata.provider),\n          }\n        : {})}\n      {...(metadata.usage\n        ? {\n            tokens: {\n              input: metadata.usage.inputTokens,\n              output: metadata.usage.outputTokens,\n              reasoning: metadata.usage.reasoningTokens,\n              cacheRead: metadata.usage.cacheReadTokens,\n              cacheWrite: metadata.usage.cacheWriteTokens,\n              total: tokenTotal(metadata.usage),\n            },\n          }\n        : {})}\n      {...(metadata.cost\n        ? {\n            cost: {\n              input: metadata.cost.inputCost,\n              output: metadata.cost.outputCost,\n              reasoning: metadata.cost.reasoningCost,\n              cacheRead: metadata.cost.cacheReadCost,\n              cacheWrite: metadata.cost.cacheWriteCost,\n              total: costTotal(metadata.cost),\n            },\n          }\n        : {})}\n      {...(metadata.budget ? { budget: metadata.budget } : {})}\n    />\n  );\n}\n\nexport function SessionMetadataBadges({\n  metadata,\n  showContextMeter,\n}: {\n  metadata: SessionMetadataSummary;\n  showContextMeter: boolean;\n}) {\n  const capabilityBadges = [\n    countBadge(\"tool\", metadata.capabilities?.tools),\n    countBadge(\"mcp\", metadata.capabilities?.pendingMcpServers),\n    countBadge(\"agent\", metadata.capabilities?.agents),\n    countBadge(\"skill\", metadata.capabilities?.skills),\n  ].filter(Boolean) as Array<{ key: string; label: string; title?: string }>;\n  const badges: Array<{ key: string; label: string; title?: string }> = [\n    ...(metadata.turns?.length\n      ? [{ key: \"turns\", label: countLabel(metadata.turns.length, \"turn\") }]\n      : []),\n    ...capabilityBadges,\n    ...(!metadata.context && metadata.budget\n      ? [{ key: \"budget\", label: budgetLabel(metadata.budget) }]\n      : []),\n    ...(metadata.events?.length\n      ? [{ key: \"events\", label: countLabel(metadata.events.length, \"event\") }]\n      : []),\n  ];\n  const renderContextMeter =\n    showContextMeter && hasContextMeterMetadata(metadata);\n  if (badges.length === 0 && !renderContextMeter) return null;\n\n  return (\n    <>\n      {badges.map((badge) => (\n        <span\n          key={badge.key}\n          title={badge.title}\n          className=\"inline-flex max-w-40 items-center rounded border border-border px-1.5 py-0.5 text-[11px] text-muted-foreground\"\n        >\n          <span className=\"truncate\">{badge.label}</span>\n        </span>\n      ))}\n      {renderContextMeter ? (\n        <SessionContextMeter metadata={metadata} mode=\"bar\" />\n      ) : null}\n    </>\n  );\n}\n\nfunction countBadge(label: string, values: string[] | undefined) {\n  const count = values?.length ?? 0;\n  if (!count) return null;\n  return {\n    key: label,\n    label: countLabel(count, label),\n    title: values?.join(\", \"),\n  };\n}\n\nfunction countLabel(count: number, label: string) {\n  if (label === \"mcp\") return `${count} mcp`;\n  return `${count} ${label}${count === 1 ? \"\" : \"s\"}`;\n}\n\nfunction budgetLabel(budget: {\n  used?: number;\n  total?: number;\n  remaining?: number;\n}) {\n  if (budget.total !== undefined && budget.total > 0) {\n    return `budget ${formatUSD(budget.used ?? 0)}/${formatUSD(budget.total)}`;\n  }\n  if (budget.remaining !== undefined)\n    return `budget ${formatUSD(budget.remaining)} left`;\n  if (budget.used !== undefined) return `budget ${formatUSD(budget.used)} used`;\n  return \"budget\";\n}\n\nfunction formatUSD(value: number) {\n  if (value < 1 || !Number.isInteger(value)) return `$${value.toFixed(2)}`;\n  return `$${value.toFixed(0)}`;\n}\n"],"names":["providerIcon","jsx","ContextMeter","providerIconColor","tokenTotal","costTotal","jsxs","Fragment"],"mappings":"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"}

package/dist/data/ai/SessionViewer.header.d.ts

@@ -0,0 +1,11 @@
+import { ContextMeterMode } from '../chat/ContextMeter';
+import { SessionMetadataSummary } from './SessionViewer.model';
+export declare function SessionContextMeter({ metadata, mode, }: {
+    metadata: SessionMetadataSummary;
+    mode: ContextMeterMode;
+}): import("react/jsx-runtime").JSX.Element | null;
+export declare function SessionMetadataBadges({ metadata, showContextMeter, }: {
+    metadata: SessionMetadataSummary;
+    showContextMeter: boolean;
+}): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=SessionViewer.header.d.ts.map

package/dist/data/ai/SessionViewer.header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SessionViewer.header.d.ts","sourceRoot":"","sources":["../../../src/data/ai/SessionViewer.header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgB,KAAK,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAG3E,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAMpE,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,IAAI,GACL,EAAE;IACD,QAAQ,EAAE,sBAAsB,CAAC;IACjC,IAAI,EAAE,gBAAgB,CAAC;CACxB,kDA0DA;AAED,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,gBAAgB,GACjB,EAAE;IACD,QAAQ,EAAE,sBAAsB,CAAC;IACjC,gBAAgB,EAAE,OAAO,CAAC;CAC3B,kDAuCA"}

package/dist/data/ai/SessionViewer.header.js

@@ -0,0 +1,118 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { ContextMeter } from "../chat/ContextMeter.js";
+import { providerIcon, providerIconColor } from "../chat/provider-icons.js";
+import { costTotal, tokenTotal } from "./session-cost.js";
+function hasContextMeterMetadata(metadata) {
+  return Boolean(metadata.context || metadata.sessionId || metadata.model);
+}
+function SessionContextMeter({
+  metadata,
+  mode
+}) {
+  if (!hasContextMeterMetadata(metadata)) return null;
+  const context = metadata.context;
+  const modelIcon = metadata.provider ? providerIcon(metadata.provider) : void 0;
+  return /* @__PURE__ */ jsx(
+    ContextMeter,
+    {
+      mode,
+      usedPercent: context ? 100 - context.freePercent : 0,
+      ...context ? {
+        usedTokens: context.usedTokens,
+        windowTokens: context.windowTokens
+      } : {},
+      ...metadata.sessionId ? { sessionId: metadata.sessionId } : {},
+      ...metadata.executionMode ? { executionMode: metadata.executionMode } : {},
+      ...metadata.model ? { model: metadata.model } : {},
+      ...metadata.reasoningEffort ? { effort: metadata.reasoningEffort } : {},
+      ...modelIcon ? { modelIcon } : {},
+      ...metadata.provider ? {
+        modelIconClassName: providerIconColor(metadata.provider)
+      } : {},
+      ...metadata.usage ? {
+        tokens: {
+          input: metadata.usage.inputTokens,
+          output: metadata.usage.outputTokens,
+          reasoning: metadata.usage.reasoningTokens,
+          cacheRead: metadata.usage.cacheReadTokens,
+          cacheWrite: metadata.usage.cacheWriteTokens,
+          total: tokenTotal(metadata.usage)
+        }
+      } : {},
+      ...metadata.cost ? {
+        cost: {
+          input: metadata.cost.inputCost,
+          output: metadata.cost.outputCost,
+          reasoning: metadata.cost.reasoningCost,
+          cacheRead: metadata.cost.cacheReadCost,
+          cacheWrite: metadata.cost.cacheWriteCost,
+          total: costTotal(metadata.cost)
+        }
+      } : {},
+      ...metadata.budget ? { budget: metadata.budget } : {}
+    }
+  );
+}
+function SessionMetadataBadges({
+  metadata,
+  showContextMeter
+}) {
+  var _a, _b, _c, _d, _e, _f;
+  const capabilityBadges = [
+    countBadge("tool", (_a = metadata.capabilities) == null ? void 0 : _a.tools),
+    countBadge("mcp", (_b = metadata.capabilities) == null ? void 0 : _b.pendingMcpServers),
+    countBadge("agent", (_c = metadata.capabilities) == null ? void 0 : _c.agents),
+    countBadge("skill", (_d = metadata.capabilities) == null ? void 0 : _d.skills)
+  ].filter(Boolean);
+  const badges = [
+    ...((_e = metadata.turns) == null ? void 0 : _e.length) ? [{ key: "turns", label: countLabel(metadata.turns.length, "turn") }] : [],
+    ...capabilityBadges,
+    ...!metadata.context && metadata.budget ? [{ key: "budget", label: budgetLabel(metadata.budget) }] : [],
+    ...((_f = metadata.events) == null ? void 0 : _f.length) ? [{ key: "events", label: countLabel(metadata.events.length, "event") }] : []
+  ];
+  const renderContextMeter = showContextMeter && hasContextMeterMetadata(metadata);
+  if (badges.length === 0 && !renderContextMeter) return null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    badges.map((badge) => /* @__PURE__ */ jsx(
+      "span",
+      {
+        title: badge.title,
+        className: "inline-flex max-w-40 items-center rounded border border-border px-1.5 py-0.5 text-[11px] text-muted-foreground",
+        children: /* @__PURE__ */ jsx("span", { className: "truncate", children: badge.label })
+      },
+      badge.key
+    )),
+    renderContextMeter ? /* @__PURE__ */ jsx(SessionContextMeter, { metadata, mode: "bar" }) : null
+  ] });
+}
+function countBadge(label, values) {
+  const count = (values == null ? void 0 : values.length) ?? 0;
+  if (!count) return null;
+  return {
+    key: label,
+    label: countLabel(count, label),
+    title: values == null ? void 0 : values.join(", ")
+  };
+}
+function countLabel(count, label) {
+  if (label === "mcp") return `${count} mcp`;
+  return `${count} ${label}${count === 1 ? "" : "s"}`;
+}
+function budgetLabel(budget) {
+  if (budget.total !== void 0 && budget.total > 0) {
+    return `budget ${formatUSD(budget.used ?? 0)}/${formatUSD(budget.total)}`;
+  }
+  if (budget.remaining !== void 0)
+    return `budget ${formatUSD(budget.remaining)} left`;
+  if (budget.used !== void 0) return `budget ${formatUSD(budget.used)} used`;
+  return "budget";
+}
+function formatUSD(value) {
+  if (value < 1 || !Number.isInteger(value)) return `$${value.toFixed(2)}`;
+  return `$${value.toFixed(0)}`;
+}
+export {
+  SessionContextMeter,
+  SessionMetadataBadges
+};
+//# sourceMappingURL=SessionViewer.header.js.map

package/dist/data/ai/SessionViewer.header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SessionViewer.header.js","sources":["../../../src/data/ai/SessionViewer.header.tsx"],"sourcesContent":["import { ContextMeter, type ContextMeterMode } from \"../chat/ContextMeter\";\nimport { providerIcon, providerIconColor } from \"../chat/provider-icons\";\nimport { costTotal, tokenTotal } from \"./session-cost\";\nimport type { SessionMetadataSummary } from \"./SessionViewer.model\";\n\nfunction hasContextMeterMetadata(metadata: SessionMetadataSummary) {\n  return Boolean(metadata.context || metadata.sessionId || metadata.model);\n}\n\nexport function SessionContextMeter({\n  metadata,\n  mode,\n}: {\n  metadata: SessionMetadataSummary;\n  mode: ContextMeterMode;\n}) {\n  if (!hasContextMeterMetadata(metadata)) return null;\n  const context = metadata.context;\n  const modelIcon = metadata.provider\n    ? providerIcon(metadata.provider)\n    : undefined;\n\n  return (\n    <ContextMeter\n      mode={mode}\n      usedPercent={context ? 100 - context.freePercent : 0}\n      {...(context\n        ? {\n            usedTokens: context.usedTokens,\n            windowTokens: context.windowTokens,\n          }\n        : {})}\n      {...(metadata.sessionId ? { sessionId: metadata.sessionId } : {})}\n      {...(metadata.executionMode\n        ? { executionMode: metadata.executionMode }\n        : {})}\n      {...(metadata.model ? { model: metadata.model } : {})}\n      {...(metadata.reasoningEffort\n        ? { effort: metadata.reasoningEffort }\n        : {})}\n      {...(modelIcon ? { modelIcon } : {})}\n      {...(metadata.provider\n        ? {\n            modelIconClassName: providerIconColor(metadata.provider),\n          }\n        : {})}\n      {...(metadata.usage\n        ? {\n            tokens: {\n              input: metadata.usage.inputTokens,\n              output: metadata.usage.outputTokens,\n              reasoning: metadata.usage.reasoningTokens,\n              cacheRead: metadata.usage.cacheReadTokens,\n              cacheWrite: metadata.usage.cacheWriteTokens,\n              total: tokenTotal(metadata.usage),\n            },\n          }\n        : {})}\n      {...(metadata.cost\n        ? {\n            cost: {\n              input: metadata.cost.inputCost,\n              output: metadata.cost.outputCost,\n              reasoning: metadata.cost.reasoningCost,\n              cacheRead: metadata.cost.cacheReadCost,\n              cacheWrite: metadata.cost.cacheWriteCost,\n              total: costTotal(metadata.cost),\n            },\n          }\n        : {})}\n      {...(metadata.budget ? { budget: metadata.budget } : {})}\n    />\n  );\n}\n\nexport function SessionMetadataBadges({\n  metadata,\n  showContextMeter,\n}: {\n  metadata: SessionMetadataSummary;\n  showContextMeter: boolean;\n}) {\n  const capabilityBadges = [\n    countBadge(\"tool\", metadata.capabilities?.tools),\n    countBadge(\"mcp\", metadata.capabilities?.pendingMcpServers),\n    countBadge(\"agent\", metadata.capabilities?.agents),\n    countBadge(\"skill\", metadata.capabilities?.skills),\n  ].filter(Boolean) as Array<{ key: string; label: string; title?: string }>;\n  const badges: Array<{ key: string; label: string; title?: string }> = [\n    ...(metadata.turns?.length\n      ? [{ key: \"turns\", label: countLabel(metadata.turns.length, \"turn\") }]\n      : []),\n    ...capabilityBadges,\n    ...(!metadata.context && metadata.budget\n      ? [{ key: \"budget\", label: budgetLabel(metadata.budget) }]\n      : []),\n    ...(metadata.events?.length\n      ? [{ key: \"events\", label: countLabel(metadata.events.length, \"event\") }]\n      : []),\n  ];\n  const renderContextMeter =\n    showContextMeter && hasContextMeterMetadata(metadata);\n  if (badges.length === 0 && !renderContextMeter) return null;\n\n  return (\n    <>\n      {badges.map((badge) => (\n        <span\n          key={badge.key}\n          title={badge.title}\n          className=\"inline-flex max-w-40 items-center rounded border border-border px-1.5 py-0.5 text-[11px] text-muted-foreground\"\n        >\n          <span className=\"truncate\">{badge.label}</span>\n        </span>\n      ))}\n      {renderContextMeter ? (\n        <SessionContextMeter metadata={metadata} mode=\"bar\" />\n      ) : null}\n    </>\n  );\n}\n\nfunction countBadge(label: string, values: string[] | undefined) {\n  const count = values?.length ?? 0;\n  if (!count) return null;\n  return {\n    key: label,\n    label: countLabel(count, label),\n    title: values?.join(\", \"),\n  };\n}\n\nfunction countLabel(count: number, label: string) {\n  if (label === \"mcp\") return `${count} mcp`;\n  return `${count} ${label}${count === 1 ? \"\" : \"s\"}`;\n}\n\nfunction budgetLabel(budget: {\n  used?: number;\n  total?: number;\n  remaining?: number;\n}) {\n  if (budget.total !== undefined && budget.total > 0) {\n    return `budget ${formatUSD(budget.used ?? 0)}/${formatUSD(budget.total)}`;\n  }\n  if (budget.remaining !== undefined)\n    return `budget ${formatUSD(budget.remaining)} left`;\n  if (budget.used !== undefined) return `budget ${formatUSD(budget.used)} used`;\n  return \"budget\";\n}\n\nfunction formatUSD(value: number) {\n  if (value < 1 || !Number.isInteger(value)) return `$${value.toFixed(2)}`;\n  return `$${value.toFixed(0)}`;\n}\n"],"names":[],"mappings":";;;;AAKA,SAAS,wBAAwB,UAAkC;AACjE,SAAO,QAAQ,SAAS,WAAW,SAAS,aAAa,SAAS,KAAK;AACzE;AAEO,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AACF,GAGG;AACD,MAAI,CAAC,wBAAwB,QAAQ,EAAG,QAAO;AAC/C,QAAM,UAAU,SAAS;AACzB,QAAM,YAAY,SAAS,WACvB,aAAa,SAAS,QAAQ,IAC9B;AAEJ,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,aAAa,UAAU,MAAM,QAAQ,cAAc;AAAA,MAClD,GAAI,UACD;AAAA,QACE,YAAY,QAAQ;AAAA,QACpB,cAAc,QAAQ;AAAA,MAAA,IAExB,CAAA;AAAA,MACH,GAAI,SAAS,YAAY,EAAE,WAAW,SAAS,UAAA,IAAc,CAAA;AAAA,MAC7D,GAAI,SAAS,gBACV,EAAE,eAAe,SAAS,cAAA,IAC1B,CAAA;AAAA,MACH,GAAI,SAAS,QAAQ,EAAE,OAAO,SAAS,MAAA,IAAU,CAAA;AAAA,MACjD,GAAI,SAAS,kBACV,EAAE,QAAQ,SAAS,gBAAA,IACnB,CAAA;AAAA,MACH,GAAI,YAAY,EAAE,UAAA,IAAc,CAAA;AAAA,MAChC,GAAI,SAAS,WACV;AAAA,QACE,oBAAoB,kBAAkB,SAAS,QAAQ;AAAA,MAAA,IAEzD,CAAA;AAAA,MACH,GAAI,SAAS,QACV;AAAA,QACE,QAAQ;AAAA,UACN,OAAO,SAAS,MAAM;AAAA,UACtB,QAAQ,SAAS,MAAM;AAAA,UACvB,WAAW,SAAS,MAAM;AAAA,UAC1B,WAAW,SAAS,MAAM;AAAA,UAC1B,YAAY,SAAS,MAAM;AAAA,UAC3B,OAAO,WAAW,SAAS,KAAK;AAAA,QAAA;AAAA,MAClC,IAEF,CAAA;AAAA,MACH,GAAI,SAAS,OACV;AAAA,QACE,MAAM;AAAA,UACJ,OAAO,SAAS,KAAK;AAAA,UACrB,QAAQ,SAAS,KAAK;AAAA,UACtB,WAAW,SAAS,KAAK;AAAA,UACzB,WAAW,SAAS,KAAK;AAAA,UACzB,YAAY,SAAS,KAAK;AAAA,UAC1B,OAAO,UAAU,SAAS,IAAI;AAAA,QAAA;AAAA,MAChC,IAEF,CAAA;AAAA,MACH,GAAI,SAAS,SAAS,EAAE,QAAQ,SAAS,OAAA,IAAW,CAAA;AAAA,IAAC;AAAA,EAAA;AAG5D;AAEO,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AACF,GAGG;;AACD,QAAM,mBAAmB;AAAA,IACvB,WAAW,SAAQ,cAAS,iBAAT,mBAAuB,KAAK;AAAA,IAC/C,WAAW,QAAO,cAAS,iBAAT,mBAAuB,iBAAiB;AAAA,IAC1D,WAAW,UAAS,cAAS,iBAAT,mBAAuB,MAAM;AAAA,IACjD,WAAW,UAAS,cAAS,iBAAT,mBAAuB,MAAM;AAAA,EAAA,EACjD,OAAO,OAAO;AAChB,QAAM,SAAgE;AAAA,IACpE,KAAI,cAAS,UAAT,mBAAgB,UAChB,CAAC,EAAE,KAAK,SAAS,OAAO,WAAW,SAAS,MAAM,QAAQ,MAAM,EAAA,CAAG,IACnE,CAAA;AAAA,IACJ,GAAG;AAAA,IACH,GAAI,CAAC,SAAS,WAAW,SAAS,SAC9B,CAAC,EAAE,KAAK,UAAU,OAAO,YAAY,SAAS,MAAM,EAAA,CAAG,IACvD,CAAA;AAAA,IACJ,KAAI,cAAS,WAAT,mBAAiB,UACjB,CAAC,EAAE,KAAK,UAAU,OAAO,WAAW,SAAS,OAAO,QAAQ,OAAO,EAAA,CAAG,IACtE,CAAA;AAAA,EAAC;AAEP,QAAM,qBACJ,oBAAoB,wBAAwB,QAAQ;AACtD,MAAI,OAAO,WAAW,KAAK,CAAC,mBAAoB,QAAO;AAEvD,SACE,qBAAA,UAAA,EACG,UAAA;AAAA,IAAA,OAAO,IAAI,CAAC,UACX;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,OAAO,MAAM;AAAA,QACb,WAAU;AAAA,QAEV,UAAA,oBAAC,QAAA,EAAK,WAAU,YAAY,gBAAM,MAAA,CAAM;AAAA,MAAA;AAAA,MAJnC,MAAM;AAAA,IAAA,CAMd;AAAA,IACA,qBACC,oBAAC,qBAAA,EAAoB,UAAoB,MAAK,OAAM,IAClD;AAAA,EAAA,GACN;AAEJ;AAEA,SAAS,WAAW,OAAe,QAA8B;AAC/D,QAAM,SAAQ,iCAAQ,WAAU;AAChC,MAAI,CAAC,MAAO,QAAO;AACnB,SAAO;AAAA,IACL,KAAK;AAAA,IACL,OAAO,WAAW,OAAO,KAAK;AAAA,IAC9B,OAAO,iCAAQ,KAAK;AAAA,EAAI;AAE5B;AAEA,SAAS,WAAW,OAAe,OAAe;AAChD,MAAI,UAAU,MAAO,QAAO,GAAG,KAAK;AACpC,SAAO,GAAG,KAAK,IAAI,KAAK,GAAG,UAAU,IAAI,KAAK,GAAG;AACnD;AAEA,SAAS,YAAY,QAIlB;AACD,MAAI,OAAO,UAAU,UAAa,OAAO,QAAQ,GAAG;AAClD,WAAO,UAAU,UAAU,OAAO,QAAQ,CAAC,CAAC,IAAI,UAAU,OAAO,KAAK,CAAC;AAAA,EACzE;AACA,MAAI,OAAO,cAAc;AACvB,WAAO,UAAU,UAAU,OAAO,SAAS,CAAC;AAC9C,MAAI,OAAO,SAAS,OAAW,QAAO,UAAU,UAAU,OAAO,IAAI,CAAC;AACtE,SAAO;AACT;AAEA,SAAS,UAAU,OAAe;AAChC,MAAI,QAAQ,KAAK,CAAC,OAAO,UAAU,KAAK,EAAG,QAAO,IAAI,MAAM,QAAQ,CAAC,CAAC;AACtE,SAAO,IAAI,MAAM,QAAQ,CAAC,CAAC;AAC7B;"}

package/dist/data/ai/SessionViewer.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from "react";
 import { createPortal } from "react-dom";
 import { cn } from "../../lib/utils.js";
@@ -8,9 +8,7 @@ import { DensityValueProvider } from "../../hooks/density-provider.js";
 import { normalizeSession, getSessionMetadata, summarizeSession } from "./SessionViewer.model.js";
 import { collapseWaitRuns, isSessionEventGroup } from "./SessionViewer.grouping.js";
 import { WaitGroupRow, SessionRow } from "./SessionViewer.rows.js";
-import { ContextMeter } from "../chat/ContextMeter.js";
-import { providerIcon } from "../chat/provider-icons.js";
-import { costTotal, tokenTotal } from "./session-cost.js";
+import { SessionMetadataBadges } from "./SessionViewer.header.js";
 import { collectSessionFilters, isEventVisible } from "./session-categories.js";
 import { SessionViewerMenu } from "./SessionViewerMenu.js";
 import { useSessionScroll } from "./use-session-scroll.js";
@@ -27,7 +25,9 @@ function SessionViewer({
   defaultExpanded = false,
   showThinking = true,
   showHeader = true,
+  showContextMeter = true,
   showMenu = true,
+  headerActions,
   menuContainer,
   defaultDensity,
   defaultTheme,
@@ -36,6 +36,7 @@ function SessionViewer({
   batchSize = 40,
   showRowMetadata = false,
   showRaw = false,
+  renderMessageBadge,
   pendingTools = [],
   onPendingToolDecision
 }) {
@@ -47,20 +48,35 @@ function SessionViewer({
   const displayItems = useMemo(() => collapseWaitRuns(allEvents), [allEvents]);
   const metadata = useMemo(() => getSessionMetadata(session), [session]);
   const pageDensity = useDensityValue();
-  const [densityOverride, setDensityOverride] = useState(defaultDensity);
+  const [densityOverride, setDensityOverride] = useState(
+    defaultDensity
+  );
   const [themeOverride, setThemeOverride] = useState(defaultTheme);
-  const [hiddenCategories, setHiddenCategories] = useState(
+  const [hiddenCategories, setHiddenCategories] = useState(() => /* @__PURE__ */ new Set());
+  const [hiddenTools, setHiddenTools] = useState(
+    () => /* @__PURE__ */ new Set()
+  );
+  const [hiddenSources, setHiddenSources] = useState(
     () => /* @__PURE__ */ new Set()
   );
-  const [hiddenTools, setHiddenTools] = useState(() => /* @__PURE__ */ new Set());
-  const [hiddenSources, setHiddenSources] = useState(() => /* @__PURE__ */ new Set());
   const [showThinkingOverride, setShowThinkingOverride] = useState(void 0);
   const effectiveShowThinking = showThinkingOverride ?? showThinking;
   const filters = useMemo(() => collectSessionFilters(allEvents), [allEvents]);
-  const hasThinking = useMemo(() => allEvents.some((e) => e.kind === "thinking"), [allEvents]);
-  const visibility = { hiddenCategories, hiddenTools, hiddenSources, showThinking: effectiveShowThinking };
+  const hasThinking = useMemo(
+    () => allEvents.some((e) => e.kind === "thinking"),
+    [allEvents]
+  );
+  const visibility = {
+    hiddenCategories,
+    hiddenTools,
+    hiddenSources,
+    showThinking: effectiveShowThinking
+  };
   const items = displayItems.filter(
-    (item) => isEventVisible(isSessionEventGroup(item) ? item.representative : item, visibility)
+    (item) => isEventVisible(
+      isSessionEventGroup(item) ? item.representative : item,
+      visibility
+    )
   );
   const resetKey = `${allEvents.length}:${((_a = allEvents[0]) == null ? void 0 : _a.id) ?? ""}`;
   const { scrollRef, contentRef, startIndex } = useSessionScroll({
@@ -121,6 +137,7 @@ function SessionViewer({
           defaultExpanded,
           showRowMetadata,
           showRaw,
+          renderMessageBadge,
           onPendingToolDecision
         },
         item.id
@@ -132,43 +149,72 @@ function SessionViewer({
           defaultExpanded,
           showRowMetadata,
           showRaw,
+          renderMessageBadge,
           onPendingToolDecision
         },
         item.id
       );
     }) })
   );
-  return /* @__PURE__ */ jsx("div", { className: cn("text-sm", scrollable && "flex h-full min-h-0 flex-col", className), ...dataAttrs, children: /* @__PURE__ */ jsxs(DensityValueProvider, { density: effectiveDensity, children: [
-    menu && menuContainer && createPortal(menu, menuContainer),
-    (showHeader || inlineMenu) && /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: cn(
-          "flex items-center justify-between gap-density-3",
-          scrollable ? "shrink-0 border-b border-border px-density-4 py-density-2 md:px-density-6" : "mb-density-3"
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "bg-background text-sm text-foreground data-[theme=dark]:bg-[var(--fs-bg-subtle)] [[data-theme=dark]_&]:bg-[var(--fs-bg-subtle)]",
+        scrollable && "flex h-full min-h-0 flex-col",
+        className
+      ),
+      ...dataAttrs,
+      children: /* @__PURE__ */ jsxs(DensityValueProvider, { density: effectiveDensity, children: [
+        menu && menuContainer && createPortal(menu, menuContainer),
+        (showHeader || headerActions || inlineMenu) && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex items-center justify-between gap-density-3",
+              scrollable ? "shrink-0 border-b border-border px-density-4 py-density-2 md:px-density-6" : "mb-density-3"
+            ),
+            children: [
+              showHeader && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-x-density-3 gap-y-1 text-xs text-muted-foreground", children: [
+                summary.model && /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 font-medium text-foreground", children: [
+                  /* @__PURE__ */ jsx(Icon, { icon: UiRobotAi, className: "size-3.5" }),
+                  summary.model
+                ] }),
+                /* @__PURE__ */ jsxs("span", { children: [
+                  summary.toolCount,
+                  " actions"
+                ] }),
+                /* @__PURE__ */ jsxs("span", { children: [
+                  summary.messageCount,
+                  " messages"
+                ] }),
+                metadata && /* @__PURE__ */ jsx(
+                  SessionMetadataBadges,
+                  {
+                    metadata,
+                    showContextMeter
+                  }
+                )
+              ] }),
+              (headerActions || inlineMenu) && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  role: "group",
+                  "aria-label": "Session viewer actions",
+                  className: "ml-auto flex min-w-0 shrink-0 items-center gap-density-2",
+                  children: [
+                    headerActions,
+                    inlineMenu && menu
+                  ]
+                }
+              )
+            ]
+          }
         ),
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-x-density-3 gap-y-1 text-xs text-muted-foreground", children: [
-            showHeader && summary.model && /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 font-medium text-foreground", children: [
-              /* @__PURE__ */ jsx(Icon, { icon: UiRobotAi, className: "size-3.5" }),
-              summary.model
-            ] }),
-            showHeader && /* @__PURE__ */ jsxs("span", { children: [
-              summary.toolCount,
-              " actions"
-            ] }),
-            showHeader && /* @__PURE__ */ jsxs("span", { children: [
-              summary.messageCount,
-              " messages"
-            ] }),
-            showHeader && metadata && /* @__PURE__ */ jsx(SessionMetadataBadges, { metadata })
-          ] }),
-          inlineMenu && menu
-        ]
-      }
-    ),
-    scrollable ? /* @__PURE__ */ jsx("div", { ref: scrollRef, className: "min-h-0 flex-1 overflow-y-auto", children: /* @__PURE__ */ jsx("div", { ref: contentRef, className: "p-density-4 md:p-density-6", children: list }) }) : list
-  ] }) });
+        scrollable ? /* @__PURE__ */ jsx("div", { ref: scrollRef, className: "min-h-0 flex-1 overflow-y-auto", children: /* @__PURE__ */ jsx("div", { ref: contentRef, className: "p-density-4 md:p-density-6", children: list }) }) : list
+      ] })
+    }
+  );
 }
 function mergePendingTools(events, pendingTools) {
   const merged = [...events];
@@ -200,87 +246,6 @@ function mergePendingTools(events, pendingTools) {
   }
   return merged;
 }
-function SessionMetadataBadges({ metadata }) {
-  var _a, _b, _c, _d, _e, _f;
-  const capabilityBadges = [
-    countBadge("tool", (_a = metadata.capabilities) == null ? void 0 : _a.tools),
-    countBadge("mcp", (_b = metadata.capabilities) == null ? void 0 : _b.pendingMcpServers),
-    countBadge("agent", (_c = metadata.capabilities) == null ? void 0 : _c.agents),
-    countBadge("skill", (_d = metadata.capabilities) == null ? void 0 : _d.skills)
-  ].filter(Boolean);
-  const badges = [
-    ...((_e = metadata.turns) == null ? void 0 : _e.length) ? [{ key: "turns", label: countLabel(metadata.turns.length, "turn") }] : [],
-    ...capabilityBadges,
-    ...!metadata.context && metadata.budget ? [{ key: "budget", label: budgetLabel(metadata.budget) }] : [],
-    ...((_f = metadata.events) == null ? void 0 : _f.length) ? [{ key: "events", label: countLabel(metadata.events.length, "event") }] : []
-  ];
-  const modelIcon = metadata.provider ? providerIcon(metadata.provider) : void 0;
-  if (badges.length === 0 && !metadata.context) return null;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    badges.map((badge) => /* @__PURE__ */ jsx(
-      "span",
-      {
-        title: badge.title,
-        className: "inline-flex max-w-40 items-center rounded border border-border px-1.5 py-0.5 text-[11px] text-muted-foreground",
-        children: /* @__PURE__ */ jsx("span", { className: "truncate", children: badge.label })
-      },
-      badge.key
-    )),
-    metadata.context && /* @__PURE__ */ jsx(
-      ContextMeter,
-      {
-        mode: "bar",
-        usedPercent: 100 - metadata.context.freePercent,
-        usedTokens: metadata.context.usedTokens,
-        windowTokens: metadata.context.windowTokens,
-        model: metadata.model,
-        ...modelIcon ? { modelIcon } : {},
-        ...metadata.usage ? {
-          tokens: {
-            input: metadata.usage.inputTokens,
-            output: metadata.usage.outputTokens,
-            reasoning: metadata.usage.reasoningTokens,
-            cacheRead: metadata.usage.cacheReadTokens,
-            cacheWrite: metadata.usage.cacheWriteTokens,
-            total: tokenTotal(metadata.usage)
-          }
-        } : {},
-        ...metadata.cost ? {
-          cost: {
-            input: metadata.cost.inputCost,
-            output: metadata.cost.outputCost,
-            reasoning: metadata.cost.reasoningCost,
-            cacheRead: metadata.cost.cacheReadCost,
-            cacheWrite: metadata.cost.cacheWriteCost,
-            total: costTotal(metadata.cost)
-          }
-        } : {},
-        ...metadata.budget ? { budget: metadata.budget } : {}
-      }
-    )
-  ] });
-}
-function countBadge(label, values) {
-  const count = (values == null ? void 0 : values.length) ?? 0;
-  if (!count) return null;
-  return { key: label, label: countLabel(count, label), title: values == null ? void 0 : values.join(", ") };
-}
-function countLabel(count, label) {
-  if (label === "mcp") return `${count} mcp`;
-  return `${count} ${label}${count === 1 ? "" : "s"}`;
-}
-function budgetLabel(budget) {
-  if (budget.total !== void 0 && budget.total > 0) {
-    return `budget ${formatUSD(budget.used ?? 0)}/${formatUSD(budget.total)}`;
-  }
-  if (budget.remaining !== void 0) return `budget ${formatUSD(budget.remaining)} left`;
-  if (budget.used !== void 0) return `budget ${formatUSD(budget.used)} used`;
-  return "budget";
-}
-function formatUSD(value) {
-  if (value < 1 || !Number.isInteger(value)) return `$${value.toFixed(2)}`;
-  return `$${value.toFixed(0)}`;
-}
 export {
   SessionViewer
 };