@zythum02/fello-server 0.1.51 → 0.1.52

package/out/renderer/assets/{session-DgU3TDDV.js → session-DAyi31xW.js}

@@ -1,38 +1,38 @@
-const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./code-editor-cp9haQUT.js","./index-Co8mzhyV.js","./index-iHYS74sQ.css","./mermaid-GHXKKRXX-DFOJYe_t.js","./code-editor-BwxubRqT.css"])))=>i.map(i=>d[i]);
-import { c as createLucideIcon, r as reactExports, aC as formatErrorMessage, bB as ReactStore, bC as popupStoreSelectors, bD as triggerHover, ap as triggerPress, bE as escapeKey, bF as attachPreventUnmountOnClose, bG as closePress, bH as PATIENT_CLICK_THRESHOLD, aw as reactDomExports, bI as focusOut, bJ as setPopupOpenState, bK as createInitialPopupStoreState, bL as createPopupFloatingRootContext, bM as Timeout, bN as PopupTriggerMap, j as jsxRuntimeExports, bO as FloatingTree, bP as usePopupRootSync, bQ as useImplicitActiveTrigger, bR as useOpenStateTransitions, an as createChangeEventDetails, bS as imperativeAction, bT as PopupHandleAttachment, bU as usePopupRootStore, bV as useDismiss, bW as usePopupInteractionProps, bX as usePopupHandleStore, aA as useBaseUiId, bY as useTriggerDataForwarding, bZ as useHoverReferenceInteraction, b_ as safePolygon, b$ as useClick, c0 as useOpenMethodTriggerProps, aF as useButton, c1 as useTriggerFocusGuards, ah as useRenderElement, c2 as CLICK_TRIGGER_IDENTIFIER, c3 as FocusGuard, ak as pressableTriggerOpenStateMapping, c4 as triggerOpenStateMapping, c5 as FloatingPortal, c6 as POPUP_COLLISION_AVOIDANCE, c7 as useFloatingNodeId, aI as useAnimationsFinished, c8 as useAnchorPositioning, aJ as useIsoLayoutEffect, c9 as useAnchoredPopupScrollLock, ca as usePositioner, cb as InternalBackdrop, cc as inertValue, cd as FloatingNode, aB as useStableCallback, ce as useToolbarRootContext, aK as useOpenChangeComplete, cf as useHoverFloatingInteraction, cg as createDefaultInitialFocus, ch as FOCUSABLE_POPUP_PROPS, bl as COMPOSITE_KEYS, ci as getDisabledMountTransitionStyles, cj as FloatingFocusManager, ck as isHTMLElement, cl as popupTransitionStateMapping, u as useTranslation, b as useMessage, Q as useNavigate, a as useAppStore, V as Badge, cm as formatUpdatedTime, f as request, K as electron, a6 as ALL_FEATURES, a7 as FEATURE_I18N_KEYS, F as cn$1, d as Switch, B as Button, H as LoaderCircle, i as isWebUI, J as FolderOpen, C as Check, e as Copy, g as extractErrorMessage, aU as reduceFlushStreaming, aT as reduceSessionNotification, h as copyText, av as React, cn as Tooltip, co as TooltipTrigger, cp as TooltipContent, S as ScrollArea, a0 as Bot, cq as formatDuration, ax as getDefaultExportFromCjs, cr as ReactDOM, cs as v$2, A as generateUUID, ct as HoverCard, cu as HoverCardTrigger, cv as HoverCardContent, cw as X$1, aW as Folder, L as Library, v as DropdownMenu, w as DropdownMenuTrigger, cx as ChevronDown, x as DropdownMenuContent, y as DropdownMenuItem, cy as DropdownMenuSub, cz as DropdownMenuSubTrigger, cA as DropdownMenuSubContent, cB as CircleQuestionMark, cC as ChevronUp, aV as Clock, aP as Tabs, aQ as TabsList, aR as TabsTrigger, cD as z$1, X as CircleCheck, cE as __vitePreload, I as Input, cF as Code, bv as EDITOR_LABELS, aS as webUIBaseUrl, R as subscribe, cG as FolderPlus, a5 as ChevronRight, P as Pencil, T as Trash2, cH as useProjectState, cI as clientId, cJ as TabsContent } from "./index-Co8mzhyV.js";
-import { S as Settings2 } from "./settings-2-CI8inOtS.js";
-import { i as isValidMessageToDisplay, M as MessageBubble, A as ArrowUpToLine, S as Square, j as jsonToPrettyYamlExports, p as parseFileReference, c as CodeCompareView, r as resolveFileUrl, I as ImageView, P as PdfView, D as DocxView, a as PptxView, X as XlsxView, R as RotateCcw, F as Folders } from "./xlsx-view-DIarHecR.js";
-import { I as Image, W as Wrench } from "./wrench-Dj1S5dhM.js";
-import { F as FileText } from "./file-text-CMw1QH-C.js";
-import { C as Clipboard } from "./clipboard-D6ZpW5GH.js";
-import { A as ArrowLeft } from "./arrow-left-BwbOF_G_.js";
-import { aQ as CodeView, S as StreamMarkdown, aR as FileIcon } from "./mermaid-GHXKKRXX-DFOJYe_t.js";
-import { b as ContextMenuContent, c as ContextMenuItem, d as ContextMenuSeparator, C as ContextMenu, a as ContextMenuTrigger } from "./context-menu-K6z5uSmg.js";
-import { S as Search } from "./search-DdqhQVGJ.js";
-import { E as ExternalLink } from "./link-2-4A51Gs15.js";
-import { R as RefreshCw } from "./refresh-cw-DGB7KSZ3.js";
-import { P as Plus } from "./plus-DOVKq0d7.js";
-import { R as ResizablePanelGroup, a as ResizablePanel, b as ResizableHandle } from "./resizable-C5jomC3Y.js";
-import "./collapsible-BHMUDZxc.js";
-import "./item-CvcokSWl.js";
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./code-editor-SuOcN-5B.js","./index-BJPggXxf.js","./index-DGML4zYf.css","./mermaid-GHXKKRXX-KwA2c0l5.js","./code-editor-BwxubRqT.css"])))=>i.map(i=>d[i]);
+import { c as createLucideIcon, r as reactExports, aC as formatErrorMessage, bB as ReactStore, bC as popupStoreSelectors, bD as triggerHover, ap as triggerPress, bE as escapeKey, bF as attachPreventUnmountOnClose, bG as closePress, bH as PATIENT_CLICK_THRESHOLD, aw as reactDomExports, bI as focusOut, bJ as setPopupOpenState, bK as createInitialPopupStoreState, bL as createPopupFloatingRootContext, bM as Timeout, bN as PopupTriggerMap, j as jsxRuntimeExports, bO as FloatingTree, bP as usePopupRootSync, bQ as useImplicitActiveTrigger, bR as useOpenStateTransitions, an as createChangeEventDetails, bS as imperativeAction, bT as PopupHandleAttachment, bU as usePopupRootStore, bV as useDismiss, bW as usePopupInteractionProps, bX as usePopupHandleStore, aA as useBaseUiId, bY as useTriggerDataForwarding, bZ as useHoverReferenceInteraction, b_ as safePolygon, b$ as useClick, c0 as useOpenMethodTriggerProps, aF as useButton, c1 as useTriggerFocusGuards, ah as useRenderElement, c2 as CLICK_TRIGGER_IDENTIFIER, c3 as FocusGuard, ak as pressableTriggerOpenStateMapping, c4 as triggerOpenStateMapping, c5 as FloatingPortal, c6 as POPUP_COLLISION_AVOIDANCE, c7 as useFloatingNodeId, aI as useAnimationsFinished, c8 as useAnchorPositioning, aJ as useIsoLayoutEffect, c9 as useAnchoredPopupScrollLock, ca as usePositioner, cb as InternalBackdrop, cc as inertValue, cd as FloatingNode, aB as useStableCallback, ce as useToolbarRootContext, aK as useOpenChangeComplete, cf as useHoverFloatingInteraction, cg as createDefaultInitialFocus, ch as FOCUSABLE_POPUP_PROPS, bl as COMPOSITE_KEYS, ci as getDisabledMountTransitionStyles, cj as FloatingFocusManager, ck as isHTMLElement, cl as popupTransitionStateMapping, u as useTranslation, b as useMessage, Q as useNavigate, a as useAppStore, V as Badge, cm as formatUpdatedTime, f as request, K as electron, a6 as ALL_FEATURES, a7 as FEATURE_I18N_KEYS, F as cn$1, d as Switch, B as Button, H as LoaderCircle, cn as buttonVariants, i as isWebUI, J as FolderOpen, C as Check, e as Copy, g as extractErrorMessage, aU as reduceFlushStreaming, aT as reduceSessionNotification, h as copyText, av as React, co as Tooltip, cp as TooltipTrigger, cq as TooltipContent, S as ScrollArea, a0 as Bot, cr as formatDuration, ax as getDefaultExportFromCjs, cs as ReactDOM, ct as v$2, A as generateUUID, cu as HoverCard, cv as HoverCardTrigger, cw as HoverCardContent, cx as X$1, aW as Folder, L as Library, v as DropdownMenu, w as DropdownMenuTrigger, cy as ChevronDown, x as DropdownMenuContent, y as DropdownMenuItem, cz as DropdownMenuSub, cA as DropdownMenuSubTrigger, cB as DropdownMenuSubContent, cC as CircleQuestionMark, cD as ChevronUp, aV as Clock, aP as Tabs, aQ as TabsList, aR as TabsTrigger, cE as z$1, X as CircleCheck, cF as __vitePreload, I as Input, cG as Code, bv as EDITOR_LABELS, aS as webUIBaseUrl, R as subscribe, a5 as ChevronRight, cH as MessageSquare, cI as FolderPlus, P as Pencil, T as Trash2, cJ as useProjectState, cK as clientId, cL as TabsContent } from "./index-BJPggXxf.js";
+import { S as Settings2 } from "./settings-2-DTnwbGMG.js";
+import { i as isValidMessageToDisplay, M as MessageBubble, A as ArrowUpToLine, S as Square, j as jsonToPrettyYamlExports, p as parseFileReference, c as CodeCompareView, r as resolveFileUrl, I as ImageView, P as PdfView, D as DocxView, a as PptxView, X as XlsxView, R as RotateCcw, F as Folders } from "./xlsx-view-Ca3bToM7.js";
+import { I as Image, W as Wrench } from "./wrench-C-pOIUrz.js";
+import { F as FileText } from "./file-text-CshHuHgW.js";
+import { C as Clipboard } from "./clipboard-xI9lExaB.js";
+import { A as ArrowLeft } from "./arrow-left-D589pHHA.js";
+import { aQ as CodeView, S as StreamMarkdown, aR as FileIcon } from "./mermaid-GHXKKRXX-KwA2c0l5.js";
+import { b as ContextMenuContent, c as ContextMenuItem, d as ContextMenuSeparator, C as ContextMenu, a as ContextMenuTrigger } from "./context-menu-BO9-4FYd.js";
+import { S as Search } from "./search-BHyqy--Q.js";
+import { E as ExternalLink } from "./link-2-C5KPDK2L.js";
+import { R as RefreshCw } from "./refresh-cw-CYW3HR-E.js";
+import { P as Plus } from "./plus-CsV_3veW.js";
+import { R as ResizablePanelGroup, a as ResizablePanel, b as ResizableHandle } from "./resizable-C_plViAK.js";
+import "./collapsible-Bd85ZCyx.js";
+import "./item-Cv-tnX8b.js";
 import "./schemas-c0X-G5_P.js";
-import "./ellipsis-8708fodN.js";
-const __iconNode$h = [
+import "./ellipsis-BafkhboM.js";
+const __iconNode$k = [
   ["path", { d: "M12 5v14", key: "s699le" }],
   ["path", { d: "m19 12-7 7-7-7", key: "1idqje" }]
 ];
-const ArrowDown = createLucideIcon("arrow-down", __iconNode$h);
-const __iconNode$g = [
+const ArrowDown = createLucideIcon("arrow-down", __iconNode$k);
+const __iconNode$j = [
   ["path", { d: "M5 12h14", key: "1ays0h" }],
   ["path", { d: "m12 5 7 7-7 7", key: "xquz4c" }]
 ];
-const ArrowRight = createLucideIcon("arrow-right", __iconNode$g);
-const __iconNode$f = [
+const ArrowRight = createLucideIcon("arrow-right", __iconNode$j);
+const __iconNode$i = [
   ["path", { d: "m5 12 7-7 7 7", key: "hav0vg" }],
   ["path", { d: "M12 19V5", key: "x0mq9r" }]
 ];
-const ArrowUp = createLucideIcon("arrow-up", __iconNode$f);
-const __iconNode$e = [
+const ArrowUp = createLucideIcon("arrow-up", __iconNode$i);
+const __iconNode$h = [
   [
     "path",
     {
@@ -41,20 +41,20 @@ const __iconNode$e = [
     }
   ]
 ];
-const Astroid = createLucideIcon("astroid", __iconNode$e);
-const __iconNode$d = [
+const Astroid = createLucideIcon("astroid", __iconNode$h);
+const __iconNode$g = [
   ["circle", { cx: "12", cy: "12", r: "4", key: "4exip2" }],
   ["path", { d: "M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-4 8", key: "7n84p3" }]
 ];
-const AtSign = createLucideIcon("at-sign", __iconNode$d);
-const __iconNode$c = [["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }]];
-const Circle = createLucideIcon("circle", __iconNode$c);
-const __iconNode$b = [
+const AtSign = createLucideIcon("at-sign", __iconNode$g);
+const __iconNode$f = [["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }]];
+const Circle = createLucideIcon("circle", __iconNode$f);
+const __iconNode$e = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["path", { d: "M12 2a7 7 0 1 0 10 10", key: "1yuj32" }]
 ];
-const Eclipse = createLucideIcon("eclipse", __iconNode$b);
-const __iconNode$a = [
+const Eclipse = createLucideIcon("eclipse", __iconNode$e);
+const __iconNode$d = [
   [
     "path",
     {
@@ -66,34 +66,58 @@ const __iconNode$a = [
   ["path", { d: "M9 15h6", key: "cctwl0" }],
   ["path", { d: "M12 18v-6", key: "17g6i2" }]
 ];
-const FilePlus = createLucideIcon("file-plus", __iconNode$a);
-const __iconNode$9 = [
+const FilePlus = createLucideIcon("file-plus", __iconNode$d);
+const __iconNode$c = [
   ["path", { d: "m12 14 4-4", key: "9kzdfg" }],
   ["path", { d: "M3.34 19a10 10 0 1 1 17.32 0", key: "19p75a" }]
 ];
-const Gauge = createLucideIcon("gauge", __iconNode$9);
-const __iconNode$8 = [
+const Gauge = createLucideIcon("gauge", __iconNode$c);
+const __iconNode$b = [
   ["path", { d: "M15 6a9 9 0 0 0-9 9V3", key: "1cii5b" }],
   ["circle", { cx: "18", cy: "6", r: "3", key: "1h7g24" }],
   ["circle", { cx: "6", cy: "18", r: "3", key: "fqmcym" }]
 ];
-const GitBranch = createLucideIcon("git-branch", __iconNode$8);
-const __iconNode$7 = [
+const GitBranch = createLucideIcon("git-branch", __iconNode$b);
+const __iconNode$a = [
   ["line", { x1: "4", x2: "20", y1: "9", y2: "9", key: "4lhtct" }],
   ["line", { x1: "4", x2: "20", y1: "15", y2: "15", key: "vyu0kd" }],
   ["line", { x1: "10", x2: "8", y1: "3", y2: "21", key: "1ggp8o" }],
   ["line", { x1: "16", x2: "14", y1: "3", y2: "21", key: "weycgp" }]
 ];
-const Hash = createLucideIcon("hash", __iconNode$7);
-const __iconNode$6 = [
+const Hash = createLucideIcon("hash", __iconNode$a);
+const __iconNode$9 = [
+  [
+    "path",
+    {
+      d: "M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z",
+      key: "zw3jo"
+    }
+  ],
+  [
+    "path",
+    {
+      d: "M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12",
+      key: "1wduqc"
+    }
+  ],
+  [
+    "path",
+    {
+      d: "M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17",
+      key: "kqbvx6"
+    }
+  ]
+];
+const Layers = createLucideIcon("layers", __iconNode$9);
+const __iconNode$8 = [
   ["path", { d: "M3 5h8", key: "18g2rq" }],
   ["path", { d: "M3 12h8", key: "1xfjp6" }],
   ["path", { d: "M3 19h8", key: "fpbke4" }],
   ["path", { d: "m15 5 3 3 3-3", key: "1t4thf" }],
   ["path", { d: "m15 19 3-3 3 3", key: "y4ckd2" }]
 ];
-const ListChevronsDownUp = createLucideIcon("list-chevrons-down-up", __iconNode$6);
-const __iconNode$5 = [
+const ListChevronsDownUp = createLucideIcon("list-chevrons-down-up", __iconNode$8);
+const __iconNode$7 = [
   [
     "path",
     {
@@ -104,8 +128,25 @@ const __iconNode$5 = [
   ["path", { d: "M12 8v6", key: "1ib9pf" }],
   ["path", { d: "M9 11h6", key: "1fldmi" }]
 ];
-const MessageSquarePlus = createLucideIcon("message-square-plus", __iconNode$5);
-const __iconNode$4 = [
+const MessageSquarePlus = createLucideIcon("message-square-plus", __iconNode$7);
+const __iconNode$6 = [
+  [
+    "path",
+    {
+      d: "M16 10a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 14.286V4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z",
+      key: "1n2ejm"
+    }
+  ],
+  [
+    "path",
+    {
+      d: "M20 9a2 2 0 0 1 2 2v10.286a.71.71 0 0 1-1.212.502l-2.202-2.202A2 2 0 0 0 17.172 19H10a2 2 0 0 1-2-2v-1",
+      key: "1qfcsi"
+    }
+  ]
+];
+const MessagesSquare = createLucideIcon("messages-square", __iconNode$6);
+const __iconNode$5 = [
   [
     "path",
     {
@@ -114,8 +155,8 @@ const __iconNode$4 = [
     }
   ]
 ];
-const Paperclip = createLucideIcon("paperclip", __iconNode$4);
-const __iconNode$3 = [
+const Paperclip = createLucideIcon("paperclip", __iconNode$5);
+const __iconNode$4 = [
   ["path", { d: "M10 7v10a5 5 0 0 0 5-5", key: "1blmz7" }],
   ["path", { d: "m14 8-6 3", key: "2tb98i" }],
   [
@@ -126,13 +167,13 @@ const __iconNode$3 = [
     }
   ]
 ];
-const ReceiptTurkishLira = createLucideIcon("receipt-turkish-lira", __iconNode$3);
-const __iconNode$2 = [
+const ReceiptTurkishLira = createLucideIcon("receipt-turkish-lira", __iconNode$4);
+const __iconNode$3 = [
   ["path", { d: "M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8", key: "1p45f6" }],
   ["path", { d: "M21 3v5h-5", key: "1q7to0" }]
 ];
-const RotateCw = createLucideIcon("rotate-cw", __iconNode$2);
-const __iconNode$1 = [
+const RotateCw = createLucideIcon("rotate-cw", __iconNode$3);
+const __iconNode$2 = [
   [
     "path",
     {
@@ -143,13 +184,23 @@ const __iconNode$1 = [
   ["path", { d: "M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7", key: "1ydtos" }],
   ["path", { d: "M7 3v4a1 1 0 0 0 1 1h7", key: "t51u73" }]
 ];
-const Save = createLucideIcon("save", __iconNode$1);
-const __iconNode = [
+const Save = createLucideIcon("save", __iconNode$2);
+const __iconNode$1 = [
   ["path", { d: "m7 11 2-2-2-2", key: "1lz0vl" }],
   ["path", { d: "M11 13h4", key: "1p7l4v" }],
   ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2", key: "1m3agn" }]
 ];
-const SquareTerminal = createLucideIcon("square-terminal", __iconNode);
+const SquareTerminal = createLucideIcon("square-terminal", __iconNode$1);
+const __iconNode = [
+  [
+    "path",
+    {
+      d: "M15.914 4a1.5 1.5 0 00-2.474-1.561l-9 9A1.5 1.5 0 005.5 14h4.002a.5.5 0 01.471.666L8.086 20a1.5 1.5 0 002.475 1.56l9-9A1.5 1.5 0 0018.5 10h-3.997a.5.5 0 01-.472-.667z",
+      key: "1v7up4"
+    }
+  ]
+];
+const Zap = createLucideIcon("zap", __iconNode);
 const PopoverRootContext = /* @__PURE__ */ reactExports.createContext(void 0);
 function usePopoverRootContext(optional) {
   const context = reactExports.useContext(PopoverRootContext);
@@ -626,6 +677,12 @@ function useClosePartCount() {
     hasClosePart: closePartCount > 0
   };
 }
+function useClosePartRegistration() {
+  const context = reactExports.useContext(ClosePartContext);
+  useIsoLayoutEffect(() => {
+    return context?.register();
+  }, [context]);
+}
 const PopoverPopup = /* @__PURE__ */ reactExports.forwardRef(function PopoverPopup2(componentProps, forwardedRef) {
   const {
     render,
@@ -716,6 +773,35 @@ const PopoverPopup = /* @__PURE__ */ reactExports.forwardRef(function PopoverPop
     })
   });
 });
+const PopoverClose = /* @__PURE__ */ reactExports.forwardRef(function PopoverClose2(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    style,
+    disabled = false,
+    nativeButton = true,
+    ...elementProps
+  } = componentProps;
+  const {
+    buttonRef,
+    getButtonProps
+  } = useButton({
+    disabled,
+    focusableWhenDisabled: false,
+    native: nativeButton
+  });
+  const store = usePopoverRootContext();
+  useClosePartRegistration();
+  const element = useRenderElement("button", componentProps, {
+    ref: [forwardedRef, buttonRef],
+    props: [{
+      onClick(event) {
+        store.setOpen(false, createChangeEventDetails(closePress, event.nativeEvent));
+      }
+    }, elementProps, getButtonProps]
+  });
+  return element;
+});
 function ChatHeader({ session }) {
   const { t } = useTranslation();
   const { toast } = useMessage();
@@ -961,7 +1047,11 @@ function ChatHeader({ session }) {
 }
 function UsageButton({ session }) {
   const { t } = useTranslation();
+  const configuredAgents = useAppStore((s15) => s15.configuredAgents);
   const { lastTurnUsage, usage } = session;
+  const isApiAgent = configuredAgents.some(
+    (agent) => agent.id === session.agentId && agent.type === "api"
+  );
   const hasData = usage || lastTurnUsage;
   if (!hasData) return null;
   const pct = usage?.size ? usage.used / usage.size * 100 : 0;
@@ -1022,7 +1112,21 @@ function UsageButton({ session }) {
             }
           )
         ] })
-      ] }) })
+      ] }) }),
+      isApiAgent && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        PopoverClose,
+        {
+          className: buttonVariants({
+            variant: "outline",
+            size: "xs",
+            className: "w-full py-3 font-normal border-border!"
+          }),
+          onClick: () => {
+            document.dispatchEvent(new CustomEvent("fello-open-token-usage"));
+          },
+          children: t("chatHeader.viewBreakdown", "View Breakdown")
+        }
+      )
     ] }) }) }) })
   ] });
 }
@@ -6024,7 +6128,7 @@ function useFile(projectId, file, options = {}) {
   };
 }
 const CodeEditor = reactExports.lazy(
-  () => __vitePreload(() => import("./code-editor-cp9haQUT.js"), true ? __vite__mapDeps([0,1,2,3,4]) : void 0, import.meta.url).then((m) => ({ default: m.CodeEditor }))
+  () => __vitePreload(() => import("./code-editor-SuOcN-5B.js"), true ? __vite__mapDeps([0,1,2,3,4]) : void 0, import.meta.url).then((m) => ({ default: m.CodeEditor }))
 );
 const MAX_EDIT_SIZE = 1024 * 1024;
 const EditPanel = reactExports.forwardRef(function EditPanel2({ projectId, filePath, content, loading = false, onCancel, onSaved }, ref) {
@@ -15883,7 +15987,689 @@ function TerminalDetail({ terminalId, projectId, onClose }) {
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative min-h-0 flex-1 bg-neutral-900", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: containerRef, className: "h-full w-full px-2 py-1" }) })
   ] });
 }
-function Detail({ detailType, projectId, file, terminalId, onClose }) {
+function TokenUsageDetail({ session, onClose }) {
+  const { t } = useTranslation();
+  const [records, setRecords] = reactExports.useState([]);
+  const [loading, setLoading] = reactExports.useState(true);
+  reactExports.useEffect(() => {
+    let cancelled = false;
+    let refreshTimer;
+    const load = (silent = false) => {
+      if (!silent) setLoading(true);
+      request.getSessionTokenUsage({ sessionId: session.id }).then((res) => {
+        if (!cancelled) {
+          setRecords(parseTokenUsageRecords(res.records));
+        }
+      }).catch(() => {
+        if (!cancelled) setRecords([]);
+      }).finally(() => {
+        if (!cancelled) setLoading(false);
+      });
+    };
+    load();
+    const handlePromptEnd = (payload) => {
+      if (payload.sessionId !== session.id) return;
+      if (refreshTimer) clearTimeout(refreshTimer);
+      refreshTimer = setTimeout(() => {
+        if (!cancelled) load(true);
+      }, 500);
+    };
+    subscribe.on("prompt-end", handlePromptEnd);
+    return () => {
+      cancelled = true;
+      if (refreshTimer) clearTimeout(refreshTimer);
+      subscribe.off("prompt-end", handlePromptEnd);
+    };
+  }, [session.id]);
+  const liveRecord = createLiveRecord(session.lastTurnUsage, session.updatedAt);
+  const displayRecords = mergeLiveRecord(records, liveRecord);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col h-full min-h-0", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
+      {
+        className: "h-12 shrink-0 border-b border-border flex items-center justify-between gap-2 px-3 bg-background/95",
+        style: { WebkitAppRegion: "drag" },
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1.5 min-w-0", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex size-4 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Zap, { className: "size-3.5 text-amber-500/80" }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "min-w-0", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 text-foreground/60", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs font-semibold truncate", children: t("tokenUsage.title", "Token Usage Breakdown") }),
+              displayRecords.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "rounded-full bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground tabular-nums shrink-0", children: t("tokenUsage.promptCount", "{{count}} prompts", {
+                count: displayRecords.length
+              }) })
+            ] }) })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onClose,
+              className: "flex size-6 shrink-0 items-center justify-center rounded hover:bg-muted-foreground/10 text-muted-foreground hover:text-foreground transition-colors",
+              style: { WebkitAppRegion: "no-drag" },
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(X$1, { className: "size-3.5" })
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollArea, { className: "flex-1 min-h-0", viewportClassName: "p-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: loading ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex h-32 items-center justify-center text-xs text-muted-foreground", children: t("tokenUsage.loading", "Loading…") }) : displayRecords.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex h-full items-center justify-center text-xs text-muted-foreground", children: t("tokenUsage.noData", "No token breakdown data available") }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(SessionSummary, { records: displayRecords }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: displayRecords.map((record, index) => ({ record, index })).reverse().map(({ record, index }) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+        PromptUsageItem,
+        {
+          record,
+          promptNumber: index + 1,
+          defaultExpanded: index === displayRecords.length - 1
+        },
+        `${record.timestamp}-${index}`
+      )) })
+    ] }) }) })
+  ] });
+}
+function PromptUsageItem({
+  record,
+  promptNumber,
+  defaultExpanded
+}) {
+  const { t } = useTranslation();
+  const [expanded, setExpanded] = reactExports.useState(defaultExpanded);
+  const breakdown = getBreakdown(record.usage);
+  const stepCount = breakdown?.steps.length ?? breakdown?.stepCount ?? 0;
+  const toolCount = breakdown?.steps.reduce((total, step) => total + step.toolCalls.length, 0) ?? 0;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { className: "border-b border-border/50 transition-colors first:border-t", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setExpanded((current) => !current),
+        className: "w-full flex items-center p-2 text-left hover:bg-muted/30 transition-colors",
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex size-5 shrink-0 items-center justify-center text-primary -ml-2.5", children: expanded ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "size-3.5" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "size-3.5" }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(MessageSquare, { className: "size-3 shrink-0 text-muted-foreground ml-0.5" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "min-w-0 flex flex-1 ml-2 truncate", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 mr-1", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[11px] font-semibold", children: t("tokenUsage.promptLabel", "Prompt #{{count}}", { count: promptNumber }) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[10px] text-muted-foreground/60 tabular-nums mo", children: formatTimestamp(record.timestamp) })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3 text-[10px] text-muted-foreground ml-2", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-baseline shrink-0 gap-1", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono text-[10px] font-semibold tabular-nums text-foreground/85", children: stepCount }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[10px] text-muted-foreground/60", children: t("tokenUsage.steps", "steps") })
+              ] }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-baseline shrink-0 gap-1", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono text-[10px] font-semibold tabular-nums text-foreground/85", children: toolCount }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[10px] text-muted-foreground/60", children: t("tokenUsage.toolCalls", "tool calls") })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-baseline shrink-0 ml-2 gap-1", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono text-[10px] font-semibold tabular-nums text-foreground/85", children: record.usage.totalTokens.toLocaleString() }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[10px] text-muted-foreground/60", children: t("tokenUsage.tokens", "tokens") })
+          ] })
+        ]
+      }
+    ),
+    expanded && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border-t border-border/50 py-2.5 space-y-3", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(PromptSummary, { usage: record.usage }),
+      breakdown ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(UserMessageSection, { text: breakdown.inputComposition.userMessageText }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(InputCompositionSection, { composition: breakdown.inputComposition }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(ToolsBreakdownSection, { tools: breakdown.inputComposition.toolsDefinition }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(StepsSection, { steps: breakdown.steps }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(PerformanceSection, { performance: breakdown.performance, steps: breakdown.steps })
+      ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rounded-md border border-border/60 bg-muted/30 px-2.5 py-2 text-[11px] text-muted-foreground", children: t("tokenUsage.noBreakdown", "No detailed breakdown available for this prompt") })
+    ] })
+  ] });
+}
+function PromptSummary({ usage }) {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-3 gap-1.5", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      MetricCard,
+      {
+        label: t("tokenUsage.input", "Input"),
+        value: usage.inputTokens.toLocaleString()
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      MetricCard,
+      {
+        label: t("tokenUsage.output", "Output"),
+        value: usage.outputTokens.toLocaleString()
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      MetricCard,
+      {
+        label: t("tokenUsage.totalTokens", "Total"),
+        value: usage.totalTokens.toLocaleString()
+      }
+    ),
+    usage.thoughtTokens != null && usage.thoughtTokens > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      MetricCard,
+      {
+        label: t("tokenUsage.thought", "Thought"),
+        value: usage.thoughtTokens.toLocaleString()
+      }
+    ),
+    usage.cachedReadTokens != null && usage.cachedReadTokens > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      MetricCard,
+      {
+        label: t("tokenUsage.cacheRead", "Cache Read"),
+        value: usage.cachedReadTokens.toLocaleString()
+      }
+    ),
+    usage.cachedWriteTokens != null && usage.cachedWriteTokens > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      MetricCard,
+      {
+        label: t("tokenUsage.cacheWrite", "Cache Write"),
+        value: usage.cachedWriteTokens.toLocaleString()
+      }
+    )
+  ] });
+}
+function SessionSummary({ records }) {
+  const { t } = useTranslation();
+  const totalInput = records.reduce((sum, record) => sum + record.usage.inputTokens, 0);
+  const totalOutput = records.reduce((sum, record) => sum + record.usage.outputTokens, 0);
+  const totalThought = records.reduce((sum, record) => sum + (record.usage.thoughtTokens ?? 0), 0);
+  const totalCached = records.reduce(
+    (sum, record) => sum + (record.usage.cachedReadTokens ?? 0),
+    0
+  );
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { className: "pb-3", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      SectionHeader,
+      {
+        icon: MessagesSquare,
+        title: t("tokenUsage.sessionTotal", "Session Total"),
+        badge: t("tokenUsage.promptCount", "{{count}} prompts", {
+          count: records.length
+        })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-2 grid grid-cols-3 gap-1.5", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(MetricCard, { label: t("tokenUsage.input", "Input"), value: totalInput.toLocaleString() }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(MetricCard, { label: t("tokenUsage.output", "Output"), value: totalOutput.toLocaleString() }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        MetricCard,
+        {
+          label: t("tokenUsage.totalTokens", "Total"),
+          value: (totalInput + totalOutput).toLocaleString()
+        }
+      ),
+      totalThought > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        MetricCard,
+        {
+          label: t("tokenUsage.thought", "Thought"),
+          value: totalThought.toLocaleString()
+        }
+      ),
+      totalCached > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        MetricCard,
+        {
+          label: t("tokenUsage.cached", "Cached"),
+          value: totalCached.toLocaleString()
+        }
+      )
+    ] })
+  ] });
+}
+function InputCompositionSection({ composition }) {
+  const { t } = useTranslation();
+  const parts = [
+    {
+      label: t("tokenUsage.systemPrompt", "System Prompt"),
+      value: composition.systemPrompt,
+      color: "bg-blue-500/80"
+    },
+    {
+      label: t("tokenUsage.tools", "Tools"),
+      value: composition.toolsDefinition.total,
+      color: "bg-amber-500/80"
+    },
+    {
+      label: t("tokenUsage.history", "History"),
+      value: composition.history,
+      color: "bg-emerald-500/80"
+    },
+    {
+      label: t("tokenUsage.userMessage", "User Message"),
+      value: composition.userMessage,
+      color: "bg-purple-500/80"
+    }
+  ];
+  const total = composition.estimatedTotal || parts.reduce((sum, part) => sum + part.value, 0);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { className: "border-t border-border/50 pt-3", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(SectionHeader, { icon: Layers, title: t("tokenUsage.inputComposition", "Input Composition") }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-2.5 w-full rounded-full bg-muted/80 overflow-hidden flex mt-2.5 ring-1 ring-border/30", children: parts.map(
+      (part) => part.value > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "div",
+        {
+          className: cn$1("h-full", part.color),
+          style: { width: `${total > 0 ? part.value / total * 100 : 0}%` }
+        },
+        part.label
+      )
+    ) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "my-3 grid grid-cols-2 gap-x-4 gap-y-1 text-[10px]", children: parts.map((part) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1.5 min-w-0", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cn$1("size-2 rounded-sm shrink-0", part.color) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-muted-foreground truncate", children: part.label })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums text-muted-foreground shrink-0", children: part.value.toLocaleString() })
+    ] }, part.label)) }),
+    composition.delta !== 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-1.5 text-[10px] text-muted-foreground/60", children: [
+      t("tokenUsage.delta", "Estimation delta"),
+      ": ",
+      composition.delta > 0 ? "+" : "",
+      composition.delta.toLocaleString(),
+      " ",
+      t("tokenUsage.tokens", "tokens")
+    ] })
+  ] });
+}
+function UserMessageSection({ text }) {
+  const { t } = useTranslation();
+  if (!text) return null;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { className: "border-t border-border/50 pt-3", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(SectionHeader, { icon: MessageSquare, title: t("tokenUsage.userMessage", "User Message") }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollArea, { viewportClassName: "mt-2 max-h-40 rounded-md border border-border/60 bg-muted/30", children: /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "whitespace-pre-wrap wrap-break-word px-2 py-1.5 text-[10px] leading-relaxed text-foreground/70 font-mono", children: text }) })
+  ] });
+}
+function ToolsBreakdownSection({ tools }) {
+  const { t } = useTranslation();
+  const [expanded, setExpanded] = reactExports.useState(false);
+  if (tools.perTool.length === 0) return null;
+  const sorted = [...tools.perTool].sort((a, b2) => b2.tokens - a.tokens);
+  const topCount = expanded ? sorted.length : 8;
+  const topTools = sorted.slice(0, topCount);
+  const rest = sorted.slice(topCount);
+  const restTotal = rest.reduce((sum, tool) => sum + tool.tokens, 0);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { className: "border-t border-border/50 pt-3", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      SectionHeader,
+      {
+        icon: Wrench,
+        title: t("tokenUsage.toolsDefinition", "Tools Definition"),
+        badge: t("tokenUsage.toolsCount", "{{count}} tools · {{tokens}} tokens", {
+          count: tools.perTool.length,
+          tokens: tools.total.toLocaleString()
+        })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-2 space-y-1 text-[10px]", children: [
+      topTools.map((tool) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "div",
+        {
+          className: "flex items-center gap-2 rounded px-1 -mx-1 py-0.5 hover:bg-muted/40 transition-colors",
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex-1 min-w-0 truncate font-mono text-muted-foreground", children: tool.name }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums font-medium text-foreground/75 shrink-0", children: tool.tokens.toLocaleString() }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-16 h-1 rounded-full bg-muted overflow-hidden shrink-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "div",
+              {
+                className: "h-full bg-amber-500/60 rounded-full",
+                style: { width: `${tool.tokens / (sorted[0]?.tokens || 1) * 100}%` }
+              }
+            ) })
+          ]
+        },
+        tool.name
+      )),
+      rest.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "div",
+        {
+          className: "flex items-center gap-2 text-muted-foreground/60 hover:underline cursor-default",
+          onClick: () => setExpanded(true),
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex-1", children: t("tokenUsage.more", "+{{count}} more", { count: rest.length }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums shrink-0", children: restTotal.toLocaleString() }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-16 shrink-0" })
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+function StepsSection({ steps }) {
+  const { t } = useTranslation();
+  const [expandedSteps, setExpandedSteps] = reactExports.useState(() => /* @__PURE__ */ new Set());
+  if (steps.length === 0) return null;
+  const toggleStep = (stepNumber) => {
+    setExpandedSteps((current) => {
+      const next = new Set(current);
+      if (next.has(stepNumber)) next.delete(stepNumber);
+      else next.add(stepNumber);
+      return next;
+    });
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { className: "border-t border-border/50 pt-3", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      SectionHeader,
+      {
+        icon: Layers,
+        title: t("tokenUsage.steps", "Steps"),
+        badge: t("tokenUsage.stepsCount", "{{count}} steps", { count: steps.length })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2", children: steps.map((step) => {
+      const expanded = expandedSteps.has(step.stepNumber);
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "div",
+        {
+          className: "transition-colors border-b border-border/70 last:border-transparent",
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => toggleStep(step.stepNumber),
+                className: "w-full flex items-center py-1.5 text-left hover:bg-muted/30 transition-colors px-1",
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex size-5 shrink-0 items-center justify-center text-primary -ml-2", children: expanded ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "size-3" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "size-3" }) }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2 items-center ml-0.5", children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-center justify-center text-[11px] font-semibold text-muted-foreground shrink-0", children: [
+                      "#",
+                      step.stepNumber
+                    ] }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      "span",
+                      {
+                        className: cn$1(
+                          "rounded-full px-1.5 py-0.5 text-[10px] font-medium uppercase truncate",
+                          finishReasonBadge(step.finishReason)
+                        ),
+                        children: step.finishReason
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-4 ml-auto font-mono text-[10px] tabular-nums text-muted-foreground shrink-0", children: [
+                    step.toolCalls.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-baseline shrink-0 gap-1", children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: step.toolCalls.length }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-muted-foreground/70", children: t("tokenUsage.toolCalls", "tool calls") })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-1", children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: step.inputTokens.toLocaleString() }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-muted-foreground/70", children: t("tokenUsage.inputShort", "in") })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-1", children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: step.outputTokens.toLocaleString() }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-muted-foreground/70", children: t("tokenUsage.outputShort", "out") })
+                    ] })
+                  ] })
+                ]
+              }
+            ),
+            expanded && /* @__PURE__ */ jsxRuntimeExports.jsx(StepDetails, { step })
+          ]
+        },
+        step.stepNumber
+      );
+    }) })
+  ] });
+}
+function StepDetails({ step }) {
+  const { t } = useTranslation();
+  const { inputDetails, outputDetails, performance: performance2 } = step;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border-t border-border/40", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 gap-1 py-1", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        DetailMetric,
+        {
+          label: t("tokenUsage.input", "Input"),
+          value: step.inputTokens.toLocaleString()
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        DetailMetric,
+        {
+          label: t("tokenUsage.output", "Output"),
+          value: step.outputTokens.toLocaleString()
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-[10px] space-y-1", children: [
+      inputDetails.cacheReadTokens != null && inputDetails.cacheReadTokens > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        MetricRow,
+        {
+          label: t("tokenUsage.cacheRead", "Cache Read"),
+          value: inputDetails.cacheReadTokens.toLocaleString()
+        }
+      ),
+      inputDetails.cacheWriteTokens != null && inputDetails.cacheWriteTokens > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        MetricRow,
+        {
+          label: t("tokenUsage.cacheWrite", "Cache Write"),
+          value: inputDetails.cacheWriteTokens.toLocaleString()
+        }
+      ),
+      inputDetails.noCacheTokens != null && inputDetails.noCacheTokens > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        MetricRow,
+        {
+          label: t("tokenUsage.noCache", "No Cache"),
+          value: inputDetails.noCacheTokens.toLocaleString()
+        }
+      ),
+      outputDetails.textTokens != null && outputDetails.textTokens > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        MetricRow,
+        {
+          label: t("tokenUsage.text", "Text"),
+          value: outputDetails.textTokens.toLocaleString()
+        }
+      ),
+      outputDetails.reasoningTokens != null && outputDetails.reasoningTokens > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        MetricRow,
+        {
+          label: t("tokenUsage.thought", "Thought"),
+          value: outputDetails.reasoningTokens.toLocaleString()
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        MetricRow,
+        {
+          label: t("tokenUsage.stepTime", "Step Time"),
+          value: formatMs(performance2.stepTimeMs)
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        MetricRow,
+        {
+          label: t("tokenUsage.responseTime", "Response Time"),
+          value: formatMs(performance2.responseTimeMs)
+        }
+      )
+    ] }),
+    step.toolCalls.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "pt-1 mt-3 border-t border-border/40", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-1", children: step.toolCalls.map((toolCall, index) => /* @__PURE__ */ jsxRuntimeExports.jsx(ToolCallRow, { toolCall }, `${toolCall.toolName}-${index}`)) }) })
+  ] });
+}
+function ToolCallRow({ toolCall }) {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "py-4 border-t border-border/40 first:border-transparent -mt-px", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1.5 min-w-0", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Wrench, { className: "size-3 shrink-0 text-foreground/80" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono text-[10px] font-medium text-foreground/80 truncate", children: shortToolName(toolCall.toolName) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ml-auto max-w-[45%] truncate text-[10px] text-muted-foreground/50 font-mono", children: toolCall.toolName })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-3 gap-1 -mb-2", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        DetailMetric,
+        {
+          label: t("tokenUsage.arguments", "Arguments"),
+          value: `${toolCall.argumentsOutputTokens.toLocaleString()} ${t("tokenUsage.token", "token")}`
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        DetailMetric,
+        {
+          label: t("tokenUsage.result", "Result"),
+          value: `${toolCall.resultInputTokens.toLocaleString()} ${t("tokenUsage.token", "token")}`
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        DetailMetric,
+        {
+          label: t("tokenUsage.execution", "Execution"),
+          value: toolCall.executionMs != null ? formatMs(toolCall.executionMs) : "—"
+        }
+      )
+    ] }),
+    toolCall.args && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-2", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-[10px] font-medium uppercase tracking-wide text-muted-foreground/70 mb-1", children: t("tokenUsage.arguments", "Arguments") }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollArea, { viewportClassName: "max-h-32 rounded-md border border-border/60 bg-muted/30", children: /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "whitespace-pre-wrap wrap-break-word px-2 py-1.5 text-[10px] leading-relaxed text-foreground/70 font-mono", children: formatToolArgs(toolCall.args) }) })
+    ] })
+  ] });
+}
+function PerformanceSection({
+  performance: performance2,
+  steps
+}) {
+  const { t } = useTranslation();
+  const ttft = steps[0]?.performance.timeToFirstOutputMs;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { className: "border-t border-border/50 pt-3", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(SectionHeader, { icon: Gauge, title: t("tokenUsage.performance", "Performance") }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-2 grid grid-cols-3 gap-1.5", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        DetailMetric,
+        {
+          label: t("tokenUsage.totalTime", "Total Time"),
+          value: formatMs(performance2.totalTimeMs)
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        DetailMetric,
+        {
+          label: t("tokenUsage.outputSpeed", "Output Speed"),
+          value: `${Math.round(performance2.effectiveOutputTokensPerSecond)} ${t("tokenUsage.tokensPerSecond", "token/s")}`
+        }
+      ),
+      ttft != null && /* @__PURE__ */ jsxRuntimeExports.jsx(DetailMetric, { label: t("tokenUsage.firstToken", "First Token"), value: formatMs(ttft) })
+    ] })
+  ] });
+}
+function MetricCard({ label, value }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "py-2", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-[10px] font-medium uppercase tracking-wide text-muted-foreground/70", children: label }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-1 font-mono text-sm font-semibold tabular-nums text-foreground/70 truncate", children: value })
+  ] });
+}
+function DetailMetric({ label, value }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "py-2", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-[10px] font-medium uppercase tracking-wide truncate text-muted-foreground/70", children: label }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-1.5 font-mono text-xs font-medium tabular-nums text-foreground/70 truncate", children: value })
+  ] });
+}
+function SectionHeader({
+  icon: Icon,
+  title,
+  badge
+}) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1.5", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { className: "size-3 text-muted-foreground" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs font-semibold text-foreground/80", children: title }),
+    badge && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[10px] text-muted-foreground/60 ml-auto", children: badge })
+  ] });
+}
+function MetricRow({ label, value }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between min-w-0 gap-2 hover:bg-accent/60 px-1 py-0.5 -mx-1 rounded-sm", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-muted-foreground truncate", children: label }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums text-foreground/80 shrink-0", children: value })
+  ] });
+}
+function isRecord(value) {
+  return typeof value === "object" && value !== null;
+}
+function parseTokenUsageRecords(records) {
+  const parsed = [];
+  for (const record of records) {
+    if (isTokenUsageRecord(record)) parsed.push(record);
+  }
+  return parsed;
+}
+function isTokenUsageRecord(value) {
+  if (!isRecord(value) || typeof value.timestamp !== "number" || !isRecord(value.usage)) {
+    return false;
+  }
+  return typeof value.usage.totalTokens === "number" && typeof value.usage.inputTokens === "number" && typeof value.usage.outputTokens === "number";
+}
+function isTokenBreakdown(value) {
+  if (!isRecord(value)) return false;
+  const composition = value.inputComposition;
+  return typeof value.stepCount === "number" && Array.isArray(value.steps) && isRecord(composition) && isRecord(composition.toolsDefinition) && Array.isArray(composition.toolsDefinition.perTool) && isRecord(value.performance);
+}
+function getBreakdown(usage) {
+  const breakdown = usage._meta?.fello?.tokenBreakdown;
+  return isTokenBreakdown(breakdown) ? breakdown : void 0;
+}
+function createLiveRecord(usage, timestamp) {
+  if (!usage) return null;
+  const breakdown = getBreakdownFromUnknownUsage(usage);
+  if (!breakdown) return null;
+  return {
+    timestamp,
+    usage: {
+      totalTokens: usage.totalTokens,
+      inputTokens: usage.inputTokens,
+      outputTokens: usage.outputTokens,
+      thoughtTokens: usage.thoughtTokens,
+      cachedReadTokens: usage.cachedReadTokens,
+      cachedWriteTokens: usage.cachedWriteTokens,
+      _meta: { fello: { tokenBreakdown: breakdown } }
+    }
+  };
+}
+function finishReasonBadge(reason) {
+  if (reason === "stop" || reason === "end_turn") {
+    return "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400";
+  }
+  if (reason === "tool_calls" || reason === "tool_call") {
+    return "bg-amber-500/10 text-amber-600 dark:text-amber-400";
+  }
+  if (reason === "length" || reason === "max_tokens") {
+    return "bg-orange-500/10 text-orange-600 dark:text-orange-400";
+  }
+  return "bg-muted text-muted-foreground";
+}
+function getBreakdownFromUnknownUsage(usage) {
+  if (!isRecord(usage) || !isRecord(usage._meta) || !isRecord(usage._meta.fello)) {
+    return void 0;
+  }
+  return isTokenBreakdown(usage._meta.fello.tokenBreakdown) ? usage._meta.fello.tokenBreakdown : void 0;
+}
+function mergeLiveRecord(records, liveRecord) {
+  if (!liveRecord) return records;
+  const lastRecord = records[records.length - 1];
+  if (lastRecord && getUsageFingerprint(lastRecord.usage) === getUsageFingerprint(liveRecord.usage)) {
+    return records;
+  }
+  return [...records, liveRecord];
+}
+function getUsageFingerprint(usage) {
+  return JSON.stringify(usage) ?? "";
+}
+function shortToolName(name) {
+  const parts = name.split("__");
+  return parts[parts.length - 1] || name;
+}
+function formatToolArgs(args) {
+  try {
+    return JSON.stringify(JSON.parse(args), null, 2);
+  } catch {
+    return args;
+  }
+}
+function formatTimestamp(timestamp) {
+  return new Date(timestamp).toLocaleTimeString([], {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit"
+  });
+}
+function formatMs(ms2) {
+  if (ms2 < 1e3) return `${Math.round(ms2)}ms`;
+  return `${(ms2 / 1e3).toFixed(1)}s`;
+}
+function Detail({ detailType, projectId, file, terminalId, session, onClose }) {
   const { t } = useTranslation();
   if (!detailType) return null;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col h-full min-h-0 overflow-hidden bg-background", children: [
@@ -15897,7 +16683,8 @@ function Detail({ detailType, projectId, file, terminalId, onClose }) {
       },
       terminalId
     ),
-    (!detailType || detailType === "file" && (!projectId || !file) || detailType === "terminal" && (!projectId || !terminalId)) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex h-full items-center justify-center text-xs text-muted-foreground", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: t("detail.noContent", "No content") }) })
+    detailType === "token-usage" && session && /* @__PURE__ */ jsxRuntimeExports.jsx(TokenUsageDetail, { session, onClose }),
+    (!detailType || detailType === "file" && (!projectId || !file) || detailType === "terminal" && (!projectId || !terminalId) || detailType === "token-usage" && !session) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex h-full items-center justify-center text-xs text-muted-foreground", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: t("detail.noContent", "No content") }) })
   ] });
 }
 const GIT_FOLDER_STATUS = {
@@ -17550,6 +18337,15 @@ function Session({ session }) {
     document.addEventListener("fello-preview-file", handlePreviewFileEvent);
     return () => document.removeEventListener("fello-preview-file", handlePreviewFileEvent);
   }, [currentProjectId, handlePreviewFile]);
+  reactExports.useEffect(() => {
+    const handleOpenTokenUsage = () => {
+      setDetailType("token-usage");
+      setDetailFile(null);
+      setDetailTerminalId(null);
+    };
+    document.addEventListener("fello-open-token-usage", handleOpenTokenUsage);
+    return () => document.removeEventListener("fello-open-token-usage", handleOpenTokenUsage);
+  }, []);
   const fetchingRef = reactExports.useRef(null);
   const [connectionError, setConnectionError] = reactExports.useState(false);
   reactExports.useEffect(() => {
@@ -17655,6 +18451,7 @@ function Session({ session }) {
               projectId: currentProjectId,
               file: detailFile,
               terminalId: detailTerminalId,
+              session,
               onClose: handleDetailClose
             }
           ) })