@benzsiangco/jarvis 1.0.2 → 1.1.0

package/src/web/ui/src/components/Layout/ModelSelector.tsx

@@ -0,0 +1,235 @@
+import { useState, useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { ChevronDown, Sparkles, Loader2, AlertTriangle } from 'lucide-react';
+
+interface Model {
+  id: string;
+  name: string;
+  provider: string;
+  isAvailable?: boolean;
+}
+
+interface ModelSelectorProps {
+  selectedModelId: string;
+  onModelChange: (modelId: string) => void;
+}
+
+export function ModelSelector({ selectedModelId, onModelChange }: ModelSelectorProps) {
+  const [models, setModels] = useState<Model[]>([]);
+  const [isOpen, setIsOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0 });
+
+  // Fetch models from API
+  useEffect(() => {
+    const fetchModels = async () => {
+      try {
+        setIsLoading(true);
+        setError(null);
+        
+        const response = await fetch('/api/models');
+        if (!response.ok) throw new Error('Failed to fetch models');
+        
+        const data = await response.json();
+        
+        if (Array.isArray(data) && data.length > 0) {
+          setModels(data);
+          
+          // Auto-select first available model if none selected
+          if (!selectedModelId) {
+            const firstAvailable = data.find((m: Model) => m.isAvailable) || data[0];
+            if (firstAvailable) {
+              onModelChange(firstAvailable.id);
+            }
+          }
+        } else {
+          throw new Error('No models available');
+        }
+      } catch (err) {
+        console.error('Model fetch error:', err);
+        setError(err instanceof Error ? err.message : 'Failed to load models');
+        
+        // Fallback models
+        const fallback: Model[] = [
+          { id: 'google/antigravity-claude-sonnet-4-5', name: 'Claude Sonnet 4.5', provider: 'google', isAvailable: true },
+          { id: 'google/antigravity-gemini-3-pro', name: 'Gemini 3 Pro', provider: 'google', isAvailable: true },
+        ];
+        setModels(fallback);
+        
+        if (!selectedModelId && fallback[0]) {
+          onModelChange(fallback[0].id);
+        }
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchModels();
+  }, []);
+
+  // Click outside to close
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handleClickOutside = (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+      // Check if click is outside both button and dropdown
+      if (
+        buttonRef.current && !buttonRef.current.contains(target) &&
+        !target.closest('.model-selector-dropdown')
+      ) {
+        setIsOpen(false);
+      }
+    };
+
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setIsOpen(false);
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    document.addEventListener('keydown', handleEscape);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('keydown', handleEscape);
+    };
+  }, [isOpen]);
+
+  const selectedModel = models.find(m => m.id === selectedModelId);
+
+  const handleSelect = (modelId: string) => {
+    onModelChange(modelId);
+    setIsOpen(false);
+  };
+
+  const handleToggle = () => {
+    if (!isLoading && buttonRef.current) {
+      const rect = buttonRef.current.getBoundingClientRect();
+      setDropdownPosition({
+        top: rect.bottom + 8,
+        left: rect.left
+      });
+      setIsOpen(!isOpen);
+      console.log('Setting isOpen to:', !isOpen);
+    }
+  };
+
+  console.log('ModelSelector render - isOpen:', isOpen, 'isLoading:', isLoading, 'models:', models.length);
+
+  const dropdownContent = isOpen && !isLoading && (
+    <>
+      <style>{`
+        .model-dropdown-scroll::-webkit-scrollbar {
+          display: none;
+        }
+      `}</style>
+      <div 
+        className="model-selector-dropdown fixed w-80 bg-zinc-900 border-2 border-cyan-500 rounded-lg shadow-2xl z-[9999] overflow-hidden"
+        style={{ top: `${dropdownPosition.top}px`, left: `${dropdownPosition.left}px` }}
+      >
+      {error && (
+        <div className="flex items-center gap-2 px-3 py-2 bg-amber-500/10 border-b border-amber-500/20">
+          <AlertTriangle className="w-4 h-4 text-amber-500 shrink-0" />
+          <span className="text-xs text-amber-400">{error}</span>
+        </div>
+      )}
+      
+      <div 
+        className="max-h-[400px] overflow-y-auto model-dropdown-scroll"
+        style={{
+          scrollbarWidth: 'none', /* Firefox */
+          msOverflowStyle: 'none', /* IE and Edge */
+        }}
+      >
+        {models.length === 0 ? (
+          <div className="px-4 py-8 text-center text-zinc-500 text-sm">
+            No models available
+          </div>
+        ) : (
+          <div className="p-2 space-y-1">
+            {models.map((model) => {
+              const isSelected = model.id === selectedModelId;
+              const isDisabled = model.isAvailable === false;
+              
+              return (
+                <button
+                  key={model.id}
+                  onClick={() => !isDisabled && handleSelect(model.id)}
+                  disabled={isDisabled}
+                  className={`
+                    w-full px-3 py-2.5 rounded-md text-left transition-all
+                    ${isSelected 
+                      ? 'bg-cyan-500/20 border border-cyan-500/30' 
+                      : 'hover:bg-zinc-800/50 border border-transparent'
+                    }
+                    ${isDisabled 
+                      ? 'opacity-40 cursor-not-allowed' 
+                      : 'cursor-pointer'
+                    }
+                  `}
+                >
+                  <div className="flex items-start justify-between gap-3">
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-2">
+                        <h4 className={`text-sm font-semibold truncate ${isSelected ? 'text-cyan-300' : 'text-zinc-200'}`}>
+                          {model.name}
+                        </h4>
+                        {isSelected && (
+                          <div className="w-2 h-2 rounded-full bg-cyan-500 shrink-0" />
+                        )}
+                      </div>
+                      <div className="flex items-center gap-2 mt-0.5">
+                        <p className="text-xs text-zinc-500 uppercase tracking-wide">
+                          {model.provider}
+                        </p>
+                        {isDisabled && (
+                          <span className="text-[10px] px-1.5 py-0.5 bg-zinc-800 text-zinc-500 rounded uppercase tracking-wide">
+                            Key Missing
+                          </span>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                </button>
+              );
+            })}
+          </div>
+        )}
+      </div>
+    </div>
+    </>
+  );
+
+  return (
+    <div className="relative">
+      {/* Trigger Button */}
+      <button
+        ref={buttonRef}
+        onClick={handleToggle}
+        disabled={isLoading}
+        className="flex items-center gap-2 px-3 py-1.5 bg-zinc-900/50 hover:bg-zinc-900 border border-zinc-800 hover:border-zinc-700 rounded-lg transition-all group disabled:opacity-50 disabled:cursor-not-allowed"
+      >
+        <div className="flex items-center justify-center w-5 h-5 rounded bg-gradient-to-br from-cyan-500/20 to-blue-500/20 group-hover:from-cyan-500/30 group-hover:to-blue-500/30 transition-all">
+          {isLoading ? (
+            <Loader2 className="w-3 h-3 text-cyan-400 animate-spin" />
+          ) : (
+            <Sparkles className="w-3 h-3 text-cyan-400" />
+          )}
+        </div>
+        
+        <span className="text-sm font-semibold text-zinc-300 max-w-[120px] md:max-w-[200px] truncate">
+          {isLoading ? 'Loading...' : selectedModel?.name || 'Select Model'}
+        </span>
+        
+        <ChevronDown 
+          className={`w-4 h-4 text-zinc-500 transition-transform ${isOpen ? 'rotate-180' : ''}`} 
+        />
+      </button>
+
+      {/* Dropdown Menu - Rendered via Portal */}
+      {typeof document !== 'undefined' && createPortal(dropdownContent, document.body)}
+    </div>
+  );
+}

package/src/web/ui/src/components/Layout/SessionStats.tsx

@@ -0,0 +1,369 @@
+import React, { useEffect, useState } from 'react';
+import type { Session } from '../../types';
+import { Copy, CheckCircle2 } from 'lucide-react';
+import { 
+  MODEL_CONTEXT_LIMITS, 
+  MODEL_PRICING, 
+  MODEL_DISPLAY_NAMES, 
+  PROVIDER_NAMES 
+} from '../../config/models';
+
+interface SessionStatsData {
+  totalTokens: number;
+  inputTokens: number;
+  outputTokens: number;
+  reasoningTokens: number;
+  cacheTokensRead: number;
+  cacheTokensWrite: number;
+  userMessages: number;
+  assistantMessages: number;
+  modelId: string;
+  modelName: string;
+  providerId: string;
+  contextLimit: number | null;
+  totalCost: number;
+  usagePercent: number | null;
+  contextBreakdown: {
+    user: number;
+    assistant: number;
+    toolCalls: number;
+    other: number;
+  };
+}
+
+export function SessionStats({ sessionId }: { sessionId: string | null }) {
+  const [session, setSession] = useState<Session | null>(null);
+  const [stats, setStats] = useState<SessionStatsData | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [copiedId, setCopiedId] = useState<string | null>(null);
+
+  // Fetch session data
+  const fetchSession = async () => {
+    if (!sessionId) {
+      setSession(null);
+      setStats(null);
+      setLoading(false);
+      return;
+    }
+
+    try {
+      const res = await fetch(`/api/sessions/${sessionId}`);
+      if (!res.ok) throw new Error('Failed to fetch session');
+      const data = await res.json();
+      setSession(data);
+      setStats(calculateStats(data));
+      setLoading(false);
+    } catch (err) {
+      console.error('Failed to fetch session:', err);
+      setLoading(false);
+    }
+  };
+
+  // Initial fetch
+  useEffect(() => {
+    fetchSession();
+  }, [sessionId]);
+
+  // Real-time polling every 2 seconds
+  useEffect(() => {
+    if (!sessionId) return;
+    const interval = setInterval(fetchSession, 2000);
+    return () => clearInterval(interval);
+  }, [sessionId]);
+
+  // Copy message ID to clipboard
+  const copyMessageId = (id: string) => {
+    navigator.clipboard.writeText(id);
+    setCopiedId(id);
+    setTimeout(() => setCopiedId(null), 2000);
+  };
+
+  // Empty state
+  if (!sessionId) {
+    return (
+      <div className="flex items-center justify-center h-64 text-zinc-500">
+        <p className="text-sm">No session selected</p>
+      </div>
+    );
+  }
+
+  // Loading state
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-cyan-500" />
+      </div>
+    );
+  }
+
+  // Error state
+  if (!session || !stats) {
+    return (
+      <div className="flex items-center justify-center h-64 text-red-500">
+        <p className="text-sm">Failed to load session stats</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Stats Grid - Two Column Layout */}
+      <div className="grid grid-cols-2 gap-3 text-xs">
+        <StatRow label="Session" value={truncateId(session.id)} mono />
+        <StatRow label="Messages" value={session.messages.length} />
+        
+        <StatRow label="Provider" value={stats.providerId} />
+        <StatRow label="Model" value={stats.modelName} />
+        
+        <StatRow label="Context Limit" value={formatNumber(stats.contextLimit)} />
+        <StatRow label="Total Tokens" value={formatNumber(stats.totalTokens)} highlight="cyan" />
+        
+        <StatRow label="Usage" value={stats.usagePercent !== null ? `${stats.usagePercent.toFixed(1)}%` : 'N/A'} highlight="amber" />
+        <StatRow label="Input Tokens" value={formatNumber(stats.inputTokens)} />
+        
+        <StatRow label="Output Tokens" value={formatNumber(stats.outputTokens)} />
+        <StatRow label="Reasoning Tokens" value={formatNumber(stats.reasoningTokens)} />
+        
+        <StatRow label="Cache Tokens (r/w)" value={`${stats.cacheTokensRead} / ${stats.cacheTokensWrite}`} />
+        <StatRow label="User Messages" value={stats.userMessages} />
+        
+        <StatRow label="Assistant Messages" value={stats.assistantMessages} />
+        <StatRow label="Total Cost" value={`$${stats.totalCost.toFixed(2)}`} highlight="emerald" />
+        
+        <StatRow label="First Message" value={session.messages[0] ? formatDate(session.messages[0].timestamp) : 'N/A'} />
+        <StatRow label="Last Activity" value={formatDate(session.updatedAt)} />
+      </div>
+
+      {/* Context Breakdown Visualization */}
+      <div>
+        <p className="text-[10px] font-bold uppercase tracking-wider text-zinc-500 mb-3">
+          Context Breakdown
+        </p>
+        <div className="space-y-2">
+          <div className="h-1.5 bg-zinc-900 rounded-full overflow-hidden flex">
+            <div 
+              className="bg-emerald-500" 
+              style={{ width: `${stats.contextBreakdown.user}%` }}
+            />
+            <div 
+              className="bg-purple-500" 
+              style={{ width: `${stats.contextBreakdown.assistant}%` }}
+            />
+            <div 
+              className="bg-amber-500" 
+              style={{ width: `${stats.contextBreakdown.toolCalls}%` }}
+            />
+            <div 
+              className="bg-zinc-700" 
+              style={{ width: `${stats.contextBreakdown.other}%` }}
+            />
+          </div>
+          <div className="flex items-center gap-3 text-[9px] text-zinc-400 flex-wrap">
+            <span className="flex items-center gap-1">
+              <div className="w-2 h-2 rounded-full bg-emerald-500" />
+              User {stats.contextBreakdown.user.toFixed(1)}%
+            </span>
+            <span className="flex items-center gap-1">
+              <div className="w-2 h-2 rounded-full bg-purple-500" />
+              Assistant {stats.contextBreakdown.assistant.toFixed(1)}%
+            </span>
+            <span className="flex items-center gap-1">
+              <div className="w-2 h-2 rounded-full bg-amber-500" />
+              Tool Calls {stats.contextBreakdown.toolCalls.toFixed(1)}%
+            </span>
+            <span className="flex items-center gap-1">
+              <div className="w-2 h-2 rounded-full bg-zinc-700" />
+              Other {stats.contextBreakdown.other.toFixed(1)}%
+            </span>
+          </div>
+        </div>
+      </div>
+
+      {/* Raw Messages List */}
+      <div>
+        <p className="text-[10px] font-bold uppercase tracking-wider text-zinc-500 mb-3">
+          Raw messages
+        </p>
+        <div className="max-h-64 overflow-y-auto custom-scrollbar space-y-1">
+          {session.messages.length === 0 ? (
+            <div className="p-4 rounded-xl border border-dashed border-zinc-800 text-center">
+              <p className="text-[10px] text-zinc-500 italic">No messages yet</p>
+            </div>
+          ) : (
+            session.messages.map(msg => (
+              <button
+                key={msg.id}
+                onClick={() => copyMessageId(msg.id)}
+                className="w-full flex items-center gap-2 text-[9px] font-mono p-2 rounded bg-zinc-900/40 border border-zinc-800 hover:bg-zinc-800/60 hover:border-cyan-500/30 transition-all cursor-pointer group"
+              >
+                <span className={`font-bold ${
+                  msg.role === 'user' ? 'text-emerald-500' : 
+                  msg.role === 'assistant' ? 'text-purple-500' : 
+                  'text-zinc-500'
+                }`}>
+                  {msg.role}
+                </span>
+                <span className="text-zinc-600">•</span>
+                <span className="text-zinc-400 truncate flex-1 text-left">
+                  {msg.id}
+                </span>
+                <span className="text-zinc-600 text-[8px] shrink-0">
+                  {formatTime(msg.timestamp)}
+                </span>
+                {copiedId === msg.id ? (
+                  <CheckCircle2 size={12} className="text-emerald-500 shrink-0" />
+                ) : (
+                  <Copy size={12} className="text-zinc-600 opacity-0 group-hover:opacity-100 transition-opacity shrink-0" />
+                )}
+              </button>
+            ))
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// Helper Components
+function StatRow({ 
+  label, 
+  value, 
+  mono = false, 
+  highlight 
+}: { 
+  label: string; 
+  value: string | number; 
+  mono?: boolean;
+  highlight?: 'cyan' | 'amber' | 'emerald';
+}) {
+  const highlightColors = {
+    cyan: 'text-cyan-500',
+    amber: 'text-amber-500',
+    emerald: 'text-emerald-500',
+  };
+
+  return (
+    <div className="p-2 rounded-lg bg-zinc-900/40 border border-zinc-800/60">
+      <p className="text-[9px] text-zinc-500 font-black uppercase tracking-widest mb-1">
+        {label}
+      </p>
+      <p className={`text-sm font-bold ${mono ? 'font-mono' : ''} ${
+        highlight ? highlightColors[highlight] : 'text-zinc-200'
+      }`}>
+        {value}
+      </p>
+    </div>
+  );
+}
+
+// Calculation Logic
+function calculateStats(session: Session): SessionStatsData {
+  let totalTokens = 0;
+  let inputTokens = 0;
+  let outputTokens = 0;
+  let reasoningTokens = 0;
+  let cacheTokensRead = 0;
+  let cacheTokensWrite = 0;
+  let userMessages = 0;
+  let assistantMessages = 0;
+
+  // Aggregate from all messages
+  session.messages.forEach(msg => {
+    const usage = (msg as any).metadata?.usage;
+    if (usage) {
+      totalTokens += usage.totalTokens || 0;
+      inputTokens += usage.promptTokens || 0;
+      outputTokens += usage.completionTokens || 0;
+      reasoningTokens += usage.reasoningTokens || 0;
+      cacheTokensRead += usage.cacheReadTokens || usage.cachedTokens || 0;
+      cacheTokensWrite += usage.cacheWriteTokens || usage.cacheCreationTokens || 0;
+    }
+
+    if (msg.role === 'user') userMessages++;
+    if (msg.role === 'assistant') assistantMessages++;
+  });
+
+  // Get model info from session metadata
+  const metadata = (session as any).metadata || {};
+  const modelId = metadata.modelId || 'unknown';
+  const providerId = metadata.providerId || getProviderFromModelId(modelId);
+  const contextLimit = MODEL_CONTEXT_LIMITS[modelId] || null;
+
+  // Calculate cost
+  const pricing = MODEL_PRICING[modelId];
+  const totalCost = pricing 
+    ? (inputTokens / 1_000_000) * pricing.input + (outputTokens / 1_000_000) * pricing.output
+    : 0;
+
+  // Calculate usage percentage
+  const usagePercent = contextLimit ? (totalTokens / contextLimit) * 100 : null;
+
+  // Context breakdown (simplified estimation based on message counts)
+  // In reality, this would require counting tokens per message role
+  const estimatedUserTokens = userMessages > 0 ? Math.floor(totalTokens * 0.1) : 0;
+  const estimatedToolTokens = totalTokens > 0 ? Math.floor(totalTokens * 0.7) : 0;
+  const estimatedAssistantTokens = totalTokens - estimatedUserTokens - estimatedToolTokens;
+  const estimatedOtherTokens = 0;
+
+  return {
+    totalTokens,
+    inputTokens,
+    outputTokens,
+    reasoningTokens,
+    cacheTokensRead,
+    cacheTokensWrite,
+    userMessages,
+    assistantMessages,
+    modelId,
+    modelName: MODEL_DISPLAY_NAMES[modelId] || modelId,
+    providerId: PROVIDER_NAMES[providerId] || providerId,
+    contextLimit,
+    totalCost,
+    usagePercent,
+    contextBreakdown: {
+      user: totalTokens > 0 ? (estimatedUserTokens / totalTokens) * 100 : 0,
+      assistant: totalTokens > 0 ? (estimatedAssistantTokens / totalTokens) * 100 : 0,
+      toolCalls: totalTokens > 0 ? (estimatedToolTokens / totalTokens) * 100 : 0,
+      other: totalTokens > 0 ? (estimatedOtherTokens / totalTokens) * 100 : 0,
+    },
+  };
+}
+
+// Utility Functions
+function truncateId(id: string): string {
+  return id.length > 24 ? `${id.slice(0, 24)}...` : id;
+}
+
+function formatNumber(num: number | null): string {
+  if (num === null || num === undefined) return 'N/A';
+  return num.toLocaleString();
+}
+
+function formatDate(date: string | Date | undefined): string {
+  if (!date) return 'N/A';
+  const d = new Date(date);
+  return d.toLocaleString('en-US', { 
+    month: 'short', 
+    day: 'numeric', 
+    year: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+    hour12: true 
+  });
+}
+
+function formatTime(timestamp: string | Date): string {
+  const d = new Date(timestamp);
+  return d.toLocaleTimeString('en-US', { 
+    hour: 'numeric', 
+    minute: '2-digit',
+    hour12: true 
+  });
+}
+
+function getProviderFromModelId(modelId: string): string {
+  if (modelId.startsWith('gemini')) return 'google';
+  if (modelId.startsWith('claude')) return 'anthropic';
+  if (modelId.startsWith('gpt') || modelId.startsWith('o1') || modelId.startsWith('o3')) return 'openai';
+  return 'unknown';
+}