projax 3.3.69 → 3.3.71

package/dist/prxi.tsx

@@ -22,8 +22,21 @@ import {
   removeProject,
   getCurrentBranch,
   Project,
+  Agent,
+  AgentCliType,
+  RunningAgent,
 } from './core-bridge';
 import { getProjectScripts, getRunningProcessesClean, runScript, runScriptInBackground, stopScript } from './script-runner';
+import {
+  getAgentsByProject,
+  getRunningAgents,
+  launchAgentInTerminal,
+  createAgent,
+  updateAgent,
+  deleteAgent,
+  CLI_DISPLAY_NAMES,
+  VALID_CLI_TYPES,
+} from './agent-runner';
 import { spawn } from 'child_process';
 import * as path from 'path';
 import * as os from 'os';
@@ -68,10 +81,36 @@ function truncateText(text: string, maxLength: number): string {
 }
 
 // Type definitions for views and filters
-type ViewType = 'projects' | 'workspaces' | 'processes' | 'settings';
+type ViewType = 'projects' | 'tasks' | 'agents' | 'processes' | 'workspaces' | 'settings';
 type FilterType = 'all' | 'name' | 'path' | 'ports' | 'tags' | 'running';
 type SortType = 'name-asc' | 'name-desc' | 'recent' | 'oldest' | 'running';
 
+// Task types
+interface TodoTask {
+  id: number;
+  list_id: number;
+  title: string;
+  status: 'pending' | 'in_progress' | 'completed' | 'blocked';
+  priority: 'low' | 'medium' | 'high' | 'urgent';
+  assignee_agent_id: number | null;
+  worktree_path: string | null;
+}
+
+// Task status config
+const taskStatusConfig: Record<string, { color: string; icon: string }> = {
+  pending: { color: colors.textTertiary, icon: '○' },
+  in_progress: { color: colors.accentOrange, icon: '◐' },
+  completed: { color: colors.accentGreen, icon: '●' },
+  blocked: { color: '#f85149', icon: '✗' },
+};
+
+const taskPriorityColors: Record<string, string> = {
+  low: colors.textTertiary,
+  medium: '#d29922',
+  high: colors.accentOrange,
+  urgent: '#f85149',
+};
+
 const FILTER_TYPES: FilterType[] = ['all', 'name', 'path', 'ports', 'tags', 'running'];
 const SORT_TYPES: SortType[] = ['name-asc', 'name-desc', 'recent', 'oldest', 'running'];
 
@@ -138,9 +177,11 @@ const HelpModal: React.FC<HelpModalProps> = ({ onClose }) => {
       <Text> </Text>
       <Text color={colors.accentCyan}>View Navigation:</Text>
       <Text>  1          Projects view</Text>
-      <Text>  2          Workspaces view</Text>
-      <Text>  3          Global processes view</Text>
-      <Text>  4          Settings</Text>
+      <Text>  2          Tasks view (requires selected project)</Text>
+      <Text>  3          Agents view (requires selected project)</Text>
+      <Text>  4          Processes view</Text>
+      <Text>  5          Workspaces view</Text>
+      <Text>  6          Settings</Text>
       <Text>  T          Toggle terminal output panel</Text>
       <Text> </Text>
       <Text color={colors.accentCyan}>Projects View - Navigation:</Text>
@@ -694,10 +735,10 @@ const ProjectDetailsComponent: React.FC<ProjectDetailsProps> = ({
             .then(res => {
               if (res.ok) setNpmPackage(pkg.name);
             })
-            .catch(() => {});
+            .catch(() => { /* Ignore fetch errors */ });
         }
       }
-    } catch {}
+    } catch (e) { /* Ignore parsing or file read errors */ }
   }, [project]);
 
   if (!project) {
@@ -1207,6 +1248,23 @@ const App: React.FC = () => {
     'chrome', 'firefox', 'safari', 'edge', 'custom',
   ];
 
+  // Agents state
+  const [agents, setAgents] = useState<Agent[]>([]);
+  const [selectedAgentIndex, setSelectedAgentIndex] = useState(0);
+  const [runningAgentsList, setRunningAgentsList] = useState<RunningAgent[]>([]);
+  const [showAddAgentModal, setShowAddAgentModal] = useState(false);
+  const [editingAgent, setEditingAgent] = useState<Agent | null>(null);
+  const [newAgentName, setNewAgentName] = useState('');
+  const [newAgentCliType, setNewAgentCliType] = useState<AgentCliType>('claude');
+  const [newAgentCliTypeIndex, setNewAgentCliTypeIndex] = useState(0);
+  const [agentInputField, setAgentInputField] = useState<'name' | 'cli_type' | 'model' | 'api_key'>('name');
+  const [newAgentModel, setNewAgentModel] = useState('');
+  const [newAgentApiKey, setNewAgentApiKey] = useState('');
+
+  // Tasks state
+  const [tasks, setTasks] = useState<TodoTask[]>([]);
+  const [selectedTaskIdx, setSelectedTaskIdx] = useState(0);
+
   // Get terminal dimensions
   const terminalHeight = process.stdout.rows || 24;
   const availableHeight = terminalHeight - 4; // Subtract status bar (increased for view indicator)
@@ -1227,14 +1285,23 @@ const App: React.FC = () => {
       // Use defaults
     }
 
-    // Refresh running processes and git branches every 5 seconds
+    // Refresh running processes, git branches, and running agents every 5 seconds
     const interval = setInterval(() => {
       loadRunningProcesses();
+      loadRunningAgentsList();
     }, 5000);
 
     return () => clearInterval(interval);
   }, []);
 
+  // Load agents when switching to agents view or when selected project changes
+  useEffect(() => {
+    const currentProject = projects.length > 0 ? projects[selectedIndex] : null;
+    if (currentView === 'agents' && currentProject) {
+      loadAgentsForProject(currentProject.id);
+    }
+  }, [currentView, projects, selectedIndex]);
+
   // Load git branches when projects change
   useEffect(() => {
     if (allProjects.length > 0) {
@@ -1265,12 +1332,12 @@ const App: React.FC = () => {
     setDetailSelectedScript(0); // Reset selected script
   }, [selectedIndex]);
 
-  // Load workspaces when switching to workspaces view
-  useEffect(() => {
-    if (currentView === 'workspaces' && workspaces.length === 0) {
-      loadWorkspacesFromApi();
-    }
-  }, [currentView]);
+  // Load workspaces when switching to workspaces view (legacy - kept for future use)
+  // useEffect(() => {
+  //   if (currentView === 'workspaces' && workspaces.length === 0) {
+  //     loadWorkspacesFromApi();
+  //   }
+  // }, [currentView]);
 
   // Update scroll offset when selected index changes
   useEffect(() => {
@@ -1301,6 +1368,27 @@ const App: React.FC = () => {
     }
   };
 
+  const loadAgentsForProject = (projectId: number) => {
+    try {
+      const projectAgents = getAgentsByProject(projectId);
+      setAgents(projectAgents);
+      if (selectedAgentIndex >= projectAgents.length) {
+        setSelectedAgentIndex(Math.max(0, projectAgents.length - 1));
+      }
+    } catch (error) {
+      setAgents([]);
+    }
+  };
+
+  const loadRunningAgentsList = () => {
+    try {
+      const running = getRunningAgents();
+      setRunningAgentsList(running);
+    } catch (error) {
+      setRunningAgentsList([]);
+    }
+  };
+
   const loadProjects = () => {
     const loadedProjects = getAllProjects();
     setAllProjects(loadedProjects);
@@ -1729,62 +1817,135 @@ const App: React.FC = () => {
       return;
     }
 
-    // Handle navigation in workspaces view
-    if (currentView === 'workspaces') {
-      if (key.upArrow || input === 'k') {
-        setSelectedWorkspaceIndex((prev) => Math.max(0, prev - 1));
-        return;
-      }
-      if (key.downArrow || input === 'j') {
-        setSelectedWorkspaceIndex((prev) => Math.min(workspaces.length - 1, prev + 1));
+    // Tasks view navigation is handled in renderTasksView
+
+    // Handle navigation in agents view
+    if (currentView === 'agents') {
+      // Handle add agent modal
+      if (showAddAgentModal) {
+        if (key.escape) {
+          setShowAddAgentModal(false);
+          setNewAgentName('');
+          setNewAgentModel('');
+          setNewAgentApiKey('');
+          setNewAgentCliTypeIndex(0);
+          setAgentInputField('name');
+          return;
+        }
+        if (key.tab) {
+          // Cycle through input fields
+          const fields: Array<'name' | 'cli_type' | 'model' | 'api_key'> = ['name', 'cli_type', 'model', 'api_key'];
+          const currentIdx = fields.indexOf(agentInputField);
+          setAgentInputField(fields[(currentIdx + 1) % fields.length]);
+          return;
+        }
+        if (agentInputField === 'cli_type') {
+          if (key.upArrow || input === 'k') {
+            setNewAgentCliTypeIndex(prev => Math.max(0, prev - 1));
+            setNewAgentCliType(VALID_CLI_TYPES[Math.max(0, newAgentCliTypeIndex - 1)]);
+            return;
+          }
+          if (key.downArrow || input === 'j') {
+            setNewAgentCliTypeIndex(prev => Math.min(VALID_CLI_TYPES.length - 1, prev + 1));
+            setNewAgentCliType(VALID_CLI_TYPES[Math.min(VALID_CLI_TYPES.length - 1, newAgentCliTypeIndex + 1)]);
+            return;
+          }
+        }
+        if (key.return && agentInputField === 'api_key' && newAgentName.trim()) {
+          // Create agent
+          if (selectedProject) {
+            const agent = createAgent(selectedProject.id, {
+              name: newAgentName.trim(),
+              cli_type: newAgentCliType,
+              model: newAgentModel.trim() || null,
+              api_key: newAgentApiKey.trim() || null,
+            });
+            if (agent) {
+              loadAgentsForProject(selectedProject.id);
+              setShowAddAgentModal(false);
+              setNewAgentName('');
+              setNewAgentModel('');
+              setNewAgentApiKey('');
+              setNewAgentCliTypeIndex(0);
+              setAgentInputField('name');
+            } else {
+              setError('Failed to create agent');
+            }
+          }
+          return;
+        }
+        // Handle text input
+        if (agentInputField === 'name') {
+          if (key.backspace || key.delete) {
+            setNewAgentName(prev => prev.slice(0, -1));
+          } else if (input && input.length === 1 && !key.ctrl && !key.meta) {
+            setNewAgentName(prev => prev + input);
+          }
+          return;
+        }
+        if (agentInputField === 'model') {
+          if (key.backspace || key.delete) {
+            setNewAgentModel(prev => prev.slice(0, -1));
+          } else if (input && input.length === 1 && !key.ctrl && !key.meta) {
+            setNewAgentModel(prev => prev + input);
+          }
+          return;
+        }
+        if (agentInputField === 'api_key') {
+          if (key.backspace || key.delete) {
+            setNewAgentApiKey(prev => prev.slice(0, -1));
+          } else if (input && input.length === 1 && !key.ctrl && !key.meta) {
+            setNewAgentApiKey(prev => prev + input);
+          }
+          return;
+        }
         return;
       }
-    }
 
-    // Handle navigation in processes view
-    if (currentView === 'processes') {
+      // Navigation
       if (key.upArrow || input === 'k') {
-        setSelectedProcessIndex((prev) => Math.max(0, prev - 1));
+        setSelectedAgentIndex(prev => Math.max(0, prev - 1));
         return;
       }
       if (key.downArrow || input === 'j') {
-        setSelectedProcessIndex((prev) => Math.min(runningProcesses.length - 1, prev + 1));
+        setSelectedAgentIndex(prev => Math.min(agents.length - 1, prev + 1));
         return;
       }
-      if (input === 'x' && runningProcesses.length > 0) {
-        // Stop the selected process
-        const selectedProc = runningProcesses[selectedProcessIndex];
-        if (!selectedProc) return;
-        setIsLoading(true);
-        setLoadingMessage(`Stopping process ${selectedProc.pid}...`);
-        setTimeout(async () => {
-          try {
-            await stopScript(selectedProc.pid);
-            await loadRunningProcesses();
-            setIsLoading(false);
-          } catch (err) {
-            setIsLoading(false);
-            setError(err instanceof Error ? err.message : String(err));
+      // Add agent
+      if (input === 'a') {
+        setShowAddAgentModal(true);
+        setAgentInputField('name');
+        return;
+      }
+      // Launch agent
+      if (key.return || input === 'l') {
+        const agent = agents[selectedAgentIndex];
+        if (agent && selectedProject) {
+          const success = launchAgentInTerminal(agent, selectedProject.path);
+          if (success) {
+            setError(null);
+          } else {
+            setError('Failed to launch agent');
           }
-        }, 100);
+        }
         return;
       }
-      if (input === 'X' && runningProcesses.length > 0) {
-        // Stop ALL processes
-        setIsLoading(true);
-        setLoadingMessage('Stopping all processes...');
-        setTimeout(async () => {
-          try {
-            for (const proc of runningProcesses) {
-              await stopScript(proc.pid);
-            }
-            await loadRunningProcesses();
-            setIsLoading(false);
-          } catch (err) {
-            setIsLoading(false);
-            setError(err instanceof Error ? err.message : String(err));
+      // Delete agent
+      if (input === 'd') {
+        const agent = agents[selectedAgentIndex];
+        if (agent) {
+          const success = deleteAgent(agent.id);
+          if (success && selectedProject) {
+            loadAgentsForProject(selectedProject.id);
+          } else {
+            setError('Failed to delete agent');
           }
-        }, 100);
+        }
+        return;
+      }
+      // Back to projects
+      if (key.escape) {
+        setCurrentView('projects');
         return;
       }
     }
@@ -1835,14 +1996,27 @@ const App: React.FC = () => {
       return;
     }
     if (input === '2') {
-      setCurrentView('workspaces');
+      setCurrentView('tasks');
       return;
     }
     if (input === '3') {
-      setCurrentView('processes');
+      if (selectedProject) {
+        setCurrentView('agents');
+        loadAgentsForProject(selectedProject.id);
+      } else {
+        setError('Select a project first to manage agents');
+      }
       return;
     }
     if (input === '4') {
+      setCurrentView('processes');
+      return;
+    }
+    if (input === '5') {
+      setCurrentView('workspaces');
+      return;
+    }
+    if (input === '6') {
       setCurrentView('settings');
       return;
     }
@@ -2557,6 +2731,229 @@ const App: React.FC = () => {
     );
   };
 
+  // Load tasks when switching to tasks view
+  useEffect(() => {
+    if (currentView === 'tasks' && selectedProject) {
+      loadTasksForProject();
+    }
+  }, [currentView, selectedProject]);
+
+  const loadTasksForProject = async () => {
+    if (!selectedProject) return;
+    try {
+      const ports = [38124, 38125, 38126];
+      let apiBaseUrl = '';
+      for (const port of ports) {
+        try {
+          const res = await fetch(`http://localhost:${port}/health`, { signal: AbortSignal.timeout(500) });
+          if (res.ok) { apiBaseUrl = `http://localhost:${port}/api`; break; }
+        } catch (e) { /* Ignore API port check errors */ }
+      }
+      if (!apiBaseUrl) return;
+      
+      // Get todo lists
+      const listsRes = await fetch(`${apiBaseUrl}/projects/${selectedProject.id}/todo-lists`);
+      const lists = listsRes.ok ? (await listsRes.json()) as Array<{ id: number }> : [];
+      
+      // Get tasks for each list
+      const allTasks: TodoTask[] = [];
+      for (const list of lists) {
+        const tasksRes = await fetch(`${apiBaseUrl}/todo-lists/${list.id}/tasks`);
+        if (tasksRes.ok) {
+          const listTasks = (await tasksRes.json()) as TodoTask[];
+          allTasks.push(...listTasks);
+        }
+      }
+    } catch (e) { /* Ignore task loading errors */ }
+  };
+
+  // Render Tasks view
+  const renderTasksView = () => {
+    if (!selectedProject) {
+      return (
+        <Box flexDirection="column" padding={2}>
+          <Text bold color={colors.accentCyan}>Tasks</Text>
+          <Text> </Text>
+          <Text color={colors.textTertiary}>Select a project first to view tasks</Text>
+        </Box>
+      );
+    }
+
+    return (
+      <Box flexDirection="column" padding={1} height={availableHeight}>
+        <Text bold color={colors.accentCyan}>
+          Tasks for {selectedProject.name} ({tasks.length})
+        </Text>
+        <Text> </Text>
+
+        {tasks.length === 0 ? (
+          <Box flexDirection="column">
+            <Text color={colors.textTertiary}>No tasks found</Text>
+            <Text> </Text>
+            <Text color={colors.textSecondary}>Press 'a' to add a task</Text>
+          </Box>
+        ) : (
+          <Box flexDirection="column">
+            {tasks.map((task, idx) => {
+              const isSelected = idx === selectedTaskIdx;
+              const cfg = taskStatusConfig[task.status];
+              return (
+                <Box key={task.id}>
+                  <Text color={isSelected ? colors.accentCyan : colors.textPrimary} bold={isSelected}>
+                    {isSelected ? '▶ ' : '  '}
+                    <Text color={cfg.color}>{cfg.icon}</Text> {truncateText(task.title, 40)}
+                  </Text>
+                  {task.worktree_path && <Text color={colors.accentGreen}> 🌿</Text>}
+                </Box>
+              );
+            })}
+          </Box>
+        )}
+
+        <Text> </Text>
+        <Text color={colors.textTertiary}>
+          ↑↓/jk: navigate | a: add task | Space: toggle | d: delete
+        </Text>
+      </Box>
+    );
+  };
+
+  // Render Agents view
+  const renderAgentsView = () => {
+    const selectedAgent = agents[selectedAgentIndex];
+    const isAgentRunning = selectedAgent
+      ? runningAgentsList.some(r => r.agentId === selectedAgent.id)
+      : false;
+
+    return (
+      <Box flexDirection="column" padding={1} height={availableHeight}>
+        {/* Add Agent Modal */}
+        {showAddAgentModal && (
+          <Box
+            flexDirection="column"
+            borderStyle="round"
+            borderColor={colors.accentCyan}
+            padding={1}
+            width={60}
+          >
+            <Text bold color={colors.accentCyan}>Add New Agent</Text>
+            <Text> </Text>
+            <Box>
+              <Text color={agentInputField === 'name' ? colors.accentCyan : colors.textSecondary}>
+                Name: {agentInputField === 'name' ? '▶ ' : '  '}
+              </Text>
+              <Text color={colors.textPrimary}>{newAgentName || '_'}</Text>
+            </Box>
+            <Text> </Text>
+            <Text color={agentInputField === 'cli_type' ? colors.accentCyan : colors.textSecondary}>
+              CLI Type: {agentInputField === 'cli_type' ? '▶' : ''}
+            </Text>
+            {VALID_CLI_TYPES.map((cliType, idx) => (
+              <Text
+                key={cliType}
+                color={idx === newAgentCliTypeIndex ? colors.accentGreen : colors.textTertiary}
+              >
+                {idx === newAgentCliTypeIndex ? '  ● ' : '  ○ '}
+                {CLI_DISPLAY_NAMES[cliType]}
+              </Text>
+            ))}
+            <Text> </Text>
+            <Box>
+              <Text color={agentInputField === 'model' ? colors.accentCyan : colors.textSecondary}>
+                Model (optional): {agentInputField === 'model' ? '▶ ' : '  '}
+              </Text>
+              <Text color={colors.textPrimary}>{newAgentModel || '_'}</Text>
+            </Box>
+            <Text> </Text>
+            <Box>
+              <Text color={agentInputField === 'api_key' ? colors.accentCyan : colors.textSecondary}>
+                API Key (optional): {agentInputField === 'api_key' ? '▶ ' : '  '}
+              </Text>
+              <Text color={colors.textPrimary}>
+                {newAgentApiKey ? '*'.repeat(Math.min(newAgentApiKey.length, 20)) : '_'}
+              </Text>
+            </Box>
+            <Text> </Text>
+            <Text color={colors.textTertiary}>Tab: next field | ↑↓: select CLI | Enter: create | Esc: cancel</Text>
+          </Box>
+        )}
+
+        {!showAddAgentModal && (
+          <>
+            <Text bold color={colors.accentCyan}>
+              Agents for {selectedProject?.name || 'No Project'} ({agents.length})
+            </Text>
+            <Text> </Text>
+
+            {agents.length === 0 ? (
+              <Box flexDirection="column">
+                <Text color={colors.textTertiary}>No agents configured for this project.</Text>
+                <Text> </Text>
+                <Text color={colors.textSecondary}>Press 'a' to add an agent.</Text>
+              </Box>
+            ) : (
+              <Box flexDirection="row" height={availableHeight - 6}>
+                {/* Agent List */}
+                <Box flexDirection="column" width="40%" borderStyle="round" borderColor={colors.borderColor} padding={1}>
+                  {agents.map((agent, index) => {
+                    const isSelected = index === selectedAgentIndex;
+                    const running = runningAgentsList.some(r => r.agentId === agent.id);
+                    return (
+                      <Box key={agent.id}>
+                        <Text color={isSelected ? colors.accentCyan : colors.textPrimary} bold={isSelected}>
+                          {isSelected ? '▶ ' : '  '}
+                          {running ? '● ' : '○ '}
+                          {truncateText(agent.name, 25)}
+                        </Text>
+                      </Box>
+                    );
+                  })}
+                </Box>
+                <Box width={1} />
+                {/* Agent Details */}
+                <Box flexDirection="column" width="60%" borderStyle="round" borderColor={colors.borderColor} padding={1}>
+                  {selectedAgent && (
+                    <>
+                      <Text bold color={colors.accentCyan}>{selectedAgent.name}</Text>
+                      <Text> </Text>
+                      <Text color={colors.textSecondary}>
+                        Type: <Text color={colors.textPrimary}>{CLI_DISPLAY_NAMES[selectedAgent.cli_type]}</Text>
+                      </Text>
+                      {selectedAgent.model && (
+                        <Text color={colors.textSecondary}>
+                          Model: <Text color={colors.textPrimary}>{selectedAgent.model}</Text>
+                        </Text>
+                      )}
+                      {selectedAgent.api_key && (
+                        <Text color={colors.textSecondary}>
+                          API Key: <Text color={colors.accentGreen}>configured</Text>
+                        </Text>
+                      )}
+                      {selectedAgent.system_prompt && (
+                        <Text color={colors.textSecondary}>
+                          System Prompt: <Text color={colors.textPrimary}>{truncateText(selectedAgent.system_prompt, 40)}</Text>
+                        </Text>
+                      )}
+                      <Text> </Text>
+                      <Text color={isAgentRunning ? colors.accentGreen : colors.textTertiary}>
+                        Status: {isAgentRunning ? 'Running' : 'Stopped'}
+                      </Text>
+                    </>
+                  )}
+                </Box>
+              </Box>
+            )}
+
+            <Text> </Text>
+            <Text color={colors.textTertiary}>
+              ↑↓/jk: navigate | a: add agent | Enter/l: launch | d: delete | Esc: back to projects
+            </Text>
+          </>
+        )}
+      </Box>
+    );
+  };
+
   return (
     <Box flexDirection="column" height={terminalHeight}>
       {/* View indicator bar */}
@@ -2565,29 +2962,39 @@ const App: React.FC = () => {
           [1] Projects
         </Text>
         <Text> </Text>
-        <Text color={currentView === 'workspaces' ? colors.accentCyan : colors.textTertiary}>
-          [2] Workspaces
+        <Text color={currentView === 'tasks' ? colors.accentCyan : colors.textTertiary}>
+          [2] Tasks
+        </Text>
+        <Text> </Text>
+        <Text color={currentView === 'agents' ? colors.accentCyan : colors.textTertiary}>
+          [3] Agents
         </Text>
         <Text> </Text>
         <Text color={currentView === 'processes' ? colors.accentCyan : colors.textTertiary}>
-          [3] Processes
+          [4] Processes
+        </Text>
+        <Text> </Text>
+        <Text color={currentView === 'workspaces' ? colors.accentCyan : colors.textTertiary}>
+          [5] Workspaces
         </Text>
         <Text> </Text>
         <Text color={currentView === 'settings' ? colors.accentCyan : colors.textTertiary}>
-          [4] Settings
+          [6] Settings
         </Text>
-        {showTerminalPanel && (
+        {runningAgentsList.length > 0 && (
           <>
             <Text> | </Text>
-            <Text color={colors.accentGreen}>Terminal [T]</Text>
+            <Text color={colors.accentGreen}>● {runningAgentsList.length} running</Text>
           </>
         )}
       </Box>
 
       {/* Main content based on current view */}
       {currentView === 'projects' && renderProjectsView()}
-      {currentView === 'workspaces' && renderWorkspacesView()}
+      {currentView === 'tasks' && renderTasksView()}
+      {currentView === 'agents' && renderAgentsView()}
       {currentView === 'processes' && renderProcessesView()}
+      {currentView === 'workspaces' && renderWorkspacesView()}
       {currentView === 'settings' && renderSettingsView()}
 
       {/* Status bar */}