dsh-clone 0.0.0-stage → 0.2.0

package/lib/render.js

@@ -0,0 +1,148 @@
+/**
+ * Rendering a lane's page to a PNG, using a browser the machine already has.
+ *
+ * dsh-clone does not bundle or download a browser. It looks for the Chromium
+ * family that people already installed (Chrome, Chromium, Edge, Brave), drives
+ * it in one-shot headless screenshot mode, and treats a missing browser as a
+ * normal state: the panel then shows the live page and the reader picks.
+ *
+ * Detection is cached for the life of the plugin, and a failed render only
+ * costs the score, never the lane.
+ */
+
+import { existsSync } from 'node:fs'
+import { readFile, rm } from 'node:fs/promises'
+import { pathToFileURL } from 'node:url'
+
+import { decodePng } from './png.js'
+
+/**
+ * Browsers that implement `--headless=new --screenshot`, in the order they are
+ * probed: an explicit override first, then the per-platform install locations,
+ * then bare names resolved from PATH.
+ */
+const CANDIDATES = [
+  process.env.DSH_CLONE_BROWSER,
+  // macOS
+  '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
+  '/Applications/Chromium.app/Contents/MacOS/Chromium',
+  '/Applications/Microsoft Edge.app/Contents/MacOS/Microsoft Edge',
+  '/Applications/Brave Browser.app/Contents/MacOS/Brave Browser',
+  // Windows (a large share of Harness users are on Windows)
+  process.env.LOCALAPPDATA === undefined ? undefined : `${process.env.LOCALAPPDATA}\\Google\\Chrome\\Application\\chrome.exe`,
+  process.env.LOCALAPPDATA === undefined ? undefined : `${process.env.LOCALAPPDATA}\\Microsoft\\Edge\\Application\\msedge.exe`,
+  'C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe',
+  'C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe',
+  'C:\\Program Files\\Microsoft\\Edge\\Application\\msedge.exe',
+  'C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe',
+  'C:\\Program Files\\BraveSoftware\\Brave-Browser\\Application\\brave.exe',
+  // Linux
+  '/usr/bin/google-chrome',
+  '/usr/bin/google-chrome-stable',
+  '/usr/bin/chromium',
+  '/usr/bin/chromium-browser',
+  '/snap/bin/chromium',
+  // PATH names, for anything installed elsewhere
+  'google-chrome',
+  'google-chrome-stable',
+  'chromium',
+  'chromium-browser',
+  'microsoft-edge',
+  'msedge',
+  'brave-browser',
+].filter((candidate) => typeof candidate === 'string' && candidate.length > 0)
+
+/**
+ * Find one usable browser and remember it.
+ * @param run - the command runner injected by the Host half.
+ * @returns a cached handle, or null when nothing usable is installed.
+ */
+export async function detectRenderer(run) {
+  if (detectRenderer.cached !== undefined) return detectRenderer.cached
+  for (const candidate of CANDIDATES) {
+    const isPath = candidate.includes('/') || candidate.includes('\\')
+    const absolute = isPath ? existsSync(candidate) : true
+    if (!absolute) continue
+    const probe = await run([candidate, '--version'], process.cwd(), { timeoutMs: 8_000 }).catch(() => null)
+    if (probe !== null && probe.code === 0) {
+      detectRenderer.cached = { command: candidate, version: probe.stdout.trim().split('\n')[0] ?? '' }
+      return detectRenderer.cached
+    }
+  }
+  detectRenderer.cached = null
+  return null
+}
+
+/**
+ * Render one HTML file to a PNG at the reference viewport.
+ * @param args - runner, browser handle, source file, output path, viewport.
+ * @returns the output path on success, or null.
+ */
+export async function renderPage({ run, renderer, filePath, outPath, viewport, timeoutMs = 30_000, attempts = 2 }) {
+  if (renderer === null || renderer === undefined) return null
+  // Cold, concurrent Chrome launches are occasionally flaky: the process exits
+  // without writing the screenshot. One quiet retry costs little and removes a
+  // whole class of "lane randomly has no score" reports.
+  for (let attempt = 1; attempt <= attempts; attempt += 1) {
+    const rendered = await renderOnce({ run, renderer, filePath, outPath, viewport, timeoutMs })
+    if (rendered !== null) return rendered
+    if (attempt < attempts) await new Promise((resolve) => setTimeout(resolve, 250 * attempt))
+  }
+  return null
+}
+
+/** One screenshot attempt: exactly one browser process, one profile, one file. */
+async function renderOnce({ run, renderer, filePath, outPath, viewport, timeoutMs }) {
+  const [width, height] = String(viewport ?? '1280x800')
+    .split('x')
+    .map((part) => Number.parseInt(part, 10))
+  const size = `${Number.isFinite(width) ? width : 1280},${Number.isFinite(height) ? height : 800}`
+  // Lanes finish at unpredictable moments and can overlap. Without an explicit
+  // per-render profile directory, concurrent Chrome launches contend for the
+  // default one and one of them exits without writing a screenshot.
+  const profileDir = `${outPath}.profile`
+  let result
+  try {
+    result = await run([
+      renderer.command,
+      '--headless=new',
+      '--disable-gpu',
+      '--hide-scrollbars',
+      '--no-first-run',
+      '--no-default-browser-check',
+      '--disable-extensions',
+      '--disable-background-networking',
+      '--disable-dev-shm-usage',
+      '--virtual-time-budget=2500',
+      `--user-data-dir=${profileDir}`,
+      `--window-size=${size}`,
+      `--screenshot=${outPath}`,
+      pathToFileURL(filePath).href,
+    ], process.cwd(), { timeoutMs }).catch(() => null)
+  } finally {
+    await rm(profileDir, { recursive: true, force: true }).catch(() => {})
+  }
+  if (result === null) return null
+  // Chrome exits non-zero on some platforms even after writing the file, and on
+  // macOS it can announce "bytes written" slightly before the file is visible,
+  // so the file itself decides success — after a short, bounded wait. The file
+  // must also decode: a truncated screenshot would otherwise score as garbage.
+  for (let wait = 0; wait < 3000; wait += 50) {
+    if (existsSync(outPath)) {
+      try {
+        const decoded = decodePng(await readFile(outPath))
+        if (decoded.width > 0 && decoded.height > 0) return outPath
+      } catch {
+        /* still being written, or a failed capture: keep waiting, then retry */
+      }
+    }
+    await new Promise((resolve) => setTimeout(resolve, 50))
+  }
+  await rm(outPath, { force: true }).catch(() => {})
+  return null
+}
+
+/** Test seam: forget the detected browser. */
+export function resetRendererCache() {
+  detectRenderer.cached = undefined
+}

package/lib/score-lane.js

@@ -0,0 +1,38 @@
+/**
+ * The composition of "score one lane": find a browser, screenshot the page,
+ * decode both PNGs, compare them.
+ *
+ * It lives here rather than in index.js so the Host half and the integration
+ * test drive exactly the same code path — the test then asserts the real wiring
+ * (engine → score → snapshot) instead of a copy of it.
+ */
+
+import { mkdir, readFile } from 'node:fs/promises'
+import { dirname, join } from 'node:path'
+
+import { detectRenderer, renderPage } from './render.js'
+import { scoreRender } from './score.js'
+
+/**
+ * Build the `scoreLane` dependency for the engine.
+ * @param run - command runner `(argv, cwd, options) => Promise<{code, stdout, stderr}>`.
+ * @returns an async function `({laneDir, referencePath, outPath, viewport}) => {score, outPath} | null`.
+ */
+export function makeScoreLane(run) {
+  return async function scoreLane({ laneDir, referencePath, outPath, viewport }) {
+    const browser = await detectRenderer(run)
+    if (browser === null) return null
+    await mkdir(dirname(outPath), { recursive: true })
+    const rendered = await renderPage({
+      run,
+      renderer: browser,
+      filePath: join(laneDir, 'index.html'),
+      outPath,
+      viewport,
+    })
+    if (rendered === null) return null
+    const [referencePng, renderPng] = await Promise.all([readFile(referencePath), readFile(rendered)])
+    const { score } = scoreRender({ referencePng, renderPng })
+    return { score, outPath: rendered }
+  }
+}

package/lib/score.js

@@ -0,0 +1,282 @@
+/**
+ * Reference-vs-render comparison.
+ *
+ * The claim dsh-clone makes is deliberately modest: how much of the picture
+ * matches, not whether the page is *correct*. Three things make the number
+ * useful instead of decorative:
+ *
+ *  1. **Coarse colour grid.** Both images are averaged into cells, so the score
+ *     measures layout and palette agreement — what a person judges first.
+ *  2. **Shift tolerance.** A rebuild that is a few pixels off is not a
+ *     different design. The colour comparison searches small cell offsets and
+ *     keeps the best agreement, so a 4px shift costs almost nothing while a
+ *     panel on the wrong side still costs a lot.
+ *  3. **Structure term.** Local contrast (edge energy) per cell is compared
+ *     separately and mixed in, so a flat grey block that happens to average to
+ *     the right colour cannot score as a faithful rebuild.
+ *
+ * The result is `100` for an identical image and falls off with picture
+ * disagreement. It never claims correctness.
+ */
+
+import { decodePng } from './png.js'
+
+/** Grid resolution: 48x32 keeps the comparison cheap and layout-oriented. */
+export const GRID = { columns: 48, rows: 32 }
+
+/** Largest cell shift the colour comparison forgives (in cells). */
+export const MAX_SHIFT = 2
+
+/** How the final score mixes the two measurements. */
+export const WEIGHTS = { colour: 0.62, structure: 0.38 }
+
+/**
+ * Average each image into a coarse grid of RGB triples.
+ * @param image - `{ width, height, data }` with straight RGBA pixels.
+ * @returns Float32Array of `columns * rows * 3` values in 0..255.
+ */
+export function gridOf(image, grid = GRID) {
+  const { width, height, data } = image
+  const columns = grid.columns
+  const rows = grid.rows
+  const sums = new Float64Array(columns * rows * 3)
+  const counts = new Float64Array(columns * rows)
+
+  for (let y = 0; y < height; y += 1) {
+    const row = Math.min(rows - 1, Math.floor((y * rows) / height))
+    for (let x = 0; x < width; x += 1) {
+      const cell = row * columns + Math.min(columns - 1, Math.floor((x * columns) / width))
+      const index = (y * width + x) * 4
+      const alpha = data[index + 3] / 255
+      // Transparent pixels are composited over white, which is what a browser
+      // screenshot of an unstyled page looks like.
+      const red = data[index] * alpha + 255 * (1 - alpha)
+      const green = data[index + 1] * alpha + 255 * (1 - alpha)
+      const blue = data[index + 2] * alpha + 255 * (1 - alpha)
+      sums[cell * 3] += red
+      sums[cell * 3 + 1] += green
+      sums[cell * 3 + 2] += blue
+      counts[cell] += 1
+    }
+  }
+
+  const out = new Float32Array(columns * rows * 3)
+  for (let cell = 0; cell < counts.length; cell += 1) {
+    const count = counts[cell]
+    if (count === 0) continue
+    out[cell * 3] = sums[cell * 3] / count
+    out[cell * 3 + 1] = sums[cell * 3 + 1] / count
+    out[cell * 3 + 2] = sums[cell * 3 + 2] / count
+  }
+  return out
+}
+
+/**
+ * Per-cell luminance edge energy.
+ *
+ * A cell's value is the mean absolute luminance gradient inside it, scaled so a
+ * strong edge is near 255. This is what distinguishes "the same average colour"
+ * from "the same picture": a solid block and a striped block can average the
+ * same grey but never the same edge energy.
+ * @param image - decoded image.
+ * @returns Float32Array of `columns * rows` values in 0..255.
+ */
+export function edgeGridOf(image, grid = GRID) {
+  const { width, height, data } = image
+  const columns = grid.columns
+  const rows = grid.rows
+  const sums = new Float64Array(columns * rows)
+  const counts = new Float64Array(columns * rows)
+
+  const luminance = (x, y) => {
+    const index = (y * width + x) * 4
+    const alpha = data[index + 3] / 255
+    const red = data[index] * alpha + 255 * (1 - alpha)
+    const green = data[index + 1] * alpha + 255 * (1 - alpha)
+    const blue = data[index + 2] * alpha + 255 * (1 - alpha)
+    return 0.2126 * red + 0.7152 * green + 0.0722 * blue
+  }
+
+  for (let y = 0; y < height; y += 1) {
+    const row = Math.min(rows - 1, Math.floor((y * rows) / height))
+    for (let x = 0; x < width; x += 1) {
+      const cell = row * columns + Math.min(columns - 1, Math.floor((x * columns) / width))
+      const right = x + 1 < width ? luminance(x + 1, y) : luminance(x, y)
+      const down = y + 1 < height ? luminance(x, y + 1) : luminance(x, y)
+      sums[cell] += Math.abs(right - luminance(x, y)) + Math.abs(down - luminance(x, y))
+      counts[cell] += 1
+    }
+  }
+
+  const out = new Float32Array(columns * rows)
+  for (let cell = 0; cell < counts.length; cell += 1) {
+    if (counts[cell] === 0) continue
+    // A 40-unit luminance step is already a hard edge; clamp so a few extreme
+    // cells cannot dominate the mean.
+    out[cell] = Math.min(255, (sums[cell] / counts[cell]) * 8)
+  }
+  return out
+}
+
+/**
+ * Turn a list of per-cell absolute differences into a similarity.
+ *
+ * A plain mean hides local failure: a page that reproduces 90% of a screen and
+ * leaves one panel blank still averages well. The mix below keeps the mean (how
+ * much agrees) and adds the 90th percentile (how bad the worst regions are), so
+ * a wrong panel costs real points while a 4px shift costs almost nothing.
+ * @param differences - per-cell absolute differences in 0..255.
+ * @returns 0..100 similarity.
+ */
+function similarityFrom(differences) {
+  if (differences.length === 0) return 0
+  const sorted = Float64Array.from(differences).sort()
+  const mean = sorted.reduce((sum, value) => sum + value, 0) / sorted.length
+  const p90 = sorted[Math.min(sorted.length - 1, Math.floor(sorted.length * 0.9))]
+  const blended = mean * 0.62 + p90 * 0.38
+  return Math.max(0, Math.min(100, 100 - (blended / 255) * 100))
+}
+
+/**
+ * Soften an edge grid with a 3x3 box pass.
+ *
+ * Raw edge energy is unforgiving: a 2px text shift rewrites almost every edge
+ * value. Blurring twice keeps the shape of "where the detail is" while dropping
+ * the exact pixel alignment, which is the property a person judges.
+ * @param grid - edge grid of `columns * rows`.
+ * @returns a new, softened grid.
+ */
+export function blurEdgeGrid(grid, gridSize = GRID) {
+  const columns = gridSize.columns
+  const rows = gridSize.rows
+  const out = new Float32Array(grid.length)
+  for (let y = 0; y < rows; y += 1) {
+    for (let x = 0; x < columns; x += 1) {
+      let sum = 0
+      let count = 0
+      for (let dy = -1; dy <= 1; dy += 1) {
+        for (let dx = -1; dx <= 1; dx += 1) {
+          const yy = y + dy
+          const xx = x + dx
+          if (yy < 0 || yy >= rows || xx < 0 || xx >= columns) continue
+          sum += grid[yy * columns + xx]
+          count += 1
+        }
+      }
+      out[y * columns + x] = sum / count
+    }
+  }
+  return out
+}
+
+/**
+ * Structural agreement, measured against the reference's own edge energy.
+ *
+ * Absolute differences are the wrong scale here: edge values are small, so a
+ * page that loses every detail would still look "close". Dividing by how much
+ * edge energy the reference actually has makes a missing structure expensive and
+ * a faithful one cheap.
+ * @param reference - softened reference edge grid.
+ * @param render - softened rendered edge grid.
+ * @returns 0..100 similarity.
+ */
+function structureSimilarity(reference, render) {
+  if (reference.length !== render.length) throw new Error('score: grid sizes differ')
+  let difference = 0
+  let energy = 0
+  for (let index = 0; index < reference.length; index += 1) {
+    difference += Math.abs(reference[index] - render[index])
+    energy += reference[index]
+  }
+  // A reference with no edges at all is satisfied by anything without edges.
+  if (energy < 1) return 100
+  return Math.max(0, Math.min(100, 100 * (1 - difference / energy)))
+}
+
+/**
+ * Colour similarity that forgives a small uniform shift.
+ * @param reference - reference colour grid.
+ * @param render - rendered colour grid.
+ * @param grid - grid dimensions the two arrays were built with.
+ * @param maxShift - largest cell offset to try in each axis.
+ * @returns `{ similarity, shift }` with the best offset found.
+ */
+export function colourSimilarity(reference, render, grid = GRID, maxShift = MAX_SHIFT) {
+  let best = { similarity: -1, shift: { x: 0, y: 0 } }
+  for (let dy = -maxShift; dy <= maxShift; dy += 1) {
+    for (let dx = -maxShift; dx <= maxShift; dx += 1) {
+      // Shift the render against the reference and compare only the overlap.
+      const x0 = Math.max(0, dx)
+      const y0 = Math.max(0, dy)
+      const x1 = Math.min(grid.columns, grid.columns + dx)
+      const y1 = Math.min(grid.rows, grid.rows + dy)
+      if (x1 - x0 < grid.columns - maxShift || y1 - y0 < grid.rows - maxShift) continue
+      const differences = []
+      for (let y = y0; y < y1; y += 1) {
+        for (let x = x0; x < x1; x += 1) {
+          const renderCell = (y * grid.columns + x) * 3
+          const referenceCell = ((y - dy) * grid.columns + (x - dx)) * 3
+          differences.push(
+            (Math.abs(reference[referenceCell] - render[renderCell])
+              + Math.abs(reference[referenceCell + 1] - render[renderCell + 1])
+              + Math.abs(reference[referenceCell + 2] - render[renderCell + 2])) / 3,
+          )
+        }
+      }
+      if (differences.length === 0) continue
+      const similarity = similarityFrom(differences)
+      if (similarity > best.similarity) best = { similarity, shift: { x: dx, y: dy } }
+    }
+  }
+  if (best.similarity < 0) {
+    // Degenerate grid (smaller than the shift window): compare without shifting.
+    return { similarity: similarityOf(reference, render), shift: { x: 0, y: 0 } }
+  }
+  return best
+}
+
+/**
+ * Mix colour agreement and structural agreement into one number.
+ * @param colour - 0..100 colour similarity.
+ * @param structure - 0..100 structural similarity.
+ * @returns 0..100, one decimal.
+ */
+export function combineScore(colour, structure) {
+  const mixed = colour * WEIGHTS.colour + structure * WEIGHTS.structure
+  return Math.round(Math.max(0, Math.min(100, mixed)) * 10) / 10
+}
+
+/**
+ * Score one rendered lane against the reference screenshot.
+ * @param args - raw PNG bytes of both images, plus an optional grid.
+ * @returns `{ score, colour, structure, shift }` — score rounded to one decimal.
+ */
+export function scoreRender({ referencePng, renderPng, grid = GRID }) {
+  const reference = decodePng(referencePng)
+  const render = decodePng(renderPng)
+  const colour = colourSimilarity(gridOf(reference, grid), gridOf(render, grid), grid)
+  const softEdges = (image) => blurEdgeGrid(blurEdgeGrid(edgeGridOf(image, grid), grid), grid)
+  const structure = structureSimilarity(softEdges(reference), softEdges(render))
+  return {
+    score: combineScore(colour.similarity, structure),
+    colour: Math.round(colour.similarity * 10) / 10,
+    structure: Math.round(structure * 10) / 10,
+    shift: colour.shift,
+  }
+}
+
+/**
+ * One-line verdict for the panel and the tool output.
+ *
+ * Bands are calibrated against the measured runs in this repository: a faithful
+ * rebuild of a dense screen lands at 95-99, a good-but-flawed one at 87-92, and
+ * two unrelated dark interfaces at about 80.
+ */
+export function scoreLabel(score) {
+  if (typeof score !== 'number' || !Number.isFinite(score)) return 'not scored'
+  if (score >= 95) return `${score}% match — near-identical`
+  if (score >= 90) return `${score}% match — close`
+  if (score >= 80) return `${score}% match — recognisable`
+  if (score >= 60) return `${score}% match — same idea, different layout`
+  return `${score}% match — a different page`
+}

package/lib/util.js

@@ -0,0 +1,85 @@
+/**
+ * Small dependency-free helpers shared by the Host half and the tests.
+ * Nothing here touches the filesystem or the Harness: keep it pure so the
+ * smoke test can exercise it in plain Node.
+ */
+
+/** Clamp a candidate lane count into the supported range. */
+export function clampLanes(value, { min = 1, max = 4, fallback = 3 } = {}) {
+  const numeric = typeof value === 'number' ? value : Number(value)
+  if (!Number.isFinite(numeric)) return fallback
+  const rounded = Math.floor(numeric)
+  if (rounded < min) return min
+  if (rounded > max) return max
+  return rounded
+}
+
+/** Normalize an unknown thrown value into one readable line. */
+export function reasonOf(error) {
+  if (error === null || error === undefined) return 'unknown error'
+  const message = error instanceof Error ? error.message : String(error)
+  return message.replace(/\s+/gu, ' ').trim().slice(0, 400) || 'unknown error'
+}
+
+/** Cut a string to a display budget without splitting a surrogate pair. */
+export function truncate(text, limit) {
+  const value = String(text ?? '')
+  if (value.length <= limit) return value
+  const cut = value.slice(0, Math.max(0, limit - 1))
+  return `${Array.from(cut).slice(0, -1).join('')}…`
+}
+
+/** Stable, filesystem-safe slug for the picked clone's destination folder. */
+export function slugify(text, fallback = 'clone') {
+  const value = String(text ?? '')
+    .toLowerCase()
+    .replace(/[^a-z0-9._-]+/gu, '-')
+    .replace(/-+/gu, '-')
+    .replace(/^[-_.]+|[-_.]+$/gu, '')
+  return value.length === 0 ? fallback : value.slice(0, 40)
+}
+
+/** Human duration for the panel: 4.2s, 1m 07s, 12m. */
+export function formatDuration(ms) {
+  if (!Number.isFinite(ms) || ms < 0) return '—'
+  if (ms < 1000) return `${Math.round(ms)}ms`
+  const seconds = ms / 1000
+  if (seconds < 60) return `${seconds.toFixed(seconds < 10 ? 1 : 0)}s`
+  const minutes = Math.floor(seconds / 60)
+  const rest = Math.round(seconds - minutes * 60)
+  return rest === 0 ? `${minutes}m` : `${minutes}m ${String(rest).padStart(2, '0')}s`
+}
+
+/** Total token count for one lane's accumulated usage. */
+export function totalTokens(tokens) {
+  if (tokens === null || tokens === undefined) return 0
+  const input = Number(tokens.input) || 0
+  const output = Number(tokens.output) || 0
+  const cache = Number(tokens.cacheRead) || 0
+  return input + output + cache
+}
+
+/** Lowercase file extension including the dot, or '' when there is none. */
+export function extensionOf(filePath) {
+  const name = String(filePath ?? '')
+  const dot = name.lastIndexOf('.')
+  if (dot <= 0) return ''
+  return name.slice(dot).toLowerCase()
+}
+
+/** Whether a path ends in a readable raster image extension. */
+export function isImagePath(filePath) {
+  return ['.png', '.jpg', '.jpeg', '.webp', '.gif'].includes(extensionOf(filePath))
+}
+
+/** Media type for the raster formats dsh-clone accepts as a reference. */
+export function mediaTypeOf(filePath) {
+  switch (extensionOf(filePath)) {
+    case '.png': return 'image/png'
+    case '.jpg':
+    case '.jpeg': return 'image/jpeg'
+    case '.webp': return 'image/webp'
+    case '.gif': return 'image/gif'
+    default: return undefined
+  }
+}

package/locale/en.json

@@ -0,0 +1,6 @@
+{
+  "meta": {
+    "title": "Clone",
+    "description": "Rebuild a reference screenshot as working UI: parallel builder agents, live side-by-side previews, one-click adoption."
+  }
+}

package/locale/ru.json

@@ -0,0 +1,6 @@
+{
+  "meta": {
+    "title": "Clone",
+    "description": "Собирает рабочий интерфейс по скриншоту: несколько агентов параллельно, живое сравнение и выбор лучшего результата."
+  }
+}

package/locale/zh.json

@@ -0,0 +1,6 @@
+{
+  "meta": {
+    "title": "克隆",
+    "description": "把参考截图重建为可运行的界面：多个智能体并行构建，实时并排预览，一键采用最满意的一版。"
+  }
+}

package/package.json

@@ -1,6 +1,75 @@
 {
   "name": "dsh-clone",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.2.0",
+  "description": "Screenshot in, working UI out: several agents rebuild the same reference interface in parallel, and you pick the live result you like best.",
+  "type": "module",
+  "license": "MIT",
+  "author": "Egor Fedorov",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/egorfedorov/dsh-clone.git"
+  },
+  "homepage": "https://github.com/egorfedorov/dsh-clone",
+  "bugs": {
+    "url": "https://github.com/egorfedorov/dsh-clone/issues"
+  },
+  "keywords": [
+    "dsh",
+    "dsh-plugin",
+    "deepseek-harness",
+    "screenshot-to-code",
+    "ui-clone",
+    "design-to-code",
+    "subagents",
+    "worktree"
+  ],
+  "engines": {
+    "node": ">=20",
+    "dsh": ">=0.2.0-rc.2 || >=0.2.1-rc.2 || >=0.2.2-rc.1"
+  },
+  "main": "index.js",
+  "exports": {
+    ".": "./index.js",
+    "./client": "./client.js",
+    "./package.json": "./package.json",
+    "./locale/*.json": "./locale/*.json",
+    "./icon": "./icon.svg"
+  },
+  "files": [
+    "index.js",
+    "client.js",
+    "lib/*.js",
+    "locale/*.json",
+    "icon.svg",
+    "cordis.patch.yml",
+    "README.md",
+    "ACCEPTABLE-USE.md",
+    "LICENSE",
+    "index.json",
+    "screenshots.json",
+    "docs/assets/icon-180.png",
+    "CHANGELOG.md"
+  ],
+  "dsh": {
+    "bundle": {
+      "patch": "./cordis.patch.yml"
+    },
+    "client": {
+      "platform": "web",
+      "immediately": true,
+      "inject": [
+        "@deepseek-ai/dsh-client-ui-conversation"
+      ]
+    }
+  },
+  "scripts": {
+    "test": "node test/smoke.mjs",
+    "test:git": "node test/git-lane.mjs",
+    "test:all": "node test/smoke.mjs && node test/git-lane.mjs && node test/render-score.mjs",
+    "check": "node --check index.js && node --check client.js && for f in lib/*.js; do node --check \"$f\" || exit 1; done",
+    "test:score": "node test/render-score.mjs"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/screenshots.json

@@ -0,0 +1,6 @@
+[
+  "docs/assets/nebula-dashboard.png",
+  "docs/assets/nebula-clone.png",
+  "docs/assets/aperture-landing.png",
+  "docs/assets/aperture-clone.png"
+]