@mevdragon/vidfarm-devcli 0.16.0 → 0.18.0

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

@@ -0,0 +1,687 @@
+// /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" : "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 model keys</h2>
+        <p class="rk-muted">Stored per workspace. Used for clip tagging, recaption, and Swipe — never billed by vidfarm.</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="anthropic">Anthropic</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}
+`;
+    const script = `
+(function(){
+  var root=document;
+  function show(tab){
+    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(history.replaceState)history.replaceState(null,'','#'+tab);
+  }
+  root.querySelectorAll('[data-rk-tab]').forEach(function(btn){
+    btn.addEventListener('click',function(){show(btn.getAttribute('data-rk-tab'));});
+  });
+  var hash=(location.hash||'').replace('#','');
+  if(hash&&root.querySelector('[data-rk-tab="'+hash+'"]'))show(hash);
+  // 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'}
+    };
+    var VROOTS=[{key:'my_files',label:'My Files'},{key:'temp',label:'Temp'}];
+    var st={root:'',path:{my_files:'',temp:''},data:{my_files:null,temp:null},status:{my_files:'idle',temp:'idle'}};
+
+    function normFolder(v){ return String(v||'').split('/').map(function(s){return s.trim();}).filter(Boolean).join('/'); }
+    function normItem(raw){
+      var id=raw.id||raw.attachment_id||raw.file_id||''; var name=raw.fileName||raw.file_name||'';
+      if(!id||!name) return null;
+      return {id:id,name:name,contentType:raw.contentType||raw.content_type||'',viewUrl:raw.viewUrl||raw.view_url||'',
+        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",
+        pageCss,
+        body,
+        script
+    });
+}
+//# sourceMappingURL=settings-page.js.map