@aion0/forge 0.6.0 → 0.6.3

package/.forge/worktrees/pipeline-d1757a50/components/MarkdownContent.tsx

@@ -1,73 +0,0 @@
-'use client';
-
-import Markdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
-
-export default function MarkdownContent({ content }: { content: string }) {
-  return (
-    <Markdown
-      remarkPlugins={[remarkGfm]}
-      components={{
-        h1: ({ children }) => <h1 className="text-base font-bold text-[var(--text-primary)] mt-3 mb-1">{children}</h1>,
-        h2: ({ children }) => <h2 className="text-sm font-bold text-[var(--text-primary)] mt-3 mb-1">{children}</h2>,
-        h3: ({ children }) => <h3 className="text-xs font-bold text-[var(--text-primary)] mt-2 mb-1">{children}</h3>,
-        p: ({ children }) => <p className="text-xs text-[var(--text-primary)] mb-1.5 leading-relaxed">{children}</p>,
-        ul: ({ children }) => <ul className="text-xs text-[var(--text-primary)] mb-1.5 ml-4 list-disc space-y-0.5">{children}</ul>,
-        ol: ({ children }) => <ol className="text-xs text-[var(--text-primary)] mb-1.5 ml-4 list-decimal space-y-0.5">{children}</ol>,
-        li: ({ children }) => <li className="leading-relaxed">{children}</li>,
-        strong: ({ children }) => <strong className="font-semibold text-[var(--text-primary)]">{children}</strong>,
-        em: ({ children }) => <em className="italic text-[var(--text-secondary)]">{children}</em>,
-        a: ({ href, children }) => <a href={href} className="text-[var(--accent)] hover:underline" target="_blank" rel="noopener">{children}</a>,
-        blockquote: ({ children }) => <blockquote className="border-l-2 border-[var(--accent)]/40 pl-3 my-1.5 text-[var(--text-secondary)] text-xs italic">{children}</blockquote>,
-        code: ({ className, children, node, ...props }) => {
-          // Block code: has language class OR parent is <pre> (checked via node)
-          const isBlock = !!className?.includes('language-');
-
-          if (isBlock) {
-            const lang = className?.replace('language-', '') || '';
-            return (
-              <div className="my-2 rounded border border-[var(--border)] overflow-hidden max-w-full">
-                {lang && (
-                  <div className="px-3 py-1 bg-[var(--bg-tertiary)] border-b border-[var(--border)] text-[9px] text-[var(--text-secondary)] font-mono">
-                    {lang}
-                  </div>
-                )}
-                <pre className="p-3 bg-[var(--bg-tertiary)] overflow-x-auto max-w-full">
-                  <code className="text-[12px] font-mono text-[var(--text-primary)] whitespace-pre leading-[1.4]" style={{ fontFamily: 'Menlo, Monaco, "Courier New", monospace' }}>{children}</code>
-                </pre>
-              </div>
-            );
-          }
-          return (
-            <code className="text-[11px] font-mono bg-[var(--bg-tertiary)] text-[var(--accent)] px-1 py-0.5 rounded">
-              {children}
-            </code>
-          );
-        },
-        pre: ({ children, ...props }) => {
-          // If code child already rendered as block (has language-), just pass through
-          // Otherwise wrap plain code blocks (no language) with proper styling
-          const child = (children as any)?.props;
-          if (child?.className?.includes('language-')) return <>{children}</>;
-          return (
-            <div className="my-2 rounded border border-[var(--border)] overflow-hidden max-w-full">
-              <pre className="p-3 bg-[var(--bg-tertiary)] overflow-x-auto max-w-full">
-                <code className="text-[12px] font-mono text-[var(--text-primary)] whitespace-pre leading-[1.4]" style={{ fontFamily: 'Menlo, Monaco, "Courier New", monospace' }}>{child?.children || children}</code>
-              </pre>
-            </div>
-          );
-        },
-        hr: () => <hr className="my-3 border-[var(--border)]" />,
-        table: ({ children }) => (
-          <div className="my-3 overflow-x-auto">
-            <table className="text-xs border-collapse">{children}</table>
-          </div>
-        ),
-        th: ({ children }) => <th className="border border-[var(--border)] px-3 py-1.5 bg-[var(--bg-tertiary)] text-left font-semibold text-[11px] whitespace-nowrap">{children}</th>,
-        td: ({ children }) => <td className="border border-[var(--border)] px-3 py-1.5 text-[11px]">{children}</td>,
-      }}
-    >
-      {content}
-    </Markdown>
-  );
-}

package/.forge/worktrees/pipeline-d1757a50/components/MobileView.tsx

@@ -1,385 +0,0 @@
-'use client';
-
-import { useState, useEffect, useRef, useCallback } from 'react';
-
-interface Project { name: string; path: string }
-interface SessionInfo { sessionId: string; summary?: string; firstPrompt?: string; modified?: string }
-interface ChatMessage { role: 'user' | 'assistant' | 'system'; content: string; timestamp: string }
-
-export default function MobileView() {
-  const [projects, setProjects] = useState<Project[]>([]);
-  const [selectedProject, setSelectedProject] = useState<Project | null>(null);
-  const [sessions, setSessions] = useState<SessionInfo[]>([]);
-  const [showSessions, setShowSessions] = useState(false);
-  const [messages, setMessages] = useState<ChatMessage[]>([]);
-  const [input, setInput] = useState('');
-  const [loading, setLoading] = useState(false);
-  const [tunnelUrl, setTunnelUrl] = useState<string | null>(null);
-  const [debug, setDebug] = useState<string[]>([]);
-  const [debugLevel, setDebugLevel] = useState<'off' | 'simple' | 'verbose'>('off');
-  const debugLevelRef = useRef<'off' | 'simple' | 'verbose'>('off');
-  const [hasSession, setHasSession] = useState(false);
-  const [availableAgents, setAvailableAgents] = useState<{ id: string; name: string }[]>([]);
-  const [selectedAgent, setSelectedAgent] = useState('claude');
-  const scrollRef = useRef<HTMLDivElement>(null);
-  const inputRef = useRef<HTMLInputElement>(null);
-  const abortRef = useRef<AbortController | null>(null);
-
-  // Fetch projects
-  useEffect(() => {
-    fetch('/api/projects').then(r => r.json())
-      .then(data => { if (Array.isArray(data)) setProjects(data); })
-      .catch(() => {});
-    fetch('/api/tunnel').then(r => r.json())
-      .then(data => { setTunnelUrl(data.url || null); })
-      .catch(() => {});
-    fetch('/api/agents').then(r => r.json())
-      .then(data => {
-        const agents = (data.agents || []).filter((a: any) => a.enabled && a.detected !== false);
-        setAvailableAgents(agents);
-        setSelectedAgent(data.defaultAgent || 'claude');
-      }).catch(() => {});
-  }, []);
-
-  // Auto-scroll
-  useEffect(() => {
-    if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
-  }, [messages]);
-
-  // Fetch sessions for project
-  const fetchSessions = useCallback(async (projectName: string) => {
-    try {
-      const res = await fetch(`/api/claude-sessions/${encodeURIComponent(projectName)}`);
-      const data = await res.json();
-      const list = Array.isArray(data) ? data : [];
-      setSessions(list);
-      setHasSession(list.length > 0);
-      return list;
-    } catch { setSessions([]); return []; }
-  }, []);
-
-  // Load session history
-  const loadHistory = useCallback(async (projectName: string, sessionId: string) => {
-    try {
-      const res = await fetch(`/api/claude-sessions/${encodeURIComponent(projectName)}/entries?sessionId=${encodeURIComponent(sessionId)}`);
-      const data = await res.json();
-      const entries = data.entries || [];
-      // Convert entries to chat messages (only user + assistant_text)
-      const chatMessages: ChatMessage[] = [];
-      for (const e of entries) {
-        if (e.type === 'user') {
-          chatMessages.push({ role: 'user', content: e.content, timestamp: e.timestamp || '' });
-        } else if (e.type === 'assistant_text') {
-          chatMessages.push({ role: 'assistant', content: e.content, timestamp: e.timestamp || '' });
-        }
-      }
-      setMessages(chatMessages);
-    } catch {}
-  }, []);
-
-  // Select project
-  const selectProject = useCallback(async (project: Project) => {
-    setSelectedProject(project);
-    setShowSessions(false);
-    setMessages([]);
-
-    const sessionList = await fetchSessions(project.name);
-    // Load last session history if exists
-    if (sessionList.length > 0) {
-      await loadHistory(project.name, sessionList[0].sessionId);
-    }
-  }, [fetchSessions, loadHistory]);
-
-  // View specific session
-  const viewSession = useCallback(async (sessionId: string) => {
-    if (!selectedProject) return;
-    setShowSessions(false);
-    setMessages([]);
-    await loadHistory(selectedProject.name, sessionId);
-  }, [selectedProject, loadHistory]);
-
-  // Send message
-  const sendMessage = async () => {
-    const text = input.trim();
-    if (!text || !selectedProject || loading) return;
-
-    // Add user message
-    setMessages(prev => [...prev, { role: 'user', content: text, timestamp: new Date().toISOString() }]);
-    setInput('');
-    setLoading(true);
-    setDebug(d => [...d.slice(-20), `Send: "${text.slice(0, 40)}"`]);
-    inputRef.current?.focus();
-
-    // Stream response from API
-    const abort = new AbortController();
-    abortRef.current = abort;
-    let assistantText = '';
-    const startTime = Date.now();
-
-    try {
-      const res = await fetch('/api/mobile-chat', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          message: text,
-          projectPath: selectedProject.path,
-          resume: false,
-          agent: selectedAgent,
-        }),
-        signal: abort.signal,
-      });
-
-      const reader = res.body?.getReader();
-      if (!reader) throw new Error('No reader');
-
-      const decoder = new TextDecoder();
-
-      // Add empty assistant message to fill in
-      setMessages(prev => [...prev, { role: 'assistant', content: '...', timestamp: new Date().toISOString() }]);
-
-      while (true) {
-        const { value, done } = await reader.read();
-        if (done) break;
-
-        const chunk = decoder.decode(value, { stream: true });
-        for (const line of chunk.split('\n')) {
-          if (!line.startsWith('data: ')) continue;
-          try {
-            const data = JSON.parse(line.slice(6));
-            if (data.type === 'chunk') {
-              assistantText += data.text;
-              if (debugLevelRef.current === 'verbose') {
-                // Show content preview in verbose mode
-                const preview = data.text.replace(/\n/g, '↵').slice(0, 80);
-                setDebug(d => [...d.slice(-50), `chunk: ${preview}`]);
-              }
-            } else if (data.type === 'stderr') {
-              if (debugLevelRef.current !== 'off') {
-                setDebug(d => [...d.slice(-50), `stderr: ${data.text.trim().slice(0, 100)}`]);
-              }
-            } else if (data.type === 'error') {
-              assistantText = `Error: ${data.message}`;
-              setDebug(d => [...d.slice(-50), `ERROR: ${data.message}`]);
-            } else if (data.type === 'done') {
-              if (debugLevelRef.current !== 'off') setDebug(d => [...d.slice(-50), `done: exit ${data.code}`]);
-            }
-          } catch {}
-        }
-
-        // Update assistant message with latest text
-        if (assistantText) {
-          let displayText = assistantText;
-          try {
-            const parsed = JSON.parse(assistantText);
-            if (parsed.result) displayText = parsed.result;
-          } catch {}
-          setMessages(prev => {
-            const updated = [...prev];
-            updated[updated.length - 1] = { role: 'assistant', content: displayText, timestamp: new Date().toISOString() };
-            return updated;
-          });
-        }
-      }
-
-      // Final parse
-      try {
-        const parsed = JSON.parse(assistantText);
-        const finalText = parsed.result || assistantText;
-        setMessages(prev => {
-          const updated = [...prev];
-          updated[updated.length - 1] = { role: 'assistant', content: finalText, timestamp: new Date().toISOString() };
-          return updated;
-        });
-      } catch {}
-
-      // After first message, future ones should use -c
-      setHasSession(true);
-      const elapsed = ((Date.now() - startTime) / 1000).toFixed(1);
-      setDebug(d => [...d.slice(-50), `Response complete (${elapsed}s, ${assistantText.length} chars)`]);
-    } catch (e: any) {
-      if (e.name !== 'AbortError') {
-        setDebug(d => [...d.slice(-20), `Error: ${e.message}`]);
-        setMessages(prev => [...prev.slice(0, -1), { role: 'system', content: `Failed: ${e.message}`, timestamp: new Date().toISOString() }]);
-      }
-    }
-
-    setLoading(false);
-    abortRef.current = null;
-  };
-
-  // Stop generation
-  const stopGeneration = () => {
-    if (abortRef.current) abortRef.current.abort();
-  };
-
-  // Close tunnel
-  const closeTunnel = async () => {
-    if (!confirm('Close tunnel? You will lose remote access.')) return;
-    await fetch('/api/tunnel', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ action: 'stop' }),
-    });
-    setTunnelUrl(null);
-  };
-
-  return (
-    <div className="h-[100dvh] flex flex-col bg-[#0d1117] text-[#e6edf3]">
-      {/* Header */}
-      <header className="shrink-0 flex items-center gap-1.5 px-2 py-2 bg-[#161b22] border-b border-[#30363d]">
-        <span className="text-xs font-bold text-[#7c5bf0]">Forge</span>
-        <select
-          value={selectedProject?.path || ''}
-          onChange={e => {
-            const p = projects.find(p => p.path === e.target.value);
-            if (p) selectProject(p);
-          }}
-          className="flex-1 bg-[#0d1117] border border-[#30363d] rounded px-2 py-1 text-xs text-[#e6edf3] min-w-0"
-        >
-          <option value="">Project</option>
-          {projects.map(p => (
-            <option key={p.path} value={p.path}>{p.name}</option>
-          ))}
-        </select>
-        {selectedProject && (
-          <>
-            <button
-              onClick={() => { setShowSessions(v => !v); if (!showSessions) fetchSessions(selectedProject.name); }}
-              className="text-xs px-2 py-1 border border-[#30363d] rounded text-[#8b949e] active:bg-[#30363d]"
-            >Sessions</button>
-            <button
-              onClick={async () => {
-                const list = await fetchSessions(selectedProject.name);
-                if (list.length > 0) {
-                  await loadHistory(selectedProject.name, list[0].sessionId);
-                  setDebug(d => [...d.slice(-20), `Refreshed: ${list[0].sessionId.slice(0, 8)}`]);
-                }
-              }}
-              className="text-sm px-3 py-1 border border-[#30363d] rounded text-[#8b949e] active:bg-[#30363d]"
-            >↻</button>
-            {availableAgents.length > 1 && (
-              <select
-                value={selectedAgent}
-                onChange={e => setSelectedAgent(e.target.value)}
-                className="bg-[#0d1117] border border-[#30363d] rounded px-1 py-1 text-[10px] text-[#e6edf3] w-16"
-              >
-                {availableAgents.map(a => (
-                  <option key={a.id} value={a.id}>{a.name.split(' ')[0]}</option>
-                ))}
-              </select>
-            )}
-          </>
-        )}
-        {tunnelUrl && (
-          <button onClick={closeTunnel} className="text-xs px-1.5 py-1 border border-green-700 rounded text-green-400" title={tunnelUrl}>●</button>
-        )}
-        <a href="/?force=desktop" className="text-[9px] px-1.5 py-1 border border-[#30363d] rounded text-[#8b949e] active:bg-[#30363d]" title="Switch to desktop view">PC</a>
-      </header>
-
-      {/* Session list */}
-      {showSessions && (
-        <div className="shrink-0 max-h-[40vh] overflow-y-auto bg-[#161b22] border-b border-[#30363d]">
-          {sessions.length === 0 ? (
-            <div className="px-3 py-4 text-xs text-[#8b949e] text-center">No sessions found</div>
-          ) : sessions.map(s => (
-            <button
-              key={s.sessionId}
-              onClick={() => viewSession(s.sessionId)}
-              className="w-full text-left px-3 py-2 border-b border-[#30363d]/50 hover:bg-[#1c2128] text-xs"
-            >
-              <div className="flex items-center gap-2">
-                <span className="text-[#e6edf3] font-mono truncate">{s.sessionId.slice(0, 12)}</span>
-                {s.modified && <span className="text-[#8b949e] ml-auto shrink-0">{new Date(s.modified).toLocaleString([], { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })}</span>}
-              </div>
-              {(s.summary || s.firstPrompt) && (
-                <div className="text-[#8b949e] mt-0.5 truncate">{s.summary || s.firstPrompt}</div>
-              )}
-            </button>
-          ))}
-        </div>
-      )}
-
-      {/* Messages */}
-      <div ref={scrollRef} className="flex-1 overflow-y-auto px-3 py-2 min-h-0 space-y-3">
-        {!selectedProject ? (
-          <div className="h-full flex items-center justify-center text-sm text-[#8b949e]">
-            Select a project to start
-          </div>
-        ) : messages.length === 0 ? (
-          <div className="h-full flex items-center justify-center text-sm text-[#8b949e]">
-            {hasSession ? 'Session loaded. Type a message.' : 'No sessions yet. Type a message to start.'}
-          </div>
-        ) : messages.map((msg, i) => (
-          <div key={i} className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}>
-            <div className={`max-w-[85%] rounded-2xl px-3 py-2 text-sm whitespace-pre-wrap break-words ${
-              msg.role === 'user'
-                ? 'bg-[#7c5bf0] text-white rounded-br-sm'
-                : msg.role === 'system'
-                  ? 'bg-red-900/30 text-red-300 rounded-bl-sm'
-                  : 'bg-[#1c2128] text-[#e6edf3] rounded-bl-sm'
-            }`}>
-              {msg.content}
-            </div>
-          </div>
-        ))}
-        {loading && (
-          <div className="flex justify-start">
-            <div className="bg-[#1c2128] rounded-2xl rounded-bl-sm px-3 py-2 text-sm text-[#8b949e]">
-              Thinking...
-            </div>
-          </div>
-        )}
-      </div>
-
-      {/* Input */}
-      <div className="shrink-0 flex items-center gap-2 px-3 py-2 bg-[#161b22] border-t border-[#30363d]">
-        <input
-          ref={inputRef}
-          type="text"
-          value={input}
-          onChange={e => setInput(e.target.value)}
-          onKeyDown={e => { if (e.key === 'Enter' && !loading) sendMessage(); }}
-          placeholder={selectedProject ? 'Type a message...' : 'Select a project first'}
-          disabled={!selectedProject}
-          className="flex-1 bg-[#0d1117] border border-[#30363d] rounded-lg px-3 py-2 text-sm text-[#e6edf3] focus:outline-none focus:border-[#7c5bf0] disabled:opacity-50 min-w-0"
-          autoComplete="off"
-          autoCorrect="off"
-        />
-        {loading ? (
-          <button
-            onClick={stopGeneration}
-            className="px-4 py-2 bg-red-600 text-white rounded-lg text-sm font-medium shrink-0"
-          >Stop</button>
-        ) : (
-          <button
-            onClick={sendMessage}
-            disabled={!selectedProject || !input.trim()}
-            className="px-4 py-2 bg-[#7c5bf0] text-white rounded-lg text-sm font-medium disabled:opacity-50 shrink-0"
-          >Send</button>
-        )}
-      </div>
-
-      {/* Debug log */}
-      <div className="shrink-0 bg-[#0d1117] border-t border-[#30363d]">
-        <div className="flex items-center gap-2 px-3 py-1">
-          <span className="text-[9px] text-[#8b949e]">Debug:</span>
-          {(['off', 'simple', 'verbose'] as const).map(level => (
-            <button
-              key={level}
-              onClick={() => { setDebugLevel(level); debugLevelRef.current = level; if (level === 'off') setDebug([]); }}
-              className={`text-[9px] px-1.5 py-0.5 rounded ${debugLevel === level ? 'bg-[#30363d] text-[#e6edf3]' : 'text-[#8b949e]'}`}
-            >{level}</button>
-          ))}
-          {debug.length > 0 && (
-            <button onClick={() => setDebug([])} className="text-[9px] text-[#8b949e] ml-auto">Clear</button>
-          )}
-        </div>
-        {debugLevel !== 'off' && debug.length > 0 && (
-          <div className="px-3 py-1 max-h-32 overflow-y-auto border-t border-[#30363d]/50">
-            {debug.map((d, i) => <div key={i} className="text-[9px] text-[#8b949e] font-mono">{d}</div>)}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}

package/.forge/worktrees/pipeline-d1757a50/components/MonitorPanel.tsx

@@ -1,122 +0,0 @@
-'use client';
-
-import { useState, useEffect, useCallback } from 'react';
-
-interface MonitorData {
-  processes: {
-    nextjs: { running: boolean; pid: string; startedAt?: string };
-    terminal: { running: boolean; pid: string; startedAt?: string };
-    telegram: { running: boolean; pid: string; startedAt?: string };
-    workspace: { running: boolean; pid: string; startedAt?: string };
-    tunnel: { running: boolean; pid: string; url: string };
-    mcp: { running: boolean; port: number; sessions: number };
-  };
-  sessions: { name: string; created: string; attached: boolean; windows: number }[];
-  uptime: string;
-}
-
-export default function MonitorPanel({ onClose }: { onClose: () => void }) {
-  const [data, setData] = useState<MonitorData | null>(null);
-
-  const refresh = useCallback(() => {
-    fetch('/api/monitor').then(r => r.json()).then(setData).catch(() => {});
-  }, []);
-
-  useEffect(() => {
-    refresh();
-    const timer = setInterval(refresh, 5000);
-    return () => clearInterval(timer);
-  }, [refresh]);
-
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={onClose}>
-      <div className="bg-[var(--bg-secondary)] border border-[var(--border)] rounded-lg w-[500px] max-h-[80vh] overflow-y-auto shadow-xl" onClick={e => e.stopPropagation()}>
-        <div className="px-4 py-3 border-b border-[var(--border)] flex items-center justify-between">
-          <h2 className="text-sm font-bold text-[var(--text-primary)]">Monitor</h2>
-          <div className="flex items-center gap-2">
-            <button onClick={refresh} className="text-[10px] text-[var(--text-secondary)] hover:text-[var(--text-primary)]">↻</button>
-            <button onClick={onClose} className="text-[10px] text-[var(--text-secondary)] hover:text-[var(--text-primary)]">Close</button>
-          </div>
-        </div>
-
-        {data ? (
-          <div className="p-4 space-y-4">
-            {/* Processes */}
-            <div>
-              <h3 className="text-[10px] font-semibold text-[var(--text-secondary)] uppercase mb-2">Processes</h3>
-              <div className="space-y-1.5">
-                {[
-                  { label: 'Next.js', ...data.processes.nextjs },
-                  { label: 'Terminal Server', ...data.processes.terminal },
-                  { label: 'Telegram Bot', ...data.processes.telegram },
-                  { label: 'Workspace Daemon', ...data.processes.workspace },
-                  { label: 'Tunnel', ...data.processes.tunnel },
-                ].map(p => (
-                  <div key={p.label} className="flex items-center gap-2 text-xs">
-                    <span className={p.running ? 'text-green-400' : 'text-gray-500'}>●</span>
-                    <span className="text-[var(--text-primary)] w-28">{p.label}</span>
-                    {p.running ? (
-                      <>
-                        <span className="text-[var(--text-secondary)] font-mono text-[10px]">pid: {p.pid}</span>
-                        {(p as any).startedAt && <span className="text-gray-500 font-mono text-[9px]">{(p as any).startedAt}</span>}
-                      </>
-                    ) : (
-                      <span className="text-gray-500 text-[10px]">stopped</span>
-                    )}
-                  </div>
-                ))}
-                {/* MCP Server — separate row (no pid, uses port + sessions) */}
-                <div className="flex items-center gap-2 text-xs">
-                  <span className={data.processes.mcp?.running ? 'text-green-400' : 'text-gray-500'}>●</span>
-                  <span className="text-[var(--text-primary)] w-28">MCP Server</span>
-                  {data.processes.mcp?.running ? (
-                    <>
-                      <span className="text-[var(--text-secondary)] font-mono text-[10px]">port: {data.processes.mcp.port}</span>
-                      <span className="text-gray-500 font-mono text-[9px]">{data.processes.mcp.sessions} session(s)</span>
-                    </>
-                  ) : (
-                    <span className="text-gray-500 text-[10px]">stopped</span>
-                  )}
-                </div>
-                {data.processes.tunnel.running && data.processes.tunnel.url && (
-                  <div className="pl-6 text-[10px] text-[var(--accent)] truncate">{data.processes.tunnel.url}</div>
-                )}
-                <div className="border-t border-[var(--border)] my-1" />
-              </div>
-            </div>
-
-            {/* Uptime */}
-            {data.uptime && (
-              <div className="text-[10px] text-[var(--text-secondary)]">
-                Uptime: {data.uptime}
-              </div>
-            )}
-
-            {/* Sessions */}
-            <div>
-              <h3 className="text-[10px] font-semibold text-[var(--text-secondary)] uppercase mb-2">
-                Terminal Sessions ({data.sessions.length})
-              </h3>
-              {data.sessions.length === 0 ? (
-                <div className="text-[10px] text-[var(--text-secondary)]">No sessions</div>
-              ) : (
-                <div className="space-y-1">
-                  {data.sessions.map(s => (
-                    <div key={s.name} className="flex items-center gap-2 text-[11px]">
-                      <span className={s.attached ? 'text-green-400' : 'text-yellow-500'}>●</span>
-                      <span className="font-mono text-[var(--text-primary)] truncate flex-1">{s.name}</span>
-                      <span className="text-[9px] text-[var(--text-secondary)]">{s.attached ? 'attached' : 'detached'}</span>
-                      <span className="text-[9px] text-[var(--text-secondary)]">{new Date(s.created).toLocaleTimeString()}</span>
-                    </div>
-                  ))}
-                </div>
-              )}
-            </div>
-          </div>
-        ) : (
-          <div className="p-8 text-center text-xs text-[var(--text-secondary)]">Loading...</div>
-        )}
-      </div>
-    </div>
-  );
-}

package/.forge/worktrees/pipeline-d1757a50/components/NewSessionModal.tsx

@@ -1,93 +0,0 @@
-'use client';
-
-import { useState, useEffect } from 'react';
-import type { SessionTemplate } from '@/src/types';
-
-export default function NewSessionModal({
-  onClose,
-  onCreate,
-}: {
-  onClose: () => void;
-  onCreate: (data: { name: string; templateId: string }) => void;
-}) {
-  const [templates, setTemplates] = useState<SessionTemplate[]>([]);
-  const [selectedTemplate, setSelectedTemplate] = useState('');
-  const [name, setName] = useState('');
-
-  useEffect(() => {
-    fetch('/api/templates')
-      .then(r => r.json())
-      .then((t: SessionTemplate[]) => {
-        setTemplates(t);
-        if (t.length > 0) setSelectedTemplate(t[0].id);
-      });
-  }, []);
-
-  const handleCreate = () => {
-    if (!selectedTemplate) return;
-    const finalName = name || `${selectedTemplate}-${Date.now().toString(36)}`;
-    onCreate({ name: finalName, templateId: selectedTemplate });
-  };
-
-  return (
-    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50" onClick={onClose}>
-      <div
-        className="bg-[var(--bg-secondary)] border border-[var(--border)] rounded-lg w-96 p-5 space-y-4"
-        onClick={e => e.stopPropagation()}
-      >
-        <h2 className="text-sm font-bold">New Session</h2>
-
-        {/* Template selection */}
-        <div className="space-y-2">
-          <label className="text-xs text-[var(--text-secondary)]">Template</label>
-          <div className="grid grid-cols-2 gap-2">
-            {templates.map(t => (
-              <button
-                key={t.id}
-                onClick={() => setSelectedTemplate(t.id)}
-                className={`p-2 rounded border text-left text-xs transition-colors ${
-                  selectedTemplate === t.id
-                    ? 'border-[var(--accent)] bg-[var(--bg-tertiary)]'
-                    : 'border-[var(--border)] hover:border-[var(--text-secondary)]'
-                }`}
-              >
-                <div className="font-medium">{t.ui?.icon} {t.name}</div>
-                <div className="text-[10px] text-[var(--text-secondary)] mt-0.5">
-                  {t.provider} · {t.memory.strategy}
-                </div>
-              </button>
-            ))}
-          </div>
-        </div>
-
-        {/* Name */}
-        <div className="space-y-1">
-          <label className="text-xs text-[var(--text-secondary)]">Session Name (optional)</label>
-          <input
-            value={name}
-            onChange={e => setName(e.target.value)}
-            placeholder={selectedTemplate || 'auto-generated'}
-            className="w-full px-3 py-2 bg-[var(--bg-tertiary)] border border-[var(--border)] rounded text-sm text-[var(--text-primary)] focus:outline-none focus:border-[var(--accent)]"
-          />
-        </div>
-
-        {/* Actions */}
-        <div className="flex justify-end gap-2">
-          <button
-            onClick={onClose}
-            className="px-3 py-1.5 text-xs text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
-          >
-            Cancel
-          </button>
-          <button
-            onClick={handleCreate}
-            disabled={!selectedTemplate}
-            className="px-3 py-1.5 text-xs bg-[var(--accent)] text-white rounded hover:opacity-90 disabled:opacity-50"
-          >
-            Create
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}