mrmd-editor 0.7.0 → 0.8.0

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

@@ -272,6 +272,14 @@ function createFilesSegment({ shellState, orchestratorClient, handlers, onCleanu
       onClick: () => handlers.onOpenFilePicker?.(),
     });
 
+    if (handlers.onImportLinkedTable && handlers.supportsLinkedTableImport?.() !== false) {
+      items.push({
+        icon: '▦',
+        label: 'Import Linked Table...',
+        onClick: () => handlers.onImportLinkedTable?.(),
+      });
+    }
+
     items.push({
       icon: '➕',
       label: 'New File...',
@@ -861,6 +869,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 +952,7 @@ function createRuntimeSegment({ shellState, orchestratorClient, handlers, onClea
         cachedRuntimes = null;
         cachedVenvs = null;
         await fetchRuntimes();
+        await refreshMachineState({ doRender: false });
         render();
       },
     });
@@ -885,13 +968,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();
@@ -1032,7 +1132,7 @@ function createAiSegment({ shellState, handlers, onCleanup }) {
 // Known dark themes for proper icon display
 const DARK_THEMES = new Set([
   'midnight', 'moonlight', 'github', 'nord', 'nord-outputs',
-  'grayscale-dark',
+  'grayscale-dark', 'newsprint-dark', 'plain-dark',
 ]);
 
 // Custom themes storage key
@@ -1185,7 +1285,7 @@ function createThemeSegment({ editorRef, shellState, handlers, onCleanup }) {
         }
 
         // Check for name conflicts with built-in themes
-        const builtInThemes = ['midnight', 'daylight', 'moonlight', 'github', 'nord', 'nord-outputs', 'grayscale-dark', 'grayscale-light', 'openresponses'];
+        const builtInThemes = ['midnight', 'daylight', 'moonlight', 'github', 'nord', 'nord-outputs', 'grayscale-dark', 'grayscale-light', 'openresponses', 'newsprint-dark', 'newsprint-light', 'plain-dark', 'plain-light'];
         if (builtInThemes.includes(theme.name)) {
           alert(`Cannot use reserved theme name "${theme.name}". Please rename your theme.`);
           return;
@@ -1746,6 +1846,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 +1972,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 +1996,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 +2036,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',

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

@@ -3,6 +3,7 @@
  *
  * 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';
@@ -48,10 +49,22 @@ export function showFilePicker(options) {
   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';
@@ -62,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') {
@@ -85,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 = '';