@mrpatronz/nexusflow 0.2.19 → 1.3.0

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

@@ -1,230 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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>
-  );
-};

package/gui/src/features/services/ServiceConsole.tsx

@@ -1,215 +0,0 @@
-import React from 'react';
-import { Play, Square, AlertTriangle, Terminal, Maximize2, Minimize2, Trash2, RefreshCw } from 'lucide-react';
-import type { Feature, ServiceConfig, RunningService, OrchestrationDetection } from '../../types.js';
-
-interface ServiceConsoleProps {
-  ws: Feature;
-  services: ServiceConfig[];
-  runningServices: RunningService[];
-  selectedLogService: string | null;
-  serviceLogs: string;
-  logsEndRef: React.RefObject<HTMLDivElement | null>;
-  setSelectedLogService: (val: string | null) => void;
-  handleStartServices: (wsId: string) => Promise<void>;
-  handleStopServices: (wsId: string) => Promise<void>;
-  orchTools: OrchestrationDetection[];
-  servicesLoading: boolean;
-}
-
-export const ServiceConsole: React.FC<ServiceConsoleProps> = ({
-  ws,
-  services,
-  runningServices,
-  selectedLogService,
-  serviceLogs,
-  logsEndRef,
-  setSelectedLogService,
-  handleStartServices,
-  handleStopServices,
-  orchTools,
-  servicesLoading,
-}) => {
-  const [termTheme, setTermTheme] = React.useState<'classic' | 'matrix' | 'dracula'>('classic');
-  const [isExpanded, setIsExpanded] = React.useState(false);
-  const [clearedLogsLength, setClearedLogsLength] = React.useState<Record<string, number>>({});
-
-  const handleClearLogs = () => {
-    if (selectedLogService) {
-      setClearedLogsLength((prev) => ({ ...prev, [selectedLogService]: serviceLogs.length }));
-    }
-  };
-
-  const isCleared = selectedLogService ? (clearedLogsLength[selectedLogService] === serviceLogs.length) : false;
-  const activeLogs = selectedLogService && isCleared ? '' : serviceLogs;
-
-  const getThemeClass = () => {
-    switch (termTheme) {
-      case 'matrix': return 'term-matrix';
-      case 'dracula': return 'term-dracula';
-      default: return 'term-classic';
-    }
-  };
-
-  const getStatusColor = (name: string) => {
-    const isRunning = runningServices.some((rs) => rs.name === name && rs.pid > 0);
-    return isRunning ? 'bg-emerald-500 animate-pulse-glow-green' : 'bg-rose-500';
-  };
-
-  const isAnyRunning = runningServices.some((rs) => rs.pid > 0);
-
-  return (
-    <div className="animate-fade-in">
-      {servicesLoading && (
-        <div className="flex items-center gap-2 text-[10px] text-indigo-400 mb-4 animate-pulse">
-          <RefreshCw className="animate-spin" size={12} />
-          <span className="font-semibold tracking-wider uppercase">Scanning service configurations...</span>
-        </div>
-      )}
-      {orchTools && orchTools.length > 0 && (
-        <div className="flex items-center gap-3 bg-indigo-500/5 border border-indigo-500/20 rounded-xl p-4 mb-5 text-xs text-indigo-300">
-          <AlertTriangle size={16} className="text-indigo-400 shrink-0 animate-bounce" />
-          <div>
-            <strong>Orchestration manifest detected:</strong> {orchTools.map((t) => t.tool).join(', ')}. You can start them inside sub-repos.
-          </div>
-        </div>
-      )}
-
-      {/* Workspace service status (real running-process state) */}
-      <div className="mb-6">
-        <div className="glass-card p-5 rounded-2xl border border-slate-800/40 relative overflow-hidden transition-all duration-300 before:absolute before:inset-x-0 before:top-0 before:h-[1px] before:bg-gradient-to-r before:from-indigo-500/10 via-purple-500/10 to-transparent">
-          <div className="flex justify-between items-center text-xs font-semibold text-slate-400 mb-3">
-            <span>Workspace Status</span>
-            <span className={`inline-flex items-center gap-1.5 text-[9px] uppercase font-bold tracking-wider px-2 py-0.5 rounded-full border ${isAnyRunning ? "text-emerald-400 bg-emerald-500/10 border-emerald-500/20" : "text-slate-500 bg-slate-950/40 border-slate-900"}`}>
-              <span className={`w-1.5 h-1.5 rounded-full ${isAnyRunning ? "bg-emerald-400 animate-ping" : "bg-slate-600"}`}></span>
-              {isAnyRunning ? 'Active' : 'Standby'}
-            </span>
-          </div>
-          <div className="text-xs text-white font-semibold mb-2">
-            {isAnyRunning ? `${runningServices.filter(rs => rs.pid > 0).length} processes active` : "All processes offline"}
-          </div>
-          <span className="text-[10px] text-slate-550">Live service state for this workspace</span>
-        </div>
-      </div>
-
-      {/* Action Controls */}
-      <div className="flex gap-3 mb-6">
-        <button
-          className="inline-flex items-center justify-center gap-2 px-5 py-3 bg-emerald-650 hover:bg-emerald-600 text-white rounded-xl text-xs font-bold transition-all cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed shadow-md shadow-emerald-500/10 hover:-translate-y-0.5 active:translate-y-0"
-          onClick={() => handleStartServices(ws.branchName)}
-          disabled={isAnyRunning}
-        >
-          <Play size={14} /> Start All Services
-        </button>
-        <button
-          className="inline-flex items-center justify-center gap-2 px-5 py-3 bg-rose-950/40 border border-rose-900/60 hover:bg-rose-900/60 hover:border-rose-800 text-red-200 rounded-xl text-xs font-bold transition-all cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed hover:-translate-y-0.5 active:translate-y-0"
-          onClick={() => handleStopServices(ws.branchName)}
-          disabled={!isAnyRunning}
-        >
-          <Square size={14} /> Stop All
-        </button>
-      </div>
-
-      {/* Split-Pane DevOps Console */}
-      {services.length > 0 && (
-        <div className="grid grid-cols-1 lg:grid-cols-12 border border-slate-900 rounded-2xl overflow-hidden shadow-2xl bg-slate-950/40 backdrop-blur-md">
-          
-          {/* Left Pane: Services List (4 cols) */}
-          <div className="lg:col-span-4 border-b lg:border-b-0 lg:border-r border-slate-900 p-5 bg-slate-950/60">
-            <h4 className="text-[10px] text-slate-450 uppercase font-bold tracking-wider mb-4 flex items-center gap-1.5 border-b border-slate-900 pb-2">
-              <Terminal size={12} className="text-indigo-400" /> Background Services
-            </h4>
-            <div className="flex flex-col gap-2 max-h-[400px] overflow-y-auto pr-1">
-              {services.map((svc) => {
-                const isSelected = selectedLogService === svc.name;
-                return (
-                  <div
-                    key={svc.name}
-                    className={`flex flex-col p-3 rounded-xl border cursor-pointer transition-all ${
-                      isSelected
-                        ? 'bg-indigo-500/10 border-indigo-500/40 text-white shadow-[0_0_15px_rgba(99,102,241,0.05)]'
-                        : 'bg-slate-950/30 border-slate-900 hover:border-slate-800 text-slate-400 hover:text-slate-200'
-                    }`}
-                    onClick={() => setSelectedLogService(svc.name)}
-                  >
-                    <div className="flex items-center justify-between gap-2">
-                      <div className="flex items-center gap-2 truncate">
-                        <span className={`h-2 w-2 rounded-full ${getStatusColor(svc.name)}`}></span>
-                        <span className="font-bold text-xs truncate">{svc.name}</span>
-                      </div>
-                      {svc.port && (
-                        <span className="text-[9px] font-mono px-2 py-0.5 bg-slate-900 border border-slate-850 rounded text-slate-400">
-                          Port: {svc.port}
-                        </span>
-                      )}
-                    </div>
-                    <code className="text-[9px] font-mono text-slate-500 mt-2 truncate bg-slate-950/50 p-1.5 rounded border border-slate-900/60 block">
-                      {svc.command} {svc.args.join(' ')}
-                    </code>
-                  </div>
-                );
-              })}
-            </div>
-          </div>
-
-          {/* Right Pane: Logs Console (8 cols) */}
-          <div className="lg:col-span-8 flex flex-col min-w-0 bg-[#03050a]">
-            {/* Console Header */}
-            <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between bg-slate-950/80 px-5 py-3 border-b border-slate-900 gap-3">
-              <div className="flex items-center gap-2">
-                <span className="font-mono text-xs font-bold text-indigo-400 text-glow-indigo">{selectedLogService || 'no-service'}</span>
-                <span className="text-slate-700">|</span>
-                <span className="text-[9px] font-mono bg-indigo-500/10 text-indigo-300 border border-indigo-500/20 px-2 py-0.5 rounded uppercase font-semibold">stdout_stream</span>
-              </div>
-              
-              <div className="flex items-center gap-3 self-end sm:self-auto">
-                {/* Theme Toggle */}
-                <div className="flex bg-slate-900 border border-slate-850 p-0.5 rounded-lg text-[9px] font-semibold text-slate-400">
-                  {(['classic', 'matrix', 'dracula'] as const).map((t) => (
-                    <button
-                      key={t}
-                      className={`px-2 py-1 rounded-md capitalize cursor-pointer transition-all ${termTheme === t ? 'bg-slate-800 text-white font-bold' : 'hover:text-white'}`}
-                      onClick={() => setTermTheme(t)}
-                    >
-                      {t}
-                    </button>
-                  ))}
-                </div>
-
-                {/* Operations */}
-                <div className="flex gap-1.5">
-                  <button
-                    onClick={handleClearLogs}
-                    className="p-1.5 bg-slate-900 border border-slate-850 text-slate-400 hover:text-white rounded-lg transition-all cursor-pointer"
-                    title="Clear Console"
-                  >
-                    <Trash2 size={13} />
-                  </button>
-                  <button
-                    onClick={() => setIsExpanded(!isExpanded)}
-                    className="p-1.5 bg-slate-900 border border-slate-850 text-slate-400 hover:text-white rounded-lg transition-all cursor-pointer"
-                    title={isExpanded ? "Minimize Console" : "Expand Console"}
-                  >
-                    {isExpanded ? <Minimize2 size={13} /> : <Maximize2 size={13} />}
-                  </button>
-                </div>
-              </div>
-            </div>
-
-            {/* Terminal Body */}
-            <div className={`p-5 font-mono text-[10.5px] leading-relaxed overflow-y-auto whitespace-pre-wrap select-text selection:bg-indigo-500/30 transition-all duration-300 relative ${getThemeClass()} ${isExpanded ? 'h-[520px]' : 'h-80'}`}>
-              <div className="absolute top-4 right-5 text-[8px] bg-slate-900/60 border border-white/5 text-slate-400/50 px-2.5 py-0.5 rounded-md font-mono select-none uppercase tracking-widest font-bold">
-                LIVE LOGGER
-              </div>
-              {activeLogs.trim() ? (
-                activeLogs
-              ) : (
-                <span className="text-slate-650 italic font-mono">(no log content recorded)</span>
-              )}
-              <div ref={logsEndRef}></div>
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};