antigravity-mobile-proxy 0.1.6 → 0.1.7

package/.next/standalone/app/globals.css

@@ -75,6 +75,69 @@ html, body {
 @keyframes hitlSlideIn { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
 @keyframes typingBounce { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } }
 @keyframes wm-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+@keyframes shimmer {
+  0% { background-position: -300px 0; }
+  100% { background-position: 300px 0; }
+}
+@keyframes historyFadeIn {
+  from { opacity: 0; transform: translateY(16px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* ── History Loading Skeleton ── */
+.history-loading {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  padding: 20px 10px;
+  animation: historyFadeIn 0.4s ease-out;
+  max-width: 100%;
+}
+.history-loading-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.history-loading-header.right {
+  justify-content: flex-end;
+}
+.history-loading-block {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 14px;
+  border-radius: var(--radius-md);
+  background: var(--agent-bubble);
+  border: 1px solid var(--border-subtle);
+}
+.skeleton-shimmer {
+  background: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0.03) 0%,
+    rgba(255, 255, 255, 0.08) 40%,
+    rgba(255, 255, 255, 0.03) 80%
+  );
+  background-size: 300px 100%;
+  animation: shimmer 1.6s ease-in-out infinite;
+  border-radius: 6px;
+}
+.skeleton-avatar {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.skeleton-line {
+  height: 12px;
+  border-radius: 6px;
+}
+.history-loading-text {
+  text-align: center;
+  font-size: 12px;
+  color: var(--text-muted);
+  padding-top: 8px;
+  animation: pulse-dot 2s ease-in-out infinite;
+}
 
 /* ══════════════════════════════════════════════
    MOBILE-FIRST BASE STYLES (< 480px)
@@ -594,6 +657,360 @@ html, body {
 .mode-icon { font-size: 12px; line-height: 1; }
 .mode-label { font-weight: 500; letter-spacing: 0.02em; }
 
+/* ── Artifact Toggle Button (Input Toolbar) ── */
+.artifact-toggle-btn {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-xl);
+  background: var(--bg-secondary);
+  color: var(--text-secondary);
+  font-family: inherit;
+  font-size: 11px;
+  cursor: pointer;
+  transition: all var(--transition-smooth);
+  flex-shrink: 0;
+  white-space: nowrap;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  min-height: 32px;
+  position: relative;
+}
+.artifact-toggle-btn:hover {
+  border-color: var(--border-active);
+  color: var(--text-primary);
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+.artifact-toggle-btn:active { transform: scale(0.95); }
+.artifact-toggle-btn.active {
+  border-color: rgba(168, 85, 247, 0.4);
+  background: rgba(168, 85, 247, 0.1);
+  color: #c4b5fd;
+}
+.artifact-toggle-btn.active:hover {
+  border-color: rgba(168, 85, 247, 0.6);
+  background: rgba(168, 85, 247, 0.18);
+  color: #ddd6fe;
+}
+.artifact-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  border-radius: 99px;
+  background: rgba(168, 85, 247, 0.25);
+  color: #c4b5fd;
+  font-size: 9px;
+  font-weight: 700;
+  font-family: 'JetBrains Mono', monospace;
+  line-height: 1;
+}
+.artifact-toggle-btn.active .artifact-badge {
+  background: rgba(168, 85, 247, 0.35);
+  color: #e9d5ff;
+}
+
+/* ── Changes Toggle Button (Input Toolbar) ── */
+.changes-toggle-btn {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-xl);
+  background: var(--bg-secondary);
+  color: var(--text-secondary);
+  font-family: inherit;
+  font-size: 11px;
+  cursor: pointer;
+  transition: all var(--transition-smooth);
+  flex-shrink: 0;
+  white-space: nowrap;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  min-height: 32px;
+  position: relative;
+}
+.changes-toggle-btn:hover {
+  border-color: var(--border-active);
+  color: var(--text-primary);
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+.changes-toggle-btn:active { transform: scale(0.95); }
+.changes-toggle-btn.active {
+  border-color: rgba(52, 211, 153, 0.4);
+  background: rgba(52, 211, 153, 0.1);
+  color: #6ee7b7;
+}
+.changes-toggle-btn.active:hover {
+  border-color: rgba(52, 211, 153, 0.6);
+  background: rgba(52, 211, 153, 0.18);
+  color: #a7f3d0;
+}
+.changes-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  border-radius: 99px;
+  background: rgba(52, 211, 153, 0.25);
+  color: #6ee7b7;
+  font-size: 9px;
+  font-weight: 700;
+  font-family: 'JetBrains Mono', monospace;
+  line-height: 1;
+}
+.changes-toggle-btn.active .changes-badge {
+  background: rgba(52, 211, 153, 0.35);
+  color: #a7f3d0;
+}
+
+/* ── Changes Panel ── */
+.changes-panel {
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--bg-primary);
+  z-index: 150;
+  transform: translateX(100%);
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.changes-panel.open { transform: translateX(0); }
+.changes-panel-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 14px 12px;
+  border-bottom: 1px solid var(--border-subtle);
+  background: var(--bg-secondary);
+  flex-shrink: 0;
+}
+.changes-panel-header h3 {
+  font-size: 15px;
+  font-weight: 600;
+  margin: 0;
+  color: var(--text-primary);
+}
+.changes-summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--border-subtle);
+  background: rgba(52, 211, 153, 0.04);
+}
+.changes-count {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-primary);
+  font-family: 'JetBrains Mono', monospace;
+}
+.changes-stats {
+  display: flex;
+  gap: 8px;
+}
+.changes-additions {
+  color: var(--success);
+  font-size: 11px;
+  font-weight: 700;
+  font-family: 'JetBrains Mono', monospace;
+}
+.changes-deletions {
+  color: var(--error);
+  font-size: 11px;
+  font-weight: 700;
+  font-family: 'JetBrains Mono', monospace;
+}
+.changes-file-list {
+  flex: 1;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.changes-file-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-subtle);
+  border-radius: 6px;
+  min-height: 48px;
+  transition: all 0.2s ease;
+  cursor: pointer;
+  text-align: left;
+  font-family: inherit;
+  width: 100%;
+  -webkit-tap-highlight-color: transparent;
+}
+.changes-file-item:hover { border-color: var(--border-active); background: var(--bg-hover); }
+.changes-file-item:active { transform: scale(0.98); }
+.changes-file-icon { flex-shrink: 0; font-size: 14px; }
+.changes-file-info { flex: 1; min-width: 0; overflow: hidden; }
+.changes-file-name {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.changes-file-path {
+  font-size: 10px;
+  color: var(--text-muted);
+  font-family: 'JetBrains Mono', monospace;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.changes-file-diff {
+  display: flex;
+  gap: 6px;
+  flex-shrink: 0;
+}
+
+/* ── Diff Viewer ── */
+.diff-viewer {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+.diff-viewer-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--border-subtle);
+  background: var(--bg-tertiary);
+  flex-shrink: 0;
+  overflow: hidden;
+}
+.diff-back-btn {
+  background: none;
+  border: none;
+  color: var(--accent-primary);
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 500;
+  padding: 2px 6px;
+  border-radius: 4px;
+  flex-shrink: 0;
+}
+.diff-back-btn:hover { background: rgba(99, 102, 241, 0.1); }
+.diff-viewer-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+  flex-shrink: 0;
+}
+.diff-viewer-path {
+  font-size: 10px;
+  font-family: 'JetBrains Mono', monospace;
+  color: var(--text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.diff-viewer-body {
+  flex: 1;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+.diff-lines {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 11px;
+  line-height: 1.65;
+}
+.diff-line {
+  display: flex;
+  padding: 0 8px;
+  border-bottom: 1px solid transparent;
+  min-height: 20px;
+}
+.diff-line-num {
+  flex-shrink: 0;
+  width: 40px;
+  text-align: right;
+  padding-right: 8px;
+  color: var(--text-muted);
+  opacity: 0.5;
+  user-select: none;
+}
+.diff-line-indicator {
+  flex-shrink: 0;
+  width: 16px;
+  text-align: center;
+  font-weight: 700;
+  user-select: none;
+}
+.diff-line-content {
+  flex: 1;
+  white-space: pre-wrap;
+  word-break: break-all;
+  min-width: 0;
+}
+
+/* Line types */
+.diff-line-add {
+  background: rgba(52, 211, 153, 0.08);
+}
+.diff-line-add .diff-line-indicator {
+  color: #34d399;
+}
+.diff-line-add .diff-line-content {
+  color: #a7f3d0;
+}
+.diff-line-del {
+  background: rgba(248, 113, 113, 0.08);
+}
+.diff-line-del .diff-line-indicator {
+  color: #f87171;
+}
+.diff-line-del .diff-line-content {
+  color: #fca5a5;
+}
+.diff-line-context .diff-line-content {
+  color: var(--text-secondary);
+}
+.diff-line-header {
+  background: rgba(99, 102, 241, 0.06);
+  border-bottom: 1px solid var(--border-subtle);
+  padding: 4px 8px;
+  margin-top: 4px;
+}
+.diff-line-header .diff-line-indicator {
+  color: var(--accent-primary);
+}
+.diff-line-header .diff-line-content {
+  color: var(--accent-primary);
+  font-weight: 500;
+}
+.diff-line-meta {
+  background: rgba(100, 100, 120, 0.04);
+  padding: 2px 8px;
+}
+.diff-line-meta .diff-line-content {
+  color: var(--text-muted);
+  font-style: italic;
+}
+
 /* ── Agent Selector ── */
 .agent-selector-wrapper {
   position: relative;
@@ -1090,6 +1507,13 @@ html, body {
 }
 .artifact-file-item:hover { border-color: var(--accent-primary); background: var(--bg-hover); }
 .artifact-file-item:active { transform: scale(0.98); }
+.artifact-file-item.non-file {
+  cursor: default;
+  opacity: 0.6;
+  border-style: dashed;
+}
+.artifact-file-item.non-file:hover { border-color: var(--border-subtle); background: var(--bg-tertiary); }
+.artifact-file-item.non-file:active { transform: none; }
 .artifact-file-icon { color: var(--accent-primary); flex-shrink: 0; }
 .artifact-file-name { font-size: 13px; font-weight: 500; color: var(--text-primary); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .artifact-file-size { font-size: 10px; font-family: 'JetBrains Mono', monospace; color: var(--text-muted); }

package/.next/standalone/app/layout.tsx

@@ -1,4 +1,4 @@
-import type { Metadata } from 'next';
+import type { Metadata, Viewport } from 'next';
 import './globals.css';
 
 export const dynamic = 'force-dynamic';
@@ -8,11 +8,10 @@ export const metadata: Metadata = {
   description: 'Chat with the Antigravity AI Agent from any browser',
 };
 
-export const viewport = {
+export const viewport: Viewport = {
   width: 'device-width',
   initialScale: 1,
   maximumScale: 1,
-  viewportFit: 'cover' as const,
   themeColor: '#0a0a0f',
 };
 
@@ -24,6 +23,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
           href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
           rel="stylesheet"
         />
+        <meta name="viewport" content="viewport-fit=cover" />
         <meta name="apple-mobile-web-app-capable" content="yes" />
         <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
       </head>

package/.next/standalone/app/not-found.tsx

@@ -1,27 +1,18 @@
-import type { Metadata } from 'next';
-
-export const metadata: Metadata = {
-  title: '404 - Page Not Found',
-  description: 'The page you are looking for does not exist.',
-};
-
 export default function GlobalNotFound() {
   return (
-    <html lang="en">
-      <body style={{
-        display: 'flex',
-        flexDirection: 'column' as const,
-        alignItems: 'center',
-        justifyContent: 'center',
-        height: '100vh',
-        backgroundColor: '#0a0a0f',
-        color: '#888',
-        fontFamily: 'system-ui, sans-serif',
-        margin: 0,
-      }}>
-        <h1 style={{ fontSize: '3rem', margin: 0, color: '#fff' }}>404</h1>
-        <p style={{ fontSize: '1.1rem', marginTop: '0.5rem' }}>Page not found</p>
-      </body>
-    </html>
+    <div style={{
+      display: 'flex',
+      flexDirection: 'column' as const,
+      alignItems: 'center',
+      justifyContent: 'center',
+      height: '100vh',
+      backgroundColor: '#0a0a0f',
+      color: '#888',
+      fontFamily: 'system-ui, sans-serif',
+      margin: 0,
+    }}>
+      <h1 style={{ fontSize: '3rem', margin: 0, color: '#fff' }}>404</h1>
+      <p style={{ fontSize: '1.1rem', marginTop: '0.5rem' }}>Page not found</p>
+    </div>
   );
 }

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

@@ -16,22 +16,35 @@ export default function ArtifactPanel({ open, onClose, activeConversation, files
   const [loading, setLoading] = useState(false);
 
   const formatSize = (bytes: number) => {
+    if (bytes <= 0) return '';
     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();
+    // Handle ISO dates
+    if (mtime.includes('T') || mtime.includes('-')) {
+      const d = new Date(mtime);
+      if (!isNaN(d.getTime())) {
+        return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) + ' · ' + d.toLocaleDateString();
+      }
+    }
+    // Already formatted (e.g., "Mar 10 11:21 PM") — pass through
+    return mtime;
   };
 
+  /** Open a file artifact (only for actual files with extensions) */
   const openFile = async (fileName: string) => {
-    if (!activeConversation) return;
     setLoading(true);
     setViewingFile(fileName);
     try {
       const res = await fetch(`/api/v1/artifacts/active/${encodeURIComponent(fileName)}`);
+      if (!res.ok) {
+        const errorData = await res.json().catch(() => ({ error: 'Unknown error' }));
+        setFileContent(`Error: ${errorData.error || res.statusText}`);
+        return;
+      }
       const text = await res.text();
       setFileContent(text);
     } catch (e: any) {
@@ -41,12 +54,31 @@ export default function ArtifactPanel({ open, onClose, activeConversation, files
     }
   };
 
-  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 '📁';
+  const isOpenable = (f: ArtifactFile) => {
+    // A file is openable if it has a file extension
+    return f.isFile !== false && /\.\w{1,5}$/.test(f.name);
+  };
+
+  const fileIcon = (f: ArtifactFile) => {
+    if (isOpenable(f)) {
+      const name = f.name;
+      if (name.endsWith('.md')) return '📄';
+      if (name.endsWith('.json')) return '📋';
+      if (name.endsWith('.ts') || name.endsWith('.tsx')) return '📘';
+      if (name.endsWith('.css')) return '🎨';
+      if (name.endsWith('.js') || name.endsWith('.jsx')) return '📜';
+      return '📄';
+    }
+    // Non-file artifact (IDE-managed, like screenshots, images, etc.)
+    return '🖼️';
+  };
+
+  const handleItemClick = (f: ArtifactFile) => {
+    if (isOpenable(f)) {
+      openFile(f.name);
+    }
+    // Non-file artifacts can't be opened in the proxy
+    // They are IDE-managed (screenshots, images, etc.)
   };
 
   return (
@@ -69,7 +101,13 @@ export default function ArtifactPanel({ open, onClose, activeConversation, files
             {activeConversation.title || 'Untitled'}
           </div>
           <div style={{ fontSize: '10px', fontFamily: "'JetBrains Mono', monospace", color: 'var(--text-muted)' }}>
-            {files.length} file{files.length !== 1 ? 's' : ''}
+            {files.length} artifact{files.length !== 1 ? 's' : ''}
+          </div>
+        </div>
+      ) : files.length > 0 ? (
+        <div style={{ padding: '12px 16px', borderBottom: '1px solid var(--border-subtle)', background: 'rgba(99,102,241,0.04)' }}>
+          <div style={{ fontSize: '10px', fontFamily: "'JetBrains Mono', monospace", color: 'var(--text-muted)' }}>
+            {files.length} artifact{files.length !== 1 ? 's' : ''}
           </div>
         </div>
       ) : (
@@ -112,8 +150,14 @@ export default function ArtifactPanel({ open, onClose, activeConversation, files
       ) : (
         <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>
+            <button
+              key={f.name}
+              className={`artifact-file-item ${!isOpenable(f) ? 'non-file' : ''}`}
+              onClick={() => handleItemClick(f)}
+              disabled={!isOpenable(f)}
+              title={isOpenable(f) ? `Open ${f.name}` : `${f.name} (IDE artifact — view in Antigravity)`}
+            >
+              <span className="artifact-file-icon">{fileIcon(f)}</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>
@@ -121,7 +165,7 @@ export default function ArtifactPanel({ open, onClose, activeConversation, files
               <span className="artifact-file-size">{formatSize(f.size)}</span>
             </button>
           ))}
-          {files.length === 0 && activeConversation && (
+          {files.length === 0 && (
             <div style={{ textAlign: 'center', padding: '24px', color: 'var(--text-muted)', fontSize: '13px' }}>
               No artifacts in this conversation
             </div>