mrmd-editor 0.6.0 → 0.7.1

package/src/shell/state.js

@@ -69,12 +69,12 @@ function getInitialState() {
     runtimes: {
       // Legacy: single Python runtime info (for backward compat)
       python: null,
-      // New: multiple runtime sessions
+      // Runtime registry
       sessions: {
         // 'shared': { id, url, status, venv, cwd, ... }
         // 'python-8001': { id, url, status, venv, cwd, dedicated: true, port: 8001 }
       },
-      // Document → session attachment
+      // Document → runtime attachment
       attachments: {
         // 'my-notebook': 'shared'
         // 'data-analysis': 'python-8001'
@@ -464,55 +464,55 @@ export class ShellStateManager {
   }
 
   // ===========================================================================
-  // Runtime Session Management
+  // Runtime Attachment Management
   // ===========================================================================
 
   /**
-   * Get the session attached to a document
+   * Get the runtime attached to a document
    * @param {string} docName - Document name
-   * @returns {string} Session ID (defaults to 'shared')
+   * @returns {string} Runtime ID (defaults to 'shared')
    */
-  getDocumentSession(docName) {
+  getDocumentRuntime(docName) {
     return this.get(`runtimes.attachments.${docName}`) || 'shared';
   }
 
   /**
-   * Get session info
-   * @param {string} sessionId - Session ID
+   * Get runtime info
+   * @param {string} runtimeId - Runtime ID
    * @returns {Object|null}
    */
-  getSession(sessionId) {
-    return this.get(`runtimes.sessions.${sessionId}`) || null;
+  getRuntime(runtimeId) {
+    return this.get(`runtimes.sessions.${runtimeId}`) || null;
   }
 
   /**
-   * Get all available sessions
+   * Get all available runtimes
    * @returns {Array<{id: string, info: Object}>}
    */
-  getSessions() {
-    const sessions = this.get('runtimes.sessions') || {};
-    return Object.entries(sessions).map(([id, info]) => ({ id, info }));
+  getRuntimes() {
+    const runtimes = this.get('runtimes.sessions') || {};
+    return Object.entries(runtimes).map(([id, info]) => ({ id, info }));
   }
 
   /**
-   * Attach a document to a session
+   * Attach a document to a runtime
    * @param {string} docName - Document name
-   * @param {string} sessionId - Session ID to attach to
+   * @param {string} runtimeId - Runtime ID to attach to
    */
-  attachDocument(docName, sessionId) {
-    this._set(`runtimes.attachments.${docName}`, sessionId);
+  attachDocument(docName, runtimeId) {
+    this._set(`runtimes.attachments.${docName}`, runtimeId);
   }
 
   /**
-   * Register a runtime session
-   * @param {string} sessionId - Session ID
-   * @param {Object} info - Session info (url, status, venv, cwd, etc.)
+   * Register runtime metadata
+   * @param {string} runtimeId - Runtime ID
+   * @param {Object} info - Runtime info (url, status, venv, cwd, etc.)
    */
-  registerSession(sessionId, info) {
-    this._set(`runtimes.sessions.${sessionId}`, info);
+  registerRuntime(runtimeId, info) {
+    this._set(`runtimes.sessions.${runtimeId}`, info);
 
-    // Also update legacy python state if this is the shared session
-    if (sessionId === 'shared' && info.language === 'python') {
+    // Also update legacy python state if this is the shared runtime
+    if (runtimeId === 'shared' && info.language === 'python') {
       this._set('runtimes.python', {
         language: 'python',
         version: info.version,
@@ -527,20 +527,20 @@ export class ShellStateManager {
   }
 
   /**
-   * Create a new dedicated runtime session
-   * @param {string} docName - Document to attach the session to
+   * Create and attach a runtime
+   * @param {string} docName - Document to attach runtime to
    * @param {'shared'|'dedicated'} mode - Runtime mode
    * @param {string} [venv] - Path to virtual environment (for dedicated runtimes)
-   * @returns {Promise<Object>} Session info
+   * @returns {Promise<Object>} Runtime info
    */
-  async createSession(docName, mode = 'dedicated', venv = null) {
+  async createRuntime(docName, mode = 'dedicated', venv = null) {
     try {
-      const result = await this._client.createSession(docName, mode, venv);
+      const result = await this._client.createRuntimeAttachment(docName, mode, venv);
 
-      const sessionId = result.id || (mode === 'dedicated' ? `python-${result.runtimes?.python?.port || Date.now()}` : 'shared');
+      const runtimeId = result.id || (mode === 'dedicated' ? `python-${result.runtimes?.python?.port || Date.now()}` : 'shared');
 
-      const sessionInfo = {
-        id: sessionId,
+      const runtimeInfo = {
+        id: runtimeId,
         url: result.runtimes?.python?.url || result.sync,
         status: 'ready',
         dedicated: mode === 'dedicated',
@@ -550,15 +550,15 @@ export class ShellStateManager {
         docName,
       };
 
-      // Register the session
-      this.registerSession(sessionId, sessionInfo);
+      // Register runtime
+      this.registerRuntime(runtimeId, runtimeInfo);
 
-      // Attach the document to this session
-      this.attachDocument(docName, sessionId);
+      // Attach document to runtime
+      this.attachDocument(docName, runtimeId);
 
-      return sessionInfo;
+      return runtimeInfo;
     } catch (error) {
-      console.error('Failed to create session:', error);
+      console.error('Failed to create runtime:', error);
       throw error;
     }
   }
@@ -569,9 +569,30 @@ export class ShellStateManager {
    * @returns {string|null} Runtime URL
    */
   getRuntimeUrl(docName) {
-    const sessionId = this.getDocumentSession(docName);
-    const session = this.getSession(sessionId);
-    return session?.url || null;
+    const runtimeId = this.getDocumentRuntime(docName);
+    const runtime = this.getRuntime(runtimeId);
+    return runtime?.url || null;
+  }
+
+  // Legacy aliases
+  getDocumentSession(docName) {
+    return this.getDocumentRuntime(docName);
+  }
+
+  getSession(sessionId) {
+    return this.getRuntime(sessionId);
+  }
+
+  getSessions() {
+    return this.getRuntimes();
+  }
+
+  registerSession(sessionId, info) {
+    this.registerRuntime(sessionId, info);
+  }
+
+  async createSession(docName, mode = 'dedicated', venv = null) {
+    return this.createRuntime(docName, mode, venv);
   }
 
   // ===========================================================================

package/src/shell/styles.js

@@ -160,6 +160,24 @@ export const statusBarStyles = `
   margin-left: 4px;
 }
 
+/* Active machine pill (simple status bar mode) */
+.mrmd-statusbar__machine-pill {
+  display: inline-flex;
+  align-items: center;
+  padding: 1px 6px;
+  border-radius: 10px;
+  border: 1px solid var(--mrmd-border, #333);
+  background: var(--mrmd-hover-bg, rgba(255,255,255,0.06));
+  color: var(--mrmd-fg, #ccc);
+  font-size: 10px;
+  line-height: 1.2;
+  cursor: pointer;
+}
+
+.mrmd-statusbar__machine-pill:hover {
+  border-color: var(--mrmd-accent, #58a6ff);
+}
+
 /* Unified files segment - takes more space */
 .mrmd-statusbar__segment--files {
   min-width: 120px;
@@ -505,6 +523,50 @@ export const filePickerStyles = `
   min-height: 300px;
 }
 
+/* Machine tab bar */
+.mrmd-filepicker__machines {
+  display: flex;
+  gap: 4px;
+  padding: 6px 0;
+  margin-bottom: 4px;
+  border-bottom: 1px solid var(--mrmd-border, #333);
+  overflow-x: auto;
+  white-space: nowrap;
+  -webkit-overflow-scrolling: touch;
+}
+
+.mrmd-filepicker__machine-tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 10px;
+  border-radius: 12px;
+  border: 1px solid var(--mrmd-border, #333);
+  background: transparent;
+  color: var(--mrmd-fg-muted, #888);
+  font-size: var(--mrmd-ui-font-size-sm, 11px);
+  font-family: inherit;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background 0.1s, color 0.1s, border-color 0.1s;
+}
+
+.mrmd-filepicker__machine-tab:hover {
+  background: var(--mrmd-hover-bg, rgba(255, 255, 255, 0.08));
+  color: var(--mrmd-fg, #ccc);
+}
+
+.mrmd-filepicker__machine-tab--active {
+  background: var(--mrmd-selection-bg, rgba(0, 122, 204, 0.2));
+  color: var(--mrmd-fg, #ccc);
+  border-color: var(--mrmd-accent, #58a6ff);
+}
+
+.mrmd-filepicker__machine-tab--offline {
+  opacity: 0.7;
+  border-style: dashed;
+}
+
 /* Path bar */
 .mrmd-filepicker__path {
   display: flex;
@@ -601,6 +663,271 @@ export const filePickerStyles = `
 }
 `;
 
+// =============================================================================
+// MOBILE RESPONSIVE STYLES
+// =============================================================================
+
+export const mobileStyles = `
+/* ---- Status Bar: mobile-friendly ---- */
+@media (max-width: 768px) {
+  .mrmd-statusbar {
+    height: auto;
+    min-height: 44px;
+    padding: 8px 12px;
+    gap: 4px;
+    font-size: 13px;
+    flex-wrap: wrap;
+    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
+  }
+
+  .mrmd-statusbar__segment {
+    padding: 8px 12px;
+    min-height: 44px;
+    font-size: 14px;
+  }
+
+  .mrmd-statusbar__segment--files {
+    min-width: 0;
+    flex: 1;
+  }
+
+  .mrmd-statusbar__icon {
+    width: 18px;
+    height: 18px;
+  }
+
+  .mrmd-statusbar__dot {
+    width: 10px;
+    height: 10px;
+  }
+
+  .mrmd-statusbar__badge {
+    font-size: 10px;
+    padding: 2px 6px;
+  }
+
+  .mrmd-statusbar__separator {
+    display: none;
+  }
+
+  .mrmd-statusbar__spacer {
+    display: none;
+  }
+}
+
+/* ---- Menus → Bottom sheets on mobile ---- */
+@media (max-width: 768px) {
+  .mrmd-menu {
+    position: fixed !important;
+    top: auto !important;
+    left: 0 !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    max-width: 100% !important;
+    min-width: 100% !important;
+    max-height: 70vh;
+    border-radius: 16px 16px 0 0;
+    box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.4);
+    padding: 8px 0;
+    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
+    animation: mrmd-slide-up 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  @keyframes mrmd-slide-up {
+    from { transform: translateY(100%); }
+    to { transform: translateY(0); }
+  }
+
+  /* Drag handle at top of bottom sheet */
+  .mrmd-menu::before {
+    content: '';
+    display: block;
+    width: 36px;
+    height: 4px;
+    background: var(--mrmd-fg-muted, #666);
+    border-radius: 2px;
+    margin: 4px auto 8px;
+    opacity: 0.4;
+  }
+
+  .mrmd-menu__header {
+    padding: 12px 20px 8px;
+    font-size: 12px;
+  }
+
+  .mrmd-menu__item {
+    padding: 14px 20px;
+    min-height: 48px;
+    font-size: 15px;
+    gap: 14px;
+  }
+
+  .mrmd-menu__item-icon {
+    width: 22px;
+    height: 22px;
+    font-size: 18px;
+  }
+
+  .mrmd-menu__item-shortcut {
+    display: none; /* Keyboard shortcuts aren't relevant on touch */
+  }
+
+  .mrmd-menu__info {
+    padding: 10px 20px;
+    font-size: 12px;
+  }
+
+  .mrmd-menu__divider {
+    margin: 6px 16px;
+  }
+
+  .mrmd-menu__file {
+    padding: 12px 20px;
+    min-height: 48px;
+    font-size: 15px;
+  }
+}
+
+/* ---- Dialogs: full-screen on mobile ---- */
+@media (max-width: 768px) {
+  .mrmd-dialog-overlay {
+    padding: 0;
+    align-items: flex-end;
+  }
+
+  .mrmd-dialog {
+    min-width: 100%;
+    max-width: 100%;
+    max-height: 90vh;
+    border-radius: 16px 16px 0 0;
+    border: none;
+    border-top: 1px solid var(--mrmd-dialog-border, var(--mrmd-border, #454545));
+    animation: mrmd-slide-up 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .mrmd-dialog__header {
+    padding: 16px 20px;
+    position: relative;
+  }
+
+  /* Drag handle */
+  .mrmd-dialog__header::before {
+    content: '';
+    position: absolute;
+    top: 8px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 36px;
+    height: 4px;
+    background: var(--mrmd-fg-muted, #888);
+    border-radius: 2px;
+    opacity: 0.4;
+  }
+
+  .mrmd-dialog__title {
+    font-size: 16px;
+    padding-top: 8px;
+  }
+
+  .mrmd-dialog__close {
+    width: 44px;
+    height: 44px;
+    font-size: 22px;
+  }
+
+  .mrmd-dialog__body {
+    padding: 16px 20px;
+  }
+
+  .mrmd-dialog__footer {
+    padding: 16px 20px;
+    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
+    gap: 12px;
+  }
+
+  .mrmd-input {
+    padding: 12px 14px;
+    font-size: 16px; /* Prevents iOS zoom on focus */
+    border-radius: 8px;
+  }
+
+  .mrmd-button {
+    padding: 12px 20px;
+    font-size: 15px;
+    border-radius: 8px;
+    min-height: 44px;
+  }
+}
+
+/* ---- File Picker: full-height on mobile ---- */
+@media (max-width: 768px) {
+  .mrmd-filepicker {
+    min-height: 50vh;
+  }
+
+  .mrmd-filepicker__path {
+    padding: 12px 0;
+    gap: 2px;
+  }
+
+  .mrmd-filepicker__path-segment {
+    padding: 6px 10px;
+    font-size: 14px;
+    min-height: 36px;
+  }
+
+  .mrmd-filepicker__item {
+    padding: 14px 12px;
+    min-height: 52px;
+    font-size: 15px;
+    gap: 14px;
+  }
+
+  .mrmd-filepicker__item-icon {
+    font-size: 20px;
+    width: 28px;
+  }
+
+  .mrmd-filepicker__item-info {
+    font-size: 12px;
+  }
+}
+
+/* ---- Touch-specific: larger targets for coarse pointers ---- */
+@media (pointer: coarse) {
+  .mrmd-statusbar__segment {
+    min-height: 44px;
+  }
+
+  .mrmd-menu__item {
+    min-height: 48px;
+  }
+
+  .mrmd-dialog__close {
+    min-width: 44px;
+    min-height: 44px;
+  }
+
+  .mrmd-button {
+    min-height: 44px;
+  }
+
+  .mrmd-filepicker__item {
+    min-height: 48px;
+  }
+
+  .mrmd-filepicker__path-segment {
+    min-height: 36px;
+  }
+}
+
+/* ---- Shared mobile animation keyframes ---- */
+@keyframes mrmd-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+`;
+
 // =============================================================================
 // ALL STYLES COMBINED
 // =============================================================================
@@ -672,6 +999,7 @@ ${menuStyles}
 ${dialogStyles}
 ${filePickerStyles}
 ${studioStyles}
+${mobileStyles}
 `;
 
 // =============================================================================

package/src/term-pty-client.js

@@ -124,7 +124,20 @@ export class PtyClient {
       };
 
       this.ws.onmessage = (event) => {
-        this.config.onData(event.data);
+        // Handle both text and binary messages. Text is the normal case
+        // (PTY sends terminal output as text). Binary may arrive if the
+        // tunnel proxy incorrectly marks a frame as binary — convert to
+        // string so xterm.js can render it (xterm doesn't handle Blobs).
+        const data = event.data;
+        if (typeof data === 'string') {
+          this.config.onData(data);
+        } else if (data instanceof Blob) {
+          data.text().then(text => this.config.onData(text));
+        } else if (data instanceof ArrayBuffer) {
+          this.config.onData(new TextDecoder().decode(data));
+        } else {
+          this.config.onData(data);
+        }
       };
 
       this.ws.onerror = (event) => {
@@ -172,16 +185,58 @@ export class PtyClient {
   }
 
   /**
-   * Send data to the PTY (user input)
+   * Send data to the PTY (user input).
+   * Large payloads (pastes) are chunked to avoid overwhelming the terminal
+   * renderer and WebSocket tunnel on markco.dev.
+   *
    * @param {string} data - Input data
    */
   write(data) {
-    if (this.ws && this.ws.readyState === WebSocket.OPEN) {
-      this.ws.send(JSON.stringify({
-        type: 'input',
-        data: data,
-      }));
+    if (!this.ws || this.ws.readyState !== WebSocket.OPEN) return;
+
+    // Small inputs (normal typing, control sequences): send immediately
+    if (data.length <= 4096) {
+      this.ws.send(JSON.stringify({ type: 'input', data }));
+      return;
+    }
+
+    // Large paste: chunk it to prevent UI freeze.
+    // xterm.js may wrap pastes in bracketed paste markers (\x1b[200~ ... \x1b[201~).
+    // We preserve those: send a leading marker once, chunk the body, send trailing marker.
+    const BPS = '\x1b[200~';
+    const BPE = '\x1b[201~';
+    let body = data;
+    let hasBracket = false;
+
+    if (body.startsWith(BPS) && body.endsWith(BPE)) {
+      hasBracket = true;
+      body = body.slice(BPS.length, -BPE.length);
     }
+
+    const CHUNK_SIZE = 2048;
+    const CHUNK_DELAY_MS = 6;
+    let offset = 0;
+    const ws = this.ws;
+
+    if (hasBracket) {
+      ws.send(JSON.stringify({ type: 'input', data: BPS }));
+    }
+
+    const sendNext = () => {
+      if (!ws || ws.readyState !== WebSocket.OPEN) return;
+      if (offset >= body.length) {
+        if (hasBracket) {
+          ws.send(JSON.stringify({ type: 'input', data: BPE }));
+        }
+        return;
+      }
+      const chunk = body.slice(offset, offset + CHUNK_SIZE);
+      offset += CHUNK_SIZE;
+      ws.send(JSON.stringify({ type: 'input', data: chunk }));
+      setTimeout(sendNext, CHUNK_DELAY_MS);
+    };
+
+    sendNext();
   }
 
   /**