mrmd-editor 0.6.0 → 0.7.0

package/src/output-widget.js

@@ -2423,6 +2423,60 @@ ${ansiStyles}
 .cm-stdin-widget[data-password="true"] .cm-stdin-content {
   letter-spacing: 0.2em;
 }
+
+/* ==========================================================================
+   MOBILE RESPONSIVE
+
+   Output blocks need to be readable on narrow screens.
+   Horizontal scroll for wide output, larger text for readability.
+   ========================================================================== */
+
+@media (max-width: 768px) {
+  .cm-output-widget {
+    font-size: max(var(--output-font-size, 0.7em), 12px);
+    left: 0;  /* No inset on mobile — use full width */
+    right: 0;
+    padding: 8px 12px;
+  }
+
+  /* Output content lines: ensure they don't overflow */
+  .cm-output-content-line {
+    font-size: max(var(--output-font-size, 0.8em), 12px);
+  }
+
+  /* Rich output (HTML renders, plots): full width */
+  .cm-output-rich-widget {
+    max-width: 100%;
+  }
+
+  .cm-output-rich-widget iframe {
+    max-width: 100%;
+  }
+
+  /* Stdin widget: bigger input on mobile */
+  .cm-stdin-widget .cm-stdin-input {
+    font-size: 16px; /* Prevents iOS zoom */
+    padding: 10px;
+  }
+
+  .cm-stdin-widget .cm-stdin-prompt {
+    font-size: 14px;
+  }
+}
+
+@media (pointer: coarse) {
+  /* Output container: larger tap target for focus/interaction */
+  .cm-output-widget {
+    padding: 10px 14px;
+  }
+
+  /* Collapsed output: easy to tap to expand */
+  .cm-output-collapsed {
+    min-height: 44px;
+    display: flex;
+    align-items: center;
+  }
+}
 `;
 
 // #endregion STYLES

package/src/runtime-codelens/index.js

@@ -11,9 +11,9 @@
  * const extensions = createRuntimeCodeLensExtensions({
  *   projectName: 'my-project',
  *   getSessionStatus: (name) => shellState.get(`runtimes.sessions.${name}`),
- *   onStart: async (runtime) => { await electronAPI.session.start(runtime); },
- *   onStop: async (name) => { await electronAPI.session.stop(name); },
- *   onRestart: async (name) => { await electronAPI.session.restart(name); },
+ *   onStart: async (runtime) => { await electronAPI.runtime.start(runtime); },
+ *   onStop: async (name) => { await electronAPI.runtime.stop(name); },
+ *   onRestart: async (name) => { await electronAPI.runtime.restart(name); },
  *   onRestartAll: async () => { ... },
  * });
  * ```

package/src/shell/ai-menu.js

@@ -414,6 +414,76 @@ export const AI_MENU_STYLES = `
   color: #808080;
   font-style: italic;
 }
+
+/* Mobile: AI menu becomes a bottom sheet */
+@media (max-width: 768px) {
+  .ai-menu {
+    position: fixed !important;
+    left: 0 !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    top: auto !important;
+    min-width: 100%;
+    max-width: 100%;
+    border-radius: 16px 16px 0 0;
+    border: none;
+    border-top: 1px solid #3c3c3c;
+    box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.4);
+    animation: ai-menu-slide-up 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  @keyframes ai-menu-slide-up {
+    from { transform: translateY(100%); }
+    to { transform: translateY(0); }
+  }
+
+  .ai-menu-header {
+    padding: 16px 20px;
+    position: relative;
+  }
+
+  .ai-menu-header::before {
+    content: '';
+    position: absolute;
+    top: 8px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 36px;
+    height: 4px;
+    background: #666;
+    border-radius: 2px;
+    opacity: 0.4;
+  }
+
+  .ai-menu-title {
+    font-size: 16px;
+    padding-top: 4px;
+  }
+
+  .ai-menu-juice {
+    font-size: 14px;
+    padding: 6px 12px;
+    border-radius: 8px;
+  }
+
+  .ai-menu-commands {
+    max-height: 50vh;
+    padding: 8px 0;
+    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
+  }
+
+  .ai-menu-item {
+    padding: 14px 20px;
+    min-height: 48px;
+    font-size: 16px;
+  }
+
+  .ai-menu-item-icon {
+    width: 28px;
+    font-size: 18px;
+    margin-right: 12px;
+  }
+}
 `;
 
 /**

package/src/shell/components/menu.js

@@ -55,8 +55,21 @@ export function createMenu(options) {
     }
   }
 
-  // Position menu relative to anchor
+  // Detect mobile/narrow viewport
+  const isMobile = () => window.matchMedia('(max-width: 768px)').matches;
+
+  // Position menu relative to anchor (desktop) or as bottom sheet (mobile)
   function updatePosition() {
+    // On mobile, CSS handles the positioning (bottom sheet via @media queries).
+    // We just need to not set inline position styles that would conflict.
+    if (isMobile()) {
+      menu.style.top = '';
+      menu.style.left = '';
+      menu.style.right = '';
+      menu.style.bottom = '';
+      return;
+    }
+
     const anchorRect = anchor.getBoundingClientRect();
     const menuRect = menu.getBoundingClientRect();
 
@@ -96,10 +109,18 @@ export function createMenu(options) {
     menu.style.left = `${left}px`;
   }
 
+  // Mobile scrim backdrop (for bottom sheet pattern)
+  let scrim = null;
+
   // Close menu
   function close() {
     menu.remove();
+    if (scrim) {
+      scrim.remove();
+      scrim = null;
+    }
     document.removeEventListener('mousedown', handleOutsideClick);
+    document.removeEventListener('touchstart', handleOutsideClick);
     document.removeEventListener('keydown', handleKeydown);
     onClose?.();
   }
@@ -120,11 +141,28 @@ export function createMenu(options) {
 
   // Initialize
   render(items);
+
+  // On mobile, add a scrim backdrop behind the bottom sheet
+  if (isMobile()) {
+    scrim = document.createElement('div');
+    scrim.style.cssText = `
+      position: fixed;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.4);
+      z-index: 999;
+      animation: mrmd-fade-in 0.15s ease;
+    `;
+    scrim.addEventListener('click', close);
+    scrim.addEventListener('touchstart', close);
+    document.body.appendChild(scrim);
+  }
+
   document.body.appendChild(menu);
   updatePosition();
 
   // Add event listeners
   document.addEventListener('mousedown', handleOutsideClick);
+  document.addEventListener('touchstart', handleOutsideClick);
   document.addEventListener('keydown', handleKeydown);
 
   return {

package/src/shell/components/status-bar.js

@@ -1402,7 +1402,7 @@ function createRuntimesSegment({ shellState, orchestratorClient, handlers, onCle
     let runtimeCount = 0;
     if (python?.running || python?.status === 'ready') runtimeCount++;
 
-    const sessions = shellState.getSessions();
+    const sessions = shellState.getRuntimes();
     const dedicatedCount = sessions.filter(s => s.info?.dedicated).length;
     runtimeCount += dedicatedCount;
 
@@ -1650,7 +1650,7 @@ function createRuntimesSegment({ shellState, orchestratorClient, handlers, onCle
       items.push({ type: 'divider' });
       items.push({
         type: 'header',
-        label: `Active Sessions (${runtimes.sessions.length})`,
+        label: `Active Runtime Attachments (${runtimes.sessions.length})`,
       });
 
       for (const session of runtimes.sessions) {
@@ -1671,16 +1671,16 @@ function createRuntimesSegment({ shellState, orchestratorClient, handlers, onCle
         });
         items.push({
           icon: '✖',
-          label: `Close "${session.doc}" session`,
+          label: `Detach runtime from "${session.doc}"`,
           description: 'Stops monitor',
           onClick: async () => {
             try {
-              await orchestratorClient.destroySession(session.doc);
+              await orchestratorClient.destroyRuntimeAttachment(session.doc);
               cachedRuntimes = null;
               lastFetchTime = 0;
               render();
             } catch (err) {
-              console.error('Failed to close session:', err);
+              console.error('Failed to detach runtime attachment:', err);
             }
           },
         });

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

@@ -7,6 +7,9 @@
 
 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,6 +46,7 @@ export function showFilePicker(options) {
   let entries = [];
   let selectedEntry = null;
   let isLoading = false;
+  let pickerHistory = loadFilePickerHistory();
 
   // Create content
   const content = document.createElement('div');
@@ -139,10 +143,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 +178,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 +235,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 +254,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 +491,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,11 @@ export async function createStudio(target, options = {}) {
       editor = createEditorForDocument(handle, normalizedName);
       currentDocName = normalizedName;
 
-      // Ensure session exists (starts monitor if needed)
+      // 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 +557,11 @@ export async function createStudio(target, options = {}) {
     editor = createEditorForDocument(handle, docToOpen);
     currentDocName = docToOpen;
 
-    // Ensure session exists (starts monitor if needed)
+    // 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

@@ -280,53 +280,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();
   }
 
   // ===========================================================================