review fixes

Author: charlesvien

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

@@ -9,6 +9,19 @@ import { publicProcedure, router } from "../trpc.js";
 
 const fsPromises = fs.promises;
 
+const IMAGE_MIME_MAP: Record<string, string> = {
+  png: "image/png",
+  jpg: "image/jpeg",
+  jpeg: "image/jpeg",
+  gif: "image/gif",
+  webp: "image/webp",
+  bmp: "image/bmp",
+  ico: "image/x-icon",
+  svg: "image/svg+xml",
+  tiff: "image/tiff",
+  tif: "image/tiff",
+};
+
 const messageBoxOptionsSchema = z.object({
   type: z.enum(["none", "info", "error", "question", "warning"]).optional(),
   title: z.string().optional(),
@@ -170,19 +183,7 @@ export const osRouter = router({
         if (stat.size > input.maxSizeBytes) return null;
 
         const ext = path.extname(input.filePath).toLowerCase().slice(1);
-        const mimeMap: Record<string, string> = {
-          png: "image/png",
-          jpg: "image/jpeg",
-          jpeg: "image/jpeg",
-          gif: "image/gif",
-          webp: "image/webp",
-          bmp: "image/bmp",
-          ico: "image/x-icon",
-          svg: "image/svg+xml",
-          tiff: "image/tiff",
-          tif: "image/tiff",
-        };
-        const mime = mimeMap[ext] ?? "application/octet-stream";
+        const mime = IMAGE_MIME_MAP[ext] ?? "application/octet-stream";
 
         const buffer = await fsPromises.readFile(input.filePath);
         return `data:${mime};base64,${buffer.toString("base64")}`;

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

@@ -1,27 +1,12 @@
 import { PanelMessage } from "@components/ui/PanelMessage";
 import { CodeMirrorEditor } from "@features/code-editor/components/CodeMirrorEditor";
 import { getRelativePath } from "@features/code-editor/utils/pathUtils";
+import { isImageFile } from "@features/message-editor/utils/imageUtils";
 import { useCwd } from "@features/sidebar/hooks/useCwd";
 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;
@@ -72,10 +57,6 @@ export function CodeEditorPanel({
     );
   }
 
-  if (!repoPath) {
-    return <PanelMessage>No repository path available</PanelMessage>;
-  }
-
   if (isLoading) {
     return <PanelMessage>Loading file...</PanelMessage>;
   }

…ditor/components/ImageAttachmentsBar.tsx …age-editor/components/AttachmentsBar.tsxapps/twig/src/renderer/features/message-editor/components/ImageAttachmentsBar.tsx renamed to apps/twig/src/renderer/features/message-editor/components/AttachmentsBar.tsx apps/twig/src/renderer/features/message-editor/components/ImageAttachmentsBar.tsx renamed to apps/twig/src/renderer/features/message-editor/components/AttachmentsBar.tsx

@@ -1,37 +1,20 @@
 import { File, X } from "@phosphor-icons/react";
 import { Dialog, Flex, IconButton, Text } from "@radix-ui/themes";
-import { trpcVanilla } from "@renderer/trpc/client";
-import { useEffect, useState } from "react";
+import { trpcReact } from "@renderer/trpc/client";
 import type { FileAttachment } from "../utils/content";
 import { isImageFile } from "../utils/imageUtils";
 
-function useDataUrl(filePath: string) {
-  const [dataUrl, setDataUrl] = useState<string | null>(null);
-
-  useEffect(() => {
-    let cancelled = false;
-    trpcVanilla.os.readFileAsDataUrl
-      .query({ filePath })
-      .then((url) => {
-        if (!cancelled) setDataUrl(url);
-      })
-      .catch(() => {});
-    return () => {
-      cancelled = true;
-    };
-  }, [filePath]);
-
-  return dataUrl;
-}
-
 function ImageThumbnail({
   attachment,
   onRemove,
 }: {
   attachment: FileAttachment;
   onRemove: () => void;
 }) {
-  const dataUrl = useDataUrl(attachment.id);
+  const { data: dataUrl } = trpcReact.os.readFileAsDataUrl.useQuery(
+    { filePath: attachment.id },
+    { staleTime: Infinity },
+  );
 
   return (
     <Dialog.Root>

apps/twig/src/renderer/features/message-editor/components/MessageEditor.tsx

@@ -11,9 +11,9 @@ import { useTiptapEditor } from "../tiptap/useTiptapEditor";
 import type { EditorHandle } from "../types";
 import type { EditorContent as EditorContentType } from "../utils/content";
 import { AdapterIndicator } from "./AdapterIndicator";
+import { AttachmentsBar } from "./AttachmentsBar";
 import { DiffStatsIndicator } from "./DiffStatsIndicator";
 import { EditorToolbar } from "./EditorToolbar";
-import { AttachmentsBar } from "./ImageAttachmentsBar";
 import { ModeIndicatorInput } from "./ModeIndicatorInput";
 
 export type { EditorHandle as MessageEditorHandle };

apps/twig/src/renderer/features/message-editor/tiptap/useDraftSync.ts

@@ -1,5 +1,5 @@
 import type { Editor, JSONContent } from "@tiptap/core";
-import { useCallback, useLayoutEffect, useRef } from "react";
+import { useCallback, useLayoutEffect, useRef, useState } from "react";
 import { useDraftStore } from "../stores/draftStore";
 import {
   type EditorContent,
@@ -166,11 +166,13 @@ export function useDraftSync(
   }, [editor, pendingContent, sessionId, draftActions]);
 
   // Extract restored attachments from draft on first restore
-  const restoredAttachmentsRef = useRef<FileAttachment[]>([]);
+  const [restoredAttachments, setRestoredAttachments] = useState<
+    FileAttachment[]
+  >([]);
   useLayoutEffect(() => {
     if (!draft || typeof draft === "string") return;
     if (draft.attachments && draft.attachments.length > 0) {
-      restoredAttachmentsRef.current = draft.attachments;
+      setRestoredAttachments(draft.attachments);
     }
   }, [draft]);
 
@@ -219,6 +221,6 @@ export function useDraftSync(
     saveDraft,
     clearDraft,
     getContent,
-    restoredAttachments: restoredAttachmentsRef.current,
+    restoredAttachments,
   };
 }

apps/twig/src/renderer/features/message-editor/utils/content.ts

@@ -34,25 +34,34 @@ export function contentToPlainText(content: EditorContent): string {
     .join("");
 }
 
+function escapeXmlAttr(value: string): string {
+  return value
+    .replace(/&/g, "&")
+    .replace(/"/g, """)
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;");
+}
+
 export function contentToXml(content: EditorContent): string {
   const inlineFilePaths = new Set<string>();
   const parts = content.segments.map((seg) => {
     if (seg.type === "text") return seg.text;
     const chip = seg.chip;
+    const escapedId = escapeXmlAttr(chip.id);
     switch (chip.type) {
       case "file":
         inlineFilePaths.add(chip.id);
-        return `<file path="${chip.id}" />`;
+        return `<file path="${escapedId}" />`;
       case "command":
         return `/${chip.label}`;
       case "error":
-        return `<error id="${chip.id}" />`;
+        return `<error id="${escapedId}" />`;
       case "experiment":
-        return `<experiment id="${chip.id}" />`;
+        return `<experiment id="${escapedId}" />`;
       case "insight":
-        return `<insight id="${chip.id}" />`;
+        return `<insight id="${escapedId}" />`;
       case "feature_flag":
-        return `<feature_flag id="${chip.id}" />`;
+        return `<feature_flag id="${escapedId}" />`;
       default:
         return `@${chip.label}`;
     }
@@ -62,7 +71,7 @@ export function contentToXml(content: EditorContent): string {
   if (content.attachments) {
     for (const att of content.attachments) {
       if (!inlineFilePaths.has(att.id)) {
-        parts.push(`<file path="${att.id}" />`);
+        parts.push(`<file path="${escapeXmlAttr(att.id)}" />`);
       }
     }
   }

apps/twig/src/renderer/features/task-detail/components/TaskInputEditor.tsx

@@ -1,6 +1,6 @@
 import "@features/message-editor/components/message-editor.css";
+import { AttachmentsBar } from "@features/message-editor/components/AttachmentsBar";
 import { EditorToolbar } from "@features/message-editor/components/EditorToolbar";
-import { AttachmentsBar } from "@features/message-editor/components/ImageAttachmentsBar";
 import type { MessageEditorHandle } from "@features/message-editor/components/MessageEditor";
 import { useTiptapEditor } from "@features/message-editor/tiptap/useTiptapEditor";
 import { ModelSelector } from "@features/sessions/components/ModelSelector";