mrmd-editor 0.7.0 → 0.8.0

package/src/shell/layouts/studio.js

@@ -14,12 +14,14 @@
 import { OrchestratorClient } from '../orchestrator-client.js';
 import { ShellStateManager } from '../state.js';
 import { createStatusBar } from '../components/status-bar.js';
+import { createContextPanel } from '../components/context-panel.js';
 import { injectShellStyles } from '../styles.js';
 import { showFilePicker, showFolderPicker } from '../dialogs/file-picker.js';
 import { prompt, confirm } from '../dialogs/base-dialog.js';
 import { Drive } from '../drive.js';
 import { AiClient } from '../ai-client.js';
 import { showAiMenu, AI_COMMANDS, injectAiMenuStyles } from '../ai-menu.js';
+import { canImportLinkedTableFromHost } from '../../tables/index.js';
 
 // =============================================================================
 // STUDIO
@@ -92,6 +94,16 @@ export async function createStudio(target, options = {}) {
     overflow: hidden;
   `;
 
+  // Create main row container (editor + context rail)
+  const mainContainer = document.createElement('div');
+  mainContainer.className = 'mrmd-studio__main';
+  mainContainer.style.cssText = `
+    display: flex;
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+  `;
+
   // Create editor container
   const editorContainer = document.createElement('div');
   editorContainer.className = 'mrmd-studio__editor';
@@ -99,8 +111,19 @@ export async function createStudio(target, options = {}) {
     flex: 1;
     overflow: hidden;
     position: relative;
+    min-width: 0;
   `;
 
+  const contextPanelContainer = document.createElement('div');
+  contextPanelContainer.className = 'mrmd-studio__context';
+  contextPanelContainer.style.cssText = `
+    display: flex;
+    min-height: 0;
+  `;
+
+  mainContainer.appendChild(editorContainer);
+  mainContainer.appendChild(contextPanelContainer);
+
   // Create status bar container
   const statusBarContainer = document.createElement('div');
   statusBarContainer.className = 'mrmd-studio__statusbar';
@@ -108,9 +131,9 @@ export async function createStudio(target, options = {}) {
   // Assemble layout
   if (statusBarConfig.position === 'top') {
     studioEl.appendChild(statusBarContainer);
-    studioEl.appendChild(editorContainer);
+    studioEl.appendChild(mainContainer);
   } else {
-    studioEl.appendChild(editorContainer);
+    studioEl.appendChild(mainContainer);
     studioEl.appendChild(statusBarContainer);
   }
 
@@ -142,6 +165,16 @@ export async function createStudio(target, options = {}) {
     return () => eventHandlers.get(event).delete(handler);
   }
 
+  function getCurrentDocumentMarkdownPath(docName = currentDocName) {
+    if (!docName) return null;
+    if (docName.startsWith('/')) return null;
+    return docName.endsWith('.md') ? docName : `${docName}.md`;
+  }
+
+  function supportsLinkedTableImport() {
+    return canImportLinkedTableFromHost();
+  }
+
   /**
    * Detect if cursor is inside a code block and return block info
    * @param {EditorView} view
@@ -266,6 +299,7 @@ export async function createStudio(target, options = {}) {
   // Track current editor instance and preserved state
   let editor = null;
   let currentDocName = null;
+  let contextPanelComponent = null;
   let preservedEditorState = {
     theme: editorOptions.theme || null,
     dark: editorOptions.dark ?? null,
@@ -288,6 +322,9 @@ export async function createStudio(target, options = {}) {
       // Preserve theme across switches
       theme: preservedEditorState.theme,
       dark: preservedEditorState.dark,
+      // Linked-table host context
+      projectRoot: shellState.get('projectRoot') || editorOptions.projectRoot || null,
+      documentPath: getCurrentDocumentMarkdownPath(docName) || editorOptions.documentPath || null,
     };
 
     // Remove any sync options since we're providing ydoc directly
@@ -376,14 +413,17 @@ export async function createStudio(target, options = {}) {
         });
       }
 
-      // Add Comment Syntax extension
-      if (mrmd.default.commentSyntax?.createCommentSyntaxExtension) {
-        const commentExtensions = mrmd.default.commentSyntax.createCommentSyntaxExtension({
-          aiClient,
-          juiceLevel: shellState.get('ai')?.juiceLevel || 0,
-        });
+      // Configure built-in comment syntax with the AI client.
+      // The base editor already installs the extension, so only append
+      // updated facet config here.
+      if (mrmd.default.commentSyntax?.commentConfigFacet) {
         newEditor.view.dispatch({
-          effects: mrmd.codemirror.StateEffect.appendConfig.of(commentExtensions),
+          effects: mrmd.codemirror.StateEffect.appendConfig.of(
+            mrmd.default.commentSyntax.commentConfigFacet.of({
+              aiClient,
+              juiceLevel: shellState.get('ai')?.juiceLevel || 0,
+            })
+          ),
         });
       }
     }
@@ -398,15 +438,47 @@ export async function createStudio(target, options = {}) {
    * @param {Object|null} codeBlock - Code block info if cursor is in a code block
    */
   async function executeAiCommand(cmd, targetEditor, codeBlock = null) {
-    if (!aiClient || !mrmd.default.ai) return;
+    if (!mrmd.default.ai) return;
 
     const view = targetEditor.view;
+
+    if (cmd.action === 'insert-frontmatter-template') {
+      const handled = targetEditor.commands?.insertFrontmatterTemplate?.() || false;
+      if (handled) {
+        emit('aiCommandExecuted', { command: cmd.id, action: cmd.action });
+      } else {
+        emit('aiCommandError', { command: cmd.id, error: 'Could not insert frontmatter template' });
+      }
+      return;
+    }
+
+    if (!aiClient) return;
+
     const context = mrmd.default.ai.getAiContext(view);
     const juiceLevel = shellState.get('ai')?.juiceLevel || 0;
 
     // Detect language from code block, or fall back to python
     const detectedLanguage = codeBlock?.language || 'python';
 
+    // Resolve richer context from _assets/context/*.md when available
+    let resolvedContextText = context.documentContext;
+    try {
+      if (currentDocName) {
+        const resolved = await orchestratorClient.resolveContext({
+          doc: currentDocName,
+          content: context.documentContext,
+          cursorPos: context.cursorPos,
+          selection: { from: context.selectionFrom, to: context.selectionTo },
+          ensureExists: true,
+        });
+        if (resolved?.contextText) {
+          resolvedContextText = resolved.contextText;
+        }
+      }
+    } catch (error) {
+      console.warn('[Studio] Failed to resolve AI context, falling back to document only:', error);
+    }
+
     // Mark AI as active
     shellState._set('ai.active', true);
 
@@ -419,20 +491,20 @@ export async function createStudio(target, options = {}) {
         params = {
           text_before_cursor: context.textBeforeCursor,
           local_context: context.localContext,
-          document_context: context.documentContext,
+          document_context: resolvedContextText,
         };
       } else if (cmd.program.includes('Fix') || cmd.program.includes('Correct')) {
         params = {
           text_to_fix: context.selectedText,
           local_context: context.localContext,
-          document_context: context.documentContext,
+          document_context: resolvedContextText,
         };
       } else if (cmd.program.includes('Code')) {
         params = {
           code: context.selectedText,
           language: detectedLanguage,
           local_context: context.localContext,
-          document_context: context.documentContext,
+          document_context: resolvedContextText,
         };
       } else if (cmd.program.includes('Synonym')) {
         params = {
@@ -440,7 +512,7 @@ export async function createStudio(target, options = {}) {
           local_context: context.localContext,
         };
       } else if (cmd.program.includes('Document')) {
-        params = { document: context.documentContext };
+        params = { document: resolvedContextText };
       }
 
       await mrmd.default.ai.executeAiOperation(view, aiClient, {
@@ -518,6 +590,18 @@ export async function createStudio(target, options = {}) {
       editor = createEditorForDocument(handle, normalizedName);
       currentDocName = normalizedName;
 
+      // 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.createRuntimeAttachment(normalizedName, 'shared');
@@ -532,12 +616,24 @@ export async function createStudio(target, options = {}) {
         path: normalizedName.endsWith('.md') ? normalizedName : `${normalizedName}.md`,
         root: filesResult.root,
       });
+      editor?.setLinkedTableHostContext?.({
+        projectRoot: shellState.get('projectRoot') || null,
+        documentPath: normalizedName.endsWith('.md') ? normalizedName : `${normalizedName}.md`,
+      });
 
       // Update status bar with new editor
       if (statusBarComponent) {
         statusBarComponent.setEditor(editor);
       }
 
+      if (contextPanelComponent) {
+        contextPanelComponent.setEditor(editor);
+        contextPanelComponent.setDocument(normalizedName);
+        contextPanelComponent.refresh().catch((e) => {
+          console.warn('[Studio] Failed to refresh context panel:', e);
+        });
+      }
+
       emit('fileOpened', { doc: normalizedName });
 
     } catch (e) {
@@ -557,6 +653,17 @@ export async function createStudio(target, options = {}) {
     editor = createEditorForDocument(handle, docToOpen);
     currentDocName = docToOpen;
 
+    // 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.createRuntimeAttachment(docToOpen, 'shared');
@@ -570,6 +677,8 @@ export async function createStudio(target, options = {}) {
 
   // Shell action handlers
   const handlers = {
+    supportsLinkedTableImport,
+
     async onRename() {
       const file = shellState.get('file');
       if (!file) return;
@@ -647,6 +756,65 @@ export async function createStudio(target, options = {}) {
       });
     },
 
+    async onImportLinkedTable() {
+      const file = shellState.get('file');
+      const projectRoot = shellState.get('projectRoot');
+
+      if (!supportsLinkedTableImport()) {
+        await confirm({
+          title: 'Linked table import unavailable',
+          message: 'This build does not expose the Electron linked-table host API yet.',
+          confirmLabel: 'OK',
+          cancelLabel: '',
+        });
+        return;
+      }
+
+      if (!file || !editor) {
+        return;
+      }
+
+      if (!projectRoot || file.isOutsideProject || !file.path || file.path.startsWith('/')) {
+        await confirm({
+          title: 'Linked table import requires a project file',
+          message: 'Open a markdown document inside a project before importing a linked table.',
+          confirmLabel: 'OK',
+          cancelLabel: '',
+        });
+        return;
+      }
+
+      showFilePicker({
+        mode: 'open',
+        title: 'Import Linked Table',
+        orchestratorClient,
+        initialPath: projectRoot || '~',
+        allowOutsideProject: true,
+        onSelect: async (sourceFilePath) => {
+          try {
+            const result = await editor.importLinkedTableFromHost(sourceFilePath, {
+              projectRoot,
+              documentPath: file.path,
+              cacheFormat: 'csv',
+            });
+            emit('linkedTableImported', {
+              sourceFilePath,
+              tableId: result.tableId,
+              spec: result.spec,
+            });
+          } catch (error) {
+            console.error('[Studio] Linked table import failed:', error);
+            await confirm({
+              title: 'Linked table import failed',
+              message: error.message || String(error),
+              confirmLabel: 'OK',
+              cancelLabel: '',
+            });
+          }
+        },
+      });
+    },
+
     // NOTE: onChangeVenv, onChangeCwd, and onRestartRuntime are no longer used.
     // The new runtime model doesn't support changing venv/cwd on running runtimes.
     // Instead, users start new runtimes via the status bar menu and attach docs to them.
@@ -873,10 +1041,33 @@ export async function createStudio(target, options = {}) {
       path: currentDocName.endsWith('.md') ? currentDocName : `${currentDocName}.md`,
       root: result.root,
     });
+    editor?.setLinkedTableHostContext?.({
+      projectRoot: shellState.get('projectRoot') || null,
+      documentPath: currentDocName.endsWith('.md') ? currentDocName : `${currentDocName}.md`,
+    });
   } catch (e) {
     console.warn('Could not set initial file context:', e);
   }
 
+  // Create context panel
+  contextPanelComponent = createContextPanel({
+    container: contextPanelContainer,
+    orchestratorClient,
+    shellState,
+    getCurrentDocument: () => currentDocName,
+    getEditor: () => editor,
+    getAiContext: mrmd.default.ai?.getAiContext,
+    onOpenRaw: async (contextPath) => {
+      const rawDoc = contextPath.replace(/\.md$/, '');
+      await switchDocument(rawDoc);
+    },
+  });
+  contextPanelComponent.setDocument(currentDocName);
+  contextPanelComponent.setEditor(editor);
+  contextPanelComponent.refresh().catch((e) => {
+    console.warn('[Studio] Failed to initialize context panel:', e);
+  });
+
   // Create studio object
   const studio = {
     /** Current editor instance (may change on file switch) */
@@ -915,6 +1106,29 @@ export async function createStudio(target, options = {}) {
       await switchDocument(docName);
     },
 
+    /**
+     * Import a linked table into the current document.
+     * If no source path is provided, opens the file picker flow.
+     *
+     * @param {string} [sourceFilePath]
+     */
+    async importLinkedTable(sourceFilePath) {
+      if (sourceFilePath) {
+        const file = shellState.get('file');
+        const projectRoot = shellState.get('projectRoot');
+        if (!editor || !file?.path || !projectRoot) {
+          throw new Error('Linked table import requires an open project document');
+        }
+        return editor.importLinkedTableFromHost(sourceFilePath, {
+          projectRoot,
+          documentPath: file.path,
+          cacheFormat: 'csv',
+        });
+      }
+
+      return handlers.onImportLinkedTable();
+    },
+
     /**
      * Save current file to a new location
      * @param {string} targetPath - Target path
@@ -995,6 +1209,7 @@ export async function createStudio(target, options = {}) {
 
       // Destroy status bar
       statusBarComponent?.destroy();
+      contextPanelComponent?.destroy();
 
       // Destroy current editor
       if (editor) {

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
   // ===========================================================================
@@ -371,6 +416,75 @@ export class OrchestratorClient {
     return this.listRuntimeAttachments();
   }
 
+  // ===========================================================================
+  // Context Management
+  // ===========================================================================
+
+  /**
+   * Resolve markdown-managed AI context for a document.
+   * @param {Object} request
+   * @param {string} request.doc
+   * @param {string} [request.content]
+   * @param {number} [request.cursorPos]
+   * @param {{from: number, to: number}} [request.selection]
+   * @param {string[]} [request.codeSymbols]
+   * @param {boolean} [request.ensureExists=false]
+   */
+  async resolveContext(request) {
+    return this._fetch('/api/context/resolve', {
+      method: 'POST',
+      body: JSON.stringify(request),
+    });
+  }
+
+  /**
+   * Get context markdown for a document.
+   * @param {string} doc
+   */
+  async getContext(doc) {
+    return this._fetch(`/api/context/${encodeURIComponent(doc)}`);
+  }
+
+  /**
+   * Save context markdown for a document.
+   * @param {string} doc
+   * @param {string} content
+   */
+  async saveContext(doc, content) {
+    return this._fetch(`/api/context/${encodeURIComponent(doc)}`, {
+      method: 'PUT',
+      body: JSON.stringify({ content }),
+    });
+  }
+
+  /**
+   * Initialize context markdown for a document if missing.
+   * @param {string} doc
+   */
+  async initContext(doc) {
+    return this._fetch(`/api/context/init/${encodeURIComponent(doc)}`, {
+      method: 'POST',
+    });
+  }
+
+  /**
+   * Get project default context markdown.
+   */
+  async getDefaultContext() {
+    return this._fetch('/api/context');
+  }
+
+  /**
+   * Save project default context markdown.
+   * @param {string} content
+   */
+  async saveDefaultContext(content) {
+    return this._fetch('/api/context', {
+      method: 'PUT',
+      body: JSON.stringify({ content }),
+    });
+  }
+
   // ===========================================================================
   // Project & Runtime Management
   // ===========================================================================

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;