@zythum02/fello-server 0.1.51 → 0.1.53

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

@@ -1,38 +1,37 @@
-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-CEXlC4aV.js","./index-LmYTNvdF.js","./index-aGJ_yZib.css","./mermaid-GHXKKRXX-CZqkhGx7.js","./code-editor-BwxubRqT.css"])))=>i.map(i=>d[i]);
+import { h as createLucideIcon, r as reactExports, am as formatErrorMessage, bq as ReactStore, br as popupStoreSelectors, bs as triggerHover, al as triggerPress, bt as escapeKey, bu as attachPreventUnmountOnClose, bv as closePress, bw as PATIENT_CLICK_THRESHOLD, ae as reactDomExports, bx as focusOut, by as setPopupOpenState, bz as createInitialPopupStoreState, bA as createPopupFloatingRootContext, bB as Timeout, bC as PopupTriggerMap, j as jsxRuntimeExports, bD as FloatingTree, bE as usePopupRootSync, bF as useImplicitActiveTrigger, bG as useOpenStateTransitions, ak as createChangeEventDetails, bH as imperativeAction, bI as PopupHandleAttachment, bJ as usePopupRootStore, bK as useDismiss, bL as usePopupInteractionProps, bM as usePopupHandleStore, ai as useBaseUiId, bN as useTriggerDataForwarding, bO as useHoverReferenceInteraction, bP as safePolygon, bQ as useClick, bR as useOpenMethodTriggerProps, aq as useButton, bS as useTriggerFocusGuards, ap as useRenderElement, bT as CLICK_TRIGGER_IDENTIFIER, bU as FocusGuard, bV as pressableTriggerOpenStateMapping, bW as triggerOpenStateMapping, bX as FloatingPortal, bY as POPUP_COLLISION_AVOIDANCE, bZ as useFloatingNodeId, at as useAnimationsFinished, b_ as useAnchorPositioning, au as useIsoLayoutEffect, b$ as useAnchoredPopupScrollLock, c0 as usePositioner, c1 as InternalBackdrop, c2 as inertValue, c3 as FloatingNode, aj as useStableCallback, c4 as useToolbarRootContext, av as useOpenChangeComplete, c5 as useHoverFloatingInteraction, c6 as createDefaultInitialFocus, c7 as FOCUSABLE_POPUP_PROPS, ba as COMPOSITE_KEYS, c8 as getDisabledMountTransitionStyles, c9 as FloatingFocusManager, ca as isHTMLElement, cb as popupTransitionStateMapping, u as useTranslation, b as useMessage, X as useNavigate, a as useAppStore, _ as Badge, cc as formatUpdatedTime, e as request, V as electron, ab as ALL_FEATURES, ac as FEATURE_I18N_KEYS, M as cn$1, c as Switch, B as Button, R as LoaderCircle, cd as buttonVariants, i as isWebUI, U as FolderOpen, C as Check, d as Copy, f as extractErrorMessage, aG as reduceFlushStreaming, aF as reduceSessionNotification, g as copyText, ad as React, ce as Tooltip, cf as TooltipTrigger, cg as TooltipContent, S as ScrollArea, a5 as Bot, ch as formatDuration, af as getDefaultExportFromCjs, ci as ReactDOM, Y as subscribe, cj as clientId, A as DropdownMenu, E as DropdownMenuTrigger, ck as ChevronDown, F as DropdownMenuContent, G as DropdownMenuItem, cl as v$2, J as generateUUID, cm as HoverCard, cn as HoverCardTrigger, co as HoverCardContent, cp as X$1, aI as Folder, L as Library, cq as DropdownMenuSub, cr as DropdownMenuSubTrigger, cs as DropdownMenuSubContent, ct as CircleQuestionMark, cu as ChevronUp, aH as Clock, aB as Tabs, aC as TabsList, aD as TabsTrigger, cv as z$1, a0 as CircleCheck, cw as __vitePreload, I as Input, m as ContextMenuContent, n as ContextMenuItem, o as ContextMenuSeparator, cx as Code, bk as EDITOR_LABELS, k as ContextMenu, l as ContextMenuTrigger, aE as webUIBaseUrl, aa as ChevronRight, cy as MessageSquare, cz as FolderPlus, P as Pencil, T as Trash2, cA as useProjectState, cB as TabsContent } from "./index-LmYTNvdF.js";
+import { S as Settings2 } from "./settings-2-DRhoXOO8.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-Bv0YhA5m.js";
+import { M as Mic, C as Clipboard } from "./mic-BgSvicCB.js";
+import { I as Image, W as Wrench } from "./wrench-7r-g9MUq.js";
+import { F as FileText } from "./file-text-nGCW6zu1.js";
+import { A as ArrowLeft } from "./arrow-left-CxS1t3f7.js";
+import { aQ as CodeView, S as StreamMarkdown, aR as FileIcon } from "./mermaid-GHXKKRXX-CZqkhGx7.js";
+import { S as Search } from "./search-BEY9yGF_.js";
+import { E as ExternalLink } from "./link-2-DHUPzNSt.js";
+import { R as RefreshCw } from "./refresh-cw-Bvm578nW.js";
+import { P as Plus } from "./plus-YNCXW-GD.js";
+import { R as ResizablePanelGroup, a as ResizablePanel, b as ResizableHandle } from "./resizable-cStzNJ8V.js";
+import "./collapsible-CMuCJUWG.js";
+import "./item-BHEUMM9H.js";
 import "./schemas-c0X-G5_P.js";
-import "./ellipsis-8708fodN.js";
-const __iconNode$h = [
+import "./ellipsis-D1agTYu1.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 +40,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 +65,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 +127,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 +154,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 +166,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 +183,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 +676,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 +772,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();
@@ -836,20 +921,34 @@ function ChatHeader({ session }) {
               children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx(PopoverTrigger, { className: "flex size-7 items-center justify-center rounded-md text-sidebar-foreground/45 hover:bg-sidebar-accent/30 hover:text-sidebar-foreground/70 outline-none transition-colors data-pressed:bg-sidebar-accent/40", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Settings2, { className: "size-4" }) }),
                 /* @__PURE__ */ jsxRuntimeExports.jsx(PopoverPortal, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(PopoverPositioner, { side: "bottom", align: "end", sideOffset: 4, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(PopoverPopup, { className: "z-10 min-w-96 rounded-lg border border-border bg-popover text-popover-foreground shadow-lg outline-none p-1.5 origin-(--transform-origin) data-ending-style:scale-90 data-starting-style:scale-90 data-ending-style:opacity-0 data-starting-style:opacity-0 transition-[transform,opacity] duration-100", children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-2 py-1.5 space-y-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    CopyableRow,
-                    {
-                      label: t("chatHeader.sessionId", "Session"),
-                      value: session.id,
-                      openFolderTitle: t("chatHeader.openSessionFolder", "Open Session Folder"),
-                      onOpenFolder: async () => {
-                        const dirPath = await request.getSessionDataSystemPath({
-                          sessionId: session.id
-                        });
-                        if (dirPath) electron.revealInFinder(dirPath);
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-1 py-1", children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      CopyableRow,
+                      {
+                        label: t("chatHeader.sessionId", "Session"),
+                        value: session.id,
+                        openFolderTitle: t("chatHeader.openSessionFolder", "Open Session Folder"),
+                        onOpenFolder: async () => {
+                          const dirPath = await request.getSessionDataSystemPath({
+                            sessionId: session.id
+                          });
+                          if (dirPath) electron.revealInFinder(dirPath);
+                        }
                       }
-                    }
-                  ) }),
+                    ) }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      CopyableRow,
+                      {
+                        label: t("chatHeader.projectId", "Project"),
+                        value: currentProjectInfo?.cwd ?? session.projectTitle,
+                        openFolderTitle: t("chatHeader.openProjectFolder", "Open Project Folder"),
+                        onOpenFolder: async () => {
+                          const dirPath = currentProjectInfo?.cwd;
+                          if (dirPath) electron.revealInFinder(dirPath);
+                        }
+                      }
+                    ) })
+                  ] }),
                   /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "border-t border-border/50 my-1" }),
                   /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-2 py-1 text-xs font-semibold text-foreground/80", children: t("constant.feature.title", "Features") }),
                   /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: ALL_FEATURES.length >= 2 ? "grid grid-cols-2 gap-0.5" : "", children: ALL_FEATURES.map((feature) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -961,7 +1060,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 +1125,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")
+        }
+      )
     ] }) }) }) })
   ] });
 }
@@ -4210,109 +4327,642 @@ function nodesToMentionText(nodes) {
     return `@[${prefix}${n.name}](${n.id})`;
   }).join(" ");
 }
-function readFileAsBase64(file) {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onload = () => {
-      const result = reader.result;
-      resolve(result.split(",")[1]);
-    };
-    reader.onerror = reject;
-    reader.readAsDataURL(file);
-  });
+const TARGET_SAMPLE_RATE = 16e3;
+const FRAME_SAMPLES = 320;
+const workletSource = `
+class FelloPcmProcessor extends AudioWorkletProcessor {
+  constructor() {
+    super();
+    this.buffer = [];
+    this.position = 0;
+    this.output = [];
+    this.ratio = sampleRate / ${TARGET_SAMPLE_RATE};
+  }
+  process(inputs, outputs) {
+    const input = inputs[0] && inputs[0][0];
+    if (input) {
+      for (let i = 0; i < input.length; i++) this.buffer.push(input[i]);
+      while (this.position + 1 < this.buffer.length) {
+        const index = Math.floor(this.position);
+        const fraction = this.position - index;
+        const sample = this.buffer[index] * (1 - fraction) + this.buffer[index + 1] * fraction;
+        const clamped = Math.max(-1, Math.min(1, sample));
+        this.output.push(clamped < 0 ? clamped * 32768 : clamped * 32767);
+        this.position += this.ratio;
+        if (this.output.length >= ${FRAME_SAMPLES}) {
+          const pcm = new Int16Array(${FRAME_SAMPLES});
+          for (let i = 0; i < ${FRAME_SAMPLES}; i++) pcm[i] = this.output[i];
+          this.output = this.output.slice(${FRAME_SAMPLES});
+          this.port.postMessage(pcm.buffer, [pcm.buffer]);
+        }
+      }
+      const remove = Math.max(0, Math.floor(this.position));
+      if (remove > 0) {
+        this.buffer = this.buffer.slice(remove);
+        this.position -= remove;
+      }
+    }
+    const output = outputs[0] && outputs[0][0];
+    if (output) output.fill(0);
+    return true;
+  }
 }
-async function addFileAsAttachment(file, type, updateSessionState) {
-  const data = await readFileAsBase64(file);
-  updateSessionState((s15) => ({
-    draftAttachments: [
-      ...s15.draftAttachments,
-      { id: generateUUID(), filename: file.name, mimeType: file.type, type, data }
-    ]
-  }));
+registerProcessor("fello-pcm-processor", FelloPcmProcessor);
+`;
+function arrayBufferToBase64(buffer) {
+  const bytes = new Uint8Array(buffer);
+  let binary = "";
+  const chunkSize = 32768;
+  for (let offset = 0; offset < bytes.length; offset += chunkSize) {
+    binary += String.fromCharCode(...bytes.subarray(offset, offset + chunkSize));
+  }
+  return btoa(binary);
 }
-function buildAttachmentBlocks(attachments) {
-  return attachments.map((att) => {
-    if (att.type === "image") {
-      return {
-        type: "image",
-        mimeType: att.mimeType,
-        data: att.data
-      };
+function errorMessage(error) {
+  return error instanceof Error ? error.message : String(error);
+}
+function useRealtimeAsr(options) {
+  const { onTranscript, onError, onRecordingChange } = options;
+  const configured = useAppStore((state) => state.speechToText.some((provider) => provider.active));
+  const [recording, setRecording] = reactExports.useState(false);
+  const [audioLevel, setAudioLevel] = reactExports.useState(0);
+  const [inputDevices, setInputDevices] = reactExports.useState([]);
+  const asrSessionIdRef = reactExports.useRef(null);
+  const streamRef = reactExports.useRef(null);
+  const audioContextRef = reactExports.useRef(null);
+  const sourceRef = reactExports.useRef(null);
+  const nodeRef = reactExports.useRef(null);
+  const stoppedRef = reactExports.useRef(false);
+  const stoppingRef = reactExports.useRef(false);
+  const recordingRef = reactExports.useRef(false);
+  const audioLevelValueRef = reactExports.useRef(0);
+  const audioLevelFrameRef = reactExports.useRef(null);
+  const stopRef = reactExports.useRef(async () => {
+  });
+  const callbacksRef = reactExports.useRef({ onTranscript, onError, onRecordingChange });
+  callbacksRef.current = { onTranscript, onError, onRecordingChange };
+  const setRecordingState = reactExports.useCallback((value) => {
+    recordingRef.current = value;
+    setRecording(value);
+    callbacksRef.current.onRecordingChange?.(value);
+  }, []);
+  reactExports.useEffect(() => {
+    const handleTranscript = (event) => {
+      if (event.clientId !== clientId || event.asrSessionId !== asrSessionIdRef.current) return;
+      callbacksRef.current.onTranscript?.({
+        text: event.text,
+        isFinal: event.isFinal,
+        id: event.id,
+        index: event.index
+      });
+    };
+    const handleError = (event) => {
+      if (event.clientId !== clientId || event.asrSessionId !== asrSessionIdRef.current) return;
+      callbacksRef.current.onError?.(event.message);
+    };
+    const handleClosed = (event) => {
+      if (event.clientId !== clientId || event.asrSessionId !== asrSessionIdRef.current) return;
+      if (recordingRef.current && !stoppingRef.current) {
+        callbacksRef.current.onError?.("实时语音识别连接已关闭。");
+        void stopRef.current();
+      }
+    };
+    subscribe.on("asr-transcript", handleTranscript);
+    subscribe.on("asr-error", handleError);
+    subscribe.on("asr-closed", handleClosed);
+    return () => {
+      subscribe.off("asr-transcript", handleTranscript);
+      subscribe.off("asr-error", handleError);
+      subscribe.off("asr-closed", handleClosed);
+    };
+  }, [setRecordingState]);
+  const updateAudioLevel = reactExports.useCallback((buffer) => {
+    const samples = new Int16Array(buffer);
+    if (samples.length === 0) return;
+    let sumSquares = 0;
+    for (const sample of samples) {
+      const normalized = sample / 32768;
+      sumSquares += normalized * normalized;
+    }
+    const rms = Math.sqrt(sumSquares / samples.length);
+    audioLevelValueRef.current = Math.min(1, rms * 4);
+    if (audioLevelFrameRef.current !== null) return;
+    audioLevelFrameRef.current = requestAnimationFrame(() => {
+      audioLevelFrameRef.current = null;
+      setAudioLevel(audioLevelValueRef.current);
+    });
+  }, []);
+  const cleanupAudio = reactExports.useCallback(async () => {
+    if (audioLevelFrameRef.current !== null) {
+      cancelAnimationFrame(audioLevelFrameRef.current);
+      audioLevelFrameRef.current = null;
+    }
+    audioLevelValueRef.current = 0;
+    setAudioLevel(0);
+    nodeRef.current?.disconnect();
+    sourceRef.current?.disconnect();
+    streamRef.current?.getTracks().forEach((track) => track.stop());
+    streamRef.current = null;
+    nodeRef.current = null;
+    sourceRef.current = null;
+    const context = audioContextRef.current;
+    audioContextRef.current = null;
+    await context?.close().catch(() => void 0);
+  }, []);
+  const refreshInputDevices = reactExports.useCallback(async () => {
+    if (!navigator.mediaDevices?.enumerateDevices) return [];
+    try {
+      let devices = await navigator.mediaDevices.enumerateDevices();
+      if (devices.length > 0 && devices.every((device) => !device.label)) {
+        try {
+          const permissionStream = await navigator.mediaDevices.getUserMedia({ audio: true });
+          permissionStream.getTracks().forEach((track) => track.stop());
+          devices = await navigator.mediaDevices.enumerateDevices();
+        } catch {
+        }
+      }
+      const audioInputs = devices.filter((device) => device.kind === "audioinput").map((device, index) => ({
+        deviceId: device.deviceId,
+        label: device.label || `Microphone ${index + 1}`
+      }));
+      setInputDevices(audioInputs);
+      return audioInputs;
+    } catch (error) {
+      callbacksRef.current.onError?.(errorMessage(error));
+      return [];
     }
-    return {
-      type: "resource",
-      resource: {
-        uri: `file://${att.filename}`,
-        text: att.data
+  }, []);
+  const start = reactExports.useCallback(
+    async (deviceId = "default") => {
+      if (recordingRef.current || !configured) return;
+      const asrSessionId = `asr_${Date.now()}_${Math.random().toString(36).slice(2)}`;
+      asrSessionIdRef.current = asrSessionId;
+      stoppedRef.current = false;
+      stoppingRef.current = false;
+      try {
+        const stream = await navigator.mediaDevices.getUserMedia({
+          audio: {
+            channelCount: 1,
+            echoCancellation: true,
+            noiseSuppression: true,
+            ...deviceId !== "default" ? { deviceId: { exact: deviceId } } : {}
+          }
+        });
+        streamRef.current = stream;
+        const audioContext = new AudioContext();
+        audioContextRef.current = audioContext;
+        await audioContext.resume();
+        const workletUrl = URL.createObjectURL(
+          new Blob([workletSource], { type: "application/javascript" })
+        );
+        try {
+          await audioContext.audioWorklet.addModule(workletUrl);
+        } finally {
+          URL.revokeObjectURL(workletUrl);
+        }
+        const source = audioContext.createMediaStreamSource(stream);
+        const node = new AudioWorkletNode(audioContext, "fello-pcm-processor");
+        const silentGain = audioContext.createGain();
+        silentGain.gain.value = 0;
+        node.port.onmessage = (message) => {
+          if (stoppedRef.current || asrSessionIdRef.current !== asrSessionId) return;
+          updateAudioLevel(message.data);
+          void request.sendRealtimeAsrFrame({
+            clientId,
+            asrSessionId,
+            audioB64: arrayBufferToBase64(message.data)
+          }).catch((error) => callbacksRef.current.onError?.(errorMessage(error)));
+        };
+        sourceRef.current = source;
+        nodeRef.current = node;
+        await request.startRealtimeAsr({ clientId, asrSessionId });
+        source.connect(node);
+        node.connect(silentGain);
+        silentGain.connect(audioContext.destination);
+        setRecordingState(true);
+      } catch (error) {
+        await cleanupAudio();
+        await request.stopRealtimeAsr({ clientId, asrSessionId }).catch(() => void 0);
+        asrSessionIdRef.current = null;
+        callbacksRef.current.onError?.(errorMessage(error));
+        setRecordingState(false);
       }
+    },
+    [cleanupAudio, configured, setRecordingState, updateAudioLevel]
+  );
+  const stop = reactExports.useCallback(async () => {
+    const asrSessionId = asrSessionIdRef.current;
+    if (!asrSessionId) return;
+    stoppedRef.current = true;
+    stoppingRef.current = true;
+    await cleanupAudio();
+    await request.stopRealtimeAsr({ clientId, asrSessionId }).catch((error) => {
+      callbacksRef.current.onError?.(errorMessage(error));
+    });
+    asrSessionIdRef.current = null;
+    stoppingRef.current = false;
+    setRecordingState(false);
+  }, [cleanupAudio, setRecordingState]);
+  stopRef.current = stop;
+  reactExports.useEffect(() => {
+    return () => {
+      stoppedRef.current = true;
+      void stopRef.current();
     };
-  });
+  }, []);
+  const toggle = reactExports.useCallback(() => {
+    void (recordingRef.current ? stop() : start());
+  }, [start, stop]);
+  return {
+    recording,
+    audioLevel,
+    configured,
+    inputDevices,
+    refreshInputDevices,
+    start,
+    stop,
+    toggle
+  };
 }
-function ChatInput({ session }) {
+const ASR_WAVEFORM_BARS = [0.35, 0.65, 0.95, 0.55, 0.8, 0.45, 0.9, 0.6, 0.38];
+const DEFAULT_MAX_DURATION = 5 * 60 * 1e3;
+const VOICE_INPUT_DEVICE_STORAGE_KEY = "fello.voice-input.device-id";
+function getInputCursor(input) {
+  return input.selectionStart ?? input.value.length;
+}
+function VoiceInputButton({
+  inputRef,
+  disabled = false,
+  className,
+  maxDuration = DEFAULT_MAX_DURATION,
+  ref
+}) {
   const { t } = useTranslation();
-  const navigate = useNavigate();
   const { toast } = useMessage();
-  const [isDragOver, setIsDragOver] = reactExports.useState(false);
-  const containerRef = reactExports.useRef(null);
-  const dragLeaveTimer = reactExports.useRef(null);
-  const { addMessage, updateSession } = useAppStore();
-  const snippets = useAppStore((s15) => s15.snippets);
-  const isStreaming = session.isStreaming;
-  const availableModels = reactExports.useMemo(
-    () => session.models?.availableModels ?? [],
-    [session.models?.availableModels]
-  );
-  const currentModelId = session.models?.currentModelId ?? null;
-  const groupedModels = reactExports.useMemo(() => {
-    const groups = /* @__PURE__ */ new Map();
-    for (const m of availableModels) {
-      const slashIdx = m.name.indexOf("/");
-      const key = slashIdx > 0 ? m.name.slice(0, slashIdx) : "";
-      if (!groups.has(key)) groups.set(key, []);
-      groups.get(key).push(m);
-    }
-    return groups;
-  }, [availableModels]);
-  const handleModelChange = reactExports.useCallback(
-    async (modelId) => {
-      const sid = session.id;
-      if (!sid) return;
-      useAppStore.getState().updateSession({
-        ...session,
-        models: { ...session.models, currentModelId: modelId }
-      });
+  const asrApplyingRef = reactExports.useRef(false);
+  const asrSegmentsRef = reactExports.useRef(/* @__PURE__ */ new Map());
+  const asrTailRef = reactExports.useRef(0);
+  const asrCurrentKeyRef = reactExports.useRef(null);
+  const asrSequenceRef = reactExports.useRef(0);
+  const freezeAsrSegments = reactExports.useCallback(() => {
+    asrSegmentsRef.current.clear();
+    asrCurrentKeyRef.current = null;
+    const textarea = inputRef.current;
+    if (textarea) asrTailRef.current = getInputCursor(textarea);
+  }, [inputRef]);
+  const applyAsrTranscript = reactExports.useCallback(
+    (transcript) => {
+      const textarea = inputRef.current;
+      if (!textarea) return;
+      const key = transcript.id ? `id:${transcript.id}` : transcript.index !== void 0 ? `index:${transcript.index}` : asrCurrentKeyRef.current ?? `stream:${asrSequenceRef.current++}`;
+      let segment = asrSegmentsRef.current.get(key);
+      if (!segment) {
+        segment = { start: asrTailRef.current, length: 0 };
+        asrSegmentsRef.current.set(key, segment);
+        asrCurrentKeyRef.current = key;
+      }
+      textarea.focus();
+      textarea.setSelectionRange(segment.start, segment.start + segment.length);
+      asrApplyingRef.current = true;
       try {
-        await request.setModel({ sessionId: sid, modelId });
-      } catch (err) {
-        console.error("Failed to set model:", err);
-        useAppStore.getState().updateSession(session);
+        document.execCommand("insertText", false, transcript.text);
+      } finally {
+        asrApplyingRef.current = false;
+      }
+      textarea.ownerDocument.dispatchEvent(new Event("selectionchange"));
+      segment.length = transcript.text.length;
+      asrTailRef.current = segment.start + segment.length;
+      if (transcript.isFinal) {
+        asrSegmentsRef.current.delete(key);
+        asrCurrentKeyRef.current = null;
       }
     },
-    [session]
+    [inputRef]
   );
-  const handleModeChange = reactExports.useCallback(
-    async (modeId) => {
-      const sid = session.id;
-      if (!sid) return;
-      useAppStore.getState().updateSession({
-        ...session,
-        modes: { ...session.modes, currentModeId: modeId }
-      });
-      try {
-        await request.setMode({ sessionId: sid, modeId });
-      } catch (err) {
-        console.error("Failed to set mode:", err);
-        useAppStore.getState().updateSession(session);
+  const asr = useRealtimeAsr({
+    onTranscript: applyAsrTranscript,
+    onError: (message) => toast.error(message),
+    onRecordingChange: (recording) => {
+      if (!recording) freezeAsrSegments();
+    }
+  });
+  const { start: startAsr, stop: stopAsr, refreshInputDevices } = asr;
+  const handleStop = reactExports.useCallback(async () => {
+    await stopAsr();
+  }, [stopAsr]);
+  reactExports.useImperativeHandle(
+    ref,
+    () => ({
+      stop: handleStop
+    }),
+    [handleStop]
+  );
+  const handleStart = reactExports.useCallback(
+    async (deviceId) => {
+      const textarea = inputRef.current;
+      if (!textarea) return;
+      textarea.focus();
+      const cursorPosition = getInputCursor(textarea);
+      const before = textarea.value.slice(0, cursorPosition);
+      if (before.length > 0 && !/\s$/.test(before)) {
+        asrApplyingRef.current = true;
+        try {
+          document.execCommand("insertText", false, " ");
+        } finally {
+          asrApplyingRef.current = false;
+        }
       }
+      asrSegmentsRef.current.clear();
+      asrCurrentKeyRef.current = null;
+      asrTailRef.current = getInputCursor(textarea);
+      await startAsr(deviceId);
     },
-    [session]
+    [startAsr, inputRef]
   );
-  const handleThoughtLevelChange = reactExports.useCallback(
-    async (thoughtLevelId) => {
-      const sid = session.id;
-      if (!sid) return;
-      useAppStore.getState().updateSession({
-        ...session,
+  const [savedDeviceId, setSavedDeviceId] = reactExports.useState(() => {
+    try {
+      return localStorage.getItem(VOICE_INPUT_DEVICE_STORAGE_KEY);
+    } catch {
+      return null;
+    }
+  });
+  const [deviceMenuOpen, setDeviceMenuOpen] = reactExports.useState(false);
+  const rememberDevice = reactExports.useCallback((deviceId) => {
+    setSavedDeviceId(deviceId);
+    try {
+      localStorage.setItem(VOICE_INPUT_DEVICE_STORAGE_KEY, deviceId);
+    } catch {
+    }
+  }, []);
+  const handleSelectDevice = reactExports.useCallback(
+    (deviceId) => {
+      rememberDevice(deviceId);
+      setDeviceMenuOpen(false);
+    },
+    [rememberDevice]
+  );
+  const handleMicClick = reactExports.useCallback(async () => {
+    const devices = await refreshInputDevices();
+    const hasSavedDevice = savedDeviceId != null && devices.some((device) => device.deviceId === savedDeviceId);
+    if (hasSavedDevice) {
+      await handleStart(savedDeviceId);
+    } else {
+      setDeviceMenuOpen(true);
+    }
+  }, [refreshInputDevices, handleStart, savedDeviceId]);
+  const handleDeviceMenuChange = reactExports.useCallback(
+    (open) => {
+      setDeviceMenuOpen(open);
+      if (open) void refreshInputDevices();
+    },
+    [refreshInputDevices]
+  );
+  reactExports.useEffect(() => {
+    const textarea = inputRef.current;
+    if (!textarea) return;
+    const handleInput = () => {
+      if (!asrApplyingRef.current && asr.recording) freezeAsrSegments();
+    };
+    textarea.addEventListener("input", handleInput);
+    return () => textarea.removeEventListener("input", handleInput);
+  }, [asr.recording, freezeAsrSegments, inputRef]);
+  reactExports.useEffect(() => {
+    if (disabled && asr.recording) void handleStop();
+  }, [asr.recording, disabled, handleStop]);
+  reactExports.useEffect(() => {
+    if (!asr.recording || maxDuration <= 0 || !Number.isFinite(maxDuration)) return;
+    const timer = setTimeout(() => void handleStop(), maxDuration);
+    return () => clearTimeout(timer);
+  }, [asr.recording, handleStop, maxDuration]);
+  if (!asr.configured) return null;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "div",
+    {
+      className: cn$1(
+        "relative inline-flex h-7 transition-[width] duration-300 ease-out",
+        asr.recording ? "w-18" : "w-12.5",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            className: cn$1(
+              "absolute inset-0 transition-[opacity,transform,visibility] duration-300 ease-out",
+              asr.recording ? "visible scale-100 opacity-100" : "pointer-events-none invisible scale-90 opacity-0"
+            ),
+            "aria-hidden": !asr.recording,
+            children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              Button,
+              {
+                variant: "default",
+                size: "sm",
+                className: "h-full w-full rounded-lg bg-muted hover:bg-input border border-input text-amber-300/50 hover:text-amber-200",
+                onClick: () => void handleStop(),
+                "aria-label": t("chatInput.stopVoiceInput", "Stop voice input"),
+                "aria-pressed": "true",
+                title: t("chatInput.stopVoiceInput", "Stop voice input"),
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(Mic, { className: "size-3.5 shrink-0 animate-pulse" }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    "span",
+                    {
+                      className: "flex h-4 flex-1 items-center justify-center gap-0.5 overflow-hidden",
+                      "aria-hidden": "true",
+                      children: ASR_WAVEFORM_BARS.map((scale, index) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        "span",
+                        {
+                          className: "border-l rounded-full bg-amber-300 transition-[height] duration-75",
+                          style: {
+                            height: `${Math.max(2, Math.round(2 + asr.audioLevel * 16 * scale))}px`
+                          }
+                        },
+                        index
+                      ))
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            className: cn$1(
+              "absolute inset-0 transition-[opacity,transform,visibility] duration-300 ease-out",
+              asr.recording ? "pointer-events-none invisible scale-90 opacity-0" : "visible scale-100 opacity-100"
+            ),
+            "aria-hidden": asr.recording,
+            children: /* @__PURE__ */ jsxRuntimeExports.jsxs(DropdownMenu, { open: deviceMenuOpen, onOpenChange: handleDeviceMenuChange, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex h-full items-stretch", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  Button,
+                  {
+                    size: "sm",
+                    className: "h-full w-8 rounded-r-none border-r-0 bg-muted hover:bg-input border border-input text-amber-300/50 hover:text-amber-200",
+                    onClick: () => void handleMicClick(),
+                    disabled: disabled || !asr.configured,
+                    "aria-label": t("chatInput.voiceInput", "Voice input"),
+                    title: asr.configured ? t("chatInput.voiceInput", "Voice input") : t("chatInput.voiceInputNotConfigured", "Configure voice input in Settings"),
+                    children: /* @__PURE__ */ jsxRuntimeExports.jsx(Mic, { className: "size-3.5" })
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  DropdownMenuTrigger,
+                  {
+                    render: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      Button,
+                      {
+                        size: "icon",
+                        className: "h-full w-4.5 rounded-l-none bg-muted hover:bg-input border border-input border-l-0 px-0 text-amber-300/50 hover:text-amber-200",
+                        disabled: disabled || !asr.configured,
+                        "aria-label": t("chatInput.selectVoiceInputDevice", "Select microphone"),
+                        title: t("chatInput.selectVoiceInputDevice", "Select microphone")
+                      }
+                    ),
+                    children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "size-3" })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                DropdownMenuContent,
+                {
+                  side: "top",
+                  align: "center",
+                  className: "w-auto! max-w-72 min-w-(--anchor-width)",
+                  children: asr.inputDevices.length > 0 ? asr.inputDevices.map((device) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                    DropdownMenuItem,
+                    {
+                      onClick: () => handleSelectDevice(device.deviceId),
+                      className: "gap-2",
+                      children: [
+                        /* @__PURE__ */ jsxRuntimeExports.jsx(
+                          Check,
+                          {
+                            className: cn$1(
+                              "size-3 shrink-0",
+                              device.deviceId === savedDeviceId ? "opacity-100" : "opacity-0"
+                            )
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex min-w-0 flex-col gap-0.5 pr-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate", children: device.label }) })
+                      ]
+                    },
+                    device.deviceId
+                  )) : /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownMenuItem, { disabled: true, children: t("chatInput.noAudioInputDevices", "No audio input devices found") })
+                }
+              )
+            ] })
+          }
+        )
+      ]
+    }
+  );
+}
+function readFileAsBase64(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      const result = reader.result;
+      resolve(result.split(",")[1]);
+    };
+    reader.onerror = reject;
+    reader.readAsDataURL(file);
+  });
+}
+async function addFileAsAttachment(file, type, updateSessionState) {
+  const data = await readFileAsBase64(file);
+  updateSessionState((s15) => ({
+    draftAttachments: [
+      ...s15.draftAttachments,
+      { id: generateUUID(), filename: file.name, mimeType: file.type, type, data }
+    ]
+  }));
+}
+function buildAttachmentBlocks(attachments) {
+  return attachments.map((att) => {
+    if (att.type === "image") {
+      return {
+        type: "image",
+        mimeType: att.mimeType,
+        data: att.data
+      };
+    }
+    return {
+      type: "resource",
+      resource: {
+        uri: `file://${att.filename}`,
+        text: att.data
+      }
+    };
+  });
+}
+function ChatInput({ session }) {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { toast } = useMessage();
+  const [isDragOver, setIsDragOver] = reactExports.useState(false);
+  const containerRef = reactExports.useRef(null);
+  const dragLeaveTimer = reactExports.useRef(null);
+  const { addMessage, updateSession } = useAppStore();
+  const snippets = useAppStore((s15) => s15.snippets);
+  const isStreaming = session.isStreaming;
+  const availableModels = reactExports.useMemo(
+    () => session.models?.availableModels ?? [],
+    [session.models?.availableModels]
+  );
+  const currentModelId = session.models?.currentModelId ?? null;
+  const groupedModels = reactExports.useMemo(() => {
+    const groups = /* @__PURE__ */ new Map();
+    for (const m of availableModels) {
+      const slashIdx = m.name.indexOf("/");
+      const key = slashIdx > 0 ? m.name.slice(0, slashIdx) : "";
+      if (!groups.has(key)) groups.set(key, []);
+      groups.get(key).push(m);
+    }
+    return groups;
+  }, [availableModels]);
+  const handleModelChange = reactExports.useCallback(
+    async (modelId) => {
+      const sid = session.id;
+      if (!sid) return;
+      useAppStore.getState().updateSession({
+        ...session,
+        models: { ...session.models, currentModelId: modelId }
+      });
+      try {
+        await request.setModel({ sessionId: sid, modelId });
+      } catch (err) {
+        console.error("Failed to set model:", err);
+        useAppStore.getState().updateSession(session);
+      }
+    },
+    [session]
+  );
+  const handleModeChange = reactExports.useCallback(
+    async (modeId) => {
+      const sid = session.id;
+      if (!sid) return;
+      useAppStore.getState().updateSession({
+        ...session,
+        modes: { ...session.modes, currentModeId: modeId }
+      });
+      try {
+        await request.setMode({ sessionId: sid, modeId });
+      } catch (err) {
+        console.error("Failed to set mode:", err);
+        useAppStore.getState().updateSession(session);
+      }
+    },
+    [session]
+  );
+  const handleThoughtLevelChange = reactExports.useCallback(
+    async (thoughtLevelId) => {
+      const sid = session.id;
+      if (!sid) return;
+      useAppStore.getState().updateSession({
+        ...session,
         thoughtLevels: { ...session.thoughtLevels, currentThoughtLevelId: thoughtLevelId }
       });
       try {
@@ -4343,10 +4993,9 @@ function ChatInput({ session }) {
   const promptCapabilities = initializeInfo?.agentCapabilities?.promptCapabilities;
   const supportsImage = promptCapabilities?.image ?? false;
   const supportsEmbedded = promptCapabilities?.embeddedContext ?? false;
-  const getTextarea = reactExports.useCallback(
-    () => containerRef.current?.querySelector("textarea"),
-    []
-  );
+  const textareaRef = reactExports.useRef(null);
+  const voiceInputRef = reactExports.useRef(null);
+  const getTextarea = reactExports.useCallback(() => textareaRef.current, []);
   const insertTriggerChar = reactExports.useCallback(
     (char) => {
       const textarea = getTextarea();
@@ -4513,6 +5162,7 @@ function ChatInput({ session }) {
     [localInput, availableCommands]
   );
   const handleSubmit = reactExports.useCallback(async () => {
+    await voiceInputRef.current?.stop();
     v$2();
     const state = useAppStore.getState().getSessionState(session.id);
     const currentAttachments = state.draftAttachments;
@@ -4807,7 +5457,10 @@ function ChatInput({ session }) {
               MentionsInput$1,
               {
                 value: localInput,
-                onChange: (_e3, newValue) => setLocalInput(newValue),
+                inputRef: textareaRef,
+                onChange: (_e3, newValue) => {
+                  setLocalInput(newValue);
+                },
                 onBlur: handleBlur,
                 onKeyDown: handleKeyDown,
                 placeholder: disabled ? t("chatInput.placeholderDisabled") : t("chatInput.placeholderActive"),
@@ -5186,6 +5839,14 @@ function ChatInput({ session }) {
                         }
                       )
                     ] }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      VoiceInputButton,
+                      {
+                        ref: voiceInputRef,
+                        inputRef: textareaRef,
+                        disabled
+                      }
+                    ),
                     isStreaming ? /* @__PURE__ */ jsxRuntimeExports.jsx(
                       Button,
                       {
@@ -5418,13 +6079,12 @@ function AskUserOptions({
   const [highlightedIndex, setHighlightedIndex] = reactExports.useState(null);
   const [isDragOver, setIsDragOver] = reactExports.useState(false);
   const inputContainerRef = reactExports.useRef(null);
+  const textareaRef = reactExports.useRef(null);
+  const voiceInputRef = reactExports.useRef(null);
   const navigate = useNavigate();
   const snippets = useAppStore((s15) => s15.snippets);
   const fileInputRef = reactExports.useRef(null);
-  const getTextarea = reactExports.useCallback(
-    () => inputContainerRef.current?.querySelector("textarea"),
-    []
-  );
+  const getTextarea = reactExports.useCallback(() => textareaRef.current, []);
   const insertTriggerChar = reactExports.useCallback(
     (char) => {
       const textarea = getTextarea();
@@ -5489,7 +6149,7 @@ function AskUserOptions({
       }
       if (paths.length === 0) return;
       void (async () => {
-        const textarea = inputContainerRef.current?.querySelector("textarea");
+        const textarea = textareaRef.current;
         if (!textarea) return;
         textarea.focus();
         const tags = await Promise.all(
@@ -5575,7 +6235,8 @@ function AskUserOptions({
     window.addEventListener("keydown", handler);
     return () => window.removeEventListener("keydown", handler);
   }, [mode, hasOptions, request$1.options, handleSelectOption]);
-  const handleSubmitInput = () => {
+  const handleSubmitInput = async () => {
+    await voiceInputRef.current?.stop();
     const trimmed = resolveMentions(inputValue).trim();
     request.respondAskUser({
       sessionId: request$1.sessionId,
@@ -5589,12 +6250,12 @@ function AskUserOptions({
     if (e.nativeEvent.isComposing) return;
     if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
-      handleSubmitInput();
+      void handleSubmitInput();
     }
   };
   reactExports.useEffect(() => {
     if (mode === "input") {
-      inputContainerRef.current?.querySelector("textarea")?.focus();
+      textareaRef.current?.focus();
     }
   }, [mode]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
@@ -5663,6 +6324,7 @@ function AskUserOptions({
               MentionsInput$1,
               {
                 value: inputValue,
+                inputRef: textareaRef,
                 onChange: (_e3, newValue) => setInputValue(newValue),
                 onKeyDown: handleKeyDown,
                 placeholder: t("askUser.inputPlaceholder", "Type your response... (Enter to send)"),
@@ -5803,16 +6465,19 @@ function AskUserOptions({
                   )) : /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownMenuItem, { onClick: () => navigate("/settings/snippets"), children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-muted-foreground", children: t("chatInput.snippetsEmpty", "No snippets. Click to add in Settings.") }) }) })
                 ] })
               ] }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
-                Button,
-                {
-                  size: "icon",
-                  className: "size-7 rounded-lg",
-                  onClick: handleSubmitInput,
-                  "aria-label": t("askUser.submit", "Submit"),
-                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowUp, { className: "size-3.5" })
-                }
-              )
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(VoiceInputButton, { ref: voiceInputRef, inputRef: textareaRef }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  Button,
+                  {
+                    size: "icon",
+                    className: "size-7 rounded-lg",
+                    onClick: handleSubmitInput,
+                    "aria-label": t("askUser.submit", "Submit"),
+                    children: /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowUp, { className: "size-3.5" })
+                  }
+                )
+              ] })
             ] })
           ]
         }
@@ -6024,7 +6689,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-CEXlC4aV.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 +16548,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 +17244,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 +18898,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 +19012,7 @@ function Session({ session }) {
               projectId: currentProjectId,
               file: detailFile,
               terminalId: detailTerminalId,
+              session,
               onClose: handleDetailClose
             }
           ) })