@aion0/forge 0.2.0 → 0.2.2

package/components/CodeViewer.tsx

@@ -15,13 +15,15 @@ interface FileNode {
 // ─── File Tree ───────────────────────────────────────────
 
 type GitStatusMap = Map<string, string>; // path → status
+type GitRepoMap = Map<string, { branch: string; remote: string }>; // dir name → repo info
 
-function TreeNode({ node, depth, selected, onSelect, gitMap }: {
+function TreeNode({ node, depth, selected, onSelect, gitMap, repoMap }: {
   node: FileNode;
   depth: number;
   selected: string | null;
   onSelect: (path: string) => void;
   gitMap: GitStatusMap;
+  repoMap: GitRepoMap;
 }) {
   // Auto-expand if selected file is under this directory
   const containsSelected = selected ? selected.startsWith(node.path + '/') : false;
@@ -30,18 +32,23 @@ function TreeNode({ node, depth, selected, onSelect, gitMap }: {
 
   if (node.type === 'dir') {
     const dirHasChanges = node.children?.some(c => hasGitChanges(c, gitMap));
+    const repo = repoMap.get(node.name);
     return (
       <div>
         <button
           onClick={() => setManualExpanded(v => v === null ? !expanded : !v)}
-          className="w-full text-left flex items-center gap-1 px-1 py-0.5 hover:bg-[var(--bg-tertiary)] rounded text-xs"
+          className="w-full text-left flex items-center gap-1 px-1 py-0.5 hover:bg-[var(--bg-tertiary)] rounded text-xs group"
           style={{ paddingLeft: depth * 12 + 4 }}
+          title={repo ? `${repo.branch} · ${repo.remote.replace(/^https?:\/\//, '').replace(/^git@github\.com:/, 'github.com/').replace(/\.git$/, '')}` : undefined}
         >
           <span className="text-[10px] text-[var(--text-secondary)] w-3">{expanded ? '▾' : '▸'}</span>
           <span className={dirHasChanges ? 'text-yellow-400' : 'text-[var(--text-primary)]'}>{node.name}</span>
+          {repo && (
+            <span className="text-[8px] text-[var(--accent)] opacity-60 group-hover:opacity-100 ml-auto shrink-0">{repo.branch}</span>
+          )}
         </button>
         {expanded && node.children?.map(child => (
-          <TreeNode key={child.path} node={child} depth={depth + 1} selected={selected} onSelect={onSelect} gitMap={gitMap} />
+          <TreeNode key={child.path} node={child} depth={depth + 1} selected={selected} onSelect={onSelect} gitMap={gitMap} repoMap={repoMap} />
         ))}
       </div>
     );
@@ -159,27 +166,35 @@ function highlightLine(line: string, lang: string): React.ReactNode {
 
 // ─── Main Component ──────────────────────────────────────
 
-export default function CodeViewer({ terminalRef, onToggleCode }: { terminalRef: React.RefObject<WebTerminalHandle | null>; onToggleCode?: () => void }) {
+export default function CodeViewer({ terminalRef }: { terminalRef: React.RefObject<WebTerminalHandle | null> }) {
   const [currentDir, setCurrentDir] = useState<string | null>(null);
   const [dirName, setDirName] = useState('');
   const [tree, setTree] = useState<FileNode[]>([]);
   const [gitBranch, setGitBranch] = useState('');
   const [gitChanges, setGitChanges] = useState<{ path: string; status: string }[]>([]);
+  const [gitRepos, setGitRepos] = useState<{ name: string; branch: string; remote: string; changes: { path: string; status: string }[] }[]>([]);
   const [showGit, setShowGit] = useState(false);
   const [selectedFile, setSelectedFile] = useState<string | null>(null);
   const [content, setContent] = useState<string | null>(null);
   const [language, setLanguage] = useState('');
   const [loading, setLoading] = useState(false);
+  const [fileWarning, setFileWarning] = useState<{ type: 'binary' | 'large' | 'tooLarge'; label: string; fileType?: string } | null>(null);
   const [search, setSearch] = useState('');
   const [diffContent, setDiffContent] = useState<string | null>(null);
   const [diffFile, setDiffFile] = useState<string | null>(null);
   const [viewMode, setViewMode] = useState<'file' | 'diff'>('file');
   const [sidebarOpen, setSidebarOpen] = useState(true);
   const [codeOpen, setCodeOpen] = useState(false);
+
+  const handleCodeOpenChange = useCallback((open: boolean) => {
+    setCodeOpen(open);
+  }, []);
   const [terminalHeight, setTerminalHeight] = useState(300);
   const [activeSession, setActiveSession] = useState<string | null>(null);
+  const [taskNotification, setTaskNotification] = useState<{ id: string; status: string; prompt: string; sessionId?: string } | null>(null);
   const dragRef = useRef<{ startY: number; startH: number } | null>(null);
   const lastDirRef = useRef<string | null>(null);
+  const lastTaskCheckRef = useRef<string>('');
 
   // When active terminal session changes, query its cwd
   useEffect(() => {
@@ -216,24 +231,72 @@ export default function CodeViewer({ terminalRef, onToggleCode }: { terminalRef:
           setDirName(data.dirName || currentDir.split('/').pop() || '');
           setGitBranch(data.gitBranch || '');
           setGitChanges(data.gitChanges || []);
+          setGitRepos(data.gitRepos || []);
         })
         .catch(() => setTree([]));
     };
     fetchDir();
   }, [currentDir]);
 
+  // Poll for task completions in the current project
+  useEffect(() => {
+    if (!currentDir) return;
+    const dirName = currentDir.split('/').pop() || '';
+    const check = async () => {
+      try {
+        const res = await fetch('/api/tasks?status=done');
+        const tasks = await res.json();
+        if (!Array.isArray(tasks) || tasks.length === 0) return;
+        const latest = tasks.find((t: any) => t.projectPath === currentDir || t.projectName === dirName);
+        if (latest && latest.id !== lastTaskCheckRef.current && latest.completedAt) {
+          // Only notify if completed in the last 30s
+          const age = Date.now() - new Date(latest.completedAt).getTime();
+          if (age < 30_000) {
+            lastTaskCheckRef.current = latest.id;
+            setTaskNotification({
+              id: latest.id,
+              status: latest.status,
+              prompt: latest.prompt,
+              sessionId: latest.conversationId,
+            });
+            setTimeout(() => setTaskNotification(null), 15_000);
+          }
+        }
+      } catch {}
+    };
+    const timer = setInterval(check, 5000);
+    return () => clearInterval(timer);
+  }, [currentDir]);
+
   // Build git status map for tree coloring
   const gitMap: GitStatusMap = new Map(gitChanges.map(g => [g.path, g.status]));
+  const repoMap: GitRepoMap = new Map(gitRepos.filter(r => r.name !== '.').map(r => [r.name, { branch: r.branch, remote: r.remote }]));
 
-  const openFile = useCallback(async (path: string) => {
+  const openFile = useCallback(async (path: string, forceLoad?: boolean) => {
     if (!currentDir) return;
     setSelectedFile(path);
     setViewMode('file');
+    setFileWarning(null);
     setLoading(true);
-    const res = await fetch(`/api/code?dir=${encodeURIComponent(currentDir)}&file=${encodeURIComponent(path)}`);
+
+    const url = `/api/code?dir=${encodeURIComponent(currentDir)}&file=${encodeURIComponent(path)}${forceLoad ? '&force=1' : ''}`;
+    const res = await fetch(url);
     const data = await res.json();
-    setContent(data.content || null);
-    setLanguage(data.language || '');
+
+    if (data.binary) {
+      setContent(null);
+      setFileWarning({ type: 'binary', label: data.sizeLabel, fileType: data.fileType });
+    } else if (data.tooLarge) {
+      setContent(null);
+      setFileWarning({ type: 'tooLarge', label: data.sizeLabel });
+    } else if (data.large && !forceLoad) {
+      setContent(null);
+      setFileWarning({ type: 'large', label: data.sizeLabel });
+      setLanguage(data.language || '');
+    } else {
+      setContent(data.content || null);
+      setLanguage(data.language || '');
+    }
     setLoading(false);
   }, [currentDir]);
 
@@ -276,16 +339,86 @@ export default function CodeViewer({ terminalRef, onToggleCode }: { terminalRef:
     window.addEventListener('mouseup', onUp);
   };
 
+  // Git operations
+  const [commitMsg, setCommitMsg] = useState('');
+  const [gitLoading, setGitLoading] = useState(false);
+  const [gitResult, setGitResult] = useState<{ ok?: boolean; error?: string } | null>(null);
+
+  const gitAction = useCallback(async (action: string, extra?: any) => {
+    if (!currentDir) return;
+    setGitLoading(true);
+    setGitResult(null);
+    try {
+      const res = await fetch('/api/git', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ action, dir: currentDir, ...extra }),
+      });
+      const data = await res.json();
+      setGitResult(data);
+      // Refresh git status
+      if (data.ok) {
+        const r = await fetch(`/api/code?dir=${encodeURIComponent(currentDir)}`);
+        const d = await r.json();
+        setGitChanges(d.gitChanges || []);
+        setGitRepos(d.gitRepos || []);
+        setGitBranch(d.gitBranch || '');
+        if (action === 'commit') setCommitMsg('');
+      }
+    } catch (e: any) {
+      setGitResult({ error: e.message });
+    }
+    setGitLoading(false);
+    setTimeout(() => setGitResult(null), 5000);
+  }, [currentDir]);
+
+  const refreshAll = useCallback(() => {
+    if (!currentDir) return;
+    // Refresh tree + git
+    fetch(`/api/code?dir=${encodeURIComponent(currentDir)}`)
+      .then(r => r.json())
+      .then(data => {
+        setTree(data.tree || []);
+        setDirName(data.dirName || currentDir.split('/').pop() || '');
+        setGitBranch(data.gitBranch || '');
+        setGitChanges(data.gitChanges || []);
+        setGitRepos(data.gitRepos || []);
+      })
+      .catch(() => {});
+    // Refresh open file
+    if (selectedFile) openFile(selectedFile);
+  }, [currentDir, selectedFile, openFile]);
+
   const handleActiveSession = useCallback((session: string | null) => {
     setActiveSession(session);
   }, []);
 
   return (
     <div className="flex-1 flex flex-col min-h-0">
+      {/* Task completion notification */}
+      {taskNotification && (
+        <div className="shrink-0 px-3 py-1.5 bg-green-900/30 border-b border-green-800/50 flex items-center gap-2 text-xs">
+          <span className="text-green-400">{taskNotification.status === 'done' ? '✅' : '❌'}</span>
+          <span className="text-green-300 truncate">Task {taskNotification.id}: {taskNotification.prompt.slice(0, 60)}</span>
+          {taskNotification.sessionId && (
+            <button
+              onClick={() => {
+                // Send claude --resume to the active terminal
+                // The tmux display-message from backend already showed the notification
+                setTaskNotification(null);
+              }}
+              className="ml-auto text-[10px] text-green-400 hover:text-white shrink-0"
+            >
+              Dismiss
+            </button>
+          )}
+        </div>
+      )}
+
       {/* Terminal — top */}
       <div className={codeOpen ? 'shrink-0' : 'flex-1'} style={codeOpen ? { height: terminalHeight } : undefined}>
         <Suspense fallback={<div className="h-full flex items-center justify-center text-[var(--text-secondary)] text-xs">Loading...</div>}>
-          <WebTerminal ref={terminalRef} onActiveSession={handleActiveSession} codeOpen={codeOpen} onToggleCode={() => setCodeOpen(v => !v)} />
+          <WebTerminal ref={terminalRef} onActiveSession={handleActiveSession} onCodeOpenChange={handleCodeOpenChange} />
         </Suspense>
       </div>
 
@@ -313,7 +446,19 @@ export default function CodeViewer({ terminalRef, onToggleCode }: { terminalRef:
                     {gitBranch}
                   </span>
                 )}
+                <button
+                  onClick={refreshAll}
+                  className="text-[9px] text-[var(--text-secondary)] hover:text-[var(--text-primary)] ml-auto shrink-0"
+                  title="Refresh files & git status"
+                >
+                  ↻
+                </button>
               </div>
+              {gitRepos.find(r => r.name === '.')?.remote && (
+                <div className="text-[9px] text-[var(--text-secondary)] truncate mt-0.5" title={gitRepos.find(r => r.name === '.')!.remote}>
+                  {gitRepos.find(r => r.name === '.')!.remote.replace(/^https?:\/\//, '').replace(/^git@github\.com:/, 'github.com/').replace(/\.git$/, '')}
+                </div>
+              )}
               {gitChanges.length > 0 && (
                 <button
                   onClick={() => setShowGit(v => !v)}
@@ -324,38 +469,55 @@ export default function CodeViewer({ terminalRef, onToggleCode }: { terminalRef:
               )}
             </div>
 
-            {/* Git changes */}
+            {/* Git changes — grouped by repo */}
             {showGit && gitChanges.length > 0 && (
               <div className="border-b border-[var(--border)] max-h-48 overflow-y-auto">
-                {gitChanges.map(g => (
-                  <div
-                    key={g.path}
-                    className={`flex items-center px-2 py-1 text-xs hover:bg-[var(--bg-tertiary)] ${
-                      diffFile === g.path && viewMode === 'diff' ? 'bg-[var(--accent)]/10' : ''
-                    }`}
-                  >
-                    <span className={`text-[10px] font-mono w-4 shrink-0 ${
-                      g.status.includes('M') ? 'text-yellow-500' :
-                      g.status.includes('A') || g.status.includes('?') ? 'text-green-500' :
-                      g.status.includes('D') ? 'text-red-500' :
-                      'text-[var(--text-secondary)]'
-                    }`}>
-                      {g.status.includes('?') ? '+' : g.status[0]}
-                    </span>
-                    <button
-                      onClick={() => openDiff(g.path)}
-                      className="flex-1 text-left truncate text-[var(--text-secondary)] hover:text-[var(--text-primary)] ml-1"
-                      title="View diff"
-                    >
-                      {g.path}
-                    </button>
-                    <button
-                      onClick={(e) => { e.stopPropagation(); locateFile(g.path); }}
-                      className="text-[10px] text-[var(--text-secondary)] hover:text-[var(--accent)] hover:bg-[var(--accent)]/10 px-1.5 py-0.5 rounded shrink-0"
-                      title="Locate in file tree"
+                {gitRepos.map(repo => (
+                  <div key={repo.name}>
+                    {/* Repo header — only show if multiple repos */}
+                    {gitRepos.length > 1 && (
+                      <div className="px-2 py-1 text-[9px] text-[var(--text-secondary)] bg-[var(--bg-tertiary)] sticky top-0" title={repo.remote}>
+                        <div className="flex items-center gap-1.5">
+                          <span className="font-semibold text-[var(--text-primary)]">{repo.name}</span>
+                          <span className="text-[var(--accent)]">{repo.branch}</span>
+                          <span className="ml-auto">{repo.changes.length}</span>
+                        </div>
+                        {repo.remote && (
+                          <div className="text-[8px] truncate mt-0.5">{repo.remote.replace(/^https?:\/\//, '').replace(/\.git$/, '')}</div>
+                        )}
+                      </div>
+                    )}
+                    {repo.changes.map(g => (
+                      <div
+                        key={g.path}
+                        className={`flex items-center px-2 py-1 text-xs hover:bg-[var(--bg-tertiary)] ${
+                          diffFile === g.path && viewMode === 'diff' ? 'bg-[var(--accent)]/10' : ''
+                        }`}
+                      >
+                        <span className={`text-[10px] font-mono w-4 shrink-0 ${
+                          g.status.includes('M') ? 'text-yellow-500' :
+                          g.status.includes('A') || g.status.includes('?') ? 'text-green-500' :
+                          g.status.includes('D') ? 'text-red-500' :
+                          'text-[var(--text-secondary)]'
+                        }`}>
+                          {g.status.includes('?') ? '+' : g.status[0]}
+                        </span>
+                        <button
+                          onClick={() => openDiff(g.path)}
+                          className="flex-1 text-left truncate text-[var(--text-secondary)] hover:text-[var(--text-primary)] ml-1 group relative"
+                          title={`${g.path}${gitRepos.length > 1 ? ` (${repo.name} · ${repo.branch})` : ''}`}
+                        >
+                          {gitRepos.length > 1 ? g.path.replace(repo.name + '/', '') : g.path}
+                        </button>
+                        <button
+                          onClick={(e) => { e.stopPropagation(); locateFile(g.path); }}
+                          className="text-[10px] text-[var(--text-secondary)] hover:text-[var(--accent)] hover:bg-[var(--accent)]/10 px-1.5 py-0.5 rounded shrink-0"
+                          title="Locate in file tree"
                     >
                       file
                     </button>
+                      </div>
+                    ))}
                   </div>
                 ))}
               </div>
@@ -396,10 +558,53 @@ export default function CodeViewer({ terminalRef, onToggleCode }: { terminalRef:
                 )
               ) : (
                 tree.map(node => (
-                  <TreeNode key={node.path} node={node} depth={0} selected={selectedFile} onSelect={openFile} gitMap={gitMap} />
+                  <TreeNode key={node.path} node={node} depth={0} selected={selectedFile} onSelect={openFile} gitMap={gitMap} repoMap={repoMap} />
                 ))
               )}
             </div>
+
+            {/* Git actions — bottom of sidebar */}
+            {currentDir && (gitChanges.length > 0 || gitRepos.length > 0) && (
+              <div className="border-t border-[var(--border)] shrink-0 p-2 space-y-1.5">
+                <div className="flex gap-1.5">
+                  <input
+                    value={commitMsg}
+                    onChange={e => setCommitMsg(e.target.value)}
+                    onKeyDown={e => e.key === 'Enter' && commitMsg.trim() && gitAction('commit', { message: commitMsg.trim() })}
+                    placeholder="Commit message..."
+                    className="flex-1 text-[10px] bg-[var(--bg-tertiary)] border border-[var(--border)] rounded px-2 py-1 text-[var(--text-primary)] focus:outline-none focus:border-[var(--accent)]"
+                  />
+                  <button
+                    onClick={() => commitMsg.trim() && gitAction('commit', { message: commitMsg.trim() })}
+                    disabled={gitLoading || !commitMsg.trim() || gitChanges.length === 0}
+                    className="text-[9px] px-2 py-1 bg-[var(--accent)] text-white rounded hover:opacity-90 disabled:opacity-50 shrink-0"
+                  >
+                    Commit
+                  </button>
+                </div>
+                <div className="flex gap-1.5">
+                  <button
+                    onClick={() => gitAction('push')}
+                    disabled={gitLoading}
+                    className="flex-1 text-[9px] py-1 border border-[var(--accent)] text-[var(--accent)] rounded hover:bg-[var(--accent)] hover:text-white disabled:opacity-50"
+                  >
+                    Push
+                  </button>
+                  <button
+                    onClick={() => gitAction('pull')}
+                    disabled={gitLoading}
+                    className="flex-1 text-[9px] py-1 text-[var(--text-secondary)] border border-[var(--border)] rounded hover:text-[var(--text-primary)] hover:border-[var(--text-secondary)] disabled:opacity-50"
+                  >
+                    Pull
+                  </button>
+                </div>
+                {gitResult && (
+                  <div className={`text-[9px] ${gitResult.ok ? 'text-green-400' : 'text-red-400'}`}>
+                    {gitResult.ok ? '✅ Done' : `❌ ${gitResult.error}`}
+                  </div>
+                )}
+              </div>
+            )}
           </aside>
         )}
 
@@ -433,6 +638,38 @@ export default function CodeViewer({ terminalRef, onToggleCode }: { terminalRef:
             <div className="flex-1 flex items-center justify-center">
               <div className="text-xs text-[var(--text-secondary)]">Loading...</div>
             </div>
+          ) : fileWarning ? (
+            <div className="flex-1 flex items-center justify-center">
+              <div className="text-center space-y-3 p-6">
+                {fileWarning.type === 'binary' && (
+                  <>
+                    <div className="text-3xl">🚫</div>
+                    <p className="text-sm text-[var(--text-primary)]">Binary file cannot be displayed</p>
+                    <p className="text-xs text-[var(--text-secondary)]">{fileWarning.fileType?.toUpperCase()} · {fileWarning.label}</p>
+                  </>
+                )}
+                {fileWarning.type === 'tooLarge' && (
+                  <>
+                    <div className="text-3xl">⚠️</div>
+                    <p className="text-sm text-[var(--text-primary)]">File too large to display</p>
+                    <p className="text-xs text-[var(--text-secondary)]">{fileWarning.label} — exceeds 2 MB limit</p>
+                  </>
+                )}
+                {fileWarning.type === 'large' && (
+                  <>
+                    <div className="text-3xl">📄</div>
+                    <p className="text-sm text-[var(--text-primary)]">Large file: {fileWarning.label}</p>
+                    <p className="text-xs text-[var(--text-secondary)]">This file may slow down the browser</p>
+                    <button
+                      onClick={() => selectedFile && openFile(selectedFile, true)}
+                      className="text-xs px-4 py-1.5 bg-[var(--accent)] text-white rounded hover:opacity-90 mt-2"
+                    >
+                      Open anyway
+                    </button>
+                  </>
+                )}
+              </div>
+            </div>
           ) : viewMode === 'diff' && diffContent ? (
             <div className="flex-1 overflow-auto bg-[var(--bg-primary)]">
               <pre className="p-4 text-[12px] leading-[1.5] font-mono whitespace-pre" style={{ fontFamily: 'Menlo, Monaco, "Courier New", monospace', tabSize: 2 }}>

package/components/Dashboard.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useEffect, useCallback, useRef, lazy, Suspense } from 'react';
+import { signOut } from 'next-auth/react';
 import TaskBoard from './TaskBoard';
 import TaskDetail from './TaskDetail';
 import SessionView from './SessionView';
@@ -13,6 +14,8 @@ import type { WebTerminalHandle } from './WebTerminal';
 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'));
 
 interface UsageSummary {
   provider: string;
@@ -35,17 +38,30 @@ interface ProjectInfo {
 }
 
 export default function Dashboard({ user }: { user: any }) {
-  const [viewMode, setViewMode] = useState<'tasks' | 'sessions' | 'terminal' | 'docs'>('terminal');
+  const [viewMode, setViewMode] = useState<'tasks' | 'sessions' | 'terminal' | 'docs' | 'projects' | 'preview'>('terminal');
   const [tasks, setTasks] = useState<Task[]>([]);
   const [activeTaskId, setActiveTaskId] = useState<string | null>(null);
   const [showNewTask, setShowNewTask] = useState(false);
   const [showSettings, setShowSettings] = useState(false);
-  const [showCode, setShowCode] = useState(true);
   const [usage, setUsage] = useState<UsageSummary[]>([]);
   const [providers, setProviders] = useState<ProviderInfo[]>([]);
   const [projects, setProjects] = useState<ProjectInfo[]>([]);
+  const [onlineCount, setOnlineCount] = useState<{ total: number; remote: number }>({ total: 0, remote: 0 });
   const terminalRef = useRef<WebTerminalHandle>(null);
 
+  // Heartbeat for online user tracking
+  useEffect(() => {
+    const ping = () => {
+      fetch('/api/online', { method: 'POST' })
+        .then(r => r.json())
+        .then(setOnlineCount)
+        .catch(() => {});
+    };
+    ping();
+    const id = setInterval(ping, 15_000); // every 15s
+    return () => clearInterval(id);
+  }, []);
+
   const fetchData = useCallback(async () => {
     const [tasksRes, statusRes, projectsRes] = await Promise.all([
       fetch('/api/tasks'),
@@ -100,6 +116,16 @@ export default function Dashboard({ user }: { user: any }) {
             >
               Docs
             </button>
+            <button
+              onClick={() => setViewMode('projects')}
+              className={`text-[11px] px-2.5 py-0.5 rounded transition-colors ${
+                viewMode === 'projects'
+                  ? 'bg-[var(--bg-secondary)] text-[var(--text-primary)] shadow-sm'
+                  : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
+              }`}
+            >
+              Projects
+            </button>
             <button
               onClick={() => setViewMode('tasks')}
               className={`text-[11px] px-2.5 py-0.5 rounded transition-colors ${
@@ -120,6 +146,16 @@ export default function Dashboard({ user }: { user: any }) {
             >
               Sessions
             </button>
+            <button
+              onClick={() => setViewMode('preview')}
+              className={`text-[11px] px-2.5 py-0.5 rounded transition-colors ${
+                viewMode === 'preview'
+                  ? 'bg-[var(--bg-secondary)] text-[var(--text-primary)] shadow-sm'
+                  : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
+              }`}
+            >
+              Demo Preview
+            </button>
           </div>
 
           {viewMode === 'tasks' && (
@@ -138,6 +174,15 @@ export default function Dashboard({ user }: { user: any }) {
             </button>
           )}
           <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` : ''}`}>
+              <span className="text-green-500">●</span>
+              {onlineCount.total}
+              {onlineCount.remote > 0 && (
+                <span className="text-[var(--accent)]">({onlineCount.remote} remote)</span>
+              )}
+            </span>
+          )}
           <button
             onClick={() => setShowSettings(true)}
             className="text-xs text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
@@ -145,6 +190,12 @@ export default function Dashboard({ user }: { user: any }) {
             Settings
           </button>
           <span className="text-xs text-[var(--text-secondary)]">{user?.name || 'local'}</span>
+          <button
+            onClick={() => signOut({ callbackUrl: '/login' })}
+            className="text-xs text-[var(--text-secondary)] hover:text-[var(--red)]"
+          >
+            Logout
+          </button>
         </div>
       </header>
 
@@ -252,6 +303,20 @@ export default function Dashboard({ user }: { user: any }) {
           />
         ) : null}
 
+        {/* Projects */}
+        {viewMode === 'projects' && (
+          <Suspense fallback={<div className="flex-1 flex items-center justify-center text-[var(--text-secondary)]">Loading...</div>}>
+            <ProjectManager />
+          </Suspense>
+        )}
+
+        {/* Preview */}
+        {viewMode === 'preview' && (
+          <Suspense fallback={<div className="flex-1 flex items-center justify-center text-[var(--text-secondary)]">Loading...</div>}>
+            <PreviewPanel />
+          </Suspense>
+        )}
+
         {/* Docs — always mounted to keep terminal session alive */}
         <div className={`flex-1 min-h-0 flex ${viewMode === 'docs' ? '' : 'hidden'}`}>
           <Suspense fallback={<div className="flex-1 flex items-center justify-center text-[var(--text-secondary)]">Loading...</div>}>
@@ -262,7 +327,7 @@ export default function Dashboard({ user }: { user: any }) {
         {/* Code — terminal + file browser, always mounted to keep terminal sessions alive */}
         <div className={`flex-1 min-h-0 flex ${viewMode === 'terminal' ? '' : 'hidden'}`}>
           <Suspense fallback={<div className="flex-1 flex items-center justify-center text-[var(--text-secondary)]">Loading...</div>}>
-            <CodeViewer terminalRef={terminalRef} onToggleCode={() => setShowCode(v => !v)} />
+            <CodeViewer terminalRef={terminalRef} />
           </Suspense>
         </div>
       </div>