@jlongo78/agent-spaces 0.7.7 → 0.8.0

package/.next/standalone/src/components/layout/providers.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { useState, useEffect, type ReactNode } from 'react';
+import { initTelemetry } from '@/lib/telemetry';
+import { TierProvider } from '@/components/layout/tier-provider';
+import { api } from '@/lib/api';
+
+export function Providers({ children }: { children: ReactNode }) {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            staleTime: 30_000,
+            refetchOnWindowFocus: false,
+          },
+        },
+      })
+  );
+
+  useEffect(() => {
+    fetch(api('/api/config'))
+      .then(r => r.json())
+      .then(data => {
+        initTelemetry(data.installId, data.telemetryOptOut);
+      })
+      .catch(() => { /* telemetry init failed silently */ });
+  }, []);
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <TierProvider>
+        {children}
+      </TierProvider>
+    </QueryClientProvider>
+  );
+}

package/.next/standalone/src/components/layout/sidebar.tsx

@@ -0,0 +1,170 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import Link from 'next/link';
+import { usePathname, useRouter } from 'next/navigation';
+import {
+  LayoutDashboard,
+  MessageSquare,
+  FolderOpen,
+  Layers,
+  BarChart3,
+  Settings,
+  Search,
+  Users,
+  Activity,
+  LogOut,
+  Globe,
+  Brain,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { trackPageView } from '@/lib/telemetry';
+import { api } from '@/lib/api';
+import { useTier } from '@/hooks/use-tier';
+
+const nav = [
+  { href: '/terminal', label: 'Spaces', icon: Layers },
+  { href: '/', label: 'Dashboard', icon: LayoutDashboard },
+  { href: '/sessions', label: 'Sessions', icon: MessageSquare },
+  { href: '/projects', label: 'Projects', icon: FolderOpen },
+  { href: '/analytics', label: 'Analytics', icon: BarChart3 },
+  { href: '/network', label: 'Network', icon: Globe },
+  { href: '/cortex', label: 'Cortex', icon: Brain },
+  { href: '/settings', label: 'Settings', icon: Settings },
+];
+
+const routeNames: Record<string, string> = {
+  '/': 'dashboard',
+  '/terminal': 'terminal',
+  '/sessions': 'sessions',
+  '/projects': 'projects',
+  '/analytics': 'analytics',
+  '/network': 'network',
+  '/cortex': 'cortex',
+  '/settings': 'settings',
+  '/admin/users': 'admin_users',
+  '/admin/analytics': 'admin_analytics',
+};
+
+export function Sidebar() {
+  const pathname = usePathname();
+  const router = useRouter();
+  const { hasAuth, hasAdmin, hasNetwork, hasCortex, basePath } = useTier();
+  const [userRole, setUserRole] = useState<string | null>(null);
+
+  useEffect(() => {
+    const page = routeNames[pathname]
+      || (pathname.startsWith('/sessions/') ? 'session_detail' : pathname.slice(1));
+    trackPageView(page);
+  }, [pathname]);
+
+  useEffect(() => {
+    if (!hasAuth) return;
+    fetch(api('/api/auth/me'))
+      .then(r => r.json())
+      .then(data => setUserRole(data.role))
+      .catch(() => {});
+  }, [hasAuth]);
+
+  const handleLogout = async () => {
+    await fetch(api('/api/auth/logout'), { method: 'POST' });
+    router.push('/login');
+  };
+
+  return (
+    <aside className="w-56 border-r border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-950 flex flex-col h-screen fixed left-0 top-0">
+      <div className="p-4 border-b border-zinc-200 dark:border-zinc-800">
+        <Link href="/">
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img
+            src={`${basePath}/spaces_logo.png`}
+            alt="Spaces"
+            width={180}
+            height={60}
+          />
+        </Link>
+      </div>
+
+      <nav className="flex-1 p-2 space-y-1">
+        {nav.filter(({ href }) => {
+          if (href === '/network') return hasNetwork;
+          if (href === '/cortex') return hasCortex;
+          return true;
+        }).map(({ href, label, icon: Icon }) => {
+          const isActive = href === '/'
+            ? pathname === '/'
+            : pathname.startsWith(href);
+
+          return (
+            <Link
+              key={href}
+              href={href}
+              className={cn(
+                'flex items-center gap-3 px-3 py-2 rounded-md text-sm transition-colors',
+                isActive
+                  ? 'bg-indigo-50 text-indigo-700 dark:bg-indigo-950 dark:text-indigo-300 font-medium'
+                  : 'text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-900'
+              )}
+            >
+              <Icon className="w-4 h-4" />
+              {label}
+            </Link>
+          );
+        })}
+
+        {/* Admin-only: Users + Activity links */}
+        {hasAdmin && userRole === 'admin' && (
+          <>
+            <Link
+              href="/admin/users"
+              className={cn(
+                'flex items-center gap-3 px-3 py-2 rounded-md text-sm transition-colors',
+                pathname.startsWith('/admin/users')
+                  ? 'bg-indigo-50 text-indigo-700 dark:bg-indigo-950 dark:text-indigo-300 font-medium'
+                  : 'text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-900'
+              )}
+            >
+              <Users className="w-4 h-4" />
+              Users
+            </Link>
+            <Link
+              href="/admin/analytics"
+              className={cn(
+                'flex items-center gap-3 px-3 py-2 rounded-md text-sm transition-colors',
+                pathname.startsWith('/admin/analytics')
+                  ? 'bg-indigo-50 text-indigo-700 dark:bg-indigo-950 dark:text-indigo-300 font-medium'
+                  : 'text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-900'
+              )}
+            >
+              <Activity className="w-4 h-4" />
+              Activity
+            </Link>
+          </>
+        )}
+      </nav>
+
+      <div className="p-3 border-t border-zinc-200 dark:border-zinc-800 space-y-1">
+        <Link
+          href="/sessions?search=true"
+          className="flex items-center gap-2 px-3 py-2 text-sm text-zinc-500 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-900 rounded-md"
+        >
+          <Search className="w-4 h-4" />
+          <span>Search</span>
+          <kbd className="ml-auto text-[10px] bg-zinc-200 dark:bg-zinc-800 px-1.5 py-0.5 rounded">
+            Ctrl+K
+          </kbd>
+        </Link>
+
+        {hasAuth && (
+          <button
+            onClick={handleLogout}
+            className="flex items-center gap-2 px-3 py-2 text-sm text-zinc-500 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-900 rounded-md w-full"
+          >
+            <LogOut className="w-4 h-4" />
+            <span>Sign out</span>
+          </button>
+        )}
+      </div>
+    </aside>
+  );
+}

package/.next/standalone/src/components/layout/tier-provider.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import { useState, useEffect, type ReactNode } from 'react';
+import { TierContext, type TierFlags } from '@/hooks/use-tier';
+import { api } from '@/lib/api';
+
+export function TierProvider({ children }: { children: ReactNode }) {
+  const [flags, setFlags] = useState<TierFlags>({
+    tier: 'community',
+    version: '',
+    hasAuth: false,
+    hasAdmin: false,
+    hasCollaboration: false,
+    hasNetwork: false,
+    hasMultiuser: false,
+    hasCortex: false,
+    cortexTierEnabled: false,
+    isDesktop: true,
+    basePath: '',
+    loading: false,
+  });
+
+  useEffect(() => {
+    fetch(api('/api/tier'))
+      .then(r => r.json())
+      .then(data => {
+        setFlags({
+          tier: data.tier,
+          version: data.version || '',
+          hasAuth: data.hasAuth,
+          hasAdmin: data.hasAdmin,
+          hasCollaboration: data.hasCollaboration ?? false,
+          hasNetwork: data.hasNetwork,
+          hasMultiuser: data.hasMultiuser,
+          hasCortex: data.hasCortex,
+          cortexTierEnabled: data.cortexTierEnabled ?? data.hasCortex,
+          isDesktop: data.isDesktop,
+          basePath: data.basePath || '',
+          loading: false,
+        });
+      })
+      .catch(() => {
+        // On error, assume community (safe default)
+        setFlags(prev => ({ ...prev, loading: false }));
+      });
+  }, []);
+
+  return (
+    <TierContext.Provider value={flags}>
+      {children}
+    </TierContext.Provider>
+  );
+}

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

@@ -0,0 +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>
+  );
+}

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

@@ -0,0 +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>
+  );
+}

package/.next/standalone/src/components/mobile/mobile-chat-input.tsx

@@ -0,0 +1,244 @@
+'use client';
+
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { Send, Square, Loader2 } from 'lucide-react';
+import { VoiceInput } from './voice-input';
+import { cn } from '@/lib/utils';
+import { api } from '@/lib/api';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+
+interface MobileChatInputProps {
+  sessionId: string;
+  projectPath?: string;
+  onMessageSent?: () => void;
+}
+
+interface StreamChunk {
+  type: string;
+  text?: string;
+  content?: any;
+  message?: any;
+  result?: any;
+}
+
+export function MobileChatInput({ sessionId, projectPath, onMessageSent }: MobileChatInputProps) {
+  const [message, setMessage] = useState('');
+  const [sending, setSending] = useState(false);
+  const [responseText, setResponseText] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const responseRef = useRef<HTMLDivElement>(null);
+  const abortRef = useRef<AbortController | null>(null);
+
+  // Auto-resize textarea
+  useEffect(() => {
+    if (textareaRef.current) {
+      textareaRef.current.style.height = 'auto';
+      textareaRef.current.style.height = `${Math.min(textareaRef.current.scrollHeight, 120)}px`;
+    }
+  }, [message]);
+
+  // Auto-scroll response
+  useEffect(() => {
+    if (responseRef.current) {
+      responseRef.current.scrollTop = responseRef.current.scrollHeight;
+    }
+  }, [responseText]);
+
+  const sendMessage = useCallback(async () => {
+    if (!message.trim() || sending) return;
+
+    setSending(true);
+    setResponseText('');
+    setError(null);
+
+    const controller = new AbortController();
+    abortRef.current = controller;
+
+    try {
+      const res = await fetch(api(`/api/sessions/${sessionId}/chat`), {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ message: message.trim(), cwd: projectPath }),
+        signal: controller.signal,
+      });
+
+      if (!res.ok) {
+        const err = await res.json();
+        setError(err.error || 'Failed to send message');
+        setSending(false);
+        return;
+      }
+
+      const reader = res.body?.getReader();
+      if (!reader) {
+        setError('No response stream');
+        setSending(false);
+        return;
+      }
+
+      const decoder = new TextDecoder();
+      let buffer = '';
+      let fullText = '';
+
+      setMessage('');
+
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+
+        buffer += decoder.decode(value, { stream: true });
+        const lines = buffer.split('\n\n');
+        buffer = lines.pop() || '';
+
+        for (const line of lines) {
+          if (!line.startsWith('data: ')) continue;
+          const data = line.slice(6);
+          try {
+            const chunk: StreamChunk = JSON.parse(data);
+
+            if (chunk.type === 'done') {
+              onMessageSent?.();
+            } else if (chunk.type === 'error') {
+              setError(prev => (prev || '') + (chunk.text || ''));
+            } else if (chunk.type === 'stderr') {
+              const text = chunk.text || '';
+              if (text.includes('Error') || text.includes('error')) {
+                setError(prev => (prev || '') + text);
+              }
+            } else if (chunk.type === 'assistant') {
+              const content = chunk.message?.content || chunk.content;
+              if (Array.isArray(content)) {
+                for (const block of content) {
+                  if (block.type === 'text' && block.text) {
+                    fullText += block.text;
+                    setResponseText(fullText);
+                  }
+                }
+              }
+            } else if (chunk.type === 'content_block_delta') {
+              if (chunk.content?.type === 'text_delta' || chunk.text) {
+                fullText += chunk.content?.text || chunk.text || '';
+                setResponseText(fullText);
+              }
+            } else if (chunk.type === 'text') {
+              fullText += chunk.text || '';
+              setResponseText(fullText);
+            } else if (chunk.type === 'result') {
+              if (!fullText) {
+                const result = (chunk as any).result;
+                if (typeof result === 'string') {
+                  fullText = result;
+                  setResponseText(fullText);
+                }
+              }
+              onMessageSent?.();
+            }
+          } catch {
+            // ignore parse errors
+          }
+        }
+      }
+    } catch (err: any) {
+      if (err.name !== 'AbortError') {
+        setError(err.message || 'Connection failed');
+      }
+    } finally {
+      setSending(false);
+      abortRef.current = null;
+    }
+  }, [message, sending, sessionId, projectPath, onMessageSent]);
+
+  const stopGeneration = () => {
+    abortRef.current?.abort();
+    setSending(false);
+  };
+
+  const handleVoiceTranscript = (text: string) => {
+    setMessage(prev => prev ? `${prev} ${text}` : text);
+    textareaRef.current?.focus();
+  };
+
+  return (
+    <div className="flex-shrink-0 border-t border-zinc-800 bg-zinc-950 pb-[env(safe-area-inset-bottom)]">
+      {/* Streaming response */}
+      {(responseText || error || sending) && (
+        <div className="border-b border-zinc-800">
+          <div
+            ref={responseRef}
+            className="max-h-40 overflow-y-auto px-4 py-3 text-sm"
+          >
+            {error && (
+              <div className="text-red-400 text-xs mb-2 bg-red-950/20 rounded px-3 py-2">
+                {error}
+              </div>
+            )}
+            {responseText && (
+              <div className="prose prose-sm prose-invert max-w-none prose-pre:bg-zinc-800 prose-pre:text-xs">
+                <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                  {responseText}
+                </ReactMarkdown>
+              </div>
+            )}
+            {sending && !responseText && !error && (
+              <div className="flex items-center gap-2 text-zinc-500 text-xs">
+                <Loader2 className="w-3 h-3 animate-spin" />
+                Waiting for Claude...
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Input bar */}
+      <div className="flex items-end gap-2 px-3 py-2">
+        <VoiceInput onTranscript={handleVoiceTranscript} />
+
+        <textarea
+          ref={textareaRef}
+          value={message}
+          onChange={(e) => setMessage(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+              e.preventDefault();
+              sendMessage();
+            }
+          }}
+          placeholder={sending ? 'Claude is thinking...' : 'Message...'}
+          disabled={sending}
+          rows={1}
+          className={cn(
+            'flex-1 resize-none rounded-xl border px-3 py-2 text-sm bg-zinc-900',
+            'focus:outline-none focus:ring-1 focus:ring-indigo-500',
+            'placeholder:text-zinc-600 border-zinc-700',
+            'max-h-[120px]',
+            sending && 'opacity-50'
+          )}
+        />
+
+        {sending ? (
+          <button
+            onClick={stopGeneration}
+            className="p-2.5 rounded-xl bg-red-500 text-white flex-shrink-0"
+          >
+            <Square className="w-4 h-4" />
+          </button>
+        ) : (
+          <button
+            onClick={sendMessage}
+            disabled={!message.trim()}
+            className={cn(
+              'p-2.5 rounded-xl flex-shrink-0',
+              message.trim()
+                ? 'bg-indigo-500 text-white'
+                : 'bg-zinc-800 text-zinc-600'
+            )}
+          >
+            <Send className="w-4 h-4" />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}

package/.next/standalone/src/components/mobile/mobile-header.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { ArrowLeft } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface MobileHeaderProps {
+  title: string;
+  showBack?: boolean;
+  backHref?: string;
+  right?: React.ReactNode;
+  className?: string;
+}
+
+export function MobileHeader({ title, showBack, backHref, right, className }: MobileHeaderProps) {
+  const router = useRouter();
+
+  const handleBack = () => {
+    if (backHref) {
+      router.push(backHref);
+    } else {
+      router.back();
+    }
+  };
+
+  return (
+    <header className={cn(
+      'sticky top-0 z-40 bg-zinc-950/95 backdrop-blur-sm border-b border-zinc-800',
+      'flex items-center gap-3 px-4 h-14 flex-shrink-0',
+      className
+    )}>
+      {showBack && (
+        <button
+          onClick={handleBack}
+          className="p-1 -ml-1 text-zinc-400 hover:text-white"
+        >
+          <ArrowLeft className="w-5 h-5" />
+        </button>
+      )}
+      <h1 className="text-base font-semibold truncate flex-1">{title}</h1>
+      {right && <div className="flex items-center gap-2 flex-shrink-0">{right}</div>}
+    </header>
+  );
+}