@mevdragon/vidfarm-devcli 0.17.0 → 0.18.0

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

@@ -1,131 +1,60 @@
-// /reskin/agency — the Agency / client-workspaces screen ported into the
-// farmville design system. Uses ONLY shared rk-* primitives + a small
-// page-scoped CSS block + a self-contained module script.
+// /reskin/agency — the Agency / client-workspaces screen, MIGRATED to real
+// production data + behavior (farmville design system).
 //
-// Renders with representative SAMPLE data so it can be viewed without auth.
-// Faithfully mirrors src/account-pages-legacy.ts → renderAgencyPage: an agency
-// managing its client sub-accounts. The legacy page is a searchable list of
-// cached client accounts (name · email · user id) with "Open Tab" (opens the
-// client's /u/:id/library) and "Copy Login" (autologin URL) actions plus an
-// "Add Login" button. This reskin keeps that spine and dresses it up with the
-// per-client stats the admin agency-link model already tracks (wallet, seats,
-// projects) into warm workspace cards.
+// This mirrors src/account-pages-legacy.ts → renderAgencyPage: an agency
+// managing its client sub-accounts. The live page's client list is NOT
+// server-fetched — it is read CLIENT-SIDE from this browser's localStorage
+// account registry (the same cache the app writes when you sign into a client
+// account), so the server can only render an empty shell + template and the
+// real client cards are built in JS. This reskin replicates that exact read and
+// wires the real per-client actions:
+//   • "Open workspace"  → opens the client's /u/:id/library in a new tab
+//   • "Copy login"      → copies the client's autologin URL
+//   • "Add client login"→ opens /agency-client-login
+// localStorage contract (identical keys/fields to the live page):
+//   index   key: "vidfarm:agency:accounts:index"        → string[] of userIds
+//   entry   key: "vidfarm:agency:account_<userId>"      → { apiKey, email,
+//                  displayName, lastSeenAt, autologinUrl? }
+//   autologinUrl falls back to "/auto-login?api_key=<encodeURIComponent(apiKey)>"
+//
+// The old reskin rendered fabricated per-client stats (projects, scheduled,
+// wallet, seats, plan, status) and aggregate tiles — NONE of those live in the
+// cache, so they are dropped. Cards now show only real cached fields (name,
+// email, user id, last-seen). Avatars are text initials (no emoji).
 import { reskinDocument, rkEscape } from "./document.js";
-const SAMPLE = {
-    agencyName: "Sunset Social",
-    ownerEmail: "hey@sunsetsocial.co",
-    stats: { clients: 7, activeProjects: 34, seatsUsed: 12, seatsTotal: 20, monthlySpendUsd: 486.2 },
-    clients: [
-        { name: "Meadow Coffee Co.", email: "ops@meadowcoffee.com", userId: "usr_4b12a9", plan: "Pro", status: "active", tint: "gold", projects: 9, scheduled: 6, walletUsd: 42.8, seats: 3, lastSeen: "2h ago" },
-        { name: "Northwind Outdoors", email: "team@northwind.gear", userId: "usr_9f0c31", plan: "Pro", status: "active", tint: "green", projects: 7, scheduled: 4, walletUsd: 88.15, seats: 2, lastSeen: "5h ago" },
-        { name: "Lumen Skincare", email: "grow@lumenskin.co", userId: "usr_2d77e4", plan: "Growth", status: "active", tint: "violet", projects: 6, scheduled: 8, walletUsd: 24.0, seats: 2, lastSeen: "yesterday" },
-        { name: "Harborline Fitness", email: "studio@harborline.fit", userId: "usr_71aa08", plan: "Starter", status: "trial", tint: "sky", projects: 4, scheduled: 2, walletUsd: 5.0, seats: 1, lastSeen: "3d ago" },
-        { name: "Cedar & Co. Home", email: "hello@cedarandco.com", userId: "usr_58bb1c", plan: "Pro", status: "active", tint: "coral", projects: 5, scheduled: 3, walletUsd: 61.4, seats: 2, lastSeen: "6h ago" },
-        { name: "Beacon Legal", email: "marketing@beaconlegal.io", userId: "usr_3c90f7", plan: "Growth", status: "paused", tint: "ink", projects: 2, scheduled: 0, walletUsd: 12.9, seats: 1, lastSeen: "2w ago" },
-        { name: "Pixel Pantry", email: "founders@pixelpantry.app", userId: "usr_6e14d0", plan: "Starter", status: "trial", tint: "sky", projects: 1, scheduled: 1, walletUsd: 5.0, seats: 1, lastSeen: "1d ago" }
-    ]
-};
-const STATUS_PILL = {
-    active: { cls: "rk-pill-green", label: "Active", dot: "●" },
-    trial: { cls: "rk-pill-sky", label: "Trial", dot: "◐" },
-    paused: { cls: "rk-pill-red", label: "Paused", dot: "◌" }
-};
-function money(n) {
-    const frac = Number.isInteger(n) ? 0 : 2;
-    return `$${n.toLocaleString("en-US", { minimumFractionDigits: frac, maximumFractionDigits: 2 })}`;
-}
-function initials(name) {
-    const letters = name
-        .replace(/&/g, " ")
-        .split(/\s+/)
-        .map((w) => (w.match(/[a-z0-9]/i) || [""])[0])
-        .filter(Boolean);
-    const out = `${letters[0] || ""}${letters[1] || ""}`;
-    return (out || "?").toUpperCase();
-}
-function statTile(label, value, sub) {
-    return `<div class="rk-card rk-card-pad-sm rk-agency-stat">
-    <div class="rk-stat-label">${rkEscape(label)}</div>
-    <div class="rk-stat-num">${value}</div>
-    <div class="rk-agency-stat-sub">${rkEscape(sub)}</div>
-  </div>`;
-}
-function clientCard(c) {
-    const pill = STATUS_PILL[c.status];
-    const search = `${c.name} ${c.email} ${c.userId}`.toLowerCase();
-    return `<article class="rk-card rk-card-hover rk-agency-card" data-rk-client="${rkEscape(search)}">
-    <div class="rk-agency-card-top">
-      <span class="rk-tile rk-tile-lg rk-tile-${c.tint} rk-agency-avatar">${rkEscape(initials(c.name))}</span>
-      <div class="rk-agency-card-id">
-        <h3 class="rk-agency-name">${rkEscape(c.name)}</h3>
-        <div class="rk-agency-email" role="button" tabindex="0" data-rk-copy-text="${rkEscape(c.email)}" title="Copy email">${rkEscape(c.email)}</div>
-      </div>
-      <span class="rk-pill ${pill.cls} rk-agency-status">${pill.dot} ${pill.label}</span>
-    </div>
-    <div class="rk-agency-meta">
-      <span class="rk-pill rk-pill-gold">${rkEscape(c.plan)} plan</span>
-      <span class="rk-pill">${c.seats} ${c.seats === 1 ? "seat" : "seats"}</span>
-      <span class="rk-agency-user" role="button" tabindex="0" data-rk-copy-text="${rkEscape(c.userId)}" title="Copy user id">${rkEscape(c.userId)}</span>
-    </div>
-    <div class="rk-agency-minis">
-      <div class="rk-agency-mini">
-        <div class="rk-agency-mini-num">${c.projects}</div>
-        <div class="rk-agency-mini-lbl">Projects</div>
-      </div>
-      <div class="rk-agency-mini">
-        <div class="rk-agency-mini-num">${c.scheduled}</div>
-        <div class="rk-agency-mini-lbl">Scheduled</div>
-      </div>
-      <div class="rk-agency-mini">
-        <div class="rk-agency-mini-num">${money(c.walletUsd)}</div>
-        <div class="rk-agency-mini-lbl">Wallet</div>
-      </div>
-    </div>
-    <div class="rk-agency-card-foot">
-      <a class="rk-btn rk-btn-ghost rk-btn-sm rk-agency-open" href="/u/${encodeURIComponent(c.userId)}/library" target="_blank" rel="noreferrer">Open workspace <span class="rk-arrow">→</span></a>
-      <button class="rk-btn rk-btn-ghost rk-btn-sm" type="button" data-rk-copy-login="/auto-login?client=${encodeURIComponent(c.userId)}">Copy login</button>
-      <span class="rk-agency-seen">Active ${rkEscape(c.lastSeen)}</span>
-    </div>
-  </article>`;
-}
-export function renderReskinAgency() {
-    const a = SAMPLE;
-    const s = a.stats;
-    const stats = `
-  <div class="rk-grid rk-grid-4 rk-agency-stats">
-    ${statTile("Client workspaces", String(s.clients), "all sub-accounts you manage")}
-    ${statTile("Active projects", String(s.activeProjects), "across every client")}
-    ${statTile("Seats used", `${s.seatsUsed}<span class="rk-agency-stat-of"> / ${s.seatsTotal}</span>`, "team members with access")}
-    ${statTile("Monthly spend", money(s.monthlySpendUsd), "pooled render + clip usage")}
-  </div>`;
-    const clientCards = a.clients.map(clientCard).join("");
-    const inviteCard = `<article class="rk-card rk-agency-invite" data-rk-client="__invite__">
-    <span class="rk-tile rk-tile-lg rk-tile-gold rk-agency-invite-ic">＋</span>
+export function renderReskinAgency(input = { userId: null, currentAccountId: null, name: null, email: null, loggedIn: false }) {
+    const loggedIn = input.loggedIn ?? Boolean(input.userId);
+    const signedInHint = loggedIn && input.email
+        ? `<span class="rk-agency-hint">Managing from ${rkEscape(input.email)}</span>`
+        : "";
+    const PLUS = `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>`;
+    // The invite / "add a client workspace" card is a static, always-real CTA to
+    // the /agency-client-login flow. It lives inside the grid alongside the
+    // JS-injected client cards (which render into [data-rk-agency-cards]).
+    const inviteCard = `<article class="rk-card rk-agency-invite" data-rk-agency-invite>
+    <span class="rk-tile rk-tile-lg rk-tile-gold rk-agency-invite-ic">${PLUS}</span>
     <h3 class="rk-agency-invite-title">Add a client workspace</h3>
     <p class="rk-muted rk-agency-invite-copy">Link a client's account and get an autologin so your team can post on their behalf.</p>
-    <button class="rk-btn rk-btn-gold" type="button" data-rk-add-client>Add client <span class="rk-arrow">→</span></button>
+    <a class="rk-btn rk-btn-gold" href="/agency-client-login" target="_blank" rel="noreferrer">Add client login <span class="rk-arrow">→</span></a>
   </article>`;
     const body = `
 <main class="rk-container rk-page">
   <div class="rk-page-head rk-agency-head">
     <div class="rk-agency-head-copy">
-      <span class="rk-badge">Agency workspace</span>
-      <h1 class="rk-h1">Agency</h1>
-      <p class="rk-sub">Manage every client workspace from one seat — ${a.clients.length} accounts, shared seats, and one pooled bill.</p>
+      <h1 class="rk-h1">Agency clients</h1>
+      <p class="rk-sub">Every client workspace cached on this device — open their library, or copy a one-tap login to post on their behalf.</p>
     </div>
     <div class="rk-agency-head-cta">
-      <a class="rk-btn rk-btn-ghost" href="/agency-client-login" target="_blank" rel="noreferrer">Add login</a>
-      <button class="rk-btn rk-btn-gold rk-btn-lg" type="button" data-rk-add-client>Add client <span class="rk-arrow">→</span></button>
+      ${signedInHint}
+      <a class="rk-btn rk-btn-gold rk-btn-lg" href="/agency-client-login" target="_blank" rel="noreferrer">Add client login <span class="rk-arrow">→</span></a>
     </div>
   </div>
 
-  ${stats}
-
   <section class="rk-agency-panel">
     <div class="rk-spread rk-wrap rk-agency-toolbar">
       <div class="rk-agency-toolbar-copy">
         <span class="rk-eyebrow">Clients</span>
-        <h2 class="rk-agency-h2">${a.clients.length} client workspaces</h2>
+        <h2 class="rk-agency-h2"><span data-rk-agency-count>0</span> client workspace<span data-rk-agency-plural>s</span></h2>
       </div>
       <div class="rk-agency-search-wrap">
         <span class="rk-agency-search-ic" aria-hidden="true"><svg width="16" height="16" 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></span>
@@ -133,27 +62,21 @@ export function renderReskinAgency() {
       </div>
     </div>
     <div class="rk-grid rk-grid-3 rk-agency-grid" data-rk-agency-grid>
-      ${clientCards}
+      <div class="rk-agency-cards" data-rk-agency-cards></div>
       ${inviteCard}
     </div>
     <div class="rk-agency-empty" data-rk-agency-empty hidden>
-      <p class="rk-muted">No client workspaces match that search.</p>
+      <p class="rk-muted" data-rk-agency-empty-msg>No cached accounts found in this browser yet.</p>
     </div>
   </section>
 </main>`;
     const pageCss = `
 .rk-agency-head{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:20px}
-.rk-agency-head-copy{display:grid;gap:8px;min-width:0}
-.rk-agency-head-copy .rk-badge{justify-self:start}
-.rk-agency-head-cta{display:flex;align-items:center;gap:10px;flex:none}
+.rk-agency-head-copy{display:grid;gap:4px;min-width:0}
+.rk-agency-head-cta{display:flex;align-items:center;gap:12px;flex:none}
+.rk-agency-hint{font-size:13px;color:var(--rk-text-muted);white-space:nowrap}
 @media(max-width:760px){.rk-agency-head{grid-template-columns:1fr}.rk-agency-head-cta{flex-wrap:wrap}}
 
-.rk-agency-stats{margin-bottom:28px}
-.rk-agency-stat{display:grid;gap:6px;align-content:start}
-.rk-agency-stat-ic{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:var(--rk-gold-tint);font-size:13px}
-.rk-agency-stat-sub{font-size:12px;color:var(--rk-text-faint)}
-.rk-agency-stat-of{font-size:var(--rk-text-xl);color:var(--rk-text-faint);font-weight:700}
-
 .rk-agency-panel{background:var(--rk-bg-section);border:1px solid var(--rk-border);border-radius:var(--rk-r-3xl);padding:24px}
 .rk-agency-toolbar{margin-bottom:20px}
 .rk-agency-toolbar-copy{display:grid;gap:4px}
@@ -164,6 +87,8 @@ export function renderReskinAgency() {
 @media(max-width:620px){.rk-agency-search-wrap{width:100%}}
 
 .rk-agency-grid{align-items:stretch}
+/* the JS card wrapper is transparent to the grid so cards + invite share tracks */
+.rk-agency-cards{display:contents}
 .rk-agency-card{padding:22px;display:flex;flex-direction:column;gap:16px}
 .rk-agency-card-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:start}
 .rk-agency-avatar{font-family:var(--rk-font-display);font-weight:800;font-size:22px}
@@ -171,81 +96,200 @@ export function renderReskinAgency() {
 .rk-agency-name{font-size:var(--rk-text-lg);font-weight:800;font-family:var(--rk-font-display);color:var(--rk-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .rk-agency-email{font-size:13px;color:var(--rk-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;transition:color var(--rk-dur) var(--rk-ease)}
 .rk-agency-email:hover{color:var(--rk-gold-700)}
-.rk-agency-status{flex:none;align-self:start;white-space:nowrap}
-.rk-agency-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
-.rk-agency-user{font-family:var(--rk-font-mono);font-size:12px;color:var(--rk-text-faint);cursor:pointer;transition:color var(--rk-dur) var(--rk-ease)}
+.rk-agency-seen-pill{flex:none;align-self:start;white-space:nowrap}
+.rk-agency-idrow{display:flex}
+.rk-agency-user{font-family:var(--rk-font-mono);font-size:12px;color:var(--rk-text-faint);cursor:pointer;transition:color var(--rk-dur) var(--rk-ease);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
 .rk-agency-user:hover{color:var(--rk-n-600)}
-.rk-agency-minis{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--rk-n-100);border-radius:var(--rk-r-xl);padding:14px 10px;margin-top:auto}
-.rk-agency-mini{display:grid;gap:3px;justify-items:center;text-align:center;position:relative}
-.rk-agency-mini+.rk-agency-mini::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);height:26px;width:1px;background:var(--rk-border)}
-.rk-agency-mini-num{font-family:var(--rk-font-display);font-weight:800;font-size:1.1rem;color:var(--rk-ink);letter-spacing:-.02em}
-.rk-agency-mini-lbl{font-size:11px;font-weight:600;color:var(--rk-text-muted);text-transform:uppercase;letter-spacing:.03em}
-.rk-agency-card-foot{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
+.rk-agency-card-foot{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:auto}
 .rk-agency-open{font-weight:600}
-.rk-agency-seen{margin-left:auto;font-size:12px;color:var(--rk-text-faint);white-space:nowrap}
 
 .rk-agency-invite{border-style:dashed;border-color:var(--rk-border-strong);background:linear-gradient(180deg,var(--rk-gold-tint),#fff 70%);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;min-height:240px}
-.rk-agency-invite-ic{font-size:26px}
+.rk-agency-invite-ic{display:grid;place-items:center}
 .rk-agency-invite-title{font-size:var(--rk-text-lg);font-family:var(--rk-font-display);font-weight:800;color:var(--rk-ink)}
 .rk-agency-invite-copy{font-size:13px;max-width:26ch}
 
 .rk-agency-empty{display:none;flex-direction:column;align-items:center;gap:12px;padding:56px 20px;text-align:center}
 .rk-agency-empty[data-rk-shown="1"]{display:flex}
 `;
+    // Client-side: replicate the live localStorage account-registry read, build
+    // real farmville client cards, and wire the real actions. Written with string
+    // concatenation (not template literals) to avoid nested-`${}` escaping.
     const script = `
 (function(){
+  var ACCOUNT_REGISTRY_INDEX_KEY = "vidfarm:agency:accounts:index";
+  var ACCOUNT_REGISTRY_ENTRY_PREFIX = "vidfarm:agency:account_";
+  var TINTS = ["gold","sky","violet","green","coral","ink"];
+
   var root=document;
-  var grid=root.querySelector('[data-rk-agency-grid]');
+  var cardsWrap=root.querySelector('[data-rk-agency-cards]');
+  var invite=root.querySelector('[data-rk-agency-invite]');
   var search=root.querySelector('[data-rk-agency-search]');
   var empty=root.querySelector('[data-rk-agency-empty]');
-  // client-side search filter over the workspace cards
-  function filter(){
-    if(!grid)return;
-    var q=(search&&search.value||'').trim().toLowerCase();
-    var visible=0;
-    grid.querySelectorAll('[data-rk-client]').forEach(function(card){
-      var key=card.getAttribute('data-rk-client')||'';
-      var isInvite=key==='__invite__';
-      var hit=!q||(!isInvite&&key.indexOf(q)!==-1);
-      // keep the invite card visible only when not searching
-      var show=isInvite?!q:hit;
-      card.hidden=!show;
-      if(show&&!isInvite)visible++;
-    });
-    if(empty){empty.hidden=!(q&&visible===0);empty.setAttribute('data-rk-shown',(q&&visible===0)?'1':'0');}
+  var emptyMsg=root.querySelector('[data-rk-agency-empty-msg]');
+  var countEl=root.querySelector('[data-rk-agency-count]');
+  var pluralEl=root.querySelector('[data-rk-agency-plural]');
+  var searchQuery="";
+
+  function escapeHtml(value){
+    return String(value==null?"":value)
+      .replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")
+      .replace(/"/g,"&quot;").replace(/'/g,"&#39;");
+  }
+
+  function initials(name){
+    var letters=String(name||"").replace(/&/g," ").split(/\\s+/)
+      .map(function(w){var m=w.match(/[a-z0-9]/i);return m?m[0]:"";})
+      .filter(Boolean);
+    var out=(letters[0]||"")+(letters[1]||"");
+    return (out||"?").toUpperCase();
+  }
+
+  function tintFor(seed){
+    var s=String(seed||""),h=0;
+    for(var i=0;i<s.length;i++){h=(h*31+s.charCodeAt(i))>>>0;}
+    return TINTS[h%TINTS.length];
   }
-  if(search)search.addEventListener('input',filter);
-  // copy helpers (email / user id / login link)
+
+  function relTime(iso){
+    var t=Date.parse(iso||"");
+    if(isNaN(t))return "";
+    var diff=Date.now()-t; if(diff<0)diff=0;
+    var m=Math.floor(diff/60000);
+    if(m<1)return "just now";
+    if(m<60)return m+"m ago";
+    var hr=Math.floor(m/60);
+    if(hr<24)return hr+"h ago";
+    var d=Math.floor(hr/24);
+    if(d<7)return d+"d ago";
+    try{return new Date(t).toLocaleDateString("en-US",{month:"short",day:"numeric"});}catch(_){return d+"d ago";}
+  }
+
+  function readAccountIds(){
+    try{
+      var raw=window.localStorage.getItem(ACCOUNT_REGISTRY_INDEX_KEY);
+      var parsed=raw?JSON.parse(raw):[];
+      return Array.isArray(parsed)?parsed.filter(function(v){return typeof v==="string"&&v;}):[];
+    }catch(_){return [];}
+  }
+
+  function readAccounts(){
+    return readAccountIds().map(function(userId){
+      try{
+        var raw=window.localStorage.getItem(ACCOUNT_REGISTRY_ENTRY_PREFIX+userId);
+        if(!raw)return null;
+        var parsed=JSON.parse(raw);
+        if(!parsed||typeof parsed!=="object"||typeof parsed.apiKey!=="string"||!parsed.apiKey)return null;
+        return {
+          userId:userId,
+          email:typeof parsed.email==="string"?parsed.email:"",
+          displayName:typeof parsed.displayName==="string"?parsed.displayName:"",
+          lastSeenAt:typeof parsed.lastSeenAt==="string"?parsed.lastSeenAt:"",
+          autologinUrl:typeof parsed.autologinUrl==="string"?parsed.autologinUrl:"/auto-login?api_key="+encodeURIComponent(parsed.apiKey)
+        };
+      }catch(_){return null;}
+    }).filter(Boolean).sort(function(a,b){return Date.parse(b.lastSeenAt||"")-Date.parse(a.lastSeenAt||"");});
+  }
+
+  function matchesSearch(account){
+    var needle=searchQuery.trim().toLowerCase();
+    if(!needle)return true;
+    return [account.displayName,account.email,account.userId]
+      .some(function(v){return String(v||"").toLowerCase().indexOf(needle)!==-1;});
+  }
+
+  function cardHtml(account){
+    var title=account.displayName||account.email||account.userId;
+    var tint=tintFor(account.userId);
+    var seen=relTime(account.lastSeenAt);
+    var seenPill=seen?'<span class="rk-pill rk-agency-seen-pill">Active '+escapeHtml(seen)+'</span>':'';
+    var openTarget="/u/"+encodeURIComponent(account.userId)+"/library";
+    return ''
+      +'<article class="rk-card rk-card-hover rk-agency-card">'
+      +'<div class="rk-agency-card-top">'
+      +'<span class="rk-tile rk-tile-lg rk-tile-'+tint+' rk-agency-avatar">'+escapeHtml(initials(title))+'</span>'
+      +'<div class="rk-agency-card-id">'
+      +'<h3 class="rk-agency-name">'+escapeHtml(title)+'</h3>'
+      +'<div class="rk-agency-email" role="button" tabindex="0" data-rk-copy-text="'+escapeHtml(account.email||"")+'" title="Copy email">'+escapeHtml(account.email||"No email")+'</div>'
+      +'</div>'
+      +seenPill
+      +'</div>'
+      +'<div class="rk-agency-idrow">'
+      +'<span class="rk-agency-user" role="button" tabindex="0" data-rk-copy-text="'+escapeHtml(account.userId)+'" title="Copy user id">User '+escapeHtml(account.userId)+'</span>'
+      +'</div>'
+      +'<div class="rk-agency-card-foot">'
+      +'<button class="rk-btn rk-btn-ink rk-btn-sm rk-agency-open" type="button" data-rk-open-tab="'+escapeHtml(openTarget)+'">Open workspace <span class="rk-arrow">→</span></button>'
+      +'<button class="rk-btn rk-btn-ghost rk-btn-sm" type="button" data-rk-copy-login="'+escapeHtml(account.autologinUrl)+'">Copy login</button>'
+      +'</div>'
+      +'</article>';
+  }
+
   function flash(el,label){
-    var tag=el.getAttribute('data-rk-flash-tag')||el.getAttribute('title')||'';
+    if(!el)return;
     var prev=el.textContent;
     el.textContent=label;
-    setTimeout(function(){el.textContent=prev;},1200);
+    window.setTimeout(function(){el.textContent=prev;},1300);
   }
   function copy(value,el){
-    if(!value||!navigator.clipboard)return;
-    navigator.clipboard.writeText(value).then(function(){flash(el,'Copied!');});
+    if(!value)return;
+    if(navigator.clipboard&&navigator.clipboard.writeText){
+      navigator.clipboard.writeText(value).then(function(){flash(el,"Copied");},function(){flash(el,"Clipboard blocked");});
+    }else{flash(el,"Clipboard blocked");}
   }
-  root.querySelectorAll('[data-rk-copy-text]').forEach(function(el){
-    var run=function(){copy(el.getAttribute('data-rk-copy-text'),el);};
-    el.addEventListener('click',run);
-    el.addEventListener('keydown',function(e){if(e.key==='Enter'||e.key===' '){e.preventDefault();run();}});
-  });
-  root.querySelectorAll('[data-rk-copy-login]').forEach(function(btn){
-    btn.addEventListener('click',function(){
-      var rel=btn.getAttribute('data-rk-copy-login')||'';
-      var abs=rel;try{abs=new URL(rel,location.origin).toString();}catch(_){}
-      copy(abs,btn);
+
+  function wire(){
+    if(!cardsWrap)return;
+    cardsWrap.querySelectorAll('[data-rk-copy-text]').forEach(function(el){
+      var run=function(){copy(el.getAttribute('data-rk-copy-text'),el);};
+      el.addEventListener('click',run);
+      el.addEventListener('keydown',function(e){if(e.key==='Enter'||e.key===' '){e.preventDefault();run();}});
+    });
+    cardsWrap.querySelectorAll('[data-rk-copy-login]').forEach(function(btn){
+      btn.addEventListener('click',function(){
+        var rel=btn.getAttribute('data-rk-copy-login')||'';
+        var abs=rel;try{abs=new URL(rel,window.location.origin).toString();}catch(_){}
+        copy(abs,btn);
+      });
+    });
+    cardsWrap.querySelectorAll('[data-rk-open-tab]').forEach(function(btn){
+      btn.addEventListener('click',function(){
+        var target=btn.getAttribute('data-rk-open-tab');
+        if(target)window.open(target,'_blank','noopener,noreferrer');
+      });
     });
-  });
-  // "Add client" CTA — reskin surface has no backend; nudge to real flow
-  root.querySelectorAll('[data-rk-add-client]').forEach(function(btn){
-    btn.addEventListener('click',function(){window.open('/agency-client-login','_blank','noopener,noreferrer');});
-  });
+  }
+
+  function render(){
+    if(!cardsWrap)return;
+    var accounts=readAccounts();
+    var total=accounts.length;
+    if(countEl)countEl.textContent=String(total);
+    if(pluralEl)pluralEl.textContent=total===1?'':'s';
+
+    var filtered=accounts.filter(matchesSearch);
+    cardsWrap.innerHTML=filtered.map(cardHtml).join('');
+    wire();
+
+    // hide the "add client" invite while actively searching (it isn't a result)
+    if(invite)invite.hidden=!!searchQuery.trim();
+
+    if(empty&&emptyMsg){
+      var showEmpty=false,msg='';
+      if(total===0){showEmpty=true;msg='No cached accounts found in this browser yet.';}
+      else if(filtered.length===0){showEmpty=true;msg='No agency clients match that search.';}
+      emptyMsg.textContent=msg;
+      empty.hidden=!showEmpty;
+      empty.setAttribute('data-rk-shown',showEmpty?'1':'0');
+    }
+  }
+
+  if(search){
+    search.addEventListener('input',function(){searchQuery=search.value||'';render();});
+  }
+  render();
 })();`;
     return reskinDocument({
         title: "vidfarm reskin — Agency",
-        description: "Reskinned vidfarm agency page (client workspaces, seats, pooled billing).",
+        description: "Reskinned vidfarm agency page — cached client workspaces, open library, copy autologin.",
         activeSlug: "agency",
         pageCss,
         body,