@jlongo78/agent-spaces 0.7.7 → 0.8.0

package/.next/standalone/src/components/mobile/mobile-session-card.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import Link from 'next/link';
+import { Star, MessageSquare, GitBranch, Clock } from 'lucide-react';
+import { formatRelativeTime, truncate } from '@/lib/utils';
+import type { SessionWithMeta } from '@/types/claude';
+
+interface MobileSessionCardProps {
+  session: SessionWithMeta;
+}
+
+export function MobileSessionCard({ session }: MobileSessionCardProps) {
+  const title = session.customName || session.summary || truncate(session.firstPrompt, 80);
+
+  return (
+    <Link
+      href={`/m/sessions/${session.id}`}
+      className="block bg-zinc-900 border border-zinc-800 rounded-lg p-3.5 active:bg-zinc-800 transition-colors"
+    >
+      <div className="flex items-start gap-2">
+        {session.starred && (
+          <Star className="w-3.5 h-3.5 text-amber-500 fill-amber-500 flex-shrink-0 mt-0.5" />
+        )}
+        <div className="flex-1 min-w-0">
+          <p className="text-sm font-medium truncate">{title}</p>
+          <div className="flex items-center gap-3 mt-1.5 text-[11px] text-zinc-500">
+            <span className="truncate max-w-[120px] text-indigo-400/70">{session.projectName}</span>
+            {session.gitBranch && session.gitBranch !== 'HEAD' && (
+              <span className="flex items-center gap-1">
+                <GitBranch className="w-2.5 h-2.5" />
+                <span className="truncate max-w-[80px]">{session.gitBranch}</span>
+              </span>
+            )}
+            <span className="flex items-center gap-1">
+              <MessageSquare className="w-2.5 h-2.5" />
+              {session.messageCount}
+            </span>
+            <span className="flex items-center gap-1 ml-auto flex-shrink-0">
+              <Clock className="w-2.5 h-2.5" />
+              {formatRelativeTime(session.modified)}
+            </span>
+          </div>
+          {session.tags && session.tags.length > 0 && (
+            <div className="flex gap-1.5 mt-2 flex-wrap">
+              {session.tags.map((tag: string) => (
+                <span key={tag} className="text-[10px] px-1.5 py-0.5 bg-zinc-800 rounded text-zinc-400">
+                  {tag}
+                </span>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </Link>
+  );
+}

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

@@ -0,0 +1,71 @@
+'use client';
+
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { Send } from 'lucide-react';
+import { VoiceInput } from './voice-input';
+import { cn } from '@/lib/utils';
+
+interface MobileTerminalInputProps {
+  onSend: (data: string) => void;
+}
+
+export function MobileTerminalInput({ onSend }: MobileTerminalInputProps) {
+  const [text, setText] = useState('');
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  // Auto-resize textarea (1 line to max 4 lines)
+  useEffect(() => {
+    if (textareaRef.current) {
+      textareaRef.current.style.height = 'auto';
+      textareaRef.current.style.height = `${Math.min(textareaRef.current.scrollHeight, 96)}px`;
+    }
+  }, [text]);
+
+  const handleSend = useCallback(() => {
+    if (!text.trim()) return;
+    onSend(text + '\r');
+    setText('');
+    // Refocus for next input
+    textareaRef.current?.focus();
+  }, [text, onSend]);
+
+  const handleVoiceTranscript = useCallback((transcript: string) => {
+    setText(prev => prev ? `${prev} ${transcript}` : transcript);
+    textareaRef.current?.focus();
+  }, []);
+
+  return (
+    <div className="flex-shrink-0 border-t border-zinc-800 bg-zinc-950 pb-[env(safe-area-inset-bottom)]">
+      <div className="flex items-end gap-2 px-3 py-2">
+        <VoiceInput onTranscript={handleVoiceTranscript} />
+
+        <textarea
+          ref={textareaRef}
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+          placeholder="Type a command..."
+          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-[96px]',
+          )}
+        />
+
+        <button
+          onClick={handleSend}
+          disabled={!text.trim()}
+          className={cn(
+            'p-2.5 rounded-xl flex-shrink-0',
+            text.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-terminal-pane.tsx

@@ -0,0 +1,300 @@
+'use client';
+
+import { useEffect, useRef, useState, useCallback } from 'react';
+import { MobileTerminalToolbar } from './mobile-terminal-toolbar';
+import { MobileTerminalInput } from './mobile-terminal-input';
+import { useIdleDetection } from '@/hooks/use-idle-detection';
+import type { IdleState } from '@/hooks/use-idle-detection';
+import type { PaneData } from '@/lib/db/queries';
+import 'xterm/css/xterm.css';
+
+const WS_PATH = process.env.NEXT_PUBLIC_WS_PATH;
+
+interface MobileTerminalPaneProps {
+  pane: PaneData;
+  terminalToken: string;
+  isVisible: boolean;
+  onIdleChange?: (paneId: string, state: IdleState) => void;
+  onUserInput?: (paneId: string) => void;
+}
+
+export function MobileTerminalPane({ pane, terminalToken, isVisible, onIdleChange, onUserInput }: MobileTerminalPaneProps) {
+  const termRef = useRef<HTMLDivElement>(null);
+  const xtermRef = useRef<any>(null);
+  const wsRef = useRef<WebSocket | null>(null);
+  const fitRef = useRef<any>(null);
+  const [connected, setConnected] = useState(false);
+  const [exited, setExited] = useState(false);
+
+  const paneRef = useRef(pane);
+  paneRef.current = pane;
+  const tokenRef = useRef(terminalToken);
+  tokenRef.current = terminalToken;
+  const onUserInputRef = useRef(onUserInput);
+  onUserInputRef.current = onUserInput;
+
+  const { idleState, markConnected, markDataReceived, markUserInput, markDisconnected } = useIdleDetection({
+    paneId: pane.id,
+    onIdleChange,
+  });
+
+  // Track exited state for idle — exited panes should be 'initializing', not 'idle'
+  const exitedRef = useRef(false);
+  const intentionalCloseRef = useRef(false);
+  const reconnectTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const reconnectAttemptsRef = useRef(0);
+
+  const connect = useCallback(async () => {
+    if (!termRef.current) return;
+    const currentPane = paneRef.current;
+    intentionalCloseRef.current = false;
+    reconnectAttemptsRef.current = 0;
+
+    const { Terminal } = await import('xterm');
+    const { FitAddon } = await import('@xterm/addon-fit');
+    const { WebLinksAddon } = await import('@xterm/addon-web-links');
+
+    if (xtermRef.current) {
+      xtermRef.current.dispose();
+    }
+
+    const term = new Terminal({
+      cursorBlink: true,
+      fontSize: 16,
+      fontFamily: "'Cascadia Code', 'Fira Code', 'JetBrains Mono', Consolas, monospace",
+      theme: {
+        background: '#0a0a0a',
+        foreground: '#e4e4e7',
+        cursor: '#6366f1',
+        selectionBackground: '#6366f133',
+        black: '#18181b',
+        red: '#ef4444',
+        green: '#22c55e',
+        yellow: '#eab308',
+        blue: '#3b82f6',
+        magenta: '#a855f7',
+        cyan: '#06b6d4',
+        white: '#e4e4e7',
+        brightBlack: '#52525b',
+        brightRed: '#f87171',
+        brightGreen: '#4ade80',
+        brightYellow: '#facc15',
+        brightBlue: '#60a5fa',
+        brightMagenta: '#c084fc',
+        brightCyan: '#22d3ee',
+        brightWhite: '#fafafa',
+      },
+      allowProposedApi: true,
+    });
+
+    const fitAddon = new FitAddon();
+    const webLinksAddon = new WebLinksAddon();
+    term.loadAddon(fitAddon);
+    term.loadAddon(webLinksAddon);
+
+    term.open(termRef.current);
+    try { fitAddon.fit(); } catch { /* dimensions may be wrong — corrected below */ }
+
+    xtermRef.current = term;
+    fitRef.current = fitAddon;
+
+    // The initial fit() above kicks xterm's canvas renderer into life but the
+    // layout may not have settled yet.  A double-rAF waits for a full
+    // layout+paint cycle; the 300ms fallback catches slow layouts.
+    const stableFit = () => { try { fitAddon.fit(); } catch {} };
+    requestAnimationFrame(() => requestAnimationFrame(stableFit));
+    setTimeout(stableFit, 300);
+
+    // Build WebSocket URL from current pane state
+    const buildWsUrl = () => {
+      const p = paneRef.current;
+      const params = new URLSearchParams({
+        paneId: p.id,
+        cwd: p.cwd,
+        agentType: p.agentType || 'shell',
+        cols: String(term.cols),
+        rows: String(term.rows),
+      });
+      if (p.claudeSessionId) params.set('agentSession', p.claudeSessionId);
+      if (p.customCommand) params.set('customCommand', p.customCommand);
+      const token = tokenRef.current;
+      if (token) params.set('terminalToken', token);
+      const basePath = process.env.SPACES_BASE_PATH || '';
+      const wsPath = WS_PATH || `${basePath}/ws`;
+      const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
+      return `${proto}//${location.host}${wsPath}?${params}`;
+    };
+
+    // Open (or re-open) WebSocket and wire to the existing terminal
+    const openWs = () => {
+      if (intentionalCloseRef.current) return;
+
+      // On reconnect, clear terminal so server buffer replay is clean
+      if (reconnectAttemptsRef.current > 0) {
+        term.write('\x1b[2J\x1b[H');
+        term.clear();
+      }
+
+      const ws = new WebSocket(buildWsUrl());
+      wsRef.current = ws;
+
+      ws.onopen = () => {
+        setConnected(true);
+        setExited(false);
+        exitedRef.current = false;
+        reconnectAttemptsRef.current = 0;
+        markConnected();
+      };
+
+      ws.onmessage = (event) => {
+        try {
+          const msg = JSON.parse(event.data);
+          if (msg.type === 'data') {
+            term.write(msg.data);
+            if (!exitedRef.current) markDataReceived();
+          } else if (msg.type === 'exit') {
+            setExited(true);
+            exitedRef.current = true;
+            markDisconnected();
+            term.write(`\r\n\x1b[90m[Process exited with code ${msg.exitCode}]\x1b[0m\r\n`);
+          } else if (msg.type === 'error') {
+            term.write(`\r\n\x1b[31m${msg.data}\x1b[0m\r\n`);
+          }
+        } catch {
+          // Raw data
+        }
+      };
+
+      ws.onclose = () => {
+        setConnected(false);
+        markDisconnected();
+        // Auto-reconnect if the process didn't exit and we didn't intentionally close
+        if (!exitedRef.current && !intentionalCloseRef.current) {
+          const attempts = reconnectAttemptsRef.current;
+          if (attempts < 20) {
+            const delay = Math.min(1000 * Math.pow(1.5, attempts), 30000);
+            reconnectAttemptsRef.current = attempts + 1;
+            reconnectTimerRef.current = setTimeout(openWs, delay);
+          }
+        }
+      };
+
+      ws.onerror = () => {
+        setConnected(false);
+        markDisconnected();
+      };
+    };
+
+    // Wire terminal input/resize to current WebSocket via ref
+    term.onData((data: string) => {
+      if (wsRef.current?.readyState === WebSocket.OPEN) {
+        wsRef.current.send(JSON.stringify({ type: 'data', data }));
+        markUserInput();
+        onUserInputRef.current?.(paneRef.current.id);
+      }
+    });
+
+    term.onResize(({ cols, rows }) => {
+      if (wsRef.current?.readyState === WebSocket.OPEN) {
+        wsRef.current.send(JSON.stringify({ type: 'resize', cols, rows }));
+      }
+    });
+
+    openWs();
+  }, [markConnected, markDataReceived, markUserInput, markDisconnected]);
+
+  useEffect(() => {
+    connect();
+    return () => {
+      intentionalCloseRef.current = true;
+      if (reconnectTimerRef.current) clearTimeout(reconnectTimerRef.current);
+      wsRef.current?.close();
+      xtermRef.current?.dispose();
+    };
+  }, [connect]);
+
+  // Resize on container changes.  ResizeObserver fires immediately on
+  // observe(), but fitRef may not be set yet (connect() is async).  Using rAF
+  // coalesces rapid resize events and gives connect() time to finish.
+  useEffect(() => {
+    let rafId: number;
+    const observer = new ResizeObserver(() => {
+      cancelAnimationFrame(rafId);
+      rafId = requestAnimationFrame(() => {
+        if (fitRef.current) {
+          try { fitRef.current.fit(); } catch { /* ignore */ }
+        }
+      });
+    });
+    if (termRef.current) {
+      observer.observe(termRef.current);
+    }
+    return () => { cancelAnimationFrame(rafId); observer.disconnect(); };
+  }, []);
+
+  // Refit xterm when becoming visible
+  useEffect(() => {
+    if (isVisible && fitRef.current) {
+      const timer = setTimeout(() => {
+        try { fitRef.current?.fit(); } catch { /* ignore */ }
+      }, 50);
+      return () => clearTimeout(timer);
+    }
+  }, [isVisible]);
+
+  const sendData = useCallback((data: string) => {
+    if (wsRef.current?.readyState === WebSocket.OPEN) {
+      wsRef.current.send(JSON.stringify({ type: 'data', data }));
+      markUserInput();
+      onUserInputRef.current?.(paneRef.current.id);
+    }
+  }, [markUserInput]);
+
+  const reconnect = () => {
+    intentionalCloseRef.current = true;
+    if (reconnectTimerRef.current) clearTimeout(reconnectTimerRef.current);
+    wsRef.current?.close();
+    xtermRef.current?.dispose();
+    setExited(false);
+    exitedRef.current = false;
+    setTimeout(connect, 100);
+  };
+
+  return (
+    <div className={
+      isVisible
+        ? 'flex flex-col flex-1 min-h-0'
+        : 'invisible absolute inset-0 pointer-events-none flex flex-col flex-1 min-h-0'
+    }>
+      {/* Status bar */}
+      <div className="flex items-center gap-2 px-3 py-1.5 bg-zinc-900 border-b border-zinc-800 text-xs flex-shrink-0">
+        <span
+          className="w-2 h-2 rounded-full"
+          style={{ backgroundColor: pane.color }}
+        />
+        <span className="font-medium truncate flex-1">{pane.title}</span>
+        {!connected && !exited && (
+          <span className="text-yellow-500">connecting...</span>
+        )}
+        {exited && (
+          <button onClick={reconnect} className="text-indigo-400 text-xs">
+            Restart
+          </button>
+        )}
+      </div>
+
+      {/* Terminal */}
+      <div
+        ref={termRef}
+        className="flex-1 bg-[#0a0a0a]"
+        style={{ minHeight: '200px' }}
+      />
+
+      {/* Modifier key toolbar */}
+      <MobileTerminalToolbar onSend={sendData} />
+
+      {/* Compose input bar */}
+      <MobileTerminalInput onSend={sendData} />
+    </div>
+  );
+}

package/.next/standalone/src/components/mobile/mobile-terminal-toolbar.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import { VoiceInput } from '@/components/mobile/voice-input';
+
+interface MobileTerminalToolbarProps {
+  onSend: (data: string) => void;
+}
+
+const keys = [
+  { label: 'Ctrl', data: null, modifier: 'ctrl' },
+  { label: 'Esc', data: '\x1b' },
+  { label: 'Tab', data: '\t' },
+  { label: '|', data: '|' },
+  { label: '~', data: '~' },
+  { label: '\u2191', data: '\x1b[A' },
+  { label: '\u2193', data: '\x1b[B' },
+  { label: '\u2190', data: '\x1b[D' },
+  { label: '\u2192', data: '\x1b[C' },
+];
+
+export function MobileTerminalToolbar({ onSend }: MobileTerminalToolbarProps) {
+  const handleKey = (key: typeof keys[number]) => {
+    if (key.modifier === 'ctrl') {
+      // Ctrl mode: next tap sends ctrl+key
+      // For simplicity, we'll use a common shortcut approach
+      // The user taps Ctrl, then types a letter in the terminal
+      onSend('\x00'); // NUL — signals ctrl mode to the terminal
+      return;
+    }
+    if (key.data) {
+      onSend(key.data);
+    }
+  };
+
+  return (
+    <div className="flex items-center gap-1 px-2 py-1.5 bg-zinc-900 border-t border-zinc-800 overflow-x-auto">
+      {keys.map((key) => (
+        <button
+          key={key.label}
+          onTouchStart={(e) => {
+            e.preventDefault();
+            handleKey(key);
+          }}
+          onClick={() => handleKey(key)}
+          className="flex-shrink-0 px-3 py-1.5 text-xs font-mono bg-zinc-800 border border-zinc-700 rounded text-zinc-300 active:bg-zinc-700 select-none"
+        >
+          {key.label}
+        </button>
+      ))}
+      <VoiceInput onTranscript={onSend} />
+    </div>
+  );
+}

package/.next/standalone/src/components/mobile/pull-to-refresh.tsx

@@ -0,0 +1,82 @@
+'use client';
+
+import { useState, useRef, useCallback, type ReactNode } from 'react';
+import { Loader2, ArrowDown } from 'lucide-react';
+
+interface PullToRefreshProps {
+  onRefresh: () => Promise<void>;
+  children: ReactNode;
+}
+
+const THRESHOLD = 80;
+
+export function PullToRefresh({ onRefresh, children }: PullToRefreshProps) {
+  const [pullDistance, setPullDistance] = useState(0);
+  const [refreshing, setRefreshing] = useState(false);
+  const startY = useRef(0);
+  const pulling = useRef(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const handleTouchStart = useCallback((e: React.TouchEvent) => {
+    if (containerRef.current && containerRef.current.scrollTop === 0) {
+      startY.current = e.touches[0].clientY;
+      pulling.current = true;
+    }
+  }, []);
+
+  const handleTouchMove = useCallback((e: React.TouchEvent) => {
+    if (!pulling.current || refreshing) return;
+    const diff = e.touches[0].clientY - startY.current;
+    if (diff > 0) {
+      setPullDistance(Math.min(diff * 0.5, THRESHOLD * 1.5));
+    }
+  }, [refreshing]);
+
+  const handleTouchEnd = useCallback(async () => {
+    if (!pulling.current) return;
+    pulling.current = false;
+
+    if (pullDistance >= THRESHOLD && !refreshing) {
+      setRefreshing(true);
+      setPullDistance(THRESHOLD * 0.6);
+      try {
+        await onRefresh();
+      } finally {
+        setRefreshing(false);
+        setPullDistance(0);
+      }
+    } else {
+      setPullDistance(0);
+    }
+  }, [pullDistance, refreshing, onRefresh]);
+
+  return (
+    <div
+      ref={containerRef}
+      className="relative overflow-y-auto flex-1"
+      onTouchStart={handleTouchStart}
+      onTouchMove={handleTouchMove}
+      onTouchEnd={handleTouchEnd}
+    >
+      {/* Pull indicator */}
+      {(pullDistance > 0 || refreshing) && (
+        <div
+          className="flex items-center justify-center transition-opacity"
+          style={{ height: pullDistance }}
+        >
+          {refreshing ? (
+            <Loader2 className="w-5 h-5 animate-spin text-indigo-400" />
+          ) : (
+            <ArrowDown
+              className="w-5 h-5 text-zinc-500 transition-transform"
+              style={{
+                transform: pullDistance >= THRESHOLD ? 'rotate(180deg)' : 'rotate(0deg)',
+              }}
+            />
+          )}
+        </div>
+      )}
+      {children}
+    </div>
+  );
+}

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

@@ -0,0 +1,53 @@
+'use client';
+
+import { useEffect } from 'react';
+import { Mic, MicOff } from 'lucide-react';
+import { useSpeechRecognition } from '@/hooks/use-speech-recognition';
+import { cn } from '@/lib/utils';
+
+interface VoiceInputProps {
+  onTranscript: (text: string) => void;
+}
+
+export function VoiceInput({ onTranscript }: VoiceInputProps) {
+  const {
+    isListening,
+    isSupported,
+    transcript,
+    interimTranscript,
+    startListening,
+    stopListening,
+  } = useSpeechRecognition();
+
+  // Send final transcript to parent
+  useEffect(() => {
+    if (transcript) {
+      onTranscript(transcript);
+    }
+  }, [transcript, onTranscript]);
+
+  if (!isSupported) return null;
+
+  return (
+    <div className="relative flex-shrink-0">
+      <button
+        onClick={isListening ? stopListening : startListening}
+        className={cn(
+          'p-2.5 rounded-xl transition-colors',
+          isListening
+            ? 'bg-red-500 text-white animate-pulse'
+            : 'bg-zinc-800 text-zinc-400 hover:text-white'
+        )}
+      >
+        {isListening ? <MicOff className="w-4 h-4" /> : <Mic className="w-4 h-4" />}
+      </button>
+
+      {/* Interim transcript tooltip */}
+      {isListening && interimTranscript && (
+        <div className="absolute bottom-full left-0 mb-2 px-3 py-1.5 bg-zinc-800 border border-zinc-700 rounded-lg text-xs text-zinc-300 whitespace-nowrap max-w-[200px] truncate shadow-xl">
+          {interimTranscript}
+        </div>
+      )}
+    </div>
+  );
+}