antigravity-mobile-proxy 0.1.6 → 0.1.7

package/.next/standalone/components/changes-panel.tsx

@@ -0,0 +1,178 @@
+'use client';
+
+import { useState } from 'react';
+import type { ChangeFile } from '@/lib/types';
+
+interface ChangesPanelProps {
+  open: boolean;
+  onClose: () => void;
+  changes: ChangeFile[];
+}
+
+interface DiffLine {
+  type: 'add' | 'del' | 'context' | 'header' | 'meta';
+  content: string;
+  lineNum?: number;
+}
+
+function parseDiff(raw: string): DiffLine[] {
+  const lines: DiffLine[] = [];
+  let addLineNum = 0;
+  let delLineNum = 0;
+
+  for (const line of raw.split('\n')) {
+    if (line.startsWith('diff --git') || line.startsWith('index ') || line.startsWith('new file') || line.startsWith('deleted file')) {
+      lines.push({ type: 'meta', content: line });
+    } else if (line.startsWith('---') || line.startsWith('+++')) {
+      lines.push({ type: 'meta', content: line });
+    } else if (line.startsWith('@@')) {
+      // Parse hunk header for line numbers
+      const match = line.match(/@@ -(\d+)(?:,\d+)? \+(\d+)(?:,\d+)? @@/);
+      if (match) {
+        delLineNum = parseInt(match[1]);
+        addLineNum = parseInt(match[2]);
+      }
+      lines.push({ type: 'header', content: line });
+    } else if (line.startsWith('+')) {
+      lines.push({ type: 'add', content: line.substring(1), lineNum: addLineNum++ });
+    } else if (line.startsWith('-')) {
+      lines.push({ type: 'del', content: line.substring(1), lineNum: delLineNum++ });
+    } else if (line.startsWith(' ')) {
+      lines.push({ type: 'context', content: line.substring(1), lineNum: addLineNum });
+      addLineNum++;
+      delLineNum++;
+    }
+  }
+
+  return lines;
+}
+
+export default function ChangesPanel({ open, onClose, changes }: ChangesPanelProps) {
+  const [viewingFile, setViewingFile] = useState<string | null>(null);
+  const [diffContent, setDiffContent] = useState<DiffLine[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [viewingFilename, setViewingFilename] = useState('');
+
+  const totalAdditions = changes.reduce((s, c) => s + c.additions, 0);
+  const totalDeletions = changes.reduce((s, c) => s + c.deletions, 0);
+
+  const fileIcon = (name: string) => {
+    if (name.endsWith('.tsx') || name.endsWith('.jsx')) return '⚛️';
+    if (name.endsWith('.ts') || name.endsWith('.js')) return '📘';
+    if (name.endsWith('.css')) return '🎨';
+    if (name.endsWith('.md')) return '📄';
+    if (name.endsWith('.json')) return '📋';
+    return '📝';
+  };
+
+  const openDiff = async (change: ChangeFile) => {
+    setLoading(true);
+    setViewingFile(change.filepath);
+    setViewingFilename(change.filename);
+    setDiffContent([]);
+    try {
+      const res = await fetch(`/api/v1/changes/diff?filepath=${encodeURIComponent(change.filepath)}`);
+      const data = await res.json();
+      if (data.diff) {
+        setDiffContent(parseDiff(data.diff));
+      } else {
+        setDiffContent([{ type: 'meta', content: data.message || 'No diff available' }]);
+      }
+    } catch (e: any) {
+      setDiffContent([{ type: 'meta', content: `Error: ${e.message}` }]);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const closeDiffViewer = () => {
+    setViewingFile(null);
+    setDiffContent([]);
+    setViewingFilename('');
+  };
+
+  return (
+    <div className={`changes-panel ${open ? 'open' : ''}`}>
+      {/* Header */}
+      <div className="changes-panel-header">
+        <button className="icon-btn" onClick={onClose} title="Close panel">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <line x1="18" y1="6" x2="6" y2="18" />
+            <line x1="6" y1="6" x2="18" y2="18" />
+          </svg>
+        </button>
+        <h3>Changes Overview</h3>
+      </div>
+
+      {viewingFile ? (
+        /* Diff viewer */
+        <div className="diff-viewer">
+          <div className="diff-viewer-header">
+            <button className="diff-back-btn" onClick={closeDiffViewer}>← Back</button>
+            <span className="diff-viewer-title">{viewingFilename}</span>
+            <span className="diff-viewer-path">{viewingFile}</span>
+          </div>
+          <div className="diff-viewer-body">
+            {loading ? (
+              <div style={{ color: 'var(--text-muted)', padding: '16px', fontStyle: 'italic' }}>Loading diff...</div>
+            ) : diffContent.length === 0 ? (
+              <div style={{ color: 'var(--text-muted)', padding: '16px' }}>No changes found</div>
+            ) : (
+              <div className="diff-lines">
+                {diffContent.map((line, i) => (
+                  <div key={i} className={`diff-line diff-line-${line.type}`}>
+                    <span className="diff-line-num">
+                      {line.lineNum !== undefined ? line.lineNum : ''}
+                    </span>
+                    <span className="diff-line-indicator">
+                      {line.type === 'add' ? '+' : line.type === 'del' ? '-' : line.type === 'header' ? '@@' : ''}
+                    </span>
+                    <span className="diff-line-content">{line.content}</span>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      ) : (
+        /* File list */
+        <>
+          {/* Summary bar */}
+          <div className="changes-summary">
+            <span className="changes-count">{changes.length} file{changes.length !== 1 ? 's' : ''} changed</span>
+            <div className="changes-stats">
+              {totalAdditions > 0 && <span className="changes-additions">+{totalAdditions}</span>}
+              {totalDeletions > 0 && <span className="changes-deletions">-{totalDeletions}</span>}
+            </div>
+          </div>
+
+          <div className="changes-file-list">
+            {changes.map(c => (
+              <button
+                key={c.filepath}
+                className="changes-file-item"
+                onClick={() => openDiff(c)}
+                title={`View diff: ${c.filepath}`}
+              >
+                <span className="changes-file-icon">{fileIcon(c.filename)}</span>
+                <div className="changes-file-info">
+                  <div className="changes-file-name">{c.filename}</div>
+                  <div className="changes-file-path">{c.filepath}</div>
+                </div>
+                <div className="changes-file-diff">
+                  {c.additions > 0 && <span className="changes-additions">+{c.additions}</span>}
+                  {c.deletions > 0 && <span className="changes-deletions">-{c.deletions}</span>}
+                </div>
+              </button>
+            ))}
+            {changes.length === 0 && (
+              <div style={{ textAlign: 'center', padding: '24px', color: 'var(--text-muted)', fontSize: '13px' }}>
+                No file changes in this conversation
+              </div>
+            )}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

package/.next/standalone/components/chat-container.tsx

@@ -6,6 +6,7 @@ import WelcomeScreen from '@/components/welcome-screen';
 import MessageList from '@/components/message-list';
 import ChatInput from '@/components/chat-input';
 import ArtifactPanel from '@/components/artifact-panel';
+import ChangesPanel from '@/components/changes-panel';
 import { useEffect } from 'react';
 
 export default function ChatContainer() {
@@ -35,14 +36,43 @@ export default function ChatContainer() {
         onSelectWindow={chat.selectWindow}
         onSelectConversation={chat.selectConversation}
         onNewChat={chat.startNewChat}
-        onToggleArtifacts={chat.toggleArtifactPanel}
         onStartCdp={chat.startCdpServer}
         onOpenWindow={chat.openNewWindow}
         onCloseWindow={chat.closeWindowByIndex}
       />
 
       <main className="messages-area" role="log" aria-live="polite">
-        {chat.showWelcome ? (
+        {chat.isLoadingHistory ? (
+          <div className="history-loading">
+            <div className="history-loading-header">
+              <div className="skeleton-shimmer skeleton-avatar" />
+              <div className="skeleton-shimmer skeleton-line" style={{ width: '45%' }} />
+            </div>
+            <div className="history-loading-block">
+              <div className="skeleton-shimmer skeleton-line" style={{ width: '80%' }} />
+              <div className="skeleton-shimmer skeleton-line" style={{ width: '65%' }} />
+              <div className="skeleton-shimmer skeleton-line" style={{ width: '72%' }} />
+            </div>
+            <div className="history-loading-header right">
+              <div className="skeleton-shimmer skeleton-line" style={{ width: '35%' }} />
+            </div>
+            <div className="history-loading-block">
+              <div className="skeleton-shimmer skeleton-line" style={{ width: '90%' }} />
+              <div className="skeleton-shimmer skeleton-line" style={{ width: '55%' }} />
+              <div className="skeleton-shimmer skeleton-line" style={{ width: '68%' }} />
+              <div className="skeleton-shimmer skeleton-line" style={{ width: '40%' }} />
+            </div>
+            <div className="history-loading-header">
+              <div className="skeleton-shimmer skeleton-avatar" />
+              <div className="skeleton-shimmer skeleton-line" style={{ width: '50%' }} />
+            </div>
+            <div className="history-loading-block">
+              <div className="skeleton-shimmer skeleton-line" style={{ width: '75%' }} />
+              <div className="skeleton-shimmer skeleton-line" style={{ width: '60%' }} />
+            </div>
+            <p className="history-loading-text">Loading conversation history…</p>
+          </div>
+        ) : chat.showWelcome ? (
           <WelcomeScreen onQuickPrompt={chat.sendMessage} />
         ) : (
           <MessageList
@@ -52,7 +82,6 @@ export default function ChatContainer() {
             isStreaming={chat.isStreaming}
             onRetry={async () => {
               try {
-                // To retry, we ping health and maybe trigger a status update
                 await fetch('/api/v1/health');
                 window.location.reload(); 
               } catch { /* ignore */ }
@@ -72,6 +101,12 @@ export default function ChatContainer() {
         isLoadingAgents={chat.isLoadingAgents}
         onFetchAgents={chat.fetchAgentList}
         onSwitchAgent={chat.switchAgent}
+        onToggleArtifacts={chat.toggleArtifactPanel}
+        artifactCount={chat.artifactFiles.length}
+        artifactPanelOpen={chat.artifactPanelOpen}
+        onToggleChanges={chat.toggleChangesPanel}
+        changesCount={chat.changeFiles.length}
+        changesPanelOpen={chat.changesPanelOpen}
       />
 
       <ArtifactPanel
@@ -80,6 +115,12 @@ export default function ChatContainer() {
         activeConversation={chat.activeConversation}
         files={chat.artifactFiles}
       />
+
+      <ChangesPanel
+        open={chat.changesPanelOpen}
+        onClose={chat.toggleChangesPanel}
+        changes={chat.changeFiles}
+      />
     </div>
   );
 }

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

@@ -18,11 +18,19 @@ interface ChatInputProps {
   isLoadingAgents: boolean;
   onFetchAgents: () => void;
   onSwitchAgent: (agentName: string) => void;
+  onToggleArtifacts: () => void;
+  artifactCount: number;
+  artifactPanelOpen: boolean;
+  onToggleChanges: () => void;
+  changesCount: number;
+  changesPanelOpen: boolean;
 }
 
 export default function ChatInput({
   onSend, isStreaming, currentMode, onToggleMode,
   currentAgent, agents, isLoadingAgents, onFetchAgents, onSwitchAgent,
+  onToggleArtifacts, artifactCount, artifactPanelOpen,
+  onToggleChanges, changesCount, changesPanelOpen,
 }: ChatInputProps) {
   const [value, setValue] = useState('');
   const [agentDropdownOpen, setAgentDropdownOpen] = useState(false);
@@ -166,6 +174,42 @@ export default function ChatInput({
           <span className="mode-label">{currentMode === 'planning' ? 'Plan' : 'Fast'}</span>
         </button>
 
+        {/* Artifacts Toggle */}
+        <button
+          className={`artifact-toggle-btn ${artifactPanelOpen ? 'active' : ''}`}
+          onClick={onToggleArtifacts}
+          title={`Artifacts${artifactCount > 0 ? ` (${artifactCount})` : ''}`}
+          aria-label="Toggle artifacts panel"
+          type="button"
+        >
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+            <polyline points="14 2 14 8 20 8" />
+            <line x1="16" y1="13" x2="8" y2="13" />
+            <line x1="16" y1="17" x2="8" y2="17" />
+          </svg>
+          {artifactCount > 0 && (
+            <span className="artifact-badge">{artifactCount}</span>
+          )}
+        </button>
+
+        {/* Changes Overview Toggle */}
+        <button
+          className={`changes-toggle-btn ${changesPanelOpen ? 'active' : ''}`}
+          onClick={onToggleChanges}
+          title={`Changes${changesCount > 0 ? ` (${changesCount})` : ''}`}
+          aria-label="Toggle changes panel"
+          type="button"
+        >
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <path d="M12 20h9" />
+            <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" />
+          </svg>
+          {changesCount > 0 && (
+            <span className="changes-badge">{changesCount}</span>
+          )}
+        </button>
+
         <span className="toolbar-agent-name" id="model-info">{currentAgent || ''}</span>
       </div>
 

package/.next/standalone/components/header.tsx

@@ -15,7 +15,6 @@ interface HeaderProps {
   onSelectWindow: (idx: number) => void;
   onSelectConversation: (id: string) => void;
   onNewChat: () => void;
-  onToggleArtifacts: () => void;
   onStartCdp: (projectDir?: string, killExisting?: boolean) => Promise<any>;
   onOpenWindow: (projectDir: string) => Promise<any>;
   onCloseWindow: (index: number) => Promise<any>;
@@ -23,7 +22,7 @@ interface HeaderProps {
 
 export default function Header({
   statusState, statusText, windows, conversations, activeConversation,
-  cdpStatus, recentProjects, onSelectWindow, onSelectConversation, onNewChat, onToggleArtifacts,
+  cdpStatus, recentProjects, onSelectWindow, onSelectConversation, onNewChat,
   onStartCdp, onOpenWindow, onCloseWindow,
 }: HeaderProps) {
   const [windowOpen, setWindowOpen] = useState(false);
@@ -282,17 +281,6 @@ export default function Header({
           </div>
         </div>
 
-        {/* Artifacts Button */}
-        <button className="icon-btn" onClick={onToggleArtifacts} title="Artifacts" aria-label="Artifacts">
-          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
-            <polyline points="14 2 14 8 20 8" />
-            <line x1="16" y1="13" x2="8" y2="13" />
-            <line x1="16" y1="17" x2="8" y2="17" />
-            <polyline points="10 9 9 9 8 9" />
-          </svg>
-        </button>
-
         {/* New Chat Button */}
         <button className="icon-btn" onClick={onNewChat} title="New Chat" aria-label="New Chat">
           <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">

package/.next/standalone/hooks/use-changes.ts

@@ -0,0 +1,61 @@
+import { useState, useCallback, useEffect, useRef } from 'react';
+import type { ChangeFile } from '@/lib/types';
+
+const API_BASE = '/api/v1';
+const POLL_INTERVAL_MS = 5000;
+
+/**
+ * Hook for fetching and managing the "Changes Overview" data
+ * scraped from the IDE's conversation panel.
+ */
+export function useChanges() {
+  const [changeFiles, setChangeFiles] = useState<ChangeFile[]>([]);
+  const [changesPanelOpen, setChangesPanelOpen] = useState(false);
+
+  const lastHashRef = useRef('');
+  const pollingRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  const loadChanges = useCallback(async () => {
+    try {
+      const res = await fetch(`${API_BASE}/changes/active`);
+      const data = await res.json();
+      const changes: ChangeFile[] = data.changes || [];
+
+      const newHash = JSON.stringify(changes.map(c => `${c.filename}+${c.additions}-${c.deletions}`));
+      if (newHash !== lastHashRef.current) {
+        lastHashRef.current = newHash;
+        setChangeFiles(changes);
+      }
+    } catch { /* ignore */ }
+  }, []);
+
+  const toggleChangesPanel = useCallback(() => {
+    setChangesPanelOpen(prev => !prev);
+  }, []);
+
+  // Poll when panel is open
+  useEffect(() => {
+    if (changesPanelOpen) {
+      loadChanges();
+      pollingRef.current = setInterval(loadChanges, POLL_INTERVAL_MS);
+    } else {
+      if (pollingRef.current) {
+        clearInterval(pollingRef.current);
+        pollingRef.current = null;
+      }
+    }
+    return () => {
+      if (pollingRef.current) {
+        clearInterval(pollingRef.current);
+        pollingRef.current = null;
+      }
+    };
+  }, [changesPanelOpen, loadChanges]);
+
+  return {
+    changeFiles,
+    changesPanelOpen,
+    toggleChangesPanel,
+    loadChanges,
+  };
+}

package/.next/standalone/hooks/use-chat.ts

@@ -3,6 +3,7 @@
 import { useState, useRef, useCallback, useEffect } from 'react';
 import { useConversations } from './use-conversations';
 import { useArtifacts } from './use-artifacts';
+import { useChanges } from './use-changes';
 import type { ChatMessage, SSEStep } from '@/lib/types';
 
 const API_BASE = '/api/v1';
@@ -14,6 +15,7 @@ export function useChat() {
   const [statusText, setStatusText] = useState('Agent');
   const [statusState, setStatusState] = useState('connected');
   const [showWelcome, setShowWelcome] = useState(true);
+  const [isLoadingHistory, setIsLoadingHistory] = useState(false);
   const [currentSteps, setCurrentSteps] = useState<SSEStep[]>([]);
   const [currentResponse, setCurrentResponse] = useState('');
   const [currentMode, setCurrentMode] = useState<'planning' | 'fast'>('planning');
@@ -38,14 +40,20 @@ export function useChat() {
   }, []);
 
   const fetchHistory = useCallback(async () => {
+    setIsLoadingHistory(true);
+    setMessages([]); // Clear existing messages immediately
     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 })));
+      } else {
+        setShowWelcome(true);
       }
-    } catch { /* ignore */ }
+    } catch { /* ignore */ } finally {
+      setIsLoadingHistory(false);
+    }
   }, []);
 
   const {
@@ -56,11 +64,19 @@ export function useChat() {
     loadArtifacts
   } = useArtifacts();
 
+  const {
+    changeFiles,
+    changesPanelOpen,
+    toggleChangesPanel,
+    loadChanges,
+  } = useChanges();
+
   // Auto-open artifact panel and refresh files when a conversation switch completes
   const handleConversationSwitched = useCallback(() => {
     openArtifactPanel();
     loadArtifacts();
-  }, [openArtifactPanel, loadArtifacts]);
+    loadChanges();
+  }, [openArtifactPanel, loadArtifacts, loadChanges]);
 
   const {
     windows,
@@ -328,12 +344,14 @@ export function useChat() {
 
   return {
     messages, isStreaming, isConnected, statusText, statusState,
-    showWelcome, currentSteps, currentResponse, windows,
+    showWelcome, isLoadingHistory, currentSteps, currentResponse, windows,
     conversations, activeConversation, artifactFiles, artifactPanelOpen,
+    changeFiles, changesPanelOpen,
     currentMode, currentAgent, agents, isLoadingAgents,
     cdpStatus, recentProjects,
     sendMessage, startNewChat, approve, reject,
     selectWindow, selectConversation, toggleArtifactPanel, openArtifactPanel,
+    toggleChangesPanel,
     toggleMode, fetchAgentList, switchAgent,
     startCdpServer, openNewWindow, closeWindowByIndex,
     messagesEndRef, setShowWelcome,

package/.next/standalone/hooks/use-conversations.ts

@@ -105,17 +105,6 @@ export function useConversations(
     }
   }, [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`);
@@ -129,6 +118,25 @@ export function useConversations(
     } catch { /* ignore */ }
   }, []);
 
+  const selectWindow = useCallback(async (idx: number) => {
+    try {
+      // Clear current chat and show welcome while we load the new window's history
+      setShowWelcome(true);
+      await fetch(`${API_BASE}/windows/select`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ index: idx }),
+      });
+      await loadWindows();
+      // Fetch the new window's chat history
+      await fetchHistory();
+      // Refresh conversations list for the new window
+      await loadConversations();
+      // Notify parent (for artifact sync etc.)
+      onConversationSwitched?.();
+    } catch { /* ignore */ }
+  }, [loadWindows, fetchHistory, setShowWelcome, loadConversations, onConversationSwitched]);
+
   const selectConversation = useCallback(async (title: string) => {
     try {
       const res = await fetch(`${API_BASE}/conversations/select`, {