@decido/plugin-frubeala-ui 1.0.0

package/dist/assets/index-S0MgceH3.js

@@ -0,0 +1,272 @@
+function getDefaultExportFromCjs(x2) {
+  return x2 && x2.__esModule && Object.prototype.hasOwnProperty.call(x2, "default") ? x2["default"] : x2;
+}
+var react = { exports: {} };
+var react_production_min = {};
+/**
+ * @license React
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var l = /* @__PURE__ */ Symbol.for("react.element"), n = /* @__PURE__ */ Symbol.for("react.portal"), p = /* @__PURE__ */ Symbol.for("react.fragment"), q = /* @__PURE__ */ Symbol.for("react.strict_mode"), r = /* @__PURE__ */ Symbol.for("react.profiler"), t = /* @__PURE__ */ Symbol.for("react.provider"), u = /* @__PURE__ */ Symbol.for("react.context"), v = /* @__PURE__ */ Symbol.for("react.forward_ref"), w = /* @__PURE__ */ Symbol.for("react.suspense"), x = /* @__PURE__ */ Symbol.for("react.memo"), y = /* @__PURE__ */ Symbol.for("react.lazy"), z = Symbol.iterator;
+function A(a) {
+  if (null === a || "object" !== typeof a) return null;
+  a = z && a[z] || a["@@iterator"];
+  return "function" === typeof a ? a : null;
+}
+var B = { isMounted: function() {
+  return false;
+}, enqueueForceUpdate: function() {
+}, enqueueReplaceState: function() {
+}, enqueueSetState: function() {
+} }, C = Object.assign, D = {};
+function E(a, b, e) {
+  this.props = a;
+  this.context = b;
+  this.refs = D;
+  this.updater = e || B;
+}
+E.prototype.isReactComponent = {};
+E.prototype.setState = function(a, b) {
+  if ("object" !== typeof a && "function" !== typeof a && null != a) throw Error("setState(...): takes an object of state variables to update or a function which returns an object of state variables.");
+  this.updater.enqueueSetState(this, a, b, "setState");
+};
+E.prototype.forceUpdate = function(a) {
+  this.updater.enqueueForceUpdate(this, a, "forceUpdate");
+};
+function F() {
+}
+F.prototype = E.prototype;
+function G(a, b, e) {
+  this.props = a;
+  this.context = b;
+  this.refs = D;
+  this.updater = e || B;
+}
+var H = G.prototype = new F();
+H.constructor = G;
+C(H, E.prototype);
+H.isPureReactComponent = true;
+var I = Array.isArray, J = Object.prototype.hasOwnProperty, K = { current: null }, L = { key: true, ref: true, __self: true, __source: true };
+function M(a, b, e) {
+  var d, c = {}, k = null, h = null;
+  if (null != b) for (d in void 0 !== b.ref && (h = b.ref), void 0 !== b.key && (k = "" + b.key), b) J.call(b, d) && !L.hasOwnProperty(d) && (c[d] = b[d]);
+  var g = arguments.length - 2;
+  if (1 === g) c.children = e;
+  else if (1 < g) {
+    for (var f = Array(g), m = 0; m < g; m++) f[m] = arguments[m + 2];
+    c.children = f;
+  }
+  if (a && a.defaultProps) for (d in g = a.defaultProps, g) void 0 === c[d] && (c[d] = g[d]);
+  return { $$typeof: l, type: a, key: k, ref: h, props: c, _owner: K.current };
+}
+function N(a, b) {
+  return { $$typeof: l, type: a.type, key: b, ref: a.ref, props: a.props, _owner: a._owner };
+}
+function O(a) {
+  return "object" === typeof a && null !== a && a.$$typeof === l;
+}
+function escape(a) {
+  var b = { "=": "=0", ":": "=2" };
+  return "$" + a.replace(/[=:]/g, function(a2) {
+    return b[a2];
+  });
+}
+var P = /\/+/g;
+function Q(a, b) {
+  return "object" === typeof a && null !== a && null != a.key ? escape("" + a.key) : b.toString(36);
+}
+function R(a, b, e, d, c) {
+  var k = typeof a;
+  if ("undefined" === k || "boolean" === k) a = null;
+  var h = false;
+  if (null === a) h = true;
+  else switch (k) {
+    case "string":
+    case "number":
+      h = true;
+      break;
+    case "object":
+      switch (a.$$typeof) {
+        case l:
+        case n:
+          h = true;
+      }
+  }
+  if (h) return h = a, c = c(h), a = "" === d ? "." + Q(h, 0) : d, I(c) ? (e = "", null != a && (e = a.replace(P, "$&/") + "/"), R(c, b, e, "", function(a2) {
+    return a2;
+  })) : null != c && (O(c) && (c = N(c, e + (!c.key || h && h.key === c.key ? "" : ("" + c.key).replace(P, "$&/") + "/") + a)), b.push(c)), 1;
+  h = 0;
+  d = "" === d ? "." : d + ":";
+  if (I(a)) for (var g = 0; g < a.length; g++) {
+    k = a[g];
+    var f = d + Q(k, g);
+    h += R(k, b, e, f, c);
+  }
+  else if (f = A(a), "function" === typeof f) for (a = f.call(a), g = 0; !(k = a.next()).done; ) k = k.value, f = d + Q(k, g++), h += R(k, b, e, f, c);
+  else if ("object" === k) throw b = String(a), Error("Objects are not valid as a React child (found: " + ("[object Object]" === b ? "object with keys {" + Object.keys(a).join(", ") + "}" : b) + "). If you meant to render a collection of children, use an array instead.");
+  return h;
+}
+function S(a, b, e) {
+  if (null == a) return a;
+  var d = [], c = 0;
+  R(a, d, "", "", function(a2) {
+    return b.call(e, a2, c++);
+  });
+  return d;
+}
+function T(a) {
+  if (-1 === a._status) {
+    var b = a._result;
+    b = b();
+    b.then(function(b2) {
+      if (0 === a._status || -1 === a._status) a._status = 1, a._result = b2;
+    }, function(b2) {
+      if (0 === a._status || -1 === a._status) a._status = 2, a._result = b2;
+    });
+    -1 === a._status && (a._status = 0, a._result = b);
+  }
+  if (1 === a._status) return a._result.default;
+  throw a._result;
+}
+var U = { current: null }, V = { transition: null }, W = { ReactCurrentDispatcher: U, ReactCurrentBatchConfig: V, ReactCurrentOwner: K };
+function X() {
+  throw Error("act(...) is not supported in production builds of React.");
+}
+react_production_min.Children = { map: S, forEach: function(a, b, e) {
+  S(a, function() {
+    b.apply(this, arguments);
+  }, e);
+}, count: function(a) {
+  var b = 0;
+  S(a, function() {
+    b++;
+  });
+  return b;
+}, toArray: function(a) {
+  return S(a, function(a2) {
+    return a2;
+  }) || [];
+}, only: function(a) {
+  if (!O(a)) throw Error("React.Children.only expected to receive a single React element child.");
+  return a;
+} };
+react_production_min.Component = E;
+react_production_min.Fragment = p;
+react_production_min.Profiler = r;
+react_production_min.PureComponent = G;
+react_production_min.StrictMode = q;
+react_production_min.Suspense = w;
+react_production_min.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = W;
+react_production_min.act = X;
+react_production_min.cloneElement = function(a, b, e) {
+  if (null === a || void 0 === a) throw Error("React.cloneElement(...): The argument must be a React element, but you passed " + a + ".");
+  var d = C({}, a.props), c = a.key, k = a.ref, h = a._owner;
+  if (null != b) {
+    void 0 !== b.ref && (k = b.ref, h = K.current);
+    void 0 !== b.key && (c = "" + b.key);
+    if (a.type && a.type.defaultProps) var g = a.type.defaultProps;
+    for (f in b) J.call(b, f) && !L.hasOwnProperty(f) && (d[f] = void 0 === b[f] && void 0 !== g ? g[f] : b[f]);
+  }
+  var f = arguments.length - 2;
+  if (1 === f) d.children = e;
+  else if (1 < f) {
+    g = Array(f);
+    for (var m = 0; m < f; m++) g[m] = arguments[m + 2];
+    d.children = g;
+  }
+  return { $$typeof: l, type: a.type, key: c, ref: k, props: d, _owner: h };
+};
+react_production_min.createContext = function(a) {
+  a = { $$typeof: u, _currentValue: a, _currentValue2: a, _threadCount: 0, Provider: null, Consumer: null, _defaultValue: null, _globalName: null };
+  a.Provider = { $$typeof: t, _context: a };
+  return a.Consumer = a;
+};
+react_production_min.createElement = M;
+react_production_min.createFactory = function(a) {
+  var b = M.bind(null, a);
+  b.type = a;
+  return b;
+};
+react_production_min.createRef = function() {
+  return { current: null };
+};
+react_production_min.forwardRef = function(a) {
+  return { $$typeof: v, render: a };
+};
+react_production_min.isValidElement = O;
+react_production_min.lazy = function(a) {
+  return { $$typeof: y, _payload: { _status: -1, _result: a }, _init: T };
+};
+react_production_min.memo = function(a, b) {
+  return { $$typeof: x, type: a, compare: void 0 === b ? null : b };
+};
+react_production_min.startTransition = function(a) {
+  var b = V.transition;
+  V.transition = {};
+  try {
+    a();
+  } finally {
+    V.transition = b;
+  }
+};
+react_production_min.unstable_act = X;
+react_production_min.useCallback = function(a, b) {
+  return U.current.useCallback(a, b);
+};
+react_production_min.useContext = function(a) {
+  return U.current.useContext(a);
+};
+react_production_min.useDebugValue = function() {
+};
+react_production_min.useDeferredValue = function(a) {
+  return U.current.useDeferredValue(a);
+};
+react_production_min.useEffect = function(a, b) {
+  return U.current.useEffect(a, b);
+};
+react_production_min.useId = function() {
+  return U.current.useId();
+};
+react_production_min.useImperativeHandle = function(a, b, e) {
+  return U.current.useImperativeHandle(a, b, e);
+};
+react_production_min.useInsertionEffect = function(a, b) {
+  return U.current.useInsertionEffect(a, b);
+};
+react_production_min.useLayoutEffect = function(a, b) {
+  return U.current.useLayoutEffect(a, b);
+};
+react_production_min.useMemo = function(a, b) {
+  return U.current.useMemo(a, b);
+};
+react_production_min.useReducer = function(a, b, e) {
+  return U.current.useReducer(a, b, e);
+};
+react_production_min.useRef = function(a) {
+  return U.current.useRef(a);
+};
+react_production_min.useState = function(a) {
+  return U.current.useState(a);
+};
+react_production_min.useSyncExternalStore = function(a, b, e) {
+  return U.current.useSyncExternalStore(a, b, e);
+};
+react_production_min.useTransition = function() {
+  return U.current.useTransition();
+};
+react_production_min.version = "18.3.1";
+{
+  react.exports = react_production_min;
+}
+var reactExports = react.exports;
+const index = /* @__PURE__ */ getDefaultExportFromCjs(reactExports);
+export {
+  getDefaultExportFromCjs as g,
+  index as i,
+  reactExports as r
+};

package/dist/assets/remoteEntry.js

@@ -0,0 +1,80 @@
+const currentImports = {};
+const exportSet = /* @__PURE__ */ new Set(["Module", "__esModule", "default", "_export_sfc"]);
+let moduleMap = {
+  "./Plugin": () => {
+    dynamicLoadingCss([], false, "./Plugin");
+    return __federation_import("http://127.0.0.1:5010/assets/__federation_expose_Plugin-WvTCD-o4.js").then((module) => Object.keys(module).every((item) => exportSet.has(item)) ? () => module.default : () => module);
+  }
+};
+const seen = {};
+const dynamicLoadingCss = (cssFilePaths, dontAppendStylesToHead, exposeItemName) => {
+  const metaUrl = import.meta.url;
+  if (typeof metaUrl === "undefined") {
+    console.warn('The remote style takes effect only when the build.target option in the vite.config.ts file is higher than that of "es2020".');
+    return;
+  }
+  const curUrl = metaUrl.substring(0, metaUrl.lastIndexOf("remoteEntry.js"));
+  const base = 'http://127.0.0.1:5010/';
+  'assets';
+  cssFilePaths.forEach((cssPath) => {
+    let href = "";
+    const baseUrl = base || curUrl;
+    if (baseUrl) {
+      const trimmer = {
+        trailing: (path) => path.endsWith("/") ? path.slice(0, -1) : path,
+        leading: (path) => path.startsWith("/") ? path.slice(1) : path
+      };
+      const isAbsoluteUrl = (url) => url.startsWith("http") || url.startsWith("//");
+      const cleanBaseUrl = trimmer.trailing(baseUrl);
+      const cleanCssPath = trimmer.leading(cssPath);
+      const cleanCurUrl = trimmer.trailing(curUrl);
+      if (isAbsoluteUrl(baseUrl)) {
+        href = [cleanBaseUrl, cleanCssPath].filter(Boolean).join("/");
+      } else {
+        if (cleanCurUrl.includes(cleanBaseUrl)) {
+          href = [cleanCurUrl, cleanCssPath].filter(Boolean).join("/");
+        } else {
+          href = [cleanCurUrl + cleanBaseUrl, cleanCssPath].filter(Boolean).join("/");
+        }
+      }
+    } else {
+      href = cssPath;
+    }
+    if (dontAppendStylesToHead) {
+      const key = "css__frubeala_ui__" + exposeItemName;
+      window[key] = window[key] || [];
+      window[key].push(href);
+      return;
+    }
+    if (href in seen) return;
+    seen[href] = true;
+    const element = document.createElement("link");
+    element.rel = "stylesheet";
+    element.href = href;
+    document.head.appendChild(element);
+  });
+};
+async function __federation_import(name) {
+  currentImports[name] ??= import(name);
+  return currentImports[name];
+}
+const get = (module) => {
+  if (!moduleMap[module]) throw new Error("Can not find remote module " + module);
+  return moduleMap[module]();
+};
+const init = (shareScope) => {
+  globalThis.__federation_shared__ = globalThis.__federation_shared__ || {};
+  Object.entries(shareScope).forEach(([key, value]) => {
+    for (const [versionKey, versionValue] of Object.entries(value)) {
+      const scope = versionValue.scope || "default";
+      globalThis.__federation_shared__[scope] = globalThis.__federation_shared__[scope] || {};
+      const shared = globalThis.__federation_shared__[scope];
+      (shared[key] = shared[key] || {})[versionKey] = versionValue;
+    }
+  });
+};
+export {
+  dynamicLoadingCss,
+  get,
+  init
+};

package/dist/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Frubeala UI Plugin</title>
+</head>
+
+<body>
+    <div id="root"></div>
+</body>
+
+</html>

package/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Frubeala UI Plugin</title>
+</head>
+
+<body>
+    <div id="root"></div>
+</body>
+
+</html>

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@decido/plugin-frubeala-ui",
+  "version": "1.0.0",
+  "description": "Frubeala Ui plugin for Decido OS",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "dependencies": {
+    "lucide-react": "^0.575.0",
+    "zustand": "4.5.2"
+  },
+  "devDependencies": {
+    "@originjs/vite-plugin-federation": "^1.4.1",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "typescript": "^5.0.0",
+    "vite": "^5.1.0"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "@decido/kernel-bridge": "1.0.0",
+    "@decido/shell": "1.0.0"
+  },
+  "license": "UNLICENSED",
+  "scripts": {
+    "dev": "pnpm run build && pnpm run preview",
+    "build": "vite build",
+    "preview": "vite preview --port 5010 --strictPort",
+    "lint": "eslint src --ext ts,tsx"
+  }
+}

package/src/index.ts

@@ -0,0 +1,27 @@
+import { MaciaPlugin } from '@decido/shell';
+import { MainWidget } from './widgets/MainWidget';
+
+const FrubealaUiPlugin: MaciaPlugin = {
+    id: 'decido-plugin-frubeala-ui',
+    name: 'Frubeala Ui',
+    version: '1.0.0',
+    description: 'Frubeala Ui plugin for Decido OS',
+
+    widgets: [
+        {
+            id: 'frubeala-ui-main',
+            pluginId: 'decido-plugin-frubeala-ui',
+            name: 'Frubeala Ui',
+            placement: 'panel',
+            component: MainWidget,
+        },
+    ],
+
+    intents: [],
+
+    onRegister: async () => {
+        console.log('[Frubeala Ui] Plugin registered ✓');
+    },
+};
+
+export default FrubealaUiPlugin;

package/src/manifest.ts

@@ -0,0 +1,25 @@
+import { MaciaPlugin, useShellStore } from '@decido/shell';
+import { MainWidget } from './widgets/MainWidget';
+
+export const FrubealaUiPlugin: MaciaPlugin = {
+    id: 'decido-plugin-frubeala-ui',
+    name: 'Frubeala Ui',
+    version: '1.0.0',
+    description: 'Frubeala Ui plugin for Decido OS',
+
+    widgets: [
+        {
+            id: 'frubeala-ui-main',
+            pluginId: 'decido-plugin-frubeala-ui',
+            name: 'Frubeala Ui',
+            placement: 'panel',
+            component: MainWidget,
+        },
+    ],
+
+    intents: [],
+
+    onRegister: async () => {
+        console.log('[Frubeala Ui] Plugin registered ✓');
+    },
+};

package/src/widgets/MainWidget.tsx

@@ -0,0 +1,187 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { kernel } from '@decido/kernel-bridge';
+import { Activity, Server, Network, Cpu, Database, Thermometer, ShieldAlert, Zap, RefreshCw } from 'lucide-react';
+
+interface MainWidgetProps {
+    context?: any;
+}
+
+export const MainWidget: React.FC<MainWidgetProps> = ({ context }) => {
+    const [systemStatus, setSystemStatus] = useState<any>(null);
+    const [networkState, setNetworkState] = useState<any>(null);
+    const [equipmentData, setEquipmentData] = useState<any>({});
+    const [loading, setLoading] = useState(true);
+    const [lastUpdated, setLastUpdated] = useState<Date | null>(null);
+
+    const fetchData = useCallback(async () => {
+        setLoading(true);
+        try {
+            const sysRes = await kernel.execute<any>('call_mcp_tool', {
+                serverName: 'frubeala-mcp',
+                toolName: 'get_system_status',
+                arguments: {}
+            });
+            if (sysRes && sysRes.content && sysRes.content.length > 0) {
+                setSystemStatus(JSON.parse(sysRes.content[0].text));
+            }
+
+            const netRes = await kernel.execute<any>('call_mcp_tool', {
+                serverName: 'frubeala-mcp',
+                toolName: 'check_network',
+                arguments: { interface: 'all' }
+            });
+            if (netRes && netRes.content && netRes.content.length > 0) {
+                setNetworkState(JSON.parse(netRes.content[0].text));
+            }
+
+            // Fetch a few known equipment states
+            const equipmentIds = ['EQ-101', 'EQ-204'];
+            const eqData: any = {};
+            for (const id of equipmentIds) {
+                const eqRes = await kernel.execute<any>('call_mcp_tool', {
+                    serverName: 'frubeala-mcp',
+                    toolName: 'get_equipment_state',
+                    arguments: { equipment_id: id }
+                });
+                if (eqRes && eqRes.content && eqRes.content.length > 0) {
+                    eqData[id] = JSON.parse(eqRes.content[0].text);
+                }
+            }
+            setEquipmentData(eqData);
+            setLastUpdated(new Date());
+        } catch (e) {
+            console.error("[Frubeala UI] Failed to fetch data via MCP:", e);
+        } finally {
+            setLoading(false);
+        }
+    }, []);
+
+    useEffect(() => {
+        fetchData();
+        const interval = setInterval(fetchData, 30000); // Auto refresh every 30s
+        return () => clearInterval(interval);
+    }, [fetchData]);
+
+    const renderCard = (title: string, icon: React.ReactNode, value: React.ReactNode, subtext?: string, statusColor: string = 'text-cyan-400', borderColor: string = 'border-cyan-500/20') => (
+        <div className={`bg-zinc-900/40 backdrop-blur-md border ${borderColor} rounded-xl p-5 flex flex-col relative overflow-hidden group`}>
+            <div className="absolute top-0 right-0 w-24 h-24 bg-gradient-to-br from-white/5 to-transparent rounded-bl-full pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity" />
+            <div className="flex items-center justify-between mb-4">
+                <span className="text-zinc-400 text-xs uppercase tracking-widest font-bold">{title}</span>
+                <div className={`p-2 rounded-lg bg-zinc-800/50 ${statusColor}`}>{icon}</div>
+            </div>
+            <div className="text-2xl font-black text-white tracking-tight mb-1">{value}</div>
+            {subtext && <div className="text-zinc-500 text-xs">{subtext}</div>}
+        </div>
+    );
+
+    return (
+        <div className="w-full h-full p-6 bg-[#09090b] text-white flex flex-col gap-6 font-['Inter',system-ui,sans-serif] overflow-y-auto">
+            {/* Header */}
+            <div className="flex justify-between items-end border-b border-white/5 pb-4">
+                <div>
+                    <h1 className="text-3xl font-black tracking-tighter bg-gradient-to-r from-emerald-400 via-cyan-400 to-blue-500 bg-clip-text text-transparent flex items-center gap-3">
+                        <Activity className="w-8 h-8 text-emerald-400" />
+                        Frubeala Control Tower
+                    </h1>
+                    <p className="text-zinc-500 text-sm mt-1">Real-time Industrial IoT Telemetry & Agent Operations</p>
+                </div>
+                <div className="flex items-center gap-4">
+                    {lastUpdated && (
+                        <div className="text-xs text-zinc-500 font-mono">
+                            Last Sync: {lastUpdated.toLocaleTimeString()}
+                        </div>
+                    )}
+                    <button
+                        onClick={fetchData}
+                        disabled={loading}
+                        className="p-2 bg-white/5 hover:bg-white/10 border border-white/10 rounded-lg text-zinc-300 transition-all flex items-center gap-2"
+                    >
+                        <RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
+                    </button>
+                    <div className={`px-3 py-1.5 rounded-full text-xs font-bold uppercase tracking-wider flex items-center gap-2 border ${systemStatus?.status === 'OK' ? 'bg-emerald-500/10 text-emerald-400 border-emerald-500/30' : 'bg-amber-500/10 text-amber-400 border-amber-500/30'}`}>
+                        <div className={`w-2 h-2 rounded-full ${systemStatus?.status === 'OK' ? 'bg-emerald-400 animate-pulse' : 'bg-amber-400'}`} />
+                        {systemStatus?.status || 'Unknown'}
+                    </div>
+                </div>
+            </div>
+
+            {loading && !systemStatus && (
+                <div className="flex-1 flex items-center justify-center flex-col gap-4">
+                    <div className="w-8 h-8 border-4 border-cyan-500/30 border-t-cyan-400 rounded-full animate-spin" />
+                    <p className="text-cyan-400 text-sm font-mono tracking-widest animate-pulse">ESTABLISHING SECURE MCP LINK...</p>
+                </div>
+            )}
+
+            {systemStatus && (
+                <>
+                    {/* System Metrics */}
+                    <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+                        {renderCard('CPU Load', <Cpu className="w-5 h-5" />, `${systemStatus.cpu_usage_percent}%`, 'Compute footprint')}
+                        {renderCard('Memory Usage', <Database className="w-5 h-5" />, `${systemStatus.memory_usage_percent}%`, 'Volatile footprint')}
+                        {renderCard('Active Connections', <Network className="w-5 h-5" />, networkState?.connections || '0', 'Socket streams', 'text-blue-400')}
+                        {renderCard('Uptime', <Server className="w-5 h-5" />, `${Math.floor((systemStatus.uptime_seconds || 0) / 3600)}h`, 'Continuous operation', 'text-purple-400')}
+                    </div>
+
+                    {/* Equipment Status */}
+                    <div className="mt-4">
+                        <h3 className="text-xs font-bold text-zinc-400 uppercase tracking-widest mb-4 flex items-center gap-2">
+                            <Server className="w-4 h-4" />
+                            Industrial Equipment Status
+                        </h3>
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                            {Object.entries(equipmentData).length === 0 ? (
+                                <div className="col-span-2 p-8 border border-white/5 rounded-xl border-dashed flex flex-col items-center justify-center text-zinc-500">
+                                    <p>No equipment telemetry available via MCP.</p>
+                                </div>
+                            ) : (
+                                Object.entries(equipmentData).map(([id, data]: [string, any]) => (
+                                    <div key={id} className="bg-zinc-900/60 border border-white/5 p-4 rounded-xl">
+                                        <div className="flex justify-between items-center mb-6">
+                                            <div className="flex items-center gap-3">
+                                                <div className="w-10 h-10 rounded-lg bg-indigo-500/10 border border-indigo-500/20 flex items-center justify-center text-indigo-400">
+                                                    <Zap className="w-5 h-5" />
+                                                </div>
+                                                <div>
+                                                    <h4 className="font-bold text-white text-lg tracking-tight">{data.equipment_id}</h4>
+                                                    <p className="text-zinc-500 text-xs">Lathe Station</p>
+                                                </div>
+                                            </div>
+                                            <div className={`px-2.5 py-1 rounded text-[10px] font-bold uppercase tracking-widest ${data.state === 'running' ? 'bg-emerald-500/20 text-emerald-400' : 'bg-red-500/20 text-red-400'}`}>
+                                                {data.state}
+                                            </div>
+                                        </div>
+
+                                        <div className="grid grid-cols-2 gap-3 mb-4">
+                                            <div className="bg-black/40 rounded-lg p-3">
+                                                <div className="flex items-center gap-2 text-zinc-500 mb-1">
+                                                    <Thermometer className="w-3.5 h-3.5" />
+                                                    <span className="text-[10px] uppercase font-bold tracking-wider">Temperature</span>
+                                                </div>
+                                                <div className="text-lg font-mono text-amber-400">{data.temperature}°C</div>
+                                            </div>
+                                            <div className="bg-black/40 rounded-lg p-3">
+                                                <div className="flex items-center gap-2 text-zinc-500 mb-1">
+                                                    <Activity className="w-3.5 h-3.5" />
+                                                    <span className="text-[10px] uppercase font-bold tracking-wider">Vibration</span>
+                                                </div>
+                                                <div className="text-lg font-mono text-cyan-400">{data.vibration} <span className="text-xs text-zinc-600">mm/s</span></div>
+                                            </div>
+                                        </div>
+
+                                        {/* Error Alert if any */}
+                                        {data.state === 'error' && (
+                                            <div className="mt-3 p-3 rounded-lg bg-red-500/10 border border-red-500/20 flex gap-3 items-start">
+                                                <ShieldAlert className="w-4 h-4 text-red-400 shrink-0 mt-0.5" />
+                                                <p className="text-xs text-red-300">Anomalous reading detected. Recommend preventive maintenance cycle immediately.</p>
+                                            </div>
+                                        )}
+                                    </div>
+                                ))
+                            )}
+                        </div>
+                    </div>
+                </>
+            )}
+        </div>
+    );
+};

package/tsconfig.json

@@ -0,0 +1,14 @@
+{
+    "extends": "../../../tsconfig.base.json",
+    "compilerOptions": {
+        "baseUrl": ".",
+        "paths": {
+            "~/*": [
+                "./src/*"
+            ]
+        }
+    },
+    "include": [
+        "src"
+    ]
+}