@aion0/forge 0.2.1 → 0.2.3

package/components/CodeViewer.tsx

@@ -178,6 +178,7 @@ export default function CodeViewer({ terminalRef }: { terminalRef: React.RefObje
   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);
@@ -190,8 +191,10 @@ export default function CodeViewer({ terminalRef }: { terminalRef: React.RefObje
   }, []);
   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(() => {
@@ -235,19 +238,65 @@ export default function CodeViewer({ terminalRef }: { terminalRef: React.RefObje
     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]);
 
@@ -290,12 +339,82 @@ export default function CodeViewer({ terminalRef }: { terminalRef: React.RefObje
     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>}>
@@ -327,6 +446,13 @@ export default function CodeViewer({ terminalRef }: { terminalRef: React.RefObje
                     {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}>
@@ -436,6 +562,49 @@ export default function CodeViewer({ terminalRef }: { terminalRef: React.RefObje
                 ))
               )}
             </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>
         )}
 
@@ -469,6 +638,38 @@ export default function CodeViewer({ terminalRef }: { terminalRef: React.RefObje
             <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,9 @@ 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'));
+const PipelineView = lazy(() => import('./PipelineView'));
 
 interface UsageSummary {
   provider: string;
@@ -35,7 +39,7 @@ 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' | 'pipelines'>('terminal');
   const [tasks, setTasks] = useState<Task[]>([]);
   const [activeTaskId, setActiveTaskId] = useState<string | null>(null);
   const [showNewTask, setShowNewTask] = useState(false);
@@ -43,8 +47,22 @@ export default function Dashboard({ user }: { user: any }) {
   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'),
@@ -99,6 +117,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 ${
@@ -109,6 +137,16 @@ export default function Dashboard({ user }: { user: any }) {
             >
               Tasks
             </button>
+            <button
+              onClick={() => setViewMode('pipelines')}
+              className={`text-[11px] px-2.5 py-0.5 rounded transition-colors ${
+                viewMode === 'pipelines'
+                  ? 'bg-[var(--bg-secondary)] text-[var(--text-primary)] shadow-sm'
+                  : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
+              }`}
+            >
+              Pipelines
+            </button>
             <button
               onClick={() => setViewMode('sessions')}
               className={`text-[11px] px-2.5 py-0.5 rounded transition-colors ${
@@ -119,6 +157,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' && (
@@ -137,6 +185,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)]"
@@ -144,6 +201,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>
 
@@ -251,6 +314,27 @@ 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>
+        )}
+
+        {/* Pipelines */}
+        {viewMode === 'pipelines' && (
+          <Suspense fallback={<div className="flex-1 flex items-center justify-center text-[var(--text-secondary)]">Loading...</div>}>
+            <PipelineView />
+          </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>}>

package/components/DocsViewer.tsx

@@ -9,6 +9,7 @@ interface FileNode {
   name: string;
   path: string;
   type: 'file' | 'dir';
+  fileType?: 'md' | 'image' | 'other';
   children?: FileNode[];
 }
 
@@ -41,16 +42,20 @@ function TreeNode({ node, depth, selected, onSelect }: {
   }
 
   const isSelected = selected === node.path;
+  const canOpen = node.fileType === 'md' || node.fileType === 'image';
+
   return (
     <button
-      onClick={() => onSelect(node.path)}
+      onClick={() => canOpen && onSelect(node.path)}
       className={`w-full text-left flex items-center gap-1 px-1 py-0.5 rounded text-xs truncate ${
-        isSelected ? 'bg-[var(--accent)]/20 text-[var(--accent)]' : 'hover:bg-[var(--bg-tertiary)] text-[var(--text-secondary)]'
+        !canOpen ? 'text-[var(--text-secondary)]/40 cursor-default'
+        : isSelected ? 'bg-[var(--accent)]/20 text-[var(--accent)]'
+        : 'hover:bg-[var(--bg-tertiary)] text-[var(--text-secondary)]'
       }`}
       style={{ paddingLeft: depth * 12 + 16 }}
       title={node.path}
     >
-      {node.name.replace(/\.md$/, '')}
+      {node.fileType === 'image' ? '🖼 ' : ''}{node.name.replace(/\.md$/, '')}
     </button>
   );
 }
@@ -92,13 +97,39 @@ export default function DocsViewer() {
 
   useEffect(() => { fetchTree(activeRoot); }, [activeRoot, fetchTree]);
 
+  // Re-fetch when tab becomes visible (settings may have changed)
+  useEffect(() => {
+    const handleVisibility = () => {
+      if (!document.hidden) fetchTree(activeRoot);
+    };
+    document.addEventListener('visibilitychange', handleVisibility);
+    return () => document.removeEventListener('visibilitychange', handleVisibility);
+  }, [activeRoot, fetchTree]);
+
+  const [fileWarning, setFileWarning] = useState<string | null>(null);
+
   // Fetch file content
+  const isImageFile = (path: string) => /\.(png|jpg|jpeg|gif|svg|webp|bmp|ico|avif)$/i.test(path);
+
   const openFile = useCallback(async (path: string) => {
     setSelectedFile(path);
+    setFileWarning(null);
+
+    if (isImageFile(path)) {
+      setContent(null);
+      setLoading(false);
+      return; // images rendered directly via img tag
+    }
+
     setLoading(true);
     const res = await fetch(`/api/docs?root=${activeRoot}&file=${encodeURIComponent(path)}`);
     const data = await res.json();
-    setContent(data.content || null);
+    if (data.tooLarge) {
+      setContent(null);
+      setFileWarning(`File too large (${data.sizeLabel})`);
+    } else {
+      setContent(data.content || null);
+    }
     setLoading(false);
   }, [activeRoot]);
 
@@ -145,7 +176,7 @@ export default function DocsViewer() {
         {sidebarOpen && (
           <aside className="w-56 border-r border-[var(--border)] flex flex-col shrink-0">
             {/* Root selector */}
-            {roots.length > 1 && (
+            {roots.length > 0 && (
               <div className="p-2 border-b border-[var(--border)]">
                 <select
                   value={activeRoot}
@@ -157,6 +188,18 @@ export default function DocsViewer() {
               </div>
             )}
 
+            {/* Header with refresh */}
+            <div className="px-3 py-1.5 border-b border-[var(--border)] flex items-center">
+              <span className="text-[10px] text-[var(--text-secondary)] truncate">{roots[activeRoot] || 'Docs'}</span>
+              <button
+                onClick={() => { fetchTree(activeRoot); if (selectedFile) openFile(selectedFile); }}
+                className="text-[9px] text-[var(--text-secondary)] hover:text-[var(--text-primary)] ml-auto shrink-0"
+                title="Refresh files"
+              >
+                ↻
+              </button>
+            </div>
+
             {/* Search */}
             <div className="p-2 border-b border-[var(--border)]">
               <input
@@ -219,7 +262,22 @@ export default function DocsViewer() {
           </div>
 
           {/* Content */}
-          {selectedFile && content ? (
+          {fileWarning ? (
+            <div className="flex-1 flex items-center justify-center text-[var(--text-secondary)]">
+              <div className="text-center space-y-2">
+                <div className="text-3xl">⚠️</div>
+                <p className="text-sm">{fileWarning}</p>
+              </div>
+            </div>
+          ) : selectedFile && isImageFile(selectedFile) ? (
+            <div className="flex-1 overflow-auto flex items-center justify-center p-6 bg-[var(--bg-tertiary)]">
+              <img
+                src={`/api/docs?root=${activeRoot}&image=${encodeURIComponent(selectedFile)}`}
+                alt={selectedFile}
+                className="max-w-full max-h-full object-contain rounded shadow-lg"
+              />
+            </div>
+          ) : selectedFile && content ? (
             <div className="flex-1 overflow-y-auto px-8 py-6">
               {loading ? (
                 <div className="text-xs text-[var(--text-secondary)]">Loading...</div>

package/components/NewTaskModal.tsx

@@ -35,7 +35,7 @@ export default function NewTaskModal({
 }: {
   onClose: () => void;
   onCreate: (data: TaskData) => void;
-  editTask?: { id: string; projectName: string; prompt: string; priority: number; mode: TaskMode };
+  editTask?: { id: string; projectName: string; prompt: string; priority: number; mode: TaskMode; scheduledAt?: string };
 }) {
   const [projects, setProjects] = useState<Project[]>([]);
   const [selectedProject, setSelectedProject] = useState(editTask?.projectName || '');
@@ -60,9 +60,9 @@ export default function NewTaskModal({
   const [autoSessionId, setAutoSessionId] = useState<string | null>(null);
 
   // Scheduling
-  const [scheduleMode, setScheduleMode] = useState<'now' | 'delay' | 'time'>('now');
+  const [scheduleMode, setScheduleMode] = useState<'now' | 'delay' | 'time'>(editTask?.scheduledAt ? 'time' : 'now');
   const [delayMinutes, setDelayMinutes] = useState(30);
-  const [scheduledTime, setScheduledTime] = useState('');
+  const [scheduledTime, setScheduledTime] = useState(editTask?.scheduledAt ? new Date(editTask.scheduledAt).toISOString().slice(0, 16) : '');
 
   useEffect(() => {
     fetch('/api/projects').then(r => r.json()).then((p: Project[]) => {
@@ -88,15 +88,15 @@ export default function NewTaskModal({
       .catch(() => setSessions([]));
   }, [selectedProject]);
 
-  const getScheduledAt = (): string | undefined => {
-    if (scheduleMode === 'now') return undefined;
+  const getScheduledAt = (): string | null | undefined => {
+    if (scheduleMode === 'now') return editTask ? null : undefined;  // null clears existing schedule
     if (scheduleMode === 'delay') {
       return new Date(Date.now() + delayMinutes * 60_000).toISOString();
     }
     if (scheduleMode === 'time' && scheduledTime) {
       return new Date(scheduledTime).toISOString();
     }
-    return undefined;
+    return editTask ? null : undefined;
   };
 
   const handleSubmit = (e: React.FormEvent) => {
@@ -110,7 +110,7 @@ export default function NewTaskModal({
       projectName: selectedProject,
       prompt: taskMode === 'monitor' ? `Monitor session ${selectedSessionId}` : prompt.trim(),
       priority,
-      scheduledAt: getScheduledAt(),
+      scheduledAt: getScheduledAt() ?? undefined,
       mode: taskMode,
     };