@mrpatronz/nexusflow 0.1.0 → 0.1.2

package/gui/src/App.tsx

@@ -19,9 +19,14 @@ import {
   X,
   MessageSquare,
   MessageSquareCode,
+  BookOpen,
+  ListOrdered,
+  Save,
+  Edit,
 } from 'lucide-react';
 import './App.css';
 
+
 // Types matched with src/types.ts
 interface NexusFlowConfig {
   version: string;
@@ -84,6 +89,7 @@ interface RunningService {
 }
 
 const API_BASE = import.meta.env.DEV ? 'http://localhost:3000' : '';
+const isVsCode = new URLSearchParams(window.location.search).get('env') === 'vscode';
 
 export default function App() {
   const [view, setView] = useState<'guide' | 'create' | 'workspaces' | 'settings'>('guide');
@@ -143,7 +149,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'>('sessions');
+  const [subTab, setSubTab] = useState<'services' | 'changes' | 'sessions' | 'knowledge' | 'plan'>('sessions');
   const [sessions, setSessions] = useState<any[]>([]);
   const [sessionsLoading, setSessionsLoading] = useState(false);
   const [activeSession, setActiveSession] = useState<any | null>(null);
@@ -151,6 +157,20 @@ export default function App() {
   const [transcriptLoading, setTranscriptLoading] = useState(false);
   const [gitChanges, setGitChanges] = useState<any[]>([]);
   const [gitChangesLoading, setGitChangesLoading] = useState(false);
+  const [knowledgeContent, setKnowledgeContent] = useState<string>('');
+  const [knowledgeLoading, setKnowledgeLoading] = useState<boolean>(false);
+  const [isEditingKnowledge, setIsEditingKnowledge] = useState<boolean>(false);
+  const [editedKnowledge, setEditedKnowledge] = useState<string>('');
+  const [saveKnowledgeLoading, setSaveKnowledgeLoading] = useState<boolean>(false);
+  const [planContent, setPlanContent] = useState<string>('');
+  const [planLoading, setPlanLoading] = useState<boolean>(false);
+  const [syncLoading, setSyncLoading] = useState<boolean>(false);
+  const [syncResults, setSyncResults] = useState<any[] | null>(null);
+  const [commitMessage, setCommitMessage] = useState<string>('');
+  const [showCommitModal, setShowCommitModal] = useState<boolean>(false);
+  const [commitLoading, setCommitLoading] = useState<boolean>(false);
+  const [commitResults, setCommitResults] = useState<any[] | null>(null);
+
 
   // Log Viewer
   const [selectedLogService, setSelectedLogService] = useState<string | null>(null);
@@ -193,6 +213,21 @@ export default function App() {
     }
   }, [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(() => {
@@ -390,6 +425,96 @@ export default function App() {
   };
 
 
+  const fetchKnowledge = async (wsId: string) => {
+    setKnowledgeLoading(true);
+    try {
+      const encodedId = encodeURIComponent(wsId);
+      const res = await fetch(`${API_BASE}/api/workspace/${encodedId}/knowledge`);
+      const data = await res.json();
+      setKnowledgeContent(data.content || '');
+      setEditedKnowledge(data.content || '');
+    } catch (e) {
+      console.error(e);
+    } finally {
+      setKnowledgeLoading(false);
+    }
+  };
+
+  const handleSaveKnowledge = async (wsId: string) => {
+    setSaveKnowledgeLoading(true);
+    try {
+      const encodedId = encodeURIComponent(wsId);
+      const res = await fetch(`${API_BASE}/api/workspace/${encodedId}/knowledge`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ content: editedKnowledge }),
+      });
+      if (res.ok) {
+        setKnowledgeContent(editedKnowledge);
+        setIsEditingKnowledge(false);
+      }
+    } catch (e) {
+      console.error(e);
+    } finally {
+      setSaveKnowledgeLoading(false);
+    }
+  };
+
+  const fetchPlan = async (wsId: string) => {
+    setPlanLoading(true);
+    try {
+      const encodedId = encodeURIComponent(wsId);
+      const res = await fetch(`${API_BASE}/api/workspace/${encodedId}/plan`);
+      const data = await res.json();
+      setPlanContent(data.content || '');
+    } catch (e) {
+      console.error(e);
+    } finally {
+      setPlanLoading(false);
+    }
+  };
+
+
+  const handleSyncAll = async (wsId: string) => {
+    setSyncLoading(true);
+    setSyncResults(null);
+    try {
+      const encodedId = encodeURIComponent(wsId);
+      const res = await fetch(`${API_BASE}/api/workspace/${encodedId}/sync`, { method: 'POST' });
+      const data = await res.json();
+      setSyncResults(data.results || []);
+      fetchGitChanges(wsId);
+    } catch (e) {
+      console.error(e);
+    } finally {
+      setSyncLoading(false);
+    }
+  };
+
+  const handleCommitAll = async (wsId: string) => {
+    if (!commitMessage.trim()) return;
+    setCommitLoading(true);
+    setCommitResults(null);
+    try {
+      const encodedId = encodeURIComponent(wsId);
+      const res = await fetch(`${API_BASE}/api/workspace/${encodedId}/commit`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ message: commitMessage }),
+      });
+      const data = await res.json();
+      setCommitResults(data.results || []);
+      setCommitMessage('');
+      setShowCommitModal(false);
+      fetchGitChanges(wsId);
+    } catch (e) {
+      console.error(e);
+    } finally {
+      setCommitLoading(false);
+    }
+  };
+
+
   // ─── Actions ────────────────────────────────────────────────────────────
 
   const handleToggleRepo = (repo: RepoInfo) => {
@@ -434,14 +559,18 @@ export default function App() {
         fetchWorkspaces();
 
         if (selectedEditor) {
-          await fetch(`${API_BASE}/api/open-editor`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({
-              workspacePath: data.workspacePath,
-              command: selectedEditor.command,
-            }),
-          });
+          if (isVsCode) {
+            window.parent.postMessage({ type: 'openWorkspaceFolder', workspacePath: data.workspacePath }, '*');
+          } else {
+            await fetch(`${API_BASE}/api/open-editor`, {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({
+                workspacePath: data.workspacePath,
+                command: selectedEditor.command,
+              }),
+            });
+          }
         }
       } else {
         alert(`Error: ${data.error || 'Failed to create workspace'}`);
@@ -497,9 +626,18 @@ export default function App() {
       });
       const data = await res.json();
       if (res.ok && data.success) {
-        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.`);
-        setActiveWsId(ws.branchName);
+        if (isVsCode) {
+          window.parent.postMessage({
+            type: 'executeTerminalCommand',
+            command: data.resumeCommand,
+            cwd: ws.workspacePath
+          }, '*');
+          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.`);
+          setActiveWsId(ws.branchName);
+        }
       } else {
         alert(`Error: ${data.error || 'Failed to resume session'}`);
       }
@@ -512,6 +650,10 @@ export default function App() {
   };
 
   const handleOpenInEditor = async (workspacePath: string) => {
+    if (isVsCode) {
+      window.parent.postMessage({ type: 'openWorkspaceFolder', workspacePath }, '*');
+      return;
+    }
     const editor = editors.find((e) => e.detected) || editors[0];
     if (!editor) {
       alert('No detected editors available.');
@@ -688,7 +830,7 @@ Core Instructions:
                   <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"
-                    placeholder="e.g. C:\Users\patro\dev"
+                    placeholder="e.g. C:\Users\username\dev"
                     value={config.devDir}
                     onChange={(e) => setConfig({ ...config, devDir: e.target.value })}
                   />
@@ -704,7 +846,7 @@ Core Instructions:
                   <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"
-                    placeholder="e.g. C:\Users\patro\dev\workspaces"
+                    placeholder="e.g. C:\Users\username\dev\workspaces"
                     value={config.workspacesDir}
                     onChange={(e) => setConfig({ ...config, workspacesDir: e.target.value })}
                   />
@@ -1528,6 +1670,26 @@ Core Instructions:
                                 >
                                   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' && (
@@ -1695,19 +1857,108 @@ Core Instructions:
                               {/* Active Changes View */}
                               {subTab === 'changes' && (
                                 <div>
-                                  <header className="flex justify-between items-center mb-4">
+                                  <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>
-                                    <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>
+                                    <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} />
@@ -1723,16 +1974,39 @@ Core Instructions:
                                       ) : (
                                         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">
-                                                <h5 className="text-xs font-bold text-white font-mono">{repo.repoName}</h5>
+                                                <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">
-                                                    <span className="font-mono text-gray-300 text-[11px] truncate max-w-[320px]">{fileInfo.file}</span>
+                                                    <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' :
@@ -1751,6 +2025,85 @@ Core Instructions:
                                   )}
                                 </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>