@aion0/forge 0.1.0

package/components/TaskDetail.tsx

@@ -0,0 +1,351 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+import MarkdownContent from './MarkdownContent';
+import type { Task, TaskLogEntry } from '@/src/types';
+
+export default function TaskDetail({
+  task,
+  onRefresh,
+  onFollowUp,
+}: {
+  task: Task;
+  onRefresh: () => void;
+  onFollowUp?: (data: { projectName: string; prompt: string; conversationId: string }) => void;
+}) {
+  const [liveLog, setLiveLog] = useState<TaskLogEntry[]>(task.log);
+  const [liveStatus, setLiveStatus] = useState(task.status);
+  const [tab, setTab] = useState<'log' | 'diff' | 'result'>('log');
+  const [expandedTools, setExpandedTools] = useState<Set<number>>(new Set());
+  const [followUpText, setFollowUpText] = useState('');
+  const logEndRef = useRef<HTMLDivElement>(null);
+
+  // SSE stream for running tasks
+  useEffect(() => {
+    if (task.status !== 'running' && task.status !== 'queued') {
+      setLiveLog(task.log);
+      setLiveStatus(task.status);
+      return;
+    }
+
+    setLiveLog([]);
+    const es = new EventSource(`/api/tasks/${task.id}/stream`);
+
+    es.onmessage = (event) => {
+      try {
+        const data = JSON.parse(event.data);
+        if (data.type === 'log') {
+          setLiveLog(prev => [...prev, data.entry]);
+        } else if (data.type === 'status') {
+          setLiveStatus(data.status);
+          if (data.status === 'done' || data.status === 'failed' || data.status === 'cancelled') {
+            onRefresh();
+          }
+        } else if (data.type === 'complete' && data.task) {
+          setLiveLog(data.task.log);
+          setLiveStatus(data.task.status);
+        }
+      } catch {}
+    };
+
+    es.onerror = () => {
+      es.close();
+      onRefresh();
+    };
+
+    return () => es.close();
+  }, [task.id, task.status, onRefresh]);
+
+  useEffect(() => {
+    logEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [liveLog]);
+
+  const handleAction = async (action: string) => {
+    await fetch(`/api/tasks/${task.id}`, {
+      method: action === 'delete' ? 'DELETE' : 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: action !== 'delete' ? JSON.stringify({ action }) : undefined,
+    });
+    onRefresh();
+  };
+
+  const toggleTool = (i: number) => {
+    setExpandedTools(prev => {
+      const next = new Set(prev);
+      next.has(i) ? next.delete(i) : next.add(i);
+      return next;
+    });
+  };
+
+  const displayLog = liveLog.length > 0 ? liveLog : task.log;
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Header */}
+      <div className="border-b border-[var(--border)] px-4 py-2 shrink-0">
+        <div className="flex items-center justify-between mb-1">
+          <div className="flex items-center gap-2">
+            <StatusBadge status={liveStatus} />
+            <span className="text-sm font-semibold">{task.projectName}</span>
+            <span className="text-[10px] text-[var(--text-secondary)] font-mono">{task.id}</span>
+          </div>
+          <div className="flex items-center gap-2">
+            {(liveStatus === 'running' || liveStatus === 'queued') && (
+              <button onClick={() => handleAction('cancel')} className="text-[10px] px-2 py-0.5 text-[var(--red)] border border-[var(--red)]/30 rounded hover:bg-[var(--red)] hover:text-white">
+                Cancel
+              </button>
+            )}
+            {(liveStatus === 'failed' || liveStatus === 'cancelled') && (
+              <button onClick={() => handleAction('retry')} className="text-[10px] px-2 py-0.5 text-[var(--accent)] border border-[var(--accent)]/30 rounded hover:bg-[var(--accent)] hover:text-white">
+                Retry
+              </button>
+            )}
+            <button onClick={() => handleAction('delete')} className="text-[10px] px-2 py-0.5 text-[var(--text-secondary)] hover:text-[var(--red)]">
+              Delete
+            </button>
+          </div>
+        </div>
+        <p className="text-xs text-[var(--text-secondary)] mb-2">{task.prompt}</p>
+        <div className="flex items-center gap-3 text-[10px] text-[var(--text-secondary)]">
+          <span>Created: {new Date(task.createdAt).toLocaleString()}</span>
+          {task.startedAt && <span>Started: {new Date(task.startedAt).toLocaleString()}</span>}
+          {task.completedAt && <span>Completed: {new Date(task.completedAt).toLocaleString()}</span>}
+          {task.costUSD != null && <span>Cost: ${task.costUSD.toFixed(4)}</span>}
+        </div>
+      </div>
+
+      {/* Tabs */}
+      <div className="border-b border-[var(--border)] px-4 flex gap-0.5 shrink-0">
+        {(['log', 'result', 'diff'] as const).map(t => (
+          <button
+            key={t}
+            onClick={() => setTab(t)}
+            className={`text-[11px] px-3 py-1.5 border-b-2 transition-colors ${
+              tab === t ? 'border-[var(--accent)] text-[var(--accent)]' : 'border-transparent text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
+            }`}
+          >
+            {t === 'log' ? `Log (${displayLog.length})` : t === 'diff' ? 'Git Diff' : 'Result'}
+          </button>
+        ))}
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 overflow-y-auto p-4 text-sm">
+        {tab === 'log' && (
+          <div className="space-y-2">
+            {displayLog.map((entry, i) => (
+              <LogEntry key={i} entry={entry} index={i} expanded={expandedTools.has(i)} onToggle={() => toggleTool(i)} />
+            ))}
+            {liveStatus === 'running' && (
+              <div className="text-[var(--accent)] animate-pulse py-1 text-xs">working...</div>
+            )}
+            <div ref={logEndRef} />
+          </div>
+        )}
+
+        {tab === 'result' && (
+          <div className="prose-container">
+            {task.resultSummary ? (
+              <MarkdownContent content={task.resultSummary} />
+            ) : task.error ? (
+              <div className="p-3 bg-red-900/10 border border-red-800/20 rounded">
+                <pre className="whitespace-pre-wrap break-words text-[var(--red)] text-xs font-mono">{task.error}</pre>
+              </div>
+            ) : (
+              <p className="text-[var(--text-secondary)] text-xs">
+                {liveStatus === 'running' || liveStatus === 'queued' ? 'Task is still running...' : 'No result'}
+              </p>
+            )}
+          </div>
+        )}
+
+        {tab === 'diff' && (
+          <div>
+            {task.gitDiff ? (
+              <div className="bg-[var(--bg-tertiary)] rounded border border-[var(--border)] overflow-hidden">
+                <pre className="p-3 text-xs font-mono overflow-x-auto">
+                  {task.gitDiff.split('\n').map((line, i) => (
+                    <div key={i} className={`px-2 ${
+                      line.startsWith('+++') || line.startsWith('---') ? 'text-[var(--text-secondary)] font-semibold' :
+                      line.startsWith('+') ? 'text-[var(--green)] bg-green-500/5' :
+                      line.startsWith('-') ? 'text-[var(--red)] bg-red-500/5' :
+                      line.startsWith('@@') ? 'text-[var(--accent)] bg-[var(--accent)]/5 font-semibold' :
+                      line.startsWith('diff ') ? 'text-[var(--text-primary)] font-bold border-t border-[var(--border)] pt-2 mt-2' :
+                      'text-[var(--text-secondary)]'
+                    }`}>
+                      {line}
+                    </div>
+                  ))}
+                </pre>
+              </div>
+            ) : (
+              <p className="text-[var(--text-secondary)] text-xs">
+                {liveStatus === 'running' ? 'Diff will be captured after completion' : 'No changes detected'}
+              </p>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Follow-up input for completed tasks */}
+      {liveStatus === 'done' && task.conversationId && onFollowUp && (
+        <div className="border-t border-[var(--border)] px-4 py-2 shrink-0">
+          <form
+            onSubmit={(e) => {
+              e.preventDefault();
+              if (!followUpText.trim()) return;
+              onFollowUp({
+                projectName: task.projectName,
+                prompt: followUpText.trim(),
+                conversationId: task.conversationId!,
+              });
+              setFollowUpText('');
+            }}
+            className="flex gap-2"
+          >
+            <input
+              type="text"
+              value={followUpText}
+              onChange={e => setFollowUpText(e.target.value)}
+              placeholder="Send follow-up message (continues this session)..."
+              className="flex-1 px-3 py-1.5 bg-[var(--bg-tertiary)] border border-[var(--border)] rounded text-xs text-[var(--text-primary)] focus:outline-none focus:border-[var(--accent)]"
+            />
+            <button
+              type="submit"
+              disabled={!followUpText.trim()}
+              className="text-xs px-3 py-1.5 bg-[var(--accent)] text-white rounded hover:opacity-90 disabled:opacity-50"
+            >
+              Send
+            </button>
+          </form>
+          <p className="text-[9px] text-[var(--text-secondary)] mt-1">
+            Session <span className="font-mono">{task.conversationId.slice(0, 12)}...</span> — creates a new task continuing this conversation
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function StatusBadge({ status }: { status: string }) {
+  const colors: Record<string, string> = {
+    queued: 'bg-yellow-500/20 text-yellow-500',
+    running: 'bg-green-500/20 text-[var(--green)]',
+    done: 'bg-blue-500/20 text-blue-400',
+    failed: 'bg-red-500/20 text-[var(--red)]',
+    cancelled: 'bg-gray-500/20 text-[var(--text-secondary)]',
+  };
+  return (
+    <span className={`text-[10px] px-1.5 py-0.5 rounded font-medium ${colors[status] || ''}`}>
+      {status}
+    </span>
+  );
+}
+
+function LogEntry({ entry, index, expanded, onToggle }: {
+  entry: TaskLogEntry;
+  index: number;
+  expanded: boolean;
+  onToggle: () => void;
+}) {
+  // System init
+  if (entry.type === 'system' && entry.subtype === 'init') {
+    return (
+      <div className="text-[10px] text-[var(--text-secondary)] py-0.5 flex items-center gap-1">
+        <span className="opacity-50">⚙</span> {entry.content}
+      </div>
+    );
+  }
+
+  // Error
+  if (entry.subtype === 'error') {
+    return (
+      <div className="p-2 bg-red-900/10 border border-red-800/20 rounded text-xs">
+        <pre className="whitespace-pre-wrap break-words text-[var(--red)] font-mono">{entry.content}</pre>
+      </div>
+    );
+  }
+
+  // Tool use — collapsible
+  if (entry.subtype === 'tool_use') {
+    const toolContent = formatToolContent(entry.content);
+    const isLong = toolContent.length > 80;
+
+    return (
+      <div className="border border-[var(--border)] rounded overflow-hidden">
+        <button
+          onClick={onToggle}
+          className="w-full flex items-center gap-2 px-2 py-1.5 bg-[var(--bg-tertiary)] hover:bg-[var(--border)]/30 transition-colors text-left"
+        >
+          <span className="text-[10px] px-1.5 py-0.5 bg-[var(--accent)]/15 text-[var(--accent)] rounded font-medium font-mono">
+            {entry.tool || 'tool'}
+          </span>
+          <span className="text-[11px] text-[var(--text-secondary)] truncate flex-1 font-mono">
+            {isLong && !expanded ? toolContent.slice(0, 80) + '...' : (!isLong ? toolContent : '')}
+          </span>
+          {isLong && (
+            <span className="text-[9px] text-[var(--text-secondary)] shrink-0">{expanded ? '▲' : '▼'}</span>
+          )}
+        </button>
+        {(expanded || !isLong) && isLong && (
+          <pre className="px-3 py-2 text-[11px] text-[var(--text-secondary)] font-mono whitespace-pre-wrap break-words max-h-60 overflow-y-auto border-t border-[var(--border)]">
+            {toolContent}
+          </pre>
+        )}
+      </div>
+    );
+  }
+
+  // Tool result — collapsible with border accent
+  if (entry.subtype === 'tool_result') {
+    const content = formatToolContent(entry.content);
+    const isLong = content.length > 150;
+
+    return (
+      <div className="ml-4 border-l-2 border-[var(--accent)]/30 pl-3">
+        <pre className={`text-[11px] text-[var(--text-secondary)] font-mono whitespace-pre-wrap break-words ${isLong && !expanded ? 'max-h-16 overflow-hidden' : 'max-h-80 overflow-y-auto'}`}>
+          {content}
+        </pre>
+        {isLong && !expanded && (
+          <button onClick={onToggle} className="text-[9px] text-[var(--accent)] hover:underline mt-0.5">
+            show more
+          </button>
+        )}
+      </div>
+    );
+  }
+
+  // Final result
+  if (entry.type === 'result') {
+    return (
+      <div className="p-3 bg-green-900/5 border border-green-800/15 rounded">
+        <MarkdownContent content={entry.content} />
+      </div>
+    );
+  }
+
+  // Assistant text — render as markdown
+  return (
+    <div className="py-1">
+      <MarkdownContent content={entry.content} />
+    </div>
+  );
+}
+
+// MarkdownContent is now imported from ./MarkdownContent
+
+function formatToolContent(content: string): string {
+  try {
+    const parsed = JSON.parse(content);
+    if (typeof parsed === 'object') {
+      // For common tool patterns, show a cleaner format
+      if (parsed.command) return `$ ${parsed.command}`;
+      if (parsed.file_path) return parsed.file_path;
+      if (parsed.pattern) return `/${parsed.pattern}/`;
+      return JSON.stringify(parsed, null, 2);
+    }
+    return content;
+  } catch {
+    return content;
+  }
+}

package/components/TunnelToggle.tsx

@@ -0,0 +1,163 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+
+interface TunnelStatus {
+  status: 'stopped' | 'starting' | 'running' | 'error';
+  url: string | null;
+  error: string | null;
+}
+
+export default function TunnelToggle() {
+  const [tunnel, setTunnel] = useState<TunnelStatus>({ status: 'stopped', url: null, error: null });
+  const [loading, setLoading] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const [isRemote, setIsRemote] = useState(false);
+  const [confirmStop, setConfirmStop] = useState(false);
+
+  useEffect(() => {
+    setIsRemote(!['localhost', '127.0.0.1'].includes(window.location.hostname));
+  }, []);
+
+  const refresh = useCallback(() => {
+    fetch('/api/tunnel').then(r => r.json()).then(setTunnel).catch(() => {});
+  }, []);
+
+  useEffect(() => {
+    refresh();
+    const id = setInterval(refresh, 5000);
+    return () => clearInterval(id);
+  }, [refresh]);
+
+  useEffect(() => {
+    if (tunnel.status !== 'starting') return;
+    const id = setInterval(refresh, 2000);
+    return () => clearInterval(id);
+  }, [tunnel.status, refresh]);
+
+  const doStop = async () => {
+    setLoading(true);
+    try {
+      const res = await fetch('/api/tunnel', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ action: 'stop' }),
+      });
+      const data = await res.json();
+      setTunnel(data);
+    } catch {}
+    setLoading(false);
+    setConfirmStop(false);
+  };
+
+  const doStart = async () => {
+    setLoading(true);
+    try {
+      const res = await fetch('/api/tunnel', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ action: 'start' }),
+      });
+      const data = await res.json();
+      setTunnel(data);
+    } catch {}
+    setLoading(false);
+  };
+
+  const copyUrl = () => {
+    if (tunnel.url) {
+      navigator.clipboard.writeText(tunnel.url);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
+  };
+
+  // Hide tunnel controls when accessing remotely
+  if (isRemote) {
+    return null;
+  }
+
+  // Stop confirmation dialog
+  if (confirmStop) {
+    return (
+      <div className="flex items-center gap-1.5">
+        <span className="text-[10px] text-[var(--text-secondary)]">Stop tunnel?</span>
+        <button
+          onClick={doStop}
+          disabled={loading}
+          className="text-[10px] px-2 py-0.5 bg-[var(--red)] text-white rounded hover:opacity-90"
+        >
+          Confirm
+        </button>
+        <button
+          onClick={() => setConfirmStop(false)}
+          className="text-[10px] px-2 py-0.5 text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
+        >
+          Cancel
+        </button>
+      </div>
+    );
+  }
+
+  if (tunnel.status === 'stopped' && !tunnel.error) {
+    return (
+      <button
+        onClick={doStart}
+        disabled={loading}
+        className="text-[10px] px-2 py-0.5 border border-[var(--border)] rounded text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:border-[var(--text-secondary)] transition-colors disabled:opacity-50"
+        title="Start Cloudflare Tunnel for remote access"
+      >
+        {loading ? 'Starting...' : 'Tunnel'}
+      </button>
+    );
+  }
+
+  if (tunnel.status === 'starting') {
+    return (
+      <span className="text-[10px] px-2 py-0.5 border border-[var(--yellow)] rounded text-[var(--yellow)]">
+        Tunnel starting...
+      </span>
+    );
+  }
+
+  if (tunnel.status === 'running' && tunnel.url) {
+    return (
+      <div className="flex items-center gap-1.5">
+        <button
+          onClick={copyUrl}
+          className="text-[10px] px-2 py-0.5 border border-[var(--green)] rounded text-[var(--green)] hover:bg-[var(--green)] hover:text-black transition-colors truncate max-w-[200px]"
+          title={`Click to copy: ${tunnel.url}`}
+        >
+          {copied ? 'Copied!' : tunnel.url.replace('https://', '')}
+        </button>
+        <button
+          onClick={() => setConfirmStop(true)}
+          disabled={loading}
+          className="text-[10px] px-1.5 py-0.5 text-[var(--red)] hover:bg-[var(--red)] hover:text-white rounded transition-colors"
+          title="Stop tunnel"
+        >
+          Stop
+        </button>
+      </div>
+    );
+  }
+
+  if (tunnel.status === 'error') {
+    return (
+      <div className="flex items-center gap-1.5">
+        <span className="text-[10px] text-[var(--red)] truncate max-w-[200px]" title={tunnel.error || ''}>
+          Tunnel error
+        </span>
+        <button
+          onClick={doStart}
+          disabled={loading}
+          className="text-[10px] px-2 py-0.5 border border-[var(--border)] rounded text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition-colors"
+        >
+          Retry
+        </button>
+      </div>
+    );
+  }
+
+  return null;
+}