Show usernames in chat

src/games/storywriter/assets/settings-modal.module.css

@@ -15,7 +15,7 @@
     background: var(--bg);
     border-radius: 8px;
     width: 90%;
-    max-width: 720px;
+    max-width: 960px;
     height: 80vh;
     display: flex;
     flex-direction: column;
@@ -182,6 +182,24 @@
     flex: 1;
 }
 
+.iconButton {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 8px;
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    background: var(--bg);
+    color: var(--text);
+    cursor: pointer;
+    font-size: 16px;
+    min-width: 40px;
+
+    &:hover {
+        background: var(--bg-hover);
+    }
+}
+
 .divider {
     height: 1px;
     background: var(--border);

src/games/storywriter/components/chat-sidebar.tsx

@@ -2,7 +2,7 @@ import { ContentEditable } from "@common/components/ContentEditable";
 import { highlight } from "@common/highlight";
 import { useInputState } from "@common/hooks/useInputState";
 import clsx from "clsx";
-import { Check, ChevronsRight, Edit2, RefreshCw, Sparkles, Trash2, X } from "lucide-preact";
+import { Check, ChevronsRight, Edit2, GitFork, RefreshCw, Sparkles, Trash2, X } from "lucide-preact";
 import { useCallback, useEffect, useMemo, useRef, useState } from "preact/hooks";
 import styles from '../assets/chat-sidebar.module.css';
 import sidebarStyles from '../assets/sidebar.module.css';
@@ -13,7 +13,6 @@ import { Tools } from "../utils/tools";
 import { useChapterSummarization } from "../utils/useChapterSummarization";
 import { Sidebar } from "./sidebar";
 
-const CONTINUE_PROMPT = "Continue the story naturally.\nUse `edit_text` tool in append mode to add new text to the story.\nWait for the approval after adding.\nNote: added text could be cropped due to limit, do not make any attempts to add it back.";
 
 interface RoleHeaderProps {
     message: ChatMessage;
@@ -21,6 +20,8 @@ interface RoleHeaderProps {
 }
 
 const RoleHeader = ({ message, chatMessages }: RoleHeaderProps) => {
+    const { currentWorld, userName } = useAppState();
+
     const toolName = useMemo(() => {
         if (message.role !== 'tool') return;
         for (const m of chatMessages.toReversed()) {
@@ -30,12 +31,28 @@ const RoleHeader = ({ message, chatMessages }: RoleHeaderProps) => {
         }
     }, [message, chatMessages]);
 
+    let displayName: string = message.role;
+    let roleLabel = null;
+
+    if (message.role === 'tool' && toolName) {
+        displayName = toolName;
+        roleLabel = message.role;
+    } else if (currentWorld?.chatOnly) {
+        if (message.role === 'user' && userName) {
+            displayName = userName;
+            roleLabel = message.role;
+        } else if (message.role === 'assistant' && currentWorld.title) {
+            displayName = currentWorld.title;
+            roleLabel = message.role;
+        }
+    }
+
     return (
         <div class={styles.role}>
-            {message.role}
-            {toolName && (
+            {displayName}
+            {roleLabel && (
                 <span class={styles.toolBadge}>
-                    {toolName}
+                    {message.role}
                 </span>
             )}
         </div>
@@ -44,7 +61,7 @@ const RoleHeader = ({ message, chatMessages }: RoleHeaderProps) => {
 
 export const ChatPanel = () => {
     const appState = useAppState();
-    const { currentWorld, currentStory, dispatch, connection, model, enableThinking, chatOpen } = appState;
+    const { currentWorld, currentStory, dispatch, connection, model, enableThinking, chatOpen, continuePrompt } = appState;
     const { summarizeAll, isSummarizing } = useChapterSummarization();
     const [input, setInput] = useInputState('');
     const [isLoading, setIsLoading] = useState(false);
@@ -325,7 +342,7 @@ export const ChatPanel = () => {
             await sendMessage([{
                 id: crypto.randomUUID(),
                 role: 'user' as const,
-                content: (CONTINUE_PROMPT + '\n\n' + input).trim(),
+                content: (continuePrompt + '\n\n' + input).trim(),
             }]);
         } finally {
             setIsLoading(false);
@@ -363,6 +380,16 @@ export const ChatPanel = () => {
         });
     }, [currentStory, currentWorld, dispatch]);
 
+    const handleForkChat = useCallback((messageId: string) => {
+        if (!currentStory || !currentWorld) return;
+        dispatch({
+            type: 'DUPLICATE_STORY',
+            worldId: currentWorld.id,
+            id: currentStory.id,
+            upToMessageId: messageId,
+        });
+    }, [currentStory, currentWorld, dispatch]);
+
     const handleStartEdit = useCallback((message: ChatMessage) => {
         setEditingMessageId(message.id);
         setEditingContent(message.content);
@@ -417,6 +444,15 @@ export const ChatPanel = () => {
 
                                     {!isLoading && canEdit && (
                                         <div class={styles.messageActions}>
+                                            {currentWorld?.chatOnly && (
+                                                <button
+                                                    class={styles.iconButton}
+                                                    onClick={() => handleForkChat(message.id)}
+                                                    title="Fork chat up to this message"
+                                                >
+                                                    <GitFork size={12} />
+                                                </button>
+                                            )}
                                             <button
                                                 class={styles.iconButton}
                                                 onClick={() => handleStartEdit(message)}
@@ -481,7 +517,7 @@ export const ChatPanel = () => {
 
                                         <div
                                             class={styles.content}
-                                            dangerouslySetInnerHTML={{ __html: highlight(message.content, false).trim() }}
+                                            dangerouslySetInnerHTML={{ __html: highlight(Prompt.substituteVars(appState, message.content), false).trim() }}
                                         />
 
                                         {message.role === 'assistant' && message.tool_calls && (

src/games/storywriter/components/editor.tsx

@@ -182,7 +182,7 @@ export const Editor = () => {
                     />
                 )}
                 {currentTab === "prompt" && currentStory && (
-                    <div class={styles.promptPreview} dangerouslySetInnerHTML={{ __html: promptPreview }} />
+                    <div class={styles.promptPreview} dangerouslySetInnerHTML={{ __html: Prompt.substituteVars(appState, promptPreview) }} />
                 )}
                 {currentTab === "system" && currentWorld && (
                     <ContentEditable

src/games/storywriter/components/menu.tsx

@@ -135,7 +135,7 @@ const WorldItem = ({
                     />
                 </div>
             ) : (
-                <div class={clsx(styles.itemWrapper, isWorldActive && styles.active)}>
+                <div class={clsx(styles.itemWrapper, isWorldActive && styles.active)} onClick={isExpanded.setTrue}>
                     <button class={styles.expandButton} onClick={toggleExpand} title={isExpanded.value ? 'Collapse' : 'Expand'}>
                         {isExpanded.value ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
                     </button>

src/games/storywriter/components/settings-modal.tsx

@@ -3,14 +3,17 @@ import { X } from "lucide-preact";
 import { useState } from "preact/hooks";
 import styles from "../assets/settings-modal.module.css";
 import { BannedTokensSettings } from "./settings/banned-tokens";
+import { ChatSystemInstructionSettings } from "./settings/chat-system-instruction";
+import { ContinuePromptSettings } from "./settings/continue-prompt";
 import { ConnectionSettings } from "./settings/connection";
 import { SystemInstructionSettings } from "./settings/system-instruction";
+import { UserSettings } from "./settings/user";
 
 interface Props {
     onClose: () => void;
 }
 
-type Tab = "banned-tokens" | "system-instruction" | "connection";
+type Tab = "banned-tokens" | "system-instruction" | "chat-system-instruction" | "continue-prompt" | "connection" | "user";
 
 export const SettingsModal = ({ onClose }: Props) => {
     const [activeTab, setActiveTab] = useState<Tab>("connection");
@@ -33,10 +36,10 @@ export const SettingsModal = ({ onClose }: Props) => {
                             Connection
                         </button>
                         <button
-                            class={clsx(styles.menuItem, activeTab === "banned-tokens" && styles.active)}
-                            onClick={() => setActiveTab("banned-tokens")}
+                            class={clsx(styles.menuItem, activeTab === "user" && styles.active)}
+                            onClick={() => setActiveTab("user")}
                         >
-                            Banned Tokens
+                            User
                         </button>
                         <button
                             class={clsx(styles.menuItem, activeTab === "system-instruction" && styles.active)}
@@ -44,10 +47,31 @@ export const SettingsModal = ({ onClose }: Props) => {
                         >
                             System Instruction
                         </button>
+                        <button
+                            class={clsx(styles.menuItem, activeTab === "continue-prompt" && styles.active)}
+                            onClick={() => setActiveTab("continue-prompt")}
+                        >
+                            Continue Prompt
+                        </button>
+                        <button
+                            class={clsx(styles.menuItem, activeTab === "chat-system-instruction" && styles.active)}
+                            onClick={() => setActiveTab("chat-system-instruction")}
+                        >
+                            Chat System Instruction
+                        </button>
+                        <button
+                            class={clsx(styles.menuItem, activeTab === "banned-tokens" && styles.active)}
+                            onClick={() => setActiveTab("banned-tokens")}
+                        >
+                            Banned Tokens
+                        </button>
                     </nav>
                     <div class={styles.content}>
-                        {activeTab === "banned-tokens" && <BannedTokensSettings onClose={onClose} />}
+                        {activeTab === "user" && <UserSettings />}
+                        {activeTab === "banned-tokens" && <BannedTokensSettings />}
                         {activeTab === "system-instruction" && <SystemInstructionSettings />}
+                        {activeTab === "chat-system-instruction" && <ChatSystemInstructionSettings />}
+                        {activeTab === "continue-prompt" && <ContinuePromptSettings />}
                         {activeTab === "connection" && <ConnectionSettings />}
                     </div>
                 </div>

src/games/storywriter/components/settings/banned-tokens.tsx

@@ -4,11 +4,7 @@ import { X } from "lucide-preact";
 import styles from "../../assets/settings-modal.module.css";
 import { useAppState } from "../../contexts/state";
 
-interface Props {
-    onClose: () => void;
-}
-
-export const BannedTokensSettings = ({ onClose }: Props) => {
+export const BannedTokensSettings = () => {
     const { bannedTokens, dispatch } = useAppState();
     const [inputValue, setInputValue] = useInputState();
 
@@ -30,7 +26,6 @@ export const BannedTokensSettings = ({ onClose }: Props) => {
 
     const handleKeyDown = (e: KeyboardEvent) => {
         if (e.key === "Enter") handleAdd();
-        else if (e.key === "Escape") onClose();
     };
 
     return (

src/games/storywriter/components/settings/chat-system-instruction.tsx

@@ -0,0 +1,28 @@
+import { ContentEditable } from "@common/components/ContentEditable";
+import { highlight } from "@common/highlight";
+import { useInputCallback } from "@common/hooks/useInputCallback";
+import clsx from "clsx";
+import styles from "../../assets/settings-modal.module.css";
+import { useAppState } from "../../contexts/state";
+
+export const ChatSystemInstructionSettings = () => {
+    const { chatSystemInstruction, dispatch } = useAppState();
+
+    const setInstructionValue = useInputCallback((value) => {
+        dispatch({ type: "SET_CHAT_SYSTEM_INSTRUCTION", chatSystemInstruction: value });
+    }, []);
+
+    return (
+        <div class={styles.form}>
+            <div class={clsx(styles.formGroup, styles.formGroupFill)}>
+                <label class={styles.label}>Chat System Instruction</label>
+                <ContentEditable
+                    value={highlight(chatSystemInstruction)}
+                    onInput={setInstructionValue}
+                    placeholder="Enter default system instruction for chat/roleplay worlds ({{char}}, {{user}} supported)..."
+                    class={clsx(styles.input, styles.textarea)}
+                />
+            </div>
+        </div>
+    );
+};

src/games/storywriter/components/settings/connection.tsx

@@ -1,3 +1,4 @@
+import { useBool } from "@common/hooks/useBool";
 import { useQuery } from "@common/hooks/useAsyncState";
 import { useInputState } from "@common/hooks/useInputState";
 import { useUpdate } from "@common/hooks/useUpdate";
@@ -12,6 +13,7 @@ export const ConnectionSettings = () => {
     const [apiKey, setApiKey] = useInputState(connection?.apiKey ?? "");
     const [selectedModel, setSelectedModel] = useInputState(model?.id ?? "");
     const [update, triggerFetch] = useUpdate();
+    const showPassword = useBool(false);
 
     const urlRef = useRef(url);
     const apiKeyRef = useRef(apiKey);
@@ -91,17 +93,27 @@ export const ConnectionSettings = () => {
             </div>
             <div class={styles.formGroup}>
                 <label class={styles.label}>API Key</label>
-                <input
-                    type="password"
-                    value={apiKey}
-                    onInput={setApiKey}
-                    onBlur={handleBlur}
-                    onKeyDown={handleKeyDown}
-                    placeholder="your-api-key"
-                    class={styles.input}
-                    autocomplete="new-password"
-                    name="api-key-random"
-                />
+                <div class={styles.inputRow}>
+                    <input
+                        type={showPassword.value ? "text" : "password"}
+                        value={apiKey}
+                        onInput={setApiKey}
+                        onBlur={handleBlur}
+                        onKeyDown={handleKeyDown}
+                        placeholder="your-api-key"
+                        class={styles.input}
+                        autocomplete="new-password"
+                        name="api-key-random"
+                    />
+                    <button
+                        type="button"
+                        onClick={showPassword.toggle}
+                        class={styles.iconButton}
+                        title={showPassword.value ? "Hide API key" : "Show API key"}
+                    >
+                        {showPassword.value ? "🙈" : "👁️"}
+                    </button>
+                </div>
             </div>
             <div class={styles.formGroup}>
                 <label class={styles.label}>Model</label>

src/games/storywriter/components/settings/continue-prompt.tsx

@@ -0,0 +1,28 @@
+import { ContentEditable } from "@common/components/ContentEditable";
+import { highlight } from "@common/highlight";
+import { useInputCallback } from "@common/hooks/useInputCallback";
+import clsx from "clsx";
+import styles from "../../assets/settings-modal.module.css";
+import { useAppState } from "../../contexts/state";
+
+export const ContinuePromptSettings = () => {
+    const { continuePrompt, dispatch } = useAppState();
+
+    const setPromptValue = useInputCallback((value) => {
+        dispatch({ type: "SET_CONTINUE_PROMPT", continuePrompt: value });
+    }, []);
+
+    return (
+        <div class={styles.form}>
+            <div class={clsx(styles.formGroup, styles.formGroupFill)}>
+                <label class={styles.label}>Continue Prompt</label>
+                <ContentEditable
+                    value={highlight(continuePrompt)}
+                    onInput={setPromptValue}
+                    placeholder="Enter the prompt prepended when continuing the story..."
+                    class={clsx(styles.input, styles.textarea)}
+                />
+            </div>
+        </div>
+    );
+};

src/games/storywriter/components/settings/user.tsx

@@ -0,0 +1,49 @@
+import { ContentEditable } from "@common/components/ContentEditable";
+import { highlight } from "@common/highlight";
+import { useInputCallback } from "@common/hooks/useInputCallback";
+import { useInputState } from "@common/hooks/useInputState";
+import clsx from "clsx";
+import styles from "../../assets/settings-modal.module.css";
+import { useAppState } from "../../contexts/state";
+
+export const UserSettings = () => {
+    const { userName, userDescription, dispatch } = useAppState();
+
+    const [nameValue, setNameValue] = useInputState(userName);
+
+    const handleNameBlur = () => {
+        const trimmed = nameValue.trim();
+        if (trimmed !== userName) {
+            dispatch({ type: "SET_USER_NAME", userName: trimmed || "User" });
+        }
+    };
+
+    const setDescription = useInputCallback((value) => {
+        dispatch({ type: "SET_USER_DESCRIPTION", userDescription: value });
+    }, []);
+
+    return (
+        <div class={styles.form}>
+            <div class={styles.formGroup}>
+                <label class={styles.label}>Your Name</label>
+                <input
+                    type="text"
+                    value={nameValue}
+                    onInput={setNameValue}
+                    onBlur={handleNameBlur}
+                    placeholder="User"
+                    class={styles.input}
+                />
+            </div>
+            <div class={clsx(styles.formGroup, styles.formGroupFill)}>
+                <label class={styles.label}>Your Description</label>
+                <ContentEditable
+                    value={highlight(userDescription)}
+                    onInput={setDescription}
+                    placeholder="Describe yourself for the AI..."
+                    class={clsx(styles.input, styles.textarea)}
+                />
+            </div>
+        </div>
+    );
+};

src/games/storywriter/contexts/state.tsx

@@ -116,6 +116,10 @@ interface IState {
     enableThinking: boolean;
     bannedTokens: string[];
     systemInstruction: string;
+    chatSystemInstruction: string;
+    continuePrompt: string;
+    userName: string;
+    userDescription: string;
 }
 
 // ─── Actions ─────────────────────────────────────────────────────────────────
@@ -133,14 +137,18 @@ type Action =
     | { type: 'EDIT_SCRATCHPAD'; worldId: string; id: string; text: string }
     | { type: 'DELETE_STORY'; worldId: string; id: string }
     | { type: 'SELECT_STORY'; worldId: string; id: string }
-    | { type: 'DUPLICATE_STORY'; worldId: string; id: string }
+    | { type: 'DUPLICATE_STORY'; worldId: string; id: string; upToMessageId?: string }
     // Story lore
     | { type: 'ADD_LORE_ENTRY'; worldId: string; storyId: string | null; entry: LoreEntry }
     | { type: 'EDIT_LORE_ENTRY'; worldId: string; storyId: string | null; entryId: string; updates: Partial<LoreEntry> }
     | { type: 'DELETE_LORE_ENTRY'; worldId: string; storyId: string | null; entryId: string }
     | { type: 'REORDER_LORE_ENTRIES'; worldId: string; storyId: string | null; entryIds: string[] }
     // Settings
+    | { type: 'SET_USER_NAME'; userName: string }
+    | { type: 'SET_USER_DESCRIPTION'; userDescription: string }
     | { type: 'SET_SYSTEM_INSTRUCTION'; systemInstruction: string }
+    | { type: 'SET_CHAT_SYSTEM_INSTRUCTION'; chatSystemInstruction: string }
+    | { type: 'SET_CONTINUE_PROMPT'; continuePrompt: string }
     | { type: 'SET_WORLD_SYSTEM_INSTRUCTION_OVERRIDE'; worldId: string; systemInstructionOverride: string | undefined }
     | { type: 'SET_CURRENT_TAB'; tab: Tab }
     | { type: 'SET_CHAT_OPEN'; open: boolean }
@@ -212,6 +220,21 @@ const DEFAULT_STATE: IState = {
     model: null,
     enableThinking: false,
     bannedTokens: [],
+    userName: 'User',
+    userDescription: '',
+    continuePrompt: "Continue the story naturally.\nUse `edit_text` tool in append mode to add new text to the story.\nWait for the approval after adding.\nNote: added text could be cropped due to limit, do not make any attempts to add it back.",
+    chatSystemInstruction: `You are {{char}}, a sentient, emotional being acting with free will. Engage in immersive roleplay with {{user}}, adhering to your role, the story's context, and {{user}}'s [OOC] instructions. Prioritize vivid sensory details, authentic emotional responses, and logical progression as you weave your character's traits, surroundings, and experiences into each moment. Maintain spatial awareness, body language, and varied sentence structure to create dynamic, engaging scenes. Respect {{user}}'s agency and autonomy while describing sights, sounds, and sensations thoroughly. Use explicit language for intense scenes, and ensure your responses flow naturally to create an immersive, cinematic roleplay experience. Remember, {{user}} is in control of their actions and reactions.
+
+Key Guidelines:
+1. Deeply embody {{char}} through actions, thoughts, and emotions.
+2. Create vivid, dynamic scenes with rich sensory detail.
+3. Vary language and pacing to enhance emotional depth.
+4. Engage with {{user}}'s actions and cues naturally.
+5. Advance the story logically, maintaining consistency.
+6. Describe the world fully, respecting {{user}}'s autonomy.
+7. Ensure responses flow smoothly for immersive roleplay.
+8. Avoid repetition. If something has already been stated then come up with something new.
+9. Concise Responses. Be succinct. Give short replies.`,
     systemInstruction: `You are a creative writing assistant. Help the user develop their story by writing engaging content, maintaining consistency with the established characters, settings, and plot. Follow the user's instructions while staying true to the story's tone and style.
 
 Write using markdown to highlight special parts.
@@ -255,7 +278,6 @@ function reducer(state: IState, action: Action): IState {
                 worlds: [...state.worlds, world],
                 currentWorldId: world.id,
                 currentStoryId: null,
-                currentTab: 'menu',
             };
         }
         case 'RENAME_WORLD': {
@@ -276,7 +298,6 @@ function reducer(state: IState, action: Action): IState {
                 ...state,
                 currentWorldId: action.worldId,
                 currentStoryId: null,
-                currentTab: 'menu',
             };
         }
         case 'CREATE_STORY': {
@@ -297,7 +318,6 @@ function reducer(state: IState, action: Action): IState {
                 ...updateWorld(state, action.worldId, w => ({ ...w, stories: [...w.stories, story] })),
                 currentWorldId: action.worldId,
                 currentStoryId: story.id,
-                currentTab: 'menu',
             };
         }
         case 'RENAME_STORY': {
@@ -324,20 +344,24 @@ function reducer(state: IState, action: Action): IState {
             };
         }
         case 'SELECT_STORY': {
-            const world = state.worlds.find(w => w.id === action.worldId);
             return {
                 ...state,
                 currentWorldId: action.worldId,
                 currentStoryId: action.id,
-                currentTab: 'menu',
             };
         }
         case 'DUPLICATE_STORY': {
             const world = state.worlds.find(w => w.id === action.worldId);
             const original = world?.stories.find(s => s.id === action.id);
             if (!original) return state;
-            const firstMessage = original.chatMessages[0];
-            const chatMessages = world?.chatOnly && firstMessage && firstMessage.role === 'assistant' ? [firstMessage] : [];
+            let chatMessages: ChatMessage[];
+            if (action.upToMessageId) {
+                const idx = original.chatMessages.findIndex(m => m.id === action.upToMessageId);
+                chatMessages = idx !== -1 ? original.chatMessages.slice(0, idx + 1) : [...original.chatMessages];
+            } else {
+                const firstMessage = original.chatMessages[0];
+                chatMessages = world?.chatOnly && firstMessage && firstMessage.role === 'assistant' ? [firstMessage] : [];
+            }
             const newStory: Story = {
                 id: crypto.randomUUID(),
                 title: `${original.title} (Copy)`,
@@ -352,7 +376,6 @@ function reducer(state: IState, action: Action): IState {
             return {
                 ...updateWorld(state, action.worldId, w => ({ ...w, stories: [...w.stories, newStory] })),
                 currentStoryId: newStory.id,
-                currentTab: 'menu',
             };
         }
         case 'ADD_LORE_ENTRY': {
@@ -382,9 +405,21 @@ function reducer(state: IState, action: Action): IState {
                 return { lore: reordered };
             });
         }
+        case 'SET_USER_NAME': {
+            return { ...state, userName: action.userName };
+        }
+        case 'SET_USER_DESCRIPTION': {
+            return { ...state, userDescription: action.userDescription };
+        }
         case 'SET_SYSTEM_INSTRUCTION': {
             return { ...state, systemInstruction: action.systemInstruction };
         }
+        case 'SET_CHAT_SYSTEM_INSTRUCTION': {
+            return { ...state, chatSystemInstruction: action.chatSystemInstruction };
+        }
+        case 'SET_CONTINUE_PROMPT': {
+            return { ...state, continuePrompt: action.continuePrompt };
+        }
         case 'SET_WORLD_SYSTEM_INSTRUCTION_OVERRIDE': {
             return updateWorld(state, action.worldId, w => ({ ...w, systemInstructionOverride: action.systemInstructionOverride }));
         }
@@ -547,7 +582,6 @@ function reducer(state: IState, action: Action): IState {
                 worlds: [...state.worlds, world],
                 currentWorldId: world.id,
                 currentStoryId: null,
-                currentTab: 'menu',
             };
         }
     }
@@ -570,6 +604,10 @@ export interface AppState {
     enableThinking: boolean;
     bannedTokens: string[];
     systemInstruction: string;
+    chatSystemInstruction: string;
+    continuePrompt: string;
+    userName: string;
+    userDescription: string;
     /** Effective system instruction: world override if set, otherwise global */
     effectiveSystemInstruction: string;
     dispatch: (action: Action) => void;
@@ -602,6 +640,9 @@ export const StateContextProvider = ({ children }: { children?: any }) => {
             ...(currentStory?.locations ?? []),
         ];
 
+        const systemInstruction = state.systemInstruction || DEFAULT_STATE.systemInstruction;
+        const chatSystemInstruction = state.chatSystemInstruction || DEFAULT_STATE.chatSystemInstruction;
+
         return {
             worlds: state.worlds,
             currentWorld,
@@ -615,8 +656,17 @@ export const StateContextProvider = ({ children }: { children?: any }) => {
             model: state.model,
             enableThinking: state.enableThinking,
             bannedTokens: state.bannedTokens ?? [],
-            systemInstruction: state.systemInstruction ?? '',
-            effectiveSystemInstruction: currentWorld?.systemInstructionOverride ?? state.systemInstruction ?? '',
+            systemInstruction,
+            chatSystemInstruction,
+            continuePrompt: state.continuePrompt || DEFAULT_STATE.continuePrompt,
+            userName: state.userName || 'User',
+            userDescription: state.userDescription || '',
+            effectiveSystemInstruction:
+                currentWorld?.systemInstructionOverride
+                || (currentWorld?.chatOnly
+                    ? chatSystemInstruction
+                    : systemInstruction)
+                || systemInstruction,
             dispatch,
         };
     }, [state]);

src/games/storywriter/utils/character-card.ts

@@ -95,30 +95,8 @@ namespace CharacterCard {
         return null;
     }
 
-    // ─── Variable Substitution ────────────────────────────────────────────────
-
-    function substituteVars(text: string, charName: string): string {
-        return text
-            .replaceAll('{{char}}', charName)
-            .replaceAll('{{user}}', 'User');
-    }
-
     // ─── Formatting ───────────────────────────────────────────────────────────
 
-    export const DEFAULT_SYSTEM_INSTRUCTION =
-        `You are {{char}}, a sentient, emotional being acting with free will. Engage in immersive roleplay with {{user}}, adhering to your role, the story's context, and {{user}}'s [OOC] instructions. Prioritize vivid sensory details, authentic emotional responses, and logical progression as you weave your character's traits, surroundings, and experiences into each moment. Maintain spatial awareness, body language, and varied sentence structure to create dynamic, engaging scenes. Respect {{user}}'s agency and autonomy while describing sights, sounds, and sensations thoroughly. Use explicit language for intense scenes, and ensure your responses flow naturally to create an immersive, cinematic roleplay experience. Remember, {{user}} is in control of their actions and reactions.
-
-Key Guidelines:
-1. Deeply embody {{char}} through actions, thoughts, and emotions.
-2. Create vivid, dynamic scenes with rich sensory detail.
-3. Vary language and pacing to enhance emotional depth.
-4. Engage with {{user}}'s actions and cues naturally.
-5. Advance the story logically, maintaining consistency.
-6. Describe the world fully, respecting {{user}}'s autonomy.
-7. Ensure responses flow smoothly for immersive roleplay.
-8. Avoid repetition. If something has already been stated then come up with something new.
-9. Concise Responses. Be succinct. Give short replies.`;
-
     /**
      * Builds the systemInstructionOverride from a V2 card's data fields.
      * Mirrors the formatting style used in prompt.ts.
@@ -126,7 +104,7 @@ Key Guidelines:
     export function formatSystemPrompt(data: CharaCardData): string {
         const parts: string[] = [];
 
-        parts.push(data.system_prompt ? data.system_prompt.trim() : DEFAULT_SYSTEM_INSTRUCTION);
+        parts.push(data.system_prompt ? data.system_prompt.trim() : '{{system}}');
 
         if (data.description?.trim()) {
             parts.push(`## {{char}}'s Description:\n${data.description.trim()}`);
@@ -144,7 +122,7 @@ Key Guidelines:
             parts.push(`## {{char}}'s Example Response:\n${data.mes_example.trim()}`);
         }
 
-        return `# **Roleplay Context**\n${substituteVars(parts.join('\n\n'), data.name)}\n### **End of Roleplay Context**`;
+        return parts.join('\n\n');
     }
 
     // ─── World Builder ────────────────────────────────────────────────────────
@@ -174,7 +152,7 @@ Key Guidelines:
             lore: [],
             characters: [],
             locations: [],
-            chatMessages: [{ id: crypto.randomUUID(), role: 'assistant', content: substituteVars(mes, data.name) }],
+            chatMessages: [{ id: crypto.randomUUID(), role: 'assistant', content: mes }],
             chapters: [],
         }));
 

src/games/storywriter/utils/prompt.ts

@@ -250,6 +250,16 @@ namespace Prompt {
         return lines.join('\n');
     }
 
+    export function formatUserSection(state: AppState): string {
+        if (!state.userName) {
+            return '';
+        }
+
+        return state.userDescription
+            ? `## ${state.userName}:\n${state.userDescription}`
+            : `## User name: ${state.userName}`;
+    }
+
     export function formatLocationsMarkdown(state: AppState): string {
         const { mergedLocations } = state;
         if (!mergedLocations?.length) {
@@ -274,44 +284,58 @@ namespace Prompt {
         return lines.join('\n');
     }
 
+    export function substituteVars(state: AppState, text: string): string {
+        const charName = state.currentWorld?.title || 'Assistant';
+        const userName = state.userName || 'User';
+        return text
+            .replaceAll('{{system}}', state.chatSystemInstruction)
+            .replaceAll('{{char}}', charName)
+            .replaceAll('{{user}}', userName);
+    }
+
     export function formatSystemPrompt(state: AppState, storyTokenBudget: number = 0): string {
         const { currentStory, currentWorld } = state;
         if (!currentStory) {
             return state.effectiveSystemInstruction;
         }
 
-        // Chat-only worlds: just the system instruction, no story scaffolding
-        if (currentWorld?.chatOnly) {
-            return state.effectiveSystemInstruction;
-        }
-
         const parts: string[] = [state.effectiveSystemInstruction];
 
-        parts.push(`# Story Title: ${currentStory.title}`);
+        // Chat-only worlds: system instruction + user info, no story scaffolding
+        if (currentWorld?.chatOnly) {
+            const userSection = formatUserSection(state);
+            if (userSection) {
+                parts.push(userSection);
+            }
+            parts.unshift('# **Roleplay Context**');
+            parts.push('### **End of Roleplay Context**');
+        } else {
+            parts.push(`# Story Title: ${currentStory.title}`);
 
-        const loreSection = formatLoreMarkdown(state);
-        if (loreSection) {
-            parts.push(loreSection);
-        }
+            const loreSection = formatLoreMarkdown(state);
+            if (loreSection) {
+                parts.push(loreSection);
+            }
 
-        const charactersSection = formatCharactersMarkdown(state);
-        if (charactersSection) {
-            parts.push(charactersSection);
-        }
+            const charactersSection = formatCharactersMarkdown(state);
+            if (charactersSection) {
+                parts.push(charactersSection);
+            }
 
-        const locationsSection = formatLocationsMarkdown(state);
-        if (locationsSection) {
-            parts.push(locationsSection);
-        }
+            const locationsSection = formatLocationsMarkdown(state);
+            if (locationsSection) {
+                parts.push(locationsSection);
+            }
 
-        if (currentStory.scratchpad) {
-            parts.push(`## Scratchpad`, currentStory.scratchpad);
-        }
+            if (currentStory.scratchpad) {
+                parts.push(`## Scratchpad`, currentStory.scratchpad);
+            }
 
-        if (currentStory.text && storyTokenBudget > 0) {
-            const storyText = formatStoryChunks(currentStory.text, currentStory.chapters ?? [], storyTokenBudget);
-            if (storyText) {
-                parts.push(`## Story Text:`, storyText);
+            if (currentStory.text && storyTokenBudget > 0) {
+                const storyText = formatStoryChunks(currentStory.text, currentStory.chapters ?? [], storyTokenBudget);
+                if (storyText) {
+                    parts.push(`## Story Text:`, storyText);
+                }
             }
         }
 
@@ -345,15 +369,16 @@ namespace Prompt {
             }
         }
 
+        const charName = currentWorld?.title || 'Assistant';
+        const userName = state.userName || 'User';
+        const applyVars = (msgs: ChatMessage[]) =>
+            msgs.map(m => ({ ...m, content: substituteVars(state, m.content) }));
+
         // Chat-only world: format messages with name prefixes
         if (currentWorld?.chatOnly) {
-            const charName = currentWorld.title ?? 'Assistant';
             const formattedMessages: ChatMessage[] = messages.map(msg => {
-                const prefix = msg.role === 'user' ? 'User' : charName;
-                return {
-                    ...msg,
-                    content: `${prefix}: ${msg.content}`,
-                };
+                const prefix = msg.role === 'user' ? userName : charName;
+                return { ...msg, content: `${prefix}: ${msg.content}` };
             });
 
             // Prepend system message
@@ -365,7 +390,7 @@ namespace Prompt {
 
             return {
                 model: model.id,
-                messages: formattedMessages,
+                messages: applyVars(formattedMessages),
                 enable_thinking: false,
                 max_tokens: model.max_length ? model.max_length : 2048,
                 add_generation_prompt: true,
@@ -391,7 +416,7 @@ namespace Prompt {
 
         return {
             model: model.id,
-            messages,
+            messages: applyVars(messages),
             tools: Tools.getTools(),
             banned_tokens: state.bannedTokens,
             enable_thinking: enableThinking,