@mevdragon/vidfarm-devcli 0.2.13 → 0.3.0

package/dist/src/dev-app-legacy.js

@@ -1,694 +0,0 @@
-import { escapeJsonForHtml, renderBrandLockup, renderPageShell } from "./page-shell.js";
-export function renderDevApp(input) {
-    const boot = escapeJsonForHtml({
-        templates: input.templates,
-        environment: input.environment,
-        apiBasePath: "/api/v1"
-    });
-    return renderPageShell({
-        title: "Vidfarm Developer Console",
-        mainClass: "is-wide",
-        body: `
-      <section class="frame console-frame">
-        <header class="topbar">
-          ${renderBrandLockup()}
-          <div class="topbar-actions">
-            <span class="pill is-active">Async First</span>
-            <span class="pill">${input.environment}</span>
-          </div>
-        </header>
-        <div class="frame-body">
-          <section class="page-hero">
-            <div class="surface-hero stack-lg">
-              <span class="kicker">Console</span>
-              <div class="stack">
-                <h1>Developer console.</h1>
-                <p class="lede">Run HyperFrames compositions, render jobs, and traces.</p>
-              </div>
-            </div>
-            <aside class="metric-grid">
-              <section class="surface metric">
-                <div class="eyebrow">Environment</div>
-                <div class="display stat-value" id="envLabel">${input.environment}</div>
-              </section>
-              <section class="surface metric">
-                <div class="eyebrow">Composition Recipes</div>
-                <div class="display stat-value" id="templateCount">${input.templates.length}</div>
-              </section>
-              <section class="surface metric">
-                <div class="eyebrow">Mode</div>
-                <div class="display stat-value">Async First</div>
-              </section>
-            </aside>
-          </section>
-
-          <section class="split-grid console-grid">
-            <aside class="stack">
-            <section class="surface page-section">
-              <div class="stack" style="gap:8px;">
-                <div class="pill">Access</div>
-                <h2>Developer Login</h2>
-              </div>
-              <div class="label-group">
-                <label for="email">Email</label>
-                <input id="email" placeholder="dev@example.com" />
-              </div>
-              <div class="field-grid cols-2">
-                <button id="requestOtp">Request OTP</button>
-                <button id="clearSession" class="secondary">Clear Session</button>
-              </div>
-              <div class="label-group">
-                <label for="otp">6 Digit OTP</label>
-                <input id="otp" placeholder="123456" />
-              </div>
-              <div class="label-group">
-                <label for="name">Display Name</label>
-                <input id="name" placeholder="Composition Dev" />
-              </div>
-              <button id="verifyOtp">Verify And Issue API Key</button>
-              <div class="footer-note" id="sessionSummary">No active session.</div>
-            </section>
-
-            <section class="surface page-section">
-              <div class="stack" style="gap:8px;">
-                <div class="pill">Providers</div>
-                <h2>Customer AI Keys</h2>
-              </div>
-              <div class="field-grid cols-2">
-                <div class="label-group">
-                  <label for="provider">Provider</label>
-                  <select id="provider">
-                    <option value="openai">openai</option>
-                    <option value="openrouter">openrouter</option>
-                    <option value="gemini">gemini</option>
-                    <option value="perplexity">perplexity</option>
-                  </select>
-                </div>
-              </div>
-              <div class="label-group">
-                <label for="providerLabel">Label</label>
-                <input id="providerLabel" placeholder="Primary key" />
-              </div>
-              <div class="label-group">
-                <label for="providerSecret">Secret</label>
-                <input id="providerSecret" placeholder="sk-..." />
-              </div>
-              <div class="stack" style="gap:10px;">
-                <button id="saveProviderKey">Store Provider Key</button>
-                <button id="refreshProviderKeys" class="secondary">Refresh Key Inventory</button>
-              </div>
-              <pre id="providerKeysView">[]</pre>
-            </section>
-            </aside>
-
-            <main class="workspace">
-            <section class="surface page-section">
-              <div class="stack" style="gap:8px;">
-                <div class="pill">Registry</div>
-                <h2>Composition Recipes</h2>
-              </div>
-              <div class="template-grid" id="templates"></div>
-            </section>
-
-            <section class="surface page-section">
-              <div class="stack" style="gap:8px;">
-                <div class="pill">Timeline Control</div>
-                <h2 id="selectedTemplateTitle">Select a composition recipe</h2>
-              </div>
-              <div class="ribbon">
-                <span class="pill">Selected <strong id="selectedTemplateId">None</strong></span>
-                <span class="pill">Action <strong id="selectedOperationName">None</strong></span>
-                <span class="pill">Tracer <strong id="selectedTracer">Pending</strong></span>
-              </div>
-
-              <div class="field-grid cols-3">
-                <div class="label-group">
-                  <label for="operationSelect">Action</label>
-                  <select id="operationSelect"></select>
-                </div>
-                <div class="label-group">
-                  <label for="tracerInput">Tracer</label>
-                  <input id="tracerInput" placeholder="dev-run-001" />
-                </div>
-                <div class="label-group">
-                  <label for="webhookInput">Webhook URL</label>
-                  <input id="webhookInput" placeholder="Optional https://..." />
-                </div>
-              </div>
-
-              <div class="label-group">
-                <label for="configEditor">Composition Config JSON</label>
-                <textarea id="configEditor"></textarea>
-              </div>
-              <div class="field-grid cols-2">
-                <button id="saveConfig">Save Config</button>
-                <button id="loadTemplate" class="secondary">Reload Composition Metadata</button>
-              </div>
-
-              <div class="label-group">
-                <label for="payloadEditor">Render Payload JSON</label>
-                <textarea id="payloadEditor"></textarea>
-              </div>
-              <div class="field-grid cols-2">
-                <button id="launchJob">Launch Render Job</button>
-                <button id="loadJobs" class="secondary">Refresh Renders</button>
-              </div>
-            </section>
-
-            <section class="surface page-section">
-              <div class="stack" style="gap:8px;">
-                <div class="pill">Render Jobs</div>
-                <h2>Render Board</h2>
-              </div>
-              <div class="job-grid" id="jobs"></div>
-            </section>
-
-            <section class="surface page-section">
-              <div class="stack" style="gap:8px;">
-                <div class="pill">Execution Trace</div>
-                <h2>Live Timeline</h2>
-              </div>
-              <div class="timeline" id="timeline"></div>
-              <div class="footer-note" id="jobSummary">No render selected.</div>
-            </section>
-
-            <section class="surface page-section">
-              <div class="stack" style="gap:8px;">
-                <div class="pill">Response View</div>
-                <h2>Inspector</h2>
-              </div>
-              <pre id="inspector">{}</pre>
-            </section>
-            </main>
-          </section>
-        </div>
-      </section>
-
-      <script>
-        const BOOT = ${boot};
-        const state = {
-          baseUrl: window.location.origin,
-          apiBasePath: BOOT.apiBasePath,
-          session: loadSession(),
-          templates: BOOT.templates,
-          selectedTemplateId: BOOT.templates[0]?.id ?? null,
-          selectedOperation: null,
-          selectedJobId: null,
-          jobs: [],
-          jobPollTimer: null
-        };
-
-        const STANDARD_JOB_POLL_MS = 60 * 1000;
-        const BATCH_JOB_POLL_MS = 5 * 60 * 1000;
-        const BATCH_JOB_THRESHOLD = 5;
-
-        const els = {
-          email: document.getElementById("email"),
-          otp: document.getElementById("otp"),
-          name: document.getElementById("name"),
-          requestOtp: document.getElementById("requestOtp"),
-          verifyOtp: document.getElementById("verifyOtp"),
-          clearSession: document.getElementById("clearSession"),
-          sessionSummary: document.getElementById("sessionSummary"),
-          provider: document.getElementById("provider"),
-          providerLabel: document.getElementById("providerLabel"),
-          providerSecret: document.getElementById("providerSecret"),
-          saveProviderKey: document.getElementById("saveProviderKey"),
-          refreshProviderKeys: document.getElementById("refreshProviderKeys"),
-          providerKeysView: document.getElementById("providerKeysView"),
-          templates: document.getElementById("templates"),
-          operationSelect: document.getElementById("operationSelect"),
-          tracerInput: document.getElementById("tracerInput"),
-          webhookInput: document.getElementById("webhookInput"),
-          selectedTemplateTitle: document.getElementById("selectedTemplateTitle"),
-          selectedTemplateId: document.getElementById("selectedTemplateId"),
-          selectedOperationName: document.getElementById("selectedOperationName"),
-          selectedTracer: document.getElementById("selectedTracer"),
-          configEditor: document.getElementById("configEditor"),
-          payloadEditor: document.getElementById("payloadEditor"),
-          saveConfig: document.getElementById("saveConfig"),
-          loadTemplate: document.getElementById("loadTemplate"),
-          launchJob: document.getElementById("launchJob"),
-          loadJobs: document.getElementById("loadJobs"),
-          jobs: document.getElementById("jobs"),
-          timeline: document.getElementById("timeline"),
-          inspector: document.getElementById("inspector"),
-          jobSummary: document.getElementById("jobSummary")
-        };
-
-        function loadSession() {
-          try {
-            return JSON.parse(localStorage.getItem("vidfarm-dev-session") || "null");
-          } catch {
-            return null;
-          }
-        }
-
-        function saveSession(session) {
-          state.session = session;
-          if (session) {
-            localStorage.setItem("vidfarm-dev-session", JSON.stringify(session));
-          } else {
-            localStorage.removeItem("vidfarm-dev-session");
-          }
-          renderSession();
-        }
-
-        function headers() {
-          if (!state.session) {
-            throw new Error("No active session. Verify OTP first.");
-          }
-          return {
-            "content-type": "application/json",
-            "vidfarm-api-key": state.session.apiKey
-          };
-        }
-
-        async function request(path, options = {}) {
-          const response = await fetch(state.baseUrl + state.apiBasePath + path, options);
-          const data = await response.json().catch(() => ({}));
-          if (!response.ok) {
-            throw new Error(data.error || JSON.stringify(data));
-          }
-          els.inspector.textContent = JSON.stringify(data, null, 2);
-          return data;
-        }
-
-        function renderSession() {
-          if (!state.session) {
-            els.sessionSummary.textContent = "No active session.";
-            return;
-          }
-          const developerLabel = state.session.customer.isDeveloper ? "developer" : "standard";
-          els.sessionSummary.textContent =
-            "Active: " + state.session.customer.email + " • " + state.session.customer.id + " • " + developerLabel;
-        }
-
-        function getSelectedTemplate() {
-          return state.templates.find((template) => template.id === state.selectedTemplateId) || null;
-        }
-
-        function getTemplateDefaults(templateId, operation) {
-          if (templateId === "template_0000" || templateId === "4c7a7e1a-7f35-4f30-9f86-9c8a63c7f2db") {
-            const config = {
-              defaultProvider: "openai",
-              textModel: "gpt-4.1-mini",
-              imageModel: "gpt-image-1",
-              renderCompositionId: "template-0000"
-            };
-            const payloads = {
-              generate: {
-                slides: [
-                  ["a cinematic founder working late in a warm studio", "Build the pipeline before you scale the content"],
-                  ["a crisp top-down desk with storyboard pages and coffee", "Use layouts that leave clean space for exact text"],
-                  ["a polished vertical product montage with dramatic lighting", "Render to 9:16 and ship straight to TikTok"]
-                ],
-                secondsPerSlide: 4
-              }
-            };
-            return {
-              config,
-              payload: payloads[operation] || {}
-            };
-          }
-          return { config: {}, payload: {} };
-        }
-
-        function renderTemplates() {
-          els.templates.innerHTML = "";
-          state.templates.forEach((template) => {
-            const card = document.createElement("button");
-            card.className = "template-card" + (template.id === state.selectedTemplateId ? " active" : "");
-            card.innerHTML = \`
-              <div class="template-title">\${template.id}</div>
-              <div class="template-desc">\${template.description || ""}</div>
-              <div class="operation-list">
-                \${(template.operations || []).map((op) => \`<span class="op">\${op.name}</span>\`).join("")}
-              </div>
-            \`;
-            card.addEventListener("click", () => {
-              state.selectedTemplateId = template.id;
-              state.selectedOperation = template.operations?.[0]?.name || null;
-              hydrateTemplateEditors();
-              renderTemplates();
-            });
-            els.templates.appendChild(card);
-          });
-        }
-
-        function hydrateTemplateEditors() {
-          const template = getSelectedTemplate();
-          if (!template) {
-            return;
-          }
-          els.selectedTemplateTitle.textContent = template.description || template.id;
-          els.selectedTemplateId.textContent = template.id;
-          els.operationSelect.innerHTML = "";
-          (template.operations || []).forEach((op) => {
-            const option = document.createElement("option");
-            option.value = op.name;
-            option.textContent = op.name;
-            els.operationSelect.appendChild(option);
-          });
-          if (!state.selectedOperation) {
-            state.selectedOperation = template.operations?.[0]?.name || null;
-          }
-          els.operationSelect.value = state.selectedOperation || "";
-          const defaults = getTemplateDefaults(template.id, state.selectedOperation);
-          els.configEditor.value = JSON.stringify(defaults.config, null, 2);
-          els.payloadEditor.value = JSON.stringify(defaults.payload, null, 2);
-          els.tracerInput.value = "dev-" + Math.random().toString(36).slice(2, 9);
-          renderOperationBanner();
-        }
-
-        function renderOperationBanner() {
-          els.selectedOperationName.textContent = state.selectedOperation || "None";
-          els.selectedTracer.textContent = els.tracerInput.value || "Pending";
-        }
-
-        function renderJobs() {
-          els.jobs.innerHTML = "";
-          state.jobs.forEach((job) => {
-            const card = document.createElement("button");
-            card.className = "job-card";
-            card.innerHTML = \`
-              <div style="display:flex;justify-content:space-between;gap:12px;align-items:center;">
-                <strong>\${job.operationName || job.operation_name}</strong>
-                <span class="status \${job.status}">\${job.status}</span>
-              </div>
-              <div class="muted" style="margin-top:8px;">\${job.id || job.job_id}</div>
-              <div class="muted" style="margin-top:8px;">Tracer: \${job.tracer}</div>
-            \`;
-            card.addEventListener("click", async () => {
-              state.selectedJobId = job.id || job.job_id;
-              await refreshJobDetail();
-            });
-            els.jobs.appendChild(card);
-          });
-        }
-
-        async function refreshProviderKeys() {
-          const data = await request("/user/me/provider-keys", { headers: headers() });
-          els.providerKeysView.textContent = JSON.stringify(data.provider_keys, null, 2);
-        }
-
-        async function refreshJobs() {
-          const data = await request("/user/me/jobs", { headers: headers() });
-          state.jobs = data.jobs || [];
-          renderJobs();
-        }
-
-        function clearJobPollTimer() {
-          if (state.jobPollTimer) {
-            clearTimeout(state.jobPollTimer);
-            state.jobPollTimer = null;
-          }
-        }
-
-        function getSelectedJobRecord() {
-          return state.jobs.find((job) => (job.id || job.job_id) === state.selectedJobId) || null;
-        }
-
-        function getJobPollIntervalMs() {
-          const selectedJob = getSelectedJobRecord();
-          const selectedTracer = selectedJob?.tracer;
-          if (!selectedTracer) {
-            return STANDARD_JOB_POLL_MS;
-          }
-          const activeTracerJobs = state.jobs.filter((job) => {
-            const status = job.status;
-            return job.tracer === selectedTracer && (status === "queued" || status === "running");
-          }).length;
-          return activeTracerJobs >= BATCH_JOB_THRESHOLD ? BATCH_JOB_POLL_MS : STANDARD_JOB_POLL_MS;
-        }
-
-        function scheduleJobPoll() {
-          clearJobPollTimer();
-          state.jobPollTimer = setTimeout(async () => {
-            try {
-              await refreshJobs();
-              await refreshJobDetail();
-            } catch (error) {
-              els.inspector.textContent = JSON.stringify({ error: error.message }, null, 2);
-            }
-          }, getJobPollIntervalMs());
-        }
-
-        async function refreshJobDetail() {
-          clearJobPollTimer();
-          if (!state.selectedJobId || !state.selectedTemplateId) {
-            return;
-          }
-          const [job, logs] = await Promise.all([
-            request("/templates/" + state.selectedTemplateId + "/jobs/" + state.selectedJobId, { headers: headers() }),
-            request("/templates/" + state.selectedTemplateId + "/jobs/" + state.selectedJobId + "/logs", { headers: headers() })
-          ]);
-          renderTimeline(logs.logs || []);
-          els.jobSummary.textContent = "Render " + job.job_id + " is " + job.status + " with progress " + job.progress;
-          if (job.status === "queued" || job.status === "running") {
-            scheduleJobPoll();
-          }
-        }
-
-        function renderTimeline(logs) {
-          els.timeline.innerHTML = "";
-          if (!logs.length) {
-            els.timeline.innerHTML = "<div class='muted'>No events yet.</div>";
-            return;
-          }
-          logs.forEach((log) => {
-            const el = document.createElement("div");
-            el.className = "event";
-            el.innerHTML = \`
-              <div class="event-head">
-                <span>\${log.level.toUpperCase()}</span>
-                <span>\${new Date(log.createdAt).toLocaleTimeString()}</span>
-              </div>
-              <div class="event-msg">\${log.message}</div>
-              <div class="muted" style="margin-top:6px;">progress: \${log.progress ?? "n/a"}</div>
-            \`;
-            els.timeline.appendChild(el);
-          });
-        }
-
-        els.requestOtp.addEventListener("click", async () => {
-          const email = els.email.value.trim();
-          if (!email) return;
-          await request("/user/request-otp", {
-            method: "POST",
-            headers: { "content-type": "application/json" },
-            body: JSON.stringify({ email })
-          });
-        });
-
-        els.verifyOtp.addEventListener("click", async () => {
-          const data = await request("/user/verify-otp", {
-            method: "POST",
-            headers: { "content-type": "application/json" },
-            body: JSON.stringify({
-              email: els.email.value.trim(),
-              code: els.otp.value.trim(),
-              name: els.name.value.trim() || undefined
-            })
-          });
-          saveSession(data);
-          await refreshProviderKeys();
-          await refreshJobs();
-        });
-
-        els.clearSession.addEventListener("click", () => {
-          clearJobPollTimer();
-          saveSession(null);
-          els.providerKeysView.textContent = "[]";
-          els.jobs.innerHTML = "";
-          els.timeline.innerHTML = "";
-        });
-
-        els.saveProviderKey.addEventListener("click", async () => {
-          await request("/user/me/provider-keys", {
-            method: "POST",
-            headers: headers(),
-            body: JSON.stringify({
-              provider: els.provider.value,
-              label: els.providerLabel.value.trim() || undefined,
-              secret: els.providerSecret.value.trim()
-            })
-          });
-          els.providerSecret.value = "";
-          await refreshProviderKeys();
-        });
-
-        els.refreshProviderKeys.addEventListener("click", refreshProviderKeys);
-
-        els.operationSelect.addEventListener("change", () => {
-          state.selectedOperation = els.operationSelect.value;
-          const defaults = getTemplateDefaults(state.selectedTemplateId, state.selectedOperation);
-          els.payloadEditor.value = JSON.stringify(defaults.payload, null, 2);
-          renderOperationBanner();
-        });
-
-        els.tracerInput.addEventListener("input", renderOperationBanner);
-
-        els.saveConfig.addEventListener("click", async () => {
-          if (!state.selectedTemplateId) return;
-          await request("/templates/" + state.selectedTemplateId + "/config", {
-            method: "POST",
-            headers: headers(),
-            body: JSON.stringify({ config: JSON.parse(els.configEditor.value) })
-          });
-        });
-
-        els.launchJob.addEventListener("click", async () => {
-          if (!state.selectedTemplateId || !state.selectedOperation) return;
-          const data = await request("/templates/" + state.selectedTemplateId + "/operations/" + state.selectedOperation, {
-            method: "POST",
-            headers: headers(),
-            body: JSON.stringify({
-              tracer: els.tracerInput.value.trim() || ("dev-" + Date.now()),
-              payload: JSON.parse(els.payloadEditor.value),
-              webhook_url: els.webhookInput.value.trim() || undefined
-            })
-          });
-          state.selectedJobId = data.job_id;
-          await refreshJobs();
-          await refreshJobDetail();
-        });
-
-        els.loadJobs.addEventListener("click", refreshJobs);
-        els.loadTemplate.addEventListener("click", hydrateTemplateEditors);
-
-        renderSession();
-        renderTemplates();
-        hydrateTemplateEditors();
-        if (state.session) {
-          refreshProviderKeys().catch((error) => {
-            els.inspector.textContent = JSON.stringify({ error: error.message }, null, 2);
-          });
-          refreshJobs().catch((error) => {
-            els.inspector.textContent = JSON.stringify({ error: error.message }, null, 2);
-          });
-        }
-      </script>
-    `,
-        style: `
-      .workspace {
-        display: grid;
-        gap: 18px;
-      }
-
-      .stat-value {
-        margin-top: 10px;
-        font-size: clamp(1.8rem, 4vw, 2.8rem);
-        line-height: 0.9;
-      }
-
-      .template-grid,
-      .job-grid {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-        gap: 14px;
-      }
-
-      .template-card,
-      .job-card {
-        width: 100%;
-        border-radius: 20px;
-        text-align: left;
-        padding: 18px;
-        background: rgba(255, 251, 244, 0.52);
-        color: var(--ink);
-        border: 1px solid rgba(102, 82, 43, 0.14);
-      }
-
-      .template-card.active {
-        border-color: rgba(118, 89, 38, 0.42);
-        box-shadow: 0 0 0 4px rgba(170, 123, 44, 0.12);
-      }
-
-      .template-title {
-        font-size: 1.5rem;
-        line-height: 1;
-        font-weight: 800;
-        letter-spacing: -0.04em;
-      }
-
-      .template-desc,
-      .muted {
-        color: var(--muted);
-        line-height: 1.55;
-      }
-
-      .operation-list,
-      .ribbon {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 8px;
-      }
-
-      .op {
-        padding: 6px 10px;
-        border: 1px solid var(--line);
-        border-radius: 999px;
-        background: rgba(170, 123, 44, 0.08);
-        font-size: 12px;
-      }
-
-      .timeline {
-        border-left: 1px solid var(--line);
-        margin-left: 6px;
-        padding-left: 18px;
-        display: grid;
-        gap: 16px;
-      }
-
-      .event {
-        position: relative;
-      }
-
-      .event::before {
-        content: "";
-        position: absolute;
-        left: -24px;
-        top: 6px;
-        width: 10px;
-        height: 10px;
-        border-radius: 50%;
-        background: var(--accent);
-        box-shadow: 0 0 0 5px rgba(170, 123, 44, 0.14);
-      }
-
-      .event-head {
-        display: flex;
-        justify-content: space-between;
-        gap: 12px;
-        font-size: 13px;
-        color: var(--muted);
-      }
-
-      .event-msg {
-        margin-top: 6px;
-        font-size: 16px;
-      }
-
-      .status {
-        display: inline-block;
-        padding: 4px 10px;
-        border: 1px solid var(--line);
-        border-radius: 999px;
-        font-size: 11px;
-        text-transform: uppercase;
-        letter-spacing: 0.18em;
-      }
-
-      .status.succeeded { color: #0f8b8d; }
-      .status.failed { color: #b5532f; }
-      .status.running { color: #947124; }
-
-      .footer-note {
-        color: var(--muted);
-        font-size: 14px;
-      }
-    `
-    });
-}
-//# sourceMappingURL=dev-app-legacy.js.map