feat: Major UI improvements and SSH-only mode
- Tool rendering: Unified tool_use/tool_result cards with collapsible results - Special rendering for WebSearch, WebFetch, Task, Write tools - File upload support with drag & drop - Permission dialog for tool approvals - Status bar with session stats and permission mode toggle - SSH-only mode: Removed local container execution - Host switching disabled during active session with visual indicator - Directory browser: Browse remote directories via SSH - Recent directories dropdown with localStorage persistence - Follow-up messages during generation - Improved scroll behavior with "back to bottom" button 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
177
frontend/src/components/StatusBar.jsx
Normal file
177
frontend/src/components/StatusBar.jsx
Normal file
@@ -0,0 +1,177 @@
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
Coins, MessageSquare, Database, Zap, Loader2,
|
||||
Brain, ShieldCheck, FileEdit, ChevronDown
|
||||
} from 'lucide-react';
|
||||
|
||||
// Permission mode definitions with display info
|
||||
const PERMISSION_MODES = [
|
||||
{ value: 'default', label: 'Default', icon: ShieldCheck, color: 'text-blue-400', description: 'Prompts for dangerous tools' },
|
||||
{ value: 'acceptEdits', label: 'Accept Edits', icon: FileEdit, color: 'text-green-400', description: 'Auto-accept file edits' },
|
||||
{ value: 'plan', label: 'Plan', icon: Brain, color: 'text-purple-400', description: 'Planning mode only' },
|
||||
{ value: 'bypassPermissions', label: 'Bypass', icon: Zap, color: 'text-orange-400', description: 'Allow all tools (careful!)' },
|
||||
];
|
||||
|
||||
export function StatusBar({ sessionStats, isProcessing, connected, permissionMode = 'default', controlInitialized, onChangeMode }) {
|
||||
const [showModeMenu, setShowModeMenu] = useState(false);
|
||||
|
||||
const {
|
||||
totalCost = 0,
|
||||
inputTokens = 0,
|
||||
outputTokens = 0,
|
||||
cacheReadTokens = 0,
|
||||
cacheCreationTokens = 0,
|
||||
numTurns = 0,
|
||||
isCompacting = false,
|
||||
} = sessionStats || {};
|
||||
|
||||
// Get current mode info
|
||||
const currentMode = PERMISSION_MODES.find(m => m.value === permissionMode) || PERMISSION_MODES[0];
|
||||
const ModeIcon = currentMode.icon;
|
||||
|
||||
// Calculate total tokens and estimate context usage
|
||||
const totalTokens = inputTokens + outputTokens;
|
||||
// Claude has ~200k context, but we show relative usage
|
||||
const contextPercent = Math.min(100, (inputTokens / 200000) * 100);
|
||||
|
||||
// Format cost
|
||||
const formatCost = (cost) => {
|
||||
if (cost < 0.01) return `$${cost.toFixed(4)}`;
|
||||
if (cost < 1) return `$${cost.toFixed(3)}`;
|
||||
return `$${cost.toFixed(2)}`;
|
||||
};
|
||||
|
||||
// Format token count
|
||||
const formatTokens = (tokens) => {
|
||||
if (tokens >= 1000000) return `${(tokens / 1000000).toFixed(1)}M`;
|
||||
if (tokens >= 1000) return `${(tokens / 1000).toFixed(1)}k`;
|
||||
return tokens.toString();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-dark-900 border-t border-dark-700 px-4 py-2">
|
||||
<div className="flex items-center justify-between text-xs">
|
||||
{/* Left side: Stats */}
|
||||
<div className="flex items-center gap-4">
|
||||
{/* Connection status */}
|
||||
<div className="flex items-center gap-1.5">
|
||||
<div className={`w-2 h-2 rounded-full ${connected ? 'bg-green-500' : 'bg-red-500'}`} />
|
||||
<span className="text-dark-400">{connected ? 'Connected' : 'Disconnected'}</span>
|
||||
</div>
|
||||
|
||||
{/* Processing indicator */}
|
||||
{isProcessing && (
|
||||
<div className="flex items-center gap-1.5 text-orange-400">
|
||||
<Loader2 className="w-3 h-3 animate-spin" />
|
||||
<span>Processing...</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Compacting indicator */}
|
||||
{isCompacting && (
|
||||
<div className="flex items-center gap-1.5 text-purple-400">
|
||||
<Zap className="w-3 h-3 animate-pulse" />
|
||||
<span>Compacting context...</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Turns */}
|
||||
{numTurns > 0 && (
|
||||
<div className="flex items-center gap-1.5 text-dark-400">
|
||||
<MessageSquare className="w-3 h-3" />
|
||||
<span>{numTurns} turns</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Cost */}
|
||||
{totalCost > 0 && (
|
||||
<div className="flex items-center gap-1.5 text-dark-400">
|
||||
<Coins className="w-3 h-3" />
|
||||
<span>{formatCost(totalCost)}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Permission Mode Toggle - show always for debugging, just disabled when not initialized */}
|
||||
{(
|
||||
<div className="relative">
|
||||
<button
|
||||
onClick={() => setShowModeMenu(!showModeMenu)}
|
||||
className={`flex items-center gap-1.5 px-2 py-0.5 rounded ${currentMode.color} hover:bg-dark-800 transition-colors`}
|
||||
title={currentMode.description}
|
||||
>
|
||||
<ModeIcon className="w-3 h-3" />
|
||||
<span>{currentMode.label}</span>
|
||||
<ChevronDown className={`w-3 h-3 transition-transform ${showModeMenu ? 'rotate-180' : ''}`} />
|
||||
</button>
|
||||
|
||||
{showModeMenu && (
|
||||
<div className="absolute bottom-full left-0 mb-1 bg-dark-800 border border-dark-600 rounded shadow-lg py-1 min-w-[160px] z-50">
|
||||
{PERMISSION_MODES.map((mode) => {
|
||||
const Icon = mode.icon;
|
||||
const isActive = mode.value === permissionMode;
|
||||
return (
|
||||
<button
|
||||
key={mode.value}
|
||||
onClick={() => {
|
||||
onChangeMode(mode.value);
|
||||
setShowModeMenu(false);
|
||||
}}
|
||||
className={`w-full flex items-center gap-2 px-3 py-1.5 text-left hover:bg-dark-700 transition-colors ${
|
||||
isActive ? mode.color : 'text-dark-300'
|
||||
}`}
|
||||
>
|
||||
<Icon className="w-3.5 h-3.5" />
|
||||
<div>
|
||||
<div className="text-xs font-medium">{mode.label}</div>
|
||||
<div className="text-[10px] text-dark-500">{mode.description}</div>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Right side: Token usage */}
|
||||
<div className="flex items-center gap-4">
|
||||
{/* Token counts */}
|
||||
{totalTokens > 0 && (
|
||||
<div className="flex items-center gap-3 text-dark-400">
|
||||
<span className="flex items-center gap-1">
|
||||
<span className="text-dark-500">In:</span>
|
||||
<span className="text-cyan-400">{formatTokens(inputTokens)}</span>
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<span className="text-dark-500">Out:</span>
|
||||
<span className="text-green-400">{formatTokens(outputTokens)}</span>
|
||||
</span>
|
||||
{cacheReadTokens > 0 && (
|
||||
<span className="flex items-center gap-1">
|
||||
<Database className="w-3 h-3 text-purple-400" />
|
||||
<span className="text-purple-400">{formatTokens(cacheReadTokens)}</span>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Context status - simple text based on remaining context */}
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-dark-500">Context:</span>
|
||||
{inputTokens > 0 ? (
|
||||
<span className={`${
|
||||
contextPercent >= 95 ? 'text-red-400 font-medium' :
|
||||
contextPercent >= 85 ? 'text-yellow-400' : 'text-green-400'
|
||||
}`}>
|
||||
{contextPercent >= 85 ? `${(100 - contextPercent).toFixed(0)}% left` : 'ok'}
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-green-400">ok</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user