Support files outside the repo in panels and prompt builder

Author: charlesvien

apps/twig/src/main/services/fs/schemas.ts

@@ -11,6 +11,10 @@ export const readRepoFileInput = z.object({
   filePath: z.string(),
 });
 
+export const readAbsoluteFileInput = z.object({
+  filePath: z.string(),
+});
+
 export const writeRepoFileInput = z.object({
   repoPath: z.string(),
   filePath: z.string(),

apps/twig/src/main/services/fs/service.ts

@@ -97,6 +97,17 @@ export class FsService {
     }
   }
 
+  async readAbsoluteFile(filePath: string): Promise<string | null> {
+    try {
+      return await fs.promises.readFile(path.resolve(filePath), "utf-8");
+    } catch (error) {
+      if ((error as NodeJS.ErrnoException).code !== "ENOENT") {
+        log.error(`Failed to read file ${filePath}:`, error);
+      }
+      return null;
+    }
+  }
+
   async writeRepoFile(
     repoPath: string,
     filePath: string,

apps/twig/src/main/trpc/routers/fs.ts

@@ -3,6 +3,7 @@ import { MAIN_TOKENS } from "../../di/tokens.js";
 import {
   listRepoFilesInput,
   listRepoFilesOutput,
+  readAbsoluteFileInput,
   readRepoFileInput,
   readRepoFileOutput,
   writeRepoFileInput,
@@ -27,6 +28,11 @@ export const fsRouter = router({
       getService().readRepoFile(input.repoPath, input.filePath),
     ),
 
+  readAbsoluteFile: publicProcedure
+    .input(readAbsoluteFileInput)
+    .output(readRepoFileOutput)
+    .query(({ input }) => getService().readAbsoluteFile(input.filePath)),
+
   writeRepoFile: publicProcedure
     .input(writeRepoFileInput)
     .mutation(({ input }) =>

apps/twig/src/renderer/components/ui/PanelMessage.tsx

@@ -2,16 +2,32 @@ import { Box, Flex, Text } from "@radix-ui/themes";
 
 interface PanelMessageProps {
   children: React.ReactNode;
+  detail?: string;
   color?: "gray" | "red";
 }
 
-export function PanelMessage({ children, color = "gray" }: PanelMessageProps) {
+export function PanelMessage({
+  children,
+  detail,
+  color = "gray",
+}: PanelMessageProps) {
   return (
     <Box height="100%" p="4">
-      <Flex align="center" justify="center" height="100%">
+      <Flex
+        align="center"
+        justify="center"
+        direction="column"
+        gap="1"
+        height="100%"
+      >
         <Text size="2" color={color}>
           {children}
         </Text>
+        {detail && (
+          <Text size="1" color="gray" trim="both">
+            {detail}
+          </Text>
+        )}
       </Flex>
     </Box>
   );

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

@@ -2,10 +2,26 @@ import { PanelMessage } from "@components/ui/PanelMessage";
 import { CodeMirrorEditor } from "@features/code-editor/components/CodeMirrorEditor";
 import { getRelativePath } from "@features/code-editor/utils/pathUtils";
 import { useCwd } from "@features/sidebar/hooks/useCwd";
-import { Box } from "@radix-ui/themes";
+import { Box, Flex } from "@radix-ui/themes";
 import { trpcReact } from "@renderer/trpc/client";
 import type { Task } from "@shared/types";
 
+const IMAGE_EXTENSIONS = new Set([
+  "png",
+  "jpg",
+  "jpeg",
+  "gif",
+  "webp",
+  "svg",
+  "bmp",
+  "ico",
+]);
+
+function isImageFile(filePath: string): boolean {
+  const ext = filePath.split(".").pop()?.toLowerCase() ?? "";
+  return IMAGE_EXTENSIONS.has(ext);
+}
+
 interface CodeEditorPanelProps {
   taskId: string;
   task: Task;
@@ -18,20 +34,42 @@ export function CodeEditorPanel({
   absolutePath,
 }: CodeEditorPanelProps) {
   const repoPath = useCwd(taskId);
+  const isInsideRepo = !!repoPath && absolutePath.startsWith(repoPath);
   const filePath = getRelativePath(absolutePath, repoPath);
+  const isImage = isImageFile(absolutePath);
+
+  const repoQuery = trpcReact.fs.readRepoFile.useQuery(
+    { repoPath: repoPath ?? "", filePath },
+    { enabled: isInsideRepo && !isImage, staleTime: Infinity },
+  );
 
-  const {
-    data: fileContent,
-    isLoading,
-    error,
-  } = trpcReact.fs.readRepoFile.useQuery(
-    { repoPath: repoPath ?? "", filePath: filePath ?? "" },
-    {
-      enabled: !!repoPath && !!filePath,
-      staleTime: Infinity,
-    },
+  const absoluteQuery = trpcReact.fs.readAbsoluteFile.useQuery(
+    { filePath: absolutePath },
+    { enabled: !isInsideRepo && !isImage, staleTime: Infinity },
   );
 
+  const { data: fileContent, isLoading, error } = isInsideRepo
+    ? repoQuery
+    : absoluteQuery;
+
+  if (isImage) {
+    return (
+      <Flex
+        align="center"
+        justify="center"
+        height="100%"
+        p="4"
+        style={{ overflow: "auto" }}
+      >
+        <img
+          src={`file://${absolutePath}`}
+          alt={filePath}
+          style={{ maxWidth: "100%", maxHeight: "100%", objectFit: "contain" }}
+        />
+      </Flex>
+    );
+  }
+
   if (!repoPath) {
     return <PanelMessage>No repository path available</PanelMessage>;
   }
@@ -41,7 +79,9 @@ export function CodeEditorPanel({
   }
 
   if (error || fileContent == null) {
-    return <PanelMessage>Failed to load file</PanelMessage>;
+    return (
+      <PanelMessage detail={absolutePath}>Failed to load file</PanelMessage>
+    );
   }
 
   // If we ever allow editing in the CodeMirrorEditor, this can be removed

apps/twig/src/renderer/features/editor/utils/prompt-builder.ts

@@ -18,6 +18,20 @@ function getMimeType(filePath: string): string {
   return mimeTypes[ext ?? ""] ?? "text/plain";
 }
 
+function isAbsolutePath(filePath: string): boolean {
+  return filePath.startsWith("/") || /^[a-zA-Z]:\\/.test(filePath);
+}
+
+async function readFileContent(
+  filePath: string,
+  repoPath: string,
+): Promise<string | null> {
+  if (isAbsolutePath(filePath)) {
+    return trpcVanilla.fs.readAbsoluteFile.query({ filePath });
+  }
+  return trpcVanilla.fs.readRepoFile.query({ repoPath, filePath });
+}
+
 export async function buildPromptBlocks(
   textContent: string,
   filePaths: string[],
@@ -41,18 +55,18 @@ export async function buildPromptBlocks(
 
   blocks.push({ type: "text", text: textContent });
 
-  for (const relativePath of filePaths) {
+  for (const filePath of filePaths) {
     try {
-      const fileContent = await trpcVanilla.fs.readRepoFile.query({
-        repoPath,
-        filePath: relativePath,
-      });
+      const fileContent = await readFileContent(filePath, repoPath);
       if (fileContent) {
+        const uri = isAbsolutePath(filePath)
+          ? `file://${filePath}`
+          : `file://${repoPath}/${filePath}`;
         blocks.push({
           type: "resource",
           resource: {
-            uri: `file://${repoPath}/${relativePath}`,
-            mimeType: getMimeType(relativePath),
+            uri,
+            mimeType: getMimeType(filePath),
             text: fileContent,
           },
         });

apps/twig/src/renderer/features/panels/hooks/usePanelLayoutHooks.tsx

@@ -84,7 +84,8 @@ export function useTabInjection(
       tabs.map((tab) => {
         let updatedData = tab.data;
         if (tab.data.type === "file" || tab.data.type === "diff") {
-          const absolutePath = `${repoPath}/${tab.data.relativePath}`;
+          const rp = tab.data.relativePath;
+          const absolutePath = rp.startsWith("/") ? rp : `${repoPath}/${rp}`;
           updatedData = {
             ...tab.data,
             absolutePath,