From 410bc534d05edceae7aeb40ac10b7facbce83d7b Mon Sep 17 00:00:00 2001
From: Claude <anthony@profullstack.com>
Date: Fri, 10 Jul 2026 12:23:34 +0000
Subject: [PATCH] Dashboard: refresh media (images/video/audio) from the
 connected repo
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The GitHub-assets pull was images-only and only ran on a full page save. Now:
- listRepoAssets also matches video (mp4/webm/mov/m4v) and audio
  (mp3/wav/ogg/m4a/aac/flac), tagging each asset with a kind
- new POST /api/account/refresh-media re-pulls media into config.assets
  WITHOUT touching the rest of the config (own-account, re-provisions)
- dashboard gets a '↻ Refresh media' button + kind-aware preview chips and a
  by-kind count toast
- the tenant page renders assets by kind: video → <video>, audio → <audio>,
  image → <img>

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 app/api/account/refresh-media/route.ts |  41 +++++++++++++++++++++++++
 app/dashboard/page.tsx                 |  29 ++++++++++++++---
 app/globals.css                        |   6 ++++
 components/Tenant.tsx                  |  16 +++++++---
 lib/config.ts                          |   9 ++++--
 lib/github.ts                          | Bin 2924 -> 3407 bytes
 6 files changed, 89 insertions(+), 12 deletions(-)
 create mode 100644 app/api/account/refresh-media/route.ts

diff --git a/app/api/account/refresh-media/route.ts b/app/api/account/refresh-media/route.ts
new file mode 100644
index 0000000..1109230
--- /dev/null
+++ b/app/api/account/refresh-media/route.ts
@@ -0,0 +1,41 @@
+import { NextRequest, NextResponse } from "next/server";
+import { resolveAccountId, unauthorized } from "@/lib/api";
+import { getAccountById, updateAccountConfig } from "@/lib/db";
+import { provisionTenant } from "@/lib/provision";
+import { listRepoAssets } from "@/lib/github";
+
+export const runtime = "nodejs";
+export const dynamic = "force-dynamic";
+
+// Re-pull media (images / video / audio) from the account's connected GitHub
+// repo and refresh config.assets — without touching any other config field.
+export async function POST(req: NextRequest) {
+  const id = await resolveAccountId(req);
+  if (!id) return unauthorized();
+
+  const acct = await getAccountById(id);
+  if (!acct) return NextResponse.json({ error: "account not found" }, { status: 404 });
+
+  const config: Record<string, any> = { ...(acct.config || {}) };
+  if (!config.repo) {
+    return NextResponse.json({ error: "Connect a GitHub repo first (owner/name), then Save." }, { status: 400 });
+  }
+
+  let assets: Awaited<ReturnType<typeof listRepoAssets>>;
+  try {
+    assets = await listRepoAssets(config.repo, { pattern: config.assetPattern });
+  } catch (e: any) {
+    return NextResponse.json({ error: `Couldn't load from ${config.repo}: ${e?.message || e}` }, { status: 502 });
+  }
+
+  config.assets = assets;
+  const updated = await updateAccountConfig(id, config);
+  if (updated?.status === "active") await provisionTenant(updated);
+
+  const counts: Record<string, number> = {};
+  for (const x of assets) {
+    const k = x.kind || "image";
+    counts[k] = (counts[k] || 0) + 1;
+  }
+  return NextResponse.json({ ok: true, total: assets.length, counts, assets });
+}
diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
index 9c93969..f132059 100644
--- a/app/dashboard/page.tsx
+++ b/app/dashboard/page.tsx
@@ -207,7 +207,8 @@ function AccountPanel({ onError, onOk }: { onError: (m: string) => void; onOk: (
   const [wallet, setWallet] = useState("");
   const [repo, setRepo] = useState("");
   const [assetPattern, setAssetPattern] = useState("");
-  const [assets, setAssets] = useState<{ label: string; url: string }[]>([]);
+  const [assets, setAssets] = useState<{ label: string; url: string; kind?: string }[]>([]);
+  const [refreshing, setRefreshing] = useState(false);
   const [videos, setVideos] = useState<{ name: string; url: string }[]>([]);
   const [uploading, setUploading] = useState(false);
   const [blocks, setBlocks] = useState<BlockRow[]>([]);
@@ -439,15 +440,33 @@ function AccountPanel({ onError, onOk }: { onError: (m: string) => void; onOk: (
         ))}
       </ul>
 
-      <h3 className="ed-h">GitHub assets <span className="muted">(pull images from a repo onto your page)</span></h3>
+      <h3 className="ed-h">GitHub media <span className="muted">(pull images, video &amp; audio from a repo onto your page)</span></h3>
       <div className="row"><input className="inp" placeholder="owner/repo — e.g. moshcoder/moshcoding" value={repo} onChange={(e) => setRepo(e.target.value)} /></div>
-      <div className="row"><input className="inp" placeholder="path glob — e.g. images/*_thumb.png" value={assetPattern} onChange={(e) => setAssetPattern(e.target.value)} /></div>
+      <div className="row">
+        <input className="inp" placeholder="path glob — e.g. media/*  (blank = all media)" value={assetPattern} onChange={(e) => setAssetPattern(e.target.value)} />
+        <button className="btn2 ghost" type="button" disabled={refreshing || !repo.trim()} onClick={async () => {
+          setRefreshing(true);
+          try {
+            const r = await fetch("/api/account/refresh-media", { method: "POST" });
+            const d = await r.json();
+            if (!r.ok) throw new Error(d.error || "Refresh failed.");
+            setAssets(d.assets || []);
+            const c = d.counts || {};
+            onOk(`Refreshed ${d.total} — ${c.image || 0} image, ${c.video || 0} video, ${c.audio || 0} audio. 🤘`);
+          } catch (e: any) { onError(e.message || "Refresh failed."); }
+          finally { setRefreshing(false); }
+        }}>{refreshing ? "Refreshing…" : "↻ Refresh media"}</button>
+      </div>
       {assets.length > 0 && (
         <div className="t-assets" style={{ margin: "10px 0 0" }}>
-          {assets.slice(0, 12).map((a, i) => <span key={i} className="t-asset"><img src={a.url} alt={a.label} loading="lazy" /></span>)}
+          {assets.slice(0, 12).map((a: any, i: number) =>
+            a.kind === "video" ? <span key={i} className="t-asset t-asset-chip">🎬 {a.label || "video"}</span>
+            : a.kind === "audio" ? <span key={i} className="t-asset t-asset-chip">🎧 {a.label || "audio"}</span>
+            : <span key={i} className="t-asset"><img src={a.url} alt={a.label} loading="lazy" /></span>,
+          )}
         </div>
       )}
-      {repo && <p className="sub" style={{ marginTop: 6 }}>{assets.length} asset(s) loaded. Public repos work as-is; private repos need a server GITHUB_TOKEN.</p>}
+      {repo && <p className="sub" style={{ marginTop: 6 }}>{assets.length} asset(s) loaded. Public repos work as-is; private repos need a server GITHUB_TOKEN. Use <b>↻ Refresh media</b> to re-pull without saving the rest of the form.</p>}
 
       <div className="row" style={{ marginTop: 16 }}>
         <button className="btn2" disabled={saving} onClick={save}>{saving ? "Saving…" : `Save & publish ${activeDomain}`}</button>
diff --git a/app/globals.css b/app/globals.css
index 7431872..de228d5 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -424,6 +424,12 @@ dialog.qhelp::backdrop { background: rgba(0,0,0,.72); backdrop-filter: blur(2px)
 .t-asset { display: grid; place-items: center; aspect-ratio: 1/1; padding: 8px; background: #111214; border: 1px solid #262629; border-radius: 10px; overflow: hidden; transition: border-color .15s ease; }
 .t-asset:hover { border-color: var(--tenant-accent, var(--acid)); }
 .t-asset img { max-width: 100%; max-height: 100%; object-fit: contain; }
+/* mixed-media repo assets: video/audio tiles + dashboard chips */
+.t-asset-av { aspect-ratio: 1/1; width: 100%; padding: 0; background: #000; }
+.t-asset-av video, video.t-asset-av { width: 100%; height: 100%; object-fit: cover; }
+.t-asset-audio { grid-column: 1 / -1; aspect-ratio: auto; width: 100%; padding: 8px; }
+.t-asset-audio audio, audio.t-asset-audio { width: 100%; }
+.t-asset-chip { aspect-ratio: auto; padding: 8px 10px; font-family: var(--mono); font-size: 11px; color: var(--ash); text-align: center; word-break: break-word; }
 
 /* Dashboard tabs */
 .tabs { display: flex; gap: 8px; margin: 4px 0 18px; border-bottom: 1px solid var(--line); }
diff --git a/components/Tenant.tsx b/components/Tenant.tsx
index e1f0900..366763e 100644
--- a/components/Tenant.tsx
+++ b/components/Tenant.tsx
@@ -98,11 +98,17 @@ export default function Tenant({ cfg }: { cfg: TenantConfig }) {
 
         {cfg.assets.length > 0 && (
           <div className="t-assets" aria-label="Assets">
-            {cfg.assets.map((a, i) => (
-              <a key={i} className="t-asset" href={a.url} target="_blank" rel="noopener noreferrer" title={a.label}>
-                <img src={a.url} alt={a.label} loading="lazy" />
-              </a>
-            ))}
+            {cfg.assets.map((a, i) =>
+              a.kind === "video" ? (
+                <video key={i} className="t-asset t-asset-av" controls preload="metadata" playsInline src={a.url} title={a.label} />
+              ) : a.kind === "audio" ? (
+                <audio key={i} className="t-asset t-asset-audio" controls preload="none" src={a.url} title={a.label} />
+              ) : (
+                <a key={i} className="t-asset" href={a.url} target="_blank" rel="noopener noreferrer" title={a.label}>
+                  <img src={a.url} alt={a.label} loading="lazy" />
+                </a>
+              ),
+            )}
           </div>
         )}
 
diff --git a/lib/config.ts b/lib/config.ts
index 72bd849..d726118 100644
--- a/lib/config.ts
+++ b/lib/config.ts
@@ -394,9 +394,14 @@ export function configFor(dn: string, opts: TenantOverrides = {}): TenantConfig
   const links = [...socialLinks(dn, override), ...parseLinks(opts.linkParams), ...cleanLinks(ov.customLinks, "link")];
   // Sponsors: ?aff_linkN= query + saved sponsors.
   const sponsors = [...parseSponsors(opts.affParams), ...cleanLinks(ov.sponsors, "sponsor")];
-  // GitHub repo image assets (saved with {name,url}); rendered as a gallery.
+  // GitHub repo media assets (images/video/audio, {name,url,kind}); a gallery.
+  const assetKinds = new Set(["image", "video", "audio"]);
   const assets = Array.isArray(ov.assets)
-    ? ov.assets.filter((a: any) => a && a.url).map((a: any) => ({ label: String(a.name || a.label || ""), url: String(a.url), kind: "image" }))
+    ? ov.assets.filter((a: any) => a && a.url).map((a: any) => ({
+        label: String(a.name || a.label || ""),
+        url: String(a.url),
+        kind: assetKinds.has(a.kind) ? String(a.kind) : "image",
+      }))
     : [];
   // Uploaded MP4 videos ({name, url, poster?}).
   const videos = Array.isArray(ov.videos)
diff --git a/lib/github.ts b/lib/github.ts
index 2ef74d523b51163cb166626543f64312439cfec8..e680744d3af42a1c92cbfe2e27e6061eafdaab08 100644
GIT binary patch
delta 531
zcmaJ;K}*9h7-cvwxp?#7>9b5+hcuu&tqc)1q>Ld5dJ;x#(;94((Wc$O$WH!({SOg#
z@ZgW|XL#}EA23bUgCd^tNZ$9}_g+4C-}heDtz{^9A>le0jW1@GV;BOy@w(Z(uNL$+
zQ<<n#*00<SW<Ijiv#U|?gL<MCq*5YDG?OSoLKUYZv?B=jdN8FCBXG}n1hL40z?{gt
zBhZkS%QOWR1CxgZa3O(kU>Qj$u2@6`CS}9~kfNZ{gC0h4$wSEmw^tJ_*{#I}P{^F|
z#2tWR#vM@L7zu-nOpSP{{T>k1p50)2K3g52on=mCne%4U-#j;+c#;;<*tjk<RIA-k
zn@;|uTJxH^8LpS`(IaZotlwH+TOHptboy_C_477wPwYRKK8L@GaDBkoHmK8@CG}}r
VwCVL4HvN7rusTMsZ38~g(>EXvu4w=O

delta 41
xcmX>v^+s&NX2#9t%)gm8hq33eaA&3|XefI6y2l5(PS)d*o-EI^eDWEdW&k&t4h{eS