@mrpatronz/nexusflow 0.1.0 → 0.1.2

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

@@ -0,0 +1,159 @@
+import React from 'react';
+import { Play, Square, AlertTriangle } 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,
+}) => {
+  return (
+    <div>
+      {servicesLoading && (
+        <div className="flex items-center gap-2 text-[10px] text-gray-500 mb-3 animate-pulse">
+          <span className="w-1.5 h-1.5 rounded-full bg-indigo-500 animate-ping"></span>
+          <span>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-4 text-xs text-indigo-300">
+          <AlertTriangle size={16} className="text-indigo-400 shrink-0" />
+          <div>
+            <strong>Orchestration manifest detected:</strong> {orchTools.map((t) => t.tool).join(', ')}. You can start them inside sub-repos.
+          </div>
+        </div>
+      )}
+      {/* Telemetry Dashboard Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
+        {/* Telemetry 1: CPU */}
+        <div className="bg-gray-950/40 border border-gray-800/60 rounded-xl p-4 flex flex-col justify-between">
+          <div className="flex justify-between items-center text-xs font-semibold text-gray-400 mb-2">
+            <span>Simulated CPU Load</span>
+            <span className={runningServices.length > 0 ? "text-emerald-400" : "text-gray-500"}>
+              {runningServices.length > 0 ? '4.8%' : '0%'}
+            </span>
+          </div>
+          <div className="w-full bg-gray-800 rounded-full h-1.5 mb-2 overflow-hidden">
+            <div
+              className={`h-1.5 rounded-full transition-all duration-500 ${runningServices.length > 0 ? "bg-gradient-to-r from-emerald-500 to-teal-400 animate-pulse" : "bg-gray-700"}`}
+              style={{ width: runningServices.length > 0 ? '48%' : '0%' }}
+            ></div>
+          </div>
+          <span className="text-[10px] text-gray-500">Fluctuating active worker processes</span>
+        </div>
+
+        {/* Telemetry 2: Memory */}
+        <div className="bg-gray-950/40 border border-gray-800/60 rounded-xl p-4 flex flex-col justify-between">
+          <div className="flex justify-between items-center text-xs font-semibold text-gray-400 mb-2">
+            <span>Simulated Memory Allocation</span>
+            <span className={runningServices.length > 0 ? "text-cyan-400" : "text-gray-500"}>
+              {runningServices.length > 0 ? '192 MB' : '0 MB'}
+            </span>
+          </div>
+          <div className="w-full bg-gray-800 rounded-full h-1.5 mb-2 overflow-hidden">
+            <div
+              className={`h-1.5 rounded-full transition-all duration-500 ${runningServices.length > 0 ? "bg-gradient-to-r from-cyan-500 to-indigo-400" : "bg-gray-700"}`}
+              style={{ width: runningServices.length > 0 ? '65%' : '0%' }}
+            ></div>
+          </div>
+          <span className="text-[10px] text-gray-500">Working set size for spawned servers</span>
+        </div>
+
+        {/* Telemetry 3: Environment Health */}
+        <div className="bg-gray-950/40 border border-gray-800/60 rounded-xl p-4 flex flex-col justify-between">
+          <div className="flex justify-between items-center text-xs font-semibold text-gray-400 mb-2">
+            <span>Active Workspace Status</span>
+            <span className={`inline-flex items-center gap-1 text-[10px] uppercase font-bold tracking-wider ${runningServices.length > 0 ? "text-emerald-400" : "text-gray-500"}`}>
+              <span className={`w-1.5 h-1.5 rounded-full ${runningServices.length > 0 ? "bg-emerald-500 animate-ping" : "bg-gray-600"}`}></span>
+              {runningServices.length > 0 ? 'HEALTHY (ONLINE)' : 'STANDBY (OFFLINE)'}
+            </span>
+          </div>
+          <div className="text-xs text-white font-medium truncate">
+            {runningServices.length > 0 ? `${runningServices.length} processes active` : "All processes offline"}
+          </div>
+          <span className="text-[10px] text-gray-500">Service state mapping</span>
+        </div>
+      </div>
+
+      <div className="flex gap-2 mb-6">
+        <button
+          className="inline-flex items-center justify-center gap-1.5 px-4 py-2.5 bg-emerald-500 hover:bg-emerald-600 text-white rounded-lg text-xs font-semibold transition-all cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed shadow-md shadow-emerald-500/10 hover:-translate-y-0.5 active:translate-y-0"
+          onClick={() => handleStartServices(ws.branchName)}
+          disabled={runningServices.length > 0}
+        >
+          <Play size={14} /> Start All Services
+        </button>
+        <button
+          className="inline-flex items-center justify-center gap-1.5 px-4 py-2.5 bg-rose-600 hover:bg-rose-700 text-white rounded-lg text-xs font-semibold transition-all cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed shadow-md shadow-rose-600/10 hover:-translate-y-0.5 active:translate-y-0"
+          onClick={() => handleStopServices(ws.branchName)}
+          disabled={runningServices.length === 0}
+        >
+          <Square size={14} /> Stop All
+        </button>
+      </div>
+
+      {/* Interactive Console Screen */}
+      {services.length > 0 && (
+        <div className="border border-gray-800/80 rounded-xl overflow-hidden shadow-2xl bg-gray-950/60">
+          {/* Terminal Window Header */}
+          <div className="flex items-center justify-between bg-gray-900/80 px-4 py-3 border-b border-gray-800/60">
+            <div className="flex items-center gap-2">
+              <div className="flex gap-1.5">
+                <span className="w-3 h-3 rounded-full bg-rose-500/20 border border-rose-500/30"></span>
+                <span className="w-3 h-3 rounded-full bg-amber-500/20 border border-amber-500/30"></span>
+                <span className="w-3 h-3 rounded-full bg-emerald-500/20 border border-emerald-500/30"></span>
+              </div>
+              <span className="text-[11px] font-mono text-gray-400 font-semibold ml-2">nexusflow-terminal: {selectedLogService}</span>
+            </div>
+            <div className="flex gap-1 bg-gray-950/40 p-1 rounded-lg border border-gray-800/60">
+              {services.map((svc) => (
+                <button
+                  key={svc.name}
+                  className={`px-3 py-1 rounded-md text-[10px] font-mono font-bold transition-all cursor-pointer ${
+                    selectedLogService === svc.name
+                      ? 'bg-slate-800 text-white shadow-sm'
+                      : 'text-gray-500 hover:text-gray-300'
+                  }`}
+                  onClick={() => setSelectedLogService(svc.name)}
+                >
+                  {svc.name}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Terminal Screen Body */}
+          <div className="bg-[#030408] p-5 font-mono text-[11px] text-cyan-400/90 h-80 overflow-y-auto whitespace-pre-wrap shadow-inner relative scrollbar-thin scrollbar-thumb-gray-800">
+            <div className="absolute top-3 right-3 text-[9px] bg-slate-900/60 border border-gray-800 text-cyan-500/60 px-2 py-0.5 rounded font-mono select-none uppercase tracking-wider">
+              LIVE LOGS
+            </div>
+            {serviceLogs}
+            <div ref={logsEndRef}></div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

package/gui/src/features/sessions/SessionHistory.tsx

@@ -0,0 +1,195 @@
+import React from 'react';
+import { MessageSquareCode, RefreshCw, MessageSquare, Play, X, Copy } from 'lucide-react';
+import type { Feature } from '../../types.js';
+
+interface SessionHistoryProps {
+  ws: Feature;
+  sessions: any[];
+  sessionsLoading: boolean;
+  activeSession: any | null;
+  transcript: any[];
+  transcriptLoading: boolean;
+  workspaces: Feature[];
+  setActiveSession: (val: any | null) => void;
+  setTranscript: (val: any[]) => void;
+  fetchSessionTranscript: (assistant: string, sessionId: string) => Promise<void>;
+  handleResumeSession: (ws: Feature, sessionId?: string, assistant?: string) => Promise<void>;
+}
+
+export const SessionHistory: React.FC<SessionHistoryProps> = ({
+  ws,
+  sessions,
+  sessionsLoading,
+  activeSession,
+  transcript,
+  transcriptLoading,
+  workspaces,
+  setActiveSession,
+  setTranscript,
+  fetchSessionTranscript,
+  handleResumeSession,
+}) => {
+  return (
+    <div>
+      {sessionsLoading ? (
+        <div className="flex justify-center py-10">
+          <RefreshCw className="animate-spin text-indigo-400" size={20} />
+        </div>
+      ) : sessions.length === 0 ? (
+        <div className="text-center py-10 bg-gray-950/20 border border-gray-800/60 rounded-xl p-6">
+          <MessageSquareCode size={36} className="text-gray-650 mx-auto mb-3" />
+          <h4 className="text-sm font-bold text-gray-400 mb-1">No Past AI Sessions Found</h4>
+          <p className="text-xs text-gray-505 max-w-md mx-auto leading-relaxed">
+            Start a conversation with your AI assistant (e.g. running <code>claude</code>, <code>agy</code>, <code>codex</code>, or <code>copilot</code> inside this directory) to track session history here.
+          </p>
+        </div>
+      ) : (
+        <div className="space-y-3 mb-6">
+          {sessions.map((sess) => (
+            <div key={sess.id} className="flex flex-col md:flex-row md:items-center justify-between gap-4 bg-gray-950/20 border border-gray-800/60 rounded-xl p-4 hover:border-gray-700/80 transition-all">
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center gap-2.5 mb-1.5">
+                  <span className={`px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider ${
+                    sess.assistant === 'antigravity' ? 'bg-indigo-500/20 text-indigo-300 border border-indigo-500/30' :
+                    sess.assistant === 'claude' ? 'bg-amber-500/20 text-amber-300 border border-amber-500/30' :
+                    sess.assistant === 'codex' ? 'bg-emerald-500/20 text-emerald-300 border border-emerald-500/30' :
+                    'bg-sky-500/20 text-sky-300 border border-sky-500/30'
+                  }`}>
+                    {sess.assistant === 'antigravity' ? 'Antigravity' :
+                     sess.assistant === 'claude' ? 'Claude Code' :
+                     sess.assistant === 'codex' ? 'OpenAI Codex' : 'GitHub Copilot'}
+                  </span>
+                  <span className="text-[10px] text-gray-500">
+                    Updated: {new Date(sess.updatedAt).toLocaleString()}
+                  </span>
+                  <span className="text-[10px] text-gray-500">•</span>
+                  <span className="text-[10px] text-gray-550 font-medium">
+                    {sess.messageCount} messages
+                  </span>
+                </div>
+                <h4 className="text-xs font-semibold text-white truncate pr-4" title={sess.title}>
+                  {sess.title}
+                </h4>
+              </div>
+              <div className="flex items-center gap-2 shrink-0">
+                <button
+                  className="inline-flex items-center justify-center gap-1.5 px-3 py-1.5 bg-indigo-500/10 border border-indigo-500/20 hover:bg-indigo-500/20 text-indigo-300 rounded-lg text-xs font-bold transition-all cursor-pointer"
+                  onClick={() => {
+                    setActiveSession(sess);
+                    setTranscript([]);
+                    fetchSessionTranscript(sess.assistant, sess.id);
+                  }}
+                >
+                  <MessageSquare size={13} /> View Chat Log
+                </button>
+                <button
+                  className="inline-flex items-center justify-center gap-1.5 px-3 py-1.5 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg text-xs font-bold transition-all cursor-pointer"
+                  onClick={() => handleResumeSession(ws, sess.id, sess.assistant)}
+                >
+                  <Play size={11} /> Resume
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Transcript Modal Overlay */}
+      {activeSession && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/75 backdrop-blur-sm p-4">
+          <div className="bg-[#0b0f19] border border-gray-800 rounded-2xl w-full max-w-4xl h-[80vh] flex flex-col shadow-2xl overflow-hidden">
+            {/* Modal Header */}
+            <div className="flex items-center justify-between px-6 py-4 border-b border-gray-800 bg-gray-950/40">
+              <div>
+                <div className="flex items-center gap-2 mb-1">
+                  <span className={`px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider ${
+                    activeSession.assistant === 'antigravity' ? 'bg-indigo-500/20 text-indigo-300 border border-indigo-500/30' :
+                    activeSession.assistant === 'claude' ? 'bg-amber-500/20 text-amber-300 border border-amber-500/30' :
+                    activeSession.assistant === 'codex' ? 'bg-emerald-500/20 text-emerald-300 border border-emerald-500/30' :
+                    'bg-sky-500/20 text-sky-300 border border-sky-500/30'
+                  }`}>
+                    {activeSession.assistant === 'antigravity' ? 'Antigravity' :
+                     activeSession.assistant === 'claude' ? 'Claude Code' :
+                     activeSession.assistant === 'codex' ? 'OpenAI Codex' : 'GitHub Copilot'}
+                  </span>
+                  <span className="text-[10px] text-gray-500">Session: {activeSession.id}</span>
+                </div>
+                <h3 className="text-sm font-bold text-white truncate max-w-xl" title={activeSession.title}>
+                  {activeSession.title}
+                </h3>
+              </div>
+              <button
+                className="text-gray-400 hover:text-white p-2 hover:bg-gray-800/80 rounded-lg transition-colors cursor-pointer"
+                onClick={() => setActiveSession(null)}
+              >
+                <X size={18} />
+              </button>
+            </div>
+
+            {/* Modal Body / Chat Messages */}
+            <div className="flex-1 overflow-y-auto p-6 space-y-4 bg-gray-950/10">
+              {transcriptLoading ? (
+                <div className="flex flex-col items-center justify-center h-full gap-2">
+                  <RefreshCw className="animate-spin text-indigo-400" size={24} />
+                  <span className="text-xs text-gray-505 font-medium">Loading conversation history...</span>
+                </div>
+              ) : transcript.length === 0 ? (
+                <div className="flex items-center justify-center h-full text-xs text-gray-505">
+                  No messages found in this transcript.
+                </div>
+              ) : (
+                transcript.map((msg, idx) => (
+                  <div key={idx} className={`flex flex-col ${msg.role === 'user' ? 'items-end' : 'items-start'}`}>
+                    <div className="text-[10px] text-gray-500 mb-1 px-1">
+                      {msg.role === 'user' ? 'Developer' : activeSession.assistant === 'antigravity' ? 'Antigravity' : activeSession.assistant === 'claude' ? 'Claude' : activeSession.assistant === 'codex' ? 'Codex' : 'Copilot'}
+                      {msg.timestamp && ` • ${new Date(msg.timestamp).toLocaleTimeString()}`}
+                    </div>
+                    <div className={`max-w-[85%] rounded-2xl px-4 py-3 text-xs leading-relaxed whitespace-pre-wrap ${
+                      msg.role === 'user'
+                        ? 'bg-indigo-650 text-white rounded-tr-none shadow-md border border-indigo-500/10'
+                        : 'bg-gray-900 border border-gray-800 text-gray-200 rounded-tl-none shadow-sm font-sans'
+                    }`}>
+                      {msg.content}
+                    </div>
+                  </div>
+                ))
+              )}
+            </div>
+
+            {/* Modal Footer */}
+            <div className="px-6 py-4 border-t border-gray-800 bg-gray-950/40 flex justify-between items-center">
+              <span className="text-[11px] text-gray-550">
+                Resuming will copy the shell command and open your code editor.
+              </span>
+              <div className="flex gap-2">
+                <button
+                  className="inline-flex items-center justify-center gap-1.5 px-4 py-2 bg-gray-900 border border-gray-800 hover:bg-gray-800 rounded-lg text-xs font-bold text-white transition-all cursor-pointer"
+                  onClick={() => {
+                    const cmd = activeSession.assistant === 'antigravity' ? `agy --conversation ${activeSession.id}` :
+                                activeSession.assistant === 'claude' ? `claude --resume ${activeSession.id}` :
+                                activeSession.assistant === 'codex' ? `codex resume ${activeSession.id}` :
+                                `copilot --resume ${activeSession.id}`;
+                    navigator.clipboard.writeText(cmd);
+                    alert(`Copied run command to clipboard:\n\n${cmd}`);
+                  }}
+                >
+                  <Copy size={13} /> Copy Resume Command
+                </button>
+                <button
+                  className="inline-flex items-center justify-center gap-1.5 px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg text-xs font-bold transition-all cursor-pointer"
+                  onClick={() => {
+                    const matchedWs = workspaces.find(w => w.branchName === activeSession.workspacePath.split(/[\\/]/).pop());
+                    handleResumeSession(matchedWs || workspaces[0], activeSession.id, activeSession.assistant);
+                    setActiveSession(null);
+                  }}
+                >
+                  <Play size={12} /> Resume Conversation
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};