feat(code): add markdown file rendering (#1276)

- adds markdown rendering to md files with global preference toggle
- handles links in md files by opening files in posthog code, or urls in external browser
- auto-expands the file tree to reveal the file when clicking a link

closes #1198

Author: adboio

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

@@ -1,13 +1,23 @@
 import { PanelMessage } from "@components/ui/PanelMessage";
+import { Tooltip } from "@components/ui/Tooltip";
 import { CodeMirrorEditor } from "@features/code-editor/components/CodeMirrorEditor";
+import { useMarkdownViewerStore } from "@features/code-editor/stores/markdownViewerStore";
+import { isMarkdownFile } from "@features/code-editor/utils/markdownUtils";
 import { getRelativePath } from "@features/code-editor/utils/pathUtils";
 import { isImageFile } from "@features/message-editor/utils/imageUtils";
+import { usePanelLayoutStore } from "@features/panels";
+import { useFileTreeStore } from "@features/right-sidebar/stores/fileTreeStore";
 import { useCwd } from "@features/sidebar/hooks/useCwd";
-import { Box, Flex } from "@radix-ui/themes";
-import { useTRPC } from "@renderer/trpc/client";
+import { Code, Eye } from "@phosphor-icons/react";
+import { Box, Flex, IconButton, Text } from "@radix-ui/themes";
+import { trpcClient, useTRPC } from "@renderer/trpc/client";
 import type { Task } from "@shared/types";
 
 import { useQuery } from "@tanstack/react-query";
+import { useCallback, useMemo } from "react";
+import type { Components } from "react-markdown";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
 
 const IMAGE_MIME_TYPES: Record<string, string> = {
   png: "image/png",
@@ -43,6 +53,51 @@ export function CodeEditorPanel({
   const isInsideRepo = !!repoPath && absolutePath.startsWith(repoPath);
   const filePath = getRelativePath(absolutePath, repoPath);
   const isImage = isImageFile(absolutePath);
+  const isMarkdown = isMarkdownFile(absolutePath);
+  const preferRendered = useMarkdownViewerStore((s) => s.preferRendered);
+  const togglePreferRendered = useMarkdownViewerStore(
+    (s) => s.togglePreferRendered,
+  );
+  const openFileInSplit = usePanelLayoutStore((s) => s.openFileInSplit);
+  const expandToFile = useFileTreeStore((s) => s.expandToFile);
+
+  const handleMarkdownLinkClick = useCallback(
+    (e: React.MouseEvent<HTMLAnchorElement>, href: string) => {
+      e.preventDefault();
+      if (href.startsWith("http://") || href.startsWith("https://")) {
+        trpcClient.os.openExternal.mutate({ url: href });
+        return;
+      }
+      const cleanHref = href.replace(/^\.\//, "");
+      const dir = filePath.includes("/")
+        ? filePath.slice(0, filePath.lastIndexOf("/"))
+        : "";
+      const resolved = dir ? `${dir}/${cleanHref}` : cleanHref;
+      if (repoPath) {
+        expandToFile(taskId, `${repoPath}/${resolved}`);
+      }
+      openFileInSplit(taskId, resolved);
+    },
+    [filePath, taskId, repoPath, openFileInSplit, expandToFile],
+  );
+
+  const markdownComponents: Components = useMemo(
+    () => ({
+      a: ({ href, children }) => (
+        <Tooltip content={href ?? ""}>
+          <a
+            href={href ?? "#"}
+            onClick={(e) => handleMarkdownLinkClick(e, href ?? "")}
+            className="cursor-pointer"
+            style={{ color: "var(--accent-11)", textDecoration: "underline" }}
+          >
+            {children}
+          </a>
+        </Tooltip>
+      ),
+    }),
+    [handleMarkdownLinkClick],
+  );
 
   const repoQuery = useQuery(
     trpcReact.fs.readRepoFile.queryOptions(
@@ -112,6 +167,57 @@ export function CodeEditorPanel({
     return <PanelMessage>File is empty</PanelMessage>;
   }
 
+  if (isMarkdown) {
+    return (
+      <Flex direction="column" height="100%" style={{ overflow: "hidden" }}>
+        <Flex
+          px="3"
+          py="2"
+          align="center"
+          justify="between"
+          style={{ borderBottom: "1px solid var(--gray-6)", flexShrink: 0 }}
+        >
+          <Text
+            size="1"
+            color="gray"
+            style={{ fontFamily: "var(--code-font-family)" }}
+          >
+            {filePath}
+          </Text>
+          <Tooltip content={preferRendered ? "View source" : "View rendered"}>
+            <IconButton
+              size="1"
+              variant="ghost"
+              color="gray"
+              className="cursor-pointer"
+              onClick={togglePreferRendered}
+            >
+              {preferRendered ? <Code size={14} /> : <Eye size={14} />}
+            </IconButton>
+          </Tooltip>
+        </Flex>
+        <Box style={{ flex: 1, overflow: "auto" }}>
+          {preferRendered ? (
+            <Box className="plan-markdown" p="5" style={{ maxWidth: 750 }}>
+              <ReactMarkdown
+                remarkPlugins={[remarkGfm]}
+                components={markdownComponents}
+              >
+                {fileContent}
+              </ReactMarkdown>
+            </Box>
+          ) : (
+            <CodeMirrorEditor
+              content={fileContent}
+              filePath={absolutePath}
+              readOnly
+            />
+          )}
+        </Box>
+      </Flex>
+    );
+  }
+
   return (
     <Box height="100%" style={{ overflow: "hidden" }}>
       <CodeMirrorEditor

apps/code/src/renderer/features/code-editor/stores/markdownViewerStore.ts

@@ -0,0 +1,26 @@
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+
+interface MarkdownViewerStoreState {
+  preferRendered: boolean;
+}
+
+interface MarkdownViewerStoreActions {
+  togglePreferRendered: () => void;
+}
+
+type MarkdownViewerStore = MarkdownViewerStoreState &
+  MarkdownViewerStoreActions;
+
+export const useMarkdownViewerStore = create<MarkdownViewerStore>()(
+  persist(
+    (set) => ({
+      preferRendered: true,
+      togglePreferRendered: () =>
+        set((s) => ({ preferRendered: !s.preferRendered })),
+    }),
+    {
+      name: "markdown-viewer-storage",
+    },
+  ),
+);

apps/code/src/renderer/features/code-editor/utils/markdownUtils.ts

@@ -0,0 +1,6 @@
+const MARKDOWN_EXTENSIONS = new Set(["md", "markdown"]);
+
+export function isMarkdownFile(filename: string): boolean {
+  const ext = filename.split(".").pop()?.toLowerCase();
+  return !!ext && MARKDOWN_EXTENSIONS.has(ext);
+}

apps/code/src/renderer/features/right-sidebar/stores/fileTreeStore.ts

@@ -7,6 +7,7 @@ interface FileTreeStoreState {
 
 interface FileTreeStoreActions {
   togglePath: (taskId: string, path: string) => void;
+  expandToFile: (taskId: string, filePath: string) => void;
   collapseAll: (taskId: string) => void;
 }
 
@@ -30,6 +31,21 @@ export const useFileTreeStore = create<FileTreeStore>()((set) => ({
         },
       };
     }),
+  expandToFile: (taskId, filePath) =>
+    set((state) => {
+      const taskPaths = state.expandedPaths[taskId] ?? new Set<string>();
+      const newPaths = new Set(taskPaths);
+      const parts = filePath.split("/");
+      for (let i = 1; i < parts.length; i++) {
+        newPaths.add(parts.slice(0, i).join("/"));
+      }
+      return {
+        expandedPaths: {
+          ...state.expandedPaths,
+          [taskId]: newPaths,
+        },
+      };
+    }),
   collapseAll: (taskId) =>
     set((state) => ({
       expandedPaths: {