antigravity-mobile-proxy 0.1.0

package/hooks/use-chat.ts

@@ -0,0 +1,278 @@
+'use client';
+
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { useConversations } from './use-conversations';
+import { useArtifacts } from './use-artifacts';
+import type { ChatMessage, SSEStep } from '@/lib/types';
+
+const API_BASE = '/api/v1';
+
+export function useChat() {
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const [isStreaming, setIsStreaming] = useState(false);
+  const [isConnected, setIsConnected] = useState(false);
+  const [statusText, setStatusText] = useState('Agent');
+  const [statusState, setStatusState] = useState('connected');
+  const [showWelcome, setShowWelcome] = useState(true);
+  const [currentSteps, setCurrentSteps] = useState<SSEStep[]>([]);
+  const [currentResponse, setCurrentResponse] = useState('');
+  const [currentMode, setCurrentMode] = useState<'planning' | 'fast'>('planning');
+  
+  const controllerRef = useRef<AbortController | null>(null);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const currentResponseRef = useRef('');
+  const currentStepsRef = useRef<SSEStep[]>([]);
+
+  const scrollToBottom = useCallback(() => {
+    requestAnimationFrame(() => {
+      messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+    });
+  }, []);
+
+  const setStatus = useCallback((state: string, text: string) => {
+    setStatusState(state);
+    setStatusText(text);
+  }, []);
+
+  const fetchHistory = useCallback(async () => {
+    try {
+      const res = await fetch(`${API_BASE}/chat/history`);
+      const data = await res.json();
+      if (data.turns && data.turns.length > 0) {
+        setShowWelcome(false);
+        setMessages(data.turns.map((t: any) => ({ role: t.role, content: t.content })));
+      }
+    } catch { /* ignore */ }
+  }, []);
+
+  const {
+    artifactFiles,
+    artifactPanelOpen,
+    toggleArtifactPanel,
+    openArtifactPanel,
+    loadArtifacts
+  } = useArtifacts();
+
+  // Auto-open artifact panel and refresh files when a conversation switch completes
+  const handleConversationSwitched = useCallback(() => {
+    openArtifactPanel();
+    loadArtifacts();
+  }, [openArtifactPanel, loadArtifacts]);
+
+  const {
+    windows,
+    conversations,
+    activeConversation,
+    cdpStatus,
+    recentProjects,
+    loadWindows,
+    selectWindow,
+    loadConversations,
+    selectConversation,
+    checkCdpStatus,
+    startCdpServer,
+    openNewWindow,
+    closeWindowByIndex,
+    loadRecentProjects,
+  } = useConversations(fetchHistory, setShowWelcome, handleConversationSwitched);
+
+
+  const fetchMode = useCallback(async () => {
+    try {
+      const res = await fetch(`${API_BASE}/chat/mode`);
+      const data = await res.json();
+      if (data.mode) setCurrentMode(data.mode);
+    } catch { /* ignore */ }
+  }, []);
+
+  const toggleMode = useCallback(async () => {
+    const newMode = currentMode === 'planning' ? 'fast' : 'planning';
+    setCurrentMode(newMode); // Optimistic update
+    try {
+      const res = await fetch(`${API_BASE}/chat/mode`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ mode: newMode }),
+      });
+      const data = await res.json();
+      if (data.mode) setCurrentMode(data.mode);
+    } catch {
+      setCurrentMode(currentMode); // Rollback on error
+    }
+  }, [currentMode]);
+
+  const checkHealth = useCallback(async () => {
+    try {
+      const res = await fetch(`${API_BASE}/health`);
+      const data = await res.json();
+      setIsConnected(data.connected);
+      setStatus(data.connected ? 'connected' : 'disconnected', data.connected ? 'Agent' : 'Disconnected');
+    } catch {
+      setIsConnected(false);
+      setStatus('disconnected', 'Offline');
+    }
+  }, [setStatus]);
+
+  const handleSSEvent = useCallback((payload: any) => {
+    const { type, ...data } = payload;
+
+    switch (type) {
+      case 'thinking':
+      case 'tool_call':
+      case 'hitl':
+      case 'file_change':
+      case 'error':
+      case 'notification':
+        setCurrentSteps(prev => {
+          const updated = [...prev, { type, data }];
+          currentStepsRef.current = updated;
+          return updated;
+        });
+        break;
+
+      case 'response':
+        setCurrentResponse(data.content || '');
+        currentResponseRef.current = data.content || '';
+        break;
+
+      case 'status':
+        setStatus(data.isRunning ? 'streaming' : 'connected', data.isRunning ? 'Agent working...' : 'Agent');
+        break;
+
+      case 'done':
+        if (data.finalResponse) {
+          setCurrentResponse(data.finalResponse);
+          currentResponseRef.current = data.finalResponse;
+        }
+        setStatus('connected', 'Agent');
+        setIsStreaming(false);
+        break;
+    }
+    scrollToBottom();
+  }, [setStatus, scrollToBottom]);
+
+  const sendMessage = useCallback(async (text: string) => {
+    if (isStreaming || !text.trim()) return;
+
+    setShowWelcome(false);
+    const trimmed = text.trim();
+
+    setMessages(prev => [...prev, { role: 'user', content: trimmed }]);
+    setIsStreaming(true);
+    setCurrentSteps([]);
+    setCurrentResponse('');
+    currentResponseRef.current = '';
+    currentStepsRef.current = [];
+    setStatus('streaming', 'Agent typing...');
+
+    const controller = new AbortController();
+    controllerRef.current = controller;
+
+    try {
+      const res = await fetch(`${API_BASE}/chat/stream`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ message: trimmed }),
+        signal: controller.signal,
+      });
+
+      const reader = res.body!.getReader();
+      const decoder = new TextDecoder();
+      let buffer = '';
+
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+
+        buffer += decoder.decode(value, { stream: true });
+        const lines = buffer.split('\n');
+        buffer = lines.pop()!;
+
+        for (const line of lines) {
+          if (!line.startsWith('data: ')) continue;
+          try {
+            const payload = JSON.parse(line.slice(6));
+            handleSSEvent(payload);
+          } catch { /* skip */ }
+        }
+      }
+    } catch (e: any) {
+      if (e.name !== 'AbortError') {
+        setCurrentSteps(prev => [...prev, { type: 'error', data: { message: e.message } }]);
+        setStatus('error', 'Error');
+      }
+    } finally {
+      const finalResponse = currentResponseRef.current;
+      const finalSteps = [...currentStepsRef.current];
+
+      setIsStreaming(false);
+      controllerRef.current = null;
+
+      if (finalResponse || finalSteps.length > 0) {
+        setMessages(prev => [
+          ...prev,
+          { role: 'agent', content: finalResponse, steps: finalSteps },
+        ]);
+      }
+      setStatus('connected', 'Agent');
+    }
+  }, [isStreaming, handleSSEvent, setStatus]);
+
+  const startNewChat = useCallback(async () => {
+    if (controllerRef.current) controllerRef.current.abort();
+    setMessages([]);
+    setCurrentSteps([]);
+    setCurrentResponse('');
+    setShowWelcome(true);
+
+    try {
+      const res = await fetch(`${API_BASE}/chat/new`, { method: 'POST' });
+      const data = await res.json();
+      if (data.success) {
+        setStatus('connected', 'New Chat');
+      }
+    } catch { /* ignore */ }
+  }, [setStatus]);
+
+  const approve = useCallback(async () => {
+    try {
+      await fetch(`${API_BASE}/chat/approve`, { method: 'POST' });
+      setStatus('streaming', 'Agent');
+    } catch { /* ignore */ }
+  }, [setStatus]);
+
+  const reject = useCallback(async () => {
+    try {
+      await fetch(`${API_BASE}/chat/reject`, { method: 'POST' });
+    } catch { /* ignore */ }
+  }, []);
+
+  useEffect(() => {
+    checkHealth();
+    loadWindows();
+    fetchHistory();
+    loadConversations();
+    loadArtifacts();
+    fetchMode();
+    checkCdpStatus();
+    loadRecentProjects();
+
+    // Passive polling for health and CDP status
+    const healthTimer = setInterval(checkHealth, 30000);
+    const cdpTimer = setInterval(checkCdpStatus, 15000);
+    return () => { clearInterval(healthTimer); clearInterval(cdpTimer); };
+  }, [checkHealth, loadWindows, fetchHistory, loadConversations, loadArtifacts, fetchMode, checkCdpStatus, loadRecentProjects]);
+
+  useEffect(scrollToBottom, [messages, currentSteps, currentResponse, scrollToBottom]);
+
+  return {
+    messages, isStreaming, isConnected, statusText, statusState,
+    showWelcome, currentSteps, currentResponse, windows,
+    conversations, activeConversation, artifactFiles, artifactPanelOpen,
+    currentMode, cdpStatus, recentProjects,
+    sendMessage, startNewChat, approve, reject,
+    selectWindow, selectConversation, toggleArtifactPanel, openArtifactPanel,
+    toggleMode, startCdpServer, openNewWindow, closeWindowByIndex,
+    messagesEndRef, setShowWelcome,
+  };
+}

package/hooks/use-conversations.ts

@@ -0,0 +1,190 @@
+import { useState, useCallback } from 'react';
+import type { WindowInfo, ConversationInfo } from '@/lib/types';
+
+const API_BASE = '/api/v1';
+
+export interface CdpStatus {
+  active: boolean;
+  windowCount: number;
+  error?: string | null;
+}
+
+export interface RecentProject {
+  path: string;
+  name: string;
+  lastOpened: string;
+}
+
+export function useConversations(
+  fetchHistory: () => Promise<void>,
+  setShowWelcome: (s: boolean) => void,
+  onConversationSwitched?: () => void
+) {
+  const [windows, setWindows] = useState<WindowInfo[]>([]);
+  const [conversations, setConversations] = useState<ConversationInfo[]>([]);
+  const [activeConversation, setActiveConversation] = useState<ConversationInfo | null>(null);
+  const [cdpStatus, setCdpStatus] = useState<CdpStatus>({ active: false, windowCount: 0 });
+  const [recentProjects, setRecentProjects] = useState<RecentProject[]>([]);
+
+  const loadWindows = useCallback(async () => {
+    try {
+      const res = await fetch(`${API_BASE}/windows`);
+      const data = await res.json();
+      setWindows(data.windows || []);
+    } catch { /* ignore */ }
+  }, []);
+
+  const checkCdpStatus = useCallback(async () => {
+    try {
+      const res = await fetch(`${API_BASE}/windows/cdp-status`);
+      const data = await res.json();
+      setCdpStatus({
+        active: data.active,
+        windowCount: data.windowCount,
+        error: data.error,
+      });
+      return data.active;
+    } catch {
+      setCdpStatus({ active: false, windowCount: 0, error: 'Failed to check' });
+      return false;
+    }
+  }, []);
+
+  const startCdpServer = useCallback(async (projectDir?: string, killExisting?: boolean) => {
+    try {
+      const res = await fetch(`${API_BASE}/windows/cdp-start`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ projectDir: projectDir || '.', killExisting: killExisting || false }),
+      });
+      const data = await res.json();
+      if (data.success) {
+        await checkCdpStatus();
+        await loadWindows();
+      }
+      return data;
+    } catch (e: any) {
+      return { success: false, message: e.message || 'Failed to start CDP server' };
+    }
+  }, [checkCdpStatus, loadWindows]);
+
+  const openNewWindow = useCallback(async (projectDir: string) => {
+    try {
+      const res = await fetch(`${API_BASE}/windows/open`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ projectDir }),
+      });
+      const data = await res.json();
+      if (data.success) {
+        // Refresh window list after opening
+        await loadWindows();
+        await checkCdpStatus();
+      }
+      return data;
+    } catch (e: any) {
+      return { success: false, message: e.message || 'Failed to open window' };
+    }
+  }, [loadWindows, checkCdpStatus]);
+
+  const closeWindowByIndex = useCallback(async (index: number) => {
+    try {
+      const res = await fetch(`${API_BASE}/windows/close`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ index }),
+      });
+      const data = await res.json();
+      if (data.success) {
+        await loadWindows();
+        await checkCdpStatus();
+      }
+      return data;
+    } catch (e: any) {
+      return { success: false, message: e.message || 'Failed to close window' };
+    }
+  }, [loadWindows, checkCdpStatus]);
+
+  const selectWindow = useCallback(async (idx: number) => {
+    try {
+      await fetch(`${API_BASE}/windows/select`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ index: idx }),
+      });
+      await loadWindows();
+    } catch { /* ignore */ }
+  }, [loadWindows]);
+
+  const loadConversations = useCallback(async () => {
+    try {
+      const res = await fetch(`${API_BASE}/conversations`);
+      const data = await res.json();
+      const convs: ConversationInfo[] = data.conversations || [];
+      setConversations(convs);
+      const active = convs.find((c) => c.active);
+      if (active) {
+        setActiveConversation(active);
+      }
+    } catch { /* ignore */ }
+  }, []);
+
+  const selectConversation = useCallback(async (title: string) => {
+    try {
+      const res = await fetch(`${API_BASE}/conversations/select`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ title }),
+      });
+      const data = await res.json();
+      if (data.success) {
+        setShowWelcome(false);
+        let attempts = 0;
+        const poll = async () => {
+          attempts++;
+          try {
+            const resList = await fetch(`${API_BASE}/conversations`);
+            const dList = await resList.json();
+            const convs = dList.conversations || [];
+            const active = convs.find((c: any) => c.active);
+            if ((active && active.title === title) || attempts > 10) {
+              setConversations(convs);
+              if (active) setActiveConversation(active);
+              await fetchHistory();
+              // Notify parent that the switch is complete (for artifact sync)
+              onConversationSwitched?.();
+              return;
+            }
+          } catch { /* ignore */ }
+          setTimeout(poll, 500);
+        };
+        poll();
+      }
+    } catch { /* ignore */ }
+  }, [fetchHistory, setShowWelcome, onConversationSwitched]);
+
+  const loadRecentProjects = useCallback(async () => {
+    try {
+      const res = await fetch(`${API_BASE}/windows/recent`);
+      const data = await res.json();
+      setRecentProjects(data.recentProjects || []);
+    } catch { /* ignore */ }
+  }, []);
+
+  return {
+    windows,
+    conversations,
+    activeConversation,
+    cdpStatus,
+    recentProjects,
+    loadWindows,
+    selectWindow,
+    loadConversations,
+    selectConversation,
+    checkCdpStatus,
+    startCdpServer,
+    openNewWindow,
+    closeWindowByIndex,
+    loadRecentProjects,
+  };
+}

package/lib/actions/hitl.ts

@@ -0,0 +1,113 @@
+/**
+ * HITL (Human-in-the-Loop) button interactions.
+ */
+
+import type { ProxyContext } from '../types';
+
+/**
+ * Click the approve/run/allow button in the HITL panel.
+ */
+export async function clickApproveButton(ctx: ProxyContext) {
+  if (!ctx.workbenchPage) return { success: false, error: 'Not connected' };
+
+  return ctx.workbenchPage.evaluate(() => {
+    const panel = document.querySelector('.antigravity-agent-side-panel');
+    if (!panel) return { success: false, error: 'No panel found' };
+
+    const buttons = Array.from(panel.querySelectorAll('button'));
+
+    for (const btn of buttons) {
+      const text = btn.textContent?.trim().toLowerCase() || '';
+      if (
+        (text === 'run' ||
+          text === 'approve' ||
+          text === 'allow' ||
+          text === 'yes') &&
+        !btn.disabled
+      ) {
+        btn.click();
+        return { success: true, clicked: btn.textContent?.trim() };
+      }
+    }
+
+    const footers = panel.querySelectorAll('.rounded-b.border-t');
+    for (const footer of footers) {
+      const actionBtns = footer.querySelectorAll('button');
+      for (const btn of actionBtns) {
+        const text = btn.textContent?.trim().toLowerCase() || '';
+        if (text !== 'cancel' && !btn.disabled) {
+          btn.click();
+          return { success: true, clicked: btn.textContent?.trim() };
+        }
+      }
+    }
+
+    return { success: false, error: 'No approve button found' };
+  });
+}
+
+/**
+ * Click the reject/cancel/deny button in the HITL panel.
+ */
+export async function clickRejectButton(ctx: ProxyContext) {
+  if (!ctx.workbenchPage) return { success: false, error: 'Not connected' };
+
+  return ctx.workbenchPage.evaluate(() => {
+    const panel = document.querySelector('.antigravity-agent-side-panel');
+    if (!panel) return { success: false, error: 'No panel found' };
+
+    const buttons = Array.from(panel.querySelectorAll('button'));
+    for (const btn of buttons) {
+      const text = btn.textContent?.trim().toLowerCase() || '';
+      if (
+        (text === 'cancel' || text === 'reject' || text === 'deny') &&
+        !btn.disabled
+      ) {
+        btn.click();
+        return { success: true, clicked: btn.textContent?.trim() };
+      }
+    }
+
+    return { success: false, error: 'No reject/cancel button found' };
+  });
+}
+
+/**
+ * Click any footer button by toolId + buttonText.
+ */
+export async function clickActionButton(
+  ctx: ProxyContext,
+  toolId: string | null,
+  buttonText: string
+) {
+  if (!ctx.workbenchPage) return { success: false, error: 'Not connected' };
+
+  return ctx.workbenchPage.evaluate(
+    (tid: string | null, btext: string) => {
+      const panel = document.querySelector('.antigravity-agent-side-panel');
+      if (!panel) return { success: false, error: 'No panel found' };
+
+      let searchRoot: Element = panel;
+      if (tid) {
+        const scoped = panel.querySelector(
+          `[data-proxy-tool-id="${tid}"]`
+        );
+        if (scoped) searchRoot = scoped;
+      }
+
+      const buttons = Array.from(searchRoot.querySelectorAll('button'));
+      const target = buttons.find((b) => {
+        const t = b.textContent?.trim() || '';
+        return t.toLowerCase() === btext.toLowerCase() && !b.disabled;
+      });
+
+      if (target) {
+        target.click();
+        return { success: true, clicked: target.textContent?.trim() };
+      }
+      return { success: false, error: `Button "${btext}" not found` };
+    },
+    toolId,
+    buttonText
+  );
+}

package/lib/actions/new-chat.ts

@@ -0,0 +1,116 @@
+/**
+ * Start a new chat in the Antigravity IDE by clicking the new-chat button.
+ */
+
+import type { ProxyContext } from '../types';
+
+export async function startNewChat(ctx: ProxyContext) {
+  if (!ctx.workbenchPage)
+    return { success: false, error: 'Not connected' };
+
+  const btnResult = await ctx.workbenchPage.evaluate(() => {
+    const panel = document.querySelector('.antigravity-agent-side-panel');
+    if (!panel)
+      return { success: false, error: 'No panel found' } as any;
+
+    const allButtons = Array.from(panel.querySelectorAll('button'));
+
+    const getCoords = (btn: Element, method: string) => {
+      const rect = btn.getBoundingClientRect();
+      return {
+        success: true,
+        method,
+        clicked:
+          (btn as HTMLElement).textContent?.trim() ||
+          btn.getAttribute('aria-label') ||
+          '+',
+        x: rect.left + rect.width / 2,
+        y: rect.top + rect.height / 2,
+      };
+    };
+
+    // Strategy 0: Exact match using known tooltip id
+    const exactBtn = panel.querySelector(
+      'a[data-tooltip-id="new-conversation-tooltip"]'
+    );
+    if (exactBtn) {
+      if (
+        exactBtn.classList.contains('cursor-not-allowed') ||
+        exactBtn.classList.contains('disabled') ||
+        getComputedStyle(exactBtn).opacity === '0.5'
+      ) {
+        return {
+          success: true,
+          method: 'tooltip-id-exact-disabled',
+          clicked: 'Already in a new chat',
+        };
+      }
+      return getCoords(exactBtn, 'tooltip-id-exact');
+    }
+
+    // Strategy 0.5: Structural match
+    const header = panel.querySelector(
+      '.title-actions, .actions-container, [class*="header"], [class*="titlebar"]'
+    );
+    if (header) {
+      const headerBtns = Array.from(
+        header.querySelectorAll('button, a.action-label')
+      );
+      if (headerBtns.length >= 4) {
+        const target = headerBtns[headerBtns.length - 4];
+        return getCoords(target, 'header-4th-from-right');
+      }
+    }
+
+    // Strategy 1: aria-label or title
+    for (const btn of allButtons) {
+      const aria = (btn.getAttribute('aria-label') || '').toLowerCase();
+      const title = (btn.getAttribute('title') || '').toLowerCase();
+      const combined = aria + ' ' + title;
+      if (combined.includes('new') || combined.includes('start') || combined.includes('create')) {
+        if (
+          combined.includes('chat') ||
+          combined.includes('conversation') ||
+          combined.includes('session') ||
+          aria.includes('new') ||
+          title.includes('new')
+        ) {
+          return getCoords(btn, 'aria/title');
+        }
+      }
+    }
+
+
+
+    return {
+      success: false,
+      error: 'No new-chat button found',
+      buttonCount: allButtons.length,
+    } as any;
+  });
+
+  if (btnResult.success && btnResult.x && btnResult.y) {
+    await ctx.workbenchPage.mouse.click(btnResult.x, btnResult.y);
+    await new Promise((r) => setTimeout(r, 100));
+    return btnResult;
+  } else if (
+    btnResult.success &&
+    btnResult.method === 'tooltip-id-exact-disabled'
+  ) {
+    return btnResult;
+  }
+
+  // Strategy 5: Keyboard shortcut fallback
+  try {
+    await ctx.workbenchPage.keyboard.down('Control');
+    await ctx.workbenchPage.keyboard.press('l');
+    await ctx.workbenchPage.keyboard.up('Control');
+    return { success: true, method: 'keyboard-shortcut', clicked: 'Ctrl+L' };
+  } catch (e: any) {
+    return {
+      success: false,
+      error:
+        'All strategies failed: ' + (btnResult.error || '') + ' | keyboard: ' + e.message,
+    };
+  }
+}