feat: add "How This Works" guide to Asset Library

Explains review/approve, repurpose, variations, Postiz publishing,
filtering/sorting, and asset lineage in a help dialog.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

app/(dashboard)/assets/page.tsx

@@ -1,15 +1,31 @@
 "use client";
 
 import { useState } from "react";
+import { HelpCircle } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
 import { AssetGallery } from "@/components/asset-gallery";
 import { PostizPushModal } from "@/components/postiz-push-modal";
 
 export default function GlobalAssetsPage() {
   const [pushModalIds, setPushModalIds] = useState<string[] | null>(null);
+  const [helpOpen, setHelpOpen] = useState(false);
 
   return (
     <div className="space-y-6">
+      <div className="flex items-center justify-between">
         <h1 className="text-3xl font-bold">Asset Library</h1>
+        <Button variant="outline" size="sm" onClick={() => setHelpOpen(true)}>
+          <HelpCircle className="mr-2 h-4 w-4" />
+          How This Works
+        </Button>
+      </div>
       <AssetGallery onPushToPostiz={(ids) => setPushModalIds(ids)} />
       {pushModalIds && (
         <PostizPushModal
@@ -17,6 +33,69 @@ export default function GlobalAssetsPage() {
           onClose={() => setPushModalIds(null)}
         />
       )}
+
+      <Dialog open={helpOpen} onOpenChange={setHelpOpen}>
+        <DialogContent className="max-w-lg">
+          <DialogHeader>
+            <DialogTitle>Asset Library Guide</DialogTitle>
+            <DialogDescription>
+              Everything you can do with your generated assets.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4 text-sm">
+            <section>
+              <h3 className="font-semibold mb-1">Review &amp; Approve</h3>
+              <p className="text-muted-foreground">
+                Every asset starts as a draft. Use <strong>Approve</strong> or <strong>Reject</strong> to
+                triage. Select multiple assets with checkboxes for bulk actions.
+              </p>
+            </section>
+
+            <section>
+              <h3 className="font-semibold mb-1">Repurpose</h3>
+              <p className="text-muted-foreground">
+                Take any image and instantly resize it for other platforms — Instagram Feed, Stories,
+                TikTok, Nextdoor. Sharp handles the crop locally (no AI cost). If the platform changes,
+                the caption is automatically re-toned to match the new platform&apos;s voice.
+              </p>
+            </section>
+
+            <section>
+              <h3 className="font-semibold mb-1">Spawn Variations</h3>
+              <p className="text-muted-foreground">
+                Pick a winning image and generate N new ads that keep the same visual style and CTA
+                but explore different hook angles. The AI uses the original as a reference image for
+                visual consistency. Great for A/B testing — find what resonates, then make more of it.
+              </p>
+            </section>
+
+            <section>
+              <h3 className="font-semibold mb-1">Push to Postiz</h3>
+              <p className="text-muted-foreground">
+                Select approved assets and schedule them for publishing via Postiz. Pick a date/time
+                and they&apos;ll be queued to the right platform channel automatically.
+              </p>
+            </section>
+
+            <section>
+              <h3 className="font-semibold mb-1">Filter &amp; Sort</h3>
+              <p className="text-muted-foreground">
+                Use the dropdowns to filter by platform, type (image/video/copy), or status.
+                Sort by newest, oldest, name, platform, or type. Use the search box to find
+                assets by filename or metadata.
+              </p>
+            </section>
+
+            <section>
+              <h3 className="font-semibold mb-1">Asset Lineage</h3>
+              <p className="text-muted-foreground">
+                Repurposed and variation assets show &quot;Derived from: original_file.png&quot; so you
+                can always trace back to the source. This builds a family tree of your best-performing content.
+              </p>
+            </section>
+          </div>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }