@meshxdata/fops 0.1.47 → 0.1.49

package/src/web/frontend/src/App.jsx

@@ -1,445 +0,0 @@
-import React, { useState, useEffect, useCallback, useMemo, useRef } from "react";
-import { useWebSocket } from "./hooks/useWebSocket.js";
-import TabBar from "./components/TabBar.jsx";
-import ChatView from "./components/ChatView.jsx";
-import InputBox from "./components/InputBox.jsx";
-import StatusBar from "./components/StatusBar.jsx";
-import Sidebar from "./components/Sidebar.jsx";
-
-function buildSmartPlan(goal, contextLines = [], foundationStats = null) {
-  const g = String(goal || "").toLowerCase();
-  const includesAny = (...terms) => terms.some((t) => g.includes(t));
-
-  let steps = [];
-  let checks = [];
-
-  if (includesAny("cargo", "landscape", "mesh", "graph", "catalog")) {
-    steps = [
-      "Lock scope to the target domain/entity names (for example, `cargo` mesh/products).",
-      "Inspect current landscape and health to find concrete broken nodes before changing anything.",
-      "Open failing products/objects and capture exact failure causes from status + compute logs.",
-      "Apply minimal targeted fixes only to impacted entities, then re-run compute.",
-      "Confirm recovery with fresh status and sample data checks.",
-    ];
-    checks = [
-      "Search and enumerate entities first (`foundation_search`, mesh/product lists).",
-      "Validate landscape + product state (`landscape`, `data_product get`, compute status).",
-      "Verify success criteria: no FAILED nodes and expected sample rows return.",
-    ];
-  } else if (includesAny("fix", "bug", "regression", "error", "failing", "test")) {
-    steps = [
-      "Reproduce the issue and pin down exact failing behavior.",
-      "Trace root cause in the smallest relevant code/config surface.",
-      "Implement the minimal safe fix with clear reasoning.",
-      "Add/update regression coverage for the failure mode.",
-      "Run focused verification and summarize residual risk.",
-    ];
-    checks = [
-      "Before/after reproduction output.",
-      "Targeted tests for the touched path.",
-      "No unintended behavior regressions in nearby flows.",
-    ];
-  } else if (includesAny("deploy", "release", "up", "down", "docker", "azure", "aws")) {
-    steps = [
-      "Check environment readiness and current service state.",
-      "Execute the requested operation with safe, observable steps.",
-      "Watch logs/health signals until state stabilizes.",
-      "Rollback or corrective step if health checks fail.",
-      "Report final status with follow-up actions.",
-    ];
-    checks = [
-      "Service/container health is green.",
-      "Critical endpoint smoke checks pass.",
-      "Any failed component has a documented next action.",
-    ];
-  } else {
-    steps = [
-      "Define scope and non-goals from your request.",
-      "Inspect current state and constraints in the relevant area.",
-      "Draft the smallest execution sequence that achieves the goal.",
-      "Execute with checkpoints and quick feedback loops.",
-      "Verify outcome against explicit acceptance criteria.",
-    ];
-    checks = [
-      "Goal-specific acceptance criteria are met.",
-      "No new regressions introduced in adjacent flows.",
-      "Clear rollback path exists if needed.",
-    ];
-  }
-
-  const statsBits = [];
-  const meshes = foundationStats?.meshes?.total ?? foundationStats?.meshes ?? null;
-  const products = foundationStats?.dataProducts?.total ?? foundationStats?.dataProducts ?? null;
-  const sources = foundationStats?.dataSources?.total ?? foundationStats?.dataSources ?? null;
-  if (meshes != null) statsBits.push(`${meshes} mesh${meshes === 1 ? "" : "es"}`);
-  if (products != null) statsBits.push(`${products} product${products === 1 ? "" : "s"}`);
-  if (sources != null) statsBits.push(`${sources} source${sources === 1 ? "" : "s"}`);
-
-  return [
-    "### Plan",
-    `**Goal:** ${goal}`,
-    "",
-    ...(statsBits.length > 0 ? [`**Current landscape:** ${statsBits.join(" · ")}`, ""] : []),
-    ...(contextLines.length > 0
-      ? [
-          "### Known Context (embeddings/graph)",
-          ...contextLines.map((line) => `- ${line}`),
-          "",
-        ]
-      : []),
-    ...steps.map((step, i) => `${i + 1}. ${step}`),
-    "",
-    "### Verification",
-    ...checks.map((c) => `- ${c}`),
-    "",
-    "Reply with **run it** and I’ll execute this plan now.",
-  ].join("\n");
-}
-
-export default function App() {
-  const {
-    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,
-  } = useWebSocket();
-
-  const [sidebarCollapsed, setSidebarCollapsed] = useState(() => window.innerWidth < 768);
-  const [meshPickerOpen, setMeshPickerOpen] = useState(false);
-  const [queuedFollowUps, setQueuedFollowUps] = useState([]);
-  const queuedDispatchInFlightRef = useRef(false);
-  const activeSessionData = sessions.find((s) => s.id === activeSession);
-
-  // Fetch entity detail for sidebar tree expansion
-  const fetchEntityDetail = useCallback(async (type, identifier) => {
-    const res = await fetch(`/api/entity/${encodeURIComponent(type)}/${encodeURIComponent(identifier)}`);
-    if (!res.ok) throw new Error("Failed to fetch entity");
-    return res.json();
-  }, []);
-
-  // Slash command handler — intercept commands before sending to LLM
-  const handleSubmit = useCallback((text) => {
-    const raw = String(text || "").trim();
-    const normalized = raw.replace(/^\/\s+/, "/").replace(/\s+/g, " ");
-    const cmdToken = (normalized.split(/\s+/)[0] || "").toLowerCase().replace(/\?+$/, "");
-    const recordLearning = (type, payload = {}) => {
-      sendLearningEvent(type, payload, activeSession);
-    };
-
-    if (normalized.startsWith("/")) {
-      recordLearning("slash_command", { command: cmdToken || normalized });
-    } else if (raw) {
-      recordLearning("user_intent", { message: raw.slice(0, 500) });
-    }
-
-    if (cmdToken === "/clear") {
-      setMessages([]);
-      return;
-    }
-    if (cmdToken === "/agent" && normalized === "/agent") {
-      setMessages((prev) => [...prev, { role: "assistant", content: "**Usage**: `/agent <name>`\n\nType `/agents` to see available agents." }]);
-      return;
-    }
-    if (cmdToken === "/agent" && normalized.length > "/agent".length) {
-      const agentName = normalized.slice("/agent".length).trim();
-      if (!agentName) {
-        setMessages((prev) => [...prev, { role: "assistant", content: "**Usage**: `/agent <name>`\n\nType `/agents` to see available agents." }]);
-        return;
-      }
-      setMessages((prev) => [...prev, { role: "user", content: `Switched to **${agentName}** agent` }]);
-      createSession(agentName);
-      return;
-    }
-    if (cmdToken === "/agents") {
-      const renderAgents = (list) => {
-        const agentList = list.length > 0
-          ? list.map((a) => `- **${a.name}** — ${a.description || ""}`).join("\n")
-          : "No agents available.";
-        setMessages((prev) => [...prev, { role: "assistant", content: `### Available Agents\n${agentList}\n\nUse \`/agent <name>\` to open an agent session.` }]);
-      };
-      if (agents.length > 0) {
-        renderAgents(agents);
-      } else {
-        fetch("/api/agents")
-          .then((r) => (r.ok ? r.json() : []))
-          .then((list) => renderAgents(Array.isArray(list) ? list : []))
-          .catch(() => renderAgents([]));
-      }
-      return;
-    }
-    if (cmdToken === "/mesh") {
-      const meshItems = foundationStats?.meshes?.items || [];
-      if (meshItems.length > 0) {
-        setMeshPickerOpen(true);
-        return;
-      }
-      sendMessage("Show me the landscape for a mesh. List meshes first if needed.");
-      return;
-    }
-    if (cmdToken === "/help") {
-      setMessages((prev) => [...prev, {
-        role: "assistant",
-        content: "### Commands\n"
-          + "- `/up` — Start Foundation stack\n"
-          + "- `/down` — Stop Foundation stack\n"
-          + "- `/mesh` — Generate landscape for a mesh (pick from list)\n"
-          + "- `/bootstrap` — Create demo data mesh (~5 min)\n"
-          + "- `/plan <goal>` — Draft plan before execution\n"
-          + "- `/agents` — List available agents\n"
-          + "- `/agent <name>` — Open agent in new session\n"
-          + "- `/ollama` — Auto-detect GPU, install Ollama & pull a model\n"
-          + "- `/train` — Fine-tune embedding model on Foundation domain\n"
-          + "- `/clear` — Clear chat\n"
-          + "- `/help` — Show this help\n\n"
-          + "### Keyboard Shortcuts\n"
-          + "- `Ctrl+B` — Toggle sidebar\n"
-          + "- `Enter` — Send message\n"
-          + "- `Shift+Enter` — New line",
-      }]);
-      return;
-    }
-    if (cmdToken === "/plan") {
-      const goal = normalized.slice("/plan".length).trim();
-      if (!goal) {
-        setMessages((prev) => [...prev, {
-          role: "assistant",
-          content: "**Usage**: `/plan <goal>`\n\nExample: `/plan fix watcher stale submitted status and add tests`",
-        }]);
-        return;
-      }
-      recordLearning("plan_requested", { goal: goal.slice(0, 500) });
-      setMessages((prev) => [...prev, { role: "user", content: normalized }]);
-      if (activeSession) appendMessage(activeSession, "user", normalized);
-      fetch("/api/plan", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ goal }),
-      })
-        .then(async (r) => {
-          const data = await r.json().catch(() => ({}));
-          if (!r.ok) throw Object.assign(new Error(data?.error || "plan_failed"), { data });
-          return data;
-        })
-        .then((data) => {
-          const plan = String(data?.plan || "").trim();
-          const lines = Array.isArray(data?.context) ? data.context.slice(0, 6) : [];
-          const content = plan || buildSmartPlan(goal, lines, data?.foundationStats || foundationStats || null);
-          setMessages((prev) => [...prev, {
-            role: "assistant",
-            content,
-          }]);
-          if (activeSession) appendMessage(activeSession, "assistant", content);
-        })
-        .catch((err) => {
-          const fallbackCtx = Array.isArray(err?.data?.context) ? err.data.context.slice(0, 6) : [];
-          const fallbackStats = err?.data?.foundationStats || foundationStats || null;
-          const content = buildSmartPlan(goal, fallbackCtx, fallbackStats);
-          setMessages((prev) => [...prev, {
-            role: "assistant",
-            content,
-          }]);
-          if (activeSession) appendMessage(activeSession, "assistant", content);
-        });
-      return;
-    }
-    if (cmdToken === "/exit" || cmdToken === "/quit") {
-      // No-op in web — can't close a browser tab
-      return;
-    }
-    if (cmdToken === "/sessions") {
-      setMessages((prev) => [...prev, { role: "assistant", content: "`/sessions` is only available in TUI mode." }]);
-      return;
-    }
-    if (cmdToken === "/up") {
-      setMessages((prev) => [...prev, { role: "assistant", content: "### Starting stack...\nRunning `docker compose up -d --remove-orphans`" }]);
-      sendStackUp();
-      return;
-    }
-    if (cmdToken === "/down") {
-      setMessages((prev) => [...prev, { role: "assistant", content: "### Stopping stack...\nRunning `docker compose down --remove-orphans`" }]);
-      sendStackDown();
-      return;
-    }
-    if (cmdToken === "/bootstrap") {
-      setMessages((prev) => [...prev, { role: "assistant", content: "### Bootstrap\nStarting Foundation bootstrap... (this takes ~5 min)" }]);
-      sendBootstrap();
-      return;
-    }
-    if (cmdToken === "/train") {
-      setMessages((prev) => [...prev, { role: "assistant", content: "### Embedding Training\nStarting training pipeline..." }]);
-      sendTrain();
-      return;
-    }
-    if (cmdToken === "/ollama") {
-      setMessages((prev) => [...prev, { role: "assistant", content: "### Ollama Setup\nDetecting environment..." }]);
-      sendOllamaSetup();
-      return;
-    }
-    // Catch-all: unrecognized slash commands → show error instead of sending to LLM
-    if (normalized.startsWith("/")) {
-      const cmd = normalized.split(/\s/)[0];
-      setMessages((prev) => [...prev, { role: "assistant", content: `Unknown command \`${cmd}\`. Type \`/help\` to see available commands.` }]);
-      return;
-    }
-    // While streaming, queue follow-ups so users can keep typing naturally.
-    if (isStreaming) {
-      setQueuedFollowUps((prev) => [...prev, raw]);
-      return;
-    }
-    // Regular message → send to LLM
-    sendMessage(raw);
-  }, [agents, sendMessage, sendOllamaSetup, sendStackUp, sendStackDown, sendBootstrap, sendTrain, sendLearningEvent, appendMessage, createSession, setMessages, foundationStats, activeSession, isStreaming]);
-
-  // Drain queued follow-ups one by one after each stream completes.
-  useEffect(() => {
-    if (isStreaming || queuedDispatchInFlightRef.current || queuedFollowUps.length === 0) return;
-    queuedDispatchInFlightRef.current = true;
-    const [next, ...rest] = queuedFollowUps;
-    setQueuedFollowUps(rest);
-    sendMessage(next);
-    const timer = setTimeout(() => {
-      queuedDispatchInFlightRef.current = false;
-    }, 2500);
-    return () => clearTimeout(timer);
-  }, [isStreaming, queuedFollowUps, sendMessage]);
-
-  useEffect(() => {
-    if (isStreaming) {
-      queuedDispatchInFlightRef.current = false;
-    }
-  }, [isStreaming]);
-
-  useEffect(() => {
-    // Keep follow-up queue scoped to the active session tab.
-    setQueuedFollowUps([]);
-    queuedDispatchInFlightRef.current = false;
-  }, [activeSession]);
-
-  // Keyboard shortcut: Ctrl+B to toggle sidebar; Escape to close mesh picker
-  useEffect(() => {
-    const handler = (e) => {
-      if (e.ctrlKey && e.key === "b") {
-        e.preventDefault();
-        setSidebarCollapsed((v) => !v);
-      }
-      if (e.key === "Escape" && meshPickerOpen) {
-        setMeshPickerOpen(false);
-      }
-    };
-    window.addEventListener("keydown", handler);
-    return () => window.removeEventListener("keydown", handler);
-  }, [meshPickerOpen]);
-
-  return (
-    <div className="flex h-screen bg-[#08080c] noise">
-      {/* Sidebar */}
-      <Sidebar
-        sessions={sessions}
-        activeId={activeSession}
-        agents={agents}
-        services={services}
-        foundationStats={foundationStats}
-        collapsed={sidebarCollapsed}
-        onToggle={() => setSidebarCollapsed((v) => !v)}
-        onSwitchSession={switchSession}
-        onCreateSession={createSession}
-        onFetchEntity={fetchEntityDetail}
-        onRunCommand={handleSubmit}
-      />
-
-      {/* Main content */}
-      <div className="flex flex-col flex-1 min-w-0">
-        <TabBar
-          sessions={sessions}
-          activeId={activeSession}
-          agents={agents}
-          onSwitch={switchSession}
-          onAdd={createSession}
-          onClose={closeSession}
-        />
-
-        <div className="h-px bg-[#1a1a28]" />
-
-        <ChatView
-          messages={messages}
-          streamingText={streamingText}
-          thinkingText={thinkingText}
-          statusText={statusText}
-          toolCalls={toolCalls}
-          pendingConfirm={pendingConfirm}
-          onRespondConfirm={respondConfirm}
-        />
-
-        {meshPickerOpen && (foundationStats?.meshes?.items?.length > 0) && (
-          <div className="border-t border-[#1a1a28] bg-[#0c0c12] px-4 py-3">
-            <p className="text-xs text-[#6b6b80] mb-2">Pick a mesh to generate landscape</p>
-            <div className="flex flex-wrap gap-2">
-              {foundationStats.meshes.items.map((mesh) => (
-                <button
-                  key={mesh.identifier}
-                  type="button"
-                  onClick={() => {
-                    setMeshPickerOpen(false);
-                    const msg = `Show me the landscape for the mesh **${mesh.name || mesh.identifier}** (identifier: ${mesh.identifier}).`;
-                    setMessages((prev) => [...prev, { role: "user", content: msg }]);
-                    sendMessage(msg);
-                  }}
-                  className="px-3 py-2 rounded-lg text-sm font-mono bg-[#1a1a28] text-[#e0dfe4] hover:bg-[#f97316]/20 hover:text-[#f97316] border border-[#26263a] transition-colors"
-                >
-                  {mesh.name || mesh.identifier}
-                </button>
-              ))}
-              <button
-                type="button"
-                onClick={() => setMeshPickerOpen(false)}
-                className="px-3 py-2 rounded-lg text-sm text-[#6b6b80] hover:text-[#e0dfe4] transition-colors"
-              >
-                Cancel
-              </button>
-            </div>
-          </div>
-        )}
-
-        <InputBox
-          onSubmit={handleSubmit}
-          onCancel={cancelStream}
-          disabled={false}
-          streaming={isStreaming}
-          queuedCount={queuedFollowUps.length}
-        />
-
-        <StatusBar
-          connected={connected}
-          agentName={activeSessionData?.agent}
-          statusText={statusText}
-          isStreaming={isStreaming}
-          updateAvailable={updateAvailable}
-        />
-      </div>
-    </div>
-  );
-}