Add SSH remote markdown file preview support

Shell out to the system ssh binary to open, watch, and tab-complete
markdown files on remote hosts (user@host:/path format). Inherits
~/.ssh/config, keys, and agent with zero remote setup.

Also refactors: extract shared get_file_mtime helper, move git helpers
to git.rs, extract render_local_markdown helper. Adds toggle-visibility
eye icons on password fields in settings dialog.

Author: liuchengxu

crates/markdown_preview_core/js/path-input.js

@@ -13,9 +13,12 @@
         currentGitRoot: null // Git root of current file
     };
 
-    // Fetch path completions from backend
+    // Fetch path completions from backend (local or SSH)
     async function fetchCompletions(partial) {
         try {
+            if (typeof isSshPath === 'function' && isSshPath(partial)) {
+                return await invoke('complete_ssh_path', { partial });
+            }
             return await invoke('complete_path', { partial });
         } catch (e) {
             console.error('Failed to fetch completions:', e);
@@ -186,12 +189,12 @@
             modal.innerHTML = `
                 <div class="path-input-container">
                     <div class="path-input-header">
-                        <label>Open file or URL</label>
-                        <span class="path-input-hint">Type path to autocomplete, or paste a GitHub URL</span>
+                        <label>Open file, URL, or SSH path</label>
+                        <span class="path-input-hint">Type path, paste GitHub URL, or enter user@host:/path</span>
                     </div>
                     <div class="path-input-wrapper">
                         <input type="text" id="path-input-field" class="path-input-field"
-                               placeholder="/path/to/file.md or https://github.com/..." autocomplete="off" spellcheck="false">
+                               placeholder="/path/to/file.md, https://..., or user@host:/path" autocomplete="off" spellcheck="false">
                         <div id="path-autocomplete" class="path-autocomplete"></div>
                     </div>
                     <div class="path-input-footer">

crates/markdown_preview_core/js/settings-dialog.js

@@ -18,7 +18,13 @@
                             <h4>GitHub</h4>
                             <div class="settings-field">
                                 <label for="settings-github-token">Personal Access Token</label>
-                                <input type="password" id="settings-github-token" placeholder="ghp_xxxxxxxxxxxxxxxxxxxx" autocomplete="off" spellcheck="false">
+                                <div class="settings-password-wrapper">
+                                    <input type="password" id="settings-github-token" placeholder="ghp_xxxxxxxxxxxxxxxxxxxx" autocomplete="off" spellcheck="false">
+                                    <button type="button" class="settings-toggle-vis" data-target="settings-github-token" title="Toggle visibility">
+                                        <svg class="eye-icon" viewBox="0 0 16 16" width="16" height="16"><path d="M8 3C4.5 3 1.6 5.1.3 8c1.3 2.9 4.2 5 7.7 5s6.4-2.1 7.7-5C14.4 5.1 11.5 3 8 3zm0 8.3a3.3 3.3 0 1 1 0-6.6 3.3 3.3 0 0 1 0 6.6zm0-5.3a2 2 0 1 0 0 4 2 2 0 0 0 0-4z" fill="currentColor"/></svg>
+                                        <svg class="eye-off-icon" viewBox="0 0 16 16" width="16" height="16" style="display:none"><path d="M14.5 1.5l-13 13m3.1-4.9A3.3 3.3 0 0 1 8 4.7m3.4 1.9A3.3 3.3 0 0 1 8 11.3M.3 8c1.3-2.9 4.2-5 7.7-5 1.2 0 2.3.3 3.3.7m2.4 1.7c1 1 1.7 2 2 2.6-1.3 2.9-4.2 5-7.7 5-1.2 0-2.3-.3-3.3-.7" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg>
+                                    </button>
+                                </div>
                                 <p class="settings-hint">Used for accessing private repositories. Falls back to GITHUB_TOKEN env var.</p>
                             </div>
                         </div>
@@ -39,7 +45,13 @@
                             </div>
                             <div class="settings-field" id="settings-api-key-field" style="display:none;">
                                 <label for="settings-ai-api-key">API Key</label>
-                                <input type="password" id="settings-ai-api-key" placeholder="sk-..." autocomplete="off" spellcheck="false">
+                                <div class="settings-password-wrapper">
+                                    <input type="password" id="settings-ai-api-key" placeholder="sk-..." autocomplete="off" spellcheck="false">
+                                    <button type="button" class="settings-toggle-vis" data-target="settings-ai-api-key" title="Toggle visibility">
+                                        <svg class="eye-icon" viewBox="0 0 16 16" width="16" height="16"><path d="M8 3C4.5 3 1.6 5.1.3 8c1.3 2.9 4.2 5 7.7 5s6.4-2.1 7.7-5C14.4 5.1 11.5 3 8 3zm0 8.3a3.3 3.3 0 1 1 0-6.6 3.3 3.3 0 0 1 0 6.6zm0-5.3a2 2 0 1 0 0 4 2 2 0 0 0 0-4z" fill="currentColor"/></svg>
+                                        <svg class="eye-off-icon" viewBox="0 0 16 16" width="16" height="16" style="display:none"><path d="M14.5 1.5l-13 13m3.1-4.9A3.3 3.3 0 0 1 8 4.7m3.4 1.9A3.3 3.3 0 0 1 8 11.3M.3 8c1.3-2.9 4.2-5 7.7-5 1.2 0 2.3.3 3.3.7m2.4 1.7c1 1 1.7 2 2 2.6-1.3 2.9-4.2 5-7.7 5-1.2 0-2.3-.3-3.3-.7" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg>
+                                    </button>
+                                </div>
                                 <p class="settings-hint" id="settings-api-key-hint"></p>
                             </div>
                             <div class="settings-field" id="settings-ollama-url-field" style="display:none;">
@@ -162,6 +174,30 @@
                     color: #9ca3af;
                     margin: 4px 0 0 0;
                 }
+                .settings-password-wrapper {
+                    position: relative;
+                    display: flex;
+                    align-items: center;
+                }
+                .settings-password-wrapper input {
+                    padding-right: 36px;
+                }
+                .settings-toggle-vis {
+                    position: absolute;
+                    right: 6px;
+                    background: none;
+                    border: none;
+                    cursor: pointer;
+                    padding: 4px;
+                    color: #9ca3af;
+                    display: flex;
+                    align-items: center;
+                    border-radius: 4px;
+                }
+                .settings-toggle-vis:hover {
+                    color: #6b7280;
+                    background: rgba(0,0,0,0.05);
+                }
                 .settings-footer {
                     padding: 12px 20px;
                     background: #f6f8fa;
@@ -204,6 +240,8 @@
                     .settings-field input,
                     .settings-field select { background: #2d2d2d; border-color: #444; color: #fff; }
                     .settings-hint { color: #6b7280; }
+                    .settings-toggle-vis { color: #6b7280; }
+                    .settings-toggle-vis:hover { color: #9ca3af; background: rgba(255,255,255,0.08); }
                     .settings-footer { background: #252525; border-color: #333; }
                     .settings-footer .btn-cancel { background: #333; border-color: #444; color: #fff; }
                 }
@@ -236,6 +274,24 @@
 
         providerSelect.addEventListener('change', updateFieldVisibility);
 
+        // Toggle password visibility
+        dialog.querySelectorAll('.settings-toggle-vis').forEach(btn => {
+            btn.addEventListener('click', () => {
+                const input = document.getElementById(btn.dataset.target);
+                const eyeIcon = btn.querySelector('.eye-icon');
+                const eyeOffIcon = btn.querySelector('.eye-off-icon');
+                if (input.type === 'password') {
+                    input.type = 'text';
+                    eyeIcon.style.display = 'none';
+                    eyeOffIcon.style.display = '';
+                } else {
+                    input.type = 'password';
+                    eyeIcon.style.display = '';
+                    eyeOffIcon.style.display = 'none';
+                }
+            });
+        });
+
         // Dictionary directory management
         let dictDirs = [];
         const dictDirsContainer = document.getElementById('settings-dict-dirs');

crates/markdown_preview_core/js/tauri-app.js

@@ -136,8 +136,10 @@ if (typeof window.__TAURI__ !== 'undefined') {
                 // Add to path history (use canonical path from result)
                 if (result.file_path) {
                     addToPathHistory(result.file_path);
-                    // Fetch diff for the file (async, don't block)
-                    fetchFileDiff(result.file_path);
+                    // Fetch diff for the file (async, don't block) — skip for SSH paths
+                    if (!isSshPath(result.file_path)) {
+                        fetchFileDiff(result.file_path);
+                    }
                 }
                 return result;
             }
@@ -167,6 +169,13 @@ if (typeof window.__TAURI__ !== 'undefined') {
         return str.startsWith('http://') || str.startsWith('https://');
     }
 
+    // Check if a string is an SSH path (SCP-style: [user@]host:/path)
+    function isSshPath(str) {
+        if (!str || str.startsWith('http://') || str.startsWith('https://')) return false;
+        // Match [user@]host:/path — host must start with alphanumeric
+        return /^(?:[a-zA-Z0-9][a-zA-Z0-9._-]*@)?[a-zA-Z0-9][a-zA-Z0-9._-]*:\//.test(str);
+    }
+
     // Open a URL
     async function openUrl(url) {
         try {
@@ -194,6 +203,23 @@ if (typeof window.__TAURI__ !== 'undefined') {
         return null;
     }
 
+    // Open a file via SSH
+    async function openSshFile(sshPath) {
+        try {
+            showToast('Connecting via SSH...');
+            const result = await invoke('open_ssh_file', { path: sshPath });
+            if (result && (result.html || result.output)) {
+                handleFileOpened(result);
+                addToPathHistory(sshPath);
+                return result;
+            }
+        } catch (e) {
+            console.error('Failed to open SSH file:', e);
+            showToast('SSH error: ' + (e.message || e));
+        }
+        return null;
+    }
+
     // Open a URL with a user-provided GitHub token
     // Returns { success: true, result } or { success: false, error }
     async function openUrlWithToken(url, token) {
@@ -450,10 +476,12 @@ if (typeof window.__TAURI__ !== 'undefined') {
         showToast('Loaded from URL');
     }
 
-    // Open a path or URL (auto-detects)
+    // Open a path, URL, or SSH path (auto-detects)
     async function openPathOrUrl(input) {
         if (isUrl(input)) {
             return await openUrl(input);
+        } else if (isSshPath(input)) {
+            return await openSshFile(input);
         } else {
             return await openFile(input);
         }
@@ -548,9 +576,15 @@ if (typeof window.__TAURI__ !== 'undefined') {
             loadRecentFilesFromBackend();
 
             // Start watching the file for changes
-            invoke('watch_file', { path: result.file_path }).catch(e => {
-                console.error('Failed to watch file:', e);
-            });
+            if (isSshPath(result.file_path)) {
+                invoke('watch_ssh_file', { path: result.file_path }).catch(e => {
+                    console.error('Failed to watch SSH file:', e);
+                });
+            } else {
+                invoke('watch_file', { path: result.file_path }).catch(e => {
+                    console.error('Failed to watch file:', e);
+                });
+            }
         }
 
         // Update metadata bar
@@ -655,6 +689,17 @@ if (typeof window.__TAURI__ !== 'undefined') {
             await openFile(event.payload);
         });
 
+        // Listen for SSH watch error/recovery events
+        listen('ssh-watch-error', (event) => {
+            console.warn('SSH watcher error:', event.payload);
+            showToast('SSH connection lost — retrying...');
+        });
+
+        listen('ssh-watch-recovered', () => {
+            console.log('SSH watcher recovered');
+            showToast('SSH connection restored');
+        });
+
         // Listen for AI summary progress events
         listen('ai-summary-progress', (event) => {
             const { status, filePath, completed, total } = event.payload;

mead/Cargo.lock

@@ -33,7 +33,7 @@ reqwest = { version = "0.12", features = ["json", "native-tls"], default-feature
 serde = { version = "1.0", features = ["derive"] }
 serde_json = "1.0"
 similar = "2"
-tokio = { version = "1.36", features = ["sync", "fs", "rt-multi-thread", "macros"] }
+tokio = { version = "1.36", features = ["sync", "fs", "process", "rt-multi-thread", "macros", "time"] }
 tracing = "0.1"
 tracing-subscriber = { version = "0.3", features = ["env-filter"] }
 

mead/Cargo.toml

@@ -196,9 +196,7 @@ async fn anthropic_request(
 
     // OAuth tokens require the Claude Code identity in the system prompt.
     let effective_system = if oauth {
-        format!(
-            "You are Claude Code, Anthropic's official CLI for Claude.\n\n{system_prompt}"
-        )
+        format!("You are Claude Code, Anthropic's official CLI for Claude.\n\n{system_prompt}")
     } else {
         system_prompt.to_string()
     };
@@ -221,10 +219,7 @@ async fn anthropic_request(
         // OAuth tokens use Bearer auth and must present Claude Code identity headers.
         request = request
             .header("Authorization", format!("Bearer {api_key}"))
-            .header(
-                "anthropic-beta",
-                "claude-code-20250219,oauth-2025-04-20",
-            )
+            .header("anthropic-beta", "claude-code-20250219,oauth-2025-04-20")
             .header("user-agent", "claude-cli/2.1.2 (external, cli)")
             .header("x-app", "cli");
     } else {
@@ -242,11 +237,9 @@ async fn anthropic_request(
         let status = response.status();
         let body = response.text().await.unwrap_or_default();
         if oauth && status == reqwest::StatusCode::UNAUTHORIZED {
-            return Err(
-                "Anthropic OAuth token expired or invalid. \
+            return Err("Anthropic OAuth token expired or invalid. \
                  Run `claude setup-token` to generate a new one and paste it in Settings."
-                    .to_string(),
-            );
+                .to_string());
         }
         return Err(format!("Anthropic returned status {status}: {body}"));
     }

mead/src/ai.rs

@@ -59,12 +59,8 @@ pub async fn get_file_diff(
         .map_err(|e| format!("Failed to read file: {e}"))?;
 
     // Get current file modification time
-    let current_time = tokio::fs::metadata(&path)
+    let current_time = super::get_file_mtime(std::path::Path::new(&path))
         .await
-        .ok()
-        .and_then(|m| m.modified().ok())
-        .and_then(|t| t.duration_since(std::time::UNIX_EPOCH).ok())
-        .map(|d| d.as_millis() as u64)
         .unwrap_or(0);
 
     // Get previous snapshot and compute diff