feat: filename separator + auto-save on arrival for Obsidian

Filename separator: adds a dropdown in Obsidian settings to replace
spaces with dashes or underscores in generated filenames. Fixes issues
with CLI tools fumbling space-escaped paths inside Obsidian vaults.
The setting flows through the save request to generateFilename() as a
post-processing step. Live preview reflects the choice.

Auto-save on arrival: adds an opt-in toggle that automatically saves
plans to Obsidian the moment they load in the browser, before the user
approves or denies. This fixes the workflow where approving from the
Claude Code CLI kills the hook server before the user can Cmd+S.
Guarded by a ref to fire only once per session.

Closes #235, closes #228.

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

Author: backnotprop

packages/editor/App.tsx

@@ -675,6 +675,49 @@ const App: React.FC = () => {
     setBlocks(parseMarkdownToBlocks(markdown));
   }, [markdown]);
 
+  // Auto-save to Obsidian on plan arrival (if enabled)
+  const autoSaveAttempted = useRef(false);
+  useEffect(() => {
+    if (!isApiMode || !markdown || isSharedSession || annotateMode) return;
+    if (autoSaveAttempted.current) return;
+
+    const obsSettings = getObsidianSettings();
+    if (!obsSettings.autoSave || !obsSettings.enabled) return;
+
+    const vaultPath = getEffectiveVaultPath(obsSettings);
+    if (!vaultPath) return;
+
+    autoSaveAttempted.current = true;
+
+    const body = {
+      obsidian: {
+        vaultPath,
+        folder: obsSettings.folder || 'plannotator',
+        plan: markdown,
+        ...(obsSettings.filenameFormat && { filenameFormat: obsSettings.filenameFormat }),
+        ...(obsSettings.filenameSeparator && obsSettings.filenameSeparator !== 'space' && { filenameSeparator: obsSettings.filenameSeparator }),
+      },
+    };
+
+    fetch('/api/save-notes', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(body),
+    })
+      .then(res => res.json())
+      .then(data => {
+        if (data.results?.obsidian?.success) {
+          setNoteSaveToast({ type: 'success', message: 'Auto-saved to Obsidian' });
+        } else {
+          setNoteSaveToast({ type: 'error', message: 'Auto-save to Obsidian failed' });
+        }
+      })
+      .catch(() => {
+        setNoteSaveToast({ type: 'error', message: 'Auto-save to Obsidian failed' });
+      })
+      .finally(() => setTimeout(() => setNoteSaveToast(null), 3000));
+  }, [isApiMode, markdown, isSharedSession, annotateMode]);
+
   // Global paste listener for image attachments
   useEffect(() => {
     const handlePaste = (e: ClipboardEvent) => {
@@ -767,6 +810,7 @@ const App: React.FC = () => {
           folder: obsidianSettings.folder || 'plannotator',
           plan: markdown,
           ...(obsidianSettings.filenameFormat && { filenameFormat: obsidianSettings.filenameFormat }),
+          ...(obsidianSettings.filenameSeparator && obsidianSettings.filenameSeparator !== 'space' && { filenameSeparator: obsidianSettings.filenameSeparator }),
         };
       }
 
@@ -980,6 +1024,7 @@ const App: React.FC = () => {
           folder: s.folder || 'plannotator',
           plan: markdown,
           ...(s.filenameFormat && { filenameFormat: s.filenameFormat }),
+          ...(s.filenameSeparator && s.filenameSeparator !== 'space' && { filenameSeparator: s.filenameSeparator }),
         };
       }
     }

packages/ui/components/Settings.tsx

@@ -732,11 +732,30 @@ export const Settings: React.FC<SettingsProps> = ({ taterMode, onTaterModeChange
                                   mm: String(now.getMinutes()).padStart(2,'0'), ss: String(now.getSeconds()).padStart(2,'0'),
                                   ampm: h24 >= 12 ? 'pm' : 'am',
                                 };
-                                return fmt.replace(/\{(\w+)\}/g, (m, k) => vars[k] ?? m) + '.md';
+                                let preview = fmt.replace(/\{(\w+)\}/g, (m, k) => vars[k] ?? m) + '.md';
+                                if (obsidian.filenameSeparator === 'dash') preview = preview.replace(/ /g, '-');
+                                else if (obsidian.filenameSeparator === 'underscore') preview = preview.replace(/ /g, '_');
+                                return preview;
                               })()}
                             </div>
                           </div>
 
+                          <div className="space-y-1.5">
+                            <label className="text-xs text-muted-foreground">Filename Separator</label>
+                            <select
+                              value={obsidian.filenameSeparator || 'space'}
+                              onChange={(e) => handleObsidianChange({ filenameSeparator: e.target.value as 'space' | 'dash' | 'underscore' })}
+                              className="w-full px-3 py-2 bg-muted rounded-lg text-xs focus:outline-none focus:ring-1 focus:ring-primary/50"
+                            >
+                              <option value="space">Spaces (default)</option>
+                              <option value="dash">Dashes (-)</option>
+                              <option value="underscore">Underscores (_)</option>
+                            </select>
+                            <div className="text-[10px] text-muted-foreground/70">
+                              Replaces spaces in the generated filename. Useful when working with CLI tools in your vault.
+                            </div>
+                          </div>
+
                           <div className="text-[10px] text-muted-foreground/70">
                             Plans saved to: {obsidian.vaultPath === CUSTOM_PATH_SENTINEL
                               ? (obsidian.customPath || '...')
@@ -756,6 +775,27 @@ tags: [plan, ...]
 
                           <div className="border-t border-border/30" />
 
+                          <div className="flex items-center justify-between">
+                            <div>
+                              <div className="text-xs font-medium">Auto-save on Plan Arrival</div>
+                              <div className="text-[10px] text-muted-foreground">
+                                Automatically save to Obsidian when a plan loads, before you approve or deny
+                              </div>
+                            </div>
+                            <button
+                              role="switch"
+                              aria-checked={obsidian.autoSave}
+                              onClick={() => handleObsidianChange({ autoSave: !obsidian.autoSave })}
+                              className={`relative inline-flex h-6 w-11 flex-shrink-0 items-center rounded-full transition-colors ${
+                                obsidian.autoSave ? 'bg-primary' : 'bg-muted'
+                              }`}
+                            >
+                              <span className={`inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform ${
+                                obsidian.autoSave ? 'translate-x-6' : 'translate-x-1'
+                              }`} />
+                            </button>
+                          </div>
+
                           <div className="flex items-center justify-between">
                             <div>
                               <div className="text-xs font-medium">Vault Browser</div>

packages/ui/utils/obsidian.ts

@@ -15,6 +15,8 @@ const STORAGE_KEY_FOLDER = 'plannotator-obsidian-folder';
 const STORAGE_KEY_CUSTOM_PATH = 'plannotator-obsidian-custom-path';
 const STORAGE_KEY_FILENAME_FORMAT = 'plannotator-obsidian-filename-format';
 const STORAGE_KEY_VAULT_BROWSER = 'plannotator-obsidian-vault-browser';
+const STORAGE_KEY_AUTOSAVE = 'plannotator-obsidian-autosave';
+const STORAGE_KEY_FILENAME_SEPARATOR = 'plannotator-obsidian-filename-separator';
 
 // Sentinel value for custom path selection
 export const CUSTOM_PATH_SENTINEL = '__custom__';
@@ -28,12 +30,16 @@ export const DEFAULT_FILENAME_FORMAT = '{title} - {Mon} {D}, {YYYY} {h}-{mm}{amp
 /**
  * Obsidian integration settings
  */
+export type FilenameSeparator = 'space' | 'dash' | 'underscore';
+
 export interface ObsidianSettings {
   enabled: boolean;
   vaultPath: string;      // Selected vault path OR '__custom__' sentinel
   folder: string;
   customPath?: string;    // User-entered path when vaultPath === '__custom__'
   filenameFormat?: string; // Custom filename format (e.g. '{YYYY}-{MM}-{DD} - {title}')
+  filenameSeparator: FilenameSeparator; // Replace spaces in filename with dash/underscore
+  autoSave: boolean;      // Auto-save to Obsidian on plan arrival
   vaultBrowserEnabled: boolean; // Show vault file browser in sidebar
 }
 
@@ -47,6 +53,8 @@ export function getObsidianSettings(): ObsidianSettings {
     folder: storage.getItem(STORAGE_KEY_FOLDER) || DEFAULT_FOLDER,
     customPath: storage.getItem(STORAGE_KEY_CUSTOM_PATH) || undefined,
     filenameFormat: storage.getItem(STORAGE_KEY_FILENAME_FORMAT) || undefined,
+    filenameSeparator: (storage.getItem(STORAGE_KEY_FILENAME_SEPARATOR) as FilenameSeparator) || 'space',
+    autoSave: storage.getItem(STORAGE_KEY_AUTOSAVE) === 'true',
     vaultBrowserEnabled: storage.getItem(STORAGE_KEY_VAULT_BROWSER) === 'true',
   };
 }
@@ -60,6 +68,8 @@ export function saveObsidianSettings(settings: ObsidianSettings): void {
   storage.setItem(STORAGE_KEY_FOLDER, settings.folder);
   storage.setItem(STORAGE_KEY_CUSTOM_PATH, settings.customPath || '');
   storage.setItem(STORAGE_KEY_FILENAME_FORMAT, settings.filenameFormat || '');
+  storage.setItem(STORAGE_KEY_FILENAME_SEPARATOR, settings.filenameSeparator || 'space');
+  storage.setItem(STORAGE_KEY_AUTOSAVE, String(settings.autoSave));
   storage.setItem(STORAGE_KEY_VAULT_BROWSER, String(settings.vaultBrowserEnabled));
 }