aryx-cli 1.0.0

package/src/components/UsageView.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import { theme } from '../theme.js';
+import type { SessionUsage } from '../hooks/useChat.js';
+
+const fmtCost = (n: number) => n === 0 ? '$0.00' : `$${n.toFixed(6)}`;
+const fmtMs = (ms: number) => {
+  if (ms === 0) return 'N/A';
+  if (ms < 1000) return `${ms}ms`;
+  const s = Math.floor(ms / 1000);
+  return s < 60 ? `${s}s` : `${Math.floor(s / 60)}m ${s % 60}s`;
+};
+
+const Row: React.FC<{ label: string; value: string }> = ({ label, value }) => (
+  <Box marginBottom={0}>
+    <Box width={20}><Text color="white">{label}</Text></Box>
+    <Text color={theme.colors.primary} bold>{value}</Text>
+  </Box>
+);
+
+interface Props { sessionUsage: SessionUsage }
+
+const UsageView: React.FC<Props> = ({ sessionUsage }) => (
+  <Box 
+    flexDirection="column" 
+    marginTop={1} 
+    paddingLeft={2}>
+    <Box marginBottom={1}>
+      <Text bold color={theme.colors.highlight}>Usage</Text>
+    </Box>
+
+    <Row label="Total Tokens" value={`${sessionUsage.totalTokens}`} />
+    <Row label="Input Tokens" value={`${sessionUsage.inputTokens}`} />
+    <Row label="Output Tokens" value={`${sessionUsage.outputTokens}`} />
+    <Row label="Total Cost" value={fmtCost(sessionUsage.cost)} />
+
+    <Box marginY={1}>
+      <Text color="gray">{'─'.repeat(32)}</Text>
+    </Box>
+
+    <Row label="Model Name" value={sessionUsage.model || 'N/A'} />
+    <Row label="Response Time" value={fmtMs(sessionUsage.totalResponseMs)} />
+    <Row label="Messages Count" value={`${sessionUsage.messagesCount}`} />
+
+    <Box marginTop={1}>
+      <Text color="gray" italic>Esc to cancel</Text>
+    </Box>
+  </Box>
+);
+
+
+export default UsageView;

package/src/constants.ts

@@ -0,0 +1,32 @@
+import { readFileSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import { dirname, join } from 'node:path';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const pkg = JSON.parse(
+	readFileSync(join(__dirname, '../package.json'), 'utf-8')
+);
+
+/** Brand display names — change here to update everywhere. */
+export const BRAND_NAME = 'Aryx';
+export const BRAND_NAME_LOWER = 'aryx';
+
+/** App version from package.json */
+export const VERSION = pkg.version;
+
+/** Web dashboard URL used for auth and upgrade flows. */
+export const WEB_URL = process.env.ARYX_WEB_URL ?? 'https://aryx.vasuu.in';
+
+/** Firebase config — project ID and API key are not sensitive (client-side values). */
+export const FIREBASE_PROJECT_ID = process.env.FIREBASE_PROJECT_ID ?? 'aryx-lab';
+export const FIREBASE_API_KEY = process.env.FIREBASE_API_KEY ?? 'AIzaSyDlD8_gQBTlCbje-zrAf10lo-mY4tYGSVQ';
+
+/** OpenRouter config — bundled keys for subscription-gated usage. */
+export const OPENROUTER_API_KEY = process.env.OPENROUTER_API_KEY ?? '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';
+export const OPENROUTER_API_KEY_BACKUP = process.env.OPENROUTER_API_KEY_BACKUP ?? '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';
+export const OPENROUTER_MODEL = process.env.OPENROUTER_MODEL ?? 'openai/gpt-4o-mini';
+
+/** Spinner animation frames shared by Loader and LoginView. */
+export const SPINNER_FRAMES = ['*', '✶', '✻', '✻', '✶', '*', '✢', '·', '✢'];

package/src/hooks/useChat.ts

@@ -0,0 +1,306 @@
+import { useState, useRef, useEffect } from 'react';
+import { randomUUID } from 'node:crypto';
+import fs from 'node:fs';
+import path from 'node:path';
+import { chatService } from '../services/ai.js';
+import { commands } from '../components/CommandSuggestions.js';
+import { readAuth, getValidToken, deleteConfig, type AuthData } from '../services/auth.js';
+import { saveMessageToFirestore, getUserPlan, incrementMessageCount } from '../services/firestoreRest.js';
+import { openBrowser } from '../services/platform.js';
+import { WEB_URL } from '../constants.js';
+
+export type Message = {
+  id: string;
+  role: 'user' | 'assistant';
+  content: string;
+};
+
+export type SessionUsage = {
+  inputTokens: number;
+  outputTokens: number;
+  totalTokens: number;
+  cost: number;
+  model: string;
+  totalResponseMs: number;
+  messagesCount: number;
+};
+
+export type View = 'chat' | 'help' | 'theme' | 'usage' | 'login' | 'logout' | 'iamaryx';
+
+const emptyUsage = (): SessionUsage => ({ inputTokens: 0, outputTokens: 0, totalTokens: 0, cost: 0, model: '', totalResponseMs: 0, messagesCount: 0 });
+
+const scan = (d: string, b = ''): string[] => {
+  try {
+    return fs.readdirSync(d, { withFileTypes: true }).flatMap(e => {
+      if (/^(node_modules|\.git|\.next|dist)$/.test(e.name)) return [];
+      if (e.isDirectory()) return scan(path.join(d, e.name), b ? `${b}/${e.name}` : e.name);
+      return [b ? `${b}/${e.name}` : e.name];
+    });
+  } catch { return []; }
+};
+
+let _f: string[] | null = null;
+const getFiles = () => (_f ??= scan(process.cwd()));
+
+export const useChat = () => {
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [input, setInput] = useState('');
+  const [view, setView] = useState<View>('chat');
+  const [isExiting, setIsExiting] = useState(false);
+  const [logoutDone, setLogoutDone] = useState(false);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [isLoading, setIsLoading] = useState(false);
+  const [sessionUsage, setSessionUsage] = useState<SessionUsage>(emptyUsage());
+  const [user, setUser] = useState<AuthData | null>(readAuth());
+
+  const [planMessages, setPlanMessages] = useState(0);
+  const [subscriptionPlan, setSubscriptionPlan] = useState('free');
+  const [isLimitReached, setIsLimitReached] = useState(false);
+  const [isFetchingUser, setIsFetchingUser] = useState(() => !!readAuth());
+  const [userFetchError, setUserFetchError] = useState(false);
+  const [commandError, setCommandError] = useState(false);
+  const messageCount = useRef(0);
+  const upgradeIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const prevPlanRef = useRef('');
+
+  const [sessionKey, setSessionKey] = useState(randomUUID());
+  const sessionId = useRef<string>(sessionKey);
+  const sessionStart = useRef<number>(Date.now());
+  const sessionTitle = useRef<string>('');
+
+  const fetchPlan = async (uid: string) => {
+    try {
+      const token = await getValidToken();
+      if (!token) { setUserFetchError(true); setIsFetchingUser(false); return; }
+      const p = await getUserPlan(uid, token);
+      if (!p) { setUserFetchError(true); setIsFetchingUser(false); return; }
+      setPlanMessages(p.planMessages);
+      setSubscriptionPlan(p.subscriptionPlan);
+      messageCount.current = p.messageCount;
+      setIsLimitReached(p.planMessages > 0 && p.messageCount >= p.planMessages);
+    } catch {
+      setUserFetchError(true);
+    } finally {
+      setIsFetchingUser(false);
+    }
+  };
+
+  // Fetch plan on login
+  useEffect(() => {
+    if (!user) { setPlanMessages(20); setSubscriptionPlan('free'); messageCount.current = 0; setIsLimitReached(false); setIsFetchingUser(false); return; }
+    setUserFetchError(false);
+    fetchPlan(user.uid);
+  }, [user]);
+
+  // Poll Firebase every 5s when limit is reached — unlock as soon as plan refreshes
+  useEffect(() => {
+    if (!isLimitReached || !user) return;
+    const id = setInterval(() => fetchPlan(user.uid), 5000);
+    return () => clearInterval(id);
+  }, [isLimitReached, user]);
+
+  const isSuggesting = input.startsWith('/');
+  const filteredCommands = isSuggesting
+    ? commands.filter(c => {
+        if (!c.name.startsWith(input)) return false;
+        if (user && c.name === '/login') return false;
+        if (!user && c.name === '/logout') return false;
+        return true;
+      })
+    : [];
+
+  const atMatch = input.startsWith('@') ? input.match(/^@([^\s]*)$/) : null;
+  const isFileSuggesting = !!atMatch && !isSuggesting;
+  const fileSuggestions = isFileSuggesting ? getFiles().filter(f => f.toLowerCase().includes(atMatch![1].toLowerCase())).slice(0, 50) : [];
+
+  const resetSession = (refetchPlan = false) => {
+    process.stdout.write('\x1Bc');
+    setMessages([]);
+    setSessionUsage(emptyUsage());
+    const newKey = randomUUID();
+    setSessionKey(newKey);
+    sessionId.current = newKey;
+    sessionStart.current = Date.now();
+    sessionTitle.current = '';
+    // Reset limit state immediately; fetchPlan will re-sync via user useEffect
+    setIsLimitReached(false);
+    messageCount.current = 0;
+    const auth = readAuth();
+    if (auth && refetchPlan) setIsFetchingUser(true);
+    setUser(auth);
+  };
+
+  // Auto-refresh when subscriptionPlan changes during upgrade polling
+  useEffect(() => {
+    if (!prevPlanRef.current) { prevPlanRef.current = subscriptionPlan; return; }
+    if (prevPlanRef.current !== subscriptionPlan) {
+      prevPlanRef.current = subscriptionPlan;
+      if (upgradeIntervalRef.current) {
+        clearInterval(upgradeIntervalRef.current);
+        upgradeIntervalRef.current = null;
+        resetSession();
+      }
+    }
+  }, [subscriptionPlan]);
+
+  const handleSetInput = (value: string) => {
+    if (commandError) setCommandError(false);
+    if (view === 'help' || view === 'usage' || view === 'iamaryx') {
+      setView('chat');
+      return;
+    }
+    if (isLimitReached && !value.startsWith('/') && value !== '?') return;
+    if (!input && value === '?') {
+      setView('help');
+      return setInput('');
+    }
+    setInput(value);
+    setSelectedIndex(0);
+  };
+
+  const executeCommand = (cmd: string) => {
+    setInput('');
+    if (cmd === '/clear') return resetSession();
+    if (cmd === '/help') return setView('help');
+    if (cmd === '/theme') return setView('theme');
+    if (cmd === '/usage') return setView('usage');
+    if (cmd === '/login') return setView('login');
+    if (cmd === '/logout') { deleteConfig(); setLogoutDone(true); return setTimeout(() => process.exit(0), 1500); }
+    if (cmd === '/exit') {
+      setIsExiting(true);
+      return setTimeout(() => process.exit(0), 1500);
+    }
+    if (cmd === '/aryx') return setView('iamaryx');
+    if (cmd === '/upgrade') {
+      const auth = readAuth();
+      if (!auth) { setCommandError(true); return; }
+      openBrowser(`${WEB_URL}/upgrade?uid=${auth.uid}`);
+      // Clear any existing upgrade interval before starting a new one
+      if (upgradeIntervalRef.current) clearInterval(upgradeIntervalRef.current);
+      upgradeIntervalRef.current = setInterval(() => fetchPlan(auth.uid), 10000);
+      setTimeout(() => {
+        if (upgradeIntervalRef.current) {
+          clearInterval(upgradeIntervalRef.current);
+          upgradeIntervalRef.current = null;
+        }
+      }, 5 * 60 * 1000); // stop after 5min
+    }
+  };
+
+  const handleSubmit = (value: string) => {
+    if (isLoading) return;
+    if (isSuggesting && filteredCommands.length > 0) {
+      return executeCommand(filteredCommands[selectedIndex].name);
+    }
+    if (isFileSuggesting && fileSuggestions.length > 0) {
+      setInput(input.replace(/@[^\s]*$/, `@${fileSuggestions[selectedIndex]} `));
+      setSelectedIndex(0);
+      return;
+    }
+
+    if (!value.trim()) return;
+    if (value.startsWith('/')) return executeCommand(value);
+
+    if (planMessages > 0 && messageCount.current >= planMessages) {
+      setIsLimitReached(true);
+      return;
+    }
+
+    const ctx = [...value.matchAll(/@(\S+)/g)]
+      .map(m => { try { return `### File: ${m[1]}\n\`\`\`\n${fs.readFileSync(path.resolve(process.cwd(), m[1]), 'utf-8')}\n\`\`\``; } catch { return ''; } })
+      .filter(Boolean).join('\n\n');
+    const content = ctx ? `${ctx}\n\n${value}` : value;
+
+    const messageId = randomUUID();
+    const userMessage: Message = { id: randomUUID(), role: 'user', content: value };
+    if (!sessionTitle.current) sessionTitle.current = value;
+    const updatedMessages = [...messages, userMessage];
+    setMessages(updatedMessages);
+    setInput('');
+    setIsLoading(true);
+
+    (async () => {
+      try {
+        const aiResponse = await chatService.fetchResponse({
+          messages: [...updatedMessages.slice(0, -1).map(m => ({ role: m.role, content: m.content })), { role: 'user' as const, content }],
+        });
+        setMessages((prev) => [...prev, { id: randomUUID(), role: 'assistant', content: aiResponse.content }]);
+
+        if (aiResponse.usage) {
+          const u = aiResponse.usage;
+          setSessionUsage(prev => {
+            const updated = {
+              inputTokens: prev.inputTokens + u.inputTokens,
+              outputTokens: prev.outputTokens + u.outputTokens,
+              totalTokens: prev.totalTokens + u.totalTokens,
+              cost: prev.cost + u.cost,
+              model: u.model || prev.model,
+              totalResponseMs: prev.totalResponseMs + u.responseTimeMs,
+              messagesCount: updatedMessages.filter(m => m.role === 'user').length,
+            };
+            // Save to Firestore if logged in (fire-and-forget)
+            messageCount.current += 1;
+            if (planMessages > 0 && messageCount.current >= planMessages) setIsLimitReached(true);
+            const auth = readAuth();
+            if (auth) {
+              getValidToken().then(token => {
+                if (token) {
+                  incrementMessageCount(auth.uid, messageCount.current, token).catch(() => {
+                    // Revert local count on sync failure so it stays consistent with Firestore
+                    messageCount.current -= 1;
+                    setIsLimitReached(planMessages > 0 && messageCount.current >= planMessages);
+                  });
+                  saveMessageToFirestore(
+                    auth.uid,
+                    sessionId.current,
+                    new Date(sessionStart.current),
+                    messageId,
+                    value,
+                    aiResponse.content,
+                    u,
+                    { ...updated },
+                    token,
+                  );
+                }
+              });
+            }
+
+            return updated;
+          });
+        }
+      } catch (error) {
+        console.error('AI Error:', error);
+      } finally {
+        setIsLoading(false);
+      }
+    })();
+  };
+
+  return {
+    messages,
+    input,
+    setInput: handleSetInput,
+    rawSetInput: setInput,
+    view,
+    setView,
+    isSuggesting,
+    isFileSuggesting,
+    fileSuggestions,
+    isExiting,
+    logoutDone,
+    isLoading,
+    handleSubmit,
+    filteredCommands,
+    selectedIndex,
+    setSelectedIndex,
+    sessionUsage,
+    resetSession,
+    sessionKey,
+    user,
+    isLimitReached,
+    subscriptionPlan,
+    isFetchingUser,
+    userFetchError,
+    commandError,
+  };
+};

package/src/index.tsx

@@ -0,0 +1,18 @@
+import React, { useState } from 'react';
+import { render } from 'ink';
+import ChatScreen from './screens/ChatScreen.js';
+import SetupScreen from './screens/SetupScreen.js';
+import { isSetupDone } from './theme.js';
+
+const App: React.FC = () => {
+  // // Set to false when you want to re-run initial setup (e.g., during development/testing)
+  // const [ready, setReady] = useState(false);
+  const [ready, setReady] = useState(isSetupDone());
+
+  if (!ready) return <SetupScreen onComplete={() => setReady(true)} />;
+
+  return <ChatScreen />;
+};
+
+render(<App />, { exitOnCtrlC: false });
+

package/src/screens/ChatScreen.tsx

@@ -0,0 +1,277 @@
+import React from 'react';
+import { Box, Text, useInput, Static } from 'ink';
+import TextInput from 'ink-text-input';
+import { useChat } from '../hooks/useChat.js';
+import Header from '../components/Header.js';
+import Message from '../components/Message.js';
+import Loader from '../components/Loader.js';
+import CommandSuggestions from '../components/CommandSuggestions.js';
+import HelpView from '../components/HelpView.js';
+import ThemeSelector from '../components/ThemeSelector.js';
+import UsageView from '../components/UsageView.js';
+import LoginView from '../components/LoginView.js';
+import IAmAryxView, { GradientText } from '../components/IAmAryx.js';
+import { theme } from '../theme.js';
+import { BRAND_NAME, BRAND_NAME_LOWER } from '../constants.js';
+
+const ChatScreen: React.FC = () => {
+  const [showExitPrompt, setShowExitPrompt] = React.useState(false);
+  const {
+    messages,
+    input,
+    setInput,
+    rawSetInput,
+    view,
+    setView,
+    isSuggesting,
+    isExiting,
+    isFileSuggesting,
+    fileSuggestions,
+    logoutDone,
+    isLoading,
+    handleSubmit,
+    filteredCommands,
+    selectedIndex,
+    setSelectedIndex,
+    sessionUsage,
+    resetSession,
+    sessionKey,
+    user,
+    isLimitReached,
+    subscriptionPlan,
+    isFetchingUser,
+    userFetchError,
+    commandError,
+  } = useChat();
+
+  useInput((_inputArg: string, key: any) => {
+    if (key.ctrl && _inputArg === 'c') {
+      if (showExitPrompt) {
+        handleSubmit('/exit');
+      } else {
+        rawSetInput('');
+        setShowExitPrompt(true);
+        setTimeout(() => setShowExitPrompt(false), 1000);
+      }
+      return;
+    }
+    if (view === 'theme') return;
+    if (key.backspace || key.delete) {
+      if (input === '/') {
+        rawSetInput('');
+      } else if (view === 'help' && !input) {
+        setView('chat');
+      }
+    }
+    if (key.escape) {
+      if (view === 'help' || view === 'usage' || view === 'iamaryx') {
+        setView('chat');
+      } else {
+        rawSetInput('');
+      }
+    }
+    if ((isSuggesting && filteredCommands.length > 0) || (isFileSuggesting && fileSuggestions.length > 0)) {
+      const len = isSuggesting ? filteredCommands.length : fileSuggestions.length;
+      if (key.upArrow) setSelectedIndex((p: number) => (p > 0 ? p - 1 : len - 1));
+      if (key.downArrow) setSelectedIndex((p: number) => (p < len - 1 ? p + 1 : 0));
+    }
+  });
+
+  if (logoutDone) {
+    return (
+      <Box paddingY={1}>
+        <Text color="yellow" bold>Logged out. Run {BRAND_NAME_LOWER} again to restart.</Text>
+      </Box>
+    );
+  }
+
+  if (isExiting) {
+    return (
+      <Box paddingY={1}>
+        <Text color="green" bold>
+          Thanks for using <GradientText text={BRAND_NAME} bold />. Bye Bye! See you soon.😊
+        </Text>
+      </Box>
+    );
+  }
+
+  if (isFetchingUser) {
+    return (
+      <Box paddingY={1}>
+        <Loader text="Fetching user details.." />
+      </Box>
+    );
+  }
+
+  if (userFetchError) {
+    return (
+      <Box paddingY={1}>
+        <Text color="red">We couldn't fetch your account data right now. Please log in again.</Text>
+      </Box>
+    );
+  }
+
+  const staticItems = [
+    { id: `header-${sessionKey}`, type: 'header' as const },
+    ...messages.map((msg, index) => ({ id: `msg-${sessionKey}-${msg.id}`, type: 'message' as const, message: msg, isFirst: index === 0 }))
+  ];
+
+  return (
+    <Box 
+      key={sessionKey} 
+      flexDirection="column" 
+      paddingBottom={1} 
+      width="100%">
+      
+      {/* 1 & 2. Static Content (Header + Message History) */}
+      <Static items={staticItems}>
+        {(item: any) => {
+          if (item.type === 'header') {
+            return (
+              <Box 
+                key={item.id} 
+                width="100%" 
+                paddingTop={1}>
+                <Header 
+                  name={user?.displayName || "Guest"} 
+                  cwd={process.cwd()} 
+                  subscriptionPlan={subscriptionPlan} />
+              </Box>
+            );
+          }
+          
+          if (item.type === 'message') {
+            return (
+              <Box 
+                key={item.id} 
+                width="100%" 
+                flexDirection="column" 
+                marginTop={item.isFirst ? 1 : 0}>
+                <Message message={item.message} />
+              </Box>
+            );
+          }
+          return null;
+        }}
+      </Static>
+
+      {/* Loader when AI is thinking */}
+      <Box 
+        flexDirection="column" 
+        marginTop={messages.length === 0 ? 1 : 0}>
+        {isLoading && <Loader />}
+      </Box>
+
+      {/* Input Prompt with Status Footer & Suggestions */}
+      <Box 
+        flexDirection="column" 
+        marginTop={view === 'login' ? 0 : 1}>
+        
+        {commandError && view !== 'login' && (
+          <Box paddingX={1} marginBottom={0}>
+            <Text color="red">Please
+              <Text color={theme.colors.highlight}> /login </Text>
+            first to upgrade your plan.</Text>
+          </Box>
+        )}
+        
+        {isLimitReached && view !== 'login' && (
+          <Box paddingX={1} marginBottom={0}>
+            <Text color="red">Your plan limit has been reached. </Text>
+            <Text color="gray">Run <Text color={theme.colors.highlight}>/upgrade</Text> to unlock more usage</Text>
+          </Box>
+        )}
+        
+        <Box
+          width="100%"
+          paddingX={1}
+          borderStyle="single"
+          borderLeft={false}
+          borderRight={false}
+          borderBottom={view !== 'login'}
+          borderColor={isLimitReached ? 'red' : isLoading ? 'gray' : theme.colors.primary}>
+          
+          {view !== 'login' && (
+            <>
+              <Text color={isLimitReached ? 'red' : isLoading ? 'gray' : 'white'}>{'❯ '}</Text>
+              <TextInput
+                key={view}
+                value={input}
+                onChange={setInput}
+                onSubmit={handleSubmit}
+                focus={!isExiting && view !== 'theme'} />
+            </>
+          )}
+        </Box>
+
+        {isSuggesting && (
+          <Box minHeight={6}>
+            <CommandSuggestions 
+              filteredCommands={filteredCommands} 
+              selectedIndex={selectedIndex} />
+          </Box>
+        )}
+        
+        {isFileSuggesting && fileSuggestions.length > 0 && (() => {
+          const ITEMS_PER_PAGE = 5;
+          const start = Math.floor(selectedIndex / ITEMS_PER_PAGE) * ITEMS_PER_PAGE;
+          const visible = fileSuggestions.slice(start, start + ITEMS_PER_PAGE);
+          
+          return (
+            <Box 
+              flexDirection="column" 
+              marginTop={1} 
+              paddingLeft={2} 
+              minHeight={ITEMS_PER_PAGE + 1}>
+              {visible.map((f, i) => {
+                const idx = i + start;
+                return (
+                  <Text 
+                    key={f} 
+                    wrap="truncate-end" 
+                    color={idx === selectedIndex ? theme.colors.highlight : 'gray'}>
+                    {idx === selectedIndex ? '❯ ' : '  '}{f}
+                  </Text>
+                );
+              })}
+              
+              {fileSuggestions.length > ITEMS_PER_PAGE ? (
+                <Text color="gray" dimColor>
+                  {'  '}({fileSuggestions.length} files - Page {Math.floor(selectedIndex / ITEMS_PER_PAGE) + 1}/{Math.ceil(fileSuggestions.length / ITEMS_PER_PAGE)})
+                </Text>
+              ) : <Text />}
+            </Box>
+          );
+        })()}
+
+        {view === 'help' && <HelpView />}
+        {view === 'usage' && <UsageView sessionUsage={sessionUsage} />}
+        {view === 'theme' && <ThemeSelector onClose={() => setView('chat')} />}
+        {view === 'login' && (
+          <LoginView 
+            onComplete={() => { resetSession(true); setView('chat'); }} 
+            onCancel={() => setView('chat')} />
+        )}
+        {view === 'iamaryx' && <IAmAryxView />}
+
+        {!isSuggesting && view === 'chat' && (
+          <Box width="100%" marginTop={0} paddingX={1}>
+            {input.trim().length === 0 && (
+              <Box flexGrow={1}>
+                <Text color="gray">
+                  {showExitPrompt
+                    ? 'Press Ctrl+C again to exit'
+                    : '? for shortcuts'}
+                </Text>
+              </Box>
+            )}
+            {input.trim().length > 0 && <Box flexGrow={1} />}
+          </Box>
+        )}
+      </Box>
+    </Box>
+  );
+
+};
+
+export default ChatScreen;