@jlongo78/agent-spaces 0.7.7 → 0.8.0

package/.next/standalone/src/app/m/terminal/page.tsx

@@ -0,0 +1,413 @@
+'use client';
+
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { Plus, Loader2, ChevronDown, Trash2, Home, Layers } from 'lucide-react';
+import { MobileTerminalPane } from '@/components/mobile/mobile-terminal-pane';
+import { TotpGate } from '@/components/auth/totp-gate';
+import { AGENT_TYPES, AGENT_LIST } from '@/lib/agents';
+import type { IdleState } from '@/hooks/use-idle-detection';
+import type { PaneData } from '@/lib/db/queries';
+import type { Workspace } from '@/types/claude';
+import { api } from '@/lib/api';
+import { cn } from '@/lib/utils';
+import { useTier } from '@/hooks/use-tier';
+
+export default function MobileTerminalPage() {
+  return (
+    <TotpGate>
+      {(terminalToken) => <MobileTerminalInner terminalToken={terminalToken} />}
+    </TotpGate>
+  );
+}
+
+function MobileTerminalInner({ terminalToken }: { terminalToken: string }) {
+  const { basePath } = useTier();
+  const [panes, setPanes] = useState<PaneData[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [wsLoading, setWsLoading] = useState(true);
+  const [workspaces, setWorkspaces] = useState<Workspace[]>([]);
+  const [activeWorkspace, setActiveWorkspace] = useState<Workspace | null>(null);
+  const [entered, setEntered] = useState(false);
+  const [activePaneId, setActivePaneId] = useState<string | null>(null);
+  const [showAddMenu, setShowAddMenu] = useState(false);
+  const [showWsPicker, setShowWsPicker] = useState(false);
+
+  // Action queue state
+  const [paneIdleStates, setPaneIdleStates] = useState<Record<string, IdleState>>({});
+  const [autoSwitchEnabled, setAutoSwitchEnabled] = useState(true);
+  const autoSwitchTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const manualOverrideRef = useRef(false);
+
+  const loadWorkspaces = useCallback(async () => {
+    const res = await fetch(api('/api/workspaces'));
+    const data = await res.json();
+    setWorkspaces(data);
+    const active = data.find((w: Workspace) => w.isActive);
+    setActiveWorkspace(active || null);
+    setWsLoading(false);
+    return active || null;
+  }, []);
+
+  const loadPanes = useCallback(async () => {
+    const res = await fetch(api('/api/panes'));
+    const data = await res.json();
+    setPanes(data);
+    if (data.length > 0 && !activePaneId) {
+      setActivePaneId(data[0].id);
+    }
+    setLoading(false);
+  }, [activePaneId]);
+
+  useEffect(() => {
+    loadWorkspaces().then(active => {
+      if (active) setEntered(true);
+    });
+  }, [loadWorkspaces]);
+
+  useEffect(() => {
+    if (entered) loadPanes();
+  }, [entered, loadPanes]);
+
+  const switchWorkspace = useCallback(async (wsId: number) => {
+    await fetch(api('/api/workspaces'), {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ action: 'switch', workspaceId: wsId }),
+    });
+    await loadWorkspaces();
+    setActivePaneId(null);
+    setLoading(true);
+    setPaneIdleStates({});
+    const res = await fetch(api('/api/panes'));
+    const data = await res.json();
+    setPanes(data);
+    if (data.length > 0) setActivePaneId(data[0].id);
+    setLoading(false);
+    setEntered(true);
+    setShowWsPicker(false);
+  }, [loadWorkspaces]);
+
+  const createNewWorkspace = useCallback(async () => {
+    const res = await fetch(api('/api/workspaces'), {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ name: 'New Space', color: '#6366f1' }),
+    });
+    const ws = await res.json();
+    await switchWorkspace(ws.id);
+  }, [switchWorkspace]);
+
+  // Fetch dev directories for default CWD
+  const [defaultCwd, setDefaultCwd] = useState('/');
+  useEffect(() => {
+    fetch(api('/api/config'))
+      .then(r => r.json())
+      .then(cfg => {
+        const dirs: string[] = cfg.devDirectories || [];
+        if (dirs.length > 0) setDefaultCwd(dirs[0]);
+      })
+      .catch(() => {});
+  }, []);
+
+  const addPane = useCallback(async (agentType: string) => {
+    const agent = AGENT_TYPES[agentType];
+    const title = agentType === 'shell' ? 'Terminal' : agent?.name || 'Agent';
+    const cwd = defaultCwd;
+
+    const res = await fetch(api('/api/panes'), {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        title, color: agent?.color || '#6366f1', cwd,
+        claudeSessionId: agentType !== 'shell' ? 'new' : undefined,
+        agentType,
+      }),
+    });
+    const pane = await res.json();
+    setPanes(prev => [...prev, pane]);
+    setActivePaneId(pane.id);
+    setShowAddMenu(false);
+  }, [defaultCwd]);
+
+  const closePane = useCallback(async (id: string) => {
+    await fetch(api(`/api/panes/${id}`), { method: 'DELETE' });
+    setPaneIdleStates(prev => {
+      const next = { ...prev };
+      delete next[id];
+      return next;
+    });
+    setPanes(prev => {
+      const next = prev.filter(p => p.id !== id);
+      if (activePaneId === id) {
+        setActivePaneId(next.length > 0 ? next[0].id : null);
+      }
+      return next;
+    });
+  }, [activePaneId]);
+
+  // Idle state change handler
+  const handleIdleChange = useCallback((paneId: string, state: IdleState) => {
+    setPaneIdleStates(prev => ({ ...prev, [paneId]: state }));
+  }, []);
+
+  // Auto-switch: when user types in active pane, after 800ms switch to next idle pane
+  const handleUserInput = useCallback((paneId: string) => {
+    if (!autoSwitchEnabled) return;
+    if (manualOverrideRef.current) {
+      manualOverrideRef.current = false;
+      return;
+    }
+
+    // Clear any existing timer
+    if (autoSwitchTimerRef.current) {
+      clearTimeout(autoSwitchTimerRef.current);
+    }
+
+    autoSwitchTimerRef.current = setTimeout(() => {
+      setPaneIdleStates(currentStates => {
+        setPanes(currentPanes => {
+          // Find first non-active idle pane
+          const nextIdle = currentPanes.find(
+            p => p.id !== paneId && currentStates[p.id] === 'idle'
+          );
+          if (nextIdle) {
+            setActivePaneId(nextIdle.id);
+          }
+          return currentPanes; // don't mutate
+        });
+        return currentStates; // don't mutate
+      });
+    }, 800);
+  }, [autoSwitchEnabled]);
+
+  // Manual tab tap clears auto-switch timer
+  const handleTabTap = useCallback((paneId: string) => {
+    if (autoSwitchTimerRef.current) {
+      clearTimeout(autoSwitchTimerRef.current);
+      autoSwitchTimerRef.current = null;
+    }
+    manualOverrideRef.current = true;
+    setActivePaneId(paneId);
+  }, []);
+
+  // Cleanup timer on unmount
+  useEffect(() => {
+    return () => {
+      if (autoSwitchTimerRef.current) clearTimeout(autoSwitchTimerRef.current);
+    };
+  }, []);
+
+  // Count idle non-active panes
+  const idleCount = panes.filter(
+    p => p.id !== activePaneId && paneIdleStates[p.id] === 'idle'
+  ).length;
+
+  // ─── Workspace chooser ─────────────────────────────────
+  if (!entered) {
+    return (
+      <div className="flex flex-col items-center justify-center h-[80dvh] px-6">
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img src={`${basePath}/spaces_icon.png`} alt="Spaces" className="w-14 h-14 mb-4 opacity-60" />
+        <h1 className="text-lg font-bold mb-1">Spaces</h1>
+        <p className="text-zinc-500 text-sm mb-6">Choose a workspace</p>
+
+        {wsLoading ? (
+          <Loader2 className="w-5 h-5 animate-spin text-indigo-500" />
+        ) : (
+          <div className="w-full max-w-sm space-y-2">
+            {workspaces.map(ws => (
+              <button
+                key={ws.id}
+                onClick={() => switchWorkspace(ws.id)}
+                className="flex items-center gap-3 w-full p-3.5 bg-zinc-900 border border-zinc-800 rounded-lg active:bg-zinc-800"
+              >
+                <span className="w-3 h-3 rounded-full flex-shrink-0" style={{ backgroundColor: ws.color }} />
+                <span className="text-sm font-medium flex-1 text-left truncate">{ws.name}</span>
+                <span className="text-[11px] text-zinc-500">{ws.paneCount || 0} panes</span>
+              </button>
+            ))}
+            <button
+              onClick={createNewWorkspace}
+              className="flex items-center justify-center gap-2 w-full p-3 text-sm text-zinc-400 border border-zinc-800 border-dashed rounded-lg"
+            >
+              <Plus className="w-4 h-4" />
+              New Workspace
+            </button>
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-[80dvh]">
+        <Loader2 className="w-5 h-5 animate-spin text-indigo-500" />
+      </div>
+    );
+  }
+
+  const activePane = panes.find(p => p.id === activePaneId);
+
+  return (
+    <div className="flex flex-col h-[calc(100dvh-64px)]">
+      {/* Workspace + pane selector header */}
+      <div className="flex items-center gap-2 px-3 py-2 border-b border-zinc-800 flex-shrink-0 bg-zinc-950">
+        {/* Home button */}
+        <button
+          onClick={() => setEntered(false)}
+          className="p-1.5 text-zinc-500 hover:text-white"
+        >
+          <Home className="w-4 h-4" />
+        </button>
+
+        {/* Workspace selector */}
+        <div className="relative">
+          <button
+            onClick={() => setShowWsPicker(!showWsPicker)}
+            className="flex items-center gap-1.5 px-2 py-1 text-xs bg-zinc-900 border border-zinc-800 rounded-md"
+          >
+            {activeWorkspace && (
+              <span className="w-2 h-2 rounded-full" style={{ backgroundColor: activeWorkspace.color }} />
+            )}
+            <span className="max-w-[80px] truncate">{activeWorkspace?.name || 'Space'}</span>
+            <ChevronDown className="w-3 h-3 text-zinc-500" />
+          </button>
+
+          {showWsPicker && (
+            <div className="absolute z-50 top-full left-0 mt-1 w-56 bg-zinc-800 border border-zinc-700 rounded-lg shadow-xl overflow-hidden">
+              {workspaces.map(ws => (
+                <button
+                  key={ws.id}
+                  onClick={() => switchWorkspace(ws.id)}
+                  className="flex items-center gap-2 w-full px-3 py-2.5 text-xs text-left hover:bg-zinc-700"
+                >
+                  <span className="w-2 h-2 rounded-full" style={{ backgroundColor: ws.color }} />
+                  <span className="truncate flex-1">{ws.name}</span>
+                  <span className="text-zinc-500">{ws.paneCount || 0}</span>
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Pane tabs */}
+        <div className="flex-1 flex items-center gap-1 overflow-x-auto">
+          {panes.map(pane => {
+            const isActive = activePaneId === pane.id;
+            const isIdle = !isActive && paneIdleStates[pane.id] === 'idle';
+            return (
+              <button
+                key={pane.id}
+                onClick={() => handleTabTap(pane.id)}
+                className={cn(
+                  'flex items-center gap-1.5 px-2.5 py-1 text-xs rounded-full flex-shrink-0 border transition-shadow',
+                  isActive
+                    ? 'bg-zinc-800 border-zinc-600 text-white'
+                    : isIdle
+                    ? 'border-transparent text-zinc-300 animate-idle-pulse'
+                    : 'border-transparent text-zinc-500'
+                )}
+                style={isIdle ? { '--pulse-color': pane.color } as React.CSSProperties : undefined}
+              >
+                <span
+                  className={cn(
+                    'w-1.5 h-1.5 rounded-full',
+                    isIdle && 'animate-ping-slow'
+                  )}
+                  style={{ backgroundColor: pane.color }}
+                />
+                <span className="max-w-[60px] truncate">{pane.title}</span>
+              </button>
+            );
+          })}
+
+          {/* Idle pane count badge */}
+          {idleCount > 0 && (
+            <span className="flex-shrink-0 ml-1 px-1.5 py-0.5 text-[10px] font-bold rounded-full bg-amber-500/20 text-amber-400 border border-amber-500/30">
+              {idleCount}
+            </span>
+          )}
+        </div>
+
+        {/* Actions */}
+        <div className="flex items-center gap-1 flex-shrink-0">
+          {/* Auto-switch toggle */}
+          <button
+            onClick={() => setAutoSwitchEnabled(!autoSwitchEnabled)}
+            className={cn(
+              'p-1.5 rounded-md transition-colors',
+              autoSwitchEnabled
+                ? 'text-amber-400 bg-amber-500/10'
+                : 'text-zinc-600'
+            )}
+            title={autoSwitchEnabled ? 'Auto-switch: on' : 'Auto-switch: off'}
+          >
+            <Layers className="w-3.5 h-3.5" />
+          </button>
+
+          {activePane && (
+            <button
+              onClick={() => closePane(activePane.id)}
+              className="p-1.5 text-zinc-500 hover:text-red-400"
+              title="Close pane"
+            >
+              <Trash2 className="w-3.5 h-3.5" />
+            </button>
+          )}
+          <div className="relative">
+            <button
+              onClick={() => setShowAddMenu(!showAddMenu)}
+              className="p-1.5 bg-indigo-600 text-white rounded-md"
+            >
+              <Plus className="w-3.5 h-3.5" />
+            </button>
+            {showAddMenu && (
+              <div className="absolute z-50 top-full right-0 mt-1 w-48 bg-zinc-800 border border-zinc-700 rounded-lg shadow-xl overflow-hidden">
+                {AGENT_LIST.map(agent => (
+                  <button
+                    key={agent.id}
+                    onClick={() => addPane(agent.id)}
+                    className="flex items-center gap-2 w-full px-3 py-2.5 text-xs text-left hover:bg-zinc-700"
+                  >
+                    <span className="w-2 h-2 rounded-full" style={{ backgroundColor: agent.color }} />
+                    <span>{agent.name}</span>
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Terminal content — all panes mounted, visibility controlled via CSS */}
+      {panes.length > 0 ? (
+        <div className="flex-1 relative min-h-0">
+          {panes.map(pane => (
+            <MobileTerminalPane
+              key={pane.id}
+              pane={pane}
+              isVisible={pane.id === activePaneId}
+              onIdleChange={handleIdleChange}
+              onUserInput={handleUserInput}
+              terminalToken={terminalToken}
+            />
+          ))}
+        </div>
+      ) : (
+        <div className="flex-1 flex flex-col items-center justify-center gap-3">
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img src={`${basePath}/spaces_icon.png`} alt="" className="w-12 h-12 opacity-20" />
+          <p className="text-zinc-500 text-sm">No panes.</p>
+          <button
+            onClick={() => addPane('shell')}
+            className="px-4 py-2 text-sm bg-indigo-600 text-white rounded-lg flex items-center gap-2"
+          >
+            <Plus className="w-4 h-4" />
+            Add Terminal
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

package/.next/standalone/src/app/vr/page.tsx

@@ -0,0 +1,21 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+import { TotpGate } from '@/components/auth/totp-gate';
+
+const VRApp = dynamic(() => import('./vr-app').then(m => ({ default: m.VRApp })), {
+  ssr: false,
+  loading: () => (
+    <div className="h-screen w-screen bg-zinc-950 flex items-center justify-center text-zinc-400">
+      Loading VR...
+    </div>
+  ),
+});
+
+export default function VRPage() {
+  return (
+    <TotpGate>
+      {(terminalToken: string) => <VRApp terminalToken={terminalToken} />}
+    </TotpGate>
+  );
+}

package/.next/standalone/src/app/vr/vr-app.tsx

@@ -0,0 +1,163 @@
+'use client';
+
+import { useState, useRef, createContext, useContext } from 'react';
+import { Canvas, useFrame, useThree } from '@react-three/fiber';
+import { XR, createXRStore } from '@react-three/xr';
+import { Text, Stars } from '@react-three/drei';
+import { VRLobby } from './vr-lobby';
+import { VRRoom } from './vr-room';
+import { VRControls } from './vr-controls';
+import { VRGaze } from './vr-gaze';
+import * as THREE from 'three';
+
+export interface WorkspaceData {
+  id: number;
+  name: string;
+  color: string;
+  paneCount: number;
+}
+
+interface VRContextType {
+  scene: 'lobby' | 'room';
+  workspace: WorkspaceData | null;
+  terminalToken: string;
+  enterWorkspace: (ws: WorkspaceData) => void;
+  returnToLobby: () => void;
+  playerYRef: React.MutableRefObject<number>;
+}
+
+export const VRContext = createContext<VRContextType>(null!);
+export const useVR = () => useContext(VRContext);
+
+const xrStore = createXRStore();
+
+interface VRAppProps {
+  terminalToken: string;
+}
+
+export function VRApp({ terminalToken }: VRAppProps) {
+  const [scene, setScene] = useState<'lobby' | 'room'>('lobby');
+  const [workspace, setWorkspace] = useState<WorkspaceData | null>(null);
+  const [entered, setEntered] = useState(false);
+  const playerYRef = useRef(0);
+
+  const enterWorkspace = (ws: WorkspaceData) => {
+    setWorkspace(ws);
+    setScene('room');
+    playerYRef.current = 0;
+  };
+
+  const returnToLobby = () => {
+    setScene('lobby');
+    setWorkspace(null);
+    playerYRef.current = 0;
+  };
+
+  const ctx: VRContextType = {
+    scene, workspace, terminalToken,
+    enterWorkspace, returnToLobby, playerYRef,
+  };
+
+  return (
+    <VRContext.Provider value={ctx}>
+      <div style={{ width: '100vw', height: '100vh', background: '#07070f', position: 'relative' }}>
+
+        {/* Landing overlay — shown before entering */}
+        {!entered && <LandingOverlay onEnter={() => setEntered(true)} onEnterVR={() => { setEntered(true); xrStore.enterVR(); }} />}
+
+        <Canvas
+          camera={{ position: [0, 1.6, 0], fov: 75 }}
+          gl={{ antialias: true, alpha: false }}
+          style={{ background: '#07070f' }}
+        >
+          <Stars radius={100} depth={50} count={300} factor={2} saturation={0} speed={0.3} />
+
+          <XR store={xrStore}>
+            <PlayerRig>
+              {scene === 'lobby' && <VRLobby />}
+              {scene === 'room' && workspace && <VRRoom />}
+            </PlayerRig>
+            <VRControls />
+            <VRGaze />
+          </XR>
+
+        </Canvas>
+      </div>
+    </VRContext.Provider>
+  );
+}
+
+/** Polished landing page overlay */
+function LandingOverlay({ onEnter, onEnterVR }: { onEnter: () => void; onEnterVR: () => void }) {
+  return (
+    <div style={{
+      position: 'absolute', inset: 0, zIndex: 20,
+      display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
+      background: 'radial-gradient(ellipse at center, rgba(99,102,241,0.06) 0%, transparent 70%)',
+      fontFamily: "'Geist Sans', system-ui, sans-serif",
+    }}>
+      {/* Logo */}
+      <img
+        src="/spaces_logo.png"
+        alt="Spaces"
+        style={{ width: 240, marginBottom: 8, opacity: 0.9 }}
+      />
+
+      {/* Tagline */}
+      <p style={{
+        color: '#a1a1aa', fontSize: 16, letterSpacing: '0.15em',
+        textTransform: 'uppercase', marginBottom: 48, fontWeight: 300,
+      }}>
+        Immersive Development
+      </p>
+
+      {/* Buttons */}
+      <div className="flex gap-3 mb-12">
+        <button
+          onClick={onEnterVR}
+          className="px-6 py-2.5 text-sm font-medium tracking-wide text-white border border-indigo-500/50 rounded-md bg-indigo-500/15 hover:bg-indigo-500/25 hover:border-indigo-400/70 transition-all duration-200 shadow-[0_0_20px_rgba(99,102,241,0.15)] hover:shadow-[0_0_30px_rgba(99,102,241,0.25)]"
+        >
+          Enter VR
+        </button>
+        <button
+          onClick={onEnter}
+          className="px-6 py-2.5 text-sm font-medium tracking-wide text-zinc-500 border border-zinc-800 rounded-md hover:text-zinc-300 hover:border-zinc-600 transition-all duration-200"
+        >
+          Desktop 3D View
+        </button>
+      </div>
+
+      {/* Controls hint */}
+      <div style={{
+        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '8px 32px',
+        color: '#52525b', fontSize: 12, lineHeight: 1.8,
+      }}>
+        <span><span style={{ color: '#818cf8' }}>L Stick</span> Move</span>
+        <span><span style={{ color: '#818cf8' }}>R Stick X</span> Turn</span>
+        <span><span style={{ color: '#818cf8' }}>R Stick Y</span> Fly</span>
+        <span><span style={{ color: '#818cf8' }}>Gaze 1.5s</span> Select</span>
+        <span><span style={{ color: '#818cf8' }}>Trigger</span> Click</span>
+        <span><span style={{ color: '#818cf8' }}>⌨ Button</span> Keyboard</span>
+      </div>
+
+      {/* Version */}
+      <p style={{ position: 'absolute', bottom: 16, color: '#27272a', fontSize: 11 }}>
+        Spaces VR — WebXR
+      </p>
+    </div>
+  );
+}
+
+/** Moves scene content vertically based on playerYRef (fly up/down) */
+function PlayerRig({ children }: { children: React.ReactNode }) {
+  const { playerYRef } = useVR();
+  const groupRef = useRef<THREE.Group>(null!);
+
+  useFrame(() => {
+    if (groupRef.current) {
+      groupRef.current.position.y = playerYRef.current;
+    }
+  });
+
+  return <group ref={groupRef}>{children}</group>;
+}