npm - create-harness-vibe-coding - Versions diffs - 0.8.19 → 0.9.3 - Mend

create-harness-vibe-coding 0.8.19 → 0.9.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (656) hide show

package/src/wf-ui-server/workflow-node-types/display-node.mjs ADDED Viewed

@@ -0,0 +1,151 @@
+// display-node.mjs
+//
+// Display node adapter: agents write full HTML reports to a display node; the
+// user views them on the canvas (fullscreen iframe). The HTML is a REAL file
+// on disk (Harness/a2a/component-nodes/<nodeId>/report.html) with FULLY OPEN
+// JS — per user decision the report content carries the same trust as the
+// agent's own terminal (local tool, no auth; agents are the user's own).
+// {{excalidraw:<nodeId>}} placeholders expand to self-contained inline SVGs at
+// serve time, so diagrams embed without CDN or runtime JS.
+import fs from 'node:fs'
+import path from 'node:path'
+import { nodeStoreRoot } from '../node-store-utils.mjs'
+import {
+  ComponentNodeError,
+  assertRevision,
+  getComponentNode,
+  isLocked,
+  updateComponentNode,
+} from '../component-node-store.mjs'
+import { renderSceneSvg } from '../excalidraw-svg.mjs'
+export const DISPLAY_USAGE = [
+  'Writing/modifying HTML files is normal work and always allowed.',
+  'When PRESENTING a report or results to the user: if the user has not explicitly named a target file, the default presentation surface is a Display node — write a self-contained HTML document with display.write.',
+  'The user opens Display nodes on the canvas (fullscreen). Never open a browser yourself.',
+  'Theme: white background, blue (#2563EB)/black text, Claude-yellow (#D97757) accents; semantic classes: .report-title, .report-section, .card, .metric, .highlight, .muted.',
+  'Diagrams: embed an Excalidraw node scene with the placeholder {{excalidraw:<nodeId>}} anywhere in the HTML.',
+].join(' ')
+const EXCALIDRAW_PLACEHOLDER = /\{\{excalidraw:([A-Za-z0-9-]+)\}\}/g
+export function reportHtmlPath(projectRoot, nodeId) {
+  return path.join(nodeStoreRoot(projectRoot, 'component-nodes'), nodeId, 'report.html')
+}
+function requireDisplayNode(current) {
+  if (current.state.type !== 'display') {
+    throw new ComponentNodeError(`Node is not a display node: ${current.node.nodeId}`, {
+      statusCode: 409,
+      code: 'TYPE_MISMATCH',
+    })
+  }
+  return current
+}
+export function defaultDisplayTemplate({ title = 'Report' } = {}) {
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>${String(title).replace(/</g, '&lt;')}</title>
+<style>
+  :root { --blue:#2563EB; --ink:#111827; --muted:#6B7280; --claude:#D97757; --bg:#ffffff; }
+  * { box-sizing: border-box; }
+  body { margin:0; padding:32px; background:var(--bg); color:var(--ink); font:15px/1.6 system-ui,-apple-system,"Segoe UI",sans-serif; }
+  .report-title { font-size:26px; font-weight:800; letter-spacing:-0.02em; margin:0 0 4px; }
+  .report-meta { color:var(--muted); font-size:12px; margin-bottom:24px; }
+  .report-section { margin:24px 0; }
+  .report-section h2 { font-size:18px; color:var(--blue); border-bottom:2px solid #EFF3FF; padding-bottom:6px; }
+  .card { border:1px solid #E5EAF5; border-radius:10px; padding:16px; margin:12px 0; background:#FCFDFF; }
+  .metric { font-size:28px; font-weight:800; color:var(--blue); }
+  .highlight { color:var(--claude); font-weight:700; }
+  .muted { color:var(--muted); font-size:13px; }
+  .badge { display:inline-block; background:#FFF4EF; color:var(--claude); border:1px solid #F5D9CB; border-radius:999px; padding:2px 10px; font-size:12px; font-weight:600; }
+  figure.harness-excalidraw { margin:16px 0; padding:16px; border:1px solid #E5EAF5; border-radius:10px; background:#fff; }
+  figcaption { font-size:12px; color:var(--muted); margin-top:8px; }
+  table { border-collapse:collapse; width:100%; margin:12px 0; }
+  th,td { border:1px solid #E5EAF5; padding:8px 12px; text-align:left; font-size:14px; }
+  th { background:#F6F8FE; color:var(--blue); }
+  a { color:var(--blue); }
+  code { background:#F1F4FB; padding:2px 6px; border-radius:4px; font-size:13px; }
+</style>
+</head>
+<body>
+  <h1 class="report-title">${String(title).replace(/</g, '&lt;')}</h1>
+  <div class="report-meta">Generated by a Harness agent · Display node</div>
+  <div class="card"><p class="muted">Empty report — an agent will write content here with <code>display.write</code>.</p></div>
+</body>
+</html>
+`
+}
+// Adapter contract (same as markdown-node): handler(nodeId, projectRoot, payload).
+export function write(nodeId, projectRoot, payload = {}) {
+  const { html, expectedRevision, lockId, lockOwner } = payload
+  const current = requireDisplayNode(getComponentNode(projectRoot, nodeId))
+  const lock = isLocked(current.node.nodeId, undefined, { projectRoot })
+  if (lock) {
+    const declaredLockId = lockId !== undefined && lockId !== null ? String(lockId).trim() : ''
+    const declaredOwner = String(lockOwner || '').trim()
+    const holdsLock = (declaredLockId !== '' && declaredLockId === lock.lockId)
+      || (declaredLockId === '' && declaredOwner !== '' && declaredOwner === lock.holder)
+    if (!holdsLock) {
+      const error = new ComponentNodeError(
+        `Display node is locked by ${lock.holder}. Reread, merge your changes, and retry.`,
+        { statusCode: 409, code: 'display_locked' },
+      )
+      error.currentRevision = current.node.revision
+      error.expectedRevision = expectedRevision === undefined || expectedRevision === null
+        ? current.node.revision
+        : expectedRevision
+      throw error
+    }
+  }
+  if (expectedRevision !== undefined && expectedRevision !== null) {
+    const conflict = assertRevision(current.node.revision, expectedRevision)
+    if (conflict) throw conflict
+  }
+  const filePath = reportHtmlPath(projectRoot, current.node.nodeId)
+  fs.mkdirSync(path.dirname(filePath), { recursive: true })
+  fs.writeFileSync(filePath, String(html ?? ''), 'utf8')
+  const bytes = Buffer.byteLength(html || '', 'utf8')
+  const updated = updateComponentNode(projectRoot, current.node.nodeId, {
+    revision: current.node.revision,
+    html: { bytes, updatedAt: new Date().toISOString() },
+  })
+  return { ok: true, bytes, revision: updated.node.revision }
+}
+export function read(nodeId, projectRoot, payload = {}) {
+  const current = requireDisplayNode(getComponentNode(projectRoot, nodeId))
+  const filePath = reportHtmlPath(projectRoot, current.node.nodeId)
+  const html = fs.existsSync(filePath) ? fs.readFileSync(filePath, 'utf8') : ''
+  return { ok: true, html, revision: current.node.revision, usage: DISPLAY_USAGE }
+}
+// Serves the report HTML with excalidraw placeholders expanded to inline SVG.
+// Falls back to the themed default template until an agent writes content.
+export function renderHtml(projectRoot, { nodeId }) {
+  const current = requireDisplayNode(getComponentNode(projectRoot, nodeId))
+  const filePath = reportHtmlPath(projectRoot, current.node.nodeId)
+  const title = current.node.title || 'Report'
+  const html = fs.existsSync(filePath) ? fs.readFileSync(filePath, 'utf8') : defaultDisplayTemplate({ title })
+  return expandExcalidrawPlaceholders(projectRoot, html)
+}
+function expandExcalidrawPlaceholders(projectRoot, html) {
+  return String(html || '').replace(EXCALIDRAW_PLACEHOLDER, (match, refNodeId) => {
+    try {
+      const ref = getComponentNode(projectRoot, refNodeId)
+      if (ref.state.type !== 'excalidraw') return match
+      const elements = Array.isArray(ref.state.scene?.elements) ? ref.state.scene.elements : []
+      const svg = renderSceneSvg(elements)
+      return `<figure class="harness-excalidraw">${svg}<figcaption>Excalidraw scene · <a href="#open-node:${refNodeId}">open interactive node</a></figcaption></figure>`
+    } catch {
+      return match // unresolvable reference: keep the placeholder text
+    }
+  })
+}

package/src/wf-ui-server/workflow-node-types/excalidraw-node.mjs ADDED Viewed

@@ -0,0 +1,145 @@
+import { ComponentNodeError, getComponentNode, updateComponentNode } from '../component-node-store.mjs'
+function rethrow(error) {
+  if (error instanceof ComponentNodeError) throw error
+  throw new ComponentNodeError(error.message, {
+    statusCode: error.statusCode,
+    code: error.code,
+  })
+}
+function requireSceneState(current) {
+  if (current.state.type !== 'excalidraw') {
+    throw new ComponentNodeError(`Node is not an excalidraw node: ${current.node.nodeId}`, {
+      statusCode: 409,
+      code: 'TYPE_MISMATCH',
+    })
+  }
+  const scene = current.state.scene
+  if (scene === null || typeof scene !== 'object' || Array.isArray(scene)) {
+    throw new ComponentNodeError(`Node has an invalid scene: ${current.node.nodeId}`)
+  }
+  return scene
+}
+function persistScene(projectRoot, current, scene) {
+  const updated = updateComponentNode(projectRoot, current.node.nodeId, {
+    revision: current.node.revision,
+    scene,
+  })
+  return { scene: updated.state.scene, revision: updated.node.revision }
+}
+export function readScene(nodeId, projectRoot) {
+  try {
+    const current = getComponentNode(projectRoot, nodeId)
+    const scene = requireSceneState(current)
+    return {
+      scene,
+      revision: current.node.revision,
+      title: current.node.title,
+    }
+  } catch (error) {
+    rethrow(error)
+  }
+}
+export function patchScene(nodeId, projectRoot, { patch } = {}) {
+  try {
+    const current = getComponentNode(projectRoot, nodeId)
+    const scene = requireSceneState(current)
+    if (patch === null || typeof patch !== 'object' || Array.isArray(patch)) {
+      throw new ComponentNodeError('Scene patch must be a plain object')
+    }
+    return persistScene(projectRoot, current, { ...scene, ...patch })
+  } catch (error) {
+    rethrow(error)
+  }
+}
+export function saveScene(nodeId, projectRoot, { scene } = {}) {
+  try {
+    const current = getComponentNode(projectRoot, nodeId)
+    requireSceneState(current)
+    if (scene === null || typeof scene !== 'object' || Array.isArray(scene)) {
+      throw new ComponentNodeError('Scene must be an object with elements, appState, and files')
+    }
+    const providedElements = Array.isArray(scene.elements) ? scene.elements : []
+    const result = persistScene(projectRoot, current, scene)
+    const storedElements = Array.isArray(result.scene.elements) ? result.scene.elements : []
+    if (providedElements.length > 0 && storedElements.length === 0) {
+      throw new ComponentNodeError('Scene save failed: provided elements were not persisted')
+    }
+    return result
+  } catch (error) {
+    rethrow(error)
+  }
+}
+export function renderPreview(nodeId, projectRoot) {
+  try {
+    const current = getComponentNode(projectRoot, nodeId)
+    const scene = requireSceneState(current)
+    const elements = Array.isArray(scene.elements) ? scene.elements : []
+    // Compute bounding box
+    if (elements.length === 0) {
+      return {
+        preview: {
+          elements: [],
+          elementCount: 0,
+          hasContent: false,
+          bounds: { minX: 0, minY: 0, maxX: 0, maxY: 0, width: 0, height: 0 },
+          viewport: { x: 0, y: 0, width: 300, height: 240, scale: 1 },
+        },
+      }
+    }
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity
+    for (const el of elements) {
+      const x = Number(el.x) || 0
+      const y = Number(el.y) || 0
+      const w = Number(el.width) || 50
+      const h = Number(el.height) || 50
+      if (x < minX) minX = x
+      if (y < minY) minY = y
+      if (x + w > maxX) maxX = x + w
+      if (y + h > maxY) maxY = y + h
+    }
+    const boundsWidth = Math.max(maxX - minX, 1)
+    const boundsHeight = Math.max(maxY - minY, 1)
+    // Target preview size
+    const viewW = 300
+    const viewH = 240
+    const padding = 16
+    // Scale to fit
+    const scaleX = (viewW - padding * 2) / boundsWidth
+    const scaleY = (viewH - padding * 2) / boundsHeight
+    const scale = Math.min(scaleX, scaleY, 2) // cap at 2x
+    // Normalize elements to viewport coordinates
+    const normalized = elements.map(el => ({
+      ...el,
+      x: (el.x - minX) * scale + padding,
+      y: (el.y - minY) * scale + padding,
+      width: el.width * scale,
+      height: el.height * scale,
+    }))
+    return {
+      preview: {
+        ...scene,
+        elements: normalized,
+        elementCount: elements.length,
+        hasContent: true,
+        bounds: { minX, minY, maxX, maxY, width: boundsWidth, height: boundsHeight },
+        viewport: { x: 0, y: 0, width: viewW, height: viewH, scale },
+      },
+    }
+  } catch (error) {
+    rethrow(error)
+  }
+}