nextclaw 0.44.1 → 0.45.0

package/resources/apps/nextclaw-portable-runtime-lab/panels/nextclaw-portable-runtime-lab-panel.panel/assets/app.js

@@ -0,0 +1,266 @@
+const actions = {
+  counterRead: "nextclaw-portable-runtime-lab-state.counter_read",
+  counterIncrement: "nextclaw-portable-runtime-lab-state.counter_increment",
+  recordsSeed: "nextclaw-portable-runtime-lab-state.records_seed",
+  recordsList: "nextclaw-portable-runtime-lab-state.records_list",
+  recordUpsert: "nextclaw-portable-runtime-lab-state.record_upsert",
+  recordDelete: "nextclaw-portable-runtime-lab-state.record_delete",
+  dataSnapshot: "nextclaw-portable-runtime-lab-state.data_snapshot",
+  stateRuntime: "nextclaw-portable-runtime-lab-state.runtime_info",
+  networkAllowed: "nextclaw-portable-runtime-lab-capabilities.network_allowed",
+  networkDenied: "nextclaw-portable-runtime-lab-capabilities.network_denied",
+  structuredFailure: "nextclaw-portable-runtime-lab-capabilities.structured_failure",
+  timeout: "nextclaw-portable-runtime-lab-capabilities.simulate_timeout",
+  capabilityRuntime: "nextclaw-portable-runtime-lab-capabilities.runtime_info",
+  residentStatus: "nextclaw-portable-runtime-lab-resident.resident_status",
+  residentEmitEvent: "nextclaw-portable-runtime-lab-resident.resident_emit_event",
+  residentReset: "nextclaw-portable-runtime-lab-resident.resident_reset",
+  providerStatus: "nextclaw-portable-runtime-lab-provider.provider_status",
+  composeContact: "nextclaw-portable-runtime-lab-composition.compose_contact",
+  providerDenied: "nextclaw-portable-runtime-lab-composition.provider_denied",
+};
+
+const scenarios = {
+  shared: document.querySelector('[data-scenario="shared"]'),
+  data: document.querySelector('[data-scenario="data"]'),
+  resident: document.querySelector('[data-scenario="resident"]'),
+  composition: document.querySelector('[data-scenario="composition"]'),
+  network: document.querySelector('[data-scenario="network"]'),
+  failure: document.querySelector('[data-scenario="failure"]'),
+};
+
+const residentElements = {
+  epoch: document.querySelector('[data-resident="epoch"]'),
+  memoryCount: document.querySelector('[data-resident="memory-count"]'),
+  eventCount: document.querySelector('[data-resident="event-count"]'),
+  lastEvent: document.querySelector('[data-resident="last-event"]'),
+  events: document.querySelector("[data-resident-events]"),
+};
+
+const compositionElements = {
+  name: document.querySelector('[data-field="contact-name"]'),
+  email: document.querySelector('[data-field="contact-email"]'),
+  tags: document.querySelector('[data-field="contact-tags"]'),
+};
+
+const dataElements = {
+  id: document.querySelector('[data-field="record-id"]'),
+  title: document.querySelector('[data-field="record-title"]'),
+  status: document.querySelector('[data-field="record-status"]'),
+  records: document.querySelector("[data-records]"),
+};
+
+function bridge() {
+  const serviceActions = window.nextclaw?.serviceActions;
+  if (!serviceActions) throw new Error("NextClaw Panel bridge 尚未就绪，请刷新后重试。");
+  return serviceActions;
+}
+
+async function invoke(actionId, input = {}) {
+  return await bridge().invoke(actionId, input);
+}
+
+function setState(scenario, state, value) {
+  const container = scenarios[scenario];
+  const result = container.querySelector(".result");
+  container.dataset.state = state;
+  result.textContent = typeof value === "string" ? value : JSON.stringify(value, null, 2);
+  for (const button of container.querySelectorAll("button")) {
+    button.disabled = state === "pending";
+  }
+}
+
+function errorValue(error) {
+  return {
+    code: error?.code ?? "ERROR",
+    message: error instanceof Error ? error.message : String(error),
+  };
+}
+
+async function run(scenario, operation) {
+  setState(scenario, "pending", "正在通过宿主执行…");
+  try {
+    const result = await operation();
+    setState(scenario, "success", result);
+  } catch (error) {
+    setState(scenario, "error", errorValue(error));
+  }
+}
+
+function renderRecords(data) {
+  const records = Array.isArray(data?.records) ? data.records : [];
+  dataElements.records.replaceChildren();
+  if (records.length === 0) {
+    const row = document.createElement("tr");
+    const cell = document.createElement("td");
+    cell.colSpan = 5;
+    cell.textContent = "当前没有记录";
+    row.append(cell);
+    dataElements.records.append(row);
+    return;
+  }
+  for (const record of records) {
+    const row = document.createElement("tr");
+    for (const value of [
+      record.id,
+      record.title,
+      record.status,
+      Array.isArray(record.tags) ? record.tags.join(", ") : "",
+      record.version,
+    ]) {
+      const cell = document.createElement("td");
+      cell.textContent = String(value ?? "");
+      row.append(cell);
+    }
+    dataElements.records.append(row);
+  }
+}
+
+async function refreshData() {
+  const data = await invoke(actions.recordsList);
+  renderRecords(data);
+  return {
+    revision: data.revision,
+    recordCount: data.recordCount,
+    contentHash: data.contentHash,
+    persistedBy: data.persistedBy,
+  };
+}
+
+function recordInput() {
+  return {
+    id: dataElements.id.value.trim(),
+    title: dataElements.title.value.trim(),
+    status: dataElements.status.value,
+    tags: ["panel", "verification"],
+  };
+}
+
+function renderResident(data) {
+  residentElements.epoch.textContent = String(data?.instanceEpoch ?? "—");
+  residentElements.memoryCount.textContent = String(data?.inMemoryEventCount ?? "—");
+  residentElements.eventCount.textContent = String(data?.eventCount ?? "—");
+  residentElements.lastEvent.textContent = data?.lastEventKind
+    ? `${data.lastEventKind} · ${data.lastEventId}`
+    : "—";
+  const events = Array.isArray(data?.recentEvents) ? [...data.recentEvents].reverse() : [];
+  residentElements.events.replaceChildren();
+  if (events.length === 0) {
+    const row = document.createElement("tr");
+    const cell = document.createElement("td");
+    cell.colSpan = 3;
+    cell.textContent = "当前没有事件";
+    row.append(cell);
+    residentElements.events.append(row);
+    return;
+  }
+  for (const event of events) {
+    const row = document.createElement("tr");
+    for (const value of [event.eventId, event.kind, event.triggeredAt]) {
+      const cell = document.createElement("td");
+      cell.textContent = String(value ?? "");
+      row.append(cell);
+    }
+    residentElements.events.append(row);
+  }
+}
+
+async function refreshResident() {
+  const data = await invoke(actions.residentStatus);
+  renderResident(data);
+  return {
+    started: data.started,
+    instanceEpoch: data.instanceEpoch,
+    inMemoryEventCount: data.inMemoryEventCount,
+    eventCount: data.eventCount,
+    lastEventId: data.lastEventId,
+    persistedBy: data.persistedBy,
+  };
+}
+
+const operations = {
+  shared: () => run("shared", async () => {
+    const state = await invoke(actions.stateRuntime);
+    const capability = await invoke(actions.capabilityRuntime);
+    return {
+      sameRunner: state.runnerPid === capability.runnerPid,
+      stateComponent: state,
+      capabilityComponent: capability,
+    };
+  }),
+  "data-refresh": () => run("data", refreshData),
+  "data-seed": () => run("data", async () => {
+    await invoke(actions.recordsSeed);
+    return await refreshData();
+  }),
+  "data-save": () => run("data", async () => {
+    await invoke(actions.recordUpsert, recordInput());
+    return await refreshData();
+  }),
+  "data-delete": () => run("data", async () => {
+    await invoke(actions.recordDelete, { id: dataElements.id.value.trim() });
+    return await refreshData();
+  }),
+  "resident-refresh": () => run("resident", refreshResident),
+  "resident-event": () => run("resident", async () => {
+    await invoke(actions.residentEmitEvent, {
+      eventId: `panel-${Date.now()}`,
+      kind: "panel-manual",
+      triggeredAt: new Date().toISOString(),
+    });
+    return await refreshResident();
+  }),
+  "resident-reset": () => run("resident", async () => {
+    await invoke(actions.residentReset);
+    return await refreshResident();
+  }),
+  "composition-run": () => run("composition", () => invoke(actions.composeContact, {
+    name: compositionElements.name.value,
+    email: compositionElements.email.value,
+    tags: compositionElements.tags.value.split(",").map((tag) => tag.trim()),
+  })),
+  "provider-status": () => run("composition", () => invoke(actions.providerStatus)),
+  "provider-denied": () => run("composition", () => invoke(actions.providerDenied)),
+  "network-allowed": () => run("network", () => invoke(actions.networkAllowed)),
+  "network-denied": () => run("network", () => invoke(actions.networkDenied)),
+  "structured-failure": () => run("failure", async () => {
+    try {
+      await invoke(actions.structuredFailure);
+      return { failedAsExpected: false };
+    } catch (error) {
+      return { failedAsExpected: true, error: errorValue(error) };
+    }
+  }),
+  "timeout-recovery": () => run("failure", async () => {
+    let timeout;
+    try {
+      await invoke(actions.timeout);
+      timeout = { timedOutAsExpected: false };
+    } catch (error) {
+      timeout = { timedOutAsExpected: error?.code === "SERVICE_APP_RUNTIME_FAILED", error: errorValue(error) };
+    }
+    const persistedState = await invoke(actions.dataSnapshot);
+    const recoveredRuntime = await invoke(actions.stateRuntime);
+    return { timeout, recovered: true, persistedState, recoveredRuntime };
+  }),
+};
+
+for (const button of document.querySelectorAll("[data-run]")) {
+  button.addEventListener("click", () => operations[button.dataset.run]?.());
+}
+
+void refreshResident().then((result) => {
+  setState("resident", "success", result);
+}).catch((error) => {
+  setState("resident", "error", errorValue(error));
+});
+
+const residentPoll = setInterval(() => {
+  if (document.visibilityState !== "visible") return;
+  void refreshResident().then((result) => {
+    setState("resident", "success", result);
+  }).catch((error) => {
+    setState("resident", "error", errorValue(error));
+  });
+}, 2000);
+window.addEventListener("pagehide", () => clearInterval(residentPoll), { once: true });

package/resources/apps/nextclaw-portable-runtime-lab/panels/nextclaw-portable-runtime-lab-panel.panel/assets/style.css

@@ -0,0 +1,87 @@
+:root {
+  color-scheme: light dark;
+  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  color: #dce9f8;
+  background: #07111f;
+}
+
+* { box-sizing: border-box; }
+body { margin: 0; min-width: 300px; background: radial-gradient(circle at 85% -10%, #123763 0, transparent 36%), #07111f; }
+button, pre { font: inherit; }
+.shell { width: min(1020px, 100%); margin: 0 auto; padding: 34px 24px 48px; }
+.hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
+.eyebrow { margin: 0 0 10px; color: #5eead4; font-size: 11px; font-weight: 700; letter-spacing: .14em; }
+h1 { margin: 0; font-size: clamp(28px, 5vw, 46px); letter-spacing: -.04em; line-height: 1.05; }
+.lead { max-width: 660px; margin: 14px 0 0; color: #91a8c2; font-size: 15px; line-height: 1.7; }
+.live-badge { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; border: 1px solid #214363; border-radius: 999px; padding: 7px 11px; color: #b8d2ec; font-size: 12px; }
+.live-badge i { width: 7px; height: 7px; border-radius: 50%; background: #2dd4bf; box-shadow: 0 0 0 4px #2dd4bf1f; }
+.topology { display: grid; grid-template-columns: 1fr auto 1.12fr auto 1fr; align-items: center; gap: 12px; margin: 34px 0; color: #4f7194; }
+.node { min-width: 0; border: 1px solid #1c3550; border-radius: 14px; padding: 14px; text-align: center; color: #dce9f8; background: #0b1a2bba; font-weight: 650; }
+.node small { display: block; margin-top: 5px; color: #6f8aa8; font-size: 11px; font-weight: 500; }
+.node.host { border-color: #2563eb80; background: linear-gradient(135deg, #0f2945, #10213b); box-shadow: inset 0 0 24px #2563eb16; }
+.scenario-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
+.scenario { display: flex; min-height: 280px; flex-direction: column; gap: 18px; border: 1px solid #18314c; border-radius: 18px; padding: 20px; background: #0a1828dc; transition: border-color .2s, background .2s; }
+.scenario[data-state="pending"] { border-color: #38bdf866; background: #0b1d31; }
+.scenario[data-state="success"] { border-color: #2dd4bf66; }
+.scenario[data-state="error"] { border-color: #fb718566; }
+.scenario.benchmark-evidence { grid-column: 1 / -1; min-height: auto; }
+.scenario.data-workbench { grid-column: 1 / -1; min-height: auto; }
+.scenario.resident-workbench { grid-column: 1 / -1; min-height: auto; }
+.scenario.composition-workbench { grid-column: 1 / -1; min-height: auto; }
+.scenario-copy { display: flex; gap: 13px; }
+.number { color: #5eead4; font-size: 12px; font-weight: 800; line-height: 25px; }
+h2 { margin: 0; font-size: 17px; letter-spacing: -.015em; }
+.scenario p { margin: 7px 0 0; color: #8099b5; font-size: 13px; line-height: 1.55; }
+.button-row { display: flex; flex-wrap: wrap; gap: 9px; }
+button { min-height: 36px; border: 1px solid #3b82f6; border-radius: 9px; padding: 8px 13px; color: white; background: #2563eb; font-size: 13px; font-weight: 650; cursor: pointer; transition: background .15s, border-color .15s, transform .15s; }
+button:hover:not(:disabled) { background: #1d4ed8; }
+button:active:not(:disabled) { transform: translateY(1px); }
+button:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; }
+button.secondary { border-color: #2b4866; color: #bed0e3; background: #10243a; }
+button.secondary:hover:not(:disabled) { background: #16304b; }
+button.danger { border-color: #9f3b52; background: #7f1d36; }
+button.danger:hover:not(:disabled) { background: #9f2444; }
+button:disabled { cursor: wait; opacity: .55; }
+.data-editor { display: grid; grid-template-columns: minmax(120px, .7fr) minmax(220px, 2fr) minmax(110px, .6fr); gap: 10px; }
+.data-editor label { display: grid; gap: 6px; color: #7892ae; font-size: 11px; font-weight: 650; }
+.data-editor input, .data-editor select { width: 100%; min-height: 38px; border: 1px solid #23425f; border-radius: 9px; padding: 8px 10px; color: #dce9f8; background: #071321; font: inherit; font-size: 13px; }
+.data-editor input:focus, .data-editor select:focus { outline: 2px solid #3b82f6; outline-offset: 1px; }
+.data-table-wrap { overflow-x: auto; border: 1px solid #142a40; border-radius: 11px; }
+table { width: 100%; border-collapse: collapse; font-size: 12px; }
+th, td { padding: 9px 11px; border-bottom: 1px solid #142a40; text-align: left; }
+th { color: #7892ae; background: #071321; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
+td { color: #a8bfd7; }
+tbody tr:last-child td { border-bottom: 0; }
+.data-meta { flex: none; min-height: 58px; max-height: 110px; }
+.composition-editor { grid-template-columns: 1fr 1.3fr 1fr; }
+.composition-result { min-height: 130px; }
+.resident-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; }
+.resident-metrics div { min-width: 0; border: 1px solid #18314c; border-radius: 12px; padding: 12px; background: #071321; }
+.resident-metrics dt { color: #7892ae; font-size: 10px; }
+.resident-metrics dd { overflow: hidden; margin: 6px 0 0; color: #9be8dc; font-family: "SFMono-Regular", Consolas, monospace; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
+.result { flex: 1; min-height: 92px; max-height: 190px; overflow: auto; margin: auto 0 0; border: 1px solid #142a40; border-radius: 11px; padding: 12px; color: #8eabc8; background: #050d17; font-family: "SFMono-Regular", Consolas, monospace; font-size: 11px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
+.scenario[data-state="success"] .result { color: #9be8dc; }
+.scenario[data-state="error"] .result { color: #fda4af; }
+.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; }
+.metric-grid div { border: 1px solid #18314c; border-radius: 12px; padding: 13px; background: #071321; }
+.metric-grid dt { min-height: 34px; color: #7892ae; font-size: 11px; line-height: 1.45; }
+.metric-grid dd { margin: 7px 0 0; color: #9be8dc; font-family: "SFMono-Regular", Consolas, monospace; font-size: 18px; font-weight: 700; }
+.metric-grid small { color: #6884a2; font-size: 10px; font-weight: 600; }
+.benchmark-note { margin-top: 0 !important; }
+footer { margin-top: 18px; border-left: 2px solid #2dd4bf; padding: 8px 0 8px 14px; color: #718aa5; font-size: 12px; line-height: 1.65; }
+footer strong { color: #a8bfd7; }
+
+@media (max-width: 720px) {
+  .shell { padding: 24px 15px 36px; }
+  .hero { flex-direction: column; }
+  .topology { grid-template-columns: 1fr; }
+  .topology > span { transform: rotate(90deg); text-align: center; }
+  .scenario-grid { grid-template-columns: 1fr; }
+  .data-editor { grid-template-columns: 1fr; }
+  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .resident-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  * { scroll-behavior: auto !important; transition: none !important; }
+}

package/resources/apps/nextclaw-portable-runtime-lab/panels/nextclaw-portable-runtime-lab-panel.panel/index.html

@@ -0,0 +1,154 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>开发者验证台</title>
+    <link rel="stylesheet" href="assets/style.css" />
+  </head>
+  <body>
+    <main class="shell">
+      <header class="hero">
+        <div>
+          <p class="eyebrow">RUST · WASM COMPONENT · HOST CAPABILITIES</p>
+          <h1>开发者验证台</h1>
+          <p class="lead">这里是四个日常小应用背后的技术证据。普通体验请直接打开「今日清单」「灵感便签」「专注小钟」或「联系人整理」。</p>
+        </div>
+        <span class="live-badge"><i></i> 可交互 Demo</span>
+      </header>
+
+      <section class="topology" aria-label="运行拓扑">
+        <div class="node guest">Action Components<small>State + Capability</small></div>
+        <span aria-hidden="true">→</span>
+        <div class="node host">Shared Runner<small>Wasmtime + WIT</small></div>
+        <span aria-hidden="true">←</span>
+        <div class="node guest">Resident Component<small>Retained instance + events</small></div>
+      </section>
+
+      <section class="scenario-grid" aria-label="验证场景">
+        <article class="scenario" data-scenario="shared">
+          <div class="scenario-copy">
+            <span class="number">01</span>
+            <div><h2>共享宿主</h2><p>分别调用两个 Component，比较 runner PID 与已加载模块数。</p></div>
+          </div>
+          <button type="button" data-run="shared">验证同一进程</button>
+          <pre class="result" aria-live="polite">尚未执行</pre>
+        </article>
+
+        <article class="scenario data-workbench" data-scenario="data">
+          <div class="scenario-copy">
+            <span class="number">02</span>
+            <div><h2>结构化数据与持久化证据</h2><p>在 Rust/WASM 中执行 CRUD；Guest 只使用宿主 KV，数据位置与生命周期仍由 NextClaw 管理。</p></div>
+          </div>
+          <div class="data-editor">
+            <label>ID<input data-field="record-id" value="delta" maxlength="48" /></label>
+            <label>标题<input data-field="record-title" value="从 Agent 与 Panel 共用 Action" /></label>
+            <label>状态<select data-field="record-status"><option value="active">active</option><option value="pending">pending</option><option value="done">done</option></select></label>
+          </div>
+          <div class="button-row">
+            <button type="button" data-run="data-refresh" class="secondary">读取数据</button>
+            <button type="button" data-run="data-seed">生成 3 条基线</button>
+            <button type="button" data-run="data-save">创建或修改</button>
+            <button type="button" data-run="data-delete" class="danger">删除 ID</button>
+          </div>
+          <div class="data-table-wrap">
+            <table>
+              <thead><tr><th>ID</th><th>标题</th><th>状态</th><th>标签</th><th>版本</th></tr></thead>
+              <tbody data-records><tr><td colspan="5">尚未读取</td></tr></tbody>
+            </table>
+          </div>
+          <pre class="result data-meta" aria-live="polite">尚未执行</pre>
+        </article>
+
+        <article class="scenario resident-workbench" data-scenario="resident">
+          <div class="scenario-copy">
+            <span class="number">03</span>
+            <div><h2>Resident Service 与后台事件</h2><p>宿主保留同一个 WASM 实例，每秒投递真实 timer event；关闭 Panel 后仍继续。内存计数证明实例连续，durable cursor 证明跨重启恢复。</p></div>
+          </div>
+          <div class="button-row">
+            <button type="button" data-run="resident-refresh" class="secondary">读取当前状态</button>
+            <button type="button" data-run="resident-event">投递手动事件</button>
+            <button type="button" data-run="resident-reset" class="danger">重置事件证据</button>
+          </div>
+          <dl class="resident-metrics">
+            <div><dt>实例代次</dt><dd data-resident="epoch">—</dd></div>
+            <div><dt>内存事件数</dt><dd data-resident="memory-count">—</dd></div>
+            <div><dt>持久事件数</dt><dd data-resident="event-count">—</dd></div>
+            <div><dt>最后事件</dt><dd data-resident="last-event">—</dd></div>
+          </dl>
+          <div class="data-table-wrap">
+            <table>
+              <thead><tr><th>Event ID</th><th>类型</th><th>宿主投递时间</th></tr></thead>
+              <tbody data-resident-events><tr><td colspan="3">尚未读取</td></tr></tbody>
+            </table>
+          </div>
+          <pre class="result data-meta" aria-live="polite">尚未执行</pre>
+        </article>
+
+        <article class="scenario composition-workbench" data-scenario="composition">
+          <div class="scenario-copy">
+            <span class="number">04</span>
+            <div><h2>Component Provider 与跨模块组合</h2><p>Consumer 不包含联系人规范化逻辑，而是通过宿主调用 manifest 明确声明的独立 Provider；未声明的 Provider 会被宿主拒绝。</p></div>
+          </div>
+          <div class="data-editor composition-editor">
+            <label>姓名<input data-field="contact-name" value="  Ada   Lovelace  " /></label>
+            <label>邮箱<input data-field="contact-email" value=" ADA@EXAMPLE.COM " /></label>
+            <label>标签<input data-field="contact-tags" value="AI, ai, Math" /></label>
+          </div>
+          <div class="button-row">
+            <button type="button" data-run="composition-run">执行组合工作流</button>
+            <button type="button" data-run="provider-status" class="secondary">读取 Provider 状态</button>
+            <button type="button" data-run="provider-denied" class="danger">验证未声明拒绝</button>
+          </div>
+          <pre class="result composition-result" aria-live="polite">尚未执行</pre>
+        </article>
+
+        <article class="scenario" data-scenario="network">
+          <div class="scenario-copy">
+            <span class="number">05</span>
+            <div><h2>受控网络</h2><p>同一个 HTTP 原语：manifest 白名单内放行，白名单外明确拒绝。</p></div>
+          </div>
+          <div class="button-row">
+            <button type="button" data-run="network-allowed">允许的请求</button>
+            <button type="button" data-run="network-denied" class="secondary">拒绝的请求</button>
+          </div>
+          <pre class="result" aria-live="polite">尚未执行</pre>
+        </article>
+
+        <article class="scenario" data-scenario="failure">
+          <div class="scenario-copy">
+            <span class="number">06</span>
+            <div><h2>失败与恢复</h2><p>观察 Guest 错误与执行超时；超时后 runner 自动重建，并重新读取相同数据快照。</p></div>
+          </div>
+          <div class="button-row">
+            <button type="button" data-run="structured-failure" class="danger">结构化失败</button>
+            <button type="button" data-run="timeout-recovery" class="secondary">超时并恢复</button>
+          </div>
+          <pre class="result" aria-live="polite">尚未执行</pre>
+        </article>
+
+        <article class="scenario benchmark-evidence">
+          <div class="scenario-copy">
+            <span class="number">07</span>
+            <div><h2>内存密度基准</h2><p>Apple Silicon、Node 22.16 上重复三轮；每个 Component 使用独立 artifact 路径，每个 Node Service 使用独立进程。</p></div>
+          </div>
+          <dl class="metric-grid">
+            <div><dt>空 runner</dt><dd>7.70–7.73 <small>MiB</small></dd></div>
+            <div><dt>1 Component</dt><dd>34.17–36.77 <small>MiB</small></dd></div>
+            <div><dt>5 Components</dt><dd>43.86–44.72 <small>MiB</small></dd></div>
+            <div><dt>10 Components</dt><dd>50.84–53.17 <small>MiB</small></dd></div>
+            <div><dt>1 Node Service</dt><dd>39.88–39.91 <small>MiB</small></dd></div>
+            <div><dt>5 Node Services</dt><dd>199.61–199.70 <small>MiB</small></dd></div>
+            <div><dt>10 Node Services</dt><dd>399.25–399.47 <small>MiB</small></dd></div>
+          </dl>
+          <p class="benchmark-note">这是开发机上的密度证据，不是等价业务 workload 的最终结论；Resident 密度、CPU/延迟和跨平台仍待验证。</p>
+        </article>
+      </section>
+
+      <footer>
+        <strong>当前覆盖：</strong>Action、Agent Tool、真实数据、Resident、后台事件、Component Provider、跨组件组合、网络权限、故障恢复与共享宿主。
+      </footer>
+    </main>
+    <script src="assets/app.js"></script>
+  </body>
+</html>

package/resources/apps/nextclaw-portable-runtime-lab/panels/nextclaw-portable-runtime-lab-panel.panel/panel-app.json

@@ -0,0 +1,29 @@
+{
+  "id": "nextclaw-portable-runtime-lab-panel",
+  "title": "开发者验证台",
+  "description": "查看四个日常小应用背后的 Rust/WASM 运行链证据。",
+  "entry": "index.html",
+  "actions": [
+    "nextclaw-portable-runtime-lab-state.counter_read",
+    "nextclaw-portable-runtime-lab-state.counter_increment",
+    "nextclaw-portable-runtime-lab-state.records_seed",
+    "nextclaw-portable-runtime-lab-state.records_list",
+    "nextclaw-portable-runtime-lab-state.record_upsert",
+    "nextclaw-portable-runtime-lab-state.record_delete",
+    "nextclaw-portable-runtime-lab-state.data_snapshot",
+    "nextclaw-portable-runtime-lab-state.runtime_info",
+    "nextclaw-portable-runtime-lab-capabilities.network_allowed",
+    "nextclaw-portable-runtime-lab-capabilities.network_denied",
+    "nextclaw-portable-runtime-lab-capabilities.structured_failure",
+    "nextclaw-portable-runtime-lab-capabilities.simulate_timeout",
+    "nextclaw-portable-runtime-lab-capabilities.runtime_info",
+    "nextclaw-portable-runtime-lab-resident.resident_status",
+    "nextclaw-portable-runtime-lab-resident.resident_emit_event",
+    "nextclaw-portable-runtime-lab-resident.resident_reset",
+    "nextclaw-portable-runtime-lab-resident.runtime_info",
+    "nextclaw-portable-runtime-lab-provider.provider_status",
+    "nextclaw-portable-runtime-lab-composition.compose_contact",
+    "nextclaw-portable-runtime-lab-composition.provider_denied",
+    "nextclaw-portable-runtime-lab-composition.runtime_info"
+  ]
+}