mrmd-editor 0.6.0 → 0.7.1

package/src/shell/dialogs/file-picker.js

@@ -3,10 +3,14 @@
  *
  * A dialog for browsing and selecting files.
  * Supports both project files and system-wide browsing.
+ * When connected to cloud machines, shows a machine tab bar for multi-machine browsing.
  */
 
 import { createDialog } from './base-dialog.js';
 
+const FILE_PICKER_HISTORY_KEY = 'mrmd:file-picker-history:v1';
+const FILE_PICKER_HISTORY_LIMIT = 400;
+
 // =============================================================================
 // FILE PICKER
 // =============================================================================
@@ -43,11 +47,24 @@ export function showFilePicker(options) {
   let entries = [];
   let selectedEntry = null;
   let isLoading = false;
+  let pickerHistory = loadFilePickerHistory();
+
+  // ── Machine catalog state ──
+  let catalogData = null;    // {machines: [...], cloudOnlyProjects: [...]}
+  let activeMachineTab = null; // machineId or 'local' or 'cloud'
+  let catalogView = false;   // true when showing catalog project/doc tree
+  let catalogRoot = '';      // absolute docs root (e.g. /home/ubuntu)
 
   // Create content
   const content = document.createElement('div');
   content.className = 'mrmd-filepicker';
 
+  // Machine tab bar (hidden until catalog loads)
+  const machineBar = document.createElement('div');
+  machineBar.className = 'mrmd-filepicker__machines';
+  machineBar.style.display = 'none';
+  content.appendChild(machineBar);
+
   // Path bar
   const pathBar = document.createElement('div');
   pathBar.className = 'mrmd-filepicker__path';
@@ -58,6 +75,20 @@ export function showFilePicker(options) {
   fileList.className = 'mrmd-filepicker__list';
   content.appendChild(fileList);
 
+  // Fetch catalog in background (non-blocking)
+  Promise.all([
+    orchestratorClient.getCatalog().catch(() => null),
+    orchestratorClient.listFiles().catch(() => null),
+  ]).then(([data, files]) => {
+    if (files?.root) {
+      catalogRoot = String(files.root).replace(/\/$/, '');
+    }
+    if (data?.machines?.length > 0 || data?.cloudOnlyProjects?.length > 0) {
+      catalogData = data;
+      renderMachineBar();
+    }
+  }).catch(() => { /* catalog unavailable — filesystem-only mode */ });
+
   // New file input (for save mode)
   let filenameInput = null;
   if (mode === 'save') {
@@ -81,6 +112,190 @@ export function showFilePicker(options) {
     content.appendChild(newFileRow);
   }
 
+  function catalogDocAbsolutePath(projectName, docPath) {
+    const root = catalogRoot || '';
+    const normalizedRoot = root.replace(/\/$/, '');
+    if (normalizedRoot) return `${normalizedRoot}/${projectName}/${docPath}.md`;
+    return `/${projectName}/${docPath}.md`;
+  }
+
+  // ── Machine tab bar ──
+  function renderMachineBar() {
+    if (!catalogData?.machines?.length) {
+      machineBar.style.display = 'none';
+      return;
+    }
+
+    machineBar.style.display = 'flex';
+    machineBar.innerHTML = '';
+
+    // "Local" tab (filesystem browsing — current behavior)
+    const localTab = document.createElement('button');
+    localTab.className = 'mrmd-filepicker__machine-tab' + (!catalogView ? ' mrmd-filepicker__machine-tab--active' : '');
+    localTab.textContent = '📁 Files';
+    localTab.title = 'Browse local filesystem';
+    localTab.addEventListener('click', () => {
+      catalogView = false;
+      activeMachineTab = null;
+      renderMachineBar();
+      navigateTo(currentPath);
+    });
+    machineBar.appendChild(localTab);
+
+    // One tab per connected machine
+    for (const machine of catalogData.machines) {
+      const tab = document.createElement('button');
+      const isActive = catalogView && activeMachineTab === machine.machineId;
+      const online = machine.connected !== false && machine.status !== 'offline';
+      tab.className = 'mrmd-filepicker__machine-tab'
+        + (isActive ? ' mrmd-filepicker__machine-tab--active' : '')
+        + (!online ? ' mrmd-filepicker__machine-tab--offline' : '');
+
+      const dot = online ? '🟢' : '⚫';
+      tab.textContent = `${dot} ${machine.machineName || machine.machineId}`;
+      tab.title = `${machine.hostname || machine.machineId}\n${(machine.capabilities || []).join(', ')}\n${online ? 'online' : 'offline (opens cached snapshot)'}`;
+
+      tab.addEventListener('click', () => {
+        catalogView = true;
+        activeMachineTab = machine.machineId;
+        renderMachineBar();
+        renderCatalogView(machine);
+      });
+      machineBar.appendChild(tab);
+    }
+
+    // Cloud tab (cloud-only projects)
+    if (catalogData.cloudOnlyProjects?.length > 0) {
+      const cloudTab = document.createElement('button');
+      const isActive = catalogView && activeMachineTab === 'cloud';
+      cloudTab.className = 'mrmd-filepicker__machine-tab' + (isActive ? ' mrmd-filepicker__machine-tab--active' : '');
+      cloudTab.textContent = '☁️ Cloud';
+      cloudTab.title = 'Projects only in cloud (not on any machine)';
+      cloudTab.addEventListener('click', () => {
+        catalogView = true;
+        activeMachineTab = 'cloud';
+        renderMachineBar();
+        renderCloudOnlyView();
+      });
+      machineBar.appendChild(cloudTab);
+    }
+  }
+
+  // ── Catalog view: show projects/docs for a machine ──
+  function renderCatalogView(machine) {
+    pathBar.innerHTML = '';
+    const label = document.createElement('span');
+    label.className = 'mrmd-filepicker__path-segment';
+    const online = machine.connected !== false && machine.status !== 'offline';
+    label.textContent = `${machine.machineName || machine.machineId} — ${machine.projects?.length || 0} projects${online ? '' : ' (offline snapshots)'}`;
+    pathBar.appendChild(label);
+
+    fileList.innerHTML = '';
+    const projects = machine.projects || [];
+
+    if (projects.length === 0) {
+      fileList.innerHTML = '<div class="mrmd-filepicker__empty">No projects on this machine</div>';
+      return;
+    }
+
+    for (const project of projects) {
+      // Project header
+      const projectItem = document.createElement('div');
+      projectItem.className = 'mrmd-filepicker__item mrmd-filepicker__item--project';
+      projectItem.style.cursor = 'default';
+
+      const icon = document.createElement('span');
+      icon.className = 'mrmd-filepicker__item-icon';
+      icon.textContent = '📁';
+      projectItem.appendChild(icon);
+
+      const name = document.createElement('span');
+      name.className = 'mrmd-filepicker__item-name';
+      name.style.fontWeight = '600';
+      name.textContent = project.name;
+      projectItem.appendChild(name);
+
+      const info = document.createElement('span');
+      info.className = 'mrmd-filepicker__item-info';
+      info.textContent = `${project.docCount || project.documents?.length || 0} docs`;
+      projectItem.appendChild(info);
+
+      fileList.appendChild(projectItem);
+
+      // Documents under this project
+      for (const doc of (project.documents || [])) {
+        const docItem = document.createElement('div');
+        docItem.className = 'mrmd-filepicker__item';
+        docItem.style.paddingLeft = '30px';
+
+        const docIcon = document.createElement('span');
+        docIcon.className = 'mrmd-filepicker__item-icon';
+        docIcon.textContent = '📄';
+        docItem.appendChild(docIcon);
+
+        const docName = document.createElement('span');
+        docName.className = 'mrmd-filepicker__item-name';
+        docName.textContent = doc.docPath;
+        docItem.appendChild(docName);
+
+        // Click to select, double-click to open
+        docItem.addEventListener('click', () => {
+          const fullPath = catalogDocAbsolutePath(project.name, doc.docPath);
+          selectedEntry = { name: doc.docPath, path: fullPath, type: 'file' };
+          fileList.querySelectorAll('.mrmd-filepicker__item--selected').forEach(el => el.classList.remove('mrmd-filepicker__item--selected'));
+          docItem.classList.add('mrmd-filepicker__item--selected');
+        });
+        docItem.addEventListener('dblclick', () => {
+          selectFile(catalogDocAbsolutePath(project.name, doc.docPath));
+        });
+
+        fileList.appendChild(docItem);
+      }
+    }
+  }
+
+  // ── Cloud-only view ──
+  function renderCloudOnlyView() {
+    pathBar.innerHTML = '';
+    const label = document.createElement('span');
+    label.className = 'mrmd-filepicker__path-segment';
+    label.textContent = 'Cloud-only projects (not on any machine)';
+    pathBar.appendChild(label);
+
+    fileList.innerHTML = '';
+    const projects = catalogData?.cloudOnlyProjects || [];
+
+    if (projects.length === 0) {
+      fileList.innerHTML = '<div class="mrmd-filepicker__empty">No cloud-only projects</div>';
+      return;
+    }
+
+    for (const projectName of projects) {
+      const item = document.createElement('div');
+      item.className = 'mrmd-filepicker__item';
+
+      const icon = document.createElement('span');
+      icon.className = 'mrmd-filepicker__item-icon';
+      icon.textContent = '📁';
+      item.appendChild(icon);
+
+      const name = document.createElement('span');
+      name.className = 'mrmd-filepicker__item-name';
+      name.textContent = projectName;
+      item.appendChild(name);
+
+      item.addEventListener('dblclick', () => {
+        const root = catalogRoot || '~';
+        navigateTo(`${root.replace(/\/$/, '')}/${projectName}`);
+        catalogView = false;
+        activeMachineTab = null;
+        renderMachineBar();
+      });
+
+      fileList.appendChild(item);
+    }
+  }
+
   // Render path bar
   function renderPathBar() {
     pathBar.innerHTML = '';
@@ -139,10 +354,20 @@ export function showFilePicker(options) {
       return;
     }
 
-    // Sort: directories first, then files
+    // Sort: directories first, then recency/frequency score, then name
+    const nowMs = Date.now();
     const sorted = [...entries].sort((a, b) => {
       if (a.type === 'directory' && b.type !== 'directory') return -1;
       if (a.type !== 'directory' && b.type === 'directory') return 1;
+
+      const aScore = getHistoryScore(pickerHistory.get(a.path), nowMs);
+      const bScore = getHistoryScore(pickerHistory.get(b.path), nowMs);
+      if (aScore !== bScore) return bScore - aScore;
+
+      const aModified = Number(a.modified || 0);
+      const bModified = Number(b.modified || 0);
+      if (aModified !== bModified) return bModified - aModified;
+
       return a.name.localeCompare(b.name);
     });
 
@@ -164,11 +389,26 @@ export function showFilePicker(options) {
       name.textContent = entry.name;
       item.appendChild(name);
 
-      if (entry.type === 'file' && entry.size !== undefined) {
-        const info = document.createElement('span');
-        info.className = 'mrmd-filepicker__item-info';
-        info.textContent = formatSize(entry.size);
-        item.appendChild(info);
+      if (entry.type === 'file') {
+        const infoParts = [];
+        if (entry.size !== undefined) {
+          infoParts.push(formatSize(entry.size));
+        }
+
+        const history = pickerHistory.get(entry.path);
+        if (history?.lastOpened) {
+          infoParts.push(formatTimeAgo(history.lastOpened));
+        }
+        if ((history?.count || 0) > 1) {
+          infoParts.push(`${Math.round(history.count)}x`);
+        }
+
+        if (infoParts.length > 0) {
+          const info = document.createElement('span');
+          info.className = 'mrmd-filepicker__item-info';
+          info.textContent = infoParts.join(' • ');
+          item.appendChild(info);
+        }
       }
 
       // Click handler
@@ -206,6 +446,13 @@ export function showFilePicker(options) {
       const result = await orchestratorClient.browse({ path, type: 'all' });
       currentPath = result.path;
       entries = result.entries;
+
+      // Track directory navigation with a lighter weight than file opens
+      pickerHistory = touchFilePickerHistory(pickerHistory, currentPath, {
+        timestamp: new Date().toISOString(),
+        weight: 0.25,
+      });
+      saveFilePickerHistory(pickerHistory);
     } catch (error) {
       console.error('Failed to browse:', error);
       entries = [];
@@ -218,6 +465,12 @@ export function showFilePicker(options) {
 
   // Select a file
   function selectFile(path) {
+    pickerHistory = touchFilePickerHistory(pickerHistory, path, {
+      timestamp: new Date().toISOString(),
+      weight: 1,
+    });
+    saveFilePickerHistory(pickerHistory);
+
     dialog.close();
     onSelect(path);
   }
@@ -449,3 +702,122 @@ function formatSize(bytes) {
   if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
   return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
 }
+
+function formatTimeAgo(value) {
+  if (!value) return '';
+  const ts = Date.parse(value);
+  if (!Number.isFinite(ts)) return '';
+
+  const diffMs = Math.max(0, Date.now() - ts);
+  const mins = Math.floor(diffMs / 60000);
+  if (mins < 1) return 'just now';
+  if (mins < 60) return `${mins}m ago`;
+
+  const hours = Math.floor(mins / 60);
+  if (hours < 24) return `${hours}h ago`;
+
+  const days = Math.floor(hours / 24);
+  if (days < 30) return `${days}d ago`;
+
+  const months = Math.floor(days / 30);
+  return `${months}mo ago`;
+}
+
+function getStorage() {
+  if (typeof window === 'undefined') return null;
+  try {
+    return window.localStorage || null;
+  } catch {
+    return null;
+  }
+}
+
+function loadFilePickerHistory() {
+  const storage = getStorage();
+  if (!storage) return new Map();
+
+  try {
+    const raw = storage.getItem(FILE_PICKER_HISTORY_KEY);
+    if (!raw) return new Map();
+
+    const parsed = JSON.parse(raw);
+    if (!parsed || typeof parsed !== 'object') return new Map();
+
+    const byPath = new Map();
+    for (const [filePath, value] of Object.entries(parsed)) {
+      if (!filePath || !value || typeof value !== 'object') continue;
+
+      const count = Number(value.count || 0);
+      byPath.set(filePath, {
+        path: filePath,
+        lastOpened: typeof value.lastOpened === 'string' ? value.lastOpened : null,
+        count: Number.isFinite(count) && count > 0 ? count : 1,
+      });
+    }
+
+    return byPath;
+  } catch {
+    return new Map();
+  }
+}
+
+function saveFilePickerHistory(historyMap) {
+  const storage = getStorage();
+  if (!storage) return;
+
+  try {
+    const items = Array.from(historyMap.values())
+      .filter(item => item?.path)
+      .sort((a, b) => {
+        const aTs = Date.parse(a.lastOpened || 0) || 0;
+        const bTs = Date.parse(b.lastOpened || 0) || 0;
+        if (aTs !== bTs) return bTs - aTs;
+        return (b.count || 0) - (a.count || 0);
+      })
+      .slice(0, FILE_PICKER_HISTORY_LIMIT);
+
+    const serialized = {};
+    for (const item of items) {
+      serialized[item.path] = {
+        lastOpened: item.lastOpened || null,
+        count: item.count || 1,
+      };
+    }
+
+    storage.setItem(FILE_PICKER_HISTORY_KEY, JSON.stringify(serialized));
+  } catch {
+    // Best-effort persistence only
+  }
+}
+
+function touchFilePickerHistory(historyMap, filePath, { timestamp, weight = 1 } = {}) {
+  if (!filePath) return historyMap;
+
+  const next = new Map(historyMap);
+  const existing = next.get(filePath);
+  const nextCount = Math.max(0.1, Number(existing?.count || 0) + Math.max(0.1, Number(weight) || 0.1));
+
+  next.set(filePath, {
+    path: filePath,
+    lastOpened: timestamp || new Date().toISOString(),
+    count: nextCount,
+  });
+
+  return next;
+}
+
+function getHistoryScore(historyEntry, nowMs = Date.now()) {
+  if (!historyEntry) return 0;
+
+  const count = Math.max(1, Number(historyEntry.count) || 1);
+  const openedMs = Date.parse(historyEntry.lastOpened || '');
+
+  let recencyScore = 0;
+  if (Number.isFinite(openedMs)) {
+    const ageHours = Math.max(0, (nowMs - openedMs) / 3600000);
+    recencyScore = Math.max(0, 220 - Math.log2(ageHours + 1) * 36);
+  }
+
+  const frequencyScore = Math.min(180, Math.log2(count + 1) * 60);
+  return recencyScore + frequencyScore;
+}

package/src/shell/layouts/studio.js

@@ -212,9 +212,9 @@ export async function createStudio(target, options = {}) {
       throw new Error('No sync URL returned from orchestrator');
     }
 
-    // Register the shared session in shell state
+    // Register the shared runtime in shell state
     if (runtimeUrls.python) {
-      shellState.registerSession('shared', {
+      shellState.registerRuntime('shared', {
         id: 'shared',
         url: runtimeUrls.python,
         status: 'ready',
@@ -329,7 +329,6 @@ export async function createStudio(target, options = {}) {
         ydoc: handle.ydoc,
         awareness: handle.awareness,
         runtimeUrl: monitorRuntimeUrl,
-        session: docName,
       });
     }
 
@@ -519,11 +518,23 @@ export async function createStudio(target, options = {}) {
       editor = createEditorForDocument(handle, normalizedName);
       currentDocName = normalizedName;
 
-      // Ensure session exists (starts monitor if needed)
+      // Place cursor on first empty line (after frontmatter) for a clean first impression.
+      // Without this, cursor lands at position 0, showing raw YAML frontmatter.
+      if (mrmd.findInitialCursorPosition) {
+        const pos = mrmd.findInitialCursorPosition(editor.view.state.doc.toString());
+        if (pos > 0) {
+          editor.view.dispatch({
+            selection: { anchor: pos },
+            scrollIntoView: true,
+          });
+        }
+      }
+
+      // Ensure runtime attachment exists (starts monitor if needed)
       try {
-        await orchestratorClient.createSession(normalizedName, 'shared');
+        await orchestratorClient.createRuntimeAttachment(normalizedName, 'shared');
       } catch (e) {
-        console.warn('Failed to create session for', normalizedName, e);
+        console.warn('Failed to create runtime attachment for', normalizedName, e);
       }
 
       // Update shell state
@@ -558,11 +569,22 @@ export async function createStudio(target, options = {}) {
     editor = createEditorForDocument(handle, docToOpen);
     currentDocName = docToOpen;
 
-    // Ensure session exists (starts monitor if needed)
+    // Place cursor on first empty line (after frontmatter) for a clean first impression
+    if (mrmd.findInitialCursorPosition) {
+      const pos = mrmd.findInitialCursorPosition(editor.view.state.doc.toString());
+      if (pos > 0) {
+        editor.view.dispatch({
+          selection: { anchor: pos },
+          scrollIntoView: true,
+        });
+      }
+    }
+
+    // Ensure runtime attachment exists (starts monitor if needed)
     try {
-      await orchestratorClient.createSession(docToOpen, 'shared');
+      await orchestratorClient.createRuntimeAttachment(docToOpen, 'shared');
     } catch (e) {
-      console.warn('Failed to create session for initial doc:', e);
+      console.warn('Failed to create runtime attachment for initial doc:', e);
     }
   } catch (e) {
     console.error('Failed to open initial document:', e);

package/src/shell/orchestrator-client.js

@@ -218,6 +218,51 @@ export class OrchestratorClient {
     return this._fetch(`/api/browse${query ? '?' + query : ''}`);
   }
 
+  // ===========================================================================
+  // Machine Catalog (multi-machine sync)
+  // ===========================================================================
+
+  /**
+   * Get catalog of files across all connected machines.
+   * @param {Object} [options]
+   * @param {string} [options.project] - Filter to a specific project
+   * @returns {Promise<{userId: string, machines: Array, cloudOnlyProjects?: string[]}>}
+   */
+  async getCatalog(options = {}) {
+    const params = new URLSearchParams();
+    if (options.project) params.set('project', options.project);
+    const query = params.toString();
+    return this._fetch(`/api/catalog${query ? '?' + query : ''}`);
+  }
+
+  /**
+   * Get list of connected machines.
+   * @returns {Promise<{userId: string, machines: Array}>}
+   */
+  async getMachines() {
+    return this._fetch('/api/machines');
+  }
+
+  /**
+   * Get currently active runtime machine.
+   * @returns {Promise<{activeMachineId: string|null, provider: Object|null}>}
+   */
+  async getActiveMachine() {
+    return this._fetch('/api/machines/active');
+  }
+
+  /**
+   * Set active runtime machine.
+   * @param {string|null} machineId
+   * @returns {Promise<{ok: boolean, activeMachineId: string|null, provider: Object|null}>}
+   */
+  async setActiveMachine(machineId) {
+    return this._fetch('/api/machines/active', {
+      method: 'POST',
+      body: JSON.stringify({ machineId: machineId ?? null }),
+    });
+  }
+
   // ===========================================================================
   // Environment Management
   // ===========================================================================
@@ -280,53 +325,95 @@ export class OrchestratorClient {
   }
 
   // ===========================================================================
-  // Session Management
+  // Runtime Attachments
   // ===========================================================================
 
   /**
-   * Create a session for a document
+   * Create a runtime attachment for a document
    * @param {string} doc - Document name
    * @param {'shared'|'dedicated'} python - Python runtime mode
    * @param {string} [venv] - Path to virtual environment (for dedicated runtimes)
    * @returns {Promise<Object>}
    */
-  async createSession(doc, python = 'shared', venv = null) {
+  async createRuntimeAttachment(doc, python = 'shared', venv = null) {
     const body = { doc, python };
     if (venv) {
       body.venv = venv;
     }
-    return this._fetch('/api/sessions', {
-      method: 'POST',
-      body: JSON.stringify(body),
-    });
+
+    try {
+      return await this._fetch('/api/runtimes', {
+        method: 'POST',
+        body: JSON.stringify(body),
+      });
+    } catch (err) {
+      // Legacy orchestrator compatibility
+      return this._fetch('/api/sessions', {
+        method: 'POST',
+        body: JSON.stringify(body),
+      });
+    }
   }
 
   /**
-   * Get session info for a document
+   * Get runtime attachment info for a document
    * @param {string} doc - Document name
    * @returns {Promise<Object>}
    */
-  async getSession(doc) {
-    return this._fetch(`/api/sessions/${encodeURIComponent(doc)}`);
+  async getRuntimeAttachment(doc) {
+    const encoded = encodeURIComponent(doc);
+    try {
+      return await this._fetch(`/api/runtimes/${encoded}`);
+    } catch (err) {
+      return this._fetch(`/api/sessions/${encoded}`);
+    }
   }
 
   /**
-   * Destroy a session
+   * Destroy a runtime attachment
    * @param {string} doc - Document name
    * @returns {Promise<{doc: string, status: string}>}
    */
-  async destroySession(doc) {
-    return this._fetch(`/api/sessions/${encodeURIComponent(doc)}`, {
-      method: 'DELETE',
-    });
+  async destroyRuntimeAttachment(doc) {
+    const encoded = encodeURIComponent(doc);
+    try {
+      return await this._fetch(`/api/runtimes/${encoded}`, {
+        method: 'DELETE',
+      });
+    } catch (err) {
+      return this._fetch(`/api/sessions/${encoded}`, {
+        method: 'DELETE',
+      });
+    }
   }
 
   /**
-   * List all active sessions
-   * @returns {Promise<{sessions: Array}>}
+   * List all runtime attachments
+   * @returns {Promise<{runtimes?: Array, sessions?: Array}>}
    */
+  async listRuntimeAttachments() {
+    try {
+      return await this._fetch('/api/runtimes');
+    } catch (err) {
+      return this._fetch('/api/sessions');
+    }
+  }
+
+  // Legacy aliases
+  async createSession(doc, python = 'shared', venv = null) {
+    return this.createRuntimeAttachment(doc, python, venv);
+  }
+
+  async getSession(doc) {
+    return this.getRuntimeAttachment(doc);
+  }
+
+  async destroySession(doc) {
+    return this.destroyRuntimeAttachment(doc);
+  }
+
   async listSessions() {
-    return this._fetch('/api/sessions');
+    return this.listRuntimeAttachments();
   }
 
   // ===========================================================================