@mrpatronz/nexusflow 0.2.6 → 0.2.8

package/gui/src/App.tsx

@@ -5,8 +5,6 @@ import {
   Settings as SettingsIcon,
   Terminal,
   Play,
-  Square,
-  ExternalLink,
   Check,
   AlertTriangle,
   AlertCircle,
@@ -18,19 +16,20 @@ import {
   Sparkles,
   Copy,
   X,
-  MessageSquare,
-  MessageSquareCode,
-  BookOpen,
-  ListOrdered,
-  Save,
-  Edit,
-  Download,
-  Trash2,
+  Cpu,
 } from 'lucide-react';
 import './App.css';
+import { WorkspaceList } from './features/workspace/WorkspaceList.js';
 
 
 // Types matched with src/types.ts
+interface LocalLlmConfig {
+  enabled: boolean;
+  provider: 'ollama' | 'openai-compatible';
+  endpoint: string;
+  model: string;
+}
+
 interface NexusFlowConfig {
   version: string;
   devDir: string;
@@ -38,6 +37,8 @@ interface NexusFlowConfig {
   defaultAssistant: string | null;
   defaultEditor?: string | null;
   scanDepth: number;
+  localLlm?: LocalLlmConfig;
+  packContextXml?: boolean;
 }
 
 interface DetectedAI {
@@ -95,90 +96,24 @@ interface RunningService {
 const API_BASE = import.meta.env.DEV ? 'http://localhost:3000' : '';
 const isVsCode = new URLSearchParams(window.location.search).get('env') === 'vscode';
 
-const parseInlineStyles = (text: string): React.ReactNode => {
-  const tokenRegex = /(\*\*.*?\*\*|`.*?`|\*.*?\*)/g;
-  const parts = text.split(tokenRegex);
-  
-  return parts.map((part, index) => {
-    if (part.startsWith('**') && part.endsWith('**')) {
-      return <strong key={index} className="font-bold text-gray-200">{part.slice(2, -2)}</strong>;
-    }
-    if (part.startsWith('`') && part.endsWith('`')) {
-      return <code key={index} className="px-1.5 py-0.5 bg-gray-900 border border-gray-800 text-indigo-300 rounded font-mono text-[10px]">{part.slice(1, -1)}</code>;
-    }
-    if (part.startsWith('*') && part.endsWith('*')) {
-      return <em key={index} className="italic text-gray-300">{part.slice(1, -1)}</em>;
-    }
-    return part;
-  });
-};
-
-const renderFormattedDescription = (text: string) => {
-  if (!text) return null;
-  
-  const lines = text.split('\n');
-  const elements: React.ReactNode[] = [];
-  let currentList: { type: 'ul' | 'ol'; items: string[] } | null = null;
-  
-  const flushList = (key: number) => {
-    if (currentList) {
-      const ListTag = currentList.type;
-      elements.push(
-        <ListTag key={`list-${key}`} className={currentList.type === 'ul' ? 'list-disc pl-5 my-1.5 space-y-1' : 'list-decimal pl-5 my-1.5 space-y-1'}>
-          {currentList.items.map((item, idx) => (
-            <li key={`item-${idx}`} className="leading-relaxed">{parseInlineStyles(item)}</li>
-          ))}
-        </ListTag>
-      );
-      currentList = null;
-    }
-  };
-
-  lines.forEach((line, idx) => {
-    const trimmed = line.trim();
-    
-    // Check for bullet list item
-    const bulletMatch = line.match(/^(\s*)[-*+]\s+(.*)/);
-    if (bulletMatch) {
-      if (!currentList || currentList.type !== 'ul') {
-        flushList(idx);
-        currentList = { type: 'ul', items: [] };
-      }
-      currentList.items.push(bulletMatch[2]);
-      return;
-    }
-    
-    // Check for numbered list item
-    const numberMatch = line.match(/^(\s*)\d+\.\s+(.*)/);
-    if (numberMatch) {
-      if (!currentList || currentList.type !== 'ol') {
-        flushList(idx);
-        currentList = { type: 'ol', items: [] };
-      }
-      currentList.items.push(numberMatch[2]);
-      return;
-    }
-    
-    // If not a list item, flush any active list first
-    flushList(idx);
-    
-    if (trimmed === '') {
-      elements.push(<div key={`empty-${idx}`} className="h-2" />);
-    } else {
-      elements.push(
-        <div key={`line-${idx}`} className="leading-relaxed">
-          {parseInlineStyles(line)}
-        </div>
-      );
-    }
-  });
-  
-  flushList(lines.length);
-  return <div className="space-y-1">{elements}</div>;
-};
-
 export default function App() {
   const [view, setView] = useState<'guide' | 'create' | 'workspaces' | 'settings'>('guide');
+
+  // Toast State
+  interface Toast {
+    id: string;
+    message: string;
+    type: 'success' | 'error' | 'info';
+    duration?: number;
+  }
+  const [toasts, setToasts] = useState<Toast[]>([]);
+  const showToast = (message: string, type: 'success' | 'error' | 'info' = 'info', duration = 5000) => {
+    const id = Math.random().toString(36).substring(2, 9);
+    setToasts((prev) => [...prev, { id, message, type, duration }]);
+    setTimeout(() => {
+      setToasts((prev) => prev.filter((t) => t.id !== id));
+    }, duration);
+  };
   
   // App Config
   const [config, setConfig] = useState<NexusFlowConfig | null>(null);
@@ -209,6 +144,7 @@ export default function App() {
   const [selectedRepos, setSelectedRepos] = useState<RepoInfo[]>([]);
   const [selectedAI, setSelectedAI] = useState<string[]>([]);
   const [selectedEditor, setSelectedEditor] = useState<DetectedEditor | null>(null);
+  const [localLlmEnabled, setLocalLlmEnabled] = useState(false);
   const [creating, setCreating] = useState(false);
   const [createdWorkspace, setCreatedWorkspace] = useState<{ path: string } | null>(null);
   const [creationError, setCreationError] = useState<string | null>(null);
@@ -284,6 +220,23 @@ export default function App() {
   const [serviceLogs, setServiceLogs] = useState<string>('');
   const logsEndRef = useRef<HTMLDivElement | null>(null);
 
+  // Local LLM states
+  const [recommendation, setRecommendation] = useState<{ totalRamGb: number; gpuName: string; recommendedModel: string } | null>(null);
+  const [testStatus, setTestStatus] = useState<{ success: boolean; message: string } | null>(null);
+  const [testingLlm, setTestingLlm] = useState(false);
+
+  const isSettingsFormValid = (() => {
+    if (!config) return false;
+    if (!config.devDir || config.devDir.trim() === '' || !config.workspacesDir || config.workspacesDir.trim() === '') return false;
+    if (config.localLlm?.enabled) {
+      const endpoint = config.localLlm.endpoint?.trim() || '';
+      if (!endpoint.startsWith('http://') && !endpoint.startsWith('https://')) {
+        return false;
+      }
+    }
+    return true;
+  })();
+
   // Initial loads
   useEffect(() => {
     fetchConfig();
@@ -292,10 +245,11 @@ export default function App() {
     fetchUpdateStatus();
   }, []);
 
-  // Load tool updates status when settings view is open
+  // Load tool updates status and LLM recommendations when settings view is open
   useEffect(() => {
     if (view === 'settings') {
       fetchToolsStatus();
+      fetchLlmRecommendation();
     }
   }, [view]);
 
@@ -406,26 +360,62 @@ export default function App() {
       });
       const data = await res.json();
       if (res.ok && data.success) {
-        alert(`${toolId} updated successfully!\n\nOutput:\n${data.output}`);
+        showToast(`${toolId} updated successfully!\n\nOutput:\n${data.output}`, 'success');
         fetchToolsStatus(true);
         fetchUpdateStatus();
       } else {
-        alert(`Error: ${data.error || 'Failed to update tool'}`);
+        showToast(`Error: ${data.error || 'Failed to update tool'}`, 'error');
       }
     } catch (e) {
       console.error(e);
-      alert('Network error when updating tool.');
+      showToast('Network error when updating tool.', 'error');
     } finally {
       setUpdatingToolId(null);
     }
   };
 
+  const fetchLlmRecommendation = async () => {
+    try {
+      const res = await fetch(`${API_BASE}/api/local-llm/recommend`);
+      if (res.ok) {
+        const data = await res.json();
+        setRecommendation(data);
+      }
+    } catch (e) {
+      console.error('Error fetching LLM recommendation:', e);
+    }
+  };
+
+  const testLlmConnection = async () => {
+    if (!config?.localLlm) return;
+    setTestingLlm(true);
+    setTestStatus(null);
+    try {
+      const res = await fetch(`${API_BASE}/api/local-llm/test`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(config.localLlm),
+      });
+      const data = await res.json();
+      if (data.success) {
+        setTestStatus({ success: true, message: data.message });
+      } else {
+        setTestStatus({ success: false, message: data.error || 'Connection failed.' });
+      }
+    } catch (e: any) {
+      setTestStatus({ success: false, message: e.message || 'Network error.' });
+    } finally {
+      setTestingLlm(false);
+    }
+  };
+
   const fetchConfig = async () => {
     try {
       const res = await fetch(`${API_BASE}/api/config`);
       const data = await res.json();
       setConfig(data.config);
       setConfigExists(data.exists);
+      setLocalLlmEnabled(data.config?.localLlm?.enabled || false);
       
       fetchEditors(data.config?.defaultEditor);
       
@@ -462,6 +452,7 @@ export default function App() {
         setSaveStatus('success');
         setConfig(newConfig);
         setConfigExists(true);
+        setLocalLlmEnabled(newConfig.localLlm?.enabled || false);
         fetchRepos();
         fetchWorkspaces();
       } else {
@@ -732,6 +723,7 @@ export default function App() {
           description,
           repos: selectedRepos,
           assistants: selectedAI,
+          localLlmEnabled,
           resumption: {
             testCommand,
             mockCommand: mockCommand || undefined,
@@ -852,15 +844,15 @@ export default function App() {
           setActiveWsId(ws.branchName);
         } else {
           navigator.clipboard.writeText(data.resumeCommand);
-          alert(`Session Resumed!\n\n1. Editor launched.\n2. Command "${data.resumeCommand}" copied to clipboard! Paste it into your terminal inside the workspace to continue.`);
+          showToast(`Session Resumed!\n\n1. Editor launched.\n2. Command "${data.resumeCommand}" copied to clipboard! Paste it into your terminal inside the workspace to continue.`, 'success');
           setActiveWsId(ws.branchName);
         }
       } else {
-        alert(`Error: ${data.error || 'Failed to resume session'}`);
+        showToast(`Error: ${data.error || 'Failed to resume session'}`, 'error');
       }
     } catch (e) {
       console.error(e);
-      alert('Network error when resuming session.');
+      showToast('Network error when resuming session.', 'error');
     } finally {
       setResumingWs(null);
     }
@@ -872,7 +864,7 @@ export default function App() {
       return;
     }
     if (config?.defaultEditor === 'none') {
-      alert('Your preferred editor is set to "None" (skip opening). You can change this in Settings.');
+      showToast('Your preferred editor is set to "None" (skip opening). You can change this in Settings.', 'info');
       return;
     }
     let editor = null;
@@ -883,7 +875,7 @@ export default function App() {
       editor = editors.find((e) => e.detected) || editors[0];
     }
     if (!editor) {
-      alert('No detected editors available.');
+      showToast('No detected editors available.', 'error');
       return;
     }
     try {
@@ -900,18 +892,7 @@ export default function App() {
     }
   };
 
-  const handleExportContext = async (wsBranchName: string) => {
-    const encodedId = encodeURIComponent(wsBranchName);
-    const downloadUrl = `${API_BASE}/api/workspace/${encodedId}/pack`;
-    
-    // Create temporary link and click it
-    const link = document.createElement('a');
-    link.href = downloadUrl;
-    link.setAttribute('download', '');
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-  };
+
 
   const handleCopyPrompt = (ws: Feature) => {
     const repoNames = ws.repos.map((r) => r.split(/[\\/]/).pop()).join(', ');
@@ -929,7 +910,7 @@ Core Instructions:
 3. Follow all project-specific rules in "CLAUDE.md", ".cursorrules", or "AGENTS.md" in sub-repositories.
 `;
     navigator.clipboard.writeText(prompt);
-    alert('Universal AI briefing prompt copied to clipboard!');
+    showToast('Universal AI briefing prompt copied to clipboard!', 'success');
   };
 
   const handleDeleteWorkspace = async (wsName: string) => {
@@ -948,13 +929,13 @@ Core Instructions:
           setActiveWsId(null);
         }
         await fetchWorkspaces();
-        alert(`Workspace ${wsName} successfully deleted.`);
+        showToast(`Workspace ${wsName} successfully deleted.`, 'success');
       } else {
-        alert(`Failed to delete workspace: ${data.error || 'Unknown error'}`);
+        showToast(`Failed to delete workspace: ${data.error || 'Unknown error'}`, 'error');
       }
     } catch (e) {
       console.error(e);
-      alert('Network error while deleting workspace.');
+      showToast('Network error while deleting workspace.', 'error');
     } finally {
       setDeleteWsLoading(null);
     }
@@ -977,13 +958,13 @@ Core Instructions:
           fetchGitChanges(wsName);
           fetchWorkspaceSessions(wsName);
         }
-        alert('Repository successfully added. Configurations and Repomix packing updated.');
+        showToast('Repository successfully added. Configurations and Repomix packing updated.', 'success');
       } else {
-        alert(`Failed to add repository: ${data.error || 'Unknown error'}`);
+        showToast(`Failed to add repository: ${data.error || 'Unknown error'}`, 'error');
       }
     } catch (e) {
       console.error(e);
-      alert('Network error while adding repository.');
+      showToast('Network error while adding repository.', 'error');
     } finally {
       setAddRepoLoading(false);
     }
@@ -1154,6 +1135,24 @@ Core Instructions:
                   )}
                 </div>
 
+                <div className="pt-2">
+                  <div className="flex items-center gap-3">
+                    <input
+                      type="checkbox"
+                      id="onboardingPackContextXml"
+                      className="w-4 h-4 rounded border-gray-800 bg-[#111827] text-indigo-600 focus:ring-indigo-500 cursor-pointer"
+                      checked={config.packContextXml || false}
+                      onChange={(e) => setConfig({ ...config, packContextXml: e.target.checked })}
+                    />
+                    <label htmlFor="onboardingPackContextXml" className="text-xs font-semibold text-white cursor-pointer select-none">
+                      Pack Codebase Context with Repomix (XML)
+                    </label>
+                  </div>
+                  <span className="text-[10px] text-gray-500 mt-1 block">
+                    Aggregates all repository files into a single token-efficient XML file (<code>nexusflow-context.xml</code>) at the workspace root, giving AI assistants immediate access to the full codebase state.
+                  </span>
+                </div>
+
                 {/* Form Buttons */}
                 <div className="flex gap-2 pt-2">
                   <button
@@ -1248,6 +1247,7 @@ Core Instructions:
                   setBranchName('');
                   setDescription('');
                   setSelectedRepos([]);
+                  setLocalLlmEnabled(config?.localLlm?.enabled || false);
                 }}
               >
                 <PlusCircle size={18} className="text-indigo-400" />
@@ -1322,7 +1322,7 @@ Core Instructions:
                   <button
                     onClick={() => {
                       navigator.clipboard.writeText('npm install -g @mrpatronz/nexusflow');
-                      alert('Update command copied to clipboard!');
+                      showToast('Update command copied to clipboard!', 'success');
                     }}
                     className="px-4 py-2 bg-amber-500 hover:bg-amber-600 text-[#060813] font-bold text-xs rounded-lg transition-all shadow-md shadow-amber-500/10 cursor-pointer flex items-center gap-1.5"
                   >
@@ -1394,9 +1394,9 @@ Core Instructions:
                         4
                       </div>
                       <div>
-                        <h3 className="text-sm font-semibold text-white">Repomix Packing</h3>
+                        <h3 className="text-sm font-semibold text-white">Repomix Packing (Optional)</h3>
                         <p className="text-xs text-gray-400 mt-1">
-                          NexusFlow aggregates the entire multi-repo codebase using <code>Repomix</code> into a token-efficient XML file <code>nexusflow-context.xml</code>, giving AI immediate access to the full codebase state.
+                          If enabled, NexusFlow aggregates the entire multi-repo codebase using <code>Repomix</code> into a token-efficient XML file <code>nexusflow-context.xml</code>, giving AI immediate access to the full codebase state. You can toggle this setting in Settings.
                         </p>
                       </div>
                     </div>
@@ -1820,6 +1820,33 @@ Core Instructions:
                           </div>
                         </div>
 
+                        <div className={`mb-8 border rounded-xl p-5 ${config?.localLlm?.enabled ? 'border-gray-800/80 bg-gray-950/20' : 'border-gray-800/40 bg-gray-950/10 opacity-60'}`}>
+                          <h4 className="text-xs font-bold text-gray-400 uppercase tracking-wider mb-4 flex items-center gap-2">
+                            <Cpu size={14} className="text-indigo-400" /> Local AI Co-processor
+                          </h4>
+                          <p className="text-[11px] text-gray-500 mb-4">
+                            Enabling the Local AI Co-processor inserts guidelines in the workspace context files, instructing remote agents to delegate heavy tasks (such as searching, log analysis, and boilerplate generation) to your local Ollama/LM Studio model.
+                          </p>
+                          {!config?.localLlm?.enabled && (
+                            <p className="text-[11px] text-amber-400/80 mb-3 flex items-center gap-1.5">
+                              <AlertTriangle size={12} /> Enable a local LLM provider in Settings first.
+                            </p>
+                          )}
+                          <div className="flex items-center gap-3">
+                            <input
+                              type="checkbox"
+                              id="wizardLocalLlmEnabled"
+                              className="w-4 h-4 rounded border-gray-800 text-indigo-600 bg-gray-950/20 focus:ring-indigo-500 cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed"
+                              checked={localLlmEnabled}
+                              onChange={(e) => setLocalLlmEnabled(e.target.checked)}
+                              disabled={!config?.localLlm?.enabled}
+                            />
+                            <label htmlFor="wizardLocalLlmEnabled" className={`text-xs font-semibold cursor-pointer select-none ${config?.localLlm?.enabled ? 'text-white' : 'text-gray-500 cursor-not-allowed'}`}>
+                              Include Local AI Co-processor in this workspace context
+                            </label>
+                          </div>
+                        </div>
+
                         <div className="mb-8 border border-gray-800/80 rounded-xl p-5 bg-gray-950/20">
                           <h4 className="text-xs font-bold text-gray-400 uppercase tracking-wider mb-4 flex items-center gap-2">
                             <Terminal size={14} className="text-indigo-400" /> Advanced Session Resumption Settings
@@ -1938,667 +1965,67 @@ Core Instructions:
 
             {/* View 2: Active Workspaces Panel */}
             {view === 'workspaces' && (
-              <div className="max-w-5xl mx-auto">
-                <header className="flex justify-between items-center mb-8">
-                  <div>
-                    <h1 className="text-3xl font-extrabold tracking-tight text-white mb-2">Active Workspaces</h1>
-                    <p className="text-sm text-gray-400">Monitor running servers, libraries, and processes on your development branches.</p>
-                  </div>
-                  <button
-                    className="inline-flex items-center justify-center gap-2 px-4 py-2 bg-gray-900 border border-gray-800 hover:bg-gray-800 hover:border-gray-700 rounded-lg text-xs font-semibold transition-all cursor-pointer"
-                    onClick={fetchWorkspaces}
-                    disabled={workspacesLoading}
-                  >
-                    <RefreshCw size={14} className={workspacesLoading ? 'animate-spin text-indigo-400' : ''} /> Refresh
-                  </button>
-                </header>
-
-                {workspacesLoading ? (
-                  <div className="flex flex-col items-center py-40 gap-4 text-gray-400">
-                    <RefreshCw className="animate-spin text-indigo-400" size={32} />
-                    <span className="text-sm">Fetching workspace details...</span>
-                  </div>
-                ) : workspaces.length === 0 ? (
-                  <div className="flex flex-col items-center justify-center py-24 bg-[#111827]/20 border border-gray-800/80 rounded-xl text-center">
-                    <FolderGit2 size={44} className="text-gray-600 mb-4" />
-                    <h3 className="text-lg font-bold text-white">No Active Workspaces</h3>
-                    <p className="text-xs text-gray-500 max-w-sm mt-1">
-                      No feature workspaces were detected in your development folder. Create a workspace to start.
-                    </p>
-                  </div>
-                ) : (
-                  <div className="flex flex-col gap-6">
-                    {workspaces.map((ws) => {
-                      const isExpanded = activeWsId === ws.branchName;
-                      return (
-                        <div key={ws.id} className="bg-[#111827]/40 border border-gray-800/80 rounded-xl p-6 shadow-md">
-                          <div className="flex justify-between items-start gap-4 mb-4">
-                            <div>
-                              <h3 className="text-lg font-bold text-white hover:text-indigo-400 transition-colors">{ws.branchName}</h3>
-                              <div className="flex items-center gap-3 text-xs text-gray-500 mt-1">
-                                <span>Created: {new Date(ws.createdAt).toLocaleDateString()}</span>
-                                <span className="h-1 w-1 rounded-full bg-gray-700"></span>
-                                <span>{ws.repos.length} repos</span>
-                              </div>
-                            </div>
-                            <div className="flex gap-2">
-                              <button
-                                className="inline-flex items-center justify-center gap-1.5 px-3.5 py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg text-xs font-semibold transition-all cursor-pointer shadow-md shadow-emerald-600/10 disabled:opacity-40 disabled:cursor-not-allowed"
-                                onClick={() => handleResumeSession(ws)}
-                                disabled={resumingWs === ws.branchName}
-                              >
-                                <Play size={12} className={resumingWs === ws.branchName ? 'animate-spin' : ''} />
-                                {resumingWs === ws.branchName ? 'Resuming...' : 'Resume Session'}
-                              </button>
-                              <button
-                                className="inline-flex items-center justify-center gap-1.5 px-3.5 py-2 bg-gray-900 border border-gray-800 hover:bg-gray-800 hover:border-gray-700 rounded-lg text-xs font-semibold transition-all cursor-pointer"
-                                onClick={() => handleCopyPrompt(ws)}
-                              >
-                                <Sparkles size={12} className="text-cyan-400" /> Copy Prompt
-                              </button>
-                              <button
-                                className="inline-flex items-center justify-center gap-1.5 px-3.5 py-2 bg-gray-900 border border-gray-800 hover:bg-gray-800 hover:border-gray-700 rounded-lg text-xs font-semibold transition-all cursor-pointer"
-                                onClick={() => handleExportContext(ws.branchName)}
-                              >
-                                <Download size={12} className="text-emerald-400" /> Export Context
-                              </button>
-                              <button
-                                className="inline-flex items-center justify-center gap-1.5 px-3.5 py-2 bg-gray-900 border border-gray-800 hover:bg-gray-800 hover:border-gray-700 rounded-lg text-xs font-semibold transition-all cursor-pointer"
-                                onClick={() => handleOpenInEditor(ws.workspacePath)}
-                              >
-                                <ExternalLink size={12} /> Open
-                              </button>
-                              <button
-                                className="inline-flex items-center justify-center gap-1.5 px-3.5 py-2 bg-indigo-500 hover:bg-indigo-600 text-white rounded-lg text-xs font-semibold transition-all cursor-pointer shadow-md shadow-indigo-500/10"
-                                onClick={() => {
-                                  if (isExpanded) {
-                                    setActiveWsId(null);
-                                  } else {
-                                    setActiveWsId(ws.branchName);
-                                  }
-                                }}
-                              >
-                                {isExpanded ? 'Hide Runner' : 'Orchestrate'}
-                              </button>
-                              <button
-                                className="inline-flex items-center justify-center gap-1.5 px-3.5 py-2 bg-red-950/40 border border-red-900/60 hover:bg-red-900/60 hover:border-red-800 rounded-lg text-xs font-semibold text-red-200 transition-all cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed animate-fade-in"
-                                onClick={() => handleDeleteWorkspace(ws.branchName)}
-                                disabled={deleteWsLoading === ws.branchName}
-                              >
-                                <Trash2 size={12} className={deleteWsLoading === ws.branchName ? 'animate-spin' : ''} />
-                                {deleteWsLoading === ws.branchName ? 'Deleting...' : 'Delete'}
-                              </button>
-                            </div>
-                          </div>
-
-                          <div className="text-xs text-gray-400 bg-gray-950/40 border-l-2 border-indigo-500 rounded-r-lg px-4 py-3 mb-4 font-medium italic">
-                            {renderFormattedDescription(ws.description)}
-                          </div>
-
-                          <div className="flex items-center gap-3 mb-4">
-                            <div className="flex flex-wrap gap-2">
-                              {ws.repos.map((repoPath) => (
-                                <span key={repoPath} className="text-[10px] px-2.5 py-1 bg-gray-900 border border-gray-800 text-gray-300 rounded-md font-semibold">
-                                  {repoPath.split(/[\\/]/).pop()}
-                                </span>
-                              ))}
-                            </div>
-
-                            {repos.filter((r) => !ws.repos.includes(r.path)).length > 0 && (
-                              <div className="flex items-center gap-1.5 ml-auto">
-                                <select
-                                  id={`add-repo-select-${ws.branchName}`}
-                                  className="bg-gray-900 border border-gray-800 text-gray-300 rounded-md text-[10px] px-2 py-1 font-semibold outline-none focus:border-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer"
-                                  defaultValue=""
-                                  onChange={async (e) => {
-                                    const val = e.target.value;
-                                    if (val) {
-                                      if (window.confirm(`Are you sure you want to add repository "${val.split(/[\\/]/).pop()}" to this workspace?\nThis will create a new git worktree and re-run analysis.`)) {
-                                        await handleAddRepo(ws.branchName, val);
-                                      }
-                                      e.target.value = "";
-                                    }
-                                  }}
-                                  disabled={addRepoLoading}
-                                >
-                                  <option value="" disabled>+ Add Repository</option>
-                                  {repos
-                                    .filter((r) => !ws.repos.includes(r.path))
-                                    .map((r) => (
-                                      <option key={r.path} value={r.path}>{r.name}</option>
-                                    ))
-                                  }
-                                </select>
-                              </div>
-                            )}
-                          </div>
-
-                          {/* Expansion: Process management console */}
-                          {isExpanded && (
-                            <div className="mt-6 pt-6 border-t border-gray-800/80">
-                              
-                              {/* Telemetry Dashboard Grid */}
-                              <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
-                                {/* Telemetry 1: CPU */}
-                                <div className="bg-gray-950/40 border border-gray-800/60 rounded-xl p-4 flex flex-col justify-between">
-                                  <div className="flex justify-between items-center text-xs font-semibold text-gray-400 mb-2">
-                                    <span>Simulated CPU Load</span>
-                                    <span className={runningServices.length > 0 ? "text-emerald-400" : "text-gray-500"}>{runningServices.length > 0 ? '4.8%' : '0%'}</span>
-                                  </div>
-                                  <div className="w-full bg-gray-800 rounded-full h-1.5 mb-2 overflow-hidden">
-                                    <div 
-                                      className={`h-1.5 rounded-full transition-all duration-500 ${runningServices.length > 0 ? "bg-gradient-to-r from-emerald-500 to-teal-400 animate-pulse" : "bg-gray-700"}`}
-                                      style={{ width: runningServices.length > 0 ? '48%' : '0%' }}
-                                    ></div>
-                                  </div>
-                                  <span className="text-[10px] text-gray-500">Fluctuating active worker processes</span>
-                                </div>
-
-                                {/* Telemetry 2: Memory */}
-                                <div className="bg-gray-950/40 border border-gray-800/60 rounded-xl p-4 flex flex-col justify-between">
-                                  <div className="flex justify-between items-center text-xs font-semibold text-gray-400 mb-2">
-                                    <span>Simulated Memory Allocation</span>
-                                    <span className={runningServices.length > 0 ? "text-cyan-400" : "text-gray-500"}>{runningServices.length > 0 ? '192 MB' : '0 MB'}</span>
-                                  </div>
-                                  <div className="w-full bg-gray-800 rounded-full h-1.5 mb-2 overflow-hidden">
-                                    <div 
-                                      className={`h-1.5 rounded-full transition-all duration-500 ${runningServices.length > 0 ? "bg-gradient-to-r from-cyan-500 to-indigo-400" : "bg-gray-700"}`}
-                                      style={{ width: runningServices.length > 0 ? '65%' : '0%' }}
-                                    ></div>
-                                  </div>
-                                  <span className="text-[10px] text-gray-500">Working set size for spawned servers</span>
-                                </div>
-
-                                {/* Telemetry 3: Environment Health */}
-                                <div className="bg-gray-950/40 border border-gray-800/60 rounded-xl p-4 flex flex-col justify-between">
-                                  <div className="flex justify-between items-center text-xs font-semibold text-gray-400 mb-2">
-                                    <span>Active Workspace Status</span>
-                                    <span className={`inline-flex items-center gap-1 text-[10px] uppercase font-bold tracking-wider ${runningServices.length > 0 ? "text-emerald-400" : "text-gray-500"}`}>
-                                      <span className={`w-1.5 h-1.5 rounded-full ${runningServices.length > 0 ? "bg-emerald-500 animate-ping" : "bg-gray-600"}`}></span>
-                                      {runningServices.length > 0 ? "Online" : "Idle"}
-                                    </span>
-                                  </div>
-                                  <div className="text-xs text-white font-medium truncate">
-                                    {runningServices.length > 0 ? `${runningServices.length} processes active` : "All processes offline"}
-                                  </div>
-                                  <span className="text-[10px] text-gray-500">Service state mapping</span>
-                                </div>
-                              </div>
-
-                              {/* Sub-tab Navigation */}
-                              <div className="flex border-b border-gray-800/80 mb-6 gap-2">
-                                <button
-                                  className={`px-4 py-2 border-b-2 text-xs font-bold transition-all cursor-pointer ${
-                                    subTab === 'sessions'
-                                      ? 'border-indigo-500 text-white'
-                                      : 'border-transparent text-gray-500 hover:text-gray-300'
-                                  }`}
-                                  onClick={() => setSubTab('sessions')}
-                                >
-                                  AI Session History
-                                </button>
-                                <button
-                                  className={`px-4 py-2 border-b-2 text-xs font-bold transition-all cursor-pointer ${
-                                    subTab === 'services'
-                                      ? 'border-indigo-500 text-white'
-                                      : 'border-transparent text-gray-500 hover:text-gray-300'
-                                  }`}
-                                  onClick={() => setSubTab('services')}
-                                >
-                                  Orchestrated Services
-                                </button>
-                                <button
-                                  className={`px-4 py-2 border-b-2 text-xs font-bold transition-all cursor-pointer ${
-                                    subTab === 'changes'
-                                      ? 'border-indigo-500 text-white'
-                                      : 'border-transparent text-gray-500 hover:text-gray-300'
-                                  }`}
-                                  onClick={() => setSubTab('changes')}
-                                >
-                                  Active Changes (AI Diffs)
-                                </button>
-                                <button
-                                  className={`px-4 py-2 border-b-2 text-xs font-bold transition-all cursor-pointer ${
-                                    subTab === 'knowledge'
-                                      ? 'border-indigo-500 text-white'
-                                      : 'border-transparent text-gray-500 hover:text-gray-300'
-                                  }`}
-                                  onClick={() => setSubTab('knowledge')}
-                                >
-                                  Knowledge Base
-                                </button>
-                                <button
-                                  className={`px-4 py-2 border-b-2 text-xs font-bold transition-all cursor-pointer ${
-                                    subTab === 'plan'
-                                      ? 'border-indigo-500 text-white'
-                                      : 'border-transparent text-gray-500 hover:text-gray-300'
-                                  }`}
-                                  onClick={() => setSubTab('plan')}
-                                >
-                                  Implementation Plan
-                                </button>
-                              </div>
-
-                              {subTab === 'sessions' && (
-                                sessionsLoading ? (
-                                  <div className="flex justify-center py-10">
-                                    <RefreshCw className="animate-spin text-indigo-400" size={20} />
-                                  </div>
-                                ) : sessions.length === 0 ? (
-                                  <div className="text-center py-10 bg-gray-950/20 border border-gray-800/60 rounded-xl p-6">
-                                    <MessageSquareCode size={36} className="text-gray-650 mx-auto mb-3" />
-                                    <h4 className="text-sm font-bold text-gray-400 mb-1">No Past AI Sessions Found</h4>
-                                    <p className="text-xs text-gray-505 max-w-md mx-auto leading-relaxed">
-                                      Start a conversation with your AI assistant (e.g. running <code>claude</code>, <code>agy</code>, <code>codex</code>, or <code>copilot</code> inside this directory) to track session history here.
-                                    </p>
-                                  </div>
-                                ) : (
-                                  <div className="space-y-3 mb-6">
-                                    {sessions.map((sess) => (
-                                      <div key={sess.id} className="flex flex-col md:flex-row md:items-center justify-between gap-4 bg-gray-950/20 border border-gray-800/60 rounded-xl p-4 hover:border-gray-700/80 transition-all">
-                                        <div className="flex-1 min-w-0">
-                                          <div className="flex items-center gap-2.5 mb-1.5">
-                                            <span className={`px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider ${
-                                              sess.assistant === 'antigravity' ? 'bg-indigo-500/20 text-indigo-300 border border-indigo-500/30' :
-                                              sess.assistant === 'claude' ? 'bg-amber-500/20 text-amber-300 border border-amber-500/30' :
-                                              sess.assistant === 'codex' ? 'bg-emerald-500/20 text-emerald-300 border border-emerald-500/30' :
-                                              'bg-sky-500/20 text-sky-300 border border-sky-500/30'
-                                            }`}>
-                                              {sess.assistant === 'antigravity' ? 'Antigravity' :
-                                               sess.assistant === 'claude' ? 'Claude Code' :
-                                               sess.assistant === 'codex' ? 'OpenAI Codex' : 'GitHub Copilot'}
-                                            </span>
-                                            <span className="text-[10px] text-gray-500">
-                                              Updated: {new Date(sess.updatedAt).toLocaleString()}
-                                            </span>
-                                            <span className="text-[10px] text-gray-500">•</span>
-                                            <span className="text-[10px] text-gray-550 font-medium">
-                                              {sess.messageCount} messages
-                                            </span>
-                                          </div>
-                                          <h4 className="text-xs font-semibold text-white truncate pr-4" title={sess.title}>
-                                            {sess.title}
-                                          </h4>
-                                        </div>
-                                        <div className="flex items-center gap-2 shrink-0">
-                                          <button
-                                            className="inline-flex items-center justify-center gap-1.5 px-3 py-1.5 bg-indigo-500/10 border border-indigo-500/20 hover:bg-indigo-500/20 text-indigo-300 rounded-lg text-xs font-bold transition-all cursor-pointer"
-                                            onClick={() => {
-                                              setActiveSession(sess);
-                                              setTranscript([]);
-                                              fetchSessionTranscript(sess.assistant, sess.id);
-                                            }}
-                                          >
-                                            <MessageSquare size={13} /> View Chat Log
-                                          </button>
-                                          <button
-                                            className="inline-flex items-center justify-center gap-1.5 px-3 py-1.5 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg text-xs font-bold transition-all cursor-pointer"
-                                            onClick={() => handleResumeSession(ws, sess.id, sess.assistant)}
-                                          >
-                                            <Play size={11} /> Resume
-                                          </button>
-                                        </div>
-                                      </div>
-                                    ))}
-                                  </div>
-                                )
-                              )}
-
-                              {subTab === 'services' && (
-                                servicesLoading ? (
-                                  <div className="flex justify-center py-10">
-                                    <RefreshCw className="animate-spin text-indigo-400" size={20} />
-                                  </div>
-                                ) : (
-                                  <div>
-                                    {orchTools.length > 0 && (
-                                      <div className="flex items-center gap-3 bg-indigo-500/5 border border-indigo-500/20 rounded-xl p-4 mb-4 text-xs text-indigo-300">
-                                        <AlertTriangle size={16} className="text-indigo-400 shrink-0" />
-                                        <div>
-                                          <strong>Orchestration manifest detected:</strong> {orchTools.map((t) => t.tool).join(', ')}. You can start them inside sub-repos.
-                                        </div>
-                                      </div>
-                                    )}
-
-                                    <div className="flex flex-col gap-2 mb-4">
-                                      {services.map((svc) => {
-                                        const isRunning = runningServices.some((rs) => rs.name === svc.name);
-                                        return (
-                                          <div key={svc.name} className="flex justify-between items-center bg-gray-950/20 border border-gray-800/60 rounded-xl px-4 py-3 text-xs">
-                                            <div className="flex items-center gap-3">
-                                              <span className={`w-2.5 h-2.5 rounded-full ${isRunning ? 'bg-emerald-500 shadow-[0_0_8px_#10b981]' : 'bg-gray-700'}`}></span>
-                                              <div>
-                                                <span className="font-bold text-white">{svc.name}</span>
-                                                <span className="text-[10px] text-gray-500 ml-3">
-                                                  {svc.command} {svc.args.join(' ')} {svc.port ? `• port ${svc.port}` : ''}
-                                                </span>
-                                              </div>
-                                            </div>
-                                            <span className="text-[9px] px-2 py-0.5 rounded bg-gray-800 text-gray-500 font-bold uppercase">{svc.source}</span>
-                                          </div>
-                                        );
-                                      })}
-                                    </div>
-
-                                    <div className="flex gap-2 mb-6">
-                                      <button
-                                        className="inline-flex items-center justify-center gap-1.5 px-4 py-2.5 bg-emerald-500 hover:bg-emerald-600 text-white rounded-lg text-xs font-semibold transition-all cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed shadow-md shadow-emerald-500/10 hover:-translate-y-0.5 active:translate-y-0"
-                                        onClick={() => handleStartServices(ws.branchName)}
-                                        disabled={runningServices.length > 0}
-                                      >
-                                        <Play size={14} /> Start All Services
-                                      </button>
-                                      <button
-                                        className="inline-flex items-center justify-center gap-1.5 px-4 py-2.5 bg-rose-600 hover:bg-rose-700 text-white rounded-lg text-xs font-semibold transition-all cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed shadow-md shadow-rose-600/10 hover:-translate-y-0.5 active:translate-y-0"
-                                        onClick={() => handleStopServices(ws.branchName)}
-                                        disabled={runningServices.length === 0}
-                                      >
-                                        <Square size={14} /> Stop All
-                                      </button>
-                                    </div>
-
-                                    {/* Interactive Console Screen */}
-                                    {services.length > 0 && (
-                                      <div className="border border-gray-800/80 rounded-xl overflow-hidden shadow-2xl bg-gray-950/60">
-                                        {/* Terminal Window Header */}
-                                        <div className="flex items-center justify-between bg-gray-900/80 px-4 py-3 border-b border-gray-800/60">
-                                          <div className="flex items-center gap-2">
-                                            <div className="flex gap-1.5">
-                                              <span className="w-3 h-3 rounded-full bg-rose-500/20 border border-rose-500/30"></span>
-                                              <span className="w-3 h-3 rounded-full bg-amber-500/20 border border-amber-500/30"></span>
-                                              <span className="w-3 h-3 rounded-full bg-emerald-500/20 border border-emerald-500/30"></span>
-                                            </div>
-                                            <span className="text-[11px] font-mono text-gray-400 font-semibold ml-2">nexusflow-terminal: {selectedLogService}</span>
-                                          </div>
-                                          <div className="flex gap-1 bg-gray-950/40 p-1 rounded-lg border border-gray-800/60">
-                                            {services.map((svc) => (
-                                              <button
-                                                key={svc.name}
-                                                className={`px-3 py-1 rounded-md text-[10px] font-mono font-bold transition-all cursor-pointer ${
-                                                  selectedLogService === svc.name
-                                                    ? 'bg-slate-800 text-white shadow-sm'
-                                                    : 'text-gray-500 hover:text-gray-300'
-                                                }`}
-                                                onClick={() => setSelectedLogService(svc.name)}
-                                              >
-                                                {svc.name}
-                                              </button>
-                                            ))}
-                                          </div>
-                                        </div>
-                                        
-                                        {/* Terminal Screen Body */}
-                                        <div className="bg-[#030408] p-5 font-mono text-[11px] text-cyan-400/90 h-80 overflow-y-auto whitespace-pre-wrap shadow-inner relative scrollbar-thin scrollbar-thumb-gray-800">
-                                          <div className="absolute top-3 right-3 text-[9px] bg-slate-900/60 border border-gray-800 text-cyan-500/60 px-2 py-0.5 rounded font-mono select-none uppercase tracking-wider">
-                                            LIVE LOGS
-                                          </div>
-                                          {serviceLogs}
-                                          <div ref={logsEndRef}></div>
-                                        </div>
-                                      </div>
-                                    )}
-                                  </div>
-                                )
-                              )}
-
-                              {/* Active Changes View */}
-                              {subTab === 'changes' && (
-                                <div>
-                                  <header className="flex justify-between items-center mb-4 flex-wrap gap-2">
-                                    <h4 className="text-sm font-bold text-white flex items-center gap-2">
-                                      <FolderGit2 size={16} className="text-cyan-400" /> Active Workspace Git Diffs
-                                    </h4>
-                                    <div className="flex gap-2">
-                                      <button
-                                        className="inline-flex items-center justify-center gap-1.5 px-3 py-1.5 bg-gray-900 border border-gray-800 hover:bg-gray-800 hover:border-gray-700 rounded-lg text-[10px] font-semibold transition-all cursor-pointer text-gray-300"
-                                        onClick={() => fetchGitChanges(ws.branchName)}
-                                        disabled={gitChangesLoading}
-                                      >
-                                        <RefreshCw size={11} className={gitChangesLoading ? 'animate-spin text-indigo-400' : ''} /> Refresh Changes
-                                      </button>
-                                      <button
-                                        className="inline-flex items-center justify-center gap-1.5 px-3 py-1.5 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg text-[10px] font-semibold transition-all cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed"
-                                        onClick={() => handleSyncAll(ws.branchName)}
-                                        disabled={syncLoading}
-                                      >
-                                        {syncLoading ? <RefreshCw size={11} className="animate-spin text-indigo-300" /> : <RefreshCw size={11} />} Sync All
-                                      </button>
-                                      <button
-                                        className="inline-flex items-center justify-center gap-1.5 px-3 py-1.5 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg text-[10px] font-semibold transition-all cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed"
-                                        onClick={() => setShowCommitModal(true)}
-                                        disabled={gitChanges.every(repo => repo.files.length === 0) || commitLoading}
-                                      >
-                                        Commit & Push All
-                                      </button>
-                                    </div>
-                                  </header>
-
-                                  {syncResults && (
-                                    <div className="bg-[#090d1a]/60 border border-gray-800 rounded-xl p-4 mb-4 text-xs">
-                                      <div className="flex justify-between items-center mb-2 border-b border-gray-800/80 pb-2">
-                                        <h5 className="font-bold text-white font-mono text-[11px]">Rebase/Sync Results</h5>
-                                        <button className="text-gray-500 hover:text-gray-300 text-[10px] cursor-pointer" onClick={() => setSyncResults(null)}>Dismiss</button>
-                                      </div>
-                                      <div className="space-y-1.5">
-                                        {syncResults.map((r: any) => (
-                                          <div key={r.repoName} className="flex justify-between items-center font-mono text-[10px]">
-                                            <span className="text-gray-300">{r.repoName}</span>
-                                            <span className={r.success ? "text-emerald-400" : "text-rose-400"}>
-                                              {r.success ? `✅ Synced (${r.message})` : `⚠️ Conflict: ${r.message}`}
-                                            </span>
-                                          </div>
-                                        ))}
-                                      </div>
-                                    </div>
-                                  )}
-
-                                  {commitResults && (
-                                    <div className="bg-[#090d1a]/60 border border-gray-800 rounded-xl p-4 mb-4 text-xs">
-                                      <div className="flex justify-between items-center mb-2 border-b border-gray-800/80 pb-2">
-                                        <h5 className="font-bold text-white font-mono text-[11px]">Commit/Push Results</h5>
-                                        <button className="text-gray-500 hover:text-gray-300 text-[10px] cursor-pointer" onClick={() => setCommitResults(null)}>Dismiss</button>
-                                      </div>
-                                      <div className="space-y-1.5">
-                                        {commitResults.map((r: any) => (
-                                          <div key={r.repoName} className="flex justify-between items-center font-mono text-[10px]">
-                                            <span className="text-gray-300">{r.repoName}</span>
-                                            <span className={r.success ? "text-emerald-400" : "text-rose-400"}>
-                                              {r.success ? `✅ Committed ${r.filesChanged} file(s) (${r.commitHash || 'no hash'})` : `⚠️ Error: ${r.message}`}
-                                            </span>
-                                          </div>
-                                        ))}
-                                      </div>
-                                    </div>
-                                  )}
-
-                                  {showCommitModal && (
-                                    <div className="bg-[#0b0f19] border border-gray-800 rounded-xl p-4 mb-4">
-                                      <h5 className="text-xs font-bold text-white mb-2">Enter Commit Message</h5>
-                                      <input
-                                        type="text"
-                                        className="w-full bg-gray-950 border border-gray-800 rounded-lg px-3 py-2 text-xs font-mono text-gray-350 focus:outline-none focus:border-indigo-500 mb-3"
-                                        placeholder="feat: implement logic..."
-                                        value={commitMessage}
-                                        onChange={(e) => setCommitMessage(e.target.value)}
-                                        onKeyDown={(e) => {
-                                          if (e.key === 'Enter') handleCommitAll(ws.branchName);
-                                        }}
-                                      />
-                                      <div className="flex justify-end gap-2">
-                                        <button
-                                          className="px-3 py-1.5 bg-gray-900 border border-gray-800 hover:bg-gray-850 rounded-lg text-[10px] font-semibold transition-all cursor-pointer text-gray-400"
-                                          onClick={() => {
-                                            setShowCommitModal(false);
-                                            setCommitMessage('');
-                                          }}
-                                          disabled={commitLoading}
-                                        >
-                                          Cancel
-                                        </button>
-                                        <button
-                                          className="px-3 py-1.5 bg-emerald-600 hover:bg-emerald-500 rounded-lg text-[10px] font-semibold text-white transition-all cursor-pointer"
-                                          onClick={() => handleCommitAll(ws.branchName)}
-                                          disabled={commitLoading || !commitMessage.trim()}
-                                        >
-                                          {commitLoading ? 'Committing...' : 'Commit & Push'}
-                                        </button>
-                                      </div>
-                                    </div>
-                                  )}
-
-                                  {gitChangesLoading ? (
-                                    <div className="flex justify-center py-10">
-                                      <RefreshCw className="animate-spin text-indigo-400" size={20} />
-                                    </div>
-                                  ) : (
-                                    <div className="space-y-4">
-                                      {gitChanges.every(repo => repo.files.length === 0) ? (
-                                        <div className="flex flex-col items-center justify-center py-12 bg-gray-950/20 border border-gray-800/40 rounded-xl text-center">
-                                          <Check size={28} className="text-emerald-500 mb-2" />
-                                          <h5 className="text-xs font-bold text-white">No Uncommitted Changes</h5>
-                                          <p className="text-[10px] text-gray-500 mt-0.5">Workspace is completely synced with Git feature branches.</p>
-                                        </div>
-                                      ) : (
-                                        gitChanges.map((repo) => {
-                                          if (repo.files.length === 0) return null;
-                                          const totalFilesChanged = repo.files.length;
-                                          const repoAdditions = repo.files.reduce((acc: number, f: any) => acc + (f.additions || 0), 0);
-                                          const repoDeletions = repo.files.reduce((acc: number, f: any) => acc + (f.deletions || 0), 0);
-
-                                          return (
-                                            <div key={repo.repoName} className="bg-gray-950/20 border border-gray-800/60 rounded-xl p-4">
-                                              <div className="flex justify-between items-center mb-3">
-                                                <div className="flex items-center gap-2">
-                                                  <h5 className="text-xs font-bold text-white font-mono">{repo.repoName}</h5>
-                                                  <span className="text-[9px] px-1.5 py-0.5 rounded bg-gray-900 border border-gray-800 text-gray-400 font-mono">
-                                                    {totalFilesChanged} file{totalFilesChanged === 1 ? '' : 's'} changed
-                                                  </span>
-                                                  {(repoAdditions > 0 || repoDeletions > 0) && (
-                                                    <span className="text-[9px] font-mono">
-                                                      <span className="text-emerald-400 font-bold">+{repoAdditions}</span>{' '}
-                                                      <span className="text-rose-400 font-bold">-{repoDeletions}</span>
-                                                    </span>
-                                                  )}
-                                                </div>
-                                                <span className="text-[9px] text-gray-500 font-mono truncate max-w-[280px]">{repo.repoPath}</span>
-                                              </div>
-                                              <div className="space-y-1.5">
-                                                {repo.files.map((fileInfo: any) => (
-                                                  <div key={fileInfo.file} className="flex justify-between items-center bg-[#090d1a]/40 px-3 py-2 rounded-lg border border-gray-800/30 text-xs">
-                                                    <div className="flex flex-col min-w-0">
-                                                      <span className="font-mono text-gray-300 text-[11px] truncate max-w-[320px]">{fileInfo.file}</span>
-                                                      {(fileInfo.additions > 0 || fileInfo.deletions > 0) && (
-                                                        <span className="text-[9px] font-mono mt-0.5">
-                                                          <span className="text-emerald-500">+{fileInfo.additions}</span>{' '}
-                                                          <span className="text-rose-500">-{fileInfo.deletions}</span>
-                                                        </span>
-                                                      )}
-                                                    </div>
-                                                    <span className={`text-[9px] px-2 py-0.5 rounded font-bold uppercase ${
-                                                      fileInfo.type === 'added' ? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/20' :
-                                                      fileInfo.type === 'deleted' ? 'bg-rose-500/10 text-rose-400 border border-rose-500/20' :
-                                                      'bg-amber-500/10 text-amber-400 border border-amber-500/20'
-                                                    }`}>
-                                                      {fileInfo.type}
-                                                    </span>
-                                                  </div>
-                                                ))}
-                                              </div>
-                                            </div>
-                                          );
-                                        })
-                                      )}
-                                    </div>
-                                  )}
-                                </div>
-                              )}
-
-                              {/* Knowledge Base View */}
-                              {subTab === 'knowledge' && (
-                                <div className="bg-[#090d1a]/20 border border-gray-800/60 rounded-xl p-4">
-                                  <header className="flex justify-between items-center mb-4">
-                                    <h4 className="text-sm font-bold text-white flex items-center gap-2">
-                                      <BookOpen size={16} className="text-cyan-400" /> Persistent Knowledge Memory (nexusflow-knowledge.md)
-                                    </h4>
-                                    <div className="flex gap-2">
-                                      {isEditingKnowledge ? (
-                                        <>
-                                          <button
-                                            className="px-2.5 py-1.5 bg-gray-900 border border-gray-800 hover:bg-gray-850 rounded-lg text-[10px] font-semibold transition-all cursor-pointer text-gray-400"
-                                            onClick={() => {
-                                              setEditedKnowledge(knowledgeContent);
-                                              setIsEditingKnowledge(false);
-                                            }}
-                                            disabled={saveKnowledgeLoading}
-                                          >
-                                            Cancel
-                                          </button>
-                                          <button
-                                            className="inline-flex items-center gap-1.5 px-2.5 py-1.5 bg-indigo-600 hover:bg-indigo-500 text-white rounded-lg text-[10px] font-semibold transition-all cursor-pointer"
-                                            onClick={() => handleSaveKnowledge(ws.branchName)}
-                                            disabled={saveKnowledgeLoading}
-                                          >
-                                            {saveKnowledgeLoading ? <RefreshCw className="animate-spin" size={10} /> : <Save size={10} />} Save
-                                          </button>
-                                        </>
-                                      ) : (
-                                        <button
-                                          className="inline-flex items-center gap-1.5 px-2.5 py-1.5 bg-gray-900 border border-gray-800 hover:bg-gray-800 hover:border-gray-700 rounded-lg text-[10px] font-semibold transition-all cursor-pointer text-gray-350"
-                                          onClick={() => setIsEditingKnowledge(true)}
-                                          disabled={knowledgeLoading}
-                                        >
-                                          <Edit size={10} /> Edit Knowledge
-                                        </button>
-                                      )}
-                                    </div>
-                                  </header>
-
-                                  {knowledgeLoading ? (
-                                    <div className="flex justify-center py-10">
-                                      <RefreshCw className="animate-spin text-indigo-400" size={20} />
-                                    </div>
-                                  ) : isEditingKnowledge ? (
-                                    <textarea
-                                      className="w-full h-96 bg-gray-950/60 border border-gray-800/80 rounded-xl p-4 text-xs font-mono text-gray-305 focus:outline-none focus:border-indigo-500/80 resize-y"
-                                      value={editedKnowledge}
-                                      onChange={(e) => setEditedKnowledge(e.target.value)}
-                                    />
-                                  ) : (
-                                    <div className="bg-gray-950/40 border border-gray-800/30 rounded-xl p-4 text-gray-350 text-xs leading-relaxed overflow-auto font-mono whitespace-pre-wrap max-h-96">
-                                      {knowledgeContent || "No knowledge file generated yet."}
-                                    </div>
-                                  )}
-                                </div>
-                              )}
-
-                              {/* Implementation Plan View */}
-                              {subTab === 'plan' && (
-                                <div className="bg-[#090d1a]/20 border border-gray-800/60 rounded-xl p-4">
-                                  <header className="flex justify-between items-center mb-4">
-                                    <h4 className="text-sm font-bold text-white flex items-center gap-2">
-                                      <ListOrdered size={16} className="text-cyan-400" /> Inter-Repo Implementation Plan (nexusflow-plan.md)
-                                    </h4>
-                                  </header>
-
-                                  {planLoading ? (
-                                    <div className="flex justify-center py-10">
-                                      <RefreshCw className="animate-spin text-indigo-400" size={20} />
-                                    </div>
-                                  ) : (
-                                    <div className="bg-gray-950/40 border border-gray-800/30 rounded-xl p-4 text-gray-350 text-xs leading-relaxed overflow-auto font-mono whitespace-pre-wrap max-h-96">
-                                      {planContent || "No implementation plan generated yet."}
-                                    </div>
-                                  )}
-                                </div>
-                              )}
-                            </div>
-                          )}
-                        </div>
-                      );
-                    })}
-                  </div>
-                )}
-              </div>
+              <WorkspaceList
+                workspacesLoading={workspacesLoading}
+                workspaces={workspaces}
+                activeWsId={activeWsId}
+                setActiveWsId={setActiveWsId}
+                resumingWs={resumingWs}
+                handleResumeSession={handleResumeSession}
+                handleCopyPrompt={handleCopyPrompt}
+                handleOpenInEditor={handleOpenInEditor}
+                fetchWorkspaces={fetchWorkspaces}
+                repos={repos}
+                deleteWsLoading={deleteWsLoading}
+                addRepoLoading={addRepoLoading}
+                handleDeleteWorkspace={handleDeleteWorkspace}
+                handleAddRepo={handleAddRepo}
+                services={services}
+                runningServices={runningServices}
+                selectedLogService={selectedLogService}
+                serviceLogs={serviceLogs}
+                logsEndRef={logsEndRef}
+                setSelectedLogService={setSelectedLogService}
+                handleStartServices={handleStartServices}
+                handleStopServices={handleStopServices}
+                orchTools={orchTools}
+                servicesLoading={servicesLoading}
+                gitChanges={gitChanges}
+                gitChangesLoading={gitChangesLoading}
+                syncLoading={syncLoading}
+                syncResults={syncResults}
+                commitMessage={commitMessage}
+                showCommitModal={showCommitModal}
+                commitLoading={commitLoading}
+                commitResults={commitResults}
+                setSyncResults={setSyncResults}
+                setCommitResults={setCommitResults}
+                setCommitMessage={setCommitMessage}
+                setShowCommitModal={setShowCommitModal}
+                fetchGitChanges={fetchGitChanges}
+                handleSyncAll={handleSyncAll}
+                handleCommitAll={handleCommitAll}
+                knowledgeContent={knowledgeContent}
+                knowledgeLoading={knowledgeLoading}
+                isEditingKnowledge={isEditingKnowledge}
+                editedKnowledge={editedKnowledge}
+                saveKnowledgeLoading={saveKnowledgeLoading}
+                setEditedKnowledge={setEditedKnowledge}
+                setIsEditingKnowledge={setIsEditingKnowledge}
+                handleSaveKnowledge={handleSaveKnowledge}
+                planContent={planContent}
+                planLoading={planLoading}
+                sessions={sessions}
+                sessionsLoading={sessionsLoading}
+                activeSession={activeSession}
+                transcript={transcript}
+                transcriptLoading={transcriptLoading}
+                setActiveSession={setActiveSession}
+                setTranscript={setTranscript}
+                fetchSessionTranscript={fetchSessionTranscript}
+                subTab={subTab}
+                setSubTab={setSubTab}
+              />
             )}
 
             {/* View 3: Settings View */}
@@ -2689,11 +2116,145 @@ Core Instructions:
                     </select>
                     <span className="text-[10px] text-gray-500 mt-1">Your preferred code editor for opening workspaces.</span>
                   </div>
+
+                  <div className="flex flex-col md:col-span-2 border-t border-gray-800/60 pt-6 mt-2">
+                    <h3 className="text-sm font-bold text-white mb-2">Codebase Context Settings</h3>
+                    <div className="flex items-center gap-3">
+                      <input
+                        type="checkbox"
+                        id="packContextXml"
+                        className="w-4 h-4 rounded border-gray-800 bg-[#111827] text-indigo-600 focus:ring-indigo-500 cursor-pointer"
+                        checked={config.packContextXml || false}
+                        onChange={(e) => setConfig({ ...config, packContextXml: e.target.checked })}
+                      />
+                      <label htmlFor="packContextXml" className="text-xs font-semibold text-white cursor-pointer select-none">
+                        Pack Codebase Context with Repomix (XML)
+                      </label>
+                    </div>
+                    <span className="text-[10px] text-gray-500 mt-1">
+                      Aggregates files of all repositories in a workspace into a single token-efficient XML file (<code>nexusflow-context.xml</code>) at the workspace root, giving AI assistants immediate access to the full codebase state.
+                    </span>
+                  </div>
+                </div>
+
+                {/* Local AI Co-Processor Settings */}
+                <div className="bg-[#111827]/40 border border-gray-800/80 rounded-xl p-8 shadow-xl backdrop-blur-sm mb-6 mt-6">
+                  <h3 className="text-lg font-bold text-white mb-2">Local AI Co-Processor Settings</h3>
+                  <p className="text-xs text-gray-450 mb-6 font-semibold">Enable a local LLM to handle simple tasks like log analysis, git diff summaries, and boilerplate code generation without using remote tokens.</p>
+
+                  {recommendation && (
+                    <div className="bg-[#0c1020]/80 border border-indigo-500/20 text-xs text-gray-300 rounded-xl p-4 mb-6 flex flex-col gap-1.5">
+                      <div className="flex items-center gap-2 text-indigo-400 font-bold">
+                        <Cpu size={14} /> Local System Scan Results
+                      </div>
+                      <div>• Detected Memory: <strong>{recommendation.totalRamGb} GB RAM</strong></div>
+                      <div>• Detected GPU: <strong>{recommendation.gpuName}</strong></div>
+                      <div>• Recommended Model: <span className="bg-indigo-500/10 text-indigo-300 px-2 py-0.5 rounded font-mono text-[11px] border border-indigo-500/20">{recommendation.recommendedModel}</span></div>
+                    </div>
+                  )}
+
+                  <div className="flex items-center gap-3 mb-6">
+                    <input
+                      type="checkbox"
+                      id="localLlmEnabled"
+                      className="w-4 h-4 rounded border-gray-800 bg-[#111827] text-indigo-600 focus:ring-indigo-500 cursor-pointer"
+                      checked={config.localLlm?.enabled || false}
+                      onChange={(e) => {
+                        const defaultLlm = { enabled: e.target.checked, provider: 'ollama' as const, endpoint: 'http://localhost:11434', model: recommendation?.recommendedModel || 'qwen2.5-coder:1.5b' };
+                        setConfig({
+                          ...config,
+                          localLlm: config.localLlm ? { ...config.localLlm, enabled: e.target.checked } : defaultLlm
+                        });
+                      }}
+                    />
+                    <label htmlFor="localLlmEnabled" className="text-sm font-semibold text-white cursor-pointer select-none">
+                      Enable Local AI Delegation Tool
+                    </label>
+                  </div>
+
+                  {config.localLlm?.enabled && (
+                    <div className="space-y-6 border-t border-gray-800/60 pt-6">
+                      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                        <div className="flex flex-col">
+                          <label className="block text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">Local Provider</label>
+                          <select
+                            className="w-full bg-[#111827] border border-gray-800 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 rounded-lg px-4 py-3 text-white transition-all outline-none text-sm shadow-inner cursor-pointer"
+                            value={config.localLlm.provider}
+                            onChange={(e) => setConfig({
+                              ...config,
+                              localLlm: { ...config.localLlm!, provider: e.target.value as any }
+                            })}
+                          >
+                            <option value="ollama">Ollama</option>
+                            <option value="openai-compatible">OpenAI-Compatible (e.g. LM Studio)</option>
+                          </select>
+                          <span className="text-[10px] text-gray-500 mt-1">Provider protocol to connect to.</span>
+                        </div>
+
+                        <div className="flex flex-col">
+                          <label className="block text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">Endpoint URL</label>
+                          <input
+                            type="text"
+                            className={`w-full bg-[#111827] border focus:ring-1 rounded-lg px-4 py-3 text-white placeholder-gray-600 transition-all outline-none text-sm shadow-inner ${
+                              config.localLlm.endpoint && !config.localLlm.endpoint.trim().startsWith('http://') && !config.localLlm.endpoint.trim().startsWith('https://')
+                                ? 'border-rose-500/60 focus:border-rose-500 focus:ring-rose-500'
+                                : 'border-gray-800 focus:border-indigo-500 focus:ring-indigo-500'
+                            }`}
+                            value={config.localLlm.endpoint}
+                            onChange={(e) => setConfig({
+                              ...config,
+                              localLlm: { ...config.localLlm!, endpoint: e.target.value }
+                            })}
+                          />
+                          {config.localLlm.endpoint && !config.localLlm.endpoint.trim().startsWith('http://') && !config.localLlm.endpoint.trim().startsWith('https://') && (
+                            <span className="text-[10px] text-rose-400 mt-1">Endpoint must start with http:// or https://</span>
+                          )}
+                          <span className="text-[10px] text-gray-500 mt-1">API base address of the local runner.</span>
+                        </div>
+
+                        <div className="flex flex-col md:col-span-2">
+                          <label className="block text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">Model Name</label>
+                          <input
+                            type="text"
+                            className="w-full bg-[#111827] border border-gray-800 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 rounded-lg px-4 py-3 text-white placeholder-gray-600 transition-all outline-none text-sm shadow-inner"
+                            value={config.localLlm.model}
+                            onChange={(e) => setConfig({
+                              ...config,
+                              localLlm: { ...config.localLlm!, model: e.target.value }
+                            })}
+                          />
+                          <span className="text-[10px] text-gray-500 mt-1">Exact name of the model registered on the server (e.g., <code>qwen2.5-coder:1.5b</code>).</span>
+                        </div>
+                      </div>
+
+                      <div className="flex items-center justify-between pt-4 border-t border-gray-800/40">
+                        <button
+                          type="button"
+                          disabled={testingLlm}
+                          className="inline-flex items-center justify-center gap-1.5 px-4 py-2 border border-indigo-500/20 rounded-lg text-xs font-semibold bg-indigo-500/5 hover:bg-indigo-500/10 text-indigo-400 transition-all cursor-pointer disabled:opacity-40"
+                          onClick={testLlmConnection}
+                        >
+                          {testingLlm ? 'Testing...' : 'Test Connection'}
+                        </button>
+
+                        {testStatus && (
+                          <div className={`text-xs px-3 py-1.5 rounded-lg border ${
+                            testStatus.success
+                              ? 'bg-emerald-500/10 border-emerald-500/20 text-emerald-400'
+                              : 'bg-rose-500/10 border-rose-500/20 text-rose-400'
+                          }`}>
+                            {testStatus.message}
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  )}
                 </div>
 
                 <div className="flex justify-end">
                   <button
-                    className="inline-flex items-center justify-center gap-2 px-5 py-3 rounded-lg text-sm font-semibold bg-gradient-to-r from-indigo-500 to-indigo-600 hover:from-indigo-600 hover:to-indigo-700 text-white shadow-lg shadow-indigo-500/20 transition-all cursor-pointer hover:-translate-y-0.5 active:translate-y-0"
+                    className="inline-flex items-center justify-center gap-2 px-5 py-3 rounded-lg text-sm font-semibold bg-gradient-to-r from-indigo-500 to-indigo-600 hover:from-indigo-600 hover:to-indigo-700 text-white shadow-lg shadow-indigo-500/20 transition-all cursor-pointer hover:-translate-y-0.5 active:translate-y-0 disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:translate-y-0"
+                    disabled={!isSettingsFormValid}
                     onClick={() => saveAppConfig(config)}
                   >
                     Save Configuration
@@ -2883,7 +2444,7 @@ Core Instructions:
                                 activeSession.assistant === 'codex' ? `codex resume ${activeSession.id}` :
                                 `copilot --resume ${activeSession.id}`;
                     navigator.clipboard.writeText(cmd);
-                    alert(`Copied run command to clipboard:\n\n${cmd}`);
+                    showToast(`Copied run command to clipboard:\n\n${cmd}`, 'success');
                   }}
                 >
                   <Copy size={13} /> Copy Resume Command
@@ -2903,6 +2464,35 @@ Core Instructions:
           </div>
         </div>
       )}
+
+      {/* Toast Notifications Container */}
+      <div className="fixed bottom-5 right-5 z-[9999] flex flex-col gap-3 pointer-events-none max-w-md w-full">
+        {toasts.map((toast) => (
+          <div
+            key={toast.id}
+            className={`pointer-events-auto flex items-start justify-between gap-3 px-4 py-3 rounded-xl border shadow-2xl transition-all duration-300 animate-slide-in ${
+              toast.type === 'success'
+                ? 'bg-[#062c1b]/95 border-emerald-800/80 text-emerald-100'
+                : toast.type === 'error'
+                ? 'bg-[#2c0e0e]/95 border-red-900/80 text-red-100'
+                : 'bg-[#131926]/95 border-slate-800/80 text-slate-100'
+            }`}
+          >
+            <div className="flex items-start gap-2.5 text-xs font-semibold flex-1">
+              {toast.type === 'success' && <Check className="text-emerald-400 shrink-0 mt-0.5" size={16} />}
+              {toast.type === 'error' && <AlertCircle className="text-red-400 shrink-0 mt-0.5" size={16} />}
+              {toast.type === 'info' && <Sparkles className="text-indigo-400 shrink-0 mt-0.5" size={16} />}
+              <span className="whitespace-pre-line text-left leading-relaxed">{toast.message}</span>
+            </div>
+            <button
+              onClick={() => setToasts((prev) => prev.filter((t) => t.id !== toast.id))}
+              className="text-slate-400 hover:text-white transition-colors cursor-pointer shrink-0 mt-0.5"
+            >
+              <X size={14} />
+            </button>
+          </div>
+        ))}
+      </div>
     </div>
   );
 }