wtt-connect 0.2.2 → 0.2.3

package/README.md

@@ -21,6 +21,7 @@ Implemented production-oriented surfaces:
   - `acp` for any Agent Client Protocol compatible agent
   - `devin` through ACP (`devin acp`)
 - Normalized tool/progress event publishing
+- OpenDesign visual artifact generation for formula/principle/process/UI explanations, with a quality gate that checks for dense structure, SVG/canvas diagrams, animation, examples, and formula/metric explanation before upload
 - TTS extension point:
   - `none`
   - `macos-say` using the macOS `say` command, emitted as WAV when upload is enabled

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wtt-connect",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "private": false,
   "description": "WTT-native connector daemon for Codex, Claude Code, Cursor, Gemini, ACP, and other coding agent surfaces.",
   "type": "module",

package/src/opendesign.js

@@ -54,9 +54,12 @@ export async function buildOpenDesignPrompt({ config, outputDir, userMessage, re
     '- index.html must be complete and runnable in a sandbox iframe.',
     '- Do not use external CDNs, remote images, external fonts, forms, cookies, localStorage, or network calls.',
     '- Use inline SVG or local CSS/JS only.',
+    '- Treat this as a premium visual explainer, not a documentation page. The first viewport must look intentionally designed.',
     '- For formula/principle explanations include: a main diagram, step animation, symbol/metric table, minimal concrete example, explanatory text beside visuals, and final compact summary.',
     '- For UI/prototype requests include realistic fake data, hover states, and meaningful state transitions.',
     '',
+    visualQualityContract(zh),
+    '',
     `WTT topic_id: ${topicId || 'unknown'}`,
     '',
     zh ? '用户原始消息：' : 'Original user message:',
@@ -69,6 +72,69 @@ export async function buildOpenDesignPrompt({ config, outputDir, userMessage, re
   ].join('\n');
 }
 
+export function buildOpenDesignRepairPrompt({ outputDir, issues = [], locale = 'zh' }) {
+  const zh = locale === 'zh';
+  return [
+    'The previous OpenDesign artifact did not meet WTT visual quality requirements.',
+    `Rewrite the artifact in place in this directory: ${outputDir}`,
+    'Keep the same answer/topic meaning, but replace weak layout, weak styling, and missing motion.',
+    '',
+    'Detected issues:',
+    ...issues.map((issue) => `- ${issue}`),
+    '',
+    visualQualityContract(zh),
+    '',
+    'Overwrite index.html, style.css, and main.js as needed. Reply with only: index.html',
+  ].join('\n');
+}
+
+export async function evaluateOpenDesignArtifact(dir) {
+  const root = path.resolve(dir);
+  const indexPath = path.join(root, 'index.html');
+  const stylePath = path.join(root, 'style.css');
+  const scriptPath = path.join(root, 'main.js');
+  const issues = [];
+  let index = '';
+  let style = '';
+  let script = '';
+  try {
+    index = await fs.readFile(indexPath, 'utf8');
+  } catch {
+    return { ok: false, score: 0, issues: ['missing index.html'] };
+  }
+  try { style = await fs.readFile(stylePath, 'utf8'); } catch {}
+  try { script = await fs.readFile(scriptPath, 'utf8'); } catch {}
+  const combined = `${index}\n${style}\n${script}`;
+  let score = 0;
+
+  if (combined.length >= 7000) score += 1;
+  else issues.push('artifact is too sparse; expected a dense, high-fidelity explainer');
+
+  if (/<svg[\s>]/i.test(combined) || /<canvas[\s>]/i.test(combined)) score += 1;
+  else issues.push('missing SVG/canvas diagram for visual explanation');
+
+  if (/@keyframes|animation(?:-name)?:|transition:|stroke-dasharray|requestAnimationFrame/i.test(combined)) score += 1;
+  else issues.push('missing meaningful animation or motion system');
+
+  if (/:root\s*\{|--[a-z0-9-]+:/i.test(combined)) score += 1;
+  else issues.push('missing explicit design tokens / CSS variables');
+
+  const structureCount = (combined.match(/<(section|article|aside|figure|table)\b/gi) || []).length;
+  if (structureCount >= 5) score += 1;
+  else issues.push('layout lacks enough structured sections/cards/tables');
+
+  if (/示例|例子|example|case|sample/i.test(combined)) score += 1;
+  else issues.push('missing concrete example section');
+
+  if (/公式|formula|symbol|符号|metric|指标|table|thead|tbody/i.test(combined)) score += 1;
+  else issues.push('missing formula/symbol/metric explanation');
+
+  if (/data-step|step-|timeline|progress|播放|replay|next/i.test(combined)) score += 1;
+  else issues.push('missing step-by-step interaction/state');
+
+  return { ok: score >= 6, score, issues };
+}
+
 async function loadSkillBlocks(config, skillNames) {
   const root = config.openDesignSkillsDir || '';
   const blocks = [];
@@ -93,6 +159,29 @@ function fallbackSkillBlock() {
   ].join('\n');
 }
 
+function visualQualityContract(zh) {
+  return [
+    'WTT OpenDesign visual quality contract:',
+    '- Canvas: design for a 1440x900 whiteboard/preview area, responsive down to tablet. Use full-width composition, not a narrow article.',
+    '- Visual hierarchy: strong title block, one dominant SVG/canvas diagram, one compact example panel, one formula/symbol table, one step timeline, and a final takeaway strip.',
+    '- Default aesthetic when the user did not request a theme: light editorial research board, warm off-white paper, precise ink lines, subtle grid/noise, restrained color accents, refined spacing. It should feel closer to a polished team workspace/design note than a dark coding console.',
+    '- Aesthetic: choose a committed direction such as editorial lab notebook, precision engineering console, warm classroom blackboard, industrial systems map, or high-contrast research poster. Avoid generic SaaS cards.',
+    '- Typography: use distinctive CSS font stacks from local system fonts only, for example Georgia/Times editorial serif plus ui-monospace accents, or Avenir/Helvetica Neue with a mono data layer. Do not use plain Inter/Roboto/Arial defaults.',
+    '- Color: define CSS variables in :root. Use a restrained but intentional palette with textured background, grid/noise/paper effect, or layered panels. Avoid flat dark gray, neon cyan buttons, purple gradients, and default dark-mode dashboards unless the content explicitly requires them.',
+    '- Polish: use fine borders, soft shadows, intentional whitespace, aligned baselines, and varied panel sizes. Do not make every block the same rounded rectangle.',
+    '- SVG: include at least one large inline SVG with labeled nodes, arrows, and a visible animated path. Arrow animation must be obvious: stroke-dasharray/stroke-dashoffset or moving marker/dot.',
+    '- Motion: include 2-4 purposeful animations: entry reveal, arrow/path draw, active step highlight, formula/example transition. Respect prefers-reduced-motion.',
+    '- Explanation: every diagram node must have adjacent text that explains why it matters. Do not rely on labels alone.',
+    '- Example: include a minimal concrete example with inputs, intermediate transformation, and output/result.',
+    '- Density: avoid empty hero-only pages. The first viewport should already contain the main diagram and explanatory panels.',
+    '- Controls: provide Replay / Step controls when animation or process is present.',
+    '- Finish: no placeholder lorem ipsum, no “template” language, no meta comments about being generated.',
+    zh
+      ? '- Chinese copy must be concise, concrete, and tied to the user/agent answer. Do not use “苏格拉底/架构概念/问题分解/完整答案” as HTML section names unless the user explicitly asks.'
+      : '- Copy must be concise, concrete, and tied to the user/agent answer. Do not use generic section names unless the user explicitly asks.',
+  ].join('\n');
+}
+
 function parseMetadata(metadata) {
   if (!metadata) return null;
   if (typeof metadata === 'object') return metadata;

package/src/runner.js

@@ -14,7 +14,7 @@ import { log } from './logger.js';
 import { buildRuntimeInfo } from './runtime-info.js';
 import { runShellCommand } from './shell-runner.js';
 import { TerminalSessionManager } from './terminal-session.js';
-import { buildOpenDesignPrompt, chooseOpenDesignSkills, prepareOpenDesignDir, shouldRenderOpenDesignArtifact } from './opendesign.js';
+import { buildOpenDesignPrompt, buildOpenDesignRepairPrompt, chooseOpenDesignSkills, evaluateOpenDesignArtifact, prepareOpenDesignDir, shouldRenderOpenDesignArtifact } from './opendesign.js';
 
 const TERMINAL_STATUSES = new Set(['review', 'done', 'approved', 'cancelled']);
 
@@ -288,13 +288,14 @@ export class Runner {
       });
       const outputDir = await prepareOpenDesignDir(this.config, topicId);
       const skills = chooseOpenDesignSkills(message, reply);
+      const locale = inferLocale(`${message.content || ''}\n${reply || ''}`);
       const prompt = await buildOpenDesignPrompt({
         config: this.config,
         outputDir,
         userMessage: message.content || '',
         reply,
         topicId,
-        locale: inferLocale(`${message.content || ''}\n${reply || ''}`),
+        locale,
         skills,
       });
       await adapter.run(prompt, {
@@ -302,6 +303,23 @@ export class Runner {
         topicId,
         onProgress: (event) => this.maybePublishProgress(topicId, event, adapter.name),
       });
+      let quality = await evaluateOpenDesignArtifact(outputDir);
+      if (!quality.ok) {
+        log('warn', 'opendesign artifact quality check failed; requesting rewrite', { topicId, score: quality.score, issues: quality.issues.join('; ') });
+        await this.wtt.typing(topicId, 'start', {
+          statusText: 'OpenDesign 正在重写低质量 artifact',
+          statusKind: 'opendesign_repair',
+          adapter: adapter.name,
+          ttlMs: 45000,
+        });
+        await adapter.run(buildOpenDesignRepairPrompt({ outputDir, issues: quality.issues, locale }), {
+          sessionKey: `wtt:opendesign:${topicId}`,
+          topicId,
+          onProgress: (event) => this.maybePublishProgress(topicId, event, adapter.name),
+        });
+        quality = await evaluateOpenDesignArtifact(outputDir);
+        log(quality.ok ? 'info' : 'warn', 'opendesign artifact quality check after rewrite', { topicId, score: quality.score, issues: quality.issues.join('; ') });
+      }
       const artifact = await this.artifacts.uploadDirectory(outputDir, {
         source: messageTopicType(message) || 'feed',
         sourceId: topicId,