@timetotest/cli 0.2.3 → 0.3.0

package/README.md

@@ -1,66 +1,75 @@
-# Time to Test CLI
+# TimetoTest CLI
 
-Transform your testing workflow with an agent that understands your application.
+**Ship Faster with AI Agents That Don't Flake**
 
-## Why Time to Test CLI?
+Give our agent a URL and a goal. It plans, executes, and self-heals end-to-end tests in an isolated environment. Built for developers and QA engineers who demand verifiable evidence, not black-box magic.
 
-- Test without writing code: describe scenarios in plain English.
-- Local-first: runs on your machine for fast, private feedback.
-- Intelligent discovery: finds pages, endpoints, and flows to expand coverage.
-- Clear results: human-readable reports that explain what passed and why failures happened.
+## Capabilities
 
-## How it works
+- **UI Testing** — Real browser automation with semantic DOM understanding
+- **API Testing** — Validate endpoints, schemas, and response data
+- **Code Analysis** — Local code analysis for bug finding and quality checks
+- **End-to-End** — Complete user journey validation
+- **Regression** — Catch breaking changes before production
 
-The CLI launches an AI testing agent that plans and executes tests based on your prompts and your app’s behavior.
-
-- Local mode (default): runs browser automation and API checks on your machine; ideal for localhost and PR previews.
-- Cloud mode: optional remote execution without localhost access; better for prod/staging where local access isn’t possible.
-- Post-run: you get an actionable summary and a report capturing steps, assertions, and failures.
-
-## Quick start
+## Quick Start
 
 ```bash
 npm install -g @timetotest/cli
 
-# Start an interactive local session (default)
+# Start an interactive session
 ttt
 
-# Run a cloud test with a prompt (automatically handles tunnels & project context)
-ttt test "Smoke test the login flow" --url http://localhost:3000
+# Run a test with a prompt
+ttt test "Verify the login flow works" --url http://localhost:3000
 ```
 
-## What makes this different
+## How It Works
 
-- Natural language over boilerplate tests.
-- The agent explores and adapts to your app instead of running only predefined scripts.
-- Zero config to test localhost; minimal friction to get useful feedback.
+1. **Describe Your Test** — Write your testing goal in plain English. No scripts, no complex selectors.
+2. **Smart Test Planning** — The agent analyzes your application and builds a comprehensive test plan.
+3. **Automated Execution** — Watch the agent execute in a real browser, interacting exactly like a human.
+4. **Actionable Results** — Get clear reports with screenshots, video logs, and step-by-step diagnostics.
 
-## Privacy & security
+## Technical Excellence
 
-- Local mode keeps execution and data on your machine.
-- Authentication uses secure tokens; you control what the agent can access.
+- **Semantic DOM Parsing** — Understands context, not just pixels. No brittle visual-only testing.
+- **LLM-Powered Planning** — Decomposes complex flows into atomic, verifiable actions.
+- **Self-Healing Tests** — Adapts to UI changes automatically. Stop maintaining broken selectors.
+- **Isolated Execution** — Tests run in ephemeral sandboxes destroyed after every run.
+- **Evidence-Based Reports** — Screenshots, video logs, and step-by-step diagnostics for every test.
 
-## Requirements
+## Use Cases
 
-- Node.js 18+
-- macOS, Linux, or Windows
-- Chrome/Chromium available for UI testing
+- **Regression Testing** — Automated suites that run on every deploy
+- **E2E Flow Validation** — Validate complete user journeys without writing test scripts
+- **API Contract Testing** — Automatic schema validation and edge case handling
+- **Sprint QA Automation** — Ship faster by automating QA within your sprint cycles
+- **Bug Reproduction** — Turn vague bug reports into actionable test cases with evidence
 
-## Getting help
+## Code Mode
 
-- Docs and updates: https://timetotest.tech
-- Issues and support: use the support links on the website
+Analyze your local codebase for bugs, run linters, and execute tests — no GitHub integration required.
 
-## Social callouts
+```bash
+# Start in code mode
+ttt --mode code
 
-If this helps you ship faster, please ⭐ star the repo and share it.
+# Example prompts
+> "Find potential null pointer issues in src/api/"
+> "Run ESLint and fix the errors"
+> "Find and run the auth tests"
+```
+
+## Requirements
 
-Tweet about it: https://twitter.com/intent/tweet?text=I%20just%20tried%20Time%20to%20Test%20CLI%20%E2%80%94%20AI-powered%20tests%20from%20natural%20language.%20Zero%20config%20for%20localhost!&url=https://timetotest.tech
+- Node.js 18+
+- macOS, Linux, or Windows
+- Chrome/Chromium for UI testing
 
-## Who it’s for
+## Links
 
-Built for:
+- Website: https://timetotest.tech
+- Docs: https://timetotest.tech/docs
 
-- Developers who want smoke tests without writing test code
-- Startup teams needing fast feedback on PRs
-- QA engineers exploring flows rapidly in staging
+No credit card required • Free tier forever

package/dist/bin/ttt.js

@@ -5,7 +5,6 @@ import { login } from "../src/commands/login.js";
 import { test } from "../src/commands/test.js";
 import { status } from "../src/commands/status.js";
 import { restart } from "../src/commands/restart.js";
-import { stream } from "../src/commands/stream.js";
 import { report } from "../src/commands/report.js";
 import { share } from "../src/commands/share.js";
 import { applyStyledHelpRecursively } from "../src/lib/help.js";
@@ -18,7 +17,6 @@ program.addCommand(login);
 program.addCommand(test);
 program.addCommand(status);
 program.addCommand(restart);
-program.addCommand(stream);
 program.addCommand(report);
 program.addCommand(share);
 program.addCommand(chat);

package/dist/bin/ttt.js.map

@@ -1 +1 @@
-{"version":3,"file":"ttt.js","sourceRoot":"","sources":["../../bin/ttt.ts"],"names":[],"mappings":";AACA,OAAO,EAAC,OAAO,EAAC,MAAM,WAAW,CAAC;AAClC,OAAO,WAAW,MAAM,iBAAiB,CAAC,OAAM,IAAI,EAAE,MAAM,EAAC,CAAC;AAC9D,OAAO,EAAC,KAAK,EAAC,MAAM,0BAA0B,CAAC;AAC/C,OAAO,EAAC,IAAI,EAAC,MAAM,yBAAyB,CAAC;AAC7C,OAAO,EAAC,MAAM,EAAC,MAAM,2BAA2B,CAAC;AACjD,OAAO,EAAC,OAAO,EAAC,MAAM,4BAA4B,CAAC;AACnD,OAAO,EAAC,MAAM,EAAC,MAAM,2BAA2B,CAAC;AACjD,OAAO,EAAC,MAAM,EAAC,MAAM,2BAA2B,CAAC;AACjD,OAAO,EAAC,KAAK,EAAC,MAAM,0BAA0B,CAAC;AAG/C,OAAO,EAAC,0BAA0B,EAAC,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAC,0BAA0B,EAAC,MAAM,sBAAsB,CAAC;AAChE,OAAO,EAAC,OAAO,IAAI,IAAI,EAAC,MAAM,6BAA6B,CAAC;AAE5D,MAAM,OAAO,GAAG,IAAI,OAAO,EAAE,CAAC;AAC9B,MAAM,UAAU,GAAG,MAAM,CAAC,WAAW,CAAC,OAAO,IAAI,OAAO,CAAC,CAAC;AAC1D,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,kBAAkB,CAAC,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;AAExE,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;AAC1B,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;AACzB,OAAO,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;AAC3B,OAAO,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;AAC5B,OAAO,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;AAC3B,OAAO,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;AAC3B,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;AAE1B,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;AAEzB,0BAA0B,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;AAE3C,MAAM,0BAA0B,EAAE,CAAC;AACnC,gEAAgE;AAChE,IAAI,OAAO,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,EAAE,CAAC;IAC7B,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;AAC5B,CAAC;AACD,MAAM,OAAO,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC"}
+{"version":3,"file":"ttt.js","sourceRoot":"","sources":["../../bin/ttt.ts"],"names":[],"mappings":";AACA,OAAO,EAAC,OAAO,EAAC,MAAM,WAAW,CAAC;AAClC,OAAO,WAAW,MAAM,iBAAiB,CAAC,OAAM,IAAI,EAAE,MAAM,EAAC,CAAC;AAC9D,OAAO,EAAC,KAAK,EAAC,MAAM,0BAA0B,CAAC;AAC/C,OAAO,EAAC,IAAI,EAAC,MAAM,yBAAyB,CAAC;AAC7C,OAAO,EAAC,MAAM,EAAC,MAAM,2BAA2B,CAAC;AACjD,OAAO,EAAC,OAAO,EAAC,MAAM,4BAA4B,CAAC;AACnD,OAAO,EAAC,MAAM,EAAC,MAAM,2BAA2B,CAAC;AACjD,OAAO,EAAC,KAAK,EAAC,MAAM,0BAA0B,CAAC;AAC/C,OAAO,EAAC,0BAA0B,EAAC,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAC,0BAA0B,EAAC,MAAM,sBAAsB,CAAC;AAChE,OAAO,EAAC,OAAO,IAAI,IAAI,EAAC,MAAM,6BAA6B,CAAC;AAE5D,MAAM,OAAO,GAAG,IAAI,OAAO,EAAE,CAAC;AAC9B,MAAM,UAAU,GAAG,MAAM,CAAC,WAAW,CAAC,OAAO,IAAI,OAAO,CAAC,CAAC;AAC1D,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,kBAAkB,CAAC,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;AAExE,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;AAC1B,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;AACzB,OAAO,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;AAC3B,OAAO,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;AAC5B,OAAO,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;AAC3B,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;AAC1B,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;AAEzB,0BAA0B,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;AAE3C,MAAM,0BAA0B,EAAE,CAAC;AACnC,gEAAgE;AAChE,IAAI,OAAO,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,EAAE,CAAC;IAC7B,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;AAC5B,CAAC;AACD,MAAM,OAAO,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC"}

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@timetotest/cli",
-    "version": "0.2.3",
+    "version": "0.3.0",
     "description": "Time to Test CLI",
     "type": "module",
     "bin": {
@@ -12,15 +12,20 @@
         "LICENSE"
     ],
     "scripts": {
-        "dev": "node dist/bin/ttt.js",
+        "dev": "npm run build && node dist/bin/ttt.js",
         "build": "tsc --project tsconfig.json",
         "clean": "rm -rf dist",
-        "prepublishOnly": "npm run build | cat",
+        "prepublishOnly": "npm run clean && npm run build",
         "version:patch": "npm version patch -m 'chore(release): %s'",
         "version:minor": "npm version minor -m 'chore(release): %s'",
         "version:major": "npm version major -m 'chore(release): %s'",
-        "release": "npm run build && npm publish --access public",
-        "upgrade-and-push": "npm run version:patch && git push && git push --tags && npm run release"
+        "version:dev": "npm version prerelease --preid dev -m 'chore(release): %s'",
+        "publish": "node scripts/publish.mjs",
+        "publish:dev": "node scripts/publish.mjs --channel dev",
+        "publish:prod": "node scripts/publish.mjs --channel prod",
+        "upgrade-and-push": "npm run version:patch && git push && git push --tags && npm run publish",
+        "test": "vitest run",
+        "test:watch": "vitest"
     },
     "publishConfig": {
         "access": "public"
@@ -51,6 +56,7 @@
         "react": "^19.2.0",
         "readline": "^1.3.0",
         "socket.io-client": "^4.7.5",
+        "tiktoken": "^1.0.17",
         "yaml": "^2.8.1"
     },
     "devDependencies": {
@@ -59,6 +65,7 @@
         "@types/inquirer": "^9.0.9",
         "@types/node": "^20.11.19",
         "@types/react": "^19.2.2",
-        "typescript": "^5.5.4"
+        "typescript": "^5.5.4",
+        "vitest": "^1.6.0"
     }
 }

package/dist/src/commands/chat/ChatApp.js

@@ -1,78 +1,208 @@
-import React, { useState, useEffect } from "react";
-import { Box, Text, useApp, Static } from "ink";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { Box, Text, useApp, useInput, useStdout } from "ink";
 import os from "node:os";
-import { Banner } from "./components/Banner.js";
 import { ChatInput } from "./components/ChatInput.js";
-import { MessageBubble } from "./components/MessageBubble.js";
-import { AssistantResponse } from "./components/AssistantResponse.js";
 import { StatusIndicator } from "./components/StatusIndicator.js";
-const DEFAULT_COMMANDS = [
-    {
-        name: "help",
-        description: "Show available commands",
-        value: "/help",
-        label: "/help",
-    },
-    {
-        name: "clear",
-        description: "Clear chat history",
-        value: "/clear",
-        label: "/clear",
-    },
-    {
-        name: "reset",
-        description: "Restart the session",
-        value: "/reset",
-        label: "/reset",
-    },
-    {
-        name: "config",
-        description: "Show current configuration",
-        value: "/config",
-        label: "/config",
-    },
-    {
-        name: "mode",
-        description: "Switch between local/cloud mode",
-        value: "/mode",
-        label: "/mode",
-    },
-];
-export const ChatApp = ({ user, context, slashCommands, onUserMessage, onSlashCommand, onExit, onCancel, initialMessages = [], }) => {
-    // Merge default commands with passed commands
-    const allSlashCommands = [...DEFAULT_COMMANDS, ...slashCommands];
+import { PermissionPrompt } from "./components/PermissionPrompt.js";
+import { ToolCallDisplay } from "./components/ToolCallDisplay.js";
+import { TESTING_MODES } from "../../lib/testing-mode.js";
+import { TimetoTestLogo } from "../../lib/tui/ink/components/TimetoTestLogo.js";
+import { ChatMessage } from "./components/ChatMessage.js";
+import { CommandPalette, } from "../../lib/tui/ink/components/CommandPalette.js";
+export const ChatApp = ({ user, context, slashCommands, onUserMessage, onSlashCommand, onSetTestingMode, onExit, onCancel, initialMessages = [], initialInput, }) => {
+    // Single source of truth: `slashCommands` comes from `chat-ink.ts`.
+    const allSlashCommands = slashCommands;
     const { exit } = useApp();
-    // Initialize messages with banner if empty
-    const [messages, setMessages] = useState(() => {
-        if (initialMessages.length > 0)
-            return initialMessages;
-        return [{
-                id: "banner",
-                type: "banner",
-                content: "banner"
-            }];
-    });
+    const { stdout } = useStdout();
+    const [messages, setMessages] = useState(() => initialMessages.length > 0 ? initialMessages : []);
     const [status, setStatus] = useState(null);
     const [inputDisabled, setInputDisabled] = useState(false);
     const [chatContext, setChatContext] = useState(context);
+    const [inputValue, setInputValue] = useState(initialInput ?? "");
+    const inputHistoryRef = useRef([]);
+    const historyIndexRef = useRef(-1);
+    const [showSystem, setShowSystem] = useState(true);
+    const [paletteOpen, setPaletteOpen] = useState(false);
+    const [paletteQuery, setPaletteQuery] = useState("");
+    const [paletteIndex, setPaletteIndex] = useState(0);
+    // Permission prompt state
+    const [permissionRequest, setPermissionRequest] = useState(null);
+    const permissionResolverRef = useRef(null);
+    const paletteItems = useMemo(() => {
+        const base = [
+            { id: "help", title: "Help", hint: "/help" },
+            { id: "progress", title: "Progress", hint: "/progress" },
+            { id: "session", title: "Session info", hint: "/session" },
+            { id: "bugs", title: "List Bugs", hint: "/bugs" },
+            { id: "report", title: "Generate Report", hint: "/report" },
+            { id: "screenshot", title: "Take Screenshot", hint: "/screenshot" },
+            { id: "scan", title: "Scan Page", hint: "/scan" },
+            { id: "where", title: "Where am I?", hint: "/where" },
+            {
+                id: "toggle_details",
+                title: showSystem ? "Hide details" : "Show details",
+                hint: "toggle tool/system messages",
+            },
+            { id: "clear", title: "Clear transcript", hint: "ctrl+l" },
+            { id: "exit_session", title: "Exit", hint: "ctrl+q" },
+        ];
+        const q = paletteQuery.trim().toLowerCase();
+        if (!q)
+            return base;
+        return base.filter((i) => i.title.toLowerCase().includes(q) ||
+            (i.hint || "").toLowerCase().includes(q));
+    }, [paletteQuery, showSystem]);
+    const runPaletteAction = async (id) => {
+        if (id === "help")
+            await onSlashCommand("help", []);
+        else if (id === "progress")
+            await onSlashCommand("progress", []);
+        else if (id === "bugs")
+            await onSlashCommand("bugs", []);
+        else if (id === "report")
+            await onSlashCommand("report", []);
+        else if (id === "screenshot")
+            await onSlashCommand("screenshot", []);
+        else if (id === "scan")
+            await onSlashCommand("scan", []);
+        else if (id === "where")
+            await onSlashCommand("where", []);
+        else if (id === "session")
+            await onSlashCommand("session", []);
+        else if (id === "toggle_details")
+            setShowSystem((v) => !v);
+        else if (id === "clear")
+            setMessages([]);
+        else if (id === "exit_session") {
+            exit();
+            onExit();
+        }
+    };
+    const toggleTestingMode = () => {
+        const current = chatContext.testingMode;
+        const idx = TESTING_MODES.indexOf(current);
+        const next = TESTING_MODES[(idx + 1) % TESTING_MODES.length] ?? "ui";
+        setChatContext((prev) => ({ ...prev, testingMode: next }));
+        onSetTestingMode?.(next);
+    };
+    useInput((input, key) => {
+        // Global keybinds (avoid fighting with input)
+        if (key.ctrl && input === "l") {
+            setMessages([]);
+            return;
+        }
+        if (key.ctrl && input === "q") {
+            exit();
+            onExit();
+            return;
+        }
+        if (key.ctrl && input === "k") {
+            setPaletteOpen(true);
+            setPaletteQuery("");
+            setPaletteIndex(0);
+            return;
+        }
+        if (!paletteOpen)
+            return;
+        // Palette input handling
+        if (key.escape) {
+            setPaletteOpen(false);
+            return;
+        }
+        if (key.upArrow) {
+            setPaletteIndex((i) => Math.max(0, i - 1));
+            return;
+        }
+        if (key.downArrow) {
+            setPaletteIndex((i) => Math.min(paletteItems.length - 1, i + 1));
+            return;
+        }
+        if (key.backspace || key.delete) {
+            setPaletteQuery((q) => q.slice(0, -1));
+            return;
+        }
+        if (key.return) {
+            const selected = paletteItems[paletteIndex];
+            if (selected) {
+                setPaletteOpen(false);
+                void runPaletteAction(selected.id);
+            }
+            return;
+        }
+        if (input && !key.ctrl && !key.meta) {
+            setPaletteQuery((q) => q + input);
+            setPaletteIndex(0);
+        }
+    });
     // Public methods to update UI from parent
     useEffect(() => {
         // Store reference for external updates
         globalThis.__chatAppInterface = {
             addMessage: (message) => {
-                setMessages((prev) => [...prev, message]);
+                try {
+                    setMessages((prev) => [...prev, message]);
+                }
+                catch { }
             },
             setStatus: (statusMsg) => {
-                setStatus(statusMsg);
+                try {
+                    setStatus(statusMsg);
+                }
+                catch { }
             },
             clearStatus: () => {
-                setStatus(null);
+                try {
+                    setStatus(null);
+                }
+                catch { }
             },
             setInputDisabled: (disabled) => {
-                setInputDisabled(disabled);
+                try {
+                    setInputDisabled(disabled);
+                }
+                catch { }
             },
             updateContext: (newContext) => {
-                setChatContext((prev) => ({ ...prev, ...newContext }));
+                try {
+                    setChatContext((prev) => ({ ...prev, ...newContext }));
+                }
+                catch { }
+            },
+            // Update the last tool message with result
+            updateLastToolMessage: (update) => {
+                try {
+                    setMessages((prev) => {
+                        // Find the last tool message matching this tool (iterate backwards)
+                        let lastIndex = -1;
+                        for (let i = prev.length - 1; i >= 0; i--) {
+                            if (prev[i].metadata?.isTool &&
+                                prev[i].metadata?.toolName === update.toolName) {
+                                lastIndex = i;
+                                break;
+                            }
+                        }
+                        if (lastIndex === -1)
+                            return prev;
+                        const updated = [...prev];
+                        updated[lastIndex] = {
+                            ...updated[lastIndex],
+                            metadata: {
+                                ...updated[lastIndex].metadata,
+                                toolResult: update.result,
+                                isLoading: update.isLoading,
+                            },
+                        };
+                        return updated;
+                    });
+                }
+                catch { }
+            },
+            // Permission prompt handler - returns a promise that resolves with user's response
+            promptPermission: (request) => {
+                return new Promise((resolve) => {
+                    permissionResolverRef.current = resolve;
+                    setPermissionRequest(request);
+                });
             },
         };
         return () => {
@@ -89,25 +219,32 @@ export const ChatApp = ({ user, context, slashCommands, onUserMessage, onSlashCo
         //   setShowIntro(false);
         // }
         // Check for exit commands
-        if (normalized === "exit" || normalized === "quit") {
+        if (normalized === "exit") {
             exit();
             onExit();
             return;
         }
         // Check for slash commands
         if (trimmed.startsWith("/")) {
-            const [cmd, ...args] = trimmed.slice(1).split(/\s+/);
+            const parts = trimmed.slice(1).split(/\s+/);
+            const cmd = parts[0];
+            const args = parts.slice(1);
+            if (!cmd)
+                return; // Ignore lone "/"
             // Handle client-side commands
             if (cmd === "clear") {
                 setMessages([]);
                 return;
             }
             if (cmd === "config") {
-                setMessages(prev => [...prev, {
+                setMessages((prev) => [
+                    ...prev,
+                    {
                         id: Date.now().toString(),
                         type: "system",
-                        content: `Current Configuration:\nUser: ${user}\nMode: ${chatContext.mode}\nSession ID: ${chatContext.sessionId}`
-                    }]);
+                        content: `Current Configuration:\nUser: ${user}\nMode: ${chatContext.mode}\nSession ID: ${chatContext.sessionId}`,
+                    },
+                ]);
                 return;
             }
             const result = await onSlashCommand(cmd, args);
@@ -124,13 +261,21 @@ export const ChatApp = ({ user, context, slashCommands, onUserMessage, onSlashCo
             content: trimmed,
         };
         setMessages((prev) => [...prev, userMessage]);
+        inputHistoryRef.current.push(trimmed);
+        historyIndexRef.current = inputHistoryRef.current.length;
         await onUserMessage(trimmed);
     };
     const handleCancel = () => {
-        console.log("Cancelled — the assistant has stopped. Type whenever you're ready.");
         setInputDisabled(false); // Re-enable input after cancellation
         onCancel?.();
     };
+    const handlePermissionResponse = (response) => {
+        if (permissionResolverRef.current) {
+            permissionResolverRef.current(response);
+            permissionResolverRef.current = null;
+        }
+        setPermissionRequest(null);
+    };
     const getSuggestions = (input) => {
         if (!input.startsWith("/"))
             return [];
@@ -148,44 +293,69 @@ export const ChatApp = ({ user, context, slashCommands, onUserMessage, onSlashCo
     const displayPath = workspacePath.startsWith(homeDir)
         ? `~${workspacePath.slice(homeDir.length)}`
         : workspacePath;
-    const statusLine = `path: ${displayPath} · mode: ${chatContext.mode}`;
-    const footerLines = ["Press ESC to stop"];
-    return (React.createElement(Box, { flexDirection: "column" },
-        React.createElement(Static, { items: messages }, (message, index) => {
-            if (message.type === "user") {
-                return (React.createElement(Box, { key: message.id },
-                    React.createElement(MessageBubble, { message: message.content })));
-            }
-            else if (message.type === "assistant") {
-                return (React.createElement(Box, { key: message.id, paddingX: 1 },
-                    React.createElement(AssistantResponse, { content: message.content, isError: message.isError })));
-            }
-            else if (message.type === "system") {
-                return (React.createElement(Box, { key: message.id, marginTop: index === 0 ? 0 : 1, paddingX: 1 },
-                    React.createElement(Text, { color: "gray" }, message.content)));
-            }
-            else if (message.type === "banner") {
-                return (React.createElement(Box, { key: message.id, paddingX: 0, marginBottom: 1 },
-                    React.createElement(Box, { flexDirection: "column" },
-                        React.createElement(Banner, { user: user, mode: chatContext.mode, path: displayPath }),
-                        React.createElement(Box, { marginTop: 1, flexDirection: "column" },
-                            React.createElement(Text, { color: "gray" }, "To get started, describe a task or try one of these commands:"),
-                            React.createElement(Box, { marginTop: 1, flexDirection: "column" }, allSlashCommands
-                                .filter(cmd => ["/help", "/mode", "/clear", "/reset"].includes(cmd.value))
-                                .map(cmd => (React.createElement(Text, { key: cmd.value },
-                                React.createElement(Text, { color: "white", bold: true }, cmd.label),
-                                React.createElement(Text, { color: "gray" },
-                                    " \u2013 ",
-                                    cmd.description)))))))));
-            }
-            return React.createElement(Box, { key: message.id });
-        }),
-        React.createElement(Box, { flexDirection: "column" },
-            React.createElement(Box, { height: 1 }, status ? (React.createElement(StatusIndicator, { message: status.text, type: status.type })) : (React.createElement(Text, null, " "))),
-            React.createElement(Box, { height: 1, paddingX: 1 },
-                React.createElement(Text, { color: "gray", dimColor: true }, "100% context left")),
-            React.createElement(Box, null,
-                React.createElement(ChatInput, { placeholder: "Ask anything or use /help for commands", onSubmit: handleSubmit, onCancel: handleCancel, getSuggestions: getSuggestions, disabled: inputDisabled })),
-            React.createElement(Box, { height: 1, paddingX: 1 }, footerLines && footerLines.length > 0 ? (React.createElement(Text, { color: "gray", dimColor: true }, footerLines[0])) : (React.createElement(Text, null, " "))))));
+    const subtitleLines = useMemo(() => {
+        const who = user && user !== "Unknown" ? user : "unknown (check auth profile)";
+        return [];
+    }, [
+        user,
+        chatContext.mode,
+        chatContext.testingMode,
+        chatContext.sessionId,
+        displayPath,
+    ]);
+    const footer = status ? (React.createElement(Box, { flexDirection: "column" },
+        React.createElement(StatusIndicator, { message: status.text, type: status.type }))) : undefined;
+    return (React.createElement(Box, { flexDirection: "column", width: "100%", height: "100%", overflow: "hidden" },
+        paletteOpen ? (React.createElement(CommandPalette, { query: paletteQuery, items: paletteItems, selectedIndex: paletteIndex })) : null,
+        React.createElement(Box, { flexDirection: "column", flexGrow: 1, overflow: "hidden" },
+            React.createElement(TimetoTestLogo, null),
+            messages.map((message) => {
+                if (!showSystem && message.type === "system") {
+                    return null;
+                }
+                // Render tool calls with ToolCallDisplay
+                if (message.metadata?.isTool) {
+                    return (React.createElement(ToolCallDisplay, { key: message.id, toolName: message.metadata.toolName || "unknown", args: message.metadata.toolArgs, result: message.metadata.toolResult, isLoading: message.metadata.isLoading }));
+                }
+                // Render reasoning with italic/dimmed style
+                if (message.metadata?.isReasoning) {
+                    return (React.createElement(Box, { key: message.id, paddingLeft: 2, marginBottom: 1 },
+                        React.createElement(Text, { color: "yellow", dimColor: true, italic: true }, message.content)));
+                }
+                return (React.createElement(ChatMessage, { key: message.id, type: message.type, content: message.content, isError: message.isError }));
+            })),
+        status && (React.createElement(Box, { paddingY: 1, overflow: "hidden" },
+            React.createElement(StatusIndicator, { message: status.text, type: status.type }))),
+        permissionRequest && (React.createElement(PermissionPrompt, { request: permissionRequest, onResponse: handlePermissionResponse })),
+        React.createElement(ChatInput, { placeholder: "Ask anything or use /help for commands", value: inputValue, onChange: setInputValue, onSubmit: handleSubmit, onCancel: handleCancel, getSuggestions: getSuggestions, disabled: inputDisabled || paletteOpen, testingMode: chatContext.testingMode, directory: displayPath, hintsRight: paletteOpen ? ("esc close") : (React.createElement(Text, null,
+                React.createElement(Text, { bold: true, color: "white" }, "tab"),
+                " ",
+                React.createElement(Text, { dimColor: true }, "mode"),
+                " \u2022 ",
+                React.createElement(Text, { bold: true, color: "white" }, "ctrl+k"),
+                " ",
+                React.createElement(Text, { dimColor: true }, "commands"))), onToggleMode: toggleTestingMode, onHistoryUp: () => {
+                const hist = inputHistoryRef.current;
+                if (hist.length === 0)
+                    return;
+                const next = Math.max(0, (historyIndexRef.current < 0
+                    ? hist.length
+                    : historyIndexRef.current) - 1);
+                historyIndexRef.current = next;
+                setInputValue(hist[next] || "");
+            }, onHistoryDown: () => {
+                const hist = inputHistoryRef.current;
+                if (hist.length === 0)
+                    return;
+                const next = Math.min(hist.length, (historyIndexRef.current < 0
+                    ? hist.length
+                    : historyIndexRef.current) + 1);
+                historyIndexRef.current = next;
+                if (next >= hist.length) {
+                    setInputValue("");
+                    return;
+                }
+                setInputValue(hist[next] || "");
+            } })));
 };
 //# sourceMappingURL=ChatApp.js.map