feat: add CodeMirror-based code viewer for repository files (#136)

Added codemirror, so that when you click on a file in the file tree, it opens the editor as a tab. I went with codemirror since it seems a bit more flexible than monaco, but we can swap this out easily if needed.

Will add syntax highlighting, diffs, etc. in other PRs.

![image.png](https://app.graphite.com/user-attachments/assets/ce3e0388-a05c-4637-b672-2866bf31bb6a.png)

Author: jonathanlab

.gitignore

@@ -35,4 +35,4 @@ pnpm-workspace.yaml
 
 **.car
 
-.envrc
+.envrc

package.json

@@ -68,6 +68,8 @@
   },
   "dependencies": {
     "@ai-sdk/openai": "^2.0.52",
+    "@codemirror/state": "^6.5.2",
+    "@codemirror/view": "^6.38.8",
     "@dnd-kit/react": "^0.1.21",
     "@phosphor-icons/react": "^2.1.10",
     "@posthog/agent": "1.20.0",

pnpm-lock.yaml

@@ -202,6 +202,8 @@ contextBridge.exposeInMainWorld("electronAPI", {
     }>,
   ): Promise<void> =>
     ipcRenderer.invoke("save-question-answers", repoPath, taskId, answers),
+  readRepoFile: (repoPath: string, filePath: string): Promise<string | null> =>
+    ipcRenderer.invoke("read-repo-file", repoPath, filePath),
   onOpenSettings: (listener: () => void): (() => void) => {
     const wrapped = () => listener();
     ipcRenderer.on("open-settings", wrapped);

src/main/preload.ts

@@ -375,4 +375,31 @@ export function registerFsIpc(): void {
       }
     },
   );
+
+  ipcMain.handle(
+    "read-repo-file",
+    async (
+      _event: IpcMainInvokeEvent,
+      repoPath: string,
+      filePath: string,
+    ): Promise<string | null> => {
+      try {
+        const fullPath = path.join(repoPath, filePath);
+        const resolvedPath = path.resolve(fullPath);
+        const resolvedRepo = path.resolve(repoPath);
+        if (!resolvedPath.startsWith(resolvedRepo)) {
+          throw new Error("Access denied: path outside repository");
+        }
+
+        const content = await fsPromises.readFile(fullPath, "utf-8");
+        return content;
+      } catch (error) {
+        console.error(
+          `Failed to read file ${filePath} from ${repoPath}:`,
+          error,
+        );
+        return null;
+      }
+    },
+  );
 }

src/main/services/fs.ts

@@ -0,0 +1,79 @@
+import { CodeMirrorEditor } from "@features/code-editor/components/CodeMirrorEditor";
+import { useTaskData } from "@features/task-detail/hooks/useTaskData";
+import { Box, Flex, Text } from "@radix-ui/themes";
+import type { Task } from "@shared/types";
+import { useQuery } from "@tanstack/react-query";
+
+interface CodeEditorPanelProps {
+  taskId: string;
+  task: Task;
+  filePath: string;
+}
+
+export function CodeEditorPanel({
+  taskId,
+  task,
+  filePath,
+}: CodeEditorPanelProps) {
+  const taskData = useTaskData({ taskId, initialTask: task });
+  const repoPath = taskData.repoPath;
+
+  const {
+    data: fileContent,
+    isLoading,
+    error,
+  } = useQuery({
+    queryKey: ["repo-file", repoPath, filePath],
+    enabled: !!repoPath && !!filePath,
+    staleTime: 30000,
+    queryFn: async () => {
+      if (!window.electronAPI || !repoPath || !filePath) {
+        return null;
+      }
+      const content = await window.electronAPI.readRepoFile(repoPath, filePath);
+      return content;
+    },
+  });
+
+  if (!repoPath) {
+    return (
+      <Box height="100%" p="4">
+        <Flex align="center" justify="center" height="100%">
+          <Text size="2" color="gray">
+            No repository path available
+          </Text>
+        </Flex>
+      </Box>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <Box height="100%" p="4">
+        <Flex align="center" justify="center" height="100%">
+          <Text size="2" color="gray">
+            Loading file...
+          </Text>
+        </Flex>
+      </Box>
+    );
+  }
+
+  if (error || !fileContent) {
+    return (
+      <Box height="100%" p="4">
+        <Flex align="center" justify="center" height="100%">
+          <Text size="2" color="gray">
+            Failed to load file
+          </Text>
+        </Flex>
+      </Box>
+    );
+  }
+
+  return (
+    <Box height="100%" style={{ overflow: "hidden" }}>
+      <CodeMirrorEditor content={fileContent} readOnly />
+    </Box>
+  );
+}

src/renderer/features/code-editor/components/CodeEditorPanel.tsx

@@ -0,0 +1,75 @@
+import type { Extension } from "@codemirror/state";
+import { EditorState } from "@codemirror/state";
+import {
+  EditorView,
+  highlightActiveLineGutter,
+  lineNumbers,
+} from "@codemirror/view";
+import { useEffect, useRef } from "react";
+
+interface CodeMirrorEditorProps {
+  content: string;
+  readOnly?: boolean;
+}
+
+export function CodeMirrorEditor({
+  content,
+  readOnly = false,
+}: CodeMirrorEditorProps) {
+  const editorRef = useRef<HTMLDivElement>(null);
+  const viewRef = useRef<EditorView | null>(null);
+
+  useEffect(() => {
+    if (!editorRef.current) {
+      return;
+    }
+
+    const extensions: Extension[] = [
+      lineNumbers(),
+      highlightActiveLineGutter(),
+      EditorView.editable.of(!readOnly),
+      EditorView.theme({
+        "&": {
+          height: "100%",
+          fontSize: "14px",
+          backgroundColor: "var(--color-background)",
+        },
+        ".cm-scroller": {
+          overflow: "auto",
+          fontFamily: "var(--code-font-family)",
+        },
+        ".cm-content": {
+          padding: "16px 0",
+        },
+        ".cm-line": {
+          padding: "0 16px",
+        },
+        ".cm-gutters": {
+          backgroundColor: "var(--color-background)",
+          color: "var(--gray-9)",
+          border: "none",
+        },
+        ".cm-activeLineGutter": {
+          backgroundColor: "var(--color-background)",
+        },
+      }),
+    ];
+
+    const state = EditorState.create({
+      doc: content,
+      extensions,
+    });
+
+    viewRef.current = new EditorView({
+      state,
+      parent: editorRef.current,
+    });
+
+    return () => {
+      viewRef.current?.destroy();
+      viewRef.current = null;
+    };
+  }, [content, readOnly]);
+
+  return <div ref={editorRef} style={{ height: "100%", width: "100%" }} />;
+}

src/renderer/features/code-editor/components/CodeMirrorEditor.tsx

@@ -124,6 +124,7 @@ export interface IElectronAPI {
       customInput?: string;
     }>,
   ) => Promise<void>;
+  readRepoFile: (repoPath: string, filePath: string) => Promise<string | null>;
   onOpenSettings: (listener: () => void) => () => void;
   getAppVersion: () => Promise<string>;
   onUpdateReady: (listener: () => void) => () => void;