xuym-codex-collab 0.9.0 → 0.10.0

package/README.md

@@ -26,7 +26,7 @@ codex-collab setup
 
 协作远程与业务基准分支自动识别；不要求 `origin/main`。有多个不同远程或默认分支不明确时，管理员选择一次。成员与新增机器人继承签名团队基准，各自可使用不同远程别名。每个新任务固定创建时的 commit，排队和重试期间不会漂移；管理员可在团队设置里为后续任务修改基准分支。
 
-工作台首页按项目汇总，同一仓库的多个本机机器人共用一张项目卡片。打开项目后，所有团队机器人展示在同一列表里，自己的标记“我的”；本机已接入的机器人可继续配置或管理，其他机器人的职责来自签名团队记录。分支、诊断、重置和团队分配设置按需展开。界面提供纸白、雾绿与夜色配色，使用轻量 CSS 与浏览器原生过渡动画，支持系统减少动态效果设置，页面进入后台时暂停动画。
+工作台首页按项目汇总，同一仓库的多个本机机器人共用一张项目卡片。打开项目后，所有团队机器人展示在同一列表里，自己的标记“我的”；本机已接入的机器人可继续配置或管理，其他机器人的职责来自签名团队记录。分支、诊断、重置和团队分配设置按需展开。首页以“让 Codex 组队工作”为入口：在企业微信群里连接你和同事的 Codex 会话，按角色分工、接力完成任务。界面提供纸白、夜色两种配色，以及从本机加载的 Three.js 星尘背景、轻微鼠标视差与短尾迹；触屏和系统减少动态效果设置下显示静态星点，页面进入后台时暂停动画。
 
 同一个真人可以拥有多个 Agent，每个 Agent 使用独立机器人、签名身份、业务 clone 和 Codex 对话。管理员在项目页点击“添加我的机器人”，验证同一个企业微信账号后自动接入，无需下载包或填写包密码；给同事分配时仍使用加密接入包，同事可以领取多份。相同 userid 不会合并 Agent 权限，审核通知会指明应使用的机器人。
 

package/apps/onboarding/server.mjs

@@ -1,10 +1,21 @@
 import http from 'node:http';
 import { randomBytes, timingSafeEqual } from 'node:crypto';
 import { readFile } from 'node:fs/promises';
-import { fileURLToPath } from 'node:url';
+import { createRequire } from 'node:module';
+import { pathToFileURL } from 'node:url';
 import { SetupError } from './errors.mjs';
 import { SetupManager } from './manager.mjs';
-const assets = { '/favicon.svg': ['favicon.svg', 'image/svg+xml'], '/': ['index.html', 'text/html; charset=utf-8'], '/app.js': ['app.js', 'text/javascript; charset=utf-8'], '/style.css': ['style.css', 'text/css; charset=utf-8'] };
+const threeBuild = new URL('.', pathToFileURL(createRequire(import.meta.url).resolve('three')));
+const assets = {
+  '/': ['index.html', 'text/html; charset=utf-8'],
+  '/favicon.svg': ['favicon.svg', 'image/svg+xml'],
+  '/app.js': ['app.js', 'text/javascript; charset=utf-8'],
+  '/style.css': ['style.css', 'text/css; charset=utf-8'],
+  '/effects.js': ['effects.js', 'text/javascript; charset=utf-8'],
+  '/effects.css': ['effects.css', 'text/css; charset=utf-8'],
+  '/vendor/three.module.js': [new URL('three.module.js', threeBuild), 'text/javascript; charset=utf-8'],
+  '/vendor/three.core.js': [new URL('three.core.js', threeBuild), 'text/javascript; charset=utf-8'],
+};
 const same = (a, b) => typeof a === 'string' && Buffer.byteLength(a) === Buffer.byteLength(b) && timingSafeEqual(Buffer.from(a), Buffer.from(b));
 export async function startSetupServer({ manager = new SetupManager(), port = 0 } = {}) {
   const token = randomBytes(32).toString('hex'); const cookieName = `collab_${randomBytes(8).toString('hex')}`; let origin;
@@ -16,7 +27,9 @@ export async function startSetupServer({ manager = new SetupManager(), port = 0
       if (req.headers.host !== new URL(origin).host) return json(403, { error: '本机访问地址无效。' });
       const url = new URL(req.url, origin);
       if (req.method === 'GET' && assets[url.pathname]) {
-        const [file, type] = assets[url.pathname]; res.writeHead(200, { 'Content-Type': type }); res.end(await readFile(fileURLToPath(new URL(`./web/${file}`, import.meta.url)))); return;
+        const [file, type] = assets[url.pathname];
+        const content = await readFile(file instanceof URL ? file : new URL(`./web/${file}`, import.meta.url));
+        res.writeHead(200, { 'Content-Type': type }); res.end(content); return;
       }
       if (req.method !== 'GET' && (req.headers.origin !== origin || req.headers['content-type']?.split(';')[0] !== 'application/json')) return json(403, { error: '请通过本机向导操作。' });
       if (req.headers.origin && req.headers.origin !== origin) return json(403, { error: '访问来源无效。' });

package/apps/onboarding/web/app.js

@@ -606,7 +606,7 @@ $('pending-requests').onclick = () => { $('admin-tools').open = true; $('request
 function initializeAppearance() {
   if (!document.body) return;
   function apply(theme) {
-    if (!['day', 'studio', 'night'].includes(theme)) theme = 'day';
+    if (!['day', 'night'].includes(theme)) theme = 'day';
     document.body.dataset.theme = theme;
     for (const choice of document.querySelectorAll('[data-theme-choice]')) choice.setAttribute('aria-pressed', String(choice.dataset.themeChoice === theme));
     try { localStorage.setItem('codex-collab-theme', theme); } catch {}

package/apps/onboarding/web/effects.css

@@ -0,0 +1,47 @@
+/* Three.js star field. Content stays on its own layer with native hit testing. */
+body {
+  isolation: isolate;
+  --fx-blue: 158 181 222;
+  --fx-peach: 237 207 175;
+  --fx-line: 102 142 133;
+  --fx-cursor: 145 133 187;
+}
+body[data-theme="night"] {
+  --fx-blue: 87 111 177;
+  --fx-peach: 141 119 83;
+  --fx-line: 139 186 176;
+  --fx-cursor: 198 186 232;
+}
+#ambient { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; contain: strict; }
+.ambient-light { position: absolute; width: 82vw; height: 88vh; pointer-events: none; will-change: transform; }
+.light-one { left: -31vw; top: -13vh; background: radial-gradient(ellipse, rgb(var(--fx-blue) / .24), transparent 65%); animation: drift-one 24s ease-in-out infinite alternate; }
+.light-two { right: -31vw; top: 1vh; background: radial-gradient(ellipse, rgb(170 153 202 / .19), transparent 68%); animation: drift-two 29s ease-in-out infinite alternate; }
+.light-three { width: 100vw; height: 65vh; left: -6vw; bottom: -33vh; opacity: .28; background: radial-gradient(ellipse, rgb(var(--fx-peach) / .43), transparent 69%); animation: drift-three 31s ease-in-out infinite alternate; }
+body[data-theme="night"] .light-one { opacity: .72; }
+body[data-theme="night"] .light-two { opacity: .8; }
+html:not([data-webgl="ready"]) #ambient::after { content: ""; position: absolute; left: 0; top: 0; width: 2px; height: 2px; border-radius: 50%; color: rgb(var(--fx-line) / .52); box-shadow: 9vw 18vh, 24vw 9vh, 37vw 28vh, 68vw 13vh, 88vw 24vh, 14vw 47vh, 31vw 66vh, 75vw 55vh, 91vw 68vh, 5vw 79vh, 22vw 86vh, 42vw 91vh, 62vw 81vh, 81vw 92vh, 96vw 43vh, 54vw 7vh, 72vw 34vh, 17vw 32vh, 85vw 8vh; }
+#ambient-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
+#cursor-follower { position: fixed; top: 0; left: 0; width: 30px; height: 30px; border: 1px solid rgb(var(--fx-cursor) / .35); border-radius: 50%; pointer-events: none; opacity: 0; z-index: 5; will-change: transform; transition: width 180ms, height 180ms, border-color 180ms; }
+#cursor-follower i { display: block; position: absolute; width: 4px; height: 4px; background: rgb(var(--fx-cursor) / .6); border-radius: 50%; right: -2px; top: 12px; }
+.masthead, main, .demo-footer { position: relative; z-index: 1; }
+.effect-note { display: flex; align-items: center; gap: 8px; color: var(--muted); min-width: 0; font-size: 10px; }
+.demo-only { font-size: 8px; opacity: .6; }
+html[data-effects-paused="true"] .ambient-light { animation-play-state: paused; }
+html[data-effects-static="true"] #cursor-follower { visibility: hidden; }
+@keyframes drift-one { from { transform: translate3d(0, 0, 0) rotate(-12deg); } to { transform: translate3d(13vw, 8vh, 0) rotate(14deg); } }
+@keyframes drift-two { from { transform: translate3d(0, 0, 0) rotate(8deg); } to { transform: translate3d(-10vw, 13vh, 0) rotate(-15deg); } }
+@keyframes drift-three { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(12vw, -6vh, 0) scale(1.08); } }
+@media (max-width: 600px) {
+  .masthead { gap: 10px; align-items: center; }
+  .effect-note { font-size: 9px; flex-wrap: wrap; justify-content: center; gap: 5px; }
+  .demo-only { flex-basis: 100%; text-align: center; margin: 0; }
+  .ambient-light { width: 125vw; }
+}
+@media (hover: none), (pointer: coarse) {
+  #cursor-follower { display: none; }
+  .ambient-light { animation: none; will-change: auto; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ambient-light { animation: none; will-change: auto; }
+  #cursor-follower { display: none; }
+}

package/apps/onboarding/web/effects.js

@@ -0,0 +1,323 @@
+import {
+  BufferGeometry, Color, Float32BufferAttribute, NormalBlending,
+  PerspectiveCamera, Points, Scene, ShaderMaterial, Vector2, WebGLRenderer,
+} from '/vendor/three.module.js';
+
+// Stars and pointer dust each render in a single draw call.
+const canvas = document.getElementById('ambient-canvas');
+const follower = document.getElementById('cursor-follower');
+const reducedMotion = matchMedia('(prefers-reduced-motion: reduce)');
+const finePointer = matchMedia('(hover: hover) and (pointer: fine)');
+const palettes = {
+  day: ['#728f9e', '#9a8bb4', '#a2b7c5', .88],
+  night: ['#8fbdbb', '#b5b0e2', '#c5d6e0', .88],
+};
+const pointer = { x: 0, y: 0, ringX: 0, ringY: 0, fieldX: 0, fieldY: 0, alpha: 0, active: false, hover: false, down: false };
+const trailCount = 44;
+const trailPositions = new Float32Array(trailCount * 3);
+const trailBirths = new Float32Array(trailCount).fill(-100);
+const trailSeeds = new Float32Array(trailCount);
+let width = innerWidth, height = innerHeight, frame = 0, lastFrame = 0, elapsed = 0;
+let renderer, scene, camera, stars, dust, starGeometry, dustGeometry;
+let initialized = false, lost = false, trailIndex = 0, lastTrail = 0, lastTrailX = 0, lastTrailY = 0;
+let density = 1;
+const isStatic = () => reducedMotion.matches || !finePointer.matches;
+const uniforms = {
+  uTime: { value: 0 },
+  uPixelRatio: { value: 1 },
+  uSpan: { value: new Vector2(1, 1) },
+  uPointer: { value: new Vector2() },
+  uParallax: { value: new Vector2() },
+  uPointerAlpha: { value: 0 },
+  uColorA: { value: new Color() },
+  uColorB: { value: new Color() },
+  uColorC: { value: new Color() },
+  uOpacity: { value: 1 },
+};
+
+const starVertex = `
+  uniform float uTime;
+  uniform float uPixelRatio;
+  uniform vec2 uSpan;
+  uniform vec2 uPointer;
+  uniform vec2 uParallax;
+  uniform float uPointerAlpha;
+  attribute float aSize;
+  attribute float aPhase;
+  attribute float aTone;
+  varying float vTone;
+  varying float vAlpha;
+  varying float vSparkle;
+  void main() {
+    float depth = (8.0 - position.z) / 8.0;
+    vec3 p = vec3(position.xy * uSpan * depth, position.z);
+    p.x += sin(uTime * .085 + aPhase) * .065;
+    p.y += cos(uTime * .065 + aPhase * 1.3) * .045;
+    // Farther layers respond less, creating subtle depth without camera sway.
+    p.xy += uParallax * (.025 + (position.z + 4.0) * .012);
+    vec2 delta = uPointer * depth - p.xy;
+    float proximity = exp(-dot(delta, delta) / (1.1 * depth * depth));
+    p.xy += delta * proximity * .09 * uPointerAlpha;
+    vec4 mv = modelViewMatrix * vec4(p, 1.0);
+    vec4 projected = projectionMatrix * mv;
+    gl_Position = projected;
+    gl_PointSize = clamp(aSize * uPixelRatio * (8.0 / -mv.z), 2.0, 28.0 * uPixelRatio);
+    vec2 screen = projected.xy / projected.w;
+    float quietCenter = 1.0 - exp(-pow(screen.x * 2.2, 2.0) - pow(screen.y * 1.6, 2.0)) * .45;
+    vAlpha = (.65 + sin(uTime * .42 + aPhase) * .16) * quietCenter;
+    vTone = aTone;
+    vSparkle = step(.83, aTone);
+  }
+`;
+const starFragment = `
+  uniform vec3 uColorA;
+  uniform vec3 uColorB;
+  uniform vec3 uColorC;
+  uniform float uOpacity;
+  varying float vTone;
+  varying float vAlpha;
+  varying float vSparkle;
+  void main() {
+    vec2 p = gl_PointCoord * 2.0 - 1.0;
+    float radius = dot(p, p);
+    if (radius > 1.0) discard;
+    float core = exp(-radius * 80.0);
+    float halo = exp(-radius * 6.0) * .17;
+    float cross = (exp(-abs(p.x) * 65.0) + exp(-abs(p.y) * 65.0)) * exp(-radius * 7.0) * .18 * vSparkle;
+    float alpha = (core + halo + cross) * vAlpha * uOpacity;
+    vec3 color = mix(uColorA, uColorB, smoothstep(.1, .8, vTone));
+    color = mix(color, uColorC, vSparkle * .55);
+    gl_FragColor = vec4(color, alpha);
+    #include <colorspace_fragment>
+  }
+`;
+const dustVertex = `
+  uniform float uTime;
+  uniform float uPixelRatio;
+  attribute float aBirth;
+  attribute float aSeed;
+  varying float vAlpha;
+  void main() {
+    float age = uTime - aBirth;
+    float life = clamp(1.0 - age / 1.25, 0.0, 1.0);
+    vec3 p = position;
+    p.x += sin(aSeed * 25.0) * age * .042;
+    p.y += age * (.035 + aSeed * .035);
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(p, 1.0);
+    gl_PointSize = (6.0 + aSeed * 7.0) * uPixelRatio * (.7 + life * .3);
+    vAlpha = life * life * .65;
+  }
+`;
+const dustFragment = `
+  uniform vec3 uColorB;
+  uniform vec3 uColorC;
+  uniform float uOpacity;
+  varying float vAlpha;
+  void main() {
+    vec2 p = gl_PointCoord * 2.0 - 1.0;
+    float radius = dot(p, p);
+    if (radius > 1.0) discard;
+    float softPoint = exp(-radius * 35.0) + exp(-radius * 5.0) * .12;
+    gl_FragColor = vec4(mix(uColorB, uColorC, .4), softPoint * vAlpha * uOpacity);
+    #include <colorspace_fragment>
+  }
+`;
+
+function stop() {
+  cancelAnimationFrame(frame);
+  frame = 0;
+  lastFrame = 0;
+}
+function schedule() {
+  if (renderer && !frame && !document.hidden && !isStatic() && !lost) frame = requestAnimationFrame(tick);
+}
+function createScene() {
+  if (initialized) return;
+  initialized = true;
+  try {
+    renderer = new WebGLRenderer({ canvas, alpha: true, antialias: false, powerPreference: 'low-power' });
+    renderer.setClearColor(0x000000, 0);
+    scene = new Scene();
+    camera = new PerspectiveCamera(42, width / height, .1, 30);
+    camera.position.z = 8;
+    starGeometry = new BufferGeometry();
+    const positions = [], sizes = [], phases = [], tones = [];
+    let seed = 173;
+    const random = () => { seed = (seed * 16807) % 2147483647; return (seed - 1) / 2147483646; };
+    for (let i = 0; i < 148; i++) {
+      positions.push((random() - .5) * 1.18, (random() - .5) * 1.18, random() * 6.5 - 4);
+      sizes.push(6 + Math.pow(random(), 2) * 13);
+      phases.push(random() * Math.PI * 2);
+      tones.push(random());
+    }
+    starGeometry.setAttribute('position', new Float32BufferAttribute(positions, 3));
+    starGeometry.setAttribute('aSize', new Float32BufferAttribute(sizes, 1));
+    starGeometry.setAttribute('aPhase', new Float32BufferAttribute(phases, 1));
+    starGeometry.setAttribute('aTone', new Float32BufferAttribute(tones, 1));
+    const settings = { uniforms, transparent: true, depthTest: false, depthWrite: false, blending: NormalBlending };
+    stars = new Points(starGeometry, new ShaderMaterial({ ...settings, vertexShader: starVertex, fragmentShader: starFragment }));
+    stars.frustumCulled = false;
+    dustGeometry = new BufferGeometry();
+    dustGeometry.setAttribute('position', new Float32BufferAttribute(trailPositions, 3));
+    dustGeometry.setAttribute('aBirth', new Float32BufferAttribute(trailBirths, 1));
+    for (let i = 0; i < trailCount; i++) trailSeeds[i] = random();
+    dustGeometry.setAttribute('aSeed', new Float32BufferAttribute(trailSeeds, 1));
+    dust = new Points(dustGeometry, new ShaderMaterial({ ...settings, vertexShader: dustVertex, fragmentShader: dustFragment }));
+    dust.frustumCulled = false;
+    scene.add(stars, dust);
+    document.documentElement.dataset.webgl = 'ready';
+    resizeRenderer();
+  } catch {
+    disposeScene();
+    // CSS keeps a quiet star field if WebGL is unavailable.
+    document.documentElement.dataset.webgl = 'fallback';
+  }
+}
+function disposeScene() {
+  starGeometry?.dispose(); dustGeometry?.dispose();
+  stars?.material.dispose(); dust?.material.dispose();
+  renderer?.dispose();
+  renderer = null;
+}
+function resizeRenderer() {
+  if (!renderer) return;
+  density = Math.min(devicePixelRatio || 1, 1.5, 2048 / Math.max(width, height));
+  renderer.setPixelRatio(density);
+  renderer.setSize(width, height, false);
+  camera.aspect = width / height;
+  camera.updateProjectionMatrix();
+  const spanY = 2 * Math.tan(42 * Math.PI / 360) * 8;
+  uniforms.uSpan.value.set(spanY * camera.aspect, spanY);
+  uniforms.uPixelRatio.value = density;
+  starGeometry.setDrawRange(0, Math.min(148, Math.max(65, Math.round(width * height / 9500))));
+}
+function render() {
+  if (renderer && !lost) renderer.render(scene, camera);
+}
+function updatePalette() {
+  const colors = palettes[document.body.dataset.theme] || palettes.day;
+  uniforms.uColorA.value.set(colors[0]);
+  uniforms.uColorB.value.set(colors[1]);
+  uniforms.uColorC.value.set(colors[2]);
+  uniforms.uOpacity.value = colors[3];
+  render();
+}
+function clearDust() {
+  trailBirths.fill(-100);
+  if (dustGeometry) {
+    dustGeometry.getAttribute('aBirth').array.set(trailBirths);
+    dustGeometry.getAttribute('aBirth').needsUpdate = true;
+  }
+}
+function updatePreferences() {
+  stop();
+  const staticMode = isStatic();
+  document.documentElement.dataset.effectsPaused = String(document.hidden);
+  document.documentElement.dataset.effectsStatic = String(staticMode);
+  // Touch/reduced-motion starts with CSS alone; no WebGL context or render loop.
+  if (!staticMode) createScene();
+  if (staticMode) {
+    pointer.alpha = 0;
+    uniforms.uPointerAlpha.value = 0;
+    clearDust();
+    render();
+  }
+  updatePalette();
+  schedule();
+}
+function follow(dt) {
+  const ease = 1 - Math.exp(-dt / 90);
+  const slow = 1 - Math.exp(-dt / 300);
+  pointer.ringX += (pointer.x - pointer.ringX) * ease;
+  pointer.ringY += (pointer.y - pointer.ringY) * ease;
+  pointer.fieldX += (pointer.x - pointer.fieldX) * slow;
+  pointer.fieldY += (pointer.y - pointer.fieldY) * slow;
+  pointer.alpha += ((pointer.active ? 1 : 0) - pointer.alpha) * ease;
+  const scale = pointer.down ? .72 : pointer.hover ? 1.35 : 1;
+  follower.style.transform = `translate3d(${pointer.ringX - 15}px, ${pointer.ringY - 15}px, 0) scale(${scale})`;
+  follower.style.opacity = String(pointer.alpha * (pointer.hover ? .35 : .8));
+  const span = uniforms.uSpan.value;
+  uniforms.uPointer.value.set((pointer.fieldX / width - .5) * span.x, (.5 - pointer.fieldY / height) * span.y);
+  uniforms.uPointerAlpha.value = pointer.alpha;
+  const targetX = pointer.active ? (pointer.x / width - .5) * span.x : 0;
+  const targetY = pointer.active ? (.5 - pointer.y / height) * span.y : 0;
+  const parallax = uniforms.uParallax.value;
+  parallax.x += (targetX - parallax.x) * slow;
+  parallax.y += (targetY - parallax.y) * slow;
+}
+function addDust(now) {
+  if (!dustGeometry || now - lastTrail < 28 || Math.hypot(pointer.x - lastTrailX, pointer.y - lastTrailY) < 5) return;
+  const span = uniforms.uSpan.value;
+  const index = trailIndex++ % trailCount;
+  const position = dustGeometry.getAttribute('position');
+  position.setXYZ(index, (pointer.x / width - .5) * span.x, (.5 - pointer.y / height) * span.y, 0);
+  position.needsUpdate = true;
+  const births = dustGeometry.getAttribute('aBirth');
+  births.setX(index, elapsed);
+  births.needsUpdate = true;
+  lastTrail = now; lastTrailX = pointer.x; lastTrailY = pointer.y;
+}
+function tick(now) {
+  frame = 0;
+  if (document.hidden || isStatic() || lost) return;
+  if (lastFrame && now - lastFrame < 31) { schedule(); return; }
+  const dt = lastFrame ? Math.min(now - lastFrame, 64) : 33;
+  lastFrame = now;
+  elapsed += dt / 1000;
+  uniforms.uTime.value = elapsed;
+  follow(dt);
+  render();
+  schedule();
+}
+function resize() {
+  width = innerWidth; height = innerHeight;
+  resizeRenderer();
+  clearDust();
+  render();
+}
+window.addEventListener('pointermove', event => {
+  if (isStatic() || event.pointerType === 'touch') return;
+  pointer.x = event.clientX; pointer.y = event.clientY;
+  if (!pointer.active) {
+    pointer.ringX = pointer.fieldX = pointer.x;
+    pointer.ringY = pointer.fieldY = pointer.y;
+    lastTrailX = pointer.x; lastTrailY = pointer.y;
+  }
+  pointer.active = true;
+  pointer.hover = !!event.target.closest('a, button, input, textarea, select, summary');
+  addDust(performance.now());
+  schedule();
+}, { passive: true });
+window.addEventListener('pointerdown', event => {
+  if (isStatic() || event.pointerType === 'touch') return;
+  pointer.down = true; schedule();
+}, { passive: true });
+window.addEventListener('pointerup', () => { pointer.down = false; schedule(); }, { passive: true });
+const leave = () => { pointer.active = false; pointer.down = false; schedule(); };
+document.documentElement.addEventListener('pointerleave', leave);
+window.addEventListener('blur', leave);
+window.addEventListener('resize', resize, { passive: true });
+document.addEventListener('visibilitychange', () => {
+  document.documentElement.dataset.effectsPaused = String(document.hidden);
+  if (document.hidden) stop(); else schedule();
+});
+canvas.addEventListener('webglcontextlost', event => {
+  event.preventDefault(); lost = true; stop();
+  document.documentElement.dataset.webgl = 'fallback';
+});
+canvas.addEventListener('webglcontextrestored', () => {
+  lost = false;
+  document.documentElement.dataset.webgl = 'ready';
+  clearDust(); render(); schedule();
+});
+new MutationObserver(updatePalette).observe(document.body, { attributes: true, attributeFilter: ['data-theme'] });
+reducedMotion.addEventListener('change', updatePreferences);
+finePointer.addEventListener('change', updatePreferences);
+window.addEventListener('pagehide', () => stop());
+window.addEventListener('pageshow', () => schedule());
+// Previous comparison URLs now open this single star field.
+const url = new URL(location.href);
+if (url.searchParams.has('effect')) {
+  url.searchParams.delete('effect'); history.replaceState(null, '', url);
+}
+updatePreferences();

package/apps/onboarding/web/index.html

@@ -4,11 +4,19 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="color-scheme" content="light dark">
-<title>Codex Collab · 团队接入</title>
+<title>Codex Collab · 企业微信协作向导</title>
 <link rel="icon" type="image/svg+xml" href="/favicon.svg">
 <link rel="stylesheet" href="/style.css">
+<link rel="stylesheet" href="/effects.css">
 </head>
-<body>
+<body data-theme="day">
+<div id="ambient" aria-hidden="true">
+<div class="ambient-light light-one"></div>
+<div class="ambient-light light-two"></div>
+<div class="ambient-light light-three"></div>
+<canvas id="ambient-canvas"></canvas>
+</div>
+<div id="cursor-follower" aria-hidden="true"><i></i></div>
 <header class="masthead">
 <a class="brand" href="/" data-view="home" aria-label="Codex Collab 首页">
 <span class="brand-mark" aria-hidden="true">⌘</span>Codex Collab</a>
@@ -31,8 +39,8 @@
 </span>
 </div>
 <div class="intro">
-<h1 tabindex="-1">让协作，简单一点。</h1>
-<p>选一个项目，和你的团队继续工作。</p>
+<h1 tabindex="-1">让 Codex 组队工作。</h1>
+<p>在企业微信群里，连接你和同事的 Codex 会话，按角色分工、接力完成任务。</p>
 </div>
 <div id="profiles" class="project-list" aria-label="我的项目">
 </div>
@@ -659,9 +667,6 @@
 <button class="theme-choice" data-theme-choice="day" aria-pressed="true">
 <i aria-hidden="true">
 </i>纸白</button>
-<button class="theme-choice" data-theme-choice="studio" aria-pressed="false">
-<i aria-hidden="true">
-</i>雾绿</button>
 <button class="theme-choice" data-theme-choice="night" aria-pressed="false">
 <i aria-hidden="true">
 </i>夜色</button>
@@ -669,5 +674,6 @@
 </footer>
 <script src="/app.js" defer>
 </script>
+<script src="/effects.js" type="module"></script>
 </body>
 </html>

package/apps/onboarding/web/style.css

@@ -6,7 +6,6 @@ body {
   --accent: #355d49; --on-accent: #fff; --wash: #eaf0e6; --hover: #f1f3eb; --shadow: #355d4909;
   color-scheme: light; margin: 0; background: var(--bg); color: var(--ink); min-height: 100dvh; display: flex; flex-direction: column;
 }
-body[data-theme="studio"] { --bg: #f0f4ef; --surface: #f8fbf6; --ink: #2c4338; --muted: #809181; --line: #d8e2d6; --accent: #426c50; --wash: #e0eadd; --hover: #e9f0e5; }
 body[data-theme="night"] { color-scheme: dark; --bg: #131b19; --surface: #1a2420; --ink: #e9eee3; --muted: #82958b; --line: #2e3d34; --accent: #c3d5b0; --on-accent: #23372a; --wash: #2b3b2f; --hover: #1d2b22; --shadow: #0000000b; }
 button, input { font: inherit; }
 a { color: inherit; text-decoration: none; }
@@ -18,8 +17,8 @@ h1, p { margin: 0; }
 h1:focus { outline: none; }
 .icon { width: 20px; height: 20px; flex-shrink: 0; }
 .masthead { display: flex; align-items: center; justify-content: space-between; padding: 30px 44px; gap: 16px; }
-.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; letter-spacing: -.4px; font-weight: 550; }
-.brand-mark { display: inline-grid; place-items: center; width: 27px; height: 27px; font: 26px/1 sans-serif; color: var(--accent); }
+.brand { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; letter-spacing: -.4px; font-weight: 550; }
+.brand-mark { display: inline-grid; place-items: center; width: 24px; height: 27px; font: 24px/1 sans-serif; color: var(--accent); }
 .preview-label { font-size: 10px; color: var(--muted); letter-spacing: 1px; }
 main { width: 100%; flex: 1; padding: 50px 24px 66px; display: flex; justify-content: center; align-items: flex-start; }
 .scene { width: 100%; max-width: 536px; }
@@ -70,7 +69,6 @@ body[data-theme="night"] .project-icon.sand { color: #cfbc9b; background: #3c372
 .theme-picker button[aria-pressed="true"] { color: var(--ink); opacity: 1; }
 .theme-picker button:hover { opacity: 1; }
 .theme-picker i { width: 7px; height: 7px; border-radius: 50%; border: 1px solid #c4cbbd; background: #faf9f6; }
-.theme-picker [data-theme-choice="studio"] i { background: #bac9b5; border-color: #a8bba4; }
 .theme-picker [data-theme-choice="night"] i { background: #344a3e; border-color: #4c6353; }
 .back-link { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; color: var(--muted); padding: 6px 0; margin: 0 0 24px; }
 .back-link:hover { color: var(--accent); }
@@ -156,8 +154,6 @@ html[data-page-hidden="true"] *, html[data-page-hidden="true"] *::before, html[d
 @media (min-height: 950px) and (min-width: 700px) { main { padding-top: 80px; } }
 @media (max-width: 600px) {
   .masthead { padding: 24px; }
-  .brand { font-size: 13px; gap: 8px; }
-  .brand-mark { font-size: 24px; width: 24px; }
   .preview-label { font-size: 9px; }
   main { padding: 38px 24px 52px; }
   h1 { font-size: 30px; letter-spacing: -1.2px; }
@@ -216,7 +212,6 @@ html[data-page-hidden="true"] *, html[data-page-hidden="true"] *::before, html[d
 
 /* Live onboarding uses the same quiet layout as the design preview. */
 body { --muted: #6e7d73; }
-body[data-theme="studio"] { --muted: #687d6d; }
 body[data-theme="night"] { --muted: #a1b1a7; }
 main { flex-direction: column; justify-content: flex-start; align-items: center; }
 main > section { width: 100%; }

package/docs/releases/0.10.0.md

@@ -0,0 +1,20 @@
+# 0.10.0：让 Codex 组队工作
+
+将已确认的星尘设计接入正式本机向导。首页说明两种协作方式：在企业微信群里连接自己的多个 Codex 会话，或与同事的 Codex 会话按角色分工、接力完成任务。
+
+- 首页标题更新为“让 Codex 组队工作。”，桌面与移动端统一使用紧凑 Logo。
+- 配色保留纸白、夜色；旧的雾绿选择自动回落到纸白。
+- 增加 Three.js 星尘背景、轻微鼠标视差、星点牵引与短尾迹，移除鼠标光晕、手动停用按钮和背景说明文案。
+- Three.js 固定版本，模块由本机向导提供，无需 CDN 或额外配置。背景不拦截点击，保留系统鼠标。
+- 触屏与系统减少动态效果设置下使用静态星点，不创建 WebGL 上下文。无 WebGL 或上下文丢失时自动降级；页面隐藏时暂停动画。星点与尾迹各一次绘制，动画约 30 帧，像素比最多 1.5，画布最长边最多 2048 像素。
+
+## 升级
+
+```sh
+npm install --global xuym-codex-collab@0.10.0
+codex-collab setup
+```
+
+已有项目配置和协作记录无需迁移。升级后重启已运行的本机工作台进程，再打开向导，才能加载新代码；已有机器人连接按原有配置使用。
+
+本次通过 216 项自动化测试，并在浏览器验证正式页面及临时目录安装后的 npm 包：项目归属、主题切换保留表单、320–3840 像素布局、后台暂停与恢复、触屏与减少动态效果、WebGL 降级与恢复均通过；安装后的 CLI 能启动独立工作台并提供完整背景资源。不新增真实企业微信群或跨机器验收结论。

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xuym-codex-collab",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "Git-backed collaboration tools for Codex teams, with MCP, WeCom, and local runners.",
   "repository": {
     "type": "git",
@@ -57,6 +57,7 @@
     "@modelcontextprotocol/server": "2.3.1",
     "@openai/codex-sdk": "0.161.0",
     "@wecom/aibot-node-sdk": "1.0.7",
+    "three": "0.186.1",
     "zod": "^4.6.5"
   }
 }