antigravity-chat-proxy 0.1.0

package/components/header.tsx

@@ -0,0 +1,302 @@
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+import type { WindowInfo, ConversationInfo } from '@/lib/types';
+import type { CdpStatus, RecentProject } from '@/hooks/use-conversations';
+import ConversationSelector from './conversation-selector';
+
+interface HeaderProps {
+  statusState: string;
+  statusText: string;
+  windows: WindowInfo[];
+  conversations: ConversationInfo[];
+  activeConversation: ConversationInfo | null;
+  cdpStatus: CdpStatus;
+  recentProjects: RecentProject[];
+  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>;
+}
+
+export default function Header({
+  statusState, statusText, windows, conversations, activeConversation,
+  cdpStatus, recentProjects, onSelectWindow, onSelectConversation, onNewChat, onToggleArtifacts,
+  onStartCdp, onOpenWindow, onCloseWindow,
+}: HeaderProps) {
+  const [windowOpen, setWindowOpen] = useState(false);
+  const [newDirPath, setNewDirPath] = useState('');
+  const [isOpening, setIsOpening] = useState(false);
+  const [isStartingCdp, setIsStartingCdp] = useState(false);
+  const [actionMessage, setActionMessage] = useState<{ text: string; type: 'success' | 'error' } | null>(null);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      if (wrapperRef.current && !wrapperRef.current.contains(e.target as Node)) {
+        setWindowOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, []);
+
+  // Clear action message after 4 seconds
+  useEffect(() => {
+    if (actionMessage) {
+      const t = setTimeout(() => setActionMessage(null), 4000);
+      return () => clearTimeout(t);
+    }
+  }, [actionMessage]);
+
+  const handleStartCdp = async () => {
+    setIsStartingCdp(true);
+    setActionMessage(null);
+    try {
+      const result = await onStartCdp('.', false);
+      setActionMessage({
+        text: result.message || (result.success ? 'CDP started!' : 'Failed to start CDP'),
+        type: result.success ? 'success' : 'error',
+      });
+    } catch {
+      setActionMessage({ text: 'Failed to start CDP server', type: 'error' });
+    } finally {
+      setIsStartingCdp(false);
+    }
+  };
+
+  const handleOpenWindow = async (e: React.FormEvent) => {
+    e.preventDefault();
+    const trimmed = newDirPath.trim();
+    if (!trimmed || isOpening) return;
+
+    setIsOpening(true);
+    setActionMessage(null);
+    try {
+      const result = await onOpenWindow(trimmed);
+      setActionMessage({
+        text: result.message || (result.success ? 'Window opened!' : 'Failed to open'),
+        type: result.success ? 'success' : 'error',
+      });
+      if (result.success) setNewDirPath('');
+    } catch {
+      setActionMessage({ text: 'Failed to open window', type: 'error' });
+    } finally {
+      setIsOpening(false);
+    }
+  };
+
+  const handleCloseWindow = async (idx: number, e: React.MouseEvent) => {
+    e.stopPropagation();
+    const confirmed = window.confirm(`Close window "${windows[idx]?.title || idx}"?`);
+    if (!confirmed) return;
+
+    const result = await onCloseWindow(idx);
+    setActionMessage({
+      text: result.message || (result.success ? 'Closed!' : 'Failed to close'),
+      type: result.success ? 'success' : 'error',
+    });
+  };
+
+  return (
+    <header className="header">
+      <div className="header-left">
+        <div className="logo">
+          <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="url(#header-gradient)" strokeWidth="1.5">
+            <defs>
+              <linearGradient id="header-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
+                <stop offset="0%" style={{ stopColor: '#6366f1' }} />
+                <stop offset="100%" style={{ stopColor: '#a855f7' }} />
+              </linearGradient>
+            </defs>
+            <circle cx="12" cy="12" r="10" />
+            <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
+            <line x1="2" y1="12" x2="22" y2="12" />
+          </svg>
+        </div>
+      </div>
+      <div className="header-right">
+        {/* Conversation Selector */}
+        <ConversationSelector
+          conversations={conversations}
+          activeConversation={activeConversation}
+          onSelect={onSelectConversation}
+        />
+
+        {/* Window Selector */}
+        <div ref={wrapperRef} className={`window-selector-wrapper ${windowOpen ? 'open' : ''}`}>
+          <button className="window-selector-btn" onClick={() => setWindowOpen(!windowOpen)} title="Manage Antigravity windows">
+            {/* CDP status indicator */}
+            <span className={`cdp-indicator ${cdpStatus.active ? 'active' : 'inactive'}`} />
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+              <rect x="2" y="3" width="20" height="14" rx="2" ry="2" />
+              <line x1="8" y1="21" x2="16" y2="21" />
+              <line x1="12" y1="17" x2="12" y2="21" />
+            </svg>
+            <span style={{ maxWidth: '120px', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', display: 'inline-block', verticalAlign: 'bottom' }}>
+              {windows.find(w => w.active)?.title || 'Windows'}
+            </span>
+            <svg className="chevron" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+              <polyline points="6 9 12 15 18 9" />
+            </svg>
+          </button>
+          <div className={`window-dropdown ${windowOpen ? 'open' : ''}`}>
+            {/* CDP Status Bar */}
+            <div className="wm-cdp-status">
+              <div className="wm-cdp-info">
+                <span className={`wm-cdp-dot ${cdpStatus.active ? 'active' : 'inactive'}`} />
+                <span>{cdpStatus.active ? `CDP Active · ${cdpStatus.windowCount} window${cdpStatus.windowCount !== 1 ? 's' : ''}` : 'CDP Inactive'}</span>
+              </div>
+              {!cdpStatus.active && (
+                <button
+                  className="wm-cdp-start-btn"
+                  onClick={handleStartCdp}
+                  disabled={isStartingCdp}
+                  title="Start Antigravity with CDP"
+                >
+                  {isStartingCdp ? (
+                    <span className="wm-spinner" />
+                  ) : (
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+                      <polygon points="5 3 19 12 5 21 5 3" />
+                    </svg>
+                  )}
+                  {isStartingCdp ? 'Starting...' : 'Start CDP'}
+                </button>
+              )}
+            </div>
+
+            {/* Window List */}
+            <div className="window-dropdown-header">
+              Open Windows
+            </div>
+            {windows.map(w => (
+              <div key={w.index} className={`window-item ${w.active ? 'active' : ''}`}>
+                <button
+                  className="window-item-select"
+                  onClick={() => { onSelectWindow(w.index); setWindowOpen(false); }}
+                >
+                  <span className="window-dot" />
+                  <span className="window-item-title">{w.title}</span>
+                </button>
+                <button
+                  className="window-item-close"
+                  onClick={(e) => handleCloseWindow(w.index, e)}
+                  title={`Close "${w.title}"`}
+                >
+                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+                    <line x1="18" y1="6" x2="6" y2="18" />
+                    <line x1="6" y1="6" x2="18" y2="18" />
+                  </svg>
+                </button>
+              </div>
+            ))}
+            {windows.length === 0 && (
+              <div style={{ padding: '12px', color: 'var(--text-muted)', fontSize: '12px' }}>
+                No windows detected
+              </div>
+            )}
+            {/* Recent Projects */}
+            {recentProjects.length > 0 && (
+              <div className="wm-recent-section">
+                <div className="wm-recent-header">Recent Projects</div>
+                {recentProjects.map(p => (
+                  <button
+                    key={p.path}
+                    className="wm-recent-item"
+                    onClick={async () => {
+                      setIsOpening(true);
+                      setActionMessage(null);
+                      try {
+                        const result = await onOpenWindow(p.path);
+                        setActionMessage({
+                          text: result.message || (result.success ? 'Opened!' : 'Failed'),
+                          type: result.success ? 'success' : 'error',
+                        });
+                      } catch {
+                        setActionMessage({ text: 'Failed to open', type: 'error' });
+                      } finally {
+                        setIsOpening(false);
+                      }
+                    }}
+                    disabled={isOpening}
+                    title={p.path}
+                  >
+                    <svg className="wm-recent-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                      <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
+                    </svg>
+                    <div className="wm-recent-info">
+                      <span className="wm-recent-name">{p.name}</span>
+                      <span className="wm-recent-path">{p.path}</span>
+                    </div>
+                  </button>
+                ))}
+              </div>
+            )}
+
+            {/* Open New Window */}
+            <div className="wm-open-section">
+              <div className="wm-open-label">Open New Window</div>
+              <form className="wm-open-form" onSubmit={handleOpenWindow}>
+                <input
+                  ref={inputRef}
+                  type="text"
+                  className="wm-open-input"
+                  value={newDirPath}
+                  onChange={(e) => setNewDirPath(e.target.value)}
+                  placeholder="/path/to/project"
+                  disabled={isOpening}
+                />
+                <button
+                  type="submit"
+                  className="wm-open-btn"
+                  disabled={isOpening || !newDirPath.trim()}
+                  title="Open directory in Antigravity"
+                >
+                  {isOpening ? (
+                    <span className="wm-spinner" />
+                  ) : (
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+                      <line x1="12" y1="5" x2="12" y2="19" />
+                      <line x1="5" y1="12" x2="19" y2="12" />
+                    </svg>
+                  )}
+                </button>
+              </form>
+            </div>
+
+            {/* Action Message Toast */}
+            {actionMessage && (
+              <div className={`wm-action-message ${actionMessage.type}`}>
+                {actionMessage.text}
+              </div>
+            )}
+          </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">
+            <line x1="12" y1="5" x2="12" y2="19" />
+            <line x1="5" y1="12" x2="19" y2="12" />
+          </svg>
+        </button>
+      </div>
+    </header>
+  );
+}

package/components/hitl-dialog.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+interface HITLDialogProps {
+  onApprove: () => void;
+  onReject: () => void;
+}
+
+export default function HITLDialog({ onApprove, onReject }: HITLDialogProps) {
+  return (
+    <div className="hitl-dialog">
+      <div className="hitl-label">⚠️ Needs Approval</div>
+      <div className="hitl-context">The agent needs your permission to proceed.</div>
+      <div className="hitl-actions">
+        <button className="hitl-approve-btn" onClick={onApprove}>
+          ✓ Approve
+        </button>
+        <button className="hitl-reject-btn" onClick={onReject}>
+          ✕ Reject
+        </button>
+      </div>
+    </div>
+  );
+}

package/components/message-list.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import type { ChatMessage, SSEStep } from '@/lib/types';
+import UserMessage from './user-message';
+import AgentMessage from './agent-message';
+
+interface MessageListProps {
+  messages: ChatMessage[];
+  currentSteps: SSEStep[];
+  currentResponse: string;
+  isStreaming: boolean;
+  onApprove: () => void;
+  onReject: () => void;
+  onRetry?: () => void;
+}
+
+export default function MessageList({ messages, currentSteps, currentResponse, isStreaming, onApprove, onReject, onRetry }: MessageListProps) {
+  return (
+    <>
+      {messages.map((msg, i) => (
+        msg.role === 'user' ? (
+          <UserMessage key={`msg-${i}`} content={msg.content} />
+        ) : (
+          <AgentMessage key={`msg-${i}`} content={msg.content} steps={msg.steps || []} isStreaming={false} onApprove={onApprove} onReject={onReject} onRetry={onRetry} />
+        )
+      ))}
+
+      {/* Active streaming message */}
+      {isStreaming && (
+        <AgentMessage
+          content={currentResponse}
+          steps={currentSteps}
+          isStreaming={true}
+          onApprove={onApprove}
+          onReject={onReject}
+          onRetry={onRetry}
+        />
+      )}
+    </>
+  );
+}

package/components/thinking-block.tsx

@@ -0,0 +1,14 @@
+'use client';
+
+interface ThinkingBlockProps {
+  time: string;
+}
+
+export default function ThinkingBlock({ time }: ThinkingBlockProps) {
+  return (
+    <div className="thinking-block">
+      <span className="thinking-icon">💭</span>
+      <span>{time}</span>
+    </div>
+  );
+}

package/components/tool-call-card.tsx

@@ -0,0 +1,75 @@
+'use client';
+
+const TOOL_ICONS: Record<string, string> = {
+  command: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>',
+  file: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="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>',
+  search: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>',
+  read: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>',
+  browser: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>',
+  mcp: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v6M12 22v-6M4.93 4.93l4.24 4.24M14.83 14.83l4.24 4.24M2 12h6M22 12h-6M4.93 19.07l4.24-4.24M14.83 9.17l4.24-4.24"/><circle cx="12" cy="12" r="4"/></svg>',
+};
+
+function getStatusClass(status: string): string {
+  const s = (status || '').toLowerCase();
+  if (s.startsWith('running') || s.startsWith('editing') || s.startsWith('creating') || s.startsWith('search')) return 'running';
+  if (s.startsWith('ran') || s.startsWith('edited') || s.startsWith('created') || s.startsWith('read') || s.startsWith('viewed') || s.startsWith('analyzed') || s.startsWith('wrote') || s.startsWith('replaced') || s.startsWith('deleted')) return 'done';
+  if (s.includes('error') || s.includes('fail')) return 'error';
+  if (s.startsWith('mcp')) return 'mcp';
+  return 'running';
+}
+
+interface ToolCallCardProps {
+  data: Record<string, any>;
+}
+
+export default function ToolCallCard({ data }: ToolCallCardProps) {
+  const statusClass = getStatusClass(data.status);
+  const iconHtml = TOOL_ICONS[data.type] || TOOL_ICONS.file;
+
+  return (
+    <div className={`tool-call-card ${statusClass}`} data-tool-index={data.index}>
+      <div className="tool-header">
+        <span className="tool-icon" dangerouslySetInnerHTML={{ __html: iconHtml }} />
+        <span className="tool-status-text">{data.status}</span>
+        {data.path && <span className="tool-path" title={data.path}>{data.path}</span>}
+      </div>
+
+      {data.command && (
+        <div className="tool-command"><code>{data.command}</code></div>
+      )}
+
+      {(data.additions || data.deletions) && (
+        <div className="tool-file-changes">
+          {data.additions && <span className="tool-additions">{data.additions}</span>}
+          {data.deletions && <span className="tool-deletions">{data.deletions}</span>}
+        </div>
+      )}
+
+      {data.exitCode && <div className="tool-exit-code">{data.exitCode}</div>}
+
+      {data.terminalOutput && (
+        <div className="tool-terminal">{data.terminalOutput}</div>
+      )}
+
+      {data.footerButtons && data.footerButtons.length > 0 && (
+        <div className="tool-footer-actions">
+          {data.footerButtons.map((btn: string, i: number) => (
+            <button key={i} className="tool-footer-btn"
+              onClick={async () => {
+                try {
+                  await fetch('/api/v1/chat/action', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ toolId: data.id, buttonText: btn }),
+                  });
+                } catch { /* ignore */ }
+              }}
+            >
+              {btn}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/components/typing-indicator.tsx

@@ -0,0 +1,11 @@
+'use client';
+
+export default function TypingIndicator() {
+  return (
+    <div className="typing-indicator">
+      <div className="typing-dot" />
+      <div className="typing-dot" />
+      <div className="typing-dot" />
+    </div>
+  );
+}

package/components/user-message.tsx

@@ -0,0 +1,13 @@
+'use client';
+
+interface UserMessageProps {
+  content: string;
+}
+
+export default function UserMessage({ content }: UserMessageProps) {
+  return (
+    <div className="user-message">
+      <div className="message-content">{content}</div>
+    </div>
+  );
+}

package/components/welcome-screen.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+interface WelcomeScreenProps {
+  onQuickPrompt: (text: string) => void;
+}
+
+export default function WelcomeScreen({ onQuickPrompt }: WelcomeScreenProps) {
+  return (
+    <div className="welcome-screen">
+      <div className="welcome-icon">
+        <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="url(#gradient)" strokeWidth="1.5">
+          <defs>
+            <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
+              <stop offset="0%" style={{ stopColor: '#6366f1' }} />
+              <stop offset="100%" style={{ stopColor: '#a855f7' }} />
+            </linearGradient>
+          </defs>
+          <circle cx="12" cy="12" r="10" />
+          <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
+          <line x1="2" y1="12" x2="22" y2="12" />
+        </svg>
+      </div>
+      <h2>Antigravity Agent</h2>
+      <p>Ask anything. The agent has access to your IDE — files, terminal, search, and more.</p>
+      <div className="quick-prompts">
+        <button className="quick-prompt" onClick={() => onQuickPrompt('What files are in the current workspace?')}>
+          📁 List workspace files
+        </button>
+        <button className="quick-prompt" onClick={() => onQuickPrompt('Explain the architecture of this project')}>
+          🏗️ Explain architecture
+        </button>
+        <button className="quick-prompt" onClick={() => onQuickPrompt('Help me debug the most recent error')}>
+          🐛 Debug last error
+        </button>
+      </div>
+    </div>
+  );
+}

package/hooks/use-artifacts.ts

@@ -0,0 +1,85 @@
+import { useState, useCallback, useEffect, useRef } from 'react';
+import type { ArtifactFile } from '@/lib/types';
+
+const API_BASE = '/api/v1';
+const POLL_INTERVAL_MS = 3000;
+
+/**
+ * Computes a simple hash string from file metadata to detect changes
+ * without unnecessary re-renders (mirrors old app's approach).
+ */
+function computeFileHash(files: ArtifactFile[]): string {
+  return JSON.stringify(files.map(f => f.name + f.size + f.mtime));
+}
+
+export function useArtifacts(activeConversationId?: string | null) {
+  const [artifactFiles, setArtifactFiles] = useState<ArtifactFile[]>([]);
+  const [artifactPanelOpen, setArtifactPanelOpen] = useState(false);
+
+  const lastHashRef = useRef('');
+  const pollingRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  const loadArtifacts = useCallback(async () => {
+    try {
+      const res = await fetch(`${API_BASE}/artifacts/active`);
+      const data = await res.json();
+      const files: ArtifactFile[] = data.files || [];
+
+      // Hash-based change detection: only update state if files actually changed
+      const newHash = computeFileHash(files);
+      if (newHash !== lastHashRef.current) {
+        lastHashRef.current = newHash;
+        setArtifactFiles(files);
+      }
+    } catch { /* ignore */ }
+  }, []);
+
+  const toggleArtifactPanel = useCallback(() => {
+    setArtifactPanelOpen(prev => !prev);
+  }, []);
+
+  const openArtifactPanel = useCallback(() => {
+    setArtifactPanelOpen(true);
+  }, []);
+
+  // Start/stop polling based on panel visibility
+  useEffect(() => {
+    if (artifactPanelOpen) {
+      // Fetch immediately when panel opens
+      loadArtifacts();
+
+      // Start polling every 3 seconds
+      pollingRef.current = setInterval(loadArtifacts, POLL_INTERVAL_MS);
+    } else {
+      // Stop polling when panel is closed
+      if (pollingRef.current) {
+        clearInterval(pollingRef.current);
+        pollingRef.current = null;
+      }
+    }
+
+    return () => {
+      if (pollingRef.current) {
+        clearInterval(pollingRef.current);
+        pollingRef.current = null;
+      }
+    };
+  }, [artifactPanelOpen, loadArtifacts]);
+
+  // Re-fetch when the active conversation changes
+  useEffect(() => {
+    if (activeConversationId) {
+      // Reset hash so we always show fresh data for the new conversation
+      lastHashRef.current = '';
+      loadArtifacts();
+    }
+  }, [activeConversationId, loadArtifacts]);
+
+  return {
+    artifactFiles,
+    artifactPanelOpen,
+    toggleArtifactPanel,
+    openArtifactPanel,
+    loadArtifacts
+  };
+}