@jairodri/huckleberry-cli 1.0.2 → 1.1.0

package/skills/impeccable/scripts/live/frameworks/tag-strategy.mjs

@@ -0,0 +1,247 @@
+/**
+ * The generic `tag` injection strategy.
+ *
+ * Frameworks without a dedicated adapter get a literal marker-wrapped
+ * `<script src>` block written into the entry template named by
+ * `.impeccable/live/config.json`. This module owns that block: building it,
+ * inserting it at the configured anchor, removing it again, and the
+ * Content-Security-Policy meta patch that keeps the cross-origin load allowed.
+ *
+ * It is deliberately framework-agnostic. Per-framework knowledge (Astro's
+ * `is:inline`, for instance) arrives as the `scriptAttrs` argument, resolved
+ * from the registry by the caller, so nothing here has to branch on a file
+ * extension or a project shape.
+ */
+
+import { buildLiveScriptSrc } from './script-src.mjs';
+
+export const MARKER_OPEN_TEXT = 'impeccable-live-start';
+export const MARKER_CLOSE_TEXT = 'impeccable-live-end';
+
+/** Markers that identify a file as still carrying our tag-strategy patch. */
+export const TAG_PATCH_MARKERS = Object.freeze([MARKER_OPEN_TEXT, 'data-impeccable-csp-original']);
+
+function commentOpen(syntax) { return syntax === 'jsx' ? '{/*' : '<!--'; }
+function commentClose(syntax) { return syntax === 'jsx' ? '*/}' : '-->'; }
+
+/**
+ * `scriptAttrs` is a pre-rendered attribute string (trailing space included)
+ * that the registry supplies for the target file. Astro is the only framework
+ * that uses it today: Astro processes `<script>` tags by default and rewrites
+ * src to its own bundled URL, so `is:inline ` opts out and the literal external
+ * src survives.
+ */
+export function buildTagBlock(syntax, port, token, scriptAttrs = '') {
+  const open = commentOpen(syntax);
+  const close = commentClose(syntax);
+  return (
+    open + ' ' + MARKER_OPEN_TEXT + ' ' + close + '\n' +
+    '<script ' + scriptAttrs + 'src="' + buildLiveScriptSrc(port, token) + '"></script>\n' +
+    open + ' ' + MARKER_CLOSE_TEXT + ' ' + close + '\n'
+  );
+}
+
+function detectLineEnding(content) {
+  if (content.includes('\r\n')) return '\r\n';
+  if (content.includes('\r')) return '\r';
+  return '\n';
+}
+
+function normalizeLineEndings(content, lineEnding) {
+  return lineEnding === '\n' ? content : content.replace(/\n/g, lineEnding);
+}
+
+function readLineEndingAt(content, index) {
+  if (content[index] === '\r' && content[index + 1] === '\n') return '\r\n';
+  if (content[index] === '\n') return '\n';
+  if (content[index] === '\r') return '\r';
+  return '';
+}
+
+export function insertTag(content, config, port, token, scriptAttrs = '') {
+  const lineEnding = detectLineEnding(content);
+  const block = normalizeLineEndings(buildTagBlock(config.commentSyntax, port, token, scriptAttrs), lineEnding);
+  // insertBefore: match the LAST occurrence. Anchors like `</body>` naturally
+  // belong at the end, and the same literal can appear earlier in code blocks
+  // within rendered documentation pages.
+  if (config.insertBefore) {
+    const idx = content.lastIndexOf(config.insertBefore);
+    if (idx === -1) return content;
+    return content.slice(0, idx) + block + content.slice(idx);
+  }
+  // insertAfter: match the FIRST occurrence — typical anchors like `<head>` or
+  // `<body>` open near the top of the document.
+  const idx = content.indexOf(config.insertAfter);
+  if (idx === -1) return content;
+  const after = idx + config.insertAfter.length;
+  // Preserve an existing trailing newline if the anchor already has one.
+  // Slice the remainder from the original anchor offset, not prefix.length:
+  // in the no-newline case prefix is one char longer than the anchor (the
+  // appended '\n'), so slicing by prefix.length would drop the first real
+  // character after the anchor (#227).
+  const existingNewline = readLineEndingAt(content, after);
+  const prefix = content.slice(0, after) + (existingNewline || lineEnding);
+  const rest = content.slice(after + existingNewline.length);
+  return prefix + block + rest;
+}
+
+/**
+ * Remove the live script block. Matches either HTML or JSX comment markers
+ * regardless of config (so stale tags from a wrong config can still be cleaned).
+ *
+ * Indent-preserving: captures any whitespace immediately preceding the opener
+ * marker and re-emits it in place of the removed block. `insertTag` inserted
+ * the block *after* the original line's indent and *before* the anchor (e.g.
+ * `</body>`), which moved the indent onto the opener line and left the anchor
+ * unindented. Replacing the whole block (plus its trailing newline) with just
+ * the captured indent hands the indent back to the anchor that follows.
+ */
+export function removeTag(content, _syntax) {
+  const patterns = [
+    /([ \t]*)<!--\s*impeccable-live-start\s*-->[\s\S]*?<!--\s*impeccable-live-end\s*-->([ \t]*(?:\r\n|\n|\r|$)?)/,
+    /([ \t]*)\{\/\*\s*impeccable-live-start\s*\*\/\}[\s\S]*?\{\/\*\s*impeccable-live-end\s*\*\/\}([ \t]*(?:\r\n|\n|\r|$)?)/,
+  ];
+  for (const pat of patterns) {
+    let changed = false;
+    let next = content;
+    do {
+      content = next;
+      next = content.replace(pat, (_match, leadingIndent, trailing = '') => {
+        if (/[\r\n]/.test(trailing)) return leadingIndent;
+        return leadingIndent || trailing || '';
+      });
+      if (next !== content) changed = true;
+    } while (next !== content);
+    if (changed) return next;
+  }
+  return content;
+}
+
+// ---------------------------------------------------------------------------
+// Content-Security-Policy meta-tag patcher
+//
+// When the user's HTML carries `<meta http-equiv="Content-Security-Policy">`,
+// the cross-origin load of /live.js (and the SSE/POST connection back to
+// localhost:PORT) is blocked unless the CSP explicitly allows that origin.
+//
+// On insert: append `http://localhost:PORT` to `script-src` and `connect-src`,
+// and stash the original `content` value in a `data-impeccable-csp-original`
+// attribute (base64) so revert is exact.
+//
+// On remove: detect the marker attribute, decode it, restore the original
+// content value verbatim, drop the marker.
+//
+// Header-based CSP (Next.js headers, Nuxt routeRules, SvelteKit kit.csp,
+// shared helpers) is NOT patched here — those need framework-specific config
+// edits and are handled via the existing detect-csp.mjs reference output.
+// Only the in-source meta-tag form gets the auto-patch.
+// ---------------------------------------------------------------------------
+
+const CSP_MARKER_ATTR = 'data-impeccable-csp-original';
+
+function findCspMetaTags(content) {
+  const out = [];
+  const tagRe = /<meta\s+([^>]*?)\/?>/gis;
+  let m;
+  while ((m = tagRe.exec(content)) !== null) {
+    const attrs = m[1];
+    if (!/(http-equiv|httpEquiv)\s*=\s*(['"])Content-Security-Policy\2/i.test(attrs)) continue;
+    out.push({ start: m.index, end: m.index + m[0].length, full: m[0], attrs });
+  }
+  return out;
+}
+
+function getAttr(attrs, name) {
+  const re = new RegExp(`\\b${name}\\s*=\\s*(['"])([\\s\\S]*?)\\1`, 'i');
+  const m = attrs.match(re);
+  return m ? { quote: m[1], value: m[2], full: m[0] } : null;
+}
+
+function appendOriginToDirective(csp, directive, origin) {
+  const re = new RegExp(`(^|;)(\\s*)(${directive})\\s+([^;]*)`, 'i');
+  const m = csp.match(re);
+  if (m) {
+    const tokens = m[4].trim().split(/\s+/);
+    if (tokens.includes(origin)) return csp;
+    return csp.replace(re, `${m[1]}${m[2]}${m[3]} ${[...tokens, origin].join(' ')}`);
+  }
+  // Directive missing — add it. Use 'self' + origin so we don't inadvertently
+  // narrow the policy compared to the default-src fallback (most users with
+  // an explicit CSP have 'self' there).
+  return csp.trim().replace(/;?\s*$/, '') + `; ${directive} 'self' ${origin}`;
+}
+
+export function patchCspMeta(content, port) {
+  const tags = findCspMetaTags(content);
+  if (tags.length === 0) return content;
+  const origin = `http://localhost:${port}`;
+
+  // Walk last-to-first so prior splices don't invalidate later indices.
+  let result = content;
+  for (let i = tags.length - 1; i >= 0; i--) {
+    const tag = tags[i];
+    const attrs = tag.attrs;
+    if (getAttr(attrs, CSP_MARKER_ATTR)) continue; // already patched
+    const contentAttr = getAttr(attrs, 'content');
+    if (!contentAttr) continue;
+
+    const original = contentAttr.value;
+    let patched = original;
+    patched = appendOriginToDirective(patched, 'script-src', origin);
+    patched = appendOriginToDirective(patched, 'connect-src', origin);
+    // The shader overlay during 'generating' creates a screenshot via
+    // URL.createObjectURL, producing a `blob:` URL — img-src 'self' rejects
+    // those. Add `blob:` so the overlay doesn't throw a CSP violation.
+    patched = appendOriginToDirective(patched, 'img-src', 'blob:');
+    if (patched === original) continue;
+
+    const newContentAttr = `content=${contentAttr.quote}${patched}${contentAttr.quote}`;
+    const marker = `${CSP_MARKER_ATTR}="${Buffer.from(original, 'utf-8').toString('base64')}"`;
+    // The tagRe captures any whitespace between the last attribute and the
+    // closing `/>` as part of `attrs`. Naively appending ` ${marker}` after
+    // a replace would land it BEFORE that trailing space, leaving a double
+    // space inside attrs and clobbering the space before `/>`. Split off
+    // the trailing whitespace, splice the marker into the attribute body,
+    // and re-append the original trailing whitespace so a self-closing
+    // `<meta … />` round-trips byte-for-byte.
+    const trailingWs = (attrs.match(/[ \t]*$/) || [''])[0];
+    const attrsBody = attrs.slice(0, attrs.length - trailingWs.length);
+    const newAttrs = attrsBody.replace(contentAttr.full, newContentAttr) + ' ' + marker + trailingWs;
+    const newTag = tag.full.replace(attrs, newAttrs);
+
+    result = result.slice(0, tag.start) + newTag + result.slice(tag.end);
+  }
+  return result;
+}
+
+export function revertCspMeta(content) {
+  const tags = findCspMetaTags(content);
+  if (tags.length === 0) return content;
+
+  let result = content;
+  for (let i = tags.length - 1; i >= 0; i--) {
+    const tag = tags[i];
+    const origAttr = getAttr(tag.attrs, CSP_MARKER_ATTR);
+    if (!origAttr) continue;
+    const contentAttr = getAttr(tag.attrs, 'content');
+    if (!contentAttr) continue;
+
+    let originalValue;
+    try { originalValue = Buffer.from(origAttr.value, 'base64').toString('utf-8'); }
+    catch { continue; }
+
+    const newContentAttr = `content=${contentAttr.quote}${originalValue}${contentAttr.quote}`;
+    let newAttrs = tag.attrs.replace(contentAttr.full, newContentAttr);
+    // Drop the marker attribute and any single space immediately preceding it.
+    newAttrs = newAttrs.replace(new RegExp(`\\s*${origAttr.full}`), '');
+    const newTag = tag.full.replace(tag.attrs, newAttrs);
+
+    result = result.slice(0, tag.start) + newTag + result.slice(tag.end);
+  }
+  return result;
+}
+
+/** The journal's undo for a tag-strategy patch: drop the block, restore CSP. */
+export function unpatchTagFile(content) {
+  return revertCspMeta(removeTag(content));
+}

package/skills/impeccable/scripts/live/frameworks/tanstack-start.mjs

@@ -0,0 +1,70 @@
+/**
+ * TanStack Start registry entry.
+ *
+ * Detection and the apply/remove pair are the existing adapter's
+ * (`../tanstack-adapter.mjs`); this file only declares them to the registry
+ * and names the artifacts the journal has to be able to heal.
+ */
+
+import {
+  TANSTACK_MARKER_OPEN,
+  applyTanStackLiveAdapter,
+  detectTanStackStartProject,
+  removeTanStackLiveAdapter,
+  unpatchTanStackRoot,
+} from '../tanstack-adapter.mjs';
+
+export const tanstackStart = {
+  name: 'tanstack-start',
+
+  detect(cwd) {
+    return detectTanStackStartProject(cwd);
+  },
+
+  inject: {
+    kind: 'adapter',
+
+    apply({ cwd, port, token, project }) {
+      return applyTanStackLiveAdapter({ cwd, port, token, project });
+    },
+
+    remove({ cwd, project }) {
+      return removeTanStackLiveAdapter({ cwd, project });
+    },
+
+    // The mount component's extension follows the root route's, so the path
+    // cannot live in the static ignore list.
+    ignorePatterns(project) {
+      return project?.componentFile ? [project.componentFile] : [];
+    },
+
+    artifacts({ project }) {
+      if (!project) return [];
+      return [
+        {
+          kind: 'created',
+          path: project.componentFile,
+          marker: 'impeccable-live-tanstack',
+          pruneTo: 'src',
+        },
+        {
+          kind: 'patched',
+          path: project.rootRoute,
+          patch: 'tanstack-root',
+          markers: [TANSTACK_MARKER_OPEN],
+        },
+      ];
+    },
+
+    unpatch: {
+      'tanstack-root': unpatchTanStackRoot,
+    },
+  },
+
+  source: {
+    extensions: ['.tsx', '.jsx'],
+    preview: 'source',
+    styleMode: 'scoped',
+    commentSyntax: 'jsx',
+  },
+};

package/skills/impeccable/scripts/live/frameworks/vite-generic.mjs

@@ -0,0 +1,42 @@
+/**
+ * Generic Vite registry entry: a bundled app with a real `index.html` entry
+ * and no framework-specific document ownership. React, Vue, Solid, Preact and
+ * a plain TanStack Router SPA all land here — the marker-wrapped script block
+ * goes straight into the HTML entry.
+ *
+ * This is the entry that catches everything with a bundler config; only
+ * static-html sits below it.
+ */
+
+import { fileExists, findConfigFile, hasAnyDependency } from './detect-utils.mjs';
+
+const VITE_CONFIG_RE = /^vite\.config\.(?:js|mjs|cjs|ts|mts|cts)$/;
+
+export function detectViteProject(cwd = process.cwd()) {
+  const configFile = findConfigFile(cwd, VITE_CONFIG_RE);
+  if (configFile) return { configFile, via: 'config' };
+  if (hasAnyDependency(cwd, ['vite'])) return { configFile: null, via: 'package' };
+  // A zero-config Vite app is index.html + package.json, the same pair
+  // roots.mjs treats as an app root.
+  if (fileExists(cwd, 'index.html') && fileExists(cwd, 'package.json')) {
+    return { configFile: null, via: 'zero-config' };
+  }
+  return null;
+}
+
+export const viteGeneric = {
+  name: 'vite-generic',
+
+  detect(cwd) {
+    return detectViteProject(cwd);
+  },
+
+  inject: { kind: 'tag' },
+
+  source: {
+    extensions: ['.tsx', '.jsx'],
+    preview: 'source',
+    styleMode: 'scoped',
+    commentSyntax: 'jsx',
+  },
+};

package/skills/impeccable/scripts/live/generation-preflight.mjs

@@ -0,0 +1,149 @@
+import { execFile } from 'node:child_process';
+import path from 'node:path';
+import { promisify } from 'node:util';
+
+const execFileAsync = promisify(execFile);
+const PREFLIGHT_TIMEOUT_MS = 15_000;
+
+// Per-target cache of the resolved source file. The wrap search walks the whole
+// project tree and was measured at ~7.6s on a large repo; it re-ran on every
+// generate for the same picked element (re-rolls, param passes). Keyed by the
+// target signature (locator + route), so it invalidates automatically when the
+// element or route changes; a failed resolution evicts its entry (see below).
+const sourceResolutionCache = new Map();
+
+/** Test/lifecycle hook: drop all cached source resolutions. */
+export function clearSourceResolutionCache() {
+  sourceResolutionCache.clear();
+}
+
+function targetSignature(event) {
+  const isInsert = event.mode === 'insert';
+  const target = isInsert ? insertTarget(event) : replaceTarget(event);
+  return JSON.stringify({
+    mode: isInsert ? 'insert' : 'replace',
+    position: isInsert ? target.position : null,
+    elementId: target.elementId || null,
+    classes: target.classes || null,
+    tag: target.tag || null,
+    pageUrl: event.pageUrl || null,
+  });
+}
+
+export function buildGenerationPreflight(event, scriptsDir, { cache = null } = {}) {
+  if (!event || event.type !== 'generate' || !event.id) return null;
+
+  const isInsert = event.mode === 'insert';
+  const target = isInsert ? insertTarget(event) : replaceTarget(event);
+  if (!target.elementId && !target.classes) return null;
+
+  const script = path.join(scriptsDir, isInsert ? 'live-insert.mjs' : 'live-wrap.mjs');
+  const args = [script, '--id', event.id, '--count', String(event.count || 3)];
+  // Compute the scaffold but do not write it into source for source-preview
+  // targets. The agent writes wrapper + variants atomically; a premature
+  // server-side write reloads the framework and strands the browser at 0/N.
+  // No-op on the svelte-component path, which never writes the route source.
+  args.push('--defer-source-write');
+  if (isInsert) args.push('--position', target.position);
+  if (target.elementId) args.push('--element-id', target.elementId);
+  if (target.classes) args.push('--classes', target.classes);
+  if (target.tag) args.push('--tag', target.tag);
+  if (target.text) args.push('--text', target.text);
+  if (!isInsert && event.pageUrl) args.push('--page-url', event.pageUrl);
+  const signature = targetSignature(event);
+  // A cached resolution points the helper straight at the file, skipping the
+  // tree search. The helper still reads current content, so line ranges stay
+  // fresh; only discovery is cached.
+  const cachedFile = cache ? cache.get(signature) : null;
+  if (cachedFile) args.push('--file', cachedFile);
+  return { script, args, mode: isInsert ? 'insert' : 'replace', signature };
+}
+
+/**
+ * Scaffold the source for a generate event before handing it to an agent.
+ *
+ * Async on purpose. This spawns `live-wrap.mjs`, which walks the project's
+ * source tree and can take seconds (measured at ~7.6s on a large repo when the
+ * element is not found, with a 15s ceiling). The live server is single-threaded
+ * and calls this while leasing a poll, so a synchronous spawn froze the whole
+ * server for that entire window: Accept and Discard POSTs, SSE progress
+ * broadcasts, and every other poll stalled behind it.
+ */
+export async function runGenerationPreflight(event, {
+  cwd = process.cwd(),
+  scriptsDir,
+  execFileImpl = execFileAsync,
+  timeoutMs = PREFLIGHT_TIMEOUT_MS,
+  cache = sourceResolutionCache,
+} = {}) {
+  const command = buildGenerationPreflight(event, scriptsDir, { cache });
+  if (!command) {
+    return { ok: false, skipped: true, reason: 'insufficient_locator' };
+  }
+
+  const startedAt = performance.now();
+  try {
+    const { stdout } = await execFileImpl(process.execPath, command.args, {
+      cwd,
+      encoding: 'utf-8',
+      timeout: timeoutMs,
+    });
+    const line = String(stdout).trim().split('\n').filter(Boolean).pop();
+    if (!line) throw new Error('preflight returned no scaffold metadata');
+    const scaffold = JSON.parse(line);
+    // Cache the resolved SOURCE file (route source, not the svelte manifest) so
+    // the next generate on this target skips the tree search.
+    const resolvedSource = scaffold.sourceFile || scaffold.file;
+    if (cache && command.signature && typeof resolvedSource === 'string') {
+      cache.set(command.signature, resolvedSource);
+    }
+    return {
+      ok: true,
+      mode: command.mode,
+      durationMs: performance.now() - startedAt,
+      scaffold,
+    };
+  } catch (error) {
+    // Evict a stale/failed resolution so the next attempt does a full search
+    // (the element may have moved out of the previously cached file).
+    if (cache && command.signature) cache.delete(command.signature);
+    return {
+      ok: false,
+      mode: command.mode,
+      durationMs: performance.now() - startedAt,
+      error: compactError(error),
+    };
+  }
+}
+
+function replaceTarget(event) {
+  return normalizeTarget(event.element || {});
+}
+
+function insertTarget(event) {
+  return {
+    ...normalizeTarget(event.insert?.anchor || {}),
+    position: event.insert?.position === 'before' ? 'before' : 'after',
+  };
+}
+
+function normalizeTarget(target) {
+  const classes = Array.isArray(target.classes)
+    ? target.classes.join(' ')
+    : String(target.classes || '').trim();
+  const text = typeof target.textContent === 'string'
+    ? target.textContent.trim().slice(0, 80)
+    : '';
+  return {
+    elementId: target.id || target.elementId || undefined,
+    classes: classes || undefined,
+    tag: target.tagName || target.tag || undefined,
+    text: text || undefined,
+  };
+}
+
+function compactError(error) {
+  const stderr = error?.stderr ? String(error.stderr).trim() : '';
+  const message = stderr.split('\n').filter(Boolean).pop() || error?.message || 'preflight failed';
+  return String(message).slice(0, 500);
+}