@mevdragon/vidfarm-devcli 0.17.0 → 0.18.1

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

@@ -1,68 +1,89 @@
-// /reskin/settings — the flagship reskin. Reference implementation for the
-// migration: shows how to port a real vidfarm page (the 4-tab Settings screen)
-// into the farmville design system using ONLY shared rk-* primitives + a small
-// page-scoped CSS block + a self-contained module script.
+// /reskin/settings — the flagship reskin, now MIGRATED to real production data.
 //
-// Renders with representative SAMPLE data so it can be viewed without auth. All
-// forms post to the REAL /settings/* endpoints, so the shape stays honest.
-// Faithfully mirrors src/account-pages-legacy.ts → renderSettingsPage:
-//   Profile (display name, about, attachments) · Wallet (balance, ledger) ·
-//   Channels (email + FlockPoster) · Developer (vidfarm key, AI provider keys).
+// 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 SAMPLE = {
-    name: "Dylan Vane",
-    email: "dylan@studio.co",
-    accountId: "acct_8f2a10",
-    isPaidPlan: true,
-    about: "Vidfarm makes short-form ads for DTC brands. Punchy hooks, UGC energy, captions that pop. Audience: founders & marketers who want to ship a week of content in an afternoon.",
-    vidfarmApiKey: "vf_live_9c41f0b7a2e84d6f8b3c9a1e",
-    wallet: { balanceUsd: 12.4, totalFundsAddedUsd: 40, totalChargeUsd: 27.6, updatedAt: "Jul 7, 2026, 4:12 PM" },
-    walletEvents: [
-        { title: "Wallet top-up", sub: "Visa ···· 4242", amountUsd: 20, when: "Jul 6", kind: "credit" },
-        { title: "Timeline render usage", sub: "HyperFrames Lambda · job_a91f", amountUsd: -1.8, when: "Jul 6", kind: "debit" },
-        { title: "Clip scan usage", sub: "clip_scan_lambda · 14 clips", amountUsd: -0.42, when: "Jul 5", kind: "debit" },
-        { title: "Timeline render usage", sub: "HyperFrames Lambda · job_77c2", amountUsd: -2.1, when: "Jul 4", kind: "debit" },
-        { title: "Wallet top-up", sub: "Visa ···· 4242", amountUsd: 20, when: "Jul 1", kind: "credit" }
-    ],
-    attachments: [
-        { fileName: "brand-guidelines.pdf", kind: "PDF", size: "2.4 MB", when: "Jul 2" },
-        { fileName: "logo-lockup.png", kind: "PNG", size: "184 KB", when: "Jul 2" },
-        { fileName: "founder-vo-sample.mp3", kind: "Audio", size: "1.1 MB", when: "Jun 28" }
-    ],
-    channels: [
-        { title: "Vidfarm Daily", platform: "TikTok", handle: "@vidfarm", status: "Connected", kind: "flockposter" },
-        { title: "Founder Reels", platform: "Instagram", handle: "@dylan.builds", status: "Connected", kind: "flockposter" },
-        { title: "Newsletter drop", platform: "Email", handle: "dylan@studio.co", status: "Verify sent", kind: "email" }
-    ],
-    providerKeys: [
-        { provider: "OpenAI", label: "gpt-5.4 workspace", secret: "sk-proj-1a2b3c4d5e6f7g8h9i0j", status: "Active", lastUsed: "2h ago" },
-        { provider: "Gemini", label: "clip tagging", secret: "AIzaSyD-9x0q1w2e3r4t5y6u7i8o", status: "Active", lastUsed: "yesterday" }
-    ]
-};
 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 tabButton(slug, label, active) {
-    return `<button type="button" class="rk-side-item${active ? " is-active" : ""}" data-rk-tab="${slug}">${label}</button>`;
+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]}`;
 }
-export function renderReskinSettings() {
-    const s = SAMPLE;
-    const acct = `<input type="hidden" name="account" value="${rkEscape(s.accountId)}" />`;
+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 = s.attachments.map((a) => {
-        const ext = (a.fileName.split(".").pop() || a.kind).toUpperCase();
-        return `
+    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(a.kind)} · ${rkEscape(a.size)} · added ${rkEscape(a.when)}</div>
+        <div class="rk-item-sub">${rkEscape(fmtBytes(a.sizeBytes))} · added ${rkEscape(fmtDate(a.createdAt))}</div>
       </div>
-      <button class="rk-btn rk-btn-ghost rk-btn-sm" type="button">Open</button>
+      <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("");
+        }).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">
@@ -72,60 +93,72 @@ export function renderReskinSettings() {
     </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(s.name)}" />
+        <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(s.about)}</textarea>
+        <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-field">
-        <label class="rk-label">Brand assets</label>
-        <div class="rk-set-drop">
-          <div><strong>Drop files</strong> or <span class="rk-set-link">browse</span> — logos, fonts, VO, footage.</div>
-        </div>
-        <div class="rk-list rk-set-attach">${attachmentCards}</div>
-      </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(s.email)}</span>
+        <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 historyRows = s.walletEvents.map((e) => `
+    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 ${e.kind === "credit" ? "rk-tile-green" : "rk-tile-ink"}">${e.kind === "credit" ? "+" : "−"}</span>
+      <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(e.title)}</div>
-        <div class="rk-item-sub">${rkEscape(e.sub)} · ${rkEscape(e.when)}</div>
+        <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 ${e.kind === "credit" ? "is-credit" : ""}">${money(e.amountUsd)}</div>
-    </div>`).join("");
+      <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-grid rk-grid-2 rk-set-wallet-top">
-      <div class="rk-card rk-set-balance">
-        <span class="rk-eyebrow">Wallet</span>
-        <div class="rk-stat-num rk-set-balance-num">${money(s.wallet.balanceUsd)}</div>
-        <p class="rk-muted">Available balance · updated ${rkEscape(s.wallet.updatedAt)}</p>
-        <div class="rk-row rk-wrap rk-set-balance-cta">
-          <a class="rk-btn rk-btn-gold" href="#">Top up wallet <span class="rk-arrow">→</span></a>
-          <span class="rk-pill rk-pill-green">Auto-scales to zero</span>
-        </div>
-      </div>
-      <div class="rk-stack">
-        <div class="rk-card rk-card-pad-sm rk-stat">
-          <div class="rk-stat-label">Funds added</div>
-          <div class="rk-stat-num">${money(s.wallet.totalFundsAddedUsd)}</div>
-        </div>
-        <div class="rk-card rk-card-pad-sm rk-stat">
-          <div class="rk-stat-label">Total usage</div>
-          <div class="rk-stat-num">${money(s.wallet.totalChargeUsd)}</div>
-        </div>
+    <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">
@@ -134,76 +167,134 @@ export function renderReskinSettings() {
         <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 class="rk-row rk-set-ledger-foot"><button class="rk-btn rk-btn-ghost rk-btn-sm" type="button">Load more</button></div>
     </div>
   </div>`;
     // ---- Channels ----
-    const channelCards = s.channels.map((c) => {
-        const tint = c.platform === "TikTok" ? "rk-tile-ink" : c.platform === "Instagram" ? "rk-tile-coral" : "rk-tile-sky";
-        const initial = rkEscape(c.platform.charAt(0).toUpperCase());
-        const statusPill = c.status === "Connected" ? "rk-pill-green" : "rk-pill-gold";
-        return `<div class="rk-item">
-      <span class="rk-tile rk-tile-txt ${tint}">${initial}</span>
+    // 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(c.title)}</div>
-        <div class="rk-item-sub">${rkEscape(c.platform)} · ${rkEscape(c.handle)}</div>
+        <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(c.status)}</span>
-      <button class="rk-btn rk-btn-ghost rk-btn-sm" type="button">Manage</button>
+      <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-wrap rk-card-head">
-        <div>
+      <div class="rk-spread rk-set-channels-topline">
+        <div class="rk-card-head rk-set-channels-headcopy">
           <span class="rk-eyebrow">Channels</span>
-          <h2>${s.channels.length} connected channels</h2>
-          <p class="rk-muted">Where approved cuts get published. Connect via FlockPoster or add an email channel.</p>
+          <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>
-        <a class="rk-btn rk-btn-ink" href="#">Connect channel <span class="rk-arrow">→</span></a>
       </div>
-      <div class="rk-list">${channelCards}</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 class="rk-card">
+  </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</span>
+        <span class="rk-eyebrow">FlockPoster settings</span>
         <h3>FlockPoster API key</h3>
-        <p class="rk-muted">Paste a FlockPoster key to pull in this workspace's connected social channels.</p>
+        <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>
-      <form class="rk-stack" method="post" action="/settings/channels/flockposter">
-        ${acct}
-        <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="api_key" placeholder="fp_live_…" />
-            <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>
-        </div>
-        <div class="rk-row">
-          <button class="rk-btn rk-btn-gold" type="submit">Save &amp; test connection</button>
+      <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>
-      </form>
-    </div>
-  </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 = s.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 initial = rkEscape(k.provider.charAt(0).toUpperCase());
-        return `<div class="rk-item">
-      <span class="rk-tile rk-tile-txt ${tint}">${initial}</span>
+    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)} <span class="rk-pill rk-pill-green">${rkEscape(k.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)} · used ${rkEscape(k.lastUsed)}</div>
+        <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/delete" style="display:inline">
-        ${acct}<input type="hidden" name="id" value="${rkEscape(k.label)}" />
+      <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("");
+        }).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">
@@ -214,19 +305,21 @@ export function renderReskinSettings() {
       </div>
       <div class="rk-field">
         <div class="rk-input-group">
-          <input class="rk-input rk-mono" id="rk-vfkey" type="password" value="${rkEscape(s.vidfarmApiKey)}" readonly />
+          <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-spread rk-wrap rk-card-head">
-        <div>
-          <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-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">
@@ -235,7 +328,7 @@ export function renderReskinSettings() {
           <div class="rk-field">
             <label class="rk-label" for="rk-prov">Provider</label>
             <select class="rk-select" id="rk-prov" name="provider">
-              <option>OpenAI</option><option>Gemini</option><option>OpenRouter</option><option>Anthropic</option>
+              <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">
@@ -250,101 +343,387 @@ export function renderReskinSettings() {
         <button class="rk-btn rk-btn-gold" type="submit">Add AI key</button>
       </form>
     </div>
-    <div class="rk-card rk-set-skill">
-      <div class="rk-item-main">
-        <h3>Director skill</h3>
-        <p class="rk-muted">The full REST + CLI playbook for driving vidfarm from an agent.</p>
-      </div>
-      <a class="rk-btn rk-btn-ghost" href="#">Download SKILL.director.md</a>
+  </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">
-    <span class="rk-badge">Account settings</span>
     <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">
-      ${tabButton("profile", "Profile", true)}
-      ${tabButton("wallet", "Wallet", false)}
-      ${tabButton("channels", "Channels", false)}
-      ${tabButton("developer", "Developer", false)}
+      ${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">${profile}</section>
-      <section class="rk-reveal" data-rk-panel="wallet" hidden>${wallet}</section>
-      <section class="rk-reveal" data-rk-panel="channels" hidden>${channels}</section>
-      <section class="rk-reveal" data-rk-panel="developer" hidden>${developer}</section>
+      <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-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)}
-.rk-set-link{color:var(--rk-gold-700);font-weight:600;cursor:pointer}
-.rk-set-attach{margin-top:12px}
-.rk-set-wallet-top{align-items:stretch}
+.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-ledger-foot{margin-top:16px;justify-content:center}
 .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-skill{display:flex;align-items:center;gap:18px}
-@media(max-width:620px){.rk-set-skill{flex-wrap:wrap}}
+.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;
-  // tab switching
+  // 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(){
-      var tab=btn.getAttribute('data-rk-tab');
-      root.querySelectorAll('[data-rk-tab]').forEach(function(b){b.classList.toggle('is-active',b===btn)});
-      root.querySelectorAll('[data-rk-panel]').forEach(function(p){p.hidden=p.getAttribute('data-rk-panel')!==tab});
-      if(history.replaceState)history.replaceState(null,'','#'+tab);
-    });
+    btn.addEventListener('click',function(){show(btn.getAttribute('data-rk-tab'));});
   });
-  var hash=(location.hash||'').replace('#','');
-  if(hash){var t=root.querySelector('[data-rk-tab="'+hash+'"]');if(t)t.click();}
-  // reveal password-style inputs
+  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)return; el.type=el.type==='password'?'text':'password';
-    });
+    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');
-    });
+    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);
+    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: "Reskinned vidfarm settings page (profile, wallet, channels, developer).",
+        description: "Vidfarm settings — profile, wallet, channels, developer.",
         activeSlug: "settings",
+        account: { name: input.name, email: input.email },
         pageCss,
         body,
         script