authorgravatar for julius0216@outlook.comJulius Marminge <julius0216@outlook.com> 2026-02-12 15:19:46-08:00
committergravatar for julius0216@outlook.comJulius Marminge <julius0216@outlook.com> 2026-02-12 15:22:03-08:00
log3cf58f80d10bb7208b4e9cbefbf26d69ca315608
treed565ff2b5bb4c1b869ff007afee02cedb82aa5fb
parent44f3b3cb7c82c6a2cfd33dad92bb76260f9e32ff

Add image paste drag drop dialog

11 files changed, 725 insertions(+), 42 deletions(-)

apps/server/src/codexAppServerManager.test.ts+115-1
...@@ -1,11 +1,42 @@...@@ -1,11 +1,42 @@
1import { describe, expect, it } from "vitest";1import { describe, expect, it, vi } from "vitest";
22
3import {3import {
4 CodexAppServerManager,
4 classifyCodexStderrLine,5 classifyCodexStderrLine,
5 isRecoverableThreadResumeError,6 isRecoverableThreadResumeError,
6 normalizeCodexModelSlug,7 normalizeCodexModelSlug,
7} from "./codexAppServerManager";8} from "./codexAppServerManager";
89
10function createSendTurnHarness() {
11 const manager = new CodexAppServerManager();
12 const context = {
13 session: {
14 sessionId: "sess_1",
15 provider: "codex",
16 status: "ready",
17 threadId: "thread_1",
18 createdAt: "2026-02-10T00:00:00.000Z",
19 updatedAt: "2026-02-10T00:00:00.000Z",
20 },
21 };
22
23 const requireSession = vi
24 .spyOn(manager as unknown as { requireSession: (sessionId: string) => unknown }, "requireSession")
25 .mockReturnValue(context);
26 const sendRequest = vi
27 .spyOn(manager as unknown as { sendRequest: (...args: unknown[]) => Promise<unknown> }, "sendRequest")
28 .mockResolvedValue({
29 turn: {
30 id: "turn_1",
31 },
32 });
33 const updateSession = vi
34 .spyOn(manager as unknown as { updateSession: (...args: unknown[]) => void }, "updateSession")
35 .mockImplementation(() => {});
36
37 return { manager, context, requireSession, sendRequest, updateSession };
38}
39
9describe("classifyCodexStderrLine", () => {40describe("classifyCodexStderrLine", () => {
10 it("ignores empty lines", () => {41 it("ignores empty lines", () => {
11 expect(classifyCodexStderrLine(" ")).toBeNull();42 expect(classifyCodexStderrLine(" ")).toBeNull();
...@@ -75,3 +106,86 @@ describe("isRecoverableThreadResumeError", () => {...@@ -75,3 +106,86 @@ describe("isRecoverableThreadResumeError", () => {
75 ).toBe(false);106 ).toBe(false);
76 });107 });
77});108});
109
110describe("sendTurn", () => {
111 it("sends text and image user input items to turn/start", async () => {
112 const { manager, context, requireSession, sendRequest, updateSession } = createSendTurnHarness();
113
114 const result = await manager.sendTurn({
115 sessionId: "sess_1",
116 input: "Inspect this image",
117 images: [
118 {
119 name: "error.png",
120 mimeType: "image/png",
121 sizeBytes: 1_024,
122 dataUrl: "data:image/png;base64,AAAA",
123 },
124 ],
125 model: "gpt-5.3",
126 effort: "high",
127 });
128
129 expect(result).toEqual({
130 threadId: "thread_1",
131 turnId: "turn_1",
132 });
133 expect(requireSession).toHaveBeenCalledWith("sess_1");
134 expect(sendRequest).toHaveBeenCalledWith(context, "turn/start", {
135 threadId: "thread_1",
136 input: [
137 {
138 type: "text",
139 text: "Inspect this image",
140 text_elements: [],
141 },
142 {
143 type: "image",
144 url: "data:image/png;base64,AAAA",
145 },
146 ],
147 model: "gpt-5.3-codex",
148 effort: "high",
149 });
150 expect(updateSession).toHaveBeenCalledWith(context, {
151 status: "running",
152 activeTurnId: "turn_1",
153 });
154 });
155
156 it("supports image-only turns", async () => {
157 const { manager, context, sendRequest } = createSendTurnHarness();
158
159 await manager.sendTurn({
160 sessionId: "sess_1",
161 images: [
162 {
163 name: "diagram.png",
164 mimeType: "image/png",
165 sizeBytes: 256,
166 dataUrl: "data:image/png;base64,BBBB",
167 },
168 ],
169 });
170
171 expect(sendRequest).toHaveBeenCalledWith(context, "turn/start", {
172 threadId: "thread_1",
173 input: [
174 {
175 type: "image",
176 url: "data:image/png;base64,BBBB",
177 },
178 ],
179 });
180 });
181
182 it("rejects empty turn input", async () => {
183 const { manager } = createSendTurnHarness();
184
185 await expect(
186 manager.sendTurn({
187 sessionId: "sess_1",
188 }),
189 ).rejects.toThrow("Turn input must include text or image attachments.");
190 });
191});
apps/server/src/codexAppServerManager.ts+26-8
...@@ -257,20 +257,38 @@ export class CodexAppServerManager extends EventEmitter<CodexAppServerManagerEve...@@ -257,20 +257,38 @@ export class CodexAppServerManager extends EventEmitter<CodexAppServerManagerEve
257 throw new Error("Session is missing a thread id.");257 throw new Error("Session is missing a thread id.");
258 }258 }
259259
260 const turnInput: Array<
261 | { type: "text"; text: string; text_elements: [] }
262 | { type: "image"; url: string }
263 > = [];
264 if (input.input) {
265 turnInput.push({
266 type: "text",
267 text: input.input,
268 text_elements: [],
269 });
270 }
271 for (const image of input.images ?? []) {
272 turnInput.push({
273 type: "image",
274 url: image.dataUrl,
275 });
276 }
277 if (turnInput.length === 0) {
278 throw new Error("Turn input must include text or image attachments.");
279 }
280
260 const turnStartParams: {281 const turnStartParams: {
261 threadId: string;282 threadId: string;
262 input: Array<{ type: "text"; text: string; text_elements: [] }>;283 input: Array<
284 | { type: "text"; text: string; text_elements: [] }
285 | { type: "image"; url: string }
286 >;
263 model?: string;287 model?: string;
264 effort?: string;288 effort?: string;
265 } = {289 } = {
266 threadId: context.session.threadId,290 threadId: context.session.threadId,
267 input: [291 input: turnInput,
268 {
269 type: "text",
270 text: input.input,
271 text_elements: [],
272 },
273 ],
274 };292 };
275 const normalizedModel = normalizeCodexModelSlug(input.model);293 const normalizedModel = normalizeCodexModelSlug(input.model);
276 if (normalizedModel) {294 if (normalizedModel) {
apps/web/src/components/ChatView.tsx+352-22
...@@ -1,9 +1,14 @@...@@ -1,9 +1,14 @@
1import {1import {
2 PROVIDER_SEND_TURN_MAX_INPUT_CHARS,2 PROVIDER_SEND_TURN_MAX_INPUT_CHARS,
3 PROVIDER_SEND_TURN_MAX_IMAGE_BYTES,
4 PROVIDER_SEND_TURN_MAX_IMAGES,
5 type ProviderSendTurnImageInput,
3 type ProviderApprovalDecision,6 type ProviderApprovalDecision,
4 type ProviderEvent,7 type ProviderEvent,
5} from "@t3tools/contracts";8} from "@t3tools/contracts";
6import {9import {
10 type ClipboardEvent,
11 type DragEvent,
7 type FormEvent,12 type FormEvent,
8 Fragment,13 Fragment,
9 type KeyboardEvent,14 type KeyboardEvent,
...@@ -33,6 +38,7 @@ import {...@@ -33,6 +38,7 @@ import {
33 formatTimestamp,38 formatTimestamp,
34} from "../session-logic";39} from "../session-logic";
35import { useStore } from "../store";40import { useStore } from "../store";
41import type { ChatImageAttachment } from "../types";
36import BranchToolbar from "./BranchToolbar";42import BranchToolbar from "./BranchToolbar";
37import GitActionsControl from "./GitActionsControl";43import GitActionsControl from "./GitActionsControl";
38import { isTerminalToggleShortcut } from "../terminal-shortcuts";44import { isTerminalToggleShortcut } from "../terminal-shortcuts";
...@@ -57,6 +63,9 @@ function editorLabel(editor: (typeof EDITORS)[number]): string {...@@ -57,6 +63,9 @@ function editorLabel(editor: (typeof EDITORS)[number]): string {
5763
58const LAST_EDITOR_KEY = "t3code:last-editor";64const LAST_EDITOR_KEY = "t3code:last-editor";
59const MAX_VISIBLE_WORK_LOG_ENTRIES = 6;65const MAX_VISIBLE_WORK_LOG_ENTRIES = 6;
66const IMAGE_SIZE_LIMIT_LABEL = `${Math.round(PROVIDER_SEND_TURN_MAX_IMAGE_BYTES / (1024 * 1024))}MB`;
67const IMAGE_ONLY_BOOTSTRAP_PROMPT =
68 "[User attached one or more images without additional text. Respond using the conversation context and the attached image(s).]";
6069
61function workToneClass(tone: "thinking" | "tool" | "info" | "error"): string {70function workToneClass(tone: "thinking" | "tool" | "info" | "error"): string {
62 if (tone === "error") return "text-rose-300/50 dark:text-rose-300/50";71 if (tone === "error") return "text-rose-300/50 dark:text-rose-300/50";
...@@ -80,6 +89,16 @@ interface EnsuredSessionInfo {...@@ -80,6 +89,16 @@ interface EnsuredSessionInfo {
80 continuityState: SessionContinuityState;89 continuityState: SessionContinuityState;
81}90}
8291
92interface ComposerImageAttachment extends Omit<ChatImageAttachment, "previewUrl"> {
93 previewUrl: string;
94 file: File;
95}
96
97interface ExpandedImagePreview {
98 src: string;
99 name: string;
100}
101
83function asRecord(value: unknown): Record<string, unknown> | undefined {102function asRecord(value: unknown): Record<string, unknown> | undefined {
84 if (!value || typeof value !== "object") return undefined;103 if (!value || typeof value !== "object") return undefined;
85 return value as Record<string, unknown>;104 return value as Record<string, unknown>;
...@@ -131,10 +150,30 @@ function derivePendingApprovals(events: ProviderEvent[]): PendingApprovalCard[]...@@ -131,10 +150,30 @@ function derivePendingApprovals(events: ProviderEvent[]): PendingApprovalCard[]
131 return Array.from(pending.values());150 return Array.from(pending.values());
132}151}
133152
153function readFileAsDataUrl(file: File): Promise<string> {
154 return new Promise((resolve, reject) => {
155 const reader = new FileReader();
156 reader.addEventListener("load", () => {
157 if (typeof reader.result === "string") {
158 resolve(reader.result);
159 return;
160 }
161 reject(new Error("Could not read image data."));
162 });
163 reader.addEventListener("error", () => {
164 reject(reader.error ?? new Error("Failed to read image."));
165 });
166 reader.readAsDataURL(file);
167 });
168}
169
134export default function ChatView() {170export default function ChatView() {
135 const { state, dispatch } = useStore();171 const { state, dispatch } = useStore();
136 const api = useNativeApi();172 const api = useNativeApi();
137 const [prompt, setPrompt] = useState("");173 const [prompt, setPrompt] = useState("");
174 const [composerImages, setComposerImages] = useState<ComposerImageAttachment[]>([]);
175 const [isDragOverComposer, setIsDragOverComposer] = useState(false);
176 const [expandedImage, setExpandedImage] = useState<ExpandedImagePreview | null>(null);
138 const [isSending, setIsSending] = useState(false);177 const [isSending, setIsSending] = useState(false);
139 const [isConnecting, setIsConnecting] = useState(false);178 const [isConnecting, setIsConnecting] = useState(false);
140 const [isModelMenuOpen, setIsModelMenuOpen] = useState(false);179 const [isModelMenuOpen, setIsModelMenuOpen] = useState(false);
...@@ -152,6 +191,8 @@ export default function ChatView() {...@@ -152,6 +191,8 @@ export default function ChatView() {
152 const [terminalFocusRequestId, setTerminalFocusRequestId] = useState(0);191 const [terminalFocusRequestId, setTerminalFocusRequestId] = useState(0);
153 const messagesEndRef = useRef<HTMLDivElement>(null);192 const messagesEndRef = useRef<HTMLDivElement>(null);
154 const textareaRef = useRef<HTMLTextAreaElement>(null);193 const textareaRef = useRef<HTMLTextAreaElement>(null);
194 const composerImagesRef = useRef<ComposerImageAttachment[]>([]);
195 const dragDepthRef = useRef(0);
155 const modelMenuRef = useRef<HTMLDivElement>(null);196 const modelMenuRef = useRef<HTMLDivElement>(null);
156 const editorMenuRef = useRef<HTMLDivElement>(null);197 const editorMenuRef = useRef<HTMLDivElement>(null);
157 const terminalOpenByThreadRef = useRef<Record<string, boolean>>({});198 const terminalOpenByThreadRef = useRef<Record<string, boolean>>({});
...@@ -264,7 +305,15 @@ export default function ChatView() {...@@ -264,7 +305,15 @@ export default function ChatView() {
264 (activeThread.messages.length > 0 ||305 (activeThread.messages.length > 0 ||
265 (activeThread.session !== null && activeThread.session.status !== "closed")),306 (activeThread.session !== null && activeThread.session.status !== "closed")),
266 );307 );
267 const terminalShortcutHint = navigator.platform.includes("Mac") ? "\u2318J" : "Ctrl+J";308 const terminalShortcutHint = navigator.platform.includes("Mac")
309 ? "\u2318J"
310 : "Ctrl+J";
311 const revokePreviewUrls = useCallback((images: Array<{ previewUrl?: string }>) => {
312 for (const image of images) {
313 if (!image.previewUrl) continue;
314 URL.revokeObjectURL(image.previewUrl);
315 }
316 }, []);
268 const focusComposer = useCallback(() => {317 const focusComposer = useCallback(() => {
269 const textarea = textareaRef.current;318 const textarea = textareaRef.current;
270 if (!textarea) return;319 if (!textarea) return;
...@@ -319,6 +368,44 @@ export default function ChatView() {...@@ -319,6 +368,44 @@ export default function ChatView() {
319 setExpandedWorkGroups({});368 setExpandedWorkGroups({});
320 }, [activeThread?.id]);369 }, [activeThread?.id]);
321370
371 useEffect(() => {
372 composerImagesRef.current = composerImages;
373 }, [composerImages]);
374
375 useEffect(() => {
376 setComposerImages((existing) => {
377 revokePreviewUrls(existing);
378 return [];
379 });
380 dragDepthRef.current = 0;
381 setIsDragOverComposer(false);
382 setExpandedImage(null);
383 }, [activeThread?.id, revokePreviewUrls]);
384
385 useEffect(() => {
386 return () => {
387 revokePreviewUrls(composerImagesRef.current);
388 };
389 }, [revokePreviewUrls]);
390
391 useEffect(() => {
392 if (!expandedImage) {
393 return;
394 }
395
396 const onKeyDown = (event: globalThis.KeyboardEvent) => {
397 if (event.key !== "Escape") {
398 return;
399 }
400 setExpandedImage(null);
401 };
402
403 window.addEventListener("keydown", onKeyDown);
404 return () => {
405 window.removeEventListener("keydown", onKeyDown);
406 };
407 }, [expandedImage]);
408
322 const activeWorktreePath = activeThread?.worktreePath;409 const activeWorktreePath = activeThread?.worktreePath;
323410
324 useEffect(() => {411 useEffect(() => {
...@@ -431,6 +518,124 @@ export default function ChatView() {...@@ -431,6 +518,124 @@ export default function ChatView() {
431 setIsEditorMenuOpen(false);518 setIsEditorMenuOpen(false);
432 };519 };
433520
521 const setThreadError = (threadId: string | null, error: string | null) => {
522 if (!threadId) return;
523 dispatch({
524 type: "SET_ERROR",
525 threadId,
526 error,
527 });
528 };
529
530 const addComposerImages = (files: File[]) => {
531 if (!activeThreadId || files.length === 0) return;
532
533 const nextImages = [...composerImagesRef.current];
534 let error: string | null = null;
535 for (const file of files) {
536 if (!file.type.startsWith("image/")) {
537 error = `Unsupported file type for '${file.name}'. Please attach image files only.`;
538 continue;
539 }
540 if (file.size > PROVIDER_SEND_TURN_MAX_IMAGE_BYTES) {
541 error = `'${file.name}' exceeds the ${IMAGE_SIZE_LIMIT_LABEL} attachment limit.`;
542 continue;
543 }
544 if (nextImages.length >= PROVIDER_SEND_TURN_MAX_IMAGES) {
545 error = `You can attach up to ${PROVIDER_SEND_TURN_MAX_IMAGES} images per message.`;
546 break;
547 }
548
549 const previewUrl = URL.createObjectURL(file);
550 nextImages.push({
551 id: crypto.randomUUID(),
552 name: file.name || "image",
553 mimeType: file.type,
554 sizeBytes: file.size,
555 previewUrl,
556 file,
557 });
558 }
559
560 setComposerImages(nextImages);
561 setThreadError(activeThreadId, error);
562 };
563
564 const removeComposerImage = (imageId: string) => {
565 setComposerImages((existing) => {
566 const match = existing.find((image) => image.id === imageId);
567 if (match?.previewUrl) {
568 URL.revokeObjectURL(match.previewUrl);
569 }
570 return existing.filter((image) => image.id !== imageId);
571 });
572 };
573
574 const openImageDialog = (src: string | undefined, name: string) => {
575 if (!src) {
576 return;
577 }
578 setExpandedImage({ src, name });
579 };
580
581 const onComposerPaste = (event: ClipboardEvent<HTMLTextAreaElement>) => {
582 const files = Array.from(event.clipboardData.files);
583 if (files.length === 0) {
584 return;
585 }
586 const imageFiles = files.filter((file) => file.type.startsWith("image/"));
587 if (imageFiles.length === 0) {
588 return;
589 }
590 event.preventDefault();
591 addComposerImages(imageFiles);
592 };
593
594 const onComposerDragEnter = (event: DragEvent<HTMLDivElement>) => {
595 if (!event.dataTransfer.types.includes("Files")) {
596 return;
597 }
598 event.preventDefault();
599 dragDepthRef.current += 1;
600 setIsDragOverComposer(true);
601 };
602
603 const onComposerDragOver = (event: DragEvent<HTMLDivElement>) => {
604 if (!event.dataTransfer.types.includes("Files")) {
605 return;
606 }
607 event.preventDefault();
608 event.dataTransfer.dropEffect = "copy";
609 setIsDragOverComposer(true);
610 };
611
612 const onComposerDragLeave = (event: DragEvent<HTMLDivElement>) => {
613 if (!event.dataTransfer.types.includes("Files")) {
614 return;
615 }
616 event.preventDefault();
617 const nextTarget = event.relatedTarget;
618 if (nextTarget instanceof Node && event.currentTarget.contains(nextTarget)) {
619 return;
620 }
621 dragDepthRef.current = Math.max(0, dragDepthRef.current - 1);
622 if (dragDepthRef.current === 0) {
623 setIsDragOverComposer(false);
624 }
625 };
626
627 const onComposerDrop = (event: DragEvent<HTMLDivElement>) => {
628 if (!event.dataTransfer.types.includes("Files")) {
629 return;
630 }
631 event.preventDefault();
632 dragDepthRef.current = 0;
633 setIsDragOverComposer(false);
634 const files = Array.from(event.dataTransfer.files);
635 addComposerImages(files);
636 focusComposer();
637 };
638
434 const ensureSession = async (cwdOverride?: string): Promise<EnsuredSessionInfo | null> => {639 const ensureSession = async (cwdOverride?: string): Promise<EnsuredSessionInfo | null> => {
435 if (!api || !activeThread || !activeProject) return null;640 if (!api || !activeThread || !activeProject) return null;
436 if (activeThread.session && activeThread.session.status !== "closed") {641 if (activeThread.session && activeThread.session.status !== "closed") {
...@@ -492,8 +697,9 @@ export default function ChatView() {...@@ -492,8 +697,9 @@ export default function ChatView() {
492 e.preventDefault();697 e.preventDefault();
493 if (!api || !activeThread || isSending || isConnecting) return;698 if (!api || !activeThread || isSending || isConnecting) return;
494 const trimmed = prompt.trim();699 const trimmed = prompt.trim();
495 if (!trimmed) return;700 if (!trimmed && composerImages.length === 0) return;
496 if (!activeProject) return;701 if (!activeProject) return;
702 const composerImagesSnapshot = [...composerImages];
497703
498 // On first message: lock in branch + create worktree if needed.704 // On first message: lock in branch + create worktree if needed.
499 let sessionCwd: string | undefined;705 let sessionCwd: string | undefined;
...@@ -529,7 +735,12 @@ export default function ChatView() {...@@ -529,7 +735,12 @@ export default function ChatView() {
529735
530 // Auto-title from first message736 // Auto-title from first message
531 if (activeThread.messages.length === 0) {737 if (activeThread.messages.length === 0) {
532 const title = trimmed.length > 50 ? `${trimmed.slice(0, 50)}...` : trimmed;738 const titleSeed =
739 trimmed ||
740 (composerImagesSnapshot.length > 0
741 ? `Image: ${composerImagesSnapshot[0]?.name ?? "attachment"}`
742 : "New thread");
743 const title = titleSeed.length > 50 ? `${titleSeed.slice(0, 50)}...` : titleSeed;
533 dispatch({744 dispatch({
534 type: "SET_THREAD_TITLE",745 type: "SET_THREAD_TITLE",
535 threadId: activeThread.id,746 threadId: activeThread.id,
...@@ -537,43 +748,61 @@ export default function ChatView() {...@@ -537,43 +748,61 @@ export default function ChatView() {
537 });748 });
538 }749 }
539750
540 dispatch({751 setThreadError(activeThread.id, null);
541 type: "SET_ERROR",752 const messageImages: ChatImageAttachment[] = composerImagesSnapshot.map((image) => ({
542 threadId: activeThread.id,753 id: image.id,
543 error: null,754 name: image.name,
544 });755 mimeType: image.mimeType,
756 sizeBytes: image.sizeBytes,
757 previewUrl: image.previewUrl,
758 }));
545 dispatch({759 dispatch({
546 type: "PUSH_USER_MESSAGE",760 type: "PUSH_USER_MESSAGE",
547 threadId: activeThread.id,761 threadId: activeThread.id,
548 id: crypto.randomUUID(),762 id: crypto.randomUUID(),
549 text: trimmed,763 text: trimmed,
764 ...(messageImages.length > 0 ? { images: messageImages } : {}),
550 });765 });
551 const previousMessages = activeThread.messages;766 const previousMessages = activeThread.messages;
552 setPrompt("");767 setPrompt("");
768 setComposerImages([]);
553769
554 const sessionInfo = await ensureSession(sessionCwd);770 const sessionInfo = await ensureSession(sessionCwd);
555 if (!sessionInfo) return;771 if (!sessionInfo) return;
556772
557 setIsSending(true);773 setIsSending(true);
558 try {774 try {
775 const turnImages = await Promise.all(
776 composerImagesSnapshot.map(async (image): Promise<ProviderSendTurnImageInput> => ({
777 name: image.name,
778 mimeType: image.mimeType,
779 sizeBytes: image.sizeBytes,
780 dataUrl: await readFileAsDataUrl(image.file),
781 })),
782 );
559 const shouldBootstrap =783 const shouldBootstrap =
560 previousMessages.length > 0 &&784 previousMessages.length > 0 &&
561 (sessionInfo.continuityState === "new" || sessionInfo.continuityState === "fallback_new");785 (sessionInfo.continuityState === "new" || sessionInfo.continuityState === "fallback_new");
786 const latestPromptForBootstrap = trimmed || IMAGE_ONLY_BOOTSTRAP_PROMPT;
562 const input = shouldBootstrap787 const input = shouldBootstrap
563 ? buildBootstrapInput(previousMessages, trimmed, PROVIDER_SEND_TURN_MAX_INPUT_CHARS).text788 ? buildBootstrapInput(
564 : trimmed;789 previousMessages,
790 latestPromptForBootstrap,
791 PROVIDER_SEND_TURN_MAX_INPUT_CHARS,
792 ).text
793 : (trimmed || undefined);
565 await api.providers.sendTurn({794 await api.providers.sendTurn({
566 sessionId: sessionInfo.sessionId,795 sessionId: sessionInfo.sessionId,
567 input,796 ...(input ? { input } : {}),
797 ...(turnImages.length > 0 ? { images: turnImages } : {}),
568 model: selectedModel || undefined,798 model: selectedModel || undefined,
569 effort: selectedEffort || undefined,799 effort: selectedEffort || undefined,
570 });800 });
571 } catch (err) {801 } catch (err) {
572 dispatch({802 setThreadError(
573 type: "SET_ERROR",803 activeThread.id,
574 threadId: activeThread.id,804 err instanceof Error ? err.message : "Failed to send message.",
575 error: err instanceof Error ? err.message : "Failed to send message.",805 );
576 });
577 } finally {806 } finally {
578 setIsSending(false);807 setIsSending(false);
579 }808 }
...@@ -876,13 +1105,39 @@ export default function ChatView() {...@@ -876,13 +1105,39 @@ export default function ChatView() {
876 }1105 }
8771106
878 if (timelineEntry.message.role === "user") {1107 if (timelineEntry.message.role === "user") {
1108 const userImages = timelineEntry.message.images ?? [];
879 return (1109 return (
880 <Fragment key={timelineEntry.id}>1110 <Fragment key={timelineEntry.id}>
881 <div className="flex justify-end">1111 <div className="flex justify-end">
882 <div className="max-w-[80%] rounded-2xl rounded-br-sm border border-border bg-secondary px-4 py-3">1112 <div className="max-w-[80%] rounded-2xl rounded-br-sm border border-border bg-secondary px-4 py-3">
883 <pre className="whitespace-pre-wrap wrap-break-word font-mono text-sm leading-relaxed text-foreground">1113 {userImages.length > 0 && (
884 {timelineEntry.message.text}1114 <div className="mb-2 grid max-w-[420px] grid-cols-2 gap-2">
885 </pre>1115 {userImages.map((image) => (
1116 <div
1117 key={image.id}
1118 className="overflow-hidden rounded-lg border border-border/80 bg-background/70"
1119 >
1120 {image.previewUrl ? (
1121 <img
1122 src={image.previewUrl}
1123 alt={image.name}
1124 className="h-full max-h-[220px] w-full cursor-zoom-in object-cover"
1125 onClick={() => openImageDialog(image.previewUrl, image.name)}
1126 />
1127 ) : (
1128 <div className="flex min-h-[72px] items-center justify-center px-2 py-3 text-center text-[11px] text-muted-foreground/70">
1129 {image.name}
1130 </div>
1131 )}
1132 </div>
1133 ))}
1134 </div>
1135 )}
1136 {timelineEntry.message.text && (
1137 <pre className="whitespace-pre-wrap break-words font-mono text-sm leading-relaxed text-foreground">
1138 {timelineEntry.message.text}
1139 </pre>
1140 )}
886 <p className="mt-1.5 text-right text-[10px] text-muted-foreground/30">1141 <p className="mt-1.5 text-right text-[10px] text-muted-foreground/30">
887 {formatTimestamp(timelineEntry.message.createdAt)}1142 {formatTimestamp(timelineEntry.message.createdAt)}
888 </p>1143 </p>
...@@ -945,9 +1200,48 @@ export default function ChatView() {...@@ -945,9 +1200,48 @@ export default function ChatView() {
945 {/* Input bar */}1200 {/* Input bar */}
946 <div className="px-5 pb-1 pt-2">1201 <div className="px-5 pb-1 pt-2">
947 <form onSubmit={onSend} className="mx-auto max-w-3xl">1202 <form onSubmit={onSend} className="mx-auto max-w-3xl">
948 <div className="group rounded-[20px] border border-border bg-card transition-colors duration-200 focus-within:border-ring">1203 <div
1204 className={`group rounded-[20px] border bg-card transition-colors duration-200 focus-within:border-ring ${
1205 isDragOverComposer ? "border-primary/70 bg-accent/30" : "border-border"
1206 }`}
1207 onDragEnter={onComposerDragEnter}
1208 onDragOver={onComposerDragOver}
1209 onDragLeave={onComposerDragLeave}
1210 onDrop={onComposerDrop}
1211 >
949 {/* Textarea area */}1212 {/* Textarea area */}
950 <div className="px-4 pt-4 pb-2">1213 <div className="px-4 pt-4 pb-2">
1214 {composerImages.length > 0 && (
1215 <div className="mb-3 flex flex-wrap gap-2">
1216 {composerImages.map((image) => (
1217 <div
1218 key={image.id}
1219 className="relative h-16 w-16 overflow-hidden rounded-lg border border-border/80 bg-background"
1220 >
1221 {image.previewUrl ? (
1222 <img
1223 src={image.previewUrl}
1224 alt={image.name}
1225 className="h-full w-full cursor-zoom-in object-cover"
1226 onClick={() => openImageDialog(image.previewUrl, image.name)}
1227 />
1228 ) : (
1229 <div className="flex h-full w-full items-center justify-center px-1 text-center text-[10px] text-muted-foreground/70">
1230 {image.name}
1231 </div>
1232 )}
1233 <button
1234 type="button"
1235 className="absolute right-1 top-1 flex h-4 w-4 items-center justify-center rounded-full bg-background/80 text-[11px] leading-none text-foreground transition-colors duration-150 hover:bg-background"
1236 onClick={() => removeComposerImage(image.id)}
1237 aria-label={`Remove ${image.name}`}
1238 >
1239 ×
1240 </button>
1241 </div>
1242 ))}
1243 </div>
1244 )}
951 <textarea1245 <textarea
952 ref={textareaRef}1246 ref={textareaRef}
953 className="w-full resize-none bg-transparent text-[14px] leading-relaxed text-foreground placeholder:text-muted-foreground/35 focus:outline-none"1247 className="w-full resize-none bg-transparent text-[14px] leading-relaxed text-foreground placeholder:text-muted-foreground/35 focus:outline-none"
...@@ -955,8 +1249,11 @@ export default function ChatView() {...@@ -955,8 +1249,11 @@ export default function ChatView() {
955 value={prompt}1249 value={prompt}
956 onChange={(e) => setPrompt(e.target.value)}1250 onChange={(e) => setPrompt(e.target.value)}
957 onKeyDown={onKeyDown}1251 onKeyDown={onKeyDown}
1252 onPaste={onComposerPaste}
958 placeholder={1253 placeholder={
959 phase === "disconnected" ? "Ask for follow-up changes" : "Ask anything..."1254 phase === "disconnected"
1255 ? "Ask for follow-up changes or attach images"
1256 : "Ask anything, or attach images..."
960 }1257 }
961 disabled={isSending || isConnecting}1258 disabled={isSending || isConnecting}
962 />1259 />
...@@ -1146,7 +1443,7 @@ export default function ChatView() {...@@ -1146,7 +1443,7 @@ export default function ChatView() {
1146 <button1443 <button
1147 type="submit"1444 type="submit"
1148 className="flex h-8 w-8 items-center justify-center rounded-full bg-primary/90 text-primary-foreground transition-all duration-150 hover:bg-primary hover:scale-105 disabled:opacity-30 disabled:hover:scale-100"1445 className="flex h-8 w-8 items-center justify-center rounded-full bg-primary/90 text-primary-foreground transition-all duration-150 hover:bg-primary hover:scale-105 disabled:opacity-30 disabled:hover:scale-100"
1149 disabled={isSending || isConnecting || !prompt.trim()}1446 disabled={isSending || isConnecting || (!prompt.trim() && composerImages.length === 0)}
1150 aria-label={1447 aria-label={
1151 isConnecting ? "Connecting" : isSending ? "Sending" : "Send message"1448 isConnecting ? "Connecting" : isSending ? "Sending" : "Send message"
1152 }1449 }
...@@ -1221,6 +1518,39 @@ export default function ChatView() {...@@ -1221,6 +1518,39 @@ export default function ChatView() {
1221 }1518 }
1222 />1519 />
1223 )}1520 )}
1521
1522 {expandedImage && (
1523 <div
1524 className="fixed inset-0 z-50 flex items-center justify-center bg-black/75 px-4 py-6 [-webkit-app-region:no-drag]"
1525 role="dialog"
1526 aria-modal="true"
1527 aria-label="Expanded image preview"
1528 onClick={() => setExpandedImage(null)}
1529 >
1530 <div
1531 className="relative isolate max-h-[92vh] max-w-[92vw]"
1532 onClick={(event) => event.stopPropagation()}
1533 >
1534 <button
1535 type="button"
1536 className="absolute right-2 top-2 z-30 flex h-8 w-8 cursor-pointer items-center justify-center rounded-full bg-black/60 text-xl leading-none text-white transition-colors duration-150 hover:bg-black/80 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80 [-webkit-app-region:no-drag]"
1537 onClick={() => setExpandedImage(null)}
1538 aria-label="Close image preview"
1539 >
1540 <span className="pointer-events-none">×</span>
1541 </button>
1542 <img
1543 src={expandedImage.src}
1544 alt={expandedImage.name}
1545 className="max-h-[86vh] max-w-[92vw] select-none rounded-lg border border-border/70 bg-background object-contain shadow-2xl"
1546 draggable={false}
1547 />
1548 <p className="mt-2 max-w-[92vw] truncate text-center text-xs text-muted-foreground/80">
1549 {expandedImage.name}
1550 </p>
1551 </div>
1552 </div>
1553 )}
1224 </div>1554 </div>
1225 );1555 );
1226}1556}
apps/web/src/historyBootstrap.test.ts+27
...@@ -91,4 +91,31 @@ describe("buildBootstrapInput", () => {...@@ -91,4 +91,31 @@ describe("buildBootstrapInput", () => {
91 expect(result.omittedCount).toBe(1);91 expect(result.omittedCount).toBe(1);
92 expect(result.truncated).toBe(true);92 expect(result.truncated).toBe(true);
93 });93 });
94
95 it("captures user image attachment context in transcript blocks", () => {
96 const result = buildBootstrapInput(
97 [
98 {
99 id: "u-image",
100 role: "user",
101 text: "",
102 images: [
103 {
104 id: "img-1",
105 name: "screenshot.png",
106 mimeType: "image/png",
107 sizeBytes: 2_048,
108 },
109 ],
110 createdAt: "2026-02-09T00:00:00.000Z",
111 streaming: false,
112 },
113 ],
114 "What does this error mean?",
115 1_500,
116 );
117
118 expect(result.text).toContain("Attached image");
119 expect(result.text).toContain("screenshot.png");
120 });
94});121});
apps/web/src/historyBootstrap.ts+28-3
...@@ -18,8 +18,33 @@ function messageRoleLabel(message: ChatMessage): "USER" | "ASSISTANT" {...@@ -18,8 +18,33 @@ function messageRoleLabel(message: ChatMessage): "USER" | "ASSISTANT" {
18 return message.role === "assistant" ? "ASSISTANT" : "USER";18 return message.role === "assistant" ? "ASSISTANT" : "USER";
19}19}
2020
21function imageSummary(message: ChatMessage): string | null {
22 const count = message.images?.length ?? 0;
23 if (count === 0) {
24 return null;
25 }
26
27 const names = message.images?.slice(0, 3).map((image) => image.name) ?? [];
28 const namesSummary = names.join(", ");
29 const extraCount = count - names.length;
30 const extraSummary = extraCount > 0 ? ` (+${extraCount} more)` : "";
31 return `[Attached image${count === 1 ? "" : "s"}: ${namesSummary}${extraSummary}]`;
32}
33
21function buildMessageBlock(message: ChatMessage): string {34function buildMessageBlock(message: ChatMessage): string {
22 return `${messageRoleLabel(message)}:\n${message.text}`;35 const text = message.text;
36 const images = imageSummary(message);
37
38 if (text && images) {
39 return `${messageRoleLabel(message)}:\n${text}\n${images}`;
40 }
41 if (text) {
42 return `${messageRoleLabel(message)}:\n${text}`;
43 }
44 if (images) {
45 return `${messageRoleLabel(message)}:\n${images}`;
46 }
47 return `${messageRoleLabel(message)}:\n(empty message)`;
23}48}
2449
25function finalizeWithPrompt(50function finalizeWithPrompt(
...@@ -68,7 +93,7 @@ export function buildBootstrapInput(...@@ -68,7 +93,7 @@ export function buildBootstrapInput(
68 let includedNewestFirst: string[] = [];93 let includedNewestFirst: string[] = [];
69 for (const block of newestFirstBlocks) {94 for (const block of newestFirstBlocks) {
70 const nextNewestFirst = [...includedNewestFirst, block];95 const nextNewestFirst = [...includedNewestFirst, block];
71 const nextChronological = [...nextNewestFirst].reverse();96 const nextChronological = nextNewestFirst.toReversed();
72 const omittedCount = newestFirstBlocks.length - nextChronological.length;97 const omittedCount = newestFirstBlocks.length - nextChronological.length;
73 const transcriptBody =98 const transcriptBody =
74 omittedCount > 099 omittedCount > 0
...@@ -80,7 +105,7 @@ export function buildBootstrapInput(...@@ -80,7 +105,7 @@ export function buildBootstrapInput(
80 includedNewestFirst = nextNewestFirst;105 includedNewestFirst = nextNewestFirst;
81 }106 }
82107
83 let includedChronological = [...includedNewestFirst].reverse();108 let includedChronological = includedNewestFirst.toReversed();
84 while (true) {109 while (true) {
85 const omittedCount = newestFirstBlocks.length - includedChronological.length;110 const omittedCount = newestFirstBlocks.length - includedChronological.length;
86 const transcriptBody =111 const transcriptBody =
apps/web/src/persistenceSchema.test.ts+26-1
...@@ -200,6 +200,15 @@ describe("toPersistedState", () => {...@@ -200,6 +200,15 @@ describe("toPersistedState", () => {
200 id: "m-1",200 id: "m-1",
201 role: "user",201 role: "user",
202 text: "Hi",202 text: "Hi",
203 images: [
204 {
205 id: "img-1",
206 name: "diagram.png",
207 mimeType: "image/png",
208 sizeBytes: 4_096,
209 previewUrl: "blob:preview-1",
210 },
211 ],
203 createdAt: "2026-02-08T10:00:00.000Z",212 createdAt: "2026-02-08T10:00:00.000Z",
204 streaming: false,213 streaming: false,
205 },214 },
...@@ -236,7 +245,23 @@ describe("toPersistedState", () => {...@@ -236,7 +245,23 @@ describe("toPersistedState", () => {
236 model: "gpt-5.3-codex",245 model: "gpt-5.3-codex",
237 terminalOpen: true,246 terminalOpen: true,
238 terminalHeight: 320,247 terminalHeight: 320,
239 messages: thread.messages,248 messages: [
249 {
250 id: "m-1",
251 role: "user",
252 text: "Hi",
253 images: [
254 {
255 id: "img-1",
256 name: "diagram.png",
257 mimeType: "image/png",
258 sizeBytes: 4_096,
259 },
260 ],
261 createdAt: "2026-02-08T10:00:00.000Z",
262 streaming: false,
263 },
264 ],
240 createdAt: thread.createdAt,265 createdAt: thread.createdAt,
241 branch: null,266 branch: null,
242 worktreePath: null,267 worktreePath: null,
apps/web/src/persistenceSchema.ts+40-5
...@@ -23,6 +23,16 @@ const persistedMessageSchema = z.object({...@@ -23,6 +23,16 @@ const persistedMessageSchema = z.object({
23 id: z.string().min(1),23 id: z.string().min(1),
24 role: z.enum(["user", "assistant"]),24 role: z.enum(["user", "assistant"]),
25 text: z.string(),25 text: z.string(),
26 images: z
27 .array(
28 z.object({
29 id: z.string().min(1),
30 name: z.string().min(1),
31 mimeType: z.string().min(1),
32 sizeBytes: z.number().int().min(1),
33 }),
34 )
35 .optional(),
26 createdAt: z.string().min(1),36 createdAt: z.string().min(1),
27 streaming: z.boolean(),37 streaming: z.boolean(),
28});38});
...@@ -126,10 +136,19 @@ function hydrateThread(...@@ -126,10 +136,19 @@ function hydrateThread(
126 terminalOpen: thread.terminalOpen ?? false,136 terminalOpen: thread.terminalOpen ?? false,
127 terminalHeight: thread.terminalHeight ?? DEFAULT_THREAD_TERMINAL_HEIGHT,137 terminalHeight: thread.terminalHeight ?? DEFAULT_THREAD_TERMINAL_HEIGHT,
128 session: null,138 session: null,
129 messages: thread.messages.map((message) => ({139 messages: thread.messages.map((message) => {
130 ...message,140 const hydratedImages = message.images?.map((image) => ({
131 streaming: false,141 ...image,
132 })),142 }));
143 return {
144 id: message.id,
145 role: message.role,
146 text: message.text,
147 ...(hydratedImages && hydratedImages.length > 0 ? { images: hydratedImages } : {}),
148 createdAt: message.createdAt,
149 streaming: false,
150 };
151 }),
133 events: [],152 events: [],
134 error: null,153 error: null,
135 createdAt: thread.createdAt,154 createdAt: thread.createdAt,
...@@ -189,7 +208,23 @@ export function toPersistedState(...@@ -189,7 +208,23 @@ export function toPersistedState(
189 model: thread.model,208 model: thread.model,
190 terminalOpen: thread.terminalOpen,209 terminalOpen: thread.terminalOpen,
191 terminalHeight: thread.terminalHeight,210 terminalHeight: thread.terminalHeight,
192 messages: thread.messages,211 messages: thread.messages.map((message) => ({
212 id: message.id,
213 role: message.role,
214 text: message.text,
215 ...(message.images && message.images.length > 0
216 ? {
217 images: message.images.map((image) => ({
218 id: image.id,
219 name: image.name,
220 mimeType: image.mimeType,
221 sizeBytes: image.sizeBytes,
222 })),
223 }
224 : {}),
225 createdAt: message.createdAt,
226 streaming: message.streaming,
227 })),
193 createdAt: thread.createdAt,228 createdAt: thread.createdAt,
194 branch: thread.branch,229 branch: thread.branch,
195 worktreePath: thread.worktreePath,230 worktreePath: thread.worktreePath,
apps/web/src/store.ts+9-1
...@@ -13,6 +13,7 @@ import { resolveModelSlug } from "./model-logic";...@@ -13,6 +13,7 @@ import { resolveModelSlug } from "./model-logic";
13import { hydratePersistedState, toPersistedState } from "./persistenceSchema";13import { hydratePersistedState, toPersistedState } from "./persistenceSchema";
14import { applyEventToMessages, asObject, asString, evolveSession } from "./session-logic";14import { applyEventToMessages, asObject, asString, evolveSession } from "./session-logic";
15import {15import {
16 type ChatImageAttachment,
16 DEFAULT_RUNTIME_MODE,17 DEFAULT_RUNTIME_MODE,
17 type Project,18 type Project,
18 type RuntimeMode,19 type RuntimeMode,
...@@ -37,7 +38,13 @@ type Action =...@@ -37,7 +38,13 @@ type Action =
37 activeAssistantItemRef: { current: string | null };38 activeAssistantItemRef: { current: string | null };
38 }39 }
39 | { type: "UPDATE_SESSION"; threadId: string; session: ProviderSession }40 | { type: "UPDATE_SESSION"; threadId: string; session: ProviderSession }
40 | { type: "PUSH_USER_MESSAGE"; threadId: string; id: string; text: string }41 | {
42 type: "PUSH_USER_MESSAGE";
43 threadId: string;
44 id: string;
45 text: string;
46 images?: ChatImageAttachment[];
47 }
41 | { type: "SET_ERROR"; threadId: string; error: string | null }48 | { type: "SET_ERROR"; threadId: string; error: string | null }
42 | { type: "SET_THREAD_TITLE"; threadId: string; title: string }49 | { type: "SET_THREAD_TITLE"; threadId: string; title: string }
43 | { type: "SET_THREAD_MODEL"; threadId: string; model: string }50 | { type: "SET_THREAD_MODEL"; threadId: string; model: string }
...@@ -380,6 +387,7 @@ export function reducer(state: AppState, action: Action): AppState {...@@ -380,6 +387,7 @@ export function reducer(state: AppState, action: Action): AppState {
380 id: action.id,387 id: action.id,
381 role: "user" as const,388 role: "user" as const,
382 text: action.text,389 text: action.text,
390 ...(action.images && action.images.length > 0 ? { images: action.images } : {}),
383 createdAt: new Date().toISOString(),391 createdAt: new Date().toISOString(),
384 streaming: false,392 streaming: false,
385 },393 },
apps/web/src/types.ts+9
...@@ -5,10 +5,19 @@ export type RuntimeMode = "approval-required" | "full-access";...@@ -5,10 +5,19 @@ export type RuntimeMode = "approval-required" | "full-access";
5export const DEFAULT_RUNTIME_MODE: RuntimeMode = "full-access";5export const DEFAULT_RUNTIME_MODE: RuntimeMode = "full-access";
6export const DEFAULT_THREAD_TERMINAL_HEIGHT = 280;6export const DEFAULT_THREAD_TERMINAL_HEIGHT = 280;
77
8export interface ChatImageAttachment {
9 id: string;
10 name: string;
11 mimeType: string;
12 sizeBytes: number;
13 previewUrl?: string;
14}
15
8export interface ChatMessage {16export interface ChatMessage {
9 id: string;17 id: string;
10 role: "user" | "assistant";18 role: "user" | "assistant";
11 text: string;19 text: string;
20 images?: ChatImageAttachment[];
12 createdAt: string;21 createdAt: string;
13 streaming: boolean;22 streaming: boolean;
14}23}
packages/contracts/src/provider.test.ts+56
...@@ -1,6 +1,7 @@...@@ -1,6 +1,7 @@
1import { describe, expect, it } from "vitest";1import { describe, expect, it } from "vitest";
22
3import {3import {
4 PROVIDER_SEND_TURN_MAX_IMAGES,
4 providerEventSchema,5 providerEventSchema,
5 providerRespondToRequestInputSchema,6 providerRespondToRequestInputSchema,
6 providerSendTurnInputSchema,7 providerSendTurnInputSchema,
...@@ -40,9 +41,64 @@ describe("providerSendTurnInputSchema", () => {...@@ -40,9 +41,64 @@ describe("providerSendTurnInputSchema", () => {
40 effort: " high ",41 effort: " high ",
41 });42 });
42 expect(parsed.input).toBe("summarize this repo");43 expect(parsed.input).toBe("summarize this repo");
44 expect(parsed.images).toEqual([]);
43 expect(parsed.model).toBe("gpt-5.2-codex");45 expect(parsed.model).toBe("gpt-5.2-codex");
44 expect(parsed.effort).toBe("high");46 expect(parsed.effort).toBe("high");
45 });47 });
48
49 it("accepts image-only turns", () => {
50 const parsed = providerSendTurnInputSchema.parse({
51 sessionId: "sess_1",
52 images: [
53 {
54 name: "diagram.png",
55 mimeType: "image/png",
56 sizeBytes: 1_024,
57 dataUrl: "data:image/png;base64,AAAA",
58 },
59 ],
60 });
61 expect(parsed.input).toBeUndefined();
62 expect(parsed.images).toHaveLength(1);
63 });
64
65 it("rejects turns with neither text nor images", () => {
66 expect(() =>
67 providerSendTurnInputSchema.parse({
68 sessionId: "sess_1",
69 }),
70 ).toThrow();
71 });
72
73 it("rejects non-image data urls", () => {
74 expect(() =>
75 providerSendTurnInputSchema.parse({
76 sessionId: "sess_1",
77 images: [
78 {
79 name: "not-image.txt",
80 mimeType: "text/plain",
81 sizeBytes: 25,
82 dataUrl: "data:text/plain;base64,QQ==",
83 },
84 ],
85 }),
86 ).toThrow();
87 });
88
89 it("rejects more than the max image count", () => {
90 expect(() =>
91 providerSendTurnInputSchema.parse({
92 sessionId: "sess_1",
93 images: Array.from({ length: PROVIDER_SEND_TURN_MAX_IMAGES + 1 }, (_, index) => ({
94 name: `image-${index}.png`,
95 mimeType: "image/png",
96 sizeBytes: 1_024,
97 dataUrl: "data:image/png;base64,AAAA",
98 })),
99 }),
100 ).toThrow();
101 });
46});102});
47103
48describe("providerEventSchema", () => {104describe("providerEventSchema", () => {
packages/contracts/src/provider.ts+37-1
...@@ -55,12 +55,46 @@ export const providerSessionStartInputSchema = z.object({...@@ -55,12 +55,46 @@ export const providerSessionStartInputSchema = z.object({
55});55});
5656
57export const PROVIDER_SEND_TURN_MAX_INPUT_CHARS = 120_000;57export const PROVIDER_SEND_TURN_MAX_INPUT_CHARS = 120_000;
58export const PROVIDER_SEND_TURN_MAX_IMAGES = 8;
59export const PROVIDER_SEND_TURN_MAX_IMAGE_BYTES = 10 * 1024 * 1024;
60export const PROVIDER_SEND_TURN_MAX_IMAGE_DATA_URL_CHARS = 14_000_000;
61
62export const providerSendTurnImageInputSchema = z
63 .object({
64 name: z.string().trim().min(1).max(255),
65 mimeType: z
66 .string()
67 .trim()
68 .min(1)
69 .max(100)
70 .regex(/^image\//i, "mimeType must be an image/* MIME type"),
71 sizeBytes: z.number().int().min(1).max(PROVIDER_SEND_TURN_MAX_IMAGE_BYTES),
72 dataUrl: z.string().trim().min(1).max(PROVIDER_SEND_TURN_MAX_IMAGE_DATA_URL_CHARS),
73 })
74 .superRefine((value, ctx) => {
75 if (!value.dataUrl.startsWith("data:image/")) {
76 ctx.addIssue({
77 code: z.ZodIssueCode.custom,
78 message: "Image dataUrl must start with data:image/",
79 path: ["dataUrl"],
80 });
81 }
82 });
5883
59export const providerSendTurnInputSchema = z.object({84export const providerSendTurnInputSchema = z.object({
60 sessionId: z.string().min(1),85 sessionId: z.string().min(1),
61 input: z.string().trim().min(1).max(PROVIDER_SEND_TURN_MAX_INPUT_CHARS),86 input: z.string().trim().min(1).max(PROVIDER_SEND_TURN_MAX_INPUT_CHARS).optional(),
87 images: z.array(providerSendTurnImageInputSchema).max(PROVIDER_SEND_TURN_MAX_IMAGES).default([]),
62 model: z.string().trim().min(1).optional(),88 model: z.string().trim().min(1).optional(),
63 effort: z.string().trim().min(1).optional(),89 effort: z.string().trim().min(1).optional(),
90}).superRefine((value, ctx) => {
91 if (!value.input && value.images.length === 0) {
92 ctx.addIssue({
93 code: z.ZodIssueCode.custom,
94 message: "Either input text or at least one image is required",
95 path: ["input"],
96 });
97 }
64});98});
6599
66export const providerTurnStartResultSchema = z.object({100export const providerTurnStartResultSchema = z.object({
...@@ -110,6 +144,8 @@ export type ProviderApprovalDecision = z.infer<typeof providerApprovalDecisionSc...@@ -110,6 +144,8 @@ export type ProviderApprovalDecision = z.infer<typeof providerApprovalDecisionSc
110export type ProviderSessionStatus = z.infer<typeof providerSessionStatusSchema>;144export type ProviderSessionStatus = z.infer<typeof providerSessionStatusSchema>;
111export type ProviderSession = z.infer<typeof providerSessionSchema>;145export type ProviderSession = z.infer<typeof providerSessionSchema>;
112export type ProviderSessionStartInput = z.input<typeof providerSessionStartInputSchema>;146export type ProviderSessionStartInput = z.input<typeof providerSessionStartInputSchema>;
147export type ProviderSendTurnImage = z.infer<typeof providerSendTurnImageInputSchema>;
148export type ProviderSendTurnImageInput = z.input<typeof providerSendTurnImageInputSchema>;
113export type ProviderSendTurnInput = z.input<typeof providerSendTurnInputSchema>;149export type ProviderSendTurnInput = z.input<typeof providerSendTurnInputSchema>;
114export type ProviderTurnStartResult = z.infer<typeof providerTurnStartResultSchema>;150export type ProviderTurnStartResult = z.infer<typeof providerTurnStartResultSchema>;
115export type ProviderInterruptTurnInput = z.input<typeof providerInterruptTurnInputSchema>;151export type ProviderInterruptTurnInput = z.input<typeof providerInterruptTurnInputSchema>;