@mevdragon/vidfarm-devcli 0.5.3 → 0.6.0

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

@@ -0,0 +1,739 @@
+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 timeline 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: `
+      .console-frame .frame-body {
+        min-height: 0;
+        overflow-y: auto;
+      }
+
+      .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 {
+        display: block;
+        width: 100%;
+        height: auto;
+        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 {
+        min-width: 0;
+        overflow-wrap: anywhere;
+        font-size: 1.5rem;
+        line-height: 1;
+        font-weight: 800;
+        letter-spacing: -0.04em;
+      }
+
+      .job-card .muted {
+        overflow-wrap: anywhere;
+      }
+
+      .template-desc,
+      .muted {
+        color: var(--muted);
+        line-height: 1.55;
+      }
+
+      .operation-list,
+      .ribbon {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+      }
+
+      .ribbon .pill {
+        max-width: 100%;
+        min-width: 0;
+        height: auto;
+        flex-wrap: wrap;
+        padding-top: 6px;
+        padding-bottom: 6px;
+      }
+
+      .ribbon .pill strong {
+        min-width: 0;
+        overflow-wrap: anywhere;
+      }
+
+      .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;
+        overflow-wrap: anywhere;
+      }
+
+      .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;
+      }
+
+      @media (max-width: 1024px) {
+        .console-frame .frame-body {
+          overflow: visible;
+        }
+
+        #configEditor,
+        #payloadEditor {
+          font-size: 16px;
+        }
+      }
+
+      @media (max-width: 560px) {
+        .console-frame .topbar-actions .pill {
+          display: none;
+        }
+      }
+    `
+    });
+}
+//# sourceMappingURL=dev-app-legacy.js.map