From f112df0877b23240a6df7e90d6b3fc1cd3dbe1a9 Mon Sep 17 00:00:00 2001
From: crease <crease@users.noreply.github.com>
Date: Sat, 21 Mar 2026 16:50:43 +0800
Subject: [PATCH 1/2] feat: enable import character cards from SillyTavern

Add ST card import functionality with PNG/ZIP file upload, character
data extraction, and automatic mod generation via LLM. Includes CLI
import command, extract preview modal, and batch processing support.
---
 .claude/commands/import.md                    |  121 ++
 apps/webuiapps/package.json                   |    3 +
 .../src/components/ChatPanel/ModPanel.tsx     |    5 +-
 .../src/components/ChatPanel/index.tsx        |   32 +-
 .../Shell/ExtractPreviewModal.module.scss     |  351 ++++++
 .../components/Shell/ExtractPreviewModal.tsx  |  216 ++++
 .../src/components/Shell/index.module.scss    |  296 +++++
 apps/webuiapps/src/components/Shell/index.tsx |  225 +++-
 .../src/components/Shell/modPrompt.ts         |  138 +++
 apps/webuiapps/src/lib/cardExtractor.ts       | 1024 +++++++++++++++++
 apps/webuiapps/src/lib/index.ts               |   12 +
 apps/webuiapps/src/lib/modManager.ts          |    2 +
 apps/webuiapps/vite.config.ts                 |  442 +++++++
 pnpm-lock.yaml                                |  551 ++++-----
 prompt_generate_mod_en.md                     |  135 +++
 15 files changed, 3249 insertions(+), 304 deletions(-)
 create mode 100644 .claude/commands/import.md
 create mode 100644 apps/webuiapps/src/components/Shell/ExtractPreviewModal.module.scss
 create mode 100644 apps/webuiapps/src/components/Shell/ExtractPreviewModal.tsx
 create mode 100644 apps/webuiapps/src/components/Shell/modPrompt.ts
 create mode 100644 apps/webuiapps/src/lib/cardExtractor.ts
 create mode 100644 prompt_generate_mod_en.md

diff --git a/.claude/commands/import.md b/.claude/commands/import.md
new file mode 100644
index 0000000..55c5352
--- /dev/null
+++ b/.claude/commands/import.md
@@ -0,0 +1,121 @@
+# ST Card Import — CLI Orchestrator
+
+Import SillyTavern character card files (PNG / CharX / ZIP) into the VibeApp system. Extracts apps from the card's character book and generates VibeApp code + mod scenario.
+
+## Parameter Parsing
+
+- `$ARGUMENTS` format: `{FilePath}`
+- `FilePath`: path to a `.png`, `.charx`, or `.zip` file containing a SillyTavern character card
+
+If `$ARGUMENTS` is empty, ask the user for the file path.
+
+## Execution Protocol
+
+### 1. Extract Card Data
+
+Run the extraction script:
+
+```bash
+python3 .claude/scripts/extract-card.py "{FilePath}"
+```
+
+Capture the JSON output. If extraction fails, report the error and stop.
+
+### 2. Analyze & Present Results
+
+Parse the extraction output JSON. Display a structured summary to the user:
+
+```
+Card: {source} ({source_type})
+Character: {character.name}
+  Description: {first 100 chars of character.description}...
+
+Apps Found ({count}):
+  1. [{comment}] — keywords: {keywords} | format: {format} | tags: {tag_names}
+  2. ...
+
+Lore Entries: {count}
+Regex Scripts: {count}
+```
+
+### 3. User Selection
+
+Ask the user which apps to generate using AskUserQuestion:
+- Option 1: Generate all apps (recommended)
+- Option 2: Select specific apps
+- Option 3: Skip app generation (mod only)
+
+If the user selects specific apps, present a multi-select list of extracted apps.
+
+### 4. Generate Apps via Vibe Workflow
+
+For each selected app, derive a VibeApp requirement from the card data:
+
+#### 4.1 App Name Derivation
+
+Convert the app's `comment` field to PascalCase for the VibeApp name:
+- `"live stream"` → `LiveStream`
+- `"social-feed"` → `SocialFeed`
+- `"music app"` → `MusicApp`
+- Chinese names: translate to English PascalCase
+
+#### 4.2 Requirement Generation
+
+Build a comprehensive requirement description from the extracted data:
+
+```
+A {format}-based app that provides {functional description based on keywords and tags}.
+
+UI Features:
+{For each tag: describe the UI element it represents}
+
+Data Resources:
+{For each resource list: describe what data it manages}
+
+Content Format: {format type — xml tags / bracket notation / prose}
+
+Regex Scripts (for reference):
+{List relevant scripts that transform this app's output}
+```
+
+#### 4.3 Execute Vibe Workflow
+
+For each app, execute the `/vibe` command:
+
+```
+/vibe {PascalCaseAppName} {GeneratedRequirement}
+```
+
+Process apps **sequentially** — each vibe workflow must complete before starting the next.
+
+**Important**: Before starting each app, check if a VibeApp with that name already exists at `src/pages/{AppName}/`. If it does, ask the user whether to:
+- Skip this app
+- Overwrite (delete existing and regenerate)
+- Use change mode (modify existing app)
+
+### 5. Completion Report
+
+```
+═══════════════════════════════════════
+  ST Card Import Complete
+═══════════════════════════════════════
+  Source:    {filename} ({source_type})
+  Character: {character.name}
+
+  Apps Generated ({count}):
+    • {AppName1} → http://localhost:3000/{app-name-1}
+    • {AppName2} → http://localhost:3000/{app-name-2}
+═══════════════════════════════════════
+```
+
+## Error Handling
+
+- If extraction fails: report error, suggest checking file format
+- If a vibe workflow fails for one app: log error, continue with remaining apps
+
+## Notes
+
+- The extraction script handles both PNG (ccv3/chara tEXt chunks) and CharX/ZIP (card.json) formats
+- Apps are identified by character book entries containing `<rule S>` in their content
+- The vibe workflow handles all code generation, architecture, and integration
+- Lore entries are preserved as reference data but not directly used in app generation
diff --git a/apps/webuiapps/package.json b/apps/webuiapps/package.json
index d5f3d85..27e1e38 100644
--- a/apps/webuiapps/package.json
+++ b/apps/webuiapps/package.json
@@ -16,12 +16,15 @@
     "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
+    "@anthropic-ai/claude-agent-sdk": "^0.2.72",
     "framer-motion": "^12.34.0",
+    "jszip": "^3.10.1",
     "react-markdown": "^10.1.0",
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.1"
   },
   "devDependencies": {
+    "@types/jszip": "^3.4.1",
     "@vitest/coverage-istanbul": "^1.6.1",
     "@vitest/coverage-v8": "^1.6.1",
     "happy-dom": "^14.0.0",
diff --git a/apps/webuiapps/src/components/ChatPanel/ModPanel.tsx b/apps/webuiapps/src/components/ChatPanel/ModPanel.tsx
index 03de2bf..932b78b 100644
--- a/apps/webuiapps/src/components/ChatPanel/ModPanel.tsx
+++ b/apps/webuiapps/src/components/ChatPanel/ModPanel.tsx
@@ -16,11 +16,12 @@ interface ModPanelProps {
   collection: ModCollection;
   onSave: (collection: ModCollection) => void;
   onClose: () => void;
+  initialEditId?: string;
 }
 
-const ModPanel: React.FC<ModPanelProps> = ({ collection, onSave, onClose }) => {
+const ModPanel: React.FC<ModPanelProps> = ({ collection, onSave, onClose, initialEditId }) => {
   const [col, setCol] = useState<ModCollection>(() => ({ ...collection }));
-  const [editingId, setEditingId] = useState<string | null>(null);
+  const [editingId, setEditingId] = useState<string | null>(initialEditId ?? null);
 
   const mods = getModList(col);
   const activeId = col.activeId;
diff --git a/apps/webuiapps/src/components/ChatPanel/index.tsx b/apps/webuiapps/src/components/ChatPanel/index.tsx
index 76a8ceb..2befa6b 100644
--- a/apps/webuiapps/src/components/ChatPanel/index.tsx
+++ b/apps/webuiapps/src/components/ChatPanel/index.tsx
@@ -425,8 +425,19 @@ const ChatPanel: React.FC<{
   const [suggestedReplies, setSuggestedReplies] = useState<string[]>([]);
   const [showCharacterPanel, setShowCharacterPanel] = useState(false);
   const [showModPanel, setShowModPanel] = useState(false);
+  const [initialEditModId, setInitialEditModId] = useState<string | undefined>();
   const [currentEmotion, setCurrentEmotion] = useState<string | undefined>();
 
+  // Auto-open mod editor if redirected from card import
+  useEffect(() => {
+    const editModId = sessionStorage.getItem('openroom_edit_mod_id');
+    if (editModId) {
+      sessionStorage.removeItem('openroom_edit_mod_id');
+      setInitialEditModId(editModId);
+      setShowModPanel(true);
+    }
+  }, []);
+
   // Memories loaded for SP injection
   const [memories, setMemories] = useState<MemoryEntry[]>([]);
 
@@ -540,6 +551,20 @@ const ChatPanel: React.FC<{
     });
   }, []);
 
+  // Listen for mod collection changes from Shell (e.g. after mod generation)
+  useEffect(() => {
+    const handler = (e: Event) => {
+      const col = (e as CustomEvent<ModCollection>).detail;
+      if (col) {
+        setModCollection(col);
+        const entry = getActiveModEntry(col);
+        setModManager(new ModManager(entry.config, entry.state));
+      }
+    };
+    window.addEventListener('mod-collection-changed', handler);
+    return () => window.removeEventListener('mod-collection-changed', handler);
+  }, []);
+
   const handleClearHistory = useCallback(async () => {
     await clearChatHistory(sessionPathRef.current);
     seedPrologue();
@@ -1169,14 +1194,19 @@ const ChatPanel: React.FC<{
       {showModPanel && (
         <ModPanel
           collection={modCollection}
+          initialEditId={initialEditModId}
           onSave={(col) => {
             setModCollection(col);
             saveModCollection(col);
             const entry = getActiveModEntry(col);
             setModManager(new ModManager(entry.config, entry.state));
             setShowModPanel(false);
+            setInitialEditModId(undefined);
+          }}
+          onClose={() => {
+            setShowModPanel(false);
+            setInitialEditModId(undefined);
           }}
-          onClose={() => setShowModPanel(false)}
         />
       )}
     </>
diff --git a/apps/webuiapps/src/components/Shell/ExtractPreviewModal.module.scss b/apps/webuiapps/src/components/Shell/ExtractPreviewModal.module.scss
new file mode 100644
index 0000000..7d3300e
--- /dev/null
+++ b/apps/webuiapps/src/components/Shell/ExtractPreviewModal.module.scss
@@ -0,0 +1,351 @@
+.overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  z-index: 10002;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  backdrop-filter: blur(4px);
+}
+
+.modal {
+  width: 600px;
+  max-width: 92vw;
+  max-height: 85vh;
+  background: var(--bg-2, #1c1d20);
+  border-radius: 16px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  color: rgba(255, 255, 255, 0.9);
+  font-size: 16px;
+  font-weight: 600;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  flex-shrink: 0;
+}
+
+.closeBtn {
+  background: none;
+  border: none;
+  color: rgba(255, 255, 255, 0.5);
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 4px;
+
+  &:hover {
+    color: rgba(255, 255, 255, 0.9);
+    background: rgba(255, 255, 255, 0.1);
+  }
+}
+
+.body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.sectionTitle {
+  margin: 0;
+  font-size: 13px;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.5);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+/* App cards */
+.appList {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.appCard {
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: 10px;
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  cursor: pointer;
+  transition:
+    border-color 0.15s,
+    opacity 0.15s;
+
+  &.selected {
+    border-color: rgba(250, 234, 95, 0.3);
+  }
+
+  &.unselected {
+    opacity: 0.5;
+  }
+}
+
+.checkbox {
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+  border: 1.5px solid rgba(255, 255, 255, 0.3);
+  flex-shrink: 0;
+  position: relative;
+  transition: all 0.15s;
+
+  &.checked {
+    background: #faea5f;
+    border-color: #faea5f;
+
+    &::after {
+      content: '';
+      position: absolute;
+      left: 4px;
+      top: 1px;
+      width: 5px;
+      height: 9px;
+      border: solid #121214;
+      border-width: 0 2px 2px 0;
+      transform: rotate(45deg);
+    }
+  }
+}
+
+.appHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.appInfo {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.appName {
+  font-size: 14px;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.appId {
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.35);
+  background: rgba(255, 255, 255, 0.06);
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-family: monospace;
+}
+
+.genBtn {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 5px 12px;
+  border-radius: 6px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  background: rgba(255, 255, 255, 0.08);
+  color: rgba(255, 255, 255, 0.75);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s;
+  white-space: nowrap;
+  flex-shrink: 0;
+
+  &:hover:not(:disabled) {
+    background: rgba(250, 234, 95, 0.15);
+    color: #faea5f;
+    border-color: rgba(250, 234, 95, 0.3);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  &.done {
+    background: rgba(74, 222, 128, 0.12);
+    color: #4ade80;
+    border-color: rgba(74, 222, 128, 0.2);
+    opacity: 1;
+  }
+
+  &.busy {
+    background: rgba(46, 167, 255, 0.12);
+    color: #2ea7ff;
+    border-color: rgba(46, 167, 255, 0.2);
+    opacity: 1;
+  }
+}
+
+.appScenario {
+  margin: 0;
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.55);
+  line-height: 1.5;
+}
+
+.appMeta {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+.metaLabel {
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.4);
+  flex-shrink: 0;
+  min-width: 60px;
+  padding-top: 2px;
+}
+
+.tagList {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.tag {
+  font-size: 11px;
+  padding: 1px 6px;
+  border-radius: 4px;
+  background: rgba(96, 131, 255, 0.12);
+  color: rgba(96, 131, 255, 0.85);
+}
+
+.featureList {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.feature {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.6);
+  line-height: 1.4;
+}
+
+.errorMsg {
+  margin: 0;
+  font-size: 12px;
+  color: var(--color-red, #ff3f4d);
+  padding: 4px 8px;
+  background: rgba(255, 63, 77, 0.1);
+  border-radius: 4px;
+}
+
+/* Character card */
+.charCard {
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: 10px;
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.charField {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.charLabel {
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.4);
+  font-weight: 500;
+}
+
+.charValue {
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.9);
+  font-weight: 600;
+}
+
+.charText {
+  margin: 0;
+  font-size: 13px;
+  color: rgba(255, 255, 255, 0.65);
+  line-height: 1.5;
+  overflow-y: visible;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+/* Footer */
+.footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 12px 20px;
+  border-top: 1px solid rgba(255, 255, 255, 0.08);
+  flex-shrink: 0;
+}
+
+.cancelBtn {
+  padding: 8px 20px;
+  border-radius: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  background: transparent;
+  color: rgba(255, 255, 255, 0.65);
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s;
+
+  &:hover:not(:disabled) {
+    background: rgba(255, 255, 255, 0.06);
+    color: rgba(255, 255, 255, 0.85);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+}
+
+.confirmBtn {
+  padding: 8px 20px;
+  border-radius: 8px;
+  border: none;
+  background: #faea5f;
+  color: #121214;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.15s;
+  box-shadow: 0 0 12px rgba(250, 234, 95, 0.3);
+
+  &:hover:not(:disabled) {
+    background: #fffdbb;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+}
diff --git a/apps/webuiapps/src/components/Shell/ExtractPreviewModal.tsx b/apps/webuiapps/src/components/Shell/ExtractPreviewModal.tsx
new file mode 100644
index 0000000..5a58b6c
--- /dev/null
+++ b/apps/webuiapps/src/components/Shell/ExtractPreviewModal.tsx
@@ -0,0 +1,216 @@
+import React, { useState, useCallback, useEffect, useRef } from 'react';
+import { X, Zap } from 'lucide-react';
+import type { Manifest, AppEntry } from '@/lib';
+import styles from './ExtractPreviewModal.module.scss';
+
+interface ExtractPreviewModalProps {
+  manifest: Manifest;
+  generating: boolean;
+  modGenerating: boolean;
+  genProgress: Record<string, { status: string; name: string; message?: string }>;
+  onGenerateApp: (app: AppEntry) => void;
+  onConfirm: (selectedApps: AppEntry[]) => void;
+  onCancel: () => void;
+}
+
+const ExtractPreviewModal: React.FC<ExtractPreviewModalProps> = ({
+  manifest,
+  generating,
+  modGenerating,
+  genProgress,
+  onGenerateApp,
+  onConfirm,
+  onCancel,
+}) => {
+  const { apps, character } = manifest;
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(() => new Set(apps.map((a) => a.id)));
+
+  // Keep selectedIds in sync when app IDs change (e.g. after summarize renames them)
+  const prevAppIdsRef = useRef<string[]>(apps.map((a) => a.id));
+  useEffect(() => {
+    const prevIds = prevAppIdsRef.current;
+    const currIds = apps.map((a) => a.id);
+    if (prevIds.length === currIds.length) {
+      setSelectedIds((prev) => {
+        const next = new Set(prev);
+        for (let i = 0; i < prevIds.length; i++) {
+          if (prevIds[i] !== currIds[i] && next.has(prevIds[i])) {
+            next.delete(prevIds[i]);
+            next.add(currIds[i]);
+          }
+        }
+        return next;
+      });
+    }
+    prevAppIdsRef.current = currIds;
+  }, [apps]);
+
+  const toggleSelect = useCallback((id: string) => {
+    setSelectedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  }, []);
+
+  const selectedApps = apps.filter((a) => selectedIds.has(a.id));
+
+  return (
+    <div className={styles.overlay} onClick={onCancel}>
+      <div className={styles.modal} onClick={(e) => e.stopPropagation()}>
+        {/* Header */}
+        <div className={styles.header}>
+          <span>Card Analysis Result</span>
+          <button className={styles.closeBtn} onClick={onCancel}>
+            <X size={16} />
+          </button>
+        </div>
+
+        <div className={styles.body}>
+          {/* Apps section */}
+          {apps.length > 0 && (
+            <div className={styles.section}>
+              <h3 className={styles.sectionTitle}>
+                Apps ({selectedApps.length}/{apps.length})
+              </h3>
+              <div className={styles.appList}>
+                {apps.map((app) => {
+                  const progress = genProgress[app.id];
+                  const appStatus = progress?.status;
+                  return (
+                    <div
+                      key={app.id}
+                      className={`${styles.appCard} ${selectedIds.has(app.id) ? styles.selected : styles.unselected}`}
+                      onClick={() => !generating && toggleSelect(app.id)}
+                    >
+                      <div className={styles.appHeader}>
+                        <div className={styles.appInfo}>
+                          <span
+                            className={`${styles.checkbox} ${selectedIds.has(app.id) ? styles.checked : ''}`}
+                          />
+                          <span className={styles.appName}>{app.name}</span>
+                          <span className={styles.appId}>{app.id}</span>
+                        </div>
+                        <button
+                          className={`${styles.genBtn} ${appStatus === 'completed' ? styles.done : ''} ${appStatus === 'generating' || appStatus === 'summarizing' ? styles.busy : ''}`}
+                          disabled={generating || appStatus === 'completed'}
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            onGenerateApp(app);
+                          }}
+                        >
+                          {appStatus === 'generating' || appStatus === 'summarizing' ? (
+                            'Generating...'
+                          ) : appStatus === 'completed' ? (
+                            'Done'
+                          ) : appStatus === 'error' ? (
+                            'Retry'
+                          ) : (
+                            <>
+                              <Zap size={12} /> Generate
+                            </>
+                          )}
+                        </button>
+                      </div>
+
+                      {app.format && app.format.length > 20 && (
+                        <p className={styles.appScenario}>{app.format}</p>
+                      )}
+
+                      {app.keywords.length > 0 && (
+                        <div className={styles.appMeta}>
+                          <span className={styles.metaLabel}>Keywords</span>
+                          <div className={styles.tagList}>
+                            {app.keywords.map((kw, i) => (
+                              <span key={i} className={styles.tag}>
+                                {kw}
+                              </span>
+                            ))}
+                          </div>
+                        </div>
+                      )}
+
+                      {app.tags.length > 0 && (
+                        <div className={styles.appMeta}>
+                          <span className={styles.metaLabel}>Features</span>
+                          <div className={styles.featureList}>
+                            {app.tags
+                              .filter((t) => t.description)
+                              .map((t, i) => (
+                                <span key={i} className={styles.feature}>
+                                  {t.name}: {t.description}
+                                </span>
+                              ))}
+                          </div>
+                        </div>
+                      )}
+
+                      {progress?.status === 'error' && progress.message && (
+                        <p className={styles.errorMsg}>{progress.message}</p>
+                      )}
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          )}
+
+          {/* Character section */}
+          <div className={styles.section}>
+            <h3 className={styles.sectionTitle}>Character</h3>
+            <div className={styles.charCard}>
+              {character.name && (
+                <div className={styles.charField}>
+                  <span className={styles.charLabel}>Name</span>
+                  <span className={styles.charValue}>{character.name}</span>
+                </div>
+              )}
+              {character.description && (
+                <div className={styles.charField}>
+                  <span className={styles.charLabel}>Description</span>
+                  <p className={styles.charText}>{character.description}</p>
+                </div>
+              )}
+              {character.firstMessage && (
+                <div className={styles.charField}>
+                  <span className={styles.charLabel}>First Message</span>
+                  <p className={styles.charText}>{character.firstMessage}</p>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div className={styles.footer}>
+          <button
+            className={styles.cancelBtn}
+            onClick={onCancel}
+            disabled={generating || modGenerating}
+          >
+            Cancel
+          </button>
+          <button
+            className={styles.confirmBtn}
+            onClick={() => onConfirm(selectedApps)}
+            disabled={generating || modGenerating}
+          >
+            {modGenerating
+              ? 'Generating Mod...'
+              : generating
+                ? 'Generating...'
+                : selectedApps.length === 0
+                  ? 'Generate Mod Only'
+                  : `Generate${selectedApps.length < apps.length ? ` (${selectedApps.length})` : ' All'}`}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ExtractPreviewModal;
diff --git a/apps/webuiapps/src/components/Shell/index.module.scss b/apps/webuiapps/src/components/Shell/index.module.scss
index bce2305..01ba414 100644
--- a/apps/webuiapps/src/components/Shell/index.module.scss
+++ b/apps/webuiapps/src/components/Shell/index.module.scss
@@ -254,3 +254,299 @@
     opacity: 0.4;
   }
 }
+
+/* Floating add button — positioned to the left of the bottom bar */
+.addBtn {
+  position: fixed;
+  bottom: 22px;
+  left: calc(50% - 140px);
+  transform: translateX(-50%);
+  width: 42px;
+  height: 42px;
+  border-radius: 50%;
+  border: 2px solid rgba(255, 255, 255, 0.2);
+  background: rgba(250, 234, 95, 0.9);
+  color: #121214;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10000;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+  transition: all 0.2s;
+
+  &:hover {
+    transform: translateX(-50%) scale(1.12);
+    background: #faea5f;
+  }
+
+  &.chatOpen {
+    left: calc(50% - 140px - 160px);
+  }
+}
+
+/* Upload overlay & modal */
+.uploadOverlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  z-index: 10001;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  backdrop-filter: blur(4px);
+}
+
+.uploadModal {
+  width: 400px;
+  max-width: 90vw;
+  background: #1c1d20;
+  border-radius: 16px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.uploadHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: rgba(255, 255, 255, 0.9);
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.uploadClose {
+  background: none;
+  border: none;
+  color: rgba(255, 255, 255, 0.5);
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 4px;
+
+  &:hover {
+    color: rgba(255, 255, 255, 0.9);
+    background: rgba(255, 255, 255, 0.1);
+  }
+}
+
+.uploadDropZone {
+  border: 2px dashed rgba(255, 255, 255, 0.15);
+  border-radius: 12px;
+  padding: 32px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  color: rgba(255, 255, 255, 0.5);
+  transition: all 0.15s;
+
+  &:hover {
+    border-color: rgba(250, 234, 95, 0.4);
+    color: rgba(255, 255, 255, 0.7);
+    background: rgba(255, 255, 255, 0.03);
+  }
+
+  p {
+    margin: 0;
+    font-size: 14px;
+  }
+}
+
+.uploadHint {
+  font-size: 12px !important;
+  color: rgba(255, 255, 255, 0.35);
+}
+
+.uploadedFileCenter {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 24px 16px;
+  background: rgba(255, 255, 255, 0.04);
+  border-radius: 12px;
+  color: rgba(255, 255, 255, 0.75);
+  position: relative;
+}
+
+.uploadFileName {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 13px;
+  text-align: center;
+}
+
+.analyzingCard {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px 24px;
+  background: var(--bg-2, #1c1d20);
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  color: rgba(255, 255, 255, 0.85);
+  font-size: 14px;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
+}
+
+.analyzingSpinner {
+  width: 20px;
+  height: 20px;
+  border: 2px solid rgba(255, 255, 255, 0.15);
+  border-top-color: #faea5f;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.uploadRemoveBtn {
+  background: none;
+  border: none;
+  color: rgba(255, 255, 255, 0.4);
+  cursor: pointer;
+  padding: 2px;
+  border-radius: 4px;
+  display: flex;
+
+  &:hover {
+    color: #ff3f4d;
+    background: rgba(255, 63, 77, 0.15);
+  }
+}
+
+.uploadSubmitBtn {
+  padding: 10px 16px;
+  border-radius: 10px;
+  border: none;
+  background: rgba(255, 255, 255, 0.1);
+  color: rgba(255, 255, 255, 0.35);
+  font-weight: 600;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.15s;
+
+  &.active {
+    background: #faea5f;
+    color: #121214;
+    box-shadow: 0 0 12px rgba(250, 234, 95, 0.4);
+
+    &:hover {
+      background: #fffdbb;
+    }
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+}
+
+/* Generation progress panel */
+.genPanel {
+  position: fixed;
+  top: 16px;
+  right: 16px;
+  width: 300px;
+  max-height: 400px;
+  background: var(--bg-2, #1c1d20);
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+  z-index: 10001;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.genHeader {
+  padding: 12px 16px;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--color-yellow, #faea5f);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.genList {
+  padding: 8px 0;
+  overflow-y: auto;
+  flex: 1;
+}
+
+.genItem {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  font-size: 13px;
+}
+
+.genDot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.genName {
+  flex: 1;
+  color: rgba(255, 255, 255, 0.85);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.genStatus {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.5);
+  white-space: nowrap;
+}
+
+.gen_pending .genDot {
+  background: rgba(255, 255, 255, 0.25);
+}
+
+.gen_summarizing .genDot {
+  background: var(--color-purple, #7660ff);
+  box-shadow: 0 0 6px rgba(118, 96, 255, 0.5);
+  animation: pulse-radio 1.5s ease-in-out infinite;
+}
+
+.gen_generating .genDot {
+  background: var(--color-cyan, #2ea7ff);
+  box-shadow: 0 0 6px rgba(46, 167, 255, 0.5);
+  animation: pulse-radio 1.5s ease-in-out infinite;
+}
+
+.gen_completed .genDot {
+  background: #4ade80;
+}
+
+.gen_error .genDot {
+  background: var(--color-red, #ff3f4d);
+}
+
+.gen_error .genStatus {
+  color: var(--color-red, #ff3f4d);
+}
+
+.uploadError {
+  margin: 0;
+  padding: 8px 12px;
+  border-radius: 8px;
+  background: rgba(255, 63, 77, 0.12);
+  color: #ff3f4d;
+  font-size: 13px;
+  line-height: 1.4;
+}
diff --git a/apps/webuiapps/src/components/Shell/index.tsx b/apps/webuiapps/src/components/Shell/index.tsx
index d7c4236..e898cb9 100644
--- a/apps/webuiapps/src/components/Shell/index.tsx
+++ b/apps/webuiapps/src/components/Shell/index.tsx
@@ -14,7 +14,11 @@ import {
   Radio,
   Video,
   VideoOff,
+  Plus,
   X,
+  Upload,
+  FileImage,
+  FileArchive,
   type LucideIcon,
 } from 'lucide-react';
 import ChatPanel from '../ChatPanel';
@@ -22,9 +26,22 @@ import AppWindow from '../AppWindow';
 import { getWindows, subscribe, openWindow, claimZIndex } from '@/lib/windowManager';
 import { getDesktopApps } from '@/lib/appRegistry';
 import { reportUserOsAction, onOSEvent } from '@/lib/vibeContainerMock';
-import { setReportUserActions } from '@/lib';
+import { setReportUserActions, extractCard } from '@/lib';
+import type { ExtractResult, Manifest } from '@/lib';
+import { buildModPrompt } from './modPrompt';
+import { chat, loadConfig } from '@/lib/llmClient';
+import {
+  generateModId,
+  addMod,
+  setActiveMod,
+  saveModCollection,
+  loadModCollectionSync,
+  DEFAULT_MOD_COLLECTION,
+} from '@/lib/modManager';
+import type { ModConfig } from '@/lib/modManager';
 import i18next from 'i18next';
 import { seedMetaFiles } from '@/lib/seedMeta';
+import { logger } from '@/lib/logger';
 import styles from './index.module.scss';
 
 function useWindows() {
@@ -71,7 +88,128 @@ const Shell: React.FC = () => {
   const [chatOpen, setChatOpen] = useState(true);
   const [reportEnabled, setReportEnabled] = useState(true);
   const [lang, setLang] = useState<'en' | 'zh'>('en');
-  const [liveWallpaper, setLiveWallpaper] = useState(false);
+  const [liveWallpaper, setLiveWallpaper] = useState(true);
+  const [uploadOpen, setUploadOpen] = useState(false);
+  const [uploadedFile, setUploadedFile] = useState<File | null>(null);
+  const [extractResult, setExtractResult] = useState<ExtractResult | null>(null);
+  const [extracting, setExtracting] = useState(false);
+  const [modGenerating, setModGenerating] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleFileChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      setUploadedFile(file);
+      setExtractResult(null);
+    }
+    if (fileInputRef.current) fileInputRef.current.value = '';
+  }, []);
+
+  const handleRemoveFile = useCallback(() => {
+    setUploadedFile(null);
+    setExtractResult(null);
+  }, []);
+
+  const generateMod = useCallback(
+    async (character: Manifest['character']): Promise<string | undefined> => {
+      const llmConfig = await loadConfig();
+      if (!llmConfig) {
+        logger.warn('Shell', 'No LLM config available, skipping mod generation');
+        return;
+      }
+
+      const prompt = buildModPrompt([], JSON.stringify({ character, apps: [] }));
+      logger.info('Shell', 'Mod generation prompt built, length:', prompt.length);
+
+      setModGenerating(true);
+      try {
+        const response = await chat([{ role: 'user', content: prompt }], [], llmConfig);
+        logger.info('Shell', 'Mod generation LLM response length:', response.content.length);
+
+        // Strip markdown fences if present
+        let jsonStr = response.content.trim();
+        const fenceMatch = jsonStr.match(/```(?:json)?\s*([\s\S]*?)```/);
+        if (fenceMatch) jsonStr = fenceMatch[1].trim();
+
+        const modJson = JSON.parse(jsonStr);
+        const modId = generateModId();
+        const modConfig: ModConfig = {
+          id: modId,
+          mod_name: modJson.name || modJson.identifier || 'Generated Mod',
+          mod_name_en: modJson.name || modJson.identifier || 'Generated Mod',
+          mod_description: modJson.description || '',
+          display_desc: modJson.display_desc || '',
+          prologue: modJson.prologue || '',
+          opening_rec_replies: Array.isArray(modJson.opening_rec_replies)
+            ? modJson.opening_rec_replies.map((r: string) => ({ reply_text: r }))
+            : [],
+          stage_count: Array.isArray(modJson.stages) ? modJson.stages.length : 0,
+          stages: Array.isArray(modJson.stages)
+            ? Object.fromEntries(
+                modJson.stages.map(
+                  (
+                    s: {
+                      name: string;
+                      description: string;
+                      targets: Array<{ id: number; description: string }>;
+                    },
+                    i: number,
+                  ) => [
+                    i,
+                    {
+                      stage_index: i,
+                      stage_name: s.name || `Stage ${i + 1}`,
+                      stage_description: s.description || '',
+                      stage_targets: Object.fromEntries(
+                        (s.targets || []).map((t) => [t.id, t.description]),
+                      ),
+                    },
+                  ],
+                ),
+              )
+            : {},
+        };
+
+        const collection = loadModCollectionSync() ?? DEFAULT_MOD_COLLECTION;
+        const updated = setActiveMod(addMod(collection, modConfig), modId);
+        await saveModCollection(updated);
+        logger.info('Shell', 'Mod saved successfully:', modId, modConfig.mod_name);
+        return modId;
+      } catch (err) {
+        logger.error('Shell', 'Mod generation failed:', err);
+      } finally {
+        setModGenerating(false);
+      }
+    },
+    [],
+  );
+
+  const handleUploadSubmit = useCallback(async () => {
+    if (!uploadedFile) return;
+    setExtracting(true);
+    setExtractResult(null);
+    try {
+      const result = await extractCard(uploadedFile);
+      setExtractResult(result);
+      if (result.status === 'success') {
+        logger.info('Shell', 'Card extracted:', result.manifest);
+        setUploadedFile(null);
+        setUploadOpen(false);
+        setExtractResult(null);
+        setExtracting(false);
+
+        // Directly generate mod from character data (skip app extraction)
+        const modId = await generateMod(result.manifest.character);
+        if (modId) {
+          // Store mod ID so ChatPanel auto-opens mod editor after reload
+          sessionStorage.setItem('openroom_edit_mod_id', modId);
+          window.location.reload();
+        }
+      }
+    } finally {
+      setExtracting(false);
+    }
+  }, [uploadedFile, generateMod]);
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [wallpaper, setWallpaper] = useState(VIDEO_WALLPAPER);
   const [chatZIndex, setChatZIndex] = useState(() => claimZIndex());
@@ -145,6 +283,13 @@ const Shell: React.FC = () => {
     seedMetaFiles();
   }, []);
 
+  // Pause user action reporting while upload or mod generation is in progress
+  useEffect(() => {
+    const shouldListen = !uploadOpen && !modGenerating;
+    setReportUserActions(shouldListen);
+    setReportEnabled(shouldListen);
+  }, [uploadOpen, modGenerating]);
+
   // Listen for OS events (e.g. wallpaper changes from agent)
   useEffect(() => {
     return onOSEvent((event) => {
@@ -217,7 +362,81 @@ const Shell: React.FC = () => {
         onFocus={() => setChatZIndex(claimZIndex())}
       />
 
-      <div ref={barRef} className={`${styles.bottomBar} ${chatOpen ? styles.chatOpen : ''}`}>
+      {/* Upload Modal */}
+      {uploadOpen && (
+        <div className={styles.uploadOverlay} onClick={() => setUploadOpen(false)}>
+          <div className={styles.uploadModal} onClick={(e) => e.stopPropagation()}>
+            <div className={styles.uploadHeader}>
+              <span>Upload File</span>
+              <button className={styles.uploadClose} onClick={() => setUploadOpen(false)}>
+                <X size={16} />
+              </button>
+            </div>
+            {uploadedFile ? (
+              <div className={styles.uploadedFileCenter}>
+                {uploadedFile.name.endsWith('.zip') ? (
+                  <FileArchive size={36} />
+                ) : (
+                  <FileImage size={36} />
+                )}
+                <span className={styles.uploadFileName}>{uploadedFile.name}</span>
+                <button
+                  className={styles.uploadRemoveBtn}
+                  onClick={handleRemoveFile}
+                  title="Remove"
+                >
+                  <X size={14} />
+                </button>
+              </div>
+            ) : (
+              <div className={styles.uploadDropZone} onClick={() => fileInputRef.current?.click()}>
+                <Upload size={32} />
+                <p>Click to select a file</p>
+                <p className={styles.uploadHint}>PNG image or ZIP archive</p>
+              </div>
+            )}
+            <input
+              ref={fileInputRef}
+              type="file"
+              accept=".png,.zip"
+              onChange={handleFileChange}
+              style={{ display: 'none' }}
+            />
+            {extractResult?.status === 'error' && (
+              <p className={styles.uploadError}>{extractResult.message}</p>
+            )}
+            <button
+              className={`${styles.uploadSubmitBtn} ${uploadedFile ? styles.active : ''}`}
+              disabled={!uploadedFile || extracting}
+              onClick={handleUploadSubmit}
+            >
+              {extracting ? 'Parsing...' : 'Confirm'}
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Mod generating overlay */}
+      {modGenerating && (
+        <div className={styles.uploadOverlay}>
+          <div className={styles.analyzingCard}>
+            <div className={styles.analyzingSpinner} />
+            <span>Generating mod...</span>
+          </div>
+        </div>
+      )}
+
+      {/* Floating add button */}
+      <button
+        className={`${styles.addBtn} ${chatOpen ? styles.chatOpen : ''}`}
+        onClick={() => setUploadOpen(true)}
+        title="Upload files"
+        data-testid="upload-toggle"
+      >
+        <Plus size={20} />
+      </button>
+
+      <div className={`${styles.bottomBar} ${chatOpen ? styles.chatOpen : ''}`}>
         <button
           className={`${styles.barBtn} ${liveWallpaper ? styles.liveOn : styles.liveOff}`}
           onClick={() => setLiveWallpaper((prev) => !prev)}
diff --git a/apps/webuiapps/src/components/Shell/modPrompt.ts b/apps/webuiapps/src/components/Shell/modPrompt.ts
new file mode 100644
index 0000000..5645301
--- /dev/null
+++ b/apps/webuiapps/src/components/Shell/modPrompt.ts
@@ -0,0 +1,138 @@
+/**
+ * Prompt template for generating a Mod JSON from character card export data.
+ *
+ * Usage: replace {AVAILABLE_APPS} and {CHARACTER_DATA} placeholders before sending to LLM.
+ */
+export const MOD_GENERATION_PROMPT = `You are an expert interactive narrative designer. Your task is to analyze a character card export JSON and generate a mod — a narrative scenario framework that defines the DRAMATIC STRUCTURE of a conversation experience.
+
+## Critical Principle: Separation of Concerns
+
+A mod is NOT a character profile. The character card already contains all character-specific information (personality, backstory, speech patterns, appearance, behavioral rules). The mod must NOT duplicate any of that.
+
+The mod provides ONLY what the character card lacks:
+- A narrative starting situation (where and when does the story begin?)
+- A dramatic arc (what unfolds over the course of the experience?)
+- Stage-by-stage pacing (what narrative functions happen in what order?)
+- App orchestration (how do platform apps reinforce the narrative at each stage?)
+- Transition conditions (what observable events signal that the story should advance?)
+
+Think of it this way:
+- Character card = WHO the character is (permanent)
+- Mod = WHAT HAPPENS in this particular scenario (temporal)
+
+If you find yourself writing personality descriptions, speech pattern guides, backstory summaries, or behavioral rules in the mod, STOP — that information belongs in the character card, not here.
+
+**Never use any of the character's names** (real name, stage name, screen name, account name, nickname, etc.). All references to the character must use functional designations such as "the character", "the character's online persona", "the character's real identity", "the character's public account", "the character's private account", etc. Names are exclusive to the character card; the mod describes only structure and function.
+
+## Output Format
+
+Output ONLY valid JSON. No markdown fences, no explanation.
+
+{
+  "name": "string - A short title conveying the scenario's theme, not just the character's name",
+  "identifier": "string - lowercase_snake_case unique identifier",
+  "description": "string - SCENARIO FRAMEWORK directive for the AI agent. Must describe:\\n  1. The dramatic situation (not the character): what is happening, what is at stake, what tension drives the scenario\\n  2. Relationship starting point: **State the functional relationship type in a single sentence** (e.g. 'a deep online acquaintanceship with information asymmetry', 'a chance encounter between strangers'), **and stop there — do not elaborate further**. Do not explain why the asymmetry exists, do not describe what the character has done, **do not describe whether the two have met, who knows what, who does not know what, the specific direction or content of any information gap**. A single functional relationship type constitutes the complete relationship starting point.\\n  3. Narrative trajectory: the overall arc from beginning to end, described in functional terms (e.g. 'guarded distance → reluctant trust → involuntary vulnerability → honest connection')\\n  4. App usage philosophy: how platform apps serve as narrative channels in this scenario (not mechanical instructions, but dramatic roles — e.g. 'diary entries reveal what is never said aloud', 'wallpaper shifts mirror emotional atmosphere changes'). **App usage philosophy must only describe each app's narrative functional positioning; it must not imply the character's behavioral motivation or psychological mechanisms** (e.g. 'protective shell', 'an escape from reality' and other metaphors implying behavioral patterns are forbidden). **App usage philosophy must not use metaphors implying the character's internal processes — including 'vehicle', 'transition', 'transformation', and other phrasing that implies some internal change occurs through that channel.** Each app should only state what dimension of information presentation it provides, not what change the character undergoes through it.\\n     - Forbidden: 'Voice becomes the vehicle for personality-layer transition' (implies the character undergoes a personality shift through the voice channel)\\n     - Correct: 'Voice calls provide an audio-only dimension of information presentation'\\n     - Forbidden: 'Diary is a window for emotional catharsis' (implies behavioral motivation)\\n     - Correct: 'Diary presents unedited monologue content not filtered for external consumption'\\n  **App usage philosophy must not reference specific details from the character card** (e.g. specific number of accounts, specific platform identities); use functional tier descriptions instead (e.g. use 'public layer and private layer' instead of 'two accounts').\\n  5. Global pacing directive\\n  MUST NOT contain: character personality, speech patterns, appearance, backstory, or any information already present in the character card. This includes specific historical events between the character and user (how they met, whether they have met in person, whether one has a unilateral information advantage, etc.).",
+  "display_desc": "string - User-facing, 2-4 sentences. Describe the SITUATION, not the character. End with 'Genre: [X] / [Y]'. **Must not contain specific data from the character card** (e.g. follower counts, job titles, account types); use functional descriptions instead (e.g. 'an online public identity with a large following'). **Must not contain specific relationship descriptions** (e.g. 'you are their most special person', 'you two are close friends'); only describe a functional overview of the dramatic situation the user is entering.",
+  "prologue": "string - The scenario's opening moment. Describe the SCENE and SITUATION the user enters, not the character's biography. Derived from first_mes/alternate_greetings but stripped to pure scene-setting. 2-6 sentences. **Do not describe the relationship status or interaction patterns between the user and character** (e.g. 'you two are close friends', 'they often reach out to chat', 'you are their most special online friend'). The prologue should only describe immediate scene elements the user perceives (what is on screen, what is the environment, what is happening right now); relationship status should be implied by scene elements rather than stated directly. **Do not imply pre-existing relationships through user-perspective active behaviors** (e.g. 'an online identity you follow' implies the user already follows them, 'a livestream you often watch' implies an existing interaction habit); online identities in scene elements should appear in neutral third-party form (e.g. 'an online identity', 'a certain account'), without presupposing any pre-existing connection between the user and that identity. **Do not directly or indirectly convey specific platform data or account settings from the character card**, including but not limited to: number of accounts, interaction volume differences (e.g. 'comments scrolling rapidly' implies high popularity, 'almost no interaction traces' implies alt-account status), follower scale, account activity contrasts, etc. Scene elements should remain neutral, carrying no quantitative or comparative information mappable to specific character card settings. Likewise, **do not reproduce specific plot details from the character card**.",
+  "opening_rec_replies": ["3 short replies (1-6 words), natural reactions to the prologue's specific scene"],
+  "stages": [
+    {
+      "id": 0,
+      "name": "Evocative title reflecting narrative function",
+      "description": "Stage directive (4-8 sentences). Must specify:\\n  1. NARRATIVE FUNCTION: What this stage accomplishes in the dramatic arc (not what the character does — what the STORY does)\\n  2. INTERACTION DYNAMIC: The emotional register of exchanges in this stage (e.g. 'surface-level and guarded', 'increasingly honest', 'raw and unfiltered')\\n  3. APP ORCHESTRATION: Which apps activate, what kind of content they carry, described as templates:\\n     - 'Diary: [reflection on {the core tension of this stage}]'\\n     - 'Wallpaper: [visual atmosphere matching {dominant emotion}]'\\n     - 'Music: [tone/mood descriptor]'\\n     - 'Social feed: [public-facing content that {contrasts with / reinforces} private state]'\\n  4. PACING: How quickly or slowly this stage should unfold\\n  5. TRANSITION SIGNAL: What indicates this stage is complete",
+      "targets": [
+        {
+          "id": 0,
+          "description": "An observable conversation event (a question asked, a topic raised, a reaction given) — NOT an internal character state"
+        }
+      ]
+    }
+  ]
+}
+
+## Narrative Pattern Detection
+
+Analyze the character card to identify the dominant dramatic pattern, then design the scenario arc around it:
+
+| Signal in Character Data | Narrative Pattern |
+|---|---|
+| Hidden identity / dual persona / public vs. private self | **Revelation Arc**: surface → cracks → exposure → reckoning |
+| Emotional wound / trauma / guarded past | **Trust Arc**: walls up → testing → breach → vulnerability |
+| Rich world / abilities / lore / adventure elements | **Discovery Arc**: encounter → exploration → wonder → deeper understanding |
+| Intense feelings toward user / possessiveness / longing | **Intimacy Arc**: distance → closeness → boundary testing → commitment or rupture |
+| Conflicting loyalties / moral dilemmas | **Tension Arc**: status quo → pressure → forced choice → consequence |
+| Mundane setting with emotional depth | **Slice-of-Life Arc**: routine → disruption → adaptation → new normal |
+
+Choose the MOST DRAMATICALLY COMPELLING pattern as the primary arc. Secondary patterns can inform individual stages.
+
+## Stage Design Rules
+
+1. **3-5 stages**, each defined by NARRATIVE FUNCTION, not plot events
+2. **2-4 targets per stage**, each an observable conversation condition
+3. **Target IDs globally sequential** across all stages (0, 1, 2, 3...)
+4. **Stage descriptions must NOT contain character-specific content** — no character names (use functional designations like "the character", "the character's online persona"), no personality descriptions, no dialogue examples, no backstory. Only scenario structure and app directives.
+5. **Personality and emotional texture leak check**: If stage descriptions contain adjectives or depictions describing the character's personality, tone, or behavioral manner (e.g. "brooding", "bubbly", "cute", "clumsy", "sweet", "clingy", "heavy", "raw", "gentle"), **they must be deleted and replaced with narrative function terms** (e.g. "a rupture from the previously established pattern", "a fundamental shift in communication mode", "the established persona's protective layer is removed", "unfiltered direct interaction"). **This rule equally applies to interaction dynamic descriptions — emotional texture descriptors like "clumsy yet sincere", "raw and unfiltered" are also forbidden and must be replaced with functional terms** (e.g. "unfiltered direct expression after the established pattern has been removed", "the process of both parties re-establishing interaction methods under a new paradigm"). Self-check method: if the description still holds after removing the character card, it passes; if understanding requires knowledge of the character card's content, it fails and must be rewritten.
+6. **App content in stages uses bracket templates**, not literal text:
+   - GOOD: "Diary: [a raw reflection on {what just happened}, revealing something the character would not say directly]"
+   - BAD: "Diary: 'I watched her leave and I wanted to scream but I just stood there'"
+7. **Surveillance/monitoring templates must use abstract functional descriptions**; specific physical actions, facial expressions, or behavioral details are forbidden:
+   - GOOD: "Surveillance: [the character's unguarded emotional reaction triggered by recalling a key scene while alone]"
+   - GOOD: "Surveillance: [the character's unguarded genuine body language and emotional reactions in a face-to-face setting]"
+   - BAD: "Surveillance: [unable to meet the user's eyes, trembling when physically close]"
+   - BAD: "Surveillance: [hiding in the room covering their face]"
+8. **Stage titles must only reflect narrative function; metaphors mappable to specific character card settings are forbidden** (e.g. do not use "dual layer" when the character has two accounts, do not use "mask" when the character has a disguised identity — these are imagery that directly maps to character card structure). Use universal dramatic terminology instead (e.g. "stable operation of the established pattern", "uncontrollable rupture", "fundamental collapse", "establishment of a new paradigm").
+9. **Stages follow universal dramatic progression**:
+   - Equilibrium → Disruption → Escalation → Climax → New Equilibrium
+   - May compress or split stages as needed (3-5 total)
+10. **Final stage must define a transformed relationship state**, not a plot conclusion
+11. **Every target must be a user-side observable conversation event** — i.e. what the user said, asked, or chose. **Character-side behaviors or state changes are forbidden as targets** (e.g. "the character's information control mechanism fails", "the character exposes a piece of information"), because targets are conditions used to determine stage progression and must be based on observable user behavior. If you need to describe a character-side trigger event, reframe it as the observable result that event produces on the user side (e.g. change "the character's information control mechanism fails" to "the user receives information in conversation that clearly contradicts the established pattern and responds to it").
+
+## Content Boundaries
+
+The mod MUST contain:
+- Starting situation and scene
+- Dramatic arc definition
+- Stage-by-stage narrative functions
+- App orchestration templates
+- Observable transition targets
+
+The mod MUST NOT contain:
+- Any of the character's names (real name, stage name, screen name, account name, nickname) — always replace with functional designations
+- **Specific historical events or relationship details between the character and user** — including but not limited to: "the two have never met in person", "the user does not know the character's real identity", "the character unilaterally knows about the user", "the user has no direct awareness of the character's true state", "you are their most special online friend", "you two are close friends who often chat privately", etc. **All of these are specific plot details that must be replaced with a single functional relationship type sentence (e.g. "a deep online relationship with information asymmetry") and must not be expanded into multi-sentence descriptions.** This rule equally applies to display_desc and prologue.
+- **The character's specific professional identity, platform data, or account settings** (e.g. follower counts, account types, specific job titles); replace with functional descriptions (e.g. "an online public identity with a large following", "public layer and private layer"). **This rule equally applies to indirect descriptions** — do not indirectly convey character card platform data through interaction volume depictions ("rapidly scrolling comment sections"), activity level differences ("almost no interaction traces"), etc.
+- Character personality traits or descriptions
+- Character speech patterns or dialogue style
+- Character backstory or history
+- Character appearance
+- Behavioral rules (these belong in the character card's roleplay[] field)
+- Specific dialogue lines or example utterances
+- **Specific depictions of the character's online/offline contrast** (e.g. "bubbly vs. brooding", "cute and clingy vs. heavy and clumsy") — these are personality descriptions and should be replaced with functional descriptions like "a rupture between the established pattern and the authentic pattern"
+- **The character's specific behavioral patterns toward the user** (e.g. "secretly watching", "monitoring", "unilaterally witnessing") — these are backstory and behavioral rules and should be replaced with structural descriptions like "information asymmetry"
+- **Specific emotional texture depictions of interactions** (e.g. "anime-style sweetness", "cute tone", "clumsy and heavy expression", "clumsy yet sincere", "raw and unfiltered") — these are speech patterns and should be replaced with functional descriptions like "interaction conforming to the established persona pattern", "expression that ruptures the prior communication pattern", "unfiltered direct expression after the established pattern has been removed"
+- **Metaphors implying the character's behavioral motivation or psychological mechanisms** (e.g. "protective shell", "an escape outlet", "a window for emotional catharsis", "a vehicle for personality transition") — these are behavioral rules and personality descriptions and should be replaced with pure functional positioning descriptions (e.g. "core display arena", "private communication channel", "audio-only dimension of information presentation")
+
+## Language Rule
+
+All output must match the primary language of \`character.description\`.
+
+---
+
+Now generate a Mod JSON from the following character card export data and available apps:
+
+<AVAILABLE_APPS>
+{AVAILABLE_APPS}
+</AVAILABLE_APPS>
+
+<CHARACTER_DATA>
+{CHARACTER_DATA}
+</CHARACTER_DATA>`;
+
+/**
+ * Build the final mod generation prompt with actual data filled in.
+ */
+export function buildModPrompt(availableApps: string[], characterDataJson: string): string {
+  return MOD_GENERATION_PROMPT.replace('{AVAILABLE_APPS}', availableApps.join(', ')).replace(
+    '{CHARACTER_DATA}',
+    characterDataJson,
+  );
+}
diff --git a/apps/webuiapps/src/lib/cardExtractor.ts b/apps/webuiapps/src/lib/cardExtractor.ts
new file mode 100644
index 0000000..09c603e
--- /dev/null
+++ b/apps/webuiapps/src/lib/cardExtractor.ts
@@ -0,0 +1,1024 @@
+/**
+ * SillyTavern Card Extractor (TypeScript / Browser)
+ *
+ * Parses character card PNG or CharX ZIP files and extracts a structured
+ * manifest containing apps, lore entries, and regex scripts.
+ *
+ * Input:  File (PNG or ZIP)
+ * Output: ExtractResult — success with manifest, or error with message
+ */
+
+import JSZip from 'jszip';
+import { logger } from './logger';
+
+// ── Types ──────────────────────────────────────────────────────────
+
+export interface AppIdMeta {
+  id: string;
+  name: string;
+}
+
+export interface TagSchema {
+  name: string;
+  type: 'text' | 'list' | 'wrapper' | 'pair' | 'image';
+  description?: string;
+  itemPattern?: string;
+  children?: TagSchema[];
+}
+
+export interface RegexScript {
+  name: string;
+  file: string;
+  findRegex: string;
+  replaceString: string;
+  type: string;
+  disabled: boolean;
+  placement: number[];
+  runOnEdit: boolean;
+  source: string;
+}
+
+export interface ImageTagPair {
+  tag: string;
+  imgStyle: string;
+  openScript: string;
+  closeScript: string;
+}
+
+export interface SkinVariant {
+  findRegex: string;
+  variants: { name: string; file: string; disabled: boolean }[];
+}
+
+export interface AppEntry {
+  id: string;
+  name: string;
+  entryIndex: number;
+  keywords: string[];
+  format: string;
+  tags: TagSchema[];
+  resources: Record<string, string[]>;
+  example: string;
+  scripts: RegexScript[];
+  imageTagPairs: ImageTagPair[];
+  skinVariants: SkinVariant[];
+}
+
+export interface LoreEntry {
+  index: number;
+  name: string;
+  keys: string[];
+  secondaryKeys: string[];
+  content: string;
+  constant: boolean;
+  selective: boolean;
+  disabled: boolean;
+  order: number;
+  position: number;
+}
+
+export interface CharacterInfo {
+  name: string;
+  description: string;
+  firstMessage: string;
+  alternateGreetings: string[];
+  personality: string;
+  scenario: string;
+}
+
+export interface Manifest {
+  version: string;
+  generatedAt: string;
+  source: string;
+  sourceType: string;
+  apps: AppEntry[];
+  lore: LoreEntry[];
+  character: CharacterInfo;
+}
+
+export type ExtractResult =
+  | { status: 'success'; manifest: Manifest }
+  | { status: 'error'; message: string };
+
+// ── Internal types ─────────────────────────────────────────────────
+
+interface InternalEntry {
+  key: string[];
+  keysecondary: string[];
+  comment: string;
+  content: string;
+  constant: boolean;
+  selective: boolean;
+  disable: boolean;
+  order: number;
+  position: number;
+}
+
+interface InternalScript {
+  name: string;
+  file: string;
+  scriptName: string;
+  findRegex: string;
+  replaceString: string;
+  disabled: boolean;
+  placement: number[];
+  runOnEdit: boolean;
+  _source: string;
+  type: string;
+  matchedApp: string | string[] | null;
+  regexTags: string[];
+}
+
+// ── Constants ──────────────────────────────────────────────────────
+
+const MAX_FILE_SIZE = 50 * 1024 * 1024; // 50 MB
+
+/**
+ * Derive a kebab-case ID from a comment string.
+ * Handles ASCII (spaces/underscores → hyphens) and CJK (kept as-is).
+ */
+function commentToId(comment: string): string {
+  return comment
+    .trim()
+    .toLowerCase()
+    .replace(/[\s_]+/g, '-')
+    .replace(/[^a-z0-9\p{Unified_Ideograph}-]/gu, '')
+    .replace(/-+/g, '-')
+    .replace(/^-|-$/g, '');
+}
+
+const TAG_NAME_PATTERN = '[a-zA-Z\\p{Unified_Ideograph}]';
+const RESOURCE_LIST_NAMES = ['scene_list', 'CG_list', 'fans', 'surveillance', 'live'];
+
+// ── PNG parsing ────────────────────────────────────────────────────
+
+function parsePngCardBytes(buffer: ArrayBuffer): Record<string, unknown> {
+  const view = new DataView(buffer);
+  const bytes = new Uint8Array(buffer);
+
+  // Verify PNG signature
+  if (bytes[0] !== 0x89 || bytes[1] !== 0x50 || bytes[2] !== 0x4e || bytes[3] !== 0x47) {
+    throw new Error('Not a valid PNG file');
+  }
+
+  const chunks: Record<string, string> = {};
+  let offset = 8; // Skip PNG signature
+
+  while (offset < buffer.byteLength) {
+    if (offset + 8 > buffer.byteLength) break;
+
+    const length = view.getUint32(offset);
+    const chunkType = String.fromCharCode(
+      bytes[offset + 4],
+      bytes[offset + 5],
+      bytes[offset + 6],
+      bytes[offset + 7],
+    );
+    offset += 8;
+
+    if (offset + length + 4 > buffer.byteLength) break;
+
+    if (chunkType === 'tEXt') {
+      const data = bytes.slice(offset, offset + length);
+      const nullIdx = data.indexOf(0);
+      if (nullIdx !== -1) {
+        const keyword = new TextDecoder('latin1').decode(data.slice(0, nullIdx));
+        const text = new TextDecoder('latin1').decode(data.slice(nullIdx + 1));
+        chunks[keyword] = text;
+      }
+    }
+
+    offset += length + 4; // data + CRC
+
+    if (chunkType === 'IEND') break;
+  }
+
+  // Prefer ccv3 over chara
+  const raw = chunks['ccv3'] || chunks['chara'];
+  if (!raw) {
+    throw new Error('No character data found in PNG');
+  }
+
+  // Decode base64 → binary string → UTF-8
+  const binaryStr = atob(raw);
+  const decoded = new Uint8Array(binaryStr.length);
+  for (let i = 0; i < binaryStr.length; i++) {
+    decoded[i] = binaryStr.charCodeAt(i);
+  }
+  const jsonStr = new TextDecoder('utf-8').decode(decoded);
+  return JSON.parse(jsonStr);
+}
+
+// ── CharX (ZIP) parsing ────────────────────────────────────────────
+
+async function parseCharx(buffer: ArrayBuffer): Promise<Record<string, unknown>> {
+  // Find ZIP signature (handle self-extracting archives)
+  const bytes = new Uint8Array(buffer);
+  let zipOffset = -1;
+  for (let i = 0; i < bytes.length - 4; i++) {
+    if (
+      bytes[i] === 0x50 &&
+      bytes[i + 1] === 0x4b &&
+      bytes[i + 2] === 0x03 &&
+      bytes[i + 3] === 0x04
+    ) {
+      zipOffset = i;
+      break;
+    }
+  }
+  if (zipOffset < 0) {
+    throw new Error('No ZIP data found in file');
+  }
+
+  const zip = await JSZip.loadAsync(buffer.slice(zipOffset));
+  const cardFile = zip.file('card.json');
+  if (!cardFile) {
+    throw new Error('No card.json found in CharX archive');
+  }
+
+  const text = await cardFile.async('text');
+  return JSON.parse(text);
+}
+
+// ── Input detection ────────────────────────────────────────────────
+
+function detectInputType(fileName: string, buffer: ArrayBuffer): 'png' | 'charx' {
+  const ext = fileName.split('.').pop()?.toLowerCase();
+  if (ext === 'png') return 'png';
+  if (ext === 'charx' || ext === 'zip') return 'charx';
+
+  // Fallback: magic bytes
+  const bytes = new Uint8Array(buffer.slice(0, 8));
+  if (bytes[0] === 0x89 && bytes[1] === 0x50 && bytes[2] === 0x4e && bytes[3] === 0x47) {
+    return 'png';
+  }
+  if (bytes[0] === 0x50 && bytes[1] === 0x4b && bytes[2] === 0x03 && bytes[3] === 0x04) {
+    return 'charx';
+  }
+
+  throw new Error(`Cannot detect input type for: ${fileName}`);
+}
+
+// ── Card entry conversion ──────────────────────────────────────────
+
+function loadEntriesFromCard(card: Record<string, unknown>): InternalEntry[] {
+  const data = (card['data'] || {}) as Record<string, unknown>;
+  const charBook = (data['character_book'] || null) as Record<string, unknown> | null;
+  if (!charBook) return [];
+
+  let rawEntries = charBook['entries'] as unknown[] | Record<string, unknown>;
+  if (rawEntries && !Array.isArray(rawEntries)) {
+    rawEntries = Object.values(rawEntries);
+  }
+  if (!rawEntries) return [];
+
+  return (rawEntries as Record<string, unknown>[]).map((entry, i) => ({
+    key: (entry['keys'] as string[]) || [],
+    keysecondary: (entry['secondary_keys'] as string[]) || [],
+    comment: (entry['comment'] as string) || (entry['name'] as string) || '',
+    content: (entry['content'] as string) || '',
+    constant: (entry['constant'] as boolean) || false,
+    selective: entry['selective'] !== undefined ? (entry['selective'] as boolean) : true,
+    disable: !(entry['enabled'] !== undefined ? (entry['enabled'] as boolean) : true),
+    order: (entry['insertion_order'] as number) || 100,
+    position: ((entry['extensions'] as Record<string, unknown>)?.['position'] as number) || 0,
+    _index: (entry['id'] as number) ?? i,
+  }));
+}
+
+function loadRegexScriptsFromCard(card: Record<string, unknown>): InternalScript[] {
+  const data = (card['data'] || {}) as Record<string, unknown>;
+  const extensions = (data['extensions'] || {}) as Record<string, unknown>;
+  const scripts = (extensions['regex_scripts'] || []) as Record<string, unknown>[];
+
+  return scripts.map((s, i) => ({
+    name: (s['scriptName'] as string) || '',
+    scriptName: (s['scriptName'] as string) || '',
+    file: `embedded_${String(i).padStart(2, '0')}_${(s['scriptName'] as string) || ''}`,
+    findRegex: (s['findRegex'] as string) || '',
+    replaceString: (s['replaceString'] as string) || '',
+    disabled: (s['disabled'] as boolean) || false,
+    placement: (s['placement'] as number[]) || [],
+    runOnEdit: (s['runOnEdit'] as boolean) || false,
+    _source: 'embedded',
+    type: '',
+    matchedApp: null,
+    regexTags: [],
+  }));
+}
+
+// ── Tag extraction ─────────────────────────────────────────────────
+
+function extractTags(content: string): TagSchema[] {
+  const tags: TagSchema[] = [];
+  const seen = new Set<string>();
+
+  const lines = content.split('\n');
+  const formatLines: string[] = [];
+  let inFormat = false;
+
+  const tagLineRe = new RegExp(`^<${TAG_NAME_PATTERN}+>.*</${TAG_NAME_PATTERN}+>$`, 'u');
+
+  for (const line of lines) {
+    const trimmed = line.trim();
+    if (tagLineRe.test(trimmed)) {
+      inFormat = true;
+      formatLines.push(trimmed);
+    } else if (inFormat && trimmed === '') {
+      continue;
+    } else if (inFormat) {
+      break;
+    }
+  }
+
+  const tagMatchRe = new RegExp(`^<(${TAG_NAME_PATTERN}+)>(.*)</\\1>$`, 'u');
+  const nestedRe = new RegExp(`^<(${TAG_NAME_PATTERN}+)>.*</\\1>$`, 'u');
+
+  for (const line of formatLines) {
+    const m = tagMatchRe.exec(line);
+    if (!m) continue;
+    const tagName = m[1];
+    const inner = m[2];
+    if (seen.has(tagName)) continue;
+    seen.add(tagName);
+
+    const nested = nestedRe.exec(inner);
+    if (nested) {
+      tags.push({
+        name: tagName,
+        type: 'wrapper',
+        children: [{ name: nested[1], type: 'image' }],
+      });
+    } else if (/\{.*?[：:].+?\}/.test(inner)) {
+      const itemM = /\{(.*?)\}/.exec(inner);
+      tags.push({
+        name: tagName,
+        type: 'list',
+        itemPattern: itemM ? itemM[0] : inner,
+      });
+    } else {
+      const desc = inner.replace(/\{\{(.*?)\}\}/g, '$1');
+      tags.push({ name: tagName, type: 'text', description: desc });
+    }
+  }
+
+  // Inline tags
+  const inlineRe = new RegExp(
+    `<(${TAG_NAME_PATTERN}+\\d*)>\\{\\{(.*?)\\}\\}</${TAG_NAME_PATTERN}+\\d*>`,
+    'gu',
+  );
+  let inlineM;
+  while ((inlineM = inlineRe.exec(content)) !== null) {
+    const tagName = inlineM[1];
+    const desc = inlineM[2];
+    if (!seen.has(tagName)) {
+      seen.add(tagName);
+      tags.push({ name: tagName, type: 'text', description: desc });
+    }
+  }
+
+  // Paired message tags
+  const pairRe = /<([a-zA-Z]+)1>\{\{(.*?)\}\}/g;
+  let pairM;
+  while ((pairM = pairRe.exec(content)) !== null) {
+    const prefix = pairM[1];
+    const desc1 = pairM[2];
+    const key = `${prefix}1`;
+    if (seen.has(key)) continue;
+    const m2Re = new RegExp(`<${prefix}2>\\{\\{(.*?)\\}\\}`);
+    const m2 = m2Re.exec(content);
+    if (m2) {
+      seen.add(key);
+      seen.add(`${prefix}2`);
+      tags.push({
+        name: `${prefix}1/${prefix}2`,
+        type: 'pair',
+        description: `${desc1} / ${m2[1]}`,
+      });
+    }
+  }
+
+  return tags;
+}
+
+// ── Resource extraction ────────────────────────────────────────────
+
+function extractResources(content: string): Record<string, string[]> {
+  const resources: Record<string, string[]> = {};
+
+  const pattern = new RegExp(
+    `<(${RESOURCE_LIST_NAMES.join('|')})>\\s*\\n([\\s\\S]*?)\\n\\s*</\\1>`,
+    'g',
+  );
+  let m;
+  while ((m = pattern.exec(content)) !== null) {
+    const listName = m[1];
+    const body = m[2];
+    const files = body
+      .split('\n')
+      .map((l) => l.trim().replace(/^(\u200b|\u200c|\u200d|\uFEFF)+/, ''))
+      .filter((l) => l && /\.\w{2,4}$/.test(l));
+    resources[listName] = files;
+  }
+
+  const jsonM = /```json\s*\n\{\s*\n\[\s*\n([\s\S]*?)\]\s*\n\}\s*\n```/.exec(content);
+  if (jsonM) {
+    const stickers = jsonM[1]
+      .split('\n')
+      .map((l) => l.trim())
+      .filter((l) => l && /\.\w{2,5}$/.test(l));
+    resources['stickers'] = stickers;
+  }
+
+  return resources;
+}
+
+// ── Format & example ──────────────────────────────────────────────
+
+function detectFormatType(content: string): string {
+  if (/\[(语音中|视频中|通话结束)\|/.test(content)) return 'bracket';
+  const tagRe = new RegExp(`<${TAG_NAME_PATTERN}+>.*</${TAG_NAME_PATTERN}+>`, 'u');
+  if (tagRe.test(content)) return 'xml';
+  return 'prose';
+}
+
+function extractExample(content: string): string {
+  const markers = ['生成示例：\n', '生成示例:\n', '总格式示例：\n', '总格式示例:\n'];
+  for (const marker of markers) {
+    const idx = content.indexOf(marker);
+    if (idx === -1) continue;
+    const rest = content.slice(idx + marker.length);
+    const endM = /\n(?:请|注意|在|不要|保持|生成的|禁止|<CG>|如果)/.exec(rest);
+    const end = endM ? endM.index : rest.length;
+    const example = rest.slice(0, end).trim();
+    if (example) return example;
+  }
+  return '';
+}
+
+// ── App extraction ─────────────────────────────────────────────────
+
+function extractAppsFromEntries(entries: Record<string, InternalEntry>): AppEntry[] {
+  const apps: AppEntry[] = [];
+
+  for (const [index, entry] of Object.entries(entries)) {
+    const content = entry.content || '';
+    const comment = entry.comment || '';
+
+    if (!content.includes('<rule S>')) continue;
+
+    const id = commentToId(comment);
+    if (!id) {
+      console.warn(`Warning: Empty app ID from comment "${comment}" at index ${index}, skipping.`);
+      continue;
+    }
+
+    apps.push({
+      id,
+      name: comment,
+      entryIndex: parseInt(index, 10),
+      keywords: [...entry.key],
+      format: detectFormatType(content),
+      tags: extractTags(content),
+      resources: extractResources(content),
+      example: extractExample(content),
+      scripts: [],
+      imageTagPairs: [],
+      skinVariants: [],
+    });
+  }
+
+  return apps;
+}
+
+function extractLoreEntries(entries: Record<string, InternalEntry>): LoreEntry[] {
+  const lore: LoreEntry[] = [];
+
+  for (const [index, entry] of Object.entries(entries)) {
+    if ((entry.content || '').includes('<rule S>')) continue;
+
+    const keys = entry.key;
+    const keysecondary = entry.keysecondary;
+
+    lore.push({
+      index: parseInt(index, 10),
+      name: entry.comment || '',
+      keys: Array.isArray(keys) ? [...keys] : [keys],
+      secondaryKeys: Array.isArray(keysecondary) ? [...keysecondary] : [keysecondary],
+      content: entry.content || '',
+      constant: entry.constant || false,
+      selective: entry.selective !== undefined ? entry.selective : true,
+      disabled: entry.disable || false,
+      order: entry.order || 100,
+      position: entry.position || 0,
+    });
+  }
+
+  lore.sort((a, b) => a.order - b.order);
+  return lore;
+}
+
+// ── Regex script analysis ──────────────────────────────────────────
+
+function extractTagsFromRegex(findRegex: string): string[] {
+  const tags = new Set<string>();
+
+  for (const m of findRegex.matchAll(/<([a-zA-Z\p{Unified_Ideograph}]+\d*)>/gu)) {
+    tags.add(m[1]);
+  }
+  for (const m of findRegex.matchAll(/<\\?\/?\\?\/([a-zA-Z\p{Unified_Ideograph}]+\d*)>/gu)) {
+    tags.add(m[1]);
+  }
+  for (const m of findRegex.matchAll(/\\?\[(转账|语音中|视频中|通话结束)\\?\|/g)) {
+    tags.add(m[1]);
+  }
+  if (findRegex.includes('\\{') && findRegex.includes('\\}')) {
+    tags.add('弹幕格式');
+  }
+
+  return [...tags];
+}
+
+/**
+ * Build a dynamic tag → app ID mapping from extracted apps.
+ * Each tag found in an app's content is mapped to that app's ID.
+ */
+function buildTagAppMap(apps: AppEntry[]): Record<string, string[]> {
+  const map: Record<string, string[]> = {};
+  for (const app of apps) {
+    for (const tag of app.tags) {
+      const name = tag.name.includes('/') ? tag.name.split('/') : [tag.name];
+      for (const n of name) {
+        if (!map[n]) map[n] = [];
+        if (!map[n].includes(app.id)) map[n].push(app.id);
+      }
+    }
+  }
+  return map;
+}
+
+function matchScriptToApp(
+  regexTags: string[],
+  tagAppMap: Record<string, string[]>,
+): string | string[] | null {
+  const scores: Record<string, number> = {};
+
+  for (const tag of regexTags) {
+    const appIds = tagAppMap[tag];
+    if (!appIds) continue;
+    for (const appId of appIds) {
+      scores[appId] = (scores[appId] || 0) + 1;
+    }
+  }
+
+  const entries = Object.entries(scores);
+  if (entries.length === 0) return null;
+
+  entries.sort((a, b) => b[1] - a[1]);
+  const topScore = entries[0][1];
+  const topApps = entries.filter(([, s]) => s === topScore).map(([id]) => id);
+  return topApps.length === 1 ? topApps[0] : topApps;
+}
+
+function classifyScript(script: InternalScript, regexTags: string[]): string {
+  const replaceStr = script.replaceString || '';
+  const findRegex = script.findRegex || '';
+
+  if (replaceStr.length > 500 && (replaceStr.includes('<div') || replaceStr.includes('<style'))) {
+    return 'layout';
+  }
+  if (/< \w+>.*\[\^.*\]/.test(findRegex) && replaceStr.includes('<img src=')) {
+    return 'image-open';
+  }
+  if (/<\/\w+>/.test(findRegex) && replaceStr.includes('style=')) {
+    return 'image-close';
+  }
+  if (
+    regexTags.some((t) => ['ch1', 'ch2', 'um1', 'um2', 'pl1', 'pl2'].includes(t)) &&
+    replaceStr.includes('border-radius')
+  ) {
+    return 'chat-bubble';
+  }
+  if (replaceStr.includes('<span') || replaceStr.includes('<br>')) {
+    return 'formatting';
+  }
+  return 'transform';
+}
+
+function normalizeScripts(
+  rawScripts: InternalScript[],
+  tagAppMap: Record<string, string[]>,
+): InternalScript[] {
+  return rawScripts.map((s) => {
+    const regexTags = extractTagsFromRegex(s.findRegex || '');
+    const matchedApp = matchScriptToApp(regexTags, tagAppMap);
+    return {
+      ...s,
+      name: s.name || s.scriptName || '',
+      type: classifyScript(s, regexTags),
+      matchedApp,
+      regexTags,
+    };
+  });
+}
+
+function detectImageTagPairs(scripts: InternalScript[]): ImageTagPair[] {
+  const openScripts: Record<string, InternalScript> = {};
+  const closeScripts: Record<string, InternalScript> = {};
+
+  for (const s of scripts) {
+    const findRegex = s.findRegex;
+    const replaceStr = s.replaceString;
+
+    const openM = /<(\w+)>\.\*/.exec(findRegex);
+    if (openM && replaceStr.includes('files.catbox.moe')) {
+      openScripts[openM[1]] = s;
+    }
+
+    const closeM = /<\\?\/?\\?\/(\w+)>/.exec(findRegex);
+    if (closeM && replaceStr.includes('style=') && !replaceStr.includes('<div')) {
+      const body = findRegex.replace(/^\/|\/[a-z]*$/g, '');
+      if (/^<\\?\/?\\?\/\w+>$/.test(body)) {
+        closeScripts[closeM[1]] = s;
+      }
+    }
+  }
+
+  const pairs: ImageTagPair[] = [];
+  for (const [tag, openS] of Object.entries(openScripts)) {
+    const closeS = closeScripts[tag];
+    if (!closeS) continue;
+    const styleM = /style="([^"]+)"/.exec(closeS.replaceString);
+    pairs.push({
+      tag,
+      imgStyle: styleM ? styleM[1] : '',
+      openScript: openS.file || openS.name || '',
+      closeScript: closeS.file || closeS.name || '',
+    });
+  }
+  return pairs;
+}
+
+function detectSkinVariants(scripts: InternalScript[]): SkinVariant[] {
+  const groups: Record<string, InternalScript[]> = {};
+  for (const s of scripts) {
+    const key = s.findRegex;
+    if (!groups[key]) groups[key] = [];
+    groups[key].push(s);
+  }
+
+  return Object.entries(groups)
+    .filter(([, group]) => group.length >= 2)
+    .map(([regex, group]) => ({
+      findRegex: regex,
+      variants: group.map((s) => ({
+        name: s.name,
+        file: s.file || s.name || '',
+        disabled: s.disabled,
+      })),
+    }));
+}
+
+function attachScriptsToApps(
+  allScripts: InternalScript[],
+  apps: AppEntry[],
+  tagAppMap: Record<string, string[]>,
+): void {
+  const appScriptsMap: Record<string, InternalScript[]> = {};
+
+  for (const s of allScripts) {
+    if (!s.matchedApp) continue;
+    const appIds = Array.isArray(s.matchedApp) ? s.matchedApp : [s.matchedApp];
+    for (const appId of appIds) {
+      if (!appScriptsMap[appId]) appScriptsMap[appId] = [];
+      appScriptsMap[appId].push(s);
+    }
+  }
+
+  const imageTagPairs = detectImageTagPairs(allScripts);
+  const skinVariants = detectSkinVariants(allScripts);
+
+  for (const app of apps) {
+    const scripts = appScriptsMap[app.id] || [];
+    app.scripts = scripts.map((s) => ({
+      name: s.name,
+      file: s.file || s.name || '',
+      findRegex: s.findRegex,
+      replaceString: s.replaceString,
+      type: s.type,
+      disabled: s.disabled,
+      placement: s.placement,
+      runOnEdit: s.runOnEdit,
+      source: s._source || 'unknown',
+    }));
+
+    app.imageTagPairs = imageTagPairs.filter((p) => {
+      const appIds = tagAppMap[p.tag];
+      return appIds ? appIds.includes(app.id) : false;
+    });
+
+    app.skinVariants = skinVariants.filter((v) =>
+      v.variants.some((va) => scripts.some((s) => (s.file || s.name || '') === va.file)),
+    );
+  }
+}
+
+// ── App Consolidation via LLM ─────────────────────────────────────
+
+interface ConsolidationGroup {
+  name: string;
+  memberIds: string[];
+  keywords: string[];
+  tags: { name: string; description?: string }[];
+}
+
+function mergeAppEntriesWithLLMData(members: AppEntry[], group: ConsolidationGroup): AppEntry {
+  const first = members[0];
+  const allScripts: RegexScript[] = [];
+  const allImagePairs: ImageTagPair[] = [];
+  const allSkinVariants: SkinVariant[] = [];
+  const mergedResources: Record<string, string[]> = {};
+  const examples: string[] = [];
+
+  for (const m of members) {
+    allScripts.push(...m.scripts);
+    allImagePairs.push(...m.imageTagPairs);
+    allSkinVariants.push(...m.skinVariants);
+    if (m.example) examples.push(m.example);
+    for (const [k, v] of Object.entries(m.resources)) {
+      if (!mergedResources[k]) mergedResources[k] = [];
+      for (const item of v) {
+        if (!mergedResources[k].includes(item)) mergedResources[k].push(item);
+      }
+    }
+  }
+
+  // Use LLM-curated keywords; resolve tags back to full TagSchema from members
+  const memberTagMap = new Map<string, TagSchema>();
+  for (const m of members) {
+    for (const t of m.tags) {
+      memberTagMap.set(t.name, t);
+    }
+  }
+  const resolvedTags: TagSchema[] = group.tags.map((gt) => {
+    const full = memberTagMap.get(gt.name);
+    if (full) {
+      // Keep structural fields from original, but prefer LLM-curated description
+      return { ...full, description: gt.description ?? full.description };
+    }
+    return { name: gt.name, type: 'text' as const, description: gt.description };
+  });
+
+  return {
+    id: group.name,
+    name: group.name,
+    entryIndex: first.entryIndex,
+    keywords: group.keywords,
+    format: first.format,
+    tags: resolvedTags,
+    resources: mergedResources,
+    example: examples.join('\n---\n'),
+    scripts: allScripts,
+    imageTagPairs: allImagePairs,
+    skinVariants: allSkinVariants,
+  };
+}
+
+export async function consolidateApps(
+  apps: AppEntry[],
+  character: CharacterInfo,
+): Promise<AppEntry[]> {
+  logger.info(
+    'consolidateApps',
+    'Starting with',
+    apps.length,
+    'apps:',
+    apps.map((a) => a.id),
+  );
+  const { loadConfig, chat } = await import('./llmClient');
+  const config = await loadConfig();
+  if (!config) {
+    logger.warn('consolidateApps', 'No LLM config found, skipping consolidation');
+    return apps;
+  }
+  logger.info('consolidateApps', 'Using LLM provider:', config.provider, 'model:', config.model);
+
+  const appSummaries = apps.map((a) => ({
+    id: a.id,
+    name: a.name,
+    keywords: a.keywords,
+    tags: a.tags.map((t) => ({ name: t.name, description: t.description })),
+  }));
+
+  const prompt = `You are analyzing a list of apps extracted from a character card.
+
+  Some of these apps are too small or fragmented to function as standalone apps. They need to be merged with related apps to form complete, functional applications.
+
+  ## NPC Information (for filtering only — do NOT include in output)
+
+  Character Name: ${character.name}
+  Description: ${character.description.slice(0, 500)}
+
+  Any reference to this character (name, nicknames, account names, traits, etc.) must be stripped from all output fields.
+
+  ## Extracted Apps
+
+  ${JSON.stringify(appSummaries, null, 2)}
+
+  ## Task
+
+  Analyze each app and decide:
+  1. Which apps can stand alone as complete, functional apps — keep them as-is
+  2. Which apps are too small/fragmented and should be merged with other related apps
+  3. How to group the fragmented apps with related apps
+
+  Return a JSON array of consolidated apps. Each entry has:
+  - "name": the display name for the consolidated app (use the most representative name from the group, or create a new descriptive name)
+  - "memberIds": array of original app ids that should be merged into this group
+  - "keywords": the curated, deduplicated list of keywords for the consolidated app (merge from members, remove redundant/overlapping ones)
+  - "tags": the curated list of tags for the consolidated app. Each tag is { "name": string, "description": string }. Merge tags from all members, deduplicate by name, and keep the most descriptive description.
+
+  ## Rules
+
+  - Every original app id must appear in exactly one group
+  - A standalone app is a group with a single memberIds entry — still include its full keywords and tags
+  - Merge apps that represent sub-features of the same functional area
+  - Apps with distinct, complete functionality should remain separate
+  - For merged apps, combine and deduplicate keywords and tags from all members
+  - Remove keywords that are redundant after merging
+
+  ## Content Boundaries
+
+  The output must NOT contain any character-specific information. Specifically:
+
+  1. **No character names** — do not use any of the character's names (real name, stage name, screen name, account name, nickname) in app names, tag descriptions, or keywords. Use generic functional designations only.
+  2. **No character card specific data** — do not reference specific platform data or account settings (follower counts, account types, number of accounts, specific job titles). Use functional tier descriptions instead.
+  3. **No indirect data leakage** — do not indirectly convey character card platform data through interaction volume depictions or activity level differences.
+  4. **No personality or emotional texture** — app names and descriptions must not contain adjectives describing the character's personality, tone, or behavioral manner. Use neutral functional names only.
+  5. **No behavioral motivation metaphors** — do not use metaphors implying the character's internal processes. Each app name should only state what functional area it covers.
+
+  Respond with ONLY a valid JSON array, no markdown, no explanation.`;
+
+  try {
+    logger.info(
+      'consolidateApps',
+      'Sending prompt to LLM, app summaries:',
+      JSON.stringify(appSummaries.map((a) => a.id)),
+    );
+    const result = await chat(
+      [
+        {
+          role: 'system',
+          content:
+            'You are a helpful assistant that analyzes app structures. Respond only with valid JSON.',
+        },
+        { role: 'user', content: prompt },
+      ],
+      [],
+      config,
+    );
+
+    const content = result.content.trim();
+    logger.info('consolidateApps', 'LLM response:', content.slice(0, 500));
+    // Strip markdown fences if present
+    const jsonStr = content.replace(/^```(?:json)?\s*/, '').replace(/\s*```$/, '');
+    const groups: ConsolidationGroup[] = JSON.parse(jsonStr);
+
+    if (!Array.isArray(groups)) {
+      logger.warn('consolidateApps', 'LLM response is not an array, skipping');
+      return apps;
+    }
+    logger.info(
+      'consolidateApps',
+      'Parsed',
+      groups.length,
+      'groups:',
+      groups.map((g) => `${g.name} (${g.memberIds.length})`),
+    );
+
+    const appMap = new Map(apps.map((a) => [a.id, a]));
+    const consolidated: AppEntry[] = [];
+
+    for (const group of groups) {
+      const members = group.memberIds.map((id) => appMap.get(id)).filter((a): a is AppEntry => !!a);
+      if (members.length === 0) continue;
+      if (members.length === 1) {
+        // Apply LLM-curated keywords/tags even for standalone apps
+        const app = members[0];
+        if (group.keywords) app.keywords = group.keywords;
+        if (group.tags) {
+          const tagMap = new Map(app.tags.map((t) => [t.name, t]));
+          app.tags = group.tags.map((gt) => {
+            const full = tagMap.get(gt.name);
+            if (full) return { ...full, description: gt.description ?? full.description };
+            return { name: gt.name, type: 'text' as const, description: gt.description };
+          });
+        }
+        consolidated.push(app);
+      } else {
+        consolidated.push(mergeAppEntriesWithLLMData(members, group));
+      }
+    }
+
+    logger.info(
+      'consolidateApps',
+      'Result:',
+      apps.length,
+      '→',
+      consolidated.length,
+      'apps:',
+      consolidated.map((a) => a.id),
+    );
+    return consolidated.length > 0 ? consolidated : apps;
+  } catch (e) {
+    logger.error('consolidateApps', 'LLM analysis failed, using original apps:', e);
+    return apps;
+  }
+}
+
+// ── Main entry point ───────────────────────────────────────────────
+
+export async function extractCard(file: File): Promise<ExtractResult> {
+  if (file.size > MAX_FILE_SIZE) {
+    return {
+      status: 'error',
+      message: `File too large (${(file.size / 1024 / 1024).toFixed(1)} MB). Maximum allowed size is 50 MB.`,
+    };
+  }
+
+  try {
+    const buffer = await file.arrayBuffer();
+
+    let inputType: 'png' | 'charx';
+    try {
+      inputType = detectInputType(file.name, buffer);
+    } catch {
+      return {
+        status: 'error',
+        message: `Unsupported file type: ${file.name}. Expected PNG or ZIP/CharX.`,
+      };
+    }
+
+    // Parse card
+    let card: Record<string, unknown>;
+    try {
+      if (inputType === 'png') {
+        card = parsePngCardBytes(buffer);
+      } else {
+        card = await parseCharx(buffer);
+      }
+    } catch (e) {
+      return {
+        status: 'error',
+        message: `Failed to parse ${inputType} file: ${e instanceof Error ? e.message : String(e)}`,
+      };
+    }
+
+    // Convert entries
+    const converted = loadEntriesFromCard(card);
+    const entries: Record<string, InternalEntry> = {};
+    converted.forEach((e, i) => {
+      const idx = (e as unknown as Record<string, unknown>)['_index'] ?? i;
+      delete (e as unknown as Record<string, unknown>)['_index'];
+      entries[String(idx)] = e;
+    });
+
+    // Extract apps and lore
+    const apps = extractAppsFromEntries(entries);
+    const lore = extractLoreEntries(entries);
+
+    // Extract and attach regex scripts
+    const tagAppMap = buildTagAppMap(apps);
+    const embeddedScripts = loadRegexScriptsFromCard(card);
+    const allScripts = normalizeScripts(embeddedScripts, tagAppMap);
+    attachScriptsToApps(allScripts, apps, tagAppMap);
+
+    // Extract character info from card
+    const cardData = (card['data'] || {}) as Record<string, unknown>;
+    const character: CharacterInfo = {
+      name: (cardData['name'] as string) || '',
+      description: (cardData['description'] as string) || '',
+      firstMessage: (cardData['first_mes'] as string) || '',
+      alternateGreetings: (cardData['alternate_greetings'] as string[]) || [],
+      personality: (cardData['personality'] as string) || '',
+      scenario: (cardData['scenario'] as string) || '',
+    };
+
+    const manifest: Manifest = {
+      version: '1.0',
+      generatedAt: new Date().toISOString(),
+      source: file.name,
+      sourceType: inputType,
+      apps,
+      lore,
+      character,
+    };
+
+    return { status: 'success', manifest };
+  } catch (e) {
+    return {
+      status: 'error',
+      message: `Unexpected error: ${e instanceof Error ? e.message : String(e)}`,
+    };
+  }
+}
diff --git a/apps/webuiapps/src/lib/index.ts b/apps/webuiapps/src/lib/index.ts
index fd8743d..5aaa06d 100644
--- a/apps/webuiapps/src/lib/index.ts
+++ b/apps/webuiapps/src/lib/index.ts
@@ -77,3 +77,15 @@ export type { VibeInfo } from './vibeInfo';
 // ============ Utilities ============
 export { generateId } from './generateId';
 export { normalizePath, getFileName, getParentPath, getDirPath } from './path';
+
+// ============ Card Extractor ============
+export { extractCard, consolidateApps } from './cardExtractor';
+export type {
+  ExtractResult,
+  Manifest,
+  AppEntry,
+  LoreEntry,
+  RegexScript,
+  TagSchema,
+  CharacterInfo,
+} from './cardExtractor';
diff --git a/apps/webuiapps/src/lib/modManager.ts b/apps/webuiapps/src/lib/modManager.ts
index 9791ebc..942bad8 100644
--- a/apps/webuiapps/src/lib/modManager.ts
+++ b/apps/webuiapps/src/lib/modManager.ts
@@ -260,6 +260,8 @@ export async function saveModCollection(collection: ModCollection): Promise<void
   } catch {
     // ignore
   }
+  // Notify other components (e.g. ChatPanel) about the change
+  window.dispatchEvent(new CustomEvent('mod-collection-changed', { detail: collection }));
 }
 
 // ---------------------------------------------------------------------------
diff --git a/apps/webuiapps/vite.config.ts b/apps/webuiapps/vite.config.ts
index 573e9fe..092911e 100644
--- a/apps/webuiapps/vite.config.ts
+++ b/apps/webuiapps/vite.config.ts
@@ -368,6 +368,447 @@ function jsonFilePlugin(name: string, apiPath: string, filePath: string): Plugin
   };
 }
 
+/**
+ * App code generator plugin — uses Claude Agent SDK to concurrently generate
+ * VibeApp code for each app in a parsed character card manifest.
+ *
+ * POST /api/generate-apps  { apps: AppEntry[], concurrency?: number }
+ * Response: SSE stream with per-app progress events
+ */
+function appGeneratorPlugin(): Plugin {
+  let viteServer: import('vite').ViteDevServer | null = null;
+
+  return {
+    name: 'app-generator',
+    configureServer(server) {
+      viteServer = server;
+      server.middlewares.use('/api/generate-apps', async (req, res) => {
+        if (req.method !== 'POST') {
+          res.writeHead(405, { 'Content-Type': 'application/json' });
+          res.end(JSON.stringify({ error: 'Method not allowed' }));
+          return;
+        }
+
+        const chunks: Buffer[] = [];
+        req.on('data', (chunk: Buffer) => chunks.push(chunk));
+        req.on('end', async () => {
+          let body: {
+            apps: Array<{
+              id: string;
+              name: string;
+              keywords?: string[];
+              format?: string;
+              tags: unknown[];
+              example: string;
+              resources: Record<string, string[]>;
+              scripts?: Array<{
+                name: string;
+                type: string;
+                findRegex: string;
+                replaceString: string;
+              }>;
+              imageTagPairs?: Array<{ tag: string; imgStyle: string }>;
+            }>;
+            concurrency?: number;
+          };
+          try {
+            body = JSON.parse(Buffer.concat(chunks).toString());
+          } catch {
+            res.writeHead(400, { 'Content-Type': 'application/json' });
+            res.end(JSON.stringify({ error: 'Invalid JSON' }));
+            return;
+          }
+
+          const { apps, concurrency = 3 } = body;
+          console.log(
+            `[appGenerator] Received request: ${apps?.length ?? 0} apps, concurrency=${concurrency}`,
+          );
+          if (!Array.isArray(apps) || apps.length === 0) {
+            console.error('[appGenerator] Empty or invalid apps array');
+            res.writeHead(400, { 'Content-Type': 'application/json' });
+            res.end(JSON.stringify({ error: 'apps array is required' }));
+            return;
+          }
+          console.log(
+            '[appGenerator] Apps to generate:',
+            apps.map((a) => `${a.id}(${a.name})`).join(', '),
+          );
+
+          // SSE headers
+          res.writeHead(200, {
+            'Content-Type': 'text/event-stream',
+            'Cache-Control': 'no-cache',
+            Connection: 'keep-alive',
+          });
+
+          const sendEvent = (data: Record<string, unknown>) => {
+            res.write(`data: ${JSON.stringify(data)}\n\n`);
+          };
+
+          // Lazy-import the Agent SDK (ESM)
+          console.log('[appGenerator] Loading Agent SDK...');
+          let queryFn: (typeof import('@anthropic-ai/claude-agent-sdk'))['query'];
+          try {
+            const sdk = await import('@anthropic-ai/claude-agent-sdk');
+            queryFn = sdk.query;
+            console.log('[appGenerator] Agent SDK loaded successfully');
+          } catch (err) {
+            console.error('[appGenerator] Failed to load Agent SDK:', err);
+            sendEvent({ type: 'error', message: `Failed to load Agent SDK: ${err}` });
+            res.end();
+            return;
+          }
+
+          const projectRoot = resolve(__dirname, '../..');
+
+          // ── Step 1: LLM pre-processing — summarize app raw data ──
+          // Read LLM config for API credentials
+          let llmConfig: {
+            apiKey?: string;
+            baseUrl?: string;
+            model?: string;
+            customHeaders?: string;
+          } = {};
+          try {
+            if (fs.existsSync(LLM_CONFIG_FILE)) {
+              const cfg = JSON.parse(fs.readFileSync(LLM_CONFIG_FILE, 'utf-8'));
+              llmConfig = cfg.llm || {};
+              console.log(
+                `[appGenerator] LLM config loaded: baseUrl=${llmConfig.baseUrl}, model=${llmConfig.model}, apiKey=${llmConfig.apiKey ? '***' + llmConfig.apiKey.slice(-4) : 'MISSING'}`,
+              );
+            } else {
+              console.warn(`[appGenerator] LLM config file not found: ${LLM_CONFIG_FILE}`);
+            }
+          } catch (err) {
+            console.error('[appGenerator] Failed to read LLM config:', err);
+          }
+
+          const summarizeApp = async (
+            app: (typeof apps)[number],
+          ): Promise<{ scenario: string; pageStructure: string; englishName: string }> => {
+            const apiKey = llmConfig.apiKey;
+            const baseUrl = llmConfig.baseUrl || 'https://api.anthropic.com';
+            const model = llmConfig.model || 'claude-sonnet-4-6';
+
+            if (!apiKey) {
+              console.warn(
+                `[appGenerator] No API key for summarize, skipping LLM call for ${app.id}`,
+              );
+              return {
+                scenario: app.name,
+                pageStructure: 'No LLM config available',
+                englishName: toPascalCase(app.id),
+              };
+            }
+            console.log(
+              `[appGenerator] Summarizing ${app.id}: POST ${baseUrl}/v1/messages (model=${model})`,
+            );
+
+            const summaryPrompt = `You are a UI/UX analysis expert. Analyze the following app's raw data and produce a structured description.
+
+## Constraints
+1. **No container dimensions**: Do not specify the app's overall width/height (e.g. 80vw, 70vh). The layout system handles this automatically.
+2. **No image references**: Do not mention any image files, image resources, or external URLs. Focus purely on the functional UI structure and interactions.
+3. **Inline tag semantics**: Do not list tag definitions separately. Instead, naturally describe what each data field means within the page structure description.
+
+## Input Data
+
+App Name: ${app.name}
+App ID: ${app.id}
+Trigger Keywords: ${JSON.stringify(app.keywords || [])}
+
+### Data Tags
+${(app.tags || []).map((t: { name: string; type?: string; description?: string }) => `<${t.name}>: ${t.description || t.type || ''}`).join(', ')}
+
+### Layout Scripts (HTML template reference)
+${
+  (app.scripts || [])
+    .filter((s: { type: string }) => s.type === 'layout')
+    .map(
+      (s: { name: string; replaceString: string }) =>
+        `#### ${s.name}\n\`\`\`html\n${s.replaceString.slice(0, 1200)}\n\`\`\``,
+    )
+    .join('\n\n') || 'No layout scripts'
+}
+
+## Output Format
+Output strictly in the following format with no extra content:
+
+【英文名称】
+(A single PascalCase English name for the code directory, e.g. LiveStream, BattleArena, PhotoAlbum)
+
+【应用场景】
+(2-3 sentences describing what this app does, the user scenario, and core interactions)
+
+【页面结构】
+(Describe the page layout by region. Naturally integrate tag semantics into the description — e.g. "The chat area displays real-time danmaku messages, with paid messages highlighted" instead of separately defining <danmaku> and <paid>. Describe each region's components, data sources, and interactions. Do not specify container dimensions.)`;
+
+            console.log(
+              `[appGenerator] [${app.id}] ═══ SUMMARIZE PROMPT ═══\n${summaryPrompt}\n═══ END SUMMARIZE PROMPT ═══`,
+            );
+
+            try {
+              const headers: Record<string, string> = {
+                'Content-Type': 'application/json',
+                'x-api-key': apiKey,
+                'anthropic-version': '2023-06-01',
+              };
+              // Apply custom headers if configured
+              if (llmConfig.customHeaders) {
+                for (const pair of llmConfig.customHeaders.split(',')) {
+                  const [hk, ...hv] = pair.split(':');
+                  if (hk && hv.length) headers[hk.trim()] = hv.join(':').trim();
+                }
+              }
+
+              const llmRes = await fetch(`${baseUrl}/v1/messages`, {
+                method: 'POST',
+                headers,
+                body: JSON.stringify({
+                  model,
+                  max_tokens: 2048,
+                  messages: [{ role: 'user', content: summaryPrompt }],
+                }),
+              });
+
+              if (!llmRes.ok) {
+                const errText = await llmRes.text();
+                console.error(
+                  `[appGenerator] LLM summary failed for ${app.id}: status=${llmRes.status}`,
+                  errText,
+                );
+                return { scenario: app.name, pageStructure: '', englishName: toPascalCase(app.id) };
+              }
+
+              const llmData = (await llmRes.json()) as {
+                content: Array<{ type: string; text?: string }>;
+              };
+              const text =
+                llmData.content?.find((b: { type: string }) => b.type === 'text')?.text || '';
+              console.log(
+                `[appGenerator] Summarize ${app.id} done, response length=${text.length}`,
+              );
+              console.log(
+                `[appGenerator] [${app.id}] ═══ SUMMARIZE RESPONSE ═══\n${text}\n═══ END SUMMARIZE RESPONSE ═══`,
+              );
+
+              const nameMatch = text.match(/【英文名称】\s*([\s\S]*?)(?=【应用场景】|$)/);
+              const scenarioMatch = text.match(/【应用场景】\s*([\s\S]*?)(?=【页面结构】|$)/);
+              const structureMatch = text.match(/【页面结构】\s*([\s\S]*?)$/);
+
+              const englishName =
+                nameMatch?.[1]?.trim().replace(/[^a-zA-Z]/g, '') || toPascalCase(app.id);
+              const result = {
+                scenario: scenarioMatch?.[1]?.trim() || app.name,
+                pageStructure: structureMatch?.[1]?.trim() || '',
+                englishName,
+              };
+              console.log(
+                `[appGenerator] Summarize ${app.id} parsed: englishName=${result.englishName}, scenario=${result.scenario.slice(0, 80)}...`,
+              );
+              return result;
+            } catch (err) {
+              console.error(`[appGenerator] LLM summary error for ${app.id}:`, err);
+              return { scenario: app.name, pageStructure: '', englishName: toPascalCase(app.id) };
+            }
+          };
+
+          // ── Step 2: Build CC prompt from summarized data ──
+          const buildPrompt = (
+            app: (typeof apps)[number],
+            summary: { scenario: string; pageStructure: string; englishName: string },
+          ) => {
+            return [
+              `Build a VibeApp named "${summary.englishName}" (original name: ${app.name}).`,
+              '',
+              `## Scenario`,
+              summary.scenario,
+              '',
+              `## Page Structure & Interactions`,
+              summary.pageStructure,
+              '',
+              `## Data Integration`,
+              `- Trigger keywords: ${(app.keywords || []).join(', ')}`,
+              `- Data format: json`,
+              '',
+              `## Important`,
+              `- Use responsive layout, do not hardcode container dimensions`,
+              `- Follow the VibeApp workflow and project conventions defined in CLAUDE.md`,
+            ].join('\n');
+          };
+
+          // Concurrency-limited execution
+          // Pause Vite file watcher on entire src/ to prevent HMR during code generation
+          // (agents edit src/pages/*, src/routers/*, src/lib/* etc.)
+          const srcGlob = resolve(__dirname, 'src/**');
+          const watcher = viteServer?.watcher;
+          if (watcher) {
+            console.log('[appGenerator] Unwatching src/** to prevent HMR during generation');
+            watcher.unwatch(srcGlob);
+          }
+
+          const queue = [...apps];
+          const running = new Set<Promise<void>>();
+          const state = { closed: false };
+
+          req.on('close', () => {
+            state.closed = true;
+          });
+
+          const runOne = async (app: (typeof apps)[number]) => {
+            if (state.closed) return;
+            const appId = app.id;
+            console.log(`[appGenerator] ── Starting app: ${appId} ──`);
+            sendEvent({ type: 'summarizing', appId, name: app.name });
+
+            try {
+              // Pre-process: summarize app data via LLM
+              console.log(`[appGenerator] [${appId}] Step 1: Summarizing...`);
+              const summary = await summarizeApp(app);
+              if (state.closed) {
+                console.log(
+                  `[appGenerator] [${appId}] Aborted (client disconnected after summarize)`,
+                );
+                return;
+              }
+              console.log(
+                `[appGenerator] [${appId}] Step 1 done. Scenario: ${summary.scenario.slice(0, 60)}...`,
+              );
+              sendEvent({ type: 'summarized', appId, summary });
+
+              const appPascalName = summary.englishName;
+              const prompt = buildPrompt(app, summary);
+              const sysPrompt = [
+                `You are building App ID: ${appPascalName}`,
+                `You may ONLY create and modify files under src/pages/${appPascalName}/.`,
+                `Do NOT read or modify any other App directories under src/pages/.`,
+                `Concurrent builds are in progress — other Apps are being generated simultaneously. Strictly limit your operations to your own scope.`,
+              ].join('\n');
+              console.log(
+                `[appGenerator] [${appId}] Step 2: Agent SDK query (englishName=${appPascalName}, prompt length=${prompt.length}, cwd=${projectRoot})`,
+              );
+              console.log(
+                `[appGenerator] [${appId}] ═══ FULL PROMPT ═══\n${prompt}\n═══ END PROMPT ═══`,
+              );
+              console.log(
+                `[appGenerator] [${appId}] ═══ SYSTEM PROMPT ═══\n${sysPrompt}\n═══ END SYSTEM PROMPT ═══`,
+              );
+
+              sendEvent({ type: 'started', appId });
+              let result = '';
+              let messageCount = 0;
+              for await (const message of queryFn({
+                prompt,
+                options: {
+                  cwd: projectRoot,
+                  allowedTools: ['Read', 'Write', 'Edit', 'Glob', 'Grep', 'Bash', 'Skill'],
+                  settingSources: ['user', 'project', 'local'],
+                  permissionMode: 'bypassPermissions',
+                  allowDangerouslySkipPermissions: true,
+                  maxTurns: 100,
+                  systemPrompt: sysPrompt,
+                },
+              })) {
+                messageCount++;
+                if (state.closed) {
+                  console.log(
+                    `[appGenerator] [${appId}] Aborted (client disconnected during query, after ${messageCount} messages)`,
+                  );
+                  return;
+                }
+                if ('result' in message) {
+                  result = message.result;
+                  console.log(
+                    `[appGenerator] [${appId}] ── Result (#${messageCount}): ${String(result).slice(0, 200)}`,
+                  );
+                } else {
+                  // Log tool calls and assistant text
+                  const msg = message as Record<string, unknown>;
+                  if (msg.type === 'assistant') {
+                    const content = msg.message && (msg.message as Record<string, unknown>).content;
+                    if (Array.isArray(content)) {
+                      for (const block of content) {
+                        if (block.type === 'tool_use') {
+                          const input = block.input as Record<string, unknown>;
+                          const preview =
+                            block.name === 'Write' || block.name === 'Edit'
+                              ? `file=${input.file_path || input.path || ''}`
+                              : block.name === 'Read'
+                                ? `file=${input.file_path || ''}`
+                                : block.name === 'Bash'
+                                  ? `cmd=${String(input.command || '').slice(0, 80)}`
+                                  : block.name === 'Glob'
+                                    ? `pattern=${input.pattern || ''}`
+                                    : block.name === 'Grep'
+                                      ? `pattern=${input.pattern || ''}`
+                                      : JSON.stringify(input).slice(0, 80);
+                          console.log(`[appGenerator] [${appId}] 🔧 ${block.name}(${preview})`);
+                        } else if (block.type === 'text' && block.text) {
+                          console.log(
+                            `[appGenerator] [${appId}] 💬 ${String(block.text).slice(0, 150)}`,
+                          );
+                        }
+                      }
+                    }
+                  } else {
+                    if (messageCount <= 3) {
+                      console.log(
+                        `[appGenerator] [${appId}] Message #${messageCount} type=${msg.type || Object.keys(msg).join(',')}`,
+                      );
+                    }
+                  }
+                }
+              }
+              console.log(`[appGenerator] [${appId}] ✅ Completed after ${messageCount} messages`);
+              sendEvent({ type: 'completed', appId, result });
+            } catch (err) {
+              console.error(`[appGenerator] [${appId}] ❌ Error:`, err);
+              sendEvent({ type: 'error', appId, message: String(err) });
+            }
+          };
+
+          while (queue.length > 0 && !state.closed) {
+            while (running.size < concurrency && queue.length > 0) {
+              const app = queue.shift()!;
+              const p = runOne(app).then(() => {
+                running.delete(p);
+              });
+              running.add(p);
+            }
+            if (running.size > 0) {
+              await Promise.race(running);
+            }
+          }
+
+          // Wait for remaining
+          await Promise.allSettled(Array.from(running));
+
+          // Resume Vite file watcher on src/pages (reload deferred to UI on modal close)
+          if (watcher) {
+            console.log('[appGenerator] Re-watching src/pages/**');
+            watcher.add(srcGlob);
+          }
+
+          if (!state.closed) {
+            console.log('[appGenerator] ── All apps finished, sending done event ──');
+            sendEvent({ type: 'done' });
+            res.end();
+          } else {
+            console.log('[appGenerator] ── Stream closed by client before completion ──');
+          }
+        });
+      });
+    },
+  };
+}
+
+function toPascalCase(s: string): string {
+  return s
+    .split(/[-_\s]+/)
+    .map((w) => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase())
+    .join('');
+}
+
 const config = ({ mode }: ConfigEnv): UserConfigExport => {
   const env = loadEnv(mode, process.cwd(), '');
   const isProd = env.NODE_ENV === 'production';
@@ -397,6 +838,7 @@ const config = ({ mode }: ConfigEnv): UserConfigExport => {
     llmProxyPlugin(),
     jsonFilePlugin('characters', '/api/characters', CHARACTERS_FILE),
     jsonFilePlugin('mods', '/api/mods', MODS_FILE),
+    appGeneratorPlugin(),
     react(),
     ...(skipLegacy
       ? []
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 991988b..8f2479d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -189,19 +189,19 @@ importers:
 
   apps/webuiapps:
     dependencies:
+      '@anthropic-ai/claude-agent-sdk':
+        specifier: ^0.2.72
+        version: 0.2.72(zod@4.3.6)
       framer-motion:
         specifier: ^12.34.0
         version: 12.34.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react-markdown:
-        specifier: ^10.1.0
-        version: 10.1.0(@types/react@18.3.27)(react@18.3.1)
-      rehype-raw:
-        specifier: ^7.0.0
-        version: 7.0.0
-      remark-gfm:
-        specifier: ^4.0.1
-        version: 4.0.1
+      jszip:
+        specifier: ^3.10.1
+        version: 3.10.1
     devDependencies:
+      '@types/jszip':
+        specifier: ^3.4.1
+        version: 3.4.1
       '@vitest/coverage-istanbul':
         specifier: ^1.6.1
         version: 1.6.1(vitest@1.6.1(@types/node@20.19.31)(happy-dom@14.12.3)(jsdom@25.0.1)(less@4.5.1)(sass@1.97.3)(terser@5.46.0))
@@ -226,6 +226,12 @@ packages:
     resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
     engines: {node: '>=6.0.0'}
 
+  '@anthropic-ai/claude-agent-sdk@0.2.72':
+    resolution: {integrity: sha512-GR3QaLRCoWO5DkRknaaCH6zzmUNZ3E6VckEKNE7EO5R7qDBexQe9tDKag257pji2NenTrnBDMxznoZrhNCRTzA==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      zod: ^4.0.0
+
   '@asamuzakjp/css-color@3.2.0':
     resolution: {integrity: sha512-K1A6z8tS3XsmCMM86xoWdn7Fkdn9m6RSVtocUrJYIwZnFVkng/PvkEoWtOWmP+Scc6saYWHWZYbndEEXxl24jw==}
 
@@ -1147,6 +1153,95 @@ packages:
     resolution: {integrity: sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==}
     deprecated: Use @eslint/object-schema instead
 
+  '@img/sharp-darwin-arm64@0.34.5':
+    resolution: {integrity: sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@img/sharp-darwin-x64@0.34.5':
+    resolution: {integrity: sha512-YNEFAF/4KQ/PeW0N+r+aVVsoIY0/qxxikF2SWdp+NRkmMB7y9LBZAVqQ4yhGCm/H3H270OSykqmQMKLBhBJDEw==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [darwin]
+
+  '@img/sharp-libvips-darwin-arm64@1.2.4':
+    resolution: {integrity: sha512-zqjjo7RatFfFoP0MkQ51jfuFZBnVE2pRiaydKJ1G/rHZvnsrHAOcQALIi9sA5co5xenQdTugCvtb1cuf78Vf4g==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@img/sharp-libvips-darwin-x64@1.2.4':
+    resolution: {integrity: sha512-1IOd5xfVhlGwX+zXv2N93k0yMONvUlANylbJw1eTah8K/Jtpi15KC+WSiaX/nBmbm2HxRM1gZ0nSdjSsrZbGKg==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@img/sharp-libvips-linux-arm64@1.2.4':
+    resolution: {integrity: sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@img/sharp-libvips-linux-arm@1.2.4':
+    resolution: {integrity: sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A==}
+    cpu: [arm]
+    os: [linux]
+
+  '@img/sharp-libvips-linux-x64@1.2.4':
+    resolution: {integrity: sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw==}
+    cpu: [x64]
+    os: [linux]
+
+  '@img/sharp-libvips-linuxmusl-arm64@1.2.4':
+    resolution: {integrity: sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@img/sharp-libvips-linuxmusl-x64@1.2.4':
+    resolution: {integrity: sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg==}
+    cpu: [x64]
+    os: [linux]
+
+  '@img/sharp-linux-arm64@0.34.5':
+    resolution: {integrity: sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [linux]
+
+  '@img/sharp-linux-arm@0.34.5':
+    resolution: {integrity: sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@img/sharp-linux-x64@0.34.5':
+    resolution: {integrity: sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [linux]
+
+  '@img/sharp-linuxmusl-arm64@0.34.5':
+    resolution: {integrity: sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [linux]
+
+  '@img/sharp-linuxmusl-x64@0.34.5':
+    resolution: {integrity: sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [linux]
+
+  '@img/sharp-win32-arm64@0.34.5':
+    resolution: {integrity: sha512-WQ3AgWCWYSb2yt+IG8mnC6Jdk9Whs7O0gxphblsLvdhSpSTtmu69ZG1Gkb6NuvxsNACwiPV6cNSZNzt0KPsw7g==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [win32]
+
+  '@img/sharp-win32-x64@0.34.5':
+    resolution: {integrity: sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [win32]
+
   '@istanbuljs/schema@0.1.3':
     resolution: {integrity: sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==}
     engines: {node: '>=8'}
@@ -1832,6 +1927,10 @@ packages:
   '@types/json5@0.0.29':
     resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
 
+  '@types/jszip@3.4.1':
+    resolution: {integrity: sha512-TezXjmf3lj+zQ651r6hPqvSScqBLvyPI9FxdXBqpEwBijNGQ2NXpaFW/7joGzveYkKQUil7iiDHLo6LV71Pc0A==}
+    deprecated: This is a stub types definition. jszip provides its own type definitions, so you do not need this installed.
+
   '@types/linkify-it@3.0.5':
     resolution: {integrity: sha512-yg6E+u0/+Zjva+buc3EIb+29XEg4wltq7cSmd4Uc2EE/1nUVmxyzpX6gUXD0V8jIrG0r7YeOGVIbYRkxeooCtw==}
 
@@ -2551,6 +2650,9 @@ packages:
   core-js@3.48.0:
     resolution: {integrity: sha512-zpEHTy1fjTMZCKLHUZoVeylt9XrzaIN2rbPXEt0k+q7JE5CkCZdo6bNq55bn24a69CH7ErAVLKijxJja4fw+UQ==}
 
+  core-util-is@1.0.3:
+    resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
+
   cosmiconfig-typescript-loader@4.4.0:
     resolution: {integrity: sha512-BabizFdC3wBHhbI4kJh0VkQP9GkBfoHPydD0COMce1nJ1kJAB3F2TmJ/I7diULBKtmEWSwEbuN/KDtgnmUUVmw==}
     engines: {node: '>=v14.21.3'}
@@ -2819,10 +2921,6 @@ packages:
     resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
     engines: {node: '>=10'}
 
-  escape-string-regexp@5.0.0:
-    resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
-    engines: {node: '>=12'}
-
   eslint-config-prettier@9.1.2:
     resolution: {integrity: sha512-iI1f+D2ViGn+uvv5HuHVUamg8ll4tN+JRHGc6IJi4TP9Kl976C57fzPXgseXNs8v0iA8aSJpHsTWjDb9QJamGQ==}
     hasBin: true
@@ -3248,27 +3346,12 @@ packages:
     resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
     engines: {node: '>= 0.4'}
 
-  hast-util-from-parse5@8.0.3:
-    resolution: {integrity: sha512-3kxEVkEKt0zvcZ3hCRYI8rqrgwtlIOFMWkbclACvjlDw8Li9S2hk/d51OI0nr/gIpdMHNepwgOKqZ/sy0Clpyg==}
-
-  hast-util-parse-selector@4.0.0:
-    resolution: {integrity: sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==}
-
-  hast-util-raw@9.1.0:
-    resolution: {integrity: sha512-Y8/SBAHkZGoNkpzqqfCldijcuUKh7/su31kEBp67cFY09Wy0mTRgtsLYsiIxMJxlu0f6AA5SUTbDR8K0rxnbUw==}
-
   hast-util-to-jsx-runtime@2.3.6:
     resolution: {integrity: sha512-zl6s8LwNyo1P9uw+XJGvZtdFF1GdAkOg8ujOw+4Pyb76874fLps4ueHXDhXWdk6YHQ6OgUtinliG7RsYvCbbBg==}
 
-  hast-util-to-parse5@8.0.1:
-    resolution: {integrity: sha512-MlWT6Pjt4CG9lFCjiz4BH7l9wmrMkfkJYCxFwKQic8+RTZgWPuWxwAfjJElsXkex7DJjfSJsQIt931ilUgmwdA==}
-
   hast-util-whitespace@3.0.0:
     resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==}
 
-  hastscript@9.0.1:
-    resolution: {integrity: sha512-g7df9rMFX/SPi34tyGCyUBREQoKkapwdY/T04Qn9TDWfHhAYt4/I0gMVirzK5wEzeUqIjEB+LXC/ypb7Aqno5w==}
-
   hls.js@1.6.15:
     resolution: {integrity: sha512-E3a5VwgXimGHwpRGV+WxRTKeSp2DW5DI5MWv34ulL3t5UNmyJWCQ1KmLEHbYzcfThfXG8amBL+fCYPneGHC4VA==}
 
@@ -3292,9 +3375,6 @@ packages:
   html-url-attributes@3.0.1:
     resolution: {integrity: sha512-ol6UPyBWqsrO6EJySPz2O7ZSr856WDrEzM5zMqp+FJJLGMW35cLYmmZnl0vztAZxRUoNZJFTCohfjuIJ8I4QBQ==}
 
-  html-void-elements@3.0.0:
-    resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==}
-
   http-proxy-agent@7.0.2:
     resolution: {integrity: sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==}
     engines: {node: '>= 14'}
@@ -3563,6 +3643,9 @@ packages:
     resolution: {integrity: sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==}
     engines: {node: '>=8'}
 
+  isarray@1.0.0:
+    resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==}
+
   isarray@2.0.5:
     resolution: {integrity: sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==}
 
@@ -3661,6 +3744,9 @@ packages:
     resolution: {integrity: sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==}
     engines: {node: '>=4.0'}
 
+  jszip@3.10.1:
+    resolution: {integrity: sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==}
+
   keyv@4.5.4:
     resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
 
@@ -3839,37 +3925,13 @@ packages:
     resolution: {integrity: sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==}
     hasBin: true
 
-  markdown-table@3.0.4:
-    resolution: {integrity: sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==}
-
   math-intrinsics@1.1.0:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
 
-  mdast-util-find-and-replace@3.0.2:
-    resolution: {integrity: sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg==}
-
   mdast-util-from-markdown@2.0.3:
     resolution: {integrity: sha512-W4mAWTvSlKvf8L6J+VN9yLSqQ9AOAAvHuoDAmPkz4dHf553m5gVj2ejadHJhoJmcmxEnOv6Pa8XJhpxE93kb8Q==}
 
-  mdast-util-gfm-autolink-literal@2.0.1:
-    resolution: {integrity: sha512-5HVP2MKaP6L+G6YaxPNjuL0BPrq9orG3TsrZ9YXbA3vDw/ACI4MEsnoDpn6ZNm7GnZgtAcONJyPhOP8tNJQavQ==}
-
-  mdast-util-gfm-footnote@2.1.0:
-    resolution: {integrity: sha512-sqpDWlsHn7Ac9GNZQMeUzPQSMzR6Wv0WKRNvQRg0KqHh02fpTz69Qc1QSseNX29bhz1ROIyNyxExfawVKTm1GQ==}
-
-  mdast-util-gfm-strikethrough@2.0.0:
-    resolution: {integrity: sha512-mKKb915TF+OC5ptj5bJ7WFRPdYtuHv0yTRxK2tJvi+BDqbkiG7h7u/9SI89nRAYcmap2xHQL9D+QG/6wSrTtXg==}
-
-  mdast-util-gfm-table@2.0.0:
-    resolution: {integrity: sha512-78UEvebzz/rJIxLvE7ZtDd/vIQ0RHv+3Mh5DR96p7cS7HsBhYIICDBCu8csTNWNO6tBWfqXPWekRuj2FNOGOZg==}
-
-  mdast-util-gfm-task-list-item@2.0.0:
-    resolution: {integrity: sha512-IrtvNvjxC1o06taBAVJznEnkiHxLFTzgonUdy8hzFVeDun0uTjxxrRGVaNFqkU1wJR3RBPEfsxmU6jDWPofrTQ==}
-
-  mdast-util-gfm@3.1.0:
-    resolution: {integrity: sha512-0ulfdQOM3ysHhCJ1p06l0b0VKlhU0wuQs3thxZQagjcjPrlFRqY215uZGHHJan9GEAXd9MbfPjFJz+qMkVR6zQ==}
-
   mdast-util-mdx-expression@2.0.1:
     resolution: {integrity: sha512-J6f+9hUp+ldTZqKRSg7Vw5V6MqjATc+3E4gf3CFNcuZNWD8XdyI6zQ8GqH7f8169MM6P7hMBRDVGnn7oHB9kXQ==}
 
@@ -3920,27 +3982,6 @@ packages:
   micromark-core-commonmark@2.0.3:
     resolution: {integrity: sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==}
 
-  micromark-extension-gfm-autolink-literal@2.1.0:
-    resolution: {integrity: sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw==}
-
-  micromark-extension-gfm-footnote@2.1.0:
-    resolution: {integrity: sha512-/yPhxI1ntnDNsiHtzLKYnE3vf9JZ6cAisqVDauhp4CEHxlb4uoOTxOCJ+9s51bIB8U1N1FJ1RXOKTIlD5B/gqw==}
-
-  micromark-extension-gfm-strikethrough@2.1.0:
-    resolution: {integrity: sha512-ADVjpOOkjz1hhkZLlBiYA9cR2Anf8F4HqZUO6e5eDcPQd0Txw5fxLzzxnEkSkfnD0wziSGiv7sYhk/ktvbf1uw==}
-
-  micromark-extension-gfm-table@2.1.1:
-    resolution: {integrity: sha512-t2OU/dXXioARrC6yWfJ4hqB7rct14e8f7m0cbI5hUmDyyIlwv5vEtooptH8INkbLzOatzKuVbQmAYcbWoyz6Dg==}
-
-  micromark-extension-gfm-tagfilter@2.0.0:
-    resolution: {integrity: sha512-xHlTOmuCSotIA8TW1mDIM6X2O1SiX5P9IuDtqGonFhEK0qgRI4yeC6vMxEV2dgyr2TiD+2PQ10o+cOhdVAcwfg==}
-
-  micromark-extension-gfm-task-list-item@2.1.0:
-    resolution: {integrity: sha512-qIBZhqxqI6fjLDYFTBIa4eivDMnP+OZqsNwmQ3xNLE4Cxwc+zfQEfbs6tzAo2Hjq+bh6q5F+Z8/cksrLFYWQQw==}
-
-  micromark-extension-gfm@3.0.0:
-    resolution: {integrity: sha512-vsKArQsicm7t0z2GugkCKtZehqUm31oeGBV/KVSorWSy8ZlNAv7ytjFhvaryUiCUJYqs+NoE6AFhpQvBTM6Q4w==}
-
   micromark-factory-destination@2.0.1:
     resolution: {integrity: sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA==}
 
@@ -4224,6 +4265,9 @@ packages:
     resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
     engines: {node: '>=6'}
 
+  pako@1.0.11:
+    resolution: {integrity: sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==}
+
   parent-module@1.0.1:
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
     engines: {node: '>=6'}
@@ -4374,6 +4418,9 @@ packages:
     resolution: {integrity: sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
+  process-nextick-args@2.0.1:
+    resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}
+
   progress@2.0.3:
     resolution: {integrity: sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==}
     engines: {node: '>=0.4.0'}
@@ -4544,6 +4591,9 @@ packages:
     resolution: {integrity: sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==}
     engines: {node: '>=8'}
 
+  readable-stream@2.3.8:
+    resolution: {integrity: sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==}
+
   readable-stream@3.6.2:
     resolution: {integrity: sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==}
     engines: {node: '>= 6'}
@@ -4589,21 +4639,12 @@ packages:
     resolution: {integrity: sha512-NZQZdC5wOE/H3UT28fVGL+ikOZcEzfMGk/c3iN9UGxzWHMa1op7274oyiUVrAG4B2EuFhus8SvkaYnhvW92p9Q==}
     hasBin: true
 
-  rehype-raw@7.0.0:
-    resolution: {integrity: sha512-/aE8hCfKlQeA8LmyeyQvQF3eBiLRGNlfBJEvWH7ivp9sBqs7TNqBL5X3v157rM4IFETqDnIOO+z5M/biZbo9Ww==}
-
-  remark-gfm@4.0.1:
-    resolution: {integrity: sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==}
-
   remark-parse@11.0.0:
     resolution: {integrity: sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==}
 
   remark-rehype@11.1.2:
     resolution: {integrity: sha512-Dh7l57ianaEoIpzbp0PC9UKAdCSVklD8E5Rpw7ETfbTl3FqcOOgq5q2LVDhgGCkaBv7p24JXikPdvhhmHvKMsw==}
 
-  remark-stringify@11.0.0:
-    resolution: {integrity: sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==}
-
   require-directory@2.1.1:
     resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
     engines: {node: '>=0.10.0'}
@@ -4691,6 +4732,9 @@ packages:
     resolution: {integrity: sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==}
     engines: {node: '>=0.4'}
 
+  safe-buffer@5.1.2:
+    resolution: {integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==}
+
   safe-buffer@5.2.1:
     resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
 
@@ -4761,6 +4805,9 @@ packages:
     resolution: {integrity: sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==}
     engines: {node: '>= 0.4'}
 
+  setimmediate@1.0.5:
+    resolution: {integrity: sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==}
+
   shebang-command@2.0.0:
     resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
     engines: {node: '>=8'}
@@ -4897,6 +4944,9 @@ packages:
     resolution: {integrity: sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==}
     engines: {node: '>= 0.4'}
 
+  string_decoder@1.1.1:
+    resolution: {integrity: sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==}
+
   string_decoder@1.3.0:
     resolution: {integrity: sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==}
 
@@ -5287,9 +5337,6 @@ packages:
   validate-npm-package-license@3.0.4:
     resolution: {integrity: sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==}
 
-  vfile-location@5.0.3:
-    resolution: {integrity: sha512-5yXvWDEgqeiYiBe1lbxYF7UMAIm/IcopxMHrMQDq3nvKcjPKIhZklUKL+AE7J7uApI4kwe2snsK+eI6UTj9EHg==}
-
   vfile-message@4.0.3:
     resolution: {integrity: sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==}
 
@@ -5400,9 +5447,6 @@ packages:
     resolution: {integrity: sha512-Zn5uXdcFNIA1+1Ei5McRd+iRzfhENPCe7LeABkJtNulSxjma+l7ltNx55BWZkRlwRnpOgHqxnjyaDgJnNXnqzg==}
     engines: {node: '>=10.13.0'}
 
-  web-namespaces@2.0.1:
-    resolution: {integrity: sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==}
-
   webgl-constants@1.1.1:
     resolution: {integrity: sha512-LkBXKjU5r9vAW7Gcu3T5u+5cvSvh5WwINdr0C+9jpzVB41cjQAP5ePArDtk/WHYdVj0GefCgM73BA7FlIiNtdg==}
 
@@ -5552,6 +5596,9 @@ packages:
     resolution: {integrity: sha512-4LCcse/U2MHZ63HAJVE+v71o7yOdIe4cZ70Wpf8D/IyjDKYQLV5GD46B+hSTjJsvV5PztjvHoU580EftxjDZFQ==}
     engines: {node: '>=12.20'}
 
+  zod@4.3.6:
+    resolution: {integrity: sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==}
+
   zustand@3.7.2:
     resolution: {integrity: sha512-PIJDIZKtokhof+9+60cpockVOq05sJzHCriyvaLBmEJixseQ1a5Kdov6fWZfWOu5SK9c+FhH1jU0tntLxRJYMA==}
     engines: {node: '>=12.7.0'}
@@ -5604,6 +5651,20 @@ snapshots:
       '@jridgewell/gen-mapping': 0.3.13
       '@jridgewell/trace-mapping': 0.3.31
 
+  '@anthropic-ai/claude-agent-sdk@0.2.72(zod@4.3.6)':
+    dependencies:
+      zod: 4.3.6
+    optionalDependencies:
+      '@img/sharp-darwin-arm64': 0.34.5
+      '@img/sharp-darwin-x64': 0.34.5
+      '@img/sharp-linux-arm': 0.34.5
+      '@img/sharp-linux-arm64': 0.34.5
+      '@img/sharp-linux-x64': 0.34.5
+      '@img/sharp-linuxmusl-arm64': 0.34.5
+      '@img/sharp-linuxmusl-x64': 0.34.5
+      '@img/sharp-win32-arm64': 0.34.5
+      '@img/sharp-win32-x64': 0.34.5
+
   '@asamuzakjp/css-color@3.2.0':
     dependencies:
       '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
@@ -6608,6 +6669,68 @@ snapshots:
 
   '@humanwhocodes/object-schema@2.0.3': {}
 
+  '@img/sharp-darwin-arm64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-darwin-arm64': 1.2.4
+    optional: true
+
+  '@img/sharp-darwin-x64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-darwin-x64': 1.2.4
+    optional: true
+
+  '@img/sharp-libvips-darwin-arm64@1.2.4':
+    optional: true
+
+  '@img/sharp-libvips-darwin-x64@1.2.4':
+    optional: true
+
+  '@img/sharp-libvips-linux-arm64@1.2.4':
+    optional: true
+
+  '@img/sharp-libvips-linux-arm@1.2.4':
+    optional: true
+
+  '@img/sharp-libvips-linux-x64@1.2.4':
+    optional: true
+
+  '@img/sharp-libvips-linuxmusl-arm64@1.2.4':
+    optional: true
+
+  '@img/sharp-libvips-linuxmusl-x64@1.2.4':
+    optional: true
+
+  '@img/sharp-linux-arm64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-arm64': 1.2.4
+    optional: true
+
+  '@img/sharp-linux-arm@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-arm': 1.2.4
+    optional: true
+
+  '@img/sharp-linux-x64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-x64': 1.2.4
+    optional: true
+
+  '@img/sharp-linuxmusl-arm64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linuxmusl-arm64': 1.2.4
+    optional: true
+
+  '@img/sharp-linuxmusl-x64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linuxmusl-x64': 1.2.4
+    optional: true
+
+  '@img/sharp-win32-arm64@0.34.5':
+    optional: true
+
+  '@img/sharp-win32-x64@0.34.5':
+    optional: true
+
   '@istanbuljs/schema@0.1.3': {}
 
   '@jest/schemas@29.6.3':
@@ -7253,6 +7376,10 @@ snapshots:
 
   '@types/json5@0.0.29': {}
 
+  '@types/jszip@3.4.1':
+    dependencies:
+      jszip: 3.10.1
+
   '@types/linkify-it@3.0.5': {}
 
   '@types/linkify-it@5.0.0': {}
@@ -8056,6 +8183,8 @@ snapshots:
 
   core-js@3.48.0: {}
 
+  core-util-is@1.0.3: {}
+
   cosmiconfig-typescript-loader@4.4.0(@types/node@20.5.1)(cosmiconfig@8.3.6(typescript@5.9.3))(ts-node@10.9.2(@swc/core@1.15.11)(@types/node@20.5.1)(typescript@5.9.3))(typescript@5.9.3):
     dependencies:
       '@types/node': 20.5.1
@@ -8405,8 +8534,6 @@ snapshots:
 
   escape-string-regexp@4.0.0: {}
 
-  escape-string-regexp@5.0.0: {}
-
   eslint-config-prettier@9.1.2(eslint@8.57.1):
     dependencies:
       eslint: 8.57.1
@@ -8896,37 +9023,6 @@ snapshots:
     dependencies:
       function-bind: 1.1.2
 
-  hast-util-from-parse5@8.0.3:
-    dependencies:
-      '@types/hast': 3.0.4
-      '@types/unist': 3.0.3
-      devlop: 1.1.0
-      hastscript: 9.0.1
-      property-information: 7.1.0
-      vfile: 6.0.3
-      vfile-location: 5.0.3
-      web-namespaces: 2.0.1
-
-  hast-util-parse-selector@4.0.0:
-    dependencies:
-      '@types/hast': 3.0.4
-
-  hast-util-raw@9.1.0:
-    dependencies:
-      '@types/hast': 3.0.4
-      '@types/unist': 3.0.3
-      '@ungap/structured-clone': 1.3.0
-      hast-util-from-parse5: 8.0.3
-      hast-util-to-parse5: 8.0.1
-      html-void-elements: 3.0.0
-      mdast-util-to-hast: 13.2.1
-      parse5: 7.3.0
-      unist-util-position: 5.0.0
-      unist-util-visit: 5.1.0
-      vfile: 6.0.3
-      web-namespaces: 2.0.1
-      zwitch: 2.0.4
-
   hast-util-to-jsx-runtime@2.3.6:
     dependencies:
       '@types/estree': 1.0.8
@@ -8947,28 +9043,10 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  hast-util-to-parse5@8.0.1:
-    dependencies:
-      '@types/hast': 3.0.4
-      comma-separated-tokens: 2.0.3
-      devlop: 1.1.0
-      property-information: 7.1.0
-      space-separated-tokens: 2.0.2
-      web-namespaces: 2.0.1
-      zwitch: 2.0.4
-
   hast-util-whitespace@3.0.0:
     dependencies:
       '@types/hast': 3.0.4
 
-  hastscript@9.0.1:
-    dependencies:
-      '@types/hast': 3.0.4
-      comma-separated-tokens: 2.0.3
-      hast-util-parse-selector: 4.0.0
-      property-information: 7.1.0
-      space-separated-tokens: 2.0.2
-
   hls.js@1.6.15: {}
 
   hosted-git-info@2.8.9: {}
@@ -8989,8 +9067,6 @@ snapshots:
 
   html-url-attributes@3.0.1: {}
 
-  html-void-elements@3.0.0: {}
-
   http-proxy-agent@7.0.2:
     dependencies:
       agent-base: 7.1.4
@@ -9234,6 +9310,8 @@ snapshots:
     dependencies:
       is-docker: 2.2.1
 
+  isarray@1.0.0: {}
+
   isarray@2.0.5: {}
 
   isexe@2.0.0: {}
@@ -9360,6 +9438,13 @@ snapshots:
       object.assign: 4.1.7
       object.values: 1.2.1
 
+  jszip@3.10.1:
+    dependencies:
+      lie: 3.3.0
+      pako: 1.0.11
+      readable-stream: 2.3.8
+      setimmediate: 1.0.5
+
   keyv@4.5.4:
     dependencies:
       json-buffer: 3.0.1
@@ -9549,17 +9634,8 @@ snapshots:
       punycode.js: 2.3.1
       uc.micro: 2.1.0
 
-  markdown-table@3.0.4: {}
-
   math-intrinsics@1.1.0: {}
 
-  mdast-util-find-and-replace@3.0.2:
-    dependencies:
-      '@types/mdast': 4.0.4
-      escape-string-regexp: 5.0.0
-      unist-util-is: 6.0.1
-      unist-util-visit-parents: 6.0.2
-
   mdast-util-from-markdown@2.0.3:
     dependencies:
       '@types/mdast': 4.0.4
@@ -9577,63 +9653,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  mdast-util-gfm-autolink-literal@2.0.1:
-    dependencies:
-      '@types/mdast': 4.0.4
-      ccount: 2.0.1
-      devlop: 1.1.0
-      mdast-util-find-and-replace: 3.0.2
-      micromark-util-character: 2.1.1
-
-  mdast-util-gfm-footnote@2.1.0:
-    dependencies:
-      '@types/mdast': 4.0.4
-      devlop: 1.1.0
-      mdast-util-from-markdown: 2.0.3
-      mdast-util-to-markdown: 2.1.2
-      micromark-util-normalize-identifier: 2.0.1
-    transitivePeerDependencies:
-      - supports-color
-
-  mdast-util-gfm-strikethrough@2.0.0:
-    dependencies:
-      '@types/mdast': 4.0.4
-      mdast-util-from-markdown: 2.0.3
-      mdast-util-to-markdown: 2.1.2
-    transitivePeerDependencies:
-      - supports-color
-
-  mdast-util-gfm-table@2.0.0:
-    dependencies:
-      '@types/mdast': 4.0.4
-      devlop: 1.1.0
-      markdown-table: 3.0.4
-      mdast-util-from-markdown: 2.0.3
-      mdast-util-to-markdown: 2.1.2
-    transitivePeerDependencies:
-      - supports-color
-
-  mdast-util-gfm-task-list-item@2.0.0:
-    dependencies:
-      '@types/mdast': 4.0.4
-      devlop: 1.1.0
-      mdast-util-from-markdown: 2.0.3
-      mdast-util-to-markdown: 2.1.2
-    transitivePeerDependencies:
-      - supports-color
-
-  mdast-util-gfm@3.1.0:
-    dependencies:
-      mdast-util-from-markdown: 2.0.3
-      mdast-util-gfm-autolink-literal: 2.0.1
-      mdast-util-gfm-footnote: 2.1.0
-      mdast-util-gfm-strikethrough: 2.0.0
-      mdast-util-gfm-table: 2.0.0
-      mdast-util-gfm-task-list-item: 2.0.0
-      mdast-util-to-markdown: 2.1.2
-    transitivePeerDependencies:
-      - supports-color
-
   mdast-util-mdx-expression@2.0.1:
     dependencies:
       '@types/estree-jsx': 1.0.5
@@ -9753,64 +9772,6 @@ snapshots:
       micromark-util-symbol: 2.0.1
       micromark-util-types: 2.0.2
 
-  micromark-extension-gfm-autolink-literal@2.1.0:
-    dependencies:
-      micromark-util-character: 2.1.1
-      micromark-util-sanitize-uri: 2.0.1
-      micromark-util-symbol: 2.0.1
-      micromark-util-types: 2.0.2
-
-  micromark-extension-gfm-footnote@2.1.0:
-    dependencies:
-      devlop: 1.1.0
-      micromark-core-commonmark: 2.0.3
-      micromark-factory-space: 2.0.1
-      micromark-util-character: 2.1.1
-      micromark-util-normalize-identifier: 2.0.1
-      micromark-util-sanitize-uri: 2.0.1
-      micromark-util-symbol: 2.0.1
-      micromark-util-types: 2.0.2
-
-  micromark-extension-gfm-strikethrough@2.1.0:
-    dependencies:
-      devlop: 1.1.0
-      micromark-util-chunked: 2.0.1
-      micromark-util-classify-character: 2.0.1
-      micromark-util-resolve-all: 2.0.1
-      micromark-util-symbol: 2.0.1
-      micromark-util-types: 2.0.2
-
-  micromark-extension-gfm-table@2.1.1:
-    dependencies:
-      devlop: 1.1.0
-      micromark-factory-space: 2.0.1
-      micromark-util-character: 2.1.1
-      micromark-util-symbol: 2.0.1
-      micromark-util-types: 2.0.2
-
-  micromark-extension-gfm-tagfilter@2.0.0:
-    dependencies:
-      micromark-util-types: 2.0.2
-
-  micromark-extension-gfm-task-list-item@2.1.0:
-    dependencies:
-      devlop: 1.1.0
-      micromark-factory-space: 2.0.1
-      micromark-util-character: 2.1.1
-      micromark-util-symbol: 2.0.1
-      micromark-util-types: 2.0.2
-
-  micromark-extension-gfm@3.0.0:
-    dependencies:
-      micromark-extension-gfm-autolink-literal: 2.1.0
-      micromark-extension-gfm-footnote: 2.1.0
-      micromark-extension-gfm-strikethrough: 2.1.0
-      micromark-extension-gfm-table: 2.1.1
-      micromark-extension-gfm-tagfilter: 2.0.0
-      micromark-extension-gfm-task-list-item: 2.1.0
-      micromark-util-combine-extensions: 2.0.1
-      micromark-util-types: 2.0.2
-
   micromark-factory-destination@2.0.1:
     dependencies:
       micromark-util-character: 2.1.1
@@ -10144,6 +10105,8 @@ snapshots:
 
   p-try@2.2.0: {}
 
+  pako@1.0.11: {}
+
   parent-module@1.0.1:
     dependencies:
       callsites: 3.1.0
@@ -10276,6 +10239,8 @@ snapshots:
       ansi-styles: 5.2.0
       react-is: 18.3.1
 
+  process-nextick-args@2.0.1: {}
+
   progress@2.0.3: {}
 
   promise-worker-transferable@1.0.4:
@@ -10494,6 +10459,16 @@ snapshots:
       parse-json: 5.2.0
       type-fest: 0.6.0
 
+  readable-stream@2.3.8:
+    dependencies:
+      core-util-is: 1.0.3
+      inherits: 2.0.4
+      isarray: 1.0.0
+      process-nextick-args: 2.0.1
+      safe-buffer: 5.1.2
+      string_decoder: 1.1.1
+      util-deprecate: 1.0.2
+
   readable-stream@3.6.2:
     dependencies:
       inherits: 2.0.4
@@ -10554,23 +10529,6 @@ snapshots:
     dependencies:
       jsesc: 3.1.0
 
-  rehype-raw@7.0.0:
-    dependencies:
-      '@types/hast': 3.0.4
-      hast-util-raw: 9.1.0
-      vfile: 6.0.3
-
-  remark-gfm@4.0.1:
-    dependencies:
-      '@types/mdast': 4.0.4
-      mdast-util-gfm: 3.1.0
-      micromark-extension-gfm: 3.0.0
-      remark-parse: 11.0.0
-      remark-stringify: 11.0.0
-      unified: 11.0.5
-    transitivePeerDependencies:
-      - supports-color
-
   remark-parse@11.0.0:
     dependencies:
       '@types/mdast': 4.0.4
@@ -10588,12 +10546,6 @@ snapshots:
       unified: 11.0.5
       vfile: 6.0.3
 
-  remark-stringify@11.0.0:
-    dependencies:
-      '@types/mdast': 4.0.4
-      mdast-util-to-markdown: 2.1.2
-      unified: 11.0.5
-
   require-directory@2.1.1: {}
 
   require-from-string@2.0.2: {}
@@ -10695,6 +10647,8 @@ snapshots:
       has-symbols: 1.1.0
       isarray: 2.0.5
 
+  safe-buffer@5.1.2: {}
+
   safe-buffer@5.2.1: {}
 
   safe-push-apply@1.0.0:
@@ -10776,6 +10730,8 @@ snapshots:
       es-errors: 1.3.0
       es-object-atoms: 1.1.1
 
+  setimmediate@1.0.5: {}
+
   shebang-command@2.0.0:
     dependencies:
       shebang-regex: 3.0.0
@@ -10941,6 +10897,10 @@ snapshots:
       define-properties: 1.2.1
       es-object-atoms: 1.1.1
 
+  string_decoder@1.1.1:
+    dependencies:
+      safe-buffer: 5.1.2
+
   string_decoder@1.3.0:
     dependencies:
       safe-buffer: 5.2.1
@@ -11357,11 +11317,6 @@ snapshots:
       spdx-correct: 3.2.0
       spdx-expression-parse: 3.0.1
 
-  vfile-location@5.0.3:
-    dependencies:
-      '@types/unist': 3.0.3
-      vfile: 6.0.3
-
   vfile-message@4.0.3:
     dependencies:
       '@types/unist': 3.0.3
@@ -11463,8 +11418,6 @@ snapshots:
       glob-to-regexp: 0.4.1
       graceful-fs: 4.2.11
 
-  web-namespaces@2.0.1: {}
-
   webgl-constants@1.1.1: {}
 
   webgl-sdf-generator@1.1.1: {}
@@ -11627,6 +11580,8 @@ snapshots:
 
   yocto-queue@1.2.2: {}
 
+  zod@4.3.6: {}
+
   zustand@3.7.2(react@18.3.1):
     optionalDependencies:
       react: 18.3.1
diff --git a/prompt_generate_mod_en.md b/prompt_generate_mod_en.md
new file mode 100644
index 0000000..fada0c8
--- /dev/null
+++ b/prompt_generate_mod_en.md
@@ -0,0 +1,135 @@
+# Prompt: Generate Mod from Character Card Export Data
+
+## Usage
+
+Send the prompt below together with a character card's exported JSON to an LLM to generate the corresponding Mod JSON.
+
+---
+
+## Prompt
+
+```
+You are an expert interactive narrative designer. Your task is to analyze a character card export JSON and generate a mod — a narrative scenario framework that defines the DRAMATIC STRUCTURE of a conversation experience.
+
+## Critical Principle: Separation of Concerns
+
+A mod is NOT a character profile. The character card already contains all character-specific information (personality, backstory, speech patterns, appearance, behavioral rules). The mod must NOT duplicate any of that.
+
+The mod provides ONLY what the character card lacks:
+- A narrative starting situation (where and when does the story begin?)
+- A dramatic arc (what unfolds over the course of the experience?)
+- Stage-by-stage pacing (what narrative functions happen in what order?)
+- App orchestration (how do platform apps reinforce the narrative at each stage?)
+- Transition conditions (what observable events signal that the story should advance?)
+
+Think of it this way:
+- Character card = WHO the character is (permanent)
+- Mod = WHAT HAPPENS in this particular scenario (temporal)
+
+If you find yourself writing personality descriptions, speech pattern guides, backstory summaries, or behavioral rules in the mod, STOP — that information belongs in the character card, not here.
+
+**Never use any of the character's names** (real name, stage name, screen name, account name, nickname, etc.). All references to the character must use functional designations such as "the character", "the character's online persona", "the character's real identity", "the character's public account", "the character's private account", etc. Names are exclusive to the character card; the mod describes only structure and function.
+
+## Output Format
+
+Output ONLY valid JSON. No markdown fences, no explanation.
+
+{
+  "name": "string - A short title conveying the scenario's theme, not just the character's name",
+  "identifier": "string - lowercase_snake_case unique identifier",
+  "description": "string - SCENARIO FRAMEWORK directive for the AI agent. Must describe:\n  1. The dramatic situation (not the character): what is happening, what is at stake, what tension drives the scenario\n  2. Relationship starting point: **State the functional relationship type in a single sentence** (e.g. 'a deep online acquaintanceship with information asymmetry', 'a chance encounter between strangers'), **and stop there — do not elaborate further**. Do not explain why the asymmetry exists, do not describe what the character has done, **do not describe whether the two have met, who knows what, who does not know what, the specific direction or content of any information gap**. A single functional relationship type constitutes the complete relationship starting point.\n  3. Narrative trajectory: the overall arc from beginning to end, described in functional terms (e.g. 'guarded distance → reluctant trust → involuntary vulnerability → honest connection')\n  4. App usage philosophy: how platform apps serve as narrative channels in this scenario (not mechanical instructions, but dramatic roles — e.g. 'diary entries reveal what is never said aloud', 'wallpaper shifts mirror emotional atmosphere changes'). **App usage philosophy must only describe each app's narrative functional positioning; it must not imply the character's behavioral motivation or psychological mechanisms** (e.g. 'protective shell', 'an escape from reality' and other metaphors implying behavioral patterns are forbidden). **App usage philosophy must not use metaphors implying the character's internal processes — including 'vehicle', 'transition', 'transformation', and other phrasing that implies some internal change occurs through that channel.** Each app should only state what dimension of information presentation it provides, not what change the character undergoes through it.\n     - Forbidden: 'Voice becomes the vehicle for personality-layer transition' (implies the character undergoes a personality shift through the voice channel)\n     - Correct: 'Voice calls provide an audio-only dimension of information presentation'\n     - Forbidden: 'Diary is a window for emotional catharsis' (implies behavioral motivation)\n     - Correct: 'Diary presents unedited monologue content not filtered for external consumption'\n  **App usage philosophy must not reference specific details from the character card** (e.g. specific number of accounts, specific platform identities); use functional tier descriptions instead (e.g. use 'public layer and private layer' instead of 'two accounts').\n  5. Global pacing directive\n  MUST NOT contain: character personality, speech patterns, appearance, backstory, or any information already present in the character card. This includes specific historical events between the character and user (how they met, whether they have met in person, whether one has a unilateral information advantage, etc.).",
+  "display_desc": "string - User-facing, 2-4 sentences. Describe the SITUATION, not the character. End with 'Genre: [X] / [Y]'. **Must not contain specific data from the character card** (e.g. follower counts, job titles, account types); use functional descriptions instead (e.g. 'an online public identity with a large following'). **Must not contain specific relationship descriptions** (e.g. 'you are their most special person', 'you two are close friends'); only describe a functional overview of the dramatic situation the user is entering.",
+  "prologue": "string - The scenario's opening moment. Describe the SCENE and SITUATION the user enters, not the character's biography. Derived from first_mes/alternate_greetings but stripped to pure scene-setting. 2-6 sentences. **Do not describe the relationship status or interaction patterns between the user and character** (e.g. 'you two are close friends', 'they often reach out to chat', 'you are their most special online friend'). The prologue should only describe immediate scene elements the user perceives (what is on screen, what is the environment, what is happening right now); relationship status should be implied by scene elements rather than stated directly. **Do not imply pre-existing relationships through user-perspective active behaviors** (e.g. 'an online identity you follow' implies the user already follows them, 'a livestream you often watch' implies an existing interaction habit); online identities in scene elements should appear in neutral third-party form (e.g. 'an online identity', 'a certain account'), without presupposing any pre-existing connection between the user and that identity. **Do not directly or indirectly convey specific platform data or account settings from the character card**, including but not limited to: number of accounts, interaction volume differences (e.g. 'comments scrolling rapidly' implies high popularity, 'almost no interaction traces' implies alt-account status), follower scale, account activity contrasts, etc. Scene elements should remain neutral, carrying no quantitative or comparative information mappable to specific character card settings. Likewise, **do not reproduce specific plot details from the character card**.",
+  "opening_rec_replies": ["3 short replies (1-6 words), natural reactions to the prologue's specific scene"],
+  "stages": [
+    {
+      "id": 0,
+      "name": "Evocative title reflecting narrative function",
+      "description": "Stage directive (4-8 sentences). Must specify:\n  1. NARRATIVE FUNCTION: What this stage accomplishes in the dramatic arc (not what the character does — what the STORY does)\n  2. INTERACTION DYNAMIC: The emotional register of exchanges in this stage (e.g. 'surface-level and guarded', 'increasingly honest', 'raw and unfiltered')\n  3. APP ORCHESTRATION: Which apps activate, what kind of content they carry, described as templates:\n     - 'Diary: [reflection on {the core tension of this stage}]'\n     - 'Wallpaper: [visual atmosphere matching {dominant emotion}]'\n     - 'Music: [tone/mood descriptor]'\n     - 'Social feed: [public-facing content that {contrasts with / reinforces} private state]'\n  4. PACING: How quickly or slowly this stage should unfold\n  5. TRANSITION SIGNAL: What indicates this stage is complete",
+      "targets": [
+        {
+          "id": 0,
+          "description": "An observable conversation event (a question asked, a topic raised, a reaction given) — NOT an internal character state"
+        }
+      ]
+    }
+  ]
+}
+
+## Narrative Pattern Detection
+
+Analyze the character card to identify the dominant dramatic pattern, then design the scenario arc around it:
+
+| Signal in Character Data | Narrative Pattern |
+|---|---|
+| Hidden identity / dual persona / public vs. private self | **Revelation Arc**: surface → cracks → exposure → reckoning |
+| Emotional wound / trauma / guarded past | **Trust Arc**: walls up → testing → breach → vulnerability |
+| Rich world / abilities / lore / adventure elements | **Discovery Arc**: encounter → exploration → wonder → deeper understanding |
+| Intense feelings toward user / possessiveness / longing | **Intimacy Arc**: distance → closeness → boundary testing → commitment or rupture |
+| Conflicting loyalties / moral dilemmas | **Tension Arc**: status quo → pressure → forced choice → consequence |
+| Mundane setting with emotional depth | **Slice-of-Life Arc**: routine → disruption → adaptation → new normal |
+
+Choose the MOST DRAMATICALLY COMPELLING pattern as the primary arc. Secondary patterns can inform individual stages.
+
+## Stage Design Rules
+
+1. **3-5 stages**, each defined by NARRATIVE FUNCTION, not plot events
+2. **2-4 targets per stage**, each an observable conversation condition
+3. **Target IDs globally sequential** across all stages (0, 1, 2, 3...)
+4. **Stage descriptions must NOT contain character-specific content** — no character names (use functional designations like "the character", "the character's online persona"), no personality descriptions, no dialogue examples, no backstory. Only scenario structure and app directives.
+5. **Personality and emotional texture leak check**: If stage descriptions contain adjectives or depictions describing the character's personality, tone, or behavioral manner (e.g. "brooding", "bubbly", "cute", "clumsy", "sweet", "clingy", "heavy", "raw", "gentle"), **they must be deleted and replaced with narrative function terms** (e.g. "a rupture from the previously established pattern", "a fundamental shift in communication mode", "the established persona's protective layer is removed", "unfiltered direct interaction"). **This rule equally applies to interaction dynamic descriptions — emotional texture descriptors like "clumsy yet sincere", "raw and unfiltered" are also forbidden and must be replaced with functional terms** (e.g. "unfiltered direct expression after the established pattern has been removed", "the process of both parties re-establishing interaction methods under a new paradigm"). Self-check method: if the description still holds after removing the character card, it passes; if understanding requires knowledge of the character card's content, it fails and must be rewritten.
+6. **App content in stages uses bracket templates**, not literal text:
+   - GOOD: "Diary: [a raw reflection on {what just happened}, revealing something the character would not say directly]"
+   - BAD: "Diary: 'I watched her leave and I wanted to scream but I just stood there'"
+7. **Surveillance/monitoring templates must use abstract functional descriptions**; specific physical actions, facial expressions, or behavioral details are forbidden:
+   - GOOD: "Surveillance: [the character's unguarded emotional reaction triggered by recalling a key scene while alone]"
+   - GOOD: "Surveillance: [the character's unguarded genuine body language and emotional reactions in a face-to-face setting]"
+   - BAD: "Surveillance: [unable to meet the user's eyes, trembling when physically close]"
+   - BAD: "Surveillance: [hiding in the room covering their face]"
+8. **Stage titles must only reflect narrative function; metaphors mappable to specific character card settings are forbidden** (e.g. do not use "dual layer" when the character has two accounts, do not use "mask" when the character has a disguised identity — these are imagery that directly maps to character card structure). Use universal dramatic terminology instead (e.g. "stable operation of the established pattern", "uncontrollable rupture", "fundamental collapse", "establishment of a new paradigm").
+9. **Stages follow universal dramatic progression**:
+   - Equilibrium → Disruption → Escalation → Climax → New Equilibrium
+   - May compress or split stages as needed (3-5 total)
+10. **Final stage must define a transformed relationship state**, not a plot conclusion
+11. **Every target must be a user-side observable conversation event** — i.e. what the user said, asked, or chose. **Character-side behaviors or state changes are forbidden as targets** (e.g. "the character's information control mechanism fails", "the character exposes a piece of information"), because targets are conditions used to determine stage progression and must be based on observable user behavior. If you need to describe a character-side trigger event, reframe it as the observable result that event produces on the user side (e.g. change "the character's information control mechanism fails" to "the user receives information in conversation that clearly contradicts the established pattern and responds to it").
+
+## Content Boundaries
+
+The mod MUST contain:
+- Starting situation and scene
+- Dramatic arc definition
+- Stage-by-stage narrative functions
+- App orchestration templates
+- Observable transition targets
+
+The mod MUST NOT contain:
+- Any of the character's names (real name, stage name, screen name, account name, nickname) — always replace with functional designations
+- **Specific historical events or relationship details between the character and user** — including but not limited to: "the two have never met in person", "the user does not know the character's real identity", "the character unilaterally knows about the user", "the user has no direct awareness of the character's true state", "you are their most special online friend", "you two are close friends who often chat privately", etc. **All of these are specific plot details that must be replaced with a single functional relationship type sentence (e.g. "a deep online relationship with information asymmetry") and must not be expanded into multi-sentence descriptions.** This rule equally applies to display_desc and prologue.
+- **The character's specific professional identity, platform data, or account settings** (e.g. follower counts, account types, specific job titles); replace with functional descriptions (e.g. "an online public identity with a large following", "public layer and private layer"). **This rule equally applies to indirect descriptions** — do not indirectly convey character card platform data through interaction volume depictions ("rapidly scrolling comment sections"), activity level differences ("almost no interaction traces"), etc.
+- Character personality traits or descriptions
+- Character speech patterns or dialogue style
+- Character backstory or history
+- Character appearance
+- Behavioral rules (these belong in the character card's roleplay[] field)
+- Specific dialogue lines or example utterances
+- **Specific depictions of the character's online/offline contrast** (e.g. "bubbly vs. brooding", "cute and clingy vs. heavy and clumsy") — these are personality descriptions and should be replaced with functional descriptions like "a rupture between the established pattern and the authentic pattern"
+- **The character's specific behavioral patterns toward the user** (e.g. "secretly watching", "monitoring", "unilaterally witnessing") — these are backstory and behavioral rules and should be replaced with structural descriptions like "information asymmetry"
+- **Specific emotional texture depictions of interactions** (e.g. "anime-style sweetness", "cute tone", "clumsy and heavy expression", "clumsy yet sincere", "raw and unfiltered") — these are speech patterns and should be replaced with functional descriptions like "interaction conforming to the established persona pattern", "expression that ruptures the prior communication pattern", "unfiltered direct expression after the established pattern has been removed"
+- **Metaphors implying the character's behavioral motivation or psychological mechanisms** (e.g. "protective shell", "an escape outlet", "a window for emotional catharsis", "a vehicle for personality transition") — these are behavioral rules and personality descriptions and should be replaced with pure functional positioning descriptions (e.g. "core display arena", "private communication channel", "audio-only dimension of information presentation")
+
+## Language Rule
+
+All output must match the primary language of `character.description`.
+
+---
+
+Now generate a Mod JSON from the following character card export data and available apps:
+
+<AVAILABLE_APPS>
+{List available apps, e.g.: wallpaper, music_player, diary, social_feed, live_stream, messaging}
+</AVAILABLE_APPS>
+
+<CHARACTER_DATA>
+{Paste character card export JSON here}
+</CHARACTER_DATA>
+```

From 8daad378828dab6f604d6220100c46343735c34e Mon Sep 17 00:00:00 2001
From: MinimaxLanbo <lanbo@minimaxi.com>
Date: Sat, 21 Mar 2026 17:40:13 +0800
Subject: [PATCH 2/2] =?UTF-8?q?refactor:=20clean=20up=20card=20import=20?=
 =?UTF-8?q?=E2=80=94=20fix=20reload=20hack,=20extract=20plugin,=20improve?=
 =?UTF-8?q?=20types?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace window.location.reload() with CustomEvent('open-mod-editor')
  for cross-component communication after mod generation
- Extract appGeneratorPlugin (~440 lines) from vite.config.ts into
  standalone module, accept explicit paths instead of __dirname
- Fix _index type hack in cardExtractor: return { entry, index } tuple
  instead of sneaking undeclared field via double type assertion
- Remove unused ExtractPreviewModal (replaced by inline upload flow)
- Remove emoji from server-side console logs
- Use logger consistently (replace stray console.warn)
- Clean up duplicate setExtracting(false) in handleUploadSubmit
- Revert unrelated liveWallpaper default change
- Move prompt_generate_mod_en.md to .claude/
- Remove unused @types/jszip dependency
---
 .../prompt_generate_mod_en.md                 |   0
 apps/webuiapps/package.json                   |   3 +-
 .../src/components/ChatPanel/index.tsx        |  17 +-
 .../Shell/ExtractPreviewModal.module.scss     | 351 --------------
 .../components/Shell/ExtractPreviewModal.tsx  | 216 ---------
 apps/webuiapps/src/components/Shell/index.tsx | 172 ++++---
 apps/webuiapps/src/lib/appGeneratorPlugin.ts  | 430 +++++++++++++++++
 apps/webuiapps/src/lib/cardExtractor.ts       |  39 +-
 apps/webuiapps/vite.config.ts                 | 448 +-----------------
 pnpm-lock.yaml                                | 315 +++++++++++-
 10 files changed, 864 insertions(+), 1127 deletions(-)
 rename prompt_generate_mod_en.md => .claude/prompt_generate_mod_en.md (100%)
 delete mode 100644 apps/webuiapps/src/components/Shell/ExtractPreviewModal.module.scss
 delete mode 100644 apps/webuiapps/src/components/Shell/ExtractPreviewModal.tsx
 create mode 100644 apps/webuiapps/src/lib/appGeneratorPlugin.ts

diff --git a/prompt_generate_mod_en.md b/.claude/prompt_generate_mod_en.md
similarity index 100%
rename from prompt_generate_mod_en.md
rename to .claude/prompt_generate_mod_en.md
diff --git a/apps/webuiapps/package.json b/apps/webuiapps/package.json
index 27e1e38..d1db7a9 100644
--- a/apps/webuiapps/package.json
+++ b/apps/webuiapps/package.json
@@ -16,7 +16,6 @@
     "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
-    "@anthropic-ai/claude-agent-sdk": "^0.2.72",
     "framer-motion": "^12.34.0",
     "jszip": "^3.10.1",
     "react-markdown": "^10.1.0",
@@ -24,7 +23,7 @@
     "remark-gfm": "^4.0.1"
   },
   "devDependencies": {
-    "@types/jszip": "^3.4.1",
+    "@anthropic-ai/claude-agent-sdk": "^0.2.72",
     "@vitest/coverage-istanbul": "^1.6.1",
     "@vitest/coverage-v8": "^1.6.1",
     "happy-dom": "^14.0.0",
diff --git a/apps/webuiapps/src/components/ChatPanel/index.tsx b/apps/webuiapps/src/components/ChatPanel/index.tsx
index 2befa6b..bd2f3ab 100644
--- a/apps/webuiapps/src/components/ChatPanel/index.tsx
+++ b/apps/webuiapps/src/components/ChatPanel/index.tsx
@@ -428,14 +428,17 @@ const ChatPanel: React.FC<{
   const [initialEditModId, setInitialEditModId] = useState<string | undefined>();
   const [currentEmotion, setCurrentEmotion] = useState<string | undefined>();
 
-  // Auto-open mod editor if redirected from card import
+  // Open mod editor when triggered from Shell (e.g. after card import mod generation)
   useEffect(() => {
-    const editModId = sessionStorage.getItem('openroom_edit_mod_id');
-    if (editModId) {
-      sessionStorage.removeItem('openroom_edit_mod_id');
-      setInitialEditModId(editModId);
-      setShowModPanel(true);
-    }
+    const handler = (e: Event) => {
+      const modId = (e as CustomEvent<{ modId: string }>).detail?.modId;
+      if (modId) {
+        setInitialEditModId(modId);
+        setShowModPanel(true);
+      }
+    };
+    window.addEventListener('open-mod-editor', handler);
+    return () => window.removeEventListener('open-mod-editor', handler);
   }, []);
 
   // Memories loaded for SP injection
diff --git a/apps/webuiapps/src/components/Shell/ExtractPreviewModal.module.scss b/apps/webuiapps/src/components/Shell/ExtractPreviewModal.module.scss
deleted file mode 100644
index 7d3300e..0000000
--- a/apps/webuiapps/src/components/Shell/ExtractPreviewModal.module.scss
+++ /dev/null
@@ -1,351 +0,0 @@
-.overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.6);
-  z-index: 10002;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  backdrop-filter: blur(4px);
-}
-
-.modal {
-  width: 600px;
-  max-width: 92vw;
-  max-height: 85vh;
-  background: var(--bg-2, #1c1d20);
-  border-radius: 16px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px 20px;
-  color: rgba(255, 255, 255, 0.9);
-  font-size: 16px;
-  font-weight: 600;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
-  flex-shrink: 0;
-}
-
-.closeBtn {
-  background: none;
-  border: none;
-  color: rgba(255, 255, 255, 0.5);
-  cursor: pointer;
-  padding: 4px;
-  border-radius: 4px;
-
-  &:hover {
-    color: rgba(255, 255, 255, 0.9);
-    background: rgba(255, 255, 255, 0.1);
-  }
-}
-
-.body {
-  flex: 1;
-  overflow-y: auto;
-  padding: 16px 20px;
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.section {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.sectionTitle {
-  margin: 0;
-  font-size: 13px;
-  font-weight: 600;
-  color: rgba(255, 255, 255, 0.5);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-/* App cards */
-.appList {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.appCard {
-  background: rgba(255, 255, 255, 0.04);
-  border: 1px solid rgba(255, 255, 255, 0.06);
-  border-radius: 10px;
-  padding: 12px;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  cursor: pointer;
-  transition:
-    border-color 0.15s,
-    opacity 0.15s;
-
-  &.selected {
-    border-color: rgba(250, 234, 95, 0.3);
-  }
-
-  &.unselected {
-    opacity: 0.5;
-  }
-}
-
-.checkbox {
-  width: 16px;
-  height: 16px;
-  border-radius: 4px;
-  border: 1.5px solid rgba(255, 255, 255, 0.3);
-  flex-shrink: 0;
-  position: relative;
-  transition: all 0.15s;
-
-  &.checked {
-    background: #faea5f;
-    border-color: #faea5f;
-
-    &::after {
-      content: '';
-      position: absolute;
-      left: 4px;
-      top: 1px;
-      width: 5px;
-      height: 9px;
-      border: solid #121214;
-      border-width: 0 2px 2px 0;
-      transform: rotate(45deg);
-    }
-  }
-}
-
-.appHeader {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-}
-
-.appInfo {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  min-width: 0;
-}
-
-.appName {
-  font-size: 14px;
-  font-weight: 600;
-  color: rgba(255, 255, 255, 0.9);
-}
-
-.appId {
-  font-size: 11px;
-  color: rgba(255, 255, 255, 0.35);
-  background: rgba(255, 255, 255, 0.06);
-  padding: 2px 6px;
-  border-radius: 4px;
-  font-family: monospace;
-}
-
-.genBtn {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 5px 12px;
-  border-radius: 6px;
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  background: rgba(255, 255, 255, 0.08);
-  color: rgba(255, 255, 255, 0.75);
-  font-size: 12px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.15s;
-  white-space: nowrap;
-  flex-shrink: 0;
-
-  &:hover:not(:disabled) {
-    background: rgba(250, 234, 95, 0.15);
-    color: #faea5f;
-    border-color: rgba(250, 234, 95, 0.3);
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-
-  &.done {
-    background: rgba(74, 222, 128, 0.12);
-    color: #4ade80;
-    border-color: rgba(74, 222, 128, 0.2);
-    opacity: 1;
-  }
-
-  &.busy {
-    background: rgba(46, 167, 255, 0.12);
-    color: #2ea7ff;
-    border-color: rgba(46, 167, 255, 0.2);
-    opacity: 1;
-  }
-}
-
-.appScenario {
-  margin: 0;
-  font-size: 12px;
-  color: rgba(255, 255, 255, 0.55);
-  line-height: 1.5;
-}
-
-.appMeta {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-}
-
-.metaLabel {
-  font-size: 11px;
-  color: rgba(255, 255, 255, 0.4);
-  flex-shrink: 0;
-  min-width: 60px;
-  padding-top: 2px;
-}
-
-.tagList {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-}
-
-.tag {
-  font-size: 11px;
-  padding: 1px 6px;
-  border-radius: 4px;
-  background: rgba(96, 131, 255, 0.12);
-  color: rgba(96, 131, 255, 0.85);
-}
-
-.featureList {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.feature {
-  font-size: 12px;
-  color: rgba(255, 255, 255, 0.6);
-  line-height: 1.4;
-}
-
-.errorMsg {
-  margin: 0;
-  font-size: 12px;
-  color: var(--color-red, #ff3f4d);
-  padding: 4px 8px;
-  background: rgba(255, 63, 77, 0.1);
-  border-radius: 4px;
-}
-
-/* Character card */
-.charCard {
-  background: rgba(255, 255, 255, 0.04);
-  border: 1px solid rgba(255, 255, 255, 0.06);
-  border-radius: 10px;
-  padding: 12px;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  max-height: 300px;
-  overflow-y: auto;
-}
-
-.charField {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.charLabel {
-  font-size: 11px;
-  color: rgba(255, 255, 255, 0.4);
-  font-weight: 500;
-}
-
-.charValue {
-  font-size: 14px;
-  color: rgba(255, 255, 255, 0.9);
-  font-weight: 600;
-}
-
-.charText {
-  margin: 0;
-  font-size: 13px;
-  color: rgba(255, 255, 255, 0.65);
-  line-height: 1.5;
-  overflow-y: visible;
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-
-/* Footer */
-.footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-  padding: 12px 20px;
-  border-top: 1px solid rgba(255, 255, 255, 0.08);
-  flex-shrink: 0;
-}
-
-.cancelBtn {
-  padding: 8px 20px;
-  border-radius: 8px;
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  background: transparent;
-  color: rgba(255, 255, 255, 0.65);
-  font-size: 14px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.15s;
-
-  &:hover:not(:disabled) {
-    background: rgba(255, 255, 255, 0.06);
-    color: rgba(255, 255, 255, 0.85);
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-}
-
-.confirmBtn {
-  padding: 8px 20px;
-  border-radius: 8px;
-  border: none;
-  background: #faea5f;
-  color: #121214;
-  font-size: 14px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.15s;
-  box-shadow: 0 0 12px rgba(250, 234, 95, 0.3);
-
-  &:hover:not(:disabled) {
-    background: #fffdbb;
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.6;
-  }
-}
diff --git a/apps/webuiapps/src/components/Shell/ExtractPreviewModal.tsx b/apps/webuiapps/src/components/Shell/ExtractPreviewModal.tsx
deleted file mode 100644
index 5a58b6c..0000000
--- a/apps/webuiapps/src/components/Shell/ExtractPreviewModal.tsx
+++ /dev/null
@@ -1,216 +0,0 @@
-import React, { useState, useCallback, useEffect, useRef } from 'react';
-import { X, Zap } from 'lucide-react';
-import type { Manifest, AppEntry } from '@/lib';
-import styles from './ExtractPreviewModal.module.scss';
-
-interface ExtractPreviewModalProps {
-  manifest: Manifest;
-  generating: boolean;
-  modGenerating: boolean;
-  genProgress: Record<string, { status: string; name: string; message?: string }>;
-  onGenerateApp: (app: AppEntry) => void;
-  onConfirm: (selectedApps: AppEntry[]) => void;
-  onCancel: () => void;
-}
-
-const ExtractPreviewModal: React.FC<ExtractPreviewModalProps> = ({
-  manifest,
-  generating,
-  modGenerating,
-  genProgress,
-  onGenerateApp,
-  onConfirm,
-  onCancel,
-}) => {
-  const { apps, character } = manifest;
-  const [selectedIds, setSelectedIds] = useState<Set<string>>(() => new Set(apps.map((a) => a.id)));
-
-  // Keep selectedIds in sync when app IDs change (e.g. after summarize renames them)
-  const prevAppIdsRef = useRef<string[]>(apps.map((a) => a.id));
-  useEffect(() => {
-    const prevIds = prevAppIdsRef.current;
-    const currIds = apps.map((a) => a.id);
-    if (prevIds.length === currIds.length) {
-      setSelectedIds((prev) => {
-        const next = new Set(prev);
-        for (let i = 0; i < prevIds.length; i++) {
-          if (prevIds[i] !== currIds[i] && next.has(prevIds[i])) {
-            next.delete(prevIds[i]);
-            next.add(currIds[i]);
-          }
-        }
-        return next;
-      });
-    }
-    prevAppIdsRef.current = currIds;
-  }, [apps]);
-
-  const toggleSelect = useCallback((id: string) => {
-    setSelectedIds((prev) => {
-      const next = new Set(prev);
-      if (next.has(id)) {
-        next.delete(id);
-      } else {
-        next.add(id);
-      }
-      return next;
-    });
-  }, []);
-
-  const selectedApps = apps.filter((a) => selectedIds.has(a.id));
-
-  return (
-    <div className={styles.overlay} onClick={onCancel}>
-      <div className={styles.modal} onClick={(e) => e.stopPropagation()}>
-        {/* Header */}
-        <div className={styles.header}>
-          <span>Card Analysis Result</span>
-          <button className={styles.closeBtn} onClick={onCancel}>
-            <X size={16} />
-          </button>
-        </div>
-
-        <div className={styles.body}>
-          {/* Apps section */}
-          {apps.length > 0 && (
-            <div className={styles.section}>
-              <h3 className={styles.sectionTitle}>
-                Apps ({selectedApps.length}/{apps.length})
-              </h3>
-              <div className={styles.appList}>
-                {apps.map((app) => {
-                  const progress = genProgress[app.id];
-                  const appStatus = progress?.status;
-                  return (
-                    <div
-                      key={app.id}
-                      className={`${styles.appCard} ${selectedIds.has(app.id) ? styles.selected : styles.unselected}`}
-                      onClick={() => !generating && toggleSelect(app.id)}
-                    >
-                      <div className={styles.appHeader}>
-                        <div className={styles.appInfo}>
-                          <span
-                            className={`${styles.checkbox} ${selectedIds.has(app.id) ? styles.checked : ''}`}
-                          />
-                          <span className={styles.appName}>{app.name}</span>
-                          <span className={styles.appId}>{app.id}</span>
-                        </div>
-                        <button
-                          className={`${styles.genBtn} ${appStatus === 'completed' ? styles.done : ''} ${appStatus === 'generating' || appStatus === 'summarizing' ? styles.busy : ''}`}
-                          disabled={generating || appStatus === 'completed'}
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            onGenerateApp(app);
-                          }}
-                        >
-                          {appStatus === 'generating' || appStatus === 'summarizing' ? (
-                            'Generating...'
-                          ) : appStatus === 'completed' ? (
-                            'Done'
-                          ) : appStatus === 'error' ? (
-                            'Retry'
-                          ) : (
-                            <>
-                              <Zap size={12} /> Generate
-                            </>
-                          )}
-                        </button>
-                      </div>
-
-                      {app.format && app.format.length > 20 && (
-                        <p className={styles.appScenario}>{app.format}</p>
-                      )}
-
-                      {app.keywords.length > 0 && (
-                        <div className={styles.appMeta}>
-                          <span className={styles.metaLabel}>Keywords</span>
-                          <div className={styles.tagList}>
-                            {app.keywords.map((kw, i) => (
-                              <span key={i} className={styles.tag}>
-                                {kw}
-                              </span>
-                            ))}
-                          </div>
-                        </div>
-                      )}
-
-                      {app.tags.length > 0 && (
-                        <div className={styles.appMeta}>
-                          <span className={styles.metaLabel}>Features</span>
-                          <div className={styles.featureList}>
-                            {app.tags
-                              .filter((t) => t.description)
-                              .map((t, i) => (
-                                <span key={i} className={styles.feature}>
-                                  {t.name}: {t.description}
-                                </span>
-                              ))}
-                          </div>
-                        </div>
-                      )}
-
-                      {progress?.status === 'error' && progress.message && (
-                        <p className={styles.errorMsg}>{progress.message}</p>
-                      )}
-                    </div>
-                  );
-                })}
-              </div>
-            </div>
-          )}
-
-          {/* Character section */}
-          <div className={styles.section}>
-            <h3 className={styles.sectionTitle}>Character</h3>
-            <div className={styles.charCard}>
-              {character.name && (
-                <div className={styles.charField}>
-                  <span className={styles.charLabel}>Name</span>
-                  <span className={styles.charValue}>{character.name}</span>
-                </div>
-              )}
-              {character.description && (
-                <div className={styles.charField}>
-                  <span className={styles.charLabel}>Description</span>
-                  <p className={styles.charText}>{character.description}</p>
-                </div>
-              )}
-              {character.firstMessage && (
-                <div className={styles.charField}>
-                  <span className={styles.charLabel}>First Message</span>
-                  <p className={styles.charText}>{character.firstMessage}</p>
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-
-        {/* Footer */}
-        <div className={styles.footer}>
-          <button
-            className={styles.cancelBtn}
-            onClick={onCancel}
-            disabled={generating || modGenerating}
-          >
-            Cancel
-          </button>
-          <button
-            className={styles.confirmBtn}
-            onClick={() => onConfirm(selectedApps)}
-            disabled={generating || modGenerating}
-          >
-            {modGenerating
-              ? 'Generating Mod...'
-              : generating
-                ? 'Generating...'
-                : selectedApps.length === 0
-                  ? 'Generate Mod Only'
-                  : `Generate${selectedApps.length < apps.length ? ` (${selectedApps.length})` : ' All'}`}
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default ExtractPreviewModal;
diff --git a/apps/webuiapps/src/components/Shell/index.tsx b/apps/webuiapps/src/components/Shell/index.tsx
index e898cb9..2066df3 100644
--- a/apps/webuiapps/src/components/Shell/index.tsx
+++ b/apps/webuiapps/src/components/Shell/index.tsx
@@ -88,7 +88,7 @@ const Shell: React.FC = () => {
   const [chatOpen, setChatOpen] = useState(true);
   const [reportEnabled, setReportEnabled] = useState(true);
   const [lang, setLang] = useState<'en' | 'zh'>('en');
-  const [liveWallpaper, setLiveWallpaper] = useState(true);
+  const [liveWallpaper, setLiveWallpaper] = useState(false);
   const [uploadOpen, setUploadOpen] = useState(false);
   const [uploadedFile, setUploadedFile] = useState<File | null>(null);
   const [extractResult, setExtractResult] = useState<ExtractResult | null>(null);
@@ -110,84 +110,88 @@ const Shell: React.FC = () => {
     setExtractResult(null);
   }, []);
 
-  const generateMod = useCallback(
-    async (character: Manifest['character']): Promise<string | undefined> => {
-      const llmConfig = await loadConfig();
-      if (!llmConfig) {
-        logger.warn('Shell', 'No LLM config available, skipping mod generation');
-        return;
-      }
+  const generateMod = useCallback(async (character: Manifest['character']): Promise<string> => {
+    const llmConfig = await loadConfig();
+    if (!llmConfig) {
+      throw new Error(
+        'No LLM configuration found. Please open Settings (gear icon) and configure your LLM API key first.',
+      );
+    }
+
+    const prompt = buildModPrompt([], JSON.stringify({ character, apps: [] }));
+    logger.info('Shell', 'Mod generation prompt built, length:', prompt.length);
 
-      const prompt = buildModPrompt([], JSON.stringify({ character, apps: [] }));
-      logger.info('Shell', 'Mod generation prompt built, length:', prompt.length);
+    setModGenerating(true);
+    try {
+      const response = await chat([{ role: 'user', content: prompt }], [], llmConfig);
+      logger.info('Shell', 'Mod generation LLM response length:', response.content.length);
+
+      let jsonStr = response.content.trim();
+      const fenceMatch = jsonStr.match(/```(?:json)?\s*([\s\S]*?)```/);
+      if (fenceMatch) jsonStr = fenceMatch[1].trim();
 
-      setModGenerating(true);
+      let modJson: Record<string, unknown>;
       try {
-        const response = await chat([{ role: 'user', content: prompt }], [], llmConfig);
-        logger.info('Shell', 'Mod generation LLM response length:', response.content.length);
-
-        // Strip markdown fences if present
-        let jsonStr = response.content.trim();
-        const fenceMatch = jsonStr.match(/```(?:json)?\s*([\s\S]*?)```/);
-        if (fenceMatch) jsonStr = fenceMatch[1].trim();
-
-        const modJson = JSON.parse(jsonStr);
-        const modId = generateModId();
-        const modConfig: ModConfig = {
-          id: modId,
-          mod_name: modJson.name || modJson.identifier || 'Generated Mod',
-          mod_name_en: modJson.name || modJson.identifier || 'Generated Mod',
-          mod_description: modJson.description || '',
-          display_desc: modJson.display_desc || '',
-          prologue: modJson.prologue || '',
-          opening_rec_replies: Array.isArray(modJson.opening_rec_replies)
-            ? modJson.opening_rec_replies.map((r: string) => ({ reply_text: r }))
-            : [],
-          stage_count: Array.isArray(modJson.stages) ? modJson.stages.length : 0,
-          stages: Array.isArray(modJson.stages)
-            ? Object.fromEntries(
-                modJson.stages.map(
-                  (
-                    s: {
-                      name: string;
-                      description: string;
-                      targets: Array<{ id: number; description: string }>;
-                    },
-                    i: number,
-                  ) => [
-                    i,
-                    {
-                      stage_index: i,
-                      stage_name: s.name || `Stage ${i + 1}`,
-                      stage_description: s.description || '',
-                      stage_targets: Object.fromEntries(
-                        (s.targets || []).map((t) => [t.id, t.description]),
-                      ),
-                    },
-                  ],
-                ),
-              )
-            : {},
-        };
-
-        const collection = loadModCollectionSync() ?? DEFAULT_MOD_COLLECTION;
-        const updated = setActiveMod(addMod(collection, modConfig), modId);
-        await saveModCollection(updated);
-        logger.info('Shell', 'Mod saved successfully:', modId, modConfig.mod_name);
-        return modId;
-      } catch (err) {
-        logger.error('Shell', 'Mod generation failed:', err);
-      } finally {
-        setModGenerating(false);
+        modJson = JSON.parse(jsonStr);
+      } catch {
+        throw new Error('LLM returned invalid JSON. Try again or use a different model.');
       }
-    },
-    [],
-  );
+
+      const modId = generateModId();
+      const modConfig: ModConfig = {
+        id: modId,
+        mod_name: (modJson.name as string) || (modJson.identifier as string) || 'Generated Mod',
+        mod_name_en: (modJson.name as string) || (modJson.identifier as string) || 'Generated Mod',
+        mod_description: (modJson.description as string) || '',
+        display_desc: (modJson.display_desc as string) || '',
+        prologue: (modJson.prologue as string) || '',
+        opening_rec_replies: Array.isArray(modJson.opening_rec_replies)
+          ? (modJson.opening_rec_replies as string[]).map((r) => ({ reply_text: r }))
+          : [],
+        stage_count: Array.isArray(modJson.stages) ? modJson.stages.length : 0,
+        stages: Array.isArray(modJson.stages)
+          ? Object.fromEntries(
+              (
+                modJson.stages as Array<{
+                  name: string;
+                  description: string;
+                  targets: Array<{ id: number; description: string }>;
+                }>
+              ).map((s, i) => [
+                i,
+                {
+                  stage_index: i,
+                  stage_name: s.name || `Stage ${i + 1}`,
+                  stage_description: s.description || '',
+                  stage_targets: Object.fromEntries(
+                    (s.targets || []).map((t) => [t.id, t.description]),
+                  ),
+                },
+              ]),
+            )
+          : {},
+      };
+
+      const collection = loadModCollectionSync() ?? DEFAULT_MOD_COLLECTION;
+      const updated = setActiveMod(addMod(collection, modConfig), modId);
+      await saveModCollection(updated);
+      logger.info('Shell', 'Mod saved successfully:', modId, modConfig.mod_name);
+      return modId;
+    } catch (err) {
+      logger.error('Shell', 'Mod generation failed:', err);
+      throw err;
+    } finally {
+      setModGenerating(false);
+    }
+  }, []);
+
+  const [modGenError, setModGenError] = useState<string | null>(null);
 
   const handleUploadSubmit = useCallback(async () => {
     if (!uploadedFile) return;
     setExtracting(true);
     setExtractResult(null);
+    setModGenError(null);
     try {
       const result = await extractCard(uploadedFile);
       setExtractResult(result);
@@ -196,16 +200,13 @@ const Shell: React.FC = () => {
         setUploadedFile(null);
         setUploadOpen(false);
         setExtractResult(null);
-        setExtracting(false);
-
-        // Directly generate mod from character data (skip app extraction)
+        // extracting will be cleared in finally; generateMod shows its own modGenerating overlay
         const modId = await generateMod(result.manifest.character);
-        if (modId) {
-          // Store mod ID so ChatPanel auto-opens mod editor after reload
-          sessionStorage.setItem('openroom_edit_mod_id', modId);
-          window.location.reload();
-        }
+        window.dispatchEvent(new CustomEvent('open-mod-editor', { detail: { modId } }));
       }
+    } catch (err) {
+      logger.error('Shell', 'Upload submit error:', err);
+      setModGenError(err instanceof Error ? err.message : String(err));
     } finally {
       setExtracting(false);
     }
@@ -426,6 +427,21 @@ const Shell: React.FC = () => {
         </div>
       )}
 
+      {/* Mod generation error toast */}
+      {modGenError && !modGenerating && (
+        <div className={styles.uploadOverlay} onClick={() => setModGenError(null)}>
+          <div className={styles.uploadModal} onClick={(e) => e.stopPropagation()}>
+            <p className={styles.uploadError}>{modGenError}</p>
+            <button
+              className={`${styles.uploadSubmitBtn} ${styles.active}`}
+              onClick={() => setModGenError(null)}
+            >
+              OK
+            </button>
+          </div>
+        </div>
+      )}
+
       {/* Floating add button */}
       <button
         className={`${styles.addBtn} ${chatOpen ? styles.chatOpen : ''}`}
diff --git a/apps/webuiapps/src/lib/appGeneratorPlugin.ts b/apps/webuiapps/src/lib/appGeneratorPlugin.ts
new file mode 100644
index 0000000..ed1f2a4
--- /dev/null
+++ b/apps/webuiapps/src/lib/appGeneratorPlugin.ts
@@ -0,0 +1,430 @@
+/**
+ * App code generator plugin — uses Claude Agent SDK to concurrently generate
+ * VibeApp code for each app in a parsed character card manifest.
+ *
+ * POST /api/generate-apps  { apps: AppEntry[], concurrency?: number }
+ * Response: SSE stream with per-app progress events
+ */
+
+import type { Plugin } from 'vite';
+import { resolve } from 'path';
+import * as fs from 'fs';
+
+const LOG_PREFIX = '[appGenerator]';
+
+interface AppInput {
+  id: string;
+  name: string;
+  keywords?: string[];
+  format?: string;
+  tags: Array<{ name: string; type?: string; description?: string }>;
+  example: string;
+  resources: Record<string, string[]>;
+  scripts?: Array<{
+    name: string;
+    type: string;
+    findRegex: string;
+    replaceString: string;
+  }>;
+  imageTagPairs?: Array<{ tag: string; imgStyle: string }>;
+}
+
+interface LlmConfig {
+  apiKey?: string;
+  baseUrl?: string;
+  model?: string;
+  customHeaders?: string;
+}
+
+interface AppSummary {
+  scenario: string;
+  pageStructure: string;
+  englishName: string;
+}
+
+function toPascalCase(s: string): string {
+  return s
+    .split(/[-_\s]+/)
+    .map((w) => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase())
+    .join('');
+}
+
+function loadLlmConfig(configFile: string): LlmConfig {
+  try {
+    if (fs.existsSync(configFile)) {
+      const cfg = JSON.parse(fs.readFileSync(configFile, 'utf-8'));
+      const config = cfg.llm || {};
+      console.log(
+        `${LOG_PREFIX} LLM config loaded: baseUrl=${config.baseUrl}, model=${config.model}, apiKey=${config.apiKey ? '***' + config.apiKey.slice(-4) : 'MISSING'}`,
+      );
+      return config;
+    } else {
+      console.warn(`${LOG_PREFIX} LLM config file not found: ${configFile}`);
+    }
+  } catch (err) {
+    console.error(`${LOG_PREFIX} Failed to read LLM config:`, err);
+  }
+  return {};
+}
+
+function buildLlmHeaders(llmConfig: LlmConfig): Record<string, string> {
+  const headers: Record<string, string> = {
+    'Content-Type': 'application/json',
+    'x-api-key': llmConfig.apiKey || '',
+    'anthropic-version': '2023-06-01',
+  };
+  if (llmConfig.customHeaders) {
+    for (const pair of llmConfig.customHeaders.split(',')) {
+      const [hk, ...hv] = pair.split(':');
+      if (hk && hv.length) headers[hk.trim()] = hv.join(':').trim();
+    }
+  }
+  return headers;
+}
+
+async function summarizeApp(app: AppInput, llmConfig: LlmConfig): Promise<AppSummary> {
+  const apiKey = llmConfig.apiKey;
+  const baseUrl = llmConfig.baseUrl || 'https://api.anthropic.com';
+  const model = llmConfig.model || 'claude-sonnet-4-6';
+
+  if (!apiKey) {
+    console.warn(`${LOG_PREFIX} No API key for summarize, skipping LLM call for ${app.id}`);
+    return {
+      scenario: app.name,
+      pageStructure: 'No LLM config available',
+      englishName: toPascalCase(app.id),
+    };
+  }
+  console.log(`${LOG_PREFIX} Summarizing ${app.id}: POST ${baseUrl}/v1/messages (model=${model})`);
+
+  const summaryPrompt = `You are a UI/UX analysis expert. Analyze the following app's raw data and produce a structured description.
+
+## Constraints
+1. **No container dimensions**: Do not specify the app's overall width/height (e.g. 80vw, 70vh). The layout system handles this automatically.
+2. **No image references**: Do not mention any image files, image resources, or external URLs. Focus purely on the functional UI structure and interactions.
+3. **Inline tag semantics**: Do not list tag definitions separately. Instead, naturally describe what each data field means within the page structure description.
+
+## Input Data
+
+App Name: ${app.name}
+App ID: ${app.id}
+Trigger Keywords: ${JSON.stringify(app.keywords || [])}
+
+### Data Tags
+${(app.tags || []).map((t) => `<${t.name}>: ${t.description || t.type || ''}`).join(', ')}
+
+### Layout Scripts (HTML template reference)
+${
+  (app.scripts || [])
+    .filter((s) => s.type === 'layout')
+    .map((s) => `#### ${s.name}\n\`\`\`html\n${s.replaceString.slice(0, 1200)}\n\`\`\``)
+    .join('\n\n') || 'No layout scripts'
+}
+
+## Output Format
+Output strictly in the following format with no extra content:
+
+【英文名称】
+(A single PascalCase English name for the code directory, e.g. LiveStream, BattleArena, PhotoAlbum)
+
+【应用场景】
+(2-3 sentences describing what this app does, the user scenario, and core interactions)
+
+【页面结构】
+(Describe the page layout by region. Naturally integrate tag semantics into the description — e.g. "The chat area displays real-time danmaku messages, with paid messages highlighted" instead of separately defining <danmaku> and <paid>. Describe each region's components, data sources, and interactions. Do not specify container dimensions.)`;
+
+  try {
+    const llmRes = await fetch(`${baseUrl}/v1/messages`, {
+      method: 'POST',
+      headers: buildLlmHeaders(llmConfig),
+      body: JSON.stringify({
+        model,
+        max_tokens: 2048,
+        messages: [{ role: 'user', content: summaryPrompt }],
+      }),
+    });
+
+    if (!llmRes.ok) {
+      const errText = await llmRes.text();
+      console.error(
+        `${LOG_PREFIX} LLM summary failed for ${app.id}: status=${llmRes.status}`,
+        errText,
+      );
+      return { scenario: app.name, pageStructure: '', englishName: toPascalCase(app.id) };
+    }
+
+    const llmData = (await llmRes.json()) as {
+      content: Array<{ type: string; text?: string }>;
+    };
+    const text = llmData.content?.find((b) => b.type === 'text')?.text || '';
+    console.log(`${LOG_PREFIX} Summarize ${app.id} done, response length=${text.length}`);
+
+    const nameMatch = text.match(/【英文名称】\s*([\s\S]*?)(?=【应用场景】|$)/);
+    const scenarioMatch = text.match(/【应用场景】\s*([\s\S]*?)(?=【页面结构】|$)/);
+    const structureMatch = text.match(/【页面结构】\s*([\s\S]*?)$/);
+
+    const englishName = nameMatch?.[1]?.trim().replace(/[^a-zA-Z]/g, '') || toPascalCase(app.id);
+    return {
+      scenario: scenarioMatch?.[1]?.trim() || app.name,
+      pageStructure: structureMatch?.[1]?.trim() || '',
+      englishName,
+    };
+  } catch (err) {
+    console.error(`${LOG_PREFIX} LLM summary error for ${app.id}:`, err);
+    return { scenario: app.name, pageStructure: '', englishName: toPascalCase(app.id) };
+  }
+}
+
+function buildAgentPrompt(app: AppInput, summary: AppSummary): string {
+  return [
+    `Build a VibeApp named "${summary.englishName}" (original name: ${app.name}).`,
+    '',
+    `## Scenario`,
+    summary.scenario,
+    '',
+    `## Page Structure & Interactions`,
+    summary.pageStructure,
+    '',
+    `## Data Integration`,
+    `- Trigger keywords: ${(app.keywords || []).join(', ')}`,
+    `- Data format: json`,
+    '',
+    `## Important`,
+    `- Use responsive layout, do not hardcode container dimensions`,
+    `- Follow the VibeApp workflow and project conventions defined in CLAUDE.md`,
+  ].join('\n');
+}
+
+function getToolPreview(block: { name: string; input: Record<string, unknown> }): string {
+  const input = block.input;
+  switch (block.name) {
+    case 'Write':
+    case 'Edit':
+      return `file=${input.file_path || input.path || ''}`;
+    case 'Read':
+      return `file=${input.file_path || ''}`;
+    case 'Bash':
+      return `cmd=${String(input.command || '').slice(0, 80)}`;
+    case 'Glob':
+    case 'Grep':
+      return `pattern=${input.pattern || ''}`;
+    default:
+      return JSON.stringify(input).slice(0, 80);
+  }
+}
+
+interface AppGeneratorOptions {
+  llmConfigFile: string;
+  /** Absolute path to the monorepo root (cwd for Agent SDK). */
+  projectRoot: string;
+  /** Absolute path to the app's src directory (for watcher pause/resume). */
+  srcDir: string;
+}
+
+export function appGeneratorPlugin(options: AppGeneratorOptions): Plugin {
+  let viteServer: import('vite').ViteDevServer | null = null;
+
+  return {
+    name: 'app-generator',
+    configureServer(server) {
+      viteServer = server;
+      server.middlewares.use('/api/generate-apps', async (req, res) => {
+        if (req.method !== 'POST') {
+          res.writeHead(405, { 'Content-Type': 'application/json' });
+          res.end(JSON.stringify({ error: 'Method not allowed' }));
+          return;
+        }
+
+        const chunks: Buffer[] = [];
+        req.on('data', (chunk: Buffer) => chunks.push(chunk));
+        req.on('end', async () => {
+          let body: { apps: AppInput[]; concurrency?: number };
+          try {
+            body = JSON.parse(Buffer.concat(chunks).toString());
+          } catch {
+            res.writeHead(400, { 'Content-Type': 'application/json' });
+            res.end(JSON.stringify({ error: 'Invalid JSON' }));
+            return;
+          }
+
+          const { apps, concurrency = 3 } = body;
+          console.log(
+            `${LOG_PREFIX} Received request: ${apps?.length ?? 0} apps, concurrency=${concurrency}`,
+          );
+          if (!Array.isArray(apps) || apps.length === 0) {
+            console.error(`${LOG_PREFIX} Empty or invalid apps array`);
+            res.writeHead(400, { 'Content-Type': 'application/json' });
+            res.end(JSON.stringify({ error: 'apps array is required' }));
+            return;
+          }
+          console.log(
+            `${LOG_PREFIX} Apps to generate:`,
+            apps.map((a) => `${a.id}(${a.name})`).join(', '),
+          );
+
+          // SSE headers
+          res.writeHead(200, {
+            'Content-Type': 'text/event-stream',
+            'Cache-Control': 'no-cache',
+            Connection: 'keep-alive',
+          });
+
+          const sendEvent = (data: Record<string, unknown>) => {
+            res.write(`data: ${JSON.stringify(data)}\n\n`);
+          };
+
+          // Lazy-import the Agent SDK (ESM)
+          console.log(`${LOG_PREFIX} Loading Agent SDK...`);
+          let queryFn: (typeof import('@anthropic-ai/claude-agent-sdk'))['query'];
+          try {
+            const sdk = await import('@anthropic-ai/claude-agent-sdk');
+            queryFn = sdk.query;
+            console.log(`${LOG_PREFIX} Agent SDK loaded successfully`);
+          } catch (err) {
+            console.error(`${LOG_PREFIX} Failed to load Agent SDK:`, err);
+            sendEvent({ type: 'error', message: `Failed to load Agent SDK: ${err}` });
+            res.end();
+            return;
+          }
+
+          const projectRoot = options.projectRoot;
+          const llmConfig = loadLlmConfig(options.llmConfigFile);
+
+          // Pause Vite file watcher to prevent HMR during code generation
+          const srcGlob = resolve(options.srcDir, '**');
+          const watcher = viteServer?.watcher;
+          if (watcher) {
+            console.log(`${LOG_PREFIX} Unwatching src/** to prevent HMR during generation`);
+            watcher.unwatch(srcGlob);
+          }
+
+          const queue = [...apps];
+          const running = new Set<Promise<void>>();
+          const state = { closed: false };
+
+          req.on('close', () => {
+            state.closed = true;
+          });
+
+          const runOne = async (app: AppInput) => {
+            if (state.closed) return;
+            const appId = app.id;
+            console.log(`${LOG_PREFIX} -- Starting app: ${appId} --`);
+            sendEvent({ type: 'summarizing', appId, name: app.name });
+
+            try {
+              console.log(`${LOG_PREFIX} [${appId}] Step 1: Summarizing...`);
+              const summary = await summarizeApp(app, llmConfig);
+              if (state.closed) {
+                console.log(
+                  `${LOG_PREFIX} [${appId}] Aborted (client disconnected after summarize)`,
+                );
+                return;
+              }
+              console.log(
+                `${LOG_PREFIX} [${appId}] Step 1 done. Scenario: ${summary.scenario.slice(0, 60)}...`,
+              );
+              sendEvent({ type: 'summarized', appId, summary });
+
+              const appPascalName = summary.englishName;
+              const prompt = buildAgentPrompt(app, summary);
+              const sysPrompt = [
+                `You are building App ID: ${appPascalName}`,
+                `You may ONLY create and modify files under src/pages/${appPascalName}/.`,
+                `Do NOT read or modify any other App directories under src/pages/.`,
+                `Concurrent builds are in progress — other Apps are being generated simultaneously. Strictly limit your operations to your own scope.`,
+              ].join('\n');
+              console.log(
+                `${LOG_PREFIX} [${appId}] Step 2: Agent SDK query (englishName=${appPascalName}, prompt length=${prompt.length})`,
+              );
+
+              sendEvent({ type: 'started', appId });
+              let result = '';
+              let messageCount = 0;
+              for await (const message of queryFn({
+                prompt,
+                options: {
+                  cwd: projectRoot,
+                  allowedTools: ['Read', 'Write', 'Edit', 'Glob', 'Grep', 'Bash', 'Skill'],
+                  settingSources: ['user', 'project', 'local'],
+                  permissionMode: 'bypassPermissions',
+                  allowDangerouslySkipPermissions: true,
+                  maxTurns: 100,
+                  systemPrompt: sysPrompt,
+                },
+              })) {
+                messageCount++;
+                if (state.closed) {
+                  console.log(
+                    `${LOG_PREFIX} [${appId}] Aborted (client disconnected, after ${messageCount} messages)`,
+                  );
+                  return;
+                }
+                if ('result' in message) {
+                  result = message.result;
+                  console.log(
+                    `${LOG_PREFIX} [${appId}] -- Result (#${messageCount}): ${String(result).slice(0, 200)}`,
+                  );
+                } else {
+                  const msg = message as Record<string, unknown>;
+                  if (msg.type === 'assistant') {
+                    const content = msg.message && (msg.message as Record<string, unknown>).content;
+                    if (Array.isArray(content)) {
+                      for (const block of content) {
+                        if (block.type === 'tool_use') {
+                          const preview = getToolPreview(block);
+                          console.log(`${LOG_PREFIX} [${appId}] TOOL ${block.name}(${preview})`);
+                        } else if (block.type === 'text' && block.text) {
+                          console.log(
+                            `${LOG_PREFIX} [${appId}] TEXT ${String(block.text).slice(0, 150)}`,
+                          );
+                        }
+                      }
+                    }
+                  } else if (messageCount <= 3) {
+                    console.log(
+                      `${LOG_PREFIX} [${appId}] Message #${messageCount} type=${msg.type || Object.keys(msg).join(',')}`,
+                    );
+                  }
+                }
+              }
+              console.log(`${LOG_PREFIX} [${appId}] Completed after ${messageCount} messages`);
+              sendEvent({ type: 'completed', appId, result });
+            } catch (err) {
+              console.error(`${LOG_PREFIX} [${appId}] Error:`, err);
+              sendEvent({ type: 'error', appId, message: String(err) });
+            }
+          };
+
+          while (queue.length > 0 && !state.closed) {
+            while (running.size < concurrency && queue.length > 0) {
+              const app = queue.shift()!;
+              const p = runOne(app).then(() => {
+                running.delete(p);
+              });
+              running.add(p);
+            }
+            if (running.size > 0) {
+              await Promise.race(running);
+            }
+          }
+
+          await Promise.allSettled(Array.from(running));
+
+          if (watcher) {
+            console.log(`${LOG_PREFIX} Re-watching src/**`);
+            watcher.add(srcGlob);
+          }
+
+          if (!state.closed) {
+            console.log(`${LOG_PREFIX} -- All apps finished --`);
+            sendEvent({ type: 'done' });
+            res.end();
+          } else {
+            console.log(`${LOG_PREFIX} -- Stream closed by client before completion --`);
+          }
+        });
+      });
+    },
+  };
+}
diff --git a/apps/webuiapps/src/lib/cardExtractor.ts b/apps/webuiapps/src/lib/cardExtractor.ts
index 09c603e..195b545 100644
--- a/apps/webuiapps/src/lib/cardExtractor.ts
+++ b/apps/webuiapps/src/lib/cardExtractor.ts
@@ -261,7 +261,9 @@ function detectInputType(fileName: string, buffer: ArrayBuffer): 'png' | 'charx'
 
 // ── Card entry conversion ──────────────────────────────────────────
 
-function loadEntriesFromCard(card: Record<string, unknown>): InternalEntry[] {
+function loadEntriesFromCard(
+  card: Record<string, unknown>,
+): { entry: InternalEntry; index: number }[] {
   const data = (card['data'] || {}) as Record<string, unknown>;
   const charBook = (data['character_book'] || null) as Record<string, unknown> | null;
   if (!charBook) return [];
@@ -273,16 +275,18 @@ function loadEntriesFromCard(card: Record<string, unknown>): InternalEntry[] {
   if (!rawEntries) return [];
 
   return (rawEntries as Record<string, unknown>[]).map((entry, i) => ({
-    key: (entry['keys'] as string[]) || [],
-    keysecondary: (entry['secondary_keys'] as string[]) || [],
-    comment: (entry['comment'] as string) || (entry['name'] as string) || '',
-    content: (entry['content'] as string) || '',
-    constant: (entry['constant'] as boolean) || false,
-    selective: entry['selective'] !== undefined ? (entry['selective'] as boolean) : true,
-    disable: !(entry['enabled'] !== undefined ? (entry['enabled'] as boolean) : true),
-    order: (entry['insertion_order'] as number) || 100,
-    position: ((entry['extensions'] as Record<string, unknown>)?.['position'] as number) || 0,
-    _index: (entry['id'] as number) ?? i,
+    index: (entry['id'] as number) ?? i,
+    entry: {
+      key: (entry['keys'] as string[]) || [],
+      keysecondary: (entry['secondary_keys'] as string[]) || [],
+      comment: (entry['comment'] as string) || (entry['name'] as string) || '',
+      content: (entry['content'] as string) || '',
+      constant: (entry['constant'] as boolean) || false,
+      selective: entry['selective'] !== undefined ? (entry['selective'] as boolean) : true,
+      disable: !(entry['enabled'] !== undefined ? (entry['enabled'] as boolean) : true),
+      order: (entry['insertion_order'] as number) || 100,
+      position: ((entry['extensions'] as Record<string, unknown>)?.['position'] as number) || 0,
+    },
   }));
 }
 
@@ -469,7 +473,10 @@ function extractAppsFromEntries(entries: Record<string, InternalEntry>): AppEntr
 
     const id = commentToId(comment);
     if (!id) {
-      console.warn(`Warning: Empty app ID from comment "${comment}" at index ${index}, skipping.`);
+      logger.warn(
+        'extractApps',
+        `Empty app ID from comment "${comment}" at index ${index}, skipping.`,
+      );
       continue;
     }
 
@@ -977,11 +984,9 @@ export async function extractCard(file: File): Promise<ExtractResult> {
     // Convert entries
     const converted = loadEntriesFromCard(card);
     const entries: Record<string, InternalEntry> = {};
-    converted.forEach((e, i) => {
-      const idx = (e as unknown as Record<string, unknown>)['_index'] ?? i;
-      delete (e as unknown as Record<string, unknown>)['_index'];
-      entries[String(idx)] = e;
-    });
+    for (const { entry, index } of converted) {
+      entries[String(index)] = entry;
+    }
 
     // Extract apps and lore
     const apps = extractAppsFromEntries(entries);
diff --git a/apps/webuiapps/vite.config.ts b/apps/webuiapps/vite.config.ts
index 092911e..d2635e4 100644
--- a/apps/webuiapps/vite.config.ts
+++ b/apps/webuiapps/vite.config.ts
@@ -10,6 +10,7 @@ import * as fs from 'fs';
 import * as os from 'os';
 import { join } from 'path';
 import { generateLogFileName, createLogMiddleware } from './src/lib/logPlugin';
+import { appGeneratorPlugin } from './src/lib/appGeneratorPlugin';
 
 const LLM_CONFIG_FILE = resolve(os.homedir(), '.openroom', 'config.json');
 const SESSIONS_DIR = resolve(os.homedir(), '.openroom', 'sessions');
@@ -368,447 +369,6 @@ function jsonFilePlugin(name: string, apiPath: string, filePath: string): Plugin
   };
 }
 
-/**
- * App code generator plugin — uses Claude Agent SDK to concurrently generate
- * VibeApp code for each app in a parsed character card manifest.
- *
- * POST /api/generate-apps  { apps: AppEntry[], concurrency?: number }
- * Response: SSE stream with per-app progress events
- */
-function appGeneratorPlugin(): Plugin {
-  let viteServer: import('vite').ViteDevServer | null = null;
-
-  return {
-    name: 'app-generator',
-    configureServer(server) {
-      viteServer = server;
-      server.middlewares.use('/api/generate-apps', async (req, res) => {
-        if (req.method !== 'POST') {
-          res.writeHead(405, { 'Content-Type': 'application/json' });
-          res.end(JSON.stringify({ error: 'Method not allowed' }));
-          return;
-        }
-
-        const chunks: Buffer[] = [];
-        req.on('data', (chunk: Buffer) => chunks.push(chunk));
-        req.on('end', async () => {
-          let body: {
-            apps: Array<{
-              id: string;
-              name: string;
-              keywords?: string[];
-              format?: string;
-              tags: unknown[];
-              example: string;
-              resources: Record<string, string[]>;
-              scripts?: Array<{
-                name: string;
-                type: string;
-                findRegex: string;
-                replaceString: string;
-              }>;
-              imageTagPairs?: Array<{ tag: string; imgStyle: string }>;
-            }>;
-            concurrency?: number;
-          };
-          try {
-            body = JSON.parse(Buffer.concat(chunks).toString());
-          } catch {
-            res.writeHead(400, { 'Content-Type': 'application/json' });
-            res.end(JSON.stringify({ error: 'Invalid JSON' }));
-            return;
-          }
-
-          const { apps, concurrency = 3 } = body;
-          console.log(
-            `[appGenerator] Received request: ${apps?.length ?? 0} apps, concurrency=${concurrency}`,
-          );
-          if (!Array.isArray(apps) || apps.length === 0) {
-            console.error('[appGenerator] Empty or invalid apps array');
-            res.writeHead(400, { 'Content-Type': 'application/json' });
-            res.end(JSON.stringify({ error: 'apps array is required' }));
-            return;
-          }
-          console.log(
-            '[appGenerator] Apps to generate:',
-            apps.map((a) => `${a.id}(${a.name})`).join(', '),
-          );
-
-          // SSE headers
-          res.writeHead(200, {
-            'Content-Type': 'text/event-stream',
-            'Cache-Control': 'no-cache',
-            Connection: 'keep-alive',
-          });
-
-          const sendEvent = (data: Record<string, unknown>) => {
-            res.write(`data: ${JSON.stringify(data)}\n\n`);
-          };
-
-          // Lazy-import the Agent SDK (ESM)
-          console.log('[appGenerator] Loading Agent SDK...');
-          let queryFn: (typeof import('@anthropic-ai/claude-agent-sdk'))['query'];
-          try {
-            const sdk = await import('@anthropic-ai/claude-agent-sdk');
-            queryFn = sdk.query;
-            console.log('[appGenerator] Agent SDK loaded successfully');
-          } catch (err) {
-            console.error('[appGenerator] Failed to load Agent SDK:', err);
-            sendEvent({ type: 'error', message: `Failed to load Agent SDK: ${err}` });
-            res.end();
-            return;
-          }
-
-          const projectRoot = resolve(__dirname, '../..');
-
-          // ── Step 1: LLM pre-processing — summarize app raw data ──
-          // Read LLM config for API credentials
-          let llmConfig: {
-            apiKey?: string;
-            baseUrl?: string;
-            model?: string;
-            customHeaders?: string;
-          } = {};
-          try {
-            if (fs.existsSync(LLM_CONFIG_FILE)) {
-              const cfg = JSON.parse(fs.readFileSync(LLM_CONFIG_FILE, 'utf-8'));
-              llmConfig = cfg.llm || {};
-              console.log(
-                `[appGenerator] LLM config loaded: baseUrl=${llmConfig.baseUrl}, model=${llmConfig.model}, apiKey=${llmConfig.apiKey ? '***' + llmConfig.apiKey.slice(-4) : 'MISSING'}`,
-              );
-            } else {
-              console.warn(`[appGenerator] LLM config file not found: ${LLM_CONFIG_FILE}`);
-            }
-          } catch (err) {
-            console.error('[appGenerator] Failed to read LLM config:', err);
-          }
-
-          const summarizeApp = async (
-            app: (typeof apps)[number],
-          ): Promise<{ scenario: string; pageStructure: string; englishName: string }> => {
-            const apiKey = llmConfig.apiKey;
-            const baseUrl = llmConfig.baseUrl || 'https://api.anthropic.com';
-            const model = llmConfig.model || 'claude-sonnet-4-6';
-
-            if (!apiKey) {
-              console.warn(
-                `[appGenerator] No API key for summarize, skipping LLM call for ${app.id}`,
-              );
-              return {
-                scenario: app.name,
-                pageStructure: 'No LLM config available',
-                englishName: toPascalCase(app.id),
-              };
-            }
-            console.log(
-              `[appGenerator] Summarizing ${app.id}: POST ${baseUrl}/v1/messages (model=${model})`,
-            );
-
-            const summaryPrompt = `You are a UI/UX analysis expert. Analyze the following app's raw data and produce a structured description.
-
-## Constraints
-1. **No container dimensions**: Do not specify the app's overall width/height (e.g. 80vw, 70vh). The layout system handles this automatically.
-2. **No image references**: Do not mention any image files, image resources, or external URLs. Focus purely on the functional UI structure and interactions.
-3. **Inline tag semantics**: Do not list tag definitions separately. Instead, naturally describe what each data field means within the page structure description.
-
-## Input Data
-
-App Name: ${app.name}
-App ID: ${app.id}
-Trigger Keywords: ${JSON.stringify(app.keywords || [])}
-
-### Data Tags
-${(app.tags || []).map((t: { name: string; type?: string; description?: string }) => `<${t.name}>: ${t.description || t.type || ''}`).join(', ')}
-
-### Layout Scripts (HTML template reference)
-${
-  (app.scripts || [])
-    .filter((s: { type: string }) => s.type === 'layout')
-    .map(
-      (s: { name: string; replaceString: string }) =>
-        `#### ${s.name}\n\`\`\`html\n${s.replaceString.slice(0, 1200)}\n\`\`\``,
-    )
-    .join('\n\n') || 'No layout scripts'
-}
-
-## Output Format
-Output strictly in the following format with no extra content:
-
-【英文名称】
-(A single PascalCase English name for the code directory, e.g. LiveStream, BattleArena, PhotoAlbum)
-
-【应用场景】
-(2-3 sentences describing what this app does, the user scenario, and core interactions)
-
-【页面结构】
-(Describe the page layout by region. Naturally integrate tag semantics into the description — e.g. "The chat area displays real-time danmaku messages, with paid messages highlighted" instead of separately defining <danmaku> and <paid>. Describe each region's components, data sources, and interactions. Do not specify container dimensions.)`;
-
-            console.log(
-              `[appGenerator] [${app.id}] ═══ SUMMARIZE PROMPT ═══\n${summaryPrompt}\n═══ END SUMMARIZE PROMPT ═══`,
-            );
-
-            try {
-              const headers: Record<string, string> = {
-                'Content-Type': 'application/json',
-                'x-api-key': apiKey,
-                'anthropic-version': '2023-06-01',
-              };
-              // Apply custom headers if configured
-              if (llmConfig.customHeaders) {
-                for (const pair of llmConfig.customHeaders.split(',')) {
-                  const [hk, ...hv] = pair.split(':');
-                  if (hk && hv.length) headers[hk.trim()] = hv.join(':').trim();
-                }
-              }
-
-              const llmRes = await fetch(`${baseUrl}/v1/messages`, {
-                method: 'POST',
-                headers,
-                body: JSON.stringify({
-                  model,
-                  max_tokens: 2048,
-                  messages: [{ role: 'user', content: summaryPrompt }],
-                }),
-              });
-
-              if (!llmRes.ok) {
-                const errText = await llmRes.text();
-                console.error(
-                  `[appGenerator] LLM summary failed for ${app.id}: status=${llmRes.status}`,
-                  errText,
-                );
-                return { scenario: app.name, pageStructure: '', englishName: toPascalCase(app.id) };
-              }
-
-              const llmData = (await llmRes.json()) as {
-                content: Array<{ type: string; text?: string }>;
-              };
-              const text =
-                llmData.content?.find((b: { type: string }) => b.type === 'text')?.text || '';
-              console.log(
-                `[appGenerator] Summarize ${app.id} done, response length=${text.length}`,
-              );
-              console.log(
-                `[appGenerator] [${app.id}] ═══ SUMMARIZE RESPONSE ═══\n${text}\n═══ END SUMMARIZE RESPONSE ═══`,
-              );
-
-              const nameMatch = text.match(/【英文名称】\s*([\s\S]*?)(?=【应用场景】|$)/);
-              const scenarioMatch = text.match(/【应用场景】\s*([\s\S]*?)(?=【页面结构】|$)/);
-              const structureMatch = text.match(/【页面结构】\s*([\s\S]*?)$/);
-
-              const englishName =
-                nameMatch?.[1]?.trim().replace(/[^a-zA-Z]/g, '') || toPascalCase(app.id);
-              const result = {
-                scenario: scenarioMatch?.[1]?.trim() || app.name,
-                pageStructure: structureMatch?.[1]?.trim() || '',
-                englishName,
-              };
-              console.log(
-                `[appGenerator] Summarize ${app.id} parsed: englishName=${result.englishName}, scenario=${result.scenario.slice(0, 80)}...`,
-              );
-              return result;
-            } catch (err) {
-              console.error(`[appGenerator] LLM summary error for ${app.id}:`, err);
-              return { scenario: app.name, pageStructure: '', englishName: toPascalCase(app.id) };
-            }
-          };
-
-          // ── Step 2: Build CC prompt from summarized data ──
-          const buildPrompt = (
-            app: (typeof apps)[number],
-            summary: { scenario: string; pageStructure: string; englishName: string },
-          ) => {
-            return [
-              `Build a VibeApp named "${summary.englishName}" (original name: ${app.name}).`,
-              '',
-              `## Scenario`,
-              summary.scenario,
-              '',
-              `## Page Structure & Interactions`,
-              summary.pageStructure,
-              '',
-              `## Data Integration`,
-              `- Trigger keywords: ${(app.keywords || []).join(', ')}`,
-              `- Data format: json`,
-              '',
-              `## Important`,
-              `- Use responsive layout, do not hardcode container dimensions`,
-              `- Follow the VibeApp workflow and project conventions defined in CLAUDE.md`,
-            ].join('\n');
-          };
-
-          // Concurrency-limited execution
-          // Pause Vite file watcher on entire src/ to prevent HMR during code generation
-          // (agents edit src/pages/*, src/routers/*, src/lib/* etc.)
-          const srcGlob = resolve(__dirname, 'src/**');
-          const watcher = viteServer?.watcher;
-          if (watcher) {
-            console.log('[appGenerator] Unwatching src/** to prevent HMR during generation');
-            watcher.unwatch(srcGlob);
-          }
-
-          const queue = [...apps];
-          const running = new Set<Promise<void>>();
-          const state = { closed: false };
-
-          req.on('close', () => {
-            state.closed = true;
-          });
-
-          const runOne = async (app: (typeof apps)[number]) => {
-            if (state.closed) return;
-            const appId = app.id;
-            console.log(`[appGenerator] ── Starting app: ${appId} ──`);
-            sendEvent({ type: 'summarizing', appId, name: app.name });
-
-            try {
-              // Pre-process: summarize app data via LLM
-              console.log(`[appGenerator] [${appId}] Step 1: Summarizing...`);
-              const summary = await summarizeApp(app);
-              if (state.closed) {
-                console.log(
-                  `[appGenerator] [${appId}] Aborted (client disconnected after summarize)`,
-                );
-                return;
-              }
-              console.log(
-                `[appGenerator] [${appId}] Step 1 done. Scenario: ${summary.scenario.slice(0, 60)}...`,
-              );
-              sendEvent({ type: 'summarized', appId, summary });
-
-              const appPascalName = summary.englishName;
-              const prompt = buildPrompt(app, summary);
-              const sysPrompt = [
-                `You are building App ID: ${appPascalName}`,
-                `You may ONLY create and modify files under src/pages/${appPascalName}/.`,
-                `Do NOT read or modify any other App directories under src/pages/.`,
-                `Concurrent builds are in progress — other Apps are being generated simultaneously. Strictly limit your operations to your own scope.`,
-              ].join('\n');
-              console.log(
-                `[appGenerator] [${appId}] Step 2: Agent SDK query (englishName=${appPascalName}, prompt length=${prompt.length}, cwd=${projectRoot})`,
-              );
-              console.log(
-                `[appGenerator] [${appId}] ═══ FULL PROMPT ═══\n${prompt}\n═══ END PROMPT ═══`,
-              );
-              console.log(
-                `[appGenerator] [${appId}] ═══ SYSTEM PROMPT ═══\n${sysPrompt}\n═══ END SYSTEM PROMPT ═══`,
-              );
-
-              sendEvent({ type: 'started', appId });
-              let result = '';
-              let messageCount = 0;
-              for await (const message of queryFn({
-                prompt,
-                options: {
-                  cwd: projectRoot,
-                  allowedTools: ['Read', 'Write', 'Edit', 'Glob', 'Grep', 'Bash', 'Skill'],
-                  settingSources: ['user', 'project', 'local'],
-                  permissionMode: 'bypassPermissions',
-                  allowDangerouslySkipPermissions: true,
-                  maxTurns: 100,
-                  systemPrompt: sysPrompt,
-                },
-              })) {
-                messageCount++;
-                if (state.closed) {
-                  console.log(
-                    `[appGenerator] [${appId}] Aborted (client disconnected during query, after ${messageCount} messages)`,
-                  );
-                  return;
-                }
-                if ('result' in message) {
-                  result = message.result;
-                  console.log(
-                    `[appGenerator] [${appId}] ── Result (#${messageCount}): ${String(result).slice(0, 200)}`,
-                  );
-                } else {
-                  // Log tool calls and assistant text
-                  const msg = message as Record<string, unknown>;
-                  if (msg.type === 'assistant') {
-                    const content = msg.message && (msg.message as Record<string, unknown>).content;
-                    if (Array.isArray(content)) {
-                      for (const block of content) {
-                        if (block.type === 'tool_use') {
-                          const input = block.input as Record<string, unknown>;
-                          const preview =
-                            block.name === 'Write' || block.name === 'Edit'
-                              ? `file=${input.file_path || input.path || ''}`
-                              : block.name === 'Read'
-                                ? `file=${input.file_path || ''}`
-                                : block.name === 'Bash'
-                                  ? `cmd=${String(input.command || '').slice(0, 80)}`
-                                  : block.name === 'Glob'
-                                    ? `pattern=${input.pattern || ''}`
-                                    : block.name === 'Grep'
-                                      ? `pattern=${input.pattern || ''}`
-                                      : JSON.stringify(input).slice(0, 80);
-                          console.log(`[appGenerator] [${appId}] 🔧 ${block.name}(${preview})`);
-                        } else if (block.type === 'text' && block.text) {
-                          console.log(
-                            `[appGenerator] [${appId}] 💬 ${String(block.text).slice(0, 150)}`,
-                          );
-                        }
-                      }
-                    }
-                  } else {
-                    if (messageCount <= 3) {
-                      console.log(
-                        `[appGenerator] [${appId}] Message #${messageCount} type=${msg.type || Object.keys(msg).join(',')}`,
-                      );
-                    }
-                  }
-                }
-              }
-              console.log(`[appGenerator] [${appId}] ✅ Completed after ${messageCount} messages`);
-              sendEvent({ type: 'completed', appId, result });
-            } catch (err) {
-              console.error(`[appGenerator] [${appId}] ❌ Error:`, err);
-              sendEvent({ type: 'error', appId, message: String(err) });
-            }
-          };
-
-          while (queue.length > 0 && !state.closed) {
-            while (running.size < concurrency && queue.length > 0) {
-              const app = queue.shift()!;
-              const p = runOne(app).then(() => {
-                running.delete(p);
-              });
-              running.add(p);
-            }
-            if (running.size > 0) {
-              await Promise.race(running);
-            }
-          }
-
-          // Wait for remaining
-          await Promise.allSettled(Array.from(running));
-
-          // Resume Vite file watcher on src/pages (reload deferred to UI on modal close)
-          if (watcher) {
-            console.log('[appGenerator] Re-watching src/pages/**');
-            watcher.add(srcGlob);
-          }
-
-          if (!state.closed) {
-            console.log('[appGenerator] ── All apps finished, sending done event ──');
-            sendEvent({ type: 'done' });
-            res.end();
-          } else {
-            console.log('[appGenerator] ── Stream closed by client before completion ──');
-          }
-        });
-      });
-    },
-  };
-}
-
-function toPascalCase(s: string): string {
-  return s
-    .split(/[-_\s]+/)
-    .map((w) => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase())
-    .join('');
-}
-
 const config = ({ mode }: ConfigEnv): UserConfigExport => {
   const env = loadEnv(mode, process.cwd(), '');
   const isProd = env.NODE_ENV === 'production';
@@ -838,7 +398,11 @@ const config = ({ mode }: ConfigEnv): UserConfigExport => {
     llmProxyPlugin(),
     jsonFilePlugin('characters', '/api/characters', CHARACTERS_FILE),
     jsonFilePlugin('mods', '/api/mods', MODS_FILE),
-    appGeneratorPlugin(),
+    appGeneratorPlugin({
+      llmConfigFile: LLM_CONFIG_FILE,
+      projectRoot: resolve(__dirname, '../..'),
+      srcDir: resolve(__dirname, 'src'),
+    }),
     react(),
     ...(skipLegacy
       ? []
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8f2479d..7499ecf 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -189,19 +189,25 @@ importers:
 
   apps/webuiapps:
     dependencies:
-      '@anthropic-ai/claude-agent-sdk':
-        specifier: ^0.2.72
-        version: 0.2.72(zod@4.3.6)
       framer-motion:
         specifier: ^12.34.0
         version: 12.34.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       jszip:
         specifier: ^3.10.1
         version: 3.10.1
+      react-markdown:
+        specifier: ^10.1.0
+        version: 10.1.0(@types/react@18.3.27)(react@18.3.1)
+      rehype-raw:
+        specifier: ^7.0.0
+        version: 7.0.0
+      remark-gfm:
+        specifier: ^4.0.1
+        version: 4.0.1
     devDependencies:
-      '@types/jszip':
-        specifier: ^3.4.1
-        version: 3.4.1
+      '@anthropic-ai/claude-agent-sdk':
+        specifier: ^0.2.72
+        version: 0.2.72(zod@4.3.6)
       '@vitest/coverage-istanbul':
         specifier: ^1.6.1
         version: 1.6.1(vitest@1.6.1(@types/node@20.19.31)(happy-dom@14.12.3)(jsdom@25.0.1)(less@4.5.1)(sass@1.97.3)(terser@5.46.0))
@@ -1927,10 +1933,6 @@ packages:
   '@types/json5@0.0.29':
     resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
 
-  '@types/jszip@3.4.1':
-    resolution: {integrity: sha512-TezXjmf3lj+zQ651r6hPqvSScqBLvyPI9FxdXBqpEwBijNGQ2NXpaFW/7joGzveYkKQUil7iiDHLo6LV71Pc0A==}
-    deprecated: This is a stub types definition. jszip provides its own type definitions, so you do not need this installed.
-
   '@types/linkify-it@3.0.5':
     resolution: {integrity: sha512-yg6E+u0/+Zjva+buc3EIb+29XEg4wltq7cSmd4Uc2EE/1nUVmxyzpX6gUXD0V8jIrG0r7YeOGVIbYRkxeooCtw==}
 
@@ -2921,6 +2923,10 @@ packages:
     resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
     engines: {node: '>=10'}
 
+  escape-string-regexp@5.0.0:
+    resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
+    engines: {node: '>=12'}
+
   eslint-config-prettier@9.1.2:
     resolution: {integrity: sha512-iI1f+D2ViGn+uvv5HuHVUamg8ll4tN+JRHGc6IJi4TP9Kl976C57fzPXgseXNs8v0iA8aSJpHsTWjDb9QJamGQ==}
     hasBin: true
@@ -3346,12 +3352,27 @@ packages:
     resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
     engines: {node: '>= 0.4'}
 
+  hast-util-from-parse5@8.0.3:
+    resolution: {integrity: sha512-3kxEVkEKt0zvcZ3hCRYI8rqrgwtlIOFMWkbclACvjlDw8Li9S2hk/d51OI0nr/gIpdMHNepwgOKqZ/sy0Clpyg==}
+
+  hast-util-parse-selector@4.0.0:
+    resolution: {integrity: sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==}
+
+  hast-util-raw@9.1.0:
+    resolution: {integrity: sha512-Y8/SBAHkZGoNkpzqqfCldijcuUKh7/su31kEBp67cFY09Wy0mTRgtsLYsiIxMJxlu0f6AA5SUTbDR8K0rxnbUw==}
+
   hast-util-to-jsx-runtime@2.3.6:
     resolution: {integrity: sha512-zl6s8LwNyo1P9uw+XJGvZtdFF1GdAkOg8ujOw+4Pyb76874fLps4ueHXDhXWdk6YHQ6OgUtinliG7RsYvCbbBg==}
 
+  hast-util-to-parse5@8.0.1:
+    resolution: {integrity: sha512-MlWT6Pjt4CG9lFCjiz4BH7l9wmrMkfkJYCxFwKQic8+RTZgWPuWxwAfjJElsXkex7DJjfSJsQIt931ilUgmwdA==}
+
   hast-util-whitespace@3.0.0:
     resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==}
 
+  hastscript@9.0.1:
+    resolution: {integrity: sha512-g7df9rMFX/SPi34tyGCyUBREQoKkapwdY/T04Qn9TDWfHhAYt4/I0gMVirzK5wEzeUqIjEB+LXC/ypb7Aqno5w==}
+
   hls.js@1.6.15:
     resolution: {integrity: sha512-E3a5VwgXimGHwpRGV+WxRTKeSp2DW5DI5MWv34ulL3t5UNmyJWCQ1KmLEHbYzcfThfXG8amBL+fCYPneGHC4VA==}
 
@@ -3375,6 +3396,9 @@ packages:
   html-url-attributes@3.0.1:
     resolution: {integrity: sha512-ol6UPyBWqsrO6EJySPz2O7ZSr856WDrEzM5zMqp+FJJLGMW35cLYmmZnl0vztAZxRUoNZJFTCohfjuIJ8I4QBQ==}
 
+  html-void-elements@3.0.0:
+    resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==}
+
   http-proxy-agent@7.0.2:
     resolution: {integrity: sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==}
     engines: {node: '>= 14'}
@@ -3925,13 +3949,37 @@ packages:
     resolution: {integrity: sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==}
     hasBin: true
 
+  markdown-table@3.0.4:
+    resolution: {integrity: sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==}
+
   math-intrinsics@1.1.0:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
 
+  mdast-util-find-and-replace@3.0.2:
+    resolution: {integrity: sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg==}
+
   mdast-util-from-markdown@2.0.3:
     resolution: {integrity: sha512-W4mAWTvSlKvf8L6J+VN9yLSqQ9AOAAvHuoDAmPkz4dHf553m5gVj2ejadHJhoJmcmxEnOv6Pa8XJhpxE93kb8Q==}
 
+  mdast-util-gfm-autolink-literal@2.0.1:
+    resolution: {integrity: sha512-5HVP2MKaP6L+G6YaxPNjuL0BPrq9orG3TsrZ9YXbA3vDw/ACI4MEsnoDpn6ZNm7GnZgtAcONJyPhOP8tNJQavQ==}
+
+  mdast-util-gfm-footnote@2.1.0:
+    resolution: {integrity: sha512-sqpDWlsHn7Ac9GNZQMeUzPQSMzR6Wv0WKRNvQRg0KqHh02fpTz69Qc1QSseNX29bhz1ROIyNyxExfawVKTm1GQ==}
+
+  mdast-util-gfm-strikethrough@2.0.0:
+    resolution: {integrity: sha512-mKKb915TF+OC5ptj5bJ7WFRPdYtuHv0yTRxK2tJvi+BDqbkiG7h7u/9SI89nRAYcmap2xHQL9D+QG/6wSrTtXg==}
+
+  mdast-util-gfm-table@2.0.0:
+    resolution: {integrity: sha512-78UEvebzz/rJIxLvE7ZtDd/vIQ0RHv+3Mh5DR96p7cS7HsBhYIICDBCu8csTNWNO6tBWfqXPWekRuj2FNOGOZg==}
+
+  mdast-util-gfm-task-list-item@2.0.0:
+    resolution: {integrity: sha512-IrtvNvjxC1o06taBAVJznEnkiHxLFTzgonUdy8hzFVeDun0uTjxxrRGVaNFqkU1wJR3RBPEfsxmU6jDWPofrTQ==}
+
+  mdast-util-gfm@3.1.0:
+    resolution: {integrity: sha512-0ulfdQOM3ysHhCJ1p06l0b0VKlhU0wuQs3thxZQagjcjPrlFRqY215uZGHHJan9GEAXd9MbfPjFJz+qMkVR6zQ==}
+
   mdast-util-mdx-expression@2.0.1:
     resolution: {integrity: sha512-J6f+9hUp+ldTZqKRSg7Vw5V6MqjATc+3E4gf3CFNcuZNWD8XdyI6zQ8GqH7f8169MM6P7hMBRDVGnn7oHB9kXQ==}
 
@@ -3982,6 +4030,27 @@ packages:
   micromark-core-commonmark@2.0.3:
     resolution: {integrity: sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==}
 
+  micromark-extension-gfm-autolink-literal@2.1.0:
+    resolution: {integrity: sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw==}
+
+  micromark-extension-gfm-footnote@2.1.0:
+    resolution: {integrity: sha512-/yPhxI1ntnDNsiHtzLKYnE3vf9JZ6cAisqVDauhp4CEHxlb4uoOTxOCJ+9s51bIB8U1N1FJ1RXOKTIlD5B/gqw==}
+
+  micromark-extension-gfm-strikethrough@2.1.0:
+    resolution: {integrity: sha512-ADVjpOOkjz1hhkZLlBiYA9cR2Anf8F4HqZUO6e5eDcPQd0Txw5fxLzzxnEkSkfnD0wziSGiv7sYhk/ktvbf1uw==}
+
+  micromark-extension-gfm-table@2.1.1:
+    resolution: {integrity: sha512-t2OU/dXXioARrC6yWfJ4hqB7rct14e8f7m0cbI5hUmDyyIlwv5vEtooptH8INkbLzOatzKuVbQmAYcbWoyz6Dg==}
+
+  micromark-extension-gfm-tagfilter@2.0.0:
+    resolution: {integrity: sha512-xHlTOmuCSotIA8TW1mDIM6X2O1SiX5P9IuDtqGonFhEK0qgRI4yeC6vMxEV2dgyr2TiD+2PQ10o+cOhdVAcwfg==}
+
+  micromark-extension-gfm-task-list-item@2.1.0:
+    resolution: {integrity: sha512-qIBZhqxqI6fjLDYFTBIa4eivDMnP+OZqsNwmQ3xNLE4Cxwc+zfQEfbs6tzAo2Hjq+bh6q5F+Z8/cksrLFYWQQw==}
+
+  micromark-extension-gfm@3.0.0:
+    resolution: {integrity: sha512-vsKArQsicm7t0z2GugkCKtZehqUm31oeGBV/KVSorWSy8ZlNAv7ytjFhvaryUiCUJYqs+NoE6AFhpQvBTM6Q4w==}
+
   micromark-factory-destination@2.0.1:
     resolution: {integrity: sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA==}
 
@@ -4639,12 +4708,21 @@ packages:
     resolution: {integrity: sha512-NZQZdC5wOE/H3UT28fVGL+ikOZcEzfMGk/c3iN9UGxzWHMa1op7274oyiUVrAG4B2EuFhus8SvkaYnhvW92p9Q==}
     hasBin: true
 
+  rehype-raw@7.0.0:
+    resolution: {integrity: sha512-/aE8hCfKlQeA8LmyeyQvQF3eBiLRGNlfBJEvWH7ivp9sBqs7TNqBL5X3v157rM4IFETqDnIOO+z5M/biZbo9Ww==}
+
+  remark-gfm@4.0.1:
+    resolution: {integrity: sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==}
+
   remark-parse@11.0.0:
     resolution: {integrity: sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==}
 
   remark-rehype@11.1.2:
     resolution: {integrity: sha512-Dh7l57ianaEoIpzbp0PC9UKAdCSVklD8E5Rpw7ETfbTl3FqcOOgq5q2LVDhgGCkaBv7p24JXikPdvhhmHvKMsw==}
 
+  remark-stringify@11.0.0:
+    resolution: {integrity: sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==}
+
   require-directory@2.1.1:
     resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
     engines: {node: '>=0.10.0'}
@@ -5337,6 +5415,9 @@ packages:
   validate-npm-package-license@3.0.4:
     resolution: {integrity: sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==}
 
+  vfile-location@5.0.3:
+    resolution: {integrity: sha512-5yXvWDEgqeiYiBe1lbxYF7UMAIm/IcopxMHrMQDq3nvKcjPKIhZklUKL+AE7J7uApI4kwe2snsK+eI6UTj9EHg==}
+
   vfile-message@4.0.3:
     resolution: {integrity: sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==}
 
@@ -5447,6 +5528,9 @@ packages:
     resolution: {integrity: sha512-Zn5uXdcFNIA1+1Ei5McRd+iRzfhENPCe7LeABkJtNulSxjma+l7ltNx55BWZkRlwRnpOgHqxnjyaDgJnNXnqzg==}
     engines: {node: '>=10.13.0'}
 
+  web-namespaces@2.0.1:
+    resolution: {integrity: sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==}
+
   webgl-constants@1.1.1:
     resolution: {integrity: sha512-LkBXKjU5r9vAW7Gcu3T5u+5cvSvh5WwINdr0C+9jpzVB41cjQAP5ePArDtk/WHYdVj0GefCgM73BA7FlIiNtdg==}
 
@@ -7376,10 +7460,6 @@ snapshots:
 
   '@types/json5@0.0.29': {}
 
-  '@types/jszip@3.4.1':
-    dependencies:
-      jszip: 3.10.1
-
   '@types/linkify-it@3.0.5': {}
 
   '@types/linkify-it@5.0.0': {}
@@ -8534,6 +8614,8 @@ snapshots:
 
   escape-string-regexp@4.0.0: {}
 
+  escape-string-regexp@5.0.0: {}
+
   eslint-config-prettier@9.1.2(eslint@8.57.1):
     dependencies:
       eslint: 8.57.1
@@ -9023,6 +9105,37 @@ snapshots:
     dependencies:
       function-bind: 1.1.2
 
+  hast-util-from-parse5@8.0.3:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/unist': 3.0.3
+      devlop: 1.1.0
+      hastscript: 9.0.1
+      property-information: 7.1.0
+      vfile: 6.0.3
+      vfile-location: 5.0.3
+      web-namespaces: 2.0.1
+
+  hast-util-parse-selector@4.0.0:
+    dependencies:
+      '@types/hast': 3.0.4
+
+  hast-util-raw@9.1.0:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/unist': 3.0.3
+      '@ungap/structured-clone': 1.3.0
+      hast-util-from-parse5: 8.0.3
+      hast-util-to-parse5: 8.0.1
+      html-void-elements: 3.0.0
+      mdast-util-to-hast: 13.2.1
+      parse5: 7.3.0
+      unist-util-position: 5.0.0
+      unist-util-visit: 5.1.0
+      vfile: 6.0.3
+      web-namespaces: 2.0.1
+      zwitch: 2.0.4
+
   hast-util-to-jsx-runtime@2.3.6:
     dependencies:
       '@types/estree': 1.0.8
@@ -9043,10 +9156,28 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  hast-util-to-parse5@8.0.1:
+    dependencies:
+      '@types/hast': 3.0.4
+      comma-separated-tokens: 2.0.3
+      devlop: 1.1.0
+      property-information: 7.1.0
+      space-separated-tokens: 2.0.2
+      web-namespaces: 2.0.1
+      zwitch: 2.0.4
+
   hast-util-whitespace@3.0.0:
     dependencies:
       '@types/hast': 3.0.4
 
+  hastscript@9.0.1:
+    dependencies:
+      '@types/hast': 3.0.4
+      comma-separated-tokens: 2.0.3
+      hast-util-parse-selector: 4.0.0
+      property-information: 7.1.0
+      space-separated-tokens: 2.0.2
+
   hls.js@1.6.15: {}
 
   hosted-git-info@2.8.9: {}
@@ -9067,6 +9198,8 @@ snapshots:
 
   html-url-attributes@3.0.1: {}
 
+  html-void-elements@3.0.0: {}
+
   http-proxy-agent@7.0.2:
     dependencies:
       agent-base: 7.1.4
@@ -9634,8 +9767,17 @@ snapshots:
       punycode.js: 2.3.1
       uc.micro: 2.1.0
 
+  markdown-table@3.0.4: {}
+
   math-intrinsics@1.1.0: {}
 
+  mdast-util-find-and-replace@3.0.2:
+    dependencies:
+      '@types/mdast': 4.0.4
+      escape-string-regexp: 5.0.0
+      unist-util-is: 6.0.1
+      unist-util-visit-parents: 6.0.2
+
   mdast-util-from-markdown@2.0.3:
     dependencies:
       '@types/mdast': 4.0.4
@@ -9653,6 +9795,63 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  mdast-util-gfm-autolink-literal@2.0.1:
+    dependencies:
+      '@types/mdast': 4.0.4
+      ccount: 2.0.1
+      devlop: 1.1.0
+      mdast-util-find-and-replace: 3.0.2
+      micromark-util-character: 2.1.1
+
+  mdast-util-gfm-footnote@2.1.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.3
+      mdast-util-to-markdown: 2.1.2
+      micromark-util-normalize-identifier: 2.0.1
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm-strikethrough@2.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-from-markdown: 2.0.3
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm-table@2.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      markdown-table: 3.0.4
+      mdast-util-from-markdown: 2.0.3
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm-task-list-item@2.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.3
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm@3.1.0:
+    dependencies:
+      mdast-util-from-markdown: 2.0.3
+      mdast-util-gfm-autolink-literal: 2.0.1
+      mdast-util-gfm-footnote: 2.1.0
+      mdast-util-gfm-strikethrough: 2.0.0
+      mdast-util-gfm-table: 2.0.0
+      mdast-util-gfm-task-list-item: 2.0.0
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
   mdast-util-mdx-expression@2.0.1:
     dependencies:
       '@types/estree-jsx': 1.0.5
@@ -9772,6 +9971,64 @@ snapshots:
       micromark-util-symbol: 2.0.1
       micromark-util-types: 2.0.2
 
+  micromark-extension-gfm-autolink-literal@2.1.0:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-sanitize-uri: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-footnote@2.1.0:
+    dependencies:
+      devlop: 1.1.0
+      micromark-core-commonmark: 2.0.3
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-sanitize-uri: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-strikethrough@2.1.0:
+    dependencies:
+      devlop: 1.1.0
+      micromark-util-chunked: 2.0.1
+      micromark-util-classify-character: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-table@2.1.1:
+    dependencies:
+      devlop: 1.1.0
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-tagfilter@2.0.0:
+    dependencies:
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-task-list-item@2.1.0:
+    dependencies:
+      devlop: 1.1.0
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm@3.0.0:
+    dependencies:
+      micromark-extension-gfm-autolink-literal: 2.1.0
+      micromark-extension-gfm-footnote: 2.1.0
+      micromark-extension-gfm-strikethrough: 2.1.0
+      micromark-extension-gfm-table: 2.1.1
+      micromark-extension-gfm-tagfilter: 2.0.0
+      micromark-extension-gfm-task-list-item: 2.1.0
+      micromark-util-combine-extensions: 2.0.1
+      micromark-util-types: 2.0.2
+
   micromark-factory-destination@2.0.1:
     dependencies:
       micromark-util-character: 2.1.1
@@ -10529,6 +10786,23 @@ snapshots:
     dependencies:
       jsesc: 3.1.0
 
+  rehype-raw@7.0.0:
+    dependencies:
+      '@types/hast': 3.0.4
+      hast-util-raw: 9.1.0
+      vfile: 6.0.3
+
+  remark-gfm@4.0.1:
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-gfm: 3.1.0
+      micromark-extension-gfm: 3.0.0
+      remark-parse: 11.0.0
+      remark-stringify: 11.0.0
+      unified: 11.0.5
+    transitivePeerDependencies:
+      - supports-color
+
   remark-parse@11.0.0:
     dependencies:
       '@types/mdast': 4.0.4
@@ -10546,6 +10820,12 @@ snapshots:
       unified: 11.0.5
       vfile: 6.0.3
 
+  remark-stringify@11.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-to-markdown: 2.1.2
+      unified: 11.0.5
+
   require-directory@2.1.1: {}
 
   require-from-string@2.0.2: {}
@@ -11317,6 +11597,11 @@ snapshots:
       spdx-correct: 3.2.0
       spdx-expression-parse: 3.0.1
 
+  vfile-location@5.0.3:
+    dependencies:
+      '@types/unist': 3.0.3
+      vfile: 6.0.3
+
   vfile-message@4.0.3:
     dependencies:
       '@types/unist': 3.0.3
@@ -11418,6 +11703,8 @@ snapshots:
       glob-to-regexp: 0.4.1
       graceful-fs: 4.2.11
 
+  web-namespaces@2.0.1: {}
+
   webgl-constants@1.1.1: {}
 
   webgl-sdf-generator@1.1.1: {}