feat(comments): R2 media uploads and composer improvements

apps/dashboard/.dev.vars.example

@@ -99,3 +99,18 @@ BETTER_AUTH_URL=http://localhost:3000
 #   3. Set the same URL as the webhook URL in your GitHub App settings,
 #      appending /api/webhooks/github
 DEV_TUNNEL_URL=
+
+# -----------------------------------------------------------------------------
+# 6. R2 comment media (optional)
+# -----------------------------------------------------------------------------
+# Not required for the app to run. Without it, comment image/video uploads stay disabled
+# (upload and finalize endpoints return a configuration error).
+#
+# Set to the public base URL for the SAME bucket Wrangler writes to (custom domain or r2.dev),
+# no trailing slash. Example: https://pub-xxxxxxxxxxxxxxxx.r2.dev
+#
+# Local dev uses Miniflare by default: objects stay under .wrangler/state and do not show in the
+# Cloudflare dashboard. wrangler.jsonc enables "remote": true on COMMENT_MEDIA so puts go to the
+# real bucket named there (see bucket_name). Your pub URL must be for that bucket — not only
+# preview_bucket_name (that name is for local simulation naming when not remote).
+R2_PUBLIC_BASE_URL=

apps/dashboard/package.json

@@ -43,6 +43,7 @@
 		"octokit": "^5.0.5",
 		"react": "^19.2.0",
 		"react-dom": "^19.2.0",
+		"react-dropzone": "^15.0.0",
 		"tailwindcss": "^4.1.18"
 	},
 	"devDependencies": {

apps/dashboard/src/components/details/comment-reply-form.tsx

@@ -1,9 +1,13 @@
 import { CommentIcon } from "@diffkit/icons";
-import { MarkdownEditor } from "@diffkit/ui/components/markdown-editor";
+import {
+	MarkdownEditor,
+	type MarkdownEditorHandle,
+} from "@diffkit/ui/components/markdown-editor";
 import { toast } from "@diffkit/ui/components/sonner";
 import { Spinner } from "@diffkit/ui/components/spinner";
 import { useQueryClient } from "@tanstack/react-query";
-import { useCallback, useState } from "react";
+import { useCallback, useRef, useState } from "react";
+import { useCommentMediaUpload } from "#/hooks/use-comment-media-upload";
 import { createComment } from "#/lib/github.functions";
 import { githubQueryKeys } from "#/lib/github.query";
 import { checkPermissionWarning } from "#/lib/warning-store";
@@ -28,6 +32,10 @@ export function CommentReplyForm({
 	const [value, setValue] = useState("");
 	const [isSending, setIsSending] = useState(false);
 	const queryClient = useQueryClient();
+	const editorRef = useRef<MarkdownEditorHandle>(null);
+	const commentActionsRef = useRef<HTMLDivElement>(null);
+	const { media: mediaUpload, onPaste: onMediaPaste } =
+		useCommentMediaUpload(editorRef);
 
 	const handleSend = useCallback(async () => {
 		if (!value.trim()) return;
@@ -79,12 +87,19 @@ export function CommentReplyForm({
 	return (
 		<div className="flex w-full flex-col gap-2 pt-2">
 			<MarkdownEditor
+				ref={editorRef}
+				scrollAnchorRef={commentActionsRef}
 				value={value}
 				onChange={setValue}
 				placeholder={`Reply to @${parentAuthor}...`}
 				compact
+				media={mediaUpload}
+				onPaste={onMediaPaste}
 			/>
-			<div className="flex items-center justify-end gap-2">
+			<div
+				ref={commentActionsRef}
+				className="flex items-center justify-end gap-2"
+			>
 				<button
 					type="button"
 					onClick={() => {

apps/dashboard/src/components/details/detail-activity.tsx

@@ -5,12 +5,14 @@ import {
 } from "@diffkit/icons";
 import {
 	MarkdownEditor,
+	type MarkdownEditorHandle,
 	type MentionCandidate,
 } from "@diffkit/ui/components/markdown-editor";
 import { toast } from "@diffkit/ui/components/sonner";
 import { Spinner } from "@diffkit/ui/components/spinner";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { useMemo, useState } from "react";
+import { useMemo, useRef, useState } from "react";
+import { useCommentMediaUpload } from "#/hooks/use-comment-media-upload";
 import { createComment, updatePullState } from "#/lib/github.functions";
 import {
 	type GitHubQueryScope,
@@ -60,6 +62,10 @@ export function DetailCommentBox({
 	const [isTogglingState, setIsTogglingState] = useState(false);
 	const [mentionActivated, setMentionActivated] = useState(false);
 	const queryClient = useQueryClient();
+	const editorRef = useRef<MarkdownEditorHandle>(null);
+	const commentActionsRef = useRef<HTMLDivElement>(null);
+	const { media: mediaUpload, onPaste: onMediaPaste } =
+		useCommentMediaUpload(editorRef);
 
 	const viewerQuery = useQuery(githubViewerQueryOptions(scope));
 	const viewerLogin = viewerQuery.data?.login;
@@ -167,17 +173,24 @@ export function DetailCommentBox({
 	return (
 		<div className="flex flex-col gap-2">
 			<MarkdownEditor
+				ref={editorRef}
+				scrollAnchorRef={commentActionsRef}
 				value={value}
 				onChange={setValue}
 				placeholder="Leave a comment..."
 				compact
+				media={mediaUpload}
+				onPaste={onMediaPaste}
 				mentions={{
 					candidates: mentionCandidates,
 					onActivate: () => setMentionActivated(true),
 					isLoading: collaboratorsQuery.isLoading && mentionActivated,
 				}}
 			/>
-			<div className="flex items-center justify-end gap-2">
+			<div
+				ref={commentActionsRef}
+				className="flex items-center justify-end gap-2 pb-3"
+			>
 				{pullState && (
 					<button
 						type="button"

apps/dashboard/src/entry-worker.ts

@@ -53,6 +53,16 @@ export default {
 			return handleWebSocketUpgrade(request, env);
 		}
 
+		if (
+			url.pathname === "/api/comment-media/upload" &&
+			request.method === "POST"
+		) {
+			const { handleCommentMediaUpload } = await import(
+				"#/lib/comment-media-upload.handler"
+			);
+			return handleCommentMediaUpload(request);
+		}
+
 		// TanStack Start's type only declares (request, env?) but the runtime
 		// handler created by @cloudflare/vite-plugin passes (request, env, ctx)
 		// through to the underlying Worker fetch signature.

apps/dashboard/src/env.d.ts

@@ -3,6 +3,8 @@
 
 declare namespace Cloudflare {
 	interface Env {
+		/** Public base URL for R2 comment media (custom domain or r2.dev). */
+		R2_PUBLIC_BASE_URL?: string;
 		GITHUB_OAUTH_CLIENT_ID?: string;
 		GITHUB_OAUTH_CLIENT_SECRET?: string;
 		GITHUB_APP_CLIENT_ID?: string;

apps/dashboard/src/hooks/use-comment-media-upload.ts

@@ -0,0 +1,206 @@
+import {
+	getCommentMediaUploadPlaceholderText,
+	type MarkdownEditorHandle,
+	type MarkdownEditorMediaUpload,
+} from "@diffkit/ui/components/markdown-editor";
+import { toast } from "@diffkit/ui/components/sonner";
+import { useCallback } from "react";
+import { useDropzone } from "react-dropzone";
+import type { CommentMediaKind } from "#/lib/comment-media.server";
+import {
+	type FinalizeCommentMediaResult,
+	finalizeCommentMediaUpload,
+} from "#/lib/media.functions";
+
+async function probeImageDimensions(file: File): Promise<{
+	width: number;
+	height: number;
+}> {
+	const url = URL.createObjectURL(file);
+	try {
+		return await new Promise<{ width: number; height: number }>(
+			(resolve, reject) => {
+				const img = new Image();
+				img.onload = () => {
+					resolve({ width: img.naturalWidth, height: img.naturalHeight });
+				};
+				img.onerror = () =>
+					reject(new Error("Could not read image dimensions"));
+				img.src = url;
+			},
+		);
+	} finally {
+		URL.revokeObjectURL(url);
+	}
+}
+
+async function probeVideoDimensions(file: File): Promise<{
+	width: number;
+	height: number;
+}> {
+	const url = URL.createObjectURL(file);
+	try {
+		return await new Promise<{ width: number; height: number }>(
+			(resolve, reject) => {
+				const video = document.createElement("video");
+				video.preload = "metadata";
+				video.onloadedmetadata = () => {
+					resolve({ width: video.videoWidth, height: video.videoHeight });
+				};
+				video.onerror = () =>
+					reject(new Error("Could not read video dimensions"));
+				video.src = url;
+			},
+		);
+	} finally {
+		URL.revokeObjectURL(url);
+	}
+}
+
+async function probeDimensions(
+	file: File,
+	kind: CommentMediaKind,
+): Promise<{ width: number; height: number }> {
+	try {
+		return kind === "image"
+			? await probeImageDimensions(file)
+			: await probeVideoDimensions(file);
+	} catch {
+		return { width: 1, height: 1 };
+	}
+}
+
+type UploadJson = {
+	key: string;
+	publicUrl: string;
+	kind: CommentMediaKind;
+	contentType: string;
+};
+
+export function useCommentMediaUpload(
+	editorRef: React.RefObject<MarkdownEditorHandle | null>,
+) {
+	const uploadAndInsert = useCallback(
+		async (file: File) => {
+			const id = crypto.randomUUID();
+			const placeholder = getCommentMediaUploadPlaceholderText(id);
+			editorRef.current?.insertAtCaret(`${placeholder}\n`);
+
+			const formData = new FormData();
+			formData.append("file", file);
+
+			try {
+				const response = await fetch("/api/comment-media/upload", {
+					method: "POST",
+					body: formData,
+					credentials: "include",
+				});
+
+				if (!response.ok) {
+					let message = "Upload failed";
+					try {
+						const payload = (await response.json()) as { error?: string };
+						if (payload.error) message = payload.error;
+					} catch {
+						// ignore
+					}
+					throw new Error(message);
+				}
+
+				const payload = (await response.json()) as UploadJson;
+				const dimensions = await probeDimensions(file, payload.kind);
+
+				const finalized: FinalizeCommentMediaResult =
+					await finalizeCommentMediaUpload({
+						data: {
+							key: payload.key,
+							width: dimensions.width,
+							height: dimensions.height,
+							kind: payload.kind,
+							fileName: file.name,
+						},
+					});
+
+				if (!finalized.ok) {
+					throw new Error(finalized.error);
+				}
+
+				editorRef.current?.replaceUploadPlaceholder(id, `${finalized.html}\n`);
+			} catch (error) {
+				const message =
+					error instanceof Error ? error.message : "Upload failed";
+				toast.error(message);
+				editorRef.current?.replaceUploadPlaceholder(
+					id,
+					`*Could not upload "${file.name}": ${message}*\n`,
+				);
+			}
+		},
+		[editorRef],
+	);
+
+	const processFiles = useCallback(
+		async (files: File[]) => {
+			if (files.length === 0) return;
+			for (const file of files) {
+				await uploadAndInsert(file);
+			}
+		},
+		[uploadAndInsert],
+	);
+
+	const onDrop = useCallback(
+		(acceptedFiles: File[]) => {
+			void processFiles(acceptedFiles);
+		},
+		[processFiles],
+	);
+
+	const { getRootProps, getInputProps, isDragActive, open } = useDropzone({
+		onDrop,
+		noClick: true,
+		noKeyboard: true,
+		accept: {
+			"image/*": [".png", ".jpg", ".jpeg", ".gif", ".webp"],
+			"video/*": [".mp4", ".webm", ".mov"],
+		},
+	});
+
+	const onPaste = useCallback(
+		(event: React.ClipboardEvent<HTMLTextAreaElement>) => {
+			const items = event.clipboardData?.items;
+			if (!items) return;
+
+			const files: File[] = [];
+			for (const item of items) {
+				if (item.kind !== "file") continue;
+				const file = item.getAsFile();
+				if (!file) continue;
+				if (
+					!file.type.startsWith("image/") &&
+					!file.type.startsWith("video/")
+				) {
+					continue;
+				}
+				files.push(file);
+			}
+
+			if (files.length === 0) return;
+
+			event.preventDefault();
+			void processFiles(files);
+		},
+		[processFiles],
+	);
+
+	const media: MarkdownEditorMediaUpload = {
+		isDragActive,
+		rootProps: getRootProps(),
+		inputProps: getInputProps(),
+		onToolbarAttach: () => {
+			open();
+		},
+	};
+
+	return { media, onPaste };
+}