@bluehawks/cli 1.0.37 → 1.0.39

package/src/cli/components/ChatArea.tsx

@@ -0,0 +1,127 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import Spinner from 'ink-spinner';
+import TextInput from 'ink-text-input';
+import { COLORS } from '../../config/constants.js';
+
+interface MessageDisplay {
+    role: 'user' | 'assistant' | 'tool' | 'system' | 'error';
+    content: string;
+}
+
+interface ChatAreaProps {
+    messages: MessageDisplay[];
+    streamingContent: string;
+    currentTool: string | null;
+    isProcessing: boolean;
+    input: string;
+    setInput: (v: string) => void;
+    onSubmit: (v: string) => void;
+    pendingApproval: { toolName: string; args: any } | null;
+}
+
+export const ChatArea: React.FC<ChatAreaProps> = ({
+    messages,
+    streamingContent,
+    currentTool,
+    isProcessing,
+    input,
+    setInput,
+    onSubmit,
+    pendingApproval,
+}) => {
+    const getRoleColor = (role: MessageDisplay['role']): string => {
+        switch (role) {
+            case 'user': return COLORS.primary;
+            case 'assistant': return COLORS.success;
+            case 'tool': return COLORS.info;
+            case 'system': return COLORS.warning;
+            case 'error': return COLORS.error;
+            default: return COLORS.muted;
+        }
+    };
+
+    return (
+        <Box flexDirection="column" borderStyle="single" borderColor="gray" flexGrow={1} paddingX={1} overflowY="hidden">
+            {/* Messages Area */}
+            <Box flexDirection="column" flexGrow={1} justifyContent="flex-end">
+                {messages.slice(-15).map((msg, i) => { // Show last 15 messages to fit
+                    if (msg.role === 'tool') {
+                        try {
+                            const content = JSON.parse(msg.content);
+                            if (content.type === 'tool_start') {
+                                const jsonStr = JSON.stringify(content.args);
+                                const displayArgs = jsonStr.length < 60 ? jsonStr : '...';
+                                return (
+                                    <Box key={i} flexDirection="column" borderStyle="round" borderColor="magenta" paddingX={1} marginBottom={1}>
+                                        <Text color="magenta">⚡ TOOL: {content.name} <Text color="gray">{displayArgs}</Text></Text>
+                                    </Box>
+                                );
+                            } else if (content.type === 'tool_end') {
+                                return (
+                                    <Box key={i} flexDirection="column" borderStyle="round" borderColor="green" paddingX={1} marginBottom={1}>
+                                        <Text color="green">✅ RESULT: {content.name}</Text>
+                                    </Box>
+                                );
+                            }
+                        } catch {
+                            return <Text key={i} color="gray">🔧 {msg.content}</Text>;
+                        }
+                    }
+
+                    return (
+                        <Box key={i} marginBottom={1} flexDirection="column">
+                            <Text bold color={getRoleColor(msg.role)}>
+                                {msg.role === 'user' ? '👤 YOU ' : msg.role === 'assistant' ? '🦅 BLUEHAWKS AI ' : 'ℹ️ SYSTEM '}
+                            </Text>
+                            <Box marginLeft={2}>
+                                <Text color="white">
+                                    {(msg.role === 'user' || msg.role === 'assistant') ? '🔹 ' : ''}{msg.content}
+                                </Text>
+                            </Box>
+                        </Box>
+                    );
+                })}
+
+                {/* Streaming */}
+                {streamingContent && (
+                    <Box marginBottom={1} flexDirection="column">
+                        <Text bold color={COLORS.success}>🦅 BLUEHAWKS AI </Text>
+                        <Box marginLeft={2}>
+                            <Text color="white">🔹 {streamingContent}</Text>
+                        </Box>
+                    </Box>
+                )}
+
+                {/* Current Tool Spinner */}
+                {currentTool && !messages.some(m => m.role === 'tool' && m.content.includes(currentTool) && m.content.includes('tool_start')) && (
+                    <Box marginBottom={1}>
+                        <Spinner type="dots" />
+                        <Text color="magenta"> Executing {currentTool}...</Text>
+                    </Box>
+                )}
+
+                {/* Approval Prompt */}
+                {pendingApproval && (
+                    <Box borderStyle="double" borderColor="yellow" padding={1} marginY={1}>
+                        <Text color="yellow" bold>⚠️ APPROVAL REQUIRED: {pendingApproval.toolName}</Text>
+                        <Text>Press Y to approve, N to deny</Text>
+                    </Box>
+                )}
+            </Box>
+
+            {/* Input Area */}
+            {!pendingApproval && (
+                <Box borderStyle="single" borderTop borderColor="gray" paddingTop={0} marginTop={1}>
+                    <Text color="blue">❯ </Text>
+                    <TextInput
+                        value={input}
+                        onChange={setInput}
+                        onSubmit={onSubmit}
+                        placeholder={isProcessing ? "Processing..." : "Command..."}
+                    />
+                </Box>
+            )}
+        </Box>
+    );
+};

package/src/cli/components/Header.tsx

@@ -0,0 +1,86 @@
+import React, { useEffect, useState } from 'react';
+import { Box, Text } from 'ink';
+import { SystemEvent } from './types.js';
+
+const Branding = () => (
+    <Box flexDirection="column" borderStyle="round" borderColor="cyan" paddingX={1} width={30} height={10}>
+        <Text color="cyan" bold>
+            {`
+ ___  __   __  __  
+| _ )| |  |  ||  | 
+| _ \\| |__|  ||  |__
+|___/|____|__||____|
+ _  _   __  __  __ __ 
+| || | /  \\ \\ \\/ /| _\\ 
+| __ || || | \\  / | _\\
+|_||_||_||_|  \\/  |__/
+`}
+        </Text>
+        <Text color="blue" dimColor>-------------------------</Text>
+        <Text color="cyan">  OPERATIONAL</Text>
+    </Box>
+);
+
+const SystemMonitor: React.FC<{ events: SystemEvent[] }> = ({ events }) => {
+    return (
+        <Box flexDirection="column" borderStyle="round" borderColor="green" flexGrow={1} height={10} marginLeft={1}>
+            <Box borderStyle="single" borderBottom borderColor="green" paddingX={1}>
+                <Text color="green">⚡ SYSTEM LOG [Live]</Text>
+            </Box>
+            <Box flexDirection="column" paddingX={1}>
+                {events.slice(-6).map((event) => (
+                    <Text key={event.id} wrap="truncate">
+                        <Text color="gray">[{event.timestamp.split('T')[1]?.split('.')[0]}] </Text>
+                        <Text color={event.type === 'error' ? 'red' : event.type === 'success' ? 'green' : 'white'}>
+                            {event.type === 'success' ? '✓ ' : event.type === 'error' ? '✗ ' : 'ℹ '}
+                            {event.message}
+                        </Text>
+                    </Text>
+                ))}
+            </Box>
+        </Box>
+    );
+};
+
+const NetworkActivity: React.FC<{ tps: number }> = ({ tps }) => {
+    // Simulated sparkline or bar chart
+    const [history, setHistory] = useState<number[]>(new Array(10).fill(0));
+
+    useEffect(() => {
+        setHistory(prev => [...prev.slice(1), tps]);
+    }, [tps]);
+
+    return (
+        <Box flexDirection="column" borderStyle="round" borderColor="magenta" width={30} height={10} marginLeft={1}>
+            <Box borderStyle="single" borderBottom borderColor="magenta" paddingX={1}>
+                <Text color="magenta">🧠 NEURAL VELOCITY</Text>
+            </Box>
+            <Box flexDirection="column" paddingX={1} paddingTop={1}>
+                <Box justifyContent="space-between">
+                    <Text>Speed:</Text>
+                    <Text color="magenta" bold>{tps.toFixed(1)} t/s</Text>
+                </Box>
+                <Box marginTop={1} alignItems="flex-end" height={3}>
+                    {history.map((val, i) => {
+                        const height = Math.min(3, Math.ceil(val / 10)); // Scale roughly
+                        return (
+                            <Box key={i} flexDirection="column" marginRight={1}>
+                                <Text color="magenta">
+                                    {height === 0 ? '_' : height === 1 ? ' ' : height === 2 ? '▂' : '▃'}
+                                </Text>
+                            </Box>
+                        );
+                    })}
+                </Box>
+            </Box>
+        </Box>
+    );
+};
+
+export const Header: React.FC<{ events: SystemEvent[]; tps: number }> = ({ events, tps }) => (
+    <Box flexDirection="row" width="100%">
+        <Branding />
+        <SystemMonitor events={events} />
+        <NetworkActivity tps={tps} />
+    </Box>
+);

package/src/cli/components/Layout.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { Box } from 'ink';
+import { Header } from './Header.js';
+import { Sidebar } from './Sidebar.js';
+import { ChatArea } from './ChatArea.js';
+import { SystemEvent, ToolActivity } from './types.js';
+
+interface LayoutProps {
+    // Header Data
+    systemEvents: SystemEvent[];
+    tps: number;
+
+    // Sidebar Data
+    model: string;
+    contextUsage: number;
+    totalTokens: number;
+    toolHistory: ToolActivity[];
+
+    // Chat Data
+    messages: any[];
+    streamingContent: string;
+    currentTool: string | null;
+    isProcessing: boolean;
+    input: string;
+    setInput: (v: string) => void;
+    onSubmit: (v: string) => void;
+    pendingApproval: any;
+}
+
+export const Layout: React.FC<LayoutProps> = (props) => {
+    return (
+        <Box flexDirection="column" padding={1} height="100%">
+            {/* Top Zone: Header & Telemetry */}
+            <Header events={props.systemEvents} tps={props.tps} />
+
+            {/* Middle Zone: Chat & Sidebar */}
+            <Box flexDirection="row" flexGrow={1} marginTop={1}>
+                {/* Main Chat Area */}
+                <ChatArea
+                    messages={props.messages}
+                    streamingContent={props.streamingContent}
+                    currentTool={props.currentTool}
+                    isProcessing={props.isProcessing}
+                    input={props.input}
+                    setInput={props.setInput}
+                    onSubmit={props.onSubmit}
+                    pendingApproval={props.pendingApproval}
+                />
+
+                {/* Right Sidebar */}
+                <Sidebar
+                    model={props.model}
+                    contextUsage={props.contextUsage}
+                    totalTokens={props.totalTokens}
+                    toolHistory={props.toolHistory}
+                />
+            </Box>
+        </Box>
+    );
+};

package/src/cli/components/Sidebar.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import { ToolActivity } from './types.js';
+
+const SessionInfo: React.FC<{ model: string; contextUsage: number; totalTokens: number }> = ({ model, contextUsage, totalTokens }) => {
+    const bars = Math.floor(contextUsage * 20);
+    const emptyBars = 20 - bars;
+    const barStr = '█'.repeat(bars) + '░'.repeat(emptyBars);
+
+    return (
+        <Box flexDirection="column" borderStyle="round" borderColor="yellow" paddingX={1} marginBottom={1}>
+            <Text color="yellow" bold>SESSION INTEL</Text>
+            <Box flexDirection="column" marginTop={1}>
+                <Text color="gray">Model:</Text>
+                <Text color="white">{model}</Text>
+
+                <Box marginTop={1} flexDirection="column">
+                    <Text color="gray">Context Load:</Text>
+                    <Text color={contextUsage > 0.8 ? 'red' : 'green'}>{barStr}</Text>
+                    <Text color="gray">{(contextUsage * 100).toFixed(1)}%</Text>
+                </Box>
+
+                <Box marginTop={1} flexDirection="column">
+                    <Text color="gray">Total Tokens:</Text>
+                    <Text color="white">{totalTokens.toLocaleString()}</Text>
+                </Box>
+            </Box>
+        </Box>
+    );
+};
+
+const ToolMap: React.FC<{ history: ToolActivity[] }> = ({ history }) => {
+    // Create a fixed grid of 5x5 blocks (25 slots)
+    // Fill from end of history reversed
+    const slots = new Array(25).fill(null);
+    const recentHistory = history.slice(-25).reverse(); // Newest first
+
+    return (
+        <Box flexDirection="column" borderStyle="round" borderColor="blue" paddingX={1} flexGrow={1}>
+            <Text color="blue" bold>TOOL ACTIVITY</Text>
+            <Box flexDirection="row" flexWrap="wrap" marginTop={1} width={15}>
+                {slots.map((_, i) => {
+                    const activity = recentHistory[i];
+                    if (!activity) {
+                        return <Text key={i} color="gray">▪ </Text>;
+                    }
+                    const color = activity.status === 'success' ? 'green' : activity.status === 'failed' ? 'red' : 'yellow';
+                    return <Text key={i} color={color}>■ </Text>;
+                })}
+            </Box>
+            <Box marginTop={1}>
+                <Text color="gray" dimColor>Latest: {recentHistory[0]?.toolName || 'None'}</Text>
+            </Box>
+        </Box>
+    );
+};
+
+export const Sidebar: React.FC<{
+    model: string;
+    contextUsage: number;
+    totalTokens: number;
+    toolHistory: ToolActivity[];
+}> = ({ model, contextUsage, totalTokens, toolHistory }) => (
+    <Box flexDirection="column" width={24} marginLeft={1}>
+        <SessionInfo model={model} contextUsage={contextUsage} totalTokens={totalTokens} />
+        <ToolMap history={toolHistory} />
+    </Box>
+);

package/src/cli/components/types.ts

@@ -0,0 +1,32 @@
+/**
+ * Shared types for the Cyberpunk Dashboard UI
+ */
+
+export interface SystemEvent {
+    id: string;
+    timestamp: string;
+    message: string;
+    type: 'info' | 'success' | 'error' | 'warning';
+}
+
+export interface ToolActivity {
+    id: string;
+    toolName: string;
+    status: 'running' | 'success' | 'failed';
+    timestamp: number;
+}
+
+export interface DragMetric {
+    label: string;
+    value: string | number;
+    unit?: string;
+    color?: string;
+}
+
+export interface DashboardState {
+    events: SystemEvent[];
+    toolHistory: ToolActivity[];
+    tokensPerSecond: number;
+    contextUsage: number; // 0 to 1
+    totalTokens: number;
+}

package/src/config/constants.ts

@@ -10,7 +10,7 @@ export const DEFAULT_RERANK_MODEL = 'Qwen/Qwen3-Reranker-0.6B';
 
 // CLI Metadata
 export const CLI_NAME = 'bluehawks';
-export const CLI_VERSION = '1.0.37';
+export const CLI_VERSION = '1.0.39';
 export const CLI_DESCRIPTION = 'A production-ready multi-agent AI CLI assistant';
 
 // Configuration Paths