Prompt Library upgrade: template variables and edit version history

Author: voidstackloop

README.md

@@ -34,7 +34,7 @@ Beyond chat, Modelforge includes an **agentic mode** — the model can read/writ
 **Organization**
 - **Projects** — group related chats under shared instructions and default model parameters.
 - **Per-session and per-project overrides** — pin a specific prompt, model, temperature, seed, top-K/top-P, repeat penalty, context length, GPU offload, or stop sequences to a single chat or an entire project, falling back to sane defaults. Provider-specific parameters (e.g. seed isn't supported by Claude, top-K isn't supported by ChatGPT) are automatically disabled when they don't apply to the selected model.
-- **Prompt library** — save and reuse system prompts across chats.
+- **Prompt library** — save and reuse system prompts across chats. Prompts can include `{{variables}}` (e.g. `{{topic}}`) that you fill in each time you apply one, and edits keep version history so a bad change can be restored.
 - **Command palette** (`Ctrl/Cmd+K`) — jump between chats, projects, and settings without touching the mouse.
 
 **Files & retrieval**

app/src/settings-store.ts

@@ -2,10 +2,21 @@ import * as path from "node:path";
 import { app } from "electron";
 import { readJson, writeJson } from "./json-store";
 
+export interface PromptVersion {
+    prompt: string;
+    savedAt: string;
+}
+
 export interface PromptPreset {
     id: string;
     name: string;
     prompt: string;
+    // Previous versions of `prompt`, newest first, capped at 10 — pushed here
+    // whenever an edit overwrites the current content, so a bad edit can be
+    // undone.
+    versions?: PromptVersion[];
+    createdAt?: string;
+    updatedAt?: string;
 }
 
 export interface AppSettings {

frontend/src/components/layout.tsx

@@ -24,7 +24,9 @@ import { CommandPalette } from "@/components/command-palette";
 import { useSessions } from "@/lib/sessions-context";
 import { useI18n } from "@/lib/i18n";
 import { cn } from "@/lib/utils";
-import type { ChatOptions, ChatSession, Project } from "@/types/electron";
+import type { ChatOptions, ChatSession, Project, PromptPreset } from "@/types/electron";
+import { extractVariables, fillTemplate } from "@/lib/prompt-templates";
+import { PromptVariableDialog } from "@/components/prompt-variable-dialog";
 
 function SessionRow({
     session,
@@ -79,8 +81,9 @@ function ProjectGroup({
     const [name, setName] = useState(project.name);
     const [instructions, setInstructions] = useState(project.instructions);
     const [params, setParams] = useState<ChatOptions>(project.params ?? {});
-    const [presets, setPresets] = useState<{ id: string; name: string; prompt: string }[]>([]);
+    const [presets, setPresets] = useState<PromptPreset[]>([]);
     const [newPresetName, setNewPresetName] = useState("");
+    const [pendingVariablePreset, setPendingVariablePreset] = useState<PromptPreset | null>(null);
 
     async function handleSave() {
         await updateProject(project.id, { name, instructions });
@@ -102,11 +105,21 @@ function ProjectGroup({
         updateProject(project.id, { instructions: prompt });
     }
 
+    function selectPreset(preset: PromptPreset) {
+        const variables = extractVariables(preset.prompt);
+        if (variables.length === 0) {
+            applyPreset(preset.prompt);
+        } else {
+            setPendingVariablePreset(preset);
+        }
+    }
+
     async function saveCurrentAsPreset() {
         const name = newPresetName.trim();
         if (!name || !instructions.trim()) return;
         const settings = await window.api.settings.get();
-        const preset = { id: crypto.randomUUID(), name, prompt: instructions };
+        const now = new Date().toISOString();
+        const preset: PromptPreset = { id: crypto.randomUUID(), name, prompt: instructions, versions: [], createdAt: now, updatedAt: now };
         await window.api.settings.save({ promptPresets: [...settings.promptPresets, preset] });
         setPresets([...settings.promptPresets, preset]);
         setNewPresetName("");
@@ -182,7 +195,7 @@ function ProjectGroup({
                                         {presets.map((preset) => (
                                             <button
                                                 key={preset.id}
-                                                onClick={() => applyPreset(preset.prompt)}
+                                                onClick={() => selectPreset(preset)}
                                                 className="flex items-center justify-between gap-2 rounded-md px-2 py-1.5 text-left text-xs hover:bg-muted"
                                             >
                                                 <span className="truncate font-medium">{preset.name}</span>
@@ -399,6 +412,16 @@ function ProjectGroup({
                     ))}
                 </div>
             )}
+            <PromptVariableDialog
+                open={pendingVariablePreset !== null}
+                onOpenChange={(open) => {
+                    if (!open) setPendingVariablePreset(null);
+                }}
+                variables={pendingVariablePreset ? extractVariables(pendingVariablePreset.prompt) : []}
+                onSubmit={(values) => {
+                    if (pendingVariablePreset) applyPreset(fillTemplate(pendingVariablePreset.prompt, values));
+                }}
+            />
         </div>
     );
 }

frontend/src/components/prompt-variable-dialog.tsx

@@ -0,0 +1,65 @@
+import { useEffect, useState } from "react";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { useI18n } from "@/lib/i18n";
+
+export function PromptVariableDialog({
+    open,
+    onOpenChange,
+    variables,
+    onSubmit,
+}: {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    variables: string[];
+    onSubmit: (values: Record<string, string>) => void;
+}) {
+    const { t } = useI18n();
+    const [values, setValues] = useState<Record<string, string>>({});
+
+    // Reset the form fresh every time a new set of variables is opened,
+    // rather than carrying over stale values from whatever preset was
+    // filled in last.
+    useEffect(() => {
+        // Intentional: reset the form fresh each time the dialog opens for a
+        // new preset, rather than carrying over stale values.
+        // eslint-disable-next-line react-hooks/set-state-in-effect
+        if (open) setValues({});
+    }, [open, variables]);
+
+    function handleSubmit() {
+        onSubmit(values);
+        onOpenChange(false);
+    }
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent>
+                <DialogHeader>
+                    <DialogTitle>{t.fillPromptVariables}</DialogTitle>
+                    <DialogDescription>{t.fillPromptVariablesHelp}</DialogDescription>
+                </DialogHeader>
+                <div className="flex flex-col gap-3">
+                    {variables.map((v, i) => (
+                        <div key={v} className="flex flex-col gap-1">
+                            <label className="text-xs text-muted-foreground">{v}</label>
+                            <Input
+                                autoFocus={i === 0}
+                                value={values[v] ?? ""}
+                                onChange={(e) => setValues((prev) => ({ ...prev, [v]: e.target.value }))}
+                                onKeyDown={(e) => e.key === "Enter" && handleSubmit()}
+                            />
+                        </div>
+                    ))}
+                </div>
+                <DialogFooter>
+                    <Button variant="outline" onClick={() => onOpenChange(false)}>
+                        {t.cancel}
+                    </Button>
+                    <Button onClick={handleSubmit}>{t.apply}</Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+}

frontend/src/lib/prompt-templates.test.ts

@@ -0,0 +1,49 @@
+import { describe, it, expect } from "vitest";
+import { extractVariables, fillTemplate } from "./prompt-templates";
+
+describe("extractVariables", () => {
+    it("returns an empty array for a template with no variables", () => {
+        expect(extractVariables("You are a helpful assistant.")).toEqual([]);
+    });
+
+    it("finds a single variable", () => {
+        expect(extractVariables("Write about {{topic}}.")).toEqual(["topic"]);
+    });
+
+    it("finds multiple distinct variables in order of first appearance", () => {
+        expect(extractVariables("{{tone}} summary of {{topic}} for {{audience}}.")).toEqual([
+            "tone",
+            "topic",
+            "audience",
+        ]);
+    });
+
+    it("deduplicates repeated variables, keeping first-seen order", () => {
+        expect(extractVariables("{{topic}} ... more about {{topic}} and {{audience}}")).toEqual([
+            "topic",
+            "audience",
+        ]);
+    });
+
+    it("tolerates extra whitespace inside the braces", () => {
+        expect(extractVariables("{{  topic  }}")).toEqual(["topic"]);
+    });
+});
+
+describe("fillTemplate", () => {
+    it("substitutes a single variable", () => {
+        expect(fillTemplate("Write about {{topic}}.", { topic: "cats" })).toBe("Write about cats.");
+    });
+
+    it("substitutes multiple occurrences of the same variable", () => {
+        expect(fillTemplate("{{name}} says hi, {{name}}!", { name: "Ada" })).toBe("Ada says hi, Ada!");
+    });
+
+    it("replaces a missing value with an empty string rather than leaving the placeholder", () => {
+        expect(fillTemplate("Hello {{name}}.", {})).toBe("Hello .");
+    });
+
+    it("leaves plain text with no variables unchanged", () => {
+        expect(fillTemplate("You are a helpful assistant.", { unused: "x" })).toBe("You are a helpful assistant.");
+    });
+});

frontend/src/lib/prompt-templates.ts

@@ -0,0 +1,22 @@
+// Prompt Library templates can embed variables as {{name}} — this module
+// finds them and fills them in. Kept intentionally simple (no conditionals,
+// no loops): the goal is reusable prompts with a few blanks to fill in, not
+// a templating language.
+const VARIABLE_PATTERN = /\{\{\s*([a-zA-Z0-9_]+)\s*\}\}/g;
+
+export function extractVariables(template: string): string[] {
+    const seen = new Set<string>();
+    const ordered: string[] = [];
+    for (const match of template.matchAll(VARIABLE_PATTERN)) {
+        const name = match[1];
+        if (!seen.has(name)) {
+            seen.add(name);
+            ordered.push(name);
+        }
+    }
+    return ordered;
+}
+
+export function fillTemplate(template: string, values: Record<string, string>): string {
+    return template.replace(VARIABLE_PATTERN, (_match, name: string) => values[name] ?? "");
+}

frontend/src/lib/translations.ts

@@ -71,6 +71,15 @@ export interface Dictionary {
     savePromptAsPreset: string;
     presetName: string;
     apply: string;
+    cancel: string;
+    fillPromptVariables: string;
+    fillPromptVariablesHelp: string;
+    editPreset: string;
+    presetHistory: string;
+    restore: string;
+    noPreviousVersions: string;
+    savePreset: string;
+    promptLibraryVariablesHint: string;
     resetToDefault: string;
     usingCustomPrompt: string;
     dataManagement: string;
@@ -180,6 +189,15 @@ export const en: Dictionary = {
     savePromptAsPreset: "Save current prompt as preset",
     presetName: "Preset name...",
     apply: "Apply",
+    cancel: "Cancel",
+    fillPromptVariables: "Fill in prompt variables",
+    fillPromptVariablesHelp: "This prompt has blanks to fill in before it's applied.",
+    editPreset: "Edit",
+    presetHistory: "History",
+    restore: "Restore",
+    noPreviousVersions: "No previous versions yet.",
+    savePreset: "Save",
+    promptLibraryVariablesHint: "Add {{variables}} to a prompt (e.g. {{topic}}) and you'll be asked to fill them in each time you apply it. Edits keep version history so you can undo a change.",
     resetToDefault: "Reset to default",
     usingCustomPrompt: "Custom prompt for this chat",
     dataManagement: "Data management",
@@ -297,6 +315,15 @@ export const tr: Dictionary = {
     savePromptAsPreset: "Mevcut istemi ön ayar olarak kaydet",
     presetName: "Ön ayar adı...",
     apply: "Uygula",
+    cancel: "İptal",
+    fillPromptVariables: "İstem değişkenlerini doldurun",
+    fillPromptVariablesHelp: "Bu istemde uygulanmadan önce doldurulması gereken boşluklar var.",
+    editPreset: "Düzenle",
+    presetHistory: "Geçmiş",
+    restore: "Geri yükle",
+    noPreviousVersions: "Henüz önceki bir sürüm yok.",
+    savePreset: "Kaydet",
+    promptLibraryVariablesHint: "Bir isteme {{değişkenler}} ekleyin (ör. {{konu}}) — her uyguladığınızda bunları doldurmanız istenir. Düzenlemeler sürüm geçmişini korur, böylece bir değişikliği geri alabilirsiniz.",
     resetToDefault: "Varsayılana dön",
     usingCustomPrompt: "Bu sohbet için özel istem",
     dataManagement: "Veri yönetimi",

frontend/src/pages/Chat.tsx

@@ -47,6 +47,8 @@ import { useSessions } from "@/lib/sessions-context";
 import { useI18n } from "@/lib/i18n";
 import { OPENAI_MODELS, ANTHROPIC_MODELS, formatModelRef, parseModelRef } from "@/lib/providers";
 import { estimateCost, formatCost } from "@/lib/pricing";
+import { extractVariables, fillTemplate } from "@/lib/prompt-templates";
+import { PromptVariableDialog } from "@/components/prompt-variable-dialog";
 import type {
     ChatMessage,
     OllamaModel,
@@ -58,6 +60,7 @@ import type {
     ChatOptions,
     UsageInfo,
     ToolCall,
+    PromptPreset,
 } from "@/types/electron";
 
 type Attachment = AttachedFile & { folder?: string };
@@ -260,6 +263,7 @@ export default function Chat() {
     const [agentMode, setAgentMode] = useState(false);
     const [agentWorkspace, setAgentWorkspace] = useState<string | null>(null);
     const [pendingToolCalls, setPendingToolCalls] = useState<ToolCall[]>([]);
+    const [pendingVariablePreset, setPendingVariablePreset] = useState<PromptPreset | null>(null);
     const [agentStepCount, setAgentStepCount] = useState(0);
     const [autoApprovedTools, setAutoApprovedTools] = useState<Set<string>>(new Set());
     const [newPresetName, setNewPresetName] = useState("");
@@ -664,6 +668,17 @@ export default function Chat() {
         if (sessionId) window.api.sessions.update(sessionId, { systemPrompt: prompt });
     }
 
+    // Presets with {{variables}} need values filled in before they're usable
+    // as a system prompt — presets without any apply immediately as before.
+    function selectPromptPreset(preset: PromptPreset) {
+        const variables = extractVariables(preset.prompt);
+        if (variables.length === 0) {
+            applyPromptPreset(preset.prompt);
+        } else {
+            setPendingVariablePreset(preset);
+        }
+    }
+
     function resetPromptToDefault() {
         setSessionSystemPrompt(null);
         if (sessionId) window.api.sessions.update(sessionId, { systemPrompt: null });
@@ -679,7 +694,8 @@ export default function Chat() {
         const name = newPresetName.trim();
         const prompt = sessionSystemPrompt ?? settings.systemPrompt;
         if (!name || !prompt.trim()) return;
-        const preset = { id: crypto.randomUUID(), name, prompt };
+        const now = new Date().toISOString();
+        const preset: PromptPreset = { id: crypto.randomUUID(), name, prompt, versions: [], createdAt: now, updatedAt: now };
         const updated = await window.api.settings.save({ promptPresets: [...settings.promptPresets, preset] });
         setSettings(updated);
         setNewPresetName("");
@@ -931,7 +947,7 @@ export default function Chat() {
                                     {settings.promptPresets.map((preset) => (
                                         <button
                                             key={preset.id}
-                                            onClick={() => applyPromptPreset(preset.prompt)}
+                                            onClick={() => selectPromptPreset(preset)}
                                             className="flex items-center justify-between gap-2 rounded-md px-2 py-1.5 text-left text-xs hover:bg-muted"
                                         >
                                             <span className="truncate font-medium">{preset.name}</span>
@@ -1363,6 +1379,16 @@ export default function Chat() {
                     </div>
                 </div>
             </div>
+            <PromptVariableDialog
+                open={pendingVariablePreset !== null}
+                onOpenChange={(open) => {
+                    if (!open) setPendingVariablePreset(null);
+                }}
+                variables={pendingVariablePreset ? extractVariables(pendingVariablePreset.prompt) : []}
+                onSubmit={(values) => {
+                    if (pendingVariablePreset) applyPromptPreset(fillTemplate(pendingVariablePreset.prompt, values));
+                }}
+            />
         </div>
     );
 }