@aion0/forge 0.4.9 → 0.4.11

package/components/Dashboard.tsx

@@ -16,7 +16,7 @@ const WebTerminal = lazy(() => import('./WebTerminal'));
 const DocsViewer = lazy(() => import('./DocsViewer'));
 const CodeViewer = lazy(() => import('./CodeViewer'));
 const ProjectManager = lazy(() => import('./ProjectManager'));
-const PreviewPanel = lazy(() => import('./PreviewPanel'));
+const BrowserPanel = lazy(() => import('./BrowserPanel'));
 const PipelineView = lazy(() => import('./PipelineView'));
 const HelpDialog = lazy(() => import('./HelpDialog'));
 const LogViewer = lazy(() => import('./LogViewer'));
@@ -42,8 +42,64 @@ interface ProjectInfo {
   language: string | null;
 }
 
+function FloatingBrowser({ onClose }: { onClose: () => void }) {
+  const [pos, setPos] = useState({ x: 60, y: 60 });
+  const [size, setSize] = useState({ w: 700, h: 500 });
+  const dragRef = useRef<{ startX: number; startY: number; origX: number; origY: number } | null>(null);
+  const resizeRef = useRef<{ startX: number; startY: number; origW: number; origH: number } | null>(null);
+
+  return (
+    <div
+      className="fixed z-50 bg-[var(--bg-secondary)] border border-[var(--border)] rounded-lg shadow-2xl flex flex-col overflow-hidden"
+      style={{ left: pos.x, top: pos.y, width: size.w, height: size.h }}
+    >
+      <div
+        className="flex items-center gap-2 px-3 py-1.5 bg-[var(--bg-tertiary)] border-b border-[var(--border)] cursor-move shrink-0 select-none"
+        onMouseDown={(e) => {
+          e.preventDefault();
+          dragRef.current = { startX: e.clientX, startY: e.clientY, origX: pos.x, origY: pos.y };
+          const onMove = (ev: MouseEvent) => {
+            if (!dragRef.current) return;
+            setPos({ x: Math.max(0, dragRef.current.origX + ev.clientX - dragRef.current.startX), y: Math.max(0, dragRef.current.origY + ev.clientY - dragRef.current.startY) });
+          };
+          const onUp = () => { dragRef.current = null; window.removeEventListener('mousemove', onMove); window.removeEventListener('mouseup', onUp); };
+          window.addEventListener('mousemove', onMove);
+          window.addEventListener('mouseup', onUp);
+        }}
+      >
+        <span className="text-[11px] font-semibold text-[var(--text-primary)]">Browser</span>
+        <button onClick={onClose} className="ml-auto text-[var(--text-secondary)] hover:text-[var(--red)] text-sm leading-none">✕</button>
+      </div>
+      <div className="flex-1 min-h-0 flex flex-col">
+        <BrowserPanel />
+      </div>
+      <div
+        onMouseDown={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          resizeRef.current = { startX: e.clientX, startY: e.clientY, origW: size.w, origH: size.h };
+          const onMove = (ev: MouseEvent) => {
+            if (!resizeRef.current) return;
+            setSize({ w: Math.max(400, resizeRef.current.origW + ev.clientX - resizeRef.current.startX), h: Math.max(300, resizeRef.current.origH + ev.clientY - resizeRef.current.startY) });
+          };
+          const onUp = () => { resizeRef.current = null; window.removeEventListener('mousemove', onMove); window.removeEventListener('mouseup', onUp); };
+          window.addEventListener('mousemove', onMove);
+          window.addEventListener('mouseup', onUp);
+        }}
+        className="absolute bottom-0 right-0 w-4 h-4 cursor-se-resize"
+        style={{ background: 'linear-gradient(135deg, transparent 50%, var(--border) 50%)' }}
+      />
+    </div>
+  );
+}
+
 export default function Dashboard({ user }: { user: any }) {
-  const [viewMode, setViewMode] = useState<'tasks' | 'sessions' | 'terminal' | 'docs' | 'projects' | 'preview' | 'pipelines' | 'skills' | 'logs'>('terminal');
+  const [viewMode, setViewMode] = useState<'tasks' | 'sessions' | 'terminal' | 'docs' | 'projects' | 'pipelines' | 'skills' | 'logs'>('terminal');
+  const [browserMode, setBrowserMode] = useState<'none' | 'float' | 'right' | 'left'>('none');
+  const [showBrowserMenu, setShowBrowserMenu] = useState(false);
+  const [browserWidth, setBrowserWidth] = useState(600);
+  const browserDragRef = useRef<{ startX: number; startW: number } | null>(null);
+  const [browserDragging, setBrowserDragging] = useState(false);
   const [tasks, setTasks] = useState<Task[]>([]);
   const [activeTaskId, setActiveTaskId] = useState<string | null>(null);
   const [showNewTask, setShowNewTask] = useState(false);
@@ -172,7 +228,34 @@ export default function Dashboard({ user }: { user: any }) {
   const queued = tasks.filter(t => t.status === 'queued');
 
   return (
-    <div className="h-screen flex flex-col">
+    <div className="h-screen flex">
+      {/* Browser — left side */}
+      {browserMode === 'left' && (
+        <>
+        <div style={{ width: browserWidth }} className="shrink-0 flex flex-col relative">
+          <Suspense fallback={null}><BrowserPanel onClose={() => setBrowserMode('none')} /></Suspense>
+          {browserDragging && <div className="absolute inset-0 z-10" />}
+        </div>
+        <div
+          onMouseDown={(e) => {
+            e.preventDefault();
+            browserDragRef.current = { startX: e.clientX, startW: browserWidth };
+            setBrowserDragging(true);
+            const onMove = (ev: MouseEvent) => {
+              if (!browserDragRef.current) return;
+              setBrowserWidth(Math.max(320, Math.min(1200, browserDragRef.current.startW + (ev.clientX - browserDragRef.current.startX))));
+            };
+            const onUp = () => { browserDragRef.current = null; setBrowserDragging(false); window.removeEventListener('mousemove', onMove); window.removeEventListener('mouseup', onUp); };
+            window.addEventListener('mousemove', onMove);
+            window.addEventListener('mouseup', onUp);
+          }}
+          className="w-1 bg-[var(--border)] cursor-col-resize shrink-0 hover:bg-[var(--accent)]/50"
+        />
+        </>
+      )}
+
+      {/* Forge main area */}
+      <div className="flex-1 flex flex-col min-w-0 min-h-0 overflow-hidden">
       {/* Top bar */}
       <header className="h-12 border-b-2 border-[var(--border)] flex items-center justify-between px-4 shrink-0 bg-[var(--bg-secondary)]">
         <div className="flex items-center gap-4">
@@ -285,17 +368,47 @@ export default function Dashboard({ user }: { user: any }) {
                 : 'border-[var(--border)] text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:border-[var(--text-secondary)]'
             }`}
           >?</button>
-          {/* Preview + Tunnel */}
-          <button
-            onClick={() => setViewMode('preview')}
-            className={`text-[10px] px-2 py-0.5 border rounded transition-colors ${
-              viewMode === 'preview'
-                ? 'border-[var(--accent)] text-[var(--accent)]'
-                : 'border-[var(--border)] text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:border-[var(--text-secondary)]'
-            }`}
-          >
-            Preview
-          </button>
+          <div className="relative">
+            <button
+              onClick={() => setShowBrowserMenu(v => !v)}
+              className={`text-[10px] px-2 py-0.5 border rounded transition-colors ${
+                browserMode !== 'none'
+                  ? 'border-blue-500 text-blue-400'
+                  : 'border-[var(--border)] text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:border-[var(--text-secondary)]'
+              }`}
+            >
+              Browser
+            </button>
+            {showBrowserMenu && (
+              <>
+              <div className="fixed inset-0 z-40" onClick={() => setShowBrowserMenu(false)} />
+              <div className="absolute top-full right-0 mt-1 z-50 bg-[var(--bg-secondary)] border border-[var(--border)] rounded shadow-lg py-1 min-w-[140px]">
+                {browserMode !== 'none' && (
+                  <button onClick={() => { setBrowserMode('none'); setShowBrowserMenu(false); }} className="w-full text-left px-3 py-1.5 text-[10px] text-red-400 hover:bg-[var(--bg-tertiary)]">
+                    Close Browser
+                  </button>
+                )}
+                <button onClick={() => { setBrowserMode('float'); setShowBrowserMenu(false); }} className={`w-full text-left px-3 py-1.5 text-[10px] hover:bg-[var(--bg-tertiary)] ${browserMode === 'float' ? 'text-[var(--accent)]' : 'text-[var(--text-primary)]'}`}>
+                  Floating Window
+                </button>
+                <button onClick={() => { setBrowserMode('right'); setShowBrowserMenu(false); }} className={`w-full text-left px-3 py-1.5 text-[10px] hover:bg-[var(--bg-tertiary)] ${browserMode === 'right' ? 'text-[var(--accent)]' : 'text-[var(--text-primary)]'}`}>
+                  Right Side
+                </button>
+                <button onClick={() => { setBrowserMode('left'); setShowBrowserMenu(false); }} className={`w-full text-left px-3 py-1.5 text-[10px] hover:bg-[var(--bg-tertiary)] ${browserMode === 'left' ? 'text-[var(--accent)]' : 'text-[var(--text-primary)]'}`}>
+                  Left Side
+                </button>
+                <button onClick={() => {
+                  const url = localStorage.getItem('forge-browser-url');
+                  if (url) window.open(url, '_blank');
+                  else { const u = prompt('Enter URL to open:'); if (u) window.open(u.trim(), '_blank'); }
+                  setShowBrowserMenu(false);
+                }} className="w-full text-left px-3 py-1.5 text-[10px] text-[var(--text-primary)] hover:bg-[var(--bg-tertiary)]">
+                  New Tab
+                </button>
+              </div>
+              </>
+            )}
+          </div>
           <TunnelToggle />
           {onlineCount.total > 0 && (
             <span className="text-[10px] text-[var(--text-secondary)] flex items-center gap-1" title={`${onlineCount.total} online${onlineCount.remote > 0 ? `, ${onlineCount.remote} remote` : ''}`}>
@@ -445,6 +558,12 @@ export default function Dashboard({ user }: { user: any }) {
                   >
                     Logs
                   </button>
+                  <a
+                    href="/mobile"
+                    className="block w-full text-left text-[11px] px-3 py-1.5 text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-tertiary)]"
+                  >
+                    Mobile View
+                  </a>
                   <div className="border-t border-[var(--border)] my-1" />
                   <button
                     onClick={() => signOut({ callbackUrl: '/login' })}
@@ -581,12 +700,6 @@ export default function Dashboard({ user }: { user: any }) {
           </Suspense>
         )}
 
-        {/* Preview */}
-        {viewMode === 'preview' && (
-          <Suspense fallback={<div className="flex-1 flex items-center justify-center text-[var(--text-secondary)]">Loading...</div>}>
-            <PreviewPanel />
-          </Suspense>
-        )}
 
         {/* Skills */}
         {viewMode === 'skills' && (
@@ -616,6 +729,39 @@ export default function Dashboard({ user }: { user: any }) {
           </Suspense>
         </div>
       </div>
+      </div>{/* close Forge main area */}
+
+      {/* Browser — right side */}
+      {browserMode === 'right' && (
+        <>
+        <div
+          onMouseDown={(e) => {
+            e.preventDefault();
+            browserDragRef.current = { startX: e.clientX, startW: browserWidth };
+            setBrowserDragging(true);
+            const onMove = (ev: MouseEvent) => {
+              if (!browserDragRef.current) return;
+              setBrowserWidth(Math.max(320, Math.min(1200, browserDragRef.current.startW - (ev.clientX - browserDragRef.current.startX))));
+            };
+            const onUp = () => { browserDragRef.current = null; setBrowserDragging(false); window.removeEventListener('mousemove', onMove); window.removeEventListener('mouseup', onUp); };
+            window.addEventListener('mousemove', onMove);
+            window.addEventListener('mouseup', onUp);
+          }}
+          className="w-1 bg-[var(--border)] cursor-col-resize shrink-0 hover:bg-[var(--accent)]/50"
+        />
+        <div style={{ width: browserWidth }} className="shrink-0 flex flex-col relative">
+          <Suspense fallback={null}><BrowserPanel onClose={() => setBrowserMode('none')} /></Suspense>
+          {browserDragging && <div className="absolute inset-0 z-10" />}
+        </div>
+        </>
+      )}
+
+      {/* Browser — floating window */}
+      {browserMode === 'float' && (
+        <Suspense fallback={null}>
+          <FloatingBrowser onClose={() => setBrowserMode('none')} />
+        </Suspense>
+      )}
 
       {showNewTask && (
         <NewTaskModal

package/components/HelpTerminal.tsx

@@ -26,6 +26,8 @@ export default function HelpTerminal() {
     if (!containerRef.current) return;
 
     let disposed = false;
+    let dataDir = '~/.forge/data';
+
     const cs = getComputedStyle(document.documentElement);
     const tv = (name: string) => cs.getPropertyValue(name).trim();
     const term = new Terminal({
@@ -73,7 +75,7 @@ export default function HelpTerminal() {
               isNewSession = false;
               setTimeout(() => {
                 if (socket.readyState === WebSocket.OPEN) {
-                  socket.send(JSON.stringify({ type: 'input', data: `cd ~/.forge/help 2>/dev/null && claude\n` }));
+                  socket.send(JSON.stringify({ type: 'input', data: `cd "${dataDir}" 2>/dev/null && claude\n` }));
                 }
               }, 300);
             }
@@ -94,7 +96,11 @@ export default function HelpTerminal() {
       socket.onerror = () => {};
     }
 
-    connect();
+    // Fetch data dir then connect
+    fetch('/api/help?action=status').then(r => r.json())
+      .then(data => { if (data.dataDir) dataDir = data.dataDir; })
+      .catch(() => {})
+      .finally(() => { if (!disposed) connect(); });
 
     term.onData((data) => {
       if (ws?.readyState === WebSocket.OPEN) ws.send(JSON.stringify({ type: 'input', data }));

package/components/MobileView.tsx

@@ -0,0 +1,365 @@
+'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 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(() => {});
+  }, []);
+
+  // 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,
+        }),
+        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>
+          </>
+        )}
+        {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/components/ProjectDetail.tsx

@@ -999,11 +999,11 @@ export default memo(function ProjectDetail({ projectPath, projectName, hasGit }:
                   {/* Issue scan config (for issue-fix-and-review workflow) */}
                   {(b.workflowName === 'issue-auto-fix' || b.workflowName === 'issue-fix-and-review') && (
                     <div className="space-y-1.5 pt-1 border-t border-[var(--border)]/30">
-                      {b.config.interval > 0 && (
-                        <div className="text-[8px] text-[var(--text-secondary)]">
-                          Scheduled mode: auto-scans GitHub issues and fixes new ones
-                        </div>
-                      )}
+                      <div className="text-[8px] text-[var(--text-secondary)]">
+                        {b.config.interval > 0
+                          ? 'Scheduled mode: auto-scans GitHub issues and fixes new ones'
+                          : 'Requires: gh auth login (run in terminal first)'}
+                      </div>
                       <div className="flex items-center gap-2 text-[9px]">
                           <label className="text-[var(--text-secondary)]">Labels:</label>
                           <input