@meshxdata/fops 0.1.47 → 0.1.49

package/src/web/frontend/src/components/Sidebar.jsx

@@ -1,410 +0,0 @@
-import React, { useState, useRef, useCallback } from "react";
-
-function ServiceDot({ status }) {
-  const color = status === "running" ? "bg-emerald-400" : status === "exited" ? "bg-red-400/60" : "bg-[#3a3a50]";
-  return <span className={`w-[6px] h-[6px] rounded-full inline-block ${color}`} title={status} />;
-}
-
-function SectionHeader({ title, collapsed, onToggle, badge, badgeColor, count }) {
-  return (
-    <button
-      onClick={onToggle}
-      className="w-full flex items-center justify-between text-[10px] font-semibold text-[#4e4e63] uppercase tracking-widest mb-2 hover:text-[#8b8b9e] transition-colors"
-    >
-      <span className="flex items-center gap-1.5">
-        <span className={`text-[8px] transition-transform duration-200 ${collapsed ? "" : "rotate-90"}`}>&#x25B6;</span>
-        {title}
-      </span>
-      {badge != null ? (
-        <span className={`text-[9px] font-mono font-normal normal-case tracking-normal ${badgeColor || "text-[#3a3a50]"}`}>
-          {badge}
-        </span>
-      ) : (collapsed && count > 0 ? (
-        <span className="text-[9px] font-mono font-normal normal-case tracking-normal text-[#3a3a50]">
-          {count}
-        </span>
-      ) : null)}
-    </button>
-  );
-}
-
-function ServicesSection({ services }) {
-  const [collapsed, setCollapsed] = useState(true);
-  const runningCount = services.filter((s) => s.status === "running").length;
-  const badgeColor = services.length === 0 ? "text-[#3a3a50]"
-    : runningCount === services.length ? "text-emerald-400"
-    : runningCount === 0 ? "text-red-400"
-    : "text-yellow-400";
-
-  return (
-    <div className="px-3 py-2.5">
-      <SectionHeader
-        title="Services"
-        collapsed={collapsed}
-        onToggle={() => setCollapsed((c) => !c)}
-        badge={services.length > 0 ? `${runningCount}/${services.length}` : null}
-        badgeColor={badgeColor}
-        count={runningCount}
-      />
-      {!collapsed && (
-        <div className="space-y-0.5 animate-fade-in">
-          {services.length > 0 ? (
-            services.map((svc) => (
-              <div key={svc.name} className="flex items-center gap-2 px-1 py-[3px] rounded text-[11px] font-mono">
-                <ServiceDot status={svc.status} />
-                <span className={svc.status === "running" ? "text-[#8b8b9e]" : "text-[#3a3a50]"}>
-                  {svc.name}
-                </span>
-              </div>
-            ))
-          ) : (
-            <div className="px-1 py-0.5 text-[11px] text-[#2e2e40] font-mono italic">no services</div>
-          )}
-        </div>
-      )}
-    </div>
-  );
-}
-
-function TreeGroup({ label, icon, color, count }) {
-  return (
-    <div className="flex items-center gap-1.5 px-2 py-[2px] text-[11px] font-mono">
-      <span className={color}>{icon}</span>
-      <span className="text-[#8b8b9e]">{label}</span>
-      {count > 0 && <span className="text-[#3a3a50] text-[10px]">({count})</span>}
-    </div>
-  );
-}
-
-function TreeNode({ label, color, isLast, isExpanded, onClick }) {
-  const connector = isLast && !isExpanded ? "\u2514 " : "\u251C ";
-  const chevron = isExpanded ? "\u25BE " : "\u25B8 ";
-  return (
-    <button
-      onClick={onClick}
-      className="w-full flex items-center gap-1 pl-5 py-[1px] text-[11px] font-mono text-left hover:bg-[#12121a] rounded transition-colors"
-    >
-      <span className="text-[#2e2e40]">{connector}</span>
-      <span className={`${isExpanded ? color.replace("/70", "") : color} ${isExpanded ? "font-semibold" : ""}`}>
-        {isExpanded ? chevron : ""}{label}
-      </span>
-    </button>
-  );
-}
-
-function EntityDetail({ detail: rawDetail, entityType, borderColor }) {
-  if (!rawDetail) {
-    return (
-      <div className="ml-8 mr-2 my-0.5 pl-2 border-l border-[#2e2e40] text-[10px] font-mono text-[#3a3a50] italic">
-        loading...
-      </div>
-    );
-  }
-  const d = rawDetail.entity || rawDetail;
-  const info = rawDetail.entity_info || {};
-  const trunc = (s, n) => s && s.length > n ? s.slice(0, n) + "\u2026" : s;
-  const lines = [];
-
-  const str = (v) => typeof v === "object" && v !== null ? (v.code || v.reason || JSON.stringify(v)) : String(v ?? "");
-
-  if (entityType === "mesh") {
-    if (d.state) lines.push({ label: "state", value: str(d.state) });
-    if (d.description) lines.push({ label: "desc", value: trunc(d.description, 40) });
-    if (d.member_count != null) lines.push({ label: "members", value: String(d.member_count) });
-    if (d.purpose) lines.push({ label: "purpose", value: trunc(d.purpose, 40) });
-    if (info.owner) lines.push({ label: "owner", value: trunc(info.owner, 25) });
-  } else if (entityType === "data_product") {
-    if (d.data_product_type) lines.push({ label: "type", value: d.data_product_type });
-    if (d.description) lines.push({ label: "desc", value: trunc(d.description, 40) });
-    if (info.owner) lines.push({ label: "owner", value: trunc(info.owner, 25) });
-  } else if (entityType === "data_source") {
-    if (d.source_type) lines.push({ label: "type", value: d.source_type });
-    if (d.description) lines.push({ label: "desc", value: trunc(d.description, 40) });
-    if (info.owner) lines.push({ label: "owner", value: trunc(info.owner, 25) });
-  }
-
-  if (lines.length === 0) {
-    const id = d.identifier || rawDetail.identifier;
-    lines.push({ label: "id", value: trunc(id || "\u2014", 20) });
-  }
-
-  return (
-    <div className={`ml-8 mr-2 my-0.5 pl-2 bg-[#12121a] rounded-sm border-l ${borderColor || "border-[#2e2e40]"}`}>
-      {lines.map((l, i) => (
-        <div key={i} className="text-[10px] font-mono py-[1px]">
-          <span className="text-[#3a3a50]">{l.label}: </span>
-          <span className="text-[#6e7a8a]">{l.value}</span>
-        </div>
-      ))}
-    </div>
-  );
-}
-
-function DataSection({ foundationStats, onFetchEntity }) {
-  const [collapsed, setCollapsed] = useState(false);
-  const [expandedKey, setExpandedKey] = useState(null);
-  const [entityDetails, setEntityDetails] = useState({});
-  const detailsCacheRef = useRef({});
-
-  const meshItems = foundationStats?.meshes?.items || [];
-  const dpItems = foundationStats?.dataProducts?.items || [];
-  const dsItems = foundationStats?.dataSources?.items || [];
-  const activeRuns = foundationStats?.activeRuns?.items || [];
-  const totalCount = meshItems.length + dpItems.length + dsItems.length + activeRuns.length;
-
-  const handleNodeClick = useCallback(async (type, identifier) => {
-    const key = `${type}:${identifier}`;
-    if (expandedKey === key) {
-      setExpandedKey(null);
-      return;
-    }
-    setExpandedKey(key);
-    if (detailsCacheRef.current[key]) {
-      setEntityDetails((prev) => ({ ...prev, [key]: detailsCacheRef.current[key] }));
-      return;
-    }
-    if (onFetchEntity) {
-      try {
-        const detail = await onFetchEntity(type, identifier);
-        detailsCacheRef.current[key] = detail;
-        setEntityDetails((prev) => ({ ...prev, [key]: detail }));
-      } catch {
-        const fallback = { identifier };
-        detailsCacheRef.current[key] = fallback;
-        setEntityDetails((prev) => ({ ...prev, [key]: fallback }));
-      }
-    }
-  }, [expandedKey, onFetchEntity]);
-
-  if (totalCount === 0) return null;
-
-  const renderGroup = (items, label, icon, colorClass, nodeColorClass, type, borderColor) => {
-    if (items.length === 0) return null;
-    return (
-      <React.Fragment key={label}>
-        <TreeGroup label={label} icon={icon} color={colorClass} count={items.length} />
-        {items.map((item, i) => {
-          const nk = `${type}:${item.identifier}`;
-          const isExpanded = expandedKey === nk;
-          return (
-            <React.Fragment key={item.identifier}>
-              <TreeNode
-                label={item.name}
-                color={nodeColorClass}
-                isLast={i === items.length - 1}
-                isExpanded={isExpanded}
-                onClick={() => handleNodeClick(type, item.identifier)}
-              />
-              {isExpanded && (
-                <EntityDetail detail={entityDetails[nk] || null} borderColor={borderColor} />
-              )}
-            </React.Fragment>
-          );
-        })}
-      </React.Fragment>
-    );
-  };
-
-  return (
-    <div className="px-3 py-2.5">
-      <SectionHeader
-        title="Data"
-        collapsed={collapsed}
-        onToggle={() => setCollapsed((c) => !c)}
-        count={totalCount}
-      />
-      {!collapsed && (
-        <div className="animate-fade-in">
-          {renderGroup(meshItems, "Meshes", "\u25C8", "text-cyan-400", "text-cyan-300/70", "mesh", "border-cyan-400/30")}
-          {renderGroup(dpItems, "Products", "\u25C6", "text-emerald-400", "text-emerald-300/70", "data_product", "border-emerald-400/30")}
-          {renderGroup(dsItems, "Sources", "\u25CB", "text-yellow-400", "text-yellow-300/70", "data_source", "border-yellow-400/30")}
-          {activeRuns.length > 0 && (
-            <React.Fragment key="active-runs">
-              <TreeGroup label="Active runs" icon="\u25B6" color="text-fuchsia-400" count={activeRuns.length} />
-              {activeRuns.map((run, i) => {
-                const label = run.application_name || (run.name && run.suffix ? `${run.name}-${run.suffix}` : run.name || "job");
-                const status = run.status ? ` · ${run.status}` : "";
-                return (
-                  <div
-                    key={run.id ?? i}
-                    className="pl-4 py-0.5 text-[11px] font-mono text-fuchsia-300/80 truncate"
-                    title={`${label}${status}`}
-                  >
-                    {label}{status}
-                  </div>
-                );
-              })}
-            </React.Fragment>
-          )}
-        </div>
-      )}
-    </div>
-  );
-}
-
-function AgentsSection({ agents, onCreateSession }) {
-  const [collapsed, setCollapsed] = useState(true);
-
-  return (
-    <div className="px-3 py-2.5">
-      <SectionHeader
-        title="Agents"
-        collapsed={collapsed}
-        onToggle={() => setCollapsed((c) => !c)}
-        count={agents.length}
-      />
-      {!collapsed && (
-        <div className="space-y-0.5 animate-fade-in">
-          {agents.length > 0 ? (
-            agents.map((a) => (
-              <button
-                key={a.name}
-                onClick={() => onCreateSession(a.name)}
-                className="w-full text-left px-2 py-1.5 rounded-lg text-[11px] font-mono text-[#6e7a8a] hover:bg-[#18181f] hover:text-[#f97316] transition-all duration-150"
-              >
-                {a.name}
-              </button>
-            ))
-          ) : (
-            <div className="px-1 py-0.5 text-[11px] text-[#2e2e40] font-mono italic">none</div>
-          )}
-        </div>
-      )}
-    </div>
-  );
-}
-
-export default function Sidebar({
-  sessions,
-  activeId,
-  agents,
-  services,
-  foundationStats,
-  collapsed,
-  onToggle,
-  onSwitchSession,
-  onCreateSession,
-  onFetchEntity,
-  onRunCommand,
-}) {
-  if (collapsed) {
-    return (
-      <div className="w-12 bg-[#08080c] border-r border-[#1a1a28] flex flex-col items-center py-3 gap-4">
-        <button
-          onClick={onToggle}
-          className="text-[#4e4e63] hover:text-[#f97316] text-sm transition-colors"
-          title="Expand sidebar (Ctrl+B)"
-        >
-          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
-            <line x1="2" y1="3" x2="14" y2="3" />
-            <line x1="2" y1="8" x2="14" y2="8" />
-            <line x1="2" y1="13" x2="14" y2="13" />
-          </svg>
-        </button>
-        {/* Mini service indicators */}
-        {services.length > 0 && (
-          <div className="flex flex-col items-center gap-1.5 mt-auto mb-2">
-            {services.filter((s) => s.status === "running").length > 0 && (
-              <span className="w-[5px] h-[5px] rounded-full bg-emerald-400" title="Services running" />
-            )}
-            {services.filter((s) => s.status !== "running").length > 0 && (
-              <span className="w-[5px] h-[5px] rounded-full bg-red-400/50" title="Services stopped" />
-            )}
-          </div>
-        )}
-      </div>
-    );
-  }
-
-  return (
-    <div className="w-60 bg-[#08080c] border-r border-[#1a1a28] flex flex-col overflow-y-auto shrink-0">
-      {/* Header */}
-      <div className="flex items-center justify-between px-4 py-3 border-b border-[#1a1a28]">
-        <div className="flex items-center gap-2">
-          <span className="text-[#f97316] text-sm">&#x25C6;</span>
-          <span className="text-xs font-bold text-[#6e7a8a] uppercase tracking-[0.2em]">meshx</span>
-        </div>
-        <button
-          onClick={onToggle}
-          className="text-[#3a3a50] hover:text-[#8b8b9e] text-xs transition-colors"
-          title="Collapse sidebar (Ctrl+B)"
-        >
-          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
-            <polyline points="9,3 5,7 9,11" />
-          </svg>
-        </button>
-      </div>
-
-      {/* Sessions */}
-      <div className="px-3 py-2.5">
-        <div className="text-[10px] font-semibold text-[#4e4e63] uppercase tracking-widest mb-2 px-1">
-          Sessions
-        </div>
-        <div className="space-y-0.5">
-          {sessions.map((s, i) => {
-            const isActive = s.id === activeId;
-            return (
-              <button
-                key={s.id}
-                onClick={() => onSwitchSession(s.id)}
-                className={`
-                  w-full text-left flex items-center gap-2 px-2 py-1.5 rounded-lg text-[11px] font-mono
-                  transition-all duration-150
-                  ${isActive
-                    ? "bg-[#f97316]/8 text-[#f97316] border-l-2 border-[#f97316] pl-[6px]"
-                    : "text-[#6e7a8a] hover:bg-[#14141c] hover:text-[#8b8b9e] border-l-2 border-transparent pl-[6px]"
-                  }
-                `}
-              >
-                <span className="truncate">{i + 1}:{s.agent || "general"}</span>
-                {s.status === "streaming" && (
-                  <span className="w-1.5 h-1.5 rounded-full bg-[#f97316] animate-pulse ml-auto shrink-0" />
-                )}
-              </button>
-            );
-          })}
-        </div>
-      </div>
-
-      {/* Data tree (meshes, products, sources) */}
-      <DataSection foundationStats={foundationStats} onFetchEntity={onFetchEntity} />
-
-      {/* Agents */}
-      <AgentsSection agents={agents} onCreateSession={onCreateSession} />
-
-      {/* Quick commands */}
-      <div className="px-3 py-2.5">
-        <div className="text-[10px] font-semibold text-[#4e4e63] uppercase tracking-widest mb-2 px-1">
-          Commands
-        </div>
-        <div className="space-y-0.5">
-          <button
-            onClick={() => onRunCommand?.("/plan draft implementation steps for this task")}
-            className="w-full text-left px-2 py-1.5 rounded-lg text-[11px] font-mono text-[#6e7a8a] hover:bg-[#18181f] hover:text-[#f97316] transition-all duration-150"
-          >
-            /plan
-          </button>
-          <button
-            onClick={() => onRunCommand?.("/agents")}
-            className="w-full text-left px-2 py-1.5 rounded-lg text-[11px] font-mono text-[#6e7a8a] hover:bg-[#18181f] hover:text-[#f97316] transition-all duration-150"
-          >
-            /agents
-          </button>
-        </div>
-      </div>
-
-      {/* Spacer */}
-      <div className="flex-1" />
-
-      {/* Services */}
-      <div className="border-t border-[#1a1a28]">
-        <ServicesSection services={services} />
-      </div>
-
-      {/* Footer */}
-      <div className="px-4 py-2 border-t border-[#1a1a28] text-[9px] font-mono text-[#2e2e40] tracking-wide">
-        ^B toggle
-      </div>
-    </div>
-  );
-}

package/src/web/frontend/src/components/StatusBar.jsx

@@ -1,37 +0,0 @@
-import React, { useState } from "react";
-
-export default function StatusBar({ connected, agentName, statusText, isStreaming, updateAvailable }) {
-  const [dismissed, setDismissed] = useState(false);
-
-  return (
-    <div className="bg-[#06060a] px-4 py-1.5 flex justify-between items-center text-[11px] font-mono border-t border-[#1a1a28]">
-      <div className="flex items-center gap-4">
-        <span className="flex items-center gap-1.5">
-          <span className={`w-1.5 h-1.5 rounded-full ${connected ? "bg-emerald-400" : "bg-red-400"}`} />
-          <span className={connected ? "text-[#6e7a8a]" : "text-red-400"}>{connected ? "connected" : "disconnected"}</span>
-        </span>
-        <span className="text-[#4e4e63]">
-          agent:<span className="text-[#8b8b9e]">{agentName || "general"}</span>
-        </span>
-        {isStreaming && statusText && (
-          <span className="text-[#f97316] animate-pulse">{statusText}</span>
-        )}
-      </div>
-      <div className="flex items-center gap-4 text-[#3a3a50]">
-        {updateAvailable && !dismissed && (
-          <span className="text-[#fbbf24] flex items-center gap-1.5">
-            &#x2B06; v{updateAvailable}
-            <button
-              onClick={() => setDismissed(true)}
-              className="text-[#4e4e63] hover:text-[#8b8b9e] ml-0.5 transition-colors"
-            >
-              &#x2715;
-            </button>
-          </span>
-        )}
-        <span>Shift+&#x23CE; newline</span>
-        <span>^B sidebar</span>
-      </div>
-    </div>
-  );
-}

package/src/web/frontend/src/components/TabBar.jsx

@@ -1,87 +0,0 @@
-import React, { useState, useRef, useEffect } from "react";
-
-export default function TabBar({ sessions, activeId, agents, onSwitch, onAdd, onClose }) {
-  const [showAgentPicker, setShowAgentPicker] = useState(false);
-  const pickerRef = useRef(null);
-
-  // Close picker on outside click
-  useEffect(() => {
-    if (!showAgentPicker) return;
-    const handler = (e) => {
-      if (pickerRef.current && !pickerRef.current.contains(e.target)) setShowAgentPicker(false);
-    };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, [showAgentPicker]);
-
-  return (
-    <div className="flex items-center bg-[#0c0c12] px-1 py-0 relative">
-      {sessions.map((s, i) => {
-        const isActive = s.id === activeId;
-        return (
-          <div
-            key={s.id}
-            className={`
-              relative flex items-center gap-1.5 px-4 py-2 text-xs cursor-pointer
-              transition-colors duration-150 group
-              ${isActive ? "text-[#e0dfe4]" : "text-[#5a5a70] hover:text-[#8b8b9e]"}
-            `}
-            onClick={() => onSwitch(s.id)}
-          >
-            <span className="font-mono font-medium">{i + 1}:{s.agent || "general"}</span>
-            {s.status === "streaming" && (
-              <span className="w-1.5 h-1.5 rounded-full bg-[#f97316] animate-pulse" />
-            )}
-            {sessions.length > 1 && (
-              <button
-                className="ml-0.5 text-[#3a3a50] hover:text-[#f87171] text-[10px] opacity-0 group-hover:opacity-100 transition-opacity"
-                onClick={(e) => { e.stopPropagation(); onClose(s.id); }}
-              >
-                &#x2715;
-              </button>
-            )}
-            {/* Active indicator — bottom bar */}
-            {isActive && (
-              <div className="absolute bottom-0 left-2 right-2 h-[2px] bg-[#f97316] rounded-full" />
-            )}
-          </div>
-        );
-      })}
-
-      {/* Add session button */}
-      <div className="relative" ref={pickerRef}>
-        <button
-          className="text-[#4e4e63] hover:text-[#f97316] px-3 py-2 text-xs transition-colors"
-          onClick={() => setShowAgentPicker(!showAgentPicker)}
-        >
-          +
-        </button>
-
-        {showAgentPicker && (
-          <div className="absolute top-full left-0 mt-1 bg-[#14141c] border border-[#26263a] rounded-xl shadow-2xl z-50 min-w-[220px] py-1.5 animate-fade-in overflow-hidden">
-            <div
-              className="px-4 py-2.5 hover:bg-[#1c1c28] cursor-pointer text-sm text-[#8b8b9e] hover:text-[#e0dfe4] transition-colors"
-              onClick={() => { onAdd(null); setShowAgentPicker(false); }}
-            >
-              <span className="text-[#4e4e63] mr-2 font-mono text-xs">&#x276F;</span>
-              general
-            </div>
-            {agents.map((a) => (
-              <div
-                key={a.name}
-                className="px-4 py-2.5 hover:bg-[#1c1c28] cursor-pointer text-sm transition-colors"
-                onClick={() => { onAdd(a.name); setShowAgentPicker(false); }}
-              >
-                <span className="text-[#f97316] mr-2 font-mono text-xs">&#x276F;</span>
-                <span className="text-[#e0dfe4]">{a.name}</span>
-                {a.description && <span className="text-[#4e4e63] ml-2 text-xs">{a.description}</span>}
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
-
-      <div className="ml-auto text-[#2e2e40] text-[10px] font-mono pr-3 tracking-wider uppercase">fops</div>
-    </div>
-  );
-}