feat(editor): enhance editor functionality with tab management and file handling

aesopov · aesopov · commit fa926359ed61 · 2026-05-05T18:54:58.000+03:00
diff --git a/packages/ui/lib/app.tsx b/packages/ui/lib/app.tsx
@@ -3,9 +3,7 @@ import { CommandPalette } from "@/components/CommandPalette/CommandPalette";
 import { KeyBar } from "@/components/KeyBar/KeyBar";
 import { PanelGroup } from "@/components/PanelGroup/PanelGroup";
 import { DialogHolder, useDialog } from "@/dialogs/dialogContext";
-import { useBridge } from "@dotdirfm/ui-bridge";
 import { CommandLine } from "@/features/command-line/CommandLine/CommandLine";
-import { useCommandRegistry } from "@dotdirfm/commands";
 import { useBuiltInCommands } from "@/features/commands/useBuiltInCommands";
 import { useCommandRouting } from "@/features/commands/useCommandRouting";
 import { useExtensionRuntime } from "@/features/extensions/useExtensionRuntime";
@@ -14,12 +12,14 @@ import { useFileOperations } from "@/features/file-ops/useFileOperations";
 import { useActivePanelNavigation } from "@/features/panels/panelControllers";
 import { Terminal, TerminalToolbar } from "@/features/terminal/Terminal";
 import { useSystemTheme } from "@/features/themes/useSystemTheme";
-import { useFocusContext } from "@dotdirfm/ui-focus";
 import { useViewerEditorState } from "@/hooks/useViewerEditorState";
 import { useWorkspacePersistenceProcess, useWorkspaceRestoreProcess } from "@/processes/workspace-session/model/useWorkspaceSessionProcess";
 import baseStyles from "@/styles/base.module.css";
 import panelsStyles from "@/styles/panels.module.css";
 import terminalStyles from "@/styles/terminal.module.css";
+import { useCommandRegistry } from "@dotdirfm/commands";
+import { useBridge } from "@dotdirfm/ui-bridge";
+import { useFocusContext } from "@dotdirfm/ui-focus";
 import { cx } from "@dotdirfm/ui-utils";
 import { useAtomValue, useSetAtom } from "jotai";
 import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
@@ -83,10 +83,16 @@ export const App = forwardRef<AppHandle, { widget: React.ReactNode }>(function A
   const {
     handleViewFile,
     handleEditFile,
+    openFileInEditor,
     handleOpenCreateFileConfirm,
     requestCloseViewer,
     requestCloseEditor,
+    requestCloseEditorTab,
+    setActiveEditorTab,
     viewerOpen,
+    editorFiles,
+    activeEditorFileIndex,
+    editorDirty,
   } = useViewerEditorState();
 
   useWorkspacePersistenceProcess();
@@ -146,9 +152,15 @@ export const App = forwardRef<AppHandle, { widget: React.ReactNode }>(function A
     onOpenCreateFileConfirm: handleOpenCreateFileConfirm,
     onViewFile: handleViewFile,
     onEditFile: handleEditFile,
+    openFileInEditor,
     onRequestCloseViewer: requestCloseViewer,
     onRequestCloseEditor: requestCloseEditor,
     viewerOpen,
+    editorFiles,
+    activeEditorFileIndex,
+    editorDirty,
+    requestCloseEditorTab,
+    setActiveEditorTab,
   });
 
   useCommandRouting(rootRef);
diff --git a/packages/ui/lib/dialogs/dialogContext.tsx b/packages/ui/lib/dialogs/dialogContext.tsx
@@ -167,6 +167,10 @@ export type DialogSpec =
       props: EditorProps;
       onClose: () => void;
       onDirtyChange?: (dirty: boolean) => void;
+      tabFiles?: Array<{ path: string; name: string; langId: string; dirty?: boolean }>;
+      activeTabIndex?: number;
+      onTabClose?: (index: number) => void;
+      onTabSelect?: (index: number) => void;
     };
 
 export type DialogUpdate =
@@ -585,6 +589,10 @@ function renderDialogContent(dialog: DialogSpec, ctx: DialogContextValue, stackI
           stackIndex={stackIndex}
           onClose={dialog.onClose}
           onDirtyChange={dialog.onDirtyChange}
+          tabFiles={dialog.tabFiles}
+          activeTabIndex={dialog.activeTabIndex}
+          onTabClose={dialog.onTabClose}
+          onTabSelect={dialog.onTabSelect}
         />
       );
     default:
diff --git a/packages/ui/lib/features/commands/useBuiltInCommands.ts b/packages/ui/lib/features/commands/useBuiltInCommands.ts
@@ -73,6 +73,7 @@ import { runCommandSequence, type RunCommandsArgs } from "@dotdirfm/commands";
 import { useLoadedExtensions } from "@/features/extensions/useLoadedExtensions";
 import { executeMountedExtensionCommand } from "@/features/extensions/extensionCommandHandlers";
 import { DOTDIR_MONACO_EXECUTE_ACTION } from "@/features/extensions/builtins/monacoCommandBridge";
+import { useExtensionHostClient } from "@/features/extensions/extensionHostClient";
 import { useLanguageRegistry } from "@/features/languages/languageRegistry";
 import { useActivePanelNavigation } from "@/features/panels/panelControllers";
 import { DEFAULT_EDITOR_FILE_SIZE_LIMIT } from "@/features/settings/userSettings";
@@ -90,9 +91,15 @@ export interface BuiltInCommandDeps {
   onOpenCreateFileConfirm: (path: string, name: string, langId: string) => Promise<void>;
   onViewFile: (filePath: string, fileName: string, fileSize: number) => void;
   onEditFile: (filePath: string, fileName: string, fileSize: number, langId: string) => void;
+  openFileInEditor: (filePath: string, fileName: string, fileSize: number, langId: string) => void;
   onRequestCloseViewer: () => void;
   onRequestCloseEditor: () => void;
   viewerOpen: boolean;
+  editorFiles: Array<{ path: string; name: string; size: number; langId: string; dirty: boolean }>;
+  activeEditorFileIndex: number;
+  editorDirty: boolean;
+  requestCloseEditorTab: (index: number) => void;
+  setActiveEditorTab: (index: number) => void;
 }
 
 export function useBuiltInCommands(deps: BuiltInCommandDeps): void {
@@ -126,6 +133,18 @@ export function useBuiltInCommands(deps: BuiltInCommandDeps): void {
   // Updated every render so command handlers always see the latest callbacks.
   const depsRef = useLatestRef(deps);
 
+  // Wire the openFileInEditor callback to the extension host so LSP go-to-definition works.
+  const extensionHostClient = useExtensionHostClient();
+  const openFileRef = useLatestRef(deps.openFileInEditor);
+  useEffect(() => {
+    extensionHostClient.setOpenFileRequestListener((path: string) => {
+      const name = basename(path);
+      const langId = languageRegistryRef.current.getLanguageForFilename(name);
+      openFileRef.current(path, name, 0, langId);
+    });
+    return () => extensionHostClient.setOpenFileRequestListener(null);
+  }, [extensionHostClient, languageRegistryRef, openFileRef]);
+
   // loadedExtensions changes as extensions load; kept for potential call-time reads.
   useLoadedExtensions();
 
diff --git a/packages/ui/lib/features/extensions/ExtensionContainer.tsx b/packages/ui/lib/features/extensions/ExtensionContainer.tsx
@@ -1328,6 +1328,10 @@ interface EditorContainerWrapperProps {
   languages?: EditorProps["languages"];
   grammars?: EditorProps["grammars"];
   onInteract?: () => void;
+  tabFiles?: Array<{ path: string; name: string; langId: string; dirty?: boolean }>;
+  activeTabIndex?: number;
+  onTabClose?: (index: number) => void;
+  onTabSelect?: (index: number) => void;
 }
 
 export function EditorContainer({
@@ -1343,6 +1347,10 @@ export function EditorContainer({
   onClose,
   onDirtyChange,
   onInteract,
+  tabFiles,
+  activeTabIndex,
+  onTabClose,
+  onTabSelect,
 }: EditorContainerWrapperProps) {
   const languageRegistry = useLanguageRegistry();
   const languages = languageRegistry.languages;
@@ -1491,6 +1499,60 @@ export function EditorContainer({
           ×
         </button>
       </div>
+      {tabFiles && tabFiles.length > 1 && (
+        <div
+          style={{
+            display: "flex",
+            overflow: "auto",
+            borderBottom: "1px solid var(--border, #333)",
+            flexShrink: 0,
+            minHeight: 30,
+          }}
+        >
+          {tabFiles.map((t, i) => (
+            <div
+              key={t.path}
+              onClick={() => onTabSelect?.(i)}
+              title={t.path}
+              style={{
+                display: "flex",
+                alignItems: "center",
+                gap: 4,
+                padding: "4px 10px",
+                cursor: "pointer",
+                fontSize: 12,
+                borderRight: "1px solid var(--border, #333)",
+                background: i === (activeTabIndex ?? 0) ? "var(--bg, #1e1e2e)" : "transparent",
+                color: i === (activeTabIndex ?? 0) ? "var(--fg, #cdd6f4)" : "var(--fg-muted, #6c7086)",
+                whiteSpace: "nowrap",
+                flexShrink: 0,
+              }}
+            >
+              <span style={{ overflow: "hidden", textOverflow: "ellipsis" }}>
+                {t.dirty ? "● " : ""}{t.name}
+              </span>
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onTabClose?.(i);
+                }}
+                style={{
+                  background: "transparent",
+                  border: "none",
+                  cursor: "pointer",
+                  fontSize: 14,
+                  padding: "0 2px",
+                  color: "inherit",
+                  lineHeight: 1,
+                }}
+                aria-label={`Close ${t.name}`}
+              >
+                ×
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
       <div style={{ flex: 1, minHeight: 0 }}>
         <ExtensionContainer
           kind="editor"
diff --git a/packages/ui/lib/features/extensions/extensionHostClient.ts b/packages/ui/lib/features/extensions/extensionHostClient.ts
@@ -219,6 +219,7 @@ export class ExtensionHostClient {
   private commandRequestListener: CommandRequestListener | null = null;
   private configReadListener: ConfigReadListener | null = null;
   private configWriteListener: ConfigWriteListener | null = null;
+  openFileRequestListener: ((path: string) => void) | null = null;
 
   private queuedOutbound: MainToHostMessage[] = [];
   private workerReady = false;
@@ -318,6 +319,9 @@ export class ExtensionHostClient {
   setConfigWriteListener(listener: ConfigWriteListener | null): void {
     this.configWriteListener = listener;
   }
+  setOpenFileRequestListener(listener: ((path: string) => void) | null): void {
+    this.openFileRequestListener = listener;
+  }
 
   // ── Outbound: document / editor / workspace / configuration ──────
 
@@ -683,6 +687,12 @@ export function ExtensionHostClientProvider({ children }: { children: ReactNode
       return undefined;
     });
     client.setCommandRequestListener(async (command, args) => {
+      if (command === "__dotdir/openFile") {
+        const path = String(args[0] ?? "");
+        void bridge.utils.debugLog?.(`[ExtensionHost] openFile requested: ${path}`);
+        client.openFileRequestListener?.(path);
+        return null;
+      }
       return handleWorkerCommand(bridge, command, args);
     });
     return () => {
diff --git a/packages/ui/lib/features/extensions/monacoBridge/providerBridge.ts b/packages/ui/lib/features/extensions/monacoBridge/providerBridge.ts
@@ -417,9 +417,10 @@ export class MonacoProviderBridge {
         break;
       }
       case "callHierarchy":
-        // Call hierarchy provider is registered by the extension but can't be
-        // bridged to Monaco — the standalone monaco-editor doesn't include the
-        // call hierarchy tree view or navigation UI (VS Code-only feature).
+      case "workspaceSymbol":
+        // These providers are registered by the extension but can't be bridged
+        // to Monaco — the standalone monaco-editor doesn't include the UI for
+        // call hierarchy, workspace symbols, or other VS Code-only features.
         return;
       default:
         this.warn(`Provider kind ${reg.kind} not installed on Monaco`);
diff --git a/packages/ui/lib/hooks/useViewerEditorState.tsx b/packages/ui/lib/hooks/useViewerEditorState.tsx
