attempt at metadata grabbing

.env

@@ -2,4 +2,4 @@
 
 # Disable Discord community banner (optional)
 # Uncomment the line below to hide the Discord banner
-# NEXT_PUBLIC_DISABLE_DISCORD_BANNER=true
+NEXT_PUBLIC_DISABLE_DISCORD_BANNER=true

.gitignore

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

README.md

@@ -17,8 +17,6 @@ You can also build and run Sucker as a Docker container with `docker compose bui
 
 ### Changelog
 
-- 2.4: CSS editor for Janitor profiles. New banner links to the live-preview editor at tools.from-avalon.com/janitor-profile-maker.
-- 2.3: ECHO. Put ECHO: anywhere in a message and sucker repeats whatever comes after it in the reply — for triggering char-side script and lorebook keywords.
 - 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.

docker-compose.yml

@@ -2,6 +2,5 @@ services:
   web:
     build: .
     image: sucker
-    restart: unless-stopped
     ports:
       - "3000:3000"

src/app/api/proxy/route.ts

@@ -93,15 +93,6 @@ function parseConversationToken(content: string | undefined | null): string | nu
   return null;
 }
 
-function parseEchoText(content: string | undefined | null): string | null {
-  if (!content) return null;
-  const match = content.match(/ECHO:\s*([\s\S]+)/i);
-  if (match && match[1].trim()) {
-    return match[1].trim();
-  }
-  return null;
-}
-
 function removePersonaTags(content: string): string {
   let result = content;
   const openingMatch = result.match(/<[^<>]+?\s*'s\s+Persona>/i);
@@ -496,18 +487,6 @@ export async function POST(request: NextRequest) {
       responseMessage = `New character "${extracted.data.name}" created (v1).${tokenNote}`;
     }
 
-    // Echo back anything the user sent after an "ECHO:" marker in their
-    // latest message, appended after the normal status message
-    const lastUserMessage =
-      [...body.messages]
-        .reverse()
-        .find((m: { role?: string }) => m?.role === "user") ??
-      body.messages[body.messages.length - 1];
-    const echoText = parseEchoText(lastUserMessage?.content);
-    if (echoText) {
-      responseMessage += `\n\n${echoText}`;
-    }
-
     cleanupExpiredCards();
 
     // Return SSE response if requested, otherwise JSON
@@ -549,7 +528,7 @@ export async function POST(request: NextRequest) {
     console.error("Error processing request:", error);
 
     const errorMessage =
-      "You dingus, read the directions on sucker before trying again. If you're trying to suck a bot with more tokens than your current context limit, try bumping your Context Size setting up on Generation Settings.";
+      "You dingus, read the directions on sucker before trying again.";
 
     // Check if this was a streaming request
     const acceptHeader = request.headers.get("accept");

src/app/page.tsx

@@ -32,8 +32,6 @@ import {
   DropdownMenuItem,
 } from "@/components/ui/dropdown-menu";
 import { DiscordBannerPermanent } from "@/components/ui/discord-banner-permanent";
-import { CssEditorBanner } from "@/components/ui/css-editor-banner";
-import { BannerCarousel } from "@/components/ui/banner-carousel";
 import Script from "next/script";
 
 interface CardDataV2 {
@@ -91,6 +89,9 @@ export default function Home() {
       "https://sucker.severian.dev/api/proxy"
   );
 
+  const [pageSource, setPageSource] = useState("");
+  const [metadataJson, setMetadataJson] = useState<any>(null);
+
   const fetchCards = async () => {
     try {
       setIsRefreshing(true);
@@ -235,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 = {
@@ -246,13 +256,13 @@ export default function Home() {
           personality: chosen.personality,
           mes_example: chosen.mes_example,
           scenario: chosen.scenario,
-          creator: (chosen as any).creator || "",
+          creator: creator,
-          creator_notes: (chosen as any).creator_notes || "",
+          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 || [],
+          tags: allTagsArray,
-          character_version: (chosen as any).character_version || "1",
+          character_version: safeMetadata.name || (chosen as any).character_version || "1",
           extensions: (chosen as any).extensions || {},
         },
         spec: card.spec || "chara_card_v2",
@@ -297,39 +307,9 @@ export default function Home() {
     const isCharacterUrl = /janitorai\.com\/characters\//.test(characterUrl);
 
     if (isCharacterUrl) {
-      // Extract character ID and open metadata page, then show second input
+      // Open html source, then show second input
-      const match = characterUrl.match(/characters\/([\w-]+)/);
+      window.open(`view-source:${characterUrl}`, "_blank");
-      if (match && match[1]) {
-        const characterId = match[1].split("_")[0];
-        window.open(
-          `https://janitorai.com/hampter/characters/${characterId}`,
-          "_blank"
-        );
       setIsMetadataOpen(true);
-      }
-      return;
-    }
-
-    // Check if the input is a direct image link (webp filename or full image URL)
-    const isImagePath = /\.(webp|png|jpg|jpeg|gif)(\?.*)?$/i.test(characterUrl);
-    const isFullImageUrl = (characterUrl.startsWith("http://") || characterUrl.startsWith("https://")) && isImagePath;
-    const isWebpFilename = /^[\w-]+\.(webp|png|jpg|jpeg|gif)$/i.test(characterUrl);
-
-    if (isFullImageUrl || isWebpFilename) {
-      // Directly set the avatar URL without opening metadata
-      if (selectedCardIndex === null) return;
-
-      const avatarUrl = isFullImageUrl
-        ? characterUrl
-        : `https://ella.janitorai.com/bot-avatars/${characterUrl}`;
-
-      const updatedCards = [...cards];
-      updatedCards[selectedCardIndex] = {
-        ...updatedCards[selectedCardIndex],
-        avatarUrl,
-      };
-      setCards(updatedCards);
-      setDialogOpen(false);
       return;
     }
   };
@@ -338,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],
@@ -373,9 +388,9 @@ export default function Home() {
             {/* Row 1: Title on left, Hamburger on right */}
             <div className="flex justify-between items-start mb-3">
               <div>
-              <h1 className="text-2xl font-bold">Sucker v2.4</h1>
+                <h1 className="text-2xl font-bold">Sucker v2.2</h1>
                 <p className="text-xs text-muted-foreground">
-                ECHO: Consider joining Avalon!
+                  Consider joining Avalon!
                 </p>
               </div>
               <DropdownMenu>
@@ -411,9 +426,9 @@ export default function Home() {
           {/* Desktop Layout */}
           <div className="hidden sm:flex justify-between items-center mb-4">
             <div>
-            <h1 className="text-3xl font-bold">Sucker v2.4</h1>
+              <h1 className="text-3xl font-bold">Sucker v2.2</h1>
               <p className="text-sm text-muted-foreground">
-              ECHO: Consider joining Avalon!
+                Consider joining Avalon!
               </p>
             </div>
             <div className="flex gap-2">
@@ -449,35 +464,12 @@ export default function Home() {
 
           {/* Discord Banner - Disabled if NEXT_PUBLIC_DISABLE_DISCORD_BANNER is set */}
           {process.env.NEXT_PUBLIC_DISABLE_DISCORD_BANNER !== "true" && (
-          <>
-            {/* Desktop: banners side by side */}
-            <div className="hidden md:flex gap-4 mb-4 items-stretch">
               <DiscordBannerPermanent
                   inviteLink="https://discord.gg/5jQKkCfHP3"
                   serverName="Avalon"
-                description="Avalon is an enchanted creative haven for a growing collective of botmakers and users—part workshop, part myth, part digital forest where strange and beautiful ideas come to life. Enter our little woodland here:"
+                  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"
-                className="flex-1 min-w-0"
               />
-              <CssEditorBanner className="flex-shrink-0 aspect-[16/10] w-[300px] lg:w-[360px] xl:w-[400px]" />
-            </div>
-
-            {/* Mobile: carousel */}
-            <BannerCarousel
-              className="md:hidden mb-4"
-              slides={[
-                <DiscordBannerPermanent
-                  key="avalon"
-                  inviteLink="https://discord.gg/5jQKkCfHP3"
-                  serverName="Avalon"
-                  description="Avalon is an enchanted creative haven for a growing collective of botmakers and users—part workshop, part myth, part digital forest where strange and beautiful ideas come to life. Enter our little woodland here:"
-                  ctaText="Join Server"
-                  className="h-full"
-                />,
-                <CssEditorBanner key="css" className="h-full" fit="contain" />,
-              ]}
-            />
-          </>
           )}
 
           <div className="max-w-3xl mx-auto space-y-6">
@@ -767,7 +759,7 @@ export default function Home() {
                                   onClick={() => handleOpenDialog(index)}
                                   variant="outline"
                               >
-                        Fetch Avatar (required for PNG)
+                                Fetch Metadata
                               </Button>
                           ) : (
                               <Button
@@ -775,7 +767,7 @@ export default function Home() {
                                   variant="default"
                                   disabled={!card.avatarUrl}
                               >
-                        Download PNG
+                                Download Complete Card
                               </Button>
                           )}
                         </div>
@@ -845,14 +837,6 @@ export default function Home() {
                   moment, but you can use the changes detected to modify the
                   character card yourself post-export.
                 </li>
-              <li>
-                Some advanced scripts and lorebooks only add their entries
-                when the <i>character</i> says the keyword, not you. Put{" "}
-                <code className="bg-muted px-1 py-0.5 rounded text-yellow-600">ECHO:</code>{" "}
-                in a message and everything after it gets repeated at the end
-                of the reply — instant character-side keywords, and sucker
-                tracks whatever gets added.
-              </li>
                 <li>
                   Download the JSON files or go through a little more effort to
                   get PNGs instead.
@@ -930,16 +914,6 @@ export default function Home() {
                     lemuria.dev
                   </a>
                 </li>
-              <li>
-                <a
-                  className="text-yellow-600 hover:underline"
-                  href="https://milker.ladyofpa.in/"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  ladyofpa.in
-                </a>
-              </li>
               </ul>
               <p className="text-sm text-muted-foreground pt-4">
                 If you&apos;re interested in hosting your own sucker instance, lmk
@@ -961,69 +935,6 @@ export default function Home() {
               </DialogDescription>
             </DialogHeader>
             <div className="space-y-6">
-            <div>
-              <h3 className="font-semibold text-lg mb-2">Sep 2026 - CSS Editor for Janitor profiles</h3>
-              <div className="space-y-2 text-sm text-muted-foreground">
-                <p>
-                  We&apos;d like to introduce a CSS editor we have been working
-                  on for Janitor profiles. It comes loaded with some simple
-                  presets, and we plan to include more in the future, be it
-                  ours or provided by the community. You can see changes occur
-                  in live time and it should accurately represent the
-                  behaviour of the CSS if used in your Janitor profile.
-                </p>
-                <p>
-                  Check it out at{" "}
-                  <a
-                    href="https://tools.from-avalon.com/janitor-profile-maker/"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="text-blue-500 hover:underline"
-                  >
-                    tools.from-avalon.com/janitor-profile-maker
-                  </a>{" "}
-                  and DM eslezer on Discord if you have any bug or suggestion
-                  for the editor.
-                </p>
-              </div>
-            </div>
-            <Separator />
-            <div>
-              <h3 className="font-semibold text-lg mb-2">Aug 2026 - ECHO</h3>
-              <div className="space-y-2 text-sm text-muted-foreground">
-                <p>
-                  Sucker can parrot now. Send a message with ECHO: in it, and
-                  everything after that gets repeated back at the end of the
-                  reply, exactly as you typed it.
-                </p>
-                <p>
-                  The usual responses don&apos;t change at all — the echoed part
-                  just tags along after them. The point: some of the fancier
-                  scripts and lorebooks on the platform you suck from only add
-                  their entries when the character says the keyword, not you.
-                  ECHO plants your words on the character&apos;s side of the
-                  chat, those entries fire, and sucker catches whatever they
-                  sneak in. Case doesn&apos;t matter, echo: works too.
-                </p>
-              </div>
-            </div>
-            <Separator />
-            <div>
-              <h3 className="font-semibold text-lg mb-2">Mar 2026 - Better error messaging for context size issues</h3>
-              <div className="space-y-2 text-sm text-muted-foreground">
-                <p>
-                  Identified an issue where attempting to pull bots with token counts
-                  greater than your configured context size would result in a dingus error
-                  with no useful explanation.
-                </p>
-                <p>
-                  Revised the error message to surface this more accurately. It now
-                  tells you to bump your Context Size in Generation Settings if you
-                  suspect this is the cause.
-                </p>
-              </div>
-            </div>
-            <Separator />
               <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">
@@ -1099,43 +1010,25 @@ export default function Home() {
           <DialogContent>
             <DialogHeader>
               <DialogTitle>
-              {isMetadataOpen ? "Enter Avatar Path" : "Fetch Avatar"}
+                {isMetadataOpen ? "Enter Page Source Code" : "Fetch Metadata"}
               </DialogTitle>
               <DialogDescription>
-              {isMetadataOpen
+                {isMetadataOpen ? "Paste the entire source code here." : "Enter a character URL (janitorai.com/characters/...) to open page source."}
-                ? "Look for the avatar field in the opened tab and paste the value here."
-                : "Enter a character URL (janitorai.com/characters/...) to open metadata, or paste an image filename (id.webp) or full image URL directly."}
               </DialogDescription>
             </DialogHeader>
 
             {isMetadataOpen ? (
                 <div className="space-y-4">
-              <Input
+                  <Input placeholder="<!DOCTYPE html><html..." value={pageSource} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setPageSource(e.target.value)} />
-                placeholder="id.webp"
-                value={avatarPath}
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                  setAvatarPath(e.target.value)
-                }
-              />
                   <Button onClick={handleFetchAvatar} className="w-full">
-                Fetch Avatar
+                    Fetch Metadata
                   </Button>
                 </div>
             ) : (
                 <div className="space-y-4">
-              <Input
+                  <Input placeholder="URL" value={characterUrl} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setCharacterUrl(e.target.value)} />
-                placeholder="URL or id.webp"
-                value={characterUrl}
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                  setCharacterUrl(e.target.value)
-                }
-              />
-              <p className="text-sm text-muted-foreground">
-                For character URLs, a new tab will open with metadata. For image
-                filenames or full image URLs, the avatar will be set directly.
-              </p>
                   <Button onClick={handleOpenMetadata} className="w-full">
-                Fetch Avatar
+                    Fetch Metadata
                   </Button>
                 </div>
             )}

src/components/ui/banner-carousel.tsx

@@ -1,85 +0,0 @@
-"use client";
-
-import { useState, useEffect, ReactNode } from "react";
-import { ChevronLeft, ChevronRight } from "lucide-react";
-
-interface BannerCarouselProps {
-  slides: ReactNode[];
-  intervalMs?: number;
-  className?: string;
-}
-
-export function BannerCarousel({
-  slides,
-  intervalMs = 8000,
-  className = "",
-}: BannerCarouselProps) {
-  const [index, setIndex] = useState(0);
-
-  // Pick a random starting slide on the client to avoid hydration mismatch
-  useEffect(() => {
-    setIndex(Math.floor(Math.random() * slides.length));
-  }, [slides.length]);
-
-  // Re-keyed on index so a manual change restarts the countdown
-  useEffect(() => {
-    const id = setTimeout(
-      () => setIndex((i) => (i + 1) % slides.length),
-      intervalMs
-    );
-    return () => clearTimeout(id);
-  }, [index, intervalMs, slides.length]);
-
-  const go = (delta: number) =>
-    setIndex((i) => (i + delta + slides.length) % slides.length);
-
-  return (
-    <div className={`relative ${className}`}>
-      {/* Slides stacked in one grid cell so the container fits the tallest */}
-      <div className="grid">
-        {slides.map((slide, i) => (
-          <div
-            key={i}
-            className={`[grid-area:1/1] transition-opacity duration-500 ${
-              i === index ? "opacity-100" : "opacity-0 pointer-events-none"
-            }`}
-            aria-hidden={i !== index}
-          >
-            {slide}
-          </div>
-        ))}
-      </div>
-
-      <button
-        type="button"
-        onClick={() => go(-1)}
-        aria-label="Previous banner"
-        className="absolute left-1.5 top-1/2 -translate-y-1/2 rounded-full bg-black/50 hover:bg-black/70 text-white p-1 transition-colors"
-      >
-        <ChevronLeft className="h-4 w-4" />
-      </button>
-      <button
-        type="button"
-        onClick={() => go(1)}
-        aria-label="Next banner"
-        className="absolute right-1.5 top-1/2 -translate-y-1/2 rounded-full bg-black/50 hover:bg-black/70 text-white p-1 transition-colors"
-      >
-        <ChevronRight className="h-4 w-4" />
-      </button>
-
-      <div className="absolute bottom-2 left-1/2 -translate-x-1/2 flex gap-1.5">
-        {slides.map((_, i) => (
-          <button
-            key={i}
-            type="button"
-            onClick={() => setIndex(i)}
-            aria-label={`Show banner ${i + 1}`}
-            className={`h-1.5 rounded-full transition-all ${
-              i === index ? "w-4 bg-white" : "w-1.5 bg-white/50"
-            }`}
-          />
-        ))}
-      </div>
-    </div>
-  );
-}

src/components/ui/css-editor-banner.tsx

@@ -1,100 +0,0 @@
-"use client";
-
-import { useEffect, useRef } from "react";
-
-interface CssEditorBannerProps {
-  href?: string;
-  className?: string;
-  /** "contain" letterboxes the video so its caption is never cropped */
-  fit?: "cover" | "contain";
-}
-
-export function CssEditorBanner({
-  href = "https://tools.from-avalon.com/janitor-profile-maker/",
-  className = "",
-  fit = "cover",
-}: CssEditorBannerProps) {
-  const videoRef = useRef<HTMLVideoElement>(null);
-  const canvasRef = useRef<HTMLCanvasElement>(null);
-
-  // Browsers like Opera GX overlay pop-out controls on large <video> elements.
-  // The real video stays 1px and invisible; its frames are painted onto a canvas.
-  useEffect(() => {
-    const video = videoRef.current;
-    const canvas = canvasRef.current;
-    const ctx = canvas?.getContext("2d");
-    if (!video || !canvas || !ctx) return;
-
-    const resize = () => {
-      const dpr = window.devicePixelRatio || 1;
-      canvas.width = Math.round(canvas.clientWidth * dpr);
-      canvas.height = Math.round(canvas.clientHeight * dpr);
-    };
-    resize();
-    const observer = new ResizeObserver(resize);
-    observer.observe(canvas);
-
-    let frame = 0;
-    const draw = () => {
-      const vw = video.videoWidth;
-      const vh = video.videoHeight;
-      const cw = canvas.width;
-      const ch = canvas.height;
-      if (vw && vh && cw && ch) {
-        const scale =
-          fit === "contain"
-            ? Math.min(cw / vw, ch / vh)
-            : Math.max(cw / vw, ch / vh);
-        const w = vw * scale;
-        const h = vh * scale;
-        ctx.clearRect(0, 0, cw, ch);
-        ctx.drawImage(video, (cw - w) / 2, (ch - h) / 2, w, h);
-      }
-      frame = requestAnimationFrame(draw);
-    };
-    frame = requestAnimationFrame(draw);
-
-    // Browsers may pause muted videos they consider hidden; keep it looping.
-    const resume = () => {
-      if (video.paused && document.visibilityState === "visible") {
-        video.play().catch(() => {});
-      }
-    };
-    resume();
-    video.addEventListener("pause", resume);
-    document.addEventListener("visibilitychange", resume);
-    const keepAlive = setInterval(resume, 1000);
-
-    return () => {
-      cancelAnimationFrame(frame);
-      observer.disconnect();
-      clearInterval(keepAlive);
-      video.removeEventListener("pause", resume);
-      document.removeEventListener("visibilitychange", resume);
-    };
-  }, [fit]);
-
-  return (
-    <a
-      href={href}
-      target="_blank"
-      rel="noopener noreferrer"
-      aria-label="Open the Janitor profile CSS editor"
-      className={`block relative rounded-lg overflow-hidden shadow-lg bg-black ${className}`}
-    >
-      <video
-        ref={videoRef}
-        src="/avalon/css-banner.mp4"
-        autoPlay
-        loop
-        muted
-        playsInline
-        disablePictureInPicture
-        preload="auto"
-        aria-hidden
-        className="absolute top-0 left-0 w-px h-px opacity-[0.01] pointer-events-none"
-      />
-      <canvas ref={canvasRef} className="absolute inset-0 w-full h-full" />
-    </a>
-  );
-}

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

@@ -7,18 +7,16 @@ interface DiscordBannerPermanentProps {
   serverName?: string;
   description?: string;
   ctaText?: string;
-  className?: string;
 }
 
 export function DiscordBannerPermanent({
   inviteLink,
   serverName = "Avalon",
-  description = "Avalon is an enchanted creative haven for a growing collective of botmakers and users—part workshop, part myth, part digital forest where strange and beautiful ideas come to life. Enter our little woodland here:",
+  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",
-  className = "mb-4",
 }: DiscordBannerPermanentProps) {
   return (
-    <div className={`relative rounded-lg overflow-hidden shadow-lg bg-[#36393f] ${className}`}>
+    <div className="relative rounded-lg overflow-hidden shadow-lg mb-4 bg-[#36393f]">
       {/* Background Image */}
       <div className="absolute inset-0">
         <Image
@@ -71,7 +69,7 @@ export function DiscordBannerPermanent({
                   <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">885 members</div>
+                      <div className="font-medium">67 members</div>
                       <a
                         href="https://from-avalon.com"
                         target="_blank"