@mevdragon/vidfarm-devcli 0.20.5 → 0.20.8

package/dist/src/reskin/settings-page.js

@@ -1,732 +0,0 @@
-// /reskin/settings — the flagship reskin, now MIGRATED to real production data.
-//
-// This is the reference for the /reskin/* UX migration: the renderer accepts the
-// SAME input object the live settings route already builds (via
-// `Parameters<typeof renderSettingsPage>[0]`), so the route wiring is just "fetch
-// real data + call this instead of the legacy renderer". Every form posts to the
-// REAL /settings/* endpoints with the correct account + ids, so profile save,
-// AI-key add/remove, FlockPoster connect, channel resend/delete, attachment
-// upload/delete, and wallet top-up all actually work. Design stays farmville
-// (shared rk-* primitives, isolated CSS); only the data + actions became real.
-import { reskinDocument, rkEscape } from "./document.js";
-const EYE = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg>`;
-const SEARCH_ICON = `<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>`;
-function money(n) {
-    const abs = Math.abs(n).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
-    return `${n < 0 ? "−" : ""}$${abs}`;
-}
-function fmtBytes(bytes) {
-    if (!bytes || bytes < 1024)
-        return `${bytes || 0} B`;
-    const units = ["KB", "MB", "GB"];
-    let v = bytes / 1024;
-    let i = 0;
-    while (v >= 1024 && i < units.length - 1) {
-        v /= 1024;
-        i++;
-    }
-    return `${v.toFixed(v >= 10 ? 0 : 1)} ${units[i]}`;
-}
-function fmtWhen(ms) {
-    if (!ms || ms <= 0)
-        return "";
-    try {
-        return new Date(ms).toLocaleString("en-US", { dateStyle: "medium", timeStyle: "short" });
-    }
-    catch {
-        return "";
-    }
-}
-function fmtDate(iso) {
-    const t = Date.parse(iso);
-    if (Number.isNaN(t))
-        return iso;
-    return new Date(t).toLocaleDateString("en-US", { month: "short", day: "numeric" });
-}
-function walletEventTitle(e) {
-    if (e.entity_type === "wallet_funding_event")
-        return "Wallet top-up";
-    if (e.cost_center_slug === "hyperframes_lambda" || e.cost_center_slug === "remotion_lambda")
-        return "Timeline render usage";
-    if (e.cost_center_slug === "wallet_funding")
-        return "Wallet funding";
-    if (e.cost_center_slug) {
-        return e.cost_center_slug.split(/[_-]+/g).filter(Boolean)
-            .map((p) => p.charAt(0).toUpperCase() + p.slice(1)).join(" ");
-    }
-    return "Usage charge";
-}
-export function renderReskinSettings(input) {
-    const acct = `<input type="hidden" name="account" value="${rkEscape(input.currentAccountId)}" />`;
-    const displayName = input.name ?? "";
-    const activeTab = input.activeTab || "profile";
-    const flash = input.error
-        ? `<div class="rk-notice rk-notice-err rk-set-flash">${rkEscape(input.error)}</div>`
-        : input.notice
-            ? `<div class="rk-notice rk-notice-ok rk-set-flash">${rkEscape(input.notice)}</div>`
-            : "";
-    // ---- Profile ----
-    const attachmentCards = input.attachments.length
-        ? input.attachments.map((a) => {
-            const ext = (a.fileName.split(".").pop() || a.contentType.split("/").pop() || "file").toUpperCase().slice(0, 4);
-            return `
-    <div class="rk-item">
-      <span class="rk-tile rk-tile-txt rk-tile-sky">${rkEscape(ext)}</span>
-      <div class="rk-item-main">
-        <div class="rk-item-title">${rkEscape(a.fileName)}</div>
-        <div class="rk-item-sub">${rkEscape(fmtBytes(a.sizeBytes))} · added ${rkEscape(fmtDate(a.createdAt))}</div>
-      </div>
-      <a class="rk-btn rk-btn-ghost rk-btn-sm" href="${rkEscape(a.viewUrl)}" target="_blank" rel="noreferrer">Open</a>
-      <form method="post" action="/settings/attachments/${encodeURIComponent(a.id)}/delete" data-rk-confirm="Delete ${rkEscape(a.fileName)}?" style="display:inline">
-        ${acct}
-        <button class="rk-btn rk-btn-danger rk-btn-sm" type="submit">Remove</button>
-      </form>
-    </div>`;
-        }).join("")
-        : `<p class="rk-muted rk-set-empty">No brand assets yet — upload logos, fonts, VO, or footage to reuse across projects.</p>`;
-    const profile = `
-  <div class="rk-card rk-set-panel-card">
-    <div class="rk-card-head">
-      <span class="rk-eyebrow">Profile</span>
-      <h2>Profile, notes &amp; attachments</h2>
-      <p class="rk-muted">The product description powers Swipe mode's auto-recut. Attachments are your reusable brand assets.</p>
-    </div>
-    <form class="rk-stack" method="post" action="/settings/profile">
-      ${acct}
-      <input type="hidden" name="groupchat_url" value="${rkEscape(input.groupchatUrl ?? "")}" />
-      <div class="rk-field">
-        <label class="rk-label" for="rk-name">Display name</label>
-        <input class="rk-input" id="rk-name" type="text" name="display_name" value="${rkEscape(displayName)}" />
-      </div>
-      <div class="rk-field">
-        <label class="rk-label" for="rk-about">Product description</label>
-        <textarea class="rk-textarea" id="rk-about" name="about" placeholder="What it is, who it's for, the promise…">${rkEscape(input.about ?? "")}</textarea>
-        <span class="rk-hint">Swipe mode reads this to auto-recut templates into ads for you.</span>
-      </div>
-      <div class="rk-row">
-        <button class="rk-btn rk-btn-ink" type="submit">Save changes</button>
-        <span class="rk-hint">Signed in as ${rkEscape(input.email)}</span>
-      </div>
-    </form>
-  </div>
-  <div class="rk-card rk-set-panel-card rk-set-myfiles">
-    <div class="rk-card-head">
-      <span class="rk-eyebrow">My Files</span>
-      <h2>Your files</h2>
-      <p class="rk-muted">Your private library — logos, fonts, VO, footage, and notes. Open <b>My Files</b> or <b>Temp</b> below and browse into folders.</p>
-    </div>
-    <form method="post" action="/settings/attachments" enctype="multipart/form-data" class="rk-stack rk-set-upload" data-rk-upload>
-      ${acct}
-      <label class="rk-set-drop" for="rk-files">
-        <div><strong>Choose files</strong> to upload — logos, fonts, VO, footage.</div>
-        <input class="rk-set-file" id="rk-files" type="file" name="files" multiple />
-      </label>
-      <div class="rk-row"><button class="rk-btn rk-btn-gold rk-btn-sm" type="submit" data-rk-upload-btn>Upload files</button></div>
-    </form>
-    <div class="rk-set-explorer" data-rk-fx>
-      <div class="rk-aichat-crumbs rk-set-fx-crumbs" data-rk-fx-crumbs aria-label="Current folder"></div>
-      <div class="rk-set-fx-body" data-rk-fx-body></div>
-    </div>
-  </div>`;
-    // ---- Wallet ----
-    const walletBalance = input.wallet.unavailableReason
-        ? `<div class="rk-notice rk-notice-err">${rkEscape(input.wallet.unavailableReason)}</div>`
-        : `<div class="rk-stat-num rk-set-balance-num">${money(input.wallet.balanceUsd)}</div>
-       <p class="rk-muted">Available balance${input.wallet.updatedAtMs > 0 ? ` · updated ${rkEscape(fmtWhen(input.wallet.updatedAtMs))}` : ""}</p>`;
-    const historyRows = input.walletEvents.unavailableReason
-        ? `<div class="rk-notice rk-notice-err">${rkEscape(input.walletEvents.unavailableReason)}</div>`
-        : input.walletEvents.events.length
-            ? input.walletEvents.events.map((e) => {
-                const credit = e.entity_type === "wallet_funding_event" || e.amount_usd > 0;
-                const sub = [e.cost_center_slug || e.entity_type, e.job_id, e.tracer].filter(Boolean).join(" · ");
-                return `
-    <div class="rk-item">
-      <span class="rk-tile rk-tile-sm rk-tile-txt ${credit ? "rk-tile-green" : "rk-tile-ink"}">${credit ? "+" : "−"}</span>
-      <div class="rk-item-main">
-        <div class="rk-item-title">${rkEscape(walletEventTitle(e))}</div>
-        <div class="rk-item-sub">${rkEscape(sub)} · ${rkEscape(fmtWhen(e.occurred_at_ms))}</div>
-      </div>
-      <div class="rk-set-amount ${credit ? "is-credit" : ""}">${money(e.amount_usd)}</div>
-    </div>`;
-            }).join("")
-            : `<p class="rk-muted rk-set-empty">No wallet activity yet.</p>`;
-    const wallet = `
-  <div class="rk-stack rk-set-panel">
-    <div class="rk-card rk-set-balance">
-      <span class="rk-eyebrow">Wallet</span>
-      ${walletBalance}
-      <div class="rk-row rk-wrap rk-set-balance-cta">
-        <button class="rk-btn rk-btn-gold" type="button" data-rk-topup>Top up wallet <span class="rk-arrow">→</span></button>
-      </div>
-      <div class="rk-hint rk-set-topup-status" data-rk-topup-status hidden></div>
-    </div>
-    <div class="rk-card">
-      <div class="rk-card-head">
-        <span class="rk-eyebrow">Ledger</span>
-        <h2>Transparent billing history</h2>
-        <p class="rk-muted">Every render and top-up, itemized. You're only charged for compute — BYO AI keys are never billed.</p>
-      </div>
-      <div class="rk-list">${historyRows}</div>
-    </div>
-  </div>`;
-    // ---- Channels ----
-    // Mirrors the live /settings#channels ordering: topline heading + Connect
-    // button + "…" menu (Add Email Channel), then a channel search, then the
-    // channel list. The FlockPoster key + email channel forms live in dialogs.
-    const emailCards = input.emailChannels.map((ch) => {
-        const status = ch.status || "Pending";
-        const statusPill = /connect|active|verified/i.test(status) ? "rk-pill-green" : "rk-pill-gold";
-        const hay = [ch.title, ch.platform || "email", ch.handle].filter(Boolean).join(" ").toLowerCase();
-        return `<div class="rk-item" data-rk-channel-hay="${rkEscape(hay)}">
-      <span class="rk-tile rk-tile-txt rk-tile-sky">${rkEscape((ch.platform || "E").charAt(0).toUpperCase())}</span>
-      <div class="rk-item-main">
-        <div class="rk-item-title">${rkEscape(ch.title)}</div>
-        <div class="rk-item-sub">${rkEscape(ch.platform || "Email")} · ${rkEscape(ch.handle || "")}</div>
-      </div>
-      <span class="rk-pill ${statusPill}">${rkEscape(status)}</span>
-      <form method="post" action="/settings/channels/email/${encodeURIComponent(ch.rawId ?? "")}/resend" style="display:inline">${acct}<button class="rk-btn rk-btn-ghost rk-btn-sm" type="submit">Resend</button></form>
-      <form method="post" action="/settings/channels/email/${encodeURIComponent(ch.rawId ?? "")}/delete" data-rk-confirm="Remove this channel?" style="display:inline">${acct}<button class="rk-btn rk-btn-danger rk-btn-sm" type="submit">Remove</button></form>
-    </div>`;
-    }).join("");
-    const flockCards = input.flockposterChannels.map((ch) => {
-        const status = ch.status || "Connected";
-        const tint = /tiktok/i.test(ch.platform || "") ? "rk-tile-ink" : /insta/i.test(ch.platform || "") ? "rk-tile-coral" : "rk-tile-sky";
-        const hay = [ch.title, ch.platform, ch.handle].filter(Boolean).join(" ").toLowerCase();
-        return `<div class="rk-item" data-rk-channel-hay="${rkEscape(hay)}">
-      <span class="rk-tile rk-tile-txt ${tint}">${rkEscape((ch.platform || "F").charAt(0).toUpperCase())}</span>
-      <div class="rk-item-main">
-        <div class="rk-item-title">${rkEscape(ch.title)}</div>
-        <div class="rk-item-sub">${rkEscape(ch.platform || "")} · ${rkEscape(ch.handle || "")}</div>
-      </div>
-      <span class="rk-pill rk-pill-green">${rkEscape(status)}</span>
-    </div>`;
-    }).join("");
-    const channelCards = flockCards + emailCards;
-    const channelCount = input.emailChannels.length + input.flockposterChannels.length;
-    const hasFlockKey = Boolean(input.flockposterApiKey);
-    const channels = `
-  <div class="rk-stack rk-set-panel">
-    ${input.flockposterChannelsError ? `<div class="rk-notice rk-notice-err">${rkEscape(input.flockposterChannelsError)}</div>` : ""}
-    <div class="rk-card">
-      <div class="rk-spread rk-set-channels-topline">
-        <div class="rk-card-head rk-set-channels-headcopy">
-          <span class="rk-eyebrow">Channels</span>
-          <h2>${channelCount} connected channel${channelCount === 1 ? "" : "s"}</h2>
-          <p class="rk-muted">Where approved cuts get published. Connect via FlockPoster, or add an email destination.</p>
-        </div>
-        <div class="rk-row rk-set-channels-actions">
-          <button class="rk-btn rk-btn-gold rk-btn-sm" type="button" data-rk-open-flock>Connect</button>
-          <div class="rk-set-menu-wrap">
-            <button class="rk-btn rk-btn-ghost rk-btn-sm rk-set-menu-btn" type="button" data-rk-channel-menu aria-expanded="false" aria-label="More channel actions">…</button>
-            <div class="rk-set-menu" data-rk-channel-menu-pop hidden>
-              <button type="button" data-rk-open-email>Add Email Channel</button>
-            </div>
-          </div>
-        </div>
-      </div>
-      <label class="rk-set-chsearch">
-        <span class="rk-set-chsearch-ic" aria-hidden="true">${SEARCH_ICON}</span>
-        <input class="rk-input" data-rk-channel-search type="search"
-          placeholder="${channelCount ? "Search channels by name, handle, or platform" : "Add an email channel or connect FlockPoster to search channels"}"
-          autocomplete="off" spellcheck="false" aria-label="Search channels"${channelCount ? "" : " disabled"} />
-      </label>
-      <div class="rk-list" data-rk-channel-list>${channelCards || `<p class="rk-muted rk-set-empty">No channels connected yet.</p>`}</div>
-      <p class="rk-muted rk-set-empty" data-rk-channel-noresults hidden>No channels match your search.</p>
-    </div>
-  </div>
-  <dialog class="rk-set-dialog" data-rk-flock-dialog${input.openFlockPosterDialog ? ` data-rk-autoopen="1"` : ""}>
-    <form class="rk-set-dialog-form" method="post" action="/settings/channels/flockposter">
-      ${acct}
-      <div class="rk-card-head">
-        <span class="rk-eyebrow">FlockPoster settings</span>
-        <h3>FlockPoster API key</h3>
-        <p class="rk-muted">${hasFlockKey ? "Update the stored key and retest the connection before saving." : "Paste a FlockPoster API key to connect this workspace and load its channels."}</p>
-      </div>
-      <div class="rk-field">
-        <label class="rk-label" for="rk-fp">API key</label>
-        <div class="rk-input-group">
-          <input class="rk-input" id="rk-fp" type="password" name="flockposter_api_key" placeholder="${hasFlockKey ? "•••••••• (stored) — paste to replace" : "fp_live_…"}" autocomplete="off" />
-          <button class="rk-btn rk-btn-ghost rk-btn-sm" type="button" data-rk-reveal="rk-fp" aria-label="Show API key">${EYE}</button>
-        </div>
-        <span class="rk-hint">${hasFlockKey ? "The key stays hidden by default — changing it triggers a connection test on save." : "We test the key before storing it. If the connection succeeds, this tab loads your channels."}</span>
-      </div>
-      <div class="rk-set-dialog-actions">
-        <a class="rk-btn rk-btn-ghost rk-btn-sm" href="https://flockposter.com" target="_blank" rel="noreferrer">Visit App</a>
-        <button type="button" class="rk-btn rk-btn-ghost" data-rk-dialog-close>Close</button>
-        <button type="submit" class="rk-btn rk-btn-gold">${hasFlockKey ? "Save" : "Connect"} &amp; test</button>
-      </div>
-    </form>
-  </dialog>
-  <dialog class="rk-set-dialog" data-rk-email-dialog>
-    <form class="rk-set-dialog-form" method="post" action="/settings/channels/email">
-      ${acct}
-      <div class="rk-card-head">
-        <span class="rk-eyebrow">Email channel</span>
-        <h3>Add Email Channel</h3>
-        <p class="rk-muted">We'll send a consent confirmation before this email can be used for scheduled delivery.</p>
-      </div>
-      <div class="rk-field"><label class="rk-label" for="rk-em-title">Title</label><input class="rk-input" id="rk-em-title" name="title" required maxlength="160" placeholder="Client newsletter" /></div>
-      <div class="rk-field"><label class="rk-label" for="rk-em-addr">Email</label><input class="rk-input" id="rk-em-addr" name="email" type="email" required maxlength="320" placeholder="name@example.com" /></div>
-      <div class="rk-field"><label class="rk-label" for="rk-em-note">Note</label><textarea class="rk-textarea rk-set-email-note" id="rk-em-note" name="note" maxlength="2000" placeholder="Internal notes for team"></textarea></div>
-      <div class="rk-set-dialog-actions">
-        <button type="button" class="rk-btn rk-btn-ghost" data-rk-dialog-close>Close</button>
-        <button type="submit" class="rk-btn rk-btn-ink">Send confirmation</button>
-      </div>
-    </form>
-  </dialog>`;
-    // ---- Developer ----
-    const keyRows = input.providerKeys.length
-        ? input.providerKeys.map((k, i) => {
-            const id = `rk-pk-${i}`;
-            const tint = k.provider === "openai" ? "rk-tile-green" : k.provider === "gemini" ? "rk-tile-sky" : k.provider === "elevenlabs" ? "rk-tile-amber" : "rk-tile-violet";
-            const status = k.status || "active";
-            const lastUsed = k.last_used_at ? `used ${rkEscape(fmtDate(k.last_used_at))}` : "never used";
-            return `<div class="rk-item">
-      <span class="rk-tile rk-tile-txt ${tint}">${rkEscape((k.provider || "?").charAt(0).toUpperCase())}</span>
-      <div class="rk-item-main">
-        <div class="rk-item-title">${rkEscape(k.label || `${k.provider} key`)} <span class="rk-pill rk-pill-green">${rkEscape(status)}</span></div>
-        <div class="rk-item-sub"><span class="rk-mono" id="${id}" data-rk-secret="${rkEscape(k.secret)}">${"•".repeat(18)}</span> · ${rkEscape(k.provider)} · ${lastUsed}</div>
-      </div>
-      <button class="rk-btn rk-btn-ghost rk-btn-sm" type="button" data-rk-reveal-text="${id}" aria-label="Show key">${EYE}</button>
-      <form method="post" action="/settings/provider-keys/${encodeURIComponent(k.id)}/delete" data-rk-confirm="Remove this AI key?" style="display:inline">
-        ${acct}
-        <button class="rk-btn rk-btn-danger rk-btn-sm" type="submit">Remove</button>
-      </form>
-    </div>`;
-        }).join("")
-        : `<p class="rk-muted rk-set-empty">No AI keys yet — add one to enable clip tagging, recaption, and Swipe.</p>`;
-    const developer = `
-  <div class="rk-stack rk-set-panel">
-    <div class="rk-card">
-      <div class="rk-card-head">
-        <span class="rk-eyebrow">Developer</span>
-        <h2>Your vidfarm API key</h2>
-        <p class="rk-muted">Authenticates the <code>vidfarm</code> CLI and REST calls. Keep it secret.</p>
-      </div>
-      <div class="rk-field">
-        <div class="rk-input-group">
-          <input class="rk-input rk-mono" id="rk-vfkey" type="password" value="${rkEscape(input.vidfarmApiKey)}" readonly />
-          <button class="rk-btn rk-btn-ghost rk-btn-sm" type="button" data-rk-reveal="rk-vfkey" aria-label="Show key">${EYE}</button>
-          <button class="rk-btn rk-btn-ink rk-btn-sm" type="button" data-rk-copy="rk-vfkey">Copy</button>
-        </div>
-      </div>
-      <div class="rk-row rk-wrap rk-set-skillrow">
-        <button class="rk-btn rk-btn-ghost rk-btn-sm" type="button" data-rk-skill-copy data-rk-skill-content="${rkEscape(input.directorSkill || "")}">Copy Director SKILL.md</button>
-        <span class="rk-hint">The full REST + CLI playbook for driving vidfarm from an agent — one click, paste into your agent.</span>
-      </div>
-    </div>
-    <div class="rk-card">
-      <div class="rk-card-head">
-        <span class="rk-eyebrow">AI keys</span>
-        <h2>Bring your own AI Keys</h2>
-        <p class="rk-muted">Stored per workspace. OpenAI, Gemini, or OpenRouter power clip tagging, recaption, image/video generation, and Swipe — BYOK, never billed by vidfarm. <b>ElevenLabs is audio-only</b> (music, voiceover, transcription) and does <b>not</b> count as a qualified AI key — you still need one of the others for the core features. With no ElevenLabs key, music &amp; speech run on vidfarm's key and bill your wallet (<code>use_wallet_credits</code>).</p>
-      </div>
-      <div class="rk-list rk-set-keys">${keyRows}</div>
-      <form class="rk-set-addkey" method="post" action="/settings/provider-keys">
-        ${acct}
-        <div class="rk-grid rk-grid-3 rk-set-addkey-grid">
-          <div class="rk-field">
-            <label class="rk-label" for="rk-prov">Provider</label>
-            <select class="rk-select" id="rk-prov" name="provider">
-              <option value="openai">OpenAI</option><option value="gemini">Gemini</option><option value="openrouter">OpenRouter</option><option value="elevenlabs">ElevenLabs (audio only)</option>
-            </select>
-          </div>
-          <div class="rk-field">
-            <label class="rk-label" for="rk-prov-label">Label</label>
-            <input class="rk-input" id="rk-prov-label" name="label" placeholder="Optional" />
-          </div>
-          <div class="rk-field">
-            <label class="rk-label" for="rk-prov-secret">API key</label>
-            <input class="rk-input" id="rk-prov-secret" type="password" name="secret" placeholder="sk-…" />
-          </div>
-        </div>
-        <button class="rk-btn rk-btn-gold" type="submit">Add AI key</button>
-      </form>
-    </div>
-  </div>`;
-    // ---- Log out ----
-    const logout = `
-  <div class="rk-card rk-set-panel-card rk-set-logout">
-    <div class="rk-card-head">
-      <span class="rk-eyebrow">Session</span>
-      <h2>Log out</h2>
-      <p class="rk-muted">End this browser session. You'll need to sign back in as <b>${rkEscape(input.email)}</b> to return to your studio.</p>
-    </div>
-    <form method="post" action="/logout" class="rk-row rk-wrap rk-set-logout-actions">
-      ${acct}
-      <button class="rk-btn rk-btn-danger" type="submit">Log out</button>
-      <button class="rk-btn rk-btn-ghost" type="button" data-rk-tab="profile">Cancel</button>
-    </form>
-  </div>`;
-    const tab = (slug, label, danger = false) => `<button type="button" class="rk-side-item${danger ? " rk-side-item-danger" : ""}${slug === activeTab ? " is-active" : ""}" data-rk-tab="${slug}">${label}</button>`;
-    const body = `
-<main class="rk-container rk-page">
-  <div class="rk-page-head">
-    <h1 class="rk-h1">Settings</h1>
-    <p class="rk-sub">Manage your profile, wallet, publishing channels, and developer access.</p>
-  </div>
-  ${flash}
-  <div class="rk-shell">
-    <nav class="rk-side" aria-label="Settings sections">
-      ${tab("profile", "Profile")}
-      ${tab("wallet", "Wallet")}
-      ${tab("channels", "Channels")}
-      ${tab("developer", "Developer")}
-      <div class="rk-side-sep"></div>
-      <a class="rk-side-item" href="https://billing.stripe.com/p/login/fZecQubkxcwOgDuaEE" target="_blank" rel="noopener noreferrer">Subscription</a>
-      ${tab("logout", "Log out", true)}
-    </nav>
-    <div class="rk-set-panels">
-      <section class="rk-reveal" data-rk-panel="profile"${activeTab === "profile" ? "" : " hidden"}>${profile}</section>
-      <section class="rk-reveal" data-rk-panel="wallet"${activeTab === "wallet" ? "" : " hidden"}>${wallet}</section>
-      <section class="rk-reveal" data-rk-panel="channels"${activeTab === "channels" ? "" : " hidden"}>${channels}</section>
-      <section class="rk-reveal" data-rk-panel="developer"${activeTab === "developer" ? "" : " hidden"}>${developer}</section>
-      <section class="rk-reveal" data-rk-panel="logout" hidden>${logout}</section>
-    </div>
-  </div>
-</main>`;
-    const pageCss = `
-.rk-tile-txt{font-family:var(--rk-font-display);font-weight:700;font-size:14px;letter-spacing:.01em;line-height:1}
-.rk-tile-txt.rk-tile-sm{font-size:15px}
-.rk-set-flash{max-width:760px;margin-bottom:20px}
-.rk-set-panel-card,.rk-set-panel{max-width:760px}
-.rk-set-panel-card + .rk-set-panel-card{margin-top:20px}
-.rk-set-empty{padding:8px 2px}
-.rk-set-drop{display:flex;align-items:center;gap:14px;padding:20px;border:1.5px dashed var(--rk-border-strong);border-radius:var(--rk-r-2xl);background:var(--rk-n-50);font-size:14px;color:var(--rk-text-muted);cursor:pointer}
-.rk-set-drop:hover{border-color:var(--rk-gold-600);background:var(--rk-gold-tint)}
-.rk-set-file{margin-left:auto;font-size:13px;max-width:220px}
-.rk-set-attach{margin-top:4px}
-.rk-set-balance{display:grid;gap:10px;align-content:start}
-.rk-set-balance-num{font-size:var(--rk-text-5xl)}
-.rk-set-balance-cta{margin-top:6px}
-.rk-set-topup-status{margin-top:4px}
-.rk-set-amount{font-family:var(--rk-font-display);font-weight:700;font-size:15px;color:var(--rk-n-600);white-space:nowrap}
-.rk-set-amount.is-credit{color:#16a34a}
-.rk-set-keys{margin-bottom:20px}
-.rk-set-addkey{border-top:1px solid var(--rk-border);padding-top:20px;display:grid;gap:16px}
-.rk-set-addkey-grid{gap:14px}
-.rk-set-skillrow{margin-top:14px;padding-top:14px;border-top:1px solid var(--rk-border)}
-.rk-set-skillrow .rk-hint{flex:1;min-width:200px}
-
-/* log-out tab — danger-styled side item + a hairline separator above it */
-.rk-side-sep{height:1px;background:var(--rk-border);margin:8px 6px}
-@media(max-width:860px){.rk-side-sep{display:none}}
-.rk-side-item-danger{color:var(--rk-red)}
-.rk-side-item-danger:hover{background:var(--rk-red-tint);color:#b91c1c}
-.rk-side-item-danger.is-active{background:var(--rk-red-tint);color:#b91c1c}
-.rk-set-logout{max-width:760px}
-.rk-set-logout-actions{margin-top:2px}
-
-/* channels topline: heading left, Connect + "…" menu right (mirrors live) */
-.rk-set-channels-topline{align-items:flex-start;gap:16px}
-.rk-set-channels-headcopy{margin-bottom:14px;flex:1;min-width:0}
-.rk-set-channels-actions{flex:none;gap:8px}
-.rk-set-menu-wrap{position:relative}
-.rk-set-menu-btn{width:34px;padding:7px 0;font-weight:800;letter-spacing:.04em}
-.rk-set-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:20;min-width:190px;background:#fff;border:1px solid var(--rk-border);border-radius:var(--rk-r-xl);box-shadow:var(--rk-shadow-lg);padding:6px;display:grid}
-.rk-set-menu[hidden]{display:none}
-.rk-set-menu button{display:block;width:100%;text-align:left;padding:9px 12px;border:0;background:transparent;border-radius:var(--rk-r-md);font-family:var(--rk-font-body);font-size:13.5px;font-weight:600;color:var(--rk-n-700);cursor:pointer}
-.rk-set-menu button:hover{background:var(--rk-n-100);color:var(--rk-ink)}
-.rk-set-chsearch{position:relative;display:block;margin-bottom:14px}
-.rk-set-chsearch-ic{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--rk-n-400);pointer-events:none;display:flex}
-.rk-set-chsearch .rk-input{padding-left:38px;border-radius:var(--rk-r-full)}
-.rk-set-chsearch .rk-input:disabled{background:var(--rk-n-100);cursor:not-allowed}
-[data-rk-channel-hay][hidden]{display:none}
-
-/* shared dialog chrome (FlockPoster connect + email channel) */
-.rk-set-dialog{width:min(30rem,calc(100vw - 2rem));padding:0;border:1px solid var(--rk-border);border-radius:var(--rk-r-3xl);background:var(--rk-surface);box-shadow:var(--rk-shadow-xl)}
-.rk-set-dialog::backdrop{background:rgba(23,23,23,.34);backdrop-filter:blur(6px)}
-.rk-set-dialog-form{display:grid;gap:16px;margin:0;padding:26px}
-.rk-set-dialog-actions{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-top:2px}
-.rk-set-dialog-actions .rk-btn:first-child{margin-right:auto}
-.rk-set-email-note{min-height:76px}
-
-/* My Files — inline, always-open file explorer (reuses the chat panel's
-   rk-aichat-f* directory-nav visuals) with My Files + Temp as root folders */
-.rk-set-myfiles{display:grid;gap:16px}
-.rk-set-upload{flex:none}
-.rk-set-explorer{border:1px solid var(--rk-border);border-radius:var(--rk-r-2xl);background:var(--rk-n-50);overflow:hidden}
-.rk-set-fx-crumbs{padding:12px 14px 8px}
-.rk-set-fx-body{max-height:360px;min-height:120px;overflow-y:auto;padding:2px 10px 12px;display:grid;gap:2px;align-content:start}
-/* a revealed API key lives in .rk-item-sub (nowrap+ellipsis), so it truncates to
-   a few chars + "…". When shown (data-rk-shown=1), let that row wrap in full. */
-.rk-set-panel .rk-item-sub:has([data-rk-shown="1"]){white-space:normal;overflow:visible;overflow-wrap:anywhere}
-/* phone portrait: the channel / key rows pack tile + status pill + Resend +
-   Remove into one non-wrapping flex row that overflows the padded card and
-   forces horizontal page scroll. Let the actions wrap under the title. */
-@media(max-width:620px){
-  .rk-set-panel .rk-item{flex-wrap:wrap}
-  .rk-set-panel .rk-item .rk-item-main{flex:1 1 100%;order:-1}
-}
-/* very narrow: let the dialog footer buttons wrap instead of cramping */
-@media(max-width:420px){
-  .rk-set-dialog-actions{flex-wrap:wrap;gap:8px}
-  .rk-set-dialog-actions .rk-btn:first-child{margin-right:0}
-}
-`;
-    const script = `
-(function(){
-  var root=document;
-  // Each panel that has its own canonical URL (/settings/<tab>). "logout" is a
-  // client-only confirm panel, so it never rewrites the address bar.
-  var URL_TABS={profile:1,wallet:1,channels:1,developer:1};
-  function setUrl(tab){
-    if(!URL_TABS[tab]||!history.pushState)return;
-    try{
-      var u=new URL(window.location.href);
-      var m=u.pathname.match(/^(\\/u\\/[^/]+)\\/settings/); // preserve account scope
-      u.pathname=(m?m[1]:'')+'/settings/'+tab; u.hash='';
-      history.pushState(null,'',u.pathname+u.search);
-    }catch(e){ history.pushState(null,'','/settings/'+tab); }
-  }
-  function show(tab,opts){
-    root.querySelectorAll('[data-rk-tab]').forEach(function(b){b.classList.toggle('is-active',b.getAttribute('data-rk-tab')===tab)});
-    root.querySelectorAll('[data-rk-panel]').forEach(function(p){p.hidden=p.getAttribute('data-rk-panel')!==tab});
-    if(!opts||!opts.skipUrl)setUrl(tab);
-  }
-  root.querySelectorAll('[data-rk-tab]').forEach(function(btn){
-    btn.addEventListener('click',function(){show(btn.getAttribute('data-rk-tab'));});
-  });
-  function tabFromLocation(){
-    var m=(location.pathname||'').match(/\\/settings\\/([a-z]+)/);
-    if(m&&URL_TABS[m[1]])return m[1];
-    var hash=(location.hash||'').replace('#','');
-    return (hash&&URL_TABS[hash])?hash:null;
-  }
-  var initial=tabFromLocation();
-  if(initial&&root.querySelector('[data-rk-tab="'+initial+'"]'))show(initial,{skipUrl:true});
-  // Back/forward between settings tabs — reflect the path without pushing again.
-  window.addEventListener('popstate',function(){ show(tabFromLocation()||'profile',{skipUrl:true}); });
-  // reveal password inputs
-  root.querySelectorAll('[data-rk-reveal]').forEach(function(btn){
-    btn.addEventListener('click',function(){var el=root.getElementById(btn.getAttribute('data-rk-reveal'));if(el)el.type=el.type==='password'?'text':'password';});
-  });
-  // reveal masked secret text
-  root.querySelectorAll('[data-rk-reveal-text]').forEach(function(btn){
-    btn.addEventListener('click',function(){var el=root.getElementById(btn.getAttribute('data-rk-reveal-text'));if(!el)return;var real=el.getAttribute('data-rk-secret');var shown=el.getAttribute('data-rk-shown')==='1';el.textContent=shown?'\\u2022'.repeat(18):real;el.setAttribute('data-rk-shown',shown?'0':'1');});
-  });
-  // copy
-  root.querySelectorAll('[data-rk-copy]').forEach(function(btn){
-    btn.addEventListener('click',function(){var el=root.getElementById(btn.getAttribute('data-rk-copy'));if(!el||!navigator.clipboard)return;navigator.clipboard.writeText(el.value||el.textContent||'').then(function(){var t=btn.textContent;btn.textContent='Copied!';setTimeout(function(){btn.textContent=t;},1200);});});
-  });
-  // destructive form confirmations
-  root.querySelectorAll('form[data-rk-confirm]').forEach(function(f){
-    f.addEventListener('submit',function(e){if(!window.confirm(f.getAttribute('data-rk-confirm')||'Are you sure?'))e.preventDefault();});
-  });
-  // director skill — 1-click copy (content travels in the attribute, like live)
-  var skillCopy=root.querySelector('[data-rk-skill-copy]');
-  if(skillCopy){
-    skillCopy.addEventListener('click',function(){
-      var text=skillCopy.getAttribute('data-rk-skill-content')||'';
-      if(!navigator.clipboard)return;
-      navigator.clipboard.writeText(text).then(function(){
-        var t=skillCopy.textContent;skillCopy.textContent='Copied!';
-        setTimeout(function(){skillCopy.textContent=t;},1200);
-      });
-    });
-  }
-  // My Files — inline, always-open file explorer. Same directory-nav model as
-  // the chat pop panel: a single virtual root whose top-level entries are the
-  // "My Files" and "Temp" folders; navigate into them natively. Files open in
-  // a new tab (view URL); no drawer, no source tabs.
-  (function(){
-    var fx=root.querySelector('[data-rk-fx]');
-    if(!fx) return;
-    var crumbsEl=fx.querySelector('[data-rk-fx-crumbs]');
-    var bodyEl=fx.querySelector('[data-rk-fx-body]');
-    var ROOTS={
-      my_files:{url:'/api/v1/user/me/attachments',key:'attachments',label:'My Files'},
-      temp:{url:'/api/v1/user/me/temporary-files',key:'files',label:'Temp'},
-      raws:{url:'/raws/feed',key:'clips',label:'Raws'}
-    };
-    var VROOTS=[{key:'my_files',label:'My Files'},{key:'temp',label:'Temp'},{key:'raws',label:'Raws'}];
-    var st={root:'',path:{},data:{},status:{}};
-    VROOTS.forEach(function(v){ st.path[v.key]=''; st.data[v.key]=null; st.status[v.key]='idle'; });
-
-    function normFolder(v){ return String(v||'').split('/').map(function(s){return s.trim();}).filter(Boolean).join('/'); }
-    function normItem(raw){
-      // Handles attachments, temp files, AND raws/clips (which use clip_id +
-      // source_filename/description and carry no content_type/folder).
-      var id=raw.id||raw.attachment_id||raw.file_id||raw.clip_id||'';
-      var name=raw.fileName||raw.file_name||raw.source_filename||raw.title||raw.description||'';
-      var viewUrl=raw.viewUrl||raw.view_url||'';
-      if(!id||(!name&&!viewUrl)) return null;
-      if(!name) name=id;
-      var ct=raw.contentType||raw.content_type||'';
-      if(!ct&&(raw.clip_id||raw.file_path)) ct='video/mp4';
-      return {id:id,name:name,contentType:ct,viewUrl:viewUrl,
-        sizeBytes:typeof raw.sizeBytes==='number'?raw.sizeBytes:raw.size_bytes,folderPath:normFolder(raw.folderPath||raw.folder_path||'')};
-    }
-    function fmtBytes(b){ if(!b||b<=0) return ''; var u=['B','KB','MB','GB'],v=b,i=0; while(v>=1024&&i<u.length-1){v/=1024;i++;} return (v>=10||i===0?Math.round(v):v.toFixed(1))+' '+u[i]; }
-    function immediateFolders(data,current){
-      var cur=normFolder(current); var prefix=cur?cur+'/':''; var names={};
-      function consider(fp){ var n=normFolder(fp); if(!n||(cur&&n===cur)||n.indexOf(prefix)!==0) return; var child=n.slice(prefix.length).split('/')[0]; if(child) names[child]=prefix+child; }
-      (data.folders||[]).forEach(consider);
-      (data.items||[]).forEach(function(it){ consider(it.folderPath); });
-      return Object.keys(names).sort().map(function(n){ return {name:n,path:names[n]}; });
-    }
-    function loadRoot(rootKey,force){
-      if(!ROOTS[rootKey]) return;
-      if(!force&&st.status[rootKey]==='ready'){ render(); return; }
-      st.status[rootKey]='loading'; render();
-      fetch(ROOTS[rootKey].url,{credentials:'same-origin',headers:{accept:'application/json'}})
-        .then(function(r){ if(r.status===401||r.status===403){ st.status[rootKey]='auth'; return null; } if(!r.ok) throw new Error('http '+r.status); return r.json(); })
-        .then(function(j){ if(!j){ render(); return; } var raw=j[ROOTS[rootKey].key]||[]; var items=[]; for(var i=0;i<raw.length;i++){ var n=normItem(raw[i]); if(n) items.push(n); } st.data[rootKey]={items:items,folders:j.folders||[]}; st.status[rootKey]='ready'; render(); })
-        .catch(function(){ st.status[rootKey]='error'; render(); });
-    }
-    function stateNode(text,opts){
-      var wrap=document.createElement('div'); wrap.className='rk-aichat-fstate';
-      var p=document.createElement('div'); p.textContent=text; wrap.appendChild(p);
-      if(opts&&opts.href){ var a=document.createElement('a'); a.href=opts.href; a.textContent=opts.linkText||'Open'; wrap.appendChild(a); }
-      if(opts&&opts.retry){ var b=document.createElement('button'); b.type='button'; b.textContent='Try again'; b.addEventListener('click',function(){ loadRoot(st.root,true); }); wrap.appendChild(b); }
-      return wrap;
-    }
-    function folderRow(label,onOpen,sub){
-      var b=document.createElement('button'); b.type='button'; b.className='rk-aichat-frow';
-      var ic=document.createElement('span'); ic.className='rk-aichat-fic rk-aichat-fic-folder'; ic.textContent='/';
-      var main=document.createElement('span'); main.className='rk-aichat-fmain';
-      var name=document.createElement('span'); name.className='rk-aichat-fname'; name.textContent=label; main.appendChild(name);
-      if(sub){ var meta=document.createElement('span'); meta.className='rk-aichat-fmeta'; meta.textContent=sub; main.appendChild(meta); }
-      var chev=document.createElement('span'); chev.className='rk-aichat-fadd'; chev.textContent='Open \\u203a';
-      b.appendChild(ic); b.appendChild(main); b.appendChild(chev);
-      b.addEventListener('click',onOpen);
-      return b;
-    }
-    function vrootRow(v){
-      var sub=''; var s=st.status[v.key]; var d=st.data[v.key];
-      if(s==='ready'&&d) sub=d.items.length+(d.items.length===1?' file':' files');
-      else if(s==='loading') sub='Loading\\u2026'; else if(s==='auth') sub='Sign in to view';
-      return folderRow(v.label,function(){ enterRoot(v.key); },sub);
-    }
-    function fileRow(it){
-      var open=it.viewUrl?document.createElement('a'):document.createElement('div');
-      open.className='rk-aichat-frow';
-      if(it.viewUrl){ open.href=it.viewUrl; open.target='_blank'; open.rel='noopener'; }
-      var ic=document.createElement('span'); ic.className='rk-aichat-fic rk-aichat-fic-file';
-      if(it.viewUrl&&it.contentType.indexOf('image/')===0){ var img=document.createElement('img'); img.src=it.viewUrl; img.alt=''; img.loading='lazy'; ic.appendChild(img); }
-      else if(it.viewUrl&&it.contentType.indexOf('video/')===0){ var vid=document.createElement('video'); vid.src=it.viewUrl; vid.muted=true; vid.playsInline=true; ic.appendChild(vid); }
-      else { ic.textContent=(it.name.split('.').pop()||it.name.slice(0,1)).slice(0,3).toUpperCase(); }
-      var main=document.createElement('span'); main.className='rk-aichat-fmain';
-      var name=document.createElement('span'); name.className='rk-aichat-fname'; name.textContent=it.name;
-      var meta=document.createElement('span'); meta.className='rk-aichat-fmeta'; meta.textContent=fmtBytes(it.sizeBytes)||it.contentType||'file';
-      main.appendChild(name); main.appendChild(meta);
-      var add=document.createElement('span'); add.className='rk-aichat-fadd'; add.textContent=it.viewUrl?'Open \\u2197':'';
-      open.appendChild(ic); open.appendChild(main); open.appendChild(add);
-      return open;
-    }
-    function crumb(label,current,onClick){
-      var b=document.createElement('button'); b.type='button'; b.className='rk-aichat-crumb'+(current?' is-current':''); b.textContent=label; b.addEventListener('click',onClick); return b;
-    }
-    function crumbSep(){ var s=document.createElement('span'); s.className='rk-aichat-crumb-sep'; s.textContent='/'; return s; }
-    function renderCrumbs(){
-      crumbsEl.innerHTML='';
-      var atVirtual=!st.root;
-      crumbsEl.appendChild(crumb('Files',atVirtual,goVirtualRoot));
-      if(atVirtual) return;
-      if(st.status[st.root]!=='ready') return;
-      var cur=normFolder(st.path[st.root]);
-      crumbsEl.appendChild(crumbSep());
-      crumbsEl.appendChild(crumb(ROOTS[st.root].label,!cur,function(){ goPath(''); }));
-      var parts=cur.split('/').filter(Boolean); var acc='';
-      parts.forEach(function(part,idx){ crumbsEl.appendChild(crumbSep()); acc=acc?acc+'/'+part:part; var pth=acc; crumbsEl.appendChild(crumb(part,idx===parts.length-1,function(){ goPath(pth); })); });
-    }
-    var rendering=false;
-    function render(){ if(rendering) return; rendering=true; try{ renderInner(); } finally{ rendering=false; } }
-    function renderInner(){
-      renderCrumbs(); bodyEl.innerHTML='';
-      if(!st.root){
-        VROOTS.forEach(function(v){ if(st.status[v.key]==='idle') loadRoot(v.key,false); });
-        VROOTS.forEach(function(v){ bodyEl.appendChild(vrootRow(v)); });
-        return;
-      }
-      var s=st.status[st.root];
-      if(s==='idle'){ loadRoot(st.root,false); return; }
-      if(s==='loading'){ bodyEl.appendChild(stateNode('Loading your files\\u2026')); return; }
-      if(s==='auth'){ bodyEl.appendChild(stateNode('Sign in to browse your files.',{href:'/login',linkText:'Sign in'})); return; }
-      if(s==='error'){ bodyEl.appendChild(stateNode('Couldn\\u2019t reach your files.',{retry:true})); return; }
-      var data=st.data[st.root]||{items:[],folders:[]};
-      var cur=normFolder(st.path[st.root]);
-      var folders=immediateFolders(data,cur);
-      var here=data.items.filter(function(it){ return normFolder(it.folderPath)===cur; });
-      if(!folders.length&&!here.length){ bodyEl.appendChild(stateNode(cur?'This folder is empty.':'No files in '+ROOTS[st.root].label+' yet.')); return; }
-      folders.forEach(function(f){ bodyEl.appendChild(folderRow(f.name,function(){ goPath(f.path); })); });
-      here.forEach(function(it){ bodyEl.appendChild(fileRow(it)); });
-    }
-    function goPath(p){ st.path[st.root]=normFolder(p); render(); }
-    function goVirtualRoot(){ st.root=''; render(); }
-    function enterRoot(rootKey){ if(!ROOTS[rootKey]) return; st.root=rootKey; st.path[rootKey]=''; loadRoot(rootKey,false); render(); }
-    render();
-  })();
-  // channels: quick search filter
-  var chSearch=root.querySelector('[data-rk-channel-search]');
-  var chList=root.querySelector('[data-rk-channel-list]');
-  var chNone=root.querySelector('[data-rk-channel-noresults]');
-  if(chSearch&&chList){
-    chSearch.addEventListener('input',function(){
-      var q=(chSearch.value||'').trim().toLowerCase();
-      var shown=0;
-      chList.querySelectorAll('[data-rk-channel-hay]').forEach(function(row){
-        var ok=!q||(row.getAttribute('data-rk-channel-hay')||'').indexOf(q)>-1;
-        row.hidden=!ok;if(ok)shown++;
-      });
-      if(chNone)chNone.hidden=!(q&&shown===0);
-    });
-  }
-  // channels: "…" actions menu
-  var menuBtn=root.querySelector('[data-rk-channel-menu]');
-  var menuPop=root.querySelector('[data-rk-channel-menu-pop]');
-  if(menuBtn&&menuPop){
-    menuBtn.addEventListener('click',function(e){
-      e.stopPropagation();
-      var open=menuPop.hidden;
-      menuPop.hidden=!open;
-      menuBtn.setAttribute('aria-expanded',open?'true':'false');
-    });
-    root.addEventListener('click',function(e){
-      if(!menuPop.hidden&&!menuPop.contains(e.target)&&e.target!==menuBtn){menuPop.hidden=true;menuBtn.setAttribute('aria-expanded','false');}
-    });
-  }
-  // channel dialogs (FlockPoster connect + email channel)
-  function wireDialog(dlgSel,openSel){
-    var dlg=root.querySelector(dlgSel);
-    if(!dlg)return null;
-    root.querySelectorAll(openSel).forEach(function(btn){
-      btn.addEventListener('click',function(){
-        if(menuPop)menuPop.hidden=true;
-        if(typeof dlg.showModal==='function'&&!dlg.open)dlg.showModal();
-      });
-    });
-    dlg.addEventListener('click',function(e){
-      var r=dlg.getBoundingClientRect();
-      if(e.clientX<r.left||e.clientX>r.right||e.clientY<r.top||e.clientY>r.bottom)dlg.close();
-    });
-    dlg.querySelectorAll('[data-rk-dialog-close]').forEach(function(btn){btn.addEventListener('click',function(){dlg.close();});});
-    return dlg;
-  }
-  var flockDlg=wireDialog('[data-rk-flock-dialog]','[data-rk-open-flock]');
-  wireDialog('[data-rk-email-dialog]','[data-rk-open-email]');
-  if(flockDlg&&flockDlg.getAttribute('data-rk-autoopen')==='1'&&typeof flockDlg.showModal==='function'&&!flockDlg.open){flockDlg.showModal();}
-  // wallet top-up → real funding link
-  var topBtn=root.querySelector('[data-rk-topup]');
-  var topStatus=root.querySelector('[data-rk-topup-status]');
-  if(topBtn){
-    topBtn.addEventListener('click',function(){
-      topBtn.disabled=true;if(topStatus){topStatus.hidden=false;topStatus.textContent='Starting secure checkout…';}
-      fetch('/settings/wallet/funding-link',{method:'POST',headers:{'content-type':'application/json'},credentials:'same-origin',body:'{}'})
-        .then(function(r){return r.json();})
-        .then(function(j){if(j&&j.checkout_url){window.location.href=j.checkout_url;}else{throw new Error(j&&j.error||'Unable to start funding');}})
-        .catch(function(err){topBtn.disabled=false;if(topStatus){topStatus.hidden=false;topStatus.textContent=String(err.message||err);}});
-    });
-  }
-})();`;
-    return reskinDocument({
-        title: "vidfarm reskin — Settings",
-        description: "Vidfarm settings — profile, wallet, channels, developer.",
-        activeSlug: "settings",
-        account: { name: input.name, email: input.email },
-        pageCss,
-        body,
-        script
-    });
-}
-//# sourceMappingURL=settings-page.js.map