@meshxdata/fops 0.1.46 → 0.1.48

package/src/web/frontend/src/hooks/useWebSocket.js

@@ -1,412 +0,0 @@
-import { useState, useEffect, useCallback, useRef } from "react";
-
-/**
- * WebSocket hook for real-time FopsCore events.
- */
-export function useWebSocket() {
-  const [connected, setConnected] = useState(false);
-  const [sessions, setSessions] = useState([]);
-  const [activeSession, setActiveSession] = useState(null);
-  const [agents, setAgents] = useState([]);
-  const [messages, setMessages] = useState([]);
-  const [streamingText, setStreamingText] = useState("");
-  const [thinkingText, setThinkingText] = useState("");
-  const [statusText, setStatusText] = useState("");
-  const [toolCalls, setToolCalls] = useState([]);
-  const [pendingConfirm, setPendingConfirm] = useState(null);
-  const [isStreaming, setIsStreaming] = useState(false);
-  const [services, setServices] = useState([]);
-  const [foundationStats, setFoundationStats] = useState(null);
-  const [updateAvailable, setUpdateAvailable] = useState(null);
-  const wsRef = useRef(null);
-  const lastStreamEventRef = useRef(0);
-
-  const connect = useCallback(() => {
-    const proto = window.location.protocol === "https:" ? "wss:" : "ws:";
-    const ws = new WebSocket(`${proto}//${window.location.host}/ws`);
-
-    ws.onopen = () => setConnected(true);
-    ws.onclose = () => {
-      setConnected(false);
-      setTimeout(connect, 2000);
-    };
-
-    ws.onmessage = (e) => {
-      const msg = JSON.parse(e.data);
-
-      switch (msg.type) {
-        case "init": {
-          const incoming = msg.sessions || [];
-          setSessions((prev) => (incoming.length >= prev.length ? incoming : prev));
-          setActiveSession(msg.activeSession);
-          setAgents(msg.agents || []);
-          if (msg.services) setServices(msg.services);
-          if (msg.foundationStats) setFoundationStats(msg.foundationStats);
-          if (msg.updateAvailable) setUpdateAvailable(msg.updateAvailable);
-          // Load messages for active session
-          if (msg.activeSession) {
-            fetch(`/api/sessions/${msg.activeSession}`)
-              .then((r) => r.json())
-              .then((data) => setMessages(data.messages || []));
-          }
-          break;
-        }
-
-        case "session:created":
-          setSessions((prev) =>
-            prev.some((s) => s.id === msg.sessionId)
-              ? prev
-              : [...prev, { id: msg.sessionId, agent: msg.agentName, status: "idle" }]
-          );
-          break;
-
-        case "session:switched":
-          setActiveSession(msg.sessionId);
-          setStreamingText("");
-          setThinkingText("");
-          setToolCalls([]);
-          fetch(`/api/sessions/${msg.sessionId}`)
-            .then((r) => r.json())
-            .then((data) => setMessages(data.messages || []));
-          break;
-
-        case "session:closed":
-          setSessions((prev) => prev.filter((s) => s.id !== msg.sessionId));
-          break;
-
-        case "stream:start":
-          lastStreamEventRef.current = Date.now();
-          setIsStreaming(true);
-          setStreamingText("");
-          setThinkingText("");
-          setStatusText("Thinking");
-          setToolCalls([]);
-          break;
-
-        case "stream:chunk":
-          lastStreamEventRef.current = Date.now();
-          setStreamingText(msg.text);
-          setStatusText("Responding");
-          break;
-
-        case "stream:thinking":
-          lastStreamEventRef.current = Date.now();
-          setThinkingText((prev) => prev + msg.text);
-          setStatusText("Reasoning");
-          break;
-
-        case "stream:status":
-          lastStreamEventRef.current = Date.now();
-          setStatusText(msg.status);
-          break;
-
-        case "stream:end":
-          lastStreamEventRef.current = 0;
-          setIsStreaming(false);
-          setStreamingText("");
-          setThinkingText("");
-          setStatusText("");
-          // Refresh messages
-          if (msg.sessionId) {
-            fetch(`/api/sessions/${msg.sessionId}`)
-              .then((r) => r.json())
-              .then((data) => setMessages(data.messages || []));
-          }
-          break;
-
-        case "tool:start":
-          lastStreamEventRef.current = Date.now();
-          setToolCalls((prev) => [...prev, { name: msg.name, status: "running" }]);
-          setStatusText(`Using ${msg.name}`);
-          break;
-
-        case "tool:result":
-          lastStreamEventRef.current = Date.now();
-          setToolCalls((prev) =>
-            prev.map((tc) =>
-              tc.name === msg.name && tc.status === "running"
-                ? { ...tc, status: msg.ok ? "done" : "error" }
-                : tc
-            )
-          );
-          break;
-
-        case "tool:confirm":
-          setPendingConfirm({ name: msg.name, input: msg.input });
-          break;
-
-        case "stack:status":
-          if (msg.services) setServices(msg.services);
-          if (msg.foundationStats) setFoundationStats(msg.foundationStats);
-          break;
-
-        case "ollama:log":
-          setMessages((prev) => {
-            const last = prev[prev.length - 1];
-            if (last?.role === "assistant" && last.content.startsWith("### Ollama Setup")) {
-              return [...prev.slice(0, -1), { role: "assistant", content: last.content + `\n${msg.line}` }];
-            }
-            return prev;
-          });
-          break;
-
-        case "ollama:done": {
-          const result = msg.result || {};
-          const lines = ["### Ollama Setup Complete\n"];
-          for (const s of (result.steps || [])) {
-            const icon = s.status === "ok" ? "\u2713" : s.status === "error" ? "\u2717" : s.status === "warn" ? "\u26A0" : "\u25CF";
-            lines.push(`- ${icon} **${s.step}** \u2014 ${s.detail}`);
-          }
-          if (result.ok && result.model) {
-            lines.push(`\n**Ready!** Use \`/local\` to switch to Ollama mode with \`${result.model}\``);
-            lines.push(`Or set \`OLLAMA_MODEL=${result.model}\` in your environment.`);
-          } else if (!result.ok) {
-            lines.push("\n**Setup had errors.** Check the issues above.");
-          }
-          setMessages((prev) => {
-            const filtered = prev.filter((m) => !(m.role === "assistant" && m.content.startsWith("### Ollama Setup\nDetecting")));
-            return [...filtered, { role: "assistant", content: lines.join("\n") }];
-          });
-          break;
-        }
-
-        case "stack:log":
-          setMessages((prev) => {
-            const last = prev[prev.length - 1];
-            if (last?.role === "assistant" && (last.content.startsWith("### Starting") || last.content.startsWith("### Stopping"))) {
-              const lines = last.content.split("\n");
-              if (lines.length > 20) lines.splice(1, lines.length - 20);
-              return [...prev.slice(0, -1), { role: "assistant", content: lines.join("\n") + `\n${msg.line}` }];
-            }
-            return prev;
-          });
-          break;
-
-        case "stack:done": {
-          const label = msg.action === "up" ? "started" : "stopped";
-          const summary = msg.ok
-            ? `\n\n**Stack ${label}.**`
-            : `\n\n**Stack ${msg.action} failed.** ${msg.error || `(exit code ${msg.exitCode ?? "unknown"})`}`;
-          setMessages((prev) => {
-            const last = prev[prev.length - 1];
-            if (last?.role === "assistant" && (last.content.startsWith("### Starting") || last.content.startsWith("### Stopping"))) {
-              return [...prev.slice(0, -1), { role: "assistant", content: last.content + summary }];
-            }
-            return [...prev, { role: "assistant", content: `### Stack${summary}` }];
-          });
-          break;
-        }
-
-        case "bootstrap:log":
-          setMessages((prev) => {
-            const last = prev[prev.length - 1];
-            if (last?.role === "assistant" && last.content.startsWith("### Bootstrap")) {
-              const lines = last.content.split("\n");
-              if (lines.length > 20) lines.splice(1, lines.length - 20);
-              return [...prev.slice(0, -1), { role: "assistant", content: lines.join("\n") + `\n${msg.line}` }];
-            }
-            return prev;
-          });
-          break;
-
-        case "bootstrap:done": {
-          const summary = msg.ok
-            ? "\n\n**Bootstrap complete.**"
-            : `\n\n**Bootstrap failed.** ${msg.error || `(exit code ${msg.exitCode ?? "unknown"})`}`;
-          setMessages((prev) => {
-            const last = prev[prev.length - 1];
-            if (last?.role === "assistant" && last.content.startsWith("### Bootstrap")) {
-              return [...prev.slice(0, -1), { role: "assistant", content: last.content + summary }];
-            }
-            return [...prev, { role: "assistant", content: `### Bootstrap${summary}` }];
-          });
-          break;
-        }
-
-        case "train:log":
-          setMessages((prev) => {
-            const last = prev[prev.length - 1];
-            if (last?.role === "assistant" && last.content.startsWith("### Embedding Training")) {
-              const lines = last.content.split("\n");
-              if (lines.length > 20) lines.splice(1, lines.length - 20);
-              return [...prev.slice(0, -1), { role: "assistant", content: lines.join("\n") + `\n${msg.line}` }];
-            }
-            return prev;
-          });
-          break;
-
-        case "train:done": {
-          const result = msg.result || {};
-          const lines = [result.ok ? "### Embedding Training Complete\n" : "### Embedding Training Failed\n"];
-          for (const s of (result.steps || [])) {
-            const icon = s.status === "ok" ? "\u2713" : s.status === "error" ? "\u2717" : s.status === "warn" ? "\u26A0" : "\u25CF";
-            lines.push(`- ${icon} **${s.step}** \u2014 ${s.detail}`);
-          }
-          if (!result.ok) {
-            lines.push("\n**Training had errors.** Check the issues above.");
-          }
-          setMessages((prev) => {
-            const filtered = prev.filter((m) => !(m.role === "assistant" && m.content.startsWith("### Embedding Training\n")));
-            return [...filtered, { role: "assistant", content: lines.join("\n") }];
-          });
-          break;
-        }
-
-        case "error":
-          lastStreamEventRef.current = 0;
-          setIsStreaming(false);
-          setStatusText("");
-          setStreamingText("");
-          setThinkingText("");
-          if (msg.message) {
-            setMessages((prev) => [...prev, { role: "assistant", content: `**Error:** ${msg.message}` }]);
-          }
-          break;
-      }
-    };
-
-    wsRef.current = ws;
-  }, []);
-
-  useEffect(() => {
-    connect();
-    return () => wsRef.current?.close();
-  }, [connect]);
-
-  // Poll services + foundation stats every 30s via REST API
-  useEffect(() => {
-    const poll = () => {
-      fetch("/api/status")
-        .then((r) => r.json())
-        .then((data) => {
-          if (data.services) setServices(data.services);
-          if (data.foundationStats) setFoundationStats(data.foundationStats);
-          if (data.updateAvailable) setUpdateAvailable(data.updateAvailable);
-        })
-        .catch(() => {});
-    };
-    poll();
-    const interval = setInterval(poll, 30000);
-    return () => clearInterval(interval);
-  }, []);
-
-  // Stale-streaming failsafe: if isStreaming but no events for 90s, auto-reset
-  useEffect(() => {
-    const interval = setInterval(() => {
-      if (lastStreamEventRef.current > 0) {
-        const elapsed = Date.now() - lastStreamEventRef.current;
-        if (elapsed > 90_000) {
-          lastStreamEventRef.current = 0;
-          setIsStreaming(false);
-          setStreamingText("");
-          setThinkingText("");
-          setStatusText("");
-        }
-      }
-    }, 5000);
-    return () => clearInterval(interval);
-  }, []);
-
-  const send = useCallback((type, data = {}) => {
-    if (wsRef.current?.readyState === WebSocket.OPEN) {
-      wsRef.current.send(JSON.stringify({ type, ...data }));
-    }
-  }, []);
-
-  const sendMessage = useCallback((text) => {
-    if (activeSession) {
-      setMessages((prev) => [...prev, { role: "user", content: text }]);
-      send("send", { sessionId: activeSession, text });
-    }
-  }, [activeSession, send]);
-
-  const createSession = useCallback((agentName) => {
-    send("create_session", { agentName });
-  }, [send]);
-
-  const switchSession = useCallback((sessionId) => {
-    send("switch", { sessionId });
-  }, [send]);
-
-  const closeSession = useCallback((sessionId) => {
-    send("close_session", { sessionId });
-  }, [send]);
-
-  const cancelStream = useCallback(() => {
-    if (activeSession) {
-      send("cancel", { sessionId: activeSession });
-    }
-    // Always reset input-blocking state so the user can type again
-    lastStreamEventRef.current = 0;
-    setIsStreaming(false);
-    setStreamingText("");
-    setThinkingText("");
-    setStatusText("");
-  }, [activeSession, send]);
-
-  const sendOllamaSetup = useCallback(() => {
-    send("ollama_setup");
-  }, [send]);
-
-  const sendStackUp = useCallback(() => {
-    send("stack_up");
-  }, [send]);
-
-  const sendStackDown = useCallback(() => {
-    send("stack_down");
-  }, [send]);
-
-  const sendBootstrap = useCallback(() => {
-    send("bootstrap");
-  }, [send]);
-
-  const sendTrain = useCallback(() => {
-    send("train");
-  }, [send]);
-
-  const sendLearningEvent = useCallback((eventType, payload = {}, sessionId = null) => {
-    if (!eventType) return;
-    send("learning_event", { eventType, payload, sessionId });
-  }, [send]);
-
-  const respondConfirm = useCallback((action) => {
-    send("tool_confirm_response", { action });
-    setPendingConfirm(null);
-  }, [send]);
-
-  const appendMessage = useCallback((sessionId, role, content) => {
-    if (!sessionId || typeof content !== "string" || !content.trim()) return;
-    send("append_message", { sessionId, role, content });
-  }, [send]);
-
-  return {
-    connected,
-    sessions,
-    activeSession,
-    agents,
-    messages,
-    setMessages,
-    streamingText,
-    thinkingText,
-    statusText,
-    toolCalls,
-    isStreaming,
-    services,
-    foundationStats,
-    updateAvailable,
-    pendingConfirm,
-    respondConfirm,
-    sendMessage,
-    sendOllamaSetup,
-    sendStackUp,
-    sendStackDown,
-    sendBootstrap,
-    sendTrain,
-    sendLearningEvent,
-    appendMessage,
-    createSession,
-    switchSession,
-    closeSession,
-    cancelStream,
-  };
-}

package/src/web/frontend/src/index.css

@@ -1,78 +0,0 @@
-@import "tailwindcss";
-
-/* ===== Base ===== */
-body {
-  margin: 0;
-  padding: 0;
-  font-family: "Sora", system-ui, -apple-system, sans-serif;
-  background: #08080c;
-  color: #e0dfe4;
-  height: 100vh;
-  height: 100dvh;
-  overflow: hidden;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-#root {
-  height: 100vh;
-  height: 100dvh;
-  display: flex;
-  flex-direction: column;
-}
-
-code, pre, .font-mono {
-  font-family: "IBM Plex Mono", "JetBrains Mono", "Fira Code", monospace;
-}
-
-::selection {
-  background: rgba(249, 115, 22, 0.3);
-  color: #e0dfe4;
-}
-
-/* ===== Scrollbar ===== */
-::-webkit-scrollbar { width: 5px; }
-::-webkit-scrollbar-track { background: transparent; }
-::-webkit-scrollbar-thumb { background: #26263a; border-radius: 10px; }
-::-webkit-scrollbar-thumb:hover { background: #3f3f56; }
-
-/* ===== Animations ===== */
-@keyframes pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.35; }
-}
-.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
-
-@keyframes fadeIn {
-  from { opacity: 0; transform: translateY(6px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-.animate-fade-in { animation: fadeIn 0.25s ease-out; }
-
-@keyframes slideIn {
-  from { opacity: 0; transform: translateX(-6px); }
-  to { opacity: 1; transform: translateX(0); }
-}
-.animate-slide-in { animation: slideIn 0.2s ease-out; }
-
-@keyframes cursorBlink {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0; }
-}
-.animate-cursor { animation: cursorBlink 1s step-end infinite; }
-
-@keyframes glowPulse {
-  0%, 100% { box-shadow: 0 0 8px rgba(249, 115, 22, 0.15); }
-  50% { box-shadow: 0 0 16px rgba(249, 115, 22, 0.3); }
-}
-
-/* ===== Noise Overlay ===== */
-.noise::after {
-  content: '';
-  position: fixed;
-  inset: 0;
-  pointer-events: none;
-  opacity: 0.02;
-  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
-  z-index: 9999;
-}

package/src/web/frontend/src/main.jsx

@@ -1,6 +0,0 @@
-import React from "react";
-import { createRoot } from "react-dom/client";
-import App from "./App.jsx";
-import "./index.css";
-
-createRoot(document.getElementById("root")).render(<App />);

package/src/web/frontend/vite.config.js

@@ -1,21 +0,0 @@
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
-import tailwindcss from "@tailwindcss/vite";
-
-export default defineConfig({
-  plugins: [react(), tailwindcss()],
-  root: "src/web/frontend",
-  build: {
-    outDir: "../dist",
-    emptyOutDir: true,
-  },
-  server: {
-    proxy: {
-      "/api": "http://localhost:3099",
-      "/ws": {
-        target: "ws://localhost:3099",
-        ws: true,
-      },
-    },
-  },
-});