@mrpatronz/nexusflow 0.2.12 → 0.2.13

package/gui/src/App.tsx

@@ -95,6 +95,7 @@ interface RunningService {
 
 const API_BASE = import.meta.env.DEV ? 'http://localhost:3000' : '';
 const isVsCode = new URLSearchParams(window.location.search).get('env') === 'vscode';
+let toastIdCounter = 0;
 
 export default function App() {
   const [view, setView] = useState<'guide' | 'create' | 'workspaces' | 'settings'>('guide');
@@ -108,7 +109,7 @@ export default function App() {
   }
   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);
+    const id = `toast-${++toastIdCounter}`;
     setToasts((prev) => [...prev, { id, message, type, duration }]);
     setTimeout(() => {
       setToasts((prev) => prev.filter((t) => t.id !== id));
@@ -190,7 +191,7 @@ export default function App() {
   const [orchTools, setOrchTools] = useState<OrchestrationDetection[]>([]);
   const [runningServices, setRunningServices] = useState<RunningService[]>([]);
   const [servicesLoading, setServicesLoading] = useState(false);
-  const [subTab, setSubTab] = useState<'services' | 'changes' | 'sessions' | 'knowledge' | 'plan'>('sessions');
+  const [subTab, setSubTab] = useState<'overview' | 'services' | 'changes' | 'sessions' | 'knowledge' | 'plan'>('overview');
   const [sessions, setSessions] = useState<any[]>([]);
   const [sessionsLoading, setSessionsLoading] = useState(false);
   const [activeSession, setActiveSession] = useState<any | null>(null);
@@ -237,86 +238,7 @@ export default function App() {
     return true;
   })();
 
-  // Initial loads
-  useEffect(() => {
-    fetchConfig();
-    fetchAIAssistants();
-    fetchWorkspaces();
-    fetchUpdateStatus();
-  }, []);
-
-  // Load tool updates status and LLM recommendations when settings view is open
-  useEffect(() => {
-    if (view === 'settings') {
-      fetchToolsStatus();
-      fetchLlmRecommendation();
-    }
-  }, [view]);
-
-  // Poll logs and services status when active workspace is open
-  useEffect(() => {
-    let interval: any = null;
-    if (activeWsId) {
-      fetchWorkspaceServices(activeWsId);
-      interval = setInterval(() => {
-        fetchWorkspaceServices(activeWsId, true);
-      }, 3000);
-    }
-    return () => {
-      if (interval) clearInterval(interval);
-    };
-  }, [activeWsId]);
-
-  // Load git changes when tab switches to 'changes' or active workspace changes
-  useEffect(() => {
-    if (activeWsId && subTab === 'changes') {
-      fetchGitChanges(activeWsId);
-    }
-  }, [activeWsId, subTab]);
-
-  // Load sessions when active workspace changes or subTab switches to 'sessions'
-  useEffect(() => {
-    if (activeWsId && subTab === 'sessions') {
-      fetchWorkspaceSessions(activeWsId);
-    }
-  }, [activeWsId, subTab]);
-
-  // Load knowledge when subTab switches to 'knowledge' or active workspace changes
-  useEffect(() => {
-    if (activeWsId && subTab === 'knowledge') {
-      fetchKnowledge(activeWsId);
-    }
-  }, [activeWsId, subTab]);
-
-  // Load plan when subTab switches to 'plan' or active workspace changes
-  useEffect(() => {
-    if (activeWsId && subTab === 'plan') {
-      fetchPlan(activeWsId);
-    }
-  }, [activeWsId, subTab]);
-
-
-
-  // Poll logs for active service logs
-  useEffect(() => {
-    let interval: any = null;
-    if (activeWsId && selectedLogService) {
-      fetchLogs(activeWsId, selectedLogService);
-      interval = setInterval(() => {
-        fetchLogs(activeWsId, selectedLogService);
-      }, 2000);
-    }
-    return () => {
-      if (interval) clearInterval(interval);
-    };
-  }, [activeWsId, selectedLogService]);
-
-  // Scroll to bottom of logs when log content changes
-  useEffect(() => {
-    if (logsEndRef.current) {
-      logsEndRef.current.scrollIntoView({ behavior: 'smooth' });
-    }
-  }, [serviceLogs]);
+  // Effects moved below helper functions to resolve lexical declaration order
 
   // ─── API Fetches ────────────────────────────────────────────────────────
 
@@ -892,7 +814,106 @@ export default function App() {
     }
   };
 
+  const executeTerminal = (command: string) => {
+    if (!activeWsId) return;
+    const ws = workspaces.find(w => w.branchName === activeWsId);
+    if (ws) {
+      window.parent.postMessage({
+        type: 'executeTerminalCommand',
+        command,
+        cwd: ws.workspacePath
+      }, '*');
+    }
+  };
+
+
 
+  // Initial loads
+  useEffect(() => {
+    fetchConfig();
+    fetchAIAssistants();
+    fetchWorkspaces();
+    fetchUpdateStatus();
+
+    // Support auto-loading workspace from VS Code or URL params
+    const queryParams = new URLSearchParams(window.location.search);
+    const queryWsId = queryParams.get('workspaceId');
+    if (queryWsId) {
+      setActiveWsId(queryWsId);
+      setView('workspaces');
+    }
+  }, []);
+
+  // Load tool updates status and LLM recommendations when settings view is open
+  useEffect(() => {
+    if (view === 'settings') {
+      fetchToolsStatus();
+      fetchLlmRecommendation();
+    }
+  }, [view]);
+
+  // Poll logs and services status when active workspace is open
+  useEffect(() => {
+    let interval: any = null;
+    if (activeWsId) {
+      fetchWorkspaceServices(activeWsId);
+      interval = setInterval(() => {
+        fetchWorkspaceServices(activeWsId, true);
+      }, 3000);
+    }
+    return () => {
+      if (interval) clearInterval(interval);
+    };
+  }, [activeWsId]);
+
+  // Load git changes when tab switches to 'changes' or active workspace changes
+  useEffect(() => {
+    if (activeWsId && subTab === 'changes') {
+      fetchGitChanges(activeWsId);
+    }
+  }, [activeWsId, subTab]);
+
+  // Load sessions when active workspace changes or subTab switches to 'sessions'
+  useEffect(() => {
+    if (activeWsId && subTab === 'sessions') {
+      fetchWorkspaceSessions(activeWsId);
+    }
+  }, [activeWsId, subTab]);
+
+  // Load knowledge when subTab switches to 'knowledge' or active workspace changes
+  useEffect(() => {
+    if (activeWsId && subTab === 'knowledge') {
+      fetchKnowledge(activeWsId);
+    }
+  }, [activeWsId, subTab]);
+
+  // Load plan when subTab switches to 'plan' or active workspace changes
+  useEffect(() => {
+    if (activeWsId && subTab === 'plan') {
+      fetchPlan(activeWsId);
+    }
+  }, [activeWsId, subTab]);
+
+  // Poll logs for active service logs
+  useEffect(() => {
+    let interval: any = null;
+    if (activeWsId && selectedLogService) {
+      fetchLogs(activeWsId, selectedLogService);
+      interval = setInterval(() => {
+        fetchLogs(activeWsId, selectedLogService);
+      }, 2000);
+    }
+    return () => {
+      if (interval) clearInterval(interval);
+    };
+  }, [activeWsId, selectedLogService]);
+
+  // Scroll to bottom of logs when log content changes
+  useEffect(() => {
+    if (logsEndRef.current) {
+      logsEndRef.current.scrollIntoView({ behavior: 'smooth' });
+    }
+  }, [serviceLogs]);
 
   const handleCopyPrompt = (ws: Feature) => {
     const repoNames = ws.repos.map((r) => r.split(/[\\/]/).pop()).join(', ');
@@ -978,68 +999,68 @@ Core Instructions:
     const isFormValid = config.devDir.trim() !== '' && config.workspacesDir.trim() !== '';
 
     return (
-      <div className="flex min-h-screen bg-[#070913] text-gray-100 font-sans items-center justify-center p-6 bg-gradient-to-br from-[#0c0f24] via-[#070913] to-[#04050b]">
+      <div className="flex min-h-screen bg-[#060813] text-gray-100 font-sans items-center justify-center p-6 bg-gradient-to-br from-[#0b0e24] via-[#060813] to-[#030409]">
         {/* Onboarding Box */}
-        <div className="max-w-6xl w-full bg-[#111827]/40 border border-gray-800/80 rounded-2xl p-8 backdrop-blur-md shadow-2xl grid grid-cols-1 lg:grid-cols-12 gap-10">
+        <div className="max-w-6xl w-full glass-card border border-slate-800/60 rounded-3xl p-10 shadow-2xl glass-card-glow grid grid-cols-1 lg:grid-cols-12 gap-12 animate-slide-in">
           
           {/* Left Column: Onboarding Guide & Concepts */}
           <div className="lg:col-span-7 flex flex-col justify-between">
             <div>
-              <div className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-indigo-500/10 text-indigo-400 border border-indigo-500/20 text-xs font-semibold uppercase tracking-wider mb-4">
+              <div className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-indigo-500/10 text-indigo-400 border border-indigo-500/20 text-xs font-semibold uppercase tracking-wider mb-5">
                 <Sparkles size={12} className="text-cyan-400 animate-pulse" /> Onboarding Guide
               </div>
-              <h1 className="text-3xl font-extrabold tracking-tight text-white mb-2 bg-gradient-to-r from-white via-gray-200 to-indigo-300 bg-clip-text text-transparent">
+              <h1 className="text-3xl font-extrabold tracking-tight text-white mb-2 bg-gradient-to-r from-white via-slate-200 to-indigo-300 bg-clip-text text-transparent">
                 Welcome to NexusFlow
               </h1>
-              <p className="text-sm text-gray-400 mb-8 max-w-xl">
+              <p className="text-sm text-slate-400 mb-8 max-w-xl leading-relaxed">
                 NexusFlow orchestrates multi-repository developer environments. It combines isolated Git worktrees, automatic code analyzer sweeps, and background process running into a single dashboard.
               </p>
 
               {/* Onboarding Steps */}
               <div className="space-y-6">
-                <div className="flex gap-4">
-                  <div className="w-8 h-8 rounded-full bg-indigo-500/10 border border-indigo-500/20 text-indigo-400 flex items-center justify-center font-bold text-sm shrink-0">
+                <div className="flex gap-4 group">
+                  <div className="w-8 h-8 rounded-full bg-indigo-500/10 border border-indigo-500/20 text-indigo-400 flex items-center justify-center font-bold text-sm shrink-0 group-hover:bg-indigo-500/20 group-hover:text-indigo-300 transition-colors">
                     1
                   </div>
                   <div>
-                    <h3 className="text-sm font-semibold text-white">Configure Development Folders</h3>
-                    <p className="text-xs text-gray-400 mt-1">
+                    <h3 className="text-sm font-semibold text-white group-hover:text-indigo-300 transition-colors">Configure Development Folders</h3>
+                    <p className="text-xs text-slate-400 mt-1 leading-relaxed">
                       Specify your local code path and target workspaces path. For the first setup, these paths start empty so you can explicitly configure them.
                     </p>
                   </div>
                 </div>
 
-                <div className="flex gap-4">
-                  <div className="w-8 h-8 rounded-full bg-indigo-500/10 border border-indigo-500/20 text-indigo-400 flex items-center justify-center font-bold text-sm shrink-0">
+                <div className="flex gap-4 group">
+                  <div className="w-8 h-8 rounded-full bg-indigo-500/10 border border-indigo-500/20 text-indigo-400 flex items-center justify-center font-bold text-sm shrink-0 group-hover:bg-indigo-500/20 group-hover:text-indigo-300 transition-colors">
                     2
                   </div>
                   <div>
-                    <h3 className="text-sm font-semibold text-white">Build Isolated Branch Workspaces</h3>
-                    <p className="text-xs text-gray-400 mt-1">
+                    <h3 className="text-sm font-semibold text-white group-hover:text-indigo-300 transition-colors">Build Isolated Branch Workspaces</h3>
+                    <p className="text-xs text-slate-400 mt-1 leading-relaxed">
                       Choose repositories and input your feature branch. NexusFlow runs <code>git worktree</code> to checkout dependencies under a unified folder structure, leaving your primary repository directories clean.
                     </p>
                   </div>
                 </div>
 
-                <div className="flex gap-4">
-                  <div className="w-8 h-8 rounded-full bg-indigo-500/10 border border-indigo-500/20 text-indigo-400 flex items-center justify-center font-bold text-sm shrink-0">
+                <div className="flex gap-4 group">
+                  <div className="w-8 h-8 rounded-full bg-indigo-500/10 border border-indigo-500/20 text-indigo-400 flex items-center justify-center font-bold text-sm shrink-0 group-hover:bg-indigo-500/20 group-hover:text-indigo-300 transition-colors">
                     3
                   </div>
                   <div>
-                    <h3 className="text-sm font-semibold text-white">Align AI Coding Contexts</h3>
-                    <p className="text-xs text-gray-400 mt-1">
+                    <h3 className="text-sm font-semibold text-white group-hover:text-indigo-300 transition-colors">Align AI Coding Contexts</h3>
+                    <p className="text-xs text-slate-400 mt-1 leading-relaxed">
                       NexusFlow automatically generates configuration files (<code>CLAUDE.md</code>, <code>.cursorrules</code>, <code>AGENTS.md</code>) that instruct the AI assistant to analyze project inter-dependencies, document its assumptions in <code>nexusflow-overview.md</code>, and highlight clarifying questions.
                     </p>
                   </div>
                 </div>
 
-                <div className="flex gap-4">
-                  <div className="w-8 h-8 rounded-full bg-indigo-500/10 border border-indigo-500/20 text-indigo-400 flex items-center justify-center font-bold text-sm shrink-0">
+                <div className="flex gap-4 group">
+                  <div className="w-8 h-8 rounded-full bg-indigo-500/10 border border-indigo-500/20 text-indigo-400 flex items-center justify-center font-bold text-sm shrink-0 group-hover:bg-indigo-500/20 group-hover:text-indigo-300 transition-colors">
                     4
                   </div>
                   <div>
-                    <h3 className="text-sm font-semibold text-white">Orchestrate Background Services</h3>
-                    <p className="text-xs text-gray-400 mt-1">
+                    <h3 className="text-sm font-semibold text-white group-hover:text-indigo-300 transition-colors">Orchestrate Background Services</h3>
+                    <p className="text-xs text-slate-400 mt-1 leading-relaxed">
                       Run APIs, database scripts, and frontend watch tasks concurrently from the web portal. Monitor real-time logs inside a unified terminal pane.
                     </p>
                   </div>
@@ -1048,12 +1069,12 @@ Core Instructions:
             </div>
 
             {/* Comparison Dashboard */}
-            <div className="mt-8 pt-6 border-t border-gray-800/80">
-              <h4 className="text-xs font-semibold uppercase tracking-wider text-gray-500 mb-3">Industry Comparison</h4>
+            <div className="mt-8 pt-6 border-t border-slate-800/80">
+              <h4 className="text-xs font-semibold uppercase tracking-wider text-slate-500 mb-3">Industry Comparison</h4>
               <div className="overflow-x-auto font-sans">
-                <table className="w-full text-[10px] text-gray-400 text-left border-collapse">
+                <table className="w-full text-[10px] text-slate-400 text-left border-collapse">
                   <thead>
-                    <tr className="border-b border-gray-800 text-gray-500">
+                    <tr className="border-b border-slate-800 text-slate-500">
                       <th className="py-2 pr-4 font-semibold">Orchestrator</th>
                       <th className="py-2 px-4 font-semibold">Multi-Repo</th>
                       <th className="py-2 px-4 font-semibold">AI Rules Integration</th>
@@ -1061,29 +1082,29 @@ Core Instructions:
                     </tr>
                   </thead>
                   <tbody>
-                    <tr className="border-b border-gray-800/40">
+                    <tr className="border-b border-slate-850">
                       <td className="py-2 pr-4 font-semibold text-white">Docker Compose</td>
                       <td className="py-2 px-4">Yes (Containers only)</td>
                       <td className="py-2 px-4">No</td>
                       <td className="py-2 pl-4">Medium (VM overhead)</td>
                     </tr>
-                    <tr className="border-b border-gray-800/40">
+                    <tr className="border-b border-slate-850">
                       <td className="py-2 pr-4 font-semibold text-white">Lerna / Turborepo</td>
                       <td className="py-2 px-4">Monorepo only</td>
                       <td className="py-2 px-4">No</td>
                       <td className="py-2 pl-4">Light</td>
                     </tr>
-                    <tr className="border-b border-gray-800/40">
+                    <tr className="border-b border-slate-850">
                       <td className="py-2 pr-4 font-semibold text-white">DevPod / Gitpod</td>
                       <td className="py-2 px-4">Yes (Complex config)</td>
                       <td className="py-2 px-4">No</td>
                       <td className="py-2 pl-4">Heavy (Full virtual VM)</td>
                     </tr>
                     <tr>
-                      <td className="py-2 pr-4 font-semibold text-indigo-400">NexusFlow</td>
-                      <td className="py-2 px-4 text-indigo-300">Yes (Native Worktrees)</td>
-                      <td className="py-2 px-4 text-indigo-300">Yes (CLAUDE.md/MDC rules)</td>
-                      <td className="py-2 pl-4 text-indigo-300">Extremely Light (Native processes)</td>
+                      <td className="py-2 pr-4 font-semibold text-indigo-400 text-glow-indigo">NexusFlow</td>
+                      <td className="py-2 px-4 text-indigo-300 font-medium">Yes (Native Worktrees)</td>
+                      <td className="py-2 px-4 text-indigo-300 font-medium">Yes (CLAUDE.md/MDC rules)</td>
+                      <td className="py-2 pl-4 text-indigo-300 font-medium">Extremely Light (Native processes)</td>
                     </tr>
                   </tbody>
                 </table>
@@ -1093,44 +1114,44 @@ Core Instructions:
 
           {/* Right Column: Configuration Form */}
           <div className="lg:col-span-5 flex flex-col justify-center">
-            <div className="bg-gray-950/40 border border-gray-800/80 rounded-2xl p-6 shadow-lg">
+            <div className="bg-slate-950/50 border border-slate-850 rounded-2xl p-8 shadow-xl relative overflow-hidden before:absolute before:inset-0 before:bg-gradient-to-b before:from-indigo-500/5 before:to-transparent before:pointer-events-none">
               <h2 className="text-xl font-bold text-white mb-1 flex items-center gap-2">
                 <SettingsIcon className="text-indigo-400 animate-spin-slow" size={20} /> Initialize Config
               </h2>
-              <p className="text-xs text-gray-500 mb-6">
+              <p className="text-xs text-slate-500 mb-6">
                 Define the directories on your machine. The fields are empty so you can provide your paths.
               </p>
 
               {/* Form Input fields */}
               <div className="space-y-5">
                 <div>
-                  <label className="block text-[11px] font-semibold text-gray-400 uppercase tracking-wider mb-2">Development Directory</label>
+                  <label className="block text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-2">Development Directory</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-xs shadow-inner"
+                    className="w-full bg-slate-950/60 border border-slate-800 focus:border-indigo-500/80 focus:ring-1 focus:ring-indigo-500/35 rounded-xl px-4 py-3 text-white placeholder-slate-600 transition-all outline-none text-xs shadow-inner"
                     placeholder="e.g. C:\Users\username\dev"
                     value={config.devDir}
                     onChange={(e) => setConfig({ ...config, devDir: e.target.value })}
                   />
                   {defaultPaths && (
-                    <div className="text-[10px] text-gray-500 mt-1.5 flex justify-between items-center">
-                      <span>Suggested: <code>{defaultPaths.devDir}</code></span>
+                    <div className="text-[10px] text-slate-500 mt-1.5 flex justify-between items-center">
+                      <span>Suggested: <code className="text-indigo-300">{defaultPaths.devDir}</code></span>
                     </div>
                   )}
                 </div>
 
                 <div>
-                  <label className="block text-[11px] font-semibold text-gray-400 uppercase tracking-wider mb-2">Workspaces Directory</label>
+                  <label className="block text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-2">Workspaces Directory</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-xs shadow-inner"
+                    className="w-full bg-slate-950/60 border border-slate-800 focus:border-indigo-500/80 focus:ring-1 focus:ring-indigo-500/35 rounded-xl px-4 py-3 text-white placeholder-slate-600 transition-all outline-none text-xs shadow-inner"
                     placeholder="e.g. C:\Users\username\dev\workspaces"
                     value={config.workspacesDir}
                     onChange={(e) => setConfig({ ...config, workspacesDir: e.target.value })}
                   />
                   {defaultPaths && (
-                    <div className="text-[10px] text-gray-500 mt-1.5 flex justify-between items-center">
-                      <span>Suggested: <code>{defaultPaths.workspacesDir}</code></span>
+                    <div className="text-[10px] text-slate-500 mt-1.5 flex justify-between items-center">
+                      <span>Suggested: <code className="text-indigo-300">{defaultPaths.workspacesDir}</code></span>
                     </div>
                   )}
                 </div>
@@ -1140,15 +1161,15 @@ Core Instructions:
                     <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"
+                      className="w-4 h-4 rounded border-slate-800 bg-slate-950/60 text-indigo-650 focus:ring-indigo-500/50 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">
+                    <label htmlFor="onboardingPackContextXml" className="text-xs font-semibold text-slate-200 cursor-pointer select-none">
                       Pack Codebase Context with Repomix (XML)
                     </label>
                   </div>
-                  <span className="text-[10px] text-gray-500 mt-1 block">
+                  <span className="text-[10px] text-slate-500 mt-1.5 block leading-normal">
                     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>
@@ -1157,7 +1178,7 @@ Core Instructions:
                 <div className="flex gap-2 pt-2">
                   <button
                     type="button"
-                    className="flex-1 inline-flex items-center justify-center gap-1.5 px-3 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"
+                    className="flex-1 inline-flex items-center justify-center gap-1.5 px-3 py-2.5 bg-slate-900 border border-slate-800/80 hover:bg-indigo-500/5 hover:border-indigo-500/30 rounded-xl text-xs font-semibold transition-all cursor-pointer text-slate-300 hover:text-white"
                     onClick={() => {
                       if (defaultPaths) {
                         setConfig({
@@ -1172,7 +1193,7 @@ Core Instructions:
                   </button>
                   <button
                     type="button"
-                    className="px-3 py-2 bg-gray-900 border border-gray-800 hover:bg-gray-800 hover:border-rose-900/60 hover:text-rose-400 rounded-lg text-xs font-semibold transition-all cursor-pointer"
+                    className="px-3 py-2.5 bg-slate-900 border border-slate-800/80 hover:bg-rose-500/5 hover:border-rose-500/30 hover:text-rose-400 rounded-xl text-xs font-semibold transition-all cursor-pointer text-slate-400"
                     onClick={() => {
                       setConfig({
                         ...config,
@@ -1189,7 +1210,7 @@ Core Instructions:
                 <div className="pt-4">
                   <button
                     type="button"
-                    className="w-full 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 hover:-translate-y-0.5 active:translate-y-0 disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:translate-y-0 transition-all cursor-pointer"
+                    className="w-full inline-flex items-center justify-center gap-2 px-5 py-3.5 rounded-xl text-sm font-bold bg-gradient-to-r from-indigo-500 via-indigo-600 to-purple-650 hover:from-indigo-600 hover:to-purple-700 text-white shadow-lg shadow-indigo-500/20 hover:-translate-y-0.5 active:translate-y-0 disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:translate-y-0 transition-all cursor-pointer"
                     disabled={!isFormValid}
                     onClick={() => saveAppConfig(config)}
                   >
@@ -1204,41 +1225,243 @@ Core Instructions:
     );
   }
 
+  if (isVsCode) {
+    return (
+      <div className="flex flex-col h-screen w-full bg-[#060813] text-[#d1d5db] font-mono text-[11px] overflow-hidden select-none border-t border-gray-800">
+        {/* Terminal Header */}
+        <div className="flex items-center justify-between px-3 py-2 bg-[#0b0f19] border-b border-gray-800 shrink-0 text-[10px]">
+          <div className="flex items-center gap-2">
+            <span className="font-bold text-indigo-400">NEXUSFLOW_SHELL</span>
+            <span className="text-gray-700">|</span>
+            <span className="text-gray-300">ws: {activeWsId || 'none'}</span>
+          </div>
+          <div className="flex items-center gap-2">
+            {activeWsId && (
+              <button
+                onClick={() => {
+                  setActiveWsId(null);
+                  setSelectedLogService(null);
+                  setServiceLogs('');
+                }}
+                className="text-indigo-400 hover:text-indigo-350 hover:underline transition-colors cursor-pointer bg-transparent border-none p-0 outline-none"
+              >
+                [Change WS]
+              </button>
+            )}
+            <span className="text-[10px] text-gray-500">v{appVersion}</span>
+          </div>
+        </div>
+
+        {!activeWsId ? (
+          /* CLI Workspace Selection Menu */
+          <div className="flex-1 flex flex-col items-center justify-center p-6 text-center overflow-y-auto">
+            <div className="text-indigo-400 font-bold mb-4 text-[12px] uppercase">
+              === Select Active Workspace ===
+            </div>
+            <div className="flex flex-col gap-2 w-full max-w-xs">
+              {workspaces.map((ws) => (
+                <button
+                  key={ws.branchName}
+                  onClick={() => {
+                    setActiveWsId(ws.branchName);
+                    fetchWorkspaceServices(ws.branchName);
+                  }}
+                  className="w-full text-left p-2.5 bg-gray-950 border border-gray-800 hover:border-indigo-500 rounded hover:bg-indigo-500/5 text-gray-300 hover:text-white transition-all text-[11px] cursor-pointer"
+                >
+                  &gt; {ws.branchName}
+                </button>
+              ))}
+              {workspaces.length === 0 && (
+                <div className="text-gray-550 italic">No workspaces found. Initialize one via the CLI.</div>
+              )}
+            </div>
+          </div>
+        ) : (
+          /* Active Workspace Panel */
+          <div className="flex-1 flex flex-col min-h-0">
+            {/* Top Config / Control Panel */}
+            <div className="p-3 border-b border-gray-800 shrink-0 bg-gray-950/30">
+              {/* Service Control Buttons */}
+              <div className="flex gap-2 mb-3">
+                <button
+                  onClick={() => handleStartServices(activeWsId)}
+                  className="flex-1 inline-flex items-center justify-center gap-1.5 px-3 py-1.5 rounded border border-emerald-500/20 bg-emerald-500/5 hover:bg-emerald-500/10 text-emerald-400 font-bold transition-all cursor-pointer text-[10px]"
+                >
+                  <Play size={10} /> [START SERVICES]
+                </button>
+                <button
+                  onClick={() => handleStopServices(activeWsId)}
+                  className="flex-1 inline-flex items-center justify-center gap-1.5 px-3 py-1.5 rounded border border-rose-500/20 bg-rose-500/5 hover:bg-rose-500/10 text-rose-400 font-bold transition-all cursor-pointer text-[10px]"
+                >
+                  <X size={10} /> [STOP SERVICES]
+                </button>
+              </div>
+
+              {/* Service List */}
+              <div className="mb-3">
+                <div className="text-[10px] text-gray-400 uppercase font-bold tracking-wider mb-1 px-1">
+                  Background Services ({runningServices.filter(rs => rs.pid > 0).length}/{services.length})
+                </div>
+                {services.length === 0 ? (
+                  <div className="text-gray-600 italic px-1 text-[10px]">No services detected in workspace.</div>
+                ) : (
+                  <div className="flex flex-col gap-1 max-h-[120px] overflow-y-auto pr-1">
+                    {services.map((service) => {
+                      const isRunning = runningServices.some((rs) => rs.name === service.name && rs.pid > 0);
+                      const isSelected = selectedLogService === service.name;
+                      return (
+                        <div
+                          key={service.name}
+                          onClick={() => setSelectedLogService(service.name)}
+                          className={`flex items-center justify-between p-1.5 border rounded cursor-pointer transition-all ${
+                            isSelected
+                              ? 'bg-indigo-950/40 border-indigo-500/50 text-white'
+                              : 'bg-gray-950/20 border-gray-800 hover:border-gray-700 text-gray-300'
+                          }`}
+                        >
+                          <div className="flex items-center gap-2 truncate">
+                            <span className={`h-1.5 w-1.5 rounded-full ${isRunning ? 'bg-emerald-400 animate-pulse' : 'bg-rose-500'}`}></span>
+                            <span className="font-bold truncate">{service.name}</span>
+                          </div>
+                          <span className="text-[10px] font-mono shrink-0">
+                            {isRunning ? (
+                              <span className="text-emerald-400 bg-emerald-500/10 px-1 py-0.2 rounded border border-emerald-500/20 text-[8px] font-bold uppercase">on</span>
+                            ) : (
+                              <span className="text-gray-500 bg-gray-900 px-1 py-0.2 rounded border border-gray-800 text-[8px] font-bold uppercase">off</span>
+                            )}
+                          </span>
+                        </div>
+                      );
+                    })}
+                  </div>
+                )}
+              </div>
+
+              {/* MCP Status Check */}
+              <div className="mb-3 border-t border-gray-800 pt-2.5">
+                <div className="text-[10px] text-gray-400 font-bold uppercase mb-1 px-1">
+                  Active Local MCP Tools
+                </div>
+                <div className="flex flex-col gap-1 px-1 text-[10px] text-gray-450 font-mono">
+                  <div className="flex justify-between">
+                    <span>• search_workspace</span>
+                    <span className="text-indigo-400 font-bold">READY</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span>• get_service_logs</span>
+                    <span className="text-indigo-400 font-bold">READY</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span>• delegate_to_local_agent</span>
+                    <span className={config?.localLlm?.enabled ? "text-indigo-400 font-bold" : "text-gray-600 font-bold"}>
+                      {config?.localLlm?.enabled ? 'READY' : 'DISABLED'}
+                    </span>
+                  </div>
+                </div>
+              </div>
+
+              {/* Interactive CLI Buttons */}
+              <div className="border-t border-gray-800 pt-2.5">
+                <div className="text-[10px] text-gray-400 font-bold uppercase mb-1.5 px-1">
+                  Terminal Commands (Click to Run)
+                </div>
+                <div className="grid grid-cols-2 gap-1.5">
+                  <button
+                    onClick={() => executeTerminal('nexusflow sync')}
+                    className="px-2 py-1.5 text-left border border-gray-850 hover:border-indigo-500 bg-gray-950/40 rounded text-gray-300 hover:text-white hover:bg-indigo-950/20 transition-all font-mono text-[9px] cursor-pointer"
+                  >
+                    $ nexusflow sync
+                  </button>
+                  <button
+                    onClick={() => executeTerminal('nexusflow diff')}
+                    className="px-2 py-1.5 text-left border border-gray-850 hover:border-indigo-500 bg-gray-950/40 rounded text-gray-300 hover:text-white hover:bg-indigo-950/20 transition-all font-mono text-[9px] cursor-pointer"
+                  >
+                    $ nexusflow diff
+                  </button>
+                  <button
+                    onClick={() => executeTerminal('nexusflow handoff')}
+                    className="px-2 py-1.5 text-left border border-gray-850 hover:border-indigo-500 bg-gray-950/40 rounded text-gray-300 hover:text-white hover:bg-indigo-950/20 transition-all font-mono text-[9px] cursor-pointer"
+                  >
+                    $ nexusflow handoff
+                  </button>
+                  <button
+                    onClick={() => executeTerminal('nexusflow status')}
+                    className="px-2 py-1.5 text-left border border-gray-850 hover:border-indigo-500 bg-gray-950/40 rounded text-gray-300 hover:text-white hover:bg-indigo-950/20 transition-all font-mono text-[9px] cursor-pointer"
+                  >
+                    $ nexusflow status
+                  </button>
+                </div>
+              </div>
+            </div>
+
+            {/* Bottom Log Pane */}
+            <div className="flex-1 flex flex-col min-h-0 bg-[#04060d]">
+              <div className="flex items-center justify-between px-3 py-1.5 bg-[#090d1a] border-b border-gray-800/80 shrink-0 text-[9px] text-gray-400 uppercase tracking-wider font-bold">
+                <div className="flex items-center gap-1.5">
+                  <span className="h-1.5 w-1.5 rounded-full bg-indigo-500 animate-pulse"></span>
+                  <span>log_stream: {selectedLogService || 'none'}</span>
+                </div>
+                <button
+                  onClick={() => {
+                    if (activeWsId && selectedLogService) {
+                      fetchLogs(activeWsId, selectedLogService);
+                    }
+                  }}
+                  className="text-gray-500 hover:text-white font-mono hover:underline cursor-pointer bg-transparent border-none p-0 outline-none"
+                >
+                  [refresh]
+                </button>
+              </div>
+              <div className="flex-1 p-3 overflow-y-auto font-mono text-[10px] leading-relaxed whitespace-pre-wrap select-text selection:bg-indigo-500/30 text-gray-300">
+                {serviceLogs.trim() ? (
+                  serviceLogs
+                ) : (
+                  <span className="text-gray-600 italic font-mono">(no logs recorded yet)</span>
+                )}
+                <div ref={logsEndRef} />
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  }
+
   return (
     <div className="flex min-h-screen bg-[#060813] bg-gradient-to-br from-[#0c0f24] via-[#060813] to-[#04050a] text-gray-100 font-sans">
       {/* Sidebar Navigation */}
-      <aside className="w-64 bg-[#090d1a]/85 border-r border-gray-800/80 flex flex-col p-6 shrink-0 shadow-2xl backdrop-blur-md">
+      <aside className="w-64 bg-slate-950/40 border-r border-slate-900 flex flex-col p-6 shrink-0 shadow-[0_0_50px_rgba(0,0,0,0.8)] backdrop-blur-xl relative z-10">
         <div className="flex items-center gap-3 mb-10 px-2">
-          <div className="w-9 h-9 bg-gradient-to-tr from-cyan-400 via-indigo-500 to-purple-600 rounded-lg flex items-center justify-center font-bold text-white shadow-lg shadow-indigo-500/25 text-lg">
+          <div className="w-9 h-9 bg-gradient-to-tr from-cyan-400 via-indigo-500 to-purple-650 rounded-lg flex items-center justify-center font-extrabold text-white shadow-lg shadow-indigo-500/25 text-lg select-none">
             N
           </div>
-          <span className="text-xl font-bold tracking-tight bg-gradient-to-r from-white via-gray-200 to-gray-400 bg-clip-text text-transparent">
+          <span className="text-xl font-bold tracking-tight bg-gradient-to-r from-white via-slate-200 to-slate-400 bg-clip-text text-transparent">
             NexusFlow
           </span>
         </div>
         <nav className="flex-1">
-          <ul className="flex flex-col gap-2">
+          <ul className="flex flex-col gap-2.5">
             <li>
               <button
-                className={`w-full flex items-center gap-3 p-3 rounded-lg text-sm font-semibold transition-all cursor-pointer border ${
+                className={`w-full flex items-center gap-3 p-3 rounded-xl text-sm font-semibold transition-all cursor-pointer border relative overflow-hidden group ${
                   view === 'guide'
-                    ? 'text-white bg-indigo-500/10 border-indigo-500/20 shadow-sm'
-                    : 'text-gray-400 border-transparent hover:text-white hover:bg-gray-800/40'
+                    ? 'text-white bg-indigo-500/10 border-indigo-500/25 shadow-[0_0_20px_rgba(99,102,241,0.08)] before:absolute before:left-0 before:top-2 before:bottom-2 before:w-[3.5px] before:bg-indigo-500 before:rounded-r'
+                    : 'text-slate-400 border-transparent hover:text-white hover:bg-slate-900/40 hover:-translate-x-0.5'
                 }`}
                 onClick={() => {
                   setView('guide');
                 }}
               >
-                <Sparkles size={18} className="text-indigo-400" />
+                <Sparkles size={18} className="text-indigo-400 group-hover:scale-110 transition-transform" />
                 Getting Started
               </button>
             </li>
             <li>
               <button
-                className={`w-full flex items-center gap-3 p-3 rounded-lg text-sm font-semibold transition-all cursor-pointer border ${
+                className={`w-full flex items-center gap-3 p-3 rounded-xl text-sm font-semibold transition-all cursor-pointer border relative overflow-hidden group ${
                   view === 'create'
-                    ? 'text-white bg-indigo-500/10 border-indigo-500/20 shadow-sm'
-                    : 'text-gray-400 border-transparent hover:text-white hover:bg-gray-800/40'
+                    ? 'text-white bg-indigo-500/10 border-indigo-500/25 shadow-[0_0_20px_rgba(99,102,241,0.08)] before:absolute before:left-0 before:top-2 before:bottom-2 before:w-[3.5px] before:bg-indigo-500 before:rounded-r'
+                    : 'text-slate-400 border-transparent hover:text-white hover:bg-slate-900/40 hover:-translate-x-0.5'
                 }`}
                 onClick={() => {
                   setView('create');
@@ -1250,45 +1473,45 @@ Core Instructions:
                   setLocalLlmEnabled(config?.localLlm?.enabled || false);
                 }}
               >
-                <PlusCircle size={18} className="text-indigo-400" />
+                <PlusCircle size={18} className="text-indigo-400 group-hover:scale-110 transition-transform" />
                 New Workspace
               </button>
             </li>
             <li>
               <button
-                className={`w-full flex items-center gap-3 p-3 rounded-lg text-sm font-semibold transition-all cursor-pointer border ${
+                className={`w-full flex items-center gap-3 p-3 rounded-xl text-sm font-semibold transition-all cursor-pointer border relative overflow-hidden group ${
                   view === 'workspaces'
-                    ? 'text-white bg-indigo-500/10 border-indigo-500/20 shadow-sm'
-                    : 'text-gray-400 border-transparent hover:text-white hover:bg-gray-800/40'
+                    ? 'text-white bg-indigo-500/10 border-indigo-500/25 shadow-[0_0_20px_rgba(99,102,241,0.08)] before:absolute before:left-0 before:top-2 before:bottom-2 before:w-[3.5px] before:bg-indigo-500 before:rounded-r'
+                    : 'text-slate-400 border-transparent hover:text-white hover:bg-slate-900/40 hover:-translate-x-0.5'
                 }`}
                 onClick={() => {
                   setView('workspaces');
                   fetchWorkspaces();
                 }}
               >
-                <FolderGit2 size={18} className="text-indigo-400" />
+                <FolderGit2 size={18} className="text-indigo-400 group-hover:scale-110 transition-transform" />
                 Active Workspaces
               </button>
             </li>
             <li>
               <button
-                className={`w-full flex items-center gap-3 p-3 rounded-lg text-sm font-semibold transition-all cursor-pointer border ${
+                className={`w-full flex items-center gap-3 p-3 rounded-xl text-sm font-semibold transition-all cursor-pointer border relative overflow-hidden group ${
                   view === 'settings'
-                    ? 'text-white bg-indigo-500/10 border-indigo-500/20 shadow-sm'
-                    : 'text-gray-400 border-transparent hover:text-white hover:bg-gray-800/40'
+                    ? 'text-white bg-indigo-500/10 border-indigo-500/25 shadow-[0_0_20px_rgba(99,102,241,0.08)] before:absolute before:left-0 before:top-2 before:bottom-2 before:w-[3.5px] before:bg-indigo-500 before:rounded-r'
+                    : 'text-slate-400 border-transparent hover:text-white hover:bg-slate-900/40 hover:-translate-x-0.5'
                 }`}
                 onClick={() => {
                   setView('settings');
                   fetchConfig();
                 }}
               >
-                <SettingsIcon size={18} className="text-indigo-400" />
+                <SettingsIcon size={18} className="text-indigo-400 group-hover:scale-110 transition-transform" />
                 Settings
               </button>
             </li>
           </ul>
         </nav>
-        <div className="pt-6 border-t border-gray-800/60 text-[11px] text-gray-500 text-center">
+        <div className="pt-6 border-t border-slate-900 text-[10px] text-slate-500 text-center tracking-wider font-semibold uppercase">
           NexusFlow Engine v{appVersion}
         </div>
       </aside>
@@ -1975,6 +2198,7 @@ Core Instructions:
                 handleCopyPrompt={handleCopyPrompt}
                 handleOpenInEditor={handleOpenInEditor}
                 fetchWorkspaces={fetchWorkspaces}
+                aiAssistants={aiAssistants}
                 repos={repos}
                 deleteWsLoading={deleteWsLoading}
                 addRepoLoading={addRepoLoading}