antigravity-chat-proxy 0.1.0

package/components/agent-message.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import type { SSEStep } from '@/lib/types';
+import ToolCallCard from './tool-call-card';
+import ThinkingBlock from './thinking-block';
+import HITLDialog from './hitl-dialog';
+import TypingIndicator from './typing-indicator';
+
+interface AgentMessageProps {
+  content: string;
+  steps: SSEStep[];
+  isStreaming: boolean;
+  onApprove: () => void;
+  onReject: () => void;
+  onRetry?: () => void;
+}
+
+export default function AgentMessage({ content, steps, isStreaming, onApprove, onReject, onRetry }: AgentMessageProps) {
+  return (
+    <div className={`agent-message ${isStreaming ? 'streaming' : ''}`}>
+      <div className="agent-steps">
+        {steps.map((step, i) => {
+          switch (step.type) {
+            case 'thinking':
+              return <ThinkingBlock key={`step-${i}`} time={step.data.time} />;
+            case 'tool_call':
+              return <ToolCallCard key={`step-${i}`} data={step.data} />;
+            case 'hitl':
+              return <HITLDialog key={`step-${i}`} onApprove={onApprove} onReject={onReject} />;
+            case 'file_change':
+              return (
+                <div key={`step-${i}`} className="file-change-indicator">
+                  <svg width="12" height="12" 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" />
+                  </svg>
+                  <span className="file-change-name">{step.data.fileName}</span>
+                </div>
+              );
+            case 'error':
+              return (
+                <div key={`step-${i}`} className="error-banner">
+                  <div style={{ marginBottom: !isStreaming && onRetry ? '8px' : '0' }}>⚠️ {String(step.data.message)}</div>
+                  {!isStreaming && onRetry && (
+                    <button className="px-3 py-1 bg-red-100 text-red-800 rounded hover:bg-red-200 transition-colors text-sm font-medium" onClick={onRetry}>Try Again</button>
+                  )}
+                </div>
+              );
+            case 'notification':
+              return null;
+            default:
+              return null;
+          }
+        })}
+        {isStreaming && <TypingIndicator />}
+      </div>
+
+      {content && (
+        <div className="agent-response" dangerouslySetInnerHTML={{ __html: content }} />
+      )}
+    </div>
+  );
+}

package/components/artifact-panel.tsx

@@ -0,0 +1,133 @@
+'use client';
+
+import { useState } from 'react';
+import type { ConversationInfo, ArtifactFile } from '@/lib/types';
+
+interface ArtifactPanelProps {
+  open: boolean;
+  onClose: () => void;
+  activeConversation: ConversationInfo | null;
+  files: ArtifactFile[];
+}
+
+export default function ArtifactPanel({ open, onClose, activeConversation, files }: ArtifactPanelProps) {
+  const [viewingFile, setViewingFile] = useState<string | null>(null);
+  const [fileContent, setFileContent] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const formatSize = (bytes: number) => {
+    if (bytes < 1024) return `${bytes}B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)}KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)}MB`;
+  };
+
+  const formatTime = (mtime: string) => {
+    const d = new Date(mtime);
+    return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) + ' · ' + d.toLocaleDateString();
+  };
+
+  const openFile = async (fileName: string) => {
+    if (!activeConversation) return;
+    setLoading(true);
+    setViewingFile(fileName);
+    try {
+      const res = await fetch(`/api/v1/artifacts/active/${encodeURIComponent(fileName)}`);
+      const text = await res.text();
+      setFileContent(text);
+    } catch (e: any) {
+      setFileContent(`Error loading file: ${e.message}`);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const fileIcon = (name: string) => {
+    if (name.endsWith('.md')) return '📄';
+    if (name.endsWith('.json')) return '📋';
+    if (name.endsWith('.ts') || name.endsWith('.tsx')) return '📘';
+    if (name.endsWith('.css')) return '🎨';
+    return '📁';
+  };
+
+  return (
+    <div className={`artifact-panel ${open ? 'open' : ''}`}>
+      {/* Header */}
+      <div className="artifact-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>Artifacts</h3>
+      </div>
+
+      {/* Active conversation banner */}
+      {activeConversation ? (
+        <div style={{ padding: '12px 16px', borderBottom: '1px solid var(--border-subtle)', background: 'rgba(99,102,241,0.04)' }}>
+          <div style={{ fontSize: '13px', fontWeight: 600, color: 'var(--text-primary)', marginBottom: '2px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+            {activeConversation.title || 'Untitled'}
+          </div>
+          <div style={{ fontSize: '10px', fontFamily: "'JetBrains Mono', monospace", color: 'var(--text-muted)' }}>
+            {files.length} file{files.length !== 1 ? 's' : ''}
+          </div>
+        </div>
+      ) : (
+        <div style={{ padding: '24px 16px', textAlign: 'center', color: 'var(--text-muted)', fontSize: '13px' }}>
+          No active conversation
+        </div>
+      )}
+
+      {/* File viewer or file list */}
+      {viewingFile ? (
+        <div className="artifact-viewer">
+          <div className="artifact-viewer-header">
+            <button className="artifact-back-btn" onClick={() => { setViewingFile(null); setFileContent(''); }}>
+              ← Back
+            </button>
+            <span className="artifact-viewer-title">{viewingFile}</span>
+          </div>
+          <div className="artifact-viewer-body">
+            {loading ? (
+              <div style={{ color: 'var(--text-muted)', padding: '16px' }}>Loading...</div>
+            ) : viewingFile.endsWith('.md') ? (
+              <div className="agent-response" dangerouslySetInnerHTML={{
+                __html: fileContent
+                  .replace(/^### (.*$)/gim, '<h3>$1</h3>')
+                  .replace(/^## (.*$)/gim, '<h2>$1</h2>')
+                  .replace(/^# (.*$)/gim, '<h1>$1</h1>')
+                  .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+                  .replace(/`([^`]+)`/g, '<code>$1</code>')
+                  .replace(/^- (.*$)/gim, '<li>$1</li>')
+                  .replace(/\n\n/g, '</p><p>')
+                  .replace(/\n/g, '<br/>')
+              }} />
+            ) : (
+              <pre style={{ margin: 0, fontSize: '12px', lineHeight: 1.6, color: 'var(--text-secondary)', fontFamily: "'JetBrains Mono', monospace", whiteSpace: 'pre-wrap', wordBreak: 'break-all' }}>
+                {fileContent}
+              </pre>
+            )}
+          </div>
+        </div>
+      ) : (
+        <div className="artifact-file-list">
+          {files.map(f => (
+            <button key={f.name} className="artifact-file-item" onClick={() => openFile(f.name)}>
+              <span className="artifact-file-icon">{fileIcon(f.name)}</span>
+              <div style={{ flex: 1, overflow: 'hidden' }}>
+                <div className="artifact-file-name">{f.name}</div>
+                <div style={{ fontSize: '10px', color: 'var(--text-muted)' }}>{formatTime(f.mtime)}</div>
+              </div>
+              <span className="artifact-file-size">{formatSize(f.size)}</span>
+            </button>
+          ))}
+          {files.length === 0 && activeConversation && (
+            <div style={{ textAlign: 'center', padding: '24px', color: 'var(--text-muted)', fontSize: '13px' }}>
+              No artifacts in this conversation
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/components/chat-container.tsx

@@ -0,0 +1,82 @@
+'use client';
+
+import { useChat } from '@/hooks/use-chat';
+import Header from '@/components/header';
+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 { useEffect } from 'react';
+
+export default function ChatContainer() {
+  const chat = useChat();
+
+  useEffect(() => {
+    const handleGlobalKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'n' && (e.ctrlKey || e.metaKey)) {
+        e.preventDefault();
+        chat.startNewChat();
+      }
+    };
+    window.addEventListener('keydown', handleGlobalKeyDown);
+    return () => window.removeEventListener('keydown', handleGlobalKeyDown);
+  }, [chat]);
+
+  return (
+    <div className="app-container">
+      <Header
+        statusState={chat.statusState}
+        statusText={chat.statusText}
+        windows={chat.windows}
+        conversations={chat.conversations}
+        activeConversation={chat.activeConversation}
+        cdpStatus={chat.cdpStatus}
+        recentProjects={chat.recentProjects}
+        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 ? (
+          <WelcomeScreen onQuickPrompt={chat.sendMessage} />
+        ) : (
+          <MessageList
+            messages={chat.messages}
+            currentSteps={chat.currentSteps}
+            currentResponse={chat.currentResponse}
+            isStreaming={chat.isStreaming}
+            onApprove={chat.approve}
+            onReject={chat.reject}
+            onRetry={async () => {
+              try {
+                // To retry, we ping health and maybe trigger a status update
+                await fetch('/api/v1/health');
+                window.location.reload(); 
+              } catch { /* ignore */ }
+            }}
+          />
+        )}
+        <div ref={chat.messagesEndRef} />
+      </main>
+
+      <ChatInput
+        onSend={chat.sendMessage}
+        isStreaming={chat.isStreaming}
+        currentMode={chat.currentMode}
+        onToggleMode={chat.toggleMode}
+      />
+
+      <ArtifactPanel
+        open={chat.artifactPanelOpen}
+        onClose={chat.toggleArtifactPanel}
+        activeConversation={chat.activeConversation}
+        files={chat.artifactFiles}
+      />
+    </div>
+  );
+}

package/components/chat-input.tsx

@@ -0,0 +1,92 @@
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+
+interface ChatInputProps {
+  onSend: (text: string) => void;
+  isStreaming: boolean;
+  currentMode: 'planning' | 'fast';
+  onToggleMode: () => void;
+}
+
+export default function ChatInput({ onSend, isStreaming, currentMode, onToggleMode }: ChatInputProps) {
+  const [value, setValue] = useState('');
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  const handleInput = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setValue(e.target.value);
+    const el = e.target;
+    el.style.height = 'auto';
+    el.style.height = Math.min(el.scrollHeight, 150) + 'px';
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter' && (!e.shiftKey || e.ctrlKey || e.metaKey)) {
+      e.preventDefault();
+      if (!isStreaming && value.trim()) {
+        onSend(value);
+        setValue('');
+        if (textareaRef.current) {
+          textareaRef.current.style.height = 'auto';
+        }
+      }
+    }
+  };
+
+  const handleSend = () => {
+    if (!isStreaming && value.trim()) {
+      onSend(value);
+      setValue('');
+      if (textareaRef.current) {
+        textareaRef.current.style.height = 'auto';
+      }
+    }
+  };
+
+  useEffect(() => {
+    textareaRef.current?.focus();
+  }, []);
+
+  return (
+    <footer className="input-area">
+      <div className="input-wrapper">
+        <button
+          className={`mode-toggle ${currentMode}`}
+          onClick={onToggleMode}
+          title={`Mode: ${currentMode === 'planning' ? 'Planning' : 'Fast'} — Click to switch`}
+          aria-label={`Switch mode (currently ${currentMode})`}
+          type="button"
+        >
+          <span className="mode-icon">{currentMode === 'planning' ? '📋' : '⚡'}</span>
+          <span className="mode-label">{currentMode === 'planning' ? 'Plan' : 'Fast'}</span>
+        </button>
+        <textarea
+          ref={textareaRef}
+          value={value}
+          onChange={handleInput}
+          onKeyDown={handleKeyDown}
+          placeholder="Ask the Antigravity agent..."
+          rows={1}
+          aria-label="Chat message input"
+          enterKeyHint="send"
+          autoComplete="off"
+        />
+        <button
+          className="send-btn"
+          onClick={handleSend}
+          disabled={isStreaming || !value.trim()}
+          aria-label="Send message"
+        >
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <line x1="22" y1="2" x2="11" y2="13" />
+            <polygon points="22 2 15 22 11 13 2 9 22 2" />
+          </svg>
+        </button>
+      </div>
+      <div className="input-hint">
+        <span>Enter to send · Shift+Enter for new line · Ctrl+N for new chat</span>
+        <span id="model-info"></span>
+      </div>
+    </footer>
+  );
+}

package/components/conversation-selector.tsx

@@ -0,0 +1,97 @@
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+import type { ConversationInfo } from '@/lib/types';
+
+interface ConversationSelectorProps {
+  conversations: ConversationInfo[];
+  activeConversation: ConversationInfo | null;
+  onSelect: (title: string) => void;
+}
+
+function formatRelativeTime(dateStr?: string) {
+  if (!dateStr) return '';
+  const date = new Date(dateStr);
+  const diff = Date.now() - date.getTime();
+  const minutes = Math.floor(diff / 60000);
+  if (minutes < 1) return 'Just now';
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  return `${days}d ago`;
+}
+
+export default function ConversationSelector({ conversations, activeConversation, onSelect }: ConversationSelectorProps) {
+  const [open, setOpen] = useState(false);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      if (wrapperRef.current && !wrapperRef.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, []);
+
+  return (
+    <div ref={wrapperRef} className={`conv-selector-wrapper ${open ? 'open' : ''}`}>
+      <button className="conv-selector-btn" onClick={() => setOpen(!open)} title="Switch conversation">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+        </svg>
+        <span>{activeConversation?.title?.substring(0, 22) || 'No conversation'}</span>
+        <svg className="chevron" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+          <polyline points="6 9 12 15 18 9" />
+        </svg>
+      </button>
+
+      <div className={`conv-dropdown ${open ? 'open' : ''}`}>
+        <div className="conv-dropdown-header">Conversations</div>
+        <div className="conv-dropdown-list">
+          {conversations.map((c, i) => {
+            const displayTitle = c.title || c.id.substring(0, 20) + '…';
+            const displayId = c.id && c.id.length > 5 ? c.id.substring(0, 8) : '';
+            const topFiles = c.files?.slice(0, 3) || [];
+            const remainingCount = c.files ? c.files.length - 3 : 0;
+            
+            return (
+              <button
+                key={`conv-${i}`}
+                className={`conv-item ${c.title === activeConversation?.title ? 'active' : ''}`}
+                onClick={() => {
+                  if (c.title !== activeConversation?.title) {
+                    onSelect(c.title);
+                  }
+                  setOpen(false);
+                }}
+              >
+                <div className="conv-item-header">
+                  <span className={`conv-item-dot ${c.active ? 'active' : ''}`} />
+                  <span className="conv-item-title">{displayTitle}</span>
+                  {displayId && <span className="conv-item-id">{displayId}</span>}
+                </div>
+                {c.mtime && <span className="conv-item-time">{formatRelativeTime(c.mtime)}</span>}
+                {c.files && c.files.length > 0 && (
+                  <div className="conv-item-files">
+                    {topFiles.map((f, fi) => (
+                      <span key={fi} className="conv-item-file-badge">{f.name}</span>
+                    ))}
+                    {remainingCount > 0 && (
+                      <span className="conv-item-file-badge">+{remainingCount}</span>
+                    )}
+                  </div>
+                )}
+              </button>
+            );
+          })}
+          {conversations.length === 0 && (
+            <div className="conv-dropdown-empty">No conversations found</div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}