attempt at metadata grabbing

Option for webp file name or character image URL inputs

.env

@@ -0,0 +1,5 @@
+# Environment Variables for Sucker
+
+# Disable Discord community banner (optional)
+# Uncomment the line below to hide the Discord banner
+NEXT_PUBLIC_DISABLE_DISCORD_BANNER=true

.github/copilot-instructions.md

@@ -0,0 +1,47 @@
+# Copilot Instructions for sucker.severian.dev
+
+## Project Overview
+- This is a Next.js project with a custom proxy API and UI components, using Tailwind CSS and PostCSS for styling.
+- The main app logic is in `src/app/`, with global styles in `globals.css` and layout in `layout.tsx`.
+- API routes are under `src/app/api/proxy/`, including image proxying (`image/route.ts`).
+- UI components are in `src/components/ui/` and utility functions in `src/components/lib/`.
+
+## Architecture & Data Flow
+- The app uses Next.js routing and API routes for backend logic. The proxy API handles requests to external services, including image fetching and transformation.
+- UI components follow a modular pattern, with reusable elements (e.g., `button.tsx`, `card.tsx`).
+- Data flows from API routes to UI via React props and hooks. No global state management library is present.
+
+## Developer Workflows
+- **Build & Dev:** Use `npm run dev` to start the development server. Check `package.json` for other scripts.
+- **Styling:** Tailwind CSS is configured via `tailwind.config.js` and PostCSS via `postcss.config.js`.
+- **API:** Custom logic for proxying and image handling is in `src/app/api/proxy/`. Review these files for request/response patterns.
+- **No test suite detected.** If adding tests, follow Next.js and React conventions.
+
+## Project-Specific Conventions
+- API routes use Next.js `route.ts` files, with custom logic for proxying and image manipulation.
+- UI components are colocated in `src/components/ui/` and use Tailwind utility classes.
+- Utility functions (e.g., PNG handling) are in `src/components/lib/`.
+- Minimal documentation; refer to code for implementation details.
+- Changelog is maintained in `README.md`.
+
+## Integration Points & External Dependencies
+- Relies on Next.js, React, Tailwind CSS, and PostCSS.
+- External requests are proxied via custom API routes.
+- Docker support via `docker-compose.yml` and `dockerfile` for containerization.
+
+## Examples
+- To add a new API route: create a `route.ts` under `src/app/api/yourroute/`.
+- To add a new UI component: place a `.tsx` file in `src/components/ui/` and use Tailwind for styling.
+- For image processing, review `src/app/api/proxy/image/route.ts` and `src/components/lib/png.ts`.
+
+## Key Files & Directories
+- `src/app/` — Main app logic and API routes
+- `src/components/ui/` — UI components
+- `src/components/lib/` — Utility functions
+- `tailwind.config.js`, `postcss.config.js` — Styling configuration
+- `docker-compose.yml`, `dockerfile` — Containerization
+- `README.md` — Changelog and minimal project notes
+
+---
+
+If any section is unclear or missing important project-specific details, please provide feedback to improve these instructions.

.gitignore

@@ -1,2 +1,9 @@
+.idea/
+bun.lock
+.env
+
 node_modules
 .next
+.env.local
+.env*.local
+.env

README.md

@@ -1,9 +1,24 @@
 # Sucker
 
-Check package.json for commands, I can't be bothered.
+### Environment Variables
+
+Add these to your `.env.local` file (optional):
+
+```bash
+# Disable Discord community banner (defaults to showing banner)
+NEXT_PUBLIC_DISABLE_DISCORD_BANNER=true
+```
+
+### Usage
+
+Pull this repostory and build with `npm run build`. You can start the server with `node ./.next/standalone/server.js`
+
+You can also build and run Sucker as a Docker container with `docker compose build` and `docker compose up`.
 
 ### Changelog
 
+- 2.2: Added support for directly inputting webp file names or character image links when creating PNG character cards
+- 2.1: updated deps, note about image fetching, list of mirrors
 - 2.0: from Tui: Multimessage support! Tracks changes to character descriptions and scenarios across multiple extractions. Shows version badges, message counts, and provides detailed change history viewer.
 - also 2.0: V2 charcard format and alternate greetings.
 - 1.9: Not again. They changed stuff again. What is this?

docker-compose.yml

@@ -4,5 +4,3 @@ services:
     image: sucker
     ports:
       - "3000:3000"
-    environment:
-      NODE_ENV: production

dockerfile

@@ -1,7 +1,5 @@
-FROM node:18-alpine AS base
-
+FROM node:22-alpine AS base
 WORKDIR /app
-
 FROM base AS deps
 COPY package.json package-lock.json* yarn.lock* pnpm-lock.yaml* ./
 RUN \
@@ -12,23 +10,22 @@ RUN \
   fi
 
 FROM base AS builder
+WORKDIR /app
+
+ENV NODE_ENV=production
+
 COPY --from=deps /app/node_modules ./node_modules
 COPY . .
 RUN npm run build
 
-FROM base AS runner
-ENV NODE_ENV=production
-
-RUN addgroup --system --gid 1001 nodejs && adduser --system --uid 1001 nextjs
-
+FROM node:22-alpine AS runner
 WORKDIR /app
-
+RUN addgroup --system --gid 1001 nodejs && adduser --system --uid 1001 nextjs
+COPY --from=builder /app/.next/standalone ./
+COPY --from=builder /app/.next/static ./.next/static
 COPY --from=builder /app/public ./public
-COPY --from=builder /app/.next ./.next
-COPY --from=builder /app/node_modules ./node_modules
-COPY --from=builder /app/package.json ./package.json
 
 USER nextjs
 
 EXPOSE 3000
-CMD ["npm", "start"]
+CMD ["node", "server.js"]

next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

next.config.js

@@ -0,0 +1,7 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  output: 'standalone',
+  productionBrowserSourceMaps: false,
+};
+
+module.exports = nextConfig;

package.json

@@ -12,10 +12,11 @@
     "@radix-ui/react-accordion": "^1.2.2",
     "@radix-ui/react-collapsible": "^1.1.2",
     "@radix-ui/react-dialog": "^1.1.4",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-separator": "^1.1.1",
     "@radix-ui/react-slot": "^1.1.1",
-    "@types/react": "^18.2.39",
-    "@types/react-dom": "^18.2.17",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
     "axios": "^1.6.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -23,9 +24,9 @@
     "crc-32": "^1.2.2",
     "html2canvas": "^1.4.1",
     "lucide-react": "^0.471.0",
-    "next": "^14.0.3",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "next": "^16.0.7",
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1",
     "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "^5.3.2"

src/app/page.tsx

@@ -20,17 +20,18 @@ import {
 import { Input } from "@/components/ui/input";
 import { Png } from "@/lib/png";
 import {
-  ChevronUp,
-  ChevronDown,
   Copy,
   ChevronLeft,
   ChevronRight,
+  Menu,
 } from "lucide-react";
 import {
-  CollapsibleContent,
-  Collapsible,
-  CollapsibleTrigger,
-} from "@/components/ui/collapsible";
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+} from "@/components/ui/dropdown-menu";
+import { DiscordBannerPermanent } from "@/components/ui/discord-banner-permanent";
 import Script from "next/script";
 
 interface CardDataV2 {
@@ -65,7 +66,6 @@ interface Card {
 }
 
 export default function Home() {
-  const [isInstructionsOpen, setIsInstructionsOpen] = useState(false);
   const [cards, setCards] = useState<Card[]>([]);
   const [dialogOpen, setDialogOpen] = useState(false);
   const [selectedCardIndex, setSelectedCardIndex] = useState<number | null>(
@@ -81,8 +81,16 @@ export default function Home() {
   const [altGreetingIndexById, setAltGreetingIndexById] = useState<
       Record<string, number>
   >({});
+  const [mirrorsDialogOpen, setMirrorsDialogOpen] = useState(false);
+  const [changelogDialogOpen, setChangelogDialogOpen] = useState(false);
+  const [howToUseDialogOpen, setHowToUseDialogOpen] = useState(false);
 
-  const [proxyUrl, setProxyUrl] = useState("https://sucker.severian.dev/api/proxy");
+  const [proxyUrl, setProxyUrl] = useState(
+      "https://sucker.severian.dev/api/proxy"
+  );
+
+  const [pageSource, setPageSource] = useState("");
+  const [metadataJson, setMetadataJson] = useState<any>(null);
 
   const fetchCards = async () => {
     try {
@@ -228,6 +236,15 @@ export default function Home() {
 
       const arrayBuffer = await pngBlob.arrayBuffer();
 
+      // Fallback if metadataJson hasn't been fetched for this card
+      const safeMetadata = metadataJson || {};
+      const creator = (safeMetadata.creator_name || (card.data as any).creator || "Unknown") + (safeMetadata.creator_verified ? " ✅" : "");
+
+      // Tag Parsing
+      const normalTags = (safeMetadata.tags || (card.data as any).tags || []).map((t: any) => t.name);
+      const customTags = safeMetadata.custom_tags || [];
+      const allTagsArray = [...normalTags, ...customTags];
+
       // Use initial version for PNG embedding, or current version if no initial version available
       const chosen = card.initialVersion || card.data;
       const pngData = {
@@ -239,13 +256,13 @@ export default function Home() {
           personality: chosen.personality,
           mes_example: chosen.mes_example,
           scenario: chosen.scenario,
-          creator: (chosen as any).creator || "",
-          creator_notes: (chosen as any).creator_notes || "",
+          creator: creator,
+          creator_notes: safeMetadata.description || (chosen as any).creator_notes || "",
           system_prompt: (chosen as any).system_prompt || "",
           post_history_instructions:
               (chosen as any).post_history_instructions || "",
-          tags: (chosen as any).tags || [],
-          character_version: (chosen as any).character_version || "1",
+          tags: allTagsArray,
+          character_version: safeMetadata.name || (chosen as any).character_version || "1",
           extensions: (chosen as any).extensions || {},
         },
         spec: card.spec || "chara_card_v2",
@@ -255,8 +272,7 @@ export default function Home() {
       const cardData = JSON.stringify(pngData);
 
       const newImageData = Png.Generate(arrayBuffer, cardData);
-      const newFileName = `${
-        (card.initialVersion?.name || card.data.name).replace(
+      const newFileName = `${(card.initialVersion?.name || card.data.name).replace(
           /[^a-zA-Z0-9\-_]/g,
           "_"
       ) || "character"
@@ -287,14 +303,14 @@ export default function Home() {
   };
 
   const handleOpenMetadata = () => {
-    const match = characterUrl.match(/characters\/([\w-]+)/);
-    if (match && match[1]) {
-      const characterId = match[1].split("_")[0];
-      window.open(
-        `https://janitorai.com/hampter/characters/${characterId}`,
-        "_blank"
-      );
+    // Check if the input is a character metadata URL (janitorai.com/characters/...)
+    const isCharacterUrl = /janitorai\.com\/characters\//.test(characterUrl);
+
+    if (isCharacterUrl) {
+      // Open html source, then show second input
+      window.open(`view-source:${characterUrl}`, "_blank");
       setIsMetadataOpen(true);
+      return;
     }
   };
 
@@ -302,7 +318,42 @@ export default function Home() {
     if (selectedCardIndex === null) return;
 
     try {
-      const avatarUrl = `https://ella.janitorai.com/bot-avatars/${avatarPath}`;
+      const storeKey = "Sk--a:a-a--characterStore";
+
+      // Define the anchor points we are looking for
+      const prefix = 'window.mbxM.push(JSON.parse("';
+      const suffix = '"));';
+
+      // Locate the script content
+      const startIndex = pageSource.indexOf(prefix);
+      if (startIndex === -1) {
+        throw new Error("Could not find character data in the page source.");
+      }
+
+      // Move index to the start of the actual JSON string
+      const jsonStartIndex = startIndex + prefix.length;
+
+      // Find the end of the statement
+      const jsonEndIndex = pageSource.indexOf(suffix, jsonStartIndex);
+      if (jsonEndIndex === -1) {
+        throw new Error("Could not find closing tag for JSON content.");
+      }
+
+      // Extract the escaped string
+      const escapedJsonString = pageSource.substring(jsonStartIndex, jsonEndIndex);
+
+      // Wrap it in quotes so it gets treated as a string containing JSON
+      const rawJsonString = JSON.parse(`"${escapedJsonString}"`);
+      console.log(rawJsonString);
+
+      // Parse the actual JSON data into an object
+      const data = JSON.parse(rawJsonString);
+
+      // Return the specific character data
+      const char = data[storeKey].character;
+      setMetadataJson(char);
+
+      const avatarUrl = `https://ella.janitorai.com/bot-avatars/${char.avatar}`;
       const updatedCards = [...cards];
       updatedCards[selectedCardIndex] = {
         ...updatedCards[selectedCardIndex],
@@ -321,7 +372,10 @@ export default function Home() {
 
   return (
       <main className="min-h-screen bg-background text-foreground">
-      <Script src="https://www.googletagmanager.com/gtag/js?id=G-YVD6QFSR71" strategy="afterInteractive" />
+        <Script
+            src="https://www.googletagmanager.com/gtag/js?id=G-YVD6QFSR71"
+            strategy="afterInteractive"
+        />
         <Script id="gtag-init" strategy="afterInteractive">
           {`window.dataLayer = window.dataLayer || [];
         function gtag(){dataLayer.push(arguments);} 
@@ -329,13 +383,73 @@ export default function Home() {
         gtag('config', 'G-YVD6QFSR71');`}
         </Script>
         <div className="container mx-auto px-4 py-8">
-        <div className="flex justify-between items-center mb-4">
+          {/* Mobile Layout */}
+          <div className="sm:hidden mb-4">
+            {/* Row 1: Title on left, Hamburger on right */}
+            <div className="flex justify-between items-start mb-3">
               <div>
-            <h1 className="text-3xl font-bold">Sucker v2.0</h1>
-            <p className="text-sm text-muted-foreground">
-              A couple of updates, see below.
+                <h1 className="text-2xl font-bold">Sucker v2.2</h1>
+                <p className="text-xs text-muted-foreground">
+                  Consider joining Avalon!
                 </p>
               </div>
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button variant="outline" size="icon">
+                    <Menu className="h-4 w-4" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                  <DropdownMenuItem onClick={() => setHowToUseDialogOpen(true)}>
+                    How to Use
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => setMirrorsDialogOpen(true)}>
+                    Mirrors
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => setChangelogDialogOpen(true)}>
+                    Changelog
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+            {/* Row 2: Full-width Refresh button */}
+            <Button
+                onClick={fetchCards}
+                variant="outline"
+                disabled={isRefreshing}
+                className="w-full"
+            >
+              {isRefreshing ? "Refreshing..." : "Refresh"}
+            </Button>
+          </div>
+
+          {/* Desktop Layout */}
+          <div className="hidden sm:flex justify-between items-center mb-4">
+            <div>
+              <h1 className="text-3xl font-bold">Sucker v2.2</h1>
+              <p className="text-sm text-muted-foreground">
+                Consider joining Avalon!
+              </p>
+            </div>
+            <div className="flex gap-2">
+              <Button
+                  onClick={() => setHowToUseDialogOpen(true)}
+                  variant="outline"
+              >
+                How to Use
+              </Button>
+              <Button
+                  onClick={() => setMirrorsDialogOpen(true)}
+                  variant="outline"
+              >
+                Mirrors
+              </Button>
+              <Button
+                  onClick={() => setChangelogDialogOpen(true)}
+                  variant="outline"
+              >
+                Changelog
+              </Button>
               <Button
                   onClick={fetchCards}
                   variant="outline"
@@ -344,107 +458,19 @@ export default function Home() {
                 {isRefreshing ? "Refreshing..." : "Refresh"}
               </Button>
             </div>
+          </div>
 
           <Separator className="my-4" />
-        <div className="mb-8">
-          <div className="bg-blue-50 dark:bg-blue-950 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
-            <div className="flex flex-col justify-between">
-              <span className="text-lg font-semibold text-blue-800 dark:text-blue-200">
-                V2 charcard format, multi-turn support for scripts/lorebooks,
-                alternate greetings.
-              </span>
-              <p className="text-sm text-muted-foreground">
-                Sucker now tracks changes to character descriptions and
-                scenarios across multiple messages. Cards with multiple versions
-                show a version badge and offer a "Download Changes" button to
-                get the change history.
-                <br />
-                Alternate greetings are also supported. Sucker will provide you
-                with a conversation ID that you can use to start off a new chat
-                when capturing alternate greetings, send it as first message
-                instead of the character name.
-                <br />
-                Directions are updated below. Make sure you read 'em.
-                <br />
-                If you're interested in hosting your own sucker instance, lmk
-                via Discord: @lyseverian, I've made the GH repo private for now.
-              </p>
-            </div>
-          </div>
-        </div>
 
-        <Collapsible
-          open={isInstructionsOpen}
-          onOpenChange={setIsInstructionsOpen}
-          className="w-full mb-8"
-        >
-          <div className="flex items-center justify-between">
-            <h2 className="text-2xl font-semibold">How to Use</h2>
-            <CollapsibleTrigger asChild>
-              <Button variant="ghost" size="sm" className="w-9 p-0">
-                {isInstructionsOpen ? (
-                  <ChevronUp className="h-4 w-4" />
-                ) : (
-                  <ChevronDown className="h-4 w-4" />
+          {/* Discord Banner - Disabled if NEXT_PUBLIC_DISABLE_DISCORD_BANNER is set */}
+          {process.env.NEXT_PUBLIC_DISABLE_DISCORD_BANNER !== "true" && (
+              <DiscordBannerPermanent
+                  inviteLink="https://discord.gg/5jQKkCfHP3"
+                  serverName="Avalon"
+                  description="Looking for somewhere more... interesting? Avalon's an enchanted collective of botmakers who refuse to be boring 🌿 Come play with us~ (18+ only, darling)"
+                  ctaText="Join Server"
+              />
           )}
-                <span className="sr-only">Toggle instructions</span>
-              </Button>
-            </CollapsibleTrigger>
-          </div>
-          <CollapsibleContent className="mt-4">
-            <div className="prose dark:prose-invert max-w-none">
-              <p className="mb-2">
-                Follow every instruction here to the letter because it's all you
-                need to know and I have no intent of helping you further.
-              </p>
-              <ol className="list-decimal list-inside">
-                <li className="mb-2">
-                  Put <code style={{ color: "#fff0b9" }}>{proxyUrl}</code> in your
-                  API settings, any value for model and key.
-                </li>
-                <li className="mb-2">
-                  REQUIRED: Set your custom prompt to <code style={{ color: "#fff0b9" }}>&lt;.&gt;</code>
-                </li>
-                <li className="mb-2">
-                  REQUIRED: Set your persona (or create a new one) with the name{" "}
-                  <code style={{ color: "#fff0b9" }}>&#123;user&#125;</code> and the description should only
-                  have <code style={{ color: "#fff0b9" }}>.</code> in it.
-                </li>
-                <li className="mb-2">
-                  Save settings and refresh the page. Not this page. <i>That</i>{" "}
-                  page.
-                </li>
-                <li className="mb-2">Start a new chat with a character.</li>
-                <li className="mb-2">
-                  Char name inference is implemented: if you send just a dot: <code style={{ color: "#fff0b9" }}>.</code>, sucker will use the inferred name from the persona tag, or you can send the character name yourself.
-                </li>
-                <li className="mb-2">
-                  Hit the Refresh button here, and the cards should appear here.
-                </li>
-                <li className="mb-2">
-                  If you're interested in capturing alternate greetings, start a
-                  new chat and send the conversation ID as first message instead
-                  of the character name. The format is{" "}
-                  <code style={{ color: "#fff0b9" }}>[sucker:conv=conversationId]</code> which you'll be
-                  given when creating a new card.
-                </li>
-                <li className="mb-2">
-                  You can also send more messages with possible keywords to trigger scripts/lorebooks. Sucker will track changes to the description and scenario fields. Cards with multiple versions will show a version badge and offer a "Download Changes" button to get a detailed change
-                  history with timestamps. Unfortunately, lorebook creation is out of scope at the moment, but you can use the changes detected to modify the character card yourself post-export.
-                </li>
-                <li className="mb-2">
-                  Download the JSON files or go through a little more effort to
-                  get PNGs instead.
-                </li>
-              </ol>
-              <p className="mb-2">
-                Extractions will only last for 10 minutes, after which they're
-                discarded. Reloading the page will remove any attached avatars.
-                I'm not storing shit.
-              </p>
-            </div>
-          </CollapsibleContent>
-        </Collapsible>
 
           <div className="max-w-3xl mx-auto space-y-6">
             {cards.length === 0 ? (
@@ -544,8 +570,7 @@ export default function Home() {
                                     card.alternate_greetings.length > 0 && (
                                         <div className="mt-4">
                                           <div className="flex items-center justify-between mb-2">
-                                  <h4 className="font-medium">{`Alternate Greetings (${
-                                    card.alternate_greetings?.length || 0
+                                            <h4 className="font-medium">{`Alternate Greetings (${card.alternate_greetings?.length || 0
                                             })`}</h4>
                                             <div className="flex items-center gap-2">
                                               <Button
@@ -734,7 +759,7 @@ export default function Home() {
                                   onClick={() => handleOpenDialog(index)}
                                   variant="outline"
                               >
-                        Fetch Avatar (required for PNG)
+                                Fetch Metadata
                               </Button>
                           ) : (
                               <Button
@@ -742,7 +767,7 @@ export default function Home() {
                                   variant="default"
                                   disabled={!card.avatarUrl}
                               >
-                        Download PNG
+                                Download Complete Card
                               </Button>
                           )}
                         </div>
@@ -753,48 +778,257 @@ export default function Home() {
           </div>
         </div>
 
+        {/* How to Use Dialog */}
+        <Dialog open={howToUseDialogOpen} onOpenChange={setHowToUseDialogOpen}>
+          <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
+            <DialogHeader>
+              <DialogTitle>How to Use</DialogTitle>
+              <DialogDescription>
+                Follow every instruction here to the letter because it&apos;s all you
+                need to know and I have no intent of helping you further.
+              </DialogDescription>
+            </DialogHeader>
+            <div className="prose dark:prose-invert max-w-none">
+              <ol className="list-decimal list-inside space-y-3 text-sm">
+                <li>
+                  Put <code className="bg-muted px-1 py-0.5 rounded text-yellow-600">{proxyUrl}</code> in
+                  your API settings, any value for model and key.
+                </li>
+                <li>
+                  REQUIRED: Set your custom prompt to{" "}
+                  <code className="bg-muted px-1 py-0.5 rounded text-yellow-600">&lt;.&gt;</code>
+                </li>
+                <li>
+                  REQUIRED: Set your persona (or create a new one) with the name{" "}
+                  <code className="bg-muted px-1 py-0.5 rounded text-yellow-600">&#123;user&#125;</code> and
+                  the description should only have{" "}
+                  <code className="bg-muted px-1 py-0.5 rounded text-yellow-600">.</code> in it.
+                </li>
+                <li>
+                  Save settings and refresh the page. Not this page. <i>That</i>{" "}
+                  page.
+                </li>
+                <li>Start a new chat with a character.</li>
+                <li>
+                  Char name inference is implemented: if you send just a dot:{" "}
+                  <code className="bg-muted px-1 py-0.5 rounded text-yellow-600">.</code>, sucker will use
+                  the inferred name from the persona tag, or you can send the
+                  character name yourself.
+                </li>
+                <li>
+                  Hit the Refresh button here, and the cards should appear here.
+                </li>
+                <li>
+                  If you&apos;re interested in capturing alternate greetings, start a
+                  new chat and send the conversation ID as first message instead
+                  of the character name. The format is{" "}
+                  <code className="bg-muted px-1 py-0.5 rounded text-yellow-600">
+                    [sucker:conv=conversationId]
+                  </code>{" "}
+                  which you&apos;ll be given when creating a new card.
+                </li>
+                <li>
+                  You can also send more messages with possible keywords to
+                  trigger scripts/lorebooks. Sucker will track changes to the
+                  description and scenario fields. Cards with multiple versions
+                  will show a version badge and offer a &quot;Download Changes&quot;
+                  button to get a detailed change history with timestamps.
+                  Unfortunately, lorebook creation is out of scope at the
+                  moment, but you can use the changes detected to modify the
+                  character card yourself post-export.
+                </li>
+                <li>
+                  Download the JSON files or go through a little more effort to
+                  get PNGs instead.
+                </li>
+              </ol>
+              <p className="mt-4 text-sm text-muted-foreground">
+                Extractions will only last for 10 minutes, after which they&apos;re
+                discarded. Reloading the page will remove any attached avatars.
+                I&apos;m not storing shit.
+              </p>
+            </div>
+          </DialogContent>
+        </Dialog>
+
+        {/* Mirrors Dialog */}
+        <Dialog open={mirrorsDialogOpen} onOpenChange={setMirrorsDialogOpen}>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Sucker Mirrors</DialogTitle>
+              <DialogDescription>
+                Sucker goes down sometimes on severian.dev because I use the
+                server for other stuff. Here&apos;s a full list of existing sucker
+                instances (thanks to those who signed up for it!):
+              </DialogDescription>
+            </DialogHeader>
+            <div className="space-y-2">
+              <ul className="text-sm flex flex-col gap-2">
+                <li>
+                  <a
+                      className="text-yellow-600 hover:underline"
+                      href="https://sucker.severian.dev"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                  >
+                    severian.dev
+                  </a>
+                </li>
+                <li>
+                  <a
+                      className="text-yellow-600 hover:underline"
+                      href="https://sucker.trashpanda.land"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                  >
+                    trashpanda.land
+                  </a>
+                </li>
+                <li>
+                  <a
+                      className="text-yellow-600 hover:underline"
+                      href="https://sucker.hitani.me"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                  >
+                    hitani.me
+                  </a>
+                </li>
+                <li>
+                  <a
+                      className="text-yellow-600 hover:underline"
+                      href="https://succ.portalnexus.link"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                  >
+                    portalnexus.link
+                  </a>
+                </li>
+                <li>
+                  <a
+                      className="text-yellow-600 hover:underline"
+                      href="https://sucker.lemuria.dev"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                  >
+                    lemuria.dev
+                  </a>
+                </li>
+              </ul>
+              <p className="text-sm text-muted-foreground pt-4">
+                If you&apos;re interested in hosting your own sucker instance, lmk
+                via Discord: @lyseverian, I&apos;ve made the GH repo private for
+                now. Or send me a message if there&apos;s anything you think that
+                could be added here, open to suggestions.
+              </p>
+            </div>
+          </DialogContent>
+        </Dialog>
+
+        {/* Changelog Dialog */}
+        <Dialog open={changelogDialogOpen} onOpenChange={setChangelogDialogOpen}>
+          <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
+            <DialogHeader>
+              <DialogTitle>Changelog</DialogTitle>
+              <DialogDescription>
+                Recent updates and changes to Sucker
+              </DialogDescription>
+            </DialogHeader>
+            <div className="space-y-6">
+              <div>
+                <h3 className="font-semibold text-lg mb-2">Jan 2026 - Direct image input</h3>
+                <div className="space-y-2 text-sm text-muted-foreground">
+                  <p>
+                    You can now paste webp filenames (like id.webp) or full image URLs
+                    directly into the avatar field without having to open the metadata tab first.
+                  </p>
+                  <p>
+                    Makes grabbing avatars way faster when you already know the image path.
+                  </p>
+                  <p>
+                    You should also consider joining our new thing, a Discord community server for botmakers:{" "}
+                    <a
+                        href="https://discord.gg/5jQKkCfHP3"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-primary hover:underline"
+                    >
+                      discord.gg/5jQKkCfHP3
+                    </a>
+                  </p>
+                </div>
+              </div>
+              <Separator />
+              <div>
+                <h3 className="font-semibold text-lg mb-2">Dec 2025 - A note about fetching avatars</h3>
+                <div className="space-y-2 text-sm text-muted-foreground">
+                  <p>
+                    The platform you suck from has implemented limited visibility
+                    of metadata for certain content with a particular &apos;obscenity
+                    rating&apos;. This means that in some cases, the Fetch Avatar flow
+                    here will show a 404 - character not found error at the end.
+                  </p>
+                  <p>
+                    Sometimes (but not always), the avatar URL can still be
+                    fetched after a day or two since the bot was published.
+                  </p>
+                  <p>
+                    As of this moment, can&apos;t really find a fix for it, so you&apos;ll
+                    have to download the image yourself and just add the image to
+                    the card someplace else.
+                  </p>
+                </div>
+              </div>
+              <Separator />
+              <div>
+                <h3 className="font-semibold text-lg mb-2">
+                  Oct 2025 - V2 charcard format, multi-turn support
+                </h3>
+                <div className="text-sm text-muted-foreground space-y-2">
+                  <p>
+                    Sucker now tracks changes to character descriptions and
+                    scenarios across multiple messages. Cards with multiple versions
+                    show a version badge and offer a &quot;Download Changes&quot; button to
+                    get the change history.
+                  </p>
+                  <p>
+                    Alternate greetings are also supported. Sucker will provide you
+                    with a conversation ID that you can use to start off a new chat
+                    when capturing alternate greetings, send it as first message
+                    instead of the character name.
+                  </p>
+                  <p>
+                    Directions are updated below. Make sure you read &apos;em.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </DialogContent>
+        </Dialog>
+
         <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
           <DialogContent>
             <DialogHeader>
               <DialogTitle>
-              {isMetadataOpen ? "Enter Avatar Path" : "Enter Character URL"}
+                {isMetadataOpen ? "Enter Page Source Code" : "Fetch Metadata"}
               </DialogTitle>
               <DialogDescription>
-              {isMetadataOpen
-                ? "Look for the avatar field in the opened tab and paste the value here."
-                : "Enter the Janitor character URL (https://janitorai.com/characters/...)."}
+                {isMetadataOpen ? "Paste the entire source code here." : "Enter a character URL (janitorai.com/characters/...) to open page source."}
               </DialogDescription>
             </DialogHeader>
 
             {isMetadataOpen ? (
                 <div className="space-y-4">
-              <Input
-                placeholder="id.webp"
-                value={avatarPath}
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                  setAvatarPath(e.target.value)
-                }
-              />
+                  <Input placeholder="<!DOCTYPE html><html..." value={pageSource} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setPageSource(e.target.value)} />
                   <Button onClick={handleFetchAvatar} className="w-full">
-                Fetch Avatar
+                    Fetch Metadata
                   </Button>
                 </div>
             ) : (
                 <div className="space-y-4">
-              <Input
-                placeholder="https://janitorai.com/characters/..."
-                value={characterUrl}
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                  setCharacterUrl(e.target.value)
-                }
-              />
-              <p className="text-sm text-muted-foreground">
-                Upon clicking this button, a new tab will open with the
-                character's metadata. Look for the avatar field and copy the
-                value before returning to this page.
-              </p>
+                  <Input placeholder="URL" value={characterUrl} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setCharacterUrl(e.target.value)} />
                   <Button onClick={handleOpenMetadata} className="w-full">
-                Open Metadata
+                    Fetch Metadata
                   </Button>
                 </div>
             )}

src/components/ui/discord-banner-permanent.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import Image from "next/image";
+
+interface DiscordBannerPermanentProps {
+  inviteLink: string;
+  serverName?: string;
+  description?: string;
+  ctaText?: string;
+}
+
+export function DiscordBannerPermanent({
+  inviteLink,
+  serverName = "Avalon",
+  description = "Looking for somewhere more... interesting? Avalon's an enchanted collective of botmakers who refuse to be boring 🌿 Come play with us~ (18+ only, darling)",
+  ctaText = "Join Server",
+}: DiscordBannerPermanentProps) {
+  return (
+    <div className="relative rounded-lg overflow-hidden shadow-lg mb-4 bg-[#36393f]">
+      {/* Background Image */}
+      <div className="absolute inset-0">
+        <Image
+          src="/avalon/bg.webp"
+          alt="Background"
+          fill
+          className="object-cover opacity-20"
+        />
+      </div>
+
+      {/* Content */}
+      <div className="relative p-3 sm:p-4">
+        {/* Chat Message Style */}
+        <div className="flex gap-3 mb-2">
+          {/* Morgana Avatar */}
+          <div className="flex-shrink-0 pt-0.5">
+            <Image
+              src="/avalon/morgana-thumb.webp"
+              alt="Morgana"
+              width={40}
+              height={40}
+              className="rounded-full w-10 h-10"
+            />
+          </div>
+
+          {/* Message Content */}
+          <div className="flex-1 min-w-0">
+            <div className="flex items-baseline gap-2 mb-0.5">
+              <span className="text-white font-medium text-[15px]">Morgana</span>
+              <span className="text-[#a3a6aa] text-[11px] font-medium">Today at {new Date().toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true })}</span>
+            </div>
+            <div className="text-[#dcddde] text-[15px] leading-[1.375rem] mb-2">
+              {description}
+            </div>
+
+            {/* Server Invite Embed */}
+            <div className="bg-[#2f3136] rounded border-l-4 border-[#5865F2] overflow-hidden max-w-[432px]">
+              <div className="p-4 pb-3">
+                <div className="text-[#00b0f4] text-xs font-semibold uppercase mb-2">
+                  You&apos;ve been invited to join a server
+                </div>
+                <div className="flex items-center gap-4">
+                  <Image
+                    src="/avalon/avalon-pfp.webp"
+                    alt="Avalon"
+                    width={50}
+                    height={50}
+                    className="rounded-2xl w-[50px] h-[50px] flex-shrink-0"
+                  />
+                  <div className="flex-1 min-w-0">
+                    <div className="text-white font-semibold text-base mb-0.5">{serverName}</div>
+                    <div className="text-[#b9bbbe] text-sm space-y-0.5">
+                      <div className="font-medium">67 members</div>
+                      <a
+                        href="https://from-avalon.com"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-[#00aff4] hover:underline text-xs inline-block"
+                      >
+                        from-avalon.com
+                      </a>
+                    </div>
+                  </div>
+                  <a
+                    href={inviteLink}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="bg-[#248046] hover:bg-[#1a6334] text-white px-4 py-2 text-sm rounded font-medium transition-colors flex-shrink-0"
+                  >
+                    {ctaText}
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Trash Panda Icon - Bottom Right */}
+        <div className="absolute bottom-1.5 right-1.5">
+          <Image
+            src="/avalon/trashpanda.webp"
+            alt=""
+            width={20}
+            height={20}
+            className="rounded-full w-5 h-5 ring-1 ring-black/20 opacity-60 hover:opacity-100 transition-opacity"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className = "", sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={`z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ${className}`}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className = "", inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={`relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 ${
+      inset ? "pl-8" : ""
+    } ${className}`}
+    {...props}
+  />
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem };

tsconfig.json

@@ -2,8 +2,14 @@
   "compilerOptions": {
     "baseUrl": ".",
     "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "types": ["node"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "types": [
+      "node"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -13,7 +19,7 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "plugins": [
       {
@@ -21,9 +27,19 @@
       }
     ],
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": [
+        "./src/*"
+      ]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }