@dexto/tui 1.6.2

package/dist/components/overlays/CommandOutputOverlay.cjs

@@ -0,0 +1,103 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var CommandOutputOverlay_exports = {};
+__export(CommandOutputOverlay_exports, {
+  CommandOutputOverlay: () => CommandOutputOverlay
+});
+module.exports = __toCommonJS(CommandOutputOverlay_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_ink = require("ink");
+var import_wrap_ansi = __toESM(require("wrap-ansi"), 1);
+var import_useTerminalSize = require("../../hooks/useTerminalSize.js");
+var import_overlaySizing = require("../../utils/overlaySizing.js");
+var import_HintBar = require("../shared/HintBar.js");
+const CommandOutputOverlay = (0, import_react.forwardRef)(function CommandOutputOverlay2({ isVisible, title, content, onClose }, ref) {
+  const { columns, rows } = (0, import_useTerminalSize.useTerminalSize)();
+  const viewportLines = (0, import_react.useMemo)(() => {
+    return (0, import_overlaySizing.getMaxVisibleItemsForTerminalRows)({
+      rows,
+      hardCap: 20,
+      reservedRows: 10
+    });
+  }, [rows]);
+  const [scrollOffset, setScrollOffset] = (0, import_react.useState)(0);
+  const wrappedLines = (0, import_react.useMemo)(() => {
+    const width = Math.max(20, columns - 2);
+    const wrapped = (0, import_wrap_ansi.default)(content || "", width, {
+      hard: true,
+      wordWrap: true,
+      trim: false
+    });
+    return wrapped.length > 0 ? wrapped.split("\n") : [];
+  }, [content, columns]);
+  const maxScrollOffset = (0, import_react.useMemo)(() => {
+    return Math.max(0, wrappedLines.length - viewportLines);
+  }, [wrappedLines.length, viewportLines]);
+  (0, import_react.useEffect)(() => {
+    setScrollOffset((prev) => Math.min(maxScrollOffset, Math.max(0, prev)));
+  }, [maxScrollOffset]);
+  (0, import_react.useImperativeHandle)(
+    ref,
+    () => ({
+      handleInput: (_input, key) => {
+        if (!isVisible) return false;
+        if (key.escape) {
+          onClose();
+          return true;
+        }
+        if (key.upArrow) {
+          setScrollOffset((prev) => Math.max(0, prev - 1));
+          return true;
+        }
+        if (key.downArrow) {
+          setScrollOffset((prev) => Math.min(maxScrollOffset, prev + 1));
+          return true;
+        }
+        return true;
+      }
+    }),
+    [isVisible, maxScrollOffset, onClose]
+  );
+  if (!isVisible) return null;
+  const visible = wrappedLines.slice(scrollOffset, scrollOffset + viewportLines);
+  const hint = wrappedLines.length > viewportLines ? ["\u2191\u2193 scroll", "Esc close"] : ["Esc close"];
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { flexDirection: "column", width: columns, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "cyan", bold: true, wrap: "truncate-end", children: title }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { flexDirection: "column", height: viewportLines, marginTop: 1, children: Array.from({ length: viewportLines }, (_, rowIndex) => {
+      const line = visible[rowIndex];
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { wrap: "truncate-end", children: line ?? " " }) }, `line-${rowIndex}`);
+    }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 0, paddingY: 0, marginTop: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_HintBar.HintBar, { hints: hint }) })
+  ] });
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CommandOutputOverlay
+});

package/dist/components/overlays/CommandOutputOverlay.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { Key } from '../../hooks/useInputOrchestrator.js';
+export interface CommandOutputOverlayProps {
+    isVisible: boolean;
+    title: string;
+    content: string;
+    onClose: () => void;
+}
+export interface CommandOutputOverlayHandle {
+    handleInput: (input: string, key: Key) => boolean;
+}
+export declare const CommandOutputOverlay: React.ForwardRefExoticComponent<CommandOutputOverlayProps & React.RefAttributes<CommandOutputOverlayHandle>>;
+//# sourceMappingURL=CommandOutputOverlay.d.ts.map

package/dist/components/overlays/CommandOutputOverlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandOutputOverlay.d.ts","sourceRoot":"","sources":["../../../src/components/overlays/CommandOutputOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwE,MAAM,OAAO,CAAC;AAG7F,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,qCAAqC,CAAC;AAK/D,MAAM,WAAW,yBAAyB;IACtC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,MAAM,WAAW,0BAA0B;IACvC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC;CACrD;AAED,eAAO,MAAM,oBAAoB,8GAuF/B,CAAC"}

package/dist/components/overlays/CommandOutputOverlay.js

@@ -0,0 +1,69 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useMemo, useState } from "react";
+import { Box, Text } from "ink";
+import wrapAnsi from "wrap-ansi";
+import { useTerminalSize } from "../../hooks/useTerminalSize.js";
+import { getMaxVisibleItemsForTerminalRows } from "../../utils/overlaySizing.js";
+import { HintBar } from "../shared/HintBar.js";
+const CommandOutputOverlay = forwardRef(function CommandOutputOverlay2({ isVisible, title, content, onClose }, ref) {
+  const { columns, rows } = useTerminalSize();
+  const viewportLines = useMemo(() => {
+    return getMaxVisibleItemsForTerminalRows({
+      rows,
+      hardCap: 20,
+      reservedRows: 10
+    });
+  }, [rows]);
+  const [scrollOffset, setScrollOffset] = useState(0);
+  const wrappedLines = useMemo(() => {
+    const width = Math.max(20, columns - 2);
+    const wrapped = wrapAnsi(content || "", width, {
+      hard: true,
+      wordWrap: true,
+      trim: false
+    });
+    return wrapped.length > 0 ? wrapped.split("\n") : [];
+  }, [content, columns]);
+  const maxScrollOffset = useMemo(() => {
+    return Math.max(0, wrappedLines.length - viewportLines);
+  }, [wrappedLines.length, viewportLines]);
+  useEffect(() => {
+    setScrollOffset((prev) => Math.min(maxScrollOffset, Math.max(0, prev)));
+  }, [maxScrollOffset]);
+  useImperativeHandle(
+    ref,
+    () => ({
+      handleInput: (_input, key) => {
+        if (!isVisible) return false;
+        if (key.escape) {
+          onClose();
+          return true;
+        }
+        if (key.upArrow) {
+          setScrollOffset((prev) => Math.max(0, prev - 1));
+          return true;
+        }
+        if (key.downArrow) {
+          setScrollOffset((prev) => Math.min(maxScrollOffset, prev + 1));
+          return true;
+        }
+        return true;
+      }
+    }),
+    [isVisible, maxScrollOffset, onClose]
+  );
+  if (!isVisible) return null;
+  const visible = wrappedLines.slice(scrollOffset, scrollOffset + viewportLines);
+  const hint = wrappedLines.length > viewportLines ? ["\u2191\u2193 scroll", "Esc close"] : ["Esc close"];
+  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", width: columns, children: [
+    /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsx(Text, { color: "cyan", bold: true, wrap: "truncate-end", children: title }) }),
+    /* @__PURE__ */ jsx(Box, { flexDirection: "column", height: viewportLines, marginTop: 1, children: Array.from({ length: viewportLines }, (_, rowIndex) => {
+      const line = visible[rowIndex];
+      return /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsx(Text, { wrap: "truncate-end", children: line ?? " " }) }, `line-${rowIndex}`);
+    }) }),
+    /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, marginTop: 1, children: /* @__PURE__ */ jsx(HintBar, { hints: hint }) })
+  ] });
+});
+export {
+  CommandOutputOverlay
+};

package/dist/components/overlays/ContextStatsOverlay.cjs

@@ -0,0 +1,354 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var ContextStatsOverlay_exports = {};
+__export(ContextStatsOverlay_exports, {
+  default: () => ContextStatsOverlay_default
+});
+module.exports = __toCommonJS(ContextStatsOverlay_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_ink = require("ink");
+const BREAKDOWN_ITEMS = [
+  "systemPrompt",
+  "tools",
+  "messages",
+  "freeSpace",
+  "autoCompactBuffer"
+];
+const ITEM_COLORS = {
+  systemPrompt: "cyan",
+  tools: "yellow",
+  messages: "blue",
+  freeSpace: "gray",
+  autoCompactBuffer: "magenta"
+};
+function formatTokens(tokens) {
+  if (tokens >= 1e3) {
+    return `${(tokens / 1e3).toFixed(1)}k`;
+  }
+  return tokens.toLocaleString();
+}
+function createStackedBar(breakdown, maxContextTokens, thresholdPercent, totalWidth = 40) {
+  const segments = [];
+  const autoCompactBuffer = thresholdPercent > 0 && thresholdPercent < 1 ? Math.floor(maxContextTokens * (1 - thresholdPercent) / thresholdPercent) : 0;
+  const totalTokenSpace = maxContextTokens + autoCompactBuffer;
+  const usedTokens = breakdown.systemPrompt + breakdown.tools.total + breakdown.messages;
+  const freeTokens = Math.max(0, maxContextTokens - usedTokens);
+  const getWidth = (tokens) => {
+    if (tokens <= 0) return 0;
+    const proportional = Math.round(tokens / totalTokenSpace * totalWidth);
+    return Math.max(1, proportional);
+  };
+  const sysWidth = getWidth(breakdown.systemPrompt);
+  const toolsWidth = getWidth(breakdown.tools.total);
+  const msgsWidth = getWidth(breakdown.messages);
+  const freeWidth = getWidth(freeTokens);
+  const reservedWidth = getWidth(autoCompactBuffer);
+  const totalUsed = sysWidth + toolsWidth + msgsWidth + freeWidth + reservedWidth;
+  const adjustment = totalUsed - totalWidth;
+  const adjustedFreeWidth = Math.max(0, freeWidth - adjustment);
+  if (sysWidth > 0) {
+    segments.push({
+      char: "\u2588",
+      color: ITEM_COLORS.systemPrompt,
+      width: sysWidth,
+      item: "systemPrompt"
+    });
+  }
+  if (toolsWidth > 0) {
+    segments.push({ char: "\u2588", color: ITEM_COLORS.tools, width: toolsWidth, item: "tools" });
+  }
+  if (msgsWidth > 0) {
+    segments.push({
+      char: "\u2588",
+      color: ITEM_COLORS.messages,
+      width: msgsWidth,
+      item: "messages"
+    });
+  }
+  if (adjustedFreeWidth > 0) {
+    segments.push({ char: "\u2591", color: "gray", width: adjustedFreeWidth, item: "freeSpace" });
+  }
+  if (reservedWidth > 0) {
+    segments.push({
+      char: "\u2592",
+      color: ITEM_COLORS.autoCompactBuffer,
+      width: reservedWidth,
+      item: "autoCompactBuffer"
+    });
+  }
+  return segments;
+}
+const ContextStatsOverlay = (0, import_react.forwardRef)(
+  function ContextStatsOverlay2({ isVisible, onClose, agent, sessionId }, ref) {
+    const [stats, setStats] = (0, import_react.useState)(null);
+    const [isLoading, setIsLoading] = (0, import_react.useState)(false);
+    const [error, setError] = (0, import_react.useState)(null);
+    const [selectedIndex, setSelectedIndex] = (0, import_react.useState)(0);
+    const [expandedSections, setExpandedSections] = (0, import_react.useState)(/* @__PURE__ */ new Set());
+    (0, import_react.useEffect)(() => {
+      if (!isVisible) {
+        setStats(null);
+        setError(null);
+        setSelectedIndex(0);
+        setExpandedSections(/* @__PURE__ */ new Set());
+        return;
+      }
+      let cancelled = false;
+      setIsLoading(true);
+      const fetchStats = async () => {
+        try {
+          const contextStats = await agent.getContextStats(sessionId);
+          if (!cancelled) {
+            setStats(contextStats);
+            setIsLoading(false);
+          }
+        } catch (err) {
+          if (!cancelled) {
+            setError(err instanceof Error ? err.message : String(err));
+            setIsLoading(false);
+          }
+        }
+      };
+      fetchStats();
+      return () => {
+        cancelled = true;
+      };
+    }, [isVisible, agent, sessionId]);
+    (0, import_react.useImperativeHandle)(
+      ref,
+      () => ({
+        handleInput: (_input, key) => {
+          if (!isVisible) return false;
+          if (key.escape || _input === "q") {
+            onClose();
+            return true;
+          }
+          if (key.upArrow) {
+            setSelectedIndex((prev) => Math.max(0, prev - 1));
+            return true;
+          }
+          if (key.downArrow) {
+            setSelectedIndex((prev) => Math.min(BREAKDOWN_ITEMS.length - 1, prev + 1));
+            return true;
+          }
+          if (key.return) {
+            const item = BREAKDOWN_ITEMS[selectedIndex];
+            if (item === "tools") {
+              setExpandedSections((prev) => {
+                const next = new Set(prev);
+                if (next.has(item)) {
+                  next.delete(item);
+                } else {
+                  next.add(item);
+                }
+                return next;
+              });
+              return true;
+            }
+          }
+          return false;
+        }
+      }),
+      [isVisible, onClose, selectedIndex]
+    );
+    if (!isVisible) return null;
+    if (isLoading) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        import_ink.Box,
+        {
+          flexDirection: "column",
+          borderStyle: "round",
+          borderColor: "cyan",
+          paddingX: 2,
+          paddingY: 1,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "cyan", bold: true, children: "\u{1F4CA} Context Usage" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: "Loading..." })
+          ]
+        }
+      );
+    }
+    if (error) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        import_ink.Box,
+        {
+          flexDirection: "column",
+          borderStyle: "round",
+          borderColor: "red",
+          paddingX: 2,
+          paddingY: 1,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "red", bold: true, children: "Error" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: error }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { marginTop: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", dimColor: true, children: "Press Esc to close" }) })
+          ]
+        }
+      );
+    }
+    if (!stats) return null;
+    const autoCompactBuffer = stats.thresholdPercent > 0 && stats.thresholdPercent < 1 ? Math.floor(
+      stats.maxContextTokens * (1 - stats.thresholdPercent) / stats.thresholdPercent
+    ) : 0;
+    const totalTokenSpace = stats.maxContextTokens + autoCompactBuffer;
+    const pct = (tokens) => {
+      const percent = totalTokenSpace > 0 ? (tokens / totalTokenSpace * 100).toFixed(1) : "0.0";
+      return `${percent}%`;
+    };
+    const usedTokens = stats.estimatedTokens + autoCompactBuffer;
+    const tokenDisplay = `~${formatTokens(usedTokens)}`;
+    const isToolsExpanded = expandedSections.has("tools");
+    const barSegments = createStackedBar(
+      stats.breakdown,
+      stats.maxContextTokens,
+      stats.thresholdPercent
+    );
+    const renderRow = (index, item, label, tokens, isLast, expandable) => {
+      const isSelected = selectedIndex === index;
+      const prefix = isLast ? "\u2514\u2500" : "\u251C\u2500";
+      const expandIcon = expandable ? isToolsExpanded ? "\u25BC" : "\u25B6" : " ";
+      const itemColor = ITEM_COLORS[item];
+      const indicator = item === "freeSpace" ? "\u2591" : item === "autoCompactBuffer" ? "\u2592" : "\u2588";
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: isSelected ? "white" : "gray", children: [
+          prefix,
+          " "
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: itemColor, bold: isSelected, children: indicator }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: isSelected ? "white" : "gray", bold: isSelected, children: [
+          " ",
+          expandIcon,
+          " ",
+          label,
+          ": ",
+          formatTokens(tokens),
+          " (",
+          pct(tokens),
+          ")"
+        ] }),
+        isSelected && expandable && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: "gray", dimColor: true, children: [
+          " ",
+          "(Enter to ",
+          isToolsExpanded ? "collapse" : "expand",
+          ")"
+        ] })
+      ] }, item);
+    };
+    const freeTokens = Math.max(0, stats.maxContextTokens - stats.estimatedTokens);
+    const bufferPercent = Math.round((1 - stats.thresholdPercent) * 100);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_ink.Box,
+      {
+        flexDirection: "column",
+        borderStyle: "round",
+        borderColor: "cyan",
+        paddingX: 2,
+        paddingY: 1,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { marginBottom: 1, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "cyan", bold: true, children: "\u{1F4CA} Context Usage" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: "gray", children: [
+              " - ",
+              stats.modelDisplayName
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { children: barSegments.map((segment, idx) => {
+            const isHighlighted = BREAKDOWN_ITEMS[selectedIndex] === segment.item;
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "white", children: isHighlighted ? "\u25BC".repeat(segment.width) : " ".repeat(segment.width) }, idx);
+          }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { children: barSegments.map((segment, idx) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: segment.color, children: segment.char.repeat(segment.width) }, idx)) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { marginBottom: 1, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: "gray", children: [
+              tokenDisplay,
+              " / ",
+              formatTokens(totalTokenSpace),
+              " tokens"
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: " \u2022 " }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              import_ink.Text,
+              {
+                color: stats.usagePercent > 80 ? "red" : stats.usagePercent > 60 ? "yellow" : "green",
+                children: [
+                  stats.usagePercent,
+                  "% used"
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { flexDirection: "column", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "white", children: "Breakdown:" }),
+            renderRow(
+              0,
+              "systemPrompt",
+              "System prompt",
+              stats.breakdown.systemPrompt,
+              false
+            ),
+            renderRow(
+              1,
+              "tools",
+              `Tools (${stats.breakdown.tools.perTool.length})`,
+              stats.breakdown.tools.total,
+              false,
+              true
+            ),
+            isToolsExpanded && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { flexDirection: "column", marginLeft: 4, children: stats.breakdown.tools.perTool.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", dimColor: true, children: "No tools registered" }) : [...stats.breakdown.tools.perTool].sort((a, b) => b.tokens - a.tokens).map((tool, idx, arr) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: "gray", dimColor: true, children: [
+              idx === arr.length - 1 ? "\u2514\u2500" : "\u251C\u2500",
+              " ",
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "yellow", dimColor: true, children: tool.name }),
+              ": ",
+              formatTokens(tool.tokens),
+              " (",
+              pct(tool.tokens),
+              ")"
+            ] }, tool.name)) }),
+            renderRow(2, "messages", "Messages", stats.breakdown.messages, false),
+            renderRow(3, "freeSpace", "Free space", freeTokens, false),
+            renderRow(
+              4,
+              "autoCompactBuffer",
+              bufferPercent > 0 ? `Auto compact buffer (${bufferPercent}%)` : "Auto compact buffer",
+              autoCompactBuffer,
+              true
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { marginTop: 1, flexDirection: "column", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: "gray", children: [
+              "Messages: ",
+              stats.filteredMessageCount,
+              " visible (",
+              stats.messageCount,
+              " total)"
+            ] }),
+            stats.prunedToolCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: "yellow", children: [
+              "\u{1F5D1}\uFE0F ",
+              stats.prunedToolCount,
+              " tool output(s) pruned"
+            ] }),
+            stats.hasSummary && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "blue", children: "\u{1F4E6} Context has been compacted (summary present)" }),
+            stats.usagePercent > 100 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "yellow", children: "\u{1F4A1} Use /compact to manually compact, or send a message to trigger auto-compaction" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { marginTop: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", dimColor: true, children: "\u2191\u2193: navigate | Enter: expand/collapse | Esc: close" }) })
+        ]
+      }
+    );
+  }
+);
+var ContextStatsOverlay_default = ContextStatsOverlay;

package/dist/components/overlays/ContextStatsOverlay.d.ts

@@ -0,0 +1,26 @@
+/**
+ * ContextStatsOverlay Component
+ * Interactive overlay for viewing context window usage statistics
+ * Features:
+ * - Stacked colored progress bar showing breakdown
+ * - Navigate with arrow keys to highlight items
+ * - Press Enter to expand/collapse sections (e.g., Tools)
+ */
+import React from 'react';
+import type { Key } from '../../hooks/useInputOrchestrator.js';
+import type { DextoAgent } from '@dexto/core';
+interface ContextStatsOverlayProps {
+    isVisible: boolean;
+    onClose: () => void;
+    agent: DextoAgent;
+    sessionId: string;
+}
+export interface ContextStatsOverlayHandle {
+    handleInput: (input: string, key: Key) => boolean;
+}
+/**
+ * Context stats overlay with selectable breakdown items
+ */
+declare const ContextStatsOverlay: React.ForwardRefExoticComponent<ContextStatsOverlayProps & React.RefAttributes<ContextStatsOverlayHandle>>;
+export default ContextStatsOverlay;
+//# sourceMappingURL=ContextStatsOverlay.d.ts.map

package/dist/components/overlays/ContextStatsOverlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextStatsOverlay.d.ts","sourceRoot":"","sources":["../../../src/components/overlays/ContextStatsOverlay.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAA+D,MAAM,OAAO,CAAC;AAEpF,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,qCAAqC,CAAC;AAC/D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE9C,UAAU,wBAAwB;IAC9B,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,UAAU,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,yBAAyB;IACtC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC;CACrD;AA6JD;;GAEG;AACH,QAAA,MAAM,mBAAmB,4GAoWxB,CAAC;AAEF,eAAe,mBAAmB,CAAC"}