@hybridlabor-api/aos 4.4.2-beta.7 → 4.4.2-beta.8

package/CLAUDE.md

@@ -616,110 +616,6 @@ must not do.
 
 ## Headless timeouts
 
-A trivial headless `agy` prompt was measured at **605s** in 2026-09.
-`agy-delegate` defaults to `--print-timeout 5m`, so it aborts at 300s and
-reports an empty body while the answer is still arriving. Pass `--timeout 15m`
-for anything non-trivial. A short timeout does not read as "slow", it reads as
-"broken".
-
-# AOS — Antigravity / Gemini
-
-**Read [AGENTS.md](AGENTS.md) first.** It holds every rule that applies to all
-harnesses: the non-negotiables, the release gate, Conventional Commits, the
-skill contract and category routing, the pipeline variants, and the delegation
-policy. Nothing from it is repeated here — a rule that lives in two files is a
-rule that will eventually disagree with itself.
-
-This file covers only what is specific to running AOS under Antigravity.
-
-## Nothing enforces the gate here — you are the enforcement
-
-`.claude/hooks/go-gate.mjs` is a Claude Code hook and does not run on this
-harness. Not one of the four release commands is mechanically blocked for you,
-and neither is anything else.
-
-So the full rule in AGENTS.md applies here in its entirety, not just its
-hook-enforced subset: when the user asks for a plan, review, audit or
-multi-step action, you are read-only until they answer with the literal **GO**
-— including file writes and `git commit`. On Claude Code a hook would catch the
-four worst cases if discipline failed. Here there is no backstop, which makes
-this the harness where the rule matters most, not least.
-
-## Model routing
-
-The tier names in `agy-delegate` map to models that go stale — the built-in
-`flash` still points at Gemini 3.7 while 3.8 ships. Re-check against
-`agy models` after every upgrade; the id carries both the version and the
-effort suffix.
-
-| Work | Model |
-|---|---|
-| Media, fast or mechanical coding, boilerplate | `Gemini 3.8 Flash (Medium)` |
-| Trivial one-liners | `Gemini 3.8 Flash (Low)` |
-| Review, architecture, hard reasoning | `Claude Sonnet 4.6 (Thinking)` |
-
-Set these once via `CLAUDE_PLUGIN_OPTION_TIER_{FLASH,FLASH_LO,PRO}` in
-`~/.zshenv` — **not** `~/.zshrc`, which non-interactive tool shells never
-source.
-
-Adversarial review is the case that most repays the stronger model: a Flash
-tier tends to agree with what it is shown, which is the one thing a reviewer
-must not do.
-
-## Headless timeouts
-
-A trivial headless `agy` prompt was measured at **605s** in 2026-09.
-`agy-delegate` defaults to `--print-timeout 5m`, so it aborts at 300s and
-reports an empty body while the answer is still arriving. Pass `--timeout 15m`
-for anything non-trivial. A short timeout does not read as "slow", it reads as
-"broken".
-
-# AOS — Antigravity / Gemini
-
-**Read [AGENTS.md](AGENTS.md) first.** It holds every rule that applies to all
-harnesses: the non-negotiables, the release gate, Conventional Commits, the
-skill contract and category routing, the pipeline variants, and the delegation
-policy. Nothing from it is repeated here — a rule that lives in two files is a
-rule that will eventually disagree with itself.
-
-This file covers only what is specific to running AOS under Antigravity.
-
-## Nothing enforces the gate here — you are the enforcement
-
-`.claude/hooks/go-gate.mjs` is a Claude Code hook and does not run on this
-harness. Not one of the four release commands is mechanically blocked for you,
-and neither is anything else.
-
-So the full rule in AGENTS.md applies here in its entirety, not just its
-hook-enforced subset: when the user asks for a plan, review, audit or
-multi-step action, you are read-only until they answer with the literal **GO**
-— including file writes and `git commit`. On Claude Code a hook would catch the
-four worst cases if discipline failed. Here there is no backstop, which makes
-this the harness where the rule matters most, not least.
-
-## Model routing
-
-The tier names in `agy-delegate` map to models that go stale — the built-in
-`flash` still points at Gemini 3.7 while 3.8 ships. Re-check against
-`agy models` after every upgrade; the id carries both the version and the
-effort suffix.
-
-| Work | Model |
-|---|---|
-| Media, fast or mechanical coding, boilerplate | `Gemini 3.8 Flash (Medium)` |
-| Trivial one-liners | `Gemini 3.8 Flash (Low)` |
-| Review, architecture, hard reasoning | `Claude Sonnet 4.6 (Thinking)` |
-
-Set these once via `CLAUDE_PLUGIN_OPTION_TIER_{FLASH,FLASH_LO,PRO}` in
-`~/.zshenv` — **not** `~/.zshrc`, which non-interactive tool shells never
-source.
-
-Adversarial review is the case that most repays the stronger model: a Flash
-tier tends to agree with what it is shown, which is the one thing a reviewer
-must not do.
-
-## Headless timeouts
-
 A trivial headless `agy` prompt was measured at **605s** in 2026-09.
 `agy-delegate` defaults to `--print-timeout 5m`, so it aborts at 300s and
 reports an empty body while the answer is still arriving. Pass `--timeout 15m`

package/lib/internal-addon-oauth.js

@@ -0,0 +1,276 @@
+const fs = require('fs');
+const path = require('path');
+const os = require('os');
+const https = require('https');
+const crypto = require('crypto');
+const { execSync, spawn } = require('child_process');
+
+const ISSUER = 'https://auth.awsbdb.rcentry.pro';
+const TARBALL_URL = 'https://internal.awsbdb.rcentry.pro/aos-internal/aos-internal.tgz';
+const CLIENT_ID = 'aos-installer';
+const CONFIG_DIR = path.join(os.homedir(), '.agents');
+const TOKEN_FILE = path.join(CONFIG_DIR, 'aos-internal.oauth.json');
+
+function httpsGet(url) {
+  return new Promise((resolve, reject) => {
+    https.get(url, { timeout: 10000 }, (res) => {
+      let data = '';
+      res.on('data', chunk => data += chunk);
+      res.on('end', () => {
+        try {
+          resolve(JSON.parse(data));
+        } catch (e) {
+          reject(new Error(`Failed to parse response: ${e.message}`));
+        }
+      });
+    }).on('error', reject).on('timeout', function() {
+      this.destroy();
+      reject(new Error('Request timeout'));
+    });
+  });
+}
+
+function httpsPost(url, body) {
+  return new Promise((resolve, reject) => {
+    const bodyStr = JSON.stringify(body);
+    const req = https.request(url, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded',
+        'Content-Length': Buffer.byteLength(bodyStr)
+      },
+      timeout: 10000
+    }, (res) => {
+      let data = '';
+      res.on('data', chunk => data += chunk);
+      res.on('end', () => {
+        try {
+          resolve({ status: res.statusCode, body: JSON.parse(data) });
+        } catch (e) {
+          reject(new Error(`Failed to parse response: ${e.message}`));
+        }
+      });
+    });
+    req.on('error', reject);
+    req.on('timeout', function() {
+      this.destroy();
+      reject(new Error('Request timeout'));
+    });
+
+    const params = new URLSearchParams(body);
+    req.write(params.toString());
+    req.end();
+  });
+}
+
+function httpsGetBinary(url, headers) {
+  return new Promise((resolve, reject) => {
+    const req = https.get(url, { headers, timeout: 30000 }, (res) => {
+      if (res.statusCode !== 200) {
+        reject(new Error(`HTTP ${res.statusCode}`));
+        return;
+      }
+      const chunks = [];
+      res.on('data', chunk => chunks.push(chunk));
+      res.on('end', () => resolve(Buffer.concat(chunks)));
+    });
+    req.on('error', reject);
+    req.on('timeout', function() {
+      this.destroy();
+      reject(new Error('Request timeout'));
+    });
+  });
+}
+
+function generatePKCE() {
+  const codeVerifier = crypto.randomBytes(32).toString('base64url');
+  const codeChallenge = crypto.createHash('sha256')
+    .update(codeVerifier)
+    .digest('base64url');
+  return { codeVerifier, codeChallenge };
+}
+
+function tryOpenBrowser(verificationUri) {
+  const cmd = process.platform === 'darwin' ? 'open' :
+              process.platform === 'win32' ? 'start' : 'xdg-open';
+  try {
+    if (process.platform === 'win32') {
+      execSync(`start ${verificationUri}`, { stdio: 'ignore', shell: true });
+    } else {
+      execSync(`${cmd} "${verificationUri}"`, { stdio: 'ignore' });
+    }
+  } catch (e) {
+    // Browser open failed, but that's OK -- user can type the code manually
+  }
+}
+
+function loadStoredToken() {
+  try {
+    if (!fs.existsSync(TOKEN_FILE)) return null;
+    const data = JSON.parse(fs.readFileSync(TOKEN_FILE, 'utf8'));
+    return data.refresh_token || null;
+  } catch (e) {
+    return null;
+  }
+}
+
+function saveToken(refreshToken) {
+  try {
+    fs.mkdirSync(CONFIG_DIR, { recursive: true });
+    fs.writeFileSync(TOKEN_FILE, JSON.stringify({ refresh_token: refreshToken }, null, 2), 'utf8');
+    fs.chmodSync(TOKEN_FILE, 0o600);
+  } catch (e) {
+    // If we can't save the token, continue anyway - the user will just re-auth next time
+  }
+}
+
+async function refreshAccessToken(refreshToken, discoveryResp) {
+  try {
+    const { codeVerifier } = generatePKCE();
+    const resp = await httpsPost(discoveryResp.token_endpoint, {
+      grant_type: 'refresh_token',
+      refresh_token: refreshToken,
+      client_id: CLIENT_ID,
+      code_verifier: codeVerifier
+    });
+    if (resp.body.access_token) {
+      if (resp.body.refresh_token) {
+        saveToken(resp.body.refresh_token);
+      }
+      return resp.body.access_token;
+    }
+    return null;
+  } catch (e) {
+    return null;
+  }
+}
+
+async function pollForToken(discoveryResp, deviceCode, codeVerifier, interval, expiresIn) {
+  const deadline = Date.now() + (expiresIn * 1000);
+  let currentInterval = interval;
+
+  while (Date.now() < deadline) {
+    await new Promise(r => setTimeout(r, currentInterval * 1000));
+
+    try {
+      const resp = await httpsPost(discoveryResp.token_endpoint, {
+        grant_type: 'urn:ietf:params:oauth:grant-type:device_code',
+        device_code: deviceCode,
+        client_id: CLIENT_ID,
+        code_verifier: codeVerifier
+      });
+
+      const err = resp.body.error;
+      if (err === 'authorization_pending') {
+        continue;
+      } else if (err === 'slow_down') {
+        currentInterval += 5;
+        continue;
+      } else if (err === 'expired_token' || err === 'access_denied') {
+        return null;
+      } else if (resp.body.access_token) {
+        if (resp.body.refresh_token) {
+          saveToken(resp.body.refresh_token);
+        }
+        return resp.body.access_token;
+      }
+    } catch (e) {
+      // Network error, keep polling
+      continue;
+    }
+  }
+  return null;
+}
+
+async function tryFetchInternalAddon(log) {
+  try {
+    const discovery = await httpsGet(`${ISSUER}/.well-known/openid-configuration`);
+
+    if (!discovery.device_authorization_endpoint) {
+      log.warn('Internal add-on package not available — device_authorization_endpoint missing.');
+      return true;
+    }
+
+    const scopes = discovery.scopes_supported || [];
+    if (!scopes.includes('authelia.bearer.authz')) {
+      log.warn('Internal add-on package not available — authelia.bearer.authz scope not supported.');
+      return true;
+    }
+
+    let accessToken = null;
+
+    const storedRefresh = loadStoredToken();
+    if (storedRefresh) {
+      accessToken = await refreshAccessToken(storedRefresh, discovery);
+    }
+
+    if (!accessToken) {
+      const { codeVerifier, codeChallenge } = generatePKCE();
+
+      const deviceResp = await httpsPost(discovery.device_authorization_endpoint, {
+        client_id: CLIENT_ID,
+        scope: 'openid groups offline_access authelia.bearer.authz',
+        code_challenge: codeChallenge,
+        code_challenge_method: 'S256'
+      });
+
+      const deviceCode = deviceResp.body.device_code;
+      const userCode = deviceResp.body.user_code;
+      const verificationUri = deviceResp.body.verification_uri ||
+                             deviceResp.body.verification_uri_complete;
+      const pollInterval = deviceResp.body.interval || 5;
+      const expiresIn = deviceResp.body.expires_in || 1800;
+
+      if (!deviceCode || !userCode || !verificationUri) {
+        log.warn('Internal add-on package not available — device flow not available.');
+        return true;
+      }
+
+      log.message('');
+      log.message('  To authorize the internal add-on package:');
+      log.message(`    Code: ${userCode}`);
+      log.message(`    URL:  ${verificationUri}`);
+      log.message('');
+
+      tryOpenBrowser(verificationUri);
+
+      accessToken = await pollForToken(discovery, deviceCode, codeVerifier, pollInterval, expiresIn);
+      if (!accessToken) {
+        log.warn('Internal add-on package not available — authorization timeout.');
+        return true;
+      }
+    }
+
+    const tarballData = await httpsGetBinary(TARBALL_URL, {
+      'Authorization': `Bearer ${accessToken}`
+    });
+
+    const tempDir = path.join(CONFIG_DIR, '.tmp');
+    fs.mkdirSync(tempDir, { recursive: true });
+    const tempTarball = path.join(tempDir, 'aos-internal.tgz');
+    fs.writeFileSync(tempTarball, tarballData);
+
+    try {
+      const installDir = path.join(CONFIG_DIR, 'aos-internal');
+      fs.mkdirSync(installDir, { recursive: true });
+      execSync(`npm install "${tempTarball}"`, {
+        cwd: installDir,
+        stdio: 'pipe',
+        maxBuffer: 16 * 1024 * 1024
+      });
+      log.step('Internal add-on package installed');
+      return true;
+    } catch (e) {
+      log.warn('Internal add-on package not available — npm install failed.');
+      return true;
+    } finally {
+      try { fs.unlinkSync(tempTarball); } catch (e) {}
+      try { fs.rmdirSync(tempDir); } catch (e) {}
+    }
+  } catch (e) {
+    log.warn('Internal add-on package not available — continuing without it.');
+    return true;
+  }
+}
+
+module.exports = { tryFetchInternalAddon };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hybridlabor-api/aos",
-  "version": "4.4.2-beta.7",
+  "version": "4.4.2-beta.8",
   "description": "AOS — A Curated AI AGENT OS. Optimized agent skills and add-ons like memB, OpenWiki, Heimdall Token Saver, and Godmode architectures.",
   "main": "installer.js",
   "engines": {

package/skills/global_config/live-preview-canvas/SKILL.md

@@ -0,0 +1,19 @@
+---
+name: live-preview-canvas
+description: A prototyping skill that generates a local HTML mock with a built-in feedback layer, allowing users to drop visual comments (red dots) for UI fixes.
+category: design-ui-ux
+---
+# live-preview-canvas
+
+**live-preview-canvas** is an AOS (BDB Agent OS) skill designed to bridge the gap between design and implementation feedback. It combines rapid local prototyping with direct visual feedback.
+
+## Workflow
+
+1. **Generate Prototype**: The agent uses the `base_template.html` to generate a local HTML mock of a UI component or page.
+2. **Review & Comment**: The user opens the HTML file in their browser. They can click anywhere on the UI to leave a visual comment (represented by a red dot) and enter text detailing what needs to be fixed or changed.
+3. **Export Feedback**: The user clicks the "Export Feedback" button to generate a JSON payload of all comments, including coordinates and text.
+4. **Agent Action**: The agent reads the exported feedback (either pasted back by the user or saved to a file) and correlates the visual comments with the UI structure to apply precise fixes.
+
+## Usage
+
+When a user requests a UI prototype or a visual iteration, copy the contents of `scripts/base_template.html` and inject your HTML/CSS/JS for the prototype into the designated areas. Instruct the user to open the file, click to leave feedback, and share the exported JSON back for the next iteration.

package/skills/global_config/live-preview-canvas/examples/preview_interactive_dashboard.html

@@ -0,0 +1,406 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Live Preview: Multi-Agent Show Control Dashboard</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script>
+    tailwind.config = {
+      darkMode: 'class',
+      theme: {
+        extend: {
+          colors: {
+            brand: {
+              400: '#818cf8',
+              500: '#6366f1',
+              600: '#4f46e5'
+            }
+          }
+        }
+      }
+    };
+  </script>
+  <style>
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+      background: #090d16;
+      color: #f1f5f9;
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+    }
+    .custom-scrollbar::-webkit-scrollbar {
+      width: 6px;
+      height: 6px;
+    }
+    .custom-scrollbar::-webkit-scrollbar-track {
+      background: #0f172a;
+    }
+    .custom-scrollbar::-webkit-scrollbar-thumb {
+      background: #334155;
+      border-radius: 3px;
+    }
+  </style>
+</head>
+<body class="bg-slate-950 text-slate-100 antialiased pb-28">
+
+  <!-- =========================================================================
+       Navigation & Review Bar
+       ========================================================================= -->
+  <header id="show-control-header" data-component="header" class="border-b border-slate-800 bg-slate-900/90 backdrop-blur sticky top-0 z-40 px-6 py-3 flex items-center justify-between">
+    <div class="flex items-center space-x-3">
+      <div class="h-9 w-9 rounded-lg bg-gradient-to-tr from-indigo-600 to-violet-500 flex items-center justify-center font-bold text-white shadow-lg shadow-indigo-500/20">
+        ⚡
+      </div>
+      <div>
+        <div class="flex items-center space-x-2">
+          <h1 id="app-title" class="text-sm font-semibold text-white tracking-wide">BDB Agent OS &bull; Live Show Controller</h1>
+          <span class="text-[10px] uppercase font-mono px-2 py-0.5 rounded bg-indigo-950 text-indigo-300 border border-indigo-800/60">Live Mock</span>
+        </div>
+        <p id="app-subtitle" class="text-xs text-slate-400">Interactive Preview for Layout Review & Element Red-Pinning</p>
+      </div>
+    </div>
+
+    <!-- Live Status & In-Memory Trigger -->
+    <div id="header-actions" class="flex items-center space-x-3">
+      <div id="heartbeat-pill" class="flex items-center space-x-1.5 px-3 py-1 rounded-full text-xs font-mono bg-emerald-950 text-emerald-300 border border-emerald-800">
+        <span class="h-2 w-2 rounded-full bg-emerald-400 animate-ping"></span>
+        <span>ONLINE &bull; 60 FPS</span>
+      </div>
+      <button id="btn-emergency-blackout" onclick="triggerPanic()" class="text-xs font-semibold bg-rose-600/20 hover:bg-rose-600 text-rose-300 hover:text-white px-3 py-1.5 rounded-lg border border-rose-700/50 transition">
+        Blackout
+      </button>
+    </div>
+  </header>
+
+  <!-- =========================================================================
+       Main Workspace
+       ========================================================================= -->
+  <main class="flex-1 max-w-6xl w-full mx-auto px-6 py-6 space-y-6">
+
+    <!-- Reviewer Context Alert -->
+    <section id="review-banner" data-component="review-banner" class="p-4 rounded-xl bg-indigo-950/40 border border-indigo-800/50 flex items-center justify-between">
+      <div class="flex items-start space-x-3">
+        <div class="text-indigo-400 text-lg">💡</div>
+        <div>
+          <p class="text-xs font-medium text-indigo-200">
+            <strong>Designer / Reviewer Notice:</strong> You can click any card, button, or label to pin an annotation. Use the floating bar below to toggle between Layouts and the Panic state.
+          </p>
+        </div>
+      </div>
+      <span class="text-xs font-mono text-indigo-300 bg-indigo-900/60 px-2.5 py-1 rounded border border-indigo-700/50">
+        Auto-Reloads on Save
+      </span>
+    </section>
+
+    <!-- Top KPI Grid -->
+    <section id="kpi-grid" data-component="kpi-grid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+      <div id="kpi-touchdesigner" class="p-4 rounded-xl bg-slate-900 border border-slate-800 hover:border-slate-700 transition">
+        <div class="flex justify-between items-start">
+          <span class="text-xs text-slate-400 uppercase font-medium">TouchDesigner</span>
+          <span class="text-[10px] font-mono text-emerald-400 bg-emerald-950 px-1.5 py-0.5 rounded border border-emerald-800">OK</span>
+        </div>
+        <div class="mt-2 text-2xl font-bold text-white">4.1ms</div>
+        <p class="text-xs text-slate-500 mt-1">GPU Cook Cost (RTX 4090)</p>
+      </div>
+
+      <div id="kpi-grandma" class="p-4 rounded-xl bg-slate-900 border border-slate-800 hover:border-slate-700 transition">
+        <div class="flex justify-between items-start">
+          <span class="text-xs text-slate-400 uppercase font-medium">grandMA3 Session</span>
+          <span class="text-[10px] font-mono text-emerald-400 bg-emerald-950 px-1.5 py-0.5 rounded border border-emerald-800">LOCKED</span>
+        </div>
+        <div class="mt-2 text-2xl font-bold text-white">Uni 1-8</div>
+        <p class="text-xs text-slate-500 mt-1">DMX over sACN / ArtNet</p>
+      </div>
+
+      <div id="kpi-resolume" class="p-4 rounded-xl bg-slate-900 border border-slate-800 hover:border-slate-700 transition">
+        <div class="flex justify-between items-start">
+          <span class="text-xs text-slate-400 uppercase font-medium">Resolume Arena</span>
+          <span class="text-[10px] font-mono text-amber-400 bg-amber-950 px-1.5 py-0.5 rounded border border-amber-800">STANDBY</span>
+        </div>
+        <div class="mt-2 text-2xl font-bold text-white">Deck 02</div>
+        <p class="text-xs text-slate-500 mt-1">Layer 3: Generative Pass</p>
+      </div>
+
+      <div id="kpi-agents" class="p-4 rounded-xl bg-slate-900 border border-slate-800 hover:border-slate-700 transition">
+        <div class="flex justify-between items-start">
+          <span class="text-xs text-slate-400 uppercase font-medium">Pipeline Cues</span>
+          <span class="text-[10px] font-mono text-indigo-400 bg-indigo-950 px-1.5 py-0.5 rounded border border-indigo-800">AUTO</span>
+        </div>
+        <div class="mt-2 text-2xl font-bold text-white" id="cue-counter">Cue 14/40</div>
+        <p class="text-xs text-slate-500 mt-1">Next: Intro Drop Strobes</p>
+      </div>
+    </section>
+
+    <!-- VARIANT A: Full Orchestration Board (Default) -->
+    <div id="view-variant-a" class="preview-variant space-y-6">
+      <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+
+        <!-- Left 2 Cols: Active Cue Stack & Audio Spectrum Mock -->
+        <div class="lg:col-span-2 space-y-6">
+          <section id="cue-stack-section" data-component="cue-stack" class="p-5 rounded-xl bg-slate-900 border border-slate-800">
+            <div class="flex items-center justify-between mb-4">
+              <h2 class="text-sm font-semibold text-white">Live Cue Sequencer</h2>
+              <div class="flex space-x-2">
+                <button onclick="advanceCue()" class="text-xs bg-indigo-600 hover:bg-indigo-500 text-white font-medium px-3 py-1 rounded-lg transition shadow-sm">
+                  ▶ Go Next Cue
+                </button>
+                <button onclick="resetCues()" class="text-xs bg-slate-800 hover:bg-slate-700 text-slate-300 px-2.5 py-1 rounded-lg border border-slate-700 transition">
+                  Restart
+                </button>
+              </div>
+            </div>
+
+            <div id="cue-list" class="space-y-2 font-mono text-xs">
+              <div id="cue-item-12" class="p-3 rounded-lg bg-slate-950/60 border border-slate-800/80 flex items-center justify-between text-slate-400">
+                <div class="flex items-center space-x-3">
+                  <span class="text-slate-500 font-bold">#12</span>
+                  <span class="text-slate-300">Ambient Drone - Blue Wash</span>
+                </div>
+                <span class="text-[10px] text-slate-500">COMPLETE</span>
+              </div>
+
+              <div id="cue-item-13" class="p-3 rounded-lg bg-slate-950/60 border border-slate-800/80 flex items-center justify-between text-slate-400">
+                <div class="flex items-center space-x-3">
+                  <span class="text-slate-500 font-bold">#13</span>
+                  <span class="text-slate-300">Beat Drop Transition - Strobe Pulse</span>
+                </div>
+                <span class="text-[10px] text-slate-500">COMPLETE</span>
+              </div>
+
+              <div id="cue-item-14" class="p-3 rounded-lg bg-indigo-950/40 border border-indigo-500/50 flex items-center justify-between text-white shadow-sm">
+                <div class="flex items-center space-x-3">
+                  <span class="text-indigo-400 font-bold">#14</span>
+                  <span class="font-medium text-indigo-100">Main Drop: Audio-Reactive Feedback Tunnel</span>
+                </div>
+                <span class="text-[10px] bg-indigo-600 text-white px-2 py-0.5 rounded font-sans uppercase tracking-wider font-semibold">RUNNING</span>
+              </div>
+
+              <div id="cue-item-15" class="p-3 rounded-lg bg-slate-950/40 border border-slate-800/50 flex items-center justify-between text-slate-400">
+                <div class="flex items-center space-x-3">
+                  <span class="text-slate-500 font-bold">#15</span>
+                  <span>Post-Chorus: Particle Dissolve</span>
+                </div>
+                <span class="text-[10px] text-slate-500">STANDBY</span>
+              </div>
+            </div>
+          </section>
+
+          <!-- Interactive Mock Control Sliders -->
+          <section id="reactive-controls" data-component="reactive-controls" class="p-5 rounded-xl bg-slate-900 border border-slate-800">
+            <h3 class="text-sm font-semibold text-white mb-4">Real-Time Parameter Modulation</h3>
+            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+              <div>
+                <div class="flex justify-between text-xs text-slate-300 mb-1">
+                  <span>Feedback Gain</span>
+                  <span id="label-gain" class="font-mono text-indigo-400">0.82</span>
+                </div>
+                <input type="range" min="0" max="1" step="0.01" value="0.82" oninput="updateSlider('gain', this.value)" class="w-full accent-indigo-500 cursor-pointer">
+              </div>
+
+              <div>
+                <div class="flex justify-between text-xs text-slate-300 mb-1">
+                  <span>FFT Bass Dampening</span>
+                  <span id="label-bass" class="font-mono text-indigo-400">0.45</span>
+                </div>
+                <input type="range" min="0" max="1" step="0.01" value="0.45" oninput="updateSlider('bass', this.value)" class="w-full accent-indigo-500 cursor-pointer">
+              </div>
+            </div>
+          </section>
+        </div>
+
+        <!-- Right 1 Col: Live Event Log -->
+        <div class="space-y-6">
+          <section id="log-feed-section" data-component="log-feed" class="p-5 rounded-xl bg-slate-900 border border-slate-800 flex flex-col h-[460px]">
+            <div class="flex items-center justify-between mb-3">
+              <h3 class="text-sm font-semibold text-white">Event Dispatcher Log</h3>
+              <button onclick="clearLogs()" class="text-[11px] text-slate-400 hover:text-slate-200">Clear</button>
+            </div>
+            <div id="log-feed" class="flex-1 overflow-y-auto font-mono text-[11px] space-y-2 custom-scrollbar pr-1">
+              <div class="text-slate-500"><span class="text-slate-600">[03:32:01]</span> OSC /cue/14 fired to port 8000</div>
+              <div class="text-emerald-400"><span class="text-slate-600">[03:32:02]</span> TD TOP cook ok (4.1ms)</div>
+              <div class="text-indigo-300"><span class="text-slate-600">[03:32:04]</span> grandMA3 Macro 21 active</div>
+              <div class="text-slate-400"><span class="text-slate-600">[03:32:05]</span> MIDI beat sync: 128.0 BPM</div>
+            </div>
+          </section>
+        </div>
+
+      </div>
+    </div>
+
+    <!-- VARIANT B: Compact Data Sheet (Table View) -->
+    <div id="view-variant-b" class="preview-variant hidden space-y-4">
+      <section id="table-section" data-component="compact-table" class="rounded-xl bg-slate-900 border border-slate-800 overflow-hidden">
+        <table class="w-full text-left text-xs text-slate-300">
+          <thead class="bg-slate-950 text-slate-400 uppercase font-mono text-[10px] border-b border-slate-800">
+            <tr>
+              <th class="px-4 py-3">Fixture / Node</th>
+              <th class="px-4 py-3">Protocol</th>
+              <th class="px-4 py-3">Address</th>
+              <th class="px-4 py-3">FPS / Rate</th>
+              <th class="px-4 py-3 text-right">Status</th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-slate-800 font-mono">
+            <tr class="hover:bg-slate-800/40">
+              <td class="px-4 py-3 font-semibold text-white font-sans">Beam 350 Array</td>
+              <td class="px-4 py-3">sACN E1.31</td>
+              <td class="px-4 py-3">10.0.1.50:5568</td>
+              <td class="px-4 py-3">44 Hz</td>
+              <td class="px-4 py-3 text-right text-emerald-400">SYNCED</td>
+            </tr>
+            <tr class="hover:bg-slate-800/40">
+              <td class="px-4 py-3 font-semibold text-white font-sans">Laser Pangolin FB4</td>
+              <td class="px-4 py-3">ILDA / IP</td>
+              <td class="px-4 py-3">10.0.2.10:1200</td>
+              <td class="px-4 py-3">30 kpps</td>
+              <td class="px-4 py-3 text-right text-emerald-400">ARMED</td>
+            </tr>
+            <tr class="hover:bg-slate-800/40">
+              <td class="px-4 py-3 font-semibold text-white font-sans">Resolume Arena Deck</td>
+              <td class="px-4 py-3">OSC + Syphon</td>
+              <td class="px-4 py-3">127.0.0.1:7000</td>
+              <td class="px-4 py-3">60 FPS</td>
+              <td class="px-4 py-3 text-right text-indigo-400">ACTIVE</td>
+            </tr>
+          </tbody>
+        </table>
+      </section>
+    </div>
+
+    <!-- VARIANT C: Panic / Blackout / Disconnected View -->
+    <div id="view-variant-c" class="preview-variant hidden">
+      <section id="panic-section" data-component="panic-view" class="p-8 rounded-xl bg-slate-900 border-2 border-rose-600/60 text-center space-y-4">
+        <div class="inline-flex h-14 w-14 rounded-full bg-rose-950 text-rose-400 items-center justify-center text-2xl font-bold border border-rose-800">
+          🛑
+        </div>
+        <h2 class="text-lg font-bold text-white">Emergency Blackout Triggered</h2>
+        <p class="text-xs text-slate-400 max-w-md mx-auto">
+          All sACN universes clamped to 0. TouchDesigner master OP bypassed. Resolume output blackout layer 1 active.
+        </p>
+        <div class="pt-2 flex justify-center space-x-3">
+          <button onclick="switchVariant('A')" class="bg-indigo-600 hover:bg-indigo-500 text-white text-xs font-semibold px-4 py-2 rounded-lg transition shadow-md shadow-indigo-600/20">
+            Resume Normal Flow (Variant A)
+          </button>
+        </div>
+      </section>
+    </div>
+
+  </main>
+
+  <!-- =========================================================================
+       Floating Variant Switcher Bar
+       ========================================================================= -->
+  <footer id="prototype-switcher-bar" data-component="switcher-bar" class="fixed bottom-4 left-1/2 -translate-x-1/2 z-50 bg-slate-900/90 backdrop-blur-md border border-slate-700/80 shadow-2xl rounded-full px-3 py-2 flex items-center space-x-2">
+    <button onclick="cycleVariant(-1)" aria-label="Previous Variant" class="p-1.5 text-slate-400 hover:text-white hover:bg-slate-800 rounded-full transition">
+      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
+    </button>
+
+    <div class="flex items-center space-x-1">
+      <button onclick="switchVariant('A')" id="tab-btn-A" class="switcher-pill px-3 py-1 rounded-full text-xs font-medium transition bg-indigo-600 text-white shadow-sm">
+        Variant A (Control Board)
+      </button>
+      <button onclick="switchVariant('B')" id="tab-btn-B" class="switcher-pill px-3 py-1 rounded-full text-xs font-medium transition text-slate-400 hover:text-slate-200">
+        Variant B (Table Matrix)
+      </button>
+      <button onclick="switchVariant('C')" id="tab-btn-C" class="switcher-pill px-3 py-1 rounded-full text-xs font-medium transition text-slate-400 hover:text-slate-200">
+        Variant C (Panic State)
+      </button>
+    </div>
+
+    <button onclick="cycleVariant(1)" aria-label="Next Variant" class="p-1.5 text-slate-400 hover:text-white hover:bg-slate-800 rounded-full transition">
+      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
+    </button>
+  </footer>
+
+  <!-- =========================================================================
+       Interactive State Script
+       ========================================================================= -->
+  <script>
+    const VARIANTS = ['A', 'B', 'C'];
+    let currentVariantIndex = 0;
+    let cueNum = 14;
+
+    function getVariantFromUrl() {
+      const params = new URLSearchParams(window.location.search);
+      const v = params.get('variant');
+      return (v && VARIANTS.includes(v.toUpperCase())) ? v.toUpperCase() : 'A';
+    }
+
+    function switchVariant(variantKey) {
+      const normalized = variantKey.toUpperCase();
+      currentVariantIndex = VARIANTS.indexOf(normalized);
+      if (currentVariantIndex === -1) currentVariantIndex = 0;
+
+      document.querySelectorAll('.preview-variant').forEach(el => el.classList.add('hidden'));
+      const activeEl = document.getElementById(`view-variant-${normalized.toLowerCase()}`);
+      if (activeEl) activeEl.classList.remove('hidden');
+
+      document.querySelectorAll('.switcher-pill').forEach(pill => {
+        pill.classList.remove('bg-indigo-600', 'text-white', 'shadow-sm');
+        pill.classList.add('text-slate-400');
+      });
+      const activePill = document.getElementById(`tab-btn-${normalized}`);
+      if (activePill) {
+        activePill.classList.add('bg-indigo-600', 'text-white', 'shadow-sm');
+        activePill.classList.remove('text-slate-400');
+      }
+
+      const url = new URL(window.location);
+      url.searchParams.set('variant', normalized);
+      window.history.replaceState({}, '', url);
+    }
+
+    function cycleVariant(delta) {
+      currentVariantIndex = (currentVariantIndex + delta + VARIANTS.length) % VARIANTS.length;
+      switchVariant(VARIANTS[currentVariantIndex]);
+    }
+
+    function advanceCue() {
+      cueNum++;
+      document.getElementById('cue-counter').textContent = `Cue ${cueNum}/40`;
+      addLog(`Dispatched Cue #${cueNum} over OSC`);
+    }
+
+    function resetCues() {
+      cueNum = 14;
+      document.getElementById('cue-counter').textContent = `Cue ${cueNum}/40`;
+      addLog(`Reset cue counter to Cue #14`);
+    }
+
+    function updateSlider(key, val) {
+      document.getElementById(`label-${key}`).textContent = val;
+    }
+
+    function addLog(msg) {
+      const feed = document.getElementById('log-feed');
+      const time = new Date().toLocaleTimeString();
+      const div = document.createElement('div');
+      div.className = 'text-indigo-300';
+      div.innerHTML = `<span class="text-slate-600">[${time}]</span> ${msg}`;
+      feed.prepend(div);
+    }
+
+    function clearLogs() {
+      document.getElementById('log-feed').innerHTML = '<div class="text-slate-500 font-mono text-[11px]">Logs cleared.</div>';
+    }
+
+    function triggerPanic() {
+      switchVariant('C');
+      addLog('⚠️ BLACKOUT TRIGGERED');
+    }
+
+    window.addEventListener('keydown', (e) => {
+      const tag = document.activeElement ? document.activeElement.tagName.toLowerCase() : '';
+      if (tag === 'input' || tag === 'textarea' || tag === 'select') return;
+      if (e.key === 'ArrowRight') cycleVariant(1);
+      if (e.key === 'ArrowLeft') cycleVariant(-1);
+    });
+
+    window.addEventListener('DOMContentLoaded', () => {
+      switchVariant(getVariantFromUrl());
+    });
+  </script>
+</body>
+</html>

package/skills/global_config/live-preview-canvas/resources/template.html

@@ -0,0 +1,291 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Live Preview Canvas — Interactive Mockup Template</title>
+  <!-- Tailwind CSS via CDN for rapid, consistent styling -->
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script>
+    tailwind.config = {
+      darkMode: 'class',
+      theme: {
+        extend: {
+          colors: {
+            brand: {
+              50: '#f5f7ff',
+              500: '#4f46e5',
+              600: '#4338ca',
+              700: '#3730a3'
+            }
+          }
+        }
+      }
+    };
+  </script>
+  <style>
+    /* Baseline styles & reset */
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+      margin: 0;
+      padding: 0;
+      background-color: #0b0f19;
+      color: #e2e8f0;
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+    }
+    /* Stable highlighting for Plan Canvas element selection */
+    [data-preview-anchor]:hover {
+      outline: 2px dashed rgba(99, 102, 241, 0.4);
+      outline-offset: 2px;
+    }
+  </style>
+</head>
+<body class="bg-slate-950 text-slate-100 antialiased selection:bg-indigo-500 selection:text-white pb-24">
+
+  <!-- =========================================================================
+       1. Top Header Bar
+       Semantic IDs and data-component attributes enable crystal-clear annotations
+       ========================================================================= -->
+  <header id="preview-header" data-component="header" class="border-b border-slate-800 bg-slate-900/80 backdrop-blur sticky top-0 z-40 px-6 py-4 flex items-center justify-between">
+    <div class="flex items-center space-x-3">
+      <div class="h-8 w-8 rounded-lg bg-indigo-600 flex items-center justify-center font-bold text-white shadow-lg shadow-indigo-500/30">
+        P
+      </div>
+      <div>
+        <h1 class="text-base font-semibold text-white leading-tight">Feature Preview: <span id="feature-title" class="text-indigo-400">Component Mockup</span></h1>
+        <p class="text-xs text-slate-400">Interactive live prototype for visual review & red-pinning</p>
+      </div>
+    </div>
+
+    <!-- State Indicator / Action pill -->
+    <div class="flex items-center space-x-3">
+      <span id="active-state-badge" class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-emerald-950 text-emerald-300 border border-emerald-800">
+        <span class="w-1.5 h-1.5 mr-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
+        Interactive (In-Memory)
+      </span>
+      <button id="btn-reset-mock" onclick="resetMockState()" class="text-xs bg-slate-800 hover:bg-slate-700 text-slate-300 px-3 py-1.5 rounded border border-slate-700 transition">
+        Reset State
+      </button>
+    </div>
+  </header>
+
+  <!-- =========================================================================
+       2. Main Canvas Content Area
+       ========================================================================= -->
+  <main class="flex-1 max-w-5xl w-full mx-auto px-6 py-8">
+
+    <!-- Information banner for reviewers -->
+    <section id="review-banner" data-component="instruction-banner" class="mb-6 p-4 rounded-xl bg-slate-900 border border-slate-800 flex items-start justify-between">
+      <div>
+        <h2 class="text-sm font-semibold text-slate-200">Visual Audit Mode Active</h2>
+        <p class="text-xs text-slate-400 mt-1 leading-relaxed">
+          Click any element to add a pinned comment, or use the bottom switcher to evaluate different layout variants and error states.
+        </p>
+      </div>
+      <div class="text-right text-xs text-slate-500 font-mono">
+        Hotkeys: <kbd class="px-1.5 py-0.5 bg-slate-800 rounded border border-slate-700 text-slate-300">←</kbd> <kbd class="px-1.5 py-0.5 bg-slate-800 rounded border border-slate-700 text-slate-300">→</kbd> to cycle
+      </div>
+    </section>
+
+    <!-- VARIANT A: Standard View -->
+    <div id="view-variant-a" class="preview-variant space-y-6">
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <!-- Card 1 -->
+        <article id="card-stats-1" data-component="stat-card" class="p-5 rounded-xl bg-slate-900 border border-slate-800 shadow-sm hover:border-slate-700 transition">
+          <div class="text-xs font-medium text-slate-400 uppercase tracking-wider">Metric Alpha</div>
+          <div class="text-2xl font-bold text-white mt-2">1,482</div>
+          <div class="mt-2 text-xs text-emerald-400 flex items-center font-medium">
+            <span>↑ +12.4%</span>
+            <span class="text-slate-500 ml-1.5">vs last week</span>
+          </div>
+        </article>
+
+        <!-- Card 2 -->
+        <article id="card-stats-2" data-component="stat-card" class="p-5 rounded-xl bg-slate-900 border border-slate-800 shadow-sm hover:border-slate-700 transition">
+          <div class="text-xs font-medium text-slate-400 uppercase tracking-wider">Latency / Cook Cost</div>
+          <div class="text-2xl font-bold text-white mt-2">4.2 ms</div>
+          <div class="mt-2 text-xs text-indigo-400 flex items-center font-medium">
+            <span>Optimal 60 FPS</span>
+          </div>
+        </article>
+
+        <!-- Card 3 -->
+        <article id="card-stats-3" data-component="stat-card" class="p-5 rounded-xl bg-slate-900 border border-slate-800 shadow-sm hover:border-slate-700 transition">
+          <div class="text-xs font-medium text-slate-400 uppercase tracking-wider">Active Handlers</div>
+          <div class="text-2xl font-bold text-white mt-2" id="counter-value">9</div>
+          <div class="mt-2 flex space-x-2">
+            <button onclick="adjustCounter(1)" class="text-xs bg-indigo-600/30 hover:bg-indigo-600 text-indigo-200 px-2.5 py-1 rounded transition">+ Increment</button>
+            <button onclick="adjustCounter(-1)" class="text-xs bg-slate-800 hover:bg-slate-700 text-slate-300 px-2.5 py-1 rounded transition">- Decrement</button>
+          </div>
+        </article>
+      </div>
+
+      <!-- Action Panel / Primary Form -->
+      <section id="main-panel" data-component="action-panel" class="p-6 rounded-xl bg-slate-900 border border-slate-800">
+        <h3 class="text-base font-semibold text-white mb-4">Interactive Controls & Configuration</h3>
+        <div class="space-y-4">
+          <div>
+            <label for="input-channel" class="block text-xs font-medium text-slate-300 mb-1.5">Channel Name</label>
+            <input type="text" id="input-channel" value="live-preview/stream-01" class="w-full bg-slate-950 border border-slate-700 rounded-lg px-3.5 py-2 text-sm text-slate-100 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition">
+          </div>
+          <div class="flex items-center space-x-4">
+            <button id="btn-primary-action" onclick="simulateAction()" class="bg-indigo-600 hover:bg-indigo-500 text-white text-sm font-medium px-4 py-2 rounded-lg shadow-md shadow-indigo-600/20 transition flex items-center space-x-2">
+              <span>Execute Action</span>
+            </button>
+            <span id="action-status" class="text-xs text-slate-400">Ready</span>
+          </div>
+        </div>
+      </section>
+    </div>
+
+    <!-- VARIANT B: Alternative Layout (Dense List) -->
+    <div id="view-variant-b" class="preview-variant hidden space-y-4">
+      <div id="dense-list-container" data-component="dense-list" class="rounded-xl bg-slate-900 border border-slate-800 divide-y divide-slate-800">
+        <div class="p-4 flex items-center justify-between">
+          <div>
+            <span class="text-sm font-medium text-white">Item #1: Audio Reactive Engine</span>
+            <p class="text-xs text-slate-400">FFT Peak extraction on CHOP chain 4</p>
+          </div>
+          <span class="text-xs bg-emerald-950 text-emerald-400 px-2 py-0.5 rounded border border-emerald-800">Active</span>
+        </div>
+        <div class="p-4 flex items-center justify-between">
+          <div>
+            <span class="text-sm font-medium text-white">Item #2: DMX Fixture Router</span>
+            <p class="text-xs text-slate-400">Universe 1-4 mapped to ArtNet node</p>
+          </div>
+          <span class="text-xs bg-slate-800 text-slate-400 px-2 py-0.5 rounded">Standby</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- VARIANT C: Error / Edge-Case State -->
+    <div id="view-variant-c" class="preview-variant hidden">
+      <div id="error-boundary-mock" data-component="error-state" class="text-center py-12 px-6 rounded-xl bg-slate-900 border border-rose-900/40">
+        <div class="inline-flex h-12 w-12 rounded-full bg-rose-950/80 text-rose-400 items-center justify-center mb-3 border border-rose-800/60">
+          ⚠️
+        </div>
+        <h3 class="text-base font-semibold text-white">Connection Stream Interrupted</h3>
+        <p class="text-xs text-slate-400 max-w-sm mx-auto mt-1.5 mb-6">
+          The upstream WebRTC signal timed out after 3000ms. Check loopback connection or proxy gateway.
+        </p>
+        <button onclick="switchVariant('A')" class="bg-rose-600 hover:bg-rose-500 text-white text-xs font-semibold px-4 py-2 rounded-lg transition shadow-md shadow-rose-600/20">
+          Retry & Return to Variant A
+        </button>
+      </div>
+    </div>
+
+  </main>
+
+  <!-- =========================================================================
+       3. Floating Prototype Switcher Bar (Prototype Skill UI.md convention)
+       Allows immediate flipping between variants and states
+       ========================================================================= -->
+  <footer id="prototype-switcher-bar" data-component="switcher-bar" class="fixed bottom-4 left-1/2 -translate-x-1/2 z-50 bg-slate-900/90 backdrop-blur-md border border-slate-700/80 shadow-2xl rounded-full px-3 py-2 flex items-center space-x-2">
+    <button onclick="cycleVariant(-1)" aria-label="Previous Variant" class="p-1.5 text-slate-400 hover:text-white hover:bg-slate-800 rounded-full transition">
+      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
+    </button>
+
+    <div class="flex items-center space-x-1">
+      <button onclick="switchVariant('A')" id="tab-btn-A" class="switcher-pill px-3 py-1 rounded-full text-xs font-medium transition bg-indigo-600 text-white shadow-sm">
+        Variant A (Grid)
+      </button>
+      <button onclick="switchVariant('B')" id="tab-btn-B" class="switcher-pill px-3 py-1 rounded-full text-xs font-medium transition text-slate-400 hover:text-slate-200">
+        Variant B (List)
+      </button>
+      <button onclick="switchVariant('C')" id="tab-btn-C" class="switcher-pill px-3 py-1 rounded-full text-xs font-medium transition text-slate-400 hover:text-slate-200">
+        Variant C (Error)
+      </button>
+    </div>
+
+    <button onclick="cycleVariant(1)" aria-label="Next Variant" class="p-1.5 text-slate-400 hover:text-white hover:bg-slate-800 rounded-full transition">
+      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
+    </button>
+  </footer>
+
+  <!-- =========================================================================
+       4. In-Memory Mock Interaction Logic
+       ========================================================================= -->
+  <script>
+    const VARIANTS = ['A', 'B', 'C'];
+    let currentVariantIndex = 0;
+    let counter = 9;
+
+    function getVariantFromUrl() {
+      const params = new URLSearchParams(window.location.search);
+      const v = params.get('variant');
+      return (v && VARIANTS.includes(v.toUpperCase())) ? v.toUpperCase() : 'A';
+    }
+
+    function switchVariant(variantKey) {
+      const normalized = variantKey.toUpperCase();
+      currentVariantIndex = VARIANTS.indexOf(normalized);
+      if (currentVariantIndex === -1) currentVariantIndex = 0;
+
+      // Update visibility
+      document.querySelectorAll('.preview-variant').forEach(el => el.classList.add('hidden'));
+      const activeEl = document.getElementById(`view-variant-${normalized.toLowerCase()}`);
+      if (activeEl) activeEl.classList.remove('hidden');
+
+      // Update pills
+      document.querySelectorAll('.switcher-pill').forEach(pill => {
+        pill.classList.remove('bg-indigo-600', 'text-white', 'shadow-sm');
+        pill.classList.add('text-slate-400');
+      });
+      const activePill = document.getElementById(`tab-btn-${normalized}`);
+      if (activePill) {
+        activePill.classList.add('bg-indigo-600', 'text-white', 'shadow-sm');
+        activePill.classList.remove('text-slate-400');
+      }
+
+      // Sync URL search param cleanly without reloading
+      const url = new URL(window.location);
+      url.searchParams.set('variant', normalized);
+      window.history.replaceState({}, '', url);
+    }
+
+    function cycleVariant(delta) {
+      currentVariantIndex = (currentVariantIndex + delta + VARIANTS.length) % VARIANTS.length;
+      switchVariant(VARIANTS[currentVariantIndex]);
+    }
+
+    function adjustCounter(delta) {
+      counter += delta;
+      document.getElementById('counter-value').textContent = counter;
+    }
+
+    function simulateAction() {
+      const statusEl = document.getElementById('action-status');
+      statusEl.textContent = 'Processing in memory...';
+      statusEl.className = 'text-xs text-amber-400 animate-pulse';
+      setTimeout(() => {
+        statusEl.textContent = 'Action executed successfully!';
+        statusEl.className = 'text-xs text-emerald-400 font-medium';
+      }, 400);
+    }
+
+    function resetMockState() {
+      counter = 9;
+      document.getElementById('counter-value').textContent = counter;
+      const statusEl = document.getElementById('action-status');
+      statusEl.textContent = 'Ready';
+      statusEl.className = 'text-xs text-slate-400';
+      switchVariant('A');
+    }
+
+    // Keyboard navigation (Arrow keys cycle variants when not typing in inputs)
+    window.addEventListener('keydown', (e) => {
+      const tag = document.activeElement ? document.activeElement.tagName.toLowerCase() : '';
+      if (tag === 'input' || tag === 'textarea' || tag === 'select') return;
+      if (e.key === 'ArrowRight') cycleVariant(1);
+      if (e.key === 'ArrowLeft') cycleVariant(-1);
+    });
+
+    // Initialize variant on page load
+    window.addEventListener('DOMContentLoaded', () => {
+      switchVariant(getVariantFromUrl());
+    });
+  </script>
+</body>
+</html>

package/skills/global_config/live-preview-canvas/scripts/base_template.html

@@ -0,0 +1,178 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Live Preview Canvas</title>
+    <style>
+        /* Inject Prototype CSS Here */
+        body {
+            font-family: system-ui, -apple-system, sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: #f9fafb;
+        }
+
+        .prototype-container {
+            /* Put your prototype content here */
+            min-height: 100vh;
+            padding: 2rem;
+        }
+
+        /* --- Feedback Layer Styles --- */
+        #feedback-layer {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100vw;
+            height: 100vh;
+            pointer-events: none;
+            z-index: 9998;
+        }
+
+        .feedback-dot {
+            position: absolute;
+            width: 16px;
+            height: 16px;
+            background-color: #ef4444;
+            border: 2px solid white;
+            border-radius: 50%;
+            transform: translate(-50%, -50%);
+            cursor: pointer;
+            pointer-events: auto;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+        }
+
+        .feedback-dot:hover::after {
+            content: attr(data-comment);
+            position: absolute;
+            top: 100%;
+            left: 50%;
+            transform: translateX(-50%);
+            background: white;
+            padding: 8px;
+            border-radius: 4px;
+            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+            white-space: nowrap;
+            color: black;
+            font-size: 12px;
+            z-index: 9999;
+            margin-top: 4px;
+        }
+
+        #feedback-controls {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            background: white;
+            padding: 16px;
+            border-radius: 8px;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+            z-index: 9999;
+            pointer-events: auto;
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+            border: 1px solid #e5e7eb;
+        }
+
+        #feedback-controls button {
+            padding: 8px 16px;
+            background: #3b82f6;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-weight: 500;
+        }
+
+        #feedback-controls button:hover {
+            background: #2563eb;
+        }
+
+        #feedback-output {
+            display: none;
+            width: 300px;
+            height: 150px;
+            font-family: monospace;
+            font-size: 12px;
+            resize: none;
+            padding: 8px;
+            border: 1px solid #d1d5db;
+            border-radius: 4px;
+        }
+    </style>
+</head>
+<body>
+
+    <!-- Inject Prototype HTML Here -->
+    <div class="prototype-container">
+        <h1>Prototype Area</h1>
+        <p>Click anywhere to leave a comment.</p>
+    </div>
+
+    <!-- Feedback Layer -->
+    <div id="feedback-layer"></div>
+    <div id="feedback-controls">
+        <button id="export-btn">Export Feedback</button>
+        <textarea id="feedback-output" readonly placeholder="Exported JSON will appear here..."></textarea>
+    </div>
+
+    <script>
+        const comments = [];
+        const layer = document.getElementById('feedback-layer');
+        const exportBtn = document.getElementById('export-btn');
+        const output = document.getElementById('feedback-output');
+        const controls = document.getElementById('feedback-controls');
+
+        // Handle clicks on the document to add feedback
+        document.addEventListener('click', (e) => {
+            // Ignore clicks inside the feedback controls or on existing dots
+            if (controls.contains(e.target) || e.target.classList.contains('feedback-dot')) {
+                return;
+            }
+
+            const text = prompt('Enter your feedback for this element:');
+            if (!text) return;
+
+            const x = e.clientX;
+            const y = e.clientY;
+
+            // Save to state
+            const comment = { id: Date.now(), x, y, text };
+            comments.push(comment);
+
+            // Draw dot
+            const dot = document.createElement('div');
+            dot.className = 'feedback-dot';
+            dot.style.left = `${x}px`;
+            dot.style.top = `${y}px`;
+            dot.setAttribute('data-comment', text);
+            
+            // Allow deleting comment on right click
+            dot.addEventListener('contextmenu', (evt) => {
+                evt.preventDefault();
+                if(confirm('Delete this comment?')) {
+                    const idx = comments.findIndex(c => c.id === comment.id);
+                    if(idx > -1) comments.splice(idx, 1);
+                    dot.remove();
+                }
+            });
+
+            layer.appendChild(dot);
+        });
+
+        // Export functionality
+        exportBtn.addEventListener('click', () => {
+            output.style.display = 'block';
+            output.value = JSON.stringify(comments, null, 2);
+            output.select();
+            document.execCommand('copy');
+            exportBtn.textContent = 'Copied to Clipboard!';
+            setTimeout(() => {
+                exportBtn.textContent = 'Export Feedback';
+            }, 2000);
+        });
+    </script>
+</body>
+</html>