@aion0/forge 0.6.0 → 0.6.3

package/.forge/worktrees/pipeline-44a94121/components/BrowserPanel.tsx

@@ -1,175 +0,0 @@
-'use client';
-
-import { useState, useEffect, useRef, useCallback } from 'react';
-
-interface PreviewEntry {
-  port: number;
-  url: string | null;
-  status: string;
-  label?: string;
-}
-
-export default function BrowserPanel({ onClose }: { onClose?: () => void }) {
-  const [browserUrl, setBrowserUrl] = useState(() => typeof window !== 'undefined' ? localStorage.getItem('forge-browser-url') || '' : '');
-  const [browserKey, setBrowserKey] = useState(0);
-  const [previews, setPreviews] = useState<PreviewEntry[]>([]);
-  const [tunnelStarting, setTunnelStarting] = useState(false);
-  const browserUrlRef = useRef<HTMLInputElement>(null);
-  const isRemote = typeof window !== 'undefined' && !['localhost', '127.0.0.1'].includes(window.location.hostname);
-
-  const fetchPreviews = useCallback(() => {
-    fetch('/api/preview').then(r => r.json()).then(data => {
-      if (Array.isArray(data)) setPreviews(data.filter((p: any) => p.status === 'running'));
-    }).catch(() => {});
-  }, []);
-
-  useEffect(() => {
-    fetchPreviews();
-    const timer = setInterval(fetchPreviews, 10000);
-    return () => clearInterval(timer);
-  }, [fetchPreviews]);
-
-  const normalizeUrl = (val: string): string => {
-    if (/^\d+$/.test(val)) return `http://localhost:${val}`;
-    if (!/^https?:\/\//i.test(val)) return `http://${val}`;
-    return val;
-  };
-
-  const navigate = (url: string) => {
-    const normalized = normalizeUrl(url);
-    setBrowserUrl(normalized);
-    localStorage.setItem('forge-browser-url', normalized);
-    if (browserUrlRef.current) browserUrlRef.current.value = normalized;
-    setBrowserKey(k => k + 1);
-  };
-
-  const handleTunnel = async () => {
-    const input = prompt('Enter port(s) to create tunnel (e.g. 3100 or 3100,8080):');
-    if (!input) return;
-    const ports = input.split(',').map(s => parseInt(s.trim())).filter(p => p > 0 && p <= 65535);
-    if (ports.length === 0) { alert('Invalid port(s)'); return; }
-    setTunnelStarting(true);
-    const results: string[] = [];
-    for (const port of ports) {
-      try {
-        const res = await fetch('/api/preview', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ action: 'start', port }),
-        });
-        const data = await res.json();
-        if (data.url) {
-          results.push(data.url);
-          setPreviews(prev => {
-            const exists = prev.find(p => p.port === port);
-            if (exists) return prev.map(p => p.port === port ? { ...p, url: data.url, status: 'running' } : p);
-            return [...prev, { port, url: data.url, status: 'running' }];
-          });
-        } else if (data.status === 'starting' || data.status === 'stopped') {
-          // Tunnel started but URL not ready yet or exited
-          results.push('');
-        } else {
-          alert(`Port ${port}: ${data.error || 'Failed'}`);
-        }
-      } catch { alert(`Port ${port}: Failed to start tunnel`); }
-    }
-    // Navigate to first successful URL
-    const firstUrl = results.find(u => u);
-    if (firstUrl) navigate(firstUrl);
-    // Refresh list to pick up any that were still starting
-    setTimeout(fetchPreviews, 3000);
-    setTunnelStarting(false);
-  };
-
-  const stopTunnel = async (port: number) => {
-    await fetch('/api/preview', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ action: 'stop', port }),
-    });
-    setPreviews(prev => prev.filter(x => x.port !== port));
-  };
-
-  return (
-    <div className="flex-1 flex flex-col min-h-0">
-      {/* URL bar */}
-      <div className="flex items-center gap-1 px-2 py-1 border-b border-[var(--border)] bg-[var(--bg-tertiary)] shrink-0">
-        <input
-          ref={browserUrlRef}
-          type="text"
-          defaultValue={browserUrl}
-          placeholder="Enter URL"
-          onKeyDown={e => {
-            if (e.key === 'Enter') {
-              const val = (e.target as HTMLInputElement).value.trim();
-              if (!val) return;
-              navigate(val);
-            }
-          }}
-          className="flex-1 bg-[var(--bg-secondary)] border border-[var(--border)] rounded px-2 py-0.5 text-[10px] text-[var(--text-primary)] focus:outline-none focus:border-[var(--accent)] min-w-0"
-        />
-        <button onClick={() => setBrowserKey(k => k + 1)} className="text-[10px] text-[var(--text-secondary)] hover:text-[var(--text-primary)] px-1" title="Refresh">↻</button>
-        <button onClick={() => window.open(browserUrl, '_blank')} className="text-[10px] text-[var(--text-secondary)] hover:text-[var(--text-primary)] px-1" title="Open in new tab">↗</button>
-        <button
-          disabled={tunnelStarting}
-          onClick={handleTunnel}
-          className="text-[9px] px-1.5 py-0.5 rounded border border-[var(--border)] text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:border-[var(--accent)] disabled:opacity-50"
-          title="Create tunnel for a port (remote access)"
-        >{tunnelStarting ? 'Starting...' : 'Tunnel'}</button>
-        {onClose && (
-          <button onClick={onClose} className="text-[10px] text-[var(--text-secondary)] hover:text-[var(--red)] px-1" title="Close">✕</button>
-        )}
-      </div>
-      {/* Active tunnels bar */}
-      {previews.length > 0 && (
-        <div className="flex items-center gap-1 px-2 py-0.5 border-b border-[var(--border)]/50 bg-[var(--bg-secondary)] shrink-0 overflow-x-auto">
-          {previews.map(p => (
-            <div key={p.port} className="flex items-center gap-1 shrink-0">
-              <button
-                onClick={() => {
-                  const url = isRemote && p.url ? p.url : `http://localhost:${p.port}`;
-                  navigate(url);
-                }}
-                className="text-[9px] px-1.5 py-0.5 rounded bg-[var(--bg-tertiary)] text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
-              >
-                <span className="text-green-400 mr-0.5">●</span>
-                :{p.port}
-              </button>
-              {p.url && (
-                <button
-                  onClick={() => navigator.clipboard.writeText(p.url!).then(() => alert('Tunnel URL copied'))}
-                  className="text-[8px] text-green-400 hover:underline truncate max-w-[120px]"
-                  title={p.url}
-                >{p.url.replace('https://', '').slice(0, 20)}...</button>
-              )}
-              <button onClick={() => stopTunnel(p.port)} className="text-[8px] text-red-400 hover:text-red-300">✕</button>
-            </div>
-          ))}
-        </div>
-      )}
-      {/* Content */}
-      <div className="flex-1 relative">
-        {tunnelStarting && (
-          <div className="absolute inset-0 flex items-center justify-center text-[var(--text-secondary)] text-xs z-10 bg-[var(--bg-primary)]/80">
-            Creating tunnel... this may take up to 30 seconds
-          </div>
-        )}
-        {browserUrl ? (
-          <iframe
-            key={browserKey}
-            src={browserUrl}
-            className="absolute inset-0 w-full h-full border-0 bg-white"
-            sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
-          />
-        ) : (
-          <div className="absolute inset-0 flex items-center justify-center text-[var(--text-secondary)] text-xs">
-            <div className="text-center space-y-1">
-              <p>Enter a URL or port number and press Enter</p>
-              <p className="text-[9px]">Click Tunnel to create a public URL for remote access</p>
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}

package/.forge/worktrees/pipeline-44a94121/components/ChatPanel.tsx

@@ -1,191 +0,0 @@
-'use client';
-
-import { useState, useEffect, useRef } from 'react';
-import type { Session, Message } from '@/src/types';
-
-const providerLabels: Record<string, string> = {
-  anthropic: 'Claude',
-  google: 'Gemini',
-  openai: 'OpenAI',
-  grok: 'Grok',
-};
-
-export default function ChatPanel({
-  session,
-  onUpdate,
-}: {
-  session: Session;
-  onUpdate: () => void;
-}) {
-  const [messages, setMessages] = useState<Message[]>([]);
-  const [input, setInput] = useState('');
-  const [streaming, setStreaming] = useState(false);
-  const [streamContent, setStreamContent] = useState('');
-  const messagesEndRef = useRef<HTMLDivElement>(null);
-  const inputRef = useRef<HTMLTextAreaElement>(null);
-
-  // Load messages when session changes
-  useEffect(() => {
-    fetch(`/api/sessions/${session.id}/messages`)
-      .then(r => r.json())
-      .then(setMessages);
-  }, [session.id]);
-
-  // Auto-scroll
-  useEffect(() => {
-    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-  }, [messages, streamContent]);
-
-  const sendMessage = async () => {
-    const text = input.trim();
-    if (!text || streaming) return;
-
-    setInput('');
-    setStreaming(true);
-    setStreamContent('');
-
-    // Optimistic: add user message
-    const userMsg: Message = {
-      id: Date.now(),
-      sessionId: session.id,
-      role: 'user',
-      content: text,
-      provider: session.provider,
-      model: session.model,
-      createdAt: new Date().toISOString(),
-    };
-    setMessages(prev => [...prev, userMsg]);
-
-    try {
-      const res = await fetch(`/api/sessions/${session.id}/chat`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ message: text }),
-      });
-
-      const reader = res.body?.getReader();
-      const decoder = new TextDecoder();
-      let fullContent = '';
-
-      if (reader) {
-        while (true) {
-          const { done, value } = await reader.read();
-          if (done) break;
-
-          const chunk = decoder.decode(value);
-          const lines = chunk.split('\n');
-
-          for (const line of lines) {
-            if (!line.startsWith('data: ')) continue;
-            try {
-              const data = JSON.parse(line.slice(6));
-              if (data.token) {
-                fullContent += data.token;
-                setStreamContent(fullContent);
-              }
-              if (data.done) {
-                // Add final assistant message
-                const assistantMsg: Message = {
-                  id: Date.now() + 1,
-                  sessionId: session.id,
-                  role: 'assistant',
-                  content: fullContent,
-                  provider: session.provider,
-                  model: session.model,
-                  createdAt: new Date().toISOString(),
-                };
-                setMessages(prev => [...prev, assistantMsg]);
-                setStreamContent('');
-              }
-              if (data.error) {
-                setStreamContent(`Error: ${data.error}`);
-              }
-            } catch {}
-          }
-        }
-      }
-    } catch (err: any) {
-      setStreamContent(`Error: ${err.message}`);
-    }
-
-    setStreaming(false);
-    onUpdate();
-    inputRef.current?.focus();
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter' && !e.shiftKey) {
-      e.preventDefault();
-      sendMessage();
-    }
-  };
-
-  return (
-    <div className="flex-1 flex flex-col min-h-0">
-      {/* Session header */}
-      <div className="h-10 border-b border-[var(--border)] flex items-center px-4 gap-3 shrink-0">
-        <span className="text-sm font-semibold">{session.name}</span>
-        <span className="text-[10px] px-1.5 py-0.5 bg-[var(--bg-tertiary)] rounded text-[var(--text-secondary)]">
-          {providerLabels[session.provider] || session.provider}
-        </span>
-        <span className="text-[10px] px-1.5 py-0.5 bg-[var(--bg-tertiary)] rounded text-[var(--text-secondary)]">
-          {session.memory.strategy}
-        </span>
-        <span className="text-[10px] text-[var(--text-secondary)]">
-          {session.messageCount} messages
-        </span>
-      </div>
-
-      {/* Messages */}
-      <div className="flex-1 overflow-y-auto p-4 space-y-4">
-        {messages.map(msg => (
-          <div key={msg.id} className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}>
-            <div
-              className={`max-w-[80%] px-3 py-2 rounded-lg text-sm whitespace-pre-wrap ${
-                msg.role === 'user'
-                  ? 'bg-[var(--accent)] text-white'
-                  : 'bg-[var(--bg-tertiary)] text-[var(--text-primary)]'
-              }`}
-            >
-              {msg.content}
-            </div>
-          </div>
-        ))}
-
-        {streamContent && (
-          <div className="flex justify-start">
-            <div className="max-w-[80%] px-3 py-2 rounded-lg text-sm bg-[var(--bg-tertiary)] text-[var(--text-primary)] whitespace-pre-wrap">
-              {streamContent}
-              <span className="animate-pulse">▌</span>
-            </div>
-          </div>
-        )}
-
-        <div ref={messagesEndRef} />
-      </div>
-
-      {/* Input */}
-      <div className="border-t border-[var(--border)] p-3 shrink-0">
-        <div className="flex gap-2">
-          <textarea
-            ref={inputRef}
-            value={input}
-            onChange={e => setInput(e.target.value)}
-            onKeyDown={handleKeyDown}
-            placeholder={streaming ? 'Waiting for response...' : 'Type a message... (Enter to send, Shift+Enter for newline)'}
-            disabled={streaming}
-            rows={1}
-            className="flex-1 px-3 py-2 bg-[var(--bg-tertiary)] border border-[var(--border)] rounded text-sm text-[var(--text-primary)] resize-none focus:outline-none focus:border-[var(--accent)] disabled:opacity-50"
-          />
-          <button
-            onClick={sendMessage}
-            disabled={streaming || !input.trim()}
-            className="px-4 py-2 bg-[var(--accent)] text-white text-sm rounded hover:opacity-90 disabled:opacity-50"
-          >
-            Send
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}

package/.forge/worktrees/pipeline-44a94121/components/ClaudeTerminal.tsx

@@ -1,267 +0,0 @@
-'use client';
-
-import { useState, useEffect, useRef } from 'react';
-
-interface ClaudeMessage {
-  type: 'system' | 'assistant' | 'result';
-  subtype?: string;
-  content: string;
-  tool?: string;
-  costUSD?: number;
-  sessionId?: string;
-  timestamp: string;
-}
-
-interface ClaudeProcess {
-  id: string;
-  projectName: string;
-  projectPath: string;
-  status: string;
-  conversationId?: string;
-}
-
-export default function ClaudeTerminal({
-  process: proc,
-  onKill,
-}: {
-  process: ClaudeProcess;
-  onKill: (id: string) => void;
-}) {
-  const [messages, setMessages] = useState<ClaudeMessage[]>([]);
-  const [input, setInput] = useState('');
-  const [isRunning, setIsRunning] = useState(false);
-  const [conversationId, setConversationId] = useState<string | undefined>(proc.conversationId);
-  const messagesEndRef = useRef<HTMLDivElement>(null);
-  const eventSourceRef = useRef<EventSource | null>(null);
-
-  // Connect SSE stream with auto-reconnect
-  useEffect(() => {
-    let cancelled = false;
-    let es: EventSource | null = null;
-    let reconnectTimer: ReturnType<typeof setTimeout> | null = null;
-
-    function connect() {
-      if (cancelled) return;
-      es = new EventSource(`/api/claude/${proc.id}/stream`);
-      eventSourceRef.current = es;
-
-      es.onmessage = (event) => {
-        try {
-          const msg: ClaudeMessage = JSON.parse(event.data);
-          setMessages(prev => {
-            // Deduplicate by timestamp+content on reconnect
-            if (prev.some(m => m.timestamp === msg.timestamp && m.content === msg.content)) {
-              return prev;
-            }
-            return [...prev, msg];
-          });
-
-          if (msg.sessionId) {
-            setConversationId(msg.sessionId);
-          }
-
-          if (msg.subtype === 'complete') {
-            setIsRunning(false);
-          }
-        } catch {}
-      };
-
-      es.onerror = () => {
-        es?.close();
-        eventSourceRef.current = null;
-        // Auto-reconnect after 2s
-        if (!cancelled) {
-          reconnectTimer = setTimeout(connect, 2000);
-        }
-      };
-    }
-
-    connect();
-
-    return () => {
-      cancelled = true;
-      if (reconnectTimer) clearTimeout(reconnectTimer);
-      es?.close();
-      eventSourceRef.current = null;
-    };
-  }, [proc.id]);
-
-  // Auto-scroll
-  useEffect(() => {
-    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-  }, [messages]);
-
-  const sendMessage = async () => {
-    const text = input.trim();
-    if (!text || isRunning) return;
-
-    setInput('');
-    setIsRunning(true);
-
-    await fetch(`/api/claude/${proc.id}`, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ type: 'message', content: text, conversationId }),
-    });
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter' && !e.shiftKey) {
-      e.preventDefault();
-      sendMessage();
-    }
-  };
-
-  return (
-    <div className="flex flex-col h-full">
-      {/* Header */}
-      <div className="h-8 border-b border-[var(--border)] flex items-center justify-between px-3 shrink-0">
-        <div className="flex items-center gap-2">
-          <span className={`text-[10px] ${proc.status === 'running' || isRunning ? 'text-[var(--green)]' : 'text-[var(--text-secondary)]'}`}>●</span>
-          <span className="text-xs font-semibold">Claude Code</span>
-          <span className="text-[10px] text-[var(--text-secondary)]">{proc.projectName}</span>
-          {isRunning && <span className="text-[10px] text-[var(--accent)] animate-pulse">thinking...</span>}
-        </div>
-        <button
-          onClick={() => onKill(proc.id)}
-          className="text-[10px] px-2 py-0.5 text-[var(--red)] hover:bg-[var(--red)] hover:text-white rounded transition-colors"
-        >
-          Kill
-        </button>
-      </div>
-
-      {/* Messages */}
-      <div className="flex-1 overflow-y-auto p-3 space-y-2 font-mono text-xs">
-        {messages.length === 0 && (
-          <div className="text-center text-[var(--text-secondary)] py-8">
-            <p>Send a message to start working with Claude Code</p>
-            <p className="text-[10px] mt-1">Working in: {proc.projectPath}</p>
-          </div>
-        )}
-
-        {messages.map((msg, i) => (
-          <MessageBubble key={i} msg={msg} />
-        ))}
-        <div ref={messagesEndRef} />
-      </div>
-
-      {/* Input */}
-      <div className="border-t border-[var(--border)] p-3">
-        <div className="flex gap-2">
-          <textarea
-            value={input}
-            onChange={e => setInput(e.target.value)}
-            onKeyDown={handleKeyDown}
-            placeholder={isRunning ? 'Waiting for response...' : 'Send a message to Claude Code...'}
-            disabled={isRunning}
-            rows={2}
-            className="flex-1 px-3 py-2 bg-[var(--bg-tertiary)] border border-[var(--border)] rounded text-xs text-[var(--text-primary)] resize-none focus:outline-none focus:border-[var(--accent)] disabled:opacity-50"
-          />
-          <button
-            onClick={sendMessage}
-            disabled={isRunning || !input.trim()}
-            className="px-4 py-2 bg-[var(--accent)] text-white rounded text-xs hover:opacity-90 disabled:opacity-50 self-end"
-          >
-            Send
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function MessageBubble({ msg }: { msg: ClaudeMessage }) {
-  // User input
-  if (msg.type === 'system' && msg.subtype === 'user_input') {
-    return (
-      <div className="flex justify-end">
-        <div className="max-w-[80%] px-3 py-2 bg-[var(--accent)] text-white rounded-lg rounded-br-sm">
-          <pre className="whitespace-pre-wrap break-words">{msg.content}</pre>
-        </div>
-      </div>
-    );
-  }
-
-  // System init — show model info subtly
-  if (msg.type === 'system' && msg.subtype === 'init') {
-    return (
-      <div className="text-center text-[10px] text-[var(--text-secondary)] py-1">
-        {msg.content}
-      </div>
-    );
-  }
-
-  // Error
-  if (msg.subtype === 'error') {
-    return (
-      <div className="px-3 py-2 bg-red-900/20 border border-red-800/30 rounded text-[var(--red)]">
-        <pre className="whitespace-pre-wrap break-words">{msg.content}</pre>
-      </div>
-    );
-  }
-
-  // Completion notice
-  if (msg.subtype === 'complete') {
-    return (
-      <div className="text-center text-[10px] text-[var(--text-secondary)] py-1">
-        {msg.content}
-        {msg.costUSD != null && ` · $${msg.costUSD.toFixed(4)}`}
-      </div>
-    );
-  }
-
-  // Tool use
-  if (msg.subtype === 'tool_use') {
-    return (
-      <div className="px-3 py-2 bg-[var(--bg-tertiary)] border border-[var(--border)] rounded">
-        <div className="flex items-center gap-2 mb-1">
-          <span className="text-[10px] px-1.5 py-0.5 bg-[var(--accent)]/20 text-[var(--accent)] rounded">
-            {msg.tool || 'tool'}
-          </span>
-        </div>
-        <pre className="whitespace-pre-wrap break-words text-[var(--text-secondary)] max-h-40 overflow-y-auto">
-          {formatToolContent(msg.content)}
-        </pre>
-      </div>
-    );
-  }
-
-  // Tool result
-  if (msg.subtype === 'tool_result') {
-    return (
-      <div className="px-3 py-2 bg-[var(--bg-tertiary)] border-l-2 border-[var(--accent)] rounded-r">
-        <pre className="whitespace-pre-wrap break-words text-[var(--text-secondary)] max-h-60 overflow-y-auto">
-          {formatToolContent(msg.content)}
-        </pre>
-      </div>
-    );
-  }
-
-  // Final result
-  if (msg.type === 'result') {
-    return (
-      <div className="px-3 py-2 bg-green-900/10 border border-green-800/20 rounded">
-        <pre className="whitespace-pre-wrap break-words">{msg.content}</pre>
-        {msg.costUSD != null && (
-          <div className="text-[10px] text-[var(--text-secondary)] mt-1">Cost: ${msg.costUSD.toFixed(4)}</div>
-        )}
-      </div>
-    );
-  }
-
-  // Regular assistant text
-  return (
-    <div className="px-3 py-2">
-      <pre className="whitespace-pre-wrap break-words text-[var(--text-primary)]">{msg.content}</pre>
-    </div>
-  );
-}
-
-function formatToolContent(content: string): string {
-  try {
-    const parsed = JSON.parse(content);
-    return JSON.stringify(parsed, null, 2);
-  } catch {
-    return content;
-  }
-}