mrmd-editor 0.6.0 → 0.7.1

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

@@ -861,6 +861,80 @@ function createRuntimeSegment({ shellState, orchestratorClient, handlers, onClea
       });
     }
 
+    // Runtime machine selection
+    if (machineState.supported) {
+      items.push({ type: 'divider' });
+      items.push({ type: 'header', label: 'Runtime Machine' });
+
+      items.push({
+        icon: activeMachineId ? '○' : '✓',
+        label: 'Auto-select',
+        active: !activeMachineId,
+        onClick: async () => {
+          try {
+            await orchestratorClient.setActiveMachine?.(null);
+            await refreshMachineState({ doRender: true });
+          } catch (err) {
+            console.error('Failed to set auto machine:', err);
+          }
+        },
+      });
+
+      for (const m of machineList) {
+        const online = m.status === 'online' || m.connected === true;
+        const isActiveMachine = activeMachineId === m.machineId;
+        items.push({
+          icon: isActiveMachine ? '✓' : (online ? '●' : '○'),
+          label: `${m.machineName || m.machineId}${online ? '' : ' (offline)'}`,
+          active: isActiveMachine,
+          onClick: async () => {
+            try {
+              await orchestratorClient.setActiveMachine?.(m.machineId);
+              await refreshMachineState({ doRender: true });
+            } catch (err) {
+              console.error('Failed to switch machine:', err);
+            }
+          },
+        });
+      }
+
+      if (projectRoot) {
+        const pref = getProjectMachinePreference(projectRoot);
+        items.push({ type: 'divider' });
+        items.push({ type: 'header', label: 'Project Machine Preference' });
+
+        items.push({
+          icon: pref === undefined ? '✓' : '○',
+          label: 'No preference (manual/global)',
+          active: pref === undefined,
+          onClick: () => {
+            setProjectMachinePreference(projectRoot, undefined);
+          },
+        });
+
+        items.push({
+          icon: pref === null ? '✓' : '○',
+          label: 'Prefer auto-select',
+          active: pref === null,
+          onClick: () => {
+            setProjectMachinePreference(projectRoot, null);
+          },
+        });
+
+        for (const m of machineList) {
+          const isPref = pref === m.machineId;
+          items.push({
+            icon: isPref ? '✓' : '📌',
+            label: `Prefer ${m.machineName || m.machineId}`,
+            active: isPref,
+            onClick: () => {
+              setProjectMachinePreference(projectRoot, m.machineId);
+            },
+          });
+        }
+      }
+    }
+
     // Refresh action
     items.push({ type: 'divider' });
     items.push({
@@ -870,6 +944,7 @@ function createRuntimeSegment({ shellState, orchestratorClient, handlers, onClea
         cachedRuntimes = null;
         cachedVenvs = null;
         await fetchRuntimes();
+        await refreshMachineState({ doRender: false });
         render();
       },
     });
@@ -885,13 +960,30 @@ function createRuntimeSegment({ shellState, orchestratorClient, handlers, onClea
   segment.addEventListener('click', openMenu);
 
   // Initial fetch
-  fetchRuntimes().then(render);
+  Promise.all([
+    fetchRuntimes(),
+    refreshMachineState({ doRender: false }),
+  ]).then(async () => {
+    render();
+    await applyProjectPreference();
+  });
 
   // Subscribe to state changes
   const unsubscribe1 = shellState.onPath('runtimes', render);
   const unsubscribe2 = shellState.onPath('file', render);
+  const unsubscribe3 = shellState.onPath('projectRoot', () => {
+    applyProjectPreference();
+    render();
+  });
+
+  const machinePoll = setInterval(() => {
+    refreshMachineState({ doRender: true });
+  }, 15000);
+
   onCleanup(unsubscribe1);
   onCleanup(unsubscribe2);
+  onCleanup(unsubscribe3);
+  onCleanup(() => clearInterval(machinePoll));
   onCleanup(() => currentMenu?.close());
 
   render();
@@ -1402,7 +1494,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 +1742,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 +1763,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);
             }
           },
         });
@@ -1746,6 +1838,101 @@ function createSimpleSegment({ shellState, orchestratorClient, handlers, onClean
 
   let currentMenu = null;
   let runtimeState = 'disconnected'; // 'connected', 'disconnected', 'error'
+  let machineState = {
+    supported: false,
+    activeMachineId: null,
+    activeMachineName: null,
+    machines: [],
+  };
+
+  const PROJECT_MACHINE_PREF_KEY = 'mrmd:project-machine-pref:v1';
+  let projectMachinePrefs = loadProjectMachinePrefs();
+  let lastAppliedProjectPrefKey = null;
+
+  function loadProjectMachinePrefs() {
+    try {
+      const raw = window.localStorage?.getItem(PROJECT_MACHINE_PREF_KEY);
+      const parsed = raw ? JSON.parse(raw) : {};
+      return parsed && typeof parsed === 'object' ? parsed : {};
+    } catch {
+      return {};
+    }
+  }
+
+  function saveProjectMachinePrefs() {
+    try {
+      window.localStorage?.setItem(PROJECT_MACHINE_PREF_KEY, JSON.stringify(projectMachinePrefs));
+    } catch {
+      // ignore
+    }
+  }
+
+  function getProjectMachinePreference(projectRoot) {
+    if (!projectRoot || !(projectRoot in projectMachinePrefs)) return undefined;
+    const value = projectMachinePrefs[projectRoot];
+    return value === '__auto__' ? null : value;
+  }
+
+  function setProjectMachinePreference(projectRoot, machineIdOrNullOrUndefined) {
+    if (!projectRoot) return;
+    if (machineIdOrNullOrUndefined === undefined) {
+      delete projectMachinePrefs[projectRoot];
+    } else if (machineIdOrNullOrUndefined === null) {
+      projectMachinePrefs[projectRoot] = '__auto__';
+    } else {
+      projectMachinePrefs[projectRoot] = machineIdOrNullOrUndefined;
+    }
+    saveProjectMachinePrefs();
+  }
+
+  async function refreshMachineState({ doRender = true } = {}) {
+    try {
+      const [machinesRes, activeRes] = await Promise.all([
+        orchestratorClient.getMachines?.(),
+        orchestratorClient.getActiveMachine?.(),
+      ]);
+
+      const machines = machinesRes?.machines || [];
+      const activeMachineId = activeRes?.activeMachineId || null;
+      const activeMachine = machines.find(m => m.machineId === activeMachineId) || null;
+
+      machineState = {
+        supported: true,
+        activeMachineId,
+        activeMachineName: activeMachine?.machineName || activeMachine?.machineId || null,
+        machines,
+      };
+    } catch {
+      machineState = {
+        supported: false,
+        activeMachineId: null,
+        activeMachineName: null,
+        machines: [],
+      };
+    }
+
+    if (doRender) render();
+    return machineState;
+  }
+
+  async function applyProjectPreference() {
+    const projectRoot = shellState.get('projectRoot');
+    if (!projectRoot || !machineState.supported) return;
+
+    const pref = getProjectMachinePreference(projectRoot);
+    if (pref === undefined) return; // no preference set
+
+    const key = `${projectRoot}|${pref === null ? '__auto__' : pref}`;
+    if (key === lastAppliedProjectPrefKey) return;
+    lastAppliedProjectPrefKey = key;
+
+    try {
+      await orchestratorClient.setActiveMachine?.(pref);
+      await refreshMachineState({ doRender: true });
+    } catch {
+      // ignore
+    }
+  }
 
   function render() {
     const file = shellState.get('file');
@@ -1777,11 +1964,18 @@ function createSimpleSegment({ shellState, orchestratorClient, handlers, onClean
       error: 'No venv selected - click to pick one',
     }[runtimeState];
 
+    const machinePill = machineState.supported
+      ? `<span class="mrmd-statusbar__machine-pill" title="Active runtime machine — click to change">⚡ ${machineState.activeMachineName || 'Auto'}</span>`
+      : '';
+
     segment.innerHTML = `
       <span class="mrmd-statusbar__filename" style="font-weight: 500;">${filename}</span>
-      <span class="mrmd-statusbar__runtime-dot"
-            style="width: 10px; height: 10px; border-radius: 50%; background: ${dotColor}; cursor: pointer; ${runtimeState === 'error' ? 'animation: blink 1s infinite;' : ''}"
-            title="${dotTitle}"></span>
+      <span style="display:inline-flex; align-items:center; gap:8px;">
+        ${machinePill}
+        <span class="mrmd-statusbar__runtime-dot"
+              style="width: 10px; height: 10px; border-radius: 50%; background: ${dotColor}; cursor: pointer; ${runtimeState === 'error' ? 'animation: blink 1s infinite;' : ''}"
+              title="${dotTitle}"></span>
+      </span>
     `;
 
     // Add blink animation if needed
@@ -1794,8 +1988,10 @@ function createSimpleSegment({ shellState, orchestratorClient, handlers, onClean
   }
 
   async function openMenu(e) {
-    // Only open menu when clicking the dot
-    if (!e.target.classList.contains('mrmd-statusbar__runtime-dot')) {
+    // Only open menu when clicking the dot or machine pill
+    const isRuntimeDot = e.target.classList.contains('mrmd-statusbar__runtime-dot');
+    const isMachinePill = e.target.classList.contains('mrmd-statusbar__machine-pill');
+    if (!isRuntimeDot && !isMachinePill) {
       return;
     }
 
@@ -1832,6 +2028,12 @@ function createSimpleSegment({ shellState, orchestratorClient, handlers, onClean
       console.error('Failed to fetch runtimes/venvs:', err);
     }
 
+    // Fetch machine state (if available in cloud mode)
+    await refreshMachineState({ doRender: false });
+    const machineList = machineState.machines || [];
+    const activeMachineId = machineState.activeMachineId || null;
+    const projectRoot = shellState.get('projectRoot');
+
     // Section 1: Running Runtimes
     items.push({
       type: 'header',