@zhin.js/adapter-sandbox 1.1.5 → 1.1.7

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @zhin.js/adapter-process
 
+## 1.1.7
+
+### Patch Changes
+
+- Updated dependencies [5ab6307]
+  - @zhin.js/core@1.1.42
+
+## 1.1.6
+
+### Patch Changes
+
+- badcc1f: Unify lazy JSX and HTML delivery across commands, inbound middleware and registered components. Remove the former JSX/template component runtimes, respect declared adapter HTML policies, and preserve author/generation ownership for automatic and explicit replies.
+
+  Add the optional @zhin.js/components library with composable JSXRenderable display props, shared themes, symmetric spacing and local style/text overrides. Include tables, lists, Markdown with highlighted code blocks, and display-only checkbox, radio, switch and button states; provide a reusable preview gallery. Update scaffolds, examples and public authoring documentation together.
+
+  Add optional official Tailwind static-utility compilation to inline styles. Consolidate raster rendering on @pixel.js/shotium, remove the Satori image toolkit, and align raster format contracts with actual PNG/JPEG/WebP results.
+
+  Reject cascade-dependent Tailwind values including unset, track the installed Tailwind version in the bundled theme provenance, and preserve both repository and upstream MIT attribution. Keep optional gallery dependency failures visible and document asynchronous Tailwind initialization.
+
+- Updated dependencies [badcc1f]
+  - @zhin.js/core@1.1.41
+  - @zhin.js/feature-kit@1.1.3
+  - @zhin.js/adapter@1.1.17
+  - @zhin.js/page@1.1.4
+  - @zhin.js/skill@1.1.4
+  - @zhin.js/host-http@1.1.4
+  - @zhin.js/client@1.1.9
+
 ## 1.1.5
 
 ### Patch Changes

package/README.md

@@ -44,6 +44,8 @@ Root 在 `zhin runtime start` 时装载 `@zhin.js/host-http`、`ConsoleRuntime`
 
 出站 wire 只做 JSON 封装；旧 `segment-mapper`（canonical segments）归一化上移到 gateway/core 渲染链。
 
+Sandbox 声明 `html: direct`，聊天页在隔离 iframe 中展示 canonical `html`，因此 JSX 卡片无需截图引擎即可预览。允许内联样式和 data/blob 图片；组件脚本、事件属性、外部资源、表单提交和父页面访问均被限制。高度按内容调整，超过 1200px 可在框内滚动。
+
 ## 配置
 
 **推荐（与 [minimal-bot](../../../examples/minimal-bot/) 一致）**：`plugins.sandbox.endpoints: []`，运行时提供默认 `sandbox-bot` endpoint，无需额外账号配置。

package/adapters/sandbox/index.js

@@ -12,6 +12,7 @@ export default defineAdapter({
     // Console UI 直连 URL 媒体、直接渲染 base64 内联媒体；path 由端点读盘
     // 物化为 base64 内联（sandbox 无平台上传通道）。交互段由 Console 原生承载。
     segments: {
+        html: 'direct',
         outboundMedia: ['url', 'base64', 'path'],
         interactive: 'native',
     },

package/adapters/sandbox/index.ts

@@ -17,6 +17,7 @@ export default defineAdapter<SandboxEndpointConfig>({
   // Console UI 直连 URL 媒体、直接渲染 base64 内联媒体；path 由端点读盘
   // 物化为 base64 内联（sandbox 无平台上传通道）。交互段由 Console 原生承载。
   segments: {
+    html: 'direct',
     outboundMedia: ['url', 'base64', 'path'],
     interactive: 'native',
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zhin.js/adapter-sandbox",
-  "version": "1.1.5",
+  "version": "1.1.7",
   "description": "Zhin.js Sandbox adapter for Plugin Runtime (WebSocket /sandbox)",
   "type": "module",
   "main": "./lib/index.js",
@@ -48,16 +48,16 @@
   "dependencies": {
     "lucide-react": "^0.525.0",
     "react": "^19.2.8",
-    "@zhin.js/adapter": "1.1.16",
-    "@zhin.js/client": "1.1.8",
+    "@zhin.js/adapter": "1.1.17",
+    "@zhin.js/client": "1.1.9",
     "@zhin.js/console-contract": "1.1.1",
-    "@zhin.js/core": "1.1.40",
-    "@zhin.js/feature-kit": "1.1.2",
-    "@zhin.js/host-http": "1.1.3",
+    "@zhin.js/core": "1.1.42",
+    "@zhin.js/feature-kit": "1.1.3",
+    "@zhin.js/host-http": "1.1.4",
     "@zhin.js/im-contract": "1.1.3",
     "@zhin.js/logger": "1.1.1",
-    "@zhin.js/page": "1.1.3",
-    "@zhin.js/skill": "1.1.3"
+    "@zhin.js/page": "1.1.4",
+    "@zhin.js/skill": "1.1.4"
   },
   "devDependencies": {
     "@types/react": "^19.2.18",
@@ -65,18 +65,18 @@
     "typescript": "^6.0.3",
     "vitest": "^4.1.10",
     "ws": "^8.21.1",
-    "@zhin.js/pagemanager": "1.1.4",
-    "@zhin.js/runtime": "1.1.4",
-    "zhin.js": "1.1.5"
+    "@zhin.js/pagemanager": "1.1.5",
+    "@zhin.js/runtime": "1.1.5",
+    "zhin.js": "1.1.7"
   },
   "peerDependencies": {
     "react": "^19.0.0",
-    "@zhin.js/adapter": "^1.1.16",
+    "@zhin.js/adapter": "^1.1.17",
     "@zhin.js/console-contract": "^1.1.1",
-    "@zhin.js/core": "^1.1.40",
-    "@zhin.js/host-http": "^1.1.3",
-    "@zhin.js/page": "^1.1.3",
-    "zhin.js": "^1.1.5"
+    "@zhin.js/core": "^1.1.42",
+    "@zhin.js/host-http": "^1.1.4",
+    "@zhin.js/page": "^1.1.4",
+    "zhin.js": "^1.1.7"
   },
   "peerDependenciesMeta": {
     "react": {

package/pages/index/HtmlMessage.js

@@ -0,0 +1,33 @@
+// Generated by build-plugin-runtime-entries.mjs. Do not edit.
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useEffect, useRef, useState } from 'react';
+/** HTML stays in an opaque-origin frame; only the size reporter can run scripts. */
+export default function HtmlMessage({ html }) {
+    const frame = useRef(null);
+    const [nonce] = useState(createHtmlMessageNonce);
+    const [height, setHeight] = useState(240);
+    useEffect(() => {
+        const onSize = (event) => {
+            if (event.source !== frame.current?.contentWindow
+                || event.data?.type !== 'sandbox-html-size'
+                || event.data?.nonce !== nonce)
+                return;
+            const value = event.data.height;
+            if (typeof value === 'number' && Number.isFinite(value)) {
+                setHeight(Math.ceil(Math.min(1200, Math.max(32, value))));
+            }
+        };
+        window.addEventListener('message', onSize);
+        return () => window.removeEventListener('message', onSize);
+    }, [nonce]);
+    const srcDoc = createHtmlMessageDocument(html, nonce);
+    return _jsx("iframe", { ref: frame, title: "HTML \u6D88\u606F", sandbox: "allow-scripts", srcDoc: srcDoc, className: "block w-full min-w-0 border-0 rounded-lg my-1 bg-transparent", style: { height } });
+}
+/** getRandomValues is available on ordinary HTTP LAN pages as well as HTTPS. */
+export function createHtmlMessageNonce() {
+    return Array.from(crypto.getRandomValues(new Uint8Array(16)), byte => byte.toString(16).padStart(2, '0')).join('');
+}
+/** The trusted reporter precedes raw markup so an unfinished tag cannot swallow it. */
+export function createHtmlMessageDocument(html, nonce) {
+    return `<!doctype html><html><head><meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src data: blob:; font-src data:; style-src 'unsafe-inline'; script-src 'nonce-${nonce}'; base-uri 'none'; form-action 'none'"><style>html,body{margin:0;padding:0;min-height:0}body{display:flow-root;overflow-wrap:anywhere}img{max-width:100%}</style></head><body><script nonce="${nonce}">const report=()=>parent.postMessage({type:'sandbox-html-size',nonce:'${nonce}',height:document.body.getBoundingClientRect().height},'*');new ResizeObserver(report).observe(document.body);report();<\/script>${html}</body></html>`;
+}

package/pages/index/HtmlMessage.tsx

@@ -0,0 +1,44 @@
+import React, { useEffect, useRef, useState } from 'react';
+
+/** HTML stays in an opaque-origin frame; only the size reporter can run scripts. */
+export default function HtmlMessage({ html }: { readonly html: string }) {
+  const frame = useRef<HTMLIFrameElement>(null);
+  const [nonce] = useState(createHtmlMessageNonce);
+  const [height, setHeight] = useState(240);
+
+  useEffect(() => {
+    const onSize = (event: MessageEvent) => {
+      if (event.source !== frame.current?.contentWindow
+        || event.data?.type !== 'sandbox-html-size'
+        || event.data?.nonce !== nonce) return;
+      const value = event.data.height;
+      if (typeof value === 'number' && Number.isFinite(value)) {
+        setHeight(Math.ceil(Math.min(1200, Math.max(32, value))));
+      }
+    };
+    window.addEventListener('message', onSize);
+    return () => window.removeEventListener('message', onSize);
+  }, [nonce]);
+
+  const srcDoc = createHtmlMessageDocument(html, nonce);
+
+  return <iframe
+    ref={frame}
+    title="HTML 消息"
+    sandbox="allow-scripts"
+    srcDoc={srcDoc}
+    className="block w-full min-w-0 border-0 rounded-lg my-1 bg-transparent"
+    style={{ height }}
+  />;
+}
+
+/** getRandomValues is available on ordinary HTTP LAN pages as well as HTTPS. */
+export function createHtmlMessageNonce(): string {
+  return Array.from(crypto.getRandomValues(new Uint8Array(16)),
+    byte => byte.toString(16).padStart(2, '0')).join('');
+}
+
+/** The trusted reporter precedes raw markup so an unfinished tag cannot swallow it. */
+export function createHtmlMessageDocument(html: string, nonce: string): string {
+  return `<!doctype html><html><head><meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src data: blob:; font-src data:; style-src 'unsafe-inline'; script-src 'nonce-${nonce}'; base-uri 'none'; form-action 'none'"><style>html,body{margin:0;padding:0;min-height:0}body{display:flow-root;overflow-wrap:anywhere}img{max-width:100%}</style></head><body><script nonce="${nonce}">const report=()=>parent.postMessage({type:'sandbox-html-size',nonce:'${nonce}',height:document.body.getBoundingClientRect().height},'*');new ResizeObserver(report).observe(document.body);report();<\/script>${html}</body></html>`;
+}

package/pages/index/SandboxChat.js

@@ -5,6 +5,7 @@ import { cn, CodeBlock, MarkdownContent, resolveMediaSrc, pickMediaRawUrl, } fro
 import { buildSandboxWebSocketUrl } from './sandboxTransport';
 import { User, Bot, Users, Trash2, Send, Hash, MessageSquare, Wifi, WifiOff, Smile, Image, X, Check, Info, Search, Video, Music, Plus, PanelRight, ExternalLink, RefreshCw, Sparkles, Activity, Wrench, Coins, CircleAlert, Gauge, SlidersHorizontal, FolderOpen, ShieldCheck, Network, Square, RotateCcw, FileDiff, Terminal, FlaskConical, ChevronDown, FileDown, ListChecks, } from 'lucide-react';
 import RichTextEditor, {} from './RichTextEditor';
+import HtmlMessage from './HtmlMessage.js';
 import { agentStudioPath, buildAgentRunReport, buildSandboxSessionKey, cancelAgentTask, deriveAgentRunSteps, deriveTaskRuns, deriveWorkbenchArtifacts, fetchAgentTrace, loadCachedAgentTrace, mergeTraceSnapshot, presentTraceEvent, summarizeTrace, saveCachedAgentTrace, } from './agentTrace.js';
 import { createDefaultPlaygroundState, loadPlaygroundState, savePlaygroundState, } from './playgroundState.js';
 export default function Sandbox() {
@@ -359,6 +360,8 @@ export default function Sandbox() {
                 case 'markdown':
                 case 'md':
                     return _jsx(MarkdownContent, { text: String(d.text ?? d.content ?? ''), className: isSent ? 'zhin-markdown--inverse' : undefined }, index);
+                case 'html':
+                    return _jsx(HtmlMessage, { html: String(d.html ?? '') }, index);
                 case 'code':
                     return _jsx(CodeBlock, { code: String(d.code ?? d.text ?? d.content ?? ''), language: String(d.language ?? d.lang ?? '') }, index);
                 case 'mention':

package/pages/index/SandboxChat.tsx

@@ -18,6 +18,7 @@ import {
   FileDown, ListChecks,
 } from 'lucide-react';
 import RichTextEditor, { type RichTextEditorRef } from './RichTextEditor';
+import HtmlMessage from './HtmlMessage.js';
 import {
   agentStudioPath,
   buildAgentRunReport,
@@ -409,6 +410,8 @@ export default function Sandbox() {
                 case 'markdown':
                 case 'md':
                     return <MarkdownContent key={index} text={String(d.text ?? d.content ?? '')} className={isSent ? 'zhin-markdown--inverse' : undefined} />
+                case 'html':
+                    return <HtmlMessage key={index} html={String(d.html ?? '')} />
                 case 'code':
                     return <CodeBlock key={index} code={String(d.code ?? d.text ?? d.content ?? '')} language={String(d.language ?? d.lang ?? '')} />
                 case 'mention':