@hybridlabor-api/aos 4.6.6 → 4.7.0

package/skills/global_config/editable-design/scripts/wire-editor.mjs

@@ -0,0 +1,104 @@
+#!/usr/bin/env node
+
+import { copyFileSync, existsSync, mkdirSync, readFileSync, statSync, writeFileSync } from 'node:fs';
+import { createHash } from 'node:crypto';
+import { basename, dirname, join, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const target = process.argv[2];
+if (!target) {
+  console.error('usage: node scripts/wire-editor.mjs index.html');
+  process.exit(2);
+}
+
+const source = resolve(target);
+if (!existsSync(source) || !statSync(source).isFile()) {
+  console.error(`wire-editor: no such HTML file: ${source}`);
+  process.exit(2);
+}
+
+const project = dirname(source);
+const scriptDir = dirname(fileURLToPath(import.meta.url));
+const runtimeCandidates = [
+  join(scriptDir, 'editor-assets'),
+  resolve(scriptDir, '../assets/editor'),
+];
+const bundledAssets = runtimeCandidates.find((candidate) => {
+  const css = join(candidate, 'layer-editor.css');
+  const js = join(candidate, 'layer-editor.js');
+  return existsSync(css) && existsSync(js)
+    && readFileSync(css, 'utf8').includes('.hf-exploded-board')
+    && readFileSync(js, 'utf8').includes('setExploded')
+    && readFileSync(js, 'utf8').includes('downloadExploded');
+});
+
+if (!bundledAssets) {
+  console.error('wire-editor: bundled poster editor runtime is unavailable or incomplete');
+  process.exit(1);
+}
+let html = readFileSync(source, 'utf8');
+const sourceRevision = createHash('sha256').update(html).digest('hex').slice(0, 12);
+const runtimeRevision = createHash('sha256')
+  .update(readFileSync(join(bundledAssets, 'layer-editor.css')))
+  .update(readFileSync(join(bundledAssets, 'layer-editor.js')))
+  .digest('hex').slice(0, 10);
+const assetRevision = `${sourceRevision}-${runtimeRevision}`;
+const tags = '  <meta http-equiv="Cache-Control" content="no-store, no-cache, must-revalidate">\n'
+  + '  <meta http-equiv="Pragma" content="no-cache">\n'
+  + `  <link rel="stylesheet" href="layer-editor.css?v=${assetRevision}">\n`
+  + `  <script src="layer-editor.js?v=${assetRevision}" defer></script>\n`;
+
+if (!/<\/head>/i.test(html)) {
+  console.error('wire-editor: HTML has no closing head tag');
+  process.exit(1);
+}
+if (!/data-canvas-width="[0-9]+"/.test(html) || !/data-canvas-height="[0-9]+"/.test(html)) {
+  console.error('wire-editor: canvas is missing data-canvas-width or data-canvas-height');
+  process.exit(1);
+}
+
+const ids = [...html.matchAll(/data-layer-id="([^"]*)"/g)].map((match) => match[1]);
+const duplicates = [...new Set(ids.filter((id, index) => !id || ids.indexOf(id) !== index))];
+if (!ids.length || duplicates.length) {
+  console.error(`wire-editor: invalid layer ids${duplicates.length ? `: ${duplicates.join(', ')}` : ''}`);
+  process.exit(1);
+}
+
+html = html.replace(/<html([^>]*)>/i, (match, attrs) => {
+  const cleanAttrs = attrs
+    .replace(/\sdata-hf-source-revision="[^"]*"/i, '')
+    .replace(/\sdata-hf-runtime-revision="[^"]*"/i, '');
+  return `<html${cleanAttrs} data-hf-source-revision="${sourceRevision}" data-hf-runtime-revision="${runtimeRevision}">`;
+});
+
+for (const filename of ['layer-editor.css', 'layer-editor.js']) {
+  const bundled = join(bundledAssets, filename);
+  if (!existsSync(bundled)) {
+    console.error(`wire-editor: bundled asset is missing: ${bundled}`);
+    process.exit(1);
+  }
+  copyFileSync(bundled, join(project, filename));
+}
+
+const projectRuntime = join(project, 'scripts', 'editor-assets');
+if (existsSync(join(project, 'poster.json'))) {
+  mkdirSync(projectRuntime, { recursive: true });
+  for (const filename of ['layer-editor.css', 'layer-editor.js']) {
+    const bundled = join(bundledAssets, filename);
+    const vendored = join(projectRuntime, filename);
+    if (resolve(bundled) !== resolve(vendored)) copyFileSync(bundled, vendored);
+  }
+}
+
+if (!html.includes('layer-editor.js')) {
+  html = html.replace(/<\/head>/i, tags + '</head>');
+}
+
+const output = join(project, 'editor.html');
+writeFileSync(output, html);
+console.log(`editor      ${output}`);
+console.log(`source      ${basename(source)} unchanged`);
+console.log(`layers      ${ids.length}`);
+console.log(`runtime     ${bundledAssets}`);
+console.log(`revision    ${sourceRevision}`);
+console.log(`assets-rev  ${runtimeRevision}`);

package/skills/global_config/editable-design/tests/fixtures/small-explode/index.html

@@ -0,0 +1,86 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<title>少组件拆解回归测试</title>
+<style>
+:root {
+  --paper: #12382f;
+  --ink: #f4eddf;
+  --gold: #c6a45d;
+  --font-display: "Songti SC", "STSong", serif;
+  --font-body: "PingFang SC", "Hiragino Sans GB", sans-serif;
+}
+* { box-sizing: border-box; }
+html, body { margin: 0; padding: 0; background: #12382f; }
+.poster {
+  position: relative;
+  width: 800px;
+  height: 1000px;
+  overflow: hidden;
+  background: linear-gradient(155deg, #173f35 0%, #0b2a23 100%);
+  color: var(--ink);
+  font-family: var(--font-body);
+}
+.wash {
+  position: absolute;
+  left: 0;
+  top: 620px;
+  width: 800px;
+  height: 380px;
+  background: linear-gradient(180deg, rgba(244,237,223,0) 0%, rgba(244,237,223,0.18) 100%);
+}
+[data-layer-id] { position: absolute; margin: 0; }
+.headline {
+  left: 80px;
+  top: 130px;
+  width: 500px;
+  height: 100px;
+  font-family: var(--font-display);
+  font-size: 76px;
+  line-height: 100px;
+}
+.subhead {
+  left: 84px;
+  top: 260px;
+  width: 420px;
+  height: 50px;
+  color: var(--gold);
+  font-size: 30px;
+  line-height: 50px;
+}
+.caption {
+  left: 84px;
+  top: 340px;
+  width: 560px;
+  height: 42px;
+  font-size: 24px;
+  line-height: 42px;
+}
+.badge {
+  left: 84px;
+  top: 810px;
+  width: 210px;
+  height: 58px;
+  border: 1px solid var(--gold);
+  color: var(--gold);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 22px;
+  letter-spacing: 4px;
+}
+</style>
+</head>
+<body>
+<div class="poster" data-canvas-width="800" data-canvas-height="1000">
+  <div class="wash"></div>
+  <div data-explode-group="hero" data-explode-label="标题模块">
+    <div class="headline" data-layer-id="headline">山川入画</div>
+    <div class="subhead" data-layer-id="subhead">少组件拆解</div>
+    <div class="caption" data-layer-id="caption">文字叶子应作为同级补充组件出现</div>
+  </div>
+  <div class="badge" data-layer-id="badge">回归测试</div>
+</div>
+</body>
+</html>

package/skills/global_config/plan-canvas/SKILL.md

@@ -111,6 +111,14 @@ One backstop exists, and it is not an excuse to skip the above:
   end the session, and start implementing. `request-changes` means revise the
   artifact (the canvas live-reloads it) and keep the loop going.
 
+**After approve — start the live map (Trigger A).** When the approved artifact
+is a build plan (e.g. `production_artifacts/00_execution_plan.md`) and a
+multi-agent build follows, start the aos-trail live map:
+`aos-trail . --plan production_artifacts/00_execution_plan.md --no-open` — it
+prints a URL (default http://localhost:5330). Inside AO (env var
+`AO_BROWSER_CAPABILITY` set) also run `ao preview <url>`. See the `agenttrail`
+skill. Not needed for reviews that are not followed by a build.
+
 **3. Always respond in the canvas**, then keep listening. One command does both:
 
 ```bash