aryx-cli 1.0.0

package/bin/aryx

@@ -0,0 +1,15 @@
+#!/usr/bin/env node
+const { spawnSync } = require('node:child_process');
+const { join } = require('node:path');
+
+const entry = join(__dirname, '..', 'src', 'index.tsx');
+const result = spawnSync(process.execPath, ['--import', 'tsx', entry, ...process.argv.slice(2)], {
+  stdio: 'inherit'
+});
+
+if (result.error) {
+  console.error(result.error.message);
+  process.exit(1);
+}
+
+process.exit(result.status ?? 0);

package/bin/aryx.cjs

@@ -0,0 +1,15 @@
+#!/usr/bin/env node
+const { spawnSync } = require('node:child_process');
+const { join } = require('node:path');
+
+const entry = join(__dirname, '..', 'src', 'index.tsx');
+const result = spawnSync(process.execPath, ['--import', 'tsx', entry, ...process.argv.slice(2)], {
+  stdio: 'inherit'
+});
+
+if (result.error) {
+  console.error(result.error.message);
+  process.exit(1);
+}
+
+process.exit(result.status ?? 0);

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "aryx-cli",
+  "version": "1.0.0",
+  "description": "Aryx - intelligence inside your terminal",
+  "type": "module",
+  "files": [
+    "src",
+    "bin"
+  ],
+  "bin": {
+    "aryx": "./bin/aryx"
+  },
+  "scripts": {
+    "dev": "tsx src/index.tsx",
+    "start": "node --import tsx src/index.tsx",
+    "build": "tsc --noEmit",
+    "clean": "npm link"
+  },
+  "dependencies": {
+    "chalk": "^5.3.0",
+    "diff": "^8.0.4",
+    "figlet": "^1.7.0",
+    "ink": "^5.2.1",
+    "ink-text-input": "^5.0.1",
+    "marked": "^17.0.5",
+    "marked-terminal": "^7.3.0",
+    "meow": "^13.1.0",
+    "ora": "^9.3.0",
+    "react": "^18.2.0",
+    "string-width": "^8.2.0",
+    "tsx": "^4.7.0",
+    "zod": "^3.22.4"
+  },
+  "devDependencies": {
+    "@types/diff": "^7.0.2",
+    "@types/figlet": "^1.5.8",
+    "@types/marked-terminal": "^6.1.1",
+    "@types/node": "^20.11.5",
+    "@types/react": "^18.2.48",
+    "typescript": "^5.3.3"
+  }
+}

package/src/components/CommandSuggestions.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import { theme, GRADIENT_COMMAND } from '../theme.js';
+import { BRAND_NAME } from '../constants.js';
+import { GradientText } from './IAmAryx.js';
+
+export interface Command {
+  name: string;
+  description: string;
+}
+
+export const commands: Command[] = [
+  { name: '/upgrade', description: `Upgrade to Max for higher rate limits` },
+  { name: '/login', description: `Sign in to ${BRAND_NAME} with Google` },
+  { name: '/logout', description: `Sign out of your ${BRAND_NAME} account` },
+  { name: '/theme', description: 'Change diff color theme' },
+  { name: '/help', description: 'Show help and available commands' },
+  { name: '/usage', description: 'Show token usage and session stats' },
+  { name: '/clear', description: 'Clear conversation history and free up context' },
+  { name: '/exit', description: 'Exit the chat' },
+  { name: '/aryx', description: `About the creator of ${BRAND_NAME}` },
+];
+
+interface Props {
+  filteredCommands: Command[];
+  selectedIndex: number;
+}
+
+const CommandSuggestions: React.FC<Props> = ({ filteredCommands, selectedIndex }) => {
+  if (filteredCommands.length === 0) return null;
+
+  return (
+    <Box 
+      flexDirection="column" 
+      marginTop={1} 
+      paddingLeft={2} 
+      marginBottom={1}>
+      {filteredCommands.map((cmd, index) => {
+        const isSelected = index === selectedIndex;
+        const isGradient = cmd.name === '/aryx';
+        const textColor = isSelected ? theme.colors.highlight : 'gray';
+
+        return (
+          <Box key={cmd.name} marginBottom={0}>
+            <Box width={15}>
+              {isGradient
+                ? <GradientText text={cmd.name} colors={GRADIENT_COMMAND} />
+                : <Text color={textColor}>{cmd.name}</Text>}
+            </Box>
+            
+            <Box flexGrow={1}>
+              <Text color={textColor}>{cmd.description}</Text>
+            </Box>
+          </Box>
+        );
+      })}
+    </Box>
+  );
+};
+
+
+export default CommandSuggestions;

package/src/components/Header.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import { theme, PLAN_COLORS } from '../theme.js';
+import { BRAND_NAME, VERSION, OPENROUTER_MODEL } from '../constants.js';
+import { readAuth } from '../services/auth.js';
+
+interface HeaderProps {
+  name: string;
+  cwd: string;
+  subscriptionPlan: string;
+}
+
+const Header: React.FC<HeaderProps> = ({ name, cwd, subscriptionPlan }) => {
+  const auth = readAuth();
+  const planColor = PLAN_COLORS[subscriptionPlan] ?? 'gray';
+  // Array format preserves exact alignment in code and avoids line-wrapping bugs in the terminal.
+  const robotAscii = [
+    ' ▐▛███▜▌ ',
+    '▝▜█████▛▘',
+    '  ▘▘ ▝▝  '
+  ];
+
+  return (
+    <Box
+      borderStyle="round"
+      borderColor={theme.colors.primary}
+      flexDirection="column"
+      paddingX={2}
+      paddingTop={1}
+      width={55}>
+      
+      {/* Title in border */}
+      <Box 
+        position="absolute" 
+        marginTop={-2} 
+        marginLeft={2}>
+        <Text color={theme.colors.primary}>
+          {` ${BRAND_NAME} `}
+          <Text color="gray">v{VERSION} </Text>
+        </Text>
+      </Box>
+
+      <Box 
+        flexDirection="column" 
+        alignItems="center" 
+        width="100%">
+        <Text bold>Welcome back {name}!</Text>
+
+        <Box 
+          marginTop={1} 
+          flexDirection="column" 
+          alignItems="center">
+          {robotAscii.map((line, index) => (
+            <Text key={index} color={theme.colors.primary}>
+              {line}
+            </Text>
+          ))}
+        </Box>
+
+        <Box 
+          flexDirection="column" 
+          alignItems="center">
+          <Text color="gray">{OPENROUTER_MODEL}{' • '}
+            <Text color={planColor}>
+              {BRAND_NAME} {subscriptionPlan.charAt(0).toUpperCase() + subscriptionPlan.slice(1)}
+            </Text>
+          </Text>
+          {auth && <Text color="gray">{auth.email}</Text>}
+          <Text color="gray">{cwd}</Text>
+        </Box>
+      </Box>
+    </Box>
+  );
+
+};
+
+export default Header;

package/src/components/HelpView.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import { theme } from '../theme.js';
+
+const HelpView: React.FC = () => {
+  return (
+    <Box 
+      flexDirection="column" 
+      marginTop={1} 
+      paddingLeft={2}>
+      <Box marginBottom={1}>
+        <Text bold color={theme.colors.highlight}>Help</Text>
+      </Box>
+
+      <Box flexDirection="row" marginBottom={1}>
+        <Box flexDirection="column" marginRight={4}>
+          <Text color="white">/ for commands</Text>
+          <Text color="white">@ for file paths</Text>
+          <Text color="white">click esc to clear input</Text>
+        </Box>
+        
+        <Box flexDirection="column">
+          <Text color="white">ctrl + c to copy text</Text>
+          <Text color="white">ctrl + v to paste text</Text>
+        </Box>
+      </Box>
+
+      <Box>
+        <Text color="gray" italic>Esc to cancel</Text>
+      </Box>
+    </Box>
+  );
+
+};
+
+export default HelpView;

package/src/components/IAmAryx.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import { GRADIENT_BRAND } from '../theme.js';
+import { BRAND_NAME } from '../constants.js';
+
+export const GradientText: React.FC<{ text: string; bold?: boolean; colors?: string[] }> = ({ text, bold, colors = GRADIENT_BRAND }) => (
+  <>
+    {text.split('').map((char, i) => (
+      <Text key={i} color={colors[i % colors.length]} bold={bold}>{char}</Text>
+    ))}
+  </>
+);
+
+const IAmAryxView: React.FC = () => (
+  <Box
+    flexDirection="column"
+    marginTop={1}
+    paddingLeft={2}>
+    <Box marginBottom={1}>
+      <Text color="white" bold>Hey! I'm </Text>
+      <GradientText text={BRAND_NAME} bold />
+      <Text color="white" bold> 🚀</Text>
+    </Box>
+
+    <Box
+      flexDirection="column"
+      marginBottom={1}>
+      <Text color="gray">Your AI buddy in the terminal — built for learning, experimenting, and occasionally breaking things 😄</Text>
+      <Text color="gray">I help you explore ideas, practice skills, and try out crazy concepts.</Text>
+      <Text color="gray">Not perfect, but always improving.</Text>
+    </Box>
+
+    <Box flexDirection="column">
+      <Box justifyContent="flex-start">
+        <Text color="gray">— Developed by </Text>
+        <Text color="white" bold>Vasu Bhalodiya</Text>
+      </Box>
+      <Box justifyContent="flex-start">
+        <Text color="gray" bold italic>  Linkedin → </Text>
+        <Text color="cyan" italic>https://www.linkedin.com/in/vasubhalodiya</Text>
+      </Box>
+    </Box>
+
+    <Box marginTop={1}>
+      <Text color="gray" italic>Esc to cancel</Text>
+    </Box>
+  </Box>
+);
+
+
+export default IAmAryxView;

package/src/components/Loader.tsx

@@ -0,0 +1,57 @@
+import React, { useState, useEffect } from 'react';
+import { Box, Text } from 'ink';
+import { theme, SHIMMER_COLORS } from '../theme.js';
+import { SPINNER_FRAMES } from '../constants.js';
+
+const Loader: React.FC<{ text?: string }> = ({ text = 'Thinking...' }) => {
+  const [iconFrame, setIconFrame] = useState(0);
+  const [shimmerFrame, setShimmerFrame] = useState(0);
+
+  // Icon speed → 180ms
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setIconFrame((prev) => (prev + 1) % SPINNER_FRAMES.length);
+    }, 180);
+
+    return () => clearInterval(timer);
+  }, []);
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setShimmerFrame((prev) => prev + 1);
+    }, 120);
+
+    return () => clearInterval(timer);
+  }, []);
+
+  return (
+    <Box flexDirection="row" marginBottom={1}>
+      <Text color={theme.colors.highlight}>
+        {SPINNER_FRAMES[iconFrame]}
+      </Text>
+
+      <Box marginLeft={2}>
+        <Text>
+          {text.split('').map((char, i) => {
+            const pos = shimmerFrame % 26;
+
+            let color = theme.colors.highlight;
+
+            if (i === pos) color = SHIMMER_COLORS.bright;
+            else if (i === pos - 1) color = SHIMMER_COLORS.mid;
+            else if (i === pos - 2) color = SHIMMER_COLORS.dim;
+
+            return (
+              <Text key={i} color={color}>
+                {char}
+              </Text>
+            );
+          })}
+        </Text>
+      </Box>
+    </Box>
+  );
+};
+
+
+export default Loader;

package/src/components/LoginView.tsx

@@ -0,0 +1,129 @@
+import React, { useEffect, useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { startCallbackServer } from '../services/loginServer.js';
+import { saveAuth } from '../services/auth.js';
+import { openBrowser, copyToClipboard } from '../services/platform.js';
+import { theme } from '../theme.js';
+import { WEB_URL, SPINNER_FRAMES } from '../constants.js';
+
+type LoginState = 'opening' | 'waiting' | 'success' | 'error';
+
+interface Props {
+  onComplete: () => void;
+  onCancel: () => void;
+}
+
+const LoginView: React.FC<Props> = ({ onComplete, onCancel }) => {
+  const [state, setState] = useState<LoginState>('opening');
+  const [email, setEmail] = useState('');
+  const [loginUrl, setLoginUrl] = useState('');
+  const [errorMsg, setErrorMsg] = useState('');
+  const [copied, setCopied] = useState(false);
+  const [frame, setFrame] = useState(0);
+
+  useEffect(() => {
+    if (state !== 'opening') return;
+    const t = setInterval(() => setFrame(f => (f + 1) % SPINNER_FRAMES.length), 180);
+    return () => clearInterval(t);
+  }, [state]);
+
+  useInput((input, key) => {
+    if (key.escape) { onCancel(); return; }
+    if (state === 'success' && key.return) { onComplete(); return; }
+    if (state === 'waiting' && input === 'c') {
+      copyToClipboard(loginUrl);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
+  });
+
+  useEffect(() => {
+    (async () => {
+      try {
+        const { port, waitForCallback } = await startCallbackServer();
+        const url = `${WEB_URL}/auth?cli_port=${port}`;
+        openBrowser(url);
+        setLoginUrl(url);
+        setState('waiting');
+
+        const data = await waitForCallback;
+
+        saveAuth({
+          uid: data.uid,
+          email: data.email,
+          displayName: data.displayName,
+          photoURL: data.photoURL,
+          idToken: data.idToken,
+          refreshToken: data.refreshToken,
+          idTokenExpiry: Date.now() + 3_600_000,
+        });
+
+        setEmail(data.email);
+        setState('success');
+      } catch (err: unknown) {
+        const msg = err instanceof Error ? err.message : 'Unknown error';
+        setErrorMsg(msg);
+        setState('error');
+      }
+    })();
+  }, []);
+
+  return (
+    <Box 
+      flexDirection="column" 
+      paddingX={1} 
+      marginTop={0}>
+      <Text bold color={theme.colors.highlight}>Login</Text>
+
+      <Box 
+        flexDirection="column" 
+        marginTop={1} 
+        paddingLeft={2}>
+        {state === 'opening' && (
+          <Box>
+            <Text color={theme.colors.highlight}>{SPINNER_FRAMES[frame]} </Text>
+            <Text color="white">Opening browser to sign in...</Text>
+          </Box>
+        )}
+
+        {state === 'waiting' && (
+          <Box flexDirection="column">
+            <Box>
+              <Text color="gray">Browser didn't open? Use the url below to sign in </Text>
+              
+              {copied
+                ? <Text color={theme.colors.highlight}>(Copied!)</Text>
+                : <Text color="gray">(c to copy)</Text>}
+            </Box>
+            
+            <Text color={theme.colors.primary}>{loginUrl}</Text>
+          </Box>
+        )}
+
+        {state === 'success' && (
+          <>
+            <Box flexDirection="row" flexWrap="nowrap">
+              <Text color="white">Logged in as </Text>
+              <Text color={theme.colors.primary}>{email}</Text>
+            </Box>
+
+            <Box flexDirection="column" marginTop={1}>
+              <Text color={theme.colors.highlight}>Login successful. Press Enter to continue…</Text>
+            </Box>
+          </>
+        )}
+
+        {state === 'error' && (
+          <Text color="red">Login failed: {errorMsg}</Text>
+        )}
+      </Box>
+
+      <Box marginTop={1}>
+        <Text color="gray" italic>Esc to cancel</Text>
+      </Box>
+    </Box>
+  );
+
+};
+
+export default LoginView;

package/src/components/Message.tsx

@@ -0,0 +1,65 @@
+import React, { useMemo } from 'react';
+import { Box, Text } from 'ink';
+import { Message as MessageType } from '../hooks/useChat.js';
+import { theme, USER_MESSAGE_BG } from '../theme.js';
+import { marked } from 'marked';
+import { markedTerminal } from 'marked-terminal';
+import chalk from 'chalk';
+
+const ext: any = markedTerminal({
+  tab: 0,
+  showSectionPrefix: false,
+  firstHeading: chalk.green.bold,
+});
+const originalText = ext.renderer.text;
+ext.renderer.text = function(text: any) {
+  if (typeof text === 'object' && text.tokens) {
+    return (this as any).parser.parseInline(text.tokens);
+  }
+  return originalText.apply(this, arguments as any);
+};
+marked.use(ext);
+
+
+interface MessageProps {
+  message: MessageType;
+}
+
+const Message: React.FC<MessageProps> = ({ message }) => {
+  const isUser = message.role === 'user';
+  const width = process.stdout.columns || 80;
+
+  const formattedAssistantContent = useMemo(() => {
+    if (isUser) return '';
+    try {
+      // Use marked.parse with async: false for AI messages only
+      const parsed = marked.parse(message.content, { async: false }) as string;
+      return parsed.trimEnd();
+    } catch (e) {
+      return message.content;
+    }
+  }, [message.content, isUser]);
+
+  return (
+    <Box 
+      flexDirection="row" 
+      marginBottom={1} 
+      width="100%">
+      <Text 
+        backgroundColor={isUser ? USER_MESSAGE_BG : undefined} 
+        color="white">
+        {isUser ? (
+          ('❯  ' + message.content).padEnd(width, ' ')
+        ) : (
+          <>
+            <Text color={theme.colors.highlight}>✦  </Text>
+            {formattedAssistantContent.padEnd(Math.max(0, width - 3), ' ')}
+          </>
+        )}
+      </Text>
+    </Box>
+  );
+};
+
+
+export default Message;

package/src/components/ThemeSelector.tsx

@@ -0,0 +1,92 @@
+import React, { useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import chalk from 'chalk';
+import { theme, saveTheme, DIFF_COLORS } from '../theme.js';
+import { BRAND_NAME } from '../constants.js';
+
+const OPTIONS: { id: 1 | 2 | 3 | 4; label: string }[] = [
+  { id: 1, label: 'Modern mode' },
+  { id: 2, label: 'Classic mode' },
+  { id: 3, label: 'Modern mode (text only)' },
+  { id: 4, label: 'Classic mode (text only)' },
+];
+
+const PREVIEW = [
+  { t: 's', n: 1, l: 'function greet() {' },
+  { t: 'r', n: 2, l: '  console.log("Hello, World!");' },
+  { t: 'a', n: 2, l: `  console.log("Hello, ${BRAND_NAME}!");` },
+  { t: 's', n: 3, l: '}' },
+];
+
+const makePreview = (id: 1 | 2 | 3 | 4): string => {
+  const { add, rm } = DIFF_COLORS[id];
+  const bg = id <= 2;
+  return PREVIEW.map(({ t, n, l }) => {
+    const ln = String(n).padStart(4);
+    if (t === 's') return chalk.gray(`  ${ln}  ${l}`);
+    if (t === 'r') return bg ? chalk.bgHex(rm).black(`- ${ln}  ${l}`) : chalk.hex(rm)(`- ${ln}  ${l}`);
+    return bg ? chalk.bgHex(add).black(`+ ${ln}  ${l}`) : chalk.hex(add)(`+ ${ln}  ${l}`);
+  }).join('\n');
+};
+
+const ThemeSelector: React.FC<{ onClose: () => void; isSetup?: boolean }> = ({ onClose, isSetup }) => {
+  const [cursor, setCursor] = useState(theme.diffTheme - 1);
+
+  useInput((_, key) => {
+    if (key.upArrow) setCursor(c => (c > 0 ? c - 1 : OPTIONS.length - 1));
+    if (key.downArrow) setCursor(c => (c < OPTIONS.length - 1 ? c + 1 : 0));
+    if (key.return) {
+      theme.diffTheme = OPTIONS[cursor].id;
+      saveTheme(OPTIONS[cursor].id);
+      onClose();
+    }
+    if (key.escape && !isSetup) onClose();
+  });
+
+  return (
+    <Box 
+      flexDirection="column" 
+      paddingX={1} 
+      marginTop={1}>
+      {!isSetup && <Text bold color={theme.colors.highlight}>Theme</Text>}
+      
+      <Text 
+        bold={isSetup} 
+        color={isSetup ? 'white' : 'gray'}>Choose the text style that looks best with your terminal</Text>
+      
+      {isSetup && <Text color="gray">To change this later, run /theme</Text>}
+
+      <Box flexDirection="column" marginTop={1}>
+        {OPTIONS.map((opt, i) => (
+          <Box key={opt.id}>
+            <Text color={cursor === i ? theme.colors.highlight : undefined}>{cursor === i ? '❯ ' : '   '}</Text>
+            <Text color={cursor === i ? 'white' : 'gray'}>{i + 1}. {opt.label}</Text>
+            {theme.diffTheme === opt.id && <Text color={theme.colors.highlight}> ✔</Text>}
+          </Box>
+        ))}
+      </Box>
+
+      <Box 
+        flexDirection="column" 
+        marginTop={1} 
+        paddingLeft={1} 
+        borderStyle="round" 
+        borderColor="gray">
+        <Text>{makePreview(OPTIONS[cursor].id)}</Text>
+      </Box>
+
+      <Box marginY={1}>
+        <Text color="gray" dimColor>Syntax theme: {OPTIONS[cursor].label}</Text>
+      </Box>
+
+      {!isSetup && (
+        <Box>
+          <Text color="gray" italic>Enter to select · Esc to cancel</Text>
+        </Box>
+      )}
+    </Box>
+  );
+
+};
+
+export default ThemeSelector;