Add workspace file explorer and Monaco editor

Re-implements editor features against the new Effect RPC architecture with listEntries/readFile RPC methods, workspace service layers, file tree, tab management, and Vite-bundled Monaco workers.

Author: deviBuilds

apps/server/src/workspace/Layers/WorkspaceEntries.ts

@@ -494,8 +494,34 @@ export const makeWorkspaceEntries = Effect.gen(function* () {
     },
   );
 
+  const list: WorkspaceEntriesShape["list"] = Effect.fn("WorkspaceEntries.list")(function* (input) {
+    const normalizedCwd = yield* normalizeWorkspaceRoot(input.cwd);
+    return yield* Cache.get(workspaceIndexCache, normalizedCwd).pipe(
+      Effect.map((index) => {
+        const limit = Math.max(0, Math.floor(input.limit));
+        const sorted = [...index.entries].toSorted((a, b) => {
+          if (a.kind !== b.kind) return a.kind === "directory" ? -1 : 1;
+          return a.path.localeCompare(b.path);
+        });
+        const entries = sorted.slice(0, limit).map((e) => {
+          const result: { path: string; kind: "file" | "directory"; parentPath?: string } = {
+            path: e.path,
+            kind: e.kind,
+          };
+          if (e.parentPath) result.parentPath = e.parentPath;
+          return result;
+        });
+        return {
+          entries,
+          truncated: index.truncated || sorted.length > limit,
+        };
+      }),
+    );
+  });
+
   return {
     invalidate,
+    list,
     search,
   } satisfies WorkspaceEntriesShape;
 });

apps/server/src/workspace/Layers/WorkspaceFileSystem.ts

@@ -14,6 +14,69 @@ export const makeWorkspaceFileSystem = Effect.gen(function* () {
   const workspacePaths = yield* WorkspacePaths;
   const workspaceEntries = yield* WorkspaceEntries;
 
+  const readFile: WorkspaceFileSystemShape["readFile"] = Effect.fn("WorkspaceFileSystem.readFile")(
+    function* (input) {
+      const target = yield* workspacePaths.resolveRelativePathWithinRoot({
+        workspaceRoot: input.cwd,
+        relativePath: input.relativePath,
+      });
+
+      const maxBytes = input.maxBytes ?? 1_048_576; // default 1 MB
+
+      const stat = yield* fileSystem.stat(target.absolutePath).pipe(
+        Effect.mapError(
+          (cause) =>
+            new WorkspaceFileSystemError({
+              cwd: input.cwd,
+              relativePath: input.relativePath,
+              operation: "workspaceFileSystem.stat",
+              detail: cause.message,
+              cause,
+            }),
+        ),
+      );
+      const fileSize = Number(stat.size);
+
+      const bytes = yield* fileSystem.readFile(target.absolutePath).pipe(
+        Effect.mapError(
+          (cause) =>
+            new WorkspaceFileSystemError({
+              cwd: input.cwd,
+              relativePath: input.relativePath,
+              operation: "workspaceFileSystem.readFile",
+              detail: cause.message,
+              cause,
+            }),
+        ),
+      );
+
+      // Detect binary by checking for null bytes in first 8KB
+      const checkLen = Math.min(bytes.length, 8192);
+      let isBinary = false;
+      for (let i = 0; i < checkLen; i++) {
+        if (bytes[i] === 0) {
+          isBinary = true;
+          break;
+        }
+      }
+
+      const truncated = bytes.length > maxBytes;
+      const slice = truncated ? bytes.slice(0, maxBytes) : bytes;
+      const encoding = isBinary ? ("base64" as const) : ("utf8" as const);
+      const contents = isBinary
+        ? Buffer.from(slice).toString("base64")
+        : new TextDecoder("utf-8").decode(slice);
+
+      return {
+        relativePath: target.relativePath,
+        contents,
+        encoding,
+        size: fileSize,
+        truncated,
+      };
+    },
+  );
+
   const writeFile: WorkspaceFileSystemShape["writeFile"] = Effect.fn(
     "WorkspaceFileSystem.writeFile",
   )(function* (input) {
@@ -49,7 +112,7 @@ export const makeWorkspaceFileSystem = Effect.gen(function* () {
     yield* workspaceEntries.invalidate(input.cwd);
     return { relativePath: target.relativePath };
   });
-  return { writeFile } satisfies WorkspaceFileSystemShape;
+  return { readFile, writeFile } satisfies WorkspaceFileSystemShape;
 });
 
 export const WorkspaceFileSystemLive = Layer.effect(WorkspaceFileSystem, makeWorkspaceFileSystem);

apps/server/src/workspace/Services/WorkspaceEntries.ts

@@ -9,7 +9,12 @@
 import { Schema, ServiceMap } from "effect";
 import type { Effect } from "effect";
 
-import type { ProjectSearchEntriesInput, ProjectSearchEntriesResult } from "@t3tools/contracts";
+import type {
+  ProjectListEntriesInput,
+  ProjectListEntriesResult,
+  ProjectSearchEntriesInput,
+  ProjectSearchEntriesResult,
+} from "@t3tools/contracts";
 
 export class WorkspaceEntriesError extends Schema.TaggedErrorClass<WorkspaceEntriesError>()(
   "WorkspaceEntriesError",
@@ -34,6 +39,14 @@ export interface WorkspaceEntriesShape {
     input: ProjectSearchEntriesInput,
   ) => Effect.Effect<ProjectSearchEntriesResult, WorkspaceEntriesError>;
 
+  /**
+   * List all workspace entries without a search query.
+   * Directories are returned before files, both sorted alphabetically.
+   */
+  readonly list: (
+    input: ProjectListEntriesInput,
+  ) => Effect.Effect<ProjectListEntriesResult, WorkspaceEntriesError>;
+
   /**
    * Drop any cached workspace entries for the given workspace root.
    */

apps/server/src/workspace/Services/WorkspaceFileSystem.ts

@@ -9,7 +9,12 @@
 import { Schema, ServiceMap } from "effect";
 import type { Effect } from "effect";
 
-import type { ProjectWriteFileInput, ProjectWriteFileResult } from "@t3tools/contracts";
+import type {
+  ProjectReadFileInput,
+  ProjectReadFileResult,
+  ProjectWriteFileInput,
+  ProjectWriteFileResult,
+} from "@t3tools/contracts";
 import { WorkspacePathOutsideRootError } from "./WorkspacePaths.ts";
 
 export class WorkspaceFileSystemError extends Schema.TaggedErrorClass<WorkspaceFileSystemError>()(
@@ -27,6 +32,19 @@ export class WorkspaceFileSystemError extends Schema.TaggedErrorClass<WorkspaceF
  * WorkspaceFileSystemShape - Service API for workspace-relative file operations.
  */
 export interface WorkspaceFileSystemShape {
+  /**
+   * Read a file relative to the workspace root.
+   *
+   * Returns file contents (utf8 or base64 for binary), size, and truncation
+   * status. Rejects paths that escape the workspace root.
+   */
+  readonly readFile: (
+    input: ProjectReadFileInput,
+  ) => Effect.Effect<
+    ProjectReadFileResult,
+    WorkspaceFileSystemError | WorkspacePathOutsideRootError
+  >;
+
   /**
    * Write a file relative to the workspace root.
    *

apps/server/src/ws.ts

@@ -11,6 +11,8 @@ import {
   OrchestrationGetSnapshotError,
   OrchestrationGetTurnDiffError,
   ORCHESTRATION_WS_METHODS,
+  ProjectListEntriesError,
+  ProjectReadFileError,
   ProjectSearchEntriesError,
   ProjectWriteFileError,
   OrchestrationReplayEventsError,
@@ -539,6 +541,36 @@ const WsRpcLayer = WsRpcGroup.toLayer(
           ),
           { "rpc.aggregate": "workspace" },
         ),
+      [WS_METHODS.projectsListEntries]: (input) =>
+        observeRpcEffect(
+          WS_METHODS.projectsListEntries,
+          workspaceEntries.list(input).pipe(
+            Effect.mapError(
+              (cause) =>
+                new ProjectListEntriesError({
+                  message: `Failed to list workspace entries: ${cause.detail}`,
+                  cause,
+                }),
+            ),
+          ),
+          { "rpc.aggregate": "workspace" },
+        ),
+      [WS_METHODS.projectsReadFile]: (input) =>
+        observeRpcEffect(
+          WS_METHODS.projectsReadFile,
+          workspaceFileSystem.readFile(input).pipe(
+            Effect.mapError((cause) => {
+              const message = Schema.is(WorkspacePathOutsideRootError)(cause)
+                ? "File path must stay within the project root."
+                : "Failed to read workspace file";
+              return new ProjectReadFileError({
+                message,
+                cause,
+              });
+            }),
+          ),
+          { "rpc.aggregate": "workspace" },
+        ),
       [WS_METHODS.projectsWriteFile]: (input) =>
         observeRpcEffect(
           WS_METHODS.projectsWriteFile,

apps/web/package.json

@@ -35,6 +35,7 @@
     "effect": "catalog:",
     "lexical": "^0.41.0",
     "lucide-react": "^0.564.0",
+    "monaco-editor": "^0.55.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-markdown": "^10.1.0",

apps/web/src/components/EditorPanel.tsx

@@ -0,0 +1,93 @@
+import { lazy, memo, Suspense, useCallback, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { SearchIcon } from "lucide-react";
+import { fileTreeQueryOptions } from "~/lib/editorReactQuery";
+import {
+  selectProjectEditorTabs,
+  selectProjectActiveEditorTabId,
+  useSidePanelStore,
+} from "~/sidePanelStore";
+import { FileTree } from "./editor/FileTree";
+
+const MonacoEditor = lazy(() => import("./editor/MonacoEditor"));
+
+const EditorPanel = memo(function EditorPanel({ cwd }: { cwd: string | null }) {
+  const editorTabs = useSidePanelStore(selectProjectEditorTabs);
+  const activeEditorTabId = useSidePanelStore(selectProjectActiveEditorTabId);
+  const openEditorFile = useSidePanelStore((s) => s.openEditorFile);
+  const pinEditorTab = useSidePanelStore((s) => s.pinEditorTab);
+
+  const fileTreeQuery = useQuery(fileTreeQueryOptions(cwd));
+  const entries = fileTreeQuery.data?.entries ?? [];
+
+  const [searchQuery, setSearchQuery] = useState("");
+
+  const filteredEntries =
+    searchQuery.length > 0
+      ? entries.filter((e) => e.path.toLowerCase().includes(searchQuery.toLowerCase()))
+      : entries;
+
+  const activeTab = editorTabs.find((t) => t.id === activeEditorTabId) ?? null;
+  const activeFilePath = activeTab?.relativePath ?? null;
+
+  const handleFileClick = useCallback(
+    (relativePath: string) => {
+      openEditorFile(relativePath);
+    },
+    [openEditorFile],
+  );
+
+  const handleFileDoubleClick = useCallback(
+    (relativePath: string) => {
+      openEditorFile(relativePath);
+      const state = useSidePanelStore.getState();
+      const projectId = state.activeProjectId;
+      if (!projectId) return;
+      const editorState = state.editorStateByProjectId[projectId];
+      const tab = editorState?.tabs.find((t) => t.relativePath === relativePath);
+      if (tab) pinEditorTab(tab.id);
+    },
+    [openEditorFile, pinEditorTab],
+  );
+
+  return (
+    <div className="flex min-h-0 flex-1">
+      {/* Left: File tree */}
+      <div className="flex w-52 shrink-0 flex-col border-r border-border bg-card">
+        <div className="p-1.5">
+          <div className="relative">
+            <SearchIcon className="absolute left-2 top-1/2 size-3 -translate-y-1/2 text-muted-foreground" />
+            <input
+              type="text"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="h-6 w-full rounded-md bg-accent/40 pl-7 pr-2 text-xs text-foreground outline-none placeholder:text-muted-foreground focus:ring-1 focus:ring-ring"
+              placeholder="Search files..."
+            />
+          </div>
+        </div>
+        <FileTree
+          entries={filteredEntries}
+          activeFilePath={activeFilePath}
+          onFileClick={handleFileClick}
+          onFileDoubleClick={handleFileDoubleClick}
+        />
+      </div>
+
+      {/* Right: Monaco editor (no duplicate tab bar — it's in SidePanel top row) */}
+      <div className="flex min-w-0 flex-1 flex-col">
+        <Suspense
+          fallback={
+            <div className="flex flex-1 items-center justify-center text-sm text-muted-foreground">
+              Loading editor...
+            </div>
+          }
+        >
+          <MonacoEditor cwd={cwd} relativePath={activeFilePath} />
+        </Suspense>
+      </div>
+    </div>
+  );
+});
+
+export default EditorPanel;