@aion0/forge 0.5.26 → 0.5.28

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

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

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

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

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