@aion0/forge 0.5.26 → 0.5.28

package/.forge/worktrees/pipeline-4dd8dc2d/components/BrowserPanel.tsx

@@ -0,0 +1,175 @@
+'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-4dd8dc2d/components/ChatPanel.tsx

@@ -0,0 +1,191 @@
+'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-4dd8dc2d/components/ClaudeTerminal.tsx

@@ -0,0 +1,267 @@
+'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;
+  }
+}