@dexto/tui 1.6.2

package/dist/components/base/BaseSelector.js

@@ -0,0 +1,151 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  useState,
+  useEffect,
+  useRef,
+  useMemo,
+  useCallback,
+  forwardRef,
+  useImperativeHandle
+} from "react";
+import { Box, Text } from "ink";
+import { useTerminalSize } from "../../hooks/useTerminalSize.js";
+import { getMaxVisibleItemsForTerminalRows } from "../../utils/overlaySizing.js";
+import { HintBar } from "../shared/HintBar.js";
+function BaseSelectorInner({
+  items,
+  isVisible,
+  isLoading = false,
+  selectedIndex,
+  onSelectIndex,
+  onSelect,
+  onClose,
+  formatItem,
+  title,
+  maxVisibleItems = 8,
+  loadingMessage = "Loading...",
+  emptyMessage = "No items found",
+  borderColor = "cyan",
+  onTab,
+  supportsTab = false,
+  instructionsOverride
+}, ref) {
+  const { rows: terminalRows } = useTerminalSize();
+  const viewportItems = useMemo(() => {
+    return getMaxVisibleItemsForTerminalRows({
+      rows: terminalRows,
+      hardCap: maxVisibleItems,
+      reservedRows: 14
+    });
+  }, [terminalRows, maxVisibleItems]);
+  const [scrollOffsetState, setScrollOffset] = useState(0);
+  const selectedIndexRef = useRef(selectedIndex);
+  const prevItemsLengthRef = useRef(items.length);
+  selectedIndexRef.current = selectedIndex;
+  const scrollOffset = useMemo(() => {
+    const itemsChanged = items.length !== prevItemsLengthRef.current;
+    if (itemsChanged && items.length <= viewportItems) {
+      return 0;
+    }
+    let offset = scrollOffsetState;
+    if (selectedIndex < offset) {
+      offset = selectedIndex;
+    } else if (selectedIndex >= offset + viewportItems) {
+      offset = Math.max(0, selectedIndex - viewportItems + 1);
+    }
+    const maxOffset = Math.max(0, items.length - viewportItems);
+    return Math.min(maxOffset, Math.max(0, offset));
+  }, [selectedIndex, items.length, viewportItems, scrollOffsetState]);
+  useEffect(() => {
+    prevItemsLengthRef.current = items.length;
+  }, [items.length]);
+  useEffect(() => {
+    if (scrollOffset !== scrollOffsetState) {
+      setScrollOffset(scrollOffset);
+    }
+  }, [scrollOffset, scrollOffsetState]);
+  const handleSelectIndex = useCallback(
+    (newIndex) => {
+      selectedIndexRef.current = newIndex;
+      onSelectIndex(newIndex);
+    },
+    [onSelectIndex]
+  );
+  const visibleItems = useMemo(() => {
+    return items.slice(scrollOffset, scrollOffset + viewportItems);
+  }, [items, scrollOffset, viewportItems]);
+  useImperativeHandle(
+    ref,
+    () => ({
+      handleInput: (_input, key) => {
+        if (!isVisible) return false;
+        if (key.escape) {
+          onClose();
+          return true;
+        }
+        const itemsLength = items.length;
+        if (isLoading || itemsLength === 0) return true;
+        if (key.upArrow) {
+          const nextIndex = (selectedIndexRef.current - 1 + itemsLength) % itemsLength;
+          handleSelectIndex(nextIndex);
+          return true;
+        }
+        if (key.downArrow) {
+          const nextIndex = (selectedIndexRef.current + 1) % itemsLength;
+          handleSelectIndex(nextIndex);
+          return true;
+        }
+        if (key.tab && onTab) {
+          const item = items[selectedIndexRef.current];
+          if (item !== void 0) {
+            onTab(item);
+            return true;
+          }
+        }
+        if (key.return && itemsLength > 0) {
+          const item = items[selectedIndexRef.current];
+          if (item !== void 0) {
+            onSelect(item);
+            return true;
+          }
+        }
+        return false;
+      }
+    }),
+    [isVisible, isLoading, items, handleSelectIndex, onClose, onSelect, onTab]
+  );
+  if (!isVisible) return null;
+  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsx(Text, { color: borderColor, bold: true, children: title }) }),
+    /* @__PURE__ */ jsx(Box, { flexDirection: "column", height: viewportItems, marginTop: 1, children: isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsx(Text, { color: "gray", children: loadingMessage }) }),
+      Array.from({ length: Math.max(0, viewportItems - 1) }, (_, index) => /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsx(Text, { children: " " }) }, `loading-spacer-${index}`))
+    ] }) : items.length === 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsx(Text, { color: "gray", children: emptyMessage }) }),
+      Array.from({ length: Math.max(0, viewportItems - 1) }, (_, index) => /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsx(Text, { children: " " }) }, `empty-spacer-${index}`))
+    ] }) : Array.from({ length: viewportItems }, (_, rowIndex) => {
+      const item = visibleItems[rowIndex];
+      if (item === void 0) {
+        return /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsx(Text, { children: " " }) }, `item-empty-${rowIndex}`);
+      }
+      const actualIndex = scrollOffset + rowIndex;
+      const isSelected = actualIndex === selectedIndex;
+      return /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: formatItem(item, isSelected) }, actualIndex);
+    }) }),
+    /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, marginTop: 1, children: instructionsOverride ? /* @__PURE__ */ jsx(Text, { color: "gray", wrap: "truncate-end", children: instructionsOverride }) : /* @__PURE__ */ jsx(
+      HintBar,
+      {
+        hints: [
+          "\u2191\u2193 navigate",
+          supportsTab ? "Tab load" : "",
+          "Enter select",
+          "Esc close"
+        ]
+      }
+    ) })
+  ] });
+}
+const BaseSelector = forwardRef(BaseSelectorInner);
+export {
+  BaseSelector
+};

package/dist/components/base/index.cjs

@@ -0,0 +1,31 @@
+"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 base_exports = {};
+__export(base_exports, {
+  BaseAutocomplete: () => import_BaseAutocomplete.BaseAutocomplete,
+  BaseSelector: () => import_BaseSelector.BaseSelector
+});
+module.exports = __toCommonJS(base_exports);
+var import_BaseSelector = require("./BaseSelector.js");
+var import_BaseAutocomplete = require("./BaseAutocomplete.js");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BaseAutocomplete,
+  BaseSelector
+});

package/dist/components/base/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Base components module exports
+ */
+export { BaseSelector, type BaseSelectorProps } from './BaseSelector.js';
+export { BaseAutocomplete, type BaseAutocompleteProps } from './BaseAutocomplete.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/base/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/base/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACzE,OAAO,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/components/base/index.js

@@ -0,0 +1,6 @@
+import { BaseSelector } from "./BaseSelector.js";
+import { BaseAutocomplete } from "./BaseAutocomplete.js";
+export {
+  BaseAutocomplete,
+  BaseSelector
+};

package/dist/components/chat/ChatView.cjs

@@ -0,0 +1,51 @@
+"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 ChatView_exports = {};
+__export(ChatView_exports, {
+  ChatView: () => ChatView
+});
+module.exports = __toCommonJS(ChatView_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ink = require("ink");
+var import_Header = require("./Header.js");
+var import_MessageList = require("./MessageList.js");
+function ChatView({
+  messages,
+  modelName,
+  sessionId,
+  hasActiveSession,
+  startupInfo
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { flexDirection: "column", flexGrow: 1, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_Header.Header,
+      {
+        modelName,
+        sessionId,
+        hasActiveSession,
+        startupInfo
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MessageList.MessageList, { messages })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ChatView
+});

package/dist/components/chat/ChatView.d.ts

@@ -0,0 +1,19 @@
+/**
+ * ChatView Component
+ * Main chat display area combining header and messages
+ */
+import type { Message, StartupInfo } from '../../state/types.js';
+interface ChatViewProps {
+    messages: Message[];
+    modelName: string;
+    sessionId?: string | undefined;
+    hasActiveSession: boolean;
+    startupInfo: StartupInfo;
+}
+/**
+ * Pure presentational component for chat area
+ * Combines header and message list
+ */
+export declare function ChatView({ messages, modelName, sessionId, hasActiveSession, startupInfo, }: ChatViewProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ChatView.d.ts.map

package/dist/components/chat/ChatView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatView.d.ts","sourceRoot":"","sources":["../../../src/components/chat/ChatView.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAMH,OAAO,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEjE,UAAU,aAAa;IACnB,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,WAAW,EAAE,WAAW,CAAC;CAC5B;AAED;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,EACrB,QAAQ,EACR,SAAS,EACT,SAAS,EACT,gBAAgB,EAChB,WAAW,GACd,EAAE,aAAa,2CAYf"}

package/dist/components/chat/ChatView.js

@@ -0,0 +1,27 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Box } from "ink";
+import { Header } from "./Header.js";
+import { MessageList } from "./MessageList.js";
+function ChatView({
+  messages,
+  modelName,
+  sessionId,
+  hasActiveSession,
+  startupInfo
+}) {
+  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [
+    /* @__PURE__ */ jsx(
+      Header,
+      {
+        modelName,
+        sessionId,
+        hasActiveSession,
+        startupInfo
+      }
+    ),
+    /* @__PURE__ */ jsx(MessageList, { messages })
+  ] });
+}
+export {
+  ChatView
+};

package/dist/components/chat/Footer.cjs

@@ -0,0 +1,32 @@
+"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 Footer_exports = {};
+__export(Footer_exports, {
+  Footer: () => Footer
+});
+module.exports = __toCommonJS(Footer_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ink = require("ink");
+function Footer() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { borderStyle: "single", borderColor: "gray", paddingX: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: "Shift+Enter/Ctrl+J: newline \u2022 Ctrl+W: del word \u2022 Ctrl+U: del line \u2022 Ctrl+C: exit" }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Footer
+});

package/dist/components/chat/Footer.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Footer Component
+ * Displays keyboard shortcuts and help information
+ */
+/**
+ * Pure presentational component for CLI footer
+ */
+export declare function Footer(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Footer.d.ts.map

package/dist/components/chat/Footer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Footer.d.ts","sourceRoot":"","sources":["../../../src/components/chat/Footer.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAKH;;GAEG;AACH,wBAAgB,MAAM,4CAQrB"}

package/dist/components/chat/Footer.js

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+function Footer() {
+  return /* @__PURE__ */ jsx(Box, { borderStyle: "single", borderColor: "gray", paddingX: 1, children: /* @__PURE__ */ jsx(Text, { color: "gray", children: "Shift+Enter/Ctrl+J: newline \u2022 Ctrl+W: del word \u2022 Ctrl+U: del line \u2022 Ctrl+C: exit" }) });
+}
+export {
+  Footer
+};

package/dist/components/chat/Header.cjs

@@ -0,0 +1,86 @@
+"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 Header_exports = {};
+__export(Header_exports, {
+  Header: () => Header
+});
+module.exports = __toCommonJS(Header_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ink = require("ink");
+var import_useTerminalSize = require("../../hooks/useTerminalSize.js");
+function Header({ modelName, sessionId, hasActiveSession, startupInfo }) {
+  const { columns } = (0, import_useTerminalSize.useTerminalSize)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_ink.Box,
+    {
+      borderStyle: "single",
+      borderColor: "gray",
+      paddingX: 1,
+      flexDirection: "column",
+      flexShrink: 0,
+      width: columns,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { marginTop: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "greenBright", children: `\u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2557  \u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2588\u2557
+\u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2554\u2550\u2550\u2550\u2550\u255D\u255A\u2588\u2588\u2557\u2588\u2588\u2554\u255D\u255A\u2550\u2550\u2588\u2588\u2554\u2550\u2550\u255D\u2588\u2588\u2554\u2550\u2550\u2550\u2588\u2588\u2557
+\u2588\u2588\u2551  \u2588\u2588\u2551\u2588\u2588\u2588\u2588\u2588\u2557   \u255A\u2588\u2588\u2588\u2554\u255D    \u2588\u2588\u2551   \u2588\u2588\u2551   \u2588\u2588\u2551
+\u2588\u2588\u2551  \u2588\u2588\u2551\u2588\u2588\u2554\u2550\u2550\u255D   \u2588\u2588\u2554\u2588\u2588\u2557    \u2588\u2588\u2551   \u2588\u2588\u2551   \u2588\u2588\u2551
+\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2554\u255D \u2588\u2588\u2557   \u2588\u2588\u2551   \u255A\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D
+\u255A\u2550\u2550\u2550\u2550\u2550\u255D \u255A\u2550\u2550\u2550\u2550\u2550\u2550\u255D\u255A\u2550\u255D  \u255A\u2550\u255D   \u255A\u2550\u255D    \u255A\u2550\u2550\u2550\u2550\u2550\u255D` }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { marginTop: 1, flexDirection: "row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: "Model: " }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "white", children: modelName }),
+          hasActiveSession && sessionId && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: " \u2022 Session: " }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "white", children: sessionId.slice(0, 8) })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { flexDirection: "row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: "Servers: " }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "white", children: startupInfo.connectedServers.count }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: " \u2022 Tools: " }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "white", children: startupInfo.toolCount })
+        ] }),
+        startupInfo.failedConnections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { flexDirection: "row", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: "yellowBright", children: [
+          "\u26A0\uFE0F Failed: ",
+          startupInfo.failedConnections.join(", ")
+        ] }) }),
+        startupInfo.updateInfo && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { marginTop: 1, flexDirection: "row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: "yellow", children: [
+            "\u2B06\uFE0F Update available: ",
+            startupInfo.updateInfo.current,
+            " \u2192",
+            " ",
+            startupInfo.updateInfo.latest
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: " \u2022 Run: " }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "cyan", children: startupInfo.updateInfo.updateCommand })
+        ] }),
+        startupInfo.needsAgentSync && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { marginTop: startupInfo.updateInfo ? 0 : 1, flexDirection: "row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "yellow", children: "\u{1F504} Agent configs have updates available. Run: " }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "cyan", children: "dexto sync-agents" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { marginBottom: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { children: " " }) })
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Header
+});

package/dist/components/chat/Header.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Header Component
+ * Displays CLI branding and session information
+ */
+import type { StartupInfo } from '../../state/types.js';
+interface HeaderProps {
+    modelName: string;
+    sessionId?: string | undefined;
+    hasActiveSession: boolean;
+    startupInfo: StartupInfo;
+}
+/**
+ * Pure presentational component for CLI header
+ * Automatically adjusts width to terminal size
+ */
+export declare function Header({ modelName, sessionId, hasActiveSession, startupInfo }: HeaderProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Header.d.ts.map

package/dist/components/chat/Header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/components/chat/Header.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAGxD,UAAU,WAAW;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,WAAW,EAAE,WAAW,CAAC;CAC5B;AAED;;;GAGG;AACH,wBAAgB,MAAM,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,gBAAgB,EAAE,WAAW,EAAE,EAAE,WAAW,2CA6E1F"}

package/dist/components/chat/Header.js

@@ -0,0 +1,62 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import { useTerminalSize } from "../../hooks/useTerminalSize.js";
+function Header({ modelName, sessionId, hasActiveSession, startupInfo }) {
+  const { columns } = useTerminalSize();
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      borderStyle: "single",
+      borderColor: "gray",
+      paddingX: 1,
+      flexDirection: "column",
+      flexShrink: 0,
+      width: columns,
+      children: [
+        /* @__PURE__ */ jsx(Box, { marginTop: 1, children: /* @__PURE__ */ jsx(Text, { color: "greenBright", children: `\u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2557  \u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2588\u2557
+\u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2554\u2550\u2550\u2550\u2550\u255D\u255A\u2588\u2588\u2557\u2588\u2588\u2554\u255D\u255A\u2550\u2550\u2588\u2588\u2554\u2550\u2550\u255D\u2588\u2588\u2554\u2550\u2550\u2550\u2588\u2588\u2557
+\u2588\u2588\u2551  \u2588\u2588\u2551\u2588\u2588\u2588\u2588\u2588\u2557   \u255A\u2588\u2588\u2588\u2554\u255D    \u2588\u2588\u2551   \u2588\u2588\u2551   \u2588\u2588\u2551
+\u2588\u2588\u2551  \u2588\u2588\u2551\u2588\u2588\u2554\u2550\u2550\u255D   \u2588\u2588\u2554\u2588\u2588\u2557    \u2588\u2588\u2551   \u2588\u2588\u2551   \u2588\u2588\u2551
+\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2554\u255D \u2588\u2588\u2557   \u2588\u2588\u2551   \u255A\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D
+\u255A\u2550\u2550\u2550\u2550\u2550\u255D \u255A\u2550\u2550\u2550\u2550\u2550\u2550\u255D\u255A\u2550\u255D  \u255A\u2550\u255D   \u255A\u2550\u255D    \u255A\u2550\u2550\u2550\u2550\u2550\u255D` }) }),
+        /* @__PURE__ */ jsxs(Box, { marginTop: 1, flexDirection: "row", children: [
+          /* @__PURE__ */ jsx(Text, { color: "gray", children: "Model: " }),
+          /* @__PURE__ */ jsx(Text, { color: "white", children: modelName }),
+          hasActiveSession && sessionId && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Text, { color: "gray", children: " \u2022 Session: " }),
+            /* @__PURE__ */ jsx(Text, { color: "white", children: sessionId.slice(0, 8) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(Box, { flexDirection: "row", children: [
+          /* @__PURE__ */ jsx(Text, { color: "gray", children: "Servers: " }),
+          /* @__PURE__ */ jsx(Text, { color: "white", children: startupInfo.connectedServers.count }),
+          /* @__PURE__ */ jsx(Text, { color: "gray", children: " \u2022 Tools: " }),
+          /* @__PURE__ */ jsx(Text, { color: "white", children: startupInfo.toolCount })
+        ] }),
+        startupInfo.failedConnections.length > 0 && /* @__PURE__ */ jsx(Box, { flexDirection: "row", children: /* @__PURE__ */ jsxs(Text, { color: "yellowBright", children: [
+          "\u26A0\uFE0F Failed: ",
+          startupInfo.failedConnections.join(", ")
+        ] }) }),
+        startupInfo.updateInfo && /* @__PURE__ */ jsxs(Box, { marginTop: 1, flexDirection: "row", children: [
+          /* @__PURE__ */ jsxs(Text, { color: "yellow", children: [
+            "\u2B06\uFE0F Update available: ",
+            startupInfo.updateInfo.current,
+            " \u2192",
+            " ",
+            startupInfo.updateInfo.latest
+          ] }),
+          /* @__PURE__ */ jsx(Text, { color: "gray", children: " \u2022 Run: " }),
+          /* @__PURE__ */ jsx(Text, { color: "cyan", children: startupInfo.updateInfo.updateCommand })
+        ] }),
+        startupInfo.needsAgentSync && /* @__PURE__ */ jsxs(Box, { marginTop: startupInfo.updateInfo ? 0 : 1, flexDirection: "row", children: [
+          /* @__PURE__ */ jsx(Text, { color: "yellow", children: "\u{1F504} Agent configs have updates available. Run: " }),
+          /* @__PURE__ */ jsx(Text, { color: "cyan", children: "dexto sync-agents" })
+        ] }),
+        /* @__PURE__ */ jsx(Box, { marginBottom: 1, children: /* @__PURE__ */ jsx(Text, { children: " " }) })
+      ]
+    }
+  );
+}
+export {
+  Header
+};