@jlongo78/agent-spaces 0.9.7 → 0.9.9

package/.next/standalone/src/components/claude/claude-usage-strip.tsx

@@ -0,0 +1,175 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import { Zap, LogIn } from 'lucide-react';
+import { useClaudeUsage } from '@/hooks/use-claude-usage';
+import type { RateLimit } from '@/types/claude';
+
+interface Props {
+  enabled: boolean;
+}
+
+function utilizationColor(pct: number | null): string {
+  if (pct == null) return '#52525b'; // zinc-600 — unknown
+  if (pct <= 70) return '#22c55e';    // green-500
+  if (pct <= 90) return '#f59e0b';    // amber-500
+  return '#ef4444';                    // red-500
+}
+
+function formatReset(resetsAt: string | null): string {
+  if (!resetsAt) return '';
+  const ms = new Date(resetsAt).getTime() - Date.now();
+  if (ms <= 0) return 'now';
+  const h = Math.floor(ms / 3_600_000);
+  const m = Math.floor((ms % 3_600_000) / 60_000);
+  if (h >= 24) {
+    const d = Math.floor(h / 24);
+    const rh = h - d * 24;
+    return `${d}d ${rh}h`;
+  }
+  if (h > 0) return `${h}h ${m}m`;
+  return `${m}m`;
+}
+
+function Bar({ label, limit }: { label: string; limit: RateLimit | null | undefined }) {
+  if (!limit || limit.utilization == null) return null;
+  const pct = Math.min(100, Math.max(0, limit.utilization));
+  const color = utilizationColor(pct);
+  const reset = formatReset(limit.resets_at);
+  return (
+    <div
+      className="flex items-center gap-1.5 text-[10px]"
+      title={reset ? `${label}: ${Math.floor(pct)}% used · resets in ${reset}` : `${label}: ${Math.floor(pct)}% used`}
+    >
+      <span className="text-zinc-400 font-medium">{label}</span>
+      <div className="w-12 h-1 bg-zinc-800 rounded-full overflow-hidden">
+        <div
+          className="h-full transition-all"
+          style={{ width: `${pct}%`, backgroundColor: color }}
+        />
+      </div>
+      <span className="text-zinc-500 tabular-nums w-7 text-right">{Math.floor(pct)}%</span>
+    </div>
+  );
+}
+
+export function ClaudeUsageStrip({ enabled }: Props) {
+  const response = useClaudeUsage(enabled);
+  const [expanded, setExpanded] = useState(false);
+  const popoverRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!expanded) return;
+    function handleClick(e: MouseEvent) {
+      if (popoverRef.current && !popoverRef.current.contains(e.target as Node)) {
+        setExpanded(false);
+      }
+    }
+    document.addEventListener('mousedown', handleClick);
+    return () => document.removeEventListener('mousedown', handleClick);
+  }, [expanded]);
+
+  if (!enabled || !response) return null;
+
+  if (response.status === 'unauthenticated' || response.status === 'expired') {
+    return (
+      <div
+        className="flex items-center gap-1.5 px-2 py-1 text-[10px] text-zinc-500 border border-zinc-800 rounded-md"
+        title={response.status === 'expired' ? 'OAuth token expired — run any Claude Code command to refresh' : 'No Claude.ai credentials found'}
+      >
+        <LogIn className="w-3 h-3" />
+        sign in via Claude Code
+      </div>
+    );
+  }
+
+  if (response.status === 'upstream_error') {
+    return null; // Silent — per spec.
+  }
+
+  const { data } = response;
+  const extra = data.extra_usage;
+  const hasOverage = !!(extra?.is_enabled && extra?.used_credits && extra.used_credits > 0);
+
+  return (
+    <div className="relative">
+      <button
+        onClick={() => setExpanded(v => !v)}
+        className="flex items-center gap-2.5 px-2.5 py-1 border border-zinc-800 rounded-md hover:border-zinc-700 transition-colors"
+        title="Click for full usage detail"
+      >
+        <Zap className="w-3 h-3 text-amber-400" />
+        <Bar label="5h" limit={data.five_hour} />
+        <Bar label="7d" limit={data.seven_day} />
+        <Bar label="Opus" limit={data.seven_day_opus} />
+        <Bar label="Sonnet" limit={data.seven_day_sonnet} />
+        {hasOverage && extra?.used_credits != null && (
+          <span className="text-[10px] text-amber-400 border-l border-zinc-800 pl-2">
+            +${extra.used_credits.toFixed(2)} overage
+          </span>
+        )}
+      </button>
+
+      {expanded && (
+        <div
+          ref={popoverRef}
+          className="absolute top-full right-0 mt-1.5 z-50 w-80 p-3 bg-zinc-900 border border-zinc-700 rounded-md shadow-xl"
+        >
+          <div className="text-[10px] uppercase tracking-wider text-zinc-500 font-medium mb-2">
+            Plan Usage
+          </div>
+          <div className="space-y-2">
+            <ExpandedRow label="5-hour window" limit={data.five_hour} />
+            <ExpandedRow label="7-day (overall)" limit={data.seven_day} />
+            <ExpandedRow label="7-day · Opus" limit={data.seven_day_opus} />
+            <ExpandedRow label="7-day · Sonnet" limit={data.seven_day_sonnet} />
+            <ExpandedRow label="7-day · OAuth apps" limit={data.seven_day_oauth_apps} />
+          </div>
+          {extra?.is_enabled && (
+            <div className="mt-3 pt-3 border-t border-zinc-800">
+              <div className="text-[10px] uppercase tracking-wider text-zinc-500 font-medium mb-1.5">
+                Overage credits
+              </div>
+              <div className="text-xs text-zinc-300">
+                {extra.used_credits != null ? `$${extra.used_credits.toFixed(2)}` : '—'}
+                {extra.monthly_limit != null && (
+                  <span className="text-zinc-500"> / ${extra.monthly_limit.toFixed(2)} monthly</span>
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function ExpandedRow({ label, limit }: { label: string; limit: RateLimit | null | undefined }) {
+  if (!limit || limit.utilization == null) {
+    return (
+      <div className="flex items-center justify-between text-xs">
+        <span className="text-zinc-400">{label}</span>
+        <span className="text-zinc-600">—</span>
+      </div>
+    );
+  }
+  const pct = Math.min(100, Math.max(0, limit.utilization));
+  const color = utilizationColor(pct);
+  const reset = formatReset(limit.resets_at);
+  return (
+    <div>
+      <div className="flex items-center justify-between text-xs mb-1">
+        <span className="text-zinc-300">{label}</span>
+        <span className="text-zinc-500 tabular-nums">
+          {Math.floor(pct)}%{reset && <span className="ml-1.5 text-zinc-600">· {reset}</span>}
+        </span>
+      </div>
+      <div className="h-1.5 bg-zinc-800 rounded-full overflow-hidden">
+        <div
+          className="h-full transition-all"
+          style={{ width: `${pct}%`, backgroundColor: color }}
+        />
+      </div>
+    </div>
+  );
+}

package/.next/standalone/src/components/cortex/benchmark-tab.tsx

@@ -310,6 +310,7 @@ function RunLauncher({ onRunComplete }: { onRunComplete: () => void }) {
   const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
   const [customModel, setCustomModel] = useState('claude-haiku-4-5');
   const [noJudge, setNoJudge] = useState(false);
+  const [concurrency, setConcurrency] = useState(1);
   const [showCustom, setShowCustom] = useState(false);
 
   const isRunning = status?.running === true;
@@ -333,6 +334,7 @@ function RunLauncher({ onRunComplete }: { onRunComplete: () => void }) {
       categories: selectedCategories.length > 0 ? selectedCategories.join(',') : undefined,
       noJudge,
       model: customModel,
+      concurrency,
     });
   }
 
@@ -470,6 +472,18 @@ function RunLauncher({ onRunComplete }: { onRunComplete: () => void }) {
                   </select>
                 </div>
 
+                <div>
+                  <div className="text-[10px] text-gray-600 uppercase tracking-wider mb-1">Concurrency</div>
+                  <input
+                    type="number"
+                    min={1}
+                    max={5}
+                    value={concurrency}
+                    onChange={e => setConcurrency(Math.min(5, Math.max(1, parseInt(e.target.value) || 1)))}
+                    className="w-16 px-2.5 py-1 text-xs bg-white/5 border border-white/10 rounded-md text-gray-300 focus:outline-none focus:border-purple-500/50"
+                  />
+                </div>
+
                 <div className="flex items-center gap-2 mt-4">
                   <input
                     id="no-judge"

package/.next/standalone/src/components/terminal/terminal-pane.tsx

@@ -225,17 +225,33 @@ export function TerminalPane({ pane, onClose, onUpdate, isMaximized, onToggleMax
       resolve();
     }));
 
-    // Ctrl-C copies selection; Ctrl-V: return false WITHOUT preventDefault so browser
-    // fires its paste event naturally — xterm's paste handler picks it up via onData.
+    // Ctrl-C: when there's a selection, copy it to clipboard then clear selection.
+    // We return false to stop xterm sending ^C (SIGINT), and manually write to clipboard
+    // since xterm's selection isn't in the browser's native Selection API.
+    // Ctrl-V: return false WITHOUT preventDefault so browser fires its native paste event
+    // which xterm's paste handler picks up via onData.
     term.attachCustomKeyEventHandler((ev: KeyboardEvent) => {
       if (ev.type !== 'keydown') return true;
       if (ev.ctrlKey && ev.key === 'c' && term.hasSelection()) {
-        navigator.clipboard?.writeText(term.getSelection());
+        const text = term.getSelection();
+        if (text && navigator.clipboard?.writeText) {
+          navigator.clipboard.writeText(text).catch(() => {
+            // Fallback: create a temporary textarea to copy
+            const ta = document.createElement('textarea');
+            ta.value = text;
+            ta.style.position = 'fixed';
+            ta.style.opacity = '0';
+            document.body.appendChild(ta);
+            ta.select();
+            document.execCommand('copy');
+            document.body.removeChild(ta);
+          });
+        }
         term.clearSelection();
         return false;
       }
       if (ev.ctrlKey && ev.key === 'v') {
-        return false; // stop xterm from sending \x16; browser paste event fires naturally
+        return false;
       }
       return true;
     });
@@ -415,9 +431,22 @@ export function TerminalPane({ pane, onClose, onUpdate, isMaximized, onToggleMax
   };
 
   // ─── Quest toolbar: send keystrokes to terminal ───
+  // Debug helper: always logs to console; writes to xterm only when enabled via
+  // localStorage.setItem('spaces-voice-debug', '1')
+  const debugVoice = (msg: string) => {
+    console.log('[Voice]', msg);
+    try {
+      if (localStorage.getItem('spaces-voice-debug') && xtermRef.current) {
+        xtermRef.current.write(`\r\n\x1b[93m[Voice] ${msg}\x1b[0m\r\n`);
+      }
+    } catch {}
+  };
+
   const sendKey = (key: string) => {
     if (wsRef.current?.readyState === WebSocket.OPEN) {
       wsRef.current.send(JSON.stringify({ type: 'data', data: key }));
+    } else {
+      debugVoice(`sendKey failed: WebSocket state=${wsRef.current?.readyState}`);
     }
   };
 
@@ -427,6 +456,8 @@ export function TerminalPane({ pane, onClose, onUpdate, isMaximized, onToggleMax
     if (wsRef.current?.readyState === WebSocket.OPEN) {
       const bracketed = `\x1b[200~${text}\x1b[201~`;
       wsRef.current.send(JSON.stringify({ type: 'data', data: bracketed }));
+    } else {
+      debugVoice(`sendPaste failed: WebSocket state=${wsRef.current?.readyState}`);
     }
   };
 
@@ -475,6 +506,7 @@ export function TerminalPane({ pane, onClose, onUpdate, isMaximized, onToggleMax
           let text = '';
           if (cfg?.apiKey) {
             // Direct call to Groq/OpenAI — skip server proxy for speed
+            console.log('[Voice] Transcribing via', cfg.backend || 'direct');
             const form = new FormData();
             form.append('file', blob, 'audio.webm');
             form.append('model', cfg.model);
@@ -488,21 +520,29 @@ export function TerminalPane({ pane, onClose, onUpdate, isMaximized, onToggleMax
             if (res.ok) {
               const data = await res.json();
               text = data.text || '';
+            } else {
+              console.error('[Voice] API error:', res.status, await res.text().catch(() => ''));
             }
           } else {
             // Fallback to server proxy
+            console.log('[Voice] Transcribing via server proxy, cfg:', cfg);
             const form = new FormData();
             form.append('audio', blob, 'dictation.webm');
             const res = await fetch('/api/whisper', { method: 'POST', body: form });
             if (res.ok) {
               const data = await res.json();
               text = data.text || '';
+            } else {
+              console.error('[Voice] Server proxy error:', res.status, await res.text().catch(() => ''));
             }
           }
+          console.log('[Voice] Result:', JSON.stringify(text));
           if (text.trim()) {
             setQuestInput(prev => prev ? `${prev} ${text.trim()}` : text.trim());
           }
-        } catch {}
+        } catch (err) {
+          console.error('[Voice] Exception:', err);
+        }
         setQuestMicStatus('off');
       };
 
@@ -556,8 +596,14 @@ export function TerminalPane({ pane, onClose, onUpdate, isMaximized, onToggleMax
     try {
       // Fetch config once, cache for subsequent cycles
       if (!questWhisperCfgRef.current) {
+        debugVoice('Fetching whisper config...');
         const cfgRes = await fetch('/api/whisper/config');
-        if (cfgRes.ok) questWhisperCfgRef.current = await cfgRes.json();
+        if (cfgRes.ok) {
+          questWhisperCfgRef.current = await cfgRes.json();
+          debugVoice(`Config: backend=${questWhisperCfgRef.current?.backend || 'none'} hasKey=${!!questWhisperCfgRef.current?.apiKey}`);
+        } else {
+          debugVoice(`Config fetch failed: ${cfgRes.status} ${await cfgRes.text().catch(() => '')}`);
+        }
       }
       if (!questImmersiveRef.current) return;
 
@@ -588,6 +634,7 @@ export function TerminalPane({ pane, onClose, onUpdate, isMaximized, onToggleMax
 
         // No speech — restart or clean up
         if (!hasSpeech || chunks.length === 0) {
+          debugVoice(`No speech detected (hasSpeech=${hasSpeech} chunks=${chunks.length}) — restarting`);
           questDrainingRef.current = false;
           if (questImmersiveRef.current) setTimeout(startImmersiveCycle, 300);
           else setQuestMicStatus('off');
@@ -595,13 +642,15 @@ export function TerminalPane({ pane, onClose, onUpdate, isMaximized, onToggleMax
         }
 
         const blob = new Blob(chunks, { type: 'audio/webm' });
-        if (blob.size < 500) { setTimeout(startImmersiveCycle, 300); return; }
+        if (blob.size < 500) { debugVoice(`Blob too small (${blob.size}b) — restarting`); setTimeout(startImmersiveCycle, 300); return; }
 
         setQuestMicStatus('transcribing');
         const cfg = questWhisperCfgRef.current;
+        debugVoice(`Transcribing blob=${blob.size}b hasCfg=${!!cfg} hasKey=${!!cfg?.apiKey}`);
         try {
           let text = '';
           if (cfg?.apiKey) {
+            debugVoice(`Calling ${cfg.backend}: ${cfg.apiUrl}`);
             const form = new FormData();
             form.append('file', blob, 'audio.webm');
             form.append('model', cfg.model);
@@ -612,23 +661,39 @@ export function TerminalPane({ pane, onClose, onUpdate, isMaximized, onToggleMax
               headers: { 'Authorization': `Bearer ${cfg.apiKey}` },
               body: form,
             });
-            if (res.ok) text = (await res.json()).text || '';
+            if (res.ok) {
+              text = (await res.json()).text || '';
+              debugVoice(`Transcribed: "${text}"`);
+            } else {
+              const errBody = await res.text().catch(() => '');
+              debugVoice(`API error: ${res.status} ${errBody.slice(0, 200)}`);
+            }
           } else {
+            debugVoice('No API key — using server proxy /api/whisper');
             const form = new FormData();
             form.append('audio', blob, 'dictation.webm');
             const res = await fetch('/api/whisper', { method: 'POST', body: form });
-            if (res.ok) text = (await res.json()).text || '';
+            if (res.ok) {
+              text = (await res.json()).text || '';
+              debugVoice(`Transcribed: "${text}"`);
+            } else {
+              const errBody = await res.text().catch(() => '');
+              debugVoice(`Proxy error: ${res.status} ${errBody.slice(0, 200)}`);
+            }
           }
+          debugVoice(`Result: "${text}" ws=${wsRef.current?.readyState} immersive=${questImmersiveRef.current} draining=${questDrainingRef.current}`);
           if (text.trim() && (questImmersiveRef.current || questDrainingRef.current)) {
             if (immersiveAutoSendRef.current) {
-              // Single write: text + Enter in one message (avoids race between split sends)
+              debugVoice(`Sending: "${text.trim()}" + Enter`);
               sendKey(text.trim() + '\r');
             } else {
-              // No auto-send: put text in the input field so user can review/edit
+              debugVoice(`Putting in input: "${text.trim()}"`);
               setQuestInput((prev) => prev ? prev + ' ' + text.trim() : text.trim());
             }
           }
-        } catch {}
+        } catch (err: any) {
+          debugVoice(`Exception: ${err.message || err}`);
+        }
 
         // Loop: restart listening if still immersive, or clean up if draining
         questDrainingRef.current = false;
@@ -736,6 +801,7 @@ export function TerminalPane({ pane, onClose, onUpdate, isMaximized, onToggleMax
       }
       if (finalText.length > lastFinalLength) {
         const newText = finalText.slice(lastFinalLength);
+        console.log('[Voice] recognized:', JSON.stringify(newText.trim()), 'autoSend:', autoSend, 'ws:', wsRef.current?.readyState);
         if (autoSend && immersiveAutoSendRef.current) {
           // Single write: text + Enter in one message (avoids race between split sends)
           sendKey(newText.trim() + '\r');