mrmd-server 0.1.0

package/static/http-shim.js

@@ -0,0 +1,371 @@
+/**
+ * http-shim.js - Drop-in replacement for Electron's electronAPI
+ *
+ * This shim allows the Electron UI (index.html) to work in a browser
+ * by replacing IPC calls with HTTP/WebSocket calls to mrmd-server.
+ *
+ * Usage:
+ *   <script src="/http-shim.js"></script>
+ *   <!-- Now window.electronAPI is available -->
+ */
+
+(function() {
+  'use strict';
+
+  // Get configuration from URL or defaults
+  const params = new URLSearchParams(window.location.search);
+  const TOKEN = params.get('token') || '';
+  const BASE_URL = window.MRMD_SERVER_URL || window.location.origin;
+
+  // ==========================================================================
+  // HTTP Client
+  // ==========================================================================
+
+  async function apiCall(method, path, body = null) {
+    const url = new URL(path, BASE_URL);
+    if (TOKEN) {
+      url.searchParams.set('token', TOKEN);
+    }
+
+    const options = {
+      method,
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    };
+
+    if (body !== null) {
+      options.body = JSON.stringify(body);
+    }
+
+    const response = await fetch(url.toString(), options);
+
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({ error: response.statusText }));
+      throw new Error(error.error || error.message || `HTTP ${response.status}`);
+    }
+
+    return response.json();
+  }
+
+  const GET = (path) => apiCall('GET', path);
+  const POST = (path, body) => apiCall('POST', path, body);
+  const DELETE = (path) => apiCall('DELETE', path);
+
+  // ==========================================================================
+  // WebSocket for Events
+  // ==========================================================================
+
+  const eventHandlers = {
+    'files-update': [],
+    'venv-found': [],
+    'venv-scan-done': [],
+    'project:changed': [],
+    'sync-server-died': [],
+  };
+
+  let ws = null;
+  let wsReconnectTimer = null;
+
+  function connectWebSocket() {
+    const wsUrl = new URL('/events', BASE_URL);
+    wsUrl.protocol = wsUrl.protocol === 'https:' ? 'wss:' : 'ws:';
+    if (TOKEN) {
+      wsUrl.searchParams.set('token', TOKEN);
+    }
+
+    ws = new WebSocket(wsUrl.toString());
+
+    ws.onopen = () => {
+      console.log('[http-shim] WebSocket connected');
+      if (wsReconnectTimer) {
+        clearTimeout(wsReconnectTimer);
+        wsReconnectTimer = null;
+      }
+    };
+
+    ws.onmessage = (e) => {
+      try {
+        const { event, data } = JSON.parse(e.data);
+        const handlers = eventHandlers[event];
+        if (handlers) {
+          handlers.forEach(cb => {
+            try {
+              cb(data);
+            } catch (err) {
+              console.error('[http-shim] Event handler error:', err);
+            }
+          });
+        }
+      } catch (err) {
+        console.error('[http-shim] WebSocket message error:', err);
+      }
+    };
+
+    ws.onclose = () => {
+      console.log('[http-shim] WebSocket disconnected, reconnecting in 2s...');
+      wsReconnectTimer = setTimeout(connectWebSocket, 2000);
+    };
+
+    ws.onerror = (err) => {
+      console.error('[http-shim] WebSocket error:', err);
+    };
+  }
+
+  // Connect WebSocket on load
+  connectWebSocket();
+
+  // ==========================================================================
+  // electronAPI Shim
+  // ==========================================================================
+
+  window.electronAPI = {
+    // ========================================================================
+    // System
+    // ========================================================================
+
+    getHomeDir: () => GET('/api/system/home').then(r => r.homeDir),
+
+    getRecent: () => GET('/api/system/recent'),
+
+    getAi: () => GET('/api/system/ai'),
+
+    // ========================================================================
+    // Shell (stubs for browser)
+    // ========================================================================
+
+    shell: {
+      showItemInFolder: async (fullPath) => {
+        console.log('[http-shim] showItemInFolder not available in browser:', fullPath);
+        // Could show a toast with the path
+        return { success: false, path: fullPath };
+      },
+
+      openExternal: async (url) => {
+        window.open(url, '_blank');
+        return { success: true };
+      },
+
+      openPath: async (fullPath) => {
+        console.log('[http-shim] openPath not available in browser:', fullPath);
+        return { success: false, path: fullPath };
+      },
+    },
+
+    // ========================================================================
+    // File scanning
+    // ========================================================================
+
+    scanFiles: (searchDir) => GET(`/api/file/scan?root=${encodeURIComponent(searchDir || '')}`),
+
+    onFilesUpdate: (callback) => {
+      eventHandlers['files-update'].push(callback);
+    },
+
+    // ========================================================================
+    // Venv discovery
+    // ========================================================================
+
+    discoverVenvs: (projectDir) => POST('/api/system/discover-venvs', { projectDir }),
+
+    onVenvFound: (callback) => {
+      eventHandlers['venv-found'].push(callback);
+    },
+
+    onVenvScanDone: (callback) => {
+      eventHandlers['venv-scan-done'].push(callback);
+    },
+
+    // ========================================================================
+    // File info
+    // ========================================================================
+
+    readPreview: (filePath, lines) =>
+      GET(`/api/file/preview?path=${encodeURIComponent(filePath)}&lines=${lines || 40}`)
+        .then(r => r.content),
+
+    getFileInfo: (filePath) =>
+      GET(`/api/file/info?path=${encodeURIComponent(filePath)}`),
+
+    // ========================================================================
+    // Python management
+    // ========================================================================
+
+    installMrmdPython: (venvPath) =>
+      POST('/api/system/install-mrmd-python', { venvPath }),
+
+    startPython: (venvPath, forceNew = false) =>
+      POST('/api/runtime/start-python', { venvPath, forceNew }),
+
+    // ========================================================================
+    // Runtime management
+    // ========================================================================
+
+    listRuntimes: () => GET('/api/runtime'),
+
+    killRuntime: (runtimeId) => DELETE(`/api/runtime/${encodeURIComponent(runtimeId)}`),
+
+    attachRuntime: (runtimeId) => POST(`/api/runtime/${encodeURIComponent(runtimeId)}/attach`, {}),
+
+    // ========================================================================
+    // Open file (legacy)
+    // ========================================================================
+
+    openFile: async (filePath) => {
+      // This was used to open a file and get session info
+      // We'll get project info and session info separately
+      const project = await window.electronAPI.project.get(filePath);
+      const session = await window.electronAPI.session.forDocument(filePath);
+      return { project, session };
+    },
+
+    // ========================================================================
+    // PROJECT SERVICE
+    // ========================================================================
+
+    project: {
+      get: (filePath) =>
+        GET(`/api/project?path=${encodeURIComponent(filePath)}`),
+
+      create: (targetPath) =>
+        POST('/api/project', { targetPath }),
+
+      nav: (projectRoot) =>
+        GET(`/api/project/nav?root=${encodeURIComponent(projectRoot)}`),
+
+      invalidate: (projectRoot) =>
+        POST('/api/project/invalidate', { projectRoot }),
+
+      watch: (projectRoot) =>
+        POST('/api/project/watch', { projectRoot }),
+
+      unwatch: () =>
+        POST('/api/project/unwatch', {}),
+
+      onChanged: (callback) => {
+        // Remove existing handlers to prevent duplicates (matches Electron behavior)
+        eventHandlers['project:changed'] = [callback];
+      },
+    },
+
+    // ========================================================================
+    // SESSION SERVICE
+    // ========================================================================
+
+    session: {
+      list: () => GET('/api/session'),
+
+      start: (config) => POST('/api/session', { config }),
+
+      stop: (sessionName) => DELETE(`/api/session/${encodeURIComponent(sessionName)}`),
+
+      restart: (sessionName) => POST(`/api/session/${encodeURIComponent(sessionName)}/restart`, {}),
+
+      forDocument: (documentPath) => POST('/api/session/for-document', { documentPath }),
+    },
+
+    // ========================================================================
+    // BASH SESSION SERVICE
+    // ========================================================================
+
+    bash: {
+      list: () => GET('/api/bash'),
+
+      start: (config) => POST('/api/bash', { config }),
+
+      stop: (sessionName) => DELETE(`/api/bash/${encodeURIComponent(sessionName)}`),
+
+      restart: (sessionName) => POST(`/api/bash/${encodeURIComponent(sessionName)}/restart`, {}),
+
+      forDocument: (documentPath) => POST('/api/bash/for-document', { documentPath }),
+    },
+
+    // ========================================================================
+    // FILE SERVICE
+    // ========================================================================
+
+    file: {
+      scan: (root, options = {}) => {
+        const params = new URLSearchParams();
+        if (root) params.set('root', root);
+        if (options.extensions) params.set('extensions', options.extensions.join(','));
+        if (options.maxDepth) params.set('maxDepth', options.maxDepth);
+        if (options.includeHidden) params.set('includeHidden', 'true');
+        return GET(`/api/file/scan?${params.toString()}`);
+      },
+
+      create: (filePath, content = '') =>
+        POST('/api/file/create', { filePath, content }),
+
+      createInProject: (projectRoot, relativePath, content = '') =>
+        POST('/api/file/create-in-project', { projectRoot, relativePath, content }),
+
+      move: (projectRoot, fromPath, toPath) =>
+        POST('/api/file/move', { projectRoot, fromPath, toPath }),
+
+      reorder: (projectRoot, sourcePath, targetPath, position) =>
+        POST('/api/file/reorder', { projectRoot, sourcePath, targetPath, position }),
+
+      delete: (filePath) =>
+        DELETE(`/api/file?path=${encodeURIComponent(filePath)}`),
+
+      read: (filePath) =>
+        GET(`/api/file/read?path=${encodeURIComponent(filePath)}`),
+
+      write: (filePath, content) =>
+        POST('/api/file/write', { filePath, content }),
+    },
+
+    // ========================================================================
+    // ASSET SERVICE
+    // ========================================================================
+
+    asset: {
+      list: (projectRoot) =>
+        GET(`/api/asset?projectRoot=${encodeURIComponent(projectRoot || '')}`),
+
+      save: async (projectRoot, file, filename) => {
+        // Convert Uint8Array to base64 for JSON transport
+        const base64 = btoa(String.fromCharCode.apply(null, file));
+        return POST('/api/asset/save', {
+          projectRoot,
+          file: base64,
+          filename,
+        });
+      },
+
+      relativePath: (assetPath, documentPath) =>
+        GET(`/api/asset/relative-path?assetPath=${encodeURIComponent(assetPath)}&documentPath=${encodeURIComponent(documentPath)}`)
+          .then(r => r.relativePath),
+
+      orphans: (projectRoot) =>
+        GET(`/api/asset/orphans?projectRoot=${encodeURIComponent(projectRoot || '')}`),
+
+      delete: (projectRoot, assetPath) =>
+        DELETE(`/api/asset?projectRoot=${encodeURIComponent(projectRoot || '')}&assetPath=${encodeURIComponent(assetPath)}`),
+    },
+
+    // ========================================================================
+    // DATA LOSS PREVENTION
+    // ========================================================================
+
+    onSyncServerDied: (callback) => {
+      // Remove existing handlers to prevent duplicates
+      eventHandlers['sync-server-died'] = [callback];
+    },
+  };
+
+  // ==========================================================================
+  // Expose utilities
+  // ==========================================================================
+
+  window.MRMD_HTTP_SHIM = {
+    BASE_URL,
+    TOKEN,
+    reconnectWebSocket: connectWebSocket,
+    getWebSocketState: () => ws ? ws.readyState : -1,
+  };
+
+  console.log('[http-shim] electronAPI shim loaded', { BASE_URL, hasToken: !!TOKEN });
+
+})();

package/static/index.html

@@ -0,0 +1,171 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>mrmd</title>
+
+  <!-- Load the HTTP shim BEFORE anything else -->
+  <script src="/http-shim.js"></script>
+
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+      background: #0d1117;
+      color: #c9d1d9;
+      height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .loading {
+      text-align: center;
+    }
+
+    .loading h1 {
+      font-size: 2rem;
+      margin-bottom: 1rem;
+      color: #58a6ff;
+    }
+
+    .loading p {
+      color: #8b949e;
+    }
+
+    .spinner {
+      width: 40px;
+      height: 40px;
+      border: 3px solid #30363d;
+      border-top-color: #58a6ff;
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+      margin: 1rem auto;
+    }
+
+    @keyframes spin {
+      to { transform: rotate(360deg); }
+    }
+
+    .error {
+      color: #f85149;
+      margin-top: 1rem;
+    }
+  </style>
+</head>
+<body>
+  <div class="loading" id="loading">
+    <h1>mrmd</h1>
+    <div class="spinner"></div>
+    <p>Connecting to server...</p>
+    <p class="error" id="error" style="display: none;"></p>
+  </div>
+
+  <script>
+    // Validate token and load the full UI
+    async function init() {
+      const params = new URLSearchParams(window.location.search);
+      const token = params.get('token');
+
+      if (!token) {
+        showError('No token provided. Add ?token=YOUR_TOKEN to the URL.');
+        return;
+      }
+
+      try {
+        // Validate token
+        const response = await fetch(`/auth/validate?token=${encodeURIComponent(token)}`);
+        const result = await response.json();
+
+        if (!result.valid) {
+          showError('Invalid token. Check your access URL.');
+          return;
+        }
+
+        // Token is valid - load the full UI
+        // We'll redirect to the main app or load it inline
+        loadMainApp();
+
+      } catch (err) {
+        showError(`Connection failed: ${err.message}`);
+      }
+    }
+
+    function showError(message) {
+      document.getElementById('error').textContent = message;
+      document.getElementById('error').style.display = 'block';
+    }
+
+    async function loadMainApp() {
+      // For now, show a simple UI
+      // In the full implementation, this would load the mrmd-electron index.html content
+      // or use an iframe
+
+      document.body.innerHTML = `
+        <div style="padding: 20px; max-width: 800px; margin: 0 auto;">
+          <h1 style="color: #58a6ff; margin-bottom: 20px;">mrmd-server</h1>
+          <p style="margin-bottom: 20px; color: #8b949e;">
+            Server is running. The full UI will be loaded from mrmd-electron.
+          </p>
+
+          <div style="background: #161b22; border: 1px solid #30363d; border-radius: 8px; padding: 20px;">
+            <h3 style="margin-bottom: 10px;">Quick Start</h3>
+            <p style="color: #8b949e; margin-bottom: 15px;">
+              To use the full mrmd editor, ensure mrmd-electron is available and the server
+              is configured to serve its index.html.
+            </p>
+
+            <h4 style="margin-top: 20px; margin-bottom: 10px;">API Status</h4>
+            <pre id="status" style="background: #0d1117; padding: 15px; border-radius: 4px; overflow: auto;">Loading...</pre>
+          </div>
+
+          <div style="margin-top: 20px; background: #161b22; border: 1px solid #30363d; border-radius: 8px; padding: 20px;">
+            <h3 style="margin-bottom: 10px;">Test electronAPI</h3>
+            <button onclick="testAPI()" style="background: #238636; color: white; border: none; padding: 10px 20px; border-radius: 6px; cursor: pointer;">
+              Test API
+            </button>
+            <pre id="test-result" style="background: #0d1117; padding: 15px; border-radius: 4px; overflow: auto; margin-top: 15px; display: none;"></pre>
+          </div>
+        </div>
+      `;
+
+      // Load status
+      try {
+        const homeDir = await window.electronAPI.getHomeDir();
+        const recent = await window.electronAPI.getRecent();
+
+        document.getElementById('status').textContent = JSON.stringify({
+          connected: true,
+          homeDir,
+          recentFiles: recent.files?.length || 0,
+          recentVenvs: recent.venvs?.length || 0,
+        }, null, 2);
+      } catch (err) {
+        document.getElementById('status').textContent = `Error: ${err.message}`;
+      }
+    }
+
+    window.testAPI = async function() {
+      const resultEl = document.getElementById('test-result');
+      resultEl.style.display = 'block';
+      resultEl.textContent = 'Testing...';
+
+      try {
+        const results = {
+          homeDir: await window.electronAPI.getHomeDir(),
+          recent: await window.electronAPI.getRecent(),
+          ai: await window.electronAPI.getAi(),
+        };
+
+        resultEl.textContent = JSON.stringify(results, null, 2);
+      } catch (err) {
+        resultEl.textContent = `Error: ${err.message}`;
+      }
+    };
+
+    init();
+  </script>
+</body>
+</html>