@nekzus/liop-studio 1.0.0-alpha.2 → 1.0.0-alpha.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nekzus/liop-studio",
-  "version": "1.0.0-alpha.2",
+  "version": "1.0.0-alpha.20",
   "description": "LIOP Sovereign Studio — Developer studio, mesh scanner, and logic-on-origin inspector for LIOP & MCP.",
   "author": "Nekzus Solutions and contributors",
   "license": "Apache-2.0",
@@ -58,17 +58,17 @@
   },
   "dependencies": {
     "@hono/node-server": "2.1.1",
-    "@nekzus/liop": "2.4.0-alpha.9",
+    "@nekzus/liop": "2.4.0-alpha.24",
     "commander": "^13.1.0",
-    "hono": "4.13.5",
+    "hono": "4.13.8",
     "picocolors": "^1.1.1",
-    "zod": "4.4.3"
+    "zod": "4.6.5"
   },
   "devDependencies": {
-    "@biomejs/biome": "2.5.10",
+    "@biomejs/biome": "2.5.14",
     "@types/node": "26.4.0",
     "tsup": "8.5.1",
-    "tsx": "4.23.12",
+    "tsx": "4.23.13",
     "typescript": "6.0.3",
     "vitest": "4.1.11"
   },

package/ui/README.md

@@ -1,73 +1,59 @@
-# React + TypeScript + Vite
+# LIOP Sovereign Studio: Web UI Architecture
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+The frontend of **LIOP Studio** is a decoupled Single Page Application (SPA) designed to inspect, test, and inject sandboxed WASI micro-modules across multi-tier LIOP nodes and standard Model Context Protocol (MCP) servers.
 
-Currently, two official plugins are available:
+---
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+## Architectural Principles
 
-## React Compiler
+1. **Deterministic State Synchronization**: Template selection, capability targeting, and network endpoint routing maintain strict bidirectional synchronization. Selecting a capability switches target enclaves automatically when required.
+2. **Realtime Computational Telemetry**: Observes in-situ fuel consumption (quantized to 100-unit buckets per NIST SP 800-53), BPE token counting (`o200k_base`), wire egress reduction, and cryptographic proofs (ZK-Receipt HMAC-SHA256, ML-KEM-768, AES-256-GCM).
+3. **High-Contrast Semantic Theming**: Built with semantic CSS custom properties toggled atomically via `data-theme` attributes (`obsidian` OLED black and `slate` navy/slate), guaranteeing contrast across low-light development terminals.
+4. **Resilient Local Persistence**: Modified WASI logic payloads persist per-template in browser local storage (`liop_studio_custom_code_{templateId}`), preventing accidental data loss during multi-enclave testing sessions.
 
-The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+---
 
-## Expanding the ESLint configuration
+## Component Taxonomy
 
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+```
+src/
+├── components/
+│   ├── StudioHeader.tsx         # Live cluster health badge, dynamic tier counter, theme switcher
+│   ├── TargetConnectionBar.tsx  # Multi-transport target switcher (stdio, http, grpc, mesh)
+│   ├── SessionTelemetryBar.tsx  # Cumulative session metrics (total calls, tokens in/out, uptime)
+│   ├── ServerScanPanel.tsx      # Tier 1-3 enclave inventory and capability browser
+│   ├── NodeCard.tsx             # Interactive node card with RTT latency and exposed tools
+│   ├── LogicEditor.tsx          # Dual-mode execution harness: WASI Logic injection vs MCP Form
+│   ├── CodeEditor.tsx           # CodeMirror 6 editor with JavaScript syntax, line numbers, and fold gutter
+│   ├── DynamicToolForm.tsx      # Reactive form generator driven by tool JSON Schemas
+│   ├── EnvironmentExplorer.tsx  # Schema inspector for origin runtime datasets (`env.records`)
+│   ├── ResultsConsole.tsx       # 5-tab output console with execution timeline visualizer
+│   └── results/
+│       ├── OutputTab.tsx        # Structured JSON and archetype-specific visual results
+│       ├── DebugTab.tsx         # Detailed SSE execution step traces and security audit
+│       ├── ExportTab.tsx        # Integration code generators (TypeScript SDK, Python, cURL, gRPC)
+│       ├── TelemetryTab.tsx     # Context reduction, fuel usage, and cryptographic receipts
+│       └── HistoryTab.tsx       # In-memory execution history inspector (up to 20 runs)
+```
 
-```js
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
+---
 
-      // Remove tseslint.configs.recommended and replace with this
-      tseslint.configs.recommendedTypeChecked,
-      // Alternatively, use this for stricter rules
-      tseslint.configs.strictTypeChecked,
-      // Optionally, add this for stylistic rules
-      tseslint.configs.stylisticTypeChecked,
+## Core Hooks
 
-      // Other configs...
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
-```
+- **`useStudioNetwork`**: Manages active target connections (`POST /api/connect`), cluster inventory polling (`GET /api/nodes`), tool catalogs (`GET /api/tools`), and session-level telemetry (`GET /api/telemetry`).
+- **`useStudioExecution`**: Streams real-time execution steps from `POST /api/execute` via Server-Sent Events (SSE), provides `AbortController` cancellation (`cancelExecution`), and maintains the session execution history.
+
+---
+
+## Development & Build Commands
 
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+```bash
+# Start Vite development server with API proxy to port 16000
+pnpm --filter @nekzus/liop-studio-ui dev
 
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
+# Compile TypeScript and bundle production assets to ui/dist/
+pnpm --filter @nekzus/liop-studio-ui build
 
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-      // Enable lint rules for React
-      reactX.configs['recommended-typescript'],
-      // Enable lint rules for React DOM
-      reactDom.configs.recommended,
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
+# Preview production build locally
+pnpm --filter @nekzus/liop-studio-ui preview
 ```