@dexto/tui 1.6.2

package/dist/components/modes/StaticCLI.js

@@ -0,0 +1,279 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState, useEffect, useRef, useCallback } from "react";
+import { Box, Static, Text, useStdout } from "ink";
+const CLEAR_TERMINAL = "\x1B[2J\x1B[3J\x1B[H";
+import { useCLIState } from "../../hooks/useCLIState.js";
+import { useTerminalSize } from "../../hooks/useTerminalSize.js";
+import { useGitBranch } from "../../hooks/useGitBranch.js";
+import { Header } from "../chat/Header.js";
+import { MessageItem } from "../chat/MessageItem.js";
+import { QueuedMessagesDisplay } from "../chat/QueuedMessagesDisplay.js";
+import { StatusBar } from "../StatusBar.js";
+import { HistorySearchBar } from "../HistorySearchBar.js";
+import { Footer } from "../Footer.js";
+import { TodoPanel } from "../TodoPanel.js";
+import { BackgroundTasksPanel } from "../BackgroundTasksPanel.js";
+import { InputContainer } from "../../containers/InputContainer.js";
+import { OverlayContainer } from "../../containers/OverlayContainer.js";
+import { shouldHideStatusChrome } from "../../utils/overlayPresentation.js";
+function StaticCLI({
+  agent,
+  initialSessionId,
+  initialPrompt,
+  startupInfo,
+  configFilePath,
+  initialBypassPermissions = false,
+  useStreaming = true
+}) {
+  const {
+    messages,
+    setMessages,
+    pendingMessages,
+    setPendingMessages,
+    dequeuedBuffer,
+    setDequeuedBuffer,
+    queuedMessages,
+    setQueuedMessages,
+    todos,
+    setTodos,
+    ui,
+    setUi,
+    input,
+    setInput,
+    session,
+    setSession,
+    approval,
+    setApproval,
+    approvalQueue,
+    setApprovalQueue,
+    inputService,
+    buffer,
+    overlayContainerRef,
+    visibleMessages
+  } = useCLIState({
+    agent,
+    initialSessionId,
+    startupInfo,
+    initialBypassPermissions
+    // No keyboard scroll handler - let terminal handle scrollback
+  });
+  const branchName = useGitBranch();
+  const { write: stdoutWrite } = useStdout();
+  const { columns: terminalWidth } = useTerminalSize();
+  const [staticRemountKey, setStaticRemountKey] = useState(0);
+  const isInitialMount = useRef(true);
+  const isInitialShowReasoningMount = useRef(true);
+  const inputContainerRef = useRef(null);
+  const historySearchHasMatch = useMemo(() => {
+    if (!ui.historySearch.isActive || !ui.historySearch.query) return false;
+    const query = ui.historySearch.query.toLowerCase();
+    return input.history.some((item) => item.toLowerCase().includes(query));
+  }, [ui.historySearch.isActive, ui.historySearch.query, input.history]);
+  const handleSubmitPromptCommand = useCallback(
+    async (commandText) => {
+      try {
+        await inputContainerRef.current?.submit(commandText);
+      } catch (error) {
+        agent.logger.error(
+          `StaticCLI.handleSubmitPromptCommand failed: ${error instanceof Error ? error.message : String(error)}`
+        );
+      }
+    },
+    [agent]
+  );
+  const refreshStatic = useCallback(() => {
+    stdoutWrite(CLEAR_TERMINAL);
+    setStaticRemountKey((prev) => prev + 1);
+  }, [stdoutWrite]);
+  useEffect(() => {
+    if (isInitialMount.current) {
+      isInitialMount.current = false;
+      return;
+    }
+    const handler = setTimeout(() => {
+      refreshStatic();
+    }, 300);
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [terminalWidth, refreshStatic]);
+  useEffect(() => {
+    if (isInitialShowReasoningMount.current) {
+      isInitialShowReasoningMount.current = false;
+      return;
+    }
+    refreshStatic();
+  }, [ui.showReasoning, refreshStatic]);
+  const staticItems = useMemo(() => {
+    const items = [
+      /* @__PURE__ */ jsx(
+        Header,
+        {
+          modelName: session.modelName,
+          sessionId: session.id || void 0,
+          hasActiveSession: session.hasActiveSession,
+          startupInfo
+        },
+        "header"
+      ),
+      ...visibleMessages.map((msg) => /* @__PURE__ */ jsx(
+        MessageItem,
+        {
+          message: msg,
+          terminalWidth,
+          showReasoning: ui.showReasoning
+        },
+        msg.id
+      ))
+    ];
+    return items;
+  }, [
+    visibleMessages,
+    session.modelName,
+    session.id,
+    session.hasActiveSession,
+    startupInfo,
+    terminalWidth,
+    ui.showReasoning
+  ]);
+  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", width: terminalWidth, children: [
+    /* @__PURE__ */ jsx(Static, { items: staticItems, children: (item) => item }, staticRemountKey),
+    pendingMessages.map((message) => /* @__PURE__ */ jsx(
+      MessageItem,
+      {
+        message,
+        terminalWidth,
+        showReasoning: ui.showReasoning
+      },
+      message.id
+    )),
+    dequeuedBuffer.map((message) => /* @__PURE__ */ jsx(
+      MessageItem,
+      {
+        message,
+        terminalWidth,
+        showReasoning: ui.showReasoning
+      },
+      message.id
+    )),
+    /* @__PURE__ */ jsxs(Box, { flexDirection: "column", flexShrink: 0, children: [
+      (() => {
+        const hideChrome = shouldHideStatusChrome(ui.activeOverlay, approval);
+        if (hideChrome) return null;
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            StatusBar,
+            {
+              agent,
+              isProcessing: ui.isProcessing,
+              isThinking: ui.isThinking,
+              isCompacting: ui.isCompacting,
+              approvalQueueCount: approvalQueue.length,
+              copyModeEnabled: ui.copyModeEnabled,
+              isAwaitingApproval: approval !== null,
+              todoExpanded: ui.todoExpanded,
+              hasTodos: todos.some((t) => t.status !== "completed"),
+              planModeActive: ui.planModeActive,
+              autoApproveEdits: ui.autoApproveEdits,
+              backgroundTasksRunning: ui.backgroundTasksRunning
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            BackgroundTasksPanel,
+            {
+              tasks: ui.backgroundTasks,
+              isExpanded: ui.backgroundTasksExpanded,
+              isProcessing: ui.isProcessing
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            TodoPanel,
+            {
+              todos,
+              isExpanded: ui.todoExpanded,
+              isProcessing: ui.isProcessing
+            }
+          ),
+          /* @__PURE__ */ jsx(QueuedMessagesDisplay, { messages: queuedMessages })
+        ] });
+      })(),
+      /* @__PURE__ */ jsx(
+        InputContainer,
+        {
+          ref: inputContainerRef,
+          buffer,
+          input,
+          ui,
+          session,
+          initialPrompt,
+          approval,
+          queuedMessages,
+          setInput,
+          setUi,
+          setSession,
+          setMessages,
+          setPendingMessages,
+          setDequeuedBuffer,
+          setQueuedMessages,
+          setApproval,
+          setApprovalQueue,
+          setTodos,
+          agent,
+          inputService,
+          useStreaming,
+          configFilePath
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        OverlayContainer,
+        {
+          ref: overlayContainerRef,
+          ui,
+          input,
+          session,
+          approval,
+          setInput,
+          setUi,
+          setSession,
+          setMessages,
+          setApproval,
+          setApprovalQueue,
+          agent,
+          inputService,
+          buffer,
+          refreshStatic,
+          onSubmitPromptCommand: handleSubmitPromptCommand,
+          configFilePath
+        }
+      ),
+      !shouldHideStatusChrome(ui.activeOverlay, approval) && ui.exitWarningShown && /* @__PURE__ */ jsxs(Box, { paddingX: 1, children: [
+        /* @__PURE__ */ jsx(Text, { color: "yellowBright", bold: true, children: "\u26A0 Press Ctrl+C again to exit" }),
+        /* @__PURE__ */ jsx(Text, { color: "gray", children: " (or press any key to cancel)" })
+      ] }),
+      !shouldHideStatusChrome(ui.activeOverlay, approval) && /* @__PURE__ */ jsx(
+        Footer,
+        {
+          agent,
+          sessionId: session.id,
+          modelName: session.modelName,
+          cwd: process.cwd(),
+          ...branchName ? { branchName } : {},
+          autoApproveEdits: ui.autoApproveEdits,
+          bypassPermissions: ui.bypassPermissions,
+          planModeActive: ui.planModeActive,
+          isShellMode: buffer.text.startsWith("!")
+        }
+      ),
+      !shouldHideStatusChrome(ui.activeOverlay, approval) && ui.historySearch.isActive && /* @__PURE__ */ jsx(
+        HistorySearchBar,
+        {
+          query: ui.historySearch.query,
+          hasMatch: historySearchHasMatch
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  StaticCLI
+};

package/dist/components/modes/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 modes_exports = {};
+__export(modes_exports, {
+  AlternateBufferCLI: () => import_AlternateBufferCLI.AlternateBufferCLI,
+  StaticCLI: () => import_StaticCLI.StaticCLI
+});
+module.exports = __toCommonJS(modes_exports);
+var import_AlternateBufferCLI = require("./AlternateBufferCLI.js");
+var import_StaticCLI = require("./StaticCLI.js");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AlternateBufferCLI,
+  StaticCLI
+});

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

@@ -0,0 +1,10 @@
+/**
+ * CLI Rendering Modes
+ *
+ * Two rendering modes are available:
+ * - AlternateBufferCLI: VirtualizedList with mouse scroll, keyboard scroll, copy mode
+ * - StaticCLI: Static pattern with native terminal scrollback and selection
+ */
+export { AlternateBufferCLI } from './AlternateBufferCLI.js';
+export { StaticCLI } from './StaticCLI.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/modes/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/components/modes/index.js

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

package/dist/components/overlays/ApiKeyInput.cjs

@@ -0,0 +1,131 @@
+"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 ApiKeyInput_exports = {};
+__export(ApiKeyInput_exports, {
+  default: () => ApiKeyInput_default
+});
+module.exports = __toCommonJS(ApiKeyInput_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_ink = require("ink");
+var import_agent_management = require("@dexto/agent-management");
+var import_host = require("../../host/index.js");
+var import_host2 = require("../../host/index.js");
+const ApiKeyInput = (0, import_react.forwardRef)(function ApiKeyInput2({ isVisible, provider, onSaved, onClose }, ref) {
+  const [apiKey, setApiKey] = (0, import_react.useState)("");
+  const [error, setError] = (0, import_react.useState)(null);
+  const [isSaving, setIsSaving] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    if (isVisible) {
+      setApiKey("");
+      setError(null);
+      setIsSaving(false);
+    }
+  }, [isVisible, provider]);
+  const handleSubmit = (0, import_react.useCallback)(async () => {
+    const trimmedKey = apiKey.trim();
+    if (!trimmedKey) {
+      setError("API key is required");
+      return;
+    }
+    if (!(0, import_host2.isValidApiKeyFormat)(trimmedKey, provider)) {
+      setError(`Invalid ${(0, import_host2.getProviderDisplayName)(provider)} API key format`);
+      return;
+    }
+    setError(null);
+    setIsSaving(true);
+    try {
+      const meta = await (0, import_agent_management.saveProviderApiKey)(provider, trimmedKey, process.cwd());
+      await (0, import_host.applyLayeredEnvironmentLoading)();
+      onSaved({ provider, envVar: meta.envVar });
+    } catch (err) {
+      setError(`Failed to save: ${err instanceof Error ? err.message : String(err)}`);
+      setIsSaving(false);
+    }
+  }, [apiKey, provider, onSaved]);
+  (0, import_react.useImperativeHandle)(
+    ref,
+    () => ({
+      handleInput: (input, key) => {
+        if (!isVisible || isSaving) return false;
+        if (key.escape) {
+          onClose();
+          return true;
+        }
+        if (key.return) {
+          void handleSubmit();
+          return true;
+        }
+        if (key.backspace || key.delete) {
+          setApiKey((prev) => prev.slice(0, -1));
+          setError(null);
+          return true;
+        }
+        if (input && !key.ctrl && !key.meta) {
+          setApiKey((prev) => prev + input);
+          setError(null);
+          return true;
+        }
+        return false;
+      }
+    }),
+    [isVisible, isSaving, onClose, handleSubmit]
+  );
+  if (!isVisible) return null;
+  const providerName = (0, import_host2.getProviderDisplayName)(provider);
+  const envVar = (0, import_agent_management.getPrimaryApiKeyEnvVar)(provider);
+  const instructions = (0, import_host2.getProviderInstructions)(provider);
+  const maskedKey = apiKey.length > 8 ? `${apiKey.slice(0, 4)}${"*".repeat(Math.min(apiKey.length - 8, 20))}${apiKey.slice(-4)}` : "*".repeat(apiKey.length);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_ink.Box,
+    {
+      flexDirection: "column",
+      borderStyle: "round",
+      borderColor: "cyan",
+      paddingX: 1,
+      marginTop: 1,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { marginBottom: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { bold: true, color: "cyan", children: [
+          "API Key Required for ",
+          providerName
+        ] }) }),
+        instructions && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { flexDirection: "column", marginBottom: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: instructions.content }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { marginBottom: 1, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: "This key will be saved to " }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "yellowBright", children: envVar }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: " in your .env file" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { flexDirection: "column", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { bold: true, children: [
+          "Enter your ",
+          providerName,
+          " API key:"
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { marginTop: 1, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "cyan", children: "> " }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { children: maskedKey }),
+          !isSaving && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "cyan", children: "_" })
+        ] }),
+        isSaving && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { marginTop: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "yellowBright", children: "Saving API key..." }) }),
+        error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { marginTop: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "red", 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", children: "Enter to save \u2022 Esc to cancel" }) })
+      ]
+    }
+  );
+});
+var ApiKeyInput_default = ApiKeyInput;

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

@@ -0,0 +1,26 @@
+/**
+ * ApiKeyInput Component
+ * Interactive overlay for entering API keys when switching to a provider without one
+ */
+import React from 'react';
+import type { Key } from '../../hooks/useInputOrchestrator.js';
+import type { LLMProvider } from '@dexto/core';
+export interface ApiKeyInputProps {
+    isVisible: boolean;
+    provider: LLMProvider;
+    onSaved: (meta: {
+        provider: LLMProvider;
+        envVar: string;
+    }) => void;
+    onClose: () => void;
+}
+export interface ApiKeyInputHandle {
+    handleInput: (input: string, key: Key) => boolean;
+}
+/**
+ * API key input overlay - prompts user for API key when switching to a provider
+ * that doesn't have a configured key
+ */
+declare const ApiKeyInput: React.ForwardRefExoticComponent<ApiKeyInputProps & React.RefAttributes<ApiKeyInputHandle>>;
+export default ApiKeyInput;
+//# sourceMappingURL=ApiKeyInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ApiKeyInput.d.ts","sourceRoot":"","sources":["../../../src/components/overlays/ApiKeyInput.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAA4E,MAAM,OAAO,CAAC;AAEjG,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,qCAAqC,CAAC;AAC/D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAS/C,MAAM,WAAW,gBAAgB;IAC7B,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,WAAW,CAAC;IACtB,OAAO,EAAE,CAAC,IAAI,EAAE;QAAE,QAAQ,EAAE,WAAW,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACnE,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,MAAM,WAAW,iBAAiB;IAC9B,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC;CACrD;AAED;;;GAGG;AACH,QAAA,MAAM,WAAW,4FA+Jf,CAAC;AAEH,eAAe,WAAW,CAAC"}

package/dist/components/overlays/ApiKeyInput.js

@@ -0,0 +1,115 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect, forwardRef, useImperativeHandle, useCallback } from "react";
+import { Box, Text } from "ink";
+import { getPrimaryApiKeyEnvVar, saveProviderApiKey } from "@dexto/agent-management";
+import { applyLayeredEnvironmentLoading } from "../../host/index.js";
+import {
+  getProviderDisplayName,
+  isValidApiKeyFormat,
+  getProviderInstructions
+} from "../../host/index.js";
+const ApiKeyInput = forwardRef(function ApiKeyInput2({ isVisible, provider, onSaved, onClose }, ref) {
+  const [apiKey, setApiKey] = useState("");
+  const [error, setError] = useState(null);
+  const [isSaving, setIsSaving] = useState(false);
+  useEffect(() => {
+    if (isVisible) {
+      setApiKey("");
+      setError(null);
+      setIsSaving(false);
+    }
+  }, [isVisible, provider]);
+  const handleSubmit = useCallback(async () => {
+    const trimmedKey = apiKey.trim();
+    if (!trimmedKey) {
+      setError("API key is required");
+      return;
+    }
+    if (!isValidApiKeyFormat(trimmedKey, provider)) {
+      setError(`Invalid ${getProviderDisplayName(provider)} API key format`);
+      return;
+    }
+    setError(null);
+    setIsSaving(true);
+    try {
+      const meta = await saveProviderApiKey(provider, trimmedKey, process.cwd());
+      await applyLayeredEnvironmentLoading();
+      onSaved({ provider, envVar: meta.envVar });
+    } catch (err) {
+      setError(`Failed to save: ${err instanceof Error ? err.message : String(err)}`);
+      setIsSaving(false);
+    }
+  }, [apiKey, provider, onSaved]);
+  useImperativeHandle(
+    ref,
+    () => ({
+      handleInput: (input, key) => {
+        if (!isVisible || isSaving) return false;
+        if (key.escape) {
+          onClose();
+          return true;
+        }
+        if (key.return) {
+          void handleSubmit();
+          return true;
+        }
+        if (key.backspace || key.delete) {
+          setApiKey((prev) => prev.slice(0, -1));
+          setError(null);
+          return true;
+        }
+        if (input && !key.ctrl && !key.meta) {
+          setApiKey((prev) => prev + input);
+          setError(null);
+          return true;
+        }
+        return false;
+      }
+    }),
+    [isVisible, isSaving, onClose, handleSubmit]
+  );
+  if (!isVisible) return null;
+  const providerName = getProviderDisplayName(provider);
+  const envVar = getPrimaryApiKeyEnvVar(provider);
+  const instructions = getProviderInstructions(provider);
+  const maskedKey = apiKey.length > 8 ? `${apiKey.slice(0, 4)}${"*".repeat(Math.min(apiKey.length - 8, 20))}${apiKey.slice(-4)}` : "*".repeat(apiKey.length);
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      flexDirection: "column",
+      borderStyle: "round",
+      borderColor: "cyan",
+      paddingX: 1,
+      marginTop: 1,
+      children: [
+        /* @__PURE__ */ jsx(Box, { marginBottom: 1, children: /* @__PURE__ */ jsxs(Text, { bold: true, color: "cyan", children: [
+          "API Key Required for ",
+          providerName
+        ] }) }),
+        instructions && /* @__PURE__ */ jsx(Box, { flexDirection: "column", marginBottom: 1, children: /* @__PURE__ */ jsx(Text, { color: "gray", children: instructions.content }) }),
+        /* @__PURE__ */ jsxs(Box, { marginBottom: 1, children: [
+          /* @__PURE__ */ jsx(Text, { color: "gray", children: "This key will be saved to " }),
+          /* @__PURE__ */ jsx(Text, { color: "yellowBright", children: envVar }),
+          /* @__PURE__ */ jsx(Text, { color: "gray", children: " in your .env file" })
+        ] }),
+        /* @__PURE__ */ jsx(Box, { flexDirection: "column", children: /* @__PURE__ */ jsxs(Text, { bold: true, children: [
+          "Enter your ",
+          providerName,
+          " API key:"
+        ] }) }),
+        /* @__PURE__ */ jsxs(Box, { marginTop: 1, children: [
+          /* @__PURE__ */ jsx(Text, { color: "cyan", children: "> " }),
+          /* @__PURE__ */ jsx(Text, { children: maskedKey }),
+          !isSaving && /* @__PURE__ */ jsx(Text, { color: "cyan", children: "_" })
+        ] }),
+        isSaving && /* @__PURE__ */ jsx(Box, { marginTop: 1, children: /* @__PURE__ */ jsx(Text, { color: "yellowBright", children: "Saving API key..." }) }),
+        error && /* @__PURE__ */ jsx(Box, { marginTop: 1, children: /* @__PURE__ */ jsx(Text, { color: "red", children: error }) }),
+        /* @__PURE__ */ jsx(Box, { marginTop: 1, children: /* @__PURE__ */ jsx(Text, { color: "gray", children: "Enter to save \u2022 Esc to cancel" }) })
+      ]
+    }
+  );
+});
+var ApiKeyInput_default = ApiKeyInput;
+export {
+  ApiKeyInput_default as default
+};