gencode-ai 0.1.0 → 0.1.2

package/src/cli/components/App.tsx

@@ -11,6 +11,7 @@ import {
   AssistantMessage,
   ToolCall,
   ToolResult,
+  PendingToolCall,
   InfoMessage,
   WelcomeMessage,
   CompletionMessage,
@@ -19,13 +20,24 @@ import { Header } from './Header.js';
 import { ProgressBar } from './Spinner.js';
 import { PromptInput, ConfirmPrompt } from './Input.js';
 import { ModelSelector } from './ModelSelector.js';
+import { ProviderManager } from './ProviderManager.js';
 import { CommandSuggestions, getFilteredCommands } from './CommandSuggestions.js';
+import {
+  PermissionPrompt,
+  PermissionRulesDisplay,
+  PermissionAuditDisplay,
+} from './PermissionPrompt.js';
+import { TodoList } from './TodoList.js';
 import { colors, icons } from './theme.js';
+import { getTodos } from '../../tools/index.js';
+import type { ProviderName } from '../../providers/index.js';
+import type { ApprovalAction, ApprovalSuggestion } from '../../permissions/types.js';
+import { gatherContextFiles, buildInitPrompt, getContextSummary } from '../../memory/index.js';
 
 // Types
 interface HistoryItem {
   id: string;
-  type: 'header' | 'welcome' | 'user' | 'assistant' | 'tool_call' | 'tool_result' | 'info' | 'completion';
+  type: 'header' | 'welcome' | 'user' | 'assistant' | 'tool_call' | 'tool_result' | 'info' | 'completion' | 'todos';
   content: string;
   meta?: Record<string, unknown>;
 }
@@ -33,11 +45,14 @@ interface HistoryItem {
 interface ConfirmState {
   tool: string;
   input: Record<string, unknown>;
-  resolve: (confirmed: boolean) => void;
+  suggestions: ApprovalSuggestion[];
+  resolve: (action: ApprovalAction) => void;
 }
 
 interface SettingsManager {
   save: (settings: { model?: string }) => Promise<void>;
+  getCwd?: () => string;
+  addPermissionRule?: (pattern: string, type: 'allow' | 'deny', level?: 'global' | 'project' | 'local') => Promise<void>;
 }
 
 interface Session {
@@ -46,10 +61,16 @@ interface Session {
   updatedAt: string;
 }
 
+interface PermissionSettings {
+  allow?: string[];
+  deny?: string[];
+}
+
 interface AppProps {
   config: AgentConfig;
   settingsManager?: SettingsManager;
   resumeLatest?: boolean;
+  permissionSettings?: PermissionSettings;
 }
 
 // ============================================================================
@@ -60,12 +81,28 @@ function useAgent(config: AgentConfig) {
   return agent;
 }
 
+// ============================================================================
+// Utils
+// ============================================================================
+const genId = () => Math.random().toString(36).slice(2);
+
+const formatRelativeTime = (dateStr: string) => {
+  const diff = Date.now() - new Date(dateStr).getTime();
+  const mins = Math.floor(diff / 60000);
+  const hrs = Math.floor(mins / 60);
+  const days = Math.floor(hrs / 24);
+  if (mins < 60) return `${mins}m`;
+  if (hrs < 24) return `${hrs}h`;
+  return `${days}d`;
+};
+
 // ============================================================================
 // Help Component
 // ============================================================================
 function HelpPanel() {
   const commands: [string, string][] = [
     ['/model [name]', 'Switch model'],
+    ['/provider', 'Manage providers'],
     ['/sessions', 'List sessions'],
     ['/resume [n]', 'Resume session'],
     ['/new', 'New session'],
@@ -92,16 +129,6 @@ interface SessionsTableProps {
 }
 
 function SessionsTable({ sessions }: SessionsTableProps) {
-  const formatTime = (dateStr: string) => {
-    const diff = Date.now() - new Date(dateStr).getTime();
-    const mins = Math.floor(diff / 60000);
-    const hrs = Math.floor(mins / 60);
-    const days = Math.floor(hrs / 24);
-    if (mins < 60) return `${mins}m`;
-    if (hrs < 24) return `${hrs}h`;
-    return `${days}d`;
-  };
-
   return (
     <Box flexDirection="column">
       {sessions.slice(0, 6).map((s, i) => (
@@ -109,23 +136,74 @@ function SessionsTable({ sessions }: SessionsTableProps) {
           <Text color={colors.textMuted}>{String(i + 1).padEnd(2)}</Text>
           <Text color={colors.primary}>{s.id.slice(0, 7).padEnd(8)}</Text>
           <Text>{s.title.slice(0, 25).padEnd(26)}</Text>
-          <Text color={colors.textMuted}>{formatTime(s.updatedAt)}</Text>
+          <Text color={colors.textMuted}>{formatRelativeTime(s.updatedAt)}</Text>
         </Text>
       ))}
     </Box>
   );
 }
 
+// ============================================================================
+// Memory Files Display Component
+// ============================================================================
+interface MemoryFileInfo {
+  path: string;
+  level: string;
+  size: number;
+  type: 'file' | 'rule';
+}
+
+function MemoryFilesDisplay({ files }: { files: MemoryFileInfo[] }) {
+  const formatSize = (bytes: number): string => {
+    if (bytes < 1024) return `${bytes}B`;
+    return `${(bytes / 1024).toFixed(1)}KB`;
+  };
+
+  const memoryFiles = files.filter((f) => f.type === 'file');
+  const ruleFiles = files.filter((f) => f.type === 'rule');
+
+  return (
+    <Box flexDirection="column">
+      {memoryFiles.length > 0 && (
+        <>
+          <Text color={colors.info}>Loaded Memory Files:</Text>
+          {memoryFiles.map((f, i) => (
+            <Text key={f.path}>
+              <Text color={colors.textMuted}>  [{i + 1}] </Text>
+              <Text color={colors.primary}>{f.path} </Text>
+              <Text color={colors.textMuted}>({f.level}, {formatSize(f.size)})</Text>
+            </Text>
+          ))}
+        </>
+      )}
+      {ruleFiles.length > 0 && (
+        <Box flexDirection="column" marginTop={memoryFiles.length > 0 ? 1 : 0}>
+          <Text color={colors.info}>
+            Loaded Rules:
+          </Text>
+          {ruleFiles.map((f, i) => (
+            <Text key={f.path}>
+              <Text color={colors.textMuted}>  [{i + 1}] </Text>
+              <Text color={colors.warning}>{f.path} </Text>
+              <Text color={colors.textMuted}>({f.level}, {formatSize(f.size)})</Text>
+            </Text>
+          ))}
+        </Box>
+      )}
+      {files.length === 0 && (
+        <Text color={colors.textMuted}>No memory files loaded</Text>
+      )}
+    </Box>
+  );
+}
+
 // ============================================================================
 // Main App
 // ============================================================================
-export function App({ config, settingsManager, resumeLatest }: AppProps) {
+export function App({ config, settingsManager, resumeLatest, permissionSettings }: AppProps) {
   const { exit } = useApp();
   const agent = useAgent(config);
 
-  // Generate unique ID
-  const genId = () => Math.random().toString(36).slice(2);
-
   // Initial header item
   const cwd = config.cwd || process.cwd();
   const home = process.env.HOME || '';
@@ -154,11 +232,17 @@ export function App({ config, settingsManager, resumeLatest }: AppProps) {
   const [isThinking, setIsThinking] = useState(false);
   const [streamingText, setStreamingText] = useState('');
   const streamingTextRef = useRef(''); // Track current streaming text for closure
+  const [processingStartTime, setProcessingStartTime] = useState<number | undefined>(undefined);
+  const [tokenCount, setTokenCount] = useState(0);
   const [confirmState, setConfirmState] = useState<ConfirmState | null>(null);
   const [showModelSelector, setShowModelSelector] = useState(false);
+  const [showProviderManager, setShowProviderManager] = useState(false);
   const [currentModel, setCurrentModel] = useState(config.model);
   const [cmdSuggestionIndex, setCmdSuggestionIndex] = useState(0);
   const [inputKey, setInputKey] = useState(0); // Force cursor to end after autocomplete
+  const [pendingTool, setPendingTool] = useState<{ name: string; input: Record<string, unknown> } | null>(null);
+  const pendingToolRef = useRef<{ name: string; input: Record<string, unknown> } | null>(null);
+  const [todos, setTodos] = useState<ReturnType<typeof getTodos>>([]);
 
   // Check if showing command suggestions
   const showCmdSuggestions = input.startsWith('/') && !isProcessing;
@@ -177,12 +261,30 @@ export function App({ config, settingsManager, resumeLatest }: AppProps) {
   // Initialize
   useEffect(() => {
     const init = async () => {
-      agent.setConfirmCallback(async (tool: string, toolInput: unknown) => {
-        return new Promise<boolean>((resolve) => {
-          setConfirmState({ tool, input: toolInput as Record<string, unknown>, resolve });
+      // Initialize permission system with settings
+      await agent.initializePermissions(permissionSettings);
+
+      // Set enhanced confirm callback with approval options
+      agent.setEnhancedConfirmCallback(async (tool, toolInput, suggestions) => {
+        return new Promise<ApprovalAction>((resolve) => {
+          setConfirmState({
+            tool,
+            input: toolInput as Record<string, unknown>,
+            suggestions,
+            resolve,
+          });
         });
       });
 
+      // Set callback to save permission rules to settings.local.json
+      if (settingsManager?.addPermissionRule) {
+        agent.setSaveRuleCallback(async (tool, pattern) => {
+          // Format as Claude Code style pattern: Tool(pattern) or just Tool
+          const rulePattern = pattern ? `${tool}(${pattern})` : tool;
+          await settingsManager.addPermissionRule!(rulePattern, 'allow', 'local');
+        });
+      }
+
       if (resumeLatest) {
         const resumed = await agent.resumeLatest();
         if (resumed) {
@@ -191,22 +293,27 @@ export function App({ config, settingsManager, resumeLatest }: AppProps) {
       }
     };
     init();
-  }, [agent, resumeLatest, addHistory]);
+  }, [agent, resumeLatest, addHistory, permissionSettings, settingsManager]);
 
-  // Handle confirm
-  const handleConfirm = (confirmed: boolean) => {
+  // Handle permission decision
+  const handlePermissionDecision = (action: ApprovalAction) => {
     if (confirmState) {
-      confirmState.resolve(confirmed);
+      confirmState.resolve(action);
       setConfirmState(null);
     }
   };
 
   // Handle model selection
-  const handleModelSelect = async (model: string) => {
+  const handleModelSelect = async (model: string, providerId?: ProviderName) => {
     agent.setModel(model);
     setCurrentModel(model);
     setShowModelSelector(false);
-    addHistory({ type: 'info', content: `Model: ${model}` });
+
+    if (providerId) {
+      addHistory({ type: 'info', content: `${providerId}: ${model}` });
+    } else {
+      addHistory({ type: 'info', content: `Model: ${model}` });
+    }
 
     // Save to settings for next startup
     if (settingsManager) {
@@ -302,13 +409,118 @@ export function App({ config, settingsManager, resumeLatest }: AppProps) {
         return true;
       }
 
+      case 'provider': {
+        setShowProviderManager(true);
+        return true;
+      }
+
+      case 'permissions': {
+        const permManager = agent.getPermissionManager();
+
+        if (arg === 'audit') {
+          // Show audit log
+          const auditLog = permManager.getAuditLog(20);
+          if (auditLog.length === 0) {
+            addHistory({ type: 'info', content: 'No permission decisions recorded yet' });
+          } else {
+            const entries = auditLog.map((e) => ({
+              time: e.timestamp.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }),
+              tool: e.tool,
+              input: e.inputSummary,
+              decision: e.decision,
+              rule: e.matchedRule,
+            }));
+            addHistory({
+              type: 'info',
+              content: '__PERMISSION_AUDIT__',
+              meta: { entries },
+            });
+          }
+        } else if (arg === 'stats') {
+          // Show statistics
+          const stats = permManager.getAuditStats();
+          addHistory({
+            type: 'info',
+            content: `Permissions: ${stats.allowed + stats.confirmed} allowed, ${stats.denied + stats.rejected} denied`,
+          });
+        } else {
+          // Show rules
+          const rules = permManager.getRules();
+          const prompts = permManager.getAllowedPrompts();
+          const displayRules = rules.map((r) => ({
+            type: r.scope === 'session' ? 'Session' : r.description?.startsWith('Settings') ? 'Settings' : 'Built-in',
+            tool: typeof r.tool === 'string' ? r.tool : r.tool.toString(),
+            pattern: typeof r.pattern === 'string' ? r.pattern : r.pattern?.toString(),
+            scope: r.scope ?? 'session',
+            mode: r.mode,
+          }));
+          addHistory({
+            type: 'info',
+            content: '__PERMISSIONS__',
+            meta: { rules: displayRules, prompts },
+          });
+        }
+        return true;
+      }
+
       case 'init': {
-        addHistory({ type: 'info', content: '/init command not available in this version' });
+        // Gather context files and generate AGENT.md
+        addHistory({ type: 'info', content: 'Analyzing codebase...' });
+
+        const contextFiles = await gatherContextFiles(cwd);
+        addHistory({ type: 'info', content: getContextSummary(contextFiles) });
+
+        // Check if AGENT.md already exists
+        const memoryManager = agent.getMemoryManager();
+        const existingPath = await memoryManager.getExistingProjectMemoryPath(cwd);
+        let existingContent: string | undefined;
+
+        if (existingPath) {
+          try {
+            const fs = await import('fs/promises');
+            existingContent = await fs.readFile(existingPath, 'utf-8');
+            addHistory({
+              type: 'info',
+              content: `Found existing: ${existingPath.replace(cwd, '.')}`,
+            });
+          } catch {
+            // File doesn't exist or can't be read
+          }
+        }
+
+        // Build init prompt and run through agent
+        const initPrompt = buildInitPrompt(contextFiles, existingContent);
+        addHistory({ type: 'info', content: 'Generating AGENT.md...' });
+        addHistory({ type: 'user', content: '/init' });
+        await runAgent(initPrompt);
         return true;
       }
 
       case 'memory': {
-        addHistory({ type: 'info', content: '/memory command not available in this version' });
+        // Show loaded memory files
+        const memoryManager = agent.getMemoryManager();
+        const loadedFiles = memoryManager.getLoadedFileList();
+
+        if (loadedFiles.length === 0) {
+          // Try to load memory first
+          await agent.loadMemory();
+          const filesAfterLoad = memoryManager.getLoadedFileList();
+          if (filesAfterLoad.length === 0) {
+            addHistory({ type: 'info', content: 'No memory files found' });
+          } else {
+            addHistory({
+              type: 'info',
+              content: '__MEMORY__',
+              meta: { files: filesAfterLoad },
+            });
+          }
+        } else {
+          addHistory({
+            type: 'info',
+            content: '__MEMORY__',
+            meta: { files: loadedFiles },
+          });
+        }
         return true;
       }
 
@@ -328,6 +540,8 @@ export function App({ config, settingsManager, resumeLatest }: AppProps) {
     streamingTextRef.current = '';
     interruptFlagRef.current = false;
     const startTime = Date.now();
+    setProcessingStartTime(startTime);
+    setTokenCount(0);
 
     try {
       for await (const event of agent.run(prompt)) {
@@ -341,6 +555,8 @@ export function App({ config, settingsManager, resumeLatest }: AppProps) {
             setIsThinking(false);
             streamingTextRef.current += event.text;
             setStreamingText(streamingTextRef.current);
+            // Estimate token count (roughly 4 chars per token)
+            setTokenCount((prev) => prev + Math.max(1, Math.ceil(event.text.length / 4)));
             break;
 
           case 'tool_start':
@@ -350,19 +566,46 @@ export function App({ config, settingsManager, resumeLatest }: AppProps) {
               streamingTextRef.current = '';
               setStreamingText('');
             }
-            addHistory({
-              type: 'tool_call',
-              content: event.name,
-              meta: { toolName: event.name, input: event.input },
-            });
+            // Set pending tool for spinner animation (use both state and ref)
+            const toolInfo = { name: event.name, input: event.input as Record<string, unknown> };
+            pendingToolRef.current = toolInfo;
+            setPendingTool(toolInfo);
             break;
 
           case 'tool_result':
-            addHistory({
-              type: 'tool_result',
-              content: event.result.output,
-              meta: { toolName: event.name, success: event.result.success },
-            });
+            // For TodoWrite: add todos first, then hide tool_call/tool_result
+            if (event.name === 'TodoWrite') {
+              const currentTodos = getTodos();
+              setTodos(currentTodos);
+              if (currentTodos.length > 0) {
+                addHistory({
+                  type: 'todos',
+                  content: '',
+                  meta: { todos: currentTodos },
+                });
+              }
+            } else {
+              // Add tool_call to history (now completed) - use ref for correct value
+              if (pendingToolRef.current) {
+                addHistory({
+                  type: 'tool_call',
+                  content: pendingToolRef.current.name,
+                  meta: { toolName: pendingToolRef.current.name, input: pendingToolRef.current.input },
+                });
+              }
+              // Add tool_result to history
+              addHistory({
+                type: 'tool_result',
+                content: event.result.output,
+                meta: {
+                  toolName: event.name,
+                  success: event.result.success,
+                  metadata: event.result.metadata,
+                },
+              });
+            }
+            pendingToolRef.current = null;
+            setPendingTool(null);
             setIsThinking(true);
             break;
 
@@ -380,6 +623,7 @@ export function App({ config, settingsManager, resumeLatest }: AppProps) {
             // Add completion message with duration
             const durationMs = Date.now() - startTime;
             addHistory({ type: 'completion', content: '', meta: { durationMs } });
+            setProcessingStartTime(undefined);
             break;
         }
       }
@@ -421,6 +665,47 @@ export function App({ config, settingsManager, resumeLatest }: AppProps) {
       return;
     }
 
+    // Handle # prefix for quick memory adds
+    // ## note -> user memory (~/.gencode/AGENT.md)
+    // # note -> project memory (./AGENT.md)
+    if (trimmed.startsWith('#') && !trimmed.startsWith('#!/')) {
+      const memoryManager = agent.getMemoryManager();
+      let level: 'user' | 'project';
+      let content: string;
+
+      if (trimmed.startsWith('## ')) {
+        level = 'user';
+        content = trimmed.slice(3).trim();
+      } else if (trimmed.startsWith('# ')) {
+        level = 'project';
+        content = trimmed.slice(2).trim();
+      } else {
+        // Just # with no space, treat as project
+        level = 'project';
+        content = trimmed.slice(1).trim();
+      }
+
+      if (!content) {
+        addHistory({ type: 'info', content: 'Empty memory entry ignored' });
+        return;
+      }
+
+      try {
+        const savedPath = await memoryManager.quickAdd(content, level, cwd);
+        const displayPath = savedPath.replace(process.env.HOME || '', '~');
+        addHistory({
+          type: 'info',
+          content: `Added to ${level} memory: ${displayPath}`,
+        });
+      } catch (error) {
+        addHistory({
+          type: 'info',
+          content: `Failed to add to memory: ${error instanceof Error ? error.message : String(error)}`,
+        });
+      }
+      return;
+    }
+
     if (trimmed.startsWith('/')) {
       const handled = await handleCommand(trimmed);
       if (!handled) {
@@ -496,6 +781,7 @@ export function App({ config, settingsManager, resumeLatest }: AppProps) {
             name={(item.meta?.toolName as string) || ''}
             success={(item.meta?.success as boolean) ?? true}
             output={item.content}
+            metadata={item.meta?.metadata as Record<string, unknown> | undefined}
           />
         );
       case 'info':
@@ -503,9 +789,29 @@ export function App({ config, settingsManager, resumeLatest }: AppProps) {
         if (item.content === '__SESSIONS__' && item.meta?.input) {
           return <SessionsTable sessions={item.meta.input as Session[]} />;
         }
+        if (item.content === '__PERMISSIONS__' && item.meta?.rules) {
+          return (
+            <PermissionRulesDisplay
+              rules={item.meta.rules as { type: string; tool: string; pattern?: string; scope: string; mode: string }[]}
+              allowedPrompts={item.meta.prompts as { tool: string; prompt: string }[] | undefined}
+            />
+          );
+        }
+        if (item.content === '__PERMISSION_AUDIT__' && item.meta?.entries) {
+          return (
+            <PermissionAuditDisplay
+              entries={item.meta.entries as { time: string; tool: string; input: string; decision: string; rule?: string }[]}
+            />
+          );
+        }
+        if (item.content === '__MEMORY__' && item.meta?.files) {
+          return <MemoryFilesDisplay files={item.meta.files as MemoryFileInfo[]} />;
+        }
         return <InfoMessage text={item.content} />;
       case 'completion':
         return <CompletionMessage durationMs={(item.meta?.durationMs as number) || 0} />;
+      case 'todos':
+        return <TodoList todos={item.meta?.todos as ReturnType<typeof getTodos>} />;
       default:
         return null;
     }
@@ -517,15 +823,18 @@ export function App({ config, settingsManager, resumeLatest }: AppProps) {
         {(item) => <Box key={item.id}>{renderHistoryItem(item)}</Box>}
       </Static>
 
+      {pendingTool && !confirmState && <PendingToolCall name={pendingTool.name} input={pendingTool.input} />}
+
       {streamingText && <AssistantMessage text={streamingText} streaming />}
 
       {confirmState && (
-        <Box flexDirection="column" marginTop={1}>
-          <Text color={colors.warning}>
-            {icons.warning} {confirmState.tool}
-          </Text>
-          <ConfirmPrompt message="Allow?" onConfirm={handleConfirm} />
-        </Box>
+        <PermissionPrompt
+          tool={confirmState.tool}
+          input={confirmState.input}
+          suggestions={confirmState.suggestions}
+          onDecision={handlePermissionDecision}
+          projectPath={settingsManager?.getCwd?.() ?? process.cwd()}
+        />
       )}
 
       {showModelSelector && (
@@ -539,7 +848,20 @@ export function App({ config, settingsManager, resumeLatest }: AppProps) {
         </Box>
       )}
 
-      {!confirmState && !showModelSelector && (
+      {showProviderManager && (
+        <Box marginTop={1}>
+          <ProviderManager
+            onClose={() => setShowProviderManager(false)}
+            onProviderChange={(providerId, model) => {
+              agent.setModel(model);
+              setCurrentModel(model);
+              addHistory({ type: 'info', content: `Switched to ${providerId}: ${model}` });
+            }}
+          />
+        </Box>
+      )}
+
+      {!confirmState && !showModelSelector && !showProviderManager && (
         <Box flexDirection="column" marginTop={1}>
           <PromptInput
             key={inputKey}
@@ -553,8 +875,8 @@ export function App({ config, settingsManager, resumeLatest }: AppProps) {
         </Box>
       )}
 
-      {isProcessing ? (
-        <ProgressBar />
+      {isProcessing && !confirmState ? (
+        <ProgressBar startTime={processingStartTime} tokenCount={tokenCount} isThinking={isThinking} />
       ) : showCmdSuggestions && cmdSuggestions.length > 0 ? (
         <Box marginTop={1}>
           <Text color={colors.textMuted}>  Tab to complete · ↑↓ navigate</Text>

package/src/cli/components/CommandSuggestions.tsx

@@ -8,6 +8,9 @@ interface Command {
 
 export const COMMANDS: Command[] = [
   { name: '/model', description: 'Switch model' },
+  { name: '/provider', description: 'Manage providers' },
+  { name: '/permissions', description: 'View permission rules' },
+  { name: '/permissions audit', description: 'View permission audit log' },
   { name: '/sessions', description: 'List sessions' },
   { name: '/resume', description: 'Resume session' },
   { name: '/new', description: 'New session' },

package/src/cli/components/Header.tsx

@@ -1,6 +1,6 @@
 import { Box, Text } from 'ink';
 import { colors } from './theme.js';
-import { Logo } from './Logo.js';
+import { BigLogo } from './Logo.js';
 
 interface HeaderProps {
   provider: string;
@@ -8,20 +8,14 @@ interface HeaderProps {
   cwd: string;
 }
 
-export function Header({ provider, model, cwd }: HeaderProps) {
-  const home = process.env.HOME || '';
-  const cwdDisplay = cwd.startsWith(home) ? '~' + cwd.slice(home.length) : cwd;
-
+export function Header({ model, cwd }: HeaderProps) {
   return (
-    <Box flexDirection="row" marginBottom={1} marginTop={1}>
-      <Logo />
-      <Box flexDirection="column" marginLeft={1}>
-        <Box>
-          <Text bold color={colors.text}>gencode </Text>
-          <Text color={colors.textMuted}>v0.1.0</Text>
-        </Box>
-        <Text color={colors.textMuted}>{model} · API Usage Billing</Text>
-        <Text color={colors.textMuted}>{cwdDisplay}</Text>
+    <Box flexDirection="column" marginTop={1}>
+      <BigLogo />
+      <Box marginTop={1}>
+        <Text color={colors.textSecondary}>{model}</Text>
+        <Text color={colors.textMuted}> · </Text>
+        <Text color={colors.textMuted}>{cwd}</Text>
       </Box>
     </Box>
   );
@@ -29,8 +23,8 @@ export function Header({ provider, model, cwd }: HeaderProps) {
 
 export function Welcome() {
   return (
-    <Text color={colors.textMuted}>
-      Type a message or /help. Ctrl+C to exit.
-    </Text>
+    <Box marginTop={1}>
+      <Text color={colors.textMuted}>? for help · Ctrl+C to exit</Text>
+    </Box>
   );
 }