Use editable default values with {placeholders} for AI prompts

Instead of showing defaults as greyed-out placeholder text, populate
textareas with the actual default prompt text so users can directly
edit it. Add {categories}, {examples}, and {transactions} placeholders
so users control where dynamic data is inserted in the prompts.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/views/settings/SettingsView.vue

@@ -470,8 +470,10 @@
           <v-card-title>Prompt Templates</v-card-title>
           <v-card-text>
             <p class="text-body-2 text-medium-emphasis mb-4">
-              Customize the prompts sent to the AI model. Leave empty to use built-in defaults.
-              The category list is always appended to the system prompt, and the transaction list is always appended to the user prompt.
+              Customize the prompts sent to the AI model. Use placeholders to control where dynamic data is inserted:
+              <strong>{categories}</strong> = category list,
+              <strong>{examples}</strong> = recent categorized transactions,
+              <strong>{transactions}</strong> = uncategorized transactions to classify.
             </p>
 
             <v-textarea
@@ -479,8 +481,6 @@
               label="System Prompt"
               variant="outlined"
               rows="8"
-              :placeholder="defaultSystemPrompt"
-              persistent-placeholder
               class="mb-4"
             />
 
@@ -488,9 +488,7 @@
               v-model="aiSettings.userPromptTemplate"
               label="User Prompt Template"
               variant="outlined"
-              rows="3"
-              :placeholder="defaultUserPromptTemplate"
-              persistent-placeholder
+              rows="5"
               class="mb-4"
             />
 
@@ -867,21 +865,27 @@ Rules:
 - "confidence" must be a number between 0 and 1
 - Include one entry for every transaction
 
-Available categories:`
+Available categories:
+{categories}`
 
-const defaultUserPromptTemplate = 'Classify these uncategorized transactions:'
+const defaultUserPromptTemplate = `{examples}Classify these uncategorized transactions:
+{transactions}`
 
 function resetPromptsToDefaults() {
-  aiSettings.systemPrompt = null
-  aiSettings.userPromptTemplate = null
+  aiSettings.systemPrompt = defaultSystemPrompt
+  aiSettings.userPromptTemplate = defaultUserPromptTemplate
 }
 
 async function loadAiSettings() {
   try {
     const { data } = await aiCategorizationApi.getSettings()
     Object.assign(aiSettings, data)
+    aiSettings.systemPrompt = aiSettings.systemPrompt || defaultSystemPrompt
+    aiSettings.userPromptTemplate = aiSettings.userPromptTemplate || defaultUserPromptTemplate
   } catch {
     // Not configured yet — defaults are fine
+    aiSettings.systemPrompt = defaultSystemPrompt
+    aiSettings.userPromptTemplate = defaultUserPromptTemplate
   }
 }