Implement proper file attachments and attachment previews

Author: charlesvien

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

@@ -150,6 +150,44 @@ export const osRouter = router({
    */
   getWorktreeLocation: publicProcedure.query(() => getWorktreeLocation()),
 
+  /**
+   * Read a file and return it as a base64 data URL
+   * Used for image thumbnails in the editor
+   */
+  readFileAsDataUrl: publicProcedure
+    .input(
+      z.object({
+        filePath: z.string(),
+        maxSizeBytes: z.number().optional().default(10 * 1024 * 1024),
+      }),
+    )
+    .query(async ({ input }) => {
+      try {
+        const stat = await fsPromises.stat(input.filePath);
+        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 buffer = await fsPromises.readFile(input.filePath);
+        return `data:${mime};base64,${buffer.toString("base64")}`;
+      } catch {
+        return null;
+      }
+    }),
+
   /**
    * Save clipboard image data to a temp file
    * Returns the file path for use as a file attachment

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

@@ -3,13 +3,13 @@ import { ReasoningLevelSelector } from "@features/sessions/components/ReasoningL
 import { Paperclip } from "@phosphor-icons/react";
 import { Flex, IconButton, Tooltip } from "@radix-ui/themes";
 import { useRef } from "react";
-import type { MentionChip } from "../utils/content";
+import type { FileAttachment } from "../utils/content";
 
 interface EditorToolbarProps {
   disabled?: boolean;
   taskId?: string;
   adapter?: "claude" | "codex";
-  onInsertChip: (chip: MentionChip) => void;
+  onAddAttachment: (attachment: FileAttachment) => void;
   onAttachFiles?: (files: File[]) => void;
   attachTooltip?: string;
   iconSize?: number;
@@ -21,7 +21,7 @@ export function EditorToolbar({
   disabled = false,
   taskId,
   adapter,
-  onInsertChip,
+  onAddAttachment,
   onAttachFiles,
   attachTooltip = "Attach file",
   iconSize = 14,
@@ -35,11 +35,7 @@ export function EditorToolbar({
       const fileArray = Array.from(files);
       for (const file of fileArray) {
         const filePath = (file as File & { path?: string }).path || file.name;
-        onInsertChip({
-          type: "file",
-          id: filePath,
-          label: file.name,
-        });
+        onAddAttachment({ id: filePath, label: file.name });
       }
       onAttachFiles?.(fileArray);
     }

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

@@ -0,0 +1,148 @@
+import { 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 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);
+
+  return (
+    <Dialog.Root>
+      <div className="group relative flex-shrink-0">
+        <Dialog.Trigger>
+          <button
+            type="button"
+            className="inline-flex items-center gap-1 rounded-[var(--radius-1)] bg-[var(--gray-a3)] p-1 text-[10px] leading-tight font-medium text-[var(--gray-11)] hover:bg-[var(--gray-a4)]"
+          >
+            {dataUrl ? (
+              <img
+                src={dataUrl}
+                alt={attachment.label}
+                className="size-3.5 rounded-sm object-cover"
+              />
+            ) : (
+              <span className="size-3.5 rounded-sm bg-[var(--gray-a5)]" />
+            )}
+            <span className="max-w-[80px] truncate">{attachment.label}</span>
+          </button>
+        </Dialog.Trigger>
+        <IconButton
+          size="1"
+          variant="solid"
+          color="gray"
+          className="!absolute -top-1 -right-1 !size-3.5 opacity-0 transition-opacity group-hover:opacity-100"
+          onClick={(e) => {
+            e.stopPropagation();
+            onRemove();
+          }}
+        >
+          <X size={8} weight="bold" />
+        </IconButton>
+      </div>
+      <Dialog.Content maxWidth="90vw" style={{ padding: 16 }}>
+        <Dialog.Title size="2" mb="2">
+          {attachment.label}
+        </Dialog.Title>
+        {dataUrl ? (
+          <img
+            src={dataUrl}
+            alt={attachment.label}
+            style={{
+              maxWidth: "85vw",
+              maxHeight: "75vh",
+              objectFit: "contain",
+            }}
+          />
+        ) : (
+          <Text size="2" color="gray">
+            Unable to load image preview
+          </Text>
+        )}
+      </Dialog.Content>
+    </Dialog.Root>
+  );
+}
+
+function FileChip({
+  attachment,
+  onRemove,
+}: {
+  attachment: FileAttachment;
+  onRemove: () => void;
+}) {
+  return (
+    <div className="group relative flex-shrink-0">
+      <span className="inline-flex items-center gap-1 rounded-[var(--radius-1)] bg-[var(--gray-a3)] p-1 text-[10px] leading-tight font-medium text-[var(--gray-11)]">
+        <span className="max-w-[120px] truncate">@{attachment.label}</span>
+      </span>
+      <IconButton
+        size="1"
+        variant="solid"
+        color="gray"
+        className="!absolute -top-1 -right-1 !size-3.5 opacity-0 transition-opacity group-hover:opacity-100"
+        onClick={(e) => {
+          e.stopPropagation();
+          onRemove();
+        }}
+      >
+        <X size={8} weight="bold" />
+      </IconButton>
+    </div>
+  );
+}
+
+interface AttachmentsBarProps {
+  attachments: FileAttachment[];
+  onRemove: (id: string) => void;
+}
+
+export function AttachmentsBar({ attachments, onRemove }: AttachmentsBarProps) {
+  if (attachments.length === 0) return null;
+
+  return (
+    <Flex gap="1" align="center" className="mb-2 flex-wrap">
+      {attachments.map((att) =>
+        isImageFile(att.label) ? (
+          <ImageThumbnail
+            key={att.id}
+            attachment={att}
+            onRemove={() => onRemove(att.id)}
+          />
+        ) : (
+          <FileChip
+            key={att.id}
+            attachment={att}
+            onRemove={() => onRemove(att.id)}
+          />
+        ),
+      )}
+    </Flex>
+  );
+}

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

@@ -11,6 +11,7 @@ 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 "./ImageAttachmentsBar";
 import { DiffStatsIndicator } from "./DiffStatsIndicator";
 import { EditorToolbar } from "./EditorToolbar";
 import { ModeIndicatorInput } from "./ModeIndicatorInput";
@@ -76,6 +77,9 @@ export const MessageEditor = forwardRef<EditorHandle, MessageEditorProps>(
       getContent,
       setContent,
       insertChip,
+      attachments,
+      addAttachment,
+      removeAttachment,
     } = useTiptapEditor({
       sessionId,
       taskId,
@@ -103,6 +107,8 @@ export const MessageEditor = forwardRef<EditorHandle, MessageEditorProps>(
         getText,
         setContent,
         insertChip,
+        addAttachment,
+        removeAttachment,
       }),
       [
         focus,
@@ -113,6 +119,8 @@ export const MessageEditor = forwardRef<EditorHandle, MessageEditorProps>(
         getText,
         setContent,
         insertChip,
+        addAttachment,
+        removeAttachment,
       ],
     );
 
@@ -151,6 +159,8 @@ export const MessageEditor = forwardRef<EditorHandle, MessageEditorProps>(
         onClick={handleContainerClick}
         style={{ cursor: "text" }}
       >
+        <AttachmentsBar attachments={attachments} onRemove={removeAttachment} />
+
         <div className="max-h-[200px] min-h-[50px] flex-1 overflow-y-auto font-mono text-sm">
           <EditorContent editor={editor} />
         </div>
@@ -160,7 +170,7 @@ export const MessageEditor = forwardRef<EditorHandle, MessageEditorProps>(
             <EditorToolbar
               disabled={disabled}
               taskId={taskId}
-              onInsertChip={insertChip}
+              onAddAttachment={addAttachment}
               onAttachFiles={onAttachFiles}
             />
             {isBashMode && (

apps/twig/src/renderer/features/message-editor/components/message-editor.css

@@ -6,3 +6,8 @@
   float: left;
   height: 0;
 }
+
+/* Ensure Tiptap NodeView wrappers render inline for mention chips */
+.cli-editor [data-node-view-wrapper] {
+  display: inline;
+}

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

@@ -1,4 +1,6 @@
 import { mergeAttributes, Node } from "@tiptap/core";
+import { ReactNodeViewRenderer } from "@tiptap/react";
+import { MentionChipView } from "./MentionChipView";
 
 export type ChipType =
   | "file"
@@ -60,6 +62,12 @@ export const MentionChipNode = Node.create({
     ];
   },
 
+  addNodeView() {
+    return ReactNodeViewRenderer(MentionChipView, {
+      contentDOMElementTag: "span",
+    });
+  },
+
   addCommands() {
     return {
       insertMentionChip:

apps/twig/src/renderer/features/message-editor/tiptap/MentionChipView.tsx

@@ -0,0 +1,33 @@
+import { type NodeViewProps, NodeViewWrapper } from "@tiptap/react";
+import type { MentionChipAttrs } from "./MentionChipNode";
+
+function DefaultChip({
+  type,
+  label,
+}: {
+  type: string;
+  label: string;
+}) {
+  const isCommand = type === "command";
+  const prefix = isCommand ? "/" : "@";
+
+  return (
+    <span
+      className={`${isCommand ? "cli-slash-command" : "cli-file-mention"} inline select-all cursor-default rounded-[var(--radius-1)] bg-[var(--accent-a3)] px-1 py-px text-xs font-medium text-[var(--accent-11)]`}
+      contentEditable={false}
+    >
+      {prefix}
+      {label}
+    </span>
+  );
+}
+
+export function MentionChipView({ node }: NodeViewProps) {
+  const { type, label } = node.attrs as MentionChipAttrs;
+
+  return (
+    <NodeViewWrapper as="span" className="inline">
+      <DefaultChip type={type} label={label} />
+    </NodeViewWrapper>
+  );
+}