Merge pull request #6 from severian-dev/docker-next-standalone

Docker next standalone

.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.

README.md

@@ -1,9 +1,14 @@
 # Sucker
 
-Check package.json for commands, I can't be bothered.
+### 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.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/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

@@ -14,8 +14,8 @@
     "@radix-ui/react-dialog": "^1.1.4",
     "@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 +23,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

@@ -31,6 +31,7 @@ import {
   Collapsible,
   CollapsibleTrigger,
 } from "@/components/ui/collapsible";
+import { CollapsibleInfobox } from "@/components/ui/collapsible-infobox";
 import Script from "next/script";
 
 interface CardDataV2 {
@@ -82,7 +83,9 @@ export default function Home() {
     Record<string, number>
   >({});
 
-  const [proxyUrl, setProxyUrl] = useState("https://sucker.severian.dev/api/proxy");
+  const [proxyUrl, setProxyUrl] = useState(
+    "https://sucker.severian.dev/api/proxy"
+  );
 
   const fetchCards = async () => {
     try {
@@ -321,7 +324,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);} 
@@ -331,9 +337,9 @@ export default function Home() {
       <div className="container mx-auto px-4 py-8">
         <div className="flex justify-between items-center mb-4">
           <div>
-            <h1 className="text-3xl font-bold">Sucker v2.0</h1>
+            <h1 className="text-3xl font-bold">Sucker v2.1</h1>
             <p className="text-sm text-muted-foreground">
-              A couple of updates, see below.
+              Just some notes this time
             </p>
           </div>
           <Button
@@ -346,13 +352,34 @@ export default function Home() {
         </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>
+        {/* Collapsible infoboxes */}
+        {[
+          {
+            title: "(Dec 2025) A note about fetching avatars",
+            content: (
+              <>
+                <p className="text-sm text-muted-foreground">
+                  The platform you suck from has implemented limited visibility
+                  of metadata for certain content with a particular 'obscenity
+                  rating'. This means that in some cases, the Fetch Avatar flow
+                  here will show a 404 - character not found error at the end.
+                </p>
+                <p className="text-sm text-muted-foreground">
+                  Sometimes (but not always), the avatar URL can still be
+                  fetched after a day or two since the bot was published.
+                </p>
+                <p className="text-sm text-muted-foreground">
+                  As of this moment, can't really find a fix for it, so you'll
+                  have to download the image yourself and just add the image to
+                  the card someplace else.
+                </p>
+              </>
+            ),
+          },
+          {
+            title:
+              "(Oct 2025) V2 charcard format, multi-turn support for scripts/lorebooks, alternate greetings.",
+            content: (
               <p className="text-sm text-muted-foreground">
                 Sucker now tracks changes to character descriptions and
                 scenarios across multiple messages. Cards with multiple versions
@@ -365,13 +392,79 @@ export default function Home() {
                 instead of the character name.
                 <br />
                 Directions are updated below. Make sure you read 'em.
+              </p>
+            ),
+          },
+          {
+            title: "List of mirrors",
+            content: (
+              <>
+                <p className="text-sm text-muted-foreground">
+                  Sucker goes down sometimes on severian.dev because I use the
+                  server for other stuff. Here's a full list of existing sucker
+                  instances (thanks to those who signed up for it!):
+                </p>
+                <ul className="text-sm flex flex-col sm:flex-row list-none">
+                  <li className="after:content-none sm:after:mx-2 sm:after:content-['•'] sm:last:after:content-none">
+                    <a
+                      className="text-yellow-600"
+                      href="https://sucker.severian.dev"
+                    >
+                      severian.dev
+                    </a>
+                  </li>
+                  <li className="after:content-none sm:after:mx-2 sm:after:content-['•'] sm:last:after:content-none">
+                    <a
+                      className="text-yellow-600"
+                      href="https://sucker.trashpanda.land"
+                    >
+                      trashpanda.land
+                    </a>
+                  </li>
+                  <li className="after:content-none sm:after:mx-2 sm:after:content-['•'] sm:last:after:content-none">
+                    <a
+                      className="text-yellow-600"
+                      href="https://sucker.hitani.me"
+                    >
+                      hitani.me
+                    </a>
+                  </li>
+                  <li className="after:content-none sm:after:mx-2 sm:after:content-['•'] sm:last:after:content-none">
+                    <a
+                      className="text-yellow-600"
+                      href="https://succ.portalnexus.link"
+                    >
+                      portalnexus.link
+                    </a>
+                  </li>
+                  <li className="after:content-none sm:after:mx-2 sm:after:content-['•'] sm:last:after:content-none">
+                    <a
+                      className="text-yellow-600"
+                      href="https://sucker.lemuria.dev"
+                    >
+                      lemuria.dev
+                    </a>
+                  </li>
+                </ul>
+                <p className="text-sm text-muted-foreground">
                   <br />
                   If you're interested in hosting your own sucker instance, lmk
-                via Discord: @lyseverian, I've made the GH repo private for now.
+                  via Discord: @lyseverian, I've made the GH repo private for
+                  now. Or send me a message if there's anything you think that
+                  could be added here, open to suggestions.
                 </p>
-            </div>
-          </div>
-        </div>
+              </>
+            ),
+          },
+        ].map((infobox, idx) => (
+          <CollapsibleInfobox
+            key={infobox.title}
+            title={infobox.title}
+            defaultOpen={false}
+          >
+            {infobox.content}
+          </CollapsibleInfobox>
+        ))}
 
         <Collapsible
           open={isInstructionsOpen}
@@ -399,16 +492,18 @@ export default function Home() {
               </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.
+                  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>
+                  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.
+                  <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>{" "}
@@ -416,7 +511,10 @@ export default function Home() {
                 </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.
+                  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.
@@ -425,12 +523,20 @@ export default function Home() {
                   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.
+                  <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.
+                  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

src/components/ui/collapsible-infobox.tsx

@@ -0,0 +1,52 @@
+import { useState } from "react";
+import { ChevronDown, ChevronUp } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+export interface CollapsibleInfoboxProps {
+  title: string;
+  children: React.ReactNode;
+  defaultOpen?: boolean;
+  className?: string;
+}
+
+export function CollapsibleInfobox({
+  title,
+  children,
+  defaultOpen = false,
+  className = "",
+}: CollapsibleInfoboxProps) {
+  const [open, setOpen] = useState(defaultOpen);
+  return (
+    <div
+      className={`bg-blue-50 dark:bg-blue-950 border border-blue-200 dark:border-blue-800 rounded-lg p-4 mb-4 ${className}`}
+    >
+      <div
+        className="flex items-center justify-between cursor-pointer"
+        onClick={() => setOpen((v) => !v)}
+      >
+        <span className="text-lg font-semibold text-blue-800 dark:text-blue-200">
+          {title}
+        </span>
+        <Button
+          variant="ghost"
+          size="sm"
+          className="w-9 p-0"
+          tabIndex={-1}
+          type="button"
+          onClick={(e) => {
+            e.stopPropagation();
+            setOpen((v) => !v);
+          }}
+        >
+          {open ? (
+            <ChevronUp className="h-4 w-4" />
+          ) : (
+            <ChevronDown className="h-4 w-4" />
+          )}
+          <span className="sr-only">Toggle {title}</span>
+        </Button>
+      </div>
+      {open && <div className="mt-2">{children}</div>}
+    </div>
+  );
+}

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"
+  ]
 }