nextclaw 0.44.2 → 0.45.0

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

@@ -0,0 +1,117 @@
+const actionIds = {
+  list: "nextclaw-portable-runtime-lab-state.records_list",
+  upsert: "nextclaw-portable-runtime-lab-state.record_upsert",
+  remove: "nextclaw-portable-runtime-lab-state.record_delete",
+};
+
+const elements = {
+  form: document.querySelector("[data-note-form]"),
+  input: document.querySelector("[data-note-input]"),
+  search: document.querySelector("[data-search]"),
+  count: document.querySelector("[data-note-count]"),
+  characters: document.querySelector("[data-character-count]"),
+  grid: document.querySelector("[data-notes-grid]"),
+  notice: document.querySelector("[data-notice]"),
+  revision: document.querySelector("[data-proof-revision]"),
+};
+
+let notes = [];
+
+function serviceActions() {
+  const bridge = window.nextclaw?.serviceActions;
+  if (!bridge) throw new Error("应用还没有连接到 NextClaw，请刷新后重试。");
+  return bridge;
+}
+
+async function invoke(actionId, input = {}) {
+  return await serviceActions().invoke(actionId, input);
+}
+
+function setNotice(message, tone = "") {
+  elements.notice.textContent = message;
+  elements.notice.dataset.tone = tone;
+}
+
+function noteCard(note, index) {
+  const card = document.createElement("article");
+  card.className = `note-card color-${index % 4}`;
+  const content = document.createElement("p");
+  content.textContent = note.title;
+  const footer = document.createElement("footer");
+  const version = document.createElement("span");
+  version.textContent = `保存于版本 ${note.version}`;
+  const remove = document.createElement("button");
+  remove.type = "button";
+  remove.dataset.noteRemove = note.id;
+  remove.textContent = "删除";
+  footer.append(version, remove);
+  card.append(content, footer);
+  return card;
+}
+
+function render() {
+  const query = elements.search.value.trim().toLocaleLowerCase("zh-CN");
+  const filtered = [...notes]
+    .sort((left, right) => right.version - left.version)
+    .filter((note) => !query || note.title.toLocaleLowerCase("zh-CN").includes(query));
+  elements.grid.replaceChildren();
+  if (filtered.length === 0) {
+    const empty = document.createElement("div");
+    empty.className = "empty";
+    empty.innerHTML = query
+      ? "<strong>没有找到相关便签</strong><span>换个关键词试试。</span>"
+      : "<strong>便签盒还是空的</strong><span>写下刚刚想到的第一句话吧。</span>";
+    elements.grid.append(empty);
+  } else {
+    filtered.forEach((note, index) => elements.grid.append(noteCard(note, index)));
+  }
+  elements.count.textContent = `${notes.length} 张便签`;
+}
+
+async function refresh() {
+  const data = await invoke(actionIds.list);
+  notes = (Array.isArray(data.records) ? data.records : [])
+    .filter((record) => Array.isArray(record.tags) && record.tags.includes("note"));
+  elements.revision.textContent = `revision ${data.revision} · ${data.contentHash}`;
+  render();
+}
+
+async function run(operation, successMessage) {
+  setNotice("正在保存…");
+  try {
+    await operation();
+    await refresh();
+    setNotice(successMessage, "success");
+  } catch (error) {
+    setNotice(error instanceof Error ? error.message : String(error), "error");
+  }
+}
+
+elements.input.addEventListener("input", () => {
+  elements.characters.textContent = `${elements.input.value.length} / 800`;
+});
+elements.search.addEventListener("input", render);
+
+elements.form.addEventListener("submit", (event) => {
+  event.preventDefault();
+  const content = elements.input.value.trim();
+  if (!content) return;
+  void run(async () => {
+    await invoke(actionIds.upsert, {
+      id: `note-${Date.now().toString(36)}`,
+      title: content,
+      status: "note",
+      tags: ["note", "quick-capture"],
+    });
+    elements.input.value = "";
+    elements.characters.textContent = "0 / 800";
+  }, "便签已保存");
+});
+
+elements.grid.addEventListener("click", (event) => {
+  const target = event.target instanceof Element ? event.target : null;
+  const id = target?.closest("[data-note-remove]")?.dataset.noteRemove;
+  if (id) void run(() => invoke(actionIds.remove, { id }), "便签已删除");
+});
+
+void refresh().catch((error) => setNotice(error instanceof Error ? error.message : String(error), "error"));

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

@@ -0,0 +1,41 @@
+:root { color-scheme: light; font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif; color: #3d342b; background: #f7f0df; }
+* { box-sizing: border-box; }
+body { margin: 0; min-width: 320px; background: linear-gradient(135deg, #fffdf5, #f5ecd8 58%, #eee3cf); }
+button, input, textarea { font: inherit; }
+button { cursor: pointer; }
+.app-shell { width: min(900px, calc(100% - 32px)); margin: 0 auto; padding: 38px 0 52px; }
+.hero { margin-bottom: 24px; }
+.eyebrow { margin: 0 0 8px; color: #b36e32; font-size: 12px; font-weight: 800; letter-spacing: .18em; }
+h1 { margin: 0; font-family: Georgia, "Noto Serif SC", serif; font-size: clamp(36px, 7vw, 58px); letter-spacing: -.04em; }
+.hero > p:last-child { margin: 8px 0 0; color: #776b5f; }
+.note-composer { padding: 16px; border: 1px solid #eadcc2; border-radius: 20px; background: rgba(255,255,255,.82); box-shadow: 0 18px 55px rgba(91,68,33,.1); }
+.note-composer textarea { width: 100%; resize: vertical; border: 0; outline: 0; padding: 4px; color: #463b30; background: transparent; font-size: 17px; line-height: 1.65; }
+.note-composer > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
+.note-composer span { color: #a19483; font-size: 12px; }
+.note-composer button { border: 0; border-radius: 12px; padding: 11px 20px; color: #fff; background: #8e5c32; font-weight: 700; }
+.toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 24px 2px 14px; color: #827668; font-size: 13px; }
+.toolbar label { display: grid; gap: 6px; flex: 1; max-width: 340px; }
+.toolbar input { width: 100%; border: 1px solid #dfd1b9; border-radius: 12px; outline: 0; padding: 10px 12px; color: #473d32; background: rgba(255,255,255,.65); }
+.notes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
+.note-card { display: flex; min-height: 190px; flex-direction: column; justify-content: space-between; padding: 20px; border: 1px solid rgba(105,82,49,.1); border-radius: 5px 18px 18px 18px; box-shadow: 0 10px 22px rgba(70,52,26,.08); transform: rotate(-.25deg); }
+.note-card:nth-child(2n) { transform: rotate(.25deg); }
+.note-card.color-0 { background: #fff0a9; }
+.note-card.color-1 { background: #dff0d7; }
+.note-card.color-2 { background: #f9d8cc; }
+.note-card.color-3 { background: #dce8f6; }
+.note-card p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.65; }
+.note-card footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; color: rgba(64,51,37,.55); font-size: 11px; }
+.note-card button { border: 0; color: #855243; background: transparent; }
+.empty { display: flex; min-height: 220px; grid-column: 1 / -1; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 1px dashed #d8c9af; border-radius: 18px; color: #918574; text-align: center; }
+.empty strong { color: #625749; font-size: 18px; }
+.notice { min-height: 22px; margin: 14px 2px; color: #817567; font-size: 14px; }
+.notice[data-tone="success"] { color: #557546; }
+.notice[data-tone="error"] { color: #ad4c43; }
+.behind-scenes { margin-top: 28px; padding: 16px 18px; border: 1px solid #e4d8c4; border-radius: 16px; color: #756a5d; background: rgba(255,255,255,.5); font-size: 13px; }
+.behind-scenes summary { color: #574c3f; cursor: pointer; font-weight: 700; }
+.behind-scenes p { line-height: 1.65; }
+.behind-scenes dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 12px 0 0; }
+.behind-scenes dl div { padding: 10px; border-radius: 10px; background: #fffaf0; }
+.behind-scenes dt { color: #9d9182; font-size: 11px; }
+.behind-scenes dd { margin: 3px 0 0; color: #50463b; overflow-wrap: anywhere; }
+@media (max-width: 560px) { .app-shell { width: calc(100% - 22px); padding-top: 24px; } .toolbar { align-items: stretch; flex-direction: column; } .toolbar label { max-width: none; } .behind-scenes dl { grid-template-columns: 1fr; } }

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

@@ -0,0 +1,41 @@
+<!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="app-shell">
+      <header class="hero">
+        <p class="eyebrow">QUICK NOTES</p>
+        <h1>灵感便签</h1>
+        <p>先记下来，不让刚刚想到的东西溜走。</p>
+      </header>
+
+      <form class="note-composer" data-note-form>
+        <textarea data-note-input rows="4" maxlength="800" placeholder="写下一句话、一个想法，或者稍后要查的东西…"></textarea>
+        <div><span data-character-count>0 / 800</span><button type="submit">保存便签</button></div>
+      </form>
+
+      <div class="toolbar">
+        <label><span>搜索便签</span><input data-search type="search" placeholder="输入关键词" /></label>
+        <span data-note-count>0 张便签</span>
+      </div>
+
+      <section class="notes-grid" data-notes-grid aria-live="polite">
+        <div class="empty">正在打开你的便签盒…</div>
+      </section>
+
+      <p class="notice" data-notice></p>
+
+      <details class="behind-scenes">
+        <summary>为什么它也是运行时 Demo？</summary>
+        <p>便签和“今日清单”是两个独立 Panel，却复用同一个底层数据 Component。产品可以变，稳定的存储与授权能力不用为每个页面重新实现。</p>
+        <dl><div><dt>当前数据版本</dt><dd data-proof-revision>等待读取</dd></div><div><dt>可被 Agent 使用</dt><dd>是，同一 Service Action</dd></div></dl>
+      </details>
+    </main>
+    <script src="assets/app.js"></script>
+  </body>
+</html>

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

@@ -0,0 +1,12 @@
+{
+  "id": "nextclaw-portable-runtime-lab-notes",
+  "title": "灵感便签",
+  "description": "随手记下一句话，之后还能搜索回来。",
+  "entry": "index.html",
+  "actions": [
+    "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"
+  ]
+}

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; }
+}