@suman_biswas/beam 0.1.0

package/LICENSE

@@ -0,0 +1,26 @@
+Beam Non-Commercial License
+
+Copyright (c) 2026 Suman Biswas
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to use,
+copy, modify, and distribute the Software for personal, educational, internal,
+and other non-commercial purposes, subject to the following conditions:
+
+1. The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+2. The Software may not be sold, sublicensed for a fee, or used for any
+commercial purpose.
+
+3. Commercial purpose includes any use primarily intended for or directed
+toward commercial advantage or monetary compensation, including paid products,
+paid services, consulting deliverables, or resale.
+
+4. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,11 @@
+```js
+sumanbiswas@mac ~ % cat ~/.beam/config.json
+
+{
+    "userName": "Suman Biswas",
+    "selectedModel": "Gemma 2"
+}
+
+sumanbiswas@mac ~ % rm ~/.beam/config.json
+sumanbiswas@mac ~ %
+```

package/dist/apps/cli/src/Home.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text, Box } from "ink";
+import TextInput from "ink-text-input";
+import { THEME_COLOR, QUICK_ACTIONS } from "./utils/constants.js";
+import { Beam } from "./components/beam.js";
+import { StepSpinner } from "./components/spinner.js";
+import { ThinkingLoader } from "./components/thinking.js";
+import { useHomeState } from "./hooks/useHomeState.js";
+import { MODEL_CONFIGS } from "@beam/shared";
+import { useState } from "react";
+export const Home = ({ userName, selectedModelId, openAIApiKey, nvidiaApiKey, onModelChange, onApiKeyUpdate, }) => {
+    const [currentModelId, setCurrentModelId] = useState(selectedModelId);
+    const handleModelChange = (modelId) => {
+        setCurrentModelId(modelId);
+        onModelChange?.(modelId);
+    };
+    const { cwd, query, messages, error, isThinking, showMenu, showHelp, showModelSelector, showApiKeySelection, showApiKeyInput, selectedIndex, modelSelectorIndex, apiKeyProviderIndex, tempApiKey, setTempApiKey, tipMessage, columns, modelConfig, handleSubmit, handleOnChange, getStatusColor, providerBadge, API_KEY_PROVIDERS, showFilePicker, filePickerIndex, filteredFiles, filePickerSearch, } = useHomeState({
+        selectedModelId: currentModelId,
+        openAIApiKey,
+        nvidiaApiKey,
+        onModelChange: handleModelChange,
+        onApiKeyUpdate,
+    });
+    return (_jsxs(Box, { flexDirection: "column", width: columns, children: [_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { paddingX: 1, marginTop: 1, children: [_jsx(Text, { color: THEME_COLOR, children: "\u250C\u2500 " }), _jsxs(Text, { color: THEME_COLOR, bold: true, children: ["Beam", " "] }), _jsx(Text, { dimColor: true, children: "v0.0.0 " }), _jsxs(Text, { color: THEME_COLOR, children: ["─".repeat(Math.max(0, columns - 18)), "\u2510"] })] }), _jsxs(Box, { flexDirection: "row", paddingX: 1, minHeight: 12, children: [_jsx(Box, { flexDirection: "column", width: 1, children: Array(15)
+                                    .fill(0)
+                                    .map((_, i) => (_jsx(Text, { color: THEME_COLOR, children: "\u2502" }, i))) }), _jsxs(Box, { width: "50%", flexDirection: "column", alignItems: "center", justifyContent: "center", paddingY: 1, children: [_jsxs(Text, { bold: true, children: ["Welcome back ", userName, "!"] }), _jsx(Beam, {}), _jsxs(Box, { flexDirection: "column", alignItems: "center", children: [_jsxs(Text, { children: [_jsx(Text, { color: THEME_COLOR, children: "Selected Model: " }), _jsx(Text, { color: getStatusColor(), children: "● " }), _jsx(Text, { dimColor: true, children: modelConfig?.tag ?? selectedModelId })] }), _jsx(Text, { dimColor: true, children: cwd })] })] }), _jsx(Box, { flexDirection: "column", width: 1, children: Array(15)
+                                    .fill(0)
+                                    .map((_, i) => (_jsx(Text, { color: THEME_COLOR, dimColor: true, children: "\u2502" }, i))) }), _jsxs(Box, { width: "45%", flexDirection: "column", paddingLeft: 2, paddingY: 1, children: [_jsx(Text, { color: THEME_COLOR, bold: true, children: "Build with Beam" }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { children: tipMessage.lead }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: tipMessage.tip }) }), _jsx(Box, { marginY: 1, children: _jsx(Text, { color: THEME_COLOR, dimColor: true, children: "\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500" }) }), _jsx(Text, { color: THEME_COLOR, bold: true, children: "Quick actions" }), _jsx(Text, { dimColor: true, children: "Type / to explore commands" })] }), _jsx(Box, { flexGrow: 1 }), _jsx(Box, { flexDirection: "column", width: 1, children: Array(15)
+                                    .fill(0)
+                                    .map((_, i) => (_jsx(Text, { color: THEME_COLOR, children: "\u2502" }, i))) })] }), _jsx(Box, { paddingX: 1, children: _jsxs(Text, { color: THEME_COLOR, children: ["\u2514", "─".repeat(Math.max(0, columns - 4)), "\u2518"] }) }), _jsx(Box, { marginTop: 1, paddingLeft: 1, children: _jsx(Text, { dimColor: true, children: modelConfig?.description ?? selectedModelId }) })] }), messages.length > 0 && (_jsx(Box, { paddingX: 1, marginTop: 1, marginBottom: 1, children: _jsxs(Text, { children: [_jsxs(Text, { color: THEME_COLOR, bold: true, children: ["Beam", " "] }), _jsxs(Text, { dimColor: true, children: ["using ", modelConfig?.tag ?? selectedModelId] })] }) })), messages.length > 0 && (_jsx(Box, { flexDirection: "column", paddingX: 1, paddingBottom: 1, children: messages.map((msg, index) => (_jsx(Box, { flexDirection: "column", marginBottom: 1, children: msg.role === "user" ? (_jsx(Box, { width: "100%", backgroundColor: "gray", children: _jsxs(Text, { color: "whiteBright", children: ["> ", msg.content] }) })) : msg.role === "plan" ? (_jsx(Box, { paddingLeft: 1, children: msg.isActive ? (_jsx(StepSpinner, { text: msg.content, type: "plan" })) : (_jsxs(Box, { children: [_jsx(Text, { color: THEME_COLOR, dimColor: true, children: "\u25CF" }), _jsxs(Text, { dimColor: true, children: [" ", msg.content] })] })) })) : msg.role === "action" ? (_jsx(Box, { paddingLeft: 1, children: msg.isActive ? (_jsx(StepSpinner, { text: msg.content, type: "action" })) : (_jsxs(Box, { children: [_jsx(Text, { color: THEME_COLOR, dimColor: true, children: "\u25CF" }), _jsxs(Text, { dimColor: true, children: [" ", msg.content] })] })) })) : (_jsx(Text, { children: msg.content })) }, index))) })), isThinking && (_jsx(Box, { paddingLeft: 1, marginBottom: 1, children: _jsx(ThinkingLoader, {}) })), error && (_jsx(Box, { paddingX: 1, marginBottom: 1, children: _jsxs(Text, { color: "red", children: ["Error: ", error] }) })), _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { dimColor: true, children: "─".repeat(Math.max(0, columns)) }), _jsxs(Box, { paddingLeft: 1, children: [_jsx(Text, { bold: true, children: "\u276F " }), !showModelSelector && !showApiKeySelection && !showApiKeyInput ? (_jsx(TextInput, { value: query, placeholder: "", onSubmit: (v) => void (showFilePicker ? null : handleSubmit(v)), onChange: handleOnChange }, `input-${showFilePicker}`)) : (_jsx(Text, { children: query }))] }), _jsx(Text, { dimColor: true, children: "─".repeat(Math.max(0, columns)) }), _jsx(Box, { paddingLeft: 1, marginBottom: 1, children: showApiKeyInput ? (_jsxs(Box, { flexDirection: "column", paddingX: 1, marginBottom: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { color: THEME_COLOR, bold: true, children: ["API Key for ", API_KEY_PROVIDERS[apiKeyProviderIndex]] }) }), _jsx(Text, { dimColor: true, children: "You can paste your API key now or press Enter to skip and add it later." }), _jsxs(Box, { marginTop: 1, children: [_jsxs(Text, { color: THEME_COLOR, bold: true, children: ["\u276F", " "] }), _jsx(TextInput, { value: tempApiKey, onChange: setTempApiKey, placeholder: "Paste API key (optional)..." })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Press Enter to continue \u00B7 ESC to go back" }) })] })) : showApiKeySelection ? (_jsxs(Box, { flexDirection: "column", paddingX: 1, marginBottom: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: THEME_COLOR, bold: true, children: "Select Provider" }) }), API_KEY_PROVIDERS.map((provider, index) => {
+                                    const isSelected = index === apiKeyProviderIndex;
+                                    return (_jsx(Box, { children: _jsxs(Text, { backgroundColor: isSelected ? "gray" : undefined, children: [_jsx(Text, { color: isSelected ? THEME_COLOR : undefined, children: isSelected ? "❯ " : "  " }), _jsx(Text, { color: isSelected ? THEME_COLOR : undefined, bold: isSelected, children: provider })] }) }, provider));
+                                }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "\u2191\u2193 to navigate \u00B7 Enter to confirm \u00B7 ESC to cancel" }) })] })) : showModelSelector ? (_jsxs(Box, { flexDirection: "column", paddingX: 1, marginBottom: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: THEME_COLOR, bold: true, children: "Select Model" }) }), MODEL_CONFIGS.map((model, index) => {
+                                    const isSelected = index === modelSelectorIndex;
+                                    return (_jsx(Box, { children: _jsxs(Text, { backgroundColor: isSelected ? "gray" : undefined, children: [_jsx(Text, { color: isSelected ? THEME_COLOR : undefined, children: isSelected ? "❯ " : "  " }), _jsx(Text, { color: isSelected ? THEME_COLOR : undefined, bold: isSelected, children: model.tag }), _jsxs(Text, { dimColor: true, children: ["  ", "[", providerBadge(model.provider), "]", isSelected ? `  ${model.description}` : ""] })] }) }, model.id));
+                                }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "\u2191\u2193 to navigate \u00B7 Enter to confirm \u00B7 ESC to cancel" }) })] })) : showHelp ? (_jsxs(Box, { flexDirection: "column", paddingX: 1, marginBottom: 1, borderStyle: "round", borderColor: THEME_COLOR, children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: THEME_COLOR, bold: true, children: "Beam Help Menu" }) }), _jsx(Text, { children: "Here is some helpful information to get started." }), _jsx(Text, { dimColor: true, children: "To get started, simply ask Beam a question or give it a command." }), _jsx(Text, { dimColor: true, children: "Type /init to create beam configuration. So beam can better understand your project." }), _jsx(Text, { dimColor: true, children: "Type / to get all the supported quick actions you can use with Beam." }), _jsx(Text, { dimColor: true, children: "To add a file as context, type @ and select the file from menu. or type file name." }), _jsx(Text, { dimColor: true, children: "Press ESC to close this dialog." })] })) : showFilePicker ? (_jsxs(Box, { flexDirection: "column", paddingX: 1, marginBottom: 1, children: [_jsxs(Box, { marginBottom: 1, children: [_jsxs(Text, { color: THEME_COLOR, bold: true, children: ["Add File", " "] }), _jsx(Text, { dimColor: true, children: filePickerSearch || "type to filter..." })] }), filteredFiles.slice(0, 10).map((file, index) => {
+                                    const isSelected = index === filePickerIndex;
+                                    return (_jsx(Box, { children: _jsxs(Text, { backgroundColor: isSelected ? "gray" : undefined, children: [_jsx(Text, { color: isSelected ? THEME_COLOR : undefined, children: isSelected ? "❯ " : "  " }), _jsx(Text, { color: isSelected ? THEME_COLOR : undefined, bold: isSelected, children: file })] }) }, file));
+                                }), filteredFiles.length === 0 && (_jsxs(Text, { dimColor: true, children: ["No files match \"", filePickerSearch, "\""] })), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "\u2191\u2193 navigate \u00B7 Enter select \u00B7 ESC cancel" }) })] })) : showMenu ? (_jsxs(Box, { flexDirection: "column", paddingX: 1, marginBottom: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: THEME_COLOR, bold: true, children: "Quick Actions" }) }), QUICK_ACTIONS.map((action, index) => (_jsx(Box, { children: _jsxs(Text, { backgroundColor: index === selectedIndex ? "gray" : undefined, children: [_jsx(Text, { color: THEME_COLOR, children: action.title }), " ", _jsxs(Text, { dimColor: true, children: ["- ", action.description] })] }) }, action.title)))] })) : (_jsx(Text, { dimColor: true, children: "Type ? for help" })) })] })] }));
+};

package/dist/apps/cli/src/Welcome.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Text, Box } from "ink";
+import TextInput from "ink-text-input";
+import { THEME_COLOR } from "./utils/constants.js";
+import { MODEL_CONFIGS } from "@beam/shared";
+import { useWelcomeState } from "./hooks/useWelcomeState.js";
+export const Welcome = ({ onComplete }) => {
+    const { columns, step, name, nameError, selectedIndex, apiKey, selectedModel, needsApiKey, frameHeight, setName, setApiKey, handleNameSubmit, handleApiKeySubmit, providerBadge, setNameError, } = useWelcomeState({ onComplete });
+    return (_jsxs(Box, { flexDirection: "column", width: columns, children: [_jsxs(Box, { paddingX: 1, marginTop: 1, children: [_jsx(Text, { color: THEME_COLOR, children: "\u250C\u2500 " }), _jsxs(Text, { color: THEME_COLOR, bold: true, children: ["Beam", " "] }), _jsx(Text, { dimColor: true, children: "v0.0.0 " }), _jsxs(Text, { color: THEME_COLOR, children: ["─".repeat(Math.max(0, columns - 18)), "\u2510"] })] }), _jsxs(Box, { flexDirection: "row", paddingX: 1, minHeight: 12, children: [_jsx(Box, { flexDirection: "column", width: 1, children: Array(frameHeight)
+                            .fill(0)
+                            .map((_, i) => (_jsx(Text, { color: THEME_COLOR, children: "\u2502" }, i))) }), _jsxs(Box, { width: columns - 4, flexDirection: "column", paddingX: 3, paddingY: 2, children: [_jsxs(Box, { flexDirection: "column", alignItems: "center", marginBottom: 2, children: [_jsx(Text, { color: THEME_COLOR, bold: true, children: "Welcome to Beam" }), _jsx(Text, { dimColor: true, children: "Let's get you set up before we begin." })] }), _jsxs(Box, { marginBottom: 2, children: [_jsxs(Text, { color: step === "name" ? THEME_COLOR : undefined, children: [step === "name" ? "●" : "✓", " "] }), _jsxs(Text, { color: step === "name" ? THEME_COLOR : undefined, children: ["Your name", "  "] }), _jsx(Text, { dimColor: true, children: "\u2500\u2500\u2500\u2500\u2500 " }), _jsxs(Text, { color: step === "model" ? THEME_COLOR : undefined, children: [step === "model" ? "●" : step === "apiKey" ? "✓" : "○", " "] }), _jsxs(Text, { color: step === "model" ? THEME_COLOR : undefined, children: ["Select model", "  "] }), step === "apiKey" && needsApiKey && (_jsxs(_Fragment, { children: [_jsx(Text, { dimColor: true, children: "\u2500\u2500\u2500\u2500\u2500 " }), _jsx(Text, { color: THEME_COLOR, children: "\u25CF " }), _jsx(Text, { color: THEME_COLOR, children: "API key" })] }))] }), step === "name" && (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { children: "What should we call you?" }), _jsxs(Box, { marginTop: 1, children: [_jsxs(Text, { color: THEME_COLOR, bold: true, children: ["\u276F", " "] }), _jsx(TextInput, { value: name, onChange: (val) => {
+                                                    setName(val);
+                                                    setNameError("");
+                                                }, onSubmit: handleNameSubmit, placeholder: "Enter your name..." })] }), nameError ? (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "red", children: nameError }) })) : (_jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Press Enter to continue" }) }))] })), step === "model" && (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { children: ["Hi ", _jsx(Text, { color: THEME_COLOR, children: name }), "! Choose your default model:"] }), _jsx(Box, { marginTop: 1, flexDirection: "column", children: MODEL_CONFIGS.map((model, i) => {
+                                            const isSelected = i === selectedIndex;
+                                            return (_jsxs(Box, { children: [_jsx(Text, { color: isSelected ? THEME_COLOR : undefined, children: isSelected ? "❯ " : "  " }), _jsx(Text, { color: isSelected ? THEME_COLOR : undefined, bold: isSelected, children: model.tag }), _jsxs(Text, { dimColor: true, children: ["  ", "[", providerBadge(model.provider), "]", isSelected ? `  ${model.description}` : ""] })] }, model.id));
+                                        }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "\u2191\u2193 to navigate \u00B7 Enter to confirm" }) })] })), step === "apiKey" && (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { children: ["Optional API key for", " ", _jsx(Text, { color: THEME_COLOR, children: selectedModel.tag })] }), _jsx(Text, { dimColor: true, children: "You can paste it now or press Enter to skip and add it later." }), _jsxs(Box, { marginTop: 1, children: [_jsxs(Text, { color: THEME_COLOR, bold: true, children: ["\u276F", " "] }), _jsx(TextInput, { value: apiKey, onChange: setApiKey, onSubmit: handleApiKeySubmit, placeholder: "Paste API key (optional)..." })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Press Enter to continue" }) })] }))] }), _jsx(Box, { flexGrow: 1 }), _jsx(Box, { flexDirection: "column", width: 1, children: Array(frameHeight)
+                            .fill(0)
+                            .map((_, i) => (_jsx(Text, { color: THEME_COLOR, children: "\u2502" }, i))) })] }), _jsx(Box, { paddingX: 1, children: _jsxs(Text, { color: THEME_COLOR, children: ["\u2514", "─".repeat(Math.max(0, columns - 4)), "\u2518"] }) }), _jsx(Box, { marginTop: 1, paddingLeft: 1, marginBottom: 1, children: _jsx(Text, { dimColor: true, children: "This info is stored locally and never shared." }) })] }));
+};

package/dist/apps/cli/src/components/beam.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @ts-nocheck
+/* eslint-disable */
+/* prettier-ignore */
+import { Text, Box } from "ink";
+import { THEME_COLOR } from "../utils/constants.js";
+const LOGO = `
+ ██████╗ ███████╗ █████╗ ███╗   ███╗
+ ██╔══██╗██╔════╝██╔══██╗████╗ ████║
+ ██████╔╝█████╗  ███████║██╔████╔██║
+ ██╔══██╗██╔══╝  ██╔══██║██║╚██╔╝██║
+ ██████╔╝███████╗██║  ██║██║ ╚═╝ ██║
+ ╚═════╝ ╚══════╝╚═╝  ╚═╝╚═╝     ╚═╝
+`;
+export function Beam() {
+    return (_jsx(Box, { marginY: 1, flexDirection: "column", alignItems: "center", children: _jsx(Text, { color: THEME_COLOR, children: LOGO }) }));
+}

package/dist/apps/cli/src/components/spinner.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text, Box, useAnimation } from "ink";
+import { THEME_COLOR } from "../utils/constants.js";
+// Color mapping for different step types
+const STEP_COLORS = {
+    plan: THEME_COLOR,
+    action: THEME_COLOR,
+};
+export const StepSpinner = ({ text, type }) => {
+    const { frame } = useAnimation({ interval: 60 });
+    const color = STEP_COLORS[type];
+    // Create a pulse wave that moves left to right
+    const fullText = `● ${text}`;
+    const pulseWidth = 5; // width of the bright area
+    const pulsePosition = (frame * 2) % (fullText.length + pulseWidth);
+    // Render each character with brightness based on distance from pulse center
+    const renderedText = fullText.split("").map((char, index) => {
+        const distanceFromPulse = Math.abs(index - pulsePosition);
+        const isBright = distanceFromPulse < pulseWidth;
+        if (index === 0) {
+            // First character is the bullet
+            return (_jsx(Text, { color: color, dimColor: !isBright, children: char }, index));
+        }
+        return (_jsx(Text, { dimColor: !isBright, children: char }, index));
+    });
+    return _jsx(Box, { children: renderedText });
+};

package/dist/apps/cli/src/components/thinking.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Text, useAnimation } from "ink";
+export const ThinkingLoader = () => {
+    const { frame } = useAnimation({ interval: 80 });
+    // Loading messages that change randomly every 2 seconds
+    const loadingMessages = ["Thinking", "Working", "Processing", "Please wait"];
+    // Pick a random message every 2 seconds (25 frames at 80ms interval)
+    const messageCycle = Math.floor(frame / 25);
+    // Use seeded random to ensure same message during the 2-second interval
+    const seedHash = (messageCycle * 9973) % loadingMessages.length;
+    const messageIndex = seedHash;
+    const dotCount = (Math.floor(frame / 3) % 3) + 1; // cycles through 1, 2, 3
+    const thinkingText = loadingMessages[messageIndex] + ".".repeat(dotCount);
+    const fullThinkingText = thinkingText;
+    const pulseWidth = 5;
+    const pulsePosition = (frame * 2) % (fullThinkingText.length + pulseWidth);
+    const thinkingRendered = fullThinkingText.split("").map((char, index) => {
+        const distanceFromPulse = Math.abs(index - pulsePosition);
+        const isBright = distanceFromPulse < pulseWidth;
+        return (_jsx(Text, { dimColor: !isBright, italic: true, children: char }, index));
+    });
+    return _jsx(_Fragment, { children: thinkingRendered });
+};

package/dist/apps/cli/src/hooks/useHomeState.js

@@ -0,0 +1,354 @@
+import { useState } from "react";
+import { useInput, useStdout } from "ink";
+import { QUICK_ACTIONS, TIP_MESSAGES } from "../utils/constants.js";
+import { getModelConfig, MODEL_CONFIGS } from "@beam/shared";
+import { runAgent } from "../utils/agent.js";
+import { getProjectAwareness } from "../utils/tools.js";
+import { readFileSync } from "fs";
+import { join } from "path";
+const cwd = process.cwd();
+// 🎨 UI Development: Set to true to display dummy messages for testing
+const USE_DUMMY_MESSAGES = false;
+const getRandomMessage = () => {
+    return TIP_MESSAGES[Math.floor(Math.random() * TIP_MESSAGES.length)];
+};
+export const useHomeState = ({ selectedModelId, openAIApiKey, nvidiaApiKey, onModelChange, onApiKeyUpdate, }) => {
+    // Dummy messages for UI development
+    const dummyMessages = [
+        { role: "user", content: "What is the current stock price of AAPL?" },
+        { role: "plan", content: "I'll search for the current Apple stock price using webSearch." },
+        { role: "action", content: "webSearch({\"query\":\"AAPL stock price\"}...)", isActive: true },
+        { role: "action", content: "webFetch({\"url\":\"https://finance.yahoo.com...\"}...)" },
+    ];
+    const [query, setQuery] = useState("");
+    const [messages, setMessages] = useState(USE_DUMMY_MESSAGES ? dummyMessages : []);
+    const [error, setError] = useState(null);
+    const [isThinking, setIsThinking] = useState(USE_DUMMY_MESSAGES);
+    const [showMenu, setShowMenu] = useState(false);
+    const [showHelp, setShowHelp] = useState(false);
+    const [showModelSelector, setShowModelSelector] = useState(false);
+    const [showApiKeySelection, setShowApiKeySelection] = useState(false);
+    const [showApiKeyInput, setShowApiKeyInput] = useState(false);
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [modelSelectorIndex, setModelSelectorIndex] = useState(MODEL_CONFIGS.findIndex((m) => m.id === selectedModelId) || 0);
+    const [apiKeyProviderIndex, setApiKeyProviderIndex] = useState(0);
+    const [tempApiKey, setTempApiKey] = useState("");
+    const [tipMessage] = useState(getRandomMessage);
+    const [showFilePicker, setShowFilePicker] = useState(false);
+    const [filePickerSearch, setFilePickerSearch] = useState("");
+    const [filePickerIndex, setFilePickerIndex] = useState(0);
+    const [filePickerFiles, setFilePickerFiles] = useState([]);
+    const API_KEY_PROVIDERS = ["OpenAI", "NVIDIA"];
+    const { stdout } = useStdout();
+    const [columns, setColumns] = useState(stdout?.columns || 80);
+    const modelConfig = getModelConfig(selectedModelId);
+    const filteredFiles = filePickerSearch
+        ? filePickerFiles.filter(f => f.toLowerCase().includes(filePickerSearch.toLowerCase()))
+        : filePickerFiles;
+    // 🔹 Input handling
+    useInput((input, key) => {
+        if (showHelp && key.escape) {
+            setShowHelp(false);
+            return;
+        }
+        if (showApiKeyInput) {
+            if (key.return) {
+                const provider = API_KEY_PROVIDERS[apiKeyProviderIndex].toLowerCase();
+                if (tempApiKey.trim()) {
+                    onApiKeyUpdate?.(provider, tempApiKey.trim());
+                }
+                setShowApiKeyInput(false);
+                setShowApiKeySelection(false);
+                setQuery("");
+                setShowMenu(false);
+                setTempApiKey("");
+                setApiKeyProviderIndex(0);
+            }
+            else if (key.escape) {
+                setShowApiKeyInput(false);
+                setShowApiKeySelection(true);
+                setTempApiKey("");
+            }
+            return;
+        }
+        if (showApiKeySelection) {
+            if (key.upArrow) {
+                setApiKeyProviderIndex((i) => Math.max(0, i - 1));
+            }
+            else if (key.downArrow) {
+                setApiKeyProviderIndex((i) => Math.min(API_KEY_PROVIDERS.length - 1, i + 1));
+            }
+            else if (key.return) {
+                setShowApiKeyInput(true);
+            }
+            else if (key.escape) {
+                setShowApiKeySelection(false);
+                setQuery("");
+                setApiKeyProviderIndex(0);
+            }
+            return;
+        }
+        if (showModelSelector) {
+            if (key.upArrow) {
+                setModelSelectorIndex((i) => Math.max(0, i - 1));
+            }
+            else if (key.downArrow) {
+                setModelSelectorIndex((i) => Math.min(MODEL_CONFIGS.length - 1, i + 1));
+            }
+            else if (key.return) {
+                const selected = MODEL_CONFIGS[modelSelectorIndex];
+                onModelChange?.(selected.id);
+                setShowModelSelector(false);
+                setQuery("");
+                setShowMenu(false);
+            }
+            else if (key.escape) {
+                setShowModelSelector(false);
+                setQuery("");
+            }
+            return;
+        }
+        if (showFilePicker) {
+            const matches = filteredFiles.slice(0, 10);
+            if (key.upArrow) {
+                setFilePickerIndex(prev => Math.max(0, prev - 1));
+            }
+            else if (key.downArrow) {
+                setFilePickerIndex(prev => Math.min(matches.length - 1, prev + 1));
+            }
+            else if (key.return) {
+                const selected = matches[filePickerIndex];
+                if (selected) {
+                    const atIndex = query.lastIndexOf('@');
+                    setQuery(query.slice(0, atIndex) + `@${selected} `);
+                }
+                setShowFilePicker(false);
+                setFilePickerSearch("");
+                setFilePickerIndex(0);
+            }
+            else if (key.escape) {
+                const atIndex = query.lastIndexOf('@');
+                setQuery(query.slice(0, atIndex));
+                setShowFilePicker(false);
+                setFilePickerSearch("");
+                setFilePickerIndex(0);
+            }
+            return;
+        }
+        if (!showMenu)
+            return;
+        if (key.downArrow) {
+            setSelectedIndex((prev) => prev < QUICK_ACTIONS.length - 1 ? prev + 1 : prev);
+        }
+        if (key.upArrow) {
+            setSelectedIndex((prev) => (prev > 0 ? prev - 1 : prev));
+        }
+        if (key.return) {
+            const selected = QUICK_ACTIONS[selectedIndex];
+            if (selected.title === "/model") {
+                setShowModelSelector(true);
+                setShowMenu(false);
+                setQuery("");
+            }
+            else if (selected.title === "/api-key") {
+                setShowApiKeySelection(true);
+                setShowMenu(false);
+                setQuery("");
+            }
+            else if (selected.title === "/clear") {
+                setMessages([]);
+                setError(null);
+            }
+            else {
+                handleSubmit(selected.userPrompt, selected.title);
+            }
+            setShowMenu(false);
+        }
+        if (key.escape) {
+            setShowMenu(false);
+        }
+    });
+    // 🔹 Resize
+    if (stdout) {
+        stdout.on("resize", () => setColumns(stdout.columns));
+    }
+    async function handleSubmit(value, quickAction) {
+        if (!value.trim() || value === "/")
+            return;
+        if (!modelConfig)
+            return;
+        // API key guard
+        if (modelConfig.needsApiKey) {
+            if (modelConfig.provider === "openai" && !openAIApiKey) {
+                setError("OpenAI API key not set. Use /api-key to add it.");
+                return;
+            }
+            if (modelConfig.provider === "nvidia" && !nvidiaApiKey) {
+                setError("NVIDIA API key not set. Use /api-key to add it.");
+                return;
+            }
+        }
+        // Process @file mentions
+        const atMentionRegex = /@([\w./\-_]+)/g;
+        const fileContexts = [];
+        let match;
+        while ((match = atMentionRegex.exec(value)) !== null) {
+            const filePath = match[1];
+            try {
+                const content = readFileSync(join(cwd, filePath), 'utf-8');
+                fileContexts.push(`<file path="${filePath}">\n${content}\n</file>`);
+            }
+            catch {
+                // skip unreadable files
+            }
+        }
+        const processedValue = fileContexts.length > 0
+            ? `${fileContexts.join('\n\n')}\n\n${value}`
+            : value;
+        setError(null);
+        setQuery("");
+        setIsThinking(true);
+        // Build chat history including the current message (only user/assistant roles for the API)
+        // Only include last 3 messages to avoid hitting token limits, but ensure we include the system prompt if it exists
+        const chatHistory = [
+            ...messages.slice(-3),
+            { role: "user", content: processedValue },
+        ]
+            .filter((m) => m.role === "user" || m.role === "assistant")
+            .map((m) => ({
+            role: m.role,
+            content: m.content,
+        }));
+        // Update messages state after building history
+        setMessages((prev) => [...prev, { role: "user", content: value }]);
+        try {
+            await runAgent({
+                model: selectedModelId,
+                messages: chatHistory,
+                quickAction,
+                hasProjectFiles: false,
+                cwd,
+                opts: { openAIApiKey, nvidiaApiKey },
+                onStep: (step) => {
+                    if (step.type === "plan") {
+                        setIsThinking(false);
+                        // Deactivate previous steps and activate this plan
+                        setMessages((prev) => [
+                            ...prev.map(m => (m.role === "action" || m.role === "plan") && m.isActive
+                                ? { ...m, isActive: false }
+                                : m),
+                            { role: "plan", content: step.text, isActive: true },
+                        ]);
+                    }
+                    else if (step.type === "action") {
+                        // Deactivate previous steps and activate this action
+                        setMessages((prev) => [
+                            ...prev.map(m => (m.role === "action" || m.role === "plan") && m.isActive
+                                ? { ...m, isActive: false }
+                                : m),
+                            { role: "action", content: step.text, isActive: true },
+                        ]);
+                    }
+                    else if (step.type === "output") {
+                        // Deactivate all previous steps
+                        setMessages((prev) => prev.map(m => (m.role === "action" || m.role === "plan") && m.isActive
+                            ? { ...m, isActive: false }
+                            : m));
+                        setMessages((prev) => [...prev, { role: "assistant", content: step.text }]);
+                    }
+                },
+            });
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : "Unknown error");
+        }
+        finally {
+            setIsThinking(false);
+        }
+    }
+    function handleOnChange(val) {
+        setQuery(val);
+        const atIndex = val.lastIndexOf('@');
+        if (atIndex !== -1) {
+            const search = val.slice(atIndex + 1);
+            setFilePickerSearch(search);
+            setFilePickerIndex(0);
+            // Only open picker if search is empty (just typed @) or doesn't contain spaces yet
+            if (!showFilePicker && (search === "" || !search.includes(" "))) {
+                setFilePickerFiles(getProjectAwareness(cwd));
+                setShowFilePicker(true);
+            }
+            setShowMenu(false);
+            setShowHelp(false);
+            return;
+        }
+        if (showFilePicker) {
+            setShowFilePicker(false);
+            setFilePickerSearch("");
+        }
+        if (val === "/") {
+            setShowMenu(true);
+            setShowHelp(false);
+        }
+        else if (val === "?") {
+            setShowHelp(true);
+            setShowMenu(false);
+            setQuery("");
+        }
+        else {
+            setShowMenu(false);
+        }
+    }
+    function getStatusColor() {
+        let color = "green";
+        if (modelConfig?.needsApiKey) {
+            if (modelConfig.provider === "openai" && !openAIApiKey)
+                color = "red";
+            if (modelConfig.provider === "nvidia" && !nvidiaApiKey)
+                color = "red";
+        }
+        return color;
+    }
+    function providerBadge(provider) {
+        switch (provider) {
+            case "ollama":
+                return "local";
+            case "openai":
+                return "OpenAI";
+            case "nvidia":
+                return "NVIDIA";
+            default:
+                return provider;
+        }
+    }
+    return {
+        cwd,
+        query,
+        setQuery,
+        messages,
+        error,
+        isThinking,
+        showMenu,
+        showHelp,
+        showModelSelector,
+        showApiKeySelection,
+        showApiKeyInput,
+        selectedIndex,
+        modelSelectorIndex,
+        apiKeyProviderIndex,
+        tempApiKey,
+        setTempApiKey,
+        tipMessage,
+        columns,
+        modelConfig,
+        handleSubmit,
+        handleOnChange,
+        getStatusColor,
+        providerBadge,
+        API_KEY_PROVIDERS,
+        showFilePicker,
+        filePickerIndex,
+        filteredFiles,
+        filePickerSearch,
+    };
+};

package/dist/apps/cli/src/hooks/useWelcomeState.js

@@ -0,0 +1,77 @@
+import { useState } from "react";
+import { useInput, useStdout } from "ink";
+import { MODEL_CONFIGS } from "@beam/shared";
+export const useWelcomeState = ({ onComplete }) => {
+    const { stdout } = useStdout();
+    const columns = stdout?.columns || 80;
+    const [step, setStep] = useState("name");
+    const [name, setName] = useState("");
+    const [nameError, setNameError] = useState("");
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [apiKey, setApiKey] = useState("");
+    const selectedModel = MODEL_CONFIGS[selectedIndex];
+    const needsApiKey = selectedModel?.provider !== "ollama";
+    // 🔹 Keyboard navigation
+    useInput((input, key) => {
+        if (step !== "model")
+            return;
+        if (key.upArrow) {
+            setSelectedIndex((i) => Math.max(0, i - 1));
+        }
+        else if (key.downArrow) {
+            setSelectedIndex((i) => Math.min(MODEL_CONFIGS.length - 1, i + 1));
+        }
+        else if (key.return) {
+            const model = MODEL_CONFIGS[selectedIndex];
+            if (model.provider === "ollama") {
+                onComplete(name.trim(), model.id);
+                return;
+            }
+            setApiKey("");
+            setStep("apiKey");
+        }
+    });
+    function handleNameSubmit(value) {
+        const trimmed = value.trim();
+        if (!trimmed) {
+            setNameError("Name cannot be empty.");
+            return;
+        }
+        setNameError("");
+        setStep("model");
+    }
+    function handleApiKeySubmit(value) {
+        const trimmed = value.trim();
+        onComplete(name.trim(), selectedModel.id, trimmed || undefined);
+    }
+    function providerBadge(provider) {
+        switch (provider) {
+            case "ollama":
+                return "local";
+            case "openai":
+                return "OpenAI";
+            case "nvidia":
+                return "NVIDIA";
+            default:
+                return provider;
+        }
+    }
+    const frameHeight = step === "name" ? 17 : step === "model" ? 20 : 21;
+    return {
+        columns,
+        step,
+        name,
+        nameError,
+        selectedIndex,
+        apiKey,
+        selectedModel,
+        needsApiKey,
+        frameHeight,
+        setName,
+        setApiKey,
+        setNameError,
+        handleNameSubmit,
+        handleApiKeySubmit,
+        providerBadge,
+    };
+};