@mevdragon/vidfarm-devcli 0.2.12 → 0.2.14

package/dist/src/account-pages-legacy.js

@@ -7,6 +7,7 @@ function shell(input) {
         body: input.body,
         shellClass: input.shellClass,
         mainClass: input.mainClass,
+        bodyClass: input.bodyClass,
         runtimeBoot: input.runtimeBoot,
         style: `
       .auth-layout {
@@ -549,8 +550,8 @@ export function renderSettingsPage(input) {
         if (event.entity_type === "wallet_funding_event") {
             return "Wallet top-up";
         }
-        if (event.cost_center_slug === "remotion_lambda") {
-            return "Cloud render usage";
+        if (event.cost_center_slug === "hyperframes_lambda" || event.cost_center_slug === "remotion_lambda") {
+            return "Timeline render usage";
         }
         if (event.cost_center_slug === "wallet_funding") {
             return "Wallet funding";
@@ -567,7 +568,7 @@ export function renderSettingsPage(input) {
     const renderWalletHistoryItem = (event) => {
         const amountClass = event.amount_usd >= 0 ? "is-credit" : "is-debit";
         const metaParts = [
-            event.job_id ? `Job ${escapeHtml(event.job_id)}` : "",
+            event.job_id ? `Render ${escapeHtml(event.job_id)}` : "",
             event.tracer ? `Tracer ${escapeHtml(event.tracer)}` : "",
             event.client_reference_id ? `Client ref ${escapeHtml(event.client_reference_id)}` : "",
             event.event_id ? `Event ${escapeHtml(event.event_id)}` : ""
@@ -731,16 +732,6 @@ export function renderSettingsPage(input) {
     const attachments = input.attachments.length
         ? input.attachments.map((entry) => renderAttachmentCard(entry)).join("")
         : `<div class="empty-state" data-files-empty-state>No attachments uploaded yet.</div>`;
-    const developerSkillButton = input.isDeveloper && input.developerSkill
-        ? `
-      <button
-        type="button"
-        class="secondary"
-        data-copy-content='${escapeAttribute(input.developerSkill)}'
-        data-copy-label="Developer SKILL.md"
-      >Developer SKILL.md</button>
-    `
-        : "";
     const hasFlockPosterKey = Boolean(input.flockposterApiKey?.trim());
     const hasAnyChannel = hasFlockPosterKey || input.emailChannels.length > 0;
     const renderChannelMenu = (entry) => entry.type === "email"
@@ -756,7 +747,14 @@ export function renderSettingsPage(input) {
           </form>
           <form method="post" action="/settings/channels/email/${encodeURIComponent(entry.rawId ?? "")}/delete" data-email-delete-form>
             <input type="hidden" name="account" value="${escapeHtml(input.currentAccountId)}" />
-            <button type="submit" class="danger-text">Delete</button>
+            <button type="submit" class="danger-text" data-email-delete-toggle aria-haspopup="dialog" aria-expanded="false">Delete</button>
+            <div class="channel-popconfirm" data-email-delete-confirm hidden>
+              <p>Delete this email channel?</p>
+              <div class="channel-popconfirm-actions">
+                <button type="button" class="secondary" data-email-delete-cancel>Cancel</button>
+                <button type="submit" class="danger" data-email-delete-confirm-button>Delete</button>
+              </div>
+            </div>
           </form>
         </div>
       </div>
@@ -920,7 +918,7 @@ export function renderSettingsPage(input) {
                 <div class="settings-pane-head">
                   <div class="label">Wallet</div>
                   <h2>Wallet balance and usage billing</h2>
-                  <p>Your balance is denominated directly in USD. We do not use credits, and typical video costs can start from around $0.01 depending on template.</p>
+                  <p>Your balance is denominated directly in USD. We do not use credits, and typical video costs depend on timeline length, layer count, and Lambda memory.</p>
                 </div>
                 <section class="developer-panel wallet-panel">
                   <div class="wallet-hero">
@@ -1157,7 +1155,6 @@ export function renderSettingsPage(input) {
                       data-copy-content='${escapeAttribute(input.directorSkill)}'
                       data-copy-label="Director SKILL.md"
                     >Director SKILL.md</button>
-                    ${developerSkillButton}
                   </div>
                 </section>
                 <section class="developer-panel">
@@ -1173,20 +1170,6 @@ export function renderSettingsPage(input) {
                 ${providerKeyCreateDialog}
               </section>
             </section>
-            <dialog class="logout-dialog" data-logout-dialog>
-              <div class="logout-dialog-head">
-                <div class="label logout-dialog-kicker">Log out</div>
-                <h3>Log out of this browser?</h3>
-                <p>This clears the stored developer key, workspace access, and local session state for the current browser.</p>
-              </div>
-              <div class="toolbar logout-dialog-actions">
-                <button type="button" class="secondary" data-close-logout-dialog>Cancel</button>
-                <form method="post" action="/logout" data-logout-form>
-                  <input type="hidden" name="account" value="${escapeHtml(input.currentAccountId)}" />
-                  <button type="submit" class="danger">Yes, log out</button>
-                </form>
-              </div>
-            </dialog>
           </section>
         </div>
       </section>
@@ -1259,6 +1242,9 @@ export function renderSettingsPage(input) {
         function withAccountUrl(pathname) {
           const url = new URL(pathname, window.location.origin);
           if (ACCOUNT_USER_ID) {
+            if (url.pathname === "/discover" || url.pathname.startsWith("/discover/") || url.pathname === "/help") {
+              return url.pathname + url.search;
+            }
             if (!url.pathname.startsWith("/api/v1") && !url.pathname.startsWith("/u/")) {
               return "/u/" + encodeURIComponent(ACCOUNT_USER_ID) + url.pathname + url.search;
             }
@@ -1299,8 +1285,9 @@ export function renderSettingsPage(input) {
           }
           try {
             const current = readFlockPosterCache();
+            const emailChannels = Array.isArray(current.channels) ? current.channels.filter(isEmailCachedChannel) : [];
             window.localStorage.setItem(FLOCKPOSTER_CACHE_KEY, JSON.stringify({
-              channels,
+              channels: [...emailChannels, ...channels.filter((channel) => !isEmailCachedChannel(channel))],
               posts: Array.isArray(current.posts) ? current.posts : [],
               channelsUpdatedAt: new Date().toISOString(),
               calendarUpdatedAt: current.calendarUpdatedAt || null,
@@ -1312,6 +1299,12 @@ export function renderSettingsPage(input) {
           }
         }
 
+        function isEmailCachedChannel(channel) {
+          const id = String(channel && channel.id || "");
+          const platform = String(channel && channel.platform || "").toLowerCase();
+          return id.startsWith("email:") || platform === "email";
+        }
+
         function renderLoadingInline(label) {
           return '<span class="loading-inline"><span class="loading-spinner" aria-hidden="true"></span><span>' + escapeHtml(label) + '</span></span>';
         }
@@ -1331,7 +1324,7 @@ export function renderSettingsPage(input) {
             currentTabLabel.textContent = tab.charAt(0).toUpperCase() + tab.slice(1);
           }
           const settingsNavPanel = document.querySelector(".settings-nav-panel");
-          if (settingsNavPanel instanceof HTMLDetailsElement && window.matchMedia("(max-width: 767px)").matches) {
+          if (settingsNavPanel instanceof HTMLDetailsElement && window.matchMedia("(max-width: 1024px)").matches) {
             settingsNavPanel.open = false;
           }
           const url = new URL(window.location.href);
@@ -1360,7 +1353,7 @@ export function renderSettingsPage(input) {
             settingsNavPanel.open = !phoneSettingsQuery.matches;
           }
         }
-        const phoneSettingsQuery = window.matchMedia("(max-width: 767px)");
+        const phoneSettingsQuery = window.matchMedia("(max-width: 1024px)");
         syncSettingsNavPanelState();
         phoneSettingsQuery.addEventListener("change", syncSettingsNavPanelState);
         document.querySelectorAll(".topbar-actions a, .brand-lockup").forEach((link) => {
@@ -1460,11 +1453,18 @@ export function renderSettingsPage(input) {
         const filesList = document.querySelector("[data-files-list]");
         const filesStatus = document.querySelector("[data-files-status]");
         const hasFlockPosterKey = ${hasFlockPosterKey ? "true" : "false"};
+        const billingUrl = ${escapeJsonForHtml(input.billingUrl)};
+        const vidfarmApiKey = ${escapeJsonForHtml(input.vidfarmApiKey)};
+        const currentAccountId = ${escapeJsonForHtml(input.currentAccountId)};
+        const walletCheckoutBaseUrl = "https://buy.stripe.com/3cIfZggERgLsfVzfKR53O0H";
         const shouldAutoOpenFlockPosterDialog = ${input.openFlockPosterDialog ? "true" : "false"};
+        const shouldRefreshFlockPosterChannels = new URLSearchParams(window.location.search).get("refresh") === "channels";
         const initialEmailChannels = ${escapeJsonForHtml(input.emailChannels)};
         registerCurrentAccount();
         const cachedFlockPosterState = readFlockPosterCache();
-        const cachedFlockPosterChannels = Array.isArray(cachedFlockPosterState.channels) ? cachedFlockPosterState.channels : [];
+        const cachedFlockPosterChannels = Array.isArray(cachedFlockPosterState.channels)
+          ? cachedFlockPosterState.channels.filter((channel) => !isEmailCachedChannel(channel))
+          : [];
         let flockPosterChannelsState = Array.isArray(initialEmailChannels) ? initialEmailChannels : [];
         let flockPosterSearchQuery = "";
         let hasRenderedCachedFlockPosterChannels = false;
@@ -1504,8 +1504,8 @@ export function renderSettingsPage(input) {
           if (event.entity_type === "wallet_funding_event") {
             return "Wallet top-up";
           }
-          if (event.cost_center_slug === "remotion_lambda") {
-            return "Cloud render usage";
+          if (event.cost_center_slug === "hyperframes_lambda" || event.cost_center_slug === "remotion_lambda") {
+            return "Timeline render usage";
           }
           if (event.cost_center_slug === "wallet_funding") {
             return "Wallet funding";
@@ -1515,7 +1515,7 @@ export function renderSettingsPage(input) {
         function renderWalletHistoryItem(event) {
           const amount = Number(event.amount_usd || 0);
           const meta = [
-            event.job_id ? "Job " + escapeHtml(event.job_id) : "",
+            event.job_id ? "Render " + escapeHtml(event.job_id) : "",
             event.tracer ? "Tracer " + escapeHtml(event.tracer) : "",
             event.client_reference_id ? "Client ref " + escapeHtml(event.client_reference_id) : "",
             event.event_id ? "Event " + escapeHtml(event.event_id) : ""
@@ -1543,6 +1543,42 @@ export function renderSettingsPage(input) {
           anchor.click();
           anchor.remove();
         }
+        function createWalletClientReferenceId() {
+          if (window.crypto && typeof window.crypto.randomUUID === "function") {
+            return "vidfarm_wallet_topup_" + window.crypto.randomUUID();
+          }
+          return "vidfarm_wallet_topup_" + "10000000-1000-4000-8000-" + String(Date.now()).padStart(12, "0").slice(-12);
+        }
+        async function createWalletCheckoutUrlDirect() {
+          if (!billingUrl || !vidfarmApiKey) {
+            throw new Error("Billing service is not configured.");
+          }
+          const clientReferenceId = createWalletClientReferenceId();
+          const response = await fetch(new URL("/v1/wallet-funding-intents", billingUrl), {
+            method: "POST",
+            headers: {
+              "content-type": "application/json",
+              "vidfarm-api-key": vidfarmApiKey
+            },
+            body: JSON.stringify({
+              customer_id: currentAccountId,
+              client_reference_id: clientReferenceId,
+              occurred_at_ms: Date.now(),
+              metadata: {
+                source: "settings_wallet_modal",
+                customer_email: ${escapeJsonForHtml(input.email)}
+              }
+            })
+          });
+          const payload = await response.json().catch(() => ({}));
+          if (!response.ok) {
+            throw new Error(payload.error || "Unable to create payment link.");
+          }
+          const checkoutUrl = new URL(walletCheckoutBaseUrl);
+          checkoutUrl.searchParams.set("client_reference_id", clientReferenceId);
+          checkoutUrl.searchParams.set("prefilled_email", ${escapeJsonForHtml(input.email)});
+          return checkoutUrl.toString();
+        }
         openWalletFundingButton?.addEventListener("click", openWalletFundingDialog);
         closeWalletFundingButton?.addEventListener("click", closeWalletFundingDialog);
         walletFundingProceedButton?.addEventListener("click", async () => {
@@ -1551,18 +1587,22 @@ export function renderSettingsPage(input) {
           walletFundingProceedButton.disabled = true;
           walletFundingProceedButton.textContent = "Opening...";
           try {
-            const response = await fetch(withAccountUrl("/settings/wallet/funding-link"), {
-              method: "POST",
-              headers: {
-                "content-type": "application/json"
-              },
-              body: JSON.stringify({})
-            });
-            const payload = await response.json();
-            if (!response.ok || typeof payload.checkout_url !== "string" || !payload.checkout_url) {
-              throw new Error(payload.error || "Unable to create payment link.");
-            }
-            openWalletCheckoutInNewTab(payload.checkout_url, popup);
+            const checkoutUrl = billingUrl
+              ? await createWalletCheckoutUrlDirect()
+              : await fetch(withAccountUrl("/settings/wallet/funding-link"), {
+                  method: "POST",
+                  headers: {
+                    "content-type": "application/json"
+                  },
+                  body: JSON.stringify({})
+                }).then(async (response) => {
+                  const payload = await response.json();
+                  if (!response.ok || typeof payload.checkout_url !== "string" || !payload.checkout_url) {
+                    throw new Error(payload.error || "Unable to create payment link.");
+                  }
+                  return payload.checkout_url;
+                });
+            openWalletCheckoutInNewTab(checkoutUrl, popup);
             closeWalletFundingDialog();
           } catch (error) {
             if (popup && !popup.closed) {
@@ -1584,7 +1624,13 @@ export function renderSettingsPage(input) {
           walletHistoryLoadMoreButton.disabled = true;
           walletHistoryLoadMoreButton.textContent = "Loading...";
           try {
-            const response = await fetch(withAccountUrl("/settings/wallet/events?limit=50&cursor=" + encodeURIComponent(cursor)));
+            const response = billingUrl && vidfarmApiKey
+              ? await fetch(new URL("/v1/wallets/" + encodeURIComponent(currentAccountId) + "/events?limit=50&cursor=" + encodeURIComponent(cursor), billingUrl), {
+                  headers: {
+                    "vidfarm-api-key": vidfarmApiKey
+                  }
+                })
+              : await fetch(withAccountUrl("/settings/wallet/events?limit=50&cursor=" + encodeURIComponent(cursor)));
             const payload = await response.json();
             if (!response.ok || !Array.isArray(payload.events)) {
               throw new Error(payload.error || "Unable to load billing history.");
@@ -2305,15 +2351,64 @@ export function renderSettingsPage(input) {
             }
           });
         }
-        document.querySelectorAll("[data-email-delete-form]").forEach((form) => {
-          form.addEventListener("submit", (event) => {
-            if (!window.confirm("Delete this email channel?")) {
-              event.preventDefault();
+        function closeEmailDeletePopconfirms(exceptForm) {
+          document.querySelectorAll("[data-email-delete-form]").forEach((form) => {
+            if (!(form instanceof HTMLFormElement) || form === exceptForm) {
+              return;
             }
+            const confirm = form.querySelector("[data-email-delete-confirm]");
+            const toggle = form.querySelector("[data-email-delete-toggle]");
+            if (confirm instanceof HTMLElement) {
+              confirm.hidden = true;
+            }
+            if (toggle instanceof HTMLButtonElement) {
+              toggle.setAttribute("aria-expanded", "false");
+            }
+            delete form.dataset.confirmed;
           });
-        });
+        }
+
+        function bindEmailDeletePopconfirms(root) {
+          if (!(root instanceof Document || root instanceof HTMLElement)) {
+            return;
+          }
+          root.querySelectorAll("[data-email-delete-form]").forEach((form) => {
+            if (!(form instanceof HTMLFormElement) || form.dataset.deletePopconfirmBound === "true") {
+              return;
+            }
+            form.dataset.deletePopconfirmBound = "true";
+            const confirm = form.querySelector("[data-email-delete-confirm]");
+            const toggle = form.querySelector("[data-email-delete-toggle]");
+            const cancel = form.querySelector("[data-email-delete-cancel]");
+            const confirmButton = form.querySelector("[data-email-delete-confirm-button]");
+            if (!(confirm instanceof HTMLElement) || !(toggle instanceof HTMLButtonElement) || !(cancel instanceof HTMLButtonElement) || !(confirmButton instanceof HTMLButtonElement)) {
+              return;
+            }
+            cancel.addEventListener("click", () => {
+              confirm.hidden = true;
+              toggle.setAttribute("aria-expanded", "false");
+              delete form.dataset.confirmed;
+            });
+            form.addEventListener("submit", (event) => {
+              if (form.dataset.confirmed === "true") {
+                return;
+              }
+              event.preventDefault();
+              closeEmailDeletePopconfirms(form);
+              confirm.hidden = false;
+              toggle.setAttribute("aria-expanded", "true");
+            });
+            confirmButton.addEventListener("click", () => {
+              form.dataset.confirmed = "true";
+            });
+          });
+        }
+        bindEmailDeletePopconfirms(document);
+        if (!hasFlockPosterKey && shouldRefreshFlockPosterChannels) {
+          writeFlockPosterChannelsToCache([]);
+        }
         if (hasFlockPosterKey && flockPosterHeading instanceof HTMLElement && flockPosterChannelList instanceof HTMLElement && flockPosterSection instanceof HTMLElement) {
-          if (cachedFlockPosterChannels.length) {
+          if (cachedFlockPosterChannels.length && !shouldRefreshFlockPosterChannels) {
             renderFlockPosterChannels([...(Array.isArray(initialEmailChannels) ? initialEmailChannels : []), ...cachedFlockPosterChannels.map((channel) => ({ ...channel, type: "flockposter" }))]);
             hasRenderedCachedFlockPosterChannels = true;
           } else {
@@ -2394,6 +2489,7 @@ export function renderSettingsPage(input) {
               button.setAttribute("aria-expanded", "false");
             }
           });
+          closeEmailDeletePopconfirms();
         }
 
         function bindChannelMenus(root) {
@@ -2500,6 +2596,7 @@ export function renderSettingsPage(input) {
             '</article>'
           )).join("");
           bindChannelMenus(flockPosterChannelList);
+          bindEmailDeletePopconfirms(flockPosterChannelList);
         }
 
         function filterFlockPosterChannels(channels, query) {
@@ -2559,7 +2656,7 @@ export function renderSettingsPage(input) {
               + '<button type="button" data-copy-content="' + escapeHtml(entry.handle || "") + '">Copy email</button>'
               + '<button type="button" data-email-edit-open data-email-id="' + escapeHtml(rawId) + '" data-email-title="' + escapeHtml(String(entry.title || "").replace(/^Unverified - /, "")) + '" data-email-note="' + escapeHtml(entry.note || "") + '" data-email-avatar-url="' + escapeHtml(entry.avatarUrl || "") + '">Edit</button>'
               + '<form method="post" action="/settings/channels/email/' + encodeURIComponent(rawId) + '/resend"><input type="hidden" name="account" value="' + escapeHtml(ACCOUNT_USER_ID) + '" /><button type="submit">Resend verification</button></form>'
-              + '<form method="post" action="/settings/channels/email/' + encodeURIComponent(rawId) + '/delete" data-email-delete-form><input type="hidden" name="account" value="' + escapeHtml(ACCOUNT_USER_ID) + '" /><button type="submit" class="danger-text">Delete</button></form>'
+              + '<form method="post" action="/settings/channels/email/' + encodeURIComponent(rawId) + '/delete" data-email-delete-form><input type="hidden" name="account" value="' + escapeHtml(ACCOUNT_USER_ID) + '" /><button type="submit" class="danger-text" data-email-delete-toggle aria-haspopup="dialog" aria-expanded="false">Delete</button><div class="channel-popconfirm" data-email-delete-confirm hidden><p>Delete this email channel?</p><div class="channel-popconfirm-actions"><button type="button" class="secondary" data-email-delete-cancel>Cancel</button><button type="submit" class="danger" data-email-delete-confirm-button>Delete</button></div></div></form>'
               + '</div></div>';
           }
           return ''
@@ -2626,6 +2723,10 @@ export function renderSettingsPage(input) {
         min-height: 0;
         gap: 24px;
         padding: 28px 26px 30px;
+        overflow-y: auto;
+        overscroll-behavior: contain;
+        scrollbar-gutter: stable;
+        -webkit-overflow-scrolling: touch;
         border-right: 1px solid rgba(209, 219, 233, 0.8);
         background: linear-gradient(180deg, rgba(255, 251, 245, 0.96), rgba(255, 248, 239, 0.88));
       }
@@ -3311,6 +3412,52 @@ export function renderSettingsPage(input) {
         color: #b63d3d;
       }
 
+      .channel-popconfirm {
+        display: grid;
+        gap: 10px;
+        margin: 4px 0 6px;
+        padding: 12px;
+        border: 1px solid rgba(216, 91, 91, 0.22);
+        border-radius: 12px;
+        background: rgba(255, 247, 244, 0.92);
+      }
+
+      .channel-popconfirm[hidden] {
+        display: none;
+      }
+
+      .channel-popconfirm p {
+        margin: 0;
+        color: #6f3434;
+        font-size: 0.88rem;
+        font-weight: 700;
+        line-height: 1.3;
+      }
+
+      .channel-popconfirm-actions {
+        display: flex;
+        justify-content: flex-end;
+        gap: 8px;
+      }
+
+      .channel-menu .channel-popconfirm-actions button {
+        justify-content: center;
+        width: auto;
+        min-height: 34px;
+        padding: 7px 10px;
+        border-radius: 10px;
+        font-size: 0.84rem;
+      }
+
+      .channel-menu .channel-popconfirm-actions .secondary {
+        background: rgba(255, 255, 255, 0.76);
+      }
+
+      .channel-menu .channel-popconfirm-actions .danger {
+        background: linear-gradient(180deg, #c94e4e, #b63d3d);
+        color: #fff7f7;
+      }
+
       .channel-list {
         display: grid;
         gap: 12px;
@@ -3645,7 +3792,7 @@ export function renderSettingsPage(input) {
         }
       }
 
-      @media (max-width: 767px) {
+      @media (max-width: 1024px) {
         .settings-sidebar,
         .settings-content {
           padding: 18px;
@@ -4163,15 +4310,16 @@ export function renderJobRunsPage(input) {
         storageDriver: input.storageDriver,
         loadEndpoint: input.loadEndpoint,
         accountId: input.currentAccountId,
-        headerTitle: input.headerTitle ?? "Job runs.",
+        headerTitle: input.headerTitle ?? "Render runs.",
         initialGroupBy: input.initialGroupBy ?? "tracer-route",
         methodScope: input.methodScope ?? "post"
     };
     const usesEditorChrome = Boolean(input.editorChrome);
     const editorChromeMarkup = input.editorChrome ? renderTemplateEditorChrome(input.editorChrome) : "";
     return shell({
-        title: input.pageTitle ?? (resolveAccountDisplayName({ displayName: input.name, email: input.email }) || "Job Runs"),
+        title: input.pageTitle ?? (resolveAccountDisplayName({ displayName: input.name, email: input.email }) || "Render Runs"),
         mainClass: "is-wide",
+        bodyClass: usesEditorChrome ? "is-editor-theme" : undefined,
         style: `
       ${usesEditorChrome ? TEMPLATE_EDITOR_SHELL_STYLES : ""}
 
@@ -4890,11 +5038,31 @@ export function renderJobRunsPage(input) {
       }
 
       .history-media-modal-source {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        border: 0;
+        background: transparent;
         color: #617087;
         font-size: 0.82rem;
         font-weight: 800;
+        font-family: inherit;
         text-decoration: underline;
         text-underline-offset: 0.14em;
+        cursor: pointer;
+      }
+
+      .history-media-modal-source svg {
+        width: 16px;
+        height: 16px;
+      }
+
+      .history-media-modal-source[data-state="done"] {
+        color: #2f7d4f;
+      }
+
+      .history-media-modal-source[data-state="error"] {
+        color: #a14444;
       }
 
       .history-media-modal-title {
@@ -5404,7 +5572,7 @@ export function renderJobRunsPage(input) {
         <div class="frame-body frame-body-start">
           <section class="job-runs-shell page-content-start">
             <section class="history-toolbar">
-              <h1 class="history-title">${escapeHtml(input.headerTitle ?? "Job runs.")}</h1>
+              <h1 class="history-title">${escapeHtml(input.headerTitle ?? "Render runs.")}</h1>
               <div class="history-toolbar-shell">
                 <div class="history-toolbar-group">
                   <div class="label-group history-quick-filter">
@@ -5425,8 +5593,8 @@ export function renderJobRunsPage(input) {
                           <input id="history-end-time" type="datetime-local" data-history-end-time />
                         </div>
                         <div class="label-group">
-                          <label for="history-template-id">Template ID</label>
-                          <input id="history-template-id" type="search" autocomplete="off" spellcheck="false" placeholder="vidfarm_template_character_cards" data-history-template-id />
+                          <label for="history-template-id">Composition ID</label>
+                          <input id="history-template-id" type="search" autocomplete="off" spellcheck="false" placeholder="primitive:timeline_render" data-history-template-id />
                         </div>
                         <div class="label-group">
                           <label for="history-tracer-query">Tracer contains</label>
@@ -5453,6 +5621,10 @@ export function renderJobRunsPage(input) {
           <div class="history-media-modal-head">
             <p id="history-media-modal-title" class="history-media-modal-title">Output preview</p>
             <div class="history-media-modal-actions">
+              <button type="button" class="history-media-modal-source" data-history-media-copy aria-label="Copy media URL" title="Copy link">
+                <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M8.4 11.6a3.2 3.2 0 0 0 4.5 0l2.2-2.2a3.2 3.2 0 0 0-4.5-4.5L9.4 6.1"></path><path d="M11.6 8.4a3.2 3.2 0 0 0-4.5 0L4.9 10.6a3.2 3.2 0 0 0 4.5 4.5l1.2-1.2"></path></svg>
+                <span data-history-media-copy-label>Copy link</span>
+              </button>
               <a class="history-media-modal-source" data-history-media-source href="#" target="_blank" rel="noreferrer">Open source</a>
               <button type="button" class="history-filter-button" data-history-media-close>Close</button>
             </div>
@@ -5512,6 +5684,8 @@ export function renderJobRunsPage(input) {
             mediaModalBody: document.querySelector("[data-history-media-body]"),
             mediaModalTitle: document.getElementById("history-media-modal-title"),
             mediaModalSource: document.querySelector("[data-history-media-source]"),
+            mediaModalCopy: document.querySelector("[data-history-media-copy]"),
+            mediaModalCopyLabel: document.querySelector("[data-history-media-copy-label]"),
             httpModal: document.querySelector("[data-history-http-modal]"),
             httpModalHead: document.querySelector("[data-history-http-modal-head]"),
             httpModalBody: document.querySelector("[data-history-http-modal-body]"),
@@ -5664,8 +5838,8 @@ export function renderJobRunsPage(input) {
                             '<input id="history-end-time" type="datetime-local" data-history-end-time />' +
                           '</div>' +
                           '<div class="label-group">' +
-                            '<label for="history-template-id">Template ID</label>' +
-                            '<input id="history-template-id" type="search" autocomplete="off" spellcheck="false" placeholder="vidfarm_template_character_cards" data-history-template-id />' +
+                            '<label for="history-template-id">Composition ID</label>' +
+                            '<input id="history-template-id" type="search" autocomplete="off" spellcheck="false" placeholder="primitive:timeline_render" data-history-template-id />' +
                           '</div>' +
                           '<div class="label-group">' +
                             '<label for="history-tracer-query">Tracer contains</label>' +
@@ -5921,6 +6095,13 @@ export function renderJobRunsPage(input) {
             if (elements.mediaModalSource instanceof HTMLAnchorElement) {
               elements.mediaModalSource.href = url;
             }
+            if (elements.mediaModalCopy instanceof HTMLButtonElement && elements.mediaModalCopyLabel instanceof HTMLElement) {
+              elements.mediaModalCopy.dataset.url = url;
+              elements.mediaModalCopy.removeAttribute("data-state");
+              elements.mediaModalCopy.setAttribute("aria-label", "Copy media URL");
+              elements.mediaModalCopy.setAttribute("title", "Copy link");
+              elements.mediaModalCopyLabel.textContent = "Copy link";
+            }
             if (kind === "image") {
               elements.mediaModalBody.innerHTML = '<img src="' + escapeHtml(url) + '" alt="' + escapeHtml(label || "Output preview") + '" />';
             } else if (kind === "video") {
@@ -5943,15 +6124,53 @@ export function renderJobRunsPage(input) {
             if (elements.mediaModalSource instanceof HTMLAnchorElement) {
               elements.mediaModalSource.href = "#";
             }
+            if (elements.mediaModalCopy instanceof HTMLButtonElement && elements.mediaModalCopyLabel instanceof HTMLElement) {
+              elements.mediaModalCopy.dataset.url = "";
+              elements.mediaModalCopy.removeAttribute("data-state");
+              elements.mediaModalCopy.setAttribute("aria-label", "Copy media URL");
+              elements.mediaModalCopy.setAttribute("title", "Copy link");
+              elements.mediaModalCopyLabel.textContent = "Copy link";
+            }
             elements.mediaModalBody.innerHTML = "";
           }
 
+          async function copyMediaModalUrl() {
+            if (!(elements.mediaModalCopy instanceof HTMLButtonElement) || !(elements.mediaModalCopyLabel instanceof HTMLElement)) {
+              return;
+            }
+            const url = elements.mediaModalCopy.dataset.url || "";
+            if (!url) {
+              return;
+            }
+            try {
+              const copied = await copyText(url);
+              elements.mediaModalCopy.setAttribute("data-state", copied ? "done" : "error");
+              elements.mediaModalCopy.setAttribute("aria-label", copied ? "Media URL copied" : "Unable to copy media URL");
+              elements.mediaModalCopy.setAttribute("title", copied ? "Copied" : "Copy failed");
+              elements.mediaModalCopyLabel.textContent = copied ? "Copied" : "Copy failed";
+            } catch {
+              elements.mediaModalCopy.setAttribute("data-state", "error");
+              elements.mediaModalCopy.setAttribute("aria-label", "Unable to copy media URL");
+              elements.mediaModalCopy.setAttribute("title", "Copy failed");
+              elements.mediaModalCopyLabel.textContent = "Copy failed";
+            }
+            window.setTimeout(() => {
+              if (!(elements.mediaModalCopy instanceof HTMLButtonElement) || !(elements.mediaModalCopyLabel instanceof HTMLElement)) {
+                return;
+              }
+              elements.mediaModalCopy.removeAttribute("data-state");
+              elements.mediaModalCopy.setAttribute("aria-label", "Copy media URL");
+              elements.mediaModalCopy.setAttribute("title", "Copy link");
+              elements.mediaModalCopyLabel.textContent = "Copy link";
+            }, 1400);
+          }
+
           function renderLinkedJob(entry) {
             if (!entry.linkedJob) {
               return '<section class="history-linked-job">' +
                 '<div class="history-linked-job-copy">' +
-                  '<h3 class="history-linked-job-title">Queued job</h3>' +
-                  '<div class="history-linked-job-meta">No linked job record was found for this POST response.</div>' +
+                  '<h3 class="history-linked-job-title">Queued render</h3>' +
+                  '<div class="history-linked-job-meta">No linked render record was found for this POST response.</div>' +
                 '</div>' +
               '</section>';
             }
@@ -5961,18 +6180,18 @@ export function renderJobRunsPage(input) {
             const timing = finishedAt
               ? 'Finished ' + escapeHtml(finishedAt)
               : 'Progress ' + escapeHtml(Math.round((Number(job.progress) || 0) * 100)) + '%';
-            const isPending = job.status === "queued" || job.status === "running" || job.status === "waiting_for_child" || job.status === "waiting_for_human";
+            const isPending = ["queued", "running", "waiting_for_provider", "waiting_for_child", "waiting_for_human"].includes(job.status);
 
             return '<section class="history-linked-job">' +
               '<div class="history-linked-job-head">' +
                 '<div class="history-linked-job-copy">' +
-                  '<h3 class="history-linked-job-title">Linked job output</h3>' +
-                  '<div class="history-linked-job-meta">' + escapeHtml(job.job_id) + ' · ' + escapeHtml(job.template_id) + ' / ' + escapeHtml(job.operation_name) + '</div>' +
+                  '<h3 class="history-linked-job-title">Linked render output</h3>' +
+                  '<div class="history-linked-job-meta">' + escapeHtml(job.job_id) + ' · composition ' + escapeHtml(job.template_id) + ' / action ' + escapeHtml(job.operation_name) + '</div>' +
                 '</div>' +
                 '<div class="history-status-actions">' +
-                  (isPending ? '<button type="button" class="history-check-button" data-history-check="' + escapeHtml(job.job_id) + '">Check job status</button>' : '') +
+                  (isPending ? '<button type="button" class="history-check-button" data-history-check="' + escapeHtml(job.job_id) + '">Check render status</button>' : '') +
                   '<div class="history-card-meta">' +
-                  '<span class="history-chip">Job ' + escapeHtml(job.status) + '</span>' +
+                  '<span class="history-chip">Render ' + escapeHtml(job.status) + '</span>' +
                   '<span class="history-chip">' + timing + '</span>' +
                   '</div>' +
                 '</div>' +
@@ -6085,10 +6304,10 @@ export function renderJobRunsPage(input) {
           function renderEntry(entry) {
             const tracer = entry.tracer ? '<span class="history-chip">Tracer: ' + escapeHtml(entry.tracer) + '</span>' : "";
             const linkedJob = entry.linkedJob
-              ? '<span class="history-chip">Job ' + escapeHtml(entry.linkedJob.status) + '</span>'
-              : (entry.jobId ? '<span class="history-chip">Job pending link</span>' : "");
+              ? '<span class="history-chip">Render ' + escapeHtml(entry.linkedJob.status) + '</span>'
+              : (entry.jobId ? '<span class="history-chip">Render pending link</span>' : "");
             const editorLink = editorHref(entry)
-              ? '<a class="history-action-link" href="' + escapeHtml(editorHref(entry)) + '" target="_blank" rel="noreferrer" data-history-editor-link>Editor</a>'
+              ? '<a class="history-action-link" href="' + escapeHtml(editorHref(entry)) + '" target="_blank" rel="noreferrer" data-history-editor-link>Workspace</a>'
               : "";
             const focusedBody = state.isFocusedRecordView
               ? '<div class="history-card-body">' +
@@ -6139,7 +6358,7 @@ export function renderJobRunsPage(input) {
             syncToolbar();
 
             if (state.isLoading) {
-              elements.groups.innerHTML = '<div class="history-empty">Loading job runs...</div>';
+              elements.groups.innerHTML = '<div class="history-empty">Loading render runs...</div>';
               return;
             }
 
@@ -6152,7 +6371,7 @@ export function renderJobRunsPage(input) {
             if (!visibleEntries.length) {
               elements.groups.innerHTML = '<div class="history-empty">' + (
                 state.isFocusedRecordView
-                  ? 'That log record could not be found. <button type="button" class="history-toolbar-back" data-history-back>Back to all job runs</button>'
+                  ? 'That log record could not be found. <button type="button" class="history-toolbar-back" data-history-back>Back to all render runs</button>'
                   : (state.methodScope === "all" ? 'No API calls matched the current filter.' : 'No POST API calls matched the current filter.')
               ) + '</div>';
               return;
@@ -6275,7 +6494,7 @@ export function renderJobRunsPage(input) {
             } catch (error) {
               console.error(error);
               state.isLoading = false;
-              elements.groups.innerHTML = '<div class="history-empty">Unable to load job runs.</div>';
+              elements.groups.innerHTML = '<div class="history-empty">Unable to load render runs.</div>';
             } finally {
               if (button) {
                 button.disabled = false;
@@ -6359,6 +6578,12 @@ export function renderJobRunsPage(input) {
               closeMediaModal();
               return;
             }
+            const modalCopy = target.closest("[data-history-media-copy]");
+            if (modalCopy instanceof HTMLButtonElement) {
+              event.preventDefault();
+              void copyMediaModalUrl();
+              return;
+            }
             const httpModalClose = target.closest("[data-history-http-close]");
             if (httpModalClose instanceof HTMLButtonElement) {
               event.preventDefault();
@@ -6569,12 +6794,12 @@ export function renderLibraryPage(input) {
         userId: input.userId
     };
     return shell({
-        title: resolveAccountDisplayName({ displayName: input.name, email: input.email }) || "Library",
+        title: resolveAccountDisplayName({ displayName: input.name, email: input.email }) || "Published renders",
         mainClass: "is-wide",
         style: `
       ${TEMPLATE_EDITOR_SHELL_STYLES}
 
-      .library-frame { padding-right: 432px; }
+      .library-frame { padding-left: 432px; }
       .library-body, .library-shell, .library-list-shell { min-height: 0; }
       .library-shell { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px; }
       .library-toolbar {
@@ -6781,13 +7006,13 @@ export function renderLibraryPage(input) {
       .library-empty { display: grid; place-items: center; min-height: 260px; border: 1px dashed rgba(191, 164, 109, 0.36); border-radius: 18px; color: #617087; background: rgba(255,252,247,.62); }
       ${renderReadyPostScheduleStyles()}
       @media (max-width: 1180px) {
-        .library-frame { padding-right: 0; }
+        .library-frame { padding-left: 0; }
         .editor-right-rail { position: relative; width: 100%; height: 560px; margin-top: 14px; border-radius: 24px; overflow: hidden; }
         .library-post { grid-template-columns: auto 132px minmax(0, 1fr); }
         .library-post-actions { grid-column: 3; justify-content: flex-start; }
         .library-post[data-collapsed="true"] .library-post-actions { grid-column: auto; }
       }
-      @media (max-width: 767px) {
+      @media (max-width: 1024px) {
         .library-toolbar {
           display: flex !important;
           align-items: center;
@@ -6864,7 +7089,7 @@ export function renderLibraryPage(input) {
           grid-column: 3;
           grid-row: 2;
         }
-        .library-frame { padding-right: 0; }
+        .library-frame { padding-left: 0; }
         .editor-right-rail {
           position: fixed !important;
           inset: 0;
@@ -6982,15 +7207,15 @@ export function renderLibraryPage(input) {
         <div class="frame-body library-body">
           <section class="library-shell">
             <div class="library-toolbar">
-              <input class="library-search" data-library-search type="search" placeholder="Search finished posts" autocomplete="off">
-              <a class="button secondary library-history-link" href="${escapeAttribute(withAccountQuery("/job-runs", input.currentAccountId))}"><span class="library-history-full">Job Run History</span><span class="library-history-short">Runs</span></a>
+              <input class="library-search" data-library-search type="search" placeholder="Search published renders" autocomplete="off">
+              <a class="button secondary library-history-link" href="${escapeAttribute(withAccountQuery("/job-runs", input.currentAccountId))}"><span class="library-history-full">Render History</span><span class="library-history-short">Runs</span></a>
               <details class="library-options">
                 <summary>Options</summary>
                 <div class="library-options-panel">
                   <button type="button" class="secondary library-options-close" data-library-options-close aria-label="Close options">×</button>
                   <div class="label-group"><label for="library-start">Start date</label><input id="library-start" data-library-start type="date"></div>
                   <div class="label-group"><label for="library-end">End date</label><input id="library-end" data-library-end type="date"></div>
-                  <div class="label-group"><label for="library-template">Template ID</label><input id="library-template" data-library-template type="text" placeholder="template_0000"></div>
+                  <div class="label-group"><label for="library-template">Composition ID</label><input id="library-template" data-library-template type="text" placeholder="primitive:timeline_render"></div>
                   <div class="label-group"><label for="library-tracer">Tracer contains</label><input id="library-tracer" data-library-tracer type="text" placeholder="launch-run"></div>
                 </div>
               </details>
@@ -6998,7 +7223,7 @@ export function renderLibraryPage(input) {
             </div>
             <div class="library-list-shell">
               <ul class="library-list" data-library-list></ul>
-              <div class="library-empty" data-library-empty hidden>No finished posts match these filters.</div>
+              <div class="library-empty" data-library-empty hidden>No published renders match these filters.</div>
             </div>
           </section>
         </div>
@@ -7135,7 +7360,7 @@ export function renderLibraryPage(input) {
             return '<li class="library-post" data-library-post-id="' + escapeHtml(post.post_id) + '" data-selected="' + (state.selected.has(post.post_id) ? "true" : "false") + '" data-collapsed="' + (isCollapsed ? "true" : "false") + '">' +
               '<input class="library-check" type="checkbox" data-library-check data-index="' + index + '" aria-label="Select post" ' + (state.selected.has(post.post_id) ? "checked" : "") + '>' +
               '<div class="library-phone">' + media + '</div>' +
-              '<div class="library-post-main"><h2 class="library-post-title">' + escapeHtml(post.title || "Ready post") + '</h2><div class="library-post-meta"><span>' + escapeHtml(post.status || "ready") + '</span>' + (post.template_id ? '<span>' + escapeHtml(post.template_id) + '</span>' : "") + (post.tracer ? '<span>' + escapeHtml(post.tracer) + '</span>' : "") + '<span>' + escapeHtml(compactDate(post.created_at)) + '</span></div>' +
+              '<div class="library-post-main"><h2 class="library-post-title">' + escapeHtml(post.title || "Published render") + '</h2><div class="library-post-meta"><span>' + escapeHtml(post.status || "ready") + '</span>' + (post.template_id ? '<span>Composition ' + escapeHtml(post.template_id) + '</span>' : "") + (post.tracer ? '<span>' + escapeHtml(post.tracer) + '</span>' : "") + '<span>' + escapeHtml(compactDate(post.created_at)) + '</span></div>' +
               '<details class="library-content-details"><summary>Content</summary><div class="library-content-box">Caption\\n' + escapeHtml(post.caption || "") + (post.pinned_comment ? '\\n\\nPinned comment\\n' + escapeHtml(post.pinned_comment) : "") + '</div></details></div>' +
               '<div class="library-post-actions"><button type="button" class="secondary library-row-toggle" data-library-row-toggle="' + escapeHtml(post.post_id) + '" aria-expanded="' + (isCollapsed ? "false" : "true") + '">' + (isCollapsed ? "Expand" : "Minimize") + '</button><a class="button secondary" href="' + escapeHtml(href) + '" target="_blank" rel="noreferrer">View Post</a><button type="button" data-schedule data-schedule-endpoint="' + escapeHtml(accountPath('/approved/posts/' + encodeURIComponent(post.post_id) + '/schedules')) + '">Schedule</button><button type="button" class="secondary library-menu-button" data-library-menu-button="' + escapeHtml(post.post_id) + '" aria-label="Post actions">...</button><div class="library-row-menu" data-library-row-menu="' + escapeHtml(post.post_id) + '" hidden><button type="button" data-library-copy-post-id="' + escapeHtml(post.post_id) + '">Copy post id</button><button type="button" data-library-copy-share-url="' + escapeHtml(href) + '">Copy share url</button><a href="' + escapeHtml(href) + '" target="_blank" rel="noreferrer">View post page</a><button type="button" data-danger="true" data-library-delete="' + escapeHtml(post.post_id) + '">Delete</button></div></div></li>';
           };
@@ -7282,6 +7507,54 @@ export function renderLibraryPage(input) {
     `
     });
 }
+export function renderChatPage(input) {
+    return shell({
+        title: resolveAccountDisplayName({ displayName: input.name, email: input.email }) || "Chat",
+        shellClass: "chat-page-stack",
+        mainClass: "is-chat-page",
+        style: `
+      ${TEMPLATE_EDITOR_SHELL_STYLES}
+
+      .app-shell.is-chat-page {
+        width: 100vw;
+        max-width: none;
+        height: 100dvh;
+        min-height: 100dvh;
+        padding: 0;
+      }
+      .page-stack.chat-page-stack {
+        height: 100%;
+        min-height: 0;
+        gap: 0;
+      }
+      .chat-page-root {
+        min-height: 0;
+        height: 100dvh;
+        display: grid;
+        min-width: 0;
+      }
+      .chat-page-root .editor-chat-panel {
+        height: 100%;
+        min-height: 0;
+        min-width: 0;
+        width: 100%;
+        border-radius: 0;
+        border-right: 0;
+      }
+    `,
+        body: `
+      <section class="chat-page-root">
+        <div class="editor-chat-panel" data-template-editor-chat-root></div>
+      </section>
+    `,
+        runtimeBoot: {
+            pageKind: "legacy",
+            title: "Chat",
+            userId: input.userId,
+            editorChat: input.editorChat ?? null
+        }
+    });
+}
 export function renderCalendarPage(input) {
     const calendarSeed = {
         channels: input.channels.map((channel) => ({
@@ -8104,7 +8377,7 @@ export function renderCalendarPage(input) {
         }
       }
 
-      @media (max-width: 767px) {
+      @media (max-width: 1024px) {
         .calendar-rail {
           padding: 14px;
           border-radius: 24px;
@@ -9062,3 +9335,4 @@ export function renderCalendarPage(input) {
     `
     });
 }
+//# sourceMappingURL=account-pages-legacy.js.map