@meshxdata/fops 0.1.51 → 0.1.53

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

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

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

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