@xiaobuyu/nodesign 0.0.1

package/server/shared/deck.js

@@ -0,0 +1,54 @@
+/**
+ * server/shared/deck.js — deck 设计坐标系常量（single source of truth）
+ *
+ * 默认 1920×1080（16:9 PPT 标准）；4 档预设 ASPECT_PRESETS 可选。所有需要
+ * playwright headless 渲染 deck 的代码（exports / mcp tools / probe scripts）
+ * 都从这里读，将来再调只改一处。
+ *
+ * deck 比例由 wrap.dataset.deckAspect 决定（agent 在 canvas.html 里声明）：
+ *   "16:9"   默认横屏（1920×1080）演讲 / 文档 / scrollytelling
+ *   "16:10"  宽屏笔电 / Mac 屏（1920×1200）介于 16:9 和 4:3 之间
+ *   "9:16"   竖屏（1080×1920）手机宣发 / 短故事 / 直播 cover
+ *   "4:3"    老投影 / 经典 PPT 投影仪适配（1440×1080）
+ *
+ * 用户面（浏览器自适应 / iframe 预览）通过 CSS 自适应 scale 让任意视口都满铺；
+ * Playwright 渲染按 deck 比例设 viewport，scale=1 自然渲染。
+ */
+
+export const ASPECT_PRESETS = Object.freeze({
+  '16:9':  Object.freeze({ width: 1920, height: 1080 }),
+  '16:10': Object.freeze({ width: 1920, height: 1200 }),
+  '9:16':  Object.freeze({ width: 1080, height: 1920 }),
+  '4:3':   Object.freeze({ width: 1440, height: 1080 }),
+});
+
+export const DEFAULT_ASPECT = '16:9';
+
+export const DECK = ASPECT_PRESETS[DEFAULT_ASPECT];
+
+/**
+ * 解析 aspect 字符串到 { width, height }，未知值 fallback 默认 16:9。
+ *
+ * @param {string|null|undefined} aspect
+ * @returns {{ width: number, height: number, key: string }}
+ */
+export function resolveDeckSize(aspect) {
+  const key = ASPECT_PRESETS[aspect] ? aspect : DEFAULT_ASPECT;
+  const dims = ASPECT_PRESETS[key];
+  return { width: dims.width, height: dims.height, key };
+}
+
+/**
+ * 从 canvas.html 内容里抽 wrap data-deck-aspect 值。
+ * 找不到 / 无效值 → 返回 DEFAULT_ASPECT。仅做轻量 grep，不上 cheerio。
+ *
+ * @param {string} html
+ * @returns {string} aspect key (ASPECT_PRESETS 的键)
+ */
+export function extractDeckAspect(html) {
+  if (!html || typeof html !== 'string') return DEFAULT_ASPECT;
+  const m = html.match(/<div\b[^>]*class\s*=\s*['"][^'"]*__nd-deck-wrap[^'"]*['"][^>]*data-deck-aspect\s*=\s*['"]([^'"]+)['"]/i)
+        || html.match(/<div\b[^>]*data-deck-aspect\s*=\s*['"]([^'"]+)['"][^>]*class\s*=\s*['"][^'"]*__nd-deck-wrap[^'"]*['"]/i);
+  if (!m) return DEFAULT_ASPECT;
+  return ASPECT_PRESETS[m[1]] ? m[1] : DEFAULT_ASPECT;
+}

package/server/shared/time.js

@@ -0,0 +1,49 @@
+/**
+ * 北京时间工具
+ *
+ * 来源：从 dev/server/utils/time.js 复制（零改动）
+ *
+ * toISOString 是 UTC，直接用会在东八区凌晨误差 8 小时。
+ * 所有注入 LLM 的"当前时间"应该走这个 util，输出北京时间 + 星期。
+ */
+
+const WEEKDAY_CN = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
+
+/**
+ * 返回北京时间的多种呈现，供不同 prompt 复用
+ * @returns {{ today: string, dateTime: string, weekday: string, nowMs: number, iso: string }}
+ *   today:     "2026-04-22"
+ *   dateTime:  "2026-04-22 14:32:05"
+ *   weekday:   "周三"
+ *   nowMs:     毫秒时间戳（给 LLM 做差值用）
+ *   iso:       "2026-04-22T14:32:05+08:00"
+ */
+export function formatBeijingNow() {
+  const now = new Date();
+  const nowMs = now.getTime();
+
+  // 转北京时间（东八区偏移）
+  const bj = new Date(nowMs + 8 * 3600 * 1000);
+  const y = bj.getUTCFullYear();
+  const m = String(bj.getUTCMonth() + 1).padStart(2, '0');
+  const d = String(bj.getUTCDate()).padStart(2, '0');
+  const hh = String(bj.getUTCHours()).padStart(2, '0');
+  const mm = String(bj.getUTCMinutes()).padStart(2, '0');
+  const ss = String(bj.getUTCSeconds()).padStart(2, '0');
+  const weekday = WEEKDAY_CN[bj.getUTCDay()];
+
+  const today = `${y}-${m}-${d}`;
+  const dateTime = `${today} ${hh}:${mm}:${ss}`;
+  const iso = `${today}T${hh}:${mm}:${ss}+08:00`;
+
+  return { today, dateTime, weekday, nowMs, iso };
+}
+
+/**
+ * 返回适合塞进 prompt 的一行文本
+ * "当前时间：2026-04-22 周三 14:32:05（北京时间，毫秒时间戳 1745...）"
+ */
+export function beijingNowLine() {
+  const { today, weekday, dateTime, nowMs } = formatBeijingNow();
+  return `当前时间：${dateTime} ${weekday}（北京时间，毫秒时间戳 ${nowMs}）`;
+}

package/server/style-pipeline/README.md

@@ -0,0 +1,53 @@
+# server/style-pipeline/ — 风格提取流水线
+
+**Nodesign 第二条核心通路**：用户上传参考素材（PPT / PDF / HTML）→ 提取结构化 style tokens → 喂给 engine 下游。
+
+## 为什么这个模块独立于 engine
+
+组长释放的产品意图：当前 deskskill-engine 是"brief → metaphor 推导 → deck"单管道，但真实需求是"风格参考"——用户上传已有 deck，想保留其视觉语言做新内容。
+
+**这事儿是后端工程问题，不是 skill 问题**：色板抽样、字体识别、spacing 测量、layout grid 推断——按训练分布让 LLM 用 declarative 路径描述风格会丢精度（procedural / declarative 能力诊断已知）。所以做工程化提取，输出结构化 tokens 喂 skill 下游。
+
+## 输入 / 输出契约（待设计）
+
+**输入**：
+- `application/pdf` — PDF 演示稿
+- `.pptx` — PowerPoint
+- `.html` — 已有 HTML deck（最干净，可能首推 MVP）
+
+**输出**：`StyleTokens` 结构化 JSON（schema 待定），大致：
+```json
+{
+  "palette": {
+    "background": ["#fffaf0", "#f0e8d8"],
+    "foreground": ["#1a1a1a", "#666"],
+    "accent": ["#c83e3e"]
+  },
+  "typography": {
+    "display": { "family": "...", "weight": 800, "tracking": "-0.02em" },
+    "body":    { "family": "...", "weight": 400, "size_clamp": "..." }
+  },
+  "spacing": { "rhythm": [4, 8, 16, 32, 64], "page_padding": "..." },
+  "layout": { "grid": "12-col" | "asymmetric" | ..., "alignment": "..." },
+  "motion_signals": [...],   // 如果是 HTML，可静态扫到 transition / animation
+  "metaphor_hints": "..."    // 可选：让 LLM 看一眼后给一句话直觉总结
+}
+```
+
+## 技术路线候选（动工前需先做根因诊断）
+
+⚠️ **先别选实现方式**。组长说之前用模版 skill 试过风格参考路径效果不好——根因待诊断（参 [HANDOVER.md](../../HANDOVER.md) §六）。
+
+提取技术几条候选路线：
+- **PDF / PPTX**：`pdf2htmlEX` / `python-pptx` / `LibreOffice headless` 转中间格式后扫
+- **HTML**：DOM + computed style 直接读
+- **视觉路径**：截图 → vision model（Kimi K2.6 / Claude Opus）描述 + 关键元素裁切
+- **混合**：DOM 提骨架 + vision 提语义（推荐）
+
+## 与 engine 的接口
+
+style-pipeline 输出的 `StyleTokens` 作为 engine `runs` 的 `inputs.style_reference` 传入，engine 在加载 deskskill-engine 时把 tokens 注入 system prompt 一段，让 metaphor 推导跟 reference 对话（不是替代 metaphor）。
+
+## 责任划分
+
+负责人：你。新东西。

package/server/ws/broker.js

@@ -0,0 +1,36 @@
+/**
+ * server/ws/broker.js — Per-project EventBus 注册表
+ *
+ * 每个 project 一个 EventBus 实例，agent runAgent 跑 turn 时通过 ctx.eventBus.publish
+ * 推事件，WS 客户端订阅同一个 bus 收 stream。
+ *
+ * Bus 是 in-memory pub/sub，不持久化。重启 server 后所有订阅断开，新事件从零开始；
+ * 前端要能容忍这个（重连后通过 hydrate 重新拉项目状态，丢的事件不补）。
+ */
+
+import { EventBus } from '../engine/agent/events.js';
+import { attachLiveTurnTracker } from '../engine/runs/live-turn.js';
+
+/** @type {Map<string, EventBus>} */
+const projectBuses = new Map();
+
+/** 拿 project 的 EventBus（懒创建） */
+export function getProjectBus(projectId) {
+  let bus = projectBuses.get(projectId);
+  if (!bus) {
+    bus = new EventBus();
+    // live-turn 快照折叠器：进行中 turn 的事件物化成可恢复状态，
+    // WS 重连走"hydrate + ws.live_turn 快照 + 尾随"三段协议。见 live-turn.js
+    attachLiveTurnTracker(bus);
+    projectBuses.set(projectId, bus);
+  }
+  return bus;
+}
+
+/**
+ * project 删除时清理 bus（释放内存）。
+ * 不影响已建立的 ws 连接 — 它们还能 publish 但不再有订阅者。
+ */
+export function disposeProjectBus(projectId) {
+  projectBuses.delete(projectId);
+}

package/server/ws/browse-channel.js

@@ -0,0 +1,177 @@
+/**
+ * server/ws/browse-channel.js — 浏览器画面/输入的专用 WS 通道（2026-08-18）
+ *
+ * 路径 `/ws/projects/:pid/browser`。**跟现有 `/ws/projects/:pid` 刻意分开**，
+ * 理由是那条通道的性质完全不同：
+ *
+ * - 现有通道是**纯下行**（服务端没有任何 `ws.on('message')`）、走 per-project
+ *   EventBus 广播、**带 2000 条重放缓冲 + hydrate 分片**。
+ *   高频画面帧灌进去会**冲爆重放缓冲**、混进 hydrate 回放。
+ * - 而且那条通道是 JSON 文本帧 + perMessageDeflate：base64 一张 JPEG 先胖 33%，
+ *   再让 zlib 白压一遍（JPEG 压不动）。
+ *
+ * 这条通道：**二进制帧下行**（无 base64、`compress:false`）、per-connection 直发
+ * （只发给开着窗的那条 socket）、**上行**收订阅控制与人接手的输入。
+ *
+ * 低频信号（agent 求助、窗该开了）仍然走**现有** EventBus —— 它天生适合那种
+ * switch-case 路由。像素和输入才走这里。
+ */
+
+import { WebSocketServer } from 'ws';
+import { requestUser } from '../auth/session.js';
+import { originAllowed } from '../auth/origin-guard.js';
+import { userOwnsProject } from '../api/_guard.js';
+import { getProject, validateProjectId } from '../projects/store.js';
+import { peek, touchProject, _limits } from '../engine/browse/registry.js';
+
+const { VIEWPORT } = _limits;
+import { subscribe, unsubscribe, frameMeta } from '../engine/browse/screencast.js';
+import { releaseHelp, pendingHelp } from '../engine/browse/handover.js';
+
+export const BROWSE_WS_RE = /^\/ws\/projects\/([^/]+)\/browser$/;
+
+/** 接手时人的输入 → CDP。坐标从"canvas 上的比例"换算成设备像素。 */
+async function dispatchInput(page, projectId, msg) {
+  const cdp = await page.context().newCDPSession(page);
+  const meta = frameMeta(projectId);
+  // 前端发的是 0..1 的比例（它比谁都清楚自己那块 canvas 多大），服务端换算成
+  // **页面 CSS 像素** —— CDP 的 Input 坐标系是页面视口，不是 screencast 那张图。
+  // ⚠️ 兜底值原来写的是 CAST 的 maxWidth/maxHeight（1024×700），那是**图**的上限、
+  // 不是页面的尺寸 —— meta 还没到手时点击会全部偏掉（审查实测点中错元素）。
+  // 兜底要用真实视口（registry 的 VIEWPORT）。
+  const w = meta?.deviceWidth || VIEWPORT.width;
+  const h = meta?.deviceHeight || VIEWPORT.height;
+  const x = Math.round((msg.rx ?? 0) * w);
+  const y = Math.round((msg.ry ?? 0) * h);
+
+  if (msg.kind === 'click') {
+    await cdp.send('Input.dispatchMouseEvent', { type: 'mousePressed', x, y, button: 'left', clickCount: 1 });
+    await cdp.send('Input.dispatchMouseEvent', { type: 'mouseReleased', x, y, button: 'left', clickCount: 1 });
+    return;
+  }
+  if (msg.kind === 'move') {
+    await cdp.send('Input.dispatchMouseEvent', { type: 'mouseMoved', x, y });
+    return;
+  }
+  if (msg.kind === 'wheel') {
+    await cdp.send('Input.dispatchMouseEvent', {
+      type: 'mouseWheel', x, y, deltaX: msg.dx || 0, deltaY: msg.dy || 0,
+    });
+    return;
+  }
+  if (msg.kind === 'key') {
+    // ⚠️ Phase 1 只支持可打印字符与几个功能键。中文输入法要按 composer 那套
+    // isIme 判定处理（chat-composer-fixes 的教训），留 Phase 2 —— 现在人要输中文
+    // 请直接在自己浏览器里操作，别指望这条通道。
+    const text = typeof msg.text === 'string' ? msg.text : '';
+    if (text) {
+      await cdp.send('Input.insertText', { text });
+      return;
+    }
+    const key = msg.key;
+    if (!key) return;
+    // ⚠️ **必须给 windowsVirtualKeyCode**。原来是 `msg.code || 0`，而前端不发 code ——
+    // 恒等于 0 的话回车、退格、Tab 全部没反应（审查实测：登录表单提交不了、
+    // 删不掉字），而人接手最常要做的就是这几个键。
+    const VK = {
+      Enter: 13, Backspace: 8, Tab: 9, Escape: 27, Delete: 46,
+      ArrowLeft: 37, ArrowUp: 38, ArrowRight: 39, ArrowDown: 40,
+      Home: 36, End: 35, PageUp: 33, PageDown: 34, ' ': 32,
+    };
+    const vk = msg.code || VK[key] || 0;
+    const common = { key, windowsVirtualKeyCode: vk, nativeVirtualKeyCode: vk, code: key };
+    await cdp.send('Input.dispatchKeyEvent', { type: 'rawKeyDown', ...common });
+    // 回车/Tab 这些在很多表单上要 char 事件才触发默认行为
+    if (key === 'Enter') await cdp.send('Input.dispatchKeyEvent', { type: 'char', text: '\r', ...common });
+    await cdp.send('Input.dispatchKeyEvent', { type: 'keyUp', ...common });
+  }
+}
+
+function handleConn(ws, pid) {
+  const send = (obj) => { try { ws.send(JSON.stringify(obj)); } catch { /* */ } };
+
+  ws.on('message', async (raw) => {
+    let msg;
+    try { msg = JSON.parse(String(raw)); } catch { return; }
+    const live = peek(pid);
+
+    try {
+      if (msg.type === 'subscribe') {
+        if (!live) return send({ type: 'idle', reason: 'agent 还没开始浏览（没有常驻浏览器）' });
+        const r = await subscribe(pid, ws, live.page);
+        if (r.ok) touchProject(pid);
+        return send(r.ok ? { type: 'subscribed', url: live.page.url() } : { type: 'error', reason: r.reason });
+      }
+      if (msg.type === 'unsubscribe') return void unsubscribe(pid, ws);
+      if (msg.type === 'input') {
+        if (!live) return send({ type: 'idle', reason: '浏览器已经关了' });
+        // 人的每一次输入都算"用过" —— 空闲计时器只认 agent 的调用，不认这条通道，
+        // 于是安静看五分钟会被在眼前关掉
+        touchProject(pid);
+        await dispatchInput(live.page, pid, msg);
+        return;
+      }
+      if (msg.type === 'nav') {
+        // 人接手时的后退/刷新。⚠️ **不提供"输入地址"** —— 那等于给人开一条绕过
+        // 出网闸的入口的错觉（其实闸在网络层照样拦，但不如不提供这个入口）。
+        if (!live) return send({ type: 'idle', reason: '浏览器已经关了' });
+        touchProject(pid);
+        if (msg.action === 'back') await live.page.goBack({ timeout: 15000 }).catch(() => {});
+        if (msg.action === 'reload') await live.page.reload({ timeout: 20000 }).catch(() => {});
+        return send({ type: 'url', url: live.page.url() });
+      }
+      if (msg.type === 'release') {
+        // 人点了「好了继续」→ 把等着的 agent 放走
+        releaseHelp(pid, { url: live ? live.page.url() : null, by: 'human' });
+        return send({ type: 'released' });
+      }
+    } catch (err) {
+      send({ type: 'error', reason: err?.message || String(err) });
+    }
+  });
+
+  const bye = () => { unsubscribe(pid, ws).catch(() => {}); };
+  ws.on('close', bye);
+  ws.on('error', bye);
+  // ⭐ hello 要带上「agent 是不是正举着手」：求助 banner 原来只由一次性的
+  // `run.browser_help` 事件驱动，**刷新一下就失传** —— 于是 agent 在那儿等两分钟、
+  // 超时、告诉用户"这站过不去"，而用户从头到尾没看见过它举手。
+  const help = pendingHelp(pid);
+  send({ type: 'hello', hasBrowser: !!peek(pid), help: help ? help.reason : null });
+}
+
+/**
+ * 挂在现有 httpServer 的 upgrade 分支上。
+ * ⚠️ 现有 upgrade handler 对不匹配的路径**直接 404**，所以这条分支必须排在它前面。
+ * @returns {{ matches: (pathname: string) => RegExpMatchArray|null, accept: Function }}
+ */
+export function createBrowseWS() {
+  const wss = new WebSocketServer({ noServer: true });
+
+  return {
+    matches: (pathname) => pathname.match(BROWSE_WS_RE),
+    accept(req, socket, head, m) {
+      // 上游 upgrade 已经拦过一道；这里再拦是因为闸不该靠「谁先调用谁」成立
+      // —— 这条通道自带 WebSocketServer，将来换挂载点也不能失守
+      if (!originAllowed(req)) {
+        socket.write('HTTP/1.1 403 Forbidden\r\n\r\n');
+        return socket.destroy();
+      }
+      const pid = decodeURIComponent(m[1]);
+      try { validateProjectId(pid); } catch {
+        socket.write('HTTP/1.1 400 Bad Request\r\n\r\n');
+        return socket.destroy();
+      }
+      // 鉴权跟主通道同一套，也同一个 4401（外人不该分得清"没登录"和"不是你的项目"）
+      const user = requestUser(req);
+      const project = getProject(pid);
+      if (!user || !userOwnsProject(user, project)) {
+        return wss.handleUpgrade(req, socket, head, (ws) => ws.close(4401, 'unauthorized'));
+      }
+      wss.handleUpgrade(req, socket, head, (ws) => {
+        ws.binaryType = 'nodebuffer';
+        handleConn(ws, pid);
+      });
+    },
+  };
+}