@leeoohoo/ui-apps-devkit 0.1.7 → 0.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leeoohoo/ui-apps-devkit",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "ChatOS UI Apps DevKit (CLI + templates + sandbox) for building installable ChatOS UI Apps plugins.",
   "license": "MIT",
   "type": "module",

package/src/sandbox/server.js

@@ -8,6 +8,8 @@ import { StdioClientTransport } from '@modelcontextprotocol/sdk/client/stdio.js'
 import { SSEClientTransport } from '@modelcontextprotocol/sdk/client/sse.js';
 import { StreamableHTTPClientTransport } from '@modelcontextprotocol/sdk/client/streamableHttp.js';
 import { WebSocketClientTransport } from '@modelcontextprotocol/sdk/client/websocket.js';
+import { LoggingMessageNotificationSchema, NotificationSchema } from '@modelcontextprotocol/sdk/types.js';
+import * as z from 'zod/v4';
 
 import { copyDir, ensureDir, isDirectory, isFile } from '../lib/fs.js';
 import { loadPluginManifest, pickAppFromManifest } from '../lib/plugin.js';
@@ -273,6 +275,34 @@ function formatMcpToolResult(serverName, toolName, result) {
   return `${header}\n${segments.join('\n\n')}`;
 }
 
+const MCP_STREAM_NOTIFICATION_METHODS = [
+  'codex_app.window_run.stream',
+  'codex_app.window_run.done',
+  'codex_app.window_run.completed',
+];
+
+const buildLooseNotificationSchema = (method) =>
+  NotificationSchema.extend({
+    method: z.literal(method),
+    params: z.unknown().optional(),
+  });
+
+function registerMcpNotificationHandlers(client, { serverName, onNotification } = {}) {
+  if (!client || typeof client.setNotificationHandler !== 'function') return;
+  if (typeof onNotification !== 'function') return;
+  const emit = (notification) => {
+    try {
+      onNotification({ serverName, ...notification });
+    } catch {
+      // ignore notification relay errors
+    }
+  };
+  client.setNotificationHandler(LoggingMessageNotificationSchema, (notification) => emit(notification));
+  MCP_STREAM_NOTIFICATION_METHODS.forEach((method) => {
+    client.setNotificationHandler(buildLooseNotificationSchema(method), (notification) => emit(notification));
+  });
+}
+
 async function listAllMcpTools(client) {
   const collected = [];
   let cursor = null;
@@ -290,15 +320,17 @@ async function listAllMcpTools(client) {
   return collected;
 }
 
-async function connectMcpServer(entry) {
+async function connectMcpServer(entry, options = {}) {
   if (!entry || typeof entry !== 'object') return null;
   const serverName = normalizeText(entry.name) || 'mcp_server';
+  const onNotification = typeof options?.onNotification === 'function' ? options.onNotification : null;
   const env = { ...process.env };
   if (!env.MODEL_CLI_SESSION_ROOT) env.MODEL_CLI_SESSION_ROOT = process.cwd();
   if (!env.MODEL_CLI_WORKSPACE_ROOT) env.MODEL_CLI_WORKSPACE_ROOT = process.cwd();
 
   if (entry.command) {
     const client = new Client({ name: 'sandbox', version: '0.1.0' });
+    registerMcpNotificationHandlers(client, { serverName, onNotification });
     const transport = new StdioClientTransport({
       command: entry.command,
       args: Array.isArray(entry.args) ? entry.args : [],
@@ -318,6 +350,7 @@ async function connectMcpServer(entry) {
     if (parsed.protocol === 'ws:' || parsed.protocol === 'wss:') {
       const client = new Client({ name: 'sandbox', version: '0.1.0' });
       const transport = new WebSocketClientTransport(parsed);
+      registerMcpNotificationHandlers(client, { serverName, onNotification });
       await client.connect(transport);
       const tools = await listAllMcpTools(client);
       return { serverName, client, transport, tools };
@@ -327,6 +360,7 @@ async function connectMcpServer(entry) {
     try {
       const client = new Client({ name: 'sandbox', version: '0.1.0' });
       const transport = new StreamableHTTPClientTransport(parsed);
+      registerMcpNotificationHandlers(client, { serverName, onNotification });
       await client.connect(transport);
       const tools = await listAllMcpTools(client);
       return { serverName, client, transport, tools };
@@ -336,6 +370,7 @@ async function connectMcpServer(entry) {
     try {
       const client = new Client({ name: 'sandbox', version: '0.1.0' });
       const transport = new SSEClientTransport(parsed);
+      registerMcpNotificationHandlers(client, { serverName, onNotification });
       await client.connect(transport);
       const tools = await listAllMcpTools(client);
       return { serverName, client, transport, tools };
@@ -1407,6 +1442,7 @@ function renderPrompts() {
     form.style.gap = '10px';
 
     const kind = String(req?.prompt?.kind || '');
+    const allowCancel = req?.prompt?.allowCancel !== false;
 
     const mkBtn = (label, danger) => {
       const btn = document.createElement('button');
@@ -1421,7 +1457,31 @@ function renderPrompts() {
       emitUpdate();
     };
 
-    if (kind === 'kv') {
+    if (kind === 'result') {
+      const markdownText =
+        typeof req?.prompt?.markdown === 'string'
+          ? req.prompt.markdown
+          : typeof req?.prompt?.result === 'string'
+            ? req.prompt.result
+            : typeof req?.prompt?.content === 'string'
+              ? req.prompt.content
+              : '';
+      const markdown = document.createElement('pre');
+      markdown.className = 'mono';
+      markdown.textContent = markdownText || '（无结果内容）';
+      form.appendChild(markdown);
+      const row = document.createElement('div');
+      row.className = 'row';
+      const ok = mkBtn('OK');
+      ok.addEventListener('click', () => submit({ status: 'ok' }));
+      row.appendChild(ok);
+      if (allowCancel) {
+        const cancel = mkBtn('Cancel', true);
+        cancel.addEventListener('click', () => submit({ status: 'cancel' }));
+        row.appendChild(cancel);
+      }
+      form.appendChild(row);
+    } else if (kind === 'kv') {
       const fields = Array.isArray(req?.prompt?.fields) ? req.prompt.fields : [];
       const values = {};
       for (const f of fields) {
@@ -1443,10 +1503,12 @@ function renderPrompts() {
       row.className = 'row';
       const ok = mkBtn('Submit');
       ok.addEventListener('click', () => submit({ status: 'ok', values }));
-      const cancel = mkBtn('Cancel', true);
-      cancel.addEventListener('click', () => submit({ status: 'cancel' }));
       row.appendChild(ok);
-      row.appendChild(cancel);
+      if (allowCancel) {
+        const cancel = mkBtn('Cancel', true);
+        cancel.addEventListener('click', () => submit({ status: 'cancel' }));
+        row.appendChild(cancel);
+      }
       form.appendChild(row);
     } else if (kind === 'choice') {
       const options = Array.isArray(req?.prompt?.options) ? req.prompt.options : [];
@@ -1475,20 +1537,24 @@ function renderPrompts() {
       row.className = 'row';
       const ok = mkBtn('Submit');
       ok.addEventListener('click', () => submit({ status: 'ok', value: multiple ? Array.from(selected) : Array.from(selected)[0] || '' }));
-      const cancel = mkBtn('Cancel', true);
-      cancel.addEventListener('click', () => submit({ status: 'cancel' }));
       row.appendChild(ok);
-      row.appendChild(cancel);
+      if (allowCancel) {
+        const cancel = mkBtn('Cancel', true);
+        cancel.addEventListener('click', () => submit({ status: 'cancel' }));
+        row.appendChild(cancel);
+      }
       form.appendChild(row);
     } else {
       const row = document.createElement('div');
       row.className = 'row';
       const ok = mkBtn('OK');
       ok.addEventListener('click', () => submit({ status: 'ok' }));
-      const cancel = mkBtn('Cancel', true);
-      cancel.addEventListener('click', () => submit({ status: 'cancel' }));
       row.appendChild(ok);
-      row.appendChild(cancel);
+      if (allowCancel) {
+        const cancel = mkBtn('Cancel', true);
+        cancel.addEventListener('click', () => submit({ status: 'cancel' }));
+        row.appendChild(cancel);
+      }
       form.appendChild(row);
     }
 
@@ -1887,6 +1953,19 @@ const scheduleReload = (() => {
 try {
   const es = new EventSource('/events');
   es.addEventListener('reload', () => scheduleReload());
+  es.addEventListener('mcp-notification', (event) => {
+    if (!event?.data) return;
+    let payload = null;
+    try {
+      payload = JSON.parse(event.data);
+    } catch {
+      payload = { raw: event.data };
+    }
+    if (!payload) return;
+    const server = payload?.serverName ? String(payload.serverName) : 'mcp';
+    const method = payload?.method ? String(payload.method) : 'notification';
+    appendMcpOutput(`${server} ${method}`, payload?.params?.text || payload);
+  });
 } catch {
   // ignore
 }
@@ -1939,6 +2018,7 @@ export async function startSandboxServer({ pluginDir, port = 4399, appId = '' })
   let mcpRuntime = null;
   let mcpRuntimePromise = null;
   let sandboxCallMeta = null;
+  let relayMcpNotification = null;
 
   const resetMcpRuntime = async () => {
     const runtime = mcpRuntime;
@@ -1965,7 +2045,9 @@ export async function startSandboxServer({ pluginDir, port = 4399, appId = '' })
     if (mcpRuntime) return mcpRuntime;
     if (!mcpRuntimePromise) {
       mcpRuntimePromise = (async () => {
-        const handle = await connectMcpServer(appMcpEntry);
+        const handle = await connectMcpServer(appMcpEntry, {
+          onNotification: relayMcpNotification,
+        });
         if (!handle) return null;
         const toolEntries = Array.isArray(handle.tools)
           ? handle.tools.map((tool) => {
@@ -2172,6 +2254,13 @@ export async function startSandboxServer({ pluginDir, port = 4399, appId = '' })
       sseWrite(res, event, data);
     }
   };
+  relayMcpNotification = (notification) => {
+    if (!notification) return;
+    sseBroadcast('mcp-notification', {
+      ...notification,
+      receivedAt: new Date().toISOString(),
+    });
+  };
 
   let changeSeq = 0;
   const stopWatch = startRecursiveWatcher(pluginDir, ({ eventType, filePath }) => {

package/templates/basic/docs/CHATOS_UI_PROMPTS_PROTOCOL.md

@@ -6,7 +6,7 @@ UI Prompts 是 ChatOS 的全局交互队列：任意组件（AI / MCP / UI Apps
 
 - 存储格式：`ui-prompts.jsonl`（JSON Lines 追加日志）
 - 交互生命周期：`request` → `response`
-- UI 渲染支持的 `prompt.kind` 与字段（`kv` / `choice` / `task_confirm` / `file_change_confirm`）
+- UI 渲染支持的 `prompt.kind` 与字段（`kv` / `choice` / `task_confirm` / `file_change_confirm` / `result`）
 - UI Apps 的 Host API 调用方式（`host.uiPrompts.*`）
 
 实现对照（以代码为准）：
@@ -146,7 +146,7 @@ UI Apps 的 `module` 应用通过 Host API 与 UI Prompts 交互：
 
 | 字段 | 类型 | 必填 | 说明 |
 |---|---:|---:|---|
-| `kind` | `string` | 是 | 取值：`kv` / `choice` / `task_confirm` / `file_change_confirm` |
+| `kind` | `string` | 是 | 取值：`kv` / `choice` / `task_confirm` / `file_change_confirm` / `result` |
 | `title` | `string` | 否 | UI 标题 |
 | `message` | `string` | 否 | UI 描述/说明 |
 | `source` | `string` | 否 | 来源标识（UI 显示 Tag） |
@@ -376,7 +376,36 @@ UI 渲染规则：
 
 ---
 
-## 9. 复杂交互的构建方式
+## 9. `kind="result"`：执行结果（Markdown 展示）
+
+该类型用于“执行完成后的结果通知”。UI 会以 Markdown 形式展示结果，并在用户确认后写入 `response`。
+
+### 9.1 请求结构
+
+```json
+{
+  "kind": "result",
+  "title": "执行结果",
+  "message": "已完成全部步骤。",
+  "source": "com.example.plugin:my-app",
+  "allowCancel": true,
+  "markdown": "## Done\n- step 1\n- step 2"
+}
+```
+
+字段：
+
+- `markdown`：可选字符串；作为 Markdown 内容展示
+
+### 9.2 响应结构
+
+```json
+{ "status": "ok" }
+```
+
+---
+
+## 10. 复杂交互的构建方式
 
 UI Prompts 的基本单位是一条 `request` 记录。复杂交互由多条 `request/response` 串联构成：
 
@@ -390,3 +419,4 @@ UI Prompts 的基本单位是一条 `request` 记录。复杂交互由多条 `re
 - “多选/单选”使用 `kind="choice"` 的 `multiple/options` 承载
 - “任务列表确认”使用 `kind="task_confirm"` 承载
 - “diff/命令确认”使用 `kind="file_change_confirm"` 承载
+- “执行结果通知”使用 `kind="result"` 承载

package/templates/notepad/docs/CHATOS_UI_PROMPTS_PROTOCOL.md

@@ -6,7 +6,7 @@ UI Prompts 是 ChatOS 的全局交互队列：任意组件（AI / MCP / UI Apps
 
 - 存储格式：`ui-prompts.jsonl`（JSON Lines 追加日志）
 - 交互生命周期：`request` → `response`
-- UI 渲染支持的 `prompt.kind` 与字段（`kv` / `choice` / `task_confirm` / `file_change_confirm`）
+- UI 渲染支持的 `prompt.kind` 与字段（`kv` / `choice` / `task_confirm` / `file_change_confirm` / `result`）
 - UI Apps 的 Host API 调用方式（`host.uiPrompts.*`）
 
 实现对照（以代码为准）：
@@ -146,7 +146,7 @@ UI Apps 的 `module` 应用通过 Host API 与 UI Prompts 交互：
 
 | 字段 | 类型 | 必填 | 说明 |
 |---|---:|---:|---|
-| `kind` | `string` | 是 | 取值：`kv` / `choice` / `task_confirm` / `file_change_confirm` |
+| `kind` | `string` | 是 | 取值：`kv` / `choice` / `task_confirm` / `file_change_confirm` / `result` |
 | `title` | `string` | 否 | UI 标题 |
 | `message` | `string` | 否 | UI 描述/说明 |
 | `source` | `string` | 否 | 来源标识（UI 显示 Tag） |
@@ -376,7 +376,36 @@ UI 渲染规则：
 
 ---
 
-## 9. 复杂交互的构建方式
+## 9. `kind="result"`：执行结果（Markdown 展示）
+
+该类型用于“执行完成后的结果通知”。UI 会以 Markdown 形式展示结果，并在用户确认后写入 `response`。
+
+### 9.1 请求结构
+
+```json
+{
+  "kind": "result",
+  "title": "执行结果",
+  "message": "已完成全部步骤。",
+  "source": "com.example.plugin:my-app",
+  "allowCancel": true,
+  "markdown": "## Done\n- step 1\n- step 2"
+}
+```
+
+字段：
+
+- `markdown`：可选字符串；作为 Markdown 内容展示
+
+### 9.2 响应结构
+
+```json
+{ "status": "ok" }
+```
+
+---
+
+## 10. 复杂交互的构建方式
 
 UI Prompts 的基本单位是一条 `request` 记录。复杂交互由多条 `request/response` 串联构成：
 
@@ -390,3 +419,4 @@ UI Prompts 的基本单位是一条 `request` 记录。复杂交互由多条 `re
 - “多选/单选”使用 `kind="choice"` 的 `multiple/options` 承载
 - “任务列表确认”使用 `kind="task_confirm"` 承载
 - “diff/命令确认”使用 `kind="file_change_confirm"` 承载
+- “执行结果通知”使用 `kind="result"` 承载