@jlongo78/agent-spaces 0.9.6 → 0.9.8

package/.next/standalone/src/components/layout/update-banner.tsx

@@ -1,92 +1,92 @@
-'use client';
-
-import { useState, useEffect } from 'react';
-import { X } from 'lucide-react';
-import { api } from '@/lib/api';
-
-interface UpdateInfo {
-  available: boolean;
-  current?: string;
-  latest?: string;
-  name?: string;
-  npm?: { latest: string; available: boolean };
-  github?: { latest: string; prerelease: boolean; url: string; available: boolean };
-  addons?: Record<string, { installed: boolean; behind: boolean; commitsBehind: number }>;
-}
-
-export function UpdateBanner() {
-  const [info, setInfo] = useState<UpdateInfo | null>(null);
-  const [dismissed, setDismissed] = useState(false);
-
-  useEffect(() => {
-    const check = () => {
-      fetch(api('/api/updates'))
-        .then(r => r.json())
-        .then((d: UpdateInfo) => {
-          // Show if npm update, github update, or any addon behind
-          const hasAddonUpdates = d.addons && Object.values(d.addons).some(a => a.behind);
-          if (d.available || hasAddonUpdates) setInfo(d);
-        })
-        .catch(() => {});
-    };
-    check();
-    const interval = setInterval(check, 4 * 3600_000);
-    return () => clearInterval(interval);
-  }, []);
-
-  if (!info || dismissed) return null;
-
-  const addonUpdates = info.addons
-    ? Object.entries(info.addons).filter(([, a]) => a.behind)
-    : [];
-
-  // Nothing to show
-  if (!info.available && addonUpdates.length === 0) return null;
-
-  return (
-    <div className="flex flex-wrap items-center gap-x-4 gap-y-1 px-4 py-2 bg-indigo-500/10 border-b border-indigo-500/20 text-xs shrink-0">
-      <div className="flex items-center gap-4 flex-wrap">
-        {/* npm update */}
-        {info.npm?.available && (
-          <span className="text-indigo-300">
-            <span className="font-mono">{info.current}</span> → <span className="font-mono font-medium text-indigo-200">{info.npm.latest}</span>
-            <code className="ml-2 text-[10px] text-indigo-400/70 bg-indigo-500/10 px-1.5 py-0.5 rounded">
-              npm i -g {info.name}
-            </code>
-          </span>
-        )}
-
-        {/* GitHub pre-release / newer release */}
-        {info.github?.available && (!info.npm?.available || info.github.latest > (info.npm?.latest || '')) && (
-          <span className="text-cyan-300">
-            {info.github.prerelease ? 'Pre-release' : 'Release'}: <span className="font-mono font-medium">{info.github.latest}</span>
-            {info.github.url && (
-              <a
-                href={info.github.url}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="ml-1.5 text-[10px] text-cyan-400/70 hover:text-cyan-300 underline"
-              >
-                view
-              </a>
-            )}
-          </span>
-        )}
-
-        {/* Addon updates */}
-        {addonUpdates.map(([key, addon]) => (
-          <span key={key} className="text-amber-300">
-            @spaces/{key}: {addon.commitsBehind} commit{addon.commitsBehind !== 1 ? 's' : ''} behind
-            <code className="ml-1.5 text-[10px] text-amber-400/70 bg-amber-500/10 px-1.5 py-0.5 rounded">
-              spaces upgrade {key}
-            </code>
-          </span>
-        ))}
-      </div>
-
-      <button onClick={() => setDismissed(true)} className="text-indigo-500/50 hover:text-indigo-300 ml-auto shrink-0">
-        <X className="w-3 h-3" />
-      </button>
-    </div>
-  );
-}
+'use client';
+
+import { useState, useEffect } from 'react';
+import { X } from 'lucide-react';
+import { api } from '@/lib/api';
+
+interface UpdateInfo {
+  available: boolean;
+  current?: string;
+  latest?: string;
+  name?: string;
+  npm?: { latest: string; available: boolean };
+  github?: { latest: string; prerelease: boolean; url: string; available: boolean };
+  addons?: Record<string, { installed: boolean; behind: boolean; commitsBehind: number }>;
+}
+
+export function UpdateBanner() {
+  const [info, setInfo] = useState<UpdateInfo | null>(null);
+  const [dismissed, setDismissed] = useState(false);
+
+  useEffect(() => {
+    const check = () => {
+      fetch(api('/api/updates'))
+        .then(r => r.json())
+        .then((d: UpdateInfo) => {
+          // Show if npm update, github update, or any addon behind
+          const hasAddonUpdates = d.addons && Object.values(d.addons).some(a => a.behind);
+          if (d.available || hasAddonUpdates) setInfo(d);
+        })
+        .catch(() => {});
+    };
+    check();
+    const interval = setInterval(check, 4 * 3600_000);
+    return () => clearInterval(interval);
+  }, []);
+
+  if (!info || dismissed) return null;
+
+  const addonUpdates = info.addons
+    ? Object.entries(info.addons).filter(([, a]) => a.behind)
+    : [];
+
+  // Nothing to show
+  if (!info.available && addonUpdates.length === 0) return null;
+
+  return (
+    <div className="flex flex-wrap items-center gap-x-4 gap-y-1 px-4 py-2 bg-indigo-500/10 border-b border-indigo-500/20 text-xs shrink-0">
+      <div className="flex items-center gap-4 flex-wrap">
+        {/* npm update */}
+        {info.npm?.available && (
+          <span className="text-indigo-300">
+            <span className="font-mono">{info.current}</span> → <span className="font-mono font-medium text-indigo-200">{info.npm.latest}</span>
+            <code className="ml-2 text-[10px] text-indigo-400/70 bg-indigo-500/10 px-1.5 py-0.5 rounded">
+              npm i -g {info.name}
+            </code>
+          </span>
+        )}
+
+        {/* GitHub pre-release / newer release */}
+        {info.github?.available && (!info.npm?.available || info.github.latest > (info.npm?.latest || '')) && (
+          <span className="text-cyan-300">
+            {info.github.prerelease ? 'Pre-release' : 'Release'}: <span className="font-mono font-medium">{info.github.latest}</span>
+            {info.github.url && (
+              <a
+                href={info.github.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="ml-1.5 text-[10px] text-cyan-400/70 hover:text-cyan-300 underline"
+              >
+                view
+              </a>
+            )}
+          </span>
+        )}
+
+        {/* Addon updates */}
+        {addonUpdates.map(([key, addon]) => (
+          <span key={key} className="text-amber-300">
+            @spaces/{key}: {addon.commitsBehind} commit{addon.commitsBehind !== 1 ? 's' : ''} behind
+            <code className="ml-1.5 text-[10px] text-amber-400/70 bg-amber-500/10 px-1.5 py-0.5 rounded">
+              spaces upgrade {key}
+            </code>
+          </span>
+        ))}
+      </div>
+
+      <button onClick={() => setDismissed(true)} className="text-indigo-500/50 hover:text-indigo-300 ml-auto shrink-0">
+        <X className="w-3 h-3" />
+      </button>
+    </div>
+  );
+}

package/.next/standalone/src/components/mobile/bottom-nav.tsx

@@ -1,46 +1,46 @@
-'use client';
-
-import Link from 'next/link';
-import { usePathname } from 'next/navigation';
-import { Layers, LayoutDashboard, MessageSquare, FolderOpen, Settings } from 'lucide-react';
-import { cn } from '@/lib/utils';
-
-const tabs = [
-  { href: '/m/terminal', label: 'Spaces', icon: Layers },
-  { href: '/m', label: 'Home', icon: LayoutDashboard, exact: true },
-  { href: '/m/sessions', label: 'Sessions', icon: MessageSquare },
-  { href: '/m/projects', label: 'Projects', icon: FolderOpen },
-  { href: '/m/settings', label: 'Settings', icon: Settings },
-];
-
-export function BottomNav() {
-  const pathname = usePathname();
-
-  return (
-    <nav className="fixed bottom-0 left-0 right-0 z-50 bg-zinc-950 border-t border-zinc-800 pb-[env(safe-area-inset-bottom)]">
-      <div className="flex items-center justify-around h-16">
-        {tabs.map(({ href, label, icon: Icon, exact }) => {
-          const isActive = exact
-            ? pathname === href
-            : pathname.startsWith(href);
-
-          return (
-            <Link
-              key={href}
-              href={href}
-              className={cn(
-                'flex flex-col items-center gap-1 px-3 py-2 min-w-0 flex-1',
-                isActive
-                  ? 'text-indigo-400'
-                  : 'text-zinc-500'
-              )}
-            >
-              <Icon className="w-5 h-5" />
-              <span className="text-[10px] font-medium truncate">{label}</span>
-            </Link>
-          );
-        })}
-      </div>
-    </nav>
-  );
-}
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { Layers, LayoutDashboard, MessageSquare, FolderOpen, Settings } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+const tabs = [
+  { href: '/m/terminal', label: 'Spaces', icon: Layers },
+  { href: '/m', label: 'Home', icon: LayoutDashboard, exact: true },
+  { href: '/m/sessions', label: 'Sessions', icon: MessageSquare },
+  { href: '/m/projects', label: 'Projects', icon: FolderOpen },
+  { href: '/m/settings', label: 'Settings', icon: Settings },
+];
+
+export function BottomNav() {
+  const pathname = usePathname();
+
+  return (
+    <nav className="fixed bottom-0 left-0 right-0 z-50 bg-zinc-950 border-t border-zinc-800 pb-[env(safe-area-inset-bottom)]">
+      <div className="flex items-center justify-around h-16">
+        {tabs.map(({ href, label, icon: Icon, exact }) => {
+          const isActive = exact
+            ? pathname === href
+            : pathname.startsWith(href);
+
+          return (
+            <Link
+              key={href}
+              href={href}
+              className={cn(
+                'flex flex-col items-center gap-1 px-3 py-2 min-w-0 flex-1',
+                isActive
+                  ? 'text-indigo-400'
+                  : 'text-zinc-500'
+              )}
+            >
+              <Icon className="w-5 h-5" />
+              <span className="text-[10px] font-medium truncate">{label}</span>
+            </Link>
+          );
+        })}
+      </div>
+    </nav>
+  );
+}

package/.next/standalone/src/components/mobile/immersive-voice-button.tsx

@@ -1,123 +1,123 @@
-'use client';
-
-import { useState, useRef, useCallback, useEffect } from 'react';
-import { AudioLines } from 'lucide-react';
-import { cn } from '@/lib/utils';
-
-interface ImmersiveVoiceButtonProps {
-  onSend: (data: string) => void;
-  size?: 'sm' | 'md';
-}
-
-/**
- * Immersive voice button using Web Speech API.
- * When active: continuous listen → auto-send each phrase with \r → repeat.
- * Works on desktop and mobile browsers that support SpeechRecognition.
- */
-export function ImmersiveVoiceButton({ onSend, size = 'md' }: ImmersiveVoiceButtonProps) {
-  const [active, setActive] = useState(false);
-  const activeRef = useRef(false);
-  const recognitionRef = useRef<any>(null);
-
-  const isSupported = typeof window !== 'undefined' &&
-    !(/Quest|Oculus|Pacific/i.test(navigator.userAgent)) &&
-    ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window);
-
-  const startListening = useCallback(() => {
-    if (!activeRef.current) return;
-    const SpeechRecognition = (window as any).SpeechRecognition || (window as any).webkitSpeechRecognition;
-    if (!SpeechRecognition) return;
-
-    const recognition = new SpeechRecognition();
-    recognition.continuous = true;
-    recognition.interimResults = false; // only final results → auto-send
-    recognition.lang = 'en-US';
-
-    recognition.onresult = (event: any) => {
-      if (!activeRef.current) return;
-      for (let i = event.resultIndex; i < event.results.length; i++) {
-        if (event.results[i].isFinal) {
-          const text = event.results[i][0].transcript.trim();
-          if (text) onSend(text + '\r');
-        }
-      }
-    };
-
-    recognition.onerror = (event: any) => {
-      if (event.error === 'not-allowed' || event.error === 'service-not-allowed') {
-        activeRef.current = false;
-        setActive(false);
-        return;
-      }
-      if (activeRef.current) setTimeout(startListening, 500);
-    };
-
-    recognition.onend = () => {
-      if (activeRef.current && document.visibilityState === 'visible') {
-        setTimeout(startListening, 100);
-      } else if (activeRef.current) {
-        // Tab hidden — wait for visibility change to restart
-        setActive(true); // keep button green
-      } else {
-        setActive(false);
-      }
-    };
-
-    recognitionRef.current = recognition;
-    recognition.start();
-  }, [onSend]);
-
-  // Restart when tab regains focus (mobile browsers kill audio in background)
-  useEffect(() => {
-    const handleVisibility = () => {
-      if (document.visibilityState === 'visible' && activeRef.current) {
-        // Tab came back — restart listening
-        if (!recognitionRef.current) {
-          startListening();
-        }
-      }
-    };
-    document.addEventListener('visibilitychange', handleVisibility);
-    return () => document.removeEventListener('visibilitychange', handleVisibility);
-  }, [startListening]);
-
-  // Cleanup on unmount
-  useEffect(() => {
-    return () => {
-      activeRef.current = false;
-      if (recognitionRef.current) { try { recognitionRef.current.abort(); } catch {} }
-    };
-  }, []);
-
-  const toggle = useCallback(() => {
-    if (activeRef.current) {
-      activeRef.current = false;
-      setActive(false);
-      if (recognitionRef.current) { try { recognitionRef.current.abort(); } catch {} recognitionRef.current = null; }
-    } else {
-      activeRef.current = true;
-      setActive(true);
-      startListening();
-    }
-  }, [startListening]);
-
-  if (!isSupported) return null;
-
-  const iconSize = size === 'sm' ? 'w-3.5 h-3.5' : 'w-4 h-4';
-  const padding = size === 'sm' ? 'p-1' : 'p-2.5';
-
-  return (
-    <button
-      onClick={toggle}
-      className={cn(
-        `${padding} rounded-full flex-shrink-0 transition-all`,
-        active
-          ? 'bg-green-600 text-white shadow-[0_0_12px_rgba(34,197,94,0.5)] animate-pulse'
-          : 'bg-zinc-800 text-zinc-400 hover:text-green-400 hover:bg-zinc-700'
-      )}
-      title={active ? 'Exit immersive voice' : 'Immersive voice (auto-send)'}
-    >
-      <AudioLines className={iconSize} />
-    </button>
-  );
-}
+'use client';
+
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { AudioLines } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface ImmersiveVoiceButtonProps {
+  onSend: (data: string) => void;
+  size?: 'sm' | 'md';
+}
+
+/**
+ * Immersive voice button using Web Speech API.
+ * When active: continuous listen → auto-send each phrase with \r → repeat.
+ * Works on desktop and mobile browsers that support SpeechRecognition.
+ */
+export function ImmersiveVoiceButton({ onSend, size = 'md' }: ImmersiveVoiceButtonProps) {
+  const [active, setActive] = useState(false);
+  const activeRef = useRef(false);
+  const recognitionRef = useRef<any>(null);
+
+  const isSupported = typeof window !== 'undefined' &&
+    !(/Quest|Oculus|Pacific/i.test(navigator.userAgent)) &&
+    ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window);
+
+  const startListening = useCallback(() => {
+    if (!activeRef.current) return;
+    const SpeechRecognition = (window as any).SpeechRecognition || (window as any).webkitSpeechRecognition;
+    if (!SpeechRecognition) return;
+
+    const recognition = new SpeechRecognition();
+    recognition.continuous = true;
+    recognition.interimResults = false; // only final results → auto-send
+    recognition.lang = 'en-US';
+
+    recognition.onresult = (event: any) => {
+      if (!activeRef.current) return;
+      for (let i = event.resultIndex; i < event.results.length; i++) {
+        if (event.results[i].isFinal) {
+          const text = event.results[i][0].transcript.trim();
+          if (text) onSend(text + '\r');
+        }
+      }
+    };
+
+    recognition.onerror = (event: any) => {
+      if (event.error === 'not-allowed' || event.error === 'service-not-allowed') {
+        activeRef.current = false;
+        setActive(false);
+        return;
+      }
+      if (activeRef.current) setTimeout(startListening, 500);
+    };
+
+    recognition.onend = () => {
+      if (activeRef.current && document.visibilityState === 'visible') {
+        setTimeout(startListening, 100);
+      } else if (activeRef.current) {
+        // Tab hidden — wait for visibility change to restart
+        setActive(true); // keep button green
+      } else {
+        setActive(false);
+      }
+    };
+
+    recognitionRef.current = recognition;
+    recognition.start();
+  }, [onSend]);
+
+  // Restart when tab regains focus (mobile browsers kill audio in background)
+  useEffect(() => {
+    const handleVisibility = () => {
+      if (document.visibilityState === 'visible' && activeRef.current) {
+        // Tab came back — restart listening
+        if (!recognitionRef.current) {
+          startListening();
+        }
+      }
+    };
+    document.addEventListener('visibilitychange', handleVisibility);
+    return () => document.removeEventListener('visibilitychange', handleVisibility);
+  }, [startListening]);
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      activeRef.current = false;
+      if (recognitionRef.current) { try { recognitionRef.current.abort(); } catch {} }
+    };
+  }, []);
+
+  const toggle = useCallback(() => {
+    if (activeRef.current) {
+      activeRef.current = false;
+      setActive(false);
+      if (recognitionRef.current) { try { recognitionRef.current.abort(); } catch {} recognitionRef.current = null; }
+    } else {
+      activeRef.current = true;
+      setActive(true);
+      startListening();
+    }
+  }, [startListening]);
+
+  if (!isSupported) return null;
+
+  const iconSize = size === 'sm' ? 'w-3.5 h-3.5' : 'w-4 h-4';
+  const padding = size === 'sm' ? 'p-1' : 'p-2.5';
+
+  return (
+    <button
+      onClick={toggle}
+      className={cn(
+        `${padding} rounded-full flex-shrink-0 transition-all`,
+        active
+          ? 'bg-green-600 text-white shadow-[0_0_12px_rgba(34,197,94,0.5)] animate-pulse'
+          : 'bg-zinc-800 text-zinc-400 hover:text-green-400 hover:bg-zinc-700'
+      )}
+      title={active ? 'Exit immersive voice' : 'Immersive voice (auto-send)'}
+    >
+      <AudioLines className={iconSize} />
+    </button>
+  );
+}