chore: bump version to 2.35.0 and update CHANGELOG

Conceived by Romuald Członkowski - www.aiadvisors.pl/en Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
feat: UI/UX redesign for MCP Apps - 3 new apps + enhanced existing (#583 )
2026-02-09 06:43:08 +00:00 · 2026-02-09 11:12:59 +08:00 · 2026-02-09 03:36:27 +01:00 · 2026-02-08 03:23:16 +01:00 · 2026-02-08 02:08:50 +01:00 · 2026-02-07 16:25:27 +01:00
52 changed files with 4925 additions and 15 deletions
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -283,8 +283,8 @@ jobs:
      - name: Install dependencies
        run: npm ci
      
-      - name: Build project
-        run: npm run build
+      - name: Build project (server + UI apps)
+        run: npm run build:all

      # Database is already built and committed during development
      # Rebuilding here causes segfault due to memory pressure (exit code 139)
@@ -322,8 +322,8 @@ jobs:
      - name: Install dependencies
        run: npm ci
      
-      - name: Build project
-        run: npm run build
+      - name: Build project (server + UI apps)
+        run: npm run build:all

      # Database is already built and committed during development
      - name: Verify database exists
@@ -347,6 +347,8 @@ jobs:
          # Copy necessary files
          cp -r dist $PUBLISH_DIR/
          cp -r data $PUBLISH_DIR/
+          mkdir -p $PUBLISH_DIR/ui-apps
+          cp -r ui-apps/dist $PUBLISH_DIR/ui-apps/
          cp README.md $PUBLISH_DIR/
          cp LICENSE $PUBLISH_DIR/
          cp .env.example $PUBLISH_DIR/
@@ -377,7 +379,7 @@ jobs:
          pkg.license = 'MIT';
          pkg.bugs = { url: 'https://github.com/czlonkowski/n8n-mcp/issues' };
          pkg.homepage = 'https://github.com/czlonkowski/n8n-mcp#readme';
-          pkg.files = ['dist/**/*', 'data/nodes.db', '.env.example', 'README.md', 'LICENSE'];
+          pkg.files = ['dist/**/*', 'ui-apps/dist/**/*', 'data/nodes.db', '.env.example', 'README.md', 'LICENSE'];
          delete pkg.private;
          require('fs').writeFileSync('./package.json', JSON.stringify(pkg, null, 2));
          "
--- a/.gitignore
+++ b/.gitignore
@@ -138,5 +138,9 @@ n8n-mcp-wrapper.sh
 # MCP configuration files
 .mcp.json

+# UI Apps build output
+ui-apps/dist/
+ui-apps/node_modules/
+
 # Telemetry configuration (user-specific)
 ~/.n8n-mcp/
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,108 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

 ## [Unreleased]

+## [2.35.0] - 2026-02-09
+
+### Added
+
+- **3 new MCP Apps**: workflow-list (compact table with status/tags), execution-history (status summary bar + execution table), health-dashboard (connection status, versions, performance metrics)
+- **Enhanced operation-result**: operation-aware headers (create/update/delete/test/deploy), detail panels with workflow metadata, copy-to-clipboard for IDs/URLs, autofix diff viewer
+- **CopyButton shared component**: reusable clipboard button with visual feedback
+- **Local preview harness** (`ui-apps/preview.html`): test all 5 apps with mock data, dark/light theme toggle, JSON-RPC protocol simulation
+- **Expanded shared types**: TypeScript types for workflow-list, execution-history, and health-dashboard data
+
+### Fixed
+
+- **React hooks violation**: Fixed `useMemo` called after early returns in `execution-history/App.tsx` and `validation-summary/App.tsx`, causing React error #310 ("Rendered more hooks than during the previous render") and blank iframes
+- **JSON-RPC catch-all handler**: Preview harness responds to unknown SDK requests to prevent hangs
+
+Conceived by Romuald Czlonkowski - https://www.aiadvisors.pl/en
+
+## [2.34.5] - 2026-02-08
+
+### Fixed
+
+- **MCP Apps: Fix blank UI and wrong status badge in Claude**: Rewrote `useToolData` hook to use the official `useApp` hook from `@modelcontextprotocol/ext-apps/react` for proper lifecycle management. Updated UI types and components to match actual server response format (`success: boolean` instead of `status: string`, nested `data` object for workflow details). Validation summary now handles both direct and wrapped (`n8n_validate_workflow`) response shapes.
+
+Conceived by Romuald Czlonkowski - https://www.aiadvisors.pl/en
+
+## [2.34.3] - 2026-02-07
+
+### Fixed
+
+- **MCP Apps: Use correct MIME type for ext-apps spec**: Changed resource MIME type from `text/html` to `text/html;profile=mcp-app` (the `RESOURCE_MIME_TYPE` constant from `@modelcontextprotocol/ext-apps`). Without this profile parameter, Claude Desktop/web fails to recognize resources as MCP Apps and shows "Failed to load MCP App: the resource may exceed the 5 MB size limit."
+
+Conceived by Romuald Czlonkowski - https://www.aiadvisors.pl/en
+
+## [2.34.2] - 2026-02-07
+
+### Fixed
+
+- **CI: UI apps missing from npm package**: Release pipeline only ran `npm run build` (TypeScript), so `ui-apps/dist/` was never built and excluded from published packages
+  - Changed build step to `npm run build:all` in `build-and-verify` and `publish-npm` jobs
+  - Added `ui-apps/dist/` to npm publish staging directory
+  - Added `ui-apps/dist/**/*` to published package files list
+
+Conceived by Romuald Czlonkowski - https://www.aiadvisors.pl/en
+
+## [2.34.1] - 2026-02-07
+
+### Changed
+
+- **MCP Apps: Align with official ext-apps spec** for Claude Desktop/web compatibility
+  - URI scheme changed from `n8n-mcp://ui/{id}` to `ui://n8n-mcp/{id}` per MCP ext-apps spec
+  - `_meta.ui.resourceUri` now set on tool definitions (`tools/list`) instead of tool call responses
+  - `UIMetadata.ui.app` renamed to `UIMetadata.ui.resourceUri`
+  - Added `_meta` field to `ToolDefinition` type
+  - Added `UIAppRegistry.injectToolMeta()` method for enriching tool definitions
+  - UI apps now use `@modelcontextprotocol/ext-apps` `App` class instead of `window.__MCP_DATA__`
+  - Updated `ReadResource` URI parser to match new `ui://` scheme
+
+Conceived by Romuald Czlonkowski - https://www.aiadvisors.pl/en
+
+## [2.34.0] - 2026-02-07
+
+### Added
+
+- **MCP Apps**: Rich HTML UIs rendered by MCP hosts alongside tool results via `_meta.ui` and the MCP resources protocol
+  - Server-side UI module (`src/mcp/ui/`) with tool-to-UI mapping and `_meta.ui` injection
+  - `UIAppRegistry` static class for loading and serving self-contained HTML apps
+  - `UI_APP_CONFIGS` mapping tools to their corresponding UI apps
+
+- **Operation Result UI**: Visual summary for workflow operation tools
+  - Status badge, operation type, workflow details card
+  - Expandable sections for nodes added, modified, and removed
+  - Mapped to: `n8n_create_workflow`, `n8n_update_full_workflow`, `n8n_update_partial_workflow`, `n8n_delete_workflow`, `n8n_test_workflow`, `n8n_autofix_workflow`, `n8n_deploy_template`
+
+- **Validation Summary UI**: Visual summary for validation tools
+  - Valid/invalid badge with error and warning counts
+  - Expandable error list with type, property, message, and fix
+  - Expandable warning list and suggestions
+  - Mapped to: `validate_node`, `validate_workflow`, `n8n_validate_workflow`
+
+- **React + Vite Build Pipeline** (`ui-apps/`):
+  - React 19, Vite 6, vite-plugin-singlefile for self-contained HTML output
+  - Shared component library: Card, Badge, Expandable
+  - `useToolData` hook for reading data from `window.__MCP_DATA__` or embedded JSON
+  - n8n-branded dark theme with CSS custom properties
+  - Per-app builds via `APP_NAME` environment variable
+
+- **MCP Resources Protocol**: Server now exposes `resources` capability
+  - `ListResources` handler returns available UI apps
+  - `ReadResource` handler serves self-contained HTML via `n8n-mcp://ui/{id}` URIs
+
+- **New Scripts**:
+  - `build:ui`: Build UI apps (`cd ui-apps && npm install && npm run build`)
+  - `build:all`: Build UI apps then server (`npm run build:ui && npm run build`)
+
+### Changed
+
+- **MCP Server**: Added `resources: {}` to server capabilities alongside existing `tools: {}`
+- **Tool Responses**: Tools with matching UI apps now include `_meta.ui.app` URI pointing to their visual representation
+- **Graceful Degradation**: Server starts and operates normally without `ui-apps/dist/`; UI metadata is only injected when HTML is available
+
+Conceived by Romuald Czlonkowski - https://www.aiadvisors.pl/en
+
 ## [2.33.6] - 2026-02-06

 ### Changed
--- a/dist/index.d.ts
+++ b/dist/index.d.ts
@@ -5,6 +5,8 @@ export { N8NDocumentationMCPServer } from './mcp/server';
 export type { InstanceContext } from './types/instance-context';
 export { validateInstanceContext, isInstanceContext } from './types/instance-context';
 export type { SessionState } from './types/session-state';
+export type { UIAppConfig, UIMetadata } from './mcp/ui/types';
+export { UI_APP_CONFIGS } from './mcp/ui/app-configs';
 export type { Tool, CallToolResult, ListToolsResult } from '@modelcontextprotocol/sdk/types.js';
 import N8NMCPEngine from './mcp-engine';
 export default N8NMCPEngine;
--- a/dist/index.d.ts.map
+++ b/dist/index.d.ts.map
@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AACzE,OAAO,EAAE,uBAAuB,EAAE,MAAM,8BAA8B,CAAC;AACvE,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAE,yBAAyB,EAAE,MAAM,cAAc,CAAC;AAGzD,YAAY,EACV,eAAe,EAChB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EACL,uBAAuB,EACvB,iBAAiB,EAClB,MAAM,0BAA0B,CAAC;AAClC,YAAY,EACV,YAAY,EACb,MAAM,uBAAuB,CAAC;AAG/B,YAAY,EACV,IAAI,EACJ,cAAc,EACd,eAAe,EAChB,MAAM,oCAAoC,CAAC;AAG5C,OAAO,YAAY,MAAM,cAAc,CAAC;AACxC,eAAe,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AACzE,OAAO,EAAE,uBAAuB,EAAE,MAAM,8BAA8B,CAAC;AACvE,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAE,yBAAyB,EAAE,MAAM,cAAc,CAAC;AAGzD,YAAY,EACV,eAAe,EAChB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EACL,uBAAuB,EACvB,iBAAiB,EAClB,MAAM,0BAA0B,CAAC;AAClC,YAAY,EACV,YAAY,EACb,MAAM,uBAAuB,CAAC;AAG/B,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAGtD,YAAY,EACV,IAAI,EACJ,cAAc,EACd,eAAe,EAChB,MAAM,oCAAoC,CAAC;AAG5C,OAAO,YAAY,MAAM,cAAc,CAAC;AACxC,eAAe,YAAY,CAAC"}
--- a/dist/index.js
+++ b/dist/index.js
@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isInstanceContext = exports.validateInstanceContext = exports.N8NDocumentationMCPServer = exports.ConsoleManager = exports.SingleSessionHTTPServer = exports.N8NMCPEngine = void 0;
+exports.UI_APP_CONFIGS = exports.isInstanceContext = exports.validateInstanceContext = exports.N8NDocumentationMCPServer = exports.ConsoleManager = exports.SingleSessionHTTPServer = exports.N8NMCPEngine = void 0;
 var mcp_engine_1 = require("./mcp-engine");
 Object.defineProperty(exports, "N8NMCPEngine", { enumerable: true, get: function () { return mcp_engine_1.N8NMCPEngine; } });
 var http_server_single_session_1 = require("./http-server-single-session");
@@ -15,6 +15,8 @@ Object.defineProperty(exports, "N8NDocumentationMCPServer", { enumerable: true,
 var instance_context_1 = require("./types/instance-context");
 Object.defineProperty(exports, "validateInstanceContext", { enumerable: true, get: function () { return instance_context_1.validateInstanceContext; } });
 Object.defineProperty(exports, "isInstanceContext", { enumerable: true, get: function () { return instance_context_1.isInstanceContext; } });
+var app_configs_1 = require("./mcp/ui/app-configs");
+Object.defineProperty(exports, "UI_APP_CONFIGS", { enumerable: true, get: function () { return app_configs_1.UI_APP_CONFIGS; } });
 const mcp_engine_2 = __importDefault(require("./mcp-engine"));
 exports.default = mcp_engine_2.default;
 //# sourceMappingURL=index.js.map
--- a/dist/index.js.map
+++ b/dist/index.js.map
@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;AAOA,2CAAyE;AAAhE,0GAAA,YAAY,OAAA;AACrB,2EAAuE;AAA9D,qIAAA,uBAAuB,OAAA;AAChC,2DAAyD;AAAhD,iHAAA,cAAc,OAAA;AACvB,uCAAyD;AAAhD,mHAAA,yBAAyB,OAAA;AAMlC,6DAGkC;AAFhC,2HAAA,uBAAuB,OAAA;AACvB,qHAAA,iBAAiB,OAAA;AAcnB,8DAAwC;AACxC,kBAAe,oBAAY,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;AAOA,2CAAyE;AAAhE,0GAAA,YAAY,OAAA;AACrB,2EAAuE;AAA9D,qIAAA,uBAAuB,OAAA;AAChC,2DAAyD;AAAhD,iHAAA,cAAc,OAAA;AACvB,uCAAyD;AAAhD,mHAAA,yBAAyB,OAAA;AAMlC,6DAGkC;AAFhC,2HAAA,uBAAuB,OAAA;AACvB,qHAAA,iBAAiB,OAAA;AAQnB,oDAAsD;AAA7C,6GAAA,cAAc,OAAA;AAUvB,8DAAwC;AACxC,kBAAe,oBAAY,CAAC"}
--- a/dist/mcp/server.d.ts.map
+++ b/dist/mcp/server.d.ts.map
@@ -1 +1 @@
-{"version":3,"file":"server.d.ts","sourceRoot":"","sources":["../../src/mcp/server.ts"],"names":[],"mappings":"AAuCA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAE5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAmGnE,qBAAa,yBAAyB;IACpC,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,EAAE,CAAgC;IAC1C,OAAO,CAAC,UAAU,CAA+B;IACjD,OAAO,CAAC,eAAe,CAAgC;IACvD,OAAO,CAAC,WAAW,CAAgB;IACnC,OAAO,CAAC,KAAK,CAAqB;IAClC,OAAO,CAAC,UAAU,CAAa;IAC/B,OAAO,CAAC,eAAe,CAAC,CAAkB;IAC1C,OAAO,CAAC,YAAY,CAAuB;IAC3C,OAAO,CAAC,qBAAqB,CAAsB;IACnD,OAAO,CAAC,WAAW,CAAiC;IACpD,OAAO,CAAC,kBAAkB,CAA4B;IACtD,OAAO,CAAC,iBAAiB,CAAkB;IAC3C,OAAO,CAAC,aAAa,CAAoC;IACzD,OAAO,CAAC,UAAU,CAAkB;gBAExB,eAAe,CAAC,EAAE,eAAe,EAAE,WAAW,CAAC,EAAE,gBAAgB;IAqGvE,KAAK,IAAI,OAAO,CAAC,IAAI,CAAC;YA+Cd,kBAAkB;YAiDlB,wBAAwB;IA0BtC,OAAO,CAAC,kBAAkB;YA6CZ,iBAAiB;IAa/B,OAAO,CAAC,eAAe,CAAkB;YAE3B,sBAAsB;IAgDpC,OAAO,CAAC,gBAAgB;IAqCxB,OAAO,CAAC,aAAa;IAoTrB,OAAO,CAAC,wBAAwB;IAoFhC,OAAO,CAAC,kBAAkB;IAqE1B,OAAO,CAAC,uBAAuB;IAwB/B,OAAO,CAAC,qBAAqB;YAoTf,SAAS;YA2DT,WAAW;YAkFX,WAAW;YA0CX,cAAc;YA8Md,gBAAgB;IAqD9B,OAAO,CAAC,mBAAmB;IAwE3B,OAAO,CAAC,eAAe;YAsBT,eAAe;IA2L7B,OAAO,CAAC,kBAAkB;IAQ1B,OAAO,CAAC,uBAAuB;IA0D/B,OAAO,CAAC,iBAAiB;YAqFX,WAAW;YAgCX,oBAAoB;IAuFlC,OAAO,CAAC,aAAa;YAQP,qBAAqB;YAwDrB,iBAAiB;YAiKjB,OAAO;YAgDP,cAAc;YAwFd,iBAAiB;IAqC/B,OAAO,CAAC,iBAAiB;IA0BzB,OAAO,CAAC,iBAAiB;IA0BzB,OAAO,CAAC,eAAe;IAwCvB,OAAO,CAAC,kBAAkB;IAiC1B,OAAO,CAAC,aAAa;IAoCrB,OAAO,CAAC,0BAA0B;IAgClC,OAAO,CAAC,4BAA4B;YAKtB,oBAAoB;IAsDlC,OAAO,CAAC,gBAAgB;YAiBV,SAAS;YA6CT,kBAAkB;YAqElB,uBAAuB;YAsDvB,iBAAiB;IAqE/B,OAAO,CAAC,qBAAqB;IA8C7B,OAAO,CAAC,uBAAuB;IA4D/B,OAAO,CAAC,wBAAwB;IAkChC,OAAO,CAAC,iBAAiB;YAoDX,mBAAmB;YAoEnB,qBAAqB;IAS7B,OAAO,CAAC,SAAS,EAAE,GAAG,GAAG,OAAO,CAAC,IAAI,CAAC;YAS9B,aAAa;YAcb,iBAAiB;YAoBjB,WAAW;YAwBX,eAAe;YAqBf,mBAAmB;YAwBnB,yBAAyB;IA4CvC,OAAO,CAAC,kBAAkB;YAiBZ,gBAAgB;YA6HhB,2BAA2B;YAiE3B,2BAA2B;IAyEnC,GAAG,IAAI,OAAO,CAAC,IAAI,CAAC;IA0BpB,QAAQ,IAAI,OAAO,CAAC,IAAI,CAAC;CAgEhC"}
+{"version":3,"file":"server.d.ts","sourceRoot":"","sources":["../../src/mcp/server.ts"],"names":[],"mappings":"AA0CA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAE5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAmGnE,qBAAa,yBAAyB;IACpC,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,EAAE,CAAgC;IAC1C,OAAO,CAAC,UAAU,CAA+B;IACjD,OAAO,CAAC,eAAe,CAAgC;IACvD,OAAO,CAAC,WAAW,CAAgB;IACnC,OAAO,CAAC,KAAK,CAAqB;IAClC,OAAO,CAAC,UAAU,CAAa;IAC/B,OAAO,CAAC,eAAe,CAAC,CAAkB;IAC1C,OAAO,CAAC,YAAY,CAAuB;IAC3C,OAAO,CAAC,qBAAqB,CAAsB;IACnD,OAAO,CAAC,WAAW,CAAiC;IACpD,OAAO,CAAC,kBAAkB,CAA4B;IACtD,OAAO,CAAC,iBAAiB,CAAkB;IAC3C,OAAO,CAAC,aAAa,CAAoC;IACzD,OAAO,CAAC,UAAU,CAAkB;gBAExB,eAAe,CAAC,EAAE,eAAe,EAAE,WAAW,CAAC,EAAE,gBAAgB;IAuGvE,KAAK,IAAI,OAAO,CAAC,IAAI,CAAC;YA+Cd,kBAAkB;YAiDlB,wBAAwB;IA0BtC,OAAO,CAAC,kBAAkB;YA6CZ,iBAAiB;IAa/B,OAAO,CAAC,eAAe,CAAkB;YAE3B,sBAAsB;IAgDpC,OAAO,CAAC,gBAAgB;IAqCxB,OAAO,CAAC,aAAa;IA8VrB,OAAO,CAAC,wBAAwB;IAoFhC,OAAO,CAAC,kBAAkB;IAqE1B,OAAO,CAAC,uBAAuB;IAwB/B,OAAO,CAAC,qBAAqB;YAoTf,SAAS;YA2DT,WAAW;YAkFX,WAAW;YA0CX,cAAc;YA8Md,gBAAgB;IAqD9B,OAAO,CAAC,mBAAmB;IAwE3B,OAAO,CAAC,eAAe;YAsBT,eAAe;IA2L7B,OAAO,CAAC,kBAAkB;IAQ1B,OAAO,CAAC,uBAAuB;IA0D/B,OAAO,CAAC,iBAAiB;YAqFX,WAAW;YAgCX,oBAAoB;IAuFlC,OAAO,CAAC,aAAa;YAQP,qBAAqB;YAwDrB,iBAAiB;YAiKjB,OAAO;YAgDP,cAAc;YAwFd,iBAAiB;IAqC/B,OAAO,CAAC,iBAAiB;IA0BzB,OAAO,CAAC,iBAAiB;IA0BzB,OAAO,CAAC,eAAe;IAwCvB,OAAO,CAAC,kBAAkB;IAiC1B,OAAO,CAAC,aAAa;IAoCrB,OAAO,CAAC,0BAA0B;IAgClC,OAAO,CAAC,4BAA4B;YAKtB,oBAAoB;IAsDlC,OAAO,CAAC,gBAAgB;YAiBV,SAAS;YA6CT,kBAAkB;YAqElB,uBAAuB;YAsDvB,iBAAiB;IAqE/B,OAAO,CAAC,qBAAqB;IA8C7B,OAAO,CAAC,uBAAuB;IA4D/B,OAAO,CAAC,wBAAwB;IAkChC,OAAO,CAAC,iBAAiB;YAoDX,mBAAmB;YAoEnB,qBAAqB;IAS7B,OAAO,CAAC,SAAS,EAAE,GAAG,GAAG,OAAO,CAAC,IAAI,CAAC;YAS9B,aAAa;YAcb,iBAAiB;YAoBjB,WAAW;YAwBX,eAAe;YAqBf,mBAAmB;YAwBnB,yBAAyB;IA4CvC,OAAO,CAAC,kBAAkB;YAiBZ,gBAAgB;YA6HhB,2BAA2B;YAiE3B,2BAA2B;IAyEnC,GAAG,IAAI,OAAO,CAAC,IAAI,CAAC;IA0BpB,QAAQ,IAAI,OAAO,CAAC,IAAI,CAAC;CAgEhC"}
--- a/dist/mcp/server.js
+++ b/dist/mcp/server.js
@@ -43,6 +43,7 @@ const types_js_1 = require("@modelcontextprotocol/sdk/types.js");
 const fs_1 = require("fs");
 const path_1 = __importDefault(require("path"));
 const tools_1 = require("./tools");
+const ui_1 = require("./ui");
 const tools_n8n_manager_1 = require("./tools-n8n-manager");
 const tools_n8n_friendly_1 = require("./tools-n8n-friendly");
 const workflow_examples_1 = require("./workflow-examples");
@@ -148,8 +149,10 @@ class N8NDocumentationMCPServer {
        }, {
            capabilities: {
                tools: {},
+                resources: {},
            },
        });
+        ui_1.UIAppRegistry.load();
        this.setupHandlers();
    }
    async close() {
@@ -368,6 +371,7 @@ class N8NDocumentationMCPServer {
                protocolVersion: negotiationResult.version,
                capabilities: {
                    tools: {},
+                    resources: {},
                },
                serverInfo: {
                    name: 'n8n-documentation-mcp',
@@ -423,6 +427,7 @@ class N8NDocumentationMCPServer {
                    description: tool.description
                });
            });
+            ui_1.UIAppRegistry.injectToolMeta(tools);
            return { tools };
        });
        this.server.setRequestHandler(types_js_1.CallToolRequestSchema, async (request) => {
@@ -562,6 +567,39 @@ class N8NDocumentationMCPServer {
                };
            }
        });
+        this.server.setRequestHandler(types_js_1.ListResourcesRequestSchema, async () => {
+            const apps = ui_1.UIAppRegistry.getAllApps();
+            return {
+                resources: apps
+                    .filter(app => app.html !== null)
+                    .map(app => ({
+                    uri: app.config.uri,
+                    name: app.config.displayName,
+                    description: app.config.description,
+                    mimeType: app.config.mimeType,
+                })),
+            };
+        });
+        this.server.setRequestHandler(types_js_1.ReadResourceRequestSchema, async (request) => {
+            const uri = request.params.uri;
+            const match = uri.match(/^ui:\/\/n8n-mcp\/(.+)$/);
+            if (!match) {
+                throw new Error(`Unknown resource URI: ${uri}`);
+            }
+            const app = ui_1.UIAppRegistry.getAppById(match[1]);
+            if (!app || !app.html) {
+                throw new Error(`UI app not found or not built: ${match[1]}`);
+            }
+            return {
+                contents: [
+                    {
+                        uri: app.config.uri,
+                        mimeType: app.config.mimeType,
+                        text: app.html,
+                    },
+                ],
+            };
+        });
    }
    sanitizeValidationResult(result, toolName) {
        if (!result || typeof result !== 'object') {
--- a/dist/mcp/server.js.map
+++ b/dist/mcp/server.js.map
--- a/dist/types/index.d.ts
+++ b/dist/types/index.d.ts
@@ -30,6 +30,11 @@ export interface ToolDefinition {
        additionalProperties?: boolean | Record<string, any>;
    };
    annotations?: ToolAnnotations;
+    _meta?: {
+        ui?: {
+            resourceUri?: string;
+        };
+    };
 }
 export interface ResourceDefinition {
    uri: string;
--- a/dist/types/index.d.ts.map
+++ b/dist/types/index.d.ts.map
@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AACA,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAEhC,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAMD,MAAM,WAAW,eAAe;IAE9B,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE;QACX,IAAI,EAAE,MAAM,CAAC;QACb,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;QAChC,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;QACpB,oBAAoB,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;KACtD,CAAC;IACF,YAAY,CAAC,EAAE;QACb,IAAI,EAAE,MAAM,CAAC;QACb,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;QAChC,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;QACpB,oBAAoB,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;KACtD,CAAC;IAEF,WAAW,CAAC,EAAE,eAAe,CAAC;CAC/B;AAED,MAAM,WAAW,kBAAkB;IACjC,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,KAAK,CAAC;QAChB,IAAI,EAAE,MAAM,CAAC;QACb,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;KACpB,CAAC,CAAC;CACJ"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AACA,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAEhC,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAMD,MAAM,WAAW,eAAe;IAE9B,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE;QACX,IAAI,EAAE,MAAM,CAAC;QACb,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;QAChC,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;QACpB,oBAAoB,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;KACtD,CAAC;IACF,YAAY,CAAC,EAAE;QACb,IAAI,EAAE,MAAM,CAAC;QACb,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;QAChC,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;QACpB,oBAAoB,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;KACtD,CAAC;IAEF,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9B,KAAK,CAAC,EAAE;QACN,EAAE,CAAC,EAAE;YACH,WAAW,CAAC,EAAE,MAAM,CAAC;SACtB,CAAC;KACH,CAAC;CACH;AAED,MAAM,WAAW,kBAAkB;IACjC,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,KAAK,CAAC;QAChB,IAAI,EAAE,MAAM,CAAC;QACb,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;KACpB,CAAC,CAAC;CACJ"}
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "n8n-mcp",
-  "version": "2.33.6",
+  "version": "2.35.0",
  "description": "Integration between n8n workflow automation and Model Context Protocol (MCP)",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
@@ -16,6 +16,8 @@
  },
  "scripts": {
    "build": "tsc -p tsconfig.build.json",
+    "build:ui": "cd ui-apps && npm install && npm run build",
+    "build:all": "npm run build:ui && npm run build",
    "rebuild": "node dist/scripts/rebuild.js",
    "rebuild:optimized": "node dist/scripts/rebuild-optimized.js",
    "validate": "node dist/scripts/validate.js",
@@ -123,6 +125,7 @@
  "homepage": "https://github.com/czlonkowski/n8n-mcp#readme",
  "files": [
    "dist/**/*",
+    "ui-apps/dist/**/*",
    "data/nodes.db",
    ".env.example",
    "README.md",
--- a/src/index.ts
+++ b/src/index.ts
@@ -22,6 +22,10 @@ export type {
  SessionState
 } from './types/session-state';

+// UI module exports
+export type { UIAppConfig, UIMetadata } from './mcp/ui/types';
+export { UI_APP_CONFIGS } from './mcp/ui/app-configs';
+
 // Re-export MCP SDK types for convenience
 export type {
  Tool,
--- a/src/mcp/server.ts
+++ b/src/mcp/server.ts
@@ -1,13 +1,16 @@
 import { Server } from '@modelcontextprotocol/sdk/server/index.js';
 import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
-import { 
-  CallToolRequestSchema, 
+import {
+  CallToolRequestSchema,
  ListToolsRequestSchema,
  InitializeRequestSchema,
+  ListResourcesRequestSchema,
+  ReadResourceRequestSchema,
 } from '@modelcontextprotocol/sdk/types.js';
 import { existsSync, promises as fs } from 'fs';
 import path from 'path';
 import { n8nDocumentationToolsFinal } from './tools';
+import { UIAppRegistry } from './ui';
 import { n8nManagementTools } from './tools-n8n-manager';
 import { makeToolsN8nFriendly } from './tools-n8n-friendly';
 import { getWorkflowExampleString } from './workflow-examples';
@@ -235,10 +238,12 @@ export class N8NDocumentationMCPServer {
      {
        capabilities: {
          tools: {},
+          resources: {},
        },
      }
    );

+    UIAppRegistry.load();
    this.setupHandlers();
  }

@@ -563,6 +568,7 @@ export class N8NDocumentationMCPServer {
        protocolVersion: negotiationResult.version,
        capabilities: {
          tools: {},
+          resources: {},
        },
        serverInfo: {
          name: 'n8n-documentation-mcp',
@@ -645,6 +651,7 @@ export class N8NDocumentationMCPServer {
        });
      });
      
+      UIAppRegistry.injectToolMeta(tools);
      return { tools };
    });

@@ -774,7 +781,7 @@ export class N8NDocumentationMCPServer {
        if (name.startsWith('validate_') && structuredContent !== null) {
          mcpResponse.structuredContent = structuredContent;
        }
-        
+
        return mcpResponse;
      } catch (error) {
        logger.error(`Error executing tool ${name}`, error);
@@ -826,6 +833,46 @@ export class N8NDocumentationMCPServer {
        };
      }
    });
+
+    // Handle ListResources for UI apps
+    this.server.setRequestHandler(ListResourcesRequestSchema, async () => {
+      const apps = UIAppRegistry.getAllApps();
+      return {
+        resources: apps
+          .filter(app => app.html !== null)
+          .map(app => ({
+            uri: app.config.uri,
+            name: app.config.displayName,
+            description: app.config.description,
+            mimeType: app.config.mimeType,
+          })),
+      };
+    });
+
+    // Handle ReadResource for UI apps
+    this.server.setRequestHandler(ReadResourceRequestSchema, async (request) => {
+      const uri = request.params.uri;
+      // Parse ui://n8n-mcp/{id} pattern
+      const match = uri.match(/^ui:\/\/n8n-mcp\/(.+)$/);
+      if (!match) {
+        throw new Error(`Unknown resource URI: ${uri}`);
+      }
+
+      const app = UIAppRegistry.getAppById(match[1]);
+      if (!app || !app.html) {
+        throw new Error(`UI app not found or not built: ${match[1]}`);
+      }
+
+      return {
+        contents: [
+          {
+            uri: app.config.uri,
+            mimeType: app.config.mimeType,
+            text: app.html,
+          },
+        ],
+      };
+    });
  }

  /**
--- a/src/mcp/ui/app-configs.ts
+++ b/src/mcp/ui/app-configs.ts
@@ -0,0 +1,62 @@
+import type { UIAppConfig } from './types';
+
+export const UI_APP_CONFIGS: UIAppConfig[] = [
+  {
+    id: 'operation-result',
+    displayName: 'Operation Result',
+    description: 'Visual summary of workflow operations (create, update, delete, test)',
+    uri: 'ui://n8n-mcp/operation-result',
+    mimeType: 'text/html;profile=mcp-app',
+    toolPatterns: [
+      'n8n_create_workflow',
+      'n8n_update_full_workflow',
+      'n8n_update_partial_workflow',
+      'n8n_delete_workflow',
+      'n8n_test_workflow',
+      'n8n_autofix_workflow',
+      'n8n_deploy_template',
+    ],
+  },
+  {
+    id: 'validation-summary',
+    displayName: 'Validation Summary',
+    description: 'Visual summary of node and workflow validation results',
+    uri: 'ui://n8n-mcp/validation-summary',
+    mimeType: 'text/html;profile=mcp-app',
+    toolPatterns: [
+      'validate_node',
+      'validate_workflow',
+      'n8n_validate_workflow',
+    ],
+  },
+  {
+    id: 'workflow-list',
+    displayName: 'Workflow List',
+    description: 'Compact table of workflows with status, tags, and metadata',
+    uri: 'ui://n8n-mcp/workflow-list',
+    mimeType: 'text/html;profile=mcp-app',
+    toolPatterns: [
+      'n8n_list_workflows',
+    ],
+  },
+  {
+    id: 'execution-history',
+    displayName: 'Execution History',
+    description: 'Execution history table with status summary bar',
+    uri: 'ui://n8n-mcp/execution-history',
+    mimeType: 'text/html;profile=mcp-app',
+    toolPatterns: [
+      'n8n_executions',
+    ],
+  },
+  {
+    id: 'health-dashboard',
+    displayName: 'Health Dashboard',
+    description: 'Connection status, versions, and performance metrics',
+    uri: 'ui://n8n-mcp/health-dashboard',
+    mimeType: 'text/html;profile=mcp-app',
+    toolPatterns: [
+      'n8n_health_check',
+    ],
+  },
+];
--- a/src/mcp/ui/index.ts
+++ b/src/mcp/ui/index.ts
@@ -0,0 +1,3 @@
+export type { UIAppConfig, UIMetadata, UIAppEntry } from './types';
+export { UI_APP_CONFIGS } from './app-configs';
+export { UIAppRegistry } from './registry';
--- a/src/mcp/ui/registry.ts
+++ b/src/mcp/ui/registry.ts
@@ -0,0 +1,84 @@
+import { existsSync, readFileSync } from 'fs';
+import path from 'path';
+import { logger } from '../../utils/logger';
+import type { UIAppConfig, UIAppEntry } from './types';
+import { UI_APP_CONFIGS } from './app-configs';
+
+export class UIAppRegistry {
+  private static entries: Map<string, UIAppEntry> = new Map();
+  private static toolIndex: Map<string, UIAppEntry> = new Map();
+  private static loaded = false;
+
+  static load(): void {
+    // Resolve dist directory relative to package root
+    // In production: package-root/ui-apps/dist/
+    // __dirname will be src/mcp/ui or dist/mcp/ui
+    const packageRoot = path.resolve(__dirname, '..', '..', '..');
+    const distDir = path.join(packageRoot, 'ui-apps', 'dist');
+
+    this.entries.clear();
+    this.toolIndex.clear();
+
+    for (const config of UI_APP_CONFIGS) {
+      let html: string | null = null;
+      const htmlPath = path.join(distDir, config.id, 'index.html');
+
+      if (existsSync(htmlPath)) {
+        try {
+          html = readFileSync(htmlPath, 'utf-8');
+          logger.info(`Loaded UI app: ${config.id}`);
+        } catch (err) {
+          logger.warn(`Failed to read UI app HTML: ${config.id}`, err);
+        }
+      }
+
+      const entry: UIAppEntry = { config, html };
+      this.entries.set(config.id, entry);
+
+      // Build tool -> entry index
+      for (const pattern of config.toolPatterns) {
+        this.toolIndex.set(pattern, entry);
+      }
+    }
+
+    this.loaded = true;
+    logger.info(`UI App Registry loaded: ${this.entries.size} apps, ${this.toolIndex.size} tool mappings`);
+  }
+
+  static getAppForTool(toolName: string): UIAppEntry | null {
+    if (!this.loaded) return null;
+    return this.toolIndex.get(toolName) ?? null;
+  }
+
+  static getAppById(id: string): UIAppEntry | null {
+    if (!this.loaded) return null;
+    return this.entries.get(id) ?? null;
+  }
+
+  static getAllApps(): UIAppEntry[] {
+    if (!this.loaded) return [];
+    return Array.from(this.entries.values());
+  }
+
+  /**
+   * Enrich tool definitions with _meta.ui.resourceUri for tools that have
+   * a matching UI app. Per MCP ext-apps spec, this goes on the tool
+   * definition (tools/list), not the tool call response.
+   */
+  static injectToolMeta(tools: Array<{ name: string; [key: string]: any }>): void {
+    if (!this.loaded) return;
+    for (const tool of tools) {
+      const entry = this.toolIndex.get(tool.name);
+      if (entry && entry.html) {
+        tool._meta = { ui: { resourceUri: entry.config.uri } };
+      }
+    }
+  }
+
+  /** Reset registry state. Intended for testing only. */
+  static reset(): void {
+    this.entries.clear();
+    this.toolIndex.clear();
+    this.loaded = false;
+  }
+}
--- a/src/mcp/ui/types.ts
+++ b/src/mcp/ui/types.ts
@@ -0,0 +1,23 @@
+/**
+ * MCP Apps UI type definitions
+ */
+
+export interface UIAppConfig {
+  id: string;
+  displayName: string;
+  description: string;
+  uri: string;
+  mimeType: string;
+  toolPatterns: string[];
+}
+
+export interface UIMetadata {
+  ui: {
+    resourceUri: string;
+  };
+}
+
+export interface UIAppEntry {
+  config: UIAppConfig;
+  html: string | null;
+}
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -44,6 +44,11 @@ export interface ToolDefinition {
  };
  /** Tool behavior hints for AI assistants */
  annotations?: ToolAnnotations;
+  _meta?: {
+    ui?: {
+      resourceUri?: string;
+    };
+  };
 }

 export interface ResourceDefinition {
--- a/tests/unit/mcp/ui/app-configs.test.ts
+++ b/tests/unit/mcp/ui/app-configs.test.ts
@@ -0,0 +1,131 @@
+import { describe, it, expect } from 'vitest';
+import { UI_APP_CONFIGS } from '@/mcp/ui/app-configs';
+
+describe('UI_APP_CONFIGS', () => {
+  it('should have all required fields for every config', () => {
+    for (const config of UI_APP_CONFIGS) {
+      expect(config.id).toBeDefined();
+      expect(typeof config.id).toBe('string');
+      expect(config.id.length).toBeGreaterThan(0);
+
+      expect(config.displayName).toBeDefined();
+      expect(typeof config.displayName).toBe('string');
+      expect(config.displayName.length).toBeGreaterThan(0);
+
+      expect(config.description).toBeDefined();
+      expect(typeof config.description).toBe('string');
+      expect(config.description.length).toBeGreaterThan(0);
+
+      expect(config.uri).toBeDefined();
+      expect(typeof config.uri).toBe('string');
+
+      expect(config.mimeType).toBeDefined();
+      expect(typeof config.mimeType).toBe('string');
+
+      expect(config.toolPatterns).toBeDefined();
+      expect(Array.isArray(config.toolPatterns)).toBe(true);
+    }
+  });
+
+  it('should have URIs following ui://n8n-mcp/{id} pattern', () => {
+    for (const config of UI_APP_CONFIGS) {
+      expect(config.uri).toBe(`ui://n8n-mcp/${config.id}`);
+    }
+  });
+
+  it('should have unique IDs', () => {
+    const ids = UI_APP_CONFIGS.map(c => c.id);
+    const uniqueIds = new Set(ids);
+    expect(uniqueIds.size).toBe(ids.length);
+  });
+
+  it('should have non-empty toolPatterns arrays', () => {
+    for (const config of UI_APP_CONFIGS) {
+      expect(config.toolPatterns.length).toBeGreaterThan(0);
+      for (const pattern of config.toolPatterns) {
+        expect(typeof pattern).toBe('string');
+        expect(pattern.length).toBeGreaterThan(0);
+      }
+    }
+  });
+
+  it('should not have duplicate tool patterns across configs', () => {
+    const allPatterns: string[] = [];
+    for (const config of UI_APP_CONFIGS) {
+      allPatterns.push(...config.toolPatterns);
+    }
+    const uniquePatterns = new Set(allPatterns);
+    expect(uniquePatterns.size).toBe(allPatterns.length);
+  });
+
+  it('should not have duplicate tool patterns within a single config', () => {
+    for (const config of UI_APP_CONFIGS) {
+      const unique = new Set(config.toolPatterns);
+      expect(unique.size).toBe(config.toolPatterns.length);
+    }
+  });
+
+  it('should have consistent mimeType of text/html;profile=mcp-app', () => {
+    for (const config of UI_APP_CONFIGS) {
+      expect(config.mimeType).toBe('text/html;profile=mcp-app');
+    }
+  });
+
+  it('should have URIs that start with the ui://n8n-mcp/ scheme', () => {
+    for (const config of UI_APP_CONFIGS) {
+      expect(config.uri).toMatch(/^ui:\/\/n8n-mcp\//);
+    }
+  });
+
+  // Regression: verify expected configs are present
+  it('should contain the operation-result config', () => {
+    const config = UI_APP_CONFIGS.find(c => c.id === 'operation-result');
+    expect(config).toBeDefined();
+    expect(config!.displayName).toBe('Operation Result');
+    expect(config!.toolPatterns).toContain('n8n_create_workflow');
+    expect(config!.toolPatterns).toContain('n8n_update_full_workflow');
+    expect(config!.toolPatterns).toContain('n8n_delete_workflow');
+    expect(config!.toolPatterns).toContain('n8n_test_workflow');
+    expect(config!.toolPatterns).toContain('n8n_deploy_template');
+  });
+
+  it('should contain the validation-summary config', () => {
+    const config = UI_APP_CONFIGS.find(c => c.id === 'validation-summary');
+    expect(config).toBeDefined();
+    expect(config!.displayName).toBe('Validation Summary');
+    expect(config!.toolPatterns).toContain('validate_node');
+    expect(config!.toolPatterns).toContain('validate_workflow');
+    expect(config!.toolPatterns).toContain('n8n_validate_workflow');
+  });
+
+  it('should have exactly 5 configs', () => {
+    expect(UI_APP_CONFIGS.length).toBe(5);
+  });
+
+  it('should contain the workflow-list config', () => {
+    const config = UI_APP_CONFIGS.find(c => c.id === 'workflow-list');
+    expect(config).toBeDefined();
+    expect(config!.displayName).toBe('Workflow List');
+    expect(config!.toolPatterns).toContain('n8n_list_workflows');
+  });
+
+  it('should contain the execution-history config', () => {
+    const config = UI_APP_CONFIGS.find(c => c.id === 'execution-history');
+    expect(config).toBeDefined();
+    expect(config!.displayName).toBe('Execution History');
+    expect(config!.toolPatterns).toContain('n8n_executions');
+  });
+
+  it('should contain the health-dashboard config', () => {
+    const config = UI_APP_CONFIGS.find(c => c.id === 'health-dashboard');
+    expect(config).toBeDefined();
+    expect(config!.displayName).toBe('Health Dashboard');
+    expect(config!.toolPatterns).toContain('n8n_health_check');
+  });
+
+  it('should have IDs that are valid URI path segments (no spaces or special chars)', () => {
+    for (const config of UI_APP_CONFIGS) {
+      expect(config.id).toMatch(/^[a-z0-9-]+$/);
+    }
+  });
+});
--- a/tests/unit/mcp/ui/meta-injection.test.ts
+++ b/tests/unit/mcp/ui/meta-injection.test.ts
@@ -0,0 +1,145 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { UIAppRegistry } from '@/mcp/ui/registry';
+
+vi.mock('fs', () => ({
+  existsSync: vi.fn(),
+  readFileSync: vi.fn(),
+}));
+
+import { existsSync, readFileSync } from 'fs';
+
+const mockExistsSync = vi.mocked(existsSync);
+const mockReadFileSync = vi.mocked(readFileSync);
+
+describe('UI Meta Injection on Tool Definitions', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    UIAppRegistry.reset();
+  });
+
+  describe('when HTML is loaded', () => {
+    beforeEach(() => {
+      mockExistsSync.mockReturnValue(true);
+      mockReadFileSync.mockReturnValue('<html>ui content</html>');
+      UIAppRegistry.load();
+    });
+
+    it('should add _meta.ui.resourceUri to matching tool definitions', () => {
+      const tools: any[] = [
+        { name: 'n8n_create_workflow', description: 'Create workflow', inputSchema: { type: 'object', properties: {} } },
+      ];
+
+      UIAppRegistry.injectToolMeta(tools);
+
+      expect(tools[0]._meta).toBeDefined();
+      expect(tools[0]._meta.ui.resourceUri).toBe('ui://n8n-mcp/operation-result');
+    });
+
+    it('should add _meta.ui.resourceUri to validation tool definitions', () => {
+      const tools: any[] = [
+        { name: 'validate_workflow', description: 'Validate', inputSchema: { type: 'object', properties: {} } },
+      ];
+
+      UIAppRegistry.injectToolMeta(tools);
+
+      expect(tools[0]._meta).toBeDefined();
+      expect(tools[0]._meta.ui.resourceUri).toBe('ui://n8n-mcp/validation-summary');
+    });
+
+    it('should NOT add _meta to non-matching tool definitions', () => {
+      const tools: any[] = [
+        { name: 'get_node_info', description: 'Get info', inputSchema: { type: 'object', properties: {} } },
+      ];
+
+      UIAppRegistry.injectToolMeta(tools);
+
+      expect(tools[0]._meta).toBeUndefined();
+    });
+
+    it('should inject _meta on matching tools and skip non-matching in a mixed list', () => {
+      const tools: any[] = [
+        { name: 'n8n_create_workflow', description: 'Create', inputSchema: { type: 'object', properties: {} } },
+        { name: 'get_node_info', description: 'Info', inputSchema: { type: 'object', properties: {} } },
+        { name: 'validate_node', description: 'Validate', inputSchema: { type: 'object', properties: {} } },
+      ];
+
+      UIAppRegistry.injectToolMeta(tools);
+
+      expect(tools[0]._meta).toBeDefined();
+      expect(tools[0]._meta.ui.resourceUri).toBe('ui://n8n-mcp/operation-result');
+      expect(tools[1]._meta).toBeUndefined();
+      expect(tools[2]._meta).toBeDefined();
+      expect(tools[2]._meta.ui.resourceUri).toBe('ui://n8n-mcp/validation-summary');
+    });
+
+    it('should produce _meta with exact shape { ui: { resourceUri: string } }', () => {
+      const tools: any[] = [
+        { name: 'n8n_create_workflow', description: 'Create', inputSchema: { type: 'object', properties: {} } },
+      ];
+
+      UIAppRegistry.injectToolMeta(tools);
+
+      expect(tools[0]._meta).toEqual({
+        ui: {
+          resourceUri: 'ui://n8n-mcp/operation-result',
+        },
+      });
+      expect(Object.keys(tools[0]._meta)).toEqual(['ui']);
+      expect(Object.keys(tools[0]._meta.ui)).toEqual(['resourceUri']);
+      expect(typeof tools[0]._meta.ui.resourceUri).toBe('string');
+    });
+  });
+
+  describe('when HTML is not loaded', () => {
+    beforeEach(() => {
+      mockExistsSync.mockReturnValue(false);
+      UIAppRegistry.load();
+    });
+
+    it('should NOT add _meta even for matching tools', () => {
+      const tools: any[] = [
+        { name: 'n8n_create_workflow', description: 'Create', inputSchema: { type: 'object', properties: {} } },
+      ];
+
+      UIAppRegistry.injectToolMeta(tools);
+
+      expect(tools[0]._meta).toBeUndefined();
+    });
+
+    it('should NOT add _meta for validation tools without HTML', () => {
+      const tools: any[] = [
+        { name: 'validate_node', description: 'Validate', inputSchema: { type: 'object', properties: {} } },
+      ];
+
+      UIAppRegistry.injectToolMeta(tools);
+
+      expect(tools[0]._meta).toBeUndefined();
+    });
+  });
+
+  describe('when registry has not been loaded at all', () => {
+    it('should NOT add _meta because registry is not loaded', () => {
+      const tools: any[] = [
+        { name: 'n8n_create_workflow', description: 'Create', inputSchema: { type: 'object', properties: {} } },
+      ];
+
+      UIAppRegistry.injectToolMeta(tools);
+
+      expect(tools[0]._meta).toBeUndefined();
+    });
+  });
+
+  describe('empty tool list', () => {
+    beforeEach(() => {
+      mockExistsSync.mockReturnValue(true);
+      mockReadFileSync.mockReturnValue('<html>ui</html>');
+      UIAppRegistry.load();
+    });
+
+    it('should handle an empty tools array without error', () => {
+      const tools: any[] = [];
+      UIAppRegistry.injectToolMeta(tools);
+      expect(tools.length).toBe(0);
+    });
+  });
+});
--- a/tests/unit/mcp/ui/registry.test.ts
+++ b/tests/unit/mcp/ui/registry.test.ts
@@ -0,0 +1,374 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { UIAppRegistry } from '@/mcp/ui/registry';
+import { UI_APP_CONFIGS } from '@/mcp/ui/app-configs';
+
+vi.mock('fs', () => ({
+  existsSync: vi.fn(),
+  readFileSync: vi.fn(),
+}));
+
+import { existsSync, readFileSync } from 'fs';
+
+const mockExistsSync = vi.mocked(existsSync);
+const mockReadFileSync = vi.mocked(readFileSync);
+
+describe('UIAppRegistry', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    UIAppRegistry.reset();
+  });
+
+  describe('load()', () => {
+    it('should load HTML files when dist directory exists', () => {
+      mockExistsSync.mockReturnValue(true);
+      mockReadFileSync.mockReturnValue('<html>test</html>');
+
+      UIAppRegistry.load();
+
+      const apps = UIAppRegistry.getAllApps();
+      expect(apps.length).toBe(UI_APP_CONFIGS.length);
+      for (const app of apps) {
+        expect(app.html).toBe('<html>test</html>');
+      }
+    });
+
+    it('should handle missing dist directory gracefully', () => {
+      mockExistsSync.mockReturnValue(false);
+
+      UIAppRegistry.load();
+
+      const apps = UIAppRegistry.getAllApps();
+      expect(apps.length).toBe(UI_APP_CONFIGS.length);
+      for (const app of apps) {
+        expect(app.html).toBeNull();
+      }
+    });
+
+    it('should handle read errors gracefully', () => {
+      mockExistsSync.mockReturnValue(true);
+      mockReadFileSync.mockImplementation(() => {
+        throw new Error('Permission denied');
+      });
+
+      UIAppRegistry.load();
+
+      const apps = UIAppRegistry.getAllApps();
+      expect(apps.length).toBe(UI_APP_CONFIGS.length);
+      for (const app of apps) {
+        expect(app.html).toBeNull();
+      }
+    });
+
+    it('should set loaded flag so getters work', () => {
+      expect(UIAppRegistry.getAllApps()).toEqual([]);
+      expect(UIAppRegistry.getAppById('operation-result')).toBeNull();
+      expect(UIAppRegistry.getAppForTool('n8n_create_workflow')).toBeNull();
+
+      mockExistsSync.mockReturnValue(false);
+      UIAppRegistry.load();
+
+      expect(UIAppRegistry.getAllApps().length).toBeGreaterThan(0);
+    });
+
+    it('should replace previous entries when called twice', () => {
+      // First load: files exist
+      mockExistsSync.mockReturnValue(true);
+      mockReadFileSync.mockReturnValue('<html>first</html>');
+      UIAppRegistry.load();
+
+      expect(UIAppRegistry.getAppById('operation-result')!.html).toBe('<html>first</html>');
+
+      // Second load: files missing
+      mockExistsSync.mockReturnValue(false);
+      UIAppRegistry.load();
+
+      expect(UIAppRegistry.getAppById('operation-result')!.html).toBeNull();
+    });
+
+    it('should handle empty HTML file content', () => {
+      mockExistsSync.mockReturnValue(true);
+      mockReadFileSync.mockReturnValue('');
+
+      UIAppRegistry.load();
+
+      const app = UIAppRegistry.getAppById('operation-result');
+      expect(app).not.toBeNull();
+      // Empty string is still a string, not null
+      expect(app!.html).toBe('');
+    });
+
+    it('should build the correct number of tool index entries', () => {
+      mockExistsSync.mockReturnValue(true);
+      mockReadFileSync.mockReturnValue('<html>app</html>');
+      UIAppRegistry.load();
+
+      // Every tool pattern from every config should be resolvable
+      for (const config of UI_APP_CONFIGS) {
+        for (const pattern of config.toolPatterns) {
+          const entry = UIAppRegistry.getAppForTool(pattern);
+          expect(entry).not.toBeNull();
+          expect(entry!.config.id).toBe(config.id);
+        }
+      }
+    });
+
+    it('should call existsSync for each config', () => {
+      mockExistsSync.mockReturnValue(false);
+      UIAppRegistry.load();
+
+      expect(mockExistsSync).toHaveBeenCalledTimes(UI_APP_CONFIGS.length);
+    });
+
+    it('should only call readFileSync when existsSync returns true', () => {
+      mockExistsSync.mockReturnValue(false);
+      UIAppRegistry.load();
+
+      expect(mockReadFileSync).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('getAppForTool()', () => {
+    it('should return null before load() is called', () => {
+      const entry = UIAppRegistry.getAppForTool('n8n_create_workflow');
+      expect(entry).toBeNull();
+    });
+
+    describe('after loading', () => {
+      beforeEach(() => {
+        mockExistsSync.mockReturnValue(true);
+        mockReadFileSync.mockReturnValue('<html>loaded</html>');
+        UIAppRegistry.load();
+      });
+
+      it('should return correct entry for known tool patterns', () => {
+        const entry = UIAppRegistry.getAppForTool('n8n_create_workflow');
+        expect(entry).not.toBeNull();
+        expect(entry!.config.id).toBe('operation-result');
+      });
+
+      it('should return correct entry for validation tools', () => {
+        const entry = UIAppRegistry.getAppForTool('validate_node');
+        expect(entry).not.toBeNull();
+        expect(entry!.config.id).toBe('validation-summary');
+      });
+
+      it('should return null for unknown tools', () => {
+        const entry = UIAppRegistry.getAppForTool('unknown_tool');
+        expect(entry).toBeNull();
+      });
+
+      it('should return null for empty string tool name', () => {
+        const entry = UIAppRegistry.getAppForTool('');
+        expect(entry).toBeNull();
+      });
+
+      // Regression: verify specific tools ARE mapped so config changes break the test
+      it('should map n8n_create_workflow to operation-result', () => {
+        expect(UIAppRegistry.getAppForTool('n8n_create_workflow')!.config.id).toBe('operation-result');
+      });
+
+      it('should map n8n_update_full_workflow to operation-result', () => {
+        expect(UIAppRegistry.getAppForTool('n8n_update_full_workflow')!.config.id).toBe('operation-result');
+      });
+
+      it('should map n8n_update_partial_workflow to operation-result', () => {
+        expect(UIAppRegistry.getAppForTool('n8n_update_partial_workflow')!.config.id).toBe('operation-result');
+      });
+
+      it('should map n8n_delete_workflow to operation-result', () => {
+        expect(UIAppRegistry.getAppForTool('n8n_delete_workflow')!.config.id).toBe('operation-result');
+      });
+
+      it('should map n8n_test_workflow to operation-result', () => {
+        expect(UIAppRegistry.getAppForTool('n8n_test_workflow')!.config.id).toBe('operation-result');
+      });
+
+      it('should map n8n_autofix_workflow to operation-result', () => {
+        expect(UIAppRegistry.getAppForTool('n8n_autofix_workflow')!.config.id).toBe('operation-result');
+      });
+
+      it('should map n8n_deploy_template to operation-result', () => {
+        expect(UIAppRegistry.getAppForTool('n8n_deploy_template')!.config.id).toBe('operation-result');
+      });
+
+      it('should map validate_node to validation-summary', () => {
+        expect(UIAppRegistry.getAppForTool('validate_node')!.config.id).toBe('validation-summary');
+      });
+
+      it('should map validate_workflow to validation-summary', () => {
+        expect(UIAppRegistry.getAppForTool('validate_workflow')!.config.id).toBe('validation-summary');
+      });
+
+      it('should map n8n_validate_workflow to validation-summary', () => {
+        expect(UIAppRegistry.getAppForTool('n8n_validate_workflow')!.config.id).toBe('validation-summary');
+      });
+    });
+  });
+
+  describe('getAppById()', () => {
+    it('should return null before load() is called', () => {
+      const entry = UIAppRegistry.getAppById('operation-result');
+      expect(entry).toBeNull();
+    });
+
+    describe('after loading', () => {
+      beforeEach(() => {
+        mockExistsSync.mockReturnValue(true);
+        mockReadFileSync.mockReturnValue('<html>app</html>');
+        UIAppRegistry.load();
+      });
+
+      it('should return correct entry for operation-result', () => {
+        const entry = UIAppRegistry.getAppById('operation-result');
+        expect(entry).not.toBeNull();
+        expect(entry!.config.displayName).toBe('Operation Result');
+        expect(entry!.html).toBe('<html>app</html>');
+      });
+
+      it('should return correct entry for validation-summary', () => {
+        const entry = UIAppRegistry.getAppById('validation-summary');
+        expect(entry).not.toBeNull();
+        expect(entry!.config.displayName).toBe('Validation Summary');
+      });
+
+      it('should return null for unknown id', () => {
+        const entry = UIAppRegistry.getAppById('nonexistent');
+        expect(entry).toBeNull();
+      });
+
+      it('should return null for empty string id', () => {
+        const entry = UIAppRegistry.getAppById('');
+        expect(entry).toBeNull();
+      });
+    });
+  });
+
+  describe('getAllApps()', () => {
+    it('should return empty array before load() is called', () => {
+      const apps = UIAppRegistry.getAllApps();
+      expect(apps).toEqual([]);
+    });
+
+    it('should return all entries after load', () => {
+      mockExistsSync.mockReturnValue(false);
+      UIAppRegistry.load();
+
+      const apps = UIAppRegistry.getAllApps();
+      expect(apps.length).toBe(UI_APP_CONFIGS.length);
+      expect(apps.map(a => a.config.id)).toContain('operation-result');
+      expect(apps.map(a => a.config.id)).toContain('validation-summary');
+    });
+
+    it('should include entries with null html when dist is missing', () => {
+      mockExistsSync.mockReturnValue(false);
+      UIAppRegistry.load();
+
+      const apps = UIAppRegistry.getAllApps();
+      for (const app of apps) {
+        expect(app.html).toBeNull();
+      }
+      // Entries are still present even with null html
+      expect(apps.length).toBe(UI_APP_CONFIGS.length);
+    });
+
+    it('should return entries with full config objects', () => {
+      mockExistsSync.mockReturnValue(false);
+      UIAppRegistry.load();
+
+      for (const app of UIAppRegistry.getAllApps()) {
+        expect(app.config).toBeDefined();
+        expect(app.config.id).toBeDefined();
+        expect(app.config.displayName).toBeDefined();
+        expect(app.config.uri).toBeDefined();
+        expect(app.config.mimeType).toBeDefined();
+        expect(app.config.toolPatterns).toBeDefined();
+        expect(app.config.description).toBeDefined();
+      }
+    });
+  });
+
+  describe('injectToolMeta()', () => {
+    it('should not modify tools before load() is called', () => {
+      const tools: any[] = [
+        { name: 'n8n_create_workflow', description: 'Create', inputSchema: { type: 'object', properties: {} } },
+      ];
+      UIAppRegistry.injectToolMeta(tools);
+      expect(tools[0]._meta).toBeUndefined();
+    });
+
+    describe('after loading with HTML', () => {
+      beforeEach(() => {
+        mockExistsSync.mockReturnValue(true);
+        mockReadFileSync.mockReturnValue('<html>loaded</html>');
+        UIAppRegistry.load();
+      });
+
+      it('should set _meta.ui.resourceUri on matching operation tools', () => {
+        const tools: any[] = [
+          { name: 'n8n_create_workflow', description: 'Create', inputSchema: { type: 'object', properties: {} } },
+        ];
+        UIAppRegistry.injectToolMeta(tools);
+        expect(tools[0]._meta).toEqual({ ui: { resourceUri: 'ui://n8n-mcp/operation-result' } });
+      });
+
+      it('should set _meta.ui.resourceUri on matching validation tools', () => {
+        const tools: any[] = [
+          { name: 'validate_node', description: 'Validate', inputSchema: { type: 'object', properties: {} } },
+        ];
+        UIAppRegistry.injectToolMeta(tools);
+        expect(tools[0]._meta).toEqual({ ui: { resourceUri: 'ui://n8n-mcp/validation-summary' } });
+      });
+
+      it('should not set _meta on tools without a matching UI app', () => {
+        const tools: any[] = [
+          { name: 'search_nodes', description: 'Search', inputSchema: { type: 'object', properties: {} } },
+        ];
+        UIAppRegistry.injectToolMeta(tools);
+        expect(tools[0]._meta).toBeUndefined();
+      });
+
+      it('should handle a mix of matching and non-matching tools', () => {
+        const tools: any[] = [
+          { name: 'n8n_delete_workflow', description: 'Delete', inputSchema: { type: 'object', properties: {} } },
+          { name: 'get_node_essentials', description: 'Essentials', inputSchema: { type: 'object', properties: {} } },
+          { name: 'validate_workflow', description: 'Validate', inputSchema: { type: 'object', properties: {} } },
+        ];
+        UIAppRegistry.injectToolMeta(tools);
+        expect(tools[0]._meta?.ui?.resourceUri).toBe('ui://n8n-mcp/operation-result');
+        expect(tools[1]._meta).toBeUndefined();
+        expect(tools[2]._meta?.ui?.resourceUri).toBe('ui://n8n-mcp/validation-summary');
+      });
+    });
+
+    describe('after loading without HTML', () => {
+      beforeEach(() => {
+        mockExistsSync.mockReturnValue(false);
+        UIAppRegistry.load();
+      });
+
+      it('should not set _meta when HTML is not available', () => {
+        const tools: any[] = [
+          { name: 'n8n_create_workflow', description: 'Create', inputSchema: { type: 'object', properties: {} } },
+        ];
+        UIAppRegistry.injectToolMeta(tools);
+        expect(tools[0]._meta).toBeUndefined();
+      });
+    });
+  });
+
+  describe('reset()', () => {
+    it('should clear loaded state so getters return defaults', () => {
+      mockExistsSync.mockReturnValue(true);
+      mockReadFileSync.mockReturnValue('<html>x</html>');
+      UIAppRegistry.load();
+
+      expect(UIAppRegistry.getAllApps().length).toBeGreaterThan(0);
+
+      UIAppRegistry.reset();
+
+      expect(UIAppRegistry.getAllApps()).toEqual([]);
+      expect(UIAppRegistry.getAppById('operation-result')).toBeNull();
+      expect(UIAppRegistry.getAppForTool('n8n_create_workflow')).toBeNull();
+    });
+  });
+});
--- a/ui-apps/package-lock.json
+++ b/ui-apps/package-lock.json
--- a/ui-apps/package.json
+++ b/ui-apps/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "n8n-mcp-ui-apps",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "APP_NAME=operation-result vite build && APP_NAME=validation-summary vite build && APP_NAME=workflow-list vite build && APP_NAME=execution-history vite build && APP_NAME=health-dashboard vite build",
+    "build:operation-result": "APP_NAME=operation-result vite build",
+    "build:validation-summary": "APP_NAME=validation-summary vite build",
+    "build:workflow-list": "APP_NAME=workflow-list vite build",
+    "build:execution-history": "APP_NAME=execution-history vite build",
+    "build:health-dashboard": "APP_NAME=health-dashboard vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@modelcontextprotocol/ext-apps": "^1.0.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "typescript": "^5.8.0",
+    "vite": "^6.0.0",
+    "vite-plugin-singlefile": "^2.0.0"
+  }
+}
--- a/ui-apps/preview.html
+++ b/ui-apps/preview.html
@@ -0,0 +1,357 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>MCP App Preview</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; padding: 24px; transition: background 0.3s, color 0.3s; }
+    body.dark { background: #111; color: #e0e0e0; }
+    body.light { background: #f5f5f5; color: #1f2937; }
+    h1 { font-size: 18px; margin-bottom: 8px; }
+    .theme-toggle { margin-bottom: 16px; }
+    .theme-toggle button { padding: 6px 14px; border: 1px solid #666; border-radius: 6px; cursor: pointer; font-size: 12px; margin-right: 8px; }
+    body.dark .theme-toggle button { background: #252540; color: #e0e0e0; border-color: #444; }
+    body.light .theme-toggle button { background: #fff; color: #1f2937; border-color: #ccc; }
+    .theme-toggle button.active { border-color: #ff6d5a; color: #ff6d5a; }
+    .section-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; margin: 16px 0 8px; opacity: 0.6; }
+    .controls { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
+    button { padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 12px; }
+    body.dark button { border: 1px solid #444; background: #252540; color: #e0e0e0; }
+    body.light button { border: 1px solid #d1d5db; background: #fff; color: #1f2937; }
+    button:hover { opacity: 0.85; }
+    button.active { border-color: #ff6d5a; color: #ff6d5a; }
+    .preview-frame { border-radius: 8px; overflow: hidden; max-width: 520px; transition: background 0.3s, border-color 0.3s; }
+    body.dark .preview-frame { border: 1px solid #333; background: #1a1a2e; }
+    body.light .preview-frame { border: 1px solid #e5e7eb; background: #ffffff; }
+    iframe { border: none; width: 100%; height: 600px; }
+    .info { font-size: 12px; opacity: 0.4; margin-top: 12px; }
+  </style>
+</head>
+<body class="dark">
+  <h1>MCP App Local Preview</h1>
+  <div class="theme-toggle">
+    <button onclick="setTheme('dark')" class="active" id="btn-dark">Dark</button>
+    <button onclick="setTheme('light')" id="btn-light">Light</button>
+  </div>
+
+  <div class="section-label">Operation Result</div>
+  <div class="controls">
+    <button onclick="load('operation-result', mockCreateSuccess, 'n8n_create_workflow', this)" class="active">Create (success)</button>
+    <button onclick="load('operation-result', mockCreateError, 'n8n_create_workflow', this)">Create (error)</button>
+    <button onclick="load('operation-result', mockDelete, 'n8n_delete_workflow', this)">Delete</button>
+    <button onclick="load('operation-result', mockPartialUpdate, 'n8n_update_partial_workflow', this)">Partial Update</button>
+    <button onclick="load('operation-result', mockFullUpdate, 'n8n_update_full_workflow', this)">Full Update</button>
+    <button onclick="load('operation-result', mockAutofix, 'n8n_autofix_workflow', this)">Autofix</button>
+    <button onclick="load('operation-result', mockAutofixPreview, 'n8n_autofix_workflow', this)">Autofix (preview)</button>
+    <button onclick="load('operation-result', mockDeploy, 'n8n_deploy_template', this)">Deploy Template</button>
+    <button onclick="load('operation-result', mockTest, 'n8n_test_workflow', this)">Test Workflow</button>
+  </div>
+
+  <div class="section-label">Validation Summary</div>
+  <div class="controls">
+    <button onclick="load('validation-summary', mockValidValid, 'validate_node', this)">Valid Node</button>
+    <button onclick="load('validation-summary', mockValidInvalid, 'validate_node', this)">Invalid Node</button>
+    <button onclick="load('validation-summary', mockN8nValidate, 'n8n_validate_workflow', this)">Workflow (multi-node)</button>
+  </div>
+
+  <div class="section-label">Workflow List</div>
+  <div class="controls">
+    <button onclick="load('workflow-list', mockWorkflowList, 'n8n_list_workflows', this)">Workflow List</button>
+    <button onclick="load('workflow-list', mockWorkflowListEmpty, 'n8n_list_workflows', this)">Empty List</button>
+  </div>
+
+  <div class="section-label">Execution History</div>
+  <div class="controls">
+    <button onclick="load('execution-history', mockExecutions, 'n8n_executions', this)">Executions</button>
+    <button onclick="load('execution-history', mockExecutionsEmpty, 'n8n_executions', this)">Empty</button>
+  </div>
+
+  <div class="section-label">Health Dashboard</div>
+  <div class="controls">
+    <button onclick="load('health-dashboard', mockHealthOk, 'n8n_health_check', this)">Healthy</button>
+    <button onclick="load('health-dashboard', mockHealthOutdated, 'n8n_health_check', this)">Outdated</button>
+    <button onclick="load('health-dashboard', mockHealthError, 'n8n_health_check', this)">Error</button>
+  </div>
+
+  <div class="preview-frame">
+    <iframe id="app"></iframe>
+  </div>
+  <div class="info">This preview simulates the Claude host postMessage protocol to push mock tool result data into the MCP App iframe.</div>
+
+  <script>
+    const iframe = document.getElementById('app');
+    let pendingData = null;
+    let pendingToolName = null;
+    let currentTheme = 'dark';
+
+    // --- Theme ---
+    function setTheme(theme) {
+      currentTheme = theme;
+      document.body.className = theme;
+      document.getElementById('btn-dark').classList.toggle('active', theme === 'dark');
+      document.getElementById('btn-light').classList.toggle('active', theme === 'light');
+      // Reload current iframe to re-initialize with new theme
+      if (iframe.src) iframe.src = iframe.src;
+    }
+
+    // --- Mock Data: Operation Result ---
+    const mockCreateSuccess = {
+      success: true,
+      data: { id: 'abc123XYZ', name: 'Webhook with Set Node', active: false, nodeCount: 2 },
+      message: 'Workflow "Webhook with Set Node" created successfully.'
+    };
+
+    const mockCreateError = {
+      success: false,
+      error: 'Node type format error: n8n API requires FULL form node types',
+      details: { errors: ['Node 0 ("HTTP Request") uses SHORT form "nodes-base.httpRequest". Change to "n8n-nodes-base.httpRequest"'] }
+    };
+
+    const mockDelete = {
+      success: true,
+      data: { id: 'wf_456', name: 'Old Workflow', deleted: true },
+      message: 'Workflow "Old Workflow" deleted successfully.'
+    };
+
+    const mockPartialUpdate = {
+      success: true,
+      data: { id: 'wf_789', name: 'My API Workflow', active: true, nodeCount: 5, operationsApplied: 3 },
+      message: 'Workflow "My API Workflow" updated successfully.',
+      details: {
+        applied: ['add_node:Set', 'modify_node:HTTP Request', 'add_connection:Set->HTTP Request'],
+        failed: [],
+        warnings: ['Node "Set" has deprecated property "keepOnlySet"']
+      }
+    };
+
+    const mockFullUpdate = {
+      success: true,
+      data: { id: 'wf_101', name: 'Updated Workflow', active: true, nodeCount: 8 },
+      message: 'Workflow updated.'
+    };
+
+    const mockAutofix = {
+      success: true,
+      data: {
+        id: 'wf_auto', name: 'Fixed Workflow', nodeCount: 4, fixesApplied: 3,
+        fixes: [
+          { description: 'Changed node type from short to full form', confidence: 'HIGH' },
+          { description: 'Added missing authentication parameter', confidence: 'HIGH' },
+          { description: 'Replaced deprecated property channelId with channel', confidence: 'MEDIUM' }
+        ]
+      }
+    };
+
+    const mockAutofixPreview = {
+      success: true,
+      data: {
+        id: 'wf_preview', name: 'Preview Workflow', nodeCount: 3, fixesApplied: 2, preview: true,
+        fixes: [
+          { description: 'Would change node type from short to full form', confidence: 'HIGH' },
+          { description: 'Would add missing required field "resource"', confidence: 'MEDIUM' }
+        ]
+      }
+    };
+
+    const mockDeploy = {
+      success: true,
+      data: {
+        id: 'wf_deployed', name: 'Email Notification Flow', active: false, nodeCount: 5,
+        templateId: 1234, triggerType: 'webhook',
+        requiredCredentials: ['gmailOAuth2Api (Gmail node)', 'slackOAuth2Api (Slack node)'],
+        autoFixStatus: 'success'
+      }
+    };
+
+    const mockTest = {
+      success: true,
+      data: {
+        id: 'wf_test', name: 'Test Workflow', executionId: 'exec_98765',
+        triggerType: 'manual'
+      }
+    };
+
+    // --- Mock Data: Validation Summary ---
+    const mockValidValid = {
+      nodeType: 'n8n-nodes-base.httpRequest',
+      displayName: 'HTTP Request',
+      valid: true,
+      errors: [],
+      warnings: [],
+      suggestions: ['Consider adding error handling with an Error Trigger node'],
+      summary: { hasErrors: false, errorCount: 0, warningCount: 0, suggestionCount: 1 }
+    };
+
+    const mockValidInvalid = {
+      nodeType: 'n8n-nodes-base.slack',
+      displayName: 'Slack',
+      valid: false,
+      errors: [
+        { type: 'missing_required', property: 'authentication', message: 'Required field "authentication" is missing', fix: 'Set authentication to "oAuth2" or "accessToken"' },
+        { type: 'missing_required', property: 'resource', message: 'Required field "resource" is missing', fix: 'Set resource to "channel", "message", "user", etc.' }
+      ],
+      warnings: [
+        { type: 'deprecated_property', property: 'channelId', message: 'Property "channelId" is deprecated, use "channel" instead' }
+      ],
+      suggestions: ['Use OAuth2 authentication for production workflows', 'Add error handling for rate limits'],
+      summary: { hasErrors: true, errorCount: 2, warningCount: 1, suggestionCount: 2 }
+    };
+
+    const mockN8nValidate = {
+      success: true,
+      data: {
+        valid: false,
+        workflowId: 'wf_abc',
+        workflowName: 'My Production Workflow',
+        errors: [
+          { node: 'HTTP Request', message: 'Missing URL parameter', property: 'url', fix: 'Set the url field' },
+          { node: 'HTTP Request', message: 'Invalid method "PATCH" for this endpoint', property: 'method' },
+          { node: 'Slack', message: 'Missing authentication configuration', property: 'authentication', fix: 'Set authentication to oAuth2' }
+        ],
+        warnings: [
+          { node: 'Set', message: 'Unused output field "oldField"', property: 'oldField' },
+          { node: 'HTTP Request', message: 'Consider using retry on failure', property: 'options.retry' }
+        ],
+        suggestions: ['Add error handling between HTTP Request and Set nodes'],
+        summary: { errorCount: 3, warningCount: 2, totalNodes: 4, enabledNodes: 4 }
+      }
+    };
+
+    // --- Mock Data: Workflow List ---
+    const mockWorkflowList = {
+      success: true,
+      data: {
+        workflows: [
+          { id: 'wf_001', name: 'Customer Onboarding', active: true, nodeCount: 12, tags: ['production', 'crm'], updatedAt: '2026-02-07T14:30:00Z' },
+          { id: 'wf_002', name: 'Slack Notifications', active: true, nodeCount: 5, tags: ['notifications'], updatedAt: '2026-02-06T09:15:00Z' },
+          { id: 'wf_003', name: 'Data Backup (weekly)', active: false, nodeCount: 8, tags: ['maintenance', 'backup'], updatedAt: '2026-01-28T22:00:00Z' },
+          { id: 'wf_004', name: 'Invoice Processing', active: true, nodeCount: 15, tags: ['finance', 'production', 'critical'], updatedAt: '2026-02-08T01:00:00Z' },
+          { id: 'wf_005', name: 'Old Integration Test', active: false, isArchived: true, nodeCount: 3, tags: [], updatedAt: '2025-11-01T10:00:00Z' },
+          { id: 'wf_006', name: 'Email Campaign Drip', active: true, nodeCount: 9, tags: ['marketing'], updatedAt: '2026-02-05T16:45:00Z' },
+        ],
+        returned: 6,
+        hasMore: true,
+        nextCursor: 'cursor_abc'
+      }
+    };
+
+    const mockWorkflowListEmpty = {
+      success: true,
+      data: { workflows: [], returned: 0, hasMore: false }
+    };
+
+    // --- Mock Data: Execution History ---
+    const mockExecutions = {
+      success: true,
+      data: {
+        executions: [
+          { id: 'exec_001', workflowName: 'Customer Onboarding', status: 'success', startedAt: '2026-02-08T10:30:00Z', stoppedAt: '2026-02-08T10:30:02Z', mode: 'webhook' },
+          { id: 'exec_002', workflowName: 'Slack Notifications', status: 'success', startedAt: '2026-02-08T10:28:00Z', stoppedAt: '2026-02-08T10:28:01Z', mode: 'trigger' },
+          { id: 'exec_003', workflowName: 'Invoice Processing', status: 'error', startedAt: '2026-02-08T10:25:00Z', stoppedAt: '2026-02-08T10:25:15Z', mode: 'webhook' },
+          { id: 'exec_004', workflowName: 'Customer Onboarding', status: 'success', startedAt: '2026-02-08T10:20:00Z', stoppedAt: '2026-02-08T10:20:03Z', mode: 'webhook' },
+          { id: 'exec_005', workflowName: 'Email Campaign Drip', status: 'waiting', startedAt: '2026-02-08T10:15:00Z', mode: 'manual' },
+          { id: 'exec_006', workflowName: 'Data Backup', status: 'success', startedAt: '2026-02-08T09:00:00Z', stoppedAt: '2026-02-08T09:02:30Z', mode: 'cron' },
+          { id: 'exec_007', workflowName: 'Invoice Processing', status: 'error', startedAt: '2026-02-07T23:00:00Z', stoppedAt: '2026-02-07T23:00:08Z', mode: 'webhook' },
+        ],
+        returned: 7,
+        hasMore: true
+      }
+    };
+
+    const mockExecutionsEmpty = {
+      success: true,
+      data: { executions: [], returned: 0, hasMore: false }
+    };
+
+    // --- Mock Data: Health Dashboard ---
+    const mockHealthOk = {
+      success: true,
+      data: {
+        status: 'connected',
+        instanceId: 'inst_abc123',
+        n8nVersion: '1.72.1',
+        mcpVersion: '2.24.1',
+        apiUrl: 'https://n8n.example.com/api/v1',
+        versionCheck: { current: '1.72.1', latest: '1.72.1', upToDate: true },
+        performance: { responseTimeMs: 142, cacheHitRate: 0.87 },
+        nextSteps: ['Your n8n instance is up to date', 'Try creating a workflow with n8n_create_workflow']
+      }
+    };
+
+    const mockHealthOutdated = {
+      success: true,
+      data: {
+        status: 'connected',
+        instanceId: 'inst_xyz789',
+        n8nVersion: '1.68.0',
+        mcpVersion: '2.24.1',
+        apiUrl: 'https://n8n.company.io/api/v1',
+        versionCheck: { current: '1.68.0', latest: '1.72.1', upToDate: false, updateCommand: 'npm update n8n -g' },
+        performance: { responseTimeMs: 1850, cacheHitRate: 0.45 },
+        nextSteps: ['Update n8n to version 1.72.1 for latest features and fixes', 'Cache hit rate is low - consider warming the cache']
+      }
+    };
+
+    const mockHealthError = {
+      success: false,
+      error: 'Connection failed: Unable to reach n8n instance at https://n8n.offline.com/api/v1'
+    };
+
+    // --- Host Protocol ---
+    window.addEventListener('message', (event) => {
+      if (!event.data || typeof event.data !== 'object') return;
+      const msg = event.data;
+      if (!msg.jsonrpc) return;
+
+      if (msg.jsonrpc === '2.0' && msg.method === 'ui/initialize' && msg.id != null) {
+        iframe.contentWindow.postMessage({
+          jsonrpc: '2.0',
+          id: msg.id,
+          result: {
+            protocolVersion: '2026-01-26',
+            hostCapabilities: {},
+            hostInfo: { name: 'Local Preview', version: '1.0.0' },
+            hostContext: {
+              theme: currentTheme,
+              toolInfo: pendingToolName ? { tool: { name: pendingToolName, inputSchema: { type: 'object', properties: {} } } } : undefined,
+            }
+          }
+        }, '*');
+
+        setTimeout(() => {
+          if (pendingData) {
+            iframe.contentWindow.postMessage({
+              jsonrpc: '2.0',
+              method: 'ui/notifications/tool-result',
+              params: {
+                content: [{ type: 'text', text: JSON.stringify(pendingData) }]
+              }
+            }, '*');
+          }
+        }, 500);
+      }
+      // Respond to any other JSON-RPC request (with id) with empty result
+      else if (msg.jsonrpc === '2.0' && msg.id != null && msg.method) {
+        iframe.contentWindow.postMessage({
+          jsonrpc: '2.0',
+          id: msg.id,
+          result: {}
+        }, '*');
+      }
+    });
+
+    function load(appName, data, toolName, btn) {
+      pendingData = data;
+      pendingToolName = toolName || null;
+      document.querySelectorAll('.controls button').forEach(b => b.classList.remove('active'));
+      if (btn) btn.classList.add('active');
+      iframe.src = `dist/${appName}/index.html`;
+    }
+
+    window.addEventListener('DOMContentLoaded', () => {
+      load('operation-result', mockCreateSuccess, 'n8n_create_workflow', document.querySelector('.controls button'));
+    });
+  </script>
+</body>
+</html>
--- a/ui-apps/src/apps/execution-history/App.tsx
+++ b/ui-apps/src/apps/execution-history/App.tsx
@@ -0,0 +1,201 @@
+import React, { useMemo } from 'react';
+import '@shared/styles/theme.css';
+import { Badge } from '@shared/components';
+import { useToolData } from '@shared/hooks/useToolData';
+import type { ExecutionHistoryData } from '@shared/types';
+
+type ExecStatus = 'success' | 'error' | 'waiting' | 'running' | 'unknown';
+
+function getStatusInfo(status?: string): { variant: 'success' | 'error' | 'warning' | 'info'; label: string } {
+  switch (status) {
+    case 'success': return { variant: 'success', label: 'Success' };
+    case 'error': case 'failed': case 'crashed': return { variant: 'error', label: 'Error' };
+    case 'waiting': return { variant: 'warning', label: 'Waiting' };
+    case 'running': return { variant: 'info', label: 'Running' };
+    default: return { variant: 'info', label: status ?? 'Unknown' };
+  }
+}
+
+function formatDuration(startedAt?: string, stoppedAt?: string): string {
+  if (!startedAt || !stoppedAt) return '–';
+  try {
+    const ms = new Date(stoppedAt).getTime() - new Date(startedAt).getTime();
+    if (ms < 1000) return `${ms}ms`;
+    if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`;
+    return `${Math.floor(ms / 60000)}m ${Math.floor((ms % 60000) / 1000)}s`;
+  } catch {
+    return '–';
+  }
+}
+
+function formatTime(dateStr?: string): string {
+  if (!dateStr) return '';
+  try {
+    const d = new Date(dateStr);
+    return d.toLocaleString(undefined, { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' });
+  } catch {
+    return dateStr;
+  }
+}
+
+function classifyStatus(status?: string): ExecStatus {
+  switch (status) {
+    case 'success': return 'success';
+    case 'error': case 'failed': case 'crashed': return 'error';
+    case 'waiting': return 'waiting';
+    case 'running': return 'running';
+    default: return 'unknown';
+  }
+}
+
+export default function App() {
+  const { data, error, isConnected } = useToolData<ExecutionHistoryData>();
+
+  const executions = data?.data?.executions ?? [];
+
+  const summary = useMemo(() => {
+    const counts: Record<ExecStatus, number> = { success: 0, error: 0, waiting: 0, running: 0, unknown: 0 };
+    for (const ex of executions) {
+      counts[classifyStatus(ex.status)]++;
+    }
+    return counts;
+  }, [executions]);
+
+  if (error) {
+    return <div style={{ padding: '16px', color: '#ef4444' }}>Error: {error}</div>;
+  }
+
+  if (!isConnected) {
+    return <div style={{ padding: '16px', color: 'var(--n8n-text-muted)' }}>Connecting...</div>;
+  }
+
+  if (!data) {
+    return <div style={{ padding: '16px', color: 'var(--n8n-text-muted)' }}>Waiting for data...</div>;
+  }
+
+  if (!data.success && data.error) {
+    return (
+      <div style={{ maxWidth: '480px' }}>
+        <Badge variant="error">Error</Badge>
+        <div style={{ marginTop: '8px', fontSize: '13px', color: 'var(--n8n-error)' }}>{data.error}</div>
+      </div>
+    );
+  }
+
+  const total = executions.length;
+  const barSegments: { color: string; pct: number }[] = [];
+  if (total > 0) {
+    if (summary.success > 0) barSegments.push({ color: 'var(--n8n-success)', pct: (summary.success / total) * 100 });
+    if (summary.error > 0) barSegments.push({ color: 'var(--n8n-error)', pct: (summary.error / total) * 100 });
+    if (summary.waiting > 0) barSegments.push({ color: 'var(--n8n-warning)', pct: (summary.waiting / total) * 100 });
+    if (summary.running > 0) barSegments.push({ color: 'var(--n8n-info)', pct: (summary.running / total) * 100 });
+    if (summary.unknown > 0) barSegments.push({ color: 'var(--n8n-border)', pct: (summary.unknown / total) * 100 });
+  }
+
+  return (
+    <div style={{ maxWidth: '480px' }}>
+      {/* Summary bar */}
+      {total > 0 && (
+        <div style={{ marginBottom: '12px' }}>
+          <div style={{
+            height: '6px',
+            borderRadius: '3px',
+            background: 'var(--n8n-border)',
+            overflow: 'hidden',
+            display: 'flex',
+          }}>
+            {barSegments.map((seg, i) => (
+              <div key={i} style={{ width: `${seg.pct}%`, background: seg.color, minWidth: '3px' }} />
+            ))}
+          </div>
+          <div style={{ fontSize: '12px', color: 'var(--color-text-secondary, var(--n8n-text-muted))', marginTop: '6px' }}>
+            {summary.success > 0 && <><span style={{ color: 'var(--n8n-success)', fontWeight: 500 }}>{summary.success}</span> succeeded</>}
+            {summary.error > 0 && <>{summary.success > 0 && ', '}<span style={{ color: 'var(--n8n-error)', fontWeight: 500 }}>{summary.error}</span> failed</>}
+            {summary.waiting > 0 && <>{(summary.success > 0 || summary.error > 0) && ', '}<span style={{ color: 'var(--n8n-warning)', fontWeight: 500 }}>{summary.waiting}</span> waiting</>}
+            {summary.running > 0 && <>{(summary.success > 0 || summary.error > 0 || summary.waiting > 0) && ', '}<span style={{ color: 'var(--n8n-info)', fontWeight: 500 }}>{summary.running}</span> running</>}
+          </div>
+        </div>
+      )}
+
+      {/* Table */}
+      <div style={{
+        border: '1px solid var(--n8n-border)',
+        borderRadius: 'var(--n8n-radius)',
+        overflow: 'hidden',
+      }}>
+        <div style={{
+          display: 'grid',
+          gridTemplateColumns: '70px 1fr 70px 90px 60px',
+          gap: '6px',
+          padding: '8px 10px',
+          fontSize: '11px',
+          fontWeight: 600,
+          textTransform: 'uppercase' as const,
+          letterSpacing: '0.03em',
+          color: 'var(--color-text-secondary, var(--n8n-text-muted))',
+          background: 'var(--n8n-bg-card)',
+          borderBottom: '1px solid var(--n8n-border)',
+        }}>
+          <span>ID</span>
+          <span>Workflow</span>
+          <span>Status</span>
+          <span>Started</span>
+          <span>Duration</span>
+        </div>
+
+        {executions.length === 0 && (
+          <div style={{ padding: '16px', textAlign: 'center', color: 'var(--n8n-text-muted)', fontSize: '13px' }}>
+            No executions found
+          </div>
+        )}
+
+        {executions.map((ex) => {
+          const statusInfo = getStatusInfo(ex.status);
+          return (
+            <div
+              key={ex.id}
+              style={{
+                display: 'grid',
+                gridTemplateColumns: '70px 1fr 70px 90px 60px',
+                gap: '6px',
+                padding: '6px 10px',
+                fontSize: '12px',
+                borderBottom: '1px solid var(--n8n-border)',
+                alignItems: 'center',
+              }}
+            >
+              <span style={{ fontFamily: 'var(--font-mono, monospace)', fontSize: '11px' }}>
+                {ex.id.length > 8 ? ex.id.slice(0, 8) + '…' : ex.id}
+              </span>
+              <span style={{
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap' as const,
+              }}>
+                {ex.workflowName || ex.workflowId || '–'}
+              </span>
+              <Badge variant={statusInfo.variant}>{statusInfo.label}</Badge>
+              <span style={{ fontSize: '11px', color: 'var(--color-text-secondary, var(--n8n-text-muted))', whiteSpace: 'nowrap' as const }}>
+                {formatTime(ex.startedAt)}
+              </span>
+              <span style={{ fontSize: '11px', color: 'var(--color-text-secondary, var(--n8n-text-muted))' }}>
+                {formatDuration(ex.startedAt, ex.stoppedAt)}
+              </span>
+            </div>
+          );
+        })}
+      </div>
+
+      {data.data?.hasMore && (
+        <div style={{
+          fontSize: '11px',
+          color: 'var(--color-text-secondary, var(--n8n-text-muted))',
+          marginTop: '6px',
+          textAlign: 'center',
+        }}>
+          More executions available
+        </div>
+      )}
+    </div>
+  );
+}
--- a/ui-apps/src/apps/execution-history/index.html
+++ b/ui-apps/src/apps/execution-history/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Execution History</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>
--- a/ui-apps/src/apps/execution-history/main.tsx
+++ b/ui-apps/src/apps/execution-history/main.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+
+const root = document.getElementById('root');
+if (root) {
+  createRoot(root).render(<App />);
+}
--- a/ui-apps/src/apps/health-dashboard/App.tsx
+++ b/ui-apps/src/apps/health-dashboard/App.tsx
@@ -0,0 +1,141 @@
+import React from 'react';
+import '@shared/styles/theme.css';
+import { Badge, Card } from '@shared/components';
+import { useToolData } from '@shared/hooks/useToolData';
+import type { HealthDashboardData } from '@shared/types';
+
+export default function App() {
+  const { data, error, isConnected } = useToolData<HealthDashboardData>();
+
+  if (error) {
+    return <div style={{ padding: '16px', color: '#ef4444' }}>Error: {error}</div>;
+  }
+
+  if (!isConnected) {
+    return <div style={{ padding: '16px', color: 'var(--n8n-text-muted)' }}>Connecting...</div>;
+  }
+
+  if (!data) {
+    return <div style={{ padding: '16px', color: 'var(--n8n-text-muted)' }}>Waiting for data...</div>;
+  }
+
+  if (!data.success && data.error) {
+    return (
+      <div style={{ maxWidth: '480px' }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '12px' }}>
+          <Badge variant="error">Disconnected</Badge>
+        </div>
+        <div style={{ fontSize: '13px', color: 'var(--n8n-error)' }}>{data.error}</div>
+      </div>
+    );
+  }
+
+  const d = data.data;
+  const isConnectedStatus = d?.status === 'connected' || d?.status === 'ok' || data.success;
+  const vc = d?.versionCheck;
+  const perf = d?.performance;
+  const nextSteps = d?.nextSteps ?? [];
+
+  return (
+    <div style={{ maxWidth: '480px' }}>
+      {/* Connection status */}
+      <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '16px' }}>
+        <Badge variant={isConnectedStatus ? 'success' : 'error'}>
+          {isConnectedStatus ? 'Connected' : 'Disconnected'}
+        </Badge>
+        {d?.apiUrl && (
+          <span style={{
+            fontSize: '12px',
+            fontFamily: 'var(--font-mono, monospace)',
+            color: 'var(--color-text-secondary, var(--n8n-text-muted))',
+          }}>
+            {d.apiUrl}
+          </span>
+        )}
+      </div>
+
+      {/* Version info */}
+      {(d?.n8nVersion || d?.mcpVersion) && (
+        <Card>
+          <div style={{ fontSize: '13px' }}>
+            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '4px' }}>
+              <span style={{ color: 'var(--color-text-secondary, var(--n8n-text-muted))' }}>n8n</span>
+              <span style={{ fontFamily: 'var(--font-mono, monospace)', fontWeight: 500 }}>
+                {d?.n8nVersion ?? '–'}
+              </span>
+            </div>
+            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '4px' }}>
+              <span style={{ color: 'var(--color-text-secondary, var(--n8n-text-muted))' }}>MCP Server</span>
+              <span style={{ fontFamily: 'var(--font-mono, monospace)', fontWeight: 500 }}>
+                {d?.mcpVersion ?? '–'}
+              </span>
+            </div>
+            {vc && !vc.upToDate && (
+              <div style={{
+                marginTop: '8px',
+                padding: '6px 10px',
+                background: 'var(--n8n-warning-light)',
+                borderRadius: '4px',
+                fontSize: '12px',
+                color: 'var(--n8n-warning)',
+              }}>
+                Update available: {vc.current} → {vc.latest}
+                {vc.updateCommand && (
+                  <div style={{
+                    fontFamily: 'var(--font-mono, monospace)',
+                    fontSize: '11px',
+                    marginTop: '4px',
+                    opacity: 0.9,
+                  }}>
+                    {vc.updateCommand}
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        </Card>
+      )}
+
+      {/* Performance */}
+      {perf && (
+        <Card>
+          <div style={{ fontSize: '13px' }}>
+            {perf.responseTimeMs !== undefined && (
+              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '4px' }}>
+                <span style={{ color: 'var(--color-text-secondary, var(--n8n-text-muted))' }}>Response time</span>
+                <span style={{
+                  fontFamily: 'var(--font-mono, monospace)',
+                  fontWeight: 500,
+                  color: perf.responseTimeMs < 500 ? 'var(--n8n-success)' : perf.responseTimeMs < 2000 ? 'var(--n8n-warning)' : 'var(--n8n-error)',
+                }}>
+                  {perf.responseTimeMs}ms
+                </span>
+              </div>
+            )}
+            {perf.cacheHitRate !== undefined && (
+              <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                <span style={{ color: 'var(--color-text-secondary, var(--n8n-text-muted))' }}>Cache hit rate</span>
+                <span style={{ fontFamily: 'var(--font-mono, monospace)', fontWeight: 500 }}>
+                  {typeof perf.cacheHitRate === 'number' && perf.cacheHitRate <= 1
+                    ? `${(perf.cacheHitRate * 100).toFixed(0)}%`
+                    : `${perf.cacheHitRate}%`}
+                </span>
+              </div>
+            )}
+          </div>
+        </Card>
+      )}
+
+      {/* Next steps */}
+      {nextSteps.length > 0 && (
+        <Card title="Next Steps">
+          <ul style={{ paddingLeft: '16px', fontSize: '12px' }}>
+            {nextSteps.map((step, i) => (
+              <li key={i} style={{ padding: '2px 0' }}>{step}</li>
+            ))}
+          </ul>
+        </Card>
+      )}
+    </div>
+  );
+}
--- a/ui-apps/src/apps/health-dashboard/index.html
+++ b/ui-apps/src/apps/health-dashboard/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Health Dashboard</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>
--- a/ui-apps/src/apps/health-dashboard/main.tsx
+++ b/ui-apps/src/apps/health-dashboard/main.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+
+const root = document.getElementById('root');
+if (root) {
+  createRoot(root).render(<App />);
+}
--- a/ui-apps/src/apps/operation-result/App.tsx
+++ b/ui-apps/src/apps/operation-result/App.tsx
@@ -0,0 +1,337 @@
+import React from 'react';
+import '@shared/styles/theme.css';
+import { Badge, Expandable } from '@shared/components';
+import { useToolData } from '@shared/hooks/useToolData';
+import type { OperationResultData, OperationType } from '@shared/types';
+
+const TOOL_TO_OP: Record<string, OperationType> = {
+  n8n_create_workflow: 'create',
+  n8n_update_full_workflow: 'update',
+  n8n_update_partial_workflow: 'partial_update',
+  n8n_delete_workflow: 'delete',
+  n8n_test_workflow: 'test',
+  n8n_autofix_workflow: 'autofix',
+  n8n_deploy_template: 'deploy',
+};
+
+const OP_CONFIG: Record<OperationType, { icon: string; label: string; color: string }> = {
+  create:         { icon: '+',  label: 'WORKFLOW CREATED',    color: 'var(--n8n-success)' },
+  update:         { icon: '⟳',  label: 'WORKFLOW UPDATED',    color: 'var(--n8n-info)' },
+  partial_update: { icon: '⟳',  label: 'WORKFLOW UPDATED',    color: 'var(--n8n-info)' },
+  delete:         { icon: '−',  label: 'WORKFLOW DELETED',    color: 'var(--n8n-error)' },
+  test:           { icon: '▶',  label: 'WORKFLOW TESTED',     color: 'var(--n8n-info)' },
+  autofix:        { icon: '⚡', label: 'WORKFLOW AUTO-FIXED', color: 'var(--n8n-warning)' },
+  deploy:         { icon: '↓',  label: 'TEMPLATE DEPLOYED',  color: 'var(--n8n-success)' },
+};
+
+function detectOperation(toolName: string | null, data: OperationResultData): OperationType {
+  if (toolName && TOOL_TO_OP[toolName]) return TOOL_TO_OP[toolName];
+
+  const d = data.data;
+  if (d?.deleted) return 'delete';
+  if (d?.templateId) return 'deploy';
+  if (d?.fixesApplied !== undefined || d?.fixes) return 'autofix';
+  if (d?.executionId) return 'test';
+  if (d?.operationsApplied !== undefined) return 'partial_update';
+  return 'create';
+}
+
+function PartialUpdatePanel({ details }: { details?: Record<string, unknown> }) {
+  if (!details) return null;
+  const applied = Array.isArray(details.applied) ? details.applied as string[] : [];
+  const failed = Array.isArray(details.failed) ? details.failed as string[] : [];
+  const warnings = Array.isArray(details.warnings) ? details.warnings as string[] : [];
+  if (applied.length === 0 && failed.length === 0) return null;
+
+  const items = [
+    ...applied.map((m) => ({ icon: '✓', color: 'var(--n8n-success)', text: String(m) })),
+    ...failed.map((m) => ({ icon: '✗', color: 'var(--n8n-error)', text: String(m) })),
+    ...warnings.map((m) => ({ icon: '!', color: 'var(--n8n-warning)', text: String(m) })),
+  ];
+
+  const summary = (
+    <div style={{ fontSize: '12px', color: 'var(--color-text-secondary, var(--n8n-text-muted))', marginBottom: '6px' }}>
+      <span style={{ color: 'var(--n8n-success)' }}>{applied.length} applied</span>
+      {failed.length > 0 && <>, <span style={{ color: 'var(--n8n-error)' }}>{failed.length} failed</span></>}
+    </div>
+  );
+
+  const list = items.map((item, i) => (
+    <div key={i} style={{ fontSize: '12px', padding: '2px 0', display: 'flex', gap: '6px' }}>
+      <span style={{ color: item.color, flexShrink: 0 }}>{item.icon}</span>
+      <span>{item.text}</span>
+    </div>
+  ));
+
+  if (items.length > 5) {
+    return <>{summary}<Expandable title="Operation Log" count={items.length}>{list}</Expandable></>;
+  }
+  return <>{summary}<div style={{ marginBottom: '8px' }}>{list}</div></>;
+}
+
+function AutofixPanel({ data }: { data: OperationResultData }) {
+  const fixes = Array.isArray(data.data?.fixes) ? data.data!.fixes as Record<string, unknown>[] : [];
+  const isPreview = data.data?.preview === true;
+  const fixCount = data.data?.fixesApplied ?? fixes.length;
+
+  return (
+    <>
+      {isPreview && (
+        <div style={{
+          fontSize: '11px',
+          fontWeight: 600,
+          color: 'var(--n8n-warning)',
+          background: 'var(--n8n-warning-light)',
+          padding: '4px 10px',
+          borderRadius: 'var(--n8n-radius)',
+          marginBottom: '8px',
+          textAlign: 'center',
+        }}>
+          PREVIEW MODE
+        </div>
+      )}
+      {fixes.length > 0 && (
+        <Expandable title="Fixes" count={fixCount} defaultOpen>
+          {fixes.map((fix, i) => {
+            const confidence = String(fix.confidence ?? '').toUpperCase();
+            return (
+              <div key={i} style={{
+                fontSize: '12px',
+                padding: '6px 8px',
+                marginBottom: '4px',
+                borderLeft: `3px solid ${confidence === 'HIGH' ? 'var(--n8n-success)' : 'var(--n8n-warning)'}`,
+                paddingLeft: '10px',
+              }}>
+                <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
+                  <span>{String(fix.description ?? fix.message ?? JSON.stringify(fix))}</span>
+                  {confidence && (
+                    <Badge variant={confidence === 'HIGH' ? 'success' : 'warning'}>
+                      {confidence}
+                    </Badge>
+                  )}
+                </div>
+              </div>
+            );
+          })}
+        </Expandable>
+      )}
+    </>
+  );
+}
+
+function DeployPanel({ data }: { data: OperationResultData }) {
+  const d = data.data;
+  const creds = Array.isArray(d?.requiredCredentials) ? d!.requiredCredentials as string[] : [];
+  const triggerType = d?.triggerType;
+  const autoFixStatus = d?.autoFixStatus;
+
+  return (
+    <div style={{ fontSize: '12px', marginBottom: '8px' }}>
+      <div style={{ display: 'flex', gap: '6px', flexWrap: 'wrap', marginBottom: creds.length > 0 ? '8px' : 0 }}>
+        {triggerType && <Badge variant="info">{String(triggerType)}</Badge>}
+        {autoFixStatus && <Badge variant={autoFixStatus === 'success' ? 'success' : 'warning'}>{String(autoFixStatus)}</Badge>}
+      </div>
+      {creds.length > 0 && (
+        <div>
+          <div style={{ fontWeight: 500, marginBottom: '4px', color: 'var(--color-text-secondary, var(--n8n-text-muted))' }}>Required credentials:</div>
+          {creds.map((c, i) => (
+            <div key={i} style={{ padding: '1px 0' }}>○ {c}</div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function TestPanel({ data }: { data: OperationResultData }) {
+  const execId = data.data?.executionId;
+  const triggerType = data.data?.triggerType;
+  if (!execId && !triggerType) return null;
+  return (
+    <div style={{ fontSize: '12px', marginBottom: '8px' }}>
+      {execId && (
+        <div style={{ fontFamily: 'var(--font-mono, monospace)', fontSize: '13px', fontWeight: 600, marginBottom: '4px' }}>
+          Execution: {execId}
+        </div>
+      )}
+      {triggerType && <Badge variant="info">{String(triggerType)}</Badge>}
+    </div>
+  );
+}
+
+function ErrorDetails({ details }: { details?: Record<string, unknown> }) {
+  if (!details) return null;
+
+  if (Array.isArray(details.errors)) {
+    const errs = details.errors as string[];
+    return (
+      <Expandable title="Errors" count={errs.length}>
+        <ul style={{ paddingLeft: '16px', fontSize: '12px' }}>
+          {errs.map((e, i) => <li key={i} style={{ padding: '1px 0' }}>{String(e)}</li>)}
+        </ul>
+      </Expandable>
+    );
+  }
+
+  const entries = Object.entries(details).filter(([, v]) => v !== undefined && v !== null);
+  if (entries.length === 0) return null;
+
+  const hasComplexValues = entries.some(([, v]) => typeof v === 'object');
+  if (hasComplexValues) {
+    return (
+      <Expandable title="Details">
+        <pre style={{ fontSize: '11px', whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>
+          {JSON.stringify(details, null, 2)}
+        </pre>
+      </Expandable>
+    );
+  }
+
+  return (
+    <Expandable title="Details">
+      <div style={{ fontSize: '12px' }}>
+        {entries.map(([key, val]) => (
+          <div key={key} style={{ padding: '2px 0' }}>
+            <span style={{ color: 'var(--color-text-secondary, var(--n8n-text-muted))' }}>{key}: </span>
+            <span>{String(val)}</span>
+          </div>
+        ))}
+      </div>
+    </Expandable>
+  );
+}
+
+export default function App() {
+  const { data, error, isConnected, toolName } = useToolData<OperationResultData>();
+
+  if (error) {
+    return <div style={{ padding: '16px', color: '#ef4444' }}>Error: {error}</div>;
+  }
+
+  if (!isConnected) {
+    return <div style={{ padding: '16px', color: 'var(--n8n-text-muted)' }}>Connecting...</div>;
+  }
+
+  if (!data) {
+    return <div style={{ padding: '16px', color: 'var(--n8n-text-muted)' }}>Waiting for data...</div>;
+  }
+
+  const isSuccess = data.success === true;
+  const op = detectOperation(toolName, data);
+  const config = OP_CONFIG[op];
+
+  const workflowName = data.data?.name || data.data?.workflowName;
+  const workflowId = data.data?.id || data.data?.workflowId;
+  const nodeCount = data.data?.nodeCount;
+  const isActive = data.data?.active;
+  const operationsApplied = data.data?.operationsApplied;
+  const executionId = data.data?.executionId;
+  const fixesApplied = data.data?.fixesApplied;
+  const templateId = data.data?.templateId;
+
+  const label = isSuccess ? config.label : config.label + ' FAILED';
+
+  const metaParts: string[] = [];
+  if (workflowId) metaParts.push(`ID: ${workflowId}`);
+  if (nodeCount !== undefined) metaParts.push(`${nodeCount} nodes`);
+  if (isActive !== undefined) metaParts.push(isActive ? 'active' : 'inactive');
+  if (operationsApplied !== undefined) metaParts.push(`${operationsApplied} ops applied`);
+  if (executionId) metaParts.push(`exec: ${executionId}`);
+  if (fixesApplied !== undefined) metaParts.push(`${fixesApplied} fixes`);
+  if (templateId) metaParts.push(`template: ${templateId}`);
+
+  const containerStyle = op === 'delete' ? {
+    maxWidth: '480px',
+    borderLeft: '3px solid var(--n8n-error)',
+    paddingLeft: '12px',
+  } : { maxWidth: '480px' };
+
+  return (
+    <div style={containerStyle}>
+      {/* Header */}
+      <div style={{
+        display: 'flex',
+        alignItems: 'flex-start',
+        justifyContent: 'space-between',
+        marginBottom: '16px',
+      }}>
+        <div style={{ display: 'flex', alignItems: 'flex-start', gap: '10px', flex: 1, minWidth: 0 }}>
+          <span style={{
+            fontSize: '18px',
+            lineHeight: '24px',
+            color: config.color,
+            flexShrink: 0,
+          }}>
+            {config.icon}
+          </span>
+          <div style={{ minWidth: 0 }}>
+            <div style={{
+              fontSize: '11px',
+              fontWeight: 600,
+              letterSpacing: '0.05em',
+              textTransform: 'uppercase' as const,
+              color: config.color,
+              lineHeight: '16px',
+            }}>
+              {label}
+            </div>
+            {workflowName && (
+              <div style={{
+                fontSize: '14px',
+                fontWeight: 600,
+                color: 'var(--color-text-primary, var(--n8n-text))',
+                marginTop: '2px',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap' as const,
+              }}>
+                {workflowName}
+              </div>
+            )}
+            {metaParts.length > 0 && (
+              <div style={{
+                fontSize: '12px',
+                fontFamily: 'var(--font-mono, monospace)',
+                color: 'var(--color-text-secondary, var(--n8n-text-muted))',
+                marginTop: '2px',
+              }}>
+                {metaParts.join('  ·  ')}
+              </div>
+            )}
+          </div>
+        </div>
+        <Badge variant={isSuccess ? 'success' : 'error'}>
+          {isSuccess ? 'Success' : 'Error'}
+        </Badge>
+      </div>
+
+      {/* Error info */}
+      {!isSuccess && data.error && (
+        <div style={{
+          fontSize: '12px',
+          color: 'var(--n8n-error)',
+          padding: '8px 12px',
+          background: 'var(--n8n-error-light)',
+          borderRadius: 'var(--n8n-radius)',
+          marginBottom: '8px',
+        }}>
+          {data.error}
+        </div>
+      )}
+
+      {/* Operation-specific panels */}
+      {isSuccess && op === 'partial_update' && <PartialUpdatePanel details={data.details} />}
+      {isSuccess && op === 'autofix' && <AutofixPanel data={data} />}
+      {isSuccess && op === 'deploy' && <DeployPanel data={data} />}
+      {isSuccess && op === 'test' && <TestPanel data={data} />}
+
+      {/* Error details */}
+      {!isSuccess && <ErrorDetails details={data.details} />}
+
+      {/* Fallback details for success states without specific panels */}
+      {isSuccess && !['partial_update', 'autofix', 'deploy', 'test'].includes(op) && data.details && (
+        <ErrorDetails details={data.details} />
+      )}
+    </div>
+  );
+}
--- a/ui-apps/src/apps/operation-result/index.html
+++ b/ui-apps/src/apps/operation-result/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Operation Result</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>
--- a/ui-apps/src/apps/operation-result/main.tsx
+++ b/ui-apps/src/apps/operation-result/main.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+
+const root = document.getElementById('root');
+if (root) {
+  createRoot(root).render(<App />);
+}
--- a/ui-apps/src/apps/validation-summary/App.tsx
+++ b/ui-apps/src/apps/validation-summary/App.tsx
@@ -0,0 +1,211 @@
+import React, { useMemo } from 'react';
+import '@shared/styles/theme.css';
+import { Badge, Expandable } from '@shared/components';
+import { useToolData } from '@shared/hooks/useToolData';
+import type { ValidationSummaryData, ValidationError, ValidationWarning } from '@shared/types';
+
+interface NodeGroup {
+  node: string;
+  errors: ValidationError[];
+  warnings: ValidationWarning[];
+}
+
+function SeverityBar({ errorCount, warningCount }: { errorCount: number; warningCount: number }) {
+  const total = errorCount + warningCount;
+
+  if (total === 0) {
+    return (
+      <div style={{ marginBottom: '12px' }}>
+        <div style={{
+          height: '6px',
+          borderRadius: '3px',
+          background: 'var(--n8n-success)',
+          marginBottom: '6px',
+        }} />
+        <div style={{ fontSize: '12px', color: 'var(--n8n-success)', fontWeight: 500 }}>
+          All checks passed
+        </div>
+      </div>
+    );
+  }
+
+  const errorPct = (errorCount / total) * 100;
+  const warningPct = (warningCount / total) * 100;
+
+  return (
+    <div style={{ marginBottom: '12px' }}>
+      <div style={{
+        height: '6px',
+        borderRadius: '3px',
+        background: 'var(--n8n-border)',
+        overflow: 'hidden',
+        display: 'flex',
+      }}>
+        {errorCount > 0 && (
+          <div style={{ width: `${errorPct}%`, background: 'var(--n8n-error)', minWidth: '4px' }} />
+        )}
+        {warningCount > 0 && (
+          <div style={{ width: `${warningPct}%`, background: 'var(--n8n-warning)', minWidth: '4px' }} />
+        )}
+      </div>
+      <div style={{ fontSize: '12px', color: 'var(--color-text-secondary, var(--n8n-text-muted))', marginTop: '6px' }}>
+        <span style={{ color: 'var(--n8n-error)', fontWeight: 500 }}>{errorCount}</span> error{errorCount !== 1 ? 's' : ''}
+        {' · '}
+        <span style={{ color: 'var(--n8n-warning)', fontWeight: 500 }}>{warningCount}</span> warning{warningCount !== 1 ? 's' : ''}
+      </div>
+    </div>
+  );
+}
+
+function IssueItem({ issue, variant }: { issue: ValidationError | ValidationWarning; variant: 'error' | 'warning' }) {
+  const color = variant === 'error' ? 'var(--n8n-error)' : 'var(--n8n-warning)';
+  const fix = 'fix' in issue ? issue.fix : undefined;
+
+  return (
+    <div style={{
+      padding: '6px 10px',
+      marginBottom: '4px',
+      borderLeft: `3px solid ${color}`,
+      fontSize: '12px',
+    }}>
+      <div style={{ color: 'var(--color-text-primary, var(--n8n-text))' }}>{issue.message}</div>
+      {issue.property && (
+        <div style={{ color: 'var(--color-text-secondary, var(--n8n-text-muted))', fontSize: '11px', marginTop: '2px' }}>
+          {issue.property}
+        </div>
+      )}
+      {fix && (
+        <div style={{ color, fontSize: '11px', marginTop: '2px' }}>
+          → {fix}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function NodeGroupSection({ group }: { group: NodeGroup }) {
+  const errCount = group.errors.length;
+  const warnCount = group.warnings.length;
+
+  return (
+    <Expandable
+      title={group.node}
+      count={errCount + warnCount}
+      defaultOpen={errCount > 0}
+    >
+      <div style={{ display: 'flex', gap: '8px', marginBottom: '6px', flexWrap: 'wrap' }}>
+        {errCount > 0 && <Badge variant="error">{errCount} error{errCount !== 1 ? 's' : ''}</Badge>}
+        {warnCount > 0 && <Badge variant="warning">{warnCount} warning{warnCount !== 1 ? 's' : ''}</Badge>}
+      </div>
+      {group.errors.map((err, i) => (
+        <IssueItem key={`e-${i}`} issue={err} variant="error" />
+      ))}
+      {group.warnings.map((warn, i) => (
+        <IssueItem key={`w-${i}`} issue={warn} variant="warning" />
+      ))}
+    </Expandable>
+  );
+}
+
+export default function App() {
+  const { data: raw, error, isConnected } = useToolData<ValidationSummaryData>();
+
+  const inner = raw?.data || raw;
+  const errors: ValidationError[] = inner?.errors || raw?.errors || [];
+  const warnings: ValidationWarning[] = inner?.warnings || raw?.warnings || [];
+
+  const nodeGroups = useMemo(() => {
+    if (errors.length === 0 && warnings.length === 0) return null;
+    const hasNodes = errors.some((e) => e.node) || warnings.some((w) => w.node);
+    const uniqueNodes = new Set([
+      ...errors.filter((e) => e.node).map((e) => e.node!),
+      ...warnings.filter((w) => w.node).map((w) => w.node!),
+    ]);
+    if (!hasNodes || uniqueNodes.size <= 1) return null;
+
+    const groups: NodeGroup[] = [];
+    for (const node of uniqueNodes) {
+      groups.push({
+        node,
+        errors: errors.filter((e) => e.node === node),
+        warnings: warnings.filter((w) => w.node === node),
+      });
+    }
+    // Ungrouped items
+    const ungroupedErrors = errors.filter((e) => !e.node);
+    const ungroupedWarnings = warnings.filter((w) => !w.node);
+    if (ungroupedErrors.length > 0 || ungroupedWarnings.length > 0) {
+      groups.push({ node: 'General', errors: ungroupedErrors, warnings: ungroupedWarnings });
+    }
+    // Sort: most issues first
+    groups.sort((a, b) => (b.errors.length + b.warnings.length) - (a.errors.length + a.warnings.length));
+    return groups;
+  }, [errors, warnings]);
+
+  if (error) {
+    return <div style={{ padding: '16px', color: '#ef4444' }}>Error: {error}</div>;
+  }
+
+  if (!isConnected) {
+    return <div style={{ padding: '16px', color: 'var(--n8n-text-muted)' }}>Connecting...</div>;
+  }
+
+  if (!raw) {
+    return <div style={{ padding: '16px', color: 'var(--n8n-text-muted)' }}>Waiting for data...</div>;
+  }
+
+  const valid = inner.valid ?? raw.valid ?? false;
+  const displayName = raw.displayName || raw.data?.workflowName;
+  const suggestions: string[] = inner?.suggestions || raw?.suggestions || [];
+  const errorCount = raw.summary?.errorCount ?? inner?.summary?.errorCount ?? errors.length;
+  const warningCount = raw.summary?.warningCount ?? inner?.summary?.warningCount ?? warnings.length;
+
+  return (
+    <div style={{ maxWidth: '480px' }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '12px' }}>
+        <Badge variant={valid ? 'success' : 'error'}>
+          {valid ? 'Valid' : 'Invalid'}
+        </Badge>
+        {displayName && (
+          <span style={{ fontSize: '14px', color: 'var(--color-text-secondary, var(--n8n-text-muted))' }}>{displayName}</span>
+        )}
+      </div>
+
+      <SeverityBar errorCount={errorCount} warningCount={warningCount} />
+
+      {nodeGroups ? (
+        nodeGroups.map((group) => (
+          <NodeGroupSection key={group.node} group={group} />
+        ))
+      ) : (
+        <>
+          {errors.length > 0 && (
+            <Expandable title="Errors" count={errors.length} defaultOpen>
+              {errors.map((err, i) => (
+                <IssueItem key={i} issue={err} variant="error" />
+              ))}
+            </Expandable>
+          )}
+
+          {warnings.length > 0 && (
+            <Expandable title="Warnings" count={warnings.length}>
+              {warnings.map((warn, i) => (
+                <IssueItem key={i} issue={warn} variant="warning" />
+              ))}
+            </Expandable>
+          )}
+        </>
+      )}
+
+      {suggestions.length > 0 && (
+        <Expandable title="Suggestions" count={suggestions.length}>
+          <ul style={{ paddingLeft: '16px', fontSize: '12px' }}>
+            {suggestions.map((suggestion, i) => (
+              <li key={i} style={{ padding: '2px 0', color: 'var(--n8n-info)' }}>→ {suggestion}</li>
+            ))}
+          </ul>
+        </Expandable>
+      )}
+    </div>
+  );
+}
--- a/ui-apps/src/apps/validation-summary/index.html
+++ b/ui-apps/src/apps/validation-summary/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Validation Summary</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>
--- a/ui-apps/src/apps/validation-summary/main.tsx
+++ b/ui-apps/src/apps/validation-summary/main.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+
+const root = document.getElementById('root');
+if (root) {
+  createRoot(root).render(<App />);
+}
--- a/ui-apps/src/apps/workflow-list/App.tsx
+++ b/ui-apps/src/apps/workflow-list/App.tsx
@@ -0,0 +1,145 @@
+import React from 'react';
+import '@shared/styles/theme.css';
+import { Badge } from '@shared/components';
+import { useToolData } from '@shared/hooks/useToolData';
+import type { WorkflowListData } from '@shared/types';
+
+function formatDate(dateStr?: string): string {
+  if (!dateStr) return '';
+  try {
+    const d = new Date(dateStr);
+    return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' });
+  } catch {
+    return dateStr;
+  }
+}
+
+export default function App() {
+  const { data, error, isConnected } = useToolData<WorkflowListData>();
+
+  if (error) {
+    return <div style={{ padding: '16px', color: '#ef4444' }}>Error: {error}</div>;
+  }
+
+  if (!isConnected) {
+    return <div style={{ padding: '16px', color: 'var(--n8n-text-muted)' }}>Connecting...</div>;
+  }
+
+  if (!data) {
+    return <div style={{ padding: '16px', color: 'var(--n8n-text-muted)' }}>Waiting for data...</div>;
+  }
+
+  if (!data.success && data.error) {
+    return (
+      <div style={{ maxWidth: '480px' }}>
+        <Badge variant="error">Error</Badge>
+        <div style={{ marginTop: '8px', fontSize: '13px', color: 'var(--n8n-error)' }}>{data.error}</div>
+      </div>
+    );
+  }
+
+  const workflows = data.data?.workflows ?? [];
+  const returned = data.data?.returned ?? workflows.length;
+  const hasMore = data.data?.hasMore;
+
+  return (
+    <div style={{ maxWidth: '480px' }}>
+      <div style={{
+        fontSize: '12px',
+        color: 'var(--color-text-secondary, var(--n8n-text-muted))',
+        marginBottom: '10px',
+      }}>
+        Showing {returned} workflow{returned !== 1 ? 's' : ''}
+        {hasMore && ' (more available)'}
+      </div>
+
+      <div style={{
+        border: '1px solid var(--n8n-border)',
+        borderRadius: 'var(--n8n-radius)',
+        overflow: 'hidden',
+      }}>
+        {/* Header row */}
+        <div style={{
+          display: 'grid',
+          gridTemplateColumns: '1fr 60px 50px auto',
+          gap: '8px',
+          padding: '8px 12px',
+          fontSize: '11px',
+          fontWeight: 600,
+          textTransform: 'uppercase' as const,
+          letterSpacing: '0.03em',
+          color: 'var(--color-text-secondary, var(--n8n-text-muted))',
+          background: 'var(--n8n-bg-card)',
+          borderBottom: '1px solid var(--n8n-border)',
+        }}>
+          <span>Name</span>
+          <span>Status</span>
+          <span>Nodes</span>
+          <span>Updated</span>
+        </div>
+
+        {workflows.length === 0 && (
+          <div style={{ padding: '16px', textAlign: 'center', color: 'var(--n8n-text-muted)', fontSize: '13px' }}>
+            No workflows found
+          </div>
+        )}
+
+        {workflows.map((wf) => (
+          <div
+            key={wf.id}
+            style={{
+              display: 'grid',
+              gridTemplateColumns: '1fr 60px 50px auto',
+              gap: '8px',
+              padding: '8px 12px',
+              fontSize: '12px',
+              borderBottom: '1px solid var(--n8n-border)',
+              opacity: wf.isArchived ? 0.5 : 1,
+            }}
+          >
+            <div style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' as const }}>
+              <span style={{ fontWeight: 500 }}>{wf.name}</span>
+              {wf.tags && wf.tags.length > 0 && (
+                <div style={{ display: 'flex', gap: '4px', marginTop: '2px', flexWrap: 'wrap' }}>
+                  {wf.tags.slice(0, 3).map((tag, i) => (
+                    <span key={i} style={{
+                      fontSize: '10px',
+                      padding: '1px 6px',
+                      borderRadius: '8px',
+                      background: 'var(--n8n-info-light)',
+                      color: 'var(--n8n-info)',
+                    }}>
+                      {tag}
+                    </span>
+                  ))}
+                  {wf.tags.length > 3 && (
+                    <span style={{ fontSize: '10px', color: 'var(--n8n-text-muted)' }}>+{wf.tags.length - 3}</span>
+                  )}
+                </div>
+              )}
+            </div>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
+              <span style={{
+                display: 'inline-block',
+                width: '8px',
+                height: '8px',
+                borderRadius: '50%',
+                background: wf.active ? 'var(--n8n-success)' : 'var(--n8n-border)',
+                flexShrink: 0,
+              }} />
+              <span style={{ fontSize: '11px', color: 'var(--color-text-secondary, var(--n8n-text-muted))' }}>
+                {wf.isArchived ? 'Archived' : wf.active ? 'Active' : 'Off'}
+              </span>
+            </div>
+            <span style={{ color: 'var(--color-text-secondary, var(--n8n-text-muted))' }}>
+              {wf.nodeCount ?? '–'}
+            </span>
+            <span style={{ fontSize: '11px', color: 'var(--color-text-secondary, var(--n8n-text-muted))', whiteSpace: 'nowrap' as const }}>
+              {formatDate(wf.updatedAt)}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
--- a/ui-apps/src/apps/workflow-list/index.html
+++ b/ui-apps/src/apps/workflow-list/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Workflow List</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>
--- a/ui-apps/src/apps/workflow-list/main.tsx
+++ b/ui-apps/src/apps/workflow-list/main.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+
+const root = document.getElementById('root');
+if (root) {
+  createRoot(root).render(<App />);
+}
--- a/ui-apps/src/shared/components/Badge.tsx
+++ b/ui-apps/src/shared/components/Badge.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+
+type BadgeVariant = 'success' | 'warning' | 'error' | 'info';
+
+interface BadgeProps {
+  variant: BadgeVariant;
+  children: React.ReactNode;
+}
+
+const variantStyles: Record<BadgeVariant, { bg: string; color: string }> = {
+  success: { bg: 'var(--n8n-success-light)', color: 'var(--n8n-success)' },
+  warning: { bg: 'var(--n8n-warning-light)', color: 'var(--n8n-warning)' },
+  error: { bg: 'var(--n8n-error-light)', color: 'var(--n8n-error)' },
+  info: { bg: 'var(--n8n-info-light)', color: 'var(--n8n-info)' },
+};
+
+export function Badge({ variant, children }: BadgeProps) {
+  const style = variantStyles[variant];
+  return (
+    <span style={{
+      display: 'inline-block',
+      padding: '2px 10px',
+      borderRadius: '12px',
+      fontSize: '12px',
+      fontWeight: 600,
+      background: style.bg,
+      color: style.color,
+    }}>
+      {children}
+    </span>
+  );
+}
--- a/ui-apps/src/shared/components/Card.tsx
+++ b/ui-apps/src/shared/components/Card.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+interface CardProps {
+  title?: string;
+  children: React.ReactNode;
+}
+
+export function Card({ title, children }: CardProps) {
+  return (
+    <div style={{
+      background: 'var(--n8n-bg-card)',
+      border: '1px solid var(--n8n-border)',
+      borderRadius: 'var(--n8n-radius)',
+      padding: '16px',
+      marginBottom: '12px',
+    }}>
+      {title && (
+        <h3 style={{ marginBottom: '8px', fontSize: '14px', color: 'var(--n8n-text-muted)' }}>
+          {title}
+        </h3>
+      )}
+      {children}
+    </div>
+  );
+}
--- a/ui-apps/src/shared/components/CopyButton.tsx
+++ b/ui-apps/src/shared/components/CopyButton.tsx
@@ -0,0 +1,54 @@
+import React, { useState, useCallback } from 'react';
+
+interface CopyButtonProps {
+  text: string;
+}
+
+export function CopyButton({ text }: CopyButtonProps) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      // Fallback for sandboxed environments
+      const ta = document.createElement('textarea');
+      ta.value = text;
+      ta.style.position = 'fixed';
+      ta.style.opacity = '0';
+      document.body.appendChild(ta);
+      ta.select();
+      document.execCommand('copy');
+      document.body.removeChild(ta);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
+  }, [text]);
+
+  return (
+    <button
+      onClick={handleCopy}
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: '20px',
+        height: '20px',
+        padding: 0,
+        border: '1px solid var(--n8n-border)',
+        borderRadius: '4px',
+        background: 'transparent',
+        color: copied ? 'var(--n8n-success)' : 'var(--n8n-text-muted)',
+        cursor: 'pointer',
+        fontSize: '11px',
+        lineHeight: 1,
+        flexShrink: 0,
+      }}
+      title="Copy"
+    >
+      {copied ? '✓' : '⎘'}
+    </button>
+  );
+}
--- a/ui-apps/src/shared/components/Expandable.tsx
+++ b/ui-apps/src/shared/components/Expandable.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+
+interface ExpandableProps {
+  title: string;
+  count?: number;
+  defaultOpen?: boolean;
+  children: React.ReactNode;
+}
+
+export function Expandable({ title, count, defaultOpen = false, children }: ExpandableProps) {
+  return (
+    <details open={defaultOpen} style={{
+      marginBottom: '8px',
+      border: '1px solid var(--n8n-border)',
+      borderRadius: 'var(--n8n-radius)',
+      overflow: 'hidden',
+    }}>
+      <summary style={{
+        padding: '10px 14px',
+        cursor: 'pointer',
+        fontSize: '13px',
+        fontWeight: 500,
+        background: 'var(--n8n-bg-card)',
+        userSelect: 'none',
+      }}>
+        {title}
+        {count !== undefined && (
+          <span style={{ marginLeft: '8px', color: 'var(--n8n-text-muted)' }}>({count})</span>
+        )}
+      </summary>
+      <div style={{ padding: '12px 14px' }}>
+        {children}
+      </div>
+    </details>
+  );
+}
--- a/ui-apps/src/shared/components/index.ts
+++ b/ui-apps/src/shared/components/index.ts
@@ -0,0 +1,4 @@
+export { Card } from './Card';
+export { Badge } from './Badge';
+export { Expandable } from './Expandable';
+export { CopyButton } from './CopyButton';
--- a/ui-apps/src/shared/hooks/useToolData.ts
+++ b/ui-apps/src/shared/hooks/useToolData.ts
@@ -0,0 +1,50 @@
+import { useState, useCallback } from 'react';
+import { useApp, useHostStyles } from '@modelcontextprotocol/ext-apps/react';
+import type { App } from '@modelcontextprotocol/ext-apps/react';
+
+interface UseToolDataResult<T> {
+  data: T | null;
+  error: string | null;
+  isConnected: boolean;
+  app: App | null;
+  toolName: string | null;
+}
+
+export function useToolData<T>(): UseToolDataResult<T> {
+  const [data, setData] = useState<T | null>(null);
+
+  const onAppCreated = useCallback((app: App) => {
+    app.ontoolresult = (result) => {
+      if (result?.content) {
+        const textItem = Array.isArray(result.content)
+          ? result.content.find((c) => c.type === 'text')
+          : null;
+        if (textItem && 'text' in textItem) {
+          try {
+            setData(JSON.parse(textItem.text) as T);
+          } catch {
+            setData(textItem.text as unknown as T);
+          }
+        }
+      }
+    };
+  }, []);
+
+  const { app, isConnected, error } = useApp({
+    appInfo: { name: 'n8n-mcp-ui', version: '1.0.0' },
+    capabilities: {},
+    onAppCreated,
+  });
+
+  useHostStyles(app, app?.getHostContext());
+
+  const toolName = app?.getHostContext()?.toolInfo?.tool.name ?? null;
+
+  return {
+    data,
+    error: error?.message ?? null,
+    isConnected,
+    app,
+    toolName,
+  };
+}
--- a/ui-apps/src/shared/index.ts
+++ b/ui-apps/src/shared/index.ts
@@ -0,0 +1,3 @@
+export { Card, Badge, Expandable } from './components';
+export { useToolData } from './hooks/useToolData';
+export type { OperationResultData, ValidationSummaryData, ValidationError, ValidationWarning } from './types';
--- a/ui-apps/src/shared/styles/theme.css
+++ b/ui-apps/src/shared/styles/theme.css
@@ -0,0 +1,50 @@
+:root {
+  /* n8n brand colors */
+  --n8n-primary: #ff6d5a;
+  --n8n-primary-light: #ff8a7a;
+
+  /* Semantic colors */
+  --n8n-success: #17bf79;
+  --n8n-warning: #f59e0b;
+  --n8n-error: #ef4444;
+  --n8n-info: #3b82f6;
+
+  /* Dark mode defaults (fallback when host vars unavailable) */
+  --n8n-bg: #1a1a2e;
+  --n8n-bg-card: #252540;
+  --n8n-text: #e0e0e0;
+  --n8n-text-muted: #9ca3af;
+  --n8n-border: #374151;
+  --n8n-error-light: #fee2e2;
+  --n8n-warning-light: #fef3cd;
+  --n8n-success-light: #e8f9f0;
+  --n8n-info-light: #dbeafe;
+
+  --n8n-radius: 8px;
+  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
+}
+
+[data-theme="light"] {
+  --n8n-bg: #ffffff;
+  --n8n-bg-card: #f9fafb;
+  --n8n-text: #1f2937;
+  --n8n-text-muted: #6b7280;
+  --n8n-border: #e5e7eb;
+  --n8n-error-light: #fef2f2;
+  --n8n-warning-light: #fffbeb;
+  --n8n-success-light: #f0fdf4;
+  --n8n-info-light: #eff6ff;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  background: var(--color-background-primary, var(--n8n-bg));
+  color: var(--color-text-primary, var(--n8n-text));
+  line-height: 1.5;
+  padding: 16px;
+}
--- a/ui-apps/src/shared/types.ts
+++ b/ui-apps/src/shared/types.ts
@@ -0,0 +1,146 @@
+// Matches the McpToolResponse format from handlers-n8n-manager.ts
+export interface OperationResultData {
+  success: boolean;
+  data?: {
+    id?: string;
+    name?: string;
+    active?: boolean;
+    nodeCount?: number;
+    workflowId?: string;
+    workflowName?: string;
+    deleted?: boolean;
+    operationsApplied?: number;
+    executionId?: string;
+    templateId?: string | number;
+    fixes?: unknown[];
+    fixesApplied?: number;
+    preview?: unknown;
+    triggerType?: string;
+    requiredCredentials?: string[];
+    autoFixStatus?: string;
+    url?: string;
+    [key: string]: unknown;
+  };
+  message?: string;
+  error?: string;
+  details?: Record<string, unknown>;
+}
+
+export type OperationType = 'create' | 'update' | 'partial_update' | 'delete' | 'test' | 'autofix' | 'deploy';
+
+export interface ValidationError {
+  type?: string;
+  property?: string;
+  message: string;
+  fix?: string;
+  node?: string;
+  details?: unknown;
+}
+
+export interface ValidationWarning {
+  type?: string;
+  property?: string;
+  message: string;
+  node?: string;
+  details?: unknown;
+}
+
+// Workflow list response from n8n_list_workflows
+export interface WorkflowListData {
+  success: boolean;
+  data?: {
+    workflows: {
+      id: string;
+      name: string;
+      active?: boolean;
+      isArchived?: boolean;
+      createdAt?: string;
+      updatedAt?: string;
+      tags?: string[];
+      nodeCount?: number;
+    }[];
+    returned?: number;
+    hasMore?: boolean;
+    nextCursor?: string;
+  };
+  message?: string;
+  error?: string;
+}
+
+// Execution history response from n8n_executions
+export interface ExecutionHistoryData {
+  success: boolean;
+  data?: {
+    executions: {
+      id: string;
+      finished?: boolean;
+      mode?: string;
+      status?: string;
+      startedAt?: string;
+      stoppedAt?: string;
+      workflowId?: string;
+      workflowName?: string;
+    }[];
+    returned?: number;
+    hasMore?: boolean;
+  };
+  message?: string;
+  error?: string;
+}
+
+// Health check response from n8n_health_check
+export interface HealthDashboardData {
+  success: boolean;
+  data?: {
+    status?: string;
+    instanceId?: string;
+    n8nVersion?: string;
+    mcpVersion?: string;
+    apiUrl?: string;
+    versionCheck?: {
+      current?: string;
+      latest?: string;
+      upToDate?: boolean;
+      updateCommand?: string;
+    };
+    performance?: {
+      responseTimeMs?: number;
+      cacheHitRate?: number;
+    };
+    nextSteps?: string[];
+  };
+  message?: string;
+  error?: string;
+}
+
+// Matches the validate_node / validate_workflow response format from server.ts
+export interface ValidationSummaryData {
+  valid: boolean;
+  nodeType?: string;
+  displayName?: string;
+  errors: ValidationError[];
+  warnings: ValidationWarning[];
+  suggestions?: string[];
+  summary?: {
+    errorCount?: number;
+    warningCount?: number;
+    hasErrors?: boolean;
+    suggestionCount?: number;
+    [key: string]: unknown;
+  };
+  // n8n_validate_workflow wraps result in success/data
+  success?: boolean;
+  data?: {
+    valid?: boolean;
+    workflowId?: string;
+    workflowName?: string;
+    errors?: ValidationError[];
+    warnings?: ValidationWarning[];
+    suggestions?: string[];
+    summary?: {
+      errorCount?: number;
+      warningCount?: number;
+      [key: string]: unknown;
+    };
+  };
+}
--- a/ui-apps/tsconfig.json
+++ b/ui-apps/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "baseUrl": ".",
+    "paths": {
+      "@shared/*": ["src/shared/*"]
+    }
+  },
+  "include": ["src"]
+}
--- a/ui-apps/vite.config.ts
+++ b/ui-apps/vite.config.ts
@@ -0,0 +1,21 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { viteSingleFile } from 'vite-plugin-singlefile';
+import path from 'path';
+
+// App name is passed via environment variable for per-app builds
+const appName = process.env.APP_NAME || 'operation-result';
+
+export default defineConfig({
+  plugins: [react(), viteSingleFile()],
+  resolve: {
+    alias: {
+      '@shared': path.resolve(__dirname, 'src/shared'),
+    },
+  },
+  root: path.resolve(__dirname, 'src/apps', appName),
+  build: {
+    outDir: path.resolve(__dirname, 'dist', appName),
+    emptyOutDir: true,
+  },
+});
Author	SHA1	Message	Date
czlonkowski	ffb7d9e013	chore: bump version to 2.35.0 and update CHANGELOG Conceived by Romuald Członkowski - www.aiadvisors.pl/en Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-09 11:12:59 +08:00
Romuald Członkowski	89146186d8	feat: UI/UX redesign for MCP Apps - 3 new apps + enhanced existing (#583 ) Add workflow-list, execution-history, and health-dashboard apps. Redesign operation-result with operation-aware headers, detail panels, and copy-to-clipboard. Fix React hooks violations in validation-summary and execution-history (useMemo after early returns). Add local preview harness for development. Update tests for 5-app config. Conceived by Romuald Członkowski - www.aiadvisors.pl/en Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-09 03:36:27 +01:00
Romuald Członkowski	c601581714	Fix/mcp app blank UI (#580 ) * fix: use official ext-apps useApp hook to fix blank MCP App rendering The custom useToolData hook had lifecycle issues that prevented the UI from rendering in Claude Desktop/web: no appInfo in App constructor, unhandled connect() Promise, app.close() on unmount conflicting with React Strict Mode. Switched to the official useApp hook from @modelcontextprotocol/ext-apps/react which handles initialization handshake, handler registration, and cleanup correctly. Conceived by Romuald Członkowski - https://www.aiadvisors.pl/en Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: align MCP App UI types with actual server response format - useToolData hook now uses official useApp from ext-apps/react - OperationResultData uses success:boolean + data.id/name (matching McpToolResponse from handlers-n8n-manager.ts) - ValidationSummaryData handles both direct results (validate_node, validate_workflow) and wrapped results (n8n_validate_workflow) - Added visible error/connection states for debugging Conceived by Romuald Członkowski - https://www.aiadvisors.pl/en Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * chore: bump version to 2.34.5 for npm publish Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-08 03:23:16 +01:00
Romuald Członkowski	020bc3d43d	fix: MCP App UI - use official ext-apps hook + align types with server responses (#579 ) * fix: use official ext-apps useApp hook to fix blank MCP App rendering The custom useToolData hook had lifecycle issues that prevented the UI from rendering in Claude Desktop/web: no appInfo in App constructor, unhandled connect() Promise, app.close() on unmount conflicting with React Strict Mode. Switched to the official useApp hook from @modelcontextprotocol/ext-apps/react which handles initialization handshake, handler registration, and cleanup correctly. Conceived by Romuald Członkowski - https://www.aiadvisors.pl/en Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: align MCP App UI types with actual server response format - useToolData hook now uses official useApp from ext-apps/react - OperationResultData uses success:boolean + data.id/name (matching McpToolResponse from handlers-n8n-manager.ts) - ValidationSummaryData handles both direct results (validate_node, validate_workflow) and wrapped results (n8n_validate_workflow) - Added visible error/connection states for debugging Conceived by Romuald Członkowski - https://www.aiadvisors.pl/en Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-08 02:08:50 +01:00
Romuald Członkowski	a57b400bd0	fix: use official ext-apps useApp hook to fix blank MCP App rendering (#578 ) The custom useToolData hook had lifecycle issues that prevented the UI from rendering in Claude Desktop/web: no appInfo in App constructor, unhandled connect() Promise, app.close() on unmount conflicting with React Strict Mode. Switched to the official useApp hook from @modelcontextprotocol/ext-apps/react which handles initialization handshake, handler registration, and cleanup correctly. Conceived by Romuald Członkowski - https://www.aiadvisors.pl/en Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-07 16:25:27 +01:00
Romuald Członkowski	38aa70261a	fix: use text/html;profile=mcp-app MIME type for MCP Apps resources (#577 ) The ext-apps spec requires RESOURCE_MIME_TYPE (text/html;profile=mcp-app) for hosts to recognize resources as MCP Apps. Without the profile parameter, Claude Desktop/web fails with "Failed to load MCP App: the resource may exceed the 5 MB size limit." Conceived by Romuald Członkowski - https://www.aiadvisors.pl/en Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-07 15:18:50 +01:00
Romuald Członkowski	1b328d8168	fix: include UI apps build in CI release pipeline (#575 ) The release workflow only ran `npm run build` (TypeScript), skipping the UI apps build. This meant ui-apps/dist/ was missing from npm packages. - Change `npm run build` to `npm run build:all` in build-and-verify and publish-npm jobs - Copy ui-apps/dist into the npm publish directory - Add ui-apps/dist/*/ to the published package files list - Bump version to 2.34.2 Conceived by Romuald Czlonkowski - https://www.aiadvisors.pl/en Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-07 05:40:21 +01:00
Romuald Członkowski	23b90d01a6	fix: align MCP Apps with official ext-apps spec (#574 ) * feat: add MCP Apps with rich HTML UIs for tool results Add MCP Apps infrastructure that allows MCP hosts like Claude Desktop to render rich HTML UIs alongside tool results via `_meta.ui` and the MCP resources protocol. - Server-side UI module (src/mcp/ui/) with UIAppRegistry, tool-to-UI mapping, and _meta.ui injection into tool responses - React + Vite build pipeline (ui-apps/) producing self-contained HTML per app using vite-plugin-singlefile - Operation Result UI for workflow CRUD tools (create, update, delete, test, autofix, deploy) - Validation Summary UI for validation tools (validate_node, validate_workflow, n8n_validate_workflow) - Shared component library (Card, Badge, Expandable) with n8n dark theme - MCP resources protocol support (ListResources, ReadResource handlers) - Graceful degradation when ui-apps/dist/ is not built - 22 unit tests across 3 test files Conceived by Romuald Członkowski - https://www.aiadvisors.pl/en Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * test: improve MCP Apps test coverage and add security hardening - Expand test suite from 22 to 57 tests across 3 test files - Add UIAppRegistry.reset() for proper test isolation between tests - Replace some fs mocks with real temp directory tests in registry - Add edge case coverage: empty strings, pre-load state, double load, malformed URIs, duplicate tool patterns, empty HTML files - Add regression tests for specific tool-to-UI mappings - Add URI format consistency validation across all configs - Improve _meta.ui injection tests with structuredContent coexistence - Coverage: statements 79.4% -> 80%, lines 79.4% -> 80% Conceived by Romuald Członkowski - https://www.aiadvisors.pl/en Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: align MCP Apps with official ext-apps spec Update URI scheme from n8n-mcp://ui/ to ui://n8n-mcp/ per MCP spec. Move _meta.ui.resourceUri to tool definitions (tools/list) instead of tool call responses. Rewrite UI apps hook to use @modelcontextprotocol/ext-apps App class instead of window.__MCP_DATA__. Conceived by Romuald Czlonkowski - https://www.aiadvisors.pl/en Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-07 05:16:15 +01:00
Romuald Członkowski	1f45cc6dcc	feat: MCP Apps - rich HTML UIs for tool results (#573 ) * feat: add MCP Apps with rich HTML UIs for tool results Add MCP Apps infrastructure that allows MCP hosts like Claude Desktop to render rich HTML UIs alongside tool results via `_meta.ui` and the MCP resources protocol. - Server-side UI module (src/mcp/ui/) with UIAppRegistry, tool-to-UI mapping, and _meta.ui injection into tool responses - React + Vite build pipeline (ui-apps/) producing self-contained HTML per app using vite-plugin-singlefile - Operation Result UI for workflow CRUD tools (create, update, delete, test, autofix, deploy) - Validation Summary UI for validation tools (validate_node, validate_workflow, n8n_validate_workflow) - Shared component library (Card, Badge, Expandable) with n8n dark theme - MCP resources protocol support (ListResources, ReadResource handlers) - Graceful degradation when ui-apps/dist/ is not built - 22 unit tests across 3 test files Conceived by Romuald Członkowski - https://www.aiadvisors.pl/en Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * test: improve MCP Apps test coverage and add security hardening - Expand test suite from 22 to 57 tests across 3 test files - Add UIAppRegistry.reset() for proper test isolation between tests - Replace some fs mocks with real temp directory tests in registry - Add edge case coverage: empty strings, pre-load state, double load, malformed URIs, duplicate tool patterns, empty HTML files - Add regression tests for specific tool-to-UI mappings - Add URI format consistency validation across all configs - Improve _meta.ui injection tests with structuredContent coexistence - Coverage: statements 79.4% -> 80%, lines 79.4% -> 80% Conceived by Romuald Członkowski - https://www.aiadvisors.pl/en Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-07 04:11:21 +01:00