@dexto/tui 1.8.1 → 1.8.3

package/dist/components/overlays/ConnectOverlay.js

@@ -0,0 +1,412 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { Box, Text } from "ink";
+import open from "open";
+import { BaseSelector } from "../base/BaseSelector.js";
+import {
+  deleteModelAuthProfile,
+  getDefaultModelAuthProfileIdForProvider,
+  getModelAuthProfileId,
+  getProviderAuthDefinitions,
+  listSavedModelAuthProfiles,
+  markModelAuthProviderConnected,
+  saveApiKeyModelAuthProfile,
+  saveProviderApiKey,
+  setDefaultModelAuthProfile,
+  startModelAuthBrowserLogin
+} from "@dexto/agent-management";
+import { LLM_PROVIDERS } from "@dexto/llm";
+import { applyLayeredEnvironmentLoading, isValidApiKeyFormat } from "../../host/index.js";
+function methodHint(method, profile, defaultProfileId) {
+  const parts = [
+    profile ? profile.id === defaultProfileId ? "Connected (default)" : "Connected" : void 0,
+    method.hint
+  ].filter((part) => Boolean(part));
+  return parts.length ? parts.join(" - ") : void 0;
+}
+function maskSecret(secret) {
+  if (secret.length <= 8) {
+    return "*".repeat(secret.length);
+  }
+  return `${secret.slice(0, 4)}${"*".repeat(Math.min(secret.length - 8, 24))}${secret.slice(-4)}`;
+}
+function toLlmProvider(providerId) {
+  const provider = LLM_PROVIDERS.find((candidate) => candidate === providerId);
+  if (!provider) {
+    throw new Error(`API-key auth is not implemented for provider: ${providerId}`);
+  }
+  return provider;
+}
+const ConnectOverlay = forwardRef(
+  function ConnectOverlay2({ isVisible, onDone }, ref) {
+    const selectorRef = useRef(null);
+    const loginCancelRef = useRef(null);
+    const [step, setStep] = useState("provider");
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [provider, setProvider] = useState(null);
+    const [method, setMethod] = useState(null);
+    const [profiles, setProfiles] = useState([]);
+    const [defaultProfileId, setDefaultProfileId] = useState(null);
+    const [apiKey, setApiKey] = useState("");
+    const [status, setStatus] = useState("Choose a provider to connect.");
+    const [error, setError] = useState(null);
+    const currentProfileId = provider && method ? getModelAuthProfileId(provider.providerId, method.id) : null;
+    const existingProfile = currentProfileId ? profiles.find((profile) => profile.id === currentProfileId) ?? null : null;
+    const close = useCallback(
+      (outcome) => {
+        void loginCancelRef.current?.();
+        loginCancelRef.current = null;
+        onDone(outcome);
+      },
+      [onDone]
+    );
+    const handleActionError = useCallback((err) => {
+      setError(err instanceof Error ? err.message : String(err));
+      setStep("error");
+    }, []);
+    useEffect(() => {
+      if (!isVisible) {
+        return;
+      }
+      setStep("provider");
+      setSelectedIndex(0);
+      setProvider(null);
+      setMethod(null);
+      setProfiles([]);
+      setDefaultProfileId(null);
+      setApiKey("");
+      setStatus("Choose a provider to connect.");
+      setError(null);
+    }, [isVisible]);
+    const providerOptions = useMemo(
+      () => getProviderAuthDefinitions().map((item) => ({
+        value: item.providerId,
+        label: item.label,
+        hint: `${item.methods.length} method${item.methods.length === 1 ? "" : "s"}`
+      })),
+      []
+    );
+    const methodOptions = useMemo(() => {
+      if (!provider) {
+        return [];
+      }
+      return provider.methods.map((item) => {
+        const profile = profiles.find(
+          (candidate) => candidate.id === getModelAuthProfileId(provider.providerId, item.id)
+        );
+        return {
+          value: item.id,
+          label: item.label,
+          hint: methodHint(item, profile, defaultProfileId)
+        };
+      });
+    }, [defaultProfileId, profiles, provider]);
+    const existingActionOptions = useMemo(() => {
+      if (!existingProfile) {
+        return [];
+      }
+      return [
+        {
+          value: "use",
+          label: existingProfile.id === defaultProfileId ? "Keep as default" : "Use existing",
+          hint: existingProfile.id === defaultProfileId ? "No changes" : "Set this method as provider default"
+        },
+        { value: "replace", label: "Replace credentials", hint: "Reconnect this method" },
+        {
+          value: "delete",
+          label: "Delete credentials",
+          ...existingProfile.id === defaultProfileId ? { hint: "Also clears default" } : {}
+        }
+      ];
+    }, [defaultProfileId, existingProfile]);
+    const activeItems = step === "provider" ? providerOptions : step === "method" ? methodOptions : step === "existing-action" ? existingActionOptions : [];
+    const loadProvider = useCallback(async (nextProvider) => {
+      setProvider(nextProvider);
+      setMethod(null);
+      setStatus(`Loading saved ${nextProvider.label} profiles...`);
+      const [savedProfiles, savedDefaultProfileId] = await Promise.all([
+        listSavedModelAuthProfiles(nextProvider.providerId),
+        getDefaultModelAuthProfileIdForProvider(nextProvider.providerId)
+      ]);
+      setProfiles(savedProfiles);
+      setDefaultProfileId(savedDefaultProfileId);
+      setSelectedIndex(0);
+      setStatus(`Choose how to connect ${nextProvider.label}.`);
+      setStep("method");
+    }, []);
+    const saveApiKey = useCallback(async () => {
+      if (!provider || !method) {
+        close({ outcome: "cancelled" });
+        return;
+      }
+      const trimmed = apiKey.trim();
+      if (!trimmed) {
+        setError("API key is required");
+        return;
+      }
+      const llmProvider = toLlmProvider(provider.providerId);
+      if (!isValidApiKeyFormat(trimmed, llmProvider)) {
+        setError(`${provider.label} API key format is invalid`);
+        return;
+      }
+      setError(null);
+      try {
+        setStatus(`Saving ${provider.label} API key...`);
+        await saveProviderApiKey(llmProvider, trimmed, process.cwd());
+        await applyLayeredEnvironmentLoading();
+        await saveApiKeyModelAuthProfile(llmProvider);
+        await markModelAuthProviderConnected(provider.providerId);
+        close({
+          outcome: "success",
+          providerId: provider.providerId,
+          message: `Connected ${provider.label} (${method.label})`
+        });
+      } catch (err) {
+        setError(err instanceof Error ? err.message : String(err));
+      }
+    }, [apiKey, close, method, provider]);
+    const connectOAuth = useCallback(
+      async (nextProvider, nextMethod) => {
+        setStep("oauth-progress");
+        setStatus(`Starting ${nextMethod.label}...`);
+        let timeout = null;
+        try {
+          const login = await startModelAuthBrowserLogin({
+            providerId: nextProvider.providerId,
+            methodId: nextMethod.id
+          });
+          loginCancelRef.current = login.cancel;
+          setStatus(`Opening browser for ${nextMethod.label}...`);
+          await open(login.authUrl).catch(() => void 0);
+          setStatus("Waiting for browser authorization...");
+          await Promise.race([
+            login.waitForProfile(),
+            new Promise((_, reject) => {
+              timeout = setTimeout(
+                () => reject(new Error(`${nextMethod.label} timed out`)),
+                5 * 60 * 1e3
+              );
+            })
+          ]);
+          await markModelAuthProviderConnected(nextProvider.providerId);
+          close({
+            outcome: "success",
+            providerId: nextProvider.providerId,
+            message: `Connected ${nextProvider.label} (${nextMethod.label})`
+          });
+        } catch (err) {
+          setError(err instanceof Error ? err.message : String(err));
+          setStep("error");
+        } finally {
+          if (timeout) {
+            clearTimeout(timeout);
+          }
+          await loginCancelRef.current?.();
+          loginCancelRef.current = null;
+        }
+      },
+      [close]
+    );
+    const startConnect = useCallback(async () => {
+      if (!provider || !method) {
+        close({ outcome: "cancelled" });
+        return;
+      }
+      if (method.kind === "api_key") {
+        setApiKey("");
+        setError(null);
+        setStatus(`Enter your ${provider.label} API key.`);
+        setStep("api-key");
+        return;
+      }
+      if (method.kind === "oauth") {
+        await connectOAuth(provider, method);
+      }
+    }, [close, connectOAuth, method, provider]);
+    const handleSelect = useCallback(
+      async (option) => {
+        if (step === "provider") {
+          const nextProvider = getProviderAuthDefinitions().find(
+            (candidate) => candidate.providerId === option.value
+          );
+          if (nextProvider) {
+            await loadProvider(nextProvider);
+          }
+          return;
+        }
+        if (step === "method" && provider) {
+          const nextMethod = provider.methods.find(
+            (candidate) => candidate.id === option.value
+          );
+          if (nextMethod) {
+            setMethod(nextMethod);
+            const profileId = getModelAuthProfileId(provider.providerId, nextMethod.id);
+            if (profiles.some((item) => item.id === profileId)) {
+              setStatus(`Manage ${provider.label} ${nextMethod.label}.`);
+              setStep("existing-action");
+              setSelectedIndex(0);
+              return;
+            }
+            if (nextMethod.kind === "api_key") {
+              setApiKey("");
+              setError(null);
+              setStatus(`Enter your ${provider.label} API key.`);
+              setStep("api-key");
+              return;
+            }
+            if (nextMethod.kind === "oauth") {
+              await connectOAuth(provider, nextMethod);
+            }
+          }
+          return;
+        }
+        if (step === "existing-action" && provider && method && currentProfileId) {
+          if (option.value === "use") {
+            await setDefaultModelAuthProfile({
+              providerId: provider.providerId,
+              profileId: currentProfileId
+            });
+            close({
+              outcome: "success",
+              providerId: provider.providerId,
+              message: `Using ${provider.label} ${method.label}`
+            });
+            return;
+          }
+          if (option.value === "replace") {
+            await startConnect();
+            return;
+          }
+          if (option.value === "delete") {
+            setStatus(`Press Enter to delete ${provider.label} ${method.label}.`);
+            setStep("delete-confirm");
+          }
+        }
+      },
+      [
+        close,
+        connectOAuth,
+        currentProfileId,
+        loadProvider,
+        method,
+        profiles,
+        provider,
+        startConnect,
+        step
+      ]
+    );
+    useImperativeHandle(
+      ref,
+      () => ({
+        handleInput: (input, key) => {
+          if (!isVisible) return false;
+          if (step === "api-key") {
+            if (key.escape) {
+              close({ outcome: "cancelled" });
+              return true;
+            }
+            if (key.return) {
+              void saveApiKey().catch(handleActionError);
+              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 true;
+          }
+          if (step === "delete-confirm") {
+            if (key.escape) {
+              close({ outcome: "cancelled" });
+              return true;
+            }
+            if (key.return && provider && method && currentProfileId) {
+              void deleteModelAuthProfile(currentProfileId).then(
+                () => close({
+                  outcome: "success",
+                  providerId: provider.providerId,
+                  message: `Deleted ${provider.label} ${method.label}`
+                })
+              ).catch(handleActionError);
+              return true;
+            }
+            return true;
+          }
+          if (step === "oauth-progress") {
+            if (key.escape) {
+              close({ outcome: "cancelled" });
+            }
+            return true;
+          }
+          if (step === "error") {
+            if (key.escape || key.return) {
+              close({ outcome: "closed" });
+            }
+            return true;
+          }
+          return selectorRef.current?.handleInput(input, key) ?? false;
+        }
+      }),
+      [
+        close,
+        currentProfileId,
+        handleActionError,
+        isVisible,
+        method,
+        provider,
+        saveApiKey,
+        step
+      ]
+    );
+    if (!isVisible) return null;
+    return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "cyan", paddingX: 1, children: [
+      /* @__PURE__ */ jsx(Box, { marginBottom: 1, children: /* @__PURE__ */ jsx(Text, { bold: true, color: "cyan", children: "Connect Model Provider" }) }),
+      /* @__PURE__ */ jsx(Text, { color: error ? "red" : "gray", children: error ?? status }),
+      step === "api-key" ? /* @__PURE__ */ jsxs(Box, { flexDirection: "column", marginTop: 1, children: [
+        /* @__PURE__ */ jsx(Text, { children: maskSecret(apiKey) }),
+        /* @__PURE__ */ jsx(Text, { color: "gray", children: "Enter save \u2022 Esc cancel" })
+      ] }) : step === "delete-confirm" ? /* @__PURE__ */ jsxs(Box, { flexDirection: "column", marginTop: 1, children: [
+        /* @__PURE__ */ jsx(Text, { color: "red", children: "This removes saved credentials for this method." }),
+        /* @__PURE__ */ jsx(Text, { color: "gray", children: "Enter delete \u2022 Esc cancel" })
+      ] }) : step === "oauth-progress" ? /* @__PURE__ */ jsx(Box, { marginTop: 1, children: /* @__PURE__ */ jsx(Text, { color: "gray", children: "Esc cancel" }) }) : step === "error" ? /* @__PURE__ */ jsx(Box, { marginTop: 1, children: /* @__PURE__ */ jsx(Text, { color: "gray", children: "Enter close \u2022 Esc close" }) }) : /* @__PURE__ */ jsx(Box, { marginTop: 1, children: /* @__PURE__ */ jsx(
+        BaseSelector,
+        {
+          ref: selectorRef,
+          items: activeItems,
+          isVisible: true,
+          selectedIndex,
+          onSelectIndex: setSelectedIndex,
+          onSelect: (item) => void handleSelect(item).catch(handleActionError),
+          onClose: () => close({ outcome: "cancelled" }),
+          title: step === "provider" ? "Providers" : step === "method" ? `${provider?.label ?? "Provider"} methods` : "Existing profile",
+          formatItem: (item, selected) => /* @__PURE__ */ jsxs(Text, { ...selected ? { color: "cyan" } : {}, children: [
+            selected ? "\u203A " : "  ",
+            item.label,
+            item.hint ? /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
+              " \u2014 ",
+              item.hint
+            ] }) : null
+          ] })
+        }
+      ) })
+    ] });
+  }
+);
+var ConnectOverlay_default = ConnectOverlay;
+export {
+  ConnectOverlay_default as default
+};

package/dist/containers/OverlayContainer.cjs

@@ -76,6 +76,7 @@ var import_MarketplaceBrowser = __toESM(require("../components/overlays/Marketpl
 var import_MarketplaceAddPrompt = __toESM(require("../components/overlays/MarketplaceAddPrompt.js"), 1);
 var import_LoginOverlay = __toESM(require("../components/overlays/LoginOverlay.js"), 1);
 var import_LogoutOverlay = __toESM(require("../components/overlays/LogoutOverlay.js"), 1);
+var import_ConnectOverlay = __toESM(require("../components/overlays/ConnectOverlay.js"), 1);
 var import_llm = require("@dexto/llm");
 var import_core2 = require("@dexto/core");
 var import_messageFormatting = require("../utils/messageFormatting.js");
@@ -149,6 +150,7 @@ const OverlayContainer = (0, import_react.forwardRef)(
     const apiKeyInputRef = (0, import_react.useRef)(null);
     const loginOverlayRef = (0, import_react.useRef)(null);
     const logoutOverlayRef = (0, import_react.useRef)(null);
+    const connectOverlayRef = (0, import_react.useRef)(null);
     const searchOverlayRef = (0, import_react.useRef)(null);
     const promptListRef = (0, import_react.useRef)(null);
     const promptAddChoiceRef = (0, import_react.useRef)(null);
@@ -235,6 +237,8 @@ const OverlayContainer = (0, import_react.forwardRef)(
               return loginOverlayRef.current?.handleInput(inputStr, key) ?? false;
             case "logout":
               return logoutOverlayRef.current?.handleInput(inputStr, key) ?? false;
+            case "connect":
+              return connectOverlayRef.current?.handleInput(inputStr, key) ?? false;
             case "search":
               return searchOverlayRef.current?.handleInput(inputStr, key) ?? false;
             case "prompt-list":
@@ -1200,6 +1204,52 @@ ${result.context}`,
       },
       [handleClose, setMessages]
     );
+    const handleConnectDone = (0, import_react.useCallback)(
+      async (outcome) => {
+        handleClose();
+        if (outcome.outcome === "closed") {
+          return;
+        }
+        setMessages((prev) => [
+          ...prev,
+          {
+            id: (0, import_idGenerator.generateMessageId)("system"),
+            role: "system",
+            content: outcome.outcome === "success" ? `\u2705 ${outcome.message}` : "Model provider connection cancelled.",
+            timestamp: /* @__PURE__ */ new Date()
+          }
+        ]);
+        if (outcome.outcome !== "success") {
+          return;
+        }
+        const currentConfig = agent.getCurrentLLMConfig(session.id || void 0);
+        if (currentConfig.provider !== outcome.providerId) {
+          return;
+        }
+        try {
+          await agent.switchLLM(
+            {
+              provider: currentConfig.provider,
+              model: currentConfig.model,
+              ...currentConfig.baseURL ? { baseURL: currentConfig.baseURL } : {},
+              ...currentConfig.reasoning ? { reasoning: currentConfig.reasoning } : {}
+            },
+            session.id || void 0
+          );
+        } catch (error) {
+          setMessages((prev) => [
+            ...prev,
+            {
+              id: (0, import_idGenerator.generateMessageId)("error"),
+              role: "system",
+              content: `Failed to apply model provider connection: ${error instanceof Error ? error.message : String(error)}`,
+              timestamp: /* @__PURE__ */ new Date()
+            }
+          ]);
+        }
+      },
+      [agent, handleClose, session.id, setMessages]
+    );
     const handleLogLevelSelect = (0, import_react.useCallback)(
       (level) => {
         setUi((prev) => ({ ...prev, activeOverlay: "none", mcpWizardServerType: null }));
@@ -2452,6 +2502,14 @@ Use /${data.name} to run it.`,
           onDone: handleLogoutDone
         }
       ) }),
+      ui.activeOverlay === "connect" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { marginTop: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_ConnectOverlay.default,
+        {
+          ref: connectOverlayRef,
+          isVisible: true,
+          onDone: handleConnectDone
+        }
+      ) }),
       ui.activeOverlay === "api-key-input" && ui.pendingModelSwitch && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_ApiKeyInput.default,
         {

package/dist/containers/OverlayContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayContainer.d.ts","sourceRoot":"","sources":["../../src/containers/OverlayContainer.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAyE,MAAM,OAAO,CAAC;AAI9F,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qCAAqC,CAAC;AACtE,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,kCAAkC,CAAC;AAE5D,OAAO,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACpF,OAAO,EAGH,KAAK,eAAe,EACvB,MAAM,iCAAiC,CAAC;AAmGzC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAmC3D,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAuC3D,MAAM,WAAW,sBAAsB;IACnC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC;CACrD;AAED,UAAU,qBAAqB;IAC3B,EAAE,EAAE,OAAO,CAAC;IACZ,KAAK,EAAE,UAAU,CAAC;IAClB,OAAO,EAAE,YAAY,CAAC;IACtB,QAAQ,EAAE,eAAe,GAAG,IAAI,CAAC;IACjC,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC,CAAC;IAC3D,KAAK,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IACrD,UAAU,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC,CAAC;IAC/D,WAAW,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC;IAC7D,WAAW,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,GAAG,IAAI,CAAC,CAAC,CAAC;IAC1E,gBAAgB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,EAAE,CAAC,CAAC,CAAC;IAC1E,KAAK,EAAE,eAAe,CAAC;IACvB,YAAY,EAAE,YAAY,CAAC;IAC3B,MAAM,EAAE,UAAU,CAAC;IACnB,mDAAmD;IACnD,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,8EAA8E;IAC9E,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,4EAA4E;IAC5E,qBAAqB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CAClE;AAED;;;GAGG;AACH,eAAO,MAAM,gBAAgB,sGA06F5B,CAAC"}
+{"version":3,"file":"OverlayContainer.d.ts","sourceRoot":"","sources":["../../src/containers/OverlayContainer.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAyE,MAAM,OAAO,CAAC;AAI9F,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qCAAqC,CAAC;AACtE,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,kCAAkC,CAAC;AAE5D,OAAO,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACpF,OAAO,EAGH,KAAK,eAAe,EACvB,MAAM,iCAAiC,CAAC;AAmGzC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAuC3D,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAuC3D,MAAM,WAAW,sBAAsB;IACnC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC;CACrD;AAED,UAAU,qBAAqB;IAC3B,EAAE,EAAE,OAAO,CAAC;IACZ,KAAK,EAAE,UAAU,CAAC;IAClB,OAAO,EAAE,YAAY,CAAC;IACtB,QAAQ,EAAE,eAAe,GAAG,IAAI,CAAC;IACjC,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC,CAAC;IAC3D,KAAK,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IACrD,UAAU,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC,CAAC;IAC/D,WAAW,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC;IAC7D,WAAW,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,GAAG,IAAI,CAAC,CAAC,CAAC;IAC1E,gBAAgB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,EAAE,CAAC,CAAC,CAAC;IAC1E,KAAK,EAAE,eAAe,CAAC;IACvB,YAAY,EAAE,YAAY,CAAC;IAC3B,MAAM,EAAE,UAAU,CAAC;IACnB,mDAAmD;IACnD,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,8EAA8E;IAC9E,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,4EAA4E;IAC5E,qBAAqB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CAClE;AAED;;;GAGG;AACH,eAAO,MAAM,gBAAgB,sGAi/F5B,CAAC"}

package/dist/containers/OverlayContainer.js

@@ -56,6 +56,7 @@ import MarketplaceBrowser from "../components/overlays/MarketplaceBrowser.js";
 import MarketplaceAddPrompt from "../components/overlays/MarketplaceAddPrompt.js";
 import LoginOverlay from "../components/overlays/LoginOverlay.js";
 import LogoutOverlay from "../components/overlays/LogoutOverlay.js";
+import ConnectOverlay from "../components/overlays/ConnectOverlay.js";
 import { LLM_PROVIDERS, getModelDisplayName, getReasoningProfile } from "@dexto/llm";
 import { DextoValidationError, LLMErrorCode } from "@dexto/core";
 import { createUserMessage, convertHistoryToUIMessages } from "../utils/messageFormatting.js";
@@ -129,6 +130,7 @@ const OverlayContainer = forwardRef(
     const apiKeyInputRef = useRef(null);
     const loginOverlayRef = useRef(null);
     const logoutOverlayRef = useRef(null);
+    const connectOverlayRef = useRef(null);
     const searchOverlayRef = useRef(null);
     const promptListRef = useRef(null);
     const promptAddChoiceRef = useRef(null);
@@ -215,6 +217,8 @@ const OverlayContainer = forwardRef(
               return loginOverlayRef.current?.handleInput(inputStr, key) ?? false;
             case "logout":
               return logoutOverlayRef.current?.handleInput(inputStr, key) ?? false;
+            case "connect":
+              return connectOverlayRef.current?.handleInput(inputStr, key) ?? false;
             case "search":
               return searchOverlayRef.current?.handleInput(inputStr, key) ?? false;
             case "prompt-list":
@@ -1180,6 +1184,52 @@ ${result.context}`,
       },
       [handleClose, setMessages]
     );
+    const handleConnectDone = useCallback(
+      async (outcome) => {
+        handleClose();
+        if (outcome.outcome === "closed") {
+          return;
+        }
+        setMessages((prev) => [
+          ...prev,
+          {
+            id: generateMessageId("system"),
+            role: "system",
+            content: outcome.outcome === "success" ? `\u2705 ${outcome.message}` : "Model provider connection cancelled.",
+            timestamp: /* @__PURE__ */ new Date()
+          }
+        ]);
+        if (outcome.outcome !== "success") {
+          return;
+        }
+        const currentConfig = agent.getCurrentLLMConfig(session.id || void 0);
+        if (currentConfig.provider !== outcome.providerId) {
+          return;
+        }
+        try {
+          await agent.switchLLM(
+            {
+              provider: currentConfig.provider,
+              model: currentConfig.model,
+              ...currentConfig.baseURL ? { baseURL: currentConfig.baseURL } : {},
+              ...currentConfig.reasoning ? { reasoning: currentConfig.reasoning } : {}
+            },
+            session.id || void 0
+          );
+        } catch (error) {
+          setMessages((prev) => [
+            ...prev,
+            {
+              id: generateMessageId("error"),
+              role: "system",
+              content: `Failed to apply model provider connection: ${error instanceof Error ? error.message : String(error)}`,
+              timestamp: /* @__PURE__ */ new Date()
+            }
+          ]);
+        }
+      },
+      [agent, handleClose, session.id, setMessages]
+    );
     const handleLogLevelSelect = useCallback(
       (level) => {
         setUi((prev) => ({ ...prev, activeOverlay: "none", mcpWizardServerType: null }));
@@ -2432,6 +2482,14 @@ Use /${data.name} to run it.`,
           onDone: handleLogoutDone
         }
       ) }),
+      ui.activeOverlay === "connect" && /* @__PURE__ */ jsx(Box, { marginTop: 1, children: /* @__PURE__ */ jsx(
+        ConnectOverlay,
+        {
+          ref: connectOverlayRef,
+          isVisible: true,
+          onDone: handleConnectDone
+        }
+      ) }),
       ui.activeOverlay === "api-key-input" && ui.pendingModelSwitch && /* @__PURE__ */ jsx(
         ApiKeyInput,
         {

package/dist/hooks/useTokenCounter.cjs

@@ -67,17 +67,15 @@ function useTokenCounter({ agent, isActive }) {
       "llm:response",
       (payload) => {
         const usage = payload.tokenUsage;
-        if (usage) {
-          const rawInputTokens = usage.inputTokens ?? 0;
-          const cacheWriteTokens = usage.cacheWriteTokens ?? 0;
-          const inputTokens = Math.max(0, rawInputTokens - cacheWriteTokens);
-          if (inputTokens > 0) {
-            setLastInputTokens(inputTokens);
-          }
-          const outputTokens = usage.outputTokens ?? 0;
-          if (outputTokens > 0) {
-            setCumulativeOutputTokens((prev) => prev + outputTokens);
-          }
+        const rawInputTokens = usage.inputTokens ?? 0;
+        const cacheWriteTokens = usage.cacheWriteTokens ?? 0;
+        const inputTokens = Math.max(0, rawInputTokens - cacheWriteTokens);
+        if (inputTokens > 0) {
+          setLastInputTokens(inputTokens);
+        }
+        const outputTokens = usage.outputTokens ?? 0;
+        if (outputTokens > 0) {
+          setCumulativeOutputTokens((prev) => prev + outputTokens);
         }
         currentCharCountRef.current = 0;
         setCurrentSegmentEstimate(0);

package/dist/hooks/useTokenCounter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTokenCounter.d.ts","sourceRoot":"","sources":["../../src/hooks/useTokenCounter.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAGH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAE3D,MAAM,WAAW,mBAAmB;IAChC,+CAA+C;IAC/C,KAAK,EAAE,eAAe,CAAC;IACvB,qEAAqE;IACrE,QAAQ,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,kBAAkB;IAC/B,yDAAyD;IACzD,iBAAiB,EAAE,MAAM,CAAC;IAC1B,qDAAqD;IACrD,sBAAsB,EAAE,MAAM,CAAC;IAC/B,yDAAyD;IACzD,YAAY,EAAE,MAAM,CAAC;IACrB,yDAAyD;IACzD,gBAAgB,EAAE,OAAO,CAAC;IAC1B,qEAAqE;IACrE,SAAS,EAAE,MAAM,CAAC;CACrB;AAsBD;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,mBAAmB,GAAG,kBAAkB,CA6F5F"}
+{"version":3,"file":"useTokenCounter.d.ts","sourceRoot":"","sources":["../../src/hooks/useTokenCounter.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAGH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAE3D,MAAM,WAAW,mBAAmB;IAChC,+CAA+C;IAC/C,KAAK,EAAE,eAAe,CAAC;IACvB,qEAAqE;IACrE,QAAQ,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,kBAAkB;IAC/B,yDAAyD;IACzD,iBAAiB,EAAE,MAAM,CAAC;IAC1B,qDAAqD;IACrD,sBAAsB,EAAE,MAAM,CAAC;IAC/B,yDAAyD;IACzD,YAAY,EAAE,MAAM,CAAC;IACrB,yDAAyD;IACzD,gBAAgB,EAAE,OAAO,CAAC;IAC1B,qEAAqE;IACrE,SAAS,EAAE,MAAM,CAAC;CACrB;AAsBD;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,mBAAmB,GAAG,kBAAkB,CA2F5F"}

package/dist/hooks/useTokenCounter.js

@@ -44,17 +44,15 @@ function useTokenCounter({ agent, isActive }) {
       "llm:response",
       (payload) => {
         const usage = payload.tokenUsage;
-        if (usage) {
-          const rawInputTokens = usage.inputTokens ?? 0;
-          const cacheWriteTokens = usage.cacheWriteTokens ?? 0;
-          const inputTokens = Math.max(0, rawInputTokens - cacheWriteTokens);
-          if (inputTokens > 0) {
-            setLastInputTokens(inputTokens);
-          }
-          const outputTokens = usage.outputTokens ?? 0;
-          if (outputTokens > 0) {
-            setCumulativeOutputTokens((prev) => prev + outputTokens);
-          }
+        const rawInputTokens = usage.inputTokens ?? 0;
+        const cacheWriteTokens = usage.cacheWriteTokens ?? 0;
+        const inputTokens = Math.max(0, rawInputTokens - cacheWriteTokens);
+        if (inputTokens > 0) {
+          setLastInputTokens(inputTokens);
+        }
+        const outputTokens = usage.outputTokens ?? 0;
+        if (outputTokens > 0) {
+          setCumulativeOutputTokens((prev) => prev + outputTokens);
         }
         currentCharCountRef.current = 0;
         setCurrentSegmentEstimate(0);