@veolab/discoverylab 1.3.1 → 1.3.3

package/dist/cli.js

@@ -1,10 +1,10 @@
 #!/usr/bin/env node
-import {
-  APP_VERSION
-} from "./chunk-6EGBXRDK.js";
 import {
   buildAppLabNetworkProfile
 } from "./chunk-LB3RNE3O.js";
+import {
+  APP_VERSION
+} from "./chunk-6EGBXRDK.js";
 import "./chunk-MLKGABMK.js";
 
 // src/cli.ts
@@ -57,7 +57,7 @@ async function withESVPCli(action) {
   }
 }
 async function getESVPBaseResult(serverUrl) {
-  const { getESVPConnection } = await import("./esvp-GSISVXLC.js");
+  const { getESVPConnection } = await import("./esvp-KVOWYW6G.js");
   const connection = await getESVPConnection(serverUrl);
   return {
     serverUrl: connection.serverUrl,
@@ -72,7 +72,7 @@ function executorToPlatform(executor) {
 var esvp = program.command("esvp").description("Access the public ESVP protocol and runtime from the CLI");
 esvp.command("status").description("Check the configured ESVP server health").option("-s, --server <url>", "ESVP base URL").action(async (options) => {
   await withESVPCli(async () => {
-    const { getESVPHealth } = await import("./esvp-GSISVXLC.js");
+    const { getESVPHealth } = await import("./esvp-KVOWYW6G.js");
     return {
       ...await getESVPBaseResult(options.server),
       health: await getESVPHealth(options.server)
@@ -81,7 +81,7 @@ esvp.command("status").description("Check the configured ESVP server health").op
 });
 esvp.command("devices").description("List ESVP-visible devices").option("-s, --server <url>", "ESVP base URL").option("-p, --platform <platform>", "adb | ios-sim | maestro-ios | all", "all").action(async (options) => {
   await withESVPCli(async () => {
-    const { listESVPDevices } = await import("./esvp-GSISVXLC.js");
+    const { listESVPDevices } = await import("./esvp-KVOWYW6G.js");
     return {
       ...await getESVPBaseResult(options.server),
       devices: await listESVPDevices(options.platform, options.server)
@@ -90,7 +90,7 @@ esvp.command("devices").description("List ESVP-visible devices").option("-s, --s
 });
 esvp.command("sessions").description("List public ESVP sessions").option("-s, --server <url>", "ESVP base URL").action(async (options) => {
   await withESVPCli(async () => {
-    const { listESVPSessions } = await import("./esvp-GSISVXLC.js");
+    const { listESVPSessions } = await import("./esvp-KVOWYW6G.js");
     return {
       ...await getESVPBaseResult(options.server),
       ...await listESVPSessions(options.server)
@@ -99,7 +99,7 @@ esvp.command("sessions").description("List public ESVP sessions").option("-s, --
 });
 esvp.command("create").description("Create a new ESVP session").requiredOption("-e, --executor <executor>", "fake | adb | ios-sim | maestro-ios").option("-s, --server <url>", "ESVP base URL").option("-d, --device-id <id>", "Device or simulator ID").option("--meta-json <json>", "Session metadata as JSON").option("--meta-file <path>", "Path to session metadata JSON").option("--crash-clip-json <json>", "Crash clip config as JSON").option("--crash-clip-file <path>", "Path to crash clip config JSON").option("--with-network", "Auto-configure the default App Lab external-proxy profile after creating the session").action(async (options) => {
   await withESVPCli(async () => {
-    const { createESVPSession, configureESVPNetwork } = await import("./esvp-GSISVXLC.js");
+    const { createESVPSession, configureESVPNetwork } = await import("./esvp-KVOWYW6G.js");
     const meta = await readJsonSource(options.metaJson, options.metaFile, "meta");
     const crashClip = await readJsonSource(options.crashClipJson, options.crashClipFile, "crash clip");
     const createResult = await createESVPSession(
@@ -142,7 +142,7 @@ esvp.command("create").description("Create a new ESVP session").requiredOption("
 });
 esvp.command("get <sessionId>").description("Get a public ESVP session summary").option("-s, --server <url>", "ESVP base URL").action(async (sessionId, options) => {
   await withESVPCli(async () => {
-    const { getESVPSession } = await import("./esvp-GSISVXLC.js");
+    const { getESVPSession } = await import("./esvp-KVOWYW6G.js");
     return {
       ...await getESVPBaseResult(options.server),
       ...await getESVPSession(sessionId, options.server)
@@ -151,7 +151,7 @@ esvp.command("get <sessionId>").description("Get a public ESVP session summary")
 });
 esvp.command("inspect <sessionId>").description("Inspect a session and optionally load transcript and artifacts").option("-s, --server <url>", "ESVP base URL").option("--transcript", "Include transcript").option("--artifacts", "Include artifacts").action(async (sessionId, options) => {
   await withESVPCli(async () => {
-    const { inspectESVPSession } = await import("./esvp-GSISVXLC.js");
+    const { inspectESVPSession } = await import("./esvp-KVOWYW6G.js");
     return {
       ...await getESVPBaseResult(options.server),
       ...await inspectESVPSession(
@@ -167,7 +167,7 @@ esvp.command("inspect <sessionId>").description("Inspect a session and optionall
 });
 esvp.command("transcript <sessionId>").description("Fetch the canonical session transcript").option("-s, --server <url>", "ESVP base URL").action(async (sessionId, options) => {
   await withESVPCli(async () => {
-    const { getESVPTranscript } = await import("./esvp-GSISVXLC.js");
+    const { getESVPTranscript } = await import("./esvp-KVOWYW6G.js");
     return {
       ...await getESVPBaseResult(options.server),
       sessionId,
@@ -177,7 +177,7 @@ esvp.command("transcript <sessionId>").description("Fetch the canonical session
 });
 esvp.command("artifacts <sessionId>").description("List session artifacts").option("-s, --server <url>", "ESVP base URL").action(async (sessionId, options) => {
   await withESVPCli(async () => {
-    const { listESVPArtifacts } = await import("./esvp-GSISVXLC.js");
+    const { listESVPArtifacts } = await import("./esvp-KVOWYW6G.js");
     return {
       ...await getESVPBaseResult(options.server),
       sessionId,
@@ -187,13 +187,13 @@ esvp.command("artifacts <sessionId>").description("List session artifacts").opti
 });
 esvp.command("artifact <sessionId> <artifactPath>").description("Read a public artifact payload").option("-s, --server <url>", "ESVP base URL").action(async (sessionId, artifactPath, options) => {
   await withESVPCli(async () => {
-    const { getESVPArtifactContent } = await import("./esvp-GSISVXLC.js");
+    const { getESVPArtifactContent } = await import("./esvp-KVOWYW6G.js");
     return await getESVPArtifactContent(sessionId, artifactPath, options.server);
   });
 });
 esvp.command("actions <sessionId>").description("Run public ESVP actions inside a session").option("-s, --server <url>", "ESVP base URL").option("--actions-json <json>", "JSON array of ESVP actions").option("--actions-file <path>", "Path to a JSON file with ESVP actions").option("--finish", "Finish the session after actions").option("--capture-logcat", "Capture logcat on finish when supported").option("--checkpoint-after-each", "Set checkpointAfter on every action").option("--with-network", "Auto-configure the default App Lab external-proxy profile before running actions if not already configured").action(async (sessionId, options) => {
   await withESVPCli(async () => {
-    const { runESVPActions, getESVPSessionNetwork, configureESVPNetwork } = await import("./esvp-GSISVXLC.js");
+    const { runESVPActions, getESVPSessionNetwork, configureESVPNetwork } = await import("./esvp-KVOWYW6G.js");
     const actions = await readJsonSource(options.actionsJson, options.actionsFile, "actions");
     if (!Array.isArray(actions) || actions.length === 0) {
       failCli("Provide --actions-json or --actions-file with a non-empty array of ESVP actions.");
@@ -239,7 +239,7 @@ esvp.command("actions <sessionId>").description("Run public ESVP actions inside
 });
 esvp.command("checkpoint <sessionId>").description("Capture an ESVP checkpoint").option("-s, --server <url>", "ESVP base URL").option("-l, --label <label>", "Checkpoint label").action(async (sessionId, options) => {
   await withESVPCli(async () => {
-    const { captureESVPCheckpoint } = await import("./esvp-GSISVXLC.js");
+    const { captureESVPCheckpoint } = await import("./esvp-KVOWYW6G.js");
     return {
       ...await getESVPBaseResult(options.server),
       ...await captureESVPCheckpoint(
@@ -254,7 +254,7 @@ esvp.command("checkpoint <sessionId>").description("Capture an ESVP checkpoint")
 });
 esvp.command("finish <sessionId>").description("Finish an ESVP session").option("-s, --server <url>", "ESVP base URL").option("--capture-logcat", "Capture logcat on finish when supported").action(async (sessionId, options) => {
   await withESVPCli(async () => {
-    const { finishESVPSession } = await import("./esvp-GSISVXLC.js");
+    const { finishESVPSession } = await import("./esvp-KVOWYW6G.js");
     return {
       ...await getESVPBaseResult(options.server),
       ...await finishESVPSession(
@@ -269,7 +269,7 @@ esvp.command("finish <sessionId>").description("Finish an ESVP session").option(
 });
 esvp.command("preflight <sessionId>").description("Run preflight/bootstrap rules on an ESVP session").option("-s, --server <url>", "ESVP base URL").option("--policy <policy>", "Preflight policy name (e.g. fresh_install)").option("--app-id <appId>", "Target app ID").option("--json <json>", "Preflight config as JSON string").option("--file <path>", "Path to preflight config JSON file").action(async (sessionId, options) => {
   await withESVPCli(async () => {
-    const { runESVPPreflight } = await import("./esvp-GSISVXLC.js");
+    const { runESVPPreflight } = await import("./esvp-KVOWYW6G.js");
     const fromSource = await readJsonSource(options.json, options.file, "preflight config");
     const config = {
       ...typeof fromSource === "object" && fromSource ? fromSource : {},
@@ -284,7 +284,7 @@ esvp.command("preflight <sessionId>").description("Run preflight/bootstrap rules
 });
 esvp.command("replay-run <sessionId>").description("Replay a session to a new ESVP session").option("-s, --server <url>", "ESVP base URL").option("-e, --executor <executor>", "fake | adb | ios-sim | maestro-ios").option("-d, --device-id <id>", "Replay target device ID").option("--capture-logcat", "Capture logcat on finish when supported").option("--meta-json <json>", "Replay metadata as JSON").option("--meta-file <path>", "Path to replay metadata JSON").action(async (sessionId, options) => {
   await withESVPCli(async () => {
-    const { replayESVPSession, getESVPReplayConsistency } = await import("./esvp-GSISVXLC.js");
+    const { replayESVPSession, getESVPReplayConsistency } = await import("./esvp-KVOWYW6G.js");
     const meta = await readJsonSource(options.metaJson, options.metaFile, "replay meta");
     const replay = await replayESVPSession(
       sessionId,
@@ -307,7 +307,7 @@ esvp.command("replay-run <sessionId>").description("Replay a session to a new ES
 });
 esvp.command("replay-validate <sessionId>").description("Validate whether a session supports public replay").option("-s, --server <url>", "ESVP base URL").action(async (sessionId, options) => {
   await withESVPCli(async () => {
-    const { validateESVPReplay } = await import("./esvp-GSISVXLC.js");
+    const { validateESVPReplay } = await import("./esvp-KVOWYW6G.js");
     return {
       ...await getESVPBaseResult(options.server),
       ...await validateESVPReplay(sessionId, options.server)
@@ -316,7 +316,7 @@ esvp.command("replay-validate <sessionId>").description("Validate whether a sess
 });
 esvp.command("replay-consistency <sessionId>").description("Inspect replay consistency for a replay session").option("-s, --server <url>", "ESVP base URL").action(async (sessionId, options) => {
   await withESVPCli(async () => {
-    const { getESVPReplayConsistency } = await import("./esvp-GSISVXLC.js");
+    const { getESVPReplayConsistency } = await import("./esvp-KVOWYW6G.js");
     return {
       ...await getESVPBaseResult(options.server),
       ...await getESVPReplayConsistency(sessionId, options.server)
@@ -325,7 +325,7 @@ esvp.command("replay-consistency <sessionId>").description("Inspect replay consi
 });
 esvp.command("network <sessionId>").description("Read the public network state for a session").option("-s, --server <url>", "ESVP base URL").action(async (sessionId, options) => {
   await withESVPCli(async () => {
-    const { getESVPSessionNetwork } = await import("./esvp-GSISVXLC.js");
+    const { getESVPSessionNetwork } = await import("./esvp-KVOWYW6G.js");
     return {
       ...await getESVPBaseResult(options.server),
       ...await getESVPSessionNetwork(sessionId, options.server)
@@ -334,7 +334,7 @@ esvp.command("network <sessionId>").description("Read the public network state f
 });
 esvp.command("network-configure <sessionId>").description("Apply a public ESVP network profile").option("-s, --server <url>", "ESVP base URL").option("--json <json>", "Raw network profile JSON").option("--file <path>", "Path to network profile JSON").option("--profile <name>", "Profile name").option("--label <label>", "Profile label").option("--connectivity <state>", "online | offline | reset").action(async (sessionId, options) => {
   await withESVPCli(async () => {
-    const { configureESVPNetwork } = await import("./esvp-GSISVXLC.js");
+    const { configureESVPNetwork } = await import("./esvp-KVOWYW6G.js");
     const payload = await readJsonSource(options.json, options.file, "network profile") || {};
     const merged = {
       ...typeof payload === "object" && payload ? payload : {},
@@ -350,7 +350,7 @@ esvp.command("network-configure <sessionId>").description("Apply a public ESVP n
 });
 esvp.command("network-clear <sessionId>").description("Clear the active ESVP network profile").option("-s, --server <url>", "ESVP base URL").action(async (sessionId, options) => {
   await withESVPCli(async () => {
-    const { clearESVPNetwork } = await import("./esvp-GSISVXLC.js");
+    const { clearESVPNetwork } = await import("./esvp-KVOWYW6G.js");
     return {
       ...await getESVPBaseResult(options.server),
       ...await clearESVPNetwork(sessionId, options.server)
@@ -359,7 +359,7 @@ esvp.command("network-clear <sessionId>").description("Clear the active ESVP net
 });
 esvp.command("trace-attach <sessionId>").description("Attach a public network trace artifact to a session").requiredOption("--trace-kind <kind>", "Trace kind, e.g. http_trace or har").option("-s, --server <url>", "ESVP base URL").option("--json <json>", "Trace payload JSON").option("--file <path>", "Path to trace payload JSON/text").option("--label <label>", "Trace label").option("--source <source>", "Trace source").option("--request-id <id>", "Correlated request ID").option("--method <method>", "HTTP method").option("--url <url>", "Request URL").option("--status-code <code>", "HTTP status code").option("--format <format>", "Payload format label").action(async (sessionId, options) => {
   await withESVPCli(async () => {
-    const { attachESVPNetworkTrace } = await import("./esvp-GSISVXLC.js");
+    const { attachESVPNetworkTrace } = await import("./esvp-KVOWYW6G.js");
     const payload = await readJsonSource(options.json, options.file, "trace payload");
     if (payload == null) {
       failCli("Provide --json or --file with the trace payload to attach.");
@@ -389,7 +389,7 @@ program.command("serve").alias("server").description("Start the DiscoveryLab web
   console.log(chalk.cyan("\n  DiscoveryLab"));
   console.log(chalk.gray("  AI-powered app testing & evidence generator\n"));
   try {
-    const { startServer } = await import("./server-FO3UVUZU.js");
+    const { startServer } = await import("./server-T5X6GGOO.js");
     await startServer(port);
     console.log(chalk.green(`  Server running at http://localhost:${port}`));
     console.log(chalk.gray("  Press Ctrl+C to stop\n"));
@@ -501,7 +501,7 @@ program.command("mcp").description("Run as MCP server (for Claude Code integrati
       integrationTools,
       taskHubTools,
       esvpTools
-    } = await import("./tools-OCRMOQ4U.js");
+    } = await import("./tools-YGM5HRIB.js");
     mcpServer.registerTools([
       ...uiTools,
       ...projectTools,

package/dist/{esvp-GSISVXLC.js → esvp-KVOWYW6G.js}

@@ -22,7 +22,8 @@ import {
   runESVPActions,
   runESVPPreflight,
   validateESVPReplay
-} from "./chunk-GAKEFJ5T.js";
+} from "./chunk-7EDIUVIO.js";
+import "./chunk-6EGBXRDK.js";
 import "./chunk-VVIOB362.js";
 import "./chunk-MLKGABMK.js";
 export {

package/dist/{esvp-mobile-GC7MAGMI.js → esvp-mobile-GZ5EMYPG.js}

@@ -4,9 +4,10 @@ import {
   diagnoseESVPNetworkState,
   translateMaestroActionsToESVP,
   validateMaestroRecordingWithESVP
-} from "./chunk-N6JJ2RGV.js";
+} from "./chunk-ZLHIHMSL.js";
 import "./chunk-LB3RNE3O.js";
-import "./chunk-GAKEFJ5T.js";
+import "./chunk-7EDIUVIO.js";
+import "./chunk-6EGBXRDK.js";
 import "./chunk-SLNJEF32.js";
 import "./chunk-VVIOB362.js";
 import "./chunk-XFVDP332.js";

package/dist/index.d.ts

@@ -1601,13 +1601,9 @@ interface ESVPResolvedConnection {
 /**
  * ESVP Public Client
  *
- * Thin HTTP adapter for the public ESVP contract.
- * This client intentionally depends only on the open contract and does not
- * embed any private Entropy Lab implementation details.
- *
- * Connection modes:
- * - remote: explicit serverUrl or ESVP_BASE_URL
- * - local: embedded OSS runtime via @entropylab/esvp-local or DISCOVERYLAB_ESVP_LOCAL_MODULE
+ * Thin adapter for the public ESVP contract, backed by the in-process
+ * App Lab local runtime. App Lab no longer routes ESVP traffic to an external
+ * localhost sidecar or remote control-plane.
  */
 
 type ESVPExecutor = 'fake' | 'adb' | 'ios-sim' | 'maestro-ios';
@@ -1664,6 +1660,16 @@ interface ESVPAction {
     checkpointAfter?: boolean;
     checkpointLabel?: string;
 }
+interface ESVPPreflightRule {
+    kind: 'permission' | 'dismiss_dialog' | 'wait_for_stable' | 'clear_data' | 'set_setting';
+    [key: string]: unknown;
+}
+interface ESVPPreflightConfig {
+    policy?: string;
+    appId?: string;
+    rules?: ESVPPreflightRule[];
+    [key: string]: unknown;
+}
 declare function getESVPBaseUrl(serverUrl?: string): string;
 declare function resolveESVPBaseUrl(serverUrl?: string): Promise<string>;
 declare function getESVPConnection(serverUrl?: string): Promise<ESVPResolvedConnection>;
@@ -1682,16 +1688,6 @@ declare function runESVPActions(sessionId: string, input: {
 declare function finishESVPSession(sessionId: string, input?: {
     captureLogcat?: boolean;
 }, serverUrl?: string): Promise<any>;
-interface ESVPPreflightRule {
-    kind: 'permission' | 'dismiss_dialog' | 'wait_for_stable' | 'clear_data' | 'set_setting';
-    [key: string]: unknown;
-}
-interface ESVPPreflightConfig {
-    policy?: string;
-    appId?: string;
-    rules?: ESVPPreflightRule[];
-    [key: string]: unknown;
-}
 declare function runESVPPreflight(sessionId: string, config: ESVPPreflightConfig, serverUrl?: string): Promise<any>;
 declare function inspectESVPSession(sessionId: string, input?: {
     includeTranscript?: boolean;

package/dist/index.html

@@ -5602,6 +5602,12 @@
             width: fit-content;
         }
 
+        .template-restriction-note {
+            margin-bottom: 12px;
+            font-size: 12px;
+            color: var(--text-muted);
+        }
+
         .template-pill {
             position: relative;
             display: inline-flex;
@@ -11616,6 +11622,7 @@
                                 <span class="label">View:</span>
                                 <button class="template-pill active" data-template="raw" onclick="switchTemplate('raw')">Raw</button>
                             </div>
+                            <div class="template-restriction-note" id="templateRestrictionNote" style="display:none;"></div>
 
                             <!-- Raw video (default) -->
                             <div class="video-player-container" id="rawVideoContainer">
@@ -11795,7 +11802,7 @@
         let templateStatus = null;
         let activeTemplate = 'raw';
         let favoriteTemplate = null;
-        let currentTemplateProps = null; // { title, titleLines, terminalTabs, hasNetworkData }
+        let currentTemplateProps = null; // per-project template props + eligibility + mockup options
 
         // Space = play/pause active video
         document.addEventListener('keydown', (e) => {
@@ -11814,6 +11821,7 @@
 
         async function initTemplateUI() {
             try {
+                currentTemplateProps = null;
                 const [statusRes, prefRes] = await Promise.all([
                     fetch('/api/templates/status'),
                     fetch('/api/settings/template-preference'),
@@ -11827,37 +11835,93 @@
                 const bar = document.getElementById('templateToggleBar');
                 if (!bar) return;
 
-                // Build icon buttons for each template
-                const templateIcons = {
-                    raw: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/></svg>',
-                    studio: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>',
-                    showcase: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>',
-                };
-                let pills = '';
-                pills += `<button class="template-pill active" data-template="raw" title="Raw video" tabindex="-1" onclick="switchTemplate('raw')">${templateIcons.raw}</button>`;
+                await loadTemplateProps();
+                renderTemplatePills();
+                applyTemplateAvailabilityState();
+
+                if (favoriteTemplate && currentTemplateProps?.templatesAllowed !== false) {
+                    switchTemplate(favoriteTemplate);
+                }
+            } catch (e) {
+                console.log('[Templates] Init error:', e);
+            }
+        }
+
+        function getTemplateIcons() {
+            return {
+                raw: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/></svg>',
+                studio: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>',
+                showcase: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>',
+            };
+        }
+
+        function renderTemplatePills() {
+            const bar = document.getElementById('templateToggleBar');
+            if (!bar || !templateStatus?.available) return;
+
+            const allowTemplates = currentTemplateProps?.templatesAllowed !== false;
+            const templateIcons = getTemplateIcons();
+            let pills = '';
+            pills += `<span class="label">View:</span>`;
+            pills += `<button class="template-pill ${activeTemplate === 'raw' ? 'active' : ''}" data-template="raw" title="Raw video" tabindex="-1" onclick="switchTemplate('raw')">${templateIcons.raw}</button>`;
+            if (allowTemplates) {
                 for (const t of templateStatus.templates) {
                     const isFav = favoriteTemplate === t.id;
                     const icon = templateIcons[t.id] || templateIcons.studio;
-                    pills += `<button class="template-pill" data-template="${t.id}" title="${t.name}" tabindex="-1" onclick="switchTemplate('${t.id}')" ondblclick="event.stopPropagation(); toggleFavoriteTemplate('${t.id}')">
+                    pills += `<button class="template-pill ${activeTemplate === t.id ? 'active' : ''}" data-template="${t.id}" title="${escapeHtml(t.name)}" tabindex="-1" onclick="switchTemplate('${t.id}')" ondblclick="event.stopPropagation(); toggleFavoriteTemplate('${t.id}')">
                         ${icon}
                         <span class="star-dot ${isFav ? 'visible' : ''}"></span>
                     </button>`;
                 }
-                pills += `<button class="template-pill template-edit-btn" title="Edit template text" tabindex="-1" onclick="openTemplateEditModal()" style="display:none;">
+                pills += `<button class="template-pill template-edit-btn" title="Edit template text" tabindex="-1" onclick="openTemplateEditModal()" style="${activeTemplate === 'raw' ? 'display:none;' : ''}">
                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
                 </button>`;
-                bar.innerHTML = pills;
-                bar.style.display = 'flex';
+            }
+            bar.innerHTML = pills;
+            bar.style.display = 'flex';
+            updateTemplateRestrictionNote();
+        }
 
-                // Load template props for terminal content editor
-                loadTemplateProps();
+        function updateTemplateRestrictionNote() {
+            const note = document.getElementById('templateRestrictionNote');
+            if (!note) return;
+            const blocked = currentTemplateProps?.templatesAllowed === false;
+            if (!blocked) {
+                note.style.display = 'none';
+                note.textContent = '';
+                return;
+            }
+            note.textContent = currentTemplateProps?.templateRestrictionReason
+                || `Templates are limited to videos up to ${currentTemplateProps?.maxTemplateDurationSeconds || 60} seconds.`;
+            note.style.display = '';
+        }
 
-                // Auto-apply favorite template if set
-                if (favoriteTemplate) {
-                    switchTemplate(favoriteTemplate);
-                }
-            } catch (e) {
-                console.log('[Templates] Init error:', e);
+        function setRawTemplateView() {
+            activeTemplate = 'raw';
+            const rawContainer = document.getElementById('rawVideoContainer');
+            const templateContainer = document.getElementById('templatePreviewContainer');
+            const templateVideo = document.getElementById('templateVideo');
+            const downloadBtn = document.getElementById('downloadWithTemplateBtn');
+            const editBtn = document.querySelector('.template-edit-btn');
+            const skeleton = document.getElementById('templateSkeleton');
+
+            if (rawContainer) rawContainer.style.display = '';
+            if (templateContainer) templateContainer.style.display = 'none';
+            if (templateVideo) templateVideo.removeAttribute('src');
+            if (downloadBtn) downloadBtn.style.display = 'none';
+            if (editBtn) editBtn.style.display = 'none';
+            if (skeleton) skeleton.style.display = 'none';
+
+            document.querySelectorAll('.template-pill').forEach(pill => {
+                if (pill.classList.contains('template-edit-btn')) return;
+                pill.classList.toggle('active', pill.dataset.template === 'raw');
+            });
+        }
+
+        function applyTemplateAvailabilityState() {
+            renderTemplatePills();
+            if (currentTemplateProps?.templatesAllowed === false) {
+                setRawTemplateView();
             }
         }
 
@@ -11876,8 +11940,20 @@
                         titleLines: data.props.titleLines || undefined,
                         terminalTabs: data.props.terminalTabs || [],
                         hasNetworkData: data.props.hasNetworkData || false,
+                        platform: data.props.platform || 'web',
                         showcaseMode: data.props.showcaseMode || undefined,
+                        deviceMockup: data.props.deviceMockup || undefined,
+                        availableDeviceMockups: data.androidDeviceMockups || [],
+                        templatesAllowed: data.eligibility?.templatesAllowed !== false,
+                        templateRestrictionReason: data.eligibility?.reason || '',
+                        actualDurationSeconds: data.eligibility?.actualDurationSeconds || data.props.videoDuration || 0,
+                        maxTemplateDurationSeconds: data.eligibility?.maxTemplateDurationSeconds || 60,
                     };
+                    applyTemplateAvailabilityState();
+                } else {
+                    currentTemplateProps = null;
+                    renderTemplatePills();
+                    updateTemplateRestrictionNote();
                 }
             } catch (e) {
                 console.log('[Templates] Props load error:', e);
@@ -11887,6 +11963,11 @@
         async function switchTemplate(templateId) {
             // Skip if already on this template
             if (templateId === activeTemplate) return;
+            if (templateId !== 'raw' && currentTemplateProps?.templatesAllowed === false) {
+                showToast(currentTemplateProps.templateRestrictionReason || 'Templates are disabled for long recordings', 'info');
+                setRawTemplateView();
+                return;
+            }
             activeTemplate = templateId;
             const rawContainer = document.getElementById('rawVideoContainer');
             const templateContainer = document.getElementById('templatePreviewContainer');
@@ -11900,10 +11981,7 @@
             });
 
             if (templateId === 'raw') {
-                if (rawContainer) rawContainer.style.display = '';
-                if (templateContainer) templateContainer.style.display = 'none';
-                if (downloadBtn) downloadBtn.style.display = 'none';
-                if (editBtn) editBtn.style.display = 'none';
+                setRawTemplateView();
                 return;
             }
 
@@ -12008,6 +12086,10 @@
                 showToast('No template data loaded', 'info');
                 return;
             }
+            if (currentTemplateProps.templatesAllowed === false) {
+                showToast(currentTemplateProps.templateRestrictionReason || 'Templates are disabled for this recording', 'info');
+                return;
+            }
             const existing = document.getElementById('templateEditModal');
             if (existing) existing.remove();
 
@@ -12027,7 +12109,9 @@
                     #templateEditModal .te-field-full { grid-column: 1 / -1; }
                     #templateEditModal .te-field label { display: block; font-size: 11px; font-weight: 500; color: var(--text-secondary); margin-bottom: 3px; }
                     #templateEditModal .te-field input[type="text"] { width: 100%; padding: 7px 10px; background: var(--bg-primary); border: 1px solid var(--border); border-radius: 6px; color: var(--text-primary); font-size: 12px; box-sizing: border-box; }
+                    #templateEditModal .te-field select { width: 100%; padding: 7px 10px; background: var(--bg-primary); border: 1px solid var(--border); border-radius: 6px; color: var(--text-primary); font-size: 12px; box-sizing: border-box; }
                     #templateEditModal .te-field input:focus { outline: none; border-color: var(--accent); }
+                    #templateEditModal .te-field select:focus { outline: none; border-color: var(--accent); }
                     #templateEditModal .te-btn-row { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
                     #templateEditModal .te-tab-row { border: 1px solid var(--border); border-radius: 6px; margin-bottom: 6px; overflow: hidden; }
                     #templateEditModal .te-tab-header { display: flex; align-items: center; gap: 6px; padding: 6px 8px; cursor: pointer; background: var(--bg-elevated); }
@@ -12118,7 +12202,7 @@
                         lines.push(words.slice(i, i + 2).join(' '));
                     }
                 }
-                fieldsArea.innerHTML = lines.map((line, i) => `
+                fieldsArea.innerHTML = buildAndroidMockupFieldHtml(props) + lines.map((line, i) => `
                     <div class="te-field te-field-full">
                         <label>Line ${i + 1} <span style="opacity:0.5">(${fontLabels[i % fontLabels.length]})</span></label>
                         <input type="text" class="te-title-line" data-index="${i}" value="${(line || '').replace(/"/g, '&quot;')}" autocomplete="off">
@@ -12131,6 +12215,22 @@
             }
         }
 
+        function buildAndroidMockupFieldHtml(props) {
+            if (props.platform !== 'android' || !Array.isArray(props.availableDeviceMockups) || props.availableDeviceMockups.length === 0) {
+                return '';
+            }
+            const selected = props.deviceMockup || props.availableDeviceMockups[0]?.id || '';
+            const options = props.availableDeviceMockups.map((option) => `
+                <option value="${escapeHtml(option.id)}" ${option.id === selected ? 'selected' : ''}>${escapeHtml(option.label || option.id)}</option>
+            `).join('');
+            return `
+                <div class="te-field te-field-full">
+                    <label>Android Mockup</label>
+                    <select id="teDeviceMockup">${options}</select>
+                </div>
+            `;
+        }
+
         function buildTerminalEditorHtml(props, existingTabs) {
             const tabRows = existingTabs.map((tab, i) => `
                 <div class="te-tab-row">
@@ -12149,6 +12249,7 @@
             `).join('');
 
             return `
+                ${buildAndroidMockupFieldHtml(props)}
                 <div class="te-field te-field-full">
                     <label>Title</label>
                     <input type="text" id="teTitle" value="${(props.title || '').replace(/"/g, '&quot;')}" autocomplete="off">
@@ -12304,6 +12405,7 @@
             let title = '';
             let titleLines = undefined;
             let showcaseMode = undefined;
+            let deviceMockup = currentTemplateProps?.deviceMockup;
 
             // Determine showcase mode from toggle
             if (isShowcase) {
@@ -12322,6 +12424,11 @@
                 title = titleInput ? titleInput.value : (currentTemplateProps?.title || '');
             }
 
+            const deviceMockupSelect = modal.querySelector('#teDeviceMockup');
+            if (deviceMockupSelect) {
+                deviceMockup = deviceMockupSelect.value;
+            }
+
             // Collect terminal tabs
             const tabRows = modal.querySelectorAll('.te-tab-row');
             const terminalTabs = Array.from(tabRows).map(row => {
@@ -12336,16 +12443,29 @@
             });
 
             try {
-                await fetch(`/api/projects/${currentProject.id}/template-content`, {
+                const res = await fetch(`/api/projects/${currentProject.id}/template-content`, {
                     method: 'PUT',
                     headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ title, titleLines, terminalTabs, showcaseMode }),
+                    body: JSON.stringify({ title, titleLines, terminalTabs, showcaseMode, deviceMockup }),
                 });
+                const data = await res.json();
+                if (data.error) {
+                    showToast(data.error, 'error');
+                    return;
+                }
                 showToast('Template content saved', 'success');
                 modal.remove();
 
                 // Update local props
-                currentTemplateProps = { title, titleLines, terminalTabs, hasNetworkData: terminalTabs.length > 0, showcaseMode };
+                currentTemplateProps = {
+                    ...currentTemplateProps,
+                    title: data.content?.title || title,
+                    titleLines: data.content?.titleLines || titleLines,
+                    terminalTabs,
+                    hasNetworkData: terminalTabs.length > 0,
+                    showcaseMode: data.content?.showcaseMode || showcaseMode,
+                    deviceMockup: data.content?.deviceMockup || deviceMockup,
+                };
 
                 // Force re-render
                 if (activeTemplate !== 'raw') {

package/dist/index.js

@@ -2,7 +2,7 @@
 import {
   startServer,
   stopServer
-} from "./chunk-VRM42PML.js";
+} from "./chunk-LXSWDEXV.js";
 import {
   analyzeTools,
   canvasTools,
@@ -15,17 +15,16 @@ import {
   templateTools,
   testingTools,
   uiTools
-} from "./chunk-4L76GPRC.js";
+} from "./chunk-AHVBE25Y.js";
 import {
   setupTools
 } from "./chunk-FNUN7EPB.js";
 import {
   mcpServer
 } from "./chunk-XKX6NBHF.js";
-import "./chunk-3QRQEDWR.js";
-import "./chunk-6EGBXRDK.js";
+import "./chunk-HGWEHWKJ.js";
 import "./chunk-FIL7IWEL.js";
-import "./chunk-N6JJ2RGV.js";
+import "./chunk-ZLHIHMSL.js";
 import "./chunk-LB3RNE3O.js";
 import {
   attachESVPNetworkTrace,
@@ -51,7 +50,8 @@ import {
   runESVPActions,
   runESVPPreflight,
   validateESVPReplay
-} from "./chunk-GAKEFJ5T.js";
+} from "./chunk-7EDIUVIO.js";
+import "./chunk-6EGBXRDK.js";
 import "./chunk-SLNJEF32.js";
 import {
   closeDatabase,