@aaqu/fromcubes-portal-react 0.1.0-alpha.2 → 0.1.0-alpha.21

package/LICENSE

@@ -175,7 +175,7 @@
 
    END OF TERMS AND CONDITIONS
 
-   Copyright 2026 aaqu
+   Copyright 2026 Mazur Albert Fromcubes
 
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.

package/README.md

@@ -1,120 +1,195 @@
 # @aaqu/fromcubes-portal-react
 
-React portal node for Node-RED. Server-side JSX transpilation via esbuild. Tailwind CSS 4. Zero runtime compilation in browser.
+> **⚠️ Alpha Module** — This project is in early development. Expect breaking changes. Test on a clean Node-RED instance.
 
-## How it works
+A Node-RED node that turns any `/fromcubes/<sub-path>` URL into a React page. Write JSX in the editor, deploy, open the URL — your component talks to the flow over WebSocket. No build step, no browser compiler. All portal pages are served under the hardcoded `/fromcubes/` prefix so every node cleanly coexists under one URL tree.
 
-```
-┌─ Deploy time (Node-RED server) ─────────────────────────┐
-│                                                          │
-│  JSX (editor)  ──►  esbuild transpile  ──►  cached JS   │
-│                     (hash-keyed cache)                   │
-│                                                          │
-│  Unchanged code on redeploy = cache hit, 0ms             │
-│  Changed code = retranspile, ~5ms                        │
-└──────────────────────────────────────────────────────────┘
-
-┌─ Runtime (browser) ─────────────────────────────────────┐
-│                                                          │
-│  GET /endpoint  ──►  HTML + pre-compiled JS              │
-│                      react-19.production.min.js          │
-│                      Tailwind CSS (CDN)                  │
-│                      NO Babel, NO Sucrase, NO compiler   │
-│                                                          │
-│  WebSocket /endpoint/_ws  ◄──►  Node-RED msg I/O        │
-└──────────────────────────────────────────────────────────┘
-```
+For internals, plugin authoring, and the deploy pipeline see [README-DEV.md](./README-DEV.md).
+
+[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/L4L01UOFRG)
 
 ## Install
 
 ```bash
 cd ~/.node-red
-npm install /path/to/fromcubes-portal-react
+npm install @aaqu/fromcubes-portal-react@alpha
 # restart Node-RED
 ```
 
-Dependencies install automatically. No build step needed.
+That's it. No build step. Any npm packages you list in the node config (e.g. `d3, three`) are installed automatically on deploy.
+
+## Your first portal
+
+1. Drop a **portal-react** node onto a flow.
+2. Set **Sub-path** to e.g. `hello` (the node will serve at `/fromcubes/hello`; the `/fromcubes/` prefix is fixed).
+3. Open the code editor and paste:
+   ```jsx
+   function App() {
+     const { data, send } = useNodeRed();
+     return (
+       <div className="p-4">
+         <p>From flow: {JSON.stringify(data)}</p>
+         <button
+           className="px-3 py-1 bg-blue-500 text-white rounded"
+           onClick={() => send({ clicked: Date.now() })}
+         >
+           click me
+         </button>
+       </div>
+     );
+   }
+   ```
+4. Deploy. Open `http://localhost:1880/fromcubes/hello`.
+5. Wire an **inject** node into the portal-react input → see `data` update live. Wire its output → see button clicks arrive in your flow.
+
+## The `useNodeRed()` hook
+
+Everything your component needs from the flow lives in one hook:
 
-## npm scripts
+```jsx
+const {
+  data,          // last broadcast msg.payload from input wire (reactive)
+  send,          // send(payload, topic?) — emit msg on output wire
+  user,          // portal user object (when Portal Auth is enabled), or null
+  portalClient,  // unique session/tab ID assigned by server on connect
+} = useNodeRed();
+```
 
-| Script | Purpose |
-|---|---|
-| `npm run build` | Rebuild vendored React bundle (`nodes/vendor/react-19.production.min.js`) |
-| `npm start` | Start Node-RED |
+### Recovery on connect
+
+A freshly-connected client receives the **last broadcast payload** the server has cached for this endpoint, sent as a distinct `recovery` frame. By default it's seeded straight into `data`, so the first render of a new tab shows the most recent value instead of waiting for the next broadcast — same idea as dashboard2's `lastMsg`.
+
+Opt out per page:
+
+```jsx
+// data stays undefined until a fresh broadcast arrives — no recovery seed
+const { data } = useNodeRed({ ignoreRecovery: true });
+```
 
-## Nodes
+The opt-out is page-wide — the strictest call wins. If any component on the page asks to ignore recovery, recovery is dropped for all of them.
 
-### portal-react
+## Node configuration
 
 | Field | Purpose |
 |---|---|
-| Endpoint | HTTP path, e.g. `/dashboard` |
-| Title | Browser tab title |
-| Input Schema | JSON — documents expected `msg.payload` shape |
-| Output Schema | JSON — documents emitted `msg.payload` shape |
+| Sub-path | Part after `/fromcubes/`, e.g. `page1` → served at `/fromcubes/page1`. Required. Nesting allowed (`team/alpha`). Reserved: `public`, `_ws`. |
+| Page Title | Browser tab title |
+| npm Packages | Comma-separated, e.g. `d3, three, @react-three/fiber` |
+| Portal Auth | Enable portal user header extraction (see Multi-user) |
 | Head HTML | Extra `<head>` tags (CDN, fonts, CSS) |
 | Code Editor | Monaco with JSX — must define `<App />` |
 
-### fc-component-library (config node)
-
-Shared component store. Each component has name, code, input/output field definitions.
-Components are auto-injected into every portal-react page at transpile time.
+There is also a config node, **fc-portal-component**, that lets you define reusable React components once and reference them by name from any portal-react node. Referenced components (and their transitive dependencies) are injected at transpile time, so unused ones add nothing to the bundle.
 
 ## Editor features
 
-- **Monaco editor** with full JSX support and `useNodeRed()` type declarations
-- **Tailwind CSS autocompletion** inside `className="..."` strings (~19k utility classes)
-- **JSX tag completion** — type tag name, Tab to expand (open+close and self-closing variants)
+- **Monaco** with full JSX support and `useNodeRed()` type declarations
+- **Tailwind CSS autocompletion** inside `className="..."` (~19k utility classes)
+- **JSX tag completion** — type tag name, Tab to expand
 - **Self-close collapse** — type `/` inside empty `<tag></tag>` to convert to `<tag />`
 - **Component completion** — registry components + any PascalCase word
+- **Portal Assets sidebar** — file manager for static assets (GLB, textures, fonts…)
 
-## Hook API
+## Multi-user / Multi-tenancy
 
-```jsx
-function App() {
-  const { data, send } = useNodeRed();
-  // data  = last msg.payload from input wire (reactive)
-  // send(payload, topic?) = emit msg on output wire
-  return <div className="p-4 text-lg">{JSON.stringify(data)}</div>;
-}
+Portal-react has three routing modes — broadcast, user-cast (every tab of one user), and unicast (one specific tab). Everything works without authentication too — user-cast just degrades gracefully when there is no user.
+
+### Identity
+
+| Identifier | Scope | Persistence | Source |
+|---|---|---|---|
+| `portalClient` | Single WS session (one tab) | Lost on reconnect — server assigns a new UUID | Generated server-side on connect |
+| `userId` / `username` | All sessions of a user | Survives reconnect and new tabs | `x-portal-user-*` headers (when **Portal Auth** is enabled) |
+
+**Portal Auth header contract** — injected by an upstream reverse proxy such as `aaqu-portal-auth`:
+
+| Header | Field |
+|---|---|
+| `x-portal-user-id` | `userId` |
+| `x-portal-user-name` | `userName` |
+| `x-portal-user-username` | `username` |
+| `x-portal-user-email` | `email` |
+| `x-portal-user-role` | `role` |
+| `x-portal-user-groups` | `groups` (JSON array) |
+
+If Portal Auth is disabled or headers are absent, `user` is `null` and user-scoped features are silently skipped — broadcast and per-session features still work.
+
+### Routing modes
+
+Every inbound `msg` arrives in your flow with `msg._client` already filled in by the server. The flow then decides where the response should go by setting (or clearing) `msg._client` on the outgoing `msg`:
+
+```javascript
+// BROADCAST — everyone connected to this endpoint
+delete msg._client;
+return msg;
+
+// UNICAST — only the tab that sent the original msg (echo)
+// Keep msg._client as-is; it already carries portalClient.
+return msg;
+
+// UNICAST — a specific tab whose ID you know
+msg._client = { portalClient: "a1b2c3d4-..." };
+return msg;
+
+// USER-CAST — every tab of a specific user (even ones that just opened)
+msg._client = { userId: "alice" };
+return msg;
 ```
 
-## Deploy lifecycle
+**Anti-spoof guarantee.** On every inbound message the server overwrites `msg._client` from scratch using the socket's own `portalClient` and the user data captured at connect. A browser cannot forge `_client` — whatever it puts there is discarded.
 
-What happens on each deploy:
+**User-cast uses an O(1) index** so a message to `{userId: "alice"}` reaches every tab of Alice with a single lookup, not a scan.
 
-1. Node `close` fires on existing instance
-2. All WebSocket clients receive close code `1001` ("node redeployed")
-3. Browser auto-reconnects with exponential backoff (500ms → 1s → 2s → 4s → 8s cap)
-4. Stale HTTP route and WS upgrade handler removed
-5. New instance transpiles JSX:
-   - Content hash computed
-   - Cache hit → reuse (0ms)
-   - Cache miss → esbuild transpile (~5ms)
-6. New HTTP route and WS handler registered
-7. Reconnecting clients get fresh page + current `lastPayload`
+### Without a user (anonymous mode)
 
-Rapid deploys (user clicking deploy repeatedly) are safe:
-- `isClosing` flag prevents accepting new WS connections during teardown
-- Upgrade handlers are tracked per node ID, old ones removed before new ones register
-- No orphan listeners accumulate on `RED.server`
+If **Portal Auth** is off (or no proxy headers arrive), everything still works:
 
-Transpile errors:
-- Node status shows red "transpile error"
-- Endpoint serves an error page with the error message
-- Fix code, redeploy — cache invalidates because hash changes
+- `broadcast` and `portalClient` unicast: unchanged
+- `user`-cast: gracefully skipped (no `userId` to target)
+- `useNodeRed().user` is `null`
 
-## Browser payload
+Same model as dashboard 2 — no auth required to use the node.
 
-| Asset | Size (gzip) |
-|---|---|
-| react-19.production.min.js | ~45 KB |
-| Your transpiled JS | ~1-5 KB |
-| Tailwind CSS (CDN) | cached |
-| WebSocket bridge | <1 KB |
+## Portal Assets
+
+Static files (3D models, textures, fonts, etc.) can be uploaded and served from a public endpoint.
 
-No Babel, no Sucrase client, no Vue, no Vuetify, no Socket.IO.
+- Open the **Portal Assets** tab in the Node-RED sidebar
+- Upload files via button or drag & drop
+- Organize in folders (create, rename, move between folders)
+- Copy public path with one click — use in JSX: `/fromcubes/public/models/scene.glb`
+- Download and delete files from the context menu
+
+All uploads require Node-RED admin authentication. Files are served publicly at `/fromcubes/public/`.
+
+Limits: 100 MB per file, 500 MB total, 1000 files max.
+
+## Examples
+
+Import `001-shared-components-flow.json` first — it provides shared UI components (Page, Header, Stat, Button, ValueBadge) used by the others.
+
+| Flow | npm packages | Description |
+|---|---|---|
+| `001-shared-components-flow.json` | — | Shared components: Page, Header, Stat, Button, ValueBadge |
+| `002-sensor-portal-flow.json` | — | Sensor gauge with live WebSocket data |
+| `003-chart-portal-flow.json` | `chart.js/auto` | Live updating Chart.js charts |
+| `004-d3-poland-flow.json` | `d3` | Interactive SVG map of Poland (simulated data) |
+| `005-threejs-portal-flow.json` | `three` | 3D scene with Three.js |
+| `006-pixi-portal-flow.json` | `pixi.js`, `@pixi/react` | Clickable bunny sprites with PixiJS |
+| `007-webgpu-tsl-flow.json` | `three` | WebGPU renderer + TSL animated shaders |
+
+## Troubleshooting
+
+| Symptom | Likely cause |
+|---|---|
+| Red status "transpile error" + error page on the endpoint | JSX syntax error — fix code, redeploy (cache invalidates automatically) |
+| Red status "legacy endpoint" on deploy | Flow was saved before the `/fromcubes/` prefix became hardcoded. Open the node, set **Sub-path**, redeploy. Automatic migration is disabled to avoid silent URL changes. |
+| Red status "bad sub-path" | Sub-path is empty or violates the rules (no leading `/`, no whitespace, no `..`, segments must start alphanumerically, `public`/`_ws` reserved). |
+| Page loads but `data` stays `undefined` | No input wire has fired yet — broadcast something into the node |
+| `user` is `null` even with Portal Auth on | Upstream proxy is not injecting `x-portal-user-*` headers |
+| New tab shows the previous broadcast value | Expected — that's the recovery frame. Use `useNodeRed({ ignoreRecovery: true })` to opt out |
+| Page reloads on every deploy | Expected for code changes; clients soft-reconnect with exponential backoff |
 
 ## License
 
-MIT
+Apache-2.0

package/examples/001-shared-components-flow.json

@@ -0,0 +1,68 @@
+[
+  {
+    "id": "fc-shared-flow",
+    "type": "tab",
+    "label": "Shared Components",
+    "disabled": false
+  },
+  {
+    "id": "fc-shared-comp-header",
+    "type": "fc-portal-component",
+    "z": "fc-shared-flow",
+    "compName": "Header",
+    "compCode": "function Header({ title = 'fromcubes', subtitle = '', children }) {\n  return (\n    <div className=\"flex items-center justify-between px-6 py-4\">\n      <div>\n        <h1 className=\"text-xl font-semibold text-zinc-100 tracking-tight\">{title}</h1>\n        {subtitle && <p className=\"text-xs text-zinc-600 mt-0.5\">{subtitle}</p>}\n      </div>\n      <div className=\"flex items-center gap-2\">\n        {children || (\n          <>\n            <span className=\"inline-block w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse\" />\n            <span className=\"text-xs text-zinc-500\">streaming</span>\n          </>\n        )}\n      </div>\n    </div>\n  );\n}",
+    "compInputs": "title,subtitle,children",
+    "compOutputs": "",
+    "x": 160,
+    "y": 160,
+    "wires": []
+  },
+  {
+    "id": "fc-shared-comp-stat",
+    "type": "fc-portal-component",
+    "z": "fc-shared-flow",
+    "compName": "Stat",
+    "compCode": "function Stat({ label, children }) {\n  return (\n    <div className=\"flex items-center gap-3\">\n      <span className=\"text-xs text-zinc-500\">{label}</span>\n      {children}\n    </div>\n  );\n}",
+    "compInputs": "label,children",
+    "compOutputs": "",
+    "x": 360,
+    "y": 160,
+    "wires": []
+  },
+  {
+    "id": "fc-shared-comp-button",
+    "type": "fc-portal-component",
+    "z": "fc-shared-flow",
+    "compName": "Button",
+    "compCode": "function Button({ onClick, children, variant = 'primary', className = '' }) {\n  const base = 'px-4 py-2 rounded-lg font-medium transition-colors';\n  const variants = {\n    primary: 'bg-blue-600 text-white hover:bg-blue-500',\n    secondary: 'bg-zinc-700 text-zinc-200 hover:bg-zinc-600',\n    danger: 'bg-red-600 text-white hover:bg-red-500'\n  };\n  return (\n    <button\n      className={`${base} ${variants[variant] || variants.primary} ${className}`}\n      onClick={onClick}\n    >{children}</button>\n  );\n}",
+    "compInputs": "onClick,children,variant,className",
+    "compOutputs": "",
+    "x": 560,
+    "y": 160,
+    "wires": []
+  },
+  {
+    "id": "fc-shared-comp-valuebadge",
+    "type": "fc-portal-component",
+    "z": "fc-shared-flow",
+    "compName": "ValueBadge",
+    "compCode": "function ValueBadge({ label, value, className = '' }) {\n  if (value == null) return null;\n  return (\n    <span className={`text-zinc-600 text-xs ${className}`}>\n      {label && <>{label}: </>}{value}\n    </span>\n  );\n}",
+    "compInputs": "label,value,className",
+    "compOutputs": "",
+    "x": 760,
+    "y": 160,
+    "wires": []
+  },
+  {
+    "id": "fc-shared-comp-page",
+    "type": "fc-portal-component",
+    "z": "fc-shared-flow",
+    "compName": "Page",
+    "compCode": "function Page({ children, className = '' }) {\n  return (\n    <div className={`min-h-screen bg-zinc-950 text-zinc-100 flex flex-col ${className}`}>\n      {children}\n    </div>\n  );\n}",
+    "compInputs": "children,className",
+    "compOutputs": "",
+    "x": 160,
+    "y": 240,
+    "wires": []
+  }
+]

package/examples/{sensor-portal-flow.json → 002-sensor-portal-flow.json}

@@ -2,7 +2,7 @@
   {
     "id": "fc-demo-flow",
     "type": "tab",
-    "label": "Portal React Demo",
+    "label": "Sensor Portal",
     "disabled": false
   },
   {
@@ -47,12 +47,12 @@
     "type": "portal-react",
     "z": "fc-demo-flow",
     "name": "Sensor Portal",
-    "endpoint": "/sensors",
+    "subPath": "sensors",
     "pageTitle": "Sensors",
     "customHead": "",
     "inputSchema": "[{\"name\":\"temp\",\"type\":\"number\"},{\"name\":\"humidity\",\"type\":\"number\"},{\"name\":\"pressure\",\"type\":\"number\"},{\"name\":\"ts\",\"type\":\"number\"}]",
     "outputSchema": "[{\"name\":\"action\",\"type\":\"string\"}]",
-    "componentCode": "function App() {\n  const { data, send } = useNodeRed();\n  const s = data || { temp: 0, humidity: 0, pressure: 0 };\n\n  return (\n    <div className=\"min-h-screen bg-zinc-950 p-8 max-w-3xl mx-auto\">\n      <h1 className=\"text-2xl font-light text-cyan-400 mb-6\">Sensor Portal</h1>\n      <div className=\"flex gap-6 flex-wrap\">\n        <Gauge value={s.temp} min={-10} max={50} label=\"Temperature\" unit=\"°C\" />\n        <Gauge value={s.humidity} min={0} max={100} label=\"Humidity\" unit=\"%\" />\n        <Gauge value={s.pressure} min={950} max={1050} label=\"Pressure\" unit=\"hPa\" />\n      </div>\n      <div className=\"mt-6 flex gap-3 items-center\">\n        <button\n          className=\"px-4 py-2 rounded-lg bg-blue-600 text-white hover:bg-blue-500 transition-colors\"\n          onClick={() => send({ action: 'refresh' })}\n        >Refresh</button>\n        {s.ts && <span className=\"text-zinc-600 text-xs\">Last: {new Date(s.ts).toLocaleTimeString()}</span>}\n      </div>\n    </div>\n  );\n}",
+    "componentCode": "function App() {\n  const { data, send } = useNodeRed();\n  const s = data || { temp: 0, humidity: 0, pressure: 0 };\n\n  return (\n    <Page>\n      <Header title=\"Sensor Portal\" subtitle=\"live sensor data\" />\n      <div className=\"flex-1 flex flex-col items-center justify-center p-8\">\n        <div className=\"flex gap-10 flex-wrap justify-center\">\n          <Gauge value={s.temp} min={-10} max={50} label=\"Temperature\" unit=\"°C\" />\n          <Gauge value={s.humidity} min={0} max={100} label=\"Humidity\" unit=\"%\" />\n          <Gauge value={s.pressure} min={950} max={1050} label=\"Pressure\" unit=\"hPa\" />\n        </div>\n        <div className=\"mt-10 flex gap-3 items-center\">\n          <Button onClick={() => send({ action: 'refresh' })}>Refresh</Button>\n          <ValueBadge label=\"Last\" value={s.ts ? new Date(s.ts).toLocaleTimeString() : null} />\n        </div>\n      </div>\n    </Page>\n  );\n}",
     "x": 560,
     "y": 160,
     "wires": [["fc-debug"]]

package/examples/003-chart-portal-flow.json

@@ -0,0 +1,93 @@
+[
+  {
+    "id": "fc-chart-flow",
+    "type": "tab",
+    "label": "Chart.js Demo",
+    "disabled": false
+  },
+  {
+    "id": "fc-chart-linechart-comp",
+    "type": "fc-portal-component",
+    "z": "fc-chart-flow",
+    "name": "LineChart",
+    "compName": "LineChart",
+    "compInputs": "data,labelKey,datasets,title,height",
+    "compOutputs": "",
+    "compCode": "import ChartJS from 'chart.js/auto';\n\nfunction LineChart({ data = [], labelKey = 'time', datasets = [], title = '', height = 'h-64' }) {\n  const canvasRef = useRef(null);\n  const chartRef = useRef(null);\n\n  useEffect(() => {\n    if (!canvasRef.current || data.length === 0) return;\n\n    if (chartRef.current) {\n      const chart = chartRef.current;\n      chart.data.labels = data.map(p => p[labelKey]);\n      datasets.forEach((ds, i) => {\n        chart.data.datasets[i].data = data.map(p => p[ds.key]);\n      });\n      chart.update('none');\n      return;\n    }\n\n\n    chartRef.current = new ChartJS(canvasRef.current, {\n      type: 'line',\n      data: {\n        labels: data.map(p => p[labelKey]),\n        datasets: datasets.map(ds => ({\n          label: ds.label,\n          data: data.map(p => p[ds.key]),\n          borderColor: ds.color,\n          backgroundColor: ds.color + '18',\n          tension: 0.35,\n          fill: true,\n          pointRadius: 2,\n          borderWidth: 2\n        }))\n      },\n      options: {\n        responsive: true,\n        maintainAspectRatio: false,\n        animation: false,\n        plugins: {\n          legend: { labels: { color: '#a1a1aa', usePointStyle: true, pointStyle: 'circle', padding: 16 } }\n        },\n        scales: {\n          x: { ticks: { color: '#52525b', font: { size: 10 } }, grid: { color: '#27272a' } },\n          y: { ticks: { color: '#52525b', font: { size: 10 } }, grid: { color: '#27272a' } }\n        }\n      }\n    });\n\n    return () => {\n      if (chartRef.current) {\n        chartRef.current.destroy();\n        chartRef.current = null;\n      }\n    };\n  }, [data, datasets]);\n\n  return (\n    <div className=\"bg-zinc-900/50 rounded-xl border border-zinc-800/50 p-5\">\n      {title && <h3 className=\"text-sm font-medium text-zinc-300 mb-3\">{title}</h3>}\n      <div className={height}>\n        <canvas ref={canvasRef} />\n      </div>\n    </div>\n  );\n}",
+    "x": 380,
+    "y": 80,
+    "wires": []
+  },
+  {
+    "id": "fc-chart-inject",
+    "type": "inject",
+    "z": "fc-chart-flow",
+    "name": "Sensor tick",
+    "props": [
+      {
+        "p": "payload"
+      }
+    ],
+    "repeat": "2",
+    "payload": "{}",
+    "payloadType": "json",
+    "x": 160,
+    "y": 160,
+    "wires": [
+      [
+        "fc-chart-func"
+      ]
+    ]
+  },
+  {
+    "id": "fc-chart-func",
+    "type": "function",
+    "z": "fc-chart-flow",
+    "name": "Random data point",
+    "func": "var history = flow.get('chartHistory') || [];\nvar now = new Date();\nhistory.push({\n  time: now.toLocaleTimeString(),\n  temp: +(18 + Math.random() * 12).toFixed(1),\n  humidity: Math.round(35 + Math.random() * 40),\n  cpu: Math.round(15 + Math.random() * 60),\n  memory: Math.round(40 + Math.random() * 45)\n});\nif (history.length > 20) history.shift();\nflow.set('chartHistory', history);\nmsg.payload = history;\nreturn msg;",
+    "outputs": 1,
+    "x": 380,
+    "y": 160,
+    "wires": [
+      [
+        "fc-chart-portal"
+      ]
+    ]
+  },
+  {
+    "id": "fc-chart-portal",
+    "type": "portal-react",
+    "z": "fc-chart-flow",
+    "name": "Chart Portal",
+    "subPath": "chart",
+    "pageTitle": "fromcubes charts",
+    "customHead": "",
+    "portalAuth": false,
+    "showWsStatus": false,
+    "libs": [
+      {
+        "module": "chart.js/auto",
+        "var": "Chart"
+      }
+    ],
+    "componentCode": "function App() {\n  const { data } = useNodeRed();\n  const [tab, setTab] = useState(0);\n  const points = data || [];\n\n  const tabs = [\n    { label: 'Overview', icon: '\\u25a6' },\n    { label: 'Environment', icon: '\\u25cb' },\n    { label: 'System', icon: '\\u25a1' }\n  ];\n\n  return (\n    <Page>\n      <div className=\"max-w-5xl mx-auto px-6 py-8\">\n\n        <Header title=\"fromcubes charts\" subtitle={points.length + ' data points \\u2022 live'} />\n\n        <div className=\"flex gap-1 mb-6 bg-zinc-900/50 rounded-lg p-1 w-fit\">\n          {tabs.map((t, i) => (\n            <button\n              key={i}\n              onClick={() => setTab(i)}\n              className={`px-4 py-2 rounded-md text-sm transition-all ${\n                tab === i\n                  ? 'bg-zinc-800 text-zinc-100 shadow-sm'\n                  : 'text-zinc-500 hover:text-zinc-300'\n              }`}\n            >{t.icon} {t.label}</button>\n          ))}\n        </div>\n\n        {tab === 0 && (\n          <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\n            <LineChart\n              data={points}\n              title=\"Temperature\"\n              datasets={[{ key: 'temp', label: 'Temp (\\u00b0C)', color: '#22d3ee' }]}\n            />\n            <LineChart\n              data={points}\n              title=\"Humidity\"\n              datasets={[{ key: 'humidity', label: 'Humidity (%)', color: '#a78bfa' }]}\n            />\n            <LineChart\n              data={points}\n              title=\"CPU Usage\"\n              datasets={[{ key: 'cpu', label: 'CPU (%)', color: '#f97316' }]}\n            />\n            <LineChart\n              data={points}\n              title=\"Memory\"\n              datasets={[{ key: 'memory', label: 'Memory (%)', color: '#34d399' }]}\n            />\n          </div>\n        )}\n\n        {tab === 1 && (\n          <div className=\"space-y-4\">\n            <LineChart\n              data={points}\n              title=\"Temperature & Humidity\"\n              height=\"h-80\"\n              datasets={[\n                { key: 'temp', label: 'Temp (\\u00b0C)', color: '#22d3ee' },\n                { key: 'humidity', label: 'Humidity (%)', color: '#a78bfa' }\n              ]}\n            />\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"bg-zinc-900/50 rounded-xl border border-zinc-800/50 p-5\">\n                <div className=\"text-xs text-zinc-500 uppercase tracking-wider\">Current Temp</div>\n                <div className=\"text-3xl font-bold text-cyan-400 mt-2\">\n                  {points.length > 0 ? points[points.length - 1].temp : '--'}\n                  <span className=\"text-sm font-normal text-zinc-500 ml-1\">\\u00b0C</span>\n                </div>\n              </div>\n              <div className=\"bg-zinc-900/50 rounded-xl border border-zinc-800/50 p-5\">\n                <div className=\"text-xs text-zinc-500 uppercase tracking-wider\">Current Humidity</div>\n                <div className=\"text-3xl font-bold text-violet-400 mt-2\">\n                  {points.length > 0 ? points[points.length - 1].humidity : '--'}\n                  <span className=\"text-sm font-normal text-zinc-500 ml-1\">%</span>\n                </div>\n              </div>\n            </div>\n          </div>\n        )}\n\n        {tab === 2 && (\n          <div className=\"space-y-4\">\n            <LineChart\n              data={points}\n              title=\"CPU & Memory\"\n              height=\"h-80\"\n              datasets={[\n                { key: 'cpu', label: 'CPU (%)', color: '#f97316' },\n                { key: 'memory', label: 'Memory (%)', color: '#34d399' }\n              ]}\n            />\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"bg-zinc-900/50 rounded-xl border border-zinc-800/50 p-5\">\n                <div className=\"text-xs text-zinc-500 uppercase tracking-wider\">Current CPU</div>\n                <div className=\"text-3xl font-bold text-orange-400 mt-2\">\n                  {points.length > 0 ? points[points.length - 1].cpu : '--'}\n                  <span className=\"text-sm font-normal text-zinc-500 ml-1\">%</span>\n                </div>\n              </div>\n              <div className=\"bg-zinc-900/50 rounded-xl border border-zinc-800/50 p-5\">\n                <div className=\"text-xs text-zinc-500 uppercase tracking-wider\">Current Memory</div>\n                <div className=\"text-3xl font-bold text-emerald-400 mt-2\">\n                  {points.length > 0 ? points[points.length - 1].memory : '--'}\n                  <span className=\"text-sm font-normal text-zinc-500 ml-1\">%</span>\n                </div>\n              </div>\n            </div>\n          </div>\n        )}\n\n      </div>\n    </Page>\n  );\n}",
+    "x": 600,
+    "y": 160,
+    "wires": [
+      [
+        "fc-chart-debug"
+      ]
+    ]
+  },
+  {
+    "id": "fc-chart-debug",
+    "type": "debug",
+    "z": "fc-chart-flow",
+    "name": "Chart output",
+    "active": true,
+    "tosidebar": true,
+    "x": 790,
+    "y": 160,
+    "wires": []
+  }
+]