@cli-use/tui 0.1.0 → 0.1.3

package/README.md

@@ -1,40 +1,75 @@
 # cli-use
 
-> Build beautiful terminal user interfaces with Ink
+> Build beautiful terminal user interfaces with React & Native Rust
 
-A powerful TUI (Terminal User Interface) framework using **Ink** (React for CLIs). Create stunning terminal interfaces with tables, lists, markdown rendering, custom styles, and flex-like layouts.
+**cli-use** is a powerful framework for building stunning terminal applications. It combines the ease of **React** for standard TUIs with a high-performance **Native Rust/Ratatui** engine for advanced, AI-powered interfaces.
 
 ## 🎯 Overview
 
-`cli-use` lets you build beautiful terminal applications using **Ink** - the most popular React-based TUI framework. Create tables, lists, markdown rendering, custom styles, and flex-like layouts - all with React components you already know.
+- **React**: Build interactive CLIs using React components (Tables, Lists, Markdown, Flexbox).
+- **Rust/Ratatui**: Experience ultra-fast, native TUI performance for specialized tools like our AI terminal.
 
 ## ✨ Features
 
-- **🎨 Beautiful Styling** - CSS-like properties for stunning interfaces
-- **📊 Tables** - Render beautiful tables with borders, colors, and alignment
-- **📝 Lists** - Create interactive lists with selection states and custom enumerators
-- **📖 Markdown** - Render markdown with themes
-- **📐 Layouts** - Flex-like horizontal/vertical layouts
-- **🔧 TypeScript** - Full type safety and excellent IDE support
-- **⚡ Cross-Platform** - Works on macOS, Linux, and Windows
+- **🤖 AI-Powered Terminal** - Integrated Google Gemini AI chat client (Native Rust).
+- **🎨 Beautiful Styling** - CSS-like properties for stunning interfaces.
+- **📊 Rich Components** - Tables, Lists, Markdown, and Layouts out of the box.
+- **⚡ Hybrid Architecture** - Uses Node.js for flexibility and Rust for raw TUI performance.
+- **🔧 TypeScript** - Full type safety and excellent IDE support.
 
 ## 🚀 Quick Start
 
+### 1. Install via NPM
+
+```bash
+npm install -g cli-use
+```
+
+### 2. Configure AI (Optional)
+
+To use the AI features (`cli-use code`), you need to set your Google Gemini API key.
+
+1.  Get a [Google AI Studio API Key](https://aistudio.google.com/app/apikey).
+2.  Set it in your environment:
+
 ```bash
-# Install
-npm install cli-use
+# Set in your current session
+export GOOGLE_API_KEY=your_key_here
 
-# Run the demo
-npm run example:ink-demo
+# OR create a .env file in the directory where you run the command
+echo "GOOGLE_API_KEY=your_key_here" > .env
 ```
 
-## 💡 Examples
+### 3. Run the AI Terminal
+
+Launch the high-performance AI chat interface:
+
+```bash
+cli-use code
+```
+
+## 🤖 CLI CODE (AI Terminal)
+
+The `cli-use code` command launches a native Rust application that integrates with **Google Gemini**.
+
+- **Splash Screen**: Instant startup with a stylized "CLI CODE" ASCII art.
+- **Instant Input**: Start typing your query immediately on the home screen.
+- **Streaming Responses**: Real-time AI streaming powered by Vercel AI SDK (Node.js) and Ratatui (Rust).
+- **Performance**: Zero-latency UI rendering thanks to the native Rust backend.
+
+**Prerequisites for Native Features:**
+
+- [Rust installed](https://rustup.rs/) (automatically detected and built during install).
+
+## 💡 React Examples
+
+You can also build standard React-based CLIs.
 
 ### Basic App
 
 ```tsx
 import React from 'react';
-import { render, Box, Text } from 'ink';
+import { render, Box, Text } from 'cli-use';
 
 const App = () => (
   <Box borderStyle="round" padding={1}>
@@ -49,13 +84,13 @@ render(<App />);
 
 ```tsx
 import React, { useState } from 'react';
-import { render, Box, Text, useInput } from 'ink';
+import { render, Box, Text, useInput } from 'cli-use';
 
 const Counter = () => {
   const [count, setCount] = useState(0);
 
   useInput((input, key) => {
-    if (key.return) setCount(c => c + 1);
+    if (key.return) setCount((c) => c + 1);
   });
 
   return (
@@ -75,7 +110,7 @@ render(<Counter />);
 
 - **`Box`** - Container component for layout and styling
 - **`Text`** - Text rendering with colors and styles
-- **`render()`** - Render Ink apps to terminal
+- **`render()`** - Render cli-use apps to terminal
 - **`useInput()`** - Handle keyboard input
 - **`useApp()`** - App instance management
 
@@ -85,30 +120,30 @@ render(<Counter />);
 # Install dependencies
 npm install
 
-# Build
+# Build the project (including Rust native binary)
 npm run build
 
-# Run tests
-npm run test:unit
-
-# Type check
-npm run typecheck
+# Run the AI Terminal (Dev Mode)
+npm run demo:rust
 
-# Run demo
-npm run example:ink-demo
+# Run React Examples
+npm run demo:cli-use
 ```
 
 ## 📁 Project Structure
 
 ```
 cli-use/
+├── native/              # Rust/Ratatui source code
+│   └── src/
+│       └── main.rs      # Native TUI entry point
 ├── src/
-│   ├── renderer/
-│   │   └── terminal.ts          # Terminal handling
-│   └── examples/
-│   │   └── ink-demo.tsx        # Interactive demo
+│   ├── ai-worker.ts     # Node.js AI Bridge (Vercel AI SDK)
+│   ├── cli/             # CLI Entry point
+│   ├── components/      # React components
+│   └── examples/        # Example apps
+│       └── cli-use-demo.tsx # React/cli-use Demo
 ├── package.json
-├── tsconfig.json
 └── README.md
 ```
 
@@ -122,4 +157,4 @@ MIT © 2025 cli-use contributors
 
 ---
 
-**Built with ❤️ and Ink**
+**Built with ❤️, React, and Rust**

package/dist/ai-worker.cjs

@@ -0,0 +1,65 @@
+/**
+ * @license MIT
+ * cli-use - React-based Terminal UI Framework
+ * Inspired by Ratatui (https://ratatui.rs)
+ */
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
+// src/ai-worker.ts
+var import_google = require("@ai-sdk/google");
+var import_ai = require("ai");
+var import_dotenv = __toESM(require("dotenv"), 1);
+var import_readline = __toESM(require("readline"), 1);
+import_dotenv.default.config();
+var apiKey = process.env.GOOGLE_GENERATIVE_AI_API_KEY || process.env.GEMINI_API_KEY || process.env.GOOGLE_API_KEY;
+if (!apiKey) {
+  console.error(
+    "Error: No API Key found. Set GOOGLE_GENERATIVE_AI_API_KEY or GEMINI_API_KEY in .env"
+  );
+  process.exit(1);
+}
+var google = (0, import_google.createGoogleGenerativeAI)({
+  apiKey
+});
+var rl = import_readline.default.createInterface({
+  input: process.stdin,
+  output: process.stdout,
+  terminal: false
+});
+rl.on("line", async (line) => {
+  const prompt = line.trim();
+  if (!prompt) return;
+  try {
+    const { text } = await (0, import_ai.generateText)({
+      model: google("models/gemini-2.0-flash"),
+      // Updated to available model
+      prompt
+    });
+    console.log(text.replace(/\n/g, "\\n"));
+  } catch (error) {
+    console.error("AI Error:", error);
+  }
+});
+//# sourceMappingURL=ai-worker.cjs.map

package/dist/ai-worker.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ai-worker.ts"],"sourcesContent":["import { createGoogleGenerativeAI } from '@ai-sdk/google';\nimport { generateText } from 'ai';\nimport dotenv from 'dotenv';\nimport readline from 'readline';\n\ndotenv.config();\n\n// Support multiple potential env var names for flexibility\nconst apiKey =\n  process.env.GOOGLE_GENERATIVE_AI_API_KEY ||\n  process.env.GEMINI_API_KEY ||\n  process.env.GOOGLE_API_KEY;\n\nif (!apiKey) {\n  console.error(\n    'Error: No API Key found. Set GOOGLE_GENERATIVE_AI_API_KEY or GEMINI_API_KEY in .env'\n  );\n  process.exit(1);\n}\n\nconst google = createGoogleGenerativeAI({\n  apiKey: apiKey,\n});\n\nconst rl = readline.createInterface({\n  input: process.stdin,\n  output: process.stdout,\n  terminal: false,\n});\n\nrl.on('line', async (line) => {\n  const prompt = line.trim();\n  if (!prompt) return;\n\n  try {\n    const { text } = await generateText({\n      model: google('models/gemini-2.0-flash'), // Updated to available model\n      prompt: prompt,\n    });\n\n    // Output text handling for Rust consumption\n    console.log(text.replace(/\\n/g, '\\\\n'));\n  } catch (error) {\n    console.error('AI Error:', error);\n  }\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,oBAAyC;AACzC,gBAA6B;AAC7B,oBAAmB;AACnB,sBAAqB;AAErB,cAAAA,QAAO,OAAO;AAGd,IAAM,SACJ,QAAQ,IAAI,gCACZ,QAAQ,IAAI,kBACZ,QAAQ,IAAI;AAEd,IAAI,CAAC,QAAQ;AACX,UAAQ;AAAA,IACN;AAAA,EACF;AACA,UAAQ,KAAK,CAAC;AAChB;AAEA,IAAM,aAAS,wCAAyB;AAAA,EACtC;AACF,CAAC;AAED,IAAM,KAAK,gBAAAC,QAAS,gBAAgB;AAAA,EAClC,OAAO,QAAQ;AAAA,EACf,QAAQ,QAAQ;AAAA,EAChB,UAAU;AACZ,CAAC;AAED,GAAG,GAAG,QAAQ,OAAO,SAAS;AAC5B,QAAM,SAAS,KAAK,KAAK;AACzB,MAAI,CAAC,OAAQ;AAEb,MAAI;AACF,UAAM,EAAE,KAAK,IAAI,UAAM,wBAAa;AAAA,MAClC,OAAO,OAAO,yBAAyB;AAAA;AAAA,MACvC;AAAA,IACF,CAAC;AAGD,YAAQ,IAAI,KAAK,QAAQ,OAAO,KAAK,CAAC;AAAA,EACxC,SAAS,OAAO;AACd,YAAQ,MAAM,aAAa,KAAK;AAAA,EAClC;AACF,CAAC;","names":["dotenv","readline"]}

package/dist/ai-worker.d.cts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/ai-worker.d.ts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/ai-worker.js

@@ -0,0 +1,42 @@
+/**
+ * @license MIT
+ * cli-use - React-based Terminal UI Framework
+ * Inspired by Ratatui (https://ratatui.rs)
+ */
+
+// src/ai-worker.ts
+import { createGoogleGenerativeAI } from "@ai-sdk/google";
+import { generateText } from "ai";
+import dotenv from "dotenv";
+import readline from "readline";
+dotenv.config();
+var apiKey = process.env.GOOGLE_GENERATIVE_AI_API_KEY || process.env.GEMINI_API_KEY || process.env.GOOGLE_API_KEY;
+if (!apiKey) {
+  console.error(
+    "Error: No API Key found. Set GOOGLE_GENERATIVE_AI_API_KEY or GEMINI_API_KEY in .env"
+  );
+  process.exit(1);
+}
+var google = createGoogleGenerativeAI({
+  apiKey
+});
+var rl = readline.createInterface({
+  input: process.stdin,
+  output: process.stdout,
+  terminal: false
+});
+rl.on("line", async (line) => {
+  const prompt = line.trim();
+  if (!prompt) return;
+  try {
+    const { text } = await generateText({
+      model: google("models/gemini-2.0-flash"),
+      // Updated to available model
+      prompt
+    });
+    console.log(text.replace(/\n/g, "\\n"));
+  } catch (error) {
+    console.error("AI Error:", error);
+  }
+});
+//# sourceMappingURL=ai-worker.js.map

package/dist/ai-worker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ai-worker.ts"],"sourcesContent":["import { createGoogleGenerativeAI } from '@ai-sdk/google';\nimport { generateText } from 'ai';\nimport dotenv from 'dotenv';\nimport readline from 'readline';\n\ndotenv.config();\n\n// Support multiple potential env var names for flexibility\nconst apiKey =\n  process.env.GOOGLE_GENERATIVE_AI_API_KEY ||\n  process.env.GEMINI_API_KEY ||\n  process.env.GOOGLE_API_KEY;\n\nif (!apiKey) {\n  console.error(\n    'Error: No API Key found. Set GOOGLE_GENERATIVE_AI_API_KEY or GEMINI_API_KEY in .env'\n  );\n  process.exit(1);\n}\n\nconst google = createGoogleGenerativeAI({\n  apiKey: apiKey,\n});\n\nconst rl = readline.createInterface({\n  input: process.stdin,\n  output: process.stdout,\n  terminal: false,\n});\n\nrl.on('line', async (line) => {\n  const prompt = line.trim();\n  if (!prompt) return;\n\n  try {\n    const { text } = await generateText({\n      model: google('models/gemini-2.0-flash'), // Updated to available model\n      prompt: prompt,\n    });\n\n    // Output text handling for Rust consumption\n    console.log(text.replace(/\\n/g, '\\\\n'));\n  } catch (error) {\n    console.error('AI Error:', error);\n  }\n});\n"],"mappings":";;;;;;;AAAA,SAAS,gCAAgC;AACzC,SAAS,oBAAoB;AAC7B,OAAO,YAAY;AACnB,OAAO,cAAc;AAErB,OAAO,OAAO;AAGd,IAAM,SACJ,QAAQ,IAAI,gCACZ,QAAQ,IAAI,kBACZ,QAAQ,IAAI;AAEd,IAAI,CAAC,QAAQ;AACX,UAAQ;AAAA,IACN;AAAA,EACF;AACA,UAAQ,KAAK,CAAC;AAChB;AAEA,IAAM,SAAS,yBAAyB;AAAA,EACtC;AACF,CAAC;AAED,IAAM,KAAK,SAAS,gBAAgB;AAAA,EAClC,OAAO,QAAQ;AAAA,EACf,QAAQ,QAAQ;AAAA,EAChB,UAAU;AACZ,CAAC;AAED,GAAG,GAAG,QAAQ,OAAO,SAAS;AAC5B,QAAM,SAAS,KAAK,KAAK;AACzB,MAAI,CAAC,OAAQ;AAEb,MAAI;AACF,UAAM,EAAE,KAAK,IAAI,MAAM,aAAa;AAAA,MAClC,OAAO,OAAO,yBAAyB;AAAA;AAAA,MACvC;AAAA,IACF,CAAC;AAGD,YAAQ,IAAI,KAAK,QAAQ,OAAO,KAAK,CAAC;AAAA,EACxC,SAAS,OAAO;AACd,YAAQ,MAAM,aAAa,KAAK;AAAA,EAClC;AACF,CAAC;","names":[]}

package/dist/cli/index.cjs

@@ -41,47 +41,132 @@ var init_cjs_shims = __esm({
   }
 });
 
-// src/examples/ink-demo.tsx
-var ink_demo_exports = {};
-var import_react, import_ink, import_jsx_runtime, Counter;
-var init_ink_demo = __esm({
-  "src/examples/ink-demo.tsx"() {
+// src/examples/cli-use-demo.tsx
+var cli_use_demo_exports = {};
+var import_react, import_ink, import_jsx_runtime, CLAUDE_ORANGE, FOOTER_TEXT, FOOTER_HIGHLIGHT, LOGO_TEXT, Splash, Chat, App;
+var init_cli_use_demo = __esm({
+  "src/examples/cli-use-demo.tsx"() {
     "use strict";
     init_cjs_shims();
     import_react = require("react");
     import_ink = require("ink");
     import_jsx_runtime = require("react/jsx-runtime");
-    Counter = () => {
-      const [count, setCount] = (0, import_react.useState)(0);
-      (0, import_ink.useInput)((input, key) => {
-        if (key.escape || key.ctrl("c")) {
+    CLAUDE_ORANGE = "#D97757";
+    FOOTER_TEXT = "#708090";
+    FOOTER_HIGHLIGHT = "#FFFFFF";
+    LOGO_TEXT = `
+ \u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2557     \u2588\u2588\u2557     
+\u2588\u2588\u2554\u2550\u2550\u2550\u2550\u255D\u2588\u2588\u2551     \u2588\u2588\u2551     
+\u2588\u2588\u2551     \u2588\u2588\u2551     \u2588\u2588\u2551     
+\u2588\u2588\u2551     \u2588\u2588\u2551     \u2588\u2588\u2551     
+\u255A\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2551     
+ \u255A\u2550\u2550\u2550\u2550\u2550\u255D\u255A\u2550\u2550\u2550\u2550\u2550\u2550\u255D\u255A\u2550\u255D     
+ \u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557
+\u2588\u2588\u2554\u2550\u2550\u2550\u2550\u255D\u2588\u2588\u2554\u2550\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2554\u2550\u2550\u2550\u2550\u255D
+\u2588\u2588\u2551     \u2588\u2588\u2551   \u2588\u2588\u2551\u2588\u2588\u2551  \u2588\u2588\u2551\u2588\u2588\u2588\u2588\u2588\u2557  
+\u2588\u2588\u2551     \u2588\u2588\u2551   \u2588\u2588\u2551\u2588\u2588\u2551  \u2588\u2588\u2551\u2588\u2588\u2554\u2550\u2550\u255D  
+\u255A\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u255A\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557
+ \u255A\u2550\u2550\u2550\u2550\u2550\u255D \u255A\u2550\u2550\u2550\u2550\u2550\u255D \u255A\u2550\u2550\u2550\u2550\u2550\u255D \u255A\u2550\u2550\u2550\u2550\u2550\u2550\u255D
+`;
+    Splash = ({ input }) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { flexDirection: "column", alignItems: "center", height: "100%", justifyContent: "space-between", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { marginTop: 2, marginBottom: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { borderStyle: "round", borderColor: CLAUDE_ORANGE, paddingX: 2, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: CLAUDE_ORANGE, bold: true, children: "Welcome to the Claude Code research preview!" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { marginBottom: 2, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: CLAUDE_ORANGE, children: LOGO_TEXT }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_ink.Box,
+          {
+            width: "100%",
+            borderStyle: "single",
+            borderColor: "gray",
+            paddingX: 1,
+            marginBottom: 1,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: "white", bold: true, children: [
+              ">",
+              " ",
+              input,
+              "_"
+            ] })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { marginBottom: 2, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: FOOTER_TEXT, children: [
+          "\u{1F389} Login successful. Press",
+          " ",
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: FOOTER_HIGHLIGHT, bold: true, children: "Enter" }),
+          " ",
+          "to continue"
+        ] }) })
+      ] });
+    };
+    Chat = ({ messages, input }) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { flexDirection: "column", height: "100%", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { flexDirection: "column", flexGrow: 1, children: messages.map((msg, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { flexDirection: "column", marginLeft: msg.type === "output" ? 2 : 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_ink.Text,
+            {
+              color: msg.type === "user" ? "cyan" : msg.type === "thinking" ? "yellow" : msg.type === "tool" ? "blue" : msg.type === "system" ? "magenta" : "gray",
+              bold: msg.type === "user",
+              children: msg.symbol
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: msg.type === "output" ? "gray" : "white", children: [
+            " ",
+            msg.content
+          ] })
+        ] }) }, i)) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { borderStyle: "single", borderColor: "gray", paddingX: 1, marginTop: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: "white", bold: true, children: [
+          ">",
+          " ",
+          input,
+          "_"
+        ] }) })
+      ] });
+    };
+    App = () => {
+      const [mode, setMode] = (0, import_react.useState)("splash");
+      const [input, setInput] = (0, import_react.useState)("");
+      const [messages, setMessages] = (0, import_react.useState)([
+        { type: "system", symbol: "*", content: "Welcome to CLI CODE." },
+        { type: "system", symbol: "*", content: "I am ready to assist. Type anything to chat." }
+      ]);
+      (0, import_ink.useInput)((keyInput, key) => {
+        if (key.escape || key.ctrl && keyInput === "c") {
           process.exit(0);
         }
         if (key.return) {
-          setCount((c) => c + 1);
+          if (mode === "splash") {
+            setMode("chat");
+            if (input.trim()) {
+              addMessage("user", ">", input);
+              addMessage("thinking", "\u23FA", "Processing...");
+              setTimeout(() => {
+                addMessage("output", "\u23BF", "This is a simulated response in the cli-use demo.");
+              }, 1e3);
+              setInput("");
+            }
+          } else {
+            if (input.trim()) {
+              addMessage("user", ">", input);
+              addMessage("thinking", "\u23FA", "Processing...");
+              setTimeout(() => {
+                addMessage("output", "\u23BF", "This is a simulated response in the cli-use demo.");
+              }, 1e3);
+              setInput("");
+            }
+          }
+          return;
+        }
+        if (key.delete || key.backspace) {
+          setInput((prev) => prev.slice(0, -1));
+        } else {
+          setInput((prev) => prev + keyInput);
         }
       });
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { flexDirection: "column", padding: 1, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { borderStyle: "double", borderColor: "cyan", padding: 1, marginBottom: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { bold: true, color: "magenta", children: "\u2728 cli-use Demo - Beautiful Terminal UIs (Ink)" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { borderStyle: "single", borderColor: "blue", padding: 1, marginBottom: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { flexDirection: "column", gap: 1, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { bold: true, children: "Features:" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { children: "\u2022 Cross-platform (macOS, Linux, Windows)" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { children: "\u2022 React-based components" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { children: "\u2022 Beautiful styling out of the box" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { children: "\u2022 TypeScript support" })
-        ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { borderStyle: "round", borderColor: "green", padding: 1, marginBottom: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { flexDirection: "column", alignItems: "center", gap: 1, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { bold: true, color: "green", children: "\u{1F522} Interactive Counter" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { children: [
-            "Count: ",
-            count
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { dim: true, children: "Press Enter to increment, ESC to exit" })
-        ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { dim: true, color: "gray", children: "Built with \u2764\uFE0F  for beautiful terminal interfaces" }) })
-      ] });
+      const addMessage = (type, symbol, content) => {
+        setMessages((prev) => [...prev, { type, symbol, content }]);
+      };
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { flexDirection: "column", minHeight: 20, children: mode === "splash" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Splash, { input, onEnter: () => setMode("chat") }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Chat, { messages, input }) });
     };
-    (0, import_ink.render)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Counter, {}));
+    (0, import_ink.render)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(App, {}));
   }
 });
 
@@ -89,11 +174,10 @@ var init_ink_demo = __esm({
 init_cjs_shims();
 var import_commander = require("commander");
 var import_chalk = __toESM(require("chalk"), 1);
-var import_module = require("module");
 var import_child_process = require("child_process");
 var import_url = require("url");
 var import_path = __toESM(require("path"), 1);
-var require2 = (0, import_module.createRequire)(importMetaUrl);
+var import_fs = __toESM(require("fs"), 1);
 var __filename2 = (0, import_url.fileURLToPath)(importMetaUrl);
 var __dirname = import_path.default.dirname(__filename2);
 var program = new import_commander.Command();
@@ -117,11 +201,14 @@ program.command("run <example>").description("Run an example application").actio
 program.command("examples").description("List available examples").action(() => {
   showExamplesTUI();
 });
-program.option("-d, --demo", "Run the ink demo").action(() => {
+program.command("code").description("Launch the AI-powered CLI Code interface").action(() => {
+  showRustDemo();
+});
+program.option("-d, --demo", "Run the cli-use demo").action(() => {
 });
 var options = program.parse(process.argv);
 if (options.opts().demo) {
-  Promise.resolve().then(() => (init_ink_demo(), ink_demo_exports)).catch((err) => {
+  Promise.resolve().then(() => (init_cli_use_demo(), cli_use_demo_exports)).catch((err) => {
     console.error("Failed to run demo:", err);
     process.exit(1);
   });
@@ -129,12 +216,15 @@ if (options.opts().demo) {
 function showRustDemo() {
   const isWindows = process.platform === "win32";
   const extension = isWindows ? ".exe" : "";
-  const binaryPath = import_path.default.resolve(
+  const prodBinaryPath = import_path.default.resolve(__dirname, `../bin/ratatui-demo${extension}`);
+  const devBinaryPath = import_path.default.resolve(
     __dirname,
     `../../native/target/release/ratatui-demo${extension}`
   );
+  const binaryPath = import_fs.default.existsSync(prodBinaryPath) ? prodBinaryPath : devBinaryPath;
+  const workerPath = import_path.default.resolve(__dirname, "../ai-worker.js");
   console.log(import_chalk.default.cyan("Starting Ratatui Demo..."));
-  const child = (0, import_child_process.spawn)(binaryPath, [], {
+  const child = (0, import_child_process.spawn)(binaryPath, [workerPath], {
     stdio: "inherit"
   });
   child.on("error", (err) => {