@mintlify/cli 4.0.1075 → 4.0.1077

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mintlify/cli",
-  "version": "4.0.1075",
+  "version": "4.0.1077",
   "description": "The Mintlify CLI",
   "engines": {
     "node": ">=18.0.0"
@@ -61,8 +61,8 @@
     "ink": "6.3.0",
     "inquirer": "12.3.0",
     "js-yaml": "4.1.0",
-    "keytar": "^7.9.0",
     "mdast-util-mdx-jsx": "3.2.0",
+    "open": "^8.4.2",
     "openid-client": "^6.8.2",
     "posthog-node": "5.17.2",
     "react": "19.2.3",
@@ -71,6 +71,9 @@
     "yargs": "17.7.1",
     "zod": "^4.3.6"
   },
+  "optionalDependencies": {
+    "keytar": "^7.9.0"
+  },
   "devDependencies": {
     "@mintlify/eslint-config-typescript": "1.0.13",
     "@mintlify/prettier-config": "1.0.4",
@@ -92,5 +95,5 @@
     "vitest": "2.1.9",
     "vitest-mock-process": "1.0.4"
   },
-  "gitHead": "6c1a25cb98edc21e1a89329012113848bb226fd5"
+  "gitHead": "8df236c3a874c2c179b018ee4dd5a4384e552724"
 }

package/src/keyring.ts

@@ -1,10 +1,19 @@
-import keytar from 'keytar';
-
 const SERVICE = 'mintlify';
 const ACCESS_TOKEN_ACCOUNT = 'access_token';
 const REFRESH_TOKEN_ACCOUNT = 'refresh_token';
 
+async function getKeytar(): Promise<typeof import('keytar')> {
+  try {
+    return await import('keytar');
+  } catch {
+    throw new Error(
+      'keytar is required for credential storage but is not installed. Install it with: npm install keytar'
+    );
+  }
+}
+
 export async function storeCredentials(accessToken: string, refreshToken: string): Promise<void> {
+  const keytar = await getKeytar();
   await Promise.all([
     keytar.setPassword(SERVICE, ACCESS_TOKEN_ACCOUNT, accessToken),
     keytar.setPassword(SERVICE, REFRESH_TOKEN_ACCOUNT, refreshToken),
@@ -12,10 +21,12 @@ export async function storeCredentials(accessToken: string, refreshToken: string
 }
 
 export async function getAccessToken(): Promise<string | null> {
+  const keytar = await getKeytar();
   return keytar.getPassword(SERVICE, ACCESS_TOKEN_ACCOUNT);
 }
 
 export async function clearCredentials(): Promise<void> {
+  const keytar = await getKeytar();
   await Promise.all([
     keytar.deletePassword(SERVICE, ACCESS_TOKEN_ACCOUNT),
     keytar.deletePassword(SERVICE, REFRESH_TOKEN_ACCOUNT),

package/src/login.tsx

@@ -1,6 +1,8 @@
 import { input } from '@inquirer/prompts';
 import { addLog } from '@mintlify/previewing';
-import { Text } from 'ink';
+import chalk from 'chalk';
+import { Box, Text } from 'ink';
+import open from 'open';
 import {
   calculatePKCECodeChallenge,
   randomNonce,
@@ -32,10 +34,41 @@ export async function login(): Promise<void> {
   const authorizeUrl = new URL('/api/cli/oauth/authorize', DASHBOARD_URL);
   authorizeUrl.searchParams.set('state', state);
   authorizeUrl.searchParams.set('code_challenge', codeChallenge);
+  const url = authorizeUrl.toString();
 
-  addLog(<Text>Opening browser to log in to Mintlify... {authorizeUrl.toString()}</Text>);
+  addLog(
+    <Box flexDirection="column" gap={1} paddingY={1}>
+      <Text bold>
+        <Text color="green">◆ </Text>A browser window will open for Mintlify authentication
+      </Text>
+      <Box flexDirection="column" paddingLeft={3} gap={1}>
+        <Text dimColor>If your browser doesn't open automatically, copy this URL:</Text>
+        <Text color="cyan">{url}</Text>
+      </Box>
+    </Box>
+  );
 
-  const code = await input({ message: 'Paste the code from your browser:' });
+  open(url).catch(() => {});
+
+  addLog(
+    <Box flexDirection="column" paddingLeft={1} marginTop={1}>
+      <Text dimColor>╭─ Paste the authorization code from your browser</Text>
+      <Text dimColor>│</Text>
+    </Box>
+  );
+
+  // Let ink finish rendering before inquirer takes over stdout
+  await new Promise((resolve) => setTimeout(resolve, 50));
+
+  const code = await input({
+    message: '█',
+    theme: {
+      prefix: chalk.dim(' │'),
+      style: {
+        answer: (text: string) => chalk.cyan(text),
+      },
+    },
+  });
 
   const res = await fetch(TOKEN_ENDPOINT, {
     method: 'POST',
@@ -53,7 +86,9 @@ export async function login(): Promise<void> {
 
   if (!res.ok) {
     addLog(
-      <Text color="red">Login failed: {body.error_message ?? body.error ?? 'unknown error'}</Text>
+      <Text color="red">
+        ✖ Login failed: {body.error_message ?? body.error ?? 'unknown error'}
+      </Text>
     );
     return;
   }
@@ -61,5 +96,5 @@ export async function login(): Promise<void> {
   const token = body as TokenResponse;
   await storeCredentials(token.access_token, token.refresh_token);
 
-  addLog(<Text color="green">Logged in successfully.</Text>);
+  addLog(<Text color="green">✔ Logged in successfully.</Text>);
 }