@flanksource/clicky-ui 0.3.16 → 0.3.17

package/dist/data/ai/RuntimeBarCombo.js

@@ -0,0 +1,359 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "../../components/button.js";
+import { SegmentedControl } from "../../components/SegmentedControl.js";
+import { cn } from "../../lib/utils.js";
+import { DropdownMenu } from "../../overlay/DropdownMenu.js";
+import { Icon } from "../Icon.js";
+import { effortLevelLabel, effortLevelIcon, effortLevelColor } from "../chat/effort-icons.js";
+import { providerIcon, providerIconColor } from "../chat/provider-icons.js";
+import { runtimeFamilyBrand } from "./RuntimeBar.model.js";
+import { runtimeModeOptions, unsupportedModeTitle } from "./runtime-mode.js";
+import { UiChevronDown } from "../../icons/components/UiChevronDown.js";
+import { UiCheck } from "../../icons/components/UiCheck.js";
+function RuntimeBarCombo({
+  value,
+  families,
+  family,
+  mode,
+  selectedMode,
+  models,
+  selectedModel,
+  supportedEfforts,
+  ariaLabel,
+  className,
+  onFamilyChange,
+  onModeChange,
+  onModelSelect,
+  onModelClear,
+  onEffortChange
+}) {
+  const brand = runtimeFamilyBrand(family);
+  const modelLabel = (selectedModel == null ? void 0 : selectedModel.label) ?? value.model ?? "Prompt default";
+  const effortLabel = value.effort ? effortLevelLabel(value.effort) : "None";
+  const effortIcon = value.effort ? effortLevelIcon(value.effort) : void 0;
+  const summary = `${ariaLabel}: ${family.label}, ${mode.label}, ${modelLabel}, effort ${effortLabel}`;
+  return /* @__PURE__ */ jsx(
+    DropdownMenu,
+    {
+      align: "left",
+      menuLabel: `${ariaLabel} controls`,
+      ...className ? { className } : {},
+      menuClassName: "max-h-[70vh] w-80 max-w-[calc(100vw-24px)] overflow-y-auto",
+      trigger: /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          size: "sm",
+          title: summary,
+          "aria-label": summary,
+          className: "max-w-full gap-1.5 px-density-2",
+          children: [
+            brand.icon && /* @__PURE__ */ jsx(
+              Icon,
+              {
+                icon: brand.icon,
+                className: cn("size-4 shrink-0", brand.color)
+              }
+            ),
+            mode.icon && /* @__PURE__ */ jsx(
+              Icon,
+              {
+                icon: mode.icon,
+                className: "size-4 shrink-0 text-muted-foreground"
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate text-xs font-semibold text-foreground", children: modelLabel }),
+            effortIcon && /* @__PURE__ */ jsx(
+              Icon,
+              {
+                icon: effortIcon,
+                className: cn(
+                  "size-4 shrink-0",
+                  value.effort ? effortLevelColor(value.effort) : void 0
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Icon,
+              {
+                icon: UiChevronDown,
+                className: "size-3 shrink-0 text-muted-foreground/70"
+              }
+            )
+          ]
+        }
+      ),
+      children: () => /* @__PURE__ */ jsxs("div", { className: "p-1 text-xs", children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2 border-b border-border px-2 pb-3 pt-2", children: [
+          /* @__PURE__ */ jsx(
+            FamilySegments,
+            {
+              families,
+              value: family.id,
+              onChange: onFamilyChange
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ModeSegments,
+            {
+              families,
+              family,
+              value: selectedMode,
+              onChange: onModeChange
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            EffortSlider,
+            {
+              value: value.effort,
+              efforts: supportedEfforts,
+              onChange: onEffortChange
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          ModelChoices,
+          {
+            models,
+            familyBrand: brand,
+            selectedId: (selectedModel == null ? void 0 : selectedModel.id) ?? value.model,
+            onSelect: onModelSelect,
+            onClear: onModelClear
+          }
+        )
+      ] })
+    }
+  );
+}
+function FamilySegments({
+  families,
+  value,
+  onChange
+}) {
+  return /* @__PURE__ */ jsx(
+    SegmentedControl,
+    {
+      "aria-label": "Family",
+      size: "sm",
+      wrap: true,
+      value,
+      onChange,
+      className: "w-full",
+      options: families.map((family) => {
+        const brand = runtimeFamilyBrand(family);
+        return {
+          id: family.id,
+          label: family.label,
+          ...brand.icon ? { icon: brand.icon } : {}
+        };
+      })
+    }
+  );
+}
+function ModeSegments({
+  families,
+  family,
+  value,
+  onChange
+}) {
+  return /* @__PURE__ */ jsx(
+    SegmentedControl,
+    {
+      "aria-label": "Runtime mode",
+      size: "sm",
+      value,
+      onChange,
+      className: "w-full",
+      options: runtimeModeOptions(families).map((mode) => {
+        const supported = family.modes.find((entry) => entry.id === mode.id);
+        return {
+          id: mode.id,
+          label: (supported == null ? void 0 : supported.label) ?? mode.label,
+          title: (supported == null ? void 0 : supported.title) ?? unsupportedModeTitle(family),
+          disabled: !supported,
+          ...mode.icon ? { icon: mode.icon } : {}
+        };
+      })
+    }
+  );
+}
+function ModelChoices({
+  models,
+  familyBrand,
+  selectedId,
+  onSelect,
+  onClear
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-0.5 py-1", children: [
+    /* @__PURE__ */ jsx(
+      ModelChoice,
+      {
+        label: "Prompt default",
+        selected: !selectedId,
+        onClick: onClear
+      }
+    ),
+    models.map((model) => {
+      const icon = providerIcon(model.provider) ?? familyBrand.icon;
+      return /* @__PURE__ */ jsx(
+        ModelChoice,
+        {
+          label: model.label,
+          title: model.id,
+          selected: model.id === selectedId,
+          disabled: model.configured === false,
+          ...icon ? {
+            icon,
+            iconColor: providerIconColor(model.provider) ?? familyBrand.color
+          } : {},
+          onClick: () => onSelect(model)
+        },
+        model.id
+      );
+    })
+  ] });
+}
+function ModelChoice({
+  label,
+  title,
+  selected,
+  disabled = false,
+  icon,
+  iconColor,
+  onClick
+}) {
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      variant: "ghost",
+      type: "button",
+      disabled,
+      onClick,
+      "aria-label": label,
+      ...title ? { title } : {},
+      className: "group flex h-8 w-full items-center justify-start gap-2 rounded-md px-2 text-left hover:bg-muted",
+      children: [
+        icon ? /* @__PURE__ */ jsx("span", { className: "inline-flex size-6 shrink-0 items-center justify-center rounded-md bg-muted/70 ring-1 ring-border/60 group-hover:bg-background", children: /* @__PURE__ */ jsx(Icon, { icon, className: cn("size-3.5", iconColor) }) }) : /* @__PURE__ */ jsx("span", { className: "size-6 shrink-0" }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "min-w-0 flex-1 truncate text-sm",
+              selected && "font-semibold"
+            ),
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Icon,
+          {
+            icon: UiCheck,
+            className: cn(
+              "size-3.5 shrink-0 text-primary",
+              !selected && "invisible"
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function EffortSlider({
+  value,
+  efforts,
+  onChange
+}) {
+  const supported = [
+    ...new Set(efforts.map((effort) => effort.trim()).filter(Boolean))
+  ];
+  if (supported.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: "flex h-8 items-center justify-center text-[11px] text-muted-foreground", children: "Fixed effort for this model" });
+  }
+  const options = ["", ...supported];
+  const current = (value == null ? void 0 : value.trim()) ?? "";
+  const currentIndex = options.indexOf(current);
+  const sliderIndex = currentIndex >= 0 ? currentIndex : 0;
+  const label = currentIndex >= 0 ? current ? effortLevelLabel(current) : "None" : `${effortLevelLabel(current)} unsupported`;
+  const percent = sliderIndex / (options.length - 1) * 100;
+  const firstIcon = effortLevelIcon(supported[0]);
+  const lastIcon = effortLevelIcon(supported[supported.length - 1]);
+  const selectedIcon = current ? effortLevelIcon(current) : void 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "grid grid-cols-[auto_minmax(0,1fr)_auto] items-start gap-1.5",
+      "aria-label": "Model effort",
+      children: [
+        firstIcon ? /* @__PURE__ */ jsx(
+          Icon,
+          {
+            icon: firstIcon,
+            className: cn("mt-3 size-3.5", effortLevelColor(supported[0]))
+          }
+        ) : /* @__PURE__ */ jsx("span", { className: "size-3.5" }),
+        /* @__PURE__ */ jsxs("div", { className: "relative h-11 pt-1", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "range",
+              min: 0,
+              max: options.length - 1,
+              step: 1,
+              value: sliderIndex,
+              "aria-label": "Reasoning effort",
+              "aria-valuetext": label,
+              "aria-invalid": currentIndex < 0,
+              onChange: (event) => {
+                const next = options[Number(event.target.value)];
+                if (next === void 0) {
+                  throw new Error(
+                    `Invalid reasoning effort index: ${event.target.value}`
+                  );
+                }
+                onChange(next);
+              },
+              className: "h-1 w-full cursor-pointer appearance-none rounded-full bg-muted accent-foreground [&::-moz-range-thumb]:size-3 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-background [&::-moz-range-thumb]:bg-foreground [&::-webkit-slider-thumb]:size-3 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-background [&::-webkit-slider-thumb]:bg-foreground [&::-webkit-slider-thumb]:shadow-sm"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "pointer-events-none absolute top-7 -translate-x-1/2",
+              style: { left: `${percent}%` },
+              children: /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  className: cn(
+                    "inline-flex h-5 shrink-0 items-center gap-1 rounded-full border px-1.5 text-[10px] font-semibold leading-none",
+                    currentIndex < 0 ? "border-destructive/25 bg-destructive/10 text-destructive" : current ? cn("border-current/25 bg-muted", effortLevelColor(current)) : "border-border bg-muted text-muted-foreground"
+                  ),
+                  title: `Effort: ${label}`,
+                  children: [
+                    selectedIcon && /* @__PURE__ */ jsx(Icon, { icon: selectedIcon, className: "size-3" }),
+                    label
+                  ]
+                }
+              )
+            }
+          )
+        ] }),
+        lastIcon ? /* @__PURE__ */ jsx(
+          Icon,
+          {
+            icon: lastIcon,
+            className: cn(
+              "mt-3 size-3.5",
+              effortLevelColor(supported[supported.length - 1])
+            )
+          }
+        ) : /* @__PURE__ */ jsx("span", { className: "size-3.5" })
+      ]
+    }
+  );
+}
+export {
+  RuntimeBarCombo
+};
+//# sourceMappingURL=RuntimeBarCombo.js.map

package/dist/data/ai/RuntimeBarCombo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuntimeBarCombo.js","sources":["../../../src/data/ai/RuntimeBarCombo.tsx"],"sourcesContent":["import { Button } from \"../../components/button\";\nimport { SegmentedControl } from \"../../components/SegmentedControl\";\nimport { UiCheck, UiChevronDown } from \"../../icons\";\nimport { cn } from \"../../lib/utils\";\nimport { DropdownMenu } from \"../../overlay/DropdownMenu\";\nimport { Icon } from \"../Icon\";\nimport {\n  effortLevelColor,\n  effortLevelIcon,\n  effortLevelLabel,\n} from \"../chat/effort-icons\";\nimport { providerIcon, providerIconColor } from \"../chat/provider-icons\";\nimport type { ChatModel } from \"../chat/types\";\nimport type { AISpecRuntimeValue } from \"./SpecRuntimeEditor.model\";\nimport { runtimeFamilyBrand } from \"./RuntimeBar.model\";\nimport {\n  runtimeModeOptions,\n  unsupportedModeTitle,\n  type SpecRuntimeFamily,\n  type SpecRuntimeModeOption,\n} from \"./runtime-mode\";\n\nexport type RuntimeBarComboProps = {\n  value: AISpecRuntimeValue;\n  families: SpecRuntimeFamily[];\n  family: SpecRuntimeFamily;\n  mode: SpecRuntimeModeOption;\n  selectedMode: string;\n  models: ChatModel[];\n  selectedModel: ChatModel | undefined;\n  supportedEfforts: string[];\n  ariaLabel: string;\n  className?: string | undefined;\n  onFamilyChange: (familyId: string) => void;\n  onModeChange: (modeId: string) => void;\n  onModelSelect: (model: ChatModel) => void;\n  onModelClear: () => void;\n  onEffortChange: (effort: string) => void;\n};\n\nexport function RuntimeBarCombo({\n  value,\n  families,\n  family,\n  mode,\n  selectedMode,\n  models,\n  selectedModel,\n  supportedEfforts,\n  ariaLabel,\n  className,\n  onFamilyChange,\n  onModeChange,\n  onModelSelect,\n  onModelClear,\n  onEffortChange,\n}: RuntimeBarComboProps) {\n  const brand = runtimeFamilyBrand(family);\n  const modelLabel = selectedModel?.label ?? value.model ?? \"Prompt default\";\n  const effortLabel = value.effort ? effortLevelLabel(value.effort) : \"None\";\n  const effortIcon = value.effort ? effortLevelIcon(value.effort) : undefined;\n  const summary = `${ariaLabel}: ${family.label}, ${mode.label}, ${modelLabel}, effort ${effortLabel}`;\n\n  return (\n    <DropdownMenu\n      align=\"left\"\n      menuLabel={`${ariaLabel} controls`}\n      {...(className ? { className } : {})}\n      menuClassName=\"max-h-[70vh] w-80 max-w-[calc(100vw-24px)] overflow-y-auto\"\n      trigger={\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          size=\"sm\"\n          title={summary}\n          aria-label={summary}\n          className=\"max-w-full gap-1.5 px-density-2\"\n        >\n          {brand.icon && (\n            <Icon\n              icon={brand.icon}\n              className={cn(\"size-4 shrink-0\", brand.color)}\n            />\n          )}\n          {mode.icon && (\n            <Icon\n              icon={mode.icon}\n              className=\"size-4 shrink-0 text-muted-foreground\"\n            />\n          )}\n          <span className=\"min-w-0 truncate text-xs font-semibold text-foreground\">\n            {modelLabel}\n          </span>\n          {effortIcon && (\n            <Icon\n              icon={effortIcon}\n              className={cn(\n                \"size-4 shrink-0\",\n                value.effort ? effortLevelColor(value.effort) : undefined,\n              )}\n            />\n          )}\n          <Icon\n            icon={UiChevronDown}\n            className=\"size-3 shrink-0 text-muted-foreground/70\"\n          />\n        </Button>\n      }\n    >\n      {() => (\n        <div className=\"p-1 text-xs\">\n          <div className=\"space-y-2 border-b border-border px-2 pb-3 pt-2\">\n            <FamilySegments\n              families={families}\n              value={family.id}\n              onChange={onFamilyChange}\n            />\n            <ModeSegments\n              families={families}\n              family={family}\n              value={selectedMode}\n              onChange={onModeChange}\n            />\n            <EffortSlider\n              value={value.effort}\n              efforts={supportedEfforts}\n              onChange={onEffortChange}\n            />\n          </div>\n          <ModelChoices\n            models={models}\n            familyBrand={brand}\n            selectedId={selectedModel?.id ?? value.model}\n            onSelect={onModelSelect}\n            onClear={onModelClear}\n          />\n        </div>\n      )}\n    </DropdownMenu>\n  );\n}\n\nfunction FamilySegments({\n  families,\n  value,\n  onChange,\n}: {\n  families: SpecRuntimeFamily[];\n  value: string;\n  onChange: (familyId: string) => void;\n}) {\n  return (\n    <SegmentedControl\n      aria-label=\"Family\"\n      size=\"sm\"\n      wrap\n      value={value}\n      onChange={onChange}\n      className=\"w-full\"\n      options={families.map((family) => {\n        const brand = runtimeFamilyBrand(family);\n        return {\n          id: family.id,\n          label: family.label,\n          ...(brand.icon ? { icon: brand.icon } : {}),\n        };\n      })}\n    />\n  );\n}\n\nfunction ModeSegments({\n  families,\n  family,\n  value,\n  onChange,\n}: {\n  families: SpecRuntimeFamily[];\n  family: SpecRuntimeFamily;\n  value: string;\n  onChange: (modeId: string) => void;\n}) {\n  return (\n    <SegmentedControl\n      aria-label=\"Runtime mode\"\n      size=\"sm\"\n      value={value}\n      onChange={onChange}\n      className=\"w-full\"\n      options={runtimeModeOptions(families).map((mode) => {\n        const supported = family.modes.find((entry) => entry.id === mode.id);\n        return {\n          id: mode.id,\n          label: supported?.label ?? mode.label,\n          title: supported?.title ?? unsupportedModeTitle(family),\n          disabled: !supported,\n          ...(mode.icon ? { icon: mode.icon } : {}),\n        };\n      })}\n    />\n  );\n}\n\nfunction ModelChoices({\n  models,\n  familyBrand,\n  selectedId,\n  onSelect,\n  onClear,\n}: {\n  models: ChatModel[];\n  familyBrand: ReturnType<typeof runtimeFamilyBrand>;\n  selectedId?: string | undefined;\n  onSelect: (model: ChatModel) => void;\n  onClear: () => void;\n}) {\n  return (\n    <div className=\"space-y-0.5 py-1\">\n      <ModelChoice\n        label=\"Prompt default\"\n        selected={!selectedId}\n        onClick={onClear}\n      />\n      {models.map((model) => {\n        const icon = providerIcon(model.provider) ?? familyBrand.icon;\n        return (\n          <ModelChoice\n            key={model.id}\n            label={model.label}\n            title={model.id}\n            selected={model.id === selectedId}\n            disabled={model.configured === false}\n            {...(icon\n              ? {\n                  icon,\n                  iconColor:\n                    providerIconColor(model.provider) ?? familyBrand.color,\n                }\n              : {})}\n            onClick={() => onSelect(model)}\n          />\n        );\n      })}\n    </div>\n  );\n}\n\nfunction ModelChoice({\n  label,\n  title,\n  selected,\n  disabled = false,\n  icon,\n  iconColor,\n  onClick,\n}: {\n  label: string;\n  title?: string | undefined;\n  selected: boolean;\n  disabled?: boolean | undefined;\n  icon?: NonNullable<ReturnType<typeof providerIcon>>;\n  iconColor?: string | undefined;\n  onClick: () => void;\n}) {\n  return (\n    <Button\n      variant=\"ghost\"\n      type=\"button\"\n      disabled={disabled}\n      onClick={onClick}\n      aria-label={label}\n      {...(title ? { title } : {})}\n      className=\"group flex h-8 w-full items-center justify-start gap-2 rounded-md px-2 text-left hover:bg-muted\"\n    >\n      {icon ? (\n        <span className=\"inline-flex size-6 shrink-0 items-center justify-center rounded-md bg-muted/70 ring-1 ring-border/60 group-hover:bg-background\">\n          <Icon icon={icon} className={cn(\"size-3.5\", iconColor)} />\n        </span>\n      ) : (\n        <span className=\"size-6 shrink-0\" />\n      )}\n      <span\n        className={cn(\n          \"min-w-0 flex-1 truncate text-sm\",\n          selected && \"font-semibold\",\n        )}\n      >\n        {label}\n      </span>\n      <Icon\n        icon={UiCheck}\n        className={cn(\n          \"size-3.5 shrink-0 text-primary\",\n          !selected && \"invisible\",\n        )}\n      />\n    </Button>\n  );\n}\n\nfunction EffortSlider({\n  value,\n  efforts,\n  onChange,\n}: {\n  value?: string | undefined;\n  efforts: string[];\n  onChange: (effort: string) => void;\n}) {\n  const supported = [\n    ...new Set(efforts.map((effort) => effort.trim()).filter(Boolean)),\n  ];\n  if (supported.length === 0) {\n    return (\n      <div className=\"flex h-8 items-center justify-center text-[11px] text-muted-foreground\">\n        Fixed effort for this model\n      </div>\n    );\n  }\n\n  const options = [\"\", ...supported];\n  const current = value?.trim() ?? \"\";\n  const currentIndex = options.indexOf(current);\n  const sliderIndex = currentIndex >= 0 ? currentIndex : 0;\n  const label =\n    currentIndex >= 0\n      ? current\n        ? effortLevelLabel(current)\n        : \"None\"\n      : `${effortLevelLabel(current)} unsupported`;\n  const percent = (sliderIndex / (options.length - 1)) * 100;\n  const firstIcon = effortLevelIcon(supported[0]!);\n  const lastIcon = effortLevelIcon(supported[supported.length - 1]!);\n  const selectedIcon = current ? effortLevelIcon(current) : undefined;\n\n  return (\n    <div\n      className=\"grid grid-cols-[auto_minmax(0,1fr)_auto] items-start gap-1.5\"\n      aria-label=\"Model effort\"\n    >\n      {firstIcon ? (\n        <Icon\n          icon={firstIcon}\n          className={cn(\"mt-3 size-3.5\", effortLevelColor(supported[0]!))}\n        />\n      ) : (\n        <span className=\"size-3.5\" />\n      )}\n      <div className=\"relative h-11 pt-1\">\n        <input\n          type=\"range\"\n          min={0}\n          max={options.length - 1}\n          step={1}\n          value={sliderIndex}\n          aria-label=\"Reasoning effort\"\n          aria-valuetext={label}\n          aria-invalid={currentIndex < 0}\n          onChange={(event) => {\n            const next = options[Number(event.target.value)];\n            if (next === undefined) {\n              throw new Error(\n                `Invalid reasoning effort index: ${event.target.value}`,\n              );\n            }\n            onChange(next);\n          }}\n          className=\"h-1 w-full cursor-pointer appearance-none rounded-full bg-muted accent-foreground [&::-moz-range-thumb]:size-3 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-background [&::-moz-range-thumb]:bg-foreground [&::-webkit-slider-thumb]:size-3 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-background [&::-webkit-slider-thumb]:bg-foreground [&::-webkit-slider-thumb]:shadow-sm\"\n        />\n        <span\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute top-7 -translate-x-1/2\"\n          style={{ left: `${percent}%` }}\n        >\n          <span\n            className={cn(\n              \"inline-flex h-5 shrink-0 items-center gap-1 rounded-full border px-1.5 text-[10px] font-semibold leading-none\",\n              currentIndex < 0\n                ? \"border-destructive/25 bg-destructive/10 text-destructive\"\n                : current\n                  ? cn(\"border-current/25 bg-muted\", effortLevelColor(current))\n                  : \"border-border bg-muted text-muted-foreground\",\n            )}\n            title={`Effort: ${label}`}\n          >\n            {selectedIcon && <Icon icon={selectedIcon} className=\"size-3\" />}\n            {label}\n          </span>\n        </span>\n      </div>\n      {lastIcon ? (\n        <Icon\n          icon={lastIcon}\n          className={cn(\n            \"mt-3 size-3.5\",\n            effortLevelColor(supported[supported.length - 1]!),\n          )}\n        />\n      ) : (\n        <span className=\"size-3.5\" />\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

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

@@ -4,21 +4,29 @@ 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 (!metadata.context) return null;
+  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: 100 - metadata.context.freePercent,
-      usedTokens: metadata.context.usedTokens,
-      windowTokens: metadata.context.windowTokens,
-      model: metadata.model,
-      effort: metadata.reasoningEffort,
+      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)
@@ -64,8 +72,8 @@ function SessionMetadataBadges({
     ...!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") }] : []
   ];
-  if (badges.length === 0 && (!showContextMeter || !metadata.context))
-    return null;
+  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",
@@ -76,7 +84,7 @@ function SessionMetadataBadges({
       },
       badge.key
     )),
-    showContextMeter ? /* @__PURE__ */ jsxRuntime.jsx(SessionContextMeter, { metadata, mode: "bar" }) : null
+    renderContextMeter ? /* @__PURE__ */ jsxRuntime.jsx(SessionContextMeter, { metadata, mode: "bar" }) : null
   ] });
 }
 function countBadge(label, values) {

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

@@ -1 +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\nexport function SessionContextMeter({\n  metadata,\n  mode,\n}: {\n  metadata: SessionMetadataSummary;\n  mode: ContextMeterMode;\n}) {\n  if (!metadata.context) return null;\n  const modelIcon = metadata.provider\n    ? providerIcon(metadata.provider)\n    : undefined;\n\n  return (\n    <ContextMeter\n      mode={mode}\n      usedPercent={100 - metadata.context.freePercent}\n      usedTokens={metadata.context.usedTokens}\n      windowTokens={metadata.context.windowTokens}\n      model={metadata.model}\n      effort={metadata.reasoningEffort}\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  if (badges.length === 0 && (!showContextMeter || !metadata.context))\n    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      {showContextMeter ? (\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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"}
+{"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.map

@@ -1 +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;AAEpE,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,IAAI,GACL,EAAE;IACD,QAAQ,EAAE,sBAAsB,CAAC;IACjC,IAAI,EAAE,gBAAgB,CAAC;CACxB,kDA+CA;AAED,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,gBAAgB,GACjB,EAAE;IACD,QAAQ,EAAE,sBAAsB,CAAC;IACjC,gBAAgB,EAAE,OAAO,CAAC;CAC3B,kDAsCA"}
+{"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

@@ -2,21 +2,29 @@ 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 (!metadata.context) return null;
+  if (!hasContextMeterMetadata(metadata)) return null;
+  const context = metadata.context;
   const modelIcon = metadata.provider ? providerIcon(metadata.provider) : void 0;
   return /* @__PURE__ */ jsx(
     ContextMeter,
     {
       mode,
-      usedPercent: 100 - metadata.context.freePercent,
-      usedTokens: metadata.context.usedTokens,
-      windowTokens: metadata.context.windowTokens,
-      model: metadata.model,
-      effort: metadata.reasoningEffort,
+      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)
@@ -62,8 +70,8 @@ function SessionMetadataBadges({
     ...!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") }] : []
   ];
-  if (badges.length === 0 && (!showContextMeter || !metadata.context))
-    return null;
+  const renderContextMeter = showContextMeter && hasContextMeterMetadata(metadata);
+  if (badges.length === 0 && !renderContextMeter) return null;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     badges.map((badge) => /* @__PURE__ */ jsx(
       "span",
@@ -74,7 +82,7 @@ function SessionMetadataBadges({
       },
       badge.key
     )),
-    showContextMeter ? /* @__PURE__ */ jsx(SessionContextMeter, { metadata, mode: "bar" }) : null
+    renderContextMeter ? /* @__PURE__ */ jsx(SessionContextMeter, { metadata, mode: "bar" }) : null
   ] });
 }
 function countBadge(label, values) {

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

@@ -1 +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\nexport function SessionContextMeter({\n  metadata,\n  mode,\n}: {\n  metadata: SessionMetadataSummary;\n  mode: ContextMeterMode;\n}) {\n  if (!metadata.context) return null;\n  const modelIcon = metadata.provider\n    ? providerIcon(metadata.provider)\n    : undefined;\n\n  return (\n    <ContextMeter\n      mode={mode}\n      usedPercent={100 - metadata.context.freePercent}\n      usedTokens={metadata.context.usedTokens}\n      windowTokens={metadata.context.windowTokens}\n      model={metadata.model}\n      effort={metadata.reasoningEffort}\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  if (badges.length === 0 && (!showContextMeter || !metadata.context))\n    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      {showContextMeter ? (\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":"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"}
+{"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":"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"}

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

@@ -166,6 +166,8 @@ function normalizeSession(input) {
 function getSessionMetadata(input) {
   if (!looksLikeUnifiedSession(input)) return void 0;
   const metadata = {
+    ...input.id ? { sessionId: input.id } : {},
+    ...input.executionMode ? { executionMode: input.executionMode } : {},
     ...input.turns ? { turns: input.turns } : {},
     ...input.capabilities ? { capabilities: input.capabilities } : {},
     ...input.budget ? { budget: input.budget } : {},