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,10 +1,16 @@
 # 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.0: Multimessage support! Tracks changes to character descriptions and scenarios across multiple extractions. Shows version badges, message counts, and provides detailed change history viewer.
+- 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?
 - 1.8: Handling for new prompt structure, new instructions
 - 1.7: Handling for nested XML character tags

cardextractor_severian_dev.ipynb

@@ -1,290 +0,0 @@
-{
-  "cells": [
-    {
-      "cell_type": "markdown",
-      "metadata": {
-        "id": "zMVSOtXUASM8"
-      },
-      "source": [
-        "## **Card Definition Extractor**\n",
-        "\n",
-        "Standalone version with directions: https://sucker.severian.dev\n",
-        "\n",
-        "I've gotten into making models at [trashpanda-org](https://huggingface.co/trashpanda-org), check out hasnonname's [Mullein](https://huggingface.co/trashpanda-org/MS-24B-Mullein-v0)!\n",
-        "\n",
-        "> _lmk on Discord if you have any issues while using this - Severian_\n",
-        "\n",
-        "---\n",
-        "\n",
-        "**Changelog:**\n",
-        "- v0.2: fixed to handle Janitor making changes due to R1 handling.\n"
-      ]
-    },
-    {
-      "cell_type": "code",
-      "execution_count": null,
-      "metadata": {
-        "colab": {
-          "background_save": true,
-          "base_uri": "https://localhost:8080/"
-        },
-        "id": "a0pFE9KCDh8P",
-        "outputId": "d647688d-e541-4e5f-e13d-4b385ee84d8b"
-      },
-      "outputs": [
-        {
-          "name": "stdout",
-          "output_type": "stream",
-          "text": [
-            "Requirement already satisfied: flask-cors in /usr/local/lib/python3.11/dist-packages (5.0.0)\n",
-            "Requirement already satisfied: Flask>=0.9 in /usr/local/lib/python3.11/dist-packages (from flask-cors) (3.1.0)\n",
-            "Requirement already satisfied: Werkzeug>=3.1 in /usr/local/lib/python3.11/dist-packages (from Flask>=0.9->flask-cors) (3.1.3)\n",
-            "Requirement already satisfied: Jinja2>=3.1.2 in /usr/local/lib/python3.11/dist-packages (from Flask>=0.9->flask-cors) (3.1.5)\n",
-            "Requirement already satisfied: itsdangerous>=2.2 in /usr/local/lib/python3.11/dist-packages (from Flask>=0.9->flask-cors) (2.2.0)\n",
-            "Requirement already satisfied: click>=8.1.3 in /usr/local/lib/python3.11/dist-packages (from Flask>=0.9->flask-cors) (8.1.8)\n",
-            "Requirement already satisfied: blinker>=1.9 in /usr/local/lib/python3.11/dist-packages (from Flask>=0.9->flask-cors) (1.9.0)\n",
-            "Requirement already satisfied: MarkupSafe>=2.0 in /usr/local/lib/python3.11/dist-packages (from Jinja2>=3.1.2->Flask>=0.9->flask-cors) (3.0.2)\n",
-            "Requirement already satisfied: flask-cors in /usr/local/lib/python3.11/dist-packages (5.0.0)\n",
-            "Requirement already satisfied: flask_cloudflared in /usr/local/lib/python3.11/dist-packages (0.0.14)\n",
-            "Requirement already satisfied: Flask>=0.9 in /usr/local/lib/python3.11/dist-packages (from flask-cors) (3.1.0)\n",
-            "Requirement already satisfied: requests in /usr/local/lib/python3.11/dist-packages (from flask_cloudflared) (2.32.3)\n",
-            "Requirement already satisfied: Werkzeug>=3.1 in /usr/local/lib/python3.11/dist-packages (from Flask>=0.9->flask-cors) (3.1.3)\n",
-            "Requirement already satisfied: Jinja2>=3.1.2 in /usr/local/lib/python3.11/dist-packages (from Flask>=0.9->flask-cors) (3.1.5)\n",
-            "Requirement already satisfied: itsdangerous>=2.2 in /usr/local/lib/python3.11/dist-packages (from Flask>=0.9->flask-cors) (2.2.0)\n",
-            "Requirement already satisfied: click>=8.1.3 in /usr/local/lib/python3.11/dist-packages (from Flask>=0.9->flask-cors) (8.1.8)\n",
-            "Requirement already satisfied: blinker>=1.9 in /usr/local/lib/python3.11/dist-packages (from Flask>=0.9->flask-cors) (1.9.0)\n",
-            "Requirement already satisfied: charset-normalizer<4,>=2 in /usr/local/lib/python3.11/dist-packages (from requests->flask_cloudflared) (3.4.1)\n",
-            "Requirement already satisfied: idna<4,>=2.5 in /usr/local/lib/python3.11/dist-packages (from requests->flask_cloudflared) (3.10)\n",
-            "Requirement already satisfied: urllib3<3,>=1.21.1 in /usr/local/lib/python3.11/dist-packages (from requests->flask_cloudflared) (2.3.0)\n",
-            "Requirement already satisfied: certifi>=2017.4.17 in /usr/local/lib/python3.11/dist-packages (from requests->flask_cloudflared) (2024.12.14)\n",
-            "Requirement already satisfied: MarkupSafe>=2.0 in /usr/local/lib/python3.11/dist-packages (from Jinja2>=3.1.2->Flask>=0.9->flask-cors) (3.0.2)\n",
-            " * Serving Flask app '__main__'\n",
-            " * Debug mode: off\n"
-          ]
-        },
-        {
-          "name": "stderr",
-          "output_type": "stream",
-          "text": [
-            "INFO:werkzeug:\u001b[31m\u001b[1mWARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.\u001b[0m\n",
-            " * Running on http://127.0.0.1:5000\n",
-            "INFO:werkzeug:\u001b[33mPress CTRL+C to quit\u001b[0m\n"
-          ]
-        },
-        {
-          "name": "stdout",
-          "output_type": "stream",
-          "text": [
-            " * Running on https://little-disputes-posting-palmer.trycloudflare.com\n",
-            " * Traffic stats available on http://127.0.0.1:8396/metrics\n"
-          ]
-        },
-        {
-          "name": "stderr",
-          "output_type": "stream",
-          "text": [
-            "INFO:werkzeug:127.0.0.1 - - [04/Feb/2025 22:53:13] \"OPTIONS / HTTP/1.1\" 200 -\n"
-          ]
-        },
-        {
-          "name": "stdout",
-          "output_type": "stream",
-          "text": [
-            "Card definition JSON created at: /tmp/tmpynlda8kv.json\n"
-          ]
-        },
-        {
-          "data": {
-            "application/javascript": "\n    async function download(id, filename, size) {\n      if (!google.colab.kernel.accessAllowed) {\n        return;\n      }\n      const div = document.createElement('div');\n      const label = document.createElement('label');\n      label.textContent = `Downloading \"${filename}\": `;\n      div.appendChild(label);\n      const progress = document.createElement('progress');\n      progress.max = size;\n      div.appendChild(progress);\n      document.body.appendChild(div);\n\n      const buffers = [];\n      let downloaded = 0;\n\n      const channel = await google.colab.kernel.comms.open(id);\n      // Send a message to notify the kernel that we're ready.\n      channel.send({})\n\n      for await (const message of channel.messages) {\n        // Send a message to notify the kernel that we're ready.\n        channel.send({})\n        if (message.buffers) {\n          for (const buffer of message.buffers) {\n            buffers.push(buffer);\n            downloaded += buffer.byteLength;\n            progress.value = downloaded;\n          }\n        }\n      }\n      const blob = new Blob(buffers, {type: 'application/binary'});\n      const a = document.createElement('a');\n      a.href = window.URL.createObjectURL(blob);\n      a.download = filename;\n      div.appendChild(a);\n      a.click();\n      div.remove();\n    }\n  ",
-            "text/plain": [
-              "<IPython.core.display.Javascript object>"
-            ]
-          },
-          "metadata": {},
-          "output_type": "display_data"
-        },
-        {
-          "data": {
-            "application/javascript": "download(\"download_8462ad82-aca0-40a4-8cbb-0342ff5a7e1c\", \"tmpynlda8kv.json\", 14791)",
-            "text/plain": [
-              "<IPython.core.display.Javascript object>"
-            ]
-          },
-          "metadata": {},
-          "output_type": "display_data"
-        },
-        {
-          "name": "stderr",
-          "output_type": "stream",
-          "text": [
-            "INFO:werkzeug:127.0.0.1 - - [04/Feb/2025 22:53:14] \"POST / HTTP/1.1\" 200 -\n"
-          ]
-        }
-      ],
-      "source": [
-        "# @title Card Definition Extractor\n",
-        "\n",
-        "# @markdown Directions for use:\n",
-        "# @markdown - If enabled, starts the proxy in character card extraction mode.\n",
-        "# @markdown - Use the proxy as normal, and start a new chat with your character of choice.\n",
-        "# @markdown - After sending the first message, the proxy will process the character card in v1 format\n",
-        "# @markdown - Stop the proxy and Colab will download the JSON file on your device\n",
-        "# @markdown - Your custom prompt will appear on the description field so this is best used with a cleared-out custom prompt section on janitor.ai\n",
-        "# @markdown - You can start multiple new chats and send messages for the extractor to capture cards, and when you stop the notebook, it will download all extracted files at once.\n",
-        "\n",
-        "# @markdown **Select Tunnel Provider**\n",
-        "tunnel_provider = \"Cloudflare\"  # @param [\"Cloudflare\", \"Localtunnel\", \"Ngrok\"]\n",
-        "\n",
-        "# @markdown **Ngrok Auth Token**: If using ngrok, sign up for an auth token at https://dashboard.ngrok.com/signup\n",
-        "ngrok_auth_token = \"\"  # @param {type:\"string\"}\n",
-        "\n",
-        "card_definition_extractor = True\n",
-        "!pip install flask-cors\n",
-        "\n",
-        "import json\n",
-        "import requests\n",
-        "import time\n",
-        "from flask import Flask, request, jsonify\n",
-        "from flask_cors import CORS\n",
-        "import re\n",
-        "import tempfile\n",
-        "import os\n",
-        "\n",
-        "app = Flask(__name__)\n",
-        "CORS(app)\n",
-        "\n",
-        "# Depending on the provider, set up the tunnel\n",
-        "if tunnel_provider == \"Cloudflare\":\n",
-        "    !pip install flask-cors flask_cloudflared\n",
-        "    from flask_cloudflared import run_with_cloudflared\n",
-        "    run_with_cloudflared(app)\n",
-        "elif tunnel_provider == \"Localtunnel\":\n",
-        "    !pip install flask-cors flask_localtunnel\n",
-        "    from flask_lt import run_with_lt\n",
-        "    run_with_lt(app)\n",
-        "elif tunnel_provider == \"Ngrok\":\n",
-        "    !pip install flask-cors pyngrok==7.1.2\n",
-        "    from pyngrok import ngrok\n",
-        "    if ngrok_auth_token.strip():\n",
-        "        ngrok.set_auth_token(ngrok_auth_token.strip())\n",
-        "    public_url = ngrok.connect(5000).public_url\n",
-        "    print(\"Public URL:\", public_url)\n",
-        "\n",
-        "def extract_between_tags(content, tag):\n",
-        "    \"\"\"\n",
-        "    Extracts content between XML-like tags.\n",
-        "    Returns empty string if tag not found.\n",
-        "    \"\"\"\n",
-        "    start_tag = f\"<{tag}>\"\n",
-        "    end_tag = f\"</{tag}>\"\n",
-        "    start_idx = content.find(start_tag)\n",
-        "    if start_idx == -1:\n",
-        "        return \"\"\n",
-        "    \n",
-        "    end_idx = content.find(end_tag, start_idx)\n",
-        "    if end_idx == -1:\n",
-        "        return \"\"\n",
-        "    \n",
-        "    return content[start_idx + len(start_tag):end_idx].strip()\n",
-        "\n",
-        "def find_tags_between(content, start_marker, end_marker):\n",
-        "    \"\"\"\n",
-        "    Finds all XML-like tags and their content between two marker tags.\n",
-        "    Returns list of {tag, content} dictionaries.\n",
-        "    \"\"\"\n",
-        "    start_idx = content.find(f\"<{start_marker}>\")\n",
-        "    if start_idx == -1:\n",
-        "        return []\n",
-        "    \n",
-        "    end_idx = content.find(f\"<{end_marker}>\")\n",
-        "    if end_idx == -1:\n",
-        "        return []\n",
-        "    \n",
-        "    section = content[start_idx + len(start_marker) + 2:end_idx]\n",
-        "    tag_regex = r\"<([^/>]+)>([^<]+)</\\1>\"\n",
-        "    matches = re.finditer(tag_regex, section)\n",
-        "    \n",
-        "    return [{\"tag\": match.group(1), \"content\": match.group(2).strip()} for match in matches]\n",
-        "\n",
-        "def extract_card_data(messages):\n",
-        "    content0 = messages[0][\"content\"]\n",
-        "    content1 = messages[2][\"content\"]\n",
-        "\n",
-        "    # Find all persona tags between system and scenario, take the last one as character\n",
-        "    personas = find_tags_between(content0, \"system\", \"scenario\")\n",
-        "    char_persona = personas[-1] if personas else {\"tag\": \"\", \"content\": \"\"}\n",
-        "    char_name = char_persona[\"tag\"]\n",
-        "\n",
-        "    card_data = {\n",
-        "        \"name\": char_name,\n",
-        "        \"description\": char_persona[\"content\"],\n",
-        "        \"scenario\": extract_between_tags(content0, \"scenario\"),\n",
-        "        \"mes_example\": extract_between_tags(content0, \"example_dialogs\"),\n",
-        "        \"personality\": \"\",  # This field isn't used in the new format\n",
-        "        \"first_mes\": content1\n",
-        "    }\n",
-        "\n",
-        "    # Replace character name with placeholder in all fields\n",
-        "    def safe_replace(text, old, new):\n",
-        "        return text.replace(old, new) if old else text\n",
-        "\n",
-        "    for field in card_data:\n",
-        "        if field != \"name\":  # Exclude the \"name\" field\n",
-        "            val = card_data[field]\n",
-        "            val = safe_replace(val, char_name, \"{{char}}\")\n",
-        "            card_data[field] = val\n",
-        "\n",
-        "    return card_data\n",
-        "\n",
-        "@app.route('/', methods=['GET'])\n",
-        "def default():\n",
-        "    return {\"status\": \"online\"}\n",
-        "\n",
-        "@app.route('/', methods=['POST'])\n",
-        "def process_card():\n",
-        "    body = request.json\n",
-        "    if 'messages' not in body:\n",
-        "        return jsonify(error=\"Missing 'messages' in request body\"), 400\n",
-        "\n",
-        "    if card_definition_extractor and len(body[\"messages\"]) >= 2:\n",
-        "        card_data = extract_card_data(body[\"messages\"])\n",
-        "        # If running in Colab, download the file\n",
-        "        try:\n",
-        "            from google.colab import files\n",
-        "            import tempfile\n",
-        "            temp_json = tempfile.NamedTemporaryFile(delete=False, suffix=\".json\")\n",
-        "            with open(temp_json.name, 'w', encoding='utf-8') as f:\n",
-        "                json.dump(card_data, f, ensure_ascii=False, indent=2)\n",
-        "            print(\"Card definition JSON created at:\", temp_json.name)\n",
-        "            files.download(temp_json.name)\n",
-        "        except ImportError:\n",
-        "            pass  # Not in Colab, just return JSON\n",
-        "\n",
-        "        return jsonify(card_data), 200\n",
-        "    else:\n",
-        "        return jsonify(status=\"Card definition extractor not enabled or insufficient messages\"), 200\n",
-        "\n",
-        "if __name__ == '__main__':\n",
-        "    if tunnel_provider != \"Cloudflare\":\n",
-        "        print('\\n Colab IP: ', end='')\n",
-        "        !curl ipecho.net/plain\n",
-        "        print('\\n')\n",
-        "    app.run()\n"
-      ]
-    }
-  ],
-  "metadata": {
-    "colab": {
-      "provenance": []
-    },
-    "kernelspec": {
-      "display_name": "Python 3",
-      "name": "python3"
-    },
-    "language_info": {
-      "name": "python"
-    }
-  },
-  "nbformat": 4,
-  "nbformat_minor": 0
-}

docker-compose.yml

@@ -0,0 +1,6 @@
+services:
+  web:
+    build: .
+    image: sucker
+    ports:
+      - "3000:3000"

dockerfile

@@ -0,0 +1,31 @@
+FROM node:22-alpine AS base
+WORKDIR /app
+FROM base AS deps
+COPY package.json package-lock.json* yarn.lock* pnpm-lock.yaml* ./
+RUN \
+  if [ -f package-lock.json ]; then npm ci; \
+  elif [ -f yarn.lock ]; then yarn install --frozen-lockfile; \
+  elif [ -f pnpm-lock.yaml ]; then npm install -g pnpm && pnpm install --frozen-lockfile; \
+  else echo "No lockfile found." && npm install; \
+  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 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
+
+USER nextjs
+
+EXPOSE 3000
+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

@@ -19,33 +19,50 @@ import {
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Png } from "@/lib/png";
-import { ChevronUp, ChevronDown, Copy } from "lucide-react";
+import {
+  ChevronUp,
+  ChevronDown,
+  Copy,
+  ChevronLeft,
+  ChevronRight,
+} from "lucide-react";
 import {
   CollapsibleContent,
   Collapsible,
   CollapsibleTrigger,
 } from "@/components/ui/collapsible";
+import { CollapsibleInfobox } from "@/components/ui/collapsible-infobox";
+import Script from "next/script";
 
-interface Card {
-  id: string;
+interface CardDataV2 {
   name: string;
   first_mes: string;
+  alternate_greetings?: string[];
   description: string;
   personality: string;
   mes_example: string;
   scenario: string;
+  creator?: string;
+  creator_notes?: string;
+  system_prompt?: string;
+  post_history_instructions?: string;
+  tags?: string[];
+  character_version?: string;
+  extensions?: Record<string, unknown>;
+}
+
+interface Card {
+  id: string;
+  data: CardDataV2;
+  trackingName?: string;
+  spec?: string;
+  spec_version?: string;
   avatarUrl?: string;
   hasVersions?: boolean;
   versionCount?: number;
   messageCount?: number;
-  initialVersion?: {
-    name: string;
-    first_mes: string;
-    description: string;
-    personality: string;
-    mes_example: string;
-    scenario: string;
-  };
+  alternate_greetings?: string[];
+  initialVersion?: CardDataV2;
 }
 
 export default function Home() {
@@ -62,6 +79,13 @@ export default function Home() {
   const [changesDialogOpen, setChangesDialogOpen] = useState(false);
   const [selectedChanges, setSelectedChanges] = useState<any>(null);
   const [showFullText, setShowFullText] = useState(false);
+  const [altGreetingIndexById, setAltGreetingIndexById] = useState<
+    Record<string, number>
+  >({});
+
+  const [proxyUrl, setProxyUrl] = useState(
+    "https://sucker.severian.dev/api/proxy"
+  );
 
   const fetchCards = async () => {
     try {
@@ -89,22 +113,36 @@ export default function Home() {
     fetchCards();
   }, []);
 
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      const origin = window.location.origin;
+      setProxyUrl(`${origin}/api/proxy`);
+    }
+  }, []);
+
   const downloadJson = (card: Card) => {
     // Use initial version for download, or current version if no initial version available
-    const downloadData = card.initialVersion ? {
-      name: card.initialVersion.name,
-      first_mes: card.initialVersion.first_mes,
-      description: card.initialVersion.description,
-      personality: card.initialVersion.personality,
-      mes_example: card.initialVersion.mes_example,
-      scenario: card.initialVersion.scenario,
-    } : {
-      name: card.name,
-      first_mes: card.first_mes,
-      description: card.description,
-      personality: card.personality,
-      mes_example: card.mes_example,
-      scenario: card.scenario,
+    const chosen = card.initialVersion || card.data;
+    const downloadData = {
+      data: {
+        name: chosen.name,
+        first_mes: chosen.first_mes,
+        alternate_greetings: chosen.alternate_greetings || [],
+        description: chosen.description,
+        personality: chosen.personality,
+        mes_example: chosen.mes_example,
+        scenario: chosen.scenario,
+        creator: (chosen as any).creator || "",
+        creator_notes: (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",
+        extensions: (chosen as any).extensions || {},
+      },
+      spec: card.spec || "chara_card_v2",
+      spec_version: card.spec_version || "2.0",
     };
 
     const element = document.createElement("a");
@@ -112,7 +150,10 @@ export default function Home() {
       type: "application/json",
     });
     element.href = URL.createObjectURL(file);
-    element.download = `${card.name.replace(/[^a-zA-Z0-9\-_]/g, '_')}.json`;
+    element.download = `${(card.initialVersion?.name || card.data.name).replace(
+      /[^a-zA-Z0-9\-_]/g,
+      "_"
+    )}.json`;
     document.body.appendChild(element);
     element.click();
     document.body.removeChild(element);
@@ -122,22 +163,26 @@ export default function Home() {
     try {
       const response = await fetch(`/api/proxy?changes=true&cardId=${card.id}`);
       if (!response.ok) {
-        throw new Error('Failed to fetch changes');
+        throw new Error("Failed to fetch changes");
       }
-      
+
       const changesData = await response.json();
       const element = document.createElement("a");
       const file = new Blob([JSON.stringify(changesData, null, 2)], {
         type: "application/json",
       });
       element.href = URL.createObjectURL(file);
-      element.download = `${card.name.replace(/[^a-zA-Z0-9\-_]/g, '_')}_changes.json`;
+      element.download = `${(
+        card.initialVersion?.name || card.data.name
+      ).replace(/[^a-zA-Z0-9\-_]/g, "_")}_changes.json`;
       document.body.appendChild(element);
       element.click();
       document.body.removeChild(element);
     } catch (error) {
       console.error("Error downloading changes:", error);
-      alert("Failed to download changes. The card may not have version history.");
+      alert(
+        "Failed to download changes. The card may not have version history."
+      );
     }
   };
 
@@ -145,9 +190,9 @@ export default function Home() {
     try {
       const response = await fetch(`/api/proxy?changes=true&cardId=${card.id}`);
       if (!response.ok) {
-        throw new Error('Failed to fetch changes');
+        throw new Error("Failed to fetch changes");
       }
-      
+
       const changesData = await response.json();
       setSelectedChanges(changesData);
       setShowFullText(false); // Reset to diff view by default
@@ -187,29 +232,39 @@ export default function Home() {
       const arrayBuffer = await pngBlob.arrayBuffer();
 
       // Use initial version for PNG embedding, or current version if no initial version available
-      const pngData = card.initialVersion ? {
-        name: card.initialVersion.name,
-        first_mes: card.initialVersion.first_mes,
-        description: card.initialVersion.description,
-        personality: card.initialVersion.personality,
-        mes_example: card.initialVersion.mes_example,
-        scenario: card.initialVersion.scenario,
-      } : {
-        name: card.name,
-        first_mes: card.first_mes,
-        description: card.description,
-        personality: card.personality,
-        mes_example: card.mes_example,
-        scenario: card.scenario,
+      const chosen = card.initialVersion || card.data;
+      const pngData = {
+        data: {
+          name: chosen.name,
+          first_mes: chosen.first_mes,
+          alternate_greetings: chosen.alternate_greetings || [],
+          description: chosen.description,
+          personality: chosen.personality,
+          mes_example: chosen.mes_example,
+          scenario: chosen.scenario,
+          creator: (chosen as any).creator || "",
+          creator_notes: (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",
+          extensions: (chosen as any).extensions || {},
+        },
+        spec: card.spec || "chara_card_v2",
+        spec_version: card.spec_version || "2.0",
       };
 
       const cardData = JSON.stringify(pngData);
 
       const newImageData = Png.Generate(arrayBuffer, cardData);
       const newFileName = `${
-        card.name.replace(/[^a-zA-Z0-9\-_]/g, '_') || "character"
+        (card.initialVersion?.name || card.data.name).replace(
+          /[^a-zA-Z0-9\-_]/g,
+          "_"
+        ) || "character"
       }.png`;
-      const newFile = new File([newImageData], newFileName, {
+      const newFile = new File([new Uint8Array(newImageData)], newFileName, {
         type: "image/png",
       });
 
@@ -269,12 +324,22 @@ 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 id="gtag-init" strategy="afterInteractive">
+        {`window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);} 
+        gtag('js', new Date());
+        gtag('config', 'G-YVD6QFSR71');`}
+      </Script>
       <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">
-              Now with multimessage support! Tracks changes to character descriptions and scenarios across multiple extractions.
+              Just some notes this time
             </p>
           </div>
           <Button
@@ -287,18 +352,119 @@ 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">
-                New: Multimessage Support
-              </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 show a version badge and offer a "Download Changes" button to get the change history.
+                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.
               </p>
-            </div>
-          </div>
-        </div>
+            ),
+          },
+          {
+            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. Or send me a message if there's anything you think that
+                  could be added here, open to suggestions.
+                </p>
+              </>
+            ),
+          },
+        ].map((infobox, idx) => (
+          <CollapsibleInfobox
+            key={infobox.title}
+            title={infobox.title}
+            defaultOpen={false}
+          >
+            {infobox.content}
+          </CollapsibleInfobox>
+        ))}
 
         <Collapsible
           open={isInstructionsOpen}
@@ -326,28 +492,52 @@ export default function Home() {
               </p>
               <ol className="list-decimal list-inside">
                 <li className="mb-2">
-                  Put <code>https://sucker.severian.dev/api/proxy</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>&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>&#123;user&#125;</code> and the description should only have <code>.</code> in it.
+                  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">
-                  Start a new chat with a character or multiple.
-                </li>
-                <li className="mb-2">
-                  You can either send a dot to let sucker make a best guess about the char name, or send the char name yourself and it'll be used instead.
+                  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.
@@ -358,12 +548,6 @@ export default function Home() {
                 discarded. Reloading the page will remove any attached avatars.
                 I'm not storing shit.
               </p>
-              <p className="mb-2">
-                <strong>New:</strong> If you send multiple messages with the same character name, 
-                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.
-              </p>
             </div>
           </CollapsibleContent>
         </Collapsible>
@@ -383,7 +567,9 @@ export default function Home() {
                     <AccordionItem value={`card-${index}`}>
                       <AccordionTrigger className="text-xl font-semibold">
                         <div className="flex items-center gap-2">
-                          {card.name || "Unnamed Card"}
+                          {card.initialVersion?.name ||
+                            card.data?.name ||
+                            "Unnamed Card"}
                           <div className="flex gap-1">
                             {card.hasVersions && (
                               <span className="text-sm bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 px-2 py-1 rounded-full">
@@ -400,19 +586,26 @@ export default function Home() {
                       </AccordionTrigger>
                       <AccordionContent>
                         <div id={`card-${index}`} className="space-y-4 mt-4">
-                          {(card.initialVersion?.description || card.description) && (
+                          {(card.initialVersion?.description ||
+                            card.data?.description) && (
                             <Accordion type="single" collapsible>
                               <AccordionItem value="description">
                                 <AccordionTrigger>Description</AccordionTrigger>
                                 <AccordionContent>
                                   <div className="flex justify-between">
-                                    <pre className="whitespace-pre-wrap font-sans text-sm">{card.initialVersion?.description || card.description}</pre>
-                                    <Button 
-                                      variant="ghost" 
-                                      size="icon" 
-                                      onClick={(e) => { 
-                                        e.stopPropagation(); 
-                                        copyToClipboard(card.initialVersion?.description || card.description); 
+                                    <pre className="whitespace-pre-wrap font-sans text-sm">
+                                      {card.initialVersion?.description ||
+                                        card.data.description}
+                                    </pre>
+                                    <Button
+                                      variant="ghost"
+                                      size="icon"
+                                      onClick={(e) => {
+                                        e.stopPropagation();
+                                        copyToClipboard(
+                                          card.initialVersion?.description ||
+                                            card.data.description
+                                        );
                                       }}
                                     >
                                       <Copy className="h-4 w-4" />
@@ -422,7 +615,8 @@ export default function Home() {
                               </AccordionItem>
                             </Accordion>
                           )}
-                          {(card.initialVersion?.first_mes || card.first_mes) && (
+                          {(card.initialVersion?.first_mes ||
+                            card.data?.first_mes) && (
                             <Accordion type="single" collapsible>
                               <AccordionItem value="first-message">
                                 <AccordionTrigger>
@@ -430,13 +624,19 @@ export default function Home() {
                                 </AccordionTrigger>
                                 <AccordionContent>
                                   <div className="flex justify-between">
-                                    <pre className="whitespace-pre-wrap font-sans text-sm">{card.initialVersion?.first_mes || card.first_mes}</pre>
-                                    <Button 
-                                      variant="ghost" 
-                                      size="icon" 
-                                      onClick={(e) => { 
-                                        e.stopPropagation(); 
-                                        copyToClipboard(card.initialVersion?.first_mes || card.first_mes); 
+                                    <pre className="whitespace-pre-wrap font-sans text-sm">
+                                      {card.initialVersion?.first_mes ||
+                                        card.data.first_mes}
+                                    </pre>
+                                    <Button
+                                      variant="ghost"
+                                      size="icon"
+                                      onClick={(e) => {
+                                        e.stopPropagation();
+                                        copyToClipboard(
+                                          card.initialVersion?.first_mes ||
+                                            card.data.first_mes
+                                        );
                                       }}
                                     >
                                       <Copy className="h-4 w-4" />
@@ -446,19 +646,99 @@ export default function Home() {
                               </AccordionItem>
                             </Accordion>
                           )}
-                          {(card.initialVersion?.scenario || card.scenario) && (
+                          {card.alternate_greetings &&
+                            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>
+                                  <div className="flex items-center gap-2">
+                                    <Button
+                                      variant="ghost"
+                                      size="icon"
+                                      onClick={() => {
+                                        const greetings =
+                                          card.alternate_greetings || [];
+                                        if (greetings.length === 0) return;
+                                        setAltGreetingIndexById((prev) => {
+                                          const current = prev[card.id] ?? 0;
+                                          const next =
+                                            (current - 1 + greetings.length) %
+                                            greetings.length;
+                                          return { ...prev, [card.id]: next };
+                                        });
+                                      }}
+                                    >
+                                      <ChevronLeft className="h-4 w-4" />
+                                    </Button>
+                                    <Button
+                                      variant="ghost"
+                                      size="icon"
+                                      onClick={() => {
+                                        const greetings =
+                                          card.alternate_greetings || [];
+                                        if (greetings.length === 0) return;
+                                        setAltGreetingIndexById((prev) => {
+                                          const current = prev[card.id] ?? 0;
+                                          const next =
+                                            (current + 1) % greetings.length;
+                                          return { ...prev, [card.id]: next };
+                                        });
+                                      }}
+                                    >
+                                      <ChevronRight className="h-4 w-4" />
+                                    </Button>
+                                  </div>
+                                </div>
+                                {(() => {
+                                  const greetings =
+                                    card.alternate_greetings || [];
+                                  const index =
+                                    altGreetingIndexById[card.id] ?? 0;
+                                  const current = greetings.length
+                                    ? greetings[index % greetings.length]
+                                    : "";
+                                  return (
+                                    <div className="flex justify-between">
+                                      <pre className="whitespace-pre-wrap font-sans text-sm">
+                                        {current}
+                                      </pre>
+                                      <Button
+                                        variant="ghost"
+                                        size="icon"
+                                        onClick={() => {
+                                          if (!current) return;
+                                          copyToClipboard(current);
+                                        }}
+                                      >
+                                        <Copy className="h-4 w-4" />
+                                      </Button>
+                                    </div>
+                                  );
+                                })()}
+                              </div>
+                            )}
+                          {(card.initialVersion?.scenario ||
+                            card.data?.scenario) && (
                             <Accordion type="single" collapsible>
                               <AccordionItem value="scenario">
                                 <AccordionTrigger>Scenario</AccordionTrigger>
                                 <AccordionContent>
                                   <div className="flex justify-between">
-                                    <pre className="whitespace-pre-wrap font-sans text-sm">{card.initialVersion?.scenario || card.scenario}</pre>
-                                    <Button 
-                                      variant="ghost" 
-                                      size="icon" 
-                                      onClick={(e) => { 
-                                        e.stopPropagation(); 
-                                        copyToClipboard(card.initialVersion?.scenario || card.scenario); 
+                                    <pre className="whitespace-pre-wrap font-sans text-sm">
+                                      {card.initialVersion?.scenario ||
+                                        card.data.scenario}
+                                    </pre>
+                                    <Button
+                                      variant="ghost"
+                                      size="icon"
+                                      onClick={(e) => {
+                                        e.stopPropagation();
+                                        copyToClipboard(
+                                          card.initialVersion?.scenario ||
+                                            card.data.scenario
+                                        );
                                       }}
                                     >
                                       <Copy className="h-4 w-4" />
@@ -468,7 +748,8 @@ export default function Home() {
                               </AccordionItem>
                             </Accordion>
                           )}
-                          {(card.initialVersion?.mes_example || card.mes_example) && (
+                          {(card.initialVersion?.mes_example ||
+                            card.data?.mes_example) && (
                             <Accordion type="single" collapsible>
                               <AccordionItem value="example-messages">
                                 <AccordionTrigger>
@@ -476,13 +757,19 @@ export default function Home() {
                                 </AccordionTrigger>
                                 <AccordionContent>
                                   <div className="flex justify-between">
-                                    <pre className="whitespace-pre-wrap font-sans text-sm">{card.initialVersion?.mes_example || card.mes_example}</pre>
-                                    <Button 
-                                      variant="ghost" 
-                                      size="icon" 
-                                      onClick={(e) => { 
-                                        e.stopPropagation(); 
-                                        copyToClipboard(card.initialVersion?.mes_example || card.mes_example); 
+                                    <pre className="whitespace-pre-wrap font-sans text-sm">
+                                      {card.initialVersion?.mes_example ||
+                                        card.data.mes_example}
+                                    </pre>
+                                    <Button
+                                      variant="ghost"
+                                      size="icon"
+                                      onClick={(e) => {
+                                        e.stopPropagation();
+                                        copyToClipboard(
+                                          card.initialVersion?.mes_example ||
+                                            card.data.mes_example
+                                        );
                                       }}
                                     >
                                       <Copy className="h-4 w-4" />
@@ -492,19 +779,26 @@ export default function Home() {
                               </AccordionItem>
                             </Accordion>
                           )}
-                          {(card.initialVersion?.personality || card.personality) && (
+                          {(card.initialVersion?.personality ||
+                            card.data?.personality) && (
                             <Accordion type="single" collapsible>
                               <AccordionItem value="personality">
                                 <AccordionTrigger>Personality</AccordionTrigger>
                                 <AccordionContent>
                                   <div className="flex justify-between">
-                                    <pre className="whitespace-pre-wrap font-sans text-sm">{card.initialVersion?.personality || card.personality}</pre>
-                                    <Button 
-                                      variant="ghost" 
-                                      size="icon" 
-                                      onClick={(e) => { 
-                                        e.stopPropagation(); 
-                                        copyToClipboard(card.initialVersion?.personality || card.personality); 
+                                    <pre className="whitespace-pre-wrap font-sans text-sm">
+                                      {card.initialVersion?.personality ||
+                                        card.data.personality}
+                                    </pre>
+                                    <Button
+                                      variant="ghost"
+                                      size="icon"
+                                      onClick={(e) => {
+                                        e.stopPropagation();
+                                        copyToClipboard(
+                                          card.initialVersion?.personality ||
+                                            card.data.personality
+                                        );
                                       }}
                                     >
                                       <Copy className="h-4 w-4" />
@@ -620,13 +914,16 @@ export default function Home() {
               Change History: {selectedChanges?.cardName}
             </DialogTitle>
             <DialogDescription className="flex items-center justify-between">
-              <span>Version history showing changes to description and scenario fields</span>
+              <span>
+                Version history showing changes to description and scenario
+                fields
+              </span>
               <Button
                 variant="outline"
                 size="sm"
                 onClick={() => setShowFullText(!showFullText)}
               >
-                {showFullText ? 'Show Changes Only' : 'Show Full Text'}
+                {showFullText ? "Show Changes Only" : "Show Full Text"}
               </Button>
             </DialogDescription>
           </DialogHeader>
@@ -635,16 +932,20 @@ export default function Home() {
             <div className="space-y-4">
               <div className="grid grid-cols-2 gap-4 text-sm">
                 <div>
-                  <strong>Total Versions:</strong> {selectedChanges.totalVersions}
+                  <strong>Total Versions:</strong>{" "}
+                  {selectedChanges.totalVersions}
                 </div>
                 <div>
-                  <strong>Current Version:</strong> {selectedChanges.currentVersion}
+                  <strong>Current Version:</strong>{" "}
+                  {selectedChanges.currentVersion}
                 </div>
                 <div>
-                  <strong>Description Changes:</strong> {selectedChanges.summary.descriptionChanges}
+                  <strong>Description Changes:</strong>{" "}
+                  {selectedChanges.summary.descriptionChanges}
                 </div>
                 <div>
-                  <strong>Scenario Changes:</strong> {selectedChanges.summary.scenarioChanges}
+                  <strong>Scenario Changes:</strong>{" "}
+                  {selectedChanges.summary.scenarioChanges}
                 </div>
               </div>
 
@@ -660,16 +961,20 @@ export default function Home() {
                       </h4>
                       <div className="text-sm text-muted-foreground">
                         {new Date(version.timestamp).toLocaleString()}
-                        {version.messageCount && ` • Message ${version.messageCount}`}
+                        {version.messageCount &&
+                          ` • Message ${version.messageCount}`}
                       </div>
                     </div>
-                    
+
                     {version.changes.description && (
                       <div className="mb-3">
-                        <h5 className="font-medium text-sm mb-1">Description Change:</h5>
-                        {version.changeType === 'initial' ? (
+                        <h5 className="font-medium text-sm mb-1">
+                          Description Change:
+                        </h5>
+                        {version.changeType === "initial" ? (
                           <div className="bg-blue-50 dark:bg-blue-950 p-2 rounded text-sm">
-                            <strong>Initial Content:</strong> {version.changes.description.new}
+                            <strong>Initial Content:</strong>{" "}
+                            {version.changes.description.new}
                           </div>
                         ) : (
                           <div className="space-y-2">
@@ -677,15 +982,18 @@ export default function Home() {
                               <div className="bg-green-50 dark:bg-green-950 p-2 rounded text-sm">
                                 <div className="flex justify-between items-start">
                                   <div>
-                                    <strong>Added:</strong> {version.addedText.description}
+                                    <strong>Added:</strong>{" "}
+                                    {version.addedText.description}
                                   </div>
-                                  <Button 
-                                    variant="ghost" 
-                                    size="icon" 
+                                  <Button
+                                    variant="ghost"
+                                    size="icon"
                                     className="ml-2 h-6 w-6"
-                                    onClick={(e) => { 
-                                      e.stopPropagation(); 
-                                      copyToClipboard(version.addedText.description); 
+                                    onClick={(e) => {
+                                      e.stopPropagation();
+                                      copyToClipboard(
+                                        version.addedText.description
+                                      );
                                     }}
                                   >
                                     <Copy className="h-3 w-3" />
@@ -695,16 +1003,19 @@ export default function Home() {
                             )}
                             {version.removedText?.description && (
                               <div className="bg-red-50 dark:bg-red-950 p-2 rounded text-sm">
-                                <strong>Removed:</strong> {version.removedText.description}
+                                <strong>Removed:</strong>{" "}
+                                {version.removedText.description}
                               </div>
                             )}
                             {showFullText && (
                               <div className="space-y-1 mt-2 pt-2 border-t">
                                 <div className="bg-gray-50 dark:bg-gray-950 p-2 rounded text-xs">
-                                  <strong>Full Old:</strong> {version.changes.description.old}
+                                  <strong>Full Old:</strong>{" "}
+                                  {version.changes.description.old}
                                 </div>
                                 <div className="bg-gray-50 dark:bg-gray-950 p-2 rounded text-xs">
-                                  <strong>Full New:</strong> {version.changes.description.new}
+                                  <strong>Full New:</strong>{" "}
+                                  {version.changes.description.new}
                                 </div>
                               </div>
                             )}
@@ -712,13 +1023,16 @@ export default function Home() {
                         )}
                       </div>
                     )}
-                    
+
                     {version.changes.scenario && (
                       <div>
-                        <h5 className="font-medium text-sm mb-1">Scenario Change:</h5>
-                        {version.changeType === 'initial' ? (
+                        <h5 className="font-medium text-sm mb-1">
+                          Scenario Change:
+                        </h5>
+                        {version.changeType === "initial" ? (
                           <div className="bg-blue-50 dark:bg-blue-950 p-2 rounded text-sm">
-                            <strong>Initial Content:</strong> {version.changes.scenario.new}
+                            <strong>Initial Content:</strong>{" "}
+                            {version.changes.scenario.new}
                           </div>
                         ) : (
                           <div className="space-y-2">
@@ -726,15 +1040,18 @@ export default function Home() {
                               <div className="bg-green-50 dark:bg-green-950 p-2 rounded text-sm">
                                 <div className="flex justify-between items-start">
                                   <div>
-                                    <strong>Added:</strong> {version.addedText.scenario}
+                                    <strong>Added:</strong>{" "}
+                                    {version.addedText.scenario}
                                   </div>
-                                  <Button 
-                                    variant="ghost" 
-                                    size="icon" 
+                                  <Button
+                                    variant="ghost"
+                                    size="icon"
                                     className="ml-2 h-6 w-6"
-                                    onClick={(e) => { 
-                                      e.stopPropagation(); 
-                                      copyToClipboard(version.addedText.scenario); 
+                                    onClick={(e) => {
+                                      e.stopPropagation();
+                                      copyToClipboard(
+                                        version.addedText.scenario
+                                      );
                                     }}
                                   >
                                     <Copy className="h-3 w-3" />
@@ -744,16 +1061,19 @@ export default function Home() {
                             )}
                             {version.removedText?.scenario && (
                               <div className="bg-red-50 dark:bg-red-950 p-2 rounded text-sm">
-                                <strong>Removed:</strong> {version.removedText.scenario}
+                                <strong>Removed:</strong>{" "}
+                                {version.removedText.scenario}
                               </div>
                             )}
                             {showFullText && (
                               <div className="space-y-1 mt-2 pt-2 border-t">
                                 <div className="bg-gray-50 dark:bg-gray-950 p-2 rounded text-xs">
-                                  <strong>Full Old:</strong> {version.changes.scenario.old}
+                                  <strong>Full Old:</strong>{" "}
+                                  {version.changes.scenario.old}
                                 </div>
                                 <div className="bg-gray-50 dark:bg-gray-950 p-2 rounded text-xs">
-                                  <strong>Full New:</strong> {version.changes.scenario.new}
+                                  <strong>Full New:</strong>{" "}
+                                  {version.changes.scenario.new}
                                 </div>
                               </div>
                             )}

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