@mrpatronz/nexusflow 0.1.0 → 0.1.2

package/gui/src/features/changes/ChangesViewer.tsx

@@ -0,0 +1,212 @@
+import React from 'react';
+import { FolderGit2, RefreshCw, Check } from 'lucide-react';
+import type { Feature } from '../../types.js';
+
+interface ChangesViewerProps {
+  ws: Feature;
+  gitChanges: any[];
+  gitChangesLoading: boolean;
+  syncLoading: boolean;
+  syncResults: any[] | null;
+  commitMessage: string;
+  showCommitModal: boolean;
+  commitLoading: boolean;
+  commitResults: any[] | null;
+  setSyncResults: (val: any[] | null) => void;
+  setCommitResults: (val: any[] | null) => void;
+  setCommitMessage: (val: string) => void;
+  setShowCommitModal: (val: boolean) => void;
+  fetchGitChanges: (wsId: string) => Promise<void>;
+  handleSyncAll: (wsId: string) => Promise<void>;
+  handleCommitAll: (wsId: string) => Promise<void>;
+}
+
+export const ChangesViewer: React.FC<ChangesViewerProps> = ({
+  ws,
+  gitChanges,
+  gitChangesLoading,
+  syncLoading,
+  syncResults,
+  commitMessage,
+  showCommitModal,
+  commitLoading,
+  commitResults,
+  setSyncResults,
+  setCommitResults,
+  setCommitMessage,
+  setShowCommitModal,
+  fetchGitChanges,
+  handleSyncAll,
+  handleCommitAll,
+}) => {
+  return (
+    <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>
+  );
+};

package/gui/src/features/knowledge/KnowledgeBase.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import { BookOpen, RefreshCw, Save, Edit } from 'lucide-react';
+import type { Feature } from '../../types.js';
+
+interface KnowledgeBaseProps {
+  ws: Feature;
+  knowledgeContent: string;
+  knowledgeLoading: boolean;
+  isEditingKnowledge: boolean;
+  editedKnowledge: string;
+  saveKnowledgeLoading: boolean;
+  setEditedKnowledge: (val: string) => void;
+  setIsEditingKnowledge: (val: boolean) => void;
+  handleSaveKnowledge: (wsId: string) => Promise<void>;
+}
+
+export const KnowledgeBase: React.FC<KnowledgeBaseProps> = ({
+  ws,
+  knowledgeContent,
+  knowledgeLoading,
+  isEditingKnowledge,
+  editedKnowledge,
+  saveKnowledgeLoading,
+  setEditedKnowledge,
+  setIsEditingKnowledge,
+  handleSaveKnowledge,
+}) => {
+  return (
+    <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-650 hover:bg-indigo-600 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>
+  );
+};

package/gui/src/features/onboarding/OnboardingWizard.tsx

@@ -0,0 +1,230 @@
+import React from 'react';
+import { Sparkles, Settings as SettingsIcon, ArrowRight } from 'lucide-react';
+import type { NexusFlowConfig } from '../../types.js';
+
+interface OnboardingWizardProps {
+  config: NexusFlowConfig;
+  defaultPaths: { devDir: string; workspacesDir: string } | null;
+  setConfig: (cfg: NexusFlowConfig) => void;
+  saveAppConfig: (cfg: NexusFlowConfig) => Promise<void>;
+}
+
+export const OnboardingWizard: React.FC<OnboardingWizardProps> = ({
+  config,
+  defaultPaths,
+  setConfig,
+  saveAppConfig,
+}) => {
+  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]">
+      {/* 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">
+        
+        {/* 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">
+              <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">
+              Welcome to NexusFlow
+            </h1>
+            <p className="text-sm text-gray-400 mb-8 max-w-xl">
+              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">
+                  1
+                </div>
+                <div>
+                  <h3 className="text-sm font-semibold text-white">Configure Development Folders</h3>
+                  <p className="text-xs text-gray-400 mt-1">
+                    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">
+                  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">
+                    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">
+                  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">
+                    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">
+                  4
+                </div>
+                <div>
+                  <h3 className="text-sm font-semibold text-white">Orchestrate Background Services</h3>
+                  <p className="text-xs text-gray-400 mt-1">
+                    Run APIs, database scripts, and frontend watch tasks concurrently from the web portal. Monitor real-time logs inside a unified terminal pane.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </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="overflow-x-auto font-sans">
+              <table className="w-full text-[10px] text-gray-400 text-left border-collapse">
+                <thead>
+                  <tr className="border-b border-gray-800 text-gray-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>
+                    <th className="py-2 pl-4 font-semibold">Weight</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr className="border-b border-gray-800/40">
+                    <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">
+                    <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">
+                    <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>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+
+        {/* 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">
+            <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">
+              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>
+                <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\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>
+                )}
+              </div>
+
+              <div>
+                <label className="block text-[11px] font-semibold text-gray-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"
+                  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>
+                )}
+              </div>
+
+              {/* Form Buttons */}
+              <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"
+                  onClick={() => {
+                    if (defaultPaths) {
+                      setConfig({
+                        ...config,
+                        devDir: defaultPaths.devDir,
+                        workspacesDir: defaultPaths.workspacesDir,
+                      });
+                    }
+                  }}
+                >
+                  Suggest Defaults
+                </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"
+                  onClick={() => {
+                    setConfig({
+                      ...config,
+                      devDir: '',
+                      workspacesDir: '',
+                      version: config.version,
+                      defaultAssistant: config.defaultAssistant,
+                      scanDepth: config.scanDepth,
+                    });
+                  }}
+                >
+                  Clear
+                </button>
+              </div>
+
+              {/* Save Button */}
+              <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"
+                  disabled={!isFormValid}
+                  onClick={() => saveAppConfig(config)}
+                >
+                  Save & Get Started <ArrowRight size={16} />
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

package/gui/src/features/plan/ImplementationPlan.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { ListOrdered, RefreshCw } from 'lucide-react';
+
+interface ImplementationPlanProps {
+  planContent: string;
+  planLoading: boolean;
+}
+
+export const ImplementationPlan: React.FC<ImplementationPlanProps> = ({
+  planContent,
+  planLoading,
+}) => {
+  return (
+    <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>
+  );
+};